: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. */
  .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:18ch; 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 carried onto every inner page. */
  .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:100px 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;}

  .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; margin-bottom:40px;}

  .cover-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .cover-card{background:var(--bg); padding:32px 28px; border-left:2px solid transparent; transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
  .cover-card:hover{background:#0a0505; border-left-color:var(--accent); transform:translateX(4px);}
  .cover-card h4{font-size:16px; font-weight:600; margin-bottom:8px; transition:transform 0.3s ease;}
  .cover-card:hover h4{transform:translateX(2px);}
  .cover-card p{font-size:13px; color:var(--muted); line-height:1.6;}
  @media (max-width:900px){ .cover-grid{grid-template-columns:1fr;} }

  .nda-note{margin-top:60px; padding:28px 32px; border:1px solid var(--line); border-left:2px solid var(--accent); font-size:14px; color:var(--muted); line-height:1.7; max-width:70ch;}
  .nda-note b{color:var(--fg);}

  /* ---- Process steps (numbered, matches process.html's system) ---- */
  .steps{margin-top:0; display:flex; flex-direction:column;}
  .step{display:flex; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); transition:padding-left 0.3s ease;}
  .step:hover{padding-left:12px;}
  .step:first-child{border-top:1px solid var(--line);}
  .step .snum{font-size:13px; font-weight:600; color:var(--accent); flex-shrink:0; width:34px; padding-top:2px; transition:transform 0.3s ease;}
  .step:hover .snum{transform:scale(1.2);}
  .step h4{font-size:18px; font-weight:600; margin-bottom:8px; transition:color 0.3s ease;}
  .step:hover h4{color:var(--accent);}
  .step p{font-size:14px; color:var(--muted); line-height:1.7; max-width:64ch;}

  /* ---- Engagement models ---- */
  .model-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:0;}
  .model-card{background:var(--bg); padding:32px 28px; border-left:2px solid transparent; transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;}
  .model-card:hover{background:#0a0505; border-left-color:var(--accent); transform:translateX(4px);}
  .model-card .mtag{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; transition:letter-spacing 0.3s ease;}
  .model-card:hover .mtag{letter-spacing:0.16em;}
  .model-card h4{font-size:16px; font-weight:600; margin-bottom:8px;}
  .model-card p{font-size:13px; color:var(--muted); line-height:1.6;}
  @media (max-width:900px){ .model-grid{grid-template-columns:1fr;} }

  /* ---- "Who it's for" fit list ---- */
  .fit-list{margin-top:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .fit-item{
    border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#070302;
    transition:transform 0.4s cubic-bezier(.16,1,.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .fit-item:hover{transform:translateY(-6px); border-color:rgba(212,175,55,0.5); box-shadow:0 24px 50px rgba(0,0,0,0.5);}
  .fit-photo{position:relative; aspect-ratio:16/10; overflow:hidden;}
  .fit-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) brightness(0.55); transform:scale(1.05); transition:filter 0.5s ease, transform 0.6s cubic-bezier(.16,1,.3,1);}
  .fit-item:hover .fit-photo img{filter:grayscale(0) brightness(0.75); transform:scale(1.14);}
  .fit-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);}
  .fit-body{padding:22px 22px 26px;}
  .fit-item .flabel{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; font-weight:600;}
  .fit-item p{font-size:13.5px; line-height:1.7; color:var(--fg); opacity:0.85;}
  @media (max-width:900px){ .fit-list{grid-template-columns:1fr; gap:24px;} }
  .fit-list .fit-item:nth-child(1){transition-delay:0s;}
  .fit-list .fit-item:nth-child(2){transition-delay:0.1s;}
  .fit-list .fit-item:nth-child(3){transition-delay:0.2s;}

  .agency-cta{margin-top:80px; padding:56px 48px; border:1px solid var(--line); text-align:center;}
  .agency-cta h3{font-size:clamp(22px,2.6vw,30px); font-weight:500; max-width:24ch; margin:0 auto 24px;}
  .agency-cta a{display:inline-block; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; background:var(--accent); color:#fff; padding:14px 32px; border-radius:100px; text-decoration:none; transition:background 0.2s ease, transform 0.2s ease;}
  .agency-cta a:hover{background:#E8C458; transform:translateY(-1px);}

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