/* css/style.css: the product pages load css/style.min.css. After editing this file run tools\build-css.cmd
(or: npx esbuild css/style.css --minify --outfile=css/style.min.css) and bump the ?v= on their . */
/* 1. Self-hosted fonts (latin subset, both variable): Plus Jakarta Sans = headings/display, Manrope = text */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans.woff2") format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* size-matched fallbacks: text laid out before the web fonts arrive takes the same space, so the swap causes
no layout shift and no late "largest paint" (values measured from the font files against Arial) */
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:109.26%;ascent-override:95.01%;descent-override:20.32%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:104.28%;ascent-override:102.23%;descent-override:28.77%;line-gap-override:0%}
/* 2. Tokens & base */
:root{
--h2:clamp(32px,4vw,52px); /* one size for every section heading (h2) on the page */
--h2-lh:1.2; /* and one line height for them */
--sec-y:clamp(48px,4.5vw,64px); /* space between a section's edge and its content (top and bottom), used by every normal section */
--fs-lead:clamp(15px,1.15vw,17px);--lh-lead:1.7; /* section intro / description paragraphs */
--fs-body:14.5px;--lh-body:1.65; /* text inside cards, FAQ answers, captions */
--bg:#012040;--bg-2:#0f0f11;--panel:#141417;--panel-2:#1b1b1f;
--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.05);
--ink:#f4f4f2;--mute:#9b9ba3;--faint:#6a6a72;
--brand:#004690;--brand-2:#001F3F;--brand-3:#00254c;--accent:#002B5C;--accent-ink:#001e3d;--glow:rgba(51,150,255,.35);--glow-brand:rgba(0,70,144,.45); /* brand #004690 = solid fills; the others are the same hue (211deg): --accent is the lighter tint for text / lines / glows on dark backgrounds */
--hd-accent:var(--brand);--hd-accent-text:var(--accent);--hd-glass:rgba(255,255,255,.08);--hd-line:rgba(255,255,255,.16);--hd-notch:#ececec;
--r:22px;
/* one content width for the whole page: every section, the hero overlay and the footer line up on these edges */
--wrap-max:1280px; /* the .wrap box: content + a gutter on each side */
--gutter:32px; /* side space inside that box (20px on phones) */
--wrap-w:min(100% - 2 * var(--gutter), var(--wrap-max) - 2 * var(--gutter)); /* the content width itself, for blocks sized by width instead of padding */
}
@media (max-width:600px){:root{--gutter:20px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.smooth{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope","Manrope Fallback",sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;font-family:"Manrope","Manrope Fallback",sans-serif}
input,textarea,select{font-family:inherit} /* form fields take the page font instead of the browser default */
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto}
button{font-family:inherit}
address{font-style:normal}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;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:16px;top:-80px;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}
/* mono label */
.kick{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.kick::before{content:"//";color:var(--faint)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .2s,background .2s,color .2s;font-family:inherit;will-change:transform}
.btn .ic{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.22);display:grid;place-items:center;font-size:13px;transition:transform .25s}
.btn-primary{background:var(--brand);color:#fff;border-color:rgba(51,150,255,.35);box-shadow:0 10px 30px var(--glow-brand)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-2px)}
.btn-primary:hover .ic{transform:rotate(45deg)}
/* 3. Header — floating island */
/* inline expanding menu inside the right island */
.xh-dd>button{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:16.5px;font-weight:500;color:#fff;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1;transition:color .2s}
.xh-dd>button:hover{color:var(--hd-accent-text)}
.xh-dd{position:relative}
.xh-dd>button svg{transition:transform .25s}
.xh-dd.open>button{color:var(--hd-accent-text)}
.xh-dd.open>button svg{transform:rotate(180deg)}
/* mega menus */
.xh-dd.mega{position:static}
.xh-mega{position:absolute;top:100%;right:0;padding-top:16px;display:none;z-index:6;width:min(1000px,calc(100vw - 34px))}
.xh-dd.mega.open .xh-mega{display:block;animation:megaIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes megaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.xh-mega .col{padding:22px 20px;border-right:1px solid var(--hd-line);min-width:0}
.xh-mega .col:last-child{border-right:0}
.xh-mega .mh{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px;font-weight:400}
/* hamburger → ✕ */
/* 4. Mobile drawer */
.mob{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s .45s}
.mob.open{visibility:visible;transition-delay:0s}
.mob-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#0f0f11;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:16px 18px 22px;overflow-y:auto}
.mob.open .mob-panel{transform:none}
.mob .close{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;color:#fff;font-size:18px;cursor:pointer}
.mob-acc>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;border:0;border-bottom:1px solid var(--line);background:none;color:#fff;font-family:"Manrope","Manrope Fallback",sans-serif;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.mob-acc>button::after{content:"›";font-size:22px;line-height:1;color:var(--mute);transition:transform .25s,color .25s}
.mob-acc.open>button{color:var(--hd-accent-text)}
.mob-acc.open>button::after{transform:rotate(90deg);color:var(--hd-accent-text)}
/* 5. Hero — pinned video sequence (scrubbed by scroll on desktop) */
/* 8 clips x ~70vh of scroll each, plus the pinned viewport itself */
.hseq{position:relative;height:calc(100vh + 8 * 70vh);background:#000}
.hseq-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.hseq-pin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* stacked clips: later clips sit on top and fade in over the previous one while settling from a slight zoom */
.hseq-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.hseq-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* hero photo under the first clip (responsive, replaces the video poster) */
.hseq-vid{opacity:0;transform:scale(1.04);transform-origin:50% 50%}
.hseq-vid[data-hv="0"]{opacity:1;transform:none}
/* overlay over the clips (under the text): deep navy wash, strongest behind the headline on the left,
plus a soft band at the top (header) and bottom (chips) and a light vignette at the edges */
.hseq-shade{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,8,20,0) 60%,rgba(0,8,20,.28) 100%),
linear-gradient(180deg,rgba(0,8,20,.35) 0%,rgba(0,8,20,0) 20%,rgba(0,8,20,0) 72%,rgba(0,8,20,.38) 100%),
linear-gradient(90deg,rgba(0,12,30,.5) 0%,rgba(0,12,30,.4) 35%,rgba(0,12,30,.18) 62%,rgba(0,12,30,.06) 100%)}
/* timer mode (touch / small screens): the scroll does not drive the clips, so the cross-fade is a CSS transition */
.hseq.is-timed .hseq-vid{transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1)}
.hseq.is-timed .hseq-vid.is-on{opacity:1;transform:none;z-index:2}
.hseq.is-timed .hseq-vid.was-on{opacity:1;transform:none;z-index:1}
.hseq.is-timed .hseq-vid[data-hv="0"]:not(.is-on):not(.was-on){opacity:0;transform:scale(1.04)}
.hseq-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--wrap-w);z-index:1;color:#fff;pointer-events:none} /* starts on the page wrap's left edge */
.hseq-copy h1{max-width:1080px;font-size:clamp(42px,8vw,75px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55),0 4px 32px rgba(0,0,0,.5)}
/* rotating word: all words share one grid cell, so the box is always as wide as the
longest word and swapping words never reflows the H1 (zero layout shift) */
.hseq-copy .rot{display:inline-grid;color:#fff;text-align:left;vertical-align:bottom;white-space:nowrap}
/* changing word: white fill with a brand-blue outline (paint-order keeps the stroke outside the letters, so they stay full weight) */
.hseq-copy .rot span{-webkit-text-stroke:.055em #5AA9FF;paint-order:stroke fill}
/* word change: the incoming word drops in from just above while the outgoing one slides down and fades
(.rev flips both directions when scrolling back up) */
.hseq-copy .rot{--rin:-.28em;--rout:.34em}
.hseq-copy .rot.rev{--rin:.28em;--rout:-.34em}
.hseq-copy .rot span{grid-area:1/1;opacity:0;transform:translate3d(0,var(--rin),0);transition:opacity .38s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hseq-copy .rot span.on{opacity:1;transform:none;transition-delay:.06s}
.hseq-copy .rot span.out{opacity:0;transform:translate3d(0,var(--rout),0);transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.hseq-chips{position:absolute;left:0;right:0;bottom:24px;width:var(--wrap-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;z-index:1}
.hchip{pointer-events:auto;background:#fff;color:#000;border-radius:10px;height:80px;padding:16px 8px 16px 24px;display:flex;align-items:center;gap:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hchip .lbl{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:600;font-size:14px;line-height:1.2;max-width:110px}
.hchip .th{height:48px;width:64px;border-radius:10px;overflow:hidden;background:#eee;flex:none}
.hchip .th img{width:100%;height:100%;object-fit:cover;display:block}
.hchip .logos{display:flex;gap:8px;align-items:center}
.hchip .logos span{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:12px;padding:6px 10px;border:1px solid #e3e3e3;border-radius:8px}
.harw{width:48px;height:48px;border-radius:50%;background:var(--hd-accent);color:#fff;display:grid;place-items:center;font-size:20px;flex:none;transition:transform .2s}
.hchip:hover .harw{transform:translateX(3px)}
/* 6. Sections & About */
.sec{padding:50px 0;position:relative}
.sec.alt{background:#012040}
/* .head{max-width:840px;margin-bottom:56px} */
.head h2{font-size:var(--h2);line-height:var(--h2-lh); text-align: center; margin-top:18px;color:#fff;position:relative}
.head p{color:var(--mute);margin-top:18px;font-size:var(--fs-lead);line-height:var(--lh-lead);text-align:center;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 22px;position:relative;overflow:hidden}
.stat b{display:block;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:700;font-size:clamp(38px,4.6vw,58px);color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px;color:var(--mute);font-weight:500;margin-top:12px;display:block}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;border:1px solid var(--line)}
/* 6b. About orbit — light band. A ring of photo cards turns slowly around the centre copy + stats (JS section 8d).
All selectors are prefixed .tdo-. Geometry (--R ring radius, --Rt tick radius, --cy circle centre, --cw/--ch card size)
is set per screen by the JS; the values here are the no-JS defaults. */
.tdo{
--R:600px;--Rt:480px;--cy:700px;--cw:150px;--ch:180px;--n:16;
--tdo-blue:#004690;--tdo-navy:#001f3f;--tdo-ink:#002347;--tdo-text:#292e34;--tdo-tint:#3396ff;--tdo-bg:#f6f8fb;
--tdo-ease:cubic-bezier(.2,.8,.2,1);
--photo:url("../images/about-thaida-company.jpg"); /* company gate + sign photo used by the "co" cards */
position:relative;overflow:hidden;color:var(--tdo-ink);
background:radial-gradient(70% 60% at 50% 100%,#fff 0%,var(--tdo-bg) 70%);
}
/* rotating photo ring */
.tdo-ring{position:absolute;left:50%;top:var(--cy);width:0;height:0;animation:tdo-spin 110s linear infinite}
.tdo-ring:hover{animation-play-state:paused}
.tdo.js-ring .tdo-ring{animation:none;rotate:var(--spin,0deg)}
.tdo-card{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch);transform:rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(var(--R) * -1))}
.tdo-card:hover{z-index:3}
.tdo-photo{position:relative;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#d9e2ee;border:4px solid #fff;translate:0 0;
box-shadow:0 18px 34px -18px rgba(0,35,71,.45);transition:scale .6s var(--tdo-ease),translate .6s var(--tdo-ease),box-shadow .6s var(--tdo-ease),border-color .4s}
.tdo-photo img{display:block;width:100%;height:100%;object-fit:cover;color:transparent;transition:scale 1s var(--tdo-ease)}
.tdo-photo.co{background-image:var(--photo);background-repeat:no-repeat}
.tdo-card.is-top .tdo-photo{scale:1.08;border-color:#dcebfb;box-shadow:0 26px 44px -18px rgba(0,70,144,.55)}
.tdo-card:hover .tdo-photo{scale:1.18;translate:0 -14px;border-color:var(--tdo-tint);box-shadow:0 34px 56px -18px rgba(0,35,71,.65)}
.tdo-card:hover .tdo-photo img{scale:1.08}
.tdo-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 40%);pointer-events:none}
/* the arc fades out below the centre so only the top half shows */
.tdo-orbit{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--cy) - 60px),transparent calc(var(--cy) + 120px));mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--cy) - 60px),transparent calc(var(--cy) + 120px))}
.tdo-orbit .tdo-ring{pointer-events:auto}
.tdo-ticks{position:absolute;left:50%;top:var(--cy);width:calc(var(--Rt) * 2);height:calc(var(--Rt) * 2);margin:calc(var(--Rt) * -1) 0 0 calc(var(--Rt) * -1);animation:tdo-spin 160s linear infinite reverse;pointer-events:none} /* tick arc turns the other way */
.tdo-ticks circle{fill:none}
.tdo-glow{position:absolute;left:50%;top:var(--cy);width:calc(var(--Rt) * 1.6);height:calc(var(--Rt) * 1.6);margin:calc(var(--Rt) * -.8) 0 0 calc(var(--Rt) * -.8);border-radius:50%;background:radial-gradient(closest-side,rgba(51,150,255,.14),rgba(0,70,144,.06) 55%,transparent);pointer-events:none}
/* centre content, kept inside the tick ring; pointer-events:none lets the mouse reach the cards behind it */
.tdo-content{position:relative;z-index:2;pointer-events:none;width:min(calc(100% - 40px),820px,calc(var(--Rt) * 1.36));margin:0 auto;padding:calc(var(--cy) - var(--Rt) * .7) 0 var(--sec-y);container-type:inline-size;text-align:center}
.tdo-content>*{pointer-events:auto}
.tdo-title{margin:0 auto;max-width:21ch;font-size:var(--h2);line-height:var(--h2-lh);font-weight:700;letter-spacing:-.035em;color:var(--tdo-ink)}
.tdo-title em{font-style:normal;background:linear-gradient(95deg,#004690 0%,#3396ff 55%,#004690 100%);background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:abt-sheen 6s linear infinite} /* same moving blue gradient as the other headings */
@media (prefers-reduced-motion:reduce){.tdo-title em{animation:none}}
.tdo-desc{margin:20px auto 0;max-width:58ch;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--tdo-text)}
.tdo-btn{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:7px 7px 7px 22px;border-radius:999px;background:#e4edf8;border:1px solid #cbdaee;color:var(--tdo-ink);font-weight:700;font-size:15px;text-decoration:none;transition:background-color .4s,color .4s,border-color .4s,transform .4s var(--tdo-ease)}
.tdo-btn b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--tdo-blue);color:#fff;transition:background-color .4s,transform .5s var(--tdo-ease)}
.tdo-btn:hover{background:var(--tdo-blue);border-color:var(--tdo-blue);color:#fff;transform:translateY(-2px)}
.tdo-btn:hover b{background:#fff;color:var(--tdo-blue);transform:rotate(360deg)}
.tdo-btn:focus-visible{outline:3px solid var(--tdo-tint);outline-offset:3px}
/* stats sit lower, where the circle is widest */
.tdo-stats-wrap{position:relative;left:50%;width:min(calc(100vw - 32px),calc(var(--Rt) * 1.9));margin-top:clamp(36px,6cqi,56px);transform:translateX(-50%);container-type:inline-size}
.tdo-stats{list-style:none;margin:0;padding:18px 8px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid #e1e8f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 60px -40px rgba(0,35,71,.35);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tdo-stat{position:relative;padding:12px 12px 18px;border-radius:16px;transition:background-color .35s}
.tdo.ready .tdo-stat{--tdo-p:0} /* JS 8d counts the numbers up and grows this underline (--tdo-p 0..1) once the section is seen */
.tdo-stat:hover{background:#f1f6fc}
.tdo-stat::after{content:"";position:absolute;left:32%;right:32%;bottom:6px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--tdo-blue),var(--tdo-tint));transform:scaleX(var(--tdo-p,1));transform-origin:left}
.tdo-stat + .tdo-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px dashed #c4d0e0}
.tdo-num{display:block;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:clamp(26px,6cqi,42px);font-weight:700;letter-spacing:-.03em;color:var(--tdo-ink);transition:color .3s,transform .4s var(--tdo-ease)}
.tdo-num sup{font-size:.55em;vertical-align:.55em;color:var(--tdo-blue);margin-left:2px}
.tdo-lbl{display:block;margin-top:6px;font-size:14px;color:var(--tdo-text)}
.tdo-stat:hover .tdo-num{color:var(--tdo-blue);transform:translateY(-4px)}
@keyframes tdo-spin{to{rotate:360deg}}
/* entrance */
@media (prefers-reduced-motion:no-preference){
.tdo.ready .tdo-card .tdo-photo{transition:opacity .8s ease,scale .6s var(--tdo-ease),box-shadow .6s var(--tdo-ease)}
.tdo.ready .tdo-up{transition:opacity .8s ease,translate .9s var(--tdo-ease)}
.tdo.ready:not(.in) .tdo-photo{opacity:0}
.tdo.ready:not(.in) .tdo-up{opacity:0;translate:0 22px}
.tdo.in .tdo-up:nth-child(2){transition-delay:.1s}
.tdo.in .tdo-up:nth-child(3){transition-delay:.2s}
.tdo.in .tdo-up:nth-child(4){transition-delay:.3s}
.tdo.in .tdo-card .tdo-photo{transition-delay:calc(var(--i) * 40ms),0s,0s}
}
@media (prefers-reduced-motion:reduce){
.tdo *,.tdo *::before,.tdo *::after{animation:none!important;transition:none!important}
}
/* responsive: stats go 2 x 2 when the text column gets narrow */
@container (max-width:560px){
.tdo-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
.tdo-stat:nth-child(3)::before{display:none}
}
@media (max-width:1000px){
.tdo{--R:470px;--Rt:380px;--cy:560px;--cw:120px;--ch:146px}
}
@media (max-width:640px){
.tdo{--R:300px;--Rt:238px;--cy:390px;--cw:84px;--ch:102px}
.tdo-photo{border-radius:16px;border-width:3px}
}
/* 7. Materials — cards + pinned deal-out */
#special-products .head{margin-bottom:clamp(32px,4.5vw,64px)} /* space between the heading and the cards */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#004690;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;will-change:transform;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px var(--accent)}
.card .pic{aspect-ratio:4/3;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.card:hover .pic img{transform:scale(1.07)}
.card .body{padding:22px 22px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .no{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:12px;color:var(--accent);display:block;margin-bottom:6px}
.card .body h3{font-size:20px;color:#fff}
.card .arw{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:#fff;flex:none;transition:.25s}
.card:hover .arw{background:var(--brand);color:#fff;transform:rotate(45deg)}
.deal{position:relative}
.deal-pin{position:sticky;top:96px}
.deal-stage{position:relative;padding-top:8px;padding-bottom:8px}
.deal-big{position:absolute;left:0;right:0;top:50%;transform:translate3d(0,-50%,0);text-align:center;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif; text-transform: uppercase; font-weight:700;font-size:clamp(80px,15vw,110px);line-height:1;color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.38);letter-spacing:-.04em;pointer-events:none;white-space:nowrap;opacity:0;will-change:transform,opacity}
.deal-grid{position:relative;z-index:2;gap:18px}
.deal-grid .card{will-change:transform,opacity;transform-origin:center;transition:border-color .25s,box-shadow .25s}
.js .deal-grid .card{opacity:0}
.deal-grid .card .pic{aspect-ratio:3/2}
.deal-grid .card .body{padding:20px 22px 22px}
.deal-grid .card .body h3{font-size:19px; line-height: 30px;}
.deal-grid .card .no{margin-bottom:5px;font-size:14px}
.deal-grid .card .arw{width:38px;height:38px}
.deal-grid .card:hover{transform:none}
/* phone: card titles sized against the 32px section heading */
@media (max-width:600px){
.deal-grid .card .body{padding:16px 18px 18px}
.deal-grid .card .body h3{font-size:16px;line-height:1.35}
.deal-grid .card .arw{width:34px;height:34px}
}
.deal.nopin{height:auto!important}
.deal.nopin .deal-pin{position:static}
.deal.nopin .deal-big{display:none}
.deal.nopin .deal-grid .card{opacity:1!important;transform:none!important}
/* 12. Materials & grades — coverflow carousel (one card per material, grade chips for pipes / tubes)
Every card keeps ONE fixed layout box (the expanded size). Position/scale use
transform, the collapsed look uses clip-path, and the media box is scaled with
a counter-scaled image. Nothing animates layout, so auto-rotation adds no CLS. */
#grades{overflow:hidden}
/* heading in the same two-tone style as "Industrial Sectors We Serve": the lead phrase in a moving blue sheen, the rest solid.
This section is dark, so the sheen uses the lighter brand blues and the rest of the heading stays white. */
#grades .head h2{letter-spacing:-.03em}
#grades .head h2 em{font-style:normal;background:linear-gradient(95deg,#3396ff 0%,#9cc7ff 55%,#3396ff 100%);background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:abt-sheen 6s linear infinite}
@media (prefers-reduced-motion:reduce){#grades .head h2 em{animation:none}}
.chain{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:750px;margin-top:56px;overflow:hidden}
.chain-card{position:absolute;top:50%;left:50%;width:var(--w,900px);height:620px;transform:translate(-50%,-50%);transform-origin:center;cursor:pointer;will-change:transform,opacity;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s}
.chain-card.is-active{cursor:grab}
/* drag / swipe (JS section 8) */
.chain{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.chain img{-webkit-user-drag:none}
.chain.is-dragging,.chain.is-dragging .chain-card{cursor:grabbing}
.chain.is-dragging .chain-card{transition:none}
.chain.is-dragging a{pointer-events:none}
.cc-box{position:absolute;inset:0;background:#fff;clip-path:inset(var(--clip-y,78px) var(--clip-x,355px) round 20px);transition:clip-path .7s cubic-bezier(.22,1,.36,1)}
.chain-card.is-active .cc-box{clip-path:inset(0 round 38px)}
.cc-media{position:absolute;left:var(--mx,558px);top:26px;width:var(--mw,316px);height:568px;border-radius:26px;overflow:hidden;transform-origin:0 0;transform:translate(var(--mdx,-198px),var(--mdy,57px)) scale(var(--sx,.57),var(--sy,.743));will-change:transform;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.chain-card.is-active .cc-media{transform:none}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;transform:scale(var(--isx,1.754),var(--isy,1.345));transition:transform .7s cubic-bezier(.22,1,.36,1)}
.chain-card.is-active .cc-media img{transform:none}
.cc-logo{position:absolute;left:16px;bottom:16px;z-index:3;background:rgba(255,255,255,.94);border-radius:9px;padding:6px 11px;display:flex;align-items:center;opacity:0;transition:opacity .4s .25s;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.cc-logo img{height:19px;width:auto;display:block;transform:none!important}
.chain-card.is-active .cc-logo{opacity:1}
.cc-body{position:absolute;top:0;bottom:0;left:0;right:40%;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 30px 0 54px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s .2s,visibility 0s .65s}
.chain-card.is-active .cc-body{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s .2s,visibility 0s}
.cc-body h3{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:600;color:#12172a;font-size:clamp(24px,2.4vw,36px);line-height:1.06;letter-spacing:-.02em;margin:0 0 8px}
.cc-body p{font-family:"Manrope","Manrope Fallback",sans-serif;font-weight:400;color:#292e34;font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 16px}
/* grade chips: pipes / tubes groups; the first ("All ...") chip is filled with the brand colour */
.cc-grades{display:flex;flex-direction:column;gap:12px}
.cc-grp__k{display:inline-flex;align-items:center;height:32px;padding:0 15px;margin-bottom:8px;border-radius:999px;background:#002347;color:#fff;font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.cc-chips{display:flex;flex-wrap:wrap;gap:7px}
.cc-chips a{display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:999px;border:1px solid rgba(0,35,71,.32);background:transparent;color:#12172a;font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .25s}
.cc-chips a:hover{background:#004690;border-color:#004690;color:#fff;transform:translateY(-1px)}
.chain-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:6;display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:9px 14px;border-radius:999px}
.chain-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(30,25,20,.30);cursor:pointer;transition:width .25s,background .25s}
.chain-dots button.on{background:#12172a;width:22px;border-radius:4px}
/* 13. Made in Thailand — pinned split reveal */
.vsplit{position:relative;background:#012040} /* same navy as .vsplit-pin, so the padded mobile layout is one colour */
.vsplit-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#012040}
.vsplit-stage{position:relative;width:100%;height:100%}
.vsplit-t{font-family:"Manrope","Manrope Fallback",sans-serif;font-weight:800;font-size:clamp(30px,4.2vw,68px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#fff;white-space:nowrap;margin:0;will-change:transform;position:absolute;top:50%;transform:translate3d(0,-50%,0)}
.vsplit-t.l{right:calc(50% + 252px)}
.vsplit-t.r{left:calc(50% + 252px)}
.vsplit-t .dot{position:absolute;left:2px;bottom:6px;width:10px;height:10px;border-radius:50%;background:var(--hd-accent);display:block}
.vsplit-media{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:460px;height:220px;border-radius:16px;overflow:hidden;background:#111;will-change:width,height,border-radius}
.vsplit-media img,.vsplit-media video{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;transform:scale(1.15)}
/* 13b. Testimonials — light band with a fanned stacked-card auto slider (JS section 8b).
Cards are dark navy → brand-blue gradient "glass" cards with a notched quote tab on the top edge (social-review-card
reference). No controls: the front card swipes out on its own every 5 s (progress ring around the tab) or when dragged. */
.tsec{position:relative;overflow:hidden;background:#f5f7fb;color:#1c2733;
--t-navy:#002347;--t-text:#292e34;--t-mute:#6b7683;--t-line:rgba(0,35,71,.12);--t-bg:#f5f7fb;
--tc-line:rgba(140,190,255,.35);--tc-accent:#3396ff;--tc-soft:#9cc7ff;--tc-dim:rgba(214,229,247,.72)} /* --tc-accent = light tint for the dark cards (the global --accent is a dark navy for the light sections) */
.tsec-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tsec-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,35,71,.14) 1px,transparent 1.5px);background-size:24px 24px;
-webkit-mask-image:radial-gradient(70% 70% at 62% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 70% at 62% 50%,#000 20%,transparent 100%)}
.tsec-glow{position:absolute;right:-6%;top:-10%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(0,89,184,.2),rgba(0,70,144,0) 66%);animation:ab-drift 24s ease-in-out infinite alternate}
.tsec .wrap{z-index:1}
.tsec .kick{color:var(--brand)}
.tsec .head h2{color:var(--t-navy)}
.tsec .head h2::after{background:var(--brand);box-shadow:none}
.tsec .head p{color:var(--t-text)}
.tsec .head h2,.tsec .head p{text-align:left} /* this section reads left-aligned, next to the review cards (the global .head centres) */
.tgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
/* testimonials heading: three set lines where there is room for them; narrower screens wrap naturally */
@media (min-width:1101px){.tsec .head h2 .tl{display:block}}
.tside .head{margin-bottom:0}
/* rating card under the heading: white top (score), grey bottom (line); sample figures until real reviews are added */
.tscore{margin-top:34px;max-width:380px;border:1px solid var(--t-line);border-radius:18px;overflow:hidden;background:#fff;text-align:center;box-shadow:0 20px 50px rgba(0,35,71,.08)}
.tscore__top{padding:36px 28px 30px}
.tscore__n{display:block;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:700;font-size:clamp(60px,6.4vw,88px);line-height:1;letter-spacing:-.04em;color:var(--t-navy);font-variant-numeric:tabular-nums}
.tscore__l{display:block;margin-top:14px;font-size:14px;line-height:1.4;color:var(--t-mute)}
.tscore__p{margin:0;padding:26px 28px;background:#eef1f6;border-top:1px solid var(--t-line);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:500;color:var(--t-navy)}
/* right column wrapper; the padding-top leaves room for the tab that sticks out above the front card */
.tstack{position:relative;padding-top:30px}
/* deck: JS sets the height to the tallest card and --p (0..1) to the auto-advance progress */
.tdeck{position:relative;height:460px;perspective:1400px;touch-action:pan-y;--p:0}
.js:where(.rv-on) .tdeck.rv{transform:none}
.tghost{position:absolute;right:-8%;top:-.43em;z-index:0;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:800;font-size:clamp(220px,26vw,400px);line-height:1;
color:transparent;-webkit-text-stroke:1.5px rgba(0,70,144,.16);pointer-events:none;user-select:none}
.tcard{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:22px;padding:40px 34px 30px;border-radius:28px;color:#fff;
background:radial-gradient(120% 80% at 50% 105%,rgba(51,150,255,.42),transparent 62%),linear-gradient(180deg,#001c3d 0%,#00254c 40%,#004690 100%);
border:1px solid var(--tc-line);box-shadow:0 30px 70px -10px rgba(0,35,71,.32),inset 0 1px 0 rgba(255,255,255,.1);
opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,70px,0) rotate(0deg) scale(.86);transform-origin:50% 100%;will-change:transform,opacity;
transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .5s,border-color .4s,box-shadow .5s,visibility 0s .75s}
/* faint grid inside the card, stronger towards the top and bottom edges */
.tcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px;background-position:center top;
-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 60%,#000 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 60%,#000 100%)}
/* the two cards behind fan out at slight angles */
.tcard.is-3{visibility:visible;opacity:.55;transform:translate3d(-22px,44px,0) rotate(-4deg) scale(.92);z-index:2;transition-delay:0s}
.tcard.is-2{visibility:visible;opacity:.8;transform:translate3d(16px,22px,0) rotate(3deg) scale(.96);z-index:3;transition-delay:0s}
.tcard.is-front{visibility:visible;opacity:1;transform:none;pointer-events:auto;z-index:5;cursor:grab;
border-color:rgba(140,190,255,.5);box-shadow:0 40px 90px -20px rgba(0,35,71,.5),0 0 0 1px rgba(51,150,255,.12),inset 0 1px 0 rgba(255,255,255,.14);transition-delay:0s}
.tcard.is-out{visibility:visible;opacity:0;pointer-events:none;z-index:6;transform:translate3d(-18%,-6%,0) rotate(-8deg) scale(.96);
transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .45s,visibility 0s .6s}
.tcard.is-out.to-right{transform:translate3d(18%,-6%,0) rotate(8deg) scale(.96)}
.tcard.is-drag{transition:none;cursor:grabbing}
/* pointer spotlight on the front card (main.js writes --mx / --my) */
.tcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;z-index:0;
background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(153,200,255,.16),transparent 62%)}
.tcard.is-front:hover::before{opacity:1}
.tcard>*{position:relative;z-index:1;transition:opacity .35s}
.tcard:not(.is-front):not(.is-out)>*{opacity:0} /* cards behind the front one stay blank until they come forward */
/* notched quote tab on the top edge: the ring in the band colour cuts it into the card outline */
.tcard__tab{position:absolute;top:-27px;left:50%;width:54px;height:54px;margin-left:-27px;border-radius:50%;display:grid;place-items:center;z-index:3;
background:linear-gradient(180deg,#00305f,#001c3d);border:1px solid rgba(140,190,255,.5);color:var(--tc-accent);
box-shadow:0 0 0 7px var(--t-bg),0 10px 24px rgba(0,35,71,.25)}
.tcard__tab svg{width:22px;height:22px;display:block}
/* auto-advance progress as a thin ring around the tab (JS 8b writes --p 0..1 on the deck) */
.tcard__tab::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
background:conic-gradient(var(--tc-accent) calc(var(--p,0)*360deg),rgba(140,190,255,.18) 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
/* visual order: who → quote → industry / counter row (DOM order is unchanged) */
.tcard__who{order:-1;display:flex;align-items:center;gap:14px}
.tcard__av{flex:none;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#0059b8,#004690);color:#fff;display:grid;place-items:center;
font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 8px 20px rgba(0,20,50,.45)}
.tcard__meta b{display:block;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:17px;font-weight:600;color:var(--tc-soft);letter-spacing:-.01em}
.tcard__meta small{display:block;font-size:13px;color:var(--tc-dim);margin-top:3px;line-height:1.4}
.tcard__q{margin:0;flex:1;display:flex;align-items:center}
.tcard__q p{margin:0;font-family:"Manrope","Manrope Fallback",sans-serif;font-weight:500;font-size:19px;line-height:1.5;letter-spacing:-.01em;color:#fff}
.tcard__q p::before{content:"“";color:var(--tc-accent);margin-right:2px}
.tcard__q p::after{content:"”";color:var(--tc-accent);margin-left:2px}
.tcard__top{order:1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tcard__ind{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:6px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.06)}
.tcard__n{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:12px;letter-spacing:.12em;color:var(--tc-dim);font-variant-numeric:tabular-nums}
@media (max-width:900px){
.tgrid{grid-template-columns:1fr;gap:44px}
.tstack{max-width:560px}
}
@media (max-width:600px){
.tstack{padding-top:26px}
.tcard{padding:38px 22px 22px;gap:18px;border-radius:22px}
.tcard__q p{font-size:17px}
.tcard__tab{width:48px;height:48px;margin-left:-24px;top:-24px}
.tcard__tab svg{width:20px;height:20px}
.tghost{font-size:190px;right:-10%;top:-.5em}
.tcard.is-2{transform:translate3d(10px,18px,0) rotate(2deg) scale(.96)}
.tcard.is-3{transform:translate3d(-12px,36px,0) rotate(-3deg) scale(.92)}
}
@media (prefers-reduced-motion:reduce){
.tcard{transition:none}
.tcard.is-out{opacity:0;visibility:hidden}
.tsec-glow{animation:none}
}
/* 14. Applications dial — light band. Industries sit on a rotating ring around a "tube end" that shows the industry photo;
the details column swaps text + application photo (JS section 8c). All selectors are prefixed .tdd-. */
.tdd{
--tdd-blue:#004690;--tdd-navy:#001f3f;--tdd-ink:#002347;--tdd-text:#292e34;--tdd-tint:#3396ff;--tdd-line:#dbe5f2;
--tdd-ease:cubic-bezier(.65,0,.25,1);--tdd-soft:cubic-bezier(.22,.8,.24,1);
--D:560px; /* dial size (JS sets it per screen) */
--R:238px; /* radius where the industry icons sit */
--rot:0deg; /* current dial rotation */
--steel:conic-gradient(from 20deg,#7e8894 0deg,#f5f7f9 38deg,#a3acb7 70deg,#e6eaee 112deg,#6f7a87 160deg,#d9dee4 205deg,#fbfcfd 240deg,#8f99a5 285deg,#cdd3da 330deg,#7e8894 360deg);
position:relative;overflow:hidden;isolation:isolate;
padding:clamp(50px,8vw,50px) 0;
background:radial-gradient(60% 60% at 25% 55%,#e7eff9 0%,#f6f8fb 60%);
color:var(--tdd-ink);
}
.tdd img{display:block}
.tdd-wrap{width:var(--wrap-w);margin:0 auto}
/* header */
.tdd-head{text-align:center;max-width:760px;margin:0 auto}
.tdd-title{margin:20px 0 0;font-size:var(--h2);line-height:var(--h2-lh);font-weight:700;letter-spacing:-.03em;color:var(--tdd-ink)}
.tdd-title em{font-style:normal;color:var(--tdd-blue)}
.tdd-sub{margin:16px auto 0;max-width:56ch;color:var(--tdd-text);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.tdd-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,70px)}
/* the dial */
.tdd-dial{position:relative;width:var(--D);height:var(--D);flex:none}
.tdd-scale{position:absolute;inset:0;animation:tdd-spin 120s linear infinite} /* tick scale turns slowly on its own */
.tdd-scale circle{fill:none}
.tdd-marker{position:absolute;left:50%;top:-14px;z-index:5;translate:-50% 0;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid var(--tdd-tint);filter:drop-shadow(0 4px 6px rgba(51,150,255,.5))}
.tdd-ring{position:absolute;inset:0;list-style:none;margin:0;padding:0;transform:rotate(var(--rot));transition:transform 1.1s var(--tdd-ease)}
.tdd-node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--R) * -1))}
.tdd-dot{position:absolute;left:0;top:0;translate:-50% -50%;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit}
.tdd-in{display:flex;flex-direction:column;align-items:center;gap:6px;transform:rotate(calc(-1 * (var(--a) + var(--rot))));transition:transform 1.1s var(--tdd-ease)} /* keeps icons upright */
.tdd-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--tdd-blue);border:1px solid var(--tdd-line);box-shadow:0 10px 22px -14px rgba(0,35,71,.6);
transition:background-color .45s,color .45s,transform .5s var(--tdd-soft),box-shadow .45s,border-color .45s}
.tdd-lab{font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11.5px;font-weight:700;line-height:1.15;text-align:center;color:var(--tdd-text);white-space:nowrap;transition:color .35s,opacity .35s}
.tdd-dot:hover .tdd-ico{transform:scale(1.12);border-color:var(--tdd-blue)}
.tdd-dot:hover .tdd-lab{color:var(--tdd-ink)}
.tdd-dot[aria-pressed="true"] .tdd-ico{background:var(--tdd-blue);color:#fff;border-color:var(--tdd-blue);transform:scale(1.22);box-shadow:0 0 0 6px rgba(51,150,255,.25),0 14px 26px -12px rgba(0,70,144,.9)}
.tdd-dot[aria-pressed="true"] .tdd-lab{color:var(--tdd-blue);opacity:0}
.tdd-dot:focus-visible{outline:none}
.tdd-dot:focus-visible .tdd-ico{outline:3px solid var(--tdd-tint);outline-offset:3px}
/* tube end in the middle: steel wall + photo inside */
.tdd-tube{position:absolute;left:50%;top:50%;translate:-50% -50%;width:calc(var(--D) * .56);height:calc(var(--D) * .56);border-radius:50%;padding:calc(var(--D) * .028);background:var(--steel);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 40px 70px -40px rgba(0,35,71,.7);transform:rotate(var(--rot));transition:transform 1.1s var(--tdd-ease)}
.tdd-bore{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--tdd-blue),var(--tdd-navy));transform:rotate(calc(-1 * var(--rot)));transition:transform 1.1s var(--tdd-ease)}
.tdd-bore img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent;clip-path:circle(75% at 50% 50%);transition:opacity .6s ease,transform 1.4s var(--tdd-soft),clip-path .9s var(--tdd-soft)}
.tdd-bore img.next{clip-path:circle(0% at 50% 50%);transform:scale(1.2)}
.tdd-bore img.leave{opacity:.4}
.tdd-bore::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 18px 30px -8px rgba(0,0,0,.5),inset 0 -8px 18px -8px rgba(255,255,255,.35)} /* inner wall shading */
/* details */
.tdd-detail{position:relative}
.tdd-detail h3{margin:10px 0 0;font-size:clamp(28px,3vw,42px);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:var(--tdd-ink)}
.tdd-detail>p{margin:14px 0 0;color:var(--tdd-text);font-size:16px;line-height:1.75;max-width:52ch}
.tdd-use{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:stretch;margin-top:26px;padding:14px;border-radius:24px;background:#fff;border:1px solid var(--tdd-line);box-shadow:0 30px 60px -44px rgba(0,35,71,.55)}
.tdd-use-pic{position:relative;overflow:hidden;border-radius:16px;min-height:190px;background:linear-gradient(135deg,var(--tdd-blue),var(--tdd-tint))}
.tdd-use-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent;clip-path:inset(0);transition:opacity .6s ease,transform 1.2s var(--tdd-soft),clip-path .9s var(--tdd-soft)}
.tdd-use-pic img.next{clip-path:inset(0 100% 0 0);transform:scale(1.12)}
.tdd-use-pic img.leave{opacity:.5}
.tdd-use-pic:hover img:not(.leave){transform:scale(1.05)}
.tdd-use-txt{padding:8px 8px 8px 0}
.tdd-use-lab{display:inline-flex;align-items:center;gap:8px;font-family:"Manrope","Manrope Fallback",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tdd-blue)}
.tdd-use-lab::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid var(--tdd-tint)}
.tdd-use-txt strong{display:block;margin-top:8px;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:17px;color:var(--tdd-ink)}
.tdd-use-txt p{margin:8px 0 0;font-size:15px;line-height:var(--lh-body);color:#292e34;}
.tdd-swap{transition:opacity .35s ease,transform .5s var(--tdd-soft)}
#tdd-desc{font-size:var(--fs-lead);line-height:var(--lh-lead)}
.tdd.switching .tdd-swap{opacity:0;transform:translateY(10px)}
@keyframes tdd-spin{to{rotate:360deg}}
@media (max-width:1080px){
.tdd-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
.tdd-detail{width:100%;max-width:680px}
}
@media (max-width:560px){
.tdd-lab{display:none}
.tdd-ico{width:40px;height:40px}
.tdd-ico svg{width:18px;height:18px}
.tdd-use{grid-template-columns:minmax(0,1fr)}
.tdd-use-pic{min-height:180px}
.tdd-use-txt{padding:4px 6px 8px}
}
@media (prefers-reduced-motion:reduce){
.tdd *,.tdd *::before,.tdd *::after{animation:none!important;transition:none!important}
}
/* 15. Footer — dark-blue "thaida" footer. Every selector is scoped to footer.thaida (the header mega menu also uses .col / .open) and tokens are prefixed --ft- so they never override the site tokens above. */
footer.thaida{
--ft-brand:#004690;--ft-brand-dark:#00305f;--ft-brand-deep:#001f3f;--ft-brand-light:#0f62bf;
--ft-accent:#4d9cf0;--ft-accent-soft:#9cc7ff;
--ft-bg-1:#00203f;--ft-bg-2:#002d5c;--ft-bg-3:#003a78;
--ft-ink:#eef4fb;--ft-ink-dim:#a9c3e3;--ft-ink-faint:#7ea0c9;
--ft-line:rgba(77,156,240,.22);
--ft-ease:cubic-bezier(.22,.61,.36,1);
position:relative;width:100%;overflow:hidden;
color:var(--ft-ink);font-family:"Manrope","Manrope Fallback",sans-serif;font-size:15px;line-height:1.5;
background:
radial-gradient(900px 500px at 12% -10%,rgba(0,70,144,.75),transparent 60%),
radial-gradient(1000px 600px at 90% 10%,rgba(15,98,191,.35),transparent 55%),
linear-gradient(180deg,var(--ft-bg-1) 0%,var(--ft-bg-2) 55%,var(--ft-bg-3) 100%);
}
.thaida .dot-grid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
/* top strip */
/* each half keeps its full-bleed colour, but the content sits on the page wrap: the brochure block runs from the wrap's left
edge to the middle, the support block from the middle to the wrap's right edge (inside a half, 100% = the half's width) */
.thaida .top-strip{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr;
--strip-mid:clamp(24px,3vw,48px); /* space either side of the centre line */
--strip-edge:max(var(--gutter),100% - var(--wrap-max) / 2 + var(--gutter))} /* half width minus half the wrap's content width */
.thaida .strip-half{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--strip-mid);color:#fff;text-decoration:none;position:relative;overflow:hidden;transition:background .35s var(--ft-ease)}
.thaida .strip-half.brochure{background:var(--ft-brand);padding-left:var(--strip-edge)}
.thaida .strip-half.support{background:var(--ft-brand-dark);padding-right:var(--strip-edge)}
.thaida .strip-half::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 100%);transform:translateX(-100%);transition:transform .7s var(--ft-ease)}
.thaida .strip-half:hover::before{transform:translateX(100%)}
.thaida .strip-half.brochure:hover{background:var(--ft-brand-light)}
.thaida .strip-half.support:hover{background:var(--ft-brand)}
.thaida .strip-left{display:flex;align-items:center;gap:22px}
.thaida .strip-icon{width:46px;height:46px;flex-shrink:0;color:#fff;transition:transform .4s var(--ft-ease)}
.thaida .strip-icon svg,.thaida .strip-action svg{width:100%;height:100%;display:block}
.thaida .strip-half:hover .strip-icon{transform:scale(1.12) rotate(-6deg)}
.thaida .strip-divider{width:1px;height:46px;background:rgba(255,255,255,.55)}
.thaida .strip-title{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:24px;font-weight:600;line-height:1.2;}
.thaida .strip-sub{font-size:15px;font-weight:500;margin-top:5px;opacity:.95}
.thaida .strip-action{width:42px;height:42px;flex-shrink:0;color:#fff;transition:transform .4s var(--ft-ease)}
.thaida .strip-half.brochure:hover .strip-action{animation:ft-dl-bounce .9s var(--ft-ease) infinite}
.thaida .strip-half.support:hover .strip-action{animation:ft-ring .7s var(--ft-ease) infinite}
@keyframes ft-dl-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes ft-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
/* corner accents (bottom edge of the footer) */
.thaida .accent-corner{position:absolute;bottom:0;height:34px;width:220px;background:linear-gradient(90deg,var(--ft-brand),var(--ft-accent));clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);z-index:3}
.thaida .accent-corner.left{left:0}
.thaida .accent-corner.right{right:0}
.thaida .accent-line{position:absolute;bottom:34px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(90,169,255,.6),transparent);z-index:2}
/* main grid */
/* the link columns take their natural width (every link stays on one line); the brand text and contact column share the rest */
.thaida .top-grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(220px,1.15fr) auto auto auto minmax(0,1fr);gap:28px 32px;width:var(--wrap-w);padding:64px 0 40px;margin:0 auto}
.thaida .feature-bar,.thaida .bottom-bar{width:var(--wrap-w);margin:0 auto}
/* brand column */
.thaida .brand-col{display:flex;flex-direction:column;gap:18px}
.thaida .logo-block{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:fit-content;text-decoration:none}
.thaida .brand-desc{font-size:14px;line-height:1.7;color:#fff;max-width:34ch}
.thaida .socials{display:flex;gap:10px;margin-top:4px}
.thaida .socials a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--ft-line);color:var(--ft-ink);transition:transform .3s var(--ft-ease),background .3s,border-color .3s,box-shadow .3s}
.thaida .socials a svg{width:15px;height:15px;transition:transform .3s var(--ft-ease)}
.thaida .socials a:hover{background:linear-gradient(140deg,var(--ft-brand),var(--ft-brand-light));border-color:transparent;color:#fff;transform:translateY(-4px);box-shadow:0 10px 20px -8px rgba(90,169,255,.7)}
.thaida .socials a:hover svg{transform:scale(1.15)}
/* link columns */
.thaida .col h4,.thaida .col .col-h{display:flex;align-items:center;gap:9px;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:0;color:#fff;margin:0 0 20px;position:relative;padding-bottom:10px} /* .col-h: the product pages use
instead of
(13 Oct 2026) */
.thaida .col h4::after,.thaida .col .col-h::after,.thaida .col .col-head::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:34px;background:linear-gradient(90deg,var(--ft-accent),transparent);border-radius:2px;transition:width .4s var(--ft-ease)}
.thaida .col:hover h4::after,.thaida .col:hover .col-h::after,.thaida .col:hover .col-head::after{width:70px}
.thaida .col h4 svg,.thaida .col .col-h svg{width:19px;height:19px;color:var(--ft-accent);flex-shrink:0}
.thaida .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.thaida .col .col-head{display:block;text-decoration:none;margin-bottom:20px;position:relative;padding-bottom:10px;width:fit-content}
.thaida .col .col-title{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:20px;font-weight:700;color:#fff;transition:color .3s}
.thaida .col .col-title .arr{display:inline-block;transition:transform .35s var(--ft-ease);color:var(--ft-accent)}
.thaida .col .col-head:hover .col-title{color:var(--ft-accent-soft)}
.thaida .col .col-head:hover .col-title .arr{transform:translateX(5px)}
.thaida .col ul li a{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;width:fit-content;position:relative;padding:2px 0;line-height:1.4;transition:color .3s,transform .35s var(--ft-ease)}
.thaida .col ul li a .chev{color:var(--ft-accent);flex-shrink:0;display:inline-flex;transition:transform .35s var(--ft-ease),color .3s}
.thaida .col ul li a::after{content:"";position:absolute;left:18px;right:0;bottom:-1px;height:1px;background:var(--ft-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ft-ease)}
.thaida .col ul li a:hover{color:#fff;transform:translateX(6px)}
.thaida .col ul li a:hover .chev{transform:translateX(3px);color:var(--ft-accent-soft)}
.thaida .col ul li a:hover::after{transform:scaleX(1)}
/* get in touch */
.thaida .touch-item{position:relative;display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;color:inherit;text-decoration:none}
/* phone row: the link holds only the number (the hours are plain text), and is stretched over the whole row so the row stays one click target */
.thaida .touch-item a.t-main{display:block;text-decoration:none}
.thaida .touch-item a.t-main::after{content:"";position:absolute;inset:0}
.thaida .touch-item .icon-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,70,144,.35);border:1px solid rgba(90,169,255,.4);color:var(--ft-accent);margin-top:1px;transition:background .3s,transform .35s var(--ft-ease),color .3s,box-shadow .3s}
.thaida .touch-item .icon-badge svg{width:14px;height:14px}
.thaida .touch-item:hover .icon-badge{background:linear-gradient(140deg,var(--ft-brand),var(--ft-brand-light));color:#fff;transform:scale(1.12);box-shadow:0 0 0 4px rgba(90,169,255,.18)}
.thaida .touch-item .t-main{font-size:14px;color:#fff;font-weight:700;line-height:1.4;transition:color .3s}
.thaida .touch-item:hover .t-main{color:var(--ft-accent-soft)}
.thaida .touch-item .t-sub{font-size:12.5px;color:#fff;margin-top:2px;line-height:1.5}
.thaida .quote-btn{margin-top:8px;display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;border:none;cursor:pointer;background:linear-gradient(90deg,var(--ft-brand),var(--ft-brand-light));color:#fff;font-size:14.5px;font-weight:700;font-family:"Manrope","Manrope Fallback",sans-serif;text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,70,144,.8);transition:transform .3s var(--ft-ease),box-shadow .3s,filter .3s}
.thaida .quote-btn svg{width:15px;height:15px;transition:transform .3s var(--ft-ease)}
.thaida .quote-btn:hover{filter:brightness(1.12);transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(90,169,255,.8)}
.thaida .quote-btn:hover svg{transform:translateX(4px)}
/* feature bar */
.thaida .feature-bar{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ft-line);border-bottom:1px solid var(--ft-line);padding:26px 0}
.thaida .feature{display:flex;align-items:center;gap:14px;padding:0 20px;position:relative;cursor:default;transition:transform .35s var(--ft-ease)}
.thaida .feature:not(:first-child){border-left:1px solid var(--ft-line)}
.thaida .feature:first-child{padding-left:0} /* first item starts on the wrap edge */
.thaida .feature .f-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ft-accent);color:var(--ft-accent);transition:background .35s,color .35s,transform .35s var(--ft-ease),box-shadow .35s}
.thaida .feature .f-icon svg{width:20px;height:20px}
.thaida .feature:hover{transform:translateY(-3px)}
.thaida .feature:hover .f-icon{background:linear-gradient(140deg,var(--ft-brand),var(--ft-brand-light));color:#fff;border-color:transparent;transform:rotate(-8deg) scale(1.08);box-shadow:0 10px 20px -8px rgba(90,169,255,.7)}
.thaida .feature .f-title{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",sans-serif;font-size:14.5px;font-weight:700;color:#fff;transition:color .3s}
.thaida .feature:hover .f-title{color:var(--ft-accent-soft)}
.thaida .feature .f-sub{font-size:12.5px;color:var(--ft-ink-faint);margin-top:2px}
/* bottom bar */
.thaida .bottom-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 48px}
.thaida .copyright{font-size:14px;color:#fff;line-height:1.6}
.thaida .badges{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.thaida .badge{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;opacity:.85;cursor:default;transition:transform .35s var(--ft-ease),opacity .3s,color .3s}
.thaida .badge:hover{opacity:1;transform:translateY(-4px) scale(1.08)}
.thaida .badge svg{width:34px;height:34px}
.thaida .badge span{font-size:11px;margin-top:2px;font-weight:600}
/* language dropdown */
.thaida .lang-wrap{position:relative}
.thaida .lang-select{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--ft-line);background:rgba(255,255,255,.04);color:var(--ft-ink);font-size:13px;font-weight:500;cursor:pointer;font-family:"Manrope","Manrope Fallback",sans-serif;transition:background .3s,border-color .3s,transform .3s var(--ft-ease)}
.thaida .lang-select svg{width:14px;height:14px;color:var(--ft-accent)}
.thaida .lang-select:hover,.thaida .lang-wrap.open .lang-select{background:rgba(0,70,144,.35);border-color:rgba(90,169,255,.45);transform:translateY(-2px)}
.thaida .lang-select .caret{margin-left:2px;transition:transform .3s var(--ft-ease)}
.thaida .lang-wrap.open .caret{transform:rotate(180deg)}
.thaida .lang-menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:150px;margin:0;background:var(--ft-brand-deep);border:1px solid rgba(77,156,240,.4);border-radius:12px;padding:6px;list-style:none;box-shadow:0 18px 40px -14px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(6px);z-index:10;
content-visibility:hidden; /* closed: its contents (emoji flags, Thai text) are not laid out, which saved ~25% of every page layout; it switches back when the fade-out ends */
transition:opacity .25s,transform .25s var(--ft-ease),visibility .25s,content-visibility .25s allow-discrete}
.thaida .lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);content-visibility:visible}
.thaida .lang-menu li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ft-ink-dim);cursor:pointer;transition:background .25s,color .25s}
.thaida .lang-menu li .flag{font-size:16px;line-height:1}
.thaida .lang-menu li:hover{background:rgba(0,70,144,.5);color:#fff}
.thaida .lang-menu li.active{color:#fff;background:rgba(90,169,255,.15)}
.thaida .lang-menu li.active::after{content:"✓";margin-left:auto;color:var(--ft-accent);font-size:12px}
/* footer responsive */
@media (max-width:1279px){
.thaida .strip-title{font-size:20px}
.thaida .top-grid{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "pipes tubes" "quick touch";row-gap:40px;padding:52px 0 36px}
.thaida .brand-col{grid-area:brand}
.thaida .col.quick{grid-area:quick}
.thaida .col.pipes{grid-area:pipes}
.thaida .col.tubes{grid-area:tubes}
.thaida .col.touch{grid-area:touch}
.thaida .feature-bar{grid-template-columns:1fr 1fr;row-gap:24px;padding:26px 0}
.thaida .feature:nth-child(3){border-left:none;padding-left:0}
.thaida .bottom-bar{padding:22px 0 44px}
}
@media (max-width:760px){
.thaida .top-strip{grid-template-columns:1fr}
.thaida .strip-half,.thaida .strip-half.brochure,.thaida .strip-half.support{padding:20px var(--gutter)} /* stacked: both halves on the wrap edges */
.thaida .strip-title{font-size:18px}
.thaida .strip-sub{font-size:13px}
.thaida .strip-icon{width:38px;height:38px}
.thaida .strip-action{width:34px;height:34px}
.thaida .top-grid{grid-template-columns:1fr;grid-template-areas:"brand" "pipes" "tubes" "quick" "touch";padding:44px 0 30px;row-gap:36px}
.thaida .feature-bar{grid-template-columns:1fr;padding:24px 0;row-gap:22px}
.thaida .feature{border-left:none!important;padding:0}
.thaida .bottom-bar{flex-direction:column;align-items:flex-start;padding:22px 0 40px}
.thaida .badges{gap:16px}
.thaida .badge svg{width:28px;height:28px}
.thaida .accent-corner{width:130px;height:24px}
.thaida .accent-line{bottom:24px}
}
@media (prefers-reduced-motion:reduce){
.thaida .strip-action,.thaida .strip-icon,.thaida .socials a,.thaida .feature,.thaida .feature .f-icon,.thaida .badge,.thaida .col ul li a,.thaida .touch-item .icon-badge,.thaida .quote-btn{animation:none!important;transition:none}
}
/* back to top: white disc with a brand-blue arrow; the ring around it fills as the page scrolls (main.js sets the
ring's stroke-dashoffset and --lift, which moves the button above the footer's language switch when they would meet) */
.toTop{position:fixed;right:24px;bottom:24px;z-index:55;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
background:#fff;color:var(--brand);box-shadow:0 12px 28px rgba(0,31,63,.24),0 2px 6px rgba(0,31,63,.12);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.85);translate:0 calc(var(--lift,0px) * -1);
transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),translate .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s,background-color .3s,color .3s,box-shadow .3s}
.toTop.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.toTop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none} /* ring starts at 12 o'clock */
.toTop__ring circle{fill:none;stroke-width:3;transition:stroke .3s}
.toTop__track{stroke:rgba(0,70,144,.12)}
.toTop__prog{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.toTop__arw{position:relative;width:20px;height:20px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.toTop:hover{background:var(--brand);color:#fff;box-shadow:0 14px 32px var(--glow-brand)}
.toTop:hover .toTop__track{stroke:rgba(255,255,255,.22)}
.toTop:hover .toTop__prog{stroke:#fff}
.toTop:hover .toTop__arw{transform:translateY(-3px)}
.toTop:focus-visible{border-radius:50%;outline-offset:4px}
@media (max-width:600px){.toTop{right:16px;bottom:16px;width:46px;height:46px}.toTop__arw{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.toTop,.toTop__arw{transition:none}}
/* 16. Motion (JS-enhanced only; html.js is set inline in ) */
.js:where(.rv-on) .rv{opacity:0;transform:translateY(42px) scale(.98);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js:where(.rv-on) .rv.in{opacity:1;transform:none}
.js:where(.rv-on) .card.rv{transition:opacity .6s cubic-bezier(.34,1.4,.5,1),transform .6s cubic-bezier(.34,1.4,.5,1)}
.js:where(.rv-on) .card.rv.in{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
/* word rise (clip mask) — used by section headings below the fold */
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hw>span{display:inline-block;transform:translateY(120%) skewY(6deg);transition:transform .9s cubic-bezier(.16,1,.3,1)}
/* hero: no clip and no opacity:0, so the H1 paints on the first frame (LCP-safe); transform-only settle */
.hseq .hw{overflow:visible;padding:0;margin:0}
.hseq .hw>span{transform:translateY(.3em) skewY(3deg)}
.hseq.reveal .hw>span{transform:none}
html:not(.js) .hseq .hw>span{transform:none} /* heading words are pre-split in the HTML; without JS they simply sit in place */
/* section heading words rise on scroll */
.js .head{transform:none}
.rise .hw{padding-bottom:.12em;margin-bottom:-.12em}
.js .rise{transform:none!important}
.js .rise .hw>span{transform:translateY(120%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.js .rise.in-rise .hw>span{transform:none}
/* 3D word flip-up heading */
.flip{perspective:700px}
.js .flip{transform:none!important}
.js .flip .hw{overflow:visible;padding:0;margin:0;transform-style:preserve-3d}
.js .flip .hw>span{opacity:0;transform:translate3d(0,42px,70px) rotateX(88deg);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .9s}
.js .flip.in-rise .hw>span{opacity:1;transform:none}
/* scroll-scrub targets */
[data-scrub]{will-change:transform,opacity}
[data-scrub="media"]{overflow:hidden}
[data-scrub="media"] img{will-change:transform;transform-origin:center}
/* 17. Responsive */
@media (max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}}
/* hero: no pin / no video scrub on small screens or touch devices (poster + rotating word instead) */
@media (max-width:900px),(pointer:coarse){
.hseq{height:auto}
.hseq-pin{position:relative;height:100vh;height:100svh;min-height:560px}
}
@media (max-width:900px){
.two{grid-template-columns:1fr;gap:40px}
.deal{height:auto!important}
.deal-pin{position:static}
.deal-big{display:none}
.js .deal-grid .card{opacity:1!important;transform:none!important}
.vsplit{height:auto!important;padding:80px 0}
.vsplit-pin{position:static;height:auto;overflow:visible}
.vsplit-stage{display:flex;flex-direction:column;align-items:center;gap:18px;height:auto}
.vsplit-t{position:static;transform:none!important;font-size:clamp(40px,12vw,72px)}
.vsplit-media{position:static;transform:none;width:min(92vw,560px)!important;height:auto!important;aspect-ratio:16/9;border-radius:16px!important}
.vsplit-media img,.vsplit-media video{transform:none!important}
}
@media (max-width:760px){
/* carousel becomes a single card in normal flow */
.chain{height:auto;margin-top:30px}
.chain-card{position:relative;top:auto;left:auto;transform:none!important;width:calc(100% - 32px)!important;height:auto!important;opacity:1!important;z-index:1!important;display:none;margin:16px auto;cursor:default}
.chain-card.is-active{display:block}
.cc-box{position:relative;inset:auto;clip-path:none!important;border-radius:24px;padding:14px}
.cc-media,.chain-card.is-active .cc-media{position:relative;left:auto;top:auto;width:auto;height:200px;border-radius:16px;transform:none!important}
.cc-media img{transform:none!important}
.cc-body{position:relative;top:auto;left:auto;right:auto;bottom:auto;opacity:1;visibility:visible;pointer-events:auto;padding:22px 16px 8px}
.chain-dots{position:relative;left:auto;transform:none;bottom:auto;margin:4px auto 18px;width:max-content}
}
@media (max-width:700px){
.hseq-chips{flex-direction:column;align-items:stretch}
.hchip{height:64px;padding:10px 6px 10px 16px}
.hchip .logos{display:none}
.hchip .th{flex:0 1 64px;min-width:0} /* the three thumbnails shrink so the arrow always fits on narrow phones */
.hchip .harw{margin-left:auto} /* arrow on the right end of the full-width chip */
}
@media (max-width:420px){
.hchip .th+.th+.th{display:none} /* small phones: two thumbnails, so neither gets squeezed */
}
@media (max-width:600px){
.hseq-copy h1{font-size:clamp(32px,10vw,42px)} /* keeps the longest rotating word ("Super Duplex Steel") on one line down to 320px */
}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
@media (max-width:520px){.grid4{grid-template-columns:1fr}}
/* 18. Reduced motion */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js:where(.rv-on) .rv{opacity:1!important;transform:none!important;transition:none}
.hw>span,.js .rise .hw>span,.js .flip .hw>span{opacity:1!important;transform:none!important;transition:none}
[data-scrub]{transform:none!important;opacity:1!important}
.xh-dd.mega.open .xh-mega{animation:none}
.hseq{height:auto}
.hseq-pin{position:relative}
.hseq-copy .rot span{transition:none}
.hseq-vid{transition:none!important}
.chain-card,.cc-box,.cc-media,.cc-media img,.cc-body,.cc-logo{transition:none}
.deal{height:auto!important}
.deal-pin{position:static}
.deal-big{display:none}
.js .deal-grid .card{opacity:1!important;transform:none!important}
.vsplit{height:auto!important;padding:80px 0}
.vsplit-pin{position:static;height:auto}
.vsplit-stage{display:flex;flex-direction:column;align-items:center;gap:18px;height:auto}
.vsplit-t{position:static;transform:none!important}
.vsplit-media{position:static;transform:none;width:min(92vw,900px)!important;height:auto!important;aspect-ratio:2/1;border-radius:16px!important}
.vsplit-media img,.vsplit-media video{transform:none!important}
}
/* ============================================================
CERTIFICATES (light "blueprint" band; tokens re-scoped so it reads on white)
Copy column is sticky; the 4 certificates start as a fanned stack and spread
into a 2x2 grid as you scroll (JS sets --p 0..1 per card, CSS does the pose).
Hover: 3D tilt + pointer glare + sheen sweep. Click: native