/* Template stylesheet. build.py substitutes the palette block and the two
   @font-face rules below, then writes this file to dist/styles.css. Edit here,
   never in dist/. No JavaScript, no external requests: the only URLs in this
   file point at dist/fonts/, which build.py fills with the two faces a site
   actually uses. */

:root{
  --bg:#ffffff;
  --ink:#0f1e15;
  --ink-2:#47594e;
  --surface:#f4f7f5;
  --line:#d5e1da;
  --line-strong:#a9b6af;
  --brand:#2f6b45;
  --brand-deep:#1d422b;
  --brand-tint:#eaf0ec;
  --brand-ink:#ffffff;
  --foot-bg:#142e1e;
  --foot-ink:#ffffff;
  --foot-dim:rgba(255,255,255,.82);
  --foot-line:rgba(255,255,255,.22);
}


@font-face{font-family:"Petrona";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/petrona.woff2) format("woff2")}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/familjen.woff2) format("woff2")}


/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --font-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the display face, its weight and its tracking are set per look below */
  --font-display:Georgia,"Times New Roman",serif;
  --display-weight:700;
  --display-tracking:-.012em;

  --step--1:.9rem;
  --step-0:1.0625rem;
  --step-1:clamp(1.12rem,.35vw + 1.03rem,1.25rem);
  --step-2:clamp(1.28rem,.85vw + 1.08rem,1.5rem);
  --step-3:clamp(1.5rem,1.7vw + 1.1rem,2rem);
  --step-4:clamp(1.75rem,2.6vw + 1.12rem,2.55rem);
  --step-5:clamp(2.2rem,4.6vw + 1.02rem,3.6rem);

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --section-pad:clamp(var(--s-7),8vw,var(--s-9));

  --r-sm:8px;--r-md:12px;--r-lg:20px;
  --r-btn:12px;--r-input:12px;--r-nav:10px;--r-chip:999px;--r-mark:9px;

  --shadow-1:rgba(22,22,26,.08);
  --shadow-1:color-mix(in srgb,var(--brand-deep) 14%,transparent);
  --shadow-2:rgba(22,22,26,.18);
  --shadow-2:color-mix(in srgb,var(--brand-deep) 28%,transparent);
  --shadow-sm:0 1px 2px var(--shadow-1);
  --shadow-md:0 14px 30px -16px var(--shadow-2),0 3px 8px -5px var(--shadow-1);
}
@media(min-width:1000px){:root{--step-0:1.125rem}}

/* ---------- looks: corner radius ---------- */
[data-btn="pill"]{--r-btn:999px;--r-input:14px;--r-nav:999px;--r-chip:999px;--r-mark:17px}
[data-btn="soft"]{--r-btn:12px;--r-input:12px;--r-nav:10px;--r-chip:999px;--r-mark:9px}
[data-btn="square"]{--r-btn:6px;--r-input:6px;--r-nav:6px;--r-chip:6px;--r-mark:5px}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s-8)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--step-0);line-height:1.65;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
img{max-width:100%;height:auto;display:block}
svg{display:block}
h1,h2,h3,h4{margin:0;line-height:1.16;font-weight:700;letter-spacing:-.018em;text-wrap:balance}
h1,h2{font-family:var(--font-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);line-height:1.12}
p,ul,ol,dl,table{margin:0}
a{color:var(--brand);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:3px}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--brand-tint);color:var(--ink)}
.small{font-size:var(--step--1);color:var(--ink-2)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--s-4)}
@media(min-width:600px){.wrap{padding:0 28px}}
@media(min-width:1200px){.wrap{padding:0 40px}}
.narrow{max-width:760px}
.stack-sm{display:grid;gap:var(--s-4)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:var(--s-4);top:10px;z-index:99;background:var(--bg);
  color:var(--ink);padding:10px 14px;border:2px solid var(--brand);border-radius:var(--r-sm)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:relative;background:var(--bg);border-bottom:1px solid var(--line)}
@media(min-width:760px){.top{position:sticky;top:0;z-index:20}}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:64px;flex-wrap:wrap}
@media(min-width:760px){.top .wrap{gap:var(--s-4);min-height:70px}}
.brand{display:flex;flex:0 0 auto;align-items:center;gap:10px;padding:var(--s-2) 0;
  line-height:1.2;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--brand-deep)}
.mark{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-mark)}
.brand-txt{display:block;font-family:var(--font-display);font-size:var(--step-0);
  font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.brand-sub{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;
  letter-spacing:.02em;color:var(--ink-2)}
.top nav{margin-left:auto;display:flex;gap:var(--s-1);align-items:center;max-width:100%;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-padding-inline:var(--s-4);padding-right:var(--s-2);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
/* F: above 1000px the header is a deliberate two-row lockup - brand and phone
   on row 1, the whole nav on row 2 under a hairline. Nothing scrolls, so no
   link can be clipped however long the language makes the labels. */
@media(min-width:1000px){
  .top .wrap{flex-wrap:wrap;row-gap:0;align-items:center}
  .brand{order:1}
  .top .phone{order:2;flex:none;margin-left:auto}
  .top nav{order:3;flex:0 0 100%;min-width:0;margin-left:0;overflow:visible;
    flex-wrap:wrap;padding:var(--s-1) 0;border-top:1px solid var(--line);
    -webkit-mask-image:none;mask-image:none}
}
.top nav::-webkit-scrollbar{display:none}
.top nav a{white-space:nowrap;text-decoration:none;color:var(--ink-2);font-weight:600;
  font-size:var(--step--1);padding:9px 10px;border-radius:var(--r-nav)}
@media(min-width:760px){.top nav a{padding:9px var(--s-3)}}
.top nav a:hover{color:var(--ink);background:var(--surface)}
.top nav a[aria-current="page"]{color:var(--brand-deep);background:var(--brand-tint)}
.top nav a.lang{border:1px solid var(--line);font-weight:650}
.top nav a.lang:hover{border-color:var(--brand);color:var(--brand-deep)}
.top nav a.cta{color:var(--brand-deep);font-weight:750}
.top nav .only-wide,.top .phone.only-wide{display:none}
@media(min-width:760px){.top nav .only-wide,.top .phone.only-wide{display:inline-flex;
  align-items:center;gap:7px}}
.top .phone{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;margin-left:auto;
  text-decoration:none;font-weight:700;font-size:var(--step--1);padding:9px var(--s-3);
  border-radius:var(--r-btn);color:var(--brand-deep);border:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.top .phone:hover{background:var(--brand-tint);border-color:var(--brand-tint)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-btn);font-weight:700;font-size:1rem;
  font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--brand-deep);color:#fff;border:2px solid var(--brand-deep);
  transition:background .15s ease,border-color .15s ease,transform .12s ease}
.btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--brand-deep);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--brand-tint);border-color:var(--brand-tint);color:var(--brand-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0}
.btn-row>.btn{flex:1 1 220px}
@media(min-width:600px){.btn-row>.btn{flex:0 0 auto}}
/* on a dark panel the primary action inverts */
.hero-dark .btn,.hero-panel .btn,.cta-band .btn{background:#fff;color:var(--brand-deep);
  border-color:#fff}
.hero-dark .btn:hover,.hero-panel .btn:hover,.cta-band .btn:hover{background:var(--brand-tint);
  border-color:var(--brand-tint);color:var(--brand-deep)}
.hero-dark .btn.ghost,.cta-band .btn.ghost{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.55)}
.hero-dark .btn.ghost:hover,.cta-band .btn.ghost:hover{background:rgba(255,255,255,.14);
  border-color:#fff;color:#fff}
/* the light hero already sits on --brand-tint, so its ghost fills with white */
.hero-light .btn.ghost{border-color:var(--brand-deep)}
.hero-light .btn.ghost:hover{background:var(--bg);border-color:var(--brand-deep)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-ink);
  padding:clamp(var(--s-7),7vw,var(--s-9)) 0 clamp(var(--s-7),6vw,var(--s-8))}
.hero-dark{--hero-bg:var(--brand-deep);--hero-ink:#fff;--hero-dim:rgba(255,255,255,.84)}
.hero-light{--hero-bg:var(--brand-tint);--hero-ink:var(--ink);--hero-dim:var(--ink-2)}
.hero-split{--hero-bg:var(--bg);--hero-ink:var(--ink);--hero-dim:var(--ink-2);
  padding-bottom:clamp(var(--s-6),5vw,var(--s-7))}
.hero-motif{position:absolute;inset:0;width:100%;height:100%;opacity:.06;color:#fff;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 38%,#000 70%);
  mask-image:linear-gradient(90deg,transparent 0 38%,#000 70%)}
.hero-grid{position:relative;display:grid;gap:var(--s-6);align-items:center}
@media(min-width:900px){
  .hero-grid{grid-template-columns:7fr 5fr;gap:var(--s-7)}
  [data-side="watermark"] .hero-grid,[data-side="band"] .hero-grid{
    grid-template-columns:minmax(0,1fr)}
  [data-side="watermark"] .hero-copy{max-width:66%}
  [data-side="band"] .hero-copy{max-width:62ch}
  [data-side="panel-left"] .hero-grid{grid-template-columns:5fr 7fr}
  [data-side="panel-left"] .hero-copy{grid-column:2;grid-row:1}
  [data-side="panel-left"] .hero-side{grid-column:1;grid-row:1}
  .hero-split .hero-copy,.hero-split .hero-side{align-self:center}
}
.hero-copy{min-width:0}
.hero h1{font-size:var(--step-5);max-width:17ch;margin:0 0 var(--s-4)}
.hero .lede{font-size:clamp(1.05rem,1.3vw + .82rem,1.28rem);line-height:1.55;max-width:46ch;
  color:var(--hero-dim);margin:0 0 var(--s-6)}
/* K: the eyebrow and the section kicker take their shape from the display face,
   so the same string reads differently on a serif site and a condensed one.
   --label-accent keeps the mark legible on a dark hero. */
:root{--label-accent:var(--brand)}
.hero-dark{--label-accent:rgba(255,255,255,.7)}
.eyebrow{display:inline-block;margin:0 0 var(--s-4);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;font-family:var(--font-body)}
/* grotesk keeps the pill */
[data-font="grotesk"] .eyebrow{padding:6px var(--s-3);border-radius:999px}
[data-font="grotesk"] .hero-dark .eyebrow{background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28)}
[data-font="grotesk"] .hero-light .eyebrow{background:var(--bg);color:var(--brand-deep);
  border:1px solid var(--line)}
[data-font="grotesk"] .hero-split .eyebrow{background:var(--brand-tint);
  color:var(--brand-deep);border:1px solid var(--line)}
[data-font="grotesk"] .kicker{color:var(--brand)}
/* condensed: an upright label behind a 3px rule */
[data-font="condensed"] :is(.eyebrow,.kicker){padding-left:var(--s-3);border-left:3px solid
  var(--label-accent);border-radius:0;text-transform:uppercase;letter-spacing:.1em}
/* serif: sentence case in the display face, italic, after a small dot */
[data-font="serif"] :is(.eyebrow,.kicker){font-family:var(--font-display);font-style:italic;
  font-weight:500;font-size:1rem;letter-spacing:0;text-transform:none}
[data-font="serif"] :is(.eyebrow,.kicker)::before{content:"";display:inline-block;
  width:7px;height:7px;margin-right:var(--s-2);border-radius:50%;vertical-align:middle;
  background:var(--label-accent)}
/* geo: wide caps over a hairline */
[data-font="geo"] :is(.eyebrow,.kicker){padding-bottom:6px;border-bottom:1px solid
  var(--label-accent);border-radius:0;letter-spacing:.2em}
/* dark/card: quick-facts panel; dark/stats reuses the same frosted panel */
.facts{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.facts p{margin:0}
.facts-phone a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--step-3);
  letter-spacing:var(--display-tracking);line-height:1.1;font-variant-numeric:tabular-nums}
.facts-phone a:hover{text-decoration:underline}
.facts-line{display:flex;gap:10px;align-items:flex-start;font-weight:650;color:#fff}
.facts-line .tick{flex:0 0 auto;width:19px;height:19px;margin-top:3px;color:#fff}
.facts-note{color:var(--hero-dim);font-size:var(--step--1);line-height:1.5}
/* dark/stats and light/prices: the first three pricing rows */
.hero-stats{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4)}
.hero-stats li{display:grid;gap:2px}
.hero-stats .amount{font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:var(--step-2);letter-spacing:var(--display-tracking);line-height:1.1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hero-stats .what{font-size:var(--step--1);line-height:1.4;color:var(--hero-dim)}
.facts .hero-stats .amount{color:#fff}
/* dark/watermark: the first service glyph, oversized, off the bottom-right */
.hero-watermark{position:absolute;right:-40px;bottom:-60px;width:420px;height:420px;
  color:#fff;opacity:.10;pointer-events:none}
.hero-watermark .glyph{width:100%;height:100%;color:inherit}
/* light/glyph: three service glyphs in staggered tiles, filling the 5/12
   column. A site with fewer than three services gets the single tile instead. */
.hero-cluster{position:relative;width:min(330px,100%);height:360px;margin:0 0 0 auto}
.hero-cluster .ct{position:absolute;display:grid;place-items:center;width:150px;height:150px;
  border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow-sm)}
.hero-cluster .glyph{width:84px;height:84px;color:var(--brand)}
.hero-cluster .ct1{top:0;left:0;transform:rotate(-4deg)}
.hero-cluster .ct2{top:96px;left:176px;transform:rotate(3deg)}
.hero-cluster .ct3{top:206px;left:30px;transform:rotate(-2deg)}
.hero-tile{display:grid;place-items:center;width:240px;height:240px;margin:0 0 0 auto;
  border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transform:rotate(-4deg)}
.hero-tile .glyph{width:180px;height:180px;color:var(--brand)}
/* light/prices and light/areas: a white card in the second column */
.hero-card{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--bg);box-shadow:var(--shadow-md)}
.hc-title{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand)}
.hero-card .hero-stats .amount{color:var(--brand-deep)}
.hero-card .hero-stats .what{color:var(--ink-2)}
.hc-more{margin:0;font-weight:650;font-size:.94rem}
.hero-card .areas{gap:var(--s-2)}
.hero-card .areas a{padding:8px 14px;min-height:38px;line-height:20px;font-size:.9rem;
  background:var(--surface)}
/* split/panel-*: the solid action panel */
.hero-panel{display:grid;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-lg);
  background:var(--brand-deep);color:#fff;box-shadow:var(--shadow-md)}
.hero-panel p{margin:0}
.hero-panel .trust{gap:10px;padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.22)}
.hero-panel .trust li{color:rgba(255,255,255,.88);font-size:.92rem}
.hero-panel .trust .tick{color:#fff}
@media(min-width:720px){.hero-panel .trust{grid-template-columns:1fr}}
/* H: the band hero has no second column, so its copy is centred instead of
   leaving the right half of the screen empty */
.hero-band-copy{text-align:center;max-width:62ch;margin-inline:auto}
.hero-band-copy h1,.hero-band-copy .lede{margin-inline:auto}
.hero-band-copy .btn-row{justify-content:center}
/* split/band: the panel becomes a full-bleed strip under the hero */
.hero-band{background:var(--brand-deep);color:#fff;padding:var(--s-6) 0}
.band-grid{display:grid;gap:var(--s-5);align-items:center}
.band-call{margin:0}
.band-act{display:grid;gap:var(--s-3);justify-items:start}
.hero-band .trust{gap:var(--s-3)}
.hero-band .trust li{color:rgba(255,255,255,.88);font-size:.92rem}
.hero-band .trust .tick{color:#fff}
.hero-band .btn{background:#fff;color:var(--brand-deep);border-color:#fff}
.hero-band .btn:hover{background:var(--brand-tint);border-color:var(--brand-tint)}
@media(min-width:900px){
  .band-grid{grid-template-columns:auto auto 1fr;gap:var(--s-7)}
  .hero-band .trust{grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-5)}
}

/* N: the small trace each side leaves in the copy column on a phone. All of it
   sits BELOW the button row (or is absolutely positioned), so rule A holds. */
.hero-mini{padding:0;gap:0;margin-top:var(--s-5);overflow:hidden}
.hero-mini .hero-stats{grid-template-columns:repeat(3,1fr);gap:0}
.hero-mini .hero-stats li{min-width:0;padding:var(--s-3);gap:2px}
.hero-mini .hero-stats li+li{border-left:1px solid var(--line)}
.hero-mini.facts .hero-stats li+li{border-left-color:rgba(255,255,255,.22)}
.hero-mini .amount{font-size:var(--step-1)}
.hero-mini.hero-card{box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.hero-mini-areas{margin-top:var(--s-5)}
.hero-minitile{display:inline-grid;place-items:center;width:56px;height:56px;
  margin:0 var(--s-3) var(--s-4) 0;vertical-align:middle;border-radius:var(--r-md);
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transform:rotate(-4deg)}
.hero-minitile .glyph{width:32px;height:32px;color:var(--brand)}
/* the phone-only extras. .areas.hero-mini-areas needs the extra class because
   `.areas{display:flex}` is declared later in this file at equal specificity. */
@media(min-width:900px){
  .hero-mini,.hero-minitile,.areas.hero-mini-areas,.hero-mini-areas{display:none}
}

/* A: the phone + quote row always sits under the lede on a phone, and the
   decorative half of the hero is dropped so both buttons stay above the fold */
@media(max-width:899px){
  .hero-dark .hero-side,.hero-light .hero-side,.hero-motif{display:none}
  /* the watermark shrinks and moves out of the copy instead of disappearing */
  .hero-watermark{width:120px;height:120px;right:8px;top:8px;bottom:auto;opacity:.12}
  .hero h1{margin-bottom:var(--s-3)}
  .hero .lede{margin-bottom:var(--s-5)}
  .hero-panel,.hero-band{background:var(--brand-tint);color:var(--ink);box-shadow:none;
    padding:var(--s-5)}
  .hero-panel .facts-phone,.hero-panel>.btn,.hero-band .band-call,
  .hero-band .band-act{display:none}
  .hero-panel .trust,.hero-band .trust{border-top:0;padding-top:0}
  .hero-panel .trust li,.hero-band .trust li{color:var(--ink-2)}
  .hero-panel .trust .tick,.hero-band .trust .tick{color:var(--brand)}
}
@media(min-width:900px){
  /* the split panel and the band carry the actions, so the copy column does not */
  .hero-split .hero-copy .btn-row{display:none}
  /* dark/card shows the number in the side card: drop the duplicate button */
  [data-side="card"] .hero-dark .hero-copy .btn-phone{display:none}
  [data-side="card"] .hero-dark .hero-copy .btn.ghost{background:#fff;
    color:var(--brand-deep);border-color:#fff}
  [data-side="card"] .hero-dark .hero-copy .btn.ghost:hover{background:var(--brand-tint);
    border-color:var(--brand-tint)}
}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s-5) 0}
.hero-light+.trust-strip{background:var(--bg);border-top:1px solid var(--line)}
.trust{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
@media(min-width:720px){
  .trust{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  /* G: size the strip to the number of items so it never leaves an orphan */
  .trust-strip .trust.n2,.trust-strip .trust.n4{grid-template-columns:repeat(2,1fr)}
  .trust-strip .trust.n5{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .trust-strip .trust.n6{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1100px){.trust-strip .trust.n4{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45;
  color:var(--ink-2)}
.trust li::before{content:none}
.trust .tick{flex:0 0 auto;width:19px;height:19px;margin-top:3px;color:var(--brand)}

/* ---------- sections ---------- */
.section{padding:var(--section-pad) 0}
.section-tint{background:var(--surface);border-block:1px solid var(--line)}
.section-brandtint{background:var(--brand-tint)}
.sec-head{position:relative;max-width:60ch;margin:0 0 var(--s-6);padding-bottom:var(--s-4)}
.sec-head::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;
  border-radius:2px;background:var(--brand)}
/* L: a light hero family centres its section heads, top to bottom */
[data-hero="light"] .sec-head{text-align:center;margin-inline:auto}
[data-hero="light"] .sec-head::after{left:50%;transform:translateX(-50%)}
.sec-head h1,.sec-head h2{font-size:var(--step-3);margin:0 0 var(--s-3)}
.sec-head p{color:var(--ink-2);font-size:1.02rem;margin:0}
.kicker{display:inline-block;margin:0 0 10px;font-family:var(--font-body);font-size:.74rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}

/* ---------- service cards ---------- */
.cards{display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  /* C: no orphan rows. 4 -> 2x2; 5 and 7 give their last card the leftover
     span and lay it out horizontally; 3 and 6 already fill their rows. */
  .cards.n4{grid-template-columns:repeat(2,1fr)}
  .cards.n5>.card:last-child{grid-column:2/-1}
  .cards.n7>.card:last-child{grid-column:1/-1}
  .cards:is(.n5,.n7)>.card:last-child{flex-direction:row;flex-wrap:wrap;
    align-items:flex-start;gap:var(--s-5)}
  .cards:is(.n5,.n7)>.card:last-child :is(h2,h3){flex:0 0 auto;max-width:15ch}
  .cards:is(.n5,.n7)>.card:last-child :is(h2,h3) a{flex-direction:row;align-items:center;
    gap:var(--s-4)}
  .cards:is(.n5,.n7)>.card:last-child p{flex:1 1 260px;margin-top:var(--s-1)}
  .cards:is(.n5,.n7)>.card:last-child .more{margin:0;padding:0;align-self:center}
}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--s-5);
  border-radius:var(--r-lg);border:1px solid transparent;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.card:focus-within{outline:3px solid var(--brand);outline-offset:3px}
[data-card="bordered"] .card{background:var(--bg);border-color:var(--line);box-shadow:var(--shadow-sm)}
[data-card="bordered"] .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
  border-color:var(--brand)}
[data-card="tinted"] .card{background:var(--surface)}
[data-card="tinted"] .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);
  background:var(--bg)}
[data-card="tinted"] .section-tint .card{background:var(--brand-tint)}
.tile{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;
  border-radius:var(--r-md);background:var(--brand-tint);color:var(--brand)}
.tile .glyph{width:28px;height:28px}
.card h2,.card h3{font-family:var(--font-body);font-size:var(--step-1);letter-spacing:-.015em}
.card h2 a,.card h3 a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);
  color:var(--ink);text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--brand-deep)}
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.card h2 a:focus-visible,.card h3 a:focus-visible{outline:none}
.card p{margin:0;color:var(--ink-2);font-size:.97rem}
.card .more{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--s-2);
  color:var(--brand);font-weight:650;font-size:.94rem}
.card .more::after{content:"\2192";transition:transform .16s ease}
.card:hover .more{text-decoration:underline}
.card:hover .more::after{transform:translateX(3px)}
.glyph{width:42px;height:42px;color:var(--brand)}
@media(prefers-reduced-motion:reduce){.card,.card .more::after{transition:none}}
/* M: on a phone a bordered set reads as a list, a tinted set as stacked cards */
@media(max-width:719px){
  [data-card="bordered"] .cards{gap:0}
  [data-card="bordered"] .card{gap:var(--s-2);padding:var(--s-4) 0;background:none;
    border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
  [data-card="bordered"] .card:last-child{border-bottom:0}
  [data-card="bordered"] .card:hover{transform:none;box-shadow:none}
  [data-card="bordered"] .card :is(h2,h3) a{flex-direction:row;align-items:center;
    gap:var(--s-3)}
  [data-card="bordered"] .card :is(h2,h3) a::after{border-radius:0}
  [data-card="bordered"] .tile{width:40px;height:40px;border-radius:var(--r-sm)}
  [data-card="bordered"] .tile .glyph{width:22px;height:22px}
  [data-card="bordered"] .card p{margin-left:52px;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  [data-card="bordered"] .card .more{display:none}
}

/* ---------- numbers / cost band ---------- */
.figures{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4)}
@media(min-width:620px){.figures{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.figures{grid-template-columns:repeat(3,1fr)}}
.figure{padding:var(--s-5);border-radius:var(--r-md);background:var(--brand-tint);
  border-top:3px solid var(--brand);box-shadow:var(--shadow-sm)}
.figure .amount{display:block;margin-bottom:var(--s-2);font-family:var(--font-display);
  font-weight:var(--display-weight);font-size:var(--step-3);letter-spacing:var(--display-tracking);
  color:var(--brand-deep);line-height:1.1;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.figure .what{display:block;color:var(--ink);font-weight:600;font-size:.95rem}
.figure .note{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.45}
.range-note{margin-top:var(--s-5);color:var(--ink-2);font-size:.9rem;max-width:62ch}
.range-note a{font-weight:650}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:var(--s-5)}
.steps li{counter-increment:st;position:relative;padding-left:60px;min-height:44px}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;z-index:1;
  width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:48px;
  bottom:calc(-1 * var(--s-5));width:2px;background:var(--line)}
.steps strong{display:block;margin-bottom:2px}
.steps span{color:var(--ink-2);font-size:.97rem}
@media(min-width:900px){
  .steps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-6)}
  .steps li{padding:60px 0 0}
  .steps li:not(:last-child)::after{content:none}
}

/* ---------- article + side rail ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.article>*{min-width:0}
.page-head+.wrap .article{padding-top:var(--s-5)}
/* the rail is first in the markup, so the contents list reads before the body
   text on a phone; on desktop it is placed into the second column instead */
.rail{display:grid;gap:var(--s-5)}
.side-cta{display:none}
@media(min-width:1000px){
  .article{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-7)}
  .article>.prose{grid-column:1;grid-row:1}
  .article>.rail{grid-column:2;grid-row:1;position:sticky;top:96px}
  .side-cta{display:grid;gap:var(--s-3)}
  .article .toc{margin:0}
}
.side-cta{padding:var(--s-5);border-radius:var(--r-lg);background:var(--brand-tint);
  border:1px solid var(--line)}
.sc-label{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-deep)}
.sc-phone{display:inline-flex;align-items:center;gap:9px;color:var(--brand-deep);
  text-decoration:none;font-family:var(--font-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);font-size:var(--step-2);line-height:1.15;
  font-variant-numeric:tabular-nums}
.sc-phone:hover{text-decoration:underline}
.sc-phone svg,.facts-phone svg{flex:0 0 auto;width:20px;height:20px;opacity:.7}
.side-cta .btn{width:100%}
.side-cta .small,.side-cta p{margin:0}

/* ---------- prose ---------- */
.prose{min-width:0;max-width:74ch}
@media(min-width:1000px){.prose{max-width:none}}
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>.callout,.prose>figure,
.prose .small{max-width:68ch}
.prose .figures,.prose .table-wrap,.prose .steps{max-width:none}
.prose h2{font-size:var(--step-2);margin:var(--s-7) 0 var(--s-4);scroll-margin-top:var(--s-8)}
.prose h3{font-size:var(--step-1);margin:var(--s-6) 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 var(--s-4)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:var(--s-2)}
.prose a{font-weight:600}
.article .prose>h2:first-child{margin-top:var(--s-5)}
.callout h3{margin:0 0 var(--s-2);font-size:1.03rem;color:var(--brand-deep)}
.callout p{margin:0 0 10px;font-size:.97rem}
.callout p:last-child{margin:0}
figure{margin:var(--s-6) 0}
figure img{border-radius:var(--r-md);border:1px solid var(--line)}
figcaption{margin-top:var(--s-2);color:var(--ink-2);font-size:.88rem}
.sources{padding-left:20px}
.sources li{margin-bottom:var(--s-2);word-break:break-word}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:var(--s-5) 0;border:1px solid var(--line);
  border-radius:var(--r-md)}
.table-wrap table{margin:0}
table{border-collapse:collapse;width:100%;font-size:.96rem;min-width:420px}
caption{text-align:left;padding:14px 16px 0;color:var(--ink-2);font-size:.88rem}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
td{font-variant-numeric:tabular-nums}
thead th{background:var(--surface);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* ---------- breadcrumbs + page head ---------- */
.crumbs{padding:18px 0 0;font-size:.88rem;color:var(--ink-2)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{display:flex;gap:6px;align-items:center}
.crumbs li+li::before{content:"/";color:var(--line-strong);font-weight:600}
.crumbs a{color:var(--ink-2)}
.crumbs [aria-current="page"]{color:var(--ink)}
.page-head{padding:var(--s-5) 0 clamp(var(--s-6),5vw,var(--s-7));
  border-bottom:1px solid var(--line)}
.page-head h1{font-size:var(--step-4);max-width:20ch;margin:0 0 var(--s-4)}
.page-head .lede{font-size:clamp(1.05rem,1vw + .85rem,1.2rem);color:var(--ink-2);max-width:56ch;
  margin:0;line-height:1.55}
.meta{display:flex;flex-wrap:wrap;gap:var(--s-2) 18px;margin:18px 0 0;padding:0;
  list-style:none;color:var(--ink-2);font-size:.88rem}

/* ---------- contents rail ---------- */
.toc{padding:20px 22px;margin:var(--s-6) 0;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line)}
.toc h2{margin:0 0 var(--s-3);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:6px}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px;margin:var(--s-6) 0 0}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.faq details[open]{border-color:var(--brand-tint);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:16px 46px 16px 20px;font-weight:650;
  position:relative;border-radius:var(--r-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  margin-top:-6px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg);transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{background:var(--surface)}
.faq .answer{padding:0 20px 18px;color:var(--ink-2)}
.faq .answer p{margin:0 0 var(--s-3)}
.faq .answer p:last-child{margin:0}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- related links ---------- */
.related{border-top:1px solid var(--line);margin-top:var(--s-7);padding-top:var(--s-6)}
.related h2{font-size:var(--step-2);margin:0 0 var(--s-4)}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
@media(min-width:620px){.related ul{grid-template-columns:repeat(2,1fr)}}
.related li{position:relative;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md)}
.related li:hover{border-color:var(--brand)}
.related li:focus-within{outline:3px solid var(--brand);outline-offset:3px}
.related li>a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.related li>a:focus-visible{outline:none}
.related a{font-weight:650;text-decoration:none}
.related a:hover{text-decoration:underline}
.related p{margin:6px 0 0;color:var(--ink-2);font-size:.92rem}

/* ---------- area chips ---------- */
.areas{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.areas a{display:inline-block;padding:11px 17px;min-height:44px;line-height:22px;
  border-radius:var(--r-chip);border:1px solid var(--line);background:var(--bg);
  text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink)}
.areas a:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint)}

/* ---------- guide list ---------- */
.lead-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.lead-list li{position:relative;border-bottom:1px solid var(--line);padding-bottom:18px}
.lead-list li:last-child{border-bottom:0;padding-bottom:0}
.lead-list li:focus-within{outline:3px solid var(--brand);outline-offset:4px;border-radius:6px}
.lead-list h2,.lead-list h3{font-family:var(--font-body);font-size:var(--step-1);margin:0 0 6px}
.lead-list h2 a,.lead-list h3 a{color:var(--ink);text-decoration:none}
.lead-list h2 a:hover,.lead-list h3 a:hover{color:var(--brand-deep);text-decoration:underline}
.lead-list h2 a::after,.lead-list h3 a::after{content:"";position:absolute;inset:-6px -6px 6px -6px}
.lead-list h2 a:focus-visible,.lead-list h3 a:focus-visible{outline:none}
.lead-list p{margin:0;color:var(--ink-2);font-size:.98rem}
.lead-list .when{display:block;margin-bottom:6px;color:var(--ink-2);font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;font-weight:650}
.guides .more{margin-top:var(--s-5);font-weight:650}

/* ---------- cta band ---------- */
.cta-band{background:var(--brand-deep);color:#fff;padding:var(--section-pad) 0}
.cta-grid{display:grid;gap:var(--s-5);align-items:center}
@media(min-width:800px){.cta-grid{grid-template-columns:3fr 2fr;gap:var(--s-7)}}
/* site.json `cta` is a sentence, not a headline: size it as a lead statement */
.cta-band h2{font-size:var(--step-2);line-height:1.3;margin:0 0 var(--s-3);max-width:40ch}
.cta-band p{margin:0;max-width:48ch;color:rgba(255,255,255,.86)}
.cta-actions{display:grid;gap:var(--s-4);justify-items:start}
@media(min-width:800px){.cta-actions{justify-items:stretch}}
.cta-phone{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--step-4);
  letter-spacing:var(--display-tracking);line-height:1.1;font-variant-numeric:tabular-nums}
.cta-phone:hover{text-decoration:underline}
.cta-phone svg{width:24px;height:24px;flex:0 0 auto;opacity:.8}

/* ---------- quote form ---------- */
.quote-grid{display:grid;gap:var(--s-6);padding:var(--s-6) 0 0}
@media(min-width:900px){.quote-grid{grid-template-columns:minmax(0,560px) 320px;
  gap:var(--s-7);align-items:start}}
.quote{display:grid;gap:var(--s-4);margin:0}
.field{display:grid;gap:7px;margin:0}
.field label,.quote .field label{font-weight:600;font-size:var(--step--1);letter-spacing:.01em}
.field .hint{color:var(--ink-2);font-size:.86rem}
.field-row{display:grid;gap:var(--s-4)}
@media(min-width:600px){.field-row{grid-template-columns:1fr 1fr}}
input,textarea,select{font:inherit;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-input);
  padding:13px 14px;width:100%;min-height:52px}
textarea{min-height:140px;resize:vertical;border-radius:var(--r-md)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--brand);
  outline:3px solid var(--brand);outline-offset:2px}
.quote button{font:inherit;font-family:var(--font-body);font-size:1rem;font-weight:700;
  cursor:pointer;width:100%;min-height:52px;padding:var(--s-3) var(--s-6);
  border-radius:var(--r-btn);border:2px solid var(--brand-deep);background:var(--brand-deep);
  color:#fff}
@media(min-width:600px){.quote button{width:auto;min-width:200px}}
.quote button:hover{background:var(--brand);border-color:var(--brand)}
.quote>p:last-child{margin:0}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote-aside{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--brand-tint);border:1px solid var(--line)}
.quote-aside h2{font-family:var(--font-body);font-size:var(--step-1);margin:0}
.quote-aside h2+.sc-phone{margin-bottom:var(--s-2)}
.next-steps{margin:0;padding-left:20px;display:grid;gap:var(--s-2);color:var(--ink-2);
  font-size:.95rem}

/* ---------- footer ---------- */
.site-foot{background:var(--foot-bg);color:var(--foot-ink);font-size:.95rem;
  margin-top:clamp(var(--s-7),8vw,var(--s-9));
  padding:clamp(var(--s-7),6vw,var(--s-8)) 0 var(--s-6)}
.cta-band+.site-foot{margin-top:0}
.foot-grid{display:grid;gap:var(--s-6)}
@media(min-width:720px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-7)}}
.site-foot h2{margin:0 0 var(--s-4);font-family:var(--font-display);font-size:.76rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--foot-dim)}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.site-foot a{color:var(--foot-ink);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-about p{margin:0 0 var(--s-4);max-width:44ch;color:var(--foot-dim);line-height:1.6}
.foot-phone{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#fff;
  text-decoration:none;font-family:var(--font-display);font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);font-size:var(--step-2);
  font-variant-numeric:tabular-nums}
.foot-legal{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--foot-line);
  color:var(--foot-dim);font-size:.86rem;line-height:1.6;display:grid;gap:10px}
.foot-legal p{margin:0;max-width:78ch}
.foot-legal a{color:var(--foot-dim);text-decoration:underline}
/* D: .small and .operator inherit --ink-2, unreadable on --foot-bg */
.site-foot .small,.site-foot .operator,.site-foot .operator a{color:var(--foot-dim)}
.operator a{color:inherit}
.site-foot .operator a{color:var(--foot-dim)}
.lang-links{display:flex;gap:var(--s-4);flex-wrap:wrap}

/* ---------- mobile action bar ---------- */
.actionbar::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 85%,transparent))}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;
  padding:10px var(--s-3) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -4px 18px var(--shadow-1)}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .actionbar{background:color-mix(in srgb,var(--bg) 88%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
}
.actionbar .btn{flex:1 1 0;min-height:50px;padding:var(--s-3) 10px;font-size:.98rem}
body{padding-bottom:88px}
@media(min-width:760px){.actionbar{display:none}body{padding-bottom:0}}

@media print{.actionbar,.top nav,.cta-band,.rail,.trust-strip{display:none}
  body{padding-bottom:0}.hero{background:none;color:#000}}

/* ---- required markers, inline errors, what happens next ------------------
   Shared, so every site gets them: a required field says so before it fails,
   a failed field says what is wrong in words, and the submit button is
   followed by a sentence naming what the visitor should expect. CSS only. */
.field label .req,.field label .opt{font-size:.68em;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-left:.4em;white-space:nowrap}
.field .err{display:none;margin:7px 0 0;font-size:.86rem;line-height:1.45;
  color:var(--alert,#b3261e)}
.field :is(input,textarea):user-invalid{border-color:var(--alert,#b3261e)}
.field :is(input,textarea):user-invalid ~ .err{display:block}
.form-next{margin:var(--s-4) 0 var(--s-3);font-size:.92rem;line-height:1.55;
  color:var(--ink-2);max-width:56ch}

.field label .req{color:var(--brand-deep)}
.quote button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* optional photo + address: only rendered where the site's CTA promises them */
.field input[type="file"]{padding:11px 12px;line-height:1.35;cursor:pointer}
.field input[type="file"]::file-selector-button{font:inherit;font-size:.9rem;
  font-weight:600;margin-right:12px;padding:8px 12px;cursor:pointer;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--bg)}
.field input[type="file"]:focus-visible{border-color:var(--brand);
  outline:3px solid var(--brand);outline-offset:2px}

/* =========================================================================
   WORLD  registre   emondagegatineau.ca
   A dated record about your tree, not an advertisement for cutting it down.
   Bark is the authority ground, sapwood is the paper, heartwood is the
   committed field, and the only green on the site is the cambium: a 2px line,
   used where something is alive or permitted, and nowhere else. Fields, not
   cards. Every number is a diameter, a date or a range, so every number is
   tabular.
   ========================================================================= */
[data-world="registre"]{
  --bg:#e5e8e1;
  --surface:#dbdfd6;
  --line:#c2c8bc;
  --line-strong:#8b9486;
  --ink:#211d18;
  --ink-2:#524c43;
  --brand:#8d4526;
  --brand-deep:#6d3319;
  --brand-tint:#e8ded4;
  --brand-ink:#fbf7f1;
  --foot-bg:#1c1913;
  --foot-ink:#ece9df;
  --foot-dim:#b3ab9c;
  --foot-line:rgba(236,233,223,.22);

  --bark:#211d18;
  --bark-2:#332d25;
  --heart:#8d4526;
  --sap:#ece9df;
  --sap-2:#cfc3b3;
  --cambium:#3f7a30;
  --sap-line:rgba(236,233,223,.28);
  --sap-hair:rgba(236,233,223,.16);

  --font-body:"Petrona",Georgia,"Times New Roman",serif;
  --font-display:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-weight:650;
  --display-tracking:-.022em;

  --r-sm:0;--r-md:0;--r-lg:0;--r-btn:0;--r-input:2px;--r-nav:0;--r-chip:0;--r-mark:0;
  --shadow-sm:none;--shadow-md:none;
  accent-color:#8d4526;
}

/* ---- browser surfaces ---------------------------------------------------- */
[data-world="registre"] ::selection{background:#8d4526;color:#fbf7f1}
[data-world="registre"] :focus-visible{outline:2px solid var(--brand);outline-offset:3px;
  border-radius:0}
[data-world="registre"] .top :focus-visible,[data-world="registre"] .w-decl :focus-visible,
[data-world="registre"] .cta-band :focus-visible,
[data-world="registre"] .site-foot :focus-visible{outline-color:var(--sap)}
[data-world="registre"]{scrollbar-width:thin;scrollbar-color:#8b9486 #dbdfd6}
[data-world="registre"] ::-webkit-scrollbar{width:12px;height:12px}
[data-world="registre"] ::-webkit-scrollbar-track{background:#dbdfd6}
[data-world="registre"] ::-webkit-scrollbar-thumb{background:#8b9486;border:3px solid #dbdfd6}
[data-world="registre"] ::-webkit-scrollbar-thumb:hover{background:#4f574b}
[data-world="registre"] a{text-underline-offset:.16em;text-decoration-thickness:.055em}
[data-world="registre"] a:hover{text-decoration-thickness:.12em}

/* ---- type ---------------------------------------------------------------- */
[data-world="registre"] body{font-family:var(--font-body);line-height:1.64;background:var(--bg)}
[data-world="registre"] :is(h1,h2,h3,h4){font-family:var(--font-display);
  letter-spacing:var(--display-tracking);text-wrap:balance}
[data-world="registre"] :is(h3,h4){font-weight:620;letter-spacing:-.016em}
[data-world="registre"] :is(.top nav a,.brand-txt,.brand-sub,.btn,button,.crumbs,.meta,
 .small,.areas a,.toc,.field label,.sc-label,.range-note,.foot-legal,.site-foot ul,
 .related a,.lang-links,.lead-list .when,.quote-aside,.next-steps,.actionbar,
 .fiche,.rates,.w-areas,.w-phone,.fields,.w-note,table,.faq summary,.steps,
 .cta-phone,.foot-phone,.sc-phone,.ring-keys,.rings text){font-family:var(--font-display)}
[data-world="registre"] :is(td,time,.w-phone,.cta-phone,.foot-phone,.sc-phone,.rates td,
 .fields b,.ring-keys b,.steps li::before){font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1}

/* ---- masthead: bark, with the living line under it ----------------------- */
[data-world="registre"] .top{background:var(--bark);border-bottom:0;position:relative}
[data-world="registre"] .top::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--cambium)}
[data-world="registre"] .top .wrap{min-height:64px}
[data-world="registre"] .brand{color:var(--sap)}
[data-world="registre"] .brand:hover{color:#fff}
[data-world="registre"] .mark{border-radius:0;width:32px;height:32px}
[data-world="registre"] .brand-txt{font-size:1.02rem;font-weight:700;letter-spacing:-.026em}
[data-world="registre"] .brand-sub{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--sap-2)}
[data-world="registre"] .top nav a{border-radius:0;color:var(--sap-2);font-size:.79rem;
  font-weight:650;letter-spacing:.07em;text-transform:uppercase;padding:11px 11px}
[data-world="registre"] .top nav a:hover{background:none;color:var(--sap);
  box-shadow:inset 0 -2px 0 var(--sap-line)}
[data-world="registre"] .top nav a[aria-current="page"]{background:none;color:var(--sap);
  box-shadow:inset 0 -2px 0 var(--cambium)}
[data-world="registre"] .top nav a.lang{border:1px solid var(--sap-line);color:var(--sap)}
[data-world="registre"] .top nav a.lang:hover{background:var(--sap);color:var(--bark);
  border-color:var(--sap);box-shadow:none}
[data-world="registre"] .top nav a.cta{color:var(--sap)}
[data-world="registre"] .top .phone{border-radius:0;border:1px solid var(--sap-line);
  color:var(--sap);font-weight:700}
[data-world="registre"] .top .phone:hover{background:var(--sap);color:var(--bark);
  border-color:var(--sap)}
@media(min-width:1000px){[data-world="registre"] .top nav{border-top:1px solid var(--sap-hair)}}

/* ---- buttons ------------------------------------------------------------- */
[data-world="registre"] .btn{border-radius:0;font-weight:650;letter-spacing:.012em;
  min-height:54px;border-width:1px;background:var(--heart);border-color:var(--heart);
  color:var(--brand-ink);
  transition:background .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1),
    border-color .2s cubic-bezier(.16,1,.3,1)}
[data-world="registre"] .btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);
  color:#fff}
[data-world="registre"] .btn:active{transform:none;box-shadow:inset 0 0 0 2px var(--brand-ink)}
[data-world="registre"] .btn.ghost{background:transparent;color:var(--ink);
  border-color:var(--ink)}
[data-world="registre"] .btn.ghost:hover{background:var(--ink);color:var(--bg);
  border-color:var(--ink)}
[data-world="registre"] :is(.w-decl,.cta-band,.site-foot) .btn,
[data-world="registre"] .cta-band .btn.ghost{background:var(--sap);
  border-color:var(--sap);color:var(--bark)}
[data-world="registre"] :is(.w-decl,.cta-band,.site-foot) .btn:hover,
[data-world="registre"] .cta-band .btn.ghost:hover{background:#fff;
  border-color:#fff;color:var(--bark)}

/* ---- the hero: the record head ------------------------------------------- */
[data-world="registre"] .w-hero{position:relative;overflow:hidden;background:var(--bg);
  color:var(--ink);padding:0}
[data-world="registre"] .w-hero>.wrap{padding-top:clamp(32px,4.8vw,60px);
  padding-bottom:clamp(30px,4.4vw,54px)}
[data-world="registre"] .w-hero-in{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:900px){
  [data-world="registre"] .w-hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
[data-world="registre"] .w-hero h1{font-size:clamp(2.1rem,4.7vw,3.6rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.05;max-width:16ch;margin:0 0 var(--s-5)}
[data-world="registre"] .w-hero .lede{font-family:var(--font-body);
  font-size:clamp(1.04rem,1.1vw + .84rem,1.2rem);line-height:1.6;max-width:50ch;
  color:var(--ink-2);margin:0 0 clamp(24px,3.2vw,36px)}
[data-world="registre"] .w-hero .btn-row{align-items:center;gap:var(--s-5)}
[data-world="registre"] .w-phone{display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;font-weight:700;
  font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.014em;
  border-bottom:2px solid var(--line-strong);padding-bottom:4px;white-space:nowrap}
[data-world="registre"] .w-phone:hover{border-bottom-color:var(--heart);color:var(--heart)}
[data-world="registre"] .w-phone svg{width:19px;height:19px;flex:0 0 auto;opacity:.6}

/* the dated end-grain section: geometry, not a picture */
[data-world="registre"] .rings{margin:0}
[data-world="registre"] .ring-frame{position:relative}
[data-world="registre"] .rings svg{display:block;width:100%;height:auto;max-width:540px;
  margin-inline:auto}
[data-world="registre"] .rings .sapwood{fill:var(--heart);opacity:.055;stroke:none}
[data-world="registre"] .rings .heartwood{fill:var(--heart);opacity:.085;stroke:none}
[data-world="registre"] .rings .r{fill:none;stroke:var(--ink);stroke-width:1;opacity:.28}
[data-world="registre"] .rings .r-mark{stroke:var(--heart);stroke-width:2.4;opacity:1}
[data-world="registre"] .rings .r-cambium{stroke:var(--cambium);stroke-width:2.5;opacity:1;
  stroke-dasharray:1106;animation:ring-draw 900ms cubic-bezier(.16,1,.3,1) both}
@keyframes ring-draw{from{stroke-dashoffset:1106}to{stroke-dashoffset:0}}
[data-world="registre"] .rings .lead{stroke:var(--ink);stroke-width:1;fill:none;opacity:.55}
[data-world="registre"] .rings .pith{fill:var(--ink);stroke:none;opacity:.7}
[data-world="registre"] .rings text{fill:var(--ink);font-size:15px;font-weight:650;
  letter-spacing:.01em}
[data-world="registre"] .rings text.y{font-size:19px;font-weight:700}
[data-world="registre"] .rings text.c{fill:var(--ink-2);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
[data-world="registre"] .ring-keys{list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid var(--line)}
[data-world="registre"] .ring-keys li{display:flex;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-2)}
[data-world="registre"] .ring-keys b{font-weight:700;color:var(--ink);min-width:3.4em}
@media(min-width:900px){
  [data-world="registre"] .ring-keys{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;margin:0;border:0}
}
/* on a phone the labels move into the list below, so the frame crops to the
   section itself rather than reserving the empty label column */
@media(max-width:899px){
  [data-world="registre"] .ring-frame{width:min(218px,56vw);aspect-ratio:1;overflow:hidden}
  [data-world="registre"] .rings svg{position:absolute;top:50%;left:0;
    width:calc(100% * 600 / 376);max-width:none;transform:translateY(-50%)}
  [data-world="registre"] .rings text,[data-world="registre"] .rings .lead{display:none}
}
@media(prefers-reduced-motion:reduce){
  [data-world="registre"] .rings .r-cambium{animation:none;stroke-dasharray:none}
  [data-world="registre"] .btn,[data-world="registre"] .f-go{transition:none}
}

/* the declaration: four fields on heartwood, the two certificates first */
[data-world="registre"] .w-decl{background:var(--heart);color:var(--sap)}
[data-world="registre"] .fields{list-style:none;margin:0;padding:0;display:grid;gap:0}
[data-world="registre"] .fields li{padding:20px 0 22px;border-top:1px solid var(--sap-hair)}
[data-world="registre"] .fields li:first-child{border-top:0}
[data-world="registre"] .fields b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:.79rem;letter-spacing:.075em;text-transform:uppercase;line-height:1.35;
  color:var(--sap);margin-bottom:7px}
[data-world="registre"] .fields span{display:block;font-family:var(--font-body);
  font-size:.97rem;line-height:1.52;color:#f0e6dd}
@media(min-width:760px){
  [data-world="registre"] .fields{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s-7)}
  [data-world="registre"] .fields li{padding:22px 0 24px}
  [data-world="registre"] .fields li:nth-child(2){border-top:0}
}
@media(min-width:1080px){
  [data-world="registre"] .fields{grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:var(--s-6)}
  [data-world="registre"] .fields li{border-top:0;border-bottom:0;padding:26px 0 30px;
    box-shadow:inset 0 2px 0 var(--sap-line)}
  /* the labels run to two lines at different points; reserving both keeps the
     four values on one baseline, which is what makes it read as a form */
  [data-world="registre"] .fields b{font-size:.73rem;min-height:2.7em}
  [data-world="registre"] .fields span{font-size:.92rem}
}

/* ---- sections ------------------------------------------------------------ */
[data-world="registre"] .section{padding:clamp(52px,7vw,92px) 0}
[data-world="registre"] .section-tint{background:var(--surface);
  border-block:1px solid var(--line)}
/* the record's leaves alternate between the two stocks, each opened by a
   2px bark rule, the way a form's sheets are separated */
[data-world="registre"] .w-descend>.section{border-block:0;
  border-top:2px solid var(--ink)}
[data-world="registre"] .w-descend>.section:first-child{border-top:0}
[data-world="registre"] .w-descend>.section:nth-child(odd){background:var(--bg)}
[data-world="registre"] .w-descend>.section:nth-child(even){background:var(--surface)}
[data-world="registre"] .sec-head{max-width:none;margin:0 0 var(--s-6);
  padding-bottom:var(--s-4);border-bottom:2px solid var(--ink);display:grid;gap:var(--s-3);
  text-align:left}
[data-world="registre"] .sec-head::after{display:none}
[data-world="registre"] .sec-head :is(h1,h2){font-size:clamp(1.5rem,2.5vw,2.1rem);
  font-weight:680;letter-spacing:-.028em;max-width:24ch;margin:0}
[data-world="registre"] .sec-head p{font-family:var(--font-body);max-width:64ch;
  color:var(--ink-2);font-size:1rem}
[data-world="registre"] .kicker,[data-world="registre"] .eyebrow{display:none}

/* ---- the fiche (services) ------------------------------------------------- */
[data-world="registre"] .fiche{list-style:none;margin:0;padding:0;
  border-top:2px solid var(--ink)}
[data-world="registre"] .fiche li{position:relative;display:grid;gap:8px;padding:20px 0 22px;
  border-bottom:1px solid var(--line)}
[data-world="registre"] .fiche li:focus-within{outline:2px solid var(--heart);
  outline-offset:5px}
[data-world="registre"] .f-h{margin:0;font-family:var(--font-display);font-weight:680;
  letter-spacing:-.024em;line-height:1.16;font-size:clamp(1.12rem,1.6vw,1.44rem)}
[data-world="registre"] .f-h a{color:var(--ink);text-decoration:none}
[data-world="registre"] .f-h a::after{content:"";position:absolute;inset:0}
[data-world="registre"] .f-h a:focus-visible{outline:none}
[data-world="registre"] .fiche li:hover .f-h a{color:var(--heart)}
[data-world="registre"] .f-s{margin:0;font-family:var(--font-body);color:var(--ink-2);
  font-size:1rem;line-height:1.55;max-width:64ch}
/* the row's mark is an empty box on a form; hovering the row stamps it */
[data-world="registre"] .f-go{display:none;width:14px;height:14px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background .24s cubic-bezier(.16,1,.3,1),
    box-shadow .24s cubic-bezier(.16,1,.3,1)}
[data-world="registre"] .fiche li:hover .f-go,
[data-world="registre"] .fiche li:focus-within .f-go{background:var(--heart);
  box-shadow:inset 0 0 0 1px var(--heart)}
@media(min-width:860px){
  [data-world="registre"] .fiche li{
    grid-template-columns:minmax(0,26ch) minmax(0,1fr) 14px;column-gap:var(--s-6);
    align-items:baseline;padding:24px 0 26px}
  [data-world="registre"] .f-go{display:block;align-self:center}
}

/* ---- the rate table ------------------------------------------------------ */
[data-world="registre"] .rates{width:100%;border-collapse:collapse;min-width:0;font-size:1rem;
  margin:0}
[data-world="registre"] .rates th{text-align:left;font-weight:400;color:var(--ink);
  font-family:var(--font-body);padding:14px 0;border-bottom:1px solid var(--line);
  background:none}
[data-world="registre"] .rates td{text-align:right;white-space:nowrap;font-weight:680;
  color:var(--heart);padding:14px 0 14px var(--s-5);border-bottom:1px solid var(--line)}
[data-world="registre"] .rates tr:first-child :is(th,td){border-top:2px solid var(--ink)}
[data-world="registre"] .rates tr:last-child :is(th,td){border-bottom:2px solid var(--ink)}
@media(max-width:559px){
  [data-world="registre"] .rates :is(th,td){display:block;text-align:left;padding:0;border:0;
    white-space:normal}
  [data-world="registre"] .rates th{padding-top:13px;font-size:.98rem}
  [data-world="registre"] .rates td{padding:3px 0 13px;font-size:1.1rem;
    border-bottom:1px solid var(--line)}
  [data-world="registre"] .rates tr:first-child th{border-top:2px solid var(--ink)}
}
[data-world="registre"] .range-note{margin-top:var(--s-5);font-size:.86rem;line-height:1.6;
  max-width:72ch;color:var(--ink-2)}

/* ---- the four steps: numbered, because order is the failure mode ---------- */
[data-world="registre"] .steps{gap:0;border-top:2px solid var(--ink)}
[data-world="registre"] .steps li{counter-increment:st;position:relative;padding:18px 0 20px 56px;
  border-bottom:1px solid var(--line);min-height:0}
[data-world="registre"] .steps li::before{content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:16px;width:auto;height:auto;border-radius:0;background:none;
  color:var(--heart);font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  letter-spacing:.01em;display:block}
[data-world="registre"] .steps li:not(:last-child)::after{content:none}
[data-world="registre"] .steps strong{font-family:var(--font-display);font-weight:680;
  font-size:1.08rem;letter-spacing:-.018em;margin-bottom:5px}
[data-world="registre"] .steps span{font-family:var(--font-body);font-size:1rem;line-height:1.55;
  display:block;max-width:64ch}
@media(min-width:900px){
  [data-world="registre"] .steps{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s-7)}
  [data-world="registre"] .steps li{padding:20px 0 24px 56px}
}

/* ---- areas as ruled rows -------------------------------------------------- */
[data-world="registre"] .w-areas{list-style:none;margin:0;padding:0;
  border-top:2px solid var(--ink)}
[data-world="registre"] .w-areas li{border-bottom:1px solid var(--line)}
[data-world="registre"] .w-areas a{display:grid;gap:5px;padding:19px 0 21px;
  text-decoration:none;color:var(--ink)}
[data-world="registre"] .w-areas b{font-family:var(--font-display);font-weight:680;
  font-size:1.08rem;letter-spacing:-.02em}
[data-world="registre"] .w-areas span{font-family:var(--font-body);color:var(--ink-2);
  font-size:.96rem;line-height:1.5;max-width:66ch}
[data-world="registre"] .w-areas a:hover b{color:var(--heart);text-decoration:underline}
@media(min-width:860px){
  [data-world="registre"] .w-areas a{grid-template-columns:minmax(0,24ch) minmax(0,1fr);
    column-gap:var(--s-6);align-items:baseline}
}
[data-world="registre"] .areas a{border-radius:0;border:1px solid var(--line-strong);
  background:var(--bg);font-weight:600;font-family:var(--font-display)}
[data-world="registre"] .areas a:hover{background:var(--ink);color:var(--bg);
  border-color:var(--ink)}

/* ---- prose --------------------------------------------------------------- */
[data-world="registre"] .prose{font-size:1.05rem;line-height:1.68}
[data-world="registre"] .prose>p{max-width:66ch;margin:0 0 var(--s-5)}
[data-world="registre"] .prose h2{font-family:var(--font-display);font-weight:680;
  font-size:clamp(1.3rem,2vw,1.68rem);letter-spacing:-.026em;margin:var(--s-8) 0 var(--s-4);
  padding-top:var(--s-5);border-top:1px solid var(--line);max-width:66ch}
[data-world="registre"] .article .prose>h2:first-child{margin-top:0;border-top:0;padding-top:0}
[data-world="registre"] .prose a{font-weight:400;color:var(--heart);text-decoration:underline}
[data-world="registre"] .prose strong{font-weight:700;color:var(--ink)}
[data-world="registre"] .callout{margin:var(--s-6) 0;border-left:0;
  border-top:2px solid var(--heart);border-radius:0;background:var(--brand-tint);
  padding:var(--s-4) var(--s-4) var(--s-4) 0}
[data-world="registre"] .sources li{font-family:var(--font-display);font-size:.92rem}

/* ---- page head, crumbs, rail, toc, faq, related -------------------------- */
[data-world="registre"] .page-head{border-bottom:2px solid var(--ink);
  padding:var(--s-5) 0 clamp(30px,4vw,48px)}
[data-world="registre"] .page-head h1{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.08;max-width:21ch}
[data-world="registre"] .page-head .lede{font-family:var(--font-body);max-width:60ch;
  font-size:clamp(1.04rem,.9vw + .85rem,1.18rem)}
[data-world="registre"] .crumbs{padding:15px 0 0;font-size:.71rem;font-weight:650;
  letter-spacing:.1em;text-transform:uppercase}
[data-world="registre"] .crumbs li+li::before{content:"/";color:var(--line-strong);
  font-weight:500}
[data-world="registre"] .meta{font-size:.72rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase}
[data-world="registre"] .side-cta{background:none;border:0;border-top:2px solid var(--ink);
  border-radius:0;padding:var(--s-4) 0 0;gap:var(--s-4)}
[data-world="registre"] .sc-label{font-size:.64rem;letter-spacing:.15em;color:var(--ink-2)}
[data-world="registre"] .sc-phone{color:var(--ink);font-weight:700;letter-spacing:-.014em}
[data-world="registre"] .toc{background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:var(--s-4) 0 0;margin:0 0 var(--s-5)}
[data-world="registre"] .toc h2{font-size:.64rem;letter-spacing:.15em;color:var(--ink-2)}
[data-world="registre"] .toc ol{list-style:none;padding-left:0}
[data-world="registre"] .toc li{margin-bottom:8px;font-size:.92rem}
[data-world="registre"] .faq{gap:0}
[data-world="registre"] .faq details{border:0;border-top:1px solid var(--line);border-radius:0;
  background:none}
[data-world="registre"] .faq details:last-child{border-bottom:1px solid var(--line)}
[data-world="registre"] .faq details[open]{box-shadow:none}
[data-world="registre"] .faq summary{padding:17px 42px 17px 0;border-radius:0;font-weight:650;
  font-size:1.03rem;letter-spacing:-.016em}
[data-world="registre"] .faq summary:hover{background:none;color:var(--heart)}
[data-world="registre"] .faq summary::after{right:6px;border-right-color:var(--heart);
  border-bottom-color:var(--heart);border-right-width:2px;border-bottom-width:2px}
[data-world="registre"] .faq .answer{padding:0 0 20px;font-family:var(--font-body)}
[data-world="registre"] .related{border-top:2px solid var(--ink)}
[data-world="registre"] .related li{border:0;border-top:1px solid var(--line);border-radius:0;
  padding:15px 0}
[data-world="registre"] .related li>a::after{border-radius:0}
[data-world="registre"] .related p{font-family:var(--font-body)}
[data-world="registre"] .lead-list li{border-bottom:1px solid var(--line);padding-bottom:19px}
[data-world="registre"] .lead-list :is(h2,h3){font-family:var(--font-display);font-weight:680;
  letter-spacing:-.024em;font-size:clamp(1.08rem,1.4vw,1.28rem)}
[data-world="registre"] .lead-list .when{font-size:.66rem;letter-spacing:.14em}
[data-world="registre"] .lead-list p{font-family:var(--font-body)}

/* ---- tables -------------------------------------------------------------- */
[data-world="registre"] .table-wrap{border:0;border-radius:0;border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);margin:var(--s-5) 0}
[data-world="registre"] .table-wrap table{min-width:340px}
[data-world="registre"] thead th{background:var(--heart);color:var(--sap);font-size:.68rem;
  letter-spacing:.14em;font-weight:700;border-bottom:0;padding:12px 20px}
[data-world="registre"] :is(tbody th,td){padding:14px 20px;border-bottom:1px solid var(--line)}
[data-world="registre"] tbody th{font-weight:400;font-family:var(--font-body)}
[data-world="registre"] td{font-weight:680}

/* ---- form ---------------------------------------------------------------- */
[data-world="registre"] :is(input,textarea,select){border-radius:2px;background:#fbfaf6;
  border:1px solid var(--line-strong);caret-color:var(--heart);font-family:var(--font-display)}
[data-world="registre"] :is(input,textarea,select):focus-visible{border-color:var(--heart)}
[data-world="registre"] :is(input,textarea):user-invalid{border-color:#a02f18;
  box-shadow:inset 0 0 0 1px #a02f18}
[data-world="registre"] .field label{font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
[data-world="registre"] .quote button{border-radius:0;background:var(--heart);
  border-color:var(--heart);font-weight:650;letter-spacing:.012em}
[data-world="registre"] .quote button:hover{background:var(--brand-deep);
  border-color:var(--brand-deep)}
[data-world="registre"] .quote-aside{background:var(--surface);border:0;
  border-top:2px solid var(--ink);border-radius:0}
[data-world="registre"] .quote-aside h2{font-family:var(--font-display);font-weight:700;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ---- closing bands ------------------------------------------------------- */
[data-world="registre"] .cta-band{background:var(--bark);color:var(--sap);
  padding:clamp(54px,7vw,88px) 0;position:relative}
[data-world="registre"] .cta-band::before{content:"";position:absolute;left:0;right:0;top:0;
  height:2px;background:var(--cambium)}
[data-world="registre"] .cta-band h2{font-family:var(--font-display);
  font-size:clamp(1.44rem,2.3vw,1.95rem);font-weight:680;letter-spacing:-.028em;
  line-height:1.22;max-width:26ch}
[data-world="registre"] .cta-band p{font-family:var(--font-body);color:var(--sap-2)}
[data-world="registre"] .cta-phone{color:var(--sap);font-weight:700;
  font-size:clamp(1.46rem,2.5vw,2rem);letter-spacing:-.02em}
[data-world="registre"] .site-foot{background:var(--foot-bg);margin-top:0}
[data-world="registre"] .site-foot h2{font-family:var(--font-display);font-size:.66rem;
  letter-spacing:.15em;color:var(--foot-dim)}
[data-world="registre"] .foot-about p{font-family:var(--font-body)}
[data-world="registre"] .foot-phone{font-weight:700;letter-spacing:-.016em}
[data-world="registre"] .foot-legal{font-size:.82rem}
[data-world="registre"] .foot-legal p{font-family:var(--font-display)}

/* ---- mobile action bar --------------------------------------------------- */
[data-world="registre"] .actionbar{background:var(--bg);border-top:2px solid var(--ink);
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:9px var(--s-3)
  calc(9px + env(safe-area-inset-bottom,0px))}
[data-world="registre"] .actionbar::before{display:none}
[data-world="registre"] .actionbar .btn{border-radius:0;min-height:48px;font-size:.94rem}


/* ---------- mobile tap-to-call (added 19 Sept 2026) ----------
   The header phone is .only-wide, so below 760px a phone visitor had no
   tap-to-call until ~445px down the page. Show it as an icon-only target
   on narrow screens; the number text stays in the DOM for screen readers. */
@media(max-width:759px){
  .top .phone.only-wide{display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;font-size:0;gap:0;padding:0 12px;min-width:44px;min-height:44px}
  .top .phone.only-wide svg{width:20px;height:20px;flex:none}
}

/* Keep interior enquiry headings readable on their dark band. */
html[data-world="registre"] .cta-band h2{color:#fffdf7}

/* Keep fixed call/quote actions from covering a focused enquiry field on mobile. */
@media(max-width:759px){html{scroll-padding-bottom:100px}form :is(input,select,textarea){scroll-margin-block:100px}body:has(form:focus-within) .actionbar{visibility:hidden;pointer-events:none}}