/* ============================================================
   ATATRI — One company, two worlds
   Theme A: Atatri (warm, light, origami)
   Theme B: Atatri Design (dark, cinematic, industrial)
============================================================ */

@font-face{
  font-family:'Space Age';
  src:url('assets/fonts/space-age.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --coral:#F94E45;
  --signal:#EC1C24;
  --slate:#3D4A5C;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-tech:"Audiowide",sans-serif;
  --font-script:"Satisfy",cursive;
  --ease:cubic-bezier(.65,.05,.2,1);
}

/* Brand tokens */
html[data-brand="atatri"]{
  --bg:#F7F6F3;
  --surface:#FFFFFF;
  --ink:#333F50;
  --muted:#6B7686;
  --accent:#F94E45;
  --accent-ink:#ffffff;
  --line:#E6E4DF;
  --tint:#F1EEE8;
}
html[data-brand="design"]{
  --bg:#0A0A0B;
  --surface:#141416;
  --ink:#F2F3F5;
  --muted:#9BA1AB;
  --accent:#EC1C24;
  --accent-ink:#ffffff;
  --line:#232327;
  --tint:#101012;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  transition:background .5s var(--ease),color .5s var(--ease);
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{max-width:1240px;margin:0 auto;padding:0 24px}

h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h3{font-size:1.15rem;font-weight:700}
.lead{font-size:1.12rem;color:var(--muted);max-width:56ch}

.eyebrow{
  text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;font-weight:700;
  color:var(--accent);margin-bottom:14px;
}
.eyebrow--light{color:#fff;opacity:.85}
.d-eyebrow{
  font-family:var(--font-tech);font-size:.8rem;letter-spacing:.35em;color:var(--accent);
  text-transform:uppercase;margin-bottom:16px;
}
.script-eyebrow{
  font-family:var(--font-script);font-size:1.6rem;color:var(--accent);margin-bottom:10px;
}

/* ============ Reveal on scroll ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal--d1{transition-delay:.12s}
.reveal--d2{transition-delay:.24s}
.reveal--d3{transition-delay:.36s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Slightly richer reveal motion, World A (Atatri) only — Design world untouched */
.world--atatri .reveal{
  transform:translateY(28px) scale(.98);filter:blur(4px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
}
.world--atatri .reveal.in{transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.world--atatri .reveal{filter:none;transform:none;transition:none}}

/* ============ Header ============ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.header__inner{
  max-width:1360px;margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;gap:28px;
}
.header__logo{display:flex;align-items:center;gap:10px;min-width:0;position:relative;padding:12px 8px;margin:-12px -8px}
.header__logo-bird{height:34px;width:auto}
.header__logo-text{
  font-weight:800;letter-spacing:.3em;font-size:1rem;color:var(--slate);
}
.header__logo-word{height:14px;width:auto;display:none}
html[data-brand="design"] .header__logo-bird{display:none}
html[data-brand="design"] .header__logo-text{display:none}
html[data-brand="design"] .header__logo-word{display:block}

/* The Toggle */
.toggle{
  position:relative;display:flex;align-items:stretch;
  border:1px solid var(--line);border-radius:999px;padding:4px;
  background:var(--surface);
  margin-left:auto;
  transition:background .5s var(--ease),border-color .5s var(--ease);
  flex-shrink:0;
}
.toggle__pill{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--accent);border-radius:999px;
  transition:transform .45s var(--ease),background .5s var(--ease);
}
html[data-brand="design"] .toggle__pill{transform:translateX(100%)}
.toggle__btn{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5px 18px;border-radius:999px;min-width:120px;
  transition:color .35s var(--ease);
}
.toggle__name{font-size:.72rem;font-weight:800;letter-spacing:.14em}
.toggle__sub{font-size:.6rem;letter-spacing:.08em;opacity:.75}
.toggle__btn.is-active{color:#fff}
.toggle__btn:not(.is-active){color:var(--muted)}
.toggle__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Nav */
.nav{display:flex;align-items:center;gap:22px;font-size:.9rem;font-weight:600}
.nav a{color:var(--muted);transition:color .25s}
.nav a:hover{color:var(--ink)}
.nav__cta{
  color:var(--accent-ink)!important;background:var(--accent);
  padding:9px 18px;border-radius:999px;transition:filter .25s,background .5s var(--ease);
}
.nav__cta:hover{filter:brightness(1.08)}
.nav--atatri{display:flex}
.nav--design{display:none}
html[data-brand="design"] .nav--atatri{display:none}
html[data-brand="design"] .nav--design{display:flex}

/* Burger / mobile nav */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;margin-left:4px;min-width:44px;min-height:44px}
.burger span{width:22px;height:2px;background:var(--ink);transition:.3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobilenav{display:none;border-top:1px solid var(--line);background:var(--bg);padding:10px 24px 18px}
.mobilenav__group{display:none;flex-direction:column}
.mobilenav__group a{padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
html[data-brand="atatri"] .mobilenav--atatri{display:flex}
html[data-brand="design"] .mobilenav--design{display:flex}
.mobilenav.open{display:block}

@media(max-width:1080px){
  .nav{display:none!important}
  .burger{display:flex}
  .toggle{margin-left:auto}
}
@media(max-width:560px){
  .toggle__btn{min-width:0;padding:13px 12px}
  .toggle__sub{display:none}
  .header__inner{gap:12px}
  /* The bird icon alone would fit, but the Atatri Design wordmark
     image is too wide to sit alongside the toggle + burger at this
     width without forcing the header to overflow (flex items with
     fixed-ratio images refuse to shrink below their intrinsic size).
     Hide the whole logo slot below this breakpoint for both brands
     so it never fights the toggle/burger for space. */
  .header__logo{display:none}
}
@media(max-width:400px){
  .toggle__btn{padding:13px 9px}
  .toggle__name{font-size:.66rem;letter-spacing:.1em}
}

/* ============ Buttons ============ */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btnrow--center{justify-content:center}
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  transition:transform .25s var(--ease),filter .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:#fff;box-shadow:0 10px 30px -12px var(--accent)}
.btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:var(--surface);transition:border-color .25s,transform .25s var(--ease)}
.btn--ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.btn--red{background:var(--signal);color:#fff;box-shadow:0 10px 34px -10px rgba(236,28,36,.55)}
.btn--dghost{border:1.5px solid #2c2c31;color:var(--ink);transition:border-color .25s,color .25s,transform .25s var(--ease)}
.btn--dghost:hover{border-color:color-mix(in srgb,var(--signal) 50%,#2c2c31);color:#fff}
.btn--big{font-size:1.05rem;padding:16px 34px}
.btn--wipe{background:#fff;color:#111;padding:16px 32px;border-radius:999px;font-weight:800}

/* ============================================================
   WORLD A — ATATRI
============================================================ */
.a-hero{padding:150px 0 40px;position:relative;overflow:hidden}
.a-hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.a-hero h1{font-size:clamp(2.6rem,6vw,5.5rem);letter-spacing:-.03em}
.a-hero h1 em{font-style:normal;color:var(--accent)}

/* Mesh glow + watermark + facets */
.a-hero__mesh{
  position:absolute;inset:-15% -10% auto -10%;height:135%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%),
    radial-gradient(ellipse 45% 40% at 88% 8%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 60%),
    radial-gradient(ellipse 60% 50% at 55% 105%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%);
}
.a-hero__watermark{
  position:absolute;top:-8%;right:-8%;width:min(46vw,560px);opacity:.07;z-index:0;
  pointer-events:none;animation:heroFloat 13s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(2deg)}}
.a-hero__facet{position:absolute;z-index:0;pointer-events:none;opacity:.55}
.a-hero__facet--1{
  width:220px;height:220px;left:-50px;bottom:6%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 32%,transparent),transparent);
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
}
.a-hero__facet--2{
  width:150px;height:150px;right:8%;top:16%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent);
  clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);
}
@media(prefers-reduced-motion:reduce){.a-hero__watermark{animation:none}}
@media(max-width:620px){.a-hero__watermark{width:70vw;opacity:.05}.a-hero__facet{display:none}}
.a-hero__media{
  border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 30px 80px -30px rgba(61,74,92,.35);
  border:1px solid var(--line);
}
.a-hero__media video{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.a-hero__grid{grid-template-columns:1fr}}

/* Stats */
.stats{
  position:relative;z-index:1;
  margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);padding-top:34px;gap:18px;
}
.stat{position:relative}
.stat:not(:first-child){border-left:1px solid var(--line);padding-left:22px}
.stat__num{font-size:clamp(2.6rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.03em}
.stat__plus{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;color:var(--accent)}
.stat__label{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
@media(max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:not(:first-child){border-left:none;padding-left:0}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr;gap:20px}
  .stat:not(:first-child){border-top:1px solid var(--line);padding-top:20px}
}

/* Signature strip */
.signature-strip{background:var(--accent);padding:16px 0;overflow:hidden;position:relative;z-index:1}
.signature-strip__track{
  display:flex;gap:34px;align-items:center;width:max-content;
  animation:marquee 26s linear infinite;
  font-family:var(--font-tech);font-size:1rem;letter-spacing:.2em;
  color:rgba(255,255,255,.92);text-transform:uppercase;white-space:nowrap;
}
@supports ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
  .signature-strip__track{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.92);text-stroke:1px rgba(255,255,255,.92)}
}
.signature-strip__track i{color:#fff;font-style:normal;font-size:.7rem;opacity:.85;-webkit-text-stroke:0}
.signature-strip:hover .signature-strip__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.signature-strip__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:480px){.signature-strip__track{font-size:.78rem;letter-spacing:.13em;gap:24px}}

/* Clients marquee */
.clients{padding:56px 0 30px;border-bottom:1px solid var(--line)}
.clients__title{text-align:center;color:var(--muted);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:28px}
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:64px;width:max-content;animation:marquee 42s linear infinite}
.marquee__track img{
  height:44px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s;
  background:#fff;border-radius:6px;padding:4px 8px;
}
.marquee__track img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* Sections */
.section{padding:110px 0;position:relative;overflow-x:hidden;overflow-x:clip}
.section--tint{background:var(--tint);transition:background .5s var(--ease)}
.section__head{position:relative;z-index:1;max-width:640px;margin-bottom:56px}
.section__sub{color:var(--muted);margin-top:12px}

/* Ghost background words (World A only) */
.ghost-word{
  position:absolute;left:-4px;top:-.5em;z-index:-1;
  font-family:var(--font-tech);font-weight:400;
  font-size:clamp(3.2rem,9vw,7.5rem);line-height:1;
  color:var(--tint);
  letter-spacing:.02em;white-space:nowrap;user-select:none;pointer-events:none;
}
@supports ((-webkit-text-stroke:1px var(--line)) or (text-stroke:1px var(--line))){
  .ghost-word{color:transparent;-webkit-text-stroke:1px var(--line);text-stroke:1px var(--line)}
}
.section--tint .ghost-word{color:var(--surface)}
@supports ((-webkit-text-stroke:1px var(--line)) or (text-stroke:1px var(--line))){
  .section--tint .ghost-word{color:transparent}
}
@media(max-width:620px){.ghost-word{font-size:2.4rem}}

/* Service cards */
.cards{counter-reset:card;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  counter-increment:card;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:34px 28px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card::before{
  content:counter(card,decimal-leading-zero);
  position:absolute;right:14px;top:2px;z-index:0;line-height:1;
  font-family:var(--font-tech);font-weight:400;font-size:3.6rem;color:var(--tint);
  transition:color .4s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%);
  transition:opacity .4s var(--ease);
}
.card>*{position:relative;z-index:1}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 70px -30px rgba(61,74,92,.45);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.card:hover::before{color:color-mix(in srgb,var(--accent) 24%,var(--tint))}
.card:hover::after{opacity:1}
.card__icon{
  width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,transparent);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.card:hover .card__icon{background:var(--accent);transform:rotate(-6deg) translateY(-2px)}
.card__icon svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
.card:hover .card__icon svg{stroke:#fff}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;counter-reset:step;position:relative}
.steps::before{
  content:"";position:absolute;top:38px;left:6%;right:6%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent);
  opacity:.3;
}
.step{
  counter-increment:step;position:relative;overflow:hidden;z-index:1;
  padding:28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.step:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.step::after{
  content:counter(step,decimal-leading-zero);position:absolute;right:-8px;bottom:-26px;z-index:0;
  font-family:var(--font-tech);font-weight:400;font-size:5.2rem;line-height:1;color:var(--tint);pointer-events:none;
}
.step__num{
  position:relative;z-index:1;
  font-size:.78rem;font-weight:800;color:var(--accent);letter-spacing:.1em;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  margin-bottom:16px;
}
.step h3{position:relative;z-index:1;margin-bottom:8px}
.step p{position:relative;z-index:1;color:var(--muted);font-size:.92rem}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}

/* Work grid */
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:work}
.work{
  counter-increment:work;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.work:first-child{grid-column:span 2;grid-row:span 2}
.work:hover{transform:translateY(-6px);box-shadow:0 26px 62px -28px rgba(61,74,92,.42)}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff;transition:transform .6s var(--ease)}
.work:first-child img{aspect-ratio:16/11}
.work:hover img{transform:scale(1.05)}
.work figcaption{position:relative;padding:16px 20px 16px 52px;display:flex;flex-direction:column;gap:2px}
.work figcaption::before{
  content:counter(work,decimal-leading-zero);
  position:absolute;left:18px;top:17px;
  font-family:var(--font-tech);font-weight:400;color:var(--accent);font-size:.8rem;
}
.work figcaption strong{font-size:.98rem}
.work figcaption span{color:var(--muted);font-size:.82rem}
@media(max-width:960px){
  .workgrid{grid-template-columns:repeat(2,1fr)}
  .work:first-child{grid-row:auto}
}
@media(max-width:620px){
  .workgrid{grid-template-columns:1fr}
  .work:first-child{grid-column:auto}
}

/* Capabilities */
.capbanners{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.capbanners{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.capbanner{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);
  box-shadow:0 24px 60px -34px rgba(61,74,92,.4);cursor:zoom-in;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.capbanner:hover{transform:translateY(-4px);box-shadow:0 30px 70px -32px rgba(61,74,92,.5)}
.capbanner img{width:100%;display:block;transition:transform .6s var(--ease)}
.capbanner:hover img{transform:scale(1.03)}

/* Contact helpers */
.contact__direct{margin-top:26px;color:var(--muted);font-size:.98rem;line-height:1.9}
.contact__direct a{color:var(--accent);font-weight:700}
.contact__direct a:hover{text-decoration:underline}
.contact__phone{font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:.02em}

/* Crossband */
.crossband{background:linear-gradient(120deg,#E5382F, #B01218);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.crossband h2{color:#fff}
.crossband h2 em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.crossband__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
html[data-brand="design"] .crossband{background:linear-gradient(120deg,#151517,#26262b)}
.crossband--todesign::before,.crossband--todesign::after{
  content:"";position:absolute;z-index:0;pointer-events:none;opacity:.16;
  background:linear-gradient(135deg,rgba(255,255,255,.55),transparent);
}
.crossband--todesign::before{
  width:220px;height:220px;left:-60px;top:-70px;
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
}
.crossband--todesign::after{
  width:170px;height:170px;right:4%;bottom:-60px;
  clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);
}

/* Contact */
.contact{position:relative;overflow-x:clip}
.world--atatri .contact::before{
  content:"";position:absolute;right:-12%;bottom:-20%;width:52%;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
}
.contact__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.contact__card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:44px 36px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;
}
.contact__hint{color:var(--muted);font-size:.88rem}
@media(max-width:860px){.contact__grid{grid-template-columns:1fr}}

/* ============================================================
   WORLD B — ATATRI DESIGN
============================================================ */
.world--design{background:var(--bg)}

.d-hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center;padding:140px 0 80px;overflow:hidden;
}
.d-hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%,rgba(236,28,36,.16),transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 110%,rgba(236,28,36,.08),transparent 60%);
  pointer-events:none;
}
.d-hero__inner{min-width:0}
.d-hero__wordmark{
  font-family:'Space Age',var(--font-tech);font-weight:400;
  color:var(--signal);
  font-size:clamp(2.6rem,8.5vw,6rem);
  letter-spacing:.04em;line-height:1;text-transform:none;
  margin:0 auto 40px;white-space:nowrap;
  text-shadow:0 0 44px rgba(236,28,36,.35);
}
@media(max-width:600px){
  .d-hero__wordmark{
    white-space:normal;
    font-size:clamp(2.4rem,13vw,3.4rem);
    line-height:1.14;
    letter-spacing:.02em;
    margin:0 auto 26px;
    max-width:90vw;
  }
}
.d-hero__line{font-size:clamp(2rem,4.6vw,3.6rem);color:#fff}
.d-hero__line span{color:var(--signal)}
.d-hero__sub{color:var(--muted);max-width:58ch;margin:22px auto 0;font-size:1.08rem}
.d-hero__scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  width:24px;height:40px;border:1.5px solid #3a3a40;border-radius:12px;
  box-shadow:0 0 24px -6px rgba(236,28,36,.35);
}
.d-hero__scroll span{
  position:absolute;top:7px;left:50%;width:3px;height:8px;margin-left:-1.5px;
  background:var(--signal);border-radius:2px;animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Text marquee */
.textmarquee{border-block:1px solid var(--line);padding:18px 0;overflow:hidden}
.textmarquee__track{
  display:flex;gap:38px;align-items:center;width:max-content;
  animation:marquee 30s linear infinite;
  font-family:var(--font-tech);font-size:.85rem;letter-spacing:.3em;color:#5b5b63;
}
.textmarquee__track i{color:var(--signal);font-style:normal;font-size:.5rem}
@media(max-width:480px){.textmarquee__track{font-size:.7rem;letter-spacing:.2em;gap:26px}}

/* Product sections */
.product{padding:120px 0}
.product--alt{background:var(--tint)}
.product__head{text-align:center;max-width:720px;margin:0 auto 54px}
.product__name{
  font-family:var(--font-tech);font-weight:400;letter-spacing:.12em;
  font-size:clamp(2.4rem,6vw,4.6rem);color:#fff;
}
.product__name--sm{font-size:clamp(2rem,4.4vw,3.2rem)}
.product__tag{color:var(--muted);font-size:1.12rem;margin-top:10px}

.product__stage{position:relative;border-radius:24px;overflow:hidden;background:#000;border:1px solid var(--line)}
#hydrozen .product__stage::before{
  content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(236,28,36,.22),transparent 70%);
}
.product__stage img{position:relative;z-index:1;width:100%;object-fit:cover;transition:opacity .4s var(--ease)}
.product__stage img.swapping{opacity:0}

.edition{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;background:rgba(10,10,12,.72);backdrop-filter:blur(10px);
  border:1px solid #2c2c31;border-radius:999px;padding:6px;
}
.edition__btn{
  display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#9BA1AB;transition:.3s;
}
.edition__btn.is-active{background:#fff;color:#111}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid #555}
.dot--black{background:#111}
.dot--white{background:#f5f5f5}
@media(max-width:640px){
  .product__stage{display:flex;flex-direction:column;align-items:center;overflow:visible;background:none;border:none;border-radius:0}
  .product__stage img{width:100%;border-radius:24px;border:1px solid var(--line);background:#000}
  .edition{position:static;transform:none;margin:14px 0 0;background:var(--surface);backdrop-filter:none}
}

.product__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:56px 0}
.pcol h3{color:#fff;margin-bottom:8px;font-family:var(--font-tech);font-weight:400;letter-spacing:.06em;font-size:1rem}
.pcol p{color:var(--muted);font-size:.95rem}
@media(max-width:860px){.product__cols{grid-template-columns:1fr}}

.product__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0f0f11}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{padding:14px 18px;color:var(--muted);font-size:.85rem}
.shot--tall img{aspect-ratio:1/1}
@media(max-width:860px){.product__gallery{grid-template-columns:1fr}}

.xyzen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
@media(max-width:860px){.xyzen__grid{grid-template-columns:1fr}}

/* PORTY */
.porty{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.porty__img{border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.porty__img img{transition:transform .6s var(--ease)}
.porty__img:hover img{transform:scale(1.04)}
.porty__text{color:var(--muted);margin-top:18px}
@media(max-width:860px){.porty{grid-template-columns:1fr}}

/* Studio */
.studio{padding:120px 0;background:var(--tint)}
.studio__title{color:#fff}
.studio__sub{color:var(--muted);margin-top:16px;max-width:60ch}
.studio__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
.scard{
  border:1px solid var(--line);border-radius:18px;padding:34px 30px;background:var(--surface);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s var(--ease);
}
.scard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--signal) 45%,var(--line));box-shadow:0 24px 60px -30px rgba(236,28,36,.4)}
.scard__num{font-family:var(--font-tech);color:var(--signal);font-size:.85rem;letter-spacing:.2em;display:block;margin-bottom:16px}
.scard h3{color:#fff;margin-bottom:8px}
.scard p{color:var(--muted);font-size:.95rem}
@media(max-width:720px){.studio__grid{grid-template-columns:1fr}}

/* Philosophy */
.philosophy{padding:130px 0;text-align:center;position:relative}
.philosophy blockquote{
  position:relative;
  font-size:clamp(1.4rem,3vw,2.2rem);font-weight:300;line-height:1.45;color:#E7E9EC;
  max-width:22ch;margin:0 auto;letter-spacing:-.01em;
}
.philosophy blockquote::before{
  content:"\201C";position:absolute;left:50%;top:-.55em;transform:translateX(-50%);
  font-family:Georgia,serif;font-size:6em;line-height:1;color:var(--signal);opacity:.16;
  pointer-events:none;z-index:0;
}
.philosophy__sig{margin-top:26px;color:var(--signal);font-family:var(--font-tech);font-size:.8rem;letter-spacing:.3em}

.contact--dark .contact__card{background:var(--surface)}

/* ============================================================
   CAREERS
============================================================ */
.careers{padding:104px 0;background:var(--bg);border-top:1px solid var(--line);transition:background .5s var(--ease)}
.careers__inner{display:grid;grid-template-columns:1.5fr .9fr;gap:56px;align-items:center}
.careers__tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.careers__tags li{
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.85rem;font-weight:600;color:var(--muted);background:var(--surface);
}
.careers__action{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.careers__note{color:var(--muted);font-size:.85rem;max-width:34ch;line-height:1.6}
.careers__note a{color:var(--accent);font-weight:600}
.careers__note a:hover{text-decoration:underline}
@media(max-width:860px){.careers__inner{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   FOOTER
============================================================ */
.footer{border-top:1px solid var(--line);padding:74px 0 30px;background:var(--tint);transition:background .5s var(--ease)}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px}
.footer__bird{height:42px;width:auto;margin-bottom:18px}
.footer__desc{color:var(--muted);font-size:.92rem;line-height:1.7;max-width:38ch}
.footer__desc strong{color:var(--ink)}
.footer__tag{font-family:var(--font-script);font-size:1.35rem;color:var(--accent);margin-top:16px}
.footer__col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer__col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:6px}
.footer__col a,.footer__col button{color:var(--muted);font-size:.92rem;text-align:left;padding:0;transition:color .25s}
.footer__col a:hover,.footer__col button:hover{color:var(--ink)}
.footer__contact a{font-weight:600}
.footer__addr{font-style:normal;color:var(--muted);font-size:.88rem;line-height:1.7;margin-top:6px}
.footer__base{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:56px;padding-top:24px;color:var(--muted);font-size:.85rem;
}
.footer__made{letter-spacing:.02em}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ============================================================
   BRAND WIPE
============================================================ */
.brandwipe{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}
.brandwipe__panel{
  position:absolute;inset:0;background:linear-gradient(115deg,#F94E45,#B01218);
  transform:translateX(-102%);
}
.brandwipe__bird,.brandwipe__word{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);
  opacity:0;
}
.brandwipe__bird{width:110px;filter:brightness(0) invert(1)}
.brandwipe__word{width:min(420px,70vw);filter:brightness(0) invert(1)}
.brandwipe.run{visibility:visible}
.brandwipe.run .brandwipe__panel{animation:wipe 1s var(--ease) forwards}
@keyframes wipe{
  0%{transform:translateX(-102%)}
  38%{transform:translateX(0)}
  62%{transform:translateX(0)}
  100%{transform:translateX(102%)}
}
.brandwipe.run.to-design .brandwipe__word{animation:stamp 1s var(--ease) forwards}
.brandwipe.run.to-atatri .brandwipe__bird{animation:stamp 1s var(--ease) forwards}
@keyframes stamp{
  0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  45%,58%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  72%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){
  .brandwipe{display:none}
}

/* ============================================================
   SPLASH INTRO
============================================================ */
.splash{
  position:fixed;inset:0;z-index:200;background:#FBFAF8;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.splash video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.splash.done{opacity:0;visibility:hidden;pointer-events:none}
body.splashing{overflow:hidden}
@media(prefers-reduced-motion:reduce){.splash{display:none}}

/* ============================================================
   TOGGLE HINT (first visit)
============================================================ */
.hint{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);
  font-size:.78rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding:10px 16px;border-radius:10px;
  animation:hintpop .45s var(--ease) both,hintbob 2.2s ease-in-out .5s infinite;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.4);
  z-index:5;
}
.hint__arrow{
  position:absolute;top:-5px;left:50%;margin-left:-5px;
  width:10px;height:10px;background:var(--ink);transform:rotate(45deg);
}
@keyframes hintpop{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}
@media(max-width:560px){
  .hint{
    left:auto;right:0;transform:none;
    white-space:normal;max-width:min(72vw,240px);text-align:center;
    animation:hintpopSm .45s var(--ease) both,hintbobSm 2.2s ease-in-out .5s infinite;
  }
  .hint__arrow{left:auto;right:22px;margin-left:0}
}
@keyframes hintpopSm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes hintbobSm{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============================================================
   HERO COLLAGE (world A)
============================================================ */
.a-hero__media{position:relative;border:none;box-shadow:none;background:none;overflow:visible}
.a-hero__main{
  width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:22px;
  border:1px solid var(--line);background:#fff;
  box-shadow:0 30px 80px -30px rgba(61,74,92,.35);
}
.a-hero__float{
  position:absolute;width:38%;aspect-ratio:1;object-fit:cover;background:#fff;
  border-radius:16px;border:1px solid var(--line);
  box-shadow:0 24px 60px -24px rgba(61,74,92,.45);
}
.a-hero__float--1{right:-6%;top:-8%;animation:floaty 5.5s ease-in-out infinite}
.a-hero__float--2{left:-8%;bottom:-9%;animation:floaty 6.5s ease-in-out .8s infinite}
.a-hero__badge{
  position:absolute;right:6%;bottom:-16px;
  background:var(--accent);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.06em;
  padding:10px 18px;border-radius:999px;box-shadow:0 14px 34px -12px var(--accent);
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.a-hero__float{animation:none}}
@media(max-width:900px){
  .a-hero__float--1{right:2%}
  .a-hero__float--2{left:2%}
}
@media(max-width:620px){
  .a-hero__float{width:30%;box-shadow:0 16px 40px -18px rgba(61,74,92,.45)}
  .a-hero__float--1{right:0;top:-5%}
  .a-hero__float--2{left:0;bottom:-5%}
  .a-hero__badge{
    position:static;display:block;width:max-content;max-width:100%;
    margin:22px 0 0 auto;transform:none;
    right:auto;bottom:auto;
  }
}

/* ============================================================
   ABOUT / ORIGAMI STORY
============================================================ */
.about{position:relative}
.about::before{
  content:"";position:absolute;left:-10%;top:8%;width:48%;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);
}
.about__grid{position:relative;z-index:1;display:grid;grid-template-columns:.6fr 1.4fr;gap:64px;align-items:center}
.about__bird{width:min(260px,60vw);justify-self:center;animation:floaty 7s ease-in-out infinite}
.about__proof{margin-top:20px;color:var(--muted);max-width:56ch;font-size:1.02rem}
.about__script{font-family:var(--font-script);font-style:normal;font-size:1.3em;color:var(--accent);white-space:nowrap}
@media(max-width:520px){.about__script{white-space:normal}}
@media(max-width:860px){.about__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.about__bird{animation:none}}

/* ============================================================
   CONTACT FORM
============================================================ */
.contact__card{text-align:left;align-items:stretch}
.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:700;color:var(--muted)}
.field input,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;transition:border-color .25s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.contact__card .btn{align-self:stretch;text-align:center}

/* ============================================================
   LIGHTBOX
============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(8,8,10,.92);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  padding:5vh 4vw;cursor:zoom-out;backdrop-filter:blur(6px);
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:12px}
.lightbox figcaption{color:#c9ced6;font-size:.95rem;text-align:center}
.lightbox__close{
  position:absolute;top:22px;right:28px;color:#fff;font-size:1.6rem;line-height:1;
  width:46px;height:46px;border-radius:50%;border:1px solid #3a3a41;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.lightbox__close:hover{background:#232328}
.work,.shot,.porty__img,.product__stage{cursor:zoom-in}

/* ============================================================
   HEADER SCROLL STATE + MARQUEE HOVER
============================================================ */
.header.scrolled .header__inner{height:60px}
.header.scrolled{box-shadow:0 10px 40px -18px rgba(0,0,0,.22)}
.header__inner{transition:height .35s var(--ease)}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ============================================================
   MOBILE OPTIMIZATION
   Desktop uses generous 110-130px section rhythm. On a phone that
   reads as large empty gaps, so the vertical scale is tightened and
   tap targets / CTAs are sized for thumbs.
============================================================ */
@media(max-width:720px){
  /* --- Vertical rhythm --- */
  .section{padding:66px 0}
  .a-hero{padding:104px 0 24px}
  .section__head{margin-bottom:32px}
  .clients{padding:38px 0 24px}
  .clients__title{margin-bottom:20px}
  .crossband{padding:58px 0}
  .product{padding:66px 0}
  .product__head{margin-bottom:32px}
  .product__cols{margin:32px 0}
  .studio{padding:66px 0}
  .philosophy{padding:74px 0}
  .careers{padding:66px 0}
  .footer{padding:52px 0 26px}
  .footer__base{margin-top:34px}
  .footer__grid{gap:32px}

  /* --- Hero: compact collage, smaller badge --- */
  .a-hero__grid{gap:34px}
  .a-hero__badge{font-size:.7rem;padding:8px 14px;right:4%;bottom:-12px}
  .a-hero__float{width:33%}

  /* --- Stats: one compact row instead of a tall stack --- */
  .stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px;padding-top:26px}
  .stat{padding:0}
  .stat__num{font-size:1.85rem}
  .stat__plus{font-size:1.1rem}
  .stat__label{font-size:.68rem;line-height:1.35;margin-top:4px}

  /* --- Product stage controls: real tap targets --- */
  .edition__btn{min-height:44px;padding:11px 16px}

  /* --- Comfortable tap targets for stacked link lists --- */
  .mobilenav__group a{padding:15px 0}
  .footer__col a,.footer__col button{padding:7px 0}
}

@media(max-width:520px){
  /* --- Full-width CTAs are easier to hit than side-by-side pills --- */
  .btnrow{gap:10px}
  .btnrow .btn{width:100%;text-align:center}
  .contact__card .btn,#contactForm button{width:100%}
  .careers__action{align-items:stretch}
  .careers__action .btn{width:100%;text-align:center}
  .btn--big{font-size:1rem;padding:15px 24px}

  /* --- Trim remaining desktop-scale spacing --- */
  .section{padding:56px 0}
  .product{padding:56px 0}
  .philosophy{padding:62px 0}
  .philosophy blockquote{font-size:1.35rem}
  .container{padding:0 20px}
}

/* The dark hero locked to 100vh overshoots on phones because mobile
   browser chrome is counted in vh; svh tracks the visible area. */
@supports(height:100svh){
  @media(max-width:720px){
    .d-hero{min-height:100svh;padding:120px 0 64px}
  }
}

@media(max-width:520px){
  /* Card padding sized for desktop wastes usable width on a phone */
  .contact__card{padding:26px 20px;gap:14px}
  .card{padding:26px 22px}
  .step{padding:24px 20px}
  .scard{padding:26px 22px}
  .cap h3{margin:18px 20px 8px}
  .cap p{margin:0 20px 22px}
}

@media(max-width:720px){
  /* The stacked-stats rule below 480px added a top border + padding to
     stats 2-3. Now that they sit in one row again, that padding pushed
     them 21px lower than the first stat. Reset it so the row aligns. */
  .stat:not(:first-child){border-top:none;border-left:none;padding-top:0;padding-left:0}
}

/* The sliding pill is 50% wide, which only lines up when both toggle
   halves are equal. On phones the labels differ in length ("ATATRI" vs
   "ATATRI DESIGN"), so the pill bled 24px over the second label.
   Equal flex halves put the pill back in register. */
@media(max-width:560px){
  .toggle{width:232px;max-width:calc(100% - 56px)}
  .toggle__btn{flex:1 1 0;min-width:0;padding:12px 6px}
  .toggle__name{font-size:.62rem;letter-spacing:.05em;white-space:nowrap}
}
@media(max-width:400px){
  .toggle{width:208px}
  .toggle__btn{padding:12px 4px}
  .toggle__name{font-size:.55rem;letter-spacing:.02em}
}

/* ============================================================
   SPLASH — tablet & mobile framing
   The clip is 16:9. object-fit:cover on a portrait screen scales it
   up and crops ~74% of the frame width, so the wordmark and the
   "make your imagination" tagline never appear. Below a 4:3 viewport
   the video is contained instead (full frame, always readable) and a
   blurred still of the clip fills the remaining space, so the studio
   backdrop continues past the video edges with no visible letterbox.
============================================================ */
.splash{overflow:hidden;background:#EFEAE3}
.splash__backdrop{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Sampled from the clip's own top and bottom edge rows so the studio
     backdrop continues past the video with no visible letterbox seam. */
  background:linear-gradient(to bottom,#a7a094 0%,#aca59a 34%,#b2aaa0 66%,#b7aea5 100%);
}
.splash video{z-index:1}

@media(max-aspect-ratio:4/3){
  /* Size the element to the frame itself (not the whole viewport) so the
     soft edge fade lands on the video's real top/bottom edges, dissolving
     the letterbox seam instead of drawing a hard line across it. */
  .splash video{
    position:relative;inset:auto;
    width:100%;height:auto;max-height:100%;
    object-fit:contain;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
}