/* No Website Mate — shared site styles (extracted from index.html) */

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* native scroll-behavior removed: Lenis handles smooth scrolling */

    /* overflow-x on <html> (not <body>) so it hides horizontal overflow
       without turning <body> into a scroll container — which would break
       position: sticky (used by the work showreel). */
    html { overflow-x: hidden; }

    body {
      background: #050505;
      color: #f5f2ec;
      font-family: 'Inter', sans-serif;
    }

    .serif {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 500;
      letter-spacing: -0.03em;
    }

    .eyebrow {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #cfcac0;
      margin-bottom: 28px;
      display: block;
    }

    /* NAV */
    .nav {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 50;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28px 54px;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .logo {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 30px;
      letter-spacing: -0.06em;
      font-weight: 500;
      color: #f5f2ec;
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 42px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .nav a { color: #f5f2ec; text-decoration: none; }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 28px;
      border: 1px solid rgba(255,255,255,0.18);
      color: #f5f2ec;
      text-decoration: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: 0.3s ease;
      cursor: pointer;
      background: transparent;
    }

    .btn.light {
      background: #f5f2ec;
      color: #050505;
      border-color: #f5f2ec;
    }

    .btn:hover { transform: translateY(-3px); opacity: 0.85; }

    .btn.dark {
      background: #050505;
      color: #f5f2ec;
      border: 1px solid #050505;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 28px;
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-family: 'JetBrains Mono', monospace;
      margin-top: 24px;
      transition: 0.3s ease;
      align-self: flex-start;
    }

    .btn.dark:hover {
      transform: translateY(-3px);
      opacity: 0.9;
    }

    /* CASE STUDY */
    .section.case {
      padding: 150px 64px;
      position: relative;
      z-index: 3;
    }
    .case-inner {
      max-width: 1000px;
      margin: 0 auto;
    }
    .case-eyebrow-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 48px;
    }
    .case-eyebrow-row .eyebrow { margin-bottom: 0; }
    .case-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.16em;
      color: #6b6862;
      text-transform: uppercase;
    }
    .case-headline {
      font-size: clamp(38px, 4.8vw, 66px);
      line-height: 1.0;
      letter-spacing: -0.03em;
      margin: 0 auto 64px;
      max-width: 820px;
      text-align: center;
    }
    .case-arc {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 64px;
    }
    .case-step {
      background: #050505;
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .case-step .k {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      color: #6b6862;
      text-transform: uppercase;
    }
    .case-step h3 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 500;
      letter-spacing: -0.03em;
      font-size: 24px;
      line-height: 1.1;
    }
    .case-step p {
      font-size: 15px;
      line-height: 1.65;
      color: #b8b4ab;
    }
    .case-quote {
      border-left: 2px solid rgba(245,242,236,0.4);
      padding: 8px 0 8px 32px;
      margin-bottom: 48px;
    }
    .case-quote blockquote {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 500;
      letter-spacing: -0.02em;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height: 1.25;
      color: #f5f2ec;
      margin-bottom: 24px;
    }
    .case-quote cite {
      font-style: normal;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #cfcac0;
    }
    .case-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #f5f2ec;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.25);
      padding-bottom: 6px;
      transition: 0.3s ease;
    }
    .case-cta:hover { gap: 18px; border-color: #f5f2ec; }
    @media (max-width: 768px) {
      .section.case { padding: 90px 20px; }
      .case-arc { grid-template-columns: 1fr; }
      .case-quote { padding-left: 22px; }
    }

    /* CAPABILITY / BEYOND THE BUILD */
    .section.stack {
      padding: 140px 64px;
      position: relative;
      z-index: 3;
    }
    .stack-head {
      max-width: 720px;
      margin: 0 auto 72px;
      text-align: center;
    }
    .stack-head .eyebrow { display: block; }
    .stack-head p { margin-left: auto; margin-right: auto; }
    .stack-head h2 {
      font-size: clamp(40px, 5vw, 72px);
      line-height: 0.95;
      margin-bottom: 20px;
    }
    .stack-head p {
      font-size: 18px;
      line-height: 1.7;
      color: #d4d0c8;
      max-width: 560px;
    }
    .stack-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .stack-card {
      background: #050505;
      padding: 48px 44px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: background 0.4s ease;
    }
    .stack-card:hover { background: #0c0c0c; }
    .stack-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      color: #6b6862;
    }
    .stack-card h3 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 500;
      letter-spacing: -0.03em;
      font-size: 27px;
      line-height: 1.1;
    }
    .stack-card p {
      font-size: 15.5px;
      line-height: 1.65;
      color: #b8b4ab;
    }
    .stack-foot {
      margin-top: 56px;
      padding: 4px 0 4px 28px;
      border-left: 2px solid rgba(245,242,236,0.35);
      font-size: 16px;
      line-height: 1.7;
      color: #d4d0c8;
      max-width: 620px;
    }
    .stack-foot strong { color: #f5f2ec; font-weight: 500; }
    @media (max-width: 768px) {
      .section.stack { padding: 90px 20px; }
      .stack-grid { grid-template-columns: 1fr; }
      .stack-card { padding: 40px 28px; }
    }

    /* Invert light buttons used on cream-background sections */
    .contact-form .btn.light,
    .pricing-deposit .btn.light {
      background: #050505;
      color: #f5f2ec;
      border-color: #050505;
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 150px 64px 80px;
      position: relative;
      overflow: hidden;
    }

    /* Ferrofluid canvas = fixed, site-wide background behind everything.
       pointer-events:none so it never intercepts clicks anywhere on the page. */
    .ferrofluid-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;      /* fallback */
      height: 100lvh;     /* large viewport height — stays constant as the mobile URL bar hides/shows, so the canvas doesn't resize (and flicker) on scroll */
      overflow: hidden;
      z-index: -1;
      pointer-events: none;
      /* keep the fixed canvas on its own GPU layer so scrolling content over it
         doesn't force a repaint (a common cause of mobile scroll flicker) */
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    /* hero content sits above the fluid */
    .hero > .hero-copy,
    .hero .hero-frame { position: relative; z-index: 3; }

    /* readability scrim over the ferrofluid (left-weighted) */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.5) 28%, rgba(5,5,5,0) 55%);
      z-index: 2;
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
      background-size: 4px 4px;
      opacity: 0.06;
      z-index: 1;
    }

    h1 {
      font-size: clamp(64px, 8vw, 132px);
      line-height: 0.88;
      max-width: 760px;
      margin-bottom: 32px;
    }

    .hero p {
      font-size: 20px;
      line-height: 1.7;
      max-width: 520px;
      color: #d4d0c8;
      margin-bottom: 42px;
    }

    .hero-actions { display: flex; gap: 22px; align-items: center; }

    /* HERO FRAME — same browser treatment as .ws-browser, ambient only */
    .hero-frame {
      position: relative;
      width: 100%;
    }
    .hero-browser {
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 4px;
      overflow: hidden;
      background: #050505;
      box-shadow: 0 40px 120px rgba(0,0,0,0.65);
    }
    .hero-chrome {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      background: rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .hero-url {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: #cfcac0;
    }
    .hero-viewport {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #050505;
    }
    /* mobile-only static image — desktop fades the live iframe in over
       the black viewport instead (no still can match the hero video) */
    .hero-poster {
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      z-index: 2;
    }
    /* Renders at a fixed 1440x900 desktop viewport (exactly 16:10, same
       as .hero-viewport) and is scaled down optically — JS sets
       scale(viewportWidth / 1440) — so the embedded site always lays out
       at its desktop breakpoint regardless of the frame's on-screen size. */
    .hero-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 900px;
      transform-origin: top left;
      border: 0;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      /* ambient only — never interactive */
      pointer-events: none;
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  visibility 0s;
    }
    .hero-iframe.is-in { opacity: 1; visibility: visible; }
    .hero-caption {
      margin-top: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.16em;
      color: #cfcac0;
    }

    /* STATS */
    .stats {
      background: #f5f2ec;
      color: #050505;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 86px 64px;
    }

    .stat {
      border-right: 1px solid rgba(0,0,0,0.13);
      text-align: center;
    }

    .stat:last-child { border-right: none; }

    .stat strong {
      display: block;
      font-family: 'Fraunces', Georgia, serif;
      font-size: 68px;
      font-weight: 400;
      margin-bottom: 10px;
      letter-spacing: -0.03em;
    }

    .stat span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* SECTION DEFAULT */
    .section { padding: 120px 64px; }

    /* WORK — cinematic scroll-expand intro */
    .work-section { position: relative; }

    .work-cinema {
      --p: 0;                 /* scroll progress 0 → 1, set by JS */
      position: relative;
      height: 240vh;          /* length of scroll the expand takes */
    }
    .work-cinema-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: grid;
      place-items: center;
      text-align: center;
    }
    .wc-eyebrow {
      position: absolute;
      top: 120px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      opacity: calc(1 - var(--p) * 2);
      z-index: 3;
    }
    .wc-media {
      --s0: 0.30;                 /* start scale (desktop) */
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(92vw, 1500px);   /* final size; the expand is done via transform: scale */
      aspect-ratio: 2.09;
      max-height: 86vh;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 40px 120px rgba(0,0,0,0.6);
      z-index: 1;
      /* animate transform only (GPU-composited) — smooth on mobile, no per-frame reflow */
      transform: translate(-50%, -50%) scale(calc(var(--s0) + (1 - var(--s0)) * var(--p)));
      transform-origin: center center;
      will-change: transform;
    }
    .wc-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: grayscale(1) contrast(1.05);
    }
    .wc-caption {
      position: absolute;
      left: 0; right: 0; bottom: 22px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #f5f2ec;
      text-shadow: 0 2px 20px rgba(0,0,0,0.85);
      opacity: calc((var(--p) - 0.75) * 4);
      z-index: 2;
    }
    .wc-title {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: clamp(44px, 7vw, 104px);
      line-height: 0.9;
      pointer-events: none;
    }
    .wc-line { display: block; opacity: calc(1 - var(--p)); }
    .wc-line-1 { transform: translateX(calc(var(--p) * -32vw)); }
    .wc-line-2 { transform: translateX(calc(var(--p) * 32vw)); }
    .wc-cue {
      position: absolute;
      bottom: 56px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #cfcac0;
      opacity: calc(1 - var(--p) * 3);
    }

    /* reduced-motion: no scroll-scrub — show a clean static composition */
    @media (prefers-reduced-motion: reduce) {
      .work-cinema { height: auto; }
      .work-cinema-stage {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        padding: 120px 22px;
      }
      .wc-eyebrow { position: static; transform: none; opacity: 1 !important; }
      .wc-media {
        position: relative;
        top: auto; left: auto;
        transform: none;
        width: min(92vw, 920px) !important;
      }
      .wc-caption { opacity: 1 !important; }
      .wc-line { opacity: 1 !important; transform: none !important; }
      .wc-cue { display: none; }
    }

    /* WORK STAGE — pinned split: index left, live browser frame right */
    .work-stage {
      display: grid;
      /* 42/58 split as fr units so the 48px gap can't overflow the row */
      grid-template-columns: 42fr 58fr;
      gap: 48px;
      align-items: start;
      padding: 0 64px 120px;
    }
    .ws-index {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .section-title h2 {
      font-size: 72px;
      line-height: 0.95;
      margin-bottom: 28px;
    }

    .section-title p { color: #b8b3aa; line-height: 1.7; max-width: 330px; }

    /* Row interactive states live on the inner <button>: the .motion
       reveal system owns .ws-row's opacity/transform transition (plus a
       staggered inline transition-delay), so any state transition on the
       row itself would be hijacked by it. */
    .ws-row > button {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      align-items: center;
      width: 100%;
      min-height: 88px;
      padding: 0;
      position: relative;
      background: none;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* 2px accent bar slides up on the active row. It sits on the row's
       own box (row is position: relative) rather than the button, so the
       button's border-box can never clip or offset it on the last row. */
    .ws-row { position: relative; }
    .ws-row::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #f5f2ec;
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }
    .ws-row.is-active > button,
    .ws-row > button:focus-visible {
      border-bottom-color: rgba(255,255,255,0.55);
    }
    .ws-row.is-active::before { transform: scaleY(1); }
    /* keyboard parity — kept as its own rule so an engine without :has()
       drops only this line, not the active state above */
    .ws-row:has(> button:focus-visible)::before { transform: scaleY(1); }
    .ws-row > button:hover .ws-client,
    .ws-row > button:focus-visible .ws-client,
    .ws-row.is-active > button .ws-client { color: #ffffff; }
    .ws-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      color: #cfcac0;
    }
    .ws-copy { display: block; padding-right: 20px; }
    .ws-client {
      display: block;
      font-size: 26px;
      line-height: 1.15;
      color: #f5f2ec;
      transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ws-trade {
      display: block;
      margin-top: 4px;
      font-weight: 400;
      font-size: 13px;
      color: #b8b3aa;
    }
    .ws-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: #cfcac0;
    }
    /* mobile-only card version of each row */
    .ws-card { display: none; }

    /* Pinned browser frame */
    .ws-frame-col {
      position: sticky;
      top: 120px;
      align-self: start;
    }
    .ws-browser {
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 4px;
      overflow: hidden;
      background: #050505;
    }
    .ws-chrome {
      position: relative;
      display: flex;
      align-items: center;
      height: 38px;
      padding: 0 14px;
      background: rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .ws-dots { display: flex; gap: 6px; }
    .ws-dots span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
    }
    .ws-url {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: #cfcac0;
    }
    .ws-live {
      display: none;
      margin-left: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.16em;
      color: #f5f2ec;
    }
    .ws-browser.is-live .ws-live { display: inline; }
    .ws-live-dot {
      display: inline-block;
      animation: ws-pulse 2s ease-in-out infinite;
    }
    @keyframes ws-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.25; }
    }
    .ws-viewport {
      position: relative;
      aspect-ratio: 16 / 10;
      background: #050505;
      overflow: hidden;
      cursor: pointer;
    }
    .ws-browser.is-live .ws-viewport { cursor: default; }
    /* device toggle — sits above the browser, flush right */
    .ws-device-toggle {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
    }
    .ws-device-btn {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #cfcac0;
      padding: 8px 14px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.14);
      cursor: pointer;
      transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ws-device-btn + .ws-device-btn { border-left: 0; }
    .ws-device-btn.is-active {
      background: rgba(255,255,255,0.10);
      color: #f5f2ec;
      border-color: rgba(255,255,255,0.30);
    }
    /* Fixed-base rendering, scaled optically like the hero frame. JS sets
       width/height per device mode (desktop 1440x900, mobile 390x844) and
       drives transform: translate+scale. Transform only animates during a
       device toggle (.is-anim) — resize recomputes are instant. */
    .ws-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 900px;
      transform-origin: top left;
      border: 0;
      z-index: 1;
      opacity: 0;
      /* viewport owns hover/click until live mode hands control over */
      pointer-events: none;
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ws-iframe.is-anim {
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* minimal phone suggestion around the centred mobile frame */
    .ws-phone {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 18px;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ws-phone.is-on { opacity: 1; }
    .ws-phone::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,0.20);
    }
    .ws-iframe.is-in { opacity: 1; }
    .ws-iframe.is-out { opacity: 0; transition-duration: 0.3s; }
    .ws-browser.is-live .ws-iframe { pointer-events: auto; }
    .ws-loading {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .ws-loading[hidden] { display: none; }
    .ws-loading-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 38%;
      height: 1px;
      background: #f5f2ec;
      animation: ws-load-sweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }
    @keyframes ws-load-sweep {
      from { transform: translateX(-110%); }
      to { transform: translateX(380%); }
    }
    .ws-loading-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: #cfcac0;
    }
    .ws-hint {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(5,5,5,0.4);
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.16em;
      color: #f5f2ec;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .ws-viewport:hover .ws-hint { opacity: 1; }
    .ws-browser.is-live .ws-hint { display: none; }
    .ws-actions { margin-top: 18px; }
    .ws-actions a {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #cfcac0;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    .ws-actions a:hover { color: #f5f2ec; }
    /* visually hidden live-region for screen readers */
    .ws-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    /* PROCESS */
    .process {
      background: #f5f2ec;
      color: #050505;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
    }

    .step {
      border-right: 1px solid rgba(0,0,0,0.12);
      padding-right: 40px;
    }

    .step:last-child { border-right: none; }

    .step strong {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 76px;
      font-weight: 400;
      display: block;
      margin-bottom: 22px;
      letter-spacing: -0.03em;
    }

    .step h3 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 18px;
    }

    .step p { color: #444; line-height: 1.7; }

    /* ABOUT GAGE */
    .about-gage { background: rgba(5,5,5,0.5); padding: 140px 64px; }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 80px;
      align-items: center;
      max-width: 1400px;
      margin: 0 auto;
    }
    .about-image {
      height: auto;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #050505;
    }
    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      filter: grayscale(1) contrast(1.05);
    }
    .about-copy h2 { font-size: clamp(48px, 5vw, 72px); margin: 28px 0 36px; line-height: 0.95; }
    .about-copy p { font-size: 17px; line-height: 1.75; color: #b8b3aa; margin-bottom: 22px; max-width: 560px; }
    .signature {
      margin-top: 48px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.18);
      display: grid;
      gap: 6px;
    }
    .signature strong { font-size: 24px; }
    .signature .eyebrow { margin-bottom: 0; }

    /* NOT FOR EVERYONE */
    .not-for-everyone { background: #f5f2ec; color: #050505; padding: 140px 64px; text-align: center; }
    .nfe-inner { max-width: 800px; margin: 0 auto; }
    .not-for-everyone h2 { font-size: clamp(54px, 6vw, 88px); margin: 28px 0 36px; line-height: 0.95; }
    .not-for-everyone p { font-size: 19px; line-height: 1.7; color: #444; margin-bottom: 22px; }
    .not-for-everyone .eyebrow { color: rgba(0,0,0,0.45); }

    /* TESTIMONIALS: full-bleed editorial split — stacked card deck */
    .testimonials {
      position: relative;
      display: grid;
      grid-template-columns: 46% 54%;
      width: 100%;
      height: 560px;
      background: transparent;
      border-top: 1px solid rgba(255,255,255,0.12);
      border-bottom: 1px solid rgba(255,255,255,0.12);
      overflow: hidden;
      outline: none;
    }
    .testimonials .t-portrait {
      position: relative;
      overflow: hidden;
      background: #0c0c0c;
    }
    /* portraits stack in one cell and dissolve independently of the deck */
    .testimonials .t-face {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: grayscale(1) contrast(1.05);
      display: block;
      opacity: 0;
      transform: scale(1.04);
      transform-origin: center;
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* incoming starts 0.15s into the outgoing fade — overlap, never a gap */
    .testimonials .t-face.is-active {
      opacity: 1;
      transform: scale(1);
      transition-delay: 0.15s;
    }
    .testimonials .t-face.is-leaving {
      transition-duration: 0.7s;
      transition-delay: 0s;
    }
    .testimonials .t-content {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 54px;
      background: rgba(5,5,5,0.45);
    }
    .testimonials .t-content .eyebrow { margin-bottom: 36px; }
    /* the deck: cards share one grid cell, tallest card sets the height */
    .testimonials .t-stack {
      position: relative;
      display: grid;
    }
    .testimonials .t-card {
      grid-area: 1 / 1;
      background: #0b0b0b;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 36px 40px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform-origin: center;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .testimonials .t-card.is-pos0 {
      opacity: 1;
      transform: rotate(0deg) translateY(0);
      pointer-events: auto;
      z-index: 3;
    }
    .testimonials .t-card.is-pos1 {
      opacity: 0.5;
      transform: rotate(0.8deg) translateY(6px) scale(0.985);
      z-index: 2;
    }
    .testimonials .t-card.is-pos2 {
      opacity: 0.25;
      transform: rotate(-0.6deg) translateY(12px) scale(0.97);
      z-index: 1;
    }
    .testimonials .t-card.is-out {
      opacity: 0;
      transform: translateY(-40px) rotate(-2deg);
      z-index: 4;
      transition-duration: 0.6s;
    }
    .testimonials .t-quote-wrap { position: relative; }
    .testimonials .t-ghost {
      position: absolute;
      top: -0.12em;
      left: -0.06em;
      font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
      font-weight: 400;
      font-size: 320px;
      line-height: 1;
      color: #f5f2ec;
      opacity: 0.06;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .testimonials .t-quote {
      position: relative;
      z-index: 1;
      font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
      font-weight: 300;
      font-size: 22px;
      line-height: 1.45;
      color: #f5f2ec;
      max-width: 520px;
      margin: 0;
    }
    /* quote line masks — built by JS from measured line boxes, rebuilt
       on resize so the quote still reflows responsively */
    .testimonials .tq-line {
      display: block;
      overflow: hidden;
      /* compensate so descenders never clip, layout unchanged */
      padding-bottom: 0.14em;
      margin-bottom: -0.14em;
    }
    .testimonials .tq-line-inner {
      display: block;
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .testimonials .tq-line-inner.is-hid {
      transform: translateY(105%);
      opacity: 0;
      transition: none;
    }
    .testimonials .t-attr-mask {
      overflow: hidden;
      margin-top: 40px;
      position: relative;
      z-index: 1;
    }
    .testimonials .t-attr {
      position: relative;
      z-index: 1;
      margin-top: 0;
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .testimonials .t-attr.is-hid {
      transform: translateY(105%);
      opacity: 0;
      transition: none;
    }
    .testimonials .t-rule {
      display: block;
      width: 42px;
      height: 1px;
      background: rgba(245,242,236,0.4);
      margin-bottom: 20px;
    }
    .testimonials .t-name {
      display: block;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #f5f2ec;
    }
    .testimonials .t-biz {
      display: block;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #8c887f;
      margin-top: 8px;
    }
    .testimonials .t-controls {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 32px;
    }
    /* progress: hairline track, 2px fill driven by the autoplay rAF */
    .testimonials .t-progress {
      position: relative;
      flex: 1;
      height: 2px;
      cursor: pointer;
      z-index: 4;
    }
    .testimonials .t-progress::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(245,242,236,0.15);
    }
    .testimonials .t-progress-fill {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: #f5f2ec;
      transform: scaleX(0);
      transform-origin: left;
    }
    .testimonials .t-next {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #cfcac0;
      background: none;
      border: 0;
      padding: 4px 0;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .testimonials .t-next:hover,
    .testimonials .t-next:focus-visible { color: #f5f2ec; }

    blockquote {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 48px;
      line-height: 1.15;
      max-width: 850px;
      letter-spacing: -0.04em;
      font-weight: 400;
    }

    /* PRICING */
    .pricing {
      background: #f5f2ec;
      color: #050505;
      display: grid;
      grid-template-columns: 0.9fr repeat(3, 1fr);
      gap: 0;
      align-items: center;
    }

    .pricing .section-title .eyebrow { color: rgba(0,0,0,0.45); }
    .pricing .section-title h2 { font-size: clamp(36px, 4vw, 60px); }

    .price-card {
      border: 1px solid rgba(0,0,0,0.14);
      padding: 44px;
      min-height: 430px;
      background: #f5f2ec;
      display: flex;
      flex-direction: column;
    }

    .price-card.featured {
      background: #050505;
      color: #f5f2ec;
      transform: scale(1.04);
      z-index: 2;
    }

    .price-card h3 {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      margin-bottom: 22px;
    }

    .price {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 48px;
      margin: 30px 0;
      font-weight: 400;
      letter-spacing: -0.03em;
    }

    .price-card > p { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 8px; }
    .price-card.featured > p { color: #b8b3aa; }

    .price-card ul {
      list-style: none;
      display: grid;
      gap: 14px;
      opacity: 0.8;
      line-height: 1.5;
      font-size: 14px;
      margin-bottom: 32px;
      flex: 1;
    }

    .price-card .btn { margin-top: auto; }

    .pricing-deposit {
      grid-column: 1 / -1;
      text-align: center;
      padding: 80px 40px 40px;
      max-width: 700px;
      margin: 0 auto;
    }
    .pricing-deposit h3 { font-size: 48px; margin: 20px 0 16px; }
    .pricing-deposit p { color: #444; line-height: 1.7; margin-bottom: 32px; font-size: 17px; }
    .pricing-deposit .eyebrow { color: rgba(0,0,0,0.45); }

    /* FAQ */
    .faq { background: rgba(5,5,5,0.5); padding: 140px 64px; }
    .faq-header { max-width: 800px; margin: 0 auto 80px; text-align: center; }
    .faq-header h2 { font-size: clamp(54px, 6vw, 88px); margin-top: 24px; line-height: 0.95; }
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px 80px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .faq-item { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 28px; }
    .faq-item h3 { font-size: 24px; margin-bottom: 16px; line-height: 1.2; }
    .faq-item p { font-size: 16px; line-height: 1.7; color: #b8b3aa; }

    /* FINAL CTA */
    .final {
      min-height: 72vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.85)),
        url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1800&q=80");
      background-size: cover;
      background-position: center;
      filter: grayscale(1);
    }

    .final h2 {
      font-size: clamp(54px, 7vw, 110px);
      line-height: 0.95;
      max-width: 900px;
      margin-bottom: 34px;
    }

    /* CONTACT */
    .contact { background: #f5f2ec; color: #050505; padding: 140px 64px; }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      max-width: 1400px;
      margin: 0 auto;
      align-items: start;
    }
    .contact-left h2 { font-size: clamp(48px, 5vw, 72px); margin: 24px 0 28px; line-height: 0.95; }
    .contact-left p { font-size: 18px; line-height: 1.7; color: #444; margin-bottom: 40px; max-width: 480px; }
    .contact-details { display: grid; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,0.18); }
    .contact-details a { color: #050505; text-decoration: none; font-size: 18px; }
    .contact .eyebrow { color: rgba(0,0,0,0.45); }
    .contact-form { display: grid; gap: 20px; }
    .contact-form label {
      display: grid;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: rgba(0,0,0,0.5);
    }
    .contact-form input, .contact-form textarea {
      padding: 16px;
      background: transparent;
      border: 1px solid rgba(0,0,0,0.2);
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: #050505;
    }
    .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #050505; }
    .contact-form button { justify-self: start; margin-top: 12px; }

    /* FOOTER */
    .footer { background: rgba(5,5,5,0.5); padding: 80px 64px 40px; border-top: 1px solid rgba(255,255,255,0.1); }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 60px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .footer-col { display: grid; gap: 12px; align-content: start; }
    .footer-col .logo { font-size: 32px; margin-bottom: 8px; }
    .footer-col h4 { color: #cfcac0; margin-bottom: 4px; }
    .footer-col .eyebrow { color: #cfcac0; margin-bottom: 0; font-size: 10px; }
    .footer-col a, .footer-col span { color: #b8b3aa; text-decoration: none; font-size: 14px; line-height: 1.6; }
    .footer-col a:hover { color: #f5f2ec; }

    /* MOBILE STICKY */
    .mobile-sticky {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #050505;
      border-top: 1px solid rgba(255,255,255,0.18);
    }
    .mobile-sticky-btn {
      flex: 1;
      padding: 20px;
      text-align: center;
      color: #f5f2ec;
      text-decoration: none;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .mobile-sticky-btn.call { border-right: 1px solid rgba(255,255,255,0.18); }
    .mobile-sticky-btn.lock { background: #f5f2ec; color: #050505; }

    /* SOUND TOGGLE (background music opt-in) */
    .sound-toggle {
      position: fixed;
      left: 22px;
      bottom: 22px;
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      background: rgba(8,8,8,0.6);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      color: #f5f2ec;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .25s ease, border-color .25s ease, opacity .25s ease;
    }
    .sound-toggle:hover { background: rgba(22,22,22,0.82); border-color: rgba(255,255,255,0.3); }
    .sound-icon { display: block; color: #f5f2ec; }
    .sound-icon .wave { opacity: 0; transition: opacity .25s ease; }
    .sound-icon .wave-2 { transition-delay: .05s; }
    .sound-icon .mute-slash { opacity: 1; transition: opacity .2s ease; }
    .sound-toggle.playing .sound-icon .mute-slash { opacity: 0; }
    .sound-toggle.playing .sound-icon .wave { opacity: 1; }
    .sound-toggle.playing .sound-icon .wave-1 { animation: wavePulse 1.4s ease-in-out infinite; }
    .sound-toggle.playing .sound-icon .wave-2 { animation: wavePulse 1.4s ease-in-out infinite .25s; }
    @keyframes wavePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .sound-toggle.playing .sound-icon .wave { animation: none; opacity: 1; }
    }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      /* lift above the mobile sticky CTA bar, shrink to icon-only */
      .sound-toggle { left: 16px; bottom: 84px; padding: 11px 13px; gap: 0; }
      .sound-toggle .sound-label { display: none; }
      .nav {
        padding: 18px 22px;
      }
      .nav-links {
        display: none;
      }
      .logo {
        font-size: 22px;
      }
      .btn {
        padding: 14px 20px;
        font-size: 10px;
      }

      /* HERO */
      .hero {
        grid-template-columns: 1fr;
        padding: 110px 22px 60px;
        gap: 40px;
      }
      .hero h1 {
        font-size: 56px;
        line-height: 0.95;
      }
      .hero p {
        font-size: 16px;
        max-width: 100%;
      }
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      .hero-actions .btn {
        justify-content: center;
        width: 100%;
      }
      /* static poster only on mobile — the hero iframe JS never runs on touch */
      .hero-poster { display: block; }
      .hero-caption {
        margin-top: 12px;
      }

      /* STATS */
      .stats {
        grid-template-columns: 1fr 1fr;
        padding: 50px 22px;
        gap: 0;
      }
      .stat {
        padding: 28px 12px;
        border-right: 1px solid rgba(0,0,0,0.12);
        border-bottom: 1px solid rgba(0,0,0,0.12);
      }
      .stat:nth-child(2),
      .stat:nth-child(4) {
        border-right: none;
      }
      .stat:nth-child(3),
      .stat:nth-child(4) {
        border-bottom: none;
      }
      .stat strong {
        font-size: 40px;
        margin-bottom: 8px;
      }
      .stat span {
        font-size: 9px;
        letter-spacing: 0.14em;
      }

      /* SECTIONS */
      .section {
        padding: 70px 22px;
      }

      /* FEATURED WORK */
      .work-cinema { height: 200vh; }
      .wc-media { width: min(94vw, 700px); --s0: 0.6; }
      .wc-eyebrow { top: 92px; }
      .wc-cue { bottom: 84px; }
      .work-stage {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 22px 70px;
      }
      .section-title h2 {
        font-size: 44px;
      }
      /* no iframes on touch: frame column gone, rows become static
         poster cards and tap opens the live site */
      .ws-frame-col { display: none; }
      .ws-device-toggle { display: none; }
      .ws-row > button { display: none; }
      .ws-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 22px 0;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.10);
      }
      .ws-card img {
        width: 100%;
        aspect-ratio: 2.09;
        object-fit: contain;
        object-position: center;
        background: #050505;
        filter: grayscale(1);
      }
      .ws-card .ws-client {
        font-size: 22px;
      }

      /* PROCESS */
      .process {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 70px 22px;
      }
      .step {
        border-right: 1px solid rgba(0,0,0,0.12);
        border-bottom: 1px solid rgba(0,0,0,0.12);
        padding: 28px 18px;
      }
      .step:nth-child(2),
      .step:nth-child(4) {
        border-right: none;
      }
      .step:nth-child(3),
      .step:nth-child(4) {
        border-bottom: none;
      }
      .step strong {
        font-size: 48px;
        margin-bottom: 14px;
      }
      .step h3 {
        font-size: 11px;
      }
      .step p {
        font-size: 14px;
      }

      /* ABOUT GAGE */
      .about-gage {
        padding: 70px 22px;
      }
      .about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .about-image {
        aspect-ratio: 4 / 5;
        height: auto;
      }
      .about-copy h2 {
        font-size: 38px;
      }
      .about-copy p {
        font-size: 15px;
      }
      .signature strong {
        font-size: 22px;
      }

      /* NOT FOR EVERYONE */
      .not-for-everyone {
        padding: 70px 22px;
      }
      .not-for-everyone h2 {
        font-size: 44px;
      }
      .not-for-everyone p {
        font-size: 16px;
      }

      /* TESTIMONIALS */
      .testimonials {
        grid-template-columns: 1fr;
        min-height: 0;
        height: auto;
        max-height: none;
      }
      .testimonials .t-portrait { height: 380px; }
      .testimonials .t-content { padding: 40px 24px 64px; }
      .testimonials .t-ghost { font-size: 220px; top: -0.1em; left: -0.04em; }
      .testimonials .t-quote { font-size: 21px; max-width: none; }
      .testimonials .t-card { padding: 28px 24px; }
      /* half-strength rotations — subtler at small size */
      .testimonials .t-card.is-pos1 { transform: rotate(0.4deg) translateY(6px) scale(0.985); }
      .testimonials .t-card.is-pos2 { transform: rotate(-0.3deg) translateY(12px) scale(0.97); }

      blockquote {
        font-size: 26px;
        line-height: 1.25;
      }

      /* PRICING */
      .pricing {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 70px 22px;
      }
      .price-card {
        padding: 32px;
        min-height: auto;
      }
      .price-card.featured {
        transform: none;
      }
      .price {
        font-size: 40px;
        margin: 22px 0;
      }
      .pricing-deposit {
        padding: 40px 0 0;
      }
      .pricing-deposit h3 {
        font-size: 32px;
      }

      /* FAQ */
      .faq {
        padding: 70px 22px;
      }
      .faq-header h2 {
        font-size: 44px;
      }
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .faq-item h3 {
        font-size: 20px;
      }
      .faq-item p {
        font-size: 15px;
      }

      /* FINAL CTA */
      .final {
        min-height: 60vh;
        padding: 0 22px;
      }
      .final h2 {
        font-size: 42px;
      }

      /* CONTACT */
      .contact {
        padding: 70px 22px;
      }
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .contact-left h2 {
        font-size: 38px;
      }

      /* FOOTER */
      .footer {
        padding: 50px 22px 32px;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
      .footer-col:first-child {
        grid-column: 1 / -1;
      }

      /* MOBILE STICKY BAR */
      .mobile-sticky {
        display: flex;
      }
      body {
        padding-bottom: 64px;
      }
    }

    @media (max-width: 640px) {
      .hero h1 {
        font-size: 44px;
      }
      .section-title h2,
      .faq-header h2,
      .not-for-everyone h2,
      .final h2 {
        font-size: 36px;
      }
      .about-copy h2,
      .contact-left h2 {
        font-size: 32px;
      }
      .stat strong {
        font-size: 32px;
      }
      .step strong {
        font-size: 40px;
      }
      blockquote {
        font-size: 22px;
      }
      .price {
        font-size: 34px;
      }
    }

    /* ===== MOTION LAYER (added) ===== */
    /* Lenis base */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-smooth iframe { pointer-events: none; }

    /* Nav refine on scroll */
    .nav { transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease; }
    .nav.scrolled { background: rgba(0,0,0,0.72); border-bottom-color: rgba(255,255,255,0.16); }

    /* Scroll-reveal: initial (hidden) state, only when .motion is set */
    .motion .hero .eyebrow,
    .motion .hero h1,
    .motion .hero p,
    .motion .hero .hero-actions,
    .motion .hero .hero-frame,
    .motion .section-title .eyebrow,
    .motion .section-title h2,
    .motion .section-title p,
    .motion .faq-header .eyebrow,
    .motion .faq-header h2,
    .motion .stats .stat,
    .motion .work-stage .ws-row,
    .motion .process .step,
    .motion .about-image,
    .motion .about-copy,
    .motion .not-for-everyone .nfe-inner,
    .motion .testimonials,
    .motion .pricing .price-card,
    .motion .faq-grid .faq-item,
    .motion .final > div,
    .motion .contact-left,
    .motion .contact-form {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    /* Revealed state */
    .motion .hero .eyebrow.in,
    .motion .hero h1.in,
    .motion .hero p.in,
    .motion .hero .hero-actions.in,
    .motion .hero .hero-frame.in,
    .motion .section-title .eyebrow.in,
    .motion .section-title h2.in,
    .motion .section-title p.in,
    .motion .faq-header .eyebrow.in,
    .motion .faq-header h2.in,
    .motion .stats .stat.in,
    .motion .work-stage .ws-row.in,
    .motion .process .step.in,
    .motion .about-image.in,
    .motion .about-copy.in,
    .motion .not-for-everyone .nfe-inner.in,
    .motion .testimonials.in,
    .motion .pricing .price-card.in,
    .motion .faq-grid .faq-item.in,
    .motion .final > div.in,
    .motion .contact-left.in,
    .motion .contact-form.in {
      opacity: 1;
      transform: none;
    }

    /* =========================================================
       Produx-style scroll effects (additive — only with .motion)
       ========================================================= */

    /* ---- Parallax: image moves slower than scroll + subtle zoom ----
       JS sets --py (px) on [data-parallax]. The element is over-sized so
       the vertical drift never reveals an edge. */
    .motion [data-parallax] {
      will-change: transform;
    }
    .motion .about-image img[data-parallax] {
      transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
    }

    /* ---- Headline mask reveal: each line clips upward into view ----
       Applied to a wrapper .reveal-mask; the inner text starts pushed
       down behind an overflow:hidden mask and slides up on .in */
    .motion .reveal-mask {
      overflow: hidden;
      display: block;
      /* compensate so the mask never clips descenders and layout is unchanged */
      padding-bottom: 0.16em;
      margin-bottom: -0.16em;
    }
    .motion .reveal-mask > .reveal-inner {
      display: block;
      transform: translateY(110%);
      opacity: 0;
      transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }
    .motion .reveal-mask.in > .reveal-inner {
      transform: translateY(0);
      opacity: 1;
    }

    /* ---- Image clip-wipe reveal ----
       IMPORTANT: the clip-path lives on the <img>, never on the observed
       container. Chromium factors clip-path into IntersectionObserver, so
       clipping the observed element to zero area would stop it ever firing
       (and the reveal would never trigger). The container just hides overflow;
       the inner img wipes up. Parallax keeps full control of `transform`. */
    .motion .about-image {
      overflow: hidden;
    }
    .motion .clip-reveal img {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: clip-path;
    }
    .motion .clip-reveal.in img {
      clip-path: inset(0 0 0% 0);
    }

    /* Accessibility: never hide/animate for reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .motion * { transition: none !important; animation: none !important; }
    .motion .hero .eyebrow,
    .motion .hero h1,
    .motion .hero p,
    .motion .hero .hero-actions,
    .motion .hero .hero-frame,
    .motion .section-title .eyebrow,
    .motion .section-title h2,
    .motion .section-title p,
    .motion .faq-header .eyebrow,
    .motion .faq-header h2,
    .motion .stats .stat,
    .motion .work-stage .ws-row,
    .motion .process .step,
    .motion .about-image,
    .motion .about-copy,
    .motion .not-for-everyone .nfe-inner,
    .motion .testimonials,
    .motion .pricing .price-card,
    .motion .faq-grid .faq-item,
    .motion .final > div,
    .motion .contact-left,
    .motion .contact-form { opacity: 1 !important; transform: none !important; }
    /* work stage: no accent-bar/fade/hint animation, no autoplay sweeps,
       instant device toggle */
    .ws-row > button, .ws-row::before, .ws-client, .ws-iframe,
    .ws-hint, .ws-loading-bar, .ws-live-dot, .ws-device-btn, .ws-phone {
      transition: none !important;
      animation: none !important;
    }
    /* hero frame: no fade — the iframe appears instantly and stays static */
    .hero-iframe { transition: none !important; }
    /* testimonial deck: plain opacity cross-fade — no lift, rotation,
       portrait scale or line stagger; autoplay still runs */
    .testimonials .t-card {
      transition: opacity 0.5s ease !important;
      transform: none !important;
      opacity: 0 !important;
    }
    .testimonials .t-card.is-pos0 { opacity: 1 !important; }
    .testimonials .t-face {
      transition: opacity 0.5s ease !important;
      transform: none !important;
    }
    .testimonials .tq-line-inner, .testimonials .t-attr {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
    }
  

/* ---- popup lead ---- */

    .plead-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5,5,5,0.92);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .plead-overlay.plead-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .plead-panel {
      background: #f5f2ec;
      color: #050505;
      width: 480px;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 56px 48px;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .plead-overlay.plead-open .plead-panel {
      opacity: 1;
      transform: translateY(0);
    }
    .plead-eyebrow {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.32em;
      color: rgba(5,5,5,0.55);
      margin-bottom: 18px;
    }
    .plead-heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 300;
      letter-spacing: -0.025em;
      font-size: clamp(34px, 6vw, 46px);
      line-height: 1;
      margin-bottom: 28px;
    }
    .plead-form { display: grid; gap: 18px; }
    .plead-optional { opacity: 0.55; }
    .plead-label {
      display: grid;
      gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: rgba(5,5,5,0.5);
    }
    .plead-form input,
    .plead-form select,
    .plead-form textarea {
      padding: 15px 16px;
      background: transparent;
      border: 1px solid rgba(5,5,5,0.25);
      border-radius: 0;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: #050505;
      -webkit-appearance: none;
      appearance: none;
    }
    .plead-form textarea {
      resize: vertical;
      min-height: 92px;
      line-height: 1.5;
    }
    .plead-form select {
      padding-right: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23050505' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      cursor: pointer;
    }
    .plead-form input:focus,
    .plead-form select:focus,
    .plead-form textarea:focus {
      outline: none;
      border-color: #050505;
    }
    .plead-submit {
      justify-self: start;
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 28px;
      background: #050505;
      color: #f5f2ec;
      border: 1px solid #050505;
      border-radius: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.3s ease;
    }
    .plead-submit:hover { transform: translateY(-3px); opacity: 0.9; }
    .plead-skip {
      justify-self: start;
      margin-top: 2px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(5,5,5,0.45);
      text-decoration: none;
      cursor: pointer;
    }
    .plead-skip:hover { color: #050505; }
    /* visually hidden honeypot */
    .plead-hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    @media (max-width: 640px) {
      .plead-overlay { padding: 16px; }
      .plead-panel {
        width: 90vw;
        max-width: 90vw;
        max-height: 90vh;
        padding: 36px 24px;
      }
      .plead-heading { font-size: clamp(28px, 8vw, 36px); margin-bottom: 22px; }
      .plead-eyebrow { letter-spacing: 0.28em; margin-bottom: 14px; }
      .plead-form { gap: 15px; }
      .plead-form input, .plead-form select, .plead-form textarea { padding: 13px 14px; }
      .plead-submit { padding: 16px 24px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .plead-overlay, .plead-panel { transition: none; }
    }
  

/* =========================================================
   2026 REPOSITIONING: new components
   Same tokens as above: #050505 ink, #f5f2ec cream, #cfcac0 / #b8b3aa
   muted text, Fraunces display, JetBrains Mono labels, Inter body.
   ========================================================= */

/* ---- Accessibility ---- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  padding: 12px 18px; background: #f5f2ec; color: #050505;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%); transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #f5f2ec; outline-offset: 3px;
}
.contact a:focus-visible, .contact button:focus-visible, .pricing a:focus-visible,
.plead-panel a:focus-visible, .plead-panel button:focus-visible, .care a:focus-visible { outline-color: #050505; }
main { display: block; }

/* ---- Nav: CTA cluster, current page, burger, mobile menu ---- */
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-links a { position: relative; opacity: 0.82; transition: opacity 0.3s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: #f5f2ec;
}
.nav-burger {
  display: none; width: 44px; height: 44px; padding: 0; position: relative;
  background: transparent; border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
}
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 1px; background: #f5f2ec;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-burger span:first-child { top: 17px; }
.nav-burger span:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(5,5,5,0.97); backdrop-filter: blur(18px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu-inner { padding: 104px 22px 48px; display: grid; gap: 40px; min-height: 100%; align-content: start; }
.mobile-menu-links { list-style: none; display: grid; }
.mobile-menu-links a {
  display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.03em;
  font-size: 34px; line-height: 1.1; color: #f5f2ec; text-decoration: none;
  transform: translateY(14px); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.is-open .mobile-menu-links a { transform: none; opacity: 1; }
.mobile-menu-ctas { display: grid; gap: 12px; }
.mobile-menu-ctas .btn { justify-content: center; }
.mobile-menu-contact { display: grid; gap: 10px; }
.mobile-menu-contact a { color: #b8b3aa; text-decoration: none; font-size: 15px; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---- Hero ---- */
.hero h1.hero-title { font-size: clamp(52px, 6.4vw, 104px); line-height: 0.92; max-width: 820px; }
.hero-sub-link {
  display: inline-block; margin-top: 26px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #cfcac0; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.hero-sub-link:hover { color: #f5f2ec; border-color: #f5f2ec; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.02);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 6s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-url, .hero-caption { transition: opacity 0.5s ease; }

/* ---- Work stage: real screenshots instead of iframes ---- */
.ws-shot {
  position: absolute; inset: 0; overflow: hidden;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ws-shot.is-swapping { opacity: 0; }
.ws-shot-img {
  display: block; width: 100%; height: auto;
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* hover scrolls the full-page capture top to bottom (JS sets --scroll-to & --scroll-ms) */
.ws-viewport.is-scrolling .ws-shot-img {
  transform: translateY(var(--scroll-to, 0px));
  transition: transform var(--scroll-ms, 8000ms) cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.ws-shot[data-mode="mobile"] {
  left: 50%; right: auto; width: 29%; transform: translateX(-50%);
  top: 4%; bottom: 4%;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.ws-viewport { background: #0a0a0a; cursor: ns-resize; }
.ws-hint { background: linear-gradient(to top, rgba(5,5,5,0.55), transparent 40%); align-items: flex-end; padding-bottom: 18px; opacity: 1; }
.ws-viewport:hover .ws-hint { opacity: 0; }
.work-more { display: flex; justify-content: center; padding: 0 64px 140px; }

/* ---- Services overview ---- */
.section.services { padding: 140px 64px; position: relative; z-index: 3; }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
  max-width: 1400px; margin: 0 auto;
}
.svc-card { background: #050505; padding: 48px 40px; display: flex; flex-direction: column; gap: 18px; transition: background 0.4s ease; }
.svc-card:hover { background: #0c0c0c; }
.svc-card h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.03em; font-size: 28px; line-height: 1.1; }
.svc-card p { font-size: 15.5px; line-height: 1.65; color: #b8b4ab; flex: 1; }
.svc-price { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.svc-price .serif { font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
.svc-price small, .care-price small {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #cfcac0;
}
.svc-link, .faq-item a, .ads-fit-list a {
  color: #f5f2ec; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 3px;
  transition: border-color 0.3s ease;
}
.svc-link { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.svc-link:hover, .faq-item a:hover, .ads-fit-list a:hover { border-color: #f5f2ec; }

/* ---- Pricing additions ---- */
.pricing-intro { font-size: 13px; line-height: 1.6; color: rgba(0,0,0,0.55) !important; max-width: 300px; margin-top: 20px; }
.price-from { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; margin-right: 6px; opacity: 0.6; }
.price-card > p.price-note { font-size: 12.5px; line-height: 1.55; color: #555; margin: -12px 0 22px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.12); }
.pricing-deposit-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn.ghost-dark { color: #050505; border-color: rgba(0,0,0,0.25); }
.btn.ghost-dark:hover { border-color: #050505; }

/* ---- Advertising teaser (home) ---- */
.section.ads-teaser { padding: 150px 64px; position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,0.08); }
.ads-teaser-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: center; }
.ads-teaser h2 { font-size: clamp(40px, 4.6vw, 68px); line-height: 0.98; margin-bottom: 26px; }
.ads-teaser-copy > p { font-size: 18px; line-height: 1.7; color: #d4d0c8; max-width: 540px; margin-bottom: 40px; }
.ads-teaser-list { list-style: none; border-top: 1px solid rgba(255,255,255,0.12); }
.ads-teaser-list li {
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: 'Fraunces', Georgia, serif; font-size: 22px; letter-spacing: -0.02em;
}

/* ---- Website care (home) ---- */
.section.care { background: #f5f2ec; color: #050505; padding: 140px 64px; }
.care-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.care .eyebrow { color: rgba(0,0,0,0.45); }
.care h2 { font-size: clamp(44px, 5vw, 72px); line-height: 0.95; margin-bottom: 24px; }
.care-head p { font-size: 18px; line-height: 1.7; color: #444; max-width: 460px; }
.care-card { border: 1px solid rgba(0,0,0,0.14); padding: 44px; display: grid; gap: 26px; }
.care-price { display: grid; gap: 6px; }
.care-price .serif { font-size: 52px; letter-spacing: -0.03em; line-height: 1; }
.care-price small { color: rgba(0,0,0,0.5); }
.care-card ul { list-style: none; display: grid; gap: 12px; font-size: 15px; line-height: 1.5; color: #333; }
.care-card ul li::before { content: "—"; margin-right: 10px; color: rgba(0,0,0,0.35); }
.care-card .btn { margin-top: 0; justify-self: start; }
.care-foot { max-width: 1200px; margin: 64px auto 0; padding: 4px 0 4px 28px; border-left: 2px solid rgba(0,0,0,0.25); font-size: 16px; line-height: 1.7; color: #444; }
.care-foot strong { color: #050505; font-weight: 600; }

/* ---- Contact: two enquiry paths ---- */
.contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 20px; }
.contact-form fieldset[hidden] { display: none; }
.contact-form .enq-switch { grid-template-columns: 1fr 1fr; gap: 0; }
.enq-switch legend {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: rgba(0,0,0,0.5); margin-bottom: 10px;
}
.contact-form .enq-switch label { display: block; position: relative; cursor: pointer; }
.enq-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.enq-switch span {
  display: block; padding: 16px; text-align: center; border: 1px solid rgba(0,0,0,0.2);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #050505;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.enq-switch label + label span { border-left: 0; }
.enq-switch input:checked + span { background: #050505; color: #f5f2ec; border-color: #050505; }
.enq-switch input:focus-visible + span { outline: 2px solid #050505; outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form .opt { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
.contact-form select {
  padding: 16px; padding-right: 40px; background: transparent; border: 1px solid rgba(0,0,0,0.2); border-radius: 0;
  font-family: 'Inter', sans-serif; font-size: 16px; color: #050505; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23050505' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.contact-form input, .contact-form textarea { border-radius: 0; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(0,0,0,0.35); }
.contact-form select:focus { outline: none; border-color: #050505; }
.form-note { font-size: 13px; line-height: 1.6; color: #555; padding-left: 14px; border-left: 2px solid rgba(0,0,0,0.2); }
.form-note[hidden] { display: none; }

/* ---- Pop-up close button ---- */
.plead-panel { position: relative; }
.plead-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: rgba(5,5,5,0.55);
}
.plead-close:hover { color: #050505; }

/* ---- Inner page hero (work / advertising) ---- */
.page-hero { padding: 200px 64px 110px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 3; }
.page-hero h1 { font-size: clamp(54px, 7vw, 116px); line-height: 0.92; max-width: 1100px; margin-bottom: 36px; }
.page-hero > p { font-size: 20px; line-height: 1.7; color: #d4d0c8; max-width: 640px; margin-bottom: 40px; }
.ads-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 64px; border-top: 1px solid rgba(255,255,255,0.12); }
.ads-facts > div { padding: 26px 56px 0 0; margin-right: 56px; border-right: 1px solid rgba(255,255,255,0.12); }
.ads-facts > div:last-child { border-right: 0; margin-right: 0; }
.ads-facts dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #8c887f; margin-bottom: 10px; }
.ads-facts dd { font-size: 34px; letter-spacing: -0.03em; }
.ads-facts dd small { font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0; color: #b8b3aa; margin-left: 4px; }

/* ---- /work: filters + grid ---- */
.work-browse { padding: 0 64px 140px; max-width: 1500px; margin: 0 auto; position: relative; z-index: 3; }
.wf-bar {
  position: sticky; top: 92px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0; margin-bottom: 56px;
  background: linear-gradient(rgba(5,5,5,0.92), rgba(5,5,5,0.78)); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wf-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #cfcac0; background: transparent; border: 1px solid rgba(255,255,255,0.16);
  padding: 11px 16px; cursor: pointer; border-radius: 999px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.wf-btn span { opacity: 0.5; margin-left: 4px; }
.wf-btn:hover { border-color: rgba(255,255,255,0.4); color: #f5f2ec; }
.wf-btn.is-active { background: #f5f2ec; color: #050505; border-color: #f5f2ec; }
.wk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px 64px; }
.wk-card { display: grid; gap: 34px; align-content: start; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wk-card.is-hidden { display: none; }
.wk-card.is-entering { opacity: 0; transform: translateY(24px); }
.wk-media { position: relative; padding-right: 13%; padding-bottom: 7%; }
.wk-browser { border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; overflow: hidden; background: #0a0a0a; box-shadow: 0 40px 100px rgba(0,0,0,0.55); }
.wk-chrome { position: relative; display: flex; align-items: center; height: 32px; padding: 0 12px; background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.1); }
.wk-url { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #cfcac0; white-space: nowrap; }
.wk-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; }
.wk-desktop { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
/* hover: glide down the full desktop capture, stopping one 16:10 screen (62.5cqw) from the end */
@media (hover: hover) {
  .wk-media:hover .wk-desktop { transform: translateY(calc(-100% + 62.5cqw)); transition: transform 9s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
  .wk-media:hover .wk-phone { transform: translateY(-10px); }
}
.wk-phone {
  position: absolute; right: 0; bottom: 0; width: 24%;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 18px; overflow: hidden;
  background: #050505; box-shadow: 0 30px 70px rgba(0,0,0,0.7);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.wk-phone img { display: block; width: 100%; height: auto; }
.wk-body { display: grid; gap: 14px; max-width: 600px; }
.wk-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8c887f; }
.wk-name { font-size: clamp(32px, 3vw, 44px); line-height: 1.02; }
.wk-cat { font-size: 15px; color: #cfcac0; }
.wk-desc { font-size: 16px; line-height: 1.7; color: #b8b3aa; }
.wk-style, .wk-services { font-size: 14px; color: #b8b3aa; }
.wk-style span, .wk-services span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6862; margin-right: 12px; }
.wk-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tags li { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #cfcac0; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; }
.wk-body .case-cta { justify-self: start; margin-top: 8px; }

/* ---- /advertising sections ---- */
.section.ads-fit { background: #f5f2ec; color: #050505; padding: 140px 64px; }
.ads-fit-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; }
.ads-fit .eyebrow { color: rgba(0,0,0,0.45); }
.ads-fit h2 { font-size: clamp(44px, 5vw, 72px); line-height: 0.95; }
.ads-fit-list { list-style: none; border-top: 1px solid rgba(0,0,0,0.14); }
.ads-fit-list li { padding: 26px 0; border-bottom: 1px solid rgba(0,0,0,0.14); font-size: 17px; line-height: 1.65; color: #444; }
.ads-fit-list strong { display: block; color: #050505; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 23px; letter-spacing: -0.02em; margin-bottom: 6px; }
.ads-fit-list a { color: #050505; border-bottom-color: rgba(0,0,0,0.3); }
.section.ads-included { padding: 140px 64px; position: relative; z-index: 3; }
.inc-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); max-width: 1400px; margin: 0 auto; }
.inc-grid li { background: #050505; padding: 40px 32px; display: grid; gap: 14px; align-content: start; }
.inc-grid h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; font-size: 22px; line-height: 1.15; }
.inc-grid p { font-size: 14.5px; line-height: 1.65; color: #b8b4ab; }
.section.ads-fee { padding: 40px 64px 150px; position: relative; z-index: 3; }
.ads-fee-inner { max-width: 1200px; margin: 0 auto; }
.ads-fee-head { text-align: center; margin-bottom: 64px; }
.ads-fee-head h2 { font-size: clamp(40px, 5vw, 72px); line-height: 0.95; }
.fee-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.fee-col { background: #050505; padding: 52px 48px; display: grid; gap: 20px; align-content: start; }
.fee-col:first-child { background: #f5f2ec; color: #050505; }
.fee-col:first-child .stack-num { color: rgba(0,0,0,0.5); }
.fee-col:first-child p { color: #444; }
.fee-amount { font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -0.03em; line-height: 1; }
.fee-amount small { font-family: 'Inter', sans-serif; font-size: 16px; letter-spacing: 0; opacity: 0.6; margin-left: 4px; }
.fee-col p { font-size: 16px; line-height: 1.7; color: #b8b4ab; }
.fee-note { margin-top: 48px; padding: 4px 0 4px 28px; border-left: 2px solid rgba(245,242,236,0.35); font-size: 16px; line-height: 1.7; color: #d4d0c8; max-width: 760px; }
.fee-note strong { color: #f5f2ec; font-weight: 500; }

/* ---- Generic reveal for new blocks (JS adds .rv; only with .motion) ---- */
.motion .rv { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.motion .rv.in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .nav-links { gap: 26px; }
  .svc-grid { grid-template-columns: 1fr; }
  .inc-grid { grid-template-columns: 1fr 1fr; }
  .wk-grid { gap: 90px 40px; }
}
@media (max-width: 900px) {
  .nav-burger { display: block; }
  .nav-quote { display: none; }
  .hero h1.hero-title { font-size: clamp(40px, 11vw, 56px); }
  .hero-sub-link { margin-top: 20px; }
  .work-more { padding: 0 22px 80px; }
  .section.services, .section.ads-teaser, .section.care, .section.ads-fit, .section.ads-included { padding: 80px 22px; }
  .svc-card { padding: 36px 26px; }
  .ads-teaser-inner, .care-inner, .ads-fit-inner { grid-template-columns: 1fr; gap: 44px; }
  .ads-teaser-list li { font-size: 19px; }
  .care-card { padding: 30px 24px; }
  .care-foot { margin-top: 44px; font-size: 15px; }
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: 130px 22px 70px; }
  .page-hero > p { font-size: 17px; }
  .ads-facts { grid-template-columns: 1fr; margin-top: 44px; }
  .ads-facts > div { padding: 18px 0; margin-right: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .ads-facts dd { font-size: 28px; }
  .work-browse { padding: 0 22px 80px; }
  .wf-bar { top: 72px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -22px 40px; padding: 12px 22px; }
  .wf-bar::-webkit-scrollbar { display: none; }
  .wf-btn { flex: none; }
  .wk-grid { grid-template-columns: 1fr; gap: 72px; }
  .wk-card { gap: 26px; }
  .inc-grid { grid-template-columns: 1fr; }
  .inc-grid li { padding: 30px 24px; }
  .section.ads-fee { padding: 20px 22px 80px; }
  .fee-split { grid-template-columns: 1fr; }
  .fee-col { padding: 36px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .ws-shot, .ws-shot-img, .wk-desktop, .wk-phone, .wk-card, .mobile-menu, .mobile-menu-links a { transition: none !important; }
  .wk-media:hover .wk-desktop { transform: none !important; }
}

/* buttons never break mid-label; groups wrap instead */
.btn { white-space: nowrap; }
.hero-actions { flex-wrap: wrap; }
@media (max-width: 1200px) and (min-width: 901px) {
  .hero h1.hero-title { font-size: clamp(48px, 5.4vw, 72px); }
}

/* mobile work cards: real 16:10 captures, in colour (variety is the point) */
@media (max-width: 900px) {
  .ws-card img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; filter: none; border: 1px solid rgba(255,255,255,0.10); }
}
img { max-width: 100%; }
.mobile-menu { z-index: 120; }
html.menu-open .nav { z-index: 130; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
html.menu-open .mobile-sticky, html.menu-open .sound-toggle { display: none; }
/* reduced motion on phones: the 200vh scroll-scrub height above would leave a blank gap */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .work-cinema { height: auto; }
}


/* =========================================================
   PORTFOLIO v2: image sharpness + e-commerce
   ========================================================= */

/* ---- Sharpness: no layer is left promoted/scaled at rest ----
   A will-change:transform layer is rasterised once and then scaled, so a
   preview that animates from scale(.3) would sit slightly soft at full size.
   Promote only while moving; at rest the browser re-rasterises crisply. */
.wc-media { will-change: auto; }
.work-cinema.is-moving .wc-media { will-change: transform; }
.wc-media img { filter: none; }                 /* show client sites in their real colours */
.ws-shot-img { will-change: auto; }
.ws-viewport.is-scrolling .ws-shot-img { will-change: transform; }
.ws-shot[data-mode="mobile"] { transform: none; left: 35.5%; }   /* no half-pixel translate */
.hero-slide { transform: none; transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-slide.is-active { transform: none; }
.hero-viewport img, .ws-shot-img, .wk-desktop, .wk-phone img, .ecom-media img, .ws-card img { image-rendering: auto; backface-visibility: hidden; }

/* ---- /work: flagship card (full width) ---- */
.wk-card--flagship { grid-column: 1 / -1; grid-template-columns: 1.45fr 1fr; align-items: center; gap: 64px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.wk-badge {
  justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #050505; background: #f5f2ec; padding: 7px 12px; border-radius: 999px;
}
.wk-card--flagship .wk-name { font-size: clamp(40px, 4vw, 60px); }

/* ---- Homepage e-commerce feature ---- */
.section.ecom { padding: 140px 64px; position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,0.08); }
.ecom-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.ecom-media { position: relative; padding-right: 12%; padding-bottom: 8%; }
.ecom-browser { position: relative; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55); background: #0a0a0a; }
.ecom-desktop { display: block; width: 100%; height: auto; }
.ecom-phone {
  position: absolute; right: 0; bottom: 0; width: 26%; height: auto;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}
.ecom-copy h2 { font-size: clamp(38px, 4vw, 60px); line-height: 1; margin-bottom: 26px; }
.ecom-copy > p { font-size: 17px; line-height: 1.7; color: #d4d0c8; max-width: 560px; margin-bottom: 26px; }
.ecom-list { list-style: none; border-top: 1px solid rgba(255,255,255,0.12); margin-bottom: 26px; }
.ecom-list li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-family: 'Fraunces', Georgia, serif; font-size: 20px; letter-spacing: -0.02em; }
.ecom-copy > p.ecom-note { font-size: 14px; color: #b8b3aa; padding-left: 16px; border-left: 2px solid rgba(245,242,236,0.3); margin-bottom: 34px; }

/* ---- Pricing: e-commerce is quoted separately ---- */
.pricing-ecom {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 32px;
  margin-top: 56px; padding: 30px 36px; border: 1px solid rgba(0,0,0,0.14);
}
.pricing-ecom .eyebrow { color: rgba(0,0,0,0.45); margin-bottom: 10px; }
.pricing-ecom p { font-size: 15px; line-height: 1.6; color: #444; max-width: 720px; }

/* ---- Contact: e-commerce sub-fields ---- */
.contact-form .enq-ecom { padding: 20px; border: 1px dashed rgba(0,0,0,0.2); }

@media (max-width: 900px) {
  .wk-card--flagship { grid-template-columns: 1fr; gap: 26px; }
  .section.ecom { padding: 80px 22px; }
  .ecom-inner { grid-template-columns: 1fr; gap: 44px; }
  .ecom-list li { font-size: 18px; }
  .pricing-ecom { flex-direction: column; align-items: flex-start; padding: 24px; margin-top: 32px; }
}

/* The hero frame slides in but never fades: an element painted at opacity 0
   isn't eligible as Largest Contentful Paint, so a later rotating slide would be
   reported as LCP at ~5s. Staying opaque lets the first slide count at first paint. */
.motion .hero .hero-frame { opacity: 1; }


/* =========================================================
   TRADES & CONSTRUCTION SHOWCASE (homepage)
   Cream "light" composition (the Ovali section is dark): pinned copy
   panel left, real desktop + phone pairs scrolling past on the right.
   ========================================================= */
.section.trades { background: #f5f2ec; color: #050505; padding: 150px 64px; position: relative; z-index: 3; }
.trades-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 80px; align-items: start; }
.trades-panel { align-self: stretch; }
.trades-panel-sticky { position: sticky; top: 130px; }
.trades .eyebrow { color: rgba(0,0,0,0.5); max-width: 380px; line-height: 1.7; }
.trades h2 { font-size: clamp(46px, 5.2vw, 82px); line-height: 0.94; margin-bottom: 28px; }
.trades-panel-sticky > p { font-size: 19px; line-height: 1.65; color: #444; max-width: 430px; margin-bottom: 40px; }
.tr-index { list-style: none; border-top: 1px solid rgba(0,0,0,0.14); margin-bottom: 40px; max-width: 460px; }
.tr-index a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 0;
  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.14); text-decoration: none; color: rgba(5,5,5,0.38);
  font-family: 'Fraunces', Georgia, serif; font-size: 23px; letter-spacing: -0.02em;
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tr-index a .ws-num { color: inherit; font-size: 10px; }
.tr-index a small { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.tr-index a:hover, .tr-index a.is-active { color: #050505; }
.trades .hero-actions { gap: 12px; }
.trades .btn.dark { margin-top: 0; }

.trades-stack { display: grid; gap: 130px; padding-top: 10px; }
.tr-item { display: grid; gap: 30px; }
.tr-devices { position: relative; padding-right: 15%; padding-bottom: 9%; }
.tr-item--flip .tr-devices { padding-right: 0; padding-left: 15%; }
.tr-browser { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; background: #0a0a0a; box-shadow: 0 50px 90px -30px rgba(5,5,5,0.45), 0 2px 8px rgba(5,5,5,0.08); }
.tr-browser .wk-chrome { background: #111; }
.tr-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tr-desktop { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.tr-item.is-gliding .tr-desktop { transform: translateY(var(--tr-to, 0px)); transition: transform var(--tr-ms, 9000ms) cubic-bezier(0.45, 0.05, 0.55, 0.95); will-change: transform; }
.tr-phone {
  position: absolute; right: 0; bottom: 0; width: 23%;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 20px; overflow: hidden; background: #050505;
  box-shadow: 0 40px 70px -20px rgba(5,5,5,0.55);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.tr-item--flip .tr-phone { right: auto; left: 0; }
.tr-phone img { display: block; width: 100%; height: auto; }
/* device transition: the phone rises into place as its project scrolls in */
.motion .tr-item .tr-phone { transform: translateY(70px) rotate(2.5deg); opacity: 0; }
.motion .tr-item--flip .tr-phone { transform: translateY(70px) rotate(-2.5deg); }
.motion .tr-item.in .tr-phone { transform: none; opacity: 1; transition-delay: 0.15s; }
.tr-caption { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; column-gap: 0; row-gap: 4px; }
.tr-caption .ws-num { color: rgba(0,0,0,0.45); grid-row: 1; }
.tr-caption h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; font-weight: 500; grid-column: 2; }
.tr-caption p { grid-column: 2; font-size: 14px; color: #555; }
.tr-links { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 22px; align-self: center; }
.tr-links a {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #050505; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.25); padding-bottom: 4px; white-space: nowrap;
}
.tr-links a:hover { border-color: #050505; }
.trades a:focus-visible { outline-color: #050505; }

@media (max-width: 1100px) {
  .trades-inner { grid-template-columns: 1fr; gap: 64px; }
  .trades-panel-sticky { position: static; }
  .tr-index { display: none; }
}
@media (max-width: 900px) {
  .section.trades { padding: 80px 22px; }
  .trades-stack { gap: 72px; }
  .trades h2 { font-size: clamp(40px, 11vw, 56px); }
  .trades-panel-sticky > p { font-size: 17px; margin-bottom: 30px; }
  .tr-caption { grid-template-columns: 34px 1fr; }
  .tr-links { grid-column: 2; grid-row: auto; margin-top: 12px; }
  .tr-phone { width: 30%; border-radius: 14px; }
  .tr-devices { padding-right: 18%; padding-bottom: 12%; }
  .tr-item--flip .tr-devices { padding-left: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-desktop, .tr-phone, .tr-index a { transition: none !important; }
  .motion .tr-item .tr-phone { transform: none; opacity: 1; }
}
/* pinned panel must fit a 900px-tall laptop screen */
.trades h2 { font-size: clamp(42px, 3.9vw, 62px); margin-bottom: 22px; }
.trades-panel-sticky { top: 120px; }
.trades-panel-sticky > p { font-size: 18px; margin-bottom: 30px; }
.tr-index { margin-bottom: 30px; }
.tr-index a { padding: 12px 0; font-size: 20px; }
@media (max-width: 900px) { .trades h2 { font-size: clamp(40px, 11vw, 56px); } }

/* three-way enquiry switch + hero secondary links */
.contact-form .enq-switch { grid-template-columns: repeat(3, 1fr); }
.enq-switch span { padding: 15px 8px; }
@media (max-width: 480px) { .enq-switch span { font-size: 9.5px; letter-spacing: 0.08em; padding: 14px 4px; } }
.hero-sub-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* Trades showcase on phones: a concise 2x2 of real mobile previews
   (desktop frames and the glide are a desktop-sized idea) */
@media (max-width: 900px) {
  .trades-stack { grid-template-columns: 1fr 1fr; gap: 34px 16px; padding-top: 0; }
  .tr-item { gap: 14px; }
  .tr-devices, .tr-item--flip .tr-devices { padding: 0; }
  .tr-browser { display: none; }
  .tr-phone, .tr-item--flip .tr-phone { position: relative; inset: auto; width: 100%; border-radius: 18px; }
  .motion .tr-item .tr-phone, .motion .tr-item--flip .tr-phone { transform: translateY(30px); }
  .motion .tr-item.in .tr-phone { transform: none; }
  .tr-item:nth-child(even) { margin-top: 44px; }
  .tr-caption { display: block; }
  .tr-caption .ws-num { display: block; margin-bottom: 4px; }
  .tr-caption h3 { font-size: 19px; line-height: 1.15; }
  .tr-caption p { font-size: 12px; line-height: 1.45; margin-top: 4px; }
  .tr-links { margin-top: 10px; }
  .tr-links a[target="_blank"] { display: none; }
  .tr-links a { font-size: 9.5px; letter-spacing: 0.1em; }
}