/* ELE1 FINAL — style.css */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

/* ─── TOKENS ─────────────────────────────── */
:root{
  --fd:'Anton',sans-serif;
  --fm:'IBM Plex Mono',monospace;
  --bg:#f2efe9; --bg2:#e8e4dc;
  --fg:#141412; --fg2:#5a5752; --fg3:#9a9690;
  --brd:rgba(20,20,18,.13); --brd2:rgba(20,20,18,.06);
  --nav-bg:rgba(242,239,233,.94);
  --blue:#3a3fff;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme=dark]{
  --bg:#111110; --bg2:#1a1a18;
  --fg:#ededea; --fg2:#7a7773; --fg3:#454340;
  --brd:rgba(237,237,234,.12); --brd2:rgba(237,237,234,.05);
  --nav-bg:rgba(17,17,16,.95);
}

/* ─── RESET ─────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
body{font-family:var(--fm);background:var(--bg);color:var(--fg);font-size:13px;line-height:1.6;cursor:none;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{background:none;border:none;cursor:none;font:inherit;color:inherit}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-thumb{background:var(--fg3)}

/* ─── CURSOR ─────────────────────────────── */
#cur-dot{position:fixed;width:9px;height:9px;border-radius:50%;background:var(--blue);pointer-events:none;z-index:99999;transform:translate(-50%,-50%);will-change:left,top;transition:transform .15s}
#cur-ring{position:fixed;width:34px;height:34px;border:1.5px solid var(--blue);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);opacity:.55;transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
body.hov #cur-dot{transform:translate(-50%,-50%) scale(2.2)}
body.hov #cur-ring{width:52px;height:52px;opacity:.22}

/* ─── NAVBAR ─────────────────────────────── */
/* Fully transparent floating nav — no bar, no background */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:125px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  background:transparent;
  backdrop-filter:none;
  border:none;
  transition:background .4s,backdrop-filter .4s;
}
/* On scroll: subtle frost appears */
.nav-scrolled{
  background:rgba(242,239,233,.85)!important;
  backdrop-filter:blur(18px)!important;
  height:80px !important;
}

[data-theme=dark] .nav-scrolled{
  background:rgba(17,17,16,.88)!important;
}

/* Logo — 2cm ≈ 76px on a typical 96dpi screen (≈75px) */
.nav-logo{
  display:flex;
  align-items:center;
  line-height:0;
  transition:opacity .25s;

  /* NEW */
  padding-top:10px;      /* pushes logo down */
  margin-left:-20px;     /* shifts slightly left */
}

.nav-logo:hover{opacity:.75}

.nav-logo img{
  height:90px;           /* bigger logo */
  width:auto;
  display:block;
  transition:height .35s cubic-bezier(.16,1,.3,1);
}
/* Logo shrinks on scroll */
.nav-scrolled .nav-logo img{
  height:60px;
}

/* Right side: only 2 icon buttons */
.nav-right{display:flex;align-items:center;gap:8px}

/* ── Theme toggle button ── */
.theme-btn{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(20,20,18,.18);
  color:var(--fg);
  transition:border-color .25s,background .25s;
}
[data-theme=dark] .theme-btn{border-color:rgba(237,237,234,.18)}
.theme-btn:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
[data-theme=dark] .theme-btn:hover{border-color:var(--fg);background:var(--fg);color:var(--bg2)}
.theme-btn svg{width:16px;height:16px;flex-shrink:0;transition:color .25s}
/* Show sun in dark mode, moon in light mode */
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme=dark] .icon-sun{display:block}
[data-theme=dark] .icon-moon{display:none}

/* ── Hamburger menu button ── */
.menu-btn{
  width:40px;height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(20,20,18,.18);
  transition:border-color .25s,background .25s;
}
[data-theme=dark] .menu-btn{border-color:rgba(237,237,234,.18)}
.menu-btn:hover{border-color:var(--fg);background:var(--fg)}
.hbg-line{
  display:block;
  width:16px;height:1.5px;
  background:var(--fg);
  border-radius:2px;
  transition:background .25s,transform .3s,opacity .3s;
  transform-origin:center;
}
.menu-btn:hover .hbg-line{background:var(--bg)}
/* Animate to X when menu open */
#menu.open ~ nav .hbg-line:nth-child(1),
.menu-btn.open .hbg-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#menu.open ~ nav .hbg-line:nth-child(2),
.menu-btn.open .hbg-line:nth-child(2){opacity:0;transform:scaleX(0)}
#menu.open ~ nav .hbg-line:nth-child(3),
.menu-btn.open .hbg-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─── OVERLAY MENU (Namma style) ────────────
   Slides DOWN from top. Two columns: left = big
   Anton links, right = full-bleed image preview.
   Small image appears BESIDE each link on hover.
─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   MENU OVERLAY — Exact Namma style
   - Slides DOWN from top
   - Full viewport, NO scroll, NO image column
   - Top bar: Logo | Dark Mode | Close | Let's talk
   - Body: 2-column text grid (4 left, 3 right)
   - Each link: massive Anton, halo glow on hover (diff color)
   - Small gif/image slides in from right on hover
   - Bottom bar: socials left | tagline+clock right
═══════════════════════════════════════════════════════════ */
#menu{
  position:fixed;inset:0;z-index:500;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .62s var(--ease),background .3s;
  pointer-events:none;
  overflow:hidden; /* NO scroll ever */
}
#menu.open{transform:translateY(0);pointer-events:all}

/* ── top bar (mirrors nav height exactly) ── */
.menu-bar{
  height:76px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid var(--brd2);
}
.menu-bar-logo{display:flex;align-items:center;line-height:0}
.menu-bar-logo img{height:44px;width:auto;display:block}
.menu-bar-right{display:flex;align-items:center;gap:20px}
.menu-dark-btn{
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg2);cursor:none;transition:color .25s;
}
.menu-dark-btn:hover{color:var(--fg)}
.menu-close{
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg2);cursor:none;transition:color .25s;
}
.menu-close:hover{color:var(--fg)}
.menu-cta{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);padding:6px 14px;transition:opacity .25s;
}
.menu-cta:hover{opacity:.75}

/* ── body: 2 pure text columns, fills remaining height ── */
.menu-body{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  /* fills exactly: viewport - top-bar - bottom-bar */
  min-height:0; /* allow shrink */
  overflow:hidden;
}

/* each column */
.menu-col{
  padding:0 48px;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.menu-col:first-child{
  border-right:1px solid var(--brd2);
}

/* ── link items ── */
.menu-col a{
  font-family:var(--fd);
  /* Auto-size to fit 4 or 3 items in column without overflow.
     We use dvh units: body = 100dvh - 76px bar - 44px foot = ~calc(100dvh - 120px)
     4 items: each ≈ (100dvh-120px)/4, cap at 7vw  */
  font-size:clamp(2.2rem, min(7vw, calc((100dvh - 120px) / 4.4)), 7rem);
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--fg);line-height:1.0;
  display:flex;align-items:center;justify-content:flex-start;
  gap:16px;
  opacity:0;transform:translateY(18px);
  transition:opacity .42s,transform .42s,color .2s;
  position:relative;overflow:hidden; /* clip the halo */
  padding:0;
  text-decoration:none;
  flex-shrink:0;
}
/* stagger in */
#menu.open .menu-col:nth-child(1) a:nth-child(1){opacity:1;transform:none;transition-delay:.07s}
#menu.open .menu-col:nth-child(1) a:nth-child(2){opacity:1;transform:none;transition-delay:.12s}
#menu.open .menu-col:nth-child(1) a:nth-child(3){opacity:1;transform:none;transition-delay:.17s}
#menu.open .menu-col:nth-child(1) a:nth-child(4){opacity:1;transform:none;transition-delay:.22s}
#menu.open .menu-col:nth-child(2) a:nth-child(1){opacity:1;transform:none;transition-delay:.1s}
#menu.open .menu-col:nth-child(2) a:nth-child(2){opacity:1;transform:none;transition-delay:.15s}
#menu.open .menu-col:nth-child(2) a:nth-child(3){opacity:1;transform:none;transition-delay:.2s}

/* ── halo gradient on hover — unique colour per link ── */
.menu-col a::before{
  content:'';
  position:absolute;
  /* sits behind the text */
  inset:-30px -60px;
  border-radius:50%;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  z-index:-1;
}
.menu-col a:hover::before{opacity:1}
/* colours: blue, amber, teal, violet, red, green, orange */
.menu-col a:nth-child(1)::before{background:radial-gradient(ellipse,rgba(58,63,255,.18) 0%,transparent 65%)}
.menu-col a:nth-child(2)::before{background:radial-gradient(ellipse,rgba(248,160,38,.2) 0%,transparent 65%)}
.menu-col a:nth-child(3)::before{background:radial-gradient(ellipse,rgba(38,195,172,.18) 0%,transparent 65%)}
.menu-col a:nth-child(4)::before{background:radial-gradient(ellipse,rgba(140,70,255,.18) 0%,transparent 65%)}

/* right col gets different palette */
.menu-col:nth-child(2) a:nth-child(1)::before{background:radial-gradient(ellipse,rgba(220,50,50,.15) 0%,transparent 65%)}
.menu-col:nth-child(2) a:nth-child(2)::before{background:radial-gradient(ellipse,rgba(255,140,20,.18) 0%,transparent 65%)}
.menu-col:nth-child(2) a:nth-child(3)::before{background:radial-gradient(ellipse,rgba(50,190,80,.16) 0%,transparent 65%)}

/* ── small gif/image that slides in from right on hover ── */
.lnk-img{
  width:72px;height:52px;
  object-fit:cover;border-radius:3px;
  flex-shrink:0;
  opacity:0;
  transform:translateX(12px) scale(.88);
  transition:opacity .28s ease,transform .28s var(--ease);
  pointer-events:none;
}
.menu-col a:hover .lnk-img{
  opacity:1;
  transform:translateX(0) scale(1);
}

/* text dimming on hover of sibling */
.menu-col:hover a{color:var(--fg3)}
.menu-col:hover a:hover{color:var(--fg)}

/* ── bottom footer bar ── */
.menu-foot{
  height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  border-top:1px solid var(--brd2);
}
.menu-socials{display:flex;gap:20px}
.menu-socials a{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);transition:color .25s;
}
.menu-socials a:hover{color:var(--fg)}
.menu-foot-right{
  display:flex;align-items:center;gap:16px;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);
}
.menu-foot-city{color:var(--fg2)}

/* ─── TALK PANEL ─────────────────────────── */
#talk-panel{position:fixed;top:0;right:0;width:420px;height:100vh;z-index:600;background:var(--bg);border-left:1px solid var(--brd);transform:translateX(100%);transition:transform .55s var(--ease),background .3s;overflow-y:auto;padding:28px 24px;display:flex;flex-direction:column}
#talk-panel.open{transform:translateX(0)}
#talk-bd{position:fixed;inset:0;z-index:599;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .35s}
#talk-bd.open{opacity:1;pointer-events:all}
.tp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.tp-title{font-family:var(--fd);font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase}
.tp-close{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);cursor:none;transition:color .25s}
.tp-close:hover{color:var(--fg)}
.tp-f{margin-bottom:16px}
.tp-f label{display:block;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-bottom:5px}
.tp-f input,.tp-f textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--brd);padding:6px 0;font-family:var(--fm);font-size:13px;color:var(--fg);outline:none;transition:border-color .25s}
.tp-f input:focus,.tp-f textarea:focus{border-color:var(--fg)}
.tp-f input::placeholder,.tp-f textarea::placeholder{color:var(--fg3)}
.tp-f textarea{resize:none;height:70px}
.tp-pills{display:flex;gap:5px;flex-wrap:wrap;padding:4px 0}
.tp-pill{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--brd);color:var(--fg2);cursor:none;transition:all .2s}
.tp-pill.on,.tp-pill:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tp-btn{width:100%;background:var(--fg);color:var(--bg);font-family:var(--fd);font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;padding:12px;border:none;cursor:none;margin-top:16px;transition:opacity .25s}
.tp-btn:hover{opacity:.8}

/* ─── MAIN ─────────────────────────────── */
main{padding-top:0}
.nav-scrolled{background:var(--nav-bg)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid var(--brd2)!important}

/* ─── HERO ─────────────────────────────────
   Clean bg that flips with theme.
   "Studio créatif" small label above h1.
   h1 centered, huge Anton.
   Bottom-left tagline + bottom-right clock
   always visible WITHOUT scrolling.
─────────────────────────────────────────── */
.hero{
  height:100vh;min-height:580px;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:background .3s;
}
.hero-label{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:18px;
  text-align:center;transition:color .3s;
}
.hero-h1{
  font-family:var(--fd);
  font-size:clamp(4.5rem,11vw,12rem);
  line-height:1.02;letter-spacing:.025em;text-transform:uppercase;
  color:var(--fg);text-align:center;
  transition:color .3s;
}
/* bottom bar — sits at very bottom of hero viewport */
.hero-foot{
  position:absolute;bottom:-15px;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;pointer-events:none;
}
.hero-foot-l,.hero-foot-r{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);transition:color .3s;
}
/* ─── IMAGE TRAIL ──────────────────────────────────────────
   Pool of images spawned along mouse path in .hero section.
   Images sit BEHIND text (z-index:1), text at z-index:2.
──────────────────────────────────────────────────────────── */
.hero-label,
.hero-h1,
.hero-foot{
  position:relative;
  z-index:2;
}
.trail-img{
  position:absolute;
  width:200px;
  height:148px;
  object-fit:cover;
  border-radius:3px;
  opacity:0;
  pointer-events:none;
  z-index:1;
  transform-origin:center;
  will-change:opacity,transform;
}

/* ─── MARQUEE ─────────────────────────────── */
.marquee{overflow:hidden;border-top:1px solid var(--brd2);border-bottom:1px solid var(--brd2);padding:8px 0;background:var(--bg2);transition:background .3s}
.mq-track{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq-item{display:flex;align-items:center;gap:10px;padding:0 22px;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);white-space:nowrap}
.mq-dot{width:3px;height:3px;border-radius:50%;background:var(--fg3)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── MANIFESTO ─────────────────────────────
   Always dark (fg becomes the background).
   Dark-mode makes it deeper.
   Lines: full Anton, centered.
   Only 3 words get underline + halo: DETAIL(amber),
   VISION(teal), PLAYGROUND(violet). Centered line.
─────────────────────────────────────────── */
.mf{
  /* Light mode: cream background, dark text — fully theme-aware */
  background:var(--bg2);
  padding:64px 24px 96px;
  text-align:center;position:relative;overflow:visible;
  transition:background .3s;
}
[data-theme=dark] .mf{background:#0e0e0c}
.mf-eyebrow{
  font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(20,20,18,.3);margin-bottom:20px;transition:color .3s;
}
[data-theme=dark] .mf-eyebrow{color:rgba(237,237,234,.16)}
.mf-line{
  font-family:var(--fd);
  font-size:clamp(1.5rem,4.6vw,5.4rem);
  letter-spacing:.025em;line-height:1.08;text-transform:uppercase;
  /* Light mode: dark text on cream */
  color:var(--fg);
  display:block;position:relative;
  transition:color .3s;
}
[data-theme=dark] .mf-line{color:#ededea}
.mf-line.ctr{text-align:center;width:100%}

/* underlined hover word */
.hw{
  display:inline;position:relative;cursor:pointer;
  text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px;
}
.hw::before{
  content:'';position:absolute;inset:-16px -24px;border-radius:8px;
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .4s ease;
}
.hw:hover::before{opacity:1}
.hw-amber::before{background:radial-gradient(ellipse,rgba(248,158,38,.42) 0%,transparent 68%)}
.hw-teal::before{background:radial-gradient(ellipse,rgba(38,195,172,.38) 0%,transparent 68%)}
.hw-violet::before{background:radial-gradient(ellipse,rgba(120,80,255,.44) 0%,transparent 68%)}

/* image stack on click */
.img-stack{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:320px;height:200px;pointer-events:none;z-index:20;display:none;
}
.img-stack.on{display:block}
.img-stack img{
  position:absolute;width:145px;height:108px;object-fit:cover;border-radius:3px;
  box-shadow:0 10px 36px rgba(0,0,0,.4);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.3,.64,1),opacity .4s ease;
}
.img-stack img:nth-child(1){left:12px;top:46px;transform:rotate(-8deg) scale(.8)}
.img-stack img:nth-child(2){left:85px;top:28px;transform:rotate(3deg) scale(.8)}
.img-stack img:nth-child(3){left:158px;top:52px;transform:rotate(-4deg) scale(.8)}
.img-stack.on img:nth-child(1){transform:rotate(-10deg) scale(1);opacity:1;transition-delay:0s}
.img-stack.on img:nth-child(2){transform:rotate(4deg) scale(1.04);opacity:1;transition-delay:.06s}
.img-stack.on img:nth-child(3){transform:rotate(-5deg) scale(.95);opacity:1;transition-delay:.12s}

/* ─── PROJECTS ─────────────────────────────── */
.proj{border-top:1px solid var(--brd2)}
.proj-head{padding:90px 24px 90px;display:flex;align-items:flex-end;justify-content:space-between}
.proj-eyebrow{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);display:block;margin-bottom:10px}
.proj-title{
  font-family:var(--fd);
  font-size:clamp(3rem,11.5vw,11rem);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--fg);
  line-height:1;
  display:block;              /* change from inline-block */
  position:relative;
  cursor:none;
  transition:letter-spacing .45s var(--ease),color .3s;
  margin:0 auto;              /* centers it */
  text-align:center;          /* ensures text centered */
}

.proj-head{
  position:relative; /* important */
}
.proj-title:hover{letter-spacing:.065em}
.proj-badge{
  position:absolute;top:24%;left:35%;background:var(--blue);color:#fff;
  font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;transform:rotate(-4deg);
  transition:transform .45s var(--ease),top .45s var(--ease);white-space:nowrap;
}
.proj-title:hover .proj-badge{transform:rotate(4deg) scale(1.08);top:18%}
.see-all{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);display:flex;align-items:center;gap:5px;transition:gap .3s,color .25s;padding-bottom:4px}
.see-all:hover{color:var(--fg);gap:9px}
.proj-grid{padding:0 24px}
/* project cards */
.pc{position:relative;overflow:hidden;display:block;cursor:none;background:var(--bg2)}
.pc.wide{aspect-ratio:21/8;margin-bottom:3px}
.pc.half{aspect-ratio:4/3}
.pc-2col{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px}
.pc-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:3px}
.pc-media{position:absolute;inset:0}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.pc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.pc:hover .pc-media img{transform:scale(1.05)}
.pc:hover .pc-media video{opacity:1}
.pc-info{position:absolute;bottom:0;left:0;right:0;padding:16px 18px;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,transparent 100%);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.pc:hover .pc-info{opacity:1;transform:translateY(0)}
.pc-cat{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
.pc-name{font-family:var(--fd);font-size:clamp(1rem,2vw,1.9rem);letter-spacing:.04em;text-transform:uppercase;line-height:1}

/* ─── SERVICES ──────────────────────────────
   Dark section, theme-aware.
   3 columns: left panel (cards) | center (list) | right (label)
   Center text: Anton, same bold as hero, center-aligned.
   Dim text by default, hover = full bright + bigger.
─────────────────────────────────────────── */
.svc{
  display:flex;min-height:100vh;
  /* Light: warm cream bg; Dark: near-black — both respond to theme */
  background:var(--bg2);
  transition:background .3s;
  position:relative;overflow:hidden;
  margin-top:32px;
}
[data-theme=dark] .svc{background:#0e0e0c}

.svc-left{
  width:200px;flex-shrink:0;padding:22px 16px;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;z-index:2;
}
.svc-label{
  position:absolute;top:18px;left:18px;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  /* Light: dark tone on cream; Dark: light tone on black */
  color:rgba(20,20,18,.28);
  transition:color .3s;
}
[data-theme=dark] .svc-label{color:rgba(237,237,234,.16)}
.svc-caption{font-size:9.5px;font-style:italic;font-family:var(--fm);color:rgba(20,20,18,.38);margin-bottom:10px;transition:color .3s}
[data-theme=dark] .svc-caption{color:rgba(237,237,234,.26)}
.svc-cards{display:flex;align-items:flex-end;height:88px}
.sc{width:70px;height:84px;border-radius:3px;flex-shrink:0;padding:5px 4px;margin-left:-13px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .28s}
.sc:first-child{margin-left:0}
.sc:nth-child(1){background:#d42b20;color:#fff;transform:rotate(-6deg);z-index:1}
.sc:nth-child(2){background:#e89800;color:#111;transform:rotate( 4deg);z-index:2}
.sc:nth-child(3){background:#218040;color:#fff;transform:rotate(-3deg);z-index:3}
.sc:nth-child(4){background:#3aa0d0;color:#111;transform:rotate( 5deg);z-index:4}
.sc:hover{transform:rotate(0) translateY(-9px) scale(1.06)!important;z-index:10}
.sc-txt{font-size:7px;font-weight:700;line-height:1.3}
.sc-auth{font-size:7px;opacity:.55;margin-top:3px}

/* center col — align-items:center + margin correction for left/right asymmetry */
.svc-mid{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:24px 8px;text-align:center;position:relative;z-index:2;
  /* nudge text to true screen centre: left panel wider than right, so pull left */
  margin-right:110px;
}
.svc-item{
  font-family:var(--fd);
  font-size:clamp(2.2rem,4.8vw,5.8rem);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.0;
  /* Default: full opaque — black in light, white-ish in dark */
  color:var(--fg);
  display:block;cursor:none;white-space:nowrap;
  position:relative;
  transition:color .22s ease,font-size .2s var(--ease),opacity .22s ease;
  /* rotating gradient halo — hidden by default */
  isolation:isolate;
}
[data-theme=dark] .svc-item{color:rgba(237,237,234,.88)}

/* When ANY sibling is hovered, dim non-hovered items */
.svc-mid:has(.svc-item:hover) .svc-item:not(:hover){
  color:rgba(20,20,18,.2);
}
[data-theme=dark] .svc-mid:has(.svc-item:hover) .svc-item:not(:hover){
  color:rgba(237,237,234,.18);
}

/* Hovered item: full colour + larger */
.svc-item:hover,.svc-item.act{
  color:var(--fg)!important;
  font-size:clamp(2.6rem,6.2vw,7rem);
}
[data-theme=dark] .svc-item:hover,[data-theme=dark] .svc-item.act{
  color:rgba(237,237,234,1)!important;
}

/* Rotating abstract halo behind each item on hover */
.svc-item::before{
  content:'';
  position:absolute;
  /* Blob wider than text, centred */
  left:50%;top:50%;
  width:120%;height:220%;
  transform:translate(-50%,-50%) rotate(0deg) scale(0);
  border-radius:40% 60% 55% 45% / 45% 55% 45% 55%;
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .35s ease, transform .45s var(--ease);
  filter:blur(28px);
}
.svc-item:hover::before{
  opacity:.55;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
  animation:haloSpin 4s linear infinite;
}
@keyframes haloSpin{
  0%  {border-radius:40% 60% 55% 45%/45% 55% 45% 55%; transform:translate(-50%,-50%) rotate(0deg) scale(1);}
  25% {border-radius:60% 40% 45% 55%/55% 45% 55% 45%;}
  50% {border-radius:45% 55% 60% 40%/40% 60% 40% 60%; transform:translate(-50%,-50%) rotate(180deg) scale(1);}
  75% {border-radius:55% 45% 40% 60%/60% 40% 60% 40%;}
  100%{border-radius:40% 60% 55% 45%/45% 55% 45% 55%; transform:translate(-50%,-50%) rotate(360deg) scale(1);}
}

/* Unique halo colour per nth item — 8 services */
.svc-item:nth-child(1)::before{background:radial-gradient(ellipse,rgba(58,63,255,.7) 0%,rgba(120,100,255,.4) 50%,transparent 75%)}
.svc-item:nth-child(2)::before{background:radial-gradient(ellipse,rgba(248,100,80,.7) 0%,rgba(255,60,100,.4) 50%,transparent 75%)}
.svc-item:nth-child(3)::before{background:radial-gradient(ellipse,rgba(248,160,38,.7) 0%,rgba(255,200,50,.4) 50%,transparent 75%)}
.svc-item:nth-child(4)::before{background:radial-gradient(ellipse,rgba(38,195,172,.7) 0%,rgba(60,220,180,.4) 50%,transparent 75%)}
.svc-item:nth-child(5)::before{background:radial-gradient(ellipse,rgba(200,50,200,.7) 0%,rgba(160,80,255,.4) 50%,transparent 75%)}
.svc-item:nth-child(6)::before{background:radial-gradient(ellipse,rgba(255,100,50,.7) 0%,rgba(255,150,80,.4) 50%,transparent 75%)}
.svc-item:nth-child(7)::before{background:radial-gradient(ellipse,rgba(0,180,120,.7) 0%,rgba(40,220,160,.4) 50%,transparent 75%)}
.svc-item:nth-child(8)::before{background:radial-gradient(ellipse,rgba(255,200,0,.7) 0%,rgba(255,160,30,.4) 50%,transparent 75%)}

/* Dark mode: slightly more opaque halos */
[data-theme=dark] .svc-item:hover::before{opacity:.7}

/* right col */
.svc-right{width:90px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:24px 6px;z-index:2}
.svc-rlabel{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(20,20,18,.22);writing-mode:vertical-rl;transform:rotate(180deg);transition:color .25s}
[data-theme=dark] .svc-rlabel{color:rgba(237,237,234,.16)}
/* floating video */
#svc-vid{position:fixed;width:255px;height:168px;overflow:hidden;border-radius:3px;pointer-events:none;z-index:200;opacity:0;transform:scale(.94);transition:opacity .25s,transform .25s;box-shadow:0 16px 48px rgba(0,0,0,.35)}
#svc-vid.on{opacity:1;transform:scale(1)}
#svc-vid video{width:100%;height:100%;object-fit:cover}

/* ─── TESTIMONIALS (sliding carousel) ────────
   Slides translate horizontally with opacity.
   Active = center, prev = exit left, next = waiting right.
─────────────────────────────────────────── */
.testi{padding:60px 24px;border-top:1px solid var(--brd2);background:var(--bg2);transition:background .3s;text-align:center}
/* fixed-height container so slides stack precisely */
.testi-track{position:relative;height:170px;overflow:hidden}
.testi-slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* start hidden to the right */
  opacity:0;transform:translateX(50px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.testi-slide.active{
  opacity:1;transform:translateX(0);
  pointer-events:all;
}
.testi-slide.exit{
  opacity:0;transform:translateX(-50px);
}
.testi-q{
  font-family:var(--fd);
  font-size:clamp(1.1rem,2.3vw,2.1rem);
  letter-spacing:.025em;text-transform:uppercase;line-height:1.22;
  color:var(--fg);max-width:760px;text-align:center;
  transition:color .3s;
}
.testi-by{margin-top:14px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);text-align:center;transition:color .3s}
.testi-by strong{color:var(--fg2);display:block;font-size:10px;transition:color .3s}
.testi-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px}
.testi-dot{width:6px;height:6px;border-radius:50%;background:var(--fg3);cursor:none;transition:background .3s,transform .3s}
.testi-dot.on{background:var(--fg);transform:scale(1.4)}

/* ─── FOOTER ─────────────────────────────────────────────────────────
   Layout inspired by makemepulse:
   Top row: info columns left (1/2 width) | big CTA heading right (1/2)
   Bottom bar: logo | socials row
──────────────────────────────────────────────────────────────────── */
.ftr-cta{
  border-top:1px solid var(--brd);
  padding:0;
}

/* ── Top section: info grid left + big CTA right ── */
.ftr-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
  border-bottom:1px solid var(--brd);
}

/* Left half: 4 info columns */
.ftr-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-right:1px solid var(--brd);
  padding:48px 40px 48px 48px;
  gap:32px;
  align-content:start;
}

/* Individual column */
.fi-col{}
.fi-label{
  font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:16px;display:block;
  transition:color .3s;
}
.fi-item{
  display:block;
  font-size:11px;line-height:1.75;color:var(--fg2);
  letter-spacing:.01em;
  transition:color .25s;
}
a.fi-item:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.fi-city{
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--fg);
  margin-bottom:6px;display:block;transition:color .3s;
}
.fi-addr{
  font-size:11px;line-height:1.7;color:var(--fg2);transition:color .3s;
}

/* Right half: big CTA */
.ftr-cta-right{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 48px 40px;
}
.fct-big{
  font-family:var(--fd);
  font-size:clamp(2.4rem,5vw,6rem);
  letter-spacing:.025em;text-transform:uppercase;
  line-height:.97;color:var(--fg);
  transition:color .3s;
  margin:0;
}
/* underline on the linked part */
.fct-big a{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
  color:inherit;
  transition:opacity .25s;
}
.fct-big a:hover{opacity:.65}
.say-hello{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--fg);padding:8px 16px;
  transition:opacity .25s;align-self:flex-start;margin-top:24px;
}
.say-hello:hover{opacity:.75}

/* ── Bottom bar: logo | socials ── */
.ftr-bottom{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:18px 48px;
  border-top:1px solid var(--brd);
}
.ftr-logo{
  display:flex;align-items:center;line-height:0;
}
.ftr-logo img{height:36px;width:auto;display:block}
.ftr-socials{
  display:flex;align-items:center;gap:28px;
  flex-wrap:wrap;
}
.ftr-socials a{
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);transition:color .25s;
}
.ftr-socials a:hover{color:var(--fg)}
.ftr-copy{
  font-size:9px;color:var(--fg3);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
}

/* ── video strip (kept above footer) ── */
.ftr-vids{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;overflow:hidden}
.fv{aspect-ratio:9/16;overflow:hidden;background:var(--bg2)}
.fv video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fv:hover video{transform:scale(1.06)}

/* ─── Responsive ─────────── */
@media (max-width:1023px){
  .ftr-info-grid{grid-template-columns:1fr 1fr;padding:32px 28px}
  .ftr-cta-right{padding:32px 28px}
  .ftr-bottom{padding:16px 28px;grid-template-columns:auto 1fr}
  .ftr-copy{display:none}
  .ftr-vids{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
  .ftr-top{grid-template-columns:1fr}
  .ftr-info-grid{border-right:none;border-bottom:1px solid var(--brd);grid-template-columns:1fr 1fr;padding:28px 20px;gap:20px}
  .ftr-cta-right{padding:28px 20px}
  .fct-big{font-size:clamp(2rem,8vw,4.5rem)}
  .ftr-bottom{padding:14px 20px;grid-template-columns:1fr}
  .ftr-logo{margin-bottom:8px}
  .ftr-vids{grid-template-columns:repeat(2,1fr)}
}

/* ─── FOOTER WORDMARK ──────────────────────
   "DESIGN" fills full viewport width via JS scaleX.
   scaleY grows 1→1.5 as page scrolls to bottom.
─────────────────────────────────────────── */
/* Footer wordmark removed — .ftr-wm-wrap hidden everywhere */
.ftr-wm-wrap{display:none!important}

/* ─── CONTACT PAGE ──────────────────────────
   Dark bg, balanced sizing (not oversized)
─────────────────────────────────────────── */
.contact-wrap{
  min-height:100vh;
  /* Light: cream bg with dark text; Dark: near-black with light text */
  background:var(--bg2);color:var(--fg);
  padding:0 48px 56px;transition:background .3s,color .3s;
}
[data-theme=dark] .contact-wrap{background:#0e0e0c;color:#ededea}
.ct-hero{
  padding:104px 0 28px;  /* extra top padding to move title+form down */
  border-bottom:1px solid var(--brd2);
  margin-bottom:22px;
}
.ct-title{
  font-family:var(--fd);font-size:clamp(1.7rem,3.8vw,4.2rem);
  letter-spacing:.03em;text-transform:uppercase;line-height:.95;
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
}
.ct-photo{width:72px;height:54px;object-fit:cover;object-position:top;border-radius:3px;flex-shrink:0;margin-bottom:.06em;border:2px solid var(--brd)}
.ct-form{max-width:620px}
.cf-row{
  display:grid;grid-template-columns:78px 1fr;align-items:start;
  padding:8px 0;border-bottom:1px solid var(--brd2);gap:12px;
}
.cf-lbl{
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg3);padding-top:5px;transition:color .3s;
}
.cf-inp{
  background:transparent;border:none;outline:none;
  font-family:var(--fd);font-size:clamp(.9rem,1.7vw,1.6rem);
  letter-spacing:.03em;text-transform:uppercase;
  /* Light: dim dark; Dark: dim light */
  color:var(--fg3);
  width:100%;caret-color:var(--blue);transition:color .28s;
}
.cf-inp:focus{color:var(--fg)}
.cf-inp::placeholder{color:var(--fg3)}
.cf-pills{display:flex;gap:5px;flex-wrap:wrap;padding:4px 0}
.cf-pill{
  font-family:var(--fd);font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border:1px solid var(--brd);
  color:var(--fg2);cursor:none;transition:all .2s;
}
.cf-pill.on,.cf-pill:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.cf-legal{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-top:18px;margin-bottom:20px}
.cf-send{
  font-family:var(--fd);font-size:clamp(1.2rem,2.2vw,2.2rem);
  letter-spacing:.03em;text-transform:uppercase;
  background:transparent;border:none;cursor:none;
  color:var(--fg3);width:100%;text-align:left;
  padding:6px 0;border-top:1px solid var(--brd2);
  transition:color .28s;
}
.cf-send:hover{color:var(--fg)}

/* ─── WORK PAGE ──────────────────────────── */
.work-head{
  padding:110px 24px 10px;
  display:flex;
  justify-content:flex-end;
}
.work-title{font-family:var(--fd);font-size:clamp(4rem,12vw,12rem);letter-spacing:.03em;text-transform:uppercase;line-height:.95;color:var(--fg);overflow:hidden;transition:color .3s;text-align:right;}
.work-title span{display:block;animation:slideUp .8s var(--ease) .1s both}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.work-list{border-top:1px solid var(--brd2)}
.wr{display:grid;grid-template-columns:40px 1fr 165px 48px;align-items:center;gap:14px;padding:11px 24px;border-bottom:1px solid var(--brd2);cursor:none;transition:padding-left .28s,background .28s}
.wr:hover{padding-left:36px;background:var(--bg2)}
.wr-num{font-size:9px;color:var(--fg3);font-variant-numeric:tabular-nums}
.wr-name{font-family:var(--fd);font-size:clamp(1rem,1.9vw,1.65rem);letter-spacing:.03em;text-transform:uppercase;transition:color .3s}
.wr-desc{font-size:10px;color:var(--fg3);font-style:italic}
.wr-year{font-size:9px;color:var(--fg3);text-align:right;letter-spacing:.08em}
#wr-prev{position:fixed;width:235px;height:168px;border-radius:3px;overflow:hidden;pointer-events:none;z-index:200;opacity:0;transform:scale(.94);transition:opacity .25s,transform .25s}
#wr-prev.on{opacity:1;transform:scale(1)}
#wr-prev video{width:100%;height:100%;object-fit:cover}

/* ─── OTHER PAGES ────────────────────────── */
.page-head{padding:88px 24px 10px}
.page-title{font-family:var(--fd);font-size:clamp(4rem,12vw,12rem);letter-spacing:.03em;text-transform:uppercase;line-height:.95;color:var(--fg);overflow:hidden;transition:color .3s}
.page-title span{display:block;animation:slideUp .8s var(--ease) .1s both}
.svc-hero-full{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.svc-hero-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.3)}
.svc-hero-full h1{font-family:var(--fd);font-size:clamp(5rem,15vw,15rem);letter-spacing:.03em;text-transform:uppercase;color:#fff;position:relative;z-index:2}
.svc-hero-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:9px;color:rgba(255,255,255,.25);letter-spacing:.1em;text-transform:uppercase;z-index:2}
.svc-blocks{padding:48px 24px}
.sb{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:40px 0;border-bottom:1px solid var(--brd2);align-items:start}
.sb-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px}
.sb-title{font-family:var(--fd);font-size:clamp(1.8rem,3.8vw,3.5rem);letter-spacing:.03em;text-transform:uppercase;line-height:1;margin-bottom:14px}
.sb-desc{font-size:12px;line-height:1.85;color:var(--fg2);margin-bottom:14px}
.sb-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.sb-tag{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);background:var(--brd2);padding:3px 8px}
.sb-more{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);display:inline-flex;align-items:center;gap:5px;transition:gap .25s}
.sb-more:hover{gap:9px}
.sb-vid{overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.sb-vid video{width:100%;height:100%;object-fit:cover}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:40px 24px;border-top:1px solid var(--brd2)}
.studio-txt{font-size:12px;line-height:1.9;color:var(--fg2)}
.photo-strip{overflow:hidden}
.ps-track{display:flex;gap:10px;width:max-content;animation:psAnim 22s linear infinite}
@keyframes psAnim{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ps-img{width:200px;height:265px;object-fit:cover;flex-shrink:0}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:36px 24px;border-top:1px solid var(--brd2)}
.tm-img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(15%);transition:filter .4s;margin-bottom:8px}
.tm:hover .tm-img{filter:grayscale(0)}
.tm-name{font-family:var(--fd);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.tm-role{font-size:9px;color:var(--fg3);letter-spacing:.1em;text-transform:uppercase}
.vals-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--brd);border-left:1px solid var(--brd);margin:0 24px}
.val-item{padding:28px 22px;border-right:1px solid var(--brd);border-bottom:1px solid var(--brd);transition:background .28s}
.val-item:hover{background:var(--bg2)}
.val-title{font-family:var(--fd);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px}
.val-body{font-size:11px;line-height:1.75;color:var(--fg2)}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:40px 24px;border-top:1px solid var(--brd2)}
.ap-title{font-family:var(--fd);font-size:clamp(1.4rem,3vw,2.8rem);letter-spacing:.03em;text-transform:uppercase;line-height:1.05}
.ap-body{font-size:12px;line-height:1.85;color:var(--fg2)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:40px 24px;border-top:1px solid var(--brd2)}
.pil-label{font-size:8px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px}
.pil-title{font-family:var(--fd);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.pil-body{font-size:11px;line-height:1.75;color:var(--fg2)}
.timeline{padding:40px 24px;border-top:1px solid var(--brd2)}
.tl-eyebrow{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:28px}
.tl-steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.tl-steps::before{content:'';position:absolute;top:10px;left:0;right:0;height:1px;background:var(--brd)}
.tl-step{padding-top:22px;position:relative;padding-right:10px}
.tl-step::before{content:'';position:absolute;top:5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--bg);outline:1px solid var(--brd);transition:background .3s,border-color .3s}
.tl-label{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-bottom:4px}
.tl-t{font-family:var(--fd);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.tl-d{font-size:10px;line-height:1.6;color:var(--fg2)}

/* ─── SCROLL REVEAL ─────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.rv.vis{opacity:1;transform:translateY(0)}
.rvl{opacity:0;transform:translateX(-22px);transition:opacity .6s,transform .6s}
.rvl.vis{opacity:1;transform:translateX(0)}

/* ─── COOKIE ─────────────────────────────── */
#cookie{position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--bg);border-top:1px solid var(--brd);padding:8px 24px;display:flex;align-items:center;justify-content:space-between;transform:translateY(100%);transition:transform .5s var(--ease),background .3s}
#cookie.show{transform:translateY(0)}
.ck-txt{font-size:9px;color:var(--fg2);letter-spacing:.05em}
.ck-btn{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);background:var(--fg);padding:4px 12px;cursor:none;transition:opacity .25s}
.ck-btn:hover{opacity:.75}

/* ─── PAGE TRANSITION ─────────────────────── */
#pt{position:fixed;inset:0;z-index:9999;background:var(--fg);transform:scaleY(0);transform-origin:bottom;pointer-events:none;transition:background .3s}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — optimised for mobile, tablet, laptop, large desktop
   NO design or layout changes. Sizing/spacing/visibility only.
═══════════════════════════════════════════════════════════════════ */

/* ── Large desktop (1440px+) ─────────────────────────────────────── */
@media (min-width:1440px){
  /* Give more breathing room on wide screens */
  #nav,.menu-bar,.menu-foot,
  .proj-head,.proj-grid,.svc-blocks,
  .ftr-cta,.ftr-nav,
  .contact-wrap,.page-head,.work-head,
  .work-list .wr,
  .ap-grid,.pillars,.timeline,
  .studio-grid,.team-grid,
  .vals-grid,.testi{
    padding-left:48px;padding-right:48px;
  }
  .proj-grid,.p-grid{padding-left:48px;padding-right:48px}
  .vals-grid{margin-left:48px;margin-right:48px}
  .menu-col{padding-left:72px;padding-right:72px}
  .svc-left{width:240px}
  .svc-right{width:110px}
}

/* ── Laptop (1024px – 1439px) ────────────────────────────────────── */
@media (min-width:1024px) and (max-width:1439px){

  /* ── Topbar & Nav ── */
  #nav{padding:0 20px}
  /* ── Hero — fits 13–15" screens without overflow ── */
  .hero-h1{font-size:clamp(3.8rem,8.5vw,9.5rem);line-height:1.03}
  /* push text up slightly so both lines and footer hints all fit at 768px height */
  .hero{min-height:520px}
  .hero-foot{bottom:14px}

  /* ── Menu ── */
  .menu-col{padding:0 36px}
  .menu-col a{font-size:clamp(2.2rem,5.2vw,5.8rem)}
  .lnk-img{width:62px;height:45px}
  .menu-bar{padding:0 20px}
  .menu-foot{padding:0 20px}

  /* ── Manifesto ── */
  .mf{padding:52px 20px 60px}
  .mf-line{font-size:clamp(1.7rem,5.2vw,6rem)}

  /* ── Projects ── */
  .proj-head{padding:24px 20px 10px}
  .proj-title{font-size:clamp(2.8rem,9vw,9rem)}
  .proj-grid{padding:0 20px}

  /* ── Services ── */
  .svc-left{width:180px;padding:18px 14px}
  .svc-right{width:80px;padding:18px 5px}
  .svc-item{font-size:clamp(1.9rem,3.9vw,4.8rem)}
  .svc-item:hover,.svc-item.act{font-size:clamp(2.3rem,5vw,5.8rem)}

  /* ── Testimonial ── */
  .testi{padding:48px 20px}
  .testi-q{font-size:clamp(1rem,1.9vw,1.85rem)}
  /* ensure track doesn't clip on short laptop screens */
  .testi-track{height:160px}

  /* ── Footer ── */
  .ftr-cta{padding:40px 20px 20px}
  .ftr-nav{gap:28px;padding:22px 0}
  .ftr-vids{gap:2px;margin-bottom:22px}

  /* ── Inner pages ── */
  .svc-blocks{padding:40px 20px}
  .sb{gap:36px;padding:32px 0}
  .studio-grid{padding:32px 20px;gap:36px}
  .team-grid{padding:28px 20px}
  .vals-grid{margin:0 20px}
  .ap-grid{padding:32px 20px;gap:36px}
  .pillars{padding:32px 20px;gap:22px}
  .timeline{padding:32px 20px}
  .page-head,.work-head{padding:80px 20px 8px}
  .work-list .wr{padding:10px 20px}

  /* ── Contact ── */
  .contact-wrap{padding:0 32px 40px}
  .ct-hero{padding:84px 0 20px}
  .ct-title{font-size:clamp(2.4rem,5vw,5.5rem)}
  .cf-inp{font-size:clamp(.95rem,1.7vw,1.7rem)}
}

/* ── Tablet (768px – 1023px) ─────────────────────────────────────── */
@media (max-width:1023px){

  /* Cursor — hide on touch-primary devices */
  #cur-dot,#cur-ring{display:none}
  body{cursor:auto}
  a,button,[data-ot],.svc-item,.pc,.wr,.hw{cursor:pointer}

  /* Hero */
  .hero-h1{font-size:clamp(3.5rem,8.5vw,8rem)}
  .hero-foot-l{display:none} /* only keep right clock on tablet */

  /* Menu font */
  .menu-col a{font-size:clamp(2rem,5.5vw,5.5rem)}
  .menu-col{padding:0 32px}
  .lnk-img{width:58px;height:42px}

  /* Talk panel full width */
  #talk-panel{width:100%;border-left:none}

  /* Manifesto */
  .mf-line{font-size:clamp(1.6rem,5vw,5.5rem)}

  /* Projects — 3-col becomes 2-col */
  .pc-3col{grid-template-columns:1fr 1fr}

  /* Services — hide review cards panel and right label on tablet */
  .svc-left{display:none}
  .svc-right{display:none}
  .svc-item{font-size:clamp(2rem,5.5vw,6.5rem);white-space:nowrap}
  .svc-item:hover,.svc-item.act{font-size:clamp(2.4rem,6.5vw,7.5rem)}

  /* Testimonial */
  .testi-track{height:200px}

  /* Footer */
  .fct-top{flex-direction:column;align-items:flex-start;gap:16px}
  .ftr-vids{grid-template-columns:repeat(3,1fr)}
  .ftr-nav{grid-template-columns:1fr 1fr;gap:24px}

  /* Service blocks */
  .sb{gap:32px}

  /* Studio / approach grids */
  .studio-grid{gap:32px}
  .ap-grid{gap:32px}
  .pillars{grid-template-columns:1fr 1fr}

  /* Timeline — wrap to 3 cols */
  .tl-steps{grid-template-columns:repeat(3,1fr);gap:0 12px}
  .tl-steps::before{display:none}

  /* Work list — hide description col */
  .wr{grid-template-columns:36px 1fr 48px}
  .wr-desc{display:none}

  /* Vals grid — stays 2-col, fine */

  /* Contact */
  .cf-row{grid-template-columns:65px 1fr;gap:8px}
}

/* ── Mobile landscape + large phones (600px – 767px) ─────────────── */
@media (max-width:767px){

  /* Topbar — show only tagline */
  .tb-clocks{display:none}
  /* Nav — hide theme toggle */
  .theme-btn{display:none}

  /* Hero */
  .hero-h1{font-size:clamp(3rem,10vw,7rem);line-height:1.04}
  .hero-foot-r{display:none}

  /* Menu — single column stacked */
  .menu-body{grid-template-columns:1fr}
  .menu-col:first-child{border-right:none;border-bottom:1px solid var(--brd2)}
  .menu-col{padding:20px 28px}
  .menu-col a{font-size:clamp(2.2rem,9vw,5rem);line-height:1.02}
  .menu-foot-right{display:none}
  .menu-foot{justify-content:center}

  /* Manifesto */
  .mf{padding:48px 16px 56px}
  .mf-line{font-size:clamp(1.4rem,7.5vw,4.5rem)}

  /* Projects heading */
  .proj-head{flex-direction:column;align-items:flex-start;gap:12px}
  .proj-title{font-size:clamp(2.5rem,12vw,7rem)}

  /* Projects — 2-col and 3-col become 1-col */
  .pc-2col{grid-template-columns:1fr}
  .pc-3col{grid-template-columns:1fr}
  .pc.wide{aspect-ratio:16/9}
  .proj-grid{padding:0 16px}

  /* Services */
  .svc-item{font-size:clamp(2rem,8vw,5.5rem);white-space:normal;text-align:center}
  .svc-item:hover,.svc-item.act{font-size:clamp(2.4rem,9vw,6.5rem)}
  .svc-mid{padding:24px 16px}

  /* Testimonial */
  .testi{padding:40px 16px}
  .testi-track{height:220px}
  .testi-q{font-size:clamp(1rem,4.5vw,1.8rem)}

  /* Footer */
  .ftr-cta{padding:36px 16px 16px}
  .ftr-vids{grid-template-columns:repeat(2,1fr)}
  .ftr-nav{grid-template-columns:1fr 1fr;gap:20px;padding:20px 0}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:6px}

  /* Footer wordmark */

  /* Service blocks */
  .sb{grid-template-columns:1fr;gap:24px}
  .sb-vid{display:none} /* hide video on mobile to save space */
  .svc-blocks{padding:32px 16px}

  /* Studio */
  .studio-grid{grid-template-columns:1fr;gap:24px;padding:28px 16px}
  .team-grid{grid-template-columns:1fr 1fr;gap:12px;padding:24px 16px}
  .vals-grid{grid-template-columns:1fr;margin:0 16px}

  /* Approach */
  .ap-grid{grid-template-columns:1fr;gap:20px;padding:28px 16px}
  .pillars{grid-template-columns:1fr;gap:24px;padding:28px 16px}
  .timeline{padding:28px 16px}
  .tl-steps{grid-template-columns:1fr 1fr}
  .tl-steps::before{display:none}

  /* Work list */
  .wr{grid-template-columns:32px 1fr 40px;gap:10px;padding:10px 16px}
  .work-head{padding:20px 16px 8px}

  /* Contact page */
  .contact-wrap{padding:0 16px 36px}
  .ct-hero{padding:80px 0 20px} /* account for nav on mobile */
  .ct-title{font-size:clamp(2rem,8vw,4.5rem);gap:10px}
  .ct-photo{width:68px;height:50px}
  .ct-form{max-width:100%}
  .cf-row{grid-template-columns:64px 1fr;gap:8px}
  .cf-inp{font-size:clamp(.9rem,3.5vw,1.4rem)}

  /* Misc page heads */
  .page-head{padding:20px 16px 8px}
  .page-title{font-size:clamp(3rem,12vw,7rem)}
  .work-title{font-size:clamp(3rem,12vw,7rem)}
  .svc-hero-full h1{font-size:clamp(3.5rem,14vw,10rem)}
}

/* ── Mobile portrait (up to 599px) ──────────────────────────────── */
@media (max-width:599px){

  /* Nav compact */
  #nav{padding:0 14px}
  .nav-logo{font-size:19px}
  .nav-right{gap:8px}
  .nav-cta{padding:5px 10px;font-size:8px}

  /* Menu */
  .menu-bar{padding:0 16px}
  .menu-bar-logo{font-size:19px}
  .menu-bar-right{gap:12px}
  .menu-col a{font-size:clamp(2rem,11vw,4.5rem)}
  .lnk-img{display:none} /* hide hover imgs on small mobile */

  /* Hero */
  .hero-h1{font-size:clamp(2.6rem,11.5vw,6rem)}

  /* Manifesto */
  .mf-line{font-size:clamp(1.2rem,8.5vw,4rem)}
  .img-stack{display:none!important} /* stack images too large for small phones */

  /* Projects */
  .proj-title{font-size:clamp(2rem,13.5vw,5.5rem)}
  .pc-2col,.pc-3col{grid-template-columns:1fr}

  /* Footer videos — single column */
  .ftr-vids{grid-template-columns:repeat(3,1fr)}
  .ftr-nav{grid-template-columns:1fr}

  /* Work rows — minimal */
  .wr{grid-template-columns:28px 1fr;gap:8px;padding:9px 14px}
  .wr-year{display:none}

  /* Timeline — single col */
  .tl-steps{grid-template-columns:1fr 1fr}

  /* Team — single col */
  .team-grid{grid-template-columns:1fr}

  /* Talk panel */
  #talk-panel{width:100vw}

  /* Vals */
  .vals-grid{margin:0 14px}
  .val-item{padding:20px 16px}

  /* Service blocks */
  .sb{padding:24px 0}
  .sb-title{font-size:clamp(1.5rem,6vw,2.5rem)}
}

/* ── Prevent horizontal overflow on all sizes ──────────────────── */
@media (max-width:1023px){
  .svc-item{white-space:normal;word-break:break-word}
  .testi-track{height:auto;min-height:160px}
  .testi-slide{position:relative;inset:auto;display:none}
  .testi-slide.active{display:flex}
  .testi-slide.exit{display:none}
}

/* ─── LOGO ─────────────────────────────────── */
.logo-light{display:block}
.logo-dark{display:none!important}
[data-theme=dark] .logo-light{display:none!important}
[data-theme=dark] .logo-dark{display:block!important}

/* ─── FOOTER LOGO ──────────────────────────── */
.ftr-logo{display:flex;align-items:center;margin-bottom:18px}
.ftr-logo img{height:56px;width:auto;display:block}

.full-video{
  width:100%;
  height:90vh; /* full screen height */
  overflow:hidden;
  position:relative;
}

.full-video video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.video-wrap{
  padding: 15px 15px; /* space from top + sides */
}

.video-box{
  width:100%;
  height:90vh; /* adjust if needed */
  border-radius:10px; /* rounded corners */
  overflow:hidden;
}

.video-box video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}