/* ============================================================================
   Yong Heng Engineering Works Sdn Bhd
   Palette is taken from the company logo: the dark navy of the YH monogram and
   the orange-red of the toothed arc. The orange-red is reserved for 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 --- */
  --navy:#233646;          /* logo dark */
  --ink:#131A21;
  --ink-2:#4F5C68;
  --ink-on-dark:#E8E6E1;
  --ink-2-on-dark:#98A3AC;

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

  /* --- the one accent: the orange-red of the gear in the logo --- */
  --mark:#E74F35;                 /* on graphite */
  --mark-deep:#C63D22;            /* on paper: #E74F35 only reaches 2.8:1 there */
  --mark-soft:rgba(231,79,53,.38);
  --mark-ctx:var(--mark-deep);    /* whichever of the two suits the ground */

  /* --- 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)}
.ground-dark h1,.ground-dark h2,.ground-dark h3{color:#F1F3F5}
.ground-light{background:var(--paper);color:var(--ink);--mark-ctx:var(--mark-deep)}
.ground-light-2{background:var(--paper-2);color:var(--ink);--mark-ctx:var(--mark-deep)}
.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__arc{flex:none;width:26px;height:26px}
.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)}
@media (max-width:520px){.brand__thin{display:none}}

.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(231,79,53,.1)}

.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:920px){
  .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-deep)}
.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-deep)}
.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-deep),transparent)}

/* annotation layer */
.anno line,.anno path,.anno circle,.anno rect{vector-effect:non-scaling-stroke}
.anno__lead{stroke:var(--mark-deep);stroke-width:1.1;fill:none}
.anno__tick{stroke:var(--mark-deep);stroke-width:1.1}
.anno__ring{stroke:var(--mark-deep);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:.30}
.phero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,18,.94),rgba(11,15,18,.82))}
.phero__body{position:relative}
.phero h1{font-size:var(--fs-h1);max-width:17ch;color:#F4F6F7}
.phero .u-mono{display:block;color:var(--mark);margin-bottom:22px}
.phero p{margin-top:24px;font-size:var(--fs-lead);color:#C7CED4;max-width:54ch}

/* ---------------------------------------------------------------- people */
.people{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:700px){.people{grid-template-columns:repeat(2,1fr)}}
.person img{width:100%;filter:grayscale(1) contrast(1.05)}
.person__c{padding-top:20px;border-top:1px solid var(--rule);margin-top:20px}
.ground-dark .person__c{border-color:var(--rule-d)}
.person h3{font-size:var(--fs-h3)}
.person .u-mono{display:block;color:var(--mark-ctx);margin-top:9px}

/* -------------------------------------------------------------- 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)}

/* ---------------------------------------------------------------- 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)}
.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)}
.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)}
.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}