@charset "UTF-8";
/* ==========================================================================
   Safe4Sign Technologies — Design System
   Single typeface: Plus Jakarta Sans. Two brand colours. One signature motif.
   Author: Safe4Sign redesign, 2026
   --------------------------------------------------------------------------
   01 Tokens          06 Hero
   02 Reset           07 Sections & components
   03 Typography      08 Forms
   04 Primitives      09 Footer & floating UI
   05 Header          10 Motion, responsive, a11y
   ========================================================================== */

/* ── 01 Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Brand — taken from the Safe4Sign shield: trust blue + verification green */
  --blue:#0B4FA6;
  --blue-deep:#06356F;
  --blue-dark:#04244C;
  --blue-ink:#031B3A;
  --blue-tint:#EDF4FD;
  --blue-tint-2:#DCE9FA;

  --verify:#1E9B2E;          /* reserved for verified / success / primary action */
  --verify-deep:#16781F;
  --verify-tint:#EAF7EC;

  /* Neutrals — cool, paper-leaning */
  --ink:#071A33;
  --ink-2:#12304F;
  --body:#31465F;
  --muted:#61799A;
  --faint:#8CA0B8;
  --line:#E1E9F2;
  --line-soft:#EDF2F8;
  --paper:#F6F9FC;
  --paper-2:#F0F5FA;
  --white:#fff;

  /* Type — one family, hierarchy through scale, weight and tracking */
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-display:clamp(2.05rem,1.15rem + 3.9vw,4.3rem);
  --fs-h1:clamp(1.92rem,1.32rem + 2.7vw,3.5rem);
  --fs-h2:clamp(1.6rem,1.22rem + 2vw,2.85rem);
  --fs-h3:clamp(1.2rem,1.1rem + .4vw,1.45rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.02rem,.98rem + .3vw,1.175rem);
  --fs-body:1rem;
  --fs-sm:.9125rem;
  --fs-xs:.8125rem;
  --fs-label:.7rem;

  /* Spacing — 4px base */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s7:32px;  --s8:40px;  --s9:48px;  --s10:56px;
  --s11:64px; --s12:80px; --s13:96px; --s14:120px;

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;

  /* Elevation — blue-tinted, never grey */
  --sh-xs:0 1px 2px rgba(7,26,51,.06);
  --sh-sm:0 2px 8px rgba(7,42,86,.06),0 1px 2px rgba(7,42,86,.04);
  --sh-md:0 12px 28px rgba(7,42,86,.08),0 2px 6px rgba(7,42,86,.04);
  --sh-lg:0 24px 60px rgba(7,42,86,.12),0 4px 12px rgba(7,42,86,.05);
  --sh-xl:0 40px 90px rgba(6,32,68,.18);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s; --t:.24s; --t-slow:.5s;

  /* Layout */
  --container:1200px;
  --gutter:24px;
  --header-h:72px;
}

/* ── 02 Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:450;
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p,h1,h2,h3,h4,h5,figure,blockquote{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 03 Typography ─────────────────────────────────────────────────────── */
h1,h2,h3,h4,.h1,.h2,.h3{
  color:var(--ink);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.032em;
  text-wrap:balance;
}
h1,.h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.038em}
.display{font-size:var(--fs-display);line-height:1.01;letter-spacing:-.042em}
h2,.h2{font-size:var(--fs-h2);letter-spacing:-.034em}
h3,.h3{font-size:var(--fs-h3);font-weight:750;letter-spacing:-.022em;line-height:1.25}
h4{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.015em;line-height:1.35}

.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted)}
.small{font-size:var(--fs-sm)}
.tnum{font-variant-numeric:tabular-nums}

/* Eyebrow — same family, separated by tracking and weight, not a second font */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
.eyebrow--verify{color:var(--verify-deep)}
.eyebrow--light{color:#93BEEC}
.eyebrow .dot{
  width:6px;height:6px;border-radius:var(--r-full);
  background:currentColor;flex:0 0 auto;
}
.eyebrow--pulse .dot{background:var(--verify);box-shadow:0 0 0 0 rgba(30,155,46,.5);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(30,155,46,.45)}
  70%{box-shadow:0 0 0 8px rgba(30,155,46,0)}
  100%{box-shadow:0 0 0 0 rgba(30,155,46,0)}
}

/* Accent inside headings — the verification tick colour, used sparingly */
.accent{color:var(--blue)}
.accent-verify{color:var(--verify)}

/* Underline that mimics a signature stroke */
.sig-mark{position:relative;white-space:nowrap}
.sig-mark::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.34em;
  background:linear-gradient(90deg,rgba(30,155,46,.22),rgba(30,155,46,.10));
  border-radius:var(--r-full);z-index:-1;
}

/* ── 04 Primitives ─────────────────────────────────────────────────────── */
.container{width:min(var(--container),100% - (var(--gutter) * 2));margin-inline:auto}
.container--wide{width:min(1340px,100% - (var(--gutter) * 2))}
.container--narrow{width:min(780px,100% - (var(--gutter) * 2))}

.section{padding-block:var(--s13)}
.section--tight{padding-block:var(--s11)}
.section--flush-top{padding-top:0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:#C4D5E8;position:relative;overflow:hidden}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--hairline{border-top:1px solid var(--line)}

/* Section heading blocks */
.head{max-width:44rem}
.head .eyebrow{margin-bottom:var(--s4)}
.head h2{margin-bottom:var(--s4)}
.head p{color:var(--muted);font-size:var(--fs-lead);line-height:1.6;text-wrap:pretty}
.head--center{margin-inline:auto;text-align:center}
.head--split{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s9);align-items:end;
}
.head--split h2{margin-bottom:0}
.head--split p{padding-bottom:.35rem}
.head + .grid,.head + .bento,.head + .steps,.head + .faq{margin-top:var(--s10)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 var(--s6);
  border-radius:var(--r-sm);border:1.5px solid transparent;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .icon{transition:transform var(--t) var(--ease)}
.btn:hover .icon:last-child{transform:translateX(3px)}

.btn--verify{background:var(--verify);color:#fff;box-shadow:0 8px 20px rgba(30,155,46,.24)}
.btn--verify:hover{background:var(--verify-deep);box-shadow:0 12px 28px rgba(30,155,46,.30)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(11,79,166,.22)}
.btn--primary:hover{background:var(--blue-deep);box-shadow:0 12px 28px rgba(11,79,166,.28)}
.btn--ghost{border-color:var(--line);background:var(--white);color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.btn--onink{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.06)}
.btn--onink:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.btn--sm{min-height:42px;padding:0 var(--s5);font-size:var(--fs-xs);border-radius:var(--r-xs)}
.btn--block{width:100%}

/* Text link with travelling arrow */
.tlink{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--blue);font-weight:700;font-size:var(--fs-sm);letter-spacing:-.01em;
  transition:color var(--t) var(--ease);
}
.tlink .icon{transition:transform var(--t) var(--ease)}
.tlink:hover{color:var(--verify-deep)}
.tlink:hover .icon{transform:translateX(3px)}

/* Pills / tags */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:var(--r-xs);
  background:var(--blue-tint);color:var(--blue-deep);
  font-size:var(--fs-label);font-weight:750;letter-spacing:.06em;text-transform:uppercase;
}
.tag--verify{background:var(--verify-tint);color:var(--verify-deep)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}

/* Icon chip */
.chip{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-tint);color:var(--blue);flex:0 0 auto;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.chip--verify{background:var(--verify-tint);color:var(--verify-deep)}
.chip--sm{width:38px;height:38px;border-radius:11px}
.chip--lg{width:58px;height:58px;border-radius:18px}

/* Guilloché — the signature motif, borrowed from security printing */
.guilloche{
  position:absolute;pointer-events:none;
  aspect-ratio:1;
  background:currentColor;
  -webkit-mask:url("../images/pattern/guilloche.svg") center/contain no-repeat;
  mask:url("../images/pattern/guilloche.svg") center/contain no-repeat;
  opacity:.5;
}

/* Grids */
.grid{display:grid;gap:var(--s6)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,80px);align-items:center}
.split--media-first > .split__media{order:-1}

/* ── 05 Header ─────────────────────────────────────────────────────────── */
.skip-link{
  position:fixed;top:10px;left:-9999px;z-index:999;
  background:var(--white);color:var(--ink);padding:12px 18px;
  border-radius:var(--r-xs);box-shadow:var(--sh-lg);font-weight:700;
}
.skip-link:focus{left:10px}

.scroll-progress{
  position:fixed;inset:0 auto auto 0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--verify));
  transition:width .1s linear;
}

.utility{background:var(--ink);color:#9DB6D2;font-size:var(--fs-xs)}
.utility__inner{
  min-height:38px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;
}
.utility__contact{display:flex;align-items:center;gap:var(--s6)}
.utility__contact a{display:inline-flex;align-items:center;gap:7px;transition:color var(--t) var(--ease)}
.utility__contact a:hover{color:#fff}
.utility__hours{display:inline-flex;align-items:center;gap:8px}
.status-dot{
  width:6px;height:6px;border-radius:var(--r-full);background:#35C94A;
  box-shadow:0 0 0 3px rgba(53,201,74,.16);flex:0 0 auto;
}

/* Announcement ticker */
.ticker{
  display:flex;align-items:stretch;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  color:#EAF3FF;font-size:var(--fs-xs);
}
.ticker__label{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:9px 16px;background:rgba(0,0,0,.18);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-label);
}
.ticker__window{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker__track{display:flex;gap:var(--s9);white-space:nowrap;animation:ticker 42s linear infinite}
.ticker__window:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex;align-items:center;gap:8px}
.ticker__item a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.header.is-stuck{box-shadow:0 6px 24px rgba(7,42,86,.07);border-color:var(--line)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:var(--s7);min-width:0}
.nav__links{min-width:0}
.brand{flex:0 0 auto;display:block;width:186px}
.brand img{width:100%}

.nav__links{margin-left:auto;display:flex;align-items:center;gap:2px;height:100%}
.nav__links > a,.dropdown > button{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-weight:650;color:var(--ink-2);letter-spacing:-.01em;
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.nav__links > a:hover,.dropdown > button:hover,.nav__links > a[aria-current]{
  color:var(--blue);background:var(--blue-tint);
}
.dropdown{position:relative;height:100%;display:flex;align-items:center}
.dropdown > button .icon{transition:transform var(--t) var(--ease)}
.dropdown:hover > button .icon,.dropdown:focus-within > button .icon{transform:rotate(180deg)}
.dropdown__panel{
  position:absolute;top:calc(100% + 10px);right:-40px;width:560px;padding:var(--s3);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.99);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  z-index:20;
}
.dropdown:hover .dropdown__panel,.dropdown:focus-within .dropdown__panel{
  opacity:1;visibility:visible;transform:none;
}
.dropdown__panel a{
  display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);
  transition:background var(--t) var(--ease);
}
.dropdown__panel a:hover{background:var(--paper)}
.dropdown__panel a:hover .chip{background:var(--blue);color:#fff}
.dropdown__panel a:hover .chip--verify{background:var(--verify);color:#fff}
.dropdown__panel strong{display:block;font-size:var(--fs-sm);font-weight:750;color:var(--ink);letter-spacing:-.015em;margin-bottom:2px}
.dropdown__panel small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.dropdown__all{
  grid-column:1/-1;margin-top:4px;padding-top:var(--s4);border-top:1px solid var(--line-soft);
  justify-content:center;align-items:center;color:var(--blue);font-weight:750;font-size:var(--fs-sm);
}

.nav__cta{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-xs);
  place-items:center;background:var(--white);color:var(--ink);
}

/* Mobile drawer */
.scrim{
  position:fixed;inset:0;background:rgba(4,20,42,.55);backdrop-filter:blur(2px);
  z-index:108;opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);
}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(400px,88vw);z-index:110;
  background:var(--white);padding:var(--s5);overflow-y:auto;
  transform:translateX(101%);transition:transform var(--t-slow) var(--ease-out);
  box-shadow:-24px 0 60px rgba(4,24,52,.2);
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--s5);border-bottom:1px solid var(--line-soft);
}
.drawer__head img{width:170px}
.drawer__close{width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-xs);display:grid;place-items:center}
.drawer nav{display:grid;padding-block:var(--s4)}
.drawer nav > a{
  padding:13px 4px;border-bottom:1px solid var(--line-soft);
  font-weight:650;font-size:var(--fs-sm);color:var(--ink-2);
}
.drawer nav > a:hover{color:var(--blue)}
.drawer__label{
  margin:var(--s5) 0 var(--s2);font-size:var(--fs-label);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verify-deep);
}
.drawer__cta{padding-top:var(--s5);display:grid;gap:var(--s2)}

/* ── 06 Hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(56px,7vw,92px) clamp(64px,8vw,110px);
  background:
    radial-gradient(120% 90% at 92% 4%,var(--blue-tint) 0%,rgba(237,244,253,0) 58%),
    linear-gradient(180deg,#FBFDFF 0%,var(--white) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right,rgba(11,79,166,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,79,166,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 78%);
}
.hero .guilloche{
  color:var(--blue);width:640px;right:-190px;top:-170px;opacity:.09;z-index:-1;
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:clamp(40px,5vw,76px);align-items:center;
}
.hero__copy > * + *{margin-top:var(--s5)}
.hero__copy h1{margin-top:var(--s4)}
.hero__copy .lead{max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s2)}

.hero__proof{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  padding-top:var(--s6);margin-top:var(--s7);border-top:1px solid var(--line);
}
.hero__proof span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);
}
.hero__proof .icon{color:var(--verify)}

/* Hero media: a photograph, with the product's real payoff laid over it */
.hero__media{position:relative}
.hero__photo{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-lg);aspect-ratio:4/3.35;background:var(--paper-2);
}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(6,53,111,0) 38%,rgba(4,36,76,.55) 100%);
}

/* ── The signature element ──────────────────────────────────────────────
   A validated-signature panel, the exact artefact a DSC produces.
   ---------------------------------------------------------------------- */
.sigpanel{
  position:absolute;left:clamp(-16px,-2vw,-28px);bottom:26px;width:min(340px,86%);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  padding:var(--s5);z-index:2;
}
.sigpanel__bar{
  display:flex;align-items:center;gap:10px;
  margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);
  padding:11px var(--s5);
  background:var(--verify-tint);
  border-bottom:1px solid rgba(30,155,46,.18);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  color:var(--verify-deep);font-size:var(--fs-xs);font-weight:750;
}
.sigpanel__bar .tick{
  width:20px;height:20px;border-radius:var(--r-full);background:var(--verify);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
}
.sigpanel__row{display:flex;justify-content:space-between;gap:var(--s4);padding-block:7px}
.sigpanel__row + .sigpanel__row{border-top:1px dashed var(--line)}
.sigpanel__row dt{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.sigpanel__row dd{
  margin:0;font-size:var(--fs-xs);color:var(--ink);font-weight:750;
  font-variant-numeric:tabular-nums;text-align:right;
}
.sigpanel__foot{
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:var(--fs-label);
  color:var(--muted);font-weight:650;letter-spacing:.04em;text-transform:uppercase;
}

/* Floating stat card on the opposite corner */
.hero__badge{
  position:absolute;right:clamp(-14px,-1.5vw,-24px);top:34px;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:13px var(--s4);
}
.hero__badge strong{display:block;font-size:var(--fs-sm);color:var(--ink);font-weight:750;letter-spacing:-.015em}
.hero__badge small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.35}

/* ── 07 Sections & components ──────────────────────────────────────────── */

/* Credential strip — capability, not vanity metrics */
.credbar{border-block:1px solid var(--line);background:var(--paper)}
.credbar__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.credbar__item{
  display:flex;align-items:flex-start;gap:14px;
  padding:var(--s8) var(--s6);
}
.credbar__item + .credbar__item{border-left:1px solid var(--line)}
.credbar__item strong{display:block;font-size:var(--fs-sm);color:var(--ink);font-weight:750;letter-spacing:-.015em;margin-bottom:3px}
.credbar__item span{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}

/* Generic surface card */
.card{
  position:relative;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s7);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.card:hover{border-color:var(--blue-tint-2);box-shadow:var(--sh-md);transform:translateY(-3px)}
.card > * + *{margin-top:var(--s4)}
.card h3{margin-top:var(--s5)}
.card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.62}
.card .tlink{margin-top:auto;padding-top:var(--s2)}
.card--flat:hover{transform:none;box-shadow:var(--sh-sm)}

/* Bento — DSC applicant types. Sized by how often each is asked for. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s5)}
.bento__cell{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s7);overflow:hidden;position:relative;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.bento__cell:hover{border-color:var(--blue-tint-2);box-shadow:var(--sh-md);transform:translateY(-3px)}
.bento__cell h3{margin-block:var(--s5) var(--s3)}
.bento__cell p{color:var(--muted);font-size:var(--fs-sm);line-height:1.62}
.bento__cell .tag-row{margin-top:var(--s5)}
.bento__cell .tlink{margin-top:var(--s6)}
.bento__cell--wide{grid-column:span 3}
.bento__cell--third{grid-column:span 2}
.bento__cell--half{grid-column:span 3}

/* Feature cell that carries a photograph */
.bento__cell--photo{padding:0;min-height:290px;justify-content:flex-end;border:0}
.bento__cell--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento__cell--photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,36,76,.12) 0%,rgba(4,36,76,.86) 82%);
}
.bento__cell--photo .bento__body{position:relative;z-index:1;padding:var(--s7)}
.bento__cell--photo h3,.bento__cell--photo .tlink{color:#fff}
.bento__cell--photo p{color:#C6DAF0}
.bento__cell--photo .tlink:hover{color:#8FE0A0}

/* Numbered process — genuinely sequential, so numbers carry meaning */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.step{position:relative;padding-top:var(--s8)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;
  color:var(--blue);
}
.step::after{
  content:"";position:absolute;top:9px;left:34px;right:calc(var(--s6) * -1);height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.step:last-child::after{display:none}
.step h3{margin-bottom:var(--s3)}
.step p{color:var(--muted);font-size:var(--fs-sm);line-height:1.62}
.section--ink .step::before{color:#7FB2E8}
.section--ink .step::after{background:linear-gradient(90deg,rgba(255,255,255,.2),transparent)}
.section--ink .step p{color:#A8C1DA}

/* Secondary services — deliberately quieter than the DSC blocks */
.slist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.slist__item{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--white);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease);
}
.slist__item:hover{border-color:var(--blue-tint-2);background:var(--paper);transform:translateX(3px)}
.slist__item:hover .chip{background:var(--blue);color:#fff}
.slist__item:hover .chip--verify{background:var(--verify);color:#fff}
.slist__item h3{font-size:var(--fs-h4);margin-bottom:2px}
.slist__item p{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.slist__item > .icon:last-child{margin-left:auto;color:var(--faint)}

/* Checklist */
.checks{display:grid;gap:var(--s5);margin-top:var(--s7)}
.check{display:flex;gap:14px;align-items:flex-start}
.check__tick{
  width:26px;height:26px;border-radius:var(--r-full);flex:0 0 auto;
  background:var(--verify-tint);color:var(--verify-deep);display:grid;place-items:center;margin-top:2px;
}
.check strong{display:block;color:var(--ink);font-weight:700;font-size:var(--fs-sm);letter-spacing:-.015em;margin-bottom:3px}
.check p{color:var(--muted);font-size:var(--fs-sm);line-height:1.6}

/* Media frame for photographs inside content */
.frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);background:var(--paper-2)}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4}
.frame--tall img{aspect-ratio:4/5}
.frame--wide img{aspect-ratio:16/9}
.frame__caption{
  position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:12px;
}
.frame__caption strong{display:block;font-size:var(--fs-sm);color:var(--ink);font-weight:750}
.frame__caption small{display:block;font-size:var(--fs-xs);color:var(--muted)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7)}
.stat{padding:var(--s5);background:var(--paper);border-radius:var(--r-md);border:1px solid var(--line-soft)}
.stat strong{display:block;font-size:1.5rem;font-weight:800;color:var(--blue);letter-spacing:-.03em;line-height:1.1}
.stat span{display:block;margin-top:5px;font-size:var(--fs-xs);color:var(--muted);line-height:1.45}

/* FAQ */
.faq{display:grid;gap:var(--s3);max-width:56rem;margin-inline:auto}
.faq__item{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.faq__item[open]{border-color:var(--blue-tint-2);box-shadow:var(--sh-sm)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) var(--s6);cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);font-size:var(--fs-sm);letter-spacing:-.015em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";width:11px;height:11px;flex:0 0 auto;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t) var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__item > p{padding:0 var(--s6) var(--s6);color:var(--muted);font-size:var(--fs-sm);line-height:1.68}

/* Testimonials */
.quotes{position:relative;max-width:62rem;margin-inline:auto}
.quote{
  display:none;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,4vw,52px);align-items:center;
}
.quote.is-active{display:grid;animation:fade .5s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quote__photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.quote__photo img{width:100%;aspect-ratio:1;object-fit:cover}
.quote__mark{
  position:absolute;right:-14px;top:-14px;width:52px;height:52px;border-radius:var(--r-full);
  background:var(--verify);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-md);
}
.quote blockquote{
  font-size:clamp(1.1rem,1rem + .55vw,1.45rem);line-height:1.5;
  color:var(--ink);font-weight:600;letter-spacing:-.022em;text-wrap:pretty;
}
.quote__who{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.quote__who h3{font-size:var(--fs-h4)}
.quote__who p{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.quotes__nav{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:var(--s8)}
.quotes__nav button{
  width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink);background:var(--white);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.quotes__nav button:hover{border-color:var(--blue);color:var(--blue)}
.quotes__dots{display:flex;gap:7px}
.quotes__dots button{width:7px;height:7px;padding:0;border:0;border-radius:var(--r-full);background:var(--line);transition:background var(--t) var(--ease),width var(--t) var(--ease)}
.quotes__dots button.is-active{background:var(--verify);width:22px}

/* Logo wall — fixed cells so mixed logo dimensions stay uniform */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}
.logo-cell{
  height:104px;display:grid;place-items:center;padding:var(--s4);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.logo-cell:hover{border-color:var(--blue-tint-2);box-shadow:var(--sh-sm)}
.logo-cell img{max-height:48px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.logo-cell:hover img{filter:none;opacity:1}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.gallery figure{position:relative;border-radius:var(--r-md);overflow:hidden;margin:0;background:var(--paper-2)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{
  position:absolute;inset:auto 0 0;padding:var(--s5) var(--s4) var(--s4);
  background:linear-gradient(180deg,transparent,rgba(4,36,76,.86));
  color:#fff;font-size:var(--fs-xs);font-weight:650;
}

/* Page hero for interior pages */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(44px,5vw,68px) clamp(52px,6vw,80px);
  background:linear-gradient(180deg,var(--paper) 0%,var(--white) 100%);
  border-bottom:1px solid var(--line-soft);
}
.phero .guilloche{color:var(--blue);width:520px;right:-160px;top:-140px;opacity:.07;z-index:-1}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,4.5vw,68px);align-items:center}
.phero__copy > * + *{margin-top:var(--s5)}
.phero__copy .lead{max-width:34rem}
.crumbs{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{color:var(--faint)}

/* Sticky aside used on service pages */
.svc{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(32px,4vw,64px);align-items:start}
.svc__aside{position:sticky;top:calc(var(--header-h) + 24px)}
.svc__card{
  background:var(--ink);color:#B9CFE6;border-radius:var(--r-lg);padding:var(--s7);
  position:relative;overflow:hidden;
}
.svc__card .guilloche{color:#fff;width:340px;right:-130px;bottom:-140px;opacity:.06}
.svc__card h3{margin-block:var(--s4) var(--s3);color:#fff}
.svc__card p{font-size:var(--fs-sm);line-height:1.62;margin-bottom:var(--s6)}
.svc__card .btn{position:relative;z-index:1}

/* Callout note */
.note{
  display:flex;gap:14px;align-items:flex-start;
  padding:var(--s5) var(--s6);border-radius:var(--r-md);
  background:var(--blue-tint);border:1px solid var(--blue-tint-2);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
}
.note .icon{color:var(--blue);margin-top:3px;flex:0 0 auto}
.note strong{color:var(--ink);font-weight:750}
.note--verify{background:var(--verify-tint);border-color:rgba(30,155,46,.22)}
.note--verify .icon{color:var(--verify-deep)}

/* Big CTA band, photograph-backed with the guilloché seal */
.cta{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--blue-ink) 0%,var(--blue-deep) 55%,var(--blue) 130%);
  color:#C8DBEF;padding:clamp(40px,5vw,68px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s9);align-items:center;
}
.cta .guilloche{color:#fff;width:520px;right:-140px;top:50%;transform:translateY(-50%);opacity:.10;z-index:-1}
.cta h2{margin-block:var(--s4) var(--s4);color:#fff;max-width:22ch}
.cta p{max-width:46ch;font-size:var(--fs-sm);line-height:1.62}
.cta__actions{display:flex;flex-direction:column;gap:var(--s3);min-width:230px}

/* ── 08 Forms ──────────────────────────────────────────────────────────── */
.formcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,40px);box-shadow:var(--sh-md);
}
.formcard > h2{font-size:clamp(1.4rem,1.25rem + .5vw,1.7rem);margin-bottom:var(--s3)}
.formcard > p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s7)}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.field{display:grid;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);letter-spacing:-.005em}
.field label small{font-weight:500;color:var(--faint)}
.field .req{color:var(--verify-deep)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-xs);
  font-size:var(--fs-sm);color:var(--ink);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2361799A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C8D8EA}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,79,166,.10);background:var(--white);
}
.field input:user-invalid,.field select:user-invalid{border-color:#D0453B;box-shadow:0 0 0 4px rgba(208,69,59,.09)}

.form__divider{
  grid-column:1/-1;display:flex;align-items:center;gap:11px;
  margin-top:var(--s3);padding-top:var(--s5);border-top:1px solid var(--line-soft);
}
.form__divider:first-child{margin-top:0;padding-top:0;border-top:0}
.form__divider strong{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.form__divider .chip{width:30px;height:30px;border-radius:9px}

.consent{
  grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.6;cursor:pointer;
}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--verify);flex:0 0 auto;cursor:pointer}
.consent a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:var(--s4) var(--s5);border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.55;margin-bottom:var(--s6);
}
.alert--ok{background:var(--verify-tint);border:1px solid rgba(30,155,46,.24);color:var(--verify-deep)}
.alert--err{background:#FDF1F0;border:1px solid #F4CFCB;color:#A5342B}
.alert .icon{margin-top:2px;flex:0 0 auto}

.form__note{
  display:flex;gap:10px;align-items:center;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs);color:var(--muted);
}
.form__note .icon{color:var(--verify-deep);flex:0 0 auto}

/* Contact detail stack */
.cstack{display:grid;gap:var(--s3);margin-top:var(--s7)}
.cstack__item{
  display:flex;gap:14px;align-items:flex-start;
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.cstack__item:hover{border-color:var(--blue-tint-2);box-shadow:var(--sh-sm)}
.cstack__item h3{font-size:var(--fs-h4);margin-bottom:3px}
.cstack__item p,.cstack__item a{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
.cstack__item a{color:var(--blue);font-weight:650}
.cstack__item a:hover{color:var(--verify-deep)}

.contact-layout{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(32px,4vw,64px);align-items:start}

/* Legal / prose pages */
.prose{max-width:46rem}
.prose > * + *{margin-top:var(--s5)}
.prose h2{font-size:1.6rem;margin-top:var(--s10)}
.prose h3{margin-top:var(--s8)}
.prose p,.prose li{color:var(--body);font-size:var(--fs-sm);line-height:1.75}
.prose ul{display:grid;gap:10px;padding-left:var(--s5)}
.prose li{list-style:disc}
.prose a{color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:2px}

/* ── 09 Footer & floating UI ───────────────────────────────────────────── */
.footer{background:var(--ink);color:#93AEC9;position:relative;overflow:hidden;isolation:isolate}
.footer .guilloche{color:#fff;width:660px;left:-230px;bottom:-300px;opacity:.05;z-index:-1}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.85fr)) minmax(0,1.25fr);
  gap:clamp(32px,4vw,60px);padding-block:var(--s13) var(--s11);
}
.footer__brand img{width:194px;margin-bottom:var(--s5)}
.footer__brand p{font-size:var(--fs-sm);line-height:1.68;max-width:34ch}
.footer__seal{
  display:flex;align-items:center;gap:12px;margin-top:var(--s6);
  padding:var(--s4);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);
  background:rgba(255,255,255,.03);max-width:300px;
}
.footer__seal .chip{background:rgba(30,155,46,.16);color:#5FD173}
.footer__seal small{display:block;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:#7E9BB8;font-weight:750}
.footer__seal strong{display:block;font-size:var(--fs-xs);color:#fff;font-weight:700;margin-top:2px}

.footer__col h3{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:800;margin-bottom:var(--s5)}
.footer__col a{display:block;padding-block:7px;font-size:var(--fs-sm);transition:color var(--t) var(--ease)}
.footer__col a:hover{color:#fff}
.footer__contact > div,.footer__contact > a{display:flex;gap:11px;align-items:flex-start;padding-block:8px;font-size:var(--fs-sm);line-height:1.55}
.footer__contact .icon{color:#5B84AF;margin-top:3px;flex:0 0 auto}
.footer__social{display:flex;gap:9px;margin-top:var(--s5)}
.footer__social a{
  width:40px;height:40px;border-radius:var(--r-xs);display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.12);color:#93AEC9;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.footer__social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.footer__legal{border-top:1px solid rgba(255,255,255,.09)}
.footer__legal-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);padding-block:var(--s5);font-size:var(--fs-xs)}
.footer__legal-row a:hover{color:#fff}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s6);font-size:var(--fs-xs);color:#7791AD;
}

/* WhatsApp assistant */
.wa{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa__panel{
  width:min(340px,calc(100vw - 40px));background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xl);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:bottom right;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
}
.wa__panel.is-open{opacity:1;visibility:visible;transform:none}
.wa__head{display:flex;align-items:center;gap:12px;padding:var(--s5);background:#128C7E;color:#fff}
.wa__head strong{display:block;font-size:var(--fs-sm);font-weight:750}
.wa__head span{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:#C8EDE7}
.wa__head span i{width:6px;height:6px;border-radius:var(--r-full);background:#5FD173;display:block}
.wa__head button{margin-left:auto;color:#fff;opacity:.8}
.wa__head button:hover{opacity:1}
.wa__avatar{width:40px;height:40px;border-radius:var(--r-full);background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.wa__body{padding:var(--s5);max-height:min(60vh,440px);overflow-y:auto}
.wa__body > p{font-size:var(--fs-sm);color:var(--body);line-height:1.6;background:var(--paper);padding:var(--s4);border-radius:var(--r-sm);border:1px solid var(--line-soft)}
.wa__label{display:block;margin:var(--s5) 0 var(--s3);font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wa__topics{display:grid;gap:6px}
.wa__topics a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-size:var(--fs-xs);font-weight:650;color:var(--ink-2);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.wa__topics a:hover{border-color:#128C7E;background:#F0FAF8;color:#0C6E63}
.wa__start{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:var(--s4);
  padding:13px;border-radius:var(--r-xs);background:#128C7E;color:#fff;font-size:var(--fs-sm);font-weight:700;
}
.wa__start:hover{background:#0C6E63}
.wa__body small{display:block;margin-top:var(--s4);text-align:center;font-size:var(--fs-label);color:var(--faint)}
.wa__fab{
  display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;
  border-radius:var(--r-full);background:#25D366;color:#fff;font-weight:750;font-size:var(--fs-sm);
  box-shadow:0 10px 30px rgba(37,211,102,.36);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.wa__fab:hover{background:#1FBA59;transform:translateY(-2px);box-shadow:0 14px 36px rgba(37,211,102,.42)}

.to-top{
  position:fixed;left:20px;bottom:20px;z-index:118;
  width:46px;height:46px;border-radius:var(--r-full);
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t),border-color var(--t) var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--blue);color:var(--blue)}

/* ── 10 Motion, responsive, a11y ───────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal].is-in{opacity:1;transform:none}
html:not(.js) [data-reveal]{opacity:1;transform:none}
[data-stagger] > *{transition-delay:calc(var(--i,0) * 70ms)}

@media (max-width:1100px){
  .dropdown__panel{width:480px;right:-20px}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s9)}
  .footer__brand{grid-column:1/-1}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:980px){
  :root{--gutter:20px}
  .nav__links{display:none}
  .burger{display:grid}
  .hero__grid,.phero__grid,.split,.head--split,.svc,.contact-layout{grid-template-columns:minmax(0,1fr)}
  .head--split{gap:var(--s5);align-items:start}
  .split{gap:var(--s10)}
  .split--media-first > .split__media{order:0}
  .svc__aside{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s6)}
  .step::after{display:none}
  .grid--4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.slist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credbar__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credbar__item:nth-child(3){border-left:0}
  .credbar__item:nth-child(n+3){border-top:1px solid var(--line)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__cell--wide,.bento__cell--third,.bento__cell--half{grid-column:span 1}
  .bento__cell--photo{grid-column:1/-1}
  .quote{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .quote__photo{max-width:220px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .cta__actions{flex-direction:row;flex-wrap:wrap}
}

@media (max-width:640px){
  :root{--gutter:18px;--header-h:64px}
  .section{padding-block:var(--s12)}
  .section--tight{padding-block:var(--s10)}
  .utility__contact{gap:var(--s4)}
  .utility__hours{display:none}
  .brand{width:154px}
  .hero{padding-block:var(--s9) var(--s11)}
  .hero__photo{aspect-ratio:4/3.6}
  .sigpanel{position:static;width:100%;margin-top:calc(var(--s7) * -1);z-index:2}
  .hero__badge{display:none}
  .form{grid-template-columns:minmax(0,1fr)}
  .grid--2,.grid--3,.grid--4,.slist,.stats,.steps,.bento,.gallery,.logos{grid-template-columns:minmax(0,1fr)}
  .credbar__grid{grid-template-columns:minmax(0,1fr)}
  .credbar__item{border-left:0!important;padding-block:var(--s6)}
  .credbar__item + .credbar__item{border-top:1px solid var(--line)}
  .card,.bento__cell{padding:var(--s6)}
  .cta__actions{flex-direction:column;width:100%}
  .cta__actions .btn{width:100%}
  .nav__cta .btn{display:none}
  .nav{gap:var(--s4)}
  .wa,.to-top{bottom:14px}
  .wa{right:14px}
  .to-top{left:14px;width:42px;height:42px}
  .wa__fab span{display:none}
  .wa__fab{width:56px;padding:0;justify-content:center}
  .footer__top{grid-template-columns:minmax(0,1fr)}
}

@media print{
  .header,.utility,.ticker,.wa,.to-top,.scroll-progress,.drawer,.scrim,.cta{display:none!important}
  body{color:#000}
  .section{padding-block:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .ticker__track{animation:none}
}

/* ── 11 2026-08 mobile usability & content refinements ─────────────────── */
.btn,
.burger,
.drawer__close,
.mobile-actions__item{
  position:relative;
  z-index:1;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Closed drawer must never block taps on the page. */
.scrim{z-index:138}
.drawer{
  height:100vh;
  height:100dvh;
  z-index:140;
  visibility:hidden;
  pointer-events:none;
  text-align:left;
}
.drawer.is-open{
  visibility:visible;
  pointer-events:auto;
}
.drawer nav,
.drawer nav > a,
.drawer__label,
.drawer__cta{text-align:left}
.drawer nav > a{min-height:48px;display:flex;align-items:center}
.drawer__close{flex:0 0 auto;background:var(--white)}
.burger{flex:0 0 auto;background:var(--white)}

/* A clear end point under centred FAQ headings without inline styles. */
.section-link{text-align:center;margin-top:var(--s8)}

/* Metrics on the home page: readable numbers and calm spacing. */
.stats--trust .stat{padding:var(--s6);text-align:left}
.stats--trust .stat strong{font-size:clamp(1.45rem,1.1rem + 1vw,2rem)}
.stats--trust .stat span{font-size:var(--fs-sm)}

/* Mobile-only action dock: keeps DSC and support one tap away. */
.mobile-actions{display:none}
.mobile-actions__item{
  min-width:0;
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--ink-2);
  background:var(--white);
  border-right:1px solid var(--line-soft);
  font-size:11px;
  line-height:1.1;
  font-weight:750;
}
.mobile-actions__item:last-child{border-right:0}
.mobile-actions__item .icon{color:var(--blue)}
.mobile-actions__item--dsc{color:var(--verify-deep)}
.mobile-actions__item--dsc .icon{color:var(--verify-deep)}

@media (max-width:980px){
  .nav{justify-content:space-between}
  .nav__cta{margin-left:auto}
  .hero__copy,.phero__copy,.head--split{text-align:left}
  .head--split > p{text-align:left}
  .hero__actions{justify-content:flex-start}
  .utility__inner{justify-content:flex-start}
}

@media (max-width:640px){
  body{padding-bottom:58px}
  .mobile-actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:106;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(7,42,86,.10);
    backdrop-filter:blur(14px) saturate(170%);
    -webkit-backdrop-filter:blur(14px) saturate(170%);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .brand{width:150px}
  .burger{width:46px;height:46px}
  .drawer{width:min(360px,92vw);padding:18px}
  .drawer__head img{width:158px}
  .drawer__cta .btn{min-height:50px}
  .hero__copy,.phero__copy,.head,.head--center,.head--split{text-align:left}
  .head--center{margin-inline:0}
  .head--center p{margin-inline:0}
  .hero__actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .hero__actions .btn{width:100%;white-space:normal;text-align:center;line-height:1.3;padding-block:12px}
  .hero__proof{align-items:flex-start}
  .stats--trust .stat{text-align:left}
  .section-link{text-align:left}
  .utility__inner{min-height:40px}
  .utility__contact{width:100%;justify-content:flex-start;overflow:hidden}
  .utility__contact a{min-width:0}
  .utility__contact a:nth-child(2){display:none}
  .wa,.to-top{bottom:78px}
  .footer{padding-bottom:env(safe-area-inset-bottom)}
}

@media (max-width:380px){
  :root{--gutter:15px}
  .brand{width:138px}
  .nav{gap:10px}
  .drawer{width:94vw}
}

/* Drawer icons improve scanning without changing the desktop navigation. */
.drawer nav > a{gap:11px}
.drawer nav > a .icon{flex:0 0 auto;color:var(--blue)}
.drawer nav > a span{min-width:0}

/* The fixed mobile action dock is screen-only. */
@media print{
  .mobile-actions{display:none!important}
  body{padding-bottom:0!important}
}

/* ── 12 2026-08-15 touch / mobile navigation hotfix ────────────────────── */
/* Never let an invisible overlay capture taps. */
.scrim{
  pointer-events:none;
}
.scrim.is-open{
  pointer-events:auto;
}

/* Keep all primary interactive controls above decorative/page layers. */
a.btn,
button.btn,
.burger,
.drawer__close,
.mobile-actions,
.mobile-actions__item{
  pointer-events:auto;
}

/* Children should not become smaller independent hit targets. */
a.btn > *,
button.btn > *,
.burger > *,
.drawer__close > *,
.mobile-actions__item > *{
  pointer-events:none;
}

@media (max-width:980px){
  .header{z-index:160}
  .nav__cta{position:relative;z-index:162}
  .burger{
    position:relative;
    z-index:163;
  }
  .scrim{z-index:170}
  .drawer{
    top:0;
    right:0;
    bottom:0;
    left:auto;
    z-index:171;
    opacity:0;
    transform:translate3d(101%,0,0);
    will-change:transform;
  }
  .drawer.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
}

@media (max-width:640px){
  /* Full-cell tap targets: icon, label, upper/lower empty space all work. */
  .mobile-actions{
    z-index:165;
    min-height:64px;
    pointer-events:auto;
    isolation:isolate;
  }
  .mobile-actions__item{
    width:100%;
    min-height:64px;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    position:relative;
    z-index:1;
  }
  .mobile-actions__item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
  }
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wa,.to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Fragment fallback: the menu still opens even if the JS asset is delayed. */
@media (max-width:980px){
  .drawer:target{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
  }
  body:has(.drawer:target) .scrim{
    opacity:1;
    visibility:visible;
  }
}


/* ── 13 2026-08-15 header hit-area + Gallery / Blog pages ──────────────── */
.header{z-index:300;isolation:isolate}
.nav{position:relative;isolation:isolate}
.nav__links,.nav__cta{position:relative;z-index:3}
.nav__links > a,.dropdown > button{
  min-height:46px;justify-content:center;position:relative;z-index:2;
  cursor:pointer;touch-action:manipulation;
}
.nav__cta > .btn{
  min-height:46px;position:relative;z-index:4;cursor:pointer;touch-action:manipulation;
}
.nav-support,.nav-dsc,.drawer-support,.drawer-dsc{pointer-events:auto!important}
.nav-support::before,.nav-dsc::before{content:"";position:absolute;inset:-10px 0;z-index:0}
.nav-support > *,.nav-dsc > *,.drawer-support > *,.drawer-dsc > *{pointer-events:none!important}
.drawer nav > a,.drawer__cta > a{width:100%;min-height:52px}

@media (max-width:1180px){
  .nav__links{display:none}
  .burger{display:grid}
  .header{z-index:300}
  .nav__cta{position:relative;z-index:302}
  .burger{position:relative;z-index:303}
  .scrim{z-index:310}
  .drawer{
    top:0;right:0;bottom:0;left:auto;z-index:311;opacity:0;
    visibility:hidden;pointer-events:none;transform:translate3d(101%,0,0);will-change:transform;
  }
  .drawer.is-open,.drawer:target{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);
  }
  body:has(.drawer:target) .scrim{opacity:1;visibility:visible;pointer-events:auto}
}

.phero--compact{padding-block:clamp(42px,5vw,66px)}
.phero--compact .head{max-width:58rem}
.gallery--page{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.gallery__link{display:block;border-radius:var(--r-md);outline-offset:4px}
.gallery__link figure{height:100%;box-shadow:var(--sh-sm);border:1px solid var(--line-soft)}
.gallery__link figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gallery__link:hover figure{box-shadow:var(--sh-md)}
.gallery__link:focus-visible{outline:3px solid var(--blue-tint-2)}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.blog-card{min-width:0;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--blue-tint-2)}
.blog-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--blue-tint),var(--paper-2))}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.blog-card:hover .blog-card__media img{transform:scale(1.04)}
.blog-card__placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--blue);background:radial-gradient(circle at 70% 20%,#fff 0,transparent 34%),linear-gradient(135deg,var(--blue-tint),#F9FCFF)}
.blog-card__placeholder .icon{width:42px;height:42px}
.blog-card__body{padding:var(--s6)}
.blog-meta,.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:var(--muted);font-size:var(--fs-xs);font-weight:650}
.blog-meta span + span::before,.article-meta span + span::before{content:"•";margin-right:16px;color:var(--faint)}
.blog-card h2{font-size:clamp(1.16rem,1.05rem + .35vw,1.42rem);line-height:1.28;margin-block:var(--s3)}
.blog-card h2 a:hover{color:var(--blue)}
.blog-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.65;margin-bottom:var(--s5)}
.blog-date{display:block;color:var(--muted);margin-top:var(--s4)}

.article-hero{padding-block:clamp(54px,7vw,88px);background:linear-gradient(180deg,var(--paper),#fff);border-bottom:1px solid var(--line-soft)}
.article-hero__inner{max-width:900px}
.article-hero h1{max-width:18ch;margin-block:var(--s4);font-size:clamp(2.15rem,1.55rem + 2.2vw,4rem)}
.article-hero .lead{max-width:48rem;margin-bottom:var(--s5)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(34px,5vw,70px);align-items:start}
.article-content{min-width:0}
.article-cover{width:100%;aspect-ratio:16/8.5;object-fit:cover;border-radius:var(--r-lg);margin-bottom:var(--s8);box-shadow:var(--sh-sm)}
.article-copy{font-size:clamp(1rem,.97rem + .15vw,1.08rem);line-height:1.82;color:var(--ink-2)}
.article-copy p + p{margin-top:1.35em}
.article-copy p:first-child{font-size:1.08em;color:var(--ink)}
.article-note{display:flex;align-items:flex-start;gap:13px;margin-top:var(--s8);padding:var(--s6);background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:var(--r-md);color:var(--ink-2)}
.article-note .icon{flex:0 0 auto;color:var(--blue);margin-top:2px}
.article-note p{font-size:var(--fs-sm);line-height:1.65}
.article-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.article-aside__support{margin-top:10px}
.related-posts .card h3 a:hover{color:var(--blue)}

.empty-state{max-width:720px;margin-inline:auto;text-align:center;padding:clamp(38px,6vw,72px);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper)}
.empty-state h2{margin-block:var(--s5) var(--s3)}
.empty-state p{color:var(--muted);line-height:1.7;margin-bottom:var(--s6)}
.public-pagination{display:flex;justify-content:center;margin-top:var(--s9)}
.public-pagination .pagination{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.public-pagination .page-link{display:grid;place-items:center;min-width:40px;height:40px;padding-inline:10px;border:1px solid var(--line);border-radius:var(--r-xs);background:#fff;color:var(--ink-2);font-size:var(--fs-xs);font-weight:700}
.public-pagination .active .page-link{background:var(--blue);border-color:var(--blue);color:#fff}
.public-pagination .disabled .page-link{opacity:.45;pointer-events:none}

@media (max-width:980px){
  .gallery--page,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .article-aside{position:static}
}
@media (max-width:640px){
  .gallery--page,.blog-grid{grid-template-columns:minmax(0,1fr)}
  .blog-card__body{padding:var(--s5)}
  .article-hero{padding-block:var(--s9)}
  .article-hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  .empty-state{text-align:left;padding:var(--s7)}
  .empty-state .btn{width:100%}
}

/* ── 14 UI polish: clearer hierarchy, quieter motion, larger hit areas ──── */
/* The strip directly below the hero should read left-to-right, not as centred tiles. */
.credbar{overflow:hidden;background:#F8FAFD}
.credbar__grid{align-items:stretch}
.credbar__item{
  position:relative;
  min-width:0;
  min-height:132px;
  align-items:center;
  text-align:left;
  padding:30px 24px;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.credbar__item > .chip{
  margin-top:0;
  align-self:center;
  display:grid;
  place-items:center;
}
.credbar__item > .chip .icon{display:block;margin:auto}
.credbar__item > span:last-child{min-width:0}
.credbar__item strong{line-height:1.35}
.credbar__item::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--verify));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t) var(--ease);
}

/* Icons stay useful as anchors rather than decoration. */
.chip{
  box-shadow:inset 0 0 0 1px rgba(11,79,166,.04);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.chip--verify{box-shadow:inset 0 0 0 1px rgba(30,155,46,.05)}
.card,.bento__cell,.slist__item,.stat,.logo-cell,.gallery figure{will-change:transform}
.card,.bento__cell{height:100%}
.card--flat{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.card--flat h3{margin-top:var(--s5)}
.card--flat .chip{align-self:flex-start}

/* Linked solution rows have a more obvious direction on hover/focus. */
.slist__item > .icon:last-child{transition:transform var(--t) var(--ease),color var(--t) var(--ease)}
.slist__item:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,79,166,.10);outline:0}

/* More comfortable reading width for centred section intros. */
.head--center{max-width:52rem}
.head--center p{max-width:46rem;margin-inline:auto}

/* Keep important buttons easy to hit across the site. */
.nav__links > a,.dropdown > button,.nav__cta > .btn,.drawer nav > a,.drawer__cta > a{
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible,.burger:focus-visible,.drawer__close:focus-visible{
  outline:3px solid rgba(11,79,166,.22);
  outline-offset:3px;
}

/* Explicit open state lets keyboard/click users use the desktop Solutions menu too. */
.dropdown.is-open > button .icon{transform:rotate(180deg)}
.dropdown.is-open .dropdown__panel{opacity:1;visibility:visible;transform:none}

@media (hover:hover) and (pointer:fine){
  .credbar__item:hover{
    background:var(--white);
    box-shadow:0 14px 30px rgba(7,42,86,.07);
    transform:translateY(-3px);
    z-index:1;
  }
  .credbar__item:hover::after{transform:scaleX(1)}
  .credbar__item:hover .chip{transform:rotate(-3deg);box-shadow:0 8px 18px rgba(11,79,166,.12)}
  .card:hover .chip,.bento__cell:hover > .chip{transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,79,166,.10)}
  .slist__item:hover > .icon:last-child{transform:translate(2px,-2px);color:var(--blue)}
  .logo-cell:hover{transform:translateY(-2px)}
}

@media (max-width:980px){
  .credbar__item{min-height:118px;padding:26px 22px}
  .credbar__item::after{left:22px;right:22px}
}

@media (max-width:640px){
  .credbar__item{
    min-height:0;
    padding:22px 2px;
    gap:13px;
    background:transparent;
  }
  .credbar__item::after{display:none}
  .credbar__item > .chip{width:42px;height:42px;border-radius:12px}
  .credbar__item strong{font-size:.9rem}
  .credbar__item span{font-size:.79rem}
  .head--center{max-width:none}
  .head--center p{margin-inline:0}
  .card--flat{padding:24px}
}