/* ============================================================
   THE MAC MEDIA — DESIGN TOKENS
   ============================================================ */
:root{
  --crimson:#B1120D;
  --crimson-deep:#7E0C08;
  --crimson-bright:#D22318;
  --ivory:#F6F1DD;
  --ivory-bright:#FFFCF3;
  --charcoal:#181818;
  --charcoal-soft:#221F1B;
  --charcoal-softer:#2B2722;
  --beige:#E9DFC6;
  --ink:#171512;
  --ink-soft:rgba(23,21,18,0.68);
  --ivory-soft:rgba(246,241,221,0.72);
  --ivory-faint:rgba(246,241,221,0.38);
  --line:rgba(23,21,18,0.14);
  --line-dark:rgba(246,241,221,0.14);

  --font-display: 'Cormorant Garamond', serif;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Manrope', sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .4s;
  --dur-med: .8s;
  --dur-slow: 1.4s;

  --nav-h: 92px;
  --gutter: clamp(24px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--crimson); color:var(--ivory-bright); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--crimson); outline-offset:4px; }

/* ============================================================
   TYPE SCALE
   ============================================================ */
.eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--crimson);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--crimson); display:inline-block; }
.eyebrow.on-dark{ color:var(--beige); }
.eyebrow.on-dark::before{ background:var(--crimson-bright); }

h1,h2,h3,h4{ font-family:var(--font-heading); font-weight:700; letter-spacing:-.01em; }

.display-huge{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(48px, 8.4vw, 132px);
  line-height:0.98;
  letter-spacing:-.01em;
}
.display-huge em{ font-style:italic; font-weight:500; color:var(--crimson); }

.head-lg{ font-size:clamp(32px, 4.4vw, 58px); line-height:1.05; }
.head-md{ font-size:clamp(26px, 3vw, 40px); line-height:1.1; }
.head-sm{ font-size:clamp(20px, 2.2vw, 26px); line-height:1.2; }

.body-lg{ font-size:clamp(17px,1.6vw,21px); line-height:1.65; color:var(--ink-soft); font-weight:300; }
.body-md{ font-size:16px; line-height:1.7; color:var(--ink-soft); }

.on-dark{ color:var(--ivory); }
.on-dark .body-lg, .on-dark .body-md{ color:var(--ivory-soft); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{ max-width:1400px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ position:relative; padding:clamp(80px,12vw,160px) 0; }
.section-tight{ padding:clamp(48px,8vw,96px) 0; }
.divider{ height:1px; background:var(--line); width:100%; }
.divider.dark{ background:var(--line-dark); }
.bg-charcoal{ background:var(--charcoal); }
.bg-ivory{ background:var(--ivory); }
.bg-beige{ background:var(--beige); }

/* ============================================================
   GRAIN OVERLAY (signature texture)
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
  transition:transform 1s var(--ease), opacity .8s ease;
}
#loader.hide{ transform:translateY(-100%); opacity:0; pointer-events:none; }
#loader .loader-mark{
  width:min(220px, 42vw); opacity:0; filter:brightness(0) invert(1);
  animation:markIn 1.1s var(--ease) .15s forwards;
}
#loader .loader-line{
  font-family:var(--font-label); font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--beige); opacity:0; animation:markIn .8s var(--ease) .6s forwards;
}
#loader .bar{
  width:min(240px,50vw); height:1px; background:rgba(233,223,198,.2); position:relative; overflow:hidden;
  opacity:0; animation:markIn .5s ease .7s forwards;
}
#loader .bar::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--crimson-bright); animation:loadbar 1.4s var(--ease) .8s forwards;
}
@keyframes markIn{ to{ opacity:1; } }
@keyframes loadbar{ to{ width:100%; } }

/* ============================================================
   CURSOR (signature — viewfinder)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  .cursor{
    position:fixed; top:0; left:0; width:34px; height:34px; z-index:9999;
    pointer-events:none; transform:translate(-50%,-50%);
    transition:width .25s var(--ease), height .25s var(--ease), opacity .3s ease;
  }
  .cursor .dot{
    position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%;
    background:var(--crimson-bright); transform:translate(-50%,-50%);
    transition:width .25s var(--ease), height .25s var(--ease), background .25s ease;
  }
  .cursor .corner{ position:absolute; width:9px; height:9px; border:1px solid var(--crimson-bright); opacity:.9; transition:all .25s var(--ease); }
  .cursor .c1{ top:0; left:0; border-right:none; border-bottom:none; }
  .cursor .c2{ top:0; right:0; border-left:none; border-bottom:none; }
  .cursor .c3{ bottom:0; left:0; border-right:none; border-top:none; }
  .cursor .c4{ bottom:0; right:0; border-left:none; border-top:none; }
  .cursor.hover{ width:64px; height:64px; }
  .cursor.hover .dot{ width:7px; height:7px; }
  .cursor.press .dot{ width:9px; height:9px; }
  .cursor.light .corner{ border-color:var(--ivory-bright); }
  .cursor.light .dot{ background:var(--ivory-bright); }
}
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   SCROLL PROGRESS + TIMECODE (signature)
   ============================================================ */
.progress-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9998; background:transparent; }
.progress-fill{ height:100%; width:0%; background:var(--crimson); transition:width .1s linear; }

.timecode{
  position:fixed; left:20px; bottom:20px; z-index:9997;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink); background:var(--ivory-bright); border:1px solid var(--line);
  padding:8px 12px; border-radius:2px; display:flex; align-items:center; gap:8px;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.timecode .rec{ width:6px; height:6px; border-radius:50%; background:var(--crimson); animation:pulse 1.6s ease-in-out infinite; flex:none; }
.timecode.on-dark{ background:rgba(24,24,24,.7); color:var(--ivory); border-color:var(--line-dark); backdrop-filter:blur(6px); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h); display:flex; align-items:center;
  padding:0 var(--gutter);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s ease, height .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  height:74px;
  background:rgba(246,241,221,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav.on-dark{ }
.nav.on-dark.scrolled{ background:rgba(24,24,24,.6); border-bottom:1px solid var(--line-dark); }
.nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo{ display:flex; align-items:center; gap:10px; height:40px; }
.nav-logo img{ height:100%; width:auto; transition:filter .4s ease; }
.nav.on-dark .nav-logo img{ filter:brightness(0) invert(1); }
.nav-menu{ display:flex; align-items:center; gap:clamp(20px,2.6vw,44px); }
.nav-link{
  font-family:var(--font-label); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  position:relative; padding:6px 0; color:var(--ink);
}
.nav.on-dark .nav-link{ color:var(--ivory); }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--crimson); transition:width .35s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--crimson); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:1px; background:currentColor; width:100%; transition:transform .3s ease, opacity .3s ease; }

@media(max-width:860px){
  .nav-menu{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--charcoal); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:0 40px; transform:translateX(100%); transition:transform .5s var(--ease); z-index:600;
  }
  .nav-menu.open{ transform:translateX(0); }
  .nav-menu .nav-link{ color:var(--ivory) !important; font-size:20px; }
  .nav-toggle{ display:flex; z-index:601; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.curtain{
  position:fixed; inset:0; z-index:9500; background:var(--crimson);
  transform:scaleY(0); transform-origin:bottom; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.curtain span{
  font-family:var(--font-display); font-style:italic; color:var(--ivory-bright); font-size:28px; opacity:0;
}
.curtain.run{ animation:curtainWipe 1.1s var(--ease-soft) forwards; }
.curtain.run span{ animation:curtainWord .9s ease .15s forwards; }
@keyframes curtainWipe{
  0%{ transform:scaleY(0); transform-origin:bottom; }
  45%{ transform:scaleY(1); transform-origin:bottom; }
  55%{ transform:scaleY(1); transform-origin:top; }
  100%{ transform:scaleY(0); transform-origin:top; }
}
@keyframes curtainWord{ 0%{ opacity:0; } 30%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; } }

/* ============================================================
   PAGES
   ============================================================ */
main{ position:relative; }
.page{ display:none; }
.page.active{ display:block; }

/* reveal utility */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-r{ opacity:0; transform:translateX(46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-r.in{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger .reveal:nth-child(1){ transition-delay:.02s; } .stagger .reveal:nth-child(2){ transition-delay:.12s; }
.stagger .reveal:nth-child(3){ transition-delay:.22s; } .stagger .reveal:nth-child(4){ transition-delay:.32s; }
.stagger .reveal:nth-child(5){ transition-delay:.42s; } .stagger .reveal:nth-child(6){ transition-delay:.52s; }

/* -------------------- HOME: HERO -------------------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:var(--charcoal);
}
.hero-canvas{ position:absolute; inset:0; overflow:hidden; }
.hero-canvas .plate{
  position:absolute; inset:-10%; 
  background:
    radial-gradient(ellipse at 25% 20%, rgba(177,18,13,.55), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(233,223,198,.14), transparent 50%),
    linear-gradient(160deg, #131110 0%, #1c1815 45%, #241a16 100%);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.14) translate(-2%,-1%);} }
.hero-canvas .scan{ position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px); mix-blend-mode:overlay; }
.hero-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(0,0,0,.65) 100%); }
.hero-frame{
  position:absolute; inset:24px; border:1px solid rgba(246,241,221,.18); pointer-events:none;
}
.hero-frame::before, .hero-frame::after{ content:attr(data-l); position:absolute; top:-11px; left:0; font-family:var(--font-label); font-size:10px; letter-spacing:.2em; color:var(--ivory-faint); }
.hero-frame::after{ content:attr(data-r); left:auto; right:0; }
.hero-rec{
  position:absolute; top:44px; right:48px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:10px; letter-spacing:.2em; color:var(--ivory-faint);
}
.hero-rec i{ width:7px; height:7px; border-radius:50%; background:var(--crimson-bright); animation:pulse 1.6s infinite; }

.hero-content{ position:relative; z-index:2; padding:0 var(--gutter) clamp(56px,8vw,96px); color:var(--ivory-bright); }
.hero-content .eyebrow{ margin-bottom:22px; }
.hero-head{ max-width:1100px; }
.hero-head .line{ overflow:hidden; }
.hero-head .line span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); }
.hero.loaded .hero-head .line span{ transform:translateY(0); }
.hero-head .line:nth-child(2) span{ transition-delay:.1s; }
.hero-sub{ margin-top:26px; max-width:480px; opacity:0; transform:translateY(16px); transition:opacity .9s ease .7s, transform .9s var(--ease) .7s; }
.hero.loaded .hero-sub{ opacity:1; transform:translateY(0); }
.hero-cta{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; opacity:0; transform:translateY(16px); transition:opacity .9s ease .85s, transform .9s var(--ease) .85s; }
.hero.loaded .hero-cta{ opacity:1; transform:translateY(0); }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  font-family:var(--font-label); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px; transition:transform .3s var(--ease), background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-primary{ background:var(--crimson); color:var(--ivory-bright); }
.btn-primary:hover{ background:var(--crimson-bright); }
.btn-ghost{ border:1px solid rgba(246,241,221,.4); color:var(--ivory-bright); }
.btn-ghost:hover{ border-color:var(--ivory-bright); }
.btn-ghost.on-ink{ border-color:rgba(23,21,18,.3); color:var(--ink); }
.btn-ghost.on-ink:hover{ border-color:var(--ink); }
.btn svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.magnetic{ will-change:transform; }

.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-cue .stem{ width:1px; height:40px; background:linear-gradient(var(--crimson-bright), transparent); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%{ opacity:0; transform:scaleY(0); transform-origin:top;} 40%{ opacity:1; transform:scaleY(1);} 100%{ opacity:0; transform:scaleY(1); transform-origin:bottom;} }
.scroll-cue span{ font-family:var(--font-label); font-size:9.5px; letter-spacing:.24em; color:var(--ivory-faint); text-transform:uppercase; }

/* -------------------- STATS -------------------- */
.stats{ background:var(--ivory); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat{ padding:28px var(--gutter) 28px 0; border-left:1px solid var(--line); padding-left:32px; }
.stat:first-child{ border-left:none; padding-left:0; }
.stat-num{ font-family:var(--font-heading); font-weight:800; font-size:clamp(34px,4vw,58px); color:var(--ink); letter-spacing:-.02em; }
.stat-num .accent{ color:var(--crimson); }
.stat-label{ font-family:var(--font-label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
@media(max-width:860px){ .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; } .stat:nth-child(3){ border-left:none; padding-left:0; } }
@media(max-width:520px){ .stats-grid{ grid-template-columns:1fr; } .stat{ border-left:none; border-top:1px solid var(--line); padding:24px 0 0; } .stat:first-child{ border-top:none; padding-top:0; } }

/* -------------------- FEATURED PROJECTS -------------------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px; flex-wrap:wrap; }
.project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,36px); }
.project-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; cursor:pointer;
  background:var(--charcoal);
}
.project-card .thumb{ position:absolute; inset:0; transition:transform 1.1s var(--ease); }
.project-card:hover .thumb{ transform:scale(1.08); }
.project-card .grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%); }
.project-card .meta{ position:absolute; left:26px; right:26px; bottom:26px; color:var(--ivory-bright); }
.project-card .cat{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--beige); margin-bottom:8px; display:block; }
.project-card .nm{ font-family:var(--font-heading); font-size:clamp(22px,2vw,30px); font-weight:700; }
.project-card .view{
  position:absolute; top:26px; right:26px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(246,241,221,.5); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-8px); transition:all .4s var(--ease); color:var(--ivory-bright);
}
.project-card:hover .view{ opacity:1; transform:translateY(0); }
.project-card .view svg{ width:15px; height:15px; }
@media(max-width:760px){ .project-grid{ grid-template-columns:1fr; } }

/* -------------------- BEHIND THE FRAMES -------------------- */
.frames{ background:var(--charcoal); color:var(--ivory); overflow:hidden; }
.frames-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-dark); margin-top:56px; }
.frame-step{ background:var(--charcoal); padding:36px 26px 40px; position:relative; }
.frame-step .fnum{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--crimson-bright); margin-bottom:26px; display:block; }
.frame-step h3{ font-size:clamp(19px,1.6vw,24px); margin-bottom:12px; }
.frame-step p{ font-size:13.5px; color:var(--ivory-soft); line-height:1.6; font-weight:300; }
.frame-step::after{ content:''; position:absolute; top:0; left:0; width:0; height:2px; background:var(--crimson); transition:width .8s var(--ease); }
.frame-step.in::after{ width:100%; }
@media(max-width:900px){ .frames-row{ grid-template-columns:1fr; } }

/* -------------------- FINAL CTA (home) -------------------- */
.final-cta{ background:var(--charcoal); color:var(--ivory-bright); text-align:center; padding-top:0; }
.final-cta .inner{ padding:clamp(70px,10vw,130px) var(--gutter); border-top:1px solid var(--line-dark); }
.final-cta h2{ max-width:820px; margin:0 auto 40px; font-family:var(--font-display); font-weight:400; font-size:clamp(34px,5.4vw,72px); line-height:1.05; }
.final-cta h2 em{ font-style:italic; color:var(--crimson-bright); }

/* -------------------- ABOUT -------------------- */
.about-hero{ padding-top:calc(var(--nav-h) + 90px); padding-bottom:60px; }
.about-hero .head-lg{ max-width:900px; }
.about-block{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,6vw,100px); align-items:center; }
.about-block.rev{ grid-template-columns:1.15fr 0.85fr; }
.about-block.rev .about-visual{ order:2; }
.about-num{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--crimson); margin-bottom:18px; display:block; }
.about-visual{
  position:relative; aspect-ratio:5/4; border-radius:2px; overflow:hidden;
}
.about-visual .plate{ position:absolute; inset:0; animation:kenburns 7s ease-in-out infinite alternate; }
.about-plate-1{ background:radial-gradient(ellipse at 30% 20%, rgba(177,18,13,.5), transparent 60%), linear-gradient(150deg,#1c1815,#2b2722); }
.about-plate-2{ background:radial-gradient(ellipse at 75% 70%, rgba(233,223,198,.35), transparent 55%), linear-gradient(150deg,#181818,#241a16); }
.about-plate-3{ background:radial-gradient(ellipse at 50% 30%, rgba(177,18,13,.42), transparent 55%), linear-gradient(160deg,#221f1b,#141210); }
.about-plate-4{ background:radial-gradient(ellipse at 20% 80%, rgba(233,223,198,.3), transparent 55%), linear-gradient(140deg,#181818,#2b2722); }
.about-plate-5{ background:radial-gradient(ellipse at 65% 25%, rgba(177,18,13,.5), transparent 55%), linear-gradient(150deg,#1c1815,#181818); }
.about-text p + p{ margin-top:18px; }
.about-close{ text-align:center; padding:clamp(80px,12vw,150px) var(--gutter); background:var(--charcoal); color:var(--ivory-bright); }
.about-close p{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(30px,4.6vw,58px); max-width:820px; margin:0 auto; line-height:1.15; }
.about-close p span{ color:var(--crimson-bright); }

/* -------------------- PORTFOLIO -------------------- */
.pf-hero{ padding-top:calc(var(--nav-h) + 70px); padding-bottom:36px; }
.pf-search{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:40px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0;
}
.pf-search input[type="text"]{
  flex:1; min-width:200px; background:transparent; border:none; font-family:var(--font-body); font-size:16px;
  color:var(--ink); padding:8px 0;
}
.pf-search input[type="text"]::placeholder{ color:var(--ink-soft); }
.pf-search select{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ivory-bright); border:1px solid var(--line); padding:10px 14px; border-radius:2px; color:var(--ink);
}
.pf-search .clear-filters{ font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--crimson); border-bottom:1px solid var(--crimson); padding-bottom:2px; white-space:nowrap; }

.pf-crumbs{ display:flex; align-items:center; gap:10px; font-family:var(--font-label); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:34px; flex-wrap:wrap; }
.pf-crumbs button{ color:var(--ink-soft); }
.pf-crumbs button.active, .pf-crumbs button:hover{ color:var(--crimson); }
.pf-crumbs .sep{ opacity:.4; }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.cat-tile{
  background:var(--ivory); position:relative; aspect-ratio:1/1; padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; cursor:pointer;
}
.cat-tile .catbg{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.cat-tile:hover .catbg{ opacity:1; }
.cat-tile .cn{ position:relative; z-index:1; font-family:var(--font-heading); font-size:clamp(19px,1.7vw,25px); font-weight:700; transition:color .4s ease; }
.cat-tile .cd{ position:relative; z-index:1; font-size:12.5px; line-height:1.5; font-weight:300; transition:color .4s ease; color:var(--ink-soft); }
.cat-tile .cc{ position:relative; z-index:1; font-family:var(--font-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); transition:color .4s ease; }
.cat-tile:hover .cn, .cat-tile:hover .cc, .cat-tile:hover .cd{ color:var(--ivory-bright); }
@media(max-width:960px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .cat-grid{ grid-template-columns:1fr; } .cat-tile{ aspect-ratio:3/2; } }

.client-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.client-card{ cursor:pointer; }
.client-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:2px; margin-bottom:16px; }
.client-card .thumb .plate{ position:absolute; inset:0; transition:transform .8s var(--ease); }
.client-card:hover .thumb .plate{ transform:scale(1.06); }
.client-card .thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.15);
  opacity:0; transition:opacity .4s ease;
}
.client-card:hover .thumb .play{ opacity:1; }
.client-card .thumb .play span{ width:52px; height:52px; border-radius:50%; border:1px solid var(--ivory-bright); display:flex; align-items:center; justify-content:center; }
.client-card .thumb .play svg{ width:12px; height:12px; fill:var(--ivory-bright); margin-left:2px; }
.client-card .cname{ font-family:var(--font-heading); font-size:19px; font-weight:700; margin-bottom:4px; }
.client-card .cind{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.no-results{ padding:60px 0; text-align:center; color:var(--ink-soft); font-family:var(--font-display); font-size:22px; font-style:italic; }
@media(max-width:900px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .client-grid{ grid-template-columns:1fr; } }

/* client detail */
.client-detail{ background:var(--charcoal); color:var(--ivory-bright); min-height:100vh; padding-top:calc(var(--nav-h) + 40px); }
.cd-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--beige); margin-bottom:36px; }
.cd-back svg{ width:12px; height:12px; transform:rotate(180deg); }
.cd-hero{ position:relative; aspect-ratio:21/9; border-radius:2px; overflow:hidden; margin-bottom:44px; }
.cd-hero .plate{ position:absolute; inset:0; }
.cd-hero .grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.1), rgba(24,24,24,.9)); }
.cd-hero .hcontent{ position:absolute; left:36px; bottom:32px; right:36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cd-hero .mono{ width:56px; height:56px; border-radius:50%; background:var(--crimson); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:22px; font-weight:700; margin-bottom:14px; }
.cd-hero h2{ font-size:clamp(28px,3.6vw,48px); }
.cd-hero .ig-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(246,241,221,.4); padding:12px 20px; border-radius:2px; }
.cd-hero .ig-btn:hover{ border-color:var(--ivory-bright); }

.cd-grid{ display:grid; grid-template-columns:2fr 1fr; gap:clamp(30px,5vw,80px); margin-bottom:64px; }
.cd-meta dl{ display:grid; grid-template-columns:1fr; gap:18px; }
.cd-meta .row{ border-top:1px solid var(--line-dark); padding-top:14px; }
.cd-meta dt{ font-family:var(--font-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--beige); margin-bottom:6px; }
.cd-meta dd{ font-size:15px; color:var(--ivory-soft); font-weight:300; }

.cd-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:64px; padding:32px 0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.cd-metrics .m-num{ font-family:var(--font-heading); font-weight:800; font-size:clamp(26px,3vw,40px); color:var(--crimson-bright); }
.cd-metrics .m-label{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--beige); margin-top:6px; }

.cd-sub{ font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--beige); margin-bottom:24px; }
.reel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; }
.reel-card{ position:relative; aspect-ratio:9/16; border-radius:2px; overflow:hidden; }
.reel-card .plate{ position:absolute; inset:0; }
.reel-card .grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); }
.reel-card .rmeta{ position:absolute; left:14px; right:14px; bottom:14px; }
.reel-card .rmeta .rt{ font-size:13.5px; font-weight:600; margin-bottom:8px; line-height:1.3; }
.reel-card .rmeta .rl{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-label); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--beige); }
.reel-card .rplay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; border:1px solid rgba(246,241,221,.6); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease); }
.reel-card:hover .rplay{ transform:translate(-50%,-50%) scale(1.12); }
.reel-card .rplay svg{ width:10px; height:10px; fill:var(--ivory-bright); margin-left:1px; }
@media(max-width:760px){ .reel-grid{ grid-template-columns:repeat(2,1fr); } .cd-grid{ grid-template-columns:1fr; } .cd-metrics{ grid-template-columns:1fr; gap:20px; } }

.ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:64px; }
.ba-panel{ position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; }
.ba-panel .plate{ position:absolute; inset:0; }
.ba-panel .tag{ position:absolute; top:16px; left:16px; font-family:var(--font-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; background:rgba(24,24,24,.6); backdrop-filter:blur(4px); padding:6px 12px; border-radius:20px; }
@media(max-width:640px){ .ba-grid{ grid-template-columns:1fr; } }

.cd-results{ padding:44px 0 90px; border-top:1px solid var(--line-dark); }
.cd-results p{ font-family:var(--font-display); font-style:italic; font-size:clamp(22px,2.6vw,32px); max-width:760px; line-height:1.35; color:var(--ivory-bright); }

/* -------------------- TEAM -------------------- */
.team-hero{ padding-top:calc(var(--nav-h) + 90px); padding-bottom:20px; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px); }
.team-card{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px; cursor:pointer; }
.team-card .plate{ position:absolute; inset:0; filter:grayscale(1) contrast(1.05); transition:filter .6s ease, transform .8s var(--ease); }
.team-card:hover .plate{ filter:grayscale(0); transform:scale(1.05); }
.team-card .grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.88)); }
.team-card .info{ position:absolute; left:20px; right:20px; bottom:20px; color:var(--ivory-bright); }
.team-card .tname{ font-family:var(--font-heading); font-weight:700; font-size:clamp(18px,1.6vw,22px); margin-bottom:6px; }
.team-card .trole{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--beige); opacity:0; max-height:0; overflow:hidden; transition:opacity .4s ease .1s, max-height .4s ease; }
.team-card:hover .trole{ opacity:1; max-height:60px; }
.team-card .tinit{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-style:italic; font-size:110px; color:rgba(246,241,221,.14); pointer-events:none; }
@media(max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }

/* -------------------- CONTACT -------------------- */
.contact-page{ min-height:100vh; background:var(--charcoal); color:var(--ivory-bright); display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h); }
.contact-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, rgba(177,18,13,.28), transparent 55%); animation:kenburns 18s ease-in-out infinite alternate; }
.contact-inner{ position:relative; z-index:1; text-align:center; width:100%; padding:80px var(--gutter); }
.contact-inner h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(38px,6.4vw,90px); line-height:1.04; max-width:960px; margin:0 auto 20px; }
.contact-inner h1 em{ font-style:italic; color:var(--crimson-bright); }
.contact-inner .body-lg{ max-width:480px; margin:0 auto 52px; }
.contact-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.contact-btn{
  display:flex; align-items:center; gap:14px; padding:20px 30px; border:1px solid rgba(246,241,221,.25);
  border-radius:2px; min-width:220px; justify-content:flex-start; transition:all .35s var(--ease); text-align:left;
}
.contact-btn:hover{ border-color:var(--crimson-bright); background:rgba(177,18,13,.08); transform:translateY(-3px); }
.contact-btn .ic{ width:38px; height:38px; border-radius:50%; background:rgba(246,241,221,.08); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-btn .ic svg{ width:16px; height:16px; fill:var(--ivory-bright); }
.contact-btn .tt{ font-family:var(--font-label); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--beige); margin-bottom:3px; }
.contact-btn .vv{ font-family:var(--font-heading); font-size:16px; font-weight:700; }

/* -------------------- FOOTER -------------------- */
footer{ background:var(--charcoal); color:var(--ivory-bright); padding:64px var(--gutter) 32px; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
.foot-logo img{ height:34px; filter:brightness(0) invert(1); margin-bottom:16px; }
.foot-tag{ font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--ivory-soft); max-width:280px; }
.foot-cols{ display:flex; gap:clamp(40px,6vw,90px); flex-wrap:wrap; }
.foot-col h5{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--beige); margin-bottom:16px; }
.foot-col ul li{ margin-bottom:10px; }
.foot-col a{ font-size:14.5px; color:var(--ivory-soft); transition:color .3s ease; }
.foot-col a:hover{ color:var(--crimson-bright); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:26px; }
.foot-bottom p{ font-size:12.5px; color:var(--ivory-faint); }
.foot-social{ display:flex; gap:16px; }
.foot-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, background .3s ease; }
.foot-social a:hover{ border-color:var(--crimson-bright); background:rgba(177,18,13,.12); }
.foot-social svg{ width:14px; height:14px; fill:var(--ivory-bright); }

/* fallback plates before/without JS-set inline gradients */
.project-card .thumb, .client-card .thumb .plate, .cat-tile .catbg, .reel-card .plate,
.ba-panel .plate, .cd-hero .plate, .team-card .plate{
  background:linear-gradient(150deg,#1c1815,#2b2722);
}

/* real <img> tags used in place of a gradient placeholder — keeps them
   filling the card exactly like the div-based placeholders did */
.media-cover{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ============================================================
   RESPONSIVE — big type & section paddings
   ============================================================ */
@media(max-width:640px){
  .about-block, .about-block.rev{ grid-template-columns:1fr; }
  .about-block.rev .about-visual{ order:0; }
  .cd-hero{ aspect-ratio:4/5; }
}