/* Inlet & Oak — site styles. One display face (system Palatino/Iowan stack),
   one body face (system sans), one mono for spec labels. One accent (terracotta, --rust) for actions only. */
@font-face{font-family:"Gloock";src:url(/fonts/gloock-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric-matched fallbacks: size-adjust = mean advance-width ratio on real site copy, measured in Chrome
   (Gloock/Georgia 1.021, Nunito Sans/Arial 1.004 regular, 0.971 bold); ascent/descent from canvas font metrics. */
@font-face{font-family:"Gloock Fallback";src:local("Georgia");size-adjust:102.1%;ascent-override:96%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:100.4%;ascent-override:100.6%;descent-override:34.9%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold");size-adjust:97.1%;ascent-override:104%;descent-override:36%;line-gap-override:0%}
:root{
  /* Palette: beach-sunset reference (peach sky, turquoise surf, sand). Sampled swatches, light to dark:
     Butter #F7F8CE · Peach #F8C99D · Sand #CFA170 · Sage-slate #6D7665 · Seafoam #80B4A7 · Mist #B8D4D5.
     Swatches are soft, so they are grounds, tints and accents. Text, buttons and the dark band use deeper
     shades derived from the same hues (HSL noted). Ratios: tools/check_contrast.py, listed in README "Palette". */
  /* Raw swatches */
  --butter:#F7F8CE;   /* Butter swatch, used as-is: highlight pill */
  --peach:#F8C99D;    /* Peach swatch, used as-is: warm pills, accents on the dark band */
  --sand:#CFA170;     /* Sand/tan swatch, used as-is: borders on butter, illustration */
  --sage:#6D7665;     /* Sage-slate swatch, used as-is: decorative only (fails 4.5:1 for small text) */
  --seafoam:#80B4A7;  /* Seafoam swatch, used as-is: accents and dots on the dark band */
  --mist:#B8D4D5;     /* Mist blue swatch, used as-is: sea-glass pills and ticks */
  /* Grounds */
  --paper:#F8F2DE;    /* from Butter #F7F8CE warmed toward Sand: hsl(46 64% 92%). Page ground */
  --paper-2:#F0E1C7;  /* from Sand #CFA170 tint: hsl(38 58% 86%). Alternate sections, nav hover */
  --card:#FDFAEF;     /* from Butter #F7F8CE, near-white: hsl(48 82% 96%). Cards, inputs */
  /* Text and dark band: deep sage-slate */
  --ink:#20261F;      /* from Sage-slate #6D7665 (hsl 92 8% 43%) deepened: hsl(110 10% 13%). Body text, dark band, footer */
  --ink-rgb:32,38,31; /* --ink as rgb for translucent overlays */
  --ink-2:#41483C;    /* from Sage-slate #6D7665 deepened: hsl(95 9% 26%). Secondary text */
  --mute:#555D4F;     /* from Sage-slate #6D7665 deepened: hsl(92 8% 34%). Captions, hints */
  /* Accents */
  --marsh:#205B4C;    /* deep sea-teal from Seafoam #80B4A7 (hsl 165 26% 60%): hsl(164 48% 24%). Links, italic accents, CTA band */
  --marsh-rgb:32,91,76;
  --seaglass:var(--mist); /* sea-glass pill and tick ground = Mist #B8D4D5 */
  --rust:#9A5226;     /* burnt sand / terracotta from Sand #CFA170 (hsl 31 50% 63%): hsl(23 61% 38%). THE primary CTA, used on every page */
  --rust-hi:#7E421F;
  --cta:#D97757;      /* bright clay orange: primary CTA fill, WHITE text. White on it is 3.1:1, which passes AA only
                         as large text, so every CTA label is >= 19px bold (WCAG large = 18.66px bold). Don't shrink CTA labels. */
  --cta-hi:#C6613F;   /* CTA hover: deeper, white text 4.05:1 */  /* from Sand #CFA170, deeper: hsl(22 61% 31%). CTA hover */
  --peach-ink:#5C2D10; /* from Peach #F8C99D (hsl 29 87% 79%) deepened: hsl(23 70% 21%). Text on peach pills */
  --butter-ink:#4A4614; /* from Butter #F7F8CE (hsl 61 75% 89%) deepened: hsl(56 57% 18%). Text on butter pills */
  /* On the dark band (--ink) */
  --on-ink:#F3ECD6;   /* from Butter #F7F8CE, sanded: hsl(45 56% 90%). Body text on dark */
  --on-ink-2:#CDD2C4; /* from Sage-slate #6D7665 lifted: hsl(82 13% 80%). Paragraphs on dark */
  --on-ink-mute:#AAB1A2; /* from Sage-slate #6D7665 lifted: hsl(88 9% 66%). Fine print on dark */
  --on-ink-sea:#93C6B8; /* from Seafoam #80B4A7 lifted: hsl(164 32% 68%). Kickers, italic accents on dark */
  --on-ink-warm:var(--peach); /* Peach #F8C99D: numbers and links that need warmth on dark */
  --on-sea:#DCEBE4;   /* from Mist #B8D4D5 toward Seafoam: hsl(152 27% 89%). Paragraphs on the sea-teal CTA band */
  --line:rgba(var(--ink-rgb),.16); --line-2:rgba(var(--ink-rgb),.28);
  /* Type: Gloock (display, stands in for Canela Bold) + Nunito Sans 400/700 (UI and body, stands in
     for Avenir). Both SIL OFL 1.1, self-hosted latin woff2 in /fonts (see /fonts/OFL.txt). Gloock has one
     weight and no italic, so headings use 400 with font-synthesis off and accents are colour, not italic.
     The "... Fallback" faces are size-adjusted local fonts so the swap doesn't shift layout. */
  --serif:"Gloock","Gloock Fallback",Georgia,serif;
  --sans:"Nunito Sans","Nunito Sans Fallback",Arial,sans-serif;
  --mono:var(--sans); /* labels/kickers were system mono; now Nunito Sans everywhere */
  --r:14px; --wrap:1200px; --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;font-synthesis:none;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--marsh);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em;margin:0 0 .4em;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.005em}
h1 em,h2 em{font-style:normal;color:var(--marsh);font-weight:400}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{font:700 12.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--marsh);margin:0 0 14px;display:flex;gap:10px;align-items:center}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);max-width:40em}
.muted{color:var(--mute)}
.small{font-size:.88rem}

/* Buttons: rust = the action; outline = secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;font:700 1rem/1 var(--sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.btn svg{width:19px;height:19px;flex:none}
.btn-act{background:var(--cta);color:#fff}
.btn.btn-act{font-size:1.1875rem}
.btn-act:hover{background:var(--cta-hi);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{color:var(--ink);background:var(--card);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:42px;padding:0 16px;font-size:.93rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Header */
.top{background:var(--ink);color:var(--on-ink);font:400 13px/1.2 var(--mono);letter-spacing:.04em}
.top .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.top a{color:#fff;text-decoration:none}
.top a:hover{text-decoration:underline}
.top .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--seafoam);margin-right:8px;vertical-align:1px}
/* No backdrop blur: re-blurring the page under a sticky header on every scroll frame is costly on large/retina screens. */
.hdr{position:sticky;top:0;z-index:40;background:rgb(248,242,222);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand svg{width:52px;height:52px;flex:none}
.brand b{font:400 1.45rem/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.brand b i{color:inherit;font-weight:400;font-style:normal}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.93rem;padding:9px 9px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{background:var(--paper-2)}
.hdr-call{font:700 .92rem/1 var(--mono);color:var(--ink);text-decoration:none;padding:10px 6px;white-space:nowrap}
@media (max-width:1460px) and (min-width:1121px){.hdr-call{display:none}}
@media (max-width:720px){.hdr-call{display:none}}
.hdr-quick{display:none}
/* Mobile header: brand mark on the left, one labelled Call action and the menu on the right.
   Text and Instant quote live in the bottom bar (and the menu), so the header does not repeat them. */
@media (max-width:720px){.hdr-quick{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 16px 0 13px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;font:700 1rem/1 var(--sans);white-space:nowrap}
.hdr-quick svg{width:19px;height:19px;flex:none}
/* Call/Text links inherit the pill's light text (was link teal on --ink: Lighthouse contrast fail). */
.hdr-quick a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;min-height:46px}
@media (max-width:720px){.hdr-quick{gap:9px;padding:0 10px;font-size:.95rem}.hdr-quick svg{width:17px;height:17px}}
.hdr .wrap{gap:8px}.brand{gap:7px}.brand svg{width:34px;height:34px}.brand b{font-size:1.3rem}.menu summary{min-height:46px;padding:0 10px}}
@media (max-width:400px){.brand svg{width:32px;height:32px}.brand b{font-size:1.14rem}.hdr .wrap{gap:6px}}
@media (max-width:370px){.brand b{font-size:1.02rem}}
@media (max-width:359px){.hdr .wrap{gap:6px}.brand b{font-size:1.12rem}.hdr-quick{padding:0 12px}}
@media (max-width:339px){.hdr .brand b{display:none}}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:grid;place-items:center;border:1.5px solid var(--line-2);border-radius:12px;padding:0 14px;font-weight:700}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--paper)}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 18px;display:grid;gap:2px;box-shadow:0 20px 30px -20px rgba(0,0,0,.25)}
.menu nav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem}
.menu nav .grp{font:700 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:16px 4px 6px}
@media (max-width:1120px){.nav{display:none}.menu{display:block}}
@media (max-width:720px){.top{display:none}.hdr .btn-act{display:none}.hdr .wrap{min-height:62px}}

/* Hero */
.hero{position:relative;padding:clamp(20px,4vw,56px) 0 clamp(28px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
.hero-media{position:sticky;top:96px}
.hero h1{margin-bottom:.34em}
.hero .lede{margin-bottom:24px}
.hero-photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:16/11}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption,.tag{position:absolute;left:12px;bottom:12px;background:rgba(var(--ink-rgb),.84);color:#fff;font:400 12.5px/1.35 var(--mono);padding:8px 11px;border-radius:9px;max-width:calc(100% - 24px)}
.quick{margin:22px 0 0;padding:16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card)}
.quick p{margin:0 0 10px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:.94rem;cursor:pointer}
.chip:hover,.chip[aria-pressed=true],.chip.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.chip small{font:400 11px/1 var(--mono);opacity:.8;letter-spacing:.04em}
.next-line{margin:12px 0 0;font-size:.9rem;color:var(--ink-2)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-media{order:-1;position:static}
}

/* Sections */
section{padding:clamp(48px,8vw,104px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 56px;align-items:end;margin-bottom:clamp(26px,4vw,44px)}
.sec-head p{margin:0;color:var(--ink-2)}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}
.band{background:var(--paper-2)}
.ink{background:var(--ink);color:var(--on-ink)}
.ink h2,.ink h3{color:#fff}
.ink h2 em,.ink h1 em{color:var(--on-ink-sea)}
.ink .kicker{color:var(--on-ink-sea)}
.ink a{color:#fff}
.ink .lede,.ink p{color:var(--on-ink-2)}
.rule{height:14px;border:0;margin:0;background:
  repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 12px) bottom/100% 6px no-repeat,
  repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 60px) bottom/100% 14px no-repeat;border-bottom:1px solid var(--line-2)}

/* Proof strip */
.proof{padding:0 0 clamp(36px,6vw,72px)}
.reviews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.review{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px}
.review blockquote{margin:0;font:400 1.04rem/1.55 var(--sans);color:var(--ink)}
.review blockquote::before{content:"\201C";font:400 2.6rem/0 var(--serif);color:var(--rust);display:block;height:18px;margin-top:10px}
.review figcaption{margin-top:auto;font-size:.88rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:11px}
.review figcaption b{color:var(--ink);display:block}
.review figcaption a{font-size:.85rem}
.stars{color:var(--rust);letter-spacing:2px;font-size:.95rem}
@media (max-width:1000px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.reviews{grid-template-columns:1fr}}
.proof-note{margin:14px 0 0;font-size:.86rem;color:var(--mute)}

/* Promise grid */
.promises{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.promise{padding:24px 20px 22px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column}
.promise .n{font:700 12px/1 var(--mono);color:var(--rust);letter-spacing:.1em}
.promise h3{margin:12px 0 10px;font-size:1.28rem}
.promise p{font-size:.95rem;color:var(--ink-2)}
.promise .stat{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);font-size:.82rem;color:var(--mute)}
.promise .stat b{display:block;font:400 1.6rem/1.1 var(--serif);color:var(--ink);margin-bottom:4px}
.ink .promises,.ink .promise{border-color:rgba(255,255,255,.18)}
.ink .promise p{color:var(--on-ink-2)}.ink .promise .stat{color:var(--on-ink-mute);border-color:rgba(255,255,255,.22)}.ink .promise .stat b{color:#fff}
.ink .promise .n{color:var(--on-ink-warm)}
.promise .proof-link{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);font-size:.9rem;font-weight:700}
.promise .proof-link a,.linkish{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:24px;text-align:left}
.ink .promise .proof-link{border-color:rgba(255,255,255,.22)}.ink .promise .proof-link a,.ink .linkish{color:#fff}
.own-stat{display:block;margin-bottom:6px;font-weight:400;color:inherit}.own-stat b{font:400 1.4rem/1.1 var(--serif);margin-right:4px}
.own-stats{display:flex;flex-wrap:wrap;gap:12px 32px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2)}
.own-stats div{font-size:.95rem;color:var(--ink-2)}.own-stats b{display:block;font:400 1.8rem/1.1 var(--serif);color:var(--ink)}
@media (max-width:1080px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.promises{grid-template-columns:1fr}}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.card .ph{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden;position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0}
.card p{margin:0;color:var(--ink-2);font-size:.96rem}
.card .go{margin-top:auto;padding-top:10px;font-weight:700;color:var(--rust)}
.pill{display:inline-block;font:700 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--seaglass);color:var(--ink);align-self:flex-start}
.pill.only{background:var(--peach);color:var(--peach-ink)}
.card .from{font:700 .9rem/1.3 var(--mono);color:var(--ink)}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards,.cards.two{grid-template-columns:1fr}}

/* Before / after */
.ba{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2);user-select:none;--pos:50%;touch-action:pan-y}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320261F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba input:focus-visible+.handle::after{outline:3px solid var(--rust);outline-offset:2px}
.ba .lab,.photo .lab{position:absolute;top:12px;font:700 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(var(--ink-rgb),.84);color:#fff;padding:7px 9px;border-radius:7px;pointer-events:none}
.ba .lab.l{left:12px}.ba .lab.r{right:12px}
.ba-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start}
.ba-grid.even{grid-template-columns:1fr 1fr}
.ba-grid figure{margin:0}
.ba-grid figcaption{margin-top:10px;font-size:.92rem;color:var(--ink-2)}
@media (max-width:820px){.ba-grid{grid-template-columns:1fr}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .n{font:700 13px/1 var(--mono);color:var(--rust);letter-spacing:.1em}
.step h3{margin:10px 0 8px}
.step p{color:var(--ink-2);margin:0}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Split layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.split.mid{align-items:center}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2);position:relative}
.photo img{width:100%;height:auto}
.photo figcaption{font-size:.88rem;color:var(--ink-2);padding:10px 2px 0;background:var(--paper)}
.ticks{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--seaglass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320261F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks.no li::before{background:var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2D10' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,28px)}
.box h3{margin-top:0}
.price-anchor{border:1.5px solid var(--ink);border-radius:var(--r);padding:20px;background:var(--card)}
.price-anchor .big{font:400 clamp(1.7rem,3.6vw,2.4rem)/1.1 var(--serif);margin:4px 0 6px}
.price-anchor .src{font-size:.82rem;color:var(--mute);margin:8px 0 14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pair .photo{background:none}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery figure{margin:0}
.gallery .ph{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.gallery .ph img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:.86rem;color:var(--ink-2);margin-top:8px}
.gallery .step-no{font:700 11.5px/1 var(--mono);color:var(--rust);letter-spacing:.08em;display:block;margin-bottom:4px}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font:400 1.15rem/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font:400 1.7rem/1 var(--sans);color:var(--rust)}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 20px;color:var(--ink-2);max-width:46em}
.faq .a p:last-child{margin:0}

/* Market band */
.markets{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.market{border-radius:var(--r);overflow:hidden;position:relative;min-height:340px;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background:var(--ink)}
.market img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.market .in{position:relative;padding:24px;background:linear-gradient(transparent,rgba(16,20,15,.88) 40%);width:100%}
.market h3{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 6px}
.market p{margin:0 0 6px;color:var(--on-ink)}
.market .go{font-weight:700;color:#fff}
.market:hover{color:#fff}.market:hover img{opacity:.85}
@media (max-width:760px){.markets{grid-template-columns:1fr}.market{min-height:280px}}

/* CTA band */
.cta{background:var(--marsh);color:#fff;border-radius:calc(var(--r) + 6px);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px);pointer-events:none}
.cta h2{color:#fff;margin:0 0 8px}
.cta p{color:var(--on-sea);margin:0}
.cta .btn-row{justify-content:flex-end;position:relative;z-index:1}
.cta .btn-line{border-color:#fff;color:#fff}
.cta .btn-line:hover{background:#fff;color:var(--ink)}
@media (max-width:820px){.cta{grid-template-columns:1fr}.cta .btn-row{justify-content:flex-start}}

/* Page hero (inner pages) */
.phero{padding:clamp(22px,4vw,52px) 0 clamp(30px,5vw,60px)}
.crumbs{font:400 12.5px/1.4 var(--mono);color:var(--mute);margin:0 0 16px}
.crumbs a{color:var(--mute)}
.notice{border-left:3px solid var(--rust);background:var(--card);padding:14px 16px;border-radius:0 10px 10px 0;font-size:.95rem;color:var(--ink-2)}
.notice b{color:var(--ink)}
.cite{font-size:.8rem;color:var(--mute)}
.cite a{color:var(--mute)}
.ink .cite,.ink .cite a{color:var(--on-ink-mute)}

/* Footer */
.ftr{background:var(--ink);color:var(--on-ink-2);padding:56px 0;font-size:.94rem;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 34px)}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.ftr a{overflow-wrap:anywhere}
.ftr h2{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-sea);margin:0 0 14px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ftr .brand{color:#fff;margin-bottom:12px}
.ftr .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:18px;font-size:.82rem;color:var(--on-ink-mute);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
@media (max-width:860px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-grid>div:first-child{grid-column:1/-1}}
.ftr a[data-email]{overflow-wrap:anywhere}
@media (max-width:480px){.ftr-grid>div:last-child{grid-column:1/-1}}

/* Mobile action bar */
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:1.35fr .8fr 1.35fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(var(--ink-rgb),.97);box-shadow:0 -10px 24px rgba(0,0,0,.18)}
.actbar a,.actbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;font:700 .84rem/1 var(--sans);text-decoration:none;color:#fff;background:rgba(255,255,255,.1);border:0;cursor:pointer}
.actbar svg{width:20px;height:20px}
.actbar .c small{font:700 .72rem/1 var(--sans);letter-spacing:.01em;opacity:.88;white-space:nowrap}
.actbar .q{background:var(--cta);color:#fff;flex-direction:row;gap:8px;font-size:1.1875rem}
.actbar .q{white-space:nowrap;padding:0 8px}
@media (max-width:420px){.actbar .q svg{display:none}.actbar{grid-template-columns:1fr .8fr 1.6fr}}
/* The bar is pinned to the viewport bottom and its height is reserved on <body>, so the last
   thing on any page always scrolls clear of it. While a form it would cover (the quote stepper,
   the quote result, the contact form) or the hero's own Call/Text/quote block is on screen
   ([data-actbar-yield]), or the keyboard is up, it slides away, so it never sits on top of the
   buttons it duplicates. Call stays one tap away in the header (.hdr-quick). */
:root{--actbar-h:calc(74px + env(safe-area-inset-bottom))}
.actbar{transition:transform .2s ease,visibility .2s}
.actbar.away{transform:translateY(110%);visibility:hidden}
@media (prefers-reduced-motion:reduce){.actbar{transition:none}}
@media (max-width:720px){.actbar{display:grid}body{padding-bottom:var(--actbar-h)}html{scroll-padding-bottom:var(--actbar-h)}}

/* Text-us chat entry (placeholder for AI receptionist) */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:10px;padding:0 20px 0 16px;min-height:56px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:700 .98rem/1 var(--sans);cursor:pointer;box-shadow:0 12px 30px rgba(var(--ink-rgb),.35)}
.chat-fab svg{width:22px;height:22px}
.chat-fab .dot{width:9px;height:9px;border-radius:50%;background:var(--seafoam);box-shadow:0 0 0 3px rgba(128,180,167,.3)}
@media (max-width:720px){.chat-fab{display:none}}
.chat{position:fixed;right:22px;bottom:92px;z-index:60;width:min(380px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 24px 60px rgba(var(--ink-rgb),.32);overflow:hidden;display:none}
.chat.open{display:block}
@media (max-width:720px){.chat{right:12px;left:12px;width:auto;bottom:calc(86px + env(safe-area-inset-bottom))}}
.chat-h{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ink);color:#fff}
.chat-h b{font:400 1.05rem/1.1 var(--serif)}
.chat-h span{font-size:.78rem;color:var(--on-ink-2);display:block}
.chat-h button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.chat-b{padding:16px;display:grid;gap:10px;max-height:min(56vh,440px);overflow:auto}
.bub{background:var(--paper-2);border-radius:14px 14px 14px 4px;padding:11px 13px;font-size:.95rem;max-width:90%}
.bub.me{background:var(--marsh);color:#fff;border-radius:14px 14px 4px 14px;justify-self:end}
.chat-b .chips{gap:6px}
.chat-b .chip{min-height:40px;font-size:.88rem;background:var(--card)}
.chat-f{border-top:1px solid var(--line);padding:12px 16px 14px;display:grid;gap:8px}
.chat-f .ph-note{font-size:.76rem;color:var(--mute);margin:0}

/* Forms (quote + contact) */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label,.legend{font-weight:700;font-size:.95rem}
.field input,.field select,.field textarea{font:inherit;font-size:16px;min-height:50px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(var(--marsh-rgb),.25)}
.hint{font-size:.84rem;color:var(--mute)}

/* Instant quote */
.q-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:920px){.q-wrap{grid-template-columns:1fr}}
/* Proof strip above the stepper: our own photos, owner name, and (once real) rating + license */
.q-proof{display:flex;gap:14px;align-items:center;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.q-proof-ph{display:flex;flex:none}
.q-proof-ph img{width:52px;height:52px;object-fit:cover;border-radius:12px;border:2px solid var(--card)}
.q-proof-ph img+img{margin-left:-14px}
.q-proof-t{min-width:0;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.q-proof-t p{margin:0}
.q-proof-t b{color:var(--ink)}
.q-proof-facts{margin-top:4px!important;display:flex;flex-wrap:wrap;gap:4px 14px;font-weight:700;color:var(--ink)}
.q-proof-q{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);font-size:1rem;color:var(--ink)}
.q-proof-q footer{font:400 .8rem/1.3 var(--sans);color:var(--mute);margin-top:2px}
@media (max-width:720px){.q-proof-q{display:none}.q-proof{padding:10px 12px;gap:12px}.q-proof-ph img{width:46px;height:46px}}
.q-card{background:var(--card);border:1px solid var(--line-2);border-radius:20px;padding:clamp(18px,3.2vw,32px)}
.q-prog{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.q-prog li{flex:1;height:5px;border-radius:5px;background:var(--paper-2)}
.q-prog li.done{background:var(--marsh)}
.q-prog li.cur{background:var(--rust)}
.q-step{border:0;margin:0;padding:0;min-width:0}
.q-step legend{font:400 clamp(1.4rem,2.6vw,1.85rem)/1.15 var(--serif);margin:0 0 6px;padding:0}
.q-step .sub{color:var(--ink-2);margin:0 0 16px;font-size:.96rem}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.one{grid-template-columns:1fr}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt label{display:flex;flex-direction:column;gap:3px;min-height:64px;justify-content:center;padding:12px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;cursor:pointer;font-weight:700}
.opt label small{font-weight:400;color:var(--mute);font-size:.84rem}
.opt input:checked+label{border-color:var(--ink);background:var(--ink);color:#fff}
.opt input:checked+label small{color:var(--on-ink-2)}
.opt input:focus-visible+label{outline:3px solid var(--rust);outline-offset:2px}
.opt input:disabled+label{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.q-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px;flex-wrap:wrap}
.q-err{color:var(--rust-hi);font-weight:700;font-size:.92rem;margin:10px 0 0;min-height:1.2em}
.q-result{display:none}
.q-result.show{display:block}
.range{font:400 clamp(2.2rem,6vw,3.6rem)/1 var(--serif);letter-spacing:-.02em;margin:6px 0 4px}
.range-tag{display:inline-block;font:700 11.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--peach);color:var(--peach-ink);padding:7px 10px;border-radius:999px}
.breakdown{list-style:none;padding:0;margin:16px 0;border-top:1px solid var(--line)}
.breakdown li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.breakdown li span:last-child{font-family:var(--mono);white-space:nowrap}
.sources{font-size:.82rem;color:var(--mute);padding-left:18px;margin:8px 0 0}
.sources li{margin-bottom:6px}
.previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.previews img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.side-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:.95rem;color:var(--ink-2)}
.side-list b{color:var(--ink);display:block}
.side-list .n{font:700 12px/28px var(--mono);color:#fff;background:var(--marsh);border-radius:50%;width:28px;height:28px;text-align:center}
.ok-msg{display:none;margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--seaglass);font-size:.94rem}
.ok-msg.show{display:block}
.contact-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.contact-big a{display:flex;flex-direction:column;gap:6px;padding:20px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--card);text-decoration:none;color:var(--ink)}
.contact-big a:hover{border-color:var(--ink)}
.contact-big a.prim{background:var(--rust);border-color:var(--rust);color:#fff}  /* tile has small text, so it keeps the deeper rust (white 6.3:1) */
.contact-big svg{width:28px;height:28px}
.contact-big b{font:400 1.2rem/1.2 var(--serif)}
.contact-big span{font-size:.88rem;opacity:.85}
@media (max-width:860px){.contact-big{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.contact-big{grid-template-columns:1fr}}
.status{display:inline-block;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--butter);color:var(--butter-ink);box-shadow:inset 0 0 0 1px var(--sand)}
.proj{padding:clamp(36px,6vw,72px) 0;border-top:1px solid var(--line-2)}
.proj:first-of-type{border-top:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.swipe-hint{display:none;font:700 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 0}
.ink .swipe-hint{color:var(--on-ink-mute)}
/* Phone layout: one big action, two side-by-side; swipeable proof */
@media (max-width:560px){
  .hero .btn-row,.phero .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .btn-row .btn-act,.phero .btn-row .btn-act{grid-column:1/-1}
  .hero .btn-row,.phero .btn-row{grid-template-columns:1.7fr 1fr}
  .btn-row .btn[data-tel]{white-space:nowrap;padding-left:14px;padding-right:14px}
  .reviews,.promises{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut) 6px;gap:12px;scrollbar-width:none;border:0}
  .reviews::-webkit-scrollbar,.promises::-webkit-scrollbar{display:none}
  .review{flex:0 0 86%;scroll-snap-align:center}
  .promise{flex:0 0 86%;scroll-snap-align:center;border:1px solid rgba(255,255,255,.18)!important;border-radius:var(--r)}
  .swipe-hint{display:block}
  section{padding:44px 0}
}
@media (max-width:379px){.hero .btn-row,.phero .btn-row{grid-template-columns:minmax(0,1fr)}.btn-act{white-space:normal;text-align:center;line-height:1.2;max-width:100%}}

/* ===== Home: full-bleed cinematic hero (home page only) =====
   Photo: tools/make_hero.py (crop + golden-hour grade of our own lighting job). No motion except one
   short fade of the copy on load, switched off for prefers-reduced-motion. */
.home .hdr{background:rgba(var(--ink-rgb),.94);border-bottom-color:rgba(255,255,255,.1);transition:background .2s}
.home .hdr.over{background:linear-gradient(rgba(var(--ink-rgb),.55),rgba(var(--ink-rgb),.25))}
.home .hdr .brand,.home .hdr .nav a,.home .hdr .hdr-call{color:#fff}

.home .hdr .nav a:hover,.home .hdr .nav a[aria-current=page]{background:rgba(255,255,255,.14)}
.home .hdr .menu summary{color:#fff;border-color:rgba(255,255,255,.4)}
.home .hdr .menu[open] summary{background:var(--paper);color:var(--ink)}
.home .hdr .hdr-quick{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.xhero{position:relative;margin-top:-71px;min-height:max(640px,calc(100svh - 34px));display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.xhero picture,.xhero-img{position:absolute;inset:0;width:100%;height:100%}
.xhero-img{object-fit:cover;object-position:50% 72%;z-index:-2}
.xhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(14,18,13,.62) 0,rgba(14,18,13,0) 22%),
  linear-gradient(90deg,rgba(14,18,13,.82) 0,rgba(14,18,13,.66) 34%,rgba(14,18,13,.2) 52%,rgba(14,18,13,0) 62%),
  linear-gradient(0deg,rgba(14,18,13,.5) 0,rgba(14,18,13,0) 22%)}
.xhero-in{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-top:150px;padding-bottom:clamp(40px,7vh,84px)}
.xhero-copy{max-width:720px;animation:xfade .7s ease-out both}
.xhero .kicker{color:var(--peach)}
.xhero h1{color:#fff;font-size:clamp(3rem,5.5vw,6rem);line-height:.92;letter-spacing:-.022em;margin:0 0 .26em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.xhero h1 em{color:var(--peach);display:block}
.xhero h1 .nw{white-space:nowrap}
.xhero-svc{margin:0 0 10px;font:700 1rem/1.5 var(--sans);letter-spacing:.02em;color:#fff}
.xhero-svc span{color:var(--peach);padding:0 .2em}
.xhero-lede{margin:0 0 26px;font-size:1.08rem;color:var(--on-ink);max-width:36em}
.xhero .btn-line{border-color:rgba(255,255,255,.85);color:#fff}
.xhero .btn-line:hover{background:#fff;color:var(--ink)}
.xhero .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.xhero .btn-ghost:hover{border-color:#fff;color:#fff}
.xhero-side{flex:none;position:absolute;top:104px;right:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--on-ink)}
.xhero-side .seal{width:150px;height:150px}
@keyframes xfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.xhero-copy{animation:none}.home .hdr{transition:none}}
.quick-under{margin:clamp(18px,3vw,28px) 0 clamp(26px,4vw,40px)}
.quick-under .chips{gap:10px}
.hero-credit{margin:-18px 0 26px;font-size:.8rem;color:var(--mute)}
/* Home: fewer things on the first screen. The utility bar's phone number is the hero's Call button;
   the floating "Text us" waits until the hero has scrolled away (Text stays in the mobile header). */
.home .top{display:none}
@media (min-width:721px){.home .xhero{min-height:max(640px,100svh)}}
.home.at-hero .chat-fab{visibility:hidden;opacity:0}
@media (max-width:720px){
  .xhero{margin-top:-63px;min-height:0;height:auto}
  .xhero picture{bottom:auto;height:440px}
  .xhero-img{object-position:50% 55%}
  .xhero::before{background:linear-gradient(180deg,rgba(14,18,13,.55) 0,rgba(14,18,13,0) 92px,rgba(14,18,13,0) 300px,rgba(32,38,31,.85) 400px,#20261F 440px)}
  .xhero-in{display:block;padding-top:372px;padding-bottom:24px}
  .xhero h1{font-size:clamp(2.2rem,11.4vw,4rem)} /* "from the Triangle" (~7.7em, kept on one line) must fit the column down to 320px */
  .xhero-svc{font-size:.9rem}
  .xhero-lede{font-size:.98rem;margin-bottom:18px}
  .xhero-side{position:absolute;top:76px;right:var(--gut);flex-direction:row;margin:0}
  .xhero-side .seal{display:none}
}

/* Seal in the footer */
.ftr .seal{width:132px;height:132px;color:var(--on-ink-2);display:block;margin:0 0 16px}

/* ===== Secondary pages (service + market): restrained image band, same type system ===== */
.pband{position:relative;min-height:clamp(300px,44vh,460px);display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.pband-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,18,13,.86) 0,rgba(14,18,13,.5) 45%,rgba(14,18,13,.08) 80%),linear-gradient(90deg,rgba(14,18,13,.5) 0,rgba(14,18,13,0) 60%)}
.pband-in{width:100%;padding-top:40px;padding-bottom:clamp(24px,4vw,44px)}
.pband h1{color:#fff;font-size:clamp(2.4rem,5.6vw,5rem);line-height:.98;letter-spacing:-.02em;max-width:15em;margin:0}
.pband h1 em{color:var(--peach)}
.pband .kicker{color:var(--peach)}
.pband .crumbs,.pband .crumbs a{color:var(--on-ink)}
.pband-cap{position:absolute;right:var(--gut);top:16px;margin:0;font:400 12.5px/1.3 var(--sans);color:var(--on-ink);background:rgba(var(--ink-rgb),.6);padding:6px 10px;border-radius:8px}
.phero-under{padding-top:clamp(20px,3vw,32px)}
.phero-body{max-width:760px}
.phero-body .lede{margin-top:12px}
@media (max-width:720px){.pband{min-height:280px}.pband h1{font-size:clamp(2.1rem,9.4vw,2.9rem)}.pband-cap{display:none}}
/* Photo pass 2026-11-11 (see README "Photos"): phone bands show the photo above the heading */
@media (max-width:720px){.pband{min-height:0;padding-top:196px}.pband-img{height:250px;bottom:auto}
  .pband::before{background:linear-gradient(180deg,rgba(14,18,13,.35) 0,rgba(14,18,13,0) 34%,rgba(14,18,13,0) 170px,rgba(32,38,31,.85) 236px,#20261F 252px)}}
@media (max-width:560px){.xhero .btn-row{grid-template-columns:1fr!important}.xhero .btn-row,.phero-under .btn-row{display:grid;grid-template-columns:1.7fr 1fr;gap:10px}.xhero .btn-row .btn-act,.phero-under .btn-row .btn-act{grid-column:1/-1}}
@media (max-width:379px){.xhero .btn-row,.phero-under .btn-row{grid-template-columns:minmax(0,1fr)}}
.photo .lab{left:12px}
.photo.detail{max-width:220px;margin-top:12px;background:none}
.rr-pairs{display:grid;gap:clamp(28px,4vw,44px);margin-top:clamp(32px,5vw,56px);max-width:900px}
.rr-pair h3{margin:0 0 12px;font-size:1.35rem}
@media (min-width:721px){.pband-clear-r::before{background:linear-gradient(90deg,rgba(14,18,13,.82) 0,rgba(14,18,13,.6) 36%,rgba(14,18,13,0) 64%),linear-gradient(0deg,rgba(14,18,13,.55) 0,rgba(14,18,13,0) 40%)}.pband-clear-r h1{max-width:10.5em;text-shadow:0 2px 24px rgba(0,0,0,.4)}}
.band .pair .photo figcaption{background:none}

/* Slow reveal on scroll (site.js §8). Opacity and transform only, so it stays on the compositor and adds no layout shift. */
.rv .rv-i{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s ease-out,transform 1.3s cubic-bezier(.16,.84,.3,1);transition-delay:var(--rv-d,0s)}
.rv .rv-i.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv .rv-i{opacity:1;transform:none;transition:none}}
@media print{.rv .rv-i{opacity:1;transform:none}}