/* =============================================================
 * THREE52 AGENCY — V2  "Performance / bold edition"
 * A different art direction from V1: deep near-black canvas,
 * one electric accent, oversized Space Grotesk display type,
 * marquee ticker, asymmetric bento grid. Confident agency energy.
 * ============================================================= */

:root{
  --bg:      #0b0b0e;     /* deep near-black canvas */
  --bg-2:    #141418;     /* raised card */
  --bg-3:    #1c1c22;     /* hover / inset */
  --ink:     #f5f5f2;     /* off-white */
  --ink-2:   #9a9aa2;     /* muted */
  --ink-3:   #6a6a72;     /* faint */
  --line:    rgba(255,255,255,0.10);
  --line-2:  rgba(255,255,255,0.16);
  --acc:     #d4ff4f;     /* electric lime */
  --acc-ink: #0b0b0e;     /* black text on lime */
  --acc-dim: #b6e039;

  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;

  --maxw: 1240px;
  --pad:  clamp(20px, 4.5vw, 44px);
  --r:    20px;            /* default radius */
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  letter-spacing:-0.01em; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--acc); color:var(--acc-ink); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp); font-size:13px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:980px; padding:8px 16px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); }
.disp{
  font-family:var(--disp); font-weight:700; line-height:0.98;
  letter-spacing:-0.035em; margin:0; color:var(--ink); text-wrap:balance;
}
.d-1{ font-size:clamp(52px, 9.5vw, 132px); }
.d-2{ font-size:clamp(40px, 6vw, 84px); }
.d-3{ font-size:clamp(30px, 4vw, 52px); }
.acc{ color:var(--acc); }
.u-acc{ background:linear-gradient(transparent 62%, var(--acc) 62%); padding:0 .06em; color:var(--ink); }
.lede{ font-size:clamp(18px, 1.7vw, 22px); color:var(--ink-2); line-height:1.5; max-width:46ch; margin:0; }
.muted{ color:var(--ink-2); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-0.01em;
  height:54px; padding:0 28px; border-radius:980px; border:1px solid transparent;
  cursor:pointer; transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn--acc{ background:var(--acc); color:var(--acc-ink); }
.btn--acc:hover{ transform:translateY(-2px); background:#e3ff79; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--sm{ height:42px; padding:0 18px; font-size:14px; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(11,11,14,0.72); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-0.03em; }
.brand .b-dot{ width:9px; height:9px; border-radius:50%; background:var(--acc); margin-top:2px; }
.brand .tld{ color:var(--ink-3); font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:30px; font-family:var(--disp); font-size:15px; font-weight:500; }
.nav-links a.lnk{ color:var(--ink-2); transition:color .15s var(--ease); }
.nav-links a.lnk:hover{ color:var(--ink); }
.nav-burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; color:var(--ink); cursor:pointer; }
.nav-burger svg{ width:26px; height:26px; }
.mobile{ position:fixed; inset:72px 0 auto 0; z-index:55; background:var(--bg-2); border-bottom:1px solid var(--line); display:none; flex-direction:column; padding:14px var(--pad) 26px; }
.mobile.open{ display:flex; }
.mobile a{ padding:14px 2px; font-family:var(--disp); font-size:19px; border-bottom:1px solid var(--line); }
.mobile a:last-child{ border:0; margin-top:14px; }

/* ---------- Sections ---------- */
section{ padding-block: clamp(70px, 10vw, 130px); position:relative; }
.sec-head{ max-width:780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .lede{ margin-top:18px; }

/* ---------- Hero ---------- */
.hero{ padding-top: clamp(130px, 16vw, 200px); padding-bottom: clamp(50px, 7vw, 90px); }
.hero .disp{ margin-top:26px; max-width:16ch; }
.hero .lede{ margin-top:26px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-strip{
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,64px); margin-top: clamp(48px,6vw,76px);
  padding-top:32px; border-top:1px solid var(--line);
}
.hero-strip .hs{ display:flex; flex-direction:column; gap:4px; }
.hero-strip .hs .n{ font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.4vw,44px); letter-spacing:-0.03em; color:var(--ink); }
.hero-strip .hs .n b{ color:var(--acc); font-weight:700; }
.hero-strip .hs .c{ font-size:13.5px; color:var(--ink-2); }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--acc); color:var(--acc-ink);
  overflow:hidden; padding-block:16px;
}
.marquee__track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:scrollx 26s linear infinite; }
.marquee__track span{ font-family:var(--disp); font-weight:600; font-size:clamp(18px,2vw,26px); letter-spacing:-0.01em; padding-inline:28px; display:inline-flex; align-items:center; gap:28px; }
.marquee__track span::after{ content:"✦"; font-size:0.7em; opacity:.6; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------- Trusted ---------- */
.trusted{ padding-block: clamp(44px,6vw,72px); }
.trusted .lbl{ font-family:var(--disp); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-bottom:28px; }
.trusted-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(26px,5vw,68px); }
.trusted-row span{ font-family:var(--disp); font-weight:600; font-size:clamp(16px,1.9vw,21px); color:var(--ink); opacity:.45; transition:opacity .25s var(--ease); }
.trusted-row span:hover{ opacity:1; }

/* ---------- Bento services ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:14px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
  position:relative; overflow:hidden; min-height:230px;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.card .tag{ font-family:var(--disp); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--acc); }
.card h3{ font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.3vw,30px); letter-spacing:-0.025em; margin:0; }
.card p{ color:var(--ink-2); font-size:15.5px; line-height:1.5; margin:0; }
.card .num{ position:absolute; top:18px; right:22px; font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink-3); }
.card--wide{ grid-column:span 4; }
.card--mid{ grid-column:span 3; }
.card--third{ grid-column:span 2; }
.card--feature{ grid-column:span 6; background:var(--acc); color:var(--acc-ink); min-height:auto; }
.card--feature h3{ font-size:clamp(26px,3vw,40px); }
.card--feature p{ color:rgba(11,11,14,0.7); max-width:52ch; }
.card--feature .tag{ color:rgba(11,11,14,0.6); }
.card--dark-on-acc .btn--ghost{ border-color:rgba(11,11,14,0.3); color:var(--acc-ink); }
.card--dark-on-acc .btn--ghost:hover{ border-color:var(--acc-ink); }
@media (max-width:880px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card--wide,.card--mid,.card--third,.card--feature{ grid-column:span 2; }
}

/* ---------- Stats ---------- */
.stats{ background:var(--bg); border-block:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px); }
.stat .n{ font-family:var(--disp); font-weight:700; font-size:clamp(46px,6.5vw,86px); letter-spacing:-0.04em; line-height:1; color:var(--acc); }
.stat .c{ margin-top:12px; font-size:14px; color:var(--ink-2); max-width:22ch; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; gap:36px 20px; } }

/* ---------- Work ---------- */
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.work{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3vw,40px); transition:border-color .25s var(--ease), transform .25s var(--ease);
  display:flex; flex-direction:column; gap:16px;
}
.work:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.work .client{ font-family:var(--disp); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }
.work .title{ font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-0.025em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.chip{ font-family:var(--disp); font-size:13px; font-weight:500; color:var(--ink); background:var(--bg-3); border:1px solid var(--line); border-radius:980px; padding:6px 13px; }
.chip b{ color:var(--acc); font-weight:600; }
@media (max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------- Story ---------- */
.story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.story .body p{ color:var(--ink-2); }
.story .body p + p{ margin-top:16px; }
.story-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(28px,3.4vw,44px); }
.story-card .mono{ width:84px; height:84px; border-radius:18px; background:var(--acc); color:var(--acc-ink); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:34px; letter-spacing:-0.03em; }
.story-card .nm{ font-family:var(--disp); font-weight:600; font-size:24px; margin-top:22px; }
.story-card .rl{ font-family:var(--disp); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--acc); margin-top:6px; }
.story-card .bio{ color:var(--ink-2); font-size:15.5px; margin-top:16px; line-height:1.55; }
@media (max-width:820px){ .story{ grid-template-columns:1fr; } }

/* ---------- Big CTA ---------- */
.cta{ text-align:center; padding-block: clamp(90px,13vw,170px); }
.cta .disp{ margin-inline:auto; max-width:16ch; }
.cta .hero-cta{ justify-content:center; margin-top:34px; }
.cta .mail{ font-family:var(--disp); margin-top:24px; color:var(--ink-2); }
.cta .mail a{ color:var(--acc); }

/* ---------- Contact (page) ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.ci{ display:flex; flex-direction:column; gap:24px; }
.ci .lbl{ font-family:var(--disp); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.ci .val,.ci a{ font-size:18px; color:var(--ink); }
.ci a:hover{ color:var(--acc); }
.form{ display:flex; flex-direction:column; gap:16px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,40px); }
.form .f label{ font-family:var(--disp); font-size:13px; font-weight:500; display:block; margin-bottom:7px; }
.form input,.form textarea{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-3); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--acc); }
.form textarea{ min-height:130px; resize:vertical; }
.form .btn{ align-self:flex-start; margin-top:6px; }
.form .note{ font-size:13px; color:var(--ink-3); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding-block:54px 34px; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; padding-bottom:40px; }
.foot-brand p{ color:var(--ink-2); font-size:14px; max-width:34ch; margin:14px 0 0; }
.foot-col h6{ font-family:var(--disp); font-size:13px; color:var(--ink); margin:0 0 14px; letter-spacing:0.04em; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color:var(--ink-2); font-size:14px; }
.foot-col a:hover{ color:var(--acc); }
.foot-bot{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; gap:32px 20px; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

@media (max-width:760px){
  .nav-links .lnk{ display:none; }
  .nav-burger{ display:flex; }
}