/* ============================================================
   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}
/* The fourth trust tile gained a Client Portal link (Egon, Home Page deck),
   replacing the portal reference that used to sit in the topbar. */
.trust .t .t-portal{display:inline-block;margin-top:6px;font-weight:800;font-size:12.5px;
  color:var(--red);text-decoration:none;border-bottom:1.5px solid transparent}
.trust .t .t-portal:hover{border-bottom-color:var(--red)}
/* TOPBAR ALIGNMENT, Sept 2026.
   What is left in this bar is the Client Portal and the language switcher.
   space-between was right when the bar also carried the IAA badge and the
   contact details on the left; with two items and nothing on the left it just
   pushed them to opposite ends of an empty bar. They sit together on the
   right now.
   This is the only rule that sets the wrap's display and alignment. An earlier
   version of this file added a second one above, which a later rule silently
   overrode — hence the bar never centring as intended. One rule, here. */
.topbar .wrap{display:flex;justify-content:flex-end;align-items:center;height:30px;gap:20px}
.topbar .tb-right-slim{display:flex;align-items:center;gap:20px}
/* a hairline between the portal and the languages, so the two groups read as
   two things rather than one run-on line */
.topbar .tb-portal{padding-right:20px;border-right:1px solid rgba(255,255,255,.18)}
@media(max-width:620px){
  .topbar .wrap{gap:12px}
  .topbar .tb-right-slim{gap:12px}
  .topbar .tb-portal{padding-right:12px}
}
.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}

/* ---------- 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)}
/* 'Book a Virtual Consultation' is 8 characters longer than the label it
   replaced (Sept 2026). Uppercase at 12px with letter-spacing, that is
   about 70px more button in a nav row that also gained two items. Between
   the mobile breakpoint and a comfortable laptop width the row is tight,
   so the button tightens rather than the links wrapping. Below 920px the
   whole nav collapses into the dropdown and none of this applies. */
.nav-cta{white-space:nowrap}
@media(min-width:1121px) and (max-width:1340px){
  .nav-cta{padding:9px 12px;letter-spacing:.01em;font-size:11.5px}
  nav ul{gap:14px}
}
.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}
/* NAV COLLAPSE MOVED 920px -> 1040px, Sept 2026.
   Egon's nav is Home / Visa Services / Administrative Services / About Us /
   FAQ, and the button now reads "Book a Virtual Consultation". In English that
   row measures about 909px against roughly 873px of available width at 921px,
   and Portuguese ("Serviços Administrativos") is longer still. Shrinking the
   text until it fits makes a nav nobody can read; collapsing to the menu
   button a little earlier costs a tablet user one tap.
   Raised again to 1120px when Blog joined the menu: six links plus the long
   button came to about 975px in Spanish against roughly 993px of row, and a
   layout that fits by eighteen pixels is one font-rendering difference away
   from wrapping on somebody's machine.
   ONLY the nav collapse moved. The other nine uses of 920px in this file are
   layout grids and are deliberately left alone. */
@media(max-width:1120px){
  .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: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 --- */

/* --- 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. */
/* the halo, which only exists while the row is hovered */
.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-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}
.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-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. */
/* That wrapping rule was written when this bar carried the IAA badge, the £50
   line, an email address and a phone number — five items that genuinely could
   not fit on one line at 375px. Two items fit, so the bar no longer needs to
   wrap or to centre what it wrapped. Kept only the no-break rule, which stops
   a phone number splitting across lines if either ever returns here. */
@media(max-width:700px){
  .topbar b,.topbar a{white-space:nowrap}
}

/* --- 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}
/* FAQ rail, rebuilt to Egon's slide (Sept 2026): logo lockup, heading,
   booking button. The emblem is the drawn SVG already used in the header, so
   the rail costs no extra request and stays sharp at any zoom. Centred on the
   rail at desktop; on narrow screens the rail stacks above the questions and
   the logo would waste a whole screen, so it is dropped there. */
.faq-rail-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
.faq-rail-word{display:block;text-align:center;line-height:1.1}
.faq-rail-word b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:1.72rem;letter-spacing:.06em;color:var(--navy)}
.faq-rail-word i{display:block;margin-top:3px;font-style:normal;font-weight:700;
  font-size:9.5px;letter-spacing:.2em;color:var(--red)}
.faq-rail-h{text-align:center;color:var(--red);font-size:1.12rem;line-height:1.35;margin:0 0 22px}
.faq-2col-head .btn-r{display:block;text-align:center}
/* "All questions" — the link from the short FAQ on the home page to the full
   page, added when Egon confirmed he wants the separate pages kept. Sits under
   the booking button, quieter than it, because booking is still the action we
   want. */
.faq-rail-all{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-weight:800;font-size:13.5px;color:var(--red);text-decoration:none;
  border-bottom:1.5px solid transparent}
.faq-rail-all:hover{border-bottom-color:var(--red)}
.faq-rail-all svg{width:16px;height:16px}
@media(min-width:921px){.faq-2col-head .faq-rail-all{display:flex;justify-content:center}}
@media(max-width:920px){
  .faq-rail-logo{display:none}
  .faq-rail-h{text-align:left;font-size:1.3rem}
  .faq-2col-head .btn-r{display:inline-block}
}
.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}
}

/* =====================================================================
   VISA SERVICES — Level 0 / Level 01 tiles  (Egon, Visa Services deck)

   Level 0: illustration + title.
   Level 01 on hover: the summary appears OVER the illustration, in the same
   box, and "Learn more" appears under the title — which is how Egon drew it.
   Both are reserved space rather than added space, so the tile never changes
   height and hovering one card cannot shove the other five down the page.
   Touch has no hover, so there the summary is shown from the start.
   ===================================================================== */
.svcx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.svcx-tile{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 6px 20px rgba(22,31,56,.06);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.svcx-tile:hover,.svcx-tile:focus-visible{transform:translateY(-3px);border-color:var(--navy);
  box-shadow:0 14px 34px rgba(22,31,56,.13)}
.svcx-tile-media{position:relative;display:block;height:186px;background:var(--navy);overflow:hidden}
.svcx-tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svcx-tile-ph{position:absolute;inset:0;display:grid;place-items:center;opacity:.5}

/* the Level 01 panel — same box as the illustration, so no reflow */
.svcx-tile-sum{position:absolute;inset:0;display:flex;align-items:center;
  padding:20px 22px;background:#fff;color:var(--body);
  font-size:14px;line-height:1.6;overflow:hidden;
  opacity:0;transition:opacity .28s ease}
.svcx-tile:hover .svcx-tile-sum,
.svcx-tile:focus-visible .svcx-tile-sum{opacity:1}

.svcx-tile-body{display:block;padding:18px 20px 16px}
.svcx-tile-title{display:block;font-weight:800;font-size:1.02rem;color:var(--ink);line-height:1.25}
/* height is reserved whether or not it is showing, so the card does not grow */
.svcx-tile-more{display:inline-flex;align-items:center;gap:6px;height:20px;margin-top:10px;
  font-weight:800;font-size:13px;color:var(--red);opacity:0;transition:opacity .28s ease}
.svcx-tile-more svg{width:16px;height:16px}
.svcx-tile:hover .svcx-tile-more,
.svcx-tile:focus-visible .svcx-tile-more{opacity:1}

@media(max-width:1040px){.svcx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcx-grid{grid-template-columns:1fr}}
/* No hover on touch: Level 01 is simply the resting state, tap opens Level 02. */
@media(hover:none){
  .svcx-tile-sum,.svcx-tile-more{opacity:1;transition:none}
  .svcx-tile:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .svcx-tile-sum,.svcx-tile-more{transition:none}
  .svcx-tile,.svcx-tile:hover{transform:none;transition:none}
}

/* =====================================================================
   ROUTE PAGE — sequenced reveal  (Egon, Visa Services deck, Level 02)
   His order: the facts strip, then the body, then the two lists, then the
   booking panel. He wrote "maybe after 3s (you decide the timer)", so the
   timer is ours: 3s per block would be twelve seconds before the booking
   panel exists, and people scroll long before that. 420ms reads as
   deliberate without ever making anyone wait for information.
   ===================================================================== */
.seq{opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease}
.seq.seq-in{opacity:1;transform:none}
.seq-1{transition-delay:0s}
.seq-2{transition-delay:.42s}
.seq-3{transition-delay:.84s}
.seq-4{transition-delay:1.26s}
@media(prefers-reduced-motion:reduce){
  .seq{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   BLOG, NEWS & ARTICLES  (Egon's deck + his band mockup, Sept 2026)

   Dark band: emblem, heading, and a right-hand column holding the booking
   button above the four content options, divided by a hairline. Nothing
   below the band until an option is chosen.

   Flat --navy, not a gradient: his note on this slide was that the site must
   be dark blue rather than black, and the dark end of a gradient is what read
   as black.
   ===================================================================== */
.blognews{padding-top:0}
.bn-band{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) 300px;
  grid-template-areas:"logo head pick";
  gap:34px;align-items:center;
  background:var(--navy);border-radius:20px;
  padding:40px 44px;overflow:hidden;isolation:isolate}

/* watermark — behind everything, bottom-left, barely there */
.bn-sky{position:absolute;left:-30px;bottom:-14px;width:min(58%,720px);z-index:-1;
  opacity:.17;pointer-events:none}
.bn-sky .skyline{margin:0}
.bn-sky svg{width:100%;height:auto;display:block}
/* The flight path, plane, pin and ground line belong to the standalone
   illustration. In a band they read as stray marks — the ground line in
   particular draws a hard rule across the width — so only the buildings
   are kept. */
.bn-sky .sk-path,.bn-sky .sk-plane,.bn-sky .sk-pin,.bn-sky .sk-line{display:none}
.bn-sky svg *{stroke:#93A7CC;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.bn-logo{grid-area:logo;display:grid;place-items:center}
.bn-head{grid-area:head;min-width:0}
.bn-kicker{display:flex;align-items:center;gap:14px;font-weight:800;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#C59545);margin-bottom:14px}
.bn-kicker::before{content:"";width:34px;height:2px;background:var(--gold,#C59545);flex:none}
.bn-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;margin:0;letter-spacing:-.02em}
.bn-band p{color:#AEB9CE;font-size:15.5px;line-height:1.62;margin:16px 0 0;max-width:48ch}

/* right column: button on top, options under it, hairline to the left */
.bn-pick{grid-area:pick;display:flex;flex-direction:column;gap:4px;
  padding-left:34px;border-left:1px solid rgba(255,255,255,.16);align-self:stretch;
  justify-content:center}
/* One button in this column now, so it does not need to stretch the full
   height of the band — the divider still does that. */
.bn-cta{margin-bottom:0}

.bn-cta{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  background:var(--red);color:#fff;text-decoration:none;
  border-radius:12px;padding:14px 18px;font-weight:800;font-size:15.5px;
  box-shadow:0 10px 26px -10px rgba(162,27,41,.9);transition:background .18s,transform .18s}
.bn-cta:hover{background:var(--red-dark,#8C1723);transform:translateY(-1px)}
.bn-cta svg{width:22px;height:22px;flex:none}

/* The posts sit under the band and are simply there. The filters and the
   script that hid them were removed in Sept 2026 — with three articles a
   filter showed one post each, which made a small blog look smaller. */
.bn-results{margin-top:30px}
.bn-none{margin:26px 0 0;color:var(--faint);font-size:15px}
.bn-all{margin-top:26px}

@media(max-width:1040px){
  .bn-band{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"logo head" "pick pick";gap:26px;padding:32px 28px}
  .bn-pick{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.16);
    padding-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .bn-cta{grid-column:1/-1;margin-bottom:6px;justify-content:center}
}
@media(max-width:620px){
  .bn-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "head" "pick";
    padding:26px 22px;text-align:left}
  .bn-logo{justify-self:start}
  .bn-pick{grid-template-columns:minmax(0,1fr)}
  .bn-sky{width:130%;left:-15%;opacity:.12}
}