/* ==========================================================================
   motion.css — TorqueFusion interaction layer
   Loads AFTER style.css. Adds the 3D blueprint rig, the custom cursor,
   hover pop-ups and scroll feedback. Safe to delete if you ever want the
   quiet version of the site back.
   ========================================================================== */

/* --- 1. BLUEPRINT RIG ---------------------------------------------------- */
.rig {
  --rig-depth: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.rig__scene {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.rig__tilt,
.rig__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* A part is an extruded solid: stacked slices sharing one 3D space. */
.part,
.plate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  pointer-events: auto;
  transition: opacity .35s var(--ease);
}
.slice,
.shell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  backface-visibility: visible;
}
.plate__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Line weights. The rim slices carry the extrusion, so they sit back a long
   way — enough to read as a solid wall, not enough to muddy the faces. */
.plate__svg .h { fill: none; stroke: var(--white); stroke-width: 2.1; opacity: .95; }
.plate__svg .l { fill: none; stroke: var(--ice);   stroke-width: 1.5; opacity: .6; }
.plate__svg .f { fill: none; stroke: var(--ice);   stroke-width: 1.1; opacity: .38; }
.plate__svg .d {
  fill: none; stroke: var(--sage); stroke-width: 1;
  opacity: .45; stroke-dasharray: 14 5 3 5;
}

.slice--back  { opacity: .5; }
.slice--rim   { opacity: .3; }
.slice--front { opacity: 1; }

.part.is-hot .slice--rim,
.plate.is-hot .shell--rim  { opacity: .6; }
.part.is-hot .slice--back,
.plate.is-hot .shell--back { opacity: .8; }
.slice, .shell { transition: opacity .3s var(--ease); }

/* Part probe — a chip that follows the cursor, outside the 3D scene */
.rig__probe {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  background: var(--void);
  border: 1px solid var(--white);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.rig__probe.is-on { opacity: 1; }
.rig__probe i {
  font-style: normal;
  color: var(--mist-dim);
  border-right: 1px solid var(--steel);
  padding-right: 10px;
}

/* Dim the rest of the stack while one part is being inspected */
.rig.is-probed .part:not(.is-hot),
.rig.is-probed .plate:not(.is-hot) { opacity: .18; }

/* --- 2. HERO WITH THE RIG ------------------------------------------------ */
.hero__rig {
  position: relative;
  width: 118%;
  margin-left: -9%;
}
.hero__rig::after {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.rig__hud {
  position: absolute;
  right: 9%;
  bottom: 1%;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mist-dim);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 3;
}
.rig__hud b { color: var(--white); font-weight: 800; font-family: var(--f-display);
  font-size: 13px; letter-spacing: .06em; }
.rig__hud > span--removed {
  width: 5px; height: 5px;
  background: var(--white);
  animation: blip 1.9s steps(1) infinite;
}
@keyframes blip { 0%,60%{opacity:1} 61%,100%{opacity:.15} }

/* --- 3. CUSTOM CURSOR ---------------------------------------------------- */
.cur, .cur-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform;
}
.cur {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
}
.cur-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  margin: -17px 0 0 -17px;
  transition: width .28s var(--ease), height .28s var(--ease),
              margin .28s var(--ease), border-color .28s var(--ease),
              opacity .28s var(--ease);
}
.cur-ring.is-lg {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-color: #fff;
}
.cur-ring.is-hide { opacity: 0; }
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }

/* --- 4. SCROLL PROGRESS -------------------------------------------------- */
.scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--white);
  z-index: 101;
}

/* --- 5. CARD HOVER — corner brackets draw in ---------------------------- */
.card { overflow: hidden; }
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--white);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.card::before {
  top: 14px; left: 14px;
  border-right: 0; border-bottom: 0;
  transform: translate(-7px, -7px);
}
.card::after {
  bottom: 14px; right: 14px;
  border-left: 0; border-top: 0;
  transform: translate(7px, 7px);
}
.card:hover::before, .card:hover::after { opacity: 1; transform: translate(0, 0); }
.card { transition: background .4s var(--ease), transform .4s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card h3 { transition: transform .4s var(--ease); }
.card:hover h3 { transform: translateX(5px); }

/* --- 6. SPEC ROW HOVER --------------------------------------------------- */
.spec tr { transition: background .25s var(--ease); }
.spec tr:hover { background: var(--graphite); }
.spec td { transition: color .25s var(--ease), transform .3s var(--ease); }
.spec tr:hover td:first-child { color: var(--white); }
.spec tr:hover td:last-child { transform: translateX(-4px); }
.spec td:first-child { padding-left: 12px; }
.spec td:last-child { padding-right: 12px; }

/* --- 7. STEP ROW HOVER --------------------------------------------------- */
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .45s var(--ease);
}
.step:hover::before { transform: scaleY(1); }
.step { padding-left: 0; transition: background .35s var(--ease), padding-left .35s var(--ease); }
.step:hover { padding-left: 22px; }

/* --- 8. MARQUEE PAUSES ON HOVER ----------------------------------------- */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --- 9. DRAWING-FRAME TILT ---------------------------------------------- */
.tdf { transform-style: preserve-3d; will-change: transform; }
.tdf__stage { transition: border-color .35s var(--ease); }
.tdf:hover .tdf__stage { border-color: var(--steel); }

/* --- 10. LINK UNDERLINE SWEEP ------------------------------------------- */
.footer__links a, .checklist a {
  background-image: linear-gradient(var(--white), var(--white));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
.footer__links a:hover, .checklist a:hover { background-size: 100% 1px; }

/* --- 11. BUTTON SHEEN ---------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .65s var(--ease);
}
.btn:hover::after { left: 160%; }
.btn--solid::after { background: linear-gradient(100deg, transparent, rgba(0,0,0,.16), transparent); }

/* --- 12. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cur, .cur-ring, .scrollbar { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .rig__hud > span--removed { animation: none; }
}

/* --- 13. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__rig { width: 100%; margin-left: 0; max-width: 460px; margin-inline: auto; }
  .rig__hud { display: none; }
  .step:hover { padding-left: 0; }
  .card:hover { transform: none; }
}
@media (hover: none) {
  .cur, .cur-ring { display: none; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ==========================================================================
   PRODUCT RIG — live cycloidal / planetary schematics
   ========================================================================== */
.prig {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.tdf__stage.is-rig { overflow: visible; }
.tdf__stage.is-rig::before,
.tdf__stage.is-rig::after { z-index: 0; }

.prig__stack {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.prig__layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  will-change: transform;
  --lab: 0;
}

/* Full-width band — used on the product pages so the stack has room to
   actually come apart instead of piling up inside a half-width column. */
.prig-band {
  position: relative;
  padding-block: 30px 74px;
  overflow: visible;
}
.prig--band { aspect-ratio: 25 / 9; }
.prig--band .prig__hud { bottom: -4%; }
@media (max-width: 900px) {
  .prig--band { aspect-ratio: 1 / 1; }
}
.prig__svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Blueprint line weights — heavier than the old schematics, which read too faint */
.prig__svg .b-h { fill: none; stroke: var(--white); stroke-width: 2.1; opacity: .92; }
.prig__svg .b-l { fill: none; stroke: var(--ice);   stroke-width: 1.5; opacity: .72; }
.prig__svg .b-f { fill: none; stroke: var(--ice);   stroke-width: 1.1; opacity: .42; }
.prig__svg .b-d {
  fill: none; stroke: var(--sage); stroke-width: 1;
  opacity: .45; stroke-dasharray: 14 5 3 5;
}

/* Per-layer callout, revealed once the stack is pulled apart */
.prig__lab {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%) scale(var(--unscale, 1));
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  background: rgba(0,0,0,.82);
  border: 1px solid var(--steel);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--lab);
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.prig__lab b { color: var(--white); font-weight: 500; }
.prig__lab i { font-style: normal; color: var(--sage); font-size: 8.5px; letter-spacing: .1em; }

.prig__hud {
  position: absolute;
  left: 0;
  bottom: -7%;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ice);
  display: flex;
  align-items: center;
  gap: 9px;
}
.prig__hud span {
  width: 5px; height: 5px;
  background: var(--sage);
  animation: blip 1.9s steps(1) infinite;
}

/* Hero rig captions were too dim to read — lift them with the same tints */
.plate__svg .l { stroke: var(--ice); opacity: .6; }
.plate__svg .f { stroke: var(--ice); opacity: .38; }
.plate__svg .h { opacity: .95; }
.rig__hud { color: var(--ice); font-size: 10px; }
.rig__hud > span--removed { background: var(--sage); }
.rig__probe i { color: var(--sage); }

@media (max-width: 900px) {
  .prig__hud { font-size: 8.5px; letter-spacing: .12em; }
  .prig__lab { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .prig__hud span { animation: none; }
}


/* ==========================================================================
   FUNCTION COLOUR CODE
   Colour carries meaning here rather than decoration:
     blue  = fixed        (housing, ring gear, stator, pins)
     rust  = input side   (rotor, eccentric shaft, sun gear)
     green = output side  (cycloidal disc, carrier, output flange)
   ========================================================================== */
.prig__svg .fn-fx  * { stroke: var(--ice); }
.prig__svg .fn-in  * { stroke: var(--rust-lt); }
.prig__svg .fn-out * { stroke: var(--sage); }

.prig__key {
  position: absolute;
  right: 0;
  bottom: -7%;
  gap: 16px;
  display: flex;
  gap: 20px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.prig__key span { display: flex; align-items: center; gap: 7px; }
.prig__key i { width: 14px; height: 2px; display: block; }
.prig__key .k-fx  { background: var(--ice); }
.prig__key .k-in  { background: var(--rust-lt); }
.prig__key .k-out { background: var(--sage); }

/* Hero rig picks up the same code */
.plate__svg .fn-fx  * { stroke: var(--ice); }
.plate__svg .fn-in  * { stroke: var(--rust-lt); }
.plate__svg .fn-out * { stroke: var(--sage); }

/* ==========================================================================
   INDIA MARK
   Three hairlines, a Devanagari stamp and the Pune coordinates.
   Restrained on purpose — a nod, not a flag.
   ========================================================================== */






.stamp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--steel);
  padding: 9px 15px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ice);
}
.stamp b {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--amber);
}
.stamp em {
  font-style: normal;
  color: var(--mist-dim);
  border-left: 1px solid var(--steel);
  padding-left: 12px;
}

/* Jaali — the pierced stone lattice of Indian architecture, redrawn as a
   technical grid. Used as a section divider. */
.jaali {
  height: 62px;
  width: 100%;
  opacity: .3;
  background-repeat: repeat-x;
  background-size: 62px 62px;
  background-image:
    linear-gradient(var(--steel) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, transparent 12px, var(--steel) 12px, transparent 13.4px),
    radial-gradient(circle at 0% 0%,   transparent 12px, var(--steel) 12px, transparent 13.4px),
    radial-gradient(circle at 100% 100%, transparent 12px, var(--steel) 12px, transparent 13.4px);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq { border-top: 1px solid var(--steel-dim); }
.faq__item { border-bottom: 1px solid var(--steel-dim); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--white);
  text-align: left;
  padding: 26px 50px 26px 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  position: relative;
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.faq__item:hover .faq__q { padding-left: 14px; }
.faq__q::after,
.faq__q::before {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  background: var(--sage);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.faq__q::before { width: 15px; height: 1.5px; margin-top: -.75px; }
.faq__q::after  { width: 1.5px; height: 15px; margin-top: -7.5px; right: 12.75px; }
.faq__item.is-open .faq__q::after { transform: rotate(90deg); opacity: 0; }
.faq__item.is-open .faq__q { color: var(--sage); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: 26px;
  max-width: 74ch;
  font-size: 15.5px;
}

/* ==========================================================================
   AXIAL THICKNESS
   Each part is a short stack of parallel shells inside its plate. Seen at an
   angle the shells read as a solid barrel instead of a paper disc.
   ========================================================================== */
.shell {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.shell--ghost .plate__svg .h,
.shell--ghost .plate__svg .l,
.shell--ghost .plate__svg .f { opacity: .3; }
.plate.is-hot .shell--ghost .plate__svg .l,
.plate.is-hot .shell--ghost .plate__svg .f { opacity: .6; }

/* ==========================================================================
   BRAND MOMENT — the logo at full size on the home page
   ========================================================================== */
.brandmark {
  position: relative;
  padding-block: 130px;
  text-align: center;
  overflow: hidden;
}
.brandmark__logo {
  width: min(760px, 78vw);
  margin-inline: auto;
  display: block;
  /* wipes in left to right as it scrolls into view */
  -webkit-mask-image: linear-gradient(90deg, #000 0 var(--wipe, 0%), transparent var(--wipe, 0%));
  mask-image: linear-gradient(90deg, #000 0 var(--wipe, 0%), transparent var(--wipe, 0%));
}
.brandmark__rule {
  width: min(760px, 78vw);
  height: 1px;
  background: var(--steel);
  margin: 40px auto 0;
  transform: scaleX(var(--rule, 0));
  transform-origin: 50% 50%;
  transition: transform .1s linear;
}
.brandmark__line {
  margin-top: 30px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ice);
}
.brandmark 
.brandmark__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(178,100,58,.11), transparent 70%);
}

/* ==========================================================================
   TORQUE DIVIDERS
   ========================================================================== */
.tq { position: relative; width: 100%; }
.tq__svg { width: 100%; height: auto; display: block; overflow: visible; }

.tq-g     { stroke: var(--steel-dim); stroke-width: 1; fill: none; }
.tq-ax    { stroke: var(--steel); stroke-width: 1.4; fill: none; }
.tq-base  { stroke: var(--sage); stroke-width: 1; stroke-dasharray: 5 5; opacity: .55; fill: none; }
.tq-peak  { stroke: var(--rust-lt); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.tq-cont  { stroke: var(--sage);    stroke-width: 2.2; fill: none; stroke-linecap: round; }
.tq-dot      { fill: var(--white); }
.tq-dot-ring { fill: none; stroke: var(--white); stroke-width: 1; opacity: .5; }

.tq-lab {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  fill: var(--mist-dim); text-transform: uppercase;
}
.tq-unit { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; fill: var(--ice); }
.tq-lab--peak { fill: var(--rust-lt); }
.tq-lab--cont { fill: var(--sage); }
.tq-lab--base { fill: var(--sage); opacity: .8; font-size: 9.5px; }

.tq--curve { padding-block: 20px 8px; }
.tq__readout {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
}
.tq__readout b {
  font-family: var(--f-display); font-size: 2.4rem; font-weight: 800;
  color: var(--white); letter-spacing: -.03em; line-height: 1;
}
.tq__readout i { font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--ice); }
.tq__readout em {
  font-style: normal; font-size: 10px; letter-spacing: .16em;
  color: var(--mist-dim); text-transform: uppercase;
  border-left: 1px solid var(--steel); padding-left: 10px; margin-left: 4px;
}

.tq--arc { max-width: 300px; margin-inline: auto; }
.tq-shaft   { fill: none; stroke: var(--ice); stroke-width: 1.6; }
.tq-shaft-i { fill: none; stroke: var(--ice); stroke-width: 1.1; opacity: .5; }
.tq-track   { fill: none; stroke: var(--steel); stroke-width: 1; stroke-dasharray: 4 6; }
.tq-arc     { fill: none; stroke: var(--rust-lt); stroke-width: 3; stroke-linecap: round; }
.tq-head    { fill: var(--rust-lt); }
.tq__cap {
  text-align: center; margin-top: 20px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
}
.tq__cap b { display: block; color: var(--white); font-weight: 500; letter-spacing: .22em; }
.tq__cap i { font-style: normal; color: var(--mist-dim); font-size: 9px; }

@media (max-width: 900px) {
  .tq__readout { position: static; margin-bottom: 18px; }
  .tq__readout b { font-size: 1.8rem; }
  .brandmark { padding-block: 80px; }
  .tq-lab { font-size: 14px; }
  .tq-lab--base { display: none; }
}

/* ==========================================================================
   LIVING BRANDMARK
   ========================================================================== */
.bm { position: relative; width: 100%; max-width: 1060px; margin-inline: auto; }
.bm__svg { width: 100%; height: auto; display: block; overflow: visible; }

.bm-solid { fill: var(--white); }
.bm-t     { fill: var(--white); }

/* the O of TORQUE, drawn as an actuator */
.bm-o-h { fill: none; stroke: var(--white);    stroke-width: 5; }
.bm-o-f { fill: none; stroke: var(--ice);      stroke-width: 2.4; opacity: .8; }
.bm-o-d { fill: none; stroke: var(--rust-lt);  stroke-width: 3.4; }
.bm-o-i { fill: none; stroke: var(--sage);     stroke-width: 3.4; }

/* Tricolour channel split. Done with drop-shadows on the live group rather
   than duplicate copies, so the glitch tracks whatever the letters are doing. */
.bm-word { transition: filter .06s linear; }
.bm-word.is-glitch {
  filter: drop-shadow(-7px 0 0 var(--amber)) drop-shadow(7px 0 0 var(--sage));
}

/* the arm lives in the corner and stays out of the way */

/* ==========================================================================
   TRICOLOUR TORQUE RING
   Three arcs turning at 1 : 1/3 : 1/9 — the same ratios as the TF80's two
   planetary stages. The flag as a reduction gearbox.
   ========================================================================== */

.tri__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brandmark 

/* ==========================================================================
   MORE COLOUR ACROSS THE SITE
   ========================================================================== */
/* scroll progress runs the tricolour */
.scrollbar {
  background: linear-gradient(90deg, var(--ice) 0%, var(--violet) 52%, var(--cyan) 100%);
}
/* eyebrow rule picks up the flag */
.eyebrow::before {
  background: linear-gradient(90deg, var(--amber), var(--sage)) !important;
  width: 34px !important;
  height: 2px !important;
}
/* stat band cycles the three technical tints */
.band__cell:nth-child(4n+1) > b { color: var(--ice); }
.band__cell:nth-child(4n+2) > b { color: var(--rust-lt); }
.band__cell:nth-child(4n+3) > b { color: var(--sage); }
.band__cell:nth-child(4n+4) > b { color: var(--white); }
/* card index numbers alternate */
.cards > .card:nth-child(3n+1) .card__no { color: var(--ice); }
.cards > .card:nth-child(3n+2) .card__no { color: var(--sage); }
.cards > .card:nth-child(3n+3) .card__no { color: var(--rust-lt); }
/* process steps run warm to cool as they progress */
.step:nth-child(4n+1) .step__no { color: var(--amber); }
.step:nth-child(4n+2) .step__no { color: var(--rust-lt); }
.step:nth-child(4n+3) .step__no { color: var(--ice); }
.step:nth-child(4n+4) .step__no { color: var(--sage); }
/* jaali lattice tinted rather than grey */
.jaali { opacity: .42; }
/* marquee separators alternate the flag colours */
.marquee__track span:nth-child(3n+1)::after { border-color: var(--amber); }
.marquee__track span:nth-child(3n+2)::after { border-color: #EDF0F1; }
.marquee__track span:nth-child(3n+3)::after { border-color: var(--sage); }

@media (max-width: 900px) {
  .bm-arm { opacity: .22; }
  .brandmark 
}

/* ==========================================================================
   LIVING BRAND MARK
   ========================================================================== */
.bm { position: relative; width: 100%; }
.bm__svg { width: 100%; height: auto; display: block; overflow: visible; }


/* the actuator standing in for the O */
.ak-h { fill: none; stroke: var(--white); stroke-width: 3.2; }
.ak-l { fill: none; stroke: var(--ice);   stroke-width: 2.2; }
.ak-f { fill: none; stroke: var(--rust-lt); stroke-width: 1.8; }

/* Tricolour chromatic split — the flag colours used as glitch ghosts rather
   than as three static bars. */
.bm-ghost { mix-blend-mode: screen; opacity: 0; }

/* industrial arm */
.arm-h { fill: none; stroke: var(--ice); stroke-width: 2.4; opacity: .55; }
.arm-l { fill: none; stroke: var(--ice); stroke-width: 1.8; opacity: .4; }
.arm-f { fill: none; stroke: var(--rust-lt); stroke-width: 1.4; opacity: .5; }

/* ==========================================================================
   KOLAM — the looped dot-grid drawing of South Indian thresholds, rendered
   on an engineering grid and drawn continuously.
   ========================================================================== */
.kolam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, transparent 26%, #000 88%);
  mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, transparent 26%, #000 88%);
}
.kolam svg { width: 100%; height: 100%; display: block; }
.kolam .kl { fill: none; stroke-width: 1.1; }
.kolam .kl-a { stroke: var(--violet); }
.kolam .kl-b { stroke: var(--ice); }
.kolam .kl-c { stroke: var(--sage); }
.kolam .kd { fill: var(--mist-dim); }

/* ==========================================================================
   TRICOLOUR ACCENTS
   ========================================================================== */
.scrollbar {
  background: linear-gradient(90deg, var(--ice) 0%, var(--violet) 52%, var(--cyan) 100%);
}
.brandmark__rule {
  background: linear-gradient(90deg, transparent 0%, var(--steel) 22%,
    var(--ice) 50%, var(--steel) 78%, transparent 100%);
}
.eyebrow::before {
  background: linear-gradient(90deg, var(--amber), var(--sage));
}



@media (max-width: 900px) {
  .bm-arm { display: none; }
  .kolam { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-ghost, .bm-arm { display: none; }
}

/* industrial arm — cast housings rather than sticks */


/* ==========================================================================
   TITLE BLOCK
   Indian drawing offices work to IS 696 and set out views in FIRST angle,
   unlike American practice. Putting the first-angle symbol on the page is a
   quieter and far more specific claim of origin than a flag is — any
   engineer who reads drawings will catch it immediately.
   ========================================================================== */
.titleblock {
  display: grid;
  grid-template-columns: auto 1px auto 1px auto;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--steel);
  max-width: max-content;
  margin: 42px auto 0;
  background: rgba(0,0,0,.5);
  font-family: var(--f-mono);
}
.titleblock > i { background: var(--steel); display: block; }
.titleblock__cell { padding: 14px 22px; display: flex; flex-direction: column; gap: 5px; }
.titleblock__cell b {
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
}
.titleblock__cell span {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.titleblock__cell em {
  font-style: normal;
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ice);
}
.titleblock__proj { align-items: center; justify-content: center; padding-inline: 26px; }
.titleblock__proj svg { width: 62px; height: 26px; display: block; }
.titleblock__proj svg * { fill: none; stroke: var(--ice); stroke-width: 1.1; }
.titleblock__proj svg .tb-dash { stroke-dasharray: 3 3; opacity: .6; }

@media (max-width: 760px) {
  .titleblock { grid-template-columns: 1fr; max-width: 100%; }
  .titleblock > i { height: 1px; width: 100%; }
  .titleblock__cell { align-items: center; text-align: center; }
}


/* ==========================================================================
   BRANDMARK — plotter reveal of the real artwork
   The logo image is never transformed. Only the clip that reveals it moves,
   so the mark's geometry is exactly the file we were given.
   ========================================================================== */
.bm { position: relative; width: min(1020px, 88vw); margin-inline: auto; }
.bm__svg { width: 100%; height: auto; display: block; overflow: visible; }
.bm-art { image-rendering: -webkit-optimize-contrast; }

.bm-rule { stroke: var(--steel); stroke-width: 1; }
.bm-tick { stroke: var(--ice); stroke-width: 1.3; opacity: .7; }
.bm-headline { stroke: var(--cyan); stroke-width: 1.2; opacity: .55; }
.bm-headbox { fill: var(--void); stroke: var(--cyan); stroke-width: 1.3; }

.ak-h { fill: none; stroke: var(--white); stroke-width: 4; }
.ak-l { fill: none; stroke: var(--ice); stroke-width: 2; opacity: .8; }
.ak-f { fill: none; stroke: var(--ice); stroke-width: 2.4; opacity: .55; }
.ak-d { fill: none; stroke: var(--cyan); stroke-width: 1.6; opacity: .5; stroke-dasharray: 10 6; }
.ak-o { fill: none; stroke: var(--amber); stroke-width: 4; }

/* ==========================================================================
   PAGE TEXTURES
   One per page, low opacity, chosen for what that page is about. Set with a
   class on <body>; the accent comes from --page.
   ========================================================================== */
body { position: relative; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* Home — engineering paper: fine grid over a coarse one */
body.tex-grid::after {
  background-image:
    linear-gradient(var(--steel-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-dim) 1px, transparent 1px),
    linear-gradient(rgba(159,182,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,182,196,.05) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 10%, transparent 75%);
}

/* Actuators — polar: concentric rings and radial spokes, because everything
   on that page turns about one axis */
body.tex-polar::after {
  background-image:
    repeating-radial-gradient(circle at 78% 22%, transparent 0 58px, rgba(217,138,78,.075) 58px 59px),
    repeating-conic-gradient(from 0deg at 78% 22%, rgba(217,138,78,.05) 0deg 0.35deg, transparent 0.35deg 15deg);
  mask-image: radial-gradient(circle at 78% 22%, #000 5%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 78% 22%, #000 5%, transparent 68%);
}

/* i-VISION — raster: scan lines and a detection lattice */
body.tex-raster::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(34,211,238,.06) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(34,211,238,.055) 1px, transparent 1px),
    linear-gradient(rgba(34,211,238,.055) 1px, transparent 1px);
  background-size: auto, 120px 120px, 120px 120px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}

/* Company — jaali: the pierced stone lattice, on a technical grid */
body.tex-lattice::after {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 21px, rgba(156,194,172,.08) 21px 22px, transparent 23px),
    radial-gradient(circle at 0% 0%,   transparent 21px, rgba(156,194,172,.06) 21px 22px, transparent 23px),
    radial-gradient(circle at 100% 100%, transparent 21px, rgba(156,194,172,.06) 21px 22px, transparent 23px),
    linear-gradient(90deg, var(--steel-dim) 1px, transparent 1px),
    linear-gradient(var(--steel-dim) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

/* Contact — isometric: the drawing convention for a part about to be made */
body.tex-iso::after {
  background-image:
    repeating-linear-gradient(30deg,  rgba(124,107,240,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-30deg, rgba(124,107,240,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg,  rgba(124,107,240,.04) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 68%);
}

/* ==========================================================================
   MODEL NAMES — TF60 and TF80 lead, everything else follows
   ========================================================================== */
.model {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.model b {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.035em;
  line-height: .88;
  color: var(--white);
  position: relative;
  padding-right: 4px;
}
.model b::after {
  content: "";
  position: absolute;
  left: 0; right: 4px; bottom: -8px;
  height: 3px;
  background: var(--page, var(--ice));
}
.model i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--page, var(--ice));
  padding-bottom: 4px;
}
.model--sm b { font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* model name inside running copy */
.mdl {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -.01em;
  color: var(--white);
}

@media (max-width: 900px) {
  body::after { opacity: .35; }
  }


/* HUD without the blinking indicator */
.rig__hud b { color: var(--white); font-weight: 600; letter-spacing: .2em; }
.rig__hud > span { display: none; }

/* ==========================================================================
   COLOUR IN MOTION
   The accents were sitting still. These put them to work — every one is tied
   to something structural rather than being colour for its own sake.
   ========================================================================== */

/* 1 — section eyebrow rule: the page accent runs along it, once, on entry */
.eyebrow::before {
  background: linear-gradient(90deg,
    transparent 0%, var(--page, var(--ice)) 22%, var(--white) 50%,
    var(--page, var(--ice)) 78%, transparent 100%);
  background-size: 220% 100%;
  animation: eyebrow-run 4.6s var(--ease) infinite;
}
@keyframes eyebrow-run {
  0%, 62%  { background-position: 120% 0; }
  84%, 100% { background-position: -20% 0; }
}

/* 2 — headline outline picks up the accent as it scrolls past */
.hl {
  -webkit-text-stroke-color: var(--page, var(--white));
  transition: -webkit-text-stroke-color .8s var(--ease);
}
.reveal .hl, .sec-head .hl { -webkit-text-stroke-color: var(--white); }
.is-inview .hl { -webkit-text-stroke-color: var(--page, var(--white)); }

/* 3 — card corner brackets arrive in the page accent, settle to white */
.card::before, .card::after { border-color: var(--page, var(--white)); }
.card:hover::before, .card:hover::after {
  border-color: var(--white);
  transition: opacity .35s var(--ease), transform .45s var(--ease),
              border-color .6s var(--ease) .15s;
}
/* and a hairline of accent creeps along the card's top edge on hover */
.card { position: relative; }
.card > .card__edge {
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 0;
  background: linear-gradient(90deg, var(--page, var(--ice)), transparent);
  transition: width .55s var(--ease);
  pointer-events: none;
}
.card:hover > .card__edge { width: 100%; }

/* 4 — spec rows light their value in the accent as you run down them */
.spec tr:hover td:last-child { color: var(--page, var(--white)); }

/* 5 — process steps: the left rule is the accent, and it fills downward */
.step::before { background: linear-gradient(180deg, var(--page, var(--white)), transparent); }

/* 6 — FAQ marker cycles through the technical accents as items open */
.faq__item:nth-child(3n+1) .faq__q::before,
.faq__item:nth-child(3n+1) .faq__q::after { background: var(--cyan); }
.faq__item:nth-child(3n+2) .faq__q::before,
.faq__item:nth-child(3n+2) .faq__q::after { background: var(--violet); }
.faq__item:nth-child(3n+3) .faq__q::before,
.faq__item:nth-child(3n+3) .faq__q::after { background: var(--amber); }
.faq__item.is-open .faq__q { color: var(--page, var(--sage)); }

/* 7 — the solid button carries an accent sweep instead of a grey one */
.btn--solid::after {
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--page) 55%, transparent), transparent);
}

/* 8 — nav underline in the page accent */
.nav__links a::after { background: var(--page, var(--white)); }

/* 9 — the marquee separators cycle the three technical accents */
.marquee__track span:nth-child(3n+1)::after { border-color: var(--cyan); }
.marquee__track span:nth-child(3n+2)::after { border-color: var(--violet); }
.marquee__track span:nth-child(3n+3)::after { border-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; background: var(--page, var(--ice)); }
}