/* ============================================================
TCI Group — shared design system
Byte-identical across all division sites.
Division accent is set by [data-brand] on .
============================================================ */
/* ---------- Tokens ---------- */
:root{
--ink:#181818;
--ink-2:#242424;
--ink-3:#2f2f2f;
--paper:#ffffff;
--paper-2:#f6f5f3;
--paper-3:#efeeeb;
--line:#e3e1dd;
--line-dark:rgba(255,255,255,.14);
--muted:#5d5a55;
--muted-dark:rgba(255,255,255,.66);
--accent:#3ea683;
--accent-ink:#ffffff;
--accent-text:#2f7d63;
--shell:1240px;
--gap:clamp(1.25rem,3vw,2rem);
--rad:18px;
--rad-lg:28px;
--rad-sheet:40px;
--text-sm:.875rem;
--text-base:1.0625rem;
--text-lg:1.1875rem;
--h-md:clamp(1.65rem,3.2vw,2.35rem);
--h-lg:clamp(2rem,4.4vw,3.1rem);
--h-xl:clamp(2.3rem,5.4vw,3.9rem);
--h-hero:clamp(2.6rem,6.6vw,4.9rem);
--sec-y:clamp(4.5rem,9vw,7.5rem);
--ease:cubic-bezier(.22,.61,.36,1);
}
html[data-brand="mouldings"] { --accent:#3ea683; --accent-ink:#06251b; --accent-text:#2b7a5f; }
html[data-brand="culinary"] { --accent:#fbae44; --accent-ink:#2b1a02; --accent-text:#9a5c05; }
html[data-brand="construction"]{ --accent:#e63e33; --accent-ink:#ffffff; --accent-text:#c22b21; }
html[data-brand="products"] { --accent:#333333; --accent-ink:#ffffff; --accent-text:#333333; }
html[data-brand="group"] { --accent:#159c9c; --accent-ink:#012322; --accent-text:#0d6f6f; }
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
font-family:'Satoshi','Satoshi-Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:var(--text-base);
line-height:1.62;
color:var(--ink);
background:var(--ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--paper);color:var(--ink);padding:.7rem 1.1rem;
border-radius:0 0 10px 0;font-weight:700;
}
.skip:focus{left:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.measure{max-width:60ch}
.stack--sm>*+*{margin-top:.85rem}
.pad-b0{padding-bottom:0!important}
/* ---------- Type helpers ---------- */
.h-md{font-size:var(--h-md)}
.h-lg{font-size:var(--h-lg)}
.h-xl{font-size:var(--h-xl)}
.eyebrow{
font-size:.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:.17em;color:var(--accent-text);margin:0 0 .1rem;
}
.dark, .hero, .cta__in, .nav{--accent-text:var(--accent)}
.dark .eyebrow{color:var(--accent)}
html[data-brand="products"] .eyebrow{color:#8f8b85}
html[data-brand="products"] .dark .eyebrow{color:rgba(255,255,255,.62)}
.lede{font-size:var(--text-lg);color:var(--muted);line-height:1.58}
.dark .lede{color:var(--muted-dark)}
.body-muted{color:var(--muted)}
.dark .body-muted{color:var(--muted-dark)}
/* ---------- Buttons ---------- */
.btn{
--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:transparent;
display:inline-flex;align-items:center;gap:.6rem;
padding:.62rem .68rem .62rem 1.25rem;
background:var(--btn-bg);color:var(--btn-fg);
border:1.5px solid var(--btn-bd);border-radius:999px;
font-weight:700;font-size:.98rem;text-decoration:none;
transition:transform .35s var(--ease),background .25s,color .25s,border-color .25s;
white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn__dot{
display:grid;place-items:center;width:1.95rem;height:1.95rem;flex:none;
border-radius:999px;background:var(--ink);color:var(--paper);
transition:background .25s,color .25s;
}
.btn__dot svg{width:.95rem;height:.95rem}
.btn--light{--btn-bg:var(--paper);--btn-fg:var(--ink)}
.btn--light .btn__dot{background:var(--ink);color:var(--paper)}
.btn--light:hover .btn__dot{background:var(--accent);color:var(--accent-ink)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:var(--paper)}
.btn--dark .btn__dot{background:var(--paper);color:var(--ink)}
.btn--dark:hover .btn__dot{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--paper);--btn-bd:rgba(255,255,255,.34)}
.btn--ghost .btn__dot{background:rgba(255,255,255,.14);color:var(--paper)}
.btn--ghost:hover{--btn-bd:rgba(255,255,255,.7)}
.btn--ghost:hover .btn__dot{background:var(--accent);color:var(--accent-ink)}
.sheet .btn--ghost{--btn-fg:var(--ink);--btn-bd:var(--line)}
.sheet .btn--ghost .btn__dot{background:var(--paper-3);color:var(--ink)}
.sheet .btn--ghost:hover{--btn-bd:var(--ink)}
/* The CTA panel is a dark surface, but it can sit inside a light .sheet, and the
.sheet rules above then paint the ghost button's label near-black on near-black.
The phone number was effectively invisible on every page of all five sites.
These three rules restore the dark-surface treatment wherever .cta wins. */
.cta .btn--ghost{--btn-fg:var(--paper);--btn-bd:rgba(255,255,255,.34)}
.cta .btn--ghost .btn__dot{background:rgba(255,255,255,.14);color:var(--paper)}
.cta .btn--ghost:hover{--btn-bd:rgba(255,255,255,.75)}
.cta .btn--ghost:hover .btn__dot{background:var(--accent);color:var(--accent-ink)}
html[data-brand="products"] .cta .btn--ghost:hover .btn__dot{background:var(--paper);color:var(--ink)}
.dark .btn--ghost{--btn-fg:var(--paper);--btn-bd:rgba(255,255,255,.34)}
.dark .btn--ghost .btn__dot{background:rgba(255,255,255,.14);color:var(--paper)}
.link-more{
/* Labels can be long sentences, so this has to wrap. nowrap here forces a
min-content width that blows out its grid column and gets clipped on
narrow screens. */
display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
max-width:100%;white-space:normal;
font-weight:700;text-decoration:none;color:inherit;
border-bottom:2px solid var(--accent);padding-bottom:.15rem;
transition:gap .3s var(--ease);
}
.link-more svg{width:1.05rem;height:1.05rem;flex:none}
/* Some call-to-action labels are full phrases. On narrow screens let the label
wrap inside the pill rather than let it push past the viewport and be
clipped by the .sheet overflow. The dot stays pinned on the right. */
@media (max-width:620px){
.btn{white-space:normal;max-width:100%;padding-right:.6rem;line-height:1.3}
.btn__dot{flex:none}
}
/* Headings carry hand-placed
for desktop line breaks. On narrow screens
those collide with natural wrapping and leave orphan words, so drop them and
let the text wrap on its own. */
@media (max-width:760px){
/* Desktop-only heading breaks. layout.py puts a real space before each one,
so hiding the
leaves the words correctly separated. */
br.dbr{display:none}
}
.link-more:hover{gap:.85rem}
/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--paper)}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;flex:none}
.brand__tile{
display:grid;place-items:center;width:2.85rem;height:2.85rem;flex:none;
border-radius:9px;background:var(--accent);color:#fff;
}
html[data-brand="products"] .brand__tile{background:#3c3c3c}
.brand__tile svg{width:2.85rem;height:2.85rem}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-size:1.4rem;font-weight:900;letter-spacing:-.02em}
.brand__txt span{
font-size:.575rem;font-weight:500;letter-spacing:.24em;
text-transform:uppercase;margin-top:.22rem;color:rgba(255,255,255,.82);
}
.foot .brand__txt b,.foot .brand__txt span{color:inherit}
.nav__links{display:flex;align-items:center;gap:1.15rem;margin-left:auto}
.nav__links a{
text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap;
color:rgba(255,255,255,.76);transition:color .2s;
}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current="page"]{color:var(--accent);font-weight:700}
html[data-brand="products"] .nav__links a[aria-current="page"]{color:#fff}
.nav__cta{margin-left:.4rem;flex:none}
.nav__burger{
display:none;margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.24);
border-radius:10px;color:#fff;width:2.6rem;height:2.6rem;place-items:center;cursor:pointer;
}
.nav__burger svg{width:1.35rem;height:1.35rem}
@media (max-width:1180px){
.nav__burger{display:grid}
.nav__cta{display:none}
.nav__links{
position:absolute;left:0;right:0;top:100%;
flex-direction:column;align-items:stretch;gap:0;
background:var(--ink-2);border-top:1px solid var(--line-dark);
padding:.5rem clamp(1.15rem,4vw,2.5rem) 1.25rem;
margin:0;display:none;
}
.nav__links.is-open{display:flex}
.nav__links a{padding:.85rem 0;border-bottom:1px solid var(--line-dark);font-size:1.05rem}
}
/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero__bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.78) 46%,rgba(18,18,18,.42) 100%);
}
.hero .shell{position:relative;padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(4rem,7vw,5.5rem)}
.hero__in{max-width:22ch}
.hero h1{font-size:var(--h-hero);margin:.7rem 0 0;max-width:20ch}
.hero__in .eyebrow{color:var(--accent)}
html[data-brand="products"] .hero__in .eyebrow{color:rgba(255,255,255,.7)}
.hero__sub{
margin-top:1.5rem;max-width:52ch;font-size:var(--text-lg);
color:rgba(255,255,255,.8);line-height:1.56;
}
.hero__in{max-width:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.hero__meta{
display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
margin-top:clamp(3rem,6vw,4.75rem);padding-top:1.75rem;
border-top:1px solid rgba(255,255,255,.18);
}
.hero__meta div{display:flex;flex-direction:column;gap:.3rem}
.hero__meta b{font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.hero__meta span{font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.35}
@media (max-width:720px){
.hero__meta{grid-template-columns:repeat(2,1fr);gap:1.35rem}
}
/* Hero variant for interior pages (no stat row) */
.hero--page .shell{padding-bottom:clamp(4.5rem,8vw,6.5rem)}
.hero--page .hero__sub{max-width:58ch}
/* ---------- The white sheet ---------- */
.sheet{
position:relative;z-index:2;
background:var(--paper);
border-radius:var(--rad-sheet) var(--rad-sheet) 0 0;
margin-top:calc(-1 * var(--rad-sheet));
overflow:hidden;
}
/* ---------- Sections ---------- */
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(3.25rem,6vw,4.75rem)}
/* Crumb plus at-a-glance box at the top of a case study. Sits hard under the
hero, so it needs top padding only. */
.section--thin{padding-top:clamp(2rem,3.5vw,2.9rem);padding-bottom:0}
/* A thin section is an intro to the section that follows, so its heading
must not also carry the standard head margin. Without this the intro
padding, the head margin and the next section's padding-top stacked into
a dead band of white on the grouped projects hubs. */
.section--thin > .shell > .head{margin-bottom:0}
.tint{background:var(--paper-2)}
.band.dark{background:var(--ink);color:var(--paper)}
.band.dark + .band.dark{padding-top:0}
.head{max-width:62ch}
.head--wide{max-width:76ch}
.head--tight{max-width:70ch}
.head h2{margin:.55rem 0 0}
.head .lede{margin-top:1.05rem}
.row-end{
display:flex;align-items:flex-end;justify-content:space-between;
gap:1.75rem;flex-wrap:wrap;margin-bottom:clamp(2.25rem,4vw,3.25rem);
}
.section > .shell > .head{margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.section > .shell > .row-end{margin-bottom:clamp(2.25rem,4vw,3.25rem)}
p.row-end{margin-top:2.25rem;margin-bottom:0;justify-content:flex-start}
/* ---------- Statement ---------- */
.statement{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.statement>*{min-width:0}
.statement__body>*+*{margin-top:1.1rem}
.statement__body .link-more{margin-top:1.6rem}
@media (max-width:900px){.statement{grid-template-columns:1fr}}
/* ---------- Numbered cards ---------- */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad)}
.numcard{background:var(--paper);padding:clamp(1.5rem,2.4vw,2rem)}
.tint .numcard{background:var(--paper-2)}
.numcard__n{
display:block;font-size:.78rem;font-weight:900;letter-spacing:.12em;
color:var(--accent-text);margin-bottom:1.4rem;
}
html[data-brand="products"] .numcard__n{color:#8f8b85}
.numcard h3{font-size:1.14rem;margin-bottom:.6rem}
.numcard p{font-size:.955rem;color:var(--muted)}
/* Pin columns to the item count so no orphan cells appear. Five items sit on a
six-column base: three cards of two columns, then two cards of three. */
.numgrid--3{grid-template-columns:repeat(3,1fr)}
.numgrid--4{grid-template-columns:repeat(4,1fr)}
.numgrid--6{grid-template-columns:repeat(3,1fr)}
.numgrid--5{grid-template-columns:repeat(6,1fr)}
.numgrid--5>*{grid-column:span 2}
.numgrid--5>:nth-child(n+4){grid-column:span 3}
@media (max-width:1000px){
.numgrid,.numgrid--3,.numgrid--4,.numgrid--5,.numgrid--6{grid-template-columns:repeat(2,1fr)}
.numgrid>*,.numgrid--5>*,.numgrid--5>:nth-child(n+4){grid-column:auto}
.numgrid--3>:last-child,.numgrid--5>:last-child{grid-column:1/-1}
}
@media (max-width:600px){
.numgrid,.numgrid--3,.numgrid--4,.numgrid--5,.numgrid--6{grid-template-columns:1fr}
.numgrid>*,.numgrid--5>*,.numgrid--5>:nth-child(n+4){grid-column:auto}
}
/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.25rem);align-items:center}
.split--flip .split__media{order:2}
.split__media img{border-radius:var(--rad-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.split>*{min-width:0}
.split__body>*+*{margin-top:1.1rem}
.split__body h2{margin-top:.5rem}
.split__body .btn{margin-top:.6rem}
@media (max-width:900px){
.split{grid-template-columns:1fr}
.split--flip .split__media{order:0}
}
/* ---------- Tick list ---------- */
.ticks{display:grid;gap:.85rem;margin-top:1.5rem!important}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;color:var(--muted)}
.dark .ticks li{color:var(--muted-dark)}
.ticks svg{
width:1.15rem;height:1.15rem;flex:none;margin-top:.28rem;color:var(--accent-text);
}
html[data-brand="products"] .ticks svg{color:var(--ink)}
html[data-brand="products"] .dark .ticks svg{color:#fff}
/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
display:flex;flex-direction:column;overflow:hidden;
background:var(--paper);color:var(--ink);border-radius:var(--rad-lg);
}
.dark .card{background:var(--ink-2);color:var(--paper);border:1px solid var(--line-dark)}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__body{padding:clamp(1.35rem,2.2vw,1.75rem);display:flex;flex-direction:column;gap:.55rem}
.card__tag{
font-size:.685rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text);
}
html[data-brand="products"] .card__tag{color:#8f8b85}
.dark html[data-brand="products"] .card__tag{color:rgba(255,255,255,.6)}
.card__body h3{font-size:1.2rem}
.card__body p{font-size:.955rem;color:var(--muted)}
.dark .card__body p{color:var(--muted-dark)}
@media (max-width:1000px){
.cards,.cards--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.cards,.cards--2,.cards--4{grid-template-columns:1fr}
}
/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.steps li{counter-increment:s;padding-top:2.9rem;position:relative;border-top:2px solid var(--line)}
.steps li::before{
content:counter(s,decimal-leading-zero);
position:absolute;top:1rem;left:0;
font-size:.78rem;font-weight:900;letter-spacing:.12em;color:var(--accent-text);
}
html[data-brand="products"] .steps li::before{color:#8f8b85}
.steps li::after{
content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--accent);
transition:width 1s var(--ease);
}
.steps li.is-in::after{width:100%}
.steps h3{font-size:1.08rem;margin-bottom:.55rem}
.steps p{font-size:.93rem;color:var(--muted)}
.dark .steps li{border-top-color:var(--line-dark)}
.dark .steps p{color:var(--muted-dark)}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.steps{grid-template-columns:1fr;gap:1.1rem}.steps li{padding-top:2.5rem}}
/* ---------- Trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,3.5vw,3rem)}
.trio__ico{
display:grid;place-items:center;width:3.1rem;height:3.1rem;
border-radius:12px;background:var(--accent);color:var(--accent-ink);margin-bottom:1.3rem;
}
html[data-brand="products"] .trio__ico{background:#fff;color:var(--ink)}
.trio__ico svg{width:1.5rem;height:1.5rem}
.trio h3{font-size:1.2rem;margin-bottom:.6rem}
.trio p{font-size:.955rem;color:var(--muted)}
.dark .trio p{color:var(--muted-dark)}
@media (max-width:860px){.trio{grid-template-columns:1fr}}
/* ---------- Divisions ---------- */
.divisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--rad)}
.division{
display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.4rem,2.2vw,1.85rem);
background:var(--ink);text-decoration:none;color:inherit;transition:background .3s;
}
a.division:hover{background:var(--ink-3)}
.division em{
font-style:normal;font-size:.685rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--bc,var(--accent-text));
}
.division b{font-size:1.1rem;font-weight:900}
.division span{font-size:.9rem;color:var(--muted-dark);line-height:1.5}
span.division{opacity:.72}
/* Company colour coding. Every cross-link to a sister company is tinted with
that company's own accent so the five brands are told apart on sight. */
.b-group { --bc:#3fc4c4 }
.b-mouldings { --bc:#5ec79f }
.b-culinary { --bc:#fbae44 }
.b-construction { --bc:#ff6b60 }
.b-products { --bc:#b8b3ab }
.section:not(.dark) .b-group { --bc:#0d6f6f }
.section:not(.dark) .b-mouldings { --bc:#2b7a5f }
.section:not(.dark) .b-culinary { --bc:#9a5c05 }
.section:not(.dark) .b-construction { --bc:#c22b21 }
.section:not(.dark) .b-products { --bc:#333333 }
.division{position:relative;overflow:hidden}
.division::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--bc);transform:scaleY(0);transform-origin:top;
transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.division--here::before,a.division:hover::before,a.division:focus-visible::before{transform:scaleY(1)}
.division__go{
margin-top:auto;padding-top:.9rem;width:1.1rem;height:1.1rem;color:var(--bc);
opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;
}
.division__go svg{width:100%;height:100%;display:block}
a.division:hover .division__go,a.division:focus-visible .division__go{opacity:1;transform:none}
.division__here{
margin-top:auto;padding-top:.9rem;font-style:normal;font-size:.66rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--bc);
}
@media (max-width:560px){.divisions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.division::before,.division__go{transition:none}
a.division:hover .division__go{transform:none}
}
/* ---------- Footer company links ---------- */
.grouplink{display:inline-flex;align-items:center;gap:.55rem}
.grouplink__dot{
width:.5rem;height:.5rem;border-radius:50%;background:var(--bc);flex:none;
box-shadow:0 0 0 3px color-mix(in srgb,var(--bc) 18%,transparent);
}
.grouplink[aria-current="true"]{color:#fff;font-weight:700}
/* ---------- Companies we have worked with ---------- */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2.2rem 2.6rem;margin-top:2.6rem}
.clients__col h3{
display:flex;align-items:flex-end;min-height:2.9rem;
font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
line-height:1.45;color:var(--accent-text);margin:0 0 1.1rem;padding-bottom:.8rem;
border-bottom:1px solid var(--line-dark);
}
.section:not(.dark) .clients__col h3{border-bottom-color:var(--line)}
.clients__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}
.clients__list li{display:flex;flex-direction:column;gap:.2rem}
.clients__list b{font-size:1.02rem;font-weight:900;line-height:1.25}
.clients__list span{font-size:.84rem;line-height:1.5;color:var(--muted-dark)}
.section:not(.dark) .clients__list span{color:var(--muted)}
.clients__note{font-size:.86rem;line-height:1.6;color:var(--muted-dark);margin:1.2rem 0 0;opacity:.9}
.section:not(.dark) .clients__note{color:var(--muted)}
/* ---------- Company structure ---------- */
.struct{margin-top:2.4rem;border-top:1px solid var(--line)}
.struct__legal{
font-size:1.02rem;line-height:1.65;max-width:60ch;margin:0 0 2.4rem;
padding:1.5rem 0 0;color:var(--ink);
}
.struct__row{
display:grid;grid-template-columns:minmax(11rem,18rem) 1fr;gap:1rem 2.2rem;
padding:1.35rem 0 1.35rem 1.1rem;border-top:1px solid var(--line);
border-left:3px solid var(--bc);
}
.struct__name a{font-size:1.06rem;font-weight:900;color:var(--bc);text-decoration:none}
.struct__name a:hover{text-decoration:underline;text-underline-offset:3px}
.struct__here{
display:inline-block;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
border-radius:20px;padding:.16rem .5rem;margin-left:.45rem;vertical-align:2px;
}
.struct__row p{margin:0;font-size:.94rem;line-height:1.65;color:var(--muted)}
.struct__make{
margin-top:3rem;padding:clamp(1.7rem,3vw,2.5rem);background:var(--paper-2);
border-radius:var(--rad-card);border:1px solid var(--line);
}
.struct__make h3{font-size:1.22rem;font-weight:900;margin:0 0 1rem}
.struct__make p{margin:0 0 1rem;font-size:.98rem;line-height:1.72;color:var(--muted);max-width:70ch}
.struct__make p:last-child{margin-bottom:0}
@media (max-width:720px){
.struct__row{grid-template-columns:1fr;gap:.55rem}
}
/* ---------- People ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.6rem 2rem;margin-top:2.4rem}
.person{display:flex;flex-direction:column;gap:.28rem;padding-top:1.1rem;border-top:2px solid var(--accent)}
.person b{font-size:1.06rem;font-weight:900}
.person em{font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.person span{font-size:.88rem;line-height:1.6;color:var(--muted);margin-top:.3rem}
.dark .person span,.dark .struct__row p{color:var(--muted-dark)}
/* ---------- Processes ---------- */
.proc{display:flex;flex-direction:column;margin-top:2.4rem;border-top:1px solid var(--line)}
.proc__row{
display:grid;grid-template-columns:3.2rem minmax(10rem,15rem) 1fr;gap:1rem 2rem;
align-items:start;padding:1.6rem 0;border-bottom:1px solid var(--line);
}
.proc__n{font-size:.74rem;font-weight:900;letter-spacing:.1em;color:var(--accent-text);padding-top:.35rem}
.proc__h{font-size:1.15rem;font-weight:900;line-height:1.28;margin:0}
.proc__row p{margin:0;font-size:.95rem;line-height:1.68;color:var(--muted)}
.proc__row p+p{margin-top:.7rem}
.proc__row > div{min-width:0}
@media (max-width:760px){
.proc__row{grid-template-columns:2.4rem 1fr;gap:.5rem 1rem}
/* The paragraphs sit inside a wrapper div, so they are not grid items and
grid-column never applied to them. The wrapper was auto-placed into the
2.4rem number column instead, which set the body copy one word per line.
Span the wrapper itself. */
.proc__row > div{grid-column:1/-1}
}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
padding:1.35rem 0;font-weight:700;font-size:1.06rem;cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.3rem;
background:currentColor;transition:transform .35s var(--ease);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
color:var(--accent-text);
}
html[data-brand="products"] .faq summary::after{color:var(--ink)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 0 1.5rem;max-width:78ch;color:var(--muted);font-size:.99rem}
.faq details[open] p{animation:fade .45s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- Spec tables ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.94rem}
.spec caption{
text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent-text);padding-bottom:.9rem;
}
html[data-brand="products"] .spec caption{color:#8f8b85}
.spec th,.spec td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{
font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink);border-bottom:2px solid var(--ink);white-space:nowrap;
}
.spec tbody th{font-weight:700;white-space:nowrap}
.spec td{color:var(--muted)}
.spec tbody tr:hover{background:var(--paper-2)}
.tint .spec tbody tr:hover{background:var(--paper-3)}
/* Wide tables scroll sideways rather than squashing. The caption is pulled out
of the scrolling box so it wraps to the viewport instead of being clipped at
the right edge, and a self-detecting scroll shadow tells the reader there is
more table to the right. The shadow only paints when there is overflow,
because the two local-attachment gradients cover the linear ones at rest. */
.spec-wrap{
overflow-x:auto;-webkit-overflow-scrolling:touch;
background:
linear-gradient(to right, var(--paper) 30%, rgba(0,0,0,0)) left center,
linear-gradient(to left, var(--paper) 30%, rgba(0,0,0,0)) right center,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right center;
background-repeat:no-repeat;
background-size:36px 100%, 36px 100%, 13px 100%, 13px 100%;
background-attachment:local, local, scroll, scroll;
}
.tint .spec-wrap{
background-image:
linear-gradient(to right, var(--paper-2) 30%, rgba(0,0,0,0)),
linear-gradient(to left, var(--paper-2) 30%, rgba(0,0,0,0)),
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0));
}
/* Kept in the accessibility tree for the table's own caption, hidden visually
because .spec-cap already shows the same words above the scroll box. */
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.spec-cap{
text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent-text);margin:0 0 .9rem;line-height:1.5;
}
html[data-brand="products"] .spec-cap{color:#8f8b85}
.spec-note{margin-top:1.1rem;font-size:.865rem;color:var(--muted);max-width:80ch}
/* ---------- Photo strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.figure{margin:0}
.figure__media{border-radius:var(--rad);overflow:hidden;aspect-ratio:3/2;background:var(--paper-3)}
.figure__media img{width:100%;height:100%;object-fit:cover}
.figure figcaption{margin-top:.85rem;font-size:.885rem;color:var(--muted);line-height:1.5}
@media (max-width:900px){.strip{grid-template-columns:1fr}}
/* ---------- People ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.25rem)}
.person figure{margin:0;border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:4/5;background:var(--paper-3)}
.person figure img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:1.15rem;margin-top:1.1rem}
.person .role{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text);margin-top:.4rem}
html[data-brand="products"] .person .role{color:#8f8b85}
.person p:last-child{font-size:.94rem;color:var(--muted);margin-top:.65rem}
@media (max-width:900px){.people{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.people{grid-template-columns:1fr}}
/* ---------- Posts (insights index) ---------- */
.posts{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
gap:1.5rem;align-items:center;padding:1.6rem 0;background:var(--paper);
text-decoration:none;color:inherit;transition:background .25s;
}
.tint .post{background:var(--paper-2)}
.post:hover{background:var(--paper-3)}
.post__meta{display:flex;flex-direction:column;gap:.35rem}
.post__meta em{font-style:normal;font-size:.685rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text)}
html[data-brand="products"] .post__meta em{color:#8f8b85}
.post__meta time{font-size:.85rem;color:var(--muted)}
.post h3{font-size:1.16rem;margin-bottom:.4rem}
.post p{font-size:.93rem;color:var(--muted)}
.post__go{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:999px;background:var(--paper-3);flex:none}
.post__go svg{width:1rem;height:1rem}
.post:hover .post__go{background:var(--accent);color:var(--accent-ink)}
@media (max-width:800px){
.post{grid-template-columns:1fr;gap:.75rem;align-items:start}
.post__go{display:none}
}
/* ---------- Contact / forms ---------- */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.25rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.83rem;font-weight:700;letter-spacing:.02em}
.field input,.field select,.field textarea{
font:inherit;font-size:.98rem;color:var(--ink);
background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
padding:.8rem .95rem;width:100%;transition:border-color .2s;
}
.field textarea{min-height:9.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.field--2{grid-template-columns:1fr}}
.form__note{font-size:.83rem;color:var(--muted)}
.form .btn{justify-self:start}
.info{display:grid;gap:1.6rem}
.info__block{display:grid;gap:.4rem}
.info__block h3{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
html[data-brand="products"] .info__block h3{color:#8f8b85}
.info__block p,.info__block a{font-size:1.02rem;color:var(--ink);text-decoration:none;line-height:1.55}
.info__block a{border-bottom:1.5px solid var(--line)}
.info__block a:hover{border-bottom-color:var(--accent)}
.info__block p{color:var(--muted)}
/* ---------- CTA ---------- */
.cta{
position:relative;overflow:hidden;border-radius:var(--rad-lg);
background:var(--ink);color:var(--paper);isolation:isolate;
}
.cta::before{
content:"";position:absolute;z-index:-1;
width:52rem;height:52rem;left:50%;top:100%;transform:translate(-50%,-52%);
background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent) 0%,transparent 62%);
pointer-events:none;
}
html[data-brand="products"] .cta::before{
background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 62%);
}
.cta__in{
position:relative;max-width:64ch;margin-inline:auto;text-align:center;
padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem);
}
.cta__in h2{font-size:var(--h-lg);margin:.7rem 0 1.15rem}
.cta__in > p:last-of-type{color:rgba(255,255,255,.75);font-size:var(--text-lg)}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.1rem}
.cta .eyebrow{color:var(--accent)}
html[data-brand="products"] .cta .eyebrow{color:rgba(255,255,255,.7)}
/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(3.25rem,6vw,4.75rem) 2rem}
.foot__grid{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
gap:clamp(1.75rem,4vw,3.25rem);
}
.foot h4{
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.5);margin-bottom:1.15rem;
}
.foot ul{display:grid;gap:.7rem}
.foot li,.foot li a{font-size:.945rem;color:rgba(255,255,255,.76);text-decoration:none;line-height:1.6}
.foot li a:hover{color:#fff}
.foot__blurb{margin-top:1.25rem;font-size:.945rem;color:rgba(255,255,255,.62);max-width:38ch;line-height:1.62}
.foot__base{
display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
margin-top:clamp(2.75rem,5vw,4rem);padding-top:1.6rem;
border-top:1px solid var(--line-dark);
font-size:.845rem;color:rgba(255,255,255,.5);
}
.foot__base a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.foot__base a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
@media (max-width:1000px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
/* ---------- Scroll reveal ---------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
html{scroll-behavior:auto}
.rise{opacity:1;transform:none}
.steps li::after{width:100%}
}
/* ---------- UK design & manufacture band ---------- */
.ukband{
display:grid;grid-template-columns:auto 1fr;gap:clamp(1.15rem,2.6vw,2rem);align-items:start;
padding:clamp(1.6rem,3.4vw,2.6rem);border:1px solid var(--line);border-radius:var(--rad);
background:var(--wash);
}
.ukband__ico{
display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:14px;flex:none;
background:var(--accent);color:var(--accent-ink);
}
.ukband__ico svg{width:1.55rem;height:1.55rem}
.ukband h2{margin:0 0 .55rem}
.ukband p{margin:0;color:var(--muted);max-width:64ch;line-height:1.65}
@media (max-width:620px){.ukband{grid-template-columns:1fr}}
/* ---------- Footer UK line ---------- */
.foot__uk{
display:flex;align-items:center;gap:.7rem;margin:0 0 clamp(2rem,4vw,3rem);
padding-bottom:clamp(1.6rem,3vw,2.2rem);border-bottom:1px solid var(--line-dark);
font-size:clamp(1rem,1.7vw,1.2rem);font-weight:700;color:#fff;letter-spacing:-.01em;
}
.foot__uk span{display:grid;place-items:center;flex:none;color:var(--accent)}
.foot__uk svg{width:1.35rem;height:1.35rem}
/* ---------- Knowledge Hub ---------- */
.kb-toc{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
}
.kb-toc a{
display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.25rem;background:#fff;
text-decoration:none;color:inherit;transition:background .25s;
}
.kb-toc a:hover{background:var(--wash)}
@media(min-width:62rem){.kb-toc{grid-template-columns:repeat(3,1fr)}}
.kb-toc b{font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.kb-toc span{font-size:.82rem;color:var(--muted)}
.kb{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.kb__art{
scroll-margin-top:6rem;background:#fff;border:1px solid var(--line);
border-radius:var(--rad);padding:clamp(1.5rem,3.4vw,2.6rem);
}
/* Same guard as .split>* and .statement>*: a wide diagram, table or long
unbroken term inside an article must shrink rather than widen the grid. */
.kb__art > *{min-width:0}
.kb__art > header{margin-bottom:1.35rem;padding-bottom:1.1rem;border-bottom:2px solid var(--ink)}
@media(min-width:62rem){
.kb__art{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem)}
.kb__art > header{
margin:0;padding:0 0 0 0;border-bottom:0;position:sticky;top:6.5rem;align-self:start;
}
.kb__art > header::after{
content:"";display:block;width:2.2rem;height:3px;margin-top:1.1rem;background:var(--accent);
}
.kb__art h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.kb__back{grid-column:2}
}
.kb__kicker{
display:inline-block;margin:0 0 .6rem;font-size:.7rem;font-weight:800;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent-text);
}
.kb__art h3{font-size:clamp(1.45rem,2.9vw,2.05rem);font-weight:900;letter-spacing:-.025em;line-height:1.12;margin:0}
.kb__meta{margin:.7rem 0 0;font-size:.82rem;color:var(--muted)}
.kb__body{max-width:72ch}
.kb__body > *{margin:0 0 1.05rem}
.kb__body > *:last-child{margin-bottom:0}
.kb__body p{color:var(--muted);line-height:1.75}
.kb__body h4{
margin-top:2rem;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.kb__body strong{color:var(--ink);font-weight:700}
.kb__body ul,.kb__body ol{padding-left:1.3rem;color:var(--muted);line-height:1.7}
.kb__body li{margin-bottom:.5rem}
.kb__body li strong{color:var(--ink)}
.kb__pull{
margin:1.6rem 0;padding:1.15rem 1.4rem;border-left:3px solid var(--accent);background:var(--wash);
border-radius:0 14px 14px 0;
}
.kb__pull p{margin:0;color:var(--ink);font-weight:600;font-size:1.02rem;line-height:1.6}
.kb__back{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.85rem}
/* ---------- Glossary ---------- */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.gloss div{padding:1.2rem 1.3rem;background:#fff}
.gloss dt{font-size:.98rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.3rem}
.gloss dd{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6}
/* ---------- Card used as a whole-block link ---------- */
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .3s,transform .4s}
a.card,a.card *{text-decoration:none}
a.card:hover{border-color:var(--accent);transform:translateY(-3px)}
a.card:hover h3{color:var(--accent-text)}
a.card h3{transition:color .25s}
a.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a.card .card__body{flex:1}
/* ============================================================ GLOSSARY PAGES
The silicone glossary lives on the group site only: one page per term, linked
from all five sites. See terms/__init__.py for why it is not duplicated. */
/* Inline jargon link. Deliberately quieter than a normal link, and dotted
rather than solid, so a technical paragraph with four of them still reads as
prose instead of turning into a wall of blue. */
.jl{color:inherit;text-decoration:none;border-bottom:1px dotted var(--accent);
padding-bottom:.02em;transition:background .18s,border-color .18s}
.jl:hover,.jl:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent);
border-bottom-style:solid}
html[data-brand="products"] .jl{border-bottom-color:#8f8b85}
.dark .jl{border-bottom-color:var(--accent-on-dark)}
.shell.narrow{max-width:50rem}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 0;
font-size:.78rem;letter-spacing:.01em;color:var(--muted);margin-bottom:1.6rem}
.crumb a,.crumb span{color:inherit;text-decoration:none;min-width:0}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb>*+*::before{content:"/";margin:0 .5rem;color:#c9c4bd;text-decoration:none}
.crumb [aria-current]{color:var(--ink);font-weight:600}
.term__short{font-size:1.16rem;line-height:1.55;font-weight:500;margin:1rem 0 0;
padding:1rem 0 0;border-top:2px solid var(--accent);max-width:38rem}
html[data-brand="products"] .term__short{border-top-color:#333}
/* Long-form article body. Only place on these sites with running prose at this
length, so it gets its own measure and rhythm. */
.prose{margin-top:2.4rem;max-width:40rem}
.prose>p{font-size:1.02rem;line-height:1.75;margin:0 0 1.15rem;color:#333}
.prose>p:last-child{margin-bottom:0}
.prose h2{font-size:1.42rem;line-height:1.25;letter-spacing:-.02em;
margin:2.9rem 0 .9rem;padding-top:.2rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.06rem;line-height:1.35;margin:2rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.15rem}
.prose li{font-size:.99rem;line-height:1.7;margin-bottom:.55rem;color:#333}
.prose li>b{color:var(--ink)}
.prose a[href^="http"]{color:var(--ink);text-decoration:underline;
text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.18em}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);
vertical-align:top}
.prose th{font-weight:700;background:var(--tint)}
.term__faq{margin-top:3.4rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.term__faq>h2{font-size:1.42rem;letter-spacing:-.02em;margin:0 0 1.2rem}
/* Related terms. min-width:0 on the grid children stops a long term name from
forcing the whole grid wider than the shell on narrow viewports. */
.rel{margin-top:3.4rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.rel__h{font-size:1.1rem;margin:0 0 1.1rem}
.rel__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.rel__list>li{min-width:0}
.rel__list a{display:block;min-width:0;padding:.95rem 1.05rem;background:#fff;
border:1px solid var(--line);border-left:3px solid var(--accent);
text-decoration:none;color:inherit;height:100%;transition:background .18s}
.rel__list a:hover,.rel__list a:focus-visible{background:var(--paper-2)}
.rel__list b{display:block;font-size:.94rem;letter-spacing:-.01em;margin-bottom:.28rem}
.rel__list span{display:block;font-size:.82rem;line-height:1.55;color:var(--muted)}
/* Glossary index */
.gloss2{margin-top:2.6rem;display:grid;gap:2.6rem}
.gloss2__cat{min-width:0}
.gloss2__cat>h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--muted);font-weight:700;margin:0 0 1rem;padding-bottom:.7rem;
border-bottom:2px solid var(--accent)}
html[data-brand="products"] .gloss2__cat>h2{border-bottom-color:#333}
html[data-brand="products"] .gloss2__list a,
html[data-brand="products"] .rel__list a{border-left-color:#333}
.gloss2__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.gloss2__list>li{min-width:0}
.gloss2__list a{display:block;min-width:0;height:100%;padding:1rem 1.1rem;background:#fff;
border:1px solid var(--line);border-left:3px solid var(--accent);
text-decoration:none;color:inherit;transition:background .18s}
.gloss2__list a:hover,.gloss2__list a:focus-visible{background:var(--tint)}
.gloss2__list b{display:block;font-size:.97rem;letter-spacing:-.015em}
.gloss2__list i{display:block;font-style:normal;font-size:.76rem;color:var(--muted);
margin-top:.15rem;letter-spacing:.01em}
.gloss2__list span{display:block;font-size:.84rem;line-height:1.55;color:var(--muted);
margin-top:.4rem}
@media(max-width:620px){
.term__short{font-size:1.06rem}
.prose h2{font-size:1.24rem;margin-top:2.3rem}
.prose>p,.prose li{font-size:.96rem}
}
/* Mini-glossary entries now link through to their own definition page. */
.gloss dt a{color:inherit;text-decoration:none;display:flex;align-items:baseline;
gap:.4rem;min-width:0}
.gloss dt a:hover,.gloss dt a:focus-visible{color:var(--accent)}
html[data-brand="products"] .gloss dt a:hover{color:#000}
.gloss__go{font-weight:400;opacity:0;transform:translateX(-.2rem);
transition:opacity .18s,transform .18s;flex:0 0 auto}
.gloss dt a:hover .gloss__go,.gloss dt a:focus-visible .gloss__go{opacity:1;transform:none}
.gloss__all{margin-top:1.6rem}
/* ------------------------------------------------ term page: contents sidebar
A thousand-word technical page on a 1440 viewport otherwise leaves a very
wide empty column beside a 40rem reading measure. The contents rail fills it
and, more usefully, lets a buyer jump straight to the section they came for. */
.termwrap{display:grid;gap:3rem;align-items:start;
grid-template-columns:minmax(0,1fr) 15rem}
.termwrap>.termmain{min-width:0}
.toc{position:sticky;top:6rem;min-width:0;font-size:.84rem;
border-left:2px solid var(--line);padding-left:1.1rem}
.toc h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;
color:var(--muted);font-weight:700;margin:0 0 .8rem}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:.6rem;min-width:0}
.toc a{color:var(--muted);text-decoration:none;line-height:1.45;display:block;
transition:color .16s}
.toc a:hover,.toc a:focus-visible{color:var(--ink)}
.prose h2{scroll-margin-top:5.5rem}
@media(max-width:980px){
.termwrap{grid-template-columns:minmax(0,1fr);gap:0}
.toc{display:none}
}
/* Lead photograph on a glossary term page */
.term__fig{margin:0 0 var(--sp-6);max-width:40rem}
.term__fig img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--wash)}
.term__fig figcaption{margin-top:var(--sp-2);font-size:var(--text-xs);line-height:1.5;color:var(--ink-3)}
@media (max-width:760px){.term__fig{margin-bottom:var(--sp-5)}}
/* ---------------------------------------------------- diagrams and infographics
Drawn programmatically in diagrams.py. The SVG inherits --accent so the same
diagram is green on Mouldings and amber on Culinary. */
.dia{margin:0;display:block}
.dia+.dia{margin-top:2.4rem}
.dia__box{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:1.6rem 1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.dark .dia__box{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.dia__svg{display:block;width:100%;height:auto;min-width:560px;
font-family:inherit;font-variant-numeric:tabular-nums}
.dia--wide .dia__svg{min-width:620px}
.dia figcaption{
margin:.9rem 0 0;font-size:var(--text-sm);color:var(--muted);line-height:1.55;
max-width:62ch;
}
.dark .dia figcaption{color:var(--muted-dark)}
/* On dark sections the diagram sits on its own light card so the ink strokes
stay legible. Only the caption inverts. */
.dark .dia__box{background:var(--paper);border-color:transparent}
.diagrid{display:grid;gap:2.2rem}
@media(min-width:900px){.diagrid--2{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
.dia__box{padding:1.1rem .9rem;border-radius:11px}
.dia__box::after{content:"";display:block}
}
.dia__hint{
display:none;margin:.5rem 0 0;font-size:var(--text-xs);color:var(--muted);
letter-spacing:.04em;
}
@media(max-width:700px){.dia__hint{display:block}}
/* ------------------------------------------------------------ live calculators */
.calc{
background:var(--paper);border:1px solid var(--line);border-radius:16px;
padding:1.9rem 1.8rem;display:grid;gap:1.7rem;
}
.dark .calc{background:var(--paper);color:var(--ink)}
@media(min-width:940px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:2.6rem}}
.calc__fields{display:grid;gap:1.25rem;align-content:start;min-width:0}
/* Grid items default to min-width:auto, which let a long hint or a slider row
set the field wider than the column and pushed the calculator off screen. */
.calc__f{display:grid;gap:.4rem;min-width:0}
.calc__f > *{min-width:0}
.calc__f label{font-size:var(--text-sm);font-weight:650;color:var(--ink)}
.calc__f .calc__hint{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
.calc__row{display:flex;align-items:center;gap:.85rem;min-width:0}
/* A range input carries a large intrinsic min-content width in Chromium, so
flex:1 1 auto alone still floored the row at about 376px and pushed the
calculator past a 390px viewport. width:0 lets it collapse properly. */
.calc__row input[type=range]{flex:1 1 0;width:0;min-width:0;accent-color:var(--accent)}
.calc__num{
flex:0 1 7.4rem;min-width:0;width:7.4rem;font:inherit;font-variant-numeric:tabular-nums;
padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;
background:var(--paper-2);color:var(--ink);text-align:right;
}
/* The fixed 7.4rem basis pushed the slider row past the viewport on small
phones. Let the box shrink instead of forcing horizontal scroll. */
@media (max-width:430px){
.calc__row{gap:.55rem}
.calc__num{flex:0 1 5.6rem;width:5.6rem;padding:.5rem .4rem}
}
.calc__num:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.calc__seg{display:flex;flex-wrap:wrap;gap:.45rem}
.calc__seg button{
font:inherit;font-size:var(--text-sm);padding:.42rem .85rem;border-radius:999px;
border:1px solid var(--line);background:var(--paper-2);color:var(--muted);
cursor:pointer;transition:background .16s,color .16s,border-color .16s;
}
.calc__seg button[aria-pressed=true]{
background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
font-weight:650;
}
.calc__out{
background:var(--ink);color:var(--paper);border-radius:12px;padding:1.5rem 1.5rem;
display:grid;gap:1.1rem;align-content:start;min-width:0;
}
.calc__big{display:grid;gap:.25rem}
.calc__big b{
font-size:clamp(1.9rem,5.4vw,2.7rem);font-weight:700;letter-spacing:-.02em;
color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.04;
overflow-wrap:anywhere;
}
.calc__big span{font-size:var(--text-sm);color:rgba(255,255,255,.72)}
.calc__lines{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.calc__lines li{
display:flex;justify-content:space-between;gap:1rem;font-size:var(--text-sm);
border-top:1px solid rgba(255,255,255,.13);padding-top:.5rem;
}
.calc__lines li:first-child{border-top:0;padding-top:0}
.calc__lines span{color:rgba(255,255,255,.66)}
.calc__lines b{font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.calc__note{
margin:0;font-size:var(--text-xs);color:rgba(255,255,255,.6);line-height:1.55;
}
.calc__work{
margin:0;font-size:var(--text-sm);color:var(--muted);line-height:1.6;
background:var(--paper-2);border-left:3px solid var(--accent);
border-radius:0 8px 8px 0;padding:.85rem 1rem;font-variant-numeric:tabular-nums;
}
.calc__work code{font-size:.94em;background:none;padding:0}
/* The output panel should hug its content rather than stretch to the height of
the tallest field column. */
.calc__out{align-self:start}
/* A diagram followed immediately by a table or another block needs breathing
room, otherwise the figcaption sits on top of the next caption. */
.dia{margin-bottom:2.4rem}
.dia:last-child{margin-bottom:0}
.dia+.dia{margin-top:0}
/* ---------- Utility bar ---------- */
/* Above the sticky nav, so it scrolls away. Its whole job is to put a tappable
phone number and email on every page, because .nav__cta is display:none below
1180px and a phone previously had no contact route above the fold. */
.util{background:var(--ink-2);color:rgba(255,255,255,.72);
border-bottom:1px solid var(--line-dark);font-size:.8rem}
.util__in{display:flex;align-items:center;gap:.35rem 1.4rem;
min-height:40px;flex-wrap:wrap;justify-content:flex-end}
.util__loc{margin-right:auto;color:rgba(255,255,255,.5)}
.util__a{display:inline-flex;align-items:center;gap:.45rem;color:inherit;
text-decoration:none;font-weight:500;transition:color .2s;min-width:0}
.util__a:hover{color:#fff}
.util__a svg{width:.95rem;height:.95rem;display:block;color:var(--accent);flex:none}
html[data-brand="products"] .util__a svg{color:#b8b3ab}
@media (max-width:760px){
/* The location note is the first thing to go. The two contact links are the
point of the bar, so they get the full width and stay side by side. */
.util__loc{display:none}
.util__in{justify-content:space-between;gap:.3rem .8rem}
.util{font-size:.74rem}
.util__a{padding:.3rem 0}
}
@media (max-width:430px){
/* Below this the email address wraps mid-word against the phone number, so the
two links stack and each takes a full row. */
.util__in{flex-direction:column;align-items:stretch;padding-top:.15rem;padding-bottom:.15rem}
.util__a{justify-content:flex-start}
}
/* ---------- Contact band ---------- */
/* On every page except contact.html, immediately above the footer. Plumbing,
not marketing: cta() is the persuasive block, this is the one that is always
in the same place so a reader who decides mid-page never hunts for the nav. */
.cband{background:var(--ink);color:var(--paper);padding:2.6rem 0}
.cband__in{display:flex;align-items:center;gap:1.6rem 2.4rem;flex-wrap:wrap}
.cband__txt{flex:1 1 22rem;min-width:0}
.cband__txt h2{font-size:var(--h-md);margin:0 0 .45rem;letter-spacing:-.02em}
.cband__txt p{margin:0;color:rgba(255,255,255,.68);font-size:var(--text-base);max-width:46ch}
.cband__acts{display:flex;flex-wrap:wrap;gap:.7rem;flex:none}
/* Same ghost-on-dark correction the .cta block needs, for the same reason: the
default ghost foreground is the ink colour and vanishes on a dark band. */
.cband .btn--ghost{--btn-fg:var(--paper);--btn-bd:rgba(255,255,255,.34)}
.cband .btn--ghost .btn__dot{background:rgba(255,255,255,.14);color:var(--paper)}
.cband .btn--ghost:hover{--btn-bd:rgba(255,255,255,.75)}
.cband .btn--ghost:hover .btn__dot{background:var(--accent);color:var(--accent-ink)}
@media (max-width:620px){
.cband{padding:2rem 0}
.cband__acts{width:100%}
.cband__acts .btn{flex:1 1 100%;justify-content:space-between}
}
/* ---------- Project cards and case studies ---------- */
.pjgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media (max-width:980px){.pjgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pjgrid{grid-template-columns:1fr}}
.pj{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--rad-lg);overflow:hidden;min-width:0;
transition:border-color .25s,transform .25s,box-shadow .25s}
.pj:hover{border-color:var(--accent);transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,.09)}
.pj__img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2)}
.pj__in{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;
flex:1 1 auto;min-width:0}
.pj__sector{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);margin:0}
html[data-brand="products"] .pj__sector{color:#5d5d5d}
.pj__in h3{font-size:var(--text-lg);margin:0;letter-spacing:-.015em;line-height:1.25}
.pj__in h3 a{color:inherit;text-decoration:none}
.pj__in h3 a:hover{text-decoration:underline}
.pj__in p{margin:0;color:var(--muted);font-size:.94rem}
.pj__meta{margin:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;list-style:none;padding:0;
font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.8rem;
margin-top:auto}
.pj__meta b{color:var(--ink);font-weight:600}
.pj .link-more{margin-top:.2rem}
/* The at-a-glance box at the top of a case study. */
.pjfact{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad-lg);
padding:1.5rem 1.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
@media (max-width:760px){.pjfact{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.pjfact{grid-template-columns:1fr}}
.pjfact>div{min-width:0}
.pjfact dt{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);margin:0 0 .3rem}
.pjfact dd{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
overflow-wrap:break-word}
/* Enquiry form status. The live region is hidden until the script writes to it,
so a visitor with no JavaScript never sees an empty box. */
.form__msg{font-size:.9rem;line-height:1.5;padding:.85rem 1rem;border-radius:var(--rad);
border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);margin:0}
.form__msg[data-state="ok"]{border-color:var(--accent);background:var(--accent-soft, var(--paper-2));color:var(--ink)}
.form__msg[data-state="bad"]{border-color:#c8443a;background:#fdf3f2;color:#7d241c}
.field [aria-invalid="true"]{border-color:#c8443a}
.form .btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
/* Thank-you page: three-step variant of .steps, and its button rows. */
.steps--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.steps--3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.steps--3{grid-template-columns:1fr}}
.tyacts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}