/* ==========================================================================
   KDL Language & Literacy Consulting — homepage v3 (merged draft)
   Navy / orange / yellow · Playfair Display + Mulish
   ========================================================================== */

:root {
  --navy: #012b43;
  --navy-deep: #00203a;
  --navy-soft: #0a3a56;
  --orange: #f6851f;
  --yellow: #fdb913;
  --cream: #fdf8f1;
  --paper: #fbf6ee;
  --ink: #0a1e2d;
  --muted: #4a5a68;
  --muted-light: #7d8b96;
  --line: rgba(1, 43, 67, 0.12);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream);
  font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: #d76e0d; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; font-weight: 800; font-size: 14px;
}
.skip-link:focus { left: 0; color: #fff; }

/* anchored sections clear the sticky nav */
section[id], div[id] { scroll-margin-top: 100px; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(44px, 5.2vw, 80px); letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -0.005em; }
h3 { font-size: 26px; line-height: 1.2; }
h4 { font-size: 21px; }
/* Even out the line lengths on the big centred headings so a short last word
   doesn't end up stranded on its own line. Ignored by browsers without it. */
.hero h1, .sec-head.center h2 { text-wrap: balance; }
p { margin: 0 0 1.1em; }
.lead { font-size: 22px; line-height: 1.55; color: var(--muted); }
.eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 800; font-size: 13px; color: var(--orange); margin: 0 0 20px; display: block;
}
.eyebrow.on-navy { color: var(--yellow); }
.rule { width: 64px; height: 3px; background: var(--orange); border: 0; margin: 26px 0; }
.rule.center { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 800; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 2px; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #e2760f; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--navy-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: currentColor; color: var(--navy); }
.btn-ghost.on-navy { color: #fff; }
.btn-ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-ghost.on-navy:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-ghost.on-orange { color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-ghost.on-orange:hover { background: #fff; color: var(--orange); border-color: #fff; }
.btn .arw { font-size: 16px; }
.cta-row { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }

/* ---- Logo ---- */
.logo-link { display: inline-flex; align-items: center; }
.logo-link img { height: 52px; width: auto; display: block; }

/* ---- Wordmark ---- */
.wordmark { display: inline-flex; align-items: center; gap: 13px; }
.wordmark img { width: 42px; height: 42px; }
.wordmark .stack { display: flex; flex-direction: column; gap: 3px; }
.wordmark .kdl { font-family: var(--serif); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: var(--navy); }
.wordmark .tag { font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.wordmark.on-navy .kdl { color: #fff; }
.wordmark.on-navy .tag { color: rgba(255,255,255,0.65); }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 248, 241, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--navy); letter-spacing: 0.01em; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange); transition: width .2s ease; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--orange); }
.nav-cta { margin-left: 8px; white-space: nowrap; }
.nav-links a.btn { padding: 14px 26px; }
.nav-links a.nav-cta::after { display: none; }
.nav-links a.btn-orange, .nav-links a.btn-orange:hover { color: #fff; }
.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 10px; color: var(--navy); }
.nav-toggle svg { width: 26px; height: 26px; display: block; }

/* ---- Nav submenu ---- */
/* The parent stays a real link to the section landing page; the caret is a
   separate button so keyboard and touch users can open the menu without
   losing the ability to navigate to the parent. */
.has-sub { position: relative; display: flex; align-items: center; gap: 5px; }
.sub-caret {
  background: transparent; border: 0; padding: 6px 2px; cursor: pointer;
  color: var(--navy); display: inline-flex; align-items: center;
}
.sub-caret svg { width: 11px; height: 11px; display: block; transition: transform .2s ease; }
.has-sub:hover .sub-caret svg,
.has-sub:focus-within .sub-caret svg { transform: rotate(180deg); }
/* bridges the gap between the trigger and the panel so the menu doesn't close
   as the pointer travels down to it */
.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.subnav {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 272px; background: #fff; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 18px 40px rgba(1,43,67,0.10);
  padding: 10px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.subnav.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-links .subnav a { padding: 11px 14px; border-radius: 2px; font-size: 14.5px; }
.nav-links .subnav a::after { display: none; }
.nav-links .subnav a:hover, .nav-links .subnav a:focus-visible { background: var(--paper); color: var(--orange); }

/* ---- Draft flag (temporary, remove at launch) ----
   Floating pill marking a page whose copy is a working draft. Sits just below
   the sticky nav; pointer-events off so it never blocks a click. */
.draft-flag {
  position: fixed; top: 94px; left: 50%; transform: translateX(-50%);
  z-index: 60; background: var(--yellow); color: var(--navy-deep);
  font-family: var(--sans); font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  padding: 8px 18px; border-radius: 30px;
  box-shadow: 0 8px 20px rgba(1,43,67,0.18);
  pointer-events: none;
}
@media (max-width: 860px) { .draft-flag { top: 90px; font-size: 11px; } }

/* ---- Sections & rhythm ---- */
section { padding: 96px 0; }
.sec-navy { background: var(--navy); color: #fff; }
.sec-navy h1, .sec-navy h2, .sec-navy h3, .sec-navy h4 { color: #fff; }
.sec-navy .lead { color: rgba(255,255,255,0.8); }
.sec-paper { background: var(--paper); }
.sec-cream { background: var(--cream); }
.sec-head { max-width: 720px; }
.sec-head.center { margin: 0 auto; text-align: center; }
/* .wide: for a heading whose line must not break (Calibrate's "The Professional
   Communication Lab"). The heading gets the room; the lead keeps its measure. */
.sec-head.wide { max-width: 900px; }
.sec-head.wide .lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.after-head { margin-top: 56px; }

/* ---- Slim band: a short bridge between two full sections ---- */
.band-slim { padding: 58px 0; }
.band-slim .sec-head { max-width: 780px; }
.band-slim .lead { text-wrap: balance; }
/* Add .band-lead when the slim band should merge into a section of the SAME
   colour directly below it, so there's no faint seam between the two. */
.band-lead { padding-bottom: 0; }

/* ---- Photo frames ---- */
.photo { overflow: hidden; background: #e9e3d7; border-radius: 3px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Grid ---- */
.grid { display: grid; gap: 32px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* ---- Hero ---- */
.hero { background: var(--navy); color: #fff; text-align: center; padding: 88px 0 96px; position: relative; overflow: hidden; }
.hero .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 0%, rgba(246,133,31,0.16), transparent 70%); }
.hero .inner { position: relative; }
.hero .mark { width: 92px; height: 92px; margin: 0 auto 32px; }
.hero h1 { color: #fff; max-width: 18ch; margin: 0 auto; }
.hero .lead { max-width: 660px; margin: 30px auto 0; color: rgba(255,255,255,0.82); }
.hero .cta-row { justify-content: center; }
.hero .attrib { margin: 26px 0 0; font-size: 15px; color: rgba(255,255,255,0.62); }

/* ---- Full-bleed image band ---- */
.band { height: clamp(240px, 36vw, 440px); overflow: hidden; background: #e9e3d7; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* ---- Employer doors ---- */
.door {
  background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* Hover reads in brand orange rather than a grey drop shadow: the hairline
   border goes orange and an outset ring doubles its weight (outset, so it
   can't shift layout or overlap the photo). */
.door:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.door .ph { height: 250px; flex: none; position: relative; }
/* ...and the site's 3px orange rule draws across under the photo. */
.door .ph::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.door:hover .ph::after { transform: scaleX(1); }

/* Offer cards: the whole card is the link, and a booking button fades in on
   hover. Its space is always reserved so the card never changes height, and
   devices without hover (touch) show the button permanently. */
.door .book {
  margin-top: 26px; align-self: flex-start;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.door:hover .book, .door:focus-visible .book, .door:focus-within .book { opacity: 1; transform: none; }
@media (hover: none) { .door .book { opacity: 1; transform: none; } }
@media (max-width: 860px) { .door .book { width: 100%; justify-content: center; } }
.door .body { padding: 32px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.door .eyebrow { margin-bottom: 12px; font-size: 12px; }
/* the card is an <a>, so without this the heading inherits the global link
   orange -- every other serif heading on the site is ink */
.door h3 { font-size: 24px; margin-bottom: 12px; color: var(--ink); }
.door p { font-size: 16px; color: var(--muted); line-height: 1.6; flex: 1; margin: 0; }
/* auto rather than a fixed margin so the link still sits at the foot of the
   card on pages where the card is just a label and a link, with no paragraph */
.door .more, a.more {
  margin-top: auto; padding-top: 22px;
  font-family: var(--sans); font-weight: 800; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange);
  display: inline-flex; gap: 8px; align-items: center;
}
.door .more .arw, a.more .arw { transition: transform .18s ease; }
.door:hover .more .arw, a.more:hover .arw { transform: translateX(4px); }

/* industries strip */
/* ...on a navy band: the hairline and labels need light variants */
.sec-navy .industries { border-top-color: rgba(255,255,255,0.14); }
.sec-navy .industries .lbl { color: rgba(255,255,255,0.55); }
.sec-navy .industries .tail { color: rgba(255,255,255,0.72); }
.industries { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
.industries .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--muted-light); margin-right: 6px; }
/* a clause that runs on after the chips */
.industries .tail { font-size: 15.5px; color: var(--muted); }
.chip { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 8px 18px; }

/* ---- Pillars (navy, sticky head) ---- */
.pillars .split { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 64px; }
.pillars .sec-head { position: sticky; top: 110px; }
.pillars .mark-sm { width: 68px; height: 68px; margin-bottom: 24px; }
.pillar { border-left: 3px solid var(--orange); padding: 4px 0 4px 28px; }
.pillar + .pillar { margin-top: 40px; }
/* ...but when pillars sit side by side in a grid, the gap does the spacing and
   that stacking margin would push items 2 and 3 out of line. */
.grid .pillar + .pillar { margin-top: 0; }
.pillar .num { font-family: var(--serif); font-size: 36px; color: var(--yellow); line-height: 1; margin-bottom: 12px; }
.pillar h4 { color: #fff; margin-bottom: 10px; font-size: 22px; }
.pillar p { font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0; }

/* ---- About & team ---- */
.about .split { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.about .portrait { height: 520px; position: relative; }
.about .portrait .swapnote {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  background: rgba(1,43,67,0.82); color: #fdeec4; font-size: 13px; line-height: 1.45;
  padding: 12px 16px; border-left: 3px solid var(--yellow); border-radius: 2px;
}
.about .facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.about .facts li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.about .facts li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 9px; background: var(--orange); border-radius: 50%; }
/* the closing line of a bio sits right under the last bullet without this */
.about .facts + p { margin-top: 22px; }

.team-bar { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 44px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tcard { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 16px 22px 16px 16px; }
.tcard .mono {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 800; font-size: 19px;
}
.tcard.soon .mono { background: transparent; border: 2px dashed rgba(1,43,67,0.3); color: var(--orange); }
.tcard .tn { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--navy); line-height: 1.2; }
.tcard .tr { font-size: 13px; color: var(--muted); margin-top: 2px; }
.team-bar .btn { margin-left: auto; }

/* ---- Quote ---- */
.quote { background: var(--paper); text-align: center; }
.quote blockquote {
  font-family: var(--serif); font-style: normal; font-weight: 600;
  font-size: clamp(23px, 2.4vw, 31px); line-height: 1.38;
  color: var(--navy); max-width: 38ch; margin: 0 auto;
}
.quote .qmark { font-family: var(--serif); font-size: 120px; color: var(--orange); line-height: 0.4; display: block; height: 60px; }
.quote .attr { margin-top: 34px; font-size: 14px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.quote .todo { max-width: 640px; margin: 40px auto 0; text-align: left; }

/* ---- Customer story (photo beside a long quote, on a light band) ----
   Same typographic treatment as .tslide blockquote, recoloured for cream/paper.
   Use for the longer named stories; .quote is for short pull quotes. */
/* The photo stretches to whatever the quote column needs, so the two sides
   always finish level however long the story runs. */
.story .split { grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: stretch; }
.story .ph.photo { height: auto; min-height: 460px; }
.story blockquote {
  margin: 0; font-family: var(--serif); font-style: normal; font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; color: var(--navy);
}
/* Testimonials everywhere are set in the heading serif (Playfair Display) at
   Semibold 600, upright: a step lighter than the headings, and never italic,
   which Katrina found hard to read. A long quote may be split into <p>s. */
.story blockquote p, .tslide blockquote p, .quote blockquote p { margin: 0; }
.story blockquote p + p, .tslide blockquote p + p, .quote blockquote p + p { margin-top: .85em; }
.story cite {
  display: block; margin-top: 24px; font-family: var(--sans); font-style: normal;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-light);
}

/* ---- Community (navy split) ---- */
.community .photo { height: 430px; }
.community .checkline { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; font-size: 16.5px; color: rgba(255,255,255,0.85); }
.community .checkline::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 10px; background: var(--yellow); border-radius: 50%; }

/* ---- Process steps ---- */
.step { display: flex; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .snum { font-family: var(--serif); font-size: 34px; color: var(--orange); line-height: 1; flex: none; width: 62px; }
.step h4 { margin-bottom: 8px; color: var(--navy); }
.step p { font-size: 16.5px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin: 48px auto 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 44px 26px 0; position: relative;
  font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 26px; font-weight: 400; color: var(--orange); line-height: 1;
}
.faq[open] summary::after { content: "\2013"; }
.faq .ans { padding: 0 44px 28px 0; }
.faq .ans p { font-size: 16.5px; color: var(--muted); margin: 0 0 0.9em; line-height: 1.65; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---- Consultation form (contact page) ----
   A multi-step form: one step visible at a time, with the booking step last.
   Steps are plain fieldsets so it still submits and reads sensibly with no JS. */
.cform-split { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: start; }
.cform { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 34px 34px 30px; }
.cform .steps { display: flex; gap: 8px; margin-bottom: 26px; }
.cform .steps i {
  flex: 1; height: 4px; border-radius: 2px; background: var(--line); display: block;
  transition: background .25s ease;
}
.cform .steps i.on { background: var(--orange); }
.cform .stepnum {
  font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-light); margin-bottom: 10px;
}
.cform h3 { font-size: 24px; color: var(--ink); margin-bottom: 6px; text-wrap: balance; }
.cform .stephint { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.cform h3 + .frow, .cform h3 + .bookrow { margin-top: 22px; }
.cform fieldset { border: 0; padding: 0; margin: 0; }
.cform fieldset[hidden] { display: none; }
/* anything the form script hides stays hidden, whatever display its own rule sets */
.cform [hidden] { display: none !important; }
.cform label.f { display: block; margin-bottom: 16px; }
.cform label.f > span {
  display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 6px;
}
.cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform select, .cform textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff;
}
.cform textarea { resize: vertical; min-height: 130px; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,133,31,.14);
}
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform .picks { display: grid; gap: 10px; margin-bottom: 6px; }
.cform .pick {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.cform .pick:hover { border-color: var(--orange); }
.cform .pick input { margin-top: 3px; accent-color: var(--orange); flex: none; }
.cform .pick b { display: block; font-family: var(--sans); font-size: 15.5px; color: var(--navy); }
.cform .pick span { font-size: 14px; color: var(--muted); }
.cform .pick.on { border-color: var(--orange); }
.cform .cnav { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.cform .cnav .back { margin-right: auto; }
.cform .err { color: #c0392b; font-size: 14.5px; font-weight: 700; margin-top: 12px; display: none; }
.cform .err.show { display: block; }
/* honeypot: hidden from people without pushing the document sideways
   (left:-9999px widened the scroll area on small screens) */
.cform .hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* booking step */
.bookrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.bookcard {
  border: 1px solid var(--line); border-radius: 5px; padding: 22px 22px 20px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.bookcard:hover { border-color: var(--orange); }
.bookcard.on { border-color: var(--orange); }
.bookcard b { display: block; font-family: var(--serif); font-size: 19px; color: var(--navy); margin-bottom: 6px; }
.bookcard span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.calwrap { margin-top: 20px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; min-height: 640px; }
.calwrap[hidden] { display: none; }
.cdone { text-align: center; padding: 40px 10px; }
.cdone .tick {
  width: 54px; height: 54px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 27px;
}
.cdone h3 { font-size: 26px; margin-bottom: 10px; }
.cdone p { color: var(--muted); max-width: 46ch; margin: 0 auto 6px; }

@media (max-width: 1080px) { .cform-split { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 860px) {
  .cform { padding: 26px 20px 24px; }
  .cform .frow, .bookrow { grid-template-columns: 1fr; }
  .cform .cnav .btn { width: 100%; justify-content: center; }
  .cform .cnav .back { margin-right: 0; order: 2; }
}

/* ---- CTA band ---- */
.cta-band { background: var(--orange); text-align: center; padding: 88px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.94); font-size: 20px; max-width: 600px; margin: 16px auto 0; }
.cta-band .cta-row { justify-content: center; }
.cta-band .todo { max-width: 640px; margin: 36px auto 0; text-align: left; }

/* ---- Editorial placeholder note (for client review) ---- */
.todo {
  background: rgba(253,185,19,0.16); border-left: 3px solid var(--yellow);
  padding: 14px 18px; font-family: var(--sans); font-size: 14.5px;
  line-height: 1.5; color: #5c4a12; margin: 0 0 1.1em; border-radius: 2px;
}
.sec-navy .todo { background: rgba(253,185,19,0.14); color: #fdeec4; }
.cta-band .todo { background: rgba(255,255,255,0.16); border-left-color: #fff; color: #fff; }
.todo strong { font-weight: 800; }

/* ---- Footer ---- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,0.8); padding: 72px 0 40px; }
.footer a { color: rgba(255,255,255,0.8); }
.footer a:hover { color: var(--yellow); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer h4 { color: #fff; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; margin-bottom: 18px; }
.footer .fnav { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer-bot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,0.55); flex-wrap: wrap; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { display: inline-flex; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--orange); border-color: var(--orange); }
.footer-social img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

/* ---- Site credit strip (the very bottom, under the footer) ----
   Who built the site and what it runs on. Faded until hovered so it never
   competes with the footer above it. One row on wider screens; at 640px and
   below the two credits stack and the divider goes. Scoped under .site-credit:
   this sheet is global, and a bare "span" or "img" rule would leak. */
.site-credit {
  background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 12px 28px; padding: 15px 24px;
}
.site-credit a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; opacity: .55; transition: opacity .2s ease; }
.site-credit a:hover, .site-credit a:focus-visible { opacity: 1; }
.site-credit span { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.site-credit img { display: block; width: auto; }
.site-credit .hwc { height: 17px; }
.site-credit .wh { height: 28px; }
.site-credit .sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); }
@media (max-width: 640px) {
  .site-credit { flex-direction: column; gap: 14px; padding: 18px 20px; }
  .site-credit .sep { display: none; }
}



/* ---- Portrait stage (About, home, community partners) ----
   One component for every portrait: a transparent cut-out covering the box and
   aligned to the top, standing on the navy block with the orange outline offset
   up-right. 296x540 is the original box, and it is also the portraits' own
   603x1100 aspect ratio, so cover fits them whole with nothing cropped away.
   The block and outline sit at the top positions they have always had. */
.about .split { align-items: start; }
.stage-g {
  position: sticky; top: 110px;
  width: 296px; max-width: calc(100% - 24px);   /* leaves room for the outline's overhang */
  aspect-ratio: 296 / 540;
  margin: 0 auto;
}
.stage-g .dwrap { position: absolute; inset: 0; }
.stage-g img.kat {
  position: relative; z-index: 3; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.stage-g .blk { position: absolute; left: 0; width: 100%; top: 27%; bottom: 0; background: var(--navy); border-radius: 4px; z-index: 1; }
.stage-g .oline { position: absolute; left: 22px; width: 100%; top: calc(27% - 22px); bottom: 22px; border: 2px solid var(--orange); border-radius: 4px; z-index: 1; }
@media (max-width: 1080px) { .stage-g { position: static; } }

/* mirrored split so associates alternate against the section above */
.about .split.rev { grid-template-columns: 1.1fr 0.9fr; }


/* ---- Testimonial slider (pillars) ---- */
.tslider { margin-top: 76px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 54px; overflow: hidden; }
.ttrack { display: flex; transition: transform .45s ease; }
.tslide { flex: 0 0 100%; margin: 0; text-align: center; padding: 0 48px; }
.tslide blockquote { margin: 0 auto; max-width: 32ch; font-family: var(--serif); font-style: normal; font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; color: #fff; }
.tslide figcaption { margin-top: 22px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tslide figcaption em { font-style: normal; color: var(--yellow); }
.tnav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; }
.tbtn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.tbtn:hover { background: var(--orange); border-color: var(--orange); }
.tdots { display: flex; gap: 10px; }
.tdot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,0.3); cursor: pointer; }
.tdot.on { background: var(--orange); }

/* ---- Community strip ---- */
.comm-strip { padding: 64px 0; }
.comm-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.comm-inner .btn { flex: none; }

/* ---- Mini quote (About) ---- */
.mini-quote {
  margin: 30px 0 0; padding: 22px 26px; background: #fff; border-left: 3px solid var(--orange);
  border-radius: 2px; font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.45; color: var(--navy);
}
.mini-quote .mq-attr { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .comm-inner { flex-direction: column; align-items: flex-start; }
  .comm-inner .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  .split, .about .split, .pillars .split, .story .split { grid-template-columns: 1fr; gap: 44px; }
  .about .split.rev { grid-template-columns: 1fr; }
  .about .split.rev > .stage-g { order: -1; }
  .pillars .sec-head { position: static; }
  .about .portrait { height: 420px; }
  .community .photo { height: 340px; }
  /* stacked below this width, so the photo takes a fixed height again --
     min-height must be cleared or it would win over height */
  .story .ph.photo { height: 480px; min-height: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  section { padding: 68px 0; }
  body { font-size: 17px; }
  .lead { font-size: 19.5px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 82px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 24px;
    box-shadow: 0 18px 30px rgba(1,43,67,0.10);
    /* the list can outgrow a short (or sideways) phone: let it scroll */
    max-height: calc(100vh - 82px); max-height: calc(100dvh - 82px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 16px; }
  .nav-links a::after { display: none; }
  /* In the phone menu a section's pages are simply listed under it: always
     shown, indented, no caret to tap. (The expander this replaces never
     opened on a phone: tapping the caret both hovers and focuses the parent,
     and the rule that hid the panel on hover/focus outranked .open.) The
     hover/focus selectors are listed so the desktop dropdown's transform can
     never apply here. The "overview" child links to the parent's own page,
     which the parent link already is, so the menu leaves it out. */
  .has-sub { width: 100%; flex-wrap: wrap; }
  .has-sub::after { display: none; }
  .sub-caret { display: none; }
  .subnav,
  .has-sub:hover .subnav, .has-sub:focus-within .subnav, .subnav.open {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: flex; min-width: 0; width: 100%;
    background: transparent; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; box-shadow: none; padding: 0 0 8px 16px;
  }
  .nav-links .subnav a { padding: 10px 0; font-size: 15px; }
  .nav-links .subnav .sub-overview { display: none; }
  /* No hover tint here: no other link in the phone menu has one. The
     current page still shows in orange; keyboard focus keeps its outline. */
  .nav-links .subnav a:hover, .nav-links .subnav a:focus-visible { background: none; color: var(--navy); }
  .nav-links .subnav a.active { color: var(--orange); }
  .nav-cta { margin: 12px 0 0; justify-content: center; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 88px; }
  .hero .mark { width: 74px; height: 74px; margin-bottom: 26px; }
  .door .ph { height: 210px; }
  .pillar + .pillar { margin-top: 30px; }
  .team-bar { flex-direction: column; align-items: stretch; }
  .team-bar .btn { margin-left: 0; justify-content: center; }
  .step { gap: 16px; }
  .step .snum { width: 44px; font-size: 28px; }
  .quote .qmark { font-size: 90px; height: 44px; }
  .story .ph.photo { height: 340px; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  :root { --gutter: 22px; }
  .about .portrait { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .btn:hover, .door:hover { transform: none; }
}


/* ==========================================================================
   MOTION — entrance animations
   Subtle and professional: short fades with a small rise, staggered.

   PROGRESSIVE ENHANCEMENT: the hiding rules are scoped to .js-motion, which is
   only added by an inline script when JS runs AND the visitor hasn't asked for
   reduced motion. So with JS blocked/broken, nothing is ever hidden — the page
   just renders normally. motion.js also has a timeout failsafe that reveals
   everything if the observer never fires. Content must never be invisible.
   ========================================================================== */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* stagger the children of a group */
.js-motion [data-reveal-group] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .58s cubic-bezier(.22,.61,.36,1),
              transform .58s cubic-bezier(.22,.61,.36,1);
}
.js-motion [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js-motion [data-reveal-group].is-in > *:nth-child(1) { transition-delay: .00s; }
.js-motion [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .09s; }
.js-motion [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .18s; }
.js-motion [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .27s; }
.js-motion [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .36s; }
.js-motion [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .45s; }
.js-motion [data-reveal-group].is-in > *:nth-child(7) { transition-delay: .54s; }

/* hero plays on load — pure CSS, no observer involved */
.js-motion [data-hero] {
  opacity: 0; transform: translateY(20px);
  animation: kdlRise .75s cubic-bezier(.22,.61,.36,1) forwards;
}
.js-motion [data-hero="1"] { animation-delay: .05s; }
.js-motion [data-hero="2"] { animation-delay: .16s; }
.js-motion [data-hero="3"] { animation-delay: .27s; }
.js-motion [data-hero="4"] { animation-delay: .38s; }
.js-motion [data-hero="5"] { animation-delay: .49s; }
.js-motion .mark[data-hero] { animation-name: kdlMark; }

@keyframes kdlRise { to { opacity: 1; transform: none; } }
@keyframes kdlMark {
  0%   { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* images settle as their section arrives */
.js-motion [data-reveal] .ph img,
.js-motion [data-reveal] .kat {
  transform: scale(1.035);
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
}
.js-motion [data-reveal].is-in .ph img,
.js-motion [data-reveal].is-in .kat { transform: none; }

/* Belt and braces: never leave anything hidden for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-group] > *,
  .js-motion [data-hero] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}