/* ============================================================
   HIBIKI — v2 "IDGAF" gen-z brutalist layout
   Lime · electric blue · ink · warm paper · hot-pink pop
   Anton (giant caps) + Space Grotesk + Space Mono
   ============================================================ */
:root{
  --lime:#CCFF00;
  --lime-d:#A6D400;
  --blue:#2B1BFF;
  --pink:#FF5DA2;
  --ink:#0B0B0B;
  --paper:#F3EFE4;       /* warm bone */
  --paper-2:#E9E3D2;
  --white:#ffffff;
  --line:#0B0B0B;

  --anton:"Anton",Impact,sans-serif;
  --grotesk:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --bd:2.5px solid var(--ink);
  --bd-bold:4px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1340px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--grotesk); font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (pointer:fine){ body{ cursor:none; } }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--lime); color:var(--ink); }
section{ position:relative; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 30px; }
.mono{ font-family:var(--mono); }
.upper{ text-transform:uppercase; }

/* dotted paper grid texture */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(11,11,11,.10) 1.1px, transparent 1.2px);
  background-size:26px 26px;
}
.shell{ position:relative; z-index:1; }

/* ---------- custom cursor ---------- */
.cur{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:20px; height:20px; border-radius:50%; background:var(--blue);
  mix-blend-mode:difference; transform:translate(-50%,-50%);
  transition:width .2s var(--ease),height .2s var(--ease); }
.cur.big{ width:74px; height:74px; }
/* alt cursor style: hollow ring + crosshair dot */
.cur-dot2{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:6px; height:6px;
  border-radius:50%; background:var(--ink); display:none; }
body[data-cursor="ring"] .cur{ background:transparent; mix-blend-mode:normal;
  border:2.5px solid var(--ink); box-shadow:0 0 0 1px rgba(243,239,228,.5) inset; }
body[data-cursor="ring"] .cur.big{ background:rgba(204,255,0,.18); border-color:var(--ink); }
body[data-cursor="ring"] .cur-dot2{ display:block; }
/* off = native system cursor */
body[data-cursor="off"]{ cursor:auto; }
body[data-cursor="off"] .cur,
body[data-cursor="off"] .cur-dot2,
body[data-cursor="off"] .cur-tag{ display:none; }
.cur-tag{ position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:var(--ink); color:var(--lime); padding:4px 9px; border-radius:100px; opacity:0; transition:opacity .18s; white-space:nowrap; }
@media (pointer:coarse){ .cur,.cur-tag{ display:none; } }

/* ---------- buttons ---------- */
.btn{ font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:14px;
  display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border:var(--bd);
  background:var(--white); color:var(--ink); box-shadow:var(--shadow);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s,color .14s; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn-lime{ background:var(--lime); }
.btn-blue{ background:var(--blue); color:var(--white); }
.btn-ink{ background:var(--ink); color:var(--lime); }
.btn .ar{ font-size:16px; }

/* ---------- chip / tag ---------- */
.tag{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:var(--bd); border-radius:100px; background:var(--white); }
.tag.lime{ background:var(--lime); }
.tag.blue{ background:var(--blue); color:#fff; }
.tag.pink{ background:var(--pink); }
.tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); }
.tag .dot.live{ background:#19E36B; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ---------- sticker (rotatable / draggable) ---------- */
.sticker{ position:absolute; z-index:5; font-family:var(--mono); font-weight:700; text-transform:uppercase;
  display:grid; place-items:center; text-align:center; line-height:1.05; user-select:none; }
.sticker.drag{ cursor:grab; }
.sticker.drag:active{ cursor:grabbing; }
.seal{ width:120px; height:120px; }
.seal svg{ position:absolute; inset:0; width:100%; height:100%; }
.seal span{ position:relative; z-index:1; font-size:13px; }
.badge{ padding:9px 14px; border:var(--bd); box-shadow:var(--shadow); font-size:13px; background:var(--white); }
.badge.lime{ background:var(--lime); } .badge.blue{ background:var(--blue); color:#fff; } .badge.pink{ background:var(--pink); }
.spin{ animation:spin 16s linear infinite; } .spin.rev{ animation-direction:reverse; }
@keyframes spin{ to{ rotate:360deg; } }
@media (max-width:820px){ .sticker.hide-sm{ display:none; } }

/* ============================================================ NAV */
.nav{ position:sticky; top:0; z-index:900; background:var(--paper); border-bottom:var(--bd-bold);
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 30px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--anton); font-size:30px; letter-spacing:.01em; text-transform:uppercase; }
.brand .mk{ width:30px; height:30px; flex:none; }
.nav-mid{ display:flex; gap:6px; }
.nav-mid a{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; padding:8px 12px; border:2.5px solid transparent; transition:.14s; }
.nav-mid a:hover{ border-color:var(--ink); background:var(--lime); }
.nav-right{ display:flex; align-items:center; gap:12px; }
@media (max-width:980px){ .nav-mid{ display:none; } }
@media (max-width:560px){ .nav-right .tag{ display:none; } .brand{ font-size:24px; } }

/* ---------- ticker ---------- */
.ticker{ background:var(--ink); color:var(--lime); border-bottom:var(--bd-bold); overflow:hidden; padding:9px 0; }
.ticker .row{ display:flex; gap:34px; width:max-content; animation:marq 22s linear infinite;
  font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.04em; white-space:nowrap; }
.ticker .row span{ display:inline-flex; align-items:center; gap:34px; }
.ticker .star{ color:var(--lime); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================ HERO */
.hero{ position:relative; padding:64px 0 80px; overflow:hidden; }
.hero .eyebrow{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.hero .eyebrow::before{ content:""; width:34px; height:0; border-top:var(--bd); }
.hero h1{ font-family:var(--anton); text-transform:uppercase; line-height:.84; letter-spacing:.005em;
  font-size:clamp(54px,11vw,168px); font-weight:400; }
.hero h1 .ln{ display:block; }
.hero h1 .mark{ background:var(--lime); padding:0 .08em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero h1 .out{ color:transparent; -webkit-text-stroke:2.5px var(--ink); }
.hero h1 .blue{ color:var(--blue); }
.hero h1 .tilt{ display:inline-block; transform:rotate(-3deg); }
.hero-sub{ max-width:540px; margin-top:30px; font-size:clamp(17px,1.7vw,21px); line-height:1.45; }
.hero-sub b{ background:var(--blue); color:#fff; padding:0 .12em; }
.hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-stage{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-stage .sticker{ pointer-events:auto; }
@media (max-width:820px){ .hero{ padding:40px 0 56px; } }

/* polaroid placeholder */
.polaroid{ background:var(--white); border:var(--bd); box-shadow:var(--shadow-lg); padding:12px 12px 38px; position:relative; }
.polaroid .slot{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ink); }
.polaroid .cap{ position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; }
.slot .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; text-align:center; padding:10px; }
.slot .ph .t{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; }
.slot .ph .s{ font-family:var(--mono); font-size:10px; opacity:.7; letter-spacing:.06em; }
.slot .grad{ position:absolute; inset:0; }
.slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================ BIG MARQUEE band */
.band{ background:var(--lime); border-top:var(--bd-bold); border-bottom:var(--bd-bold); overflow:hidden; padding:22px 0; }
.band.ink{ background:var(--ink); }
.band .row{ display:flex; align-items:center; gap:38px; width:max-content; white-space:nowrap;
  font-family:var(--anton); text-transform:uppercase; font-size:clamp(40px,7vw,104px); line-height:1; }
.band .row span{ display:inline-flex; align-items:center; gap:38px; }
.band.ink .row{ color:var(--lime); }
.band .row .o{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.band.ink .row .o{ -webkit-text-stroke:2px var(--lime); }
.band .row .st{ font-size:.5em; }
.marq-l{ animation:marq 26s linear infinite; }
.marq-r{ animation:marq-r 30s linear infinite; }
@keyframes marq-r{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }

/* ============================================================ section heading ---------- */
.sec{ padding:96px 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.sec-head h2{ font-family:var(--anton); text-transform:uppercase; font-weight:400; line-height:.86;
  font-size:clamp(40px,7vw,104px); letter-spacing:.005em; }
.sec-head h2 .mark{ background:var(--lime); padding:0 .08em; }
.sec-head h2 .blue{ color:var(--blue); }
.sec-num{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

/* ============================================================ SERVICES bento */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cell{ border:var(--bd); background:var(--white); padding:26px; min-height:230px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s,color .16s; }
.cell:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); background:var(--lime); }
.cell.c-blue:hover{ background:var(--blue); color:#fff; }
.cell.c-pink:hover{ background:var(--pink); }
.cell.span3{ grid-column:span 3; } .cell.span2{ grid-column:span 2; } .cell.span4{ grid-column:span 4; }
.cell .no{ font-family:var(--mono); font-size:13px; font-weight:700; }
.cell h3{ font-family:var(--anton); text-transform:uppercase; font-weight:400; line-height:.9; font-size:clamp(26px,3vw,44px); margin-top:14px; }
.cell p{ font-size:15px; margin-top:12px; max-width:42ch; }
.cell .ctags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.cell .ctags span{ font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 9px; border:2px solid var(--ink); border-radius:100px; }
.cell .big-emo{ position:absolute; right:-6px; bottom:-14px; font-family:var(--anton); font-size:120px; line-height:1; color:var(--ink); opacity:.06; }
@media (max-width:980px){ .bento{ grid-template-columns:repeat(2,1fr); } .cell,.cell.span3,.cell.span2,.cell.span4{ grid-column:span 1; } }

/* ============================================================ RECEIPTS (numbers) */
.receipts{ background:var(--ink); color:var(--paper); border-top:var(--bd-bold); border-bottom:var(--bd-bold); }
.receipts .sec-head h2{ color:var(--paper); }
.rgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:var(--bd); border-color:var(--paper); }
.rcell{ padding:40px 26px; border-right:2.5px solid var(--paper); }
.rcell:last-child{ border-right:0; }
.rcell .k{ font-family:var(--anton); font-weight:400; line-height:.9; font-size:clamp(46px,6vw,88px); color:var(--lime); }
.rcell:nth-child(2) .k{ color:var(--pink); } .rcell:nth-child(3) .k{ color:#fff; } .rcell:nth-child(4) .k{ color:var(--lime); }
.rcell .v{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; margin-top:12px; color:var(--paper-2); }
@media (max-width:820px){ .rgrid{ grid-template-columns:repeat(2,1fr); } .rcell{ border-bottom:2.5px solid var(--paper); } .rcell:nth-child(2){ border-right:0; } }

/* ============================================================ WORK wall */
.work-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; }
.wk{ position:relative; border:var(--bd); background:var(--white); box-shadow:var(--shadow); padding:10px 10px 14px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease); }
.wk:nth-child(odd){ transform:rotate(-2.2deg); } .wk:nth-child(even){ transform:rotate(1.8deg); }
.wk:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:var(--shadow-lg); z-index:3; }
.wk .slot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
.wk .tape{ position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:84px; height:24px;
  background:rgba(204,255,0,.85); border:2px solid var(--ink); z-index:4; }
.wk .meta{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:10px; }
.wk .ttl{ font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:19px; line-height:.95; }
.wk .cat{ font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; }
.wk .res{ font-family:var(--mono); font-size:11px; font-weight:700; margin-top:6px; background:var(--lime); display:inline-block; padding:2px 7px; border:2px solid var(--ink); }
@media (max-width:980px){ .work-wall{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .work-wall{ grid-template-columns:1fr; } }

/* ============================================================ MANIFESTO */
.manifesto{ background:var(--blue); color:#fff; border-top:var(--bd-bold); border-bottom:var(--bd-bold); }
.manifesto .big{ font-family:var(--anton); text-transform:uppercase; font-weight:400; line-height:.92;
  font-size:clamp(34px,5.4vw,82px); max-width:18ch; }
.manifesto .big .mark{ background:var(--lime); color:var(--ink); padding:0 .06em; }
.manifesto .big .o{ color:transparent; -webkit-text-stroke:2px #fff; }
.manifesto .lead{ font-family:var(--mono); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:26px; }
.mani-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:46px; max-width:880px; }
.mani-list .li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:2.5px solid rgba(255,255,255,.5); }
.mani-list .li .x{ font-family:var(--mono); font-weight:700; color:var(--lime); }
.mani-list .li .old{ font-family:var(--grotesk); text-decoration:line-through; opacity:.6; font-size:16px; }
.mani-list .li .new{ font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:22px; }
@media (max-width:720px){ .mani-list{ grid-template-columns:1fr; } }

/* ============================================================ CREW */
.crew-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mate{ border:var(--bd); background:var(--white); box-shadow:var(--shadow); overflow:hidden;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease); }
.mate:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); }
.mate .pic{ position:relative; aspect-ratio:4/3.3; overflow:hidden; border-bottom:var(--bd); }
.mate .pic .grad{ position:absolute; inset:0; }
.mate .pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mate .pic .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#fff; mix-blend-mode:difference; }
.mate .pic .ph .t{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; }
.mate .pic .ph .s{ font-family:var(--mono); font-size:10px; opacity:.75; }
.mate .pic .no{ position:absolute; top:10px; left:12px; font-family:var(--anton); font-size:24px; color:#fff; mix-blend-mode:difference; }
.mate .pic .disc{ position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase;
  padding:5px 10px; border:2px solid var(--ink); background:var(--lime); }
.mate .info{ padding:18px 20px 22px; }
.mate .info .ti{ font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:30px; line-height:.92; }
.mate .info .nm{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; margin-top:8px; }
.mate .info .nm b{ background:var(--lime); padding:1px 6px; border:2px solid var(--ink); }
.mate .info .rl{ font-size:14px; margin-top:12px; color:#333; }
.mate.join{ background:var(--lime); display:flex; align-items:center; justify-content:center; text-align:center; }
.mate.join .ji{ padding:34px; }
.mate.join .ji .h{ font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:34px; line-height:.92; }
.mate.join .ji p{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; margin:12px 0 20px; }
@media (max-width:900px){ .crew-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .crew-grid{ grid-template-columns:1fr; } }

/* ============================================================ CTA */
.cta{ background:var(--lime); border-top:var(--bd-bold); text-align:center; padding:110px 0; position:relative; overflow:hidden; }
.cta h2{ font-family:var(--anton); text-transform:uppercase; font-weight:400; line-height:.86; font-size:clamp(52px,11vw,160px); }
.cta h2 .o{ color:transparent; -webkit-text-stroke:2.5px var(--ink); }
.cta p{ font-family:var(--mono); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:24px auto 34px; max-width:46ch; }
.cta .sticker{ z-index:2; }

/* ============================================================ FOOTER */
.foot{ background:var(--ink); color:var(--paper); padding:60px 0 36px; }
.foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:2.5px solid rgba(243,239,228,.3); }
.foot .brand{ color:var(--paper); }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-cols h4{ font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; color:var(--lime); margin-bottom:14px; letter-spacing:.06em; }
.foot-cols a{ display:block; font-family:var(--mono); font-size:13px; color:var(--paper-2); padding:5px 0; }
.foot-cols a:hover{ color:var(--lime); }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:26px;
  font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; color:var(--paper-2); }

/* ---------- version switcher (floating) ---------- */
.switcher{ position:fixed; right:18px; bottom:18px; z-index:950; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:2.5px solid var(--lime); padding:8px 8px 8px 14px; border-radius:100px; box-shadow:var(--shadow); }
.switcher a{ padding:6px 11px; border-radius:100px; border:2px solid transparent; }
.switcher a.on{ background:var(--lime); color:var(--ink); }
.switcher a:not(.on):hover{ border-color:var(--lime); }
@media (pointer:fine){ .switcher{ cursor:none; } }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } .spin,.marq-l,.marq-r,.ticker .row,.radar .sweep,.cm-row{ animation:none; } }

/* ============================================================
   v2.1 ADDITIONS — overlap fixes · AI · clients · studio · mobile
   ============================================================ */

/* ---------- FIX: marker-highlight overlapping the line above ----------
   tight Anton line-heights made the lime .mark bg bleed onto the row above.
   give highlighted headings room + clip the highlight to each line. */
.hero h1{ line-height:.96; }
.hero h1 .mark, .sec-head h2 .mark, .manifesto .big .mark, .ai h2 .mark, .cta h2 .o{
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero h1 .mark{ padding:.02em .08em; }
.hero h1 .mark.ink{ background:var(--ink); color:var(--lime); }
.sec-head h2{ line-height:1.04; }
.sec-head h2 .mark.bend{ display:inline-block; transform:rotate(-3deg); transform-origin:50% 60%; margin:.04em .18em .04em 0; }
.manifesto .big{ line-height:1.08; }
.manifesto .big .mark{ padding:.02em .06em; line-height:1; }
.ai h2{ line-height:1.14; }
.ai-l h2 .mark{ -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .06em; }

/* ---------- scroll progress bar ---------- */
.scrollbar{ position:fixed; top:0; left:0; height:4px; width:0; z-index:1200; background:var(--lime); border-right:2px solid var(--ink); pointer-events:none; }

/* ---------- logo layer (swappable) ---------- */
.mk-wrap{ display:inline-flex; align-items:center; }
.mk-wrap img{ height:34px; width:auto; max-width:170px; object-fit:contain; display:block; }
.foot .mk-wrap img{ height:34px; }

/* ---------- mobile nav: burger + drawer ---------- */
.burger{ display:none; width:46px; height:46px; border:var(--bd); background:var(--lime); box-shadow:3px 3px 0 var(--ink);
  flex-direction:column; gap:4px; align-items:center; justify-content:center; padding:0; }
.burger span{ width:22px; height:2.5px; background:var(--ink); display:block; transition:.2s var(--ease); }
.burger.x span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.x span:nth-child(2){ opacity:0; }
.burger.x span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.drawer{ position:fixed; top:0; right:0; z-index:899; width:min(78vw,320px); height:100dvh;
  background:var(--paper); border-left:var(--bd-bold); padding:90px 26px 30px;
  display:flex; flex-direction:column; gap:6px; transform:translateX(105%); transition:transform .32s var(--ease); }
.drawer.open{ transform:none; box-shadow:-14px 0 0 rgba(11,11,11,.12); }
.drawer a{ font-family:var(--anton); text-transform:uppercase; font-size:30px; padding:10px 0; border-bottom:2.5px solid var(--ink); }
.drawer a:active{ color:var(--blue); }
.drawer .d-cta{ margin-top:14px; border:var(--bd); background:var(--ink); color:var(--lime); text-align:center; font-size:20px; padding:16px; box-shadow:var(--shadow); }
.nav-scrim{ position:fixed; inset:0; z-index:898; background:rgba(11,11,11,.4); opacity:0; pointer-events:none; transition:opacity .3s; }
.nav-scrim.on{ opacity:1; pointer-events:auto; }
@media (max-width:980px){ .burger{ display:flex; } }

/* ---------- magnetic ---------- */
.magnetic{ will-change:transform; }

/* ============================================================ AI SECTION */
.ai{ background:var(--paper); border-top:var(--bd-bold); border-bottom:var(--bd-bold); overflow:hidden; }
.ai-stamp.ai-stamp{ top:40px; right:5%; width:104px; height:104px; }
.ai-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; }
.ai-l h2{ font-family:var(--anton); text-transform:uppercase; font-weight:400; font-size:clamp(38px,5.4vw,82px); margin:14px 0 22px; }
.ai-l h2 .mark{ background:var(--lime); padding:0 .06em; }
.ai-l h2 .o{ color:transparent; -webkit-text-stroke:2px var(--ink); }
.ai-lead{ font-size:clamp(16px,1.5vw,19px); max-width:52ch; }
.ai-lead b{ background:var(--ink); color:var(--lime); padding:0 .14em; }
.ai-pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }

/* terminal card */
.term{ border:var(--bd); background:var(--ink); box-shadow:var(--shadow-lg); overflow:hidden; }
.term-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:2.5px solid rgba(243,239,228,.25); }
.term-bar i{ width:11px; height:11px; border-radius:50%; background:#555; }
.term-bar i:nth-child(1){ background:#FF5DA2; } .term-bar i:nth-child(2){ background:var(--lime); } .term-bar i:nth-child(3){ background:var(--blue); }
.term-bar span{ margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--paper-2); letter-spacing:.04em; }
.term-body{ padding:20px 20px 22px; font-family:var(--mono); font-size:13.5px; line-height:1.5; color:var(--paper); }
.term-body .tl{ display:flex; align-items:baseline; gap:8px; opacity:0; transform:translateX(-8px); white-space:nowrap; overflow:hidden; }
.ai.in .term-body .tl{ animation:termin .4s var(--ease) forwards; }
.ai.in .term-body .tl:nth-child(1){ animation-delay:.15s; } .ai.in .term-body .tl:nth-child(2){ animation-delay:.5s; }
.ai.in .term-body .tl:nth-child(3){ animation-delay:.85s; } .ai.in .term-body .tl:nth-child(4){ animation-delay:1.2s; }
.ai.in .term-body .tl:nth-child(5){ animation-delay:1.55s; } .ai.in .term-body .tl:nth-child(6){ animation-delay:1.9s; }
.ai.in .term-body .tl:nth-child(7){ animation-delay:2.25s; }
@keyframes termin{ to{ opacity:1; transform:none; } }
.term-body .pr{ color:var(--lime); }
.term-body .dots{ color:#4a4a4a; letter-spacing:1px; }
.term-body b{ color:#fff; }
.term-body b.up{ color:var(--lime); }
.term-body b.pink-t{ color:var(--pink); }
.term-body .cmd{ color:var(--paper-2); }
.term-body .caret .cmd::after{ content:"▍"; color:var(--lime); animation:blink 1s steps(1) infinite; }

/* radar */
.radar{ position:relative; height:120px; width:120px; margin:22px auto 0; border:var(--bd); border-radius:50%;
  background:radial-gradient(circle, rgba(43,27,255,.12), transparent 70%); overflow:hidden; }
.radar::before,.radar::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(11,11,11,.25); margin:24px; }
.radar::after{ margin:46px; }
.radar .sweep{ position:absolute; inset:0; background:conic-gradient(from 0deg, rgba(204,255,0,.55), transparent 28%); animation:spin 2.6s linear infinite; }
.radar .blip{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pink); border:1.5px solid var(--ink); }
.radar .b1{ top:30%; left:60%; } .radar .b2{ top:62%; left:38%; background:var(--blue); } .radar .b3{ top:46%; left:72%; background:var(--lime); }
@media (max-width:860px){ .ai-grid{ grid-template-columns:1fr; gap:32px; } .radar{ display:none; } }

/* ============================================================ CLIENTS */
.clients{ background:var(--paper); overflow:hidden; }
.clients-marquee{ border-top:var(--bd); border-bottom:var(--bd); background:var(--white); overflow:hidden; padding:18px 0; margin-bottom:46px; }
.cm-row{ display:flex; align-items:center; gap:46px; width:max-content; animation:marq 30s linear infinite; }
.cm-row:hover{ animation-play-state:paused; }
.cm-item{ font-family:var(--anton); text-transform:uppercase; font-size:30px; color:var(--ink); opacity:.32; white-space:nowrap; transition:opacity .2s; }
.cm-item:hover{ opacity:1; color:var(--blue); }
.cm-item img{ height:34px; width:auto; opacity:.5; filter:grayscale(1); }
.clients-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.client{ position:relative; border:var(--bd); background:var(--white); box-shadow:var(--shadow); aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center; padding:18px; text-align:center;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s; }
.client:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); background:var(--lime); }
.client .cname{ font-family:var(--anton); text-transform:uppercase; font-size:clamp(18px,2vw,26px); line-height:.95; letter-spacing:.01em; }
.client img{ max-height:62%; max-width:84%; width:auto; object-fit:contain; }
.client .corner{ position:absolute; top:8px; right:10px; font-family:var(--mono); font-size:10px; font-weight:700; opacity:.4; }
@media (max-width:980px){ .clients-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .clients-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================ SERVICES wide cell */
.cell.span6{ grid-column:span 6; }
.cell.wide{ flex-direction:row; align-items:center; gap:34px; min-height:170px; flex-wrap:wrap; }
.cell.wide .wide-l{ flex:1 1 280px; }
.cell.wide .wide-r{ flex:2 1 360px; }
.cell.wide h3{ margin-top:8px; }
.cell.wide:hover{ background:var(--lime); }
@media (max-width:980px){ .cell.span6{ grid-column:span 1; } .cell.wide{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* ============================================================ STUDIO editor panel */
.studio-btn{ position:fixed; left:18px; bottom:18px; z-index:1300; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:var(--lime); color:var(--ink); border:var(--bd); box-shadow:var(--shadow); padding:11px 16px; cursor:pointer; }
.studio-btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.studio-btn .ico{ font-size:15px; }
@media (pointer:fine){ .studio-btn{ cursor:none; } }

.studio-scrim{ position:fixed; inset:0; z-index:1399; background:rgba(11,11,11,.55); opacity:0; pointer-events:none; transition:opacity .3s; }
.studio-scrim.on{ opacity:1; pointer-events:auto; }
.studio{ position:fixed; top:0; right:0; z-index:1400; width:min(440px,100vw); height:100dvh; background:var(--paper);
  border-left:var(--bd-bold); transform:translateX(105%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; }
.studio.open{ transform:none; }
.studio-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px;
  border-bottom:var(--bd-bold); background:var(--lime); position:sticky; top:0; }
.studio-head .h{ font-family:var(--anton); text-transform:uppercase; font-size:26px; display:flex; align-items:center; gap:9px; }
.studio-head .x{ width:40px; height:40px; border:var(--bd); background:var(--paper); font-size:18px; box-shadow:2px 2px 0 var(--ink); cursor:pointer; display:grid; place-items:center; }
.studio-body{ overflow-y:auto; padding:18px 20px 30px; flex:1; -webkit-overflow-scrolling:touch; }
.studio-note{ font-family:var(--mono); font-size:11.5px; line-height:1.5; background:var(--white); border:2px dashed var(--ink); padding:12px 14px; margin-bottom:18px; }
.st-sec{ border:var(--bd); background:var(--white); box-shadow:4px 4px 0 var(--ink); margin-bottom:18px; }
.st-sec > .st-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; cursor:pointer; background:var(--paper-2); border-bottom:2.5px solid var(--ink); }
.st-sec > .st-bar .t{ font-family:var(--anton); text-transform:uppercase; font-size:18px; white-space:nowrap; }
.st-sec > .st-bar .chev{ font-family:var(--mono); font-weight:700; transition:.2s; }
.st-sec.collapsed > .st-bar .chev{ transform:rotate(-90deg); }
.st-sec.collapsed > .st-content{ display:none; }
.st-content{ padding:15px; }
.fld{ margin-bottom:13px; }
.fld:last-child{ margin-bottom:0; }
.fld label{ display:block; font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; color:#444; }
.fld input[type=text], .fld input[type=email], .fld textarea{ width:100%; font-family:var(--grotesk); font-size:14px; padding:10px 12px;
  border:var(--bd); background:var(--paper); color:var(--ink); resize:vertical; }
.fld input:focus, .fld textarea:focus{ outline:none; background:#fff; box-shadow:3px 3px 0 var(--lime); }
.row-flex{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.row-flex .fld{ flex:1; margin-bottom:0; min-width:120px; }

/* toggle switch */
.tgl{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase; cursor:pointer; }
.tgl input{ display:none; }
.tgl .track{ width:42px; height:24px; border:var(--bd); background:var(--paper); position:relative; flex:none; transition:background .18s; }
.tgl .track::after{ content:""; position:absolute; top:1.5px; left:1.5px; width:17px; height:17px; background:var(--ink); transition:transform .18s var(--ease); }
.tgl input:checked + .track{ background:var(--lime); }
.tgl input:checked + .track::after{ transform:translateX(18px); }

/* editable rows (crew / clients) */
.ed-item{ border:2.5px solid var(--ink); background:var(--paper); margin-bottom:12px; }
.ed-item .ed-top{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border-bottom:2.5px solid var(--ink); }
.ed-thumb{ width:46px; height:46px; border:2px solid var(--ink); flex:none; background:var(--ink); position:relative; overflow:hidden; cursor:pointer; }
.ed-thumb img{ width:100%; height:100%; object-fit:cover; }
.ed-thumb .pl{ position:absolute; inset:0; display:grid; place-items:center; font-size:16px; color:#fff; }
.ed-top .ed-name{ flex:1; font-family:var(--anton); text-transform:uppercase; font-size:18px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ed-top .mini{ width:32px; height:32px; border:2px solid var(--ink); background:var(--paper); font-size:14px; cursor:pointer; display:grid; place-items:center; }
.ed-top .mini.del:hover{ background:var(--pink); }
.ed-body{ padding:12px; display:none; }
.ed-item.open .ed-body{ display:block; }
.add-btn{ width:100%; border:2.5px dashed var(--ink); background:var(--paper); font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:13px; padding:13px; cursor:pointer; }
.add-btn:hover{ background:var(--lime); }
.st-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.st-actions button{ font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:12px; padding:13px; border:var(--bd); background:var(--white); box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
.st-actions button:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.st-actions .full{ grid-column:span 2; }
.st-actions .reset{ background:var(--ink); color:var(--pink); }
/* cursor picker */
.cur-pick{ display:flex; gap:8px; }
.cur-opt{ flex:1; font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:12px;
  padding:11px 8px; border:var(--bd); background:var(--paper); box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
.cur-opt:hover{ background:#fff; }
.cur-opt.on{ background:var(--lime); }
@media (pointer:fine){ .studio *{ cursor:none; } .studio input, .studio textarea{ cursor:text; } }
@media (max-width:520px){ .studio{ width:100vw; border-left:0; } .studio-btn{ font-size:12px; padding:10px 13px; left:12px; bottom:12px; } }

/* ---------- phone polish ---------- */
@media (max-width:560px){
  body{ font-size:16px; }
  .sec{ padding:64px 0; }
  .wrap{ padding:0 20px; }
  .nav{ padding:12px 18px; }
  .hero{ padding:34px 0 48px; }
  .hero-cta .btn{ flex:1; justify-content:center; }
  .bento{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:28px; }
  .switcher{ right:12px; bottom:12px; padding:6px 6px 6px 11px; }
  .foot-top{ gap:26px; }
  .foot-cols{ gap:34px; }
}
/* keep tap targets comfy + stop iOS auto-zoom on inputs */
@media (max-width:820px){
  .nav-right .btn{ padding:13px 16px; }
  .studio input, .studio textarea{ font-size:16px; }
}

/* ============================================================
   v2.2 — teammate fixes
   ============================================================ */
/* HERO: looser line-height so the black IMPOSSIBLE block never
   overlaps BRANDS when the line wraps; tighter block padding */
.hero h1{ line-height:1.1; }
.hero h1 .mark{ padding:0 .08em; }
/* IMPOSSIBLE: compact box that hugs the text + lives (wobble + glitch flash) */
.hero h1 .mark.ink{
  display:inline-block; vertical-align:baseline;
  background:var(--ink); color:var(--lime);
  line-height:.8; padding:.05em .14em .09em; margin:0 .06em; border-radius:3px;
  transform-origin:50% 60%; will-change:transform;
  animation:impAlive 3.6s ease-in-out infinite;
}
@keyframes impAlive{
  0%,100% { transform:rotate(-2deg); }
  50%     { transform:rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){ .hero h1 .mark.ink{ animation:none; } }

/* heading highlights clear the line above */
.sec-head h2{ line-height:1.12; }
.manifesto .big{ line-height:1.2; }

/* AI: a touch shorter + lime sec-num was invisible on cream (now ink) */
.ai{ padding:74px 0; }
.ai-grid{ gap:44px; }
.radar{ height:104px; width:104px; margin-top:18px; }

/* plain-language / sales callouts (so a layman gets it) */
.hero-plain{ display:inline-block; font-family:var(--mono); font-size:13.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.5; margin-top:20px; max-width:560px;
  background:var(--lime); color:var(--ink); padding:11px 15px; border:var(--bd); box-shadow:5px 5px 0 var(--ink); }
.hero-plain b{ background:var(--ink); color:var(--lime); padding:0 .14em; }
.sec-plain{ font-family:var(--mono); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; margin:-14px 0 32px; }
.receipts .sec-plain{ color:var(--lime); }
.mani-bottom{ font-family:var(--anton); text-transform:uppercase; font-weight:400; line-height:1.06;
  font-size:clamp(30px,4.6vw,60px); color:#fff; margin-top:44px; }
.mani-bottom .mark{ background:var(--lime); color:var(--ink); padding:.02em .08em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* CREW: more compact cards + section */
.crew-sec{ padding:78px 0; }
.crew-grid{ gap:16px; }
.mate .pic{ aspect-ratio:4/2.9; }
.mate .info{ padding:14px 16px 16px; }
.mate .info .ti{ font-size:23px; }
.mate .info .nm{ margin-top:6px; font-size:12px; }
.mate .info .rl{ font-size:13px; margin-top:9px; line-height:1.45; }
.mate.join .ji{ padding:26px; }
.mate.join .ji .h{ font-size:30px; }
@media (max-width:560px){ .hero-plain{ font-size:12.5px; } }