/* ============================================================================
   Yong Heng Engineering Works Sdn. Bhd.
   The palette is sampled from the company's own logo file (their live site at
   yongheng.com.my/images/logo.png): brand red #E42028 over near-black ink. The
   red is reserved for the mark, the annotation layer and rules; it is never a
   button fill.
   ========================================================================= */

:root{
  /* --- ground and its reversal (two surfaces, nothing else) --- */
  --graphite-900:#0B0F12;
  --graphite-800:#0E1317;
  --graphite-700:#151C22;
  --graphite-600:#1E2831;
  --paper:#ECEDEF;
  --paper-2:#E0E3E6;

  /* --- ink --- */
  --ink:#131A21;
  --ink-2:#4F5C68;
  --ink-on-dark:#E8E6E1;
  --ink-2-on-dark:#98A3AC;

  /* --- rules --- */
  --rule:#CDD1D5;
  --rule-d:#23303A;

  /* --- the one accent, sampled from the company's own logo FILE ---
     #E74F35 was read off a photograph of the uniform embroidery and was wrong;
     the artwork itself is #E42028. That clears 3:1 on both grounds, so it is
     the brand red for the mark, rules and focus rings. TEXT needs 4.5:1, which
     the true hue cannot give on either ground, so each ground gets a variant of
     the same hue. The light variant is set against the DARKER of the two paper
     shades (#E0E3E6), where #CD1920 only reached 4.34:1. */
  --mark:#E42028;                 /* the logo's own red: graphics only */
  --mark-on-dark:#EA4D54;         /* text on graphite  — 5.06:1 */
  --mark-on-light:#BA171D;        /* text on paper 5.55:1, on paper-2 5.05:1 */
  --mark-soft:rgba(228,32,40,.38);
  --mark-ctx:var(--mark-on-light);

  /* --- type scale: 8 steps, largest/smallest ratio 6.0 --- */
  --fs-hero:clamp(34px,4.7vw,62px);
  --fs-h1:clamp(32px,4.4vw,52px);
  --fs-h2:clamp(26px,3.2vw,38px);
  --fs-h3:21px;
  --fs-lead:19px;
  --fs-base:17px;
  --fs-sm:15px;
  --fs-xs:14px;

  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--fs-base)/1.65 var(--f-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                     /* clip, never hidden: hidden kills sticky */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.u-mono{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------- grounds */
.ground-dark{background:var(--graphite-800);color:var(--ink-on-dark);--mark-ctx:var(--mark-on-dark)}
.ground-dark h1,.ground-dark h2,.ground-dark h3{color:#F1F3F5}
.ground-light{background:var(--paper);color:var(--ink);--mark-ctx:var(--mark-on-light)}
.ground-light-2{background:var(--paper-2);color:var(--ink);--mark-ctx:var(--mark-on-light)}
.section{padding:clamp(84px,11vw,158px) 0}
.section--tight{padding:clamp(58px,7.5vw,104px) 0}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:14px 0 auto;z-index:60;
  transition:transform .4s var(--ease);
}
.nav__bar{
  width:min(100% - 44px,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  padding:11px 12px 11px 18px;
  border:1px solid rgba(232,230,225,.16);
  border-radius:3px;
  background:rgba(11,15,18,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-scrolled .nav__bar{background:rgba(11,15,18,.9);border-color:rgba(232,230,225,.22)}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#F1F3F5;margin-right:auto}
.brand__mark{flex:none;width:auto;height:28px}
.brand__name{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.05em;line-height:1;white-space:nowrap}
.brand__thin{font-weight:400;color:var(--ink-2-on-dark)}
/* the client asked for the full registered name (feedback p1, p4): it is never
   hidden. On a phone it does not fit one line at 14px, so it wraps instead. */
@media (max-width:1120px){
  .brand{min-width:0;flex:1 1 auto}
  .brand__name{white-space:normal;line-height:1.22}
}

.nav__links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav__links a{
  display:block;padding:9px 14px;text-decoration:none;color:#D9D6D0;
  font-size:var(--fs-xs);letter-spacing:.02em;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--mark);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:#F1F3F5}

.nav__cta{
  display:inline-block;padding:10px 18px;text-decoration:none;
  border:1px solid rgba(232,230,225,.4);color:#F1F3F5;
  font-size:var(--fs-xs);letter-spacing:.04em;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.nav__cta:hover{border-color:var(--mark);background:rgba(228,32,40,.12)}

.nav__burger{
  display:none;width:42px;height:38px;margin-left:auto;padding:0;
  background:none;border:1px solid rgba(232,230,225,.28);border-radius:2px;cursor:pointer;
}
.nav__burger span{display:block;width:18px;height:1px;margin:4px auto;background:#F1F3F5;transition:.3s var(--ease)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1120px){
  .nav__burger{display:block}
  .nav__cta{display:none}
  .nav__links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px;border:1px solid rgba(232,230,225,.18);border-radius:3px;
    background:rgba(11,15,18,.96);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:.28s var(--ease);
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__links a{padding:14px 12px;font-size:var(--fs-sm)}
  .nav__links a::after{display:none}
}

/* ------------------------------------------------------- buttons & links */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  background:transparent;font-family:inherit;cursor:pointer;
  padding:15px 26px;text-decoration:none;
  border:1px solid currentColor;border-radius:2px;
  font-size:var(--fs-sm);letter-spacing:.03em;
  transition:gap .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--dark{color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:var(--paper)}
.btn--light{color:#F1F3F5}
.btn--light:hover{background:#EFF1F3;color:var(--graphite-800)}

.textlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--mark-soft);
  transition:border-color .25s var(--ease)
}
.textlink:hover{border-color:var(--mark)}
.textlink svg{transition:transform .25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* =========================================================== THE HERO
   The site's one scroll idea: a real tool photographed on white, knocked out
   and re-lit on graphite, with the annotation layer a toolmaker would draw
   over it arriving as you scroll. Nothing else on the site animates on scroll
   beyond a quiet fade-up.
   ==================================================================== */
.hero{position:relative;background:var(--paper);color:var(--ink);--mark-ctx:var(--mark-on-light)}
.hero__track{height:340vh}                         /* the scroll budget */
.hero__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(19,26,33,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,26,33,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(112% 88% at 50% 44%,#000 32%,transparent 78%);
  -webkit-mask-image:radial-gradient(112% 88% at 50% 44%,#000 32%,transparent 78%);
}
.hero__inner{
  position:relative;height:100%;display:grid;grid-template-rows:auto 1fr;
  gap:clamp(16px,2.6vh,34px);padding:clamp(96px,13vh,124px) 0 clamp(56px,8vh,76px);
}
.hero__stage{
  position:relative;width:min(100% - 44px,1060px);margin-inline:auto;
  aspect-ratio:1060/620;max-height:100%;min-height:0;
}
.hero__photo{
  position:absolute;inset:0;margin:auto;max-height:78%;width:auto;max-width:72%;
  filter:contrast(1.03);
}
.hero__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.hero__title{
  font-size:var(--fs-hero);font-weight:600;letter-spacing:-.032em;line-height:1.02;
  max-width:26ch;margin:0 auto;
  width:min(100% - 44px,var(--wrap));color:var(--ink);
}
.hero__title em{font-style:normal;color:var(--mark-on-light)}
.hero__cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;color:var(--ink-2);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .4s var(--ease);
}
.hero__cue i{display:block;width:1px;height:26px;background:linear-gradient(var(--mark-on-light),transparent)}

/* annotation layer */
.anno line,.anno path,.anno circle,.anno rect{vector-effect:non-scaling-stroke}
.anno__lead{stroke:var(--mark-on-light);stroke-width:1.1;fill:none}
.anno__tick{stroke:var(--mark-on-light);stroke-width:1.1}
.anno__ring{stroke:var(--mark-on-light);stroke-width:1.1;fill:none}
.anno__num{
  font-family:var(--f-mono);font-size:28px;font-weight:600;fill:var(--ink);letter-spacing:.02em;
}
.anno__label{
  font-family:var(--f-mono);font-size:14px;fill:var(--ink-2);
  letter-spacing:.12em;text-transform:uppercase;
}
.anno__g{opacity:0;transition:opacity .5s var(--ease)}
.anno__g.is-on{opacity:1}
.anno__g .anno__lead,.anno__g .anno__tick{
  stroke-dasharray:var(--len,240);stroke-dashoffset:var(--len,240);
  transition:stroke-dashoffset .75s var(--ease);
}
.anno__g.is-on .anno__lead,.anno__g.is-on .anno__tick{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .hero__track{height:auto}
  .hero__pin{position:static;height:auto;padding:150px 0 80px}
  .anno__g{opacity:1}
  .anno__g .anno__lead,.anno__g .anno__tick{stroke-dashoffset:0;transition:none}
  .hero__cue{display:none}
}
@media (max-width:760px){
  .hero__track{height:auto}
  .hero__pin{position:static;height:auto;padding:132px 0 72px}
  .hero__stage{aspect-ratio:4/3}
  .hero__svg{display:none}                 /* callouts become the spec list below */
  .hero__cue{display:none}
  .hero__inner{padding-top:0}
}

/* the same four numbers, as a plain list, for phones and no-JS */
.specs{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:680px){.specs{grid-template-columns:repeat(4,1fr)}}
.specs__i{background:var(--paper);padding:30px 26px}
.specs__n{font-family:var(--f-mono);font-size:var(--fs-h2);font-weight:600;color:var(--ink);line-height:1}
.specs__l{margin-top:12px;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
@media (min-width:761px){.specs--hero{display:none}}

/* ------------------------------------------------- section heading + bits */
.h-sec{font-size:var(--fs-h2);max-width:20ch;margin-bottom:clamp(34px,4vw,56px)}
.h-sec--tight{max-width:19ch;margin-bottom:clamp(30px,4vw,48px)}
.mt-l{margin-top:34px}
.mt-m{margin-top:30px}

/* ------------------------------------------------------- editorial split */
.split{display:grid;gap:clamp(34px,5vw,74px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
  .split--rev .split__media{order:2}
}
.split__media img{width:100%}
.split__body h2{font-size:var(--fs-h2);margin-bottom:22px;max-width:18ch}
.split__body p + p{margin-top:20px}
.split__body p{color:var(--ink-2);max-width:56ch}
.ground-dark .split__body p{color:var(--ink-2-on-dark)}
.split__body .textlink{margin-top:30px}

/* ------------------------------------------------------------- cta band */
.cta{text-align:center;display:grid;justify-items:center;gap:22px}
.cta h2{font-size:var(--fs-h1);max-width:22ch;line-height:1.06;text-wrap:balance}
.cta p{color:var(--ink-2);max-width:50ch}
.ground-dark .cta p{color:var(--ink-2-on-dark)}
.cta .btn{margin-top:10px}

/* ------------------------------------------------------------ full bleed */
.bleed{position:relative;min-height:clamp(420px,62vh,660px);display:grid;align-items:end;
  background-size:cover;background-position:center;color:#F4F6F7}
.bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,18,.30) 0%,rgba(11,15,18,.90) 100%)}
.bleed__body{position:relative;z-index:1;padding-block:clamp(40px,6vw,74px)}
.bleed__body p{font-family:var(--f-display);font-size:var(--fs-h2);font-weight:500;
  letter-spacing:-.02em;line-height:1.16;max-width:22ch}
.bleed__body .u-mono{display:block;color:rgba(244,246,247,.72);margin-bottom:18px}

/* ---------------------------------------------------------------- stepper */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--rule)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.steps--two{grid-template-columns:repeat(2,1fr)}}
.ground-dark .steps{background:var(--rule-d)}
.step{background:var(--paper);padding:clamp(32px,3.4vw,44px) clamp(28px,3vw,38px)}
.ground-dark .step{background:var(--graphite-800)}
.step--wide{grid-column:1/-1}
.step__n{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.18em;color:var(--mark-ctx)}
.step h3{font-size:var(--fs-h3);margin:16px 0 11px}
.step p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7;max-width:52ch}
.ground-dark .step p{color:var(--ink-2-on-dark)}

/* ------------------------------------------------------------- tool list */
.tools{border-top:1px solid var(--rule)}
.ground-dark .tools{border-color:var(--rule-d)}
.tool{
  display:grid;gap:26px;align-items:center;
  padding:clamp(34px,4.6vw,60px) 0;border-bottom:1px solid var(--rule);
}
.ground-dark .tool{border-color:var(--rule-d)}
@media (min-width:860px){.tool{grid-template-columns:88px .82fr 1.5fr;gap:48px}}
.tool__n{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--mark-ctx)}
.tool__body h3{font-size:var(--fs-h3);margin-bottom:13px}
.tool__body p{color:var(--ink-2);font-size:var(--fs-sm);max-width:46ch}
.ground-dark .tool__body p{color:var(--ink-2-on-dark)}
.tool__media img{width:100%}
.tool__media .plate{aspect-ratio:3/2;display:grid;place-items:center}
.tool__media .plate img{max-height:100%;width:auto;max-width:100%}

/* --------------------------------------------------------------- sectors */
.sectors{display:grid;gap:1px;background:var(--rule-d);border:1px solid var(--rule-d)}
@media (min-width:620px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.sectors{grid-template-columns:repeat(5,1fr)}}
.sector{background:var(--graphite-800);padding:30px 24px 34px;min-height:180px;
  display:grid;align-content:space-between;gap:26px}
.sector h3{font-size:var(--fs-h3);letter-spacing:-.01em}
.sector p{font-size:var(--fs-xs);color:var(--ink-2-on-dark);margin-top:14px}
.sector__i{width:26px;height:26px;stroke:var(--mark-ctx);fill:none;stroke-width:1.2}

/* ------------------------------------------------------------- page hero */
.phero{position:relative;background:var(--graphite-900);color:var(--ink-on-dark);
  padding:clamp(148px,17vw,216px) 0 clamp(54px,7vw,92px)}
.phero__media{position:absolute;inset:0;overflow:hidden}
.phero__media img{width:100%;height:100%;object-fit:cover;opacity:1}
/* ONE scrim, not two: stacked layers compound (0.62 over 0.95 is 0.98 effective)
   and that is what turned the team photograph grey. It is heavy under the copy
   on the left and near-clear on the right, so the photograph keeps its colour
   where there is nothing on top of it. */
.phero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(11,15,18,.97) 0%, rgba(11,15,18,.955) 46%,
    rgba(11,15,18,.68) 60%, rgba(11,15,18,.22) 78%, rgba(11,15,18,.06) 100%)}
@media (max-width:900px){
  /* On a phone the copy spans the full width, so there is no side of the frame
     left to open up — any scrim dark enough for the type is dark enough to grey
     the photograph. Stop overlapping them: the photograph gets a band of its
     own at full colour, and the words sit on solid ground underneath. */
  .phero{padding:96px 0 clamp(48px,8vw,76px);background:var(--graphite-900)}
  .phero__media{position:relative;inset:auto;height:clamp(220px,46vw,300px);
    margin-bottom:clamp(28px,6vw,44px)}
  /* the band is far wider than the photograph, so it shows a horizontal strip;
     people's heads sit in the upper part of these frames, so the strip does too */
  .phero__media img{object-position:50% 30%}
  .phero__media::after{background:linear-gradient(180deg,
    rgba(11,15,18,.46) 0%, rgba(11,15,18,.04) 46%, rgba(11,15,18,.30) 100%)}
}
.phero__body{position:relative}
.phero h1{font-size:var(--fs-h1);max-width:17ch;color:#F4F6F7}
.phero .u-mono{display:block;color:var(--mark-on-dark);margin-bottom:22px}
.phero p{margin-top:24px;font-size:var(--fs-lead);color:#C7CED4;max-width:54ch}

/* -------------------------------------------------------------- timeline */
.tl{border-top:1px solid var(--rule)}
.ground-dark .tl{border-color:var(--rule-d)}
.tl__i{display:grid;gap:8px;padding:26px 0;border-bottom:1px solid var(--rule)}
.ground-dark .tl__i{border-color:var(--rule-d)}
@media (min-width:700px){.tl__i{grid-template-columns:150px 1fr;gap:40px;align-items:baseline}}
.tl__y{font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.1em;color:var(--mark-ctx)}
.tl__t{font-size:var(--fs-base);color:var(--ink-2);max-width:60ch}
.ground-dark .tl__t{color:var(--ink-2-on-dark)}

/* ------------------------------------------------------------------ form */
.form{display:grid;gap:20px}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .f-wide{grid-column:1/-1}}
.f label{display:block;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2-on-dark);margin-bottom:9px}
.f input,.f select,.f textarea{
  width:100%;padding:14px 15px;font:400 var(--fs-base)/1.5 var(--f-body);
  color:#F1F3F5;background:var(--graphite-700);
  border:1px solid var(--rule-d);border-radius:2px;
  transition:border-color .25s var(--ease)
}
.f textarea{min-height:142px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--mark);outline:none}
.f--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:var(--fs-sm);color:var(--ink-2-on-dark);max-width:60ch}
.form__msg{font-size:var(--fs-sm);padding:14px 16px;border:1px solid var(--rule-d);display:none}
.form__msg.is-on{display:block}
.form__msg.is-ok{border-color:#2F7D52;color:#8FD7AC}
.form__msg.is-bad{border-color:var(--mark);color:#F0A091}

/* ------------------------------------------------------------- contacts */
.facts{display:grid;gap:1px;background:var(--rule-d);border:1px solid var(--rule-d)}
@media (min-width:640px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:var(--graphite-800);padding:28px 24px}
.fact .u-mono{display:block;color:var(--ink-2-on-dark);margin-bottom:12px}
.fact a,.fact p{font-size:var(--fs-base);color:#EDEFF1;text-decoration:none;line-height:1.5}
.fact a:hover{color:var(--mark-on-dark)}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--graphite-900);color:var(--ink-2-on-dark);padding:clamp(62px,7vw,92px) 0 0}
.footer__top{display:grid;gap:40px;padding-bottom:52px}
@media (min-width:840px){.footer__top{grid-template-columns:1.6fr 1fr 1fr}}
.footer .footer__h{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:#EDEFF1;font-weight:500;margin-bottom:18px}
.footer a{color:var(--ink-2-on-dark);text-decoration:none;display:block;padding:5px 0;font-size:var(--fs-sm)}
.footer a:hover{color:var(--mark-on-dark)}
.footer__blurb{max-width:40ch;font-size:var(--fs-sm);margin-top:20px}
.footer__line{padding:5px 0;font-size:var(--fs-sm)}
.footer__bottom{
  border-top:1px solid var(--rule-d);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-family:var(--f-mono);color:#6C7780;
}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
html:not(.has-js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --------------------------------------------------------------- skip nav */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);color:var(--ink);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ====================================================== PRODUCT PLATES
   Each studio render sits on a tile painted with that render's OWN backdrop
   (sampled from its rim), so the feathered edge has nothing to seam against.
   Trying to cut these out instead tore the photographer's contact shadow into
   a halo — the renders were lit for a light ground, so they are given one. */
.plate{display:block;border:1px solid var(--rule);overflow:hidden}
.ground-dark .plate{border-color:var(--rule-d)}
.plate img{width:100%;display:block}
.plate--pad{padding:clamp(10px,1.6vw,22px)}

/* ------------------------------------------------------- tool family grid */
.families{display:grid;gap:clamp(20px,2.4vw,30px)}
@media (min-width:760px){.families{grid-template-columns:repeat(3,1fr)}}
.family .plate{aspect-ratio:4/3;display:grid;place-items:center}
.family .plate img{max-height:100%;width:auto;max-width:100%}
.family h3{font-size:var(--fs-h3);margin:20px 0 9px}
.family p{color:var(--ink-2);font-size:var(--fs-sm);max-width:38ch}
.ground-dark .family p{color:var(--ink-2-on-dark)}
.family__n{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;
  color:var(--mark-ctx);display:block;margin-bottom:14px}

/* ------------------------------------------------------------ values grid */
.values{display:grid;gap:1px;background:var(--rule)}
.ground-dark .values{background:var(--rule-d)}
@media (min-width:640px){.values{grid-template-columns:repeat(2,1fr)}}
.value{background:var(--paper);padding:clamp(28px,3.4vw,44px) clamp(26px,3vw,40px)}
.ground-dark .value{background:var(--graphite-800)}
.ground-light-2 .value{background:var(--paper-2)}
.value h3{font-size:var(--fs-h3);margin-bottom:11px}
.value p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7;max-width:34ch}
.ground-dark .value p{color:var(--ink-2-on-dark)}

/* ------------------------------------------------- process, photograph-led */
.process{display:grid;gap:1px;background:var(--rule-d)}
@media (min-width:700px){.process{grid-template-columns:repeat(2,1fr)}}
.phase{background:var(--graphite-800);display:grid;grid-template-rows:auto 1fr}
.phase img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:contrast(1.04)}
.phase__c{padding:26px 28px 32px}
.phase__n{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--mark-on-dark)}
.phase h3{font-size:var(--fs-h3);margin:12px 0 9px}
.phase p{color:var(--ink-2-on-dark);font-size:var(--fs-sm)}

/* --------------------------------------------------------- name philosophy */
.glyphs{display:grid;gap:clamp(24px,3vw,44px)}
@media (min-width:720px){.glyphs{grid-template-columns:repeat(2,1fr)}}
.glyph{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;padding:8px 0}
.glyph__c{font-family:var(--f-display);font-size:clamp(56px,7vw,86px);font-weight:600;
  line-height:.86;color:var(--mark-ctx)}
.glyph h3{font-size:var(--fs-h3);margin-bottom:10px}
.glyph p{color:var(--ink-2);font-size:var(--fs-sm);max-width:34ch}
.ground-dark .glyph p{color:var(--ink-2-on-dark)}

/* ------------------------------------------------------------ contact list */
.clist{display:grid;gap:1px;background:var(--rule-d);border:1px solid var(--rule-d)}
@media (min-width:760px){.clist{grid-template-columns:repeat(3,1fr)}}
.citem{background:var(--graphite-800);padding:26px 24px 30px}
.citem .u-mono{display:block;color:var(--ink-2-on-dark);margin-bottom:14px}
.citem a,.citem p{display:block;font-size:var(--fs-base);color:#EDEFF1;
  text-decoration:none;line-height:1.55}
.citem a:hover{color:var(--mark-on-dark)}
.citem small{display:block;font-size:var(--fs-xs);color:var(--ink-2-on-dark);margin-top:2px}

/* --------------------------------------------------------------- pull line */
.pull{font-family:var(--f-display);font-size:var(--fs-h2);font-weight:500;
  letter-spacing:-.02em;line-height:1.18;max-width:24ch}

/* the company's own lockup, reversed for the graphite footer */
.footer__logo{width:min(178px,58%);height:auto;margin-bottom:10px}

/* ================================================================ FILM */
.film{padding:clamp(64px,8vw,112px) 0}
.film__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px 28px;margin-bottom:clamp(22px,3vw,34px)}
.film__head .h-sec{margin-bottom:0}
.film__head .u-mono{color:var(--ink-2-on-dark)}
.film__frame{position:relative;border:1px solid var(--rule-d);background:#000;aspect-ratio:16/9}
.film__frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}

/* ============================================================ NEWSROOM */
.news{display:grid;gap:clamp(22px,2.6vw,34px)}
@media (min-width:860px){.news{grid-template-columns:.78fr 1fr 1fr;align-items:start}}
.news__item figure{margin:0}
.news__item .plate{background:#fff}
.news__item img{width:100%;height:auto}
.news__item .u-mono{display:block;color:var(--mark-ctx);margin:18px 0 8px}
.news__item h3{font-size:var(--fs-h3);margin-bottom:9px}
.news__item p{color:var(--ink-2);font-size:var(--fs-sm);max-width:44ch}

/* ============================================= ABOUT HERO, WHOLE TEAM
   Feedback p4: the team must be seen in full. Behind a scrim and cover-cropped
   to the hero box, six of nine heads were cut at 1440. The photograph gets its
   own column here, uncropped and uncovered; the words sit on solid ground. */
.phero--team{padding-bottom:clamp(54px,7vw,92px)}
.phero--team .phero__media{display:none}
.phero--team .phero__body{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:980px){.phero--team .phero__body{grid-template-columns:.9fr 1.1fr}}
.phero__team{margin:0;border:1px solid var(--rule-d)}
.phero__team img{width:100%;height:auto;display:block}

/* ============================================ MULTI-STATION CALLOUTS
   Feedback p2: the client named the three tools in this render. Callouts sit
   under the image in the drawing language, one per station, aligned to it. */
.stations{margin:0}
.stations__labels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stations__labels span{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2-on-dark);padding-top:12px;
  border-top:1px solid var(--mark);line-height:1.4}
.ground-light .stations__labels span,.ground-light-2 .stations__labels span{color:var(--ink-2)}
.ground-dark .news__item p{color:var(--ink-2-on-dark)}
.ground-dark .news__item .plate{border-color:var(--rule-d)}