/* ============================================================
   TOY DINOSAUR — Swiss / Brutalist design system
   Paper #F4F2EB · Ink #141414 · Swiss vermilion #E5341E
   Anton (display) · Archivo (grotesk) · IBM Plex Mono (labels)
   No rounded corners. No glow. Hairline rules. Big type.
   ============================================================ */

:root{
  --paper:#F4F2EB;
  --paper-2:#ECEAE1;
  --ink:#141414;
  --ink-soft:#2a2a28;
  --muted:#6c685f;
  --red:#E5341E;
  --line:#141414;
  --font-display:'Anton', Impact, sans-serif;
  --font-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --maxw:1320px;
  --gut:clamp(20px,4vw,56px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--paper);}
a{color:inherit;text-decoration:none;}
img,svg,video{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.rule{border:none;border-top:1.5px solid var(--line);}

/* mono micro-label */
.kicker{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink);
}
.kicker .red{color:var(--red);}

/* ===================== TOP BAR ===================== */
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1.5px solid var(--line);
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand__dino{width:30px;height:auto;color:var(--ink);}
.brand__name{
  font-family:var(--font-sans);
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:-0.02em;
  text-transform:uppercase;
}
.brand:hover .brand__dino{color:var(--red);}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--red);transition:width .28s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::after{width:100%;}
.nav__cta{
  border:1.5px solid var(--ink);padding:8px 16px !important;
  transition:background .2s,color .2s;
}
.nav__cta:hover{background:var(--ink);color:var(--paper);}
.nav__cta::after{display:none;}
.burger{display:none;background:none;border:1.5px solid var(--ink);width:42px;height:38px;font-size:1rem;}

/* ===================== HERO ===================== */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(36px,5vw,72px);position:relative;}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding-bottom:clamp(24px,4vw,44px);
}
.hero h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3.2rem,12.5vw,11rem);
  line-height:0.86;
  letter-spacing:0.005em;
  text-transform:uppercase;
}
.hero h1 .red{color:var(--red);}
.hero h1 span{display:inline-block;}
.hero__lead{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);
  align-items:end;margin-top:clamp(28px,4vw,52px);
}
.hero__lead p{
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.45;max-width:30ch;
}
.hero__lead .sig{font-weight:700;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-self:start;}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.12em;
  text-transform:uppercase;font-weight:500;
  padding:15px 24px;border:1.5px solid var(--ink);
  transition:background .22s,color .22s,transform .22s;
}
.btn .ar{transition:transform .26s cubic-bezier(.16,1,.3,1);}
.btn:hover .ar{transform:translateX(5px);}
.btn--solid{background:var(--ink);color:var(--paper);}
.btn--solid:hover{background:var(--red);border-color:var(--red);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}

/* ===================== MARQUEE ===================== */
.marquee{
  border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
  background:var(--ink);color:var(--paper);overflow:hidden;
}
.marquee__track{
  display:flex;align-items:center;white-space:nowrap;
  will-change:transform;animation:march 34s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track span{
  font-family:var(--font-display);font-size:clamp(1.4rem,3.2vw,2.6rem);
  text-transform:uppercase;letter-spacing:0.02em;padding:14px 0;
}
.marquee__track .dot{color:var(--red);padding:0 28px;font-size:1em;}
@keyframes march{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===================== SECTION HEAD ===================== */
.sec{padding:clamp(54px,8vw,110px) 0;}
.sec__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-bottom:1.5px solid var(--line);padding-bottom:18px;margin-bottom:clamp(28px,4vw,48px);
}
.sec__head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,5.5vw,4.2rem);line-height:0.92;text-transform:uppercase;
}
.sec__head h2 .red{color:var(--red);}

/* ===================== WORK INDEX ===================== */
.idx{border-top:1.5px solid var(--line);}
.idx__row{
  display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:24px;
  padding:clamp(20px,2.6vw,34px) 8px;border-bottom:1.5px solid var(--line);
  transition:background .25s ease,color .25s ease,padding-left .25s ease;
}
.idx__no{font-family:var(--font-mono);font-size:0.9rem;letter-spacing:0.1em;color:var(--muted);}
.idx__name{
  font-family:var(--font-sans);font-weight:800;letter-spacing:-0.02em;
  font-size:clamp(1.5rem,4.4vw,3rem);line-height:1;
}
.idx__name small{display:block;font-family:var(--font-mono);font-weight:500;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:10px;}
.idx__go{font-family:var(--font-mono);font-size:1.3rem;}
.idx__go .ar{display:inline-block;transition:transform .28s cubic-bezier(.16,1,.3,1);}
.idx__row:hover{background:var(--ink);color:var(--paper);padding-left:22px;}
.idx__row:hover .idx__no{color:var(--red);}
.idx__row:hover .idx__name small{color:rgba(244,242,235,0.55);}
.idx__row:hover .idx__go .ar{transform:translateX(8px);color:var(--red);}

/* ===================== SERVICES LIST ===================== */
.svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--line);border-left:1.5px solid var(--line);}
.svc__cell{border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:clamp(22px,2.4vw,32px);min-height:190px;display:flex;flex-direction:column;transition:background .22s,color .22s;}
.svc__cell:hover{background:var(--paper-2);}
.svc__no{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.12em;color:var(--red);margin-bottom:auto;}
.svc__cell h3{font-family:var(--font-sans);font-weight:800;font-size:1.4rem;letter-spacing:-0.02em;margin:34px 0 8px;}
.svc__cell p{font-size:0.92rem;color:var(--muted);line-height:1.55;}

/* ===================== STATEMENT ===================== */
.statement{padding:clamp(60px,9vw,130px) 0;border-top:1.5px solid var(--line);}
.statement p{
  font-family:var(--font-sans);font-weight:600;
  font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.12;letter-spacing:-0.02em;max-width:20ch;
}
.statement p .red{color:var(--red);}
.statement p .out{color:var(--muted);}

/* ===================== FAQ ===================== */
.faq{border-top:1.5px solid var(--line);}
.faq details{border-bottom:1.5px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;
  padding:clamp(20px,2.4vw,30px) 8px;font-family:var(--font-sans);font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.5rem);letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{font-family:var(--font-mono);color:var(--red);font-size:1.4rem;transition:transform .25s;}
.faq details[open] summary .pm{transform:rotate(45deg);}
.faq__a{padding:0 8px clamp(22px,2.4vw,30px);max-width:70ch;color:var(--muted);font-size:1rem;line-height:1.6;}

/* ===================== BIG CTA ===================== */
.cta{background:var(--ink);color:var(--paper);padding:clamp(60px,10vw,150px) 0;}
.cta .kicker{color:var(--paper);}
.cta h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,11vw,9rem);line-height:0.88;text-transform:uppercase;margin:18px 0 0;}
.cta h2 .red{color:var(--red);}
.cta__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(30px,5vw,60px);}
.cta__mail{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-0.02em;border-bottom:2px solid var(--red);padding-bottom:4px;}
.cta__mail:hover{color:var(--red);}
.cta .btn{border-color:var(--paper);color:var(--paper);}
.cta .btn:hover{background:var(--red);border-color:var(--red);color:var(--paper);}

/* ===================== FOOTER ===================== */
.foot{background:var(--ink);color:var(--paper);border-top:1.5px solid #2c2c2a;}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:clamp(40px,5vw,72px) 0 36px;}
.foot__big{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,5.4rem);line-height:0.9;text-transform:uppercase;}
.foot__big .red{color:var(--red);}
.foot__col h4{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#9b978d;margin-bottom:16px;}
.foot__col a,.foot__col p{display:block;font-size:0.95rem;color:#d8d5cc;padding:5px 0;}
.foot__col a:hover{color:var(--red);}
.foot__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1.5px solid #2c2c2a;padding:18px 0 30px;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:#8c887e;}

/* ===================== REVEAL ===================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.07s;}.rv-d2{transition-delay:.14s;}.rv-d3{transition-delay:.21s;}.rv-d4{transition-delay:.28s;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;}.marquee__track{animation:none;}}

/* ===================== RESPONSIVE ===================== */
@media (max-width:880px){
  .svc{grid-template-columns:repeat(2,1fr);}
  .hero__lead{grid-template-columns:1fr;align-items:start;}
  .foot__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .nav{display:none;}
  .burger{display:flex;align-items:center;justify-content:center;}
  .nav.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1.5px solid var(--line);}
  .nav.open a{padding:16px var(--gut) !important;border-top:1.5px solid var(--line);width:100%;}
  .idx__row{grid-template-columns:54px 1fr auto;gap:14px;}
  .svc{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr;}
  .hero__meta{font-size:0.66rem;}
}