/* =========================================================================
   Everest Heat Treaters — concept stylesheet

   The palette is taken from their business card: deep navy, steel blue,
   white. Pushed to its dark end and paired with the colour of hot metal,
   because that is literally what the company sells.

   Committed to dark only. This is an industrial brand and the drama is the
   point; a light variant would read as a different company.
   ========================================================================= */

@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2)format("woff2");
  font-weight:400 700;font-display:swap;font-style:normal}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2)format("woff2");
  font-weight:400 500;font-display:swap;font-style:normal}

:root{
  /* ground */
  --bg:#080C14;
  --bg-2:#0C121D;
  --surface:#121A28;
  --surface-2:#182234;

  /* ink */
  --ink:#E9EEF7;
  --muted:#96A4BB;
  --faint:#66748C;

  /* brand, sampled from the card */
  --navy:#16255C;
  --steel:#3E8BE0;

  /* incandescence */
  --heat:#FF6B18;
  --heat-2:#FFA51F;
  --heat-3:#FFD24A;
  --on-heat:#0B0B0B;

  --line:rgba(233,238,247,.13);
  --line-soft:rgba(233,238,247,.06);
  --shadow:0 2px 4px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.9);

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1240px;
  --narrow:780px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  --r:3px;
}

/* ---------------------------------------------------------------- base --- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:clamp(15.5px,.95rem + .18vw,17px);
  line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--heat-2);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--heat);color:var(--on-heat)}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.02em}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--heat);color:var(--on-heat);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------- typography --- */
.h1{font-family:var(--display);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;margin:0;font-size:clamp(2.3rem,1.4rem + 3.7vw,4.3rem)}
.h2{font-family:var(--display);font-weight:700;line-height:1.06;
  letter-spacing:-.03em;margin:0;font-size:clamp(1.85rem,1.2rem + 2.5vw,3rem)}
.h3{font-family:var(--display);font-weight:600;line-height:1.18;
  letter-spacing:-.02em;margin:0 0 .5em;font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}
.h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:2.2em 0 .8em}
/* Sub-headings that follow body copy need their own air; .h3 carries no top
   margin because it is also used as the first element inside cards. */
.prose + .h3,.ticks + .h3,.chips + .h3{margin-top:2em}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--heat-2);margin:0 0 1.1em}
.lede{font-size:clamp(1rem,.95rem + .35vw,1.15rem);color:var(--muted);
  max-width:60ch;margin:1.1em 0 0}
.prose p{margin:0 0 1.15em;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose--lg p{font-size:clamp(1rem,.95rem + .3vw,1.1rem)}

.link{display:inline-block;font-weight:500;font-size:.94rem;color:var(--heat-2);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.link:hover{color:var(--heat-3)}
.link--block{display:block;text-align:center;margin-top:.4em;padding-block:12px;border:0}

/* -------------------------------------------------------------- layout --- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--gut)*2,var(--narrow))}
.sec{padding-block:clamp(60px,8vw,120px)}
.sec--tight{padding-block:clamp(44px,5.5vw,80px)}
/* The contact page runs two tight sections back to back — the enquiry and
   the map. Both paid full padding, which left about 160px of dead space
   between them. The second one picks up where the first left off. */
.sec--tight + .sec--tight{padding-top:0}
.sec--alt{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.sec--plates{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.sec__head{max-width:64ch;margin-bottom:clamp(30px,4vw,54px)}
.sec__head--mid{margin-inline:auto;text-align:center}
.sec__head--mid .lede{margin-inline:auto}
.sec__more{margin-top:clamp(30px,4vw,50px);text-align:center}

.split{display:grid;gap:clamp(30px,5vw,72px);grid-template-columns:1fr 1fr;align-items:start}
.split--wide{grid-template-columns:1.45fr 1fr}

.img-fallback{width:100%;aspect-ratio:3/2;border-radius:var(--r);
  background:radial-gradient(90% 120% at 30% 110%,var(--heat) 0%,#7A2A06 34%,var(--surface) 72%)}

/* -------------------------------------------------------------- header --- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(8,12,20,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  transition:background .35s var(--ease)}
.hdr.is-stuck{background:rgba(8,12,20,.96)}
.hdr__in{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:22px;min-height:clamp(62px,6.5vw,80px)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.logo{display:flex;align-items:center;color:var(--heat)}
/* The mark is a mask, not an image, so it inherits colour from .logo and
   stays crisp against either ground. */
.logo__mark{display:block;width:52px;aspect-ratio:340/129;
  background:currentColor;
  -webkit-mask:url(assets/img/logo-mark.png) center/contain no-repeat;
  mask:url(assets/img/logo-mark.png) center/contain no-repeat}
.brand__txt{display:flex;flex-direction:column;line-height:1.2}
.brand__name{font-weight:800;font-size:1.32rem;letter-spacing:-.025em;
  color:var(--heat);transition:color .5s linear;
  text-shadow:0 0 22px rgba(255,107,24,.22)}
.brand__sub{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.nav{display:flex;gap:clamp(12px,1.6vw,26px)}
.nav a{text-decoration:none;font-size:.88rem;color:var(--muted);position:relative;
  padding:6px 0;transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--heat);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--ink)}
.hdr__act{display:flex;align-items:center;gap:10px}
.brand__sub{white-space:nowrap}
/* Between about 900 and 1080 the nav, the brand and the quote button are all
   competing. The certification line is the least load-bearing of the three,
   so it goes first. */
@media (max-width:1080px){ .brand__sub{display:none} }
@media (max-width:1000px){
  .logo__mark{width:46px}
  .brand__name{font-size:1.12rem}
}
@media (max-width:430px){
  .brand{gap:10px}
  .logo__mark{width:40px}
  .brand__name{font-size:1.02rem}
}

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;background:none;border:0;cursor:pointer;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.burger svg{display:block;width:24px;height:24px}

/* -------------------------------------------------------------- drawer --- */
.drawer{position:fixed;inset:0;z-index:120;background:var(--bg);
  padding:clamp(70px,12vw,96px) var(--gut) var(--gut);
  display:flex;flex-direction:column;gap:18px;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ease),visibility 0s linear .45s}
.drawer.is-open{transform:none;visibility:visible;transition-delay:0s}
.drawer[hidden]{display:flex}
.drawer__x{position:absolute;top:16px;right:calc(var(--gut) - 8px);width:44px;height:44px;
  display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--ink)}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{text-decoration:none;font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.1rem);letter-spacing:-.025em;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.drawer__meta{display:flex;flex-direction:column;gap:6px;margin-top:auto;
  color:var(--muted);font-size:.92rem}
.drawer__meta a{text-decoration:none}
/* landscape phone: very little height, so give the menu back its room */
@media (max-height:560px) and (orientation:landscape){
  .drawer{padding-top:62px;gap:10px}
  .drawer__nav a{font-size:clamp(1.1rem,.9rem + 1.2vw,1.35rem);
    padding:11px 0;min-height:44px;display:flex;align-items:center}
  .drawer__meta{margin-top:14px;font-size:.84rem}
}

/* -------------------------------------------------------------- button --- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border-radius:var(--r);
  background:var(--heat);color:var(--on-heat);border:1px solid var(--heat);
  font-size:.92rem;font-weight:600;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:var(--heat-2);border-color:var(--heat-2);transform:translateY(-1px);
  box-shadow:0 8px 30px -10px var(--heat)}
.btn:active{transform:scale(.985)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink);
  box-shadow:none}
.btn--sm{min-height:40px;padding:0 16px;font-size:.85rem}
.btn--block{display:flex;width:100%}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(74svh,680px);
  padding-block:clamp(64px,8vw,104px) clamp(34px,4.5vw,62px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media .img-fallback{width:100%;height:100%;object-fit:cover;
  aspect-ratio:auto;border-radius:0;
  filter:saturate(1.15) contrast(1.05) brightness(.62)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(8,12,20,.72) 0%,transparent 24%),
    linear-gradient(to top,var(--bg) 4%,rgba(8,12,20,.72) 46%,rgba(8,12,20,.3) 100%)}
/* the furnace glow bleeding out of the bottom-left */
.hero__glow{position:absolute;z-index:1;inset:auto auto -20% -12%;
  width:min(760px,90vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,24,.30) 0%,rgba(255,107,24,.10) 38%,transparent 68%);
  animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.62;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}
/* The mark, drawn. The outlines come from trace.py; they draw themselves in
   once and then carry a heat gradient that travels along the ridge. Sitting
   a little left of the edge so it reads as part of the composition rather
   than something stuck to the corner. */
.hero__mark{position:absolute;z-index:1;pointer-events:none;
  right:clamp(14px,3.5vw,74px);top:50%;transform:translateY(-50%);
  width:clamp(330px,45vw,760px);height:auto;overflow:visible}
.hero__mark__art path{
  fill:none;stroke:url(#markheat);stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:markdraw 2.4s cubic-bezier(.22,1,.28,1) calc(.3s + var(--d,0s)) forwards;
  filter:drop-shadow(0 0 18px rgba(255,107,24,.34))}
@keyframes markdraw{to{stroke-dashoffset:0}}

@media (max-width:900px){
  .hero__mark{width:min(100% - 24px,600px);right:auto;left:50%;top:auto;
    bottom:3%;transform:translateX(-50%);opacity:.4}
  .hero__mark__art path{stroke-width:1.3}
}
@media (max-width:560px){ .hero__mark{bottom:1%;opacity:.32} }
@media (prefers-reduced-motion:reduce){
  .hero__mark__art path{animation:none;stroke-dashoffset:0}
}
.hero__in{position:relative;z-index:2}
/* the word that runs up and down the heat scale, with its reading above */
.heat{position:relative;display:inline-block;color:var(--heat);
  transition:color .5s linear}
/* the reading sits above the word, so the headline needs room for it or it
   lands on top of the eyebrow */
.hero__title:has(.heat){padding-top:1.5rem}
@supports not selector(:has(*)){ .hero__title{padding-top:1.5rem} }
.heat__t{position:absolute;left:0;bottom:100%;margin-bottom:.18em;
  font-family:var(--mono);font-size:.2em;font-weight:500;letter-spacing:.16em;
  color:inherit;opacity:.85;white-space:nowrap;line-height:1}
@media (max-width:560px){ .heat__t{font-size:.24em;letter-spacing:.12em} }
.hero__eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--heat-2);margin:0 0 1.2em}
.hero__title{font-family:var(--display);font-weight:700;line-height:.98;
  letter-spacing:-.04em;margin:0;max-width:15ch;
  font-size:clamp(2.6rem,1.5rem + 5.6vw,5.8rem)}
.hero__title em{font-style:normal;
  background:linear-gradient(96deg,var(--heat) 0%,var(--heat-2) 48%,var(--heat-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__text{max-width:52ch;margin:1.4em 0 0;color:var(--muted);
  font-size:clamp(1rem,.95rem + .4vw,1.14rem)}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2em}

/* ------------------------------------------------- hero, furnace chart --- */
.hero--chart{align-items:center;min-height:0;
  padding-block:clamp(40px,5.5vw,84px) clamp(40px,5vw,72px)}
.hero--chart .hero__in{display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.hero--chart .hero__title{font-size:clamp(2.4rem,1.1rem + 3.6vw,4.3rem);max-width:none}
.hero--chart .hero__glow{inset:auto -10% -30% auto}

/* The mark beside the headline: outlines draw in, the solid fill follows,
   then heat travels across it. */
.mark{margin:0;position:relative;display:grid;place-items:center;isolation:isolate}
.mark::before{content:"";position:absolute;inset:8% 4% -6%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,107,24,.22),transparent);
  animation:breathe 7s ease-in-out infinite alternate}
.mark__svg{display:block;width:100%;height:auto;overflow:visible}
/* pathLength="1" on each outline, so the dash is exactly one outline long */
.mark__lines path{fill:none;stroke:url(#markline);stroke-width:2;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:markdraw 1.9s cubic-bezier(.22,1,.28,1) calc(.2s + var(--d,0s)) forwards,
            markfade .9s ease 2.9s forwards}
.mark__fill{opacity:0;animation:markfill 1.4s cubic-bezier(.22,1,.28,1) 1.7s forwards}
@keyframes markfill{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes markfade{to{opacity:.35}}
@media (max-width:980px){
  .hero--chart .hero__in{grid-template-columns:1fr}
  .mark{max-width:460px;width:100%;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .mark__lines path{animation:none;stroke-dashoffset:0;opacity:.35}
  .mark__fill{animation:none;opacity:1}
  .mark::before{animation:none}
}

/* ------------------------------------------------------------- subhero --- */
.subhero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(32svh,300px);
  padding-block:clamp(62px,7vw,86px) clamp(26px,3.4vw,42px)}
/* A page header, not a screen of its own: enough air to separate it from the
   sticky bar and no more. */
.subhero--plain{min-height:0;
  padding-block:clamp(54px,5.5vw,72px) clamp(24px,3vw,40px);
  border-bottom:1px solid var(--line-soft)}
.subhero__media{position:absolute;inset:0;z-index:0}
.subhero__media img,.subhero__media .img-fallback{width:100%;height:100%;object-fit:cover;
  aspect-ratio:auto;border-radius:0;filter:saturate(1.1) brightness(.5)}
.subhero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(8,12,20,.7) 0%,transparent 28%),
             linear-gradient(to top,var(--bg) 2%,rgba(8,12,20,.6) 60%,transparent 100%)}
.subhero--plain::after{display:none}
.subhero__in{position:relative;z-index:2}

/* --------------------------------------------------------------- stats --- */
.stats-band{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);
  padding-block:clamp(26px,3.4vw,44px)}
.stat b{display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem);line-height:1;
  letter-spacing:-.04em;color:var(--heat-2);font-variant-numeric:tabular-nums}
.stat__u{font-style:normal;font-size:.5em;margin-left:.28em;color:var(--heat)}
.stat__l{display:block;margin-top:.75em;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* ============================ TEMPERATURE SCALE ========================== */
.temp{padding-block:clamp(64px,9vw,130px) clamp(40px,5vw,72px);
  position:relative;overflow:hidden}
.temp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 42%,rgba(255,107,24,.07),transparent 70%)}
.temp__stage{position:relative;margin-top:clamp(24px,3vw,44px)}

.temp__barwrap{position:relative;padding:clamp(28px,5vw,60px) 0 0}
/* The bar. Colour and glow are driven from JS via these two properties. */
.temp__bar{
  height:clamp(46px,7vw,86px);border-radius:6px;
  background:var(--c,#C9C6BE);
  background-image:linear-gradient(to bottom,
    rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 26%,
    rgba(0,0,0,.16) 62%,rgba(0,0,0,.34) 100%);
  box-shadow:0 0 var(--gsize,0px) var(--gspread,0px) var(--c,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:background-color .18s linear,box-shadow .18s linear;
}
.temp__reflect{height:clamp(26px,4vw,52px);margin-top:2px;border-radius:6px;
  background:var(--c,#C9C6BE);opacity:.16;filter:blur(9px);
  transform:scaleY(-1);transition:background-color .18s linear}

.temp__control{margin-top:clamp(22px,3vw,38px)}
.temp__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;cursor:ew-resize;display:block}
.temp__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#8E8B84 0%,#6E7C93 14%,#5A3A2A 30%,
    #7E1B05 42%,#D14405 56%,#FF9420 72%,#FFD26B 87%,#FFF3D0 100%)}
.temp__range::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#8E8B84 0%,#6E7C93 14%,#5A3A2A 30%,
    #7E1B05 42%,#D14405 56%,#FF9420 72%,#FFD26B 87%,#FFF3D0 100%)}
.temp__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.7);cursor:grab}
.temp__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.7);cursor:grab}
.temp__range:active::-webkit-slider-thumb{cursor:grabbing}

.temp__marks{position:relative;height:20px;margin-top:2px}
.temp__mark{position:absolute;left:calc(var(--at) * 100%);transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;color:var(--faint);white-space:nowrap}
.temp__mark::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;
  background:var(--line)}

.temp__panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,54px);
  align-items:start;margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--line-soft)}
.temp__num{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.temp__num b{font-family:var(--mono);font-weight:500;letter-spacing:-.05em;
  font-size:clamp(2.6rem,1.6rem + 3.6vw,4.6rem);line-height:.9;color:var(--ink);
  font-variant-numeric:tabular-nums}
.temp__num span{font-family:var(--mono);font-size:1.1rem;color:var(--faint)}
.temp__num em{display:block;flex-basis:100%;font-style:normal;margin-top:.7em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--heat-2)}
.temp__band h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);margin:0 0 .5em}
.temp__band p{margin:0;color:var(--muted);max-width:58ch}

/* -------------------------------------------------------- process cards --- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.pcard{display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;transition:transform .5s var(--ease),border-color .4s var(--ease),
    box-shadow .5s var(--ease)}
.pcard__fig{overflow:hidden;background:var(--surface-2)}
.pcard__fig img,.pcard__fig .img-fallback{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:0;filter:saturate(1.05) brightness(.82);
  transition:transform .8s var(--ease),filter .5s var(--ease)}
.pcard__body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.pcard__title{font-family:var(--display);font-weight:600;font-size:1.16rem;
  letter-spacing:-.02em;margin:0 0 .45em}
.pcard__txt{color:var(--muted);font-size:.93rem;margin:0 0 1.3em}
.pcard__spec{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px;
  margin:0 0 1.4em;font-size:.8rem;align-items:baseline}
.pcard__spec dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.pcard__spec dd{margin:0;color:var(--ink);font-size:.82rem}
.pcard__go{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--heat-2)}
.pcard__go::after{content:" \2192";display:inline-block;transition:transform .4s var(--ease)}

/* --------------------------------------------------------------- feats --- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px)}
.feats--3{grid-template-columns:repeat(3,1fr)}
.feats--2{grid-template-columns:repeat(2,1fr)}
.policy{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.policy li{position:relative;padding:16px 18px 16px 46px;background:var(--surface);color:var(--muted);line-height:1.55}
.policy li:first-child{border-radius:var(--r) var(--r) 0 0}
.policy li:last-child{border-radius:0 0 var(--r) var(--r)}
.policy li::before{content:"";position:absolute;left:20px;top:25px;width:8px;height:8px;background:var(--heat);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.feat{padding-top:18px;border-top:2px solid var(--heat)}
.feat h3{font-family:var(--display);font-weight:600;font-size:1.08rem;margin:0 0 .5em;
  letter-spacing:-.015em}
.feat p{margin:0;color:var(--muted);font-size:.93rem}

/* -------------------------------------------------------------- quality --- */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.qtile__fig{overflow:hidden;border-radius:var(--r);background:var(--surface-2);
  margin-bottom:1.1em}
.qtile__fig img,.qtile__fig .img-fallback{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:0;filter:saturate(.85) brightness(.8);transition:filter .5s var(--ease)}
.qtile:hover .qtile__fig img{filter:saturate(1.05) brightness(.95)}
.qtile h3{font-family:var(--display);font-weight:600;font-size:1.04rem;margin:0 0 .45em;
  letter-spacing:-.015em}
.qtile p{margin:0;color:var(--muted);font-size:.9rem}

/* --------------------------------------------------------------- plates --- */
/* the four structures the lab sees most, each named */
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.plate{margin:0}
.plate img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line-soft);
  transition:transform .9s var(--ease)}
@media (hover:hover){ .plate:hover img{transform:scale(1.03)} }
.plate figcaption{display:grid;gap:3px;margin-top:12px}
.plate figcaption b{font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--heat-2)}
.plate figcaption span{font-size:.88rem;color:var(--muted);line-height:1.45}

/* ----------------------------------------------------------- industries --- */
.inds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.ind{padding:clamp(18px,2vw,24px);background:var(--surface);border-radius:var(--r);
  border:1px solid var(--line-soft)}
.ind h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:0 0 .5em;
  letter-spacing:-.015em}
.ind p{margin:0;color:var(--muted);font-size:.9rem}
.ind--lg h3{font-size:1.1rem}

/* --------------------------------------------------------------- quotes --- */
/* the works gallery — the client's own photographs, used at tile size */
/* the two certificates, shown as sheets rather than decoration */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px)}
.cert{margin:0}
.cert__sheet{display:block;background:#fff;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cert__sheet img{display:block;width:100%;height:auto;border-radius:0;
  aspect-ratio:auto}
@media (hover:hover){
  .cert__sheet:hover{transform:translateY(-4px);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
}
.cert figcaption{display:block;margin-top:14px}
.cert figcaption b{display:block;font-size:1rem;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:5px}
.cert figcaption span{display:block;font-size:.88rem;color:var(--muted);
  line-height:1.5}
@media (max-width:640px){ .certs{grid-template-columns:1fr} }

.shots{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,18px)}
.shot{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft)}
.shot img{display:block;width:100%;height:100%;aspect-ratio:3/2;
  object-fit:cover;border-radius:0;
  filter:saturate(1.06) contrast(1.04);transition:transform .6s var(--ease)}
.shot figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 11px;
  font-size:.78rem;line-height:1.35;color:#EDF1F8;
  background:linear-gradient(transparent,rgba(6,9,15,.88) 62%);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media (hover:hover){
  .shot:hover img{transform:scale(1.05)}
  .shot:hover figcaption{opacity:1;transform:none}
}
@media (hover:none){ .shot figcaption{opacity:1;transform:none} }
/* the quote grid follows however many testimonials there are, so one on its
   own sits centred instead of stranded in the left column of three */
.quotes--1,.quotes--2,.quotes--3{margin-top:clamp(24px,3vw,40px)}
.quotes--3{grid-template-columns:repeat(3,1fr)}
.quotes--2{grid-template-columns:repeat(2,1fr)}
.quotes--1{grid-template-columns:minmax(0,640px);justify-content:center}
@media (max-width:900px){ .shots{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){
  .shots{grid-template-columns:repeat(2,1fr)}
  .quotes--2,.quotes--3{grid-template-columns:1fr}
}
.custs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(14px,2vw,24px)}
.cust{flex:1 1 200px;max-width:300px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:104px;padding:22px 24px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);
  font-weight:600;letter-spacing:-.01em;line-height:1.35;
  transition:transform .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease)}
/* A heat pass. A warm band travels the row tile by tile, the way work comes
   up to temperature down the length of a furnace — the stagger comes from
   the same --i the reveal uses, so the two read as one movement. */
.cust::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,
    rgba(255,107,24,.16) 47%,rgba(255,180,90,.24) 50%,
    rgba(255,107,24,.16) 53%,transparent 66%);
  transform:translateX(-120%);
  animation:heatpass 7.5s cubic-bezier(.5,0,.5,1) infinite;
  animation-delay:calc(var(--i,0) * .42s)}
/* and a hairline that warms with it */
.cust::after{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--heat),transparent);
  opacity:0;transition:opacity .45s var(--ease)}
@keyframes heatpass{
  0%{transform:translateX(-120%)}
  42%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}
@media (hover:hover){
  .cust:hover{transform:translateY(-4px);border-color:rgba(255,107,24,.55);
    box-shadow:0 14px 34px -18px rgba(255,107,24,.55)}
  .cust:hover::after{opacity:1}
}
/* One review at a time. The track keeps the tallest slide's height so the
   section does not jump as they cycle. */
.quotes{position:relative;max-width:760px;margin-inline:auto;
  margin-top:clamp(42px,6vw,78px)}
.quotes__track{display:grid}
.quotes__track > .quote{grid-area:1/1;opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             visibility 0s linear .55s}
.quotes__track > .quote.is-on{opacity:1;visibility:visible;transform:none;
  transition-delay:0s}
.quotes[data-single] .quotes__track > .quote{opacity:1;visibility:visible;
  transform:none}
.quotes[data-single] .quotes__dots{display:none}
.quotes__dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.quotes__dots button{width:30px;height:3px;padding:0;border:0;cursor:pointer;
  background:var(--line);border-radius:2px;
  transition:background .35s var(--ease)}
.quotes__dots button.is-on{background:var(--heat)}
.quotes__dots button:hover{background:var(--heat-2)}
.quote{margin:0;padding:clamp(24px,3vw,38px);background:var(--surface);
  border-radius:var(--r);border:1px solid var(--line-soft);position:relative}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--heat),transparent)}
.quote p{margin:0 0 1.5em;font-size:1.06rem;line-height:1.55}
.quote cite{font-style:normal;display:flex;flex-direction:column;gap:3px}
.quote cite span{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}

/* ------------------------------------------------------------ materials --- */
.mat__tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,28px)}
.search{display:flex;align-items:center;gap:10px;flex:1;min-width:240px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 14px;color:var(--faint);
  transition:border-color .3s var(--ease)}
.search:focus-within{border-color:var(--heat)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font:inherit;font-size:.95rem;padding:13px 0}
.search input::placeholder{color:var(--faint)}
.mat__count{margin:0;font-family:var(--mono);font-size:.74rem;color:var(--faint);
  white-space:nowrap}
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--surface)}
.mat{width:100%;border-collapse:collapse;min-width:840px;font-size:.9rem}
.mat thead th{position:sticky;top:0;background:var(--surface-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:13px 16px;font-weight:500;
  border-bottom:1px solid var(--line)}
.mat td,.mat th[scope=row]{padding:13px 16px;border-bottom:1px solid var(--line-soft);
  text-align:left;vertical-align:top}
.mat th[scope=row]{font-weight:600;color:var(--ink);white-space:nowrap}
.mat td{color:var(--muted)}
.mat td.mono{color:var(--heat-2);white-space:nowrap}
.mat tbody tr{transition:background .2s var(--ease)}
.mat tbody tr:hover{background:var(--surface-2)}
.mat tbody tr[data-grade]{cursor:pointer}
/* pick one and the rest step back, so the choice is unmistakable */
.mat.is-picking tbody tr{opacity:.3;transition:opacity .3s var(--ease)}
.mat.is-picking tbody tr.is-picked{opacity:1;background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--heat)}
.mat tbody tr:focus-visible{outline:2px solid var(--heat);outline-offset:-2px}
/* the enquiry opens inside the table, under the row it belongs to */
.mat__ask td{padding:0;border-bottom:1px solid var(--line-soft);
  background:var(--surface-2)}
.mat.is-picking tbody tr.mat__ask{opacity:1}
.ask{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;
  max-width:100%;padding:18px 16px;box-shadow:inset 3px 0 0 var(--heat)}
.ask__lead{margin:0;color:var(--muted);font-size:.92rem}
.ask__lead b{color:var(--ink)}
.ask__form{display:flex;align-items:center;gap:10px}
.ask__form input{font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 13px;height:44px;width:240px;min-width:0}
.ask__form input:focus-visible{outline:2px solid var(--heat);outline-offset:1px}
.ask__form input::placeholder{color:var(--faint)}
.ask__done{margin:0;color:var(--heat-2);font-size:.94rem}
@media (max-width:900px){
  /* The table is 840px wide and scrolls inside its own box, so a cell that
     fills its width puts the enquiry off the side of a phone. Pinning the
     panel to the left of the scroll box keeps it on screen wherever the
     table happens to be scrolled to. */
  .mat__ask td{padding:0}
  .ask{position:sticky;left:0;
    width:min(calc(100vw - var(--gut) * 2), 460px);
    flex-direction:column;align-items:stretch;gap:12px}
  .ask__form input{width:100%;height:48px}
  .ask__form{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .ask__form .btn{width:100%}
}
.form input.is-prefilled{border-color:rgba(255,107,24,.55);
  background:rgba(255,107,24,.06)}
.mat__note{font-size:.85rem;color:var(--faint)}
.mat__empty{margin:26px 0 0;text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.76rem;padding:6px 11px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-soft);color:var(--muted)}

.ticks{list-style:none;margin:0 0 2em;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;
  background:var(--heat);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* ----------------------------------------------------------------- spec --- */
.spec{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);position:sticky;top:clamp(80px,9vw,104px)}
.spec__h{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin:0 0 1.3em;font-weight:500}
.spec__list{display:grid;gap:11px 0;margin:0 0 22px}
.spec__list dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.spec__list dd{margin:0 0 8px;font-size:.94rem;color:var(--ink)}

/* --------------------------------------------------------------- person --- */
.card-person{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.person__name{font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.025em;margin:0}
.person__quals{font-family:var(--mono);font-size:.8rem;color:var(--heat-2);margin:.3em 0 0}
.person__role{margin:.5em 0 0;color:var(--muted)}
.person__tel{margin:.45em 0 0!important}
.card-person hr{border:0;border-top:1px solid var(--line-soft);margin:1.6em 0}
.card-person p{margin:0 0 .6em}

/* ----------------------------------------------------------------- form --- */
.form{display:grid;gap:15px;max-width:660px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.req{font-style:normal;color:var(--heat);letter-spacing:.1em}
.form label{display:grid;gap:6px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.form input,.form select,.form textarea{font-family:var(--body);font-size:.97rem;
  text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  min-height:48px;width:100%;transition:border-color .3s var(--ease)}
.form textarea{min-height:118px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--heat)}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form__note{margin:0;font-size:.8rem;color:var(--faint);text-align:center}

/* ---------------------------------------------------------------- cinfo --- */
.cinfo{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.cinfo__cert{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--heat-2);margin:.2em 0 1.4em}
.cinfo address{font-style:normal;color:var(--muted);margin-bottom:1.6em}
.cinfo__list{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0}
.cinfo__list dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding-top:2px}
.cinfo__list dd{margin:0;font-size:.92rem;text-align:right;overflow-wrap:break-word}
.cinfo__list a{color:var(--ink);text-decoration:none}
.cinfo__list a:hover{color:var(--heat-2)}

/* The Google embed is a cross-origin iframe, so its own styling is out of
   reach. Inverting and rotating the hue turns the light map dark while
   leaving the road and water hues roughly where they belong — the standard
   trick, and the only one available without a Maps API key. */
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);
  aspect-ratio:21/9;background:var(--surface)}
.map iframe{width:100%;height:100%;border:0;display:block;
  filter:invert(1) hue-rotate(180deg) saturate(.72) brightness(.92) contrast(1.04)}
@media (prefers-reduced-transparency:reduce){ .map iframe{filter:none} }

/* ------------------------------------------------------------------ faq --- */
.faqs{display:grid}
.faq{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:20px 42px 20px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:2px;
  background:var(--heat);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:13px;top:50%;width:2px;height:12px;
  background:var(--heat);transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq[open] summary::before{transform:translateY(-50%) scaleY(0)}
.faq p{margin:0 0 22px;color:var(--muted);max-width:70ch}

/* ----------------------------------------------------------------- band --- */
.band{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(60px,8vw,110px);
  background:linear-gradient(160deg,var(--navy) 0%,#0B1430 55%,var(--bg) 100%);
  border-top:1px solid var(--line-soft)}
.band::after{content:"";position:absolute;inset:auto -10% -60% auto;width:min(720px,90vw);
  aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,24,.24) 0%,transparent 65%)}
.band__in{position:relative;z-index:1}
.band__in .lede{margin-inline:auto}
.band__act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2.2em}

/* ------------------------------------------------------------------ 404 --- */
.nf{min-height:72svh;display:flex;align-items:center;text-align:center}
.nf__in{margin-inline:auto;max-width:56ch}
.nf .lede{margin-inline:auto}
.nf .hero__act{justify-content:center}

/* --------------------------------------------------------------- footer --- */
.foot{background:var(--bg-2);border-top:1px solid var(--line-soft);
  padding-top:clamp(50px,6.5vw,84px)}
.foot__in{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1fr 1fr;
  gap:clamp(24px,3.4vw,44px);padding-bottom:clamp(38px,5vw,60px)}
.foot__mark{margin-bottom:1.1em}
.foot__mark .logo b{font-size:.9rem}
.foot__name{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:0;
  letter-spacing:-.02em}
.foot__tag{margin:.4em 0 0;color:var(--muted);font-size:.88rem;max-width:34ch}
.foot__cert{margin:.9em 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--heat-2)}
.foot__gst{margin:.9em 0 0;font-size:.78rem;color:var(--faint)}
.foot__gst span{font-family:var(--mono)}
.foot__h{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin:0;font-weight:500}
.foot__col address{font-style:normal;color:var(--muted);font-size:.88rem}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;
  gap:.62em}
.foot__col p{margin:0;font-size:.88rem;color:var(--muted)}
.foot__col > :first-child{margin-bottom:.35em}
.foot__role{display:inline-block;margin-top:.25em;color:var(--faint);
  font-size:.82rem}
.foot__col a{color:var(--muted);text-decoration:none;overflow-wrap:break-word}
.foot__col a:hover{color:var(--heat-2)}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em;font-size:.88rem}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:20px;border-top:1px solid var(--line-soft);
  font-size:.78rem;color:var(--faint)}
.foot__base p{margin:0}
.foot__note{max-width:62ch;text-align:right}

/* -------------------------------------------------------------- whatsapp --- */
.wa{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:80;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--heat);color:var(--on-heat);text-decoration:none;
  box-shadow:0 8px 26px -8px rgba(255,107,24,.7);
  transition:transform .35s var(--ease),background .3s var(--ease)}
.wa:hover{transform:translateY(-2px) scale(1.06);background:var(--heat-2)}

/* -------------------------------------------------------------- reveals --- */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ------------------------------------------------------- customer logos --- */
/* Each company's own mark in its own colours, on a pale plate so filled
   marks like BHEL's and L&T's read properly on the dark ground. The heat
   pass still runs across the tile frame around it. */
.custs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.cust{max-width:none;flex-direction:column;gap:12px;min-height:0;
  padding:12px 12px 14px}
.cust__plate{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;width:100%;height:92px;padding:14px 16px;
  border-radius:2px;background:#F3F5F9}
.cust__logo{display:block;width:auto;height:auto;max-width:100%;
  max-height:100%;object-fit:contain}
.cust__name{position:relative;z-index:1;font-family:var(--mono);
  font-size:.64rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:1000px){ .custs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .custs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cust{padding:10px 10px 12px}
  .cust__plate{height:78px;padding:12px}
}

/* ------------------------------------------------- industries, pictured --- */
.inds--pic{grid-template-columns:repeat(3,minmax(0,1fr))}
.ind--pic{display:flex;flex-direction:column;padding:0;overflow:hidden;
  color:inherit;text-decoration:none;
  transition:transform .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease)}
.ind__fig{overflow:hidden}
.ind__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:0;transition:transform .6s var(--ease)}
.ind--pic h3{margin:20px 22px 8px;font-size:1.14rem}
.ind--pic p{margin:0 22px 24px}
@media (hover:hover){
  .ind--pic:hover{transform:translateY(-4px);border-color:var(--line);
    box-shadow:var(--shadow)}
  .ind--pic:hover .ind__fig img{transform:scale(1.05)}
}
@media (max-width:760px){ .inds--pic{grid-template-columns:1fr} }

.sectors{display:grid;gap:clamp(56px,8vw,112px)}
.sector{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center;scroll-margin-top:96px}
.sector--flip .sector__fig{order:2}
.sector__fig{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft)}
.sector__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:0}
.sector__text .h2{margin:0 0 .6em}
.sector .chips{margin-top:22px}
@media (max-width:860px){
  .sector{grid-template-columns:1fr}
  .sector--flip .sector__fig{order:0}
}

/* ------------------------------------------------------------- the team --- */
.teamshot{margin:0 0 clamp(22px,3vw,34px);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line-soft)}
.teamshot{max-width:1000px;margin-inline:auto}
.teamshot img{display:block;width:100%;height:auto;border-radius:0}
.team{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.member{padding:18px 18px 20px;background:var(--surface);
  border-top:2px solid var(--heat);border-radius:0 0 var(--r) var(--r)}
.member b{display:block;font-family:var(--display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.01em;margin-bottom:5px}
.member span{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--heat-2);
  line-height:1.5}
@media (max-width:1000px){ .team{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){
  .team{grid-template-columns:1fr;gap:10px}
  .member{display:flex;justify-content:space-between;align-items:baseline;
    gap:12px;padding:14px 16px}
  .member b{margin:0}
  .member span{text-align:right}
}

/* ------------------------------------------------------------ the plant --- */
.plant{width:100%;border-collapse:collapse;font-size:.92rem;min-width:540px}
.plant th,.plant td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.plant tbody tr:last-child th,.plant tbody tr:last-child td{border-bottom:0}
.plant thead th{background:var(--surface-2);font-family:var(--mono);
  font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.plant th[scope=row]{font-weight:600;color:var(--ink)}
.plant td{color:var(--muted)}
.plant td.mono{color:var(--heat-2);white-space:nowrap}
@media (max-width:600px){
  .plant{min-width:0;font-size:.88rem}
  .plant th,.plant td{padding:12px 12px}
  .plant th:nth-child(3),.plant td:nth-child(3){display:none}
  .plant td.mono{white-space:normal}
}

/* --------------------------------------------------------------- safety --- */
.split--media{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center}
.safety__fig{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft)}
.safety__fig img{display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:70% 40%;border-radius:0}
.feats--flat{gap:22px 28px}
@media (max-width:900px){
  .safety__fig img{aspect-ratio:4/3}
}

/* ------------------------------------------------------ gallery, visits --- */
.shot > a{display:block;color:inherit}
.shot--video video{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;background:#000}
.shot--video figcaption{position:static;opacity:1;transform:none;
  background:none;padding:10px 12px 12px;color:var(--muted)}
.shot__tag{display:inline-block;margin-right:8px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--heat)}
.shots--visits{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .shots--visits{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .shots--visits{grid-template-columns:1fr} }

/* The full gallery: photographs keep their own shape, so a tall furnace shot
   stays tall. Two columns on a phone, up to four on a wide screen. */
.masonry{columns:2;column-gap:clamp(10px,1.4vw,18px)}
@media (min-width:700px){ .masonry{columns:3} }
@media (min-width:1080px){ .masonry{columns:4} }
.masonry .shot{display:block;break-inside:avoid;
  margin:0 0 clamp(10px,1.4vw,18px)}
.masonry .shot img{height:auto;aspect-ratio:auto}
.masonry .shot--video video{aspect-ratio:auto;object-fit:contain}
@media (max-width:520px){
  .masonry .shot figcaption{font-size:.72rem;padding:22px 10px 9px}
  .masonry .shot--video figcaption{padding:8px 10px 10px}
}

/* the gallery opens on its strongest photograph, at the size it was taken */
.gal-lead{padding-block:clamp(40px,5vw,64px) clamp(26px,3.4vw,42px)}
.gal-lead__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:end}
.gal-lead__fig img{aspect-ratio:auto;height:auto}
.gal-lead__text .h1{margin-top:.2em}
.gal-lead__count{margin:1.2em 0 0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--heat-2)}
@media (max-width:900px){ .gal-lead__in{grid-template-columns:1fr} }

/* ------------------------------------------------------------- lightbox --- */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:64px 16px 72px;
  background:rgba(4,6,10,.95)}
.lb[hidden]{display:none}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:14px}
.lb__img{display:block;max-width:min(100%,1400px);
  max-height:calc(100svh - 170px);width:auto;height:auto;
  object-fit:contain;border-radius:var(--r)}
.lb__cap{max-width:60ch;text-align:center;font-size:.92rem;color:var(--muted)}
.lb__btn{position:absolute;display:grid;place-items:center;width:48px;
  height:48px;padding:0;border-radius:50%;cursor:pointer;
  font-size:1.8rem;line-height:1;color:var(--ink);
  background:rgba(18,26,40,.85);border:1px solid var(--line)}
.lb__btn:hover{border-color:var(--heat)}
.lb__btn:focus-visible{outline:2px solid var(--heat);outline-offset:2px}
.lb__x{top:12px;right:12px}
.lb__prev,.lb__next{top:50%;transform:translateY(-50%)}
.lb__prev{left:14px}
.lb__next{right:14px}
.lb__n{position:absolute;top:26px;left:18px;margin:0;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.1em;color:var(--faint)}
.lb-open,.lb-open body{overflow:hidden}
@media (max-width:700px){
  .lb__prev,.lb__next{top:auto;bottom:14px;transform:none}
  .lb__prev{left:calc(50% - 60px)}
  .lb__next{right:calc(50% - 60px)}
}

/* ------------------------------------------------------ drawing upload --- */
.form input[type=file]{padding:9px 10px;font-size:.84rem;color:var(--muted);
  cursor:pointer}
.form input[type=file]::file-selector-button{margin-right:10px;
  padding:7px 12px;cursor:pointer;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r)}
.file__hint{font-size:.62rem;letter-spacing:.04em;text-transform:none;
  color:var(--faint)}

/* ------------------------------------------------------- folding nav --- */
/* Scrolling down, the page links fold away to the right into the Contact
   button; scrolling up, they unfold again. The bar, the name and Contact
   never move. The nav keeps its width, so nothing else shifts. Each link
   carries its position in --n: the one nearest Contact folds first and
   comes back last. */
.nav{clip-path:inset(-8px -8px -8px 0);
  transition:clip-path .55s var(--ease)}
.nav a{transition:color .3s var(--ease),opacity .35s var(--ease),
  transform .5s var(--ease);
  transition-delay:0s,calc((var(--n,0)) * 35ms),calc((var(--n,0)) * 35ms)}
.hdr.is-tucked .nav{clip-path:inset(-8px -8px -8px 100%);pointer-events:none}
.hdr.is-tucked .nav a{opacity:0;transform:translateX(34px);
  transition-delay:0s,calc((6 - var(--n,0)) * 35ms),calc((6 - var(--n,0)) * 35ms)}
@media (prefers-reduced-motion:reduce){ .nav,.nav a{transition:none} }

/* ------------------------------------------------------- who you deal with */
.person + .person{margin-top:1.1em;padding-top:1.1em;
  border-top:1px solid var(--line-soft)}
.card-person .person__name{font-size:1.3rem}
.cinfo__people{margin:0 0 1.6em;padding:1.2em 0;
  border-block:1px solid var(--line-soft)}
.cinfo__people .eyebrow{margin:0 0 .8em}
.cinfo__people .person__name{font-size:1.12rem;margin:0}
.cinfo__people .person__quals{font-size:.74rem}
.cinfo__people .person__role{margin:.25em 0 0;font-size:.92rem}

.safety__fig img{aspect-ratio:auto;object-fit:initial}
@media (max-width:900px){
  .safety__fig{max-width:520px;margin-inline:auto}
  .safety__fig img{aspect-ratio:auto}
}

/* ------------------------------------------------ processes, home tiles --- */
/* The homepage shows the eight as photographs with their names and nothing
   else; the write-up lives on the processes page. A heat line runs along
   the foot of each tile and fills on hover. */
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px)}
.ptile{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;aspect-ratio:4/5;overflow:hidden;
  padding:clamp(14px,1.6vw,22px);border-radius:var(--r);
  border:1px solid var(--line-soft);background:var(--surface);
  color:var(--ink);text-decoration:none;isolation:isolate}
.ptile img,.ptile .img-fallback{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;border-radius:0;
  filter:saturate(1.05) brightness(.72);
  transition:transform .8s var(--ease),filter .5s var(--ease)}
.ptile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(6,9,15,.94) 8%,rgba(6,9,15,.35) 55%,
    rgba(6,9,15,.1))}
.ptile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--heat),var(--heat-3));
  transform:scaleX(.18);transform-origin:left;
  transition:transform .6s var(--ease)}
.ptile__n{position:absolute;top:clamp(12px,1.4vw,18px);left:clamp(14px,1.6vw,22px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--heat-2)}
.ptile__name{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,.9rem + .45vw,1.3rem);line-height:1.18;
  letter-spacing:-.02em;text-wrap:balance}
@media (hover:hover){
  .ptile:hover img{transform:scale(1.06);filter:saturate(1.15) brightness(.85)}
  .ptile:hover::after{transform:scaleX(1)}
}
.ptile:focus-visible{outline:2px solid var(--heat);outline-offset:3px}
.ptile:focus-visible::after{transform:scaleX(1)}
@media (max-width:900px){ .ptiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .ptile{aspect-ratio:1/1} }

/* ------------------------------------------------- processes, in full --- */
.jump{display:flex;flex-wrap:wrap;gap:8px;padding-block:clamp(22px,3vw,34px) 0}
.chip--link{text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.chip--link:hover{border-color:var(--heat);color:var(--heat-2)}
.procs{display:grid;gap:clamp(56px,8vw,104px)}
.proc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,68px);align-items:start;scroll-margin-top:96px}
.proc--flip .proc__fig{order:2}
.proc__fig{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);position:sticky;top:104px}
.proc__fig img,.proc__fig .img-fallback{display:block;width:100%;
  aspect-ratio:4/5;object-fit:cover;border-radius:0}
.proc__text .h2{margin:0 0 .35em}
.proc__text .lede{margin:0 0 1.4em}
.proc__spec{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 1.6em}
.proc__spec div{padding:14px 16px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r)}
.proc__spec dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.proc__spec dd{margin:0;color:var(--heat-2);font-size:.93rem;line-height:1.45}
.proc .prose{margin-bottom:1.6em}
.proc .ticks{margin-bottom:1.6em}
@media (max-width:900px){
  .proc{grid-template-columns:1fr}
  .proc--flip .proc__fig{order:0}
  .proc__fig{position:static}
  .proc__fig img,.proc__fig .img-fallback{aspect-ratio:16/10}
}
@media (max-width:480px){ .proc__spec{grid-template-columns:1fr} }

/* ----------------------------------------------- quality, home strip --- */
/* Four facts in one quiet row, divided by hairlines; the quality page keeps
   the photographs. */
.qstrip{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--line-soft)}
.qstrip__item{padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,26px);
  display:grid;gap:6px;align-content:start}
.qstrip__item + .qstrip__item{border-left:1px solid var(--line-soft)}
.qstrip__item b{font-family:var(--mono);font-weight:500;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--heat-2)}
.nobr{white-space:nowrap}
.qstrip__item span{color:var(--ink);font-size:1rem;line-height:1.45}
@media (max-width:900px){
  .qstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qstrip__item:nth-child(3){border-left:0}
  .qstrip__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:480px){
  .qstrip{grid-template-columns:1fr}
  .qstrip__item + .qstrip__item{border-left:0;border-top:1px solid var(--line-soft)}
}

/* ------------------------------------------------- industries, posters --- */
/* The industry images are portrait posters with their titles set in, so
   they keep their full 2:3 shape. */
.sector{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.sector--flip{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
.sector__fig{box-shadow:var(--shadow)}
.sector__fig img{aspect-ratio:2/3;height:auto}
@media (max-width:860px){
  .sector,.sector--flip{grid-template-columns:1fr}
  .sector__fig{max-width:440px;width:100%;margin-inline:auto}
}

.more{margin-top:clamp(56px,8vw,100px);padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--line-soft);text-align:center}
.more__h{margin:0 0 .6em;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--heat-2)}
.more__list{margin:0 auto;max-width:60ch;color:var(--muted);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.8;text-wrap:balance}
.more__list span{color:var(--faint);margin-inline:.35em}

/* ------------------------------------------------ quality, one by one --- */
.qsecs{display:grid;gap:clamp(48px,7vw,96px)}
.qsec{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.qsec--flip .qsec__fig{order:2}
.qsec__fig{margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.qsec__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.qsec__text .h2{margin:0 0 .5em}
.qsec__text .lede{margin:0}
@media (max-width:860px){
  .qsec{grid-template-columns:1fr}
  .qsec--flip .qsec__fig{order:0}
}

/* Gallery opener as one banner: the photograph wide and short, the title
   laid over its lower edge, so there is no empty column beside it. */
.gal-lead{padding-block:clamp(20px,3vw,36px) clamp(18px,2.4vw,30px)}
.gal-lead__in{display:block;position:relative}
.gal-lead__fig{margin:0;border-radius:var(--r);overflow:hidden}
.gal-lead__fig img{width:100%;height:clamp(300px,52vh,520px)!important;
  aspect-ratio:auto;object-fit:cover;object-position:50% 58%}
.gal-lead__fig figcaption{display:none}
.gal-lead__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,9,15,.92) 0%,rgba(6,9,15,.55) 38%,transparent 70%),
             linear-gradient(to right,rgba(6,9,15,.6),transparent 60%)}
.gal-lead__text{position:absolute;left:0;bottom:0;z-index:2;pointer-events:none;
  padding:clamp(20px,3.4vw,44px);max-width:640px}
.gal-lead__text .h1{margin:.15em 0 .25em}
.gal-lead__text .lede{margin:0;color:#D5DCE8}
.gal-lead__count{margin-top:.9em}
@media (max-width:600px){
  .gal-lead__fig img{height:62vh!important}
}

/* Every field is label-then-control on the same two rows, so paired fields
   line up: the label (with "required" or a hint on the same line) above,
   and a control of one fixed height below. */
.form__row{align-items:start}
.form label{grid-template-rows:auto auto;align-content:start}
.form__lbl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  min-height:1.2em}
.form .req,.form .opt{font-style:normal;font-size:.62rem;letter-spacing:.1em}
.form .opt{color:var(--faint);text-transform:none;letter-spacing:.02em;
  font-family:var(--body);font-size:.72rem}
.form input:not([type=file]),.form select{height:50px;min-height:50px;
  padding-block:0}
.form input[type=file]{height:50px;min-height:50px;padding:0 10px;
  display:flex;align-items:center;line-height:50px}
.form input[type=file]::file-selector-button{vertical-align:middle}

/* ------------------------------------------ about: holds, aims, promise */
/* "Three things we hold to" reads as a ruled list: title left, line right. */
.holds{max-width:980px;margin-inline:auto;border-top:1px solid var(--line)}
.hold{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:12px clamp(24px,4vw,56px);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.hold h3{margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);letter-spacing:-.02em}
.hold p{margin:0;color:var(--muted)}
@media (max-width:700px){ .hold{grid-template-columns:1fr} }

/* "What we are aiming at": two open columns split by a warm rule, then the
   promise set large, as the page's closing statement. */
.aims{display:grid;grid-template-columns:1fr 1fr;max-width:1040px;margin-inline:auto}
.aim{padding:4px clamp(22px,4vw,56px)}
.aim + .aim{border-left:1px solid;border-image:linear-gradient(transparent,var(--heat),transparent) 1}
.aim p{margin:0 0 .8em;color:var(--muted);font-size:1.02rem}
.aim p:last-child{margin-bottom:0}
.aim__k{font-family:var(--mono);font-size:.7rem!important;letter-spacing:.16em;
  text-transform:uppercase;color:var(--heat-2)!important;margin:0 0 1em!important}
.promise{max-width:860px;margin:clamp(48px,7vw,88px) auto 0;text-align:center;
  padding-top:clamp(36px,5vw,56px);position:relative}
.promise::before{content:"";position:absolute;top:0;left:50%;width:64px;height:2px;
  transform:translateX(-50%);background:linear-gradient(90deg,var(--heat),var(--heat-3))}
.promise__lead{margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);line-height:1.25;
  letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.promise__sub{margin:1.1em auto 0;max-width:52ch;color:var(--muted);font-size:1.05rem}
@media (max-width:760px){
  .aims{grid-template-columns:1fr;gap:34px}
  .aim{padding:0}
  .aim + .aim{border-left:0;padding-top:30px;border-top:1px solid var(--line)}
}

.proc__how{margin:0 0 1.6em;padding:18px 20px;background:var(--surface);
  border-left:2px solid var(--heat);border-radius:0 var(--r) var(--r) 0}
.proc__how-h{margin:0 0 .5em;font-family:var(--mono);font-weight:500;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--heat-2)}
.proc__how p{margin:0;color:var(--ink);line-height:1.65}

.form__status{margin:0;padding:12px 14px;border-radius:var(--r);font-size:.92rem;
  color:var(--ink);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.4)}
.form__status.is-fail,.ask__done.is-fail{color:var(--ink);background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.45);padding:10px 12px;border-radius:var(--r)}
.form button[disabled]{opacity:.7;cursor:progress}

.field__err{display:block;margin-top:2px;font-family:var(--body);font-size:.8rem;
  letter-spacing:0;text-transform:none;color:#FF8A80;line-height:1.4}
.field__err[hidden]{display:none}
input.is-bad{border-color:#F87171!important;background:rgba(239,68,68,.06)!important}
.ask__form{flex-wrap:wrap}
.ask__form .field__err{flex-basis:100%;order:3}

/* -------------------------------------------------------------- thanks --- */
.form[hidden],.thanks[hidden],.ask__form[hidden]{display:none!important}
/* After a successful send the form closes and this takes its place: a ring
   draws round, the tick strokes in, a soft heat glow blooms behind it. */
.thanks{max-width:660px;padding:clamp(34px,5vw,56px) clamp(20px,3vw,36px);
  text-align:center;border:1px solid var(--line);border-radius:14px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,107,24,.10),transparent 62%),var(--surface);
  outline:none}
.thanks__tick{width:96px;height:96px;display:block;margin:0 auto 18px;overflow:visible}
.thanks__glow{fill:rgba(255,107,24,.14);transform-origin:48px 48px;transform:scale(.4);opacity:0}
.thanks__ring{fill:none;stroke:var(--heat);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:48px 48px}
.thanks__check{fill:none;stroke:var(--heat-3);stroke-width:5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.thanks__h{margin:0 0 .45em;font-family:var(--display);font-weight:700;
  font-size:clamp(1.45rem,1.1rem + 1.2vw,1.9rem);letter-spacing:-.02em}
.thanks__p{margin:0 auto 1.3em;max-width:44ch;color:var(--muted)}
.thanks__h,.thanks__p,.thanks__again{opacity:0;transform:translateY(8px)}
.thanks__again{background:none;border:0;cursor:pointer;font:inherit;font-size:.92rem}
.thanks.is-on .thanks__glow{animation:tglow 1.1s cubic-bezier(.22,1,.36,1) forwards}
.thanks.is-on .thanks__ring{animation:tdraw .7s cubic-bezier(.65,0,.35,1) .1s forwards}
.thanks.is-on .thanks__check{animation:tdraw .45s cubic-bezier(.65,0,.35,1) .7s forwards}
.thanks.is-on .thanks__tick{animation:tpop .5s cubic-bezier(.34,1.56,.64,1) 1.05s}
.thanks.is-on .thanks__h{animation:tup .6s var(--ease) .9s forwards}
.thanks.is-on .thanks__p{animation:tup .6s var(--ease) 1.02s forwards}
.thanks.is-on .thanks__again{animation:tup .6s var(--ease) 1.14s forwards}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes tglow{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:1;transform:scale(1.35)}}
@keyframes tpop{50%{transform:scale(1.08)}}
@keyframes tup{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .thanks *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .thanks__glow{transform:scale(1.35)!important}
  .thanks__ring{transform:rotate(-90deg)!important}
}

/* the same thank-you, sized for a table row */
.thanks--mini{display:flex;align-items:center;gap:16px;max-width:none;width:100%;
  padding:6px 4px;text-align:left;border:0;background:none;border-radius:0}
.thanks--mini .thanks__tick{width:52px;height:52px;flex:0 0 52px;margin:0}
.thanks--mini .thanks__h{font-size:1.08rem;margin:0 0 .2em}
.thanks--mini .thanks__p{margin:0;max-width:none;font-size:.9rem}
.thanks--mini .thanks__p b{color:var(--ink)}
.ask__lead[hidden],.thanks--mini[hidden]{display:none!important}

/* ------------------------------------------------------------ tap size --- */
/* Inline links collapse to the height of their text (~16px). That is fine on
   a desktop and awkward under a thumb, so the ones people actually tap get
   padding rather than a bigger font. */
@media (max-width:860px){
  .foot__col{gap:.2em}
  .foot__col ul{gap:.2em}
  .foot__col ul a,.foot__col p a{display:inline-flex;align-items:center;
    min-height:44px;padding-block:0}
  .foot__social a{padding-block:8px}
  .brand{padding-block:10px}
  /* Phone and email are the most-tapped things on a trade site; on a phone
     they must not be 16px slivers. */
  .drawer__meta a{display:inline-block;padding-block:10px}
  .cinfo__list dd a{display:inline-block;padding-block:12px}
  .card-person p .link{padding-block:8px}
}

/* --------------------------------------------------------- narrow fixes --- */
/* Grid and flex children default to min-width:auto and refuse to shrink below
   their own content. On a 320px screen that is what pushes long email
   addresses and form inputs past the right edge. Let them shrink. */
.foot__in>*,.split>*,.form__row>*,.temp__panel>*,.mat__tools>*,
.hdr__in>*,.hero__act>*,.band__act>*{min-width:0}
.form input,.form select,.form textarea{min-width:0}

/* overflow-wrap:break-word keeps a word intact when measuring min-content,
   so it alone cannot rescue a narrow column. `anywhere` does. Scoped to the
   long tokens (emails, addresses) so ordinary copy still breaks on spaces. */
.foot__col a,.cinfo__list dd,.cinfo__list a,.drawer__meta a{overflow-wrap:anywhere}

@media (max-width:400px){
  .foot__in{grid-template-columns:1fr}
  .cinfo__list{grid-template-columns:1fr;gap:2px 0}
  .cinfo__list dd{text-align:left;margin-bottom:.7em}
}

/* ------------------------------------------------------------ hover-only --- */
@media (hover:hover){
  .pcard:hover{transform:translateY(-4px);border-color:var(--line);
    box-shadow:var(--shadow)}
  .pcard:hover .pcard__fig img{transform:scale(1.05);filter:saturate(1.15) brightness(.95)}
  .pcard:hover .pcard__go::after{transform:translateX(4px)}
}

/* ----------------------------------------------------------- responsive --- */
@media (max-width:1140px){
  .foot__in{grid-template-columns:1.6fr 1fr 1fr;}
  .foot__brand{grid-column:1/-1}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .qgrid{grid-template-columns:repeat(2,1fr)}
  .indgrid{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .split--wide{grid-template-columns:1fr}
  .spec{position:static}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .temp__panel{grid-template-columns:1fr;gap:20px}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:flex}
  .feats--3{grid-template-columns:repeat(2,1fr)}
  .feats--2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__note{text-align:left}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px 16px}
}
@media (max-width:640px){
  .pgrid,.qgrid,.indgrid,.inds{grid-template-columns:1fr}
  .feats,.feats--3{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand__sub{display:none}
  .map{aspect-ratio:4/3}
  .temp__mark{font-size:.6rem}
}
@media (max-width:430px){
  .hdr__act .btn--sm{display:none}
}

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion:reduce){
  .cust::before{animation:none;display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* motion off must never mean content invisible */
  [data-reveal]{opacity:1;transform:none}
  .hero__glow{animation:none}
}
.gal-lead + .sec{padding-top:0}