/* ============ RESET & BASE ============ */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans',sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
  input,textarea,select{font:inherit;}
  h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:1.02;letter-spacing:0.005em;}
  :focus-visible{outline:3px solid var(--orange);outline-offset:3px;}

  /* ============ TOKENS ============ */
  :root{
    --graphite:#020D13;
    --graphite-light:#0B202C; /* lifted graphite, same hue — used by the footer */
    --steel-soft:#DEE1E8;
    --paper:#FFFFFF;
    --ink:#020D13;
    --ink-soft:#57616C;
    --orange:#9FC80C;
    --orange-dark:#566807;
    --mint:#9FFCDF;
    --line:#C9CEDA;
    --line-dark:#16283A;
    --ff-display:'Big Shoulders Display',sans-serif;
    --ff-mono:'IBM Plex Mono',monospace;
    --container:1220px;
  }

  /* ============ LAYOUT UTILITIES ============ */
  .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 32px;}
  section{position:relative;}
  .section-pad{padding:110px 0;}
  .bg-graphite{background:var(--graphite);color:#fff;}
  .bg-steel{background:var(--steel-soft);}
  .bg-paper{background:var(--paper);}

  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--ff-mono);font-size:12.5px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);
    margin-bottom:18px;
  }
  .eyebrow-light{color:rgba(255,255,255,0.72);}

  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,4vw,44px);color:var(--ink);}
  .section-head.light h2{color:#fff;}
  .section-head p.lead{margin-top:16px;color:var(--ink-soft);font-size:16.5px;max-width:520px;}
  .section-head.light p.lead{color:rgba(255,255,255,0.68);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:15px 30px;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:13.5px;
    letter-spacing:0.06em;text-transform:uppercase;border-radius:2px;
    border:2px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease;
    white-space:nowrap;
  }
  /* No transform transition/hover-lift here: GSAP drives a magnetic hover via
     inline transforms, and a CSS transition on transform would fight it. */
  .btn-outline-light{border-color:rgba(255,255,255,0.45);color:#fff;}
  .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
  .btn-dark{background:var(--graphite);color:#fff;}
  .btn-dark:hover{background:#000;}

  /* ============ SMOOTH SCROLL (Lenis) ============ */
  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;}

  /* ============ ANIMATION INITIAL STATES ============ */
  /* Scoped to .js so the page still renders fully if scripting or GSAP fails.
     GSAP animates out of these with autoAlpha (visibility + opacity). */
  .js .reveal,
  .js .reveal-stagger > *,
  .js .hero .eyebrow,
  .js .hero-sub,
  .js .hero-actions,
  .js .hero-title .hero-line,
  .js .checklist li,
  .js .process-num,
  .js .info-item{visibility:hidden;}
  .line-mask{display:block;overflow:hidden;}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .js .reveal,.js .reveal-stagger > *,.js .hero .eyebrow,.js .hero-sub,.js .hero-actions,
    .js .hero-title .hero-line,.js .checklist li,.js .process-num,.js .info-item{visibility:visible;}
    *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
  }

  /* ============ TOPBAR ============ */
  .topbar{background:var(--graphite);color:rgba(255,255,255,0.75);font-family:var(--ff-mono);font-size:12.5px;}
  .topbar-inner{display:flex;justify-content:space-between;align-items:center;height:38px;}
  .topbar a{transition:color .2s;}
  .topbar a:hover{color:var(--mint);}
  .topbar-left span.sep{margin:0 10px;opacity:.4;}
  .topbar-right{display:flex;align-items:center;gap:20px;}
  @media (max-width:860px){.topbar{display:none;}}

  /* ============ HEADER ============ */
  .site-header{
    position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.0);
    transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
    padding:22px 0;
  }
  .site-header.is-scrolled{background:rgba(255,255,255,0.98);box-shadow:0 2px 24px rgba(0,0,0,0.08);padding:14px 0;}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:0.01em;color:var(--ink);}
  .logo img{height:38px;width:auto;}
  .main-nav{display:flex;gap:36px;}
  .main-nav a{font-size:14px;font-weight:600;letter-spacing:0.02em;color:var(--ink);position:relative;padding:4px 0;}
  .main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .25s ease;}
  .main-nav a:hover::after{width:100%;}
  .header-actions{display:flex;align-items:center;gap:22px;}
  .nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px;}
  .nav-toggle span{width:24px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .25s ease;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media (max-width:960px){
    .main-nav{
      position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(320px,84vw);
      background:var(--graphite);flex-direction:column;justify-content:center;
      gap:8px;padding:40px;transform:translateX(100%);transition:transform .35s ease;
      z-index:110;
    }
    .main-nav.is-open{transform:translateX(0);}
    .main-nav a{color:#fff;font-size:20px;padding:12px 0;border-bottom:1px solid var(--line-dark);}
    .main-nav a::after{background:var(--mint);}
    .nav-toggle{display:flex;position:relative;z-index:120;}
    .nav-toggle.is-open span{background:#fff;}
  }

  /* ============ HERO ============ */
  .hero{min-height:92vh;display:flex;align-items:center;background:var(--graphite);overflow:hidden;}
  /* Extra vertical headroom (clipped by .hero's overflow) so the scrub
     parallax can move the image without exposing an edge. */
  .hero-media{position:absolute;top:-15%;left:0;right:0;bottom:-15%;z-index:0;}
  .hero-media img{width:100%;height:100%;object-fit:cover;opacity:0.55;will-change:transform;}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,22,26,0.97) 15%,rgba(20,22,26,0.82) 45%,rgba(20,22,26,0.55) 75%,rgba(20,22,26,0.35) 100%);}
  .hero-inner{position:relative;z-index:1;padding:150px 0 90px;}
  .hero-title{color:#fff;margin-bottom:26px;}
  .hero-line{display:block;}
  .hero-line-in{font-size:clamp(20px,2.6vw,28px);font-weight:600;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;}
  .hero-line-in em{font-style:normal;color:#fff;font-weight:800;}
  .hero-line-out{font-size:clamp(42px,6.4vw,84px);text-transform:uppercase;max-width:820px;}
  .hero-sub{color:rgba(255,255,255,0.72);font-size:17.5px;max-width:520px;margin-bottom:38px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
  /* Hero intro is a GSAP timeline (see script.js) — no CSS keyframes here. */


  /* ============ STATS ============ */
  .stats{background:var(--steel-soft);border-bottom:1px solid var(--line);}
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);}
  .stat{text-align:center;padding:56px 20px;border-left:1px solid var(--line);}
  .stat:first-child{border-left:none;}
  .stat-num{display:block;font-family:var(--ff-display);font-size:clamp(38px,4.6vw,58px);font-weight:800;color:var(--orange-dark);line-height:1;}
  .stat-label{display:block;margin-top:10px;font-family:var(--ff-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}
  @media (max-width:640px){.stats-grid{grid-template-columns:1fr;}.stat{border-left:none;border-bottom:1px solid var(--line);}.stat:last-child{border-bottom:none;}}

  /* ============ ABOUT ============ */
  .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}
  .about-media{position:relative;}
  .about-media img{width:100%;height:560px;object-fit:cover;}
  .about-media::before{content:"";position:absolute;top:-18px;left:-18px;width:120px;height:120px;border-top:5px solid var(--orange);border-left:5px solid var(--orange);z-index:1;}
  .about-content h2{font-size:clamp(30px,4vw,42px);margin-bottom:22px;max-width:520px;}
  .about-content > p{color:var(--ink-soft);font-size:16.5px;margin-bottom:28px;max-width:540px;}
  .checklist{display:grid;gap:14px;margin-bottom:34px;}
  .checklist li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink);}
  .checklist svg{flex:none;margin-top:2px;color:var(--orange-dark);}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px;}.about-media img{height:380px;}}

  /* ============ PROCESS ============ */
  .process{background:var(--graphite);color:#fff;}
  .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
  .process-step{background:var(--graphite);padding:44px 30px;position:relative;}
  .process-num{font-family:var(--ff-display);font-size:60px;font-weight:800;color:var(--line-dark);line-height:1;margin-bottom:26px;}
  .process-step h3{font-family:var(--ff-display);font-size:19px;font-weight:700;text-transform:uppercase;margin-bottom:12px;letter-spacing:0.03em;}
  .process-step p{color:rgba(255,255,255,0.62);font-size:14px;line-height:1.65;}
  .process-step:not(:last-child)::after{content:"→";position:absolute;top:44px;right:-13px;color:var(--orange);font-size:18px;z-index:2;display:none;}
  @media (min-width:901px){.process-step:not(:last-child)::after{display:block;}}
  @media (max-width:900px){.process-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.process-grid{grid-template-columns:1fr;}}

  /* ============ GALLERY ============ */
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .gallery-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--graphite);}
  .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .gallery-item:hover img{transform:scale(1.08);}
  .gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,17,20,0.85) 0%,rgba(15,17,20,0) 55%);display:flex;align-items:flex-end;padding:20px;}
  .gallery-tag{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:#fff;display:flex;align-items:center;}
  @media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}

  .lightbox{position:fixed;inset:0;background:rgba(10,11,13,0.94);z-index:200;display:none;align-items:center;justify-content:center;padding:40px;}
  .lightbox.is-open{display:flex;}
  .lightbox img{max-width:min(1000px,92vw);max-height:82vh;object-fit:contain;}
  .lightbox-caption{position:absolute;bottom:36px;left:0;right:0;text-align:center;font-family:var(--ff-mono);color:#fff;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;}
  .lightbox-close{position:absolute;top:28px;right:32px;width:44px;height:44px;border:1px solid rgba(255,255,255,0.3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;}
  .lightbox-close:hover{background:rgba(255,255,255,0.1);}

  /* ============ LOCATION ============ */
  .location-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .location-card{background:var(--graphite-light);border:1px solid var(--line-dark);padding:26px;}
  .location-card h3{font-size:19px;text-transform:uppercase;letter-spacing:0.03em;color:#fff;margin-bottom:10px;}
  .location-address{color:rgba(255,255,255,0.66);font-size:14.5px;line-height:1.65;margin-bottom:20px;}

  .map-embed{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line-dark);}
  .map-embed iframe{width:100%;height:100%;border:0;display:block;}
  /* Maps stay inert until clicked, so passing over one can't hijack the page
     scroll. Lenis also blanket-disables iframe pointer events, so the active
     state has to out-specify that rule to become interactive at all. */
  .map-embed iframe,
  .lenis.lenis-smooth .map-embed iframe{pointer-events:none;}
  .map-embed.is-active iframe,
  .lenis.lenis-smooth .map-embed.is-active iframe{pointer-events:auto;}

  /* Label sits centred, not at the bottom, so it never covers Google's
     required "Map data / Terms" attribution. */
  .map-activate{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(2,13,19,0.32);color:#fff;
    font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
    transition:opacity .3s ease,background .3s ease;
  }
  .map-activate:hover{background:rgba(2,13,19,0.16);}
  .map-embed.is-active .map-activate{opacity:0;pointer-events:none;}

  .map-link{
    display:inline-flex;align-items:center;gap:8px;margin-top:18px;
    font-family:var(--ff-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--orange);transition:gap .2s ease,color .2s ease;
  }
  .map-link:hover{gap:13px;color:var(--mint);}
  @media (max-width:860px){.location-grid{grid-template-columns:1fr;}}

  /* ============ CONTACT ============ */
  .contact-single{max-width:840px;}
  .info-list{display:grid;grid-template-columns:1fr 1fr;gap:28px 44px;margin-top:36px;}
  .info-item{display:flex;gap:16px;}

  /* Icon tile hover: lime fill sweeps up from the bottom, the glyph rolls out
     the top while its duplicate rolls in from below, and the tile lifts.
     Driven from .info-item so the whole row is the hover target. */
  .info-icon{
    position:relative;width:44px;height:44px;flex:none;overflow:hidden;
    background:var(--graphite);color:var(--orange);
    transition:color .35s ease,transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .45s ease;
  }
  .info-icon::before{
    content:"";position:absolute;inset:0;background:var(--orange);
    transform:translateY(101%);transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .icon-swap{position:relative;z-index:1;display:flex;flex-direction:column;
    transition:transform .45s cubic-bezier(.65,0,.35,1);}
  /* Each glyph is exactly one tile tall, so the track shifts by 50% to swap. */
  .icon-swap svg{flex:none;width:44px;height:44px;padding:13px;}

  .info-item:hover .info-icon{color:var(--graphite);transform:translateY(-4px);
    box-shadow:0 12px 22px -10px rgba(2,13,19,.55);}
  .info-item:hover .info-icon::before{transform:translateY(0);}
  .info-item:hover .icon-swap{transform:translateY(-50%);}
  .info-item h4{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;}
  .info-item p{font-size:15px;color:var(--ink);}
  @media (max-width:560px){.info-list{grid-template-columns:1fr;}}

  /* ============ FOOTER ============ */
  .site-footer{background:var(--graphite-light);color:rgba(255,255,255,0.72);padding-top:90px;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid var(--line-dark);}
  .footer-logo{font-family:var(--ff-display);font-size:22px;font-weight:800;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:18px;}
  .footer-logo img{height:44px;width:auto;padding:6px 10px;border-radius:2px;}
  .footer-col p{font-size:14px;line-height:1.7;max-width:280px;}
  .footer-col h5{font-family:var(--ff-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#fff;margin-bottom:22px;}
  .footer-links{display:grid;gap:12px;}
  .footer-links a{font-size:14px;transition:color .2s,padding-left .2s;}
  .footer-links a:hover{color:var(--orange);padding-left:4px;}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:12.5px;color:rgba(255,255,255,0.45);flex-wrap:wrap;gap:12px;}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:36px;}}

  /* ============ BACK TO TOP ============ */
  .to-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;background:var(--graphite);color:#fff;display:flex;align-items:center;justify-content:center;z-index:90;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,background .2s;}
  .to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
  .to-top:hover{background:var(--orange-dark);}

  @media (max-width:640px){
    .container{padding:0 22px;}
    .section-pad{padding:72px 0;}
    .hero{min-height:88vh;}
    .hero-inner{padding:116px 0 56px;}
    .hero-line-out{font-size:clamp(30px,8.6vw,44px);}
    .hero-sub{font-size:16px;}
    .section-head{margin-bottom:40px;}
  }
  @media (max-width:480px){
    .container{padding:0 18px;}
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;}
    .btn{padding:14px 22px;}
    .stat{padding:38px 14px;}
    .stat-label{font-size:11px;}
    .to-top{bottom:18px;right:18px;width:44px;height:44px;}
  }