/* =====================================================================
   Majorblessing Lawn care and maintenance — Workbench Ledger
   Phase B design system / component kit.
   Reference: Halo Dental (047) — adapted to a warm paper-ground ledger.
   Class vocabulary is COMPLETE for every page type in the site-plan;
   per-route build agents reuse exactly these names and never invent one.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root{
  /* ground — the paper */
  --cream:        #FBF8F2;   /* dominant page ground — fresh paper */
  --paper:        #FFFFFF;   /* inset panel / card surface */
  --paper-warm:   #F4EFE3;   /* secondary warm panel (job board, polaroid mat) */
  /* ink — the pen */
  --ink:          #1C2424;   /* body type + hairline rules + stamp text */
  --ink-soft:     #3A4544;   /* secondary body / muted prose */
  --ink-faint:    #6B7470;   /* captions, meta, footer secondary */
  /* the one accent — reserved */
  --gold:         #D6AA63;   /* ink-draw underline + ONE stamped ring only */
  --gold-soft:    #C99A52;   /* hover of the gold underline only */
  /* hairline borders (paper-on-paper depth, never shadows) */
  --rule:         rgba(28,36,36,0.14);
  --rule-strong:  rgba(28,36,36,0.28);
  --veil:         rgba(28,36,36,0.55);
  /* type families */
  --ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-hand:    'Caveat', 'Segoe Print', cursive;
  /* rhythm */
  --shell:      1200px;
  --shell-narrow: 720px;
  --shell-spread: 1100px;
  --gutter:     32px;
  --gutter-mob: 20px;
  --nav-h:      72px;
  --nav-h-mob:  64px;
  --ease:       cubic-bezier(0.16,1,0.3,1);
}

/* ------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  font-size:1.0625rem;          /* 17px */
  line-height:1.7;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain — fixed, behind content, 3% effective opacity */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(28,36,36,0.025) 1px, transparent 1px);
  background-size:4px 4px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ------------------------------------------------------------------
   Layout shells — every content block carries the gutter (incl. headings)
   ------------------------------------------------------------------ */
.container{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-narrow{
  max-width:var(--shell-narrow);
  margin:0 auto;
  padding:0 var(--gutter);
}
.container-spread{
  max-width:var(--shell-spread);
  margin:0 auto;
  padding:0 var(--gutter);
}
@media (max-width:639px){
  .container,.container-narrow,.container-spread{ padding:0 var(--gutter-mob); }
}

/* ------------------------------------------------------------------
   Sections — every band/section modifier carries its OWN padding
   ------------------------------------------------------------------ */
.sec,
.sec--warm,
.sec--paper,
.sec--ink{
  padding:96px 0;
  position:relative;
  z-index:1;
}
.sec--warm{ background:var(--paper-warm); }
.sec--paper{ background:var(--paper); }
.sec--ink{
  background:var(--ink);
  color:var(--cream);
}
@media (max-width:639px){
  .sec,.sec--warm,.sec--paper,.sec--ink{ padding:64px 0; }
}

/* editorial pacing rule between sections */
.rule-mark{
  max-width:120px;
  margin:0 auto;
  border:0;
  border-top:1px solid var(--rule);
}

/* ------------------------------------------------------------------
   Type utilities
   ------------------------------------------------------------------ */
.display{                       /* hero H1 only */
  font-family:var(--ff-display);
  font-weight:600;
  font-size:clamp(3.5rem,8.5vw,7.5rem);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin:0;
  color:var(--ink);
}
.h2{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(2.4rem,4.6vw,3.8rem);
  line-height:1.04;
  letter-spacing:-0.025em;
  margin:0;
  color:var(--ink);
}
.h3{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:clamp(1.5rem,2.2vw,1.85rem);
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.lede{
  font-family:var(--ff-body);
  font-weight:400;
  font-size:1.25rem;            /* 20px */
  line-height:1.6;
  letter-spacing:-0.005em;
  color:var(--ink-soft);
  margin:0;
}
.body{
  font-family:var(--ff-body);
  font-weight:400;
  font-size:1.0625rem;          /* 17px */
  line-height:1.7;
  color:var(--ink);
  margin:0;
}
.label{                         /* structural metadata (nav/footer/NAP) */
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.75rem;            /* 12px */
  line-height:1.4;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.hand{                          /* handwriting utility */
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:clamp(1.35rem,2vw,1.6rem);
  line-height:1.35;
  color:var(--ink-soft);
  margin:0;
}
.sec--ink .h2,.sec--ink .h3,.sec--ink .display{ color:var(--cream); }
.sec--ink .lede,.sec--ink .body{ color:rgba(251,248,242,0.82); }
.sec--ink .label{ color:rgba(251,248,242,0.62); }

/* ------------------------------------------------------------------
   Header / nav — fixed top bar, far-left logo, horizontal links, top-right Call now
   ------------------------------------------------------------------ */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--nav-h);
  background:var(--cream);
  border-bottom:1px solid var(--rule);
}
.header.is-scrolled{
  background:rgba(251,248,242,0.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(28,36,36,0.04);
}
.header__inner{
  max-width:var(--shell);
  height:100%;
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
@media (max-width:639px){
  .header{ height:var(--nav-h-mob); }
  .header__inner{ padding:0 var(--gutter-mob); }
}
/* logo — text wordmark (logo candidates are monochrome black-on-cream SVGs;
   fix ONE dimension (height), let width be auto — never both, never stretch) */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.logo img{
  height:34px;
  width:auto;
  object-fit:contain;
}
.logo__text{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.35rem;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--ink);
}
/* nav links — horizontal, in-page #anchors (single-route build) */
.nav{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav__link{
  font-family:var(--ff-body);
  font-weight:500;
  font-size:0.875rem;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  position:relative;
  padding:4px 0;
  transition:color 200ms var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link.is-active{ color:var(--ink); }
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--gold);
}
/* persistent top-right Call now CTA — text link, NOT a pill row */
.nav__cta{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:0.04em;
  color:var(--ink);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav__cta:hover{ color:var(--gold-soft); }
@media (max-width:639px){
  .nav__cta{ font-size:0.8125rem; }   /* "Call 7622181894" must clear the gutter beside the logo mark */
  .logo__text{ display:none; }         /* the wordmark is too wide beside the CTA on a 375px viewport */
}
@media (max-width:860px){
  .nav{ display:none; }       /* mobile: nav collapses; logo + Call now remain */
}

/* ------------------------------------------------------------------
   Inline text link — gold underline on hover (CTA-primary pattern)
   ------------------------------------------------------------------ */
.link--ink{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--ink);
  display:inline-block;
  position:relative;
  padding-bottom:3px;
}
.link--ink::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 320ms var(--ease);
}
.link--ink:hover::after{ transform:scaleX(1); }
.link--ink:hover{ color:var(--ink); }
.sec--ink .link--ink{ color:var(--cream); }

/* ------------------------------------------------------------------
   Hero — typographic title page (NO photo veil, NO pill-CTA row)
   ------------------------------------------------------------------ */
.hero{
  position:relative;
  z-index:1;
  min-height:clamp(560px,82vh,760px);
  display:flex;
  align-items:center;
  background:var(--cream);
  padding:calc(var(--nav-h) + 32px) 0 28px;
}
@media (max-width:639px){
  .hero{ padding:calc(var(--nav-h-mob) + 24px) 0 48px; min-height:auto; }
}
.hero__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
  position:relative;
}
@media (max-width:639px){
  .hero__inner{ padding:0 var(--gutter-mob); }
}
/* hero children cap EXCEPT the h1 (wider cap so a display heading doesn't wrap 6 lines) */
.hero__inner > *{ max-width:620px; }
.hero__inner > .hero__title,
.hero__inner > h1{ max-width:880px; }
.hero__title{
  margin-bottom:24px;
}
.hero__lede{
  margin-bottom:28px;
}
.hero__cta{ margin-top:28px; margin-bottom:0; }
.hero__note{ margin:0; }
/* the single handwritten margin note — right margin on desktop, flows below on mobile */
.hero__note{
  position:absolute;
  right:var(--gutter);
  top:38%;
  max-width:200px;
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:clamp(1.35rem,2vw,1.6rem);
  line-height:1.35;
  color:var(--ink-soft);
  transform:rotate(-1.5deg);
}
.hero__note::after{
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  margin-top:6px;
}
.hero__note.is-drawn::after{
  animation:ink-draw 1200ms var(--ease) forwards;
}
@media (max-width:860px){
  .hero__note{
    position:static;
    max-width:100%;
    margin-top:24px;
    transform:rotate(-1deg);
  }
}

/* interior page hero — downscaled display font (never full homepage size) */
.hero--page{
  min-height:clamp(420px,52vh,540px);
  padding:calc(var(--nav-h) + 48px) 0 48px;
}
.hero--page .display{
  font-size:clamp(1.8rem,3vw,2.6rem);
}
@media (max-width:639px){
  .hero--page{ min-height:auto; padding:calc(var(--nav-h-mob) + 32px) 0 32px; }
}
/* confirmation hero — centered single column */
.hero--confirm{
  min-height:clamp(420px,60vh,560px);
  text-align:center;
}
.hero--confirm .hero__inner{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.hero--confirm .hero__inner > *{ max-width:100%; margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------------
   Margin note — handwriting + gold ink-draw underline (the signature)
   ------------------------------------------------------------------ */
.margin-note{
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:clamp(1.35rem,2vw,1.6rem);
  line-height:1.35;
  color:var(--ink-soft);
  position:relative;
}
.margin-note::after{
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  margin-top:6px;
}
.margin-note.is-drawn::after{
  animation:ink-draw 1200ms var(--ease) forwards;
}
/* stagger across the four notes in the reading spread */
.spread__margin .margin-note:nth-child(1).is-drawn::after{ animation-delay:0ms; }
.spread__margin .margin-note:nth-child(2).is-drawn::after{ animation-delay:140ms; }
.spread__margin .margin-note:nth-child(3).is-drawn::after{ animation-delay:280ms; }
.spread__margin .margin-note:nth-child(4).is-drawn::after{ animation-delay:420ms; }

/* ------------------------------------------------------------------
   Reading spread — 7fr prose / 4fr margin rail
   ------------------------------------------------------------------ */
.spread{
  display:grid;
  grid-template-columns:7fr 4fr;
  gap:48px;
  align-items:start;
}
.spread__prose{ max-width:560px; }
.spread__prose .h2{ margin-bottom:24px; }
.spread__prose .body + .body{ margin-top:18px; }
.spread__margin{
  display:flex;
  flex-direction:column;
  gap:28px;
  padding-top:8px;
}
@media (max-width:860px){
  .spread{ grid-template-columns:1fr; gap:32px; }
  .spread__prose{ max-width:100%; }
}

/* ------------------------------------------------------------------
   Hand-chalked job board — two real services as chalked panels
   ------------------------------------------------------------------ */
.jobboard__pin{
  font-family:var(--ff-hand);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.3;
  color:var(--ink);
  display:inline-block;
  transform:rotate(-2deg);
  background:var(--paper);
  border:1px solid var(--rule);
  padding:10px 18px;
  box-shadow:0 2px 4px rgba(28,36,36,0.06);
  margin-bottom:32px;
}
.jobboard__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.jobboard__panel{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:28px;
  display:flex;
  flex-direction:column;
}
.jobboard__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.85rem;
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.jobboard__rule{
  width:60px;
  height:0;
  border:0;
  border-bottom:2px solid var(--ink);
  margin:16px 0;
}
.jobboard__panel .body{ color:var(--ink-soft); }
@media (max-width:639px){
  .jobboard__grid{ grid-template-columns:1fr; gap:24px; }
}

/* ------------------------------------------------------------------
   Proof-of-work photo pair — duotone lawn shots, captions BELOW
   ------------------------------------------------------------------ */
.proofpair__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
@media (max-width:639px){
  .proofpair__grid{ grid-template-columns:1fr; gap:32px; }
}
/* the mat frame — white paper inset, thin ink hairline, caption below */
.photo-frame{
  background:var(--paper);
  border:1px solid var(--rule-strong);
  padding:12px 12px 0;
  margin:0;                    /* reset <figure> UA default (1em 40px) that pushed the pair past the viewport */
  display:inline-block;
  max-width:100%;
  width:100%;
}
.photo-frame img{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  margin:0 auto;
}
.photo-caption{
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:1.15rem;
  line-height:1.3;
  color:var(--ink-soft);
  padding:12px 4px 14px;
  position:relative;
}
.photo-caption::after{
  content:"";
  display:block;
  height:2px;
  width:64px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  margin-top:8px;
}
.photo-caption.is-drawn::after{
  animation:ink-draw 1200ms var(--ease) forwards;
}
/* warm-paper duotone — cream highlight + ink shadow */
.photo--duotone{
  background:var(--ink);
  overflow:hidden;
}
.photo--duotone img{
  mix-blend-mode:lighten;
  filter:grayscale(1) sepia(0.35) saturate(0.7) contrast(1.05) brightness(1.02);
}
/* placeholder until real photos localize — never a bare rectangle */
.photo-placeholder{
  background:var(--paper-warm);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink-faint);
  text-align:center;
  padding:24px;
}

/* ------------------------------------------------------------------
   Pasted polaroid — operator portrait, warm untoned + gold corner-tape
   ------------------------------------------------------------------ */
.polaroid{
  background:var(--paper);
  padding:14px 14px 56px;
  border:1px solid var(--rule-strong);
  box-shadow:0 2px 6px rgba(28,36,36,0.08);   /* the ONE allowed shadow: a pasted photo lifting off */
  transform:rotate(-1.5deg);
  max-width:320px;
  width:100%;
  position:relative;
  margin:0 auto;
}
.polaroid img{
  width:100%;
  height:auto;
  display:block;
  filter:saturate(0.92) contrast(1.03);
}
.polaroid::before{                    /* single gold corner-tape mark */
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(4deg);
  width:64px;
  height:18px;
  background:var(--gold);
  opacity:0.85;
}
.polaroid-caption{
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:1.1rem;
  line-height:1.3;
  color:var(--ink-soft);
  text-align:center;
}

/* ------------------------------------------------------------------
   Letter spread — signed letter + stamped operator card
   ------------------------------------------------------------------ */
.letter__grid{
  display:grid;
  grid-template-columns:7fr 4fr;
  gap:48px;
  align-items:start;
}
.letter__body{ max-width:580px; }
.letter__body .h3{ margin-bottom:20px; }
.letter__body .h2{ margin-bottom:24px; }
.letter__body .body + .body{ margin-top:16px; }
.letter__body .body + .contact-form{ margin-top:24px; }
.letter__sig{
  font-family:var(--ff-hand);
  font-weight:600;
  font-size:1.7rem;
  line-height:1.2;
  color:var(--ink);
  margin-top:24px;
}
.letter__brand{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:6px;
}
.letter__stamp{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  justify-content:center;
}
@media (max-width:860px){
  .letter__grid{ grid-template-columns:1fr; gap:32px; }
  .letter__body{ max-width:100%; }
  .letter__stamp{ position:static; }
}

/* ------------------------------------------------------------------
   Stamped operator card — gold ring, ink text (the wayfinding mark)
   ------------------------------------------------------------------ */
.operator-stamp{
  width:220px;
  height:220px;
  border-radius:50%;
  border:2px solid var(--gold);
  outline:1px solid var(--rule);
  outline-offset:6px;
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  gap:6px;
  opacity:0;
  transform:scale(0.92);
}
.operator-stamp.is-drawn{
  animation:stamp-settle 600ms var(--ease) forwards;
}
.operator-stamp__name{
  font-family:var(--ff-hand);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.1;
  color:var(--ink);
}
.operator-stamp__line{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.8125rem;
  line-height:1.4;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}
.operator-stamp__rule{
  width:40px;
  height:0;
  border:0;
  border-top:1px solid var(--gold);
  margin:4px 0;
}

/* ------------------------------------------------------------------
   CTA band — ink ground, cream text (the one full-bleed ink moment)
   ------------------------------------------------------------------ */
.cta-band{
  background:var(--ink);
  color:var(--cream);
  padding:80px 0;
  text-align:center;
}
.cta-band__title{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--cream);
  margin:0 auto 24px;
  max-width:680px;
}
.cta-band__cta{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:1.125rem;
  color:var(--cream);
  display:inline-block;
  padding-bottom:3px;
  position:relative;
}
.cta-band__cta::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(1);
  transform-origin:left center;
}
.cta-band__cta:hover{ color:var(--gold); }

/* ------------------------------------------------------------------
   Service card (interiors) — reuses jobboard panel vocabulary
   ------------------------------------------------------------------ */
.service-card{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.service-card__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.6rem;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.service-card__body{
  font-family:var(--ff-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.service-card__link{
  margin-top:auto;
  padding-top:12px;
}

/* ------------------------------------------------------------------
   FAQ — plain prose Q&A rows (NEVER accordion chrome)
   ------------------------------------------------------------------ */
.faq__row{
  border-top:1px solid var(--rule);
  padding:24px 0;
}
.faq__row:last-child{ border-bottom:1px solid var(--rule); }
.faq__q{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 10px;
}
.faq__a{
  font-family:var(--ff-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0;
  max-width:680px;
}

/* ------------------------------------------------------------------
   Process rail — steps are CHILDREN of .process__rail (never siblings)
   ------------------------------------------------------------------ */
.process{ position:relative; }
.process__rail{
  position:relative;
  padding-left:32px;
}
.process__rail::before{            /* vertical line down the rail */
  content:"";
  position:absolute;
  left:7px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--rule-strong);
}
.step{
  position:relative;
  padding:0 0 36px;
}
.step:last-child{ padding-bottom:0; }
.step::before{                     /* the bullet on the rail */
  content:"";
  position:absolute;
  left:-32px;
  top:6px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--ink);
}
.step__num{                        /* mono label — NEVER .display */
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 6px;
}
.step__title{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 8px;
}
.step__body{
  font-family:var(--ff-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
  max-width:560px;
}

/* ------------------------------------------------------------------
   Breadcrumb (interiors)
   ------------------------------------------------------------------ */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--ff-body);
  font-weight:500;
  font-size:0.8125rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  margin:0 0 20px;
}
.breadcrumb__link{ color:var(--ink-soft); }
.breadcrumb__link:hover{ color:var(--ink); }
.breadcrumb__sep{ color:var(--ink-faint); }
.breadcrumb [aria-current="page"]{ color:var(--ink); }

/* ------------------------------------------------------------------
   Testimonial — owns its quote marks (no literal wrapping quotes in copy)
   ------------------------------------------------------------------ */
.testimonial{
  max-width:680px;
  position:relative;
  padding-left:32px;
}
.testimonial::before{
  content:"\201C";
  position:absolute;
  left:0;
  top:-12px;
  font-family:var(--ff-display);
  font-weight:600;
  font-size:3.5rem;
  line-height:1;
  color:var(--gold);
}
.testimonial__quote{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 16px;
}
.testimonial__cite{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.8125rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}

/* ------------------------------------------------------------------
   Contact form (interiors) — form woven into the letter, NOT aside+form
   ------------------------------------------------------------------ */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:560px;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-label{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.form-input,
.form-textarea{
  font-family:var(--ff-body);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:0;            /* sharp — matches the surface */
  padding:12px 14px;
  width:100%;
}
.form-input:focus,
.form-textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:var(--gold);
}
.form-textarea{ min-height:120px; resize:vertical; }
.form-submit{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:1rem;
  color:var(--cream);
  background:var(--ink);
  border:0;
  border-radius:0;
  padding:14px 28px;
  align-self:flex-start;
  transition:background 200ms var(--ease);
}
.form-submit:hover{ background:#0E1414; }
.form-note{
  font-family:var(--ff-hand);
  font-weight:500;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink-faint);
  margin:4px 0 0;
}
.form-success{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:1.4rem;
  line-height:1.4;
  color:var(--ink);
  padding:16px 0;
}
/* honeypot — off-screen, NOT display:none */
.sf-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ------------------------------------------------------------------
   Footer — ink ground, cream text
   ------------------------------------------------------------------ */
.footer{
  background:var(--ink);
  color:var(--cream);
  padding:64px 0 40px;
  position:relative;
  z-index:1;
}
.footer__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
  align-items:start;
}
@media (max-width:639px){
  .footer{ padding:48px 0 32px; }
  .footer__inner{ grid-template-columns:1fr; gap:28px; padding:0 var(--gutter-mob); }
}
.footer__brand{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--cream);
  margin:0 0 12px;
}
.footer__nap{
  font-family:var(--ff-body);
  font-size:0.9375rem;
  line-height:1.7;
  color:rgba(251,248,242,0.82);
}
.footer__nap a{ color:rgba(251,248,242,0.82); }
.footer__nap a:hover{ color:var(--gold); }
.footer .label{ color:rgba(251,248,242,0.62); margin-bottom:10px; }
.footer__legal{
  font-family:var(--ff-body);
  font-size:0.75rem;
  line-height:1.5;
  color:rgba(251,248,242,0.5);
  border-top:1px solid rgba(251,248,242,0.12);
  margin-top:40px;
  padding-top:20px;
  max-width:var(--shell);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
@media (max-width:639px){
  .footer__legal{ padding-left:var(--gutter-mob); padding-right:var(--gutter-mob); }
}

/* ------------------------------------------------------------------
   Reveal kit — data-reveal on HERO children ONLY (never sections/grids)
   ------------------------------------------------------------------ */
html.js [data-reveal]{ opacity:0; }
html.js [data-reveal].is-revealed{
  animation:reveal-up 700ms var(--ease) forwards;
}
.hero [data-reveal]:nth-child(1){ animation-delay:0ms; }
.hero [data-reveal]:nth-child(2){ animation-delay:100ms; }
.hero [data-reveal]:nth-child(3){ animation-delay:200ms; }
.hero [data-reveal]:nth-child(4){ animation-delay:300ms; }

/* ------------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------------ */
@keyframes ink-draw{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes stamp-settle{
  from{ opacity:0; transform:scale(0.92); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes reveal-up{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ------------------------------------------------------------------
   Reduced motion — renders everything visible, disables transforms
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .margin-note::after,
  .hero__note::after,
  .photo-caption::after{ transform:scaleX(1) !important; }
  .operator-stamp{ opacity:1 !important; transform:none !important; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
}