/* GENERATED by tools/build-v6.py — edit that script, not this file. */
/* ============================================
   COASTWISE HEALTH — V5 Editorial Design System
   Shared stylesheet for the full-site rollout.
   Powers both the homepage and interior pages.
   Restyles the existing content-kit class names so
   page bodies convert with minimal markup changes.
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ---- Sand & Sea palette ---- */
  --ink:#1a2430;          /* headings, dark bands */
  --ink-2:#0e1c25;        /* deepest band (footer) */
  --teal:#8a6a35;         /* links + accents on light (was teal, now brass) */
  --cream:#fef9ef;
  --sand:#f5eee1;
  --gold:#8a6a35;         /* brass */
  --gold-hover:#6f5427;
  --seafoam:#c2a473;      /* accents on DARK grounds */
  --sea-deep:#9a7b44;     /* icons + rules on LIGHT grounds */
  --text-mid:#4d5866;
  --text-light:#6d7783;
  --line:#e6ddcc;
  --line-dark:rgba(255,253,248,0.14);
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Gilroy-Regular',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans-med:'Gilroy-Medium',-apple-system,sans-serif;
  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --white-warm:#fffdf8;
  --brass:#8a6a35; --brass-deep:#6f5427; --brass-mid:#9a7b44; --brass-light:#c2a473;
  --ink-deep:#0e1c25; --ink-soft:#33404e; --text-soft:#6d7783;
  --sand-deep:#efe6d6; --line-soft:#efe8dc;

  /* ---- Legacy tokens (pre-V5 inline styles still reference these) ---- */
  --color-primary:#8a6a35; --color-primary-light:#9a7b44; --color-primary-dark:#6f5427;
  --color-accent:#8a6a35; --color-accent-hover:#6f5427;
  --color-white:#ffffff; --color-off-white:#fffdf8; --color-light-gray:#efe8dc; --color-mid-gray:#d8cdb8;
  --color-text-light:#6d7783; --color-text-body:#4d5866; --color-text-dark:#1a2430; --color-text-heading:#1a2430; --color-black:#000000;
  --color-warm-cream:#fef9ef; --color-sand:#f5eee1; --color-mist:#f7f1e6; --color-slate-light:#efe8dc; --color-teal-wash:#f5eee1;
  --color-teal-accent:#9a7b44; --color-blue:#5b7f96; --color-sage:#7b8577;
  --font-heading:'Cormorant',Georgia,serif; --font-body:'Gilroy-Regular',sans-serif;
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-bold:700;
  --text-xs:0.8125rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.25rem; --text-4xl:2.625rem; --text-5xl:3.25rem;
  --space-xs:0.375rem; --space-sm:0.75rem; --space-md:1.125rem; --space-lg:1.5rem; --space-xl:2.25rem; --space-2xl:3rem; --space-3xl:4rem;
  --container-max:1180px; --container-narrow:820px; --container-wide:1400px;
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px; --radius-pill:9999px;
  --shadow-sm:0 1px 3px rgba(26,36,48,0.05); --shadow-md:0 4px 12px rgba(26,36,48,0.07); --shadow-lg:0 10px 30px rgba(26,36,48,0.09);
  --overlay-dark:rgba(14,28,37,0.85); --overlay-darker:rgba(14,28,37,0.92); --overlay-light:rgba(14,28,37,0.6);
  --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:400ms ease;
}
body{font-family:var(--sans);background:#fff;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap,.container{max-width:var(--wrap);margin:0 auto}

/* ---- Shared motif ---- */
.eyebrow{font-family:var(--sans-med);font-size:11px;letter-spacing:0.17em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:34px;height:10px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c2.7-3.6 6.3-3.6 9 0s6.3 3.6 9 0 6.3-3.6 9 0' fill='none' stroke='%23ecb15a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
.section-eyebrow{font-family:var(--sans-med);font-size:11px;letter-spacing:0.17em;text-transform:uppercase;color:var(--gold-hover);margin-bottom:34px;display:flex;align-items:center;gap:12px}
.section-eyebrow::before{content:'';width:34px;height:10px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c2.7-3.6 6.3-3.6 9 0s6.3 3.6 9 0 6.3-3.6 9 0' fill='none' stroke='%23d9a04e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
.contours{position:absolute;pointer-events:none;z-index:0}
.tide-divider{display:block;line-height:0}
.tide-divider svg{display:block;width:100%;height:44px}
.text-link{font-family:var(--sans-med);font-size:13px;letter-spacing:0.05em;color:var(--teal);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color 0.15s,border-color 0.15s}
.text-link:hover{color:var(--ink);border-color:var(--teal)}
.breadcrumb{font-family:var(--sans-med);font-size:12px;letter-spacing:0.03em;color:var(--text-light);margin-bottom:30px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.breadcrumb a{color:var(--text-mid);transition:color .15s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--ink)}

/* ---- Buttons ---- */
.btn-gold,.btn.btn--primary{display:inline-block;background:var(--gold);color:var(--ink);padding:15px 30px;font-family:var(--sans-med);font-size:13px;letter-spacing:0.04em;border:none;cursor:pointer;transition:background 0.15s}
.btn-gold:hover,.btn.btn--primary:hover{background:var(--gold-hover);color:var(--ink)}
.btn-outline,.btn.btn--outline{display:inline-block;background:transparent;color:rgba(255,255,255,0.75);padding:15px 30px;font-family:var(--sans-med);font-size:13px;letter-spacing:0.04em;border:1px solid rgba(255,255,255,0.22);cursor:pointer;transition:border-color 0.15s,color 0.15s}
.btn-outline:hover,.btn.btn--outline:hover{border-color:rgba(255,255,255,0.5);color:#fff}
.btn.btn--outline-dark{display:inline-block;background:transparent;color:var(--ink);padding:15px 30px;font-family:var(--sans-med);font-size:13px;letter-spacing:0.04em;border:1px solid var(--line);cursor:pointer;transition:border-color 0.15s,color 0.15s}
.btn.btn--outline-dark:hover{border-color:var(--teal);color:var(--teal)}
.btn--lg{padding:16px 34px;font-size:13.5px}
.btn--sm{padding:10px 20px;font-size:12px}
.btn--block{display:block;width:100%;text-align:center}

/* ============================================
   PAGE HERO (interior, compact, ink)
   ============================================ */
.page-hero{background:var(--ink);padding:64px 56px 58px;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;right:-140px;top:-60px;width:620px;height:620px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%23c2a473'%3E%3Cpath d='M640 540c-90-14-196 8-262 62-38 31-56 38-118 38' stroke-opacity='.10'/%3E%3Cpath d='M640 468c-118-10-238 26-306 92-34 33-70 50-134 50' stroke-opacity='.085'/%3E%3Cpath d='M640 396c-146-6-278 46-350 122-32 34-84 62-160 62' stroke-opacity='.07'/%3E%3Cpath d='M640 324c-174-2-318 66-394 152-30 34-98 74-186 74' stroke-opacity='.055'/%3E%3Cpath d='M640 252c-202 2-358 86-438 182-28 34-112 86-202 86' stroke-opacity='.04'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
.page-hero>*{position:relative;z-index:1;max-width:var(--wrap);margin-left:auto;margin-right:auto}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-size:clamp(32px,3.6vw,50px);font-weight:340;line-height:1.13;color:#fff;margin-bottom:20px;max-width:900px}
.page-hero p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,0.64);max-width:640px}
.page-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ============================================
   CONTENT SECTIONS (interior prose + kit)
   ============================================ */
.detail-content{padding:76px 56px;background:#fff}
.detail-content.section--light{background:var(--cream)}
.detail-content.section--sand{background:var(--sand)}
.detail-content .container{max-width:var(--wrap)}
.detail-body{max-width:var(--wrap)}
.detail-body h2{font-family:var(--serif);font-size:clamp(25px,2.4vw,34px);font-weight:340;color:var(--ink);line-height:1.2;margin:0 0 18px;max-width:820px}
.detail-body h2:not(:first-child){margin-top:44px}
.detail-body h3{font-family:var(--sans-med);font-size:18px;color:var(--ink);margin:32px 0 12px}
.detail-body>p{font-size:16px;line-height:1.8;color:var(--text-mid);max-width:820px;margin-bottom:18px}
.detail-body>ul,.detail-body>ol{max-width:820px;margin:0 0 18px 20px;color:var(--text-mid);line-height:1.8;font-size:16px}
.detail-body li{margin-bottom:8px}
.detail-body a{color:var(--teal);border-bottom:1px solid var(--line);transition:color .15s,border-color .15s}
.detail-body a:hover{color:var(--ink);border-color:var(--teal)}

/* Fact band */
.fact-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.fact{background:#fff;padding:28px 30px;display:flex;flex-direction:column;gap:4px}
.section--light .fact{background:#fff}
.fact svg{width:22px;height:22px;stroke:var(--sea-deep);stroke-width:1.6;fill:none;margin-bottom:12px}
.fact strong{font-family:var(--sans-med);font-weight:normal;font-size:15px;color:var(--ink)}
.fact span{font-size:13px;color:var(--text-light);line-height:1.5}

/* Info grid / boxes */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:32px 0}
.info-box{background:#fff;padding:30px 28px;position:relative;display:block}
.section--light .info-box{background:#fff}
.info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background 0.18s}
.info-box:hover::before{background:var(--sea-deep)}
.info-box h4{font-family:var(--sans-med);font-size:15px;color:var(--ink);margin-bottom:9px;line-height:1.35}
.info-box p{font-size:13.5px;line-height:1.7;color:var(--text-mid)}
a.info-box{position:relative}
a.info-box::after{content:'';position:absolute;right:26px;bottom:28px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2315acbc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center;opacity:0;transition:opacity .15s}
a.info-box:hover::after{opacity:1}

/* Pull quote */
.pull-quote{font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:340;line-height:1.5;color:var(--ink);border-left:2px solid var(--gold);padding:4px 0 4px 30px;margin:38px 0;max-width:840px}

/* Trust line */
.trust-line{background:var(--sand);border-left:2px solid var(--gold);padding:22px 28px;font-size:14px;line-height:1.7;color:var(--text-mid);margin:34px 0;max-width:900px}
.section--light .trust-line{background:#fff}
.trust-line strong{font-family:var(--sans-med);font-weight:normal;color:var(--ink)}
.trust-line a{color:var(--teal);border-bottom:1px solid var(--line)}
.trust-line a:hover{color:var(--ink);border-color:var(--teal)}

/* Steps (numbered) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:32px 0}
.step{background:#fff;padding:34px 30px;position:relative}
.section--light .step{background:#fff}
.step-num{font-family:var(--serif);font-size:40px;font-weight:340;color:var(--sand);line-height:1;margin-bottom:14px}
.step h4{font-family:var(--sans-med);font-size:16px;color:var(--ink);margin-bottom:9px}
.step p{font-size:13.5px;line-height:1.7;color:var(--text-mid)}

/* Compare table */
.compare-table{width:100%;border-collapse:separate;border-spacing:1px;background:var(--line);margin:32px 0;font-size:14px}
.compare-table th,.compare-table td{text-align:left;padding:16px 18px;background:#fff;color:var(--text-mid);line-height:1.6}
.compare-table th{font-family:var(--sans-med);font-weight:normal;color:var(--ink);background:var(--cream)}
.compare-table td:first-child{font-family:var(--sans-med);color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:32px 0}
.table-scroll .compare-table{margin:0;min-width:560px}

/* Callout */
.callout{background:var(--cream);border:1px solid var(--line);padding:30px 32px;margin:34px 0;max-width:900px}
.section--light .callout{background:#fff}
.callout h3,.callout h4{font-family:var(--sans-med);font-size:16px;color:var(--ink);margin-bottom:10px}
.callout p{font-size:14.5px;line-height:1.75;color:var(--text-mid)}

/* Key takeaways */
.takeaways{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);padding:32px 38px;margin:0;max-width:900px}
.section--light .takeaways{background:#fff}
.takeaways h2,.takeaways h3{font-family:var(--sans-med);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-hover);margin:0 0 18px}
.takeaways ul{list-style:none;margin:0;padding:0}
.takeaways li{position:relative;padding-left:28px;margin-bottom:13px;font-size:15px;line-height:1.65;color:var(--text-mid)}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:'';position:absolute;left:0;top:3px;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23d9a04e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center}
.takeaways strong{font-family:var(--sans-med);font-weight:normal;color:var(--ink)}

/* FAQ */
.faq-section{max-width:900px}
.faq-section h2{font-family:var(--serif);font-size:clamp(25px,2.4vw,34px);font-weight:340;color:var(--ink);margin-bottom:24px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-question{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--sans-med);font-size:16px;color:var(--ink);padding:22px 44px 22px 0;position:relative;line-height:1.4}
.faq-question::after{content:'';position:absolute;right:6px;top:24px;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23d9a04e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center;transition:transform .2s}
.faq-item.open .faq-question::after,.faq-question[aria-expanded="true"]::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23d9a04e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center}
.faq-answer{overflow:hidden;max-height:0;transition:max-height .28s ease}
.faq-answer p{font-size:14.5px;line-height:1.8;color:var(--text-mid);padding:0 44px 24px 0;max-width:820px}
.faq-answer a{color:var(--teal);border-bottom:1px solid var(--line)}

/* ============================================
   PAGE CTA (interior, ink)
   ============================================ */
.page-cta{background:var(--ink);padding:96px 56px;text-align:center;position:relative;overflow:hidden}
.page-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:760px;height:600px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='600' viewBox='0 0 900 640'%3E%3Cg fill='none' stroke='%23c2a473'%3E%3Cpath d='M450 96c142 0 268 42 322 128 40 64 32 160-30 224-66 68-178 96-292 96s-226-28-292-96c-62-64-70-160-30-224 54-86 180-128 322-128z' stroke-opacity='.09'/%3E%3Cpath d='M450 156c112 0 212 34 256 102 32 50 26 126-24 176-52 54-140 76-232 76s-180-22-232-76c-50-50-56-126-24-176 44-68 144-102 256-102z' stroke-opacity='.065'/%3E%3C/g%3E%3C/svg%3E") no-repeat center}
.page-cta>*{position:relative;z-index:1}
.page-cta h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);font-weight:340;color:#fff;line-height:1.16;margin:0 auto 16px;max-width:600px}
.page-cta p{font-size:15px;color:rgba(255,255,255,0.55);margin:0 auto 36px;max-width:480px;line-height:1.7}
.page-cta .btn{margin:0 7px 10px}

/* ============================================
   FOOTER
   ============================================ */
.site-footer,footer.site-footer{background:var(--ink);border-top:1px solid var(--line-dark);padding:60px 56px 40px}
.site-footer .container{max-width:var(--wrap)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:40px}
.footer-brand img{height:34px;width:auto;opacity:0.9;margin-bottom:18px}
.footer-brand p{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.42);max-width:300px}
.footer-social{display:flex;gap:14px;margin-top:20px}
.footer-social a{color:rgba(255,255,255,0.4);transition:color .15s}
.footer-social a:hover{color:#fff}
.footer-heading{font-family:var(--sans-med);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.5);transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-contact p{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.5);margin-bottom:8px}
.footer-contact strong{color:rgba(255,255,255,0.8);font-family:var(--sans-med);font-weight:normal}
.footer-contact a{color:var(--seafoam)}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-legal{font-size:12px;color:rgba(255,255,255,0.3);line-height:1.7}
.footer-legal a{color:rgba(255,255,255,0.45)}
.footer-legal a:hover{color:#fff}

/* Mobile sticky call bar */
.mobile-cta{display:none}

/* ============================================
   REVEAL
   ============================================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1080px){
  .page-hero,.detail-content,.page-cta{padding-left:24px;padding-right:24px}
  .site-footer{padding:48px 24px 32px}
}
@media (max-width:900px){
  .page-hero{padding-top:48px;padding-bottom:44px}
  .detail-content{padding-top:56px;padding-bottom:56px}
  .info-grid,.fact-band,.steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .page-cta{padding:72px 24px}
}
@media (max-width:640px){
  .info-grid,.fact-band,.steps{grid-template-columns:1fr}
  .info-grid[style]{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr}
  .page-cta .btn{display:block;width:100%;margin:0 0 10px}
  body{padding-bottom:64px}
  .mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:10px 16px;background:var(--ink);border-top:1px solid var(--line-dark)}
  .mobile-cta .btn{display:block;width:100%;text-align:center}
}

/* ============================================
   PORTED COMPONENTS (for full-site rollout)
   V5-native styling of legacy layout classes
   ============================================ */

/* Section intro (centered eyebrow + h2 + p) */
.section-intro{max-width:760px;margin:0 auto 44px;text-align:center}
.section-intro .eyebrow{justify-content:center}
.section-intro h2{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);font-weight:340;color:var(--ink);line-height:1.2;margin:0 0 16px}
.section-intro p{font-size:15.5px;line-height:1.8;color:var(--text-mid)}
.section--soft-dark .section-intro h2,.section--dark .section-intro h2{color:#fff}
.section--soft-dark .section-intro p,.section--dark .section-intro p{color:rgba(255,255,255,0.6)}

/* Section background variants */
.detail-content.section--cream,.section--cream{background:var(--cream)}
.detail-content.section--sand,.section--sand{background:var(--sand)}
.detail-content.section--mist,.section--mist{background:#eef4f5}
.detail-content.section--white,.section--white{background:#fff}
.detail-content.section--soft-dark,.section--soft-dark,.detail-content.section--dark,.section--dark{background:var(--ink)}
.section--soft-dark h2,.section--soft-dark h3,.section--soft-dark h4,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--soft-dark h2,.section--dark h2{font-family:var(--serif);font-weight:400}
.section--soft-dark p,.section--dark p{color:rgba(255,255,255,0.62)}
.section--soft-dark a:not(.btn),.section--dark a:not(.btn){color:var(--seafoam)}

/* Tile grid (hub tiles) */
.tile-group-label{font-family:var(--sans-med);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-hover);margin:36px 0 16px}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 8px}
.tile-grid--center{display:grid;grid-template-columns:repeat(3,1fr)}
.tile{background:#fff;border:1px solid var(--line);padding:28px 26px;position:relative;display:block;transition:background .15s,border-color .15s}
.section--light .tile,.section--cream .tile{background:#fff}
.tile::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .18s}
a.tile:hover::before{background:var(--sea-deep)}
a.tile:hover{border-color:var(--sea-deep)}
.tile h4{font-family:var(--sans-med);font-size:15px;color:var(--ink);margin-bottom:8px;line-height:1.35}
.tile p{font-size:13px;line-height:1.65;color:var(--text-mid)}

/* Cross links (related links row) */
.cross-links{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream);margin:0}
.cross-links-inner{max-width:var(--wrap);margin:0 auto;padding:22px 56px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.cross-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans-med);font-size:13px;color:var(--text-mid);transition:color .15s}
.cross-link:hover{color:var(--teal)}
.cross-link svg{width:17px;height:17px;stroke:var(--sea-deep);fill:none;flex-shrink:0}

/* Hub cards (large landing cards) */
.hub-section{padding:76px 56px}
.hub-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--wrap);margin:0 auto}
.hub-card{background:#fff;border:1px solid var(--line);padding:40px 34px;display:flex;flex-direction:column;position:relative}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .18s}
.hub-card:hover::before{background:var(--sea-deep)}
.hub-card h3{font-family:var(--serif);font-size:21px;font-weight:360;color:var(--ink);margin-bottom:12px}
.hub-card p{font-size:14px;line-height:1.7;color:var(--text-mid);margin-bottom:22px;flex:1}
.hub-card .btn,.hub-card .text-link{align-self:flex-start;margin-top:auto}

/* Area cards (locations) */
.area-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--wrap);margin:0 auto}
.area-card{background:#fff;border:1px solid var(--line);padding:32px 30px;display:flex;flex-direction:column;position:relative;transition:border-color .15s}
.area-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .18s}
a.area-card:hover::before{background:var(--sea-deep)}
.area-card h3{font-family:var(--serif);font-size:20px;font-weight:360;color:var(--ink);margin-bottom:5px}
.area-subtitle{font-family:var(--sans-med);font-size:12px;letter-spacing:0.04em;color:var(--gold-hover);margin-bottom:14px}
.area-card p{font-size:13.5px;line-height:1.7;color:var(--text-mid);margin-bottom:18px;flex:1}
.area-link{font-family:var(--sans-med);font-size:13px;color:var(--teal);margin-top:auto}
a.area-card:hover .area-link{color:var(--ink)}

/* Pillars (local resource columns) */
.pillars-section{padding:76px 56px;background:var(--cream)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--wrap);margin:0 auto}
.pillar{background:#fff;border:1px solid var(--line);padding:34px 30px}
.pillar h3{font-family:var(--serif);font-size:19px;font-weight:360;color:var(--ink);margin-bottom:4px}
.pillar-subtitle{font-family:var(--sans-med);font-size:12px;letter-spacing:0.04em;color:var(--gold-hover);margin-bottom:16px}
.pillar ul{list-style:none;margin:0;padding:0}
.pillar li{margin-bottom:9px}
.pillar li a{font-size:14px;color:var(--text-mid);border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.pillar li a:hover{color:var(--ink);border-color:var(--line)}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--wrap);margin:0 auto}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block}

/* FAQ list wrapper */
.faq-list{max-width:900px;margin:0 auto}

/* Forms */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-family:var(--sans-med);font-size:13px;color:var(--ink);margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:13px 15px;border:1px solid var(--line);background:#fff;transition:border-color .15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--teal)}
.form-group textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:var(--wrap);margin:0 auto;align-items:start}
.contact-info-card{background:var(--cream);border:1px solid var(--line);padding:34px 32px}
.contact-info-card h3{font-family:var(--serif);font-size:20px;font-weight:360;color:var(--ink);margin-bottom:20px}
.contact-info-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-info-item svg{width:20px;height:20px;stroke:var(--sea-deep);fill:none;flex-shrink:0;margin-top:2px}
.contact-info-item p{font-size:14px;line-height:1.6;color:var(--text-mid);margin:0}
.contact-info-item a{color:var(--teal)}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--wrap);margin:0 auto}
.team-card,.team-member{background:#fff;border:1px solid var(--line);padding:32px 28px;text-align:center}
.team-card img,.team-member img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 18px;display:block}
.team-card h3,.team-member h3,.team-card h4,.team-member h4{font-family:var(--serif);font-size:19px;font-weight:360;color:var(--ink);margin-bottom:4px}
.team-role{font-family:var(--sans-med);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--gold-hover);margin-bottom:14px}
.team-bio{font-size:13.5px;line-height:1.7;color:var(--text-mid);text-align:left}

/* Responsive for ported components */
@media (max-width:900px){
  .tile-grid,.tile-grid--center,.hub-cards,.area-cards,.pillars,.team-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .cross-links-inner{padding:20px 24px}
  .hub-section,.pillars-section{padding:56px 24px}
  .gallery-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .tile-grid,.tile-grid--center,.hub-cards,.area-cards,.pillars,.team-grid,.gallery-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* Blog-specific */
.hub-card-date{font-family:var(--sans-med);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-hover);margin-bottom:10px}
.read-more{font-family:var(--sans-med);font-size:13px;color:var(--teal);transition:color .15s}
.read-more:hover{color:var(--ink)}
.cursor-pointer{cursor:pointer}

/* Blog tag filters */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;justify-content:center}
.blog-filter{font-family:var(--sans-med);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;padding:9px 18px;border:1px solid var(--line);color:var(--text-mid);background:#fff;cursor:pointer;transition:background .15s,color .15s,border-color .15s;border-radius:999px}
.blog-filter:hover{border-color:var(--sea-deep);color:var(--ink)}
.blog-filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.hub-card.hide{display:none}

/* ===== CONTACT BAR + NAV ===== */
/* Fixed to the bottom so it does not compete with the sticky nav, and so the
   call button sits in thumb reach on a phone. Body gets matching padding so
   the footer is never hidden behind it. */
.utility{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--ink-deep);color:#c7ced6;font-size:13px;border-top:1px solid rgba(255,253,248,.10)}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:9px;padding-bottom:9px}
.utility a{color:#e8ecf0;text-decoration:none;font-family:var(--sans-med)}
.utility a:hover{color:var(--brass-light)}
.utility-right{display:flex;align-items:center;gap:18px}
.utility-short{display:none}
.utility-call{display:inline-flex;align-items:center;gap:8px;background:var(--brass);color:#fffdf8;padding:9px 20px;border-radius:999px;font-size:13.5px;white-space:nowrap;transition:background .18s ease}
.utility-call:hover{background:var(--brass-deep);color:#fffdf8}
.utility-call svg{flex:none}
body{padding-bottom:58px}
@media(max-width:760px){
  /* Stack and centre: the long desktop line is replaced by a short one so the
     bar says what the call is for instead of being a bare button. */
  .utility-left{display:none}
  .utility-short{display:block;font-size:12px;letter-spacing:.01em;color:#aeb8c2}
  .utility .wrap{flex-direction:column;gap:7px;text-align:center;padding-top:8px;padding-bottom:10px}
  .utility-right{width:100%;justify-content:center}
  .utility-call{flex:0 1 auto;justify-content:center;padding:10px 26px;font-size:14px}
}
/* The old fixed mobile bar would stack on top of this one. */
.mobile-cta{display:none!important}

/* ============================ NAV ============================ */
/* Bar is full-bleed; .nav-inner shares .wrap's box so the logo lines up
   with the page content instead of hugging the viewport edge. Menu and
   actions sit together in .nav-cluster on the right. */
.nav{position:sticky;top:0;z-index:600;background:rgba(254,249,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-cluster{display:flex;align-items:center;gap:36px}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:none}
/* The lockup carries the COASTWISE wordmark, so the nav needs no text
   beside it. Sized to read clearly at nav height. */
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);text-decoration:none;padding:28px 0;display:inline-block;transition:color .18s ease}
.nav-links>li>a:hover{color:var(--brass)}
.nav-drop{position:absolute;top:100%;left:-18px;min-width:248px;background:var(--white-warm);border:1px solid var(--line);border-radius:4px;box-shadow:0 14px 34px rgba(26,36,48,.09);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-links>li:hover .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop a{display:block;padding:10px 20px;font-size:14px;color:var(--text-mid);text-decoration:none;transition:background .15s ease,color .15s ease}
.nav-drop a:hover{background:var(--sand);color:var(--ink)}

/* ---- Mega panel ----
   The li goes position:static so the panel can span the whole bar rather than
   hang off one item. Two overlapping menus (Our Services / How We Help)
   collapse into this one, which is why the top level is down to five short
   labels that each sit on one line. */
.nav-links > li.has-mega{position:static}
.nav-mega{left:0;right:0;width:auto;min-width:0;padding:0;border-radius:0;border-left:0;border-right:0;
  box-shadow:0 18px 40px rgba(26,36,48,.10)}
.nav-mega-inner{max-width:var(--wrap);margin:0 auto;padding:34px var(--pad) 36px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr);gap:34px}
.nav-mega-head{font-family:var(--sans-med);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-mid);margin-bottom:14px}
.nav-mega-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--text-mid);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .15s ease}
.nav-mega-col a:hover{background:none;color:var(--brass)}
.nav-mega-all{margin-top:10px;padding-top:12px!important;border-top:1px solid var(--line)!important;
  font-family:var(--sans-med);font-size:13px;color:var(--brass)!important}
.nav-mega-cta{background:var(--sand);border-radius:3px;padding:24px}
.nav-mega-cta p{font-size:14px;line-height:1.6;color:var(--text-mid);margin-bottom:16px}
/* Matches .nav-cta so the panel's button reads as the same control as the one
   in the bar. It previously used .btn--brass, which is only defined in this
   page's own stylesheet, so on every inner page it rendered unstyled. */
/* needs .nav-drop a's specificity or that rule's grey text and 10px padding win */
.nav-drop a.nav-mega-btn{display:inline-block;background:var(--brass);color:#fffdf8;
  font-family:var(--sans-med);font-size:13.5px;padding:12px 24px;border-radius:999px;
  text-decoration:none;white-space:nowrap;transition:background .18s ease}
.nav-drop a.nav-mega-btn:hover{background:var(--brass-deep);color:#fffdf8}

/* On a phone the panel is just a stacked list inside the open menu. */
@media(max-width:1080px){
  .nav-links > li.has-mega{position:relative}
  .nav-mega{box-shadow:none}
  .nav-mega-inner{display:block;padding:0}
  .nav-mega-head{margin:14px 0 6px;padding-right:0;text-align:center}
  .nav-mega-col a{padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .nav-mega-cta{background:none;padding:16px 0 8px}
  .nav-mega-cta p{display:none}
}
.nav-right{display:flex;align-items:center;gap:16px;flex:none}
.nav-phone{font-family:var(--sans-med);font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav-phone:hover{color:var(--brass)}
.nav-cta{background:var(--brass);color:#fffdf8;font-family:var(--sans-med);font-size:14px;padding:12px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .18s ease}
.nav-cta:hover{background:var(--brass-deep)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:1.5px;background:var(--ink);display:block;transition:transform .2s ease,opacity .2s ease}
/* Narrow desktop: logo + 6 links + phone + CTA only just fit at 1080,
   so tighten the tracks and drop the phone (the utility bar still has it). */
@media(min-width:1081px) and (max-width:1300px){
  .nav-logo img{height:41px}
  .nav-inner{gap:18px}
  .nav-cluster{gap:24px}
  .nav-links{gap:20px}
  .nav-links>li>a{font-size:14px}
  .nav-phone{display:none}
}
@media(max-width:1080px){
  /* backdrop-filter makes .nav a containing block, which trapped the fixed
     drawer inside the 70px bar and read as "the menu will not open". Drop the
     blur on mobile so position:fixed resolves against the viewport again. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
  /* The closed drawer sits off-canvas at translateX(100%), which on some
     pages extended the document and gave the whole site a sideways
     scroll. clip, not hidden, so the sticky nav keeps working. */
  html{overflow-x:clip}
  .nav-logo img{height:38px}
  .nav-inner{height:70px}
  .nav-cluster{display:contents}
  .nav-toggle{display:flex}
  .nav-right{display:none}
  /* Drawer, not a full-screen takeover: it slides in from the right, stops
     short of the left edge so the page stays visible behind it, and the
     labels sit against the edge the thumb opened them from. */
  .nav-links{position:fixed;top:70px;right:0;bottom:0;left:auto;width:min(76vw,296px);background:var(--cream);border-left:1px solid var(--line);box-shadow:-18px 0 44px rgba(14,28,37,.16);flex-direction:column;align-items:stretch;text-align:center;gap:0;margin:0;padding:12px 18px 40px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .26s ease;z-index:2}
  .nav.open .nav-links{transform:translateX(0)}
  /* scrim over the rest of the page so the drawer reads as a layer */
  .nav::after{content:'';position:fixed;top:70px;left:0;right:0;bottom:0;background:rgba(14,28,37,.42);opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;z-index:1}
  .nav.open::after{opacity:1;visibility:visible}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav-links>li>a{padding:16px 0;font-size:17px;border-bottom:1px solid var(--line-soft);width:100%}
  /* mark the items that expand rather than navigate */
  .nav-links>li.has-drop>a{display:flex;align-items:center;justify-content:center;gap:9px}
  .nav-links>li.has-drop>a::after{content:'';width:11px;height:7px;flex:none;background:currentColor;opacity:.5;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s ease}
  .nav-links>li.has-drop.drop-open>a::after{transform:rotate(180deg);opacity:.9}
  .nav-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;background:transparent;padding:0;display:none}
  /* Plain show/hide rather than an animated max-height. The old cap clipped
     the services panel, which stacks ~21 links on a phone, and a pixel
     ceiling is guesswork against content that changes. */
  .nav-links>li.drop-open .nav-drop{display:block;padding:4px 0 12px}
  /* injected by the nav script: the parent row is a disclosure on mobile, so
     the section page needs its own way in */
  .nav-drop a.nav-overview{display:block;padding:10px 0;font-family:var(--sans-med);font-size:14.5px;
    color:var(--brass);text-decoration:none;border-bottom:1px solid var(--line-soft)}
  .nav-drop a{padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .nav-mobile-cta{display:flex;justify-content:center;margin-top:26px;border:0}
  .nav-mobile-cta .btn{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;
    background:var(--brass);color:#fffdf8;font-family:var(--sans-med);font-size:14.5px;
    padding:13px 30px;border-radius:999px;text-decoration:none;border:0;white-space:nowrap}
  .nav-mobile-cta .btn:hover{background:var(--brass-deep);color:#fffdf8}
}
/* Desktop keeps the panel as designed; the overview row is a mobile
   affordance only. Scoped by min-width so it does not depend on where
   this rule lands relative to the mobile block. */
@media(min-width:1081px){.nav-drop a.nav-overview{display:none}}
.nav-mobile-cta{display:none}
@media(max-width:1080px){.nav-mobile-cta{display:flex}}
/* inline form validation message */
.form-error{margin:12px 0 0;padding:10px 14px;border-radius:4px;background:#fdf1ef;border:1px solid #e9c4bd;color:#8c2f1d;font-size:13.5px;line-height:1.55}
/* The closed mobile drawer sits off-canvas at translateX(100%), which
   extended the document and gave some pages a sideways scroll. clip,
   not hidden, so the sticky nav keeps working. */
@media(max-width:1080px){html{overflow-x:clip}}

/* submission notice under every Formspree form */
.form-consent{font-size:12px;line-height:1.6;color:var(--color-text-muted,#6d7783);margin-top:14px}
.form-consent a{color:inherit;text-decoration:underline}
/* footer lockup: the horizontal white lockup needs more height than the
   old square mark to stay legible */
.footer-brand img{height:46px;opacity:0.92}

/* ============================================================
   V6 OVERRIDES — what the sand palette and Cormorant need on top
   of the retokenised V5 component rules.
   ============================================================ */

/* Cormorant sits noticeably smaller and lighter than Fraunces at the same
   size, so display type is nudged up and given real weight. */
.page-hero h1{font-size:clamp(38px,4.4vw,62px);font-weight:500;line-height:1.06}
.detail-body h2{font-size:clamp(28px,2.9vw,42px);font-weight:500;line-height:1.14}
.page-cta h2{font-family:var(--serif);font-size:clamp(30px,3.2vw,48px);font-weight:500;line-height:1.08}
.pull-quote{font-weight:500}
/* The attribution had no styling, so it ran straight on from the quote and
   read as part of it. Own line, label treatment, same as the homepage quotes. */
.pull-quote cite{display:block;margin-top:20px;font-family:var(--sans-med);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--brass-mid)}
.section-intro h2,.hub-section h2,.pillars-section h2,.faq-section h2{font-family:var(--serif);font-weight:500}
h1,h2{letter-spacing:-0.005em}

/* Warm ground instead of flat white. */
body{background:var(--cream);color:var(--text-mid)}
.detail-content.section--white,.detail-content.section--light{background:var(--cream)}

/* Brass needs light text on it; the old gold took ink. */
.btn-gold,.btn.btn--primary{background:var(--brass);color:#fffdf8}
.btn-gold:hover,.btn.btn--primary:hover{background:var(--brass-deep);color:#fffdf8}

/* Eyebrows on dark grounds need the light brass, not the deep one. */
.page-hero .eyebrow,.page-cta .eyebrow,.section--soft-dark .eyebrow,.section--dark .eyebrow{color:var(--brass-light)}

/* Footer sits deeper than the other dark bands so it reads as a base. */
.site-footer,footer.site-footer{background:var(--ink-2)}

/* Card hover treatment, matching the homepage "Why Coastwise" cards. */
.info-box,.tile,.hub-card,.area-card{transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
a.tile:hover,a.hub-card:hover,a.area-card:hover,.info-box:hover{border-color:var(--brass-light);box-shadow:0 10px 26px rgba(26,36,48,.07);transform:translateY(-3px)}

/* Dead cells in the hairline grids.
   .fact-band and .steps are 3-column grids that draw their dividers with a
   1px gap over a line-coloured background. That background shows through any
   empty cell, so every item count that is not a multiple of 3 rendered as
   real cards plus blank boxes (39 pages had 4, 5 or 8 items).
   Four items get their own row of four; other counts let the final card
   span whatever columns are left. Spans reset at each narrower breakpoint. */
.fact-band > :last-child:nth-child(3n+1),.steps > :last-child:nth-child(3n+1){grid-column:span 3}
.fact-band > :last-child:nth-child(3n+2),.steps > :last-child:nth-child(3n+2){grid-column:span 2}
.fact-band:has(> :nth-child(4)):not(:has(> :nth-child(5))),
.steps:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns:repeat(4,1fr)}
.fact-band:has(> :nth-child(4)):not(:has(> :nth-child(5))) > :last-child,
.steps:has(> :nth-child(4)):not(:has(> :nth-child(5))) > :last-child{grid-column:auto}
@media(max-width:980px){
  .fact-band > *,.steps > *{grid-column:auto}
  .fact-band > :last-child:nth-child(2n+1),.steps > :last-child:nth-child(2n+1){grid-column:span 2}
}
@media(max-width:560px){.fact-band > *,.steps > *{grid-column:auto}}

/* Wave on both sides of the label. Drawn as a mask over currentColor rather
   than a coloured background image, so one rule serves the brass eyebrows on
   light bands and the lighter brass on dark bands, and the old V5 gold in the
   data URI stops mattering. */
.eyebrow::before,.eyebrow::after,
.section-eyebrow::before,.section-eyebrow::after{content:'';width:34px;height:10px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c2.7-3.6 6.3-3.6 9 0s6.3 3.6 9 0 6.3-3.6 9 0' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c2.7-3.6 6.3-3.6 9 0s6.3 3.6 9 0 6.3-3.6 9 0' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}

/* ---- One container system across the whole site ----
   The homepage lays out with .wrap (max-width var(--wrap), padding var(--pad)).
   Child pages used .container inside sections with a fixed 56px padding, and
   the responsive --wrap steps lived only in the homepage's own stylesheet.
   The result: child pages stayed at 1180 while the homepage grew to 1320+,
   and the nav logo sat 48px inboard of the content beneath it.
   These three rules make both systems resolve to the same edges. */
@media(min-width:1500px){:root{--wrap:1320px}}
@media(min-width:1900px){:root{--wrap:1440px}}
@media(min-width:2400px){:root{--wrap:1560px}}

.page-hero,.detail-content,.page-cta{padding-left:var(--pad);padding-right:var(--pad)}
.container,.detail-body{max-width:calc(var(--wrap) - var(--pad) * 2)}
.detail-body{margin-left:auto;margin-right:auto}
/* ---- Reading column ----
   .detail-body ran the full container width while its headings, paragraphs
   and lists were each capped at 820px and left-aligned inside it. The prose
   therefore sat in the left 820 of a 1464 box with a large hole to its right,
   which read as badly off-centre. The column itself is now the measure, and
   it is centred, so everything inside shares one left edge. */
.detail-body{max-width:900px;margin-left:auto;margin-right:auto}
.detail-body h2,.detail-body>p,.detail-body>ul,.detail-body>ol{max-width:none}

/* The hero sat at the container edge while the body was centred, so the two
   did not share an axis. Same column for both. */
.page-hero > div{max-width:900px;margin-left:auto;margin-right:auto}
.page-hero h1,.page-hero > div > p{max-width:none}

/* Components that genuinely need room break out of the reading measure,
   staying centred on the same axis. */
.detail-body .info-grid,
.detail-body .steps,
.detail-body .table-scroll,
.detail-body .team-grid,
.detail-body .cat-grid{width:min(calc(var(--wrap) - var(--pad) * 2), 1180px);
  margin-left:50%;transform:translateX(-50%)}
/* The break-out above is a desktop move: it pulls these wider than the 900px
   reading column. On a phone there is nothing to break out of, and min() was
   still resolving to 1140px against --wrap, so every page using one of these
   scrolled sideways. Below the nav breakpoint they just fill the column. */
@media(max-width:1080px){
  .detail-body .info-grid,
  .detail-body .steps,
  .detail-body .table-scroll,
  .detail-body .team-grid,
  .detail-body .cat-grid{width:auto;margin-left:0;transform:none}
}

/* ---- Cross-link bar ----
   Was small left-aligned text with hairline icons. Now centred pills, sized
   to be obvious targets. */
.cross-links-inner{justify-content:center;gap:14px;padding:26px var(--pad)}
.cross-link{background:var(--white-warm);border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;font-size:14.5px;color:var(--ink);text-decoration:none;
  transition:border-color .18s ease,color .18s ease,box-shadow .18s ease}
.cross-link:hover{border-color:var(--brass-light);color:var(--brass);
  box-shadow:0 6px 18px rgba(26,36,48,.06)}
.cross-link svg{width:18px;height:18px;stroke:var(--brass-mid)}


/* ---- Second-layer pages: give them some rhythm ----
   These read flat because the band alternation was #fff against #fef9ef, a
   two percent step that no one can see, and because the only visual devices
   were hairline boxes. Fixes below need no new markup and no images. */

/* 1. Bands that actually alternate. Lifted warm white against recessed sand,
      with the page ground sitting between them. */
.detail-content{background:var(--white-warm)}
.detail-content.section--white,.detail-content.section--light{background:var(--sand)}
.detail-content.section--cream{background:var(--cream)}
/* --mist was a cold blue-grey left over from the teal palette and clashes
   with everything warm around it. */
.detail-content.section--mist,.section--mist{background:var(--cream)}

/* 2. Section headings get a short brass rule, so each one reads as a stop
      rather than another paragraph in a wall of text. */
.detail-body h2{position:relative;padding-top:20px}
.detail-body h2::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--brass)}
/* Every section heading carries the rule. Suppressing it on :first-child
   made it inconsistent: pages that open a section with a paragraph showed it,
   pages that open with the heading did not. */

/* 3. Steps get numbered automatically. The markup on these pages carries no
      numeral, so a counter supplies one and they pick up the same brass
      treatment as the homepage without touching 49 files. */
.steps{counter-reset:stepnum;gap:1px}
.step{counter-increment:stepnum;padding-top:46px}
.step::after{content:counter(stepnum,decimal-leading-zero);position:absolute;top:16px;left:30px;
  font-family:var(--serif);font-size:30px;line-height:1;font-weight:500;color:var(--brass-light)}
.step h4{margin-bottom:9px}

/* 4. Fact bands carry the brass rather than sitting as plain grey boxes. */
.fact strong{color:var(--ink)}
.fact svg{stroke:var(--brass-mid)}

/* 5. Pull quotes and callouts lean on the serif and the brass edge. */
.pull-quote{border-left-color:var(--brass)}
.trust-line{border-left-color:var(--brass)}
.takeaways{border-left-color:var(--brass)}

/* ---- Matching questionnaire (/match/) ---- */
.q{max-width:720px;margin:0 auto}
.q-progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.q-progress span{display:block;height:100%;width:14%;background:var(--brass);transition:width .35s ease}
.q-count{font-family:var(--sans-med);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-mid);margin:16px 0 30px}
.q-step{border:0;padding:0;margin:0;display:none}
.q-step.is-current{display:block}
.q-title{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.14;color:var(--ink);padding:0;margin:0 0 10px}
.q-help{font-size:14.5px;color:var(--text-mid);margin:0 0 22px}
.opt{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 18px;margin-bottom:9px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.opt:hover{border-color:var(--brass-light)}
.opt input{margin-top:3px;accent-color:var(--brass);width:17px;height:17px;flex:none}
.opt:has(input:checked){border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.opt-body{display:flex;flex-direction:column;gap:3px}
.opt-label{font-size:15.5px;color:var(--ink)}
.opt-note{font-size:13px;color:var(--text-soft)}
.q-field{display:block;margin-top:18px}
.q-field span{display:block;font-family:var(--sans-med);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:7px}
.q-field input{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;padding:13px 14px}
.q-field input:focus{outline:none;border-color:var(--brass-light)}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:620px){.q-grid{grid-template-columns:1fr}}
.q-nav{display:flex;gap:12px;align-items:center;margin-top:30px}
.q-nav .btn{cursor:pointer}
/* .btn sets display, which beats the hidden attribute's UA style, so the
   Back and Send buttons showed on every step until this. */
.q-nav .btn[hidden],.q-suggest[hidden]{display:none}
.q-crisis{font-size:13px;color:var(--text-soft);margin-top:22px}
.q-subhead{font-family:var(--sans-med);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-mid);margin:34px 0 4px;padding-top:26px;border-top:1px solid var(--line)}
.q-inline{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.q-inline .opt{flex:1 1 auto;min-width:150px;margin-bottom:0}
.q-terms{font-size:13px;line-height:1.66;color:var(--text-soft);margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.q-field select{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;padding:13px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass-mid) 50%),linear-gradient(135deg,var(--brass-mid) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.q-field select:focus{outline:none;border-color:var(--brass-light)}
.q-crisis a{color:var(--brass);border-bottom:1px solid var(--brass-light);text-decoration:none}
/* the provisional match, shown on the last step */
.q-suggest{background:var(--sand);border-left:2px solid var(--brass);padding:20px 22px;margin-bottom:26px}
.q-suggest h3{font-family:var(--sans-med)!important;font-size:11.5px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-mid);margin:0 0 12px!important}
.q-suggest ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.q-suggest li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--ink)}
.q-suggest p{font-size:13px;color:var(--text-mid);margin:12px 0 0}

/* ---- Clinician bio pages ---- */
/* Supplied headshots range from full colour to true black and white, so any
   hover-to-colour treatment would be uneven. Greyscale everything instead:
   uniform regardless of what the source happens to be. */
.team-card img,.team-member img{filter:grayscale(1)}
.team-readmore{margin-top:14px}
.team-readmore a{font-family:var(--sans-med);font-size:13px;color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-light);padding-bottom:2px}
.team-readmore a:hover{color:var(--ink)}
.bio-top{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start;max-width:var(--wrap);margin:0 auto}
.bio-photo{width:100%;height:auto;aspect-ratio:1/1.16;object-fit:cover;object-position:center top;border:1px solid var(--line);border-radius:3px;background:var(--sand)}
.bio-lead{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.42;color:var(--ink);margin-bottom:26px}
.bio-focus-h{font-family:var(--sans-med)!important;font-size:11px!important;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-mid);margin:0 0 12px!important}
.bio-focus{list-style:none;margin:0 0 26px;padding:0;columns:2;column-gap:28px}
.bio-focus li{font-size:15px;color:var(--text-mid);padding:5px 0;break-inside:avoid;border-bottom:1px solid var(--line-soft)}
@media(max-width:860px){.bio-top{grid-template-columns:1fr}.bio-photo{max-width:260px}.bio-focus{columns:1}}

/* Optional photographic page hero. Add class="page-hero page-hero--photo"
   and style="--hero-img:url(/images/photos/x.jpg)" on the section. The ink
   wash keeps the white display type legible over any of the photos. */
.page-hero--photo{background-image:linear-gradient(100deg,rgba(26,36,48,.94) 0%,rgba(26,36,48,.86) 42%,rgba(26,36,48,.52) 100%),var(--hero-img);background-size:cover;background-position:center 35%;background-repeat:no-repeat}
@media(max-width:760px){
  .page-hero--photo{background-image:linear-gradient(180deg,rgba(26,36,48,.9) 0%,rgba(26,36,48,.82) 60%,rgba(26,36,48,.78) 100%),var(--hero-img)}
}

@media(prefers-reduced-motion:reduce){
  .info-box,.tile,.hub-card,.area-card{transition:none}
  a.tile:hover,a.hub-card:hover,a.area-card:hover,.info-box:hover{transform:none}
}