/* ==========================================================================
Specialty Steel Treating — 2026 redesign
Tokens and values are lifted from the Claude Design canvas so the built
site matches the comp rather than approximating it.
========================================================================== */
:root{
--red:#EF4136;
--red-dark:#D62B1F;
--red-hot:#FF8A3A;
--red-hover:#c9291f;
--ink:#0E0E0E;
--ink-deep:#0B0B0B;
--ink-soft:#2A2E33;
--body:#54595F;
--body-soft:#63686E;
--muted:#8A8F95;
--line:#E7E8EA;
--line-soft:#EDEEEF;
--line-hard:#D7D9DB;
--line-rail:#DFE0E2;
--surface:#fff;
--surface-alt:#F5F5F5;
--ease:cubic-bezier(.16,1,.3,1);
--wrap:1320px;
--gut:clamp(20px,4.5vw,40px);
--head-h:76px;
--head-h-lg:104px;
--radius:16px;
--radius-sm:8px;
}
/* ---------- reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--surface);
color:var(--ink);
font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover)}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--red);color:#fff}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0}
.sst-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sst-skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.sst-skip:focus{left:0;color:#fff}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:3px solid var(--red);outline-offset:3px;border-radius:4px;
}
/* ---------- keyframes (from the comp) ---------- */
@keyframes sstKB{0%{transform:scale(1.04)}100%{transform:scale(1.16)}}
@keyframes sstMarq{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes sstBob{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(7px);opacity:1}}
@keyframes sstPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.2);opacity:0}100%{opacity:0}}
@keyframes sstSpin{to{transform:rotate(360deg)}}
@keyframes sstFlame{0%,100%{transform:rotate(-45deg) scale(1,1)}22%{transform:rotate(-45deg) scale(.93,1.09)}44%{transform:rotate(-45deg) scale(1.05,.95)}68%{transform:rotate(-45deg) scale(.97,1.05)}}
@keyframes sstFlameCore{0%,100%{transform:rotate(-45deg) scale(1);opacity:.95}30%{transform:rotate(-45deg) scale(.84);opacity:.72}60%{transform:rotate(-45deg) scale(1.06);opacity:1}}
@keyframes sstFlameGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.22)}}
@keyframes sstMegaEmber{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(-260px);opacity:0}}
@keyframes sstMegaHeat{0%,100%{opacity:.55;transform:translateX(-50%) scaleY(1)}50%{opacity:.9;transform:translateX(-50%) scaleY(1.18)}}
/* ---------- layout ---------- */
.sst-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.sst-sec{padding:clamp(56px,9vw,104px) 0 clamp(60px,9.5vw,112px);position:relative}
.sst-sec--tight{padding:clamp(52px,8vw,88px) 0 clamp(56px,8.5vw,92px)}
.sst-sec--alt{background:var(--surface-alt)}
.sst-sec--dark{background:var(--ink-deep);color:#fff}
.sst-sec--clip{overflow:hidden}
/* ---------- type ---------- */
.sst-h1{font-size:clamp(33px,5.72vw,85.8px);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:#fff}
.sst-h2{font-size:clamp(37.4px,4.4vw,59.4px);font-weight:700;letter-spacing:-.035em;line-height:1.04;color:var(--ink)}
.sst-h2--sm{font-size:clamp(35.2px,3.96vw,55px);line-height:1.06}
/* About's “Who we are” and the two industry headings each run on their own
scale in the comp, not on --sm. */
.sst-h2--about{font-size:clamp(33px,3.74vw,50.6px);line-height:1.06}
.sst-h2--indben{font-size:clamp(35.2px,4.4vw,59.4px);line-height:1.06}
.sst-h3{font-size:clamp(28.6px,2.86vw,39.6px);font-weight:700;letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
.sst-sec--dark .sst-h2,.sst-sec--dark .sst-h3{color:#fff}
.sst-kicker{font-size:12.7px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.sst-lead{font-size:23.1px;line-height:1.62;color:var(--ink-soft);font-weight:500;letter-spacing:-.005em;text-wrap:pretty}
.sst-lead p{margin:0 0 18px}
.sst-lead p:last-child{margin-bottom:0}
.sst-body{font-size:18.2px;line-height:1.78;color:var(--body);text-wrap:pretty}
.sst-body p{margin:0 0 22px}
.sst-body p:last-child{margin-bottom:0}
.sst-body a{border-bottom:1px solid rgba(239,65,54,.35);font-weight:600;padding-bottom:1px;transition:border-color .25s}
.sst-body a:hover{border-color:var(--red)}
.sst-sec--dark .sst-body,.sst-sec--dark .sst-lead{color:rgba(255,255,255,.74)}
.sst-head{margin-bottom:56px}
.sst-head--center{text-align:center}
.sst-head--center .sst-lead,.sst-head--center .sst-body{margin-left:auto;margin-right:auto}
.sst-head .sst-lead,.sst-head .sst-body{margin-top:20px;max-width:62ch}
/* ---------- buttons ---------- */
.sst-btn{
display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
padding:17px 32px;border:0;cursor:pointer;
font-size:13.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
border-radius:var(--radius-sm);
background:var(--red);color:#fff;
box-shadow:0 10px 34px rgba(239,65,54,.34);
transition:transform .4s var(--ease),box-shadow .4s,background .25s,color .25s;
}
.sst-btn:hover{color:#fff;background:var(--red-hover);transform:translateY(-2px);box-shadow:0 16px 40px rgba(239,65,54,.42)}
.sst-btn--ink{background:var(--ink);box-shadow:none}
.sst-btn--ink:hover{background:#000;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.sst-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-hard);box-shadow:none}
.sst-btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.sst-sec--dark .sst-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.sst-sec--dark .sst-btn--ghost:hover{background:#fff;color:var(--ink)}
.sst-btn--sm{padding:14px 24px;font-size:12.7px;letter-spacing:.14em;border-radius:8px;box-shadow:0 8px 22px rgba(239,65,54,.26)}
.sst-arrow{display:inline-block;transition:transform .4s var(--ease)}
[data-fx]:hover .sst-arrow{transform:translateX(5px)}
.sst-textlink{
display:inline-flex;align-items:center;gap:9px;
color:var(--red);font-size:12.7px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
/* ==========================================================================
Header
========================================================================== */
.sst-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:9999;transition:width .12s linear}
/* A solid panel slides behind the bar while the mega menu is open, so the
translucent header does not show the page through it. */
.sst-megaveil{
position:absolute;left:0;right:0;top:0;height:100%;background:#0A0A0A;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .5s var(--ease),visibility .5s;
}
.sst-header.is-mega .sst-megaveil{opacity:1;visibility:visible}
.sst-header{
position:sticky;top:0;z-index:900;background:transparent;
border-bottom:1px solid rgba(255,255,255,0);
transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,box-shadow .4s ease;
margin-bottom:calc(var(--head-h) * -1);
}
.sst-header__inner{
position:relative;z-index:2;
max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:var(--head-h);
display:flex;align-items:center;justify-content:space-between;gap:28px;
transition:height .4s var(--ease);
}
@media (min-width:760px){
.sst-header__inner{height:var(--head-h-lg)}
.sst-header{margin-bottom:calc(var(--head-h-lg) * -1)}
}
.sst-header.is-stuck{background:rgba(10,10,10,.92);backdrop-filter:blur(18px);border-bottom-color:rgba(255,255,255,.09);box-shadow:0 12px 34px rgba(0,0,0,.28)}
.sst-header.is-stuck .sst-header__inner{height:64px}
@media (min-width:760px){.sst-header.is-stuck .sst-header__inner{height:78px}}
.sst-header.is-stuck .sst-logo{height:34px}
@media (min-width:760px){.sst-header.is-stuck .sst-logo{height:42px}}
/* Inner pages start on a light band, so the bar needs an opaque state from
the top rather than only after scrolling. */
body:not(.sst-has-hero) .sst-header{background:rgba(10,10,10,.96);border-bottom-color:rgba(255,255,255,.09);position:sticky;margin-bottom:0}
.sst-logo{display:block;height:40px;width:auto;transition:height .4s var(--ease)}
@media (min-width:760px){.sst-logo{height:52px}}
.sst-header__brand{display:block;flex:0 0 auto}
.sst-nav{display:flex;align-items:center;gap:0;flex:1 1 auto;justify-content:center}
.sst-nav__sep{width:1px;height:16px;background:rgba(255,255,255,.28);flex:none}
.sst-nav__link{
position:relative;color:rgba(255,255,255,.86);font-size:16.5px;font-weight:500;padding:10px 14px;
background:none;border:0;cursor:pointer;transition:color .25s;
display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.sst-nav__link:hover,.sst-nav__link.is-active{color:#fff}
.sst-nav__rule{position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sst-nav__link:hover .sst-nav__rule,.sst-nav__link.is-active .sst-nav__rule{transform:scaleX(1)}
.sst-nav__chev{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease)}
.sst-nav__link[aria-expanded="true"] .sst-nav__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.sst-headphone{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.sst-phone{display:flex;align-items:center;gap:13px;transition:opacity .25s}
.sst-phone:hover{opacity:.82}
.sst-phone__txt{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.sst-phone__kicker{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.sst-phone__num{font-size:17.6px;font-weight:700;letter-spacing:-.01em;color:#fff}
.sst-headphone__sep{width:1px;height:32px;background:rgba(255,255,255,.16)}
/* the animated flame glyph beside the phone number */
.sst-flame{flex:none;position:relative;display:block;width:18px;height:22px}
.sst-flame i{position:absolute;display:block}
.sst-flame .g{left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,70,.55),transparent 66%);animation:sstFlameGlow 2.6s ease-in-out infinite}
.sst-flame .b{left:50%;bottom:1px;width:13px;height:13px;margin-left:-6.5px;border-radius:0 50% 50% 50%;background:linear-gradient(135deg,var(--red-hot) 0%,var(--red) 58%,var(--red-dark) 100%);transform:rotate(-45deg);transform-origin:50% 60%;animation:sstFlame 1.6s ease-in-out infinite}
.sst-flame .c{left:50%;bottom:2.5px;width:6.5px;height:6.5px;margin-left:-3.25px;border-radius:0 50% 50% 50%;background:linear-gradient(135deg,#FFE7A8 0%,#FFB347 100%);transform:rotate(-45deg);transform-origin:50% 60%;animation:sstFlameCore 1.6s ease-in-out infinite}
.sst-burger{display:none;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:0;flex-direction:column;gap:5px}
.sst-burger span{display:block;width:24px;height:2px;background:#fff}
/* ---------- mega menu ---------- */
.sst-mega{
position:absolute;left:0;right:0;top:100%;overflow:hidden;
background:#0A0A0A;box-shadow:0 40px 80px rgba(0,0,0,.5);
opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
transition:opacity .5s var(--ease),clip-path .72s var(--ease),visibility .5s;
}
.sst-mega.is-open{opacity:1;visibility:visible;clip-path:inset(0 0 0% 0)}
/* the furnace glow rising from the foot of the panel */
.sst-mega__heat{
position:absolute;left:50%;bottom:-14%;width:120%;height:56%;
transform:translateX(-50%);transform-origin:50% 100%;
background:radial-gradient(ellipse at 50% 100%,rgba(255,138,58,.3) 0%,rgba(239,65,54,.18) 36%,rgba(239,65,54,.05) 62%,transparent 80%);
filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .8s ease;
}
.sst-mega.is-open .sst-mega__heat{opacity:1;animation:sstMegaHeat 4.6s ease-in-out infinite}
.sst-mega__sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sst-mega__pane{display:none;position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:52px var(--gut) 60px}
.sst-mega__pane.is-active{display:block}
.sst-mega__title{font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.sst-mega__bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
[data-megapane="industries"] .sst-mega__bar{margin-bottom:24px}
.sst-mega__bar .sst-mega__title{margin-bottom:0}
.sst-mega__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 40px}
/* Industries pane: six photo tiles, 3×2. */
.sst-mega__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sst-mega__item.sst-mega__tile{position:relative;display:block;aspect-ratio:16/7;padding:0;border-radius:14px;overflow:hidden;background:#141414;color:#fff}
.sst-mega__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.6);transition:transform 1s var(--ease),filter .5s}
.sst-mega__tile:hover img{transform:scale(1.07)}
.sst-mega__tilescrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,0) 30%,rgba(8,8,8,.85) 100%)}
.sst-mega__tilefoot{position:absolute;left:20px;right:20px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;font-weight:700;letter-spacing:-.015em}
.sst-mega__tilefoot .sst-arrow{transition:transform .35s var(--ease)}
.sst-mega__tile:hover .sst-mega__tilefoot .sst-arrow{transform:translateX(6px)}
.sst-mega__item{
display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);
font-size:16px;font-weight:500;padding:9px 0;
opacity:0;transform:translateY(8px);
transition:opacity .4s ease,transform .4s ease,color .2s;
}
.sst-mega.is-open .sst-mega__pane.is-in .sst-mega__item{opacity:1;transform:none}
.sst-mega__item:hover{color:#fff}
.sst-mega__item .sst-arrow{color:var(--red)}
.sst-mega__all{
display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);
font-size:12.1px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease,color .2s;
}
.sst-mega.is-open .sst-mega__pane.is-in .sst-mega__all{opacity:1;transform:none}
.sst-mega__all:hover{color:#fff}
.sst-mega__all .sst-arrow{color:var(--red)}
/* ---------- mobile nav ---------- */
.sst-mobilenav{
display:none;position:fixed;inset:0;z-index:1000;
background:rgba(10,10,10,.98);backdrop-filter:blur(20px);
padding:20px clamp(20px,5vw,28px) 40px;overflow-y:auto;
opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.sst-mobilenav.is-open{opacity:1;visibility:visible}
.sst-mobilenav__top{display:flex;justify-content:flex-end}
.sst-mobilenav__close{display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;font-size:33px;line-height:1;cursor:pointer;width:46px;height:46px;padding:0}
.sst-mobilenav__list{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.sst-mobilenav__list a{color:#fff;font-size:26.4px;font-weight:600;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sst-mobilenav__list .sst-btn{margin-top:24px;justify-content:center;border-bottom:0}
.sst-mobilenav__list a[aria-current="page"]{color:var(--red)}
.sst-mobilenav__row{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.1)}
.sst-mobilenav__row a{flex:1 1 auto;border-bottom:0}
.sst-mobilenav__tog{
flex:0 0 56px;display:flex;align-items:center;justify-content:center;background:none;border:0;
border-left:1px solid rgba(255,255,255,.1);color:#fff;cursor:pointer;
}
.sst-mobilenav__tog span{
display:block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease);
}
.sst-mobilenav__tog[aria-expanded="true"] span{transform:translateY(3px) rotate(-135deg)}
.sst-mobilenav__sub{display:flex;flex-direction:column;padding:8px 0 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.sst-mobilenav__sub[hidden]{display:none}
.sst-mobilenav__k{margin:14px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sst-mobilenav__list .sst-mobilenav__sub a{font-size:17px;font-weight:500;color:rgba(255,255,255,.78);padding:9px 0;border-bottom:0}
/* ==========================================================================
Hero
The comp gives almost every route its own hero: minimum height, padding,
headline clamp and image treatment all differ. Each is a modifier here so
the templates only have to name the variant.
========================================================================== */
.sst-hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--ink-deep)}
.sst-hero__bg{position:absolute;inset:-8% 0;will-change:transform}
.sst-hero__bg > div{width:100%;height:100%;will-change:transform}
.sst-hero__bg img{width:100%;height:100%;object-fit:cover;animation:sstKB 26s ease-in-out infinite alternate}
.sst-hero__scrim{position:absolute;inset:0}
.sst-hero__inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;will-change:transform,opacity}
.sst-hero__line{display:block;overflow:hidden;padding-bottom:.06em}
.sst-hero__inner > .sst-hero__line:last-child{padding-bottom:6px}
.sst-hero__line > span{display:block}
.sst-hero--center{text-align:center}
.sst-hero--center .sst-h1{margin:20px 0 0}
/* --- home --- */
.sst-hero--home{min-height:clamp(360px,52vh,760px)}
.sst-hero--home .sst-hero__bg{will-change:transform}
.sst-hero--home .sst-hero__bg img{animation-duration:24s}
.sst-hero--home .sst-hero__inner{padding:clamp(116px,17vw,170px) var(--gut) clamp(52px,8.5vw,200px)}
.sst-hero--home .sst-hero__scrim{background:linear-gradient(105deg,rgba(6,6,6,.88) 0%,rgba(8,8,8,.7) 42%,rgba(10,10,10,.42) 100%)}
.sst-hero--home .sst-h1{font-size:clamp(33px,5.72vw,85.8px);line-height:1.04;letter-spacing:-.035em}
.sst-hero__scrim2{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%)}
.sst-hero__glow{
position:absolute;left:50%;bottom:-32%;width:150%;height:82%;
transform:translateX(-50%) scale(.85);transform-origin:50% 100%;opacity:0;
background:radial-gradient(ellipse at 50% 100%,rgba(255,138,58,.5) 0%,rgba(239,65,54,.34) 34%,rgba(239,65,54,.1) 58%,transparent 78%);
filter:blur(6px);pointer-events:none;
}
.sst-hero__embers{
position:absolute;inset:0;opacity:0;pointer-events:none;
background-image:radial-gradient(circle,rgba(255,176,110,.9) 0 1.4px,transparent 1.6px),radial-gradient(circle,rgba(255,138,58,.75) 0 1.1px,transparent 1.4px);
background-size:140px 190px,210px 260px;background-position:0 0,70px 120px;
}
/* --- about --- */
.sst-hero--about{min-height:clamp(360px,52vh,520px)}
.sst-hero--about .sst-hero__inner{padding:clamp(116px,17vw,172px) var(--gut) clamp(52px,8.5vw,88px)}
.sst-hero--about .sst-hero__bg img{filter:brightness(.48)}
.sst-hero--about .sst-hero__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.72) 100%)}
.sst-hero--about .sst-h1{font-size:clamp(37.4px,5.28vw,77px);line-height:1.04;letter-spacing:-.04em}
/* --- services archive --- */
.sst-hero--services{min-height:clamp(360px,52vh,520px)}
.sst-hero--services .sst-hero__inner{padding:clamp(116px,17vw,180px) var(--gut) clamp(52px,8.5vw,90px)}
.sst-hero--services .sst-hero__bg img{filter:brightness(.5)}
.sst-hero--services .sst-hero__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,.42) 45%,rgba(0,0,0,.72) 100%)}
.sst-hero--services .sst-h1{font-size:clamp(46.2px,7.04vw,99px);line-height:1.02;letter-spacing:-.04em}
/* --- single service --- */
.sst-hero--service{min-height:clamp(360px,52vh,520px)}
.sst-hero--service .sst-hero__inner{padding:clamp(116px,17vw,180px) var(--gut) clamp(52px,8.5vw,90px)}
.sst-hero--service .sst-hero__bg img{filter:grayscale(.4) brightness(.5)}
.sst-hero--service .sst-hero__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.7) 100%)}
.sst-hero--service .sst-h1{font-size:clamp(44px,6.6vw,94.6px);line-height:1.02;letter-spacing:-.04em}
/* --- industries --- */
.sst-hero--industry{min-height:clamp(360px,52vh,560px)}
.sst-hero--industry .sst-hero__inner{padding:clamp(116px,17vw,190px) var(--gut) clamp(52px,8.5vw,100px)}
.sst-hero--industry .sst-hero__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.66) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.72) 100%)}
.sst-hero--industry .sst-h1{font-size:clamp(44px,6.6vw,94.6px);line-height:1.02;letter-spacing:-.04em}
/* --- divisions --- */
.sst-hero--divisions{min-height:clamp(360px,52vh,520px)}
.sst-hero--divisions .sst-hero__inner{padding:clamp(116px,17vw,180px) var(--gut) clamp(52px,8.5vw,90px)}
.sst-hero--divisions .sst-hero__bg img{filter:brightness(.55)}
.sst-hero--divisions .sst-hero__scrim{background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.72) 100%)}
.sst-hero--divisions .sst-h1{font-size:clamp(50.6px,7.04vw,99px);line-height:1;letter-spacing:-.04em}
/* --- careers and quote: no photograph, a lit charcoal panel instead --- */
/* Careers gained a photograph in the September export; Quote keeps the lit
charcoal panel it always had. */
.sst-hero--careers,.sst-hero--quote{min-height:clamp(360px,52vh,430px)}
.sst-hero--careers{background:var(--ink-deep)}
.sst-hero--quote{background:#2C2C2C}
.sst-hero--careers .sst-hero__inner,.sst-hero--quote .sst-hero__inner{padding:clamp(116px,17vw,170px) var(--gut) clamp(52px,8.5vw,84px)}
.sst-hero--careers .sst-hero__bg img{filter:brightness(.58) saturate(.85)}
.sst-hero--careers .sst-hero__scrim{background:linear-gradient(to bottom,rgba(6,6,6,.68) 0%,rgba(6,6,6,.38) 45%,rgba(6,6,6,.78) 100%)}
.sst-hero--quote .sst-hero__scrim{
background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.07),transparent 60%);
}
.sst-hero--careers .sst-h1{font-size:clamp(41.8px,6.6vw,94.6px);line-height:1.02;letter-spacing:-.04em}
.sst-hero--quote .sst-h1{font-size:clamp(44px,6.16vw,88px);line-height:1.02;letter-spacing:-.04em}
/* --- contact: the plant map runs behind the scrim --- */
.sst-hero--contact{min-height:clamp(360px,52vh,620px);align-items:flex-start}
.sst-hero--contact .sst-hero__inner{padding:clamp(116px,17vw,176px) var(--gut) clamp(52px,8.5vw,96px)}
.sst-hero--contact .sst-hero__bg img{filter:brightness(.62) saturate(.85)}
.sst-hero--contact .sst-hero__scrim{background:linear-gradient(to bottom,rgba(6,6,6,.6) 0%,rgba(6,6,6,.34) 45%,rgba(6,6,6,.72) 100%)}
.sst-hero--contact .sst-hero__vignette{position:absolute;inset:0;background:radial-gradient(64% 46% at 50% 24%,rgba(6,6,6,.7) 0%,rgba(6,6,6,.3) 62%,rgba(6,6,6,0) 100%)}
.sst-hero--contact .sst-h1{font-size:clamp(41.8px,6.6vw,94.6px);line-height:1.02;letter-spacing:-.04em}
/* --- shared hero furniture --- */
.sst-h1{font-weight:700;color:#fff;margin:0}
.sst-hero__lead{margin:22px 0 0;font-size:20.9px;line-height:1.6;color:rgba(255,255,255,.74);max-width:44ch;font-weight:400}
.sst-hero--center .sst-hero__lead{max-width:none;margin-left:auto;margin-right:auto}
.sst-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px}
.sst-hero--center .sst-hero__cta{justify-content:center}
.sst-hero__eyebrow{
display:inline-flex;align-items:center;gap:14px;margin-top:22px;
font-size:13.2px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);
}
.sst-hero__eyebrow span{width:30px;height:2px;background:var(--red);border-radius:2px;flex:none}
.sst-hero__cue{
position:absolute;left:50%;bottom:132px;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:8px;
color:rgba(255,255,255,.55);animation:sstBob 2.6s ease-in-out infinite;
}
.sst-hero__cue span:first-child{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.sst-hero__cue i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.6),rgba(255,255,255,0))}
.sst-crumbs{
display:flex;align-items:center;gap:10px;margin:0;
font-size:12.7px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.sst-hero--center .sst-crumbs{justify-content:center}
.sst-crumbs a{color:rgba(255,255,255,.55);transition:color .25s}
.sst-crumbs a:hover{color:#fff}
.sst-crumbs__here{color:var(--red)}
.sst-crumbs__sep{color:rgba(255,255,255,.4)}
/* ==========================================================================
Home — intro + experience card
========================================================================== */
.sst-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(40px,5.5vw,72px);align-items:start}
.sst-intro__copy{display:grid;grid-template-columns:3px minmax(0,1fr);gap:0 44px;align-items:stretch}
.sst-intro__bar{background:var(--red);border-radius:3px;transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
.sst-intro__bar.is-in{transform:scaleY(1)}
.sst-intro__copy .sst-lead{margin:0 0 24px}
.sst-expcard{position:relative;overflow:hidden;background:var(--ink-deep);border-radius:20px;padding:38px 34px 30px;color:#fff}
.sst-expcard__blob{position:absolute;top:-40%;right:-30%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(239,65,54,.28),transparent 68%)}
.sst-expcard__in{position:relative}
.sst-expcard__k{font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sst-expcard__row{display:flex;align-items:baseline;gap:12px;margin-top:14px}
.sst-expcard__n{font-size:96.8px;font-weight:800;letter-spacing:-.05em;line-height:.84;color:#fff}
.sst-expcard__u{font-size:33px;font-weight:700;letter-spacing:-.03em;color:#fff}
.sst-expcard__sub{margin-top:14px;font-size:14.3px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sst-expcard__hr{height:1px;background:rgba(255,255,255,.14);margin:30px 0 26px}
.sst-expcard__lbl{font-size:11.6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:20px}
.sst-expcard__logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sst-expcard__logos img{height:64px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.88}
.sst-expcard__logos img.is-colour{height:52px;filter:none;opacity:.92}
/* ==========================================================================
Rails / carousels
========================================================================== */
.sst-railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.sst-railnav{display:flex;align-items:center;gap:20px}
.sst-railbar{width:132px;height:2px;background:var(--line-rail);border-radius:2px;overflow:hidden}
.sst-railbar i{display:block;height:100%;width:34%;background:var(--red);border-radius:2px;transition:width .25s ease,transform .25s ease;transform-origin:left}
.sst-railbtn{
width:50px;height:50px;border-radius:50%;border:1px solid var(--line-hard);
background:#fff;color:var(--ink);cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:18.7px;
transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);
}
.sst-railbtn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.sst-railbtn:disabled{opacity:.35;cursor:default}
.sst-rail{
display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;
scroll-snap-type:x mandatory;padding:0 var(--gut) 10px;margin:0 auto;
max-width:var(--wrap);scrollbar-width:none;cursor:grab;
}
.sst-rail::-webkit-scrollbar{display:none}
.sst-rail.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.sst-rail--inset{padding-left:0;padding-right:0}
/* industry tile */
.sst-indtile{
position:relative;flex:0 0 min(78vw,300px);height:clamp(320px,72vw,392px);border-radius:14px;overflow:hidden;
scroll-snap-align:start;display:block;background:#111;
}
.sst-indtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sst-indtile__tint{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,.02) 68%);transition:opacity .5s}
.sst-indtile__foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sst-indtile__name{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.015em}
.sst-indtile__go{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font-size:16.5px;transition:transform .45s var(--ease)}
.sst-indtile:hover img{transform:scale(1.07)}
.sst-indtile:hover .sst-indtile__go{transform:translateX(4px)}
/* ==========================================================================
Service cards
========================================================================== */
.sst-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
/* Three to a row, the last row centred (2026-10-02 export). */
.sst-grid > *{flex:0 1 calc((100% - 52px) / 3);min-width:min(100%,300px)}
.sst-grid--3 > *{min-width:min(100%,320px)}
.sst-svccard{
position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;
transition:transform .5s var(--ease),box-shadow .45s,border-color .35s;
}
.sst-svccard__rule{position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:2}
.sst-svccard:hover .sst-svccard__rule{transform:scaleX(1)}
.sst-svccard__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#111}
.sst-svccard__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sst-svccard:hover .sst-svccard__media img{transform:scale(1.06)}
.sst-svccard__body{display:flex;flex-direction:column;flex:1;padding:28px 28px 26px}
.sst-svccard--text .sst-svccard__body{padding:34px 30px 30px}
.sst-svccard__t{display:block;font-size:23.1px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.22}
.sst-svccard__hr{display:block;height:1px;background:var(--line-soft);margin:16px 0}
.sst-svccard__x{display:block;font-size:16px;line-height:1.7;color:var(--body-soft);flex:1;text-wrap:pretty}
.sst-svccard .sst-textlink{margin-top:24px}
body.sst-cards-elevated .sst-svccard{border-color:transparent;box-shadow:0 10px 30px -18px rgba(10,10,10,.3)}
/* ==========================================================================
Certification marquee
========================================================================== */
.sst-certhead{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px;align-items:end}
.sst-marqwrap{position:relative;padding:8px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sst-marq{display:flex;gap:20px;width:max-content;animation:sstMarq 62s linear infinite}
.sst-marqwrap:hover .sst-marq{animation-play-state:paused}
.sst-certcard{
flex:0 0 262px;display:flex;flex-direction:column;background:#fff;
border:1px solid var(--line);border-radius:14px;padding:26px 22px 22px;
text-align:center;color:inherit;
transition:transform .45s var(--ease),box-shadow .45s,border-color .35s;
}
.sst-certcard__logo{display:flex;align-items:center;justify-content:center;height:84px}
.sst-certcard__logo img{max-height:70px;max-width:180px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .45s ease,opacity .45s ease}
.sst-certcard:hover .sst-certcard__logo img{filter:none;opacity:1}
.sst-certcard__t{display:block;margin-top:16px;font-size:13.8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.45;min-height:36px}
.sst-certcard .sst-textlink{justify-content:center;margin-top:14px;font-size:11.6px}
/* ==========================================================================
Testimonials
========================================================================== */
.sst-quote{
flex:0 0 min(430px,84vw);scroll-snap-align:start;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);padding:36px 34px;
display:flex;flex-direction:column;
transition:transform .5s var(--ease),box-shadow .45s;
}
.sst-quote__mark{font-size:61.6px;line-height:.6;color:var(--red);font-weight:800;height:30px}
.sst-quote__x{margin:18px 0 26px;font-size:17.1px;line-height:1.75;color:var(--body);flex:1;text-wrap:pretty}
.sst-quote__by{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line-soft)}
.sst-quote__by img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.sst-quote__n{font-size:17.6px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sst-quote__r{font-size:14.3px;color:var(--muted);margin-top:2px}
/* ==========================================================================
Customers
========================================================================== */
.sst-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:38px 32px;align-items:center;justify-items:center}
.sst-logos img{max-height:64px;width:auto;margin:0 auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .4s,opacity .4s}
.sst-logos img:hover{filter:none;opacity:1}
/* ==========================================================================
Numbered lists (benefits / pillars / steps)
========================================================================== */
.sst-nums{display:grid;gap:2px}
.sst-num{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 24px;padding:26px 0;border-top:1px solid var(--line)}
.sst-num:last-child{border-bottom:1px solid var(--line)}
.sst-num__n{font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--red);padding-top:5px}
.sst-num__t{font-size:20.9px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.sst-num__x{margin-top:9px;font-size:16.6px;line-height:1.72;color:var(--body);text-wrap:pretty}
.sst-sec--dark .sst-num{border-color:rgba(255,255,255,.13)}
.sst-sec--dark .sst-num__t{color:#fff}
.sst-sec--dark .sst-num__x{color:rgba(255,255,255,.66)}
.sst-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:26px}
.sst-pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;transition:transform .5s var(--ease),box-shadow .45s,border-color .35s}
.sst-pillar__n{font-size:14px;font-weight:800;letter-spacing:.14em;color:var(--red)}
.sst-pillar__t{margin-top:16px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sst-pillar__x{margin-top:12px;font-size:16.6px;line-height:1.72;color:var(--body)}
.sst-ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px;list-style:none}
.sst-ticks li{position:relative;padding:14px 0 14px 34px;font-size:17.1px;line-height:1.6;color:var(--body);border-bottom:1px solid var(--line-soft)}
.sst-ticks li::before{
content:"";position:absolute;left:0;top:22px;width:14px;height:8px;
border-left:2.4px solid var(--red);border-bottom:2.4px solid var(--red);
transform:rotate(-45deg);
}
.sst-sec--dark .sst-ticks li{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.12)}
/* ==========================================================================
Split media rows
========================================================================== */
.sst-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:64px;align-items:center}
.sst-split--top{align-items:start}
.sst-split__media{position:relative;border-radius:20px;overflow:hidden;background:#111;aspect-ratio:4/3}
.sst-split__media img{width:100%;height:100%;object-fit:cover}
.sst-split__media--tall{aspect-ratio:3/4}
.sst-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:28px;margin-top:44px}
.sst-stat__n{font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.045em;line-height:.9;color:var(--red)}
.sst-stat__l{margin-top:12px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sst-sec--dark .sst-stat__l{color:rgba(255,255,255,.5)}
/* ==========================================================================
Closing block — CTA and footer share one dark panel
In the comp these are not two backgrounds but one: a photograph under a
long gradient that resolves to pure black, with the CTA and the footer
sitting on top of it. Styling them separately is what made the built page
diverge, so they are one component here.
========================================================================== */
.sst-close{position:relative;overflow:hidden;background:#000;color:#fff}
.sst-close__bg{position:absolute;inset:0}
.sst-close__bg img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.7)}
.sst-close__scrim{
position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.66) 22%,rgba(0,0,0,.86) 48%,rgba(0,0,0,.97) 72%,#000 100%);
}
.sst-close__in{position:relative}
.sst-cta{position:relative;background:transparent}
.sst-cta__in{position:relative;max-width:var(--wrap);margin:0 auto;padding:112px 40px 60px;text-align:center}
.sst-cta__t{
margin:0;font-size:clamp(41.8px,5.72vw,83.6px);font-weight:700;
letter-spacing:-.04em;line-height:1.03;color:#fff;
}
.sst-cta__t span{display:block}
/* One glass panel, split in two with an "or" on the divider. The card is its
own container, so the halves stack — and the divider turns horizontal — by
the card's width rather than the window's (the comp does this in JS). */
.sst-ctapanel{position:relative;max-width:980px;margin:48px auto 0;container-type:inline-size}
.sst-ctapanel__glow{
position:absolute;left:50%;top:50%;width:70%;height:180%;transform:translate(-50%,-50%);pointer-events:none;
background:radial-gradient(ellipse at center,rgba(239,65,54,.22) 0%,rgba(239,65,54,.06) 45%,transparent 70%);filter:blur(10px);
}
.sst-ctapanel__card{
position:relative;display:flex;flex-wrap:wrap;align-items:stretch;text-align:left;overflow:hidden;
border:1px solid rgba(255,255,255,.12);border-radius:22px;
background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.sst-ctapanel__half{
flex:1 1 340px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:18px;
padding:clamp(26px,3.6vw,38px);margin:0;
}
.sst-subscribe.sst-ctapanel__half{flex-basis:400px}
.sst-ctapanel__card.is-single{justify-content:center;text-align:center}
.sst-ctapanel__card.is-single .sst-ctapanel__half{align-items:center}
.sst-ctapanel__k{display:block;font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sst-cta .sst-ctapanel__btn{
align-self:flex-start;padding:18px 34px;letter-spacing:.14em;border-radius:10px;
box-shadow:0 12px 38px rgba(239,65,54,.36);
}
.sst-ctapanel__card.is-single .sst-ctapanel__btn{align-self:center}
.sst-ctapanel__div{
position:relative;flex:0 0 1px;align-self:stretch;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent);
}
.sst-ctapanel__div span{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
background:#0A0A0A;border:1px solid rgba(255,255,255,.16);
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
@container (max-width:759px){
.sst-ctapanel__div{
flex:1 1 100%;height:1px;align-self:auto;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 15%,rgba(255,255,255,.16) 85%,transparent);
}
}
.sst-subscribe__row{
display:flex;align-items:center;gap:6px;padding:6px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;
transition:border-color .25s,background .25s;
}
.sst-subscribe__row:focus-within{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}
.sst-subscribe__row input{
flex:1 1 auto;min-width:0;height:48px;padding:0 14px;font:inherit;font-size:16px;color:#fff;
background:transparent;border:0;outline:none;
}
.sst-subscribe__row input::placeholder{color:rgba(255,255,255,.5)}
.sst-subscribe__row button{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;
background:#fff;color:var(--ink);font:inherit;font-size:12.6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
border:0;border-radius:8px;cursor:pointer;transition:transform .4s var(--ease),background .25s;
}
.sst-subscribe__row button .sst-arrow{color:var(--red)}
.sst-subscribe__row button:hover{background:#F1F1F2}
.sst-subscribe__row button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sst-subscribe.is-busy button{opacity:.7;pointer-events:none}
.sst-subscribe__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.sst-subscribe__msg{margin:-6px 0 0;font-size:14px;line-height:1.5;color:#FF9A92;min-height:0}
.sst-subscribe__msg:empty{display:none}
/* Very narrow phones: the Subscribe button drops under the field rather than
squeezing the address to a few characters. */
@media (max-width:379px){
.sst-subscribe__row{flex-wrap:wrap}
.sst-subscribe__row input{flex-basis:100%}
.sst-subscribe__row button{flex:1 1 100%}
}
/* ==========================================================================
Footer
========================================================================== */
.sst-footer{position:relative;background:transparent;color:#fff;padding:44px 0 0}
.sst-footer__top{
position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
display:flex;flex-wrap:wrap;gap:clamp(32px,4.5vw,56px);
}
/* Brand, site map, contact — the contact column takes the most room because
it holds the four plants (2026-10-02 export). */
.sst-footer__brand{flex:2 1 300px;min-width:0}
.sst-footer__col{flex:1 1 160px;min-width:0}
.sst-footer__col--ind{flex:1 1 180px}
.sst-footer__col--ind .sst-flink{font-size:16px;font-weight:500}
/* Contact runs the full width on its own row; the plants go 4 / 2 / 1 across (2026-10-19). */
.sst-footer__contactcol{flex:1 1 100%;min-width:0;margin-top:clamp(4px,1vw,12px)}
.sst-footer__contactcol .sst-footer__rule{margin-bottom:4px;background:linear-gradient(90deg,var(--red) 0%,rgba(255,255,255,.14) 22%)}
.sst-footer__social{
margin-top:26px;display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;
border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fff;font-size:14px;font-weight:600;
transition:border-color .3s,background .3s;
}
.sst-footer .sst-footer__social:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.sst-footer__socialicon{
display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
background:var(--red);color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1;
}
.sst-footer__socialicon svg{width:15px;height:15px;fill:currentColor}
.sst-footer__logo{height:56px;width:auto;display:block}
.sst-footer__blurb{margin:22px 0 0;font-size:16.5px;line-height:1.72;color:rgba(255,255,255,.55);max-width:38ch;text-wrap:pretty}
.sst-footer__blurb p{margin:0}
.sst-footer h3{
font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.45);margin:0;
}
.sst-footer__rule{height:1px;background:linear-gradient(90deg,var(--red) 0%,rgba(255,255,255,.14) 40%);margin:14px 0 22px}
.sst-footer__links{display:flex;flex-direction:column;gap:2px;list-style:none}
.sst-footer__links li{margin:0}
.sst-footer a{color:#fff;transition:color .25s}
.sst-flink{
color:#fff;font-size:17.6px;font-weight:600;padding:8px 0;
display:inline-flex;align-items:center;gap:9px;transition:color .25s;
}
/* The rule grows from nothing on hover — the comp's one footer flourish. */
.sst-flink i{display:block;width:0;height:1.5px;background:var(--red);transition:width .35s var(--ease)}
.sst-flink:hover{color:#fff}
.sst-flink:hover i{width:18px}
.sst-footer__contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px clamp(24px,3vw,40px)}
.sst-footer__loc{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.sst-footer__plant{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.sst-footer__city{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.sst-footer__addr{color:#fff;font-size:16px;font-weight:600;line-height:1.45}
.sst-footer__tel{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14.5px;color:rgba(255,255,255,.6)}
.sst-footer__tel a{color:#fff;font-weight:600}
.sst-footer__contact a:hover{color:var(--red)}
.sst-footer__bottom{position:relative;margin-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.sst-footer__bottom > div{
max-width:var(--wrap);margin:0 auto;padding:22px var(--gut) 26px;
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
font-size:14.9px;color:rgba(255,255,255,.62);
}
.sst-footer__legal{display:flex;flex-wrap:wrap;gap:20px;list-style:none}
.sst-footer__legal li{margin:0}
.sst-footer__bottom a{
color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.24);
padding-bottom:2px;transition:border-color .25s,color .25s;
}
.sst-footer__bottom a:hover{color:#fff;border-color:var(--red)}
.sst-social{display:flex;gap:12px;margin-top:24px}
.sst-social a{
width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
display:flex;align-items:center;justify-content:center;
transition:background .25s,border-color .25s,transform .3s var(--ease);
}
.sst-social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.sst-social svg{width:17px;height:17px;fill:currentColor}
.sst-totop{
position:fixed;right:26px;bottom:26px;z-index:800;
width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
background:var(--red);color:#fff;font-size:19px;
display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transform:translateY(12px);
box-shadow:0 10px 28px rgba(239,65,54,.4);
transition:opacity .35s,visibility .35s,transform .35s var(--ease),background .25s;
}
.sst-totop.is-on{opacity:1;visibility:visible;transform:none}
.sst-totop:hover{background:var(--red-hover)}
/* ==========================================================================
Quote pop-up
The comp's two-column overlay. The steps are Gravity Forms' own pages, so
GF owns validation and submission while the rail and the bar mirror it.
========================================================================== */
.sst-qm{
position:fixed;inset:0;z-index:1200;
opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.sst-qm.is-open{opacity:1;visibility:visible}
.sst-qm__scrim{position:absolute;inset:0;background:rgba(6,6,6,.74);backdrop-filter:blur(12px)}
.sst-qm__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3.5vw,26px);pointer-events:none}
.sst-qm__panel{
position:relative;pointer-events:auto;width:100%;max-width:1060px;max-height:92vh;
display:grid;grid-template-columns:minmax(0,336px) minmax(0,1fr);
background:#fff;border-radius:26px;overflow:hidden;
box-shadow:0 50px 140px -40px rgba(0,0,0,.75);
transform:translateY(26px) scale(.984);transition:transform .55s var(--ease);
}
.sst-qm.is-open .sst-qm__panel{transform:none}
/* --- rail --- */
.sst-qm__rail{position:relative;min-width:0;background:var(--ink-deep);padding:44px 36px 38px;overflow:hidden}
.sst-qm__blob{
position:absolute;top:-22%;left:-30%;width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,rgba(239,65,54,.3),transparent 68%);
}
.sst-qm__railin{position:relative;display:flex;flex-direction:column;height:100%}
.sst-qm__logo{height:44px;width:auto;object-fit:contain;align-self:flex-start;margin-bottom:34px;filter:brightness(0) invert(1)}
.sst-qm__k{font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sst-qm__t{margin-top:16px;font-size:35.2px;font-weight:700;letter-spacing:-.035em;line-height:1.08;color:#fff}
.sst-qm__steps{display:flex;flex-direction:column;gap:4px;margin-top:44px}
.sst-qm__step{display:flex;align-items:flex-start;gap:16px;padding:14px 0;opacity:.42;transition:opacity .45s ease}
.sst-qm__step.is-done{opacity:.72}
.sst-qm__step.is-on{opacity:1}
.sst-qm__dot{
flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
font-size:12.1px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.5);
transition:background .35s,border-color .35s,color .35s;
}
.sst-qm__step.is-on .sst-qm__dot,.sst-qm__step.is-done .sst-qm__dot{background:var(--red);border-color:var(--red);color:#fff}
.sst-qm__step > span:last-child{display:block;padding-top:6px}
.sst-qm__steptitle{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;color:#fff}
.sst-qm__stephint{display:block;margin-top:4px;font-size:13.8px;color:rgba(255,255,255,.45)}
.sst-qm__spacer{flex:1;min-height:26px}
.sst-qm__call{padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.sst-qm__call > div{font-size:11.6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.sst-qm__call a{display:inline-block;margin-top:8px;color:#fff;font-size:23.1px;font-weight:700;letter-spacing:-.015em;padding:0}
.sst-qm__call a:hover{color:var(--red)}
/* --- body --- */
.sst-qm__body{position:relative;display:flex;flex-direction:column;min-width:0}
.sst-qm__bar{position:relative;height:3px;background:var(--line-soft);flex:none}
.sst-qm__bar i{position:absolute;left:0;top:0;bottom:0;width:33.33%;background:var(--red);transition:width .6s var(--ease)}
.sst-qm__close{
position:absolute;top:18px;right:18px;z-index:4;
display:flex;align-items:center;justify-content:center;width:42px;height:42px;
border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--body);
font-size:15px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.sst-qm__close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* The close button floats over this row, so keep the label clear of it. */
.sst-qm__mini{display:none;flex:none;padding:26px 80px 0 30px;font-size:12.1px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.sst-qm__form{display:flex;flex-direction:column;flex:1;min-height:0}
/* The form fills the panel: pages scroll, the button row stays put. */
.sst-formwrap.sst-formwrap--modal{background:none;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;flex-direction:column;flex:1;min-height:0}
.sst-formwrap--modal .gform_wrapper,
.sst-formwrap--modal .gform_wrapper form,
.sst-formwrap--modal .gform_page{display:flex;flex-direction:column;flex:1;min-height:0}
.sst-formwrap--modal .gform_page_fields{flex:1;overflow:auto;padding:60px 44px 30px}
.sst-formwrap--modal .gform_body{display:flex;flex-direction:column;flex:1;min-height:0}
/* GF 3.0 emits both the underscored and hyphenated class; its own rule on the
hyphenated one outranks a single-class selector, so name both. */
.sst-formwrap--modal .gform_wrapper .gform-page-footer,
.sst-formwrap--modal .gform_wrapper .gform_page_footer,
.sst-formwrap--modal .gform_wrapper .gform-footer,
.sst-formwrap--modal .gform_wrapper .gform_footer{
flex:none;display:flex;align-items:center;justify-content:flex-end;gap:18px;
padding:22px 44px 30px;margin:0;border-top:1px solid var(--line-soft);
}
/* Back sits left, everything else right — and on the first page, where GF
renders no Back button, Continue still lands on the right. */
.sst-formwrap--modal .gform_wrapper .gform-page-footer .sst-btn--ghost,
.sst-formwrap--modal .gform_wrapper .gform_page_footer .sst-btn--ghost{margin-right:auto}
.sst-formwrap--modal .gf_progressbar_wrapper{display:none}
.sst-formwrap--modal .gform_confirmation_message{margin:60px 44px 40px}
.sst-formwrap--modal .validation_error,
.sst-formwrap--modal .gform_validation_errors{flex:none;margin:20px 80px 0 44px}
@media (max-width:860px){
.sst-qm__center{padding:14px}
.sst-qm__panel{grid-template-columns:minmax(0,1fr);max-height:94vh}
.sst-qm__rail{display:none}
.sst-qm__mini{display:block}
.sst-formwrap--modal .gform_page_fields{padding:26px 30px 26px}
.sst-formwrap--modal .gform_wrapper .gform-page-footer,
.sst-formwrap--modal .gform_wrapper .gform_page_footer,
.sst-formwrap--modal .gform_wrapper .gform-footer,
.sst-formwrap--modal .gform_wrapper .gform_footer{padding:18px 30px 24px}
.sst-formwrap--modal .gform_confirmation_message{margin:26px 30px}
.sst-formwrap--modal .validation_error,
.sst-formwrap--modal .gform_validation_errors{margin:16px 30px 0}
}
/* Phones: Back shrinks to its arrow so it and Send share one row. */
@media (max-width:480px){
.sst-formwrap.sst-formwrap--modal .gform_wrapper .gform_page_footer{flex-wrap:nowrap}
.sst-formwrap.sst-formwrap--modal .gform_wrapper .sst-btn--ghost{font-size:0;gap:0;padding:15px 18px;flex:none}
.sst-formwrap.sst-formwrap--modal .gform_wrapper .sst-btn--ghost::before{font-size:16px}
.sst-formwrap.sst-formwrap--modal .gform_wrapper .sst-btn:not(.sst-btn--ghost){padding:16px 24px;white-space:nowrap}
}
/* ==========================================================================
Divisions / contact
========================================================================== */
.sst-division{padding:64px 0;border-top:1px solid var(--line)}
.sst-division:first-child{border-top:0;padding-top:0}
.sst-division__map{border-radius:18px;overflow:hidden;background:var(--surface-alt);aspect-ratio:16/11}
.sst-division__map img{width:100%;height:100%;object-fit:cover}
.sst-plants{display:grid;gap:22px;margin-top:28px}
.sst-plant{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;transition:transform .5s var(--ease),box-shadow .45s,border-color .35s}
.sst-plant__n{font-size:20.9px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sst-plant__a{margin-top:10px;font-size:16.6px;line-height:1.62;color:var(--body)}
.sst-plant__meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:16px}
.sst-plant__meta span{color:var(--muted)}
.sst-plant__meta a{font-weight:600}
.sst-plant__links{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
.sst-mapembed{border-radius:18px;overflow:hidden;background:var(--surface-alt);min-height:420px}
.sst-mapembed iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
/* ==========================================================================
Gravity Forms
GF's own stylesheets are switched off (gform_disable_css, see
inc/gravity-forms.php): its orbital theme set labels, spacing and controls
of its own and no two forms matched the comp. Everything below styles GF's
stock markup straight to the design's fields — nothing is rebuilt, so
entries, notifications, spam checks and feeds are untouched.
Three field dialects, as in the comp: the base (Contact, Careers), --rfq
(Quote page) and --modal (the pop-up). They differ only in a few tokens.
========================================================================== */
.sst-formwrap{
--f-label-size:14.3px;--f-label-track:0;--f-label-color:#54595F;--f-label-gap:8px;
--f-pad:14px 16px;--f-bg:#FAFAFA;--f-line:#E2E4E7;--f-radius:9px;
--f-row:22px;--f-col:18px;--f-chip-pad:12px 18px;--f-chip-size:15.4px;--f-chip-color:#2A2E33;
background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,6vw,38px);
}
.sst-formwrap--rfq{
--f-label-size:13.8px;--f-label-track:.04em;--f-label-color:#63686E;
--f-bg:#FBFBFC;--f-line:#E1E3E5;--f-row:20px;--f-col:22px;
--f-chip-pad:11px 18px;--f-chip-size:16px;--f-chip-color:#3A3E43;
padding:clamp(24px,6vw,44px) clamp(24px,6vw,44px) clamp(24px,5.5vw,40px);
box-shadow:0 24px 60px -40px rgba(10,10,10,.3);
}
.sst-formwrap--modal{
--f-label-size:13.2px;--f-label-track:.04em;--f-label-color:#6B7076;--f-label-gap:9px;
--f-pad:15px 17px;--f-line:#E4E6E9;--f-radius:11px;--f-row:20px;--f-col:20px;
--f-chip-pad:11px 17px;
}
.sst-formwrap--dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sst-formwrap--missing{border-style:dashed;color:var(--body)}
.sst-formwrap .gform_wrapper form{margin:0}
.sst-formwrap .gform_heading{display:none} /* the pages print their own note */
.sst-formwrap .gform_fields{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--f-row) var(--f-col);
list-style:none;margin:0;padding:0;
}
.sst-formwrap .gfield{grid-column:1/-1;min-width:0;margin:0;padding:0;border:0}
.sst-formwrap .gfield.gf_left_half,.sst-formwrap .gfield.gf_right_half,.sst-formwrap .gfield.gform_1_of_2{grid-column:span 6}
.sst-formwrap .gfield.gf_first_third,.sst-formwrap .gfield.gf_middle_third,.sst-formwrap .gfield.gf_last_third{grid-column:span 4}
/* The comp's pairs wrap below ~420px of form width (minmax 190–230px). */
@container sstform (max-width:440px){
.sst-formwrap .gfield.gf_left_half,.sst-formwrap .gfield.gf_right_half,.sst-formwrap .gfield.gform_1_of_2,
.sst-formwrap .gfield.gf_first_third,.sst-formwrap .gfield.gf_middle_third,.sst-formwrap .gfield.gf_last_third{grid-column:1/-1}
.sst-formwrap .ginput_complex{grid-template-columns:minmax(0,1fr)}
}
.sst-formwrap .gform_body{container:sstform/inline-size}
/* labels */
.sst-formwrap .gfield_label,
.sst-formwrap .gform-field-label--type-sub{
display:block;margin:0 0 var(--f-label-gap);padding:0;
font-size:var(--f-label-size);font-weight:600;letter-spacing:var(--f-label-track);color:var(--f-label-color);line-height:normal;
}
.sst-formwrap .gfield_required{color:var(--red);margin-left:1px}
.sst-formwrap .gfield_required .gfield_required{margin:0}
.sst-formwrap .gfield_required_text{font-size:0} /* "(Required)" text mode: keep the asterisk look */
.sst-formwrap .gfield_required_text::before{content:"*";font-size:var(--f-label-size)}
.sst-formwrap .gfield_description{margin-top:8px;font-size:14.3px;color:var(--muted);line-height:1.55}
/* Groups — a name field, a choice list, a section break — get the comp's
small-caps heading with a hairline under it. */
.sst-formwrap fieldset.gfield > legend.gfield_label,
.sst-formwrap .gsection .gsection_title{
display:block;width:100%;float:none;margin:0 0 22px;padding:0 0 14px;border-bottom:1px solid #EDEEEF;
font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.sst-formwrap fieldset.gfield > legend.gfield_label + *{clear:both}
.sst-formwrap .gfield--type-radio,.sst-formwrap .gfield--type-checkbox{margin-top:8px}
.sst-formwrap .gsection{padding:0;border:0}
/* The grid's row gap already spaces a section title from its first field. */
.sst-formwrap .gsection .gsection_title{margin-bottom:0}
.sst-formwrap .gsection:not(:first-child){margin-top:10px}
.sst-formwrap .gsection_description{margin-top:-10px;font-size:14.3px;color:var(--muted)}
/* The Quote page's sections are red and ruled off from each other. */
.sst-formwrap--rfq .gsection .gsection_title{border:0;padding:0;margin:0;color:var(--red)}
.sst-formwrap--rfq .gsection:not(:first-child){margin-top:12px;padding-top:26px;border-top:1px solid #EDEEEF}
.sst-formwrap--rfq .gsection + .gfield{margin-top:0}
.sst-formwrap--rfq fieldset.gfield > legend.gfield_label{
border:0;padding:0;margin:0 0 12px;
font-size:var(--f-label-size);font-weight:600;letter-spacing:var(--f-label-track);text-transform:none;color:var(--f-label-color);
}
.sst-formwrap--modal fieldset.gfield > legend.gfield_label{
border:0;padding:0;margin:0 0 14px;
font-size:var(--f-label-size);font-weight:600;letter-spacing:var(--f-label-track);text-transform:none;color:var(--f-label-color);
}
/* name: two inputs side by side */
.sst-formwrap .ginput_complex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:var(--f-col)}
.sst-formwrap .ginput_complex > span{display:flex;flex-direction:column;min-width:0}
.sst-formwrap .field_sublabel_below .ginput_complex > span{flex-direction:column-reverse}
.sst-formwrap .field_sublabel_below .gform-field-label--type-sub{margin:8px 0 0}
/* controls */
.sst-formwrap input[type=text],
.sst-formwrap input[type=email],
.sst-formwrap input[type=tel],
.sst-formwrap input[type=url],
.sst-formwrap input[type=number],
.sst-formwrap input[type=password],
.sst-formwrap input[type=date],
.sst-formwrap select,
.sst-formwrap textarea{
display:block;width:100%;margin:0;box-sizing:border-box;
padding:var(--f-pad);font:inherit;font-size:16.5px;line-height:normal;color:var(--ink);
background:var(--f-bg);border:1px solid var(--f-line);border-radius:var(--f-radius);outline:none;
transition:border-color .25s,background .25s,box-shadow .25s;
-webkit-appearance:none;appearance:none;
}
.sst-formwrap textarea{line-height:1.6;height:calc(5 * 1.6em + 30px);min-height:0;resize:vertical}
.sst-formwrap--modal textarea{height:calc(4 * 1.6em + 32px)}
.sst-formwrap select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2354595F' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;padding-right:44px;
}
.sst-formwrap :is(input,select,textarea):focus{border-color:var(--red);background-color:#fff;box-shadow:0 0 0 4px rgba(239,65,54,.1)}
.sst-formwrap ::placeholder{color:#A6ABB1;opacity:1}
/* choices as the comp's pills */
.sst-formwrap .gfield_radio,.sst-formwrap .gfield_checkbox{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sst-formwrap .gchoice{position:relative;display:block;margin:0}
.sst-formwrap .gchoice input{
position:absolute;left:18px;top:50%;width:15px;height:15px;margin:-7.5px 0 0;accent-color:var(--red);cursor:pointer;
}
.sst-formwrap .gchoice label{
display:inline-flex;align-items:center;margin:0;padding:var(--f-chip-pad);padding-left:43px;
font-size:var(--f-chip-size);font-weight:400;letter-spacing:0;color:var(--f-chip-color);line-height:normal;
background:var(--f-bg);border:1px solid var(--f-line);border-radius:999px;cursor:pointer;
transition:border-color .25s,background .25s,color .25s;
}
.sst-formwrap .gchoice label:hover{border-color:#C9CDD1}
.sst-formwrap .gchoice input:checked + label{border-color:var(--red);background:rgba(239,65,54,.06);color:#C9291F}
.sst-formwrap .gchoice input:focus-visible + label{box-shadow:0 0 0 3px rgba(239,65,54,.18)}
/* file upload: the input itself becomes the dashed drop box (browsers accept
a dropped file on it), with the comp's icon and copy drawn around it */
.sst-formwrap .ginput_container_fileupload{
position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;
border:1.5px dashed #D8DBDE;border-radius:12px;background:#FBFBFC;cursor:pointer;
transition:border-color .3s,background .3s;
}
.sst-formwrap .ginput_container_fileupload::before{
content:"\2191";flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:10px;background:#fff;border:1px solid #E7E8EA;color:var(--red);font-size:20.9px;
}
.sst-formwrap .ginput_container_fileupload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.sst-formwrap .sst-file__t{display:block;font-size:16.5px;font-weight:600;color:var(--ink);word-break:break-word}
.sst-formwrap .gform_fileupload_rules,.sst-formwrap .gfield_description.gform_fileupload_rules{display:block;margin:3px 0 0;font-size:14.3px;color:#8A8F95}
.sst-formwrap .ginput_container_fileupload.is-over,
.sst-formwrap .ginput_container_fileupload:hover{border-color:var(--red);background:rgba(239,65,54,.04)}
.sst-formwrap .ginput_container_fileupload:focus-within{border-color:var(--red)}
/* Careers centres the box, as the comp does. */
.sst-formwrap--apply .ginput_container_fileupload{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:38px 24px;border-color:#D6D9DC;border-radius:14px;background:#FAFAFA}
.sst-formwrap--apply .ginput_container_fileupload::before{border-radius:50%;width:42px;height:42px;font-size:18.7px}
.sst-formwrap--modal .ginput_container_fileupload{gap:18px;padding:26px;border-radius:14px;background:#FAFAFA}
.sst-formwrap--modal .ginput_container_fileupload::before{border-radius:50%;width:46px;height:46px;font-size:19.8px}
/* Multi-file uploads: GF's drop area becomes the same box, and its "Select
files" button is stretched invisibly over it so the whole box opens the
picker (plupload's shim follows the button). */
.sst-formwrap .ginput_container_fileupload:has(.gform_drop_area){display:block;padding:0;border:0;background:none}
.sst-formwrap .ginput_container_fileupload:has(.gform_drop_area)::before{content:none}
.sst-formwrap .gform_drop_area{
position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;text-align:left;
border:1.5px dashed #D8DBDE;border-radius:12px;background:#FBFBFC;cursor:pointer;transition:border-color .3s,background .3s;
}
.sst-formwrap .gform_drop_area::before{
content:"\2191";flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:10px;background:#fff;border:1px solid #E7E8EA;color:var(--red);font-size:20.9px;
}
.sst-formwrap .gform_drop_area:hover,.sst-formwrap .gform_drop_area.hover,.sst-formwrap .gform_drop_area:focus-within{border-color:var(--red);background:rgba(239,65,54,.04)}
.sst-formwrap .gform_drop_instructions{display:none}
.sst-formwrap .gform_button_select_files{
position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:12px;
background:transparent;color:transparent;font-size:0;cursor:pointer;z-index:2;
}
.sst-formwrap .gform_button_select_files:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sst-formwrap .gform_drop_area .moxie-shim{z-index:3}
.sst-formwrap .ginput_preview{
display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;
border:1px solid var(--f-line);border-radius:9px;background:#fff;font-size:15px;color:var(--ink);
}
.sst-formwrap .ginput_preview .gform_delete_file{margin-left:auto;background:none;border:0;color:var(--red);cursor:pointer;font-size:14px}
.sst-formwrap .ginput_preview .gfield_fileupload_progress{flex:1}
/* footer + buttons */
.sst-formwrap .gform_footer,.sst-formwrap .gform_page_footer,
.sst-formwrap .gform-footer,.sst-formwrap .gform-page-footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:30px 0 0;padding:0}
.sst-formwrap .gform_page_footer{justify-content:space-between}
.sst-formwrap--rfq .gform_footer{justify-content:flex-end;margin-top:36px;padding-top:28px;border-top:1px solid #EDEEEF}
.sst-formwrap--apply .gform_footer{justify-content:center}
.sst-formwrap .gform_wrapper .sst-btn{
display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;border:0;cursor:pointer;
padding:17px 34px;border-radius:8px;font:inherit;font-size:13.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
box-shadow:0 10px 30px rgba(239,65,54,.3);transition:transform .4s var(--ease),box-shadow .4s,background .25s;
}
.sst-formwrap--rfq .gform_wrapper .sst-btn{padding:17px 38px;letter-spacing:.14em;border-radius:9px}
.sst-formwrap--modal .gform_wrapper .sst-btn:not(.sst-btn--ghost){padding:16px 32px;border-radius:9px}
.sst-formwrap .gform_wrapper button.sst-btn:not(.sst-btn--ghost)::after{content:"\2192";display:inline-block;transition:transform .4s var(--ease)}
.sst-formwrap .gform_wrapper .sst-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.sst-formwrap .gform_wrapper button.sst-btn:hover::after{transform:translateX(6px)}
.sst-formwrap .gform_wrapper .sst-btn--ghost{
background:none;color:#3A3E43;border:1px solid #E4E6E9;box-shadow:none;padding:15px 24px;border-radius:9px;font-size:13.2px;
}
.sst-formwrap .gform_wrapper .sst-btn--ghost::before{content:"\2190";display:inline-block;transition:transform .4s var(--ease)}
.sst-formwrap .gform_wrapper .sst-btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:none}
.sst-formwrap .gform_wrapper .sst-btn--ghost:hover::before{transform:translateX(-6px)}
.sst-formwrap .gform_ajax_spinner,.sst-formwrap .gform-loader{
width:22px;height:22px;border:2px solid rgba(239,65,54,.25);border-top-color:var(--red);border-radius:50%;
animation:sstSpin .7s linear infinite;align-self:center;
}
/* validation + confirmation */
.sst-formwrap .gform_validation_errors,.sst-formwrap .validation_error{
background:rgba(239,65,54,.07);border:1px solid rgba(239,65,54,.3);border-left:3px solid var(--red);
border-radius:10px;padding:16px 18px;margin:0 0 26px;color:var(--red-hover);font-size:16px;font-weight:600;
}
.sst-formwrap .gform_validation_errors h2{margin:0;font:inherit;color:inherit}
.sst-formwrap .gform_validation_errors ol{margin:8px 0 0 18px;font-weight:500}
.sst-formwrap .gform_validation_errors a{color:inherit;text-decoration:underline}
.sst-formwrap .gfield_error :is(input,select,textarea){border-color:var(--red);background:rgba(239,65,54,.03)}
.sst-formwrap .gfield_validation_message,.sst-formwrap .validation_message{margin-top:8px;font-size:14.3px;font-weight:600;color:var(--red)}
.sst-formwrap .gform_confirmation_message{
background:rgba(239,65,54,.06);border:1px solid rgba(239,65,54,.24);border-radius:14px;
padding:30px 28px;font-size:18.2px;line-height:1.7;color:var(--ink);
}
/* multi-page progress (the pop-up hides it; its rail shows the steps) */
.sst-formwrap .gf_progressbar_wrapper{margin-bottom:32px}
.sst-formwrap .gf_progressbar{height:4px;background:var(--line-rail);border-radius:3px;overflow:hidden;margin-top:12px}
.sst-formwrap .gf_progressbar_percentage{display:block;height:100%;background:var(--red)!important;border-radius:3px;color:transparent;transition:width .5s var(--ease)}
.sst-formwrap .gf_progressbar_title{font-size:12.7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* what GF's own sheet used to hide */
.sst-formwrap .gform_hidden,.sst-formwrap .gf_invisible,.sst-formwrap .gfield_visibility_hidden,
.sst-formwrap .gform_validation_container,.sst-formwrap .gfield--type-honeypot,
.sst-formwrap .gform_required_legend{display:none!important}
.sst-formwrap .screen-reader-text,.sst-formwrap .gform-visually-hidden,.sst-formwrap .hidden_label > .gfield_label,
.sst-formwrap .hidden_sub_label{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.gform_ajax_frame,iframe[name^="gform_ajax_frame"]{display:none!important}
/* the design's own step rail above the GF form */
.sst-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px;margin-bottom:38px}
.sst-step{padding:22px 22px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .3s,background .3s}
.sst-step.is-on{border-color:var(--red);background:rgba(239,65,54,.04)}
.sst-step__n{font-size:12.7px;font-weight:800;letter-spacing:.16em;color:var(--red)}
.sst-step__t{margin-top:10px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.sst-step__h{margin-top:6px;font-size:15px;color:var(--muted);line-height:1.5}
/* ==========================================================================
Reveal / motion
========================================================================== */
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv-x]{transform:translateX(-28px)}
[data-rv-s]{transform:translateY(24px) scale(.97)}
[data-lift]{transition:transform .5s var(--ease),box-shadow .45s,border-color .35s}
[data-lift]:hover{transform:translateY(-6px);box-shadow:0 22px 48px -26px rgba(10,10,10,.42);border-color:var(--line-hard)}
body.sst-motion-off [data-rv],
body.sst-motion-off [data-rv].is-in{opacity:1!important;transform:none!important;transition:none!important}
body.sst-motion-off .sst-hero__bg img,
body.sst-motion-off .sst-marq,
body.sst-motion-off .sst-hero__cue,
body.sst-motion-off .sst-flame i{animation:none!important}
body.sst-motion-off [data-lift]:hover{transform:none}
body.sst-motion-subtle [data-rv]{transform:translateY(12px);transition-duration:.5s}
body.sst-motion-subtle .sst-hero__bg img{animation:none}
body.sst-motion-subtle [data-lift]:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
[data-rv]{opacity:1!important;transform:none!important}
}
/* ==========================================================================
Editorial / fallback content
========================================================================== */
.sst-prose{font-size:18.2px;line-height:1.78;color:var(--body)}
.sst-prose > * + *{margin-top:22px}
.sst-prose h2{font-size:clamp(28px,2.8vw,38px);font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-top:44px;line-height:1.14}
.sst-prose h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:36px}
.sst-prose ul,.sst-prose ol{padding-left:22px}
.sst-prose li{margin-bottom:10px}
.sst-prose img{border-radius:14px;margin:32px 0}
.sst-prose blockquote{border-left:3px solid var(--red);padding-left:26px;font-size:21px;line-height:1.6;color:var(--ink-soft);font-weight:500}
.sst-prose table{width:100%;border-collapse:collapse;font-size:16.6px}
.sst-prose th,.sst-prose td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.sst-prose th{background:var(--surface-alt);font-weight:700}
.sst-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:26px}
.sst-post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.sst-post__media{aspect-ratio:16/10;overflow:hidden;background:#111}
.sst-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sst-post:hover .sst-post__media img{transform:scale(1.06)}
.sst-post__b{padding:26px;display:flex;flex-direction:column;flex:1}
.sst-post__d{font-size:12.7px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sst-post__t{margin-top:12px;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.26;color:var(--ink)}
.sst-post__x{margin-top:12px;font-size:16px;line-height:1.68;color:var(--body-soft);flex:1}
.sst-pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:56px}
.sst-pager .page-numbers{
display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;
border:1px solid var(--line-hard);border-radius:10px;color:var(--ink);font-weight:600;transition:background .25s,color .25s,border-color .25s;
}
.sst-pager .page-numbers:hover,.sst-pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.sst-searchform{display:flex;gap:10px;max-width:520px}
.sst-searchform input[type=search]{flex:1;padding:15px 16px;border:1px solid var(--line-hard);border-radius:10px;font-size:16.6px}
.sst-searchform input[type=search]:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(239,65,54,.16)}
/* ==========================================================================
Responsive
========================================================================== */
/* The nav collapses at 1240 now: the larger type runs the header out of room
well before the old 1080 mark. */
@media (max-width:1279px){
.sst-nav{display:none}
.sst-burger{display:flex;order:3}
/* Logo, quote button, burger — in that reading order, with the logo taking
the slack so the burger never leaves the viewport. */
.sst-header__brand{flex:1 1 auto;min-width:0;order:1}
.sst-header__inner > .sst-btn{order:2;flex:0 0 auto}
.sst-mega{display:none}
.sst-header__inner{gap:16px}
}
/* The phone number shows once the nav has collapsed to the burger. The comp
also shows it at 1440+, but with Divisions added (2026-09-23) logo + six
links + phone + quote need ~1320px against a 1240px container, so the quote
button hung 79px outside the grid at every desktop width. With the full nav
showing, the phone gives way. */
.sst-headphone{display:none}
@media (min-width:620px) and (max-width:1279px){.sst-headphone{display:flex;order:2}}
@media (max-width:1080px){
.sst-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
.sst-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.sst-num{grid-template-columns:52px minmax(0,1fr);gap:0 14px;padding:22px 0}
.sst-hero__cue{display:none}
}
@media (max-width:760px){
/* Below this the quote button cannot sit beside the logo without pushing
the burger off-screen; the mobile menu carries it instead, exactly as the
comp does. */
.sst-header__inner > .sst-btn{display:none}
}
@media (max-width:560px){
.sst-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
/* nowrap keeps desktop labels on one line, but a long call to action will
run past a phone's viewport, so let it wrap here. */
.sst-btn{white-space:normal;max-width:100%}
.sst-hero__cta .sst-btn{width:100%}
}
@media print{
.sst-header,.sst-mobilenav,.sst-mega,.sst-totop,.sst-modal,.sst-hero__cue,.sst-progress{display:none!important}
body{color:#000}
.sst-hero{min-height:auto;background:#fff;color:#000}
.sst-hero__bg,.sst-hero__scrim,.sst-hero__scrim2,.sst-hero__glow,.sst-hero__embers{display:none}
.sst-h1{color:#000}
}
/* ==========================================================================
Components added by the page templates
========================================================================== */
.sst-head--flush{margin-bottom:26px}
/* 58ch is measured at the blockquote's own 16px, as in the comp; the quote
itself is set larger inside it. */
.sst-pullquote{margin:34px 0 0;padding:28px 0 0;border-top:1px solid #DFE1E4;max-width:58ch;font-size:16px}
.sst-pullquote p{margin:0;font-size:20.9px;line-height:1.62;color:var(--ink);font-weight:600;letter-spacing:-.015em;text-wrap:pretty}
.sst-sec--who .sst-h2--about{max-width:22ch}
.sst-sec--who .sst-body p{max-width:58ch}
/* The About photo's founding badge: a red tab tucked into the bottom-left
corner, squared against the frame with only its top-right corner rounded. */
.sst-sec--who .sst-split__media{border-radius:18px}
.sst-sec--who .sst-kicker{font-size:12.1px}
.sst-badge{
position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
padding:20px 28px;border-top-right-radius:18px;
}
.sst-badge__n{font-size:37.4px;font-weight:800;letter-spacing:-.04em;line-height:1}
.sst-badge__l{margin-top:4px;font-size:11.6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.sst-loccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 26px}
.sst-loccard .sst-plant{border:0;padding:20px 0 0;background:none}
.sst-loccard .sst-plant + .sst-plant{border-top:1px solid var(--line-soft);margin-top:20px}
.sst-loccard .sst-plant:hover{transform:none;box-shadow:none}
.sst-split--one{grid-template-columns:minmax(0,1fr)}
/* With no paired image the column runs the full container; cap the measure
so body copy stays readable rather than stretching to 1240px. */
.sst-split--one > *{max-width:76ch}
.sst-faq{display:grid;gap:2px}
.sst-faq__i{border-top:1px solid var(--line)}
.sst-faq__i:last-child{border-bottom:1px solid var(--line)}
.sst-faq__i summary{
list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
font-size:20.9px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.3;
}
.sst-faq__i summary::-webkit-details-marker{display:none}
.sst-faq__i summary::after{
content:"";position:absolute;right:6px;top:32px;width:9px;height:9px;
border-right:2px solid var(--red);border-bottom:2px solid var(--red);
transform:rotate(45deg);transition:transform .35s var(--ease);
}
.sst-faq__i[open] summary::after{transform:rotate(-135deg);top:36px}
.sst-faq__a{padding:0 0 26px;font-size:17.1px;line-height:1.74;color:var(--body);max-width:70ch}
.sst-faq__a p{margin:0 0 16px}
.sst-faq__a p:last-child{margin-bottom:0}
/* Comments — plain, since the site is brochure-first */
.sst-comments{font-size:16.6px;line-height:1.7;color:var(--body)}
.sst-comments h2,.sst-comments h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:20px}
.sst-comments ol{list-style:none}
.sst-comments .comment-body{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.sst-comments input:not([type=submit]),.sst-comments textarea{
width:100%;padding:14px 16px;border:1px solid var(--line-hard);border-radius:10px;font-size:16.6px;
}
.sst-comments input:focus,.sst-comments textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(239,65,54,.16)}
.sst-comments input[type=submit]{
padding:16px 30px;border:0;border-radius:var(--radius-sm);background:var(--red);color:#fff;cursor:pointer;
font-size:13.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
/* Editor parity: the block editor should look like the front end */
.editor-styles-wrapper{font-family:'Archivo',system-ui,sans-serif}
/* ==========================================================================
Article layout — single service
========================================================================== */
.sst-sec--article{background:#fff;padding:clamp(56px,9vw,96px) 0 60px}
/* The September export splits this 50/50; a 580px index column reads far too
wide for a list of links, so the sidebar is held to a narrow track and the
article takes the rest. Collapses to one column below 1080. */
.sst-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,5.5vw,80px);align-items:start}
.sst-article__main{min-width:0}
.sst-article__intro{
margin:0 0 56px;font-size:22px;line-height:1.68;color:var(--ink-soft);
font-weight:500;letter-spacing:-.004em;max-width:70ch;text-wrap:pretty;
}
.sst-article__intro p{margin:0 0 20px}
.sst-article__intro p:last-child{margin-bottom:0}
.sst-article__body{margin:0 0 64px;font-size:18.2px;line-height:1.8;color:var(--body);max-width:74ch;text-wrap:pretty}
/* Closes the article, after the applications. */
.sst-article__outro{margin:56px 0 0;font-size:18.2px;line-height:1.8;color:var(--body);max-width:74ch;text-wrap:pretty}
.sst-article__outro p{margin:0 0 20px}
.sst-article__outro p:last-child{margin-bottom:0}
.sst-article__body p{margin:0 0 20px}
.sst-article__body p:last-child{margin-bottom:0}
.sst-article .sst-h3{margin:0 0 20px}
.sst-article .sst-prose{margin-top:56px;max-width:74ch}
/* benefits: a two-up grid of hairline-topped rows, each with a rule that
draws across on hover */
.sst-bens{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:2px 0;margin:0 0 64px}
.sst-ben{position:relative;padding:26px;border-top:1px solid #E9EAEB;display:flex;align-items:baseline;gap:14px;transition:background .3s}
.sst-ben:hover{background:#FAFAFB}
.sst-ben__rule{position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.sst-ben:hover .sst-ben__rule{transform:scaleX(1)}
.sst-ben__n{font-size:12.7px;font-weight:700;color:var(--red);letter-spacing:.1em;flex:none}
.sst-ben__t{font-size:18.7px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.3}
.sst-ben__x{margin:10px 0 0;font-size:16.5px;line-height:1.7;color:var(--body-soft);text-wrap:pretty}
/* applications: pills, not a ticked list */
.sst-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.sst-pill{
display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
border:1px solid #E4E6E8;border-radius:100px;font-size:16px;color:var(--ink-soft);
}
.sst-pill > span{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
/* the sticky index of every other service */
.sst-article__side{position:sticky;top:130px;align-self:start}
.sst-svcindex{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.sst-svcindex__head{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:26px 26px 22px;border-bottom:1px solid var(--line-soft);
}
.sst-svcindex__k{font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sst-svcindex__all{
display:inline-flex;align-items:center;gap:7px;color:var(--muted);
font-size:11.6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.sst-svcindex__all:hover{color:var(--ink)}
.sst-svcindex__all .sst-arrow{color:var(--red)}
.sst-svcindex__list{display:flex;flex-direction:column;padding:8px 12px 14px}
.sst-svcindex__i{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 14px;border-radius:8px;color:#3A3E43;font-size:16px;font-weight:500;
transition:background .25s,color .25s;
}
.sst-svcindex__i:hover{background:var(--surface-alt);color:var(--ink)}
.sst-svcindex__i .sst-arrow{color:var(--red);font-size:14.3px}
.sst-svcindex__foot{padding:22px 26px 26px;background:var(--ink)}
.sst-svcindex__foot > div{font-size:13.8px;color:rgba(255,255,255,.55)}
.sst-svcindex__foot .sst-btn{margin-top:14px}
/* The comp's script stacks the article and its index below 1240. */
@media (max-width:1279px){
.sst-article{grid-template-columns:minmax(0,1fr);gap:56px}
.sst-article__side{position:static}
}
/* ==========================================================================
Section paddings that differ from the default band
The comp does not use one rhythm throughout; each screen has its own.
========================================================================== */
.sst-sec--lead{background:#fff;padding:clamp(56px,9vw,96px) 0 60px}
.sst-sec--grid{background:#fff;padding:64px 0 112px}
.sst-sec--ind-intro{background:#fff;padding:clamp(56px,9vw,100px) 0 clamp(60px,9.5vw,104px)}
.sst-sec--divintro{background:#fff;padding:92px 0 0}
.sst-sec--divisions{background:#fff;padding:clamp(56px,9vw,80px) 0 clamp(60px,9.5vw,112px)}
.sst-sec--locations{background:var(--surface-alt);padding:72px 0 88px}
.sst-sec--contactform{background:var(--surface-alt);padding:clamp(56px,9vw,104px) 0 clamp(60px,9.5vw,118px)}
.sst-sec--apply{background:#fff;padding:clamp(56px,9vw,100px) 0 clamp(60px,9.5vw,112px)}
.sst-sec--mission{background:#fff;padding:clamp(56px,9vw,100px) 0 clamp(60px,9.5vw,96px)}
.sst-sec--who{background:var(--surface-alt);padding:clamp(56px,9vw,100px) 0 clamp(60px,9.5vw,112px)}
.sst-sec--aboutcust{background:#fff;padding:clamp(56px,9vw,96px) 0 clamp(60px,9.5vw,104px)}
.sst-sec--home-intro{background:#fff;padding:clamp(56px,9vw,112px) 0 clamp(60px,9.5vw,116px)}
/* lead paragraph against the growing red rule */
.sst-leadrow{display:grid;grid-template-columns:auto 1fr;gap:0 44px;align-items:stretch}
.sst-leadrow__bar{width:3px;background:var(--red);border-radius:3px;transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
.sst-leadrow__bar.is-in{transform:scaleY(1)}
.sst-leadrow__p{margin:0;max-width:70ch;font-size:23.1px;line-height:1.62;color:var(--ink-soft);font-weight:500;letter-spacing:-.005em;text-wrap:pretty}
/* ==========================================================================
Industry single
========================================================================== */
.sst-indintro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:64px;align-items:start}
.sst-indintro__bar{width:52px;height:3px;background:var(--red);border-radius:3px;margin-top:18px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.sst-indintro__bar.is-in{transform:scaleX(1)}
.sst-indintro__lead{margin:0 0 22px;font-size:20.9px;line-height:1.66;color:var(--ink);font-weight:600;letter-spacing:-.012em;text-wrap:pretty}
.sst-indintro__body{font-size:18.2px;line-height:1.8;color:var(--body);text-wrap:pretty}
.sst-indintro__body p{margin:0 0 22px} /* the comp keeps it on the last one too */
.sst-indbens{position:relative;overflow:hidden;background:var(--ink-deep)}
.sst-indbens__bg{position:absolute;inset:-12% 0}
.sst-indbens__bg img{width:100%;height:100%;object-fit:cover}
.sst-indbens__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.6))}
.sst-indbens__in{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(72px,12vw,130px) var(--gut);text-align:center}
.sst-indbens .sst-h2{margin:0 0 26px;color:#fff}
.sst-indbens__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;max-width:940px;margin:0 auto}
.sst-glass{
padding:28px 26px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
background:rgba(255,255,255,.05);backdrop-filter:blur(6px);text-align:left;
}
.sst-glass__n{font-size:12.1px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:12px}
.sst-glass__x{color:rgba(255,255,255,.86);font-size:17.6px;line-height:1.68;text-wrap:pretty}
.sst-indcust{background:#fff;padding:clamp(56px,9vw,88px) 0 clamp(60px,9.5vw,96px)}
.sst-indcust__k{text-align:center;font-size:12.7px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9AA0A6;margin-bottom:40px}
.sst-indcust__row{display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,96px);flex-wrap:wrap}
.sst-indcust__row img{height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .7s ease,filter .7s ease}
.sst-indcust__row span:hover img{filter:none;opacity:1}
/* ==========================================================================
Divisions
========================================================================== */
.sst-divintro{
margin:0 auto;max-width:76ch;text-align:center;
font-size:20.9px;line-height:1.7;color:var(--ink-soft);font-weight:500;text-wrap:pretty;
}
.sst-divintro p{margin:0}
.sst-divintro a{border-bottom:1px solid rgba(239,65,54,.35);font-weight:600}
.sst-divlist{display:flex;flex-direction:column;gap:72px}
.sst-div__head{display:flex;align-items:baseline;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:36px}
.sst-div__n{font-size:12.7px;font-weight:700;color:var(--red);letter-spacing:.1em}
.sst-div__t{margin:0;font-size:clamp(28.6px,3.3vw,44px);font-weight:700;letter-spacing:-.033em;line-height:1.1;color:var(--ink)}
.sst-div__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:44px;align-items:start}
.sst-div__map{display:block;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-alt)}
.sst-div__map img{display:block;width:100%;height:auto;transition:transform .9s var(--ease)}
.sst-div__map:hover img{transform:scale(1.05)}
.sst-div__maplink{
position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:9px;
padding:10px 18px;background:#fff;border-radius:8px;color:var(--ink);
font-size:12.1px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.sst-div__maplink .sst-arrow{color:var(--red)}
.sst-div__plants{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px}
.sst-plant__n{font-size:20.9px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.sst-plant__a{margin-top:12px;font-size:17.1px;line-height:1.6;color:var(--body)}
.sst-plant__meta{margin-top:14px;display:flex;flex-direction:column;gap:4px;font-size:16.5px}
.sst-plant__meta span{color:var(--ink);font-weight:600}
.sst-plant__meta a{color:var(--red)}
.sst-plant__links{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px}
.sst-plant__cta{margin-top:24px}
.sst-minilink{
display:inline-flex;align-items:center;gap:8px;color:var(--ink);
font-size:12.1px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
}
.sst-minilink .sst-arrow{color:var(--red)}
.sst-minilink:hover{color:var(--red)}
/* ==========================================================================
Location cards (contact + careers)
========================================================================== */
.sst-loccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.sst-loccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,5vw,30px) clamp(22px,5vw,30px) clamp(22px,5vw,28px)}
.sst-loccard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.sst-loccard__city{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.sst-loccard__dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.sst-loccard__plants{display:flex;flex-direction:column;gap:26px;margin-top:22px}
.sst-loccard__n{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.sst-loccard__a{margin-top:8px;font-size:16px;line-height:1.6;color:var(--body-soft)}
.sst-loccard__meta{margin-top:10px;font-size:16px;line-height:1.6;color:var(--body-soft)}
.sst-loccard__meta span{color:var(--ink);font-weight:600}
.sst-loccard__meta a{color:var(--red)}
.sst-loccard__links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px}
.sst-loccard__links .sst-minilink{font-size:11.6px}
/* ==========================================================================
Contact form band
========================================================================== */
.sst-contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(36px,5vw,64px);align-items:start}
.sst-h2--form{margin:16px 0 0;font-size:clamp(35.2px,3.96vw,52.8px);line-height:1.06}
.sst-contactside{
background:var(--ink-deep);color:#fff;border-radius:18px;padding:38px 34px 34px;
position:sticky;top:130px;align-self:start;
}
/* Below the nav breakpoint the comp's script stacks the form and the panel
(1fr) and un-sticks the panel, which would otherwise trap itself against the
header under a full-width form. */
@media (max-width:1279px){
.sst-contactgrid{grid-template-columns:minmax(0,1fr)}
.sst-contactside{position:static}
}
.sst-contactside__bar{width:36px;height:3px;background:var(--red);border-radius:3px}
.sst-contactside__t{margin:24px 0 0;font-size:26.4px;font-weight:700;letter-spacing:-.02em;color:#fff}
.sst-contactside__x{margin:24px 0 0;font-size:17.1px;line-height:1.75;color:rgba(255,255,255,.72);text-wrap:pretty}
.sst-contactside__hr{height:1px;background:rgba(255,255,255,.12);margin:30px 0 26px}
.sst-contactside__list{display:flex;flex-direction:column;gap:18px}
.sst-contactside__list a{display:flex;flex-direction:column;gap:5px;color:#fff;transition:color .25s}
.sst-contactside__list a:hover{color:var(--red)}
.sst-contactside__list span{font-size:11.6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.sst-contactside__list strong{font-size:26.4px;font-weight:700;letter-spacing:-.02em}
.sst-contactside__list .sst-contactside__email{font-size:20.9px;font-weight:600;letter-spacing:-.01em}
.sst-contactside__social{
flex-direction:row!important;align-items:center;gap:10px!important;
font-size:13.2px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.sst-contactside__social .sst-arrow{color:var(--red)}
/* ==========================================================================
Careers application
========================================================================== */
.sst-applywrap{max-width:1000px;margin:0 auto;padding:0 var(--gut)}
.sst-applyhead{text-align:center;margin-bottom:48px}
.sst-h2--apply{margin:0 0 14px;font-size:clamp(35.2px,4.18vw,57.2px);line-height:1.06}
.sst-applyhead__x{font-size:14.9px;color:var(--muted)}
.sst-applyhead__x p,.sst-formnote p{margin:0}
.sst-applyhead__x span,.sst-formnote span{color:var(--red)}
.sst-formnote{margin-top:12px;font-size:14.9px;color:var(--muted)}
/* The header's quote button keeps the full 13.8px type of the comp on a
shorter 14px/26px pad — .sst-btn--sm shrinks the type as well, which read
noticeably lighter than the design. */
.sst-btn--head{padding:14px 26px;gap:10px;box-shadow:0 8px 24px rgba(239,65,54,.32)}
/* Quote (RFQ) screen */
.sst-sec--rfq{background:#fff;padding:clamp(56px,9vw,100px) 0 clamp(60px,9.5vw,112px)}
.sst-rfqhead{text-align:center;margin-bottom:52px}
.sst-rfqhead .sst-h2--apply{margin:0 0 22px}
.sst-rfqhead__x{font-size:18.2px;line-height:1.75;color:var(--body);text-wrap:pretty}
.sst-rfqhead__x p{margin:0 auto 16px;max-width:72ch}
.sst-rfqhead__x p:last-child{margin-bottom:0}
/* Featured customers — the comp's framed, hairline-ruled grid */
.sst-custhead{display:flex;align-items:center;gap:20px;margin-bottom:52px}
.sst-custhead span{font-size:12.1px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sst-custhead i{flex:1;height:1px;background:linear-gradient(90deg,var(--red) 0%,var(--line) 16%)}
.sst-custgrid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1px;
background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
}
.sst-custcell{display:flex;align-items:center;justify-content:center;padding:34px 24px;background:#fff;min-height:164px}
.sst-custcell img{
max-width:180px;max-height:84px;width:auto;height:auto;object-fit:contain;
filter:grayscale(1);opacity:.55;transition:opacity .5s ease,filter .45s ease,transform .5s var(--ease);
}
.sst-custcell:hover img{filter:none;opacity:1;transform:scale(1.04)}
/* Per-step headings inside the pop-up */
.sst-formwrap--modal .sst-qm__heading{grid-column:1/-1;margin-bottom:8px}
.sst-formwrap--modal .sst-qm__heading .gfield_label{display:none}
.sst-qm__panelt{font-size:24.2px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.sst-qm__panelx{margin-top:8px;font-size:15.4px;color:var(--muted)}
.sst-qm__panelx span{color:var(--red)}
/* About mission: the kicker sits with the copy and the columns centre on
each other, per the September export. */
.sst-missionhead{text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.sst-missionhead .sst-h2{margin:16px 0 0}
.sst-eyebrow{display:inline-flex;align-items:center;gap:16px;font-size:13.2px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.sst-eyebrow i{display:block;width:36px;height:2px;background:var(--red)}
.sst-pillgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.sst-pillcard{
position:relative;display:flex;flex-direction:column;padding:clamp(28px,3.4vw,40px);overflow:hidden;
background:#fff;border:1px solid #E7E8EA;border-radius:18px;
transition:transform .5s var(--ease),box-shadow .45s,border-color .35s,background .35s;
}
.sst-pillcard:hover{background:#FAFAFB;border-color:#E7E8EA;box-shadow:0 26px 54px -22px rgba(10,10,10,.34)}
.sst-pillcard__rule{position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.sst-pillcard:hover .sst-pillcard__rule{transform:scaleX(1)}
.sst-pillcard__n{font-size:clamp(44px,4.4vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--red)}
.sst-pillcard__t{font-size:clamp(36px,3.6vw,50px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.02}
.sst-pillcard__hr{display:block;width:44px;height:3px;border-radius:3px;background:var(--red);margin:22px 0 20px}
.sst-pillcard__x{margin:0;font-size:17.1px;line-height:1.72;color:var(--body);text-wrap:pretty}
/* Careers: the Name group carries the asterisk; its two inputs do not. */
.sst-formwrap .gsection.sst-req .gsection_title::after{content:"*";color:var(--red);margin-left:1px}
.sst-formwrap .sst-hide-req .gfield_required{display:none}
/* ==========================================================================
2026-10-05 export — the client's content doc
========================================================================== */
/* Long headlines replaced page names on services, industries, the Services
page and Divisions, so those heroes share one smaller, balanced H1. */
.sst-hero--divisions .sst-h1{
margin:20px auto 0;max-width:20ch;text-wrap:balance;
font-size:clamp(36px,5vw,72px);line-height:1.04;letter-spacing:-.035em;
}
/* About and Divisions run a plain black hero — no photo, scrim or zoom. */
.sst-hero--plain{background:#000}
.sst-hero--plain .sst-hero__scrim{display:none}
/* Services page: "Our Services" over a slightly smaller lead. */
.sst-leadrow__h{margin:0 0 20px;font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:var(--ink);max-width:22ch;text-wrap:balance}
.sst-leadrow__p--sm{font-size:21px}
/* Service body paragraphs: tucked 24px under the lead, as in the comp. */
.sst-article__paras{margin:-32px 0 56px;font-size:18.2px;line-height:1.8;color:var(--body);max-width:74ch;text-wrap:pretty}
.sst-article__paras p{margin:0 0 24px}
.sst-article__paras p:last-child{margin-bottom:0}
/* Quenching Methods: dark roll-over cards. Descriptions sit open on touch
screens; only a real hover pointer gets the collapse-and-reveal. */
.sst-methods{margin:0 0 64px}
.sst-methods .sst-h3{margin:0 0 28px}
.sst-methods__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.sst-method{
position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;
padding:76px 26px 28px;border-radius:18px;overflow:hidden;background:#0B0B0B;color:#fff;outline:none;
transition:transform .5s var(--ease),box-shadow .45s;
}
.sst-method__glow{
position:absolute;left:-20%;right:-20%;bottom:-55%;height:95%;pointer-events:none;opacity:.35;transform:translateY(18%);
background:radial-gradient(ellipse at 50% 100%,rgba(255,138,58,.55) 0%,rgba(239,65,54,.32) 38%,transparent 72%);
transition:opacity .6s ease,transform .8s var(--ease);
}
.sst-method__rule{position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.sst-method__n{position:absolute;top:24px;left:26px;font-size:12.7px;font-weight:700;letter-spacing:.18em;color:var(--red)}
.sst-method__plus{
position:absolute;top:18px;right:20px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;border:1px solid rgba(255,255,255,.22);font-size:18px;line-height:1;color:#fff;
transition:transform .5s var(--ease),background .3s,border-color .3s;
}
.sst-method__t{position:relative;margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.18;color:#fff}
.sst-method__b{position:relative;overflow:hidden;max-height:260px;opacity:1;margin-top:12px;transition:max-height .6s var(--ease),opacity .45s ease,margin .5s var(--ease)}
.sst-method__b p{margin:0;font-size:15.8px;line-height:1.66;color:rgba(255,255,255,.78);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
.sst-method__b{max-height:0;opacity:0;margin-top:0}
.sst-method:is(:hover,:focus-visible){transform:translateY(-6px);box-shadow:0 26px 54px -22px rgba(10,10,10,.34)}
.sst-method:is(:hover,:focus-visible) .sst-method__b{max-height:260px;opacity:1;margin-top:12px}
.sst-method:is(:hover,:focus-visible) .sst-method__glow{opacity:1;transform:translateY(0)}
.sst-method:is(:hover,:focus-visible) .sst-method__plus{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
.sst-method:is(:hover,:focus-visible) .sst-method__rule{transform:scaleX(1)}
}
/* Industry service list: the client's sentence extracted into tiles. */
.sst-svclist{margin-top:14px;padding:30px 30px 32px;border:1px solid #E7E8EA;border-radius:18px;background:#FAFAFA}
.sst-svclist__t{margin:0 0 20px;font-size:18.7px;font-weight:700;letter-spacing:-.015em;line-height:1.4;color:var(--ink);text-wrap:pretty}
.sst-svclist__grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px}
.sst-svclist__grid li{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;background:#fff;border:1px solid #E4E6E8;border-radius:12px;font-size:16px;font-weight:600;color:#2A2E33}
.sst-svclist__grid li span{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red)}
.sst-svclist__out{margin:20px 0 0;font-size:16.5px;color:var(--body)}
.sst-svclist__out a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(239,65,54,.35)}
.sst-svclist__out a:hover{border-color:var(--red)}
/* 2026-10-06: the service hero is the name at full size (a styled ), and
the keyword headline is the page's one
, bold, above the lead. */
.sst-article__h1{margin:0 0 22px;font-size:clamp(28.6px,2.86vw,39.6px);font-weight:700;letter-spacing:-.03em;line-height:1.14;color:var(--ink);max-width:26ch;text-wrap:balance}
/* 2026-10-13: industry pages follow the service pattern — name in the hero
(a styled
), the keyword headline as the one
in the intro column. */
.sst-indintro__h1{margin:16px 0 0;font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:var(--ink);max-width:16ch;text-wrap:balance}
.sst-indintro__h1 + .sst-indintro__bar{margin-top:26px}
/* Mobile menu: Industries is an open block of the six, two to a row
(2026-10-19). Overrides the big row style the list's links share. */
.sst-mobilenav__group{padding:13px 0 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sst-mobilenav__gt{color:#fff;font-size:26.4px;font-weight:600}
.sst-mobilenav__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:10px}
.sst-mobilenav__list .sst-mobilenav__grid a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;color:rgba(255,255,255,.72);font-size:16px;font-weight:500}
.sst-mobilenav__list .sst-mobilenav__grid a[aria-current="page"]{color:#fff}
.sst-mobilenav__grid .sst-arrow{color:var(--red)}
/* Divisions intro heading (client 2026-10-19) */
.sst-divintro__h2{margin:0 auto 22px;max-width:22ch;font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--ink);text-align:center;text-wrap:balance}