: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;}

  /* 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;} }

  header{
    position:sticky; top:0; z-index:60; background:var(--bg);
    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);}

  .page-head{position:relative; 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;}

  /* Ghost numeral — the same motif as the Capabilities cards, carried onto every
     inner page so the numbering reads as a system, not a one-off. */
  .page-head h1 .accent{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:500;}

  /* ---- Page-head running video band + scroll parallax (added 2026-09-11) ---- */
  .page-head{overflow:hidden;}
  .page-head-video{position:absolute; inset:0; width:100%; height:130%; object-fit:cover; opacity:0.3; filter:saturate(1.05); z-index:0; will-change:transform; pointer-events:none;}
  .page-head::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 65%, var(--bg) 100%); z-index:1; pointer-events:none;}
  .page-head .section-label, .page-head h1, .page-head p{position:relative; z-index:2;}
  @media (prefers-reduced-motion: reduce){ .page-head-video{display:none;} .page-head::after{background:var(--bg);} }

  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;}

  #about{border-top:none; padding-top:0;}
  .about-story{max-width:680px; font-size:17px; line-height:1.8; color:var(--fg);}
  .about-story p{margin-bottom:22px;}
  .about-story p:last-child{margin-bottom:0;}

  /* ---------- Approach: what an AI video creation agency believes (added for content depth) ---------- */
  #approach{border-top:1px solid var(--line); position:relative; overflow:hidden;}
  @keyframes slowZoom{ from{transform:scale(1);} to{transform:scale(1.08);} }
  #approach::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('../images/sourced/abstract-03.jpg') center/cover;
    opacity:0.16; animation:slowZoom 22s ease-in-out infinite alternate;
  }
  #approach::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, var(--bg) 100%);}
  #approach > *{position:relative; z-index:1;}
  @media (prefers-reduced-motion: reduce){ #approach::before{animation:none;} }
  .approach-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .approach-card{background:var(--bg); padding:36px 28px; transition:background 0.25s ease, transform 0.3s ease;}
  .approach-card:hover{background:#0a0505; transform:translateY(-4px);}
  .approach-num{font-size:12px; color:var(--accent); font-weight:600; letter-spacing:0.08em; margin-bottom:16px;}
  .approach-card h4{font-size:16px; font-weight:600; margin-bottom:10px; line-height:1.3;}
  .approach-card p{font-size:13.5px; color:var(--muted); line-height:1.65;}
  @media (max-width:900px){ .approach-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .approach-grid{grid-template-columns:1fr;} }
  .approach-grid .approach-card:nth-child(1){transition-delay:0s;}
  .approach-grid .approach-card:nth-child(2){transition-delay:0.1s;}
  .approach-grid .approach-card:nth-child(3){transition-delay:0.2s;}
  .approach-grid .approach-card:nth-child(4){transition-delay:0.3s;}

  /* ---------- Story video band: scroll-triggered iris reveal + parallax, the
     "animation while you scroll" moment for this page (added 2026-09-11) ---------- */
  #story-video{padding:0; max-width:none;}
  .story-video-wrap{position:relative; height:66vh; min-height:400px; overflow:hidden;}
  .story-video-mask{position:absolute; inset:0; clip-path:circle(0% at 50% 50%); transition:clip-path 1.5s cubic-bezier(.16,1,.3,1); will-change:clip-path;}
  .story-video-mask.in{clip-path:circle(75% at 50% 50%);}
  .story-video-mask video{width:100%; height:135%; object-fit:cover; filter:saturate(1.1) brightness(0.55); will-change:transform;}
  .story-video-wrap::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.78) 92%); pointer-events:none;}
  .story-quote{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:40px;}
  .story-quote p{max-width:820px; text-align:center; font-size:clamp(22px,3.6vw,40px); font-weight:500; line-height:1.35; letter-spacing:-0.01em;}
  .story-quote .accent{font-family:Georgia,'Times New Roman',serif; font-style:italic;}
  @media (prefers-reduced-motion: reduce){ .story-video-mask{transition:none; clip-path:circle(75% at 50% 50%);} }

  /* ---------- What he brings: expanded founder highlights ---------- */
  .founder-points{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
  .founder-points li{list-style:none; font-size:13px; color:var(--fg); opacity:0.8; padding-left:16px; position:relative; line-height:1.6;}
  .founder-points li::before{content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent);}

  .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);}

  /* Real team photo, shown above the member cards to establish trust
     before the individual bios — a face-first section, not just text. */
  .team-photo-banner{margin-top:48px; border-radius:14px; overflow:hidden; border:2px solid rgba(212,175,55,0.75); box-shadow:0 0 0 1px rgba(212,175,55,0.15), 0 12px 30px rgba(0,0,0,0.4); position:relative;}
  .team-photo-banner img{width:100%; display:block; object-fit:cover; max-height:440px;}
  .team-photo-banner::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(5,2,2,0.65) 100%);}
  .team-photo-cap{position:absolute; left:24px; bottom:18px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
  @media (max-width:700px){ .team-photo-banner img{max-height:260px;} }

  .founders{margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px;}
  .founder-card{display:flex; gap:20px;}
  .founder-photo{width:110px; height:110px; flex-shrink:0; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#3a1210,#0d0605); border:2px solid rgba(212,175,55,0.75); box-shadow:0 0 0 1px rgba(212,175,55,0.15), 0 8px 20px rgba(0,0,0,0.4);}
  .founder-photo img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  .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);}

  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);}
  .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;}


  /* ---------- 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;}
    .contact-grid{grid-template-columns:1fr;}
    nav{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{transition:none; opacity:1; transform:none;}
  }