/* ============================================================
   HANNES IMMIGRATION — v3 "Agency" design
   Modeled on the Always Canada Group layout, UK edition:
   white base, deep navy, Union-Jack red CTAs, card-driven.
   ============================================================ */
:root{
  /* ---- palette sampled directly from the HIS logo ---- */
  --navy:#161F38; --navy-deep:#0E1626;   /* wordmark + emblem ground   */
  --red:#A21B29;  --red-dark:#7E1420;    /* Union flag crimson         */
  --gold:#C59545; --gold-deep:#AF833B;   /* emblem ring, tower, rays   */
  --cream:#F9EFDB;                       /* flag whites, clock face    */
  --ink:#161F38; --body:#4E5769; --faint:#8A93A5;
  --bg:#ffffff; --bg-soft:#F8F5EF; --line:#E7E2D6;
  --fd:"Manrope",sans-serif;
  --r:14px; --shadow:0 10px 30px rgba(22,31,56,.10);
  --shadow-lg:0 20px 48px rgba(22,31,56,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fd);background:var(--bg);color:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--ink);line-height:1.15;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.1rem}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.kicker::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14.5px;line-height:1.2;text-decoration:none;padding:14px 26px;border-radius:10px;transition:.2s;border:1.5px solid transparent;cursor:pointer;font-family:var(--fd)}
.btn svg{width:16px;height:16px;flex:none}
.btn-r{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(162,27,41,.3)}
.btn-r:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-b,.btn-g{background:var(--navy);color:#fff}
.btn-b:hover,.btn-g:hover{background:var(--navy-deep);transform:translateY(-1px)}
.btn-o,.btn-w,.btn-glass{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-o:hover,.btn-w:hover,.btn-glass:hover{border-color:var(--navy)}

/* ---------- top utility bar ---------- */
.topbar{background:var(--navy-deep);color:#fff;font-size:11.5px;font-weight:600}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:30px;gap:16px}
.topbar b{color:#fff}
.topbar a{text-decoration:none;color:#fff}
.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.topbar .tb-right .dot{color:rgba(255,255,255,.32);opacity:1}
@media(max-width:760px){.topbar .tb-left span.hide-m{display:none}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(22,31,56,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo{width:34px;height:34px;border-radius:9px;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;position:relative;overflow:hidden}
.logo::after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy) 33%,var(--gold) 33% 66%,var(--red) 66%)}
.brand div{line-height:1.15}
.brand b{font-weight:800;font-size:.98rem;color:var(--ink);display:block}
.brand span{font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
nav ul{display:flex;gap:22px;list-style:none;align-items:center}
nav a{text-decoration:none;font-weight:700;font-size:13.5px;color:var(--ink)}
nav a:hover,nav a[aria-current=page]{color:var(--red)}
.nav-cta{background:var(--red);color:#fff !important;padding:9px 16px;border-radius:9px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.nav-cta:hover{background:var(--red-dark)}
.toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:9px;font-weight:800;font-size:12px;padding:9px 15px;cursor:pointer;color:var(--ink)}
.tricolor{display:none}
@media(max-width:920px){
  .toggle{display:block}
  nav ul{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:12px 24px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  nav ul.open{display:flex}
  nav ul a{display:block;padding:12px 0;font-size:16px}
}

/* ---------- news ticker ---------- */
.ticker{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:12.5px}
.ticker .wrap{display:flex;align-items:center;gap:14px;height:34px;overflow:hidden}
.ticker .tag{flex:none;background:var(--red);color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.12em;padding:4px 10px;border-radius:6px}
.ticker-items{display:flex;gap:34px;white-space:nowrap;overflow:hidden}
.ticker-items a{text-decoration:none;font-weight:600;color:var(--body)}
.ticker-items a:hover{color:var(--navy)}
.ticker-items small{color:var(--faint);margin-left:8px}
.ticker .all{flex:none;margin-left:auto;font-weight:800;font-size:12.5px;color:var(--navy);text-decoration:none}
@media(max-width:760px){.ticker .all{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(700px 420px at 100% 0%,rgba(162,27,41,.05),transparent 60%),
  radial-gradient(800px 460px at 0% 100%,rgba(22,31,56,.06),transparent 60%),#fff;
  padding:14px 0 36px}
.hero-flag,.hero-noise,.scroll-cue{display:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.hero .kicker{margin-bottom:18px}
.hero h1 span{color:var(--red);position:relative;white-space:normal}
.hero h1 span svg{display:none}
.hero p{margin-top:14px;font-size:1.04rem;max-width:52ch}
.hero-actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.hero-actions .btn{padding:13px 18px;font-size:13.5px;white-space:nowrap}

/* Phone: a peer of the other two, not an afterthought. Same box as the
   ghost button, but a navy border and a crimson handset so it reads as
   something to act on rather than a line of contact detail. */
.btn-tel{background:#fff;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:0 3px 10px rgba(22,31,56,.05)}
.btn-tel svg{color:var(--red)}
.btn-tel:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.btn-tel:hover svg{color:var(--red)}
.hero-proof{margin-top:22px;display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap}
.chiprow{display:flex;gap:8px;flex-wrap:wrap}
.pillchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-weight:700;font-size:12px;color:var(--ink)}
.pillchip::before{content:"✓";color:var(--red);font-weight:800}
.review{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;box-shadow:var(--shadow)}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.review b{color:var(--ink);font-size:14px}
.review small{display:block;color:var(--faint);font-size:11.5px}
.avs{display:flex;align-items:center}
.avs span{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;margin-left:-10px;background:var(--navy)}
.avs span:first-child{margin-left:0}
.avs span:nth-child(2){background:var(--red)}.avs span:nth-child(3){background:var(--gold)}.avs span:nth-child(4){background:var(--gold-deep)}
.avs small{margin-left:12px;color:var(--ink);font-size:12.5px;font-weight:700}
/* hero right: stacked cards */
.hero-cards{display:flex;flex-direction:column;gap:12px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.hcard .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hcard .avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.hcard .hd b{color:var(--ink);font-size:15px;display:block;line-height:1.25}
.hcard .hd small{color:var(--faint);font-size:12px;font-weight:600}
.hcard p{font-size:13.5px}
.hcard .btn{margin-top:12px;width:100%;justify-content:center;padding:12px 18px;font-size:13.5px}
.hcard .contactlines{font-size:14px;font-weight:700;color:var(--ink)}
.hcard .contactlines a{display:flex;align-items:center;gap:9px;text-decoration:none;padding:7px 0;border-bottom:1px dashed var(--line)}
.hcard .contactlines a:last-child{border-bottom:none}
.hcard .contactlines a:hover{color:var(--red)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.statgrid div{background:#fff;padding:15px 10px;text-align:center}
.statgrid b{display:block;font-size:1.25rem;font-weight:800;color:var(--navy)}
.statgrid span{font-size:11.5px;color:var(--faint);font-weight:600}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}}
/* legacy hero-card safety */
.hero-card{display:none}

/* ---------- floating stats strip ---------- */
.trust{position:relative;z-index:5}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);transform:translateY(-30px);overflow:hidden}
.t{position:relative;padding:26px 16px;text-align:center;border-right:1px solid var(--line);
  overflow:hidden;transition:background .35s ease}
.t:last-child{border-right:none}
.t b{position:relative;z-index:1;display:block;font-size:1.65rem;font-weight:800;
  color:var(--navy);line-height:1.15;
  transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.t span{position:relative;z-index:1;display:block;max-width:26ch;margin:6px auto 0;
  font-size:13px;line-height:1.5;color:var(--faint);font-weight:600;
  transition:color .3s ease}

/* --- hover --- */
@media(prefers-reduced-motion:no-preference){
  /* the crimson-to-gold bar wipes across the top, as on the cards */
  .t::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
    background:linear-gradient(90deg,var(--red),var(--gold));
    transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
  /* a warm glow rising from the bottom of the cell */
  .t::after{content:"";position:absolute;inset:0;z-index:0;opacity:0;
    background:radial-gradient(120% 90% at 50% 118%,rgba(197,149,69,.20),transparent 62%);
    transition:opacity .4s ease}
  .t:hover::before{transform:scaleX(1)}
  .t:hover::after{opacity:1}
  .t:hover{background:#FEFCF8}
  .t:hover b{color:var(--red);transform:translateY(-3px) scale(1.06)}
  .t:hover span{color:var(--body)}

  /* the figures nudge up as a group when the strip is entered, so the
     four read as one panel rather than four separate hover targets */
  .trust .wrap:hover .t b{transform:translateY(-1px)}
  .trust .wrap .t:hover b{transform:translateY(-3px) scale(1.06)}
}
@media(max-width:860px){.trust .wrap{grid-template-columns:1fr 1fr}.t:nth-child(-n+2){border-bottom:1px solid var(--line)}.t:nth-child(2){border-right:none}}

/* ---------- sections ---------- */
.section{padding:84px 0}
.section.alt,.why{background:var(--bg-soft)}
.head{max-width:640px;margin:0 auto 48px;text-align:center}
.head .kicker{justify-content:center}
.head p{margin-top:12px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.head-row .head{margin:0;text-align:left}
.head-row .head .kicker{justify-content:flex-start}

/* services grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(22,31,56,.05)}
/* Interaction ported from the ACG service-card: same distances, same
   durations, same easing. Colours stay Hannes. */
.card{position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(162,27,41,.12);
  border-color:#EBD3D2}
.card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.15rem;margin-bottom:8px}
.card p{font-size:14px;flex:1}
.card a{margin-top:16px;font-weight:800;font-size:13.5px;color:var(--red);text-decoration:none}
.card a:hover{text-decoration:underline}
.card small.date{font-weight:700;color:var(--faint);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;display:block}
@media(max-width:920px){.cards{grid-template-columns:1fr}}

/* why: feature grid */
.split{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
.split>img{display:none}
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.checks li{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;font-size:14px;box-shadow:0 4px 14px rgba(22,31,56,.05)}
.checks .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
.checks b{color:var(--ink);display:block;font-weight:800;margin-bottom:2px}
@media(max-width:760px){.checks{grid-template-columns:1fr}}
.why .split>div:first-child{max-width:640px;margin:0 auto 34px;text-align:center}
.why .kicker{justify-content:center}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.stp{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;position:relative;box-shadow:0 4px 14px rgba(22,31,56,.05)}
.stp::before{content:"0" counter(s);font-weight:800;font-size:1rem;color:#fff;background:var(--red);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px}
.stp::after{display:none}
.stp h3{font-size:1.02rem;margin-bottom:6px}
.stp p{font-size:13.5px}
@media(max-width:1080px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

/* testimonials: google-review cards */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.q{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:26px 26px 24px 30px;display:flex;flex-direction:column;
  box-shadow:0 4px 14px rgba(22,31,56,.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.q .stars{font-size:13px}
.q p{margin:12px 0 18px;font-size:14px;color:var(--body)}
.q footer{display:flex;align-items:center;gap:11px}
.q .av{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;object-fit:cover}
.q b{font-size:13.5px;color:var(--ink);display:block;font-weight:800}
.q small{font-size:12px;color:var(--faint)}
@media(max-width:920px){.quotes{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;box-shadow:0 3px 10px rgba(22,31,56,.04)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:800;font-size:15.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--red);flex:none;transition:transform .25s;font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open]{border-color:#DED8C9}
.faq .faq-a{padding:0 22px 20px;font-size:14.5px}

/* CTA */
/* Split rather than centred: the message on the left, the actions on the
   right, where a reader who has already decided goes looking for them. */
/* Crimson rather than navy. Two radial layers over a diagonal base: a
   warm highlight bleeding in from the top left, and a deep shadow
   settling into the bottom right, so the panel has light falling across
   it instead of being a flat block of red. */
.cta-band{position:relative;overflow:hidden;border-radius:20px;color:#fff;
  padding:52px 52px 50px;display:grid;grid-template-columns:1.25fr auto;gap:44px;align-items:center;
  background:
    radial-gradient(circle at 6% 2%, rgba(222,104,52,.55), transparent 44%),
    radial-gradient(circle at 98% 100%, rgba(48,8,14,.65), transparent 58%),
    linear-gradient(125deg, var(--red) 0%, #7E1420 52%, #5C0F16 100%)}
/* the tricolour along the top edge, as everywhere else */
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--navy) 0 34%,var(--gold) 34% 66%,var(--cream) 66%)}
/* one soft glow instead of two hard circles, which read as stray shapes */
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 10%,rgba(197,149,69,.14),transparent 46%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.15}
.cta-band p{color:rgba(255,255,255,.88);margin:12px 0 0;max-width:54ch;font-size:1rem;line-height:1.7}

.cta-actions{display:flex;flex-direction:column;gap:10px;min-width:250px}
.cta-actions .btn{justify-content:center;width:100%;padding:14px 26px}

/* white outline on navy — the old .btn-g was navy on navy and all but
   invisible, which is what made the button disappear */
.btn-ghostw{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghostw svg{width:16px;height:16px;flex:none;color:var(--gold)}
.btn-ghostw:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-ghostw:hover svg{color:var(--red)}

@media(max-width:860px){
  .cta-band{grid-template-columns:1fr;gap:26px;padding:40px 28px}
  .cta-actions{min-width:0}
}
@media(max-width:640px){.cta-band{padding:34px 22px}}

/* ---------- page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy-deep),var(--navy));padding:58px 0 50px;color:#C3BCA8}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(162,27,41,.14);top:-210px;right:-130px}
.page-hero .hero-flag{display:none}
.page-hero .kicker{color:#D9B472}
.page-hero .kicker::before{background:var(--red)}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3rem);position:relative;z-index:1}
.page-hero p{margin-top:14px;max-width:60ch;position:relative;z-index:1}

/* services detail */
.svc-detail{position:relative;display:grid;grid-template-columns:340px 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:28px;box-shadow:0 6px 20px rgba(22,31,56,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.svc-media{position:relative;min-height:300px;overflow:hidden;background:var(--bg-soft)}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.svc-media .ref{position:absolute;top:16px;left:16px;background:var(--red);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.1em;padding:7px 13px;border-radius:8px}
.svc-body{padding:34px 38px 32px}
.svc-body h2{font-size:1.5rem;margin-bottom:10px}
.svc-body>p{font-size:14.5px;margin-bottom:16px}
.svc-body h3{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:18px 0 8px}
.svc-body ul{list-style:none}
.svc-body li{position:relative;padding:6px 0 6px 24px;font-size:14px;border-bottom:1px dashed var(--line)}
.svc-body li:last-child{border-bottom:none}
.svc-body li::before{content:"✓";position:absolute;left:0;color:var(--navy);font-weight:800}
.svc-fee{margin-top:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:13.5px}
.svc-fee b{color:var(--ink)}
.svc-body .btn{margin-top:18px}
@media(max-width:920px){.svc-detail{grid-template-columns:1fr}.svc-media{min-height:200px}.svc-body{padding:26px 24px}}

/* post body */
.post-body{font-size:16px;color:var(--body)}
.post-body h2{font-size:1.4rem;margin:30px 0 12px}
.post-body h3{font-size:1.15rem;margin:24px 0 10px}
.post-body p{margin-bottom:16px}
.post-body ul,.post-body ol{margin:0 0 16px 22px}
.post-body li{margin-bottom:6px}
.post-body a{color:var(--red)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--shadow)}
.form-card h2{font-size:1.4rem;margin-bottom:6px}
.form-card>p{font-size:14px;margin-bottom:22px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{margin-bottom:14px}
.f-field label{display:block;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.f-field label i{color:var(--red);font-style:normal}
.f-field input,.f-field select,.f-field textarea{width:100%;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--fd);font-size:14.5px;color:var(--ink);transition:.2s}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.f-field textarea{min-height:120px;resize:vertical}
.f-note{margin-top:14px;font-size:12px;color:var(--faint)}
.f-note a{color:var(--red)}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:14px;box-shadow:0 4px 14px rgba(22,31,56,.05)}
.panel h3{font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.panel p{font-size:13.5px}
.panel .big{display:block;font-weight:800;font-size:1rem;color:var(--ink);text-decoration:none;margin:5px 0}
.panel .big:hover{color:var(--red)}
.hours{list-style:none;font-size:13.5px}
.hours li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.hours li:last-child{border-bottom:none}
.hours b{color:var(--ink);font-weight:800}
.wa-inline{display:inline-flex;align-items:center;gap:9px;background:#25d366;color:#fff;text-decoration:none;font-weight:800;font-size:13.5px;padding:12px 20px;border-radius:10px;margin-top:6px}
.wa-inline:hover{filter:brightness(1.06)}

/* ---------- footer ---------- */
/* The wave carries the margin the footer used to have, so the two sit
   flush — a gap between them would show the page background through the
   curve and give the whole thing away. */
footer.site{background:var(--navy-deep);color:#B3A991;padding:38px 0 26px;margin-top:0;font-size:14px}

/* ---------- curved footer edge ---------- */
.foot-wave{position:relative;line-height:0;margin-top:84px;pointer-events:none}
.foot-wave svg{display:block;width:100%;height:96px}
/* -1px stops a hairline of page background showing along the seam on
   fractional-pixel zoom levels, which is the classic wave-divider bug */
.foot-wave{margin-bottom:-1px}
.fw-front{fill:var(--navy-deep)}
/* The back swell reads as a thin crest above the navy. Navy at partial
   opacity turned grey against the cream above it, so it is gold — a
   deliberate accent rather than a washed-out copy of the front wave. */
.fw-back{fill:var(--gold);opacity:.5}

@media(max-width:760px){.foot-wave svg{height:58px}.foot-wave{margin-top:56px}}
.fgrid{display:grid;grid-template-columns:1.6fr .9fr .9fr 1.15fr;gap:44px;padding-bottom:8px}
footer.site h4{font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:9px}
footer.site a{color:#B3A991;text-decoration:none}
footer.site a:hover{color:#fff}
.fb b{font-weight:800;color:#fff;font-size:1.15rem}
.fb p{margin-top:12px;max-width:38ch;font-size:13.5px}
.fstats{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.fstats span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;color:#EFE7D5;
  letter-spacing:.02em}

/* --- brand mark --- */
.fb-mark{display:inline-flex;align-items:center;gap:13px;text-decoration:none;margin-bottom:16px}
/* A pale tile behind the mark. Your logo is dark navy artwork, which is
   invisible on a navy footer — every brand with a dark logo does this on
   a dark ground rather than commissioning a second version of it. */
.fb-logo{display:grid;place-items:center;flex:none;width:54px;height:54px;
  background:#F7F3E9;border-radius:13px;padding:7px;
  box-shadow:0 3px 10px rgba(0,0,0,.24)}
.fb-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.fb-name b{display:block;font-family:var(--fd);font-weight:800;font-size:1.08rem;color:#fff;
  line-height:1.25}
.fb-name small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(179,169,145,.85);margin-top:3px}
.fb-mark:hover .fb-name b{color:var(--gold)}
.fb p{max-width:34ch;line-height:1.7}

/* --- contact column --- */
.fc-list{list-style:none;display:grid;gap:12px;margin-bottom:20px}
.fc-list li{display:flex;align-items:center;gap:10px}
.fc-list svg{width:16px;height:16px;flex:none;color:var(--gold)}
.fc-list a{color:#D7D2C4}
.fc-list a:hover{color:#fff}
.fc-hours{padding:12px 0 16px;border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:18px}
.fc-hours span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(179,169,145,.7);margin-bottom:4px}
.fc-hours b{color:#fff;font-size:13.5px;font-weight:600}
.fc-btn{width:100%;justify-content:center;padding:12px 18px;font-size:13.5px;border-radius:999px}

/* --- bottom bar --- */
/* The regulatory statement is a disclosure, not footer chrome — so it
   gets its own panel with the registration number pulled out of the
   sentence and set as a credential beside it. */
.fcomply{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  margin-top:36px;padding:20px 24px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
.fcomply-mark{display:flex;align-items:center;gap:12px;padding-right:26px;
  border-right:1px solid rgba(255,255,255,.12)}
.fcomply-mark svg{width:30px;height:30px;flex:none;color:var(--gold)}
.fcomply-mark small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(179,169,145,.75)}
.fcomply-mark b{display:block;font-family:var(--fd);font-weight:800;font-size:15px;
  color:#fff;letter-spacing:.03em;margin-top:2px}
.fcomply-text{margin:0;font-size:12px;line-height:1.8;color:rgba(179,169,145,.85);
  border:0;padding:0}
.fcomply-text a{text-decoration:underline}

/* copyright left, build credit right, on one quiet line */
/* Three columns, the third empty and the same width as the first. That
   is what centres the credit against the page rather than against
   whatever space the copyright leaves behind. */
.fend{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;letter-spacing:.02em;color:#B3A991}
.fend .fpow{text-align:center}
.fcopy{color:rgba(179,169,145,.75)}
/* footer.site a sets the muted tan for every link down here, and
   footer.site a:hover outranks a plain .fpow a. So the credit is pinned
   white on every state, at a specificity that beats both. */
footer.site .fpow a,
footer.site .fpow a:link,
footer.site .fpow a:visited,
footer.site .fpow a:hover,
footer.site .fpow a:focus,
footer.site .fpow a:active{color:#fff;font-weight:700;text-decoration:none}
footer.site .fpow a:hover,
footer.site .fpow a:focus{text-decoration:underline;text-underline-offset:3px}
.legal{font-size:12px;line-height:1.9}
.legal a{text-decoration:underline}
@media(max-width:920px){.fgrid{grid-template-columns:1fr}}

/* whatsapp float */
.wa{position:fixed;bottom:20px;right:20px;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.25);z-index:70;transition:transform .2s}
.wa:hover{transform:scale(1.08)}

/* reveal */
@media(prefers-reduced-motion:no-preference){
  /* Cards rise, fade and settle out of a very slight shrink. The scale is
     what stops it reading as a plain fade — it gives the card a sense of
     arriving rather than just appearing. */
  .reveal{opacity:0;transform:translateY(26px) scale(.985);
    transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
  .reveal.in{opacity:1;transform:none}
  /* Stagger across a grid row so items land left to right, not all at once.
     70ms is the sweet spot: readable as a sequence, never slow enough to
     make someone wait for the last card. */
  .reveal:nth-child(2){transition-delay:.07s}
  .reveal:nth-child(3){transition-delay:.14s}
  .reveal:nth-child(4){transition-delay:.21s}
  .reveal:nth-child(5){transition-delay:.28s}
  .reveal:nth-child(6){transition-delay:.35s}
  .reveal:nth-child(7){transition-delay:.42s}
  .reveal:nth-child(8){transition-delay:.49s}
  .reveal:nth-child(n+9){transition-delay:.56s}
}


/* ---------- hero text slider ---------- */
.hslider{position:relative;display:grid}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease,visibility .55s}
.hslide.on{opacity:1;visibility:visible;transform:none}
.hdots{display:flex;gap:8px;margin-top:20px}
.hdots button{width:26px;height:5px;border-radius:5px;border:none;background:var(--line);cursor:pointer;transition:.25s;padding:0}


/* ---------- hero visual (visa journey card) ---------- */
.hero-visual{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 8px 0}
.hv-blob{position:absolute;inset:6px -6px 26px;border-radius:26px;
  background:
    radial-gradient(circle at 20% 20%,rgba(162,27,41,.07),transparent 55%),
    radial-gradient(circle at 85% 80%,rgba(22,31,56,.10),transparent 55%),
    radial-gradient(rgba(22,31,56,.14) 1.2px,transparent 1.2px);
  background-size:auto,auto,20px 20px}
.hv-card{position:relative;width:min(350px,100%);background:linear-gradient(150deg,#26314E,var(--navy-deep) 70%);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;box-shadow:0 26px 60px rgba(14,22,38,.35);transform:rotate(-2deg);transition:transform .35s;overflow:hidden}
.hv-card::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(162,27,41,.22);filter:blur(10px);top:-110px;right:-90px}
.hero-visual:hover .hv-card{transform:rotate(0deg) translateY(-4px)}
.hv-head{position:relative;display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1.5px dashed rgba(255,255,255,.22)}
.hv-flag{width:34px;height:18px;border-radius:4px;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.hv-head b{display:block;font-size:13px;color:#fff;font-weight:800;line-height:1.2}
.hv-head small{font-size:11px;color:#A79C86;font-weight:600;letter-spacing:.03em}
.hv-status{margin-left:auto;background:rgba(197,149,69,.18);color:#E0B978;font-weight:800;font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border-radius:7px;border:1px solid rgba(197,149,69,.45)}
.hv-person{display:flex;align-items:center;gap:11px;padding:14px 0 4px}
.hv-person .av{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.hv-person b{display:block;font-size:13.5px;color:#fff;font-weight:800}
.hv-person small{font-size:11.5px;color:#A79C86;font-weight:600}
.hv-steps{list-style:none;margin:10px 0 4px}
.hv-steps li{position:relative;padding:8px 0 8px 30px;font-size:13px;font-weight:600;color:#CBC3B0}
.hv-steps li::before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:rgba(197,149,69,.16);color:#E0B978;border:1px solid rgba(197,149,69,.40);display:grid;place-items:center;font-size:11px;font-weight:800}
.hv-steps li:not(:last-child)::after{content:"";position:absolute;left:9.5px;top:28px;bottom:-8px;width:1.5px;background:rgba(255,255,255,.16)}
.hv-steps li.final{color:#fff;font-weight:800}
.hv-steps li.final::before{background:var(--red);color:#fff;border-color:var(--red)}
.hv-barcode{margin-top:14px;height:30px;border-radius:6px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#fff 5px 6px,transparent 6px 10px,#fff 10px 13px,transparent 13px 16px);opacity:.55}
.hv-chip{position:absolute;border:none;border-radius:999px;padding:10px 16px;font-weight:800;font-size:12px;color:#fff;letter-spacing:.01em}
.hv-chip1{top:7%;right:0;background:linear-gradient(135deg,#26314E,#161F38);box-shadow:0 10px 26px rgba(22,31,56,.45)}
.hv-chip2{top:52%;left:-3%;background:linear-gradient(135deg,#D8AC63,#C59545);box-shadow:0 10px 26px rgba(197,149,69,.5);color:#161F38}
.hv-chip3{bottom:7%;right:3%;background:linear-gradient(135deg,#B8303D,#A21B29);box-shadow:0 10px 26px rgba(162,27,41,.45)}
@media(prefers-reduced-motion:no-preference){
  .hv-chip{animation:hvfloat 4.5s ease-in-out infinite}
  .hv-chip2{animation-delay:1.2s}
  .hv-chip3{animation-delay:2.4s}
  @keyframes hvfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}
.hv-note{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10.5px;color:var(--faint);font-weight:600}
@media(max-width:920px){.hero-visual{min-height:0;padding-top:10px}.hv-chip3{display:none}}

/* language switcher */
.langsw{font-weight:800;letter-spacing:.04em}
.langsw a{opacity:.65}
.langsw a.on,.langsw a:hover{opacity:1;color:#fff}

/* hero visa-card deck (sliding examples) */
.hv-deck{position:relative;display:grid;width:min(350px,100%)}
.hv-deck .hv-card{grid-area:1/1;width:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,transform .45s ease,visibility .6s}
.hv-deck .hv-card.on{opacity:1;visibility:visible}

/* careers card (join the team) */
.hv-careers .hv-team{width:100%;height:auto;margin:10px 0 4px}
.hv-ctext{font-size:13px;color:#CBC3B0;line-height:1.55;margin:2px 0 14px}
.hv-cbtn{width:100%;justify-content:center;padding:12px 18px;font-size:13.5px}

/* deck dots */
.hvdots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
.hvdots button{width:18px;height:5px;border-radius:5px;border:none;background:#DED8C9;cursor:pointer;padding:0;transition:.25s}
.hvdots button.on{background:var(--red);width:30px}

/* careers card: distinct red identity */
.hv-careers{background:linear-gradient(150deg,#A21B29,#6B111C 75%)}
.hv-careers::before{background:rgba(255,255,255,.15)}
.hv-careers .hv-head{border-bottom-color:rgba(255,255,255,.3)}
.hv-careers .hv-head small{color:#E8C9A0}
.hv-careers .hv-status{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.hv-careers .hv-ctext{color:#F1DCBE}
.hv-careers .hv-cbtn{background:var(--cream);color:#7E1420;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.hv-careers .hv-cbtn:hover{background:#F9EFDB;transform:translateY(-1px)}

/* hide floating chips + note while the careers card is showing (deck default) */
.hero-visual.showing-careers .hv-chip,
.hero-visual.showing-careers .hv-note{opacity:0;visibility:hidden;pointer-events:none}


/* ============================================================
   GOLD ACCENTS — the third logo colour, applied where it reads
   as trim rather than as a large field. Delete this block to
   revert to navy + crimson only.
   ============================================================ */
.kicker::before{background:var(--gold)}
.svc-fee{border-left:3px solid var(--gold)}
.fstats span{border-color:rgba(197,149,69,.35)}
.page-hero .kicker::before{background:var(--gold)}
.btn-r:hover{box-shadow:0 8px 20px rgba(162,27,41,.32)}
.logo{background:var(--navy)}


/* ============================================================
   HERO LEAD CARD — SVG emblem header, gold trim, glass body.
   Replaces the old rotating .hv-deck visual.
   ============================================================ */
.his-emblem{display:block}

/* brand mark in the site header now holds the emblem, not a letter */
/* The mark sizes itself from its own aspect ratio: height is fixed, width
   follows. A square emblem stays square; a wide lockup dropped in here
   renders wide and legible instead of being squashed into a box. */
.logo{height:52px;width:auto;min-width:44px;border-radius:0;background:none;
  overflow:visible;display:grid;place-items:center;flex:none}
.logo img{height:100%;max-height:100%;width:auto;max-width:300px;object-fit:contain;display:block}
/* Nothing in the brand block may ever exceed the header, whatever is uploaded. */
.brand img{max-height:120px;max-width:420px}
header .nav{align-items:center}
/* full lockup: replaces the mark and the text together */
.brand-wide{gap:0}
.logo-wide{height:52px;width:auto;max-width:420px;object-fit:contain;display:block}
@media(max-width:760px){
  .logo{height:42px}
  .logo img{max-width:190px}
  .logo-wide{height:42px;max-width:240px}
}
.logo::after{display:none}

.lead-card{position:relative;width:min(414px,100%);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#FFFDF9 55%,#FCF8F1 100%);
  border:1px solid rgba(22,31,56,.075);
  box-shadow:
    0 1px 2px rgba(22,31,56,.04),
    0 6px 14px rgba(22,31,56,.045),
    0 20px 40px rgba(22,31,56,.07),
    0 44px 84px rgba(22,31,56,.09)}

/* --- navy header band --- */
.lead-head{position:relative;display:flex;align-items:center;gap:12px;
  padding:16px 18px 15px;overflow:hidden;
  background:linear-gradient(135deg,#303C64 0%,#1D2745 44%,var(--navy-deep) 100%)}
.lead-head::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(249,239,219,.30) 45%,transparent);
  pointer-events:none}
.lead-glow{position:absolute;width:220px;height:220px;border-radius:50%;
  background:rgba(162,27,41,.24);filter:blur(20px);top:-124px;right:-76px;pointer-events:none}
.lead-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 76% 128%,rgba(197,149,69,.24),transparent 60%)}
.lead-emblem{position:relative;flex:none;padding:2px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,239,219,.15),transparent 70%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.lead-headtext{position:relative;min-width:0}
.lead-kicker{display:block;font-weight:800;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.lead-headtext b{display:block;font-family:var(--fd);font-weight:800;
  font-size:1.04rem;line-height:1.2;color:#fff;letter-spacing:-.01em}

/* --- tricolour rule, straight off the logo --- */
.lead-rule{display:block;height:3px;background:linear-gradient(90deg,
  var(--navy) 0 34%, var(--gold) 34% 66%, var(--red) 66% 100%)}

/* --- form body --- */
.lead-body{padding:15px 18px 15px}
.lead-sub{margin:0;font-size:12.5px;line-height:1.5;color:var(--body)}
.lead-card label{display:block;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);margin:12px 0 4px}
.lead-card label i{color:var(--red);font-style:normal}
.lead-card input,.lead-card select{width:100%;box-sizing:border-box;
  background:var(--bg-soft);border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:var(--fd);font-size:14px;font-weight:600;
  color:var(--ink);box-shadow:inset 0 1px 2px rgba(22,31,56,.045);
  transition:border-color .15s,box-shadow .15s,background .15s}
.lead-card select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23161F38' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.lead-card input:focus,.lead-card select:focus{outline:none;background:#fff;
  border-color:var(--gold);
  box-shadow:inset 0 1px 2px rgba(22,31,56,.03),0 0 0 3px rgba(197,149,69,.22)}
.lead-btn{width:100%;justify-content:center;margin-top:15px;padding:13px 20px;font-size:14.5px;
  box-shadow:0 2px 4px rgba(162,27,41,.16),0 10px 22px rgba(162,27,41,.22)}
.lead-note{margin-top:9px;font-size:10.5px;line-height:1.45;color:var(--faint);text-align:center}
.lead-note a{color:var(--red);font-weight:700}
.lead-err{background:#FBEDEE;border:1px solid #E3BFC3;color:#7E1420;
  border-radius:10px;padding:11px 14px;margin-top:14px;font-size:13px;font-weight:600}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.lead-card select{text-overflow:ellipsis}
.lead-hp{position:absolute;left:-9999px}

/* --- thank-you state --- */
.lead-done{text-align:center;padding:18px 4px 8px}
.lead-tick{width:52px;height:52px;border-radius:50%;margin:0 auto 16px;display:grid;
  place-items:center;font-size:26px;font-weight:800;
  background:rgba(197,149,69,.16);color:var(--gold-deep);
  border:1.5px solid rgba(197,149,69,.45)}
.lead-done h2{font-size:1.3rem}
.lead-done p{margin-top:10px;font-size:14px;color:var(--body)}

/* --- floating chips, repositioned around the new card --- */
/* one badge only, parked over the empty right side of the navy header
   so it never covers a field label */
.hero-visual .hv-chip2{top:0;right:0;left:auto;padding:9px 15px;font-size:11.5px}

@media(max-width:520px){.lead-row{grid-template-columns:1fr}}
@media(max-width:920px){
  .lead-card{width:100%}
  .lead-head{padding:18px 18px 16px}
  .lead-body{padding:18px}
  .hero-visual{min-height:0;padding:0}
  .hv-chip{display:none}
}


/* ============================================================
   LANGUAGE SWITCHER — flag + code:  [UK] EN | [FR] FR | [PT] PT
   ============================================================ */
.langsw{display:inline-flex;align-items:center;gap:6px}
.langsw a{display:inline-flex;align-items:center;gap:5px;padding:2px 4px;border-radius:4px;
  opacity:.78;transition:opacity .15s,background .15s;text-decoration:none;line-height:1}
.langsw a:hover{opacity:1;background:rgba(255,255,255,.08);text-decoration:none}
.langsw a.on{opacity:1}
.langsw a.on .code{color:var(--gold)}
.langsw svg{width:17px;height:12px;border-radius:2px;display:block;flex:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.3)}
.langsw .code{font-size:11px;font-weight:800;letter-spacing:.05em}
.langsw .sep{color:rgba(255,255,255,.3);font-size:11px;user-select:none}
@media(max-width:620px){.langsw .code{display:none}.langsw a{gap:0;padding:2px}}

/* ============================================================
   ABOUT PAGE — corporate. Numbered sections, editorial rhythm,
   generous whitespace, one idea per band.
   ============================================================ */
.about-corp h1,.about-corp h2,.about-corp h3{letter-spacing:-.015em}

/* section eyebrows: number + label */
.ab-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:800;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.ab-eyebrow-n{font-size:11px;color:var(--gold);letter-spacing:.06em;
  border:1px solid rgba(197,149,69,.5);border-radius:999px;padding:3px 9px}
.ab-eyebrow.light{color:#E8E4DC}
.ab-eyebrow.light .ab-eyebrow-n{color:var(--gold)}

/* ---- 01 · hero ---- */
.ab-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 80%);color:#fff;
  padding:96px 0 84px;position:relative;overflow:hidden}
.ab-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(197,149,69,.14),transparent 65%);top:-220px;right:-140px}
.ab-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;position:relative}
.ab-hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.5rem,5.4vw,4.1rem);
  line-height:1.04;color:#fff}
.ab-hero-side p{font-size:1.08rem;line-height:1.75;color:#C6CBD8;border-left:2px solid var(--gold);
  padding-left:22px}
.ab-hero-facts{display:grid;grid-template-columns:repeat(3,auto);gap:34px;margin-top:34px;padding-left:24px}
.ab-hero-facts b{display:block;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--gold)}
.ab-hero-facts span{display:block;font-size:11.5px;color:#8E96A8;margin-top:3px;letter-spacing:.03em}
.ab-hero-rule{display:block;height:4px;background:linear-gradient(90deg,
  var(--navy-deep) 0 34%,var(--gold) 34% 66%,var(--red) 66%);position:absolute;left:0;right:0;bottom:0}

/* ---- shared band ---- */
.ab-block{padding:92px 0}
.ab-block.tint{background:var(--bg-soft)}
.ab-block-head{margin-bottom:56px}
.ab-block-head-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ab-block-head-grid h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15}
.ab-block-head-grid p{font-size:1.02rem;line-height:1.75;color:var(--body);padding-top:6px}

/* ---- 02 · pillars ---- */
.ab-pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.ab-pillar{padding:34px 28px 38px 0;border-right:1px solid var(--line);margin-right:28px}
.ab-pillar:last-child{border-right:none;margin-right:0}
.ab-pillar-n{font-family:var(--fd);font-weight:800;font-size:.95rem;color:var(--gold);
  display:block;margin-bottom:18px}
.ab-pillar h3{font-size:1.06rem;margin-bottom:10px}
.ab-pillar p{font-size:14px;line-height:1.7;color:var(--body)}

/* ---- 03 · mission / vision ---- */
.ab-mission{background:var(--bg-soft);color:var(--ink);padding:92px 0;position:relative;overflow:hidden}
.ab-mission::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 118%,rgba(197,149,69,.12),transparent 55%)}
.ab-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative}

/* --- mission & vision: two steps, staggered --- */
/* Side by side and level, the two read as a pair of equal statements.
   Offsetting the second and numbering them 01 / 02 makes the section say
   what it means: this is where we are, and this is where it leads. */
.mv-stagger{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;position:relative;
  padding-top:14px}
.mv-block{position:relative;padding-left:30px}
.mv-block::before{content:"";position:absolute;left:0;top:4px;bottom:10px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(197,149,69,0))}
.mv-block-b{margin-top:104px}

/* the word set very large and very faint behind each statement */
.mv-ghost{position:absolute;left:22px;top:-58px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--fd);font-weight:800;font-size:clamp(2.6rem,5.2vw,5.6rem);line-height:1;
  letter-spacing:-.035em;text-transform:uppercase;color:rgba(22,31,56,.06);
  white-space:nowrap;max-width:100%;overflow:hidden}

.mv-step{position:relative;z-index:1;display:inline-block;font-family:var(--fd);font-weight:800;
  font-size:11px;letter-spacing:.14em;color:var(--navy);background:#fff;
  border:1px solid var(--gold);border-radius:999px;padding:3px 9px;margin-bottom:14px}
.mv-block .ab-mission-tag,.mv-block .ab-statement{position:relative;z-index:1}

/* a hairline running from the first block down to the second */
.mv-link{position:absolute;left:calc(50% - 32px);top:78px;bottom:44px;width:1px;
  background:linear-gradient(180deg,rgba(22,31,56,0),rgba(22,31,56,.14) 22%,
    rgba(197,149,69,.75) 78%,rgba(197,149,69,0))}
.mv-link::after{content:"";position:absolute;left:-3px;bottom:26px;width:7px;height:7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg)}

@media(max-width:860px){
  .mv-stagger{grid-template-columns:1fr;gap:44px}
  .mv-block-b{margin-top:0}
  .mv-ghost{font-size:3.6rem;top:-34px}
  .mv-link{display:none}
}
.ab-mission-tag{display:block;font-family:var(--fd);font-weight:800;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.ab-statement{font-family:var(--fd);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.5;color:var(--ink)}


/* ---- 04 · values ---- */
.ab-values{list-style:none;counter-reset:none;border-top:1px solid var(--line)}
.ab-values li{display:grid;grid-template-columns:90px 300px 1fr;gap:28px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line)}
.ab-value-n{font-family:var(--fd);font-weight:800;font-size:.95rem;color:var(--gold)}
.ab-values h3{font-size:1.1rem}
.ab-values p{font-size:14.5px;line-height:1.7;color:var(--body)}

/* ---- 05 · how we work ---- */
.ab-how{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.ab-how h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:18px}
.ab-how-p{font-size:1.02rem;line-height:1.8;color:var(--body);max-width:56ch}
.ab-how-list{list-style:none;margin-top:6px}
.ab-how-list li{font-family:var(--fd);font-weight:700;font-size:1.02rem;padding:20px 0 20px 34px;
  border-bottom:1px solid var(--line);position:relative}
.ab-how-list li:first-child{border-top:1px solid var(--line)}
.ab-how-list li::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:9px;height:9px;border:solid var(--red);border-width:2px 2px 0 0}

/* ---- 06 · regulation ---- */
.ab-reg{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 18px 18px 0;
  padding:46px 52px;background:#fff;box-shadow:0 10px 30px rgba(22,31,56,.06)}
.ab-reg-p{font-size:1rem;line-height:1.75;color:var(--body);max-width:62ch}
.ab-reg-promise{font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--ink);
  margin-top:16px;max-width:56ch}
.ab-reg-link{display:inline-block;margin-top:20px;font-weight:800;font-size:13.5px;color:var(--red);
  text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:2px}
.ab-reg-link:hover{border-bottom-color:var(--red)}
.ab-reg-emblem{flex:none;opacity:.94}

/* --- the photo that can replace the emblem in section 06 --- */
.ab-reg-figure{flex:none;margin:0;text-align:center;max-width:230px}
.ab-reg-photo{position:relative;display:block;width:200px;height:230px;margin:0 auto;
  border-radius:16px;overflow:hidden;background:var(--bg-soft);
  box-shadow:0 14px 34px rgba(22,31,56,.16)}
.ab-reg-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ab-reg-figure:hover .ab-reg-photo img{transform:scale(1.04)}
/* the tricolour along the foot of the picture, tying it to the brand */
.ab-reg-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0 34%,var(--gold) 34% 66%,var(--red) 66%)}
.ab-reg-figure figcaption{margin-top:14px}
.ab-reg-figure figcaption b{display:block;font-family:var(--fd);font-weight:800;font-size:.98rem;
  color:var(--ink);line-height:1.3}
.ab-reg-figure figcaption small{display:block;margin-top:3px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
@media(max-width:860px){.ab-reg-figure{display:none}}

/* ---- closing ---- */
/* Closing band. Was a wide navy field with a headline stranded on one
   side and a navy-on-navy button on the other — the same invisible
   .btn-g that had to be fixed on the services CTA. */
.ab-close{position:relative;overflow:hidden;color:#fff;padding:62px 0 58px;
  background:linear-gradient(115deg,var(--navy-deep) 0%,var(--navy) 58%,#222D4A 100%)}
/* the tricolour along the TOP edge, closing the page the way the hero opened it */
.ab-close::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--navy-soft,#232E4C) 0 34%,var(--gold) 34% 66%,var(--red) 66%)}
.ab-close::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 4%,rgba(197,149,69,.16),transparent 52%),
             radial-gradient(circle at 6% 104%,rgba(162,27,41,.20),transparent 48%)}
/* the emblem, very large and very faint, anchored off the right edge */
.ab-close-mark{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  z-index:0;opacity:.055;pointer-events:none;line-height:0}
.ab-close-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr auto;
  gap:56px;align-items:center}
.ab-close-note{display:block;margin-top:4px;font-size:11.5px;line-height:1.6;
  color:rgba(198,203,216,.75);text-align:center;max-width:250px}
.ab-close h2{font-family:var(--fd);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.12;color:#fff}
.ab-close p{color:#C6CBD8;font-size:1.02rem;line-height:1.75;margin-top:14px;max-width:52ch}

/* ---- responsive ---- */
@media(max-width:980px){
  .ab-pillars{grid-template-columns:1fr 1fr}
  .ab-pillar:nth-child(2){border-right:none;margin-right:0}
  .ab-pillar:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:860px){
  .ab-hero{padding:64px 0 58px}
  .ab-hero-grid,.ab-block-head-grid,.ab-mission-grid,.ab-how,.ab-close-grid{grid-template-columns:1fr;gap:26px}
  .ab-close-mark{display:none}
  .ab-close-note{text-align:left;max-width:none}
  .ab-hero-side p{padding-left:16px}
  .ab-hero-facts{padding-left:18px;gap:22px}
  .ab-values li{grid-template-columns:52px 1fr;grid-template-rows:auto auto}
  .ab-values p{grid-column:2}
  .ab-reg{grid-template-columns:1fr;padding:30px 26px;border-radius:0 14px 14px 0}
  .ab-reg-emblem{display:none}
  .ab-block{padding:64px 0}
  .ab-mission{padding:64px 0}
  .ab-pillars{grid-template-columns:1fr}
  .ab-pillar{border-right:none;margin-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .ab-pillar:last-child{border-bottom:none}
}


/* ---------- article cards: the image strip ---------- */
/* The strip carries NO radius of its own — the card already clips with
   overflow:hidden, and a second radius inside it curved away from the
   corners and let the white card show through as a gap.
   min-height is a floor in case aspect-ratio cannot resolve. */
.card-img{display:block;position:relative;aspect-ratio:16/9;min-height:160px;
  overflow:hidden;border-radius:0;background:var(--bg-soft);line-height:0;
  flex:none;margin:0}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* no image yet: the emblem on a quiet navy field, so the grid stays level
   and an image-less post still looks deliberate rather than broken */
/* inset:0 rather than height:100%. A percentage height resolved against a
   parent whose own height came from aspect-ratio is unreliable, and when
   it failed the navy block shrank to the emblem and left the strip's
   cream background showing around it — the gap in your screenshot. */
.card-img-ph{position:absolute;inset:0;display:grid;place-items:center;
  border-radius:0;background:linear-gradient(140deg,var(--navy) 0%,var(--navy-deep) 85%)}
.card-img-ph svg{opacity:.9}


/* ============================================================
   ARTICLE CARD MOTION
   ============================================================ */
@media(prefers-reduced-motion:no-preference){

  /* 4px bar wipes across the top edge, left to right — ACG's exact
     mechanic and timing; their crimson-to-amber gradient becomes your
     crimson-to-gold, so the motion matches and the palette does not. */
  .card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;z-index:3;
    background:linear-gradient(90deg,var(--red),var(--gold));
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .card:hover::before{transform:scaleX(1)}

  /* Every card now routes its image through .card-img, so this is the
     single rule that governs it — no more parallel path for services. */
  .card-img img{transition:transform .45s ease}
  .card:hover .card-img img{transform:scale(1.05)}

  /* the emblem placeholder gets the same treatment, so image-less
     posts still respond to the cursor */
  .card-img-ph svg{transition:transform .55s cubic-bezier(.16,.84,.44,1)}
  .card:hover .card-img-ph svg{transform:scale(1.09)}

  /* date slides up and darkens as the card comes forward */
  .card-body .date{transition:color .3s ease}
  .card:hover .card-body .date{color:var(--red)}

  /* "Read article": the underline grows from the left and the arrow
     slides right. The arrow is its own element now, so it can move
     independently of the label — an arrow inside the text string cannot. */
  .card-body>a:last-child{background-image:linear-gradient(var(--red),var(--red));
    background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
    transition:background-size .4s cubic-bezier(.16,.84,.44,1)}
  .card:hover .card-body>a:last-child{background-size:100% 1.5px}
  .lnk-arrow{transition:transform .2s ease}
  .card:hover .lnk-arrow{transform:translateX(4px)}
  .lnk:hover .lnk-arrow{transform:translateX(4px)}
}

/* Whole card clickable. The read link is stretched over the card, so a
   click anywhere opens the article — while the link itself stays a real
   link for keyboard and screen-reader users. */
.card-body>a:last-child::after{content:"";position:absolute;inset:0;z-index:2}


/* link + arrow pairing */
.lnk{display:inline-flex;align-items:center;gap:7px;position:relative;align-self:flex-start}
.lnk-arrow{width:16px;height:16px;flex:none}


/* ============================================================
   SERVICES — the same treatment the article cards get, so the two
   components behave identically wherever they sit together.
   ============================================================ */

/* Route with no image yet: the emblem on navy, exactly as an
   image-less article card does. Never an empty grey panel. */
.svc-media-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-deep) 85%)}

@media(prefers-reduced-motion:no-preference){
  /* same 4px bar, same wipe, same 0.3s */
  .svc-detail::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;z-index:3;
    background:linear-gradient(90deg,var(--red),var(--gold));
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .svc-detail:hover::before{transform:scaleX(1)}

  /* same lift and shadow */
  .svc-detail:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(162,27,41,.12);
    border-color:#EBD3D2}

  /* same image push */
  .svc-detail:hover .svc-media img{transform:scale(1.05)}
  .svc-media-ph svg{transition:transform .45s ease}
  .svc-detail:hover .svc-media-ph svg{transform:scale(1.06)}

  /* the REF badge lifts with the panel rather than sitting flat on it */
  .svc-media .ref{transition:transform .2s ease,box-shadow .2s ease}
  .svc-detail:hover .svc-media .ref{transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(162,27,41,.3)}
}


/* ============================================================
   NEWS CARD — ported from ACG's .acg-blog-card. Their geometry and
   their timings; your palette.
   ============================================================ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-link{display:block;text-decoration:none;color:inherit;height:100%}
.news-link:hover{text-decoration:none}

.news-card{position:relative;height:100%;display:flex;flex-direction:column;
  background:#fff;border:1px solid #EEF0F2;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 10px rgba(22,31,56,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}

/* 4px bar wipes across the top */
.news-card::before{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.news-card:hover::before{transform:scaleX(1)}
.news-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(162,27,41,.16);
  border-color:transparent}

.news-img{position:relative;aspect-ratio:16/9;min-height:150px;overflow:hidden;
  background:#F3F4F6;line-height:0;flex:none}
.news-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.news-card:hover .news-img img{transform:scale(1.07)}

/* no image: soft tint and a newspaper mark, as theirs does */
.news-img-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#FDF6F5,#F7E3E2);color:var(--red)}
.news-img-ph svg{width:48px;height:48px;opacity:.4;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.news-card:hover .news-img-ph svg{transform:scale(1.07)}

.news-body{padding:24px;flex:1;display:flex;flex-direction:column}
.news-title{font-family:var(--fd);font-weight:800;font-size:1.06rem;line-height:1.35;
  color:var(--ink);margin-bottom:9px;transition:color .3s ease}
.news-card:hover .news-title{color:var(--red)}
.news-body p{font-size:13.5px;line-height:1.65;color:var(--muted);margin-bottom:18px}

/* date left, reading time right, pinned to the bottom of the card */
/* One tight group: icon, date, dot, reading time. It was
   justify-content:space-between from the earlier two-ended version, which
   pushed the four children to the far edges of the card. */
.news-meta{display:flex;align-items:center;justify-content:flex-start;gap:7px;
  margin-top:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}
.news-meta span{display:inline-flex;align-items:center;white-space:nowrap}
.news-meta svg{width:14px;height:14px;flex:none;margin-right:1px}
.news-dot{color:var(--line);font-weight:700}

.blog-empty{text-align:center;color:var(--muted);padding:48px 0}
.post-meta{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--faint);margin-top:14px}

/* category eyebrow above the title */
.news-cat{display:block;font-family:var(--fd);font-weight:800;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:8px}

/* ---------- blog hub: articles left, sidebar right ---------- */
.blog-layout{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start}
.news-grid-2{grid-template-columns:1fr 1fr}

.blog-side{position:sticky;top:96px;display:grid;gap:20px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;
  box-shadow:0 2px 10px rgba(22,31,56,.06)}
.side-card h4{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;
  font-size:1rem;margin-bottom:16px}
.side-card h4 svg{width:17px;height:17px;flex:none;color:var(--red)}

.cat-list{list-style:none;display:grid;gap:2px}
.cat-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0}
.cat-list a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;transition:color .2s ease}
.cat-list a:hover{color:var(--red)}
.cat-list a.on{color:var(--red);font-weight:800}
.cat-count{font-size:11.5px;font-weight:700;color:var(--faint);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;min-width:26px;text-align:center}

.side-cta{background:linear-gradient(150deg,#FDF6F5,#F9E9E8);border-color:#F0DAD8}
.side-cta h4{color:var(--red)}
.side-cta p{font-size:13.5px;line-height:1.65;color:var(--body);margin-bottom:18px}
.side-cta .btn{width:100%;justify-content:center;padding:12px 16px;font-size:13.5px;border-radius:999px}

@media(max-width:1080px){
  .blog-layout{grid-template-columns:1fr;gap:30px}
  .blog-side{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:980px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .news-grid,.news-grid-2{grid-template-columns:1fr}
  .blog-side{grid-template-columns:1fr}
}


/* ============================================================
   PILL BUTTON — the "view all" button at the head of a section.
   Ported from ACG's .btn-outline-brand: 2px brand border, pill
   radius, fills on hover. Their arrow, animated.
   ============================================================ */
.btn-pill{background:#fff;border:2px solid var(--red);color:var(--red);
  border-radius:999px;padding:10px 24px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn-pill .lnk-arrow{width:16px;height:16px;flex:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn-pill:hover{background:var(--red);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(162,27,41,.25)}
.btn-pill:hover .lnk-arrow{transform:translateX(4px)}
.btn-pill:focus-visible{outline:3px solid var(--gold);outline-offset:2px}


/* ============================================================
   THE JOURNEY — five milestones along a road.
   Replaces the five equal cards, which said nothing about the fact
   that these steps happen in order.
   ============================================================ */
.journey{position:relative;padding-top:8px}

/* --- the road --- */
/* Spans milestone 1 to milestone 5 rather than edge to edge: 10% is
   half of one column in a five-column grid, so it starts and ends
   under the outer pins instead of running off into the margin. */
.jroad{position:absolute;top:30px;left:3%;right:3%;height:10px;
  border-radius:99px;background:var(--navy);overflow:hidden;
  box-shadow:0 6px 16px rgba(22,31,56,.16)}
/* the centre line — gold dashes, like road markings */
.jroad-line{position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,
    var(--gold) 0 14px, transparent 14px 30px);opacity:.85}

/* the chequered finish flag, sitting just past the last milestone */
.jflag{position:absolute;top:18px;right:calc(3% - 30px);width:30px;height:30px;
  display:grid;place-items:center;color:var(--red)}
.jflag svg{width:22px;height:22px}

/* --- milestones --- */
.jsteps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.jstep{text-align:center;padding:0 6px}

.jpin{position:relative;z-index:2;display:grid;place-items:center;
  width:70px;height:70px;margin:0 auto 20px;border-radius:50%;
  background:#fff;border:3px solid var(--navy);
  box-shadow:0 8px 20px rgba(22,31,56,.14);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.jpin::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid var(--gold);opacity:0;transform:scale(.86);
  transition:opacity .3s ease,transform .3s ease}
.jpin-n{font-family:var(--fd);font-weight:800;font-size:1.22rem;color:var(--navy);
  transition:color .3s ease}

.jstep h3{font-size:1.02rem;margin-bottom:8px}
.jstep p{font-size:13.5px;line-height:1.65;color:var(--body)}

/* hover: the milestone you are pointing at becomes the live one */
.jstep:hover .jpin{transform:translateY(-6px) scale(1.06);border-color:var(--red);
  box-shadow:0 16px 30px rgba(162,27,41,.24)}
.jstep:hover .jpin::after{opacity:1;transform:scale(1)}
.jstep:hover .jpin-n{color:var(--red)}

/* --- the road fills in behind the car --- */
.jroad-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width 1s cubic-bezier(.33,.7,.3,1)}

/* --- the car --- */
/* left is animated rather than transform, so the percentage is measured
   against the road container and the stops line up with the milestones
   at any width. translateX(-50%) centres it on the stop. */
/* -50% would centre the car on the milestone, where the 70px disc hides
   it almost completely. The extra -68px parks it just short of the disc
   — which is also what "reaching" a milestone should look like. */
.jcar{position:absolute;top:8px;left:3%;z-index:1;width:56px;height:26px;
  transform:translateX(calc(-50% - 68px));color:var(--red);opacity:0;
  filter:drop-shadow(0 6px 10px rgba(22,31,56,.28));
  transition:left 1s cubic-bezier(.33,.7,.3,1),opacity .4s ease}
.jcar svg{width:100%;height:100%;display:block}
.jcar.go{opacity:1}
/* a small bounce as it sets off and settles, so it reads as driving
   rather than sliding */
.jcar.go svg{animation:jbob 1.1s ease-in-out infinite}
@keyframes jbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* --- milestones wait their turn --- */
/* Only applied once the script confirms it is going to run. */
.js-drive .jstep h3,
.js-drive .jstep p{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.44,1)}
.js-drive .jstep p{transition-delay:.08s}
.js-drive .jstep.arrived h3,
.js-drive .jstep.arrived p{opacity:1;transform:none}

/* --- milestone states --- */
/* waiting: hollow and pale. reached: filled navy, white number, gold halo.
   current: the one the car is standing at, filled crimson. */
.jpin{transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .35s ease,
  background .35s ease,box-shadow .35s ease}
.js-drive .jpin{border-color:#DDD8CB;background:#fff}
.js-drive .jpin-n{color:#B8B1A1;transition:color .35s ease}

.js-drive .jstep.arrived .jpin{background:var(--navy);border-color:var(--navy);
  box-shadow:0 10px 24px rgba(22,31,56,.24);animation:jland .5s cubic-bezier(.2,.8,.2,1)}
.js-drive .jstep.arrived .jpin-n{color:#fff}
.js-drive .jstep.arrived .jpin::after{opacity:1;transform:scale(1)}

.js-drive .jstep.current .jpin{background:var(--red);border-color:var(--red);
  box-shadow:0 14px 30px rgba(162,27,41,.32)}
.js-drive .jstep.current .jpin::after{border-color:var(--gold)}

@keyframes jland{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:no-preference){
  /* the road draws itself left to right, then the car sets off */
  .jroad.reveal{opacity:1;transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.16,.84,.44,1) .05s}
  .jroad.reveal.in{transform:scaleX(1)}
}

@media(max-width:1080px){
  .jsteps{grid-template-columns:repeat(3,1fr);gap:30px 18px}
  .jroad,.jflag,.jcar{display:none}
}
@media(max-width:720px){
  /* the road turns vertical and the milestones run down it */
  .journey{padding-left:6px}
  .jsteps{grid-template-columns:1fr;gap:0}
  .jstep{display:grid;grid-template-columns:56px 1fr;gap:18px;text-align:left;
    padding:0 0 26px;position:relative}
  .jstep::before{content:"";position:absolute;left:27px;top:56px;bottom:-4px;width:3px;
    background:linear-gradient(180deg,var(--navy) 0 60%,rgba(22,31,56,.15));border-radius:3px}
  .jstep:last-child::before{display:none}
  .jstep .jpin{width:56px;height:56px;margin:0}
  .jpin-n{font-size:1rem}
  .jstep h3,.jstep p{grid-column:2}
  .jstep h3{margin-top:14px}
}


/* ============================================================
   GOOGLE REVIEW CARDS — after ACG's .acg-review-card
   ============================================================ */
/* the gradient edge, which grows to the full height on hover */
.q::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:4px;
  border-radius:0 6px 6px 0;opacity:.85;
  background:linear-gradient(180deg,var(--red) 0%,#D4642F 55%,var(--gold) 100%);
  transition:top .35s ease,bottom .35s ease,width .35s ease,opacity .35s ease}
.q:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(162,27,41,.18);
  border-color:transparent}
.q:hover::before{top:6px;bottom:6px;width:5px;opacity:1}

/* the Google mark, top right, linking to the review itself */
.q-g{position:absolute;top:18px;right:18px;line-height:0;opacity:.9;
  transition:transform .25s ease,opacity .25s ease}
.q-g:hover{transform:scale(1.12);opacity:1}

.q p{font-style:italic;font-size:14.5px;line-height:1.7;color:var(--body);
  margin:14px 0 22px;flex:1}
.q footer{margin-top:auto}
.q footer b{display:inline-flex;align-items:center;gap:5px;font-size:14px}
.q footer small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}

/* the blue tick — a Google review we can link to, so it is verifiable */
.q-verified{display:inline-flex;color:#1A73E8;line-height:0}
.q-verified svg{width:14px;height:14px}

/* "Read our Google reviews" */
.q-cta{text-align:center;margin-top:30px}
.btn-google{background:#fff;color:var(--ink);border:1.5px solid var(--line);
  border-radius:999px;padding:11px 24px;font-weight:700;display:inline-flex;
  align-items:center;gap:10px;box-shadow:0 3px 10px rgba(22,31,56,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.btn-google:hover{transform:translateY(-2px);border-color:#4285F4;
  box-shadow:0 12px 26px rgba(66,133,244,.2);color:var(--ink)}
.btn-google .g-mark{flex:none}

@media(prefers-reduced-motion:reduce){.q,.q::before,.btn-google{transition:none}}


/* ============================================================
   SERVICE INDEX + DEDICATED SERVICE PAGE
   ============================================================ */

/* --- the page itself --- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;
  color:var(--faint);margin-bottom:22px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--red)}

.svc-hero{background:var(--bg-soft);padding:34px 0 46px;border-bottom:1px solid var(--line)}
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.svc-hero-ref{display:inline-block;font-family:var(--fd);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  border:1px solid rgba(162,27,41,.3);border-radius:999px;padding:4px 12px;margin-bottom:16px}
.svc-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;margin-bottom:14px}
.svc-hero p{font-size:1.02rem;line-height:1.7;color:var(--body);max-width:58ch}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.svc-hero-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(22,31,56,.14)}
.svc-hero-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-deep) 85%)}
.svc-hero-media img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}

/* --- hover-to-play clip --- */
/* The video sits over the still and fades in. The still stays underneath
   the whole time, so a slow connection or a blocked play() leaves a
   finished-looking hero rather than a black rectangle. */
.svc-hero-clip{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none}
.svc-hero-media.playing .svc-hero-clip{opacity:1}
.svc-hero-media.has-clip{cursor:pointer}
.svc-hero-media.has-clip img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.svc-hero-media.has-clip:hover img{transform:scale(1.03)}

/* the cue, so nobody has to guess that hovering does something */
.svc-hero-cue{position:absolute;z-index:3;left:16px;bottom:16px;display:inline-flex;align-items:center;
  gap:8px;padding:7px 14px 7px 10px;border-radius:999px;
  background:rgba(14,22,38,.62);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--fd);font-weight:700;font-size:11.5px;letter-spacing:.04em;
  transition:opacity .3s ease,transform .3s ease}
.svc-hero-cue svg{width:15px;height:15px;color:var(--gold);flex:none}
.svc-hero-media.playing .svc-hero-cue{opacity:0;transform:translateY(6px)}

@media(hover:none),(pointer:coarse){.svc-hero-cue{display:none}}
@media(prefers-reduced-motion:reduce){
  .svc-hero-clip,.svc-hero-cue,.svc-hero-media.has-clip img{transition:none}
  .svc-hero-cue{display:none}
}

/* the three facts strip */
.svc-facts{background:var(--navy);color:#fff;padding:26px 0}
.svc-facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-facts-grid>div{padding-left:18px;border-left:2px solid rgba(197,149,69,.55)}
.svc-facts-grid span{display:block;font-family:var(--fd);font-weight:800;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.svc-facts-grid b{font-size:14.5px;font-weight:600;line-height:1.5;color:#EDEAE2}

.svc-page{display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:start}
.svc-h{font-size:1.3rem;margin:34px 0 14px}
.svc-list{list-style:none;display:grid;gap:2px}
.svc-list li{position:relative;padding:11px 0 11px 30px;font-size:14.5px;line-height:1.6;
  color:var(--body);border-bottom:1px solid var(--line)}
.svc-list li:last-child{border-bottom:none}
.svc-list li::before{content:"";position:absolute;left:4px;top:17px;width:6px;height:10px;
  border:solid var(--red);border-width:0 2px 2px 0;transform:rotate(45deg)}
.svc-page-side{position:sticky;top:96px;display:grid;gap:18px}

@media(max-width:980px){
  .svc-index{grid-template-columns:1fr}
  .svc-hero-grid,.svc-page{grid-template-columns:1fr;gap:28px}
  .svc-hero-media{max-width:420px}
  .svc-facts-grid{grid-template-columns:1fr;gap:16px}
  .svc-page-side{position:static}
}


/* ============================================================
   SERVICES INDEX — structured. A hero with the register number,
   a comparison matrix, then detailed panels.
   ============================================================ */
.svcx-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 80%);color:#fff;
  padding:74px 0 62px;position:relative;overflow:hidden}
.svcx-hero::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(197,149,69,.14),transparent 65%);top:-200px;right:-120px}
.svcx-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end;position:relative}
.svcx-hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.07;color:#fff}
.svcx-hero-side p{font-size:1rem;line-height:1.75;color:#C6CBD8;border-left:2px solid var(--gold);
  padding-left:20px}
.svcx-hero-facts{display:grid;grid-template-columns:repeat(3,auto);gap:30px;margin-top:28px;padding-left:22px}
.svcx-hero-facts b{display:block;font-family:var(--fd);font-weight:800;font-size:1.2rem;color:var(--gold)}
.svcx-hero-facts span{display:block;font-size:11px;color:#8E96A8;margin-top:3px;letter-spacing:.03em}

/* --- the matrix --- */
.svcx-matrix{border-top:2px solid var(--navy);overflow:visible}
.svcx-mrow{display:grid;grid-template-columns:1.35fr 1.5fr 1fr 1.2fr 44px;gap:22px;
  align-items:center;padding:20px 16px 20px 40px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;transition:background .2s ease}

/* --- the numbered marker --- */
/* It sits half outside the row's left edge, inside the wrap's own 24px
   padding, so it reads as hanging off the table without adding width to
   the page. */
.svcx-mnum{position:absolute;left:-17px;top:50%;z-index:2;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:2px solid var(--line);
  transform:translateY(-50%);
  transition:background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s ease}
.svcx-mnum i{font-family:var(--fd);font-style:normal;font-weight:800;font-size:12px;
  letter-spacing:.02em;color:var(--navy);transition:color .3s ease}
/* the halo, which only exists while the row is hovered */
.svcx-mnum::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--gold);opacity:0;transform:scale(.75);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}

@media(prefers-reduced-motion:no-preference){
  a.svcx-mrow:hover .svcx-mnum{background:var(--red);border-color:var(--red);
    transform:translateY(-50%) scale(1.14);
    box-shadow:0 10px 22px rgba(162,27,41,.32)}
  a.svcx-mrow:hover .svcx-mnum i{color:#fff}
  a.svcx-mrow:hover .svcx-mnum::after{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  a.svcx-mrow:hover .svcx-mnum{background:var(--red);border-color:var(--red)}
  a.svcx-mrow:hover .svcx-mnum i{color:#fff}
}
.svcx-mhead{padding:12px 16px 12px 40px;border-bottom:1px solid var(--line)}
.svcx-mhead span{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
a.svcx-mrow:hover{background:var(--bg-soft);text-decoration:none}
a.svcx-mrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transition:transform .25s ease}
a.svcx-mrow:hover::before{transform:scaleY(1)}
.svcx-ref{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-style:normal;
  font-size:10.5px;letter-spacing:.08em;color:var(--gold);margin-bottom:3px}
.svcx-mrow b{font-family:var(--fd);font-size:15px;line-height:1.35}
.svcx-mrow span[role=cell]{font-size:13.5px;line-height:1.55;color:var(--body)}
.svcx-go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--line);color:var(--red);transition:.25s}
.svcx-go svg{width:15px;height:15px}
a.svcx-mrow:hover .svcx-go{background:var(--red);border-color:var(--red);color:#fff;transform:translateX(3px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- detailed cards: media rail, route, checks panel --- */
/* Three zones across rather than two. It fits the same information in
   less height, and it removes the alternating left/right flip, which
   only ever worked because there were exactly two columns to swap. */
.svcx-card{position:relative;display:grid;grid-template-columns:210px 1fr 330px;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  margin-bottom:22px;box-shadow:0 4px 16px rgba(22,31,56,.06);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.svcx-card::before{content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.svcx-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(162,27,41,.14);
  border-color:transparent}
.svcx-card:hover::before{transform:scaleX(1)}

/* media rail */
.svcx-card-media{position:relative;display:block;overflow:hidden;line-height:0;min-height:250px}
.svcx-card-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 88%)}
.svcx-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.svcx-card:hover .svcx-card-media img{transform:scale(1.05)}
.svcx-card-n{position:absolute;z-index:2;left:20px;top:16px;font-family:var(--fd);font-weight:800;
  font-size:2.1rem;line-height:1;color:rgba(255,255,255,.22);letter-spacing:-.03em;
  transition:color .35s ease}
.svcx-card:hover .svcx-card-n{color:rgba(197,149,69,.7)}

/* the route */
.svcx-card-main{padding:30px 32px;display:flex;flex-direction:column;align-items:flex-start}
.svcx-card-ref{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px}
.svcx-card-main h3{font-size:1.32rem;margin-bottom:10px;transition:color .3s ease}
.svcx-card:hover .svcx-card-main h3{color:var(--red)}
.svcx-card-main>p{font-size:14px;line-height:1.7;color:var(--body);margin-bottom:18px}

/* who it is for / timeline, as a definition list */
.svcx-card-facts{display:grid;gap:12px;margin-bottom:22px;width:100%}
.svcx-card-facts div{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:baseline}
.svcx-card-facts dt{font-family:var(--fd);font-weight:800;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.svcx-card-facts dd{font-size:13.5px;line-height:1.55;color:var(--ink);font-weight:600}
.svcx-card-main .btn-pill{margin-top:auto}

/* checks panel */
.svcx-card-side{padding:30px 28px;background:var(--bg-soft);border-left:1px solid var(--line);
  display:flex;flex-direction:column}
.svcx-card-lbl{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.svcx-card-fee{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--muted)}

/* --- assurance strip --- */
.svcx-assure{background:var(--navy);color:#fff;padding:34px 0}
.svcx-assure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.svcx-assure-grid>div{padding-left:18px;border-left:2px solid rgba(197,149,69,.55)}
.svcx-assure-grid b{display:block;font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--gold)}
.svcx-assure-grid span{display:block;font-size:12.5px;color:#B9C0CE;margin-top:4px;line-height:1.5}

@media(max-width:1080px){
  /* two zones: media across the top, then route and checks side by side */
  .svcx-card{grid-template-columns:1fr 1fr}
  .svcx-card-media{grid-column:1 / -1;min-height:190px}
  .svcx-card-n{font-size:1.8rem}
}
@media(max-width:760px){
  .svcx-card{grid-template-columns:1fr}
  .svcx-card-side{border-left:0;border-top:1px solid var(--line)}
  .svcx-card-main,.svcx-card-side{padding:24px 22px}
  .svcx-card-facts div{grid-template-columns:1fr;gap:2px}
}
@media(max-width:900px){
  .svcx-hero-grid{grid-template-columns:1fr;gap:26px}
  .svcx-hero-facts{gap:20px;padding-left:18px}
  .svcx-assure-grid{grid-template-columns:1fr 1fr;gap:18px}
  /* the matrix becomes stacked records, each cell labelled */
  .svcx-mhead{display:none}
  .svcx-mrow{grid-template-columns:1fr;gap:8px;padding:20px 16px 20px 34px}
  .svcx-mnum{left:-14px;width:30px;height:30px}
  .svcx-mnum i{font-size:11px}
  .svcx-mrow span[role=cell][data-label]::before{content:attr(data-label) " · ";
    font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
  .svcx-go{display:none}
}


/* ============================================================
   WHY US — line icons that draw themselves in
   ============================================================ */
.why-grid li.why-card{position:relative;overflow:hidden;align-items:flex-start;
  padding:24px 24px 24px 22px;border-radius:16px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.why-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(162,27,41,.13);
  border-color:transparent}
.why-card:hover::before{transform:scaleX(1)}

/* the icon tile */
.why-ico{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;
  color:var(--navy);transition:color .35s ease}
.why-ico::after{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(145deg,rgba(197,149,69,.16),rgba(162,27,41,.08));
  opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s ease}
.why-card:hover .why-ico{color:var(--red)}
.why-card:hover .why-ico::after{opacity:1;transform:scale(1)}

.why-draw{position:relative;z-index:1;width:26px;height:26px}
.why-ring{position:absolute;inset:0;width:100%;height:100%;color:var(--line)}

/* --- the draw itself ---
   pathLength="1" normalises every path to a length of 1, so one rule
   animates all of them regardless of their real geometry. Without it
   each icon would need its own dasharray measured by hand. */
@media(prefers-reduced-motion:no-preference){
  .why-draw path,.why-draw circle,.why-ring rect{
    stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.15s cubic-bezier(.5,0,.2,1)}
  .why-card.in .why-draw path,
  .why-card.in .why-draw circle,
  .why-card.in .why-ring rect{stroke-dashoffset:0}

  /* the frame draws first, then the icon inside it */
  .why-card.in .why-ring rect{transition-duration:.9s}
  .why-card.in .why-draw *{transition-delay:.22s}
  /* second stroke of each icon trails the first, so it reads as drawn
     rather than everything appearing at once */
  .why-card.in .why-draw *:nth-child(2){transition-delay:.36s}
  .why-card.in .why-draw *:nth-child(3){transition-delay:.48s}
  .why-card.in .why-draw *:nth-child(4){transition-delay:.58s}
  .why-card.in .why-draw *:nth-child(5){transition-delay:.66s}

  /* cards land left to right, then top to bottom */
  .why-grid li:nth-child(2){transition-delay:.09s}
  .why-grid li:nth-child(3){transition-delay:.18s}
  .why-grid li:nth-child(4){transition-delay:.27s}
}

@media(max-width:640px){.why-ico{width:44px;height:44px}.why-draw{width:22px;height:22px}}


/* ============================================================
   WHY US — cards left, a rotating illustration right
   ============================================================ */
.why-split{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center}
.why-grid.checks{grid-template-columns:1fr 1fr;margin-top:0}

/* --- the stage --- */
.why-stage{position:relative;aspect-ratio:320/244;width:100%}
.why-scene{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.97);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.why-scene.on{opacity:1;transform:none}
.why-scene svg{width:100%;height:100%;display:block}

/* three stroke roles, so each drawing reads as one thing */
.why-scene .s-soft{fill:rgba(197,149,69,.10);stroke:none}
.why-scene .s-l{stroke:var(--navy);stroke-width:2.2}
.why-scene .s-a{stroke:var(--gold);stroke-width:2.4}
.why-scene .s-r{stroke:var(--red);stroke-width:2.6}

/* --- the active card --- */
.why-card{cursor:default}
.why-card.active{border-color:transparent;transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(162,27,41,.13)}
.why-card.active::before{transform:scaleX(1)}
.why-card.active .why-ico{color:var(--red)}
.why-card.active .why-ico::after{opacity:1;transform:scale(1)}

/* a bar along the bottom that fills across the three seconds the card holds */
.why-card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--red),var(--gold))}
@media(prefers-reduced-motion:no-preference){
  .why-card.active::after{animation:whyhold 3s linear forwards}
}
@keyframes whyhold{from{width:0}to{width:100%}}

@media(prefers-reduced-motion:no-preference){
  /* Each scene draws itself when it becomes the active one. Only outlined
     shapes take part — .s-soft and .s-fill are the tinted backgrounds and
     solid shapes, which should simply appear with the scene. */
  .why-scene path,.why-scene circle,.why-scene rect{
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .95s ease}
  .why-scene .s-soft,.why-scene .s-fill{stroke-dasharray:none;stroke-dashoffset:0}
  .why-scene.on .s-seq{stroke-dasharray:1}
  .why-scene.on path,.why-scene.on circle,.why-scene.on rect{stroke-dashoffset:0}
  /* the fills fade up under the lines rather than snapping in */
  .why-scene .s-fill,.why-scene .s-soft{opacity:0;transition:opacity .5s ease}
  .why-scene.on .s-fill,.why-scene.on .s-soft{opacity:1}
  /* --- per-scene motion, only while that scene is the active one ---
     Everything below is scoped to .why-scene.on, so the three scenes
     waiting their turn are completely still. Animating all four at once
     would be four times the paint work for nothing anyone can see. */

  .why-scene.on .s-float{animation:whyfloat 4.5s ease-in-out infinite}

  /* 1 · the heart beats, and rings spread from the adviser as they listen */
  .why-scene.on .s-beat{animation:whybeat 2.4s ease-in-out infinite}
  .why-scene.on .s-ring{animation:whyring 3.6s ease-out infinite;opacity:0}
  .why-scene.on .s-ring2{animation-delay:1.8s}
  .why-scene.on .s-twinkle{animation:whytwinkle 3s ease-in-out infinite}
  .why-scene.on .s-t2{animation-delay:1.4s}

  /* 2 · the lens travels down the page, with light crossing the glass */
  .why-scene.on .s-sweep{animation:whysweep 6s ease-in-out infinite}
  .why-scene.on .s-glint{animation:whyglint 6s ease-in-out infinite}

  /* 3 · the three items are ticked in order, then it repeats */
  .why-scene.on .s-seq{animation:whyseq 4.5s ease-in-out infinite}
  .why-scene.on .s-seq2{animation-delay:.45s}
  .why-scene.on .s-seq3{animation-delay:.9s}
  .why-scene.on .s-shine{animation:whyshine 5s ease-in-out infinite}

  /* 4 · the route flows and a marker travels it */
  .why-scene.on .s-flow{stroke-dasharray:8 18;animation:whyflow 2.6s linear infinite}
  .why-scene.on .s-travel{
    offset-path:path("M38 196c40 0 44-40 82-40s44-42 82-42 44-30 78-32");
    offset-rotate:0deg;animation:whytravel 5.5s ease-in-out infinite}
  .why-scene.on .s-wave{animation:whywave 3.4s ease-in-out infinite}
}

/* transform-box keeps SVG transforms centred on the shape rather than the
   whole 320x244 canvas, which is what makes a scale or skew look right */
.s-float,.s-beat,.s-sweep,.s-wave,.s-ring{transform-box:fill-box;transform-origin:center}
/* the flow and the marker exist only as motion — static, they add nothing */
.s-flow{stroke-dasharray:0 9999}
.s-travel{opacity:0}

@keyframes whyfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes whybeat{0%,100%{transform:scale(1)}18%{transform:scale(1.16)}34%{transform:scale(1)}52%{transform:scale(1.1)}}
@keyframes whyring{0%{transform:scale(.62);opacity:.75}70%{opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes whytwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
@keyframes whysweep{0%,100%{transform:translate(0,0)}50%{transform:translate(-46px,-40px)}}
@keyframes whyglint{0%,42%{transform:translateX(-90px) rotate(22deg);opacity:0}
  55%{opacity:.55}70%,100%{transform:translateX(110px) rotate(22deg);opacity:0}}
@keyframes whyseq{0%{stroke-dashoffset:1}14%,74%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1}}
@keyframes whyshine{0%,50%{transform:translateX(-120px) rotate(18deg);opacity:0}
  62%{opacity:.5}80%,100%{transform:translateX(120px) rotate(18deg);opacity:0}}
@keyframes whyflow{to{stroke-dashoffset:-52}}
@keyframes whytravel{0%{offset-distance:0%;opacity:0}
  8%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes whywave{0%,100%{transform:skewY(0)}35%{transform:skewY(-3.5deg)}70%{transform:skewY(2.5deg)}}

.s-float{transform-box:fill-box;transform-origin:center}

@media(max-width:1080px){
  .why-split{grid-template-columns:1fr;gap:30px}
  .why-stage{max-width:380px;margin:0 auto;order:-1}
}
@media(max-width:640px){.why-grid.checks{grid-template-columns:1fr}}


@media(max-width:1080px){
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .fb{grid-column:1 / -1}
  .fcomply{grid-template-columns:1fr;gap:16px}
  .fcomply-mark{padding-right:0;padding-bottom:14px;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr;gap:28px}
  /* stacked and centred — a three-column balance means nothing in one column */
  .fend{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
  .fend-pad{display:none}
}


/* ---------- social buttons ---------- */
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.soc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#D7D2C4;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.soc svg{width:17px;height:17px}
.soc:hover{transform:translateY(-3px);color:#fff;border-color:transparent}
/* each platform lights up in its own colour on hover — recognisable at a
   glance, and it stops six identical grey circles reading as decoration */
.soc-linkedin:hover{background:#0A66C2}
.soc-facebook:hover{background:#1877F2}
.soc-instagram:hover{background:linear-gradient(45deg,#F09433,#DC2743 45%,#BC1888)}
.soc-youtube:hover{background:#FF0000}
.soc-x:hover{background:#000}
.soc-tiktok:hover{background:#010101;box-shadow:2px 0 0 #25F4EE inset,-2px 0 0 #FE2C55 inset}
@media(prefers-reduced-motion:reduce){.soc{transition:background .2s ease,color .2s ease}
  .soc:hover{transform:none}}


/* --- buttons on the crimson band --- */
/* .btn-r is crimson, which is now the band itself. The primary action
   inverts to white with crimson text so it still reads as the loudest
   thing in the panel. */
.cta-band .btn-r{background:#fff;color:var(--red);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.cta-band .btn-r:hover{background:var(--cream);color:var(--red-dark);
  transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.cta-band .btn-ghostw{border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghostw svg{color:var(--cream)}
.cta-band .btn-ghostw:hover{background:#fff;color:var(--red);border-color:#fff}
.cta-band .btn-ghostw:hover svg{color:var(--red)}


/* ---------- language auto-detection notice ---------- */
.langnote{background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:13px}
.langnote .wrap{display:flex;align-items:center;gap:14px;padding-top:9px;padding-bottom:9px}
.langnote span{color:var(--body)}
.langnote-btn{font-weight:700;color:var(--red);text-decoration:none;
  border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.langnote-btn:hover{border-bottom-color:var(--red)}
.langnote-x{margin-left:auto;background:none;border:0;cursor:pointer;font-size:20px;
  line-height:1;color:var(--muted);padding:0 4px}
.langnote-x:hover{color:var(--red)}
@media(max-width:620px){.langnote .wrap{flex-wrap:wrap;gap:8px}}


/* ============================================================
   TIMED LEAD POPUP
   ============================================================ */
.lp{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.lp[hidden]{display:none}
.lp-veil{position:absolute;inset:0;background:rgba(14,22,38,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
.lp-box{position:relative;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:18px;padding:26px 28px 18px;
  box-shadow:0 30px 70px rgba(14,22,38,.35);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
/* the tricolour along the top, as on every other panel */
.lp-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--navy) 0 34%,var(--gold) 34% 66%,var(--red) 66%)}
.lp.on .lp-veil{opacity:1}
.lp.on .lp-box{opacity:1;transform:none}

/* Close: turns a quarter turn as it fills, so the cross visibly becomes
   an action rather than just changing colour. */
.lp-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:0;background:var(--bg-soft);color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .25s ease}
.lp-x:hover,.lp-x:focus-visible{background:var(--red);color:#fff;
  transform:rotate(90deg) scale(1.1);box-shadow:0 6px 16px rgba(162,27,41,.32)}
.lp-x:active{transform:rotate(90deg) scale(.94)}
.lp-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .lp-x{transition:background .2s ease,color .2s ease}
  .lp-x:hover,.lp-x:focus-visible{transform:none}
}

.lp-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:9px}
.lp-eyebrow b{font-family:var(--fd);font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}
.lp-eyebrow i{color:var(--gold);font-style:normal}
.lp-box h2{font-size:1.24rem;line-height:1.25;margin-bottom:7px}
.lp-sub{font-size:13px;line-height:1.6;color:var(--body);margin-bottom:15px}

.lp-form{display:grid;gap:8px}
.lp-form input,.lp-form select{width:100%;background:#fff;border:1.5px solid var(--line);
  border-radius:10px;padding:10px 12px;font-family:var(--fb);font-size:13.5px;color:var(--ink)}
.lp-form input:focus,.lp-form select:focus{outline:2px solid var(--gold);outline-offset:0;
  border-color:transparent}
.lp-phone{display:grid;grid-template-columns:104px 1fr;gap:8px}
.lp-phone select{padding-left:11px;padding-right:6px}
/* the honeypot: present for a bot, invisible and unreachable for a person */
.lp-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

.lp-go{width:100%;justify-content:center;margin-top:3px;padding:12px 18px;font-size:14px;
  border-radius:10px;background:linear-gradient(120deg,var(--red),#C0392B);color:#fff;
  box-shadow:0 10px 24px rgba(162,27,41,.28)}
.lp-go:hover{background:linear-gradient(120deg,var(--red-dark),var(--red));color:#fff;
  transform:translateY(-2px);box-shadow:0 16px 32px rgba(162,27,41,.34)}

.lp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 9px;margin-top:13px;
  padding-top:11px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.lp-trust i{color:var(--line);font-style:normal}
.lp-no{display:block;width:100%;margin-top:8px;background:none;border:0;cursor:pointer;
  font-family:var(--fb);font-size:12px;color:var(--faint);text-decoration:underline;
  text-underline-offset:3px}
.lp-no:hover{color:var(--red)}

/* the confirmation strip after a submission */
.leadflash{font-size:13.5px;padding:11px 0;background:#E3F2EA;color:#0E7A52;
  border-bottom:1px solid rgba(14,122,82,.2)}
.leadflash.bad{background:#FBEDEE;color:#7E1420;border-bottom-color:rgba(126,20,32,.2)}

@media(prefers-reduced-motion:reduce){.lp-veil,.lp-box{transition:none}}
@media(max-width:520px){.lp-box{padding:22px 18px 16px}.lp-box h2{font-size:1.14rem}}
/* short laptop screens: trim further rather than scroll inside the box */
@media(max-height:760px){
  .lp-box{padding:20px 26px 14px}
  .lp-box h2{font-size:1.14rem}
  .lp-sub{margin-bottom:12px;font-size:12.5px}
  .lp-form input,.lp-form select{padding:9px 12px}
  .lp-trust{margin-top:10px;padding-top:9px}
}

/* =====================================================================
   MOBILE FIXES — Aug 2026
   Findings from admin/mobile-audit.php at 320–430px. Appended rather than
   woven in, so it is obvious what changed and easy to revert per item.
   ===================================================================== */

/* --- 1. Top bar --------------------------------------------------------
   The bar had a fixed 30px height with space-between. At phone widths the
   content is wider than the screen, so the phone number wrapped mid-digit
   ("77-" / "1935-"), the IAA line clipped — and the row itself was the
   thing pushing the whole page sideways, which is why the Menu button was
   half off-screen at 375px. Let it wrap to a second centred line instead,
   and keep each item unbreakable so numbers never split. */
@media(max-width:700px){
  .topbar .wrap{height:auto;min-height:30px;flex-wrap:wrap;justify-content:center;
                text-align:center;gap:1px 14px;padding-top:4px;padding-bottom:4px}
  .topbar b,.topbar a{white-space:nowrap}
  .topbar .tb-right{flex-wrap:wrap;justify-content:center;gap:1px 12px}
  .topbar .tb-right .dot{display:none}
}

/* --- 2. Header brand ---------------------------------------------------
   A wide logo lockup is capped at 240px under 760px, but 240px of logo
   plus the Menu button plus gaps plus 48px of page padding is 378px —
   wider than a Galaxy S23 (360) or a folded Fold (320). Cap it against
   the viewport instead of a fixed number. */
@media(max-width:480px){
  .nav{gap:12px}
  .logo-wide{max-width:min(210px,52vw)}
  .logo img{max-width:min(170px,48vw)}
}

/* --- 3. News ticker ----------------------------------------------------
   Headlines were cut mid-word with no way to read the rest. The strip now
   swipes horizontally on touch, with the scrollbar hidden and a fade on
   the right edge so the cut reads as "more this way" instead of broken. */
@media(max-width:760px){
  .ticker .wrap{position:relative}
  .ticker-items{overflow-x:auto;-webkit-overflow-scrolling:touch;
                scrollbar-width:none;padding-right:30px}
  .ticker-items::-webkit-scrollbar{display:none}
  .ticker .wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:30px;
    background:linear-gradient(90deg,rgba(248,245,239,0),var(--bg-soft));pointer-events:none}
}

/* --- 4. Floating buttons -----------------------------------------------
   Was: lift the WhatsApp button clear of the booking launcher, which sat
   on top of it. The WhatsApp float has since been removed entirely (see
   includes/footer.php), so the collision is gone and these rules with it.
   The .wa styles higher up in this file are left in place — the class is
   no longer rendered, but nothing costs anything by staying, and it makes
   restoring the button a one-line change in the footer. */

/* --- 5. Safety net ------------------------------------------------------
   Any future element that grows past the viewport will no longer drag the
   whole page sideways for visitors. This MASKS overflow, it does not fix
   it — the audit tool still measures the true content width and its badge
   still goes red, so problems stay visible to us while staying invisible
   to visitors. Do not treat a green feel in the browser as a pass; trust
   the badge. */
@media(max-width:920px){
  html,body{overflow-x:clip}
}


/* ---- IAA badge as a verification link (Aug 2026) ---------------------------
   The topbar badge used to be plain text. It is now an anchor, so it needs
   to read as clickable without shouting: inherit the topbar's colour, carry
   a faint underline that firms up on hover. A coloured link here would pull
   attention away from the phone number and the language switcher beside it. */
.topbar .tb-iaa{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;transition:border-color .18s}
.topbar .tb-iaa:hover{border-bottom-color:currentColor}
.topbar .tb-iaa b{font-weight:800}

/* ---- "Sample cases" notice under the testimonials heading -----------------
   Muted and small on purpose. It has to be legible and honest, not a banner
   that undercuts the section it introduces. */
.q-note{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--muted);
  font-style:italic;max-width:56ch;margin-left:auto;margin-right:auto}

/* =============================================================================
   TWO-COLUMN SECTION RHYTHM (Aug 2026)
   =============================================================================
   The homepage ran four consecutive "centred heading over a grid" sections —
   services, steps, testimonials, news, FAQ. Individually each is fine; stacked,
   they read as one long undifferentiated scroll and a reader stops registering
   where one section ends and the next begins.

   Services and FAQ move to a heading column on the left with the content on
   the right. That breaks the run at both ends without touching the sections
   between, and it suits both: service cards read better in a 2-up grid than
   3-up, and an accordion is easier to scan narrow than full-width.

   The heading column is sticky on tall viewports, so the section title stays
   in view while the cards or questions scroll past it. Both collapse to a
   single stacked column below 900px, where two columns would leave nothing
   room to be legible in.
   ============================================================================= */

.svc-2col-grid,
.faq-2col-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}

.svc-2col-head,
.faq-2col-head{position:sticky;top:96px}
.svc-2col-head h2,
.faq-2col-head h2{margin-top:6px}
.svc-2col-head p,
.faq-2col-head p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.72}
.svc-2col-head .btn,
.faq-2col-head .btn{margin-top:22px}

/* Cards drop from 3-up to 2-up: the column is now ~740px, and three cards in
   that width would put the summaries at four words a line. */
.svc-2col .cards{grid-template-columns:repeat(2,1fr)}

/* The accordion loses its centring max-width — the column already constrains it. */
.faq-2col .faq{max-width:none;margin:0}

@media(max-width:1000px){
  .svc-2col-grid,.faq-2col-grid{grid-template-columns:290px 1fr;gap:36px}
}
@media(max-width:900px){
  /* Sticky is removed with the column, not just overridden: a sticky element
     in a single-column flow pins the heading over the content behind it. */
  .svc-2col-grid,.faq-2col-grid{grid-template-columns:1fr;gap:32px}
  .svc-2col-head,.faq-2col-head{position:static;top:auto}
}
@media(max-width:620px){
  .svc-2col .cards{grid-template-columns:1fr}
}

/* ---- News: heading column left, cards right (Aug 2026) --------------------
   Third and last of the two-column conversions, matching services and FAQ.
   The subtitle is borrowed from the blog page's own intro rather than a new
   string, so it is already translated in all four languages.

   Cards go 2-up here rather than the 3-up of the full-width version: the
   right column is ~740px, and three cards in that space leave the excerpts
   at three words a line. */
.news-2col-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.news-2col-head{position:sticky;top:96px}
.news-2col-head h2{margin-top:6px}
.news-2col-head p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.72}
.news-2col-head .btn{margin-top:22px}
.news-2col .news-grid{grid-template-columns:repeat(2,1fr)}
.news-2col .news-grid.one{grid-template-columns:1fr;max-width:420px}

@media(max-width:1000px){
  .news-2col-grid{grid-template-columns:290px 1fr;gap:36px}
}
@media(max-width:900px){
  .news-2col-grid{grid-template-columns:1fr;gap:32px}
  .news-2col-head{position:static;top:auto}
}
@media(max-width:620px){
  .news-2col .news-grid{grid-template-columns:1fr}
}