/*
Theme Name: Devgrit Technologies
Theme URI: https://devgrit.com
Author: Devgrit Technologies
Author URI: https://devgrit.com
Description: Custom WordPress theme for Devgrit Technologies — a software development company. Web & mobile apps, custom software, UI/UX, cloud & DevOps and AI engineering. Light, product-led design with dark-blue headings, a sky-blue accent, pill buttons, organic image shapes, multi-step project-brief flow and a case-study portfolio.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devgrit
*/

/* ============================================================
   DESIGN TOKENS  — brand colours live here
   Dark blue #00042A · Sky blue #03CAD4 · White
   ============================================================ */
:root{
  --ink:        #00042a;   /* brand dark blue — headings, footer, overlays */
  --ink-2:      #070d3d;
  --ink-3:      #101852;
  --ink-soft:   #232b6b;
  --paper:      #ffffff;
  --paper-2:    #eafafc;   /* tinted section band (brand light cyan) */
  --paper-3:    #d9f2f8;
  --muted:      #56607f;   /* body text */
  --muted-2:    #8b93ad;
  --line:       rgba(0,4,42,.10);
  --line-2:     rgba(255,255,255,.14);

  --accent:     #03cad4;   /* brand sky blue — CTAs / highlights */
  --accent-2:   #2fe0e8;   /* hover */
  --accent-ink: #00042a;   /* dark blue text on sky-blue fills (high contrast) */
  --accent-tint:rgba(3,202,212,.12);
  --accent-line:rgba(3,202,212,.42);

  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1200px;
  --r-pill: 999px;
  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;

  --shadow-sm: 0 4px 18px rgba(0,4,42,.06);
  --shadow-md: 0 14px 40px rgba(0,4,42,.09);
  --shadow-lg: 0 26px 70px rgba(0,4,42,.14);

  --header-h: 92px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
/* Anchor jumps stop below the sticky header instead of underneath it.
   --head-h is the header's real measured height (set by main.js); --header-h
   is only the declared minimum, which is shorter than the rendered header. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h, var(--header-h)) + 14px);
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  background:var(--paper);
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden }

/* Page still scrolls — the bar itself is just hidden. */
html{ scrollbar-width:none; -ms-overflow-style:none }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0 }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:800;
}
h1{ font-size:clamp(2.6rem,5.4vw,4.4rem) }
h2{ font-size:clamp(2rem,3.6vw,3rem) }
h3{ font-size:clamp(1.25rem,2vw,1.6rem) }
h4{ font-size:1.1rem }
p{ margin:0 0 1.1em }
a{ color:var(--ink); text-decoration:none; transition:color .2s ease }
a:hover{ color:var(--accent) }
img{ max-width:100%; height:auto; display:block }
ul,ol{ margin:0 0 1.1em; padding-left:1.2em }
svg{ width:20px; height:20px; flex:none }
button{ font:inherit; cursor:pointer }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px }

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:20px;
  min-width:0;   /* never let a flex/grid parent blow the row out */
}
.section{ padding:104px 0 }
.section--tight{ padding:64px 0 }
.bg-paper2{ background:var(--paper-2) }
.bg-ink{ background:var(--ink); color:rgba(255,255,255,.76) }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,.bg-ink a{ color:#fff }
.text-center{ text-align:center }
.accent{ color:var(--accent) }

.eyebrow{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  color:var(--muted-2);
  margin-bottom:.5rem;
}
.bg-ink .eyebrow{ color:var(--accent) }
.eyebrow--script{ color:var(--accent) }
.h-sec{ margin-bottom:.35em }
.lead{ font-size:1.08rem; color:var(--muted); max-width:62ch }
.bg-ink .lead{ color:rgba(255,255,255,.72) }

.section-head{ max-width:720px; margin-bottom:56px }
.section-head.text-center{ margin-inline:auto }
.section-head.left{ margin-left:0 }
.sec-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-bottom:52px;
}
.sec-head-row .h-sec{ margin-bottom:0 }

.view-all{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; color:var(--accent);
}
.view-all svg{ transition:transform .25s ease }
.view-all:hover svg{ transform:translateX(4px) }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:9999; width:auto; height:auto;
  clip:auto; padding:12px 20px; background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r-pill); font-weight:700;
}

/* ============================================================
   BUTTONS — fully rounded pills
   ============================================================ */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--accent-ink); --btn-bd:transparent;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px;
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid var(--btn-bd); border-radius:var(--r-pill);
  cursor:pointer; white-space:nowrap;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(3,202,212,.32); color:var(--btn-fg) }
.btn svg{ transition:transform .25s ease }
.btn:hover svg{ transform:translateX(4px) }
/* shine sweep */
.btn::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg); transition:left .55s ease;
}
.btn:hover::after{ left:120% }

/* The two primary CTAs replay the hover shine + arrow nudge on their own.
   Hover cancels the loop so the original transition-driven version takes over. */
.header-cta::after,
.home-hero .hero-actions .btn--accent::after{
  animation:btnShine 3.6s ease-in-out infinite;
}
.header-cta svg{
  animation:btnNudge 3.6s ease-in-out infinite;
}
/* Hero CTA keeps the shine only — the idle arrow nudge read as the label
   drifting out of the button, so the arrow there moves on hover alone. */
.home-hero .hero-actions .btn--accent::after{ width:34%; opacity:.7 }
.header-cta:hover::after,
.home-hero .hero-actions .btn--accent:hover::after,
.header-cta:hover svg{ animation:none }
@keyframes btnShine{
  0%,60%    { left:-60% }
  90%,100%  { left:120% }
}
@keyframes btnNudge{
  0%,58%,100%{ transform:none }
  72%        { transform:translateX(4px) }
  86%        { transform:none }
}
@media (prefers-reduced-motion:reduce){
  .header-cta::after, .home-hero .hero-actions .btn--accent::after,
  .header-cta svg{ animation:none }
}

.btn--accent{ --btn-bg:var(--accent); --btn-fg:var(--accent-ink) }
.btn--ink{ --btn-bg:var(--ink); --btn-fg:#fff }
.btn--ink:hover{ box-shadow:0 12px 28px rgba(0,4,42,.28) }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink) }
.btn--light:hover{ box-shadow:0 12px 28px rgba(0,0,0,.18) }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55) }
.btn--ghost:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; box-shadow:0 12px 28px rgba(0,0,0,.2) }
/* Outline for light sections — .btn--ghost is white-on-dark and vanishes here. */
.btn--outline{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:rgba(3,202,212,.55);
  border-width:1px;
}
.btn--outline:hover{
  --btn-bg:var(--accent-tint); --btn-fg:var(--ink); --btn-bd:var(--accent);
  box-shadow:0 0 22px rgba(3,202,212,.35);
}
.button,.button-secondary{ /* WP core fallbacks */
  display:inline-flex; align-items:center; gap:8px; padding:13px 28px;
  border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-head); font-weight:700; border:0;
}
.button-secondary{ background:var(--paper-3); color:var(--ink) }

/* ============================================================
   HEADER — transparent over the hero, frosted glass once scrolled
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:box-shadow .35s ease, border-color .35s ease;
}

/* Glass state: translucent brand navy + blur of whatever scrolls beneath.
   The blur lives on a pseudo-element, NOT on the header itself: a
   backdrop-filter makes an element the containing block for its position:fixed
   descendants, which collapsed the mobile nav drawer into the header strip
   once the header went solid on scroll. */
.site-header.solid{
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 8px 32px rgba(0,4,42,.22);
}
.site-header.solid::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(0,4,42,.62);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
}

/* Soft highlight along the top edge — sells the glass panel. */
.site-header.solid::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}

/* Browsers without backdrop-filter get a denser tint so text stays readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.solid{ background:rgba(0,4,42,.94) }
}

.site-header .wrap{ display:block }
.uh-top{
  display:flex; align-items:center; gap:24px;
  min-height:var(--header-h);
}
.uh-bar{ display:contents }   /* nav + CTA sit on the same single row */

.brand{ display:inline-flex; align-items:center; gap:12px; color:#fff }
.brand:hover{ color:#fff }
.mark{ display:inline-flex; width:38px; height:38px; color:var(--accent) }
.mark svg{ width:100%; height:100% }
.custom-logo,.brand img,.footer-logo img{ max-height:46px; width:auto; max-width:200px }
.custom-logo-link{ display:inline-flex }
.brand{ flex:none }

/* primary nav */
.main-nav{ margin-left:auto }
/* breathing room between the last link and the CTA (drawer resets this below 900px) */
@media (min-width:901px){
  .main-nav{ margin-right:26px }
}
.main-nav ul{
  display:flex; align-items:center; gap:24px;
  list-style:none; margin:0; padding:0;
}
.main-nav a{
  font-family:var(--font-head); font-weight:400; font-size:.92rem; color:#fff;
  position:relative; padding:6px 0;
}
.main-nav a{ transition:color .22s ease }
.main-nav a:hover{ color:var(--accent) }
.main-nav .current-menu-item > a{ color:var(--accent) }

/* Social icons beside the header CTA. */
.header-social{ display:flex; align-items:center; gap:8px; margin-left:16px }
.header-social a{
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; color:#fff;
  background:rgba(3,202,212,.12);
  border:1px solid rgba(3,202,212,.34);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.header-social a svg{ width:17px; height:17px }
.header-social a:hover{
  color:var(--accent); transform:translateY(-2px);
  background:rgba(3,202,212,.24); border-color:var(--accent);
  box-shadow:0 0 18px rgba(3,202,212,.45);
}
@media (max-width:1180px){
  .header-social{ display:none }
}

/* Glass pill, matching the hero promise chips rather than a solid fill. */
.header-cta{
  --btn-bg:rgba(3,202,212,.14); --btn-fg:#fff; --btn-bd:rgba(3,202,212,.34);
  padding:12px 26px; font-size:.95rem; font-weight:600;
  border-width:1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.header-cta svg{ color:var(--accent) }
.header-cta::after{ width:32%; opacity:.45 }   /* softer sweep for the glass fill */
.header-cta:hover{
  --btn-bg:rgba(3,202,212,.24); --btn-bd:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}
.nav-drawer-head{ display:none }
.nav-toggle{
  display:none; margin-left:auto;
  width:46px; height:46px; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--line-2); border-radius:var(--r-pill); color:#fff;
}
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,4,42,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:880;
}
.nav-backdrop.show{ opacity:1; visibility:visible }

/* header contact + socials (desktop only, kept subtle) */
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); color:#fff; transition:background .22s ease, color .22s ease, transform .22s ease;
}
.foot-social a:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px) }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(100vh,900px);
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 70px) 0 110px;
  color:#fff;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,4,42,.90) 0%, rgba(0,4,42,.74) 45%, rgba(0,4,42,.42) 100%);
}
.hero-video,.hero__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero > .wrap{ min-width:0 }
.hero__inner{ max-width:880px; min-width:0 }
.hero .kicker{
  display:inline-block; margin-bottom:18px; padding:8px 20px;
  border:1px solid var(--accent-line); border-radius:var(--r-pill);
  background:rgba(3,202,212,.12); color:var(--accent);
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.hero h1{
  color:#fff; margin-bottom:.45em; font-weight:700;
  /* sized so the headline settles on two lines on desktop */
  font-size:clamp(1.9rem,3.1vw,2.9rem);
  line-height:1.18;
}
.hero .sub{
  font-size:1.06rem; color:rgba(255,255,255,.82); max-width:60ch; margin-bottom:34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:38px }
.hero-promises{ display:flex; flex-wrap:wrap; gap:14px 30px }
.hero-promises span{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; color:rgba(255,255,255,.86);
}
.hero-promises svg{ color:var(--accent) }

/* headline halves each take their own line */
.hero h1 .hl{ display:block }

/* second headline line types itself in, erases, then the next one types */
.hero-type{ min-height:1.18em }
.hero-type__caret{
  display:inline-block; width:.06em; height:.86em;
  margin-left:.06em; vertical-align:-.06em;
  background:var(--accent);
  animation:heroCaret 1s steps(1) infinite;
}
@keyframes heroCaret{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
@media (prefers-reduced-motion:reduce){
  .hero-type__caret{ display:none }
}

/* scroll cue — outlined circle that bobs like it is floating on water */
.hero-scroll{
  position:absolute; left:50%; bottom:34px; z-index:2;
  display:grid; place-items:center;
  width:52px; height:52px; margin-left:-26px;
  border:2px solid rgba(255,255,255,.55); border-radius:50%;
  background:none; color:#fff;
  animation:heroBob 2.8s ease-in-out infinite;
  transition:border-color .25s ease, color .25s ease;
}
.hero-scroll:hover{ border-color:var(--accent); color:var(--accent) }
.hero-scroll svg{ width:24px; height:24px }
/* the chevron drifts inside the ring, slightly out of phase with the ring */
.hero-scroll svg{ animation:heroBobIn 2.8s ease-in-out infinite .35s }
@keyframes heroBob{
  0%,100%{ transform:translateY(0) rotate(-2.5deg) }
  50%    { transform:translateY(-11px) rotate(2.5deg) }
}
@keyframes heroBobIn{
  0%,100%{ transform:translateY(-2px) }
  50%    { transform:translateY(3px) }
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll, .hero-scroll svg{ animation:none }
}
/* Shown on phones too — it is the cue that there is more below the fold. */
@media (max-width:900px){
  .hero-scroll{ width:44px; height:44px; margin-left:-22px; bottom:20px; border-width:1.5px }
  .hero-scroll svg{ width:20px; height:20px }
}

/* home hero is centre-aligned */
.home-hero .hero__inner{ margin-inline:auto; text-align:center }
.home-hero .hero .kicker,
.home-hero .hero__inner .kicker{ margin-inline:auto }
.home-hero .sub{ margin-inline:auto }
.home-hero .hero-actions,
.home-hero .hero-promises{ justify-content:center }
/* symmetric scrim so centred text stays readable across the image */
.home-hero .hero__media::after{
  background:linear-gradient(180deg, rgba(0,4,42,.72) 0%, rgba(0,4,42,.80) 50%, rgba(0,4,42,.88) 100%);
}

/* tick items sit on soft glass pills */
.hero-promises{ gap:12px }
.hero-promises span{
  padding:9px 18px; border-radius:var(--r-pill);
  background:rgba(3,202,212,.14);
  border:1px solid rgba(3,202,212,.34);
  font-size:.95rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.nowrap{ white-space:nowrap }

/* floating circular play button (reference) */
.hero-play{
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  width:92px; height:92px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:#fff; color:var(--accent); border:0;
  box-shadow:0 18px 50px rgba(0,0,0,.3);
  transition:transform .25s ease;
}
.hero-play svg{ width:28px; height:28px; margin-left:4px }
.hero-play::before{
  content:""; position:absolute; inset:-14px; border-radius:inherit;
  border:2px solid rgba(255,255,255,.45); animation:pulseRing 2.4s ease-out infinite;
}
.hero-play:hover{ transform:translateY(-50%) scale(1.07) }
@keyframes pulseRing{
  0%{ transform:scale(.85); opacity:.9 }
  100%{ transform:scale(1.25); opacity:0 }
}

/* hero text entrance */
.hero__inner > *{ animation:heroUp .8s cubic-bezier(.22,.9,.3,1) backwards }
.hero__inner > *:nth-child(1){ animation-delay:.05s }
.hero__inner > *:nth-child(2){ animation-delay:.15s }
.hero__inner > *:nth-child(3){ animation-delay:.25s }
.hero__inner > *:nth-child(4){ animation-delay:.35s }
.hero__inner > *:nth-child(5){ animation-delay:.45s }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* inner-page hero */
.page-hero{
  position:relative; background:var(--ink); color:#fff;
  padding:calc(var(--header-h) + 78px) 0 84px; text-align:center;
}
/* Variant with a photo behind it, held under a heavy scrim so the title reads. */
.page-hero--shot{ isolation:isolate; overflow:hidden }
.page-hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.page-hero__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.55) contrast(1.05);
}
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,4,42,.9) 0%,rgba(7,16,56,.86) 45%,rgba(5,36,63,.9) 100%);
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(3,202,212,.20), transparent 62%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1 }
.page-hero h1{ color:#fff }
.page-hero p{ color:rgba(255,255,255,.76); max-width:64ch; margin-inline:auto }
.crumb{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  color:var(--accent); font-weight:600; font-size:.92rem; margin-bottom:14px;
}
.crumb a{ color:rgba(255,255,255,.7) }

/* ============================================================
   NEWSLETTER / QUOTE BAND  (tinted strip under hero)
   ============================================================ */
/* Dark band so the neon actually reads — a cyan glow on near-white looks like
   a coloured shadow, not neon. */
.nl-band{
  position:relative; isolation:isolate; overflow:hidden;
  padding:88px 0;
  color:rgba(255,255,255,.76);
  background:linear-gradient(135deg,#071038 0%,#0a1348 40%,#05243f 100%);
}
.nl-band::before{
  content:""; position:absolute; z-index:-1; inset:-30% -10% auto auto;
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.22),transparent 68%);
}
/* lit hairlines top and bottom */
.nl-band::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(3,202,212,.7),transparent);
}
.nl-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.nl-band .eyebrow{ color:var(--accent) }
.nl-band .h-sec{ color:#fff }

.nl-quote{ position:relative; padding-left:66px }
.nl-quote::before{
  content:"\201C"; position:absolute; left:0; top:-26px;
  font-family:var(--font-head); font-size:8rem; line-height:1;
  color:var(--accent); opacity:.5;
  text-shadow:0 0 26px rgba(3,202,212,.5);
}
.nl-quote p{ font-size:1.06rem; color:rgba(255,255,255,.78) }
.nl-sign{
  font-family:var(--font-head); font-weight:800; font-size:1.4rem;
  color:#fff; margin:26px 0 4px;
}
.nl-role{ font-size:.92rem; color:rgba(255,255,255,.55) }

/* Standalone CTA (the email capsule this replaced is gone). */
.nl-cta{ margin-top:6px }

/* ============================================================
   WHO WE ARE / ABOUT SPLIT
   ============================================================ */
.who-we-are{ background:#fff; color:var(--muted) }
.who-we-are h2,.who-we-are h3{ color:var(--ink) }
.intro-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center;
}
.intro-copy .h-sec,.intro-copy h2{ margin-bottom:.4em }

/* image collage + floating stat blob */
.intro-thumb{
  position:relative; display:block; width:100%; padding:0; border:0; background:none;
  border-radius:var(--r-xl); overflow:visible; cursor:pointer;
}
.intro-thumb img{
  width:100%; border-radius:var(--r-xl) 200px var(--r-xl) 200px; box-shadow:var(--shadow-lg);
}
.intro-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:82px; height:82px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:#fff; color:var(--accent);
  box-shadow:0 16px 44px rgba(0,4,42,.28); transition:transform .25s ease;
}
.intro-play svg{ width:26px; height:26px; margin-left:4px }
.intro-thumb:hover .intro-play{ transform:translate(-50%,-50%) scale(1.08) }

.exp-blob{
  position:absolute; top:-26px; left:-26px; z-index:2;
  width:150px; height:150px; display:grid; place-content:center; text-align:center;
  background:var(--accent); color:var(--accent-ink);
  border-radius:50% 50% 50% 12px;
  animation:blobNeon 3.6s ease-in-out infinite;
}
@keyframes blobNeon{
  0%,100%{ box-shadow:0 0 24px rgba(3,202,212,.5), 0 18px 44px rgba(3,202,212,.34) }
  50%    { box-shadow:0 0 44px rgba(3,202,212,.8), 0 18px 52px rgba(3,202,212,.46) }
}
.exp-blob b{
  display:flex; align-items:baseline; justify-content:center; gap:1px;
  font-family:var(--font-head); font-size:2.4rem; font-weight:800; line-height:1;
}
.exp-blob b span{ display:inline; margin:0; font-size:inherit; font-weight:inherit }
.exp-blob > span{ font-family:var(--font-head); font-weight:700; font-size:.8rem; display:block; margin-top:8px }

/* icon + text feature rows (Mission / Approach) */
.feat-list{ display:grid; gap:32px; margin-top:36px }
.feat-item{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start }
.feat-ico{
  width:56px; height:56px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--accent-tint); color:var(--accent);
  border:1px solid rgba(3,202,212,.34);
  box-shadow:inset 0 0 14px rgba(3,202,212,.2), 0 0 16px rgba(3,202,212,.24);
  transition:box-shadow .3s ease, transform .3s ease;
}
.feat-item:hover .feat-ico{
  transform:translateY(-3px);
  box-shadow:inset 0 0 18px rgba(3,202,212,.3), 0 0 28px rgba(3,202,212,.5);
}
.feat-ico svg{ width:26px; height:26px }
.feat-item h3{ font-size:1.28rem; margin-bottom:.3em }
.feat-item p{ margin:0 }

/* ============================================================
   STATS
   ============================================================ */
.stats-wrap{ background:var(--paper-2); padding:0 0 104px }
/* Neon panel with lit tiles inside it. */
.stats-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:.95fr 1.15fr; gap:56px; align-items:center;
  background:linear-gradient(135deg,#071038 0%,#0a1348 45%,#05243f 100%);
  border-radius:var(--r-xl); padding:56px;
  border:1px solid rgba(3,202,212,.42);
  color:rgba(255,255,255,.74);
  animation:statsNeon 4s ease-in-out infinite;
}
@keyframes statsNeon{
  0%,100%{ box-shadow:0 0 22px rgba(3,202,212,.22), 0 20px 50px rgba(0,4,42,.16) }
  50%    { box-shadow:0 0 42px rgba(3,202,212,.46), 0 22px 56px rgba(0,4,42,.2) }
}
/* corner bloom */
.stats-card::before{
  content:""; position:absolute; z-index:-1; inset:auto -12% -38% auto;
  width:50%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 68%);
}
.stats-card .eyebrow{ color:var(--accent) }
.stats-cta h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); color:#fff }
/* same glass pill as the header "Get a Quote" */
.stats-cta .btn{
  --btn-bg:rgba(3,202,212,.14); --btn-fg:#fff; --btn-bd:rgba(3,202,212,.34);
  padding:13px 28px; font-size:.95rem; font-weight:600; border-width:1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.stats-cta .btn svg{ color:var(--accent) }
.stats-cta .btn:hover{
  --btn-bg:rgba(3,202,212,.24); --btn-bd:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}

.stats-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px }
.stat-tile{
  background:rgba(3,202,212,.08); border-radius:var(--r-lg); padding:26px 24px;
  border:1px solid rgba(3,202,212,.32);
  box-shadow:inset 0 0 16px rgba(3,202,212,.1);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.stat-tile:hover{
  transform:translateY(-5px);
  background:rgba(3,202,212,.16); border-color:var(--accent);
  box-shadow:inset 0 0 22px rgba(3,202,212,.22), 0 0 30px rgba(3,202,212,.45);
}
.stat-num{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--font-head); font-weight:800; font-size:2.5rem; color:#fff; line-height:1;
}
.stat-num i{ font-style:normal; color:var(--accent); text-shadow:0 0 16px rgba(3,202,212,.6) }
.stat-lbl{ display:block; margin-top:8px; font-size:.94rem; color:rgba(255,255,255,.6) }
@media (prefers-reduced-motion:reduce){
  .stats-card{ animation:none; box-shadow:0 0 28px rgba(3,202,212,.3) }
}

/* standalone stat row (Timely Service) */
/* Full-bleed white band behind the figures, so the strip reads as its own
   section between the dark ones. The pseudo-element breaks out of .wrap; the
   parent section's overflow:hidden keeps it from causing page scroll. */
.stat-row{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px;
  margin-top:56px; padding:44px 0;
}
.stat-row::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; width:100vw; margin-left:-50vw;
  background:#fff;
  box-shadow:0 0 34px rgba(3,202,212,.3);
}
.stat-row > *{
  background:var(--paper-2); border-radius:var(--r-lg); padding:24px 22px;
  border:1px solid rgba(3,202,212,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.stat-row > *:hover{
  transform:translateY(-5px);
  background:var(--accent-tint); border-color:var(--accent);
  box-shadow:0 0 24px rgba(3,202,212,.36);
}
/* dark type again, since the panel is light */
.stat-row .stat-num{ font-size:2.3rem; color:var(--ink) }
.stat-row .stat-num i{ text-shadow:none }
.stat-row .stat-lbl{ color:var(--muted) }

/* ============================================================
   SERVICES — staggered outlined cards
   ============================================================ */
.qs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:start;
}
.qs-grid > *:nth-child(3n+2){ margin-top:44px }
.qs-grid > *:nth-child(3n+3){ margin-top:88px }
/* Default card sits on sky; the first card and any hovered card switch to the
   deep blue panel. The blue is a separate layer because CSS cannot transition
   a gradient directly — only its opacity. */
.qs-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(150deg,var(--accent) 0%,#0bbfd0 55%,#0aa9c4 100%);
  border:1px solid rgba(3,202,212,.55); border-radius:var(--r-xl);
  padding:38px 34px; color:rgba(0,4,42,.78); height:100%;
  box-shadow:0 0 22px rgba(3,202,212,.3);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .35s ease;
}
/* Soft accent wash in the corner — no hard-edged disc. */
.qs-card::before{
  content:""; position:absolute; z-index:-1; inset:auto -25% -40% auto;
  width:72%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
/* the blue panel */
.qs-card::after{
  content:""; position:absolute; z-index:-2; inset:0;
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  opacity:0; transition:opacity .35s ease;
}
.qs-card:nth-child(odd)::after,
.qs-card:hover::after{ opacity:1 }
.qs-card:nth-child(odd)::before,
.qs-card:hover::before{ opacity:1 }

/* blue state: light type, glowing accent heading and icon */
.qs-card h3{ color:var(--accent-ink); transition:color .3s ease, text-shadow .3s ease }
.qs-card:nth-child(odd),
.qs-card:hover{ color:rgba(255,255,255,.76) }
.qs-card:nth-child(odd) h3,
.qs-card:hover h3{ color:#fff; text-shadow:0 0 18px rgba(3,202,212,.45) }

.qs-card:hover{
  transform:translateY(-8px); border-color:var(--accent);
  box-shadow:inset 0 0 30px rgba(3,202,212,.18), 0 0 44px rgba(3,202,212,.5);
}
.qs-card:nth-child(odd){
  border-color:rgba(3,202,212,.85);
  box-shadow:inset 0 0 32px rgba(3,202,212,.22), 0 0 34px rgba(3,202,212,.42);
}
.qs-card:nth-child(odd):hover{ box-shadow:inset 0 0 38px rgba(3,202,212,.3), 0 0 56px rgba(3,202,212,.7) }

.qs-ico{
  width:64px; height:64px; border-radius:var(--r-md); margin-bottom:24px;
  display:grid; place-items:center;
  background:rgba(0,4,42,.12); color:var(--accent-ink);
  border:1px solid rgba(0,4,42,.16);
  box-shadow:inset 0 0 14px rgba(0,4,42,.1);
  transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.qs-card:nth-child(odd) .qs-ico,
.qs-card:hover .qs-ico{
  background:rgba(3,202,212,.14); color:var(--accent);
  border-color:rgba(3,202,212,.45);
  box-shadow:inset 0 0 20px rgba(3,202,212,.3), 0 0 26px rgba(3,202,212,.5);
}
.qs-ico svg{ width:30px; height:30px }
.qs-body h3{ margin-bottom:.5em }
.qs-body p{ margin:0 }
/* generic feature card grids reused across pages */
.why-ico,.ci-ico,.area-ico{
  width:60px; height:60px; border-radius:var(--r-md); margin-bottom:22px;
  display:grid; place-items:center; background:var(--accent-tint); color:var(--accent);
}
.why-ico svg,.ci-ico svg,.area-ico svg{ width:28px; height:28px }
/* ============================================================
   COMMITMENT SPLIT
   ============================================================ */
/* Both halves are dark now; the divide between them is a lit seam instead of
   a hard colour switch. */
.commit{ display:grid; grid-template-columns:1fr 1fr; position:relative; isolation:isolate }
.commit-left{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#050a2c 0%,#071038 60%,#08133f 100%);
  color:rgba(255,255,255,.76);
}
/* Background photo under a heavy scrim, same treatment as the CTA band. */
.commit-left__media{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.commit-left__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.5) contrast(1.05);
}
.commit-left__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(5,10,44,.93) 0%,rgba(7,16,56,.9) 55%,rgba(8,19,63,.92) 100%);
}
.commit-left h2,.commit-left h3{ color:#fff }
.commit-left .eyebrow{ color:var(--accent) }
.commit-right{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#062a44 0%,#05384f 55%,#064a5e 100%);
  color:rgba(255,255,255,.82);
}
/* accent bloom in the right half */
.commit-right::before{
  content:""; position:absolute; z-index:-1; inset:auto -20% -40% auto;
  width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.3),transparent 68%);
}
/* the seam */
.commit-right::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  box-shadow:0 0 18px rgba(3,202,212,.7);
}
.commit-right h2,.commit-right h3{ color:#fff }
.commit-inner{ max-width:560px; padding:96px 46px }
.commit-left .commit-inner{ margin-left:auto }
.commit-right ul{ list-style:none; padding:0; margin:0; display:grid; gap:16px }
.commit-right li{
  display:flex; align-items:center; gap:12px; font-weight:600; color:#fff;
  transition:color .25s ease;
}
.commit-right li svg{
  color:var(--accent); flex:none;
  filter:drop-shadow(0 0 6px rgba(3,202,212,.75));
}
.commit-right li:hover{ color:var(--accent) }
/* Photo leads the column. Kept bright — only a light accent tint so it still
   belongs to the neon palette without going flat. */
.commit-shot{ margin:0 0 38px; position:relative }
.commit-shot img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:var(--r-lg);
  border:1px solid rgba(3,202,212,.45);
  box-shadow:0 0 30px rgba(3,202,212,.34);
  filter:saturate(1.1) contrast(1.06) brightness(1.06);
}
.commit-shot::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(3,202,212,.12),rgba(7,16,56,.16));
  pointer-events:none;
}
/* same glass pill as the header "Get a Quote" */
.commit-left .btn{
  --btn-bg:rgba(3,202,212,.14); --btn-fg:#fff; --btn-bd:rgba(3,202,212,.34);
  padding:13px 28px; font-size:.95rem; font-weight:600;
  border-width:1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.commit-left .btn svg{ color:var(--accent) }
.commit-left .btn:hover{
  --btn-bg:rgba(3,202,212,.24); --btn-bd:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}

/* ============================================================
   INDUSTRIES / AREA CARDS
   ============================================================ */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px }
/* Neon panels: dark glass behind an accent hairline, matching the service and
   stats cards. */
.area-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  border:1px solid rgba(3,202,212,.45); border-radius:var(--r-xl); padding:36px 30px;
  color:rgba(255,255,255,.74);
  box-shadow:inset 0 0 24px rgba(3,202,212,.1), 0 0 22px rgba(3,202,212,.2);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* teal disc bleeding out of the corner */
.area-card::before{
  content:""; position:absolute; z-index:-1; inset:auto -22% -34% auto;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(10,190,208,.5) 0%,
      rgba(8,150,178,.4) 60%,
      rgba(6,110,148,.32) 72%,
      transparent 73%),
    radial-gradient(circle, rgba(3,202,212,.24), transparent 70%);
  opacity:.85; transition:opacity .3s ease;
}
.area-card:hover{
  transform:translateY(-6px); border-color:var(--accent);
  box-shadow:inset 0 0 30px rgba(3,202,212,.18), 0 0 44px rgba(3,202,212,.5);
}
.area-card:hover::before{ opacity:1 }
.area-card h3{ margin-bottom:.4em; color:#fff }
.area-card .area-ico{
  background:rgba(3,202,212,.14); color:var(--accent);
  border:1px solid rgba(3,202,212,.4);
  box-shadow:inset 0 0 14px rgba(3,202,212,.2), 0 0 14px rgba(3,202,212,.22);
  transition:box-shadow .3s ease;
}
.area-card:hover .area-ico{ box-shadow:inset 0 0 20px rgba(3,202,212,.32), 0 0 26px rgba(3,202,212,.55) }
/* Neon glass pill, same language as the header CTA. */
.area-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:11px 22px; border-radius:var(--r-pill);
  background:rgba(3,202,212,.12); color:#fff;
  border:1px solid rgba(3,202,212,.45);
  font-family:var(--font-head); font-weight:600; font-size:.92rem; line-height:1;
  box-shadow:inset 0 0 14px rgba(3,202,212,.14), 0 0 16px rgba(3,202,212,.2);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.area-link svg{ color:var(--accent); transition:transform .3s ease }
.area-link:hover{
  color:#fff; transform:translateY(-2px);
  background:rgba(3,202,212,.24); border-color:var(--accent);
  box-shadow:inset 0 0 20px rgba(3,202,212,.24), 0 0 30px rgba(3,202,212,.5);
}
.area-link:hover svg{ transform:translateX(4px) }

/* ============================================================
   CTA BAND — dotted map background + split pill
   ============================================================ */
.cta-band{
  position:relative; isolation:isolate; overflow:hidden;
  padding:110px 0; text-align:center;
  color:rgba(255,255,255,.72);
  background:linear-gradient(135deg,#071038 0%,#0a1348 45%,#05243f 100%);
}
/* Background photo, sunk behind a heavy scrim so the type stays readable and
   the section keeps its neon palette. */
.cta-band__media{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.cta-band__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.5) contrast(1.05);
}
.cta-band__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(7,16,56,.93) 0%,rgba(10,19,72,.88) 45%,rgba(5,36,63,.9) 100%);
}
/* accent bloom behind the pill */
.cta-band::after{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:min(760px,88%); aspect-ratio:2/1; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(3,202,212,.24),transparent 68%);
}
.cta-band .wrap{ position:relative; z-index:1 }

/* Waving hand: pivots from the wrist, with a pause between waves. */
.wave-hand{
  display:block; margin:8px auto 12px;
  font-size:3.2rem; line-height:1;
  transform-origin:50% 85%;
  filter:drop-shadow(0 0 16px rgba(255,194,51,.5));
  animation:handWave 2.6s ease-in-out infinite;
}
@keyframes handWave{
  0%,64%,100%{ transform:rotate(0deg) }
  70%{ transform:rotate(15deg) }
  76%{ transform:rotate(-12deg) }
  82%{ transform:rotate(13deg) }
  88%{ transform:rotate(-9deg) }
  94%{ transform:rotate(5deg) }
}
@media (prefers-reduced-motion:reduce){
  .wave-hand{ animation:none }
}
.cta-band .eyebrow{ color:var(--accent) }
.cta-band h2{ max-width:18ch; margin-inline:auto; color:#fff }

/* Plain variant: a clean white band, the default for the CTA above the footer.
   Declared after the rules above so the light colours win on equal specificity. */
.cta-band--plain{ background:#fff; color:var(--muted) }
.cta-band--plain::after{ background:radial-gradient(ellipse,rgba(3,202,212,.14),transparent 70%) }
.cta-band--plain h2{ color:var(--ink) }
.cta-band--plain .split-pill a{
  background:var(--accent); color:var(--accent-ink);
  border-color:var(--accent);
  box-shadow:0 10px 26px rgba(3,202,212,.28);
}
.cta-band--plain .split-pill a:hover{
  color:var(--accent-ink); background:var(--accent-2);
  box-shadow:0 0 24px rgba(3,202,212,.7), 0 16px 38px rgba(3,202,212,.34);
}
/* Two glass pills with a quiet "or" between them, rather than one welded pill. */
.split-pill{
  display:inline-flex; align-items:center; gap:22px; flex-wrap:wrap;
  justify-content:center; margin-top:22px;
}
/* Same glass pill as the header "Get a Quote": thin accent hairline, blurred
   tint, no heavy halo. */
.split-pill a{
  position:relative; overflow:hidden;
  padding:14px 34px; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:600; font-size:.98rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(3,202,212,.14); color:#fff;
  border:1px solid rgba(3,202,212,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.split-pill a:hover{
  color:#fff; transform:translateY(-2px);
  background:rgba(3,202,212,.24); border-color:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}
/* soft sweep, on the primary only */
.split-pill a:first-of-type::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  opacity:.45; transform:skewX(-20deg);
  animation:btnShine 3.6s ease-in-out infinite;
}
.split-pill a:first-of-type:hover::after{ animation:none; transition:left .55s ease; left:120% }

/* the connector is now plain type, not a chip */
.split-pill .or{
  font-family:var(--font-head); font-weight:600; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  background:none; border:0; box-shadow:none;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .split-pill a:first-of-type::after{ animation:none }
  .exp-blob{ animation:none; box-shadow:0 0 30px rgba(3,202,212,.55) }
}

/* ============================================================
   PRICING
   ============================================================ */
/* Cards sit in a shared perspective so hover can tilt them in 3D. */
.price-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; align-items:center;
  perspective:1200px;
}
.price-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff; border:1.5px solid var(--accent-line); border-radius:var(--r-xl);
  padding:42px 34px; text-align:center;
  box-shadow:0 10px 24px rgba(0,4,42,.07), 0 0 18px rgba(3,202,212,.14);
  transition:transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s ease,
             border-color .3s ease, color .35s ease;
}
/* White → blue on hover. Own layer, because a gradient cannot be transitioned. */
.price-card::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  opacity:0; transition:opacity .35s ease;
}
.price-card:hover{
  transform:translateY(-10px) scale(1.03);
  border-color:var(--accent); color:rgba(255,255,255,.78);
  box-shadow:0 34px 70px rgba(0,4,42,.22), 0 0 42px rgba(3,202,212,.45);
}
.price-card:hover::after{ opacity:1 }
.price-card h3,.price-card .price-amt,
.price-card .price-desc,.price-card .price-amt small{ transition:color .35s ease }
.price-card:hover h3{ color:#fff }
.price-card:hover .price-amt{ color:var(--accent); text-shadow:0 0 18px rgba(3,202,212,.5) }
.price-card:hover .price-desc,
.price-card:hover .price-amt small{ color:rgba(255,255,255,.66) }
.price-card:hover li{ color:rgba(255,255,255,.82) }
.price-card h3{ margin-bottom:.6em }
.price-card .price-desc{ font-size:.96rem; margin-bottom:22px }
.price-amt{
  font-family:var(--font-head); font-weight:800; font-size:2.6rem; color:var(--accent); line-height:1;
}
.price-amt small{ font-size:.9rem; font-weight:700; color:var(--muted-2) }
.price-card ul{ list-style:none; padding:0; margin:26px 0 0; text-align:left; display:grid; gap:12px }
.price-card li{ display:flex; align-items:flex-start; gap:10px; font-size:.96rem }
.price-card li svg{ width:18px; height:18px; color:var(--accent); margin-top:5px }
.price-card .btn{ margin-top:26px; width:100% }
/* Featured plan is a tinted glass panel like the header CTA, not a solid fill,
   so its text keeps the same colours as the other cards (and stays legible
   through the hover state). */
.price-card.featured{
  background:rgba(3,202,212,.14);
  border-color:rgba(3,202,212,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transform:scale(1.05);
  box-shadow:0 0 26px rgba(3,202,212,.3), 0 20px 50px rgba(0,4,42,.1);
}
.price-card.featured .btn{ --btn-bg:var(--accent); --btn-fg:var(--accent-ink) }
.price-card.featured:hover{ transform:scale(1.05) translateY(-6px) }

/* ============================================================
   TEAM / LEADERSHIP
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px }
.team-grid--one{ max-width:420px; margin-inline:auto }
.team-card{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:30px; text-align:center; transition:transform .28s ease, box-shadow .28s ease;
}
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.section:not(.bg-ink) .team-card{ background:#fff; border-color:var(--line) }
.team-photo{
  width:150px; height:150px; margin:0 auto 22px; border-radius:var(--r-pill);
  overflow:hidden; background:var(--accent-tint); display:grid; place-items:center;
}
.team-photo img{ width:100%; height:100%; object-fit:cover }
.team-name{ font-family:var(--font-head); font-weight:800; font-size:1.22rem; color:#fff; margin-bottom:4px }
.section:not(.bg-ink) .team-name{ color:var(--ink) }
.team-role{ color:var(--accent); font-weight:700; font-size:.95rem }
.team-cred{ font-size:.88rem; color:var(--muted-2); margin-top:6px }
.team-bio{ margin-top:14px; font-size:.96rem }
.team-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:transparent; border:0; color:var(--accent); font-family:var(--font-head); font-weight:700;
}
.team-arrow{ transition:transform .3s ease }
.team-card.open .team-arrow{ transform:rotate(180deg) }
.team-collapse{ max-height:0; overflow:hidden; transition:max-height .38s ease }
.team-collapse-inner{ padding-top:14px }

/* ============================================================
   PHILOSOPHY / STORY
   ============================================================ */
/* ============================================================
   TESTIMONIALS
   ============================================================ */
.test-carousel{ position:relative; padding:0 4px }
.test-track{
  display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:6px 2px 14px;
  scrollbar-width:none;
}
.test-track::-webkit-scrollbar{ display:none }
.test-card{
  flex:0 0 clamp(280px, 32%, 400px); scroll-snap-align:start;
  background:var(--accent); color:rgba(0,4,42,.82);
  border-radius:var(--r-xl); padding:40px 34px 32px;
  position:relative;
}
.test-card::before{
  content:"\201C"; position:absolute; left:30px; top:6px;
  font-family:var(--font-head); font-size:5rem; line-height:1; color:rgba(0,4,42,.20);
}
/* keep a single, on-brand card style */
.test-card p{ position:relative; margin:22px 0 26px }
.test-stars{ display:flex; gap:4px }
.test-stars svg{ width:17px; height:17px; color:var(--accent-ink) }
.test-person{ display:flex; align-items:center; gap:14px }
.test-avatar{
  width:50px; height:50px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--ink); color:var(--accent); font-family:var(--font-head); font-weight:800;
}
.test-person b{ display:block; font-family:var(--font-head); color:var(--accent-ink) }
.test-person span{ font-size:.88rem; color:rgba(0,4,42,.62) }
.test-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-md);
  transition:background .22s ease, color .22s ease;
}
.test-arrow:hover{ background:var(--accent); color:var(--accent-ink) }
.test-prev{ left:-22px }
.test-prev svg{ transform:rotate(180deg) }
.test-next{ right:-22px }

/* ============================================================
   QUOTE / MULTI-STEP FORM
   ============================================================ */
.quote-faq{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start }
/* Neon rim around the whole panel, breathing slowly. */
.quote-wrap{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--ink); border-radius:var(--r-xl); overflow:hidden; color:rgba(255,255,255,.76);
  border:1px solid rgba(3,202,212,.45);
  animation:quoteNeon 4s ease-in-out infinite;
}
@keyframes quoteNeon{
  0%,100%{ box-shadow:0 0 22px rgba(3,202,212,.24), 0 20px 50px rgba(0,4,42,.16) }
  50%    { box-shadow:0 0 44px rgba(3,202,212,.5),  0 22px 56px rgba(0,4,42,.2) }
}
@media (prefers-reduced-motion:reduce){
  .quote-wrap{ animation:none; box-shadow:0 0 28px rgba(3,202,212,.32) }
}
/* Grid items default to min-width:auto, which lets wide content push a column
   past its track. */
.quote-wrap > *{ min-width:0 }
.quote-aside{ padding:48px 42px }
.quote-aside h2,.quote-aside h3{ color:#fff }
.quote-aside .eyebrow{ color:var(--accent) }
.quote-aside ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px }
.quote-aside li{ display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.86) }
.quote-aside li svg{ color:var(--accent) }
.quote-panel{ background:#fff; padding:40px 36px; color:var(--muted) }

/* Segmented progress bar rather than loose dots: the completed portion is
   visible at a glance, which loose dots did not communicate. */
.q-steps{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-bottom:22px }
.q-steps .dot{
  height:5px; border-radius:var(--r-pill); background:var(--paper-3);
  transition:background .3s ease, box-shadow .3s ease;
}
.q-steps .dot.active{
  background:var(--accent);
  box-shadow:0 0 12px rgba(3,202,212,.85);
}
.q-steps .dot.done{ background:rgba(3,202,212,.45) }
.q-step{ display:none }
.q-step.active{ display:block; animation:heroUp .35s ease backwards }
.q-stepnum{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.82rem;
  color:var(--accent); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;
}
.q-field{ margin-bottom:16px }
.q-field label,.q-field .label{
  display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem;
  color:var(--ink); margin-bottom:7px;
}
.q-field input,.q-field select,.q-field textarea{
  width:100%; padding:14px 18px; font:inherit; color:var(--ink);
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color .2s ease, background .2s ease;
}
.q-field textarea{ min-height:120px; resize:vertical }
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px rgba(3,202,212,.16), 0 0 18px rgba(3,202,212,.32);
}
/* Fills the panel: options stretch to equal widths rather than leaving a gap on
   the right. min(100%,200px) lets a narrow panel drop to one column instead of
   forcing its track wider and spilling the card. */
/* 160px min lands on three columns in the form column, so six options fill two
   even rows instead of leaving an orphan. */
.q-options{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:12px; margin-bottom:18px;
}
.q-opt{
  position:relative; display:block; padding:16px 18px; cursor:pointer;
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.q-opt input{ position:absolute; opacity:0; pointer-events:none }
.q-opt .label{ font-family:var(--font-head); font-weight:700; color:var(--ink); display:block }
.q-opt .desc{ font-size:.86rem; color:var(--muted-2) }
.q-opt:hover{
  border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 0 18px rgba(3,202,212,.3);
}
/* Selected state has to be unmistakable: filled accent, white type and a tick. */
.q-opt.checked{
  border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 24px rgba(3,202,212,.55);
  padding-right:44px;
}
.q-opt.checked .label{ color:var(--accent-ink) }
.q-opt.checked .desc{ color:rgba(0,4,42,.7) }
.q-opt.checked::after{
  content:""; position:absolute; right:16px; top:50%;
  width:9px; height:16px; margin-top:-10px;
  border:solid var(--accent-ink); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.q-nav{ display:flex; gap:12px; align-items:center; margin-top:22px; flex-wrap:wrap }
.q-back{
  background:transparent; border:0; color:var(--muted); font-family:var(--font-head); font-weight:700;
}
.q-back:hover{ color:var(--accent) }
.q-msg{ margin-top:12px; font-size:.92rem; color:#d33 }
.q-success{ display:none; text-align:center; padding:30px 0 }
.q-success.show{ display:block }
.q-success svg{ width:56px; height:56px; color:var(--accent); margin:0 auto 14px }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ display:grid; gap:14px }
/* Neon rows: dark glass with an accent hairline that lights up when open. */
.faq-item{
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 55%,#062a44 100%);
  border:1px solid rgba(3,202,212,.32); border-radius:var(--r-lg);
  color:rgba(255,255,255,.72);
  box-shadow:inset 0 0 18px rgba(3,202,212,.08), 0 0 14px rgba(3,202,212,.14);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover{
  border-color:rgba(3,202,212,.6);
  box-shadow:inset 0 0 22px rgba(3,202,212,.14), 0 0 26px rgba(3,202,212,.32);
}
.faq-item.open{
  border-color:var(--accent);
  box-shadow:inset 0 0 26px rgba(3,202,212,.2), 0 0 34px rgba(3,202,212,.45);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; background:transparent; border:0; text-align:left;
  font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:#fff;
  transition:color .25s ease;
}
.faq-item.open .faq-q{ color:var(--accent); text-shadow:0 0 14px rgba(3,202,212,.45) }
.faq-plus{ position:relative; width:18px; height:18px; flex:none }
.faq-plus::before,.faq-plus::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--accent);
  transform:translateY(-50%); transition:transform .3s ease;
}
.faq-plus::after{ inset:0 auto 0 50%; width:2px; height:100%; transform:translateX(-50%) }
.faq-item.open .faq-plus::after{ transform:translateX(-50%) rotate(90deg) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease }
.faq-a p{ padding:0 24px 22px; margin:0; color:rgba(255,255,255,.7) }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start }
.contact-grid iframe{ width:100%; min-height:340px; border:0; border-radius:var(--r-xl) }

/* ============================================================
   TECH STACK / HIGHLIGHTS  (former Eco-Homes template)
   ============================================================ */
.hl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px }
.hl-item{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-xl); padding:32px 28px;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.hl-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--accent-line) }
.hl-emoji{
  display:grid; place-items:center; width:58px; height:58px; margin-bottom:18px;
  border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent); font-size:1.6rem;
}
.hl-emoji svg{ width:28px; height:28px }

/* ============================================================
   PROJECTS / CASE STUDIES
   ============================================================ */
.works-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px }
.work-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; display:block;
  background:var(--ink-2);
}
.work-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .55s ease }
.work-card:hover img{ transform:scale(1.07) }
.work-body{
  position:absolute; inset:auto 0 0 0; padding:26px 24px;
  background:linear-gradient(transparent, rgba(0,4,42,.92));
}
.work-body h3{ color:#fff; margin:8px 0 0; font-size:1.16rem }
.proj-tag{
  display:inline-block; padding:5px 14px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-head); font-weight:700; font-size:.76rem;
}
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px }
.proj-card{
  position:relative; display:block; border-radius:var(--r-xl); overflow:hidden;
  background:#fff; border:1.5px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.proj-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--accent-line) }
.proj-card img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.proj-card__body{ padding:26px 26px 30px }
.proj-card__body h3{ margin:10px 0 6px }
.proj-arrow{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease;
}
.proj-card:hover .proj-arrow{ opacity:1; transform:none }
.proj-cta{ text-align:center; margin-top:56px }
.proj-view{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700 }
.proj-meta,.gl-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:22px;
  padding:30px; background:var(--paper-2); border-radius:var(--r-xl); margin:36px 0;
}
.proj-meta b{ display:block; font-family:var(--font-head); color:var(--ink) }
.proj-meta span{ font-size:.9rem; color:var(--muted-2) }
.proj-hero-loc{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:600 }
.single-cover img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-md) }
.single-content{ max-width:820px; margin-inline:auto }

/* ============================================================
   SINGLE SERVICE — split detail (image one side, copy the other)
   ============================================================ */
/* Light section — the neon lives in the accent glows, not in a dark backdrop. */
.svc-detail{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff; color:var(--muted);
}
.svc-detail::before{
  content:""; position:absolute; z-index:-1; inset:-22% -10% auto auto;
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.14),transparent 68%);
}
.svc-detail .back-link{ color:var(--accent) }
.svc-detail .eyebrow{ color:var(--accent) }

.svc-split{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  margin-top:36px;
}
.svc-split__media{
  position:relative; margin:0;
  animation:svcFloat 5s ease-in-out infinite;
}
@keyframes svcFloat{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-12px) }
}
.svc-split__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:var(--r-xl);
  border:1px solid rgba(3,202,212,.45);
  box-shadow:0 0 34px rgba(3,202,212,.35);
}
/* icon badge riding the corner of the photo */
.svc-split__badge{
  position:absolute; right:-18px; bottom:-18px;
  width:74px; height:74px; border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:#fff; color:var(--accent);
  border:1px solid rgba(3,202,212,.55);
  animation:svcBadgeNeon 3.6s ease-in-out infinite;
}
.svc-split__badge svg{ width:34px; height:34px }
@keyframes svcBadgeNeon{
  0%,100%{ box-shadow:inset 0 0 16px rgba(3,202,212,.2), 0 0 20px rgba(3,202,212,.34) }
  50%    { box-shadow:inset 0 0 24px rgba(3,202,212,.3), 0 0 38px rgba(3,202,212,.62) }
}

.svc-split__copy h2{ color:var(--ink) }
.svc-split__copy .single-content{ max-width:none; margin:0 }
.svc-split__copy .single-content p{ color:var(--muted) }
.svc-split__copy .single-content h2,
.svc-split__copy .single-content h3,
.svc-split__copy .single-content h4{ color:var(--ink) }
.svc-split__copy .single-content ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px }
.svc-split__copy .single-content li{
  position:relative; padding-left:30px; color:var(--muted);
}
/* accent tick in place of the default bullet */
.svc-split__copy .single-content li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px rgba(3,202,212,.85);
}
.svc-split__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }

@media (prefers-reduced-motion:reduce){
  .svc-split__media,.svc-split__badge{ animation:none }
}
@media (max-width:900px){
  .svc-split{ grid-template-columns:1fr; gap:44px }
  .svc-split__badge{ right:14px; bottom:-16px; width:62px; height:62px }
}
.gallery-title{ margin-top:52px }
.project-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px }
.project-gallery a{ display:block; border-radius:var(--r-lg); overflow:hidden }
.project-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .45s ease }
.project-gallery a:hover img{ transform:scale(1.07) }

/* lightbox (built by main.js) */
.lb{
  position:fixed; inset:0; z-index:9990; display:none; place-items:center;
  background:rgba(0,4,42,.94); padding:40px;
}
.lb.open{ display:grid }
.lb-img{ max-width:92vw; max-height:82vh; border-radius:var(--r-md) }
.lb-close,.lb-prev,.lb-next{
  position:absolute; width:52px; height:52px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; border:0;
}
.lb-close{ top:24px; right:24px }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%) }
.lb-next{ right:24px; top:50%; transform:translateY(-50%) }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:var(--accent); color:var(--accent-ink) }
.lb-counter{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7) }

/* intro-video modal (built by main.js) */
.im{
  position:fixed; inset:0; z-index:9990; display:none; place-items:center;
  background:rgba(0,4,42,.94); padding:40px;
}
.im.open{ display:grid }
.im-video{ width:min(94vw,1000px); border-radius:var(--r-lg) }
.im-close{
  position:absolute; top:24px; right:24px; width:52px; height:52px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; border:0;
}
.im-close:hover{ background:var(--accent); color:var(--accent-ink) }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px }
/* Light neon: the card stays white, the accent edge and its halo do the work. */
.post-card{
  position:relative;
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid rgba(3,202,212,.34); border-radius:var(--r-xl);
  box-shadow:0 0 0 1px rgba(3,202,212,.06), 0 0 20px rgba(3,202,212,.16);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.post-card:hover{
  transform:translateY(-8px); border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(3,202,212,.26),
             0 0 30px rgba(3,202,212,.45),
             0 24px 56px rgba(3,202,212,.22);
}
.post-thumb{ position:relative; overflow:hidden }
.post-thumb img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.post-card:hover .post-thumb img{ transform:scale(1.05) }
/* accent wash that lifts in on hover */
.post-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(3,202,212,.3),transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.post-card:hover .post-thumb::after{ opacity:1 }
/* lit hairline under the image */
.post-thumb::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:1;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.6; transition:opacity .35s ease;
}
.post-card:hover .post-thumb::before{ opacity:1; box-shadow:0 0 14px rgba(3,202,212,.8) }

.post-card__body{ padding:26px 26px 30px }
.post-meta,.post-date{ font-size:.86rem; color:var(--muted-2) }
.post-card__body h3{ margin:8px 0 10px; font-size:1.2rem; transition:color .25s ease }
.post-card:hover .post-card__body h3{ color:var(--accent) }
.post-body{ max-width:820px; margin-inline:auto }

/* ============================================================
   SINGLE POST — reading view
   ============================================================ */
.post-read{ background:var(--paper-2) }

/* Image column on one side, article on the other. The image sticks so it stays
   with the reader down a long post. */
.post-split{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:start;
  margin-top:28px;
}
.post-split__media{ position:sticky; top:calc(var(--head-h,var(--header-h)) + 24px) }
.post-shot{ margin:0; position:relative }
.post-shot img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:var(--r-xl);
  border:1px solid rgba(3,202,212,.42);
  box-shadow:0 0 30px rgba(3,202,212,.3);
}
.post-shot__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin-top:18px; font-size:.9rem;
}
.post-shot__cta{ margin-top:18px }

/* The article sits on a raised white sheet with a neon rim. */
.post-paper{
  padding:40px 44px 44px;
  background:#fff; border-radius:var(--r-xl);
  border:1px solid rgba(3,202,212,.34);
  box-shadow:0 0 26px rgba(3,202,212,.22), 0 24px 60px rgba(0,4,42,.1);
}
.post-paper .single-content{ max-width:none; margin:0 }
.post-paper .single-content > *:first-child{ margin-top:0 }
.post-paper .single-content p{ font-size:1rem; line-height:1.8 }
/* Prose headings are sized for a full-width page; scale them down in the column. */
.post-paper .single-content h2{ font-size:1.45rem; margin-top:1.8em }
.post-paper .single-content h3{ font-size:1.18rem; margin-top:1.6em }
.post-paper .single-content h4{ font-size:1.04rem }
.post-paper .single-content h2,
.post-paper .single-content h3{ color:var(--ink) }
/* accent rule under section headings */
.post-paper .single-content h2{ position:relative; padding-bottom:.42em }
.post-paper .single-content h2::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:3px;
  border-radius:2px; background:var(--accent);
  box-shadow:0 0 12px rgba(3,202,212,.7);
}
.post-paper .single-content ul,
.post-paper .single-content ol{ padding-left:0; list-style:none; display:grid; gap:12px; margin:22px 0 }
.post-paper .single-content li{ position:relative; padding-left:30px }
.post-paper .single-content li::before{
  content:""; position:absolute; left:4px; top:.7em;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px rgba(3,202,212,.85);
}
.post-paper .single-content blockquote{
  margin:28px 0; padding:22px 26px;
  background:var(--accent-tint); border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:0 0 20px rgba(3,202,212,.18);
}
.post-paper .single-content img{ border-radius:var(--r-lg); box-shadow:0 0 22px rgba(3,202,212,.2) }
.post-paper .single-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

.post-read__foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:44px;
}

@media (max-width:900px){
  .post-split{ grid-template-columns:1fr; gap:30px }
  .post-split__media{ position:static }
  .post-shot img{ aspect-ratio:16/9 }
}
@media (max-width:640px){
  .post-paper{ padding:28px 22px 32px }
}
.prose h2,.prose h3{ margin-top:1.6em }
.prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94rem }
.prose th,.prose td{ border:1px solid var(--line); padding:12px 14px; text-align:left }
.prose th{ background:var(--paper-2); font-family:var(--font-head); color:var(--ink) }
.wp-block-table{ overflow-x:auto }
.badge{
  display:inline-block; padding:5px 14px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent);
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
}
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700 }

/* videos + shorts */
.vid-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px }
.vid-thumb{
  position:relative; display:block; border-radius:var(--r-xl); overflow:hidden; background:var(--ink-2);
}
.vid-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s ease }
.vid-thumb:hover img{ transform:scale(1.06) }
.vid-thumb .play,.short-thumb .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:#fff; color:var(--accent); box-shadow:0 12px 34px rgba(0,4,42,.32);
}
.vid-thumb .play svg{ margin-left:3px }
.short-prev svg{ transform:rotate(180deg) }
/* ============================================================
   FOOTER — gradient card
   ============================================================ */
/* Full-bleed band: the gradient runs edge to edge, the content still sits
   inside the shared .wrap column. */
.site-footer{
  position:relative; isolation:isolate; overflow:hidden;
  padding:0;
  color:rgba(255,255,255,.72);
  background:linear-gradient(135deg,#0b1250 0%,#071038 42%,#05243f 72%,#063f52 100%);
}
.site-footer a{ color:rgba(255,255,255,.72) }
.site-footer a:hover{ color:#fff }

/* accent bloom in the corner, and a lit top edge */
.site-footer::before{
  content:""; position:absolute; z-index:-1; inset:auto -8% -34% auto;
  width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 66%);
}
.site-footer::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.75;
}

.foot-card{ padding:64px 0 40px }

.foot-card__top{
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start;
  padding-bottom:44px;
}
.footer-logo{ margin-bottom:26px }
.footer-logo img,.footer-logo .custom-logo{ max-height:46px }

.foot-headline{
  color:#fff; margin:0;
  font-size:clamp(1.8rem,3.4vw,3rem); font-weight:700; line-height:1.16;
}
.foot-headline em{ font-style:normal; color:var(--accent) }

/* Neon panel: dark glass behind an accent hairline, with the glow both inside
   and outside so the edge reads as lit rather than merely coloured. */
.foot-actions{
  display:grid; gap:26px; justify-items:center; text-align:center;
  padding:32px 34px; border-radius:var(--r-lg);
  background:rgba(0,4,42,.42);
  border:1px solid rgba(3,202,212,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:footNeon 4s ease-in-out infinite;
}
@keyframes footNeon{
  0%,100%{
    box-shadow:inset 0 0 22px rgba(3,202,212,.1),
               0 0 20px rgba(3,202,212,.16),
               0 0 52px rgba(3,202,212,.08);
    border-color:rgba(3,202,212,.4);
  }
  50%{
    box-shadow:inset 0 0 26px rgba(3,202,212,.16),
               0 0 30px rgba(3,202,212,.3),
               0 0 76px rgba(3,202,212,.16);
    border-color:rgba(3,202,212,.72);
  }
}
@media (prefers-reduced-motion:reduce){
  .foot-actions{ animation:none; box-shadow:0 0 24px rgba(3,202,212,.2) }
}
/* One item per row: copy, button, email, then the promise ticker. */
.foot-actions__main{ display:grid; gap:22px; justify-items:center; align-content:start }
.foot-actions p{ margin:0; font-size:1rem; line-height:1.6 }
.foot-actions strong{ color:#fff; font-weight:700 }

/* Promise ticker: the lit item walks along the row on a loop. */
.foot-ticker{
  list-style:none; margin:0; padding:20px 0 0; width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px;
  border-top:1px solid rgba(3,202,212,.28);
  font-size:.92rem;
}
.foot-ticker li{
  display:flex; align-items:center; gap:12px;
  color:#fff;
  animation:tickLine 9s ease-in-out infinite;
}
.foot-ticker li:nth-child(2){ animation-delay:3s }
.foot-ticker li:nth-child(3){ animation-delay:6s }
.foot-ticker__dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:rgba(3,202,212,.35);
  animation:tickDot 9s ease-in-out infinite;
  animation-delay:inherit;
}
.foot-ticker li:nth-child(2) .foot-ticker__dot{ animation-delay:3s }
.foot-ticker li:nth-child(3) .foot-ticker__dot{ animation-delay:6s }
/* Base text stays white; the highlight is the brand cyan, not a brightness step. */
@keyframes tickLine{
  0%,28%   { color:var(--accent); text-shadow:0 0 14px rgba(3,202,212,.65) }
  36%,100% { color:#fff; text-shadow:none }
}
@keyframes tickDot{
  0%,28%   { background:var(--accent); box-shadow:0 0 12px rgba(3,202,212,.9) }
  36%,100% { background:rgba(3,202,212,.45); box-shadow:none }
}
@media (prefers-reduced-motion:reduce){
  .foot-ticker li{ animation:none; color:#fff }
  .foot-ticker__dot{ animation:none; background:var(--accent) }
}

/* Neon outline button — white label keeps full contrast, which a white-on-cyan
   fill would not. */
/* Solid sky fill; the neon halo arrives on hover. Label is the dark ink so it
   stays readable on the accent — white on cyan would not be. */
.site-footer .foot-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 30px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent);
  font-family:var(--font-head); font-weight:700; font-size:1.05rem; line-height:1;
  white-space:nowrap;
  box-shadow:0 10px 26px rgba(3,202,212,.26);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.site-footer .foot-cta:hover{
  color:var(--accent-ink); background:var(--accent-2);
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(3,202,212,.85),
             0 0 52px rgba(3,202,212,.5),
             0 16px 38px rgba(3,202,212,.36);
}
.foot-cta svg{ width:20px; height:20px; transition:transform .3s ease }
.foot-cta:hover svg{ transform:translateX(5px) }

/* Scoped to .site-footer so it outranks the generic `.site-footer a` dim. */
.site-footer .foot-mail,
.site-footer .foot-mail:hover{
  display:inline-flex; align-items:center; gap:11px;
  font-size:1rem; color:#fff;
}
.foot-mail svg{ width:20px; height:20px; color:var(--accent); flex:none }
/* No underline in either state — hover just shifts the colour. */
.foot-mail span{ overflow-wrap:anywhere }
.site-footer .foot-mail:hover{ color:var(--accent) }

.foot-base{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px 30px; flex-wrap:wrap;
  padding:26px 0 0; margin-top:8px;
  border-top:1px solid rgba(255,255,255,.13);
}
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 28px; font-size:.98rem }
.foot-social{ display:flex; gap:10px }

.foot-legal{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.88rem; color:rgba(255,255,255,.5);
}

@media (max-width:900px){
  .foot-card{ padding:48px 0 32px }
  .foot-card__top{ grid-template-columns:1fr; gap:36px }
}
@media (max-width:640px){
  .foot-card{ padding:38px 0 26px }
  .foot-actions{ padding:24px 20px }
  .foot-headline{ font-size:1.55rem }
  .foot-headline br{ display:none }
  .foot-mail{ font-size:.94rem }
  .foot-mail span{ overflow-wrap:anywhere }
  .foot-base{ flex-direction:column; align-items:flex-start }
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
/* Stacked above the WhatsApp button, which now owns the bottom-right corner. */
.scroll-top{
  position:fixed; right:27px; bottom:94px; z-index:850;
  width:50px; height:50px; border-radius:var(--r-pill); border:0;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 30px rgba(3,202,212,.4);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}
/* Same floating-on-water bob as the hero scroll cue. Only the shown state is
   animated, so the slide-up entrance transition still plays first. */
.scroll-top.show{
  opacity:1; visibility:visible; transform:none;
  animation:heroBob 2.8s ease-in-out .35s infinite;
}
.scroll-top.show svg{ animation:heroBobIn 2.8s ease-in-out .7s infinite reverse }
.scroll-top:hover{ background:var(--accent-2) }
@media (max-width:640px){
  .scroll-top{ right:19px; bottom:78px; width:44px; height:44px }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
/* Sits on the right, under the back-to-top button. The label opens inward
   (leftward) because the button is pinned to the right edge. */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:850;
  display:inline-flex; flex-direction:row-reverse; align-items:center; gap:0;
  height:56px; padding:0 0 0 4px;
  border-radius:var(--r-pill);
  background:#25d366; color:#fff;
  box-shadow:0 12px 30px rgba(37,211,102,.38);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-float:hover{
  color:#fff; background:#1fbe5a;
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(37,211,102,.5);
}
.wa-float__icon{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:56px; height:56px; flex:none;
}
.wa-float__icon svg{ width:29px; height:29px }

/* Label stays clipped, then slides open — on hover, and briefly on its own
   every few seconds so the button gets noticed without being permanent. */
.wa-float__label{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  transition:max-width .38s cubic-bezier(.22,.9,.3,1), opacity .28s ease, padding-left .38s ease;
  padding-left:0;
  animation:waPeek 9s ease-in-out 3s infinite;
}
.wa-float:hover .wa-float__label{
  animation:none;
  max-width:170px; opacity:1; padding-left:20px;
}
@keyframes waPeek{
  0%,6%      { max-width:0;     opacity:0; padding-left:0 }
  14%,30%    { max-width:170px; opacity:1; padding-left:20px }
  40%,100%   { max-width:0;     opacity:0; padding-left:0 }
}

/* Expanding halo rings, like a ringing call. */
.wa-float::before,
.wa-float::after{
  content:""; position:absolute; right:4px; bottom:4px;
  width:48px; height:48px; margin:0;
  border-radius:50%; border:2px solid rgba(37,211,102,.55);
  pointer-events:none;
  animation:waPulse 2.6s ease-out infinite;
}
.wa-float::after{ animation-delay:1.3s }
@keyframes waPulse{
  0%  { transform:scale(1);   opacity:.7 }
  100%{ transform:scale(2.1); opacity:0 }
}

@media (max-width:640px){
  .wa-float{ right:16px; bottom:16px; height:50px }
  .wa-float__icon{ width:50px; height:50px }
  .wa-float__icon svg{ width:26px; height:26px }
}
@media (prefers-reduced-motion:reduce){
  .wa-float::before, .wa-float::after{ animation:none; opacity:0 }
  .wa-float__label{ animation:none }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease var(--reveal-delay,0ms),
             transform .7s ease var(--reveal-delay,0ms);
}
/* Service cards fade up staggered, with the neon rim lighting last. */
.qs-card.reveal{
  transform:translateY(38px) scale(.97);
  transition:opacity .65s cubic-bezier(.22,.9,.3,1) var(--reveal-delay,0ms),
             transform .65s cubic-bezier(.22,.9,.3,1) var(--reveal-delay,0ms),
             box-shadow .5s ease calc(var(--reveal-delay,0ms) + .35s),
             border-color .3s ease;
  box-shadow:0 0 0 1px rgba(3,202,212,0), 0 0 0 rgba(3,202,212,0);
}
.qs-card.reveal.in{ transform:none }
/* Once revealed the card floats on a slow wave; hovering cancels it so the
   lift and glow take over cleanly. */
.qs-card.reveal.in:not(:hover){
  box-shadow:inset 0 0 24px rgba(3,202,212,.1), 0 0 22px rgba(3,202,212,.2);
  animation:cardWave 4.4s ease-in-out infinite;
  animation-delay:var(--wave-delay,0s);
}
@keyframes cardWave{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-10px) }
}
.qs-card:nth-child(odd).reveal.in:not(:hover){
  box-shadow:inset 0 0 32px rgba(3,202,212,.22), 0 0 34px rgba(3,202,212,.42);
}
@media (prefers-reduced-motion:reduce){
  .qs-card.reveal.in:not(:hover){ animation:none }
}
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .reveal{ opacity:1; transform:none }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .quote-faq{ grid-template-columns:1fr }
  .stats-card{ grid-template-columns:1fr; padding:44px 34px }
  .qs-grid{ grid-template-columns:repeat(2,1fr) }
  .qs-grid > *:nth-child(3n+2),.qs-grid > *:nth-child(3n+3){ margin-top:0 }
  .qs-grid > *:nth-child(2n){ margin-top:40px }
  .hero-play{ right:5%; width:78px; height:78px }
}

@media (max-width:900px){
  :root{ --header-h:74px }
  .section{ padding:76px 0 }
  .nav-toggle{ display:inline-flex }
  .header-cta{ display:none }

  .main-nav{
    position:fixed; inset:0 auto 0 0; z-index:890;
    width:min(86vw,360px);
    background:rgba(0,4,42,.86);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
    border-right:1px solid rgba(255,255,255,.10);
    padding:24px 26px; overflow-y:auto;
    transform:translateX(-102%); transition:transform .34s cubic-bezier(.22,.9,.3,1);
    display:flex; flex-direction:column; gap:22px; margin:0;
  }
  .main-nav.open{ transform:none }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:2px }
  .main-nav li{ border-bottom:1px solid var(--line-2) }
  .main-nav a{ display:block; padding:14px 2px; font-size:1.06rem }

  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding-bottom:18px; border-bottom:1px solid var(--line-2);
  }
  .nav-close{
    width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center;
    background:rgba(255,255,255,.10); border:0; color:#fff;
  }

  .intro-grid,.story,.contact-grid,.nl-grid{ grid-template-columns:1fr; gap:44px }
  .commit{ grid-template-columns:1fr }
  .commit-inner{ padding:64px 26px; max-width:none }
  /* stacked: the seam runs across the top instead of down the side */
  .commit-right::after{
    left:0; right:0; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
  }
  .quote-wrap{ grid-template-columns:1fr }
  .stats-tiles{ grid-template-columns:1fr 1fr }
  .hero-play{ position:static; transform:none; margin-top:8px }
  .hero-play:hover{ transform:scale(1.07) }
  .test-prev{ left:-6px } .test-next{ right:-6px }
  .price-card.featured{ transform:none }
  .price-card.featured:hover{ transform:translateY(-6px) }
}

@media (max-width:640px){
  body{ font-size:16px }
  .section{ padding:60px 0 }

  /* Hero was scaling off the desktop clamp minimums, which read oversized on
     a phone — everything below is the phone-sized step down. */
  /* Fill the visible screen so the next section stays below the fold and the
     scroll cue has something to reveal. svh excludes the browser chrome that
     makes 100vh overshoot on phones. */
  .hero{
    min-height:100vh; min-height:100svh;
    padding:calc(var(--header-h) + 34px) 0 86px;
  }
  .hero h1{ font-size:1.86rem; line-height:1.22; letter-spacing:-.015em }
  .hero .sub{ font-size:1.04rem; line-height:1.6; margin-bottom:26px }
  .hero-actions{ margin-bottom:26px }
  .stats-wrap{ padding-bottom:60px }
  .qs-grid{ grid-template-columns:1fr }
  .qs-grid > *{ margin-top:0!important }
  .stats-tiles{ grid-template-columns:1fr }
  .nl-quote{ padding-left:0; padding-top:34px }
  .nl-quote::before{ top:-14px }
  .nl-cta{ width:100%; justify-content:center }
  .split-pill{ flex-direction:column; border-radius:var(--r-lg) }
  .split-pill .or{ display:none }
  .split-pill a{ justify-content:center }
  /* Kept fully inside the column — a negative left offset put it on the very
     edge of a phone screen. */
  .exp-blob{ width:104px; height:104px; top:-12px; left:0; padding:0 8px }
  .exp-blob b{ font-size:1.65rem }
  .exp-blob > span{ font-size:.66rem; margin-top:5px; line-height:1.25 }
}

/* ============================================================
   PAGE HERO WITH BACKGROUND IMAGE
   ============================================================ */
.page-hero--img{ background-size:cover; background-position:center }
.page-hero--img::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,4,42,.86), rgba(0,4,42,.72));
}
.page-hero--img::after{
  background:radial-gradient(circle at 50% 0%, rgba(3,202,212,.18), transparent 62%);
}
.page-hero--img .wrap{ z-index:2 }
/* pull the following section up over the hero (contact layout) */
.page-hero--overlap{ padding-bottom:190px }
/* Card used to overlap the hero above it, which clipped its glow and left an
   awkward notch. It now simply sits in the flow. */
.pull-up{ position:relative; z-index:5 }

/* ============================================================
   "HELP YOUR BUSINESS WIN" ACCENT BAND
   ============================================================ */
.win-band{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#071038 0%,#0a1348 45%,#05243f 100%);
  color:rgba(255,255,255,.74);
}
/* accent bloom instead of the dot grid */
.win-band::before{
  content:""; position:absolute; z-index:-1; inset:auto auto -35% -12%;
  width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 68%);
}
.win-band .eyebrow{ color:var(--accent) }
.win-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.win-copy{ padding:96px 0 }
.win-copy h2{ color:#fff; font-size:clamp(2.1rem,3.8vw,3.1rem) }
.win-copy p{ max-width:46ch; color:rgba(255,255,255,.74) }
/* same glass pill as the header "Get a Quote" */
.win-copy .btn{
  --btn-bg:rgba(3,202,212,.14); --btn-fg:#fff; --btn-bd:rgba(3,202,212,.34);
  padding:13px 28px; font-size:.95rem; font-weight:600; border-width:1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.win-copy .btn svg{ color:var(--accent) }
.win-copy .btn:hover{
  --btn-bg:rgba(3,202,212,.24); --btn-bd:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}
/* The photo drives the row height, so without its own padding it runs to the
   band's edges. */
.win-media{ padding-block:56px }
.win-media img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-xl) 200px var(--r-xl) 200px;
  border:1px solid rgba(3,202,212,.4);
  box-shadow:0 0 34px rgba(3,202,212,.32);
}
.win-band--flip .win-media{ order:-1 }

/* ============================================================
   TIMELY SERVICE / SPLIT WITH CIRCULAR IMAGE
   ============================================================ */
.timely{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#071038 0%,#0a1348 45%,#05243f 100%);
  color:rgba(255,255,255,.74);
  /* the white stat band is the last thing in here and runs to the edge, so the
     section's own bottom padding would show as a dark strip under it */
  padding-bottom:0;
}
.timely::before{
  content:""; position:absolute; z-index:-1; inset:-25% -10% auto auto;
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.24),transparent 68%);
}
.timely .eyebrow{ color:var(--accent) }
.timely h2,.timely h3{ color:#fff }
/* same glass pill as the header "Get a Quote" */
.timely .btn{
  --btn-bg:rgba(3,202,212,.14); --btn-fg:#fff; --btn-bd:rgba(3,202,212,.34);
  padding:13px 28px; font-size:.95rem; font-weight:600; border-width:1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.timely .btn svg{ color:var(--accent) }
.timely .btn:hover{
  --btn-bg:rgba(3,202,212,.24); --btn-bd:rgba(3,202,212,.6);
  box-shadow:0 10px 24px rgba(3,202,212,.18);
}
.timely-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center }
.timely-media img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-pill);
  border:1px solid rgba(3,202,212,.45);
  box-shadow:0 0 34px rgba(3,202,212,.35);
}
.timely--flip .timely-media{ order:-1 }

/* signature block */
.sig{ margin-top:30px }
.sig-name{ font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--ink) }
.sig-role{ font-size:.9rem; color:var(--muted-2) }

/* trust line + dual CTA under a grid */
.trust-row{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  flex-wrap:wrap; margin-top:56px;
}
.trust-row p{ margin:0; max-width:48ch; font-size:.95rem; color:var(--muted-2) }
.trust-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }

/* ============================================================
   AWARDS / RECOGNITION — staggered outlined cards
   ============================================================ */
.awards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:start }
.awards-grid > *:nth-child(even){ margin-top:40px }
.award-card{
  background:#fff; border:1.5px solid var(--accent-line); border-radius:var(--r-xl);
  padding:34px 28px; transition:transform .28s ease, box-shadow .28s ease;
}
.award-card:hover{ transform:translateY(-8px); box-shadow:0 24px 56px rgba(3,202,212,.2) }
.award-ico{
  width:56px; height:56px; border-radius:var(--r-md); margin-bottom:20px;
  display:grid; place-items:center; background:var(--accent-tint); color:var(--accent);
}
.award-ico svg{ width:26px; height:26px }
.award-card h3{ font-size:1.14rem; margin-bottom:.45em }
.award-card p{ margin:0; font-size:.95rem }

/* ============================================================
   CONTACT — overlapping split card + office cards
   ============================================================ */
/* Neon card. The aside is a darker tone of the same palette rather than a flat
   accent block, so the two halves read as one panel. */
/* Stacked: quick-contact strip on top, the form below it. */
.contact-card{
  display:grid; grid-template-columns:1fr;
  border-radius:var(--r-xl); overflow:hidden; background:#fff;
  border:1px solid rgba(3,202,212,.42);
  box-shadow:0 0 26px rgba(3,202,212,.28), 0 24px 60px rgba(0,4,42,.16);
}
.contact-side{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  color:rgba(255,255,255,.78); padding:56px 46px;
}
/* lit seam between the strip and the form */
.contact-side::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 16px rgba(3,202,212,.7);
}
.contact-side h2,.contact-side h3{ color:#fff }
.contact-side h3{ font-size:1.5rem; margin-bottom:.5em }
.contact-side .mark{
  position:absolute; right:-30px; bottom:-40px; width:220px; height:220px;
  color:rgba(3,202,212,.16); pointer-events:none;
}
.contact-side > *{ position:relative; z-index:1 }
/* Header band: the strip introduces the form instead of just labelling itself. */
.contact-side--title{ padding:40px 46px; text-align:center }
.contact-side--title .eyebrow{ color:var(--accent) }
.contact-side--title h2{ margin:6px 0 10px; font-size:clamp(1.7rem,3vw,2.4rem) }
.contact-side--title p{ margin:0 auto; max-width:52ch; color:rgba(255,255,255,.72) }

/* Form left, "what happens next" right — the panel was ~40% empty otherwise,
   and the aside answers the question every form raises: then what? */
.cf-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px; align-items:start }
.cf-aside{
  padding:26px 24px; border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid rgba(3,202,212,.28);
  box-shadow:inset 0 0 18px rgba(3,202,212,.08);
}
.cf-aside h3{ font-size:1.06rem; margin-bottom:18px; color:var(--ink) }
.cf-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; counter-reset:cf }
.cf-steps li{ position:relative; padding-left:38px; counter-increment:cf }
/* numbered markers, tied to the step language of the form itself */
.cf-steps li::before{
  content:counter(cf);
  position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  box-shadow:0 0 12px rgba(3,202,212,.5);
}
/* connector between the markers */
.cf-steps li:not(:last-child)::after{
  content:""; position:absolute; left:12.5px; top:30px; bottom:-16px; width:1px;
  background:linear-gradient(180deg,rgba(3,202,212,.5),rgba(3,202,212,.12));
}
.cf-steps b{ display:block; color:var(--ink); font-size:.98rem; margin-bottom:2px }
.cf-steps span{ display:block; font-size:.9rem; line-height:1.6; color:var(--muted-2) }
.cf-aside__foot{
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(3,202,212,.22);
  font-size:.9rem; color:var(--muted-2);
}
.cf-aside__foot a{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  color:var(--accent); font-weight:600; overflow-wrap:anywhere;
}
.cf-aside__foot svg{ width:16px; height:16px; flex:none }

/* Used elsewhere when the strip carries full contact blocks. */
.contact-side__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px 40px }
.contact-block{ margin-bottom:0 }
.contact-block ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.contact-block li{ display:flex; align-items:center; gap:10px; font-size:.96rem }
.contact-block li svg{
  width:17px; height:17px; color:var(--accent); flex:none;
  filter:drop-shadow(0 0 6px rgba(3,202,212,.7));
}
.contact-block a{ color:#fff }
.contact-block a:hover{ color:var(--accent) }
.contact-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.contact-cols h4{ color:var(--accent); font-size:.98rem; margin-bottom:12px }
.contact-form-panel{ padding:56px 48px }
.contact-form-panel h2{ margin-bottom:1em }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }

.office-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px }
/* Neon panels, same language as the service and industry cards. */
.office-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  border:1px solid rgba(3,202,212,.45); border-radius:var(--r-xl); padding:32px 28px;
  color:rgba(255,255,255,.76);
  box-shadow:inset 0 0 24px rgba(3,202,212,.1), 0 0 22px rgba(3,202,212,.2);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.office-card::before{
  content:""; position:absolute; z-index:-1; inset:auto -25% -40% auto;
  width:66%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 70%);
  opacity:.8; transition:opacity .3s ease;
}
.office-card:hover{
  transform:translateY(-6px); border-color:var(--accent);
  box-shadow:inset 0 0 30px rgba(3,202,212,.18), 0 0 44px rgba(3,202,212,.5);
}
.office-card:hover::before{ opacity:1 }
.office-card h3{
  color:var(--accent); font-size:1.2rem; margin-bottom:.7em;
  text-shadow:0 0 14px rgba(3,202,212,.45);
}
/* One channel per card: badge, title, why you'd use it, single action. */
.office-card{ display:flex; flex-direction:column }
.office-card__ico{
  width:52px; height:52px; border-radius:var(--r-md); margin-bottom:18px;
  display:grid; place-items:center; flex:none;
  background:rgba(3,202,212,.14); color:var(--accent);
  border:1px solid rgba(3,202,212,.4);
  box-shadow:inset 0 0 14px rgba(3,202,212,.2), 0 0 14px rgba(3,202,212,.22);
  transition:box-shadow .3s ease;
}
.office-card__ico svg{ width:24px; height:24px }
.office-card:hover .office-card__ico{
  box-shadow:inset 0 0 20px rgba(3,202,212,.32), 0 0 26px rgba(3,202,212,.55);
}
.office-card p{ margin:0 0 20px; font-size:.94rem; line-height:1.7 }
/* pushed to the bottom so the links line up across cards of unequal copy */
.office-card__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  color:var(--accent); overflow-wrap:anywhere;
}
.office-card__link svg{ width:17px; height:17px; flex:none; transition:transform .25s ease }
.office-card__link:hover{ color:#fff }
.office-card:hover .office-card__link svg{ transform:translateX(4px) }

/* ============================================================
   FAQ — pill variant (two columns)
   ============================================================ */
.faq-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px 34px; align-items:start }
.faq--pill .faq-list{ gap:20px }
.faq--pill .faq-item{ background:transparent; border:0; border-radius:0; overflow:visible }
.faq--pill .faq-item.open{ box-shadow:none }
.faq--pill .faq-q{
  border:1.5px solid var(--accent-line); border-radius:var(--r-pill);
  padding:16px 26px; background:#fff; color:var(--ink); font-size:.98rem;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.faq--pill .faq-item.open .faq-q{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.faq--pill .faq-plus{ width:16px; height:16px }
.faq--pill .faq-plus::before,.faq--pill .faq-plus::after{
  background:var(--accent); width:10px; height:2px; inset:auto; top:50%; left:0;
  transform-origin:center; transition:transform .3s ease, background .25s ease;
}
.faq--pill .faq-plus::before{ transform:translate(1px,-1px) rotate(45deg) }
.faq--pill .faq-plus::after{ left:auto; right:0; transform:translate(-1px,-1px) rotate(-45deg) }
.faq--pill .faq-item.open .faq-plus::before,
.faq--pill .faq-item.open .faq-plus::after{ background:var(--accent-ink) }
.faq--pill .faq-item.open .faq-plus::before{ transform:translate(1px,-1px) rotate(-45deg) }
.faq--pill .faq-item.open .faq-plus::after{ transform:translate(-1px,-1px) rotate(45deg) }
/* Pill variant sits on a light section, so it keeps dark type. */
.faq--pill .faq-a p{ padding:18px 26px 4px; color:var(--muted) }

/* ============================================================
   BLOG — asymmetric feature grid (one tall + two wide)
   ============================================================ */
.blog-grid--feature{ display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:start }
.blog-grid--feature .post-card--wide{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:stretch }
.blog-grid--feature .post-card--wide .post-thumb{ height:100% }
.blog-grid--feature .post-card--wide .post-thumb img{ height:100%; aspect-ratio:auto; min-height:200px }
.blog-side{ display:grid; gap:26px }
.read-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--font-head); font-weight:700; color:var(--accent);
}
.read-more svg{ transition:transform .25s ease }
.post-card:hover .read-more svg{ transform:translateX(4px) }
.post-cat{ color:var(--accent); font-weight:700; text-shadow:0 0 12px rgba(3,202,212,.4) }

/* ============================================================
   404
   ============================================================ */
.err-page{
  min-height:88vh; display:grid; place-items:center; text-align:center;
  padding:calc(var(--header-h) + 60px) 0 90px; position:relative; overflow:hidden;
}
.err-page::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,4,42,.06) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
}
.err-page .wrap{ position:relative; z-index:1 }
.err-code{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-head); font-weight:800; font-size:clamp(5rem,15vw,10rem);
  color:var(--ink); line-height:1; letter-spacing:-.04em;
}
.err-code .mark{ width:.78em; height:.78em; color:var(--accent) }
.err-page h1{ font-size:clamp(2rem,4.6vw,3.2rem); margin:.3em 0 .25em }
.err-page p{ max-width:52ch; margin:0 auto 30px }

/* ============================================================
   RESPONSIVE — new components
   ============================================================ */
@media (max-width:1080px){
  .awards-grid{ grid-template-columns:repeat(2,1fr) }
  .contact-card{ grid-template-columns:1fr }
  .blog-grid--feature{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .win-grid,.timely-grid,.faq-cols{ grid-template-columns:1fr; gap:44px }
  .win-band--flip .win-media,.timely--flip .timely-media{ order:0 }
  .win-copy{ padding:64px 0 26px }
  /* stacked: the photo is last, so it only needs clearance underneath */
  .win-media{ padding-block:0 52px }
  .page-hero--overlap{ padding-bottom:120px }
  .contact-side,.contact-form-panel{ padding:44px 28px }
}
@media (max-width:640px){
  .awards-grid{ grid-template-columns:1fr }
  .awards-grid > *{ margin-top:0!important }
  .contact-cols,.form-row{ grid-template-columns:1fr }
  .blog-grid--feature .post-card--wide{ grid-template-columns:1fr }
  .trust-row{ flex-direction:column; align-items:flex-start }
}


/* ============================================================
   RESPONSIVE — MOBILE PASS
   Declared last so these win over the component defaults above.
   Breakpoints: 900 = tablet / drawer nav, 640 = phone, 400 = small phone.
   ============================================================ */

/* ---- Guards that apply at every size ---- */
/* Grid and flex children default to min-width:auto, so a single nowrap child
   can widen its track past the viewport. These are the containers where that
   actually happened. */
html{ overflow-x:hidden }
.wrap, .hero__inner, .hero-actions, .foot-actions,
.qs-card, .post-card, .area-card, .office-card, .price-card{ min-width:0 }
/* Nothing may push the page sideways: media, embeds and long strings. */
img, video, iframe, svg, canvas{ max-width:100%; height:auto }
iframe{ max-width:100%; border:0 }
/* Long URLs and email addresses are the usual culprits in body copy. */
p, li, td, dd, .stat-lbl, .foot-mail span{ overflow-wrap:break-word }
/* Anything genuinely wide scrolls inside itself rather than widening the page. */
.prose table, .wp-block-table, pre{ display:block; max-width:100%; overflow-x:auto }

@media (max-width:900px){
  /* Tighter gutters once the layout is single column. */
  .wrap{ padding-inline:18px }

  /* Split layouts that were still side by side. */
  .svc-split{ grid-template-columns:1fr; gap:36px }
  .svc-split__media{ order:-1 }
  .foot-card__top{ gap:32px }

  /* The commit photo led the column on desktop; keep it, just smaller. */
  .commit-shot{ margin-bottom:28px }
  .commit-shot img{ aspect-ratio:16/9 }

  /* Floating actions must never cover the drawer or overlap each other. */
  .wa-float{ z-index:840 }
  .scroll-top{ z-index:840 }
}

@media (max-width:640px){
  :root{ --header-h:70px }

  /* ---- Rhythm ---- */
  .section{ padding:56px 0 }
  .wrap{ padding-inline:18px }
  /* The about image and its blob are absolutely stacked; give the pair a little
     inset so neither rides the screen edge. */
  .intro-thumb-wrap{ padding-top:10px }
  h2{ font-size:clamp(1.5rem,6vw,1.9rem) }
  h3{ font-size:1.14rem }
  .h-sec{ font-size:clamp(1.5rem,6vw,1.9rem) }
  .lead{ font-size:1rem }

  /* ---- Header ---- */
  .custom-logo, .brand img, .footer-logo img{ max-height:38px }
  .nav-toggle{ width:44px; height:44px }

  /* ---- Buttons: full-width stacks read better than half-width pairs, and
         44px is the minimum comfortable tap target. ---- */
  .btn{ min-height:46px; padding:13px 24px; font-size:.95rem }
  .svc-split__actions .btn,
  .post-read__foot .btn,
  .split-pill a{ width:100%; justify-content:center }
  .svc-split__actions, .post-read__foot{ width:100%; flex-direction:column }
  .split-pill{ flex-direction:column; width:100%; gap:12px }
  .split-pill .or{ order:0 }

  /* ---- Home hero: left-aligned on phones. Centred text over a photo is hard
         to scan at this width, and the CTAs pair better side by side. ---- */
  .home-hero .hero__inner{ text-align:left; margin-inline:0 }
  /* Same 320px measure as the CTA row below, so the two edges line up. */
  .home-hero .sub{ margin-inline:0; max-width:320px }
  .home-hero .hero-actions,
  .home-hero .hero-promises{ justify-content:flex-start }
  /* A 2-up grid rather than flex: equal tracks that cannot exceed the column,
     which a nowrap flex button otherwise does. */
  .hero-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .hero-actions{ max-width:320px }
  .hero-actions .btn{
    width:100%; min-width:0; min-height:38px;
    padding:9px 8px; font-size:.76rem; gap:5px;
    white-space:normal;   /* .btn is nowrap by default and would overflow here */
  }
  .hero-actions .btn svg{ flex:none; width:13px; height:13px }
  /* Two per row, the odd one wrapping underneath. */
  .hero-promises{ display:grid; grid-template-columns:1fr 1fr; gap:7px 10px }
  .hero-promises span{
    padding:5px 0; font-size:.72rem; gap:5px;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
  }
  .hero-promises svg{ width:14px; height:14px; flex:none }

  /* ---- Quote / contact form ---- */
  .contact-form-panel{ padding:34px 20px }
  .contact-side--title{ padding:30px 20px }
  .q-options{ grid-template-columns:1fr; gap:10px }
  .q-opt{ padding:14px 16px }
  .q-field input, .q-field select, .q-field textarea{
    padding:13px 15px;
    font-size:16px;   /* under 16px iOS zooms the page on focus */
  }
  .q-nav{ gap:10px }
  .q-nav .btn{ width:100% }
  .quote-panel{ padding:30px 20px }
  .quote-aside{ padding:34px 22px }

  /* ---- Cards ---- */
  .qs-card{ padding:28px 22px }
  .qs-grid{ gap:20px }
  .area-card, .office-card{ padding:26px 22px }
  .price-card{ padding:32px 24px }
  .price-card.featured{ transform:none }
  /* Two square tiles per row instead of four full-width strips, and the white
     band drops away so the tiles sit straight on the section's blue. */
  .stat-row{
    grid-template-columns:1fr 1fr;
    padding:26px 0 0; gap:12px; margin-top:36px;
  }
  .stat-row::before{ display:none }
  .stat-row > *{
    padding:16px 14px; aspect-ratio:1;
    display:flex; flex-direction:column; justify-content:center;
    background:rgba(3,202,212,.08);
    border-color:rgba(3,202,212,.32);
    box-shadow:inset 0 0 16px rgba(3,202,212,.1);
  }
  .stat-row .stat-num{ font-size:1.65rem; color:#fff }
  .stat-row .stat-num i{ text-shadow:0 0 14px rgba(3,202,212,.6) }
  .stat-row .stat-lbl{ font-size:.82rem; margin-top:6px; color:rgba(255,255,255,.6) }
  /* the section had its bottom padding zeroed for the white band */
  .timely{ padding-bottom:56px }
  .stats-card{ padding:34px 22px; gap:30px }
  .stat-tile{ padding:20px 18px }

  /* ---- Sections ---- */
  .commit-inner{ padding:48px 20px }
  .cta-band{ padding:70px 0 }
  .win-copy{ padding:52px 0 20px }
  .win-media{ padding-block:0 44px }
  .nl-band{ padding:60px 0 }
  /* The quote glyph is absolutely placed; with no left padding it sits on top
     of the first line, so give it its own row of space instead. */
  .nl-quote{ padding-left:0; padding-top:46px }
  .nl-quote::before{ top:-30px; font-size:5.4rem }
  .svc-detail .svc-split__badge{ right:12px; bottom:-14px; width:56px; height:56px }
  .svc-split__badge svg{ width:26px; height:26px }

  /* ---- Blog ---- */
  .blog-grid{ gap:22px }
  .post-paper{ padding:26px 20px 30px }
  .post-shot img{ aspect-ratio:16/10 }
  .post-shot__cta{ width:100% }

  /* ---- Footer ---- */
  .foot-card{ padding:40px 0 24px }
  .foot-headline{ font-size:1.42rem; line-height:1.3 }
  .foot-actions{ padding:24px 18px; gap:20px }
  .foot-actions p{ font-size:.95rem }
  .site-footer .foot-cta{ width:100%; justify-content:center; white-space:normal }
  .foot-ticker{ gap:10px 18px; font-size:.86rem }
  .foot-base{ gap:18px }
  .foot-links{ gap:8px 20px }

  /* ---- Floating actions: smaller, and clear of the WhatsApp label ---- */
  .wa-float{ right:14px; bottom:14px; height:48px }
  .wa-float__icon{ width:48px; height:48px }
  .wa-float__icon svg{ width:24px; height:24px }
  .wa-float__label{ font-size:.88rem }
  .scroll-top{ right:17px; bottom:72px; width:42px; height:42px }
  .scroll-top svg{ width:18px; height:18px }

  /* Room under the promises so the scroll cue never sits on top of them. */
  .hero{ padding-bottom:86px }
}

@media (max-width:400px){
  .wrap{ padding-inline:14px }
  .hero h1{ font-size:1.62rem }
  .hero .sub{ font-size:.99rem }
  .foot-headline{ font-size:1.28rem }
  .wa-float__label{ display:none }   /* keep the bubble a clean circle */
}

/* Landscape phones: the hero should not eat the whole viewport. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{ min-height:auto; padding:calc(var(--header-h) + 30px) 0 44px }
  .page-hero{ padding:calc(var(--header-h) + 40px) 0 46px }
}

/* Touch devices: hover-only affordances never fire, so show them by default. */
@media (hover:none){
  .qs-card:hover, .area-card:hover, .office-card:hover,
  .post-card:hover, .price-card:hover, .stat-tile:hover{ transform:none }
}

/* Contact form panel stacks below the two-column breakpoint. */
@media (max-width:1080px){
  .cf-grid{ grid-template-columns:1fr; gap:34px }
  .cf-aside{ order:2 }
}
@media (max-width:640px){
  .contact-side--title{ padding:30px 20px }
  .contact-side--title p{ font-size:.94rem }
  .cf-aside{ padding:22px 18px }
  .cf-grid{ gap:28px }
}

/* ============================================================
   CAREERS
   ============================================================ */
/* Empty state: the page's main event most of the time, so it is treated as a
   designed panel rather than a line of apologetic text. */
.empty-state{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:720px; margin-inline:auto; text-align:center;
  padding:56px 44px; border-radius:var(--r-xl);
  background:linear-gradient(150deg,#071038 0%,#0b1c5e 52%,#062a44 100%);
  border:1px solid rgba(3,202,212,.45);
  color:rgba(255,255,255,.76);
  box-shadow:inset 0 0 26px rgba(3,202,212,.1), 0 0 26px rgba(3,202,212,.24);
}
.empty-state::before{
  content:""; position:absolute; z-index:-1; inset:auto -20% -40% auto;
  width:56%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(3,202,212,.26),transparent 70%);
}
.empty-state__ico{
  width:66px; height:66px; border-radius:var(--r-lg); margin:0 auto 22px;
  display:grid; place-items:center;
  background:rgba(3,202,212,.14); color:var(--accent);
  border:1px solid rgba(3,202,212,.42);
  animation:emptyPulse 3.6s ease-in-out infinite;
}
.empty-state__ico svg{ width:30px; height:30px }
@keyframes emptyPulse{
  0%,100%{ box-shadow:inset 0 0 16px rgba(3,202,212,.2), 0 0 18px rgba(3,202,212,.3) }
  50%    { box-shadow:inset 0 0 24px rgba(3,202,212,.3), 0 0 34px rgba(3,202,212,.6) }
}
.empty-state .eyebrow{ color:var(--accent) }
.empty-state h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin:6px 0 14px }
.empty-state p{ margin:0 auto 12px; max-width:52ch }
/* the softer, secondary reassurance */
.empty-state__note{
  font-size:.94rem; color:rgba(255,255,255,.6);
  padding-top:14px; border-top:1px solid rgba(3,202,212,.22);
}
.empty-state__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px;
}
.empty-state__mail{
  margin:18px auto 0; font-size:.9rem; color:rgba(255,255,255,.55);
}
.empty-state__mail a{ color:var(--accent); font-weight:600; overflow-wrap:anywhere }
.empty-state__mail a:hover{ color:#fff }
.empty-state .btn--outline{ --btn-fg:#fff; --btn-bd:rgba(3,202,212,.55) }
.empty-state .btn--outline:hover{ --btn-fg:#fff; --btn-bg:rgba(3,202,212,.18) }
@media (prefers-reduced-motion:reduce){
  .empty-state__ico{ animation:none }
}

/* Listing rows, used once roles exist. */
.role-list{ display:grid; gap:14px; max-width:820px; margin-inline:auto }
.role-row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px;
  padding:22px 26px; border-radius:var(--r-lg);
  background:#fff; border:1px solid rgba(3,202,212,.3);
  box-shadow:0 0 18px rgba(3,202,212,.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.role-row:hover{
  transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 0 28px rgba(3,202,212,.4);
}
.role-row__title{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--ink) }
.role-row__meta{ font-size:.9rem; color:var(--muted-2) }
.role-row__go svg{ width:20px; height:20px; color:var(--accent); transition:transform .25s ease }
.role-row:hover .role-row__go svg{ transform:translateX(4px) }

/* How hiring works */
.hire-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start }
.hire-steps{ margin:0 }
.hire-steps li{ padding-left:44px }
.hire-steps li::before{ width:30px; height:30px; font-size:.88rem }
.hire-steps li:not(:last-child)::after{ left:14.5px; top:34px }
.hire-steps b{ font-size:1.05rem; margin-bottom:4px }

@media (max-width:900px){
  .hire-grid{ grid-template-columns:1fr; gap:32px }
}
@media (max-width:640px){
  .empty-state{ padding:38px 22px }
  .empty-state__actions .btn{ width:100% }
  .role-row{ grid-template-columns:1fr auto; gap:10px 14px }
  .role-row__meta{ grid-column:1/-1 }
}