/* ───────── Friday Creative - design system ───────── */
:root{
  --paper:   #efece4;
  --paper-2: #e6e1d6;
  --paper-3: #d9d2c2;
  --ink:     #212124;
  --ink-2:   #2c2c31;
  --ink-3:   #3c3c44;
  --mute:    #5E6572;
  --rule:    rgba(33,33,36,.16);
  --rust:    #F04A26;
  --rust-2:  #d63a18;
  --cyan:    #25CED1;
  --teal-deep: #116E89;
  --yellow:  #FFCC33;
  --max:     1480px;
  --gut:     clamp(20px, 4vw, 64px);
  --display: "Special Gothic Expanded One", "Arial Narrow", Arial, sans-serif;
  --body:    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px; line-height:1.55;
  overflow-x:hidden;
  font-synthesis:none;
}
/* heavy expanded display face is single-weight - keep weights from faux-bolding */
.hero-title,.section-title,.service h3,.creed-row .word,.contact-title,.footer .word,.about-text .quote,.brand-logo,.hero-meta dd,.pillars dd,.team-stats dd,.process-step h4,.case .meta h3{ font-synthesis:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--rust); color:#fff; }

/* Paper grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  opacity:.14; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .06  0 0 0 0 .04  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* Plus registration marks */
.plus{ position:absolute; width:18px; height:18px; pointer-events:none; opacity:.7; color:inherit; }
.plus::before,.plus::after{ content:""; position:absolute; background:currentColor; }
.plus::before{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.plus::after { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
.plus.sm{ width:12px; height:12px; opacity:.55; }
.plus.lg{ width:24px; height:24px; }
.plus.rust{ color:var(--rust); opacity:.85; }

/* "The Smallest Giant" tagline line + crosshairs (brand footer motif) */
.giant-line{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rust); white-space:nowrap; z-index:2; pointer-events:none;
}
.giant-line .cross{ position:relative; width:12px; height:12px; opacity:.9; }
.giant-line .cross::before,.giant-line .cross::after{ content:""; position:absolute; background:currentColor; }
.giant-line .cross::before{ left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.giant-line .cross::after { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
/* per-section contrast colors */
.work .giant-line{ color:var(--cyan); }
.manifesto .giant-line{ color:#f6edde; }
.contact .giant-line{ color:var(--ink); }
.plus.cyan{ color:var(--cyan); opacity:.85; }

/* Scroll progress */
.scroll-progress{ position:fixed; left:0; top:0; height:2px; background:var(--rust); width:0; z-index:200; transition:width .08s linear; }

/* ── Nav ───────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  color:#fff;
  transition:background .25s ease, color .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(21,17,14,.86);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  padding-top:12px; padding-bottom:12px;
  border-color:rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  font-family:var(--display); font-weight:400;
  font-size:21px; line-height:.86; letter-spacing:-.01em;
  text-transform:uppercase; display:inline-flex; align-items:baseline;
}
.brand-logo .fr{ color:var(--cyan); }
.brand-logo .cr{ color:#fff; }
@media (max-width:520px){ .brand-logo .cr{ display:none; } }

.nav-links{
  display:flex; gap:2px; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
}
.nav-links a{
  padding:10px 14px; border-radius:99px; position:relative;
  transition:color .2s, background .2s;
}
.nav-links a:hover{ background:rgba(255,255,255,.09); }
.nav-links a.is-active{ color:var(--cyan); }
.nav-links a.is-active::before{
  content:"+"; position:absolute; left:1px; top:50%; transform:translate(-30%,-55%);
  color:var(--rust); font-family:var(--mono); font-size:14px;
}

.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px 11px 14px;
  background:var(--rust); color:#fff;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  border-radius:99px; font-weight:500;
  transition:transform .15s, background .15s;
}
.nav-cta:hover{ background:var(--rust-2); transform:translateY(-1px); }
.nav-cta .dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:.45; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.1); } }

.nav-toggle{ display:none; padding:9px 13px; border:1px solid currentColor; border-radius:99px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width: 880px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:inline-block; }
  .nav.is-open .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; top:100%; right:var(--gut); left:var(--gut);
    background:rgba(21,17,14,.96); padding:18px; border-radius:14px;
    margin-top:8px;
  }
}

/* ── Hero ───────── */
.hero{
  position:relative; min-height:100vh; color:#fff;
  background:#0e0a07; overflow:hidden;
  display:flex; flex-direction:column;
}
.hero-media{
  position:absolute; inset:0;
  background:
    radial-gradient(125% 95% at 50% 120%, rgba(240,74,38,.62) 0%, rgba(240,74,38,.14) 34%, transparent 60%),
    radial-gradient(70% 55% at 80% 6%, rgba(37,206,209,.20) 0%, transparent 55%),
    radial-gradient(120% 120% at 50% 45%, #1b120c 0%, #0e0a07 72%);
  transform:scale(1.04);
  animation:slowZoom 24s ease-in-out infinite alternate;
}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(116deg, rgba(255,255,255,.03) 0 1.5px, transparent 1.5px 8px);
  opacity:.45; mix-blend-mode:overlay;
}
@keyframes slowZoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 60%, transparent 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(0,0,0,.7) 100%);
}

.hero-inner{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; width:100%;
  padding:140px var(--gut) 200px;
  flex:1; display:grid;
  grid-template-rows: auto 1fr auto;
  gap:32px;
}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); align-self:start;
}
.hero-eyebrow .line{ flex:0 0 56px; height:1px; background:currentColor; opacity:.55; }
.hero-eyebrow .live{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff;
}
.hero-eyebrow .live .dot{
  width:7px; height:7px; border-radius:50%; background:var(--rust);
  box-shadow:0 0 0 5px rgba(240,71,19,.18);
  animation:pulse 1.6s infinite;
}

.hero-title{
  margin:0; align-self:end;
  font-family:var(--display); font-weight:900;
  line-height:.84; letter-spacing:-.025em;
}
.hero-title .pre{
  display:block;
  font-size:clamp(22px, 3vw, 48px);
  font-weight:700; color:var(--cyan);
  line-height:1; margin-bottom:.35em; letter-spacing:-.005em;
}
.hero-title .big{
  display:block;
  font-size:clamp(72px, 16vw, 280px);
  font-stretch:115%;
  text-transform:none;
  position:relative;
  background:linear-gradient(180deg, #fff 0%, #fff 96%, var(--rust) 96%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-title .post{
  display:block;
  font-size:clamp(22px, 3vw, 48px);
  font-weight:700; color:var(--cyan);
  line-height:1; margin-top:.4em; letter-spacing:-.005em;
  text-align:right;
}

.hero-bottom{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:32px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-meta{
  display:grid; grid-template-columns: repeat(4, minmax(0,auto)); gap:0;
  margin:0;
}
.hero-meta > div{ padding-right:40px; border-right:1px solid rgba(255,255,255,.12); padding-left:0; }
.hero-meta > div + div{ padding-left:32px; }
.hero-meta > div:last-child{ border-right:0; padding-right:0; }
.hero-meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:0 0 8px;
}
.hero-meta dd{
  margin:0; font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:-.005em; line-height:1.1;
}
.hero-meta dd .accent{ color:var(--rust); }
@media (max-width:980px){
  .hero-meta{ grid-template-columns: repeat(2, 1fr); gap:18px 0; }
  .hero-meta > div{ border-right:0; padding:0 !important; }
  .hero-bottom{ grid-template-columns: 1fr; }
}

.hero-cta{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 26px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:99px;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
  background:rgba(255,255,255,.04);
}
.hero-cta:hover{ background:var(--rust); border-color:var(--rust); color:#fff; transform:translateY(-1px); }
.hero-cta .arrow{ transition:transform .15s; display:inline-block; }
.hero-cta:hover .arrow{ transform:translateX(4px); }

.hero .plus{ color:rgba(255,255,255,.5); position:absolute; z-index:3; }

.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--gut);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  pointer-events:none;
  border-top:1px solid rgba(255,255,255,.08);
}
.hero-strip .center{ color:var(--rust); opacity:.9; }
@media (max-width:680px){ .hero-strip{ display:none; } }

.hero-marquee{
  position:absolute; left:0; right:0; bottom:48px; z-index:3;
  overflow:hidden;
  border-top:1px dashed rgba(255,255,255,.18);
  border-bottom:1px dashed rgba(255,255,255,.18);
  padding:15px 0;
  background:rgba(0,0,0,.28);
}
.hero-marquee .track{
  display:flex; gap:48px;
  animation:scroll 40s linear infinite;
  width:max-content;
  font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:18px; letter-spacing:.01em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
}
.hero-marquee .track span{ display:inline-flex; align-items:center; gap:48px; white-space:nowrap; }
.hero-marquee .track span::after{
  content:"+"; color:var(--rust); font-family:var(--mono); font-weight:400;
}
@keyframes scroll{
  from{ transform:translateX(0); } to{ transform:translateX(-50%); }
}

/* ── Section common ───────── */
.section{ position:relative; padding:130px 0; }
.section-inner{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); position:relative; }

.section-head{
  display:grid;
  grid-template-columns: 1fr 1.5fr;
  gap:48px;
  align-items:end;
  margin-bottom:64px;
}
@media (max-width:880px){ .section-head{ grid-template-columns:1fr; gap:24px; } }

.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute);
}
.kicker::before{
  content:""; width:32px; height:1px; background:var(--rust);
}
.kicker .num{ color:var(--rust); }

.section-title{
  margin:18px 0 0;
  font-family:var(--display); font-weight:900; font-stretch:115%;
  font-size:clamp(40px, 6.5vw, 96px);
  line-height:.92; letter-spacing:-.025em;
}
.section-title .rust{ color:var(--rust); }
.section-title .it{ color:var(--teal-deep); }

.section-lede{
  font-family:var(--display); font-weight:500;
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.4; color:var(--ink-2);
  max-width:60ch;
  text-wrap:pretty;
}

/* ── About / Smallest Giant ───────── */
.about{
  background:var(--paper);
  position:relative;
}
.about .plus{ color:var(--ink); opacity:.18; }

.about-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:64px;
  align-items:stretch;
}
@media (max-width:980px){ .about-grid{ grid-template-columns:1fr; } }

.about-photo{
  position:relative;
  height:100%; min-height:460px;
  background:#0a0805;
  overflow:hidden;
  border-radius:4px;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.about-photo .tag{
  position:absolute; left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(21,17,14,.7); color:#fff;
  padding:8px 12px; border-radius:99px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.about-photo .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.about-photo .plus{ color:#fff; opacity:.5; }

.about-text{ display:flex; flex-direction:column; gap:24px; justify-content:space-between; }
.about-text .quote{
  font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:.98; letter-spacing:-.02em;
  margin:0 0 8px;
}
.about-text .quote .rust{ color:var(--rust); }
.about-text .quote .it{ color:var(--teal-deep); }
.about-text p{ margin:0; font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:48ch; }
.about-text p strong{ color:var(--ink); font-weight:600; }

.pillars{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:12px;
}
.pillars dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); padding:14px 14px 6px;
  border-right:1px solid var(--rule);
}
.pillars dd{
  margin:0; padding:0 14px 14px;
  border-right:1px solid var(--rule);
  font-family:var(--display); font-weight:800; font-stretch:115%; font-size:22px;
  letter-spacing:-.005em;
}
.pillars dt:nth-child(7), .pillars dd:nth-child(8){ border-right:0; }
.pillars dt:nth-child(5), .pillars dd:nth-child(6),
.pillars dt:nth-child(7), .pillars dd:nth-child(8){ display:none; }
@media (min-width:680px){
  .pillars dt:nth-child(5), .pillars dd:nth-child(6),
  .pillars dt:nth-child(7), .pillars dd:nth-child(8){ display:block; }
}
.about-text .clients-line{ margin:20px 0 0; font-family:var(--body); font-size:15px; line-height:1.55; color:var(--ink-2); max-width:52ch; }
.about-text .clients-line .ck{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust); margin-right:10px; }

/* ── Services ───────── */
.services{
  background:var(--paper-2);
  position:relative;
}
.services .section-inner{ position:relative; z-index:2; }

.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--ink-3);
}
@media (max-width:880px){ .services-grid{ grid-template-columns:1fr; } }

.service{
  padding:48px 36px 36px;
  border-right:1px dotted var(--ink-3);
  border-bottom:1px dotted var(--ink-3);
  position:relative;
  display:flex; flex-direction:column; gap:18px;
  transition:background .25s;
}
.service:last-child{ border-right:0; }
.service:hover{ background:rgba(21,17,14,.04); }
.service .num{
  position:absolute; right:24px; top:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--mute);
}
.service h3{
  margin:0; font-family:var(--display); font-weight:900; font-stretch:115%;
  font-size:56px; line-height:1; color:var(--rust);
  letter-spacing:-.02em;
}
.service .tagline{
  font-family:var(--mono); font-size:14px; font-style:italic;
  color:var(--ink-3); margin:0;
}
.service p{ margin:0; color:var(--ink-2); font-size:16.5px; line-height:1.6; }
.service ul{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.service li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px;
  background:rgba(21,17,14,.05);
  border:1px solid var(--rule);
  border-radius:99px;
  color:var(--ink-2);
}

/* ── Work ───────── */
.work{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.work .kicker{ color:rgba(255,255,255,.55); }
.work .kicker::before{ background:var(--rust); }
.work .section-lede{ color:rgba(255,255,255,.75); }
.work .plus{ color:rgba(255,255,255,.5); }

.work-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:24px;
}
.case{
  position:relative; overflow:hidden;
  border-radius:6px;
  background:#000;
  aspect-ratio:16/10;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.case img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .35s;
}
.case:hover img{ transform:scale(1.05); filter:saturate(1.1); }
.case::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.case .meta{
  position:absolute; inset:auto 0 0 0; padding:24px;
  display:flex; align-items:end; justify-content:space-between; gap:16px;
  z-index:2; color:#fff;
}
.case .meta .l{ display:flex; flex-direction:column; gap:6px; }
.case .meta .client{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.case .meta h3{
  margin:0; font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:clamp(24px, 2.4vw, 32px); line-height:1.04; letter-spacing:-.01em;
}
.case .meta .arrow{
  width:44px; height:44px; border-radius:99px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2);
  transition:background .2s, transform .2s;
}
.case:hover .meta .arrow{ background:var(--rust); border-color:var(--rust); transform:translate(2px,-2px); }
.case .tag{
  position:absolute; top:18px; left:18px; z-index:2;
  display:inline-flex; gap:6px; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 10px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:99px; color:#fff;
}
.case .tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.case .tag .dot.rust{ background:var(--rust); }

/* layout: */
.case.span-7{ grid-column:span 7; }
.case.span-5{ grid-column:span 5; }
.case.span-6{ grid-column:span 6; aspect-ratio:16/11; }
.case.span-4{ grid-column:span 4; aspect-ratio:4/5; }
.case.span-8{ grid-column:span 8; }
@media (max-width:980px){
  .work-grid{ grid-template-columns:1fr; }
  .case[class*="span-"]{ grid-column:1/-1; aspect-ratio:16/10; }
}

.work-foot{
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.12);
}
.work-foot .clients-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin:0 0 18px;
}
.work-foot .clients{
  display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap;
  font-family:var(--display); font-weight:700; font-stretch:115%;
  font-size:16px; color:rgba(255,255,255,.62); text-transform:uppercase;
  letter-spacing:.02em; margin:0;
}
.work-foot .clients span{ display:inline-flex; align-items:center; gap:8px; }
.work-foot .clients span::before{ content:"+"; color:var(--rust); font-family:var(--mono); font-weight:400; }

/* showreels */
.reel-grid{ display:flex; flex-direction:column; gap:24px; }
.reel-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:880px){ .reel-row{ grid-template-columns:1fr; } }
.reel{ position:relative; border-radius:6px; overflow:hidden; background:#0a0805; aspect-ratio:16/9; }
.reel image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.reel .reel-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between; padding:24px;
  background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 30%, transparent 52%, rgba(0,0,0,.75) 100%);
}
.reel .reel-top{ display:flex; }
.reel .tag{
  display:inline-flex; gap:6px; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 10px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); border-radius:99px; color:#fff;
}
.reel .tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.reel .tag .dot.rust{ background:var(--rust); }
.reel .reel-meta{ position:relative; z-index:2; color:#fff; }
.reel .reel-meta .client{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.reel .reel-meta h3{ margin:6px 0 0; font-family:var(--display); font-weight:800; font-stretch:115%; font-size:clamp(22px,2.2vw,30px); line-height:1.04; letter-spacing:-.01em; }
.reel .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  width:84px; height:84px; border-radius:50%; background:var(--rust); color:#fff;
  display:grid; place-items:center; box-shadow:0 14px 44px rgba(0,0,0,.45);
  transition:transform .2s ease, background .2s;
}
.reel .play svg{ margin-left:5px; }
.reel:hover .play{ transform:translate(-50%,-50%) scale(1.07); background:var(--rust-2); }
.reel.is-placeholder{ background:#15110e; border:1px dashed rgba(255,255,255,.22); }
.reel.is-placeholder .ph{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.reel.is-placeholder .ph b{ font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.01em; color:rgba(255,255,255,.8); text-transform:none; }

/* ── Manifesto / Enjoy Adapt Overcome ─── */
.manifesto{
  position:relative;
  background:var(--rust);
  color:#fff;
  overflow:hidden;
}
.manifesto-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 82% -10%, rgba(255,255,255,.12), transparent 52%),
    radial-gradient(110% 110% at 0% 110%, rgba(0,0,0,.22), transparent 55%);
}
.manifesto .section-inner{ position:relative; z-index:2; }
.manifesto .kicker{ color:rgba(255,255,255,.8); }
.manifesto .kicker::before{ background:#fff; }
.manifesto .kicker .num{ color:#fff; }

.creed{
  display:grid; gap:36px;
  margin:48px 0 24px;
}
.creed-row{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap:32px;
  align-items:start;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.creed-row:last-child{ border-bottom:0; }
.creed-row .word{
  font-family:var(--display); font-weight:900; font-stretch:115%;
  font-size:clamp(60px, 11vw, 200px);
  line-height:.84; letter-spacing:-.03em;
  margin:0;
  color:#fff;
}
.creed-row .word.outline{
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.85);
}
.creed-row .word.cyan{ color:var(--cyan); }
.creed-row p{
  margin:18px 0 0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.4;
  color:#fff;
  max-width:52ch;
  text-wrap:pretty;
}
.creed-row p strong{ font-weight:700; }
@media (max-width:880px){ .creed-row{ grid-template-columns:1fr; gap:8px; } }

/* ── Process ───────── */
.process{ background:var(--paper); position:relative; }
.process-list{
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.process-step{
  display:grid;
  grid-template-columns: 80px 1.2fr 2fr 1fr;
  gap:24px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--rule);
  transition:padding .25s, background .25s;
}
.process-step:hover{ padding-left:18px; background:rgba(21,17,14,.025); }
.process-step .step-no{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  color:var(--rust);
}
.process-step h4{
  margin:0; font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:clamp(24px, 2.4vw, 36px); line-height:1.05; letter-spacing:-.015em;
}
.process-step p{ margin:0; color:var(--ink-2); font-size:16px; line-height:1.55; }
.process-step .when{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); text-align:right;
}
@media (max-width:880px){
  .process-step{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
  .process-step .when{ text-align:left; }
}

/* ── Team ───────── */
.team{ background:var(--paper); border-top:1px solid var(--rule); }
.team-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
}
@media (max-width:980px){ .team-grid{ grid-template-columns:1fr; } }

.team-img{
  position:relative;
  aspect-ratio: 4/3; overflow:hidden; border-radius:4px;
  background:var(--rust);
}
.team-img img{ width:100%; height:100%; object-fit:cover; }
.team-img image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.team-img .badge{
  position:absolute; left:18px; top:18px;
  background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:99px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; gap:6px; align-items:center;
}
.team-img .badge::before{ content:""; width:6px; height:6px; background:var(--rust); border-radius:50%; }

.team-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:24px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.team-stats > div{ padding:18px 0; border-right:1px solid var(--rule); }
.team-stats > div:last-child{ border-right:0; }
.team-stats > div:nth-child(2), .team-stats > div:nth-child(3){ padding-left:18px; }
.team-stats dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
}
.team-stats dd{
  margin:6px 0 0; font-family:var(--display); font-weight:900; font-stretch:115%;
  font-size:42px; line-height:1; letter-spacing:-.02em;
}
.team-stats dd .small{ font-size:18px; vertical-align:5px; }

/* ── Contact ───────── */
.contact{
  position:relative;
  background:var(--cyan); color:var(--ink);
  overflow:hidden;
}
.contact-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 86% -8%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(120% 110% at 0% 112%, rgba(17,110,137,.40), transparent 55%);
}
.contact .section-inner{ position:relative; z-index:2; }
.contact .kicker{ color:rgba(33,33,36,.62); }
.contact .kicker::before{ background:var(--rust); }
.contact .plus{ color:rgba(33,33,36,.4); }

.contact-title{
  margin:18px 0 56px;
  font-family:var(--display); font-weight:900; font-stretch:115%;
  font-size:clamp(56px, 12vw, 200px);
  line-height:.86; letter-spacing:-.03em;
  text-transform:uppercase;
}
.contact-title .it{ color:var(--rust); }

.contact-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:64px;
  margin-bottom:64px;
}
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:32px; } }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:680px){ .contact-form .row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(33,33,36,.7);
}
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid rgba(33,33,36,.35);
  padding:12px 0 10px; outline:0;
  transition:border-color .2s;
  font-size:17px;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(33,33,36,.45); }
.field textarea{ min-height:90px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--rust); }
.field select{ appearance:none; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23212124' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>") right 6px center / 12px no-repeat; padding-right:24px; cursor:pointer; }
.field select option{ background:#fff; color:var(--ink); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border:1px solid rgba(33,33,36,.28); border-radius:99px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(33,33,36,.85);
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  user-select:none;
}
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label:hover{ border-color:rgba(33,33,36,.5); }
.chips input:checked + label, .chips label.is-on{
  background:var(--rust); border-color:var(--rust); color:#fff;
}

.contact-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--rust); color:#fff;
  padding:18px 26px;
  border-radius:99px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  align-self:flex-start;
  margin-top:12px;
  transition:background .15s, transform .15s;
}
.contact-submit:hover{ background:var(--rust-2); transform:translateY(-1px); }

.contact-aside{ display:flex; flex-direction:column; gap:28px; padding-top:8px; }
.contact-card{
  border:1px solid rgba(33,33,36,.16);
  background:rgba(251,251,251,.5);
  border-radius:8px;
  padding:24px;
  backdrop-filter:blur(6px);
}
.contact-card h4{
  margin:0 0 16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rust);
}
.contact-card .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:8px 0;
}
.contact-card .row + .row{ border-top:1px dashed rgba(33,33,36,.18); }
.contact-card .row .k{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(33,33,36,.55);
}
.contact-card .row .v{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:16px;
}
.contact-card a.v{ color:var(--ink); border-bottom:1px solid transparent; transition:border-color .15s; }
.contact-card a.v:hover{ border-color:var(--rust); }

.live-clock{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(33,33,36,.75);
}
.live-clock .dot{ width:7px; height:7px; border-radius:50%; background:var(--rust); animation:pulse 1.6s infinite; }

.live-clock{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.live-clock .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); animation:pulse 1.6s infinite; }

/* ── Footer ───────── */
.footer{
  background:#0a0805; color:rgba(255,255,255,.55);
  padding:80px var(--gut) 32px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  position:relative; z-index:2;
}
.footer-top{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
}
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
.footer h5{
  margin:0 0 18px; color:#fff; font-weight:600;
  font-size:11px; letter-spacing:.22em;
}
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer ul a:hover{ color:#fff; }
.footer-logo{ font-family:var(--display); font-size:52px; line-height:.82; letter-spacing:-.02em; color:#fff; text-transform:uppercase; display:flex; flex-direction:column; }
.footer-logo .fr{ color:var(--cyan); }
.footer-logo .cr{ color:#fff; }
.footer-logo small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--rust); margin-top:14px; text-transform:none; }
.footer .plain li{ color:rgba(255,255,255,.42); cursor:default; }
.footer-bot{
  max-width:var(--max); margin:80px auto 0;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
}
.footer-bot .left{ display:flex; gap:32px; flex-wrap:wrap; }

/* ── Tweaks panel mount ─── */
#tweaks-mount{ position:fixed; right:24px; bottom:24px; z-index:300; }

/* ── Reveal animations ─── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-media{ animation:none; }
  .hero-marquee .track{ animation:none; }
}
.no-motion .hero-media{ animation:none; }
.no-motion .hero-marquee .track{ animation:none; }
.no-motion .reveal{ opacity:1; transform:none; transition:none; }