@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
  @font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Demi.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
  @font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
  @font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Heavy.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap;}
  :root{
    /* new cinematic palette */
    --bg:#0B0906;            /* Foundation */
    --surface:#221D18;       /* Lifted Black */
    --ink:#EBE3D5;           /* Emulsion / Linen text */
    --structural-2:#4E6966;  /* Slate Mist — structural only */
    --accent:#C25C2A;        /* Ember — the only accent */

    /* blue-graphite scheme shared with the What-I-Do timeline */
    --panel:#14161B;         /* timeline panel */
    --panel-2:#1A1D24;       /* timeline bars */
    --panel-3:#171A21;       /* timeline clips / form fields */
    --steel-border:rgba(148,158,178,.2);
    --glow-blue:rgba(96,110,138,.32);

    /* light-ink tints for text, borders, dividers on dark */
    --ink-70:rgba(235,227,213,.72);
    --ink-50:rgba(235,227,213,.62);
    --ink-30:rgba(235,227,213,.3);
    --ink-12:rgba(235,227,213,.12);
    --ink-06:rgba(235,227,213,.06);

    /* legacy aliases repointed to the new palette (keeps existing rules working) */
    --white:var(--bg);
    --paper:var(--bg);
    --sienna:var(--accent);
    --sage:var(--structural-2);

    --font-head:"Futura PT","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-accent:"Cormorant Garamond",Georgia,serif;

    --container:1320px;
    --gutter:clamp(24px,12vw,180px);
    --ease:cubic-bezier(.22,1,.36,1);
    --reveal-dur:820ms;

    --z-nav:85;--z-menu:80;--z-overlay:90;--z-modal:120;--z-consent:130;--z-cursor:9999;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
  body.is-locked{overflow:hidden;}
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}

  ::selection{background:var(--accent);color:var(--bg);}
  ::-webkit-scrollbar{width:4px;height:4px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--structural-2);border-radius:2px;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}

  /* image reveal: light blur resolves to sharp once loaded/in view */
  .blurup{filter:blur(8px);transition:filter .6s ease;}
  .blurup.is-loaded{filter:none;}

  /* custom cursor — only hide the native cursor once JS has actually taken
     over (html.has-cursor), so a script failure can never leave the user
     with no pointer at all */
  .cursor{display:none;}
  @media(pointer:fine){
    html.has-cursor{cursor:none;}
    html.has-cursor .cursor{display:block;position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:var(--z-cursor);transition:width .15s ease,height .15s ease,background-color .15s ease,border-color .15s ease;}
    html.has-cursor body.cursor-hover .cursor{width:40px;height:40px;background:rgba(194,92,42,.18);border:1.5px solid var(--sienna);}
  }

  @keyframes pageIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  main{animation:pageIn .8s var(--ease) both;}

  .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}

  h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;line-height:1.0;margin:0;text-wrap:balance;}
  .section-title{font-size:clamp(2rem,5vw,4rem);font-weight:700;}
  .accent{font-family:var(--font-accent);font-style:italic;font-weight:500;letter-spacing:-.005em;}
  p{margin:0 0 1.1em;} p:last-child{margin-bottom:0;}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease);will-change:opacity,transform;}
  .reveal.in{opacity:1;transform:none;}
  .reveal[data-d="1"]{transition-delay:.10s;}
  .reveal[data-d="2"]{transition-delay:.20s;}
  .reveal[data-d="3"]{transition-delay:.30s;}


  /* ---------- Nav: scroll-reactive floating pill + morph toggle ---------- */
  .nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);padding:0 var(--gutter);--nav-fg:#fff;transition:padding .45s var(--ease),transform .45s var(--ease);}
  .nav-bar{display:flex;align-items:center;justify-content:space-between;max-width:var(--container);margin-inline:auto;padding:22px 0;border:1px solid transparent;border-radius:6px;transition:max-width .45s var(--ease),padding .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),border-radius .45s var(--ease);}
  .nav.scrolled{--nav-fg:var(--ink);padding-top:14px;}
  .nav.scrolled .nav-bar{max-width:1040px;background:rgba(20,22,27,.74);backdrop-filter:saturate(150%) blur(20px);-webkit-backdrop-filter:saturate(150%) blur(20px);border-color:rgba(148,158,178,.16);box-shadow:0 18px 50px -30px rgba(0,0,0,.6),0 0 32px -10px var(--glow-blue);padding:10px 20px;border-radius:18px;}
  body.menu-open .nav{--nav-fg:var(--ink);}
  body.menu-open .nav-bar{background:transparent;border-color:transparent;box-shadow:none;}
  .logo{font-family:var(--font-head);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:var(--nav-fg);transition:color .4s ease;}
  .logo span{color:var(--sienna);}
  .nav-links{display:flex;align-items:center;gap:38px;list-style:none;margin:0;padding:0;}
  .nav-links a{font-size:14px;font-weight:500;color:var(--nav-fg);position:relative;padding:6px 0;letter-spacing:-.02em;transition:color .4s ease;}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
  .nav-contact{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:9px;color:var(--nav-fg);letter-spacing:-.02em;transition:color .4s ease;}
  .nav-contact .dot{width:7px;height:7px;border-radius:50%;background:var(--sienna);transition:transform .4s var(--ease);}
  .nav-contact:hover .dot{transform:scale(1.5);}
  .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid color-mix(in srgb,var(--nav-fg) 30%,transparent);border-radius:10px;padding:0;color:var(--nav-fg);cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease;}
  .toggle{transition:transform .3s ease-in-out;}
  .toggle .t-morph{stroke-dasharray:12 63;transition:stroke-dasharray .3s ease-in-out,stroke-dashoffset .3s ease-in-out;}
  body.menu-open .toggle{transform:rotate(-45deg);}
  body.menu-open .toggle .t-morph{stroke-dasharray:20 300;stroke-dashoffset:-32.42px;}

  .menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);padding-top:clamp(96px,15vh,128px);transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden;}
  body.menu-open .menu{transform:translateY(0);visibility:visible;}
  .menu ul{list-style:none;margin:0;padding:0;}
  .menu li{overflow:hidden;}
  .menu a{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,12vw,4rem);letter-spacing:-.03em;line-height:1.18;display:inline-block;color:var(--ink);transform:translateY(110%);transition:transform .6s var(--ease);}
  body.menu-open .menu a{transform:translateY(0);}
  body.menu-open .menu li:nth-child(1) a{transition-delay:.12s;}
  body.menu-open .menu li:nth-child(2) a{transition-delay:.18s;}
  body.menu-open .menu li:nth-child(3) a{transition-delay:.24s;}
  body.menu-open .menu li:nth-child(4) a{transition-delay:.30s;}
  .menu-foot{margin-top:auto;padding-top:40px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--sage);}
  .menu-foot a{font-size:14px;color:var(--ink);transform:none;font-family:var(--font-body);font-weight:400;display:inline-flex;align-items:center;min-height:28px;}

  /* ---------- Hero (fullbleed; media shrinks ~15% on scroll, revealing the
     page background, and picks up rounded corners like the portfolio cards) ---------- */
  /* svh keeps the hero from being taller than the visible area while mobile
     browser chrome is showing (100vh = largest viewport) */
  .hero{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;align-items:center;overflow:hidden;background:var(--bg);}
  .hero-media{position:absolute;inset:0;overflow:hidden;background:var(--bg);will-change:transform;transform-origin:center center;}
  .hero-grad{position:absolute;inset:0;background:radial-gradient(130% 100% at 28% 18%, #221D18 0%, #120E0A 42%, #0B0906 72%);}
  .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transition:opacity 1.8s ease;}
  .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,6,.55) 0%,rgba(11,9,6,.24) 34%,rgba(11,9,6,.4) 58%,rgba(11,9,6,.82) 100%);pointer-events:none;}
  /* viewfinder framing + REC + timecode — purposeful film cues */
  .hero-frame{position:absolute;inset:clamp(18px,3vw,42px);z-index:3;pointer-events:none;}
  /* film chrome + copy leave the stage the moment scrolling starts (same cue as the CTA) */
  .hero-frame,.hero-tc,.hero-rec{transition:opacity .45s var(--ease),visibility .45s;}
  .hero.is-scrolled .hero-frame,.hero.is-scrolled .hero-tc,.hero.is-scrolled .hero-rec{opacity:0;visibility:hidden;}
  .hero-inner{transition:opacity .5s var(--ease),transform .5s var(--ease);}
  .hero.is-scrolled .hero-inner{opacity:0;transform:translateY(-24px);pointer-events:none;}
  .hero-frame span{position:absolute;width:26px;height:26px;border:2px solid rgba(235,227,213,.55);}
  .hero-frame .tl{top:0;left:0;border-right:0;border-bottom:0;}
  .hero-frame .tr{top:0;right:0;border-left:0;border-bottom:0;}
  .hero-frame .bl{bottom:0;left:0;border-right:0;border-top:0;}
  .hero-frame .br{bottom:0;right:0;border-left:0;border-top:0;}
  .hero-tc{position:absolute;left:clamp(28px,5vw,64px);top:clamp(20px,3.4vw,48px);z-index:4;font-family:var(--font-body);font-size:11px;letter-spacing:.16em;color:rgba(235,227,213,.58);pointer-events:none;font-variant-numeric:tabular-nums;}
  .hero-rec{position:absolute;right:clamp(28px,5vw,64px);top:clamp(20px,3.4vw,48px);z-index:4;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;color:rgba(235,227,213,.6);pointer-events:none;}
  .hero-rec .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:recblink 1.6s steps(1) infinite;}
  @keyframes recblink{0%,60%{opacity:1;}61%,100%{opacity:.15;}}
  .hero-inner{position:relative;z-index:2;width:100%;color:var(--ink);padding-inline:var(--gutter);}
  .hero-copy{max-width:min(94%,900px);}
  @media(max-width:760px){.hero-copy{max-width:94%;}}
  .hero-statement{font-family:var(--font-accent);font-style:italic;font-weight:600;color:var(--ink);font-size:clamp(1.9rem,4.5vw,3.6rem);line-height:1.14;letter-spacing:-.01em;max-width:31ch;text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.7);}
  .hero-tags{margin-top:clamp(16px,2vw,22px);font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-50);}
  .scroll-cta{position:absolute;left:var(--gutter);bottom:26px;z-index:4;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-70);padding:10px 0;transition:opacity .45s var(--ease),visibility .45s;}
  .scroll-cta.is-hidden{opacity:0;visibility:hidden;}
  .scroll-cta span{display:inline-block;animation:bob 1.8s var(--ease) infinite;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

  section{position:relative;}
  .pad{padding-block:clamp(80px,11vh,150px);}

  /* ---------- Work ---------- */
  .work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,5vw,64px);}
  .work-head p{max-width:46ch;color:var(--ink-70);font-weight:300;font-size:clamp(1rem,1.3vw,1.16rem);}

  /* no-JS fallback note (the work grid is injected by script) */
  .ns-note{color:var(--ink-70);font-size:1rem;}
  .ns-note a{color:var(--accent);text-decoration:underline;}

  /* 3-column boxed grid: uniform cards, rows aligned top and bottom */
  /* Dynamic masonry: 3 columns of varied-height cards, flush top and bottom */
  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:clamp(760px,92vw,1300px);}
  .pf-col{display:flex;flex-direction:column;gap:16px;height:100%;}
  .card{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--panel);cursor:pointer;flex:1 1 0;min-height:0;transition:box-shadow .5s ease;}
  .card:hover{box-shadow:0 0 44px -12px var(--glow-blue);}
  .card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease),filter .5s ease;}
  .card-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.64) 100%);transition:background .4s ease;}
  .card:hover img{transform:scale(1.03);}
  .card:hover .card-ov{background:linear-gradient(180deg,rgba(0,0,0,.05) 14%,rgba(0,0,0,.8) 100%);}
  .card-view{position:absolute;top:16px;right:16px;z-index:2;color:#fff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;opacity:0;transform:translateY(-4px);transition:opacity .4s ease,transform .4s ease;}
  .card:hover .card-view{opacity:.95;transform:none;}
  .card-play{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .35s ease,border-color .35s ease;}
  .card:hover .card-play{background:rgba(194,92,42,.9);border-color:transparent;}
  .card-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.6vw,22px);display:flex;align-items:flex-end;justify-content:space-between;gap:14px;}
  .card-meta{min-width:0;}
  .card-title{display:block;font-family:var(--font-accent);font-style:italic;font-weight:500;color:#fff;font-size:clamp(1.2rem,1.7vw,1.7rem);line-height:1.04;}
  .card-loc{display:block;margin-top:5px;color:rgba(255,255,255,.82);font-size:13px;font-weight:300;letter-spacing:-.02em;}
  .card-cat{flex:none;color:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;white-space:nowrap;padding-bottom:3px;}
  @media(max-width:820px){
    .work-grid{display:flex;flex-direction:column;height:auto;gap:16px;}
    .pf-col{display:contents;}
    .card{flex:none;aspect-ratio:4 / 3;height:auto;}
    .card-view{opacity:.95;transform:none;}
    .card-loc{display:none;}
  }


  /* ---------- What I Do: full-bleed video-editor timeline breaker ---------- */
  .services{position:relative;background:var(--bg);color:var(--ink);overflow:hidden;padding-block:clamp(28px,3.4vh,48px);}
  @media(min-width:821px){.services{min-height:90vh;display:flex;flex-direction:column;justify-content:safe center;}}
  .services .wrap{position:relative;z-index:1;width:100%;max-width:none;margin-inline:auto;padding-inline:clamp(16px,3vw,56px);display:flex;flex-direction:column;}
  .svc-head{flex:none;text-align:center;margin-bottom:clamp(12px,1.8vw,22px);}
  .svc-head h2{color:var(--ink);}
  /* timeline panel — natural height driven by the track heights below */
  .svc-timeline{display:flex;flex-direction:column;border:1px solid rgba(148,158,178,.16);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 40px 90px -60px rgba(0,0,0,.85),0 0 70px -24px var(--glow-blue);}
  /* sequence bar with live timecode */
  .svc-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px clamp(16px,2vw,26px);border-bottom:1px solid rgba(148,158,178,.14);background:var(--panel-2);}
  .svc-tc{font-family:var(--font-head);font-weight:700;font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
  .svc-seq{display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap;}
  .svc-rec{display:inline-flex;align-items:center;gap:7px;color:var(--ink-70);}
  .svc-rec i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:svcRec 1.6s steps(1) infinite;}
  @keyframes svcRec{0%,60%{opacity:1;}61%,100%{opacity:.2;}}
  @media(max-width:560px){.svc-seq .hide-sm{display:none;}}
  /* stage = ruler + tracks, shares one coordinate space for the playhead */
  .svc-stage{position:relative;display:flex;flex-direction:column;}
  .svc-ruler{flex:none;position:relative;height:26px;border-bottom:1px solid rgba(148,158,178,.14);background:var(--panel-2);background-image:repeating-linear-gradient(90deg,rgba(148,158,178,.16) 0 1px,transparent 1px 44px);overflow:hidden;}
  .svc-ruler .tc{position:absolute;top:7px;font-family:var(--font-head);font-weight:500;font-size:10px;letter-spacing:.06em;color:var(--ink-50);transform:translateX(5px);}
  .svc-tracks{display:flex;flex-direction:column;}
  @media(max-width:820px){.svc-tracks{display:block;}}
  /* each track is a viewport-scaled height, never crushed below 156px so clips can't collide with their headers */
  .svc-track{position:relative;height:clamp(156px,24vh,240px);border-bottom:1px solid rgba(148,158,178,.1);}
  @media(max-width:820px){.svc-track{height:auto;}}
  /* clip = NLE video clip: name header + footage area (fixes label overlap) */
  .svc-card{position:absolute;top:8px;bottom:8px;left:var(--x);width:var(--w);display:flex;flex-direction:column;border:1px solid rgba(148,158,178,.24);border-radius:8px;overflow:hidden;background:var(--panel-3);cursor:default;transition:border-color .35s ease;}
  .svc-card:hover{border-color:var(--accent);}
  @media(max-width:820px){.svc-card{position:relative;top:auto;bottom:auto;left:auto!important;width:auto!important;margin:12px;height:auto;min-height:220px;}}
  .svc-clip-head{flex:none;display:flex;align-items:center;gap:9px;padding:8px 13px;background:rgba(148,158,178,.1);border-bottom:1px solid rgba(148,158,178,.2);font-family:var(--font-head);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
  .svc-clip-head .vtag{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:3px;background:var(--accent);color:var(--bg);font-weight:800;font-size:9.5px;letter-spacing:.06em;}
  /* footage area — video-track look in the site's Cine Teal, bottom scrim for legibility */
  .svc-card-inner{position:relative;flex:1;min-height:0;overflow:hidden;
    background:linear-gradient(118deg,rgba(96,110,138,.32) 0%,rgba(96,110,138,.12) 46%,rgba(16,18,23,.04) 78%),linear-gradient(180deg,#21252E 0%,var(--panel-3) 100%);}
  .svc-card-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,12,.78) 0%,rgba(8,9,12,.28) 36%,transparent 62%);}
  .svc-card:hover .svc-card-inner::after{background:linear-gradient(0deg,rgba(8,9,12,.64) 0%,rgba(8,9,12,.16) 36%,transparent 62%);}
  .svc-card-body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,1.5vw,22px);}
  .svc-card-body h3{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.3rem,1.9vw,1.9rem);color:var(--ink);line-height:1.04;}
  .svc-card-body p{margin-top:8px;max-width:46ch;color:var(--ink-70);font-weight:300;font-size:clamp(.9rem,1vw,1.02rem);line-height:1.42;}
  /* red playhead / video liner — animated playback sweep */
  .svc-playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--accent);z-index:6;pointer-events:none;box-shadow:0 0 14px 1px rgba(194,92,42,.5);animation:svcPlay 19s linear infinite;}
  .svc-playhead::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--accent);}
  @keyframes svcPlay{0%{left:2%;}100%{left:98%;}}
  @media(max-width:820px){.svc-playhead{display:none;}}
  @media(prefers-reduced-motion:reduce){.svc-playhead{animation:none;left:44%;}}

  /* ---------- About ---------- */
  .about{overflow:hidden;}
  .about-tex{position:absolute;inset:-25% 0;z-index:0;pointer-events:none;opacity:.55;background-image:linear-gradient(var(--ink-06) 1px,transparent 1px),linear-gradient(90deg,var(--ink-06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 35%,transparent 78%);will-change:transform;}
  .about .wrap{position:relative;z-index:1;}
  .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center;}
  @media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
  .about-quote{font-family:var(--font-accent);font-style:italic;font-weight:500;line-height:1.2;font-size:clamp(1.6rem,3vw,2.4rem);max-width:22ch;margin-top:clamp(18px,2.4vw,30px);color:var(--ink);}
  .about-body{margin-top:26px;}
  .about-body p{font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:300;line-height:1.66;color:var(--ink-70);max-width:56ch;}
  .tagline{margin-top:30px;display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:-.01em;color:#fff;}
  .tagline-pin{flex:none;color:var(--accent);}
  .about-media{position:relative;min-height:clamp(380px,48vw,580px);}
  .about-media img{position:absolute;border-radius:4px;object-fit:cover;box-shadow:0 40px 80px -50px rgba(26,22,18,.5);}
  .about-media .am-1{width:72%;aspect-ratio:4/5;top:0;right:0;}
  .about-media .am-2{width:46%;aspect-ratio:4/5;left:0;bottom:0;transform:rotate(-4deg);border:6px solid var(--white);}
  @media(max-width:900px){.about-media{min-height:460px;margin-top:10px;}}


  /* ---------- Contact (compact, centered, working form) ---------- */
  .contact{text-align:center;padding-block:clamp(72px,11vh,130px);}
  .contact h2{max-width:18ch;margin-inline:auto;}
  .contact-form{max-width:600px;margin:clamp(28px,4vw,44px) auto 0;text-align:left;}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:560px){.cf-row{grid-template-columns:1fr;}}
  .cf-field{display:block;margin-bottom:14px;}
  .cf-label{display:block;margin-bottom:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);font-family:var(--font-head);font-weight:600;}
  .cf-field input,.cf-field textarea{width:100%;min-height:48px;padding:13px 15px;background:var(--panel-3);border:1px solid var(--steel-border);border-radius:8px;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;transition:border-color .3s ease,box-shadow .3s ease;-webkit-appearance:none;appearance:none;}
  .cf-field textarea{resize:vertical;}
  .cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 18px -4px var(--glow-blue);}
  .cf-field input.cf-invalid,.cf-field textarea.cf-invalid{border-color:#b53a1a;}
  .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
  .contact-form .cf-submit{margin-top:6px;width:100%;justify-content:center;}
  .contact-form .cf-submit[disabled]{opacity:.55;cursor:default;transform:none;}
  .cf-status{margin:12px 0 0;font-size:14px;min-height:1.4em;color:var(--ink-70);}
  .cf-status.ok{color:#7fbf8e;}
  .cf-status.err{color:#d97a5a;}
  .contact h2 .accent{color:var(--sienna);}
  .cta{display:inline-flex;align-items:center;gap:12px;background:var(--sienna);color:#fff;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:15px;line-height:1;padding:20px 36px;border-radius:8px;border:0;cursor:pointer;margin-top:clamp(28px,4vw,40px);transition:background-color .3s ease,transform .3s ease;}
  .cta:hover{background:#a94c1f;transform:translateY(-2px);}
  .cta span{font-size:16px;transition:transform .35s var(--ease);}
  .cta:hover span{transform:translateX(4px);}

  /* ---------- Footer ---------- */
  footer{position:relative;background:var(--panel);color:var(--ink-70);overflow:hidden;border-top:1px solid rgba(148,158,178,.14);box-shadow:0 -14px 60px -30px var(--glow-blue);}
  .footer-in{position:relative;z-index:1;}
  .footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:32px;padding-block:clamp(48px,6vw,74px);}
  @media(max-width:820px){.footer-cols{grid-template-columns:1fr;gap:28px;}}
  .footer-cols .logo{color:#fff;font-size:1.5rem;}
  .footer-cols .logo span{color:var(--sienna);}
  .f-role{margin-top:8px;font-weight:300;color:rgba(255,255,255,.7);font-size:14px;}
  .f-loc{margin-top:3px;font-weight:300;color:rgba(255,255,255,.68);font-size:13px;}
  .f-h{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px;font-weight:500;}
  .f-list{display:flex;flex-direction:column;gap:4px;}
  /* min-height keeps footer links a comfortable tap target on touch screens */
  .f-list a{color:rgba(255,255,255,.8);font-size:15px;width:fit-content;display:inline-flex;align-items:center;min-height:28px;}
  .f-list a:hover{color:#fff;}
  .f-list.f-social{flex-direction:row;gap:8px;}
  .f-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--ink-12);border-radius:10px;color:rgba(255,255,255,.75);transition:color .3s ease,border-color .3s ease;}
  .f-social a:hover{color:#fff;border-color:var(--accent);}
  .f-social svg{width:20px;height:20px;flex:none;}
  .footer-bar{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-block:16px;}
  .footer-bar p{margin:0;font-size:12px;color:rgba(255,255,255,.62);}
  .legal-links{display:flex;flex-wrap:wrap;gap:6px 22px;}
  .legal-links a{color:rgba(255,255,255,.62);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;min-height:26px;}
  .legal-links a:hover{color:#fff;}

  .modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(26,22,18,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
  .modal.open{opacity:1;visibility:visible;}
  .modal-box{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--ink-12);max-width:660px;width:100%;max-height:84vh;overflow:auto;padding:clamp(28px,5vw,56px);border-radius:4px;transform:translateY(14px);transition:transform .4s var(--ease);}
  .modal.open .modal-box{transform:none;}
  .modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:1px solid var(--ink-12);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink);}
  .modal-close:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
  .modal-box h3{font-size:1.7rem;font-weight:800;margin-bottom:8px;}
  .modal-box h4{font-size:1rem;font-weight:700;margin:20px 0 6px;}
  .modal-box p{font-size:14px;line-height:1.65;color:var(--ink-70);margin:0 0 10px;}
  .modal-box .note{color:var(--sienna);font-size:13px;}
  .modal-box a{color:var(--sienna);}

  /* ---------- Project overlay ---------- */
  .overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--white);transform:translateY(100%);transition:transform .65s var(--ease);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;}
  .overlay.open{transform:translateY(0);visibility:visible;}
  .overlay-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);background:rgba(11,9,6,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-12);}
  .overlay-bar .logo{font-size:1.15rem;color:var(--ink);}
  .ov-close{background:none;border:1px solid var(--ink-12);border-radius:100px;padding:11px 20px;cursor:pointer;color:var(--ink);font-family:var(--font-body);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:10px;transition:background-color .3s ease,color .3s ease;}
  .ov-close:hover{background:var(--ink);color:var(--white);}
  /* ---------- Project page (rendered inside overlay) ---------- */
  /* typographic header — every project opens on its own content, not a photo hero */
  /* block padding only — inline gutter is inherited from .wrap so the header
     never sits flush to the edge on narrow screens */
  .pj-head{padding-block:clamp(44px,8vh,88px) clamp(8px,1.6vw,20px);}
  .pj-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);}
  .pj-kicker .chip{display:inline-flex;padding:5px 12px;border:1px solid var(--ink-12);border-radius:100px;color:var(--accent);}
  .pj-title{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;font-size:clamp(2.6rem,7vw,5.5rem);line-height:.98;color:var(--ink);margin-top:16px;}
  .pj-note{margin-top:18px;max-width:62ch;font-family:var(--font-accent);font-style:italic;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;color:var(--ink-70);}

  /* project media reuses the exact landing-page masonry grid (.work-grid/.pf-col/.card)
     so heights, gaps and card treatment match the homepage 1:1 */
  .pj-grid .card{cursor:default;}

  .pj-video-list{padding-block:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);}
  .pj-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);}
  .pj-video-grid.one{grid-template-columns:1fr;}
  @media(max-width:680px){.pj-video-grid{grid-template-columns:1fr;}}
  .pj-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid rgba(148,158,178,.14);}
  .pj-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  /* click-to-load facade: nothing is requested from YouTube until the
     visitor deliberately clicks — the poster is a static i.ytimg.com jpg
     (no cookies), the click itself is the consent for that one embed */
  .pj-frame.yt-facade{cursor:pointer;background-size:cover;background-position:center;}
  .pj-frame.yt-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 100%);transition:background .3s ease;}
  .pj-frame.yt-facade:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.68) 100%);}
  .yt-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .3s ease,border-color .3s ease,transform .3s ease;}
  .yt-facade:hover .yt-facade-play{background:rgba(194,92,42,.92);border-color:transparent;transform:translate(-50%,-50%) scale(1.06);}
  .yt-facade-note{position:absolute;left:14px;bottom:12px;z-index:2;font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.6);}

  /* reels: vertical MP4s, section omitted when a project has none */
  .pj-reels{padding-block:clamp(16px,2vw,28px);}
  .pj-reels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);}
  @media(max-width:680px){.pj-reels-grid{grid-template-columns:repeat(2,1fr);}}
  .pj-reel{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid rgba(148,158,178,.14);}
  .pj-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

  /* closing map + CTA, shown on every project page */
  .pj-swiss{position:relative;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--ink);overflow:hidden;min-height:clamp(320px,42vw,460px);text-align:center;border-top:1px solid rgba(148,158,178,.14);}
  .pj-swiss-map{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center;}
  .pj-swiss-map svg{width:min(78vw,640px);height:auto;display:block;opacity:.5;}
  .pj-swiss-map path{fill:none;stroke:var(--ink-30);stroke-width:1.2;stroke-linejoin:round;}
  .pj-swiss-map .pin{stroke:var(--accent);}
  .pj-swiss-map .pin-fill{fill:var(--accent);stroke:none;}
  .pj-swiss-in{position:relative;z-index:1;}
  .pj-swiss-loc{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);margin-bottom:clamp(18px,2.6vw,28px);}

  .pj-next{padding-block:clamp(48px,7vw,104px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--ink-12);}
  .pj-next .back{font-size:13px;letter-spacing:-.01em;color:var(--ink-70);}
  .pj-next .back:hover{color:var(--ink);}
  .pj-next .next{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;}
  .pj-next .next .lbl{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);}
  .pj-next .next .nm{font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink);letter-spacing:-.02em;}
  .pj-next .next:hover .nm{color:var(--sienna);}

  /* ---------- Themed story project (Hong Kong · Morocco) ---------- */
  /* bespoke, country-flavoured project page: giant native-script watermark,
     topic sections with native subtitles, dense small-tile masonry, and a
     row of vertical reels. Palette-locked: ember stays the only accent. */
  .story{position:relative;}
  .story-hero{position:relative;padding:clamp(38px,7vh,82px) 0 clamp(16px,2.6vw,30px);overflow:hidden;}
  /* warm ember wash behind the header — the premium accent tone, shared by
     every story page so they read as one family */
  .story-hero::before{content:"";position:absolute;z-index:0;inset:-30% -10% auto -20%;height:150%;pointer-events:none;background:radial-gradient(46% 60% at 68% 34%,rgba(194,92,42,.13),transparent 72%);}
  .story-wm{position:absolute;z-index:0;top:50%;right:clamp(-24px,-2.4vw,0px);transform:translateY(-46%);font-family:var(--font-head);font-weight:800;line-height:.78;color:var(--accent);opacity:.09;pointer-events:none;user-select:none;white-space:nowrap;font-size:clamp(8rem,26vw,23rem);letter-spacing:.01em;}
  .story-wm.rtl{right:auto;left:clamp(-18px,-2vw,0px);}
  @media(max-width:680px){.story-wm{opacity:.08;font-size:clamp(6rem,34vw,13rem);}}
  .story .pj-head{position:relative;z-index:1;padding-top:0;}

  /* topic section: header (index · title · native · note) then masonry */
  .story-sec{position:relative;z-index:1;padding-block:clamp(26px,4vw,60px);}
  .story-shead{position:relative;display:flex;align-items:baseline;gap:12px 22px;flex-wrap:wrap;margin-bottom:clamp(16px,2.2vw,28px);padding-bottom:14px;border-bottom:1px solid var(--ink-12);}
  /* ember underline accent anchoring each section header */
  .story-shead::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--accent);}
  .story-shead .s-idx{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--accent);align-self:center;}
  .story-shead h3{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.6rem,3.4vw,2.7rem);color:var(--ink);line-height:1;}
  .story-shead .s-native{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.25rem,2.2vw,1.75rem);color:var(--ink-50);letter-spacing:.01em;}
  .story-shead .s-note{margin-left:auto;max-width:40ch;font-size:14px;font-weight:300;color:var(--ink-70);line-height:1.5;}
  @media(max-width:760px){.story-shead .s-note{margin-left:0;flex-basis:100%;}}

  /* justified-rows gallery: JS sizes each figure so rows fill the width and
     align flush; widths vary by aspect ratio for a dynamic, uncropped feel */
  .story-masonry{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start;}
  @media(max-width:760px){.story-masonry{gap:9px;}}
  .story-masonry figure{margin:0;border-radius:5px;overflow:hidden;background:var(--panel);box-shadow:0 18px 44px -34px rgba(0,0,0,.8);flex:0 0 auto;transition:box-shadow .5s ease;}
  /* pre-JS fallback so the gallery is usable before justifyRows runs */
  .story-masonry figure:not([style]){flex:1 1 240px;height:clamp(200px,26vw,300px);}
  .story-masonry img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease),filter .5s ease;}
  @media(pointer:fine){
    .story-masonry figure:hover{box-shadow:0 22px 50px -24px rgba(194,92,42,.4);}
    .story-masonry figure:hover img{transform:scale(1.045);}
  }

  /* vertical reel row: 4 across, 5:7 frames, SEO caption below each */
  .story-reels{padding-block:clamp(20px,2.8vw,42px);}
  .story-reels-lead{margin-bottom:clamp(14px,1.8vw,22px);max-width:none;font-family:var(--font-accent);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;color:var(--ink-70);}
  .story-reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);}
  /* desktop column count follows the number of reels (n2 / n3), else 4 */
  @media(min-width:821px){
    .story-reels-grid.n3{grid-template-columns:repeat(3,1fr);}
    .story-reels-grid.n2{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:820px){.story-reels-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:360px){.story-reels-grid{grid-template-columns:1fr;}}
  .story-reel figure{margin:0;}
  .story-reel .r-frame{position:relative;aspect-ratio:5 / 7;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--steel-border);transition:border-color .4s ease,box-shadow .4s ease;}
  @media(pointer:fine){.story-reel:hover .r-frame{border-color:var(--accent);box-shadow:0 22px 50px -26px rgba(194,92,42,.45);}}
  .story-reel .r-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .story-reel figcaption{margin-top:11px;}
  .story-reel .r-title{display:block;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink);}
  .story-reel .r-desc{display:block;margin-top:4px;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--ink-70);}

  @media(max-width:860px){.nav-links,.nav-contact{display:none;}.burger{display:flex;}}

  /* ---------- Cookie / consent preferences ----------
     Non-blocking by design: no full-page "cookie wall" — basic site access
     is never made conditional on accepting non-essential processing, since
     the site currently has none live. Reject is the exact same size and
     click-depth as Accept; nothing about it is visually demoted. */
  .consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-consent);padding:var(--gutter);padding-block:clamp(16px,2.4vw,26px);background:rgba(15,12,9,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ink-12);transform:translateY(110%);transition:transform .5s var(--ease);}
  .consent-bar.open{transform:translateY(0);}
  .consent-in{max-width:var(--container);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;justify-content:space-between;}
  .consent-copy{flex:1 1 420px;font-size:13.5px;line-height:1.55;color:var(--ink-70);max-width:64ch;}
  .consent-copy a{color:var(--accent);text-decoration:underline;}
  .consent-actions{flex:1 1 100%;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  @media(min-width:820px){.consent-actions{flex:none;max-width:none;}}
  .consent-btn{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.01em;padding:11px 20px;border-radius:8px;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease;white-space:nowrap;}
  .consent-btn.ghost{background:none;border:1px solid var(--ink-12);color:var(--ink-70);}
  .consent-btn.ghost:hover{border-color:var(--ink-30);color:var(--ink);}
  /* accept/reject share identical size, padding and font-weight — the only
     difference is fill colour, which EDPB guidance treats as acceptable as
     long as neither the size nor the click-path length differs */
  .consent-btn.outline{background:none;border:1px solid var(--steel-border);color:var(--ink);}
  .consent-btn.outline:hover{border-color:var(--ink-30);}
  .consent-btn.solid{background:var(--accent);border:1px solid var(--accent);color:#fff;}
  .consent-btn.solid:hover{background:#a94c1f;border-color:#a94c1f;}
  .consent-panel{flex:1 1 100%;margin-top:6px;padding-top:16px;border-top:1px solid var(--ink-12);display:none;}
  .consent-panel.open{display:block;}
  .consent-row{display:flex;align-items:flex-start;gap:12px;padding-block:10px;}
  .consent-row+.consent-row{border-top:1px solid var(--ink-06);}
  .consent-row input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--accent);}
  .consent-row label{flex:1;}
  .consent-row .crt{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ink);}
  .consent-row .crd{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-70);max-width:72ch;}
  .consent-panel-actions{margin-top:14px;}
  #privacySettingsLink{cursor:pointer;}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
    .reveal{opacity:1 !important;transform:none !important;}
    main{animation:none !important;}
    .blurup{filter:none !important;}
  }