/* ============================================================
   BARRETT MORTGAGES — design tokens
   Palette lifted from the live Framer site.
   ============================================================ */
:root{
  --ink:#041717;          /* near-black teal, body text on paper   */
  --teal:#0B3636;         /* primary dark brand band               */
  --teal-2:#0E4343;       /* raised surface on dark                */
  --teal-line:#1C5050;    /* hairline on dark                      */
  --mint:#4CF5CB;         /* primary accent                        */
  --mint-soft:#99EDAF;    /* secondary accent (scheme pills)       */
  --lime:#C0E9A1;         /* tertiary accent                       */
  --paper:#F7FAF5;        /* page ground                           */
  --white:#FFFFFF;
  --muted:#586C6C;        /* secondary text on paper               */
  --muted-dark:rgba(255,255,255,.72); /* secondary text on teal    */
  --line:#E2EAE4;         /* hairline on paper                     */
  --radius:12px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow:0 18px 40px -24px rgba(4,23,23,.35);
  --maxw:1180px;
  --sans:"Red Hat Text","Red Hat Text Placeholder",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Red Hat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance;line-height:1.08}
h1{font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.032em}
h2{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.028em}
h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.022em}
h4{font-size:1.15rem;letter-spacing:-.012em;font-weight:600}
p{margin:0}
.lede{font-size:1.05rem;color:var(--muted);max-width:62ch}
.on-dark .lede,.lede.on-dark{color:var(--muted-dark)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.on-dark .eyebrow{color:var(--mint)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,8vw,104px)}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}
.section--dark{background:var(--teal);color:var(--white)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;gap:20px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.row--center{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 22px 16px 26px;border-radius:var(--radius);
  font-size:.92rem;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn--mint{background:var(--mint);color:var(--teal)}
.btn--mint:hover{background:#6BF8D6}
.btn--teal{background:var(--teal);color:var(--white)}
.btn--teal:hover{background:#125050}
.btn--ghost-dark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28)}
.btn--ghost-dark:hover{border-color:var(--mint);background:rgba(76,245,203,.08)}
.btn--ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal)}
.btn .dot{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  display:grid;place-items:center;background:rgba(4,23,23,.14);
}
.btn--teal .dot,.btn--ghost-dark .dot{background:rgba(255,255,255,.16)}
.btn .dot svg{width:11px;height:11px;display:block}

.linkbtn{
  display:inline-flex;align-items:center;gap:12px;font-size:.95rem;
  font-weight:500;text-decoration:none;color:inherit;cursor:pointer;
  background:none;border:0;padding:0;
}
.linkbtn .dot{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  display:grid;place-items:center;background:var(--teal);color:var(--mint);
  transition:transform .16s ease;
}
.on-dark .linkbtn .dot,.card--dark .linkbtn .dot{background:var(--mint);color:var(--teal)}
.linkbtn:hover .dot{transform:translateX(4px)}
.linkbtn:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:4px}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--teal);color:var(--white)}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:68px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white)}
/* The mark keeps its true 502:334 proportions at every size — never distorted. */
.brand__mark{width:54px;height:36px;flex:0 0 54px;display:block}
.brand__name{display:flex;flex-direction:column;line-height:1.04}
.brand__name b{font-size:1.22rem;font-weight:700;letter-spacing:-.035em}
.brand__name span{font-size:.98rem;font-weight:400;letter-spacing:-.025em;color:rgba(255,255,255,.66)}

.navlinks{display:none;gap:28px;align-items:center}
.navlinks a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.86);
  padding-block:6px;border-bottom:2px solid transparent;
}
.navlinks a:hover,.navlinks a.is-active{color:var(--white);border-bottom-color:var(--mint)}
.navtools{display:flex;align-items:center;gap:10px}
.iconbtn{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--white);
}
.iconbtn:hover{border-color:var(--mint);color:var(--mint)}
.iconbtn:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.iconbtn svg{width:17px;height:17px}
.navcta{display:none}
@media (min-width:1080px){
  .navlinks{display:flex}
  .navcta{display:inline-flex;padding:11px 16px 11px 20px;font-size:.85rem}
  .burger{display:none}
}

/* ---------- "I'm looking to" mega menu (matches live site) ---------- */
.navdrop{position:relative}
.navdrop__btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.86);
  padding:6px 0;border-bottom:2px solid transparent;
}
.navdrop__btn svg{width:12px;height:12px;transition:transform .15s}
.navdrop__btn:hover,.navdrop.is-open .navdrop__btn{color:var(--white);border-bottom-color:var(--mint)}
.navdrop.is-open .navdrop__btn svg{transform:rotate(180deg)}
.navdrop__panel{position:absolute;top:calc(100% + 16px);left:-24px;display:none;color:var(--ink)}
.navdrop__panel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}  /* hover bridge over the gap */
.navdrop.is-open .navdrop__panel{display:flex;align-items:flex-start;gap:14px}
.mm__list{width:440px;padding:14px;background:var(--white);border-radius:var(--radius-lg);box-shadow:0 18px 50px rgba(0,0,0,.22)}
.navlinks a.mm__item{
  display:flex;align-items:center;gap:16px;padding:14px 14px;border-radius:12px;border:0;color:var(--ink);text-decoration:none;
}
.mm__ico{width:30px;height:30px;flex:0 0 30px;color:var(--teal)}
.mm__ico svg{width:100%;height:100%;display:block}
.mm__txt{flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.mm__txt b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.mm__txt span{font-size:.9rem;color:var(--muted);line-height:1.4;font-weight:400}
.mm__go{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--teal);color:var(--mint);display:grid;place-items:center;transition:box-shadow .15s}
.mm__go svg{width:12px;height:12px}
.navlinks a.mm__item.is-on .mm__txt b{color:#1FC99E}
.navlinks a.mm__item.is-on .mm__go{box-shadow:0 0 0 4px rgba(76,245,203,.28),0 0 16px rgba(76,245,203,.55)}
.mm__flyout{position:relative;min-width:320px}
.mm__flyout::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:16px}  /* bridge between list and flyout */
.mm__sub{padding:14px 18px;background:var(--white);border-radius:var(--radius-lg);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.mm__sub[hidden]{display:none}
.navlinks .mm__sub a{display:flex;flex-direction:column;gap:3px;padding:12px 10px;border:0;border-radius:10px;color:var(--ink);text-decoration:none}
.navlinks .mm__sub a b{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.02rem}
.navlinks .mm__sub a b .mm__go{width:20px;height:20px;flex-basis:20px}
.navlinks .mm__sub a b .mm__go svg{width:9px;height:9px}
.navlinks .mm__sub a span{font-size:.88rem;color:var(--muted);font-weight:400}
.navlinks .mm__sub a:hover b{color:#1FC99E}
.navlinks .mm__sub a:hover .mm__go{box-shadow:0 0 12px rgba(76,245,203,.6)}
/* mobile sheet version */
.sheet__mm{padding:10px 0 14px;border-bottom:1px solid var(--teal-line)}
.sheet nav .sheet__mmhead,.sheet__mmhead{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--white);border:0;padding:6px 0;font-size:1.1rem}
.sheet__mmhead .mm__ico{color:var(--mint);width:24px;height:24px;flex-basis:24px;margin-top:2px}
.sheet__mmhead b{display:block;font-weight:500}
.sheet__mmhead small{display:block;font-size:.85rem;color:rgba(255,255,255,.62)}
.sheet__mmsub{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0 36px}
.sheet__mmsub a{font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--teal-line);color:var(--white);text-decoration:none}
.sheet__mmsub a:hover{border-color:var(--mint);color:var(--mint)}

/* ---------- mobile menu ---------- */
.sheet{
  position:fixed;inset:0;z-index:70;background:var(--teal);color:var(--white);
  padding:24px;overflow-y:auto;
}
.sheet[hidden]{display:none!important}
.sheet__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.sheet nav{display:flex;flex-direction:column;gap:2px}
.sheet nav a{
  text-decoration:none;font-size:1.5rem;font-weight:500;letter-spacing:-.02em;
  padding-block:12px;border-bottom:1px solid var(--teal-line);
}
.sheet nav a:hover{color:var(--mint)}
.sheet__group{margin-top:28px}
.sheet__group h5{
  margin:0 0 10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);font-weight:500;
}
.sheet__group a{font-size:1.02rem;font-weight:400;padding-block:9px}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--teal);color:var(--white);overflow:hidden;
  padding-block:clamp(72px,11vw,132px);
}
@media (max-width:980px){ .hero{padding-block:104px clamp(72px,11vw,132px)} }
.hero__dots{position:absolute;pointer-events:none;width:104px;height:104px;display:block}
.hero__dots svg{width:100%;height:100%;display:block}
.hero__dots--l{left:40px;top:54px}
.hero__dots--r{right:40px;bottom:54px}
/* Narrow screens: the right-hand field sat over the headline, so it goes.
   The left one shrinks into the corner and the hero gains headroom for it. */
@media (max-width:980px){
  .hero__dots--l{left:20px;top:18px;width:74px;height:74px}
  .hero__dots--r{display:none}
}
@media (max-width:600px){
  .hero__dots--l{left:14px;top:14px;width:58px;height:58px}
}
.hero__inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.dot-a{
  transform-origin:center;transform-box:fill-box;
  animation-name:dotBreathe;animation-iteration-count:infinite;animation-timing-function:ease-in-out;
}
@keyframes dotBreathe{
  0%,100%{opacity:.14;transform:scale(.82)}
  50%    {opacity:.62;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .dot-a{animation:none;opacity:.34}
}
.hero h1{max-width:16ch}
.hero .lede{color:var(--muted-dark);font-size:1.06rem;max-width:52ch}

/* ---------- live base rate pill (homepage hero) ---------- */
.hero__proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.baserate{
  display:inline-flex;align-items:center;gap:9px;font-size:.9rem;text-decoration:none;color:var(--white);
  border-radius:999px;padding:7px 15px 7px 13px;border:1px solid rgba(76,245,203,.35);background:rgba(76,245,203,.08);
  transition:background .16s ease,border-color .16s ease;
}
.baserate:hover{background:rgba(76,245,203,.14);border-color:var(--mint)}
.baserate__dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(76,245,203,.6);animation:bpulse 2.4s ease-out infinite}
@keyframes bpulse{0%{box-shadow:0 0 0 0 rgba(76,245,203,.55)}70%{box-shadow:0 0 0 7px rgba(76,245,203,0)}100%{box-shadow:0 0 0 0 rgba(76,245,203,0)}}
@media (prefers-reduced-motion:reduce){.baserate__dot{animation:none}}
.baserate__label{color:var(--muted-dark)}
.baserate b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mint)}
.baserate__when{font-size:.78rem;color:var(--muted-dark);padding-left:9px;border-left:1px solid rgba(255,255,255,.18)}
.baserate--preview b{color:rgba(255,255,255,.55)}
@media (max-width:520px){ .baserate__when{display:none} }

/* ---------- rating ---------- */
.rating{display:inline-flex;align-items:center;gap:10px;font-size:.9rem}
.stars{display:inline-flex;gap:3px}
.stars svg{width:15px;height:15px;color:#FBBC04}
.rating b{font-weight:600}
.rating span{color:var(--muted-dark)}
.on-paper .rating span,.rating.on-paper span{color:var(--muted)}
a.rating{
  text-decoration:none;border-radius:999px;padding:7px 15px 7px 11px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  transition:background .16s ease,border-color .16s ease;
}
.rating__g{display:inline-flex;align-items:center}
.rating__g svg{width:15px;height:15px;display:block}
.on-paper a.rating{border-color:var(--line);background:var(--white)}
a.rating:hover{background:rgba(255,255,255,.1);border-color:rgba(76,245,203,.5)}
a.rating:hover span{color:var(--mint)}
.on-paper a.rating:hover{background:var(--paper);border-color:var(--teal)}
.on-paper a.rating:hover span,a.rating.on-paper:hover span{color:var(--teal)}
a.rating:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.googlemark{
  display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:500;
}
.googlemark svg{width:16px;height:16px;flex:0 0 16px}

/* ---------- lender marquee ---------- */
.lenders{background:var(--white);border-block:1px solid var(--line);padding-block:14px}
.lenders__viewport{overflow:hidden;
  /* fade the logos out at both edges rather than cutting them off mid-mark */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.lenders__track{display:flex;align-items:center;width:max-content;animation:slide 46s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lenders:hover .lenders__track,.lenders:focus-within .lenders__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .lenders__track{animation:none}
  .lenders__viewport{overflow-x:auto}   /* still browsable, just not moving on its own */
}
/* Clear-space zone around every mark — no logo is ever crowded by its neighbour. */
.lender{
  flex:0 0 auto;height:46px;padding-inline:26px;
  display:grid;place-items:center;
}
.lender img{display:block;height:auto;max-height:40px;width:auto;object-fit:contain}

/* ---------- stat band ---------- */
.stats{display:grid;gap:1px;background:var(--teal-line);border-radius:var(--radius-lg);overflow:hidden}
@media (min-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.stats{grid-template-columns:repeat(4,1fr)}}
/* three-figure rows: one line of three on desktop, never an empty fourth box */
@media (min-width:640px){.stats--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.stats--3{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--teal);padding:28px 24px;display:flex;flex-direction:column;gap:6px}
.stat b{font-size:1.9rem;font-weight:600;letter-spacing:-.035em;color:var(--mint);font-variant-numeric:tabular-nums}
.stat span{font-size:.86rem;line-height:1.45;color:var(--muted-dark)}

/* ---------- scheme pills ---------- */
.pillcloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px;margin-inline:auto}
.pill{
  padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:500;
  background:var(--white);border:1px solid var(--line);
}
a.pill{
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
a.pill:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(4,23,23,.45)}
a.pill:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.pill--mint{background:rgba(76,245,203,.22);border-color:rgba(76,245,203,.5)}
.pill--lime{background:rgba(192,233,161,.35);border-color:rgba(192,233,161,.7)}
.pill--soft{background:rgba(153,237,175,.3);border-color:rgba(153,237,175,.6)}

/* ---------- feature rows ---------- */
.feature{display:grid;gap:32px;align-items:center}
@media (min-width:900px){
  .feature{grid-template-columns:1fr 1fr;gap:56px}
  .feature--flip .feature__art{order:-1}
}
.feature__body{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.feature__art{
  border-radius:var(--radius-lg);background:var(--teal);color:var(--white);
  padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:18px;
  position:relative;overflow:hidden;
}

/* borrowing meter (art for feature 1) */
.meter{display:flex;flex-direction:column;gap:10px}
.meter__label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted-dark)}
.meter__bar{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.meter__fill{height:100%;border-radius:999px;background:var(--mint)}
.meter__fill--soft{background:var(--mint-soft)}
.meter b{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* recommendation card (art for feature 2) */
.reccard{background:var(--teal-2);border:1px solid var(--teal-line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px}
.recrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.9rem}
.recrow span{color:var(--muted-dark)}
.recrow b{font-weight:600;font-variant-numeric:tabular-nums}
.recrow--hi b{color:var(--mint);font-size:1.25rem}

/* advisor (art for feature 3) */
.advisor{display:flex;align-items:center;gap:16px}
.avatar{
  width:58px;height:58px;border-radius:50%;flex:0 0 58px;display:grid;place-items:center;
  background:var(--mint);color:var(--teal);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
}
.steps{display:flex;flex-direction:column;gap:0}
.stepitem{display:flex;gap:14px;align-items:flex-start;padding-block:11px}
.stepitem+.stepitem{border-top:1px solid var(--teal-line)}
.stepnum{
  font-family:var(--mono);font-size:.7rem;color:var(--mint);padding-top:3px;flex:0 0 22px;
}
.stepitem p{font-size:.9rem;color:var(--muted-dark)}
.stepitem b{display:block;font-weight:600;color:var(--white);font-size:.94rem;margin-bottom:2px}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px}
@media (min-width:700px){.cards--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:700px){.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards--4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease;
}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card--dark{background:var(--teal);color:var(--white);border-color:transparent}
.card--dark p{color:var(--muted-dark)}
.card p{color:var(--muted);font-size:.95rem}
.card__tag{
  align-self:flex-start;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(76,245,203,.2);color:var(--teal);
}
.card--dark .card__tag{background:rgba(76,245,203,.16);color:var(--mint)}

/* ---------- calculator explanation text ---------- */
.calcinfo{max-width:760px;margin:clamp(40px,6vw,64px) auto 0}
.calcinfo:empty{display:none}
.calcinfo h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0 0 18px}
.calcinfo h3{font-size:1.25rem;margin:28px 0 10px}
.calcinfo h4{font-size:1.02rem;margin:18px 0 6px}
.calcinfo p,.calcinfo li{color:var(--muted);line-height:1.65}
.calcinfo ul{padding-left:20px;margin:0 0 12px}

/* ---------- managing director quote (blog page) ---------- */
.mdquote{margin:clamp(36px,5vw,56px) auto 0;max-width:760px;text-align:center}
.mdquote blockquote{margin:0 0 14px;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
.mdquote figcaption{font-size:.9rem;color:var(--muted)}
.mdquote figcaption b{color:var(--ink);font-weight:600}

/* ---------- guide page template: soft boxes, centred ---------- */
:root{--tint-mint:#E4FAF1;--tint-mint-b:#BDEFDB;--tint-lime:#EFF8E5;--tint-lime-b:#D3EABF;--tint-sage:#E9F5EC;--tint-sage-b:#C6E5CE;--tint-teal:#E8F2F1;--tint-teal-b:#C9DFDD}
.qbox-row{display:grid;gap:20px;margin-top:40px}
@media (min-width:760px){.qbox-row{grid-template-columns:1fr 1fr}}
.article__photo{margin:8px 0 28px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.article__photo img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.qbox-row--photo{align-items:stretch}
.qbox-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--tint-teal);min-height:260px}
.qbox-photo img{display:block;width:100%;height:100%;object-fit:cover}
.qbox-row--one{max-width:600px;margin-inline:auto;grid-template-columns:1fr!important}
.qbox{border-radius:var(--radius-lg);padding:34px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;border:1px solid}
.qbox--yes{background:var(--tint-mint);border-color:var(--tint-mint-b)}
.qbox--no{background:var(--tint-lime);border-color:var(--tint-lime-b)}
.qbox h4{font-size:1.2rem;color:var(--ink)}
.qbox p{color:#2E4646;font-size:1rem;line-height:1.6;max-width:44ch}
.qbox__badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--mint)}
.qbox--no .qbox__badge{background:var(--white);color:var(--teal);border:1px solid var(--tint-lime-b)}
.qbox__badge svg{width:20px;height:20px}
.pillbtn{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-radius:999px;
  background:var(--teal);color:var(--white);text-decoration:none;font-weight:600;font-size:.88rem;transition:background .15s,transform .15s;
}
.pillbtn .dot{width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center}
.pillbtn .dot svg{width:10px;height:10px}
.pillbtn:hover{background:#0F4747;transform:translateY(-1px)}
.qbox .pillbtn{margin-top:6px}
.gsplit{display:grid;gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:clamp(40px,5vw,60px)}
@media (min-width:900px){.gsplit{grid-template-columns:1.05fr .95fr}}
.gsplit__text{display:flex;flex-direction:column;gap:14px}
.gsplit__text .lede{max-width:52ch}
.gsplit__photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--tint-teal);max-width:560px;justify-self:end;width:100%}
.gsplit__photo img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.gsplit__photo--empty{aspect-ratio:5/3;display:grid;place-items:center;color:var(--teal)}
.gsplit__photo--empty svg{width:34%;opacity:.5}
.scards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.scard{
  flex:1 1 100%;border-radius:var(--radius-lg);padding:30px 26px;text-align:center;border:1px solid;
  display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .18s ease,box-shadow .18s ease;
}
@media (min-width:700px){.scard{flex:0 1 calc(50% - 10px)}}
@media (min-width:1000px){.scard{flex:0 1 calc(33.333% - 14px)}}
.scard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.scard--0{background:var(--tint-mint);border-color:var(--tint-mint-b)}
.scard--1{background:var(--tint-lime);border-color:var(--tint-lime-b)}
.scard--2{background:var(--tint-teal);border-color:var(--tint-teal-b)}
.scard--3{background:var(--tint-sage);border-color:var(--tint-sage-b)}
.scard h4{font-size:1.1rem;color:var(--ink)}
.scard p{color:#2E4646;font-size:.95rem;line-height:1.6}
.scard__num{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--teal);font-weight:600}
.tquote{margin:0 auto;max-width:860px;text-align:center;background:var(--teal);color:var(--white);border-radius:var(--radius-lg);padding:clamp(34px,5vw,56px) clamp(24px,5vw,64px) clamp(28px,4vw,44px);position:relative}
.tquote__mark{display:block;font-size:4.5rem;line-height:.6;color:var(--mint);font-family:Georgia,serif;margin-bottom:10px}
.tquote blockquote{margin:0 0 18px;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5;letter-spacing:-.01em}
.tquote figcaption{font-size:.9rem;color:var(--muted-dark)}
.tquote figcaption b{color:var(--mint);font-weight:600}

/* ---------- Our Mission: vision figures, same look as the service infographic ---------- */
.vstats{display:grid;gap:1px;background:var(--teal-line);border-radius:var(--radius-lg);overflow:hidden;align-self:center}
.vstat{background:var(--teal);color:var(--white);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:10px;align-items:center}
.vstat b{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.04em;color:var(--mint);line-height:1;min-width:3.6ch}
.vstat span{font-size:.92rem;color:var(--muted-dark);line-height:1.4}
.vstat__vis{grid-column:1 / -1}
.vstat__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.vstat__bar i{display:block;height:100%;border-radius:99px;background:var(--mint);min-width:14px}
.vstat__bar--down i{background:var(--lime)}
.vstat__dots{display:flex;gap:8px}
.vstat__dots i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.vstat__dots i.on{background:var(--mint);border-color:var(--mint)}

/* ---------- Our Mission: soft centred cards ---------- */
.mcards{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)}
.mcard{border-radius:var(--radius-xl);border:1px solid;padding:clamp(32px,5vw,60px) clamp(22px,5vw,64px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.mcard--mint{background:var(--tint-mint);border-color:var(--tint-mint-b)}
.mcard--lime{background:var(--tint-lime);border-color:var(--tint-lime-b)}
.mcard--teal{background:var(--tint-teal);border-color:var(--tint-teal-b)}
.mcard h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.mcard__body{max-width:760px;display:flex;flex-direction:column;gap:14px}
.mcard__body .lede{color:#2E4646;text-align:center}
.mcard .stats,.mcard .vstats{width:100%;margin-top:14px;text-align:left}
.mbreak{width:100%;max-width:860px;align-self:center;margin:clamp(8px,2vw,20px) 0}
.mbreak img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.mbreak figcaption{margin-top:10px;text-align:center;font-size:.84rem;color:var(--muted)}
.vstats--row{align-self:stretch}
@media (min-width:800px){.vstats--row{grid-template-columns:repeat(3,1fr)}}
.vstats--row .vstat{grid-template-columns:1fr;text-align:left}

/* ---------- forms: call-back + progressive quote ---------- */
.opt{font-weight:400;color:var(--muted);font-size:.8rem;margin-left:4px}
.pick{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-left:8px;font-weight:500;white-space:nowrap}
.flabel{font-size:.88rem;font-weight:500;letter-spacing:-.005em}
.formerr{color:#B4442A;font-size:.9rem;margin:6px 0 12px}
.cbform__go{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.cbform__alt{font-size:.9rem;color:var(--muted)}
.cbform__alt a,.cbform__more a{color:var(--teal);font-weight:600}
.cbform__more{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.formshell.formshell--wide{max-width:900px}
.qnotes{margin-bottom:22px}
.qnotes__in{display:grid;gap:14px}
@media (min-width:760px){.qnotes__in{grid-template-columns:1.4fr 1fr}}
.qnotes summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--teal);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);list-style-position:inside}
.qnotes[open] summary{margin-bottom:12px}
@media (min-width:760px){ .qnotes summary{display:none} .qnotes[open] summary{margin:0} }
.qnotes .notice{margin:0}
.qsteps{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
@media (min-width:760px){.qsteps{grid-template-columns:repeat(6,1fr)}}
.qstep{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--white);cursor:pointer;font:inherit;color:var(--ink)}
.qstep:disabled{cursor:default;opacity:.55}
.qstep__n{grid-row:1 / 3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--paper);border:1px solid var(--line)}
.qstep__t{font-size:.84rem;font-weight:600;line-height:1.2}
.qstep__o{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qstep.is-done .qstep__n{background:var(--mint);border-color:var(--mint);color:var(--teal)}
.qstep.is-now{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.qstep.is-now .qstep__n{background:var(--teal);border-color:var(--teal);color:var(--white)}
.qcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,4vw,40px)}
.qcard h3{font-size:1.5rem;margin-bottom:6px}
.qlede{font-size:.97rem;margin-bottom:22px}
.qh3--2{margin-top:4px;padding-top:22px;border-top:1px solid var(--line)}
.qreveal .check{margin-top:4px}
.qgoal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
@media (min-width:700px){.qgoal{grid-template-columns:repeat(5,1fr)}}
.qgoal input{position:absolute;opacity:0;width:0;height:0}
.qgoal label{display:flex;flex-direction:column;gap:4px;padding:14px 14px 13px;border-radius:14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.qgoal label b{font-size:.95rem;font-weight:600}
.qgoal label span{font-size:.8rem;color:var(--muted);line-height:1.35}
.qgoal label:hover{border-color:var(--teal)}
.qgoal input:checked+label{background:var(--tint-mint);border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.qgoal input:focus-visible+label{outline:3px solid var(--mint);outline-offset:2px}
.qnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.qnav__right{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-left:auto}
.qsendlink{background:none;border:0;padding:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qbtn-more{background:var(--tint-mint);color:var(--teal);border:2px solid var(--mint);font-weight:600}
.qbtn-more:hover{background:#D2F7E8;border-color:var(--teal)}
/* step one: "Add more detail" leads, "Send now" stays an obvious second option */
.qnav--first{justify-content:flex-start}
.qbtn-send{background:var(--white);color:var(--teal);border:1px solid var(--line);font-weight:600}
.qbtn-send:hover{border-color:var(--teal);background:var(--paper)}
.qreveal{animation:qfade .32s ease both}
@keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qreveal{animation:none}}
.qsafe{display:flex;gap:10px;align-items:flex-start;background:var(--tint-teal);border:1px solid var(--tint-teal-b);border-radius:12px;padding:12px 14px;margin-bottom:20px;font-size:.84rem;color:var(--ink);line-height:1.45}
.qsafe a{color:var(--teal);font-weight:500}
.qsafe svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--teal)}
.qtime{margin-top:12px;font-size:.85rem;color:var(--muted)}
.qresult{margin-top:8px;margin-bottom:18px}
/* only ever seen on a *.netlify.app preview — see the test-copy guard at the end of the script */
.testbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#7A2E2E;color:#fff;
  font:500 .8rem/1.4 var(--sans,inherit);padding:9px 16px;text-align:center;letter-spacing:.01em;
  box-shadow:0 -2px 14px rgba(0,0,0,.25)}
.testbar b{font-weight:700}
.testbar button{background:none;border:0;color:#fff;opacity:.7;cursor:pointer;font:inherit;
  text-decoration:underline;margin-left:10px;padding:0}
body:has(.testbar){padding-bottom:40px}
.qresult__h{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin:0}
.qflag{font-size:.82rem;color:var(--white);background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;margin:0}
.qhint{margin:-6px 0 16px;font-size:.86rem;color:var(--muted)}
.qinline{background:none;border:0;padding:0;font:inherit;color:var(--teal);font-weight:600;text-decoration:underline;cursor:pointer}
.qpeople{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:700px){.qpeople--2{grid-template-columns:1fr 1fr}}
.qperson{border:1px solid var(--line);border-radius:14px;padding:16px 16px 2px;background:var(--paper)}
.qperson__h{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.qperson .choice label{padding:8px 12px;font-size:.85rem}
.qsub{font-size:.86rem;font-weight:600;margin:4px 0 10px}
.qother{border-top:1px dashed var(--line);padding-top:12px;margin-top:4px;margin-bottom:14px}
.qother__row{display:grid;grid-template-columns:1.3fr 1fr auto;gap:8px;align-items:start}
.qother__row .field{margin-bottom:10px}
.qother__x{width:38px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:1.2rem;line-height:1;color:var(--muted);cursor:pointer}
.qother__x:hover{border-color:#B4442A;color:#B4442A}
.qother__add{background:none;border:1px dashed var(--teal);border-radius:999px;padding:7px 14px;font:inherit;font-size:.85rem;font-weight:600;color:var(--teal);cursor:pointer}
.qother__add:hover{background:var(--tint-mint)}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qresume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;margin-bottom:14px;border-radius:12px;background:var(--tint-mint);border:1px solid var(--tint-mint-b);font-size:.92rem}
.qresume__btns{display:flex;gap:8px}
.qsent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.qsent .tick{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--teal)}
.qsent .tick svg{width:26px;height:26px}
.qsent .summary{width:100%;max-width:520px;text-align:left}
.qmore{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:18px 20px;border-radius:16px;background:var(--tint-mint);border:1px solid var(--tint-mint-b)}
.qmore div{display:flex;flex-direction:column;gap:4px;max-width:46ch}
.qmore span{font-size:.9rem;color:var(--muted)}
.qsent .smallprint a{color:var(--teal);font-weight:600}

/* ---------- links at the foot of a card ---------- */
.cardlink{margin-top:auto;padding-top:12px;font-weight:600;font-size:.9rem;color:var(--teal);text-decoration:none}
.cardlink:hover{text-decoration:underline}
.cardlink--dark{color:var(--mint)}

/* ---------- feature photo ---------- */
.feature__photo{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--teal);
  box-shadow:var(--shadow);
}
.feature__photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.feature__photo figcaption{
  padding:14px 18px;font-size:.84rem;color:var(--muted-dark);background:var(--teal);
}
/* ---------- guide banner photo ---------- */
.guideband{background:var(--paper);padding-top:clamp(56px,8vw,104px)}
.guideband figure{
  margin:0 auto;max-width:880px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--teal);
}
.guideband img{
  display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;
}
@media (max-width:700px){
  .guideband figure{border-radius:var(--radius)}
}

.factline{
  list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;
}
.factline li{display:flex;flex-direction:column;gap:2px}
.factline b{
  font-size:1.3rem;font-weight:600;letter-spacing:-.03em;color:var(--teal);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.factline span{font-size:.82rem;color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:940px){.contact{grid-template-columns:.85fr 1.15fr}}
.contact__ways{display:flex;flex-direction:column;gap:14px}
.w3w{font-family:var(--mono);font-size:.95rem}
.w3w i{font-style:normal;color:#E11F26;margin-right:1px}
.contact__photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--teal)}
.contact__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.bigcall{
  display:flex;flex-direction:column;gap:6px;
  background:var(--teal);color:var(--white);border-radius:var(--radius-lg);
  padding:28px 26px;
}
.bigcall a.bigcall__num{color:inherit;text-decoration:none}
.bigcall a.bigcall__num:hover{color:var(--mint)}
.bigcall__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.bigcall__num{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.bigcall__when{font-size:.88rem;color:var(--muted-dark)}
.waycard{
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:border-color .16s ease;
}
a.waycard:hover{border-color:var(--teal)}
a.waycard:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.waycard__ico{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;
  background:var(--paper);color:var(--teal);
}
.waycard__ico svg{width:18px;height:18px}
.waycard b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.012em;margin-bottom:3px;word-break:break-word}
.waycard span span{font-size:.86rem;color:var(--muted);display:block}
.wayact{
  font:inherit;font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--teal);text-decoration:none;line-height:1.4;
}
.wayact:hover{border-color:var(--teal)}
.waycard__go{margin-left:auto;align-self:center;flex:0 0 auto;white-space:nowrap}
.contact__ways .waycard b{word-break:normal;overflow-wrap:normal}
@media (max-width:520px){
  .waycard{flex-wrap:wrap;row-gap:10px}
  .contact__ways .waycard > span:nth-child(2){flex:1 1 0;min-width:0}
  .waycard__go{order:3}
  .waycard::after{content:"";flex-basis:100%;order:2;height:0}
  .waycard__go{margin-left:50px;align-self:flex-start}
}
.waycard > span:nth-child(2){min-width:0;flex:1 1 auto}
.bigcall__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wayact--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--white)}
.wayact--dark:hover{border-color:var(--mint);color:var(--mint)}
.waycard--go{background:var(--teal);border-color:transparent;color:var(--white)}
.waycard--go .waycard__ico{background:rgba(76,245,203,.16);color:var(--mint)}
.waycard--go span span{color:var(--muted-dark)}
a.waycard--go:hover{border-color:var(--mint);background:#0F4444}

.contact__form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.5vw,36px);
}
.contact__form h3{font-size:1.5rem;margin-bottom:8px}

/* ---------- coverage ---------- */
.coverage{
  background:var(--teal);border-radius:var(--radius-lg);color:var(--white);
  display:grid;gap:clamp(24px,4vw,48px);padding:clamp(28px,4.5vw,52px);align-items:center;
}
@media (min-width:900px){.coverage{grid-template-columns:1.15fr .85fr}}
.coverage__lead{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.coverage__lead h3{font-size:clamp(1.5rem,2.8vw,2rem)}
.townlist{
  list-style:none;margin:6px 0 4px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 0;
}
.townlist li{font-size:.86rem;color:var(--muted-dark);padding-right:12px;margin-right:12px;border-right:1px solid var(--teal-line)}
.townlist li:last-child{border-right:0}
.coverage__map{display:flex;justify-content:center}
.ukmap{width:100%;max-width:330px;height:auto;display:block;overflow:visible}
.ukmap__uk{fill:#0E4343;stroke:#1F5C5C;stroke-width:1;stroke-linejoin:round}
.ukmap__ie{fill:#0A3131;stroke:#164848;stroke-width:1;stroke-linejoin:round}
.pin__dot{fill:var(--mint)}
.pin__ring{fill:none;stroke:var(--mint);stroke-width:2}
.pin--home .pin__ring{animation:homePulse 2.8s ease-out infinite}
.pin__ping{
  fill:none;stroke:var(--mint);stroke-width:1.6;transform-origin:center;transform-box:fill-box;
  animation:ping 4.6s ease-out infinite;animation-delay:var(--d);
}
@keyframes ping{
  0%      {transform:scale(1);opacity:.85}
  55%,100%{transform:scale(3.4);opacity:0}
}
@keyframes homePulse{
  0%      {r:9;opacity:.9}
  70%,100%{r:24;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pin__ping,.pin--home .pin__ring{animation:none;opacity:.5}
}

/* ---------- reviews ---------- */
.reviews{display:grid;gap:18px}
@media (min-width:720px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column;gap:13px;
}
.review__stars{display:inline-flex;gap:3px;color:#FBBC04}
.review__stars svg{width:14px;height:14px}
.review h4{font-size:1.02rem;letter-spacing:-.012em}
.review p{font-size:.95rem;color:#2C3C3C;line-height:1.6;white-space:pre-line}
.review--clamp p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.review__by{
  display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
}
.review__av{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;
  background:var(--teal);color:var(--mint);font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.review__by b{font-size:.92rem;font-weight:600;display:block}
.review__by a{
  font-size:.76rem;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.review__by a:hover{color:var(--teal);text-decoration:underline}
.review__by svg{width:11px;height:11px}
.reviewnote{
  border:1px dashed var(--line);border-radius:var(--radius-lg);padding:28px;background:var(--white);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.reviewnote .eyebrow{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--line);padding-block:6px}
.faq summary{
  cursor:pointer;list-style:none;padding-block:16px;font-size:1.05rem;font-weight:500;
  letter-spacing:-.015em;display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:6px}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--teal);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .faq__a{padding-bottom:18px;color:var(--muted);font-size:.97rem;max-width:68ch}

/* ---------- CTA band ---------- */
.ctaband{
  background:var(--teal);color:var(--white);border-radius:var(--radius-xl);
  padding:clamp(36px,6vw,64px);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:22px;position:relative;overflow:hidden;
}
.ctaband h2{max-width:14ch}
.ctaband .lede{color:var(--muted-dark)}

/* ---------- team card deck ---------- */
.feature__art--flush{padding:24px}
.deck{display:flex;flex-direction:column;gap:18px;align-items:center}
.deck__stack{
  position:relative;width:min(100%,250px);aspect-ratio:1;
  touch-action:pan-y;cursor:grab;
}
.deck__stack:active{cursor:grabbing}
.deck__stack:focus-visible{outline:3px solid var(--mint);outline-offset:6px;border-radius:var(--radius-lg)}
.deck__card{
  position:absolute;inset:0;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--teal-2);box-shadow:0 14px 30px -14px rgba(4,23,23,.7);
  transition:transform .42s cubic-bezier(.22,.9,.3,1),opacity .3s ease;
  will-change:transform;user-select:none;
}
.deck__card.is-dragging{transition:none}
.deck__card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.deck__foot{display:flex;align-items:center;gap:14px;width:min(100%,250px);justify-content:space-between}
.deck__who b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.012em}
.deck__who span{font-size:.84rem;color:var(--muted-dark)}
.deck__next{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--white);
  display:grid;place-items:center;transition:transform .16s ease,border-color .16s ease;
}
.deck__next svg{width:12px;height:12px}
.deck__next:hover{border-color:var(--mint);color:var(--mint);transform:translateX(2px)}
.deck__next:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.deck__card{transition:none}}

/* ---------- intro: video + copy ---------- */
.intro{display:grid;gap:clamp(24px,4vw,44px);align-items:center}
@media (min-width:920px){.intro{grid-template-columns:1fr 1fr}}
.intro__video{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--teal);
  aspect-ratio:16/9;max-width:100%;box-shadow:var(--shadow);
}
.intro__video video{width:100%;height:100%;object-fit:cover;display:block}
.intro__text{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.intro__text h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.intro__text .row{align-items:center;gap:16px;margin-top:4px}

/* ---------- video band ---------- */
.videoband{position:relative;overflow:hidden;isolation:isolate}
.videoband__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  /* the poster shows first, so there is never an empty black box */
}
.videoband__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,23,23,.88) 0%,rgba(11,54,54,.8) 55%,rgba(4,23,23,.9) 100%);
}
@media (prefers-reduced-motion:reduce){
  .videoband__v{display:none}
  .videoband{background:var(--teal)}
}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--white);padding-block:56px 36px}
.footer__grid{display:grid;gap:36px}
@media (min-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr .8fr}}
.footer h5{
  margin:0 0 14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);font-weight:500;
}
.footer a{color:rgba(255,255,255,.76);text-decoration:none;font-size:.92rem;display:block;padding-block:5px}
.footer a:hover{color:var(--mint)}
.footer p{color:rgba(255,255,255,.6);font-size:.9rem}
.legal{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:14px;
}
.legal p{font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.55);max-width:90ch}
.legal .warn{color:rgba(255,255,255,.8);font-weight:500;letter-spacing:.01em}
.legal__notes{
  display:flex;flex-direction:column;gap:7px;padding-bottom:20px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.legal__notes p{font-size:.76rem;color:rgba(255,255,255,.6)}
.legal__link{display:inline!important;padding:0!important;color:rgba(255,255,255,.75);text-decoration:underline}
.legal__link:hover{color:var(--mint)}

/* ---------- forms ---------- */
.formshell{max-width:760px;margin-inline:auto}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field[hidden]{display:none}
.field label{font-size:.88rem;font-weight:500;letter-spacing:-.005em}
.field .hint{font-size:.8rem;color:var(--muted)}
.field .hint a{color:var(--teal);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:13px 14px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--white);color:var(--ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(76,245,203,.35);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#A9B6B6;opacity:1}
.field select.is-empty{color:#A9B6B6}
.field select option{color:var(--ink);background:var(--white)}
.field select option[value=""]{color:#8A9999}
.field--2{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px}
.field--2 > .field{margin-bottom:0}
@media (min-width:620px){.field--2{grid-template-columns:1fr 1fr}}
.field--2 .field{margin-bottom:0}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label{
  padding:11px 20px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--white);cursor:pointer;font-size:.93rem;font-weight:500;
}
.choice input:checked+label{background:var(--teal);color:var(--white);border-color:var(--teal)}
.choice input:focus-visible+label{outline:3px solid var(--mint);outline-offset:2px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:.9rem;color:var(--muted)}
.check input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--teal)}
.check a{color:var(--teal);font-weight:500}

.notice{
  border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:28px;
  background:var(--white);border:1px solid var(--line);
}
.notice h4{margin-bottom:10px}
.notice ul{margin:0;padding-left:20px;color:var(--muted);font-size:.93rem;display:flex;flex-direction:column;gap:6px}
.notice--stop{background:rgba(255,241,232,.9);border-color:#F0D9C8}

.progress{display:flex;gap:6px;margin-bottom:30px}
.progress__seg{height:5px;flex:1;border-radius:999px;background:var(--line)}
.progress__seg.is-done{background:var(--mint)}
.progress__seg.is-now{background:var(--teal)}
.steplabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.formnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}

.success{
  text-align:center;padding:48px 28px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.success .tick{
  width:60px;height:60px;border-radius:50%;background:var(--mint);color:var(--teal);
  display:grid;place-items:center;
}
.success .tick svg{width:26px;height:26px}
.summary{
  text-align:left;background:var(--paper);border-radius:var(--radius);padding:20px;
  width:100%;max-width:460px;display:flex;flex-direction:column;gap:8px;
}
.summary div{display:flex;justify-content:space-between;gap:16px;font-size:.88rem}
.summary span{color:var(--muted)}
.summary b{font-weight:600;text-align:right}

/* ---------- calculators ---------- */
.calcgrid{display:grid;gap:24px}
@media (min-width:900px){.calcgrid{grid-template-columns:1fr 1fr}}
.calcpanel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.result{
  background:var(--teal);color:var(--white);border-radius:var(--radius-lg);padding:26px;
  display:flex;flex-direction:column;gap:16px;
}
.result__big{display:flex;flex-direction:column;gap:4px}
.result__big b{font-size:2.6rem;font-weight:600;letter-spacing:-.04em;color:var(--mint);font-variant-numeric:tabular-nums;line-height:1}
.result__big span{font-size:.88rem;color:var(--muted-dark)}
.result__rows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--teal-line)}
.result__rows div{
  display:flex;justify-content:space-between;gap:14px;padding-block:11px;font-size:.92rem;
  border-bottom:1px solid var(--teal-line);
}
.result__rows span{color:var(--muted-dark)}
.result__rows b{font-weight:600;font-variant-numeric:tabular-nums}
.calctabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;justify-content:center}
.calctab{
  padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  cursor:pointer;font-size:.9rem;font-weight:500;
}
.calctab.is-active{background:var(--teal);color:var(--white);border-color:var(--teal)}
.calctab:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.smallprint{font-size:.8rem;color:var(--muted);margin-top:14px;max-width:70ch}

/* ---------- tool kit: one look shared by every calculator ---------- */
.tool{display:grid;gap:24px;align-items:start}
@media (min-width:980px){.tool{grid-template-columns:minmax(0,1fr) minmax(0,430px)}.tool__out{position:sticky;top:96px}}
.tool__in{min-width:0}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,3vw,26px);margin-bottom:18px}
.tcard:last-child{margin-bottom:0}
.tcard__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tcard__icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(76,245,203,.2);color:var(--teal);display:grid;place-items:center}
.tcard__icon svg{width:20px;height:20px}
.tcard__head h3{font-size:1.15rem;margin:0;letter-spacing:-.01em}
.tcard__head p{margin:2px 0 0;font-size:.85rem;color:var(--muted)}
.tcard__tag{margin-left:auto;font-size:.72rem;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tgrid{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:14px}
.tgrid:last-child{margin-bottom:0}
.tgrid .field{margin-bottom:0;min-width:0}
@media (min-width:560px){.tgrid--2{grid-template-columns:1fr 1fr}.tgrid--3{grid-template-columns:repeat(3,1fr)}}
.tgrid--term{grid-template-columns:1fr 1fr}
.tgrid--term > .field:last-child{grid-column:1/-1}
@media (min-width:560px){.tgrid--term{grid-template-columns:1fr 1fr 1.6fr}.tgrid--term > .field:last-child{grid-column:auto}}
.tool .field input,.tool .field select{padding:12px 13px}
.tool .choice{gap:8px}
.tool .choice label{padding:10px 14px;font-size:.88rem}
.choice--seg{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tool .choice--seg label{border:0;border-radius:0;text-align:center;padding:12px 8px;line-height:1.2}
.tbox{background:#EEFAF5;border:1px solid #CFEFE2;border-radius:var(--radius);padding:14px 16px;margin-top:14px}
.tbox__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tbox__lbl{font-size:.82rem;font-weight:500;color:var(--muted)}
.tbox__amt{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.tbox details{margin-top:6px;font-size:.84rem;color:var(--muted)}
.tbox summary{cursor:pointer;color:var(--teal);font-weight:500}
.tbox table{width:100%;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
.tbox td{padding:5px 0;border-bottom:1px solid #D8F0E6}
.tbox td:last-child{text-align:right;color:var(--ink);font-weight:500}
.tbox p{margin:6px 0 0;font-size:.84rem;color:var(--muted)}
.tpart{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;transition:border-color .15s}
.tpart:focus-within{border-color:var(--teal)}
.tpart__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.tpart__name{font-weight:600;font-size:.9rem}
.tpart__mo{margin-left:auto;font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--teal)}
.tpart__mo small{font-weight:400;color:var(--muted)}
.tpart__x{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;font-size:1.05rem;line-height:1;color:var(--muted)}
.tpart__x:hover{border-color:var(--teal);color:var(--teal)}
.tpart__body{padding:16px 14px}
.tadd{width:100%;padding:12px;border:1.5px dashed #C9D8CE;border-radius:var(--radius);background:transparent;color:var(--teal);font:inherit;font-weight:500;font-size:.9rem;cursor:pointer}
.tadd:hover{border-color:var(--teal);background:var(--paper)}
.tadd[hidden]{display:none}
.thelp{font-size:.8rem;color:var(--muted);margin:10px 0 0}

/* results panel (dark) */
.tout{background:var(--teal);color:var(--white);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px)}
.tout__eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.tout__big{font-size:clamp(2.4rem,5vw,3rem);font-weight:600;letter-spacing:-.04em;color:var(--mint);font-variant-numeric:tabular-nums;line-height:1.05;margin:6px 0 2px}
.tout__sub{font-size:.86rem;color:var(--muted-dark)}
.tout__parts{margin-top:10px;font-size:.85rem;color:var(--muted-dark);display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.tout__sec{margin-top:22px}
.tout__h{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);margin:0 0 10px}
.ttiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ttile{background:var(--teal-2);border:1px solid var(--teal-line);border-radius:14px;padding:12px 14px;min-width:0}
.ttile b{display:block;font-size:1.12rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ttile span{display:block;font-size:.76rem;color:var(--muted-dark);margin-top:2px;line-height:1.35}
.ttile--wide{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ttile--wide b{font-size:1.35rem;color:var(--mint)}
.ttile--hi{background:rgba(76,245,203,.12);border-color:rgba(76,245,203,.35)}
.tltv{margin-top:12px}
.tltv__top{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;color:var(--muted-dark)}
.tltv__top b{font-size:1.2rem;color:var(--white);font-variant-numeric:tabular-nums}
.tltv__bar{position:relative;height:8px;border-radius:99px;background:var(--teal-line);margin:10px 0 20px}
.tltv__fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--mint);transition:width .35s ease}
.tltv__tick{position:absolute;top:-3px;width:2px;height:14px;background:rgba(255,255,255,.35);transform:translateX(-1px)}
.tltv__tick span{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--muted-dark);white-space:nowrap}
.tout__note{font-size:.78rem;color:var(--muted-dark);margin:16px 0 0;line-height:1.5}
.tout__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}


.tout .result__rows{margin-top:18px}
.tout__sd{border-bottom:1px solid var(--teal-line);padding:12px 0}
.tout__sdrow{display:flex;justify-content:space-between;gap:14px;font-size:.92rem}
.tout__sdrow span{color:var(--muted-dark)}
.tout__sdrow b{font-weight:600;font-variant-numeric:tabular-nums}
.tout__sd p{font-size:.78rem;color:var(--muted-dark);margin:4px 0 0}
.tout__sd details{margin-top:6px;font-size:.8rem;color:var(--muted-dark)}
.tout__sd summary{cursor:pointer;color:var(--mint)}
.tout__sd table{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.tout__sd td{padding:3px 0}
.tout__sd td:last-child{text-align:right;color:var(--white)}
.tout__total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(76,245,203,.12);border:1px solid rgba(76,245,203,.35)}
.tout__total span{font-size:.9rem}
.tout__total small{display:block;font-size:.74rem;color:var(--muted-dark);margin-top:2px}
.tout__total b{font-size:1.35rem;color:var(--mint);font-variant-numeric:tabular-nums;white-space:nowrap}
.tltv{margin-top:14px}
.tout__was{display:block;font-size:.76rem;font-weight:400;color:var(--muted-dark);text-align:right}
.tout .result__rows b{text-align:right}
/* shorter-term comparison */
.tterm{display:grid;gap:26px}
@media (min-width:900px){.tterm{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.tterm__lead{font-size:1.02rem;margin:0 0 16px;line-height:1.5}
.tterm__lead b{color:var(--teal)}
.tbars{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
.tbar__lbl{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--muted);margin-bottom:5px}
.tbar__lbl b{color:var(--ink);font-variant-numeric:tabular-nums}
.tbar__track{height:12px;border-radius:99px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.tbar__fill{height:100%;border-radius:99px;transition:width .35s ease}
.tsave{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tsave div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px}
.tsave b{display:block;font-size:1.1rem;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
.tsave span{display:block;font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.35}
.tsave div.is-big{background:var(--teal);border-color:var(--teal)}
.tsave div.is-big b{color:var(--mint)}
.tsave div.is-big span{color:var(--muted-dark)}
@media (max-width:480px){.tsave{grid-template-columns:1fr 1fr}.tsave div.is-big{grid-column:1/-1}}
.tchart{position:relative}
.tchart svg{display:block;width:100%;height:auto;overflow:visible}
.tchart__legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;color:var(--muted);margin-bottom:8px}
.tchart__legend i{display:inline-block;width:18px;height:0;border-top:2.5px solid;vertical-align:middle;margin-right:6px}
.tchart__tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--white);border-radius:10px;padding:8px 11px;font-size:.78rem;line-height:1.5;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s;font-variant-numeric:tabular-nums}
.tchart__tip.is-on{opacity:1}
.tchart__tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.tchart__cap{font-size:.78rem;color:var(--muted);margin:8px 0 0}

/* ---------- blog ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filter{
  padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  cursor:pointer;font-size:.86rem;font-weight:500;
}
.filter.is-active{background:var(--teal);color:var(--white);border-color:var(--teal)}
.filter:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.postmeta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.searchrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.searchrow input{
  flex:1 1 280px;font:inherit;font-size:1rem;padding:13px 16px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--white);color:var(--ink);
}
.searchrow input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(76,245,203,.35)}
.resultcount{font-size:.9rem;color:var(--muted);margin-bottom:24px}
.filter .n{opacity:.75;font-variant-numeric:tabular-nums;margin-left:5px}
.loadmore{display:flex;justify-content:center;margin-top:36px}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}

/* ---------- article ---------- */
.article{max-width:720px;margin-inline:auto}
.article__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.article__body{font-size:1.06rem;line-height:1.72}
.article__body > *+*{margin-top:1.15em}
.article__body h2{font-size:1.65rem;letter-spacing:-.022em;margin-top:1.9em;line-height:1.2}
.article__body h3{font-size:1.32rem;letter-spacing:-.018em;margin-top:1.6em;line-height:1.25}
.article__body h4{font-size:1.08rem;margin-top:1.4em}
.article__body p{color:#243434}
.article__body ul,.article__body ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.article__body li{color:#243434}
.article__body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.article__body a:hover{color:#0A5A4A}
.article__body strong{font-weight:600}
.article__body blockquote{
  margin:0;padding:16px 22px;border-left:3px solid var(--mint);
  background:var(--white);border-radius:0 var(--radius) var(--radius) 0;color:var(--muted);
}
.article__lede{font-size:1.2rem;line-height:1.5;color:var(--muted);margin-bottom:8px}
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);text-decoration:none;margin-bottom:20px}
.backlink:hover{color:var(--teal)}
.endcap{
  margin-top:48px;padding-top:32px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:20px;
}
.skeleton{
  background:linear-gradient(90deg,var(--line),#EEF3EE,var(--line));
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;
  border-radius:8px;height:14px;
}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* ---------- page head ---------- */
/* ---------- header particles ---------- */
.part-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.part-layer canvas{display:block;width:100%;height:100%}
/* The boxes below are invisible anchors: they only say where the shape sits and how big it is.
   The canvas itself spans the whole coloured band, so particles drift and fade into the band
   rather than being cut off at the edge of a small box. */
.hero__art{position:absolute;left:auto;right:-10%;top:50%;transform:translateY(-50%);width:min(72%,400px);aspect-ratio:3/2;pointer-events:none}   /* smaller screens: offset to the right, behind */
.hero .part-layer{opacity:.34}
@media (min-width:1000px){
  /* homepage, larger screens: wording stays centred; a smaller logo sits to the right, just overlapping the heading */
  .hero__art{left:calc(50% + 180px);right:auto;top:44%;transform:translateY(-50%);width:min(540px,calc(50% - 200px))}
  .hero .part-layer{opacity:.9}
  .hero:has(.hero__art) .hero__dots--r{display:none}
}
.hero__inner{z-index:1}
.pagehead .wrap{position:relative}
.pagehead__art{pointer-events:none}
@media (min-width:1000px){
  .pagehead__art{position:absolute;left:600px;top:-36px;bottom:-36px;width:min(480px,calc(100% - 560px))}   /* tucked in so it just overlaps the end of the wording */
}
@media (max-width:999px){
  /* smaller screens: behind the wording, faded back so the text stays easy to read */
  .pagehead__art{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(78%,420px);aspect-ratio:1/1}
  .pagehead .part-layer{opacity:.38}
}
.pagehead__inner{position:relative;z-index:1}
.pagehead{position:relative;overflow:hidden;background:var(--teal);color:var(--white);padding-block:clamp(48px,7vw,84px)}
.pagehead .lede{color:var(--muted-dark)}
.pagehead__inner{display:flex;flex-direction:column;gap:16px;max-width:760px}

/* ---------- misc ---------- */
.contactgrid{display:grid;gap:20px}
@media (min-width:760px){.contactgrid{grid-template-columns:repeat(3,1fr)}}
.contactcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:8px}
.contactcard b{font-size:1.05rem;font-weight:600}
.contactcard a{color:var(--teal);font-weight:500;text-decoration:none}
.contactcard a:hover{text-decoration:underline}
.contactcard p{font-size:.94rem;color:var(--muted)}

.floatcall{
  position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;
  background:var(--mint-soft);color:var(--teal);display:grid;place-items:center;
  box-shadow:0 12px 28px -10px rgba(4,23,23,.5);text-decoration:none;
}
.floatcall:hover{background:var(--mint)}
.floatcall svg{width:23px;height:23px}
.floatcall:focus-visible{outline:3px solid var(--teal);outline-offset:3px}


/* ---------- cookie consent ---------- */
.cc{
  position:fixed;left:16px;bottom:16px;z-index:80;width:min(340px,calc(100vw - 32px));
  background:var(--teal);color:var(--white);border-radius:var(--radius);
  box-shadow:0 18px 40px -18px rgba(4,23,23,.6);padding:15px 16px;
  font-size:.8rem;line-height:1.5;
}
.cc[hidden]{display:none!important}
.cc p{color:rgba(255,255,255,.82);margin-bottom:12px}
.cc a{color:var(--mint)}
.cc__row{display:flex;gap:8px;align-items:center}
.cc__btn{
  flex:1 1 0;padding:8px 10px;border-radius:8px;border:1px solid transparent;
  font-size:.78rem;font-weight:600;cursor:pointer;text-align:center;
  font-family:inherit;letter-spacing:-.005em;
}
.cc__btn--yes{background:var(--mint);color:var(--teal)}
.cc__btn--no{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.cc__btn--yes:hover{background:#6BF8D6}
.cc__btn--no:hover{border-color:var(--mint)}
.cc__btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cc__more{
  background:none;border:0;padding:0;margin-top:10px;cursor:pointer;font-family:inherit;
  font-size:.74rem;color:rgba(255,255,255,.6);text-decoration:underline;
}
.cc__more:hover{color:var(--mint)}
.cc__opts{display:none;flex-direction:column;gap:9px;margin:12px 0 4px}
.cc__opts.is-open{display:flex}
.cc__opt{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;color:rgba(255,255,255,.82)}
.cc__opt input{width:15px;height:15px;flex:0 0 15px;margin-top:2px;accent-color:var(--mint)}
.cc__opt b{display:block;color:var(--white);font-weight:600;font-size:.78rem}
.cc__opt input:disabled{opacity:.5}

.skip{position:absolute;left:-9999px;top:0;background:var(--mint);color:var(--teal);padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}