/* ==========================================================================
   LEADER GATE 2.0
   Ground, ink and orange from the company's own 2026 portfolio deck.
   Satoshi throughout. Display type set in caps — minimal, structural.
   ========================================================================== */

@font-face{font-family:Satoshi;src:url(../fonts/satoshi-400.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-900.woff2) format('woff2');font-weight:900;font-display:swap;font-style:normal}

:root{
  /* The page ground is pure white. --cream was #FDF3EF, a warm off-white with
     an orange cast that tinted every section; --cream-deep was #F8E7DE, which
     was orange enough to read as a colour. The second ground stays — the site
     needs two levels so a white card still reads on a section — but it is a
     neutral now rather than a tint of the brand. */
  --cream:#FFFFFF;
  --cream-deep:#F4F3F1;
  --white:#FFFFFF;
  --ink:#151210;
  --ink-2:#221C18;
  --body:#5A4E45;
  --muted:#9A8D84;
  /* hairlines were warm to match the old ground; neutral to match the new */
  --line:#E4E2DF;
  --line-soft:#EFEDEA;

  --orange:#F36300;
  --orange-deep:#D45300;

  --font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --gut:clamp(20px,4.4vw,64px);
  --maxw:1340px;
  --r:4px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 6px rgba(21,18,16,.04),0 22px 54px -26px rgba(21,18,16,.24);
  --shadow-lift:0 4px 12px rgba(21,18,16,.06),0 40px 80px -34px rgba(21,18,16,.36);
}

.lg2 *,.lg2 *::before,.lg2 *::after{box-sizing:border-box}
.lg2{
  font-family:var(--font);background:var(--cream);color:var(--body);
  font-size:16.5px;line-height:1.62;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.lg2 h1,.lg2 h2,.lg2 h3,.lg2 h4,.lg2 p,.lg2 figure,.lg2 ul,.lg2 dl,.lg2 dd{margin:0;padding:0}
.lg2 ul{list-style:none}
.lg2 img{display:block;max-width:100%}
.lg2 a{color:inherit;text-decoration:none}
.lg2 button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.lg2 :focus-visible{outline:2.5px solid var(--orange);outline-offset:4px;border-radius:3px}

.lg-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lg-sec{padding-block:clamp(76px,9.5vw,148px)}

/* ==========================================================================
   DISPLAY TYPE — caps. Light line, then heavy orange line.
   ========================================================================== */
.lg-h1,.lg-h2{
  color:var(--ink);font-weight:400;text-transform:uppercase;
  line-height:.98;letter-spacing:-.018em;text-wrap:balance;
}
.lg-h1{font-size:clamp(38px,5.6vw,80px)}
.lg-h2{font-size:clamp(29px,4vw,58px)}
.lg-h1 strong,.lg-h2 strong{display:block;font-weight:900;color:var(--orange);letter-spacing:-.028em}
.lg-h3{
  font-size:clamp(19px,1.7vw,23px);font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.14;
}

.lg-label{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.lg-lede{font-size:clamp(16px,1.45vw,18px);color:var(--body);max-width:52ch;margin-top:24px}

/* ---------- buttons ---------- */
.lg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:16px 30px;border-radius:100px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .55s var(--ease),background .3s,color .3s,box-shadow .55s var(--ease),border-color .3s;
}
.lg-btn svg{width:15px;height:15px;flex:none;transition:transform .55s var(--ease)}
.lg-btn:hover svg{transform:translateX(5px)}
.lg2 .lg-btn--solid{background:var(--orange);color:#fff;box-shadow:0 10px 22px -16px rgba(243,99,0,.38)}
.lg2 .lg-btn--solid:hover{background:var(--orange-deep);transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(243,99,0,.44)}
.lg2 .lg-btn--line{border:1.5px solid var(--line);color:var(--ink)}
.lg2 .lg-btn--line:hover{border-color:var(--ink);transform:translateY(-3px)}
.lg2 .lg-btn--ghost{border:1.5px solid rgba(255,255,255,.32);color:#fff}
.lg2 .lg-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}

/* ==========================================================================
   HEADER — floating bar, nav with a sliding indicator
   ========================================================================== */
.lg-head{position:fixed;inset:18px 0 auto;z-index:120;padding-inline:var(--gut);transition:transform .65s var(--ease)}
.lg-head__bar{
  max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;gap:26px;
  padding:11px 12px 11px 22px;border-radius:100px;
  background:rgba(253,243,239,.8);border:1px solid rgba(235,221,213,.85);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  transition:background .45s,box-shadow .55s var(--ease);
}
.lg-head.is-stuck .lg-head__bar{background:rgba(253,243,239,.95);box-shadow:0 12px 40px -20px rgba(21,18,16,.44)}
.lg-head.is-hidden{transform:translateY(-150%)}
.lg-brand{display:flex;align-items:center;flex:none}
.lg-brand img{height:34px;width:auto}

/* nav: a pill glides under whichever item you point at */
.lg-nav{position:relative;display:flex;gap:2px;margin-left:auto}
.lg-nav__pill{
  position:absolute;top:0;left:0;height:100%;border-radius:100px;
  background:rgba(21,18,16,.06);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s;
}
.lg-nav.is-live .lg-nav__pill{opacity:1}
/* Scoped to the top-level link only. These were .lg-nav a, which also caught
   every anchor inside the products mega-menu — the second span in each item is
   its text block, and the label-swap rule below parks that absolutely at
   opacity 0, so the menu rendered as thumbnails with no words. */
.lg-nav__item > a{
  position:relative;z-index:1;display:block;padding:11px 18px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);overflow:hidden;
}
/* the label lifts away and a copy rises to replace it */
.lg-nav__item > a span{display:block;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.lg-nav__item > a span+span{position:absolute;left:18px;right:18px;top:11px;transform:translateY(120%);opacity:0;color:var(--ink)}
.lg-nav__item > a:hover span:first-child{transform:translateY(-120%);opacity:0}
.lg-nav__item > a:hover span+span{transform:translateY(0);opacity:1}

.lg-head__cta{flex:none}
.lg-head__cta .lg-btn{min-height:46px;padding:13px 24px;font-size:11.5px}
.lg-burger{display:none;width:46px;height:46px;border-radius:100px;place-items:center;border:1.5px solid var(--line)}
.lg-burger svg{width:18px;height:18px}

/* ==========================================================================
   HERO
   ========================================================================== */
.lg-hero{position:relative;height:100svh;min-height:620px;max-height:960px}
.lg-hero__sticky{position:sticky;top:0;height:100svh;min-height:620px;max-height:960px;display:grid;place-items:center;overflow:hidden}
.lg-hero__media{position:absolute;inset:0;overflow:hidden;transform-origin:50% 42%;will-change:transform,border-radius}
.lg-hero__media img,.lg-hero__media video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.lg-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(9,6,5,.92) 0%,rgba(9,6,5,.76) 30%,rgba(9,6,5,.34) 60%,rgba(9,6,5,.2) 100%),
    linear-gradient(180deg,rgba(9,6,5,.5) 0%,transparent 26%,transparent 60%,rgba(9,6,5,.8) 100%);
}
.lg-hero__inner{position:relative;z-index:2;width:100%;padding-inline:var(--gut);will-change:transform,opacity}
.lg-hero__inner .lg-wrap{padding-inline:0}
.lg-hero .lg-label{color:rgba(255,255,255,.68)}
.lg-hero__title{
  color:#fff;font-weight:400;text-transform:uppercase;
  font-size:clamp(36px,5.3vw,76px);line-height:.98;letter-spacing:-.02em;max-width:15ch;
}
.lg-hero__title strong{display:block;font-weight:900;color:#fff;letter-spacing:-.03em}
.lg-hero__lede{color:rgba(255,255,255,.84);font-size:clamp(15.5px,1.4vw,18px);max-width:44ch;margin-top:24px}
.lg-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.lg-hero__foot{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.lg-scrollcue{display:flex;align-items:center;gap:11px}
.lg-scrollcue i{display:block;width:1px;height:28px;background:rgba(255,255,255,.34);position:relative;overflow:hidden}
.lg-scrollcue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ==========================================================================
   STATS — counters that actually count
   ========================================================================== */
.lg-stats{background:var(--ink);position:relative;z-index:3}
.lg-stats__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.lg-stat{padding:clamp(40px,5vw,68px) clamp(20px,3vw,44px);border-right:1px solid rgba(255,255,255,.09);text-align:center}
.lg-stat:last-child{border-right:none}
.lg-stat__n{
  font-weight:900;color:var(--orange);line-height:1;display:block;
  font-size:clamp(44px,6vw,86px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.lg-stat__l{
  display:block;margin-top:14px;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
}

/* ==========================================================================
   CLIENTS — a controlled grid, not a soup of logos
   ========================================================================== */
.lg-clients{background:var(--white)}
.lg-clients__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(30px,3.4vw,46px)}
.lg-clients__grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
}
.lg-client{
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  aspect-ratio:16/9;display:grid;place-items:center;padding:16px 22px;
  transition:background .5s var(--ease);
}
.lg-client:hover{background:var(--cream)}
.lg-client img{
  max-height:66%;max-width:82%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.52;
  transition:filter .55s var(--ease),opacity .55s var(--ease),transform .55s var(--ease);
}
/* no transform: the logos do not move, on scroll or under the pointer */
.lg-client:hover img{filter:grayscale(0);opacity:1}

/* ==========================================================================
   INTRO
   ========================================================================== */
.lg-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:start}
.lg-facts{display:grid;border-top:1px solid var(--line);margin-top:32px}
.lg-fact{
  display:flex;gap:20px;align-items:baseline;padding:19px 4px;
  border-bottom:1px solid var(--line-soft);transition:padding-left .5s var(--ease);
}
.lg-fact:hover{padding-left:14px}
.lg-fact dt{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);min-width:116px;flex:none;
}
.lg-fact dd{font-size:15.5px;color:var(--ink);font-weight:500}

/* ==========================================================================
   CAPABILITIES — an index. Hovering a row floats its photograph.
   ========================================================================== */
.lg-caps{background:var(--cream-deep)}
.lg-caps__head{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;margin-bottom:clamp(34px,4vw,56px)}
.lg-caps__list{position:relative;border-top:1px solid rgba(21,18,16,.13)}
.lg-cap{
  position:relative;display:grid;grid-template-columns:62px 1fr auto 30px;
  gap:20px;align-items:center;padding:clamp(16px,1.6vw,22px) 8px;
  border-bottom:1px solid rgba(21,18,16,.11);
  transition:padding-left .6s var(--ease),background .5s var(--ease);
}
.lg-cap:hover{padding-left:22px;background:rgba(255,255,255,.55)}
.lg-cap__n{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .45s;
}
.lg-cap:hover .lg-cap__n{color:var(--orange)}
.lg-cap__name{
  font-size:clamp(16px,1.75vw,25px);font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.14;transition:color .45s;
}
.lg-cap:hover .lg-cap__name{color:var(--orange)}
.lg-cap__tag{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.lg-cap__go{width:15px;height:15px;color:var(--orange);opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .55s var(--ease)}
.lg-cap:hover .lg-cap__go{opacity:1;transform:none}
.lg-cap__new{
  display:inline-block;margin-left:12px;vertical-align:2px;
  font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--orange);padding:4px 9px;border-radius:100px;
}

/* the photograph that follows the pointer */
.lg-peek{
  position:fixed;top:0;left:0;z-index:60;width:290px;aspect-ratio:4/3;
  border-radius:10px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
  box-shadow:0 30px 70px -26px rgba(21,18,16,.6);
}
.lg-peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lg-peek img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   WORK
   ========================================================================== */
.lg-work{background:var(--ink);color:rgba(255,255,255,.7)}
.lg-work .lg-h2{color:#fff}
.lg-work .lg-h2 strong{color:var(--orange)}
.lg-work .lg-label{color:rgba(255,255,255,.42)}
.lg-work .lg-lede{color:rgba(255,255,255,.62)}
.lg-work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(34px,4.2vw,58px)}
.lg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.lg-tile{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink-2);grid-column:span 2;aspect-ratio:4/3.1;
}
.lg-tile--wide{grid-column:span 4;aspect-ratio:2.6/1}
.lg-tile img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.4s var(--ease-out);will-change:transform;
}
.lg-tile:hover img{transform:scale(1.08)}
.lg-tile__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(9,6,5,.5) 70%,rgba(9,6,5,.94) 100%);
  opacity:0;transition:opacity .75s var(--ease);
}
.lg-tile:hover .lg-tile__veil{opacity:1}
.lg-tile__meta{
  display:block;position:absolute;left:0;right:0;bottom:0;padding:26px 28px;
  transform:translateY(16px);opacity:0;
  transition:transform .75s var(--ease),opacity .6s var(--ease);
}
.lg-tile:hover .lg-tile__meta{transform:none;opacity:1}
.lg-tile__cat{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}
.lg-tile__name{display:block;font-size:clamp(16px,1.5vw,21px);font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:-.014em;line-height:1.16}
.lg-tile__spec{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:7px}
.lg-work__more{display:flex;justify-content:center;margin-top:clamp(36px,4vw,58px)}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.lg-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.lg-step{padding:34px 28px 30px;border-right:1px solid var(--line-soft);position:relative}
.lg-step:last-child{border-right:none}
.lg-step::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--orange);transition:width .8s var(--ease)}
.lg-step:hover::after{width:100%}
.lg-step__n{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--orange);margin-bottom:18px}
.lg-step h3{margin-bottom:11px}
.lg-step p{font-size:14.5px;color:var(--body);line-height:1.6}

/* ==========================================================================
   SECTORS
   ========================================================================== */
.lg-sectors{display:flex;flex-wrap:wrap;gap:9px}
.lg-sector{
  padding:12px 22px;min-height:46px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:100px;background:var(--white);
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--body);
  transition:border-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.lg-sector:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-3px)}

/* ==========================================================================
   CTA
   ========================================================================== */
.lg-cta{background:var(--cream-deep)}
.lg-cta__inner{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);padding:clamp(44px,6vw,88px)}
.lg-cta__inner::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 88% 108%,rgba(243,99,0,.19),transparent 58%)}
.lg-cta__grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center}
.lg-cta .lg-h2{color:#fff}
.lg-cta .lg-h2 strong{color:var(--orange)}
.lg-cta p{color:rgba(255,255,255,.68);margin-top:18px;max-width:40ch;font-size:16.5px}
.lg-cta__actions{display:flex;flex-direction:column;gap:11px}

/* ==========================================================================
   FOOTER — one masthead, then aligned columns
   ========================================================================== */
.lg-foot{background:var(--ink);color:rgba(255,255,255,.62);padding-block:clamp(56px,6vw,92px) 30px}
.lg-foot__top{
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid rgba(255,255,255,.1);
}
.lg-foot__say{
  color:#fff;font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,48px);line-height:1;letter-spacing:-.02em;
}
.lg-foot__say strong{display:block;font-weight:900;color:var(--orange)}
.lg-foot__actions{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.lg-foot__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,56px);padding-block:clamp(40px,5vw,62px)}
.lg-foot h4{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:22px}
.lg-foot__brand img{height:36px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1);opacity:.92}
.lg-foot__brand p{font-size:14.5px;max-width:32ch;line-height:1.65}
.lg-foot ul{display:flex;flex-direction:column;gap:13px}
.lg-foot__cols a{font-size:14.5px;color:rgba(255,255,255,.64);transition:color .4s var(--ease),padding-left .5s var(--ease)}
.lg-foot__cols a:hover{color:#fff;padding-left:6px}
.lg-foot address{font-style:normal;font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.64)}
.lg-foot address strong{display:block;color:#fff;font-weight:700;margin-bottom:8px;font-size:12.5px;letter-spacing:.06em}
.lg-foot__bot{
  padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.36);
}
.lg-foot__social{display:flex;gap:9px}
.lg-foot__social a{
  width:38px;height:38px;border-radius:100px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.lg-foot__social a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}
.lg-foot__social svg{width:16px;height:16px}

/* ==========================================================================
   MOTION — rests visible; JS arms it
   ========================================================================== */
.lg-armed{opacity:0;transform:translateY(28px)}
.lg-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.15s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .lg2 *,.lg2 *::before,.lg2 *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;
  }
  .lg-armed{opacity:1 !important;transform:none !important}
  .lg-scrollcue i::after{animation:none}
  .lg-peek{display:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .lg-clients__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1080px){
  .lg-nav{display:none}
  .lg-burger{display:grid}
  .lg-intro__grid,.lg-cta__grid,.lg-foot__top{grid-template-columns:1fr}
  .lg-foot__actions{justify-content:flex-start}
  .lg-foot__cols{grid-template-columns:1fr 1fr}
  .lg-steps{grid-template-columns:1fr 1fr}
  .lg-step:nth-child(2){border-right:none}
  .lg-step:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .lg-tile,.lg-tile--wide{grid-column:span 3;aspect-ratio:4/3}
  .lg-peek{display:none}
}
@media (max-width:720px){
  .lg-head{inset:12px 0 auto}
  .lg-head__bar{padding:9px 10px 9px 16px}
  .lg-head__cta{display:none}
  .lg-stats__grid{grid-template-columns:1fr}
  .lg-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.09);padding-block:34px}
  .lg-stat:last-child{border-bottom:none}
  .lg-clients__grid{grid-template-columns:repeat(2,1fr)}
  .lg-clients__head,.lg-work__head,.lg-caps__head{flex-direction:column;align-items:flex-start;gap:18px}
  .lg-grid{grid-template-columns:1fr;gap:12px}
  .lg-tile,.lg-tile--wide{grid-column:span 1;aspect-ratio:4/3.2}
  .lg-tile__veil{opacity:1}
  .lg-tile__meta{transform:none;opacity:1;padding:20px}
  .lg-steps{grid-template-columns:1fr}
  .lg-step{border-right:none;border-bottom:1px solid var(--line-soft)}
  .lg-cap{grid-template-columns:44px 1fr;gap:12px}
  .lg-cap__tag,.lg-cap__go{display:none}
  .lg-foot__cols{grid-template-columns:1fr}
  .lg-hero{height:94svh}.lg-hero__sticky{height:94svh}
  .lg-hero__foot span:last-child{display:none}
}

/* ==========================================================================
   PASS 2 — kill the leaked theme markup, tighten the page, colour the logos
   ========================================================================== */

/* Printec dumps a login form, a mobile nav and an overlay into wp_footer.
   The parent theme's CSS normally hides them; we dropped that CSS, so they
   spilled onto the page. Not needed on this template. */
.lg2 .account-wrap,
.lg2 .printec-mobile-nav,
.lg2 .printec-overlay,
.lg2 .menu-scroll-mobile{display:none !important}

/* --- air out of the page: sections were far too tall for the content --- */
.lg-sec{padding-block:clamp(54px,6vw,96px)}
.lg-clients__head,.lg-work__head,.lg-caps__head{margin-bottom:clamp(24px,2.6vw,38px)}
.lg-lede{margin-top:18px}
.lg-label{margin-bottom:16px}
.lg-facts{margin-top:24px}
.lg-fact{padding:15px 4px}

/* --- clients: full colour, denser, no dead space in the cells --- */
.lg-clients__grid{grid-template-columns:repeat(7,1fr)}
.lg-client{aspect-ratio:16/8;padding:14px 18px}
.lg-client img{filter:none;opacity:.94;max-height:74%;max-width:88%}
.lg-client:hover img{filter:none;opacity:1;transform:scale(1.07)}

/* ==========================================================================
   STATS — a slab that breaks the seam between two sections,
   with digits that roll like a mechanical counter
   ========================================================================== */
.lg-stats{background:transparent;margin-block:0;padding:0}
.lg-stats .lg-wrap{padding-inline:var(--gut) !important}
.lg-stats__slab{
  position:relative;z-index:4;margin-top:clamp(-96px,-7vw,-56px);
  background:var(--ink);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(21,18,16,.65);
}
.lg-stats__slab::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 160% at 12% 0%,rgba(243,99,0,.15),transparent 62%);
}
.lg-stats__grid{position:relative;grid-template-columns:repeat(3,1fr)}
.lg-stat{padding:clamp(30px,3.4vw,48px) clamp(18px,2.6vw,38px);text-align:left}
.lg-stat__n{font-size:clamp(40px,5vw,74px);display:flex;align-items:baseline;gap:1px}
.lg-stat__l{margin-top:8px;letter-spacing:.2em;font-size:10.5px}

/* each digit is its own reel */
.lg-reel{display:inline-block;height:1em;overflow:hidden;vertical-align:baseline}
.lg-reel__strip{display:block;will-change:transform}
.lg-reel__strip span{display:block;height:1em;line-height:1}

/* ==========================================================================
   CAPABILITIES — a mosaic, not a numbered list.
   Density is the point: it should look like a company that does a lot.
   ========================================================================== */
.lg-caps{background:var(--cream-deep)}
.lg-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}

.lg-mtile{
  position:relative;overflow:hidden;border-radius:14px;
  background:var(--ink-2);grid-column:span 3;aspect-ratio:1/1;
  display:block;isolation:isolate;
}
.lg-mtile--hero{grid-column:span 6;aspect-ratio:16/10}
.lg-mtile--wide{grid-column:span 6;aspect-ratio:16/7}
.lg-mtile--half{grid-column:span 4;aspect-ratio:4/3}

.lg-mtile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.5s var(--ease-out),filter .8s var(--ease);
}
.lg-mtile:hover img{transform:scale(1.1)}
.lg-mtile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,6,5,.08) 0%,rgba(9,6,5,.34) 46%,rgba(9,6,5,.88) 100%);
  transition:background .7s var(--ease);
}
.lg-mtile:hover::after{background:linear-gradient(180deg,rgba(9,6,5,.2) 0%,rgba(9,6,5,.5) 46%,rgba(9,6,5,.94) 100%)}
.lg-mtile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 19px}
.lg-mtile--hero .lg-mtile__body{padding:30px 32px 28px}
.lg-mtile__name{
  display:block;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(13px,1.15vw,17px);letter-spacing:-.008em;line-height:1.16;
}
.lg-mtile--hero .lg-mtile__name{font-size:clamp(20px,2.2vw,32px)}
.lg-mtile__sub{
  display:block;color:rgba(255,255,255,.66);font-size:12.5px;margin-top:7px;
  max-width:36ch;opacity:0;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .65s var(--ease);
}
.lg-mtile:hover .lg-mtile__sub{opacity:1;transform:none}
.lg-mtile--hero .lg-mtile__sub{opacity:1;transform:none;font-size:14px}
.lg-mtile__flag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--orange);padding:5px 11px;border-radius:100px;
}

/* compact text-only chips fill the gaps and carry the long tail of services */
.lg-mchip{
  grid-column:span 3;display:flex;align-items:center;
  padding:16px 18px;border-radius:14px;background:var(--white);
  border:1px solid rgba(21,18,16,.07);
  font-size:13px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.2;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.lg-mchip:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}

/* ==========================================================================
   WORK — denser mosaic, and the images drift as you scroll
   ========================================================================== */
.lg-grid{gap:10px}
.lg-tile{border-radius:14px}
.lg-tile__meta{padding:22px 24px}
.lg-tile img{transform:scale(1.14);will-change:transform}
.lg-tile:hover img{transform:scale(1.19)}

/* sectors: tighter */
.lg-sector{padding:10px 18px;min-height:42px;font-size:11px}

@media (max-width:1080px){
  .lg-clients__grid{grid-template-columns:repeat(4,1fr)}
  .lg-mtile,.lg-mchip{grid-column:span 6}
  .lg-mtile--hero,.lg-mtile--wide,.lg-mtile--half{grid-column:span 12}
  .lg-stats__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .lg-clients__grid{grid-template-columns:repeat(3,1fr)}
  .lg-mtile,.lg-mchip,.lg-mtile--hero,.lg-mtile--wide,.lg-mtile--half{grid-column:span 12}
  .lg-stats__slab{margin-top:-40px}
  .lg-stats__grid{grid-template-columns:1fr}
  .lg-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .lg-stat:last-child{border-bottom:none}
  .lg-mtile__sub{opacity:1;transform:none}
}

/* mosaic sizing: explicit row spans so tiles never stretch out of ratio */
.lg-mosaic{grid-auto-rows:clamp(92px,8.4vw,146px)}
.lg-mtile,.lg-mchip{aspect-ratio:auto}
.lg-mtile--hero{grid-column:span 6;grid-row:span 3}
.lg-mtile--t33{grid-column:span 3;grid-row:span 3}
.lg-mtile--t42{grid-column:span 4;grid-row:span 2}
.lg-mtile--t32{grid-column:span 3;grid-row:span 2}
.lg-mtile--t62{grid-column:span 6;grid-row:span 2}
.lg-mchip{grid-column:span 3;grid-row:span 1}
@media (max-width:1080px){
  .lg-mtile--hero,.lg-mtile--t62{grid-column:span 12;grid-row:span 3}
  .lg-mtile--t33,.lg-mtile--t42,.lg-mtile--t32{grid-column:span 6;grid-row:span 2}
  .lg-mchip{grid-column:span 6}
}
@media (max-width:720px){
  .lg-mtile--hero,.lg-mtile--t62,.lg-mtile--t33,.lg-mtile--t42,.lg-mtile--t32{grid-column:span 12;grid-row:span 2}
  .lg-mchip{grid-column:span 12}
}

/* ==========================================================================
   PASS 3 — wider canvas, bigger photographs, captions off the images
   ========================================================================== */

/* the page was floating in the middle of a wide screen */
:root{--maxw:1660px;--gut:clamp(16px,2.6vw,46px)}

/* --- mosaic: the photograph is the object; the label sits under it --- */
.lg-mosaic{gap:14px;grid-auto-rows:clamp(104px,9.6vw,182px)}

.lg-mtile{
  display:flex;flex-direction:column;gap:12px;
  background:transparent;border-radius:0;overflow:visible;aspect-ratio:auto;
}
.lg-mtile__pic{
  position:relative;flex:1;min-height:0;overflow:hidden;
  border-radius:14px;background:var(--ink-2);
}
.lg-mtile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.6s var(--ease-out);
}
.lg-mtile:hover img{transform:scale(1.1)}

/* a whisper of shade at the foot of the frame, not a blanket over it */
.lg-mtile::after{content:none}
.lg-mtile__pic::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(9,6,5,.34));
  opacity:0;transition:opacity .7s var(--ease);
}
.lg-mtile:hover .lg-mtile__pic::after{opacity:1}

.lg-mtile__body{position:static;padding:0;display:block}
.lg-mtile__name{
  display:block;color:var(--ink);font-weight:900;text-transform:uppercase;
  font-size:clamp(12.5px,1.02vw,15px);letter-spacing:-.004em;line-height:1.2;
}
.lg-mtile--hero .lg-mtile__name{font-size:clamp(18px,1.7vw,26px)}
.lg-mtile__sub{
  display:block;color:var(--body);font-size:13px;margin-top:5px;
  max-width:44ch;opacity:1;transform:none;
}
.lg-mtile:not(.lg-mtile--hero) .lg-mtile__sub{display:none}
.lg-mtile__flag{top:14px;left:14px}

/* chips: quieter, and they sit on the same baseline rhythm as the tiles */
.lg-mchip{
  border-radius:12px;background:transparent;border:1px solid rgba(21,18,16,.14);
  font-size:12.5px;font-weight:700;color:var(--ink);
  padding:0 18px;align-items:center;
}
.lg-mchip:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:none}

/* --- clients: wider canvas means more per row --- */
.lg-clients__grid{grid-template-columns:repeat(8,1fr)}
.lg-client{aspect-ratio:16/9;padding:12px 16px}

/* --- work: bigger, with the same restraint --- */
.lg-grid{gap:14px}
.lg-tile{border-radius:16px}

@media (max-width:1400px){
  .lg-clients__grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:1080px){
  .lg-clients__grid{grid-template-columns:repeat(4,1fr)}
  .lg-mtile__sub{display:block}
}
@media (max-width:720px){
  .lg-clients__grid{grid-template-columns:repeat(3,1fr)}
  .lg-mosaic{grid-auto-rows:clamp(96px,26vw,150px)}
}

/* ==========================================================================
   PASS 4 — landing page holds the highlights only. Depth lives inside.
   ========================================================================== */

/* centred section header, for the portfolio and products blocks */
.lg-chead{text-align:center;max-width:60ch;margin:0 auto clamp(30px,3.4vw,50px)}
.lg-chead .lg-lede{margin:14px auto 0;max-width:48ch}
.lg-chead__rule{
  display:block;width:54px;height:2px;margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
.lg-more{display:flex;justify-content:center;margin-top:clamp(30px,3.6vw,50px)}

/* --- featured capabilities: six, then a door to the rest --- */
.lg-mosaic--featured{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:clamp(16px,1.6vw,26px)}
.lg-mosaic--featured .lg-mtile{grid-column:auto;grid-row:auto}
.lg-mosaic--featured .lg-mtile__pic{aspect-ratio:4/3;flex:none}
.lg-mosaic--featured .lg-mtile__name{font-size:clamp(14px,1.2vw,18px)}
.lg-mosaic--featured .lg-mtile__sub{display:block;font-size:13.5px}

/* --- featured products: catalogue cards, placeholders until photos land --- */
.lg-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px)}
.lg-prod{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line-soft);border-radius:16px;
  overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.lg-prod:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)}
.lg-prod__pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.lg-prod__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-prod__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.lg-prod__cat{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.lg-prod__name{font-size:15.5px;font-weight:900;color:var(--ink);text-transform:uppercase;letter-spacing:-.008em;line-height:1.2}
.lg-prod__meta{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:10px}

/* a placeholder that looks deliberate, not missing */
.lg-ph{display:grid;place-items:center;background:
  repeating-linear-gradient(135deg,rgba(21,18,16,.028) 0 9px,transparent 9px 18px),var(--cream)}
.lg-ph__mark{
  font-weight:900;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;
  color:rgba(21,18,16,.13);text-transform:uppercase;
}

/* --- portfolio grid: captions always readable, like the reference --- */
.lg-work .lg-grid{grid-template-columns:repeat(3,1fr)}
.lg-work .lg-tile,.lg-work .lg-tile--wide{grid-column:auto;aspect-ratio:4/3.05}
.lg-work .lg-tile__veil{
  opacity:1;
  background:linear-gradient(180deg,transparent 44%,rgba(9,6,5,.32) 66%,rgba(9,6,5,.9) 100%);
}
.lg-work .lg-tile__meta{transform:none;opacity:1;padding:22px 24px}
.lg-work .lg-tile__spec{
  max-height:0;opacity:0;margin-top:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .5s var(--ease),margin-top .6s var(--ease);
}
.lg-work .lg-tile:hover .lg-tile__spec{max-height:60px;opacity:1;margin-top:7px}

@media (max-width:1080px){
  .lg-prods{grid-template-columns:repeat(2,1fr)}
  .lg-mosaic--featured{grid-template-columns:repeat(2,1fr)}
  .lg-work .lg-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .lg-prods,.lg-mosaic--featured,.lg-work .lg-grid{grid-template-columns:1fr}
  .lg-work .lg-tile,.lg-work .lg-tile--wide{aspect-ratio:4/3.2}
  .lg-work .lg-tile__spec{max-height:60px;opacity:1;margin-top:7px}
}

/* ==========================================================================
   PASS 5 — square frames, a real opening sequence, and life in the
   sections that were sitting flat.
   ========================================================================== */

/* --- everything squares off. Frames are frames, not lozenges. --- */
:root{--r:0px;--r-lg:0px}
.lg-mtile__pic,.lg-tile,.lg-prod,.lg-prod__pic,.lg-mchip,
.lg-stats__slab,.lg-cta__inner,.lg-why__media,.lg-client,
.lg-btn,.lg-head__bar,.lg-nav__item > a,.lg-nav__pill,.lg-burger,
.lg-mtile__flag,.lg-sector,.lg-foot__social a,.lg-peek{border-radius:0}
.lg-head__bar{padding:12px 12px 12px 24px}
.lg-btn{border-radius:0}
.lg-mtile__flag{padding:6px 12px}
.lg-foot__social a{width:40px;height:40px}

/* --- headings arrive line by line from behind a mask --- */
.lg-line{display:block;overflow:hidden}
.lg-line>span{display:block;will-change:transform}
.lg-line--armed>span{transform:translateY(105%)}
.lg-line--in>span{transform:translateY(0);transition:transform 1.05s var(--ease-out)}

/* --- the opening sequence --- */
.lg-boot{
  position:fixed;inset:0;z-index:900;background:var(--cream);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.lg-boot.is-done{opacity:0;visibility:hidden}
.lg-boot__mark{
  font-weight:900;font-size:clamp(46px,7vw,110px);letter-spacing:-.06em;
  color:var(--ink);text-transform:uppercase;line-height:1;
  display:flex;overflow:hidden;
}
.lg-boot__mark span{
  display:block;transform:translateY(110%);
  animation:bootIn .85s var(--ease-out) forwards;
}
@keyframes bootIn{to{transform:translateY(0)}}
.lg-boot__bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);
  animation:bootBar 1.25s var(--ease-out) forwards;
}
@keyframes bootBar{to{width:100%}}

/* The hero rises like a curtain once the boot clears.

   It used to open from the middle outwards — inset(46% 0 46% 0) growing to
   zero, so the picture split apart from the centre line. Now the visible area
   starts collapsed onto the BOTTOM edge (a 100% top inset) and grows upward,
   which reads as a curtain being raised.

   The travel is longer than it was: full height instead of 46% in each
   direction, so the duration goes up to keep the same unhurried speed. */
.lg-hero__media{clip-path:inset(0 0 0 0)}
.lg-hero.is-booting .lg-hero__media{clip-path:inset(100% 0 0 0)}
.lg-hero.is-open .lg-hero__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.6s var(--ease-out);
}
.lg-hero.is-booting .lg-hero__inner,
.lg-hero.is-booting .lg-hero__foot{opacity:0}
.lg-hero.is-open .lg-hero__inner{transition:opacity .9s var(--ease) .45s}
.lg-hero.is-open .lg-hero__foot{transition:opacity .9s var(--ease) .8s}
.lg-head.is-booting{opacity:0;transform:translateY(-18px)}
.lg-head.is-open{opacity:1;transform:none;transition:opacity .8s var(--ease) .7s,transform .9s var(--ease-out) .7s}

/* a hairline that tracks how far down the page you are */
.lg-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:transparent;pointer-events:none;
}
.lg-progress__fill{height:100%;width:0;background:var(--orange);transform-origin:left}

/* ==========================================================================
   PROCESS — was flat text. Now a dark band with a rule that draws itself.
   ========================================================================== */
.lg-proc{background:var(--ink);color:rgba(255,255,255,.66)}
.lg-proc .lg-h2{color:#fff}
.lg-proc .lg-h2 strong{color:var(--orange)}
.lg-proc .lg-label{color:rgba(255,255,255,.4)}
.lg-proc .lg-lede{color:rgba(255,255,255,.62)}
.lg-proc__rail{position:relative;height:1px;background:rgba(255,255,255,.14);margin-bottom:0}
.lg-proc__rail i{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange);transition:width 1.4s var(--ease-out)}
.lg-proc__rail.is-drawn i{width:100%}
.lg-steps{border-top:none;grid-template-columns:repeat(4,1fr)}
.lg-step{border-right:1px solid rgba(255,255,255,.1);padding:32px 30px 34px}
.lg-step:last-child{border-right:none}
.lg-step::after{content:none}
.lg-step h3{color:#fff}
.lg-step p{color:rgba(255,255,255,.6)}
.lg-step__n{color:var(--orange)}
.lg-step__dot{
  position:absolute;top:-4px;left:30px;width:7px;height:7px;background:var(--orange);
  transform:scale(0);transition:transform .5s var(--ease-out);
}
.lg-proc__rail.is-drawn ~ .lg-steps .lg-step__dot{transform:scale(1)}
.lg-step:nth-child(2) .lg-step__dot{transition-delay:.22s}
.lg-step:nth-child(3) .lg-step__dot{transition-delay:.44s}
.lg-step:nth-child(4) .lg-step__dot{transition-delay:.66s}

/* ==========================================================================
   SECTORS — squares that fill, not floating pills
   ========================================================================== */
.lg-sectors{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.lg-sector{
  border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;min-height:86px;padding:18px 20px;
  display:flex;align-items:flex-end;text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--body);
  position:relative;overflow:hidden;transform:none;
}
.lg-sector::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-101%);transition:transform .9s var(--ease-out);
}
.lg-sector span{position:relative;z-index:1;transition:color .45s}
.lg-sector:hover{transform:none;color:var(--body)}
.lg-sector:hover::before{transform:translateX(0)}
.lg-sector:hover span{color:#fff}

@media (max-width:1080px){.lg-sectors{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.lg-sectors{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:reduce){
  .lg-boot{display:none}
  .lg-hero.is-booting .lg-hero__media{clip-path:inset(0 0 0 0)}
  .lg-hero.is-booting .lg-hero__inner,.lg-hero.is-booting .lg-hero__foot{opacity:1}
  .lg-head.is-booting{opacity:1;transform:none}
  .lg-line--armed>span{transform:none}
}

/* ==========================================================================
   PASS 6 — a title card for a hero, a softer radius, and air between
   the two dark sections.
   ========================================================================== */

/* --- a little curve back. Not pills, not hard corners. --- */
:root{--r:3px;--r-lg:8px}
.lg-mtile__pic,.lg-tile,.lg-prod,.lg-prod__pic,.lg-why__media,.lg-cta__inner,.lg-peek{border-radius:8px}
.lg-btn{border-radius:6px}
.lg-head__bar{border-radius:14px}
.lg-nav__item > a,.lg-nav__pill{border-radius:8px}
.lg-burger{border-radius:8px}
.lg-mtile__flag{border-radius:100px}
.lg-foot__social a{border-radius:8px}
.lg-client,.lg-sector,.lg-mchip{border-radius:0}

/* ==========================================================================
   HERO — the company name is the headline, set like a title card
   ========================================================================== */
.lg-hero__inner{
  position:absolute;inset:auto 0 0 0;top:auto;z-index:2;
  padding-inline:var(--gut);padding-bottom:clamp(26px,3vw,48px);
}
.lg-hero__meta{
  position:absolute;left:0;right:0;top:clamp(96px,10vw,140px);z-index:2;
  padding-inline:var(--gut);
  display:flex;justify-content:space-between;gap:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.lg-hero__lineup{
  display:flex;justify-content:space-between;align-items:flex-end;gap:34px;
  padding-bottom:clamp(18px,2vw,30px);
  border-bottom:1px solid rgba(255,255,255,.16);
  margin-bottom:clamp(14px,1.6vw,26px);
}
.lg-hero__say{
  color:rgba(255,255,255,.86);font-size:clamp(14.5px,1.25vw,17px);
  max-width:40ch;margin:0;
}
.lg-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:0;flex:none}

/* the wordmark: letters arrive one at a time as you scroll */
.lg-mark{
  position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  line-height:.78;isolation:isolate;width:100%;
}
.lg-mark__l{
  display:block;font-weight:900;color:#fff;
  font-size:clamp(40px,10.4vw,158px);letter-spacing:-.055em;
  opacity:.07;filter:blur(9px);transform:translateY(16px);
  will-change:opacity,filter,transform;
}
.lg-mark__l.is-lit{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity .75s var(--ease),filter .8s var(--ease-out),transform .9s var(--ease-out);
}
.lg-mark__gap{width:clamp(10px,2vw,34px);flex:none}
/* a specular sweep, like light moving across cut acrylic */
.lg-mark__glass{
  position:absolute;inset:-6% -20%;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  mix-blend-mode:overlay;opacity:0;
}

/* ==========================================================================
   STATS — moved below the fold, set quietly on the page rather than
   shouting from a slab
   ========================================================================== */
.lg-stats{background:transparent}
.lg-stats__slab{
  margin-top:0;background:transparent;box-shadow:none;border-radius:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lg-stats__slab::before{content:none}
.lg-stats__grid{grid-template-columns:repeat(3,1fr)}
.lg-stat{
  padding:clamp(28px,3vw,44px) clamp(18px,2.4vw,36px);
  border-right:1px solid var(--line);text-align:left;
}
.lg-stat:last-child{border-right:none}
.lg-stat__n{
  font-size:clamp(34px,3.6vw,58px);font-weight:700;color:var(--ink);
  letter-spacing:-.035em;
}
.lg-stat__l{color:var(--muted);margin-top:10px}

/* ==========================================================================
   PROCESS — back to the light ground, so it reads as its own chapter
   after the dark portfolio instead of running into it
   ========================================================================== */
.lg-proc{background:var(--cream);color:var(--body)}
.lg-proc .lg-h2{color:var(--ink)}
.lg-proc .lg-label{color:var(--muted)}
.lg-proc .lg-lede{color:var(--body)}
.lg-proc__rail{background:var(--line)}
.lg-step{border-right:1px solid var(--line-soft)}
.lg-step h3{color:var(--ink)}
.lg-step p{color:var(--body)}

/* a hairline of brand between the two chapters */
.lg-seam{height:3px;background:var(--orange);width:100%}

@media (max-width:900px){
  .lg-hero__lineup{flex-direction:column;align-items:flex-start;gap:16px}
  .lg-mark{justify-content:flex-start}
  .lg-mark__l{font-size:clamp(34px,12vw,90px)}
  .lg-mark__gap{width:14px}
}
@media (max-width:720px){
  .lg-stats__grid{grid-template-columns:1fr}
  .lg-stat{border-right:none;border-bottom:1px solid var(--line)}
  .lg-stat:last-child{border-bottom:none}
  .lg-hero__meta{top:84px}
}
@media (prefers-reduced-motion:reduce){
  .lg-mark__l{opacity:1;filter:none;transform:none}
}

/* ==========================================================================
   PASS 7 — the service deck. Cards arrive one at a time and the one
   before tucks in behind, so the stack builds instead of scrolling past.
   ========================================================================== */
.lg-stack{position:relative;background:var(--cream)}
.lg-stack__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.4vw,34px);
  padding-block:clamp(74px,8vw,110px) clamp(24px,3vw,44px);
}
.lg-stack__head{text-align:center;max-width:56ch;margin-inline:auto}
.lg-stack__head .lg-h2{font-size:clamp(24px,3.1vw,44px)}
.lg-stack__head .lg-label{margin-bottom:12px}

.lg-deck{
  position:relative;width:min(1060px,90vw);margin-inline:auto;
  aspect-ratio:16/9;max-height:56svh;
}
.lg-card{
  position:absolute;inset:0;margin:auto;
  width:100%;aspect-ratio:16/9;max-height:56svh;
  border-radius:10px;overflow:hidden;background:var(--ink-2);
  transform-origin:50% 92%;will-change:transform,opacity;
  box-shadow:0 34px 80px -34px rgba(21,18,16,.62);
}
.lg-card__pic{position:absolute;inset:0}
.lg-card__pic img{width:100%;height:100%;object-fit:cover}
.lg-card__pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 44%,rgba(9,6,5,.28) 66%,rgba(9,6,5,.88) 100%);
}
.lg-card__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff;
}
.lg-card__n{
  font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--orange);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:8px;
}
.lg-card__name{
  font-size:clamp(18px,2.1vw,32px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.06;
}
.lg-card__note{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:7px;max-width:42ch}
.lg-card__tag{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.66);white-space:nowrap;flex:none;
  border:1px solid rgba(255,255,255,.26);padding:7px 13px;border-radius:100px;
}

/* progress pips under the deck */
.lg-deck__pips{display:flex;justify-content:center;gap:7px}
.lg-deck__pips i{
  display:block;width:26px;height:2px;background:rgba(21,18,16,.16);
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.lg-deck__pips i.is-on{background:var(--orange);transform:scaleY(2)}

@media (max-width:900px){
  .lg-stack__sticky{gap:16px}
  .lg-deck,.lg-card{width:92vw;max-height:46svh}
  .lg-card__note{display:none}
  .lg-card__tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-stack{height:auto !important}
  .lg-stack__sticky{position:static;height:auto;display:block}
  .lg-deck{aspect-ratio:auto;max-height:none;height:auto}
  .lg-card{position:relative;inset:auto;margin-bottom:14px;transform:none !important;opacity:1 !important}
}

/* overflow-x:hidden on an ancestor turns off position:sticky for everything
   inside it. clip contains the same overflow without creating a scroll box. */
html:has(.lg2){overflow-x:clip}
.lg2{overflow-x:clip}

/* spans inside a span need to be told to stack */
.lg-card__bar>span{display:block}
.lg-card__name{display:block}
.lg-card__note{display:block}

/* ==========================================================================
   INNER PAGES — page head, filters, project grid
   ========================================================================== */
.lg-phead{
  background:var(--ink);color:rgba(255,255,255,.66);
  padding-block:clamp(120px,12vw,190px) clamp(44px,5vw,74px);
}
.lg-phead .lg-h1{color:#fff}
.lg-phead .lg-h1 strong{color:var(--orange)}
.lg-phead .lg-label{color:rgba(255,255,255,.42)}
.lg-phead .lg-lede{color:rgba(255,255,255,.64);max-width:56ch}

.lg-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-bottom:clamp(22px,2.6vw,34px);margin-bottom:clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--line);
}
.lg-filter{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;min-height:44px;border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);background:transparent;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.lg-filter:hover{border-color:var(--ink);color:var(--ink)}
.lg-filter.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.lg-filter__n{
  font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease);
}
.lg-filter.is-on .lg-filter__n{color:rgba(255,255,255,.55)}

.lg-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px)}
.lg-pcard{margin:0;display:flex;flex-direction:column;gap:13px}
.lg-pcard[hidden]{display:none}
.lg-pcard__pic{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:8px;background:var(--ink-2);
}
.lg-pcard__pic img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  transition:transform 1.5s var(--ease-out);
}
.lg-pcard:hover .lg-pcard__pic img{transform:scale(1.09)}
/* The sector label was sitting flush on the photograph — 0px, where every
   other card on the site gives its label 18-20px. The body is unboxed here
   (no frame, no padding of its own), so the gap has to be stated. */
.lg-pcard__body{display:block;padding-top:18px}
.lg-pcard__sector{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);margin-bottom:7px;
}
.lg-pcard__client{
  display:block;font-size:clamp(14px,1.15vw,17px);font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.008em;line-height:1.2;
}
.lg-pcard__what{display:block;font-size:13.5px;color:var(--body);margin-top:5px}
.lg-pempty{text-align:center;padding:60px 0;color:var(--muted)}

@media (max-width:1080px){.lg-pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.lg-pgrid{grid-template-columns:1fr}}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.lg-about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.4vw,76px);align-items:start}
.lg-about__pic{margin:0;aspect-ratio:4/3.4;overflow:hidden;border-radius:8px;background:var(--ink-2)}
.lg-about__pic img{width:100%;height:100%;object-fit:cover}

.lg-mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.lg-mv__card{
  padding:clamp(30px,3.4vw,50px);border:1px solid var(--line);border-radius:8px;
  background:var(--white);
}
.lg-mv__card--dark{background:var(--ink);border-color:var(--ink)}
.lg-mv__card--dark .lg-label{color:rgba(255,255,255,.44)}
.lg-mv__card--dark .lg-mv__text{color:rgba(255,255,255,.82)}
.lg-mv__text{font-size:clamp(17px,1.7vw,23px);line-height:1.45;color:var(--ink);font-weight:500}

.lg-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lg-val{
  padding:clamp(24px,2.6vw,36px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.lg-val:hover{background:var(--white)}
.lg-val h3{margin-bottom:10px}
.lg-val p{font-size:14px;color:var(--body);line-height:1.6}

.lg-team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.lg-member{display:flex;flex-direction:column;gap:12px}
.lg-member__pic{aspect-ratio:3/3.6;border-radius:8px}
.lg-member__role{
  display:block;font-size:clamp(14px,1.15vw,17px);font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.008em;line-height:1.2;
}
.lg-member__note{display:block;font-size:13.5px;color:var(--body);line-height:1.55}

@media (max-width:1080px){
  .lg-about__grid,.lg-mv{grid-template-columns:1fr}
  .lg-vals,.lg-team{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lg-vals,.lg-team{grid-template-columns:1fr}
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.lg-routes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lg-route{
  display:block;padding:clamp(22px,2.4vw,32px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.lg-route:hover{background:var(--white)}
.lg-route__label{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.lg-route__value{display:block;font-size:clamp(16px,1.4vw,20px);font-weight:900;color:var(--ink);letter-spacing:-.015em;transition:color .4s}
.lg-route:hover .lg-route__value{color:var(--orange)}
.lg-route__note{display:block;font-size:12.5px;color:var(--body);margin-top:7px}

.lg-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,68px);align-items:start}

.lg-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.lg-form>h2,.lg-form>button,.lg-form>.lg-form__note{grid-column:1/-1}
.lg-field{grid-column:1/-1;display:block}
.lg-field--half{grid-column:span 1}
.lg-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.lg-field input,.lg-field textarea,.lg-field select{
  width:100%;padding:13px 15px;min-height:50px;font:inherit;font-size:15px;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.lg-field textarea{min-height:auto;resize:vertical}
/* the unanswered select reads as a prompt, not as a filled-in answer */
.lg-field select:has(option[value=""]:checked){color:var(--muted)}
.lg-field select option{color:var(--ink)}
.lg-field input:focus,.lg-field textarea:focus,.lg-field select:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,99,0,.12);
}
.lg-form__note{font-size:12px;color:var(--muted);margin-top:-4px}

.lg-visit{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:clamp(24px,2.6vw,36px)}
.lg-visit address{font-style:normal;font-size:15.5px;line-height:1.8;color:var(--ink);font-weight:500}
.lg-visit__note{font-size:14px;color:var(--body);line-height:1.6;margin-top:16px}
.lg-visit__map{margin-top:22px;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--cream-deep)}
.lg-visit__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease)}
.lg-visit__map:hover iframe{filter:none}

@media (max-width:1080px){
  .lg-routes{grid-template-columns:repeat(2,1fr)}
  .lg-contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lg-routes{grid-template-columns:1fr}
  .lg-form{grid-template-columns:1fr}
  .lg-field--half{grid-column:1/-1}
}

/* ==========================================================================
   PASS 8 — white bar, orange on hover, and a nav animation that behaves
   ========================================================================== */

/* the bar was tinted with the page cream, which read as pink on white */
.lg-head__bar{
  background:rgba(255,255,255,.86);
  border-color:rgba(21,18,16,.09);
}
.lg-head.is-stuck .lg-head__bar{
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 36px -22px rgba(21,18,16,.4);
}

/* The two-span swap was clipping mid-transition and reading as a glitch.
   One label, one colour change, one rule that draws under it. */
.lg-nav__pill{display:none}
/* Top-level links only — unscoped these also hit every anchor in the products
   mega-menu, and `span+span{display:none}` hid each item's entire text block. */
.lg-nav__item > a{overflow:visible;padding:11px 16px}
.lg-nav__item > a span+span{display:none}
.lg-nav__item > a span:first-child{transform:none !important;opacity:1 !important}
.lg-nav__item > a{
  color:var(--body);
  transition:color .32s cubic-bezier(.4,0,.2,1);
}
.lg-nav__item > a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:right center;
  transition:transform .42s cubic-bezier(.4,0,.2,1);
}
.lg-nav__item > a:hover,.lg-nav__item > a:focus-visible{color:var(--orange)}
.lg-nav__item > a:hover::after,.lg-nav__item > a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.lg-nav__item > a[aria-current="page"]{color:var(--ink)}
.lg-nav__item > a[aria-current="page"]::after{transform:scaleX(1);background:var(--ink)}

/* semi-transparent white over a dark section reads grey — go solid */
.lg-head__bar{
  background:#FFFFFF;
  border-color:rgba(21,18,16,.07);
  box-shadow:0 2px 8px -4px rgba(21,18,16,.14);
}
.lg-head.is-stuck .lg-head__bar{
  background:#FFFFFF;
  box-shadow:0 12px 34px -20px rgba(21,18,16,.45);
}

.lg-deck__foot{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.lg-deck__all{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);padding-bottom:3px;border-bottom:1.5px solid var(--line);
  transition:color .32s cubic-bezier(.4,0,.2,1),border-color .32s cubic-bezier(.4,0,.2,1);
}
.lg-deck__all svg{width:14px;height:14px;transition:transform .42s var(--ease)}
.lg-deck__all:hover{color:var(--orange);border-color:var(--orange)}
.lg-deck__all:hover svg{transform:translateX(4px)}

/* ==========================================================================
   PASS 13 — stats, process and sectors: centred, denser, clearer
   ========================================================================== */

/* --- STATS: centred, lighter numerals, and it says what it is counting --- */
.lg-stats{background:var(--white)}
.lg-stats__slab{
  background:transparent;box-shadow:none;margin-top:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lg-stats__slab::before{content:none}
.lg-stats__head{text-align:center;padding:clamp(34px,3.6vw,52px) var(--gut) 0}
.lg-stats__head .lg-h2{font-size:clamp(22px,2.5vw,36px)}
.lg-stats__grid{grid-template-columns:repeat(3,1fr)}
.lg-stat{
  text-align:center;padding:clamp(28px,3vw,44px) clamp(18px,2.2vw,32px) clamp(34px,3.6vw,52px);
  border-right:1px solid var(--line-soft);
}
.lg-stat:last-child{border-right:none}
/* lighter weight, open tracking — reads considered rather than shouted */
.lg-stat__n{
  justify-content:center;
  font-weight:500;font-size:clamp(38px,4.2vw,62px);
  letter-spacing:-.012em;color:var(--ink);
}
.lg-stat__l{
  display:block;margin-top:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:none;
  color:var(--ink);
}
.lg-stat__d{
  display:block;margin-top:5px;font-size:12.5px;color:var(--muted);
  max-width:26ch;margin-inline:auto;line-height:1.5;
}

/* --- PROCESS: the steps were floating in a half-empty section --- */
.lg-proc,#process{padding-block:clamp(44px,4.6vw,74px)}
#process .lg-chead{margin-bottom:clamp(22px,2.4vw,34px)}
.lg-steps{border-top:1px solid var(--line)}
.lg-step{padding:26px 26px 28px}
.lg-step p{font-size:14px}

/* --- SECTORS: dense index, not tall empty boxes --- */
.lg-sectors{grid-template-columns:repeat(6,1fr)}
.lg-sector{
  min-height:auto;padding:15px 16px;align-items:center;
  font-size:10.5px;letter-spacing:.1em;line-height:1.35;
}
.lg-sector span{position:relative;z-index:1}

/* trim the air around both blocks */
#process + .lg-sec,.lg-sec:has(.lg-sectors){padding-block:clamp(40px,4.2vw,66px)}

/* ==========================================================================
   PASS 13 — three components, grounded in the workshop rather than
   the default stat-tile / 01-02-03 / pill-grid kit.
   ========================================================================== */

/* --- THE RECORD -----------------------------------------------------------
   Centred, as asked. Numerals go lighter and wider rather than heavier:
   heavy centred figures are the SaaS default and read as a boast. Light and
   tracked reads like a datasheet, which is what a manufacturer should sound
   like. Each figure now says in plain words what it counts.
   ------------------------------------------------------------------------ */
.lg-stats{background:var(--white)}
.lg-stats__slab{
  background:transparent;box-shadow:none;margin-top:0;border-radius:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lg-stats__slab::before{content:none}
.lg-stats__head{text-align:center;padding:clamp(32px,3.4vw,50px) var(--gut) 0}
.lg-stats__head .lg-h2{font-size:clamp(21px,2.3vw,33px)}
.lg-stats__grid{grid-template-columns:repeat(3,1fr)}
.lg-stat{
  text-align:center;
  padding:clamp(26px,2.8vw,40px) clamp(18px,2.2vw,32px) clamp(32px,3.4vw,48px);
  border-right:1px solid var(--line-soft);
}
.lg-stat:last-child{border-right:none}
.lg-stat__n{
  justify-content:center;
  font-weight:400;                       /* light, not heavy */
  font-size:clamp(40px,4.4vw,66px);
  letter-spacing:.01em;                  /* open, like a readout */
  color:var(--ink);line-height:1;
}
.lg-stat__l{
  display:block;margin-top:14px;
  font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ink);
}
.lg-stat__d{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.5;
  color:var(--muted);max-width:26ch;margin-inline:auto;
}

/* --- PROCESS: a spine through the row, and real timings ------------------- */
#process{padding-block:clamp(44px,4.6vw,74px)}
#process .lg-chead{margin-bottom:clamp(20px,2.2vw,32px)}
.lg-steps{border-top:1px solid var(--line)}
.lg-step{padding:24px 26px 26px}
.lg-step p{font-size:14px;margin-bottom:14px}
.lg-step__when{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
  padding-top:10px;border-top:1px solid var(--line-soft);
}

/* --- SECTORS: evidence, not decoration ------------------------------------
   Each sector carries its real installed-project count and links through to
   the filtered portfolio, so the block proves something instead of listing.
   ------------------------------------------------------------------------ */
.lg-sectors{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.lg-sector{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  min-height:auto;padding:18px 20px;border:none;border-radius:0;background:transparent;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;transform:none;
}
.lg-sector::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateX(-101%);transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.lg-sector:hover{transform:none}
.lg-sector:hover::before{transform:translateX(0)}
.lg-sector__name{
  position:relative;z-index:1;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);transition:color .4s cubic-bezier(.4,0,.2,1);line-height:1.3;
}
.lg-sector__n{
  position:relative;z-index:1;flex:none;
  font-size:20px;font-weight:400;letter-spacing:.01em;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .4s cubic-bezier(.4,0,.2,1);
}
.lg-sector:hover .lg-sector__name{color:#fff}
.lg-sector:hover .lg-sector__n{color:var(--orange)}

@media (max-width:900px){.lg-sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .lg-stats__grid{grid-template-columns:1fr}
  .lg-stat{border-right:none;border-bottom:1px solid var(--line-soft)}
  .lg-stat:last-child{border-bottom:none}
}

/* ==========================================================================
   PASS 14 — the hero does ONE thing.
   It was running six simultaneous scroll animations (frame scale, corner
   radius, image scale, image shift, copy lift, copy fade) plus a fading
   footer. Six easings with nothing anchoring them reads as amateur, and
   border-radius is a repaint-heavy property that should never be animated.
   Now: the photograph drifts slower than the page. That is the whole move.
   ========================================================================== */
.lg-hero__media{
  position:absolute;inset:-9% 0;           /* headroom for the drift */
  overflow:hidden;transform:none;border-radius:0 !important;
  will-change:transform;
}
.lg-hero__media img,.lg-hero__media video{
  width:100%;height:100%;object-fit:cover;
  transform:none !important;will-change:auto;
}
/* copy and footer sit still and scroll with the page */
.lg-hero__inner,.lg-hero__foot{will-change:auto}

/* a scroll cue that loops forever is decorative motion — the guidance
   reserves continuous animation for loading states. Make it a static mark. */
.lg-scrollcue i::after{animation:none;transform:translateY(0);height:40%}

/* The hero copy was only visible because a class got removed — if the boot
   script ever fails to run its timer, the headline stays invisible with no
   rule to bring it back. Give the finished state an explicit value. */
.lg-hero__inner,.lg-hero__foot{opacity:1}
.lg-hero.is-booting .lg-hero__inner,.lg-hero.is-booting .lg-hero__foot{opacity:0}
.lg-hero.is-open .lg-hero__inner{opacity:1;transition:opacity .9s var(--ease) .45s}
.lg-hero.is-open .lg-hero__foot{opacity:1;transition:opacity .9s var(--ease) .8s}

/* ==========================================================================
   PASS 15 — hero breathing room, the deck gets its own ground, "who we are"
   gets a photograph, and the loading screen carries the real logo.
   ========================================================================== */

/* --- HERO: the copy stack ran into the bottom edge --- */
.lg-hero__inner{padding-bottom:clamp(48px,6vw,86px)}
.lg-hero__cta{margin-top:clamp(26px,3vw,40px)}
.lg-hero__lede{margin-top:20px}

/* --- BOOT: the real wordmark, revealed from behind a mask --- */
.lg-boot__mark{display:block;overflow:hidden;line-height:0}
.lg-boot__mark img{
  display:block;height:clamp(38px,4.6vw,64px);width:auto;
  transform:translateY(110%);
  animation:bootIn .9s cubic-bezier(.16,1,.3,1) forwards;
}
.lg-boot__mark span{display:none}

/* --- SERVICE DECK: its own ground, so it reads as a chapter --- */
.lg-stack{background:var(--ink)}
.lg-stack .lg-h2{color:#fff}
.lg-stack .lg-h2 strong{color:var(--orange)}
.lg-stack .lg-label{color:rgba(255,255,255,.42)}
.lg-deck__pips i{background:rgba(255,255,255,.2)}
.lg-deck__all{color:rgba(255,255,255,.66);border-bottom-color:rgba(255,255,255,.22)}
.lg-deck__all:hover{color:var(--orange);border-bottom-color:var(--orange)}
.lg-card{box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}

/* --- WHO WE ARE: a photograph fills the void, facts run the full width --- */
.lg-who__top{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(28px,4.4vw,72px);align-items:end;
  padding-bottom:clamp(30px,3.4vw,52px);
}
.lg-who__say .lg-lede{margin-top:20px;max-width:44ch}
.lg-who__say .lg-btn{margin-top:clamp(22px,2.4vw,34px)}
.lg-who__pic{margin:0}
.lg-who__pic img{
  width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:8px;
  background:var(--ink-2);
}
.lg-who__pic figcaption{
  margin-top:12px;font-size:12px;color:var(--muted);line-height:1.5;
  padding-left:14px;border-left:2px solid var(--orange);
}

/* facts as a four-across band instead of a stacked list in a half column */
.lg-facts--row{
  grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.lg-facts--row .lg-fact{
  display:block;padding:20px 22px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.lg-facts--row .lg-fact:hover{padding-left:22px;background:var(--white)}
.lg-facts--row dt{min-width:0;margin-bottom:8px}
.lg-facts--row dd{font-size:14.5px;line-height:1.5}

@media (max-width:1080px){
  .lg-who__top{grid-template-columns:1fr;align-items:start}
  .lg-facts--row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.lg-facts--row{grid-template-columns:1fr}}

/* ==========================================================================
   PASS 16 — the showcase deck moves into "Who we are", at 16:9, with the
   stack edges visible behind the front frame. Cycles as you scroll past.
   ========================================================================== */
.lg-who__top{align-items:center}                 /* kills the void above the title */
.lg-who__say{padding-block:clamp(6px,1vw,18px)}

.lg-showcase{display:block}
.lg-showcase__deck{
  position:relative;width:100%;aspect-ratio:16/9;
  /* room for the stacked edges to sit behind the front frame */
  margin:0 clamp(14px,1.6vw,26px) clamp(14px,1.6vw,26px) 0;
}
.lg-shot{
  position:absolute;inset:0;margin:0;overflow:hidden;border-radius:8px;
  background:var(--ink-2);
  box-shadow:0 22px 50px -26px rgba(21,18,16,.5);
  will-change:transform,opacity;
}
.lg-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* caption swaps with the frame */
.lg-showcase__bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin-top:16px;
}
.lg-showcase__cap{position:relative;display:block;flex:1;min-height:42px}
.lg-showcase__line{
  position:absolute;inset:0;display:block;
  padding-left:14px;border-left:2px solid var(--orange);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.lg-showcase__line.is-on{opacity:1;transform:none}
.lg-showcase__line b{
  display:block;font-size:13px;font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:.02em;
}
.lg-showcase__line i{
  display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  margin-top:3px;line-height:1.45;
}
.lg-showcase__pips{display:flex;gap:5px;flex:none;padding-top:6px}
.lg-showcase__pips i{
  display:block;width:18px;height:2px;background:rgba(21,18,16,.14);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.lg-showcase__pips i.is-on{background:var(--orange);transform:scaleY(2)}

/* --- the facts band: give it some lift instead of four flat boxes --- */
.lg-facts--row .lg-fact{position:relative;transition:background .45s var(--ease)}
.lg-facts--row .lg-fact::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--orange);transition:width .55s var(--ease);
}
.lg-facts--row .lg-fact:hover::after{width:100%}
.lg-facts--row .lg-fact:hover{background:var(--white);padding-left:22px}
.lg-facts--row dt{color:var(--orange)}

@media (prefers-reduced-motion:reduce){
  .lg-shot{position:relative;inset:auto;margin-bottom:10px;transform:none !important;opacity:1 !important}
  .lg-showcase__deck{aspect-ratio:auto}
  .lg-showcase__cap{min-height:0}
  .lg-showcase__line{position:relative;opacity:1;transform:none;margin-bottom:8px}
}

/* ==========================================================================
   PASS 17 — "Who we are" pins while the frames cycle.
   Same mechanic the deck used: a tall container, a sticky child. The pin
   only lasts as long as the container, so nothing bleeds past it.
   ========================================================================== */
.lg-who{position:relative;z-index:2;background:var(--cream)}
.lg-who__pin{
  position:sticky;top:0;
  height:100svh;min-height:600px;
  display:flex;align-items:center;
  padding-block:clamp(88px,9vw,120px) clamp(28px,3vw,48px);
  overflow:hidden;
}
.lg-who__pin>.lg-wrap{width:100%}
.lg-who__top{
  display:grid;grid-template-columns:1fr .96fr;
  gap:clamp(28px,4vw,66px);align-items:center;padding-bottom:0;
}
.lg-who__say .lg-lede{max-width:42ch}
.lg-showcase__deck{
  margin:0 clamp(14px,1.5vw,24px) clamp(14px,1.5vw,24px) 0;
  max-height:58svh;
}
.lg-shot{max-height:58svh}
.lg-whofacts{padding-top:clamp(30px,3.4vw,52px)}

@media (max-width:1080px){
  .lg-who{height:auto !important}
  .lg-who__pin{position:static;height:auto;min-height:0;display:block;padding-block:clamp(60px,8vw,90px) 0}
  .lg-who__top{grid-template-columns:1fr;align-items:start}
  .lg-showcase__deck,.lg-shot{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-who{height:auto !important}
  .lg-who__pin{position:static;height:auto;display:block}
}

/* ==========================================================================
   PASS 18 — facts sit under the button; the stack reads front-to-back
   ========================================================================== */

/* --- four facts, 2x2, centred, directly under "More about us" --- */
.lg-facts--tight{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:clamp(24px,2.6vw,36px);max-width:44ch;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.lg-facts--tight .lg-fact{
  display:block;text-align:center;padding:16px 18px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .45s var(--ease);
}
.lg-facts--tight .lg-fact:hover{background:var(--white);padding-left:18px}
.lg-facts--tight dt{
  min-width:0;margin-bottom:6px;color:var(--orange);
  font-size:9.5px;letter-spacing:.2em;
}
.lg-facts--tight dd{font-size:13px;line-height:1.4;color:var(--ink)}

/* --- the deck now stacks straight back, not down-and-right --------------
   Front frame is full strength with a deep shadow. Each frame behind it
   steps up, narrows slightly and loses opacity, so the eye reads depth
   rather than a fan of offset rectangles.
   ------------------------------------------------------------------------ */
.lg-showcase__deck{margin:0;padding-top:clamp(18px,2vw,30px)}
.lg-shot{
  border-radius:10px;
  /* no transition: the scroll position IS the timeline. A CSS transition
     here would fight the per-frame updates and reintroduce the lag. */
  transition:none;
  transform-origin:50% 62%;
  backface-visibility:hidden;
  box-shadow:0 30px 60px -28px rgba(21,18,16,.55),
             0 4px 14px -6px rgba(21,18,16,.28);
}
.lg-shot::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  pointer-events:none;
}

/* Heading line-masks are gone — make certain nothing can stay hidden. */
.lg-line,.lg-line>span{display:inline;overflow:visible;transform:none !important;opacity:1 !important}
.lg-line--armed,.lg-line--armed>span{opacity:1 !important;transform:none !important}

/* ==========================================================================
   SHOWCASE — clip-wipe reveal. Frames are opaque and stacked; the next one
   is uncovered by a moving edge. No opacity blending, so no ghosting.
   ========================================================================== */
.lg-showcase__deck{position:relative;overflow:hidden;border-radius:10px;background:var(--ink)}
.lg-shot{
  position:absolute;inset:0;margin:0;border-radius:0;overflow:hidden;
  opacity:1;transform:none;box-shadow:none;
  will-change:clip-path;backface-visibility:hidden;
}
.lg-shot::after{content:none}
.lg-shot img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* one shadow on the frame itself, not on each layer */
.lg-showcase__deck{box-shadow:0 30px 68px -30px rgba(21,18,16,.55),0 4px 14px -6px rgba(21,18,16,.26)}
.lg-showcase__deck::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;z-index:20;
  box-shadow:inset 0 0 0 1px rgba(21,18,16,.10);
}
/* the travelling brand edge */
.lg-shot__edge{
  position:absolute;top:0;bottom:0;left:0;width:2px;z-index:15;
  background:linear-gradient(180deg,transparent,var(--orange) 18%,var(--orange) 82%,transparent);
  box-shadow:0 0 11px rgba(243,99,0,.38);pointer-events:none;
}

/* ==========================================================================
   SHOWCASE — bigger frame, vertical conveyor.
   The left column is inside the pin so it holds still; only the window on
   the right moves. Frames are opaque and travel through it.
   ========================================================================== */
.lg-who__top{grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.4vw,56px)}
.lg-showcase__deck{
  position:relative;overflow:hidden;border-radius:10px;background:var(--ink);
  aspect-ratio:16/9;max-height:66svh;padding-top:0;margin:0;
  box-shadow:0 34px 76px -32px rgba(21,18,16,.6),0 4px 14px -6px rgba(21,18,16,.26);
}
.lg-shot{
  position:absolute;inset:0;margin:0;border-radius:0;overflow:hidden;
  opacity:1;box-shadow:none;max-height:none;
  will-change:transform;backface-visibility:hidden;
}
.lg-shot::after{content:none}
.lg-shot img{width:100%;height:100%;object-fit:cover;will-change:transform;transform-origin:50% 50%}
/* the image sits slightly taller than the frame so it can drift without gapping */
.lg-shot img{height:112%;margin-top:-6%}
.lg-showcase__deck::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;z-index:20;
  box-shadow:inset 0 0 0 1px rgba(21,18,16,.10);
}
.lg-shot__edge{display:none}

/* the frozen column shouldn't drift while the pin holds */
.lg-who__say{will-change:auto}

@media (max-width:1080px){
  .lg-who__top{grid-template-columns:1fr}
  .lg-showcase__deck{max-height:none}
}

/* Counter-parallax needs the picture to fill the frame exactly, so a
   counter-move of -100% lines it up precisely with the window. */
.lg-shot img{height:100%;margin-top:0}

/* ==========================================================================
   WebGL showcase. The canvas takes over; the DOM frames stay in place as
   texture sources and as the fallback when WebGL is unavailable — the same
   arrangement the reference site uses.
   ========================================================================== */
.lg-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:5}
.lg-showcase__deck.gl-live .lg-shot{opacity:0 !important;pointer-events:none}
.lg-showcase__deck.has-gl{background:var(--ink)}

/* ==========================================================================
   PRELOADER — the counter reports real decoded images, not a fake timer
   ========================================================================== */
.lg-boot{display:grid;place-items:center;align-content:center;gap:26px}
.lg-boot__pct{
  display:flex;align-items:baseline;gap:2px;
  font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;line-height:1;
}
.lg-boot__pct i{font-style:normal;font-size:.42em;color:var(--muted);font-weight:700}
.lg-boot__bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;width:100%;
  background:rgba(21,18,16,.08);display:block;animation:none;
}
.lg-boot__bar b{
  display:block;height:100%;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
}
@media (prefers-reduced-motion:reduce){.lg-boot{display:none}}

/* ==========================================================================
   TEXT MOTION + CURSOR — modelled on vividmotion.co
   ========================================================================== */
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* the split machinery */
.lg-w{display:inline-block;overflow:hidden;vertical-align:top}
.lg-w>span{display:inline-block;will-change:transform,opacity,filter}
.lg-line-mask{display:block;overflow:hidden}
.lg-line-in{display:block;will-change:transform}

/* an italic serif carries the accent line — the pairing that gives the
   reference its warmth against an otherwise geometric sans */
.lg-h1 strong,.lg-h2 strong,.lg-hero__title strong,.lg-foot__say strong{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;
  text-transform:none;
  letter-spacing:-.012em;
  font-size:1.07em;
}
.lg-cta .lg-h2 strong{font-size:1.07em}

@media (prefers-reduced-motion:reduce){
  .lg-w,.lg-w>span,.lg-line-mask,.lg-line-in{overflow:visible;transform:none !important;opacity:1 !important;filter:none !important}
}

/* ==========================================================================
   SECTION CHOREOGRAPHY — support styles
   ========================================================================== */
.lg-tile{will-change:clip-path}
.lg-tile img{will-change:transform}
.lg-prod{will-change:transform,opacity}
.lg-stats__slab{will-change:transform}
.lg-cta__inner{will-change:auto}

/* the brief ink flash as each sector cell lands */
.lg-sector.flash::before{transform:translateY(0)}
.lg-sector.flash .lg-sector__name{color:#fff}
.lg-sector.flash .lg-sector__n{color:var(--orange)}

/* nothing may be left invisible if a trigger never runs */
@media (prefers-reduced-motion:reduce){
  .lg-tile{clip-path:none !important}
  .lg-prod,.lg-client,.lg-stat__n,.lg-step,.lg-sector{opacity:1 !important;transform:none !important;filter:none !important}
  .lg-cta__inner{clip-path:none !important}
}

/* ==========================================================================
   PASS 16 — the process as a lead-time chart, the sectors as a ranked index,
   and secondary buttons that are actually visible.

   Both blocks were reading as generic furniture: four columns of text under a
   hairline, then a grid of small boxes. Neither used the one thing that makes
   them worth reading — the numbers already in them. The process carries real
   durations, so it is drawn against a working-day scale; the sectors carry
   real project counts, so they are ranked and drawn to length. The structure
   now says something instead of just holding text.
   ========================================================================== */

/* the two chapters are separate rooms now, not one long cream corridor */
.lg-proc{
  background:var(--cream-deep);
  border-block:1px solid var(--line);
}

.lg-flow{
  --c1:clamp(52px,5.6vw,88px);
  --c3:clamp(200px,30vw,430px);
  --cgap:clamp(14px,2vw,34px);
  margin-top:clamp(24px,3vw,40px);
}
.lg-flow__head,
.lg-flow__row,
.lg-flow__axis{
  display:grid;
  grid-template-columns:var(--c1) 1fr var(--c3);
  gap:var(--cgap);
}
.lg-flow__head{padding-bottom:11px}
.lg-flow__hl,.lg-flow__hr,.lg-flow__ticks{
  font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.lg-flow__hl{grid-column:2}
.lg-flow__hr{grid-column:3}

.lg-flow__row{
  align-items:start;
  padding:clamp(20px,2.5vw,32px) 0;
  border-top:1px solid var(--line);
  position:relative;
}
/* a warm wash behind the row being read, bled past the text edges */
.lg-flow__row::after{
  content:"";position:absolute;inset:0 calc(var(--cgap) * -0.6);
  background:#fff;opacity:0;pointer-events:none;z-index:0;
  transition:opacity .5s var(--ease);
}
.lg-flow__row:hover::after{opacity:.62}
.lg-flow__row > *{position:relative;z-index:1}

/* the numeral is drawn as an outline and fills in as you read the row */
.lg-flow__n{
  display:block;
  font-size:clamp(32px,4.2vw,60px);font-weight:900;line-height:.8;
  letter-spacing:-.045em;color:transparent;
  -webkit-text-stroke:1.4px var(--orange);
  transition:color .5s var(--ease);
}
.lg-flow__row:hover .lg-flow__n{color:var(--orange)}

.lg-flow__title{
  font-size:clamp(16.5px,1.45vw,21px);font-weight:900;line-height:1.14;
  text-transform:uppercase;letter-spacing:-.008em;color:var(--ink);
}
.lg-flow__text{
  display:block;margin-top:9px;max-width:54ch;
  font-size:14.5px;line-height:1.62;color:var(--body);
}

.lg-flow__lead{display:block;padding-top:5px}
.lg-flow__when{
  display:block;margin-bottom:11px;
  font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);
}
.lg-flow__track{
  display:block;position:relative;height:6px;background:var(--line);overflow:hidden;
}
.lg-flow__track i{
  display:block;height:100%;width:var(--w,0%);background:var(--orange);
  transform-origin:left center;
}
/* "scheduled with you" has no duration to draw — it stays open-ended */
.lg-flow__track.is-open{
  background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
}
.lg-flow__track.is-open i{display:none}

.lg-flow__axis{border-top:1px solid var(--line);padding-top:10px}
.lg-flow__ticks{
  grid-column:3;display:flex;justify-content:space-between;
  font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .lg-flow__head,.lg-flow__axis{display:none}
  .lg-flow__row{grid-template-columns:var(--c1) 1fr;row-gap:14px}
  .lg-flow__lead{grid-column:2}
  .lg-flow__text{max-width:none}
}

/* --------------------------------------------------------------------------
   SECTORS — ranked, with each count drawn to length against the largest
   -------------------------------------------------------------------------- */
.lg-idx__head{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,70px);align-items:end;
  margin-bottom:clamp(26px,3.2vw,44px);
}
.lg-idx__head .lg-lede{margin:0;padding-bottom:8px}
@media (max-width:820px){
  .lg-idx__head{grid-template-columns:1fr;gap:14px;align-items:start}
  .lg-idx__head .lg-lede{padding-bottom:0}
}
.lg-idx{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(30px,5vw,84px);
}
.lg-idx__row{
  display:grid;grid-template-columns:1fr minmax(76px,24%) auto;
  align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:clamp(13px,1.5vw,18px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:padding-left .45s var(--ease);
}
.lg-idx__row:hover{padding-left:10px}
.lg-idx__name{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
  transition:color .4s var(--ease);
}
.lg-idx__bar{
  display:block;height:4px;background:var(--line);
  position:relative;overflow:hidden;
}
.lg-idx__bar i{
  display:block;height:100%;width:var(--w,0%);
  background:var(--orange);transform-origin:left center;
}
.lg-idx__n{
  font-size:15px;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:2ch;text-align:right;
  transition:color .4s var(--ease);
}
.lg-idx__row:hover .lg-idx__name,
.lg-idx__row:hover .lg-idx__n{color:var(--orange)}

@media (max-width:820px){
  .lg-idx{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Secondary buttons. A 1.5px hairline of --line on cream is barely there;
   these are the brand colour now and fill on hover rather than just sitting.
   -------------------------------------------------------------------------- */
.lg2 .lg-btn--line{
  position:relative;isolation:isolate;overflow:hidden;
  border:1.5px solid var(--orange);color:var(--orange);background:transparent;
}
.lg2 .lg-btn--line::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:translateX(-101%);
  /* .55s read as a snap once the fill had the full width to cross rather than
     the height; the longer travel needs longer to feel like one move */
  transition:transform .9s var(--ease-out);
}
.lg2 .lg-btn--line:hover{
  color:#fff;border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 18px 34px -18px rgba(255,108,0,.8);
}
.lg2 .lg-btn--line:hover::before{transform:translateX(0)}
.lg2 .lg-btn--line:hover svg{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  .lg-flow__track i,.lg-idx__bar i{transform:none !important}
  .lg2 .lg-btn--line::before{transition:none}
}

/* ==========================================================================
   PASS 17 — the secondary button is orange at rest and goes white under the
   pointer, and the four production facts pick up the same fill sweep.
   ========================================================================== */

/* solid at rest; the sweep is white now, so hovering lightens rather than
   darkens and the arrow keeps reading against it. It crosses left to right —
   every fill on the site does, so the gesture is one gesture. */
.lg2 .lg-btn--line{
  background:var(--orange);color:#fff;border-color:var(--orange);
}
.lg2 .lg-btn--line::before{background:#fff}
.lg2 .lg-btn--line:hover{
  color:var(--orange);border-color:var(--orange);
  transform:translateY(-3px);
  box-shadow:0 14px 26px -20px rgba(243,99,0,.30);
}

/* the four facts read as a set of switches, so they fill like the buttons */
.lg-facts--tight .lg-fact{
  overflow:hidden;isolation:isolate;
  transition:none;
}
.lg-facts--tight .lg-fact::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:translateX(-101%);
  /* .55s read as a snap once the fill had the full width to cross rather than
     the height; the longer travel needs longer to feel like one move */
  transition:transform .9s var(--ease-out);
}
.lg-facts--tight .lg-fact:hover{
  background:transparent;padding-left:18px;   /* padding kept symmetric below */
}
.lg-facts--tight .lg-fact:hover::before{transform:translateX(0)}
.lg-facts--tight dt,
.lg-facts--tight dd{transition:color .62s var(--ease)}
.lg-facts--tight .lg-fact:hover dt,
.lg-facts--tight .lg-fact:hover dd{color:#fff}

/* the cells are centre-set, so the old hover nudge threw the text off-axis */
.lg-facts--tight .lg-fact,
.lg-facts--tight .lg-fact:hover{padding:16px 18px}

@media (prefers-reduced-motion:reduce){
  .lg-facts--tight .lg-fact::before{transition:none}
}

/* ==========================================================================
   PASS 18 — the product grid is a stage, so the cards can turn on it.
   The perspective belongs to the grid rather than the individual cards: a
   card's angle then comes from where it sits in the row, which is what makes
   the outer columns swing through a wider arc than the inner ones.
   ========================================================================== */
.lg-prods{
  perspective:1500px;
  perspective-origin:50% 42%;
}
.lg-prod{backface-visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .lg-prods{perspective:none}
}

/* ==========================================================================
   PASS 19 — FEATURED PRODUCTS on a live orange field.
   The colour moves rather than sits: three oversized radial washes drift
   across the block on long, offset cycles, so the ground is never quite the
   same twice but never draws attention to itself either. They are plain
   radial gradients with a soft falloff — no blur filter — because blurring
   three elements this size costs real frames for a result the eye can't tell
   apart. Only transform is animated, so it stays on the compositor.
   ========================================================================== */
.lg-prodsec{
  position:relative;isolation:isolate;overflow:hidden;
  /* was a 168deg ramp from #F36300 through #E45A00 to #C64D00, which made the
     band read light at the top and muddy at the bottom. One flat brand orange,
     everywhere orange appears. */
  background:var(--orange);
  color:#fff;
}
.lg-prodsec > .lg-wrap{position:relative;z-index:2}

.lg-orb{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.lg-orb span{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;
}
.lg-orb span:nth-child(1){
  width:62vw;height:62vw;left:-8%;top:-18%;
  background:radial-gradient(circle at 50% 50%,rgba(255,176,86,.78),rgba(255,176,86,0) 66%);
  animation:lg-drift-a 34s ease-in-out infinite;
}
.lg-orb span:nth-child(2){
  width:54vw;height:54vw;right:-12%;top:12%;
  background:radial-gradient(circle at 50% 50%,rgba(201,58,0,.72),rgba(201,58,0,0) 66%);
  animation:lg-drift-b 44s ease-in-out infinite;
}
.lg-orb span:nth-child(3){
  width:46vw;height:46vw;left:28%;bottom:-22%;
  background:radial-gradient(circle at 50% 50%,rgba(255,138,32,.62),rgba(255,138,32,0) 68%);
  animation:lg-drift-c 38s ease-in-out infinite;
}
@keyframes lg-drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(9vw,6vh,0) scale(1.14)}
}
@keyframes lg-drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.08)}
  50%    {transform:translate3d(-11vw,9vh,0) scale(.92)}
}
@keyframes lg-drift-c{
  0%,100%{transform:translate3d(0,0,0) scale(.96)}
  50%    {transform:translate3d(7vw,-8vh,0) scale(1.18)}
}

/* type has to carry on the orange now */
.lg-prodsec .lg-label{color:rgba(255,255,255,.72)}
.lg-prodsec .lg-h2{color:#fff}
.lg-prodsec .lg-h2 strong{color:#FFE2CB}
.lg-prodsec .lg-lede{color:rgba(255,255,255,.84)}
.lg-prodsec .lg-chead__rule{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}

/* the white cards lift off the field instead of lying flat on it */
.lg-prodsec .lg-prod{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 26px 54px -34px rgba(86,30,0,.65);
}
.lg-prodsec .lg-prod:hover{
  border-color:#fff;
  box-shadow:0 36px 64px -30px rgba(86,30,0,.72);
}

/* an orange button on an orange field is invisible, so it inverts here */
.lg2 .lg-prodsec .lg-btn--line{
  background:#fff;color:var(--orange-deep);border-color:#fff;
}
.lg2 .lg-prodsec .lg-btn--line::before{background:var(--ink)}
.lg2 .lg-prodsec .lg-btn--line:hover{
  color:#fff;border-color:var(--ink);
  box-shadow:0 20px 38px -18px rgba(21,18,16,.6);
}

@media (prefers-reduced-motion:reduce){
  .lg-orb span{animation:none}
}

/* The panel's resting state. It travels up over the intro, so the top corners
   are rounded and the cream behind shows through them — it reads as a card
   being dealt over the section rather than a band butted against it. The
   bottom stays square: that edge meets the next section, it is not an edge
   you see move.

   border-radius as well as the clip-path, because the reduced-motion rule
   drops the clip-path and the corners would otherwise go square there. The
   section already carries overflow:hidden, so the radius clips the orb too. */
.lg-prodsec{
  border-radius:24px 24px 0 0;
  clip-path:inset(0% 0% 0% 0% round 24px 24px 0px 0px);
}
@media (prefers-reduced-motion:reduce){
  .lg-prodsec{clip-path:none}
}
@media (max-width:1080px){
  /* no overlap down here, so there is nothing behind the corners to reveal */
  .lg-prodsec{border-radius:0}
}

/* ==========================================================================
   PASS 20 — OUR RECENT WORKS on a live white field, and a placeholder that
   looks intended rather than missing.
   ========================================================================== */

/* The work block was near-black. It is white now, and the same drifting
   washes run underneath — tinted far softer, because on white a wash that
   reads as "subtle" on orange reads as a dirty smudge. */
.lg2 .lg-worksec{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF 0%,#FDFAF8 44%,#F6EFEA 100%);
  color:var(--body);
}
.lg-worksec > .lg-wrap{position:relative;z-index:2}

.lg-orb--light span:nth-child(1){
  background:radial-gradient(circle at 50% 50%,rgba(255,196,150,.34),rgba(255,196,150,0) 66%);
}
.lg-orb--light span:nth-child(2){
  background:radial-gradient(circle at 50% 50%,rgba(214,224,238,.40),rgba(214,224,238,0) 66%);
}
.lg-orb--light span:nth-child(3){
  background:radial-gradient(circle at 50% 50%,rgba(255,171,110,.26),rgba(255,171,110,0) 68%);
}

/* the type has to come back down off white */
.lg2 .lg-worksec .lg-h2{color:var(--ink)}
.lg2 .lg-worksec .lg-h2 strong{color:var(--orange)}
.lg2 .lg-worksec .lg-label{color:var(--muted)}
.lg2 .lg-worksec .lg-lede{color:var(--body)}
.lg2 .lg-worksec .lg-chead__rule{
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
/* the tiles now sit on white, so they need their own edge */
.lg2 .lg-worksec .lg-tile{
  box-shadow:0 24px 52px -34px rgba(21,18,16,.45);
}

/* --------------------------------------------------------------------------
   PLACEHOLDER — a crop-marked frame holding the real wordmark.
   The hatched box with "LG" set in type read as a missing asset. Corner crop
   marks are the mark-up a printer puts on artwork before it is trimmed, which
   is the right vernacular for this company and says "artwork pending" rather
   than "image failed". A slow sheen crosses it so the slot reads as live.
   -------------------------------------------------------------------------- */
.lg-ph{
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(134deg,#FBF6F2 0%,#FFFFFF 52%,#F7EFE9 100%);
}
.lg-ph::before{
  --m:rgba(21,18,16,.22);
  content:"";position:absolute;inset:13px;pointer-events:none;
  background:
    linear-gradient(var(--m),var(--m)) left top/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left top/1px 15px no-repeat,
    linear-gradient(var(--m),var(--m)) right top/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right top/1px 15px no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/1px 15px no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/15px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/1px 15px no-repeat;
}
.lg-ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:lg-sheen 4.6s ease-in-out infinite;
}
@keyframes lg-sheen{
  0%,58%{transform:translateX(-120%)}
  100%  {transform:translateX(120%)}
}
/* .lg-prod__pic img is absolutely positioned and object-fit:cover — that rule
   would blow the wordmark up to fill the slot, so this has to out-specify it */
.lg-prod__pic.lg-ph .lg-ph__logo{
  position:relative;inset:auto;z-index:1;
  width:clamp(92px,46%,160px);height:auto;
  max-width:60%;
  object-fit:contain;
  opacity:.34;
}

@media (prefers-reduced-motion:reduce){
  .lg-ph::after{animation:none;opacity:0}
}

/* --------------------------------------------------------------------------
   The works heading sets on a single line, and the block is pulled in.
   Elsewhere .lg-h2 strong is display:block, which stacks the two halves —
   here they run together, so the heading occupies one line instead of two and
   the air above and below it comes down with it.
   -------------------------------------------------------------------------- */
.lg2 .lg-worksec .lg-h2 strong{display:inline}
.lg2 .lg-worksec{padding-block:clamp(40px,4.4vw,68px)}
.lg2 .lg-worksec .lg-chead{margin-bottom:clamp(18px,2vw,30px)}
.lg2 .lg-worksec .lg-chead .lg-lede{margin-top:12px}
.lg2 .lg-worksec .lg-label{margin-bottom:11px}
.lg2 .lg-worksec .lg-chead__rule{margin-top:14px}

/* the hero copy is blurred and faded on scroll — hint it to its own layer */
.lg-hero__inner .lg-wrap{will-change:transform,opacity,filter}

/* ==========================================================================
   PASS 21 — both of these blocks were spending a screen each on content that
   is a footnote to the work itself. The process is four short stages and the
   sectors are eight words; neither earns the height it was taking.

   The numerals are gone from the process — 01–04 on a four-across strip is
   decoration, since the reading order already says the sequence — and the
   sector counts and bars are gone with them. At single digits the bars were
   near-empty tracks that read as broken rather than as data.
   ========================================================================== */

.lg2 .lg-proc{padding-block:clamp(38px,4vw,62px)}
.lg2 .lg-chead--tight{margin-bottom:clamp(22px,2.4vw,34px)}
.lg2 .lg-proc .lg-h2 strong{display:inline}

/* four across, tied by one hairline with a marker on each stage.
   Each stage is a card that lights as the scroll reaches it, so the row reads
   as a run from the first stage to the last rather than four equal boxes. The
   unlit state is a real state, not a hidden one — every card is legible before
   any of this runs, so a trigger that never fires costs nothing. */
.lg-steps4{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,20px);
  padding-top:34px;
  /* the strip holds the vanishing point, so each card's fold angle comes from
     where it sits along the rail rather than all four sharing one */
  perspective:1400px;
}
/* a 1px hairline in --line on this warm ground was all but invisible; the
   track is thicker and a shade darker so the fill has something to run along */
.lg-steps4__rail{
  position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:99px;
  background:rgba(21,18,16,.11);
}
.lg-steps4__rail i{
  display:block;height:100%;width:100%;border-radius:99px;
  /* flat brand orange: the three-stop ramp put a pale #FFA057 head on the
     rail, which was a second orange on screen */
  background:var(--orange);
  box-shadow:0 0 9px rgba(243,99,0,.26);
  transform:scaleX(0);transform-origin:left center;
}
.lg-step4{
  position:relative;
  padding:clamp(16px,1.6vw,22px) clamp(15px,1.5vw,20px) clamp(16px,1.7vw,22px);
  border-radius:14px;
  background:rgba(255,255,255,.46);
  border:1px solid transparent;
  /* The hinge runs through the dot, which sits 32px above the card's top edge
     (top:-38px + half of its 12px height). A point on the axis does not move,
     so the dot stays put on the rail while the card swings down from it.
     Keep this in step with .lg-step4__dot's `top` if that ever changes. */
  transform-origin:50% -32px;
  transition:background .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease);
}
.lg-step4.is-on{
  background:#fff;
  border-color:var(--line);
  box-shadow:0 20px 44px -30px rgba(21,18,16,.5);
}
.lg-step4__dot{
  position:absolute;top:-38px;left:clamp(15px,1.5vw,20px);
  width:12px;height:12px;border-radius:50%;
  background:#EFE2D9;
  box-shadow:0 0 0 3px var(--cream-deep);   /* sits the marker on the rail */
  transition:background .45s var(--ease),box-shadow .45s var(--ease),
             transform .45s var(--ease);
}
.lg-step4.is-on .lg-step4__dot{
  background:var(--orange);
  transform:scale(1.18);
  box-shadow:0 0 0 3px var(--cream-deep),
             0 0 0 7px rgba(243,99,0,.16),
             0 0 16px 2px rgba(243,99,0,.45);
}
.lg-step4__t{
  font-size:clamp(13px,1.05vw,15px);font-weight:900;line-height:1.16;
  text-transform:uppercase;letter-spacing:-.004em;color:var(--ink);
}
.lg-step4__when{
  display:block;margin-top:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  transition:color .45s var(--ease);
}
.lg-step4.is-on .lg-step4__when{color:var(--orange)}
.lg-step4__p{
  display:block;margin-top:9px;
  font-size:13px;line-height:1.55;color:var(--body);
}

/* with no JS, or with motion turned down, every card reads as lit and flat */
@media (prefers-reduced-motion:reduce){
  .lg-steps4{perspective:none}
  .lg-step4{background:#fff;border-color:var(--line);transform:none}
  .lg-step4__dot{background:var(--orange)}
  .lg-step4__when{color:var(--orange)}
  .lg-steps4__rail i{transform:scaleX(1)}
}

@media (max-width:900px){
  .lg-steps4{grid-template-columns:repeat(2,1fr);row-gap:26px}
}
@media (max-width:560px){
  .lg-steps4{grid-template-columns:1fr;row-gap:20px;perspective:none}
  .lg-steps4__rail{display:none}
  .lg-step4__dot{display:none}
  .lg-step4{transform-origin:50% 0}
}

/* --------------------------------------------------------------------------
   SECTORS — the names, on one run. No counts, no tracks.
   -------------------------------------------------------------------------- */
.lg2 .lg-sectors-sec{padding-block:clamp(34px,3.6vw,56px)}
.lg-sectlist__head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:10px clamp(20px,3vw,44px);
  margin-bottom:clamp(18px,2vw,28px);
}
.lg2 .lg-sectlist__head .lg-h2{font-size:clamp(29px,4vw,58px)}
.lg2 .lg-sectlist__head .lg-h2 strong{display:inline}
.lg2 .lg-sectlist__head .lg-lede{margin:0;font-size:14.5px}

/* the rules belong to the run, not to each name — per-item borders broke the
   line into disconnected stubs of different lengths */
.lg-sectlist{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;
  gap:0 clamp(14px,2vw,30px);
  border-block:1px solid var(--line);
  padding-block:14px;
}
.lg-sectlist__item{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
  text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease);
}
.lg-sectlist__item:hover{color:var(--orange)}

@media (max-width:820px){
  .lg-sectlist{justify-content:flex-start;gap:12px clamp(16px,3vw,28px)}
}
@media (max-width:560px){
  .lg-sectlist__item{white-space:normal}
}

/* ==========================================================================
   PASS 22 — the count, as one band instead of a screen.
   A centred heading stacked over three widely-spaced figures with a
   description under each was spending 400px to say three numbers. It is one
   row now: the line of copy sits at the left as an opening phrase, the three
   figures run across from it, and the descriptions are gone — they restated
   what the rest of the page already shows.
   ========================================================================== */
.lg2 .lg-stats{
  background:var(--white);
  padding-block:clamp(24px,2.6vw,38px);
  margin-block:0;
}
/* the phrase now heads the band, centred and on one line */
/* .lg2 h2 in the reset is (0,1,1) and beats a lone class, so this has to be
   scoped to .lg2 or the margin below the heading is zeroed and the italic
   descender lands on top of the figures */
.lg2 .lg-tally__say{
  display:block;text-align:center;
  margin:0 0 clamp(24px,2.8vw,40px);
  font-size:clamp(26px,3.2vw,46px);line-height:1.16;
  font-weight:400;color:var(--ink);
  letter-spacing:-.02em;text-transform:none;
}
.lg-tally__say em{
  font-style:italic;color:var(--orange);
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.1em;
}
.lg-tally{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:start;
}
/* The short orange rule that used to sit between each figure and its label is
   gone. The label leads instead, in small orange caps, with the figure under
   it — orange carries type here rather than drawing a bar. Left-aligned
   against the hairline so the three read as columns of a table, not as three
   centred badges. */
.lg-tally__item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;
  padding:0 clamp(16px,2vw,30px);
  border-left:1px solid var(--line);
}
.lg-tally__item:first-child{border-left:none}
.lg-tally__l{
  display:block;
  font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);
}
.lg-tally__n{
  display:block;
  font-size:clamp(30px,3.5vw,52px);font-weight:400;
  line-height:.98;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .lg-tally{grid-template-columns:1fr;row-gap:0}
  .lg-tally__item{padding:14px 0 0;border-left:none;border-top:1px solid var(--line)}
  .lg-tally__item:first-child{border-top:none;padding-top:0}
}

/* ==========================================================================
   PASS 23 — the sectors, on a quiet ground with the names on a loop.

   This was the third full-bleed orange band inside a few screens — catalogue,
   figures panel, and this — and it was the one carrying the least weight: a
   heading and a list of sector names. On cream it steps gently between the
   cream-deep process block above and the white clients wall below, and orange
   is left to do one job here, on the second half of the heading.
   ========================================================================== */
.lg2 .lg-sectors-sec{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--cream-deep);
  color:var(--body);
  padding-block:clamp(19px,2vw,30px);
}
.lg2 .lg-sectors-sec .lg-sectlist__head{
  display:block;text-align:center;
  margin-bottom:clamp(13px,1.4vw,20px);
}
/* Was clamp(24px,2.6vw,38px), sized down for the old compact orange band, then
   48px. It now takes the site-wide .lg-h2 outright — the same size as "Four
   steps, no surprises" — so the two section heads either side of it match. */
.lg2 .lg-sectors-sec .lg-h2{color:var(--ink);font-size:clamp(29px,4vw,58px)}
.lg2 .lg-sectors-sec .lg-h2 strong{display:inline;color:var(--orange)}
.lg2 .lg-sectors-sec .lg-lede{
  margin:9px auto 0;color:var(--body);font-size:15px;
}

/* The track holds the set twice, so travelling exactly -50% lands the second
   copy where the first began and the loop has no seam. */
.lg-mq{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  /* the mask fades the loop out against whatever is behind it, so it follows
     the section's ground rather than assuming orange */
}
.lg-mq__track{
  display:flex;width:max-content;
  animation:lg-marquee 42s linear infinite;
  will-change:transform;
}
.lg-mq:hover .lg-mq__track{animation-play-state:paused}
.lg-mq__set{
  display:flex;align-items:center;
  gap:clamp(8px,0.9vw,12px);
  padding-right:clamp(8px,0.9vw,12px);
}
/* Each sector is a chip now. 10px of radius — noticeably rounded, but not a
   pill: the frames on this site sit at 8px and buttons at 6px, and the pill
   extreme was tried and rejected early on. */
.lg-mq__item{
  font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  padding:9px 18px;border-radius:10px;
  background:var(--white);border:1px solid var(--line);
}
/* The orange diamond separated bare words. Between two bordered chips it is
   one mark too many, so it stays in the markup but stops drawing — the gap
   does the separating. Give it its size back to bring it out of retirement. */
.lg-mq__sep{
  display:none;
  flex:none;width:6px;height:6px;border-radius:1px;
  background:var(--orange);
  transform:rotate(45deg);
}
@keyframes lg-marquee{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .lg-mq__track{animation:none}
}

/* ==========================================================================
   PASS 24 — one card transition, between the intro and the catalogue.
   The whole-page version of this was too much: every block stacking made the
   site feel broken. It earns its place in exactly one spot — the handoff from
   "a leading 3D signage & branding company" into "featured products" — where
   the intro is already pinned, so there is something for the orange panel to
   travel over.

   The panel is pulled up by a viewport and the intro is given a viewport of
   extra height to pay for it, so the page is exactly as long as it was and
   the showcase keeps its full scroll range.
   ========================================================================== */
.lg-catstack{position:relative;z-index:3;margin-top:-100svh}
.lg-prodsec{position:relative}

.lg-who__pin{will-change:transform}
.lg-who__pin::after{
  content:"";position:absolute;inset:0;z-index:9;
  background:#151210;opacity:var(--dim,0);pointer-events:none;
}

/* below 1080 the intro is not pinned at all, so there is nothing to slide
   over and the pull-up would drag the panel through live content */
@media (max-width:1080px){
  .lg-catstack{margin-top:0}
  .lg-who__pin::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-catstack{margin-top:0}
  .lg-who__pin::after{display:none}
}


/* ==========================================================================
   PASS 26 — seven-item nav with the products mega-menu.
   ========================================================================== */
.lg-head__bar{position:relative}
.lg-nav{gap:0}
.lg-nav__item{position:static}          /* the panel anchors to .lg-nav, not the item */

/* seven labels plus a logo and a CTA is a lot of pill to fill, so the items
   tighten rather than letting the bar outgrow its container */
.lg2 .lg-nav__item > a{
  display:flex;align-items:center;gap:5px;
  padding:10px 13px;font-size:11.5px;letter-spacing:.11em;
}
.lg2 .lg-nav__item > a span+span{left:13px;right:13px;top:10px}
.lg-nav__caret{
  width:9px;height:9px;flex:none;position:relative;z-index:2;
  transition:transform .4s var(--ease);
}
.lg-nav__item.has-kids:hover .lg-nav__caret,
.lg-nav__item.has-kids:focus-within .lg-nav__caret{transform:rotate(180deg)}
.lg-nav__item > a[aria-current="page"]{color:var(--orange)}

/* ---- the panel ---- */
.lg-mega{
  position:absolute;top:100%;left:50%;
  width:min(880px,calc(100vw - 40px));
  padding-top:16px;                      /* hover bridge: the gap stays hoverable */
  transform:translateX(-50%) translateY(-6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .38s var(--ease),visibility .3s;
  z-index:130;
}
.lg-nav__item.has-kids:hover .lg-mega,
.lg-nav__item.has-kids:focus-within .lg-mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.lg-mega__inner{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:18px;
  box-shadow:0 40px 90px -40px rgba(21,18,16,.45);
}
.lg-mega__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
}
.lg-mega__item{
  display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:12px;text-decoration:none;
  transition:background .3s var(--ease);
}
.lg-mega__item:hover{background:var(--cream)}
.lg-mega__pic{
  flex:none;width:50px;height:50px;border-radius:9px;overflow:hidden;
  display:grid;place-items:center;background:var(--cream);
}
.lg-mega__pic img{width:100%;height:100%;object-fit:cover;display:block}
.lg-mega__pic.lg-ph .lg-ph__logo{
  position:relative;inset:auto;width:76%;height:auto;object-fit:contain;opacity:.42;
}
.lg-mega__pic.lg-ph::before{inset:5px}      /* crop marks tighten at this size */
.lg-mega__txt{display:block;min-width:0}
.lg-mega__name{
  display:block;font-size:12.5px;font-weight:900;line-height:1.2;
  color:var(--ink);letter-spacing:-.004em;
}
.lg-mega__blurb{
  display:block;margin-top:3px;font-size:11.5px;line-height:1.35;
  color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.lg-mega__item:hover .lg-mega__name{color:var(--orange)}
.lg-mega__all{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);text-decoration:none;
}
.lg-mega__all svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.lg-mega__all:hover svg{transform:translateX(5px)}

@media (max-width:1240px){
  /* PASS 33: the nav used to shrink to 10.8px here, which made the most-read
     text on the site the smallest. The type holds at the 11.5px floor and the
     padding and tracking give up the width instead. */
  .lg2 .lg-nav__item > a{padding:10px 7px;font-size:11.5px;letter-spacing:.05em}
  .lg2 .lg-nav__item > a span+span{left:9px;right:9px}
}
@media (max-width:1080px){
  .lg-mega{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-mega{transition:none}
}

/* ==========================================================================
   PASS 27 — the products catalogue and the journal.
   ========================================================================== */

/* ---- OUR PRODUCTS ---- */
.lg-pgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.8vw,26px);
}
.lg-pcat{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
  scroll-margin-top:120px;                 /* the fixed header must not cover
                                              a category jumped to from the menu */
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.lg-pcat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)}
.lg-pcat__pic{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;overflow:hidden;background:var(--cream);
}
.lg-pcat__pic img{width:100%;height:100%;object-fit:cover;display:block}
.lg-pcat__pic.lg-ph .lg-ph__logo{
  position:relative;inset:auto;width:clamp(92px,46%,160px);height:auto;
  object-fit:contain;opacity:.34;
}
.lg-pcat__body{
  padding:20px 22px 22px;display:flex;flex-direction:column;gap:7px;flex:1;
}
.lg-pcat__n{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--orange);
}
.lg-pcat__name{
  font-size:16px;font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.008em;line-height:1.2;
}
.lg-pcat__blurb{
  font-size:13.5px;line-height:1.55;color:var(--body);flex:1;
}
.lg-pcat__cta{
  display:flex;align-items:center;gap:7px;margin-top:6px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);text-decoration:none;
}
.lg-pcat__cta svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.lg-pcat:hover .lg-pcat__cta svg{transform:translateX(5px)}

@media (max-width:1280px){ .lg-pgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1080px){ .lg-pgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .lg-pgrid{grid-template-columns:1fr} }

/* ---- BLOG ---- */
.lg-posts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,30px);
}
.lg-post{display:flex}
.lg-post__link{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;border-radius:16px;overflow:hidden;
  background:var(--white);border:1px solid var(--line-soft);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.lg-post__link:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line)}
.lg-post__pic{
  position:relative;display:grid;place-items:center;
  aspect-ratio:16/10;overflow:hidden;background:var(--cream);
}
.lg-post__pic img{width:100%;height:100%;object-fit:cover;display:block}
.lg-post__pic.lg-ph .lg-ph__logo{
  position:relative;inset:auto;width:clamp(88px,42%,150px);height:auto;
  object-fit:contain;opacity:.32;
}
.lg-post__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.lg-post__meta{
  display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.lg-post__cat{color:var(--orange)}
.lg-post__title{
  display:block;font-size:17px;font-weight:900;line-height:1.22;
  color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;
}
.lg-post__ex{display:block;font-size:13.5px;line-height:1.6;color:var(--body);flex:1}
.lg-post__more{
  display:flex;align-items:center;gap:7px;margin-top:4px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);
}
.lg-post__more svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.lg-post__link:hover .lg-post__more svg{transform:translateX(5px)}

.lg-pager{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:clamp(30px,3.4vw,48px);
}
.lg-pager a,.lg-pager span{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 13px;
  border:1px solid var(--line);border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;
  color:var(--body);text-decoration:none;
  transition:border-color .35s,color .35s,background .35s;
}
.lg-pager a:hover{border-color:var(--orange);color:var(--orange)}
.lg-pager .current{background:var(--orange);border-color:var(--orange);color:#fff}

.lg-empty{
  text-align:center;max-width:52ch;margin-inline:auto;
  padding-block:clamp(30px,4vw,60px);
}
.lg-empty p{margin:12px 0 24px;color:var(--body)}

@media (max-width:1080px){ .lg-posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .lg-posts{grid-template-columns:1fr} }

/* ==========================================================================
   PASS 28 — ABOUT US rebuilt in the homepage's language.
   The old page was a dark banner over a stack of evenly-weighted blocks. This
   opens light with the facility photograph carrying the top, breaks once on an
   orange field for the mission and vision, and reuses the parts the homepage
   already established — the tally band, the lit cards, the crop-marked
   placeholder — so the two pages read as one site.
   ========================================================================== */

/* ---- head: copy left, photograph right, on the warm ground ---- */
.lg2 .lg-ahead{
  background:linear-gradient(168deg,var(--cream) 0%,#FBEFE8 100%);
  padding-block:clamp(112px,11vw,168px) clamp(36px,4vw,62px);
}
.lg-ahead__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4vw,64px);align-items:center;
}
.lg2 .lg-ahead .lg-h1{font-size:clamp(34px,4.6vw,64px)}
.lg2 .lg-ahead .lg-h1 strong{display:inline}
.lg2 .lg-ahead .lg-lede{margin-top:16px;max-width:46ch}
.lg2 .lg-ahead .lg-facts--tight{max-width:none;margin-top:clamp(22px,2.6vw,34px)}
.lg-ahead__pic{
  margin:0;aspect-ratio:4/3.1;overflow:hidden;border-radius:16px;
  background:var(--ink-2);
  box-shadow:0 40px 90px -50px rgba(21,18,16,.6);
}
.lg-ahead__pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- who we are: statement left, prose right, then a strip of the work ---- */
.lg2 .lg-whoami{background:var(--white);padding-block:clamp(46px,5vw,80px)}
.lg-whoami__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,70px);align-items:start;
}
.lg2 .lg-whoami .lg-h2 strong{display:inline}
.lg-whoami__body p{font-size:15.5px;line-height:1.68;color:var(--body)}
.lg-whoami__body p + p{margin-top:14px}
.lg-whoami__strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(26px,3vw,44px);
}
.lg-whoami__strip figure{
  margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--cream);
}
.lg-whoami__strip img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out);
}
.lg-whoami__strip figure:hover img{transform:scale(1.06)}
/* the strip's img rule is cover-to-fill, which would stretch the logo mark —
   placeholders contain it instead, same as every other .lg-ph on the site */
.lg-whoami__strip figure.lg-ph .lg-ph__logo{
  position:relative;inset:auto;width:clamp(74px,42%,132px);height:auto;
  object-fit:contain;opacity:.34;
}
.lg-whoami__strip figure.lg-ph:hover .lg-ph__logo{transform:none}

/* ---- mission & vision ----
   Two solid orange slabs with a coloured glow, on a peach wash, directly under
   the figures band — the loudest thing on the page for two sentences of copy.

   Now: the statements carry themselves. Ink type at reading size on the plain
   ground, an index and a label above each, and a rule between them instead of
   two filled boxes. Orange is left on the labels. No fill, no shadow, no wash. */
.lg2 .lg-mvband{
  position:relative;
  background:var(--white);
  padding-block:clamp(44px,5vw,78px);
  border-top:1px solid var(--line);
}
.lg-mv2{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.4vw,76px);align-items:start;
}
.lg2 .lg-mv2__col{
  display:flex;flex-direction:column;
  padding:0;background:none;border-radius:0;box-shadow:none;color:var(--body);
}
/* the second statement is ruled off from the first rather than boxed away */
@media (min-width:861px){
  .lg2 .lg-mv2__col + .lg-mv2__col{
    padding-left:clamp(28px,4.4vw,76px);
    border-left:1px solid var(--line);
  }
}
.lg-mv2__n{
  display:block;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.lg-mv2__tag{
  display:block;margin-bottom:14px;
  font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);
}
.lg-mv2__text{
  margin:0;color:var(--ink);font-weight:500;
  font-size:clamp(17px,1.7vw,23px);line-height:1.45;letter-spacing:-.01em;
}
@media (max-width:860px){
  .lg-mv2{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
}

/* ---- values: the lit-card strip, on the deeper cream ---- */
.lg2 .lg-valsec{
  background:var(--cream-deep);
  border-block:1px solid var(--line);
  padding-block:clamp(38px,4vw,62px);
}
.lg2 .lg-valsec .lg-h2 strong{display:inline}

/* ---- team ---- */
.lg2 .lg-teamsec{background:var(--white);padding-block:clamp(42px,4.6vw,72px)}
.lg2 .lg-teamsec .lg-h2 strong{display:inline}
.lg-member{display:flex;flex-direction:column;gap:12px}
.lg2 .lg-member__pic{
  position:relative;display:grid;place-items:center;
  aspect-ratio:3/3.4;border-radius:14px;overflow:hidden;
}
.lg2 .lg-member__pic.lg-ph .lg-ph__logo{
  position:relative;inset:auto;width:clamp(84px,52%,140px);height:auto;
  object-fit:contain;opacity:.3;
}

/* ==========================================================================
   PASS 29 — the four contact routes as orange panels.
   They were four cells of a hairline table, which read as a spreadsheet. Now
   they are the brand colour and behave like panels being fitted: the grid
   carries the perspective so each one hinges from its own top edge.

   Under the pointer a white panel sweeps up and the type flips to ink — the
   same fill the secondary button makes (.lg-btn--line, PASS 17), so hovering
   anything on this site lightens rather than darkens.
   ========================================================================== */
.lg2 .lg-routes{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
  border:0;perspective:none;
}
/* Solid orange slabs with a coloured glow — four of them in a row — were the
   loudest thing on the page, for four phone numbers. Same correction already
   made to the mission band: the panel keeps its shape, but the weight inverts.
   White ground, a hairline to draw it, and orange left on the label. */
.lg2 .lg-route{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,26px);
  border:1px solid var(--line);border-radius:16px;
  /* white on a white section left the hairline doing all the work and the
     panel read as nothing. The tinted ground is 11 points off the page —
     enough to be a card, not enough to be a slab. */
  background:var(--cream-deep);
  color:var(--ink);text-decoration:none;
  box-shadow:none;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
/* hover still lightens, so the fill is now white crossing left to right */
.lg2 .lg-route::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  transform:translateX(-101%);
  transition:transform .9s var(--ease-out);
}
.lg2 .lg-route:hover::before{transform:translateX(0)}
.lg2 .lg-route:hover{
  border-color:var(--ink);
  transform:translateY(-3px);
}
.lg2 .lg-route__label{
  margin:0;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);
  transition:color .45s var(--ease);
}
.lg2 .lg-route__value{
  margin:0;font-size:clamp(16.5px,1.5vw,21px);font-weight:900;
  color:var(--ink);letter-spacing:-.015em;line-height:1.2;
  transition:color .45s var(--ease);
}
.lg2 .lg-route__note{
  margin:0;font-size:12.5px;line-height:1.45;color:var(--body);
  transition:color .45s var(--ease);
}
/* the value is the thing being offered, so it is what takes the colour */
.lg2 .lg-route:hover .lg-route__value{color:var(--orange)}
@media (prefers-reduced-motion:reduce){
  .lg2 .lg-route::before{transition:none}
}

/* ==========================================================================
   PASS 30 — SERVICES rebuilt: a sticky discipline panel and a seamed matrix.

   What this replaced was seven identical two-column blocks, one after the
   other: heading and photo left, a flat bordered list right. Nothing told you
   where you were in the page, and a three-item discipline was drawn at exactly
   the same weight as an eight-item one.

   Three moves fix that:
   1. An index strip that sticks under the header, so all seven disciplines
      stay visible as a set and the current one is marked.
   2. Each discipline opens with a banner head — index, name, count, lede and
      one photograph across the full width — before any capability is listed,
      which gives the page a beat instead of a drone.
   3. The capabilities then take the whole 1340px in a three-column matrix
      whose cells share hairlines rather than each carrying a border, so 34
      entries read as one system instead of 34 boxes.

   Nothing here uses overflow:hidden. The index strip is sticky and a clipping
   ancestor would silently kill it.
   ========================================================================== */

/* ---- index strip ---- */
.lg-dnav{
  position:sticky;top:96px;z-index:90;
  padding-block:12px;margin-bottom:clamp(6px,1vw,14px);
  pointer-events:none;                       /* the row itself takes the events */
}
.lg-dnav__row{
  pointer-events:auto;
  display:flex;align-items:center;gap:18px;
  padding:7px 8px 7px 18px;border-radius:14px;
  background:rgba(253,243,239,.86);border:1px solid var(--line);
  backdrop-filter:saturate(1.8) blur(18px);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);
  box-shadow:0 16px 40px -30px rgba(21,18,16,.5);
}
.lg-dnav__lead{
  flex:none;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.lg-dnav__list{
  display:flex;gap:2px;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.lg-dnav__list::-webkit-scrollbar{display:none}
.lg-dnav__link{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 13px;border-radius:9px;text-decoration:none;
  transition:background .38s var(--ease),color .38s var(--ease);
}
.lg-dnav__link i{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--muted);transition:color .38s var(--ease);
}
.lg-dnav__link{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.lg-dnav__link b{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;
  min-width:18px;padding:2px 0;border-radius:5px;text-align:center;
  background:var(--cream-deep);color:var(--body);
  transition:background .38s var(--ease),color .38s var(--ease);
}
.lg-dnav__link:hover{background:var(--cream-deep)}
.lg-dnav__link.is-on{background:var(--ink);color:#fff}
.lg-dnav__link.is-on i{color:var(--orange)}
.lg-dnav__link.is-on b{background:var(--orange);color:#fff}

/* ---- a discipline ---- */
.lg-disc{
  position:relative;
  scroll-margin-top:172px;                   /* fixed header + index strip */
  /* Seven of these stack up, so they do not use the site-wide .lg-sec rhythm —
     at 1400px that was 84px top and bottom each, 1,176px of the page spent on
     air. The alternating grounds already separate them. */
  padding-block:clamp(38px,3.4vw,56px);
}
.lg-disc--alt{background:var(--white)}
/* No ghost numeral here. The index strip, the 01/07 counter and the per-cell
   numbers already carry the counting three times over; a giant outlined digit
   on top of that is decoration, and it collided with the photograph. */
.lg-disc .lg-wrap{position:relative;z-index:1}

/* One row per discipline: every word in the left column, the photograph in the
   right. The figure spans both rows and stretches, so its height is whatever
   the copy and the matrix add up to — it never lengthens the page on its own,
   and a discipline with more capabilities simply gets a taller picture. */
.lg-disc__grid{
  display:grid;
  grid-template-columns:1.24fr .76fr;
  grid-template-rows:auto 1fr;
  gap:clamp(18px,1.9vw,28px) clamp(24px,2.8vw,46px);
  align-items:start;
}
.lg-disc__say{grid-column:1;grid-row:1}
.lg-mx{grid-column:1;grid-row:2}
.lg-disc__pic{grid-column:2;grid-row:1/3;align-self:stretch}
.lg-disc__idx{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  color:var(--orange);
}
.lg-disc__idx em{font-style:normal;color:var(--muted)}
.lg-disc__name{
  margin:7px 0 0;font-size:clamp(36px,4.1vw,56px);font-weight:900;
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);
}
.lg-disc__count{
  display:block;margin-top:7px;
  font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.lg-disc__lede{
  margin:12px 0 0;max-width:42ch;
  font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--body);
}
/* The figure is a stretched, empty cell that claims the full height of the row;
   the frame inside fills it. No aspect-ratio and no intrinsic height anywhere,
   so the photograph never lengthens the page — a discipline with more
   capabilities just gets a taller picture.
   These sources are 1.4:1 landscape, so a tall frame crops hard: at the 597px
   of the Signage row, cover() drops 43% of the width. The subject of each photo
   is not always dead centre, so the template passes a per-photo focal point
   (the optional 4th field of each group) through to object-position. */
.lg-disc__pic{position:relative;margin:0;align-self:stretch}
.lg-disc__frame{
  position:relative;display:block;height:100%;min-height:300px;
  overflow:hidden;border-radius:12px;border:1px solid var(--line);
  background:var(--ink-2);
}
.lg-disc__frame img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transform:scale(1.02);transition:transform 1.4s var(--ease-out);
}
.lg-disc__frame:hover img{transform:scale(1.07)}
.lg-disc__cta{margin-top:clamp(14px,1.4vw,20px)}
.lg-disc__cta svg{width:15px;height:15px;transition:transform .5s var(--ease)}
.lg-disc__cta:hover svg{transform:translateX(5px)}

/* ---- the capability matrix ---- */
.lg-mx{
  display:grid;grid-template-columns:repeat(2,1fr);
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.lg-mx__cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The group sizes are 3, 4, 6 and 8, so an odd count leaves a hole in the last
   row of a seamed grid. The orphan takes the whole row instead. */
.lg-mx__cell:nth-child(odd):last-child{grid-column:1/-1}
.lg-mx__cell a{
  position:relative;height:100%;
  display:grid;grid-template-columns:auto 1fr auto;gap:5px 14px;
  align-content:start;padding:clamp(14px,1.2vw,17px) clamp(14px,1.35vw,19px);
  text-decoration:none;transition:background .42s var(--ease);
}
/* the lit edge: the same move the CTA panel makes, at cell scale */
.lg-mx__cell a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--orange);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease);
}
.lg-mx__cell a:hover{background:var(--white)}
.lg-disc--alt .lg-mx__cell a:hover{background:var(--cream)}
.lg-mx__cell a:hover::before{transform:scaleY(1)}
.lg-mx__n{
  grid-column:1;grid-row:1;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:var(--muted);line-height:2.1;transition:color .42s var(--ease);
}
.lg-mx__cell a:hover .lg-mx__n{color:var(--orange)}
.lg-mx__name{
  grid-column:2;grid-row:1;display:block;
  font-size:clamp(13.5px,1.05vw,15px);font-weight:900;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.25;
}
.lg-mx__note{
  grid-column:2;grid-row:2;display:block;
  font-size:12.5px;line-height:1.45;color:var(--body);
}
.lg-mx__go{
  grid-column:3;grid-row:1;width:15px;height:15px;color:var(--orange);
  opacity:0;transform:translateX(-7px);
  transition:opacity .38s,transform .5s var(--ease);
}
.lg-mx__cell a:hover .lg-mx__go{opacity:1;transform:none}

@media (max-width:1080px){
  /* explicit placement has to go before `order` can do anything */
  .lg-disc__grid{grid-template-columns:1fr;grid-template-rows:auto;gap:clamp(20px,2.6vw,28px)}
  .lg-disc__say,.lg-mx,.lg-disc__pic{grid-column:1;grid-row:auto}
  .lg-disc__say{order:1}
  .lg-disc__pic{order:2;align-self:auto}
  .lg-disc__frame{height:auto;min-height:0;aspect-ratio:16/9}
  .lg-mx{order:3}
  .lg-disc__lede{max-width:56ch}
}
@media (max-width:640px){
  .lg-dnav{top:78px;padding-block:10px}
  .lg-dnav__row{gap:12px;padding-left:14px}
  .lg-dnav__lead{display:none}
  .lg-disc{scroll-margin-top:148px}
  .lg-mx{grid-template-columns:1fr}
  .lg-mx__cell:nth-child(odd):last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .lg-disc__frame img,.lg-mx__cell a::before{transition:none}
}



/* ==========================================================================
   PASS 31 — the figures move inside the pinned WHO WE ARE viewport.

   They were a white band of their own, bracketed top and bottom by orange
   seams, sitting between this section and the process strip. Two problems:
   the pin was leaving ~80px of dead space under its own content, and the band
   added a full section's height to the page to say three numbers.

   The strip now closes the pinned viewport. The wrap becomes a column with
   the content at the top and the figures pushed to the foot, so the copy and
   the showcase rise and the gap is used rather than padded out.

   New figure style, per request — no orange rule under the number. The label
   goes ABOVE in small orange caps and the figure sits under it, left-aligned
   against a hairline. Orange carries type here instead of drawing a bar.
   ========================================================================== */
.lg-who__pin>.lg-wrap{
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;gap:clamp(12px,1.4vw,20px);
}
/* the pin was centring one block; it now holds a column that fills it */
.lg2 .lg-who__pin{
  align-items:stretch;
  padding-block:clamp(132px,10.2vw,140px) clamp(16px,1.8vw,24px);
}
/* No auto margins: they absorb all the free space and re-centre the block,
   which is what left a band of nothing above the copy. The column is
   space-between, so the content sits under the header and the figures hold
   the foot, with the slack as breathing room above the ruled strip. */

/* the strip is ruled off from the content above it and sits a size smaller
   here than it does as a band of its own on /about-us/ */
/* A quiet panel, not an orange slab. It was the full brand gradient with a
   coloured glow under it, which on a white page was the loudest thing in the
   section — for three numbers. It keeps the box (that is what made it visible
   in the first place) on the neutral second ground, with a hairline instead of
   a shadow, and orange left on the labels only. */
.lg-whotally{
  /* less above than below, so the pair sits high in the panel rather than
     floating in the middle of it */
  padding:clamp(11px,1.2vw,16px) clamp(16px,1.8vw,26px) clamp(15px,1.6vw,22px);
  border-radius:16px;
  /* white, same as the section it sits in — the hairline is what draws it, so
     the panel is a frame around the figures rather than a tinted block */
  background:var(--white);
  border:1px solid var(--line);
  margin-bottom:clamp(12px,1.4vw,20px);
}
/* the deck is sized off its own width, so on a short viewport it is what
   pushes the figures past the fold — cap it against the space actually left */
.lg-showcase__deck{max-height:min(58svh,calc(100svh - 396px))}
.lg-shot{max-height:min(58svh,calc(100svh - 396px))}
/* the figure is the point of the panel, so it gets the size */
.lg2 .lg-whotally .lg-tally__n{color:var(--ink);font-size:clamp(30px,3.5vw,52px)}
/* pulled up under its label instead of sitting a line away from it */
.lg2 .lg-whotally .lg-tally__item{gap:1px}

@media (max-width:1080px){
  /* the pin unwinds into a static block; the column no longer has a fixed
     height to distribute, so let everything flow */
  .lg-who__pin>.lg-wrap{display:block;height:auto}
  .lg-who__top{margin-block:0}
  .lg-whotally{margin-top:clamp(26px,3.4vw,40px)}
}
@media (max-width:560px){
  .lg2 .lg-whotally .lg-tally{grid-template-columns:1fr;row-gap:0}
  .lg2 .lg-whotally .lg-tally__item{
    border-left:none;border-top:1px solid var(--line);
    padding:14px 0 0;
  }
  .lg2 .lg-whotally .lg-tally__item:first-child{border-top:none;padding-top:0}
}

/* --------------------------------------------------------------------------
   The pinned viewport now has to hold the copy, the showcase AND the figures.
   On a 900px browser window that fits with room; on a typical laptop window
   (~780px of viewport) the LEFT column is what runs past the fold — the deck
   already caps itself against available height, the copy does not.

   So below 840px of viewport height the left column tightens: the heading
   sets closer, the lede is a size down, and the facts table loses its padding.
   Width-gated to 1081px and up, because that is the only place the pin runs.
   -------------------------------------------------------------------------- */
@media (min-width:1081px) and (max-height:840px){
  .lg2 .lg-who__pin{padding-block:clamp(126px,9.6vw,134px) clamp(14px,1.4vw,18px)}
  .lg-who__pin>.lg-wrap{gap:clamp(10px,1.1vw,16px)}
  .lg-who__say{padding-block:0}
  .lg2 .lg-who__say .lg-h2{font-size:clamp(30px,3.1vw,44px);line-height:1.04}
  .lg-who__say .lg-lede{
    margin-top:12px;font-size:15px;line-height:1.5;max-width:46ch;
  }
  .lg-who__say .lg-btn{margin-top:18px;min-height:46px;padding-block:12px}
  .lg-facts--tight{margin-top:18px}
  .lg-facts--tight .lg-fact{padding:11px 16px}
  .lg-whotally{padding-block:9px 13px;margin-bottom:10px}
  .lg2 .lg-whotally .lg-tally__n{font-size:clamp(26px,2.7vw,38px)}
}

/* --------------------------------------------------------------------------
   Fill the pin rather than pad it out.

   With the copy at the top and the figures at the foot, the middle was left
   with ~150px of nothing — the same hole, moved. The content column cannot
   grow, but the photograph can: the top block takes the free space and the
   deck stretches into it, so the image is as large as the viewport allows and
   there is no gap to look at. Everything inside .lg-showcase__deck is
   absolutely positioned (.lg-shot, the canvas), so it is safe to let the
   deck's height come from the layout instead of a fixed 16/9.

   Only above 1081px — below that the pin unwinds and the deck goes back to
   flowing at its own ratio.
   -------------------------------------------------------------------------- */
@media (min-width:1081px){
  .lg-who__top{flex:1 1 auto;min-height:0;align-items:stretch}
  .lg-who__say{align-self:center}
  .lg-showcase{display:flex;flex-direction:column;min-height:0}
  .lg-showcase__deck{
    flex:1 1 auto;min-height:0;aspect-ratio:auto;
    max-height:min(58svh,calc(100svh - 300px));
  }
  .lg-shot{max-height:none}
}

/* --------------------------------------------------------------------------
   The copy column is centred against the photograph, which is the taller of
   the two in the middle range of window heights. Bias that centring upwards a
   little so the heading sits nearer the top of the frame.

   A bottom margin rather than align-self:start: start would slam it to the top
   of the row and open a large hole above the figures. Centring accounts for
   the margin, so this shifts the block up by half of it.

   Height-gated on purpose. Outside 660-900px the copy is the TALLER column —
   it already fills the row and sits at the top, so there is no slack to bias
   and a nudge would push it under the header bar.
   -------------------------------------------------------------------------- */
@media (min-width:1081px) and (min-height:700px) and (max-height:900px){
  .lg-who__say{margin-bottom:clamp(50px,5.9vw,88px)}
}
/* 660-700px has only ~28px of slack to play with, so it gets the smaller
   bias — the full one would put the label under the header bar */
@media (min-width:1081px) and (min-height:660px) and (max-height:699px){
  .lg-who__say{margin-bottom:clamp(20px,2.2vw,30px)}
}

/* --------------------------------------------------------------------------
   Second tier. Below ~660px of viewport the copy column becomes the taller of
   the two again and, even compacted, ran into the figures' rule — measured a
   6px overlap at 573px. The deck cannot give any more back (it is already
   height-capped), so the copy has to. Same levers, pushed further.
   -------------------------------------------------------------------------- */
@media (min-width:1081px) and (max-height:659px){
  .lg2 .lg-who__pin{padding-block:clamp(116px,8.8vw,122px) 12px}
  .lg2 .lg-who__say .lg-h2{font-size:clamp(25px,2.5vw,34px);line-height:1.03}
  .lg-who__say .lg-lede{margin-top:9px;font-size:14px;line-height:1.45}
  .lg-who__say .lg-btn{margin-top:13px;min-height:42px;padding-block:10px}
  .lg-facts--tight{margin-top:13px}
  .lg-facts--tight .lg-fact{padding:8px 14px}
  .lg2 .lg-whotally .lg-tally__n{font-size:clamp(23px,2.3vw,30px)}
  .lg-whotally{padding-block:7px 10px;margin-bottom:8px}
}

/* --------------------------------------------------------------------------
   PRODUCTS band: one line, and less air around it.

   `.lg-h2 strong` is display:block by default so every two-tone heading stacks;
   this section reads better on one line, which also saves a whole line of
   height. The markup needed a space between the two halves — it had none,
   because stacked it never required one.

   The band was carrying the site-wide 84px of section padding top and bottom
   plus a 48px gap under the heading, which is what made it feel empty.
   -------------------------------------------------------------------------- */
.lg2 .lg-prodsec{padding-block:clamp(38px,4.2vw,60px)}
.lg2 .lg-prodsec .lg-h2 strong{display:inline}
.lg2 .lg-prodsec .lg-chead{margin-bottom:clamp(18px,2vw,30px)}
.lg2 .lg-prodsec .lg-chead .lg-lede{margin-top:10px}
.lg2 .lg-prodsec .lg-chead__rule{margin-top:15px}

/* PASS 32 removed. The works panel used to ride up over the catalogue the way
   the catalogue rides over the intro — a second card-over-card handoff, back
   to back with the first. One is a signature move; two in a row read as the
   page fighting you, and this one needed 150svh of runway plus a sticky park
   to work at all. The intro handoff earns it (the intro is genuinely pinned
   and exactly one viewport tall); this one did not. Works simply follows now.
   ========================================================================== */

/* ==========================================================================
   PASS 33 — the closing CTA, redesigned minimal.

   It was a black slab with an orange bloom in one corner, a filament hairline
   along the top edge and a scroll-linked "sign switching on" — heavy, and the
   only dark block on an otherwise warm light page.

   Now there is no panel at all: a hairline, the ask on the left, the three
   ways to reach them on the right, on white. Orange is left to the italic
   half of the heading and the one button that matters.
   ========================================================================== */
.lg2 .lg-cta{background:var(--white)}
.lg2 .lg-cta__inner{
  position:static;background:none;overflow:visible;
  border-radius:0;box-shadow:none;
  padding:clamp(30px,3.6vw,52px) 0 0;
  border-top:1px solid var(--line);
}
.lg2 .lg-cta__inner::before,
.lg2 .lg-cta__inner::after{content:none}

.lg2 .lg-cta__grid{
  grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
}
.lg2 .lg-cta .lg-h2{color:var(--ink)}
.lg2 .lg-cta .lg-h2 strong{color:var(--orange);font-size:1em}
.lg2 .lg-cta p{
  color:var(--body);margin-top:14px;max-width:46ch;
  font-size:clamp(15px,1.3vw,16.5px);line-height:1.6;
}

/* a row that wraps, not a stack — three buttons down the side of a panel was
   part of what made it feel like an advert */
.lg2 .lg-cta__actions{
  flex-direction:row;flex-wrap:wrap;justify-content:flex-end;
  gap:10px;
}
/* --ghost is a white outline meant for the dark slab; on white it vanished */
.lg2 .lg-cta .lg-btn--ghost{
  border:1.5px solid var(--line);color:var(--ink);background:none;
}
.lg2 .lg-cta .lg-btn--ghost:hover{
  background:var(--ink);border-color:var(--ink);color:#fff;
  transform:translateY(-3px);
}

@media (max-width:900px){
  .lg2 .lg-cta__grid{grid-template-columns:1fr}
  .lg2 .lg-cta__actions{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   Close the gap around the CTA. With the dark panel gone there is no block to
   hold the space open any more, so the site-wide 84px of section padding on
   both sides of the boundary read as 168px of nothing between the logo wall
   and the hairline. The section that ends and the section that starts each
   give some of it back.
   -------------------------------------------------------------------------- */
.lg2 .lg-clients{padding-bottom:clamp(32px,3.2vw,46px)}
.lg2 .lg-cta{padding-block:clamp(28px,2.9vw,40px) clamp(38px,4vw,56px)}
.lg2 .lg-cta__inner{padding-top:clamp(22px,2.3vw,32px)}

/* ==========================================================================
   PASS 34 — the intro, minimal.

   It was a full-screen cream veil with the wordmark, a 0-100 counter at
   display size and a 2px orange bar across the whole foot of the window —
   three things all saying the same one thing, and it could hold for 5.2s.

   Now: the wordmark, and a short rule under it that fills. The progress is
   still real (it counts decoded photographs, not a timer), it just stops
   announcing itself. The counter markup is gone from lg2.js, so .lg-boot__pct
   no longer exists.
   ========================================================================== */
.lg2 .lg-boot{gap:clamp(16px,1.8vw,22px);transition:opacity .55s var(--ease),visibility .55s}
.lg-boot__mark img{height:clamp(28px,3.2vw,40px)}
/* the bar was pinned across the bottom of the window; it is a short rule
   under the wordmark now, the width of the mark itself */
.lg2 .lg-boot__bar{
  position:static;display:block;
  /* 1px on a white page is a hairline you cannot see fill — 3px reads as a
     progress bar while still being a rule rather than a slab */
  width:clamp(116px,13vw,160px);height:3px;
  background:var(--line);overflow:hidden;
  border-radius:999px;
  animation:none;
}
.lg2 .lg-boot__bar b{
  display:block;width:100%;height:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
}


/* --------------------------------------------------------------------------
   The CTA needed an edge. Stripping the black panel left it white on white —
   correct, but with nothing to tell you a new block had started; the hairline
   alone was not enough to carry it.

   It is a white card now, on the cream ground, with the same hairline and
   radius as the product and route cards. The rule at the top goes: the box
   does that job, and both together was a line too many.
   -------------------------------------------------------------------------- */
/* The card has to sit on the second ground, not the first — with --cream now
   pure white this was white-on-white and the block disappeared, which is the
   thing the card was added to fix. */
.lg2 .lg-cta{background:var(--cream-deep);padding-block:clamp(30px,3.2vw,46px) clamp(34px,3.6vw,52px)}
.lg2 .lg-cta__inner{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);
  border-radius:16px;
  padding:clamp(26px,3vw,44px) clamp(24px,2.8vw,40px);
  box-shadow:0 2px 6px rgba(21,18,16,.03);
}

/* The card's own padding took ~80px out of the row, which pushed the heading
   to three lines and dropped "Email us" onto a second one. The actions column
   takes only the width the three buttons need; the copy gets everything else. */
.lg2 .lg-cta__grid{grid-template-columns:1fr auto}
.lg2 .lg-cta__actions{flex-wrap:nowrap}
@media (max-width:1180px){
  .lg2 .lg-cta__actions{flex-wrap:wrap}
}

/* Still one line short for the headline. The gap between the two columns and
   the card's side padding give the copy back the ~40px it needed. */
.lg2 .lg-cta__grid{gap:clamp(20px,2.3vw,34px)}
.lg2 .lg-cta__inner{padding-inline:clamp(20px,2.2vw,32px)}

/* "TELL US WHAT YOU NEED." wants ~690px at the site-wide .lg-h2 size and the
   column inside the card is 645. A size down fits it on one line, which is
   what the two-tone heading is built for — the break belongs between the
   halves, not inside the first one. */
.lg2 .lg-cta .lg-h2{font-size:clamp(27px,3.3vw,47px)}

/* ==========================================================================
   PASS 36 — the product photography.

   The shoot is 1122x1402 — 4:5 portrait, full-bleed compositions rather than
   objects cut out on white. Both product frames were 4:3 landscape, which
   would have thrown away a quarter of every shot's height. They are 4:5 now,
   so each photograph is shown as it was composed, with no crop at all.

   cover, not contain: these fill their frames edge to edge, so contain would
   letterbox them against the cream and read as a mistake.
   ========================================================================== */
.lg2 .lg-prod__pic{aspect-ratio:4/5}
.lg2 .lg-pcat__pic{aspect-ratio:4/5}
.lg2 .lg-pcat__pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   PASS 37 — two shots per product, sliding on their own.

   Each product was photographed more than once, so the card shows both: a
   two-frame track that slides sideways and back, with no click and no hover
   needed. It is CSS only — no trigger, no scroll dependency, nothing that can
   strand a card mid-slide if a script fails.

   The cards are staggered by index (--slide-delay, 0 to 3.2s in 0.8s steps)
   so a grid of sixteen never flips as one block. Cards whose product only had
   a single shot render a plain <img> and simply do not move.
   ========================================================================== */
.lg-slides{
  position:absolute;inset:0;z-index:1;
  display:flex;width:200%;height:100%;
  animation:lg-slides 9s cubic-bezier(.76,0,.24,1) infinite;
  animation-delay:var(--slide-delay,0s);
  will-change:transform;
}
/* out-specifies .lg-pcat__pic img / .lg-prod__pic img, which are sized to
   fill the frame on their own and would each take the whole track */
.lg2 .lg-slides img{
  position:static;flex:none;
  width:50%;height:100%;object-fit:cover;display:block;
  transform:none;
}
@keyframes lg-slides{
  0%,   42% {transform:translateX(0)}
  50%,  92% {transform:translateX(-50%)}
  100%      {transform:translateX(0)}
}
/* hovering a card holds whichever frame is showing, so the photograph can be
   looked at rather than moving away from the pointer */
.lg-pcat:hover .lg-slides,
.lg-prod:hover .lg-slides{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .lg-slides{animation:none}
}

/* The mega-menu now carries 25 products rather than 16 categories; three
   columns made a nine-row drawer. Four columns bring it back to seven. */
@media (min-width:1200px){
  .lg-mega__grid{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   PASS 38 — the product detail page, /our-products/<slug>/.

   Photographs down the left at the size the shoot deserves, the description
   and specification to the right, and the ask at the bottom of that column.
   No configurator and no price: the site takes no orders, so there is nothing
   to select, and a number would have to be invented.
   ========================================================================== */
.lg-pdp{padding-block:clamp(112px,9vw,132px) clamp(40px,4.2vw,60px)}
.lg-crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,34px);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.lg-crumbs a{color:var(--muted);transition:color .35s var(--ease)}
.lg-crumbs a:hover{color:var(--orange)}
.lg-crumbs span{color:var(--line)}
.lg-crumbs em{font-style:normal;color:var(--ink)}

/* The gallery column is a fixed measure, not a fraction. At 1.05fr it grew
   with the page — ~620px wide and 775px tall at 1333px, taller than the
   viewport — which is why the frame read as oversized. Capped at 460 it is a
   normal product image and the copy takes whatever is left. */
.lg-pdp__grid{
  /* 460 wide against a ~740 tall row is a 0.62 frame, but the photographs are
     4:5 (0.80) — so cover was cutting ~22% off the width of every one. 540
     brings the frame to 0.73 and the crop under 10%, without the 620px frame
     that read as oversized when the column was a free fraction. */
  display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,54px);align-items:start;
}
/* The copy column always runs longer than a pair of 4:5 photographs, which
   left ~340px of nothing under them. The outer cell stretches to the row and
   the gallery inside it sticks, so the photographs stay beside whatever
   specification you are reading instead of scrolling away from it.
   The stretch is what buys the travel — a sticky child of a cell sized to its
   own content has nowhere to go. */
.lg-pdp__shots{align-self:stretch}
.lg-pdp__gallery{position:sticky;top:120px}
.lg-pdp__gallery.has-more{isolation:isolate}

/* Side by side, the frame was locked to 4:5 (575px) while the copy beside it
   ran 803-831px, so every product ended with ~230px of nothing under the
   photograph. Rather than guess a taller ratio per product, the frame fills
   the row: whatever the copy measures, the picture ends level with it.
   Stacked (<=1080px) there is no row to fill, so 4:5 stands. */
@media (min-width:1081px){
  .lg-pdp__gallery{height:100%}
  .lg-pdp__track{height:100%}
  .lg-pdp__shot{aspect-ratio:auto;height:100%}
}

/* One frame wide, snapped. overflow-x:auto is what gives the swipe for free —
   touch, trackpad and shift-wheel all work before a line of JS runs. */
.lg-pdp__track{
  display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  border-radius:14px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.lg-pdp__track::-webkit-scrollbar{display:none}
.lg-pdp__track:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.lg-pdp__shot{
  margin:0;flex:0 0 100%;scroll-snap-align:center;
  overflow:hidden;border-radius:14px;border:1px solid var(--line-soft);
  background:var(--cream);aspect-ratio:4/5;
}
.lg-pdp__shot img{width:100%;height:100%;object-fit:cover;display:block}

/* arrows sit on the frame, not beside it, so the photograph keeps its width */
.lg-pdp__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -14px rgba(21,18,16,.5);
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),opacity .35s var(--ease);
}
.lg-pdp__nav svg{width:17px;height:17px}
.lg-pdp__nav.is-prev{left:12px}
.lg-pdp__nav.is-next{right:12px}
.lg-pdp__nav:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* at either end the arrow that cannot go anywhere fades back */
.lg-pdp__nav[disabled]{opacity:.3;pointer-events:none}

.lg-pdp__dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:6px;
}
.lg-pdp__dots i{
  width:16px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(21,18,16,.35);
  transition:background .35s var(--ease),width .35s var(--ease);
}
.lg-pdp__dots i.is-on{background:var(--orange);width:26px}
/* Two shots sit side by side as a pair. The lead spanning both columns left
   the second one with an empty cell beside it, and stacking them made a 1,450px
   column against 590px of copy. Products shot once take the full width. */
/* position:sticky already makes the gallery a containing block, so the arrows
   and dots position against the frame without a second rule. */

.lg-pdp__group{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange);
}
/* .lg2 h1 / .lg2 p at line 49 zero these, and they outrank a bare class —
   which is why the label, title, lede and note were all stacked flush. */
.lg2 .lg-pdp__name{
  margin:10px 0 0;font-size:clamp(30px,3.4vw,48px);font-weight:900;
  line-height:1.02;letter-spacing:-.032em;text-transform:uppercase;color:var(--ink);
}
.lg2 .lg-pdp__lede{
  margin:14px 0 0;max-width:52ch;
  font-size:clamp(15px,1.35vw,17.5px);line-height:1.6;color:var(--body);
}

/* Four short lines stacked one per row ran the panel down the page for no
   reason. Two columns halves its height, and the height that buys is spent on
   the spec rows below — so the section breathes without growing. */
/* .lg2 ul at line 49 zeroes margin and padding on every list, and it outranks
   a bare class — so this panel had a border sitting directly on its text. The
   .lg2 prefix matches that specificity and the later source order wins. */
.lg2 .lg-pdp__bens{
  margin:clamp(16px,1.8vw,22px) 0 0;padding:clamp(14px,1.5vw,18px);
  list-style:none;border-radius:14px;background:var(--white);
  border:1px solid var(--line);
  /* Two columns fitted more in but put four ticks shoulder to shoulder and
     sat the panel straight on the table below it. One line per row, with the
     rows given real separation — this block is read, not scanned. */
  display:grid;grid-template-columns:1fr;
  gap:12px;
}
.lg-pdp__bens li{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:500;
}
.lg-pdp__bens svg{width:15px;height:15px;color:var(--orange);margin-top:3px}

/* .lg2 dl at line 49 zeroes the margin and outranks a bare class, so this
   table was sitting flush on the rounded panel above it — the two borders read
   as one collided line. Same .lg2 prefix, same fix as .lg-pdp__bens. */
.lg2 .lg-pdp__specs{
  margin:clamp(20px,2.2vw,28px) 0 0;
  border-top:1px solid var(--line);
}
/* .4fr for the label meant a nine-letter word like FINISH was given 40% of a
   1100px column, and the value started almost halfway across the page — the
   eye could not carry a label to its own value. The label column is now a
   measure sized to the longest label, so the pair reads as a pair. */
.lg-pdp__spec{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);
  padding:11px 2px;border-bottom:1px solid var(--line-soft);
}
.lg-pdp__spec dt{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding-top:2px;
}
.lg-pdp__spec dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}

.lg-pdp__ask{margin-top:clamp(18px,2vw,24px)}
.lg2 .lg-pdp__note{
  margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--body);max-width:46ch;
}
.lg-pdp__actions{display:flex;flex-wrap:wrap;gap:10px}
/* --ghost is white-on-dark; this page is light */
.lg-pdp .lg-btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:none}
.lg-pdp .lg-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px)}

/* ---- related row, and the catalogue cards that now link out ---- */
.lg-pdp__more{background:var(--white);padding-block:clamp(34px,3.8vw,56px)}
/* Sized to the catalogue's own card, not to a third of the page. Four columns
   with three items leaves the last cell empty, which reads as a row that has
   simply ended rather than three oversized cards. */
.lg-pgrid--related{grid-template-columns:repeat(4,1fr)}
.lg-pgrid--related .lg-pcat__name{font-size:clamp(13px,1.05vw,15px)}
.lg-pgrid--related .lg-pcat__blurb{font-size:12.5px}
.lg-pgrid--related .lg-pcat__body{padding:16px 18px 18px}
.lg-pcat__link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.lg-pcat__cta{display:flex;align-items:center;gap:7px}

@media (max-width:1080px){
  .lg-pdp__grid{grid-template-columns:1fr}
  .lg-pgrid--related{grid-template-columns:repeat(3,1fr)}
  /* stacked, so nothing to stick to; same 460 measure as the desktop frame */
  .lg-pdp__gallery{position:static;max-width:540px}
}
@media (max-width:640px){
  .lg-pdp__gallery,.lg-pdp__shots .lg-pdp__gallery{position:static}
  .lg-pdp__spec{grid-template-columns:1fr;gap:3px}
  .lg2 .lg-pdp__bens{grid-template-columns:1fr}
  .lg-pgrid--related{grid-template-columns:1fr}
}

/* ==========================================================================
   PASS 31 — graph paper behind WHO WE ARE.

   Three earlier attempts at a background for this section were rejected, and
   the one made of lines failed for a specific reason: the lines were strong
   enough to cut across the headline and the copy. So the brief here is narrow.

   1. It draws BEHIND. z-index 0 inside the pin, the content wrap lifted to 1.
      The photograph, the copy, the facts table and the figures panel all sit
      over it and none of them is ever crossed.
   2. It does not move. No trigger, no scroll dependency, no JS at all.
   3. It is faint enough to read through, but it has to actually be VISIBLE.
      First pass was 3% / 5.5% ink, which was tuned against the old cream; on
      pure white 3% resolves to #F8F7F7 — 7 points off the ground, i.e. nothing.
      The ceiling is --line (#E4E2DF, 27 points off white): the hairline this
      page already draws everywhere. A grid at or under that cannot be louder
      than something the eye already accepts, so the majors sit just under it
      and the fine rules at half that.

   Two scales, like real graph paper: a fine 44px rule with a heavier one every
   fifth line. The whole sheet fades off at the top and bottom so it never ends
   on a hard edge.
   ========================================================================== */
/* The curvy perspective mesh replaces the graph paper. Same three rules the
   paper had to obey — behind everything, faint enough to read through, never
   crossing the copy — but it is drawn per frame by lg-mesh.js and warps with
   scroll. The mask is what stops it ending on a hard edge top and bottom. */
.lg-mesh{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
@media (max-width:1080px){
  /* the pin unwinds into a tall scrolling block; the warp stops reading as a
     sheet at that height, same reason the paper was dropped here */
  .lg-mesh{display:none}
}

.lg-paper{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    /* major rules, every 220px — ~25 points off white, just under --line */
    linear-gradient(to right,  rgba(21,18,16,.105) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,18,16,.105) 1px, transparent 1px),
    /* fine rules — about half the majors, so the two scales read apart */
    linear-gradient(to right,  rgba(21,18,16,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,18,16,.055) 1px, transparent 1px);
  background-size:220px 220px, 220px 220px, 44px 44px, 44px 44px;
  /* the fade only needs to kill the hard edge, not a quarter of the sheet */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.lg-who__pin>.lg-wrap{position:relative;z-index:1}

@media (max-width:1080px){
  /* the pin unwinds into a tall scrolling block; a grid that long stops
     reading as a sheet and starts reading as a texture */
  .lg-paper{display:none}
}

/* --------------------------------------------------------------------------
   Intermediate tier. The extra headroom above the photograph plus the larger
   figures together cost about 30px more than a ~860px viewport has, and the
   facts table started running into the figures panel.

   This trims the SPACING in the copy column and leaves the heading alone —
   the ≤840px tier below drops the type size, which is the right trade when
   space is genuinely short but the wrong one here, where it only needs 30px.
   -------------------------------------------------------------------------- */
@media (min-width:1081px) and (min-height:841px) and (max-height:920px){
  .lg-who__say{padding-block:5px}
  .lg-who__say .lg-lede{margin-top:12px}
  .lg-who__say .lg-btn{margin-top:20px}
  .lg-facts--tight{margin-top:16px}
  .lg-facts--tight .lg-fact{padding:12px 16px}
}

/* ==========================================================================
   PASS 32 — the portfolio, grouped by project.

   The grid listed 33 photographs as 33 cards, so Al Masraf appeared five times
   and Bank of Baroda four. It read as far more jobs than it is, and it buried
   the projects with a single shot. One card per project now, with a count on
   the ones that carry more, opening a page that shows the whole set.
   ========================================================================== */
.lg-pcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.lg-pcard__pic{position:relative}
/* the count sits on the photograph — the card is otherwise identical to the
   single-shot one, and without it there is nothing to say there is more */
.lg-pcard__n{
  position:absolute;right:10px;bottom:10px;z-index:2;
  padding:6px 11px;border-radius:8px;
  background:rgba(14,14,14,.72);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ---- one project ---- */
.lg-proj__head{
  display:grid;grid-template-columns:1fr auto;gap:clamp(16px,2.4vw,40px);
  align-items:end;padding-bottom:clamp(18px,2vw,28px);
  border-bottom:1px solid var(--line);
}
.lg-proj__name{
  margin:9px 0 0;font-size:clamp(32px,4.4vw,62px);font-weight:900;
  line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);
}
.lg-proj__meta{margin:0;font-size:13.5px;color:var(--muted);max-width:34ch;text-align:right}

.lg-proj__shots{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.4vw,22px);margin-top:clamp(22px,2.6vw,38px);
}
.lg-proj__shot{margin:0}
.lg-proj__shot.is-lead{grid-column:1/-1}
.lg-proj__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:16/10;border-radius:12px;border:1px solid var(--line-soft);
  background:var(--cream-deep);
}
.lg-proj__shot.is-lead img{aspect-ratio:16/8}
.lg-proj__shot figcaption{
  margin-top:10px;font-size:12.5px;color:var(--body);
}

.lg-proj__ask{
  margin-top:clamp(28px,3.2vw,48px);padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
}
.lg-proj__ask p{margin:0;font-size:14.5px;color:var(--body);max-width:52ch}
.lg-proj__actions{display:flex;gap:10px;flex-wrap:wrap}
.lg-proj .lg-btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:none}
.lg-proj .lg-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px)}

.lg-proj__more{background:var(--cream-deep);padding-block:clamp(34px,3.8vw,56px)}

@media (max-width:820px){
  .lg-proj__head{grid-template-columns:1fr}
  .lg-proj__meta{text-align:left}
  .lg-proj__shots{grid-template-columns:1fr}
  .lg-proj__shot.is-lead img{aspect-ratio:16/10}
  .lg-proj__ask{grid-template-columns:1fr}
}

/* ==========================================================================
   PASS 33 — a readability floor, site-wide.

   An audit of every text-bearing element on all six page types found a lot of
   type at 9.5px and 10px: sector labels on the work cards, the facts table
   headings, the figures labels, the product category, the process timings, the
   services index, the contact route labels, the footer column headings. Small
   enough that they were decoration rather than information.

   Two floors, because caps and lower case do not read the same at a size:
     - uppercase, letterspaced labels ....... 11.5px
     - normal-case text and numbers ......... 13px
     - buttons .............................. 12.5px

   Heavy tracking hurts more as type gets smaller, so the labels lose a little
   letter-spacing on the way up rather than getting wider as well as bigger.
   ========================================================================== */

/* ---- uppercase labels: nothing below 11.5px ---- */
.lg2 .lg-label,
.lg2 .lg-pcard__sector,
.lg2 .lg-pcard__n,
.lg2 .lg-tally__l,
.lg2 .lg-prod__cat,
.lg2 .lg-tile__cat,
.lg2 .lg-step4__when,
.lg2 .lg-disc__count,
.lg2 .lg-dnav__lead,
.lg2 .lg-mv2__tag,
.lg2 .lg-route__label,
.lg2 .lg-pcat__cta,
.lg2 .lg-filter__n,
.lg2 .lg-fact dt,
.lg2 .lg-facts--tight dt,
.lg2 .lg-foot h4,
.lg2 .lg-foot__bot span,
.lg2 .lg-mega__all,
.lg2 .lg-field label{
  font-size:11.5px;
  letter-spacing:.16em;
}

/* ---- the small index numbers: they label things, so they have to be read ---- */
.lg2 .lg-mx__n,
.lg2 .lg-pcat__n,
.lg2 .lg-mv2__n,
.lg2 .lg-disc__idx,
.lg2 .lg-dnav__link i,
.lg2 .lg-dnav__link b{
  font-size:11.5px;letter-spacing:.1em;
}
.lg2 .lg-disc__idx{font-size:13px}

/* ---- normal-case supporting text: nothing below 13px ---- */
.lg2 .lg-mega__blurb,
.lg2 .lg-mega__name,
.lg2 .lg-route__note,
.lg2 .lg-form__note,
.lg2 .lg-prod__meta,
.lg2 .lg-tile__spec,
.lg2 .lg-mx__note,
.lg2 .lg-pcard__what,
.lg2 .lg-step4__p,
.lg2 .lg-foot li,
.lg2 address strong{
  font-size:13.5px;
}
.lg2 .lg-mega__name{font-size:13.5px;font-weight:700}

/* ---- buttons and nav chips ---- */
.lg2 .lg-btn,
.lg2 .lg-head__cta .lg-btn,
.lg2 .lg-dnav__link,
.lg2 .lg-mq__item{
  font-size:12.5px;
}
.lg2 .lg-mq__item{font-size:13px;letter-spacing:.1em}

/* the capability names sat at 15px against a 12.5px note; with the note up at
   13.5 they need to stay clearly the louder of the two */
.lg2 .lg-mx__name{font-size:clamp(14px,1.1vw,15.5px)}

/* the two detail templates were built after the audit selectors above, so
   they needed catching separately: the discipline label, the spec keys and
   the breadcrumbs were all still under the floor */
.lg2 .lg-pdp__group,
.lg2 .lg-pdp__spec dt,
.lg2 .lg-crumbs,
.lg2 .lg-crumbs a,
.lg2 .lg-crumbs em{
  font-size:11.5px;letter-spacing:.16em;
}
.lg2 .lg-pdp__note,
.lg2 .lg-pdp__spec dd,
.lg2 .lg-proj__meta,
.lg2 .lg-proj__shot figcaption,
.lg2 .lg-proj__ask p{
  font-size:14px;
}

/* and the journal, which the first sweep did not reach */
.lg2 .lg-post__cat,
.lg2 .lg-post__meta time,
.lg2 .lg-post__more{
  font-size:11.5px;letter-spacing:.14em;
}

/* ==========================================================================
   PASS 34 — the contact form was written in grey.

   Every label, the select's unanswered state and the textarea placeholder used
   --muted (#9A8D84): about 3:1 against white, under the 4.5:1 a label needs to
   be read comfortably. On the form people must fill in to get a quote, that is
   the worst place on the site to lose contrast.

   Labels go to ink. Placeholders go to --body rather than ink, because a
   placeholder still has to look different from the answer typed into the same
   box — but --body is ~7:1, so it reads properly.
   ========================================================================== */
.lg2 .lg-field label{color:var(--ink)}
.lg2 .lg-form__note{color:var(--body)}

/* the unanswered select, and every real placeholder */
.lg2 .lg-field select:has(option[value=""]:checked){color:var(--body)}
.lg2 .lg-field input::placeholder,
.lg2 .lg-field textarea::placeholder{color:var(--body);opacity:1}
.lg2 .lg-field input::-webkit-input-placeholder,
.lg2 .lg-field textarea::-webkit-input-placeholder{color:var(--body);opacity:1}

/* typed answers stay full ink, so answered and unanswered still read apart */
.lg2 .lg-field input,
.lg2 .lg-field textarea,
.lg2 .lg-field select{color:var(--ink)}

/* The field borders were --line (#E4E2DF), ~1.3:1 against white — a control
   boundary needs 3:1 to be discernible, so the boxes barely existed. Ink at
   1px draws them cleanly without turning the form into six heavy slabs.
   Focus still moves to orange, so it stays clearly distinct from rest. */
.lg2 .lg-field input,
.lg2 .lg-field textarea,
.lg2 .lg-field select{border-color:var(--ink)}
.lg2 .lg-field input:hover,
.lg2 .lg-field textarea:hover,
.lg2 .lg-field select:hover{border-color:var(--ink)}

/* The ink border rule above outranks the original .lg-field input:focus
   (0,3,0 beats 0,2,0), which silently killed the orange focus border. Restated
   at matching specificity so keyboard focus is unmistakable again. */
.lg2 .lg-field input:focus,
.lg2 .lg-field textarea:focus,
.lg2 .lg-field select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,99,0,.14);
  outline:none;
}

/* ==========================================================================
   PASS 35 — the gallery arrows were invisible.

   .lg2 button at line 53 resets background, border and colour, and at (0,2,0)
   it outranks the bare .lg-pdp__nav class — so the white disc, the hairline
   and the ink chevron were all being stripped. What survived was a bare
   17px chevron in --body, which vanished against a dark product photograph.

   Restated at matching specificity, and made a solid white disc rather than a
   translucent one: it has to read on a black photograph as well as a pale one,
   and 92% white over a dark image still muddies. The glyph is a line arrow to
   match the arrows in the site's buttons.
   ========================================================================== */
.lg2 .lg-pdp__nav{
  width:46px;height:46px;
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(21,18,16,.10);
  box-shadow:0 6px 20px -6px rgba(21,18,16,.35);
}
.lg2 .lg-pdp__nav svg{width:19px;height:19px}
.lg2 .lg-pdp__nav:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.lg2 .lg-pdp__nav[disabled]{opacity:.32;pointer-events:none}
.lg2 .lg-pdp__nav.is-prev{left:14px}
.lg2 .lg-pdp__nav.is-next{right:14px}

/* Arrows moved out of the vertical middle and paired in the bottom-right
   corner, so they sit over the quietest part of the frame instead of the
   middle of the product. top/transform have to be unset explicitly because
   the base rule centres them with translateY(-50%). The dots stay centred at
   the same bottom offset — on a 540px frame the two never meet. */
.lg2 .lg-pdp__nav{
  top:auto; transform:none;
  bottom:14px;
}
.lg2 .lg-pdp__nav.is-next{right:14px; left:auto}
.lg2 .lg-pdp__nav.is-prev{right:68px; left:auto}

/* ==========================================================================
   PASS 36 — the mobile drawer.

   Below 1080px .lg-nav is display:none and .lg-burger shows, but the burger's
   handler scrolled to #capabilities, an id present on no page — so every
   phone and tablet visitor had no navigation at all. This is that menu.

   Light and warm like the rest of the site, FULL CAPS for the primary links,
   product categories nested under Our Products so touch users still reach
   what the mega-menu gives desktop users.
   ========================================================================== */
.lg-drawer{
  position:fixed;inset:0;z-index:9000;
  display:grid;justify-items:end;
}
.lg-drawer[hidden]{display:none}
.lg-drawer::before{
  content:"";position:absolute;inset:0;
  background:rgba(21,18,16,.42);
  opacity:0;transition:opacity .4s var(--ease);
}
.lg-drawer.is-open::before{opacity:1}
.lg-drawer__panel{
  position:relative;z-index:1;
  width:min(420px,100%);height:100%;
  background:var(--white);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 60px -30px rgba(21,18,16,.5);
  transform:translateX(100%);
  transition:transform .45s var(--ease-out);
  overflow-y:auto;overscroll-behavior:contain;
}
.lg-drawer.is-open .lg-drawer__panel{transform:translateX(0)}
.lg-drawer__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line);
}
.lg-drawer__top .lg-brand img{height:34px;width:auto}
.lg-drawer__x{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--ink);cursor:pointer;
}
.lg-drawer__x svg{width:18px;height:18px}
.lg-drawer__nav{padding:10px 20px 4px;display:block}
.lg2 .lg-drawer__link{
  display:block;padding:14px 0;
  font-size:17px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.lg2 .lg-drawer__link[aria-current="page"]{color:var(--orange)}
.lg-drawer__subs{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;
  padding:10px 0 14px;border-bottom:1px solid var(--line-soft);
}
.lg2 .lg-drawer__sub{
  display:block;padding:6px 0;
  font-size:13px;line-height:1.35;color:var(--body);text-decoration:none;
}
.lg2 .lg-drawer__sub:hover{color:var(--orange)}
.lg-drawer__foot{
  margin-top:auto;padding:20px;border-top:1px solid var(--line);
  display:grid;gap:12px;justify-items:stretch;
}
.lg-drawer__foot .lg-btn{justify-content:center;text-align:center}
.lg2 .lg-drawer__tel{
  text-align:center;font-weight:700;color:var(--ink);text-decoration:none;
  font-size:15px;
}
@media (min-width:1081px){ .lg-drawer{display:none} }
@media (prefers-reduced-motion:reduce){
  .lg-drawer__panel{transition:none}
  .lg-drawer::before{transition:none}
}

/* WhatsApp form: inline error and invalid fields */
.lg2 .lg-form__err{grid-column:1/-1;margin:0;font-size:14px;font-weight:600;color:#B42318}
.lg2 .lg-field [aria-invalid="true"]{border-color:#B42318}

/* ==========================================================================
   PASS 37 — article, legal and not-found pages.

   Journal articles, the privacy policy and every 404 were rendering in the
   parent Printec theme. These three share one reading layout: a ~68ch column,
   the site's type, and WordPress editor content styled rather than trusted.
   ========================================================================== */
.lg-art{padding-block:clamp(104px,8.4vw,128px) clamp(40px,4vw,64px)}
.lg-art .lg-wrap{max-width:calc(760px + 2 * var(--gut, 20px))}
.lg-art__head{margin:18px 0 clamp(22px,2.4vw,32px)}
.lg2 .lg-art__title{
  margin:12px 0 0;font-size:clamp(30px,3.6vw,50px);font-weight:900;
  line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);
}
.lg2 .lg-art__pic{margin:0 0 clamp(26px,3vw,40px);border-radius:14px;overflow:hidden;background:var(--cream-deep)}
.lg-art__pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.lg2 .lg-prose{font-size:clamp(16px,1.25vw,17.5px);line-height:1.75;color:var(--ink-2)}
/* .lg2 p zeroes margins, so the rhythm between blocks is stated here */
.lg2 .lg-prose > *{margin:0}
.lg2 .lg-prose > * + *{margin-top:1.1em}
.lg2 .lg-prose h2,.lg2 .lg-prose h3,.lg2 .lg-prose h4{
  margin:1.8em 0 0;font-weight:900;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
.lg2 .lg-prose h2{font-size:clamp(22px,2vw,28px)}
.lg2 .lg-prose h3{font-size:clamp(19px,1.6vw,23px)}
.lg2 .lg-prose h4{font-size:18px}
.lg2 .lg-prose ul,.lg2 .lg-prose ol{margin:1.1em 0 0;padding-left:1.3em;list-style:revert}
.lg2 .lg-prose li + li{margin-top:.45em}
.lg2 .lg-prose li::marker{color:var(--orange)}
.lg2 .lg-prose strong{font-weight:700;color:var(--ink)}
.lg2 .lg-prose a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.lg2 .lg-prose img{max-width:100%;height:auto;border-radius:10px}
.lg2 .lg-prose blockquote{margin:1.4em 0 0;padding-left:18px;border-left:3px solid var(--orange);color:var(--body)}

.lg-art__ask{
  margin-top:clamp(36px,4vw,56px);padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--line);border-radius:16px;background:var(--cream-deep);
}
.lg2 .lg-art__ask p{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.lg-art__actions,.lg-nf__actions{display:flex;flex-wrap:wrap;gap:10px}
.lg-art .lg-btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:none}
.lg-art .lg-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* the 404 sits on the dark page-head band, where the default white ghost button is correct */
.lg-art__more{background:var(--white)}
.lg-nf{min-height:62svh;display:grid;align-items:center}
.lg-nf__actions{margin-top:26px}

/* Closing CTA band: brand orange instead of the grey --cream-deep ground.
   The white card now reads clearly against it. Flat orange, no gradient or
   glow, per the one-orange rule. The card's own shadow is dropped because a
   dark shadow on orange looks muddy. */
.lg2 .lg-cta{background:var(--orange)}
.lg2 .lg-cta__inner{box-shadow:none;border-color:transparent}

/* Related rows under the detail pages ("Other projects", "You may also need",
   "Keep reading"): heading on one line, and less air between it and the cards. */
.lg2 .lg-proj__more .lg-h2 strong,
.lg2 .lg-pdp__more .lg-h2 strong,
.lg2 .lg-art__more .lg-h2 strong{display:inline}
.lg2 .lg-proj__more .lg-chead,
.lg2 .lg-pdp__more .lg-chead,
.lg2 .lg-art__more .lg-chead{margin-bottom:clamp(14px,1.4vw,20px);max-width:none}
/* ...and less headroom above that heading */
.lg2 .lg-proj__more,
.lg2 .lg-pdp__more{padding-top:clamp(20px,2vw,30px)}
.lg2 .lg-art__more{padding-top:clamp(28px,2.6vw,40px)}

/* ==========================================================================
   PASS 38 — project photographs: never crop the work, never let captions
   collide.

   Two faults on every /our-work/<project>/ page:

   1. Every photograph was forced into a landscape frame (16:10, lead 16:8)
      with object-fit:cover. A third of the portfolio is PORTRAIT, so the
      frame threw away most of the picture — on Al Masraf's tower the signage
      is on the roof, and the crop kept the middle floors and cut the sign off.
      The photographs are the evidence of the work; nothing should be cropped
      out of them. Each now keeps its own proportions, capped in height so a
      tall shot does not run off the screen, letterboxed on the warm ground
      only when that cap is reached.

   2. The img carried height:100% inside a grid cell. The figure stretched to
      the row, the image filled the figure, and the caption was pushed out of
      the bottom of its own box into the next photograph — the overlapping
      "Building facade signage" / "Tower identity" text. Height is now auto and
      the row aligns to the top, so each caption sits under its own picture.
   ========================================================================== */
.lg2 .lg-proj__shots{align-items:start}
.lg2 .lg-proj__shot{display:flex;flex-direction:column;min-width:0}
.lg2 .lg-proj__shot img,
.lg2 .lg-proj__shot.is-lead img{
  width:100%;height:auto;aspect-ratio:auto;
  max-height:min(78svh,760px);
  object-fit:contain;background:var(--cream-deep);
}
.lg2 .lg-proj__shot figcaption{margin-top:10px;line-height:1.45;position:static}

/* Thumbnails elsewhere (project cards, homepage tiles) still crop to a fixed
   frame, which is right for a grid — but the crop has to keep the sign in.
   These are the portrait photographs whose signage sits away from centre.
   Keyed on the file name so the rule follows the photo wherever it is used. */
.lg2 img[src$="almasraf-tower-dusk.jpg"]{object-position:50% 3%}
.lg2 img[src$="saray-hotel.jpg"]{object-position:50% 12%}
.lg2 img[src$="lulu-exchange-mall.jpg"]{object-position:50% 22%}
.lg2 img[src$="adnoc-facade-night.jpg"]{object-position:60% 55%}
.lg2 img[src$="bank-atm-signage.jpg"]{object-position:50% 30%}
.lg2 img[src$="bankofbaroda-atm.jpg"]{object-position:50% 35%}
.lg2 img[src$="dewa-solar-park-mural.jpg"]{object-position:50% 42%}
/* detail pages show the whole photo, so no focal point applies there */
.lg2 .lg-proj__shot img{object-position:50% 50%}
.lg2 .lg-foot__legal{color:inherit;text-decoration:underline;text-underline-offset:3px}
.lg2 .lg-foot__legal:hover{color:var(--orange)}

/* Anchor links (footer "How it works" -> /#process, and the services index)
   land below the fixed header instead of underneath it. */
.lg2 #process{scroll-margin-top:110px}

/* ==========================================================================
   PASS 39 — PHONES ONLY (max-width:767px). Nothing here reaches desktop.

   Several sections already had phone rules higher up, but later unscoped
   `.lg2` desktop rules outranked them, so phones still got the desktop
   column counts squeezed into 390px. This block sits last and wins.
   ========================================================================== */
@media (max-width:767px){

  /* header: burger to the right edge, not beside the logo */
  .lg2 .lg-head__bar{gap:12px}
  .lg2 .lg-burger{margin-left:auto}

  /* WHO WE ARE showcase: swipe carousel (lg2.js adds .is-swipe) */
  .lg2 .lg-showcase.is-swipe .lg-showcase__deck{
    display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    aspect-ratio:auto;max-height:none;margin:0;padding:0;
    border-radius:12px;background:transparent;box-shadow:none;
    scrollbar-width:none;
  }
  .lg2 .lg-showcase.is-swipe .lg-showcase__deck::-webkit-scrollbar{display:none}
  .lg2 .lg-showcase.is-swipe .lg-showcase__deck::after{content:none}
  .lg2 .lg-showcase.is-swipe .lg-shot{
    position:relative;inset:auto;flex:0 0 100%;
    aspect-ratio:4/3;height:auto;max-height:none;margin:0;
    scroll-snap-align:start;scroll-snap-stop:always;
    transform:none !important;opacity:1 !important;
    border-radius:12px;box-shadow:none;
  }
  .lg2 .lg-showcase.is-swipe .lg-shot img{height:100%;margin:0;transform:none !important}
  .lg2 .lg-showcase.is-swipe .lg-shot__edge,
  .lg2 .lg-showcase.is-swipe .lg-gl{display:none}

  /* caption under the photo: dots first, then the text, never overlapping */
  .lg2 .lg-showcase__bar{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
  .lg2 .lg-showcase__pips{order:-1;justify-content:center;padding:6px 0;gap:8px}
  .lg2 .lg-showcase__pips i{width:26px;height:3px}
  .lg2 .lg-showcase__cap{display:grid;min-height:0}
  .lg2 .lg-showcase__line{position:relative;inset:auto;grid-area:1/1}
  .lg2 .lg-showcase__line i{font-size:14px}
  .lg2 .lg-whotally{margin-top:24px}

  /* closing CTA ("Tell us what you need", "Not sure which one"): stack */
  .lg2 .lg-cta__grid{grid-template-columns:1fr;gap:22px}
  .lg2 .lg-cta__actions{display:grid;grid-template-columns:1fr;gap:10px;flex-wrap:nowrap}
  .lg2 .lg-cta__actions .lg-btn{width:100%;justify-content:center;text-align:center}

  /* About: hero, facts, who we are, photo strip */
  .lg2 .lg-ahead__grid{grid-template-columns:1fr;gap:26px}
  .lg2 .lg-facts{grid-template-columns:1fr 1fr}
  .lg2 .lg-fact dt,.lg2 .lg-fact dd{overflow-wrap:normal;word-break:normal}
  .lg2 .lg-whoami__grid{grid-template-columns:1fr;gap:18px}
  .lg2 .lg-whoami__strip{grid-template-columns:1fr 1fr;gap:10px}

  /* Contact: the four route cards, one per row */
  .lg2 .lg-routes{grid-template-columns:1fr;gap:10px}
  .lg2 .lg-route{padding:18px 20px}
}