@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500&family=Noto+Music&display=swap');
    @font-face{
      font-family:'ES Build';
      src:
        local('ES Build'),
        local('ESBuild-Semibold'),
        url('../assets/fonts/ESBuild-Semibold.otf') format('opentype');
      font-weight:600;
      font-style:normal;
      font-display:swap;
    }
    @font-face{
      font-family:'Necto Mono';
      src:
        local('Necto Mono Regular'),
        local('necto-mono-regular'),
        local('NectoMono-Regular'),
        url('../assets/fonts/NectoMono-Regular.otf') format('opentype');
      font-weight:400;
      font-style:normal;
      font-display:swap;
    }
    :root{
      --bg:#E5E2DC;           /* neutral light */
      --panel:rgba(0,0,0,.04);
      --fg:#1F140A;           /* warm near-black */
      --muted:#675039;        /* warm dark */
      --line:rgba(15,15,15,.14);
      --accent:#9A6B3A;       /* amber-brown */
      --accent2:#C9C0B5;      /* soft neutral */
      --nav-bg:rgba(229,226,220,.24);
      --nav-border:rgba(0,0,0,.08);
      --grid-dot:rgba(15,15,15,.18);
      --theme-transition:1.45s;
      --theme-ease:cubic-bezier(.2,.82,.2,1);
      --cursor-clef:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='none'/%3E%3Ctext x='6' y='25' font-size='24' fill='%23120f0c'%3E%F0%9D%84%A2%3C/text%3E%3C/svg%3E") 8 8, auto;
      --fs-hero:clamp(30px, 4.4vw, 56px);
      --fs-ui:14px;
      --fs-body:17.5px;
      --reel-max-vw:90.2vw;
      --reel-max-px:1371px;
    }
    :root[data-theme="dark"]{
      --bg:#090909;
      --panel:rgba(255,255,255,.035);
      --fg:#F3EFE9;
      --muted:#C7B9A8;
      --line:rgba(243,239,233,.16);
      --accent:#D8AF7C;
      --accent2:#3A2E22;
      --nav-bg:rgba(10,10,10,.78);
      --nav-border:rgba(243,239,233,.1);
      --grid-dot:rgba(243,239,233,.06);
      --cursor-clef:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='none'/%3E%3Ctext x='6' y='25' font-size='24' fill='%23F3EFE9'%3E%F0%9D%84%A2%3C/text%3E%3C/svg%3E") 8 8, auto;
    }
    :root[data-theme="dark"] .bg-black\/5{background-color:rgba(243,239,233,.08)!important;}
    :root[data-theme="dark"] .bg-black\/10{background-color:rgba(243,239,233,.1)!important;}
    :root[data-theme="dark"] .bg-black\/40{background-color:rgba(243,239,233,.14)!important;}
    :root[data-theme="dark"] .border-black\/10{border-color:rgba(243,239,233,.24)!important;}
    #work .bg-black\/5,
    #competence .bg-black\/5,
    #music .bg-black\/5,
    #contact .bg-black\/5{
      background-color:rgba(0,0,0,.02)!important;
    }
    #work .border-black\/10,
    #competence .border-black\/10,
    #music .border-black\/10,
    #contact .border-black\/10{
      border-color:rgba(15,15,15,.11)!important;
    }
    :root[data-theme="dark"] #work .bg-black\/5,
    :root[data-theme="dark"] #competence .bg-black\/5,
    :root[data-theme="dark"] #music .bg-black\/5,
    :root[data-theme="dark"] #contact .bg-black\/5{
      background-color:rgba(243,239,233,.04)!important;
    }
    :root[data-theme="dark"] #work .border-black\/10,
    :root[data-theme="dark"] #competence .border-black\/10,
    :root[data-theme="dark"] #music .border-black\/10,
    :root[data-theme="dark"] #contact .border-black\/10{
      border-color:rgba(243,239,233,.19)!important;
    }
    body{
      background:var(--bg);
      color:var(--fg);
      font-family:'ES Build',sans-serif;
      font-size:var(--fs-body);
      line-height:1.55;
      overflow-x:hidden;
      min-height:100dvh;
      transition:background-color var(--theme-transition) var(--theme-ease), color var(--theme-transition) var(--theme-ease), text-shadow var(--theme-transition) var(--theme-ease);
      cursor:var(--cursor-clef);
    }
    html{
      background:var(--bg);
    }
    *{
      cursor:var(--cursor-clef);
    }
    input[type="range"]:hover,
    .reel-progress:hover,
    .player-progress:hover{
      cursor:pointer;
    }
    .mono{font-family:'Necto Mono',monospace;}
    h1,h2,h3{font-family:'ES Build',sans-serif;}
    .music-rest{
      font-family:'Noto Music','Bravura','FreeSerif','Segoe UI Symbol','Noto Sans Symbols 2',serif;
      font-weight:400;
      font-style:normal;
    }
    .grid-bg{background-image:none;}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:34px;
      padding:0 14px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--fg);
      background:transparent;
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .btn:hover{border-color:rgba(122,90,58,.65);color:var(--accent);}
    .btn-accent{border-color:rgba(205,161,112,.9);color:var(--accent);}
    .btn-accent:hover{background:rgba(205,161,112,.12);box-shadow:0 0 0 3px rgba(205,161,112,.12);}
    .social-strip{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px;
      margin-top:20px;
    }
    .contact-location{
      margin-top:2.8em;
    }
    .collab-link{
      transition:transform var(--theme-transition) var(--theme-ease), color var(--theme-transition) var(--theme-ease), text-shadow var(--theme-transition) var(--theme-ease);
      display:inline-flex;
    }
    .collab-link:hover{
      transform:scale(1.1);
      color:var(--accent);
      text-shadow:0 0 10px rgba(205,161,112,.18);
    }
    .social-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--line);
      border-radius:28px;
      padding:7px 12px;
      background:rgba(0,0,0,.03);
      color:var(--fg);
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.06em;
      text-transform:uppercase;
      transition:border-color var(--theme-transition) var(--theme-ease), color var(--theme-transition) var(--theme-ease), background-color var(--theme-transition) var(--theme-ease);
    }
    .social-badge:hover{
      border-color:rgba(122,90,58,.65);
      color:var(--accent);
      background:rgba(205,161,112,.08);
    }
    .social-badge svg{
      width:14px;
      height:14px;
      display:block;
      fill:currentColor;
    }
    .theme-icon-btn{
      background:transparent;
      border:1px solid var(--line);
      gap:0;
      padding:0 14px;
      justify-content:center;
    }
    .theme-icon{
      width:20px;
      height:20px;
      display:block;
      position:relative;
      color:#000;
      transition:transform var(--theme-transition) var(--theme-ease), color var(--theme-transition) var(--theme-ease);
      transform:translateX(-8px);
    }
    .theme-icon .theme-moon,
    .theme-icon .theme-sun{
      position:absolute;
      inset:0;
      margin:auto;
    }
    .theme-icon svg{
      width:18px;
      height:18px;
      display:block;
      fill:currentColor;
    }
    .theme-icon .theme-sun{
      fill:none;
      stroke:currentColor;
      stroke-width:1.6;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .theme-icon .theme-sun circle{
      fill:currentColor;
      stroke:none;
    }
    .theme-icon .theme-moon{
      fill:#000;
    }
    :root[data-theme="dark"] .theme-icon .theme-moon{
      fill:currentColor;
    }
    .theme-icon .theme-moon{display:none;}
    .theme-icon .theme-sun{display:block;}
    :root[data-theme="dark"] .theme-icon .theme-moon{display:block;}
    :root[data-theme="dark"] .theme-icon .theme-sun{display:none;}
    :root[data-theme="dark"] .theme-icon-btn{
      border-color:var(--line);
      background:transparent;
    }
    :root[data-theme="dark"] .theme-icon{
      transform:translateX(8px);
      color:var(--fg);
    }
    .site-nav{background:var(--nav-bg);border-bottom:1px solid var(--nav-border);}
    .site-nav,.btn,.bg-black\/5,.bg-black\/10,.bg-black\/40,.border-black\/10{
      transition:background-color var(--theme-transition) var(--theme-ease),border-color var(--theme-transition) var(--theme-ease),color var(--theme-transition) var(--theme-ease),box-shadow var(--theme-transition) var(--theme-ease);
    }
    .section-title{
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.08em;
      text-transform:uppercase;
      line-height:1.35;
    }
    .ui-copy{
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .sr-only{
      position:absolute !important;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }
    .text-xs{font-size:var(--fs-ui)!important;}
    .text-sm,
    .text-base{font-size:var(--fs-body)!important;}
    .text-lg,
    .text-xl,
    .text-2xl,
    .text-3xl,
    .text-4xl{font-size:var(--fs-hero)!important;}
    .hero-list{
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.18em;
      text-transform:uppercase;
      line-height:1.45;
      gap:.35rem .75rem;
    }
    .hero-comp-link{
      color:inherit;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
    }
    .hero-list-sep{
      opacity:.78;
      padding:0 .32em;
    }
    @media (min-width:768px){
      .hero-list{
        font-size:var(--fs-ui);
      }
    }
    .card-title{font-family:'Necto Mono',monospace;font-size:var(--fs-ui);line-height:1.25;letter-spacing:.08em;text-transform:uppercase;}
    .card-copy{font-size:var(--fs-body);line-height:1.7;color:var(--muted);font-family:'Source Sans 3',sans-serif;}
    .card-meta{font-family:'Necto Mono',monospace;font-size:var(--fs-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
    .card-meta-copy{
      font-family:'ES Build',sans-serif;
      text-transform:none;
      letter-spacing:.02em;
      color:var(--fg);
    }
    .bio-copy{
      font-family:'Necto Mono',monospace;
      font-weight:400;
      font-size:calc(var(--fs-body) + 2px);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .intro-copy{font-size:var(--fs-body);line-height:1.7;}
    .intro-copy-tight{font-size:var(--fs-body);}
    .intro-line{
      display:block;
      white-space:nowrap;
    }
    .intro-line:empty{
      display:none;
    }
    @media (max-width: 1100px){
      .intro-copy-tight{font-size:var(--fs-body);}
      .intro-line{white-space:normal;}
    }
  
    /* Sandy background texture */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.3;
      mix-blend-mode:multiply;
      transition:opacity var(--theme-transition) var(--theme-ease), background-image var(--theme-transition) var(--theme-ease);
      background-image:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 38%),
        radial-gradient(circle at 78% 70%, rgba(0,0,0,.09) 0, rgba(0,0,0,0) 42%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
      background-size:cover, cover, 240px 240px;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.13;
      mix-blend-mode:soft-light;
      transition:opacity var(--theme-transition) var(--theme-ease), background-image var(--theme-transition) var(--theme-ease);
      background-image:
        repeating-radial-gradient(circle at 50% 50%, rgba(86,58,30,.18) 0 1px, transparent 1px 6px);
      background-size:100% 100%;
    }
    :root[data-theme="dark"] body::before{
      opacity:.44;
      mix-blend-mode:soft-light;
      background-image:
        radial-gradient(circle at 22% 24%, rgba(255,120,70,.12) 0, rgba(255,120,70,0) 34%),
        radial-gradient(circle at 76% 78%, rgba(255,72,20,.14) 0, rgba(255,72,20,0) 38%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
      background-size:cover, cover, 180px 180px;
    }
    :root[data-theme="dark"] body::after{
      opacity:.22;
      mix-blend-mode:multiply;
      background-image:
        repeating-radial-gradient(circle at 50% 50%, rgba(255,110,50,.18) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 35% 18%, rgba(255,88,35,.12), transparent 56%),
        radial-gradient(circle at 84% 74%, rgba(255,140,60,.1), transparent 58%);
    }
    body > *{ position:relative; z-index:1; }


    /* Click-to-load video placeholders (prevents embed errors while tweaking) */
    .video-lite{position:relative;display:block;}
    .video-lite img{filter:saturate(.92) contrast(1.05);}
    .video-lite--contain{
      background:#000;
    }
    .video-lite--contain img{
      object-fit:contain !important;
      object-position:center center !important;
      background:#000;
    }
    .video-lite__btn{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));}
    .video-lite__ring{position:absolute;width:176px;height:176px;border-radius:999px;border:1px solid rgba(232,234,233,.22);box-shadow:0 0 0 4px rgba(205,161,112,.10);}
    .video-lite__play{width:0;height:0;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:36px solid var(--accent);transform:translateX(6px);}
    .video-lite:hover .video-lite__ring{border-color:rgba(205,161,112,.55);box-shadow:0 0 0 6px rgba(205,161,112,.12);}
    .reel-wrap{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      background:#000;
    }
    .reel-wrap > video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      display:block;
      object-fit:cover;
      object-position:center center;
      margin:0;
    }
    #reel-video{
      width:100% !important;
      height:100% !important;
      max-width:none !important;
      max-height:none !important;
      object-fit:cover !important;
      object-position:center center !important;
      margin:0 !important;
    }
    #reel-video:hover{
      cursor:pointer !important;
    }
    .reel-controls{
      position:absolute;
      left:12px;
      right:12px;
      bottom:12px;
      display:flex;
      align-items:center;
      gap:10px;
      z-index:2;
      opacity:1;
      transition:opacity .25s ease;
    }
    .reel-controls.is-hidden{
      opacity:0;
      pointer-events:none;
    }
    .reel-progress-wrap{
      flex:1;
      height:21px;
      display:flex;
      align-items:center;
      cursor:pointer;
      touch-action:none;
    }
    .reel-progress-wrap.is-hidden{
      opacity:0;
      pointer-events:none;
    }
    .reel-progress{
      width:100%;
      height:7px;
      border-radius:28px;
      background:rgba(255,255,255,.24);
      overflow:hidden;
      cursor:var(--cursor-clef);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .reel-progress-fill{
      height:100%;
      width:0%;
      background:var(--accent);
    }
    .video-volume{
      width:90px;
      --vol:60%;
      height:7px;
      background:transparent;
      -webkit-appearance:none;
      appearance:none;
      cursor:var(--cursor-clef);
    }
    .video-volume.is-hidden{
      opacity:0;
      pointer-events:none;
    }
    .video-volume:focus{
      outline:none;
    }
    .video-volume::-webkit-slider-runnable-track{
      height:7px;
      border-radius:28px;
      background:linear-gradient(90deg, var(--accent) var(--vol), rgba(255,255,255,.24) var(--vol));
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .video-volume::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--accent);
      border:1px solid rgba(0,0,0,.2);
      margin-top:-2.5px;
      box-shadow:0 2px 8px rgba(0,0,0,.25);
    }
    .video-volume::-moz-range-track{
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.24);
    }
    .video-volume::-moz-range-thumb{
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--accent);
      border:1px solid rgba(0,0,0,.2);
      box-shadow:0 2px 8px rgba(0,0,0,.25);
    }
    .video-volume::-moz-range-progress{
      height:7px;
      border-radius:999px;
      background:var(--accent);
    }
    .reel-volume{
      width:34px;
      height:34px;
      border:1px solid var(--line);
      border-radius:999px;
      display:grid;
      place-items:center;
      background:rgba(0,0,0,.28);
      color:#f3efe9;
      font-size:var(--fs-ui);
      line-height:1;
      z-index:2;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      transition:opacity .2s ease, transform .2s ease;
    }
    .reel-volume.is-hidden{
      opacity:0;
      transform:scale(.92);
    }
    .reel-volume.attention{
      animation:reel-pop .85s ease-in-out infinite;
      transform-origin:center bottom;
    }
    @keyframes reel-pop{
      0%, 50%, 100%{transform:translateY(0) scale(1);}
      58%{transform:translateY(-16px) scale(1.2);}
      66%{transform:translateY(0) scale(1);}
      74%{transform:translateY(-9px) scale(1.12);}
    }
    .reel-volume svg{
      width:16px;
      height:16px;
      display:block;
    }
    .reel-volume .mute-slash{display:none;}
    .reel-volume.is-muted .mute-slash{display:block;}



    .muted{color:var(--muted);}
    section[id]{scroll-margin-top:122px;}
    @media (min-width:768px){
      section[id]{scroll-margin-top:136px;}
    }
    .mobile-menu-panel{
      position:fixed;
      inset:0;
      z-index:60;
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
      padding:0;
    }
    .mobile-menu-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.35);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
    }
    .mobile-menu-sheet{
      position:relative;
      width:min(92vw, 360px);
      margin:14px 12px 12px auto;
      border:1px solid var(--line);
      border-radius:16px;
      background:var(--bg);
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .mobile-menu-close{
      align-self:flex-end;
      padding-inline:12px;
    }
    .mobile-menu-links{
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:stretch;
    }
    .mobile-menu-links .btn{
      width:100%;
      justify-content:center;
    }
    .mobile-sheet-controls{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
    }
    .mobile-menu-fab{
      position:fixed;
      right:max(12px, env(safe-area-inset-right));
      bottom:max(12px, env(safe-area-inset-bottom));
      z-index:62;
      padding-inline:14px;
      min-height:42px;
      box-shadow:0 8px 24px rgba(0,0,0,.18);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      display:none;
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
    }
    .mobile-menu-fab.is-active{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }
    body.mobile-menu-open .mobile-menu-fab{
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
    }
    body.mobile-menu-open{
      overflow:hidden;
    }
    .logo-marquee{
      position:relative;
      overflow:hidden;
      mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      max-width:min(var(--reel-max-vw), var(--reel-max-px));
      margin:0 auto;
    }
    .logo-marquee::before,
    .logo-marquee::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      width:62px;
      pointer-events:none;
      z-index:2;
      filter:blur(4px);
      opacity:.72;
    }
    .logo-marquee::before{
      left:-18px;
      background:linear-gradient(to right, var(--bg), rgba(0,0,0,0));
    }
    .logo-marquee::after{
      right:-18px;
      background:linear-gradient(to left, var(--bg), rgba(0,0,0,0));
    }
    :root[data-theme="dark"] .logo-marquee::before{
      background:linear-gradient(to right, rgba(20,20,20,.42), rgba(20,20,20,0));
      opacity:.48;
    }
    :root[data-theme="dark"] .logo-marquee::after{
      background:linear-gradient(to left, rgba(20,20,20,.42), rgba(20,20,20,0));
      opacity:.48;
    }
    .logo-track{
      display:flex;
      align-items:center;
      gap:28px;
      width:max-content;
      animation:logo-scroll 50s linear infinite;
      will-change:transform;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;
      padding:8px 0;
    }
    .logo-item{
      --logo-scale:1;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      width:132px;
      height:52px;
    }
    .logo-img{
      max-width:100%;
      max-height:32px;
      width:auto;
      height:auto;
      object-fit:contain;
      opacity:.9;
      filter:grayscale(100%) contrast(1.04) brightness(.46);
      transition:filter var(--theme-transition) var(--theme-ease), opacity var(--theme-transition) var(--theme-ease), transform var(--theme-transition) var(--theme-ease);
      transform:scale(var(--logo-scale));
    }
    .logo-item:hover .logo-img{
      opacity:.9;
      transform:scale(var(--logo-scale));
    }
    :root[data-theme="dark"] .logo-img{
      filter:grayscale(100%) invert(1) brightness(1.16) contrast(1.02);
    }
    .work-card{
      display:flex;
      flex-direction:column;
      height:100%;
    }
    .work-card-media{
      aspect-ratio:5/2.7;
    }
    .work-card-media img{
      object-position:center top;
    }
    .work-card-body{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:6px;
      padding:12px 14px 14px;
      min-height:0;
      flex:1;
    }
    .work-card-body .card-copy{margin-top:0;}
    .work-card-body .card-meta{
      margin-top:auto;
      margin-bottom:3px;
    }
    .card-meta.no-wrap{
      white-space:nowrap;
    }
    .section-splash{
      position:relative;
      overflow:clip;
      padding-left:clamp(14px, 2.6vw, 44px) !important;
      padding-right:clamp(14px, 2.6vw, 44px) !important;
    }
    .section-splash.is-centered .max-w-6xl{
      text-align:center;
    }
    .max-w-6xl{
      max-width:min(var(--reel-max-vw), var(--reel-max-px)) !important;
      width:100%;
      margin:0 auto;
    }
    section.section-splash + section.section-splash{
      margin-top:3rem;
    }
    #contact.section-splash{
      margin-top:2rem;
    }
    #partners.section-splash{
      margin-top:.75rem;
    }
    .section-splash::before{display:none;}
    .section-splash::after{
      display:none;
    }
    .section-splash > *{position:relative;z-index:1;}
    .hero-grid{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:28px;
      text-align:center;
    }
    .hero-copy{
      width:100%;
      max-width:900px;
    }
    .hero-list{
      margin-top:0;
    }
    .hero-media{
      width:min(var(--reel-max-vw), var(--reel-max-px));
      margin:0;
    }
    .hero-eyebrow{
      font-family:'Necto Mono',monospace;
      font-size:var(--fs-ui);
      letter-spacing:.28em;
      text-transform:uppercase;
      color:var(--accent);
    }
    .hero-title{
      font-size:calc(var(--fs-hero) / 1.5);
      line-height:1.05;
      letter-spacing:-0.01em;
      color:var(--fg);
    }
    .hero-subtitle{font-size:var(--fs-body);color:var(--muted);max-width:34rem;}
    .listen-word{
      display:inline-block;
      position:relative;
      color:var(--accent);
      text-shadow:0 0 0 rgba(216,175,124,0);
      animation:listen-pulse 2.4s ease-in-out infinite;
      z-index:0;
      cursor:pointer;
    }
    .listen-word::before,
    .listen-word::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:2.9em;
      height:2.9em;
      margin-left:-1.45em;
      margin-top:-1.45em;
      border-radius:50%;
      border:1.2px solid rgba(216,175,124,.42);
      opacity:0;
      transform:scale(.86);
      pointer-events:none;
      z-index:-1;
      animation:listen-wave 3.4s ease-out infinite;
    }
    .listen-word::after{
      border-color:rgba(216,175,124,.32);
      width:3.5em;
      height:3.5em;
      margin-left:-1.75em;
      margin-top:-1.75em;
      animation-delay:1.25s;
      animation-duration:4.1s;
    }
    @keyframes listen-pulse{
      0%,100%{transform:translateY(0) scale(1); text-shadow:0 0 0 rgba(216,175,124,0);}
      40%{transform:translateY(-1px) scale(1.03); text-shadow:0 0 12px rgba(216,175,124,.35);}
      60%{transform:translateY(0) scale(1.02); text-shadow:0 0 8px rgba(216,175,124,.24);}
    }
    @keyframes listen-wave{
      0%{opacity:0;transform:scale(.86);}
      20%{opacity:.82;}
      72%{opacity:.30;}
      100%{opacity:0;transform:scale(1.24);}
    }
    .flow-arrow{
      display:inline-block;
      font-family:'Necto Mono',monospace;
      font-size:14px;
      line-height:1;
      letter-spacing:0;
      color:inherit;
      transform:translateY(-1px);
    }
    .hero-list{margin-top:28px;}
    .hero-ethos{
      font-size:42px;
      line-height:1.05;
      letter-spacing:-0.01em;
      color:var(--fg);
      font-family:'ES Build',sans-serif;
      text-align:center;
    }
    .ethos-balance{
      margin-top:clamp(44px, 7vw, 84px);
      margin-bottom:clamp(44px, 7vw, 84px);
    }
    .work-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:8px;
      align-items:stretch;
    }
    .work-card{
      grid-column:auto;
      transition:transform .4s ease, box-shadow .4s ease;
      will-change:transform;
    }
    .work-card:hover{
      transform:translateY(-6px);
      box-shadow:0 18px 40px rgba(0,0,0,.12);
    }
    .work-card--a,
    .work-card--b,
    .work-card--c,
    .work-card--d,
    .work-card--e,
    .work-card--f{grid-column:span 1;}
    .work-card-media{
      aspect-ratio:16/10.6;
    }
    .work-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      max-width:min(var(--reel-max-vw), var(--reel-max-px));
      margin:0 auto;
    }
    @media (max-width: 980px){
      .work-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .work-card{grid-column:auto;}
    }
    @media (max-width: 767px){
      :root{
        --fs-ui:12px;
        --fs-body:15.5px;
        --fs-hero:clamp(24px, 7.8vw, 34px);
      }
      html, body{
        overscroll-behavior-y:contain;
      }
      .site-nav{display:none !important;}
      .mobile-menu-fab{display:inline-flex;}
      .mobile-menu-sheet{
        width:min(88vw, 350px);
        margin:auto 10px calc(max(10px, env(safe-area-inset-bottom)) + 60px) auto;
        border-radius:18px;
      }
      .reel-progress-wrap{
        height:30px;
      }
      .reel-progress{
        height:10px;
      }
      #reel.section-splash{padding-top:8px !important;}
      section[id]{
        scroll-margin-top:16px;
      }
      .hero-ethos{
        font-size:32px;
        line-height:1.08;
      }
      .hero-title{
        line-height:1.08;
      }
      .card-copy,
      .intro-copy,
      .intro-copy-tight{
        line-height:1.56;
      }
      .section-title,
      .ui-copy,
      .hero-list{
        letter-spacing:.06em;
      }
      .work-grid{
        grid-template-columns:1fr;
      }
      .work-card-media{
        margin-inline:auto;
      }
      body::before,
      body::after{
        opacity:.18;
      }
    }
    @supports (-webkit-touch-callout: none){
      @media (max-width: 767px){
        /* iOS Safari overscroll can reveal fixed pseudo-layer seams */
        body::before,
        body::after{
          display:none !important;
        }
      }
    }
    @media (max-width: 767px) and (orientation: landscape){
      #reel.section-splash{
        padding-top:6px !important;
        padding-bottom:12px !important;
      }
      #reel .hero-grid{
        gap:8px;
      }
      #reel .hero-media{
        width:100vw;
        max-width:100vw !important;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        border-radius:0;
        border:none;
        aspect-ratio:auto;
        height:calc(100dvh - 22px - env(safe-area-inset-bottom));
        background:#000;
      }
      #reel .reel-wrap{
        height:100%;
      }
      #reel-video{
        object-fit:contain !important;
        background:#000;
      }
    }
    @media (min-width:768px){
      .mobile-menu-fab{display:none !important;}
      .mobile-sheet-controls{display:none;}
    }
    .services-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      column-gap:clamp(12px, 1.4vw, 16px);
      row-gap:51px;
      max-width:min(var(--reel-max-vw), var(--reel-max-px));
      margin:0 auto;
      justify-items:center;
    }
    .service-item{
      width:100%;
      max-width:none;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:51px;
      text-align:center;
    }
    .service-card{
      width:198px;
      max-width:100%;
      aspect-ratio:1 / 1;
      padding:26px;
      border-radius:50%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      text-align:center;
    }
    .service-copy{
      width:96%;
      display:flex;
      flex-direction:column;
      gap:16px;
      padding-inline:10px;
    }
    .service-copy .card-copy{
      margin-top:0 !important;
      font-size:var(--fs-body);
      line-height:1.35;
      min-height:0;
      display:block;
      overflow:visible;
    }
    @media (min-width: 768px){
      #competence .section-title{
        margin-bottom:3.25rem !important;
      }
      #competence .services-flow{
        margin-bottom:3.25rem !important;
      }
      #work .section-title,
      #music .section-title,
      #partners .section-title,
      #contact .section-title{
        margin-bottom:3.25rem !important;
      }
      #partners.section-splash{
        padding-bottom:0 !important;
      }
      #partners .max-w-6xl > .flex.flex-wrap{
        margin-bottom:0 !important;
      }
      #contact.section-splash{
        margin-top:0 !important;
      }
      #contact .contact-stack{
        padding-top:0;
        gap:1rem;
      }
      .services-grid{
        row-gap:66px;
      }
      .service-item{
        gap:66px;
      }
      .service-copy{
        gap:21px;
      }
    }
    @media (max-width: 980px){
      .services-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
      .service-card{width:180px;}
      .service-copy{
        width:94%;
        padding-inline:8px;
      }
    }
    @media (max-width: 767px){
      .services-grid{
        grid-template-columns:1fr;
      }
      .service-item{
        max-width:420px;
      }
      .service-card{
        width:198px;
      }
      .service-copy{
        width:96%;
      }
    }
    .reveal-rise{
      opacity:1;
      transform:none;
      transition:none;
    }
    .reveal-rise.is-visible{
      opacity:1;
      transform:none;
    }
    .float-soft{
      animation:none;
      will-change:auto;
    }
    .float-soft-delayed{
      animation:none;
      animation-delay:0s;
      will-change:auto;
    }
    .float-slow{
      animation:none;
      will-change:auto;
    }
    @keyframes float-soft{
      0%, 100%{transform:translateY(0);}
      50%{transform:translateY(-10px);}
    }
    @keyframes float-slow{
      0%, 100%{transform:translateY(0) translateX(0);}
      40%{transform:translateY(-8px) translateX(6px);}
      70%{transform:translateY(6px) translateX(-4px);}
    }
    .reveal-fade{
      opacity:1;
      transform:none;
      transition:none;
    }
    .reveal-fade.is-visible{
      opacity:1;
      transform:none;
    }
    .reveal-scale{
      opacity:1;
      transform:none;
      transition:none;
    }
    .reveal-scale.is-visible{
      opacity:1;
      transform:none;
    }
    .reel-volume.attention{
      animation:reel-pop .85s ease-in-out infinite;
      transform-origin:center bottom;
    }
    @media (prefers-reduced-motion: reduce){
      .float-soft,
      .float-soft-delayed,
      .float-slow{
        animation:none;
      }
    }
    #contact a[href^="mailto:"]{user-select:text;}
    #contact .bg-black\/5 > .btn{
      align-self:center;
      width:auto;
    }
    .contact-form{
      width:100%;
      max-width:740px;
      margin:6px auto 0;
      display:grid;
      gap:10px;
      text-align:left;
    }
    .contact-form-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    @media (min-width: 768px){
      .contact-form-grid{
        grid-template-columns:1fr 1fr;
      }
    }
    .contact-input{
      width:100%;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(255,255,255,.35);
      color:var(--fg);
      padding:10px 12px;
      font-family:'Necto Mono',monospace;
      font-size:calc(var(--fs-body) + 2px);
      line-height:1.4;
      transition:border-color var(--theme-transition) var(--theme-ease), background-color var(--theme-transition) var(--theme-ease);
    }
    .contact-input::placeholder{
      font-size:14px;
    }
    .contact-input:focus{
      outline:none;
      border-color:var(--accent);
      background:rgba(255,255,255,.52);
    }
    :root[data-theme="dark"] .contact-input{
      background:rgba(20,20,20,.65);
    }
    :root[data-theme="dark"] .contact-input:focus{
      background:rgba(20,20,20,.82);
    }
    .contact-textarea{
      min-height:128px;
      resize:vertical;
    }
    .contact-help{
      font-size:var(--fs-ui);
      color:var(--muted);
      text-align:center;
      opacity:.85;
    }
    .music-link{
      display:block;
      color:inherit;
    }
    .music-player{
      width:100%;
      margin-top:10px;
      position:relative;
    }
    .glass-player{
      display:flex;
      align-items:center;
      gap:10px;
      padding:0;
      border:none;
      background:transparent;
    }
    .player-btn{
      width:34px;
      height:34px;
      border:1px solid var(--line);
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.28);
      color:#f3efe9;
      font-size:var(--fs-ui);
      line-height:1;
      flex:0 0 auto;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      position:relative;
      overflow:hidden;
    }
    .player-btn::before{
      content:"";
      display:block;
      width:0;
      height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-left:11px solid #f3efe9;
      transform:translateX(1px);
      transition:opacity .2s ease, transform .2s ease;
    }
    .player-btn::after{
      content:"";
      position:absolute;
      width:10px;
      height:12px;
      background:
        linear-gradient(#f3efe9, #f3efe9) left center / 3px 12px no-repeat,
        linear-gradient(#f3efe9, #f3efe9) right center / 3px 12px no-repeat;
      opacity:0;
      transform:scale(.85);
      transition:opacity .2s ease, transform .2s ease;
    }
    .player-btn[data-state="playing"]::before{
      opacity:0;
      transform:scale(.85);
    }
    .player-btn[data-state="playing"]::after{
      opacity:1;
      transform:scale(1);
    }
    .player-progress{
      flex:1;
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.24);
      overflow:hidden;
      cursor:var(--cursor-clef);
      position:relative;
      opacity:0;
      pointer-events:none;
      transition:opacity .25s ease;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .player-volume-slider{
      width:90px;
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.24);
      appearance:none;
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      transition:opacity .25s ease;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .player-volume-slider::-webkit-slider-thumb{
      appearance:none;
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--accent);
      border:1px solid rgba(0,0,0,.2);
      box-shadow:0 2px 8px rgba(0,0,0,.25);
    }
    .player-volume-slider::-moz-range-thumb{
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--accent);
      border:1px solid rgba(0,0,0,.2);
      box-shadow:0 2px 8px rgba(0,0,0,.25);
    }
    .player-volume-slider::-moz-range-track{
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.24);
    }
    .music-player.is-active .player-progress,
    .music-player:hover .player-progress,
    .music-player:focus-within .player-progress{
      opacity:1;
      pointer-events:auto;
    }
    .music-player.is-active .player-volume-slider,
    .music-player:hover .player-volume-slider,
    .music-player:focus-within .player-volume-slider{
      opacity:1;
      pointer-events:auto;
    }
    .player-progress-fill{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:0%;
      background:var(--accent);
    }
    .music-audio{
      display:none;
    }
    [data-craft-sound]{
      --quake-x:0px;
      transition:transform .6s ease, box-shadow .6s ease, background-color .6s ease;
      position:relative;
      overflow:visible;
      border-radius:999px;
    }
    [data-craft-sound]:hover{
      transform:scale(1.06);
    }
    [data-craft-sound] .card-copy{
      margin-top:12px;
      line-height:1.8;
    }
    .reveal-item{
      opacity:1;
      transform:translateX(var(--reveal-x, -48px));
      transition:transform .7s ease;
    }
    .reveal-item.is-visible{
      transform:translateX(0);
    }
    [data-craft-sound]::before,
    [data-craft-sound]::after,
    [data-craft-sound] .echo-layer{
      content:"";
      position:absolute;
      inset:-14%;
      border-radius:999px;
      border:1.5px solid rgba(0,0,0,.30);
      pointer-events:none;
      z-index:2;
      opacity:0;
      transform:scale(.92);
      animation:craft-rect var(--wave-speed-1, 5.2s) ease-out infinite;
      animation-delay:var(--wave-delay-1, 0.6s);
    }
    [data-craft-sound] .echo-layer{
      inset:-30%;
      border-radius:999px;
      border-color:rgba(0,0,0,.22);
      animation-delay:var(--wave-delay-3, 2.6s);
      animation-duration:var(--wave-speed-3, 7.4s);
    }
    [data-craft-sound]::after{
      inset:-22%;
      border-radius:999px;
      border-color:rgba(0,0,0,.26);
      animation-delay:var(--wave-delay-2, 1.6s);
      animation-duration:var(--wave-speed-2, 6.2s);
    }
    @keyframes craft-rect{
      0%{opacity:0;transform:scale(.92);}
      20%{opacity:.82;}
      70%{opacity:.34;}
      100%{opacity:0;transform:scale(1.05);}
    }
    :root[data-theme="dark"] [data-craft-sound]::before{
      border-color:rgba(216,175,124,.52);
    }
    :root[data-theme="dark"] [data-craft-sound]::after{
      border-color:rgba(216,175,124,.40);
    }
    :root[data-theme="dark"] [data-craft-sound] .echo-layer{
      border-color:rgba(216,175,124,.30);
    }
    [data-craft-sound].is-sounding{
      transform:translateY(-4px) scale(1.02) translateX(var(--quake-x));
      transition:transform .08s linear, box-shadow .6s ease, background-color .6s ease;
      box-shadow:0 18px 36px rgba(0,0,0,.16);
      background-color:rgba(0,0,0,.06);
    }
    :root[data-theme="dark"] [data-craft-sound].is-sounding{
      box-shadow:0 18px 36px rgba(0,0,0,.45);
      background-color:rgba(255,255,255,.08);
    }
    @keyframes logo-scroll{
      from{transform:translateX(0);}
      to{transform:translateX(-50%);}
    }
    @media (prefers-reduced-motion: reduce){
      .logo-track{animation:none;}
    }