/* ============================================================
   IT BIZ SUPPORT — design tokens
   ============================================================ */
:root{
  --navy:#08183A;
  --navy-2:#0F2B5E;
  --blue:#1466F5;
  --blue-dark:#0D4FCB;
  --blue-tint:#EAF1FE;
  --cyan:#22C7F0;
  --ink:#0C1830;
  --body:#4E5C75;
  --line:#E3E9F2;
  --surface:#F5F8FD;
  --white:#fff;
  --ok:#15A66B;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(8,24,58,.06), 0 2px 8px rgba(8,24,58,.05);
  --shadow:0 4px 12px rgba(8,24,58,.07), 0 18px 40px -18px rgba(8,24,58,.22);
  --shadow-lg:0 8px 24px rgba(8,24,58,.10), 0 40px 80px -32px rgba(8,24,58,.32);

  --maxw:1180px;
  --pad:clamp(20px, 5vw, 48px);
  --sect:clamp(64px, 9vw, 116px);

  --font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; font-family:var(--font-body); color:var(--body);
  font-size:17px; line-height:1.65; background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--font); color:var(--ink); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.2rem, 5.2vw, 3.7rem); font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(1.75rem, 3.6vw, 2.6rem); font-weight:800; letter-spacing:-.03em}
h3{font-size:1.16rem; font-weight:700; letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--tint{background:var(--surface); border-block:1px solid var(--line)}
.center{text-align:center}

:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px}

.skip{position:absolute; left:-9999px; top:0; background:var(--white); color:var(--ink);
  padding:12px 20px; z-index:200; border-radius:0 0 var(--r-sm) 0; font-weight:600}
.skip:focus{left:0}

/* ---------- eyebrow / heads ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font);
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#0F55D6; background:var(--blue-tint); padding:7px 14px; border-radius:var(--r-pill);
  margin-bottom:18px;
}
.section--dark .eyebrow{color:var(--cyan); background:rgba(34,199,240,.12)}
.head{max-width:660px; margin-bottom:52px}
.head.center{margin-inline:auto}
.head p{font-size:1.09rem; margin-bottom:0}
.lead{font-size:1.14rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:15px 28px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px -6px rgba(20,102,245,.7)}
.btn--primary:hover{background:var(--blue-dark); box-shadow:0 12px 26px -8px rgba(20,102,245,.75)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint)}
.btn--onDark{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.28)}
.btn--onDark:hover{background:rgba(255,255,255,.18); color:#fff}
.btn--white{background:#fff; color:var(--navy)}
.btn--white:hover{background:#EAF1FE; color:var(--navy-2)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.header.is-stuck{border-bottom-color:var(--line); box-shadow:0 2px 18px rgba(8,24,58,.06)}
.nav{display:flex; align-items:center; gap:28px; min-height:76px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto;
  text-decoration:none; flex:none}  /* flex:none so a crowded nav row
   never shrinks the logo — it collapsed to 4px without this */
.brand:hover{text-decoration:none}
.brand img{height:42px; width:auto; flex:none}  /* flex:none — without it the
   logo is shrunk by the flex row when the nav gets crowded */
.brand__mark{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:linear-gradient(140deg, var(--blue), var(--navy-2));
  display:grid; place-items:center; color:#fff; font-family:var(--font);
  font-weight:800; font-size:1rem; letter-spacing:-.03em;
}
.brand__txt{display:flex; flex-direction:column; line-height:1.05}
.brand__name{font-family:var(--font); font-weight:800; font-size:1.06rem; color:var(--ink); letter-spacing:-.03em; white-space:nowrap}
.brand__sub{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--body); font-weight:600}

.nav__links{display:flex; align-items:center; gap:4px}
.nav__links a{
  font-family:var(--font); font-weight:600; font-size:.95rem; color:var(--ink); white-space:nowrap;
  padding:9px 13px; border-radius:var(--r-sm); transition:background .18s, color .18s;
}
.nav__links a:hover{background:var(--blue-tint); color:var(--blue); text-decoration:none}
.nav__cta{display:flex; align-items:center; gap:14px}
.nav__tel{font-family:var(--font); font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px; font-size:.95rem; white-space:nowrap}
.nav__tel:hover{color:var(--blue); text-decoration:none}
.nav .btn{padding:12px 22px; font-size:.95rem}

.burger{display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-sm); cursor:pointer; padding:0; place-items:center}
.burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.22s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:2px;
  background:var(--ink); border-radius:2px; transition:.22s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* The desktop nav row hands over to the burger at 1100px, not 960px. The
   logo is pinned (flex:none) so it can no longer be silently squashed to
   make room, which means the row genuinely needs the width. */
@media (max-width:1140px){
  .nav__links, .nav__cta .nav__tel{display:none}
  .burger{display:grid}
  .nav{gap:12px; min-height:68px}
  .nav__cta .btn{display:none}
}
.mobile{display:none; border-top:1px solid var(--line); background:#fff; padding:14px var(--pad) 26px}
.mobile.is-open{display:block}
.mobile a{display:block; font-family:var(--font); font-weight:600; color:var(--ink);
  padding:13px 4px; border-bottom:1px solid var(--line); font-size:1.02rem}
.mobile a:hover{color:var(--blue); text-decoration:none}
.mobile .btn{width:100%; margin-top:18px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden; color:#E7EDF8;
  background:
    radial-gradient(900px 520px at 82% 6%, rgba(34,199,240,.20), transparent 62%),
    radial-gradient(760px 520px at 8% 92%, rgba(20,102,245,.34), transparent 60%),
    linear-gradient(160deg, #08183A 0%, #0C2149 42%, #0F2B5E 100%);
  background-color:#08183A;
  padding-block:clamp(64px, 9vw, 116px) clamp(72px, 10vw, 128px);
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 60% 30%, #000 5%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 60% 30%, #000 5%, transparent 72%);
}
.hero .wrap{position:relative; z-index:2}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,72px); align-items:center}
.hero h1{color:#fff; margin-bottom:20px}
.hero h1 em{font-style:normal; background:linear-gradient(96deg, var(--cyan), #7FB0FF);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__lead{font-size:clamp(1.05rem,1.9vw,1.2rem); color:#B9C7DE; max-width:35ch; margin-bottom:32px}
.hero .eyebrow{color:var(--cyan); background:rgba(34,199,240,.13); border:1px solid rgba(34,199,240,.24)}
.hero__pulse{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(34,199,240,.6); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,199,240,0)} 100%{box-shadow:0 0 0 0 rgba(34,199,240,0)}}

.hero__ticks{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12)}
.hero__ticks li{display:flex; align-items:center; gap:9px; font-size:.94rem; color:#C6D3E8; font-weight:500}
.hero__ticks svg{flex:none; color:var(--cyan)}

/* hero card */
.card-float{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:26px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);
}
.card-float__top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12)}
.card-float__title{font-family:var(--font); font-weight:700; color:#fff; font-size:1rem}
.chip-live{display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#8DEFC4; background:rgba(21,166,107,.16);
  border:1px solid rgba(21,166,107,.3); padding:5px 11px; border-radius:var(--r-pill)}
.chip-live i{width:6px; height:6px; border-radius:50%; background:#3DDC97; animation:pulse 2.4s infinite}
.slarow{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0}
.slarow + .slarow{border-top:1px dashed rgba(255,255,255,.11)}
.slarow dt{font-size:.93rem; color:#B0C0D8}
.slarow dd{margin:0; font-family:var(--font); font-weight:800; font-size:1.28rem; color:#fff; letter-spacing:-.02em}
.slarow dd small{font-size:.7rem; font-weight:600; color:#94A7C4; letter-spacing:.06em; text-transform:uppercase; margin-left:3px}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:44px}
  .hero__lead{max-width:none}
}

/* ---------- logo strip ---------- */
.strip{background:var(--navy); padding:22px 0; border-top:1px solid rgba(255,255,255,.08)}
.strip__inner{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 40px}
.strip__label{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#7E92B4; font-weight:700; font-family:var(--font)}
.strip__items{display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center}
.strip__items span{font-family:var(--font); font-weight:700; color:#AFC0DA; font-size:.98rem; letter-spacing:-.01em; opacity:.9}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.stat{background:#fff; padding:32px 26px; text-align:center}
.stat b{display:block; font-family:var(--font); font-size:clamp(2rem,4vw,2.7rem); font-weight:800;
  color:var(--ink); letter-spacing:-.04em; line-height:1}
.stat span{display:block; margin-top:9px; font-size:.93rem; color:var(--body)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SERVICES
   ============================================================ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px 28px;
  position:relative; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc::before{content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#CFDCF0}
.svc:hover::before{transform:scaleX(1)}
.svc__ico{width:50px; height:50px; border-radius:14px; background:var(--blue-tint); color:var(--blue);
  display:grid; place-items:center; margin-bottom:20px; transition:background .22s, color .22s}
.svc:hover .svc__ico{background:var(--blue); color:#fff}
.svc h3{margin-bottom:9px}
.svc p{font-size:.97rem; margin-bottom:16px}
.svc ul li{position:relative; padding-left:21px; font-size:.9rem; color:var(--body); margin-bottom:6px}
.svc ul li::before{content:""; position:absolute; left:0; top:.58em; width:6px; height:6px;
  border-radius:50%; background:var(--cyan)}

/* ============================================================
   WHY / SPLIT
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.why{display:grid; gap:14px}
.why li{display:flex; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-sm)}
.why__ico{width:40px; height:40px; flex:none; border-radius:11px; background:var(--blue-tint);
  color:var(--blue); display:grid; place-items:center}
.why h3{font-size:1.03rem; margin-bottom:3px}
.why p{font-size:.94rem; margin:0}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative; padding-top:14px}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--font); font-weight:800; font-size:2.6rem; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.5px #C3D3EC; display:block; margin-bottom:10px; line-height:1;
}
.step h3{margin-bottom:7px}
.step p{font-size:.96rem; margin:0}

/* ============================================================
   DARK SECTION (compliance)
   ============================================================ */
.section--dark{
  background:
    radial-gradient(700px 420px at 88% 12%, rgba(34,199,240,.16), transparent 62%),
    linear-gradient(155deg, #08183A, #0F2B5E);
  color:#C0CEE4;
}
.section--dark h2, .section--dark h3{color:#fff}
.section--dark .head p{color:#B0C0D8}
.badges{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:820px){.badges{grid-template-columns:1fr}}
.badge{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r); padding:26px 24px}
.badge__ico{width:44px; height:44px; border-radius:12px; background:rgba(34,199,240,.14);
  color:var(--cyan); display:grid; place-items:center; margin-bottom:16px}
.badge p{font-size:.95rem; margin:0; color:#AFC0DA}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.tags{display:flex; flex-wrap:wrap; gap:11px}
.tag{background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 20px; font-family:var(--font); font-weight:600; font-size:.95rem; color:var(--ink);
  transition:border-color .2s, color .2s, background .2s}
.tag:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--font); font-weight:700; color:var(--ink); font-size:1.05rem; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--blue)}
.faq .faq__a{padding:0 44px 24px 0; font-size:1rem; margin:0}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,64px)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.info li{display:flex; gap:15px; margin-bottom:24px}
.info__ico{width:42px; height:42px; flex:none; border-radius:12px; background:rgba(34,199,240,.14);
  color:var(--cyan); display:grid; place-items:center}
.info h3{font-size:1rem; margin-bottom:3px}
.info p, .info a{margin:0; font-size:.98rem; color:#B0C0D8}
.info a{color:#fff; font-weight:600}
.info a:hover{color:var(--cyan)}

.form{background:#fff; border-radius:var(--r-lg); padding:clamp(26px,3.5vw,38px); box-shadow:var(--shadow-lg)}
/* the form sits inside .section--dark, so re-assert light-card colours */
.form h3, .section--dark .form h3{color:var(--ink); font-size:1.35rem; margin-bottom:5px}
.form > p, .section--dark .form p{color:var(--body); font-size:.95rem}
.form > p{margin-bottom:24px}
.section--dark .form label{color:var(--ink)}
.field{margin-bottom:17px}
.field label{display:block; font-family:var(--font); font-weight:600; font-size:.88rem;
  color:var(--ink); margin-bottom:7px}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#FBFCFE; transition:border-color .18s, box-shadow .18s;
}
.field textarea{resize:vertical; min-height:112px}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(20,102,245,.12); background:#fff}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:17px}
@media (max-width:520px){.field-2{grid-template-columns:1fr}}
.form .btn{width:100%; margin-top:6px}
.form__note{font-size:.83rem; margin:16px 0 0; text-align:center; color:var(--body)}

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form__status{margin:16px 0 0; padding:14px 16px; border-radius:12px;
  font-size:.92rem; line-height:1.5; text-align:left}
.form__status--ok{background:#E7F7EF; color:#0B5F3F; border:1px solid #B6E5CE}
.form__status--err{background:#FDECEA; color:#8C1D18; border:1px solid #F5C6C2}
.form__status--busy{background:var(--blue-tint); color:var(--navy-2); border:1px solid #C9DCFB}
#f-submit[aria-busy="true"]{opacity:.72; pointer-events:none}
.field input.invalid, .field textarea.invalid{border-color:#D9534F; background:#FFFAFA}

/* ============================================================
   CTA BAND
   ============================================================ */
.band{
  background:linear-gradient(115deg, var(--blue), #0B3FA8 65%, var(--navy-2));
  color:#fff; border-radius:var(--r-lg); padding:clamp(36px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.band h2{color:#fff; margin-bottom:8px}
.band p{color:#D3E2FF; margin:0; max-width:52ch}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy); color:#93A5C2; padding-block:64px 0; font-size:.95rem}
.footer a{color:#C3D1E6}
.footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr; gap:36px}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h4{color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px}
.footer li{margin-bottom:10px}
.footer .brand__name{color:#fff}
.footer .brand__sub{color:#7E92B4}
.footer__about p{margin-top:18px; max-width:34ch; font-size:.93rem}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.07);
  display:grid; place-items:center; color:#C3D1E6; transition:background .2s, color .2s}
.socials a:hover{background:var(--blue); color:#fff}
.footer__bar{border-top:1px solid rgba(255,255,255,.10); padding-block:24px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.86rem; color:#7E92B4}
.footer__bar ul{display:flex; gap:20px; flex-wrap:wrap}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ============================================================
   INNER PAGES  (service + location)
   ============================================================ */
.phero{background:linear-gradient(140deg,var(--navy),var(--navy-2) 68%,#123a7d);
  padding:clamp(40px,6vw,66px) 0 clamp(52px,7vw,80px); color:#fff}
.crumbs{font-size:.85rem; color:#8FA3C0; margin-bottom:26px}
.crumbs ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.crumbs li::after{content:"/"; margin-left:8px; color:#4E6288}
.crumbs li:last-child::after{content:""}
.crumbs a{color:#8FA3C0}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#C9D8EE}
.phero h1{font-family:var(--font); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.95rem,4.6vw,3.1rem); line-height:1.08; margin:0 0 16px; max-width:19ch;
  /* the base h1 rule sets a dark ink colour; inheriting white from .phero
     is not enough to beat a direct element rule, so set it explicitly */
  color:#fff}
.phero .strap{font-family:var(--font); font-weight:700; color:var(--cyan);
  font-size:clamp(1.02rem,1.9vw,1.28rem); margin:0 0 18px; letter-spacing:-.01em}
.phero p.lede{color:#C3D1E6; font-size:clamp(1rem,1.5vw,1.1rem); max-width:62ch; margin:0}
.phero .btn-row{margin-top:30px}

.pbody{padding:clamp(48px,6vw,74px) 0}
.pgrid{display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:clamp(34px,4vw,60px);
  align-items:start}
@media(max-width:940px){.pgrid{grid-template-columns:1fr}}
.prose{max-width:70ch; min-width:0}
.prose h2{font-family:var(--font); font-weight:800; letter-spacing:-.025em; color:var(--ink);
  font-size:clamp(1.35rem,2.4vw,1.72rem); line-height:1.22; margin:46px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font); font-weight:700; color:var(--ink);
  font-size:1.06rem; margin:28px 0 8px}
.prose p{margin:0 0 15px}
.prose ul{margin:14px 0 18px; padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:28px; margin-bottom:10px}
.prose ul li::before{content:""; position:absolute; left:2px; top:.56em;
  width:8px; height:8px; border-radius:2px; background:var(--blue)}
.prose ol{margin:14px 0 18px; padding-left:22px}
.prose ol li{margin-bottom:10px; padding-left:4px}
.prose a{color:var(--blue); font-weight:600}
.prose strong{color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; margin:20px 0; font-size:.94rem}
.prose th,.prose td{text-align:left; padding:12px 15px; border:1px solid var(--line);
  vertical-align:top}
.prose th{background:var(--tint); font-family:var(--font); font-weight:700;
  color:var(--ink); font-size:.79rem; letter-spacing:.05em; text-transform:uppercase}

.pullout{background:var(--blue-tint); border:1px solid #C9DCFB; border-left:4px solid var(--blue);
  border-radius:0 14px 14px 0; padding:22px 26px; margin:28px 0}
.pullout p:last-child{margin-bottom:0}
.pullout strong{color:var(--navy-2)}

.side{position:sticky; top:96px; display:grid; gap:18px}
@media(max-width:940px){.side{position:static}}
.sidecard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-sm)}
.sidecard--dark{background:linear-gradient(150deg,var(--navy),var(--navy-2));
  border-color:transparent; color:#C3D1E6}
.sidecard h3{font-family:var(--font); font-weight:800; color:var(--ink);
  font-size:1.04rem; margin:0 0 10px; letter-spacing:-.02em}
.sidecard--dark h3{color:#fff}
.sidecard p{font-size:.92rem; margin:0 0 16px}
.sidecard .btn{width:100%; justify-content:center}
.sidelinks{list-style:none; padding:0; margin:0}
.sidelinks li{border-bottom:1px solid var(--line)}
.sidelinks li:last-child{border-bottom:0}
.sidelinks a{display:block; padding:11px 0; font-family:var(--font); font-weight:600;
  font-size:.93rem; color:var(--ink); text-decoration:none}
.sidelinks a:hover{color:var(--blue)}
.sidelinks a[aria-current]{color:var(--blue)}
.sidelinks a[aria-current]::before{content:"› "; font-weight:800}

.checklist{display:grid; gap:12px; margin:22px 0}
.checkitem{display:flex; gap:13px; align-items:flex-start;
  background:var(--tint); border:1px solid var(--line); border-radius:12px; padding:15px 18px}
.checkitem svg{flex:none; margin-top:3px; color:var(--green)}
.checkitem b{display:block; font-family:var(--font); color:var(--ink); font-size:.96rem;
  margin-bottom:2px}
.checkitem span{font-size:.9rem; color:var(--body); line-height:1.55}

.faq--page{max-width:70ch; margin:0; border-top:1px solid var(--line)}

.related{background:var(--tint); border-top:1px solid var(--line); padding:clamp(44px,5vw,64px) 0}
.related h2{font-family:var(--font); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); font-size:1.5rem; margin:0 0 6px}
.related > .wrap > p{margin:0 0 26px; color:var(--body)}
.relgrid{display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
.relcard{display:block; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; text-decoration:none; transition:border-color .2s, transform .2s,
  box-shadow .2s}
.relcard:hover{border-color:var(--blue); transform:translateY(-3px);
  box-shadow:var(--shadow); text-decoration:none}
.relcard b{display:block; font-family:var(--font); font-weight:700; color:var(--ink);
  font-size:1rem; margin-bottom:5px; letter-spacing:-.01em}
.relcard span{font-size:.89rem; color:var(--body); line-height:1.55}

/* "read more" link added to each homepage service card */
.svc__more{display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:var(--font); font-weight:700; font-size:.9rem; color:var(--blue);
  text-decoration:none}
.svc__more:hover{text-decoration:none; gap:10px}
.svc__more svg{transition:transform .2s ease}
.svc__more:hover svg{transform:translateX(2px)}

/* ============================================================
   INSIGHTS  (article index + posts)
   ============================================================ */
.phero--article h1{max-width:24ch}
.artmeta{margin:22px 0 0; font-size:.88rem; color:#8FA3C0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.artmeta time{color:#C3D1E6}
.pill{display:inline-block; font-family:var(--font); font-weight:700;
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cyan); background:rgba(34,199,240,.13);
  border:1px solid rgba(34,199,240,.3); border-radius:999px; padding:5px 12px}

/* min() so the 310px track can shrink below the viewport on a 320px phone,
   which otherwise forces a horizontal scrollbar */
.postgrid{display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.postcard{display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 30px; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .2s, box-shadow .2s}
.postcard:hover{border-color:var(--blue); transform:translateY(-4px);
  box-shadow:var(--shadow); text-decoration:none}
.postcard .pill{color:var(--blue); background:var(--blue-tint);
  border-color:#C9DCFB}
.postcard b{font-family:var(--font); font-weight:800; color:var(--ink);
  font-size:1.14rem; line-height:1.3; letter-spacing:-.02em}
.postcard__blurb{font-size:.94rem; color:var(--body); line-height:1.6}
.postcard__meta{margin-top:auto; padding-top:6px; font-size:.84rem; color:#7A8AA6}

/* an article's prose is long-form, so give it a touch more air */
.prose blockquote.pullout{margin:26px 0}
.prose blockquote.pullout p{font-size:1.04rem}
.prose h3{margin-top:30px}