:root{
    --bg:#000000;
    --fg:#f5f5f3;
    --muted:#8a8a86;
    --accent:#D4AF37;
    --line:rgba(245,245,243,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:
    radial-gradient(ellipse 900px 520px at 12% -8%, rgba(212,175,55,0.13), transparent 58%),
    radial-gradient(ellipse 760px 560px at 105% 15%, rgba(212,175,55,0.08), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 115%, rgba(212,175,55,0.06), transparent 60%),
    linear-gradient(180deg, #0b0605 0%, #000000 45%);
    background-attachment:fixed;
    color:var(--fg); font-family:'Helvetica Neue',Arial,sans-serif; overflow-x:hidden;}
  ::selection{background:var(--accent); color:#fff;}

  /* Real, accessible H1 for SEO/crawlers — kept off-screen since the hero's
     wordmark + showreel label already carry the visual heading role. */
  .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

  /* Signature texture: a fine film grain across the whole site. Keeps the black
     from reading as flat generic web-black and gives it a filmic surface — a
     VFX-native treatment the reference site doesn't use. */
  .grain{
    position:fixed; inset:-50%; z-index:200; pointer-events:none; opacity:0.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift 0.7s steps(3) infinite;
  }
  @keyframes grainShift{
    0%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);}
    50%{transform:translate(1%,-2%);} 75%{transform:translate(-1%,2%);}
    100%{transform:translate(0,0);}
  }
  @media (prefers-reduced-motion: reduce){ .grain{animation:none; opacity:0.03;} }

  /* ---------- Custom gold "crystal" cursor: a small rotating diamond glued to
     the pointer plus a soft lagging halo ring, replacing the default arrow on
     fine-pointer (mouse/trackpad) devices only. Touch devices keep the native
     cursor entirely — there's no pointer to replace and no way to preview
     hover states, so the halo/dot would just sit inert at the last tap.
     (added 2026-09-13) ---------- */
  @media (hover:hover) and (pointer:fine){
    html{cursor:none;}
    a, button, input, textarea, select, label, .nav-toggle, [onclick]{cursor:none;}
  }
  .cursor-dot, .cursor-halo{
    position:fixed; top:0; left:0; z-index:999; pointer-events:none;
    will-change:transform;
  }
  .cursor-dot{
    width:24px; height:41px; display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 0 5px rgba(212,175,55,0.85)) drop-shadow(0 0 11px rgba(212,175,55,0.45));
  }
  /* Ring sits ~26.5% down the box now that a bee head+antennae sit above it
     (matches the SVG's keychain-ring position), so rotation/scale below swings
     the TV charm around the ring, not the box center, and the JS positions the
     ring itself at the pointer. */
  .cursor-dot svg{width:100%; height:100%; display:block; transform-origin:50% 26.5%; transition:transform 0.3s cubic-bezier(.2,.8,.3,1.4);}
  /* Bee wings flanking the TV charm's ring — small flutter loop so the
     keychain reads as "flying", tying into the site's new bee motif. */
  .cursor-wing{transform-box:fill-box; transform-origin:center;}
  .cursor-wing-l{animation:wingFlapL 0.45s ease-in-out infinite;}
  .cursor-wing-r{animation:wingFlapR 0.45s ease-in-out infinite;}
  @keyframes wingFlapL{0%,100%{transform:rotate(-18deg) scaleY(1);}50%{transform:rotate(-18deg) scaleY(0.4);}}
  @keyframes wingFlapR{0%,100%{transform:rotate(18deg) scaleY(1);}50%{transform:rotate(18deg) scaleY(0.4);}}
  @media (prefers-reduced-motion: reduce){ .cursor-wing-l, .cursor-wing-r{animation:none;} }
  /* Soft trailing glow instead of a geometric ring outline — reads as ambient
     light bleeding from the TV screen rather than a target/reticle shape. */
  .cursor-halo{
    width:24px; height:24px; border-radius:50%; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(212,175,55,0.4), transparent 72%);
    filter:blur(3px);
    transition:width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
  }
  .cursor-dot.is-hover svg{transform:rotate(16deg) scale(1.12);}
  .cursor-halo.is-hover{width:38px; height:38px;}
  .cursor-dot.is-down svg{transform:rotate(-10deg) scale(0.85);}
  .cursor-halo.is-down{width:14px; height:14px;}
  @media (max-width:900px), (hover:none), (pointer:coarse){
    .cursor-dot, .cursor-halo{display:none;}
  }
  @media (prefers-reduced-motion: reduce){ .cursor-dot, .cursor-halo{transition:none;} .cursor-dot svg{transition:none;} }

  /* ---------- Nav: on Home specifically, floats as a transparent/frosted-glass
     bar directly over the full-bleed video (no reserved bar space above it) —
     the video now runs edge-to-edge including behind the header, and the
     header blends with it rather than sitting as a separate solid block on
     top. This is Home-only; every other page has no video hero, so their
     header stays the plain solid bar (unchanged, matches the reference site
     structurally there). ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    background:linear-gradient(180deg, rgba(5,2,2,0.5) 0%, rgba(5,2,2,0.22) 65%, rgba(5,2,2,0) 100%);
    backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1);
    display:flex; justify-content:space-between; align-items:center;
    padding:38px 40px;
  }
  /* Signature touch (not on the reference site): a thin accent line under the
     header that fills in as you scroll the page — small, functional, ours. */
  .scroll-progress{position:absolute; left:0; bottom:0; height:2px; width:0%; background:var(--accent); transition:width 0.08s linear;}
  .logo-mark{display:flex; align-items:center; gap:10px; text-decoration:none; transition:opacity 0.25s ease;}
  .logo-mark:hover{opacity:0.75;}
  .logo-mark .lm-icon{width:34px; height:34px; border-radius:50%; overflow:hidden; object-fit:cover; display:block;}
  .logo-mark .lm-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; font-family:'Helvetica Neue',Arial,sans-serif; text-transform:uppercase; color:var(--accent);}
  .logo-mark .lm-main{font-size:15px; font-weight:800; letter-spacing:0.06em;}
  .logo-mark .lm-sub{font-size:8px; font-weight:600; letter-spacing:0.26em; margin-top:2px; opacity:0.85;}
  @media (max-width:500px){ .logo-mark .lm-icon{width:28px; height:28px;} .logo-mark .lm-main{font-size:12px;} .logo-mark .lm-sub{font-size:7px;} }
  .nav-group{display:flex; align-items:center;}
  nav{display:flex; align-items:center; gap:32px; font-size:12px; font-weight:400; letter-spacing:normal; text-transform:uppercase; margin-right:24px;}
  .nav-cta{
    position:relative; overflow:hidden;
    font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    background:linear-gradient(135deg, #F0CE6E 0%, #D4AF37 45%, #9C7A1F 100%); color:#1a1204; padding:9px 18px; border-radius:100px; text-decoration:none;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .nav-cta::before{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg); transition:left 0.6s ease; pointer-events:none;
  }
  .nav-cta:hover::before{left:130%;}
  .nav-cta:hover{background:#E8C458; transform:translateY(-1px);}

  /* ---------- Mobile nav: hamburger + full-screen overlay panel, replaces the
     old "nav just disappears under 900px" behavior (added 2026-09-11) ---------- */
  .nav-toggle{
    display:none; background:none; border:none; color:var(--fg); cursor:pointer;
    width:44px; height:44px; align-items:center; justify-content:center; margin:-11px;
  }
  @media (max-width:900px){
    .nav-group nav, .nav-group .nav-cta{display:none;}
    .nav-toggle{display:flex;}
  }
  .mobile-nav{
    position:fixed; inset:0; z-index:90; background:rgba(5,2,2,0.98);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    opacity:0; pointer-events:none; transition:opacity 0.3s ease;
  }
  .mobile-nav.open{opacity:1; pointer-events:auto;}
  .mobile-nav a{color:var(--fg); text-decoration:none; font-size:24px; font-weight:500; letter-spacing:0.02em; text-transform:uppercase; opacity:0.8; transition:opacity 0.2s ease, color 0.2s ease;}
  .mobile-nav a:hover, .mobile-nav a.active{opacity:1; color:var(--accent);}
  .mobile-nav .nav-cta{margin-top:16px; font-size:13px; padding:14px 34px;}
  .mobile-nav-close{position:absolute; top:34px; right:34px; background:none; border:none; color:var(--fg); cursor:pointer; padding:6px;}
  @media (prefers-reduced-motion: reduce){ .mobile-nav{transition:none;} }
  nav a{color:var(--fg); text-decoration:none; opacity:0.7; transition:opacity 0.2s ease, color 0.2s ease; position:relative;}
  nav a::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease;}
  nav a:hover{opacity:1; color:var(--accent);}
  nav a:hover::after{transform:scaleX(1);}
  nav a.active{opacity:1; color:var(--accent);}
  nav a.active::after{transform:scaleX(1);}

  /* ---------- Hero: full-bleed looping video that PINS and RUNS IN THE
     BACKGROUND through the hero AND the "By the numbers" section, dimming
     gradually, and only fades to solid black right at the end as Capabilities
     begins. Structure: `.hero-blend` is a plain wrapper (its height is just
     whatever its children need — no manual padding hack). `.hero` is the
     sticky video layer; because `#growth` is its normal-flow sibling AFTER it
     in the same wrapper, `.hero` stays pinned behind `#growth`'s entire
     height, not just a fixed handoff distance. `.hero-fg` holds the opening
     text and is a normal scrolling layer (not sticky) so it lifts away at
     ordinary scroll speed while the video keeps running underneath it —
     that's the "video runs in the background as you scroll" feel. ---------- */
  .hero-blend{position:relative;}
  .hero{position:sticky; top:0; z-index:1; height:100vh; width:100%; max-width:none; margin:0; padding:0; overflow:hidden;}
  .hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; z-index:0;}
  .hero video.loaded{opacity:1;}
  .hero-fallback{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(60,60,60,0.35), transparent 60%),
      radial-gradient(ellipse at 75% 80%, rgba(40,40,40,0.4), transparent 55%),
      #050505;
  }
  /* Color grade: the sourced stock clip reads pink/magenta, off-brand next to
     the gold identity used everywhere else (logo, buttons, cursor, stats).
     Same gold color-blend technique already used on .section-photo, applied
     here to pull the footage toward amber/gold without re-sourcing it. Black
     areas stay black since mix-blend-mode:color preserves base luminosity. */
  .hero::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(212,175,55,0.25); mix-blend-mode:color;}
  .hero video{filter:sepia(0.45) saturate(1.5) brightness(0.82) contrast(1.18);}
  .hero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(circle at 50% 46%, transparent 26%, rgba(0,0,0,0.55) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%);}

  /* Signature touch: a slow diagonal scan-line sweep across the hero — a
     render/scan motif tied to the VFX pitch, not present on the reference site. */
  .hero-scan{position:absolute; top:-15%; bottom:-15%; left:-10%; width:2px; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent);
    opacity:0; transform:rotate(10deg); animation:heroScanSweep 9s ease-in-out infinite;}
  @keyframes heroScanSweep{
    0%{left:-10%; opacity:0;}
    6%{opacity:0.55;}
    46%{opacity:0.55;}
    52%{left:110%; opacity:0;}
    100%{left:110%; opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){ .hero-scan{display:none;} }

  /* Interactive bee swarm — flies loosely around the cursor over the hero
     video, gold-graded to match the cursor's own bee charm. Absolute inside
     the sticky .hero so it stays pinned with the video; positioned per-frame
     in JS (heroBees), not CSS, so it can lag/orbit the pointer. */
  .hero-bees{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
  .hbee{position:absolute; top:0; left:0; width:44px; height:33px; will-change:transform;
    filter:drop-shadow(0 2px 5px rgba(15,8,0,0.6)) drop-shadow(0 0 2px rgba(0,0,0,0.45));}
  .hbee svg{width:100%; height:100%; display:block;}
  .hbee-2{width:38px; height:28px; opacity:0.85;}
  .hbee-3{width:30px; height:22px; opacity:0.7;}
  .hbee-wing{transform-box:fill-box; transform-origin:center;}
  .hbee-wing-l{animation:hbeeWingL 0.4s ease-in-out infinite;}
  .hbee-wing-r{animation:hbeeWingR 0.4s ease-in-out infinite;}
  @keyframes hbeeWingL{0%,100%{transform:rotate(-16deg) scaleY(1);}50%{transform:rotate(-16deg) scaleY(0.4);}}
  @keyframes hbeeWingR{0%,100%{transform:rotate(16deg) scaleY(1);}50%{transform:rotate(16deg) scaleY(0.4);}}
  @media (max-width:900px), (hover:none), (pointer:coarse){ .hero-bees{display:none;} }
  @media (prefers-reduced-motion: reduce){ .hero-bees{display:none;} }

  /* Scroll-driven scrim: opacity is set in JS (updateHeroBlend) — a quick
     dim-in, a long "cruise" level while growth's content is read against the
     still-running video, then a fast ramp to fully opaque right at the end
     of #growth so the handoff into Capabilities is a clean cut to black. */
  /* Short transition smooths the per-scroll-frame steps into a continuous
     blend instead of the opacity visibly jumping between rAF updates —
     short enough not to add lag when the buffer-zone fade is scrubbing
     with the scroll further down. */
  .hero-fade-overlay{position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--bg); opacity:0; transition:opacity 0.25s ease-out;}

  /* Opening text — normal (non-sticky) layer, so it scrolls away at ordinary
     speed while the pinned video keeps playing behind it. */
  .hero-fg{position:absolute; inset:0; top:0; height:100vh; z-index:3; pointer-events:none;}
  .hero-label{position:absolute; left:40px; bottom:40px; pointer-events:auto;}
  .hero-label .showreel{font-size:22px; font-weight:600; letter-spacing:0.02em; margin-bottom:10px;}
  .hero-tags{display:flex; gap:14px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);}
  .hero-tags span:not(.sep){cursor:default;}
  .hero-tags .sep{opacity:0.5; color:var(--accent);}

  /* Signature touch: an italic serif wordmark — one deliberate typographic
     break from the all-Helvetica match, borrowed from the Superside-style
     italic-accent idea explored earlier in this project. */
  .hero-wordmark{
    position:absolute; right:40px; bottom:40px; pointer-events:auto;
    font-family:'Helvetica Neue',Arial,sans-serif; font-weight:600;
    font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent);
  }
  @media (max-width:700px){ .hero-wordmark{font-size:11px; letter-spacing:0.15em; right:20px; bottom:24px;} }

  .scroll-hint{position:absolute; left:50%; bottom:40px; transform:translateX(-50%); z-index:1; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl;}
  @media (max-width:800px){ .scroll-hint{display:none;} }

  /* Dedicated scroll distance, after #growth's own content, reserved purely
     for the fade — this is what lets the video stay at full brightness for
     the section's ENTIRE natural height (not just "most of it") and still
     have a smooth, unhurried fade afterward rather than a rushed one crammed
     into the section's tail end. Invisible, just adds scroll room. */
  .hero-fade-buffer{height:15vh; display:flex; align-items:center; justify-content:center; position:relative; z-index:2;}
  @media (max-width:900px){ .hero-fade-buffer{height:15vh;} }
  .growth-tagline-lower{
    width:100%; padding:0 40px; text-align:center;
    font-size:clamp(20px,3vw,32px); font-weight:500; line-height:1.35;
    letter-spacing:-0.01em; color:var(--fg);
  }
  .growth-tagline-lower .accent{font-family:Georgia,'Times New Roman',serif; font-style:italic; color:var(--fg);}

  /* Reduced motion: drop the pin-and-run-on entirely, back to a plain static hero. */
  @media (prefers-reduced-motion: reduce){
    .hero{position:relative; top:auto;}
    .hero-fg{position:relative; height:auto;}
    .hero-fade-overlay{display:none;}
    .hero-fade-buffer{height:auto; padding:32px 0;}
  }

  /* ---------- Page head: used on every inner page instead of the video hero ---------- */
  .page-head{padding:100px 40px 60px; max-width:1200px; margin:0 auto; border-bottom:1px solid var(--line);}
  .page-head .section-label{margin-bottom:24px;}
  .page-head h1{font-size:clamp(32px,4.4vw,56px); font-weight:500; letter-spacing:-0.02em; max-width:16ch; line-height:1.15;}
  .page-head p{margin-top:20px; max-width:56ch; color:var(--muted); font-size:16px; line-height:1.7;}

  /* ---------- Shared section rhythm — minimal copy throughout ---------- */
  section{padding:120px 40px; max-width:1200px; margin:0 auto;}
  .section-label{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:20px;}
  /* ---------- Section-opening photo thumbnail, duotone-matched to the site's
     black/red palette (added 2026-09-11) ---------- */
  .section-label{display:flex; align-items:center;}
  .section-photo{
    width:44px; height:44px; border-radius:8px; overflow:hidden; margin-right:14px;
    position:relative; border:1px solid rgba(212,175,55,0.35); flex-shrink:0;
  }
  .section-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(0.6);}
  .section-photo::after{content:''; position:absolute; inset:0; background:rgba(212,175,55,0.32); mix-blend-mode:color; pointer-events:none;}


  /* Signature typographic device: every eyebrow label opens with a short accent
     rule, so section openings are recognisably ours across all 9 pages. */
  .section-label::before{content:''; display:inline-block; width:18px; height:1px; background:var(--accent); vertical-align:middle; margin-right:10px;}
  .section-title{font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-0.01em; max-width:20ch; line-height:1.3;}
  .section-title .accent{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:500;}

  /* ---------- About: founding story + stat row + founders block ---------- */
  #about{border-top:1px solid var(--line);}
  .about-story{max-width:640px; font-size:17px; line-height:1.7; color:var(--fg);}

  .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stat{background:var(--bg); padding:36px 20px; text-align:center;}
  .stat .num{font-size:clamp(30px,3.4vw,42px); font-weight:600; color:var(--fg);}
  .stat .num .suffix{color:var(--accent);}
  .stat .cap{margin-top:8px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}

  .founders{margin-top:80px; display:flex; gap:40px; flex-wrap:wrap;}
  .founder-card{flex:1; min-width:260px; display:flex; gap:20px;}
  .founder-photo{width:88px; height:88px; border-radius:8px; background:linear-gradient(135deg,#3a1210,#0d0605); border:1px solid rgba(212,175,55,0.35); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:var(--accent);}
  .founder-info .fname{font-size:16px; font-weight:600;}
  .founder-info .frole{font-size:12px; color:var(--muted); margin-top:2px; margin-bottom:10px;}
  .founder-info .fline{font-size:14px; line-height:1.6; color:var(--fg); opacity:0.85;}
  .founder-bio{max-height:0; overflow:hidden; transition:max-height 0.4s ease; font-size:13px; line-height:1.7; color:var(--muted); margin-top:0;}
  .founder-bio.open{max-height:200px; margin-top:10px;}
  .read-more{margin-top:10px; background:none; border:none; padding:0; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); text-decoration:underline; cursor:pointer; font-family:inherit; transition:color 0.2s ease;}
  .read-more:hover{color:var(--fg);}

  /* ---------- Services grid ---------- */
  #services{border-top:1px solid var(--line);}
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .service-card{background:var(--bg); padding:36px 30px; min-height:180px; display:flex; flex-direction:column; gap:12px;}
  .service-card:hover{background:#0a0505;}
  .service-icon{width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#8A6A1A); display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; font-weight:700;}
  .service-card h4{font-size:16px; font-weight:600;}
  .service-card p{font-size:13px; color:var(--muted); line-height:1.6;}
  @media (max-width:900px){ .services-grid{grid-template-columns:1fr;} }

  /* ---------- Process: numbered steps ---------- */
  #process{border-top:1px solid var(--line);}
  .process-list{margin-top:20px; border-top:1px solid var(--line);}
  .process-step{display:grid; grid-template-columns:60px 1fr; gap:24px; padding:32px 0; border-bottom:1px solid var(--line);}
  .process-step .pnum{font-size:13px; color:var(--accent); font-weight:600;}
  .process-step h4{font-size:18px; font-weight:600; margin-bottom:8px;}
  .process-step p{font-size:14px; color:var(--muted); line-height:1.7; max-width:60ch;}

  /* ---------- Work: showcase grid, same placeholder-swap pattern ---------- */
  #work{border-top:1px solid var(--line);}
  .work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:20px;}
  @media (max-width:1100px){ .work-grid{grid-template-columns:repeat(2,1fr);} }
  .work-tile{position:relative; aspect-ratio:16/10; overflow:hidden; background:#050505; border:1px solid transparent; transition:border-color 0.3s ease;}
  .work-tile:hover{border-color:var(--accent);}
  .work-tile video{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease;}
  .work-tile video.loaded{opacity:0.85;}
  .work-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.75) 100%); pointer-events:none;}
  .work-tile-label{position:absolute; left:16px; bottom:14px; z-index:2; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px;}
  .work-tile-label::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;}

  /* ---------- Paths: minimal, no persuasive paragraphs ---------- */
  #paths{border-top:1px solid var(--line);}
  .path-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; margin-top:20px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .path-cell{background:var(--bg); padding:52px 40px; border-left:2px solid transparent; transition:border-color 0.25s ease, background 0.25s ease;}
  .path-cell:hover{border-left-color:var(--accent); background:#0a0505;}
  .path-cell .ptag{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
  .path-cell h3{font-size:clamp(22px,2.2vw,28px); font-weight:500; line-height:1.3;}
  .path-cell a{display:inline-block; margin-top:18px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color 0.2s ease, border-color 0.2s ease;}
  .path-cell a:hover{color:var(--fg); border-color:var(--fg);}

  /* ---------- Compare: traditional production vs. AI generation table + quick facts ---------- */
  #compare{border-top:1px solid var(--line);}
  .compare-table{width:100%; margin-top:32px; border-collapse:collapse; font-size:14px;}
  .compare-table th, .compare-table td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line);}
  .compare-table th{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-weight:600;}
  .compare-table td:first-child{color:var(--fg); font-weight:500;}
  .compare-table td:not(:first-child){color:var(--muted);}
  .compare-table tbody tr:hover{background:rgba(212,175,55,0.04);}
  .compare-table td:last-child{color:#F0DDA3;}
  @media (max-width:700px){ .compare-table{font-size:12.5px;} .compare-table th, .compare-table td{padding:12px 10px;} }

  .fact-dl{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 40px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line);}
  .fact-dl > div{display:flex; flex-direction:column; gap:6px;}
  .fact-dl dt{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-weight:600;}
  .fact-dl dd{font-size:14px; color:var(--fg); line-height:1.6; margin:0;}
  @media (max-width:700px){ .fact-dl{grid-template-columns:1fr;} }

  /* ---------- FAQ: native details/summary, mirrors FAQPage schema in <head> ---------- */
  #faq{border-top:1px solid var(--line);}
  .faq-intro{margin-top:20px; max-width:64ch; color:var(--muted); font-size:15px; line-height:1.7;}
  .byline{margin-top:14px; font-size:12px; color:var(--muted); opacity:0.7;}
  .faq-list{display:flex; flex-direction:column; margin-top:28px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item:first-child{border-top:1px solid var(--line);}
  .faq-item summary{list-style:none; cursor:pointer; padding:24px 2px; font-size:16px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:18px; transition:color 0.2s ease;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-tag{display:inline-block; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(212,175,55,0.4); border-radius:100px; padding:3px 9px; margin-right:14px; flex-shrink:0; vertical-align:middle;}
  .faq-q{flex:1;}
  .faq-item summary::after{content:'+'; font-size:20px; font-weight:300; color:var(--accent); flex-shrink:0; transition:transform 0.25s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item summary:hover{color:var(--accent);}
  .faq-item p{padding:0 2px 26px; max-width:72ch; font-size:14.5px; line-height:1.75; color:var(--muted);}
  @media (max-width:700px){ .faq-item summary{font-size:15px; gap:12px;} .faq-tag{display:none;} }

  /* ---------- Insights: minimal teaser row ---------- */
  #insights{border-top:1px solid var(--line);}
  .insight-list{display:flex; flex-direction:column; margin-top:20px;}
  .insight-row{display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); font-size:15px; transition:padding-left 0.25s ease; text-decoration:none; color:var(--fg); cursor:pointer;}
  .insight-row:hover{padding-left:12px;}
  .insight-row:hover span:first-child{color:var(--accent);}
  .insight-row span.tag{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}

  /* ---------- Contact ---------- */
  #contact-page{border-top:1px solid var(--line);}
  .quote-form{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; max-width:820px;}
  .quote-form label{display:flex; flex-direction:column; gap:8px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
  .quote-form input, .quote-form select, .quote-form textarea{
    background:#0a0505; border:1px solid var(--line); color:var(--fg); padding:12px 14px; border-radius:4px;
    font-family:inherit; font-size:14px; text-transform:none; letter-spacing:normal;
  }
  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{outline:none; border-color:var(--accent);}
  .quote-form .full{grid-column:1/-1;}
  .quote-form button{
    grid-column:1/-1; justify-self:start; margin-top:8px; background:var(--accent); color:#fff; border:none;
    padding:14px 32px; border-radius:100px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    cursor:pointer; transition:background 0.2s ease;
  }
  .quote-form button:hover{background:#E8C458;}

  /* ---------- Footer: "Meet us / Reach us" pattern ---------- */
  footer{border-top:1px solid var(--line); padding:80px 40px 40px;}
  .contact-grid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .contact-block .clabel{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
  .contact-block .cval{font-size:18px; font-weight:500;}
  .contact-block .cval a{color:var(--fg); text-decoration:none; transition:color 0.2s ease;}
  .contact-block .cval a:hover{color:var(--accent);}
  .contact-block .csub{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.6;}
  .footer-bottom{max-width:1200px; margin:60px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:11px; color:var(--muted); flex-wrap:wrap; gap:12px;}
  .footer-bottom a{color:var(--muted); text-decoration:none;}
  .footer-bottom a:hover{color:var(--accent);}

  /* The tagline, reinforced sitewide right before the closing wordmark. */
  

  /* Closing identity moment: the wordmark set large in italic serif, echoing the
     hero mark on Home. The reference site ends on a plain link row. */
  .footer-mark{max-width:1200px; margin:0 auto; padding-top:20px; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:clamp(38px,7vw,86px); line-height:1; color:var(--fg); opacity:0.09; letter-spacing:-0.01em; user-select:none;}

  /* ---------- Growth dashboard: the 400K+ Purani Kathaye follower stat, styled as a compact live-metrics panel ---------- */
  /* No top border here on purpose — the hero video keeps running behind this
     whole section (see .hero-blend above), so a seam line would cut across a
     continuous piece of footage instead of marking a real boundary. `position:
     relative` + a z-index above `.hero`'s pinned layer (1) is what makes this
     section's content paint OVER the video rather than getting hidden behind
     it while both are on screen at once. */
  #growth{border-top:none; position:relative; z-index:2;}

  /* ---------- Dashboard redesign 2026-09-11: individual glowing "crystal"
     cards instead of a flat box divided by hairlines. Gold-gradient text on
     every number (same 3-stop gradient as the primary CTA buttons), rounded
     borders, hover lift+glow. Cards stay translucent so the running hero
     video still shows through, including in the gaps between them now. ---------- */
  .dash-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:20px;}
  .dash-hero-card{
    background:rgba(5,2,2,0.6); border:1px solid var(--line); border-radius:18px;
    padding:44px 40px; position:relative; overflow:hidden; transition:border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .dash-hero-card:hover{border-color:rgba(212,175,55,0.45); box-shadow:0 0 0 1px rgba(212,175,55,0.15), 0 20px 50px rgba(0,0,0,0.4);}
  .dash-num{
    font-size:clamp(48px,6vw,72px); font-weight:700; line-height:1; color:#F0DDA3;
    text-shadow:0 0 28px rgba(212,175,55,0.55);
  }
  .dash-num .suffix{color:var(--accent);}
  .dash-cap{margin-top:10px; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg);}
  .dash-sub{margin-top:4px; font-size:13px; color:var(--muted);}
  .dash-spark{width:100%; height:80px; margin-top:28px; display:block;}
  .dash-spark path{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .dash-spark path.fill{stroke:none; fill:url(#sparkFill);}
  .dash-spark circle{fill:var(--accent);}

  .dash-mini-grid{display:grid; grid-template-rows:repeat(3,1fr); gap:16px;}
  .dash-mini{
    background:rgba(5,2,2,0.6); border:1px solid var(--line); border-radius:14px;
    padding:22px 26px; display:flex; flex-direction:column; justify-content:center; gap:6px;
    position:relative; overflow:hidden;
    transition:border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .dash-mini::before{content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:linear-gradient(180deg, #F5DE9A, #9C7A1F); opacity:0; transition:opacity 0.3s ease;}
  .dash-mini:hover{border-color:rgba(212,175,55,0.45); transform:translateX(4px); box-shadow:0 12px 30px rgba(0,0,0,0.4);}
  .dash-mini:hover::before{opacity:1;}
  .dash-mini .dnum{
    font-size:28px; font-weight:700; line-height:1; color:#F0DDA3;
    text-shadow:0 0 16px rgba(212,175,55,0.5);
  }
  .dash-mini .dnum .suffix{color:var(--accent);}
  .dash-mini .dcap{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
  @media (prefers-reduced-motion: reduce){ .dash-hero-card, .dash-mini{transition:none;} }
  @media (max-width:900px){ .dash-grid{grid-template-columns:1fr;} .dash-mini-grid{grid-template-rows:none; grid-template-columns:1fr;} }

  /* ---------- Latest Work teaser (Home only — full detail lives on services.html) ----------
     Deliberately NOT the same flat video-tile grid as redchilliesvfx.com's
     showcase — staggered asymmetric layout, ghost numerals, iris-reveal video mask on
     hover, and a cursor-driven tilt. Same design system, distinct signature moment. */
  #latest-work{border-top:1px solid var(--line);}
  .cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; perspective:1200px;}
  .cap-card{
    position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:#070302;
    border:1px solid var(--line); cursor:pointer; transform-style:preserve-3d;
    transition:transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.35s ease;
  }
  .cap-card:nth-child(2){ margin-top:52px; }
  .cap-card:nth-child(3){ margin-top:14px; }
  @media (max-width:900px){ .cap-card:nth-child(2), .cap-card:nth-child(3){ margin-top:0; } }
  .cap-card:hover{border-color:rgba(212,175,55,0.5);}
  .cap-num{display:none;}
  .cap-video-mask{
    position:absolute; inset:0; z-index:1;
    clip-path:circle(14% at 82% 84%);
    transition:clip-path 0.7s cubic-bezier(.16,1,.3,1);
  }
  .cap-card:hover .cap-video-mask{ clip-path:circle(75% at 50% 50%); }
  .cap-video-mask video{width:100%; height:100%; object-fit:cover; opacity:0; filter:saturate(1.15) contrast(1.05); transition:opacity 0.8s ease;}
  .cap-video-mask video.loaded{opacity:1;}
  .cap-still{
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(circle at 82% 84%, rgba(212,175,55,0.18), transparent 45%),
      linear-gradient(150deg, #0d0605, #050202);
  }
  .cap-card::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);}
  .cap-body{position:absolute; left:20px; right:20px; bottom:18px; z-index:3;}
  .cap-tag{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; opacity:0; transform:translateY(6px); transition:opacity 0.3s ease, transform 0.3s ease;}
  .cap-card:hover .cap-tag{opacity:1; transform:translateY(0);}
  .cap-title{font-size:16px; font-weight:600; letter-spacing:-0.01em; transform:translateY(0); transition:transform 0.35s cubic-bezier(.16,1,.3,1);}
  .cap-card:hover .cap-title{transform:translateY(-2px);}
  .cap-rule{margin-top:12px; height:1px; width:100%; background:var(--line); position:relative; overflow:hidden;}
  .cap-rule::after{content:''; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 0.5s cubic-bezier(.16,1,.3,1);}
  .cap-card:hover .cap-rule::after{transform:scaleX(1);}

  /* Touch devices have no :hover, so the reveal has to default to visible
     instead of waiting for a hover that will never come (fixed 2026-09-11 —
     these cards were rendering as near-black boxes on phones). */
  @media (max-width:900px){
    .cap-video-mask{clip-path:circle(75% at 50% 50%);}
    .cap-tag{opacity:1; transform:translateY(0);}
    .cap-rule::after{transform:scaleX(1);}
  }

  .view-all{display:inline-block; margin-top:36px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color 0.2s ease, border-color 0.2s ease;}
  .view-all:hover{color:var(--fg); border-color:var(--fg);}


  /* ---------- CTA banner: promotes Contact Us / Get a Quote before every
     footer, same pattern used on the growwvast site (added 2026-09-11) ---------- */
  #cta-banner-section{padding-top:0; padding-bottom:0;}
  .cta-banner{
    position:relative; overflow:hidden; border-radius:16px; padding:64px 48px; text-align:center;
    background:linear-gradient(135deg, #1a0705 0%, #0a0302 100%); border:1px solid rgba(212,175,55,0.3);
    margin:100px auto 0; max-width:1200px;
  }
  .cta-banner::before{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 25% 15%, rgba(212,175,55,0.28), transparent 60%);}
  .cta-banner > *{position:relative; z-index:1;}
  .cta-eyebrow{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:18px;}
  .cta-eyebrow::before{content:''; display:inline-block; width:18px; height:1px; background:var(--accent); vertical-align:middle; margin-right:10px;}
  .cta-banner h2{font-size:clamp(24px,3.4vw,38px); font-weight:500; max-width:22ch; margin:0 auto 16px; letter-spacing:-0.01em; line-height:1.3;}
  .cta-banner p{max-width:480px; margin:0 auto 32px; color:var(--muted); font-size:15px; line-height:1.7;}
  .cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .cta-btn-primary{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #F0CE6E 0%, #D4AF37 45%, #9C7A1F 100%); color:#1a1204; padding:14px 32px; border-radius:100px;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    text-decoration:none; transition:background 0.2s ease, transform 0.2s ease;
  }
  .cta-btn-primary::before{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg); transition:left 0.6s ease; pointer-events:none;
  }
  .cta-btn-primary:hover::before{left:130%;}
  .cta-btn-primary:hover{background:#E8C458; transform:translateY(-2px);}
  .cta-btn-ghost{
    border:1px solid var(--line); color:var(--fg); padding:13px 32px; border-radius:100px;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    text-decoration:none; transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .cta-btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
  @media (max-width:640px){ .cta-banner{padding:44px 24px; margin-top:60px;} }

  .reveal{opacity:0; transform:translateY(28px) scale(0.985); filter:blur(3px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1), filter 0.8s ease;}
  .reveal.in{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}

  @media (max-width:900px){
    .stat-row{grid-template-columns:1fr 1fr;}
    .work-grid{grid-template-columns:1fr;}
    .cap-grid{grid-template-columns:1fr; gap:20px;}
    .path-row{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .quote-form{grid-template-columns:1fr;}
    nav{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{transition:none; opacity:1; transform:none;}
  }