/* ================= TOKENS ================= */
:root{
  --bone:#EFECE3;
  --ink:#0F0F12;
  /* brand gold, sampled from the logo. --cobalt is the accent token used site-wide:
     deep gold on light backgrounds (readable), bright gold on dark ones. */
  --gold:#E8B93B;
  --gold-deep:#7C5C0F;
  --cobalt:var(--gold-deep);
  --slate:#77756D;
  --line:rgba(15,15,18,.16);
  --bg:var(--bone); --fg:var(--ink); --mut:var(--slate); --ln:var(--line);
  --f-disp:'Clash Display',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(1.25rem,4vw,4rem);
  --ease:cubic-bezier(.76,0,.24,1);
}
.dark{ --bg:var(--ink); --fg:var(--bone); --mut:#8B897F; --ln:rgba(239,236,227,.18); --cobalt:var(--gold); }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{height:auto;}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
::selection{background:var(--gold);color:var(--ink);}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;}
section{position:relative;background:transparent;color:var(--fg);z-index:2;}
section.dark,.mq.dark{background:var(--ink);}
.wrap{padding-left:var(--pad);padding-right:var(--pad);}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;}
.label{display:flex;justify-content:space-between;gap:1rem;color:var(--mut);border-top:1px solid var(--ln);padding-top:1rem;margin-bottom:clamp(2.5rem,6vw,5rem);}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bone);padding:.8rem 1.2rem;}
.skip:focus{left:0;}

/* ================= GRAIN + GHOST X ================= */
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.6"/></svg>');
  animation:grain 8s steps(10) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
/* 3D X canvas — lives BEHIND all content; dark sections cover it */
#xcv{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.34;}
.pbar{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--gold);z-index:95;transform-origin:left;transform:scaleX(0);}
.proj{perspective:1200px;}
.stats{perspective:1000px;}
.cta-head{perspective:1200px;}
.tclip{overflow:hidden;display:inline-block;}
.tin{display:inline-block;will-change:transform;}

/* ================= CURSOR ================= */
.cur,.cur-f{position:fixed;top:0;left:0;z-index:80;pointer-events:none;border-radius:50%;mix-blend-mode:difference;}
.cur{width:8px;height:8px;background:#fff;transform:translate(-50%,-50%);}
.cur-f{width:38px;height:38px;border:1px solid #fff;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s;}
.cur-f.on{width:72px;height:72px;background:rgba(255,255,255,.9);}
@media (hover:none){.cur,.cur-f{display:none;}}

/* ================= PRELOADER ================= */
.pre{position:fixed;inset:0;background:var(--bone);z-index:100;display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);}
.pre-top{display:flex;justify-content:space-between;align-items:center;color:var(--slate);gap:1rem;}
.pre-brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);}
.pre-brand img{width:34px;height:34px;object-fit:contain;}
.pre-count{font-family:var(--f-disp);font-weight:600;font-size:clamp(5rem,14vw,12rem);line-height:.85;letter-spacing:-.04em;align-self:flex-end;}
.pre-count b{color:var(--cobalt);font-weight:600;}

/* ================= NAV ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;
  padding:1rem var(--pad);color:var(--ink);transition:color .35s var(--ease),background .35s var(--ease);}
.nav.inv{color:var(--bone);}
.nav.stuck{background:rgba(239,236,227,.86);backdrop-filter:blur(10px);}
.nav.stuck.inv{background:rgba(15,15,18,.82);}
.nav .logo{display:flex;align-items:center;gap:.65rem;}
.logo-badge{width:38px;height:38px;flex:0 0 auto;background:var(--bone);display:grid;place-items:center;
  padding:5px;box-shadow:0 0 0 1px rgba(15,15,18,.10);}
.logo-badge img{width:100%;height:100%;object-fit:contain;}
.nav .logo{font-family:var(--f-disp);font-weight:600;font-size:1.15rem;letter-spacing:-.02em;}
.nav .logo sup{color:var(--cobalt);font-size:.55em;}
.nav-mid{position:absolute;left:50%;transform:translateX(-50%);opacity:.7;}
.menu-btn{display:flex;align-items:center;gap:.6rem;}
.menu-btn .bars{width:26px;height:10px;position:relative;}
.menu-btn .bars i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease);}
.menu-btn .bars i:first-child{top:0}.menu-btn .bars i:last-child{top:8px}
body.menu-open .menu-btn .bars i:first-child{top:4px;transform:rotate(45deg);}
body.menu-open .menu-btn .bars i:last-child{top:4px;transform:rotate(-45deg);}

/* ================= OVERLAY MENU ================= */
.ovl{position:fixed;inset:0;background:var(--ink);color:var(--bone);z-index:85;transform:translateY(-100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);visibility:hidden;}
.ovl nav{display:flex;flex-direction:column;margin-bottom:clamp(2rem,6vh,4rem);}
.ovl a.mlink{display:flex;align-items:baseline;gap:1.2rem;font-family:var(--f-disp);font-weight:500;
  font-size:clamp(2.6rem,9vw,6.5rem);line-height:1.06;letter-spacing:-.03em;width:max-content;max-width:100%;}
.ovl a.mlink em{font-family:var(--f-mono);font-style:normal;font-size:.75rem;color:var(--cobalt);}
.ovl a.mlink span{position:relative;transition:color .35s;}
.ovl a.mlink:hover span{color:var(--cobalt);}
.ovl .ovl-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(239,236,227,.18);padding-top:1.2rem;color:#8B897F;}
.mlw{overflow:hidden;}

/* ================= HERO ================= */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:22vh;}
.hero-eyebrow{color:var(--mut);margin-bottom:1.4rem;display:flex;gap:1.5rem;flex-wrap:wrap;}
.hero-eyebrow b{color:var(--cobalt);font-weight:500;}
.hero-title{font-family:var(--f-disp);font-weight:600;letter-spacing:-.045em;line-height:.82;
  font-size:clamp(2.9rem,14.1vw,18rem);display:flex;align-items:flex-start;user-select:none;}
.hero-title .lw{overflow:hidden;display:inline-block;padding-bottom:.06em;}
.hero-title .l{display:inline-block;will-change:transform;transform:translateY(115%);}
.hero-title .l.silent{color:var(--cobalt);}
.hero-title sup{font-family:var(--f-mono);font-size:clamp(.7rem,1.4vw,1.1rem);color:var(--cobalt);margin-top:1.2em;letter-spacing:0;}
.hero-sub{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end;margin:clamp(1.5rem,4vh,3.5rem) 0;}
.hero-sub p{max-width:36ch;font-size:clamp(1rem,1.35vw,1.3rem);font-weight:500;}
.hero-list{justify-self:end;text-align:right;color:var(--mut);display:flex;flex-direction:column;gap:.35rem;}
.hero-bar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln);padding:1.1rem 0 1.4rem;color:var(--mut);gap:1rem;}
.hero-bar .mid{text-align:center;}
.hero-bar .end{text-align:right;}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cobalt);margin-right:.5rem;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.rv{opacity:0;transform:translateY(28px);}

/* ================= MARQUEE ================= */
.mq{overflow:hidden;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:1.1rem 0;background:transparent;color:var(--fg);}
.mq-track{display:flex;width:max-content;gap:2.5rem;padding-right:2.5rem;animation:mq 28s linear infinite;}
.mq.rev .mq-track{animation-direction:reverse;}
.mq-track span{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:2.5rem;}
.mq-track span i{font-style:normal;color:var(--cobalt);}
.mq.outline .mq-track span{color:transparent;-webkit-text-stroke:1px var(--fg);}
.mq.outline .mq-track span i{-webkit-text-stroke:0;color:var(--cobalt);}
@keyframes mq{to{transform:translateX(-50%);}}

/* ================= MANIFESTO ================= */
.manif{padding:clamp(5rem,12vh,9rem) var(--pad);}
.manif-txt{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.7rem,4.4vw,4.2rem);line-height:1.14;letter-spacing:-.02em;max-width:24ch;}
.manif-txt .w{opacity:.13;display:inline-block;}
.manif-txt .cob{color:var(--cobalt);}
.manif-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);margin-top:clamp(3.5rem,8vh,6rem);align-items:start;}
.manif-fig{aspect-ratio:4/5;overflow:hidden;position:relative;background:#1a1a20;}
.manif-fig img{transform:scale(1.18);will-change:transform;}
.manif-cap{margin-top:.8rem;color:var(--mut);display:flex;justify-content:space-between;}
.stats{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--ln);}
.stat{padding:clamp(1.4rem,3vw,2.6rem);border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);}
.stat:nth-child(-n+2){border-top:1px solid var(--ln);}
.stat b{display:block;font-family:var(--f-disp);font-weight:600;font-size:clamp(2.4rem,5vw,4.6rem);letter-spacing:-.03em;line-height:1;}
.stat b i{font-style:normal;color:var(--cobalt);}
.stat span{color:var(--mut);}

/* ================= ABOUT / TEAM ================= */
.about{margin:clamp(4rem,10vh,7rem) calc(var(--pad)*-1) 0;background:var(--bone);
  border-top:1px solid var(--ln);padding:clamp(2.2rem,5vh,3.4rem) var(--pad) clamp(2.4rem,6vh,3.6rem);}
.about-name h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.25rem,2.6vw,2.1rem);
  line-height:1.3;letter-spacing:-.01em;max-width:42ch;margin-top:1rem;}
.about-name h3 b{font-weight:600;}
.about-name h3 em{font-style:normal;font-family:var(--f-mono);font-size:.68em;color:var(--mut);}
.about-name .cob{color:var(--cobalt);}
.about-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2.4rem,6vh,3.6rem);
  border-top:1px solid var(--ln);border-left:1px solid var(--ln);}
.about-facts>div{padding:1.1rem 1.3rem;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);}
.about-facts dt{color:var(--mut);margin-bottom:.45rem;}
.about-facts dd{font-family:var(--f-body);font-size:1rem;letter-spacing:0;text-transform:none;}
.about-facts dd a:hover{color:var(--cobalt);}
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2.4rem,6vh,3.6rem);}
.member{border-top:2px solid var(--cobalt);padding-top:1.2rem;}
.member .idx{color:var(--mut);}
.portrait{position:relative;aspect-ratio:4/5;max-height:min(52vh,520px);overflow:hidden;background:#1a1a20;margin-bottom:1.2rem;}
.portrait img{transform:scale(1.02);filter:grayscale(1) contrast(1.08) brightness(.98);
  transition:filter .55s var(--ease),transform .8s var(--ease);}
.portrait::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,56,255,.20) 0%,rgba(15,15,18,.10) 45%,rgba(15,15,18,.55) 100%);
  mix-blend-mode:multiply;transition:opacity .55s var(--ease);}
.portrait figcaption{position:absolute;left:0;bottom:0;z-index:2;background:var(--cobalt);color:var(--bone);
  padding:.55rem .9rem;letter-spacing:.1em;}
.member:hover .portrait img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.06);}
.member:hover .portrait::before{opacity:.25;}
@media (hover:none){
  .portrait img{filter:grayscale(.25) contrast(1.03);}
  .portrait::before{opacity:.5;}
}
.member h4{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:-.02em;line-height:1.05;margin:.6rem 0 .7rem;}
.member p{color:var(--mut);max-width:40ch;}

/* ================= WORK ================= */
.work{padding:clamp(5rem,12vh,9rem) var(--pad);}
.proj{display:block;margin-bottom:clamp(4rem,10vh,7.5rem);}
.proj:last-child{margin-bottom:0;}
.proj-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.proj-top h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.9rem,5vw,4.4rem);letter-spacing:-.03em;line-height:1;}
.proj-top .yr{color:var(--mut);}
.proj-fig{aspect-ratio:16/9.5;overflow:hidden;position:relative;background:#1a1a20;}
.proj-fig img{transform:scale(1.14);will-change:transform;transition:filter .5s;}
.proj-fig::after{content:"VISIT LIVE ↗";position:absolute;right:1.2rem;bottom:1.2rem;background:var(--cobalt);color:var(--bone);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;padding:.7rem 1rem;opacity:0;transform:translateY(10px);transition:.35s var(--ease);}
.proj:hover .proj-fig::after{opacity:1;transform:translateY(0);}
.proj:hover .proj-fig img{filter:saturate(1.05);}
.proj-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;color:var(--mut);}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;}
.tags li{list-style:none;border:1px solid var(--ln);padding:.45rem .8rem;border-radius:99px;}
.clip{clip-path:inset(0% 0% 100% 0%);}

/* ================= SERVICES ================= */
.serv{padding:clamp(5rem,12vh,9rem) 0 0;}
.serv .label{margin-left:var(--pad);margin-right:var(--pad);}
.srow{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,3rem);align-items:center;
  padding:clamp(1.3rem,3vw,2.2rem) var(--pad);border-top:1px solid var(--ln);overflow:hidden;width:100%;text-align:left;}
.srow:last-of-type{border-bottom:1px solid var(--ln);}
.srow::before{content:"";position:absolute;inset:0;background:var(--cobalt);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:0;}
.srow:hover::before,.srow:focus-visible::before{transform:scaleY(1);}
.srow>*{position:relative;z-index:1;transition:color .3s;}
.srow .idx{color:var(--mut);}
.srow h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.5rem,3.6vw,3.2rem);letter-spacing:-.02em;line-height:1;}
.srow p{max-width:30ch;color:var(--mut);font-size:.95rem;}
.srow .arw{font-family:var(--f-disp);font-size:1.6rem;transition:transform .4s var(--ease);}
.srow:hover .idx,.srow:hover h3,.srow:hover p,.srow:hover .arw,
.srow:focus-visible .idx,.srow:focus-visible h3,.srow:focus-visible p,.srow:focus-visible .arw{color:var(--bone);}
.srow:hover .arw{transform:rotate(45deg);}
.preview{position:fixed;top:0;left:0;width:270px;height:340px;z-index:70;pointer-events:none;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.85);will-change:transform;background-size:cover;background-position:center;}
@media (hover:none){.preview{display:none;}}

/* ================= PROCESS ================= */
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln);margin-top:-1px;}
.proc div{padding:clamp(1.6rem,3vw,2.6rem) var(--pad);border-right:1px solid var(--ln);}
.proc div:last-child{border-right:0;}
.proc b{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;color:var(--cobalt);display:block;margin-bottom:.9rem;}
.proc h4{font-family:var(--f-disp);font-weight:500;font-size:1.25rem;margin-bottom:.4rem;}
.proc p{color:var(--mut);font-size:.9rem;}

/* ================= CTA / FOOTER ================= */
.cta{padding:clamp(5rem,14vh,10rem) var(--pad) 2rem;display:flex;flex-direction:column;justify-content:space-between;}
.cta-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.cta h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(2.8rem,9.5vw,9.5rem);line-height:.95;letter-spacing:-.04em;}
.cta h2 i{font-style:normal;color:var(--cobalt);}
.big-btn{width:clamp(150px,15vw,190px);aspect-ratio:1;border:1px solid var(--ln);border-radius:50%;display:grid;place-items:center;
  text-align:center;position:relative;overflow:hidden;flex-shrink:0;will-change:transform;}
.big-btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cobalt);transform:scale(0);transition:transform .45s var(--ease);}
.big-btn span{position:relative;z-index:1;transition:color .3s;}
.big-btn:hover::before{transform:scale(1.05);}
.big-btn:hover span{color:var(--ink);}
.cta-links{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:clamp(2.5rem,6vh,4.5rem);}
.cta-links a{font-family:var(--f-disp);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:500;position:relative;}
.cta-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:var(--cobalt);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.cta-links a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---- CONTACT FORM ---- */
.form-wrap{margin-top:clamp(3rem,8vh,5.5rem);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);
  border-top:1px solid var(--ln);padding-top:clamp(2rem,5vh,3.2rem);}
.form-aside p{color:var(--mut);max-width:34ch;margin-top:.9rem;}
.form-aside .resp{margin-top:1.6rem;color:var(--mut);display:flex;flex-direction:column;gap:.45rem;}
form.cf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.5vw,1.8rem);}
.fld{display:flex;flex-direction:column;gap:.5rem;}
.fld.full{grid-column:1/-1;}
.fld label{color:var(--mut);}
.fld input,.fld textarea,.fld select{
  background:transparent;border:0;border-bottom:1px solid var(--ln);color:var(--fg);
  font-family:var(--f-body);font-size:1.05rem;padding:.65rem 0;width:100%;border-radius:0;transition:border-color .3s;}
.fld select option{background:var(--ink);color:var(--bone);}
.fld textarea{resize:vertical;min-height:104px;}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-bottom-color:var(--cobalt);}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mut);opacity:.6;}
.fld.err input,.fld.err textarea,.fld.err select{border-bottom-color:#FF4D4D;}
.fld .msg{color:#FF6B6B;font-size:.78rem;min-height:1em;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.submit{grid-column:1/-1;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.4rem;}
.btn{position:relative;overflow:hidden;border:1px solid var(--ln);padding:1.05rem 2.4rem;border-radius:99px;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;}
.btn::before{content:"";position:absolute;inset:0;background:var(--cobalt);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.btn span{position:relative;z-index:1;transition:color .3s;}
.btn:hover::before{transform:scaleX(1);transform-origin:left;}
.btn:hover span{color:var(--ink);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn[disabled]:hover::before{transform:scaleX(0);}
.status{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
.status.ok{color:#39D98A;} .status.bad{color:#FF6B6B;}

.foot{border-top:1px solid var(--ln);margin-top:clamp(3rem,8vh,5rem);padding-top:1.2rem;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1rem;color:var(--mut);}
.foot .r{text-align:right;}
.foot a:hover{color:var(--cobalt);}
.socials{display:flex;gap:1.5rem;margin-top:1rem;color:var(--mut);flex-wrap:wrap;}
.socials a:hover{color:var(--cobalt);}

/* ================= RESPONSIVE ================= */
@media(max-width:860px){
  .nav-mid{display:none;}
  #xcv{opacity:.16;}
  .hero{padding-top:16vh;}
  .hero-sub{grid-template-columns:1fr;gap:1.5rem;}
  .hero-list{justify-self:start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:.4rem 1.2rem;}
  .hero-bar{grid-template-columns:1fr 1fr;}
  .hero-bar .mid{display:none;}
  .manif-grid{grid-template-columns:1fr;}
  .srow{grid-template-columns:auto 1fr auto;}
  .srow p{display:none;}
  .proc{grid-template-columns:1fr 1fr;}
  .proc div:nth-child(2n){border-right:0;}
  .proc div{border-bottom:1px solid var(--ln);}
  .foot{grid-template-columns:1fr 1fr;}
  .foot .r{text-align:left;}
  .about-facts{grid-template-columns:1fr;}
  .team{grid-template-columns:1fr;}
  .form-wrap{grid-template-columns:1fr;}
  form.cf{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .mq-track,.grain,.dot{animation:none!important;}
  .rv,.hero-title .l,.manif-txt .w{opacity:1!important;transform:none!important;}
  .clip{clip-path:none;}
  html{scroll-behavior:auto;}
}

/* ================= MULTI-PAGE ADDITIONS ================= */
/* page header (inner pages) */
.phead{padding:calc(22vh + 2rem) 0 clamp(2.5rem,7vh,4.5rem);}
.phead-idx{color:var(--mut);margin-bottom:1.2rem;}
.phead-title{font-family:var(--f-disp);font-weight:600;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(2.8rem,11vw,9rem);}
.phead-blurb{margin-top:1.4rem;max-width:44ch;font-size:clamp(1rem,1.3vw,1.25rem);font-weight:500;color:var(--mut);}
@media(max-width:860px){ .phead{padding-top:calc(16vh + 2rem);} }

/* "see all" links */
.more{margin-top:clamp(2rem,5vh,3rem);}
.arrow-link{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.05rem,2vw,1.5rem);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;}
.arrow-link span{transition:transform .35s var(--ease);display:inline-block;}
.arrow-link::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:var(--cobalt);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.arrow-link:hover::after{transform:scaleX(1);transform-origin:left;}
.arrow-link:hover span{transform:translate(4px,-4px);}

/* active nav item */
.ovl a.mlink[aria-current="page"] span{color:var(--cobalt);}
.ovl a.mlink[aria-current="page"] em::after{content:" ●";}

/* shared site footer */
.site-foot{background:var(--ink);color:var(--bone);padding:clamp(3rem,8vh,5.5rem) var(--pad) 2rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,6vh,4rem);}
.foot-logo{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-disp);font-weight:600;font-size:1.6rem;letter-spacing:-.02em;}
.foot-logo .logo-badge{width:46px;height:46px;}
.foot-logo sup{color:var(--cobalt);font-size:.5em;}
.foot-line{color:var(--mut);max-width:38ch;margin-top:.9rem;}
.foot-col{display:flex;flex-direction:column;gap:.6rem;color:var(--mut);}
.foot-col .foot-h{color:var(--cobalt);margin-bottom:.4rem;}
.foot-col a:hover{color:var(--bone);}
.site-foot .socials{margin-top:.4rem;}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr;gap:2.2rem;} }

/* ================= RESPONSIVE — full ladder ================= */

/* ultrawide: stop content from stretching */
@media (min-width:1800px){
  :root{ --pad:clamp(4rem,7vw,9rem); }
  .hero-title{ font-size:min(14.1vw,17rem); }
}

/* laptop */
@media (max-width:1200px){
  .manif-grid{grid-template-columns:1fr 1.15fr;gap:2.4rem;}
  .about-facts{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1.2fr .7fr 1fr;gap:2.2rem;}
  .srow p{max-width:26ch;}
}

/* small laptop / tablet landscape */
@media (max-width:1024px){
  .proc{grid-template-columns:repeat(2,1fr);}
  .proc div:nth-child(2n){border-right:0;}
  .proc div{border-bottom:1px solid var(--ln);}
  .form-wrap{grid-template-columns:1fr;gap:2rem;}
  .team{gap:1.6rem;}
  .portrait{max-height:min(46vh,420px);}
}

/* tablet portrait */
@media (max-width:900px){
  .team{grid-template-columns:1fr;}
  .portrait{aspect-ratio:16/10;max-height:none;}
  .cta-links{gap:1.6rem;}
}

/* phone */
@media (max-width:640px){
  .nav{padding:.75rem var(--pad);}
  .logo-badge{width:32px;height:32px;padding:4px;}
  .nav .logo-word{font-size:1rem;}
  .menu-btn .bars{width:22px;}
  .pre-brand img{width:28px;height:28px;}
  .about-facts{grid-template-columns:1fr;}
  .proc{grid-template-columns:1fr;}
  .proc div{border-right:0;}
  .proj-fig{aspect-ratio:4/3;}
  .proj-fig::after{right:.8rem;bottom:.8rem;padding:.55rem .8rem;}
  .proj-top{gap:.4rem;}
  .tags li{padding:.35rem .65rem;}
  .big-btn{width:132px;}
  .cta-head{gap:1.6rem;}
  .foot{grid-template-columns:1fr;gap:.5rem;}
  .foot .r{text-align:left;}
  .phead{padding-top:calc(14vh + 3rem);}
  .stats{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--ln);}
  .stat{border-left:1px solid var(--ln);}
  .stat:nth-child(-n+2){border-top:0;}
}

/* small phone */
@media (max-width:400px){
  .nav .logo-word{font-size:.9rem;}
  .hero-list{font-size:.66rem;}
  .mq-track{gap:1.4rem;padding-right:1.4rem;}
  .mq-track span{gap:1.4rem;}
  .btn{padding:.95rem 1.6rem;width:100%;text-align:center;}
  .submit{gap:.9rem;}
}

/* short landscape phones: the 100svh hero would swallow the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(6rem + 6vh);padding-bottom:2rem;}
  .phead{padding-top:7rem;}
  .portrait{aspect-ratio:16/9;}
}

/* coarse pointers: no hover-only affordances */
@media (hover:none){
  .proj-fig::after{opacity:1;transform:none;}
  .srow .arw{transform:rotate(45deg);}
}
