/* Technical Innovation Servis. Front page = approved mock-up E (verbatim CSS
   below the fonts), then the WordPress additions at the end of the file. */

/* Geist (OFL), self-hosted: no request to Google Fonts. */
@font-face{ font-family:"Geist"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/geist-latin-ext.woff2?v=1.0.0) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:"Geist"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/geist-latin.woff2?v=1.0.0) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* =====================================================================
   Design E. Consolidated: C layout + rounded buttons + pipe wayfinding,
   B type (Geist) + joining reveal, A/D full-screen section openers.
   Group colours: blue = testing & analysis, red = equipment, yellow = training.
   Radius rule: interactive controls are full pills; panels and images 14px;
   full-bleed openers are square to the viewport edge.
   ===================================================================== */
:root{
  --paper:#ffffff;
  --off:#f7f8f9;
  --ink:#111820;
  --ink-2:#3f4954;
  --ink-3:#5b6570;
  --rule:#e3e6ea;
  --rule-2:#c9cfd6;

  --blue:#2b78bc;   --blue-d:#1b5b95;  --blue-ink:#1a5690;  --blue-t:#f1f6fb;
  --red:#c9372e;    --red-d:#93261f;   --red-ink:#a2271f;   --red-t:#fbf3f2;
  --yellow:#e8b81c; --yellow-d:#b48a0e; --yellow-ink:#6b5200; --yellow-t:#fcf8ea;

  --sans:"Geist", "Helvetica Neue", Arial, sans-serif;

  --maxw:1240px;
  --padL:clamp(28px, 5vw, 96px);
  --padR:clamp(16px, 5vw, 96px);
  --sec:clamp(72px, 8vw, 160px);
  --r:14px;
  --hdr:clamp(68px, 5.4vw, 84px);

  --fs-body:clamp(1rem, .95rem + .18vw, 1.125rem);
  --fs-h2:clamp(2.1rem, 1.2rem + 2.2vw, 4rem);
  --fs-open:clamp(2.5rem, 1rem + 4.1vw, 6rem);
  --fs-h3:clamp(1.4rem, 1.15rem + .6vw, 2rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (min-width:1800px){ :root{ --maxw:1600px } }
@media (min-width:2200px){ html{ font-size:17.5px } }
@media (min-width:2400px){ :root{ --maxw:1880px } html{ font-size:18.5px } }
@media (max-width:699px){ :root{ --padL:28px; --padR:16px } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 12px) }
html.rm{ scroll-behavior:auto }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px }
::selection{ background:var(--blue-t); color:var(--ink) }
:focus-visible{ outline:2px solid var(--blue-ink); outline-offset:3px; border-radius:4px }
h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-.03em; text-wrap:balance }
h2{ font-size:var(--fs-h2); line-height:1.05 }
h3{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.022em }
p{ margin:0; text-wrap:pretty }
.wrap{ width:100%; max-width:calc(var(--maxw) + var(--padL) + var(--padR)); margin-inline:auto; padding-left:var(--padL); padding-right:var(--padR); position:relative }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px }
.skip:focus{ left:12px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.muted{ color:var(--ink-2) }
.num{ font-variant-numeric:tabular-nums }

/* ---------- Group colours + pipe tick (wayfinding glyph from C) ---------- */
.g-blue{ --c:var(--blue); --cd:var(--blue-d); --ci:var(--blue-ink); --ct:var(--blue-t) }
.g-red{ --c:var(--red); --cd:var(--red-d); --ci:var(--red-ink); --ct:var(--red-t) }
.g-yellow{ --c:var(--yellow); --cd:var(--yellow-d); --ci:var(--yellow-ink); --ct:var(--yellow-t) }
.g-ink{ --c:#8b949e; --cd:#5b6570; --ci:var(--ink); --ct:var(--off) }
.tick{ display:inline-block; width:22px; height:7px; border-radius:4px; background:var(--c, var(--ink)); box-shadow:inset 0 -2px 0 var(--cd, rgba(0,0,0,.25)); flex:none; vertical-align:middle }

/* ---------- Buttons (C's rounded pills) ---------- */
.btn{
  --bb:var(--ink); --bf:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em; white-space:nowrap;
  font:600 .98rem/1 var(--sans); letter-spacing:-.003em; text-decoration:none;
  padding:1.05em 1.55em; border-radius:999px; border:1.5px solid var(--bb);
  background:var(--bb); color:var(--bf); cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn i{ font-size:.9em; transition:transform .3s var(--ease) }
.btn:hover{ box-shadow:0 10px 24px -14px rgba(17,24,32,.6) }
.btn:hover i.fa-arrow-right{ transform:translateX(3px) }
.btn:active{ transform:translateY(1px) scale(.985) }
.btn-blue{ --bb:var(--blue-ink); --bf:#fff }
.btn-blue:hover{ --bb:#154878 }
.btn-red{ --bb:var(--red-ink); --bf:#fff }
.btn-red:hover{ --bb:#86201a }
.btn-yellow{ --bb:var(--yellow); --bf:var(--ink) }
.btn-yellow:hover{ --bb:#d6a811 }
.btn-line{ background:transparent; color:var(--ink); --bb:var(--rule-2) }
.btn-line:hover{ --bb:var(--ink); box-shadow:none }
.btn-white{ --bb:#fff; --bf:var(--ink) }
.btn-ghost{ background:rgba(17,24,32,.18); color:#fff; --bb:rgba(255,255,255,.75) }
.btn-ghost:hover{ background:#fff; color:var(--ink); --bb:#fff }
.btn-sm{ font-size:.9rem; padding:.8em 1.2em }
.link{ font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.5em; border-bottom:1.5px solid var(--c, var(--ink)); padding-bottom:2px; transition:gap .3s var(--ease) }
.link:hover{ gap:.75em }

/* ---------- Header ---------- */
.site-head{ position:sticky; top:0; z-index:50; background:var(--paper); transition:box-shadow .3s }
.site-head.scrolled{ box-shadow:0 1px 0 var(--rule) }
.head-in{ display:flex; align-items:center; gap:clamp(16px, 2vw, 40px); height:var(--hdr) }
.brand{ display:flex; align-items:center; flex:none }
.brand img{ height:clamp(48px, 3.9vw, 64px); width:auto }
.nav{ display:flex; align-items:center; gap:clamp(18px, 1.8vw, 38px); margin-left:auto }
.nav a{ position:relative; display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font-weight:500; font-size:.97rem; padding:.5em 0; white-space:nowrap }
.nav a .tick{ width:12px; height:5px; box-shadow:none; transition:width .35s var(--ease) }
.nav a:hover .tick{ width:20px }
.nav a.plain::after{ content:""; position:absolute; left:0; right:0; bottom:.2em; height:1.5px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.nav a.plain:hover::after{ transform:scaleX(1) }
.head-actions{ display:flex; align-items:center; gap:20px; flex:none }
.tel{ font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.5em; font-variant-numeric:tabular-nums; white-space:nowrap }
.tel i{ color:var(--blue-ink) }
.menu-btn{ display:none; margin-left:auto; align-items:center; gap:.6em; font:600 .95rem var(--sans); background:none; border:1.5px solid var(--rule-2); border-radius:999px; padding:.62em 1.05em; color:var(--ink); cursor:pointer }
.sheet{ position:fixed; inset:0; z-index:60; background:var(--paper); padding:16px var(--padR) 32px var(--padL); display:flex; flex-direction:column; transform:translateY(-102%); transition:transform .5s var(--ease); visibility:hidden; overflow-y:auto }
.sheet.open{ transform:none; visibility:visible }
.sheet-top{ display:flex; justify-content:space-between; align-items:center }
.sheet nav{ display:flex; flex-direction:column; margin-top:24px; border-top:1px solid var(--rule) }
.sheet nav a{ display:flex; align-items:center; gap:14px; font-size:1.65rem; font-weight:500; letter-spacing:-.025em; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--rule) }
.sheet .sheet-cta{ margin-top:auto; padding-top:28px; display:grid; gap:10px }
@media (max-width:1239px){
  .nav, .head-actions .tel{ display:none }
  .menu-btn{ display:inline-flex }
  .head-actions{ order:3 }
}
@media (max-width:699px){ .head-actions{ display:none } }

/* ---------- The joining reveal (from B), used on every full-screen opener ----------
   Two copies of one photograph, each clipped to one side of --seam. They start
   pulled apart and meet at the seam, where a fine bead in the group colour runs
   down the joint and fades. --seam is set on each image to sit on the actual
   joint in the photograph, and object-position uses the same value so the joint
   stays on the seam at every viewport width. */
@property --p{ syntax:'<number>'; inherits:true; initial-value:1 }
/* The joint: two halves of one photograph close a narrow, dark gap as the
   section scrolls into view, the way a fusion machine brings pipe ends
   together. Scroll-linked (not a one-shot transition), small travel, no fade,
   no coloured bead: the image simply settles, flush, and stays sharp. */
.join{ position:relative; overflow:hidden; background:#0a0f15; isolation:isolate; --p:1; --gap:clamp(10px, 1.4vw, 30px) }
.join .half{ position:absolute; inset:0; will-change:transform }
.join .half img{ width:100%; height:100%; object-fit:cover; object-position:var(--seam, 50%) var(--py, 50%);
  transform:scale(calc(1.07 - .07 * var(--p))); transform-origin:var(--seam, 50%) var(--py, 50%); will-change:transform }
.join .l{ clip-path:inset(0 calc(100% - var(--seam, 50%)) 0 0); transform:translate3d(calc(-1 * var(--gap) * (1 - var(--p))), 0, 0) }
.join .r{ clip-path:inset(0 0 0 var(--seam, 50%)); transform:translate3d(calc(var(--gap) * (1 - var(--p))), 0, 0) }
.join .seam{ display:none }
/* a soft shade lifts as the joint closes */
.join::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:#0a0f15; opacity:calc((1 - var(--p)) * .38) }
.join .half::after{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--scrim, linear-gradient(to top, rgba(9,13,19,.78) 0%, rgba(9,13,19,.46) 36%, rgba(9,13,19,0) 66%)) }
html.js:not(.rm) .hero .join{ --p:0; transition:--p 2.4s cubic-bezier(.33,0,.15,1) }
html.js:not(.rm) .hero .join.in{ --p:1 }
html.js:not(.rm) .join .cap > *{ transition:opacity .9s var(--ease), transform 1.1s var(--ease) }
html.js:not(.rm) .join:not(.in) .cap > *{ opacity:0; transform:translateY(18px) }
html.js:not(.rm) .join.in .cap > *:nth-child(1){ transition-delay:.15s }
html.js:not(.rm) .join.in .cap > *:nth-child(2){ transition-delay:.27s }
html.js:not(.rm) .join.in .cap > *:nth-child(3){ transition-delay:.39s }

/* ---------- Full-screen section openers (A / D) ---------- */
.opener{ height:clamp(520px, 88svh, 1320px); color:#fff }
.opener .cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:clamp(36px, 4.6vw, 96px); display:grid; gap:clamp(14px, 1.4vw, 24px) }
.opener h2{ font-size:var(--fs-open); line-height:1; letter-spacing:-.035em; max-width:20ch }
.opener h2 .tick{ width:.56em; height:.17em; border-radius:.09em; box-shadow:inset 0 -.04em 0 var(--cd); vertical-align:.22em; margin-right:.3em }
.opener .cap p{ font-size:clamp(1.08rem, .98rem + .45vw, 1.5rem); line-height:1.45; max-width:44ch; color:rgba(255,255,255,.9) }
.open-short{ height:clamp(420px, 62svh, 900px) }

/* ---------- Hero ---------- */
.hero{ position:relative }
.hero .join{ height:max(560px, min(calc(100svh - var(--hdr)), 1400px)); color:#fff }
.hero .join{ --scrim:linear-gradient(to top, rgba(9,13,19,.78) 0%, rgba(9,13,19,.45) 38%, rgba(9,13,19,.05) 70%), linear-gradient(to right, rgba(9,13,19,.35), rgba(9,13,19,0) 55%) }
.hero .cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:clamp(36px, 4.4vw, 92px); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:32px clamp(32px, 4vw, 96px) }
.hero .copy{ display:grid; gap:clamp(18px, 1.8vw, 30px); max-width:min(46rem, 100%) }
@media (min-width:1800px){ .hero .copy{ max-width:min(60rem, 100%) } .hero .key{ width:460px; font-size:.95rem } }
.hero h1{ font-size:clamp(2.6rem, 1.2rem + 3.3vw, 5.4rem); line-height:1.02; letter-spacing:-.038em; font-weight:500 }
.hero .lede{ font-size:clamp(1.1rem, 1rem + .45vw, 1.5rem); line-height:1.45; color:rgba(255,255,255,.9); max-width:38ch }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px }
html.js:not(.rm) .hero .copy > *{ transition:opacity .9s var(--ease), transform 1.1s var(--ease) }
html.js:not(.rm) .hero .join:not(.in) .copy > *{ opacity:0; transform:translateY(18px) }
html.js:not(.rm) .hero .join.in .copy > *:nth-child(1){ transition-delay:.55s }
html.js:not(.rm) .hero .join.in .copy > *:nth-child(2){ transition-delay:.68s }
html.js:not(.rm) .hero .join.in .copy > *:nth-child(3){ transition-delay:.8s }
html.js:not(.rm) .hero .join:not(.in) .key{ opacity:0; transform:translateY(24px) }
html.js:not(.rm) .hero .key{ transition:opacity .9s var(--ease) 1.3s, transform 1.1s var(--ease) 1.3s }

/* Drawing key (C's legend card), sat on the hero photograph */
.key{ background:var(--paper); color:var(--ink); border-radius:12px; width:min(390px, 100%); font-size:.9rem; line-height:1.3; box-shadow:0 24px 48px -28px rgba(9,13,19,.65); overflow:hidden }
.key-row{ display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:14px; padding:13px 16px; text-decoration:none; border-top:1px solid var(--rule); transition:background-color .25s }
.key-row:first-child{ border-top:0 }
.key-row .tick{ width:30px; height:9px; border-radius:5px }
.key-row strong{ font-weight:600; display:block; font-size:.98rem; letter-spacing:-.01em }
.key-row span.s{ color:var(--ink-3); font-size:.84rem }
.key-row i{ color:var(--ink-3); font-size:.8rem; transition:transform .3s var(--ease), color .3s }
.key-row:hover{ background:var(--ct) }
.key-row:hover i{ transform:translateX(3px); color:var(--ink) }
.key-title{ white-space:nowrap; display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--ink); padding:10px 16px; font-size:.78rem; color:var(--ink-2); font-variant-numeric:tabular-nums }

/* ---------- Intro + accreditations ---------- */
.intro{ padding:var(--sec) 0 calc(var(--sec) * .9) }
.intro-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(36px, 5vw, 120px); align-items:start }
.statement{ font-size:clamp(1.45rem, 1.1rem + 1vw, 2.5rem); line-height:1.28; letter-spacing:-.025em; font-weight:400; max-width:30ch }
.statement b{ font-weight:500 }
.acc h3{ font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:var(--ink-2); margin-bottom:16px }
.acc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(8px, .8vw, 14px) }
.acc-grid li{ background:#fff; border:1px solid var(--rule); border-radius:var(--r); display:grid; place-items:center; aspect-ratio:5/3; padding:clamp(10px, 1vw, 20px) }
.acc-grid img{ width:100%; height:100%; object-fit:contain }
.eusr-badge{ text-align:center; color:var(--blue-ink); gap:2px; align-content:center }
.eusr-badge b{ font-weight:700; font-size:clamp(1.7rem, 1.3rem + 1.1vw, 2.8rem); letter-spacing:.05em; line-height:1 }
.eusr-badge span{ font-size:.76rem; font-weight:600; color:var(--ink-2) }

/* ---------- Section body ---------- */
.sec-body{ padding-top:var(--sec); padding-bottom:var(--sec) }
/* extra room at the foot of a section so the run can cross and finish its bend before the next photograph */
@media (min-width:700px){ .sec-body[data-run]{ padding-bottom:calc(var(--sec) * 1.3 + 24px) } }

/* ---------- The pipe run (from C) ----------
   One continuous run of three pipes (blue, red, yellow: the order of the three
   service groups) laid in the page gutter. It enters from the left edge under
   the hero, winds down the page, crosses sides in the white space at the foot
   of each section, and passes BEHIND every full-screen opener: it disappears
   into the top edge of the photograph and comes out of the bottom edge, so it
   is never drawn over an image or text. Electrofusion couplers mark each
   section start and an end cap closes the run. Scroll-linked via
   stroke-dashoffset only; fully drawn under reduced motion. */
body{ position:relative }
#run{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1 }
#run svg{ position:absolute; left:0; top:0; overflow:visible }
#run .p{ fill:none; stroke-linecap:round; stroke-linejoin:round }
html.live #run .p{ transition:stroke-dashoffset .7s cubic-bezier(.22,.8,.24,1) }
#run .sleeve{ fill:#23272e; stroke:#0e1013 }
#run .pin{ fill:#0e1013 }
#run .ind{ fill:#4a505a; stroke:#0e1013; transition:fill .35s ease .15s, transform .45s var(--ease) .15s; transform-box:fill-box; transform-origin:center }
#run .fused .ind{ fill:var(--jc); transform:scale(1.25) }
/* a fitting appears just ahead of the pipe that will meet it */
#run .cpl{ opacity:0; transition:opacity .45s ease }
#run .cpl.near{ opacity:1 }
#run .bead{ opacity:0; transition:opacity .4s ease .4s }
#run .bead.on{ opacity:1 }
/* openers sit above the run, so the pipes pass behind the photographs */
.hero .join, .opener{ z-index:2 }

.sh{ display:grid; gap:clamp(14px, 1.4vw, 22px); margin-bottom:clamp(36px, 4vw, 72px) }
.sh h2{ display:flex; align-items:center; gap:.4em }
.sh p{ max-width:56ch; color:var(--ink-2); font-size:clamp(1.05rem, .98rem + .3vw, 1.3rem); line-height:1.55 }

.ph{ border-radius:var(--r); overflow:hidden; background:var(--off) }
.ph img{ width:100%; height:100%; object-fit:cover }
figure{ margin:0 }
figcaption{ font-size:.84rem; color:var(--ink-3); margin-top:12px; display:flex; gap:.6em; align-items:baseline }
figcaption::before{ content:""; width:14px; height:1px; background:currentColor; flex:none; transform:translateY(-.3em) }
.pts{ list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:10px; font-size:.98rem }
.pts li{ display:grid; grid-template-columns:16px 1fr; gap:10px; align-items:baseline }
.pts li::before{ content:""; width:10px; height:10px; border-radius:50%; border:2px solid var(--cd, var(--ink-3)); transform:translateY(1px) }
.body-2{ color:var(--ink-2) }

/* ---------- Testing & analysis ---------- */
.feature{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 120px); align-items:start }
.feature figure{ margin-top:clamp(0px, 4vw, 72px) }
.chart{ background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:clamp(10px, 1vw, 18px); box-shadow:0 30px 60px -44px rgba(17,24,32,.45) }
.chart img{ width:100%; height:auto; border-radius:6px }
.lead-tag{ display:inline-flex; align-items:center; gap:.55em; font-size:.86rem; font-weight:600; color:var(--blue-ink); margin-bottom:18px }
.pair .item h3{ display:flex; align-items:center; gap:.5em; margin:clamp(22px, 2vw, 32px) 0 14px }
.pair .item h3 .tick{ width:18px; height:6px }
.sec-foot{ margin-top:clamp(64px, 6vw, 120px); padding-top:26px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between }
.sec-foot .mail{ display:grid; gap:2px }
.sec-foot .mail span{ font-size:.92rem; color:var(--ink-3) }
.sec-foot .mail a{ font-size:clamp(1.3rem, 1.1rem + .6vw, 1.9rem); font-weight:500; letter-spacing:-.02em; text-decoration:none; border-bottom:1.5px solid var(--c); justify-self:start; word-break:break-word }

/* ---------- Equipment bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px, 1.2vw, 22px) }
.cell{ border-radius:var(--r); padding:clamp(24px, 2.3vw, 44px); background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column; gap:14px; min-height:clamp(240px, 18vw, 380px) }
.cell h3{ font-size:clamp(1.45rem, 1.2rem + .6vw, 2.1rem) }
.cell p{ color:var(--ink-2) }
.cell .grow{ margin-top:auto; padding-top:12px }
.cell-img{ grid-column:1 / span 2; grid-row:1 / span 2; padding:0; border:0; overflow:hidden; position:relative; min-height:clamp(380px, 34vw, 760px); background:var(--off) }
.cell-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cell-hire{ grid-column:3 / span 2 }
.cell-hire h3{ font-size:clamp(1.8rem, 1.3rem + 1.2vw, 3rem); letter-spacing:-.03em }
.cell-hire p{ max-width:52ch }
/* the rehab kit offer: one distinct, tinted panel with its price set large */
.cell-offer{ grid-column:3 / span 2; background:var(--red-t); border-color:transparent; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px clamp(20px, 2vw, 40px); align-content:start }
.cell-offer .tag{ grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:.55em; font-size:.8rem; font-weight:600; color:var(--red-ink); background:#fff; border-radius:999px; padding:.38em .85em }
.cell-offer .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red) }
.cell-offer h3{ grid-column:1 / -1; font-size:clamp(1.5rem, 1.2rem + .8vw, 2.3rem); max-width:22ch }
.cell-offer .price{ display:grid; gap:2px; align-self:end }
.cell-offer .price b{ font-size:clamp(2rem, 1.5rem + 1.4vw, 3.4rem); font-weight:500; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums }
.cell-offer .price span{ font-size:.92rem; color:var(--ink-2) }
@media (min-width:700px){ .cell-offer .price span{ white-space:nowrap } }
.cell-offer .grow{ align-self:end; margin:0; padding:0 }
.cell-cald{ grid-column:1 }
.cell-repairs{ grid-column:2 }
.cell-logger{ grid-column:3 / span 2; background:var(--ink); color:#fff; border-color:var(--ink) }
.cell-logger p{ color:#c6cbd1; max-width:44ch }
.soon{ display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600; border-radius:999px; padding:.38em .85em; white-space:nowrap; align-self:flex-start; background:rgba(255,255,255,.1); color:#fff }
.soon::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red) }
.soon.light{ background:var(--yellow-t); color:var(--yellow-ink) }
.soon.light::before{ background:var(--yellow-d) }
.cell-logger .link{ --c:var(--red) }

/* ---------- Intro: mission + values ---------- */
.intro-copy{ display:grid; gap:clamp(22px, 2.2vw, 36px) }
.intro-copy .body-2{ max-width:54ch; font-size:clamp(1.02rem, .97rem + .2vw, 1.2rem) }
.values{ list-style:none; margin:clamp(56px, 6vw, 120px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(24px, 3vw, 64px); border-top:1px solid var(--ink) }
.values li{ padding-top:clamp(18px, 1.6vw, 28px); display:grid; gap:10px; align-content:start }
.values b{ display:flex; align-items:center; gap:.55em; font-size:clamp(1.35rem, 1.15rem + .6vw, 2rem); font-weight:500; letter-spacing:-.025em; line-height:1.1 }
.values b .tick{ width:16px; height:6px; box-shadow:none }
.values p{ color:var(--ink-2); font-size:.98rem; max-width:36ch }

/* ---------- Tensile testing feature ---------- */
.tensile{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 120px); align-items:start }
.tensile .ph{ aspect-ratio:4/5 }
.tensile h3, .feature h3{ font-size:clamp(1.8rem, 1.3rem + 1.3vw, 3.1rem); line-height:1.06; letter-spacing:-.032em; margin-bottom:18px }
.turn{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px clamp(18px, 2vw, 36px); align-items:end; padding:clamp(20px, 2vw, 32px) 0; margin:clamp(20px, 2vw, 32px) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule) }
.turn b{ font-size:clamp(3rem, 1.8rem + 3.6vw, 6.6rem); font-weight:500; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; white-space:nowrap }
.turn b small{ font-size:.36em; letter-spacing:-.02em; margin-left:.2em }
.turn span{ color:var(--ink-2); max-width:30ch; padding-bottom:.3em }
.wwh{ margin:0; display:grid; gap:0 }
.wwh div{ display:grid; grid-template-columns:minmax(90px, 1fr) minmax(0,4fr); gap:6px 24px; padding:16px 0; border-bottom:1px solid var(--rule) }
.wwh dt{ font-weight:600; font-size:.95rem }
.wwh dd{ margin:0; color:var(--ink-2) }
.tally{ display:flex; align-items:center; gap:.7em; margin-top:22px; font-size:.95rem; color:var(--ink-2) }
.tally b{ color:var(--ink); font-weight:600 }
.proof{ margin-top:clamp(64px, 7vw, 140px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px clamp(32px, 4vw, 96px); align-items:end; padding:clamp(28px, 3vw, 56px); border-radius:var(--r); background:var(--blue-t) }
.proof blockquote{ margin:0; font-size:clamp(1.5rem, 1.1rem + 1.3vw, 3rem); line-height:1.15; letter-spacing:-.03em; font-weight:500; max-width:28ch; text-wrap:balance }
.proof blockquote::before{ content:"\201C"; color:var(--blue) }
.proof blockquote::after{ content:"\201D"; color:var(--blue) }
.feature-2{ margin-top:clamp(80px, 9vw, 180px) }

/* ---------- Auditing + useful documents ---------- */
.pair{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 4.5vw, 110px); margin-top:clamp(80px, 9vw, 180px); align-items:start }
.docs h3{ font-size:var(--fs-h3); margin:0 0 8px }
.docs > p{ color:var(--ink-2); font-size:.95rem; margin-bottom:18px }
.doc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.doc-list a{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 2px; border-bottom:1px solid var(--rule); text-decoration:none; font-weight:500; transition:background-color .25s, padding .3s var(--ease) }
.doc-list a i:first-child{ color:var(--blue-ink); font-size:1.05rem }
.doc-list a .dl{ font-size:.84rem; font-weight:600; color:var(--ink-3); display:inline-flex; align-items:center; gap:.5em; transition:color .25s }
.doc-list a:hover{ background:var(--blue-t); padding-inline:12px }
.doc-list a:hover .dl{ color:var(--ink) }

/* ---------- Training (compact) ---------- */
.train{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px, 5vw, 120px); align-items:start }
.cred{ display:grid; gap:20px; margin-top:28px; padding-top:24px; border-top:1px solid var(--rule) }
.cred p{ color:var(--ink-2); font-size:.98rem }
.cred b{ color:var(--ink); font-weight:600 }
.courses{ border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:#fff }
.c-list{ list-style:none; margin:0; padding:0 }
.c-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; align-items:center; padding:clamp(18px, 1.7vw, 28px) clamp(18px, 1.9vw, 32px); border-top:1px solid var(--rule) }
.c-row:first-child{ border-top:0 }
.c-name{ font-size:clamp(1.15rem, 1.02rem + .35vw, 1.5rem); font-weight:500; letter-spacing:-.02em; line-height:1.25 }
.c-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:.86rem; color:var(--ink-2) }
.c-meta .eusr{ font-weight:700; color:var(--blue-ink); letter-spacing:.03em }
.c-row.tbc .c-name{ color:var(--ink-3) }
.tbc-tag{ font-size:.74rem; font-weight:600; border:1.5px dashed var(--rule-2); color:var(--ink-2); border-radius:999px; padding:.18em .7em }
.c-row .btn-line{ --bb:var(--yellow-d); color:var(--ink) }
.c-row .btn-line:hover{ background:var(--yellow); --bb:var(--yellow) }
.c-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; padding:18px clamp(18px, 1.9vw, 32px); border-top:1px solid var(--rule); background:var(--off); font-size:.92rem; color:var(--ink-2) }

/* price + CITB terms, set as two quiet columns under a rule */
.train-terms{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px clamp(36px, 5vw, 120px); margin-top:clamp(64px, 7vw, 140px); padding-top:clamp(24px, 2.4vw, 40px); border-top:1px solid var(--ink) }
.from{ display:grid; gap:8px; align-content:start }
.from b{ font-size:clamp(2.4rem, 1.6rem + 2.4vw, 4.6rem); font-weight:500; letter-spacing:-.045em; line-height:.95; font-variant-numeric:tabular-nums }
.from b small{ font-size:.4em; letter-spacing:-.02em; color:var(--ink-2); font-weight:500; margin-right:.25em; vertical-align:.35em }
.from p{ color:var(--ink-2); max-width:34ch }
.citb{ display:grid; gap:14px; align-content:start }
.citb h3{ font-size:clamp(1.25rem, 1.1rem + .45vw, 1.7rem); display:flex; align-items:center; gap:.6em }
.citb h3 .tick{ width:16px; height:6px; box-shadow:none }
.citb p{ color:var(--ink-2); max-width:62ch }
.citb small{ font-size:.86rem; color:var(--ink-3) }
/* 2025 delegate feedback: anonymous, no stars */
.fb-wrap{ margin-top:clamp(64px, 7vw, 140px) }
.fb-wrap > h3{ font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:var(--ink-2); display:flex; align-items:center; gap:.6em; margin-bottom:clamp(18px, 1.8vw, 28px) }
.fb{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 0 }
.fb blockquote{ margin:0; padding:0 clamp(20px, 2.4vw, 48px); font-size:clamp(1.08rem, .98rem + .4vw, 1.45rem); line-height:1.4; letter-spacing:-.015em; display:grid; gap:14px; align-content:start }
.fb blockquote:first-child{ padding-left:0 }
.fb blockquote + blockquote{ border-left:1px solid var(--rule) }
.fb blockquote p::before{ content:"\201C" }
.fb blockquote p::after{ content:"\201D" }
.fb cite{ font-style:normal; font-size:.86rem; color:var(--ink-3) }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px, 5vw, 120px); align-items:start }
.about-fig .ph{ aspect-ratio:4/5 }
.about-fig .ph img{ object-position:40% 60% }
.strap{ font-size:clamp(1.4rem, 1.1rem + .9vw, 2.3rem); line-height:1.3; letter-spacing:-.022em; font-weight:400; max-width:32ch; margin-bottom:clamp(36px, 4vw, 72px) }
.strap::before{ content:"\201C"; color:var(--blue) }
.strap::after{ content:"\201D"; color:var(--red) }
.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.facts li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px 40px; padding:clamp(20px, 1.9vw, 32px) 0; border-bottom:1px solid var(--rule) }
.facts .big{ font-size:clamp(1.3rem, 1.1rem + .6vw, 1.95rem); line-height:1.15; letter-spacing:-.025em; font-weight:500 }
.facts p{ color:var(--ink-2) }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px, 5vw, 120px); align-items:start }
.big-tel{ display:inline-flex; align-items:center; gap:.45em; font-size:clamp(2rem, 1.4rem + 1.6vw, 3.4rem); font-weight:500; letter-spacing:-.03em; text-decoration:none; font-variant-numeric:tabular-nums }
.big-tel i{ font-size:.55em; color:var(--blue-ink) }
.dept{ list-style:none; margin:clamp(26px, 2.6vw, 40px) 0 0; padding:0; border-top:1px solid var(--rule) }
.dept li{ display:grid; grid-template-columns:22px 1fr; gap:3px 14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--rule) }
.dept .tick{ width:22px; height:7px }
.dept small{ grid-column:2; color:var(--ink-3); font-size:.86rem; order:-1 }
.dept .lbl{ grid-column:2; font-size:.86rem; color:var(--ink-3) }
.dept a{ grid-column:2; font-weight:600; text-decoration:none; word-break:break-word }
.dept a:hover{ text-decoration:underline }
.visit{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; font-size:.97rem }
.visit h3{ font-size:.86rem; font-weight:600; letter-spacing:0; color:var(--ink-3); margin-bottom:6px }
.visit address{ font-style:normal }
.form{ background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:clamp(22px, 3vw, 56px); box-shadow:0 34px 70px -56px rgba(17,24,32,.5) }
.form h3{ margin-bottom:24px }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field{ display:grid; gap:7px; align-content:start }
.field.full{ grid-column:1 / -1 }
.field label, .field legend{ font-size:.92rem; font-weight:600; color:var(--ink) }
.field input, .field textarea{ font:500 1rem var(--sans); color:var(--ink); background:var(--off); border:1.5px solid var(--rule); border-radius:10px; padding:.85em 1em; width:100%; transition:border-color .2s, background-color .2s }
.field textarea{ min-height:136px; resize:vertical }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue-ink); background:#fff }
.field .help{ font-size:.84rem; color:var(--ink-3) }
fieldset.field{ border:0; padding:0; margin:0; min-width:0 }
fieldset.field legend{ margin-bottom:10px; padding:0 }
.rchips{ display:flex; flex-wrap:wrap; gap:8px }
.rchip{ position:relative }
.rchip input{ position:absolute; left:0; top:0; opacity:0; pointer-events:none }
.rchip > span{ display:inline-flex; align-items:center; gap:.55em; border:1.5px solid var(--rule-2); border-radius:999px; padding:.62em 1.05em; font-size:.93rem; font-weight:500; cursor:pointer; transition:background-color .2s, border-color .2s }
.rchip .tick{ width:14px; height:5px; box-shadow:none }
.rchip input:checked + span{ border-color:var(--ink); background:var(--ct) }
.rchip input:focus-visible + span{ outline:2px solid var(--blue-ink); outline-offset:2px }
.form-foot{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; margin-top:24px }
.form-foot p{ font-size:.86rem; color:var(--ink-3); max-width:40ch }
.form-note{ font-size:.92rem; color:var(--ink-2); margin-top:14px }
.form-note[hidden]{ display:none }

/* ---------- Footer ---------- */
.foot{ background:var(--off); padding:clamp(56px, 6vw, 110px) 0 48px; border-top:1px solid var(--rule) }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap:36px }
.foot .logo-plate{ background:#fff; border-radius:12px; padding:12px 16px; display:inline-block; border:1px solid var(--rule) }
.foot .logo-plate img{ height:60px; width:auto }
.foot h3{ font-size:.86rem; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-bottom:12px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.97rem }
.foot ul a{ text-decoration:none; display:inline-flex; align-items:center; gap:.6em }
.foot ul a:hover{ text-decoration:underline }
.foot ul .tick{ width:12px; height:5px; box-shadow:none }
.foot address{ font-style:normal; font-size:.97rem; color:var(--ink-2); margin-top:20px; line-height:1.55 }
.legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:clamp(40px, 5vw, 80px); padding-top:22px; border-top:1px solid var(--rule-2); font-size:.86rem; color:var(--ink-2) }
.legal a{ font-weight:600; color:var(--ink) }

/* ---------- Phone action bar ---------- */
.bar{ display:none }
@media (max-width:699px){
  .bar{ display:grid; grid-template-columns:1fr 1.5fr; gap:8px; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:40; padding:7px; background:#fff; border:1px solid var(--rule); border-radius:999px; box-shadow:0 14px 34px -14px rgba(17,24,32,.5) }
  .bar .btn{ padding:.95em 1em }
  .foot{ padding-bottom:120px }
}

/* ---------- Content reveals (quiet; the joins are the main act) ---------- */
html.js:not(.rm) .rv{ transition:opacity .9s var(--ease), transform 1.1s var(--ease) }
html.js:not(.rm) .rv:not(.in){ opacity:0; transform:translateY(22px) }
html.js:not(.rm) .clip{ transition:clip-path 1.2s var(--ease) }
html.js:not(.rm) .clip:not(.in){ clip-path:inset(12% 0 0 0 round var(--r)) }
html.js:not(.rm) .clip img{ transition:transform 1.6s var(--ease) }
html.js:not(.rm) .clip:not(.in) img{ transform:scale(1.06) }

/* ---------- Responsive ---------- */
@media (min-width:1500px){
  .acc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}
@media (max-width:1100px){
  .intro-grid, .train, .about-grid, .contact-grid, .feature, .tensile, .pair, .train-terms{ grid-template-columns:1fr }
  .tensile .ph{ aspect-ratio:16/10 }
  .tensile .ph img{ object-position:50% 30% !important }
  .about-fig .ph{ aspect-ratio:16/10 }
  .bento{ grid-template-columns:1fr 1fr }
  .cell-img{ grid-column:1 / -1; grid-row:auto; min-height:380px }
  .cell-hire, .cell-offer, .cell-logger{ grid-column:1 / -1 }
  .cell-cald{ grid-column:1 }
  .cell-repairs{ grid-column:2 }
  .fb{ grid-template-columns:1fr }
  .fb blockquote + blockquote{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:22px }
  .foot-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:899px){
  .hero .cap{ grid-template-columns:1fr }
  .hero .cap .key{ display:none }
  .key-m{ display:block !important }
}
.key-m{ display:none }
@media (max-width:699px){
  .opener{ height:max(460px, 74svh) }
  .open-short{ height:max(380px, 56svh) }
  .opener h2{ font-size:clamp(2.05rem, 1.2rem + 3.6vw, 2.6rem) }
  .hero .join{ height:max(540px, calc(86svh - var(--hdr))) }
  .hero h1{ font-size:clamp(2.2rem, 1.3rem + 4vw, 2.75rem) }
  .hero .cta-row{ display:grid; grid-template-columns:1fr }
  .key-m{ margin:-1px 0 0 }
  .key-m .key{ width:100%; border-radius:0; box-shadow:none; border-bottom:1px solid var(--rule) }
  .key-m .key-row{ padding-left:var(--padL); padding-right:var(--padR) }
  .key-m .key-title{ padding-left:var(--padL); padding-right:var(--padR); white-space:normal }
  .pair{ grid-template-columns:1fr }
  .bento{ grid-template-columns:1fr }
  .cell-cald, .cell-repairs, .cell-logger{ grid-column:1 }
  .cell-offer{ grid-template-columns:1fr }
  .values{ grid-template-columns:1fr }
  .values li{ padding-bottom:18px; border-bottom:1px solid var(--rule) }
  .turn{ grid-template-columns:1fr }
  .wwh div{ grid-template-columns:1fr }
  .proof{ grid-template-columns:1fr }
  .proof .btn{ width:100% }
  .cell{ min-height:0 }
  .cell-img{ min-height:260px }
  .c-row{ grid-template-columns:1fr }
  .c-row .btn{ justify-self:start }
  .facts li{ grid-template-columns:1fr }
  .fgrid{ grid-template-columns:1fr }
  .visit{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
  .acc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .sec-foot .btn{ width:100% }
}
@media (max-width:899px) and (min-width:700px){
  .key-m{ padding:0 var(--padR) 0 var(--padL); margin-top:-48px; position:relative; z-index:5 }
  .key-m .key{ width:min(460px, 100%) }
}

/* =====================================================================
   WordPress additions (not in the mock-up)
   ===================================================================== */

/* Real classroom photo: crop the phone watermark at the bottom-left. */
.crop-wm .half img{ height:116% }

/* Client testimonial (Testing & analysis): corporate, no stars */
.testi{ margin:clamp(80px, 9vw, 180px) 0 0; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px clamp(32px, 5vw, 120px); padding-top:clamp(24px, 2.4vw, 40px); border-top:1px solid var(--ink) }
.testi-who{ display:grid; gap:6px; align-content:start; margin:0; font-size:.95rem; color:var(--ink-2) }
.testi-who::before{ display:none }
.testi-who b{ color:var(--ink); font-weight:600; font-size:clamp(1.1rem, 1rem + .3vw, 1.35rem); letter-spacing:-.015em; margin-top:clamp(10px, 1.4vw, 24px) }
.testi-k{ display:flex; align-items:center; gap:.6em; font-weight:600; color:var(--ink-2) }
.testi-k .tick{ width:16px; height:6px; box-shadow:none }
.testi blockquote{ margin:0; display:grid; gap:1em; font-size:clamp(1.15rem, 1rem + .55vw, 1.7rem); line-height:1.45; letter-spacing:-.015em; color:var(--ink) }
.testi blockquote p:first-child::before{ content:"\201C"; color:var(--blue); margin-left:-.5em; padding-right:.06em }
.testi blockquote p:last-child::after{ content:"\201D"; color:var(--blue) }

/* Enquiry form states */
.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden }
.form{ position:relative; scroll-margin-top:calc(var(--hdr) + 16px) }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--red-ink); background:#fff }
.fld-err{ font-size:.84rem; color:var(--red-ink); font-weight:600 }
.fld-err[hidden]{ display:none }
.form-msg{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; padding:16px 18px; border-radius:10px; margin:-6px 0 22px; font-size:.97rem }
.form-msg i{ font-size:1.15rem; margin-top:.15em }
.form-msg.is-ok{ background:var(--blue-t); color:var(--ink) }
.form-msg.is-ok i{ color:var(--blue-ink) }
.form-msg.is-err{ background:var(--red-t); color:var(--ink) }
.form-msg.is-err i{ color:var(--red-ink) }
.form-msg:focus{ outline:none }
.form-status{ font-size:.92rem; color:var(--ink-2); margin-top:12px; min-height:1.4em }
.form-status:empty{ margin:0; min-height:0 }
.form-status.is-err{ color:var(--red-ink); font-weight:600 }
.form-foot p a{ color:var(--ink) }
.btn[disabled]{ opacity:.7; cursor:progress }
.cf-turnstile{ margin-top:18px }

/* Inner pages */
.page-head{ padding:clamp(40px, 5vw, 96px) 0 clamp(44px, 5vw, 96px) }
.page-head .wrap{ display:grid; gap:clamp(16px, 1.6vw, 26px) }
.crumbs{ display:flex; flex-wrap:wrap; gap:.5em; font-size:.9rem; color:var(--ink-3) }
.crumbs a{ text-decoration:none; color:var(--ink-2) }
.crumbs a:hover{ text-decoration:underline }
.page-head h1{ font-size:clamp(2.4rem, 1.2rem + 3vw, 5rem); line-height:1.02; letter-spacing:-.038em; font-weight:500; max-width:20ch }
.page-head h1 .tick{ width:.56em; height:.17em; border-radius:.09em; box-shadow:inset 0 -.04em 0 var(--cd); vertical-align:.22em; margin-right:.3em }
.page-head .lede{ font-size:clamp(1.1rem, 1rem + .45vw, 1.5rem); line-height:1.45; color:var(--ink-2); max-width:44ch }
.page-head .cta-row{ margin-top:6px }
.page-head + .opener .half::after{ background:none }
.page-head + .opener{ --gap:clamp(8px, 1vw, 20px) }
.entry{ max-width:72ch }
.entry > * + *{ margin-top:1em }
.entry h2{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.022em; margin-top:clamp(36px, 3.4vw, 56px) }
.entry h2:first-child{ margin-top:0 }
.entry p, .entry li{ color:var(--ink-2) }
.entry ul{ padding-left:1.2em }
.entry a{ color:var(--blue-ink); font-weight:500 }
.entry strong{ color:var(--ink); font-weight:600 }
.entry .intro-p{ font-size:clamp(1.15rem, 1rem + .5vw, 1.55rem); line-height:1.4; letter-spacing:-.015em; color:var(--ink) }
.legal-text .updated{ color:var(--ink-3); font-size:.92rem }
.details{ display:grid; grid-template-columns:max-content 1fr; gap:10px 28px; margin:24px 0; padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule) }
.details dt{ font-weight:600 }
.details dd{ margin:0; color:var(--ink-2) }
.details a{ color:var(--ink) }
.page-contact .sec-body{ padding-top:clamp(56px, 6vw, 120px) }

/* Footer extras */
.foot-btn{ font:inherit; background:none; border:0; padding:0; cursor:pointer; color:inherit }
.foot-btn:hover{ text-decoration:underline }
.foot ul a i{ font-size:1rem; color:var(--blue-ink) }

/* Cookie banner (only when a GA4 ID is set) */
.cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:70; max-width:560px; background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px; box-shadow:0 24px 48px -28px rgba(9,13,19,.6); display:grid; gap:14px; font-size:.92rem }
.cookie[hidden]{ display:none }
.cookie-btns{ display:flex; gap:10px }
@media (max-width:699px){ .cookie{ bottom:96px } }

@media (max-width:1100px){ .testi{ grid-template-columns:1fr } }
@media (max-width:699px){
  .details{ grid-template-columns:1fr; gap:4px }
  .details dd{ margin-bottom:10px }
  .page-head .cta-row{ display:grid; grid-template-columns:1fr }
}

/* ---------- Rounded image tiles (Martin, 20 Oct) ----------
   Full-screen openers become big rounded tiles: nearly full width, a small
   white margin all round, generous radius. The joint and captions are
   unchanged; clip-path keeps the halves inside the rounded corners. */
:root{ --tile-gut:clamp(12px, 1.5vw, 32px); --tile-r:clamp(18px, 1.8vw, 36px) }
.join{ margin-inline:var(--tile-gut); border-radius:var(--tile-r); clip-path:inset(0 round var(--tile-r)); transform:translateZ(0) }
.hero .join{ margin-top:var(--tile-gut); height:max(540px, min(calc(100svh - var(--hdr) - var(--tile-gut) * 2), 1380px)) }
.opener{ margin-block:var(--tile-gut) }
/* captions keep aligning with the page grid inside the inset tile */
.join .wrap{ padding-left:max(0px, calc(var(--padL) - var(--tile-gut))); padding-right:max(0px, calc(var(--padR) - var(--tile-gut))) }
@media (max-width:699px){ :root{ --tile-gut:10px; --tile-r:18px } }
@media (max-width:699px){ .hero .join{ height:auto; min-height:min(calc(100svh - var(--hdr) - 96px), 720px); padding-bottom:0 } .hero .cap{ position:relative; padding-top:clamp(200px, 38svh, 340px); padding-bottom:28px } }

/* ---------- Butt-fusion joint FX (20 Oct, assets/js/fusion.js) ----------
   html.fx-on = WebGL usable. .join.fx = a canvas is managing this tile: the
   CSS halves are pinned to their final, whole state underneath (the fallback
   and the final frame). .join.fx-live = the canvas is showing a transition;
   its scrim is redrawn above the canvas so captions stay legible. */
.join .fx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none }
.join:not(.fx-live) .fx-canvas{ visibility:hidden }
.join.fx{ --p:1 !important; transition:none !important }
.join.fx::before{ opacity:0 }
.join.fx .half.l{ clip-path:none; transform:none }
.join.fx .half.r{ visibility:hidden }
.join.fx-live .half::after{ opacity:0 }
.join.fx-live::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--scrim, linear-gradient(to top, rgba(9,13,19,.78) 0%, rgba(9,13,19,.46) 36%, rgba(9,13,19,0) 66%)) }
.page-head + .opener.fx-live::after{ background:none }
/* hero: give the GL a moment to take over before the CSS halves start to close */
html.fx-on.js:not(.rm) .hero .join{ transition-delay:.4s }

/* ---------- POWER UP image FX (20 Oct, assets/js/powerup.js) ----------
   Replaces the butt-fusion joint (fusion.js, kept on disk, unenqueued; switch
   with TIS_FX in functions.php). body.tis-pu = power-up mode: one photo per
   tile, no halves, seam or shade. Tiles sit dormant (--pu-f, which powerup.js
   mirrors in its shader) until the pipe run powers them; .pu-done = the
   untouched photo. .pu-live = the WebGL canvas is showing (its scrim is redrawn
   above it). .pu-css = the CSS version (no WebGL): a filtered copy of the photo on
   ::before whose elliptical mask opens from the run's entry point. Reduced motion (html.rm) and
   ?nofx (html.pu-off) = the plain photo. If the script never runs, the
   dormant pre-state wakes itself after 5s. */
:root{ --pu-f:saturate(.14) brightness(.82) contrast(.9) }
.tis-pu .join::before{ content:none }
.tis-pu .join .half.l{ clip-path:none; transform:none }
.tis-pu .join .half img{ transform:none }
.tis-pu .join .half.r, .tis-pu .join .seam{ display:none }
html.js:not(.rm):not(.pu-off) .tis-pu .join:not(.pu-done):not(.pu-css) .half.l img{ filter:var(--pu-f); scale:1.025 }
html.js:not(.rm):not(.pu-off):not(.pu-init) .tis-pu .join .half.l img{ animation:pu-wake 1s ease 5s both }
@keyframes pu-wake{ from{ filter:var(--pu-f); scale:1.025 } to{ filter:none; scale:1 } }
.tis-pu .join .pu-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; pointer-events:none }
.tis-pu .join:not(.pu-live) .pu-canvas{ visibility:hidden }
.tis-pu .join.pu-live .half::after{ opacity:0 }
.tis-pu .join.pu-live::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--scrim, linear-gradient(to top, rgba(9,13,19,.78) 0%, rgba(9,13,19,.46) 36%, rgba(9,13,19,0) 66%)) }
.tis-pu .page-head + .opener.pu-live::after{ background:none }
.tis-pu .join.pu-css .half.l img{ scale:var(--pu-sc, 1.025) }
.tis-pu .join.pu-css:not(.pu-flat):not(.pu-done)::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:1;
  background:var(--pu-src, none) no-repeat var(--pu-bg, center / cover); filter:var(--pu-f); scale:var(--pu-sc, 1.025); transform-origin:var(--pu-o, 50% 50%);
  -webkit-mask-image:radial-gradient(var(--pu-rx, 1px) var(--pu-ry, 1px) at var(--pu-x, 0px) 0px, transparent var(--pu-s0, 0%), #000 100%);
  mask-image:radial-gradient(var(--pu-rx, 1px) var(--pu-ry, 1px) at var(--pu-x, 0px) 0px, transparent var(--pu-s0, 0%), #000 100%) }
.tis-pu .join.pu-css.pu-live::after, .tis-pu .join.pu-css:not(.pu-done)::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--scrim, linear-gradient(to top, rgba(9,13,19,.78) 0%, rgba(9,13,19,.46) 36%, rgba(9,13,19,0) 66%)) }
.tis-pu .join.pu-css:not(.pu-done) .half::after{ opacity:0 }
.tis-pu .page-head + .opener.pu-css::after{ background:none }
.tis-pu .join.pu-css.pu-flat:not(.pu-done) .half.l img{ filter:var(--pu-flat, var(--pu-f)) }
.tis-pu .join.pu-done .half.l img{ filter:none; scale:none }

/* ---------- Unlit to lit (20 Oct, assets/js/lit.js; TIS_FX 'lit') ----------
   One photo per tile (body.tis-pu layout). Unlit = the dormant filter above;
   .pu-done = lit. A slow, even ease so it reads as power coming on. */
.tis-pu .join .half.l img{ transition:filter 1.6s cubic-bezier(.25,.6,.3,1), scale 2s cubic-bezier(.25,.6,.3,1) }
/* Home hero is always lit (Martin 20 Oct): no unlit state, no transition. */
.tis-pu #hero-join .half.l img{ filter:none !important; scale:none !important; transition:none !important; animation:none !important }
.testi--next{ margin-top:clamp(40px, 4vw, 72px) }