/* ===================================================================
     METICULA - brand typeface (self-hosted, all four weights)
     =================================================================== */
  @font-face {
    font-family: 'Meticula';
    src: url('fonts/meticula-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
  }/* ===================================================================
     FORMA HOUSE - BRAND PALETTE
     =================================================================== */
  :root {
    --cream: #F4F1EA;
    --cream-deep: #ECE7DA;
    --cream-edge: #DCD5C2;
    --dark: #16151A;
    --dark-soft: #1F1E24;
    --dark-deep: #0E0D11;
    --warm: #6C6962;
    --warm-soft: #948F85;
    --accent: #176E63;
    --accent-deep: #114F47;
    --accent-bright: #35A493;

    --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
    --font-hero: 'Instrument Sans', 'Manrope', system-ui, sans-serif;
    --ink-soft: #4A443C;
    --font-feature: 'Meticula', 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --max-w: 1340px;
    --gutter: clamp(20px, 4vw, 56px);

    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Liquid glass system - frosted, translucent surfaces */
    --glass-blur: 18px;
    --glass-sat: 140%;
    /* Dark glass: sits over video / dark sections */
    --glass-d-bg: rgba(26, 25, 31, 0.55);
    --glass-d-brd: rgba(244, 241, 234, 0.14);
    --glass-d-glow: inset 0 1px 0 rgba(244, 241, 234, 0.18), 0 10px 36px rgba(8, 7, 11, 0.34);
    /* Light glass: sits over cream / light sections */
    --glass-l-bg: rgba(255, 255, 255, 0.46);
    --glass-l-brd: rgba(255, 255, 255, 0.6);
    --glass-l-glow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 30px rgba(22, 21, 26, 0.08);
  }* { box-sizing: border-box; margin: 0; padding: 0; }html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }body {
    background: var(--cream);
    color: var(--dark);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    cursor: default;
  }img, svg { display: block; max-width: 100%; }a { color: inherit; text-decoration: none; }button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }::selection { background: var(--accent); color: var(--cream); }/* ===================================================================
     UTILITY
     =================================================================== */
  .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }.mono {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--warm);
    font-weight: 500;
  }.display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.025em;
  }/* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }.reveal.visible { opacity: 1; transform: translateY(0); }.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }/* Reduced motion + accessibility fallback */
  @media (prefers-reduced-motion: reduce) {.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }.hero-headline .word-inner { animation: none !important; transform: none !important; }.hero-bottom { opacity: 1 !important; transform: none !important; animation: none !important; }* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }/* ===================================================================
     NAVIGATION
     =================================================================== */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(22, 21, 26, 0.55);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-bottom: 1px solid rgba(244, 241, 234, 0.1);
    box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.08), 0 8px 30px rgba(8, 7, 11, 0.18);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  }.nav.scrolled {
    background: rgba(14, 13, 17, 0.82);
    border-bottom-color: rgba(244, 241, 234, 0.14);
  }.nav-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-feature);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: -0.035em;
    color: var(--cream);
  }.nav-logo { width: 52px; height: 52px; display: block; flex-shrink: 0; }.nav-wordmark { height: clamp(32px, 4vw, 44px); width: auto; display: block; }@media (max-width: 600px) {.nav-logo { width: 42px; height: 42px; } }@media (max-width: 520px) {.nav-wordmark { display: none; }.nav-menu-btn { width: 40px; height: 40px; } }/* menu button (left of logo) + slide-out sidebar */
  .nav-left { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 16px); }.nav-menu-btn {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: rgba(244,241,234,0.07); border: 1px solid rgba(244,241,234,0.16); cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  }.nav-menu-btn:hover { background: rgba(244,241,234,0.13); }.nav-menu-btn span { display: block; width: 18px; height: 1.7px; background: var(--cream); border-radius: 2px; transition: transform 0.32s var(--ease), opacity 0.2s var(--ease); }.nav-menu-btn.open span:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }.nav-menu-btn.open span:nth-child(2) { opacity: 0; }.nav-menu-btn.open span:nth-child(3) { transform: translateX(-6.7px); }.nav-menu-scrim {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(10,9,13,0.5); opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease);
  }.nav-menu-scrim.open { opacity: 1; pointer-events: auto; }.nav-menu {
    position: fixed; top: 0; left: 0; z-index: 90;
    width: min(310px, 86vw); height: 100%;
    padding: 92px 0 28px;
    background: rgba(14,13,17,0.97);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    border-right: 1px solid rgba(244,241,234,0.1);
    transform: translateX(-102%);
    transition: transform 0.42s var(--ease-out);
    overflow-y: auto;
  }.nav-menu.open { transform: translateX(0); box-shadow: 36px 0 90px rgba(0,0,0,0.45); }.nav-menu-inner { display: flex; flex-direction: column; }.nav-menu-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--warm-soft); padding: 0 30px 16px;
  }.nav-menu a {
    display: flex; align-items: baseline; gap: 16px;
    font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em;
    color: var(--cream); padding: 12px 30px;
    transition: background 0.2s var(--ease), padding-left 0.2s var(--ease);
  }.nav-menu a:hover { background: rgba(244,241,234,0.06); padding-left: 37px; }.nav-menu a .nm-num { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--warm-soft); letter-spacing: 0.1em; }.nav-links {
    display: flex; gap: 32px; align-items: center;
  }.nav-links a {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cream);
    position: relative;
    padding: 6px 0;
  }.nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
    background: var(--cream); transition: width 0.3s var(--ease);
  }.nav-links a:hover::after { width: 100%; }.nav-cta {
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
    background: var(--cream); color: var(--dark);
    padding: 11px 18px;
    border-radius: 99px;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600;
  }.nav-cta:hover { transform: translateY(-1px); background: #FFFFFF; }.nav-cta .arrow { transition: transform 0.25s var(--ease); display: inline-block; }.nav-cta:hover .arrow { transform: translateX(3px); }@media (max-width: 920px) {.nav-links { gap: 18px; }.nav-links a { font-size: 11px; }
  }@media (max-width: 720px) {.nav-links { display: none; }
  }/* ===================================================================
     HERO
     =================================================================== */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(88px, 11svh, 124px) var(--gutter) clamp(20px, 3svh, 40px);
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
    background: var(--cream);
  }/* Video background - real London footage */
  .hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.8s var(--ease);
  }.hero-video.active {
    opacity: 1;
  }/* Static fallback poster (shown until video loads, or if video fails) */
  .hero-poster {
    position: absolute;
    inset: 0;
    background: var(--cream);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }/* Overlay to soften the video and keep text readable */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.38) 0%,
        rgba(244, 241, 234, 0.44) 28%,
        rgba(244, 241, 234, 0.66) 52%,
        rgba(244, 241, 234, 0.86) 78%,
        rgba(244, 241, 234, 0.97) 100%
      );
    pointer-events: none;
  }/* All content sits above the video + overlay */
  .hero-headline, .hero-bottom, .platform-ticker {
    position: relative;
    z-index: 2;
  }.platform-ticker {
    background: var(--cream);
  }/* Mobile: keep the London backdrop, with a slightly stronger wash for text legibility */
  @media (max-width: 720px) {.hero-overlay {
      background: linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.62) 0%,
        rgba(244, 241, 234, 0.6) 30%,
        rgba(244, 241, 234, 0.78) 60%,
        rgba(244, 241, 234, 0.97) 100%
      );
    }
  }/* If user prefers reduced motion, freeze the video at first frame */
  @media (prefers-reduced-motion: reduce) {.hero-video { display: none; }
  }.hero-main { margin-top: auto; }.hero-headline {
    font-family: var(--font-hero);
    font-weight: 600;
    font-size: clamp(36px, 6.8vw, 104px);
    font-size: clamp(36px, min(6.8vw, 9.5svh), 104px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink-soft);
    margin-bottom: 0;
  }.hero-headline .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
  }.hero-headline .word-inner {
    display: inline-block;
    transform: translateY(110%);
    animation: wordRise 1.1s var(--ease-out) forwards;
  }.hero-headline .word:nth-of-type(1) .word-inner { animation-delay: 0.1s; }.hero-headline .word:nth-of-type(2) .word-inner { animation-delay: 0.2s; }
  @keyframes wordRise { to { transform: translateY(0); } }.hero-headline .accent {
    color: var(--accent);
  }.hero-bottom {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: end;
    margin-top: clamp(28px, 4svh, 56px);
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 0.7s forwards;
  }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }.hero-bottom { transform: translateY(20px); }.hero-tagline {
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.55;
    color: var(--dark);
    max-width: 580px;
    font-weight: 400;
    text-shadow: 0 1px 18px rgba(244, 241, 234, 0.85);
  }.hero-tagline strong { font-weight: 700; }@media (max-width: 720px) {.hero { padding-top: 88px; }.hero-bottom { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }.platform-ticker { margin-top: 40px; }
  }.hero-actions {
    display: flex; flex-direction: column; gap: 16px;
    align-items: flex-start;
  }.btn {
    font-family: var(--font-mono);
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
    padding: 16px 24px;
    border-radius: 99px;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600;
  }.btn-primary { background: var(--dark); color: var(--cream); }.btn-primary:hover { transform: translateY(-2px); background: var(--accent); }.btn-primary:hover .arrow { transform: translateX(4px); }.btn-ghost { color: var(--dark); border: 1px solid var(--dark); }.btn-ghost:hover { background: var(--dark); color: var(--cream); }.btn .arrow { transition: transform 0.25s var(--ease); display: inline-block; }/* Hero capability strip - liquid-glass panel with a cursor-reactive glow */
  .platform-ticker {
    margin-top: clamp(24px, 3.5svh, 48px);
    padding: 14px clamp(14px, 2vw, 22px);
    border-radius: 22px;
    overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 20px 50px rgba(22, 21, 26, 0.1);
  }.platform-ticker::before {
    content: '';
    position: absolute; inset: -40%;
    pointer-events: none;
    background:
      radial-gradient(34% 60% at var(--mx, 22%) var(--my, 30%), rgba(23, 110, 99, 0.30), transparent 68%),
      radial-gradient(42% 60% at var(--mx2, 82%) var(--my2, 72%), rgba(22, 21, 26, 0.12), transparent 70%);
    filter: blur(30px);
  }.cap-label {
    position: relative; z-index: 1;
    font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--accent);
    margin-right: 6px;
  }.cap-chip {
    position: relative; z-index: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(13px, 1.25vw, 17px);
    letter-spacing: -0.01em;
    color: var(--dark);
    padding: 8px 15px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }.cap-chip:hover {
    transform: translateY(-2px);
    background: var(--dark);
    color: var(--cream);
    box-shadow: 0 10px 26px rgba(22, 21, 26, 0.22);
  }
  @keyframes scrollX { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }/* Phones: the capability strip becomes one swipeable row instead of a tall wrapped block.
     Must sit after the base .platform-ticker/.cap-chip rules to win the cascade. */
  @media (max-width: 720px) {.platform-ticker {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }.platform-ticker::-webkit-scrollbar { display: none; }.platform-ticker .cap-chip { flex-shrink: 0; white-space: nowrap; }.platform-ticker .cap-label { flex-shrink: 0; }
  }/* ===================================================================
     SECTORS STRIP - between hero and stats
     =================================================================== */
  .sectors {
    padding: 60px var(--gutter);
    border-top: 1px solid var(--cream-edge);
    border-bottom: 1px solid var(--cream-edge);
    background: var(--cream);
  }.sectors-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
  }.sectors-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--dark);
  }.sectors-list {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--dark);
  }.sectors-list em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
  }@media (max-width: 720px) {.sectors-inner { grid-template-columns: 1fr; gap: 16px; }
  }/* ===================================================================
     NAME ORIGIN - small brand meaning block
     =================================================================== */
  .name-origin {
    padding: 44px var(--gutter);
    background: var(--cream-deep);
    border-bottom: 1px solid var(--cream-edge);
  }/* Slim 'Why Forma' tab tucked under the hero */
  .name-origin--tab {
    padding: 20px var(--gutter);
    background: var(--cream);
    border-top: 1px solid var(--cream-edge);
  }.name-origin-copy {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.8vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--dark);
    max-width: 940px;
  }.name-origin-copy em {
    font-style: italic;
    font-weight: 500;
    color: var(--warm);
  }.name-origin-foot {
    margin-top: 18px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--warm);
    max-width: 680px;
  }@media (max-width: 720px) {.name-origin { padding: 36px var(--gutter); }
  }/* ===================================================================
     STATS BAND (animated counters)
     =================================================================== */
  .stats {
    background: var(--dark);
    color: var(--cream);
    padding: 100px var(--gutter);
    position: relative;
    overflow: hidden;
  }.stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(244, 241, 234, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(244, 241, 234, 0.04) 0%, transparent 50%);
    pointer-events: none;
  }.stats-header {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 80px;
    flex-wrap: wrap; gap: 24px;
  }.stats-tag {
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
  }.stats-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 720px;
  }.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 40px;
    position: relative; z-index: 1;
  }.stat {
    border-top: 1px solid rgba(244, 241, 234, 0.18);
    padding-top: 24px;
  }.stat-number {
    font-family: var(--font-body);          /* slim grotesque with tabular figures */
    font-weight: 700;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    margin-bottom: 16px;
    display: block;
  }.stat-label {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
    line-height: 1.5;
  }.stat-context {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(244, 241, 234, 0.7);
    margin-top: 8px;
    text-transform: none;
    letter-spacing: 0;
  }@media (max-width: 1000px) {.stats-grid { grid-template-columns: repeat(2, 1fr); }
  }@media (max-width: 720px) {.stats-grid { grid-template-columns: 1fr; gap: 40px; }
  }/* ===================================================================
     SECTION FRAMING
     =================================================================== */
  section {
    padding: 120px var(--gutter);
    position: relative;
  }.section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 80px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--cream-edge);
  }.section-tag {
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm);
  }.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.5vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.035em;
  }.section-title em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
  }@media (max-width: 720px) {.section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  }/* ===================================================================
     SERVICES
     =================================================================== */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--cream-edge);
    border: 1px solid var(--cream-edge);
  }.service {
    background: var(--cream);
    padding: 40px 32px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
    display: flex; flex-direction: column;
    min-height: 280px;
    position: relative;
    overflow: hidden;
  }.service-num {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em;
    color: var(--warm);
    margin-bottom: 32px;
  }.service-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    line-height: 1.05;
  }.service-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--warm);
    flex-grow: 1;
  }.service-platforms {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--cream-edge);
    display: flex; flex-wrap: wrap; align-items: center;
    transition: border-color 0.4s var(--ease);
  }.pill {
    font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--warm);
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.4s var(--ease);
  }.pill:not(:first-child)::before {
    content: '/';
    margin: 0 10px;
    color: var(--cream-edge);
    transition: color 0.4s var(--ease);
  }.pill svg { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; }.service:hover { background: var(--dark); color: var(--cream); }.service:hover .service-num, .service:hover .service-desc { color: rgba(244, 241, 234, 0.7); }.service:hover .service-platforms { border-top-color: rgba(244, 241, 234, 0.16); }.service:hover .pill { color: rgba(244, 241, 234, 0.82); }.service:hover .pill:not(:first-child)::before { color: rgba(244, 241, 234, 0.3); }.service::after {
    content: '↗';
    position: absolute;
    top: 32px; right: 32px;
    font-size: 22px;
    color: var(--warm);
    transform: translate(8px, -8px);
    opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), color 0.4s var(--ease);
  }.service:hover::after { opacity: 1; transform: translate(0, 0); color: var(--cream); }@media (max-width: 920px) {.services-grid { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 600px) {.services-grid { grid-template-columns: 1fr; } }/* ===================================================================
     NETWORK / ORBIT VIZ
     =================================================================== */
  .scaling {
    background: var(--cream-deep);
    padding: 120px var(--gutter);
    overflow: hidden;
  }.scaling-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
  }.scaling-text h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: -0.035em;
    line-height: 0.96;
    margin-bottom: 28px;
  }.scaling-text h2 em { font-style: italic; color: var(--accent); font-weight: 500; }.scaling-text p {
    font-size: 17px;
    line-height: 1.55;
    color: var(--dark);
    max-width: 460px;
    margin-bottom: 16px;
  }.scaling-bullets {
    margin-top: 32px;
    list-style: none;
    border-top: 1px solid var(--cream-edge);
  }.scaling-bullets li {
    padding: 18px 0;
    border-bottom: 1px solid var(--cream-edge);
    display: flex; gap: 20px;
    font-size: 15px;
    line-height: 1.5;
  }.scaling-bullets li .num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--warm);
    letter-spacing: 0.18em;
    min-width: 28px;
    padding-top: 2px;
  }.scaling-bullets li strong {
    font-weight: 700;
    margin-right: 6px;
  }.orbit {
    aspect-ratio: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
  }.orbit svg { width: 100%; height: 100%; overflow: visible; }@media (max-width: 920px) {.scaling-inner { grid-template-columns: 1fr; gap: 60px; }
  }/* ===================================================================
     COMPARISON (us vs them)
     =================================================================== */
  .vs-table {
    border: 1px solid var(--cream-edge);
    border-radius: 8px;
    overflow: hidden;
  }.vs-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    border-top: 1px solid var(--cream-edge);
  }.vs-row:first-child { border-top: none; }.vs-row > * {
    padding: 22px 24px;
    border-left: 1px solid var(--cream-edge);
  }.vs-row > *:first-child { border-left: none; }.vs-head {
    background: var(--cream-deep);
  }.vs-head .col-them {
    color: var(--warm);
  }.vs-head .col-us {
    background: var(--dark);
    color: var(--cream);
  }.vs-head h3 {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    font-weight: 600;
  }.vs-row.vs-data .col-criterion {
    font-weight: 600;
    font-size: 15px;
    background: var(--cream-deep);
  }.vs-row.vs-data .col-them {
    color: var(--warm);
    font-size: 15px;
  }.vs-row.vs-data .col-us {
    color: var(--dark);
    font-weight: 700;
    font-size: 15px;
  }.vs-row.vs-data .col-us::before {
    content: '✓ ';
    color: var(--dark);
    font-weight: 700;
  }@media (max-width: 720px) {.vs-row { grid-template-columns: 1fr; }.vs-row > * { border-left: none; border-top: 1px solid var(--cream-edge); }.vs-row > *:first-child { border-top: none; }
  }/* ===================================================================
     CASE STUDIES
     =================================================================== */
  .cases {
    background: var(--cream);
  }.case {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr 1fr;
    gap: 48px;
    align-items: start;
    padding: 56px 0;
    border-top: 1px solid var(--cream-edge);
  }.case:last-child { border-bottom: 1px solid var(--cream-edge); }.case-num {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.18em;
    color: var(--warm);
  }.case-logo { height: 34px; width: auto; display: block; margin-bottom: 18px; }.case-logo.tall { height: 52px; }.case-logo.loam-tile { height: 44px; border-radius: 8px; }.case-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 12px;
  }.case-scope {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--warm);
    margin-bottom: 24px;
  }.case-desc {
    font-size: 16px;
    line-height: 1.55;
    color: var(--dark);
    max-width: 520px;
  }.case-result {
    background: var(--dark);
    color: var(--cream);
    padding: 32px;
    border-radius: 6px;
  }.case-result-label {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.2em;
    color: var(--warm-soft);
    margin-bottom: 12px;
    text-transform: uppercase;
  }.case-result-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 40px);
    letter-spacing: -0.03em;
    line-height: 1.05;
  }@media (max-width: 920px) {.case { grid-template-columns: 1fr; gap: 24px; }
  }/* ===================================================================
     TESTIMONIALS / REFERENCES
     =================================================================== */
  .references {
    background: var(--dark);
    color: var(--cream);
  }.references .section-head { border-bottom-color: rgba(244, 241, 234, 0.18); }.references .section-tag { color: var(--warm-soft); }.references-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }@media (max-width: 920px) {.references-grid { grid-template-columns: repeat(2, 1fr); }
  }@media (max-width: 600px) {.references-grid { grid-template-columns: 1fr; }
  }.ref-card {
    background: rgba(31, 30, 36, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    backdrop-filter: blur(16px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    border: 1px solid rgba(244, 241, 234, 0.1);
    border-radius: 10px;
    padding: 36px 32px;
    display: flex; flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.08);
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
    min-height: 360px;
  }.ref-card:hover { transform: translateY(-4px); border-color: rgba(244, 241, 234, 0.2); }.ref-mark {
    min-height: 48px;
    margin-bottom: 28px;
    display: flex; align-items: center;
  }.ref-mark img { width: auto; display: block; }.ref-mark svg { height: 100%; width: auto; }.ref-quote {
    font-size: 16px;
    line-height: 1.55;
    color: var(--cream);
    flex-grow: 1;
    font-weight: 400;
  }.ref-quote::before { content: '"'; color: var(--warm-soft); margin-right: 2px; }.ref-quote::after { content: '"'; color: var(--warm-soft); margin-left: 2px; }.ref-meta {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(244, 241, 234, 0.12);
  }.ref-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--cream);
    margin-bottom: 4px;
  }.ref-role {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--warm-soft);
  }.price {
    background: var(--cream);
    border: 1px solid var(--cream-edge);
    border-radius: 12px;
    padding: 40px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
  }.price-note {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--warm);
    margin-top: 28px;
    text-align: center;
  }.price-terms {
    font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--warm-soft);
    margin-top: 10px;
    text-align: center;
  }.price-terms a {
    color: var(--warm-soft);
    border-bottom: 1px solid rgba(148, 143, 133, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
  }.price-terms a:hover { color: var(--dark); border-bottom-color: var(--dark); }/* ===================================================================
     BUDGET SLIDER - smaller brands / startups (volume play)
     =================================================================== */
  .budget {
    margin-top: 72px;
    background: var(--dark);
    color: var(--cream);
    border-radius: 20px;
    padding: clamp(32px, 4vw, 60px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.1);
  }.budget::before {
    content: '';
    position: absolute; top: -180px; right: -180px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(53,164,147,0.14) 0%, transparent 60%);
    pointer-events: none;
  }.budget-tag {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--accent-bright);
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
  }.budget-tag .live-dot { background: var(--accent-bright); }.budget-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.02; letter-spacing: -0.03em;
    margin-bottom: 18px;
  }.budget-title em { font-style: italic; color: var(--warm-soft); font-weight: 500; }.budget-copy {
    font-size: 16px; line-height: 1.6;
    color: rgba(244,241,234,0.8);
    max-width: 460px;
  }.budget-tool { position: relative; z-index: 1; }.budget-readout { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }.budget-amount {
    font-family: var(--font-feature);
    font-weight: 700;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1; letter-spacing: -0.04em;
    color: var(--cream);
  }.budget-permo {
    font-family: var(--font-mono);
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--warm-soft);
  }.budget-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 99px;
    background: rgba(244,241,234,0.15);
    outline: none; cursor: pointer; margin: 6px 0 14px;
  }.budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-bright); cursor: pointer; border: 3px solid var(--dark);
    box-shadow: 0 0 0 1px var(--accent-bright), 0 4px 18px rgba(53,164,147,0.45);
    transition: transform 0.15s var(--ease);
  }.budget-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }.budget-slider::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-bright); cursor: pointer; border: 3px solid var(--dark);
    box-shadow: 0 0 0 1px var(--accent-bright), 0 4px 18px rgba(53,164,147,0.45);
  }.budget-scale {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--warm-soft);
    margin-bottom: 22px;
  }.budget-verdict {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(53,164,147,0.1);
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
    backdrop-filter: blur(10px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
    border: 1px solid rgba(53,164,147,0.35);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px; line-height: 1.5;
    color: var(--cream);
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.12);
    transition: background 0.3s var(--ease);
  }.budget-verdict::before {
    content: '✓';
    color: var(--accent-bright); font-weight: 700; flex-shrink: 0;
  }.budget .btn-primary { background: var(--cream); color: var(--dark); }.budget .btn-primary:hover { background: #ffffff; transform: translateY(-2px); }@media (max-width: 820px) {.budget { grid-template-columns: 1fr; gap: 32px; }
  }/* ===================================================================
     CASE STUDY - we serve everyone (the £1,500 proof)
     =================================================================== */
  .case-band { background: var(--dark); color: var(--cream); position: relative; overflow: hidden; }.case-band > .wrap { position: relative; z-index: 2; }.case-band .section-head { border-bottom-color: rgba(244,241,234,0.14); }.case-band .section-tag { color: var(--warm-soft); }.case-band .section-title { color: var(--cream); }.case-band .section-title em { color: var(--warm-soft); }/* Real barber-shoot footage as a dimmed backdrop */
  .case-video-wrap {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
  }.case-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s var(--ease-out);
  }.case-video.loaded { opacity: 1; }.case-poster {
    position: absolute; inset: 0;
    background: var(--dark);
    background-size: cover; background-position: center; background-repeat: no-repeat;
  }.case-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(14,13,17,0.88) 0%,
        rgba(14,13,17,0.78) 42%,
        rgba(14,13,17,0.85) 100%);
    pointer-events: none;
  }@media (prefers-reduced-motion: reduce) {.case-video { display: none; }
  }.proof {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
  }.case-tag {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--accent-bright);
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 26px;
  }.case-tag .live-dot { background: var(--accent-bright); }.case-amount {
    font-family: var(--font-feature);
    font-weight: 700;
    font-size: clamp(64px, 9vw, 118px);
    line-height: 0.88; letter-spacing: -0.05em;
  }.case-amount sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 400;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--warm-soft);
    margin-top: 16px;
    bottom: 0;
  }.case-lead {
    font-size: 17px; line-height: 1.62;
    color: rgba(244,241,234,0.85);
    margin: 26px 0 20px;
    max-width: 440px;
  }.case-note {
    font-size: 14.5px; line-height: 1.6;
    color: var(--warm-soft);
    max-width: 440px;
    padding-left: 16px;
    border-left: 2px solid rgba(53,164,147,0.45);
  }.case-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(244,241,234,0.1);
    border: 1px solid rgba(244,241,234,0.14);
    border-radius: 14px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    backdrop-filter: blur(16px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    box-shadow: var(--glass-d-glow);
  }.case-list li {
    background: rgba(16,15,20,0.46);
    padding: 18px 20px;
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.45;
    color: rgba(244,241,234,0.9);
  }.case-list li .case-check {
    color: var(--accent-bright); flex-shrink: 0; font-weight: 700;
    font-family: var(--font-mono); font-size: 13px;
    margin-top: 1px;
  }.case-list li strong { color: var(--cream); font-weight: 600; }.case-list li.case-more {
    grid-column: 1 / -1;
    background: rgba(53,164,147,0.16);
    color: rgba(244,241,234,0.95);
  }.case-footer {
    margin-top: 28px;
    font-size: 15px; line-height: 1.62;
    color: rgba(244,241,234,0.7);
    max-width: 560px;
  }.case-footer em { color: var(--cream); font-style: italic; }.case-disclaimer {
    margin-top: 40px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.14em;
    color: rgba(244,241,234,0.38);
    text-transform: uppercase;
  }@media (max-width: 820px) {.proof { grid-template-columns: 1fr; gap: 38px; }.case-list { grid-template-columns: 1fr; }
  }.pricing-intro {
    max-width: 760px;
    margin: -28px 0 32px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--warm);
  }.pricing-intro strong { color: var(--dark); font-weight: 700; }.fit-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--cream-edge);
    border: 1px solid var(--cream-edge);
    margin-top: 40px;
  }.fit-box {
    background: var(--cream);
    padding: 26px 28px;
  }.fit-box h3 {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
  }.fit-box ul { list-style: none; }.fit-box li {
    color: var(--warm);
    font-size: 14px;
    line-height: 1.5;
    padding: 7px 0;
    display: flex;
    gap: 10px;
  }.fit-box li::before { content: '→'; color: var(--dark); font-weight: 700; }@media (max-width: 920px) {.fit-strip { grid-template-columns: 1fr; }
  }/* ===================================================================
     PROCESS TIMELINE
     =================================================================== */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
  }.process-grid::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 0; right: 0;
    height: 1px;
    background: var(--cream-edge);
  }.step {
    position: relative;
  }.step-dot {
    width: 14px; height: 14px;
    background: var(--dark);
    border-radius: 50%;
    margin: 20px 0 28px;
    position: relative;
    z-index: 1;
    transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  }.step-num {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em;
    color: var(--warm);
    margin-bottom: 12px;
  }.step-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }.step-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--warm);
  }/* animated timeline line - draws through the steps on reveal, then shimmers */
  .process-grid::before { z-index: 0; }.process-grid::after {
    content: '';
    position: absolute;
    top: 25px; left: 0;
    height: 2px; width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 44%, #A7D8CF 50%, var(--accent) 56%, var(--accent) 100%);
    background-size: 230% 100%;
    background-position: 100% 0;
    box-shadow: 0 0 10px rgba(23,110,99,0.4);
    z-index: 0;
    transition: width 2.2s var(--ease-out);
  }.process-grid.visible::after {
    width: 100%;
    animation: procShimmer 2.6s linear 2.3s infinite;
  }
  @keyframes procShimmer {
    0% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
  }.process-grid.visible .step-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(23,110,99,0.16);
    transform: scale(1.18);
  }.process-grid.visible .step:nth-child(1) .step-dot { transition-delay: 0.15s; }.process-grid.visible .step:nth-child(2) .step-dot { transition-delay: 0.65s; }.process-grid.visible .step:nth-child(3) .step-dot { transition-delay: 1.15s; }.process-grid.visible .step:nth-child(4) .step-dot { transition-delay: 1.65s; }@media (max-width: 720px) {.process-grid { grid-template-columns: 1fr; gap: 24px; }.process-grid::before, .process-grid::after { display: none; }
  }/* ===================================================================
     CONTACT / GET IN TOUCH
     =================================================================== */
  .contact {
    background: var(--dark);
    color: var(--cream);
    padding: 140px var(--gutter);
    position: relative;
    overflow: hidden;
  }.contact::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(244, 241, 234, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }.contact-tag {
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--warm-soft);
    margin-bottom: 32px;
    display: flex; align-items: center; gap: 12px;
  }.live-dot {
    width: 8px; height: 8px;
    background: var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(53,164,147,0.4);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(53,164,147,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(53,164,147,0); }
    100% { box-shadow: 0 0 0 0 rgba(53,164,147,0); }
  }.contact-headline {
    font-family: var(--font-feature);
    font-weight: 700;
    font-size: clamp(56px, 9vw, 144px);
    line-height: 0.93;
    letter-spacing: -0.045em;
    margin-bottom: 60px;
    max-width: 1200px;
  }.contact-headline em { font-style: italic; color: var(--accent); font-weight: 500; }.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 80px;
  }.contact-actions {
    display: flex; flex-direction: column; gap: 12px;
  }.contact-action {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px;
    background: rgba(31, 30, 36, 0.5);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid rgba(244, 241, 234, 0.12);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(244, 241, 234, 0.1);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }.contact-action:hover {
    background: var(--cream);
    color: var(--dark);
    border-color: var(--cream);
    transform: translateX(4px);
  }.contact-action-meta {
    display: flex; flex-direction: column; gap: 4px;
  }.contact-action-label {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
  }.contact-action:hover .contact-action-label { color: var(--accent); }.contact-action-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
  }.contact-action-arrow {
    font-size: 24px;
    transition: transform 0.3s var(--ease);
  }.contact-action:hover .contact-action-arrow { transform: translateX(4px); }.contact-side h3 {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
    margin-bottom: 20px;
  }.contact-side p {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(244, 241, 234, 0.85);
    margin-bottom: 20px;
  }@media (max-width: 920px) {.contact-grid { grid-template-columns: 1fr; gap: 40px; }
  }/* Small screens: let long values (the email) shrink and wrap inside the cards */
  .contact-action-meta { min-width: 0; }.contact-action-arrow { flex-shrink: 0; margin-left: 14px; }.contact-action-value { overflow-wrap: anywhere; }@media (max-width: 600px) {.contact-action { padding: 20px 18px; }.contact-action-value { font-size: 17px; }.contact-action-arrow { font-size: 20px; }
  }/* ===================================================================
     FLOATING BOOK A CALL CTA - sticks to bottom of viewport
     =================================================================== */
  .floating-cta {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    z-index: 99;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: rgba(22, 21, 26, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    backdrop-filter: blur(16px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    border: 1px solid rgba(244, 241, 234, 0.12);
    color: var(--cream);
    padding: 16px 24px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(22, 21, 26, 0.25), 0 2px 8px rgba(22, 21, 26, 0.15), inset 0 1px 0 rgba(244, 241, 234, 0.16);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.4s var(--ease);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }.floating-cta.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }.floating-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(22, 21, 26, 0.35), 0 4px 12px rgba(22, 21, 26, 0.2);
  }.floating-cta:hover .arrow {
    transform: translateX(3px);
  }.floating-cta .arrow {
    transition: transform 0.25s var(--ease);
    display: inline-block;
  }.floating-cta .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-bright);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(53,164,147,0.5);
    animation: pulse 2s infinite;
  }/* Hide on mobile? No - make it smaller and centered instead */
  @media (max-width: 600px) {.floating-cta {
      bottom: 16px;
      right: 16px;
      left: 16px;
      justify-content: center;
      padding: 14px 20px;
      font-size: 11px;
    }
  }@media (prefers-reduced-motion: reduce) {.floating-cta {
      transition: opacity 0.2s !important;
    }.floating-cta .pulse-dot {
      animation: none !important;
      box-shadow: none !important;
    }
  }/* ===================================================================
     FOOTER
     =================================================================== */
  footer {
    background: var(--dark-deep);
    color: var(--cream);
    padding: 60px var(--gutter) 40px;
    border-top: 1px solid rgba(244, 241, 234, 0.08);
  }.footer-top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(244, 241, 234, 0.1);
    margin-bottom: 28px;
  }.footer-mark {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-feature);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.04em;
  }.footer-logo { width: 34px; height: 34px; display: block; flex-shrink: 0; }.footer-wordmark { height: 25px; width: auto; display: block; }.footer-meta {
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
    display: flex; gap: 24px; align-items: center;
  }.footer-bottom {
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
  }/* Legal / terms - tucked away, collapsible */
  .footer-legal {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(244, 241, 234, 0.08);
  }.footer-legal summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.2s ease;
  }.footer-legal summary::-webkit-details-marker { display: none; }.footer-legal summary:hover { color: var(--cream); }.footer-legal summary::after {
    content: '+';
    font-size: 13px;
    transition: transform 0.2s ease;
  }.footer-legal[open] summary::after { content: '-'; }/* ===================================================================
     TRUSTED BY - scrolling wordmark strip of names worked with
     =================================================================== */
  .trusted {
    --ls: 1;
    padding: 56px 0;
    background: var(--cream);
    border-top: 1px solid var(--cream-edge);
    border-bottom: 1px solid var(--cream-edge);
    overflow: hidden;
  }.trusted-label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm);
    margin: 0 auto 38px;
    padding: 0 var(--gutter);
    max-width: 760px;
    line-height: 1.6;
  }.logo-ticker {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    /* Own compositing layer: iOS Safari blanks a masked box whose child animates otherwise */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }.logo-ticker-track {
    display: flex; align-items: center; gap: clamp(40px, 5vw, 72px);
    width: max-content;
    animation: scrollX 55s linear infinite;
    will-change: transform;
  }/* Pause-on-hover only where a real cursor exists - on touch screens the
     hover state sticks after a tap and freezes the strip */
  @media (hover: hover) and (pointer: fine) {.logo-ticker:hover .logo-ticker-track { animation-play-state: paused; }
  }.logo-ticker-track img {
    height: calc(var(--ls, 1) * 32px);   /* default: medium wordmarks */
    width: auto;
    display: block;
    opacity: 1;
    transition: transform 0.3s var(--ease);
  }/* Sized by shape so every logo reads at a similar optical weight */
  .logo-ticker-track img.h-wide { height: calc(var(--ls, 1) * 27px); }/* long wordmarks */
  .logo-ticker-track img.h-tall { height: calc(var(--ls, 1) * 40px); }/* compact marks */
  .logo-ticker-track img.h-sq { height: calc(var(--ls, 1) * 46px); }/* square logos */
  .logo-ticker-track img.h-xl { height: calc(var(--ls, 1) * 58px); }/* extra-large feature logos */
  .logo-ticker-track img:hover { transform: scale(1.06); }/* Dark-background logo shown as a self-contained rounded badge (pair with a height class) */
  .logo-ticker-track img.logo-chip { border-radius: 10px; }@media (max-width: 640px) {.trusted { --ls: 0.74; } }/* Small screens show fewer logos at once - scroll faster so the full set
     of brands passes in a reasonable time */
  @media (max-width: 720px) {.logo-ticker-track { animation-duration: 24s; }
  }@media (prefers-reduced-motion: reduce) {.logo-ticker-track { animation: none !important; flex-wrap: wrap; justify-content: center; row-gap: 20px; }.logo-ticker { -webkit-mask-image: none; mask-image: none; }
  }/* ===================================================================
     TUCK - collapsible disclosures that keep the page short
     =================================================================== */
  details.tuck {
    background: var(--cream);
    border: 1px solid var(--cream-edge);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s var(--ease);
  }details.tuck + details.tuck { margin-top: 12px; }details.tuck > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 26px;
  }details.tuck > summary::-webkit-details-marker { display: none; }details.tuck > summary:focus-visible { outline: 2px solid var(--warm-soft); outline-offset: 3px; }.tuck-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(19px, 2vw, 26px);
    letter-spacing: -0.02em;
    line-height: 1.12;
  }.tuck-title em { font-style: italic; color: var(--accent); font-weight: 500; margin-right: 0.1em; }.tuck-cue {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--warm);
  }.tuck-cue .sign {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--cream-edge);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; font-family: var(--font-body);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  }details.tuck:hover, details.tuck[open] { border-color: var(--warm-soft); }details.tuck[open] > summary .sign {
    transform: rotate(45deg);
    background: var(--dark); color: var(--cream); border-color: var(--dark);
  }.tuck-body { padding: 2px 26px 26px; }details.tuck[open] > .tuck-body { animation: tuckOpen 0.45s var(--ease-out); }
  @keyframes tuckOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }@media (max-width: 600px) {.tuck-cue-label { display: none; } }/* Prominent disclosure header - clearly a section you press open */
  details.tuck.tuck-lg > summary { padding: 30px 32px; }.tuck-lg .tuck-title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; }details.tuck.tuck-lg { border-width: 2px; }/* Dark glass variant - over the barber-shoot footage */
  details.tuck.dark {
    background: rgba(31,30,36,0.5);
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    backdrop-filter: blur(16px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(16px) saturate(var(--glass-sat));
    border-color: rgba(244,241,234,0.14);
    box-shadow: inset 0 1px 0 rgba(244,241,234,0.08);
  }details.tuck.dark .tuck-title { color: var(--cream); }details.tuck.dark .tuck-title em { color: var(--warm-soft); }details.tuck.dark .tuck-cue { color: var(--warm-soft); }details.tuck.dark .tuck-cue .sign { border-color: rgba(244,241,234,0.22); color: var(--cream); }details.tuck.dark:hover, details.tuck.dark[open] { border-color: rgba(244,241,234,0.32); }details.tuck.dark[open] > summary .sign { background: var(--cream); color: var(--dark); border-color: var(--cream); }/* Plain "show more" toggle (no box) - tucks extra case studies */
  details.more { margin-top: 8px; }details.more > summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: center;
    padding: 8px 0;
  }details.more > summary::-webkit-details-marker { display: none; }.more-btn {
    font-family: var(--font-mono);
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
    font-weight: 600;
    padding: 15px 26px;
    border-radius: 99px;
    border: 1px solid var(--dark);
    color: var(--dark);
    display: inline-flex; align-items: center; gap: 10px;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  }.more-btn:hover { background: var(--dark); color: var(--cream); transform: translateY(-2px); }.more-btn .arrow { transition: transform 0.3s var(--ease); display: inline-block; }details.more[open] .more-btn .arrow { transform: rotate(180deg); }details.more .lbl-open { display: none; }details.more[open] .lbl-closed { display: none; }details.more[open] .lbl-open { display: inline; }/* ===================================================================
     PRICING CONFIGURATOR - build-your-plan
     =================================================================== */
  .config {
    display: grid;
    grid-template-columns: 1.62fr 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 8px;
  }.config-step { margin-bottom: 38px; }.config-step:last-child { margin-bottom: 0; }.config-step-head {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 20px; flex-wrap: wrap;
  }.config-num {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--warm);
    border: 1px solid var(--cream-edge); border-radius: 99px; padding: 4px 11px;
  }.config-step-head h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1;
  }.config-opts { display: flex; flex-wrap: wrap; gap: 10px; }.opt {
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    color: var(--dark); background: var(--cream);
    border: 1px solid var(--cream-edge); border-radius: 99px;
    padding: 12px 19px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  }.opt::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid var(--cream-edge); flex-shrink: 0;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  }.opt:hover { border-color: var(--accent); transform: translateY(-1px); }.opt.selected { background: var(--dark); color: var(--cream); border-color: var(--dark); }.opt.selected::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,110,99,0.22); }.config-included {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 14px 18px; margin-bottom: 18px;
    background: var(--cream-deep); border: 1px solid var(--cream-edge); border-radius: 12px;
  }.ci-tag {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--dark); background: rgba(23,110,99,0.14); border: 1px solid rgba(23,110,99,0.35);
    padding: 4px 10px; border-radius: 99px;
  }.ci-list { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--dark); }.cs-inner {
    position: sticky; top: 96px;
    background: var(--dark); color: var(--cream);
    border-radius: 20px; padding: 30px;
    box-shadow: 0 24px 60px rgba(22,21,26,0.18), inset 0 1px 0 rgba(244,241,234,0.12);
  }.cs-label {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--warm-soft);
  }.cs-summary {
    font-size: 15px; line-height: 1.55; color: rgba(244,241,234,0.82);
    min-height: 92px; margin: 14px 0 22px; padding-bottom: 22px;
    border-bottom: 1px solid rgba(244,241,234,0.12);
  }.cs-summary b { color: var(--cream); font-weight: 700; }.cs-empty { font-size: 14.5px; line-height: 1.55; color: rgba(244,241,234,0.6); }.cs-recap-row { margin-bottom: 15px; }.cs-recap-row:last-child { margin-bottom: 0; }.cs-rk { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-soft); margin-bottom: 8px; }.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }.cs-chip { display: inline-flex; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--cream); background: rgba(244,241,234,0.08); border: 1px solid rgba(244,241,234,0.16); border-radius: 8px; padding: 6px 11px; line-height: 1.2; }.cs-chip.type { background: rgba(53,164,147,0.14); border-color: rgba(53,164,147,0.42); color: #D6EEE9; }.cs-chip.muted { color: var(--warm-soft); background: transparent; border-style: dashed; font-weight: 500; }.cs-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.14em; font-weight: 600;
    background: var(--cream); color: var(--dark);
    padding: 15px; border-radius: 99px; transition: transform 0.2s var(--ease);
  }.cs-cta:hover { transform: translateY(-2px); }.cs-cta:hover .arrow { transform: translateX(3px); }.cs-cta-ghost {
    width: 100%; margin-top: 8px;
    background: transparent; color: var(--cream);
    border: 1px solid rgba(244,241,234,0.28);
  }.cs-cta-ghost:hover { background: rgba(244,241,234,0.08); }.cs-flex {
    font-size: 12.5px; line-height: 1.5;
    color: rgba(244,241,234,0.6);
    margin-top: 14px; text-align: center;
  }.cur {
    flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; font-weight: 600;
    padding: 8px; border-radius: 9px; color: var(--warm-soft); cursor: pointer;
    background: rgba(244,241,234,0.06); border: 1px solid rgba(244,241,234,0.1);
    transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  }.cur.active { background: var(--cream); color: var(--dark); border-color: var(--cream); }.cur:hover:not(.active) { color: var(--cream); }/* service groups */
  .config-group { margin-bottom: 18px; }.config-group:last-child { margin-bottom: 0; }.config-group-label {
    display: block;
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--warm); margin-bottom: 10px;
  }@media (max-width: 880px) {.config { grid-template-columns: 1fr; gap: 30px; }.cs-inner { position: static; }
  }/* General mobile tightening */
  @media (max-width: 720px) {section { padding-top: 70px; padding-bottom: 70px; }.stats, .contact, .scaling { padding-top: 70px; padding-bottom: 70px; }
  }/* ===================================================================
     BEFORE / AFTER - Instagram phone mock with a drag slider
     =================================================================== */
  .ba { background: var(--cream-deep); }.ba-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }.ba-phone-col { display: flex; flex-direction: column; align-items: center; gap: 18px; }.ba-phone {
    width: min(322px, 86vw); margin: 0 auto; flex-shrink: 0;
    background: #0E0D11; border-radius: 42px; padding: 11px;
    box-shadow: 0 34px 80px rgba(22,21,26,0.3), inset 0 0 0 1px rgba(255,255,255,0.06);
  }.ba-ig-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff;
    padding: 12px 20px; border-radius: 99px;
    background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
    box-shadow: 0 10px 26px rgba(214,41,118,0.32);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }.ba-ig-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(214,41,118,0.42); }.ba-ig-btn svg { width: 18px; height: 18px; }.ba-screen { position: relative; width: 100%; aspect-ratio: 600 / 1304; border-radius: 31px; overflow: hidden; background: #000; user-select: none; }.ba-layer { position: absolute; inset: 0; }.ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }.ba-before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 48% 0 0); }.ba-divider {
    position: absolute; top: 0; bottom: 0; left: 52%; width: 2px; z-index: 5;
    background: rgba(255,255,255,0.95); box-shadow: 0 0 0 1px rgba(0,0,0,0.12); transform: translateX(-1px); pointer-events: none;
  }.ba-handle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.32);
    display: flex; align-items: center; justify-content: center;
  }.ba-handle::before { content: '⇄'; font-size: 17px; color: #16151A; }.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 6; -webkit-appearance: none; appearance: none; background: transparent; }.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; cursor: ew-resize; }.ba-range::-moz-range-thumb { width: 44px; height: 600px; border: none; background: transparent; cursor: ew-resize; }.ba-pill {
    position: absolute; top: 13px; z-index: 4;
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
    padding: 5px 9px; border-radius: 99px; color: #fff;
  }.ba-pill-l { left: 11px; background: rgba(22,21,26,0.72); }.ba-pill-r { right: 11px; background: rgba(22,21,26,0.94); }.ba-hint {
    position: absolute; left: 50%; top: 57%; transform: translate(-50%,-50%); z-index: 7;
    pointer-events: none; white-space: nowrap;
    background: rgba(14,13,17,0.88); color: #fff;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 9px 15px; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.42);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }.ba-hint-ar { display: inline-block; font-size: 14px; animation: baNudge 1.4s ease-in-out infinite; }
  @keyframes baNudge { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }.ba-hint.gone { opacity: 0; transform: translate(-50%,-50%) scale(0.92); }.ba-copy .ba-lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,3vw,34px); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 22px; }.ba-copy .ba-lead strong { color: var(--accent); }.ba-points { list-style: none; border-top: 1px solid var(--cream-edge); }.ba-points li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--cream-edge); font-size: 15px; line-height: 1.45; position: relative; }.ba-points li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }.ba-loam { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cream-edge); display: flex; gap: 18px; align-items: center; }.ba-loam-logo { flex-shrink: 0; width: 158px; border-radius: 12px; overflow: hidden; display: block; box-shadow: 0 8px 22px rgba(22,21,26,0.12); }.ba-loam-logo img { width: 100%; height: auto; display: block; }.ba-loam p { font-size: 15px; line-height: 1.6; color: #514d45; }.ba-loam p strong { color: var(--dark); font-weight: 600; }@media (max-width: 520px) {.ba-loam { flex-direction: column; align-items: flex-start; gap: 14px; } }@media (max-width: 880px) {.ba-wrap { grid-template-columns: 1fr; gap: 40px; } }.gt { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; overflow: hidden; }/* ===================================================================
     FREE TEARDOWN band
     =================================================================== */
  .teardown { background: var(--dark); color: var(--cream); }.teardown-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px,5vw,68px); align-items: center; }.teardown-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--warm-soft); margin-bottom: 18px;
  }.teardown-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.6vw,44px); letter-spacing: -0.03em; line-height: 1.06; }.teardown-title em { font-style: italic; color: var(--accent-bright); }.teardown-sub { margin-top: 16px; color: var(--warm); font-size: 16px; line-height: 1.6; max-width: 520px; }.teardown-form { display: flex; flex-direction: column; gap: 12px; }.teardown-input {
    width: 100%; box-sizing: border-box;
    background: rgba(244,241,234,0.06); border: 1px solid rgba(244,241,234,0.18);
    border-radius: 12px; padding: 17px 18px; color: var(--cream); font-family: var(--font-body); font-size: 16px;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }.teardown-input::placeholder { color: var(--warm-soft); }.teardown-input:focus { outline: none; border-color: rgba(53,164,147,0.55); background: rgba(244,241,234,0.09); }.teardown-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--cream); color: var(--dark); font-family: var(--font-mono); font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
    padding: 17px 22px; border-radius: 12px; cursor: pointer; border: none;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }.teardown-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.3); }.teardown-btn .arrow { transition: transform 0.2s var(--ease); }.teardown-btn:hover .arrow { transform: translateX(3px); }.teardown-fine { font-family: var(--font-mono); font-size: 11px; color: var(--warm-soft); text-align: center; letter-spacing: 0.04em; }@media (max-width: 820px) {.teardown-wrap { grid-template-columns: 1fr; gap: 28px; } }/* Inline Calendly embed in contact */
  .cal-embed {
    margin: 8px 0 30px;
    border-radius: 22px; overflow: hidden;
    background: var(--dark-soft);
    border: 1px solid rgba(244,241,234,0.08);
    box-shadow: 0 24px 60px rgba(0,0,0,0.34);
    position: relative;
  }/* Shows through until the Calendly iframe paints (or if it's blocked) */
  .cal-embed::before {
    content: 'Loading calendar… if it doesn\'t appear, use the booking link below';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 30px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase; line-height: 2;
    color: var(--warm-soft);
  }.cal-embed .calendly-inline-widget { border-radius: 22px; position: relative; z-index: 1; }.cal-or { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warm-soft); margin-bottom: 18px; }@media (max-width: 760px) {.cal-embed .calendly-inline-widget { height: 820px !important; } }/* ===================================================================
     STATEMENT - full-bleed brand line over UGC footage
     =================================================================== */
  .statement {
    position: relative;
    min-height: 86svh;
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: var(--dark);
    color: var(--cream);
    padding: clamp(64px, 12svh, 140px) var(--gutter) clamp(48px, 9svh, 110px);
  }.statement-video-wrap {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
  }.statement-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s var(--ease-out);
  }.statement-video.loaded { opacity: 1; }/* Portrait phones crop the 16:9 frame hard - bias toward the woman on the right */
  @media (max-width: 720px) {.statement-video { object-position: 68% center; }
  }.statement-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(14, 13, 17, 0.34) 0%,
      rgba(14, 13, 17, 0.44) 50%,
      rgba(14, 13, 17, 0.82) 100%);
  }.statement-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--max-w);
    margin: 0 auto;
  }.statement-kicker {
    display: block;
    color: rgba(244, 241, 234, 0.7);
    margin-bottom: 20px;
  }.statement-headline {
    font-family: var(--font-hero);
    font-weight: 600;
    font-size: clamp(34px, 5.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 14ch;
  }.statement-headline em {
    font-style: normal;
    color: var(--accent-bright);
  }.statement-sub {
    margin-top: 24px;
    max-width: 560px;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.6;
    color: rgba(244, 241, 234, 0.88);
  }.statement-cue {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 600;
    color: var(--cream);
    border-bottom: 1px solid rgba(244, 241, 234, 0.4);
    padding-bottom: 6px;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  }.statement-cue:hover { color: var(--accent-bright); border-color: var(--accent-bright); }.statement-cue .arrow { transition: transform 0.25s var(--ease); display: inline-block; }.statement-cue:hover .arrow { transform: translateY(3px); }/* Phones: keep the headline over the footage, drop the supporting copy -
     the line is the moment, the paragraph is what there's no room for */
  @media (max-width: 720px) {.statement { min-height: 64svh; }.statement-sub, .statement-cue { display: none; }.statement-kicker { margin-bottom: 12px; }.statement-headline { font-size: clamp(32px, 9vw, 44px); max-width: none; }
  }@media (prefers-reduced-motion: reduce) {.statement-video, .hero-video, .case-video { display: none; }
  }/* Meticula (contact headline + wordmark) has no true italic, so keep that accent
     upright. Every other heading keeps its real italic accents. */
  .contact-headline em {
    font-style: normal;
  }/* ===================================================================
     SHIPPED BY US - live sites we built
     =================================================================== */
  .work-intro {
    font-size: 16.5px; line-height: 1.6;
    color: var(--ink-soft);
    max-width: 560px;
    margin-bottom: 44px;
  }.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }.work-card {
    display: flex; flex-direction: column;
    padding: 34px 30px;
    background: var(--cream);
    border: 1px solid var(--cream-edge);
    border-radius: 14px;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }.work-card:hover {
    transform: translateY(-4px);
    border-color: var(--dark);
    box-shadow: 0 18px 40px rgba(22, 21, 26, 0.1);
  }.work-preview {
    display: block; position: relative;
    margin: -34px -30px 26px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 13px 13px 0 0;
    border-bottom: 1px solid var(--cream-edge);
    background: var(--cream-deep);
  }.work-preview video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.5s var(--ease);
  }.work-card:hover .work-preview video { transform: scale(1.035); }.work-domain {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--warm);
    margin-bottom: 22px;
  }.work-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }.work-desc {
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 26px;
  }.work-visit {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
  }.work-visit .arrow { transition: transform 0.3s var(--ease); }.work-card:hover .work-visit .arrow { transform: translate(3px, -3px); }@media (max-width: 920px) {.work-grid { grid-template-columns: 1fr; } }/* Newest client band - a brand we run growth for (not a site we built) */
  .work-client {
    margin-top: 18px;
    display: grid; grid-template-columns: 220px 1fr;
    border: 1px solid var(--cream-edge);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }.work-client:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px rgba(22, 21, 26, 0.08);
  }.work-client-logo {
    background: #000;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
  }.work-client-logo img { width: 128px; height: auto; display: block; border-radius: 50%; }.work-client-body { padding: 26px 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }.work-client-tag {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
  }.work-client .work-desc { max-width: 640px; }@media (max-width: 720px) {.work-client { grid-template-columns: 1fr; }.work-client-logo { padding: 30px; }
  }/* Config summary - your-email field for sending the brief directly */
  .cs-email-input {
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    font-family: var(--font-body); font-size: 14.5px;
    color: var(--cream);
    background: rgba(244,241,234,0.06);
    border: 1px solid rgba(244,241,234,0.18);
    border-radius: 99px;
    text-align: center;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  }.cs-email-input::placeholder { color: rgba(244,241,234,0.45); }.cs-email-input:focus { outline: none; border-color: rgba(53,164,147,0.55); background: rgba(244,241,234,0.09); }.cs-email-input.invalid { border-color: rgba(255,107,107,0.7); }.cs-cta[disabled] { opacity: 0.65; pointer-events: none; }/* Teardown form - sending / sent states */
  .teardown-btn[disabled] { opacity: 0.65; pointer-events: none; }.teardown-done {
    display: flex; flex-direction: column; gap: 8px;
    padding: 26px 28px;
    background: rgba(53,164,147,0.1);
    border: 1px solid rgba(53,164,147,0.4);
    border-radius: 14px;
    color: var(--cream);
  }.teardown-done strong { font-size: 17px; }.teardown-done span { font-size: 13.5px; color: rgba(244,241,234,0.7); line-height: 1.5; }/* Footer - social links */
  .footer-social {
    display: flex; gap: 26px; align-items: center;
    margin-bottom: 26px;
  }.footer-social a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--warm-soft);
    transition: color 0.2s var(--ease);
  }.footer-social a:hover { color: var(--cream); }.footer-social svg { width: 14px; height: 14px; fill: currentColor; }/* ===================================================================
     MULTI-PAGE ADDITIONS - page heroes, explore cards, CTA band
     =================================================================== */
  [id] { scroll-margin-top: 84px; }.nav-links a.active { color: var(--accent); }.page-hero {
    padding: clamp(150px, 22svh, 220px) var(--gutter) clamp(36px, 5svh, 56px);
    background: var(--cream);
  }.page-hero-inner { max-width: var(--max-w); margin: 0 auto; }.page-hero-tag { display: block; margin-bottom: 18px; }.page-hero-title {
    font-family: var(--font-hero);
    font-weight: 600;
    font-size: clamp(40px, 6.4vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink-soft);
  }.page-hero-title .accent { color: var(--accent); }.page-hero-sub {
    margin-top: 18px; max-width: 600px;
    font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6;
    color: var(--warm);
  }.page-first { padding-top: clamp(140px, 20svh, 190px) !important; }.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.explore-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 30px 26px;
    border: 1px solid var(--cream-edge);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }.explore-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px rgba(22, 21, 26, 0.08);
  }.explore-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); }.explore-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }.explore-card p { font-size: 14.5px; line-height: 1.55; color: var(--warm); flex: 1; }.explore-cta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }.explore-cta .arrow { color: var(--accent); display: inline-block; transition: transform 0.25s var(--ease); }.explore-card:hover .explore-cta .arrow { transform: translateX(4px); }@media (max-width: 860px) {.explore-grid { grid-template-columns: 1fr; } }.cta-band { background: var(--dark); color: var(--cream); text-align: center; }.cta-band .mono { color: var(--warm-soft); display: block; margin-bottom: 18px; }.cta-band h2 {
    font-family: var(--font-hero); font-weight: 600;
    font-size: clamp(34px, 5vw, 72px); letter-spacing: -0.03em; line-height: 1.05;
    margin-bottom: 30px; color: var(--cream);
  }.cta-band h2 em { font-style: normal; color: var(--accent-bright); }.cta-band .btn-primary { background: var(--cream); color: var(--dark); }.cta-band .btn-primary:hover { background: var(--accent-bright); color: var(--dark-deep); }/* Footer legal is one link now - full text lives on terms.html */
  .footer-legal-link { margin-top: 26px; border-top: 1px solid rgba(244,241,234,0.12); padding-top: 18px; }.footer-legal-link a {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.14em; color: rgba(244,241,234,0.55);
    transition: color 0.25s var(--ease);
  }.footer-legal-link a:hover { color: var(--accent-bright); }

  /* ===================================================================
     FOCUS STATES - visible keyboard focus everywhere
     =================================================================== */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .btn:focus-visible, .nav-cta:focus-visible, .cap-chip:focus-visible,
  .opt:focus-visible, .cs-cta:focus-visible, .teardown-btn:focus-visible,
  .floating-cta:focus-visible { outline-offset: 2px; border-radius: 99px; }
  .work-card:focus-visible, .explore-card:focus-visible, .work-client:focus-visible,
  .contact-action:focus-visible { outline-offset: 4px; border-radius: 18px; }
  input[type="range"]:focus-visible { outline-offset: 6px; border-radius: 99px; }

  /* ===================================================================
     CONVERSION ADDITIONS - pull quote, cta quote, footer nav + news, faq
     =================================================================== */
  .pull-quote { padding-top: 40px; padding-bottom: 40px; }
  .pull-quote blockquote { max-width: 780px; margin: 0 auto; text-align: center; }
  .pull-quote p {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -0.02em;
    color: var(--dark);
  }
  .pull-quote .pq-meta { margin-top: 18px; font-size: 14px; color: var(--warm); }
  .pull-quote .pq-meta b { color: var(--dark); }
  .pull-quote .pq-meta a { color: var(--accent); font-weight: 600; }
  .pull-quote .pq-meta a:hover { text-decoration: underline; }

  .cta-quote {
    max-width: 560px; margin: 6px auto 38px;
    font-size: 14.5px; line-height: 1.6; color: rgba(244,241,234,0.72);
  }

  .footer-nav {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin: 30px 0 4px;
    padding-top: 22px; border-top: 1px solid rgba(244,241,234,0.12);
  }
  .footer-nav a {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.14em; color: rgba(244,241,234,0.6);
    transition: color 0.25s var(--ease);
  }
  .footer-nav a:hover { color: var(--accent-bright); }

  .footer-news { margin: 18px 0 28px; }
  .footer-news-label { display: block; font-size: 13px; color: rgba(244,241,234,0.55); margin-bottom: 10px; }
  .footer-news-row { display: flex; gap: 10px; max-width: 420px; }
  .footer-news input {
    flex: 1; padding: 12px 16px; border-radius: 99px;
    background: rgba(244,241,234,0.07); border: 1px solid rgba(244,241,234,0.18);
    color: var(--cream); font-family: var(--font-body); font-size: 14px;
  }
  .footer-news input::placeholder { color: rgba(244,241,234,0.38); }
  .footer-news input:focus { outline: none; border-color: var(--accent-bright); }
  .footer-news button {
    padding: 12px 20px; border-radius: 99px;
    font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.12em; font-weight: 600;
    background: var(--cream); color: var(--dark);
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .footer-news button:hover { background: var(--accent-bright); transform: translateY(-1px); }
  .footer-news-done { font-size: 14px; color: var(--accent-bright); font-weight: 600; }

  .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }

  /* ===================================================================
     CASE-STUDY DETAIL PAGES
     =================================================================== */
  .case-detail { padding-top: 20px; }
  .case-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
  .case-detail-main .case-logo { margin-bottom: 16px; width: auto; }
  .case-detail-h {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em;
    margin: 34px 0 12px;
  }
  .case-detail-main > p { font-size: 16px; line-height: 1.65; color: var(--graphite, var(--dark)); max-width: 60ch; }
  .case-list-light li {
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--cream-edge);
    border-radius: 12px;
    color: var(--dark);
    box-shadow: 0 18px 40px rgba(22,21,26,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .case-list-light li strong { color: var(--dark); }
  .case-list-light .case-check { color: var(--accent); }
  .case-detail-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
  .case-detail-side .case-result { width: 100%; }
  .case-result-sub { font-size: 13px; opacity: 0.7; margin-top: 8px; }
  .page-hero-tag a { color: var(--accent); }
  .page-hero-tag a:hover { text-decoration: underline; }
  @media (max-width: 860px) {
    .case-detail-grid { grid-template-columns: 1fr; }
    .case-detail-side { position: static; }
  }

  /* Case card link on the receipts page */
  .case-link {
    display: inline-block; margin-top: 12px;
    font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.13em; font-weight: 600; color: var(--accent);
  }
  .case-link .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
  .case-link:hover .arrow { transform: translateX(4px); }

  /* Latest from the house - dated proof feed */
  .house-feed { max-width: 860px; }
  .house-feed li {
    display: grid; grid-template-columns: 110px 1fr; gap: 18px;
    padding: 14px 0; border-bottom: 1px solid var(--cream-edge);
    font-size: 15px; line-height: 1.5;
  }
  .house-feed li:last-child { border-bottom: none; }
  .house-feed .hf-date {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent); font-weight: 600; padding-top: 3px;
  }
  .house-feed b { font-weight: 680; }
  @media (max-width: 560px) { .house-feed li { grid-template-columns: 1fr; gap: 4px; } }

  .brief-echo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 22px; padding: 14px 18px;
    background: rgba(244,241,234,0.06); border: 1px solid rgba(244,241,234,0.14);
    border-radius: 14px;
  }
  .brief-echo-label {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent-bright); font-weight: 600;
  }

  /* Old Safari (pre-15) has no aspect-ratio - keep the phone mock shaped */
  @supports not (aspect-ratio: 1) {
    .ba-screen { height: 0; padding-bottom: 217.3%; }
  }

  /* Instagram in the nav - always visible, every page, every device */
  .nav-right { display: flex; align-items: center; gap: 6px; }
  .nav-ig {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: rgba(244,241,234,0.85);
    transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .nav-ig svg { width: 19px; height: 19px; display: block; }
  .nav-ig:hover { color: var(--accent-bright); background: rgba(244,241,234,0.08); transform: translateY(-1px); }
  @media (max-width: 400px) { .nav-ig { width: 34px; height: 34px; } }

  /* ===================================================================
     APPLICATION GATE - booking becomes a 60-second application
     =================================================================== */
  .apply-card {
    background: rgba(244,241,234,0.05);
    border: 1px solid rgba(244,241,234,0.14);
    border-radius: 22px;
    padding: clamp(22px, 3.4vw, 40px);
    margin-bottom: 30px;
  }
  .apply-tag { color: var(--accent-bright); display: block; margin-bottom: 12px; }
  .apply-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.02em;
    color: var(--cream); margin-bottom: 22px;
  }
  .apply-title em { font-style: italic; color: var(--accent-bright); }
  .apply-form { display: flex; flex-direction: column; gap: 12px; }
  .apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .apply-form input, .apply-form select, .apply-form textarea {
    width: 100%; padding: 14px 16px; border-radius: 12px;
    background: rgba(244,241,234,0.07);
    border: 1px solid rgba(244,241,234,0.18);
    color: var(--cream); font-family: var(--font-body); font-size: 14.5px;
    -webkit-appearance: none; appearance: none;
  }
  .apply-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23948F85'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    padding-right: 38px; cursor: pointer;
  }
  .apply-form ::placeholder { color: rgba(244,241,234,0.4); }
  .apply-form select:invalid { color: rgba(244,241,234,0.4); }
  .apply-form select option { color: #16151A; background: #FFFFFF; }
  .apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
    outline: none; border-color: var(--accent-bright); background-color: rgba(244,241,234,0.1);
  }
  .apply-form textarea { resize: vertical; min-height: 74px; }
  .apply-btn {
    align-self: flex-start;
    font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.14em; font-weight: 600;
    background: var(--cream); color: var(--dark);
    padding: 15px 26px; border-radius: 99px;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .apply-btn:hover { background: var(--accent-bright); transform: translateY(-1px); }
  .apply-btn:disabled { opacity: 0.6; transform: none; }
  .apply-fine { font-size: 12.5px; color: rgba(244,241,234,0.5); }
  .apply-done-line {
    display: flex; gap: 10px; align-items: center;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 600; color: var(--accent-bright);
    margin-bottom: 14px;
  }
  @media (max-width: 640px) { .apply-grid { grid-template-columns: 1fr; } }

  /* ===================================================================
     GLOBAL DESK - live coverage strip
     =================================================================== */
  .desk {
    background: var(--cream);
    border-top: 1px solid var(--cream-edge);
    /* no bottom border - the sectors strip below brings its own top border */
    padding: 13px var(--gutter);
  }
  .desk-row {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px;
  }
  .desk-status {
    display: inline-flex; gap: 10px; align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    color: var(--accent); white-space: nowrap;
  }
  .desk-zones { display: flex; gap: clamp(14px, 2.6vw, 34px); }
  .desk-zone {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--warm); white-space: nowrap;
  }
  .desk-zone b { color: var(--dark); font-weight: 600; margin-right: 7px; }
  .desk-zone [data-tz] { font-variant-numeric: tabular-nums; }
  @media (max-width: 920px) {
    .desk-row { flex-direction: column; align-items: flex-start; gap: 9px; }
    .desk-status { white-space: normal; }
    .desk-zones {
      width: 100%; overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-right: 8px;
      -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    }
    .desk-zones::-webkit-scrollbar { display: none; }
    .desk-zone { flex-shrink: 0; }
  }
  .desk-dark {
    background: transparent; border: 0;
    border-top: 1px solid rgba(244,241,234,0.12);
    border-bottom: 1px solid rgba(244,241,234,0.12);
    padding: 13px 0; margin: 30px 0 26px;
  }
  .desk-dark .desk-status { color: var(--accent-bright); }
  .desk-dark .desk-zone { color: rgba(244,241,234,0.55); }
  .desk-dark .desk-zone b { color: var(--cream); }

  /* iOS Safari zooms the viewport when focusing controls under 16px -
     on touch-size screens every form control gets 16px */
  @media (max-width: 920px), (pointer: coarse) {
    .apply-form input, .apply-form select, .apply-form textarea,
    .teardown-input, .cs-email-input, .footer-news input {
      font-size: 16px;
    }
  }