/* ==========================================================================
AL MADEENA STEEL WORKS L.L.C — Design System
Premium industrial · dark / steel / silver / white · brand red accent
========================================================================== */
/* ---------- 1. Tokens ---------- */
:root{
/* Surfaces */
--bg: #0E1114;
--bg-2: #14181C;
--bg-3: #1A1F24;
--panel: #1E2429;
--panel-2: #232A30;
--ink: #1E1E1E;
/* Steel scale */
--steel-900: #2F343A;
--steel-700: #454C54;
--steel-500: #555555;
--steel-300: #8A939B;
--steel-200: #AFB8BF;
--silver: #C0C0C0;
--white: #FFFFFF;
/* Text */
--tx: #EEF1F3;
--tx-2: #A8B1B8;
--tx-3: #79838B;
/* Brand */
--red: #DE3B32;
--red-hi: #F0554B;
--red-dim: rgba(222,59,50,.14);
--blue: #5B8FB0; /* steel blue */
--blue-hi: #7FB0CE;
--blue-dim: rgba(91,143,176,.14);
--amber: #E08A2F; /* industrial highlight */
--amber-dim: rgba(224,138,47,.14);
/* Lines & glass */
--line: rgba(255,255,255,.09);
--line-2: rgba(255,255,255,.15);
--line-3: rgba(255,255,255,.04);
--glass: rgba(20,24,28,.72);
--glass-2: rgba(255,255,255,.04);
--glass-card: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 62%);
--glass-blur: blur(14px) saturate(150%);
/* Machined edge — the thin bright top rim on lit metal */
--rim: inset 0 1px 0 rgba(255,255,255,.09);
--rim-hi: inset 0 1px 0 rgba(255,255,255,.16);
/* Elevation */
--el-1: 0 1px 2px rgba(0,0,0,.28);
--el-2: 0 10px 26px -8px rgba(0,0,0,.55);
--el-3: 0 26px 60px -14px rgba(0,0,0,.72);
/* Type */
--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Fluid scale */
--t-hero: clamp(2.55rem, 1rem + 5.2vw, 6rem);
--t-h1: clamp(2.3rem, 1.2rem + 4.2vw, 4.6rem);
--t-h2: clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
--t-h3: clamp(1.35rem, 1rem + 1.3vw, 1.95rem);
--t-h4: clamp(1.1rem, .95rem + .6vw, 1.35rem);
--t-body: clamp(.975rem, .93rem + .18vw, 1.075rem);
--t-sm: .875rem;
--t-xs: .78rem;
--t-mono: .715rem;
/* Space */
--gut: clamp(1.15rem, .6rem + 2.2vw, 3.5rem);
--sec: clamp(4.5rem, 2.5rem + 7vw, 10rem);
--maxw: 1320px;
--maxw-wide: 1600px;
/* Motion */
--e-out: cubic-bezier(.22,1,.36,1);
--e-io: cubic-bezier(.65,.05,.36,1);
--d: .55s;
--r: 4px;
--r-lg: 8px;
--hdr: 84px;
}
/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x lives on , not — putting it on body turns body into a
nested scroll container and breaks programmatic scrolling and ScrollTrigger. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
margin:0;
background:var(--bg);
color:var(--tx);
font-family:var(--f-body);
font-size:var(--t-body);
line-height:1.68;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
body.no-scroll{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{
outline:2px solid var(--red-hi);
outline-offset:3px;
border-radius:2px;
}
/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--steel-700); border-radius:10px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--steel-500); }
/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,.display{
font-family:var(--f-display);
font-weight:800;
line-height:1.03;
letter-spacing:-.028em;
color:var(--white);
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.15; }
h4{ font-size:var(--t-h4); letter-spacing:-.012em; line-height:1.25; }
.steel-text{
background:linear-gradient(168deg,#FFFFFF 8%, #DDE3E7 38%, #9AA4AC 72%, #E7ECEF 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.lead{ font-size:clamp(1.02rem,.95rem + .5vw,1.28rem); color:var(--tx-2); line-height:1.62; font-weight:350; }
.muted{ color:var(--tx-2); }
.dim{ color:var(--tx-3); }
strong,b{ font-weight:650; color:var(--white); }
.accent{ color:var(--red); }
.accent-tech{ color:var(--blue); }
.mono{
font-family:var(--f-mono);
font-size:var(--t-mono);
letter-spacing:.22em;
text-transform:uppercase;
font-weight:500;
}
/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:calc(var(--sec) * .62); }
.section--flush-t{ padding-top:0; }
.grid{ display:grid; gap:clamp(1rem,.5rem + 1.6vw,2rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,1rem + 4vw,5.5rem); align-items:center; }
.split--top{ align-items:start; }
.split--40{ grid-template-columns:minmax(0,.78fr) minmax(0,1fr); }
/* The fixed social rail occupies the left 44px above 1024px — keep content clear of it. */
@media (min-width:1025px){
:root{ --gut:clamp(4rem, .6rem + 2.2vw, 4.5rem); }
}
/* Blueprint field */
.blueprint{ position:relative; isolation:isolate; }
.blueprint::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:
linear-gradient(to right, var(--line-3) 1px, transparent 1px),
linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
background-size:88px 88px;
mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}
/* ---------- 5. Section headers ---------- */
.sec-head{ max-width:64ch; margin-bottom:clamp(2.2rem,1.2rem + 2.6vw,4rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--wide{ max-width:none; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:end; }
.eyebrow{
display:inline-flex; align-items:center; gap:.6rem;
font-family:var(--f-mono); font-size:var(--t-mono);
letter-spacing:.24em; text-transform:uppercase;
color:var(--tx-3); margin-bottom:1.15rem; font-weight:500;
}
.eyebrow::before{
content:""; width:26px; height:1px; background:var(--red); flex:none;
}
.eyebrow--center{ justify-content:center; }
.sec-idx{
font-family:var(--f-mono); font-size:var(--t-mono); color:var(--red);
letter-spacing:.18em; font-weight:600;
}
.sec-head h2{ margin-bottom:1.1rem; }
.sec-head p{ color:var(--tx-2); max-width:62ch; }
.sec-head--center p{ margin-inline:auto; }
.rule{ height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.rule--ticked{ position:relative; }
.rule--ticked::before{ content:""; position:absolute; left:0; top:-3px; width:44px; height:7px; background:var(--red); }
/* ---------- 6. Buttons ---------- */
.btn{
--btn-bg:var(--white); --btn-tx:#101316; --btn-bd:var(--white);
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
padding:1.02rem 1.85rem; border-radius:var(--r);
background:var(--btn-bg); color:var(--btn-tx); border:1px solid var(--btn-bd);
font-family:var(--f-body); font-size:var(--t-sm); font-weight:600; letter-spacing:.015em;
cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
transition:color .4s var(--e-out), border-color .4s var(--e-out), transform .35s var(--e-out), background-color .4s var(--e-out);
}
.btn::after{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--red); transform:translateY(101%);
transition:transform .48s var(--e-out);
}
.btn:hover{ color:#fff; border-color:var(--red); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:scale(.975); }
.btn svg{ width:16px; height:16px; flex:none; transition:transform .4s var(--e-out); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ --btn-bg:transparent; --btn-tx:var(--tx); --btn-bd:var(--line-2); }
.btn--ghost:hover{ color:#fff; }
.btn--red{ --btn-bg:var(--red); --btn-tx:#fff; --btn-bd:var(--red); }
.btn--red::after{ background:var(--white); }
.btn--red:hover{ color:#101316; border-color:var(--white); }
/* WhatsApp — brand green, so the third hero CTA reads as its own channel */
.btn--wa{ --btn-bg:#1FA855; --btn-tx:#fff; --btn-bd:#1FA855; }
.btn--wa::after{ background:#178944; }
.btn--wa:hover{ color:#fff; border-color:#178944; }
.btn--wa:hover svg{ transform:none; }
.btn--sm{ padding:.72rem 1.25rem; font-size:var(--t-xs); }
.btn--lg{ padding:1.18rem 2.3rem; }
.btn--block{ width:100%; }
/* Text link with underline sweep */
.tlink{
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.2em; text-transform:uppercase;
color:var(--tx); padding-bottom:.42rem; position:relative; font-weight:500;
}
.tlink::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--line-2); }
.tlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-out); }
.tlink:hover::after{ transform:scaleX(1); }
.tlink svg{ width:14px; height:14px; transition:transform .4s var(--e-out); }
.tlink:hover svg{ transform:translateX(4px); }
/* ---------- 7. Preloader ---------- */
#preloader{
position:fixed; inset:0; z-index:9999; background:var(--bg);
display:grid; place-items:center; gap:1.4rem;
transition:opacity .7s var(--e-out), visibility .7s;
}
/* pointer-events go the instant it is dismissed: visibility transitions over
.7s, during which the full-viewport overlay would still swallow clicks */
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pl-inner{ display:grid; justify-items:center; gap:1.5rem; width:min(280px,60vw); }
.pl-mark{ width:82px; opacity:.95; animation:plPulse 1.9s var(--e-io) infinite; }
@keyframes plPulse{ 0%,100%{ opacity:.4; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-6px) } }
.pl-bar{ width:100%; height:2px; background:var(--line); overflow:hidden; }
.pl-bar i{ display:block; height:100%; width:0; background:var(--red); transition:width .3s linear; }
.pl-pct{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.24em; color:var(--tx-3); }
/* ---------- 8. Page transition veil ---------- */
#veil{
position:fixed; inset:0; z-index:9500; background:var(--bg);
transform:scaleY(0); transform-origin:bottom; pointer-events:none;
}
#veil.in{ transform:scaleY(1); transform-origin:bottom; transition:transform .55s var(--e-io); }
#veil.out{ transform:scaleY(0); transform-origin:top; transition:transform .55s var(--e-io); }
/* ---------- 9. Scroll progress + cursor glow ---------- */
#scrollbar-progress{
position:fixed; top:0; left:0; height:2px; width:100%; z-index:1200;
background:var(--red); transform:scaleX(0); transform-origin:left;
}
#glow{
position:fixed; top:0; left:0; width:520px; height:520px; z-index:0; pointer-events:none;
margin:-260px 0 0 -260px; border-radius:50%; opacity:0;
background:radial-gradient(circle, rgba(222,59,50,.10) 0%, rgba(91,143,176,.05) 40%, transparent 68%);
transition:opacity .6s var(--e-out);
will-change:transform;
}
body.pointer-fine #glow{ opacity:1; }
#particles{
position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; z-index:2; opacity:.85;
}
/* ---------- 10. Header ---------- */
.hdr{
position:fixed; top:0; left:0; right:0; z-index:1100;
transition:transform .55s var(--e-out), background-color .45s var(--e-out), border-color .45s, backdrop-filter .45s;
border-bottom:1px solid transparent;
}
.hdr.stuck{
background:var(--glass);
-webkit-backdrop-filter:blur(18px) saturate(160%);
backdrop-filter:blur(18px) saturate(160%);
border-bottom-color:var(--line);
}
.hdr.hidden{ transform:translateY(-100%); }
.hdr-bar{
height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.8rem; flex:none; }
.brand img{ width:46px; height:auto; }
.brand-tx{ display:grid; line-height:1.05; }
.brand-tx b{
font-family:var(--f-display); font-weight:800; font-size:.99rem;
letter-spacing:-.012em; color:var(--white);
}
.brand-tx span{
font-family:var(--f-mono); font-size:.575rem; letter-spacing:.3em;
color:var(--tx-3); text-transform:uppercase; margin-top:.16rem;
}
.nav{ display:flex; align-items:center; gap:.15rem; }
.nav > li{ position:relative; }
.nav a.nav-l{
display:flex; align-items:center; gap:.34rem;
padding:.7rem .82rem; font-size:.855rem; font-weight:500; color:var(--tx-2);
border-radius:var(--r); transition:color .3s var(--e-out);
position:relative;
}
.nav a.nav-l::after{
content:""; position:absolute; left:.82rem; right:.82rem; bottom:.42rem; height:1px;
background:var(--red); transform:scaleX(0); transform-origin:left;
transition:transform .42s var(--e-out);
}
.nav a.nav-l:hover, .nav a.nav-l[aria-current="page"]{ color:var(--white); }
.nav a.nav-l:hover::after, .nav a.nav-l[aria-current="page"]::after{ transform:scaleX(1); }
.nav .caret{ width:9px; height:9px; opacity:.55; transition:transform .35s var(--e-out); }
.nav li.open .caret{ transform:rotate(180deg); }
/* Mega menu */
.mega{
position:absolute; top:calc(100% + 14px); left:50%; translate:-50% 0;
width:min(880px, calc(100vw - 3rem));
background:rgba(18,22,26,.95);
-webkit-backdrop-filter:blur(22px) saturate(160%);
backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:0 34px 80px -20px rgba(0,0,0,.75);
padding:1.6rem; opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .38s var(--e-out), transform .38s var(--e-out), visibility .38s;
}
.nav li.open > .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; }
.mega-i{
display:grid; gap:.18rem; padding:.78rem .9rem; border-radius:var(--r);
border:1px solid transparent; transition:background-color .3s, border-color .3s, transform .3s var(--e-out);
}
.mega-i:hover{ background:var(--glass-2); border-color:var(--line); transform:translateX(3px); }
.mega-i b{ font-size:.855rem; font-weight:600; color:var(--tx); }
.mega-i:hover b{ color:var(--white); }
.mega-i span{ font-size:.755rem; color:var(--tx-3); line-height:1.45; }
.mega-foot{
margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.mega-foot p{ font-size:var(--t-xs); color:var(--tx-3); }
.hdr-act{ display:flex; align-items:center; gap:.55rem; flex:none; }
.icon-btn{
width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r);
border:1px solid var(--line); color:var(--tx-2);
transition:color .3s, border-color .3s, background-color .3s;
}
.icon-btn:hover{ color:var(--white); border-color:var(--line-2); background:var(--glass-2); }
.icon-btn svg{ width:17px; height:17px; }
.burger{ display:none; width:44px; height:44px; place-items:center; border:1px solid var(--line); border-radius:var(--r); }
.burger i{ display:block; width:19px; height:1.5px; background:var(--tx); margin:3.5px 0; transition:transform .4s var(--e-out), opacity .3s; }
.burger.on i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.on i:nth-child(2){ opacity:0; }
.burger.on i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* Mobile drawer */
.drawer{
position:fixed; inset:0; z-index:1090; background:var(--bg-2);
transform:translateX(100%); transition:transform .6s var(--e-io);
display:flex; flex-direction:column; padding-top:var(--hdr); overflow-y:auto;
overscroll-behavior:contain;
}
.drawer.on{ transform:translateX(0); }
.drawer-in{ padding:1.5rem var(--gut) 3rem; display:grid; gap:.15rem; }
.drawer a.d-l{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:1.05rem 0; border-bottom:1px solid var(--line);
font-family:var(--f-display); font-weight:700; font-size:1.32rem; letter-spacing:-.02em; color:var(--tx);
}
.drawer a.d-l span{ font-family:var(--f-mono); font-size:var(--t-mono); color:var(--tx-3); letter-spacing:.18em; }
.drawer .d-sub{ display:grid; gap:0; padding:.25rem 0 .8rem; }
.drawer .d-sub a{ padding:.6rem 0 .6rem 1rem; font-size:.9rem; color:var(--tx-2); border-left:1px solid var(--line); }
.drawer .d-sub a:hover{ color:var(--white); border-left-color:var(--red); }
.drawer-cta{ margin-top:1.8rem; display:grid; gap:.7rem; }
.drawer-meta{ margin-top:2.2rem; display:grid; gap:.5rem; font-size:var(--t-sm); color:var(--tx-2); }
/* ---------- 11. Hero ---------- */
.hero{
position:relative; min-height:100svh; display:flex; align-items:flex-end;
padding-top:calc(var(--hdr) + 3rem); padding-bottom:0; overflow:hidden;
isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--bg); }
/* object-fit:cover keeps the framing correct at every aspect ratio — from a
tall phone through to an ultrawide monitor — with no letterboxing */
.hero-media video, .hero-media img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; object-position:center 42%;
/* no filter — the footage plays in its own colour. Legibility is handled by
the directional scrim below, which darkens only where the text sits. */
}
/* On a tall phone a 16:9 clip is cropped hard on both sides, which pushes the
machine and operator out of frame. Biasing upward keeps the working area
visible above the headline instead of showing only floor tiles. */
@media (max-width:767px){
.hero-media video, .hero-media img{ object-position:58% 30%; }
}
/* the still sits above the video and fades out once real frames arrive, so
there is never a flash of black between poster and playback */
.hero-media .hero-fallback{ z-index:1; transition:opacity .7s var(--e-out); }
.hero-media video.ready + .hero-fallback{ opacity:0; }
.hero-media video{ z-index:0; }
/* Hero sound toggle — video autoplays muted because browsers require it */
.hero-sound{
/* top-right, under the header: the CTA row fills the bottom-left and the
scroll hint owns the bottom-right, so this is the only corner that stays
clear from 360px to ultrawide */
position:absolute; z-index:5; right:var(--gut);
top:calc(var(--hdr) + 1.1rem);
display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
padding:.65rem 1rem; border-radius:100px;
background:var(--glass); border:1px solid var(--line-2); color:var(--tx-2);
-webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
transition:color .35s, border-color .35s, background-color .35s;
}
.hero-sound:hover{ color:var(--white); }
.hero-sound svg{ width:15px; height:15px; }
.hero-sound.on{ color:var(--amber); border-color:var(--amber); background:var(--amber-dim); }
@media (max-width:560px){
.hero-sound .hs-tx{ display:none; }
.hero-sound{ padding:.62rem; }
}
/* Directional scrim. The old version laid two near-opaque gradients over the
whole frame, which flattened the footage. This darkens only the lower-left
quadrant the headline occupies and fades the very bottom into the page,
leaving the upper right of the video at full strength. */
.hero-media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
/* short, strong band behind the fixed header so the nav stays legible
over bright frames without touching the rest of the picture */
linear-gradient(180deg, rgba(14,17,20,.86) 0%, rgba(14,17,20,.40) 9%, rgba(14,17,20,0) 20%),
linear-gradient(180deg, rgba(14,17,20,0) 40%, rgba(14,17,20,.34) 62%, rgba(14,17,20,.88) 90%, var(--bg) 100%),
linear-gradient(90deg, rgba(14,17,20,.76) 0%, rgba(14,17,20,.38) 38%, rgba(14,17,20,0) 68%);
}
.hero-scrim{
position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(ellipse 60% 50% at 18% 62%, rgba(222,59,50,.10), transparent 62%);
}
.hero-in{ width:100%; padding-bottom:clamp(2.5rem,1rem + 4vw,4.5rem); position:relative; z-index:3; }
.hero-tag{
display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.8rem;
padding:.5rem .95rem .5rem .6rem; border:1px solid var(--line-2); border-radius:100px;
background:rgba(255,255,255,.045); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.2em; color:var(--tx-2); text-transform:uppercase;
}
.hero-tag i{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--red-dim); animation:blip 2.4s infinite; }
@keyframes blip{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.hero h1{
font-size:var(--t-hero); line-height:1.0; letter-spacing:-.04em; font-weight:800;
max-width:24ch; margin-bottom:1.5rem;
/* the video is unfiltered now, so bright frames can pass behind the type —
a soft shadow holds contrast without darkening the footage */
text-shadow:0 2px 22px rgba(6,9,11,.72), 0 1px 3px rgba(6,9,11,.5);
}
/* .ln clips the slide-up reveal — the padding keeps descenders (g, y) from being cut */
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero h1 .ln > span{ display:block; }
.hero-sub{ max-width:56ch; margin-bottom:2.2rem; text-shadow:0 1px 14px rgba(6,9,11,.7); }
/* Launch offer — the one loud element in the hero, so it reads before the
buttons without competing with the headline */
.promo{
display:inline-flex; align-items:center; gap:1rem; margin-bottom:1.9rem;
padding:.75rem 1.35rem .75rem .85rem; border-radius:100px; max-width:100%;
background:linear-gradient(100deg, rgba(222,59,50,.22), rgba(222,59,50,.08));
border:1px solid rgba(240,85,75,.55);
-webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
box-shadow:0 10px 34px -12px rgba(222,59,50,.6), var(--rim);
transition:border-color .4s var(--e-out), transform .4s var(--e-out), box-shadow .4s;
}
.promo:hover{ transform:translateY(-2px); border-color:var(--red-hi);
box-shadow:0 16px 44px -12px rgba(222,59,50,.75), var(--rim-hi); }
/* flex-wrap + align-content is what actually centres this. With a single
baseline-aligned flex line the line sits at the top of the cross axis, so
"50%" rode high in the circle; wrapping lets align-content centre it while
the digits and the % stay on a shared baseline. */
.promo-pct{
display:flex; flex-wrap:wrap; justify-content:center;
align-items:baseline; align-content:center;
flex:none; width:54px; height:54px; border-radius:50%;
background:var(--red); color:#fff; font-family:var(--f-display); font-weight:900;
letter-spacing:-.03em; line-height:1;
}
.promo-pct b{ font-size:1.28rem; line-height:1; }
.promo-pct i{ font-style:normal; font-size:.68rem; line-height:1; margin-left:.06em; }
.promo-tx{ display:grid; gap:.2rem; min-width:0; }
.promo-tx b{ font-size:.94rem; font-weight:700; color:var(--white); letter-spacing:-.01em; }
.promo-tx span{ font-size:.775rem; color:var(--tx-2); line-height:1.45; }
.promo-go{ flex:none; color:var(--red-hi); display:grid; place-items:center; transition:transform .4s var(--e-out); }
.promo-go svg{ width:17px; height:17px; }
.promo:hover .promo-go{ transform:translateX(4px); }
@media (max-width:600px){
.promo{ gap:.75rem; padding:.6rem 1rem .6rem .6rem; }
.promo-pct{ width:44px; height:44px; }
.promo-pct b{ font-size:1.08rem; }
.promo-tx b{ font-size:.845rem; }
.promo-tx span{ font-size:.72rem; }
.promo-go{ display:none; }
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
/* Hero stat rail */
.hero-stats{
margin-top:clamp(1.8rem,1rem + 2.4vw,3.2rem);
border-top:1px solid var(--line);
display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-stats .st{ padding:1.35rem 1.6rem 1.35rem 0; border-right:1px solid var(--line); }
.hero-stats .st:last-child{ border-right:0; }
.hero-stats .st:not(:first-child){ padding-left:1.6rem; }
.st-n{
font-family:var(--f-display); font-weight:800; letter-spacing:-.04em; line-height:1;
font-size:clamp(2rem,1.2rem + 2.4vw,3.15rem); color:var(--white);
display:flex; align-items:baseline; gap:.06em;
/* counters tick upward — fixed-width digits stop the row jittering */
font-variant-numeric:tabular-nums;
}
.st-n .suf{ color:var(--red); font-size:.62em; }
.st-l{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.19em; color:var(--tx-3); text-transform:uppercase; margin-top:.7rem; }
.scroll-hint{
position:absolute; right:var(--gut); bottom:2.2rem; z-index:4;
display:flex; align-items:center; gap:.7rem;
font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.22em; color:var(--tx-3); text-transform:uppercase;
/* decorative and aria-hidden: it sits in the same corner as controls, so it
must never swallow their clicks */
pointer-events:none;
}
.scroll-hint i{ display:block; width:1px; height:46px; background:linear-gradient(var(--red),transparent); }
/* ---------- 12. Page hero (inner pages) ---------- */
.phero{
position:relative; padding-top:calc(var(--hdr) + clamp(4rem,2rem + 6vw,8rem));
padding-bottom:clamp(3rem,1.5rem + 4vw,5.5rem); overflow:hidden; isolation:isolate;
border-bottom:1px solid var(--line);
}
.phero::before{
content:""; position:absolute; inset:0; z-index:-2;
background:
radial-gradient(ellipse 70% 90% at 78% 10%, rgba(91,143,176,.14), transparent 60%),
radial-gradient(ellipse 50% 70% at 8% 90%, rgba(222,59,50,.10), transparent 62%),
linear-gradient(180deg,var(--bg-2),var(--bg));
}
.phero::after{
content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
background-image:
linear-gradient(to right, var(--line-3) 1px, transparent 1px),
linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
background-size:80px 80px;
mask-image:linear-gradient(180deg,#000,transparent);
-webkit-mask-image:linear-gradient(180deg,#000,transparent);
}
.phero h1{ max-width:19ch; margin-bottom:1.3rem; }
.phero p{ max-width:60ch; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-bottom:1.6rem;
font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3); }
.crumbs a:hover{ color:var(--tx); }
.crumbs .sep{ opacity:.4; }
.crumbs [aria-current]{ color:var(--red); }
/* ---------- 13. Cards ---------- */
.card{
position:relative; background:var(--bg-2); border:1px solid var(--line);
border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
box-shadow:var(--rim), var(--el-1);
transition:border-color .45s var(--e-out), transform .5s var(--e-out),
background-color .45s, box-shadow .5s var(--e-out);
}
.card::before{
content:""; position:absolute; inset:0; z-index:-1; opacity:0;
background:var(--glass-card);
transition:opacity .5s var(--e-out);
}
/* Raking light sweep — reads as a highlight travelling across brushed steel.
.why owns its ::after for the left rail, so it opts out. */
.card:not(.why)::after{
content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.07) 48%, transparent);
transform:skewX(-14deg); opacity:0; pointer-events:none;
transition:opacity .35s var(--e-out);
}
.card:hover{
border-color:var(--line-2); transform:translateY(-5px);
box-shadow:var(--rim-hi), var(--el-3);
}
.card:hover::before{ opacity:1; }
.card:not(.why):hover::after{ opacity:1; animation:sweep 1.05s var(--e-out); }
@keyframes sweep{ to{ left:118%; } }
/* Service card */
.svc{ display:grid; padding:clamp(1.6rem,1rem + 1.3vw,2.2rem); min-height:290px; grid-template-rows:auto auto 1fr auto; gap:1.15rem; }
/* photo sits flush to the card edges, above the padded content */
.svc-shot{
margin:calc(-1 * clamp(1.6rem,1rem + 1.3vw,2.2rem));
margin-bottom:.35rem; border:0; border-bottom:1px solid var(--line);
border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:none;
}
.svc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.svc-ico{
width:52px; height:52px; display:grid; place-items:center; flex:none;
border:1px solid var(--line-2); border-radius:var(--r); color:var(--tx);
background:var(--glass-2); transition:border-color .45s, color .45s, background-color .45s, transform .5s var(--e-out);
}
.svc-ico svg{ width:24px; height:24px; }
.svc:hover .svc-ico{ border-color:var(--red); color:var(--red); background:var(--red-dim); transform:rotate(-4deg) scale(1.04); }
.svc-num{ font-family:var(--f-mono); font-size:var(--t-mono); color:var(--tx-3); letter-spacing:.16em; }
.svc h3{ font-size:1.22rem; margin-bottom:.6rem; }
.svc p{ font-size:.895rem; color:var(--tx-2); line-height:1.62; }
.svc-go{ display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:var(--t-mono);
letter-spacing:.2em; text-transform:uppercase; color:var(--tx-3); transition:color .4s, gap .4s var(--e-out); }
.svc:hover .svc-go{ color:var(--red); gap:.85rem; }
.svc-go svg{ width:13px; height:13px; }
/* Feature / why card */
.why{ padding:clamp(1.5rem,1rem + 1.1vw,2rem); display:grid; gap:.95rem; align-content:start; }
.why-ico{ width:40px; height:40px; color:var(--red); }
.why-ico svg{ width:100%; height:100%; }
.why h4{ font-size:1.055rem; }
.why p{ font-size:.87rem; color:var(--tx-2); line-height:1.6; }
.why::after{
content:""; position:absolute; left:0; top:0; width:2px; height:100%;
background:var(--red); transform:scaleY(0); transform-origin:top;
transition:transform .55s var(--e-out);
}
.why:hover::after{ transform:scaleY(1); }
/* Industry tile */
.ind{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); min-height:210px;
display:flex; align-items:flex-end; padding:1.4rem; background:var(--bg-2); isolation:isolate;
transition:border-color .45s, transform .5s var(--e-out); }
.ind::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(160deg,var(--bg-3),var(--bg-2) 60%);
transition:transform .7s var(--e-out);
}
.ind::after{
content:""; position:absolute; inset:0; z-index:-1; opacity:0;
background:linear-gradient(160deg, rgba(222,59,50,.16), transparent 60%);
transition:opacity .5s var(--e-out);
}
.ind:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.ind:hover::after{ opacity:1; }
.ind-ico{ position:absolute; top:1.4rem; left:1.4rem; width:30px; height:30px; color:var(--tx-3); transition:color .45s, transform .5s var(--e-out); }
.ind:hover .ind-ico{ color:var(--red); transform:scale(1.1); }
.ind h4{ font-size:1.03rem; }
.ind p{ font-size:.78rem; color:var(--tx-3); margin-top:.3rem; }
/* Project card */
.proj{
position:relative; display:block; overflow:hidden; border-radius:var(--r-lg);
border:1px solid var(--line); background:var(--bg-2); isolation:isolate;
transition:border-color .45s, transform .55s var(--e-out);
transform-style:preserve-3d;
}
.proj-fig{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); }
.proj-fig img{ width:100%; height:100%; object-fit:cover; transition:transform .95s var(--e-out), filter .6s; filter:saturate(.7) brightness(.85); }
.proj:hover .proj-fig img{ transform:scale(1.07); filter:saturate(.95) brightness(1); }
.proj-fig::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 42%, rgba(10,13,15,.9) 100%);
}
.proj-body{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem; z-index:2; }
.proj-cat{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:.5rem; display:block; }
.proj h4{ font-size:1.1rem; }
.proj-meta{ font-size:.78rem; color:var(--tx-2); margin-top:.35rem; }
.proj:hover{ border-color:var(--line-2); }
.proj-plus{
position:absolute; top:1.1rem; right:1.1rem; z-index:3; width:38px; height:38px; border-radius:50%;
display:grid; place-items:center; background:rgba(14,17,20,.7); border:1px solid var(--line-2);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
opacity:0; transform:scale(.7); transition:opacity .4s var(--e-out), transform .4s var(--e-out), background-color .3s;
}
.proj:hover .proj-plus{ opacity:1; transform:scale(1); }
.proj-plus:hover{ background:var(--red); border-color:var(--red); }
.proj-plus svg{ width:15px; height:15px; }
/* Masonry-ish gallery grid */
.masonry{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,.4rem + 1vw,1.4rem); grid-auto-flow:dense; }
.masonry > *{ grid-column:span 4; }
.masonry > .m-wide{ grid-column:span 6; }
.masonry > .m-tall{ grid-column:span 4; }
.masonry > .m-tall .proj-fig{ aspect-ratio:3/4; }
.masonry > .m-big{ grid-column:span 8; }
.masonry > .m-big .proj-fig{ aspect-ratio:16/10; }
/* Filter bar */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem; }
.filters button{
padding:.6rem 1.15rem; border:1px solid var(--line); border-radius:100px;
font-size:var(--t-xs); font-weight:500; color:var(--tx-2);
transition:color .3s, border-color .3s, background-color .3s;
}
.filters button:hover{ color:var(--white); border-color:var(--line-2); }
.filters button.on{ background:var(--white); border-color:var(--white); color:#101316; }
/* Blog card */
.post{ display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
.post-fig{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.post-fig img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e-out); filter:saturate(.75) brightness(.9); }
.post:hover .post-fig img{ transform:scale(1.06); }
.post-body{ padding:1.5rem; display:grid; gap:.75rem; align-content:start; }
.post-meta{ display:flex; gap:.9rem; align-items:center; font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3); }
.post-meta .tag{ color:var(--red); }
.post h4{ font-size:1.08rem; line-height:1.28; }
.post p{ font-size:.865rem; color:var(--tx-2); }
/* Testimonial */
.quote{
padding:clamp(1.8rem,1.2rem + 1.6vw,2.6rem); display:grid; gap:1.5rem; align-content:space-between;
min-height:290px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
height:100%;
}
.quote-mark{ font-family:var(--f-display); font-size:3.2rem; line-height:.6; color:var(--red); opacity:.55; }
.quote p{ font-size:1.02rem; line-height:1.62; color:var(--tx); }
.quote-by{ display:flex; align-items:center; gap:.9rem; padding-top:1.2rem; border-top:1px solid var(--line); }
/* Monogram avatar. A real photograph can be dropped in as an ![]()
child and
it covers the monogram — no other change needed. Stock portraits are
deliberately not used here: attaching a stranger's face to a client
testimonial misrepresents who said it. */
.quote-av{
position:relative; width:46px; height:46px; border-radius:50%; flex:none;
display:grid; place-items:center; overflow:hidden; isolation:isolate;
font-family:var(--f-display); font-weight:800; font-size:1.02rem;
letter-spacing:.02em; color:#fff;
background:
linear-gradient(150deg, var(--av-a, #3A4550), var(--av-b, #222A31));
border:1px solid var(--line-2);
box-shadow:0 4px 14px -4px rgba(0,0,0,.6);
text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.quote-av img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.quote-by b{ display:block; font-size:.885rem; }
/* :not(.quote-av) matters — this selector outranks .quote-av on specificity
and would otherwise force the avatar back to a small, dim, left-aligned
block, clipping the initials */
.quote-by span:not(.quote-av){ display:block; font-size:.755rem; color:var(--tx-3); }
.stars{ display:flex; gap:.15rem; color:var(--amber); }
.stars svg{ width:13px; height:13px; }
/* ---------- 13b. Photo slots ----------
Reserved, correctly-proportioned space for the client's own photography.
Drop a real ![]()
in as the first child and the placeholder hides itself —
no CSS change needed. Sized by aspect-ratio so adding the photo causes
zero layout shift. */
.shot{
position:relative; display:block; overflow:hidden;
border-radius:var(--r-lg); background:var(--bg-3);
border:1px solid var(--line); isolation:isolate;
box-shadow:var(--rim), var(--el-1);
}
.shot--43{ aspect-ratio:4/3; }
.shot--169{ aspect-ratio:16/9; }
.shot--11{ aspect-ratio:1/1; }
.shot--34{ aspect-ratio:3/4; }
.shot > img, .shot > video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
transition:transform .95s var(--e-out), filter .6s;
}
.shot:hover > img{ transform:scale(1.05); }
/* placeholder: machined hatch + upload label, sits under any real media */
.shot-ph{
position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:.7rem;
justify-items:center; text-align:center; padding:1.2rem;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 10px, transparent 10px 20px),
linear-gradient(150deg, var(--bg-3), var(--bg-2));
}
.shot-ph svg{ width:26px; height:26px; color:var(--steel-700); }
.shot-ph b{
font-family:var(--f-mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--tx-3); font-weight:500;
}
.shot-ph span{ font-size:.75rem; color:var(--steel-700); max-width:30ch; line-height:1.5; }
/* corner ticks — reads as a drawing frame rather than a broken image */
.shot-ph::before, .shot-ph::after{
content:""; position:absolute; width:14px; height:14px; border:1px solid var(--line-2);
}
.shot-ph::before{ top:10px; left:10px; border-right:0; border-bottom:0; }
.shot-ph::after{ bottom:10px; right:10px; border-left:0; border-top:0; }
/* caption strip */
.shot-cap{
position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .9rem;
font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--tx-2); background:linear-gradient(180deg,transparent,rgba(10,13,15,.88));
}
/* ---------- 14. Process timeline ---------- */
.tl{ position:relative; display:grid; gap:0; }
.tl::before{
content:""; position:absolute; left:26px; top:8px; bottom:8px; width:1px;
background:repeating-linear-gradient(var(--line-2) 0 5px, transparent 5px 11px);
}
.tl-fill{ position:absolute; left:26px; top:8px; width:1px; background:var(--red); transform-origin:top; }
.tl-i{ display:grid; grid-template-columns:54px minmax(0,1fr); gap:clamp(1rem,.6rem + 1.4vw,2.2rem); padding:1.5rem 0; position:relative; }
.tl-dot{
width:14px; height:14px; margin-left:20px; margin-top:.55rem; border-radius:50%; flex:none;
background:var(--bg); border:1px solid var(--line-2); position:relative; z-index:2;
transition:background-color .5s var(--e-out), border-color .5s, box-shadow .5s;
}
.tl-i.on .tl-dot{ background:var(--red); border-color:var(--red); box-shadow:0 0 0 5px var(--red-dim); }
.tl-body{ display:grid; gap:.5rem; }
.tl-step{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.2em; color:var(--red); text-transform:uppercase; }
.tl-body h4{ font-size:1.18rem; }
.tl-body p{ font-size:.885rem; color:var(--tx-2); max-width:60ch; }
/* Milestones (about) */
.mile{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,.8rem + 1.6vw,2.6rem); padding:1.7rem 0; border-bottom:1px solid var(--line); }
.mile:last-child{ border-bottom:0; }
.mile-y{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);
letter-spacing:-.03em; color:var(--steel-700); min-width:5ch; transition:color .5s var(--e-out); }
.mile:hover .mile-y{ color:var(--red); }
.mile h4{ font-size:1.08rem; margin-bottom:.4rem; }
.mile p{ font-size:.875rem; color:var(--tx-2); }
/* ---------- 15. Stat blocks & progress ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat-grid .st{ padding:clamp(1.6rem,1rem + 1.5vw,2.4rem); border-right:1px solid var(--line); background:var(--bg-2); }
.stat-grid .st:last-child{ border-right:0; }
.cap-k{
display:block; font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.19em;
text-transform:uppercase; color:var(--blue); margin-bottom:.75rem;
}
.bars{ display:grid; gap:1.5rem; }
.bar-i{ display:grid; gap:.6rem; }
.bar-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.bar-top b{ font-size:.895rem; font-weight:600; color:var(--tx); }
.bar-top span{ font-family:var(--f-mono); font-size:var(--t-mono); color:var(--blue-hi); letter-spacing:.14em;
font-variant-numeric:tabular-nums; }
.bar-tr{ height:3px; background:var(--line); overflow:hidden; border-radius:3px; }
.bar-tr i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-hi)); border-radius:3px; }
/* Spec list */
.specs{ display:grid; gap:0; border-top:1px solid var(--line); }
.spec{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:1rem;
padding:1.05rem 0; border-bottom:1px solid var(--line); align-items:baseline;
transition:border-color .4s; }
.spec:hover{ border-bottom-color:var(--blue-dim); }
.spec dt{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.spec dd{ margin:0; font-size:.9rem; color:var(--tx); }
/* Check list */
.checks{ display:grid; gap:.85rem; }
.checks li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; align-items:start; font-size:.9rem; color:var(--tx-2); }
.checks svg{ width:17px; height:17px; color:var(--red); margin-top:.22rem; flex:none; }
.checks b{ color:var(--white); }
/* ---------- 15b. Forge band (cutting / welding animation) ---------- */
.forge{
position:relative; overflow:hidden; isolation:isolate;
padding-block:clamp(5rem,3rem + 7vw,9rem);
border-block:1px solid var(--line);
background:linear-gradient(180deg,#0B0E10,#141A1F 55%,#0B0E10);
}
.forge > #forge-cv, .forge .forge-vid{
position:absolute; inset:0; width:100%; height:100%; z-index:-2;
}
.forge .forge-vid{ object-fit:cover; filter:saturate(.5) contrast(1.15) brightness(.5); }
.forge-scrim{
position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(ellipse 55% 60% at 50% 58%, rgba(224,138,47,.13), transparent 68%),
linear-gradient(180deg, rgba(11,14,16,.82), rgba(11,14,16,.55) 45%, rgba(11,14,16,.92));
}
.forge-in{ position:relative; z-index:2; text-align:center; display:grid; justify-items:center; gap:1.1rem; }
.forge-in h2{ max-width:18ch; }
.forge-in p{ color:var(--tx-2); max-width:58ch; }
.forge-cta{ justify-content:center; margin-top:.8rem; }
/* Sound toggle — off by default; audio is synthesised on first press */
.forge-sound{
position:absolute; top:clamp(1rem,2vw,2rem); right:clamp(1rem,2vw,2rem); z-index:3;
display:inline-flex; align-items:center; gap:.55rem;
padding:.6rem .95rem; border-radius:100px; cursor:pointer;
background:var(--glass); border:1px solid var(--line-2); color:var(--tx-2);
-webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
transition:color .35s, border-color .35s, background-color .35s;
}
.forge-sound:hover{ color:var(--white); border-color:var(--line-2); }
.forge-sound svg{ width:15px; height:15px; }
.forge-sound.on{ color:var(--amber); border-color:var(--amber); background:var(--amber-dim); }
@media (max-width:560px){
.forge-sound .fs-tx{ display:none; }
.forge-sound{ padding:.6rem; }
}
/* ---------- 16. Marquee (partners) ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:1.9rem;
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee-t{ display:flex; gap:clamp(2.5rem,1.5rem + 3vw,5rem); width:max-content; animation:mq 42s linear infinite; }
.marquee:hover .marquee-t{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%); } }
.mq-i{ font-family:var(--f-display); font-weight:700; font-size:clamp(.95rem,.85rem + .4vw,1.2rem);
letter-spacing:-.01em; color:var(--steel-700); white-space:nowrap; transition:color .4s; }
.mq-i:hover{ color:var(--silver); }
/* ---------- 17. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-i{ border-bottom:1px solid var(--line); }
.faq-q{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
padding:1.45rem 0; text-align:left; font-family:var(--f-display); font-weight:700;
font-size:clamp(1rem,.94rem + .32vw,1.14rem); letter-spacing:-.015em; color:var(--tx);
transition:color .35s;
}
.faq-q:hover, .faq-i.on .faq-q{ color:var(--white); }
.faq-ic{ width:32px; height:32px; flex:none; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center;
position:relative; transition:border-color .4s, background-color .4s; }
.faq-i.on .faq-ic{ background:var(--red); border-color:var(--red); }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .42s var(--e-out), opacity .3s; }
.faq-ic::before{ width:11px; height:1.5px; }
.faq-ic::after{ width:1.5px; height:11px; }
.faq-i.on .faq-ic{ color:#fff; }
.faq-i.on .faq-ic::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ overflow:hidden; height:0; }
.faq-a > div{ padding-bottom:1.55rem; max-width:74ch; color:var(--tx-2); font-size:.925rem; }
/* ---------- 18. Forms ---------- */
.form{ display:grid; gap:1.15rem; }
.f-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
.field{ display:grid; gap:.5rem; position:relative; }
.field > label{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3); }
.field .req{ color:var(--red); }
.input, .field input, .field select, .field textarea{
width:100%; padding:.95rem 1.05rem; background:var(--bg-2);
border:1px solid var(--line); border-radius:var(--r); color:var(--tx);
font-size:.925rem; transition:border-color .35s, background-color .35s, box-shadow .35s;
appearance:none;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A939B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 1rem center; background-size:15px; padding-right:2.6rem;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--tx-3); }
.field input:focus,.field select:focus,.field textarea:focus{
outline:none; border-color:var(--red); background:var(--bg-3); box-shadow:0 0 0 3px var(--red-dim);
}
.field.err input,.field.err select,.field.err textarea{ border-color:var(--red); }
.f-err{ font-size:var(--t-xs); color:var(--red-hi); display:none; }
.field.err .f-err{ display:block; }
.drop{
border:1px dashed var(--line-2); border-radius:var(--r); padding:1.5rem; text-align:center;
cursor:pointer; transition:border-color .35s, background-color .35s;
display:grid; gap:.45rem; place-items:center;
}
.drop:hover,.drop.over{ border-color:var(--red); background:var(--red-dim); }
.drop svg{ width:22px; height:22px; color:var(--tx-3); }
.drop b{ font-size:.885rem; }
.drop span{ font-size:var(--t-xs); color:var(--tx-3); }
.drop input{ display:none; }
.drop-list{ display:grid; gap:.4rem; }
.drop-f{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .85rem;
background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r); font-size:var(--t-xs); }
.drop-f button{ color:var(--tx-3); }
.drop-f button:hover{ color:var(--red); }
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.consent{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; align-items:start; font-size:var(--t-xs); color:var(--tx-3); }
.consent input{ width:16px; height:16px; margin-top:.18rem; accent-color:var(--red); }
.consent a{ color:var(--tx-2); text-decoration:underline; text-underline-offset:2px; }
.form-note{ font-size:var(--t-xs); color:var(--tx-3); }
.alert{ padding:.95rem 1.1rem; border-radius:var(--r); font-size:.875rem; display:none; border:1px solid; }
.alert.on{ display:block; }
.alert--ok{ background:rgba(74,160,110,.1); border-color:rgba(74,160,110,.4); color:#8FD3AE; }
.alert--bad{ background:var(--red-dim); border-color:rgba(222,59,50,.42); color:#F19790; }
/* Newsletter */
.nl{ display:flex; gap:.6rem; flex-wrap:wrap; }
.nl input{ flex:1 1 220px; padding:.9rem 1rem; background:var(--bg-2); border:1px solid var(--line);
border-radius:var(--r); color:var(--tx); font-size:.885rem; }
.nl input:focus{ outline:none; border-color:var(--red); }
/* ---------- 19. Callout / CTA band ---------- */
.cta-band{
position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-lg);
border:1px solid var(--line); padding:clamp(2.2rem,1.4rem + 3vw,4.5rem);
background:linear-gradient(150deg,var(--bg-3) 0%, var(--bg-2) 62%);
}
.cta-band::before{
content:""; position:absolute; inset:0; z-index:-1;
background:radial-gradient(ellipse 60% 90% at 88% 20%, rgba(222,59,50,.15), transparent 62%),
radial-gradient(ellipse 50% 80% at 5% 90%, rgba(91,143,176,.12), transparent 62%);
}
.cta-band::after{
content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
background-image:linear-gradient(to right, var(--line-3) 1px, transparent 1px), linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 75%);
}
.cta-band h2{ max-width:20ch; margin-bottom:1.1rem; }
.cta-band p{ max-width:52ch; color:var(--tx-2); margin-bottom:2rem; }
/* Framed media */
.frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; }
.frame--16{ aspect-ratio:16/10; }
.frame--43{ aspect-ratio:4/3; }
.frame--34{ aspect-ratio:3/4; }
.frame--1{ aspect-ratio:1; }
.frame-cap{
position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.3rem; z-index:2;
background:linear-gradient(transparent, rgba(10,13,15,.9));
font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-2);
}
.frame-tick{ position:absolute; z-index:3; width:18px; height:18px; border-color:var(--red); border-style:solid; border-width:0; }
.frame-tick.tl{ top:12px; left:12px; border-top-width:1.5px; border-left-width:1.5px; }
.frame-tick.br{ bottom:12px; right:12px; border-bottom-width:1.5px; border-right-width:1.5px; }
.reveal-mask{ position:relative; overflow:hidden; }
.reveal-mask > .rm-sheet{ position:absolute; inset:0; background:var(--bg-2); z-index:3; transform-origin:right; }
/* Play button */
.play{
position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; z-index:4;
display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
transition:background-color .4s, transform .4s var(--e-out), border-color .4s;
}
.play::before{
content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--red);
animation:ring 2.6s var(--e-out) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.6); opacity:0 } }
.play:hover{ background:var(--red); border-color:var(--red); transform:scale(1.07); }
.play svg{ width:20px; height:20px; color:#fff; margin-left:3px; }
/* ---------- 20. Footer ---------- */
.ftr{ border-top:1px solid var(--line); background:var(--bg-2); position:relative; overflow:hidden; }
.ftr::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
background-image:linear-gradient(to right, var(--line-3) 1px, transparent 1px), linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
background-size:76px 76px;
mask-image:radial-gradient(ellipse 70% 90% at 30% 0%, #000, transparent 70%);
-webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 0%, #000, transparent 70%);
}
.ftr-top{ padding-block:clamp(3rem,2rem + 3.5vw,5.5rem); position:relative; }
.ftr-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:clamp(2rem,1rem + 3vw,4rem); }
.ftr-brand{ display:grid; gap:1.3rem; align-content:start; }
.ftr-brand p{ font-size:.885rem; color:var(--tx-2); max-width:38ch; }
.ftr h5{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.22em; text-transform:uppercase;
color:var(--tx-3); margin-bottom:1.15rem; font-weight:500; }
.ftr-links{ display:grid; gap:.72rem; }
.ftr-links a{ font-size:.885rem; color:var(--tx-2); transition:color .3s, padding-left .35s var(--e-out); }
.ftr-links a:hover{ color:var(--white); padding-left:.35rem; }
.ftr-c{ display:grid; gap:.9rem; }
.ftr-c a,.ftr-c div{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; align-items:start; font-size:.875rem; color:var(--tx-2); }
.ftr-c svg{ width:15px; height:15px; color:var(--red); margin-top:.3rem; flex:none; }
.ftr-c a:hover{ color:var(--white); }
.socials{ display:flex; gap:.5rem; }
.socials a{
width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r);
border:1px solid var(--line); color:var(--tx-2); position:relative; overflow:hidden; isolation:isolate;
transition:color .35s, border-color .35s, transform .35s var(--e-out);
}
.socials a::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--red); transform:translateY(100%); transition:transform .4s var(--e-out); }
.socials a:hover{ color:#fff; border-color:var(--red); transform:translateY(-3px); }
.socials a:hover::after{ transform:translateY(0); }
.socials svg{ width:16px; height:16px; }
.ftr-bot{ border-top:1px solid var(--line); padding-block:1.5rem; position:relative; }
.ftr-bot-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
font-size:var(--t-xs); color:var(--tx-3); }
.ftr-bot-in nav{ display:flex; flex-wrap:wrap; gap:1.3rem; }
.ftr-bot-in a:hover{ color:var(--tx); }
/* Hours table */
.hours{ display:grid; gap:.55rem; }
.hours div{ display:flex; justify-content:space-between; gap:1rem; font-size:.83rem; color:var(--tx-2); }
.hours b{ font-weight:500; color:var(--tx-3); }
.hours .now{ color:#8FD3AE; }
.hours .shut{ color:var(--tx-3); }
/* ---------- 21. Floating UI ---------- */
.rail{
position:fixed; left:0; top:50%; translate:0 -50%; z-index:1050;
display:grid; gap:1px; background:var(--line);
border:1px solid var(--line); border-left:0; border-radius:0 var(--r) var(--r) 0;
overflow:hidden;
}
.rail a{
width:44px; height:44px; display:grid; place-items:center; background:var(--glass);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
color:var(--tx-3); position:relative; transition:color .35s, background-color .35s;
}
.rail a:hover{ color:#fff; background:var(--red); }
.rail a svg{ width:16px; height:16px; }
.rail a::after{
content:attr(data-t); position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
padding:.35rem .6rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--tx); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s, translate .3s;
}
.rail a:hover::after{ opacity:1; }
/* Right-hand floating stack, bottom-up: chat launcher (22) → WhatsApp (92) → back-to-top (152).
Kept off the left so it never covers body copy or the hero stat rail. */
.wa-fab{
position:fixed; right:22px; bottom:92px; z-index:1060;
display:flex; align-items:center; gap:.7rem; padding:.75rem .95rem .75rem .8rem;
background:#1FA855; color:#fff; border-radius:100px;
box-shadow:0 14px 34px -8px rgba(31,168,85,.5);
transition:transform .4s var(--e-out), box-shadow .4s;
}
.wa-fab:hover{ transform:translateY(-3px); box-shadow:0 18px 42px -8px rgba(31,168,85,.65); }
.wa-fab svg{ width:22px; height:22px; flex:none; }
/* Collapsed to an icon so it never sits on top of body content; label slides out on hover. */
.wa-fab span{
font-size:.82rem; font-weight:600; white-space:nowrap;
max-width:0; opacity:0; overflow:hidden;
transition:max-width .45s var(--e-out), opacity .3s var(--e-out), margin-right .45s var(--e-out);
margin-right:-.7rem;
}
.wa-fab:hover span, .wa-fab:focus-visible span{ max-width:200px; opacity:1; margin-right:0; }
/* Decorative pulse. It scales to 1.6x, which reaches over the chat launcher
sitting below it — without this it swallows that button's taps on small
screens, where the two are closest together. */
.wa-fab i{
position:absolute; inset:0; border-radius:100px; border:1px solid #1FA855;
animation:ring 2.8s var(--e-out) infinite; pointer-events:none;
}
#toTop{
position:fixed; right:29px; bottom:152px; z-index:1055; width:44px; height:44px;
display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2);
background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
color:var(--tx-2); opacity:0; visibility:hidden; transform:translateY(12px);
transition:opacity .45s var(--e-out), transform .45s var(--e-out), visibility .45s, color .3s, border-color .3s;
}
#toTop.on{ opacity:1; visibility:visible; transform:translateY(0); }
#toTop:hover{ color:#fff; border-color:var(--red); }
#toTop svg{ width:16px; height:16px; }
/* Copy confirmation */
.toast{
position:fixed; left:50%; bottom:26px; translate:-50% 12px; z-index:1400;
background:var(--panel); color:var(--tx); border:1px solid var(--line-2);
border-radius:100px; padding:.7rem 1.2rem;
font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
box-shadow:var(--el-3); opacity:0; pointer-events:none;
transition:opacity .35s var(--e-out), translate .35s var(--e-out);
}
.toast.on{ opacity:1; translate:-50% 0; }
/* ---------- 22. Modals (quote, search, lightbox) ---------- */
.modal{
position:fixed; inset:0; z-index:1400; display:grid; place-items:center; padding:var(--gut);
opacity:0; visibility:hidden; transition:opacity .4s var(--e-out), visibility .4s;
}
.modal.on{ opacity:1; visibility:visible; }
.modal-bg{ position:absolute; inset:0; background:rgba(6,8,10,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-box{
position:relative; z-index:2; width:min(660px,100%); max-height:88svh; overflow-y:auto; overscroll-behavior:contain;
background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
padding:clamp(1.5rem,1rem + 1.8vw,2.6rem);
transform:translateY(18px) scale(.985); transition:transform .5s var(--e-out);
box-shadow:0 40px 90px -24px rgba(0,0,0,.8);
}
.modal.on .modal-box{ transform:translateY(0) scale(1); }
.modal-x{
position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%;
display:grid; place-items:center; border:1px solid var(--line); color:var(--tx-2); z-index:5;
transition:color .3s, border-color .3s, background-color .3s, transform .3s;
}
.modal-x:hover{ color:#fff; border-color:var(--red); background:var(--red); transform:rotate(90deg); }
.modal-x svg{ width:15px; height:15px; }
.modal-head{ margin-bottom:1.7rem; padding-right:3rem; }
.modal-head h3{ margin-bottom:.5rem; }
.modal-head p{ font-size:.885rem; color:var(--tx-2); }
/* Search */
.search-box{ width:min(720px,100%); }
.search-in{ display:flex; align-items:center; gap:.9rem; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1.2rem; }
.search-in svg{ width:20px; height:20px; color:var(--tx-3); flex:none; }
.search-in input{ flex:1; background:none; border:0; font-size:1.25rem; font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; }
.search-in input:focus{ outline:none; }
.search-res{ display:grid; gap:.2rem; max-height:46svh; overflow-y:auto; }
.search-r{ display:grid; gap:.2rem; padding:.85rem .95rem; border-radius:var(--r); border:1px solid transparent; transition:background-color .3s, border-color .3s; }
.search-r:hover,.search-r.sel{ background:var(--glass-2); border-color:var(--line); }
.search-r b{ font-size:.925rem; }
.search-r span{ font-size:.775rem; color:var(--tx-3); }
.search-r em{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-style:normal; }
.search-empty{ padding:1.6rem 0; text-align:center; color:var(--tx-3); font-size:.885rem; }
/* Lightbox */
#lightbox{ z-index:1500; }
#lightbox .modal-box{ width:min(1180px,100%); padding:0; background:transparent; border:0; box-shadow:none; overflow:visible; }
.lb-fig{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
.lb-fig img{ width:100%; max-height:76svh; object-fit:contain; background:#0A0C0E; }
.lb-cap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 1.2rem; flex-wrap:wrap; }
.lb-cap b{ font-size:.95rem; }
.lb-cap span{ font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3); }
.lb-nav{ position:absolute; top:50%; translate:0 -50%; width:46px; height:46px; border-radius:50%;
display:grid; place-items:center; background:rgba(14,17,20,.75); border:1px solid var(--line-2); color:var(--tx);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background-color .3s, border-color .3s; z-index:4; }
.lb-nav:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.lb-nav.prev{ left:14px; } .lb-nav.next{ right:14px; }
.lb-nav svg{ width:17px; height:17px; }
/* ---------- 23. Chatbot ---------- */
#amsw-chat{ position:fixed; right:22px; bottom:22px; z-index:1300; font-family:var(--f-body); }
.cb-fab{
width:58px; height:58px; border-radius:50%; display:grid; place-items:center; position:relative;
background:linear-gradient(150deg,var(--red),#B12C24); color:#fff;
box-shadow:0 14px 34px -8px rgba(222,59,50,.55);
transition:transform .4s var(--e-out), box-shadow .4s;
}
.cb-fab:hover{ transform:scale(1.06); }
.cb-fab svg{ width:24px; height:24px; }
.cb-fab .x{ display:none; }
#amsw-chat.on .cb-fab .m{ display:none; }
#amsw-chat.on .cb-fab .x{ display:block; }
.cb-badge{
position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:100px;
background:var(--white); color:#101316; font-size:.65rem; font-weight:700; display:grid; place-items:center;
border:2px solid var(--bg);
}
.cb-panel{
position:absolute; right:0; bottom:calc(100% + 14px);
width:min(390px, calc(100vw - 44px)); height:min(620px, calc(100svh - 130px));
background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
display:flex; flex-direction:column; overflow:hidden;
box-shadow:0 34px 80px -18px rgba(0,0,0,.8);
opacity:0; visibility:hidden; transform:translateY(16px) scale(.97); transform-origin:bottom right;
transition:opacity .42s var(--e-out), transform .42s var(--e-out), visibility .42s;
}
#amsw-chat.on .cb-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.cb-head{ padding:1rem 1.1rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.8rem;
background:linear-gradient(160deg,var(--bg-3),var(--bg-2)); flex:none; }
.cb-head img{ width:34px; height:auto; flex:none; }
.cb-head .t{ flex:1; min-width:0; }
.cb-head b{ display:block; font-size:.9rem; font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; }
.cb-head span{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--tx-3); }
.cb-head span i{ width:6px; height:6px; border-radius:50%; background:#4AA06E; }
.cb-lang{ display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; flex:none; }
.cb-lang button{ padding:.3rem .55rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; color:var(--tx-3); transition:background-color .3s, color .3s; }
.cb-lang button.on{ background:var(--red); color:#fff; }
.cb-log{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.85rem; overscroll-behavior:contain; }
.cb-m{ max-width:86%; padding:.75rem .95rem; border-radius:12px; font-size:.855rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.cb-m.bot{ background:var(--bg-3); border:1px solid var(--line); border-bottom-left-radius:3px; align-self:flex-start; color:var(--tx); }
.cb-m.me{ background:var(--red); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; }
.cb-m a{ text-decoration:underline; text-underline-offset:2px; }
/* action block: full-width stacked buttons, so every one stays hittable */
.cb-actions{
display:grid; gap:.45rem; width:100%; max-width:100%;
background:transparent; border:0; padding:0;
}
.cb-actions .btn{
justify-content:center; width:100%; text-decoration:none;
white-space:normal; text-align:center; padding:.7rem 1rem; font-size:.78rem;
}
.cb-note{
background:transparent; border:0; padding:.25rem 0; font-family:var(--f-mono);
font-size:.66rem; letter-spacing:.08em; color:var(--blue-hi);
}
.cb-typing{ display:flex; gap:4px; padding:.85rem .95rem; background:var(--bg-3); border:1px solid var(--line);
border-radius:12px; border-bottom-left-radius:3px; align-self:flex-start; }
.cb-typing i{ width:6px; height:6px; border-radius:50%; background:var(--tx-3); animation:dot 1.3s infinite; }
.cb-typing i:nth-child(2){ animation-delay:.18s } .cb-typing i:nth-child(3){ animation-delay:.36s }
@keyframes dot{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-4px) } }
.cb-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .85rem; }
.cb-chip{ padding:.45rem .8rem; border:1px solid var(--line-2); border-radius:100px; font-size:.745rem; color:var(--tx-2);
transition:background-color .3s, color .3s, border-color .3s; }
.cb-chip:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.cb-foot{ padding:.8rem 1.1rem 1rem; border-top:1px solid var(--line); flex:none; }
.cb-inrow{ display:flex; gap:.5rem; align-items:flex-end; }
.cb-inrow textarea{
flex:1; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
padding:.65rem .8rem; font-size:.855rem; resize:none; max-height:100px; min-height:42px; line-height:1.45;
}
.cb-inrow textarea:focus{ outline:none; border-color:var(--red); }
.cb-send{ width:42px; height:42px; border-radius:var(--r); background:var(--red); color:#fff; display:grid; place-items:center; flex:none;
transition:background-color .3s, transform .3s var(--e-out); }
.cb-send:hover{ background:var(--red-hi); transform:scale(1.05); }
.cb-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.cb-send svg{ width:17px; height:17px; }
.cb-legal{ margin-top:.6rem; font-size:.65rem; color:var(--tx-3); text-align:center; }
#amsw-chat[dir="rtl"] .cb-m.bot{ align-self:flex-end; border-bottom-left-radius:12px; border-bottom-right-radius:3px; }
#amsw-chat[dir="rtl"] .cb-m.me{ align-self:flex-start; border-bottom-right-radius:12px; border-bottom-left-radius:3px; }
/* ---------- 24. Careers / jobs ---------- */
.job{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:center;
padding:1.55rem 0; border-bottom:1px solid var(--line); transition:padding-left .45s var(--e-out); }
.job:hover{ padding-left:.7rem; }
.job h4{ font-size:1.13rem; margin-bottom:.5rem; }
.job-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.job-tag{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-3);
border:1px solid var(--line); border-radius:100px; padding:.28rem .7rem; }
/* ---------- 25. Article body ---------- */
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:1.3rem; }
.prose h2{ font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem); margin-top:2.8rem; }
.prose h3{ font-size:clamp(1.15rem,1rem + .6vw,1.45rem); margin-top:2rem; }
.prose p,.prose li{ color:var(--tx-2); }
.prose ul{ display:grid; gap:.7rem; padding-left:1.15rem; list-style:disc; }
.prose ul li::marker{ color:var(--red); }
.prose blockquote{ border-left:2px solid var(--red); padding-left:1.4rem; font-size:1.08rem; color:var(--tx); }
.prose img{ border-radius:var(--r-lg); border:1px solid var(--line); }
.prose a{ color:var(--tx); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; }
/* ---------- 26. Map ---------- */
.map{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); min-height:340px; }
.map iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg); }
/* ---------- 27. Animation entry states ---------- */
/* No blanket will-change here: promoting 100+ elements to their own compositor
layer exhausts GPU memory and causes dropped tiles. GSAP applies will-change
per element only while a tween is actually running. */
html.no-js [data-a]{ opacity:1 !important; transform:none !important; }
/* Pre-paint hidden state (JS only) — GSAP's inline styles override these. */
html.js [data-a]{ opacity:0; }
html.js [data-a="lines"], html.js [data-a="mask"]{ opacity:1; }
html.js [data-a="lines"] .ln > span{ transform:translateY(112%); }
html.js [data-a="mask"] .rm-sheet{ transform:scaleX(1); }
/* No-GSAP fallback: CSS transitions driven by .is-in */
html.js.nogsap [data-a]{
transition:opacity .85s var(--e-out), transform .85s var(--e-out);
}
html.js.nogsap [data-a="up"]{ transform:translateY(42px); }
html.js.nogsap [data-a="down"]{ transform:translateY(-34px); }
html.js.nogsap [data-a="left"]{ transform:translateX(-48px); }
html.js.nogsap [data-a="right"]{ transform:translateX(48px); }
html.js.nogsap [data-a="scale"]{ transform:scale(.93); }
html.js.nogsap [data-a="zoom"]{ transform:scale(1.12); }
html.js.nogsap [data-a].is-in{ opacity:1; transform:none; }
html.js.nogsap [data-a="lines"] .ln > span,
html.js.nogsap [data-a="mask"] .rm-sheet{ transition:transform 1.1s var(--e-io); }
html.js.nogsap [data-a="lines"].is-in .ln > span{ transform:translateY(0); }
html.js.nogsap [data-a="mask"].is-in .rm-sheet{ transform:scaleX(0); }
/* ---------- 28. Utilities ---------- */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{
position:absolute; left:.5rem; top:-100px; z-index:2000; background:var(--red); color:#fff;
padding:.7rem 1.1rem; border-radius:var(--r); font-size:.85rem; font-weight:600; transition:top .3s;
}
.skip:focus{ top:.5rem; }
.center{ text-align:center; }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.6rem } .mt-2{ margin-top:1.2rem } .mt-3{ margin-top:2rem } .mt-4{ margin-top:3rem }
.mb-2{ margin-bottom:1.2rem } .mb-3{ margin-bottom:2rem } .mb-4{ margin-bottom:3rem }
.flex{ display:flex } .wrap-f{ flex-wrap:wrap } .items-c{ align-items:center } .gap-1{ gap:.6rem } .gap-2{ gap:1.2rem }
.between{ justify-content:space-between }
.panel{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,1rem + 1.5vw,2.4rem); }
.pad-0{ padding:0 }
.hide{ display:none !important; }
/* ---------- 29. Responsive ---------- */
@media (max-width:1180px){
.ftr-grid{ grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr)); }
.ftr-grid > :nth-child(4){ grid-column:2 / -1; }
.masonry > *{ grid-column:span 6; }
.masonry > .m-big{ grid-column:span 12; }
.masonry > .m-wide{ grid-column:span 6; }
}
@media (max-width:1024px){
:root{ --hdr:74px; }
.nav, .hdr-act .btn{ display:none; }
.burger{ display:grid; }
.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.split, .split--40, .sec-head--wide{ grid-template-columns:minmax(0,1fr); }
.sec-head--wide{ align-items:start; }
.stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.stat-grid .st:nth-child(2){ border-right:0; }
.stat-grid .st:nth-child(-n+2){ border-bottom:1px solid var(--line); }
.hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hero-stats .st:nth-child(2){ border-right:0; }
.hero-stats .st:nth-child(-n+2){ border-bottom:1px solid var(--line); }
.hero-stats .st:nth-child(3){ padding-left:0; }
.rail{ display:none; }
}
@media (max-width:760px){
:root{ --r-lg:6px; }
.g-4,.g-3,.g-2{ grid-template-columns:minmax(0,1fr); }
.f-row{ grid-template-columns:minmax(0,1fr); }
.masonry > *{ grid-column:span 12 !important; }
.masonry > .m-tall .proj-fig{ aspect-ratio:4/3; }
.ftr-grid{ grid-template-columns:minmax(0,1fr); }
.ftr-grid > :nth-child(4){ grid-column:auto; }
.hero{ min-height:92svh; }
.hero-stats{ margin-top:2.4rem; }
.scroll-hint{ display:none; }
.job{ grid-template-columns:minmax(0,1fr); }
.spec{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
.wa-fab span{ display:none; }
.wa-fab{ padding:.85rem; right:18px; bottom:86px; }
#amsw-chat{ right:18px; bottom:18px; }
#toTop{ right:25px; bottom:146px; }
.modal-box{ max-height:92svh; }
.lb-nav{ width:38px; height:38px; }
}
@media (max-width:420px){
.hero-stats{ grid-template-columns:minmax(0,1fr); }
.hero-stats .st{ border-right:0; border-bottom:1px solid var(--line); padding-left:0 !important; }
.stat-grid{ grid-template-columns:minmax(0,1fr); }
.stat-grid .st{ border-right:0; border-bottom:1px solid var(--line); }
/* Buttons are nowrap by default, which pushes long labels such as
"Quality, machines & certifications" past the edge of a 320px screen.
Let them wrap and tighten the padding instead. */
.btn{ white-space:normal; text-align:center; padding-inline:1.15rem; max-width:100%; }
.btn--lg{ padding:1rem 1.25rem; }
.hero-cta{ width:100%; }
.hero-cta .btn{ width:100%; }
}
/* Large TV / ultrawide */
@media (min-width:1900px){
:root{ --maxw:1480px; --maxw-wide:1760px; --t-body:1.115rem; }
}
@media (min-width:2400px){
:root{ --maxw:1640px; --maxw-wide:1960px; }
}
/* ---------- 30. Accessibility & print ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
[data-a]{ opacity:1 !important; transform:none !important; }
.marquee-t{ animation:none; }
#glow,#particles{ display:none; }
}
@media (prefers-contrast:more){
:root{ --line:rgba(255,255,255,.28); --line-2:rgba(255,255,255,.42); --tx-2:#C9D1D7; --tx-3:#A6B0B7; }
}
@media print{
#preloader,#glow,#particles,.rail,.wa-fab,#toTop,#amsw-chat,.hdr,.modal,.scroll-hint{ display:none !important; }
body{ background:#fff; color:#000; }
.section{ padding-block:1.5rem; }
h1,h2,h3,h4{ color:#000; }
}