/* =========================================================================
   MINDHEIGHT TECHNOLOGIES — Digital Marketing
   Design system + page styles
   -------------------------------------------------------------------------
   PALETTE: Mindheight's own, on white. Blue #007BFF is the energy and the
   identity. Green #28A745 is the second accent and carries one job only:
   proof. Checkmarks, result figures, confirmations. Body copy is set in the
   brand navy #2F3C4F rather than a neutral grey, and no value is pure black.

   The colour split is semantic, not decorative:
     blue  = brand, action, navigation, emphasis
     green = confirmed, measured, included, achieved

   STRUCTURAL RULES this file holds to:
     · No repeated 3-up card grids. Peer items are switchers, staggered
       sequences, or hairline-divided lists.
     · No nested cards. A bordered surface never contains another one.
     · No hover state that changes layout. Hover moves transform and colour
       only, so nothing reflows under the cursor.
     · Hero is left-aligned and asymmetric.
     · Cascade order matters: inverted variants come AFTER their base.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root{
  /* Ground: white, warmed a hair toward the brand blue so it never reads as
     clinical. Surfaces step up in tint, not down. */
  --bg:     #FFFFFF;
  --bg-1:   #F6F9FC;
  --bg-2:   #EDF3FA;
  --bg-3:   #E2EBF5;   /* deepest surface tint, used sparingly */

  /* Accent 1 — Mindheight blue. Exact brand value for fills.
     --blue-1 is the darker sibling used for text and icons on white, where
     #007BFF alone sits at 4.0:1 and fails AA for body copy. */
  --blue:       #007BFF;
  --blue-fill:  #0070EC;
  --blue-1:     #0062CC;
  --blue-2:     #E6F1FF;
  --blue-deep:  #0057C4;
  --blue-ink:   #FFFFFF;
  --blue-glow:  rgba(0, 123, 255, .20);
  --blue-wash:  rgba(0, 123, 255, .06);

  /* Accent 2 — Mindheight green. Proof only.
     --green fills icons, --green-1 carries text at AA on white. */
  --green:      #28A745;
  --green-1:    #15722B;
  --green-wash: rgba(40, 167, 69, .10);

  /* Type. Body copy is set in the brand navy itself. */
  --fg:     #101826;
  --fg-1:   #2F3C4F;
  --fg-2:   #5F6E80;
  --fg-3:   #636F84;

  /* Lines, tinted navy rather than pure black. */
  --line:      rgba(16, 24, 38, .10);
  --line-1:    rgba(16, 24, 38, .17);
  --line-blue: rgba(0, 123, 255, .38);

  /* Elevation. On white a border alone reads flat, so surfaces carry a soft
     navy-tinted shadow instead of a heavier outline. */
  --shadow-sm:   0 1px 2px rgba(16,24,38,.04), 0 4px 12px -6px rgba(16,24,38,.08);
  --shadow:      0 2px 4px rgba(16,24,38,.03), 0 14px 34px -12px rgba(16,24,38,.13);
  --shadow-blue: 0 10px 26px -10px rgba(0,123,255,.45);

  /* Faces */
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Radii */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Motion. Ease-out-expo family: fast start, long settle. No bounce. */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --ease-sm: cubic-bezier(.33, 1, .68, 1);

  /* Section rhythm. Alternating, not uniform. */
  --pad-lg: clamp(72px, 8vw, 124px);
  --pad-md: clamp(52px, 6vw, 88px);

  --shell: 1280px;
}

/* -------------------------------------------------------------------------
   2. RESET
   ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg-1);
  font-family:var(--body);
  font-size:16px;
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4,h5{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  color:var(--fg);
  line-height:1.08;
  letter-spacing:-.028em;
  text-wrap:balance;
}
:focus-visible{ outline:2px solid var(--blue-1); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--blue); color:var(--blue-ink); }

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }
.section{ position:relative; padding-block:var(--pad-lg); }
.section--tight{ padding-block:var(--pad-md); }

.split{ display:grid; gap:clamp(32px, 5vw, 68px); align-items:start; }
@media (min-width:900px){
  .split--5-7{ grid-template-columns:.82fr 1.18fr; }
  .split--6-6{ grid-template-columns:1fr 1fr; align-items:center; }
}

.stack{ display:flex; flex-direction:column; }
.gap-8{ gap:8px } .gap-12{ gap:12px } .gap-16{ gap:16px }
.gap-20{ gap:20px } .gap-24{ gap:24px } .gap-32{ gap:32px }

/* -------------------------------------------------------------------------
   4. ATOMS
   ---------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--fg-2);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--blue); box-shadow:0 0 0 4px var(--blue-wash);
}
.eyebrow--green::before{ background:var(--green); box-shadow:0 0 0 4px var(--green-wash); }

.h-xl{ font-size:clamp(40px, 6.4vw, 78px); letter-spacing:-.04em; }
.h-lg{ font-size:clamp(30px, 4.3vw, 52px); letter-spacing:-.034em; }
.h-md{ font-size:clamp(24px, 3vw, 36px); letter-spacing:-.028em; }

/* The signature device: the emphasis clause flips to brand blue. */
.hl{ color:var(--blue-1); }
.hl-green{ color:var(--green-1); }

.lede{ font-size:clamp(15.5px,1.3vw,18px); color:var(--fg-1); max-width:64ch; }
.muted{ color:var(--fg-2); }
.small{ font-size:14px; }
.mono{ font-family:var(--mono); }

.section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(34px,3.6vw,56px); }
.section-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.section-head p{ max-width:50ch; }

/* --- Buttons ---------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:9px 9px 9px 24px; border-radius:var(--r-pill);
  font-family:var(--display); font-weight:600; font-size:14.5px;
  letter-spacing:-.008em; white-space:nowrap; cursor:pointer;
  transition:transform .4s var(--ease), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
}
.btn__ic{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  transition:transform .5s var(--ease), background .3s var(--ease);
}
.btn__ic svg{ width:15px; height:15px; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .btn__ic{ transform:rotate(45deg); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.btn--primary{ background:var(--blue-fill); color:var(--blue-ink); box-shadow:var(--shadow-blue); }
.btn--primary .btn__ic{ background:rgba(255,255,255,.18); color:var(--blue-ink); }
.btn--primary:hover{ background:#1A88FF; }

.btn--ghost{ background:transparent; color:var(--fg); border:1px solid var(--line-1); }
.btn--ghost .btn__ic{ background:var(--blue); color:var(--blue-ink); }
.btn--ghost:hover{ border-color:var(--line-blue); background:var(--blue-wash); }

.btn--dark{ background:var(--bg-1); color:var(--fg); border:1px solid var(--line); }
.btn--dark .btn__ic{ background:var(--blue); color:var(--blue-ink); }
.btn--dark:hover{ border-color:var(--line-blue); }

.btn--sm{ padding:7px 7px 7px 18px; font-size:13.5px; }
.btn--sm .btn__ic{ width:30px; height:30px; }
.btn--sm .btn__ic svg{ width:13px; height:13px; }

.icon-btn{
  width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer;
  display:grid; place-items:center;
  background:var(--bg); color:var(--fg); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .4s var(--ease);
}
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); transform:translateY(-2px); }
.icon-btn:active{ transform:scale(.95); }
.icon-btn--blue{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }

.tlink{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:14px;
  color:var(--fg); position:relative;
}
.tlink svg{ width:13px; height:13px; color:var(--blue-1); transition:transform .4s var(--ease); }
.tlink::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink:hover svg{ transform:translate(3px,-3px); }

/* Green tick, used wherever something is confirmed or included. */
.tick{ width:15px; height:15px; flex:none; color:var(--green-1); }

.card{
  position:relative; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-sm);
  transition:border-color .45s var(--ease), background .45s var(--ease),
             box-shadow .45s var(--ease), transform .45s var(--ease);
}
.card:hover{ border-color:var(--line-blue); box-shadow:var(--shadow); }

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-1); color:var(--fg-2);
}

/* --- Atmosphere ------------------------------------------------------- */
.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(130px); opacity:.75;
}
.glow--blue{ background:var(--blue-glow); }
.glow--green{ background:rgba(40,167,69,.18); }

.orb{
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%; aspect-ratio:1;
  background-image:radial-gradient(circle, rgba(16,24,38,.34) .9px, transparent 1px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 34% 30%, #000 8%, rgba(0,0,0,.55) 46%, transparent 71%);
          mask-image:radial-gradient(circle at 34% 30%, #000 8%, rgba(0,0,0,.55) 46%, transparent 71%);
  opacity:.3;
  animation:orb-spin 52s linear infinite;
}
.orb--blue{ background-image:radial-gradient(circle, rgba(0,123,255,.5) .9px, transparent 1px); opacity:.34; }
@keyframes orb-spin{ to{ transform:rotate(360deg); } }

/* Grain is a dark-canvas device. On white it reads as dirt, so it is off. */
.grain{ display:none; }
.grain--off{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   5. TOP BAR
   A quiet navy strip with a blue pill. A full-bleed blue band would put a long
   sentence on 4:1 contrast, and would shout over the hero.
   ========================================================================= */
.topbar{ position:relative; z-index:60; background:var(--bg-2); border-bottom:1px solid var(--line); }
.topbar__in{
  max-width:var(--shell); margin-inline:auto; padding:10px 28px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; text-align:center;
}
.topbar p{ font-size:13.5px; color:var(--fg-1); }
.topbar strong{ font-family:var(--display); font-weight:700; color:var(--fg); }
.topbar a{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--blue-fill); color:var(--blue-ink);
  font-family:var(--display); font-weight:600; font-size:12.5px;
  padding:6px 15px; border-radius:var(--r-pill);
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.topbar a:hover{ transform:translateY(-1px); background:#1A88FF; }
.topbar a:active{ transform:scale(.97); }
.topbar a svg{ width:11px; height:11px; }

/* =========================================================================
   6. NAV
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(255,255,255,.94); box-shadow:var(--shadow-sm); }
.nav__in{ max-width:var(--shell); margin-inline:auto; padding:14px 28px; display:flex; align-items:center; gap:28px; }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{ width:30px; height:30px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--display); font-weight:700; font-size:19px; color:var(--fg); letter-spacing:-.028em; }
.brand__sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--fg-3); margin-top:3px;
}

.nav__links{ display:none; align-items:center; gap:2px; }
@media (min-width:1060px){ .nav__links{ display:flex; } }
.nav__links a{
  font-size:14.5px; font-weight:500; color:var(--fg-1);
  padding:8px 14px; border-radius:var(--r-pill);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a:hover{ color:var(--fg); background:var(--bg-2); }
.nav__links a.is-active{ color:var(--blue-1); }

.nav__actions{ display:flex; align-items:center; gap:10px; }
.nav__cta{ display:none; }
@media (min-width:720px){ .nav__cta{ display:inline-flex; } }

.burger{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; border:1px solid var(--line); background:var(--bg);
}
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:16px; height:1.5px; background:var(--fg); border-radius:2px; transition:transform .35s var(--ease), opacity .2s; }
.burger span + span{ margin-top:4px; }
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobile-nav{ display:none; border-top:1px solid var(--line); background:var(--bg); padding:12px 28px 22px; }
.mobile-nav.is-open{ display:block; }
@media (min-width:1060px){ .mobile-nav,.mobile-nav.is-open{ display:none; } }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--fg);
}
.mobile-nav a span{ font-family:var(--mono); font-size:11px; color:var(--fg-3); }
.mobile-nav .btn{ margin-top:20px; width:100%; justify-content:space-between; }

/* =========================================================================
   7. HERO
   ========================================================================= */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px);
  background:
    radial-gradient(76% 76% at 6% -10%, rgba(0,123,255,.13), transparent 62%),
    radial-gradient(54% 58% at 97% 12%, rgba(40,167,69,.09), transparent 64%);
}
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-46%; left:-14%; width:min(1000px,120vw); aspect-ratio:1;
  background:repeating-radial-gradient(circle at 50% 50%,
      rgba(16,24,38,.07) 0 1px, transparent 1px 44px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 66%);
          mask-image:radial-gradient(circle at 50% 50%, #000 18%, transparent 66%);
}
.hero .container{ position:relative; z-index:2; }

.hero__grid{ display:grid; gap:clamp(30px,4vw,52px); align-items:end; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:1.55fr .78fr; } }

.hero__main{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.hero h1{ max-width:13ch; }
.hero__lede{ max-width:52ch; font-size:clamp(15.5px,1.4vw,18px); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:4px; }

.hero__signals{ display:flex; flex-direction:column; padding-bottom:6px; }
.hero__signals li{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:14px; color:var(--fg-1);
}
.hero__signals li:first-child{ border-top:0; padding-top:0; }
.hero__signals .tick{ margin-top:4px; }

.play{
  display:inline-flex; align-items:center; gap:13px; cursor:pointer;
  padding:6px 20px 6px 6px; border-radius:var(--r-pill);
  border:1px solid var(--line-1); background:var(--bg);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.play:hover{ border-color:var(--line-blue); background:var(--blue-wash); box-shadow:var(--shadow-sm); }
.play__disc{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--blue); color:var(--blue-ink);
  position:relative;
}
.play__disc::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--line-blue); animation:pulse-ring 2.8s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.86); opacity:.9 }
  70%{ transform:scale(1.24); opacity:0 }
  100%{ opacity:0 }
}
.play__disc svg{ width:13px; height:13px; margin-left:2px; }
.play__label{ font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--fg); }
.play__label small{
  display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}

.hero__facts{
  margin-top:clamp(42px,4.6vw,66px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .hero__facts{ grid-template-columns:repeat(4,1fr); } }
.hero__facts div{ padding:22px 26px 0 0; }
@media (min-width:760px){ .hero__facts div + div{ border-left:1px solid var(--line); padding-left:26px; } }
.hero__facts strong{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(30px,3.2vw,42px); color:var(--fg); letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.hero__facts div:nth-child(2) strong,
.hero__facts div:nth-child(4) strong{ color:var(--blue-1); }
.hero__facts span{ display:block; font-size:13px; color:var(--fg-2); margin-top:9px; }

.hero .orb--a{ width:200px; right:-56px; top:12%; }

/* =========================================================================
   8. MARQUEE
   ========================================================================= */
.marquee{
  position:relative; z-index:2;
  background:var(--blue-deep); color:var(--blue-ink);
  padding:15px 0; overflow:hidden;
}
.marquee__track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__group{ display:flex; align-items:center; flex:none; }
.marquee__group span{
  display:inline-flex; align-items:center; gap:22px;
  font-family:var(--display); font-weight:600; font-size:16px;
  letter-spacing:-.02em; padding-inline:22px; white-space:nowrap;
}
.marquee__group span::after{ content:"✦"; font-size:11px; opacity:.55; }

.marquee--muted{ background:var(--bg-1); color:var(--fg-2); border-block:1px solid var(--line); }
.marquee--muted .marquee__group span{ font-size:15px; font-weight:500; color:var(--fg-1); }
.marquee--muted .marquee__group span::after{ color:var(--blue-1); opacity:1; }

/* =========================================================================
   9. ABOUT ACCORDION
   ========================================================================= */
.about{ position:relative; overflow:hidden; }
.about .orb--a{ width:230px; left:-96px; top:56%; }

.acc{ display:flex; flex-direction:column; }
.acc__item{ border-top:1px solid var(--line); transition:background .4s var(--ease); }
.acc__item:last-child{ border-bottom:1px solid var(--line); }
.acc__item.is-open{ background:linear-gradient(90deg, var(--blue-wash), transparent 62%); }
.acc__btn{ width:100%; display:flex; align-items:center; gap:16px; padding:22px 4px; text-align:left; }
.acc__num{ font-family:var(--mono); font-size:11px; color:var(--blue-1); letter-spacing:.1em; flex:none; padding-top:3px; }
.acc__title{
  flex:1; font-family:var(--display); font-weight:600;
  font-size:clamp(16.5px,1.7vw,20px); color:var(--fg); letter-spacing:-.02em;
}
.acc__sign{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line-1);
  color:var(--fg-1); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.acc__sign svg{ width:13px; height:13px; transition:transform .45s var(--ease); }
.acc__item.is-open .acc__sign{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }
.acc__item.is-open .acc__sign svg{ transform:rotate(45deg); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ padding:0 40px 24px 33px; font-size:15px; color:var(--fg-2); max-width:68ch; }

/* =========================================================================
   10. SERVICES — a switcher, not a stack.
   All nine services sit in one rail and the detail panel swaps in place.
   This replaced three full-width editorial rows plus a six-item list, which
   together ran to roughly three screens on desktop.
   ========================================================================= */
.services{ position:relative; overflow:hidden; }
.services .glow--blue{ width:520px; height:520px; top:-170px; right:-210px; opacity:.3; }

.svc{ display:grid; gap:22px; }
@media (min-width:940px){ .svc{ grid-template-columns:.84fr 1.16fr; gap:36px; align-items:start; } }

/* --- The rail. Vertical on desktop, a scrolling chip row on mobile. --- */
.svc__rail{
  display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden;
  padding-bottom:10px; margin-bottom:-10px;
  scrollbar-width:thin; scrollbar-color:var(--line-1) transparent;
  -webkit-overflow-scrolling:touch;
}
.svc__rail::-webkit-scrollbar{ height:4px; }
.svc__rail::-webkit-scrollbar-thumb{ background:var(--line-1); border-radius:2px; }

.svc__tab{
  position:relative; flex:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line);
  color:var(--fg-1); white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.svc__tab:hover{ color:var(--fg); border-color:var(--line-blue); }
.svc__tab.is-on{ background:var(--blue-fill); border-color:var(--blue-fill); color:var(--blue-ink); }

.svc__tab-key{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--fg-3); flex:none; min-width:30px;
  transition:color .3s var(--ease);
}
.svc__tab.is-on .svc__tab-key{ color:inherit; }
.svc__tab-name{ flex:1; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.015em; }
.svc__tab-go{ display:none; }

@media (min-width:940px){
  .svc__rail{
    flex-direction:column; gap:0; overflow:visible;
    padding-bottom:0; margin-bottom:0;
    border-top:1px solid var(--line);
  }
  .svc__tab{
    width:100%; border:0; border-bottom:1px solid var(--line);
    border-radius:0; gap:14px; white-space:normal;
    /* Constant padding-left plus a sliding marker: the row never reflows when
       it becomes active. */
    padding:17px 14px 17px 16px;
    transition:color .3s var(--ease);
  }
  .svc__tab:hover,.svc__tab.is-on{ background:transparent; }
  .svc__tab::before{
    content:""; position:absolute; left:0; top:50%; width:2px; height:0;
    background:var(--blue); border-radius:2px;
    transform:translateY(-50%);
    transition:height .45s var(--ease);
  }
  .svc__tab.is-on::before{ height:58%; }
  .svc__tab.is-on{ color:var(--fg); }
  .svc__tab.is-on .svc__tab-key{ color:var(--blue-1); }
  .svc__tab-go{
    display:block; width:13px; height:13px; flex:none; color:var(--blue-1);
    opacity:0; transform:translateX(-6px);
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .svc__tab.is-on .svc__tab-go{ opacity:1; transform:none; }
}

/* --- The panel. --- */
.svc__panels{ position:relative; }
.svc__panel{ display:none; }
.svc__panel.is-on{ display:block; animation:panel-in .5s var(--ease) both; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.svc__card{
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--blue-wash), transparent 46%), var(--bg);
  padding:clamp(26px,3vw,38px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:20px;
}
.svc__head{ display:flex; align-items:center; gap:16px; }
.svc__ic{
  width:52px; height:52px; border-radius:15px; flex:none;
  display:grid; place-items:center;
  background:var(--blue); color:var(--blue-ink); box-shadow:var(--shadow-blue);
}
.svc__ic svg{ width:23px; height:23px; }
.svc__abbr{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-1); display:block; margin-bottom:5px;
}
.svc__card h3{ font-size:clamp(21px,2.3vw,28px); }
.svc__card > p{ font-size:15.5px; color:var(--fg-1); max-width:56ch; }

.svc__points{ display:grid; gap:10px 22px; }
@media (min-width:560px){ .svc__points{ grid-template-columns:1fr 1fr; } }
.svc__points li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--fg-1); }
.svc__points .tick{ margin-top:4px; }

.svc__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.svc__tags span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-2); border:1px solid var(--line-1); border-radius:var(--r-pill); padding:5px 11px;
}

.svc__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line);
}
.svc__count{ font-family:var(--mono); font-size:11px; color:var(--fg-3); letter-spacing:.1em; }

/* Footer note for a section. A rule ties it to the block above rather than
   leaving it floating under the last row. */
.services__note{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:14.5px; color:var(--fg-2);
}

/* =========================================================================
   11. STATS
   ========================================================================= */
.stats__box{
  position:relative; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line-blue); border-radius:var(--r-xl);
  background:
    radial-gradient(85% 130% at 12% 0%, rgba(0,123,255,.12), transparent 62%),
    var(--bg);
  padding:clamp(30px,3.6vw,48px);
  display:grid; gap:clamp(30px,4vw,56px);
}
@media (min-width:960px){ .stats__box{ grid-template-columns:.86fr 1.14fr; align-items:center; } }
.stats__figs{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
/* Results are green: the "proof" role. */
.stats__fig strong{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(38px,5vw,60px); color:var(--green-1);
  letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums;
}
.stats__fig span{ display:block; margin-top:10px; font-size:14px; color:var(--fg-2); max-width:24ch; }
.stats__copy h3{ margin-bottom:14px; }
.stats__copy p{ color:var(--fg-2); font-size:15.5px; max-width:52ch; }
.stats__copy .btn{ margin-top:26px; }

.facts{
  margin-top:clamp(28px,3vw,40px);
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
@media (min-width:1000px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts div{ padding:24px 24px 0 0; }
@media (min-width:1000px){ .facts div + div{ border-left:1px solid var(--line); padding-left:26px; } }
.facts strong{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(28px,3.1vw,38px); color:var(--fg); letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.facts div:nth-child(odd) strong{ color:var(--blue-1); }
.facts span{ display:block; margin-top:9px; font-size:13.5px; color:var(--fg-2); }

/* =========================================================================
   12. WHY
   ========================================================================= */
.why{ position:relative; overflow:hidden; }
.why .glow--green{ width:420px; height:420px; bottom:-180px; left:-160px; opacity:.4; }
.why__media{ position:relative; border-radius:var(--r-xl); overflow:hidden; }
.why__media img{ width:100%; aspect-ratio:4/3.5; object-fit:cover; }
/* No dark scrim on white. The chip below carries its own surface. */
.why__media::after{ content:none; }
.why__chip{
  position:absolute; z-index:2; left:20px; right:20px; bottom:20px;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow-sm);
}
.why__chip .icon-btn{ width:40px; height:40px; }
.why__chip strong{ display:block; font-family:var(--display); font-weight:600; font-size:15.5px; color:var(--fg); }
.why__chip span{ display:block; font-size:12.5px; color:var(--fg-2); }

.reasons{ display:flex; flex-direction:column; }
.reason{
  display:grid; grid-template-columns:auto 1fr; gap:4px 18px;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.reason:first-child{ padding-top:0; }
.reason__no{ grid-row:span 2; font-family:var(--mono); font-size:11px; color:var(--blue-1); letter-spacing:.1em; padding-top:6px; }
.reason h4{ font-size:18.5px; font-weight:600; transition:color .3s var(--ease); }
.reason p{ font-size:14.5px; color:var(--fg-2); max-width:52ch; }
.reason:hover h4{ color:var(--blue-1); }

/* =========================================================================
   13. SOCIAL STRIP
   Hover moves a background wash and the icon only. The earlier version
   animated padding-left, which reflowed the row under the cursor.
   ========================================================================= */
/* A divider band, not a full section. Two neighbouring full-padding sections
   left this short block stranded in dead space. */
.social-strip{ padding-block:0 !important; }
.social-strip__box{
  display:grid; gap:32px;
  padding-block:clamp(32px,3.6vw,50px);
  border-block:1px solid var(--line);
}
@media (min-width:960px){ .social-strip__box{ grid-template-columns:.85fr 1.15fr; align-items:center; } }

.social-links{ display:grid; gap:10px; }
@media (min-width:660px){ .social-links{ grid-template-columns:repeat(3,1fr); } }

.social-link{
  position:relative; isolation:isolate; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  padding:16px 18px; border-radius:var(--r);
  border:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.social-link::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--blue-wash); opacity:0;
  transition:opacity .35s var(--ease);
}
.social-link:hover{ border-color:var(--line-blue); }
.social-link:hover::before{ opacity:1; }
.social-link__ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--bg-1); color:var(--blue-1); border:1px solid var(--line);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .45s var(--ease);
}
.social-link:hover .social-link__ic{
  background:var(--blue); color:var(--blue-ink); border-color:var(--blue);
  transform:scale(1.06);
}
.social-link__ic svg{ width:16px; height:16px; }
.social-link__text{ min-width:0; }
.social-link strong{ display:block; font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--fg); }
.social-link span{
  display:block; font-family:var(--mono); font-size:11px; color:var(--fg-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.social-link__go{
  width:13px; height:13px; flex:none; margin-left:auto; color:var(--blue-1);
  opacity:0; transform:translate(-4px,4px);
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.social-link:hover .social-link__go{ opacity:1; transform:none; }

/* =========================================================================
   14. PROCESS
   ========================================================================= */
.process{ position:relative; overflow:hidden; }
.steps{ position:relative; display:grid; gap:18px; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){
  .steps{ grid-template-columns:repeat(4,1fr); align-items:start; }
  .steps > :nth-child(2){ margin-top:32px; }
  .steps > :nth-child(3){ margin-top:64px; }
  .steps > :nth-child(4){ margin-top:96px; }
}
.step{ position:relative; z-index:1; display:flex; flex-direction:column; gap:16px; min-height:280px; }
.step__pill{
  align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px;
}
.step h4{ font-size:19.5px; font-weight:600; }
.step p{ font-size:14.4px; color:var(--fg-2); }
.step__foot{
  margin-top:auto; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.step__no{
  font-family:var(--display); font-weight:700; font-size:46px;
  color:var(--fg); letter-spacing:-.06em; line-height:.88; font-variant-numeric:tabular-nums;
}
.step__no small{
  display:block; font-family:var(--mono); font-weight:400; font-size:9.5px;
  letter-spacing:.2em; color:var(--fg-3); margin-bottom:6px;
}
.step__ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--line-1); color:var(--blue-1);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.step__ic svg{ width:20px; height:20px; }
.step:hover .step__ic{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }

/* Inverted step. After the base, so nothing above wins on equal specificity. */
.step--blue{ background:var(--blue-fill); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-blue); }
.step--blue h4{ color:var(--blue-ink); }
.step--blue p{ color:rgba(255,255,255,.94); }
.step--blue .step__pill{ border-color:rgba(255,255,255,.42); color:#FFFFFF; }
.step--blue .step__foot{ border-top-color:rgba(255,255,255,.24); }
.step--blue .step__no{ color:var(--blue-ink); }
.step--blue .step__no small{ color:rgba(255,255,255,.82); }
.step--blue .step__ic{ background:rgba(255,255,255,.18); color:var(--blue-ink); border-color:transparent; }
.step--blue:hover .step__ic{ background:var(--blue-ink); color:var(--blue); border-color:var(--blue-ink); }

/* =========================================================================
   15. MOSAIC
   ========================================================================= */
.mosaic{ display:grid; gap:18px; }
@media (min-width:900px){
  .mosaic{ grid-template-columns:1.4fr .92fr; }
  .mosaic__a{ grid-row:span 2; }
}
.mfeat{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--bg-1); }
.mfeat img{ width:100%; height:100%; object-fit:cover; }
.mfeat__a-media{ aspect-ratio:16/10.5; }
.mfeat__b-media{ aspect-ratio:16/8.6; }
.mfeat__body{ padding:26px 28px 28px; }
.mfeat h4{ font-size:19.5px; font-weight:600; margin-bottom:8px; }
.mfeat p{ font-size:14.4px; color:var(--fg-2); max-width:52ch; }
.mfeat__badge{
  position:absolute; z-index:2; top:18px; left:18px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fg);
  box-shadow:var(--shadow-sm);
}
.mfeat--blue{ background:var(--blue-fill); border-color:var(--blue-fill); }
.mfeat--blue h4{ color:var(--blue-ink); }
.mfeat--blue p{ color:rgba(255,255,255,.95); }
.mfeat--blue .tag{ border-color:rgba(255,255,255,.44); color:#FFFFFF; }

/* =========================================================================
   16. WORK
   ========================================================================= */
.work{ position:relative; overflow:hidden; }
.filters{ display:flex; flex-wrap:wrap; gap:9px; }
.filter{
  font-family:var(--display); font-weight:500; font-size:13.5px; cursor:pointer;
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--fg-1);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.filter:hover{ border-color:var(--line-blue); color:var(--fg); }
.filter:active{ transform:scale(.97); }
.filter.is-active{ background:var(--blue-fill); border-color:var(--blue-fill); color:var(--blue-ink); }

.work-grid{ display:grid; gap:18px; margin-top:34px; align-items:start; }
@media (min-width:640px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }
.work-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--bg); cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover{ border-color:var(--line-blue); transform:translateY(-5px); box-shadow:var(--shadow); }
.work-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.work-card--tall .work-card__media{ aspect-ratio:4/4.6; }
.work-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.work-card:hover .work-card__media img{ transform:scale(1.05); }
/* A hairline under the image rather than a dark fade. The fade only existed
   to keep light text legible over the photo on the dark theme. */
.work-card__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--line);
}
.work-card__go{
  position:absolute; z-index:2; right:16px; top:16px;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:var(--blue-ink);
  opacity:0; transform:translateY(-6px) scale(.86);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.work-card__go svg{ width:15px; height:15px; }
.work-card:hover .work-card__go{ opacity:1; transform:none; }
.work-card__body{ position:relative; z-index:2; padding:22px 24px 24px; }
.work-card__cat{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-1); display:block; margin-bottom:8px;
}
.work-card h4{ font-size:18px; font-weight:600; }
.work-card p{ font-size:13.8px; color:var(--fg-2); margin-top:8px; }
.work-card__metric{
  margin-top:16px; padding-top:15px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11.5px; color:var(--fg-2);
}
.work-card__metric b{
  color:var(--green-1); font-family:var(--display); font-weight:700;
  font-size:20px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}

/* =========================================================================
   17. PRICING
   ========================================================================= */
.pricing{ position:relative; overflow:hidden; }
.pricing .glow--blue{ width:480px; height:480px; top:12%; left:-230px; opacity:.24; }

.toggle{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 6px 6px 18px;
}
.toggle__label{ font-family:var(--display); font-weight:500; font-size:13.5px; color:var(--fg-2); cursor:pointer; transition:color .25s var(--ease); }
.toggle__label.is-on{ color:var(--fg); }
.toggle__switch{
  position:relative; width:52px; height:28px; border-radius:var(--r-pill);
  background:var(--bg-2); border:1px solid var(--line); flex:none; cursor:pointer;
}
.toggle__switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%; background:var(--blue);
  transition:transform .45s var(--ease);
}
.toggle.is-yearly .toggle__switch::after{ transform:translateX(24px); }
.toggle__save{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--green-wash); color:var(--green-1); border:1px solid rgba(69,212,106,.32);
  border-radius:var(--r-pill); padding:5px 11px;
}

.plans{ display:grid; gap:18px; margin-top:42px; align-items:start; }
@media (min-width:760px){ .plans{ grid-template-columns:repeat(3,1fr); } }
.plan{ position:relative; display:flex; flex-direction:column; gap:20px; padding:32px 30px; }
@media (min-width:760px){ .plan--feature{ margin-top:-18px; padding-block:44px 36px; } }
.plan h3{ font-size:20px; font-weight:600; }
.plan__price{ display:flex; align-items:flex-end; gap:8px; }
.plan__price b{
  font-family:var(--display); font-weight:700; font-size:clamp(36px,3.8vw,46px);
  color:var(--fg); letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums;
}
.plan__price > span{ font-size:13.5px; color:var(--fg-2); padding-bottom:5px; }
.plan__desc{ font-size:14.2px; color:var(--fg-2); }
.plan__list{ display:flex; flex-direction:column; gap:11px; }
.plan__list li{ display:flex; gap:10px; font-size:14px; color:var(--fg-1); align-items:flex-start; }
.plan__list svg{ width:16px; height:16px; flex:none; color:var(--green-1); margin-top:3px; }
.plan__list li.is-off{ color:var(--fg-3); }
.plan__list li.is-off svg{ color:var(--fg-3); opacity:.5; }
.plan .btn{ margin-top:auto; justify-content:space-between; }
.plan__flag{
  position:absolute; top:0; right:24px;
  background:var(--blue-fill); color:var(--blue-ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 13px; border-radius:0 0 10px 10px;
}

.plan--feature{ background:var(--blue-fill); border-color:var(--blue-fill); box-shadow:var(--shadow-blue); }
.plan--feature:hover{ background:#0F84FF; border-color:#0F84FF; }
.plan--feature h3,
.plan--feature .plan__price b{ color:var(--blue-ink); }
.plan--feature .plan__price > span,
.plan--feature .plan__desc{ color:rgba(255,255,255,.92); }
.plan--feature .plan__list li{ color:#FFFFFF; }
.plan--feature .plan__list svg{ color:var(--blue-ink); }
.plan--feature .plan__flag{ background:var(--blue-ink); color:var(--blue-1); }
.plan--feature .btn--primary{ background:var(--blue-ink); color:var(--blue-1); box-shadow:none; }
.plan--feature .btn--primary .btn__ic{ background:var(--blue-1); color:var(--blue-ink); }
.plan--feature .btn--primary:hover{ background:#EAF4FF; }

.pricing__foot{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px 30px; font-size:13.5px; color:var(--fg-2); }
.pricing__foot span{ display:inline-flex; align-items:center; gap:8px; }

/* =========================================================================
   18. TESTIMONIALS
   ========================================================================= */
.testi__grid{ display:grid; gap:clamp(28px,3.4vw,50px); }
@media (min-width:940px){ .testi__grid{ grid-template-columns:.62fr 1.38fr; align-items:start; } }

.rating{ display:flex; flex-direction:column; gap:14px; }
.rating__stars{ display:flex; gap:4px; }
.rating__stars svg{ width:18px; height:18px; color:var(--green-1); }
.rating__score{
  font-family:var(--display); font-weight:700; font-size:clamp(62px,7vw,92px);
  color:var(--fg); letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums;
}
.rating p{ font-size:14.5px; color:var(--fg-2); max-width:26ch; }
.rating__src{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }

.quotes{ display:grid; gap:18px; }
@media (min-width:660px){ .quotes{ grid-template-columns:repeat(2,1fr); } }
.quote{ display:flex; flex-direction:column; gap:18px; }
.quote__mark{ font-family:var(--display); font-size:46px; font-weight:700; color:var(--blue-1); line-height:.55; }
.quote p{ font-size:15.5px; color:var(--fg-1); }
.quote__who{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:13px; }
.quote__av{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; border:1px solid var(--line-1);
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--blue-1);
}
.quote__who strong{ display:block; font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--fg); }
.quote__who span{ display:block; font-size:12.5px; color:var(--fg-2); }
.quote--empty p,
.quote--empty .quote__mark,
.quote--empty .quote__av,
.quote--empty .quote__who strong,
.quote--empty .quote__who span{ color:var(--fg-3); }

/* =========================================================================
   19. BENEFITS
   ========================================================================= */
.benefits{ position:relative; overflow:hidden; }
.benefits .orb--a{ width:270px; right:-110px; top:10%; }
.bene-list{ display:grid; border-top:1px solid var(--line); }
@media (min-width:820px){ .bene-list{ grid-template-columns:1fr 1fr; column-gap:60px; } }
.bene{
  display:grid; grid-template-columns:auto 1fr; gap:6px 20px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.bene__no{
  grid-row:span 2; font-family:var(--display); font-weight:700; font-size:26px;
  color:var(--fg-3); letter-spacing:-.05em; line-height:1; padding-top:4px;
  font-variant-numeric:tabular-nums; transition:color .4s var(--ease);
}
.bene:hover .bene__no{ color:var(--blue-1); }
.bene h4{ font-size:18px; font-weight:600; }
.bene p{ font-size:14.2px; color:var(--fg-2); max-width:46ch; }

/* =========================================================================
   20. CONTACT + FAQ
   ========================================================================= */
.contact{ position:relative; overflow:hidden; }
.contact .glow--blue{ width:440px; height:440px; right:-180px; bottom:-160px; opacity:.3; }
.contact__grid{ display:grid; gap:clamp(30px,4vw,58px); }
@media (min-width:980px){ .contact__grid{ grid-template-columns:1.02fr .98fr; } }

.form{ display:flex; flex-direction:column; gap:15px; }
.form__row{ display:grid; gap:15px; }
@media (min-width:520px){ .form__row{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-2);
}
.field input,.field textarea,.field select{
  width:100%; min-height:46px; background:transparent;
  border:1px solid var(--line-1); border-radius:var(--r);
  padding:12px 16px; font-size:15px; color:var(--fg); font-family:var(--body);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:124px; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--bg-1); color:var(--fg); }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--line-blue); background:var(--blue-wash);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#E5624A; }
.field--select{ position:relative; }
.field--select::after{
  content:""; position:absolute; right:18px; bottom:19px; pointer-events:none;
  width:7px; height:7px; border-right:1.5px solid var(--fg-2); border-bottom:1.5px solid var(--fg-2);
  transform:rotate(45deg);
}
.form .btn{ align-self:flex-start; margin-top:8px; }
.form__note{ font-size:12.5px; color:var(--fg-3); }
.form__note a{ color:var(--fg-1); border-bottom:1px solid var(--line-blue); }
.form__msg{
  display:none; align-items:flex-start; gap:10px; padding:14px 16px;
  border-radius:var(--r); border:1px solid rgba(69,212,106,.4);
  background:var(--green-wash); color:var(--green-1); font-size:14px;
}
.form__msg.is-on{ display:flex; }
.form__msg.is-error{ border-color:rgba(229,98,74,.5); background:rgba(229,98,74,.08); color:#F0937F; }
.form__msg svg{ width:16px; height:16px; flex:none; margin-top:3px; }

/* --- FAQ ---------------------------------------------------------------
   Discrete panels with a real open state, replacing a hairline list with a
   gradient wash. The open item lifts onto its own surface, the control fills
   blue and rotates to a cross, and the answer sits in the same padded block
   as its question so the two read as one unit.
   -------------------------------------------------------------------- */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.faq__item:hover{ border-color:var(--line-1); box-shadow:var(--shadow-sm); }
.faq__item.is-open{ background:var(--bg-1); border-color:var(--line-blue); box-shadow:var(--shadow); }
.faq__btn{
  width:100%; display:flex; align-items:flex-start; gap:16px;
  padding:20px 22px; text-align:left; cursor:pointer;
}
.faq__q{
  flex:1; font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--fg-1); letter-spacing:-.015em; line-height:1.42;
  transition:color .3s var(--ease);
}
.faq__item:hover .faq__q,
.faq__item.is-open .faq__q{ color:var(--fg); }
.faq__sign{
  flex:none; width:30px; height:30px; border-radius:50%; margin-top:-1px;
  display:grid; place-items:center;
  border:1px solid var(--line-1); color:var(--fg-2);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.faq__sign svg{ width:12px; height:12px; transition:transform .5s var(--ease); }
.faq__item.is-open .faq__sign{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }
.faq__item.is-open .faq__sign svg{ transform:rotate(135deg); }
.faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq__item.is-open .faq__panel{ grid-template-rows:1fr; }
.faq__panel > div{ overflow:hidden; }
.faq__panel p{
  padding:0 22px 22px;
  font-size:14.6px; line-height:1.72; color:var(--fg-2); max-width:64ch;
}
@media (min-width:520px){ .faq__panel p{ padding-right:62px; } }

/* =========================================================================
   21. INSIGHTS
   ========================================================================= */
.posts{ display:grid; gap:18px; }
@media (min-width:860px){ .posts{ grid-template-columns:1.32fr .88fr; } }
.post{
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--bg);
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post:hover{ border-color:var(--line-blue); transform:translateY(-4px); box-shadow:var(--shadow); }
.post__media{ overflow:hidden; aspect-ratio:16/9.6; }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.post:hover .post__media img{ transform:scale(1.05); }
.post__body{ padding:24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.post__meta{
  display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3);
}
.post__meta b{ color:var(--blue-1); font-weight:500; }
.post h4{ font-size:18px; font-weight:600; line-height:1.26; }
.post p{ font-size:14.2px; color:var(--fg-2); max-width:52ch; }
.post .tlink{ margin-top:auto; padding-top:10px; align-self:flex-start; }

.post--lead{ grid-row:span 2; }
.post--lead .post__media{ aspect-ratio:16/9.2; }
.post--lead h4{ font-size:clamp(21px,2.2vw,27px); line-height:1.16; }
.post--lead .post__body{ padding:28px; gap:13px; }

.post--compact{ flex-direction:row; }
.post--compact .post__media{ flex:none; width:38%; aspect-ratio:auto; }
.post--compact .post__body{ padding:20px 22px; }
.post--compact h4{ font-size:16.5px; }

/* =========================================================================
   22. BIG CTA
   ========================================================================= */
.bigcta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(78px,9vw,140px);
  background:
    radial-gradient(70% 90% at 50% 108%, rgba(0,123,255,.20), transparent 62%),
    radial-gradient(56% 66% at 8% 0%, rgba(40,167,69,.10), transparent 66%);
}
.bigcta .orb--a{ width:290px; left:-120px; bottom:-70px; }
.bigcta .orb--b{ width:230px; right:-90px; top:-46px; }
.bigcta .container{ position:relative; z-index:2; }
.bigcta__eyebrow{ margin-bottom:26px; }
.bigcta h2{
  font-size:clamp(46px,11.4vw,148px); letter-spacing:-.055em; line-height:.9;
  text-transform:uppercase; font-weight:700;
}
.bigcta__row{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,2.4vw,30px); flex-wrap:wrap; }
.bigcta__actions{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.disc{ position:relative; width:clamp(80px,10vw,118px); aspect-ratio:1; flex:none; cursor:pointer; }
.disc__ring{ position:absolute; inset:0; animation:orb-spin 20s linear infinite; }
.disc__ring text{
  font-family:var(--mono); font-size:9.4px; letter-spacing:.24em;
  text-transform:uppercase; fill:var(--blue-ink); font-weight:500;
}
.disc__face{ position:absolute; inset:0; border-radius:50%; background:var(--blue); }
.disc__arrow{ position:absolute; inset:0; display:grid; place-items:center; color:var(--blue-ink); }
.disc__arrow svg{ width:25%; height:25%; transition:transform .5s var(--ease); }
.disc:hover .disc__arrow svg{ transform:translate(3px,-3px); }

/* =========================================================================
   23. FOOTER
   ========================================================================= */
.footer{ background:var(--bg-1); border-top:1px solid var(--line); }
.footer__top{ padding-block:clamp(46px,5vw,68px); display:grid; gap:clamp(32px,4vw,52px); }
@media (min-width:940px){ .footer__top{ grid-template-columns:1.5fr 1fr 1fr 1.35fr; } }
.footer__brand{ display:flex; flex-direction:column; gap:20px; }
.footer__brand p{ font-size:14.5px; color:var(--fg-2); max-width:38ch; }
.footer__nap{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer__nap a,.footer__nap span{ display:flex; align-items:flex-start; gap:10px; color:var(--fg-1); transition:color .25s var(--ease); }
.footer__nap a:hover{ color:var(--blue-1); }
.footer__nap svg{ width:15px; height:15px; flex:none; color:var(--blue-1); margin-top:5px; }

.footer__col h5{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fg-3); margin-bottom:18px;
}
.footer__col ul{ display:flex; flex-direction:column; gap:11px; }
.footer__col a{ font-size:14.5px; color:var(--fg-1); transition:color .25s var(--ease); }
.footer__col a:hover{ color:var(--blue-1); }

.newsletter{ display:flex; gap:8px; margin-top:16px; }
.newsletter input{
  flex:1; min-width:0; background:transparent; border:1px solid var(--line-1);
  border-radius:var(--r-pill); padding:12px 18px; font-size:14px; color:var(--fg);
  transition:border-color .3s var(--ease);
}
.newsletter input::placeholder{ color:var(--fg-3); }
.newsletter input:focus{ outline:none; border-color:var(--line-blue); }
.newsletter button{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:var(--blue-ink); display:grid; place-items:center;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.newsletter button:hover{ transform:translateY(-2px); background:#1A88FF; }
.newsletter button:active{ transform:scale(.95); }
.newsletter button svg{ width:16px; height:16px; }
.newsletter__msg{ font-size:12.5px; color:var(--green-1); margin-top:10px; min-height:18px; }

.socials{ display:flex; gap:9px; }
.socials a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-1); color:var(--fg-1);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .4s var(--ease);
}
.socials a:hover{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); transform:translateY(-2px); }
.socials svg{ width:15px; height:15px; }

.footer__bottom{
  border-top:1px solid var(--line); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--fg-3);
}
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__bottom a{ transition:color .25s var(--ease); }
.footer__bottom a:hover{ color:var(--blue-1); }

.wa{
  position:fixed; left:22px; bottom:22px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#F6FFF9;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.4);
  transition:transform .4s var(--ease);
}
.wa:hover{ transform:translateY(-3px); }
.wa:active{ transform:scale(.95); }
.wa svg{ width:27px; height:27px; }

.totop{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line); color:var(--fg); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility .35s, background .3s var(--ease), color .3s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }
.totop svg{ width:16px; height:16px; }

/* =========================================================================
   24. UTILITIES
   ========================================================================= */
[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[hidden]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Touch devices get a comfortable tap area on inline links. */
@media (pointer:coarse){
  .tlink{ padding-block:11px; }
  .topbar a{ padding-block:9px; }
  .footer__col a,.footer__nap a{ padding-block:3px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================================
   26. DOCUMENT PAGES
   Service pages, the services hub, about and contact. These are read rather
   than scanned, so the constraints are typographic: a 65-75ch measure, a
   heading hierarchy that never skips a level, and answer-first blocks that
   survive being extracted out of context by an AI crawler.
   ========================================================================= */
.doc{ padding-block:clamp(28px,3.4vw,44px) clamp(56px,6vw,88px); }

/* --- Breadcrumbs. Mirrors the BreadcrumbList in the schema graph. --- */
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.crumbs li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fg-2); }
.crumbs li + li::before{
  content:""; width:5px; height:5px; flex:none;
  border-top:1.5px solid var(--fg-3); border-right:1.5px solid var(--fg-3);
  transform:rotate(45deg);
}
.crumbs a{ color:var(--fg-2); transition:color .25s var(--ease); }
.crumbs a:hover{ color:var(--blue-1); }
.crumbs [aria-current]{ color:var(--fg); }

.doc__head{
  padding-block:clamp(26px,3vw,42px) clamp(28px,3.2vw,44px);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}
.doc__head h1{ max-width:19ch; }
.doc__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* --- The answer-first definition block. --- */
.definition{
  border-left:0;
  background:linear-gradient(120deg, var(--blue-wash), transparent 70%), var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px 26px;
  max-width:74ch;
}
.definition p{
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.6; color:var(--fg);
  text-wrap:pretty;
}
.definition strong{ color:var(--blue-1); font-weight:700; }

.doc__body{ padding-top:clamp(30px,3.4vw,48px); }
.doc__section{ margin-bottom:clamp(38px,4.4vw,64px); }
.doc__section > h2{
  font-size:clamp(21px,2.4vw,30px); letter-spacing:-.028em;
  margin-bottom:18px; max-width:24ch;
}
.doc__section > h2 + .prose,
.doc__section > h2 + .qa,
.doc__section > h2 + .checks{ margin-top:0; }

/* --- Running prose. Measure capped at the readable range. --- */
.prose{ display:flex; flex-direction:column; gap:16px; max-width:70ch; }
.prose p{ font-size:16.5px; line-height:1.75; color:var(--fg-1); text-wrap:pretty; }

/* --- Tick lists --- */
.checks{ display:grid; gap:12px; max-width:70ch; }
.checks--2{ }
@media (min-width:680px){ .checks--2{ grid-template-columns:1fr 1fr; gap:12px 28px; max-width:none; } }
.checks li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--fg-1); }
.checks .tick{ margin-top:4px; }

/* --- Deliverables: a definition list, numbered, hairline separated. --- */
.deliverables{ margin:0; display:grid; border-top:1px solid var(--line); }
.deliverable{ padding:22px 0; border-bottom:1px solid var(--line); }
.deliverable dt{ display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.deliverable__no{
  font-family:var(--mono); font-size:11px; color:var(--blue-1);
  letter-spacing:.1em; flex:none; font-variant-numeric:tabular-nums;
}
.deliverable dt h3{ font-size:18px; font-weight:600; letter-spacing:-.018em; }
.deliverable dd{ margin:0 0 0 34px; font-size:15.5px; line-height:1.7; color:var(--fg-2); max-width:66ch; }

/* --- Ordered process list --- */
.runlist{ counter-reset:run; display:grid; gap:0; border-top:1px solid var(--line); }
.runlist li{
  counter-increment:run; position:relative;
  padding:20px 0 20px 46px; border-bottom:1px solid var(--line);
}
.runlist li::before{
  content:counter(run,decimal-leading-zero);
  position:absolute; left:0; top:23px;
  font-family:var(--mono); font-size:11px; color:var(--blue-1); letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.runlist h3{ font-size:17.5px; font-weight:600; margin-bottom:5px; }
.runlist p{ font-size:15px; line-height:1.7; color:var(--fg-2); max-width:64ch; }

/* --- Q&A. Plain semantic HTML, deliberately not FAQPage schema. --- */
.qa{ display:grid; gap:0; border-top:1px solid var(--line); }
.qa__item{ padding:24px 0; border-bottom:1px solid var(--line); }
.qa__item h3{
  font-size:17.5px; font-weight:600; letter-spacing:-.018em;
  margin-bottom:9px; max-width:56ch;
}
.qa__item p{ font-size:15.5px; line-height:1.72; color:var(--fg-2); max-width:70ch; }

/* --- Related services: internal links with real anchor text. --- */
.related{ display:grid; gap:12px; }
@media (min-width:760px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related__card{
  display:flex; align-items:flex-start; gap:13px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); box-shadow:var(--shadow-sm);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.related__card:hover{ border-color:var(--line-blue); transform:translateY(-3px); box-shadow:var(--shadow); }
.related__ic{
  width:36px; height:36px; border-radius:11px; flex:none;
  display:grid; place-items:center; color:var(--blue-1);
  border:1px solid var(--line);
}
.related__ic svg{ width:17px; height:17px; }
.related__text{ min-width:0; }
.related__text strong{ display:block; font-family:var(--display); font-weight:600; font-size:15px; color:var(--fg); }
.related__text span{ display:block; font-size:13.5px; line-height:1.55; color:var(--fg-2); margin-top:5px; }
.related__go{ width:13px; height:13px; flex:none; color:var(--blue-1); margin-left:auto; }

.doc__foot{ padding-top:24px; border-top:1px solid var(--line); }
.doc__meta{ font-size:13.5px; color:var(--fg-3); }
.doc__meta time{ font-variant-numeric:tabular-nums; }

/* --- Two-column service layout ---------------------------------------- */
.doc__body{ display:block; }
@media (min-width:1000px){
  .doc__body{
    display:grid; grid-template-columns:minmax(0,1fr) 296px;
    gap:clamp(40px,5vw,80px); align-items:start;
  }
}
.doc__main{ min-width:0; }

.doc__aside{ display:none; }
@media (min-width:1000px){ .doc__aside{ display:block; } }
.aside__sticky{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }

.toc__label{
  display:block; padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3);
}
.toc ol{ counter-reset:toc; display:flex; flex-direction:column; }
.toc li{ counter-increment:toc; }
.toc a{
  display:flex; gap:10px; padding:7px 0;
  font-size:14px; color:var(--fg-2);
  transition:color .25s var(--ease);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:10.5px; color:var(--fg-3);
  padding-top:2px; flex:none;
}
.toc a:hover{ color:var(--blue-1); }

.aside__cta{
  padding:22px; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  background:linear-gradient(150deg, var(--blue-wash), transparent 62%), var(--bg);
}
.aside__cta h2{ font-size:17px !important; font-weight:600; margin-bottom:8px !important; max-width:none !important; }
.aside__cta p{ font-size:13.8px; line-height:1.6; color:var(--fg-2); margin-bottom:16px; }
.aside__contact{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; }
.aside__contact a{ color:var(--blue-1); }
.aside__contact a:hover{ text-decoration:underline; }

/* =========================================================================
   27. SERVICES HUB
   ========================================================================= */
.svc-hub{ display:grid; gap:14px; }
@media (min-width:700px){ .svc-hub{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .svc-hub{ grid-template-columns:repeat(3,1fr); } }

.hubcard{
  display:flex; flex-direction:column; gap:10px;
  padding:24px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); box-shadow:var(--shadow-sm);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hubcard:hover{ border-color:var(--line-blue); transform:translateY(-4px); box-shadow:var(--shadow); }
.hubcard__ic{
  width:44px; height:44px; border-radius:13px; flex:none;
  display:grid; place-items:center; color:var(--blue-1); border:1px solid var(--line);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hubcard__ic svg{ width:20px; height:20px; }
.hubcard:hover .hubcard__ic{ background:var(--blue-fill); color:var(--blue-ink); border-color:var(--blue-fill); }
.hubcard h3{ font-size:18px; font-weight:600; letter-spacing:-.02em; }
.hubcard p{ font-size:14.5px; line-height:1.65; color:var(--fg-2); }
.hubcard .tlink{ margin-top:auto; padding-top:8px; align-self:flex-start; }

.hubcard--lead{ background:linear-gradient(150deg, var(--blue-wash), transparent 60%), var(--bg); }
.hubcard__abbr{
  position:absolute; opacity:0; pointer-events:none;
}
.hubcard--lead .hubcard__ic{ background:var(--blue-fill); color:var(--blue-ink); border-color:var(--blue-fill); }

/* =========================================================================
   28. ABOUT + CONTACT BLOCKS
   ========================================================================= */
.people{ display:grid; gap:16px; margin-top:28px; }
@media (min-width:760px){ .people{ grid-template-columns:1fr 1fr; } }
.person{
  display:flex; gap:16px; padding:22px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); box-shadow:var(--shadow-sm);
}
.person__av{
  width:48px; height:48px; border-radius:50%; flex:none;
  display:grid; place-items:center; border:1px solid var(--line);
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--blue-1);
}
.person h3{ font-size:17px; font-weight:600; }
.person__role{ font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); margin:4px 0 9px; }
.person p{ font-size:14.8px; line-height:1.68; color:var(--fg-2); }

.pullquote{
  margin:0; padding:28px 30px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(140deg, var(--blue-wash), transparent 62%), var(--bg);
  box-shadow:var(--shadow-sm); max-width:74ch;
}
.pullquote p{ font-size:17.5px; line-height:1.62; color:var(--fg); text-wrap:pretty; }
.pullquote footer{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.pullquote strong{ display:block; font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--fg); }
.pullquote footer span{ display:block; font-size:13px; color:var(--fg-2); }

.nap-block{
  display:flex; flex-direction:column; gap:14px;
  font-size:15.5px; line-height:1.7; color:var(--fg-1);
}
.nap-block__name{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--fg); }
.nap-block a{ color:var(--blue-1); }
.nap-block a:hover{ text-decoration:underline; }

/* =========================================================================
   29. NAV DROPDOWN
   All nine service pages one click from anywhere, so crawl depth stays at 2.
   ========================================================================= */
.nav__drop{ position:relative; }
.nav__drop > a{ display:inline-flex; align-items:center; gap:6px; }
.nav__caret{ width:12px; height:12px; color:var(--fg-3); transition:transform .35s var(--ease); }
.nav__drop:hover .nav__caret,
.nav__drop:focus-within .nav__caret{ transform:rotate(180deg); }

.nav__menu{
  position:absolute; top:100%; left:-8px; z-index:60;
  min-width:330px; padding:14px 10px 10px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu{ opacity:1; visibility:visible; transform:translateY(4px); }
.nav__menu-label{
  display:block; padding:0 12px 10px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3);
}
.nav__menu a{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:var(--r-sm);
  transition:background .25s var(--ease);
}
.nav__menu a:hover{ background:var(--bg-2); }
.nav__menu-key{
  font-family:var(--mono); font-size:10.5px; color:var(--blue-1);
  min-width:34px; letter-spacing:.06em;
}
.nav__menu-name{ font-size:14.5px; font-weight:500; color:var(--fg-1); }
.nav__menu a:hover .nav__menu-name{ color:var(--fg); }

.mobile-nav__sub{ padding-left:14px !important; font-size:14.5px !important; font-weight:500 !important; color:var(--fg-1) !important; }

/* Contact page reuses the two-column grid from the home section. */
.doc .contact__grid{ display:grid; gap:clamp(32px,4vw,58px); }
@media (min-width:900px){ .doc .contact__grid{ grid-template-columns:1.05fr .95fr; } }
.doc .contact__grid h2{ font-size:clamp(20px,2.2vw,26px); margin-bottom:0; }

/* =========================================================================
   25. PRINT
   ========================================================================= */
@media print{
  .nav,.topbar,.wa,.totop,.marquee,.grain,.glow,.orb{ display:none !important; }
  body{ background:#fff; color:#101826; }
  .svc__panel{ display:block !important; }
}