/* ============================================================
   MediaFed — studio site
   Palette sampled from the logo: orange #E4631B, grey #6D6B6C,
   near-black #1F1B1A. Light and dark themes share one token set.
   ============================================================ */

:root{
  --bg:        #FFFFFF;
  --bg-2:      #F5F3F0;
  --surface:   #FFFFFF;
  --ink:       #17130F;
  --ink-2:     #4C453E;
  --ink-3:     #867E75;
  --line:      rgba(23,19,15,.13);
  --line-2:    rgba(23,19,15,.26);
  --brand:     #E4631B;   /* display / large text only */
  --brand-ink: #BE4F0F;   /* small text — passes contrast on light */
  --brand-soft:rgba(228,99,27,.10);
  --shadow:    0 24px 60px rgba(23,19,15,.10);
  --scrim:     rgba(23,19,15,.55);

  --display:"Fraunces", "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brandf: "Poppins", var(--sans);

  --gut:  clamp(20px, 5vw, 72px);
  --sec-y:clamp(80px, 11vw, 172px);
  --ease: cubic-bezier(.16,.84,.24,1);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:        #0C0B0A;
  --bg-2:      #141211;
  --surface:   #181614;
  --ink:       #F6F3F0;
  --ink-2:     #B9B2AA;
  --ink-3:     #7F776E;
  --line:      rgba(246,243,240,.14);
  --line-2:    rgba(246,243,240,.30);
  --brand:     #F0762F;
  --brand-ink: #F0762F;
  --brand-soft:rgba(240,118,47,.13);
  --shadow:    0 24px 60px rgba(0,0,0,.5);
  --scrim:     rgba(0,0,0,.6);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.11; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
:root[data-theme="dark"] .grain{ mix-blend-mode:screen; opacity:.05; }
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

.skip{ position:absolute; left:-9999px; top:12px; z-index:10000;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:3px; }
.skip:focus{ left:12px; }

.wrap{ width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--gut); }

/* ---- shared type ---------------------------------------------- */
.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 clamp(18px,3vw,32px); display:flex; align-items:center; gap:12px;
}
.label i{ font-style:normal; color:var(--brand-ink); }
.label::after{ content:""; flex:1; height:1px; background:var(--line); max-width:110px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tint{ background:var(--bg-2); }
.sec + .sec:not(.sec--tint){ border-top:1px solid var(--line); }

.sec__h{
  font-family:var(--display); font-optical-sizing:auto; font-weight:340;
  font-size:clamp(36px,5.8vw,84px); line-height:1; letter-spacing:-.025em; margin:0;
}
.sec__h em{ font-style:italic; font-weight:300; color:var(--brand); }
.sec__head{ margin-bottom:clamp(40px,5.5vw,76px); }
.sec__head--split{ display:flex; gap:44px; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; }
.sec__note{ max-width:36ch; color:var(--ink-3); font-size:15px; margin:0; }

/* ---- buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--ink); color:var(--bg);
  border:1px solid var(--ink); padding:14px 24px; border-radius:100px;
  font-size:13.5px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:transform .5s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn:hover{ transform:translateY(-2px); }
.btn__dot{ width:6px; height:6px; border-radius:50%; background:currentColor;
  transition:transform .5s var(--ease); }
.btn:hover .btn__dot{ transform:translateX(3px) scale(1.35); }
.btn--brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn--brand:hover{ background:#CD5715; border-color:#CD5715; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn--sm{ padding:10px 18px; font-size:12.5px; }

.linkline{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:3px; color:var(--ink-3);
  transition:color .3s;
}
.linkline:hover{ color:var(--brand-ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:800; padding-block:16px;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line); padding-block:10px;
}
.nav__in{ max-width:1400px; margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:26px; }

.lockup{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.lockup img{ width:34px; height:34px; }
.lockup b{
  font-family:var(--brandf); font-weight:600; font-size:21px;
  letter-spacing:-.015em; line-height:1; color:var(--ink);
}
.lockup b span{ color:var(--brand); }
.lockup small{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-top:3px; font-weight:400;
}

.nav__links{ display:flex; gap:24px; }
.nav__links a{ font-size:13px; color:var(--ink-2); position:relative; padding-block:4px;
  display:flex; align-items:baseline; gap:6px; }
.nav__links a i{ font-family:var(--mono); font-size:9.5px; font-style:normal; color:var(--ink-3); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brand); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--ink); }

/* theme toggle */
.themer{
  width:38px; height:38px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:background .35s, border-color .35s, transform .45s var(--ease);
}
.themer:hover{ background:var(--brand-soft); border-color:var(--brand); transform:rotate(18deg); }
.themer svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.themer .i-moon{ display:none; }
:root[data-theme="dark"] .themer .i-sun{ display:none; }
:root[data-theme="dark"] .themer .i-moon{ display:block; }

.nav__burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav__burger span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0;
  transition:transform .4s var(--ease); }
.nav.is-open .nav__burger span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(130px,19vh,208px); padding-bottom:clamp(36px,6vw,72px); overflow:hidden; }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 clamp(24px,4vw,40px);
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--brand); position:relative; flex:none; }
.pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--brand); opacity:.55; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.6);opacity:0} }

.hero__h{
  font-family:var(--display); font-optical-sizing:auto; font-weight:330;
  font-size:clamp(46px,10.4vw,166px); line-height:.9; letter-spacing:-.035em; margin:0;
}
.hero__h em{ font-style:italic; font-weight:300; color:var(--brand); }
.hero__h .line{ display:block; overflow:hidden; }
.hero__h .line > span{ display:block; transform:translateY(105%);
  animation:riseIn 1.1s var(--ease) forwards; }
.hero__h .line:nth-child(1) > span{ animation-delay:.08s; }
.hero__h .line:nth-child(2) > span{ animation-delay:.17s; }
.hero__h .line:nth-child(3) > span{ animation-delay:.26s; }
@keyframes riseIn{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .hero__h .line > span{ transform:none; animation:none; } }

.hero__foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:38px;
  align-items:end; margin-top:clamp(32px,4.5vw,58px); }
.hero__lede{ max-width:60ch; font-size:clamp(15px,1.1vw,17.5px); color:var(--ink-2); margin:0; }
.hero__lede strong{ font-weight:500; color:var(--ink); }
.hero__cta{ display:flex; gap:11px; flex-wrap:wrap; }

/* thumbnail rail */
.rail{
  margin-top:clamp(50px,6.5vw,88px); border-block:1px solid var(--line); padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rail__track{ display:flex; gap:12px; width:max-content; animation:slide 70s linear infinite; }
.rail:hover .rail__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.rail__item{
  height:clamp(88px,10vw,132px); border-radius:4px; overflow:hidden;
  background:var(--bg-2); flex:none; filter:grayscale(1); opacity:.62;
  transition:filter .6s var(--ease), opacity .6s var(--ease);
}
.rail__item img{ height:100%; width:auto; }
.rail:hover .rail__item{ filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion:reduce){ .rail__track{ animation:none; } }

/* ============================================================
   PROOF STATS
   ============================================================ */
.stats__grid{ display:grid; grid-template-columns:repeat(6,1fr); padding-block:clamp(28px,3.6vw,48px); }
.stat{ padding-right:18px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{ display:block; font-family:var(--display); font-weight:340;
  font-size:clamp(28px,3.4vw,50px); line-height:1; letter-spacing:-.03em; }
.stat span{ display:block; margin-top:9px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); line-height:1.5; }
.stat--badge{ font-size:clamp(14px,1.4vw,19px) !important; line-height:1.15 !important;
  font-family:var(--sans) !important; font-weight:600 !important; color:var(--brand); }

/* ============================================================
   WORK — masonry
   ============================================================ */
.filters{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:clamp(24px,3vw,40px); }
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:9px 15px; border-radius:100px; cursor:pointer; font-weight:400;
  background:transparent; color:var(--ink-3); border:1px solid var(--line);
  transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--ink); border-color:var(--line-2); }
.chip.is-on{ background:var(--brand); color:#fff; border-color:var(--brand); }
.chip sup{ font-size:8px; opacity:.6; margin-left:4px; top:-.5em; }

.grid{ columns:4; column-gap:clamp(10px,1.1vw,16px); }
.card{
  break-inside:avoid; width:100%; margin:0 0 clamp(10px,1.1vw,16px);
  display:block; background:none; border:0; padding:0; text-align:left;
  color:inherit; font:inherit; cursor:pointer;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card.in{ opacity:1; transform:none; }
.card__media{
  display:block; position:relative; overflow:hidden; border-radius:6px;
  background:var(--bg-2); aspect-ratio:var(--ar,1.78);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.card__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__media::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(12,11,10,.72) 0%, rgba(12,11,10,0) 52%);
  transition:opacity .5s var(--ease);
}
.card:hover .card__media::after{ opacity:1; }
.card__play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:var(--brand); display:grid; place-items:center;
  opacity:0; transform:scale(.72); z-index:2;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.card:hover .card__play{ opacity:1; transform:scale(1); }
.card__play::before{ content:""; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff; margin-left:3px; }
.card__meta{ display:flex; justify-content:space-between; gap:12px; padding:10px 2px 0; align-items:baseline; }
.card__t{ font-size:13px; line-height:1.4; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card__c{ font-family:var(--mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; }

.work__foot{ display:flex; align-items:center; justify-content:space-between; gap:22px;
  flex-wrap:wrap; margin-top:clamp(32px,4vw,54px); }

/* ============================================================
   SERVICES
   ============================================================ */
.caps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.caps li{ border-bottom:1px solid var(--line); }
.caps a{
  display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,1.3fr) 32px;
  gap:22px; align-items:center; padding:clamp(18px,2.2vw,30px) 0;
  transition:padding-left .55s var(--ease); position:relative;
}
.caps a::before{ content:""; position:absolute; left:-2vw; right:-2vw; top:0; bottom:0;
  background:var(--brand-soft); opacity:0; transition:opacity .4s var(--ease); z-index:-1; }
.caps a:hover::before{ opacity:1; }
.caps a:hover{ padding-left:14px; }
.caps__n{ font-family:var(--mono); font-size:11px; color:var(--brand-ink); }
.caps__t{ font-family:var(--display); font-weight:340; font-size:clamp(20px,2.3vw,31px);
  line-height:1.1; letter-spacing:-.02em; }
.caps__d{ font-size:13.5px; color:var(--ink-3); line-height:1.55; }
.caps__a{ font-size:15px; color:var(--ink-3); justify-self:end;
  transition:transform .45s var(--ease), color .35s; }
.caps a:hover .caps__a{ transform:translate(4px,-4px); color:var(--brand); }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,38px); }
.step{ border-top:2px solid var(--brand); padding-top:18px; }
.step i{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--brand-ink); }
.step h3{ font-family:var(--display); font-weight:340; font-size:clamp(21px,2.2vw,29px);
  margin:12px 0 11px; letter-spacing:-.02em; }
.step p{ margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.6; }

/* ============================================================
   REVIEWS
   ============================================================ */
.quotes{ columns:3; column-gap:clamp(14px,1.6vw,24px); }
.quote{
  break-inside:avoid; margin:0 0 clamp(14px,1.6vw,24px);
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(20px,2.4vw,34px); border-radius:8px;
}
.quote__stars{ color:var(--brand); font-size:12px; letter-spacing:.22em; margin-bottom:14px; }
.quote blockquote{ margin:0 0 18px; font-family:var(--display); font-weight:330;
  font-size:clamp(15.5px,1.35vw,20px); line-height:1.45; letter-spacing:-.012em; color:var(--ink); }
.quote--lg blockquote{ font-size:clamp(18px,1.85vw,26px); font-style:italic; }
.quote figcaption{ display:flex; flex-direction:column; gap:3px; padding-top:14px;
  border-top:1px solid var(--line); }
.quote figcaption b{ font-size:13px; font-weight:500; }
.quote figcaption span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.5; }
.quotes__note{ margin:clamp(18px,2.4vw,30px) 0 0; text-align:center; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ============================================================
   TOOLKIT
   ============================================================ */
.tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4.5vw,72px); }
.tools__h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-ink); margin:0 0 18px; }
.tools__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.tools__list li{ display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line); }
.tools__list b{ font-family:var(--display); font-weight:400; font-size:clamp(16px,1.6vw,21px);
  letter-spacing:-.01em; }
.tools__list span{ font-size:12.5px; color:var(--ink-3); text-align:right; }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,76px); align-items:start; }
.founder p{ color:var(--ink-2); max-width:56ch; margin:0 0 1.3em; }
.prose__lead{ font-family:var(--display); font-weight:330; font-style:italic;
  font-size:clamp(19px,2vw,28px); line-height:1.34; letter-spacing:-.015em; color:var(--ink) !important; }
.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.facts li{ display:flex; gap:18px; padding:13px 0; border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-2); }
.facts span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); width:104px; flex:none; padding-top:3px; }

/* ============================================================
   ENGAGE / PRICING
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px); }
.plan{ border:1px solid var(--line); border-radius:10px; padding:clamp(22px,2.6vw,36px);
  background:var(--surface); display:flex; flex-direction:column; }
.plan--pick{ border-color:var(--brand); box-shadow:var(--shadow); }
.plan__tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-ink); margin:0 0 14px; }
.plan h3{ font-family:var(--display); font-weight:340; font-size:clamp(22px,2.3vw,31px);
  margin:0 0 6px; letter-spacing:-.02em; }
.plan__rate{ font-size:14px; color:var(--ink-3); margin:0 0 20px; }
.plan__rate b{ color:var(--ink); font-weight:500; }
.plan ul{ list-style:none; margin:0 0 24px; padding:0; flex:1; }
.plan li{ font-size:13.5px; color:var(--ink-2); padding:7px 0 7px 20px; position:relative; }
.plan li::before{ content:""; position:absolute; left:0; top:14px; width:7px; height:7px;
  border-radius:50%; background:var(--brand); opacity:.5; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__h{ font-family:var(--display); font-weight:330; font-size:clamp(42px,9vw,138px);
  line-height:.92; letter-spacing:-.035em; margin:0; }
.contact__h em{ font-style:italic; font-weight:300; color:var(--brand); }
.contact__lede{ max-width:48ch; color:var(--ink-2); margin:clamp(20px,2.6vw,32px) 0 clamp(34px,4.5vw,58px);
  font-size:16.5px; }
/* ============================================================
   SCROLL EXPERIENCE
   ============================================================ */
.progress{
  position:fixed; inset:0 0 auto; height:2px; z-index:850;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, #E4631B, #F09A4A);
  transform-origin:left;
  transition:width .12s linear;
}

/* headline reveal, word by word */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{
  display:inline-block;
  transform:translateY(105%) rotate(2deg);
  transition:transform 1s var(--ease);
}
.in .word > span, [data-split].in .word > span{ transform:none; }
[data-split] .word:nth-child(1) > span{ transition-delay:.02s }
[data-split] .word:nth-child(2) > span{ transition-delay:.06s }
[data-split] .word:nth-child(3) > span{ transition-delay:.10s }
[data-split] .word:nth-child(4) > span{ transition-delay:.14s }
[data-split] .word:nth-child(5) > span{ transition-delay:.18s }
[data-split] .word:nth-child(6) > span{ transition-delay:.22s }
[data-split] .word:nth-child(n+7) > span{ transition-delay:.26s }

/* directional reveals */
.reveal--left{ transform:translateX(-28px); }
.reveal--right{ transform:translateX(28px); }
.reveal--left.in, .reveal--right.in{ transform:none; }

/* row-by-row stagger for lists */
.stagger > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:.00s }
.stagger.in > *:nth-child(2){ transition-delay:.05s }
.stagger.in > *:nth-child(3){ transition-delay:.10s }
.stagger.in > *:nth-child(4){ transition-delay:.15s }
.stagger.in > *:nth-child(5){ transition-delay:.20s }
.stagger.in > *:nth-child(6){ transition-delay:.25s }
.stagger.in > *:nth-child(7){ transition-delay:.30s }
.stagger.in > *:nth-child(n+8){ transition-delay:.35s }

/* section frame that draws itself in */
.sec__head{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .word > span{ transform:none !important; }
  .stagger > *{ opacity:1 !important; transform:none !important; }
  .progress span{ transition:none; }
}

/* ============================================================
   FEATURED REVIEW
   ============================================================ */
.hero-quote{
  margin:0 0 clamp(28px,3.5vw,48px);
  padding:clamp(28px,4vw,60px) clamp(24px,4vw,64px);
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:10px;
  background:var(--surface);
  position:relative; overflow:hidden;
}
.hero-quote::before{
  content:"“";
  position:absolute; right:.04em; bottom:-.34em;
  font-family:var(--display); font-size:clamp(120px,16vw,240px);
  line-height:1; color:var(--brand); opacity:.08; pointer-events:none;
}
.hero-quote__stars{ color:var(--brand); font-size:14px; letter-spacing:.26em; margin-bottom:clamp(16px,2vw,24px); }
.hero-quote blockquote{
  margin:0 0 clamp(20px,2.6vw,32px);
  font-family:var(--display); font-weight:330;
  font-size:clamp(22px,3.1vw,46px); line-height:1.28; letter-spacing:-.022em;
  max-width:22ch; max-width:min(100%, 24ch);
}
.hero-quote blockquote em{ font-style:italic; color:var(--brand); }
.hero-quote figcaption{ display:flex; flex-direction:column; gap:4px; }
.hero-quote figcaption b{ font-size:14.5px; font-weight:500; }
.hero-quote figcaption span{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
@media (min-width:900px){
  .hero-quote blockquote{ max-width:min(100%, 30ch); }
}

/* ============================================================
   CONTACT LAYOUT
   ============================================================ */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(32px,4.5vw,72px); align-items:start;
}
.contact__side-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 4px;
}
.contact__hours{
  display:flex; align-items:center; gap:9px; margin:clamp(20px,2.4vw,30px) 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
/* the sidebar column is narrow — stack label over value instead of side by side */
.contact__side .chans a{
  grid-template-columns:minmax(0,1fr) 22px; gap:3px 12px;
  align-items:start; padding:14px 0;
}
.contact__side .chans__k{ grid-column:1 / -1; }
.contact__side .chans__v{ font-size:clamp(16px,1.4vw,19px); line-height:1.3; }
.contact__side .chans a em{ align-self:center; }
@media (max-width:1040px){ .contact__grid{ grid-template-columns:1fr; } }

/* ---- brief form ---- */
.brief{ margin:0 0 clamp(44px,6vw,80px); }
.brief__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.brief__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.brief__field{ margin:0; display:flex; flex-direction:column; gap:8px; }
.brief__field--wide{ grid-column:1 / -1; }
.brief__field label{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.brief__field label span{ color:var(--brand); }
.brief__field input,
.brief__field select,
.brief__field textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:13px 15px; resize:vertical;
  transition:border-color .3s, box-shadow .3s, background .3s;
  -webkit-appearance:none; appearance:none;
}
.brief__field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23867E75' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;
}
.brief__field input::placeholder,
.brief__field textarea::placeholder{ color:var(--ink-3); opacity:.65; }
.brief__field input:focus,
.brief__field select:focus,
.brief__field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.brief__field input:invalid:not(:placeholder-shown){ border-color:#C4443A; }
.brief__foot{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,30px);
}
.brief__note{ font-size:13px; color:var(--ink-3); }
.brief__note a{ color:var(--brand-ink); border-bottom:1px solid currentColor; }

@media (max-width:880px){ .brief__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .brief__grid{ grid-template-columns:1fr; } }

.chans{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.chans li{ border-bottom:1px solid var(--line); }
.chans a{ display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr) 28px; gap:22px;
  align-items:center; padding:clamp(16px,2vw,26px) 0; transition:padding-left .55s var(--ease); }
.chans a:hover{ padding-left:14px; }
.chans__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); }
.chans__v{ font-family:var(--display); font-weight:340; font-size:clamp(18px,2vw,27px); letter-spacing:-.02em; }
.chans a em{ font-style:normal; justify-self:end; color:var(--ink-3);
  transition:transform .45s var(--ease), color .35s; }
.chans a:hover em{ transform:translate(4px,-4px); color:var(--brand); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:26px; color:var(--ink-3); }
.foot__in{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.foot a:hover{ color:var(--brand-ink); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position:fixed; inset:0; z-index:9500; background:rgba(8,7,6,.94);
  backdrop-filter:blur(10px); display:grid; place-items:center;
  padding:clamp(14px,4vw,52px); opacity:0; transition:opacity .4s var(--ease); }
.lb[hidden]{ display:none; }
.lb.is-on{ opacity:1; }
.lb__stage{ margin:0; width:min(1080px,100%); }
.lb__frame{ position:relative; width:100%; background:#000; border-radius:8px;
  overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.65); aspect-ratio:16/9; }
.lb__frame.is-tall{ aspect-ratio:9/16; max-height:78vh; margin-inline:auto; width:auto; }
.lb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb__cap{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:14px; color:#B9B2AA; }
.lb__cap b{ font-family:var(--display); font-weight:400; font-size:17px; color:#F6F3F0; }
.lb__cap span{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.lb__close, .lb__nav{
  position:absolute; z-index:2; cursor:pointer; background:rgba(246,243,240,.09); color:#F6F3F0;
  border:1px solid rgba(246,243,240,.2); border-radius:50%; width:44px; height:44px;
  display:grid; place-items:center; font-size:15px;
  transition:background .3s, transform .3s var(--ease);
}
.lb__close:hover, .lb__nav:hover{ background:var(--brand); border-color:var(--brand); transform:scale(1.06); }
.lb__close{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); }
.lb__nav--prev{ left:clamp(8px,2vw,24px); top:50%; margin-top:-22px; }
.lb__nav--next{ right:clamp(8px,2vw,24px); top:50%; margin-top:-22px; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal, .card{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){ .grid{ columns:3; } .quotes{ columns:2; } }

@media (max-width:1040px){
  .stats__grid{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
  .stat:nth-child(3n){ border-right:0; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .caps a{ grid-template-columns:46px minmax(0,1fr) 26px; }
  .caps__d{ display:none; }
  .founder{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
}

@media (max-width:880px){
  .nav__links{
    position:fixed; inset:0 0 auto; padding:92px var(--gut) 36px;
    background:var(--bg); flex-direction:column; gap:0;
    transform:translateY(-102%); transition:transform .6s var(--ease);
    border-bottom:1px solid var(--line); z-index:-1;
  }
  .nav.is-open .nav__links{ transform:translateY(0); }
  .nav.is-open{ background:var(--bg); }
  .nav__links a{ font-family:var(--display); font-size:25px; padding:13px 0;
    border-bottom:1px solid var(--line); }
  .nav__links a::after{ display:none; }
  .nav__burger{ display:block; order:4; }
  .nav .btn--sm{ display:none; }
  .hero__foot{ grid-template-columns:1fr; align-items:start; }
  .grid{ columns:2; }
  .quotes{ columns:1; }
  .tools{ grid-template-columns:1fr; gap:38px; }
  .chans a{ grid-template-columns:1fr 24px; gap:4px 14px; }
  .chans__k{ grid-column:1 / -1; }
}

@media (max-width:600px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-right:0; }
  .stat:nth-child(odd){ border-right:1px solid var(--line); }
  .steps{ grid-template-columns:1fr; }
  .sec__head--split{ align-items:flex-start; }
  .foot__mid{ order:3; width:100%; }
  .work__foot{ flex-direction:column; align-items:flex-start; }
  .lockup small{ display:none; }
}