@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
@import url('https://fonts.cdnfonts.com/css/aileron');

:root{
  /* Theme */
  --bg:#292929;           /* slate grey */
  --ink:#e3e2dc;          /* oat (primary text) */
  --muted:#b7b5b0;        /* muted oat */
  --accent:#495932;       /* olive (highlight) */
  --line:#3a3a3a;         /* lines/borders */

  --rail-gap:48px; --rail-pad:56px;
  --panel-w:520px;
  /* Gradient controls (for optional solid gradient theme) */
  --bg-start:#303030;     /* slightly lighter than --bg */
  --bg-end:#1d1d1d;       /* slightly darker tail */
  /* Studio light controls */
  --light-x: 22%;         /* hotspot position X */
  --light-y: 20%;         /* hotspot position Y */
  --light-size: 920px;    /* maximum smoothness radius */
  --light-strong: 0.06;   /* ultra-gentle center */
  --light-soft: 0.03;     /* ultra-gentle mid */
  /* Accent serif for selective emphasis (Didot LP Display → Playfair fallback) */
  --accent-serif: "Didot LP Display", "Playfair Display", serif;
  --about-center-offset: -30px;
  --services-rail-offset: 0px; /* tweak if you want the rail slightly up/down */
}

/* ================= Loader ================= */
.loader{
  position:fixed; inset:0; z-index:2000;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg) 38%, var(--bg-end) 100%);
  display:block; overflow:hidden;
  /* Panel slide reveal: start covering screen, then slide up off screen */
  transform: translateY(0);
  transition: transform 3000ms cubic-bezier(.2,.7,0,1);
  will-change: transform;
}
.loader__logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(.94);
  width:min(36vw, 300px); height:auto; filter: drop-shadow(0 18px 46px rgba(0,0,0,.45));
  opacity:0; transition: transform 900ms cubic-bezier(.2,.7,0,1), opacity 800ms ease;
}
.loader__bg,.loader__mask,.loader__edge{position:absolute; inset:0; pointer-events:none}
.loader__bg{background: radial-gradient(ellipse at center, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%)}
.loader__edge{border-top:1px solid rgba(255,255,255,.06)}
.loader.on .loader__logo{ opacity:1; transform:translate(-50%, -50%) scale(1) }

 /* Allow normal scrolling on standalone pages (e.g., contact) */
 body.page--contact{ 
  overflow:auto; 
  overflow-y:auto; 
  /* subtle radial gradient for depth */
  background: radial-gradient(ellipse at 50% 20%, #2d2d2d 0%, var(--bg) 50%, #252525 100%) !important;
  background-attachment: fixed !important;
 }
 /* subtle noise texture overlay for premium feel */
 body.page--contact::before{ 
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
 }
.loader.animate{ transform: translateY(-100%); }
.loader.is-hidden{display:none}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .loader{ transition: none; }
  .loader__logo{ transition: none }
}
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  /* full-bleed background */
 body{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); overflow:hidden;
   /* Background texture (prototype): consider downloading and self-hosting for production */
   background-color:#292929;
   background-image:url("https://www.transparenttextures.com/patterns/concrete-wall.png");
   background-attachment:fixed; /* keep texture stable on scroll */
 }

 /* Background texture overlay (behind UI) */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  z-index:0; /* behind .viewport (1) and all content */
  background-image:url("https://www.transparenttextures.com/patterns/concrete-wall.png");
  background-size:256px 256px; background-repeat:repeat; background-position:0 0;
  opacity:0.22;               /* subtle strength so it doesn't affect text */
  mix-blend-mode:normal;
}

  /* Scroll proxy */
  .scroll-detector{position:fixed; inset:0; overflow-y:auto; z-index:10; touch-action: pan-y}
  .scroll-height{height:1630vh; width:1px}

  /* Mobile: reduce scroll proxy height */
  @media (max-width: 700px){
    .scroll-height{ height:880vh }
  }

  /* Hide vertical scrollbar on scroll proxy (preserve scrolling) */
  .scroll-detector{ 
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ / old Edge */
  }
  .scroll-detector::-webkit-scrollbar{ /* Chrome, Safari, new Edge */
    width: 0;
    height: 0;
  }

  /* Full-screen viewport (no border, no frame) */
  .viewport{
    position:fixed; top:0; left:0; width:100vw; height:calc(var(--vh, 1vh) * 100);
    background:transparent; /* let the body texture show through */
    overflow:visible; z-index:1;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:84px;
  }

  /* Case studies responsive height */
  @media (max-width: 900px){
    .case-card{height:auto; min-height:480px; margin-right:48px !important}
    .cs2 .rail{ gap:24px !important }
  }

  /* Tighten space further on tablet/large phones */
  @media (max-width: 700px){
    .case-card{ margin-right:24px !important }
    .cs2 .rail{ gap:18px !important }
  }

  /* Small phones: minimal spacing so marquee sits close */
  @media (max-width: 480px){
    .case-card{ margin-right:14px !important }
    .cs2 .rail{ gap:12px !important }
  }
  .case-card__top{aspect-ratio:16/9}

  /* Hero-style card box for text panel */
  .panel--hero-card{
    background:#202020;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 30px 70px rgba(0,0,0,.35);
    padding:36px 40px;
    position:relative; /* for texture overlay */
  }
  .panel--hero-card h2{font-family:'Aileron', 'Poppins', system-ui; font-size:36px; line-height:1.15; margin-bottom:16px; font-weight:800; color:var(--ink)}
  .panel--hero-card .body-text{font-size:18px; line-height:1.6; color:var(--muted)}
  .panel--hero-card::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("https://www.transparenttextures.com/patterns/concrete-wall.png");
    background-size:256px 256px; background-repeat:repeat; background-position:0 0;
    opacity:0.12;            /* subtle texture */
    mix-blend-mode:normal;
    pointer-events:none;
    z-index:0;               /* above background, below content */
  }

  /* Boxless copy panel: focus on type and comfortable spacing */
  .panel.panel--copy{border:0; background:transparent; padding:0; margin:14px 100px; margin-left: 200px; margin-right: -650px;}
  /* Make the copy panel wider than default text panels */
  .panel--copy.panel--text{flex-basis:980px}
  /* Extra space after the copy block before first service card (reduced for closer proximity) */
  #services.panel.panel--copy{margin-right:-50vh}

  /* Case studies header: align high like services title and remove border */
  #case-studies.panel{border:0; padding:0; background:transparent}
  #case-studies.panel--text{flex-basis:auto}
  /* Align case studies header with copy panel margins */
  #case-studies{align-self:flex-start; margin:12px 100px 0 100px}
  #case-studies .copy-head{margin:0; padding-top: clamp(2rem, 4vh, 4rem);}
  .panel--copy .body-text{
    max-width:980px;
    padding:0 24px; /* breathing room without a box */
    font-size:21px;
    line-height:1.8;
    letter-spacing:0.1px;
    color:var(--muted);
    font-weight:400;
  }
  .panel--copy .body-text p + p{margin-top:18px}

  /* Paragraph words: same behavior as headline (no gradient line) */
  #services .body-text p{ color:var(--muted); }
  #services .body-text p .word{ color:var(--muted); transition:color 140ms linear }
  #services .body-text p .word.on{ color:var(--ink) }

  /* Headline per-word reveal: entire word toggles from muted → ink (no gradient line) */
  #services .copy-head{color:var(--ink)}
  #services .copy-head .word{color:var(--muted); transition:color 140ms linear}
  #services .copy-head .word.on{color:var(--ink)}

  /* Services intro: reduce heading size (~40% smaller than default copy-head) */
  #services .body-text .copy-head{
    font-size: clamp(22px, 3.2vw, 30px);
    line-height: 1.25;
    margin: 0.6em 0 0.8em;
  }
  @media (max-width: 720px){
    #services .body-text .copy-head{ 
      font-size: clamp(15px, 4vw, 18px); 
      line-height: 1.6; 
      max-width: calc(100vw - 126px);
      width: calc(100vw - 126px);
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      margin: 0.5em 0 0.7em;
    }
    #services .body-text{ 
      padding: 0 24px 0 88px; 
      max-width: 100vw; 
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
    }
  }
  @media (max-width: 480px){
    #services .body-text .copy-head{ 
      font-size: 22px;
      line-height: 1.8;
      margin: 0.45em 0 0.65em;
      max-width: calc(150vw - 104px);
      width: calc(110vw - 104px);
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
    #services .body-text{ 
      padding: 0 20px 0 72px; 
      max-width: 100vw; 
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
    }
  }

  /* Reference-style headline and columns */
  .copy-head{
    font-family:'Aileron', 'Poppins', system-ui;
    font-size: 56px;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 24px;
    margin-top: 56px;
    margin:0 24px 22px 24px;
    max-width:980px;
  }
  .u-strong{font-weight:900; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; text-underline-offset:4px}
  .copy-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:42px;
    max-width:1100px;
    margin:0 24px;
  }
  .copy-cols p{font-family:"Inter";font-size:16px; line-height:1.7; color:var(--muted)}

  /* Responsiveness */
  @media (max-width: 1024px){
    .copy-head{font-size:40px}
    .panel.panel--copy{margin:0 64px}
  }
  @media (max-width: 768px){
    .copy-head{font-size:34px}
    .copy-cols{grid-template-columns:1fr}
    .panel.panel--copy{margin:0 40px}
  }
  @media (max-width: 720px){
    .panel.panel--copy{margin:0}
    #services.panel.panel--copy{margin:0}
    .panel--copy.panel--text{flex-basis:auto}
    
    /* About section mobile optimization - handled in mobile.css */
  }
  /* ================= Mobile Swipe Helper ================= */
  .swipe-helper{
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999 !important; /* above everything */
    display: flex !important; /* always flex, control visibility with opacity */
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    /* Debug: make sure it's visible */
    visibility: hidden;
  }
  .swipe-helper.is-visible{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .swipe-helper__hand{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(73, 89, 50, 0.25);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(73, 89, 50, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    position: relative;
    animation: sweepUpHand 2.6s ease-in-out infinite;
  }
  /* trailing streak */
  .swipe-helper__hand::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 48px; /* start just above the circle's top */
    transform: translateX(-50%);
    width: 18px;
    height: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(73,89,50,0.28), rgba(73,89,50,0.12), rgba(73,89,50,0));
    filter: blur(1.2px);
    opacity: 0;
    pointer-events: none;
    animation: sweepUpTrail 2.6s ease-in-out infinite;
  }
  .swipe-helper__hand svg{
    width: 32px;
    height: 32px;
  }
  .swipe-helper__text{
    font-family: 'Inter', system-ui;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  @keyframes sweepUpHand {
    0%   { transform: translateY(18px) scale(1); }
    25%  { transform: translateY(0) scale(1.04); }
    60%  { transform: translateY(-64px) scale(1.06); }
    100% { transform: translateY(18px) scale(1); }
  }
  @keyframes sweepUpTrail {
    0%   { opacity: 0; height: 0; }
    20%  { opacity: .12; height: 26px; }
    60%  { opacity: .32; height: 90px; }
    100% { opacity: 0; height: 0; }
  }
  /* Hide on desktop */
  @media (min-width: 701px){
    .swipe-helper{ display: none !important; }
  }

  @media (max-width: 480px){
    .copy-head{font-size: clamp(30px, 5.5vw, 28px);}
    .panel.panel--copy{margin-left: -15px;}
    #services.panel.panel--copy{margin-left: -12vh; margin-right: 8vh;}
    .panel--copy.panel--text{flex-basis:auto; margin-left: 30px; margin-right: 132px; margin-top: -30px;}
    
    /* About section mobile optimization - handled in mobile.css */
  }

  /* Horizontal rail */
  .rail{
    height:100%; display:flex; align-items:center;
    gap:var(--rail-gap); padding:0 var(--rail-pad);
    will-change:transform; transform:translateX(0);
  }

  /* Panels */
 .panel{flex:0 0 auto; background:transparent; padding:28px}
  .panel--text{flex-basis:var(--panel-w)}
  .panel--hero{
    flex-basis:100vw; border:0; padding:0;
    display:flex; align-items:center; justify-content:space-between; gap:5vw;
    position:relative;
    background:transparent; /* allow dark hero from hero.css */
  }

  /* Text always above media */
  .layer-text{position:relative; z-index:5}
  .layer-media{position:relative; z-index:2; pointer-events:none}

  .hero-inner{flex:1; padding-left:8vw}
 .logo{width:150px;height:50px;border:1px solid var(--line);background:#202020;display:flex;align-items:center;justify-content:center;margin-bottom:32px;color:var(--muted)}

  h1{font-family:'Aileron','Poppins',system-ui; font-size:64px;line-height:1.1;font-weight:800;color:var(--ink)}
 h2{font-family:'Aileron','Poppins',system-ui; font-size:36px;line-height:1.2;margin-bottom:18px;font-weight:700;color:var(--ink)}
 h3{font-family:'Aileron','Poppins',system-ui; font-size:22px;margin-bottom:10px;font-weight:700;color:var(--ink)}
 .subtitle{font-family:'Aileron','Poppins',system-ui; font-size:18px;line-height:1.6;color:var(--muted)}
 .body-text{font-family:'Poppins',system-ui; font-size:16px;line-height:1.55;color:var(--muted)}

  .cta-group{display:flex;gap:16px;margin-top:22px}
 .cta-button{padding:10px 18px;border:1px solid var(--accent);background:var(--accent);color:#111;font-size:14px}
.cta-button:hover{filter:brightness(0.95)}

  /* Hero transition image (no borders, allowed to grow) */
 .hero-media{flex:1; max-width:60vw; display:flex; align-items:center; justify-content:center}
 .photo-wrap{width:100%; height:60vh; transform:scale(0.9); transform-origin:center; transition:transform 0.2s linear; will-change:transform; border:0}
 .photo-wrap img{width:100%; height:100%; object-fit:cover; border:0; outline:0}

  /* Services: stacked image card */
  .category-stack{flex:0 0 520px; display:flex; flex-direction:column; border:1px solid var(--line); background:#1a1a1a; border-radius:14px; box-shadow:0 18px 46px rgba(0,0,0,.35); overflow:hidden}
  .category-stack__img{height:300px; background:#151515; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; color:#aaa;
     transform:scale(0.9); transition:transform 0.18s linear; will-change:transform; backface-visibility:hidden;}
  .category-stack__content{padding:28px}
  .category-stack__label{display:inline-block; padding:6px 12px; border:1px solid var(--line); margin-bottom:12px; font-size:14px; color:var(--muted)}
  .category-stack__title{font-size:22px; margin-bottom:10px; color:var(--ink)}
  .category-stack__desc{font-size:14px; color:var(--muted); line-height:1.5}

  /* Services: list layout (reference style) */
  .services{flex-basis:1600px; border:0; padding:0; display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:start}
  .services-visual{position:relative; height:400px; pointer-events:none}
  .services-visual__img{position:absolute; left:0; top:0; width:260px; height:380px; background:#151515; border:1px solid var(--line); border-radius:8px; box-shadow:0 30px 70px rgba(0,0,0,.35); transform:rotate(-8deg); transform-origin:40% 60%; background-size:cover; background-position:center}
  /* replace url(...) with your asset path when ready */
  .services-visual__img{background-image:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
  .services-visual__tag{position:absolute; width:120px; height:80px; background:var(--accent); bottom:30px; left:170px; transform:rotate(-12deg); border-radius:6px; box-shadow:0 18px 46px rgba(0,0,0,.35)}

  .services-list{border-left:0}
  .service-row{display:grid; grid-template-columns:60px 1fr 48px; gap:24px; align-items:center; padding:14px 18px; margin:12px 0; background:#1a1a1a; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,.25)}
  .service-num{color:var(--muted); font-weight:600; letter-spacing:.06em}
  .service-main{display:grid; grid-template-columns:0.45fr 1.55fr; gap:28px; align-items:flex-start}
  .service-title{font-family:'Aileron','Poppins',system-ui; font-weight:800; color:var(--ink); font-size:20px}
  .service-desc{font-family:'Poppins',system-ui; color:var(--muted); font-size:14px; line-height:1.6}
  .service-arrow{color:var(--muted); font-size:28px; text-align:right}
  .service-row:hover .service-arrow{color:var(--ink); transform:translateX(2px)}

  @media (max-width: 1200px){
    .services{grid-template-columns:1fr; gap:22px; flex-basis:auto}
    .services-visual{height:260px}
    .services-visual__img{width:220px; height:260px}
    .services-visual__tag{width:90px; height:60px; bottom:24px; left:160px}
    .service-main{grid-template-columns:1fr}
  }

  /* Transition video */
  .video-panel{flex-basis:900px; border:1px solid var(--line); padding:0; display:flex; align-items:center; justify-content:center; background:#0f0f0f; margin-right:200px; margin-left: 200px;}
 .video-wrap{width:100%; height:440px; position:relative; overflow:hidden; transform:scale(0.92); transform-origin:center; transition:transform 0.18s linear; will-change:transform; background:#0f0f0f}
 .video-wrap video{width:100%; height:100%; object-fit:cover; background:transparent}
 .video-overlay{position:absolute; left:12px; top:12px; background:transparent; border:0; padding:6px 10px; font-size:12px; color:var(--muted)}

  /* Case studies */
 .case-card{flex:0 0 520px; background:#1a1a1a; border:1px solid var(--line); display:flex; flex-direction:column; border-radius:14px; box-shadow:0 18px 46px rgba(0,0,0,.35); overflow:visible; height:78vh; min-height:560px; margin-right:120px; position:relative;
  /* Initial state for scroll animation */
  opacity:0;
  transform: translateZ(0) translateY(-40px) scale(0.95);
  transition:opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
             transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
             box-shadow 0.3s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  content-visibility: auto;
  contain-intrinsic-size: 560px 520px;
 }
 
 /* Visible state when scrolled into view */
 .case-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
 }
 
 /* Enhanced hover with lift and glow */
 .case-card:hover{
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             0 0 40px rgba(73, 89, 50, 0.12);
  transform:translateY(-8px);
 }
 .case-card__top{background:#151515; padding:24px 28px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:flex-end; border-bottom:0; background-position: var(--bg-x, 50%) var(--bg-y, 50%); background-size: cover; position:relative;
  transition:transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style:preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
 }

/* Subtle texture inside case card body */
.case-card::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("https://www.transparenttextures.com/patterns/concrete-wall.png");
  background-size:256px 256px; background-repeat:repeat; background-position:0 0;
  opacity:0.08;
  mix-blend-mode:normal;
  pointer-events:none;
  z-index:0; /* above background, below children */
}

/* Logos marquee (single-line horizontal ticker) */
.logos-marquee{position:relative; height:150px; padding:0; display:flex; align-items:center; justify-content:center; border:0; z-index:4; margin-top:24px}
/* Place the ticker at the very bottom of the contact panel and span full viewport width */
.panel.contact{ position:relative; padding-bottom:420px; }
.panel.contact .logos-marquee{ position:absolute; left:50%; transform:translateX(calc(-50% + 100px)); width:70vw; bottom:-140px; margin-top:0; pointer-events:none }
.logos-marquee__inner{position:relative; width:100%; max-width:none; padding:0}
.logos-row{position:relative; height:130px; overflow:hidden; /* longer feathered edges so logos never feel cropped */
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
}
.logos-track{display:flex; flex-direction:row; align-items:center; gap:24px; will-change:transform; animation: marquee-left 32s linear infinite; transform: translate3d(0,0,0)}

/* Marquee logo cards (white background, larger logos while keeping card size) */
.logo-card{flex:0 0 206px; height:100px; padding:2px 6px; background:#ffffff; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; box-shadow:0 8px 18px rgba(0,0,0,.26)}
.logo-card img{max-width:100%; max-height:100%; object-fit:contain; filter:none}
/* Double-size variant for GS only */
.logo-card--gs img{ transform: scale(1.8); transform-origin: center; }

@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .case-card__num{font-size:44px; font-weight:700; color:var(--ink); line-height:1; position:absolute; top:14px; left:18px;
  transform:translateZ(30px);
  transition:transform 0.3s ease;
 }
  .case-card:hover .case-card__num{transform:translateZ(30px) scale(1.05);}
  .case-card__logo{width:120px;height:120px;border:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);
    transform:scale(0.9) translateZ(50px); transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); will-change:transform; overflow:hidden;
    background:#ffffff; /* white background behind logo */
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
  }
  .case-card:hover .case-card__logo{transform:scale(1) translateZ(50px) rotate(5deg);}
 /* Ensure logo images fit nicely within the circular logo holder (smaller inside same circle) */
 .case-card__logo img{width:80%; height:80%; object-fit:contain; object-position:center; padding:0; display:block}
  .case-card__bottom{padding:0; flex:1; display:flex; flex-direction:column;margin-top:15px;}
 .case-card__brand{font-family:'Aileron','Poppins',system-ui; font-size:30px; letter-spacing:1.5px; font-weight:800; margin-bottom:12px; color:var(--ink)}
 .case-card__desc{font-family:'Inter','Poppins',system-ui; font-size:15px; color:var(--muted); line-height:1.7}

  /* About & Contact */
  .about{flex-basis:680px; align-self:flex-start; margin:12px 100px 0 100px; position:relative; top:0; padding-bottom:40px; display:flex; flex-direction:column; min-height:100vh}
  /* Align About header with other headers and enlarge about copy */
  .about .copy-head{margin:0; padding-top: clamp(2rem, 4vh, 4rem);}
  /* About headline per-word reveal */
  .about .copy-head{color:var(--ink); max-width: calc(150vw - 104px); width: calc(110vw - 104px);}
  .about .copy-head .word{color:var(--muted); transition:color 140ms linear}
  .about .copy-head .word.on{color:var(--ink)}
  /* Desktop default for About copy columns */
  /* Make About copy fill the available horizontal space similar to the heading */
  .about .copy-cols{
    max-width: calc(180vw - 104px);
    width: calc(140vw - 104px);
    gap: 48px;
    /* keep left inset aligned with heading */
    margin: 0 0 0 350px;
    /* vertically center the paragraph block within the viewport */
    margin-top: auto;
    margin-bottom: auto;
    transform: translateY(var(--about-center-offset));
  }
  /* Match Services intro copy size */
  .about .copy-cols p{font-size: clamp(22px, 3.2vw, 30px);line-height: 1.25;}
  .about .copy-cols p + p{margin-top:14px}
  /* About per-word reveal (match Services behavior) */
  .about .copy-cols p{ color:var(--muted); }
  .about .copy-cols p .word{ color:var(--muted); transition:color 140ms linear }
  .about .copy-cols p .word.on{ color:var(--ink) }
  /* Bold lines keep heavier weight while still using fill color transition */
  .about .copy-cols p.is-strong .word{ font-weight:800 }
  .contact{flex-basis:680px; align-self:flex-start; margin:100px 100px 0 100px; position:relative; top:29px}
  /* Make contact panel align with copy layout spacing */
  .panel.contact{
    border:0; padding:0; background:transparent; margin:0 100px; position:relative; min-height:70vh;
    /* control the measure (line length) of the contact copy */
    --contact-copy-width: 820px;
  }
  /* Contact header alignment to match About */
  /* Offset header to align with the text column */
  .contact .copy-head{margin:0 0 22px 48px}
  /* Contact helper copy above the button */
  .contact-copy{
    font-family:'Poppins',system-ui;
    font-size:22px; /* match .about .copy-cols p */
    line-height:1.8; /* match About rhythm */
    color:var(--muted);
    text-align:left;
    max-width: var(--contact-copy-width);
    margin:8px 0 28px 48px; /* align text under header and reduce bottom gap */
  }
  .contact-hero .copy-head{ margin:0 0 12px 0; }
  .contact-copy a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
  .panel.contact .contact-copy i.accent-serif{ font-family: var(--accent-serif) !important; font-style: italic; font-weight:400; font-size: 1.30em; letter-spacing:.01em; }
  /* Tighten line-height for contact paragraph on larger screens to reduce gap above the accent line */
  .panel.contact .contact-copy{ line-height: 1.3; }

  /* Center the circular CTA under the text column (not the full panel) */
  .panel.contact .contact-copy + .submit{
    position: relative !important;
    left: calc(48px + (var(--contact-copy-width) / 2)) !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    margin-top: 80px !important;
  }

  /* Mobile tweaks: copy uses full width; center button below */
  @media (max-width: 700px){
    .panel.contact{ --contact-copy-width: calc(100vw - 120px) }
    .contact .copy-head{ margin-left: 24px }
    .contact-copy{ margin-left:24px; margin-right:24px; max-width: calc(100vw - 120px) }
    .panel.contact .contact-copy + .submit{
      transform: translateX(-50%) !important;
    }
  }

  /* Contact page (standalone) */
  .contact-hero{ position:relative; margin:100px auto 160px auto; max-width:1100px; padding:40px 24px 20px; z-index: 5; }
  .contact-hero__bg-text{
    position:fixed; left:50%; transform:translateX(-50%); top:80px; pointer-events:none; z-index:2;
    font-family:'Aileron','Poppins',system-ui; font-weight:800; text-transform:lowercase;
    font-size:clamp(86px, 22vw, 240px); line-height:.86; letter-spacing:-0.02em;
    color:rgba(255,255,255,.04);
    background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.05) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 8s ease-in-out infinite;
    white-space: nowrap;
    will-change: transform;
  }
  @keyframes shimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
  }
  .contact-hero__content{ position:relative; z-index:5; max-width:980px; margin:0 auto; }

  .contact-form{ max-width:980px; display:flex; flex-direction:column; gap:26px; margin-top:10px }
  .contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
  .contact-form .field{ 
    display:flex; 
    flex-direction:column;
    position: relative;
  }
  /* Hover effect: green underline appears below input */
  .contact-form .field::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
    border-radius: 0 0 4px 4px;
  }
  .contact-form .field:hover::after {
    transform: scaleX(1);
  }
  /* Make hover underline visually match active border by hiding the grey base line */
  .contact-form .field:hover input,
  .contact-form .field:hover textarea{
    border-bottom-color: transparent;
  }
  /* Hide hover underline when focused so only the input border shows */
  .contact-form .field:focus-within::after {
    opacity: 0;
  }
  .contact-form .field.full{ grid-column:1 / -1 }
  .contact-form label{ font-family:'Inter'; font-size:12px; color:var(--muted); margin:0 0 6px 0; text-transform:lowercase }
  .contact-form input,
  .contact-form textarea{
    background:transparent; color:var(--ink); outline:none;
    border:3px solid transparent;
    border-bottom:3px solid var(--line);
    padding:10px 6px 8px; font-size:16px;
    border-radius: 4px;
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .contact-form textarea{ min-height:140px; resize:vertical }
  
  /* Animated border on focus - draws clockwise from bottom */
  .contact-form input:focus,
  .contact-form textarea:focus{ 
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(73, 89, 50, 0.15);
    border-bottom-color: var(--accent);
    animation: drawBorder 0.6s ease-out forwards;
  }
  
  @keyframes drawBorder {
    0% {
      border-bottom-color: var(--accent);
      border-right-color: transparent;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    33% {
      border-bottom-color: var(--accent);
      border-right-color: var(--accent);
      border-top-color: transparent;
      border-left-color: transparent;
    }
    66% {
      border-bottom-color: var(--accent);
      border-right-color: var(--accent);
      border-top-color: var(--accent);
      border-left-color: transparent;
    }
    100% {
      border-bottom-color: var(--accent);
      border-right-color: var(--accent);
      border-top-color: var(--accent);
      border-left-color: var(--accent);
    }
  }

  .form-actions{ display:flex; align-items:center; gap:12px; padding-top:8px }
  
  /* Fade-in animation for content */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-in {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }
  /* Enhanced button interactions */
  .contact-form .btn--primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .contact-form .btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .contact-form .btn--primary:hover::before {
    opacity: 1;
  }
  .contact-form .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(73, 89, 50, 0.4);
  }
  .contact-form .btn--primary:active {
    transform: translateY(0);
  }

  /* Contact page: center the send button on mobile so it isn't covered by left menu */
  .page--contact .form-actions{ display:flex; justify-content:flex-start; }
  @media (max-width: 768px){
    .page--contact .form-actions{ justify-content:center; padding-inline: 16px; }
    .page--contact .form-actions .btn{ margin: 0 auto; }
  }

  @media (max-width: 900px){
    .contact-hero{ margin:80px auto 120px auto; padding:32px 20px }
    .contact-form .form-row{ grid-template-columns:1fr }
  }
  @media (max-width: 600px){
    .contact-hero{ margin:64px auto 100px auto; padding:28px 16px }
  }

  /* Mobile contact section in rail */
  @media (max-width: 700px){
    .panel.contact{
      margin: 0 20px;
      padding: 0;
      min-height: 100vh;
    }
    .contact .copy-head{
      margin: 0 0 20px 0;
      font-size: clamp(36px, 7vw, 48px);
      max-width: calc(100vw - 40px);
      word-wrap: break-word;
    }
    .contact-copy{
      margin: 0 0 60px 0;
      font-size: 16px;
      line-height: 1.6;
      max-width: calc(100vw - 40px);
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    /* Position button similar to desktop */
    .panel.contact .submit{
      position: absolute !important;
      left: 25% !important;
      top: 43% !important;
      transform: translate(-50%, -50%) !important;
      margin-top: 50px !important;
      z-index: 20 !important;
      width: 180px !important;
      height: 180px !important;
      font-size: 42px !important;
    }
    .panel.contact .submit:hover,
    .panel.contact .submit.is-hover{
      transform: translate(-50%, -50%) scale(1.05) !important;
    }
  }

  @media (max-width: 480px){
    .panel.contact{
      margin: 0 16px;
    }
    .contact .copy-head{
      font-size: clamp(30px, 5.5vw, 28px);
      margin-bottom: 16px;
    }
    .contact-copy{
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 50px;
      max-width: calc(110vw - 32px);
    }
    .panel.contact .submit{
      position: absolute !important;
      left: 25% !important;
      top: 43% !important;
      transform: translate(-50%, -50%) !important;
      margin-top: 50px !important;
      z-index: 20 !important;
      width: 160px !important;
      height: 160px !important;
      font-size: 38px !important;
    }
    .panel.contact .submit:hover,
    .panel.contact .submit.is-hover{
      transform: translate(-50%, -50%) scale(1.05) !important;
    }
  }
  .form{display:grid; gap:12px}
  .input,.textarea,.submit{font-family:inherit; font-size:14px}
  .input,.textarea{padding:10px 12px; border:1px solid var(--line); background:#202020; color:var(--ink)}
  .textarea{min-height:120px; resize:vertical}
  .submit{
    width:240px; height:240px;
    border:3px solid transparent;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:48px; line-height:1;
    box-shadow:
      0 20px 60px rgba(0,0,0,.4),
      0 8px 24px rgba(115,147,79,.3),
      inset 0 1px 0 rgba(255,255,255,.15);
    transition:all 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    gap:6px;
    text-decoration: none;
    position:relative;
    overflow:visible;
    /* Animated gradient border */
    background-image:
      linear-gradient(var(--accent), var(--accent)),
      linear-gradient(135deg, #8fb862 0%, var(--accent) 25%, #6b8e4e 50%, var(--accent) 75%, #8fb862 100%);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    animation:buttonPulse 3s ease-in-out infinite;
  }
  
  /* Pulsing glow animation */
  @keyframes buttonPulse{
    0%, 100%{ box-shadow:
      0 20px 60px rgba(0,0,0,.4),
      0 8px 24px rgba(115,147,79,.3),
      0 0 0 0 rgba(115,147,79,.4),
      inset 0 1px 0 rgba(255,255,255,.15); }
    50%{ box-shadow:
      0 20px 60px rgba(0,0,0,.4),
      0 8px 24px rgba(115,147,79,.4),
      0 0 0 12px rgba(115,147,79,0),
      inset 0 1px 0 rgba(255,255,255,.15); }
  }
  
  /* Rotating gradient border */
  .submit::before{
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:linear-gradient(135deg, #8fb862, var(--accent), #6b8e4e, var(--accent), #8fb862);
    background-size:300% 300%;
    z-index:0; /* ensure shimmer is visible above page background */
    animation:borderRotate 4s linear infinite;
    opacity:0;
    transition:opacity 320ms ease;
    pointer-events:none;
  }
  
  @keyframes borderRotate{
    0%{ background-position:0% 50% }
    50%{ background-position:100% 50% }
    100%{ background-position:0% 50% }
  }
  /* Ensure inline SVG icons inherit color and flip to white on hover */
  .submit svg{ width:1em; height:1em; fill:currentColor; stroke:currentColor }
  
  /* Arrow and text styling for submit button */
  .submit__arrow{
    font-size:22px;
    line-height:1;
    display:block;
    transition:transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative; z-index:2; /* keep above overlays */
  }
  .submit__text{
    font-family:'Aileron', 'Poppins', system-ui;
    font-size:22px;
    font-weight:700;
    text-transform:lowercase;
    letter-spacing:-0.01em;
    line-height:1;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    text-decoration: none !important; /* ensure no underline */
    position:relative; z-index:1; /* place above ::before/::after */
  }
  .submit__text > span{ display:block }

  /* Ensure no underline on hover/focus states as well */
  .submit:hover .submit__text,
  .submit:focus .submit__text{ text-decoration: none }
  
  /* Hover state - lift, scale, glow */
  .submit:hover{
    transform:translateY(-8px) scale(1.05);
    box-shadow:
      0 32px 80px rgba(0,0,0,.5),
      0 16px 40px rgba(115,147,79,.5),
      0 0 0 0 rgba(115,147,79,.6),
      inset 0 2px 0 rgba(255,255,255,.2);
    animation:none; /* pause pulse on hover */
  }
  
  .submit:hover::before{ opacity:1 }
  
  .submit:hover .submit__arrow{
    transform:translateY(-3px) rotate(45deg);
    animation:arrowBounce 600ms ease-in-out infinite;
  }
  
  @keyframes arrowBounce{
    0%, 100%{ transform:translateY(-3px) rotate(45deg) }
    50%{ transform:translateY(-6px) rotate(45deg) }
  }
  
  /* Active/click state */
  .submit:active{
    transform:translateY(-4px) scale(1.02);
    transition:all 80ms ease;
  }
  
  /* Sheen overlay on hover (diagonal light sweep) */
  .submit::after{
    content:'';
    position:absolute;
    inset:6px; /* keep inside the border */
    border-radius:50%;
    background: linear-gradient(135deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.08) 32%,
      rgba(0,0,0,0) 60%
    );
    filter: blur(0.2px);
    opacity:0;
    transform: translateY(10px);
    transition: opacity 320ms ease, transform 420ms ease;
    pointer-events:none;
    z-index:0; /* sit beneath text */
  }
  .submit:hover::after{ opacity:1; transform: translateY(0) }

  /* Mobile About layout - handled in mobile.css */

  /* Mobile typography - handled in mobile.css */
  /* Center the contact button in the middle of the contact rail (index) */
  .panel.contact .submit{
    position:absolute; left:50%; top:68%; transform:translate(-50%, -50%);
    margin-top:50px; z-index:3000; /* ensure above any overlays */
    pointer-events:auto; will-change:transform
  }
  /* Preserve centering on hover while adding scale and lift */
  .panel.contact .submit:hover{ 
    transform:translate(-50%, calc(-50% - 8px)) scale(1.05);
  }
  /* JS-driven hover state (when native :hover is intercepted) */
  .panel.contact .submit.is-hover{
    transform:translate(-50%, calc(-50% - 8px)) scale(1.05);
  }
  /* Ensure .is-hover mirrors :hover for sheen + border + arrow */
  .submit.is-hover::before{ opacity:1 }
  .submit.is-hover::after{ opacity:1; transform: translateY(0) }
  .submit.is-hover .submit__arrow{ transform: translateY(-3px) rotate(45deg); animation: arrowBounce 600ms ease-in-out infinite }

  /* Stronger specificity on index contact panel so effects cannot be overridden */
  .panel.contact .submit:hover::before{ opacity:1 !important }
  .panel.contact .submit:hover::after{ opacity:1 !important; transform: translateY(0) !important }
  .panel.contact .submit.is-hover::before{ opacity:1 !important }
  .panel.contact .submit.is-hover::after{ opacity:1 !important; transform: translateY(0) !important }
  .panel.contact .submit:hover .submit__arrow{ transform: translateY(-3px) rotate(45deg) !important; animation: arrowBounce 600ms ease-in-out infinite !important }

  @media (max-width: 768px){
    .panel.contact .submit{ top:72% }
  }
  /* Active state for contact button */
  .panel.contact .submit:active{
    transform:translate(-50%, calc(-50% - 4px)) scale(1.02);
  }
  .submit:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    /* rely on enhanced hover animation above for transform and shadow */
  }
  /* Generic JS-driven hover for non-absolute contexts */
  .submit.is-hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }

  /* Fixed UI */
 /* Legacy small sidebar (hidden; replaced by .left-menu) */
 .sidebar{display:none}
 .sidebar-item{display:none}
  .instructions{position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#0f0f0f; padding:8px 16px; border:1px solid var(--line); font-size:12px; z-index:100; color:var(--muted)}
  .progress-bar{
    position:fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1px);
    left:50%;
    transform:translateX(-50%);
    width:420px;
    height:6px;
    background: rgba(255,255,255,0.1);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
    z-index:110;
  }
  .progress-fill{
    height:100%;
    background: linear-gradient(90deg, var(--accent), #6b8e4e);
    box-shadow: 0 0 20px var(--accent);
    transition: width 0.1s ease-out;
    width:0%;
  }

  /* Services (STACKED layout copied from stack.css, adapted) */
  .services-stack{flex-basis:1400px; border:0; padding:0; display:grid; grid-template-columns:360px 1fr; gap:32px; align-items:start; margin:0 100px; pointer-events:auto; align-self:flex-start}
  /* Ensure parent class 'layer-media' does not disable interactions here */
  .services-stack.layer-media{ pointer-events: auto !important; }
  .services-stack .media-pane{position:relative; padding-left:0; margin-left:-28px}
  .services-stack .media-title{font-size:56px; line-height:1; font-weight:800; margin-bottom: 27px; padding-top: clamp(2rem, 4vh, 4rem);}
  .services-stack .media-stack{position:relative; width:100%; max-width:360px; height:420px}
  .services-stack .media-card{position:absolute; width:320px; height:360px; left:0; top:60px; background:#1a1a1a; border:1px solid var(--line); transform:rotate(-8deg); box-shadow:0 20px 40px rgba(0,0,0,0.45); overflow:hidden}
  /* Premium feel: tiny parallax/nudge and smoother transitions */
  .services-stack .media-card{ transform: rotate(-8deg) translateZ(0); transition: transform 220ms cubic-bezier(.2,.7,0,1), box-shadow 220ms ease; will-change: transform; }
  /* When a service is active, give the Polaroid a subtle lift and deeper shadow */
  .services-stack:has(.service--active) .media-card{ transform: rotate(-8deg) translate3d(2px, -1px, 0); box-shadow:0 24px 56px rgba(0,0,0,0.50); }
  /* On hover anywhere over the services list, apply a gentle nudge */
  .services-stack:has(.services-list:hover) .media-card{ transform: rotate(-8deg) translate3d(1px, -0.5px, 0); box-shadow:0 22px 50px rgba(0,0,0,0.48); }
  /* Show actual image with fade-in */
  .services-stack .media-card img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 300ms ease}
  .services-stack .media-card img.is-visible{opacity:1}
  /* Fallback: ensure default preview image is visible without JS */
  #mediaImage{ opacity: 1; }
  /* Remove placeholder overlay */
  .services-stack .media-card::before,
  .services-stack .media-card::after{display:none; content:none}
  .services-stack .media-accent{position:absolute; width:140px; height:40px; background:#495932; right:-20px; bottom:24px; transform:rotate(-10deg)}

  /* Right services list (STACKED, animated) */
  .services-stack .services-list{position:relative; height:876px; overflow:hidden; padding:0px 16px 0 16px; pointer-events:auto}
  .services-stack .service{position:absolute; height:132px; display:grid; grid-template-columns:56px minmax(0, 1.4fr) minmax(0, 0.8fr) 32px; align-items:center; gap:12px; padding:10px 20px; border:1px solid #1d1d1d; background:rgba(15,15,15,0.92); border-radius:10px; left:14px; right:14px; overflow:hidden; margin-bottom:4px; pointer-events:auto; z-index:1; cursor:pointer;
    /* animation vars set by JS */
    --ty: 0px; --tx: 0px; --alpha: 0; --bg: none;
    transform: translateY(var(--ty)) translateX(var(--tx)); opacity: var(--alpha);
    will-change: transform, opacity; transition: transform 320ms cubic-bezier(.2,.7,0,1), opacity 320ms ease-out, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    background-repeat:no-repeat; background-position:center; background-size:cover;
  }
  .services-stack .service__row{display:contents}
  .services-stack .service__num{font-family:"Inter";color:#bdbdbd; font-weight:700; font-size:12px; justify-self:start}
  .services-stack .service__title{font-family:"Aileron";font-size:clamp(20px, 2vw, 26px); line-height:1.2; font-weight:800; color:#d9d9d9; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; margin:0}
  .services-stack .service__desc{font-family:"Inter";color:var(--muted); font-size:15px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; margin-left: -90%}
  .services-stack .service__cta{font-family:"Inter";justify-self:end; font-size:24px; color:#9a9a9a; transition: color 180ms ease, transform 220ms cubic-bezier(.2,.7,0,1)}
  .services-stack .service:hover{
    /* No background overlay on card hover */
    background-image: none !important;
    border-color:#3a3a3a; box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  /* JS-driven hover fallback when overlay blocks pointer events (no background) */
  .services-stack .service.service--hover{
    background-image: none !important;
    border-color:#3a3a3a; box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  .services-stack .service:hover .service__title{color:#ffffff}
  .services-stack .service:hover .service__cta{color:#ffffff; transform:translateX(6px)}

  /* Responsive tweaks matching stack.css */
  @media (max-width: 1400px){
    .services-stack{grid-template-columns:320px 1fr}
    .services-stack .service__desc{ margin-left: -100%; }
  }
  @media (max-width: 1200px){
    .services-stack{grid-template-columns:1fr}
    /* Show the real heading element; hide the image stack */
    .services-stack .media-pane{display:block; padding-left:0; margin-left:0}
    .services-stack .media-title{font-size:40px; line-height:1; font-weight:800; margin:8px 0 12px 6px}
    .services-stack .media-stack{display:none}
    /* Disable pseudo heading when real title is visible */
    .services-stack .services-list::before{display:none}
    .services-stack .service{grid-template-columns:64px 1.8fr 0.7fr 48px}
  }
  @media (max-width: 900px){
    .services-stack .service{grid-template-columns:56px 1fr 44px; min-height:128px; padding:10px 20px}
    .services-stack .service__title{font-size:clamp(18px, 5vw, 22px)}
    .services-stack .service__desc{display:none}
    .services-stack .media-title{font-size:36px; margin:6px 0 12px 4px}
  }
  
  /* Mobile optimization: keep desktop stacking, adjust sizing */
  @media (max-width: 720px){
    .services-stack{
      margin: 0 20px;
      padding: 0;
      max-width: 100vw;
      box-sizing: border-box;
    }
    /* Spacing between intro copy and cards */
    #services + .services-stack{
      margin-top: 40px;
    }
    /* Show the heading container on mobile */
    .services-stack .media-pane{display: block; padding-left: 0; margin-left: 0;}
    .services-stack .media-stack{display: none;}
    .services-stack .services-list{
      padding: 0 16px; /* remove extra top padding; real title is visible */
      max-width: 100%;
      box-sizing: border-box;
      position: relative;
    }
    .services-stack .media-title{ font-size: clamp(26px, 7vw, 32px); margin: 0 0 16px 0; padding-top: 0; }
    .services-stack .service{
      left: 16px;
      right: 16px;
      height: 100px;
      min-height: 100px;
      grid-template-columns: 56px 1fr;
      padding: 16px 20px;
      max-width: calc(100vw - 72px);
      box-sizing: border-box;
      margin-bottom: 4px;
    }
    .services-stack .service__num{
      font-size: 15px;
    }
    .services-stack .service__title{
      font-size: clamp(20px, 5vw, 26px);
      line-height: 1.3;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .services-stack .service__desc{display: none;}
    .services-stack .service__cta{display: none;}
  }
  
  @media (max-width: 480px){
    .services-stack{
      margin: 0 16px;
      max-width: 100vw;
      box-sizing: border-box;
    }
    
    .services-stack .media-title{ 
      font-size: clamp(24px, 6.5vw, 28px); 
      margin: 0 0 14px 0; 
    }
    
    .services-stack .services-list{
      padding: 0 12px;
      max-width: 100%;
      box-sizing: border-box;
    }
    
    .services-stack .service{
      left: 12px;
      right: 12px;
      height: 95px;
      min-height: 95px;
      padding: 14px 18px;
      grid-template-columns: 50px 1fr;
      max-width: calc(100vw - 56px);
      box-sizing: border-box;
      margin-bottom: 4px;
    }
    .services-stack .service__num{
      font-size: 14px;
    }
    .services-stack .service__title{
      font-size: clamp(18px, 4.8vw, 22px);
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
  @media (min-width: 1400px){
    .services-stack{grid-template-columns:320px 1fr; gap:40px}
    .services-stack .services-list{padding-right:0; margin-left: 25px;}
  }


  /* HERO Section */

  
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:inherit;}

/* Optional: solid linear gradient background (not layered).
   Activate by adding class "bg--gradient" to the <body> element. */
body.bg--gradient{
  /* Single, solid gradient — no stacking of multiple gradients */
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg) 38%, var(--bg-end) 100%);
  color: var(--ink);
}
/* Disable texture overlay when gradient theme is active to avoid a layered look */
body.bg--gradient::before{ display:none; }
/* Also disable the body texture when studio light is on to avoid cross-layer blending */
body.studio-light::before{ display:none; }

/* Optional: single-gradient "studio light" spotlight anchored to viewport */
/* Disable the body-based overlay to avoid duplication */
body.studio-light::after{ display:none !important; }

/* Apply the light on the fixed .viewport so it travels with content and avoids fixed-body flicker */
body.studio-light .viewport{ isolation:isolate; }
body.studio-light .viewport::before{
  content: "";
  position: absolute;
  /* Oversize so edges remain off-screen */
  inset: -12vmax;
  pointer-events: none;
  z-index: 0; /* under .viewport children */
  /* Single radial gradient — with sRGB fallback and oklab enhancement */
  /* Fallback (sRGB) */
  background: radial-gradient(
    farthest-corner at var(--light-x) var(--light-y),
    rgba(255,255,255, var(--light-strong)) 0%,
    rgba(255,255,255, calc(var(--light-strong) * 0.5)) 22%,
    rgba(255,255,255, var(--light-soft)) 46%,
    rgba(255,255,255, 0.018) 74%,
    rgba(255,255,255, 0.003) 98%,
    rgba(255,255,255, 0) 100%
  );
  /* Progressive enhancement (oklab, smoother perceptually) */
  background: radial-gradient(
    in oklab, farthest-corner at var(--light-x) var(--light-y),
    rgba(255,255,255, var(--light-strong)) 0%,
    rgba(255,255,255, calc(var(--light-strong) * 0.5)) 22%,
    rgba(255,255,255, var(--light-soft)) 46%,
    rgba(255,255,255, 0.018) 74%,
    rgba(255,255,255, 0.003) 98%,
    rgba(255,255,255, 0) 100%
  );
  mix-blend-mode: normal;
  /* Stabilize compositing */
  backface-visibility: hidden;
  contain: paint;
  /* Avoid over-promoting layers to reduce flicker */
}

.hero{min-height:calc(var(--vh, 1vh) * 100); height:calc(var(--vh, 1vh) * 100); display:flex; align-items:center; overflow:visible}
.panel--hero{ overflow: visible; }
.hero__inner{position:relative; width:100%; height:100%; padding:40px 32px; display:grid; align-items:center; grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); gap:32px}

/* Left */
.badge{display:inline-block; padding:8px 12px; border:1px solid var(--line); color:var(--muted); border-radius:6px; font-size:12px; letter-spacing:.08em; text-transform:lowercase;}
.hero__heading{margin:12px 0 6px; line-height:.9; font-weight:800; text-transform:lowercase; letter-spacing:-0.02em; font-family:'Aileron','Poppins',system-ui}
.hero__heading .line{display:block; font-size:clamp(44px, 12vh, 136px); letter-spacing:-0.03em}
.hero__copy{max-width:60ch; font-size:18px; color:var(--muted); line-height:1.6}
.hero__copy p{margin:0 0 14px}
.hero__cta{margin-top:16px; display:flex; gap:12px; position:relative; z-index:20}
.hero__cta .btn{ pointer-events:auto }
/* Bring the entire left hero content above the overlay as well */
.hero__left{ position:relative; z-index:20 }
.btn{font-family:"Inter";display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:8px; border:1px solid var(--line); color:#d9d9d9; text-decoration:none; font-weight:600; background:#151515; cursor:pointer; transition: background-color 160ms linear, border-color 160ms linear, color 160ms linear, transform 120ms ease, box-shadow 180ms ease}
.btn--primary{background:var(--accent); color:var(--text); border-color:transparent}
/* Invert colors on hover to signal interactivity */
.btn:not(.btn--primary):hover,
.btn:not(.btn--primary).is-hover{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25);
  background: var(--accent);
  border-color: transparent;
  color: #111;
}
.btn--primary:hover,
.btn--primary.is-hover{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25);
  background: transparent; /* invert to outline */
  border-color: #fff;
  color: #fff;
}
/* Visible keyboard focus */
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Right visual (dark style) */
.hero__right{position:relative; overflow:visible}
/* Allow the visual to overflow for growth/shadow, but clip the inner image for rounded corners */
.visual{position:relative; height:min(48vh, 520px); border-radius:14px; background:#121212; border:1px solid var(--line); overflow:visible; box-shadow:0 30px 70px rgba(0,0,0,.35); z-index:4}
.visual__img{position:absolute; inset:0; border-radius:inherit; overflow:hidden}
.visual__img{position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), url('./Images/IMG_57442 (1).jpeg'); background-size:cover; background-position:center; filter:saturate(.95) contrast(1.05) brightness(.9)}
.visual__ring{position:absolute; width:560px; height:560px; border-radius:50%; border:40px solid var(--ring); left:-160px; top:-120px; filter:blur(8px)}
.visual__accent{position:absolute; bottom:22px; right:28px; font-family:var(--accent-serif); font-size:72px; color:#f5f5f5; opacity:.08; letter-spacing:.04em}

/* Typographic accents matching reference */
  .type-serif{font-family:var(--accent-serif); font-size:clamp(40px, 9vh, 120px); line-height:1; letter-spacing:.02em; color:#fff; opacity:.1; margin:6px 0 -2px}
  .type-star{position:absolute; top:18px; left:52%; transform:translateX(-10%); font-size:clamp(36px, 8vh, 96px); color:#ffffff; opacity:.16; pointer-events:none}

/* Scroll hint */
.scrollhint{position:absolute; left:24px; bottom:24px; writing-mode:vertical-rl; text-orientation:mixed; color:#7e7e7e; font-size:12px; letter-spacing:.4em}

/* Responsive */
@media (max-width: 1100px){
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
  .visual{height:min(40vh, 420px)}
}
@media (max-width: 700px){
  .hero__inner{padding:calc(env(safe-area-inset-top, 0px) + 22px) 120px calc(env(safe-area-inset-bottom, 0px) + 22px) 8px; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:12px; align-items:center; margin-left: -49px;}
  .hero__heading .line{font-size:clamp(61px, 8.8vh, 104px)}
  .type-serif{font-size:clamp(24px, 7vh, 64px)}
  .hero__left{ padding-right: 8px; }
  .hero__right{justify-self:center; align-self:center; padding-left: 12px; }
  .visual{width:100%; max-width:420px; aspect-ratio:16 / 9; height:auto; transform:translateX(0)}
  .visual__img{background-position:center center}
  .hero__cta{flex-wrap:nowrap; white-space:nowrap; gap:8px}
  .hero__cta .btn{padding:9px 12px; font-size:13px}
}
@media (max-width: 480px){
  .hero__inner{padding:calc(env(safe-area-inset-top, 0px) + 18px) 100px calc(env(safe-area-inset-bottom, 0px) + 18px) 8px; grid-template-columns:1fr 1fr; column-gap:20px; align-items:center; margin-left: -39px;}
  .hero__heading .line{font-size:clamp(63px, 5.2vh, 48px)}
  .hero__left{ padding-right: 6px; }
  .hero__right{ justify-self:center; align-self:center; padding-left: 9vh; }
  .visual{width:100%; max-width:380px; aspect-ratio:16 / 9; height:auto; transform:translateX(0)}
  .visual__img{background-position:center center}
  .hero__cta{flex-wrap:nowrap; white-space:nowrap; gap:6px}
  .hero__cta .btn{padding:8px 11px; font-size:12.5px}
}

/* Accent font utilities and rules */
.accent-serif{ font-family: var(--accent-serif) !important; font-weight:400; letter-spacing:.01em }
.hero__heading .accent-serif{ font-size:1.02em; font-family: var(--accent-serif) !important; font-style: italic }
strong, b{ font-family: var(--accent-serif) !important; letter-spacing:.005em }

/* Ensure accent wins over paragraph font in About copy (specificity beats .copy-cols p) */
.about .copy-cols .accent-serif,
.about .copy-cols i.accent-serif,
.about .copy-cols em.accent-serif,
.about .copy-cols b,
.about .copy-cols strong{
  font-family: var(--accent-serif) !important;
}

/* ================= Case Studies v2 (merged from case-studies-2.css) ================= */
/* Grid spacing */
.cs2 .rail{ gap:32px }

/* Hide tag and text on hover so logo dominates */
.cs2 .case-card:hover .case-tag,
.cs2 .case-card.is-hover .case-tag{ opacity:0; transition:opacity 180ms ease }
.cs2 .case-card:hover .case-card__bottom,
.cs2 .case-card.is-hover .case-card__bottom{ opacity:0 !important; transition:opacity 180ms ease }

/* Card sizing tweaks */
.cs2 .case-card{ position:relative; width:357px !important; flex-basis:378px !important; aspect-ratio:5/8; border-radius:20px !important; box-shadow:0 28px 70px rgba(0,0,0,.45) !important }

/* Center logos relative to the media area itself */
.cs2 .case-card .case-card__top{ position:relative !important; z-index:1; overflow:visible }

/* Location pill (hidden on v2) */
.cs2 .case-card .case-tag{ position:absolute; top:16px; left:16px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.96); color:#111; font:600 11px/1 'Inter', system-ui; letter-spacing:.08em; text-transform:uppercase; z-index:4; box-shadow:0 6px 14px rgba(0,0,0,.18); display:none !important }

/* Centered hover logo (raw transparent logo only) */
.cs2 .case-card .case-card__logo{
  position:absolute; inset:0; /* fill media area */
  background:transparent !important; border-radius:0 !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center; z-index:4; pointer-events:none; overflow:visible !important;
  opacity:0; transition:opacity 220ms ease
}
.cs2 .case-card .case-card__logo img{
  width:min(75%, 630px); height:auto; object-fit:contain; max-width:none;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.35)); padding:0 !important
}

/* Reveal logo; enlarge image slightly on hover */
.cs2 .case-card:hover .case-card__logo,
.cs2 .case-card.is-hover .case-card__logo{ opacity:1 }
.cs2 .case-card:hover .case-card__logo img,
.cs2 .case-card.is-hover .case-card__logo img{ width:min(90%, 760px) }

/* Green tint under logo on hover */
.cs2 .case-card .case-card__top::before{ content:""; position:absolute; inset:0; pointer-events:none; background: var(--accent); opacity:0; transition: opacity 220ms ease; z-index:1 }
.cs2 .case-card:hover .case-card__top::before,
.cs2 .case-card.is-hover .case-card__top::before{ opacity:1 }
.cs2 .case-card .case-card__top::after{ opacity:.9 !important }

/* Bottom block is always visible in v2 (non-hover behavior override) */
.cs2 .case-card .case-card__bottom{ position:absolute; left:0; right:0; bottom:0; padding:22px 26px 24px 22px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.48) 36%, rgba(0,0,0,0.86) 100%) !important; opacity:1 !important; transform:none !important }
.cs2 .case-card .case-card__brand{ font-family:'Aileron','Poppins',system-ui; font-weight:800; letter-spacing:.01em; font-size:clamp(24px, 3.8vw, 40px); color:#ffffff; opacity:.7; text-shadow:0 10px 26px rgba(0,0,0,.55) }
.cs2 .case-card .case-card__desc{ font-family:'Inter','Poppins',system-ui; margin-top:8px; color:#e3e3e3; opacity:.92; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

@media (max-width: 900px){
  .cs2 .case-card{ width:86vw !important; flex-basis:86vw !important }
  .cs2 .case-card .case-card__bottom{ padding-left:22px }
}

  /* ================= Left Fixed Menu ================= */
  .left-menu{
    position:fixed; left:0; top:0; bottom:0; width:84px; height:100vh;
    display:flex; flex-direction:column; align-items:center;
    padding:14px 6px; gap:12px; z-index:120;
    border-right:1px solid var(--line);
    background:rgba(18,18,18,0.66); backdrop-filter: blur(4px);
  }
  /* Vertical logo presentation (no card) */
  .left-menu__logo{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:auto; padding:0; margin:50px 0 6px;
    border:0; border-radius:0; background:transparent; overflow:visible;
  }
  .left-menu__logo img{
    width:81px; height:auto; display:block; object-fit:contain;
    transform:rotate(-90deg); transform-origin:center;
  }
  .left-menu__toggle{
    width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
    background:#1a1a1a; color:#cfcfcf; cursor:pointer; font-family:"Inter"; font-weight:700;
    line-height:1; display:flex; align-items:center; justify-content:center;
    /* Center the + button vertically within the left menu */
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    margin:0;
  }
  .left-menu__toggle:hover{ color:#fff; border-color:#3a3a3a }
  .left-menu__spacer{flex:1}
  .left-menu__socials{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:8px}
  .sm{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#1a1a1a; color:#b7b5b0; display:flex; align-items:center; justify-content:center; font-family:"Inter"; font-size:11px; text-decoration:none}
  .sm:hover{color:#fff; border-color:#3a3a3a}

  /* Flyout menu (self-contained within left-menu; slides out to the right) */
  .left-flyout{
    position:absolute; left:100%; top:50%; width:220px;
    transform: translateY(-50%) translateX(8px) scale(0.98);
    border:1px solid var(--line); border-radius:10px; padding:12px;
    background:#0f0f0f; box-shadow:0 18px 46px rgba(0,0,0,.35);
    opacity:0; pointer-events:none; z-index:130;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,0,1);
  }
  .left-flyout ul{list-style:none; margin:0; padding:0}
  .left-flyout li + li{margin-top:6px}
  .left-flyout a{display:block; padding:10px 12px; border:1px solid #1d1d1d; border-radius:8px; color:#d9d9d9; text-decoration:none; background:#151515}
  /* Standardize left menu font to Inter */
  .left-flyout a,
  .left-flyout .submenu a{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: lowercase;
  }
  /* Use site accent green for hover/active */
  .left-flyout a:hover,
  .left-flyout a:focus{
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }
  .left-flyout a.active{
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }
  .left-menu.is-open .left-flyout{opacity:1; pointer-events:auto; transform: translateY(-50%) translateX(0) scale(1)}

  /* Submenu flyout under Services (desktop) */
  .left-flyout li{ position: relative; }
  .left-flyout .submenu{
    position:absolute; left:100%; top:0; width:220px;
    transform: translateX(8px) scale(0.98);
    border:1px solid var(--line); border-radius:10px; padding:12px;
    background:#0f0f0f; box-shadow:0 18px 46px rgba(0,0,0,.35);
    opacity:0; pointer-events:none; z-index:140;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,0,1);
  }
  .left-flyout .submenu li + li{ margin-top:6px; }
  .left-flyout .submenu a{ display:block; padding:10px 12px; border:1px solid #1d1d1d; border-radius:8px; color:#d9d9d9; text-decoration:none; background:#151515; }
  .left-flyout .submenu a:hover,
  .left-flyout .submenu a:focus,
  .left-flyout .submenu a.active{ border-color: var(--accent); background: var(--accent); color:#fff; }
  /* Reveal submenu on hover/focus of parent li */
  .left-flyout li:hover > .submenu,
  .left-flyout li:focus-within > .submenu{ opacity:1; pointer-events:auto; transform: translateX(0) scale(1); }

  /* ================= Mobile Hanging Tab Menu ================= */
  @media (max-width: 700px){
    /* On mobile: submenu expands inline (pushes content down) instead of flyout */
    .left-flyout .submenu{
      position: static;
      width: auto;
      transform: none;
      border: none;
      border-radius: 0;
      padding: 0;
      margin-top: 8px;
      margin-left: 12px;
      background: transparent;
      box-shadow: none;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      pointer-events: none;
      transition: opacity 220ms ease, max-height 280ms ease;
    }
    .left-flyout li:hover > .submenu,
    .left-flyout li:focus-within > .submenu,
    .left-flyout li.submenu-open > .submenu{
      opacity: 1;
      max-height: 200px;
      pointer-events: auto;
    }
    .left-flyout .submenu a{
      padding: 8px 10px;
      font-size: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
    }

    .left-menu{
      width: 280px;
      left: -280px; /* Hide completely off-screen */
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      transition: left 320ms cubic-bezier(0.4, 0, 0.2, 1);
      border-right: 1px solid var(--line);
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
      background: rgba(18,18,18,0.95);
      backdrop-filter: blur(12px);
      box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    }
    
    /* Create the "tab" effect - positioned at bottom left */
    .left-menu::after{
      content: '';
      position: absolute;
      right: -60px;
      top: auto;
      bottom: max(env(safe-area-inset-bottom, 0px), 20px);
      width: 60px;
      height: 60px;
      background: rgba(18,18,18,0.95);
      border: 1px solid var(--line);
      border-left: none;
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
      box-shadow: 2px 0 12px rgba(0,0,0,0.3);
      pointer-events: none;
      transition: right 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Position tab at bottom left with hamburger icon */
    .left-menu__logo{
      position: absolute;
      right: -60px;
      top: auto;
      bottom: max(env(safe-area-inset-bottom, 0px), 20px);
      margin: 0;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 121;
      cursor: pointer;
      transition: right 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Hide the logo image on mobile */
    .left-menu__logo img{
      display: none;
    }
    
    /* Hamburger menu icon */
    .left-menu__logo::before{
      content: '';
      position: absolute;
      width: 24px;
      height: 2px;
      background: #cfcfcf;
      box-shadow: 
        0 -7px 0 #cfcfcf,
        0 7px 0 #cfcfcf;
      transition: all 0.3s ease;
    }
    
    /* Transform to X when open */
    .left-menu.is-open .left-menu__logo::before{
      box-shadow: none;
      transform: rotate(45deg);
    }
    
    .left-menu.is-open .left-menu__logo::after{
      content: '';
      position: absolute;
      width: 24px;
      height: 2px;
      background: #cfcfcf;
      transform: rotate(-45deg);
    }
    
    /* Adjust toggle button position - hide it on mobile, use logo tab instead */
    .left-menu__toggle{
      display: none;
    }
    
    /* When menu is open, slide it in */
    .left-menu.is-open{
      left: 0;
    }
    
    /* Adjust tab position when open */
    .left-menu.is-open::after{
      right: -60px;
    }
    
    .left-menu.is-open .left-menu__logo{
      right: -60px;
    }
    
    /* Adjust flyout for mobile */
    .left-flyout{
      position: static;
      transform: none;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      width: 100%;
      margin-top: 20px;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      transition: opacity 280ms ease, max-height 280ms ease;
    }
    
    .left-menu.is-open .left-flyout{
      opacity: 1;
      max-height: 600px;
      padding: 12px;
      transform: none;
    }
    
    /* Adjust socials position */
    .left-menu__socials{
      margin-top: auto;
      padding-bottom: 20px;
      align-items: flex-start;
      padding-left: 12px;
      width: 100%;
    }
    
    .left-menu__socials .sm{
      margin-left: 0;
      margin-right: auto;
    }
  }

/* Mobile overrides are now handled in mobile.css */