/* ==========================================================================
   WCID — West Coast Identity Services
   Design system extracted from the "Alder" handoff. Every value below is the
   single source of truth: a rebrand is a change to :root and nothing else.
   ========================================================================== */

:root{
  /* Ink */
  --ink:#2A2229;
  --ink-2:#584A52;
  --ink-3:#82727B;

  /* Grounds */
  --shell:#FDFAF7;
  --blush:#F8EFEA;
  --blush-2:#FCF5F2;
  --stone:#E7DED6;
  --sage:#EDE6E1;   /* legacy token — a warm neutral, NOT green */
  --card:#FFFFFF;

  /* Lines */
  --line:#EDE2DC;
  --line-2:#DCCBC3;

  /* Brand */
  --plum:#6E3350;
  --plum-2:#54233C;
  --plum-soft:#F3E7EE;
  --rose:#B4695C;
  --gold:#8A7040;
  --gold-soft:#F7EFE0;

  /* On dark plum panels */
  --on-plum:#F7EEF2;
  --on-plum-2:#E2CDD8;
  --on-plum-lbl:#D9AEC3;
  --on-plum-sub:#DCC3D0;

  /* Type */
  --f-head:'Faustina',Georgia,'Times New Roman',serif;
  --f:'Karla',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* Effects */
  --shadow:0 1px 2px rgba(42,34,41,.04),0 8px 24px -12px rgba(42,34,41,.10);
  --shadow-hover:0 16px 34px -20px rgba(42,34,41,.34);

  /* Metrics */
  --wrap:1100px;
  --col:800px;
  --gutter:24px;
}

/* ---------- Reset / base ---------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--f);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-head);
  font-weight:500;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
p{margin:0}
ul,ol,dl{margin:0}
a{color:var(--plum);text-underline-offset:3px}
a:hover{color:var(--rose)}
img{max-width:100%;display:block}
input,textarea{font-family:inherit;font-size:15px}
button{font-family:inherit}
summary::-webkit-details-marker{display:none}
summary{list-style:none;cursor:pointer}

/* Visible focus — the prototype styled none; add one on every ground. */
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:4px}
.panel-plum :focus-visible,
.card-book :focus-visible{outline-color:#fff}

/* Uppercase micro-label — shared component. */
.lbl{
  font-family:var(--f);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
}
.lbl-sm{font-size:11px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Layout: bands + containers
   Every section is a full-bleed colored band; content is constrained inside.
   ========================================================================== */
.section{padding:clamp(44px,6vw,76px) var(--gutter)}
.section-home{padding:clamp(52px,7vw,88px) var(--gutter)}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto}
.wrap-col{max-width:var(--col);margin:0 auto}

/* Grounds */
.band-shell{background:var(--shell)}
.band-blush{background:var(--blush)}
.band-blush2{background:var(--blush-2)}
.band-stone{background:var(--stone)}
.band-plumsoft{background:var(--plum-soft)}
.band-goldsoft{background:var(--gold-soft)}

/* Seams */
.hair-t{border-top:1px solid var(--line)}
.hair-b{border-bottom:1px solid var(--line)}
.hair2-t{border-top:1px solid var(--line-2)}
.hair2-b{border-bottom:1px solid var(--line-2)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(253,250,247,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{flex:none}
.brand-text{display:flex;flex-direction:column;gap:1px}
.brand-name{font-family:var(--f-head);font-weight:600;font-size:19px;letter-spacing:0.03em}
.brand-sub{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}

.nav{margin-left:auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:15px}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--rose)}
.nav a[aria-current="page"]{color:var(--plum);font-weight:600}

/* Header booking CTA — bump contrast so it reads clearly against the light bar */
.nav .btn-primary{
  color:#fff;font-weight:700;
  box-shadow:0 2px 10px -2px rgba(110,51,80,.45);
}
.nav .btn-primary:hover{color:#fff}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:600;line-height:1.2;
  padding:13px 24px;border-radius:999px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn-lg{font-size:16px;padding:16px 30px}
.btn-md{font-size:16px;padding:15px 28px}

.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum-2);color:#fff}
.btn-primary.shadow{box-shadow:var(--shadow)}

.btn-outline{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--plum);color:var(--ink)}

/* Outline that sits directly on a colored band (no card fill) */
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--plum);color:var(--ink)}

/* On dark plum panels */
.btn-white{background:#fff;color:var(--plum-2)}
.btn-white:hover{background:var(--on-plum-2);color:var(--plum-2)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost:hover{background:var(--plum-2);color:#fff;border-color:rgba(255,255,255,.55)}

.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-row-sm{gap:11px}
.btn-row-center{justify-content:center}

/* ==========================================================================
   Eyebrow (ruled micro-heading)
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--rose)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.eyebrow .lbl{color:inherit}
.eyebrow-gold{color:var(--gold)}

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */
.hero{
  background:var(--blush-2);
  padding:clamp(44px,7vw,84px) var(--gutter) clamp(36px,4vw,52px);
  text-align:center;
}
.hero-inner{
  max-width:880px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.hero-eyebrow{color:var(--plum);letter-spacing:0.18em;font-size:11.5px}
.hero h1{font-size:clamp(38px,6.4vw,66px);line-height:1.05}
.hero-lead{font-size:19px;color:var(--ink-2);max-width:50ch}
.hero-fine{font-size:14.5px;color:var(--ink-3)}

/* ==========================================================================
   Panels (large rounded blocks)
   ========================================================================== */
.panel{border-radius:32px}
.panel-plum{
  position:relative;overflow:hidden;
  background:var(--plum);color:var(--on-plum);
  border-radius:32px;padding:clamp(32px,5vw,60px);
}
.panel-plum h2{color:#fff}
.panel-plum p{color:var(--on-plum-2)}
.seal{position:absolute;right:-64px;top:-64px;opacity:.12;pointer-events:none}

/* Centered CTA panel */
.cta-panel{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:clamp(32px,5vw,56px);
}
.cta-panel h2{font-size:clamp(27px,4.2vw,42px);line-height:1.1;max-width:24ch}
.cta-panel p{max-width:44ch}

/* ==========================================================================
   Credibility panel (home) + About hero
   ========================================================================== */
.split-panel{
  background:var(--blush);border-radius:32px;overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch;
}
.split-copy{
  padding:clamp(28px,4vw,48px);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.split-copy h2{font-size:clamp(23px,2.8vw,30px);line-height:1.2}
.text-link{
  align-self:flex-start;font-size:15.5px;font-weight:600;color:var(--plum);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .18s ease;
}
.text-link:hover{border-color:var(--plum);color:var(--plum)}

/* Photo / map placeholder (diagonal hatch) */
.slot{
  background:repeating-linear-gradient(135deg,
    var(--blush-2),var(--blush-2) 14px,var(--blush) 14px,var(--blush) 28px);
  display:grid;place-items:center;padding:24px;
}
.slot-4x3{aspect-ratio:4/3;min-height:280px}
/* Photo that fills a split-panel column, clipped to the panel's rounded corners */
.split-photo{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
.slot-4x3-tall{aspect-ratio:4/3;min-height:300px}
.slot-map{aspect-ratio:16/11;border-radius:24px;border:1px solid var(--line)}

/* Embedded coverage map */
.map-embed{
  aspect-ratio:16/11;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.slot p{font-size:13.5px;color:var(--ink-3);text-align:center;max-width:26ch;line-height:1.5}

/* ==========================================================================
   Stat rule (home)
   ========================================================================== */
.stats{
  display:flex;flex-wrap:wrap;gap:14px 40px;
  justify-content:space-between;align-items:baseline;
}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-value{font-family:var(--f-head);font-size:26px}
.stat-label{font-size:14px;color:var(--ink-3)}

/* ==========================================================================
   Section head (ruled + border under)
   ========================================================================== */
.head-copy{display:flex;flex-direction:column;gap:13px;margin-bottom:34px;max-width:var(--col)}
.head-copy h2{font-size:clamp(28px,4vw,40px);line-height:1.12}
.head-copy p{color:var(--ink-2);max-width:56ch}

.services-head{
  display:flex;flex-wrap:wrap;gap:20px 48px;
  align-items:flex-end;justify-content:space-between;
  margin-bottom:36px;padding-bottom:22px;border-bottom:2px solid var(--plum);
}
.services-head-l{display:flex;flex-direction:column;gap:10px}
.services-head-l h2{font-size:clamp(28px,4vw,40px);line-height:1.08;max-width:26ch}
.services-head p{color:var(--ink-2);max-width:38ch;font-size:15.5px}

/* ==========================================================================
   Primary service card (home)
   ========================================================================== */
.service-card{
  border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow);overflow:hidden;
}
.service-bar{
  background:var(--plum);
  padding:20px clamp(26px,3.5vw,40px);
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
}
.service-bar h3{font-size:clamp(21px,2.6vw,27px);line-height:1.15;color:#fff}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);color:#fff;
  padding:7px 14px;border-radius:999px;font-size:11.5px;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#F0C9D8;flex:none}

.service-body{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  background:var(--card);
}
.service-copy{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;gap:18px}
.service-copy p{color:var(--ink-2)}
.service-docs{
  background:var(--blush-2);padding:clamp(26px,3.5vw,40px);
  display:flex;flex-direction:column;gap:24px;
}
.docs-head{font-size:17px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}

/* ✦ feature list */
.feat{list-style:none;padding:0;display:grid;gap:11px;font-size:15.5px;color:var(--ink-2)}
.feat li{display:flex;gap:11px}
.feat li::before{content:"✦";color:var(--rose);flex:none}
.feat-tight{gap:9px;font-size:15px}

/* Two-column doc list with hairline rows */
.doc-list{list-style:none;padding:0;columns:2;column-gap:24px;font-size:15px;color:var(--ink-2)}
.doc-list li{padding:7px 0;border-bottom:1px solid var(--line);break-inside:avoid}

/* ==========================================================================
   Coming-soon cards (home)
   ========================================================================== */
.soon-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:20px;
}
.soon-card{
  border-radius:24px;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:15px;
}
.soon-card h3{font-size:24px;line-height:1.18}
.soon-card p{font-size:15.5px;color:var(--ink-2)}
.soon-gold{background:var(--gold-soft)}
.soon-plum{background:var(--sage)}
.soon-pill{
  align-self:flex-start;background:var(--card);
  padding:7px 14px;border-radius:999px;font-size:11.5px;
}
.soon-pill-gold{color:var(--gold)}
.soon-pill-plum{color:var(--plum)}
.soon-foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);
  font-family:var(--f-head);font-size:19px;
}
.soon-foot-gold{color:var(--gold)}
.soon-foot-plum{color:var(--plum);border-top-color:rgba(110,51,80,.2)}
.soon-foot a{font-size:16px;font-weight:600}

/* ==========================================================================
   Appointment grid (home + notary)
   ========================================================================== */
.appt-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
/* Keep the five steps on a single row on desktop */
@media (min-width:920px){
  .appt-grid:not(.appt-grid-wide){grid-template-columns:repeat(5,1fr)}
}
.appt-grid-wide{gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.appt-card{
  background:var(--card);border-top:4px solid var(--rose);
  border-radius:20px;padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:8px;
}
.appt-grid-wide .appt-card{padding:26px;gap:9px}
.appt-ord{font-family:var(--f-head);font-size:14px;color:var(--rose)}
.appt-grid-wide .appt-ord{font-size:15px}
.appt-card h3{font-size:17px;line-height:1.25}
.appt-grid-wide .appt-card h3{font-size:19px}
.appt-card p{font-size:14.5px;color:var(--ink-2)}
.appt-grid-wide .appt-card p{font-size:15px}

/* "Please bring" exception card */
.appt-bring{
  background:var(--plum-soft);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;gap:9px;
}
.appt-bring .lbl{color:var(--plum)}
.appt-bring h3{font-size:19px;color:var(--plum-2)}
.appt-bring p{font-size:15px;color:var(--ink-2)}

/* Home "Please bring" wide banner variant */
.bring-banner{
  margin-top:14px;background:var(--plum-soft);border-radius:20px;
  padding:clamp(20px,2.6vw,26px) clamp(22px,3vw,30px);
  display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;
}
.bring-banner-l{display:flex;flex-direction:column;gap:5px;max-width:40ch}
.bring-banner-l .lbl{color:var(--plum)}
.bring-banner-l h3{font-size:19px;color:var(--plum-2);line-height:1.25}
.bring-banner p{font-size:15px;color:var(--ink-2);max-width:48ch}

/* Hover-lift (respects reduced motion) */
.lift{transition:transform .18s ease,box-shadow .18s ease}
.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
@media (prefers-reduced-motion:reduce){
  .lift{transition:box-shadow .18s ease}
  .lift:hover{transform:none}
}

/* ==========================================================================
   Booking steps (home + notary)
   ========================================================================== */
.booking-grid{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.booking-l{align-self:start;display:flex;flex-direction:column;gap:16px}
.booking-l h2{font-size:clamp(27px,3.6vw,38px);line-height:1.14;max-width:20ch}
.booking-l p{color:var(--ink-2);max-width:40ch}
.steps{list-style:none;padding:0;display:grid;gap:0}
.steps li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.step-num{font-family:var(--f-head);font-size:15px;color:var(--rose);padding-top:4px;flex:none}
.steps h3{font-size:19px}
.steps p{margin-top:5px;font-size:15px;color:var(--ink-2)}

/* ==========================================================================
   Divider
   ========================================================================== */
.divider{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:16px;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider span{font-family:var(--f-head);font-size:15px;color:var(--rose)}

/* ==========================================================================
   Coverage panel (home)
   ========================================================================== */
.coverage-panel{
  background:var(--blush);border-radius:32px;padding:clamp(30px,4.5vw,56px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.coverage-panel h2{font-size:clamp(27px,3.8vw,38px);line-height:1.14;max-width:24ch}
.coverage-panel p{color:var(--ink-2);max-width:52ch}
.coverage-copy{display:flex;flex-direction:column;align-items:center;gap:14px}
.town-list{font-size:14.5px;color:var(--ink-3);max-width:58ch}

/* County pills */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.pill-row-left{justify-content:flex-start;gap:9px}
.pill{
  font-size:15px;background:var(--card);color:var(--plum);
  border-radius:999px;padding:9px 18px;font-weight:600;
}
.pill-soft{background:var(--plum-soft)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-head{display:flex;flex-direction:column;gap:12px}
.faq-head h2{font-size:clamp(27px,3.8vw,38px);line-height:1.14}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:20px 24px;
}
.faq summary{
  display:flex;justify-content:space-between;gap:18px;
  font-family:var(--f-head);font-size:19px;
}
.faq summary .mark{color:var(--rose);transition:transform .18s ease}
.faq[open] summary .mark{transform:rotate(45deg)}
.faq summary .mark::after{content:"+"}
.faq p{margin-top:12px;font-size:15.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.faq summary .mark{transition:none}}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);padding:clamp(24px,3.5vw,34px);
}
.form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.field{display:flex;flex-direction:column;gap:6px}
.field .lbl{color:var(--ink-3)}
.field-full{grid-column:1/-1}
.form input,.form textarea{
  padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--shell);color:var(--ink);width:100%;
}
.form textarea{resize:vertical;line-height:1.55}
.form input:focus,.form textarea:focus{border-color:var(--plum);outline-offset:0}
.field.has-error input,.field.has-error textarea{border-color:var(--rose)}
.field-msg{font-size:13.5px;color:var(--rose);display:none}
.field.has-error .field-msg{display:block}
.form-hint{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);margin-top:-2px}
.consent{
  display:flex;gap:11px;align-items:flex-start;grid-column:1/-1;
  font-size:13.5px;color:var(--ink-2);
}
.consent input{margin-top:3px;width:17px;height:17px;flex:none}
.form-submit{
  grid-column:1/-1;border:0;background:var(--plum);color:#fff;
  font-size:16px;font-weight:600;padding:15px;border-radius:999px;cursor:pointer;
  transition:background-color .18s ease;
}
.form-submit:hover{background:var(--plum-2)}
.form-submit:disabled{opacity:.6;cursor:progress}
/* Honeypot — hidden from real users */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{display:none;flex-direction:column;gap:12px;padding:10px 0}
.form-status.is-visible{display:flex}
.form-status h3{font-size:24px}
.form-status p{font-size:15.5px;color:var(--ink-2)}
.form-error{
  grid-column:1/-1;font-size:14px;color:var(--rose);display:none;
}
.form-error.is-visible{display:block}

/* "Get notified" signup (coming-soon pages) */
.notify-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);padding:clamp(24px,3.5vw,34px);
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;
}
.notify-copy p{color:var(--ink-2)}
.notify-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.notify-form .field{flex:1 1 220px;margin:0}
.notify-form .form-submit{flex:none;width:auto}
.notify-form .form-error{flex-basis:100%}

/* Row lists (fees, cost, hours, contact details) */
.rows{margin:0}
.rows > div{
  display:flex;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.rows > div:last-child{border-bottom:0}
.rows dt{font-size:15px;color:var(--ink-3)}
.rows dd{margin:0;font-size:15px}
.rows dd.num{font-family:var(--f-head);font-size:20px}
.rows dd.right{text-align:right}
.rows a{color:var(--ink);text-decoration:none}
.rows a:hover{color:var(--rose)}
/* Standalone bordered variant */
.rows-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:8px 22px;
}

.contact-l{display:flex;flex-direction:column;gap:18px;align-self:start}
.contact-l h2{font-size:clamp(27px,3.8vw,38px);line-height:1.14;max-width:22ch}
.contact-l p{color:var(--ink-2);max-width:42ch}
.contact-grid{
  display:grid;gap:clamp(26px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* ==========================================================================
   Subpage hero + breadcrumb
   ========================================================================== */
.breadcrumb{display:flex;gap:8px;font-size:14px;color:var(--ink-3)}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--rose)}

.subhero-inner{display:flex;flex-direction:column;gap:20px}
.subhero-grid{
  display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;
}
.subhero-copy{display:flex;flex-direction:column;gap:20px}
.subhero-copy h1{font-size:clamp(34px,5.2vw,54px);line-height:1.07}
.subhero-lead{font-size:18.5px;color:var(--ink-2);max-width:46ch}

/* Status pills on subpage heroes */
.pill-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;font-size:11.5px;
}
.pill-booking{background:var(--sage);color:var(--plum)}
.pill-booking .status-dot{background:var(--rose)}
.pill-soon-card{background:var(--card)}
.pill-soon-gold{color:var(--gold)}
.pill-soon-plum{color:var(--plum)}

.soon-date{font-family:var(--f-head);font-size:21px}
.soon-date-gold{color:var(--gold)}
.soon-date-plum{color:var(--plum)}

/* Coming-soon hero panels */
.hero-panel{
  border-radius:32px;padding:clamp(28px,4.5vw,56px);
  display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;
}
.hero-panel-gold{background:var(--gold-soft)}
.hero-panel-plum{background:var(--plum-soft)}

/* Fee / cost card */
.fee-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);padding:clamp(24px,3vw,32px);
}
.fee-card-plain{border:0}
.fee-head{color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.fee-note{margin-top:14px;font-size:13.5px;color:var(--ink-3)}

/* ==========================================================================
   Notary document-group cards
   ========================================================================== */
.doc-cards{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.doc-card{
  border-radius:24px;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.doc-card h2{font-size:23px}
.doc-card p{font-size:15.5px;color:var(--ink-2)}
.doc-card-blush{background:var(--blush)}
.doc-card-gold{background:var(--gold-soft)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:14px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;
}

/* ==========================================================================
   Live Scan / info cards (top-ruled, varied color)
   ========================================================================== */
.info-cards{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.info-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:clamp(24px,3vw,32px);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:13px;
}
.info-card h2{font-size:22px}
.rule-gold{border-top:4px solid var(--gold)}
.rule-rose{border-top:4px solid var(--rose)}
.rule-plum{border-top:4px solid var(--plum)}
.info-note{font-size:14.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:13px}

/* ==========================================================================
   Passport spec cards
   ========================================================================== */
.spec-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.spec-card{
  background:var(--card);border:1px solid var(--line);
  border-top:4px solid var(--rose);border-radius:20px;padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.spec-card .lbl{color:var(--ink-3)}
.spec-card h3{font-size:19px}
.spec-card p{font-size:15px;color:var(--ink-2)}
.spec-card-plum{
  background:var(--plum-soft);border:0;border-radius:20px;padding:24px;
  display:flex;flex-direction:column;gap:8px;
}
.spec-card-plum .lbl{color:var(--plum)}
.spec-card-plum h3{font-size:19px;color:var(--plum-2)}
.spec-card-plum p{font-size:15px;color:var(--ink-2)}

/* ==========================================================================
   About page
   ========================================================================== */
.prose{
  max-width:var(--col);margin:0 auto;
  display:flex;flex-direction:column;gap:20px;
  border-left:3px solid var(--rose);padding-left:clamp(20px,3vw,36px);
}
.prose h2{
  font-size:clamp(25px,3.4vw,34px);line-height:1.15;
  border-bottom:1px solid var(--line-2);padding-bottom:18px;
}
.prose-lead{font-size:20px;color:var(--ink);font-family:var(--f-head);line-height:1.5}
.prose p{font-size:17.5px;color:var(--ink-2)}

.about-hero-copy{
  padding:clamp(28px,4vw,52px);
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.about-hero-copy h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08}
.about-hero-copy p{font-size:17.5px;color:var(--ink-2)}
.pill-about{
  align-self:flex-start;background:var(--card);color:var(--plum);
  padding:7px 14px;border-radius:999px;font-size:11.5px;
}

/* Credentials panel */
.cred-l{display:flex;flex-direction:column;gap:16px}
.cred-l .lbl{color:var(--on-plum-lbl)}
.cred-l h2{font-size:clamp(26px,3.4vw,36px);line-height:1.14}
.cred-l p{max-width:44ch}
.cred-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-content:start;
}
.cred-tile{background:rgba(255,255,255,.1);border-radius:18px;padding:20px}
.cred-tile dt{color:var(--on-plum-lbl)}
.cred-tile dd{margin:8px 0 0;font-family:var(--f-head);font-size:21px;color:#fff}
.cred-tile dd.sub{margin:4px 0 0;font-family:var(--f);font-size:13.5px;color:var(--on-plum-sub)}

.panel-grid{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* Legal-limit block */
.legal{
  max-width:var(--col);margin:0 auto;
  background:var(--blush);border-left:5px solid var(--rose);
  border-radius:0 24px 24px 0;padding:clamp(26px,3.5vw,40px);
  display:flex;flex-direction:column;gap:14px;
}
.legal h2{font-size:clamp(23px,3vw,30px);line-height:1.16}
.legal p{font-size:16.5px;color:var(--ink-2)}

/* About coverage split */
.about-cov{
  display:grid;gap:clamp(26px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.about-cov-l{display:flex;flex-direction:column;gap:14px}
.about-cov-l h2{font-size:clamp(25px,3.4vw,34px);line-height:1.15;max-width:22ch}
.about-cov-l p{color:var(--ink-2);max-width:44ch}

/* ==========================================================================
   Contact route cards
   ========================================================================== */
.route-cards{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.route-card{
  border-radius:24px;padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;gap:9px;text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}
.route-card h2{font-size:22px}
.route-card p{font-size:15px}
.route-card .cta-line{margin-top:6px;font-weight:600}
.card-book{background:var(--plum)}
.card-book:hover{background:var(--plum-2)}
.card-book .lbl{color:var(--on-plum-lbl)}
.card-book h2{color:#fff}
.card-book p{color:var(--on-plum-2)}
.card-book .cta-line{font-size:15px;color:#fff}
.card-plain{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.card-plain:hover{border-color:var(--plum)}
.card-plain .lbl{color:var(--ink-3)}
.card-plain h2{color:var(--ink)}
.card-plain p{color:var(--ink-2)}
.card-plain .cta-line{color:var(--plum)}
.cta-line-lg{font-size:17px}
.wrap-anywhere{overflow-wrap:anywhere}

.about-l{display:flex;flex-direction:column;gap:18px}

/* Contact hero (single column) */
.contact-hero-copy{max-width:46ch;display:flex;flex-direction:column;gap:14px}
.contact-hero-copy h1{font-size:clamp(32px,5vw,50px);line-height:1.07}
.contact-hero-copy p{font-size:18px;color:var(--ink-2)}

/* Social links — icon buttons */
.social-row{display:flex;gap:10px;flex-wrap:wrap}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--plum);
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.social-icon svg{width:18px;height:18px;fill:currentColor;display:block}
.social-icon:hover{background:var(--plum);border-color:var(--plum);color:#fff}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--blush-2);border-top:1px solid var(--line)}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;padding:48px var(--gutter) 22px;
  display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-lock{display:flex;align-items:center;gap:12px}
.footer-lock .brand-name{font-size:20px}
.footer-lock-sub{font-size:14px;color:var(--ink-3)}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col .lbl{color:var(--ink-3)}
.footer-rows{display:grid;gap:7px;font-size:15px}
.footer-rows > div{display:flex;justify-content:space-between;gap:12px}
.footer-rows span.muted{color:var(--ink-3)}
.footer-rows a{color:var(--ink);text-decoration:none}
.footer-rows a:hover{color:var(--rose)}
.footer-bottom{
  max-width:var(--wrap);margin:0 auto;padding:18px var(--gutter) 42px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:13.5px;color:var(--ink-3);
}
.footer-bottom a{color:var(--ink-3);text-decoration:none}
.footer-bottom a:hover{color:var(--rose)}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px}

/* ==========================================================================
   Section-padding helpers (replace the prototype's per-section inline padding)
   ========================================================================== */
.sec-credibility{padding:clamp(36px,4.5vw,56px) var(--gutter) 0}
.sec-stats{padding:clamp(30px,4vw,48px) var(--gutter) clamp(30px,4vw,44px)}
.sec-subhero{padding:clamp(36px,5vw,60px) var(--gutter) clamp(36px,4.5vw,56px)}
.sec-subhero-about{padding:clamp(36px,5vw,60px) var(--gutter) clamp(28px,3.5vw,44px)}
.sec-subhero-contact{padding:clamp(36px,5vw,60px) var(--gutter) clamp(40px,4.5vw,56px)}
.sec-routes{padding:clamp(40px,5vw,64px) var(--gutter)}
.pb-cta{padding-bottom:clamp(52px,7vw,88px)}
.pb-72{padding-bottom:clamp(44px,6vw,72px)}
.mt-4{margin-top:4px}

/* Small helpers */
.self-start{align-self:start}
.mb-30{margin-bottom:30px}
.mb-26{margin-bottom:26px}
.h2-36{font-size:clamp(26px,3.6vw,36px)}

/* FAQ column wrapper */
.faq-wrap{max-width:var(--col);margin:0 auto;display:flex;flex-direction:column;gap:22px}

/* Cross-sell CTA variant (Live Scan / Passports) */
.cta-cross h2{font-size:clamp(26px,3.8vw,38px);max-width:26ch}
.cta-cross p{max-width:46ch}

/* About coverage — vertically centered variant (Contact) */
.about-cov-center{align-items:center}