/* ============================================================
   Delgado Mental Health LLC — main stylesheet
   Palette (LIGHT):
     --bone       #F3F1ED  morning-room body background
     --ink        #33313B  plum-ink text
     --fig        #7D5A78  calm-fig accent (therapist armchair)
     --panel      #FBFAF7  brightest raised faces
     --deep       #4A3A4E  still-deep fig panels
     --sage       #8FA094  mute-sage sparing tertiary
     --rule       #DCD5D3  plush-rule hairlines
   No gradients on text. No rgba(). No opacity decimals.
   ============================================================ */

:root {
  --bone: #F3F1ED;
  --ink: #33313B;
  --fig: #7D5A78;
  --panel: #FBFAF7;
  --deep: #4A3A4E;
  --sage: #8FA094;
  --rule: #DCD5D3;
  --fig-deep: #5E4359;
  --fig-soft: #E4DBE3;
  --panel-shade: #EDE9E5;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bone);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--fig);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--fig-deep);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 0.01em;
}

p {
  margin-top: 0;
  margin-bottom: 1.1em;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-aid {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--deep);
  color: var(--bone);
  padding: 10px 18px;
  z-index: 40;
}

.skip-aid:focus {
  left: 12px;
  top: 12px;
}

/* ============================================================
   NAVIGATION — SESSION DIAL RAIL (.hourrail)
   A thin walnut-tone rail with five small round CLOCK DIALS
   hanging from it, each with a tab below carrying the link.
   ============================================================ */

.hourrail {
  position: relative;
  z-index: 30;
  background-color: #6A4C63;
  background-image: linear-gradient(180deg, #6A4C63 0%, #5D4359 100%);
  border-bottom: 4px solid var(--deep);
  padding-top: 14px;
  padding-bottom: 0;
}

.hourrail-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hourrail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bone);
  padding-top: 6px;
  padding-bottom: 14px;
  flex: 0 0 auto;
}

.hourrail-mantel {
  position: relative;
  width: 54px;
  height: 52px;
  background-color: var(--panel);
  border: 3px solid #3A2E3A;
  border-radius: 26px 26px 8px 8px;
  flex: 0 0 auto;
}

.hourrail-mantel::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  background-color: var(--deep);
  border-radius: 50%;
}

.hourrail-mantel::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background-color: var(--fig);
  border-radius: 50%;
}

.hourrail-mantel-hand {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 2px;
  height: 14px;
  background-color: var(--ink);
  transform-origin: bottom center;
  transform: rotate(35deg);
}

.hourrail-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.hourrail-brand-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bone);
}

.hourrail-brand-sub {
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #E7DEE6;
  margin-top: 3px;
}

.hourrail-linkwrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-bottom: 0;
}

.hourdial {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 74px;
}

.hourdial.drop-1 { margin-top: 2px; }
.hourdial.drop-2 { margin-top: 12px; }
.hourdial.drop-3 { margin-top: 5px; }
.hourdial.drop-4 { margin-top: 14px; }
.hourdial.drop-5 { margin-top: 7px; }

.hourdial-face {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--panel);
  border: 3px solid #3A2E3A;
  box-shadow: 0 2px 0 #3A2E3A;
}

.hourdial-face::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  background-color: var(--fig);
  border-radius: 50%;
}

.hourdial-tick {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background-color: var(--ink);
  transform-origin: 1px 23px;
}

.hourdial-t12 { transform: rotate(0deg); }
.hourdial-t3  { transform: rotate(90deg); }
.hourdial-t6  { transform: rotate(180deg); }
.hourdial-t9  { transform: rotate(270deg); }

.hourdial-hand-h {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  background-color: var(--ink);
  transform-origin: bottom center;
  border-radius: 2px;
}

.hourdial-hand-m {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background-color: var(--fig-deep);
  transform-origin: bottom center;
  border-radius: 2px;
}

.hourdial-h1 { transform: rotate(300deg); }
.hourdial-h2 { transform: rotate(40deg); }
.hourdial-h3 { transform: rotate(140deg); }
.hourdial-h4 { transform: rotate(220deg); }
.hourdial-h5 { transform: rotate(15deg); }

.hourdial-m1 { transform: rotate(72deg); }
.hourdial-m2 { transform: rotate(198deg); }
.hourdial-m3 { transform: rotate(264deg); }
.hourdial-m4 { transform: rotate(330deg); }
.hourdial-m5 { transform: rotate(120deg); }

.hourdial-tab {
  margin-top: 6px;
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--panel);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 4px;
  border: 2px solid #3A2E3A;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 700;
}

.hourdial-tab:hover,
.hourdial-tab:focus {
  background-color: var(--fig);
  color: var(--bone);
  text-decoration: none;
}

.hourdial-tab.is-current {
  background-color: var(--deep);
  color: var(--bone);
}

.hourrail-toggle {
  display: none;
  background-color: var(--panel);
  color: var(--ink);
  border: 2px solid #3A2E3A;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ============================================================
   HERO — APPOINTMENT CLOCK BAY (.bigclock)
   ============================================================ */

.bigclock {
  background-color: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding: 70px 0 80px 0;
  position: relative;
}

.bigclock-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.bigclock-copy {
  flex: 0 0 55%;
  max-width: 55%;
}

.bigclock-kicker {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fig);
  background-color: var(--panel);
  border: 1px solid var(--rule);
  border-bottom: 3px solid var(--fig);
  padding: 7px 16px;
  margin-bottom: 22px;
}

.bigclock-title {
  font-size: 54px;
  line-height: 1.08;
  margin-bottom: 24px;
  font-weight: 700;
}

.bigclock-title .hourword {
  color: var(--fig);
  font-style: italic;
}

.bigclock-lede {
  font-size: 18px;
  color: #443F4D;
  max-width: 560px;
  margin-bottom: 32px;
}

.bigclock-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.slotship {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--fig);
  color: var(--bone);
  border: 2px solid var(--fig-deep);
  border-radius: 4px;
  padding: 12px 22px 13px 22px;
  text-decoration: none;
  min-width: 190px;
}

.slotship:hover,
.slotship:focus {
  background-color: var(--fig-deep);
  color: var(--bone);
  text-decoration: none;
}

.slotship-code {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #EADCE8;
  margin-bottom: 3px;
}

.slotship-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.slotship-alt {
  background-color: var(--panel);
  color: var(--ink);
  border: 2px solid var(--fig);
}

.slotship-alt:hover,
.slotship-alt:focus {
  background-color: var(--fig);
  color: var(--bone);
}

.slotship-alt .slotship-code {
  color: var(--fig);
}

.slotship-alt:hover .slotship-code,
.slotship-alt:focus .slotship-code {
  color: #EADCE8;
}

.bigclock-visual {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clockcrown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.clockcrown-bell {
  width: 34px;
  height: 34px;
  background-color: var(--fig);
  border: 3px solid #3A2E3A;
  border-radius: 50% 50% 6px 6px;
}

.clockcrown-stem {
  width: 10px;
  height: 16px;
  background-color: #3A2E3A;
  margin-bottom: 0;
}

.clockcrown-hammer {
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 18px;
  background-color: var(--deep);
  border-radius: 3px;
}

.bigface {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background-color: var(--panel);
  border: 10px solid var(--fig);
  box-shadow: 0 0 0 4px #3A2E3A, 0 8px 22px #C9C1C7;
}

.bigface-ring {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 50%;
  border: 2px solid var(--rule);
}

.bigface-tick {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  background-color: var(--ink);
  transform-origin: 1.5px 144px;
}

.bigface-t1  { transform: rotate(0deg); }
.bigface-t2  { transform: rotate(30deg); }
.bigface-t3  { transform: rotate(60deg); }
.bigface-t4  { transform: rotate(90deg); }
.bigface-t5  { transform: rotate(120deg); }
.bigface-t6  { transform: rotate(150deg); }
.bigface-t7  { transform: rotate(180deg); }
.bigface-t8  { transform: rotate(210deg); }
.bigface-t9  { transform: rotate(240deg); }
.bigface-t10 { transform: rotate(270deg); }
.bigface-t11 { transform: rotate(300deg); }
.bigface-t12 { transform: rotate(330deg); }

.bigface-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--fig);
  border: 2px solid #3A2E3A;
  top: 34px;
  left: 50%;
  margin-left: -7px;
  transform-origin: 7px 129px;
}

.bigface-d1  { transform: rotate(0deg); }
.bigface-d2  { transform: rotate(60deg); }
.bigface-d3  { transform: rotate(120deg); }
.bigface-d4  { transform: rotate(180deg); }
.bigface-d5  { transform: rotate(240deg); }
.bigface-d6  { transform: rotate(300deg); }

.bigface-hand-h {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 8px;
  height: 96px;
  margin-left: -4px;
  background-color: var(--ink);
  transform-origin: bottom center;
  transform: rotate(300deg);
  border-radius: 4px;
}

.bigface-hand-m {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 5px;
  height: 132px;
  margin-left: -2.5px;
  background-color: var(--ink);
  transform-origin: bottom center;
  transform: rotate(60deg);
  border-radius: 3px;
}

.bigface-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background-color: var(--fig);
  border: 3px solid #3A2E3A;
}

.pendcase {
  width: 120px;
  height: 118px;
  background-color: var(--deep);
  border: 4px solid #3A2E3A;
  border-top: none;
  border-radius: 0 0 12px 12px;
  position: relative;
  margin-top: -4px;
  display: flex;
  justify-content: center;
}

.pendbar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 74px;
  margin-left: -2px;
  background-color: #CDBECB;
  transform-origin: top center;
  transform: rotate(9deg);
}

.penddisc {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background-color: var(--fig);
  border: 3px solid #CDBECB;
}

.bigclock-caption {
  margin-top: 16px;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep);
  text-align: center;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.secthead {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.secthead-kicker {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}

.secthead-title {
  font-size: 38px;
  margin-bottom: 14px;
}

.secthead-sub {
  font-size: 17px;
  color: #4B4653;
  max-width: 760px;
}

/* ============================================================
   INTRO PLANNER — a short prose block before the agenda
   ============================================================ */

.plannerintro {
  padding: 74px 0 40px 0;
  background-color: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.plannerintro-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 44px;
  align-items: flex-start;
}

.plannerintro-main {
  flex: 1 1 62%;
}

.plannerintro-side {
  flex: 0 0 34%;
  background-color: var(--bone);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--fig);
  padding: 24px 26px;
}

.plannerintro-side h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  display: inline-block;
  background-color: var(--fig-soft);
  color: var(--fig-deep);
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}

.chip-sage {
  background-color: #E3E7E1;
  color: #4E5A4F;
}

/* ============================================================
   SECTIONS: HOURLY AGENDA BANDS (.agendaband)
   ============================================================ */

.agendaband {
  background-color: var(--bone);
  padding: 60px 0 70px 0;
  position: relative;
}

.agendaheading {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 30px 24px;
}

.agendalist {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.agendalist::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 4px;
  background-color: var(--rule);
}

.slotband {
  display: flex;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--rule);
  border-left: none;
  margin-bottom: 14px;
  background-color: var(--panel);
}

.slotband-alt {
  background-color: var(--bone);
}

.slotband-deep {
  background-color: var(--deep);
  border-color: var(--deep);
}

.slottime {
  flex: 0 0 176px;
  max-width: 176px;
  background-color: var(--deep);
  color: var(--bone);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  margin-left: 24px;
}

.slotband-deep .slottime {
  background-color: #3A2E3A;
}

.slottime-hour {
  font-size: 30px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: 0.02em;
  line-height: 1;
}

.slottime-label {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D7C8D4;
  margin-top: 8px;
}

.slotchip {
  display: inline-block;
  margin-top: 14px;
  background-color: var(--sage);
  color: #2C352D;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  font-weight: 700;
}

.slotpanel {
  flex: 1 1 auto;
  padding: 26px 30px 26px 74px;
  position: relative;
}

.slotpanel h3 {
  font-size: 25px;
  margin-bottom: 10px;
}

.slotpanel h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--fig);
}

.slotpanel h3 a:hover,
.slotpanel h3 a:focus {
  color: var(--fig);
  text-decoration: none;
}

.slotpanel p {
  color: #443F4D;
  margin-bottom: 0;
}

.slotband-deep .slotpanel h3 a {
  color: var(--bone);
  border-bottom-color: #CDBECB;
}

.slotband-deep .slotpanel h3 a:hover,
.slotband-deep .slotpanel h3 a:focus {
  color: #E4DBE3;
}

.slotband-deep .slotpanel p {
  color: #ECE4EB;
}

.clockdot {
  position: absolute;
  top: 26px;
  left: 24px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--panel);
  border: 2px solid #3A2E3A;
}

.slotband-deep .clockdot {
  background-color: #5E4359;
  border-color: #CDBECB;
}

.clockdot::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  background-color: var(--ink);
  transform-origin: 1px 12px;
  transform: rotate(30deg);
}

.clockdot::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background-color: var(--fig);
  transform-origin: 1px 12px;
  transform: rotate(210deg);
}

.clockdot-c1::before { transform: rotate(0deg); }
.clockdot-c1::after  { transform: rotate(270deg); }
.clockdot-c2::before { transform: rotate(30deg); }
.clockdot-c2::after  { transform: rotate(90deg); }
.clockdot-c3::before { transform: rotate(60deg); }
.clockdot-c3::after  { transform: rotate(150deg); }
.clockdot-c4::before { transform: rotate(90deg); }
.clockdot-c4::after  { transform: rotate(210deg); }
.clockdot-c5::before { transform: rotate(120deg); }
.clockdot-c5::after  { transform: rotate(270deg); }
.clockdot-c6::before { transform: rotate(150deg); }
.clockdot-c6::after  { transform: rotate(330deg); }

/* ============================================================
   QUIET HOURS ACCENT STRIP
   ============================================================ */

.quiethours {
  background-color: var(--fig);
  color: var(--bone);
  position: relative;
  padding: 34px 0;
  border-top: 2px solid var(--fig-deep);
  border-bottom: 2px solid var(--fig-deep);
}

.quiethours::before,
.quiethours::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--rule);
}

.quiethours::before { top: 7px; }
.quiethours::after  { bottom: 7px; }

.quiethours-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.quiethours-badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--panel);
  border: 3px solid var(--fig-deep);
  position: relative;
}

.quiethours-badge::before,
.quiethours-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--ink);
  transform-origin: bottom center;
}

.quiethours-badge::before {
  width: 3px;
  height: 13px;
  margin-left: -1.5px;
  margin-top: -13px;
  transform: rotate(40deg);
}

.quiethours-badge::after {
  width: 2px;
  height: 17px;
  margin-left: -1px;
  margin-top: -17px;
  transform: rotate(190deg);
  background-color: var(--fig);
}

.quiethours-text {
  font-size: 19px;
  line-height: 1.5;
  color: var(--bone);
  margin: 0;
}

.quiethours-text strong {
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

/* ============================================================
   PRODUCT PANELS — deep / panel prose sections
   ============================================================ */

.deepread {
  background-color: var(--deep);
  color: var(--bone);
  padding: 70px 0;
}

.deepread-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.deepread-col {
  flex: 1 1 50%;
}

.deepread h2 {
  color: var(--bone);
  font-size: 34px;
  margin-bottom: 18px;
}

.deepread h3 {
  color: #EADCE8;
  font-size: 21px;
  margin-bottom: 9px;
  margin-top: 24px;
}

.deepread p {
  color: #ECE4EB;
}

.deepread a {
  color: #D7C0D4;
  border-bottom: 1px solid #8A6E86;
}

.deepread a:hover,
.deepread a:focus {
  color: #FFFFFF;
}

/* ============================================================
   PLANCOLS — service weave (three prose columns)
   ============================================================ */

.planweave {
  background-color: var(--panel);
  padding: 74px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.planweave-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.planweave-grid {
  display: flex;
  gap: 30px;
  margin-top: 34px;
  align-items: stretch;
  flex-wrap: wrap;
}

.planweave-card {
  flex: 1 1 300px;
  background-color: var(--bone);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--fig);
  padding: 26px 26px 28px 26px;
}

.planweave-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.planweave-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.planweave-card h3 a:hover,
.planweave-card h3 a:focus {
  color: var(--fig);
  text-decoration: none;
}

.planweave-meta {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}

/* ============================================================
   TIMELINE / PROCESS ROW (services page)
   ============================================================ */

.processrow {
  background-color: var(--bone);
  padding: 70px 0;
}

.processrow-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.processsteps {
  margin-top: 30px;
  border-left: 4px solid var(--rule);
  padding-left: 0;
}

.processstep {
  display: flex;
  gap: 20px;
  padding: 20px 0 20px 26px;
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.processstep:last-child {
  border-bottom: none;
}

.processstep-num {
  flex: 0 0 58px;
  max-width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--fig);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  border: 3px solid var(--fig-deep);
}

.processstep-body h3 {
  font-size: 21px;
  margin-bottom: 7px;
}

.processstep-body p {
  margin-bottom: 0;
  color: #443F4D;
}

/* ============================================================
   CTA BAND
   ============================================================ */

.ctaband {
  background-color: var(--deep);
  color: var(--bone);
  padding: 56px 0;
  border-top: 6px solid var(--fig);
}

.ctaband-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}

.ctaband h2 {
  color: var(--bone);
  font-size: 30px;
  margin-bottom: 8px;
}

.ctaband p {
  color: #ECE4EB;
  margin-bottom: 0;
  max-width: 620px;
}

.ctaband-cta {
  flex: 0 0 auto;
}

/* ============================================================
   FOOTER — EVENING WIND-DOWN BASE (.winddown)
   ============================================================ */

.winddown {
  background-color: var(--deep);
  color: var(--bone);
  position: relative;
  padding-top: 40px;
}

.winddown-sweep {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--sage);
}

.winddown-sweep::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 24px;
  width: 3px;
  height: 28px;
  background-color: var(--sage);
  transform: rotate(24deg);
  transform-origin: bottom center;
}

.winddown-sweep::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 24px;
  width: 3px;
  height: 28px;
  background-color: var(--sage);
  transform: rotate(-24deg);
  transform-origin: bottom center;
}

.winddown-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 24px 0 24px;
}

.winddown-groups {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 34px;
  border-bottom: 1px solid #6E5E70;
}

.windtab {
  flex: 1 1 200px;
  background-color: var(--panel);
  color: var(--ink);
  border: 2px solid #3A2E3A;
  border-radius: 4px;
  padding: 20px 22px 22px 22px;
}

.windtab h4 {
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fig-deep);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.windtab ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.windtab li {
  margin-bottom: 8px;
}

.windtab a {
  color: var(--ink);
  font-size: 15px;
}

.windtab a:hover,
.windtab a:focus {
  color: var(--fig);
}

.winddown-brandblock {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 0 30px 0;
}

.winddown-mantel {
  flex: 0 0 auto;
  position: relative;
  width: 84px;
  height: 74px;
  background-color: var(--panel);
  border: 4px solid #3A2E3A;
  border-radius: 40px 40px 10px 10px;
}

.winddown-mantel::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--deep);
  border-radius: 50%;
}

.winddown-mantel::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--fig);
  border-radius: 50%;
}

.winddown-mantel-hand {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  background-color: var(--ink);
  transform-origin: bottom center;
  transform: rotate(40deg);
}

.winddown-brandtext h3 {
  color: var(--bone);
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.winddown-brandtext p {
  color: #DCD2DA;
  max-width: 640px;
  margin-bottom: 0;
}

.winddown-base {
  background-color: #3A2E3A;
  border-top: 1px solid #6E5E70;
  padding: 20px 0 22px 0;
}

.winddown-base-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.winddown-contact {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #E4DBE3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.winddown-contact a {
  color: #E4DBE3;
}

.winddown-contact a:hover,
.winddown-contact a:focus {
  color: #FFFFFF;
}

.winddown-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #CFC3CD;
}

.winddown-bells {
  position: relative;
  width: 30px;
  height: 22px;
  flex: 0 0 auto;
}

.winddown-bells::before,
.winddown-bells::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 3px 3px;
  background-color: var(--fig);
  border: 2px solid #CDBECB;
}

.winddown-bells::before { left: 0; }
.winddown-bells::after  { right: 0; }

/* ============================================================
   SUBPAGE HEAD BAND
   ============================================================ */

.subhead {
  background-color: var(--bone);
  padding: 56px 0 44px 0;
  border-bottom: 1px solid var(--rule);
}

.subhead-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.subhead h1 {
  font-size: 44px;
  margin-bottom: 14px;
}

.subhead p {
  font-size: 18px;
  color: #443F4D;
  max-width: 760px;
  margin-bottom: 0;
}

.subhead-kicker {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fig);
  margin-bottom: 14px;
}

/* ============================================================
   SERVICE DETAIL BLOCKS (services page)
   ============================================================ */

.servblock {
  background-color: var(--panel);
  padding: 46px 0;
  border-bottom: 1px solid var(--rule);
}

.servblock-alt {
  background-color: var(--bone);
}

.servblock-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.servblock-mark {
  flex: 0 0 96px;
  max-width: 96px;
}

.servblock-clock {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--panel);
  border: 4px solid var(--fig);
}

.servblock-alt .servblock-clock {
  background-color: var(--bone);
}

.servblock-clock::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 10px;
  margin-left: -1.5px;
  background-color: var(--ink);
  transform-origin: 1.5px 32px;
  transform: rotate(0deg);
}

.servblock-clock::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 10px;
  margin-left: -1.5px;
  background-color: var(--ink);
  transform-origin: 1.5px 32px;
  transform: rotate(180deg);
}

.servblock-code {
  margin-top: 12px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fig-deep);
  font-weight: 700;
}

.servblock-body {
  flex: 1 1 auto;
}

.servblock-body h2 {
  font-size: 30px;
  margin-bottom: 12px;
}

.servblock-body p {
  color: #443F4D;
}

.servblock-body ul {
  margin: 0 0 14px 0;
  padding-left: 20px;
}

.servblock-body li {
  margin-bottom: 7px;
  color: #443F4D;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contactgrid {
  background-color: var(--bone);
  padding: 60px 0 70px 0;
}

.contactgrid-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 44px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contactform-wrap {
  flex: 1 1 520px;
  background-color: var(--panel);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--fig);
  padding: 30px 32px 34px 32px;
}

.contactform-wrap h2 {
  font-size: 27px;
  margin-bottom: 8px;
}

.contactform-wrap > p {
  color: #4B4653;
  margin-bottom: 22px;
}

.formfield {
  margin-bottom: 18px;
}

.formfield label {
  display: block;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fig-deep);
  margin-bottom: 7px;
  font-weight: 700;
}

.formfield input,
.formfield textarea {
  width: 100%;
  background-color: var(--bone);
  border: 2px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  padding: 11px 13px;
}

.formfield input:focus,
.formfield textarea:focus {
  outline: none;
  border-color: var(--fig);
}

.formfield textarea {
  min-height: 150px;
  resize: vertical;
}

.formsubmit {
  display: inline-block;
  background-color: var(--fig);
  color: var(--bone);
  border: 2px solid var(--fig-deep);
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 13px 30px;
  cursor: pointer;
}

.formsubmit:hover,
.formsubmit:focus {
  background-color: var(--fig-deep);
}

.formnote {
  margin-top: 14px;
  font-size: 14px;
  color: #4B4653;
}

.formstatus {
  margin-top: 16px;
  font-size: 15px;
  color: var(--fig-deep);
  font-weight: 700;
  min-height: 22px;
}

.contactside {
  flex: 1 1 340px;
}

.contactcard {
  background-color: var(--panel);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--fig);
  padding: 24px 26px;
  margin-bottom: 22px;
}

.contactcard h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.contactcard p {
  margin-bottom: 10px;
  color: #443F4D;
}

.contactcard a {
  color: var(--fig);
  word-break: break-word;
}

.hourstable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.hourstable th,
.hourstable td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.hourstable th {
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fig-deep);
}

.faqblock {
  background-color: var(--panel);
  padding: 66px 0 74px 0;
  border-top: 1px solid var(--rule);
}

.faqblock-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.faqitem {
  background-color: var(--bone);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--fig);
  margin-bottom: 16px;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: var(--bone);
  border: none;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faqq:hover,
.faqq:focus {
  color: var(--fig);
}

.faqq-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--fig);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.faqa {
  display: none;
  padding: 0 20px 20px 20px;
  color: #443F4D;
  border-top: 1px solid var(--rule);
  margin-top: 0;
  padding-top: 16px;
}

.faqitem.is-open .faqa {
  display: block;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal-me {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-me.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .bigclock-inner {
    flex-direction: column;
    gap: 52px;
  }
  .bigclock-copy,
  .bigclock-visual {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .bigclock-title {
    font-size: 42px;
  }
  .deepread-inner {
    flex-direction: column;
    gap: 26px;
  }
  .plannerintro-grid {
    flex-direction: column;
    gap: 26px;
  }
  .plannerintro-side {
    flex: 1 1 auto;
  }
}

@media (max-width: 860px) {
  .hourrail-toggle {
    display: inline-block;
  }
  .hourrail-inner {
    flex-wrap: wrap;
  }
  .hourrail-linkwrap {
    display: none;
    width: 100%;
    justify-content: flex-start;
    padding: 6px 0 16px 0;
  }
  .hourrail-linkwrap.is-open {
    display: flex;
  }
  .hourdial {
    width: 68px;
    margin-top: 0;
  }
  .slotband {
    flex-direction: column;
  }
  .slottime {
    flex: 1 1 auto;
    max-width: 100%;
    margin-left: 24px;
    border-right: 1px solid var(--deep);
    padding: 18px 20px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .slottime-label {
    margin-top: 0;
  }
  .slotchip {
    margin-top: 0;
  }
  .slotpanel {
    padding: 24px 24px 24px 30px;
  }
  .servblock-inner {
    flex-direction: column;
    gap: 22px;
  }
  .contactgrid-inner {
    flex-direction: column;
  }
  .ctaband-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .bigclock-title {
    font-size: 34px;
  }
  .bigface {
    width: 264px;
    height: 264px;
  }
  .bigface-tick {
    transform-origin: 1.5px 106px;
  }
  .bigface-dot {
    transform-origin: 7px 91px;
  }
  .bigface-hand-h {
    height: 72px;
  }
  .bigface-hand-m {
    height: 100px;
  }
  .subhead h1 {
    font-size: 33px;
  }
  .secthead-title,
  .deepread h2,
  .servblock-body h2 {
    font-size: 27px;
  }
  .slotpanel h3 {
    font-size: 21px;
  }
  .winddown-brandblock {
    flex-direction: column;
  }
}