/* ============================================================
   NEXFLUENCEE — UI LAYER
   Loaded last so it wins over the per-page <style> blocks.

   Palette is sampled from the logo itself: a violet→magenta
   gradient (#7c3aed → #a855f7 → #c050f0) sitting on near-black.
   ============================================================ */

:root {
  /* Brand gradient, pulled from the logo mark */
  --g1: #6d28d9;   /* deep violet   */
  --g2: #7c3aed;   /* core violet   */
  --g3: #a855f7;   /* light violet  */
  --g4: #c050f0;   /* magenta       */
  --g5: #4f46e5;   /* indigo        */

  --grad-brand: linear-gradient(135deg, var(--g2) 0%, var(--g3) 50%, var(--g4) 100%);
  --grad-soft:  linear-gradient(135deg, #f6f2ff 0%, #fdf4ff 100%);
  --grad-deep:  linear-gradient(135deg, #16121f 0%, #1d1630 55%, #241a3d 100%);

  /* Tinted neutrals — replaces the flat white */
  --white:  #ffffff;
  --bg:     #faf9fd;
  --off:    #f4f1fa;
  --pale:   #ebe6f5;
  --rule:   #e6e1f0;
  --rule-2: #d9d2e8;

  --ink:      #12101a;
  --ink-soft: #2e2a3a;
  --muted:    #6a6480;

  /* Card accents — each card family gets its own hue */
  --a1: #7c3aed;  --a1-bg: #f4efff;
  --a2: #4f46e5;  --a2-bg: #eef0ff;
  --a3: #c026d3;  --a3-bg: #fdf0fc;
  --a4: #0ea5e9;  --a4-bg: #ecf8ff;
  --a5: #059669;  --a5-bg: #e9fbf4;
  --a6: #ea580c;  --a6-bg: #fff2ea;

  --shadow-sm: 0 1px 2px rgba(18,16,26,.04), 0 2px 8px rgba(18,16,26,.03);
  --shadow-md: 0 4px 12px rgba(18,16,26,.05), 0 12px 32px rgba(109,40,217,.06);
  --shadow-lg: 0 8px 24px rgba(18,16,26,.07), 0 24px 60px rgba(109,40,217,.10);
  --shadow-nav: 0 2px 8px rgba(18,16,26,.04), 0 12px 32px rgba(18,16,26,.06);

  /* One easing curve everywhere, so motion feels like one system */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Registered so the conic gradient angle can actually animate.
   Browsers without @property just get a static gradient border. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── AMBIENT BACKGROUND ───────────────────────────────
   Replaces the flat white with a soft tinted field and
   three very diffuse colour blooms. */
body { background: var(--bg); }

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px circle at 12% 8%,   rgba(124, 58,237,.10), transparent 62%),
    radial-gradient(560px circle at 88% 22%,  rgba(192, 80,240,.08), transparent 60%),
    radial-gradient(700px circle at 50% 96%,  rgba( 79, 70,229,.07), transparent 64%);
}
body > * { position: relative; z-index: 1; }

.section     { background: transparent; }
.section-alt {
  background: linear-gradient(180deg, rgba(244,241,250,.85) 0%, rgba(248,245,253,.6) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ── HERO ─────────────────────────────────────────────
   The two columns were near-identical shades of white.
   The right rail now reads as a distinct tinted panel. */
.hero { border-bottom: 1px solid var(--rule); }
.hero-left { border-right: 1px solid var(--rule); }
.hero-right {
  background:
    linear-gradient(200deg, rgba(124,58,237,.07) 0%, rgba(192,80,240,.05) 45%, rgba(79,70,229,.06) 100%),
    #fbfaff;
}
.three-circles {
  background: var(--rule);
  box-shadow: var(--shadow-md);
  border-color: var(--rule);
}
.circle-item { background: linear-gradient(165deg, #fff 0%, #fdfcff 100%); }

/* ── FLOATING NAVBAR ──────────────────────────────────
   Detached pill with glass blur, in the style of the
   Foxkrit header. Collapses tighter once you scroll. */
.nav {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 2.5rem));
  height: 62px;
  padding: 0 .5rem 0 1.3rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-nav);
  transition: height .35s var(--ease), top .35s var(--ease),
              background .35s var(--ease), box-shadow .35s var(--ease),
              width .35s var(--ease);
}
.nav.scrolled {
  top: 10px;
  height: 56px;
  width: min(1060px, calc(100% - 2rem));
  background: rgba(255,255,255,.86);
  box-shadow: 0 4px 14px rgba(18,16,26,.06), 0 16px 44px rgba(109,40,217,.10);
}

.nav-logo img {
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(109,40,217,.22);
  transition: transform .35s var(--ease-out);
}
.nav-logo:hover img { transform: rotate(-6deg) scale(1.06); }
.nav-logo-text span {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.nav-links a {
  position: relative;
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { background: rgba(124,58,237,.08); color: var(--g2); }
.nav-links a.active {
  background: rgba(124,58,237,.10);
  color: var(--g1);
}

.nav-cta {
  position: relative; overflow: hidden;
  background: var(--grad-brand);
  background-size: 200% 100%;
  border-radius: 999px;
  padding: .62rem 1.35rem;
  box-shadow: 0 2px 10px rgba(124,58,237,.30);
  transition: background-position .5s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.nav-cta:hover {
  background-position: 100% 0;
  box-shadow: 0 4px 18px rgba(124,58,237,.42);
  transform: translateY(-1px);
}

.nav-toggle:hover { background: rgba(124,58,237,.08); }

/* ── BUTTONS ────────────────────────────────────────── */
.btn { border-radius: 999px; transition: transform .22s var(--ease), box-shadow .3s var(--ease), background-position .5s var(--ease), border-color .25s, color .25s; }
.btn-primary {
  background: var(--grad-brand);
  background-size: 200% 100%;
  box-shadow: 0 3px 14px rgba(124,58,237,.28);
}
.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 8px 26px rgba(124,58,237,.40);
  transform: translateY(-2px);
}
.btn-outline {
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--rule-2);
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  border-color: var(--g3);
  background: rgba(255,255,255,.95);
  color: var(--g1);
  box-shadow: 0 6px 20px rgba(124,58,237,.14);
}
.btn-white { border-radius: 999px; }
.btn-white:hover { box-shadow: 0 8px 26px rgba(255,255,255,.18); }

/* ── HEADLINE GRADIENT ACCENT ───────────────────────── */
.hero-h1 em,
.purple-txt,
.hcta-title em,
.pilot-box h2 em {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.pill {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(124,58,237,.22);
  box-shadow: 0 2px 10px rgba(124,58,237,.08);
  backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════
   ANIMATED GRADIENT CARDS
   A conic-gradient ring rotates around the border on
   hover, plus a spotlight that tracks the cursor.
   ══════════════════════════════════════════════════════ */
.sh-card, .why-card, .team-card, .ap-card, .sp-card,
.pkg, .meth-cell, .cm, .office-box, .circle-item,
.founder-card, .contact-promise, .form-wrap {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #ffffff 0%, #fdfcff 100%);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}

/* The rotating ring. Painted into the border only, via a mask. */
.sh-card::before, .why-card::before, .team-card::before, .ap-card::before,
.sp-card::before, .pkg::before, .meth-cell::before, .cm::before,
.office-box::before, .circle-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle),
              var(--g2) 0%, var(--g4) 25%, var(--g5) 50%, var(--g3) 75%, var(--g2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.sh-card:hover::before, .why-card:hover::before, .team-card:hover::before,
.ap-card:hover::before, .sp-card:hover::before, .pkg:hover::before,
.meth-cell:hover::before, .cm:hover::before, .office-box:hover::before,
.circle-item:hover::before {
  opacity: 1;
  animation: spin-ring 3.2s linear infinite;
}
@keyframes spin-ring { to { --angle: 360deg; } }

/* Cursor-tracked spotlight. --mx/--my are set by main.js. */
.sh-card::after, .why-card::after, .ap-card::after, .sp-card::after,
.pkg::after, .meth-cell::after, .team-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              rgba(124,58,237,.09), rgba(192,80,240,.05) 35%, transparent 65%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.sh-card:hover::after, .why-card:hover::after, .ap-card:hover::after,
.sp-card:hover::after, .pkg:hover::after, .meth-cell:hover::after,
.team-card:hover::after { opacity: 1; }

.sh-card:hover, .why-card:hover, .ap-card:hover,
.sp-card:hover, .team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.meth-cell:hover { background: linear-gradient(160deg, #fdfbff 0%, #faf6ff 100%); }
.cm:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }

/* ── PER-CARD ACCENT HUES ─────────────────────────────
   Six services, six colours — so the grid reads as a set
   of distinct offerings rather than one repeated tile. */
.sh-icon, .why-icon, .circle-icon, .meth-icon, .cm-ico, .sb-visual {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.services-grid-home .sh-card { --accent: var(--a1); --accent-bg: var(--a1-bg); }
.services-grid-home .sh-card:nth-child(2) { --accent: var(--a2); --accent-bg: var(--a2-bg); }
.services-grid-home .sh-card:nth-child(3) { --accent: var(--a3); --accent-bg: var(--a3-bg); }
.services-grid-home .sh-card:nth-child(4) { --accent: var(--a4); --accent-bg: var(--a4-bg); }
.services-grid-home .sh-card:nth-child(5) { --accent: var(--a5); --accent-bg: var(--a5-bg); }
.services-grid-home .sh-card:nth-child(6) { --accent: var(--a6); --accent-bg: var(--a6-bg); }

/* Each card is washed with its own accent, strengthening on hover. */
.services-grid-home .sh-card {
  background: linear-gradient(158deg, #ffffff 0%, var(--accent-bg) 190%);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--rule));
}
.services-grid-home .sh-card:hover {
  background: linear-gradient(158deg, #ffffff 0%, var(--accent-bg) 130%);
}
.services-grid-home .sh-icon {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 16%, transparent);
}
.services-grid-home .sh-link { color: var(--accent); }
.services-grid-home .sh-card::after {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 12%, transparent),
              transparent 65%);
}
.sh-card:hover .sh-icon { transform: scale(1.1) rotate(-5deg); }

.why-grid .why-card:nth-child(1) { background: linear-gradient(160deg, #fff 0%, var(--a1-bg) 160%); }
.why-grid .why-card:nth-child(2) { background: linear-gradient(160deg, #fff 0%, var(--a3-bg) 160%); }
.why-grid .why-card:nth-child(3) { background: linear-gradient(160deg, #fff 0%, var(--a2-bg) 160%); }

.method-grid .meth-cell:nth-child(1) .meth-icon,
.method-grid .meth-cell:nth-child(4) .meth-icon { filter: drop-shadow(0 3px 8px rgba(124,58,237,.30)); }
.method-grid .meth-cell:nth-child(2) .meth-icon,
.method-grid .meth-cell:nth-child(5) .meth-icon { filter: drop-shadow(0 3px 8px rgba(192,38,211,.28)); }
.method-grid .meth-cell:nth-child(3) .meth-icon,
.method-grid .meth-cell:nth-child(6) .meth-icon { filter: drop-shadow(0 3px 8px rgba(79,70,229,.28)); }
.meth-cell:hover .meth-icon { transform: scale(1.12); }

.three-circles .circle-item:nth-child(1) .circle-icon { background: var(--a1-bg); border-color: color-mix(in srgb, var(--a1) 38%, transparent); }
.three-circles .circle-item:nth-child(2) .circle-icon { background: var(--a3-bg); border-color: color-mix(in srgb, var(--a3) 38%, transparent); }
.three-circles .circle-item:nth-child(3) .circle-icon { background: var(--a4-bg); border-color: color-mix(in srgb, var(--a4) 38%, transparent); }
.circle-item:hover .circle-icon { transform: translateY(-3px) scale(1.08); }

.sb-visual {
  background: var(--grad-soft);
  border-color: var(--rule);
}
.service-block:nth-child(even) .sb-visual { background: linear-gradient(140deg, #fdf2fd 0%, #f1efff 100%); }
.sb-visual:hover { transform: scale(1.015); box-shadow: var(--shadow-md); }

/* ── NUMBERED ROWS ──────────────────────────────────── */
.diff-num, .value-num, .sb-num, .ps-step, .ap-step, .pkg-badge {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pkg-badge {
  -webkit-text-fill-color: #fff; color: #fff;
  background: var(--grad-brand);
  border-radius: 999px;
}
.diff-row, .value-row, .ps-cell, .faq-item {
  position: relative;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.diff-row::after, .value-row::after, .ps-cell::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease-out);
}
.diff-row:hover::after, .value-row:hover::after, .ps-cell:hover::after { transform: scaleY(1); }
.diff-row:hover, .value-row:hover, .ps-cell:hover {
  background: linear-gradient(90deg, rgba(124,58,237,.06), rgba(192,80,240,.02));
}

/* ── FEATURED PRICING CARD ──────────────────────────── */
.pkg.featured {
  background: linear-gradient(165deg, #ffffff 0%, #faf6ff 100%);
  box-shadow: var(--shadow-md);
}
.pkg.featured::before { opacity: .55; }
.pkg.featured:hover::before { opacity: 1; }
.pkg-price {
  background: linear-gradient(120deg, var(--ink) 0%, var(--g1) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pkg-price sub { -webkit-text-fill-color: var(--muted); color: var(--muted); }

/* ── DARK PANELS ──────────────────────────────────────
   Only the three panels that were already dark. .pilot-box and
   .honest-box are light panels with dark body text and are handled
   separately below. */
.honest-cta, .hero-honesty, .honest-banner {
  background: var(--grad-deep);
  position: relative; overflow: hidden;
}
.honest-cta::before, .honest-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(520px circle at 88% -10%, rgba(192,80,240,.22), transparent 60%),
    radial-gradient(420px circle at 5% 110%, rgba(79,70,229,.20), transparent 62%);
  pointer-events: none;
}
.honest-cta > *, .honest-banner > * { position: relative; z-index: 1; }

/* ── LIGHT FEATURE PANELS ───────────────────────────── */
.pilot-box, .honest-box {
  background:
    radial-gradient(620px circle at 85% -20%, rgba(192,80,240,.10), transparent 60%),
    radial-gradient(520px circle at 0% 120%, rgba(79,70,229,.09), transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #f7f3ff 100%);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
.honest-box { border-left: 3px solid transparent; border-image: var(--grad-brand) 1; }
.pilot-terms {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.pt-item strong {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ho-dot {
  background: var(--g4);
  box-shadow: 0 0 0 3px rgba(192,80,240,.22);
  animation: pulse-dot 2.6s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(192,80,240,.22); }
  50%     { box-shadow: 0 0 0 7px rgba(192,80,240,.05); }
}

/* ── TICKER ─────────────────────────────────────────── */
.ticker-wrap {
  background: var(--grad-deep);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 2; pointer-events: none;
}
.ticker-wrap::before { left: 0;  background: linear-gradient(90deg, #16121f, transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(270deg, #241a3d, transparent); }
.ticker-item.hi {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── BRANDS BAR ─────────────────────────────────────── */
.bb-brand {
  transition: color .3s var(--ease), transform .3s var(--ease);
  cursor: default;
}
.bb-brand:hover {
  transform: translateY(-2px);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── FORM ───────────────────────────────────────────── */
.form-wrap { box-shadow: var(--shadow-md); }
.fgrp input, .fgrp select, .fgrp textarea {
  background: #fbfaff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.fgrp input:focus, .fgrp select:focus, .fgrp textarea:focus {
  border-color: var(--g3);
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
}

/* ── FAQ ────────────────────────────────────────────── */
.faq-q .icon {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.faq-q:hover { background: linear-gradient(90deg, rgba(124,58,237,.05), transparent); }
.faq-item { transition: background .3s var(--ease); }

/* ── FOOTER ─────────────────────────────────────────── */
footer {
  background: var(--grad-deep);
  position: relative; overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px circle at 15% 0%, rgba(124,58,237,.18), transparent 60%);
  pointer-events: none;
}
.footer-inner { position: relative; z-index: 1; }
.footer-brand-name span {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-col ul a, .footer-socials a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-col ul a:hover { padding-left: 4px; }

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--off); }
::-webkit-scrollbar-thumb {
  background: var(--grad-brand);
  border-radius: 999px;
  border: 2px solid var(--off);
}

/* ── SMOOTHER REVEALS ───────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.visible { opacity: 1; transform: none; will-change: auto; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 860px) {
  .nav {
    top: 10px;
    width: calc(100% - 1.5rem);
    height: 58px;
    padding: 0 .6rem 0 1rem;
    border-radius: 22px;
  }
  .nav.scrolled { top: 8px; width: calc(100% - 1.2rem); }

  .nav-links {
    top: 76px;
    left: 50%;
    right: auto;
    width: calc(100% - 1.5rem);
    transform: translate(-50%, -12px);
    border: 1px solid var(--rule);
    border-radius: 22px;
    background: rgba(255,255,255,.985);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 100px);
  }
  .nav-links.open { transform: translate(-50%, 0); }

  /* Rounded hover pills and hairline dividers were fighting each other —
     the borders rendered as curved arcs. Dividers dropped; spacing and
     the hover pill carry the separation instead. */
  .nav-links { padding: .6rem; gap: .15rem; }
  .nav-links a {
    border-bottom: none;
    border-radius: 14px;
    padding: .95rem 1rem;
    font-size: .7rem;
  }
  .nav-links a.active { background: rgba(124,58,237,.10); }
  .nav-links .nav-cta-mobile {
    background: var(--grad-brand);
    border-radius: 14px;
    margin-top: .5rem;
    box-shadow: 0 4px 16px rgba(124,58,237,.28);
  }
}

/* Motion is decoration here — strip it when asked to. */
@media (prefers-reduced-motion: reduce) {
  .sh-card:hover::before, .why-card:hover::before, .team-card:hover::before,
  .ap-card:hover::before, .sp-card:hover::before, .pkg:hover::before,
  .meth-cell:hover::before, .cm:hover::before, .office-box:hover::before,
  .circle-item:hover::before { animation: none; }
  .ho-dot { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   DENSITY & RESPONSIVE LAYER

   Two problems this fixes:

   1. Too much dead space. The hero was locked to min-height:100vh with
      vertically centred columns, so it reserved a full screen for
      content that filled about half of it. Section padding was a flat
      6rem regardless of viewport. That evenly-spaced, air-heavy rhythm
      is exactly what makes a layout read as machine-generated.

   2. One breakpoint. Every page jumped straight from desktop to mobile
      at 860px, so tablets and small phones got a layout designed for
      neither.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Fluid scale — every gap scales with the viewport instead of
     snapping between two fixed values. */
  --sp-section:  clamp(3.25rem, 6vw, 5.5rem);
  --sp-gutter:   clamp(1.15rem, 4vw, 3rem);
  --sp-hero-top: clamp(6.75rem, 10vw, 8.5rem);
  --sp-block:    clamp(1.75rem, 3.2vw, 2.75rem);
  --sp-card:     clamp(1.4rem, 2.4vw, 2rem);
  --gap-grid:    clamp(.85rem, 1.6vw, 1.4rem);
  --container:   1140px;
}

.section, .section-alt { padding: var(--sp-section) var(--sp-gutter); }
.page-hero {
  padding: var(--sp-hero-top) var(--sp-gutter) clamp(2.25rem, 4vw, 3.5rem);
}
.container { max-width: var(--container); padding-inline: 0; }

/* ── HERO ───────────────────────────────────────────────
   Height now comes from the content, not from 100vh. */
.hero { min-height: 0; }
.hero-left  { padding: var(--sp-hero-top) clamp(1.5rem,3.5vw,3rem) clamp(2.75rem,5vw,4rem) var(--sp-gutter); }
.hero-right { padding: var(--sp-hero-top) var(--sp-gutter) clamp(2.75rem,5vw,4rem) clamp(1.5rem,3.5vw,3rem); }
.hero-tag  { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.hero-h1   { margin-bottom: clamp(1rem, 1.8vw, 1.4rem); line-height: 1.02; }
.hero-sub  { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); max-width: 44ch; }
.hero-note { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: clamp(1rem, 2vw, 1.35rem); }
.hero-manifesto { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero-honesty   { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ── TIGHTER BLOCK RHYTHM ──────────────────────────────
   Section header to grid was a flat 3rem everywhere. */
.services-grid-home, .why-grid, .team-grid, .approach-grid,
.method-grid, .sp-grid, .faq-list, .values-list, .three-circles {
  margin-top: var(--sp-block);
}
.services-grid-home, .why-grid, .team-grid,
.approach-grid, .sp-grid { gap: var(--gap-grid); }
.sh-card, .why-card, .team-card, .ap-card, .sp-card,
.office-box, .circle-item, .meth-cell { padding: var(--sp-card); }
.contact-promise, .form-wrap { padding: clamp(1.5rem, 3vw, 2.4rem); }
.pilot-box  { padding: clamp(2rem, 4.5vw, 3rem); margin-top: var(--sp-block); }
.honest-box { padding: clamp(1.6rem, 3.2vw, 2.2rem); margin-top: var(--sp-block); }
.honest-cta { padding: clamp(2rem, 4.5vw, 3.25rem); }
.honest-banner { padding: clamp(1.25rem, 2.6vw, 1.85rem); margin-bottom: var(--sp-block); }
.sh-desc, .why-desc, .value-desc, .ap-desc, .meth-desc { line-height: 1.65; }
.subtext { line-height: 1.7; }
footer { padding: clamp(3rem, 5.5vw, 4.5rem) var(--sp-gutter) clamp(1.5rem, 2.5vw, 2rem); }

/* ══ BREAKPOINTS ══════════════════════════════════════ */

/* Laptops — pull the container in before the gutters collapse. */
@media (max-width: 1180px) {
  :root { --container: 100%; }
  .container { max-width: 1040px; }
}

/* Tablet landscape — three-up grids become two-up rather than
   squeezing three narrow columns. */
@media (max-width: 1024px) {
  .services-grid-home, .why-grid, .method-grid, .sp-grid,
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-bar { grid-template-columns: repeat(3, 1fr); row-gap: 1.1rem; }
  .service-block { gap: clamp(2rem, 4vw, 3rem); }
  .contact-layout { gap: clamp(2rem, 4vw, 3rem); }
}

/* Tablet portrait — the hero stacks here, well before the old 860px
   jump, because two columns stop working long before that. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-left {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: clamp(2.25rem, 5vw, 3rem);
  }
  .hero-right { padding-top: clamp(2.25rem, 5vw, 3rem); }
  .hero-sub { max-width: 52ch; }
  .about-hero-grid, .diff-grid, .contact-layout,
  .service-block { grid-template-columns: 1fr; }
  .service-block { direction: ltr !important; }
  .three-circles { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: repeat(2, 1fr); }
  .honest-cta { grid-template-columns: 1fr; }
}

/* Phones */
@media (max-width: 640px) {
  .services-grid-home, .why-grid, .method-grid, .sp-grid,
  .approach-grid, .team-grid, .offices-row, .frow {
    grid-template-columns: 1fr;
  }
  .brands-bar { grid-template-columns: repeat(2, 1fr); }
  .process-strip { grid-template-columns: 1fr; }
  .pilot-terms { flex-direction: column; gap: 1.1rem; text-align: left; align-items: flex-start; }
  .hero-actions .btn, .hcta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .headline-xl { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .hero-h1     { font-size: clamp(2.3rem, 10.5vw, 3.3rem); }
  .headline-lg { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .headline-md { font-size: clamp(1.45rem, 6vw, 2rem); }
  .subtext, .hero-sub { font-size: .95rem; }
  .faq-q { padding: 1.15rem 1.15rem; font-size: .86rem; }
  .faq-a { padding: 0 1.15rem 1.15rem; }
}

/* Small phones — 360–390px is the real floor for Android. */
@media (max-width: 420px) {
  :root { --sp-gutter: 1.05rem; }
  .footer-top { grid-template-columns: 1fr; gap: 1.75rem; }
  .brands-bar { grid-template-columns: 1fr 1fr; font-size: .7rem; }
  .hero-note { font-size: .55rem; }
  .nav-logo-text { font-size: .78rem; }
  .cm { padding: .8rem 1rem; gap: .8rem; }
  .cm-ico { width: 32px; height: 32px; }
}

/* Short landscape phones — don't let hero padding eat the screen. */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --sp-hero-top: 5.5rem; }
  .section, .section-alt { padding-block: 3rem; }
}

/* Wide screens — cap line length so text doesn't sprawl. */
@media (min-width: 1600px) {
  :root { --container: 1240px; }
}

/* Respect iOS safe areas on notched devices. */
@supports (padding: max(0px)) {
  .section, .section-alt, .page-hero, footer, .hero-left, .hero-right {
    padding-left:  max(var(--sp-gutter), env(safe-area-inset-left));
    padding-right: max(var(--sp-gutter), env(safe-area-inset-right));
  }
}

/* ── VERTICAL RHYTHM ───────────────────────────────────
   Every section boundary was an identical 173px of dead air: 6rem of
   padding-bottom meeting 6rem of padding-top. That mechanical evenness
   is the strongest "generated layout" tell there is.

   Where the background changes, the colour shift already signals the
   break, so the padding does less work. Where two sections share a
   background, the doubled padding is pure waste and gets halved. */
:root { --sp-section: clamp(2.75rem, 4.6vw, 4rem); }

.section + .section,
.section-alt + .section-alt { padding-top: calc(var(--sp-section) * .45); }

.section:last-of-type { padding-bottom: calc(var(--sp-section) * 1.15); }

/* Section header to its content — was a flat 3rem on every page. */
.section > .container > .reveal:first-child { margin-bottom: 0; }
.services-intro { margin-bottom: 0 !important; }

/* Headline blocks carried generous bottom margins on top of the grid's
   own top margin, stacking two gaps where one was needed. */
.headline-serif { margin-bottom: .5rem; }
.eyebrow { margin-bottom: .55rem; }
.subtext { margin-top: .65rem; }

/* Footer bottom-bar link had no rule of its own and fell back to the
   browser's default link blue on a near-black background. */
.footer-bottom a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer-bottom a:hover { color: var(--g3); }