/* METALCRAFT — Drive-animation REMAKE. No logos, no photos, no cartoon cogs.
   Drive: Hero-1 loader (GSAP) + BG-1 light-rays (WebGL) + SVG-1 shape overlay + Text-1 scroll motion.
   Shell: loader w/ counter, blueprint grid, laser scan, cursor, magnetic buttons, tickers, bars. */
:root{
  --bg:#07090b; --panel:#0b1014; --panel2:#121920;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.08);
  --txt:#f4f6f7; --mut:#9aa4ac; --dim:#646e76;
  --steel1:#2a343b; --steel2:#11171c;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --topbar-h:30px; --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:#fff;color:#000}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid #fff;outline-offset:3px}

/* native cursor yields to the code-drawn cursor on fine pointers */
@media(hover:hover) and (pointer:fine){
  body.cur-on,body.cur-on a,body.cur-on button,body.cur-on summary,body.cur-on .btn{cursor:none}
  body.cur-on input,body.cur-on textarea{cursor:text}
}

/* loader — Drive Hero-1, steel bar replaces demo images */
.mc-loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:1.1rem;align-items:center;justify-content:center;background:#080b0e}
.mc-loader .mc-h1{display:flex;align-items:center;font-weight:800;font-size:clamp(2.6rem,10vw,6.5rem);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.mc-loader .mc-half{overflow:hidden;display:flex}
.mc-loader .mc-l{display:inline-block;will-change:transform}
.mc-loader .mc-bar{width:0;height:.68em;margin:0 .14em;background:linear-gradient(180deg,#39434b,#12181d);border:1px solid var(--line);position:relative;overflow:hidden}
.mc-loader .mc-bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.09) 10px 11px)}
.mc-loader .mc-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;color:var(--mut)}
/* portrait / narrow screens: stack the wordmark so it can never clip */
@media(max-width:640px){
  .mc-loader .mc-h1{flex-direction:column;font-size:17vw}
  .mc-loader .mc-bar{height:.16em;margin:.2em 0;min-width:0}
  .mc-loader .mc-sub{font-size:.55rem;letter-spacing:.22em;text-align:center;padding:0 8vw;line-height:2}
}
/* short landscape screens: keep the row, just smaller */
@media(max-height:500px){
  .mc-loader .mc-h1{font-size:2.6rem}
  .mc-loader{gap:.6rem}
}
.mc-loader .mc-pct{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:#fff}
.mc-loader.done{display:none}
.mc-main{opacity:0}
.mc-main.ready{opacity:1;transition:opacity .9s ease}

/* backgrounds — Drive BG-1 light-rays + blueprint + orbs (all code) */
.light-rays{position:absolute;inset:0;overflow:hidden}
.light-rays canvas{width:100%;height:100%;display:block;opacity:.85}
.blueprint{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(90% 80% at 50% 20%,#000 30%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none}
.orb.a{width:44vw;height:44vw;left:-12vw;top:-14vw;background:#1d2b34}
.orb.b{width:34vw;height:34vw;right:-10vw;top:30%;background:#232a30}
.noise{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* laser scan — precision-line sweep, evokes CNC without cartoon gears */
.laser{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);box-shadow:0 0 24px rgba(255,255,255,.55);opacity:.7;pointer-events:none}
/* CSS beam fallback — paints behind copy if the Drive WebGL canvas fails to inject */
.light-rays.rays-fallback{background:
  radial-gradient(55% 42% at 50% 0%,rgba(190,208,222,.22),transparent 70%),
  radial-gradient(35% 30% at 72% 18%,rgba(140,160,178,.12),transparent 70%)}
/* scroll cue — bottom-right of tall views */
.scrollcue{position:absolute;right:3vw;bottom:4vh;z-index:3;display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;color:var(--mut);pointer-events:none}
.scrollcue i{display:block;width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* shape overlay — Drive SVG-1, steel gradients */
.shape-overlays{position:fixed;inset:0;z-index:190;pointer-events:none;width:100%;height:100%}

/* cursor — Drive mouse-pattern, code-drawn.
   Hidden on tab-hide / window blur / pointer-leave / mouse-down via .hide */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:180;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .25s}
.cur-dot{width:6px;height:6px;background:#fff}
.cur-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);transition:opacity .25s,width .25s,height .25s,border-color .25s}
.cur-ring.big{width:64px;height:64px;border-color:#fff}
.cur-dot.show,.cur-ring.show{opacity:1}
.cur-dot.hide,.cur-ring.hide{opacity:0}
@media(hover:none){.cur-dot,.cur-ring{display:none}}

/* chrome */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:#fff;z-index:120}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  height:var(--topbar-h);padding:0 3vw;white-space:nowrap;overflow:hidden;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--mut);background:rgba(7,9,11,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.topbar a{text-decoration:none;color:var(--txt)}
.nav{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:70;display:flex;align-items:center;gap:2rem;padding:0 3vw;height:var(--nav-h);
  background:rgba(7,9,11,.55);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);transition:transform .4s var(--ease)}
.nav.hide{transform:translateY(calc(-100% - var(--topbar-h)))}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand-mark{width:34px;height:34px;border:1px solid #fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.brand b{font-size:.9rem;letter-spacing:.22em}
.brand small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;color:var(--mut)}
.links{display:flex;gap:1.5rem;margin-left:2rem}
.links a{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-decoration:none;opacity:.75;padding:.4rem 0;position:relative}
.links a:hover,.links a.on{opacity:1}
.links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.links a:hover::after,.links a.on::after{transform:scaleX(1);transform-origin:left}
.cta{margin-left:auto;display:flex;gap:.8rem;align-items:center;flex-shrink:0}
.live{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:#3dff8a;display:flex;gap:.45rem;align-items:center;white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:#3dff8a;box-shadow:0 0 10px #3dff8a;animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.3}}
.burger{display:none;background:none;border:1px solid var(--line);padding:.55rem .65rem;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
.btn{display:inline-block;border:1px solid #fff;color:#fff;background:transparent;text-decoration:none;font-size:.72rem;font-weight:800;
  letter-spacing:.18em;padding:.95rem 2.2rem;min-width:190px;text-align:center;transition:background .3s,color .3s;cursor:pointer;text-transform:uppercase;will-change:transform}
.btn:hover{background:#fff;color:#000}
.btn.solid{background:#fff;color:#000}.btn.solid:hover{background:transparent;color:#fff}
.btn.sm{min-width:0;padding:.65rem 1.2rem;font-size:.66rem}

/* views */
.view{position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #10151a;
  background:radial-gradient(120% 90% at 50% 0%,#10161b 0%,var(--bg) 60%)}
.view--tall{min-height:94vh}
/* teaser bands + subpage heroes: flat surface, no hero texture.
   Blueprint, orbs and laser are hero-only (see app.js). */
.view:not(.view--tall){background:#0a0d11}
.view:not(.view--tall) .blueprint,.view:not(.view--tall) .orb,.view:not(.view--tall) .laser{display:none}
.copy{position:relative;z-index:3;padding:calc(var(--topbar-h) + var(--nav-h) + 3rem) 3vw 3.5rem;max-width:1100px;width:100%;text-align:left}
.view--tall .copy{padding-bottom:6vh}
.kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;color:var(--mut);text-transform:uppercase;margin-bottom:.9rem}
.kick b{color:#fff}
h1,h2{font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(1.7rem,4vw,3rem)}
h1 .thin,h2 .thin{font-weight:200;display:block}
.giant{font-size:clamp(3rem,11vw,9rem);line-height:.88}
.outline{color:#fff}
@supports(-webkit-text-stroke:1px #000){
  .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
}
.sub{margin:1rem 0 1.8rem;color:#cfd6db;max-width:46ch;font-size:.92rem;line-height:1.65}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.meta{margin-top:1.6rem;display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--mut)}
.meta strong{color:#fff}
.strip{position:relative;z-index:2;background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.cell{padding:1.4rem 1.8rem;border-right:1px solid var(--line2)}
.cell:last-child{border-right:0}
.cell label{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;color:var(--mut);text-transform:uppercase}
.cell strong{display:flex;align-items:baseline;gap:.45rem;font-size:clamp(2rem,3.6vw,3rem);font-weight:800;margin:.3rem 0 .15rem;letter-spacing:-.01em;line-height:1}
.cell strong small{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.24em;color:var(--mut)}
.cell>span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--dim)}
.bar{height:3px;background:#1b2126;margin-top:.7rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#fff}
.sec{position:relative;z-index:2;background:var(--bg);padding:5rem 3vw;overflow:hidden}
.wrap{max-width:1100px;margin:0;position:relative;z-index:2;text-align:left}
/* service rows */
.svc{display:grid;grid-template-columns:84px 1fr auto;gap:1.2rem;align-items:center;padding:1.6rem .6rem;border-bottom:1px solid var(--line2);position:relative;overflow:hidden;text-decoration:none}
.svc:first-of-type{border-top:1px solid var(--line2)}
.svc::before{content:"";position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.svc:hover::before,.svc:focus-visible::before{transform:scaleY(1)}
.svc>*{position:relative;z-index:1}
.svc:hover,.svc:focus-visible{color:#000}
.svc:hover .mut,.svc:focus-visible .mut{color:#333}
.svc .no{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em}
.svc h3{font-size:clamp(1.2rem,2.6vw,2rem);letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.svc .mut{color:var(--mut);font-size:.82rem;margin-top:.35rem;line-height:1.6}
.svc .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;border:1px solid var(--line);padding:.6rem .9rem;white-space:nowrap}
.svc:hover .go,.svc:focus-visible .go{border-color:#000}
/* service cards (services page) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:2rem}
.card{background:var(--panel);padding:1.8rem;min-height:210px;position:relative;overflow:hidden;transition:background .3s,color .3s}
.card:hover{background:#fff;color:#000}
.card:hover p{color:#333}
.card h3{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem;line-height:1.4}
.card p{color:var(--mut);font-size:.82rem;line-height:1.65;max-width:36ch}
.card .n{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--mono);font-size:.6rem;color:var(--dim);letter-spacing:.2em}
.trow{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:baseline;padding:1rem .2rem;border-bottom:1px solid var(--line2)}
.trow .no{font-family:var(--mono);font-size:.62rem;color:var(--dim);letter-spacing:.15em}
.trow h3{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.trow p{color:var(--mut);font-size:.76rem;margin-top:.25rem;line-height:1.6}
.trow .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;border:1px solid var(--line);padding:.35rem .6rem;white-space:nowrap}
/* Drive Grid-1 Flip view: work log LIST <-> GRID (text-only, no images) */
.view-toggle{display:flex;gap:.5rem;margin:1.5rem 0 1rem}
.view-toggle button{background:transparent;border:1px solid var(--line);color:var(--txt);font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;padding:.65rem 1.2rem;cursor:pointer}
.view-toggle button.on{background:#fff;color:#000;border-color:#fff}
.log.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:1rem}
.log.grid .trow{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;background:var(--panel);border:0;padding:1.4rem;min-height:200px}
.log.grid .trow .tag{margin-top:auto}
.mono-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:2rem}
.mono{background:var(--panel);min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:1rem;transition:background .3s,color .3s}
.mono:hover{background:#fff;color:#000}
.mono b{font-size:1.6rem;letter-spacing:.05em}
.mono span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;opacity:.7;line-height:1.5}
/* client-mark tiles — real logos on white, monogram fallback if one fails */
.mono.logo{background:#fff;color:#000;padding:.9rem}
.mono.logo:hover{background:#fff}
.mono.logo img{width:100%;height:64px;object-fit:contain}
.mono.logo span{opacity:.75}
/* hero photograph (Howrah Bridge) — dimmed plate, Drive rays paint above it */
.view--tall .photo{position:absolute;inset:0;overflow:hidden}
.view--tall .photo img{width:100%;height:100%;object-fit:cover;opacity:.5}
.view--tall .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,11,.95) 5%,rgba(7,9,11,.45) 55%,rgba(7,9,11,.65))}
.photo-credit{position:absolute;right:3vw;bottom:10vh;z-index:3;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;color:var(--mut);pointer-events:none}
/* calm mode — less motion, same identity */
body.calm .laser{display:none}
body.calm .tick{animation-duration:70s}
body.calm .live i{animation:none}
body.calm .btn{transition:background .2s,color .2s}
.spec{border-top:1px solid var(--line);margin-top:1.5rem}
.spec div{display:grid;grid-template-columns:1fr 1.4fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line2);font-size:.82rem}
.spec dt{color:var(--mut);font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;line-height:1.7}
.spec dd{text-transform:uppercase;letter-spacing:.05em;line-height:1.7}
.spec dd a{text-decoration:underline;text-underline-offset:3px}
details{border:1px solid var(--line2);background:var(--panel);margin-top:.7rem}
details summary{cursor:pointer;padding:1rem 3rem 1rem 1.2rem;font-size:.74rem;letter-spacing:.16em;font-weight:800;list-style:none;position:relative;line-height:1.5}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1rem;color:var(--mut)}
details[open] summary::after{content:"–"}
details .in{padding:0 1.2rem 1.2rem;color:var(--mut);font-size:.85rem;line-height:1.7}
form{display:grid;gap:.7rem;margin-top:1.5rem;max-width:560px}
input,textarea{background:#0b1013;border:1px solid var(--line);color:#fff;padding:.9rem 1rem;font-size:.85rem;font-family:var(--sans);width:100%}
textarea{resize:vertical;min-height:120px}
input:focus,textarea:focus{outline:1px solid #fff}
input::placeholder,textarea::placeholder{color:var(--dim);letter-spacing:.04em}
.mmenu{position:fixed;inset:0;z-index:150;background:rgba(5,7,8,.97);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.mmenu.open{opacity:1;visibility:visible;transition:opacity .35s}
.mmenu a{display:block;font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800;text-decoration:none;margin:.4rem 0;text-transform:uppercase;line-height:1.25}
.mmenu a:hover{color:#9aa4ac}
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:2.5rem 3vw 2rem;background:#000;overflow:hidden}
footer small,footer a{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--mut);text-decoration:none;line-height:1.8}
footer a:hover{color:#fff}
.foot-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.foot-giant{font-weight:800;font-size:clamp(2.6rem,10vw,8rem);line-height:.9;text-transform:uppercase;color:#fff;margin:1rem 0;user-select:none;letter-spacing:.01em}
@supports(-webkit-text-stroke:1px #000){
  .foot-giant{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28)}
}
.reveal{opacity:0}
.ticker{background:#fff;color:#000;overflow:hidden;white-space:nowrap;padding:.6rem 0;font-size:.7rem;font-weight:800;letter-spacing:.2em;position:relative;z-index:2}
.tick{display:inline-block;white-space:nowrap;animation:tick 26s linear infinite;will-change:transform}
@keyframes tick{to{transform:translateX(-100%)}}
@media(max-width:900px){
  .links{display:none}.burger{display:block}.cta .btn{display:none}
  .strip{grid-template-columns:1fr 1fr}
  .cell:nth-child(2){border-right:0}.cell{border-bottom:1px solid var(--line2)}
  .spec div{grid-template-columns:1fr;gap:.3rem}
  .svc{grid-template-columns:1fr;gap:.5rem}.svc .go{justify-self:start}
  .trow{grid-template-columns:1fr;gap:.3rem}.trow .tag{justify-self:start}
  .copy{padding-bottom:12vh}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .mc-main{opacity:1}
  .tick{animation:none}
}