/* ============================================================
   DOMUS — Design System v2
   Editorial warmth · institutional trust
   ============================================================ */


/* ---------- Tokens ---------- */
:root{
  --paper:#F5F1E8;
  --paper-2:#EDE7DA;
  --paper-3:#E4DCCB;
  --white:#FFFFFF;

  --ink:#15120C;
  --ink-soft:#39332A;
  /* secondary tones, tuned so labels stay legible on --paper-2 as well as
     on white; de-emphasis comes from size and tracking, not from fading out */
  --muted:#665E52;
  --muted-2:#6A6154;

  --line:#DCD3C1;
  --line-2:#E7E0D1;
  --line-strong:#C9BEA8;

  --clay:#A94E2B;
  --clay-d:#8B3E20;
  --clay-l:#C46A45;
  --clay-soft:#F3E3DA;

  --pine:#1E3A31;
  --pine-d:#152B24;
  --pine-l:#2C5445;
  --pine-soft:#DDE8E2;

  --gold:#B98A2E;
  --gold-soft:#F1E6CB;

  --r-s:8px;
  --r:13px;
  --r-l:20px;
  --r-xl:30px;

  --sh-s:0 1px 2px rgba(21,18,12,.05), 0 1px 1px rgba(21,18,12,.03);
  --sh:0 10px 30px -14px rgba(21,18,12,.22);
  --sh-l:0 34px 70px -30px rgba(21,18,12,.38);

  --maxw:1240px;
  --gut:clamp(20px,4vw,44px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16.5px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--clay);color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.15rem);letter-spacing:-.025em}
h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15}
h4{font-size:1.16rem;line-height:1.25}
h5{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
p{color:var(--ink-soft)}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.6;color:var(--muted);max-width:62ch}
.serif{font-family:var(--serif)}
.italic{font-style:italic}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding:clamp(64px,9vw,132px) 0}
.section-sm{padding:clamp(46px,6vw,84px) 0}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* section label — editorial */
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay-d);
}
.kicker::before{content:"";width:26px;height:1px;background:var(--clay-d);display:inline-block}
.kicker.center::after{content:"";width:26px;height:1px;background:var(--clay-d);display:inline-block}
.section-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:20px 0 18px}
.section-head.center h2{margin-inline:auto}

.rule{height:1px;background:var(--line);border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  padding:.92em 1.5em;border-radius:var(--r);border:1px solid transparent;
  transition:transform .35s var(--ease-out),background .25s,color .25s,border-color .25s,box-shadow .35s;
  cursor:pointer;white-space:nowrap;line-height:1;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .35s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 1px 2px rgba(169,78,43,.3)}
.btn-primary:hover{background:var(--clay-d);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(169,78,43,.55)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-2px)}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:var(--pine-d);transform:translateY(-2px)}
.btn-ghost{
  border:2px solid var(--ink);
  color:var(--ink);
  background:var(--paper);
  transition:transform .35s var(--ease-out),border-color .25s,box-shadow .35s;
}
.btn-ghost:hover{
  border-color:var(--clay);
  background:var(--clay);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--lift-3);
}
.btn-ghost:active{
  transform:translateY(0) scale(.98);
  box-shadow:var(--lift-1);
}
.btn-ghost svg{
  transition:stroke .25s var(--ease-out),transform .35s var(--ease-out);
}
.btn-ghost:hover svg{
  stroke:#fff;
  transform:translateX(3px);
}
.btn-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:1.05em 1.8em;font-size:1rem}
.btn-sm{padding:.68em 1.05em;font-size:.85rem}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink);color:rgba(245,241,232,.82);font-size:.8rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:42px}
.topbar-left{display:flex;align-items:center;gap:20px}
.topbar-left .st{display:inline-flex;align-items:center;gap:.5em}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#5FBF8F;box-shadow:0 0 0 3px rgba(95,191,143,.22);display:inline-block}
.topbar-right{display:flex;align-items:center;gap:18px}
.topbar a{color:inherit;transition:color .2s}
.topbar a:hover{color:#fff}
.lang-switch{display:inline-flex;gap:2px;background:rgba(255,255,255,.07);border-radius:7px;padding:2px}
.lang-switch button{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:rgba(245,241,232,.65);
  padding:.32em .6em;border-radius:5px;transition:.2s;line-height:1;
}
.lang-switch button:hover{color:#fff}
.lang-switch button.active{background:var(--clay);color:#fff}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:200;background:rgba(245,241,232,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s;
}
header.site.scrolled{border-bottom-color:var(--line);background:rgba(245,241,232,.94);box-shadow:0 8px 24px -20px rgba(21,18,12,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:34px;border-radius:8px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{font-family:var(--serif);font-size:1.32rem;font-weight:500;letter-spacing:-.02em}
.brand-text small{font-size:.6rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--clay);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;padding:9px;border-radius:9px}
.burger span{width:22px;height:1.7px;background:var(--ink);border-radius:2px;transition:.3s var(--ease-out)}
.burger.open span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(88vw,380px);z-index:190;
  background:var(--paper);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .45s var(--ease-out);
  padding:96px 30px 40px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;
}
.mobile-menu.open{transform:none;box-shadow:var(--sh-l)}
.mobile-menu a{font-family:var(--serif);font-size:1.5rem;padding:12px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
.mobile-menu a.btn{font-family:var(--sans);font-size:.95rem;margin-top:20px;border-bottom:0;color:#fff}
.menu-scrim{position:fixed;inset:0;background:rgba(21,18,12,.4);opacity:0;pointer-events:none;transition:opacity .4s;z-index:180}
.menu-scrim.show{opacity:1;pointer-events:auto}

/* ---------- Hero ---------- */
.hero{padding:clamp(46px,6vw,84px) 0 clamp(60px,7vw,100px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero h1{margin:22px 0 24px}
.hero h1 .u{position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em;background:var(--clay-soft);z-index:-1;border-radius:2px}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:26px;border-top:1px solid var(--line)}
.hero-trust .t{display:inline-flex;align-items:center;gap:.55em;font-size:.86rem;font-weight:500;color:var(--ink-soft)}
.hero-trust svg{width:17px;height:17px;color:var(--pine);flex:none}

.hero-visual{
  position:relative;
  background-image:url('../assets/hero.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(169,78,43,0.2);
  background-blend-mode:multiply;
  box-shadow:var(--sh-l);
}
.hero-frame{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l);aspect-ratio:4/4.7}
.hero .kicker{color:var(--clay-d);}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero h1{color:var(--ink);}
.hero .lead{color:var(--ink-soft);}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(21,18,12,.55));pointer-events:none}
.hero-cap{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff;
  display:flex;align-items:center;gap:11px;background:rgba(21,18,12,.42);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:12px 14px;
}
.hero-cap .ic{width:34px;height:34px;border-radius:9px;background:var(--clay);display:grid;place-items:center;flex:none}
.hero-cap .ic svg{width:17px;height:17px;color:#fff}
.hero-cap b{display:block;font-size:.86rem;font-weight:600}
.hero-cap small{font-size:.72rem;opacity:.8}
/* ---------- Live office status ----------
   Replaces a marketing claim with a fact the visitor can check.
   The time is Tuzla local, not the visitor's, so a diaspora caller
   can tell at a glance whether they are calling inside working
   hours or should send a WhatsApp message instead. */
.st-live{gap:.5em}
.st-live time{
  font-variant-numeric:tabular-nums;font-weight:600;
  color:inherit;letter-spacing:.01em;
}
.st-live .live-sep{color:rgba(245,241,232,.45)}
.st-live .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--live-on);flex:none}
.st-live .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--live-on);
  opacity:0;transform:scale(1);animation:pulse 2.8s var(--ease-out) infinite;
}
.st-live[data-open="false"]{color:rgba(245,241,232,.68)}
.st-live[data-open="false"] time{color:rgba(245,241,232,.68)}
.st-live[data-open="false"] .dot{background:var(--live-off)}
.st-live[data-open="false"] .dot::after{background:var(--live-off);animation:none}
@media (prefers-reduced-motion:reduce){
  .st-live .dot::after{animation:none;opacity:0}
}
@media (max-width:560px){
  .st-live .live-sep,.st-live [data-live-state]{display:none}
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.45}
  65%{transform:scale(2.8);opacity:0}
  100%{transform:scale(2.8);opacity:0}
}



/* ---------- Compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.compare-col{padding:clamp(28px,3.4vw,46px)}
.compare-col.bad{background:var(--paper-2);border-right:1px solid var(--line)}
.compare-col.good{background:var(--pine);color:#fff}
.compare-col.good h3,.compare-col.good .tag{color:#fff}
.compare-col.good p{color:rgba(255,255,255,.72)}
.compare-col.good .mark{background:rgba(255,255,255,.12);color:#fff}
.compare-col h3{margin:14px 0 24px}
.tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.compare-col.good .tag{color:var(--gold-soft)}
.compare-col ul{display:flex;flex-direction:column;gap:20px}
.compare-col li{display:flex;gap:14px;align-items:flex-start}
.compare-col .mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--paper-3);color:var(--muted)}
.compare-col .mark svg{width:14px;height:14px}
.compare-col li b{display:block;font-size:.98rem;font-weight:600;margin-bottom:3px}
.compare-col li p{font-size:.9rem;line-height:1.5}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{
  padding:clamp(26px,3vw,40px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);position:relative;transition:background .35s;display:flex;flex-direction:column;
}
.svc:hover{background:var(--white)}
.svc .ic{width:46px;height:46px;border-radius:11px;background:var(--clay-soft);color:var(--clay);display:grid;place-items:center;margin-bottom:22px;transition:.35s var(--ease-out)}
.svc:hover .ic{background:var(--clay);color:#fff;transform:translateY(-3px)}
.svc .ic svg{width:22px;height:22px}
.svc h3{margin-bottom:12px}
.svc>p{font-size:.92rem;color:var(--muted);margin-bottom:20px}
.svc ul{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.svc li{display:flex;gap:9px;font-size:.87rem;color:var(--ink-soft);align-items:flex-start}
.svc li svg{width:15px;height:15px;color:var(--pine);flex:none;margin-top:3px}
.svc .price{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:8px}
.svc .price span{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.svc .price b{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.svc.featured{background:var(--ink);color:#fff}
.svc.featured:hover{background:#000}
.svc.featured h3,.svc.featured .price b{color:#fff}
.svc.featured>p{color:rgba(245,241,232,.7)}
.svc.featured li{color:rgba(245,241,232,.85)}
.svc.featured li svg{color:var(--gold)}
.svc.featured .ic{background:rgba(185,138,46,.18);color:var(--gold)}
.svc.featured:hover .ic{background:var(--gold);color:var(--ink)}
.svc.featured .price{border-top-color:rgba(255,255,255,.14)}
.svc.featured .price span{color:rgba(245,241,232,.6)}
.svc .badge{position:absolute;top:20px;right:20px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:4px 9px;border-radius:999px}

/* ---------- Dark money section ---------- */
.money{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.money::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:160%;background:radial-gradient(circle,rgba(169,78,43,.22),transparent 62%);pointer-events:none}
.money .kicker{color:var(--gold-soft)}
.money .kicker::before{background:var(--gold-soft)}
.money h2{color:#fff}
.money .lead{color:rgba(245,241,232,.72)}
.money-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center;position:relative}
.money-steps{display:flex;flex-direction:column;gap:2px;margin:34px 0}
.money-step{display:flex;gap:18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}
.money-step:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.money-step .n{font-family:var(--serif);font-size:1.5rem;color:var(--gold);flex:none;width:34px}
.money-step b{display:block;font-size:1.02rem;font-weight:600;margin-bottom:4px}
.money-step p{font-size:.9rem;color:rgba(245,241,232,.66)}

/* receipt */
.receipt{
  background:var(--paper);color:var(--ink);border-radius:var(--r);padding:28px 26px;
  box-shadow:var(--sh-l);position:relative;font-family:var(--sans);
}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:9px;background:radial-gradient(circle at 9px 0,transparent 8px,var(--ink) 8px) repeat-x;background-size:18px 9px}
.receipt::before{top:-1px;transform:rotate(180deg)}
.receipt::after{bottom:-1px}
.receipt .rh{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px dashed var(--line-strong);margin-bottom:16px}
.receipt .rh b{font-family:var(--serif);font-size:1.15rem;font-weight:500}
.receipt .rh .st{font-size:.72rem;font-weight:600;color:var(--pine);background:var(--pine-soft);padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:.4em}
.receipt .rrow{display:flex;justify-content:space-between;padding:9px 0;font-size:.92rem;font-variant-numeric:tabular-nums}
.receipt .rrow span{color:var(--muted)}
.receipt .rrow b{font-weight:600}
.receipt .rrow.total{border-top:1px dashed var(--line-strong);margin-top:8px;padding-top:14px;font-size:1.02rem}
.receipt .rrow.total b{color:var(--pine);font-family:var(--serif);font-size:1.3rem;font-weight:500}
.receipt .seal{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:.8rem;color:var(--muted)}
.receipt .seal svg{width:16px;height:16px;color:var(--pine)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:32px 24px 32px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step .num{font-family:var(--serif);font-size:1.1rem;color:var(--clay-d);display:block;margin-bottom:18px}
.step h4{margin-bottom:9px}
.step p{font-size:.88rem;color:var(--muted)}

/* ---------- Coverage + map ---------- */
.coverage{background:var(--paper-2)}
.cov-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.cov-list{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.cov-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:500;transition:.25s;
}
.cov-chip small{color:var(--muted);font-variant-numeric:tabular-nums}
.cov-chip:hover{border-color:var(--clay);color:var(--clay)}
.cov-chip svg{width:13px;height:13px;color:var(--pine)}

.map-wrap{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;box-shadow:var(--sh-s)}
.map-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.map-node{cursor:pointer}
.map-node circle{transition:.3s var(--ease-out);fill:var(--pine-soft);stroke:var(--pine);stroke-width:1.5}
.map-node text{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--ink-soft);pointer-events:none}
.map-node:hover circle,.map-node.active circle{fill:var(--clay);stroke:var(--clay-d)}
.map-node.active text{fill:var(--clay-d)}
.map-info{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
/* the name and its hint were meeting on one line with no separator */
.map-info>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.map-info b{font-family:var(--serif);font-size:1.3rem;font-weight:500}
.map-info span{font-size:.85rem;color:var(--muted)}
.map-info .pop{font-variant-numeric:tabular-nums;font-weight:600;color:var(--clay);font-size:.95rem}

/* ---------- Report / video ---------- */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.report-visual{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l);aspect-ratio:4/3.4}
.report-visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.report-visual:hover img{transform:scale(1.04)}
.report-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,18,12,.22)}
.report-play button{
  width:82px;height:82px;border-radius:50%;background:rgba(245,241,232,.94);color:var(--ink);
  display:grid;place-items:center;transition:.35s var(--ease-out);box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
}
.report-play button:hover{transform:scale(1.08);background:#fff}
.report-play svg{width:28px;height:28px;margin-left:4px}
.report-feats{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.report-feat{display:flex;gap:16px}
.report-feat .ic{width:42px;height:42px;border-radius:11px;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;flex:none}
.report-feat .ic svg{width:20px;height:20px}
.report-feat b{display:block;font-size:.98rem;font-weight:600;margin-bottom:3px}
.report-feat p{font-size:.88rem;color:var(--muted)}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{
  border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(28px,3vw,40px);background:var(--paper);
  display:flex;flex-direction:column;position:relative;transition:.35s var(--ease-out);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-strong)}
.plan.featured{background:var(--pine);color:#fff;border-color:var(--pine)}
.plan.featured h3,.plan.featured .amount{color:#fff}
.plan.featured .desc,.plan.featured li{color:rgba(255,255,255,.78)}
.plan.featured li svg{color:var(--gold-soft)}
.plan .pbadge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--clay);color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.plan h3{margin-bottom:8px}
.plan .desc{font-size:.9rem;color:var(--muted);margin-bottom:22px;min-height:2.6em}
.plan .amount{font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.02em;line-height:1;margin-bottom:24px;display:flex;align-items:baseline;gap:6px}
.plan .amount small{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--muted)}
.plan.featured .amount small{color:rgba(255,255,255,.6)}
.plan ul{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.plan li{display:flex;gap:10px;font-size:.89rem;align-items:flex-start}
.plan li svg{width:16px;height:16px;color:var(--pine);flex:none;margin-top:2px}
.plan .btn{margin-top:auto}



/* ---------- Guarantees ---------- */
.guar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.guar{padding:clamp(24px,2.6vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.guar:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.guar .ic{width:42px;height:42px;border-radius:11px;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;margin-bottom:18px}
.guar .ic svg{width:20px;height:20px}
.guar h4{margin-bottom:8px}
.guar p{font-size:.86rem;color:var(--muted)}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(26px,3vw,36px);background:var(--paper);display:flex;flex-direction:column}
.quote .mark{font-family:var(--serif);font-size:3rem;line-height:.6;color:var(--clay);height:26px}
.quote p{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--ink);margin:14px 0 24px;font-style:italic}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2)}
.quote .av{width:40px;height:40px;border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;flex:none}
.quote .who b{display:block;font-size:.92rem;font-weight:600}
.quote .who small{font-size:.78rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);max-width:900px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:26px 0;font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.36rem);font-weight:400;color:var(--ink);transition:color .2s}
.faq-q:hover{color:var(--clay)}
.faq-q .plus{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:.35s var(--ease-out)}
.faq-q .plus svg{width:15px;height:15px;transition:transform .35s var(--ease-out)}
.faq-item.open .plus{background:var(--clay);border-color:var(--clay);color:#fff}
.faq-item.open .plus svg{transform:rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
.faq-a p{padding:0 56px 26px 0;font-size:.96rem;color:var(--muted);line-height:1.65}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
.field .req{color:var(--clay)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--r-s);
  background:var(--white);font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-soft)}
.field input.err,.field select.err,.field textarea.err{border-color:#C0392B;box-shadow:0 0 0 3px #FBE7E4}
.field .msg{font-size:.78rem;color:#C0392B;display:none}
.field .msg.show{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(26px,3.4vw,44px);box-shadow:var(--sh-s)}
.form-note{font-size:.82rem;color:var(--white);margin-top:14px;display:flex;gap:8px;align-items:flex-start;background:rgba(0,0,0,0.4);padding:8px 12px;border-radius:var(--r-s);}
.form-note svg{width:15px;height:15px;color:var(--pine);flex:none;margin-top:2px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .ok{width:64px;height:64px;border-radius:50%;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;margin:0 auto 20px}
.form-success .ok svg{width:30px;height:30px}
.form-success h3{margin-bottom:10px}
.form-success p{color:var(--muted);margin-bottom:22px}

/* ---------- Newsletter ---------- */
.news{background:var(--pine);color:#fff;border-radius:var(--r-xl);padding:clamp(38px,5vw,72px);position:relative;overflow:hidden}
.news::before{content:"";position:absolute;right:-8%;top:-40%;width:50%;height:180%;background:radial-gradient(circle,rgba(185,138,46,.22),transparent 60%)}
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,64px);align-items:center;position:relative}
.news h2{color:#fff;margin:16px 0 12px}
.news p{color:rgba(255,255,255,.74)}
.news .kicker{color:var(--gold-soft)}
.news .kicker::before{background:var(--gold-soft)}
.news-form{display:flex;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:8px}
.news-form input{flex:1;background:transparent;border:0;color:#fff;padding:12px 14px;font-size:.95rem}
.news-form input::placeholder{color:rgba(255,255,255,.55)}
.news-form input:focus{outline:none}
.news-ok{font-size:.85rem;color:var(--gold-soft);margin-top:12px;display:none}
.news-ok.show{display:block}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(44px,6vw,90px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:50%;top:-60%;width:80%;height:200%;transform:translateX(-50%);background:radial-gradient(circle,rgba(169,78,43,.28),transparent 60%)}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(245,241,232,.72);max-width:60ch;margin:18px auto 32px;position:relative}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-band .kicker{color:var(--gold-soft);position:relative}
.cta-band .kicker::before{background:var(--gold-soft)}

/* ---------- Page hero ---------- */
.page-hero{padding:clamp(40px,5vw,68px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.crumbs a:hover{color:var(--clay)}
.crumbs span{opacity:.5}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:20px;max-width:16ch}
.page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem)}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:rgba(245,241,232,.72);padding:clamp(56px,7vw,96px) 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(30px,4vw,60px);padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .brand{margin-bottom:20px}
.foot-brand .brand-text b{color:#fff}
.foot-brand .brand-text small{color:var(--gold-soft)}
.foot-brand p{font-size:.9rem;color:rgba(245,241,232,.6);max-width:38ch}
.foot-social{display:flex;gap:10px;margin-top:22px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.25s}
.foot-social a:hover{background:var(--clay);border-color:var(--clay);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}
.foot-col h5{color:rgba(245,241,232,.5);margin-bottom:18px}
.foot-col a{display:block;font-size:.9rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.82rem;color:rgba(245,241,232,.5)}
.foot-bottom a:hover{color:#fff}

/* ---------- FAB ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:150;display:flex;flex-direction:column;gap:11px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--sh);transition:.3s var(--ease-out)}
.fab a:hover{transform:translateY(-3px) scale(1.05)}
.fab svg{width:23px;height:23px}
.fab .wa{background:#25D366}
.fab .call{background:var(--ink)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;opacity:0;pointer-events:none;transition:opacity .35s}
.modal.open{opacity:1;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:rgba(21,18,12,.72);backdrop-filter:blur(6px)}
/* the box is a column: the title never scrolls away, the document does.
   Without the height cap a phone cuts the title and the close button off
   the top of the screen and there is nowhere to scroll to reach them. */
.modal-box{
  position:relative;background:var(--ink);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-l);max-width:720px;width:100%;
  max-height:min(86vh,860px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.72);
  transform:translateY(14px) scale(.98);transition:transform .4s var(--ease-out);
}
@supports (height:100dvh){.modal-box{max-height:min(86dvh,860px)}}
.modal.open .modal-box{transform:none}
.modal-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
}
.modal-head b{color:#fff;font-family:var(--serif);font-size:1.1rem;font-weight:500}
.modal-close{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);transition:.2s}
.modal-close:hover{background:var(--clay)}
.modal-close svg{width:17px;height:17px}
.modal-body{
  overflow-y:auto;overscroll-behavior:contain;
  color:rgba(245,241,232,.86);font-size:.95rem;line-height:1.62;
}
/* height:auto is the point: the width/height attributes on the img would
   otherwise stretch the photo into a near-square */
.modal-shot img{width:100%;height:auto;display:block;max-height:min(56vh,520px);object-fit:cover}
.modal-shot figcaption{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);font-size:.78rem;color:rgba(245,241,232,.7);
}
.modal-shot .ms-when{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.modal-shot .ms-where{display:flex;align-items:center;gap:6px}
.modal-shot .ms-where svg{width:13px;height:13px;flex:none}
.modal-shot .ms-where span:last-child{color:#fff;font-weight:600}
.modal-shot .ms-stamp{
  margin-left:auto;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(196,138,46,.5);color:var(--gold-soft);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
/* the colour is set on the p itself, not inherited: a bare `p` rule sits
   on the element, and inheritance never wins over a declaration */
.modal-note{margin:0;padding:18px 20px 24px;color:rgba(245,241,232,.86)}

/* ---------- Estimator ---------- */
.est{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--paper)}
.est-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.est-tab{flex:1;min-width:120px;padding:16px 18px;font-size:.86rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:.2s;white-space:nowrap}
.est-tab:hover{color:var(--ink)}
.est-tab.active{color:var(--clay);border-bottom-color:var(--clay)}
.est-body{padding:clamp(22px,3vw,34px)}
.est-panel{display:none}
.est-panel.active{display:block}
.est-opt{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.est-opt:last-child{border-bottom:0}
.est-opt input{width:19px;height:19px;accent-color:var(--clay);flex:none;cursor:pointer}
.est-opt .t{flex:1;font-size:.92rem}
.est-opt .p{font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.est-total{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-strong);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.est-total .lbl small{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.est-total .lbl b{font-size:.95rem}
.est-total .amt{font-family:var(--serif);font-size:clamp(2rem,3vw,2.6rem);font-weight:500;letter-spacing:-.02em}

/* ---------- Calculator ---------- */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(26px,3vw,38px);box-shadow:var(--sh-s)}
.calc .field input{font-size:1.3rem;font-family:var(--serif);padding:14px 16px}
.calc-out{margin-top:22px;border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:13px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem}
.calc-row span{color:var(--muted)}
.calc-row b{font-variant-numeric:tabular-nums;font-weight:600}
.calc-row.big b{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--pine)}
.calc-note{font-size:.8rem;color:var(--muted);margin-top:16px}

/* ---------- Coverage checker ---------- */
.checker-out{margin-top:14px;font-size:.92rem;padding:14px 16px;border-radius:var(--r-s);display:none;line-height:1.5}
.checker-out.ok,.checker-out.warn{display:block}
.checker-out.ok{background:var(--pine-soft);color:var(--pine-d)}
.checker-out.warn{background:var(--gold-soft);color:#6b4e12}
.checker-out b{display:block;margin-bottom:2px;font-weight:600}
/* the answer is followed by the obvious next step, styled as a link so
   it reads as a continuation of the sentence rather than a second button */
.checker-cta{
  display:inline-block;margin-top:9px;font-weight:600;font-size:.88rem;
  color:var(--clay-d);border-bottom:1px solid var(--clay-l);padding-bottom:1px;
  transition:color .2s,border-color .2s;
}
.checker-cta:hover{color:var(--ink);border-color:var(--ink)}
.checker-out.warn .checker-cta{color:var(--ink);border-color:var(--line-strong)}

.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ---------- Helpers ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px)}
.mt-s{margin-top:18px}.mt{margin-top:34px}.mt-l{margin-top:56px}
.text-c{text-align:center}
.nowrap{white-space:nowrap}
/* available to screen readers, invisible on the page */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   v3 — INSTITUTIONAL LAYER
   Proof artifact · specifications · tariff · standards.
   Rules, hairlines and tabular figures — not floating cards.
   The buyer is checking facts, not browsing a template.
   ============================================================ */

/* ---------- Proof specimen (the product, shown) ---------- */
/* The proof card is also used inside the dark .money bands, where the
   section sets color:#fff. Without its own colours the heading and the
   metadata labels would inherit white and land on the card's light
   panels. Same treatment as .ledger. */
.proof{
  background:var(--white);border:1px solid var(--line-strong);
  box-shadow:0 24px 60px -34px rgba(21,18,12,.5);position:relative;color:var(--ink);
}
.proof-h{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper);
}
.proof-h .who{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink)}
.proof-h .who span{display:block;font-size:.76rem;font-weight:500;color:var(--muted-2);letter-spacing:.02em}
.proof-h .when{text-align:right;font-size:.76rem;color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.proof-h .when b{display:block;font-size:.84rem;color:var(--ink);font-weight:600}
.proof-img{position:relative;background:var(--paper-3)}
/* height:auto is required: the <img width/height> attributes are presentational
   hints, and without this the attribute height wins over aspect-ratio. */
.proof-img img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
/* the stamp has to stay legible over any part of the photo, so it
   carries its own dark plate rather than relying on the image behind it */
.proof-img .stamp{
  position:absolute;right:16px;bottom:16px;
  border:2px solid var(--gold-soft);color:var(--gold-soft);
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 12px;border-radius:3px;transform:rotate(-6deg);
  background:rgba(21,18,12,.82);backdrop-filter:blur(3px);
}
.proof-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-meta div{padding:13px 16px;border-right:1px solid var(--line-2)}
.proof-meta div:last-child{border-right:0}
.proof-meta dt{font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.proof-meta dd{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.proof-note{padding:18px 20px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.proof-note b{font-weight:600;color:var(--ink)}
.proof-sign{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);
}
.proof-sign .sig{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--ink-soft)}
.proof-sign .ok{display:inline-flex;align-items:center;gap:.45em;font-size:.76rem;font-weight:600;color:var(--pine);letter-spacing:.02em}
.proof-sign .ok svg{width:14px;height:14px}

/* ---------- Hero segment ----------
   Two customers rather than two variants of one. The control sits under
   the call to action because that is the thing it changes, and it is a
   control rather than a question: it does not ask anything, it swaps the
   artifact and the destination. */
.hero-seg{margin:0 0 16px}
.hero-seg .seg-btn{font-size:.8rem;padding:12px 10px}
/* only one hero artifact is ever mounted-visible; the other stays in the
   DOM so its translations survive a language switch */
.hero-visual>[hidden]{display:none}
.hero-visual .ledger{margin:0}

/* One frame for two artifacts. The report is 647px tall and the statement
   319px, so in a centred grid the shorter one re-centres itself the moment
   it appears: the panel slides down and, because the row is now shorter
   than the text column, the headline slides with it. Giving both artifacts
   and both captions the same grid cell makes the column exactly as tall as
   the taller of the two at all times, so a click swaps the paper and
   nothing else. A phone is a single column, so it needs none of this. */
@media(min-width:821px){
  .hero-visual{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
  }
  .hero-visual>.hero-seg{grid-area:1/1;margin-bottom:16px}
  .hero-visual>[data-hero-art]{grid-area:2/1;align-self:start}
  .hero-visual>[data-hero-cap]{grid-area:3/1;align-self:start}
  /* the statement is the artifact in this mode, so it fills the frame the
     way the report fills it, instead of leaving the plate bare below it */
  .hero-visual>[data-hero-art="flat"]{
    align-self:stretch;display:flex;flex-direction:column;
  }
  .hero-visual [data-hero-art="flat"] .led-panels{
    flex:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:0;
  }
  .hero-visual [data-hero-art="flat"] .led-panel{
    grid-area:1/1;display:flex;flex-direction:column;min-height:0;
  }
  /* same rule as above, one level in: both examples keep their cell, so
     reading the short-term statement cannot resize the card either */
  .hero-visual [data-hero-art="flat"] .led-panel[hidden]{
    display:flex;visibility:hidden;pointer-events:none;
  }
  .hero-visual [data-hero-art="flat"] .ledger-rows{
    flex:1;display:flex;flex-direction:column;
  }
  /* the rows share whatever height is left over, so a two-row statement
     reads as a spacious invoice instead of a card with a hole in it */
  .hero-visual [data-hero-art="flat"] .lrow{
    flex:1;align-items:center;
  }
  .hero-visual [data-hero-art="flat"] .ledger-cap{margin-top:auto}
  /* off screen, but still in its cell: this is what keeps the frame from
     resizing, and it is why the rule has to outrank the display:none above */
  .hero-visual>[data-hero-art][hidden],
  .hero-visual>[data-hero-cap][hidden]{
    display:block;visibility:hidden;pointer-events:none;
  }
}

.proof-expand{
  position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:.5em;
  background:rgba(21,18,12,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;
  padding:8px 14px 8px 11px;font-size:.76rem;font-weight:600;transition:.25s var(--ease-out);
}
.proof-expand:hover{background:var(--clay);border-color:var(--clay);transform:translateY(-2px)}
.proof-expand svg{width:15px;height:15px}

/* ---------- Rental band ---------- */
.rent-band .money-grid{align-items:center}
.rent-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.rent-facts div{padding:18px 4px 4px 0;border-right:1px solid rgba(255,255,255,.12)}
.rent-facts div:last-child{border-right:0;padding-left:18px}
.rent-facts div:nth-child(2){padding-left:18px}
.rent-facts b{
  display:block;font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);
  font-weight:500;color:var(--gold-soft);letter-spacing:-.02em;line-height:1;margin-bottom:8px;
}
.rent-facts span{font-size:.78rem;letter-spacing:.06em;color:rgba(245,241,232,.66)}

/* ---------- Ledger (monthly statement) ----------
   The landlord's proof of value. Deliberately monochrome and dense:
   it should look like a bank statement, not a marketing card. */
/* The ledger is also used inside the dark .money bands, where the section
   sets color:#fff. Without its own colours the figures would inherit white
   and land on the ledger's own light panels. */
.ledger{
  background:var(--white);border:1px solid var(--line-strong);
  box-shadow:0 24px 60px -34px rgba(21,18,12,.45);position:relative;color:var(--ink);
}
.ledger-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px 20px;background:var(--ink);color:#fff;
}
.ledger-h b{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:#fff}
.ledger-h span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.ledger-rows{padding:6px 0}
.lrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 20px;border-bottom:1px solid var(--line-2);
}
.lrow span{font-size:.9rem;color:var(--ink-soft)}
.lrow b{font-variant-numeric:tabular-nums;font-weight:600;font-size:.95rem;white-space:nowrap;color:var(--ink)}
.lrow.sub span{color:var(--muted);font-size:.85rem}
.lrow.sub b{font-weight:500;color:var(--clay-d)}
.ledger-total{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 20px;background:var(--paper);border-top:1px solid var(--line-strong);color:var(--ink);
}
.ledger-total small{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;
}
.ledger-total b{font-family:var(--serif);font-size:1.7rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ledger-total .chip{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--pine);
  background:var(--pine-soft);padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.ledger-cap{padding:13px 20px 0;font-size:.76rem;color:var(--muted);line-height:1.5}

/* ---------- The statement's own example chooser ----------
   Scoped to the hero artifact: najam.html's ledgers are the same component
   and must keep the plain document look. */
.led-seg{
  margin:0;border:0;border-bottom:1px solid var(--line-strong);
  grid-template-columns:1fr 1fr;
}
.led-seg .seg-btn{padding:11px 10px;font-size:.8rem;background:var(--paper-2)}
.led-seg .seg-btn.active{background:var(--white)}
.led-panel .ledger-rows{padding:2px 0}
.led-incl{list-style:none;margin:0;padding:14px 20px 16px;border-top:1px solid var(--line-2)}
.led-incl>b{
  display:block;margin-bottom:8px;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.led-incl li{
  display:flex;align-items:flex-start;gap:9px;padding:3px 0;
  font-size:.82rem;line-height:1.45;color:var(--ink-soft);
}
.led-incl svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--pine)}

/* ---------- Segmented control ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-strong);margin-bottom:22px}
.seg-btn{
  padding:13px 10px;font-size:.84rem;font-weight:600;color:var(--muted);
  background:var(--paper);border-bottom:3px solid transparent;transition:.2s;
}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{background:var(--white);color:var(--clay);border-bottom-color:var(--clay)}

/* ---------- Checkline ---------- */
.checkline{
  display:flex;align-items:flex-start;gap:11px;padding:12px 14px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  font-size:.86rem;line-height:1.45;cursor:pointer;transition:.2s;
}
.checkline:hover{border-color:var(--clay)}
.checkline input{width:18px;height:18px;accent-color:var(--clay);flex:none;margin-top:1px;cursor:pointer}

/* Reused inside the light calculator, where the default light copy would
   be paper on paper. */
.money-steps.on-light .money-step{border-color:var(--line)}
.money-steps.on-light .money-step b{color:var(--ink)}
.money-steps.on-light .money-step p{color:var(--muted)}
.money-steps.on-light .money-step .n{color:var(--clay-d)}

/* ---------- Specification list (replaces vanity stats) ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.spec{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.spec:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.spec dt{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:9px}
.spec dd{font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.spec dd b{display:block;font-family:var(--serif);font-size:1.28rem;font-weight:500;color:var(--ink);margin-bottom:5px;letter-spacing:-.02em}

/* ---------- Tariff (institutional price list) ---------- */
.tariff{border:1px solid var(--line-strong);background:var(--white)}
.tariff-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line-strong);background:var(--paper);
}
.tariff-h b{font-family:var(--serif);font-size:1.1rem;font-weight:500}
.tariff-h span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tariff-cat{
  padding:13px 22px;background:var(--ink);color:var(--gold-soft);
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.tariff-row{
  display:grid;grid-template-columns:1.5fr 2.2fr auto;gap:20px;align-items:baseline;
  padding:15px 22px;border-bottom:1px solid var(--line-2);
}
.tariff-row:last-child{border-bottom:0}
.tariff-row dt{font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.35}
.tariff-row dd{font-size:.84rem;color:var(--muted);line-height:1.5}
.tariff-row .p{
  font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tariff-row .p small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:500;color:var(--muted-2);letter-spacing:.04em;margin-top:2px}
.tariff-row:hover{background:var(--paper)}
.tariff-note{padding:16px 22px;border-top:1px solid var(--line-strong);background:var(--paper);font-size:.82rem;color:var(--muted);line-height:1.6}
.tariff-note b{color:var(--ink-soft);font-weight:600}

/* ---------- Standards (how we verify) ---------- */
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.std{padding:clamp(24px,2.8vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.std .n{font-family:var(--serif);font-size:1.05rem;color:var(--clay-d);display:block;margin-bottom:14px;letter-spacing:-.01em}
.std h4{margin-bottom:10px}
.std p{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:16px}
.std .check{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:.78rem;color:var(--ink-soft);
}
.std .check b{display:block;font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pine);margin-bottom:4px}

/* ---------- Failure modes (publish the risk) ---------- */
.fail{border-top:1px solid var(--line-strong)}
.fail-row{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(20px,3vw,44px);padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.fail-row:last-child{border-bottom:0}
.fail-q{font-size:.96rem;font-weight:600;color:var(--ink);line-height:1.45;display:flex;gap:12px;align-items:flex-start}
.fail-q i{
  font-style:normal;flex:none;width:22px;height:22px;border:1px solid var(--clay-d);color:var(--clay-d);
  border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:700;margin-top:1px;
}
.fail-a{font-size:.88rem;color:var(--muted);line-height:1.65}
.fail-a b{color:var(--ink-soft);font-weight:600}

/* ---------- Fact table (legal entity, payment, insurance) ---------- */
.facts{border-top:1px solid var(--line-strong)}
.facts-row{display:grid;grid-template-columns:1fr 1.9fr;gap:clamp(18px,3vw,40px);padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.facts-row:last-child{border-bottom:0}
.facts-row dt{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);line-height:1.5}
.facts-row dd{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.facts-row dd b{color:var(--ink);font-weight:600}

/* ---------- High-stakes work (project based) ---------- */
.big-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.big{padding:clamp(26px,3vw,40px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s}
.big:hover{transform:translateY(-4px);box-shadow:var(--sh-l);background:var(--white)}
.big .tag{font-size:.64rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--clay-d);margin-bottom:16px;display:block}
.big h3{margin-bottom:12px}
.big>p{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:18px}
.big ul{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.big li{font-size:.83rem;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.big li svg{width:14px;height:14px;color:var(--pine);flex:none;margin-top:3px}
.big .price{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.big .price b{font-family:var(--serif);font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.big .price small{font-size:.76rem;color:var(--muted);width:100%;line-height:1.4}

/* ---------- Payment / invoicing ---------- */
.pay-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pay{padding:clamp(20px,2.4vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pay b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:500;margin-bottom:6px}
.pay p{font-size:.84rem;color:var(--muted);line-height:1.55}

/* ---------- Deep-link callout (in-page section links) ---------- */
.jump{
  display:flex;flex-wrap:wrap;gap:2px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper);
}
.jump a{
  padding:13px 18px;font-size:.85rem;font-weight:500;color:var(--ink-soft);
  border-right:1px solid var(--line);transition:background .2s,color .2s;white-space:nowrap;
}
.jump a:last-child{border-right:0}
.jump a:hover{background:var(--ink);color:var(--paper)}

/* ---------- Muted figure for the standard's holder ---------- */
.slot{
  font-family:var(--serif);font-style:italic;color:var(--muted-2);
}

/* ---------- Grid children must be allowed to shrink ----------
   A `1fr` track resolves to `minmax(auto, 1fr)`, so a single wide child
   (e.g. a scrollable tab bar) can force the whole track past the viewport
   and create horizontal overflow. `min-width:0` restores the intended
   shrink behaviour and lets the child scroll inside its own box. */
.grid-2>*,.money-grid>*,.cov-grid>*,.report-grid>*,.news-grid>*,
.hero-grid>*,.price-grid>*,.svc-grid>*,.guar-grid>*,.std-grid>*,
.big-grid>*,.spec-grid>*,.steps>*,.foot-grid>*,.strip .container>*,
.pricestrip-in>*,
.est,.est-tabs,.est-body,.est-panel,.ledger,.calc{min-width:0}

/* ============================================================
   v4 — TYPOGRAPHY, FOCUS, MOTION BUDGET
   ============================================================ */

/* ---------- Balanced rag ----------
   Headings set as display text should not leave orphans or rivers.
   `balance` evens the lines across the whole heading; `pretty`
   does the same for body copy without over-constraining measure. */
h1,h2,h3,h4,.balance{text-wrap:balance}
p,.lead,.pretty{text-wrap:pretty}
/* balance needs a measure to work with, not a full 1240px line */
h1{max-width:17ch}
h2{max-width:22ch}
h3{max-width:30ch}
.section-head h2,.grid-2 h2{max-width:26ch}
/* the German translations run ~30% longer than the Bosnian originals,
   so give them room rather than letting them wrap into a ladder */
html[lang="de"] h1{max-width:20ch}
html[lang="de"] h2{max-width:26ch}
html[lang="de"] h3{max-width:34ch}

/* ---------- Anchor offset ----------
   The header is sticky at 74px, so any in-page target would otherwise
   slide underneath it and lose its heading. */
:where(section,div,article)[id]{scroll-margin-top:96px}

/* ---------- Focus ring ----------
   A double ring (surface gap + accent) stays visible on every
   background, light or dark, without relying on the default outline. */
:root{
  --ring-accent:var(--clay);
  --ring-gap:var(--paper);
}
/* dark surfaces flip the ring so it keeps its contrast */
.money,.cta-band,footer.site,.rent-band,.form-card--dark{--ring-accent:var(--gold-soft);--ring-gap:var(--ink)}
:focus-visible{
  outline:2px solid var(--ring-accent);
  outline-offset:2px;
  border-radius:3px;
}
/* controls that already carry their own focus treatment */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-soft)
}
.skip{
  position:absolute;left:12px;top:-60px;z-index:400;
  background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:0 0 8px 8px;
  font-size:.86rem;font-weight:600;transition:top .2s var(--ease-out);
}
.skip:focus{top:0}

/* ---------- Scroll progress ----------
   transform:scaleX is composited, so this never triggers layout. */
.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.progress{transition:none}}

/* ---------- Condensed header on scroll ---------- */
header.site{transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header.site .nav{transition:height .3s var(--ease)}
header.site.scrolled .nav{height:60px}

/* ---------- Press feedback ----------
   transform-only, so it stays on the compositor. */
.btn:active{transform:translateY(1px) scale(.988);transition-duration:.08s}
.est-tab:active,.seg-btn:active,.lang-switch button:active{transform:scale(.97)}
.est-opt:has(input:active){background:var(--paper-2)}

/* ---------- Touch targets ----------
   Small controls get a larger hit area without changing their look. */
.lang-switch button{position:relative}
.lang-switch button::after{content:"";position:absolute;inset:-6px -2px}
.seg-btn,.est-tab{min-height:46px}
.map-node{cursor:pointer}
@media(pointer:coarse){
  .btn{min-height:48px}
  .fab a{width:54px;height:54px}
  .faq-q{min-height:56px}
}

/* ---------- Language invitation ---------- */
.langinvite{
  position:fixed;left:50%;bottom:22px;z-index:320;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:14px 16px 14px 20px;border-radius:var(--r-l);
  background:var(--ink);color:#fff;box-shadow:var(--sh-l);
  max-width:min(94vw,560px);
  /* the slide-out is a percentage of the panel's own height, so raising
     `bottom` to clear the bottom bar used to leave it painted on screen.
     Hiding on visibility as well makes the hidden state independent of
     both the height and the offset; the delay keeps the slide. */
  visibility:hidden;
  transition:transform .5s var(--ease-out),visibility 0s .5s;
}
.langinvite.show{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease-out),visibility 0s}
.langinvite p{color:rgba(245,241,232,.86);font-size:.9rem;line-height:1.4;margin:0;flex:1 1 220px}
.langinvite p b{color:#fff}
.langinvite .li-actions{display:flex;gap:8px;flex:none}
.langinvite .btn{padding:.7em 1.05em;font-size:.86rem}
.langinvite .li-dismiss{
  color:rgba(245,241,232,.6);font-size:.8rem;padding:8px 4px;text-decoration:underline;
  text-underline-offset:3px;transition:color .2s;
}
.langinvite .li-dismiss:hover{color:#fff}
@media (max-width:560px){
  .langinvite{left:12px;right:12px;bottom:12px;transform:translateY(140%);max-width:none}
  .langinvite.show{transform:translateY(0)}
}

/* ---------- Fee composition bar ----------
   Turns a column of numbers into one glanceable picture. */
.feebar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--paper-3);margin-top:20px}
.feebar i{display:block;height:100%;transition:width .55s var(--ease-out)}
.feebar .fb-net{background:var(--pine)}
.feebar .fb-fee{background:var(--clay)}
.feebar .fb-rest{background:var(--paper-3)}
.feekey{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;font-size:.78rem;color:var(--muted)}
.feekey span{display:inline-flex;align-items:center;gap:.5em}
.feekey b{width:9px;height:9px;border-radius:2px;display:inline-block}
.feekey .k-net{background:var(--pine)}
.feekey .k-fee{background:var(--clay)}
.calc-row.big b{transition:color .3s}
.calc.flash .calc-row.big b{color:var(--clay)}

/* ============================================================
   v5 — DEPTH, MATERIAL, AND THE CONTOUR FIELD
   Tuzla lies in the Banjska river valley below Slana Banja, so a
   contour field is a geographically honest motif as well as a
   visual signature. Generated once, cached with the stylesheet.
   ============================================================ */
:root{
  --contour:url("--contour:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20900%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%200.0%2043.1%20C%2015.0%2046.7%2C%2060.0%2059.7%2C%2090.0%2064.8%20C%20120.0%2069.9%2C%20150.0%2074.7%2C%20180.0%2073.6%20C%20210.0%2072.6%2C%20240.0%2059.3%2C%20270.0%2058.5%20C%20300.0%2057.7%2C%20330.0%2070.6%2C%20360.0%2068.6%20C%20390.0%2066.6%2C%20420.0%2049.9%2C%20450.0%2046.3%20C%20480.0%2042.6%2C%20510.0%2053.6%2C%20540.0%2046.7%20C%20570.0%2039.8%2C%20600.0%209.3%2C%20630.0%204.9%20C%20660.0%200.6%2C%20690.0%2015.8%2C%20720.0%2020.4%20C%20750.0%2025.0%2C%20780.0%2032.1%2C%20810.0%2032.5%20C%20840.0%2033.0%2C%20870.0%2026.3%2C%20900.0%2023.1%20C%20930.0%2019.8%2C%20960.0%2010.5%2C%20990.0%2012.8%20C%201020.0%2015.1%2C%201050.0%2034.1%2C%201080.0%2036.9%20C%201110.0%2039.8%2C%201140.0%2028.7%2C%201170.0%2030.2%20C%201200.0%2031.6%2C%201230.0%2039.4%2C%201260.0%2045.7%20C%201290.0%2052.0%2C%201320.0%2065.0%2C%201350.0%2068.0%20C%201380.0%2071.0%2C%201425.0%2064.6%2C%201440.0%2063.9%22%20stroke-width%3D%221.4%22%20opacity%3D%220.500%22%2F%3E%3Cpath%20d%3D%22M%200.0%2021.6%20C%2015.0%2027.8%2C%2060.0%2051.2%2C%2090.0%2058.8%20C%20120.0%2066.3%2C%20150.0%2060.8%2C%20180.0%2067.0%20C%20210.0%2073.2%2C%20240.0%2090.4%2C%20270.0%2096.1%20C%20300.0%20101.8%2C%20330.0%20102.6%2C%20360.0%20101.4%20C%20390.0%20100.3%2C%20420.0%2093.6%2C%20450.0%2089.1%20C%20480.0%2084.6%2C%20510.0%2082.2%2C%20540.0%2074.5%20C%20570.0%2066.8%2C%20600.0%2043.8%2C%20630.0%2042.9%20C%20660.0%2041.9%2C%20690.0%2066.6%2C%20720.0%2068.6%20C%20750.0%2070.7%2C%20780.0%2057.7%2C%20810.0%2055.4%20C%20840.0%2053.1%2C%20870.0%2057.0%2C%20900.0%2054.7%20C%20930.0%2052.5%2C%20960.0%2051.2%2C%20990.0%2042.0%20C%201020.0%2032.9%2C%201050.0%202.2%2C%201080.0%200.0%20C%201110.0%20-2.1%2C%201140.0%2025.5%2C%201170.0%2029.0%20C%201200.0%2032.5%2C%201230.0%2019.0%2C%201260.0%2020.9%20C%201290.0%2022.8%2C%201320.0%2034.7%2C%201350.0%2040.3%20C%201380.0%2046.0%2C%201425.0%2052.4%2C%201440.0%2054.9%22%20stroke-width%3D%220.7%22%20opacity%3D%220.486%22%2F%3E%3Cpath%20d%3D%22M%200.0%2012.4%20C%2015.0%2017.5%2C%2060.0%2038.4%2C%2090.0%2042.7%20C%20120.0%2047.0%2C%20150.0%2032.6%2C%20180.0%2038.2%20C%20210.0%2043.9%2C%20240.0%2072.5%2C%20270.0%2076.4%20C%20300.0%2080.2%2C%20330.0%2060.7%2C%20360.0%2061.4%20C%20390.0%2062.2%2C%20420.0%2075.1%2C%20450.0%2080.8%20C%20480.0%2086.4%2C%20510.0%2091.7%2C%20540.0%2095.2%20C%20570.0%2098.8%2C%20600.0%20101.5%2C%20630.0%20102.2%20C%20660.0%20103.0%2C%20690.0%2098.6%2C%20720.0%2099.8%20C%20750.0%20101.0%2C%20780.0%20110.0%2C%20810.0%20109.5%20C%20840.0%20109.1%2C%20870.0%20105.1%2C%20900.0%2097.0%20C%20930.0%2088.9%2C%20960.0%2070.4%2C%20990.0%2060.9%20C%201020.0%2051.4%2C%201050.0%2042.3%2C%201080.0%2039.9%20C%201110.0%2037.5%2C%201140.0%2044.6%2C%201170.0%2046.6%20C%201200.0%2048.5%2C%201230.0%2052.2%2C%201260.0%2051.6%20C%201290.0%2051.1%2C%201320.0%2041.8%2C%201350.0%2043.5%20C%201380.0%2045.3%2C%201425.0%2059.0%2C%201440.0%2062.1%22%20stroke-width%3D%220.7%22%20opacity%3D%220.473%22%2F%3E%3Cpath%20d%3D%22M%200.0%2048.2%20C%2015.0%2047.7%2C%2060.0%2042.2%2C%2090.0%2045.6%20C%20120.0%2049.0%2C%20150.0%2064.1%2C%20180.0%2068.7%20C%20210.0%2073.3%2C%20240.0%2076.6%2C%20270.0%2073.3%20C%20300.0%2070.0%2C%20330.0%2053.5%2C%20360.0%2048.9%20C%20390.0%2044.3%2C%20420.0%2043.8%2C%20450.0%2045.8%20C%20480.0%2047.9%2C%20510.0%2057.0%2C%20540.0%2061.4%20C%20570.0%2065.8%2C%20600.0%2067.2%2C%20630.0%2072.4%20C%20660.0%2077.7%2C%20690.0%2087.7%2C%20720.0%2093.2%20C%20750.0%2098.6%2C%20780.0%20101.2%2C%20810.0%20105.1%20C%20840.0%20109.1%2C%20870.0%20118.0%2C%20900.0%20116.7%20C%20930.0%20115.3%2C%20960.0%2098.2%2C%20990.0%2097.0%20C%201020.0%2095.8%2C%201050.0%20110.2%2C%201080.0%20109.3%20C%201110.0%20108.3%2C%201140.0%2092.4%2C%201170.0%2091.3%20C%201200.0%2090.2%2C%201230.0%20101.8%2C%201260.0%20102.8%20C%201290.0%20103.8%2C%201320.0%2098.9%2C%201350.0%2097.4%20C%201380.0%2096.0%2C%201425.0%2094.6%2C%201440.0%2094.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.459%22%2F%3E%3Cpath%20d%3D%22M%200.0%20109.8%20C%2015.0%20109.2%2C%2060.0%20106.6%2C%2090.0%20105.8%20C%20120.0%20105.0%2C%20150.0%20103.5%2C%20180.0%20105.0%20C%20210.0%20106.4%2C%20240.0%20118.2%2C%20270.0%20114.8%20C%20300.0%20111.3%2C%20330.0%2091.6%2C%20360.0%2084.2%20C%20390.0%2076.8%2C%20420.0%2074.8%2C%20450.0%2070.4%20C%20480.0%2066.0%2C%20510.0%2059.3%2C%20540.0%2057.8%20C%20570.0%2056.2%2C%20600.0%2056.9%2C%20630.0%2061.2%20C%20660.0%2065.4%2C%20690.0%2076.3%2C%20720.0%2083.2%20C%20750.0%2090.1%2C%20780.0%2098.0%2C%20810.0%20102.6%20C%20840.0%20107.2%2C%20870.0%20109.1%2C%20900.0%20110.7%20C%20930.0%20112.4%2C%20960.0%20111.4%2C%20990.0%20112.5%20C%201020.0%20113.5%2C%201050.0%20111.1%2C%201080.0%20117.1%20C%201110.0%20123.1%2C%201140.0%20142.7%2C%201170.0%20148.4%20C%201200.0%20154.2%2C%201230.0%20152.3%2C%201260.0%20151.5%20C%201290.0%20150.7%2C%201320.0%20148.2%2C%201350.0%20143.7%20C%201380.0%20139.3%2C%201425.0%20128.0%2C%201440.0%20124.9%22%20stroke-width%3D%220.7%22%20opacity%3D%220.446%22%2F%3E%3Cpath%20d%3D%22M%200.0%20145.2%20C%2015.0%20149.5%2C%2060.0%20165.6%2C%2090.0%20171.0%20C%20120.0%20176.4%2C%20150.0%20177.7%2C%20180.0%20177.4%20C%20210.0%20177.1%2C%20240.0%20176.6%2C%20270.0%20169.0%20C%20300.0%20161.4%2C%20330.0%20141.4%2C%20360.0%20132.0%20C%20390.0%20122.6%2C%20420.0%20115.5%2C%20450.0%20112.4%20C%20480.0%20109.4%2C%20510.0%20112.6%2C%20540.0%20113.7%20C%20570.0%20114.9%2C%20600.0%20120.9%2C%20630.0%20119.5%20C%20660.0%20118.0%2C%20690.0%20105.6%2C%20720.0%20105.0%20C%20750.0%20104.5%2C%20780.0%20115.5%2C%20810.0%20116.2%20C%20840.0%20117.0%2C%20870.0%20114.7%2C%20900.0%20109.7%20C%20930.0%20104.6%2C%20960.0%2084.2%2C%20990.0%2086.1%20C%201020.0%2087.9%2C%201050.0%20113.8%2C%201080.0%20120.9%20C%201110.0%20128.0%2C%201140.0%20119.8%2C%201170.0%20128.6%20C%201200.0%20137.4%2C%201230.0%20167.9%2C%201260.0%20173.8%20C%201290.0%20179.8%2C%201320.0%20164.4%2C%201350.0%20164.2%20C%201380.0%20164.0%2C%201425.0%20171.1%2C%201440.0%20172.4%22%20stroke-width%3D%221.4%22%20opacity%3D%220.432%22%2F%3E%3Cpath%20d%3D%22M%200.0%20138.6%20C%2015.0%20144.0%2C%2060.0%20163.3%2C%2090.0%20171.4%20C%20120.0%20179.5%2C%20150.0%20181.7%2C%20180.0%20187.1%20C%20210.0%20192.5%2C%20240.0%20203.1%2C%20270.0%20203.9%20C%20300.0%20204.7%2C%20330.0%20197.1%2C%20360.0%20191.9%20C%20390.0%20186.8%2C%20420.0%20171.7%2C%20450.0%20173.0%20C%20480.0%20174.4%2C%20510.0%20199.7%2C%20540.0%20199.9%20C%20570.0%20200.0%2C%20600.0%20177.5%2C%20630.0%20173.7%20C%20660.0%20169.9%2C%20690.0%20179.5%2C%20720.0%20177.1%20C%20750.0%20174.7%2C%20780.0%20165.9%2C%20810.0%20159.4%20C%20840.0%20152.9%2C%20870.0%20145.8%2C%20900.0%20138.2%20C%20930.0%20130.5%2C%20960.0%20116.5%2C%20990.0%20113.4%20C%201020.0%20110.3%2C%201050.0%20117.2%2C%201080.0%20119.8%20C%201110.0%20122.4%2C%201140.0%20127.2%2C%201170.0%20128.8%20C%201200.0%20130.4%2C%201230.0%20125.4%2C%201260.0%20129.5%20C%201290.0%20133.5%2C%201320.0%20147.9%2C%201350.0%20153.3%20C%201380.0%20158.7%2C%201425.0%20160.6%2C%201440.0%20162.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.418%22%2F%3E%3Cpath%20d%3D%22M%200.0%20137.0%20C%2015.0%20142.7%2C%2060.0%20166.7%2C%2090.0%20171.4%20C%20120.0%20176.1%2C%20150.0%20164.6%2C%20180.0%20165.4%20C%20210.0%20166.2%2C%20240.0%20175.8%2C%20270.0%20176.3%20C%20300.0%20176.8%2C%20330.0%20166.6%2C%20360.0%20168.4%20C%20390.0%20170.2%2C%20420.0%20178.3%2C%20450.0%20187.1%20C%20480.0%20195.9%2C%20510.0%20212.7%2C%20540.0%20221.4%20C%20570.0%20230.1%2C%20600.0%20234.0%2C%20630.0%20239.1%20C%20660.0%20244.3%2C%20690.0%20257.0%2C%20720.0%20252.3%20C%20750.0%20247.5%2C%20780.0%20222.8%2C%20810.0%20210.7%20C%20840.0%20198.6%2C%20870.0%20186.2%2C%20900.0%20179.6%20C%20930.0%20173.0%2C%20960.0%20173.9%2C%20990.0%20171.2%20C%201020.0%20168.6%2C%201050.0%20163.5%2C%201080.0%20163.5%20C%201110.0%20163.4%2C%201140.0%20169.6%2C%201170.0%20170.9%20C%201200.0%20172.2%2C%201230.0%20175.5%2C%201260.0%20171.2%20C%201290.0%20166.9%2C%201320.0%20153.4%2C%201350.0%20145.2%20C%201380.0%20137.1%2C%201425.0%20126.2%2C%201440.0%20122.4%22%20stroke-width%3D%220.7%22%20opacity%3D%220.405%22%2F%3E%3Cpath%20d%3D%22M%200.0%20189.7%20C%2015.0%20190.7%2C%2060.0%20200.3%2C%2090.0%20196.2%20C%20120.0%20192.0%2C%20150.0%20172.6%2C%20180.0%20164.7%20C%20210.0%20156.7%2C%20240.0%20147.0%2C%20270.0%20148.5%20C%20300.0%20149.9%2C%20330.0%20166.9%2C%20360.0%20173.4%20C%20390.0%20179.9%2C%20420.0%20181.6%2C%20450.0%20187.6%20C%20480.0%20193.6%2C%20510.0%20201.9%2C%20540.0%20209.4%20C%20570.0%20216.8%2C%20600.0%20228.9%2C%20630.0%20232.2%20C%20660.0%20235.5%2C%20690.0%20228.2%2C%20720.0%20229.1%20C%20750.0%20230.0%2C%20780.0%20234.6%2C%20810.0%20237.6%20C%20840.0%20240.6%2C%20870.0%20247.1%2C%20900.0%20247.1%20C%20930.0%20247.1%2C%20960.0%20232.9%2C%20990.0%20237.4%20C%201020.0%20241.8%2C%201050.0%20271.4%2C%201080.0%20274.1%20C%201110.0%20276.8%2C%201140.0%20260.8%2C%201170.0%20253.5%20C%201200.0%20246.1%2C%201230.0%20236.8%2C%201260.0%20230.1%20C%201290.0%20223.4%2C%201320.0%20220.1%2C%201350.0%20213.4%20C%201380.0%20206.6%2C%201425.0%20193.5%2C%201440.0%20189.5%22%20stroke-width%3D%220.7%22%20opacity%3D%220.391%22%2F%3E%3Cpath%20d%3D%22M%200.0%20276.4%20C%2015.0%20276.5%2C%2060.0%20282.1%2C%2090.0%20277.2%20C%20120.0%20272.3%2C%20150.0%20260.3%2C%20180.0%20247.1%20C%20210.0%20233.9%2C%20240.0%20205.0%2C%20270.0%20198.2%20C%20300.0%20191.5%2C%20330.0%20205.7%2C%20360.0%20206.8%20C%20390.0%20207.8%2C%20420.0%20205.7%2C%20450.0%20204.6%20C%20480.0%20203.4%2C%20510.0%20199.3%2C%20540.0%20200.0%20C%20570.0%20200.6%2C%20600.0%20208.1%2C%20630.0%20208.5%20C%20660.0%20208.8%2C%20690.0%20200.2%2C%20720.0%20202.2%20C%20750.0%20204.2%2C%20780.0%20215.1%2C%20810.0%20220.3%20C%20840.0%20225.4%2C%20870.0%20223.0%2C%20900.0%20233.3%20C%20930.0%20243.6%2C%20960.0%20271.6%2C%20990.0%20282.1%20C%201020.0%20292.6%2C%201050.0%20290.6%2C%201080.0%20296.3%20C%201110.0%20302.0%2C%201140.0%20316.6%2C%201170.0%20316.3%20C%201200.0%20316.0%2C%201230.0%20300.8%2C%201260.0%20294.5%20C%201290.0%20288.2%2C%201320.0%20284.4%2C%201350.0%20278.7%20C%201380.0%20272.9%2C%201425.0%20263.1%2C%201440.0%20260.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.378%22%2F%3E%3Cpath%20d%3D%22M%200.0%20327.4%20C%2015.0%20327.3%2C%2060.0%20329.8%2C%2090.0%20327.0%20C%20120.0%20324.3%2C%20150.0%20318.2%2C%20180.0%20311.1%20C%20210.0%20304.0%2C%20240.0%20289.5%2C%20270.0%20284.3%20C%20300.0%20279.1%2C%20330.0%20282.8%2C%20360.0%20280.0%20C%20390.0%20277.2%2C%20420.0%20271.4%2C%20450.0%20267.5%20C%20480.0%20263.6%2C%20510.0%20258.6%2C%20540.0%20256.7%20C%20570.0%20254.7%2C%20600.0%20261.6%2C%20630.0%20255.6%20C%20660.0%20249.7%2C%20690.0%20226.5%2C%20720.0%20220.9%20C%20750.0%20215.3%2C%20780.0%20220.9%2C%20810.0%20222.2%20C%20840.0%20223.5%2C%20870.0%20222.4%2C%20900.0%20228.7%20C%20930.0%20235.0%2C%20960.0%20251.7%2C%20990.0%20260.0%20C%201020.0%20268.4%2C%201050.0%20273.1%2C%201080.0%20278.9%20C%201110.0%20284.7%2C%201140.0%20293.6%2C%201170.0%20295.0%20C%201200.0%20296.3%2C%201230.0%20288.4%2C%201260.0%20286.9%20C%201290.0%20285.4%2C%201320.0%20281.7%2C%201350.0%20286.1%20C%201380.0%20290.4%2C%201425.0%20308.3%2C%201440.0%20312.8%22%20stroke-width%3D%221.4%22%20opacity%3D%220.364%22%2F%3E%3Cpath%20d%3D%22M%200.0%20315.7%20C%2015.0%20318.0%2C%2060.0%20325.1%2C%2090.0%20329.7%20C%20120.0%20334.2%2C%20150.0%20343.5%2C%20180.0%20343.0%20C%20210.0%20342.6%2C%20240.0%20325.1%2C%20270.0%20326.8%20C%20300.0%20328.6%2C%20330.0%20349.0%2C%20360.0%20353.6%20C%20390.0%20358.2%2C%20420.0%20354.4%2C%20450.0%20354.6%20C%20480.0%20354.8%2C%20510.0%20355.9%2C%20540.0%20354.6%20C%20570.0%20353.4%2C%20600.0%20357.7%2C%20630.0%20347.3%20C%20660.0%20336.8%2C%20690.0%20303.5%2C%20720.0%20291.8%20C%20750.0%20280.2%2C%20780.0%20281.6%2C%20810.0%20277.4%20C%20840.0%20273.2%2C%20870.0%20268.3%2C%20900.0%20266.8%20C%20930.0%20265.4%2C%20960.0%20269.5%2C%20990.0%20268.9%20C%201020.0%20268.3%2C%201050.0%20265.3%2C%201080.0%20263.5%20C%201110.0%20261.7%2C%201140.0%20257.0%2C%201170.0%20258.0%20C%201200.0%20259.0%2C%201230.0%20267.7%2C%201260.0%20269.7%20C%201290.0%20271.7%2C%201320.0%20265.7%2C%201350.0%20270.0%20C%201380.0%20274.2%2C%201425.0%20291.0%2C%201440.0%20295.1%22%20stroke-width%3D%220.7%22%20opacity%3D%220.350%22%2F%3E%3Cpath%20d%3D%22M%200.0%20297.3%20C%2015.0%20295.3%2C%2060.0%20283.4%2C%2090.0%20285.5%20C%20120.0%20287.7%2C%20150.0%20300.5%2C%20180.0%20310.4%20C%20210.0%20320.2%2C%20240.0%20336.1%2C%20270.0%20344.7%20C%20300.0%20353.2%2C%20330.0%20355.3%2C%20360.0%20361.7%20C%20390.0%20368.1%2C%20420.0%20373.5%2C%20450.0%20383.2%20C%20480.0%20392.8%2C%20510.0%20420.5%2C%20540.0%20419.6%20C%20570.0%20418.7%2C%20600.0%20387.6%2C%20630.0%20377.8%20C%20660.0%20368.0%2C%20690.0%20362.9%2C%20720.0%20360.9%20C%20750.0%20358.8%2C%20780.0%20365.9%2C%20810.0%20365.7%20C%20840.0%20365.6%2C%20870.0%20357.7%2C%20900.0%20359.9%20C%20930.0%20362.1%2C%20960.0%20383.4%2C%20990.0%20378.7%20C%201020.0%20374.1%2C%201050.0%20341.7%2C%201080.0%20332.1%20C%201110.0%20322.5%2C%201140.0%20328.3%2C%201170.0%20321.2%20C%201200.0%20314.1%2C%201230.0%20294.7%2C%201260.0%20289.4%20C%201290.0%20284.2%2C%201320.0%20287.6%2C%201350.0%20289.9%20C%201380.0%20292.2%2C%201425.0%20300.8%2C%201440.0%20303.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.337%22%2F%3E%3Cpath%20d%3D%22M%200.0%20340.6%20C%2015.0%20335.1%2C%2060.0%20316.0%2C%2090.0%20307.6%20C%20120.0%20299.3%2C%20150.0%20286.4%2C%20180.0%20290.4%20C%20210.0%20294.5%2C%20240.0%20322.8%2C%20270.0%20332.0%20C%20300.0%20341.3%2C%20330.0%20341.5%2C%20360.0%20346.1%20C%20390.0%20350.7%2C%20420.0%20352.8%2C%20450.0%20359.7%20C%20480.0%20366.6%2C%20510.0%20383.7%2C%20540.0%20387.7%20C%20570.0%20391.7%2C%20600.0%20385.2%2C%20630.0%20383.9%20C%20660.0%20382.5%2C%20690.0%20375.1%2C%20720.0%20379.6%20C%20750.0%20384.0%2C%20780.0%20398.3%2C%20810.0%20410.4%20C%20840.0%20422.6%2C%20870.0%20448.7%2C%20900.0%20452.7%20C%20930.0%20456.7%2C%20960.0%20439.2%2C%20990.0%20434.4%20C%201020.0%20429.6%2C%201050.0%20431.5%2C%201080.0%20424.0%20C%201110.0%20416.5%2C%201140.0%20401.5%2C%201170.0%20389.6%20C%201200.0%20377.7%2C%201230.0%20357.6%2C%201260.0%20352.6%20C%201290.0%20347.7%2C%201320.0%20362.2%2C%201350.0%20360.0%20C%201380.0%20357.8%2C%201425.0%20342.7%2C%201440.0%20339.3%22%20stroke-width%3D%220.7%22%20opacity%3D%220.323%22%2F%3E%3Cpath%20d%3D%22M%200.0%20432.2%20C%2015.0%20429.3%2C%2060.0%20420.3%2C%2090.0%20414.8%20C%20120.0%20409.3%2C%20150.0%20402.0%2C%20180.0%20399.2%20C%20210.0%20396.5%2C%20240.0%20401.3%2C%20270.0%20398.2%20C%20300.0%20395.1%2C%20330.0%20386.7%2C%20360.0%20380.7%20C%20390.0%20374.7%2C%20420.0%20368.3%2C%20450.0%20362.3%20C%20480.0%20356.3%2C%20510.0%20344.2%2C%20540.0%20344.5%20C%20570.0%20344.9%2C%20600.0%20359.4%2C%20630.0%20364.2%20C%20660.0%20369.1%2C%20690.0%20364.2%2C%20720.0%20373.8%20C%20750.0%20383.5%2C%20780.0%20408.4%2C%20810.0%20421.9%20C%20840.0%20435.5%2C%20870.0%20447.3%2C%20900.0%20455.1%20C%20930.0%20462.9%2C%20960.0%20465.0%2C%20990.0%20468.7%20C%201020.0%20472.4%2C%201050.0%20477.2%2C%201080.0%20477.2%20C%201110.0%20477.3%2C%201140.0%20472.8%2C%201170.0%20468.9%20C%201200.0%20464.9%2C%201230.0%20457.2%2C%201260.0%20453.6%20C%201290.0%20450.0%2C%201320.0%20447.6%2C%201350.0%20447.3%20C%201380.0%20447.0%2C%201425.0%20450.9%2C%201440.0%20451.6%22%20stroke-width%3D%220.7%22%20opacity%3D%220.310%22%2F%3E%3Cpath%20d%3D%22M%200.0%20489.1%20C%2015.0%20491.2%2C%2060.0%20502.7%2C%2090.0%20501.6%20C%20120.0%20500.4%2C%20150.0%20481.6%2C%20180.0%20482.1%20C%20210.0%20482.6%2C%20240.0%20504.9%2C%20270.0%20504.5%20C%20300.0%20504.1%2C%20330.0%20490.9%2C%20360.0%20479.7%20C%20390.0%20468.6%2C%20420.0%20450.5%2C%20450.0%20437.7%20C%20480.0%20424.8%2C%20510.0%20411.1%2C%20540.0%20402.7%20C%20570.0%20394.4%2C%20600.0%20390.2%2C%20630.0%20387.6%20C%20660.0%20385.0%2C%20690.0%20382.9%2C%20720.0%20387.1%20C%20750.0%20391.3%2C%20780.0%20408.6%2C%20810.0%20412.9%20C%20840.0%20417.3%2C%20870.0%20410.6%2C%20900.0%20413.2%20C%20930.0%20415.8%2C%20960.0%20425.1%2C%20990.0%20428.5%20C%201020.0%20431.9%2C%201050.0%20432.1%2C%201080.0%20433.8%20C%201110.0%20435.4%2C%201140.0%20432.5%2C%201170.0%20438.2%20C%201200.0%20444.0%2C%201230.0%20457.7%2C%201260.0%20468.2%20C%201290.0%20478.8%2C%201320.0%20489.3%2C%201350.0%20501.7%20C%201380.0%20514.2%2C%201425.0%20536.2%2C%201440.0%20543.1%22%20stroke-width%3D%221.4%22%20opacity%3D%220.296%22%2F%3E%3Cpath%20d%3D%22M%200.0%20470.7%20C%2015.0%20475.6%2C%2060.0%20488.2%2C%2090.0%20500.3%20C%20120.0%20512.3%2C%20150.0%20533.8%2C%20180.0%20543.0%20C%20210.0%20552.3%2C%20240.0%20548.9%2C%20270.0%20555.9%20C%20300.0%20562.8%2C%20330.0%20588.0%2C%20360.0%20584.6%20C%20390.0%20581.3%2C%20420.0%20546.2%2C%20450.0%20535.9%20C%20480.0%20525.6%2C%20510.0%20530.3%2C%20540.0%20523.1%20C%20570.0%20515.9%2C%20600.0%20498.7%2C%20630.0%20492.8%20C%20660.0%20486.8%2C%20690.0%20491.9%2C%20720.0%20487.5%20C%20750.0%20483.1%2C%20780.0%20473.2%2C%20810.0%20466.3%20C%20840.0%20459.4%2C%20870.0%20453.4%2C%20900.0%20446.1%20C%20930.0%20438.8%2C%20960.0%20428.0%2C%20990.0%20422.4%20C%201020.0%20416.8%2C%201050.0%20413.4%2C%201080.0%20412.4%20C%201110.0%20411.4%2C%201140.0%20409.7%2C%201170.0%20416.5%20C%201200.0%20423.3%2C%201230.0%20438.9%2C%201260.0%20453.3%20C%201290.0%20467.6%2C%201320.0%20490.4%2C%201350.0%20502.5%20C%201380.0%20514.7%2C%201425.0%20522.2%2C%201440.0%20526.1%22%20stroke-width%3D%220.7%22%20opacity%3D%220.282%22%2F%3E%3Cpath%20d%3D%22M%200.0%20440.7%20C%2015.0%20445.3%2C%2060.0%20457.5%2C%2090.0%20468.5%20C%20120.0%20479.4%2C%20150.0%20493.5%2C%20180.0%20506.3%20C%20210.0%20519.2%2C%20240.0%20532.0%2C%20270.0%20545.4%20C%20300.0%20558.7%2C%20330.0%20581.9%2C%20360.0%20586.6%20C%20390.0%20591.2%2C%20420.0%20577.2%2C%20450.0%20573.2%20C%20480.0%20569.3%2C%20510.0%20565.1%2C%20540.0%20562.8%20C%20570.0%20560.6%2C%20600.0%20557.3%2C%20630.0%20559.9%20C%20660.0%20562.5%2C%20690.0%20571.7%2C%20720.0%20578.6%20C%20750.0%20585.4%2C%20780.0%20602.0%2C%20810.0%20601.1%20C%20840.0%20600.2%2C%20870.0%20589.4%2C%20900.0%20573.0%20C%20930.0%20556.6%2C%20960.0%20516.6%2C%20990.0%20502.9%20C%201020.0%20489.2%2C%201050.0%20499.6%2C%201080.0%20490.9%20C%201110.0%20482.2%2C%201140.0%20454.7%2C%201170.0%20450.8%20C%201200.0%20446.9%2C%201230.0%20463.5%2C%201260.0%20467.6%20C%201290.0%20471.7%2C%201320.0%20470.7%2C%201350.0%20475.3%20C%201380.0%20479.9%2C%201425.0%20491.9%2C%201440.0%20495.2%22%20stroke-width%3D%220.7%22%20opacity%3D%220.269%22%2F%3E%3Cpath%20d%3D%22M%200.0%20486.6%20C%2015.0%20487.0%2C%2060.0%20482.7%2C%2090.0%20488.9%20C%20120.0%20495.1%2C%20150.0%20519.6%2C%20180.0%20523.8%20C%20210.0%20528.0%2C%20240.0%20515.3%2C%20270.0%20513.8%20C%20300.0%20512.3%2C%20330.0%20511.2%2C%20360.0%20514.8%20C%20390.0%20518.3%2C%20420.0%20531.6%2C%20450.0%20535.3%20C%20480.0%20539.0%2C%20510.0%20526.0%2C%20540.0%20536.8%20C%20570.0%20547.7%2C%20600.0%20587.5%2C%20630.0%20600.4%20C%20660.0%20613.3%2C%20690.0%20604.4%2C%20720.0%20614.2%20C%20750.0%20624.0%2C%20780.0%20654.6%2C%20810.0%20659.1%20C%20840.0%20663.6%2C%20870.0%20647.3%2C%20900.0%20641.2%20C%20930.0%20635.1%2C%20960.0%20629.2%2C%20990.0%20622.6%20C%201020.0%20616.0%2C%201050.0%20610.0%2C%201080.0%20601.7%20C%201110.0%20593.3%2C%201140.0%20575.7%2C%201170.0%20572.6%20C%201200.0%20569.6%2C%201230.0%20582.9%2C%201260.0%20583.5%20C%201290.0%20584.1%2C%201320.0%20583.0%2C%201350.0%20576.1%20C%201380.0%20569.2%2C%201425.0%20547.7%2C%201440.0%20542.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.255%22%2F%3E%3Cpath%20d%3D%22M%200.0%20603.5%20C%2015.0%20602.7%2C%2060.0%20597.3%2C%2090.0%20598.9%20C%20120.0%20600.6%2C%20150.0%20618.0%2C%20180.0%20613.4%20C%20210.0%20608.8%2C%20240.0%20584.6%2C%20270.0%20571.1%20C%20300.0%20557.6%2C%20330.0%20543.8%2C%20360.0%20532.5%20C%20390.0%20521.3%2C%20420.0%20505.0%2C%20450.0%20503.4%20C%20480.0%20501.8%2C%20510.0%20516.3%2C%20540.0%20522.9%20C%20570.0%20529.5%2C%20600.0%20532.7%2C%20630.0%20542.8%20C%20660.0%20553.0%2C%20690.0%20570.0%2C%20720.0%20584.1%20C%20750.0%20598.1%2C%20780.0%20620.2%2C%20810.0%20627.2%20C%20840.0%20634.2%2C%20870.0%20625.7%2C%20900.0%20626.0%20C%20930.0%20626.3%2C%20960.0%20623.7%2C%20990.0%20629.1%20C%201020.0%20634.6%2C%201050.0%20650.7%2C%201080.0%20658.8%20C%201110.0%20666.9%2C%201140.0%20675.5%2C%201170.0%20677.7%20C%201200.0%20680.0%2C%201230.0%20674.4%2C%201260.0%20672.2%20C%201290.0%20670.0%2C%201320.0%20670.2%2C%201350.0%20664.8%20C%201380.0%20659.4%2C%201425.0%20644.1%2C%201440.0%20640.0%22%20stroke-width%3D%220.7%22%20opacity%3D%220.242%22%2F%3E%3Cpath%20d%3D%22M%200.0%20693.3%20C%2015.0%20695.5%2C%2060.0%20704.1%2C%2090.0%20706.6%20C%20120.0%20709.0%2C%20150.0%20709.1%2C%20180.0%20708.0%20C%20210.0%20706.9%2C%20240.0%20713.8%2C%20270.0%20699.8%20C%20300.0%20685.9%2C%20330.0%20639.9%2C%20360.0%20624.3%20C%20390.0%20608.6%2C%20420.0%20610.3%2C%20450.0%20606.0%20C%20480.0%20601.7%2C%20510.0%20601.0%2C%20540.0%20598.4%20C%20570.0%20595.8%2C%20600.0%20589.8%2C%20630.0%20590.3%20C%20660.0%20590.8%2C%20690.0%20603.1%2C%20720.0%20601.5%20C%20750.0%20600.0%2C%20780.0%20585.9%2C%20810.0%20581.2%20C%20840.0%20576.4%2C%20870.0%20571.3%2C%20900.0%20573.2%20C%20930.0%20575.1%2C%20960.0%20582.6%2C%20990.0%20592.5%20C%201020.0%20602.5%2C%201050.0%20620.7%2C%201080.0%20633.0%20C%201110.0%20645.2%2C%201140.0%20653.7%2C%201170.0%20666.0%20C%201200.0%20678.4%2C%201230.0%20699.8%2C%201260.0%20707.2%20C%201290.0%20714.6%2C%201320.0%20707.6%2C%201350.0%20710.3%20C%201380.0%20713.1%2C%201425.0%20721.6%2C%201440.0%20723.8%22%20stroke-width%3D%221.4%22%20opacity%3D%220.228%22%2F%3E%3Cpath%20d%3D%22M%200.0%20694.5%20C%2015.0%20706.4%2C%2060.0%20750.9%2C%2090.0%20765.9%20C%20120.0%20780.9%2C%20150.0%20784.9%2C%20180.0%20784.5%20C%20210.0%20784.1%2C%20240.0%20768.9%2C%20270.0%20763.4%20C%20300.0%20757.9%2C%20330.0%20758.1%2C%20360.0%20751.4%20C%20390.0%20744.6%2C%20420.0%20729.2%2C%20450.0%20722.9%20C%20480.0%20716.7%2C%20510.0%20716.1%2C%20540.0%20713.9%20C%20570.0%20711.7%2C%20600.0%20712.2%2C%20630.0%20709.8%20C%20660.0%20707.4%2C%20690.0%20708.8%2C%20720.0%20699.6%20C%20750.0%20690.3%2C%20780.0%20669.0%2C%20810.0%20654.2%20C%20840.0%20639.4%2C%20870.0%20623.1%2C%20900.0%20610.8%20C%20930.0%20598.6%2C%20960.0%20580.6%2C%20990.0%20580.9%20C%201020.0%20581.2%2C%201050.0%20601.9%2C%201080.0%20612.6%20C%201110.0%20623.3%2C%201140.0%20633.4%2C%201170.0%20645.1%20C%201200.0%20656.8%2C%201230.0%20677.5%2C%201260.0%20682.7%20C%201290.0%20687.9%2C%201320.0%20675.4%2C%201350.0%20676.1%20C%201380.0%20676.8%2C%201425.0%20685.1%2C%201440.0%20686.9%22%20stroke-width%3D%220.7%22%20opacity%3D%220.214%22%2F%3E%3Cpath%20d%3D%22M%200.0%20668.0%20C%2015.0%20677.5%2C%2060.0%20714.3%2C%2090.0%20724.8%20C%20120.0%20735.3%2C%20150.0%20726.8%2C%20180.0%20730.9%20C%20210.0%20735.1%2C%20240.0%20749.5%2C%20270.0%20749.7%20C%20300.0%20749.8%2C%20330.0%20727.2%2C%20360.0%20732.0%20C%20390.0%20736.7%2C%20420.0%20767.2%2C%20450.0%20778.4%20C%20480.0%20789.7%2C%20510.0%20790.3%2C%20540.0%20799.5%20C%20570.0%20808.7%2C%20600.0%20830.3%2C%20630.0%20833.8%20C%20660.0%20837.3%2C%20690.0%20831.9%2C%20720.0%20820.4%20C%20750.0%20808.9%2C%20780.0%20779.7%2C%20810.0%20764.6%20C%20840.0%20749.5%2C%20870.0%20739.0%2C%20900.0%20729.6%20C%20930.0%20720.2%2C%20960.0%20714.5%2C%20990.0%20708.0%20C%201020.0%20701.5%2C%201050.0%20695.4%2C%201080.0%20690.7%20C%201110.0%20686.1%2C%201140.0%20682.4%2C%201170.0%20680.0%20C%201200.0%20677.6%2C%201230.0%20678.0%2C%201260.0%20676.1%20C%201290.0%20674.2%2C%201320.0%20675.7%2C%201350.0%20668.4%20C%201380.0%20661.2%2C%201425.0%20638.5%2C%201440.0%20632.6%22%20stroke-width%3D%220.7%22%20opacity%3D%220.201%22%2F%3E%3Cpath%20d%3D%22M%200.0%20719.5%20C%2015.0%20719.6%2C%2060.0%20719.6%2C%2090.0%20720.5%20C%20120.0%20721.4%2C%20150.0%20727.6%2C%20180.0%20724.8%20C%20210.0%20722.0%2C%20240.0%20704.6%2C%20270.0%20703.7%20C%20300.0%20702.7%2C%20330.0%20712.2%2C%20360.0%20719.1%20C%20390.0%20726.0%2C%20420.0%20734.1%2C%20450.0%20745.2%20C%20480.0%20756.3%2C%20510.0%20770.6%2C%20540.0%20785.9%20C%20570.0%20801.2%2C%20600.0%20824.2%2C%20630.0%20836.8%20C%20660.0%20849.5%2C%20690.0%20861.6%2C%20720.0%20861.8%20C%20750.0%20862.0%2C%20780.0%20844.4%2C%20810.0%20838.2%20C%20840.0%20831.9%2C%20870.0%20826.4%2C%20900.0%20824.3%20C%20930.0%20822.3%2C%20960.0%20822.1%2C%20990.0%20825.9%20C%201020.0%20829.7%2C%201050.0%20847.7%2C%201080.0%20847.1%20C%201110.0%20846.6%2C%201140.0%20834.6%2C%201170.0%20822.5%20C%201200.0%20810.5%2C%201230.0%20791.1%2C%201260.0%20775.0%20C%201290.0%20758.8%2C%201320.0%20739.3%2C%201350.0%20725.6%20C%201380.0%20711.9%2C%201425.0%20698.3%2C%201440.0%20692.8%22%20stroke-width%3D%220.7%22%20opacity%3D%220.187%22%2F%3E%3Cpath%20d%3D%22M%200.0%20853.1%20C%2015.0%20849.3%2C%2060.0%20845.4%2C%2090.0%20830.5%20C%20120.0%20815.6%2C%20150.0%20783.0%2C%20180.0%20763.6%20C%20210.0%20744.2%2C%20240.0%20724.4%2C%20270.0%20714.1%20C%20300.0%20703.8%2C%20330.0%20699.5%2C%20360.0%20702.0%20C%20390.0%20704.5%2C%20420.0%20716.0%2C%20450.0%20729.2%20C%20480.0%20742.4%2C%20510.0%20771.7%2C%20540.0%20781.2%20C%20570.0%20790.7%2C%20600.0%20782.9%2C%20630.0%20786.3%20C%20660.0%20789.7%2C%20690.0%20797.0%2C%20720.0%20801.7%20C%20750.0%20806.3%2C%20780.0%20811.1%2C%20810.0%20814.1%20C%20840.0%20817.1%2C%20870.0%20810.0%2C%20900.0%20819.8%20C%20930.0%20829.5%2C%20960.0%20858.8%2C%20990.0%20872.9%20C%201020.0%20886.9%2C%201050.0%20894.1%2C%201080.0%20904.0%20C%201110.0%20914.0%2C%201140.0%20935.9%2C%201170.0%20932.7%20C%201200.0%20929.5%2C%201230.0%20902.2%2C%201260.0%20884.7%20C%201290.0%20867.2%2C%201320.0%20840.9%2C%201350.0%20827.7%20C%201380.0%20814.5%2C%201425.0%20809.2%2C%201440.0%20805.5%22%20stroke-width%3D%220.7%22%20opacity%3D%220.174%22%2F%3E%3Cpath%20d%3D%22M%200.0%20960.2%20C%2015.0%20959.0%2C%2060.0%20963.6%2C%2090.0%20953.1%20C%20120.0%20942.5%2C%20150.0%20912.1%2C%20180.0%20897.1%20C%20210.0%20882.0%2C%20240.0%20873.0%2C%20270.0%20862.8%20C%20300.0%20852.5%2C%20330.0%20842.7%2C%20360.0%20835.6%20C%20390.0%20828.5%2C%20420.0%20820.1%2C%20450.0%20820.1%20C%20480.0%20820.2%2C%20510.0%20839.6%2C%20540.0%20836.0%20C%20570.0%20832.4%2C%20600.0%20807.4%2C%20630.0%20798.6%20C%20660.0%20789.8%2C%20690.0%20788.2%2C%20720.0%20783.1%20C%20750.0%20778.0%2C%20780.0%20765.3%2C%20810.0%20767.7%20C%20840.0%20770.1%2C%20870.0%20783.9%2C%20900.0%20797.5%20C%20930.0%20811.2%2C%20960.0%20835.8%2C%20990.0%20849.6%20C%201020.0%20863.4%2C%201050.0%20872.5%2C%201080.0%20880.3%20C%201110.0%20888.0%2C%201140.0%20890.5%2C%201170.0%20896.0%20C%201200.0%20901.4%2C%201230.0%20913.7%2C%201260.0%20913.0%20C%201290.0%20912.3%2C%201320.0%20889.3%2C%201350.0%20891.7%20C%201380.0%20894.0%2C%201425.0%20921.2%2C%201440.0%20927.1%22%20stroke-width%3D%221.4%22%20opacity%3D%220.160%22%2F%3E%3C%2Fsvg%3E");");

  /* depth that reads as material, not decoration */
  --lift-1:0 1px 2px rgba(21,18,12,.06), 0 2px 4px rgba(21,18,12,.04);
  --lift-2:0 2px 4px rgba(21,18,12,.05), 0 8px 18px -6px rgba(21,18,12,.13);
  --lift-3:0 1px 1px rgba(21,18,12,.05), 0 10px 24px -8px rgba(21,18,12,.16), 0 30px 60px -30px rgba(21,18,12,.26);
  --lift-4:0 2px 4px rgba(21,18,12,.05), 0 18px 40px -12px rgba(21,18,12,.2), 0 50px 90px -40px rgba(21,18,12,.34);
  --edge:inset 0 1px 0 rgba(255,255,255,.7);
  --edge-dark:inset 0 1px 0 rgba(255,255,255,.09);
  /* light-on-dark status tones: the default ink/pine values are
     invisible against the topbar's ink background */
  --live-on:#8FD9B6;
  --live-off:#E8A88E;
}

/* ---------- The contour field ---------- */
.contour-layer{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  color:var(--clay);opacity:.7;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 8%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 78% 8%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%);
}
.contour-layer::before{
  content:"";position:absolute;top:-6%;right:-14%;
  width:min(1180px,116%);height:min(760px,120%);
  background-image:var(--contour);
  background-size:cover;background-position:center;
  animation:drift 46s linear infinite;
}
.contour-layer--dark{color:var(--gold-soft);opacity:.2}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-3.2%,0) scale(1.045)}
}
@media (prefers-reduced-motion:reduce){.contour-layer::before{animation:none}}

/* a warm pool of light behind the headline */
.spotlight{
  position:absolute;border-radius:50%;pointer-events:none;
  width:min(900px,120vw);height:min(900px,120vw);
  left:-14%;top:-42%;
  background:radial-gradient(circle,rgba(169,78,43,.09) 0%,rgba(196,106,69,.05) 38%,transparent 66%);
}

/* ---------- Hero: layered rather than stacked ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,7.5vw,116px) clamp(52px,7vw,104px)}
.hero .container{position:relative;z-index:2}
.hero-grid{align-items:center}
.hero-copy{position:relative;z-index:3}
.hero-visual{position:relative}

/* the report card sits slightly proud of the page, like a document on a desk */
.hero-visual .proof{
  transform:rotate(-.5deg);
  box-shadow:var(--lift-4),var(--edge);
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);
}
.hero-visual:hover .proof{transform:rotate(0deg) translateY(-4px)}

/* a tinted plate behind the card, so the composition has depth */
.hero-visual::before{
  content:"";position:absolute;inset:auto -26px -30px auto;z-index:-1;
  width:74%;height:62%;border-radius:var(--r-l);
  background:linear-gradient(150deg,var(--clay-soft) 0%,rgba(185,138,46,.13) 100%);
  transform:rotate(2.2deg);
}

/* ---------- Material surfaces ---------- */
.proof,.ledger,.tariff,.receipt,.calc,.est,.news,.form-card{
  box-shadow:var(--lift-2);
  transition:box-shadow .45s var(--ease-out),transform .45s var(--ease-out);
}
.proof,.ledger,.tariff,.receipt{background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 42%)}
.proof-h,.ledger-h,.tariff-h{border-radius:0}

/* cards lift on hover instead of merely changing colour */
.svc,.guar,.big,.std,.plan,.step{
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),
             border-color .45s var(--ease-out),background-color .45s var(--ease-out);
}
.svc{box-shadow:var(--lift-1)}
.svc:hover{transform:translateY(-3px);box-shadow:var(--lift-3);border-color:var(--line-strong)}
.svc.featured{box-shadow:var(--lift-3)}
.svc.featured:hover{transform:translateY(-4px);box-shadow:var(--lift-4)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--lift-3)}
.big:hover{box-shadow:var(--lift-2)}
.guar:hover{box-shadow:var(--lift-2)}

/* icon plaques gain a real edge rather than floating */
.svc .ic,.guar .ic{
  box-shadow:var(--lift-1),var(--edge);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.svc:hover .ic{transform:scale(1.06) rotate(-3deg);box-shadow:var(--lift-2),var(--edge)}

/* ---------- Full-bleed image band ---------- */
.band-photo{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(320px,46vw,540px);
  display:flex;align-items:flex-end;
}
.band-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.band-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,18,12,.34) 0%,rgba(21,18,12,.62) 52%,rgba(21,18,12,.9) 100%);
}
.band-photo .container{position:relative;padding-block:clamp(38px,5vw,72px)}
.band-photo h2{color:#fff;max-width:20ch}
.band-photo p{color:rgba(245,241,232,.82);max-width:52ch}

/* duotone plate: keeps a photo inside the palette instead of fighting it */
.tone-clay img{filter:sepia(.28) saturate(.78) contrast(1.04) brightness(.86)}
.tone-pine img{filter:sepia(.2) hue-rotate(96deg) saturate(.7) contrast(1.06) brightness(.7)}

/* ---------- Section rhythm: stop the uniform stack ---------- */
.section+.section{border-top:1px solid transparent}
.sec-alt{background:var(--paper-2);position:relative;overflow:hidden}
.sec-alt .contour-layer{color:var(--pine);opacity:.22}
.sec-ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.sec-ink .contour-layer{color:var(--gold-soft);opacity:.16}

/* a wide rule between chapters, like a printed page */
.chapter-rule{
  display:flex;align-items:center;gap:16px;
  color:var(--muted-2);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:clamp(26px,3.4vw,44px);
}
.chapter-rule::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Choreographed entrance, used sparingly ----------
   Not a blanket fade: the hero's own elements arrive in sequence
   once, on load, and nothing below the fold animates at all. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .9s var(--ease-out) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.13s}
.hero-copy>*:nth-child(3){animation-delay:.21s}
.hero-copy>*:nth-child(4){animation-delay:.29s}
.hero-visual{animation:rise 1s var(--ease-out) .3s both}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-visual{animation:none}
  .contour-layer::before{animation:none}
  .svc:hover,.plan:hover,.hero-visual .proof{transform:none}
}


/* ---------- Callout: an honest operational rule, stated up front ---------- */
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,22px);align-items:start;
  padding:clamp(20px,2.6vw,30px);border:1px solid var(--line-strong);
  border-left:3px solid var(--clay);border-radius:0 var(--r) var(--r) 0;
  background:var(--white);box-shadow:var(--lift-1);
}
.callout .ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--clay-soft);color:var(--clay-d);
}
.callout .ic svg{width:18px;height:18px}
.callout h4{margin-bottom:6px}
.callout p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.callout p+p{margin-top:8px}

/* ---------- Price strip ----------
   One number, one scroll below the hero. An unpriced page is an
   undecided page: the visitor who wants certainty should not have to
   open a menu to find it. Hairline rules rather than cards, so it
   reads as part of the printed page instead of a checkout bolted on.
   The money cell reuses the fee bar, so "what do they keep" is
   answered with a picture rather than a sentence. */
.pricestrip{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:var(--paper-2)}
.pricestrip-in{display:grid;grid-template-columns:repeat(3,1fr)}
.pcell{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px) clamp(18px,2.2vw,30px);
  border-right:1px solid var(--line);
}
.pcell:last-child{border-right:0}
.pcell .pl{
  font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-d);margin-bottom:12px;
}
.pcell .pf{
  display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.9vw,2.3rem);
  font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pcell .pf small{
  display:block;font-family:var(--sans);font-size:.78rem;font-weight:400;
  line-height:1.5;color:var(--muted);letter-spacing:0;margin-top:10px;max-width:34ch;
}
.pcell .pd{margin-top:auto;padding-top:18px;font-size:.85rem}
.pcell .pd a{
  color:var(--clay-d);font-weight:600;border-bottom:1px solid var(--clay-l);
  padding-bottom:1px;transition:color .2s,border-color .2s;
}
.pcell .pd a:hover{color:var(--ink);border-color:var(--ink)}
.pcell .pd svg{width:13px;height:13px}
/* cell-sized proportions: the bar is a statement here, not a readout */
.pcell .feebar{height:8px;margin:18px 0 0}
.pcell .feekey{margin-top:10px;font-size:.73rem;gap:16px}
.pcell .feekey b{width:8px;height:8px}
.pcell .feekey .pv{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- Bill / post line items ---------- */
.postlist{border-top:1px solid var(--line)}
.postlist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line-2);
  font-size:.92rem;color:var(--ink-soft);
}
.postlist li b{font-weight:600;color:var(--ink);white-space:nowrap}
.postlist li span{display:flex;align-items:baseline;gap:10px;min-width:0}
.postlist li i{
  font-style:normal;color:var(--clay);font-size:.7rem;font-weight:700;flex:none;
  font-variant-numeric:tabular-nums;
}

/* ---------- Ruled sequence ----------
   The five-across step strip is too narrow for this much text and
   repeats a pattern used elsewhere. This reads like a page from a
   maintenance manual: numbers in the margin, a hairline between
   each item, one comfortable measure. Matches the tariff table. */
.proc{
  display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(24px,4vw,68px);align-items:start;
}
.proc-intro h3{margin-bottom:10px}
.proc-intro p{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:18px}
.proc-intro .proc-mark{
  display:flex;align-items:center;gap:12px;color:var(--clay);
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.proc-intro .proc-mark::after{content:"";flex:1;height:1px;background:var(--line-strong)}

.seq{list-style:none;border-top:1px solid var(--line-strong);counter-reset:seq}
.seq li{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:clamp(14px,2vw,26px);
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease-out);
}
.seq li:hover{background:var(--paper-2)}
.seq-n{
  font-family:var(--serif);font-size:1.3rem;line-height:1.4;
  color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease-out);
}
.seq li:hover .seq-n{color:var(--clay)}
.seq h4{font-size:1.06rem;margin-bottom:5px}
.seq p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:58ch}
@media (max-width:860px){
  .proc{grid-template-columns:1fr;gap:22px}
}

/* ---------- Image-led service grid ----------
   Asymmetric on purpose: a uniform three-across grid is the shape
   every template reaches for, and it is part of why a page reads
   as machine-made. The first card is tall so the eye has somewhere
   to land. */
.imggrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
}
.imgcard{
  position:relative;grid-column:span 1;min-height:clamp(300px,32vw,400px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;border-radius:var(--r-l);isolation:isolate;
  color:#fff;box-shadow:var(--lift-2);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
/* the first card is tall so the eye has somewhere to land */
.imgcard--tall{grid-column:span 2;min-height:clamp(340px,40vw,470px)}
.imgcard--wide{grid-column:span 2}
.imgcard>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease-out);
}
.imgcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,18,12,.1) 0%,rgba(21,18,12,.58) 46%,rgba(21,18,12,.93) 100%);
}
.imgcard:hover{transform:translateY(-4px);box-shadow:var(--lift-4)}
.imgcard:hover>img{transform:scale(1.055)}
.imgcard-body{padding:clamp(20px,2.4vw,30px)}
.imgcard-body .tag{
  display:inline-block;margin-bottom:12px;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);background:rgba(21,18,12,.72);
  padding:5px 10px;border-radius:3px;backdrop-filter:blur(3px);
}
.imgcard-body h3{color:#fff;margin-bottom:10px;max-width:22ch}
.imgcard-body>p{color:rgba(245,241,232,.84);font-size:.9rem;line-height:1.55;max-width:46ch;margin-bottom:14px}
.imgcard-body ul{display:flex;flex-wrap:wrap;gap:6px}
.imgcard-body li{
  font-size:.72rem;letter-spacing:.02em;color:rgba(245,241,232,.9);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:4px 10px;
  background:rgba(21,18,12,.28);backdrop-filter:blur(4px);
}
@media (max-width:980px){
  .imgcard{grid-column:span 2;min-height:clamp(300px,40vw,400px)}
  .imgcard--tall{grid-column:span 4;min-height:clamp(360px,48vw,460px)}
  .imgcard--wide{grid-column:span 2}
}
@media (max-width:640px){
  .imggrid{grid-template-columns:1fr}
  .imgcard,.imgcard--tall,.imgcard--wide{grid-column:1/-1;min-height:300px}
}

/* ---------- Emergency callout ----------
   The one service nobody else in this market offers. Given the one
   treatment that stops it reading as a template. */
.sos{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  align-items:start;padding:clamp(24px,3.4vw,40px);
  background:linear-gradient(135deg,var(--clay) 0%,var(--clay-d) 100%);
  border-radius:var(--r-l);color:#fff;box-shadow:var(--lift-3);
  position:relative;overflow:hidden;
}
.sos::before{
  content:"";position:absolute;top:-40%;right:-8%;width:340px;height:340px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);
}
.sos-mark{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);flex:none;
}
.sos-mark svg{width:28px;height:28px;color:#fff}
.sos h3{color:#fff;margin-bottom:8px}
/* descendant, not child: the heading and copy sit inside the second grid cell */
.sos p{color:rgba(255,255,255,.9);max-width:60ch;margin-bottom:16px}
.sos-pills{display:flex;flex-wrap:wrap;gap:8px}
.sos-pills span{
  font-size:.76rem;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
}
.sos .btn{background:#fff;color:var(--clay-d);box-shadow:none}
.sos .btn:hover{background:var(--gold-soft)}

/* ---------- Mobile bottom bar ----------
   Not a menu. A status strip with destinations underneath it: the strip
   answers the question a visitor actually arrives with — do you cover my
   town — and keeps the answer once they have checked it. Nothing floats
   above the bar, so nothing can collide with it; the FAB is hidden at
   this width and WhatsApp is a slot instead. (Two raised circles — a
   centre notch and a floating button — cannot both live in 81px. That
   is not a layout detail, it is why theirs overlaps itself.) */
.bnav{display:none}
.bnav-status{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;height:28px;padding:0 14px;
  font-size:.7rem;font-weight:600;letter-spacing:.05em;color:var(--muted);
  background:var(--paper-2);border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bnav-status svg{width:12px;height:12px;flex:none}
.bnav-status.is-covered{color:var(--pine-d);background:var(--pine-soft);border-bottom-color:var(--pine-soft)}
.bnav-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr);
  background:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px);
}
.bnav a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:58px;min-width:0;padding:8px 4px;
  font-size:.66rem;font-weight:600;letter-spacing:.01em;color:var(--muted);
  transition:color .2s;
}
/* the track floors are zero, so a long word has to clip rather than push the
   bar wider than the phone and give the whole page a sideways scroll */
.bnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav a svg{width:20px;height:20px}
/* active is a tick above the glyph, not a filled pill: this bar belongs
   to the printed page, and pills are what the template does */
.bnav a.is-active{color:var(--clay-d)}
.bnav a.is-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:2px;background:var(--clay);
}
/* the one filled element on the page, which is how a primary reads
   without a raised circle hanging over the bar */
.bnav .bnav-wa{background:var(--clay);color:#fff;gap:6px;font-size:.72rem}
.bnav .bnav-wa:hover{background:var(--clay-d);color:#fff}
.bnav .bnav-wa::before{display:none}
.bnav .bnav-wa svg{width:19px;height:19px}

/* ---------- Responsive
   ============================================================ */

@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .guar-grid{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .steps{grid-template-columns:repeat(3,1fr)}
.step:nth-child(3){border-right:0}


   .nav-links{gap:22px}
  .std-grid,.big-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  body{font-size:16px}
  .hero-grid,.money-grid,.cov-grid,.report-grid,.news-grid,.grid-2{grid-template-columns:1fr;gap:44px}
  .hero-visual{max-width:480px;margin-inline:auto;width:100%}
  .compare{grid-template-columns:1fr}
  .compare-col.bad{border-right:0;border-bottom:1px solid var(--line)}
  .svc-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .step:last-child{border-bottom:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .topbar-left .st:nth-child(2){display:none}
  
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .std-grid,.big-grid{grid-template-columns:1fr}
  .pay-row{grid-template-columns:1fr}
  .tariff-row{grid-template-columns:1fr auto;gap:8px 16px}
  .tariff-row dd{grid-column:1/-1;grid-row:2}
  .tariff-row .p{grid-column:2;grid-row:1;align-self:start}
  .fail-row{grid-template-columns:1fr;gap:10px}
  .facts-row{grid-template-columns:1fr;gap:5px}
  .proof-meta{grid-template-columns:repeat(2,1fr)}
  .proof-meta div:nth-child(2){border-right:0}
  .proof-meta div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .jump a{flex:1 1 50%;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
  .pricestrip-in{grid-template-columns:1fr}
  .pcell{border-right:0;border-bottom:1px solid var(--line)}
  .pcell:last-child{border-bottom:0}

  /* the bar replaces the FAB and the burger: two entry points for the
     same job is how a phone screen stops working */
  .bnav{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:180;
    box-shadow:0 -1px 0 var(--line-strong),0 -18px 34px -26px rgba(21,18,12,.34);
  }
  .fab{display:none}
  /* reserve the height so the footer is never trapped under the bar */
  body{padding-bottom:calc(87px + env(safe-area-inset-bottom,0px))}
  .langinvite{bottom:calc(97px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px){
  .topbar .container{height:auto;padding-block:8px;flex-wrap:wrap}
  .topbar-left{font-size:.74rem}
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .news-form{flex-direction:column}
  .news-form .btn{width:100%}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .est-total{flex-direction:column;align-items:flex-start}
.est-tab{min-width:92px;padding:14px 12px;font-size:.8rem}


   .fab{right:14px;bottom:14px}
  .fab a{width:50px;height:50px}
  /* the bar grew a status strip, so the invitation clears it again */
  .langinvite{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Very narrow phones (320px: iPhone SE, small Androids) ----------
   Below this width the header cannot hold the wordmark, the quote button
   and the burger on one line. The quote button goes: the burger menu opens
   to the same call to action, and the bottom bar carries the rest. */
@media(max-width:360px){
  .nav{gap:12px}
  .nav-cta .btn{display:none}
  .brand-text small{font-size:.55rem;letter-spacing:.14em}
  /* a button that cannot wrap sets a floor the phone does not have */
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .sos{grid-template-columns:1fr}
  .sos-pills span{white-space:normal}
}

/* ---------- Print ---------- */
@media print{
  .topbar,header.site,.fab,.mobile-menu,.menu-scrim,.modal,.bnav{display:none!important}
body{background:#fff}
   body::before{display:none}
  .money,.svc.featured,.plan.featured,.news,.cta-band{background:#fff!important;color:#000!important}
}