/* ============================================================
   AIM MECHANICAL — Design System
   Brand: bright blue #00AEEF · navy #0B2138 · red #E11423
   Type: Sora (display) + Manrope (body) — geometric, modern
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand */
  --blue:        #0098DB;   /* primary brand blue (tamed logo cyan) */
  --blue-bright: #00AEEF;   /* logo cyan-blue, accents/highlights */
  --blue-deep:   #0A6FB0;   /* hover / deeper blue */
  --navy:        #0B2138;   /* deep blue — dark sections, headings */
  --navy-2:      #0F2D4A;   /* lighter navy panel */
  --red:         #E11423;   /* logo red — urgency, primary CTA */
  --red-deep:    #B80E1A;   /* red hover */

  /* Neutrals (cool-toned) */
  --ink:    #111922;        /* near-black text */
  --muted:  #51606F;        /* secondary text */
  --faint:  #8A97A5;        /* tertiary text */
  --line:   #E1E8EF;        /* hairline borders */
  --line-2: #CFD9E3;
  --paper:  #F3F6FA;        /* off-white section bg */
  --paper-2:#E9EFF5;
  --white:  #FFFFFF;

  /* Effects */
  --radius:   14px;
  --radius-lg:22px;
  --radius-sm:9px;
  --shadow-sm: 0 1px 2px rgba(11,33,56,.06), 0 2px 6px rgba(11,33,56,.05);
  --shadow:    0 4px 14px rgba(11,33,56,.08), 0 10px 30px rgba(11,33,56,.07);
  --shadow-lg: 0 12px 40px rgba(11,33,56,.14), 0 30px 70px rgba(11,33,56,.10);
  --shadow-blue: 0 10px 30px rgba(0,152,219,.30);
  --shadow-red:  0 10px 26px rgba(225,20,35,.28);

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1340px;
  --gutter: clamp(18px, 4vw, 48px);
  --nav-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --ff-display: 'Sora', system-ui, sans-serif;
  --ff-body: 'Manrope', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--white); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4,h5{ font-family:var(--ff-display); font-weight:800; line-height:1.04;
  letter-spacing:-.02em; margin:0; color:var(--navy); text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }

.h-display{ font-size:clamp(2.6rem, 6.2vw, 5.1rem); line-height:.98; }
.h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
.h2{ font-size:clamp(1.7rem, 3.4vw, 2.7rem); }
.h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.28rem); color:var(--muted); line-height:1.55; font-weight:500; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--maxw-wide); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(64px, 8vw, 120px); }
.section-sm{ padding-block: clamp(44px, 5vw, 72px); }
.bg-paper{ background:var(--paper); }
.bg-navy{ background:var(--navy); color:#DCE6F0; }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.center{ text-align:center; }
.grid{ display:grid; gap:28px; }
.stack-sm{ display:flex; flex-direction:column; gap:10px; }

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-body); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--red); border-radius:2px; }
.kicker.on-dark{ color:var(--blue-bright); }
.kicker.center-line{ }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-weight:700; font-size:1rem;
  padding:15px 26px; border-radius:var(--radius-sm); border:2px solid transparent;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn-red{ background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.btn-red:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-blue:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.32); }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-lg{ padding:18px 32px; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }

/* ---------- Placeholder image slots ---------- */
.ph{
  position:relative; overflow:hidden; background:
    repeating-linear-gradient(135deg, #e7eef5 0 14px, #eef3f8 14px 28px);
  border:1px dashed var(--line-2); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; color:#7d8a98;
  min-height:200px;
}
.ph::after{
  content:attr(data-label);
  font-family:'Sora',monospace; font-size:.74rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#6b7886; text-align:center; padding:10px 14px;
  background:rgba(255,255,255,.78); border-radius:6px; max-width:84%;
  border:1px solid rgba(0,0,0,.04);
}
.ph.gen{ background:
    repeating-linear-gradient(135deg, #fde8ea 0 14px, #fef1f2 14px 28px);
  border-color:#f3b9bf; }
.ph.gen::after{ color:var(--red-deep); background:rgba(255,255,255,.85); }
.ph.round{ border-radius:50%; }
.ph.cover{ position:absolute; inset:0; min-height:0; border-radius:inherit; }

/* ---------- Trust badges / chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem;
  padding:8px 14px; border-radius:100px; background:var(--paper); color:var(--navy);
  border:1px solid var(--line); }
.chip svg{ width:16px; height:16px; color:var(--blue); }

.stars{ display:inline-flex; gap:3px; color:#FFB400; }
.stars svg{ width:18px; height:18px; }

/* ---------- Certifications / Recognition band ---------- */
.cert-band{ padding-top:clamp(84px,9vw,140px); padding-bottom:clamp(56px,7vw,98px); background:var(--paper); border-top:1px solid var(--line); }
.cert-head{ max-width:680px; margin:0 auto clamp(34px,4vw,52px); text-align:center; }
.cert-head .kicker{ justify-content:center; }
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto; }
.cert{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.cert:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.cert-emblem{ width:60px; height:60px; border-radius:50%; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(140deg,var(--blue),var(--blue-bright)); box-shadow:var(--shadow-blue); }
.cert-emblem svg{ width:28px; height:28px; }
.cert-emblem.navy{ background:linear-gradient(140deg,var(--navy),var(--navy-2)); box-shadow:0 10px 26px rgba(11,33,56,.26); }
.cert-emblem.gold{ background:linear-gradient(140deg,#caa14a,#f0cf7a); color:#43320b; box-shadow:0 10px 26px rgba(202,161,74,.34); }
.cert-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cert-org{ font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.cert-title{ font-family:var(--ff-display); font-weight:800; font-size:1.08rem; color:var(--navy); line-height:1.16; letter-spacing:-.01em; }
.cert-sub{ font-size:.86rem; color:var(--muted); font-weight:500; }

/* featured — Mitsubishi Diamond Contractor */
.cert-feature{ grid-column:span 3; gap:24px; padding:26px 28px;
  background:linear-gradient(120deg,#fff 40%,#fef2f3); border-color:#f4c6cb; }
.cert-diamond{ width:72px; height:72px; flex:none; transform:rotate(45deg); border-radius:18px;
  background:linear-gradient(140deg,var(--red),#ff5a6e); box-shadow:0 14px 32px rgba(225,20,35,.38);
  display:grid; place-items:center; }
.cert-diamond svg{ width:30px; height:30px; transform:rotate(-45deg); color:#fff; }
.cert-feature .cert-org{ color:var(--red-deep); }
.cert-feature .cert-title{ font-size:1.4rem; }
.cert-tier{ margin-left:auto; align-self:center; font-family:var(--ff-display); font-weight:800;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep);
  background:rgba(225,20,35,.1); border:1px solid rgba(225,20,35,.24); padding:8px 16px; border-radius:100px; }

@media (max-width:900px){
  .cert-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-feature{ grid-column:span 2; }
}
@media (max-width:560px){
  .cert-grid{ grid-template-columns:1fr; }
  .cert-feature{ grid-column:span 1; flex-wrap:wrap; }
  .cert-tier{ margin-left:0; }
}

/* dark (bold theme) variant */
body.theme-bold .cert-band{ background:#0a1320; border-top:1px solid rgba(255,255,255,.07); }
body.theme-bold .cert-head h2{ color:#fff; }
body.theme-bold .cert-head .lead{ color:#9fb2c5; }
body.theme-bold .cert{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.09); box-shadow:none; }
body.theme-bold .cert:hover{ border-color:rgba(0,174,239,.4); box-shadow:0 20px 50px rgba(0,0,0,.4); }
body.theme-bold .cert-title{ color:#fff; }
body.theme-bold .cert-sub{ color:#9fb2c5; }
body.theme-bold .cert-feature{ background:linear-gradient(120deg,rgba(225,20,35,.16),rgba(8,20,34,.5)); border-color:rgba(225,20,35,.34); }
body.theme-bold .cert-feature .cert-org{ color:#ff8a96; }
body.theme-bold .cert-tier{ color:#ff8a96; background:rgba(225,20,35,.16); border-color:rgba(225,20,35,.4); }

/* ---------- Header / Nav ---------- */
.topbar{ background:var(--navy); color:#cdd9e6; font-size:.86rem; }
.topbar .wrap-wide{ display:flex; align-items:center; justify-content:space-between;
  min-height:42px; gap:18px; }
.topbar a{ color:#cdd9e6; font-weight:600; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; align-items:center; gap:8px; font-weight:600; }
.topbar-left svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.topbar-right{ display:flex; align-items:center; gap:20px; }
.topbar .tphone{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:700; color:#fff; }
.topbar .tphone svg{ width:15px; height:15px; color:var(--blue-bright); }

.nav{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s; }
.nav.scrolled{ box-shadow:var(--shadow); }
.nav-inner{ display:flex; align-items:center; gap:22px; min-height:var(--nav-h);
  max-width:var(--maxw-wide); margin:0 auto; padding-inline:var(--gutter); }
.brand img{ height:50px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-links > a, .nav-item > button{
  font-family:var(--ff-display); font-weight:600; font-size:.98rem; color:var(--navy);
  padding:10px 14px; border-radius:8px; background:none; border:none;
  display:inline-flex; align-items:center; gap:6px; transition:color .15s, background .15s;
}
.nav-links > a:hover, .nav-item > button:hover{ color:var(--blue); background:var(--paper); }
.nav-item{ position:relative; }
.nav-item > button svg{ width:13px; height:13px; transition:transform .2s; }
.nav-item:hover > button svg{ transform:rotate(180deg); }
.nav-spacer{ flex:1; }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* Mega dropdown */
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  width:640px; max-width:92vw; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .2s, transform .2s var(--ease); z-index:90;
}
.nav-item:hover .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-link{ display:flex; gap:13px; padding:13px; border-radius:12px; transition:background .15s; align-items:flex-start; }
.mega-link:hover{ background:var(--paper); }
.mega-ico{ width:42px; height:42px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,#e6f6fe,#d4eefc); color:var(--blue); }
.mega-ico svg{ width:22px; height:22px; }
.mega-link h4{ font-size:1rem; margin:0 0 2px; }
.mega-link p{ font-size:.84rem; color:var(--muted); margin:0; line-height:1.4; }

/* Mobile nav */
.nav-toggle{ display:none; background:none; border:none; padding:8px; color:var(--navy); }
.nav-toggle svg{ width:30px; height:30px; }
.mobile-nav{ position:fixed; inset:0; z-index:200; background:var(--navy); color:#fff;
  transform:translateX(100%); transition:transform .32s var(--ease); display:flex; flex-direction:column;
  padding:22px var(--gutter) 40px; overflow-y:auto; }
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.mobile-nav-top img{ height:46px; }
.mobile-nav .close{ background:none; border:none; color:#fff; padding:8px; }
.mobile-nav .close svg{ width:30px; height:30px; }
.mobile-nav a{ display:block; font-family:var(--ff-display); font-weight:700; font-size:1.4rem;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; }
.mobile-nav .sub a{ font-size:1.05rem; font-weight:600; color:#b9c8d8; padding:9px 0 9px 16px; border:none; }
.mobile-nav-cta{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#a9bacb; padding-top:72px; }
.footer h4{ color:#fff; font-size:1.02rem; margin-bottom:18px; letter-spacing:.01em; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:54px; }
.footer-brand img{ height:64px; margin-bottom:18px; }
.footer a{ color:#a9bacb; transition:color .15s; }
.footer a:hover{ color:#fff; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; font-weight:600; }
.footer-contact{ display:flex; flex-direction:column; gap:14px; }
.footer-contact .row{ display:flex; gap:11px; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; color:var(--blue-bright); flex:none; margin-top:2px; }
.footer-phone{ font-family:var(--ff-display); font-weight:800; font-size:1.5rem; color:#fff !important; }
.socials{ display:flex; gap:10px; margin-top:6px; }
.socials a{ width:40px; height:40px; border-radius:9px; background:rgba(255,255,255,.07);
  display:grid; place-items:center; transition:background .18s, transform .18s; }
.socials a:hover{ background:var(--blue); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; color:#fff; }
.service-areas{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0 4px; }
.service-areas h4{ font-family:var(--ff-display); font-weight:800; font-size:.92rem; color:#fff;
  letter-spacing:.02em; text-transform:uppercase; opacity:.92; margin:0 0 8px; }
.service-areas p{ font-size:.86rem; color:rgba(255,255,255,.7); line-height:1.7; margin:0; }
.service-areas span{ color:rgba(255,255,255,.88); white-space:nowrap; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:.86rem;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.footer-bottom-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Quote form ---------- */
.qform{ display:flex; flex-direction:column; gap:14px; }
.qform .field{ display:flex; flex-direction:column; gap:6px; }
.qform label{ font-weight:700; font-size:.82rem; color:var(--navy); letter-spacing:.01em; }
.qform input, .qform select, .qform textarea{
  font-family:var(--ff-body); font-size:1rem; padding:13px 15px; border:1.5px solid var(--line-2);
  border-radius:10px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; width:100%;
}
.qform input:focus, .qform select:focus, .qform textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,152,219,.13); }
.qform .two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note{ font-size:.8rem; color:var(--faint); }
.form-success{ background:#E7F8EE; border:1px solid #A9E2C0; color:#1B7A45; padding:14px 16px;
  border-radius:10px; font-weight:600; display:none; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Breadcrumb ---------- */
.crumb{ display:flex; gap:9px; align-items:center; font-size:.86rem; color:var(--faint); font-weight:600; }
.crumb a:hover{ color:var(--blue); }
.crumb .sep{ color:var(--line-2); }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.eyebrow-num{ font-family:var(--ff-display); font-weight:800; color:var(--blue); font-size:.95rem; }

/* ============================================================
   INNER PAGE / SERVICE TEMPLATE
   ============================================================ */
.page-hero{ background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding-block: clamp(40px,5vw,68px) clamp(56px,7vw,96px); }
.page-hero::before{ content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(0,174,239,.18), transparent 68%); }
.page-hero .crumb{ color:#9fb2c4; margin-bottom:22px; }
.page-hero .crumb a{ color:#cdd9e6; } .page-hero .crumb .sep{ color:#46586c; }
.page-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; position:relative; z-index:2; }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color:#cfddea; margin-top:18px; }
.page-hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.page-hero .hero-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; }
.page-hero .hero-trust .t{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:.9rem; color:#dce7f1; }
.page-hero .hero-trust .t svg{ width:18px; height:18px; color:var(--blue-bright); }
.page-hero-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }

.simple-hero{ padding-block: clamp(40px,5vw,64px); border-bottom:1px solid var(--line); }
.simple-hero .crumb{ margin-bottom:18px; }

/* two-col content block */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split.media-left{ direction:rtl; } .split.media-left > *{ direction:ltr; }
.split .media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; }
.prose p{ color:var(--muted); font-size:1.05rem; }
.prose h2{ margin-bottom:16px; }

/* checklist / signs grid */
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:8px; }
.checks .ci{ display:flex; gap:13px; align-items:flex-start; }
.checks .ci .ck{ width:28px; height:28px; border-radius:8px; background:#E7F8EE; color:#1B9D54; display:grid; place-items:center; flex:none; margin-top:1px; }
.checks .ci .ck svg{ width:16px; height:16px; }
.checks .ci b{ display:block; font-family:var(--ff-display); font-size:1.02rem; color:var(--navy); }
.checks .ci span{ color:var(--muted); font-size:.92rem; }

/* section heading block — needs breathing room before the grid below it */
.section-head{ margin-bottom: clamp(38px, 4.5vw, 62px); }
.section-head.center{ max-width:760px; margin-inline:auto; }
.section-head .h2,.section-head .h1{ text-wrap:balance; }

/* map image filling a .media / .area-map slot */
.map-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* photo filling an aspect-ratio media frame (hero / split) */
.img-fill{ display:block; width:100%; height:100%; object-fit:cover; }

/* split section reduced to a single centered text column (no second image) */
.split-solo{ max-width:780px; margin-inline:auto; }

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; }
.step .n{ width:52px; height:52px; border-radius:14px; background:linear-gradient(140deg,var(--blue),var(--blue-bright));
  color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:1.3rem;
  box-shadow:var(--shadow-blue); margin-bottom:18px; }
.step h3{ font-size:1.18rem; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.95rem; }

/* feature/benefit cards */
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.benefit{ padding:30px; } 
.benefit .ic{ width:52px; height:52px; border-radius:13px; background:linear-gradient(140deg,#e6f6fe,#d6effc); color:var(--blue); display:grid; place-items:center; margin-bottom:18px; }
.benefit .ic svg{ width:26px; height:26px; }
.benefit h3{ font-size:1.2rem; margin-bottom:8px; }
.benefit p{ color:var(--muted); font-size:.95rem; }

/* brands row */
.brands{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.brands .b{ font-family:var(--ff-display); font-weight:700; color:var(--navy); padding:14px 26px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:1.05rem; }

/* FAQ accordion */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.faq-item.open{ box-shadow:var(--shadow); border-color:transparent; }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--ff-display); font-weight:700; font-size:1.08rem; color:var(--navy); }
.faq-q .pm{ width:30px; height:30px; border-radius:50%; background:var(--paper); display:grid; place-items:center; flex:none; transition:background .2s, transform .25s; }
.faq-q .pm svg{ width:16px; height:16px; color:var(--blue); transition:transform .25s; }
.faq-item.open .faq-q .pm{ background:var(--blue); transform:rotate(180deg); }
.faq-item.open .faq-q .pm svg{ color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a .inner{ padding:0 24px 22px; color:var(--muted); }

/* split CTA at bottom of service */
.svc-cta{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.svc-cta .qcard{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px; border-top:5px solid var(--red); }

@media (max-width:980px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 30px; }
  .mega{ display:none; }
  .page-hero-grid, .split, .svc-cta{ grid-template-columns:1fr; }
  .split.media-left{ direction:ltr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .benefits{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .footer-grid{ grid-template-columns:1fr; }
  .qform .two{ grid-template-columns:1fr; }
  .topbar-left{ display:none; }
  .topbar .wrap-wide{ justify-content:center; }
  .checks{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}