/* Ashby Lane Estate Law — concept site by Studio Mate (fictional firm) */
:root {
  --limestone: #F4EFE5; --paper: #FBF8F1; --sand: #E6DCC8;
  --ink: #1F2A2E; --muted: #5B605D; /* was #5F6461: 4.43:1 on --sand, now 4.71:1 */ --line: rgba(31,42,46,.14);
  --bp: #22382E; --bp-deep: #182A22; --bp-line: #EDE5D2;
  --sunset: #8E3B2E; --sunset-soft: #E8C99B; --oak: #2F4A3A; --oak-soft: #DDE3D6;
  --brass: #B08D57;
  --field-line: #7D8280; /* input and choice outlines: 3.4:1 on limestone, 3.7:1 on paper */
  --sunset-on-dark: #C4705C; /* the terracotta accent on dark grounds: 4.1:1 on --ink (--sunset is 2.0:1) */
  --focus: var(--sunset);
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Figtree", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --gutter: clamp(1rem, 4vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--limestone); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: var(--body); color: var(--ink); background: var(--limestone); line-height: 1.6; font-size: clamp(1rem, .95rem + .2vw, 1.1rem); overflow-x: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--sunset); }
.wrap { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
.spec { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.m-line { padding-bottom: .1em; margin-bottom: -.1em; }
/* hidden only while JS is about to reveal it: without JS (or if a script fails) everything stays visible */
.js:not(.motion-ready) [data-reveal], .js:not(.motion-ready) [data-load] { visibility: hidden; }

/* concept ribbon */
.concept { position: fixed; z-index: 80; left: 50%; bottom: .9rem; translate: -50% 0; background: var(--ink); color: var(--limestone); border-radius: 999px; padding: .45rem .9rem .45rem .6rem; display: flex; align-items: center; gap: .55rem; font-size: .75rem; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); max-width: calc(100vw - 1.5rem); }
.concept b { background: var(--sunset); color: #fff; border-radius: 999px; padding: .1rem .5rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; }
.concept a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
@media (max-width: 560px) { .concept span.long { display: none; } }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; padding-block: 1rem; transition: background .5s, backdrop-filter .5s, color .5s; }
.hdr.scrolled { background: color-mix(in srgb, var(--limestone) 82%, transparent); backdrop-filter: blur(14px); }
.hdr.on-dark:not(.scrolled) { color: var(--limestone); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.01em; }
.brand svg { width: 2rem; height: 2rem; }
.brand small { display: block; font-family: var(--mono); font-size: .55rem; letter-spacing: .2em; opacity: .7; margin-top: -.2rem; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-weight: 600; font-size: .95rem; }
.nav a { position: relative; padding-block: .25rem; }
.nav a::after { content: ""; position: absolute; inset: auto 0 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 50%; position: relative; }
.menu-btn i { position: absolute; left: 25%; right: 25%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn i:first-child { top: 42%; } .menu-btn i:last-child { top: 58%; }
html.menu-open .menu-btn i:first-child { top: 50%; transform: rotate(45deg); }
html.menu-open .menu-btn i:last-child { top: 50%; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--bp); color: var(--bp-line); display: none; flex-direction: column; justify-content: center; padding: 6rem var(--gutter) 3rem; background-image: linear-gradient(rgba(207,226,245,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(207,226,245,.08) 1px, transparent 1px); background-size: 32px 32px; }
.mobile-menu a { display: block; font-family: var(--display); font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1.15; overflow: hidden; }
.mobile-menu a span { display: inline-block; }
.mobile-menu .spec { margin-top: 2rem; opacity: .7; }
html.menu-open .hdr { color: var(--bp-line); }
@media (max-width: 860px) { .nav, .hdr .btn { display: none; } .menu-btn { display: block; } }

/* buttons */
.btn { --b: var(--ink); --f: var(--limestone); position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.55rem; border-radius: 999px; background: var(--b); color: var(--f); font-weight: 700; font-size: .95rem; border: 0; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; min-height: 2.75rem; justify-content: center; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sunset); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover::before { transform: none; }
.btn:hover { color: var(--limestone); } /* the hover fill is always terracotta, so the label turns light on every variant */
.btn.light, .btn.ghost { transition: background-color .3s var(--ease), color .12s; }
.btn.light:hover, .btn.ghost:hover { background-color: var(--sunset); transition: background-color .3s var(--ease) .05s, color .2s ease .08s; } /* light and outline buttons warm up under the sliding fill, so the label never sits light-on-light */
.btn.light { --b: var(--limestone); --f: var(--ink); }
.btn.ghost { --b: transparent; --f: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.sm { padding: .62rem 1.1rem; font-size: .86rem; min-height: 2.5rem; }
.btn .arr { transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* preloader + transition */
.loader, .wipe { position: fixed; inset: 0; z-index: 100; background: var(--bp); color: var(--bp-line); display: grid; place-items: center; background-image: linear-gradient(rgba(207,226,245,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(207,226,245,.1) 1px, transparent 1px); background-size: 40px 40px; }
.wipe { transform: translateY(100%); pointer-events: none; }
html.is-leaving .wipe { transform: none; }
.loader svg { width: min(46vw, 260px); overflow: visible; }
.loader svg path { fill: none; stroke: var(--bp-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.loader .count { position: absolute; bottom: 2rem; right: var(--gutter); font-family: var(--display); font-size: clamp(3rem, 9vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.loader .spec { position: absolute; bottom: 2.4rem; left: var(--gutter); opacity: .75; }
html.loaded .loader { display: none; }

/* sections */
section { position: relative; }
.pad { padding-block: clamp(5rem, 11vw, 10rem); }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--sunset); }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.h-xl { font-size: clamp(3rem, 8.4vw, 8.4rem); }
.h-lg { font-size: clamp(2.4rem, 5.4vw, 5rem); }
.h-md { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 38rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stats div { background: var(--limestone); padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem); }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stats .spec { color: var(--muted); margin-top: .6rem; display: block; }
.note { color: var(--muted); font-size: .8rem; margin-top: .9rem; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* listing cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; background: var(--paper); border-radius: 1.4rem; overflow: hidden; border: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .5s var(--ease), translate .5s var(--ease); }
.card:hover { box-shadow: 0 30px 60px -36px rgba(28,38,41,.45); translate: 0 -4px; }
.card .ph { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.card .ph img { transition: transform 1.2s var(--ease); }
.card:hover .ph img { transform: scale(1.06); }
.tag { position: absolute; top: .9rem; left: .9rem; background: var(--paper); border-radius: 999px; padding: .28rem .7rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.tag.hot { background: var(--sunset); color: #fff; }
.card .bd { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .35rem; }
.card .price { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; }
.card .addr { font-weight: 700; }
.card .facts { display: flex; gap: 1rem; color: var(--muted); font-size: .9rem; }
.card .hood { color: var(--oak); }

/* neighborhoods marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.4rem; }
.marquee .track { display: flex; gap: 3rem; width: max-content; font-family: var(--display); font-size: clamp(2rem, 4.6vw, 4rem); font-style: italic; white-space: nowrap; }
.marquee .track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee .track span::after { content: "✦"; font-style: normal; font-size: .4em; color: var(--sunset); }

/* neighborhood tiles */
.hoods { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: clamp(14rem, 26vw, 22rem); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.hoods a { position: relative; border-radius: 1.4rem; overflow: hidden; color: #fff; }
.hoods a:first-child { grid-row: span 2; }
.hoods a:last-child { grid-column: 1 / -1; }
.hoods a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,20,22,.72)); }
.hoods .t { position: absolute; z-index: 1; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; }
.hoods .t b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.hoods img { transform: scale(1.12); }
@media (max-width: 760px) { .hoods { grid-template-columns: 1fr 1fr; } .hoods a:first-child { grid-column: span 2; grid-row: auto; } }

/* value teaser / band */
.band { background: var(--ink); color: var(--limestone); border-radius: clamp(1.4rem, 3vw, 2.6rem); margin-inline: clamp(.5rem, 1.5vw, 1.2rem); overflow: hidden; }
.band .lead { color: rgba(242,236,226,.75); }
.band .spec { color: var(--sunset-soft); }

/* sell: valuation tool */
.tool { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .tool { grid-template-columns: 1fr !important; } .tool .est { position: relative; top: 0; } }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 1.6rem; padding: clamp(1.3rem, 3vw, 2.2rem); }
.panel h3 { font-size: 1.6rem; }
.fld { display: grid; gap: .55rem; margin-top: 1.5rem; }
.fld > label, .fld > .lbl { font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between; }
.fld output { font-family: var(--mono); font-size: .85rem; color: var(--sunset); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1.5px solid var(--field-line); background: transparent; border-radius: 999px; padding: .5rem .95rem; cursor: pointer; font-weight: 600; font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--ink); color: var(--limestone); border-color: var(--ink); }
input[type=range] { width: 100%; accent-color: var(--sunset); }
.est { position: sticky; top: 6rem; background: var(--bp); color: var(--bp-line); border-radius: 1.6rem; padding: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden; background-image: linear-gradient(rgba(207,226,245,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(207,226,245,.1) 1px, transparent 1px); background-size: 28px 28px; }
.est .range { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: .6rem; color: #fff; }
.est .meter { height: 10px; border-radius: 10px; background: rgba(207,226,245,.18); margin-top: 1.4rem; position: relative; }
.est .meter i { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, var(--sunset-soft), var(--sunset)); }
.est .comps { margin-top: 1.6rem; display: grid; gap: .55rem; }
.est .comps div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: .7rem; background: rgba(207,226,245,.08); font-size: .9rem; }
@media (max-width: 560px) { .est .comps div { font-size: .8rem; } }
.est .small { font-size: .78rem; opacity: .7; margin-top: 1rem; }
.est .mini-house { position: absolute; right: -1rem; top: -1rem; width: 9rem; opacity: .35; }

/* forms */
.form { display: grid; gap: .9rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: .3rem; font-weight: 700; font-size: .88rem; }
.form input, .form select, .form textarea { border: 1px solid var(--field-line); background: var(--limestone); border-radius: .9rem; padding: .85rem 1rem; font-weight: 500; min-height: 3rem; }
.form textarea { min-height: 7rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--sunset); outline: 2px solid var(--sunset); outline-offset: 1px; box-shadow: none; }
.form .ok { color: var(--oak); font-weight: 700; }
.form .fine { color: var(--muted); font-size: .8rem; }

/* listings page */
.filters { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; padding-block: 1.4rem; border-block: 1px solid var(--line); margin-bottom: 2rem; }
.filters .chips { gap: .4rem; }
.count { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--muted); }
.sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.sheet .bg { position: absolute; inset: 0; background: rgba(15,20,22,.55); backdrop-filter: blur(4px); }
.sheet .in { position: absolute; top: 0; right: 0; bottom: 0; width: min(46rem, 100%); background: var(--limestone); overflow-y: auto; overscroll-behavior: contain; }
.sheet .gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .4rem; height: clamp(16rem, 48vh, 26rem); }
.sheet .gal img:first-child { grid-row: span 2; }
.sheet .body { padding: clamp(1.3rem, 3vw, 2.2rem); display: grid; gap: 1rem; }
.sheet .x { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: var(--paper); cursor: pointer; font-size: 1.3rem; box-shadow: 0 6px 20px -8px rgba(0,0,0,.4); }
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: 1rem; overflow: hidden; }
.kv div { background: var(--paper); padding: .9rem; }
.kv b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr 1fr; } }

/* about */
.portrait { aspect-ratio: 4 / 5; border-radius: 999px 999px 1.6rem 1.6rem; overflow: hidden; background: var(--bp); display: grid; place-items: center; color: var(--bp-line); text-align: center; background-image: linear-gradient(rgba(207,226,245,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(207,226,245,.1) 1px, transparent 1px); background-size: 28px 28px; }
.portrait b { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; display: block; }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 1rem; }
.steps li::before { content: "0" counter(s); font-family: var(--mono); font-size: .8rem; color: var(--sunset); letter-spacing: .1em; }
.steps h3 { font-size: 1.5rem; margin-top: .4rem; }
.steps p { color: var(--muted); margin-top: .5rem; font-size: .98rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.quote { font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.3; font-style: italic; }
.ph-note { display: inline-block; font-size: .85rem; line-height: 1.45; background: var(--sand); border-radius: .8rem; padding: .45rem .8rem; color: var(--muted); }

/* page hero (inner pages) */
.phero { padding-top: clamp(8rem, 18vw, 12rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.phero .lead { margin-top: 1.2rem; }
.media-reveal { border-radius: clamp(1.2rem, 2.4vw, 2rem); overflow: hidden; height: clamp(18rem, 52vw, 40rem); }
.media-reveal img { transform: scale(1.15); }

/* faq */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; font-family: var(--display); font-size: 1.3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sunset); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 1.2rem; max-width: 46rem; }

/* footer */
.ftr { background: var(--ink); color: var(--limestone); padding-block: clamp(4rem, 9vw, 7rem) 6rem; margin-top: clamp(4rem, 9vw, 8rem); }
.ftr .big { font-family: var(--display); font-size: clamp(3rem, 10vw, 9rem); line-height: .95; letter-spacing: -.03em; }
.ftr .big em { color: var(--sunset-on-dark); }
.ftr .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(242,236,226,.15); }
.ftr .cols a { display: block; opacity: .8; padding-block: .15rem; }
.ftr .cols a:hover { opacity: 1; }
.ftr .legal { margin-top: 2.5rem; font-size: .78rem; opacity: .6; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ftr .legal a { text-decoration: underline; text-underline-offset: 3px; }
.eho { display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 760px) { .ftr .cols { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ───── HOME: the signature line ───── */
.sign { height: 620vh; background: #191512; }
.sign .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.desk { position: absolute; inset: -4%; background: #2A1E16 center / cover no-repeat; will-change: transform; }
.desk::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent 30%, rgba(10,7,5,.55)), linear-gradient(rgba(14,10,7,.25), rgba(14,10,7,.25)); }
.cam { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.paper { position: relative; z-index: 2; width: min(31rem, 64vh, 86vw); aspect-ratio: 8.5 / 11; max-height: 84vh; background: #FBF8F0; color: #23262A; border-radius: 2px; padding: 4.4em 4.8em; box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 30px 60px -20px rgba(0,0,0,.6), 0 8px 18px -8px rgba(0,0,0,.4); font-family: "Libre Caslon Text", Georgia, serif; font-size: clamp(.4rem, 1.02vh, .6rem); line-height: 1.5; rotate: -1.6deg; padding-right: 8.5em; }
.paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(115deg, rgba(255,255,255,.35), transparent 40%, rgba(0,0,0,.035)); }
.paper .doc-h { text-align: center; font-size: 1.9em; letter-spacing: .14em; font-weight: 700; }
.paper .doc-s { text-align: center; font-style: italic; margin-top: .35em; font-size: 1.15em; }
.paper .doc-c { text-align: center; font-size: .85em; letter-spacing: .2em; margin-top: .4em; color: #6A665E; }
.paper .art { margin-top: .9em; text-align: justify; hyphens: auto; }
.paper .art b { display: block; letter-spacing: .12em; font-size: .9em; margin-bottom: .2em; }
.paper .hl { background: linear-gradient(transparent 55%, rgba(246,214,92,.75) 55%, rgba(246,214,92,.75) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; }
.paper .note { position: absolute; font-family: "Caveat", cursive; color: #22468F; font-size: 1.8em; line-height: 1; rotate: -6deg; text-align: center; }
.paper .sigblock { position: absolute; left: 8.5%; right: 8.5%; bottom: 5.5%; display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.6em 2.4em; }
.paper .sl { position: relative; border-top: 1px solid #23262A; padding-top: .3em; font-size: .9em; color: #4A4840; }
.paper .ink { position: absolute; left: -2%; bottom: 100%; width: 110%; height: 3.6em; overflow: visible; }
.paper .date, .paper .wit { position: absolute; left: 4%; bottom: 104%; color: #1C2F6B; line-height: 1; clip-path: inset(0 100% 0 0); white-space: nowrap; }
.paper .date { font-family: "Caveat", cursive; font-size: 2.2em; }
.paper .wit { font-family: "Mrs Saint Delafield", cursive; font-size: 2.8em; }
.seal { position: absolute; z-index: 3; right: 5%; bottom: 25%; width: 24%; aspect-ratio: 1; opacity: 0; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.18)); }
.folder { position: absolute; z-index: 1; width: min(38rem, 90vw, 82vh); aspect-ratio: 1.32; opacity: 0; }
.folder .back, .folder .front { position: absolute; inset: 0; border-radius: .6rem; }
.folder .back { background: #C9A46A; box-shadow: 0 30px 60px -25px rgba(0,0,0,.7); }
.folder .back::before { content: ""; position: absolute; left: 6%; top: -7%; width: 32%; height: 9%; background: #C9A46A; border-radius: .5rem .5rem 0 0; }
.folder .front { z-index: 4; background: linear-gradient(180deg, #DDBE84, #CDAB6F); transform-origin: 50% 100%; box-shadow: 0 -2px 0 rgba(255,255,255,.25) inset, 0 -10px 30px -12px rgba(0,0,0,.4); display: grid; place-items: center; }
.folder .label { background: #FBF8F0; padding: .7em 1.2em; font-family: var(--mono); font-size: clamp(.6rem, 1.4vh, .82rem); letter-spacing: .16em; color: #3A3428; box-shadow: 0 1px 2px rgba(0,0,0,.2); rotate: -1deg; }
.porch { position: absolute; inset: 0; z-index: 5; opacity: 0; background: #2A1E16 center / cover no-repeat; }
.porch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,10,7,.62), rgba(14,10,7,.15) 50%, transparent 70%), linear-gradient(0deg, rgba(14,10,7,.55), transparent 35%); }
.sign .hero-copy { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); top: clamp(6.5rem, 15vh, 9.5rem); color: var(--limestone); max-width: 46rem; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.sign .hero-copy .lead { color: rgba(244,239,229,.88); margin-top: 1.3rem; }
.sign .hero-copy .acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.sign .caps { position: absolute; z-index: 6; left: var(--gutter); top: clamp(6.5rem, 15vh, 9rem); width: min(24rem, 28vw); color: var(--limestone); }
.sign .cap { position: absolute; inset: 0 0 auto 0; opacity: 0; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.sign .cap .spec { color: var(--sunset-soft); }
.sign .cap h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); margin-top: .6rem; }
.sign .cap p { margin-top: .7rem; opacity: .9; }
.sign .hud { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(4.2rem, 9vh, 5.5rem); color: var(--limestone); display: grid; gap: .5rem; justify-items: end; text-align: right; background: rgba(18,14,11,.55); backdrop-filter: blur(10px); padding: 1.1rem 1.3rem; border-radius: 1.2rem; }
.sign .hud .big { font-variant-numeric: lining-nums tabular-nums; font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; }
.sign .hud ul { list-style: none; display: grid; gap: .25rem; }
.sign .hud li { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; opacity: .5; transition: opacity .4s; }
.sign .hud li i { width: .95rem; height: .95rem; border: 1.5px solid currentColor; border-radius: 3px; display: grid; place-items: center; font-style: normal; font-size: .7rem; }
.sign .hud li.on { opacity: 1; }
.sign .hud li.on i::after { content: "✓"; color: var(--sunset-soft); }
@media (max-width: 900px) {
  .sign { height: 560vh; }
  .sign .caps { top: auto; bottom: clamp(11rem, 24vh, 13.5rem); width: auto; right: var(--gutter); }
  .sign .cap h3 { font-size: 1.8rem; } .sign .cap p { font-size: .95rem; }
  .sign .hud { display: none; }
  .sign .caps { bottom: clamp(4.5rem, 10vh, 6rem); }
  .cam { place-items: start center; padding-top: 6.2rem; }
  .paper { width: min(80vw, 46vh); font-size: clamp(.3rem, 1.6vw, .5rem); }
  .sign .stage::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(0deg, rgba(10,7,5,.9), rgba(10,7,5,.45) 42%, transparent 58%); }
}

/* services / plans */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }
.svc article { background: var(--paper); border: 1px solid var(--line); border-radius: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .8rem; align-content: start; }
.svc article svg { width: 3rem; height: 3rem; color: var(--sunset); }
.svc h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.svc dl { display: grid; gap: .6rem; margin-top: .4rem; }
.svc dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oak); }
.svc dd { color: var(--muted); }
.quiz { display: grid; gap: 1.4rem; }
.q { display: grid; gap: .6rem; }
.q > span { font-weight: 700; }
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
@media (max-width: 960px) { .pkgs { grid-template-columns: 1fr; } }
.pkg { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 1.4rem; padding: 1.6rem; display: grid; gap: .7rem; align-content: start; transition: border-color .4s, box-shadow .5s var(--ease), translate .5s var(--ease); }
.pkg.rec { border-color: var(--sunset); box-shadow: 0 30px 60px -36px rgba(142,59,46,.6); translate: 0 -6px; }
.pkg .badge { position: absolute; top: -.8rem; left: 1.4rem; background: var(--sunset); color: #fff; border-radius: 999px; padding: .2rem .7rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; opacity: 0; transition: opacity .4s; }
.pkg.rec .badge { opacity: 1; }
.pkg .fee { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.pkg ul { list-style: none; display: grid; gap: .35rem; color: var(--muted); font-size: .95rem; }
.pkg li::before { content: "✓  "; color: var(--oak); font-weight: 700; }
.why { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 1rem; background: var(--oak-soft); color: var(--oak); font-weight: 600; }

.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; } }

/* ───── HOME: the pen that travels with you ───── */
body.lettered { background-color: var(--limestone); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-ink] { fill: none; stroke: #1C2F6B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pen { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform, filter; }
/* the pen travels behind the words: text sits on a higher layer, the paper of the will below the pen */
body.lettered :is(main, .ftr) :is(h1, h2, h3, p, li, dt, dd, b, a, .btn, .spec, .lead, .n):not(.will *) { position: relative; z-index: 3; }
body.lettered .desk-copy { position: relative; z-index: 3; }
/* revealed blocks keep a transform (their own layer), so they sit above the pen as a whole */
body.lettered :is(main, .ftr) :is([data-load], [data-reveal]):not(.will *) { position: relative; z-index: 3; }
body.lettered .will { z-index: 1; }
.pen svg { display: block; width: 100%; height: auto; }
.mark { position: relative; display: inline-block; }
.mark svg { position: absolute; left: -2%; right: -2%; width: 104%; bottom: -.08em; height: .2em; overflow: visible; }
.mark svg [data-ink] { stroke-width: 3.2; vector-effect: none; }
.letter { padding-top: clamp(8rem, 18vw, 11.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); max-width: 82rem; }
.letter h1 { max-width: 15ch; }
.letter-body { margin-top: 2rem; max-width: 36rem; display: grid; gap: .9rem; font-family: "Libre Caslon Text", Georgia, serif; font-size: clamp(1.02rem, .98rem + .25vw, 1.18rem); color: #3A3D3E; }
.letter-body p:first-child { font-style: italic; }
.sig-line { display: grid; gap: .1rem; width: min(17rem, 80%); margin-top: .4rem; }
.sig-line .sig { width: 100%; height: auto; overflow: visible; }
.sig-line span { border-top: 1px solid var(--ink); padding-top: .35rem; font-family: var(--body); font-size: .85rem; color: var(--muted); }
.letter .acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.scroll-cue { margin-top: 2.4rem; color: var(--muted); }
.checklist { list-style: none; display: grid; gap: 1.6rem; }
.checklist li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.1rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.checklist h3 { font-size: 1.9rem; }
.checklist p { color: var(--muted); margin-top: .2rem; }
.box { width: 2.2rem; height: 2.2rem; border: 1.8px solid var(--ink); border-radius: .35rem; margin-top: .3rem; position: relative; }
.box svg { position: absolute; left: -10%; top: -30%; width: 130%; height: 130%; overflow: visible; }
.box svg [data-ink] { stroke-width: 2.6; }
.circled { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.6rem; }
@media (max-width: 900px) { .circled { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .circled { grid-template-columns: 1fr; } }
.circled .n { position: relative; display: inline-grid; place-items: center; width: 3.6rem; height: 2.8rem; font-family: var(--display); font-size: 2.3rem; color: var(--sunset); }
.circled .n svg { position: absolute; inset: -12% -14%; width: 128%; height: 124%; overflow: visible; }
.circled h3 { font-size: 1.6rem; margin-top: .6rem; }
.circled p { color: var(--muted); margin-top: .4rem; }
.desk-band { background: #2A1E16 center / cover no-repeat; margin-block: clamp(4rem, 9vw, 7rem); }
.desk-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .desk-grid { grid-template-columns: 1fr; } }
.desk-copy { background: rgba(14,10,7,.66); backdrop-filter: blur(6px); border-radius: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); }
.will { position: relative; background: #FBF8F0; color: #23262A; padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem); border-radius: 2px; rotate: -1.2deg; font-family: "Libre Caslon Text", Georgia, serif; font-size: clamp(.78rem, .72rem + .2vw, .9rem); line-height: 1.6; box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 40px 70px -24px rgba(0,0,0,.7), 0 10px 22px -10px rgba(0,0,0,.5); }
.will .doc-h { text-align: center; font-size: 1.45em; letter-spacing: .14em; font-weight: 700; }
.will .doc-s { text-align: center; font-style: italic; margin-top: .25em; }
.will .doc-c { text-align: center; font-size: .78em; letter-spacing: .2em; margin-top: .3em; color: #6A665E; }
.will .art { margin-top: 1em; text-align: justify; }
.will .art b { display: block; letter-spacing: .12em; font-size: .85em; margin-bottom: .15em; }
.sigrow { display: grid; grid-template-columns: 1.3fr .8fr; gap: 2rem; margin-top: 2.4em; }
.sigrow .sl { border-top: 1px solid #23262A; padding-top: .3em; font-size: .82em; color: #4A4840; position: relative; }
.sigrow .sig { position: absolute; left: 0; bottom: calc(100% - .2em); width: 100%; height: auto; overflow: visible; }
.sigrow .sig.date { width: 80%; }
.stamp { position: absolute; right: 7%; bottom: 22%; width: 24%; aspect-ratio: 1; opacity: 0; pointer-events: none; }
.will .sample { position: absolute; left: 1.4rem; bottom: .55rem; font-size: .7rem; } /* colour set below, after the on-ink rules */
.arrow-row { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; }
.arrow-row .arrow { width: clamp(6rem, 12vw, 9rem); height: auto; overflow: visible; }
.arrow-row [data-ink] { stroke: var(--sunset-soft); stroke-width: 2.6; }
.closing .sig-line { margin-top: 2rem; width: min(20rem, 80%); }

.guide { stroke: transparent !important; }
.stats b, .pkg .fee, .est .range { font-variant-numeric: lining-nums tabular-nums; }

/* a soft paper-coloured halo keeps every word crisp where the pen passes behind it */
body.lettered :is(main, .ftr) :is(h1, h2, h3, p, li, dt, dd, b, .spec, .lead, .n) { text-shadow: 0 0 .32em var(--limestone), 0 0 .12em var(--limestone); }
body.lettered :is(.band, .ftr) :is(h1, h2, h3, p, li, b, .spec, .lead) { text-shadow: 0 0 .32em var(--ink), 0 0 .12em var(--ink); }
body.lettered .lp-band :is(h1, h2, h3, p, li, .spec, .n) { text-shadow: 0 0 .32em var(--oak-soft), 0 0 .12em var(--oak-soft); }
body.lettered :is(.desk-copy, .btn, .will) * { text-shadow: none !important; }
body.lettered main .btn.ghost { --b: var(--limestone); }
body.lettered .band .btn.ghost { --b: var(--ink); }

/* ───── HOME v3: the big pen signs, the ink thread builds the page ───── */
.ink-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(8rem, 16vw, 11rem); padding-bottom: clamp(3rem, 7vw, 6rem); min-height: 88vh; }
.ink-hero-copy .acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-sign { position: relative; z-index: 4; padding-top: clamp(4rem, 9vw, 8rem); }
.hero-sig { display: block; width: 100%; height: auto; overflow: visible; }
.hero-sig path { fill: none; stroke: #1C2F6B; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sig-cap { display: block; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--ink); width: 70%; color: var(--muted); }
.big-pen { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; will-change: transform, filter; }
.big-pen svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .ink-hero { grid-template-columns: 1fr; min-height: auto; } .hero-sign { padding-top: 5rem; width: 92%; } }
.thread { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.thread .ink { fill: none; stroke: #1C2F6B; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.thread .halo { fill: none; stroke: #F4EFE5; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.thread .nib { fill: #1C2F6B; filter: drop-shadow(0 0 4px rgba(28,47,107,.55)); transition: opacity .3s; }
body.lettered .box { border: 0; width: 2.1rem; height: 2.1rem; }
body.lettered .will { rotate: 0deg; }
body.lettered .sigrow { margin-top: 3.4em; }
.will .stamp { opacity: 0; scale: 1.5; rotate: -22deg; transition: opacity .25s ease-in, scale .3s cubic-bezier(.5,0,.75,0), rotate .3s; }
.will .stamp.on { opacity: .9; scale: 1; rotate: -8deg; }
.will .date { position: absolute; left: 4%; bottom: 104%; font-family: "Caveat", cursive; font-size: 1.7em; color: #1C2F6B; line-height: 1; clip-path: inset(0 100% 0 0); transition: clip-path .9s ease-out .15s; white-space: nowrap; }
.will .date.on { clip-path: inset(0 0% 0 0); }
.arrow-row { display: flex; align-items: center; gap: .4rem; margin-top: 2rem; }
.arrow-gap { display: block; width: clamp(5.5rem, 11vw, 8.5rem); height: 3.4rem; }
.closing .sig-line { margin-top: 1.6rem; width: min(22rem, 82%); display: grid; }
.sig-space { display: block; height: 5.2rem; }

body.lettered main { overflow-x: clip; }

.hero-sig { width: 66%; }
@media (max-width: 900px) { .hero-sig { width: 58%; } }

/* ───── HOME v4: ink spills that open each chapter (full-motion-web §1ב) ───── */
:root { --inkc: #16244A; }
body.inked { background: var(--limestone); }
/* base (no JS / reduced motion): chapters simply stack */
.spill { position: relative; }
.spill .stain, .spill .drop { display: none; }
.spill .over { padding-block: clamp(4rem, 9vw, 7rem); }
.spill .over.on-ink { background: var(--inkc); }
.spill-3 .over.on-ink { background: #2A1E16 url("img/desk-1920.jpg") center / cover; }
.over.on-ink { color: var(--limestone); }
.over.on-ink .spec, .over.on-ink em { color: var(--sunset-soft); }
.over.on-paper { color: var(--inkc); }
.over.on-paper .spec { color: var(--sunset); }
.over h2 { margin-top: 1rem; max-width: 18ch; }
.spill-1 .ink-hero { min-height: 0; }
/* with JS: each spill is a sticky stage that the scroll plays */
.js .spill { height: 240vh; }
.js .spill-1 { height: 260vh; }
.js .spill-3 { height: 340vh; }
.js .spill .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js .spill .under { position: absolute; inset: 0; z-index: 1; background: var(--limestone); display: flex; align-items: center; } /* its own layer, so nothing in it rises above the ink */
.js .spill .stain { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.js .spill .over { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 0; background: none; opacity: 0; pointer-events: none; -webkit-mask-image: var(--m, none); mask-image: var(--m, none); }
.js .spill .over a { pointer-events: auto; }
.js .spill .drop { display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: radial-gradient(circle at 34% 30%, #5B6FA8, var(--inkc) 58%); opacity: 0; pointer-events: none; will-change: transform; box-shadow: calc(var(--sh, 0) * 16px) calc(var(--sh, 0) * 24px) calc(3px + var(--sh, 0) * 10px) rgba(0,0,0,.28); }
.js .spill .big-pen { z-index: 5; }
.js .spill.no-gl .stain { display: block; }
/* reduced motion: back to the stacked chapters */
.js .spill.static { height: auto; }
.js .spill.static .stage { position: relative; height: auto; overflow: visible; }
.js .spill.static .under { position: relative; }
.js .spill.static .stain, .js .spill.static .drop { display: none; }
.js .spill.static .over { position: relative; opacity: 1; -webkit-mask-image: none; mask-image: none; padding-block: clamp(4rem, 9vw, 7rem); }
.js .spill.static .over.on-ink { background: var(--inkc); }
.js .spill-3.static .over.on-ink { background: #2A1E16 url("img/desk-1920.jpg") center / cover; }
.js .spill-1 .under .ink-hero { padding-top: 5rem; padding-bottom: 0; }

/* the chapters that follow each spill */
.ink-chapter { background: var(--inkc); color: var(--limestone); padding-block: clamp(1rem, 3vw, 2rem) clamp(5rem, 10vw, 8rem); margin-top: -1px; }
.ink-chapter .lead { color: rgba(244,239,229,.78); }
.ink-chapter .inline { color: var(--sunset-soft); text-decoration: underline; text-underline-offset: 3px; }
.docs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 3rem; }
.docs li { border-top: 1px solid rgba(244,239,229,.25); padding-top: 1.1rem; }
.docs .no { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--sunset-soft); }
.docs h3 { font-size: 1.9rem; margin-top: .2rem; }
.docs p { color: rgba(244,239,229,.72); margin-top: .5rem; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .docs { grid-template-columns: 1fr; } }
.paper-chapter { padding-block: clamp(1rem, 3vw, 2rem) clamp(5rem, 10vw, 8rem); }
.paper-chapter .circled { margin-top: 1rem; }

/* stage 3: the will on the desk, inside the stain */
.spill-3 .desk-grid { align-items: center; }
.spill-3 .will { opacity: clamp(0, calc(var(--chapter, 0) * 4), 1); translate: 0 calc((1 - clamp(0, calc(var(--chapter, 0) * 4), 1)) * 48px); }
.js .spill-3.static .will { opacity: 1; translate: 0 0; }
.will .sig path { fill: none; stroke: #1C2F6B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.will .sigrow { margin-top: 3.4em; }
.will { rotate: -1deg; }
@media (max-width: 900px) {
  .js .spill-3 .desk-copy { padding: 1rem 1.2rem; }
  .js .spill-3 .desk-copy .lead { display: none; }
  .js .spill-3 .desk-copy h2 { font-size: 2rem; }
  .js .spill-3 .will { font-size: .75rem; padding: 1.4rem 1.3rem 1.7rem; }
  .js .spill-3 .desk-grid { gap: 1rem; padding-top: 4.5rem; }
  .js .spill .over h2.h-xl { font-size: clamp(2.6rem, 11vw, 3.4rem); }
}

/* closing: the last drop dries into the firm's seal */
.closing-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .closing-grid { grid-template-columns: 1fr; } }
.firm-seal { width: min(17rem, 70vw); justify-self: center; overflow: visible; }
.firm-seal .seal-drop, .firm-seal .seal-stain circle { fill: var(--inkc); }
.firm-seal .seal-mark circle { stroke: var(--limestone); }
.firm-seal .seal-mark text { fill: var(--limestone); }
.firm-seal.done .seal-drop { opacity: 0; }

.over.on-ink .lead { color: rgba(244,239,229,.84); }
body.inked .hdr.scrolled { background: color-mix(in srgb, var(--limestone) 96%, transparent); }
body.inked main { overflow-x: clip; }

/* ───── accessibility + conversion pass (Nov 2026) ───── */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 130; left: 1rem; top: .8rem; background: var(--ink); color: var(--limestone); padding: .75rem 1.1rem; border-radius: 999px; font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* one visible focus ring everywhere, terracotta on light grounds and wheat on dark ones */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ftr, .ink-chapter, .over.on-ink, .est, .mobile-menu, .concept, .portrait, .desk-copy, .skip { --focus: var(--sunset-soft); }
.btn:focus-visible { outline-offset: 3px; }
.hdr .brand:focus-visible, .nav a:focus-visible { border-radius: 4px; }
::selection { background: var(--inkc); color: var(--limestone); }

/* the sample will's honesty label stays legible on the paper (it inherited the wheat colour of the ink chapters) */
.will .spec.sample, .over.on-ink .will .spec.sample { color: #6A665E; }
.desk-copy .spec { color: #F1DFC2 !important; }

/* chips are real radio buttons: native keyboard (arrow keys), one tab stop per question */
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--ink); color: var(--limestone); border-color: var(--ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip:hover { border-color: var(--ink); }
.q legend, .fld legend { font-weight: 700; margin-bottom: .6rem; }
.quiz .q { margin: 0; }
.panel h2 { font-size: 1.6rem; }

/* consultation form */
.form .req-note { color: var(--muted); font-size: .88rem; margin-top: -.3rem; }
.form .opt { font-weight: 400; color: var(--muted); }
.form .hint { font-weight: 400; color: var(--muted); font-size: .82rem; }
.form .err { color: var(--sunset); font-weight: 600; font-size: .86rem; display: flex; gap: .4rem; align-items: baseline; }
.form .err::before { content: "!"; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sunset); color: #fff; font-size: .7rem; flex: none; transform: translateY(.1rem); }
.form [aria-invalid="true"] { border-color: var(--sunset); border-width: 2px; }
.form .status { min-height: 0; font-weight: 600; color: var(--sunset); }
.form .status:empty { display: none; }
.form:has(.ok:not([hidden])) .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the panel says it on screen; the live line is for screen readers */
.form .next { color: var(--muted); font-size: .9rem; }
.form .plan-note { background: var(--oak-soft); color: var(--oak); border-radius: .9rem; padding: .7rem 1rem; font-weight: 600; font-size: .92rem; }
.form .ok { color: var(--ink); font-weight: 400; display: grid; gap: .8rem; padding: 1.2rem 1.3rem; border-radius: 1rem; background: var(--oak-soft); }
.form .ok h3:focus { outline: none; }
.form .ok { scroll-margin-top: 7rem; }
.form .ok h3 { font-size: 1.7rem; color: var(--oak); }
.form .ok .demo { font-weight: 700; color: var(--oak); }
.form .fields { display: grid; gap: .9rem; }
.form .fields[hidden] { display: none; }
.form .actions { display: grid; gap: .6rem; justify-items: start; }
.linkbtn { background: none; border: 0; padding: .6rem 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2.75rem; }

/* CTAs at the decision points */
.chapter-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.ink-chapter .btn.ghost { --f: var(--limestone); }
.next-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.next-cta p { color: var(--muted); max-width: 34rem; }
.text-link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 2.75rem; }
.pkg .go { margin-top: .4rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; }
.pkg h3.spec { font-weight: 400; line-height: 1.6; }
.est h2.spec { font-weight: 400; line-height: 1.6; }

/* footer placeholders instead of dead links */
.ftr .cols .ph { opacity: .85; padding-block: .15rem; }
.ftr .cols .ph-why { font-size: .8rem; opacity: .75; margin-top: .4rem; max-width: 16rem; }

/* phones: the sticky "Book" button sits above the concept ribbon, in thumb reach */
.mcta { --b: var(--sunset); --f: #fff; position: fixed; z-index: 79; left: 1rem; right: 1rem; bottom: calc(.9rem + 2.2rem + .6rem); min-height: 3rem; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); visibility: hidden; opacity: 0; transform: translateY(1rem); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.mcta.show { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
@media (min-width: 861px) { .mcta { display: none; } }
html.menu-open .mcta { visibility: hidden; }
.form .chip { display: inline-flex; gap: 0; font-weight: 600; font-size: .9rem; }
.form .chip input { min-height: 0; padding: 0; border: 0; border-radius: inherit; }
.hero-note { margin-top: .9rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .hero-note { display: none; } } /* on phones the resting pen sits right there */