/* =====================================================================
   getnotarizednow.ca  ·  v2 DESIGN SYSTEM  ·  "the form becomes the document"
   Built 2026-09-10 by CulturaCanvas Studios (SENA), after Dee rejected v1 as our house style.
   v1 is archived in 00_AUDIT-ARCHIVE/HOME-v1_REJECTED_2026-09-10/. Do not build from it.

   WHERE THIS COMES FROM (not from any CCS or TRS pattern):
     - structure: the preview Latoya approved (09-08), finder + docket + comparison + steps + stats
     - concept:   09_RESEARCH/DESIGN-PRECEDENTS_2026-09-10.md (Stripe Atlas, Magic Receipt, Mt. Fuji
                  stamps, Kuemmerlein). No notary site owns the seal/stamp/document device. She will.
     - motion:    09_RESEARCH/MOTION-STACK_2026-09-10.md. Native CSS only, no library.
     - colour:    her logo. Navy FLOODS. Gold appears only where a seal would be.
     - type:      Newsreader + Schibsted Grotesk + IBM Plex Mono. None shared with Dee's sites or her old one.

   THE MOTION RULE: every element's DEFAULT style is its finished state. Motion is layered on only inside
   @media (prefers-reduced-motion: no-preference), and scroll motion only inside @supports view().
   A Firefox or older-iPhone visitor sees a complete page, never a blank one.

   CONTRAST (WCAG AA, measured): gold #C4943B is never text on paper (2.6:1). Gold words on paper use
   --gold-text #7D5F26. Gold on navy is 6.18:1 and fine. Verify: python Brain/tools/contrast.py <page>
   ===================================================================== */

:root{
  --navy:#061C3B; --navy-2:#0A2448; --navy-3:#12305A; --navy-700:#2E405A;
  --on:#E8ECF2;          /* body text on navy, 14.6:1 */
  --on-2:#AEB9C8;        /* secondary on navy, 8.5:1 */
  --gold:#C4943B; --gold-hi:#E9C47C; --gold-lo:#8E6A26;
  /* gold as WORDS ON PAPER. Darkened from #7D5F26 to #745822 on 2026-09-13 when the background became Dee's
     linen photograph: the old value measured 5.2:1 on the flat #F4EEE2 it was chosen against, but the linen is
     #E5DED0 at its mean and #E4DBCE in its darkest patch, which dropped it to 4.33:1 — UNDER AA for normal text.
     contrast.py could not see this: it reads declared CSS colours and the ground is now an image, so it kept
     reporting against the paper token while readers looked at something darker. Measured directly against the
     tile's worst 16px block instead. Now 4.85:1. 17-accessibility publicly commits her to WCAG 2.1 AA, so this
     is a promise on the site, not a preference. */
  --gold-text:#745822;
  --paper:#FBF8F1; --paper-2:#F4EEE2; --paper-3:#EAE2D2;
  --ink:#061C3B; --ink-2:#4E5C70; --ink-3:#586578;
  /* HAIRLINES, darkened 2026-09-13 when the linen ground went in. Dee: "the lines that were around certain
   objects are now faded. They're gone... The texture is not supposed to hide anything. It's supposed to
   elevate... But what's the point of texture if you're gonna lose the lines?"
   MEASURED, not guessed. On the old flat cream #FBF8F1: --rule 1.38:1, --rule-2 1.78:1. On the linen #E5DED0
   those collapsed to 1.09:1 and 1.41:1 — 1.09 is invisible, which is exactly what he was looking at.
   Restored ABOVE their original strength rather than back to it, because a line now has to compete with the
   weave behind it: --rule 1.77:1, --rule-2 2.26:1. A texture that costs you the structure is a bad trade. */
--rule:#B5A78C; --rule-2:#A0937A;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --tap:48px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* v21, 2026-09-13: --grain was a generated feTurbulence noise. It is now a photograph of Dee's heavyweight
     linen stock. The source was 4800x2700 and 12.3 MB, which cannot ship: this is a 512px tile cut from the
     centre, MIRRORED 4-WAY so it is seamless by construction, contrast pulled back to 0.72 so it never fights
     body text, and saved as webp at 21.8 KB. A plain crop was tried first and showed clear horizontal repeat
     bands at 256px; the mirror does not, because the joins fall on axes of symmetry instead of on edges.
     Displayed at --grain-size, NOT at its native 512: at 1:1 the weave reads coarse and gets busy behind type. */
  /* ../ because this file lives in _css/, and make_deploy.py copies _css and _assets side by side into every
     published folder. A bare _assets/ path here resolves to _css/_assets/ and silently loads nothing. */
  --grain:url("../_assets/tex-linen.webp");
  --grain-size:256px;
}
/* every surface that paints the linen, sized in one place so the weave cannot drift between sections */
body,.slip,.clauses,.sheet,.pricing-sec,.schedule,.menu,.svc-side,.town-muni,.ab-card{
  background-size:var(--grain-size)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) var(--grain);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 16px;font-weight:600}
.skip:focus{left:8px}
.mono{font-family:var(--mono)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0 0 14px}

/* ---------- buttons: a notary's buttons are solid and square-shouldered ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:13px 24px;
  border:1.5px solid transparent;border-radius:2px;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--navy)}              /* navy on gold 6.18:1. never white */
.btn-gold:hover{background:var(--gold-hi)}
.btn-ghost{color:#FFFFFF;border-color:rgba(232,236,242,.5)}
.btn-ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,.06)}
.btn-ink{background:var(--navy);color:#FFFFFF}
.btn-ink:hover{background:var(--navy-3)}
.btn-line{color:var(--navy);border-color:var(--rule-2);background:transparent}
.btn-line:hover{border-color:var(--navy)}

/* ---------- the docket tape (ticker). pauses on hover, focus and button: WCAG 2.2.2 ---------- */
/* v3: the tape in its OWN colour, so it stands apart from the navy header (Dee, 2026-09-10). navy on gold 6.18:1 */
.tape{background:var(--gold);color:var(--navy);height:40px;overflow:hidden;position:relative;border-bottom:1px solid var(--gold-lo)}
.tape-track{display:flex;width:max-content}
.tape-set{display:flex;align-items:center;height:40px;white-space:nowrap;font:500 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tape-set span{padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.tape-set span::after{content:"";width:5px;height:5px;background:var(--navy);transform:rotate(45deg)}
.tape-set b{color:var(--navy);font-weight:600}
.tape .note{margin-left:10px;padding:2px 6px;color:var(--navy);border-color:var(--navy);background:rgba(6,28,59,.08);font-style:normal}
.tape-pause{position:absolute;right:0;top:0;height:40px;padding:0 14px;border:0;background:var(--navy);color:#FFFFFF;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:-14px 0 14px var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .tape-track{animation:tape 38s linear infinite}
  .tape:hover .tape-track,.tape:focus-within .tape-track,.tape.paused .tape-track{animation-play-state:paused}
  @keyframes tape{to{transform:translateX(-50%)}}
}

/* ---------- header ---------- */
.head{background:var(--navy);border-bottom:1px solid rgba(232,236,242,.12);position:sticky;top:0;z-index:40}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:88px}
/* v23 (2026-09-16): the reversed lockup. Latoya asked for the logo in navy/white/gold, so the logo
   now carries its own navy field and sits DIRECTLY on the navy header. The paper pill is gone: it only
   ever existed because the logo was dark-on-light artwork on a navy bar, and a pale slab in the corner
   was the compromise. Same #061C3B on both sides, so the field is invisible and you see white and gold
   artwork on the header, which is exactly what she sent. */
.brand{display:flex;align-items:center;flex:none;background:transparent;padding:0;line-height:0}
.brand img{width:260px}   /* v23 2026-09-16: 210 -> 260 on Dee's word. Height was the constraint, not
                             width: 260px = 63px tall, so .head-row went 78 -> 88px to keep air around it.
                             Measured ceiling at 1280 is 300px; 320px stops fitting. (v6 was 210, v5 176.) */
.nav{display:flex;gap:26px;font:500 15px/1 var(--sans)}
.nav a{color:var(--on-2);text-decoration:none;padding:12px 0;white-space:nowrap;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1.5px;background:var(--gold);transition:right .3s var(--ease)}
.nav a:hover{color:#FFFFFF}.nav a:hover::after{right:0}
.head-cta{display:flex;align-items:center;gap:18px;flex:none}
.tel{display:inline-flex;align-items:center;gap:9px;color:#FFFFFF;text-decoration:none;font:500 15px/1 var(--mono);letter-spacing:.02em;min-height:var(--tap)}
.tel svg{width:17px;height:17px;color:var(--gold)}
@media (max-width:1180px){.nav{display:none}}
@media (max-width:640px){.head-cta{display:none}.head-row{min-height:72px}.brand img{width:216px}}

/* ---------- hero: navy floods, the slip fills itself in, the seal presses ---------- */
.hero{background:var(--navy);color:var(--on);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 30%,rgba(196,148,59,.14),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;padding-top:84px;padding-bottom:96px}   /* top/bottom ONLY: this element is also .wrap, and a padding shorthand wiped its side gutters (hero text touched the screen edge at 375, 2026-09-10) */
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:54px;padding-top:56px;padding-bottom:72px}}
/* v23 2026-09-16: letter-spacing .1em -> .03em and the rule gap 12px -> 9px. Latoya: "pull the
   'Notary Public & Commissioner of Oaths' there's too much space between". At 12.5px uppercase mono,
   .1em is ~1.25px of air between every letter across a 44-character line, which is what reads as
   loose. READ AS LETTER-SPACING, NOT AS "DELETE IT" - the line is the licence statement and removing
   it would take a Rule 4.2-1 disclosure off the hero. Flagged to Dee to confirm the reading. */
.kicker{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(44px,6.6vw,96px);line-height:.96;font-weight:300;color:#FFFFFF;letter-spacing:-.035em;font-variation-settings:"opsz" 72}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold);position:relative;white-space:nowrap}
.hero h1 .uline{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.22em;overflow:visible}
.hero h1 .uline path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.lede{font-size:clamp(18px,1.5vw,20px);color:var(--on);max-width:52ch;margin:30px 0 34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding:0;list-style:none}
.quick a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid rgba(232,236,242,.22);color:var(--on);
  text-decoration:none;font-size:14.5px;border-radius:2px;transition:border-color .2s,background-color .2s}
.quick a:hover{border-color:var(--gold);background:rgba(196,148,59,.08)}

/* the appointment slip */
.slip-wrap{position:relative;justify-self:center;width:min(100%,460px);perspective:1200px}
.slip{position:relative;background:var(--paper) var(--grain);color:var(--ink);padding:30px 32px 34px;transform:rotate(-2.2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -18px rgba(0,0,0,.55),0 12px 22px -12px rgba(0,0,0,.5)}
.slip::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:radial-gradient(circle at 7px -2px,var(--navy) 5px,transparent 5.5px) 0 0/14px 10px repeat-x}   /* perforated edge */
.slip-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--navy);padding:6px 0 10px;margin-bottom:6px}
.slip-top b{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.slip-top span{font:400 12px/1 var(--mono);color:var(--ink-3)}
.field{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:end;padding:13px 0 7px;border-bottom:1px dashed var(--rule-2)}
.field .l{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.field .v{font:italic 400 21px/1.2 var(--serif);color:var(--navy);overflow:hidden;white-space:nowrap}
.slip-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:26px;gap:16px}
.slip-foot .sigline{flex:1;border-top:1.5px solid var(--navy);padding-top:6px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* 2026-09-10: at 150px her wax seal read as a dark blob and the gold embossing was unreadable. 220px lets
   NOTARY PUBLIC and the wordmark be seen, which is the whole point of using her real seal */
.seal-spot{position:absolute;right:-104px;bottom:-104px;width:220px;height:220px}   /* touches the corner only: at -78 it still clipped the end of the BRING line */
.seal-spot picture{display:block;position:absolute;inset:0}
/* the seal is now her real wax seal photograph, not a drawing. rotated slightly off-axis and given a tight
   contact shadow so it reads as pressed into the paper rather than pasted on (09_RESEARCH/STAMP-ANIMATION) */
.seal{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(-7deg);
  filter:drop-shadow(0 3px 3px rgba(60,10,10,.5)) drop-shadow(0 12px 18px rgba(0,0,0,.35))}
/* THE PHOTOREAL STAMP (card GNN-STAMP-REAL). Hidden by default: the finished page shows only the seal on the
   paper. To fit a different stamper image, change --stamp-w and the two bottom offsets, nothing else. */
.seal-spot{--stamp-w:272px;--stamp-dx:0.5px}   /* round_A, footprint centre 49.8% (cutout.py) */   /* round_A, footprint centre 49.8% (cutout.py) */   /* round_A, 15% smaller than 320 (Dee, 2026-09-11) */
.stamp-rig,.stamp-shadow{display:none}
.stamp-rig{position:absolute;left:50%;bottom:20%;width:var(--stamp-w);margin-left:calc(var(--stamp-w) / -2 + var(--stamp-dx));
  z-index:3;pointer-events:none;transform-origin:50% 100%}   /* pivots on the rubber face, where it meets paper */
.stamp-rig img{display:block;width:100%;height:auto}
.stamp-shadow{position:absolute;left:50%;bottom:20%;width:var(--stamp-w);margin-left:calc(var(--stamp-w) / -2 + var(--stamp-dx));transform-origin:50% 97%;
  height:auto;z-index:2;pointer-events:none}
@media (max-width:640px){.slip-wrap{width:calc(100% - 20px)}.seal-spot{width:152px;height:152px;right:-16px;bottom:-56px}.slip{padding:26px 22px 30px}.field{grid-template-columns:86px 1fr}.field .v{font-size:18px;white-space:normal}}   /* long slip lines were cut off at 375 (2026-09-10) */

/* ---------- section scaffolding (no eyebrow+rule pattern: a numbered docket margin instead) ---------- */
.sec{padding:112px 0;position:relative;overflow-x:clip}   /* clip, not hidden: no transform can push a phone page sideways, and sticky still works */
@media (max-width:760px){.sec{padding:76px 0}}
.sec-no{font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--gold-text);display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-no::after{content:"";flex:0 0 60px;height:1px;background:currentColor;opacity:.6}
.sec h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;font-weight:300;letter-spacing:-.03em;font-variation-settings:"opsz" 60}
.sec h2 em{font-style:italic;color:var(--gold-text)}
.sec .intro{font-size:18.5px;color:var(--ink-2);max-width:56ch;margin:22px 0 0}
.on-navy{background:var(--navy);color:var(--on)}
.on-navy h2{color:#FFFFFF}.on-navy h2 em{color:var(--gold)}
.on-navy .sec-no{color:var(--gold)}
.on-navy .intro{color:var(--on-2)}

/* ---------- finder + docket: the preview's centrepiece ---------- */
.finder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start;margin-top:56px}
@media (max-width:1000px){.finder{grid-template-columns:minmax(0,1fr);gap:34px}}
.finder-side{position:sticky;top:110px}
@media (max-width:1000px){.finder-side{position:static}}
.finder-side h3{font:italic 400 30px/1.15 var(--serif);margin-bottom:10px}
.finder-side p{color:var(--ink-2);font-size:16px}
.sits{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.sit{min-height:44px;padding:10px 16px;border:1.5px solid var(--rule-2);background:var(--paper);color:var(--ink);font:500 15px/1.2 var(--sans);
  border-radius:2px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.sit:hover{border-color:var(--navy)}
.sit[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FFFFFF}
.count{margin-top:22px;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:14px;align-items:center}
.count button{border:0;background:none;color:var(--gold-text);font:inherit;text-decoration:underline;cursor:pointer;padding:6px 0}
.docket{border-top:2px solid var(--navy);list-style:none;margin:0;padding:0}
.row{border-bottom:1px solid var(--rule);background:transparent;view-transition-name:match-element}
.row-head{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:20px;align-items:center;width:100%;padding:22px 4px 22px 18px;
  border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;position:relative}
.row-head::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.row-head:hover::before,.row.open .row-head::before{transform:scaleY(1)}
.row .t{display:block;font:400 23px/1.2 var(--serif);letter-spacing:-.01em;color:var(--navy)}   /* span, not h3: headings are invalid inside a button */
.row.held .t::after{content:" held";font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-left:8px;vertical-align:4px}

/* ---------- why us, as the numbered clauses of a document (her five trust blocks) ---------- */
.clauses{background:var(--paper-2) var(--grain);border-bottom:1px solid var(--rule)}
.clauses ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.clauses li{padding:38px 24px 36px;border-left:1px solid var(--rule)}
.clauses li:first-child{border-left:0;padding-left:0}
@media (max-width:1000px){.clauses ol{grid-template-columns:1fr 1fr}.clauses li{border-left:0;padding:26px 0;border-bottom:1px solid var(--rule)}}
@media (max-width:560px){.clauses ol{grid-template-columns:1fr}}
.clauses .n{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--gold-text);display:block;margin-bottom:14px}
.clauses h3{font:400 21px/1.2 var(--serif);margin-bottom:8px}
.clauses p{margin:0;font-size:14.5px;color:var(--ink-2)}
.row .d{display:block;color:var(--ink-2);font-size:15px;margin-top:4px}
.forms{display:inline-flex;gap:6px;margin-left:10px;vertical-align:3px}
.forms i{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--navy);border:1px solid var(--rule-2);padding:4px 6px;border-radius:2px;background:var(--paper-2)}
.fee{text-align:right;font:500 19px/1.1 var(--mono);color:var(--navy);white-space:nowrap}
.fee small{display:block;font:400 12px/1.3 var(--sans);color:var(--ink-3);margin-top:4px}
.chev{width:28px;height:28px;border:1.5px solid var(--rule-2);border-radius:50%;display:grid;place-items:center;transition:transform .3s var(--ease),background-color .2s}
.chev svg{width:12px;height:12px}
.row.open .chev{transform:rotate(45deg);background:var(--navy);border-color:var(--navy);color:#FFFFFF}
.row-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.row.open .row-body{grid-template-rows:1fr}
.row-body>div{overflow:hidden}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;padding:6px 18px 30px}
/* phones: the fee drops under the title instead of squeezing it into a column (seen at 375, 2026-09-10) */
@media (max-width:700px){.qa{grid-template-columns:1fr}.row-head{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:14px}.row-head .chev{display:none}.fee{text-align:left}.fee small{display:inline;margin-left:8px}}
.qa .q{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.qa p,.qa li{color:var(--ink-2);font-size:15.5px}
.qa ul{margin:0;padding-left:18px}
.qa .acts{display:flex;flex-wrap:wrap;gap:10px}
.row.held{opacity:.6}
.empty{padding:34px 18px;color:var(--ink-2)}
::view-transition-group(*){animation-duration:.38s;animation-timing-function:var(--ease)}

/* ---------- two sheets: commissioner vs notary ---------- */
.sheets{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:64px;min-height:420px}
@media (max-width:900px){.sheets{grid-template-columns:minmax(0,1fr);gap:18px}}
.sheet{background:var(--paper) var(--grain);color:var(--ink);padding:40px 40px 44px;box-shadow:0 24px 50px -22px rgba(0,0,0,.5)}
.sheet .law{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.sheet h3{font:400 36px/1.05 var(--serif);letter-spacing:-.025em;margin-bottom:6px}
.sheet .ask{font:italic 400 19px/1.3 var(--serif);color:var(--gold-text);margin-bottom:22px}
.sheet ul{list-style:none;margin:0 0 26px;padding:0}
.sheet li{padding:11px 0 11px 28px;border-top:1px solid var(--rule);position:relative;font-size:16px;color:var(--ink-2)}
.sheet li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border:1.5px solid var(--navy);transform:rotate(45deg)}
.sheet-a{transform:rotate(-1.2deg);margin:26px -18px 0 0;background-color:var(--paper-2)}
.sheet-b{transform:rotate(1.4deg);position:relative;z-index:2;margin:-6px 0 26px -18px;border-top:4px solid var(--gold)}
.sheet-b .plus{font:600 14px/1.4 var(--sans);color:var(--navy);margin-bottom:6px}
@media (max-width:900px){.sheet-a,.sheet-b{margin:0;transform:none}}
.inshort{margin:40px auto 0;max-width:62ch;text-align:center;font:italic 400 22px/1.4 var(--serif);color:var(--on)}

/* ---------- four steps collected as stamps ---------- */
.route{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:70px;list-style:none;padding:0}
.route::before{content:"";position:absolute;left:6%;right:6%;top:58px;border-top:2px dashed var(--rule-2)}
@media (max-width:900px){.route{grid-template-columns:1fr 1fr;row-gap:50px}.route::before{display:none}}
@media (max-width:520px){.route{grid-template-columns:1fr}}
.step{position:relative;text-align:center}
.stamp{width:118px;height:118px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--paper);
  border:2.5px solid var(--navy);box-shadow:0 0 0 6px var(--paper),0 0 0 7.5px var(--navy);transform:rotate(-8deg)}
.step:nth-child(2) .stamp{transform:rotate(6deg)}.step:nth-child(3) .stamp{transform:rotate(-4deg)}.step:nth-child(4) .stamp{transform:rotate(9deg)}
.stamp b{font:500 30px/1 var(--mono);color:var(--navy)}
.stamp span{position:absolute;bottom:22px;font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.step:last-child .stamp{background:var(--navy);box-shadow:0 0 0 6px var(--paper),0 0 0 7.5px var(--gold)}
.step:last-child .stamp b{color:var(--gold)}.step:last-child .stamp span{color:var(--gold)}
.step h3{font:400 24px/1.15 var(--serif);margin-bottom:8px}
.step p{color:var(--ink-2);font-size:15.5px;max-width:28ch;margin:0 auto}
.ready{margin:54px auto 0;max-width:760px;border:1.5px solid var(--navy);padding:18px 24px;display:flex;gap:18px;align-items:center;background:var(--paper-2)}
.ready b{font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;flex:none}
.ready p{margin:0;color:var(--ink-2);font-size:15.5px}
@media (max-width:640px){.ready{flex-direction:column;align-items:flex-start}}

/* ---------- we come to you: stats stamped ---------- */
.come{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
@media (max-width:1000px){.come{grid-template-columns:minmax(0,1fr);gap:40px}}
.come p.big{font:300 clamp(24px,2.4vw,32px)/1.3 var(--serif);color:var(--on);margin:24px 0 0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* "100%" at 48px could not fit a third of 335px and pushed the page 35px wide (measured 2026-09-10) */
/* .stats-prefixed on purpose: this block sits ABOVE the base .stat rules, and the base font: shorthand was winning */
@media (max-width:520px){.stats{gap:8px}.stats .stat{padding:20px 6px 16px}.stats .stat b{font-size:32px;letter-spacing:-.04em}.stats .stat span{font-size:10px;letter-spacing:.04em}}
.stat{border:1.5px solid rgba(196,148,59,.6);padding:26px 16px 22px;text-align:center;position:relative}
.stat b{display:block;font:400 clamp(48px,5.4vw,76px)/1 var(--serif);color:var(--gold);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)}
.regions{margin-top:64px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(232,236,242,.18)}
@media (max-width:1000px){.regions{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.regions{grid-template-columns:1fr}}
.region{padding:22px 18px 22px 0;border-bottom:1px solid rgba(232,236,242,.12)}
.region h3{font:400 26px/1.1 var(--serif);color:#FFFFFF;margin-bottom:8px}
.region p{margin:0;font-size:14.5px;color:var(--on-2);line-height:1.7}

/* ---------- the person (Q4) ---------- */
.person{display:grid;grid-template-columns:260px 1fr;gap:54px;align-items:center;margin-top:50px}
@media (max-width:820px){.person{grid-template-columns:1fr;gap:26px}}
.portrait{aspect-ratio:4/5;background:var(--paper-2);border:1.5px solid var(--rule-2);display:grid;place-items:center;text-align:center;padding:20px;
  font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transform:rotate(-1.5deg);box-shadow:0 18px 36px -20px rgba(6,28,59,.45)}
.person blockquote{margin:0;font:italic 300 clamp(24px,2.6vw,34px)/1.3 var(--serif);color:var(--navy)}
.person .who{margin-top:20px;font:500 12.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- close: the last line of the document ---------- */
.close{text-align:center}
.close h2{max-width:14ch;margin:0 auto}
.close .hero-cta{justify-content:center;margin-top:40px}
.close .uline2{display:block;width:min(420px,70%);height:18px;margin:14px auto 0}
.close .uline2 path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--on-2);padding:72px 0 30px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.fgrid{grid-template-columns:1fr}}
.foot .wm{font:300 34px/1 var(--serif);color:#FFFFFF;letter-spacing:-.02em;margin:0 0 16px}
.foot .wm em{color:var(--gold)}
.foot h4{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:10px}
.foot a{color:var(--gold);text-decoration:none}.foot a:hover{color:#FFFFFF}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(232,236,242,.14);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px}
/* v23 2026-09-16: the build credit. DELIBERATELY QUIETER THAN HER OWN LINES - it is our name on her
   business, so it must never compete with her legal notice sitting beside it. Muted, and the link
   only picks up gold on hover so it reads as a signature rather than an advert. `margin-left:auto`
   pushes it to the end of the row at desktop and it simply wraps under at narrow widths. */
.fbot .credit{color:var(--on-2);opacity:.72;margin-left:auto}
.fbot .credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(232,236,242,.28)}
.fbot .credit a:hover{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:700px){.fbot .credit{margin-left:0}}

/* ---------- mobile action bar ---------- */
.bar{display:none}
@media (max-width:640px){
  .bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:var(--navy);border-top:1px solid rgba(196,148,59,.4)}
  .bar .btn{min-height:50px}
  body{padding-bottom:74px}
}

/* ---------- DRAFT NOTES: quiet margin tags instead of v1's gold boxes. body.notes-off hides them ---------- */
.note{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:3px 7px;border:1px dashed var(--gold);border-radius:2px;
  font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--gold-text);background:rgba(196,148,59,.08);vertical-align:middle;white-space:normal;text-transform:none}
.on-navy .note,.hero .note,.foot .note{color:var(--gold-hi);background:rgba(196,148,59,.12)}
.notes-toggle{position:fixed;left:14px;bottom:14px;z-index:70;display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:8px 14px;
  background:var(--paper);color:var(--navy);border:1.5px solid var(--navy);font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(6,28,59,.4)}
@media (max-width:640px){.notes-toggle{bottom:84px}}
body.notes-off .note,body.notes-off .row.held,body.notes-off .draft-only{display:none!important}

/* =====================================================================
   MOTION. Everything above is already the finished page. Below only ADDS movement.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}

  /* hero, on load, total under 3.4s, never loops (WCAG 2.2.2) */
  .hero .kicker,.hero h1,.hero .lede,.hero .hero-cta,.hero .quick{animation:rise .9s var(--ease) both}
  .hero h1{animation-delay:.08s}.hero .lede{animation-delay:.22s}.hero .hero-cta{animation-delay:.34s}.hero .quick{animation-delay:.46s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}}
  .hero h1 .uline path{animation:draw 1.1s .9s var(--ease) both}
  @keyframes draw{from{stroke-dashoffset:1}}
  .slip{animation:slip-in 1s .15s var(--ease) both}
  @keyframes slip-in{from{opacity:0;transform:translateY(40px) rotate(4deg)}}
  .field .v{animation:type .7s steps(22,end) both}
  .field:nth-of-type(1) .v{animation-delay:1.0s}.field:nth-of-type(2) .v{animation-delay:1.45s}
  .field:nth-of-type(3) .v{animation-delay:1.9s}.field:nth-of-type(4) .v{animation-delay:2.35s}
  @keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  /* THE PRESS, beat for beat as a hand stamps paper (09_RESEARCH/STAMP-ANIMATION_2026-09-10.md).
     starts 3.10s once the slip has typed itself in | contact 3.45s | hold to 3.69s | seal revealed ON THE LIFT at
     3.72s | gone by 4.25s. never loops. the 2D stamp this replaces was removed 2026-09-10 (Dee: "it looks cheap"). */
  .stamp-rig,.stamp-shadow{display:block}
  .stamp-rig{animation:press 1.15s 3.1s both}
  @keyframes press{
    0%   {opacity:0;transform:translate(70px,-280px) scale(1.2) rotate(5deg);animation-timing-function:cubic-bezier(.4,0,1,1)}
    6%   {opacity:1}   /* solid almost at once: a longer fade let the slip show through the wood on entry */
    22.6%{transform:translate(10px,-34px) scale(1.04) rotate(1.2deg);animation-timing-function:cubic-bezier(0,0,.3,1)}
    30.4%{transform:translate(0,0) scale(1) rotate(0)}
    34%  {transform:translate(0,3px) scale(1,.94) rotate(-1.5deg)}
    38.3%{transform:translate(0,2px) scale(1,.96) rotate(-.8deg)}
    51.3%{transform:translate(0,2px) scale(1,.96) rotate(-.8deg);animation-timing-function:cubic-bezier(0,0,.2,1)}
    67.8%{opacity:1;transform:translate(24px,-190px) scale(1.12) rotate(2.5deg)}
    86%  {opacity:1;transform:translate(46px,-360px) scale(1.24) rotate(3.5deg)}   /* still SOLID: wood does not fade */
    100% {opacity:0;transform:translate(60px,-440px) scale(1.3) rotate(4deg)}}     /* gone only in the last beat */
  /* its shadow stays ON THE PAPER: wide and faint while the stamp is high, smallest and darkest on contact */
  .stamp-shadow{animation:press-shadow 1.15s 3.1s both}
  @keyframes press-shadow{
    0%   {opacity:0;transform:scale(1.55)}
    22.6%{opacity:.3;transform:scale(1.14)}
    30.4%{opacity:.85;transform:scale(.95)}
    51.3%{opacity:.85;transform:scale(.95)}
    67.8%{opacity:.25;transform:scale(1.2)}
    100% {opacity:0;transform:scale(1.5)}}
  /* the paper takes the hit */
  .slip-wrap{animation:slip-dip .34s 3.45s ease-out both}
  @keyframes slip-dip{30%{transform:translateY(2px) scale(.996)}}
  /* the seal is revealed as the stamp lifts off it, never before */
  .seal{animation:seal-in .26s 3.72s ease-out both}
  @keyframes seal-in{from{opacity:0;transform:rotate(-7deg) scale(1.04)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
  .slip::after{content:none}   /* the old gold flash belonged to the 2D stamp */
  .slip::after{content:"";position:absolute;right:30px;bottom:24px;width:110px;height:110px;border-radius:50%;
    background:radial-gradient(circle,rgba(196,148,59,.35),transparent 70%);opacity:0;animation:flash .9s 3.6s ease-out both;pointer-events:none}
  @keyframes flash{30%{opacity:1}to{opacity:0}}

  .sit:active{transform:scale(.97)}

  /* scroll-linked, only where the browser runs it off the main thread */
  @supports (animation-timeline:view()){
    /* EVERY range ends at "entry 100%": the motion is finished the moment the element is fully on screen,
       so a visitor who stops scrolling never sees anything half-stamped (caught at 375, 2026-09-10) */
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .stamp{animation:stamp linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-30deg)}75%{opacity:1;transform:scale(.95) rotate(-6deg)}100%{opacity:1}}
    .route::before{animation:dash linear both;animation-timeline:view();animation-range:entry 0% cover 40%;transform-origin:left}
    @keyframes dash{from{transform:scaleX(0)}}
    .sheet-b{animation:slide-over linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @media (max-width:900px){.sheet-b{animation-name:rise}}   /* phones: vertical only, never sideways */
    @keyframes slide-over{from{transform:translate(60px,40px) rotate(6deg);opacity:.2}to{transform:rotate(1.4deg);opacity:1}}
    .stat{animation:stamp-soft linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes stamp-soft{0%{opacity:0;transform:scale(1.25) rotate(-8deg)}100%{opacity:1;transform:none}}
    .close .uline2 path{animation:draw linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}

/* =====================================================================
   v3 ADDITIONS (2026-09-10): pricing schedule + estimator, consultation links, Gina
   ===================================================================== */
.doubt{text-align:center;max-width:62ch;margin:18px auto 0;color:var(--on-2);font-size:16.5px}
.doubt a{color:var(--gold);font-weight:600}
.finder-side .consult{display:inline-block;margin-top:22px;font-weight:600;color:var(--navy);text-underline-offset:4px}
.qa .orcall{margin:10px 0 0;font-size:14px;color:var(--ink-3)}
.qa .orcall a{color:var(--navy);font-weight:600}
.anyway{margin:34px 0 0;color:var(--on-2);font-size:16.5px}
.anyway a{color:var(--gold);font-weight:600}
.hero-cta .note{margin-left:8px}

/* pricing: a printed schedule of fees beside a working estimator */
.pricing-sec{background:var(--paper-2) var(--grain);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pricing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:start;margin-top:56px}
@media (max-width:960px){.pricing{grid-template-columns:minmax(0,1fr);gap:30px}}
.schedule{background:var(--paper) var(--grain);border:1.5px solid var(--navy);padding:34px 36px 28px;box-shadow:10px 10px 0 var(--paper-3)}
@media (max-width:640px){.schedule{padding:26px 20px 22px;box-shadow:6px 6px 0 var(--paper-3)}}
.schedule .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1.5px solid var(--navy);padding-bottom:12px;margin:0 0 6px;
  font:600 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.schedule .hd span{font-weight:400;color:var(--ink-3);letter-spacing:.06em}
.fee-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:13px 0;margin:0;border-bottom:1px dashed var(--rule-2)}
.fee-line .nm{font:400 19px/1.3 var(--serif);color:var(--navy)}
.fee-line .dots{flex:1;min-width:24px;border-bottom:2px dotted var(--rule-2);transform:translateY(-5px)}
.fee-line .amt{font:500 18px/1 var(--mono);color:var(--navy);white-space:nowrap}
.fee-line .sub{flex-basis:100%;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.schedule .fine{margin:16px 0 0;font-size:14.5px;color:var(--ink-2)}
/* phones: long fee names wrapped and pushed the price onto its own line under the leader (seen at 375,
   2026-09-10). the price now keeps its own right-hand column and the leaders step aside */
@media (max-width:640px){
  .fee-line{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:baseline}
  .fee-line .dots{display:none}
  .fee-line .sub{grid-column:1 / -1}
}
.estimator{background:var(--navy);color:var(--on);padding:32px 30px 30px;box-shadow:0 26px 50px -24px rgba(6,28,59,.6)}
@media (max-width:640px){.estimator{padding:26px 20px 24px}}
.estimator h3{font:400 32px/1.1 var(--serif);color:#FFFFFF;margin:0 0 6px}
.estimator .hint{font-size:14.5px;color:var(--on-2);margin:0 0 20px}
.est-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(232,236,242,.14)}
.est-row .lb{font:500 15.5px/1.3 var(--sans);color:#FFFFFF}
.est-row small{display:block;font-size:12.5px;color:var(--on-2);font-weight:400;margin-top:2px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid rgba(196,148,59,.75);flex:none}
.stepper button{width:44px;height:44px;border:0;background:transparent;color:var(--gold);font:500 22px/1 var(--mono);cursor:pointer}
.stepper button:hover{background:rgba(196,148,59,.14)}
.stepper output{min-width:40px;text-align:center;font:500 20px/1 var(--mono);color:#FFFFFF}
.seg{display:inline-flex;border:1.5px solid rgba(196,148,59,.75);flex:none}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:600 14px/1 var(--sans);color:var(--on)}
.seg input:checked+span{background:var(--gold);color:var(--navy)}
.seg input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.tog{position:relative;display:inline-flex;flex:none}
.tog input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tog input:disabled{cursor:not-allowed}
.tog span{width:52px;height:30px;border-radius:999px;background:rgba(232,236,242,.2);position:relative;transition:background-color .2s}
.tog span::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;transition:transform .25s var(--ease)}
.tog input:checked+span{background:var(--gold)}
.tog input:checked+span::after{transform:translateX(22px);background:var(--navy)}
.tog input:disabled+span{opacity:.35}
.tog input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.est-lines{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1.5px solid var(--gold);font:400 14px/1.95 var(--mono);color:var(--on-2)}
.est-lines li{display:flex;justify-content:space-between;gap:12px}
.est-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(232,236,242,.2)}
.est-total span{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-2)}
.est-total b{font:400 48px/1 var(--serif);color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.estimator .fine{font-size:13px;color:var(--on-2);margin:12px 0 18px}

/* ASK GINA, in this design (her content and logic came from the preview) */
.gina-btn{position:fixed;right:18px;bottom:18px;z-index:65;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 18px 8px 8px;
  background:var(--navy);color:#FFFFFF;border:1.5px solid var(--gold);border-radius:999px;font:600 15px/1 var(--sans);cursor:pointer;box-shadow:0 14px 30px -10px rgba(6,28,59,.6)}
.gina-btn .av,.gina-h .av{width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font:500 18px/1 var(--serif);flex:none}
.gina-btn[hidden]{display:none}
@media (max-width:640px){.gina-btn{bottom:84px;right:12px}}
.gina{position:fixed;right:18px;bottom:18px;z-index:66;width:min(400px,calc(100vw - 36px));height:min(590px,calc(100vh - 36px));display:none;flex-direction:column;
  background:var(--paper);border:1.5px solid var(--navy);box-shadow:0 30px 60px -20px rgba(6,28,59,.65)}
.gina.on{display:flex}
@media (max-width:640px){.gina{right:0;bottom:0;width:100%;height:100%;border:0}}
.gina-h{background:var(--navy);color:#FFFFFF;padding:14px 16px;display:flex;align-items:center;gap:12px;flex:none}
.gina-h .av{width:38px;height:38px;font-size:20px}
.gina-h .nm{font:500 18px/1.2 var(--serif)}
.gina-h .st{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-2)}
.gina-x{margin-left:auto;width:40px;height:40px;border:1px solid rgba(232,236,242,.35);background:transparent;color:#FFFFFF;cursor:pointer;font-size:20px;line-height:1}
.gina-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:90%;padding:11px 14px;font-size:15px;line-height:1.5}
.msg.g{background:#FFFFFF;border:1px solid var(--rule);color:var(--ink);align-self:flex-start}
.msg.u{background:var(--navy);color:#FFFFFF;align-self:flex-end}
.msg .note{margin:8px 0 0}
.msg-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.msg-acts a{display:inline-flex;align-items:center;min-height:36px;padding:8px 11px;border:1.5px solid var(--navy);color:var(--navy);font:600 13px/1.1 var(--sans);text-decoration:none}
.msg-acts a:hover{background:var(--navy);color:#FFFFFF}
.gina-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.gina-chips button{font:500 13.5px/1.2 var(--sans);background:var(--paper-2);border:1px solid var(--rule-2);color:var(--ink);padding:8px 11px;cursor:pointer;min-height:38px}
.gina-chips button:hover{border-color:var(--navy)}
.gina-note{font:500 11px/1.4 var(--mono);color:var(--ink-3);text-align:center;padding:0 16px 10px;margin:0}
.gina-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule);background:#FFFFFF;flex:none}
.gina-f input{flex:1;min-width:0;font:inherit;font-size:15px;border:1.5px solid var(--rule-2);padding:10px 12px;min-height:44px;background:var(--paper);color:var(--ink)}
.gina-f input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.gina-f button{background:var(--gold);color:var(--navy);border:0;padding:0 18px;font:600 15px/1 var(--sans);cursor:pointer;min-height:44px}
@media (prefers-reduced-motion:no-preference){
  .est-total b.bump{animation:bump .35s var(--ease)}
  @keyframes bump{40%{transform:scale(1.06)}}
  .gina.on{animation:gina-in .28s var(--ease)}
  @keyframes gina-in{from{opacity:0;transform:translateY(14px)}}
}


/* =====================================================================
   v4 (2026-09-11): the estimate is built from her real services. Card GNN-PRICE-STAMP.
   ===================================================================== */
.builder{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:40px;align-items:start;margin-top:48px}
@media (max-width:980px){.builder{grid-template-columns:minmax(0,1fr);gap:28px}}
.menu{background:var(--paper) var(--grain);border:1.5px solid var(--navy);padding:6px 28px 20px}
@media (max-width:560px){.menu{padding:4px 16px 14px}}
.menu-group h3{font:600 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:22px 0 2px;padding-bottom:10px;border-bottom:1.5px solid var(--navy)}
.menu-group ul{list-style:none;margin:0;padding:0}
.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--rule-2)}
.menu-item.held{opacity:.6}
.mi-name{font:400 18px/1.25 var(--serif);color:var(--navy)}
.mi-name small{display:block;font:400 13.5px/1.4 var(--sans);color:var(--ink-3);margin-top:3px}
.mi-fee{font:500 16px/1.1 var(--mono);color:var(--navy);text-align:right;white-space:nowrap}
.mi-fee small{display:block;font:400 11.5px/1.3 var(--sans);color:var(--ink-3);margin-top:3px}
.mi-add{min-height:42px;min-width:76px;padding:8px 12px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font:600 13.5px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.mi-add:hover{background:var(--paper-2)}
.mi-add[aria-pressed="true"]{background:var(--navy);color:#FFFFFF}
@media (max-width:560px){.menu-item{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.mi-add{grid-column:1 / -1;justify-self:start}}
.add-est[aria-pressed="true"]{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.estimate{position:sticky;top:96px;background:var(--navy);color:var(--on);padding:28px 26px 26px;box-shadow:0 26px 50px -24px rgba(6,28,59,.6)}
@media (max-width:980px){.estimate{position:static}}
@media (max-width:640px){.estimate{padding:24px 18px 22px}}
.estimate h3{font:400 30px/1.1 var(--serif);color:#FFFFFF;margin:0 0 6px}
.estimate .hint{font-size:14.5px;color:var(--on-2);margin:0 0 8px}
.est-items{list-style:none;margin:6px 0 0;padding:0}
.est-items li{display:grid;grid-template-columns:minmax(0,1fr) auto 34px;gap:10px;align-items:center;padding:11px 0;border-top:1px solid rgba(232,236,242,.14)}
.ei-name{font:500 15px/1.3 var(--sans);color:#FFFFFF}
.ei-name small{display:block;font:400 12.5px/1.3 var(--sans);color:var(--on-2);margin-top:2px}
.stepper.sm button{width:36px;height:36px;font-size:18px}
.stepper.sm output{min-width:28px;font-size:16px}
.ei-x{width:34px;height:34px;border:1px solid rgba(232,236,242,.3);background:transparent;color:var(--on);font-size:18px;line-height:1;cursor:pointer}
.ei-x:hover{border-color:#FFFFFF;color:#FFFFFF}
.est-extras{margin-top:14px}
.est-lines li.pending{font-style:italic}
.est-mini{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:64;display:inline-flex;gap:10px;align-items:center;
  min-height:46px;padding:12px 18px;background:var(--gold);color:var(--navy);font:600 14px/1 var(--sans);text-decoration:none;box-shadow:0 12px 28px -10px rgba(6,28,59,.55)}
.est-mini[hidden]{display:none}
@media (max-width:640px){.est-mini{left:12px;transform:none;bottom:136px}}

/* ================= V5 PICTURES (2026-09-11, card GNN-IMAGES) =================
   Photo prints on the notary's desk, tilted like the sheets already are. Generated images are objects and hands
   only, never a face (she is a Law Society licensee: an invented face implies a relationship that does not exist). */
.hero-photo{position:absolute;top:0;right:0;width:56%;height:100%;object-fit:cover;object-position:50% 28%;opacity:.62;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%);mask-image:linear-gradient(to right,transparent 0,#000 40%)}
@media (max-width:1000px){.hero-photo{width:100%;height:56%;top:auto;bottom:0;opacity:.34;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}}

.print{position:absolute;margin:0;background:#FBF8F1;padding:10px 10px 30px;box-shadow:0 22px 40px -18px rgba(0,0,0,.6);pointer-events:none}
.print img{display:block;width:100%;height:auto}
.sheet-a{position:relative;z-index:1}                       /* both sheets now sit above the prints */
.print-sign{left:-104px;bottom:-66px;width:270px;transform:rotate(-7deg);z-index:0}
.print-pass{right:-122px;top:-70px;width:240px;transform:rotate(6deg);z-index:0}
@media (max-width:900px){.sheets .print{display:none}}

.sit-photo{margin:28px 0 0;width:clamp(190px,30vh,280px);background:#FBF8F1;padding:9px 9px 28px;transform:rotate(-2.5deg);
  box-shadow:0 18px 34px -18px rgba(6,28,59,.5)}
.sit-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:opacity .22s}
.sit-photo img.swap{opacity:0}
@media (max-width:1000px){.sit-photo{display:none}}         /* phones: the list comes first, not a picture */
@media (max-height:760px){.sit-photo{display:none}}         /* short screens: the chips matter more than the photo */

/* the kitchen print: may hang only into the pricing section's bottom padding, because the sticky estimate can
   slide down to the bottom of its builder and must never pass under a picture */
#areas .wrap{position:relative}
.print-come{right:-8px;top:-212px;width:340px;transform:rotate(4deg);z-index:3}
@media (max-width:1000px){.print-come{position:relative;top:auto;right:auto;display:block;width:min(100%,420px);margin:0 auto 44px;transform:rotate(2deg)}}

.regions{position:relative;isolation:isolate}
.street{position:absolute;left:50%;top:-40px;width:100vw;max-width:none;height:calc(100% + 80px);transform:translateX(-50%);object-fit:cover;
  opacity:.2;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}

/* HEADER FIT (2026-09-11). Between the nav appearing (1181px) and ~1560px the header needed up to 237px more than
   it had, and the gold button ran off the page (measured: scrollWidth 1483 at 1425). Tightened in that range only. */
@media (min-width:1181px){   /* no upper bound: the row is 1,184px wide at every width from 1240 up (v5d) */
  .head-row{gap:16px}
  .nav{gap:16px;font-size:14px}
  .head-cta{gap:12px}
  .brand img{width:260px}
  .head-cta .btn .long{display:none}
}

/* ================= V6 (2026-09-11): her portrait, licence line, mobile fee, bigger logo =================
   The bigger logo costs ~60px of header width. Measured need: the row is 1,184px wide at 1240px and up, less below.
   Between 1181 and 1279 "Prepare & FAQ" steps out of the nav (the same content is one tap away in Services). */
@media (min-width:1181px) and (max-width:1279px){.nav a[href="#prepare"]{display:none}}
.portrait{padding:0;margin:0;overflow:hidden}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.person .who b{color:var(--navy);letter-spacing:.04em}
.person .lic{margin:10px 0 0;font:500 14px/1.5 var(--sans)}
.person .lic a{color:var(--navy);text-underline-offset:3px}
.come .mobile-fee{margin:18px 0 0;font-size:18px;color:var(--on)}
.come .mobile-fee b{color:var(--gold)}

/* ================= THE BOOKING PANEL (v8, 2026-09-11) =================
   Dee: leaving her site for Cal.com's dark page "looks unprofessional". The calendar now opens over her own page,
   on her navy, with a close button, Escape, and a click outside. Full screen on a phone, where a framed page in a
   small box is worse than no box at all. */
.bookwrap{position:fixed;inset:0;z-index:120;background:rgba(6,28,59,.74);display:grid;place-items:center;padding:20px}
/* 768px IS LOAD-BEARING AND IS NOT A TASTE DECISION. DO NOT RAISE IT. (v11, 2026-10-04)
   Latoya: people can only book inside a narrow band. Dee: "no it's not scrollable", with a screenshot of
   Monday the 5th stopping at 4:30am. The availability was never the problem - cal.com was offering all 48
   slots, 12:00am to 11:30pm. The problem is that cal.com's month_view puts that list in a column measured
   at 433px holding 2,128px of content, carrying the class `no-scrollbar ... overflow-y-auto`. IT SCROLLS AND
   HIDES THE SCROLLBAR, so there is no mark on screen telling anyone the other 39 times exist.
   IT IS NOT OUR PANEL HEIGHT. Measured on cal.com's own page with no modal at all: the column is 433px at a
   538px viewport and STILL 433px at 900px. Making the box taller buys nothing. A first attempt to fix this
   by growing .bookbox was wrong and was abandoned.
   WIDTH is the only lever we hold. cal.com picks its layout by width, and the switch sits between 768 and
   860: at 768 it drops the month grid and flows the whole list down the page (column 808px, content 808px,
   nothing trapped); at 860 the 433px column comes back. We were at 980, about 90px on the wrong side.
   This one declaration covers ALL FOUR event types - appointment, after-hours, consultation and online
   commissioning all open through this same panel from booking.js, so there is no per-event copy to miss.

   NARROWED AGAIN TO 560px, 2026-10-04, AND 768 IS NOW THE CEILING RATHER THAN THE SETTING.
   Dee, on the deployed 768 panel: "the spacing needs to be adjusted. There's too much white space."
   Measured on the LIVE page before changing anything: .bookbox, the CAL-INLINE wrapper and the iframe
   were all exactly 768px with no margin anywhere on our side, so the white was INSIDE cal.com's frame -
   their booker is width-constrained and sits centred in whatever frame it is given. Cross-origin, so it
   cannot be styled from here. Width is the only lever, and it was tested on the live page:
       768 -> cal content 886px tall, calendar alone fills the view, white strip beside the booker
       560 -> cal content 1029px, the calendar AND the first time slots are visible together
       480 -> same layout as 560, but OUR header wraps and the phone number clips behind the close button
   DO NOT RAISE THIS ABOVE 768. Between 768 and 860 cal.com swaps back to month_view and the time list
   returns to its 433px scrollbar-hidden column, which is the whole fault this panel exists to avoid.
   Anywhere at or below 768 is safe; 560 is the chosen point, not a limit. */
.bookbox{position:relative;width:min(560px,100%);height:auto;max-height:92vh;background:var(--paper);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.bookbox iframe{display:block;width:100%;height:100%;border:0}
.bookclose{position:absolute;top:9px;right:10px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--navy);color:#FFFFFF;font:400 24px/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.bookclose:hover{background:var(--gold);color:var(--navy)}
.bookclose:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:640px){.bookwrap{padding:0}.bookbox{width:100%;height:100%}}

/* v9: her brand AROUND the calendar. The calendar itself is cal.com's frame and cannot be styled from here; her
   colours inside it come from one setting in her own Cal.com account (Appearance, brand colour #C4943B). */
.bookbox{display:flex;flex-direction:column}
.bookhead{flex:none;display:flex;align-items:center;gap:18px;background:var(--navy);color:var(--on);
  padding:14px 64px 14px 22px;border-bottom:3px solid var(--gold)}
.bookwm{font:300 22px/1 var(--serif);letter-spacing:-.01em;color:#FFFFFF}
.bookwm em{font-style:italic;font-weight:400;color:var(--gold-hi)}  /* was --gold #C4943B at 6.18:1 on the navy header: it PASSES AA and still read faint, because it is a
     300-weight italic serif sitting beside white. --gold-hi #E9C47C measures 10.23:1 and carries the weight.
     Dee, 2026-09-12: "the Now on the schedule, it's a little faint". A ratio can pass and still look wrong. */
.booktel{margin-left:auto;font:500 13.5px/1 var(--mono);letter-spacing:.04em;color:var(--on-2);white-space:nowrap}
.booktel a{color:var(--gold);text-decoration:none}
.booktel a:hover{text-decoration:underline}
.bookbox iframe{flex:1 1 auto;height:auto}
@media (max-width:560px){.bookhead{padding:12px 58px 12px 16px;gap:10px}.bookwm{font-size:19px}.booktel{font-size:12px}}

/* v11, 2026-10-04: the facts cal.com's own block used to carry, in our chrome where we control the spacing.
   Its block cost 340px at this width, most of it a second avatar and a second "GetNotarizedNow" under ours.
   This costs about 54px. Nothing here is a fresh claim: the titles, durations and locations were read off
   her live Cal.com event types, and the sentence is her own published copy. See booking.js META and NOTE. */
.bookmeta{flex:none;background:var(--paper);border-bottom:1px solid rgba(6,28,59,.12);padding:10px 22px 11px}
.bm-what{margin:0;font:400 14px/1.35 var(--sans);color:var(--navy)}
.bm-what b{font-weight:600}
.bm-note{margin:3px 0 0;font:400 12.5px/1.45 var(--sans);color:rgba(6,28,59,.72)}
@media (max-width:560px){.bookmeta{padding:9px 16px 10px}.bm-what{font-size:13px}.bm-note{font-size:11.5px}}

/* ================= SERVICE PAGES (v10, 2026-09-12, card GNN-PAGES) =================
   Generated pages: 04-services.html, the three category pages, and one page per live service. */
.crumbs{margin:0 0 22px;font:500 12.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--rule-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.svc-hero h1{font-size:clamp(34px,4.6vw,60px);font-weight:300;line-height:1.02;letter-spacing:-.03em;color:var(--navy);margin:0 0 14px}
.svc-hero h1 em{font-style:italic;color:var(--gold-text)}
.svc-fee{margin:20px 0 0;font:500 30px/1 var(--mono);color:var(--navy)}
.svc-fee span{margin-left:10px;font:400 14px/1 var(--sans);color:var(--ink-3)}
.svc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.svc-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:56px;align-items:start}
@media (max-width:900px){.svc-body{grid-template-columns:minmax(0,1fr);gap:34px}}
.svc-main h2{font:400 26px/1.2 var(--serif);color:var(--navy);margin:34px 0 10px}
.svc-main h2:first-child{margin-top:0}
.svc-main p{font-size:17px;line-height:1.7;color:var(--ink-2)}
.svc-bring{list-style:none;margin:0;padding:0}
.svc-bring li{position:relative;padding:11px 0 11px 28px;border-top:1px solid var(--rule);font-size:16px;color:var(--ink-2)}
.svc-bring li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border:1.5px solid var(--navy);transform:rotate(45deg)}
.svc-forms{margin-top:24px;font-size:14.5px;color:var(--ink-3)}
.svc-forms i{display:inline-block;margin-right:6px;padding:4px 6px;font:500 11px/1 var(--mono);font-style:normal;
  letter-spacing:.04em;color:var(--navy);background:var(--paper-2);border:1px solid var(--rule-2);border-radius:2px}

.svc-side{background:var(--paper-2) var(--grain);border:1.5px solid var(--rule-2);padding:26px 24px}
.svc-side h3{margin:0 0 14px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.svc-side ul{margin:0;padding-left:18px}
.svc-side li{margin-bottom:10px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.svc-est{margin:18px 0 0}
.svc-est a{font-weight:600;color:var(--navy);text-underline-offset:4px}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:16px;list-style:none;margin:26px 0 0;padding:0}
.svc-card a{display:grid;gap:6px;height:100%;padding:22px 22px 20px;background:var(--paper);border:1.5px solid var(--rule-2);
  text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.svc-card a:hover{border-color:var(--navy);transform:translateY(-2px)}
.sc-name{font:400 22px/1.2 var(--serif);color:var(--navy)}
.sc-desc{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.sc-fee{margin-top:10px;font:500 17px/1.1 var(--mono);color:var(--navy)}
.sc-fee small{display:block;margin-top:3px;font:400 12px/1.3 var(--sans);color:var(--ink-3)}
.on-navy .svc-card a{background:transparent;border-color:rgba(232,236,242,.22)}
.on-navy .svc-card a:hover{border-color:var(--gold)}
.on-navy .sc-name{color:#FFFFFF}
.on-navy .sc-desc{color:var(--on-2)}
.on-navy .sc-fee{color:var(--gold)}
.on-navy .sc-fee small{color:var(--on-2)}

.svc-group{margin:0;font:300 clamp(26px,3vw,38px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--navy)}
.svc-group a{color:inherit;text-decoration:none}
.svc-group a:hover{text-decoration:underline;text-underline-offset:6px}

/* ================= TOWN PAGES + SERVICE AREAS HUB (v12, 2026-09-12) ================= */
.town-muni{background:var(--paper-2) var(--grain);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.town-muni h2{font:300 clamp(28px,3.4vw,44px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--navy);margin:0 0 20px}
.town-muni p{max-width:66ch;font-size:17px;line-height:1.7;color:var(--ink-2)}
.town-muni q{font-style:italic;color:var(--navy)}
.town-muni q::before{content:"\201C"}
.town-muni q::after{content:"\201D"}
.town-refuse{max-width:66ch;margin:14px 0 20px;padding:0;list-style:none;columns:2;column-gap:34px}
@media (max-width:680px){.town-refuse{columns:1}}
.town-refuse li{position:relative;padding:7px 0 7px 26px;font-size:16px;color:var(--ink-2);break-inside:avoid}
.town-refuse li::before{content:"\00D7";position:absolute;left:4px;top:6px;font:500 16px/1.4 var(--mono);color:#A32D2D}
.town-src{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.town-src a{color:var(--ink-2)}
.town-we{margin-top:20px;padding-left:18px;border-left:3px solid var(--gold);font-size:18px;color:var(--ink)}
.town-we b{color:var(--navy)}
.town-all{margin-top:22px}
.town-all a,.town-hub a{font-weight:600;color:var(--navy);text-underline-offset:4px}
.on-navy .town-hub a{color:var(--gold)}
.town-near{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.town-near a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid rgba(232,236,242,.22);
  color:var(--on);text-decoration:none;font-size:15.5px;border-radius:2px;transition:border-color .2s,background-color .2s}
.town-near a:hover{border-color:var(--gold);background:rgba(196,148,59,.08)}
.town-hub{margin-top:26px}

.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:26px}
.area-card{background:var(--paper);border:1.5px solid var(--rule-2);padding:24px 24px 22px}
.area-card h3{margin:0 0 10px;font:400 26px/1.15 var(--serif);color:var(--navy)}
.area-places{margin:0;font-size:15px;line-height:1.9;color:var(--ink-2)}
.area-places a{color:var(--navy);text-underline-offset:3px}
.area-places span{color:var(--ink-3)}

/* ================= ABOUT / FAQ / CONTACT (v13, 2026-09-12) ================= */
/* ---- About ---- */
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:54px;align-items:start}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr;gap:34px}}
.ab-body p{max-width:64ch;font-size:17.5px;line-height:1.75;color:var(--ink-2);margin:0 0 18px}
.ab-body h2{font:300 clamp(26px,3vw,38px)/1.1 var(--serif);color:var(--navy);letter-spacing:-.02em;margin:34px 0 14px}
.ab-lead{font-size:20px!important;color:var(--ink)!important}
.ab-card{background:var(--paper-2) var(--grain);border:1.5px solid var(--rule-2);padding:26px 26px 22px;position:sticky;top:96px}
@media (max-width:900px){.ab-card{position:static}}
.ab-card img{width:100%;height:auto;display:block;margin:0 0 18px;filter:grayscale(.12)}
.ab-card h3{margin:0 0 4px;font:400 23px/1.2 var(--serif);color:var(--navy)}
.ab-role{margin:0 0 16px;font:500 12px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text)}
.ab-facts{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ab-facts li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2);display:flex;
  justify-content:space-between;gap:14px}
.ab-facts b{color:var(--navy);font-weight:600;text-align:right}
.ab-verify{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.ab-verify a{color:var(--ink-2)}
.ab-law{margin:22px 0 0;padding-left:18px;border-left:3px solid var(--gold);font-size:16px;color:var(--ink-2)}
.ab-law b{color:var(--navy)}

/* ---- FAQ ---- */
.faq-wrap{max-width:76ch}
.faq-q{border-bottom:1px solid var(--rule)}
.faq-q summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font:400 19.5px/1.4 var(--serif);color:var(--navy)}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary:hover{color:var(--gold-text)}
.faq-q summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.faq-q summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.faq-q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 44px 22px 0}
.faq-a p{margin:0 0 12px;font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:64ch}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--navy);text-underline-offset:3px}
.faq-grp{margin:0 0 42px}
.faq-grp h2{font:300 clamp(24px,2.6vw,32px)/1.1 var(--serif);color:var(--navy);letter-spacing:-.02em;
  margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--navy)}

/* ---- Contact ---- */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:18px;margin:0 0 34px}
.ct-card{background:var(--paper);border:1.5px solid var(--rule-2);padding:24px;display:flex;flex-direction:column}
.ct-card h3{margin:0 0 8px;font:400 22px/1.2 var(--serif);color:var(--navy)}
.ct-card p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ink-2);flex:1}
/* 2026-09-13: info@getnotarizednow.ca is 25 monospace characters and this was a FIXED 21px inline-block, so it
   ran straight past the card border and under the card beside it. Dee: "Email is running outside the book and
   end is covered by the book to the right." An email address is the one string on a contact page that must never
   be clipped. Now it shrinks to fit the column and breaks rather than overflowing. */
.ct-big{display:block;font:500 clamp(15px,1.45vw,21px)/1.3 var(--mono);color:var(--navy);text-decoration:none;
  letter-spacing:-.01em;margin:0 0 6px;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.ct-big.is-email{font-size:clamp(12.5px,1.02vw,16px);letter-spacing:-.02em}
.ct-big:hover{color:var(--gold-text)}
.ct-hours{width:100%;border-collapse:collapse;max-width:520px;margin-top:8px}
.ct-hours td{padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--ink-2)}
.ct-hours td:last-child{text-align:right;color:var(--navy);font-weight:600}
.ct-note{margin-top:24px;padding-left:18px;border-left:3px solid var(--gold);font-size:16px;color:var(--ink-2);max-width:62ch}

/* v10 (2026-09-12): Cal.com's inline embed is injected into .bookcal, so the panel body is now a container
   rather than an iframe we wrote ourselves. Their iframe lands inside it and inherits the size. */
.bookcal{flex:0 1 auto;min-height:0;overflow:auto;background:var(--paper)}
/* Cal's inline embed sizes its own iframe to its content. Forcing height:100% on it left a dead cream band
   under the calendar (seen on Dee's screen, 2026-09-12). Let it keep its height and let the panel hug it. */
.bookcal>*{width:100%;height:auto}
.bookcal iframe{display:block;width:100%;height:auto;border:0}

/* ---------- photographs on GENERATED pages (v19, 2026-09-13) ----------
   Until today only 01-home.html carried photographs, because it is the only page built by hand. Everything else
   comes out of a generator that had no image slot. These two classes are that slot.
   .pband  full-width 21:9 strip between sections (town pages, services overview)
   .pside  upright 4:5 beside a hero heading, inside .wrap.hero-split                                        */
.pband{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
/* Breathing room under a band whose next section sets padding-top:0. Without it the heading below sits flush
   against the photograph's bottom edge and the two read as one block. Set from the FIGURE, not by unpicking the
   next section's inline padding, so the rule stays local to the thing that caused it. */
.pband-gap{margin-bottom:clamp(40px,5.5vw,74px)}
/* aspect-ratio, NOT a fixed height. A flat 330px band on a 1400px page crops a 21:9 photograph to about 4.2:1
   and eats the composition: the services flat-lay lost the fanned documents entirely and kept the middle third.
   Holding the image's own 21:9 up to a cap shows the picture that was actually commissioned. Caught by looking
   at the rendered page, not by reading the CSS. */
.pband img{display:block;width:100%;height:auto;aspect-ratio:1600/686;max-height:440px;object-fit:cover}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,340px);
            gap:clamp(24px,4vw,56px);align-items:center}
.pside{margin:0}
.pside img{display:block;width:100%;height:auto;border:1.5px solid var(--rule-2)}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr}
  .pside{max-width:400px;margin:10px auto 0}
}

/* ---------- filling the dead right column (v20, 2026-09-13) ----------
   Dee: "Bottom right of the page is bare. Needs something there" (Contact) and "right side of the page under the
   current picture is bare" (FAQ). Both pages put a single narrow text column on the left and left roughly 40% of
   the page empty all the way down. Rather than stretch the text to full width, which makes long questions hard
   to read, both now use the same .svc-body two-column grid the service and town pages already use, with a real
   panel on the right. The panel EARNS its place: on FAQ it is the way out for anyone whose question is not
   listed, on Contact it is the four steps of what actually happens.                                          */
.svc-side.is-sticky{position:sticky;top:96px}
@media (max-width:900px){.svc-side.is-sticky{position:static}}
.svc-side .side-lede{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.side-cta{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.side-cta .btn{text-align:center;width:100%}
.step-list{list-style:none;counter-reset:s;margin:0;padding:0}
.step-list li{counter-increment:s;position:relative;padding:0 0 16px 38px;margin:0}
.step-list li::before{content:counter(s);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  background:var(--navy);color:var(--gold-hi);font:600 12px/25px var(--mono);text-align:center}
.step-list li:not(:last-child)::after{content:"";position:absolute;left:12px;top:29px;bottom:4px;width:1px;
  background:var(--rule-2)}
.step-list b{display:block;color:var(--navy);font:600 15px/1.35 var(--sans)}
.step-list span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:2px}

/* ---------- blind-embossed seals (v22, 2026-09-13) ----------
   Dee's own stencil sheet, cut up by split_stencils.py. A blind emboss carries NO INK: the shape is painted the
   colour of the paper and read entirely from the shadow, which is why it is set as a background-image tinted by
   two offset shadows rather than as a graphic.
   WHY THIS AND NOT A GOLD MEDALLION: a medallion sitting on the page is a BADGE, and a badge on a paralegal's
   site makes a claim about authority. Pressed into the stock it is texture, and nobody reads a watermark as a
   mark of office.
   FOUR of Dee's twelve are used and they are the four about SIGNING AND DOCUMENTS. Not used, deliberately:
   anything carrying scales of justice or a classical court column, because those say LAWYER and Latoya is a
   PARALEGAL; and the maple leaf inside a wax seal or laurel wreath, which edges toward a federal device.
   Embossing lowers the volume on a shape, it does not change what the shape says.
   POSITIONS are all right-hand or bleeding off an edge. Body copy is capped around 58-64ch, so that space is
   free by construction: a watermark that competes with a call-to-action has stopped being a watermark. */
/* left/right are set EXPLICITLY here rather than left to the browser. The first attempt set only `right` in the
   inline style and the seal rendered hard against the LEFT edge instead: with `left` unresolved the element fell
   back to its static position and `right` never took effect. Pinning left:auto makes the intent unambiguous. */
.seal{position:absolute;left:auto;right:auto;pointer-events:none;user-select:none;line-height:0;z-index:0;
  color:var(--paper-2);
  filter:drop-shadow(0 1px 0 rgba(255,253,247,.92)) drop-shadow(0 -1px 0 rgba(120,96,58,.30))}
.seal svg{display:block;width:100%;height:auto}
.sec>.wrap{position:relative;z-index:1}      /* words always sit above the impression */
@media (max-width:900px){.seal{display:none}}   /* no room for it, and it only ever competed on small screens */

/* ---------- embossed ornaments in empty grid cells (v23, 2026-09-13) ----------
   Dee's own artwork, lifted off its baked-in linen onto a real alpha channel so the page's weave shows through
   at the page's own scale. Spans the leftover cells at the end of a card grid; overflow is clipped so the
   ornament's long rules can run past the cell edge and read as continuing behind the cards.
   Sized and positioned inline by page_shell.ornament(), because opacity differs per ornament by design. */
.orn-cell{display:flex;align-items:center;justify-content:center;overflow:hidden;grid-column:span 2}
.orn-cell img{max-width:none;height:auto;pointer-events:none;user-select:none}
/* Below the point where the grid drops to two columns there are no leftover cells to fill, and the ornament
   would push real content down the page instead of sitting beside it. */
@media (max-width:900px){.orn-cell{display:none}}

/* An ornament in the empty GUTTER of a prose page, for pages with no card grid to fill. `.ab-body p` is capped
   at 64ch, so on a 1240px wrap there is a measured 499px empty column down the right. Floating into it moves
   no text, because the prose already stops short of it. Written by page_shell.ornament_aside(). */
.orn-aside{float:right;margin:6px 0 18px 34px;shape-outside:inset(0);pointer-events:none}
.orn-aside img{max-width:none;height:auto;pointer-events:none;user-select:none}
/* Once the gutter is gone the float would sit ON the text instead of beside it. 1100 not 900: this measure
   runs out earlier than the card grid does, and an ornament overlapping a sentence is worse than no ornament. */
@media (max-width:1100px){.orn-aside{display:none}}

/* ===========================================================================================
   THE COOKIE BAR, 2026-09-22. Only ever visible on the deployed site: _js/consent.js is
   referenced at deploy time and never in site/, so the preview stays clean.

   WHY THE OFFSET BELOW IS MEASURED AND NOT TYPED. Four things are already anchored to the
   bottom of this site: .bar (the mobile quick-action bar, z-index 60), .gina-btn (65),
   .est-mini (64) and .gina. A fifth bottom-fixed strip with a hand-guessed height is a
   collision waiting for the first phone that renders the text on two lines instead of one.
   consent.js measures its own rendered height and publishes it as --cookiebar-h; everything
   bottom-anchored reads that variable and moves up by exactly the right amount. When the bar
   is dismissed the variable is removed and they all settle back with no layout left behind.
   =========================================================================================== */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--navy);color:var(--on);border-top:2px solid var(--gold);
  box-shadow:0 -8px 28px rgba(6,28,59,.28)}
.cookiebar-text{margin:0;flex:1 1 320px;font-family:var(--sans);font-size:.94rem;line-height:1.5;color:var(--on)}
.cookiebar-text a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:2px}
.cookiebar-text a:hover{color:#fff}
.cookiebar-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.cookiebar-btn{min-height:var(--tap)}
/* THE DECLINE BUTTON HAD NO VISIBLE LABEL, caught 2026-09-22 by looking at the rendered page on a phone
   viewport. .btn-line is color:var(--navy) because everywhere else on this site it sits on cream. This bar
   is navy, so "No thanks" was navy text on a navy background: invisible. The button it hid was THE ONE THAT
   DECLINES, which is the one a visitor most needs to find, and no gate in this project would ever have seen
   it because the markup and the class were both entirely correct. --on is the body colour used on navy and
   measures 14.6:1 against it. */
.cookiebar .btn-line{color:var(--on);border-color:rgba(232,236,242,.55);background:transparent}
.cookiebar .btn-line:hover,.cookiebar .btn-line:focus-visible{color:#fff;border-color:var(--gold-hi)}
@media (max-width:520px){
  .cookiebar{gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .cookiebar-actions{width:100%}
  .cookiebar-actions .cookiebar-btn{flex:1 1 0}
}
/* Everything else that lives at the bottom of the screen steps up while the bar is showing. */
.gina-btn{bottom:calc(18px + var(--cookiebar-h,0px))}
.gina{bottom:calc(18px + var(--cookiebar-h,0px))}
.est-mini{bottom:calc(18px + var(--cookiebar-h,0px))}
/* 640px, read off the .bar rule above rather than guessed. The first draft of this line said 860
   and would have left the quick-action bar underneath the cookie bar on every phone. */
@media (max-width:640px){
  /* ==========================================================================================
     THE QUICK-ACTION BAR'S HEIGHT, DECLARED ONCE, 2026-09-25.

     DEE FOUND THIS ON THE LIVE SITE AND HE WAS RIGHT TO BE ANGRY. Measured at 375x812:
         .gina-btn   left 229  right 363   z-index 65
         .bar "Book" left 192  right 365   z-index 60
     **The Ask Gina button was sitting directly on top of the BOOK button on every phone**, and
     because Gina is the higher layer it won the tap. On a site whose entire purpose is taking
     bookings, the one control covered was the booking one.

     WORSE, I HAD ALREADY MEASURED IT. Earlier the same day a reading returned gina top 570 and
     quickbar top 571 and I filed it as "pre-existing, not mine" instead of reporting it. The
     numbers were on screen and were reasoned away. THE MEASUREMENT WAS NEVER THE PROBLEM.

     .bar is bottom-anchored and 67px tall at this width; 74px is what body padding already
     reserved for it. That figure now lives in ONE place instead of being retyped per element,
     so nothing anchored to the bottom of this site can drift out of agreement with it again.
     ========================================================================================== */
  :root{--bar-h:74px}
  .bar{bottom:var(--cookiebar-h,0px)}
  body{padding-bottom:calc(var(--bar-h) + var(--cookiebar-h,0px))}
  /* Everything floating at the bottom clears the bar AND the cookie bar, never just one. */
  .gina-btn,.est-mini{bottom:calc(var(--bar-h) + 12px + var(--cookiebar-h,0px))}
  .gina{bottom:calc(var(--bar-h) + 12px + var(--cookiebar-h,0px));
        height:min(590px,calc(100vh - var(--bar-h) - 48px - var(--cookiebar-h,0px)))}
}
@media (min-width:641px){
  body{padding-bottom:var(--cookiebar-h,0px)}
}

/* deploy: draft tags never show on the public site */ .note,.notes-toggle{display:none!important}