/* ==========================================================================
   TCI Group — shared web design system
   Derived from the live TCI Mouldings / TCI Culinary sites.
   Per-site accent is set by [data-brand] tokens below.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#181818;
  --ink-2:#232324;
  --ink-3:#2e2f30;
  --paper:#ffffff;
  --paper-2:#f4f4f2;
  --paper-3:#ececea;
  --line:#e2e2df;
  --line-dark:rgba(255,255,255,.14);
  --muted:#5f6163;
  --muted-dark:rgba(255,255,255,.66);

  /* accent — overridden per brand. --accent = text/rules/borders,
     --accent-fill/--fill-ink = accent used as a background,
     --tile = logo tile, --dot-on-ink = arrow dot sitting on charcoal. */
  --accent:#e63e33;
  --accent-soft:rgba(230,62,51,.12);
  --accent-fill:#e63e33;
  --fill-ink:#ffffff;
  --tile:#e63e33;
  --dot-on-ink:#e63e33;
  --dot-on-ink-ink:#ffffff;

  --font-display:'Satoshi','Inter',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;

  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1.0625rem;
  --text-lg:1.25rem;
  --text-xl:1.75rem;
  --text-2xl:2.5rem;
  --text-3xl:3.5rem;
  --text-hero:clamp(2.75rem,6.4vw,5.5rem);

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:44px;
  --r-pill:999px;

  --shell:1240px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* TCI Construction — brand red #e63e33 */
[data-brand="construction"]{
  --tile:#e63e33;
  --accent:#e63e33;
  --accent-soft:rgba(230,62,51,.12);
  --accent-deep:#b0271d;
  --accent-fill:#e63e33;
  --fill-ink:#ffffff;
  --accent-d:#f2574b;
  --accent-soft-d:rgba(242,87,75,.20);
  --dot-on-ink:#e63e33;
  --dot-on-ink-ink:#ffffff;
}
/* TCI Products — brand charcoal #333333, monochrome highlight */
[data-brand="products"]{
  --tile:#333333;
  --accent:#333333;
  --accent-soft:rgba(51,51,51,.09);
  --accent-deep:#1f1f1f;
  --accent-fill:#333333;
  --fill-ink:#ffffff;
  --accent-d:#ffffff;
  --accent-soft-d:rgba(255,255,255,.13);
  --dot-on-ink:#ffffff;
  --dot-on-ink-ink:#181818;
}
/* on dark surfaces the accent flips to its light-on-dark value */
.dark,.band,.hero,.phero,.cta,.nav,.foot{
  --accent:var(--accent-d);
  --accent-soft:var(--accent-soft-d);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:900;letter-spacing:-.028em;line-height:1.04}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4.5rem,9vw,8.5rem)}
.section--tight{padding-block:clamp(3.25rem,6vw,5.5rem)}
.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.tint{background:var(--paper-2)}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.eyebrow--plain::before{display:none}

.h-xl{font-size:clamp(2rem,4.2vw,var(--text-3xl))}
.h-lg{font-size:clamp(1.75rem,3.2vw,var(--text-2xl))}
.h-md{font-size:var(--text-xl)}
.h-sm{font-size:var(--text-lg);letter-spacing:-.015em}

.lede{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.6;color:var(--muted);max-width:62ch}
.dark .lede,.band .lede,.cta .lede,.hero .lede,.phero .lede{color:var(--muted-dark)}
.body-muted{color:var(--muted)}
.dark .body-muted,.band .body-muted,.cta .body-muted,.hero .body-muted,.phero .body-muted{color:var(--muted-dark)}
.measure{max-width:66ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.72rem .78rem .72rem 1.45rem;
  border-radius:var(--r-pill);
  font-size:var(--text-sm);font-weight:700;letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn__dot{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  transition:transform .35s var(--ease),background .3s var(--ease);
}
.btn__dot svg{width:14px;height:14px}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__dot{transform:translateX(3px)}

.btn--light{background:#fff;color:var(--ink)}
.btn--light .btn__dot{background:var(--ink);color:#fff}
.btn--light:hover{background:var(--accent-fill);color:var(--fill-ink)}
.btn--light:hover .btn__dot{background:var(--fill-ink);color:var(--accent-fill)}

.btn--accent{background:var(--accent-fill);color:var(--fill-ink)}
.btn--accent .btn__dot{background:var(--fill-ink);color:var(--accent-fill)}
.btn--accent:hover{background:var(--ink);color:#fff}
.btn--accent:hover .btn__dot{background:#fff;color:var(--ink)}

.btn--dark{background:var(--ink);color:#fff}
.btn--dark .btn__dot{background:var(--dot-on-ink);color:var(--dot-on-ink-ink)}
.btn--dark:hover{background:var(--accent-fill);color:var(--fill-ink)}
.btn--dark:hover .btn__dot{background:var(--fill-ink);color:var(--accent-fill)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost .btn__dot{background:var(--paper-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.dark .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.cta .btn--ghost,.band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.dark .btn--ghost .btn__dot,.hero .btn--ghost .btn__dot,.phero .btn--ghost .btn__dot,.cta .btn--ghost .btn__dot,.band .btn--ghost .btn__dot{background:rgba(255,255,255,.16);color:#fff}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.cta .btn--ghost:hover,.band .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.link-more{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--text-sm);font-weight:700;color:var(--accent);
  padding-bottom:2px;border-bottom:1.5px solid currentColor;
  transition:gap .3s var(--ease)
}
.link-more:hover{gap:.85rem}
.link-more svg{width:13px;height:13px}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  height:var(--nav-h);
  background:rgba(24,24,24,.92);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.nav__in{height:100%;display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem)}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.brand__tile{
  width:44px;height:44px;flex:none;
  background:var(--tile);color:#fff;display:block;
}
.brand__tile svg{width:100%;height:100%;display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--font-display);font-weight:900;font-size:1.18rem;color:#fff;letter-spacing:-.03em}
.brand__txt span{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}

.nav__links{display:flex;align-items:center;gap:clamp(.6rem,1.7vw,1.8rem)}
.nav__links a{
  font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.74);
  padding:.4rem 0;position:relative;transition:color .25s var(--ease)
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .3s var(--ease)
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__links a[aria-current="page"]{color:#fff}
.nav__cta{margin-left:.5rem}
.nav__burger{display:none;background:none;border:0;padding:8px;color:#fff}
.nav__burger svg{width:24px;height:24px}

@media (max-width:1200px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line-dark);
    padding:.5rem var(--gut) 1.5rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease)
  }
  .nav__links.open{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:.95rem 0;border-bottom:1px solid var(--line-dark);font-size:1.0625rem}
  .nav__links a::after{display:none}
  .nav__cta{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(4rem,10vh,7.5rem));padding-bottom:clamp(6rem,13vh,9.5rem);overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.68}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(24,24,24,.72) 0%,rgba(24,24,24,.34) 44%,rgba(24,24,24,.9) 100%),
    linear-gradient(92deg,rgba(24,24,24,.88) 0%,rgba(24,24,24,.12) 78%);
}
.hero__in{position:relative;z-index:2;color:#fff;max-width:60rem}
.hero h1{font-size:var(--text-hero);color:#fff;margin-top:1.4rem}
.hero__sub{margin-top:1.6rem;max-width:44rem;font-size:clamp(1.0625rem,1.45vw,1.25rem);color:rgba(255,255,255,.78)}
.hero__actions{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.85rem}
.hero__meta{
  position:relative;z-index:2;margin-top:clamp(3rem,7vw,5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden
}
.hero__meta div{background:rgba(24,24,24,.55);padding:1.35rem 1.5rem}
.hero__meta b{display:block;font-family:var(--font-display);font-weight:900;font-size:1.9rem;color:#fff;letter-spacing:-.03em}
.hero__meta span{font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:620px){
  .hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__meta div{padding:1.05rem 1rem}
  .hero__meta b{font-size:1.45rem}
  .hero__meta span{font-size:.66rem;letter-spacing:.1em}
}

/* page hero (interior pages) */
.phero{position:relative;background:var(--ink);padding-top:calc(var(--nav-h) + clamp(3.5rem,8vh,5.5rem));padding-bottom:clamp(3.5rem,8vh,6rem);overflow:hidden}
.phero__bg{position:absolute;inset:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(24,24,24,.94),rgba(24,24,24,.6))}
.phero__in{position:relative;z-index:2;color:#fff;max-width:56rem}
.phero h1{font-size:clamp(2.25rem,5vw,4.25rem);color:#fff;margin-top:1.1rem}
.phero p{margin-top:1.25rem;color:rgba(255,255,255,.76);max-width:46rem;font-size:clamp(1rem,1.35vw,1.1875rem)}
.crumb{font-size:var(--text-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ---------- rounded white shell that laps the hero ---------- */
.sheet{background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(-1 * clamp(2.5rem,5vw,4rem));position:relative;z-index:3}
.sheet--flat{border-radius:0;margin-top:0}
.sheet-end{background:var(--paper);border-radius:0 0 var(--r-xl) var(--r-xl);margin-bottom:calc(-1 * clamp(2.5rem,5vw,4rem));position:relative;z-index:3}

/* ---------- intro / statement ---------- */
.statement{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.statement__body{display:grid;gap:1.4rem}
@media (max-width:860px){.statement{grid-template-columns:1fr}}

/* ---------- numbered benefit cards ---------- */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,5vw,3.75rem)}
.numcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.9rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)
}
.numcard:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 22px 44px -28px rgba(24,24,24,.34)}
.numcard__n{font-family:var(--font-display);font-weight:900;font-size:1.05rem;color:var(--accent);letter-spacing:.02em}
.numcard h3{font-size:1.1875rem;letter-spacing:-.02em;line-height:1.22}
.numcard p{font-size:var(--text-sm);color:var(--muted);line-height:1.6}
.dark .numcard{background:var(--ink-2);border-color:var(--line-dark)}
.dark .numcard p{color:var(--muted-dark)}
.dark .numcard:hover{box-shadow:none}

/* ---------- split image + text ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split__media{order:2}
.split__media{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.split__media:hover img{transform:scale(1.035)}
.split__body{display:grid;gap:1.35rem;align-content:start}
@media (max-width:820px){.split--flip .split__media{order:0}}

/* ---------- feature band (dark, image left) ---------- */
.band{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.band__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* ---------- ticked list ---------- */
.ticks{display:grid;gap:.85rem}
.ticks li{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--text-sm);line-height:1.58}
.ticks svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--accent)}

/* ---------- promise / commitment trio ---------- */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(2.25rem,4vw,3.25rem)}
.trio > div{background:var(--ink-2);padding:clamp(1.6rem,2.6vw,2.25rem);display:grid;gap:.85rem;align-content:start}
.trio h3{font-size:1.125rem;letter-spacing:-.015em}
.trio p{font-size:var(--text-sm);color:var(--muted-dark);line-height:1.6}
.trio__ico{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.trio__ico svg{width:21px;height:21px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.stat b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2.25rem,4.4vw,3.25rem);letter-spacing:-.035em;color:var(--accent);line-height:1}
.stat span{display:block;margin-top:.6rem;font-size:var(--text-sm);color:var(--muted)}
.dark .stat span{color:var(--muted-dark)}

/* ---------- process steps ---------- */
.steps{counter-reset:s;display:grid;gap:0;margin-top:clamp(2.25rem,4vw,3.25rem);border-top:1px solid var(--line)}
.steps li{
  counter-increment:s;border-bottom:1px solid var(--line);
  padding:clamp(1.35rem,2.4vw,1.9rem) 0;
  display:grid;grid-template-columns:auto minmax(0,15rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:baseline
}
.steps li::before{
  content:"0" counter(s);
  font-family:var(--font-display);font-weight:900;color:var(--accent);font-size:var(--text-sm);letter-spacing:.04em
}
.steps h3{font-size:1.1875rem;letter-spacing:-.02em}
.steps p{font-size:var(--text-sm);color:var(--muted);line-height:1.62}
.dark .steps,.dark .steps li{border-color:var(--line-dark)}
.dark .steps p{color:var(--muted-dark)}
@media (max-width:760px){.steps li{grid-template-columns:auto 1fr;gap:.5rem 1.1rem}.steps p{grid-column:2}}

/* ---------- cards / case studies / insights ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.25rem,2.4vw,1.85rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 24px 48px -30px rgba(24,24,24,.32)}
.card__media{overflow:hidden;background:var(--paper-3)}
.card__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:clamp(1.35rem,2.2vw,1.75rem);display:grid;gap:.8rem;align-content:start;flex:1}
.card__tag{font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:1.1875rem;letter-spacing:-.02em;line-height:1.25}
.card p{font-size:var(--text-sm);color:var(--muted);line-height:1.6}
.card__foot{margin-top:auto;padding-top:.35rem}
.card__result{
  margin-top:.35rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:var(--text-sm);font-weight:700;color:var(--ink)
}
.card__result em{font-style:normal;color:var(--accent)}

/* ---------- spec table ---------- */
.tablewrap{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.tablewrap--scroll{overflow-x:auto}
table.spec{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--text-sm)}
table.spec caption{text-align:left;padding:1.1rem 1.35rem;font-weight:700;background:var(--paper-2);border-bottom:1px solid var(--line)}
table.spec th,table.spec td{padding:.95rem 1.35rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.spec thead th{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
table.spec tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}
table.spec td{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.25rem 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  font-family:var(--font-display);font-weight:900;font-size:1.0625rem;letter-spacing:-.015em;line-height:1.35
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--line);
  background:
    linear-gradient(currentColor,currentColor) center/10px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 10px no-repeat;
  color:var(--accent);transition:transform .3s var(--ease),border-color .3s var(--ease)
}
.faq details[open] summary::after{transform:rotate(45deg);border-color:var(--accent)}
.faq p{padding:0 0 1.35rem;font-size:var(--text-sm);color:var(--muted);max-width:74ch;line-height:1.65}

/* ---------- callout / CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,4.5rem)}
.cta::before{
  content:"";position:absolute;right:-14%;top:-58%;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.5
}
.cta__in{position:relative;z-index:2;display:grid;gap:1.5rem;max-width:46rem}
.cta h2{font-size:clamp(1.85rem,3.6vw,2.85rem);color:#fff}
.cta p{color:rgba(255,255,255,.78)}
.cta__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.4rem}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,5vw,4rem);align-items:start}
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-size:var(--text-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--text-sm);color:var(--ink);
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);width:100%;transition:border-color .25s var(--ease)
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.form-note{font-size:var(--text-xs);color:var(--muted);margin-top:.9rem}
.form-ok{
  display:none;margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent-deep,var(--accent));
  font-size:var(--text-sm);font-weight:700
}
.form-ok.show{display:block}
.infolist{display:grid;gap:1.4rem}
.infolist div{display:grid;gap:.3rem}
.infolist dt{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.infolist dd{margin:0;font-size:var(--text-base);font-weight:600}
.infolist dd span{display:block;font-weight:400;color:var(--muted);font-size:var(--text-sm)}

/* ---------- divisions strip ---------- */
.divisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(2.25rem,4vw,3rem)}
.division{background:var(--ink-2);padding:clamp(1.4rem,2.4vw,1.9rem);display:grid;gap:.6rem;align-content:start;transition:background .3s var(--ease)}
.division:hover{background:var(--ink-3)}
.division b{font-family:var(--font-display);font-weight:900;font-size:1.0625rem;color:#fff;letter-spacing:-.02em}
.division span{font-size:var(--text-sm);color:var(--muted-dark);line-height:1.55}
.division em{font-style:normal;font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding-block:clamp(3.25rem,6vw,4.75rem) 2rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));gap:clamp(2rem,4vw,3.5rem)}
.foot h4{font-size:var(--text-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-family:var(--font-body);margin-bottom:1.1rem}
.foot ul{display:grid;gap:.65rem}
.foot a,.foot li{font-size:var(--text-sm);color:rgba(255,255,255,.66)}
.foot a:hover{color:#fff}
.foot__blurb{font-size:var(--text-sm);color:rgba(255,255,255,.66);max-width:34ch;margin-top:1.2rem}
.foot__base{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-size:var(--text-xs);color:rgba(255,255,255,.5)
}
.foot__base a{font-size:var(--text-xs)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- utilities ---------- */
.stack{display:grid;gap:1.35rem}
.stack--sm{display:grid;gap:.8rem}
.head{display:grid;gap:1.25rem;max-width:52rem}
.head--wide{max-width:64rem}
.row-end{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between}
.pad-b0{padding-bottom:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--ink);padding:.75rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0}

/* dark variants for cards on dark bands */
.dark .card,.band .card{background:var(--ink-2);border-color:var(--line-dark)}
.dark .card h3,.band .card h3{color:#fff}
.dark .card p,.band .card p{color:var(--muted-dark)}
.dark .card__media,.band .card__media{background:var(--ink-3)}
.dark .card:hover,.band .card:hover{box-shadow:none;border-color:var(--accent)}
.dark .card__result,.band .card__result{border-color:var(--line-dark);color:#fff}
.dark .numcard h3{color:#fff}
.dark .tablewrap{background:var(--ink-2);border-color:var(--line-dark)}
.dark table.spec caption{background:var(--ink-3);border-color:var(--line-dark);color:#fff}
.dark table.spec th,.dark table.spec td{border-color:var(--line-dark)}
.dark table.spec tbody th{color:#fff}
.dark table.spec td,.dark table.spec thead th{color:var(--muted-dark)}
.dark .faq,.dark .faq details{border-color:var(--line-dark)}
.dark .faq summary{color:#fff}
.dark .faq summary::after{border-color:var(--line-dark)}
.dark .faq p{color:var(--muted-dark)}
.dark .steps h3{color:#fff}

/* ============ PEOPLE / TEAM ============ */
.people{
  margin-top:clamp(2.4rem,4.4vw,3.6rem);display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media (max-width:1180px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;gap:16px}
.person__media{
  position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:16px;
  background:var(--ink-3);
}
.person__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.person:hover .person__media img{transform:scale(1.04)}
.person__role{
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:5px 0 11px
}
.person__name{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.2}
.person__note{font-size:.92rem;line-height:1.65;color:var(--muted);margin:0}
.dark .person__note,.band .person__note{color:var(--muted-d)}
.person--lead{grid-column:span 2}
@media (max-width:760px){.person--lead{grid-column:span 1}}

/* ============ REAL PHOTO STRIP ============ */
.strip{
  margin-top:clamp(2.4rem,4.4vw,3.6rem);display:grid;gap:clamp(16px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.figure{margin:0;display:flex;flex-direction:column;gap:12px}
.figure__media{overflow:hidden;border-radius:16px;aspect-ratio:3/2;background:var(--ink-3)}
.figure__media img{width:100%;height:100%;object-fit:cover;display:block}
.figure figcaption{font-size:.88rem;line-height:1.6;color:var(--muted)}
.dark .figure figcaption,.band .figure figcaption{color:var(--muted-d)}
.figure--tall .figure__media{aspect-ratio:4/5}

.strip + .row-end{margin-top:clamp(1.8rem,3.2vw,2.6rem)}

/* ---------- 2-up card grid (4 cards read better as 2x2 than 3+1) ---------- */
.cards--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}

.numgrid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media(min-width:1000px){.numgrid--3{grid-template-columns:repeat(3,1fr)}}

/* nav nowrap */
.nav__links a{white-space:nowrap}
.nav__cta{white-space:nowrap;flex:0 0 auto}


/* ==========================================================================
   TCI — design-system additions required by the final draft markup.
   Appended to style.css. Covers the brand tokens and the components that
   appear in the finished home pages but not in the earlier stylesheet:
   .util .cband .ukband .clients .jl .grouplink .dbr .dia .spec-wrap
   plus the division "you are here" state and the 2/4-up numbered grids.
   ========================================================================== */

/* ---------- brand tokens: the three that were missing ---------- */

/* TCI Mouldings — jade #3ea683. Accent-as-text darkens to #2b7a5f. */
[data-brand="mouldings"]{
  --tile:#3ea683;
  --accent:#2b7a5f;
  --accent-soft:rgba(62,166,131,.13);
  --accent-deep:#1e5b46;
  --accent-fill:#3ea683;
  --fill-ink:#06251b;
  --accent-d:#4fc39b;
  --accent-soft-d:rgba(79,195,155,.20);
  --dot-on-ink:#3ea683;
  --dot-on-ink-ink:#06251b;
}
/* TCI Culinary — amber #fbae44. Amber fails contrast as body text, so text uses #9a5c05. */
[data-brand="culinary"]{
  --tile:#fbae44;
  --accent:#9a5c05;
  --accent-soft:rgba(251,174,68,.16);
  --accent-deep:#7a4804;
  --accent-fill:#fbae44;
  --fill-ink:#2b1a02;
  --accent-d:#fbae44;
  --accent-soft-d:rgba(251,174,68,.20);
  --dot-on-ink:#fbae44;
  --dot-on-ink-ink:#2b1a02;
}
/* TCI Group — teal #159c9c. */
[data-brand="group"]{
  --tile:#159c9c;
  --accent:#0d6f6f;
  --accent-soft:rgba(21,156,156,.13);
  --accent-deep:#095050;
  --accent-fill:#159c9c;
  --fill-ink:#012322;
  --accent-d:#2ec4c4;
  --accent-soft-d:rgba(46,196,196,.20);
  --dot-on-ink:#159c9c;
  --dot-on-ink-ink:#012322;
}
/* Construction already exists in style.css; restate the text-safe value. */
[data-brand="construction"]{--accent:#c22b21;--accent-d:#f2574b}
/* Products: charcoal accent is invisible on the dark chrome, so the tile lifts to #3c3c3c. */
[data-brand="products"]{--tile:#3c3c3c}

/* Align the base tokens with the published design system. */
:root{
  --paper-2:#f6f5f3;
  --paper-3:#eceae6;
  --line:#e4e1dc;
  --muted:#5c5852;
  --nav-h:72px;
  --r-xl:40px;
}

/* ---------- utility bar above the header ---------- */
.util{background:#101010;color:rgba(255,255,255,.72);border-bottom:1px solid var(--line-dark)}
.util__in{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  min-height:38px;padding-block:.35rem;
  font-size:.78rem;font-weight:500;letter-spacing:.01em
}
.util__loc{margin-right:auto;color:rgba(255,255,255,.56)}
.util__a{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.82);transition:color .25s var(--ease)}
.util__a:hover{color:#fff}
.util__a svg{width:14px;height:14px;display:block}
.util__a span{display:inline-flex;color:var(--accent-d)}

/* The utility bar sits above the header and scrolls away; the header then
   sticks to the top. The base sheet had the header position:fixed, which hid
   the utility bar underneath it at scroll 0. */
.util{position:relative;z-index:81}
.nav{position:sticky;inset:auto;top:0}
.hero{padding-top:clamp(4rem,10vh,7.5rem)}
@media (max-width:760px){
  .util__loc{display:none}
  .util__in{gap:1rem;justify-content:center}
  .util__a{font-size:.74rem}
}

/* ---------- contact band before the footer ---------- */
.cband{background:var(--paper-2);border-top:1px solid var(--line)}
.cband__in{
  padding-block:clamp(2.25rem,4vw,3.25rem);
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between
}
.cband__txt{max-width:44rem;display:grid;gap:.6rem}
.cband__txt h2{font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.025em}
.cband__txt p{font-size:var(--text-sm);color:var(--muted);line-height:1.6}
.cband__acts{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- UK manufacturing band ---------- */
.ukband{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2rem);
  align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg)
}
.ukband__ico{
  width:46px;height:46px;flex:none;border-radius:13px;
  background:var(--accent-soft);color:var(--accent);display:grid;place-items:center
}
.ukband__ico svg{width:23px;height:23px}
.ukband > div{display:grid;gap:.9rem}
.ukband h2{letter-spacing:-.025em}
.ukband p{font-size:var(--text-sm);color:var(--muted);line-height:1.65;max-width:72ch}
.dark .ukband,.band .ukband{background:var(--ink-2);border-color:var(--line-dark)}
.dark .ukband p,.band .ukband p{color:var(--muted-dark)}
@media (max-width:620px){.ukband{grid-template-columns:1fr}}

/* ---------- who we make for ---------- */
.clients{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1.5rem,3vw,2.5rem)
}
.clients__col{
  display:grid;gap:1.1rem;align-content:start;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)
}
.clients__col h3{font-size:1.0625rem;letter-spacing:-.02em}
.clients__list{display:grid;gap:.85rem}
.clients__list li{display:grid;gap:.15rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.clients__list li:last-child{padding-bottom:0;border-bottom:0}
.clients__list b{font-size:var(--text-sm);font-weight:700;letter-spacing:-.005em}
.clients__list span{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
.clients__note{font-size:var(--text-xs);color:var(--muted);line-height:1.6}
.dark .clients__col,.band .clients__col{background:var(--ink-2);border-color:var(--line-dark)}
.dark .clients__list li,.band .clients__list li{border-color:var(--line-dark)}
.dark .clients__list span,.dark .clients__note,.band .clients__list span,.band .clients__note{color:var(--muted-dark)}

/* ---------- jargon link: an inline term with a definition on hover ---------- */
.jl{
  color:inherit;font-weight:500;
  border-bottom:1px dotted var(--accent);
  text-decoration:none;cursor:help;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)
}
.jl:hover,.jl:focus-visible{color:var(--accent);border-bottom-style:solid;background:var(--accent-soft)}
/* when the glossary is not reachable the term keeps its meaning without pretending to be a link */
.jl[aria-disabled="true"]{cursor:help;border-bottom-style:dotted;pointer-events:auto}

/* ---------- sister-company links in the footer ---------- */
.grouplink{display:inline-flex;align-items:center;gap:.6rem}
.grouplink__dot{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor}
.b-group .grouplink__dot{background:#159c9c}
.b-mouldings .grouplink__dot{background:#3ea683}
.b-culinary .grouplink__dot{background:#fbae44}
.b-construction .grouplink__dot{background:#e63e33}
.b-products .grouplink__dot{background:#9a9a9a}
.grouplink[aria-current="true"]{color:#fff;font-weight:700}
.foot__uk{
  display:flex;align-items:center;gap:.5rem;
  margin:0 0 1.9rem;font-size:var(--text-xs);color:rgba(255,255,255,.5);line-height:1.6
}
/* the inline icon has no class of its own, so size it from the parent or it
   inflates to the width of the shell */
.foot__uk > span{display:inline-flex;flex:none;color:var(--accent-d)}
.foot__uk svg{width:15px;height:15px;display:block}
/* same guard for every other bare inline icon in a run of text */
.ukband__ico svg,.util__a svg,.btn__dot svg{flex:none}

/* ---------- hero measure ---------- */
/* The H1 line breaks are hand-placed. At the display size the first line
   needs more room than the 60rem measure allowed, so it was wrapping in the
   wrong place and breaking the shape of the block. */
.hero__in{max-width:67rem}
.hero__sub{max-width:42rem}

/* ---------- deliberate headline line breaks ---------- */
/* The draft hard-breaks every H1 to control the shape of the block. Those
   breaks are desktop-only; below 760px they are removed so the type reflows. */
.dbr{display:inline}
@media (max-width:760px){.dbr{display:none}}

/* ---------- inline SVG diagrams ---------- */
.dia{margin:clamp(2rem,4vw,3rem) 0 0;display:grid;gap:1rem}
.dia__box{
  padding:clamp(1.1rem,2.4vw,1.9rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow-x:auto
}
.dia__box:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.dia__svg{width:100%;height:auto;display:block;color:var(--accent)}
.dia__svg text{font-family:var(--font-body);fill:var(--ink)}
.dia__hint{font-size:var(--text-xs);color:var(--muted);line-height:1.6;max-width:74ch}
.dark .dia__box,.band .dia__box{background:var(--ink-2);border-color:var(--line-dark)}
.dark .dia__svg text,.band .dia__svg text{fill:#fff}
.dark .dia__hint,.band .dia__hint{color:var(--muted-dark)}

/* ---------- spec tables as used in the final draft ---------- */
.spec-wrap{
  margin-top:1rem;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow-x:auto;background:var(--paper)
}
.spec-cap{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.spec-note{margin-top:.9rem;font-size:var(--text-xs);color:var(--muted);line-height:1.6;max-width:78ch}
.dark .spec-wrap,.band .spec-wrap{background:var(--ink-2);border-color:var(--line-dark)}
.dark .spec-cap,.dark .spec-note,.band .spec-cap,.band .spec-note{color:var(--muted-dark)}

/* ---------- divisions strip: the current site is marked, not linked ---------- */
.division{position:relative;padding-bottom:clamp(2.6rem,3.6vw,3.1rem)}
.division--here{background:var(--ink-3);cursor:default}
.division__here,.division__go{
  position:absolute;left:clamp(1.4rem,2.4vw,1.9rem);bottom:clamp(1.2rem,2.2vw,1.6rem)
}
.division__here{
  font-style:normal;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)
}
.division__go{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;
  transition:transform .3s var(--ease),background .3s var(--ease)
}
.division__go svg{width:13px;height:13px}
.division:hover .division__go{transform:translateX(3px);background:var(--accent-fill);color:var(--fill-ink)}
.divisions .b-group{--accent:#2ec4c4}
.divisions .b-mouldings{--accent:#4fc39b}
.divisions .b-culinary{--accent:#fbae44}
.divisions .b-construction{--accent:#f2574b}
.divisions .b-products{--accent:#ffffff}

/* ---------- numbered grids at fixed column counts ---------- */
.numgrid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
@media (min-width:900px){.numgrid--2{grid-template-columns:repeat(2,1fr)}}
.numgrid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}
@media (min-width:1100px){.numgrid--4{grid-template-columns:repeat(4,1fr)}}
/* a five-card grid reads as 3 + 2, never 4 + 1 */
.cards--five{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (min-width:1000px){
  .cards--five{grid-template-columns:repeat(6,1fr)}
  .cards--five > *{grid-column:span 2}
  .cards--five > *:nth-child(4),.cards--five > *:nth-child(5){grid-column:span 3}
}

/* ---------- accessibility helpers used by the draft markup ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* ---------- keep the ghost CTA legible on dark bands ---------- */
/* the phone number in a dark CTA was rendering dark-on-dark */
.cta .btn--ghost,.cband .btn--ghost{--btn-fg:var(--paper)}
.dark .cband{background:var(--ink-2);border-color:var(--line-dark)}
.dark .cband__txt p{color:var(--muted-dark)}

/* ---------- section rhythm from the published spec ---------- */
.section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.cards,.numgrid{gap:1.25rem}

/* Pull-quote, used where a page carries a customer's own words.
   Lives inside .statement__body so it inherits the measure. */
.statement__body blockquote{margin:0;padding:0 0 0 1.35rem;border-left:3px solid var(--accent)}
.statement__body blockquote p{font-size:1.22rem;line-height:1.5;font-weight:500;
  letter-spacing:-.015em;color:var(--ink)}
.statement__body blockquote cite{display:block;margin-top:.85rem;font-size:.82rem;
  font-style:normal;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.band.dark .statement__body blockquote p{color:var(--paper)}
.band.dark .statement__body blockquote cite{color:rgba(255,255,255,.6)}

/* ============================================================
   INTERACTIVE COMPONENTS — added for candles/small-biz rebuild
   ============================================================ */

/* ---------- Before/After slider (Mould -> Cast) ---------- */
.beforeafter{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#000;
  border:1px solid var(--line);
  --ba-pos:50%;
  user-select:none;
  cursor:ew-resize;
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.beforeafter__a,.beforeafter__b{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.beforeafter__b{
  clip-path:inset(0 0 0 var(--ba-pos));
}
.beforeafter__handle{
  position:absolute;top:0;bottom:0;left:var(--ba-pos);
  width:2px;background:#fff;transform:translateX(-1px);
  cursor:ew-resize;z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.beforeafter__handle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.beforeafter__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:#111;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.beforeafter__grip svg{width:22px;height:22px}
.beforeafter__label{
  position:absolute;bottom:.85rem;padding:.35rem .7rem;border-radius:99px;
  background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
}
.beforeafter__label--a{left:.85rem}
.beforeafter__label--b{right:.85rem}

/* ---------- Quiz (What are you casting?) ---------- */
.quiz{margin-top:clamp(1.75rem,3.5vw,2.5rem);display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.quiz__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:820px){.quiz__grid{grid-template-columns:1fr 1fr 1fr}}
.quiz__field{border:0;padding:0;margin:0;display:grid;gap:.9rem}
.quiz__field legend{
  font-size:var(--text-sm);font-weight:700;color:var(--ink);letter-spacing:-.005em;
  padding:0;margin-bottom:.15rem;
}
.quiz__opts{display:grid;gap:.5rem}
.quiz__opt{
  appearance:none;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1rem;text-align:left;cursor:pointer;
  display:grid;gap:.2rem;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
  font-family:inherit;
}
.quiz__opt:hover{border-color:var(--ink);background:var(--paper-soft,#fafafa)}
.quiz__opt[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent-soft);
}
.quiz__optlabel{font-weight:700;font-size:.95rem;color:var(--ink)}
.quiz__optsub{font-size:.8rem;color:var(--muted);line-height:1.45}
.quiz__result{
  border-radius:var(--r-lg);background:var(--ink);color:#fff;
  padding:clamp(1.5rem,3vw,2.25rem);
  display:grid;gap:1.25rem;
}
.quiz__resultgrid{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
  padding-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:720px){.quiz__resultgrid{grid-template-columns:repeat(3,1fr)}}
.quiz__key{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.35rem;
}
.quiz__resultgrid b{font-family:var(--font-display);font-size:1.1rem;color:#fff;font-weight:900;line-height:1.3;letter-spacing:-.01em}
.quiz__note{font-size:.9rem;color:rgba(255,255,255,.78);line-height:1.6;margin:0}

/* ---------- Cost-per-part calculator ---------- */
.calc{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.5rem);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  display:grid;gap:clamp(1.5rem,2.5vw,2rem);
}
.calc__inputs{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,2.5vw,1.75rem)}
@media (min-width:820px){.calc__inputs{grid-template-columns:1.4fr 1fr 1fr}}
.calc__field{display:grid;gap:.55rem}
.calc__field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.78);
}
.calc__field label b{
  font-family:var(--font-display);color:#fff;font-weight:900;font-size:1.15rem;
}
.calc__field input[type="range"]{
  width:100%;accent-color:var(--accent);height:22px;
}
.calc__field select{
  appearance:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:.7rem .9rem;border-radius:10px;font-family:inherit;font-size:.9rem;
  cursor:pointer;
}
.calc__field select:focus{outline:2px solid var(--accent);outline-offset:2px}
.calc__scale{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.5)}
.calc__out{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:rgba(255,255,255,.14);
  border-radius:var(--r-md);overflow:hidden;
}
@media (min-width:720px){.calc__out{grid-template-columns:1fr 1.4fr 1fr}}
.calc__panel{
  background:var(--ink);padding:clamp(1.25rem,2.4vw,1.75rem);
  display:grid;gap:.4rem;align-content:center;
}
.calc__panel b{
  font-family:var(--font-display);color:#fff;font-weight:900;
  font-size:1.35rem;letter-spacing:-.02em;line-height:1.2;
}
.calc__panel--hero{background:var(--accent);color:#111}
.calc__panel--hero .calc__key{color:rgba(0,0,0,.55)}
.calc__panel--hero b{color:#111;font-size:2.4rem}
.calc__key{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.calc__caption{font-size:.75rem;color:rgba(0,0,0,.68);line-height:1.5;margin-top:.35rem}
.calc__disclaimer{font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.6;margin:0;max-width:60ch}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:.6rem;margin-top:clamp(2rem,4vw,2.75rem);
}
.gallery figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);background:#111}
.gallery figure:nth-child(3n+1){aspect-ratio:4/5}
.gallery figure:nth-child(3n+2){aspect-ratio:1/1}
.gallery figure:nth-child(3n){aspect-ratio:4/5}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.gallery figure:hover img{transform:scale(1.04)}

/* ---------- Cards 3-up variant ---------- */
.cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
@media (min-width:920px){.cards--3{grid-template-columns:repeat(3,1fr)}}

/* Fine spacing for split body body content on the job-size band */
.band .split__body h3{color:#fff}
.band .ticks li{color:rgba(255,255,255,.78)}

/* ============================================================
   FAQ TOOLS ROW — inline tool links under the FAQ
   ============================================================ */
.faq__tools{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.faq__tool{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;
  align-items:start;grid-template-rows:auto auto;
  padding:clamp(1.15rem,2vw,1.5rem);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  color:var(--ink);text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.faq__tool:hover{border-color:var(--accent);transform:translateY(-2px)}
.faq__tool-ico{
  grid-row:1/3;width:38px;height:38px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
}
.faq__tool-ico svg{width:20px;height:20px}
.faq__tool b{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.faq__tool span{font-size:.82rem;color:var(--muted);line-height:1.5}

/* ============================================================
   TIGHTER MOBILE MARGINS + PACING
   The gutter was too generous on 375-430px viewports and the
   section rhythm bunched near the fold. Small phones get a tighter
   gutter, shorter section padding, and better breathing room in
   the hero, statement and CTA blocks.
   ============================================================ */
@media (max-width:640px){
  :root{ --gut:1.5rem; }
  .section{ padding-block:clamp(2.75rem,10vw,3.75rem) }
  .section--tight{ padding-block:clamp(2rem,7vw,2.75rem) }
  .head{ margin-bottom:1.5rem }
  .head .h-lg,.head h2{ font-size:clamp(1.65rem,7.5vw,2.1rem); line-height:1.15 }
  .head .lede,.head p{ font-size:.95rem; line-height:1.55 }
  .hero{ padding-top:calc(var(--nav-h) + 2.25rem); padding-bottom:2.75rem }
  .hero .h-xxl,.hero h1{ font-size:clamp(2rem,10vw,2.85rem); line-height:1.05 }
  .hero .lede{ font-size:1rem }
  .cta{ padding:clamp(1.75rem,6vw,2.5rem) }
  .cta h2{ font-size:clamp(1.4rem,6.5vw,1.85rem) }
  .cband__in{ padding-block:1.75rem }
  .cband__txt h2{ font-size:1.25rem }
  .foot{ padding-block:2.5rem 1.5rem }
  .foot__grid{ gap:2rem }
  .cards,.numgrid{ gap:.9rem }
  .card__body{ padding:1.15rem }
  .numgrid > div{ padding:1.15rem }
  .split{ gap:1.5rem }
  .band{ margin-inline:-.25rem }
  .util__in{ padding-inline:1rem }
  .btn{ padding:.75rem 1rem; font-size:.9rem }
  .h-md{ font-size:clamp(1.35rem,6vw,1.7rem) }
  .faq summary{ padding:1rem 0; font-size:.98rem; padding-right:2rem }
  .faq p{ padding-bottom:1rem }
  .quiz__opt{ padding:.7rem .85rem }
  .calc__inputs{ gap:1rem }
  .beforeafter{ aspect-ratio:4/5 }
  .steps li{ padding-block:1rem }
  .gallery{ gap:.5rem }
  .divisions{ gap:.75rem }
  .division{ padding:1.15rem }
}

/* Even tighter on very small phones (iPhone SE / 375 and under) */
@media (max-width:400px){
  :root{ --gut:1.25rem; }
  .hero .h-xxl,.hero h1{ font-size:1.95rem }
  .util__loc{ display:none }
  .util__in{ gap:.75rem; font-size:.7rem }
}

/* NAV_DROPDOWNS_V2 */
/* ============================================================
   Header nav dropdowns (mega-menus with icons + subtext)
   ============================================================ */
.nav__links{display:flex;align-items:center;gap:.05rem;flex-wrap:wrap}
/* Reset legacy .nav__links a::after underline; we style .nav__link / .nav__trigger explicitly */
.nav__links a::after{content:none !important}
.nav__link,.nav__trigger{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .75rem;font-family:var(--font-display);font-weight:500;font-size:.9rem;letter-spacing:-.005em;color:rgba(255,255,255,.78);background:transparent;border:0;cursor:pointer;border-radius:8px;text-decoration:none;transition:background-color .18s ease,color .18s ease;line-height:1.2}
.nav__link:hover,.nav__trigger:hover,.nav__item--open .nav__trigger,.nav__link:focus-visible,.nav__trigger:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.nav__link[aria-current="page"]{color:#fff}
.nav__caret{display:inline-flex;width:14px;height:14px;transition:transform .2s ease;opacity:.7}
.nav__caret svg{width:100%;height:100%}
.nav__item--open .nav__caret{transform:rotate(180deg)}
.nav__item{position:relative}
.nav__item--has-dd .nav__trigger{gap:.4rem}

/* Dropdown panel — explicit colours (site tokens vary) */
.dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:320px;max-width:min(92vw,780px);background:#ffffff;border:1px solid rgba(24,24,24,.08);border-radius:14px;box-shadow:0 30px 80px -20px rgba(24,24,24,.28),0 10px 28px -10px rgba(24,24,24,.16);padding:.85rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .22s ease,visibility .18s ease;z-index:70}
.dd--wide{min-width:min(92vw,780px)}
.nav__item--open .dd,.nav__item--has-dd:hover .dd,.nav__item--has-dd:focus-within .dd{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.dd__grid{display:grid;grid-template-columns:1fr;gap:.35rem}
.dd--wide .dd__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media(max-width:960px){.dd--wide .dd__grid{grid-template-columns:1fr}}
.dd__col{display:flex;flex-direction:column;gap:.15rem}
.dd__head{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8a857f;padding:.55rem .65rem .35rem}

.dd__item{display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .6rem;border-radius:10px;text-decoration:none;color:#181818;transition:background-color .16s ease,transform .16s ease}
.dd__item:hover,.dd__item:focus-visible{background:rgba(24,24,24,.045);transform:translateX(2px);outline:none}
.dd__ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(24,24,24,.05);color:var(--accent);transition:background-color .16s ease,color .16s ease}
.dd__ico svg{width:17px;height:17px}
.dd__item:hover .dd__ico{background:var(--accent);color:#fff}
.dd__meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.dd__label{font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:-.005em;color:#181818;line-height:1.25}
.dd__sub{font-size:.76rem;color:#6b6660;line-height:1.35}

/* Mobile: nav becomes a stacked panel, dropdowns are accordions */
@media(max-width:900px){
  /* Mobile panel — piggybacks on existing .nav__links.open pattern; overrides base with !important */
  .nav__links{position:fixed !important;top:var(--nav-h, 64px) !important;left:0 !important;right:0 !important;bottom:0 !important;height:auto !important;width:auto !important;background:#ffffff !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:.75rem 1rem 2rem !important;overflow-y:auto !important;z-index:60 !important;flex-wrap:nowrap !important;transform:translateX(100%);transition:transform .28s ease;opacity:1 !important;pointer-events:none !important;border:0 !important;border-bottom:0 !important}
  .nav__links.open{transform:translateX(0) !important;pointer-events:auto !important;opacity:1 !important}
  body.nav-open .nav__links{transform:translateX(0) !important;pointer-events:auto !important}
  .nav__link,.nav__links a,.nav__trigger{width:100% !important;padding:.9rem .5rem !important;font-size:1.05rem !important;font-weight:600 !important;border-radius:0 !important;justify-content:space-between !important;border-bottom:1px solid rgba(24,24,24,.08) !important;color:#181818 !important;background:transparent !important;white-space:normal !important;text-align:left !important}
  .nav__trigger{gap:0 !important}
  .nav__links a::after{content:none !important;display:none !important}
  .nav__link[aria-current="page"],.nav__links a[aria-current="page"]{color:var(--accent) !important}
  .nav__link:hover,.nav__trigger:hover,.nav__item--open .nav__trigger{background:transparent !important;color:#181818 !important}
  .nav__item{width:100% !important;position:static !important;flex:none !important;display:block !important}
  .dd{position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;box-shadow:none !important;border:0 !important;background:transparent !important;padding:.25rem 0 .75rem 1.25rem !important;min-width:0 !important;max-width:none !important;display:none !important;width:auto !important}
  .nav__item--open .dd{display:block !important}
  .dd--wide .dd__grid,.dd__grid{grid-template-columns:1fr !important;gap:.4rem !important}
  .dd__head{padding-top:.6rem !important;padding-bottom:.3rem !important}
  .dd__item{padding:.5rem .5rem !important}
  .dd__ico{width:28px !important;height:28px !important;border-radius:6px !important}
  .dd__label{font-size:.85rem !important}
  .dd__sub{font-size:.72rem !important}
  .dark .dd{background:transparent !important}
}

/* ============================================================
   Icon micro-motion — subtle idle + hover animations
   ============================================================ */
.dd__ico svg{overflow:visible}
.dd__ico .i-anim{transform-origin:12px 12px;transform-box:fill-box;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease}

/* Idle motion — very restrained, only a few icons */
@keyframes iAtomOrbit { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes iThermRise { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
@keyframes iFlameFlicker { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.85) translateY(1px)} }
@keyframes iTargetPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:.85} }
@keyframes iBubbleFloat { 0%,100%{transform:translateY(0);opacity:.85} 50%{transform:translateY(-2px);opacity:1} }
.dd__ico .i-orbits{animation:iAtomOrbit 12s linear infinite}
.dd__ico .i-therm-rise{animation:iThermRise 2.4s ease-in-out infinite}
.dd__ico .i-flame{animation:iFlameFlicker 1.6s ease-in-out infinite;transform-origin:12px 5px}
.dd__ico .i-target-dot{animation:iTargetPulse 2s ease-in-out infinite;transform-origin:12px 12px}
.dd__ico .i-bubbles,.dd__ico .i-bubble-up{animation:iBubbleFloat 2.2s ease-in-out infinite}

/* Hover motion — kicks in on parent .dd__item:hover / :focus-visible */
.dd__item:hover .dd__ico .i-lift{transform:translateY(-2px)}
.dd__item:hover .dd__ico .i-pop rect{animation:iGridPop .5s ease both}
@keyframes iGridPop { 0%{transform:scale(1)} 40%{transform:scale(.75)} 100%{transform:scale(1)} }
.dd__ico .i-pop rect{transform-origin:center;transform-box:fill-box}
.dd__ico .i-pop rect:nth-child(1){animation-delay:0s}
.dd__ico .i-pop rect:nth-child(2){animation-delay:.06s}
.dd__ico .i-pop rect:nth-child(3){animation-delay:.12s}
.dd__ico .i-pop rect:nth-child(4){animation-delay:.18s}

.dd__item:hover .dd__ico .i-mail-flap{transform:translateY(-1px) scaleY(.9);transform-origin:12px 7px}
.dd__item:hover .dd__ico .i-fade-in line{stroke-dasharray:20;stroke-dashoffset:0;animation:iDraw .5s ease both}
.dd__ico .i-fade-in line{stroke-dasharray:20;stroke-dashoffset:20}
@keyframes iDraw { to{stroke-dashoffset:0} }
.dd__ico .i-fade-in line:nth-child(2){animation-delay:.08s}
.dd__ico .i-fade-in line:nth-child(3){animation-delay:.16s}

.dd__item:hover .dd__ico .i-book{transform:scaleX(1.08)}
.dd__item:hover .dd__ico .i-bookmark{transform:translateY(-2px)}
.dd__item:hover .dd__ico .i-spin{transform:rotate(90deg)}

.dd__item:hover .dd__ico .i-sparkle-a{transform:scale(1.12) rotate(15deg)}
.dd__item:hover .dd__ico .i-sparkle-b{transform:scale(1.3);opacity:.9}

.dd__item:hover .dd__ico .i-drop{transform:translateY(-1px) scale(1.08);transform-origin:12px 6px}
.dd__item:hover .dd__ico .i-tip{transform:rotate(-18deg);transform-origin:4px 20px}
.dd__item:hover .dd__ico .i-stream{opacity:1;animation:iStream .6s ease both}
.dd__ico .i-stream{opacity:.4}
@keyframes iStream { 0%{transform:translateY(-3px);opacity:.2} 100%{transform:translateY(0);opacity:1} }

.dd__item:hover .dd__ico .i-vac-part{transform:translateY(-1px);transform-origin:12px 16px}
.dd__item:hover .dd__ico .i-press-top{transform:translateY(3px)}
.dd__ico .i-press-top{transform-origin:12px 4px}
.dd__item:hover .dd__ico .i-inject-drop{animation:iInjectDrop .55s ease both}
@keyframes iInjectDrop { 0%{transform:translateY(-3px);opacity:0} 40%{opacity:1} 100%{transform:translateY(0);opacity:1} }

.dd__item:hover .dd__ico .i-cell-pop circle{animation:iCellPop .6s ease both}
.dd__ico .i-cell-pop circle{transform-origin:center;transform-box:fill-box}
.dd__ico .i-cell-pop circle:nth-child(1){animation-delay:0s}
.dd__ico .i-cell-pop circle:nth-child(2){animation-delay:.05s}
.dd__ico .i-cell-pop circle:nth-child(3){animation-delay:.1s}
.dd__ico .i-cell-pop circle:nth-child(4){animation-delay:.15s}
@keyframes iCellPop { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }

.dd__item:hover .dd__ico .i-drop-l{transform:translateY(-1px)}
.dd__item:hover .dd__ico .i-drop-r{transform:translateY(-1px);transition-delay:.06s}

.dd__item:hover .dd__ico .i-stack rect:nth-child(1){transform:translateY(1px)}
.dd__item:hover .dd__ico .i-stack rect:nth-child(3){transform:translateY(-2px)}
.dd__ico .i-stack rect{transform-origin:center;transform-box:fill-box}

.dd__item:hover .dd__ico .i-halo{transform:scale(1.1)}
.dd__item:hover .dd__ico .i-scan-line{animation:iScanLine 1s ease both}
@keyframes iScanLine { 0%{transform:translateY(-6px)} 100%{transform:translateY(6px)} }

.dd__item:hover .dd__ico .i-refresh{transform:rotate(90deg);transform-origin:16px 6px}
.dd__item:hover .dd__ico .i-cube-line{stroke-dashoffset:0}

.dd__item:hover .dd__ico .i-launch{animation:iLaunch .7s ease both}
@keyframes iLaunch { 0%{transform:translateY(0)} 40%{transform:translateY(-3px) rotate(-3deg)} 100%{transform:translateY(0)} }

.dd__item:hover .dd__ico .i-shine{animation:iShine .8s ease both}
@keyframes iShine { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 3px rgba(0,0,0,.25))} }

.dd__item:hover .dd__ico .i-cone-scale{transform:translateY(-1px)}

.dd__item:hover .dd__ico .i-band{transform:translateY(-1px)}
.dd__item:hover .dd__ico .i-tick{animation:iTick 2s linear both;transform-origin:12px 12px}
@keyframes iTick { to{transform:rotate(30deg)} }

.dd__item:hover .dd__ico .i-plug-shake{animation:iShake .4s ease both}
@keyframes iShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} }

.dd__item:hover .dd__ico .i-hat{transform:translateY(-2px)}
.dd__item:hover .dd__ico .i-rise{transform:translateY(-2px)}
.dd__item:hover .dd__ico .i-choc-snap line:nth-child(3){transform:translateX(-1px)}
.dd__item:hover .dd__ico .i-choc-snap line:nth-child(4){transform:translateX(1px)}
.dd__ico .i-choc-snap line{transform-origin:center;transform-box:fill-box}
.dd__item:hover .dd__ico .i-plate-spin{animation:iPlateSpin 2s linear;transform-origin:12px 12px}
@keyframes iPlateSpin { to{transform:rotate(360deg)} }
.dd__item:hover .dd__ico .i-scoop{transform:translateY(-2px)}

.dd__item:hover .dd__ico .i-chisel{transform:translateY(-1px)}
.dd__item:hover .dd__ico .i-relief-shift line:nth-child(odd){transform:translateY(-1px)}
.dd__item:hover .dd__ico .i-relief-shift line:nth-child(even){transform:translateY(1px)}
.dd__ico .i-relief-shift line{transform-origin:center;transform-box:fill-box}
.dd__item:hover .dd__ico .i-timber line{animation:iTimberDraw .55s ease both}
@keyframes iTimberDraw { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
.dd__ico .i-timber line{transform-origin:left;transform-box:fill-box}
.dd__ico .i-timber line:nth-child(2){animation-delay:.05s}
.dd__ico .i-timber line:nth-child(3){animation-delay:.1s}
.dd__ico .i-timber line:nth-child(4){animation-delay:.15s}
.dd__item:hover .dd__ico .i-panels line:nth-child(1){transform:translateX(-1px)}
.dd__item:hover .dd__ico .i-panels line:nth-child(2){transform:translateX(1px)}
.dd__ico .i-panels line{transform-origin:center;transform-box:fill-box}
.dd__item:hover .dd__ico .i-layers{transform:translateY(-2px)}

.dd__item:hover .dd__ico .i-bars line{animation:iBars .5s ease both}
.dd__ico .i-bars line{transform-origin:bottom;transform-box:fill-box;transform:scaleY(0)}
@keyframes iBars { to{transform:scaleY(1)} }
.dd__ico .i-bars line:nth-child(2){animation-delay:.06s}
.dd__ico .i-bars line:nth-child(3){animation-delay:.12s}

.dd__item:hover .dd__ico .i-windows rect{animation:iWindowGlow 1.2s ease both;transform-origin:center;transform-box:fill-box}
@keyframes iWindowGlow { 0%,100%{opacity:.6} 50%{opacity:1} }
.dd__ico .i-windows rect:nth-child(1){animation-delay:0s}
.dd__ico .i-windows rect:nth-child(2){animation-delay:.08s}
.dd__ico .i-windows rect:nth-child(3){animation-delay:.16s}
.dd__ico .i-windows rect:nth-child(4){animation-delay:.24s}
.dd__ico .i-windows rect:nth-child(5){animation-delay:.32s}
.dd__ico .i-windows rect:nth-child(6){animation-delay:.4s}

.dd__item:hover .dd__ico .i-cone-scale path{transform:translateY(-1px)}
.dd__item:hover .dd__ico .i-crown-pop{transform:translateY(-2px)}
.dd__item:hover .dd__ico .i-hands{transform:rotate(45deg)}
.dd__item:hover .dd__ico .i-drip{transform:translateY(1px) scale(1.06);transform-origin:12px 4px}
.dd__item:hover .dd__ico .i-wave{animation:iWaveSlide .7s ease both}
@keyframes iWaveSlide { 0%{transform:translateX(-2px)} 100%{transform:translateX(2px)} }

/* Focus-visible parity for keyboard users */
.dd__item:focus-visible .dd__ico .i-lift,.dd__item:focus-visible .dd__ico .i-bookmark{transform:translateY(-2px)}
.dd__item:focus-visible .dd__ico .i-spin{transform:rotate(90deg)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .dd__ico .i-anim,
  .dd__ico .i-orbits,
  .dd__ico .i-therm-rise,
  .dd__ico .i-flame,
  .dd__ico .i-target-dot,
  .dd__ico .i-bubbles,
  .dd__ico .i-bubble-up{animation:none !important;transition:none !important;transform:none !important}
}

/* MOBILE FIXES v2 — overlays and vertical rhythm — MFIX_V2 */
@media (max-width:900px){
  /* KPI/meta row must clear the sheet's -mt lift on mobile */
  .hero__meta{ margin-bottom:clamp(3rem,7vw,4.5rem) }
  /* Prevent sheet lift from cutting into anything mobile — reduce lift */
  .sheet{ margin-top:calc(-1 * clamp(1.5rem,3vw,2.5rem)) }
  .sheet-end{ margin-bottom:calc(-1 * clamp(1.5rem,3vw,2.5rem)) }
}
@media (max-width:640px){
  /* More generous vertical rhythm between sections on phones */
  .section{ padding-block:clamp(3.75rem,12vw,5rem) }
  .section--tight{ padding-block:clamp(2.75rem,9vw,3.75rem) }
  /* Slightly larger corner radius on sheet edges reads cleaner on phone */
  .sheet{ border-radius:32px 32px 0 0 }
  .sheet-end{ border-radius:0 0 32px 32px }
  /* Guarantee a comfortable bottom gap before the sheet lifts */
  .hero{ padding-bottom:3.5rem }
  .phero{ padding-bottom:3rem }
  /* Cards, stat grids, faq breathing */
  .cards,.numgrid{ gap:1rem }
  .head{ margin-bottom:1.75rem }
  /* Statement (now inside .shell) — force single column earlier and give the body a nudge */
  .statement{ gap:1.75rem }
  .statement__body{ gap:1.1rem }
  /* Any stray full-width table or pre inside prose gets scroll rather than overflow */
  .prose table, .prose pre, .measure table, .measure pre{ overflow-x:auto; max-width:100% }
}
/* END MFIX_V2 */

/* === tci-components:start === */
/* Problem section: keep .head + .split as a balanced unit. */
.problem-block{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.problem-block .split__media img{max-height:clamp(320px,42vw,520px)}

/* Hand-drawn engineering diagram block */
.diagram-block{margin-top:clamp(1.5rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--paper-2);border-radius:var(--r-lg);border:1px solid var(--line)}
.dark .diagram-block{background:rgba(255,255,255,.03);border-color:var(--line-dark)}
.diagram-block__title{font-family:var(--font-display,Satoshi,sans-serif);
  font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;letter-spacing:-.01em;
  margin:0 0 1.1rem;color:var(--ink)}
.dark .diagram-block__title{color:#fff}
.diagram-block svg{width:100%;height:auto;display:block;max-width:720px;margin:0 auto}
.diagram-block__note{margin:1rem 0 0;font-size:var(--text-sm);color:var(--muted);
  font-style:normal}
.dark .diagram-block__note{color:var(--muted-dark)}

/* Draggable process timeline */
.timeline{margin-top:clamp(2rem,4vw,3rem)}
.timeline__intro{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.75rem 1.5rem;margin-bottom:1.1rem}
.timeline__hint{font-size:.8rem;color:var(--muted);letter-spacing:.02em;
  text-transform:uppercase;font-weight:500}
.dark .timeline__hint{color:rgba(255,255,255,.5)}
.timeline__rail{position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding:.5rem 0 1.2rem;
  cursor:grab;-webkit-overflow-scrolling:touch}
.timeline__rail.is-grabbing{cursor:grabbing;user-select:none}
.timeline__rail::-webkit-scrollbar{height:6px}
.timeline__rail::-webkit-scrollbar-track{background:transparent}
.timeline__rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.dark .timeline__rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
.timeline__track{position:relative;display:flex;gap:1rem;padding:0 .25rem;
  min-width:min-content}
.timeline__track::before{content:"";position:absolute;left:0;right:0;top:22px;
  height:2px;background:var(--line);z-index:0}
.dark .timeline__track::before{background:rgba(255,255,255,.14)}
.timeline__stage{position:relative;z-index:1;flex:0 0 clamp(220px,26vw,280px);
  background:transparent;border:0;text-align:left;padding:0;color:inherit;
  font:inherit;cursor:pointer;scroll-snap-align:start}
.timeline__stage:focus{outline:none}
.timeline__stage:focus-visible .timeline__dot{outline:2px solid var(--accent);
  outline-offset:3px}
.timeline__dot{width:44px;height:44px;border-radius:50%;background:var(--paper);
  border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display,Satoshi,sans-serif);font-weight:700;font-size:1rem;
  color:var(--ink);margin-bottom:.85rem;transition:background .3s var(--ease),
  border-color .3s var(--ease),transform .3s var(--ease)}
.dark .timeline__dot{background:var(--ink);border-color:rgba(255,255,255,.2);color:#fff}
.timeline__stage:hover .timeline__dot,
.timeline__stage.is-active .timeline__dot{background:var(--accent);
  border-color:var(--accent);color:#fff;transform:scale(1.06)}
.timeline__stage h4{font-size:.98rem;font-weight:600;letter-spacing:-.01em;
  margin:0 0 .3rem;color:var(--ink)}
.dark .timeline__stage h4{color:#fff}
.timeline__duration{display:inline-block;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.dark .timeline__duration{color:rgba(255,255,255,.55)}
.timeline__body{font-size:.87rem;line-height:1.55;color:var(--muted);margin:0;
  padding-right:1rem}
.dark .timeline__body{color:rgba(255,255,255,.7)}
.timeline__stage.is-active .timeline__body{color:var(--ink)}
.dark .timeline__stage.is-active .timeline__body{color:#fff}
.timeline__total{margin:1.5rem 0 0;font-size:.85rem;color:var(--muted)}
.dark .timeline__total{color:rgba(255,255,255,.55)}
.timeline__total b{color:var(--ink);font-weight:600}
.dark .timeline__total b{color:#fff}

/* Worked-example pricing block */
.pricing-block{margin-top:clamp(1.5rem,3vw,2.4rem);
  background:var(--paper-2);border-radius:var(--r-lg);
  border:1px solid var(--line);overflow:hidden}
.dark .pricing-block{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.pricing-block__head{padding:1.35rem clamp(1.25rem,2.5vw,1.8rem) .35rem}
.pricing-block__eyebrow{display:block;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.4rem}
.pricing-block__lead{font-size:1rem;line-height:1.55;margin:0;color:var(--ink);
  font-weight:500}
.dark .pricing-block__lead{color:#fff}
.pricing-block__table{width:100%;border-collapse:collapse;margin-top:.4rem}
.pricing-block__table th,.pricing-block__table td{padding:.85rem clamp(1.25rem,2.5vw,1.8rem);
  text-align:left;border-top:1px solid var(--line);font-size:.94rem;line-height:1.4}
.dark .pricing-block__table th,.dark .pricing-block__table td{border-color:var(--line-dark)}
.pricing-block__table th{font-weight:500;color:var(--ink);width:auto}
.dark .pricing-block__table th{color:#fff}
.pricing-block__table td{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;
  font-weight:500;white-space:nowrap}
.dark .pricing-block__table td{color:rgba(255,255,255,.75)}
.pricing-block__table tr:last-child th,
.pricing-block__table tr:last-child td{background:var(--paper-3);color:var(--ink);
  font-weight:700;font-size:1rem}
.dark .pricing-block__table tr:last-child th,
.dark .pricing-block__table tr:last-child td{background:rgba(255,255,255,.06);color:#fff}
.pricing-block__note{padding:1rem clamp(1.25rem,2.5vw,1.8rem) 1.35rem;margin:0;
  font-size:.82rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
.dark .pricing-block__note{color:rgba(255,255,255,.6);border-color:var(--line-dark)}

/* screen-reader-only utility (in case the base stylesheet doesn't ship one) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (max-width:640px){
  .pricing-block__table th,.pricing-block__table td{padding:.7rem 1rem;font-size:.87rem}
  .pricing-block__lead{font-size:.95rem}
  .timeline__stage{flex-basis:82vw}
}
/* === tci-components:end === */

/* ============================================================
   Contrast fix — 2026-09-16
   1) Nav dropdown icons (.dd__ico) always render on a light popover
      surface, so they must use the LIGHT-mode accent even though the
      nav ancestor flips --accent to its dark-surface variant.
   2) Trio icons on Products' .dark bands were rendering near-white on
      near-white tiles because Products' --accent-d is #ffffff. Give
      the tile a darker fill and force a legible icon colour there.
   ============================================================ */

/* Fix 1: dropdown-panel icons always take the light-mode accent
   (accent-deep first, then fall back to the base light accent). */
.dd .dd__ico{
  color: var(--accent-deep, #181818);
  background: rgba(24,24,24,.06);
}
.dd .dd__item:hover .dd__ico{
  color: #ffffff;
  background: var(--accent-deep, var(--accent, #181818));
}

/* Fix 2: on Products specifically, trio icons inside .dark bands
   need a legible fill+colour combo (default was white-on-white-tint). */
[data-brand="products"] .dark .trio__ico,
[data-brand="products"] .band .trio__ico,
[data-brand="products"] .cta .trio__ico{
  background: rgba(255,255,255,.14);
  color: #ffffff;
  outline: 1px solid rgba(255,255,255,.22);
}
[data-brand="products"] .dark .trio__ico svg,
[data-brand="products"] .band .trio__ico svg,
[data-brand="products"] .cta .trio__ico svg{
  stroke: #ffffff;
}

/* Also cover step__ico / ukband__ico / oss__ico with the same logic
   for Products so no white-on-white slips through in other sections. */
[data-brand="products"] .dark .step__ico,
[data-brand="products"] .band .step__ico,
[data-brand="products"] .cta .step__ico,
[data-brand="products"] .dark .ukband__ico,
[data-brand="products"] .band .ukband__ico,
[data-brand="products"] .cta .ukband__ico,
[data-brand="products"] .dark .oss__ico,
[data-brand="products"] .band .oss__ico,
[data-brand="products"] .cta .oss__ico{
  background: rgba(255,255,255,.14);
  color: #ffffff;
  outline: 1px solid rgba(255,255,255,.22);
}
/* TCI — supplementary tokens for the generated brand pages. */

/* Sections default light — the recovered stylesheet makes body dark and
   relies on per-section .tint/.dark/.band/.paper wrappers to opt into a
   paper look. The rebuild has fewer wrappers, so give plain .section a
   paper surface and dark ink, and keep .band/.dark/.tint intact. */
main > section.section:not(.tint):not(.dark):not(.band):not(.paper){background:var(--paper);color:var(--ink)}
main > section.section:not(.tint):not(.dark):not(.band):not(.paper) .lede,
main > section.section:not(.tint):not(.dark):not(.band):not(.paper) .faq__a{color:var(--muted)}

/* Nav link spacing — the recovered stylesheet sets .nav__links{gap:.05rem}
   because the original site used .nav__link + .nav__trigger with their own padding.
   Our slim rebuild uses plain .nav__link so we restore visual gap here. */
.nav__links > .nav__link{padding:.5rem .95rem;border-radius:8px;transition:background .15s}
.nav__links > .nav__link:hover{background:rgba(255,255,255,.06)}
@media (max-width:900px){.nav__links > .nav__link{padding:.95rem 0;border-radius:0}}

/* Small hero on inner pages */
.hero--sm{padding-block:6rem 4rem;background:linear-gradient(180deg,#181818 0%,#111 100%);color:#fff;position:relative}
.hero--sm .hero__in{max-width:820px}
.hero--sm h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;color:#fff;margin:.4em 0}
.hero--sm .hero__sub{color:rgba(255,255,255,.8);max-width:650px}
.hero--sm .eyebrow{color:var(--accent-d,var(--accent))}

/* Tile grid (used for services / solution lists) */
.tiles{display:grid;gap:1.25rem;margin-top:2.5rem}
.tiles--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tiles--5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tile{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.6rem 1.4rem;transition:transform .18s ease, box-shadow .18s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.tile__num{font-family:var(--font-display);font-weight:900;font-size:.85rem;letter-spacing:.08em;color:var(--accent);margin-bottom:.6rem}
.tile__h{font-size:1.15rem;font-weight:700;margin:0 0 .5rem;line-height:1.25}
.tile__p{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0}
[data-brand="products"] .tile__num,
[data-brand="construction"] .tile__num,
[data-brand="culinary"] .tile__num{color:var(--accent-deep,var(--accent))}

/* Six commitments grid */
.six-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:2.5rem}
.six-card{background:var(--paper-2);border-radius:8px;padding:1.6rem 1.4rem;position:relative}
.six-card__num{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--font-display);font-weight:900;font-size:.8rem;color:var(--accent);opacity:.7}
.six-card__h{font-size:1.05rem;font-weight:700;margin:0 0 .5rem;line-height:1.25;padding-right:2.5rem}
.six-card__p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}

/* Two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.split__col{min-width:0}
.split__col h2{margin-top:0}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:2rem}}

/* FAQ */
.faqs{margin-top:2rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq__q{cursor:pointer;padding:1.2rem 0;font-weight:600;font-size:1.05rem;list-style:none;position:relative;padding-right:2rem}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";position:absolute;right:.4rem;top:1.1rem;font-size:1.4rem;font-weight:400;color:var(--accent);transition:transform .18s}
.faq[open] .faq__q::after{content:"−"}
.faq__a{padding:0 0 1.4rem;color:var(--muted);line-height:1.6;max-width:750px}

/* Steps list */
ol.steps{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem;counter-reset:none}
.steps__item{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.3rem}
.steps__n{font-family:var(--font-display);font-weight:900;font-size:.8rem;color:var(--accent);margin-bottom:.6rem;letter-spacing:.08em}
.steps__item h3{font-size:1.05rem;margin:0 0 .5rem;font-weight:700}
.steps__item p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}

/* Division you-are-here note */
.division__self{display:inline-block;margin-left:.4em;color:var(--accent-d,var(--accent));font-weight:600;font-size:.8em}

/* Form */
.form{display:grid;gap:1rem;margin-top:0}
.form__row{display:flex;flex-direction:column;gap:.4rem}
.form__row span{font-weight:600;font-size:.9rem}
.form__row input,.form__row textarea{padding:.75rem .9rem;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:.95rem;background:#fff}
.form__row input:focus,.form__row textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.form__note{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}
.form .btn{align-self:start;margin-top:.5rem}

/* Reveal fallback — the base stylesheet keeps .rise at opacity 0 until the
   IntersectionObserver in main.js adds .in. Inside a sandboxed preview iframe
   the observer sometimes doesn't fire; force-reveal any .rise that hasn't
   been "in"-ed within 1.4s of load so nothing stays invisible. */
@keyframes tci-rise-fallback{to{opacity:1;transform:none}}
.rise{animation:tci-rise-fallback .7s var(--ease,cubic-bezier(.2,.7,.1,1)) 1.4s forwards}
.rise.in{animation:none}

/* Small utilities */
.pad-y0{padding-block:0}
.lede{font-size:1.1rem;color:var(--muted);line-height:1.55;max-width:720px}