/* nº08 studio — landing styles */
:root{
  --white:#ffffff;
  --black:#202124;
  --beige:#f4f3f1;
  --pad-x: clamp(20px, 4vw, 64px);
  --gap: clamp(40px, 6vw, 96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight:400;
  color:var(--black);
  background:var(--white);
  line-height:1.55;
  font-size:13px;
  letter-spacing:0.01em;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---- Top bar (over hero) ---- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--pad-x);
  color:#fff;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.topbar .socials{display:flex; gap:18px}
.topbar .socials a{display:inline-flex; opacity:.95; transition:opacity .25s}
.topbar .socials a:hover{opacity:.6}
.topbar .socials svg{width:18px;height:18px;color:#fff;fill:#fff}
.topbar .logo-mini{height:22px}
.topbar .lang{display:flex; gap:10px; font-size:12px; letter-spacing:.08em}
.topbar .lang button{font-weight:500; opacity:.55; transition:opacity .25s}
.topbar .lang button.active{opacity:1; text-decoration:underline; text-underline-offset:4px}
.topbar .lang .sep{opacity:.55}

/* ---- Hero ---- */
.hero{
  position:relative;
  width:100%;
  background:#000;
  overflow:hidden;
  display:block;
}
.hero-media{
  position:relative;
  width:100%;
  background:#000;
  display:block;
  line-height:0;
}
.hero-media video,
.hero-media .video-fallback{
  display:block;
  width:100%;
  height:auto;
  background:#0a0a0a;
}
.hero-media .video-fallback{
  display:flex;align-items:center;justify-content:center;
  color:#888; font-size:11px; letter-spacing:.15em;
  background:repeating-linear-gradient(45deg,#111 0 12px,#161616 12px 24px);
}
.hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  padding: 0 var(--pad-x);
  gap: clamp(14px, 2vw, 22px);
  pointer-events:none;
}
.hero-overlay .logo-big{
  width: clamp(180px, 28vw, 360px);
  height:auto;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,.35));
}
.hero-overlay .tagline-1{
  font-weight:500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing:.18em;
  margin-top: 4px;
}
.hero-overlay .tagline-2{
  font-weight:400;
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing:.18em;
  opacity:.92;
}
.hero-overlay .tagline-3{
  margin-top: clamp(20px, 3vw, 36px);
  font-weight:500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing:.18em;
}
.scroll-cue{
  position:absolute;
  left:0; right:0; bottom: 24px;
  z-index: 5;
  text-align:center;
  font-size:11px; letter-spacing:.32em; font-weight:500;
  color:#fff;
  background: transparent;
  pointer-events:none;
}

/* ---- Generic section ---- */
section{padding: clamp(60px, 9vw, 130px) var(--pad-x)}
.section-narrow{max-width:1100px;margin:0 auto}

/* ---- Presentation ---- */
.presentation{
  background:var(--white);
  text-align:center;
}
.presentation p{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height:1.9;
  max-width: 1040px;
  margin: 0 auto;
}
.presentation p + p{margin-top: 1.6em}

/* ---- Marquee black bar ---- */
.marquee{
  background:var(--black);
  color:#3a3a3e;
  padding: 28px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  gap: 80px;
  animation: marquee 38s linear infinite;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size: clamp(13px, 1.2vw, 15px);
  padding-left: 80px;
}
.marquee-track span{flex:none}
.marquee-track::after{content:""; display:inline-block; width:0}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee.slow .marquee-track{animation-duration:55s}

/* ---- Full bleed image / video ---- */
.fullbleed{
  background:var(--white);
  display:flex;
  justify-content:center;
}
.fullbleed img,
.fullbleed video{
  width:100%;
  height:auto;
  object-fit:contain;
}
.fullbleed.placeholder{
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(45deg,#ececea 0 14px,#f4f3f1 14px 28px);
  align-items:center;
  color:#999;
  font-size:11px; letter-spacing:.2em;
}
.fullbleed.placeholder span{
  margin:auto;
  text-transform:uppercase;
}

/* ---- Based in ---- */
.based{
  background:var(--white);
  text-align:center;
  padding: clamp(60px, 9vw, 110px) var(--pad-x);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size: clamp(11px, 1vw, 13px);
  line-height:2;
}
.based em{font-style:italic; font-weight:500}

/* ---- Services ---- */
.services{
  background:var(--black);
  color:#fff;
  padding: clamp(70px, 9vw, 130px) var(--pad-x);
}
.services h2{
  font-weight:500;
  font-size: 11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-align:center;
  margin-bottom: clamp(40px, 6vw, 80px);
  opacity:.85;
}
.services-list{
  max-width: 980px;
  margin: 0 auto;
  display:flex; flex-direction:column;
}
.services-list .row{
  display:grid;
  grid-template-columns: 60px 1fr;
  align-items:center;
  gap: 36px;
  padding: 26px 6px;
  border-top:1px solid rgba(255,255,255,.18);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size: clamp(12px, 1.05vw, 14px);
}
.services-list .row:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.services-list .row .num{opacity:.75; font-weight:500}

/* ---- Portfolio block ---- */
.portfolio{
  background:var(--white);
  padding: clamp(60px, 8vw, 110px) var(--pad-x) clamp(40px, 6vw, 80px);
  position:relative;
}
.portfolio-head{
  display:flex; justify-content:space-between; gap:24px;
  font-weight:500; font-size:12px; letter-spacing:.06em;
  margin-bottom: clamp(60px, 9vw, 130px);
}
.portfolio-head .right{ text-align:right; line-height:1.9 }
.portfolio-head a{border-bottom:1px solid transparent; transition:border-color .25s}
.portfolio-head a:hover{border-bottom-color:currentColor}

/* Asymmetric grid */
.portfolio-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(24px, 3vw, 50px) clamp(20px, 2.4vw, 36px);
  max-width: 1280px;
  margin: 0 auto;
}
.fig{position:relative}
.fig .num{
  position:absolute; top:-22px; left:0;
  font-weight:700; font-size:11px; letter-spacing:.2em;
}
.fig .img{
  background: repeating-linear-gradient(45deg,#ececea 0 14px,#f4f3f1 14px 28px);
  width:100%;
  display:flex;align-items:center;justify-content:center;
  color:#aaa; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden;
}
.fig .img img,.fig .img video{width:100%;height:100%;object-fit:cover}
.fig.contain .img img,.fig.contain .img video{object-fit:contain;background:#f4f3f1}

/* Layout per spec — irregular */
.fig-1{grid-column: 7 / span 3; aspect-ratio: 1/1}
.fig-2{grid-column: 10 / span 3; aspect-ratio: 1/1}
.fig-3{grid-column: 7 / span 3; aspect-ratio: 1/1; margin-top: 30px}
.fig-4{grid-column: 10 / span 3; aspect-ratio: 1/1; margin-top: 30px}
.fig-5{grid-column: 1 / span 3; aspect-ratio: 3/4; margin-top: 110px; grid-row: 3}
.fig-6{grid-column: 10 / span 3; aspect-ratio: 3/4; margin-top: 60px}
.fig-7{grid-column: 1 / span 3; aspect-ratio: 3/4; margin-top: 0}
.fig-8{grid-column: 5 / span 6; aspect-ratio: 4/5; margin-top: 80px}

.portfolio-quote-1, .portfolio-quote-2{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.7;
  font-size: clamp(11px, 1vw, 13px);
  max-width: 240px;
}
.portfolio-quote-1{grid-column: 5 / span 4; align-self:start; margin-top: -10px}
.portfolio-quote-2{grid-column: 1 / span 4; align-self:start; margin-top: 60px}

@media (max-width: 820px) and (min-width: 761px){
  .portfolio-grid{grid-template-columns: repeat(6, 1fr); gap:30px}
  .fig-1{grid-column:1 / span 4}
  .fig-2{grid-column:3 / span 4; margin-top:0}
  .fig-3{grid-column:1 / span 4}
  .fig-4{grid-column:1 / span 6; margin-top:0}
  .fig-5{grid-column:1 / span 3}
  .fig-6{grid-column:4 / span 3; margin-top:0}
  .fig-7{grid-column:1 / span 3}
  .fig-8{grid-column:2 / span 5; margin-top:0}
  .portfolio-quote-1, .portfolio-quote-2{grid-column:1 / -1; max-width:none}
}

/* ---- Vision quote (black) ---- */
.vision{
  background:var(--black); color:#fff;
  text-align:center;
  padding: clamp(80px, 12vw, 160px) var(--pad-x);
}
.vision .big{
  font-weight:500;
  text-transform:uppercase;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing:.1em;
  line-height:1.5;
}
.vision .small{
  margin-top: 14px;
  font-weight:400;
  text-transform:uppercase;
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing:.16em;
  opacity:.85;
}

/* ---- Founder ---- */
.founder{
  background:var(--white);
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.founder-eyebrow{
  text-align:center;
  font-size:11px; letter-spacing:.32em; font-weight:500;
  text-transform:uppercase; opacity:.85;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.founder-inner{
  max-width: 880px; margin: 0 auto;
}
.founder-eyebrow-2{
  font-size:11px; letter-spacing:.18em; font-weight:500;
  text-transform:uppercase; opacity:.85;
  margin-bottom: 18px;
}
.founder h2{
  font-weight:500;
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing:-.01em;
  line-height:1.05;
  text-transform:uppercase;
  margin-bottom: clamp(28px, 4vw, 50px);
}
.founder h2 .name2{display:block}
.founder p{
  font-size: clamp(12px, 1.02vw, 13.5px);
  line-height:1.85;
  text-align:justify;
  margin-bottom: 1.3em;
}
.founder .lead{font-weight:500}
.cta-talk{
  display:inline-flex; align-items:center; gap:14px;
  margin-top: 14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size: 13px;
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
  transition: gap .3s ease;
}
.cta-talk:hover{gap:22px}
.cta-talk .arrow{display:inline-block; transition: transform .3s}
.cta-talk:hover .arrow{transform: translateX(6px)}

/* ---- Brands strip ---- */
.brands{
  background:var(--beige);
  text-align:center;
  padding: clamp(50px, 7vw, 90px) var(--pad-x);
}
.brands p{
  font-size: clamp(11px, .95vw, 12.5px);
  letter-spacing:.04em;
  line-height:1.9;
  max-width: 1000px; margin: 0 auto;
}
.brands .label{
  margin-bottom: 1.4em;
  font-weight:500;
  text-transform:none;
}
.brands .list{font-weight:400; text-transform:uppercase; letter-spacing:.08em}

/* ---- Showcase double ---- */
.showcase{
  background:var(--white);
  padding: clamp(60px, 8vw, 110px) var(--pad-x);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 50px);
  max-width: 1100px;
  margin: 0 auto;
}
.showcase .slot{
  aspect-ratio: 3/4;
  background: repeating-linear-gradient(45deg,#ececea 0 14px,#f4f3f1 14px 28px);
  display:flex;align-items:center;justify-content:center;
  color:#aaa; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden;
}
.showcase .slot img,.showcase .slot video{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
  .showcase{grid-template-columns:1fr 1fr; gap: 8px}
  .showcase .slot{aspect-ratio: 3/4}
}

/* ---- Talk CTA section ---- */
.talk{
  background:var(--beige);
  padding: clamp(70px, 10vw, 130px) var(--pad-x);
  text-align:center;
}
.talk h3{
  font-weight:700;
  text-transform:uppercase;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing:.06em;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.talk p{
  max-width: 760px; margin: 0 auto;
  font-size: clamp(12px, 1.02vw, 13.5px);
  line-height:1.9;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
}
.talk .email{
  display:block;
  margin: clamp(28px, 4vw, 44px) auto;
  font-weight:500;
  text-decoration:underline; text-underline-offset:5px;
  font-size: 13px;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--black); color:#fff;
  padding: 18px 32px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size: 12px;
  transition: gap .3s, background .3s;
}
.btn-primary:hover{gap:22px; background:#000}
.btn-primary .arrow{transition: transform .3s}
.btn-primary:hover .arrow{transform: translateX(6px)}

/* ---- Footer ---- */
footer{
  background:var(--black); color:#fff;
  padding: clamp(50px, 6vw, 80px) var(--pad-x) 30px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:30px;
  padding-bottom: clamp(50px, 7vw, 90px);
}
.footer-top .logo-foot{height: 26px}
.footer-top .socials{
  display:flex; flex-direction:column; gap:10px;
  font-size: 12px; letter-spacing:.04em;
}
.footer-top .socials a{display:inline-flex;align-items:center;gap:10px; opacity:.95; transition:opacity .25s}
.footer-top .socials a:hover{opacity:.6}
.footer-top .socials svg{width:16px;height:16px;color:#fff;fill:#fff}
.footer-legal{
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  font-size: 11px; letter-spacing:.06em; opacity:.75;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top: 24px;
}
.footer-legal a{border-bottom:1px solid rgba(255,255,255,.4); transition:border-color .25s}
.footer-legal a:hover{border-bottom-color:#fff}
.footer-tag{
  text-align:center;
  margin-top: clamp(40px, 6vw, 70px);
  font-size: 11px; letter-spacing:.32em; font-weight:500;
  text-transform:uppercase;
  opacity:.9;
}

/* ---- Floating side socials ---- */
.side-socials{
  position: fixed;
  right: clamp(10px, 1.6vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display:flex; flex-direction:column;
  gap: 16px;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events:none;
}
.side-socials.visible{opacity:1; pointer-events:auto}
.side-socials a{
  width: 34px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  color:var(--black);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 1px solid rgba(32,33,36,.12);
  transition: transform .3s, background .3s;
}
.side-socials a:hover{transform: scale(1.08); background:#fff}
.side-socials svg{width:16px;height:16px;color:currentColor;fill:currentColor}

/* ---- Scroll reveal ---- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in{opacity:1; transform:none}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}

/* Subtle parallax/scale for media on scroll */
.parallax-img{
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  transform: scale(1.04);
}
.parallax-img.in{transform: scale(1)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .parallax-img{transform:none; transition:none}
  .marquee-track{animation:none}
}

/* ---------- Mobile-only adjustments ---------- */
@media (max-width: 820px){
  /* Hero — video shows entirely (no crop) on mobile too */
  .hero-media{
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }
  .hero-media video,
  .hero-media .video-fallback{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .hero-overlay .logo-big{
    width: clamp(160px, 55vw, 260px);
  }
  .scroll-cue{ bottom: 18px; font-size: 10px; }
}

/* ============ MOBILE ============ */
@media (max-width: 760px){
  :root{
    --pad-x: 16px;
  }
  /* Top bar — compact */
  .topbar{padding: 14px 14px 0}
  .topbar .socials{gap:10px}
  .topbar .socials svg{width:14px;height:14px}
  .topbar .logo-mini{height:14px}
  .topbar .lang{font-size:9px}

  /* Hero */
  .hero-overlay .logo-big{width: clamp(140px, 50vw, 220px)}
  .hero-overlay .tagline-1,
  .hero-overlay .tagline-2,
  .hero-overlay .tagline-3{font-size: 9px; letter-spacing:.16em}
  .scroll-cue{font-size:9px; letter-spacing:.28em; bottom:14px}

  /* Presentation */
  .presentation{padding: 60px 16px}
  .presentation p{font-size: 10px; letter-spacing:.04em; line-height:1.85}

  /* Marquee */
  .marquee{padding: 18px 0}
  .marquee-track{font-size: 10px; gap: 40px; padding-left: 40px; letter-spacing:.16em}

  /* Based */
  .based{padding: 50px 16px; font-size: 10px; letter-spacing:.16em; line-height:2}

  /* Services */
  .services{padding: 60px 16px}
  .services h2{margin-bottom: 30px; font-size: 9px; letter-spacing:.28em}
  .services-list .row{
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 18px 0;
    font-size: 10px;
    letter-spacing:.06em;
  }

  /* Portfolio — keep same layout, just smaller */
  .portfolio{padding: 50px 16px}
  .portfolio-head{font-size: 10px; margin-bottom: 50px}
  .portfolio-head .right{line-height:1.8}
  .portfolio-grid{gap: clamp(14px, 2vw, 24px) 12px}
  .portfolio-quote-1, .portfolio-quote-2{font-size: 9px; line-height:1.6; max-width: 180px}
  .fig .num{font-size: 9px; top:-14px}

  /* Vision */
  .vision{padding: 60px 16px}
  .vision .big{font-size: 12px; letter-spacing:.06em}
  .vision .small{font-size: 9px; letter-spacing:.12em}

  /* Founder */
  .founder{padding: 60px 16px}
  .founder-eyebrow{font-size: 9px; letter-spacing:.24em; margin-bottom: 26px}
  .founder h2{font-size: clamp(28px, 9vw, 44px); margin-bottom: 24px}
  .founder p{font-size: 10.5px; line-height:1.85}
  .cta-talk{font-size: 10px; letter-spacing:.1em}

  /* Brands */
  .brands{padding: 40px 16px}
  .brands p{font-size: 9.5px; line-height:1.95}

  /* Showcase */
  .showcase{padding: 50px 16px; gap: 14px}

  /* Talk */
  .talk{padding: 60px 16px}
  .talk h3{font-size: 16px; margin-bottom: 22px}
  .talk p{font-size: 10.5px; line-height:1.9}
  .talk .email{font-size: 11px}
  .btn-primary{padding: 14px 22px; font-size: 10px; letter-spacing:.16em}

  /* Footer */
  footer{padding: 40px 16px 22px}
  .footer-top{flex-direction:column; gap:24px; padding-bottom: 32px}
  .footer-top .logo-foot{height: 18px}
  .footer-top .socials{font-size: 11px}
  .footer-top .socials a{justify-content:flex-start}
  .footer-legal{flex-direction:column; align-items:flex-start; gap:10px; font-size: 9px}
  .footer-tag{font-size: 9px; letter-spacing:.22em; margin-top: 30px}

  /* Side floating socials */
  .side-socials{gap: 8px; right: 8px}
  .side-socials a{width: 28px; height: 28px}
  .side-socials svg{width:12px; height:12px}
}

@media (max-width: 380px){
  .hero-overlay .logo-big{width: 60vw}
  .founder h2{font-size: 26px}
}

/* Privacy page */
.legal{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.legal h1{
  font-weight:500; text-transform:uppercase;
  font-size: clamp(24px, 3vw, 36px); letter-spacing:.04em;
  margin-bottom: 40px;
}
.legal h2{
  font-weight:500; text-transform:uppercase;
  font-size: 13px; letter-spacing:.18em;
  margin: 36px 0 14px;
}
.legal p, .legal li{
  font-size: 13px; line-height:1.85; margin-bottom: 12px;
}
.legal ul{padding-left: 20px}
.legal a.back{
  display:inline-block; margin-top: 40px;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  font-size: 12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}