/* ============================================================
   iScope — home page
   Art direction taken from the agency press ads
   (29132 CORE A4 / 29133 PressAd Coalface).

   The system in one line: a machined steel mark on a scratched
   plate, red used as graphic mass and as the reticle, white type
   set big and heavy.
   ============================================================ */

:root{
  /* ground */
  --void:#0a0b0d;
  --plate:#111317;
  --steel:#15181d;
  --steel-2:#1c2026;
  --line:#2a2f37;
  --line-soft:#1f232a;

  /* ink */
  --grey:#8e939d;
  --grey-2:#5f646e;
  --paper:#e9ebef;
  --white:#ffffff;

  /* brand red, from the ads */
  --red:#e0222c;
  --red-hot:#f23540;
  --red-deep:#8e1119;
  --red-dim:rgba(224,34,44,.13);

  /* Kinetika is the real brand face and needs a web licence from the
     agency. Montserrat is the closest free stand-in. Swap one line. */
  --display:"Montserrat","Oswald","Arial Narrow",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --container:1320px;
  --gut:clamp(20px,4.5vw,60px);
  --header-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ----------
   The ads run one weight for statements (Black) and one for
   everything else. Nothing in between. */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.018em}
h1,h2{font-weight:900;text-transform:uppercase;line-height:.88}
h2{font-size:clamp(2.1rem,5.6vw,4.4rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:700;line-height:1.16;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:64ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--grey);max-width:54ch}
.tnum{font-variant-numeric:tabular-nums}

/* the ads' slash device: SCOPE / MANAGE / REPAIR / TRAIN */
.slashes{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.42em;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(.82rem,1.65vw,1.32rem);letter-spacing:.17em;color:var(--white);
  margin:0;
}
.slashes b{font-weight:600}
.slashes i{font-style:normal;color:var(--red);font-weight:400;transform:skewX(-12deg);display:inline-block}

/* ---------- the mark ---------- */
.ring{display:block;flex:0 0 auto;color:var(--white)}
.ring circle{fill:none;stroke:currentColor}

.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--white);margin:0 0 18px;
}
.eyebrow .ring{width:15px;height:15px}
.eyebrow::after{content:"";flex:0 0 26px;height:1px;background:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--line);border-radius:1px;
  background:transparent;color:var(--paper);cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--ease);z-index:-1;
}
.btn:hover{border-color:var(--red);color:#fff}
.btn:hover::before{transform:scaleX(1)}
.btn > *{position:relative}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red::before{background:var(--red-hot)}
.btn-sm{padding:11px 18px;font-size:.7rem}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.site-header.solid{background:rgba(10,11,13,.93);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.header-in{display:flex;align-items:center;gap:20px;width:100%}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .ring{width:29px;height:29px;color:var(--white)}
.brand .wordmark img{height:20px;width:auto}

.main-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.main-nav a{
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding:10px 14px;position:relative;transition:color .2s var(--ease);
}
.main-nav a:hover,.main-nav a.active{color:var(--white)}
.main-nav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--red)}
.has-drop{position:relative}
.has-drop > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
}
.drop{
  position:absolute;top:100%;left:4px;min-width:190px;z-index:3;
  background:var(--steel);border:1px solid var(--line);padding:6px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{padding:10px 12px}

.header-call{display:flex;flex-direction:column;line-height:1.2;padding-left:20px;border-left:1px solid var(--line)}
.header-call .lbl{font-family:var(--display);font-weight:600;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2)}
.header-call .num{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--white);font-variant-numeric:tabular-nums}
.header-call:hover .num{color:var(--red)}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:23px;height:2px;background:var(--paper);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1140px){.header-call,.header-cta{display:none}}
@media(max-width:940px){
  .nav-toggle{display:block;margin-left:auto}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;margin:0;z-index:3;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--void);border-bottom:1px solid var(--line);
    padding:10px var(--gut) 28px;max-height:calc(100dvh - var(--header-h));overflow:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .main-nav.open{opacity:1;visibility:visible;transform:none}
  .main-nav a{padding:15px 0;font-size:1rem;border-bottom:1px solid var(--line-soft)}
  .main-nav a.active::after{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;background:transparent;padding:0 0 0 16px;display:none}
  .has-drop.open .drop{display:flex}
  .mob-call{display:flex;flex-direction:column;gap:4px;padding-top:20px}
  .mob-call a{border:0;padding:4px 0;color:var(--white)}
}
@media(min-width:941px){.mob-call{display:none}}

/* ============================================================
   THE FIELD
   Scratched plate, red mass, reticle dots. One fixed stack for
   the whole page, parallaxed. This is where the ads get their
   depth and it is what the flat version was missing.
   ============================================================ */
.field{position:fixed;inset:-12% 0;z-index:0;pointer-events:none;overflow:hidden}
.f-plate{
  position:absolute;inset:0;
  background:url("plate-texture.jpg") center/640px 640px repeat;
  opacity:.42;mix-blend-mode:soft-light;will-change:transform;
}
.f-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(224,34,44,.5) 1.1px,transparent 1.6px);
  background-size:32px 32px;opacity:.22;will-change:transform;
}
.f-red-circle{
  position:absolute;top:-30vh;left:-16vw;width:86vw;max-width:1180px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,rgba(224,34,44,.62) 0%,rgba(142,17,25,.34) 46%,rgba(142,17,25,0) 72%);
  opacity:.5;filter:blur(40px);will-change:transform;
}
.f-red-wedge{
  position:absolute;top:30vh;right:-26vw;width:104vw;height:30vh;
  background:linear-gradient(104deg,rgba(224,34,44,0) 0%,rgba(142,17,25,.55) 44%,rgba(224,34,44,.5) 74%,rgba(224,34,44,0) 100%);
  rotate:-19deg;opacity:.3;filter:blur(46px);will-change:transform;
}
.f-vignette{
  position:absolute;inset:0;
  background:radial-gradient(118% 88% at 62% 38%,rgba(10,11,13,0) 0%,rgba(10,11,13,.62) 52%,rgba(10,11,13,.93) 86%,var(--void) 100%);
}
/* The header is a fixed overlay, so an in-page jump (#scope, #manage, #repair,
   #train) would otherwise land with the target tucked underneath it. */
section[id],main[id]{scroll-margin-top:calc(var(--header-h) + 14px)}

/* Everything above the field. The header is deliberately NOT in this list:
   it is a fixed overlay and keeps its own z-index:60, well clear of the page
   content. Listing it here used to overwrite position:fixed and z-index:60
   with relative/2, which put the header on the same layer as <main> — the
   services dropdown and the open mobile menu then painted behind the pillar
   artwork and the hero mark, and could not be clicked. */
main,.site-footer,.review-chrome{position:relative;z-index:2}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:min(96vh,940px);
  padding-top:calc(var(--header-h) + clamp(30px,6vh,64px));
  padding-bottom:clamp(40px,7vh,84px);
  display:flex;align-items:center;
}
.hero .container{width:100%}
.hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}

.hero-lock{display:flex;align-items:center;gap:12px;margin:0 0 24px;flex-wrap:wrap}
.hero-lock .ring{width:21px;height:21px;color:var(--white)}
.hero-lock span{
  font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey);line-height:1.5;
}
.hero h1{
  font-size:clamp(2.9rem,7vw,5.9rem);line-height:.86;letter-spacing:-.03em;
  color:var(--white);margin:0 0 24px;
}
@media(min-width:1000px){.hero h1{font-size:clamp(3.6rem,5.1vw,5.4rem)}}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > i{display:block;font-style:normal}
.hero .slashes{margin-bottom:28px}
.hero-sub{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--grey);max-width:40ch;margin:0 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* the steel mark, the page's one protagonist */
.mark-stage{position:relative;aspect-ratio:1;width:100%;max-width:620px;margin-inline:auto}
@media(max-width:999px){
  .mark-stage{max-width:min(300px,62vw);order:-1;margin-bottom:4px}
  .hero{min-height:0;padding-bottom:clamp(34px,6vh,60px)}
  .hero-grid{gap:clamp(18px,3vw,32px)}
}
.mark-steel{
  position:absolute;inset:0;width:100%;height:100%;
  /* only a tight, centred contact shadow here: an offset shadow on a rotating
     element turns with it, so the cast shadow lives in .mark-shadow below */
  filter:drop-shadow(0 0 3px rgba(0,0,0,.55));
  will-change:transform;
}
/* cast shadow: the wrapper holds the offset (light from upper left, so it
   falls down and right) and never rotates; the image inside turns in step
   with the steel, which lands it back in the same place every 90 degrees */
.mark-shadow{position:absolute;inset:0;pointer-events:none;transform:translate(3%,4.5%)}
.mark-shadow-img{position:absolute;inset:-6.6667%;width:113.3334%;height:113.3334%;max-width:none;opacity:.85;will-change:transform}
/* specular sweep, masked to the mark's own shape */
.mark-gloss{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.95) 50%,transparent 66%);
  clip-path:url(#markClip);
  opacity:0;mix-blend-mode:screen;
}
.mark-reticle{
  position:absolute;inset:8%;color:var(--red);
  filter:drop-shadow(0 0 16px rgba(224,34,44,.6));
}
.mark-reticle .arm,.mark-reticle .tick{fill:currentColor}
.mark-rings{position:absolute;inset:-5%;color:rgba(224,34,44,.42)}
/* Reticle crosshair and scan rings behind the steel mark: hard-coded off.
   <body data-reticle="off"> stays so the open keeps its retimed start
   (see buildOpen in home.js). */
.mark-reticle,.mark-rings{display:none}
.mark-rings circle{fill:none;stroke:currentColor;stroke-width:.35}

.hero-foot{
  display:flex;align-items:center;gap:16px;margin-top:clamp(34px,6vh,64px);
  font-family:var(--display);font-weight:600;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey-2);
}
.hero-foot .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--red),var(--line) 55%,transparent);transform-origin:0 50%}

/* ============================================================
   TWO TRACKS
   ============================================================ */
.tracks{display:flex;flex-direction:column;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:900px){.tracks{flex-direction:row}}
.track{
  background:rgba(21,24,29,.9);backdrop-filter:blur(3px);
  padding:clamp(30px,4vw,62px) clamp(24px,3.4vw,56px);
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:17px;position:relative;
  transition:flex-grow .6s var(--ease),background .45s var(--ease);
}
.track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
@media(min-width:900px){
  .tracks:hover .track{flex-grow:.84}
  .track:hover,.track:focus-within{flex-grow:1.34;background:rgba(28,32,38,.94)}
  .track:hover::before,.track:focus-within::before{transform:scaleY(1)}
}
.track .tag{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white);margin:0}
.track .tag .ring{width:17px;height:17px;color:var(--white)}
.track h3{color:var(--white);font-size:clamp(1.3rem,2.2vw,1.9rem);text-transform:none;letter-spacing:-.015em}
.track p{color:var(--grey);font-size:.98rem;margin:0;max-width:44ch}
.track .path{margin-top:auto;padding-top:17px;border-top:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2)}
.track .btn{align-self:flex-start;margin-top:4px}

/* ============================================================
   FIGURES
   ============================================================ */
.figures{padding:clamp(44px,5.5vw,76px) 0}
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.figs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.figs{grid-template-columns:repeat(6,1fr)}}
.fig{background:rgba(21,24,29,.9);padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,22px);position:relative;overflow:hidden}
.fig::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.fig:hover::after{transform:scaleX(1)}
.fig .n{font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1;color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.fig .l{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:12px;line-height:1.45}

/* ============================================================
   PILLARS
   The four brand pillars from the market strategy deck, each as a
   full-bleed chapter: the agency's own poster artwork as a parallaxed
   band, with the pillar name set large across its lower edge.
   ============================================================ */
.pillars-intro{padding:clamp(56px,8vw,112px) 0 clamp(26px,4vw,52px);border-top:1px solid var(--line-soft)}
.pillars-intro h2{color:var(--white)}
.pillars-intro .lead{margin-top:20px}

.pillar{position:relative;padding-bottom:clamp(44px,6.5vw,96px)}
.pillar + .pillar{padding-top:clamp(20px,3vw,44px)}

.pillar-band{position:relative;height:clamp(290px,44vh,520px);overflow:hidden}
.pillar-band img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;object-position:38% center;
  will-change:transform;
}
/* each artwork's subject sits in a different place, so on narrow screens
   (where only ~37% of the width shows) each one is framed on its subject */
.pillar-band img[src*="pillar-scope"]{object-position:46% center}
.pillar-band img[src*="pillar-manage"]{object-position:60% center}
.pillar-band img[src*="pillar-repair"]{object-position:68% center}
.pillar-band img[src*="pillar-train"]{object-position:49% center}
.pillar-fade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--void) 0%,rgba(10,11,13,0) 22%,rgba(10,11,13,0) 46%,rgba(10,11,13,.72) 82%,var(--void) 100%);
}

.pillar-head{position:relative;z-index:2;margin-top:clamp(-120px,-9vw,-54px)}
.pillar .kicker{
  display:flex;align-items:center;gap:15px;margin:0;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--red);
}
.pillar .kicker .ring{width:clamp(38px,4vw,54px);height:clamp(38px,4vw,54px)}
.pillar-name{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,11.5vw,9.5rem);line-height:.84;letter-spacing:-.042em;
  color:var(--white);margin:clamp(10px,1.4vw,20px) 0 0;
}
.pillar-tagline{
  font-family:var(--display);font-weight:500;letter-spacing:-.008em;
  font-size:clamp(1.05rem,2.1vw,1.65rem);line-height:1.24;
  color:var(--paper);max-width:28ch;margin:clamp(14px,1.8vw,24px) 0 0;
}
.pillar-foot{display:grid;gap:clamp(18px,2.6vw,44px);margin-top:clamp(24px,3.2vw,44px)}
@media(min-width:860px){.pillar-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.pillar-body{color:var(--grey);max-width:58ch;margin:0}
.pillar-foot .btn{justify-self:start}

/* the hero slash line doubles as navigation into the chapters */
.slashes a{color:inherit;transition:color .25s var(--ease)}
.slashes a:hover{color:var(--red)}

/* ============================================================
   INDEPENDENCE
   ============================================================ */
.stand{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--line);background:rgba(17,19,23,.72)}
.stand-grid{display:grid;gap:clamp(26px,4vw,68px)}
@media(min-width:920px){.stand-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.stand h2{color:var(--white);max-width:18ch}
.stand p{color:var(--grey)}
.certs{border-left:3px solid var(--red);padding-left:clamp(18px,2.4vw,30px)}
.certs h3{color:var(--white);margin-bottom:15px;font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em}
.std-list{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0;padding:0;list-style:none}
.std-list li{font-family:var(--display);font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);padding:6px 10px;background:var(--void)}
.standard{margin:clamp(28px,3.6vw,44px) 0 0;padding:0}
.standard p{
  font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.3;letter-spacing:-.012em;color:var(--paper);margin:0 0 14px;max-width:34ch;
}
.standard cite{
  font-family:var(--display);font-weight:700;font-style:normal;font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:11px;
}
.standard cite::before{content:"";width:26px;height:1px;background:var(--red)}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients-section{padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.clients-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.clients-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.clients-grid{grid-template-columns:repeat(5,1fr)}}
.client-logo{
  background:rgba(21,24,29,.9);display:flex;align-items:center;justify-content:center;
  padding:28px 22px;min-height:112px;color:var(--grey-2);
  transition:color .35s var(--ease),background .35s var(--ease);
}
.client-logo:hover{color:var(--white);background:rgba(28,32,38,.95)}
.client-logo svg{width:100%;height:auto;max-height:36px;fill:currentColor}

/* ============================================================
   CLOSE
   ============================================================ */
.close-cta{padding:clamp(64px,10vw,140px) 0;border-top:1px solid var(--line)}
.close-cta h2{color:var(--white);max-width:13ch;margin-bottom:24px}
.close-split{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,4vw,48px)}
@media(min-width:780px){.close-split{grid-template-columns:1fr 1fr}}
.close-half{background:rgba(21,24,29,.9);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:13px}
.close-half .k{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin:0}
.close-half p{font-size:.96rem;color:var(--grey);margin:0}
.close-half .btn{align-self:flex-start;margin-top:7px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:rgba(17,19,23,.92);border-top:1px solid var(--line);padding:clamp(44px,6vw,76px) 0 30px}
.cert-strip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.cert-strip .lbl{font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}
.cert-strip .badges{display:flex;gap:8px;flex-wrap:wrap}
/* ISO certification marks. The certifier's artwork is navy on transparent, so
   it sits on a white tile rather than being recoloured for the dark ground. */
.cert-strip .badges{gap:14px}
.iso{display:flex;flex-direction:column;align-items:center;gap:8px}
.iso img,.iso-row img{display:block;width:auto;background:#fff;border-radius:6px;padding:6px 7px;box-sizing:content-box}
.iso img{height:68px}
.iso-cap{font-family:var(--display);font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.iso-row{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 24px}
.iso-row img{height:96px}
@media (max-width:520px){.iso img{height:56px}.iso-row img{height:80px}}
.footer-top{display:grid;gap:clamp(26px,4vw,52px)}
@media(min-width:780px){.footer-top{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footer-about .brand{margin-bottom:17px}
.footer-about p{font-size:.9rem;color:var(--grey);max-width:36ch}
/* iStruX: the platform line in the footer, and the About page band.
   Deliberately quiet while the product is in development — it is named,
   explained in one line and linked, and nothing more. */
.footer-platform{
  margin:18px 0 0;max-width:36ch;padding-top:15px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.footer-platform .lbl{
  font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grey-2);
}
.footer-platform a{
  display:block;align-self:flex-start;margin:3px 0 4px;
  opacity:.88;transition:opacity .2s var(--ease);
}
.footer-platform a:hover{opacity:1}
/* The SVG is reversed artwork already, so it only needs sizing. Height drives
   it and width:auto keeps the ratio whatever the box does. */
.footer-platform img{height:27px;width:auto;display:block}
.footer-platform .note{font-size:.78rem;color:var(--grey-2);line-height:1.5}

.istrux{
  margin-top:clamp(24px,3vw,36px);padding:clamp(22px,3vw,32px);
  border:1px solid var(--line);background:rgba(21,24,29,.9);
}
.istrux-mark{
  display:block;width:clamp(168px,22vw,224px);height:auto;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.istrux .std-list{margin:0 0 clamp(18px,2.4vw,26px)}
.istrux-lock{
  /* No uppercase here: this is iStruX's own lockup and the capitals inside
     "iStruX" and "iScope" are part of both wordmarks. */
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  color:var(--paper);margin:0 0 clamp(16px,2vw,22px);max-width:none;
}
.istrux-lock::before{content:"";display:inline-block;width:22px;height:1px;background:var(--red);vertical-align:middle;margin-right:11px}

.footer-col h4{font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2);margin-bottom:15px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a,.footer-col li{font-size:.92rem;color:var(--grey);transition:color .2s var(--ease)}
.footer-col a:hover{color:var(--white)}
.footer-col .primary{color:var(--white)}
.footer-url{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,3.4vw,2.4rem);letter-spacing:-.01em;text-transform:uppercase;color:var(--white);margin:clamp(30px,4vw,48px) 0 0}
.footer-url em{font-style:normal;color:var(--red)}
/* The website address and the certification marks share one row: address left,
   marks right; they stack on narrow screens. */
.footer-mid{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px)}
.footer-mid .footer-url{margin:0}
.footer-mid .cert-strip{padding:0;margin:0;border:0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(26px,4vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.footer-bottom p{font-size:.78rem;color:var(--grey-2);margin:0;max-width:none}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--grey);transition:color .2s var(--ease),border-color .2s var(--ease)}
.footer-social a:hover{color:var(--white);border-color:var(--red)}
.footer-social svg{width:16px;height:16px}

/* ============================================================
   MOTION PRE-STATES — only live once JS confirms GSAP
   ============================================================ */
.anim-on .m-line .ln > i{transform:translateY(106%)}
.anim-on .m-up{opacity:0;transform:translateY(18px)}
.anim-on .m-rule{transform:scaleX(0)}
.anim-on .m-lock{opacity:0;transform:rotate(-90deg) scale(.72)}
.m-line{display:block}
.m-line .ln{display:block;overflow:hidden;padding-bottom:.05em}
.m-line .ln > i{display:block;font-style:normal}
.m-rule{transform-origin:0 50%}
.m-lock{transform-origin:50% 50%}

.anim-on .hero h1 .ln > i{transform:translateY(106%)}
.anim-on .hero-lock,
.anim-on .hero .slashes,
.anim-on .hero-sub,
.anim-on .hero-cta,
.anim-on .hero-foot,
.anim-on .brand{opacity:0}
.anim-on .mark-steel,
.anim-on .mark-shadow-img{opacity:0}
.anim-on .mark-reticle,
.anim-on .mark-rings{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .track,.btn::before{transition:none}
}


/* ============================================================
   INNER PAGES
   ============================================================ */
.page-open{padding-top:0}
.page-open .pillar-band{height:clamp(260px,40vh,460px)}
.page-open .pillar-head{margin-top:clamp(-110px,-8vw,-50px)}
.plain-open{padding:calc(var(--header-h) + clamp(54px,9vw,120px)) 0 clamp(26px,4vw,52px)}
.plain-title{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.4rem);line-height:.86;letter-spacing:-.035em;
  color:var(--white);margin:0 0 clamp(18px,2.4vw,30px);
}
.plain-title .ln{display:block;overflow:hidden;padding-bottom:.05em}
.plain-title .ln > i{display:block;font-style:normal}
.anim-on .plain-title .ln > i{transform:translateY(106%)}

.crumb{
  font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-2);margin:0 0 clamp(14px,2vw,22px);
}
.crumb a{color:var(--grey);transition:color .2s var(--ease)}
.crumb a:hover{color:var(--white)}
.crumb span{color:var(--red);margin:0 .5em}
.crumb b{color:var(--paper);font-weight:600}

.page-body{padding:clamp(48px,7vw,104px) 0;border-top:1px solid var(--line-soft)}
.page-body.alt{background:rgba(17,19,23,.6);border-top:1px solid var(--line)}
.page-open + .page-body{border-top:0}

/* capability columns */
.caps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px,3.4vw,44px)}
@media(min-width:800px){.caps{grid-template-columns:1fr 1fr}}
.cap{background:rgba(21,24,29,.9);padding:clamp(24px,3vw,38px)}
.cap h4{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);margin:0 0 18px;
}
.cap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.cap li{
  position:relative;padding-left:26px;color:var(--grey);font-size:.97rem;line-height:1.5;
}
.cap li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--red);
}

/* repair: machine cards */
.machines{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,40px)}
@media(min-width:780px){.machines{grid-template-columns:repeat(3,1fr)}}
.machine{background:rgba(21,24,29,.9);padding:clamp(22px,2.6vw,32px)}
.machine h4{font-family:var(--display);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin:0 0 12px;line-height:1.18}
.machine p{color:var(--grey);font-size:.94rem;margin:0}

/* about: the five definitions */
.defines{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;counter-reset:d;border-top:1px solid var(--line)}
.defines li{
  counter-increment:d;display:grid;grid-template-columns:1fr;gap:6px;
  padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line);
}
@media(min-width:800px){.defines li{grid-template-columns:62px 200px minmax(0,1fr);gap:clamp(16px,2.4vw,40px);align-items:start}}
.defines li::before{
  content:counter(d,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--red);
}
.defines h4{font-family:var(--display);font-weight:900;font-size:clamp(1.15rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:-.015em;color:var(--white);margin:0;line-height:1}
.defines p{color:var(--grey);margin:0;max-width:62ch;font-size:.97rem}

/* train: pricing */
.pricing{margin-top:clamp(26px,3.4vw,44px);border:1px solid var(--line);overflow-x:auto}
.pricing table{width:100%;border-collapse:collapse;min-width:560px;background:rgba(21,24,29,.9)}
.pricing th,.pricing td{text-align:left;padding:16px clamp(14px,2vw,24px);border-bottom:1px solid var(--line);vertical-align:top}
.pricing thead th{
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);background:var(--void);
}
.pricing tbody th{font-family:var(--display);font-weight:700;color:var(--white);font-size:1rem;letter-spacing:.01em}
.pricing td{color:var(--grey);font-size:.95rem}
.pricing tbody tr:last-child th,.pricing tbody tr:last-child td{border-bottom:0}
.pricing .p{white-space:nowrap;color:var(--paper);font-variant-numeric:tabular-nums}
.pricing .p b{font-family:var(--display);font-weight:900;font-size:1.25rem;color:var(--white);letter-spacing:-.02em}
.pricing .p span{display:block;font-size:.76rem;color:var(--grey-2);letter-spacing:.06em;margin-top:3px;white-space:normal}
.pricing .p a{color:var(--red);border-bottom:1px solid currentColor}

/* Every pricing row is a call to action. The visible link lives in the last
   cell so keyboard and screen-reader users get a real, labelled target; its
   ::after then stretches over the whole row so a mouse can click anywhere.
   A row is position:relative for that — supported everywhere current, and if a
   browser ignores it the stretch collapses to the cell and the row still works. */
.pricing tbody tr{position:relative;transition:background .22s var(--ease)}
.pricing tbody tr:hover,.pricing tbody tr:focus-within{background:rgba(224,34,44,.055)}
.pricing tbody tr:hover > th{color:var(--white)}
.pricing td.act{text-align:right;white-space:nowrap;width:1%}
.row-cta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-2);
  transition:color .22s var(--ease);
}
.row-cta i{font-style:normal;color:var(--red);transition:transform .28s var(--ease)}
.row-cta::after{content:"";position:absolute;inset:0}          /* the row hit area */
tr:hover .row-cta,.row-cta:focus-visible{color:var(--white)}
tr:hover .row-cta i{transform:translateX(5px)}
.row-cta:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.pricing-note{
  /* max-width:none overrides the global 64ch cap on <p>, which would otherwise
     stop the note's rule and background short of the table edge. */
  margin:0;max-width:none;padding:15px clamp(14px,2vw,24px);border-top:1px solid var(--line);
  background:var(--void);color:var(--grey-2);font-size:.82rem;line-height:1.55;
}
.pricing-note a{color:var(--paper);border-bottom:1px solid var(--line)}
.pricing-note a:hover{color:var(--red);border-bottom-color:currentColor}

/* On a phone the table used to scroll sideways, which pushed the price and the
   action button off screen — the one thing the row exists for. Below 680px each
   row becomes a card instead, so the price and its CTA are always in view. The
   markup stays a real table; only the display changes. */
@media(max-width:680px){
  .pricing{overflow:visible}
  .pricing table{display:block;min-width:0}
  .pricing thead{display:none}
  .pricing tbody,.pricing tbody tr{display:block}
  .pricing tbody tr{padding:17px clamp(14px,4vw,22px);border-bottom:1px solid var(--line)}
  .pricing tbody tr:last-child{border-bottom:0}
  .pricing tbody th,.pricing tbody td{display:block;border:0;padding:0}
  .pricing tbody th{font-size:1.06rem}
  .pricing tbody td{margin-top:5px}
  .pricing .p{white-space:normal;margin-top:11px}
  .pricing .p span{display:inline-block;margin-top:0}
  .pricing td.act{width:auto;text-align:left;margin-top:13px}
  .row-cta{font-size:.68rem}
}

/* next pillar */
.nextup{padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line)}
.nextup-link{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:6px}
.nextup-link .nl{color:var(--grey);font-size:1rem}
.nextup-link .na{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(1.5rem,4vw,2.6rem);color:var(--white);line-height:1;
}
.nextup-link .na i{font-style:normal;color:var(--red);display:inline-block;transition:transform .3s var(--ease)}
.nextup-link:hover .na i{transform:translateX(9px)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3vw,34px)}

/* leadership quote */
.quote-block{max-width:72ch}
.lead-quote{margin:0;border-left:3px solid var(--red);padding-left:clamp(18px,2.6vw,32px)}
.lead-quote p{
  font-family:var(--display);font-weight:500;letter-spacing:-.012em;
  font-size:clamp(1.2rem,2.6vw,2rem);line-height:1.24;color:var(--paper);margin:0 0 18px;
}
.lead-quote cite{
  font-family:var(--display);font-style:normal;font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.lead-quote cite span{display:block;color:var(--grey-2);font-weight:600;font-size:.7rem;letter-spacing:.18em;margin-top:5px}

/* contact */
.contact-grid{display:grid;gap:clamp(30px,4.5vw,70px)}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.contact-details{display:grid;gap:clamp(20px,2.4vw,30px);align-content:start}
.cd h4{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin:0 0 9px}
.cd p{margin:0;color:var(--grey);line-height:1.6}
.cd a{color:var(--paper);border-bottom:1px solid var(--line);transition:border-color .2s var(--ease),color .2s var(--ease)}
.cd a:hover{color:var(--white);border-bottom-color:var(--red)}
.cd a.big{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:.01em;border-bottom:0;color:var(--white)}
.cd a.big:hover{color:var(--red)}
.cd .note{display:block;font-size:.84rem;color:var(--grey-2);margin-top:5px}
.cd .maplink{display:inline-flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:0;color:var(--paper)}
.cd .maplink i{font-style:normal;color:var(--red)}
.cd .maplink:hover{color:var(--red)}

.contact-form{background:rgba(21,24,29,.9);border:1px solid var(--line);padding:clamp(24px,3.2vw,42px)}
.contact-form h2{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--white);margin-bottom:8px}
.contact-form .muted{color:var(--grey);font-size:.94rem;margin-bottom:24px}
.contact-form form{display:grid;gap:16px}
.contact-form label{
  display:grid;gap:8px;font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.contact-form input,.contact-form textarea{
  font-family:var(--body);font-size:.97rem;color:var(--paper);
  background:var(--void);border:1px solid var(--line);border-radius:1px;
  padding:13px 15px;width:100%;transition:border-color .2s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--red)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .btn{justify-self:start;margin-top:4px}
.formnote{font-size:.8rem;color:var(--grey-2);margin-top:18px;line-height:1.5}

/* ---------------------------------------------------------------- Draft 5 SEO
   Keyword line inside each service page's H1: the display word stays the
   visual headline, the line under it carries the phrase people search for. */
.pillar-name .h1-key{
  display:block;margin-top:clamp(14px,1.6vw,22px);max-width:34ch;
  font-family:var(--display);font-weight:600;text-transform:none;
  font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.35;letter-spacing:.01em;
  color:var(--paper);
}

/* FAQ: native <details>, so it works with JavaScript and motion turned off. */
.faq-list{display:grid;border-top:1px solid var(--line);max-width:880px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{
  margin:0;font-family:var(--display);font-weight:600;text-transform:none;letter-spacing:0;
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.35;color:var(--white);
}
.faq-item summary i{position:relative;flex:0 0 14px;height:14px}
.faq-item summary i::before,.faq-item summary i::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--red);
  transition:transform .25s var(--ease);
}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-item summary:hover h3{color:var(--paper)}
.faq-item summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.faq-item p{margin:0 0 22px;color:var(--grey);max-width:68ch}
.faq .faq-list{margin-top:clamp(28px,3.2vw,48px)}