/* =================================================================
   House of Maji — design system
   Brand palette, type and components taken from the brochure brief.
   ================================================================= */

/* ---- Tokens ----------------------------------------------------- */
:root{
  /* brand */
  --navy:#001A5C;  --navy-2:#0A2A7A;  --navy-3:#0d3196;
  --blue:#0A5BD6;  --blue-600:#0848ad; --blue-300:#5BA4FF;
  --teal:#0C8AA6;  --teal-300:#36C5E0;
  --green:#2E9D57; --green-300:#6FD89A;
  --red:#C20012;   --gold:#F2B70C;     --wa:#25D366; --wa-600:#1da851;
  --mist:#EAF1FB;  --ink:#13202B;
  /* neutrals */
  --white:#fff; --line:#dbe5f4; --line-2:#eef3fb;
  --muted:#5a6b7e; --muted-light:#aebfd6;
  /* layout */
  --maxw:1180px; --gutter:clamp(1rem,4vw,2rem);
  /* Corners: squared. The brand uses 90° edges everywhere — see global rule below. */
  --r:0; --r-lg:0; --r-sm:0; --pill:0;
  /* Exception: buttons get a soft radius for tap affordance on mobile-first CTAs. */
  --btn-r:22px;
  --sh-sm:0 2px 10px rgba(0,26,92,.06);
  --sh:0 14px 34px rgba(0,26,92,.10);
  --sh-lg:0 30px 70px rgba(0,26,92,.18);
  --sec:clamp(3.25rem,6.5vw,5.75rem);
  --font-d:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---- Reset / base ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Design system rule: every element has 90° (square) corners by default.
   Genuine circles set border-radius:50% explicitly, which has higher
   specificity than this universal selector, so they stay round. */
*,*::before,*::after{border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px}
body{
  font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-600)}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.08;color:var(--navy);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem)}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--blue-300);outline-offset:2px;border-radius:0}
.icon{width:1.25em;height:1.25em;flex:0 0 auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1rem;z-index:1100;border-radius:0}
.skip:focus{left:0}

/* ---- Layout helpers -------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
.center{text-align:center}
.section{padding-block:var(--sec)}
.section--mist{background:var(--mist)}
.section--navy{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
/* Photo-backed dark section: a cover photo sits UNDER a brand-blue veil, same
   treatment as the home hero. Pair with .section--navy for white text; glass
   cards placed inside will frost the photo behind them. --sec-img set inline. */
.section--photo{position:relative;
  background:linear-gradient(160deg,rgba(0,26,92,.9) 0%,rgba(10,42,122,.84) 60%,rgba(13,49,150,.82) 100%),
    var(--sec-img,none) center/cover no-repeat;
  background-color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn-row--center{justify-content:center}

/* ---- Glass surfaces -------------------------------------------- */
/* Frosted translucency for sticky / elevated surfaces. Square corners keep
   the brand's 90 degree system. backdrop-filter is GPU-heavy, so the blur is
   gated behind @supports: unsupported browsers get a near-solid fallback.
   Use on small surfaces (nav, cards) — never on large scrolling regions.
   .glass = light tint (over white); .glass--dark = light tint over dark bg. */
.glass{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.6);box-shadow:var(--sh-sm)}
.glass--dark{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;box-shadow:none}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .glass--dark{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%)}
}

.eyebrow{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;color:var(--teal)}
.sec-head{max-width:720px;margin-bottom:2.5rem}
.center .sec-head{margin-inline:auto}
.sec-head h2{margin-top:.35rem}
.sec-head__sub{margin-top:.9rem;color:var(--muted);font-size:1.075rem}
.sec-head--light .eyebrow{color:var(--teal-300)}
.sec-head--light .sec-head__sub{color:var(--muted-light)}

/* ---- Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-d);font-weight:700;font-size:1rem;line-height:1;
  padding:.95rem 1.4rem;border-radius:var(--btn-r);border:2px solid transparent;
  min-height:48px;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.btn .icon{width:1.2em;height:1.2em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(10,91,214,.28)}
.btn--primary:hover{background:var(--blue-600);color:#fff}
.btn--whatsapp{background:var(--wa);color:#063}
.btn--whatsapp:hover{background:var(--wa-600);color:#042}
.btn--call{background:var(--navy);color:#fff}
.btn--call:hover{background:var(--navy-2);color:#fff}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2);color:#fff}
.btn--white{background:#fff;color:var(--navy)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--navy)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--mist)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn--link{background:none;color:var(--blue);padding:.4rem 0;min-height:0;border:0;border-radius:0}
.btn--link:hover{color:var(--blue-600);transform:none;text-decoration:underline}
.btn--link .icon{width:1.1em;height:1.1em}
.btn--block{width:100%}
.btn--sm{padding:.6rem 1rem;font-size:.9rem;min-height:40px}
/* contextual: call button on navy bands */
.cta-band .btn--call,.section--navy .btn--call{background:#fff;color:var(--navy)}
.cta-band .btn--call:hover{background:var(--mist)}

/* ================================================================
   HEADER
   ================================================================ */
.site-header{position:sticky;top:0;z-index:900;background:transparent;border-bottom:1px solid var(--line)}
.site-header.is-scrolled{box-shadow:var(--sh-sm)}
/* Frosted main bar: page content blurs through it as it scrolls under.
   Tint firms up slightly once scrolled to keep nav text legible over
   dark sections (e.g. the navy "Why" band). */
.bar{background:rgba(255,255,255,.82)}
.site-header.is-scrolled .bar{background:rgba(255,255,255,.9)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .bar{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .site-header.is-scrolled .bar{background:rgba(255,255,255,.74)}
}
.util{background:var(--navy);color:#fff;font-size:.82rem}
.util__inner{display:flex;align-items:center;gap:1.25rem;min-height:38px;padding-block:.3rem}
.util__item{display:inline-flex;align-items:center;gap:.4rem;color:#cfe0ff}
.util__item:hover{color:#fff}
.util__item .icon{width:1em;height:1em;color:var(--teal-300)}
.util__item--wa .icon{color:var(--wa)}
.util__spacer{flex:1}
.util__hours,.util__shop{color:#aac3ee}
.lang{display:inline-flex;gap:2px;background:rgba(255,255,255,.12);border-radius:var(--pill);padding:3px}
.lang__btn{border:0;background:none;color:#cfe0ff;font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:var(--pill)}
.lang__btn.is-active{background:#fff;color:var(--navy)}

.bar__inner{display:flex;align-items:center;gap:1.25rem;min-height:74px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:58px;width:auto}
.nav{flex:1}
.nav__list{display:flex;align-items:center;gap:.35rem;list-style:none;padding:0}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-d);font-weight:700;white-space:nowrap;
  color:var(--navy);padding:.6rem .6rem;border-radius:0;font-size:.98rem}
.nav__link:hover{background:var(--mist);color:var(--blue)}
.nav__chev{width:1em;height:1em;transition:transform .2s}
.nav__item.is-current>.nav__link{color:var(--blue)}
.nav__item.is-current>.nav__link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:3px;background:var(--teal);border-radius:0}

/* mega menu */
.mega{position:absolute;top:calc(100% + 10px);left:0;min-width:540px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:.75rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:50}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__inner{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}
.mega__item{display:flex;gap:.75rem;padding:.7rem .8rem;border-radius:0}
.mega__item:hover{background:var(--mist)}
.mega__icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:0;
  background:var(--mist);color:var(--blue)}
.has-mega:hover .nav__chev{transform:rotate(180deg)}
.mega__text{display:flex;flex-direction:column}
.mega__title{font-family:var(--font-d);font-weight:700;color:var(--navy);font-size:.95rem}
.mega__desc{color:var(--muted);font-size:.82rem;line-height:1.4}

.bar__cta{display:flex;gap:.6rem;flex:0 0 auto}
.burger{display:none;width:48px;height:48px;border:0;background:none;color:var(--navy);place-items:center}
.burger .icon{width:1.5em;height:1.5em}
.burger__close{display:none}

/* mobile drawer */
.mobile-nav{display:none}

/* ================================================================
   HERO
   ================================================================ */
.hero{position:relative;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:#fff;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(4rem,7vw,6rem);overflow:hidden}
.hero::after{content:"";position:absolute;top:-20%;right:-10%;width:50%;height:140%;
  background:radial-gradient(circle,rgba(54,197,224,.22),transparent 65%);pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;z-index:2}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);padding:.4rem .85rem;border-radius:var(--pill);
  font-size:.82rem;font-weight:600;color:#dcebff;margin-bottom:1.1rem}
.hero__eyebrow .icon{width:1.1em;height:1.1em;color:var(--teal-300)}
.hero__title{color:#fff;text-transform:uppercase;letter-spacing:-.015em;font-weight:900;
  font-size:clamp(2.5rem,1.3rem + 5vw,4.25rem);line-height:1}
.hero__title .hl{color:var(--teal-300)}
.hero__sub{margin-top:1.2rem;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:#c8d8f2;max-width:34ch}
.hero__trust{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin-top:1.6rem}
.hero__trust li{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;color:#e6eeff}
.hero__trust .icon{color:var(--green-300);width:1.15em;height:1.15em}
.hero__media{position:relative}
.hero__media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-lg);aspect-ratio:4/3;object-fit:cover}
.hero__badge{position:absolute;left:-12px;bottom:18px;display:flex;align-items:center;gap:.6rem;
  background:#fff;color:var(--navy);padding:.7rem 1rem;border-radius:0;box-shadow:var(--sh);max-width:240px}
.hero__badge .icon{width:2rem;height:2rem;color:var(--teal);flex:0 0 auto}
.hero__badge span{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);line-height:1.3}
.hero__badge b{font-family:var(--font-d);color:var(--navy);font-size:.95rem}
.hero__finehint{margin-top:1.4rem;display:inline-flex;gap:.5rem;align-items:flex-start;font-size:.9rem;color:#bcd0f0}
.hero__finehint .icon{color:var(--gold);width:1.15em;height:1.15em;margin-top:.1rem}
.hero--solo .hero__inner{grid-template-columns:1fr;max-width:840px}
.hero--solo .hero__sub{max-width:54ch}
/* Home hero only: a delivery photo sits UNDER the brand-blue gradient.
   The gradient keeps a high alpha (strongest top-left, behind the headline)
   so white text stays legible while the photo shows through, mostly lower-right. */
.hero--home{
  background:
    linear-gradient(150deg,rgba(0,26,92,.93) 0%,rgba(10,42,122,.82) 52%,rgba(13,49,150,.80) 100%),
    url("../img/photos/home-delivery.jpg") center/cover no-repeat;
}

/* wave divider */
.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:2}
.wave svg{width:100%;height:clamp(34px,5vw,64px)}
.wave--flip{transform:rotate(180deg);top:-1px;bottom:auto}

/* schools hero variant */
.hero--schools .hero__media--seal{display:grid;place-items:center}
.alert-strip{background:var(--red);color:#fff}
.alert-strip__inner{display:flex;align-items:center;gap:.65rem;justify-content:center;
  padding:.7rem 1rem;font-weight:700;text-align:center}
.alert-strip .icon{width:1.3em;height:1.3em;flex:0 0 auto}
.alert-strip p{font-family:var(--font-d)}

/* Water-Assured seal */
.wa-seal{position:relative;display:grid;place-content:center;justify-items:center;text-align:center;
  width:clamp(190px,42vw,260px);aspect-ratio:1;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 50% 35%,var(--teal-300),var(--teal) 60%,#075c70);
  box-shadow:var(--sh-lg);border:6px solid rgba(255,255,255,.25);outline:2px dashed rgba(255,255,255,.6);outline-offset:-16px}
.wa-seal__ring{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.18);margin-bottom:.4rem}
.wa-seal__ring .icon{width:34px;height:34px;color:#fff}
.wa-seal b{font-family:var(--font-d);font-weight:900;font-size:1.4rem;line-height:1.05}
.wa-seal>span{font-family:var(--font-d);font-weight:800;letter-spacing:.32em;font-size:.95rem;padding-left:.32em}
.wa-seal em{font-style:normal;font-size:.68rem;opacity:.85;margin-top:.45rem;letter-spacing:.04em}
.wa-seal--sm{width:128px;border-width:4px;outline-offset:-10px}
.wa-seal--sm .wa-seal__ring{width:38px;height:38px;margin-bottom:.2rem}
.wa-seal--sm .wa-seal__ring .icon{width:20px;height:20px}
.wa-seal--sm b{font-size:.85rem}
.wa-seal--sm>span{font-size:.6rem;letter-spacing:.2em}

/* ================================================================
   TRUST BAR
   ================================================================ */
.trustbar{background:#fff;border-bottom:1px solid var(--line);padding-bottom:1.8rem}
.trustbar__inner{padding-block:1.8rem 0}
.trustbar__stats{display:flex;flex-wrap:wrap;gap:1.2rem 2rem}
.stat{display:flex;flex-direction:column;line-height:1}
.stat__num{font-family:var(--font-d);font-weight:900;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--navy)}
.stat__label{font-size:.82rem;color:var(--muted);margin-top:.25rem;text-transform:uppercase;letter-spacing:.06em}
.trustbar__label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:1.1rem 0 .7rem;font-weight:700}
/* Logo marquee: two identical copies scroll left->right in a seamless loop.
   Per-item padding (not flex gap) keeps the copies pixel-identical, so moving
   the track by exactly -50% -> 0 has no visible seam. Logos keep their original
   colours. Hover pauses; reduced-motion stops it and falls back to a static row. */
.partners-marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.partners{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;
  width:max-content;animation:partners-scroll 45s linear infinite}
.partners-marquee:hover .partners{animation-play-state:paused}
.partner{display:flex;align-items:center;flex:0 0 auto;padding-inline:1.3rem}
.partner__logo{height:42px;width:auto;max-width:160px;object-fit:contain}
.partner__link{display:inline-flex;align-items:center;cursor:pointer}
.partner__name{font-family:var(--font-d);font-weight:700;color:var(--navy);font-size:.9rem;white-space:nowrap;
  background:var(--mist);border:1px solid var(--line);padding:.5rem .85rem}
.partners__note{margin:1.1rem 0 0;text-align:center;color:var(--muted);font-size:.92rem}
@keyframes partners-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .partners{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .partners-marquee{-webkit-mask-image:none;mask-image:none}
  .partner[aria-hidden=true]{display:none}
}

/* ================================================================
   AUDIENCE / SOLUTION CARDS
   ================================================================ */
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.acards--6{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.acard{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh-sm);transition:.18s;color:var(--ink)}
.acard:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-3px)}
.acard__icon{display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;border-radius:0;
  background:linear-gradient(150deg,var(--mist),#dbe8fd);color:var(--blue)}
.acard__icon .icon{width:1.6em;height:1.6em}
.acard__body{display:flex;flex-direction:column;flex:1;gap:.15rem}
.acard__title{font-family:var(--font-d);font-weight:700;color:var(--navy);font-size:1.075rem}
.acard__blurb{font-size:.9rem;color:var(--muted);line-height:1.4}
.acard__price{font-family:var(--font-d);font-weight:700;color:var(--blue);font-size:.85rem;margin-top:.2rem}
.acard__go{color:var(--muted-light);transition:.18s}
.acard:hover .acard__go{color:var(--blue);transform:translateX(3px)}

/* Photo variant: a cover photo on a BLURRED backdrop layer; the icon, arrow and
   text panel are frosted-glass chips over it, and a bottom-up navy veil keeps
   white text legible. The two icon chips are circular — a deliberate exception
   to the square-corner system (like the flow nodes). --acard-img set per card. */
.acard--photo{position:relative;overflow:hidden;flex-direction:column;justify-content:flex-end;
  align-items:stretch;gap:0;padding:0;min-height:248px;color:#fff;border-color:transparent;
  background:var(--navy)}
/* blurred photo layer — scaled up so the blur's soft edge is clipped, not shown */
.acard--photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--acard-img) center/cover no-repeat;
  filter:blur(5px);transform:scale(1.08);transition:filter .35s ease,transform .35s ease}
/* navy veil above the photo for legibility */
.acard--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,26,92,.12) 0%,rgba(0,26,92,.3) 38%,rgba(0,26,92,.86) 100%)}
.acard--photo:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent}
.acard--photo:hover::before{filter:blur(2px);transform:scale(1.05)}
.acard--photo .acard__icon{position:absolute;top:.8rem;left:.8rem;z-index:2;width:46px;height:46px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.acard--photo .acard__go{position:absolute;top:.8rem;right:.8rem;z-index:2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.acard--photo .acard__body{position:relative;z-index:2;flex:0 1 auto;margin:.8rem;padding:.75rem .85rem;
  gap:.2rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.acard--photo .acard__title{color:#fff}
.acard--photo .acard__blurb{color:rgba(233,240,255,.92)}
.acard--photo .acard__price{color:var(--teal-300)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .acard--photo .acard__icon,.acard--photo .acard__go,.acard--photo .acard__body{
    -webkit-backdrop-filter:blur(10px) saturate(135%);backdrop-filter:blur(10px) saturate(135%)}
}
.acard--photo:hover .acard__go{color:#fff;transform:none;background:rgba(255,255,255,.28)}

/* ================================================================
   SOLUTION PICKER (mobile) — numbered tabs + detail card
   ================================================================ */
.picker{display:none}
.picker__tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.6rem;margin-bottom:1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.picker__tabs::-webkit-scrollbar{display:none}
.picker__tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:62px;
  padding:.55rem .65rem;background:#fff;border:1.5px solid var(--line);color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.picker__tab b{font-family:var(--font-d);font-weight:900;font-size:1.05rem;line-height:1}
.picker__tab span{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.picker__tab.is-active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(10,91,214,.28)}
.picker__tab.is-active span{color:#fff}
.pcard2{border:1px solid var(--line);background:#fff;box-shadow:var(--sh);overflow:hidden}
.pcard2__head{background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;padding:1.15rem 1.2rem}
.pcard2__stage{display:inline-block;background:var(--blue);color:#fff;font-family:var(--font-d);font-weight:800;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;margin-bottom:1rem}
.pcard2__stage em{font-style:normal;opacity:.65}
.pcard2__id{display:flex;align-items:center;gap:.85rem}
.pcard2__avatar{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;background:var(--blue);color:#fff}
.pcard2__avatar .icon{width:1.6rem;height:1.6rem}
.pcard2__idtext{display:flex;flex-direction:column;gap:.1rem;line-height:1.15}
.pcard2__idtext b{font-family:var(--font-d);font-weight:800;font-size:1.1rem}
.pcard2__idtext span{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--blue-300)}
.pcard2__body{padding:1.3rem 1.2rem 1.4rem}
.pcard2__lead{font-size:1.45rem;margin:.35rem 0 .55rem}
.pcard2__desc{color:var(--muted);margin:0}
.pcard2__points{list-style:none;padding:1.1rem 0 0;margin:1.1rem 0 1.4rem;display:grid;gap:.8rem;border-top:1px solid var(--line)}
.pcard2__points li{display:flex;align-items:flex-start;gap:.7rem;font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.35}
.pcard2__num{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;background:var(--navy);color:#fff;
  font-family:var(--font-d);font-weight:800;font-size:.7rem}

/* ================================================================
   STEPS
   ================================================================ */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:s}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--auto{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem}
.section--mist .step{background:#fff}
.step__num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--font-d);font-weight:900;font-size:1.2rem;margin-bottom:1rem}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.95rem}
.step .btn--link{margin-top:.7rem}

/* ================================================================
   HOW IT WORKS — water-flow journey (homepage)
   Dimensional badge "nodes" linked by a pipe whose teal->green fill
   grows node-to-node on scroll-in. Connector length uses
   calc(100% + <gap>) — keep that gap in sync with .flow__list `gap`
   (1.5rem mobile / 2rem desktop) or the line won't meet the next node.
   ================================================================ */
.flow__list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.flow__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.flow__node{position:relative;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,var(--navy-3),var(--navy) 72%);color:#fff;
  font-family:var(--font-d);font-weight:900;font-size:1.3rem;
  box-shadow:0 8px 18px rgba(0,26,92,.30),inset 0 2px 3px rgba(255,255,255,.28);
  transition:transform .5s ease,box-shadow .5s ease}
/* cardless: content sits straight on the section — no box, border or shadow */
.flow__card{position:relative;z-index:1;background:none;border:0;box-shadow:none;padding:.15rem 0 0}
.flow__card h3{margin-bottom:.4rem}
.flow__card p{color:var(--muted);font-size:.95rem}
.flow__card .btn--link{margin-top:.7rem}
/* connector: ::before = grey rail, ::after = teal->green fill (vertical on mobile) */
.flow__step:not(:last-child)::before,
.flow__step:not(:last-child)::after{content:"";position:absolute;z-index:0;left:26px;top:26px;
  width:4px;height:calc(100% + 1.5rem);transform:translateX(-50%)}
.flow__step:not(:last-child)::before{background:var(--line)}
.flow__step:not(:last-child)::after{transform-origin:top center;transform:translateX(-50%) scaleY(1);
  background:linear-gradient(180deg,var(--teal-300),var(--teal) 45%,var(--green))}
/* JS-gated entrance: collapse, then fill + reveal sequentially on scroll-in */
.flow--anim .flow__node{transform:scale(.86);box-shadow:0 5px 12px rgba(0,26,92,.22)}
.flow--anim .flow__card{opacity:0;transform:translateY(14px)}
.flow--anim .flow__step:not(:last-child)::after{transform:translateX(-50%) scaleY(0)}
.flow--anim.is-in .flow__node{transform:scale(1);
  box-shadow:0 8px 18px rgba(0,26,92,.30),inset 0 2px 3px rgba(255,255,255,.28),0 0 0 6px rgba(54,197,224,.16)}
.flow--anim.is-in .flow__card{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.flow--anim.is-in .flow__step:not(:last-child)::after{transform:translateX(-50%) scaleY(1);transition:transform .9s ease}
.flow--anim.is-in .flow__step:nth-child(1)::after{transition-delay:.15s}
.flow--anim.is-in .flow__step:nth-child(2)::after{transition-delay:.6s}
.flow--anim.is-in .flow__step:nth-child(2) .flow__node,
.flow--anim.is-in .flow__step:nth-child(2) .flow__card{transition-delay:.45s}
.flow--anim.is-in .flow__step:nth-child(3) .flow__node,
.flow--anim.is-in .flow__step:nth-child(3) .flow__card{transition-delay:.9s}
@media (min-width:721px){
  .flow__list{grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
  .flow__step{display:flex;flex-direction:column;align-items:center}
  .flow__node{margin-bottom:1.2rem}
  .flow__card{width:100%;text-align:center}
  /* connector becomes horizontal, through the centered node row */
  .flow__step:not(:last-child)::before,
  .flow__step:not(:last-child)::after{left:50%;top:26px;width:calc(100% + 2rem);height:4px;transform:translateY(-50%)}
  .flow__step:not(:last-child)::after{transform-origin:left center;transform:translateY(-50%) scaleX(1);
    background:linear-gradient(90deg,var(--teal-300),var(--teal) 45%,var(--green))}
  .flow--anim .flow__step:not(:last-child)::after{transform:translateY(-50%) scaleX(0)}
  .flow--anim.is-in .flow__step:not(:last-child)::after{transform:translateY(-50%) scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .flow--anim .flow__node{transform:none}
  .flow--anim .flow__card{opacity:1;transform:none}
  .flow__step:not(:last-child)::before{background:linear-gradient(var(--teal-300),var(--green))}
  .flow--anim .flow__step:not(:last-child)::after{display:none}
  .flow--anim *{transition:none!important;animation:none!important}
}

/* ================================================================
   FEATURE
   ================================================================ */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.feature__media img{border-radius:var(--r-lg);box-shadow:var(--sh);aspect-ratio:4/3;object-fit:cover;width:100%}
.feature__price{margin-top:1rem;font-size:1.1rem;color:var(--ink)}
.feature__price strong{color:var(--blue);font-family:var(--font-d)}
.feature__text h2{margin-top:.3rem}
.feature__text p{margin-top:.8rem;color:var(--muted);font-size:1.05rem}
.feature__text p strong{color:var(--ink)}

/* ================================================================
   WHY (navy)
   ================================================================ */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.why__item{padding:1.6rem 1.4rem}
.why__item .icon{width:2.4rem;height:2.4rem;color:var(--teal-300);margin-bottom:.8rem}
/* KEBS certification badge: the real logo on its own white tile, in place of
   an icon, so the compliance claim carries an official mark. */
.why__seal{display:block;width:auto;height:42px;background:#fff;padding:.34rem .5rem;
  margin-bottom:.95rem;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.why__item h3{font-size:1.2rem;margin-bottom:.35rem}
.why__item p{color:#c2d3ef;font-size:.95rem}

/* ================================================================
   SERVICES
   ================================================================ */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.svc__item{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;box-shadow:var(--sh-sm);transition:.18s;color:var(--ink);overflow:hidden}
.svc__item::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:.2s}
.svc__item:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.svc__item:hover::before{transform:scaleY(1)}
.svc__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:0;background:var(--mist);color:var(--blue);margin-bottom:1rem}
.svc__icon .icon{width:1.7em;height:1.7em}
.svc__item h3{margin-bottom:.35rem}
.svc__item p{color:var(--muted);font-size:.95rem}
.svc__go{position:absolute;top:1.6rem;right:1.6rem;color:var(--muted-light)}
.svc__item:hover .svc__go{color:var(--blue)}

/* ================================================================
   QUOTES
   ================================================================ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--sh-sm)}
.quote__mark{width:2.4rem;height:2.4rem;color:var(--teal);opacity:.5;margin-bottom:.4rem}
.quote blockquote{font-size:1.05rem;color:var(--ink);line-height:1.55}
.quote figcaption{margin-top:1rem;font-weight:700;color:var(--navy);font-family:var(--font-d);font-size:.9rem}
.quotes__note{margin-top:1.2rem;font-size:.82rem;color:var(--muted);font-style:italic}

/* ================================================================
   LOCATIONS
   ================================================================ */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.loc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column}
.loc h3{font-size:1.15rem}
.loc__addr{display:flex;gap:.45rem;align-items:flex-start;margin-top:.7rem;color:var(--ink);font-weight:600}
.loc__addr .icon{color:var(--teal);flex:0 0 auto;margin-top:.1rem}
.loc__note{color:var(--muted);font-size:.9rem;margin-top:.35rem}
.loc__cta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1.1rem}

/* ================================================================
   LEAD FORM
   ================================================================ */
.lead{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--sh)}
.lead__title{font-size:1.5rem}
.lead__note{color:var(--muted);margin-top:.4rem;margin-bottom:1.4rem}
.lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1/-1}
.field span{font-weight:600;font-size:.88rem;color:var(--navy)}
.field em{color:var(--muted);font-weight:400;font-style:normal}
.field input,.field select,.field textarea{
  font:inherit;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:0;background:#fbfcff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(10,91,214,.12)}
.lead button[type=submit]{margin-top:1.3rem}
.lead__alt{margin-top:1rem;font-size:.88rem;color:var(--muted);text-align:center}

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff}
.cta-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:clamp(2.5rem,5vw,3.5rem)}
.cta-band__text h2{color:#fff;max-width:18ch}
.cta-band__text p{color:#c4d4f0;margin-top:.6rem;max-width:46ch}
.cta-band__btns{display:flex;flex-wrap:wrap;gap:.75rem}

/* band-soft (solutions) */
.band-soft{background:var(--mist);border-block:1px solid var(--line)}
.band-soft__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:clamp(2rem,4vw,3rem)}
.band-soft p{color:var(--muted);margin-top:.5rem;max-width:48ch}

/* ================================================================
   PAGE HERO (secondary pages)
   ================================================================ */
.page-hero{background:linear-gradient(160deg,var(--mist),#fff);border-bottom:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem)}
.page-hero--center{text-align:center}
.page-hero--center .page-hero__inner{max-width:760px;margin-inline:auto}
.page-hero__lead{margin-top:1rem;font-size:1.15rem;color:var(--muted);max-width:60ch}
.page-hero--center .page-hero__lead{margin-inline:auto}
.page-hero .btn-row{margin-top:1.6rem}
.page-hero--center .btn-row{justify-content:center}
.stub-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.88rem;color:var(--muted);
  background:#fff;border:1px solid var(--line);padding:.55rem .9rem;border-radius:var(--pill)}
.stub-note .icon{color:var(--teal);width:1.1em;height:1.1em}

/* ticks list */
.ticks{list-style:none;padding:0;display:grid;gap:.8rem}
.ticks--2col{grid-template-columns:1fr 1fr}
.ticks li{display:flex;gap:.7rem;align-items:flex-start}
.ticks .icon{color:var(--green);flex:0 0 auto;margin-top:.15rem}

/* generic panels / duo grid / callout (product pages) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--sh-sm)}
.section--mist .panel{background:#fff}
.panel>h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.panel>h3 .icon{color:var(--blue)}
.panel ul{list-style:none;padding:0;display:grid;gap:.55rem}
.panel li{display:flex;gap:.55rem;align-items:flex-start;color:var(--muted);font-size:.95rem}
.panel li .icon{color:var(--teal);flex:0 0 auto;margin-top:.15rem;width:1.1em;height:1.1em}
.callout{display:flex;gap:.95rem;align-items:flex-start;background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.5rem}
.callout .icon{color:var(--blue);width:1.9rem;height:1.9rem;flex:0 0 auto}
.callout h3{font-size:1.1rem;margin-bottom:.25rem}
.callout p{color:var(--muted);font-size:.95rem}

/* FAQ accordion (CSS-only via <details>) */
.faq{display:grid;gap:.7rem;max-width:840px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  padding:1.1rem 1.3rem;font-family:var(--font-d);font-weight:700;color:var(--navy);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq__a{padding:1.1rem 1.3rem;color:var(--muted)}

/* project showcase cards */
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1rem}
.scard{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh-sm)}
.section--mist .scard{background:#fff}
.scard__icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:0;background:var(--mist);color:var(--blue)}
.scard__icon .icon{width:1.5em;height:1.5em}
.scard__body{display:flex;flex-direction:column;gap:.18rem}
.scard__sector{font-family:var(--font-d);font-weight:700;color:var(--navy);font-size:1.02rem}
.scard__machine{font-size:.85rem;color:var(--blue);font-weight:600}
.scard__loc{display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--muted)}
.scard__loc .icon{width:1em;height:1em;color:var(--teal)}
.scards__note{margin-top:1rem;font-size:.82rem;color:var(--muted);font-style:italic}

/* photo gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem}
.gphoto{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);aspect-ratio:4/3;margin:0}
.gphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gphoto:hover img{transform:scale(1.06)}
/* product variant: white-background studio shots, shown whole (no crop) */
.gallery--products .gphoto{aspect-ratio:1;background:#fff;border:1px solid var(--line);box-shadow:none}
.gallery--products .gphoto img{object-fit:contain;padding:7%}
.gphoto figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,26,92,.88));
  color:#fff;font-family:var(--font-d);font-weight:600;font-size:.85rem;padding:1.6rem .85rem .65rem}
.pchips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.6rem}
.pchips__label{font-weight:700;color:var(--navy);font-family:var(--font-d);font-size:.9rem;margin-right:.25rem}
.pchip{background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:.35rem .8rem;font-size:.8rem;color:var(--muted)}
.pchip b{color:var(--navy);font-weight:700}
.ourwork__sub{font-size:1.15rem;color:var(--navy);margin:2rem 0 1rem;padding-left:.9rem;border-left:4px solid var(--teal)}

/* legal / long-form prose */
.legal{max-width:800px;margin-inline:auto}
.legal h2{font-size:1.35rem;margin:2.1rem 0 .5rem}
.legal h3{font-size:1.08rem;margin:1.3rem 0 .35rem;color:var(--navy)}
.legal p{margin:.7rem 0;color:var(--ink)}
.legal ul{margin:.5rem 0 .8rem 1.1rem;display:grid;gap:.4rem}
.legal li{color:var(--ink)}
.legal__meta{color:var(--muted);font-size:.88rem;margin-top:.4rem}

/* video embeds (click-to-load YouTube facades) */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.vid{margin:0}
.vid__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);background:var(--navy)}
.vid--portrait .vid__frame{aspect-ratio:9/16;max-width:330px;margin-inline:auto}
.vid__facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--navy);display:block}
.vid__thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:transform .5s ease,opacity .3s ease}
.vid__facade:hover .vid__thumb,.vid__facade:focus-visible .vid__thumb{transform:scale(1.05);opacity:1}
.vid__play{position:absolute;inset:0;margin:auto;width:66px;height:66px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .2s ease,background .2s ease}
.vid__play .icon{width:30px;height:30px;margin-left:3px}
.vid__facade:hover .vid__play{transform:scale(1.1)}
.vid__facade:focus-visible{outline:none}
.vid__facade:focus-visible .vid__play{outline:3px solid var(--gold);outline-offset:4px}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid__cap{margin-top:.75rem;line-height:1.3}
.vid__cap b{display:block;font-family:var(--font-d);color:var(--navy);font-size:1rem}
.vid__cap span{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}
.section--navy .vid__cap b{color:#fff}
.section--navy .vid__cap span{color:#cdddf5}
.vids__more{margin-top:1.6rem;text-align:center}

/* nationwide coverage */
.coverage{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:stretch}
.coverage__regions{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-content:start}
.coverage__region h3{font-size:1rem;color:var(--navy);margin-bottom:.55rem;display:flex;align-items:center;gap:.45rem}
.coverage__region h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);display:inline-block;flex:0 0 auto}
.coverage__region ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.coverage__region li{background:var(--mist);border:1px solid var(--line);border-radius:var(--pill);padding:.25rem .7rem;font-size:.8rem;color:var(--ink)}
.section--navy .coverage__region li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#dceaff}
.coverage__map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm);min-height:360px}
.coverage__map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
@media(max-width:860px){.coverage{grid-template-columns:1fr}.coverage__map,.coverage__map iframe{min-height:280px}}
@media(max-width:540px){.coverage__regions{grid-template-columns:1fr}}

/* spare parts */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.parts__group{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh-sm)}
.section--mist .parts__group{background:#fff}
.parts__photo{margin:0 0 1rem;aspect-ratio:16/9;border-radius:calc(var(--r) - 4px);overflow:hidden;background:#fff;border:1px solid var(--line)}
.parts__photo img{width:100%;height:100%;object-fit:contain;display:block;padding:3%}
.parts__group h3{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.parts__group h3 .icon{color:var(--blue)}
.parts__list{list-style:none;padding:0;display:grid;gap:.55rem}
.parts__list li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.parts__list .pname{color:var(--ink);font-size:.92rem}
.parts__list .pprice{font-family:var(--font-d);font-weight:700;color:var(--blue);white-space:nowrap}
@media(max-width:760px){.parts{grid-template-columns:1fr}}

/* service intervals */
.intervals{list-style:none;padding:0;display:grid;gap:.6rem;max-width:700px}
.intervals li{display:flex;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:0;padding:.85rem 1.1rem}
.intervals .ievery{color:var(--teal);font-weight:700;white-space:nowrap}

/* ================================================================
   SCHOOLS — symptoms, tds, pricing, mandazi, compare, terms
   ================================================================ */
.symptoms{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.symptom{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;text-align:center;box-shadow:var(--sh-sm)}
.symptom__icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:#fdeceb;color:var(--red);margin-bottom:1rem}
.symptom__icon .icon{width:1.9em;height:1.9em}
.symptom h3{font-size:1.1rem;margin-bottom:.4rem}
.symptom p{color:var(--muted);font-size:.92rem}

.tds-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem}
.tds__place{font-family:var(--font-d);font-weight:700;color:#fff;margin-bottom:.5rem;font-size:1.05rem}
.tds__row{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.tds__tag{flex:0 0 64px;font-size:.78rem;color:#bcd0f0;text-align:right;text-transform:uppercase;letter-spacing:.05em}
.tds__track{flex:1;background:rgba(255,255,255,.12);border-radius:var(--pill);height:26px;overflow:hidden}
.tds__fill{display:flex;align-items:center;justify-content:flex-end;height:100%;border-radius:var(--pill);
  padding-right:.6rem;width:var(--w);min-width:42px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.tds__fill b{font-size:.78rem;color:#fff;font-family:var(--font-d)}
.tds__fill--bad{background:linear-gradient(90deg,#7a1f2a,var(--red))}
.tds__fill--good{background:linear-gradient(90deg,#1b6e3b,var(--green))}
.tds-legend{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin-top:1.5rem;color:#cbd9f1;font-size:.85rem}
.tds-legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.35rem;vertical-align:-1px}
.dot--bad{background:var(--red)}.dot--good{background:var(--green)}
.tds-legend__note{color:var(--muted-light)}

.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.8rem 1.5rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.pcard--popular{background:linear-gradient(165deg,var(--navy),var(--navy-2));color:#fff;
  box-shadow:var(--sh-lg);transform:translateY(-10px);border:0}
.pcard--popular h3{color:#fff}
.pcard__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.35rem;
  background:var(--gold);color:#3a2c00;font-family:var(--font-d);font-weight:800;font-size:.78rem;
  padding:.4rem .9rem;border-radius:var(--pill);box-shadow:var(--sh-sm);white-space:nowrap}
.pcard__ribbon .icon{width:1em;height:1em}
.pcard__head h3{font-size:1.35rem}
.pcard__cap{font-size:.85rem;color:var(--muted);margin-top:.25rem}
.pcard--popular .pcard__cap{color:#bcd0f0}
.pcard__price{margin:1.2rem 0;padding:1rem 0;border-block:1px solid var(--line)}
.pcard--popular .pcard__price{border-color:rgba(255,255,255,.2)}
.pcard__price p{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.3rem}
.pcard__price span{font-size:.82rem;color:var(--muted);flex:0 0 auto}
.pcard--popular .pcard__price span{color:#bcd0f0}
.pcard__price strong{font-family:var(--font-d);font-size:1.5rem;color:var(--navy)}
.pcard--popular .pcard__price strong{color:#fff}
.pcard__price em{font-style:normal;font-size:.8rem;color:var(--muted)}
.pcard__y2 strong{font-size:1.15rem;color:var(--teal)}
.pcard--popular .pcard__y2 strong{color:var(--teal-300)}
.pcard__commit{font-size:.82rem!important;color:var(--muted)}
.pcard__list{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.6rem;flex:1}
.pcard__list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem}
.pcard__list .icon{color:var(--green);width:1.15em;height:1.15em;flex:0 0 auto;margin-top:.15rem}
.pcard--popular .pcard__list .icon{color:var(--green-300)}
.pcard__cta{margin-top:auto}
/* product variant */
.pcard__bigprice{font-family:var(--font-d);font-weight:900;font-size:1.85rem;color:var(--blue);margin:.4rem 0 1.1rem}
.pcard--popular .pcard__bigprice{color:#fff}
.pcard__note{display:inline-block;margin-top:.4rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--red);background:#fdeceb;padding:.2rem .55rem;border-radius:var(--pill)}
.pcard--product .pcard__head h3{font-size:1.3rem}
.pgroup{margin-bottom:2.75rem}
.pgroup:last-child{margin-bottom:0}
.pgroup__head{margin-bottom:1.25rem;border-left:4px solid var(--teal);padding-left:.9rem}
.pgroup__head h3{font-size:1.4rem}
.pgroup__head p{color:var(--muted);margin-top:.2rem}

.mandazi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:linear-gradient(150deg,#fff8e6,#fff);border:1px solid #f3e3b0;border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.6rem)}
.mandazi__big{display:grid;place-items:center;text-align:center;background:var(--gold);color:#3a2c00;
  border-radius:50%;width:clamp(140px,28vw,180px);aspect-ratio:1;box-shadow:var(--sh)}
.mandazi__kes{font-family:var(--font-d);font-weight:900;font-size:clamp(1.6rem,1rem + 2.5vw,2.4rem);line-height:1}
.mandazi__per{font-size:.8rem;font-weight:600;max-width:14ch;margin-top:.3rem}
.mandazi__text h2{color:var(--navy)}
.mandazi__text p{margin-top:.7rem;color:var(--ink);font-size:1.05rem}
.mandazi__text strong{color:var(--blue)}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.compare__col{border-radius:var(--r-lg);padding:1.8rem;border:1.5px solid}
.compare__col--bad{background:#fdf1f1;border-color:#f3c9c9}
.compare__col--good{background:#eef9f1;border-color:#bfe6cc;position:relative}
.compare__col h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.2rem}
.compare__col--bad h3{color:var(--red)}
.compare__col--bad .icon{color:var(--red)}
.compare__col--good h3{color:var(--green)}
.compare__col--good .icon{color:var(--green)}
.compare__col ul{list-style:none;padding:0;display:grid;gap:.7rem}
.compare__col li{padding-left:1.5rem;position:relative;color:var(--ink);font-size:.95rem}
.compare__col--bad li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:800}
.compare__col--good li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.compare__seal{position:absolute;right:1.2rem;bottom:1.2rem;opacity:.92}

.terms{list-style:none;padding:0;counter-reset:t;display:grid;gap:.8rem}
.terms li{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:0;padding:.9rem 1.1rem}
.terms .icon{color:var(--teal);flex:0 0 auto;margin-top:.15rem}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.cmethods{list-style:none;padding:0;display:grid;gap:.7rem;margin-top:1rem}
.cmethods li a,.cmethod-plain{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);
  border-radius:0;padding:1rem 1.1rem;color:var(--ink)}
.cmethods li a:hover{border-color:var(--blue);box-shadow:var(--sh-sm)}
.cmethods .icon{display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border-radius:0;background:var(--mist);color:var(--blue);padding:.55rem}
.cmethods span{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);line-height:1.35}
.cmethods b{font-family:var(--font-d);color:var(--navy);font-size:1rem}
.contact-qr{display:inline-flex;align-items:center;gap:1rem;margin-top:1.2rem;background:#fff;border:1px solid var(--line);border-radius:0;padding:1rem;color:var(--navy)}
.contact-qr img{border-radius:0}
.contact-qr span{font-weight:600;font-size:.9rem}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{background:var(--navy);color:#c4d3ee}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:2rem;padding-block:clamp(2.5rem,5vw,4rem)}
.foot__word{font-family:var(--font-d);font-weight:900;color:#fff;font-size:1.5rem;letter-spacing:.02em}
.foot__word span{color:var(--teal-300)}
.foot__sw{color:var(--teal-300);font-style:italic;margin-top:.2rem}
.foot__mission{margin-top:1rem;font-size:.9rem;color:#9fb4d8;max-width:34ch}
.foot__socials{list-style:none;padding:0;display:flex;gap:.6rem;margin-top:1.3rem}
.foot__socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:0;
  background:rgba(255,255,255,.08);color:#fff}
.foot__socials a:hover{background:var(--blue);color:#fff}
.foot__socials .icon{width:1.2em;height:1.2em}
.foot__col h4{color:#fff;font-size:1rem;margin-bottom:1rem}
.foot__col ul{list-style:none;padding:0;display:grid;gap:.6rem}
.foot__col a{color:#9fb4d8;font-size:.92rem}
.foot__col a:hover{color:#fff}
.foot__contact h4{color:#fff;font-size:1rem;margin-bottom:1rem}
.foot__contacts{list-style:none;padding:0;display:grid;gap:.7rem}
.foot__contacts a,.foot__plain{display:flex;gap:.6rem;align-items:flex-start;color:#cdddf6;font-size:.9rem}
.foot__contacts a:hover{color:#fff}
.foot__contacts .icon{color:var(--teal-300);flex:0 0 auto;width:1.1em;height:1.1em;margin-top:.15rem}
.foot__qr{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.2rem;background:rgba(255,255,255,.95);
  color:var(--navy);border-radius:0;padding:.6rem .8rem}
.foot__qr img{border-radius:0}
.foot__qr span{font-size:.78rem;font-weight:700;line-height:1.25}
.foot__map{line-height:0;border-top:1px solid rgba(255,255,255,.12)}
.foot__map iframe{width:100%;height:300px;border:0;filter:grayscale(.2)}
.foot__map--contact{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-top:2rem}
.foot__map--contact iframe{height:360px;filter:none}
.foot__bar{background:rgba(0,0,0,.25)}
.foot__bar-inner{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;padding-block:1.1rem;font-size:.82rem;color:#8fa6cc}
.foot__legal{list-style:none;padding:0;display:flex;gap:1.2rem}
.foot__legal a{color:#8fa6cc}.foot__legal a:hover{color:#fff}

/* ================================================================
   MOBILE ACTION BAR + FLOATING WHATSAPP
   ================================================================ */
.mobar{display:none}
.wa-float{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:850;
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.45)}
.wa-float .icon{width:2rem;height:2rem;position:relative;z-index:2}
.wa-float:hover{color:#fff;transform:scale(1.06)}
.wa-float__pulse{position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.8);opacity:0}100%{opacity:0}}

/* ================================================================
   MOTION — hero load-in + scroll reveal
   Content gently rises and fades as it flows into view. Everything here
   is JS-gated (html.js-reveal, set before first paint in base.html), so
   with no JS the page renders fully visible — and everything backs off
   under prefers-reduced-motion. The revealed end-state is reached by
   *removing* the hidden rule, never by pinning transform:none, so the
   card hover-lifts and the "popular" pricing-card raise survive intact.
   ================================================================ */

/* Hero load-in — CSS-only; plays on first paint, no observer needed.
   Each hero child rises in turn so the page lands with a sense of flow. */
.hero__text>*,.page-hero__inner>*{animation:rise-in .65s cubic-bezier(.22,.61,.36,1) both}
.hero__text>*:nth-child(2),.page-hero__inner>*:nth-child(2){animation-delay:.08s}
.hero__text>*:nth-child(3),.page-hero__inner>*:nth-child(3){animation-delay:.16s}
.hero__text>*:nth-child(4),.page-hero__inner>*:nth-child(4){animation-delay:.24s}
.hero__text>*:nth-child(5),.page-hero__inner>*:nth-child(5){animation-delay:.32s}
@keyframes rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Scroll reveal — single element (headings, blocks, forms, CTAs) */
.js-reveal [data-reveal]{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(22px)}
.js-reveal [data-reveal="left"]:not(.is-in){transform:translateX(-28px)}
.js-reveal [data-reveal="right"]:not(.is-in){transform:translateX(28px)}
.js-reveal [data-reveal="zoom"]:not(.is-in){transform:scale(.95)}

/* Scroll reveal — staggered group children (non-interactive display grids
   only, so the persistent transition never fights a hover transform) */
.js-reveal [data-reveal-group]>*{transition:opacity .6s ease,transform .6s ease}
.js-reveal [data-reveal-group]:not(.is-in)>*{opacity:0;transform:translateY(22px)}
.js-reveal [data-reveal-group].is-in>*:nth-child(2){transition-delay:.06s}
.js-reveal [data-reveal-group].is-in>*:nth-child(3){transition-delay:.12s}
.js-reveal [data-reveal-group].is-in>*:nth-child(4){transition-delay:.18s}
.js-reveal [data-reveal-group].is-in>*:nth-child(5){transition-delay:.24s}
.js-reveal [data-reveal-group].is-in>*:nth-child(6){transition-delay:.30s}
.js-reveal [data-reveal-group].is-in>*:nth-child(7){transition-delay:.36s}
.js-reveal [data-reveal-group].is-in>*:nth-child(8){transition-delay:.42s}
.js-reveal [data-reveal-group].is-in>*:nth-child(n+9){transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  .hero__text>*,.page-hero__inner>*{animation:none}
  .js-reveal [data-reveal],.js-reveal [data-reveal-group]>*{transition:none}
  .js-reveal [data-reveal]:not(.is-in),
  .js-reveal [data-reveal-group]:not(.is-in)>*{opacity:1;transform:none}
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr;}
  .hero__media{max-width:520px}
  .hero--schools .hero__media--seal{justify-self:start}
  .steps--4{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:1240px){
  .nav,.bar__cta{display:none}
  .burger{display:grid;order:-1}
  .bar__inner{min-height:64px;justify-content:space-between}
  .brand img{height:46px}
  .util__hours,.util__shop{display:none}
  body.nav-open .mobile-nav{display:block}
  .mobile-nav{position:fixed;inset:var(--mnav-top,150px) 0 0 0;background:#fff;z-index:899;overflow-y:auto;padding:1.25rem var(--gutter) 6rem;border-top:1px solid var(--line)}
  .site-header.is-open .burger__open{display:none}
  .site-header.is-open .burger__close{display:block}
  .mobile-nav__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
  .mobile-nav__list{list-style:none;padding:0;display:grid}
  .mnav-item{border-bottom:1px solid var(--line)}
  .mnav-link,.mnav-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;
    padding:.9rem .25rem;min-height:52px;font-family:var(--font-d);font-weight:700;font-size:1.05rem;
    color:var(--navy);background:none;border:0;text-align:left}
  .mnav-toggle .icon{color:var(--muted);transition:transform .2s ease}
  .mnav-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
  .mnav-sub{list-style:none;padding:0 0 .55rem;gap:.1rem}
  .mnav-sub:not([hidden]){display:grid}
  .mnav-sub a{display:flex;align-items:center;min-height:44px;padding:.5rem .25rem .5rem 1rem;color:var(--muted);font-size:.98rem}
  .mnav-sub a:hover{color:var(--blue)}
}

/* ================================================================
   PHONES — fixed action bar + single-column layouts (<=640px)
   ================================================================ */
@media (max-width:640px){
  /* Always-visible thumb bar: Call · WhatsApp · Quote. Replaces the
     floating bubble so the next step is never more than one tap away. */
  .mobar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:880;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,26,92,.14)}
  .mobar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-height:60px;padding:.5rem .25rem;font-family:var(--font-d);font-weight:700;font-size:.78rem;
    color:var(--navy);border-right:1px solid var(--line)}
  .mobar__btn:last-child{border-right:0}
  .mobar__btn:active{background:var(--mist)}
  .mobar__btn .icon{width:1.45rem;height:1.45rem}
  .mobar__btn--wa{color:var(--wa-600)}
  .mobar__btn--wa .icon{color:var(--wa)}
  .mobar__btn--quote{color:var(--blue)}
  .wa-float{display:none}
  body{padding-bottom:72px}

  /* Lead form on phones: keep the two-column grid (don't collapse it) and
     tighten the rhythm so the whole form + Send button clears the fixed action
     bar within the viewport. Anchor jumps land just below the 106px header. */
  html{scroll-padding-top:112px}
  .lead{padding:1.3rem 1.15rem}
  .lead__title{font-size:1.3rem}
  .lead__note{margin-bottom:.85rem}
  .lead__grid{gap:.7rem .8rem;align-items:end}
  .lead button[type=submit]{margin-top:.9rem}
  .lead__alt{margin-top:.7rem}

  /* Collapse every fixed multi-column grid to a single column. */
  .steps,.steps--4,.feature,.duo,.tds-grid,.pcards,.compare,.contact-grid,.ticks--2col{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}

  /* Full-width primary actions = bigger thumb targets, no awkward wrap. */
  .btn-row .btn:not(.btn--link){flex:1 1 100%}

  /* Trust bar on phones: a tidy 2-col stat grid; the logo marquee keeps
     scrolling, just scaled down to fit smaller screens. */
  .trustbar__inner{gap:1.6rem}
  .trustbar__stats{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1rem;width:100%}
  .trustbar__partners{width:100%}
  .partner{padding-inline:.9rem}
  .partner__logo{height:30px;max-width:120px}

  /* schools mandazi badge stacks above its text on phones */
  .mandazi{grid-template-columns:1fr}
  .mandazi__big{justify-self:center}

  /* solution picker replaces the audience-card grid on phones */
  .acards--desktop{display:none}
  .picker{display:block}
}

/* ============================================================= */
/*  Blog / guides — listing cards + article (imported from WP)    */
/* ============================================================= */

/* listing card: date/read-time line above the corner arrow */
.svc__item--post{padding-bottom:1.6rem}
.post-card__meta{display:block;margin-top:.9rem;color:var(--muted);
  font-family:var(--font-d);font-weight:700;font-size:.78rem;letter-spacing:.02em}

/* article hero (text-only, centred — matches site-wide hero policy) */
.post-hero .crumbs{font-family:var(--font-d);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:1rem}
.post-hero .crumbs a{color:var(--teal)}
.post-hero .crumbs span{color:var(--muted-light);margin:0 .35rem}
.post-hero h1{max-width:24ch;margin-inline:auto}
.post-hero__meta{margin-top:1rem;color:var(--muted);font-family:var(--font-d);
  font-weight:700;font-size:.9rem}

/* article body — readable long-form typography */
.post{font-size:1.06rem;line-height:1.75;color:var(--ink)}
.post > :first-child{margin-top:0}
.post p{margin:1.05rem 0}
.post h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,1.95rem);margin:2.4rem 0 .9rem}
.post h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);margin:1.9rem 0 .7rem}
.post h4{font-size:1.1rem;margin:1.5rem 0 .6rem;color:var(--navy)}
.post ul,.post ol{margin:1.05rem 0;padding-left:1.3rem}
.post li{margin:.45rem 0}
.post li::marker{color:var(--teal)}
.post a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.post a:hover{color:var(--teal)}
.post strong{color:var(--navy)}
.post figure{margin:1.8rem 0}
.post img{width:100%;border:1px solid var(--line)}
.post figcaption{margin-top:.5rem;text-align:center;color:var(--muted);font-size:.85rem}
.post hr,.post .wp-block-separator{border:0;height:1px;background:var(--line);margin:2.6rem auto;max-width:120px}
.post blockquote{margin:1.8rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:4px solid var(--teal);
  color:var(--muted);font-style:italic}
.post table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
.post th,.post td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top}
.post th{background:var(--mist);font-family:var(--font-d);color:var(--navy)}
.post__back{margin-top:2.5rem}
.post__back a{font-family:var(--font-d);font-weight:700;color:var(--teal)}
.post__back a:hover{color:var(--blue)}

/* related-guides strip (internal links from topical pages -> blog) */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.25rem}
.related__item{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);
  padding:1.4rem;box-shadow:var(--sh-sm);transition:.18s;color:var(--ink)}
.related__item:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--blue)}
.related__cat{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--teal)}
.related__title{font-family:var(--font-d);font-weight:800;color:var(--navy);font-size:1.08rem;line-height:1.2}
.related__meta{color:var(--muted);font-size:.8rem;margin-top:auto}
.related__read{font-family:var(--font-d);font-weight:700;color:var(--blue);font-size:.85rem;
  display:inline-flex;align-items:center;gap:.3rem}
.related__read .icon{width:1em;height:1em}
.related__item:hover .related__read{color:var(--teal)}
.related__all{margin-top:1.5rem}
.related__all a{font-family:var(--font-d);font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:.35rem}
.related__all .icon{width:1em;height:1em}