@import url("fonts.css");

/* ==========================================================================
   Stat Physician — design system
   Dark editorial system: charcoal ground, cream type, gold accents.
   ========================================================================== */

:root{
  /* ground */
  --ink:        #14171a;
  --ink-1:      #191d21;
  --ink-2:      #21262b;
  --ink-3:      #2b3238;
  --ink-glow:   #1d2429;

  /* type */
  --cream:      #f5f1e8;
  --cream-soft: rgba(245,241,232,.74);
  --cream-dim:  rgba(245,241,232,.56);
  --cream-faint:rgba(245,241,232,.34);

  /* accents */
  --gold:       #d8bd88;
  --gold-light: #e9d5aa;
  --gold-deep:  #b8934f;
  --jade:       #6fc7ae;

  /* lines */
  --line:       rgba(245,241,232,.14);
  --line-soft:  rgba(245,241,232,.08);
  --line-strong:rgba(245,241,232,.24);

  /* light band */
  --paper:      #f5f1e8;
  --paper-2:    #ece6d9;
  --paper-ink:  #191c1f;
  --paper-soft: rgba(25,28,31,.72);
  --paper-line: rgba(25,28,31,.14);

  /* metrics */
  --maxw: 1180px;
  --narrow: 820px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.28), 0 22px 60px -30px rgba(0,0,0,.85);

  --sans: 'Manrope', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'DM Serif Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ambient page glow — the "atmosphere" layer */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(216,189,136,.16), transparent 60%),
    radial-gradient(700px 460px at 8% 4%, rgba(111,199,174,.07), transparent 62%);
}
body > *{ position:relative; z-index:1 }

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

a{ color:inherit; text-decoration:none }
p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }

h1,h2,h3,h4{ margin:0 0 .5em; font-weight:400; letter-spacing:-.015em }
h1,h2{ font-family:var(--serif); line-height:1.02 }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:rgba(216,189,136,.32); color:#fff }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.1rem; font-weight:700; font-size:.85rem;
}
.skip-link:focus{ left:12px; top:12px }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px }
.wrap-narrow{ max-width:var(--narrow) }
.wrap-wide{ max-width:1340px }

.section{ padding:clamp(64px,8vw,116px) 0 }
.section-tight{ padding:clamp(44px,5vw,68px) 0 }
.section-flush-bottom{ padding-bottom:0 }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0 }

/* ---------- typography helpers ---------- */

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.6;
}
.eyebrow-plain::before{ display:none }

.display{
  font-family:var(--serif);
  font-size:clamp(2.55rem,5.4vw,4.5rem);
  line-height:1.0;
  letter-spacing:-.022em;
  margin:0 0 1.2rem;
}
.display em{
  font-style:italic;
  color:var(--gold);
}
.h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3.6vw,3.1rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 1rem;
  max-width:22ch;
}
.h2 em{ font-style:italic; color:var(--gold) }
.h3{
  font-size:1.18rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem;
}
.h4{
  font-size:.95rem; font-weight:800; letter-spacing:.02em; margin:0 0 .4rem;
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.22rem);
  color:var(--cream-soft);
  max-width:60ch;
  margin:0 0 1.6rem;
}
.muted{ color:var(--cream-dim) }
.small{ font-size:.87rem }
.tiny{ font-size:.78rem; letter-spacing:.01em }
.center{ text-align:center }
.center .h2,.center .lede{ margin-left:auto; margin-right:auto }
.nowrap{ white-space:nowrap }

.section-head{ margin-bottom:clamp(38px,5vw,64px) }
.section-head .h2{ margin-bottom:.7rem }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans);
  font-size:.9rem; font-weight:700; letter-spacing:.005em;
  padding:.85rem 1.5rem;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn-gold{ background:var(--gold); color:#1a1710; }
.btn-gold:hover{ background:var(--gold-light) }
.btn-ghost{ border-color:var(--line-strong); color:var(--cream) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold) }
.btn-ink{ background:var(--paper-ink); color:var(--paper) }
.btn-ink:hover{ background:#000 }
.btn-block{ width:100%; justify-content:center }

.btn-row{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin:0 0 1.6rem;
}
.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:700; color:var(--gold);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.link-arrow:hover{ border-bottom-color:var(--gold) }
.link-arrow svg{ width:14px; height:14px; flex:0 0 14px }
.link-arrow .arw{ transition:transform .2s ease }
.link-arrow:hover .arw{ transform:translateX(3px) }
.hero-note svg{ width:14px; height:14px }
.link-quiet{
  font-size:.87rem; font-weight:700; color:var(--cream-soft);
  border-bottom:1px solid var(--line-strong); padding-bottom:2px;
}
.link-quiet:hover{ color:var(--gold); border-bottom-color:var(--gold) }

/* ---------- header ---------- */

.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(20,23,26,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
.site-header.is-stuck{ background:rgba(18,21,24,.95); border-bottom-color:var(--line) }

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  min-height:74px;
}

.brand{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto }
.brand-mark{ width:30px; height:30px; flex:0 0 30px }
.brand-mark svg{ width:100%; height:100% }
.brand-text{ display:flex; flex-direction:column; line-height:1 }
.brand-name{
  font-family:var(--serif); font-size:1.22rem; letter-spacing:.01em; color:var(--cream);
}
.brand-sub{
  font-size:.56rem; font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-top:4px;
}

.nav-desktop{ display:flex; align-items:center; gap:.15rem }
.nav-item{ position:relative }
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .78rem; border-radius:var(--radius);
  font-size:.88rem; font-weight:600; color:var(--cream-soft);
  background:none; border:0; font-family:inherit; cursor:pointer;
  transition:color .16s ease, background .16s ease;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{ color:var(--cream); background:rgba(245,241,232,.06) }
.nav-link.is-active{ color:var(--gold) }
.nav-caret{ transition:transform .2s ease; opacity:.7 }
.nav-link[aria-expanded="true"] .nav-caret{ transform:rotate(180deg) }

.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(92vw,660px);
  background:var(--ink-1);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:1.1rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) }
.dropdown-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem }
.dropdown-narrow{ width:min(92vw,340px) }
.dropdown-narrow .dropdown-grid{ grid-template-columns:1fr }
.dropdown a.dd-item{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.6rem .7rem; border-radius:var(--radius);
  transition:background .16s ease;
}
.dropdown a.dd-item:hover{ background:rgba(245,241,232,.06) }
.dd-ico{
  flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:3px; color:var(--gold);
}
.dd-ico svg{ width:14px; height:14px }
.dd-body{ display:flex; flex-direction:column; gap:2px }
.dd-title{ font-size:.86rem; font-weight:700; color:var(--cream) }
.dd-desc{ font-size:.75rem; color:var(--cream-dim); line-height:1.45 }
.dropdown-foot{
  margin-top:.7rem; padding-top:.8rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}

.header-cta{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto }
.header-phone{
  font-size:.84rem; font-weight:700; color:var(--cream-soft); display:inline-flex; gap:.45rem; align-items:center;
}
.header-phone:hover{ color:var(--gold) }
.header-phone svg{ width:14px; height:14px; color:var(--gold) }

.nav-toggle{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--radius); color:var(--cream);
  cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:95;
  background:var(--ink);
  padding:22px 24px 60px;
  overflow-y:auto;
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none }
.mobile-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px }
.mobile-group{ border-bottom:1px solid var(--line-soft); padding:14px 0 }
.mobile-group > a,.mobile-group > span{
  display:block; font-size:1.15rem; font-family:var(--serif); color:var(--cream); padding:6px 0;
}
.mobile-sub{ display:flex; flex-direction:column; gap:2px; padding:6px 0 2px }
.mobile-sub a{
  font-size:.9rem; color:var(--cream-soft); padding:.34rem 0 .34rem .9rem;
  border-left:1px solid var(--line); 
}
.mobile-sub a:hover{ color:var(--gold); border-left-color:var(--gold) }
.mobile-actions{ display:flex; flex-direction:column; gap:.7rem; margin-top:26px }
.mobile-meta{ margin-top:26px; color:var(--cream-dim); font-size:.85rem }

/* ---------- hero ---------- */

.hero{
  padding:clamp(58px,7.5vw,104px) 0 clamp(48px,6vw,84px);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero-copy{ max-width:640px }
.hero .display{ margin-bottom:1.35rem }
.hero-sub{
  font-size:clamp(1.02rem,1.4vw,1.16rem);
  color:var(--cream-soft); max-width:52ch; margin-bottom:2rem;
}
.hero-note{
  margin-top:1.9rem; padding-top:1.3rem; border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--cream-dim); display:flex; gap:1.5rem; flex-wrap:wrap;
}
.hero-note span{ display:inline-flex; align-items:center; gap:.5rem }
.hero-note svg{ width:14px; height:14px; color:var(--gold); flex:0 0 14px }

/* hero visual: layered gold-framed panel built from pure CSS/SVG */
.hero-art{
  position:relative; aspect-ratio:1/1; width:100%;
}
.hero-art::after{
  content:""; position:absolute; inset:6% -6% -8% 10%;
  background:radial-gradient(closest-side, rgba(216,189,136,.20), transparent 72%);
  filter:blur(12px); z-index:0;
}
.hero-art > svg{ position:relative; z-index:1; width:100%; height:100% }
.hero-art-wrap{ width:100%; max-width:min(560px,100%); margin-left:auto }
.hero-caption{
  margin-top:18px; text-align:center; font-size:.78rem; color:var(--cream-dim);
  line-height:1.5;
}
.hero-caption strong{ display:block; color:var(--cream); font-weight:700 }

/* ---------- stat band ---------- */

.stat-band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(245,241,232,.035), rgba(245,241,232,0));
}
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;
}
.stat{
  padding:clamp(24px,3vw,38px) clamp(18px,2.4vw,34px);
  border-right:1px solid var(--line-soft);
}
.stat:last-child{ border-right:0 }
.stat-value{
  font-family:var(--serif); font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1;
  color:var(--cream); margin-bottom:.45rem; letter-spacing:-.02em;
}
.stat-value em{ font-style:italic; color:var(--gold) }
.stat-label{ font-size:.9rem; font-weight:700; color:var(--cream) }
.stat-desc{ font-size:.8rem; color:var(--cream-dim); line-height:1.5; margin-top:.2rem }

/* ---------- generic cards & grids ---------- */

.grid{ display:grid; gap:clamp(16px,2vw,22px) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }

.card{
  background:linear-gradient(180deg, rgba(245,241,232,.045), rgba(245,241,232,.012));
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,30px);
  position:relative;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px) }
.card-flat{ background:rgba(245,241,232,.03) }
.card-ink{ background:var(--ink-1); border-color:var(--line) }

.card-ico{
  width:38px; height:38px; border:1px solid var(--line);
  border-radius:var(--radius); display:grid; place-items:center;
  color:var(--gold); margin-bottom:1.1rem; flex:0 0 38px;
}
.card-ico svg{ width:19px; height:19px }
.card-title{
  font-family:var(--serif); font-size:1.28rem; line-height:1.2;
  margin:0 0 .55rem; color:var(--cream); letter-spacing:-.01em;
}
.card-title a:hover{ color:var(--gold) }
.card-text{ font-size:.92rem; color:var(--cream-soft); margin:0 0 1.1rem }
.card-text:last-child{ margin-bottom:0 }

/* service cards (numbered) */
.service-card{ display:flex; flex-direction:column; height:100% }
.service-num{
  font-family:var(--serif); font-size:.95rem; color:var(--gold-deep);
  letter-spacing:.06em; margin-bottom:.9rem; display:block;
}
.service-list{
  list-style:none; margin:0 0 1.3rem; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.service-list li{
  position:relative; padding-left:1.05rem; font-size:.86rem; color:var(--cream-dim); line-height:1.5;
}
.service-list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:5px; height:1px; background:var(--gold-deep);
}
.service-card .link-arrow{ margin-top:auto }

/* icon feature row */
.feature-row{ display:flex; gap:1rem; align-items:flex-start }
.feature-row .card-ico{ margin-bottom:0; width:34px; height:34px; flex:0 0 34px }
.feature-row .card-ico svg{ width:17px; height:17px }

/* ---------- bulleted check list ---------- */

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem }
.check-list li{
  position:relative; padding-left:1.9rem; font-size:.93rem; color:var(--cream-soft);
}
.check-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:14px; height:8px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.check-list-2col{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 2rem }

/* ---------- pain / cost cards ---------- */

.pain-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,22px) }
.pain{
  border-top:2px solid var(--gold-deep);
  background:rgba(245,241,232,.028);
  padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column;
}
.pain-kicker{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem;
}
.pain-title{ font-family:var(--serif); font-size:1.32rem; line-height:1.2; margin:0 0 1rem; color:var(--cream) }
.pain-list{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.5rem }
.pain-list li{
  font-size:.88rem; color:var(--cream-dim); padding-left:1rem; position:relative; line-height:1.5;
}
.pain-list li::before{
  content:"—"; position:absolute; left:0; color:var(--gold-deep); font-size:.8rem;
}
.pain-cost{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--cream-dim);
}
.pain-cost strong{ display:block; color:var(--gold); font-family:var(--serif); font-size:1.32rem; font-weight:400; margin-bottom:.2rem }

/* ---------- numbered process ---------- */

.steps{ display:grid; gap:0; counter-reset:step }
.step{
  display:grid; grid-template-columns:96px minmax(0,1fr);
  gap:clamp(18px,3vw,40px);
  padding:clamp(24px,3vw,36px) 0;
  border-bottom:1px solid var(--line-soft);
}
.step:first-child{ border-top:1px solid var(--line-soft) }
.step-num{
  font-family:var(--serif); font-size:1.6rem; color:var(--gold); line-height:1;
  letter-spacing:.02em;
}
.step-body{ max-width:70ch }
.step-title{ font-family:var(--serif); font-size:1.42rem; margin:0 0 .6rem; color:var(--cream) }
.step-text{ font-size:.94rem; color:var(--cream-soft); margin:0 }
.step-meta{ margin-top:.9rem; font-size:.8rem; color:var(--cream-dim); display:flex; gap:1.2rem; flex-wrap:wrap }
.step-meta span{ display:inline-flex; align-items:center; gap:.45rem }
.step-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-deep) }

/* compact step chips */
.step-chips{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,20px) }
.step-chip{
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:22px; background:rgba(245,241,232,.025);
}
.step-chip .step-num{ font-size:1.15rem; margin-bottom:.8rem; display:block }
.step-chip .h3{ font-size:1rem }
.step-chip p{ font-size:.85rem; color:var(--cream-dim); margin:0 }

/* ---------- comparison table ---------- */

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg) }
table.cmp{ width:100%; border-collapse:collapse; min-width:640px }
table.cmp th,table.cmp td{
  text-align:left; padding:1rem 1.3rem; font-size:.9rem;
  border-bottom:1px solid var(--line-soft);
}
table.cmp thead th{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim); background:rgba(245,241,232,.04);
}
table.cmp thead th.hl{ color:var(--gold) }
table.cmp tbody tr:last-child td{ border-bottom:0 }
table.cmp td:first-child{ color:var(--cream); font-weight:600 }
table.cmp td{ color:var(--cream-dim) }
table.cmp td.hl{ color:var(--cream); background:rgba(216,189,136,.05) }

/* ---------- quote ---------- */

.quote{
  border-left:2px solid var(--gold);
  padding:clamp(22px,2.6vw,34px) 0 clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px);
  max-width:70ch;
}
.quote blockquote{
  font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.75rem);
  line-height:1.32; margin:0 0 1.1rem; color:var(--cream);
}
.quote blockquote::before{ content:"“" }
.quote blockquote::after{ content:"”" }
.quote cite{ font-style:normal; font-size:.85rem; color:var(--cream-dim) }
.quote cite strong{ display:block; color:var(--cream); font-weight:700; font-size:.92rem }

.quote-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px) }
.quote-card{
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px);
  background:rgba(245,241,232,.025); display:flex; flex-direction:column;
}
.quote-card blockquote{
  font-family:var(--serif); font-size:1.12rem; line-height:1.4; margin:0 0 1.2rem; color:var(--cream);
}
.quote-card cite{ font-style:normal; font-size:.8rem; color:var(--cream-dim); margin-top:auto }
.quote-card cite strong{ display:block; color:var(--cream); font-weight:700; font-size:.88rem }

/* ---------- FAQ ---------- */

.faq{ border-top:1px solid var(--line-soft) }
.faq details{
  border-bottom:1px solid var(--line-soft);
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  padding:1.4rem 0; font-size:1.02rem; font-weight:600; color:var(--cream);
  transition:color .16s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--gold) }
.faq summary .plus{
  flex:0 0 18px; width:18px; height:18px; position:relative; margin-top:.35rem;
}
.faq summary .plus::before,.faq summary .plus::after{
  content:""; position:absolute; background:var(--gold); transition:transform .2s ease, opacity .2s ease;
}
.faq summary .plus::before{ left:0; right:0; top:8px; height:1.5px }
.faq summary .plus::after{ top:0; bottom:0; left:8px; width:1.5px }
.faq details[open] summary .plus::after{ transform:scaleY(0); opacity:0 }
.faq .faq-body{ padding:0 0 1.5rem; max-width:74ch; color:var(--cream-soft); font-size:.94rem }

/* ---------- cream band ---------- */

.band-paper{
  background:var(--paper); color:var(--paper-ink);
  position:relative;
}
.band-paper .eyebrow{ color:#8a6a24 }
.band-paper .h2,.band-paper .display{ color:var(--paper-ink) }
.band-paper .h2 em,.band-paper .display em{ color:#a07b28 }
.band-paper .lede,.band-paper p{ color:var(--paper-soft) }
.band-paper .muted{ color:rgba(25,28,31,.6) }
.band-paper .card{
  background:#fffdf8; border-color:var(--paper-line);
}
.band-paper .card:hover{ border-color:rgba(25,28,31,.3) }
.band-paper .card-title{ color:var(--paper-ink) }
.band-paper .card-text{ color:var(--paper-soft) }
.band-paper .card-ico{ border-color:var(--paper-line); color:#8a6a24 }
.band-paper .check-list li{ color:var(--paper-soft) }
.band-paper .check-list li::before{ border-color:#a07b28 }
.band-paper .faq{ border-top-color:var(--paper-line) }
.band-paper .faq details{ border-bottom-color:var(--paper-line) }
.band-paper .faq summary{ color:var(--paper-ink) }
.band-paper .faq summary:hover{ color:#8a6a24 }
.band-paper .faq summary .plus::before,.band-paper .faq summary .plus::after{ background:#a07b28 }
.band-paper .faq .faq-body{ color:var(--paper-soft) }
.band-paper .table-wrap{ border-color:var(--paper-line) }
.band-paper table.cmp thead th{ background:rgba(25,28,31,.05); color:rgba(25,28,31,.62) }
.band-paper table.cmp thead th.hl{ color:#8a6a24 }
.band-paper table.cmp th,.band-paper table.cmp td{ border-bottom-color:var(--paper-line) }
.band-paper table.cmp td:first-child{ color:var(--paper-ink) }
.band-paper table.cmp td{ color:var(--paper-soft) }
.band-paper table.cmp td.hl{ color:var(--paper-ink); background:rgba(160,123,40,.07) }
.band-paper .step{ border-color:var(--paper-line) }
.band-paper .step-title{ color:var(--paper-ink) }
.band-paper .step-text{ color:var(--paper-soft) }
.band-paper .step-num{ color:#a07b28 }
.band-paper .step-meta{ color:rgba(25,28,31,.6) }
.band-paper .step-meta span::before{ background:#a07b28 }
.band-paper .quote blockquote{ color:var(--paper-ink) }
.band-paper .quote cite{ color:rgba(25,28,31,.6) }
.band-paper .quote cite strong{ color:var(--paper-ink) }
.band-paper .rule{ background:var(--paper-line) }
.band-paper .link-quiet{ color:var(--paper-soft); border-bottom-color:var(--paper-line) }
.band-paper .link-quiet:hover{ color:#8a6a24; border-bottom-color:#a07b28 }

/* ---------- CTA band ---------- */

.cta-band{
  border-top:1px solid var(--line);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(216,189,136,.14), transparent 70%),
    var(--ink-1);
  padding:clamp(60px,7vw,96px) 0;
  text-align:center;
}
.cta-band .h2{ max-width:26ch; margin-left:auto; margin-right:auto }
.cta-band .lede{ margin-left:auto; margin-right:auto }
.cta-band .btn-row{ justify-content:center; margin-bottom:0 }
.cta-note{ margin-top:1.6rem; font-size:.82rem; color:var(--cream-dim) }

/* ---------- page hero (inner pages) ---------- */

.page-hero{
  padding:clamp(48px,6vw,86px) 0 clamp(36px,4.5vw,60px);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(216,189,136,.05), transparent 78%);
}
.page-hero .display{ font-size:clamp(2.3rem,4.6vw,3.6rem); max-width:20ch }
.page-hero .lede{ margin-bottom:1.4rem }
.crumbs{
  display:flex; gap:.55rem; align-items:center; flex-wrap:wrap;
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--cream-faint); margin-bottom:1.6rem;
}
.crumbs a:hover{ color:var(--gold) }
.crumbs .sep{ opacity:.5 }

/* service hero with two columns */
.split{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.panel{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(245,241,232,.05), rgba(245,241,232,.015));
  padding:clamp(24px,2.6vw,34px);
}
.panel-title{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.2rem;
}
.panel-list{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.panel-list li{
  display:flex; justify-content:space-between; gap:1.4rem; align-items:baseline;
  padding:.72rem 0; border-bottom:1px solid var(--line-soft); font-size:.88rem;
}
.panel-list li:last-child{ border-bottom:0 }
.panel-list .k{ color:var(--cream-dim) }
.panel-list .v{ color:var(--cream); font-weight:700; text-align:right; font-variant-numeric:tabular-nums }

/* ---------- callout ---------- */

.callout{
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--radius); padding:clamp(20px,2.4vw,28px);
  background:rgba(216,189,136,.05);
}
.callout .h3{ margin-bottom:.5rem }
.callout p{ font-size:.9rem; color:var(--cream-soft); margin:0 }

/* ---------- chips / tags ---------- */

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none }
.chips li{
  border:1px solid var(--line); border-radius:100px;
  padding:.4rem .9rem; font-size:.8rem; color:var(--cream-soft);
  transition:border-color .18s ease, color .18s ease;
}
.chips li:hover{ border-color:var(--gold); color:var(--gold) }
.chips-lg li{ padding:.55rem 1.15rem; font-size:.86rem }

.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:100px; padding:.28rem .7rem;
}
.dot-live{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
  box-shadow:0 0 0 3px rgba(111,199,174,.18);
}

/* ---------- forms ---------- */

.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem }
.field{ display:flex; flex-direction:column; gap:.45rem }
.field-full{ grid-column:1/-1 }
.field label{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim);
}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:.95rem; color:var(--cream);
  background:rgba(245,241,232,.04);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem .95rem; width:100%;
  transition:border-color .16s ease, background .16s ease;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(245,241,232,.07);
}
.field select option{ background:var(--ink-1); color:var(--cream) }
.field .hint{ font-size:.76rem; color:var(--cream-faint) }
.form-status{ font-size:.86rem; margin-top:1rem; color:var(--jade) }

/* ---------- contact bits ---------- */

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem }
.contact-list li{ display:flex; gap:.9rem; align-items:flex-start }
.contact-list .card-ico{ margin:0; width:34px; height:34px; flex:0 0 34px }
.contact-list .card-ico svg{ width:16px; height:16px }
.contact-list .k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); font-weight:800 }
.contact-list .v{ font-size:.98rem; color:var(--cream) }
.contact-list a.v:hover{ color:var(--gold) }

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  background:var(--ink-1);
  padding:clamp(48px,5vw,72px) 0 34px;
  font-size:.88rem;
}
.footer-top{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
  padding-bottom:clamp(30px,4vw,48px);
  border-bottom:1px solid var(--line-soft);
}
.footer-brand .brand{ margin-bottom:1rem }
.footer-blurb{ color:var(--cream-dim); font-size:.88rem; max-width:34ch; margin-bottom:1.4rem }
.footer-col h4{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.footer-col a{ color:var(--cream-soft); font-size:.87rem }
.footer-col a:hover{ color:var(--gold) }
.footer-bottom{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-top:26px; color:var(--cream-faint); font-size:.8rem;
}
.footer-bottom a:hover{ color:var(--gold) }
.footer-legal{ display:flex; gap:1.2rem; flex-wrap:wrap }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem }
.footer-social a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--cream-soft);
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold) }
.footer-social svg{ width:15px; height:15px }
.footer-note{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);
  color:var(--cream-faint); font-size:.76rem; line-height:1.6; max-width:96ch;
}

/* ---------- utility ---------- */

.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.mb-1{margin-bottom:.6rem}.mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem}.mb-4{margin-bottom:3rem}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.divider{ height:1px; background:var(--line-soft); margin:clamp(40px,5vw,64px) 0 }

/* ---------- reveal on scroll ---------- */

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  .btn:hover,.card:hover{ transform:none }
}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .nav-desktop{ display:none }
  .nav-toggle{ display:inline-flex }
  .header-phone{ display:none }
  .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-brand{ grid-column:1/-1 }
}

@media (max-width:980px){
  .hero-grid,.split{ grid-template-columns:1fr }
  .hero-art-wrap{ max-width:min(440px,100%); margin:0 auto }
  .hero-copy{ max-width:none }
  .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .stat:nth-child(2n){ border-right:0 }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line-soft) }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pain-grid{ grid-template-columns:1fr }
  .quote-grid{ grid-template-columns:1fr }
  .step-chips{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .check-list-2col{ grid-template-columns:1fr }
}

@media (max-width:640px){
  .header-cta .btn{ display:none }
  .header-inner{ gap:1rem }
}

@media (max-width:700px){
  body{ font-size:16px }
  .wrap{ padding:0 20px }
  .grid-2,.grid-3,.grid-4,.grid-auto,.form-grid{ grid-template-columns:1fr }
  .stat-grid{ grid-template-columns:1fr }
  .stat{ border-right:0; border-bottom:1px solid var(--line-soft) }
  .stat:last-child{ border-bottom:0 }
  .step{ grid-template-columns:1fr; gap:.8rem }
  .step-num{ font-size:1.2rem }
  .step-chips{ grid-template-columns:1fr }
  .footer-top{ grid-template-columns:1fr }
  .btn-row{ gap:1rem }
  .btn-row .btn,.mobile-actions .btn,form .btn-row .btn{ width:100%; justify-content:center }
  .btn-row .link-arrow{ width:auto }
  .header-inner{ min-height:64px }
  .quote{ padding-left:20px }
}

@media print{
  body::before,.site-header,.mobile-nav,.cta-band{ display:none }
  body{ background:#fff; color:#000 }
}

/* ==========================================================================
   AI agents product line
   ========================================================================== */

.flow{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,2vw,22px); counter-reset:flow;
}
.flow-step{ position:relative; padding-top:2.5rem }
.flow-step::before{
  counter-increment:flow; content:counter(flow,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--serif); font-size:1.05rem; color:var(--gold); letter-spacing:.02em;
}
.flow-step::after{
  content:""; position:absolute; top:.6rem; left:3.4rem; right:-11px; height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent);
}
.flow-step:last-child::after{ display:none }
.flow-step h3{ font-size:1rem; font-weight:700; margin:0 0 .4rem; letter-spacing:-.01em }
.flow-step p{ font-size:.86rem; color:var(--cream-dim); margin:0 }

.cat-head{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  padding-bottom:1rem; margin-bottom:1.8rem; border-bottom:1px solid var(--line-soft);
}
.cat-head h3{ font-family:var(--serif); font-size:1.5rem; margin:0; color:var(--cream) }
.cat-head p{ margin:0; font-size:.88rem; color:var(--cream-dim); max-width:62ch }
.band-paper .cat-head{ border-bottom-color:var(--paper-line) }
.band-paper .cat-head h3{ color:var(--paper-ink) }
.band-paper .cat-head p{ color:var(--paper-soft) }

.agent-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.1rem }
.agent-top .service-num{ margin:0 }

.platform-row{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:1.2rem;
  padding:1.4rem 0; border-bottom:1px solid var(--line-soft);
}
.platform-row:first-child{ border-top:1px solid var(--line-soft) }
.platform-row .card-ico{ margin:0; width:34px; height:34px; flex:0 0 34px }
.platform-row .card-ico svg{ width:17px; height:17px }
.platform-row h3{ margin:0 0 .35rem; font-size:1.04rem; font-weight:700 }
.platform-row p{ margin:0; font-size:.9rem; color:var(--cream-soft); max-width:82ch }

.story{ display:flex; flex-direction:column; height:100% }
.story-steps{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; counter-reset:story }
.story-steps li{ position:relative; padding-left:2.2rem; font-size:.88rem; color:var(--cream-soft) }
.story-steps li::before{
  counter-increment:story; content:counter(story);
  position:absolute; left:0; top:.05rem;
  width:1.45rem; height:1.45rem; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-size:.7rem; font-weight:800; color:var(--gold);
}

.guard-list{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem }
.guard-list li{ position:relative; padding-left:2rem; font-size:.92rem; color:var(--cream-soft) }
.guard-list li::before{
  content:""; position:absolute; left:0; top:.35rem;
  width:15px; height:15px; border:1px solid var(--gold); border-radius:3px;
  background:linear-gradient(135deg,rgba(216,189,136,.22),transparent);
}
.guard-list li::after{
  content:""; position:absolute; left:4.5px; top:.62rem;
  width:6px; height:3px; border-left:1.4px solid var(--gold); border-bottom:1.4px solid var(--gold);
  transform:rotate(-45deg);
}
.band-paper .guard-list li{ color:var(--paper-soft) }

.status-warn{ color:#e8b96a; font-weight:700 }
.band-paper .status-warn{ color:#8a6a24 }

@media (min-width:1081px){
  .footer-top{ grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)) }
}

@media (max-width:980px){
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .flow-step::after{ display:none }
}

@media (max-width:700px){
  .flow{ grid-template-columns:1fr }
  .cat-head{ flex-direction:column; gap:.4rem }
  .platform-row{ grid-template-columns:1fr }
}

.service-list a{ color:inherit }
.service-list a:hover{ color:var(--gold) }
.band-paper .service-list a:hover{ color:#8a6a24 }

/* agent cards carry a gold hairline so the two catalogues read apart */
.agent-card{ overflow:hidden }
.agent-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(216,189,136,0));
  opacity:.55;
}
.band-paper .agent-card::before{ background:linear-gradient(90deg,#a07b28,rgba(160,123,40,0)) }

/* footer contact block sits tighter than the card version */
.footer-brand .contact-list{ gap:.45rem }
.footer-brand .contact-list li{ font-size:.85rem; color:var(--cream-soft) }
.footer-brand .contact-list a:hover{ color:var(--gold) }

/* amber status dot for anything not yet live */
.dot-soon{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px rgba(216,189,136,.18);
}