/* ============================================================
   Amari website mockups — shared design system
   One source of truth for the header, footer, and core
   components across every page mockup in ops/docs/.
   Pages add a small per-page <style> for their unique sections.
   Header + footer markup is injected by amari-mockup.js.
   ============================================================ */

:root{
  --cream:#F4F3EE;        /* primary chalk ground */
  --cream-2:#E7E9E4;      /* cooler alternate ground */
  --paper:#FBFBF8;
  --tan:#D0D7D2;          /* mineral field */
  --peach:#E0E3DE;        /* stone field */
  --sage:#71817B;
  --ink:#171A18;          /* carbon: text + buttons */
  --body:#4F544F;         /* readable secondary ink */
  --line:rgba(23,26,24,.16);
  --chalk:#F4F3EE;
  --carbon:#171A18;
  --mineral:#5B7376;
  --stone:#8A8D86;
  --sans:"ABC Diatype", "Helvetica Neue", Arial, sans-serif;
  --header-sans:var(--sans);
  --serif:var(--sans);
  --ease:cubic-bezier(0.32,0.72,0,1);
  --maxw:1360px;
}
*{box-sizing:border-box;margin:0;padding:0}
@font-face{font-family:"ABC Diatype";src:url("/fonts/ABCDiatype-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Diatype";src:url("/fonts/ABCDiatype-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"ABC Diatype";src:url("/fonts/ABCDiatype-Bold.otf") format("opentype");font-weight:600 700;font-style:normal;font-display:swap}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--sans);font-weight:500;line-height:1.02;letter-spacing:-.035em}
p{color:var(--body);max-width:60ch}
a{color:inherit;text-decoration:none}
/* Keep emphasis in the wording and hierarchy, not in a singled-out styled word. */
em{font-style:normal}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* Small, factual labels; display type is reserved for headings. */
.eyebrow{font-family:var(--sans);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.eyebrow.light{color:rgba(255,255,255,.85)}

/* One quiet, rectangular CTA system. */
.btn{display:inline-block;background:var(--carbon);color:var(--chalk);font-family:var(--sans);font-weight:500;font-size:13px;text-transform:none;letter-spacing:.01em;padding:15px 20px;border-radius:0;border:none;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn-pale{background:var(--cream);color:var(--ink)}
.btn-pale:hover{background:#fff}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Header (wordmark-led, single-row) ---------- */
header.site{position:sticky;top:0;left:0;right:0;z-index:40;background:var(--chalk);color:var(--carbon);border-bottom:1px solid rgba(23,26,24,.12);transition:box-shadow .35s var(--ease)}
header.site.scrolled{box-shadow:0 4px 18px rgba(23,26,24,.05)}
.hdr-row{max-width:var(--maxw);min-height:92px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.brand-slot{display:inline-flex;align-items:center;justify-content:flex-start;line-height:1;color:var(--carbon)}
.wordmark{display:block;width:228px;height:auto}
.hdr-right{display:flex;gap:18px;align-items:center;justify-self:end}
.hdr-portal{font-family:var(--header-sans);font-size:12px;font-weight:400;letter-spacing:.01em;color:var(--carbon);opacity:.72;white-space:nowrap}
.hdr-portal:hover{color:var(--mineral)}
.hdr-ico{width:18px;height:18px;opacity:.78}
.nav-row{display:flex;justify-content:flex-end;gap:28px;font-family:var(--header-sans);font-size:17px;font-weight:400}
header.site nav a{position:relative;padding:7px 0;color:var(--carbon)}
header.site nav a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
header.site nav a:hover,header.site nav a.current{color:var(--carbon)}
header.site nav a:hover::after,header.site nav a.current::after{transform:scaleX(1)}
.btn.hdr-book{background:var(--carbon);color:var(--chalk);padding:13px 18px;border-radius:0;font-family:var(--header-sans);font-size:13px;letter-spacing:.01em}
.btn.hdr-book:hover{background:var(--mineral);color:var(--chalk);transform:none}

/* ---------- Hero (image provides context; type carries the composition) ---------- */
.hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;isolation:isolate;overflow:hidden;padding:150px 0 76px}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#2b2723 center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,26,24,.78) 0%,rgba(23,26,24,.56) 44%,rgba(23,26,24,.12) 100%)}
.hero-inner{width:min(100%,var(--maxw));max-width:none;margin:0 auto;padding:0 40px;color:#fff}
.hero .eyebrow{display:block;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(3rem,5.4vw,5.45rem);font-weight:500;letter-spacing:-.04em;line-height:.96;max-width:13ch;margin:0}
.hero p{color:rgba(255,255,255,.9);max-width:48ch;margin:28px 0 0;font-size:clamp(1rem,1.25vw,1.14rem)}
.hero .btn{margin-top:30px}
/* hero stat row */
.hero-stats{display:flex;gap:clamp(34px,6vw,72px);justify-content:flex-start;margin:40px 0 0}
.hero-stats .st{color:#fff}
.hero-stats .st b{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,3.4vw,2.8rem);display:block;line-height:1}
.hero-stats .st span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78);display:block;margin-top:10px}

/* ---------- Color-block band (edge portrait) ---------- */
.band{display:grid;grid-template-columns:1fr 1fr;min-height:540px;align-items:center;
  width:calc(100% - 80px);max-width:var(--maxw);margin:64px auto;border:1px solid var(--line);overflow:hidden}
.band.tan{background:var(--tan)}
.band.peach{background:var(--peach)}
.band.sage{background:var(--sage)}
.band-copy{padding:56px clamp(46px,6vw,90px)}
.band-copy .eyebrow{margin-bottom:20px;display:block}
.band-copy h2{font-size:clamp(2.3rem,4.3vw,3.6rem);font-weight:500;max-width:15ch;color:var(--ink)}
.band-copy p{margin-top:22px;color:rgba(33,29,25,.75);max-width:40ch}
.band-copy cite{display:block;margin-top:26px;font-style:normal;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(33,29,25,.7)}
.band.sage .band-copy p,.band.sage .band-copy cite{color:var(--ink)}
.band-copy .btn{margin-top:34px}
.band-photo{align-self:stretch;background-size:cover;background-position:center;min-height:540px}
.band.reverse .band-photo{order:-1}
/* quote band: bigger serif, no width cap */
.band-copy.quote h2{font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:24ch;line-height:1.24}
.band-copy.quote .mark{font-family:var(--serif);font-size:40px;display:block;margin-bottom:16px;color:rgba(33,29,25,.55)}

/* ---------- Pull quote ---------- */
/* When a section carries a background-image (a muted material/mood crop), the
   ::before scrim keeps the serif quote legible. Sections with no inline
   background-image render exactly as before (scrim sits over nothing). */
.pullquote{position:relative;padding:clamp(90px,13vw,160px) 0;text-align:center;background-size:cover;background-position:center}
.pullquote::before{content:"";position:absolute;inset:0;background:rgba(248,241,232,.87)}
.pullquote .wrap{position:relative;z-index:1}
.pullquote .mark{font-family:var(--serif);font-size:44px;color:var(--ink);display:block;margin-bottom:30px;letter-spacing:.1em}
.pullquote blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.3;max-width:24ch;margin:0 auto;color:var(--ink)}
.pullquote cite{display:block;margin-top:34px;font-style:normal;font-size:14px;color:var(--body)}

/* ---------- Quiet texture divider (full-width material/mood strip, no text) ---------- */
.divider-strip{width:100%;height:clamp(150px,20vw,240px);background-size:cover;background-position:center}

/* ---------- Appointment CTA ---------- */
.appt{padding:clamp(80px,10vw,132px) 0;background:var(--carbon);color:var(--chalk);border-top:1px solid var(--carbon)}
.appt .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);column-gap:clamp(44px,9vw,148px);align-items:end}
.appt h2{font-size:clamp(2.5rem,4.3vw,4rem);font-weight:500;line-height:.98;max-width:12ch}
.appt p{margin:0;color:rgba(244,243,238,.76);max-width:42ch}
.appt .btn{grid-column:2;justify-self:start;margin-top:30px;background:var(--chalk);color:var(--carbon)}
.appt a.txt{border-bottom:1px solid currentColor}

/* ---------- Footer: directory → page CTA → utility ---------- */
.site-footer{background:var(--paper);color:var(--ink)}
.footer-directory{border-top:1px solid var(--line);padding:32px 0}
.footer-directory .wrap{display:flex;align-items:center;gap:clamp(36px,6vw,110px)}
.footer-directory-mark{flex:0 0 auto;display:block;width:142px;height:auto}
.footer-directory nav{display:flex;align-items:center;gap:clamp(18px,2.9vw,46px);flex-wrap:wrap}
.footer-directory nav a{font-size:15px;line-height:1.3;border-bottom:1px solid transparent}
.footer-directory nav a:hover{border-color:currentColor}
.footer-utility{border-bottom:1px solid var(--line);padding:26px 0}
.footer-utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.footer-utility nav{display:flex;gap:18px;flex-wrap:wrap;font-size:12px}
.footer-utility nav a{border-bottom:1px solid transparent}
.footer-utility nav a:hover{border-color:currentColor}
.footer-utility span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}

/* ---------- Reveal on scroll ---------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
/* Fail open: content is visible by default; only hidden once JS confirms it is running (html.js-reveal). A JS hiccup can never leave a section (e.g. the pricing) invisible. */
html.js-reveal .reveal:not(.in){opacity:0;transform:translateY(16px);filter:blur(6px)}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){html.js-reveal .reveal:not(.in){opacity:1;transform:none;filter:none;transition:none}}

/* ---------- Responsive (shared components) ---------- */
@media (max-width:1000px){
  .band{grid-template-columns:1fr}
  .band-photo{min-height:360px;order:-1}
  .appt .wrap{grid-template-columns:1fr;row-gap:26px}
  .appt .btn{grid-column:auto;margin-top:4px}
}
/* Collapse chrome earlier than phone-only: 6 nav links + utility crowdv
   around ~641–860. */
@media (max-width:860px){
  .wrap,.hdr-row{padding-left:22px;padding-right:22px}
  .hdr-row{grid-template-columns:auto 1fr auto}
  .nav-row{display:none}
  .footer-directory .wrap{align-items:flex-start;flex-direction:column;gap:24px}
  .footer-directory nav{gap:18px 30px}
  .footer-utility .wrap{align-items:flex-start;flex-direction:column;gap:18px}
  .hero{min-height:660px;padding:126px 0 58px}
  .hero-inner{padding-left:22px;padding-right:22px}
  .hero-stats{gap:40px}
}
@media (max-width:520px){
  .footer-directory nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:16px 24px}
}

/* ============================================================
   v6 additions (not in the mockup css): search overlay,
   mobile menu, newsletter form states.
   ============================================================ */

/* Search trigger is a real button now */
.hdr-search{background:none;border:none;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center}
.hdr-search .hdr-ico{transition:opacity .3s var(--ease)}
.hdr-search:hover .hdr-ico{opacity:1}

/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:80;background:rgba(33,29,25,.4);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:14vh 22px 0}
.search-overlay[hidden]{display:none}
.search-panel{background:var(--paper);width:100%;max-width:560px;border-radius:2px;box-shadow:0 24px 70px rgba(33,29,25,.28);overflow:hidden}
.search-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.search-row input{flex:1;border:none;background:transparent;padding:20px 22px;font-family:var(--sans);font-size:16px;color:var(--ink);outline:none}
.search-close{background:none;border:none;font-size:26px;line-height:1;padding:0 20px;cursor:pointer;color:var(--body)}
.search-close:hover{color:var(--ink)}
.search-results{max-height:50vh;overflow-y:auto}
.search-hit{display:block;padding:14px 22px;font-size:15px;border-bottom:1px solid var(--line)}
.search-hit:last-child{border-bottom:none}
.search-hit:hover{background:var(--cream-2)}
.search-empty{padding:18px 22px;font-size:14px}
.search-empty a{border-bottom:1px solid var(--ink)}
body.search-open{overflow:hidden}

/* Mobile menu */
.hdr-menu{display:none;background:none;border:none;cursor:pointer;padding:6px 2px;flex-direction:column;gap:5px}
.hdr-menu span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .35s var(--ease)}
header.site.menu-open .hdr-menu span:first-child{transform:translateY(3.25px) rotate(45deg)}
header.site.menu-open .hdr-menu span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobile-nav{display:none}
@media (max-width:860px){
  .hdr-menu{display:flex}
  .wordmark{width:190px}
  .hdr-right{gap:12px}
  .btn.hdr-book{padding:10px 14px;font-size:12px;letter-spacing:.01em;white-space:nowrap}
  .hdr-portal,.hdr-search{display:none}
  .mobile-nav{position:fixed;inset:0;background:var(--chalk);padding:118px 30px 40px;flex-direction:column;gap:20px;font-family:var(--header-sans);font-size:20px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);color:var(--carbon);overflow-y:auto}
  header.site.menu-open{background:var(--chalk);color:var(--carbon);box-shadow:none}
  header.site.menu-open,
  header.site.menu-open nav,
  header.site.menu-open .mobile-nav,
  header.site.menu-open .mobile-nav a{color:var(--carbon)}
  header.site.menu-open .mobile-nav{display:flex;opacity:1;pointer-events:auto}
  header.site.menu-open .hdr-row,header.site.menu-open .hdr-row *{position:relative;z-index:2}
  header.site.menu-open .mobile-nav .btn{margin-top:14px;align-self:flex-start;background:var(--carbon);color:var(--chalk)}
  body.menu-open{overflow:hidden}
}

/* Newsletter form states */
.news-msg{margin:14px auto 0;font-size:13.5px;max-width:32ch}
.news-msg:empty{display:none}