/* ─── RESET & TOKENS ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#EDEAE2;--ink:#0D0D0D;--red:#E8290B;--mid:#B8B4AC;
  --fd:'Anton',sans-serif;--fb:'DM Sans',sans-serif;--fm:'Space Mono',monospace
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-weight:300;overflow-x:hidden;cursor:none}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.04;
  background-image:url("assets/noise-01.svg");background-size:180px}

/* ─── CURSORS ────────────────────────────────────────────────── */
/* #cd = ember point  ·  #cr = thermal field                     */

#cd{
  position:fixed;width:4px;height:4px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 1px .5px rgba(232,41,11,.3);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:background .12s,box-shadow .14s
}
#cr{
  position:fixed;width:22px;height:22px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,41,11,.12) 0%,transparent 70%);
  pointer-events:none;z-index:9997;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease
}

body.cx #cd{opacity:1}
body.cx #cr{opacity:.58}

/* Hover: ember slightly hotter, field concentrates */
body.cx.ch #cd{box-shadow:0 0 2.5px 1px rgba(232,41,11,.52)}
body.cx.ch #cr{
  opacity:1;
  transform:translate(-50%,-50%) scale(.62)
}

/* On red elements: ember becomes ink */
body.cx.cursor-over-red #cd{
  background:var(--ink);
  box-shadow:0 0 1px .5px rgba(13,13,13,.22)
}

/* Click: brief ignition impulse — elongates upward then collapses */
@keyframes ember-ignite{
  0%  {transform:translate(-50%,-50%)  scaleY(1)   scaleX(1)}
  38% {transform:translate(-50%,-175%) scaleY(3.5) scaleX(.58)}
  100%{transform:translate(-50%,-50%)  scaleY(1)   scaleX(1)}
}
body.cx.clicking #cd{
  animation:ember-ignite .2s cubic-bezier(.22,1,.36,1)
}

@media(pointer:coarse){
  body{cursor:auto}
  #cd,#cr{display:none}
}

@media(prefers-reduced-motion:reduce){
  body.cx.clicking #cd{animation:none}
  #cd,#cr{transition:none}
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;
    justify-content:space-between;align-items:center;padding:22px 48px;mix-blend-mode:multiply}
.nl{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:1.1rem;
    letter-spacing:.06em;color:var(--ink);text-decoration:none}
.nl em{color:var(--red);font-style:normal}
.nl-logo{width:auto;height:36px;display:block;flex-shrink:0;fill:var(--ink)}
.nlinks{display:flex;gap:28px;list-style:none}
.nlinks a{font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
          color:var(--ink);text-decoration:none;opacity:.65;transition:opacity .2s}
.nlinks a:hover{opacity:1}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;
      padding:120px 48px 60px;position:relative;overflow:hidden}

/* Flames — oversized and pushed down so no edge or rounding ever shows */
.hflames{
  position:absolute;
  bottom:-48px;
  left:-5%;
  width:110%;
  height:auto;
  pointer-events:none;
  z-index:1;
  transform-origin:bottom center;
  animation:flame-breathe 6s ease-in-out infinite;
}
@keyframes flame-breathe{
  0%,100%{transform:translateY(0)}
  35%    {transform:translateY(-6px)}
  65%    {transform:translateY(2px)}
}

/* Direction B: opacity glow — fire intensity, 7.3s (non-harmonic with breathe) */
.hflames g{animation:flame-glow 7.3s ease-in-out infinite}
@keyframes flame-glow{
  0%,100%{opacity:.14}
  50%    {opacity:.19}
}

/* Tip behaviour — each path breathes height + skews independently under thermal pressure.
   transform-box:fill-box makes transform-origin relative to each path's own bounding box
   so skewX and scaleY originate from the flame base, not the SVG origin. */
.hflames g path{
  transform-box:fill-box;
  transform-origin:bottom center;
}
/* Left cluster: 7.1s, -1.7s offset — rises more, skews right then left */
.hflames g path:first-child{
  animation:flame-left 7.1s ease-in-out infinite;
  animation-delay:-1.7s;
}
/* Right cluster: 5.6s, -2.4s offset — starts compressed, opposite skew tendency */
.hflames g path:last-child{
  animation:flame-right 5.6s ease-in-out infinite;
  animation-delay:-2.4s;
}
@keyframes flame-left{
  0%    {transform:scaleY(1)     skewX(0deg)}
  28%   {transform:scaleY(1.018) skewX(.18deg)}
  52%   {transform:scaleY(1.004) skewX(-.12deg)}
  78%   {transform:scaleY(.984)  skewX(.07deg)}
  100%  {transform:scaleY(1)     skewX(0deg)}
}
@keyframes flame-right{
  0%    {transform:scaleY(1)     skewX(0deg)}
  22%   {transform:scaleY(.988)  skewX(-.15deg)}
  58%   {transform:scaleY(1.016) skewX(.10deg)}
  83%   {transform:scaleY(1.005) skewX(-.06deg)}
  100%  {transform:scaleY(1)     skewX(0deg)}
}


.heye{font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
      color:var(--red);margin-bottom:20px;position:relative;z-index:2;
      opacity:0;transition:opacity 1s ease .2s}

/* ─── HERO HEADLINE ──────────────────────────────────────────── */
.ht-wrap{position:relative;z-index:2}

.ht{font-family:var(--fd);font-size:clamp(5rem,14vw,15rem);line-height:.88;letter-spacing:.01em}

/* Each line clips its sliding child */
.hl{display:block;overflow:hidden}

/* A-lines: start below clip, JS slides them up */
.hli{display:block;transform:translateY(110%);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.hli.vis{transform:translateY(0)}

/* State B: layered on top, hidden until hover */
.ht-b{position:absolute;top:0;left:0;width:100%;pointer-events:none}
.ht-b .red{pointer-events:auto}

/* B-lines: also start below, flip in on hover */
.hli-b{display:block;transform:translateY(110%);transition:transform .75s cubic-bezier(.16,1,.3,1)}

/* Stagger */
.ht-b .hl:nth-child(2) .hli-b{transition-delay:.05s}
#ht-a .hl:nth-child(2) .hli{transition-delay:.05s}
#ht-a .hl:nth-child(3) .hli{transition-delay:.10s}

/* Hover state: A exits up, B enters from below */
.ht-wrap.flipped #ht-a .hli.vis{transform:translateY(-110%)}
.ht-wrap.flipped .hli-b{transform:translateY(0)}

.red{color:var(--red)}

/* Hero bottom bar — no border so flames flow through */
.hbot{display:flex;justify-content:space-between;align-items:flex-end;
      margin-top:48px;padding-top:28px;position:relative;z-index:2;gap:40px}
.hmani{font-size:.95rem;line-height:1.75;opacity:.65;max-width:480px}
.hmani strong{font-weight:500;opacity:1;color:var(--ink)}

/* ─── TICKER ─────────────────────────────────────────────────── */
.tw{overflow:hidden;padding:16px 0;background:var(--ink);border-top:2px solid var(--red)}
.tt{display:flex;white-space:nowrap;animation:tick 30s linear infinite}
.ti{font-family:var(--fd);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--bg);opacity:.4;padding:0 36px;flex-shrink:0}
.ti .x{color:var(--red);opacity:1}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── PROTEST ────────────────────────────────────────────────── */
.protest{display:grid;grid-template-columns:1fr minmax(0,360px);gap:60px;padding:100px 48px;align-items:start}
.sey{font-family:var(--fm);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
     color:var(--red);margin-bottom:16px}
.ph{font-family:var(--fd);font-size:clamp(2rem,3.5vw,3.8rem);line-height:1.05;letter-spacing:.02em}
.pb{font-size:.93rem;line-height:1.85;opacity:.6;padding-top:clamp(32px,4vw,56px)}
.pb p+p{margin-top:16px}
.pb strong{font-weight:500;color:var(--ink);opacity:1}

/* ─── CLIENTS ────────────────────────────────────────────────── */
.clients{padding:48px 48px 80px}
.cll{font-family:var(--fm);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:.35;margin-bottom:24px}
.cl-list{display:flex;flex-wrap:wrap}
.cp{font-family:var(--fd);font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:.03em;
    color:var(--ink);opacity:.15;padding:4px 20px 4px 0;transition:opacity .25s,color .25s;cursor:none}
.cp:hover{opacity:1;color:var(--red)}

/* ─── CASES ──────────────────────────────────────────────────── */
.cases{padding:80px 48px 0}
.cases-hdr{margin-bottom:24px}
.ct2{font-family:var(--fd);font-size:clamp(2.5rem,5vw,5.5rem);line-height:.95;letter-spacing:.01em}
.ci{border-top:1px solid var(--mid);overflow:hidden}
.ci:last-child{border-bottom:1px solid var(--mid)}
.ctrig{display:grid;grid-template-columns:80px 1fr auto;align-items:center;
       gap:32px;padding:32px 0;cursor:none}
.ctrig:hover .ctt{color:var(--red)}
.ctnum{font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;opacity:.3}
.ctcl{font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
      color:var(--red);margin-bottom:6px}
.ctt{font-family:var(--fd);font-size:clamp(1.4rem,2.5vw,2.4rem);letter-spacing:.02em;line-height:1;transition:color .2s}
.ctr{display:flex;align-items:center;gap:20px}
.caw{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.awb{font-family:var(--fm);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
     color:var(--red);border:1px solid var(--red);padding:4px 10px}
.carr{width:32px;height:32px;border:1px solid var(--mid);border-radius:50%;display:flex;
      align-items:center;justify-content:center;font-size:.85rem;
      transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s;flex-shrink:0}
.ci.open .carr{transform:rotate(180deg);background:var(--red);border-color:var(--red);color:white}
.cbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.ci.open .cbody{grid-template-rows:1fr}
.cbi{overflow:hidden}
.cbc{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:32px;padding:0 0 56px;align-items:start}
.cv{aspect-ratio:9/16;position:relative;overflow:hidden;max-height:520px}
.cv img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.ci.open .cv img{transform:scale(1.03)}
.ctags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.ctag{font-family:var(--fm);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
      border:1px solid var(--mid);padding:4px 10px;opacity:.55}
.cblk{margin-bottom:24px}
.cbl{font-family:var(--fm);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.cbt{font-size:.9rem;line-height:1.82;opacity:.62}
.cins{background:var(--ink);color:var(--bg);padding:24px 28px;margin-bottom:24px}
.cins .cbl{color:#ff6b55}
.cins .cbt{opacity:.72}
.clink{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:.6rem;
       letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;
       border-bottom:1px solid var(--ink);padding-bottom:2px;opacity:.4;
       transition:opacity .2s,color .2s,border-color .2s}
.clink:hover{opacity:1;color:var(--red);border-color:var(--red)}
/* Case study rhythm modifiers — different pacing between projects */
.cblk.cb-tight{margin-bottom:12px}
.cblk.cb-open{margin-bottom:36px}
.cins.ci-open{margin-top:44px;margin-bottom:40px}
.cins.ci-generous{margin-top:56px;margin-bottom:52px}

/* ─── MORE WORK ──────────────────────────────────────────────── */
.mw{padding:80px 48px}
.mg{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr)}
.mc{border-right:1px solid var(--mid);padding:0 32px 0 0}
.mc:first-child{padding-left:0}
.mc:last-child{border-right:none;padding-right:0;padding-left:32px}
.mc:nth-child(2){padding-left:32px}
.mcn{font-family:var(--fd);font-size:1.2rem;letter-spacing:.04em;margin-bottom:8px}
.mcn+.mcn{margin-top:28px}
.mcd{font-size:.79rem;line-height:1.6;opacity:.55;margin-bottom:14px}
.mlist{list-style:none}
.mlist li{font-size:.82rem;line-height:1.9;opacity:.45;padding-left:14px;position:relative}
.mlist li::before{content:'–';position:absolute;left:0;opacity:.5}
.mlist+.mcn{margin-top:24px}

/* ─── ABOUT ──────────────────────────────────────────────────── */
.about{
  padding:0 48px 0 0;      /* no bottom padding — portrait bottom = contact border */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:stretch;
}
/* Portrait: full height of grid row, bleeds left, bottom = contact border line */
.about-portrait-wrap{
  margin-left:-48px;
  overflow:hidden;
  align-self:stretch;     /* stretches to match text column height */
}
.aph{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:bottom center;
  mix-blend-mode:multiply;
  filter:contrast(1.05);
}
/* Text column: padding top and bottom */
.about > div:last-child{ padding:80px 0 100px; }
.ahl{font-family:var(--fd);font-size:clamp(2rem,3.5vw,4rem);line-height:1.05;
     letter-spacing:.02em;margin:16px 0 28px}
.abody{font-size:.93rem;line-height:1.85;opacity:.62}
.abody p+p{margin-top:16px}
.skills{margin-top:28px;display:flex;flex-wrap:wrap;gap:6px}
.sk{font-family:var(--fm);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--mid);padding:5px 12px;opacity:.55;
    transition:opacity .2s,border-color .2s,color .2s}
.sk:hover{opacity:1;border-color:var(--red);color:var(--red)}

/* ─── CONTACT ────────────────────────────────────────────────── */
.contact{padding:80px 48px 100px;border-top:1px solid var(--mid);position:relative;overflow:hidden}
.cbgtext{position:absolute;bottom:-40px;right:-20px;font-family:var(--fd);
         font-size:clamp(8rem,20vw,22rem);color:var(--ink);opacity:.04;
         pointer-events:none;line-height:1;user-select:none}
.cgrid{display:grid;grid-template-columns:1fr minmax(0,240px);gap:48px;align-items:end;
       position:relative;z-index:2;margin-top:40px}
.cbig{font-family:var(--fd);font-size:clamp(3rem,8vw,9rem);line-height:.88;letter-spacing:-.01em}
.cbig a{color:var(--ink);text-decoration:none;transition:color .2s;display:inline-block}
.cbig a:hover{color:var(--red)}
.cdet{display:flex;flex-direction:column;gap:22px}
.clbl{font-family:var(--fm);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
      color:var(--red);margin-bottom:4px}
.cval{font-size:.93rem;opacity:.62}
.cval a{color:var(--ink);text-decoration:none}
.cval a:hover{color:var(--red)}
.avail{color:var(--red)!important;opacity:1!important;font-weight:500}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--mid);padding:22px 48px;display:flex;
       justify-content:space-between;align-items:center}
footer p{font-family:var(--fm);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;opacity:.28}

/* ─── MOBILE NAV BUTTON ──────────────────────────────────────── */
.nmob{display:none;background:none;border:none;font-family:var(--fm);font-size:.6rem;
      letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:0;cursor:none}
.nmob-brand{display:none}
.nmob::before{content:'MENU'}
.nmob[aria-expanded="true"]::before{content:'CLOSE'}
.nmob:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ─── SECTION RULE ──────────────────────────────────────────── */
hr.section-rule{border:none;height:1px;background:var(--mid);margin:0 48px;opacity:.5}

/* ─── FOCUS STYLES ───────────────────────────────────────────── */
.ctrig:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ─── REVEAL SYSTEM ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.08s}
.rd2{transition-delay:.16s}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:768px){
  nav{padding:20px 24px;mix-blend-mode:normal}
  hr.section-rule{margin:0 24px}

  /* ── Mobile nav button ── */
  .nmob{display:block}

  /* ── Nav panel: slides down from behind the fixed nav bar ── */
  .nlinks{
    flex-direction:column;gap:0;list-style:none;
    position:fixed;top:0;left:0;right:0;
    background:var(--ink);z-index:490;
    padding:76px 24px 32px;
    visibility:hidden;opacity:0;transform:translateY(-4px);
    transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s;
  }
  .nlinks.open{
    visibility:visible;opacity:1;transform:translateY(0);
    transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
  }
  .nlinks li{border-bottom:1px solid rgba(237,234,226,.1)}
  .nmob-brand{display:flex;align-items:center;gap:12px;padding:20px 0 24px;border-bottom:none!important}
  .nmob-brand + li{border-top:1px solid rgba(237,234,226,.1)}
  .nb-logo{width:26px;height:auto;display:block;fill:var(--bg)}
  .nb-word{font-family:var(--fd);font-size:1.5rem;line-height:1;letter-spacing:.02em;display:flex;align-items:baseline}
  .nb-first{color:var(--bg)}
  .nb-last{color:var(--red)}
  .nlinks a{display:block;padding:20px 0;font-size:.75rem;color:var(--bg);opacity:.7}
  .nlinks a:hover{opacity:1;color:var(--red)}
  .hero{padding:100px 24px 48px}
  .hportrait{height:65%;right:-8%}
  .protest,.cgrid{grid-template-columns:1fr;gap:40px}
  .pb{padding-top:0}
  .mg{grid-template-columns:1fr;margin-left:0}
  .about{grid-template-columns:1fr;gap:0;padding:0 24px 0}
  .about-portrait-wrap{margin-left:-24px;height:80vw}
  .about > div:last-child{padding:40px 0 60px}
  .cases,.clients,.mw,.contact{padding-left:24px;padding-right:24px}
  .cbc{grid-template-columns:1fr}
  .ctrig{grid-template-columns:60px 1fr auto;gap:16px}
  .mc{border-right:none;border-top:1px solid var(--mid);padding:24px 0 24px}
  .mc:first-child{border-top:none;padding-top:0}
  /* override desktop nth-child/last-child padding-left so all brand headings share one left edge */
  .mc:nth-child(2){padding-left:0}
  .mc:last-child{padding-left:0;padding-bottom:0}
  footer{padding:20px 24px;flex-direction:column;gap:8px}
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .tt,.hflames,.hflames g,.hflames g path{animation:none}
  .reveal{opacity:1;transform:none}
  .hli{transform:translateY(0)!important}
  .hli-b{transform:translateY(0)!important}
  .ht-b{position:relative}
}