/* Thai Industries — site stylesheet
   Generated by build.py. Edit this file directly for style changes;
   it is copied verbatim into site/css/site.css on every build. */

:root{
  /* ---- PHOTOGRAPHY (Unsplash Licence — free for commercial use) --------
       Self-host these for production: download each, drop it in /assets,
       and swap the URL below for the local path. ----------------------- */
  --img-hero:      url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&w=2000&q=80');   /* match action, players in kit */
  --img-cat-1:     url('https://images.unsplash.com/photo-1649771543037-916e2702008a?auto=format&fit=crop&w=1400&q=80');   /* team jerseys on display */
  --img-cat-2:     url('https://images.unsplash.com/photo-1555529771-835f59fc5efe?auto=format&fit=crop&w=1400&q=80');   /* finished garments on factory rails */
  --img-cat-3:     url('https://images.unsplash.com/photo-1585925452553-03549ee41dc9?auto=format&fit=crop&w=1200&q=80');   /* shirts on hangers */
  --img-cat-4:     url('https://images.unsplash.com/photo-1551958219-acbc608c6377?auto=format&fit=crop&w=1200&q=80');   /* footballs on the pitch */
  --img-cat-5:     url('https://images.unsplash.com/photo-1606925797300-0b35e9d1794e?auto=format&fit=crop&w=1200&q=80');   /* socks and boots in play */
  --img-factory:   url('https://images.unsplash.com/photo-1673201229733-69d19c5c4a87?auto=format&fit=crop&w=1400&q=80');   /* sewing machine operator */
  --img-cta:       url('https://images.unsplash.com/photo-1741176505800-caaa3a52631a?auto=format&fit=crop&w=2000&q=80');   /* production floor, sewing line */

  /* ---- BRAND PALETTE (sampled from the logo) ---------------------------- */
  --brand:     #0A8BFF;
  --brand-700: #0670D6;
  --accent:    #ED3237;
  --ink:       #071426;
  --navy:      #0B1C2E;
  --paper:     #F2F6FA;
  --white:     #FFFFFF;
  --muted:     #57697C;
  --muted-d:   rgba(233,240,248,.7);
  --line:      #DCE4EC;
  --line-d:    rgba(255,255,255,.13);

  --display:'Saira Condensed','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9vw,7.5rem);
  --hdr:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:#152435;font-family:var(--body);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;line-height:.98;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
/* consistent treatment across every photo surface */
.hero__bg,.bulk__bg,.cat__img,.who__img,.crow__media{
  filter:saturate(1.05) contrast(1.03);
  background-repeat:no-repeat;background-size:cover;background-position:center}

.eyebrow{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand-700);display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--accent);flex:none;border-radius:50%}
.eyebrow--light{color:var(--brand)}
.h2{font-size:clamp(2.05rem,4.4vw,3.35rem)}
.lede{max-width:60ch;color:var(--muted);font-size:1.06rem;margin-top:1.15rem}
.lede--light{color:var(--muted-d)}

/* ---- buttons ----------------------------------------------------------- */
.btn{--cut:12px;display:inline-flex;align-items:center;gap:.7rem;padding:1.02rem 1.7rem;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(5px)}
.btn--primary{background:var(--brand);color:var(--ink)}
.btn--primary:hover{background:var(--white)}
.btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn--ghost:hover{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--white)}
.btn--dark{background:var(--navy);color:var(--white)}
.btn--dark:hover{background:var(--brand-700)}
.btn--sm{padding:.78rem 1.25rem;font-size:.92rem;--cut:9px}

/* ================= HEADER ================= */
.topbar{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--white)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--hdr)}
.logo{flex:none;display:block;padding-block:6px}
.logo img{width:clamp(76px,7vw,94px);height:auto}
.foot .logo img{width:132px}
.mobnav .logo img{width:86px}
.topbar__actions{display:flex;align-items:center;gap:.4rem}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;color:var(--white);
  box-shadow:inset 0 0 0 1px var(--line-d);transition:background .2s,color .2s}
.iconbtn:hover{background:var(--brand);color:var(--ink)}
.iconbtn svg{width:18px;height:18px}
.topbar .btn{margin-left:.55rem}

/* ================= NAV ================= */
.nav{background:var(--navy);border-top:1px solid var(--line-d);position:sticky;top:var(--hdr);z-index:59}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav__list{display:flex;gap:2.4rem;list-style:none;margin:0;padding:0}
.nav__list a{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);display:block;padding:.5rem 0;position:relative;transition:color .2s}
.nav__list a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand);transition:width .28s ease}
.nav__list a:hover{color:var(--white)}
.nav__list a:hover::after{width:100%}
.nav__list a[aria-current="page"]{color:var(--white)}
.nav__list a[aria-current="page"]::after{width:100%;background:var(--brand)}
.nav__note{font-size:.82rem;color:var(--muted-d);letter-spacing:.04em}
.nav__label{display:none}
.burger{display:none;background:none;border:0;color:var(--white);padding:.5rem;cursor:pointer}
.burger svg{width:24px;height:24px}

.mobnav{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--white);
  padding:1.1rem var(--gut) 2.2rem;display:none;flex-direction:column;overflow-y:auto}
.mobnav[data-open="true"]{display:flex}
.mobnav__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.mobnav__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.mobnav__list a{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 0;
  border-bottom:1px solid var(--line-d);font-family:var(--display);font-weight:700;font-size:1.6rem;text-transform:uppercase}
.mobnav__list a span{color:var(--brand);font-size:1rem}
.mobnav__list a[aria-current="page"]{color:var(--brand)}
.mobnav__foot{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem}
.mobnav__foot .btn{justify-content:center}

/* ================= HERO (home) ================= */
.hero{position:relative;isolation:isolate;background:var(--ink);color:var(--white);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;background-color:var(--ink);
  background-image:var(--img-hero);background-size:cover;background-position:center 35%}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(7,20,38,.96) 0%,rgba(7,20,38,.88) 40%,rgba(7,20,38,.5) 100%)}
.hero__in{padding-block:clamp(4.5rem,11vw,8rem);max-width:min(860px,100%)}
.hero h1{font-size:clamp(3rem,7.6vw,5.9rem);line-height:.9;letter-spacing:-.015em;text-transform:uppercase}
.hero h1 em{display:block;font-style:normal;color:var(--brand)}
.hero .lede{margin-top:1.6rem;font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.hero__strip{border-top:1px solid var(--line-d);display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.hero__strip div{padding:1.35rem 1rem 1.35rem 0}
.hero__strip dt{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--brand);line-height:1}
.hero__strip dd{margin:.35rem 0 0;font-size:.85rem;color:var(--muted-d)}

/* ================= PAGE HERO (inner pages) ================= */
.phero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(58deg,rgba(10,139,255,.08) 0 6px,transparent 6px 18px)}
.phero__in{position:relative;z-index:1;padding-block:clamp(3.2rem,7vw,5.2rem)}
.phero h1{font-size:clamp(2.4rem,5.6vw,4.1rem);text-transform:uppercase}
.phero p:not(.crumb){color:var(--muted-d);max-width:58ch;margin-top:1.1rem}
/* max-width:none — .crumb is a <p>, so it would inherit the 58ch body-copy cap
   and squeeze a long trail (Home / Category / Product Type / Product) mid-word */
.crumb{font-family:var(--display);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:.78rem;color:var(--brand);margin-bottom:1rem;display:flex;align-items:center;
  flex-wrap:wrap;row-gap:.3rem;gap:.6rem;max-width:none}
.crumb>*{flex:none}
.crumb a{color:var(--muted-d)}
.crumb a:hover{color:var(--white)}

/* ================= TESTIMONIALS ================= */
.trust{background:var(--paper);border-bottom:1px solid var(--line)}
.trust__head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.trust__head h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:20ch}
.trust__rating{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted)}
.stars{display:flex;gap:2px;color:var(--brand-700)}
.stars svg{width:15px;height:15px}
/* ================= WHY ================= */
.why{background:var(--navy);color:var(--white)}
.why__head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
.feat{background:var(--navy);padding:2.1rem 1.7rem 2.3rem;position:relative}
.feat::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--brand);transition:width .35s ease}
.feat:hover::before{width:100%}
.feat__ico{width:34px;height:34px;color:var(--brand);margin-bottom:1.4rem}
.feat h3{font-size:1.3rem;margin-bottom:.65rem}
.feat p{font-size:.94rem;color:var(--muted-d)}

/* ================= CATEGORIES ================= */
.cats__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap}
.cats__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{position:relative;overflow:hidden;background:var(--navy);min-height:300px;display:flex;align-items:end;color:var(--white)}
.cat--wide{grid-column:span 3;min-height:400px}
.cat--third{grid-column:span 2}
.cat__img{position:absolute;inset:0;background-color:var(--navy);background-image:var(--img-cat);
  background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cat:hover .cat__img{transform:scale(1.06)}
.cat__veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,20,38,.94) 0%,rgba(7,20,38,.5) 46%,rgba(7,20,38,.1) 100%)}
.cat__body{position:relative;padding:1.6rem;width:100%;display:flex;align-items:end;justify-content:space-between;gap:1rem}
.cat h3{font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em}
.cat p{font-size:.9rem;color:var(--muted-d);margin-top:.4rem;max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s ease}
.cat:hover p,.cat:focus-within p{max-height:6rem;opacity:1}
.cat__arrow{width:44px;height:44px;flex:none;background:var(--brand);color:var(--ink);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);transform:translateY(6px);opacity:.9;
  transition:transform .3s ease,opacity .3s ease}
.cat:hover .cat__arrow{transform:translateY(0);opacity:1}
.cat__arrow svg{width:18px;height:18px}

/* category detail rows (categories page) */
.crow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.crow + .crow{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.crow__media{position:relative;aspect-ratio:4/3;overflow:hidden;background-color:var(--navy);
  background-size:cover;background-position:center}
.crow:nth-child(even) .crow__media{order:2}
.crow h2{font-size:clamp(1.8rem,3.4vw,2.6rem);text-transform:uppercase}
.crow ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem}
.crow li{display:flex;gap:.7rem;font-size:.96rem;color:#22303F}
.crow li svg{width:17px;height:17px;color:var(--brand-700);flex:none;margin-top:.3rem}
.crow .btn{margin-top:1.9rem}

/* ================= PROCESS ================= */
.proc{background:var(--paper)}
.proc__head{margin-bottom:clamp(2.6rem,5vw,3.6rem);max-width:620px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ink)}
.step{padding:1.9rem 1.4rem 0 0;position:relative}
.step + .step{padding-left:1.4rem;border-left:1px solid var(--line)}
.step__n{font-family:var(--display);font-weight:800;font-size:3.1rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px #AEBAC7;display:block;margin-bottom:.9rem}
.step:hover .step__n{-webkit-text-stroke:1.5px var(--brand)}
.step h3{font-size:1.22rem;margin-bottom:.55rem}
.step p{font-size:.92rem;color:var(--muted)}
.step::before{content:"";position:absolute;top:-2px;left:0;height:4px;width:0;background:var(--brand);transition:width .4s ease}
.step:hover::before{width:100%}

/* ================= WHO WE ARE ================= */
.who__in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.who__media{position:relative}
.who__img{position:relative;aspect-ratio:4/3.2;overflow:hidden;background-color:var(--navy);
  background-image:var(--img-factory);background-size:cover;background-position:center}
.who__badge{position:absolute;right:-14px;bottom:-14px;background:var(--brand);color:var(--ink);
  padding:1.2rem 1.5rem;max-width:236px;clip-path:polygon(0 0,100% 0,100% 78%,86% 100%,0 100%)}
.who__badge b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05}
.who__badge span{font-size:.84rem;line-height:1.4;display:block;margin-top:.3rem}
.who p + p{margin-top:1rem}
.who .btn{margin-top:2rem}
.who__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.who__list li{display:flex;gap:.8rem;font-size:.96rem;color:#22303F}
.who__list svg{width:18px;height:18px;color:var(--brand-700);flex:none;margin-top:.28rem}

/* ================= ABOUT: STORY ================= */
/* Heading row, then history text beside two framed factory photos, then a
   Mission + sign-off row. Both photos are shown at one shared 3:2 frame:
   object-fit:cover trims only the edges (side foliage / empty sky); the
   object-position values keep each building whole. Source files untouched. */
.story__head{max-width:46rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.story__head .h2{text-transform:uppercase}
.story__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.story__text{border-left:2px solid var(--line);padding-left:clamp(1.1rem,2.4vw,1.8rem)}
.story__text p{font-size:1.04rem;line-height:1.8;color:#22303F;max-width:62ch}
.story__text p + p{margin-top:1.15rem}
.story__text p:first-child{font-size:clamp(1.12rem,1.6vw,1.26rem);line-height:1.65;color:var(--ink);font-weight:500}
.story__media{display:grid;gap:clamp(1.2rem,2.4vw,1.75rem)}
.story__frame{position:relative;margin:0;padding:clamp(.45rem,.9vw,.65rem);background:var(--white);
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(7,20,38,.10)}
.story__frame::after{content:"";position:absolute;left:-1px;bottom:-1px;width:72px;height:4px;background:var(--brand)}
.story__frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.story__img--front{object-position:20% 50%}
.story__img--road{object-position:50% 72%}
.story__foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center;margin-top:clamp(2.8rem,5.5vw,4.2rem);padding-top:clamp(2.8rem,5.5vw,4.2rem);border-top:1px solid var(--line)}
.story__mission{padding:clamp(1.5rem,3vw,2.2rem);background:var(--ink);color:var(--white);
  border-left:4px solid var(--brand);clip-path:polygon(0 0,100% 0,100% 82%,96% 100%,0 100%)}
.story__mission h2{font-size:clamp(1.7rem,3vw,2.3rem);text-transform:uppercase;color:var(--brand)}
.story__mission p{margin-top:.9rem;font-size:1.06rem;line-height:1.75;color:rgba(233,240,248,.9);max-width:62ch}
.story__sign{padding:1.4rem 1.6rem;background:var(--paper);border:1px solid var(--line);
  font-size:.98rem;color:var(--muted);line-height:1.6}
.story__sign b{display:block;margin-top:.25rem;font-family:var(--display);font-weight:800;font-size:1.3rem;
  letter-spacing:.06em;color:var(--ink)}
.story__sign a{color:var(--brand-700);font-weight:600}
.story__sign a:hover{color:var(--ink)}

/* ================= ABOUT: CERTIFICATES ================= */
/* Three equal cards. Each emblem is pinned inside a padded 4:3 box and scaled
   with object-fit:contain, so nothing is cropped whatever its proportions. */
.certs{background:var(--paper);border-top:1px solid var(--line)}
.certs__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.4rem,5vw,3.6rem)}
.certs__head .eyebrow{justify-content:center}
.certs__head .h2{text-transform:uppercase}
.certs__head .h2 .dot{color:var(--brand);padding-inline:.18em}
.certs__head .lede{margin-inline:auto}
.certs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,1.9rem)}
.cert{margin:0;position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(7,20,38,.08);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.cert:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 18px 40px rgba(7,20,38,.12)}
.cert::after{content:"";position:absolute;left:-1px;bottom:-1px;width:72px;height:4px;background:var(--brand)}
.cert__media{--p:clamp(1.1rem,2.2vw,1.7rem);position:relative;aspect-ratio:4/3;
  background:var(--white);border-bottom:1px solid var(--line);min-height:0;overflow:hidden}
.cert__media img{position:absolute;top:var(--p);left:var(--p);width:calc(100% - 2*var(--p));height:calc(100% - 2*var(--p));object-fit:contain}
.cert__body{padding:clamp(1.2rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.6rem) clamp(1.5rem,2.4vw,1.8rem)}
.cert__tag{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-700)}
.cert h3{font-size:1.55rem;text-transform:uppercase;margin-top:.45rem;color:var(--ink)}
.cert p{font-size:.93rem;color:var(--muted);margin-top:.55rem;line-height:1.6}
@media (max-width:900px){
  .certs__grid{grid-template-columns:1fr}
  .cert{flex-direction:row;align-items:stretch}
  .cert__media{flex:0 0 42%;aspect-ratio:auto;min-height:200px;border-bottom:0;border-right:1px solid var(--line)}
  .cert__body{align-self:center}
}
@media (max-width:560px){
  .certs__head .h2 .w{display:block}
  .certs__head .h2 .dot{display:none}
  .cert{flex-direction:column}
  .cert__media{flex:none;aspect-ratio:4/3;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){ .cert,.cert:hover{transition:none;transform:none} }

/* ================= BULK CTA ================= */
.bulk{position:relative;isolation:isolate;color:var(--white);text-align:center;overflow:hidden}
.bulk__bg{position:absolute;inset:0;z-index:-2;background-color:var(--ink);background-image:var(--img-cta);
  background-size:cover;background-position:center}
.bulk__veil{position:absolute;inset:0;z-index:-1;background:rgba(7,20,38,.86)}
.bulk__in{padding-block:clamp(5rem,11vw,8rem)}
.bulk .eyebrow{justify-content:center}
.bulk h2{font-size:clamp(2.3rem,5.6vw,4.2rem);text-transform:uppercase;max-width:18ch;margin-inline:auto}
.bulk .lede{margin-inline:auto;text-align:center}
.bulk__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.3rem}

/* ================= CONTACT PAGE ================= */
.cgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.ccards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.8rem}
.ccard{background:var(--white);padding:1.35rem 1.4rem;display:flex;gap:1rem;align-items:flex-start}
.ccard__ico{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--paper);color:var(--brand-700)}
.ccard__ico svg{width:19px;height:19px}
.ccard b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:.02em}
.ccard span,.ccard a{font-size:.95rem;color:var(--muted)}
.ccard a:hover{color:var(--brand-700)}
.form{background:var(--paper);padding:clamp(1.6rem,3vw,2.2rem);border:1px solid var(--line)}
.form h2{font-size:1.6rem;margin-bottom:.4rem}
.form__note{font-size:.9rem;color:var(--muted);margin-bottom:1.6rem}
.field{display:grid;gap:.4rem;margin-bottom:1.05rem}
.field label{font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;color:#33465A}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.98rem;padding:.8rem .9rem;border:1px solid var(--line);
  background:var(--white);color:#152435;border-radius:0;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.form .btn{width:100%;justify-content:center;margin-top:.4rem}

/* ================= FOOTER ================= */
.foot{background:var(--ink);color:var(--white);padding-top:clamp(3.5rem,7vw,5rem)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem}
.foot h4{font-family:var(--display);font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:1.2rem;font-weight:600}
.foot p,.foot li,.foot a{font-size:.93rem;color:var(--muted-d)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a:hover{color:var(--brand)}
.foot__brand p{margin-top:1.2rem;max-width:36ch}
.foot__soc{display:flex;gap:.5rem;margin-top:1.4rem}
.foot__soc a{width:38px;height:38px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-d);
  color:var(--white);transition:background .2s,color .2s}
.foot__soc a:hover{background:var(--brand);color:var(--ink)}
.foot__soc svg{width:17px;height:17px}
.foot__contact li{display:flex;gap:.7rem;align-items:flex-start}
.foot__contact svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:.35rem}
.foot__bar{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line-d);padding-block:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot__bar p{font-size:.85rem}

/* ================= MOTION ================= */
.rise{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .feats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);border-top:0}
  .step{border-top:2px solid var(--ink);padding:1.5rem 1.2rem 1.6rem 0}
  .step + .step{border-left:0;padding-left:0}
  .steps .step:nth-child(even){padding-left:1.4rem;border-left:1px solid var(--line)}
  .who__in,.cgrid{grid-template-columns:1fr}
  .who__badge{right:0}
  .story__in,.story__foot{grid-template-columns:1fr}
  .story__media{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .cat--wide,.cat--third{grid-column:span 3}
  .cat--wide{min-height:340px}
  .crow{grid-template-columns:1fr}
  .crow:nth-child(even) .crow__media{order:0}
}
@media (max-width:820px){
  .nav__list,.nav__note{display:none}
  .burger{display:block}
  .nav__label{display:block;font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;
    font-size:.82rem;color:var(--muted-d)}
  .nav__in{height:50px}
  .hero__strip{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--hdr:70px}
  .topbar .btn{display:none}
  .feats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps .step:nth-child(even){padding-left:0;border-left:0}
  .cats__grid{grid-template-columns:1fr}
  .cat--wide,.cat--third{grid-column:span 1;min-height:270px}
  .cat p{max-height:none;opacity:1}
  .foot__grid{grid-template-columns:1fr}
  .who__badge{position:static;max-width:none;clip-path:none}
  .story__media{grid-template-columns:1fr}
  .story__text{border-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ================= NAVBAR DROPDOWN ================= */
.nav__item{position:relative}
.nav__trigger{display:flex;align-items:center;gap:.4rem;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);padding:.5rem 0;position:relative;transition:color .2s}
.nav__trigger::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--brand);transition:width .28s ease}
.nav__trigger:hover,.nav__item:hover .nav__trigger,.nav__trigger[aria-expanded="true"]{color:var(--white)}
.nav__item:hover .nav__trigger::after,.nav__trigger[aria-expanded="true"]::after,
.nav__trigger[aria-current="page"]::after{width:100%}
.nav__trigger[aria-current="page"]{color:var(--white)}
.nav__caret{width:12px;height:12px;transition:transform .25s ease}
.nav__item:hover .nav__caret,.nav__trigger[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
.nav__drop{position:absolute;top:100%;left:-1rem;min-width:248px;max-width:calc(100vw - 2rem);
  background:var(--ink);border:1px solid var(--line-d);border-top:2px solid var(--brand);
  list-style:none;margin:0;padding:.35rem 0;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop,.nav__drop[data-open="true"]{
  opacity:1;visibility:visible;transform:none}
.nav__drop a{display:block;padding:.62rem 1.15rem;font-family:var(--display);font-weight:600;
  font-size:.96rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.nav__drop a::after{display:none}
.nav__drop a:hover,.nav__drop a:focus-visible{background:var(--navy);color:var(--brand)}
.nav__drop a[aria-current="page"]{color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}

/* mobile submenu */
.mobnav__row{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line-d)}
.mobnav__row a{flex:1;border-bottom:0}
.mobnav__expand{background:none;border:0;color:var(--brand);cursor:pointer;
  padding:1.15rem .3rem 1.15rem 1rem}
.mobnav__expand svg{width:18px;height:18px;transition:transform .25s ease}
.mobnav__expand[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobnav__sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;
  transition:max-height .32s ease;background:rgba(255,255,255,.03)}
.mobnav__sub[data-open="true"]{max-height:480px}
.mobnav__sub a{display:block;padding:.85rem 0 .85rem 1.3rem;border-bottom:1px solid var(--line-d);
  font-family:var(--display);font-weight:600;font-size:1.08rem;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(255,255,255,.75)}
.mobnav__sub a[aria-current="page"]{color:var(--brand)}

/* ================= HERO CAROUSEL ================= */
.hero__slides{position:relative;min-height:clamp(540px,64vh,720px);overflow:hidden}
.hslide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility .9s}
.hslide.is-active{opacity:1;visibility:visible}
.hslide__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--ink)}
.hslide__veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,20,38,.95) 0%,rgba(7,20,38,.85) 38%,rgba(7,20,38,.45) 100%)}
.hslide .wrap{position:relative;z-index:1;width:100%}
.hslide__in{max-width:min(860px,100%);padding-block:clamp(3rem,7vw,4.5rem)}
.hslide h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:.92;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--white)}
.hslide h1 em{display:block;font-style:normal;color:var(--brand)}
.hero__dots{position:absolute;left:0;right:0;bottom:1.5rem;z-index:3;
  display:flex;gap:.5rem;justify-content:center}
.hero__dots button{width:38px;height:4px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .25s ease}
.hero__dots button:hover{background:rgba(255,255,255,.6)}
.hero__dots button[aria-selected="true"]{background:var(--brand)}

/* ================= PRODUCT GRID ================= */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.pcard:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 12px 30px rgba(7,20,38,.09)}
.pcard__img{aspect-ratio:4/3;overflow:hidden;background-color:var(--white);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:saturate(1.05) contrast(1.03);border-bottom:1px solid var(--line)}
.pcard__body{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pcard__cat{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-700);margin-bottom:.5rem}
.pcard h3{font-size:1.2rem;text-transform:uppercase;letter-spacing:.01em}
.pcard p{font-size:.9rem;color:var(--muted);margin-top:.45rem;flex:1}
.pcard__foot{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-family:var(--display);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:var(--ink)}
.pcard__foot svg{width:15px;height:15px;transition:transform .25s ease}
.pcard:hover .pcard__foot{color:var(--brand-700)}
.pcard:hover .pcard__foot svg{transform:translateX(4px)}

/* ================= PRODUCT DETAIL ================= */
.pdetail{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pdetail__img{aspect-ratio:4/3;background-color:var(--white);border:1px solid var(--line);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:saturate(1.05) contrast(1.03)}
.pdetail h1{font-size:clamp(2rem,4vw,3.1rem);text-transform:uppercase}
.spec{width:100%;border-collapse:collapse;margin-top:1.9rem}
.spec th,.spec td{text-align:left;padding:.82rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;vertical-align:top}
.spec th{font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:.8rem;color:#33465A;width:40%;padding-right:1rem}
.spec td{color:#22303F}
.pdetail__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.pnote{margin-top:1.6rem;padding:1rem 1.15rem;background:var(--paper);border-left:3px solid var(--brand);
  font-size:.92rem;color:var(--muted)}

/* ============ CATEGORY SHOWCASE (full-image cards) ============ */
.cshow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:2.4rem}
.cshow a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  background-color:var(--navy);color:var(--white)}
.cshow__img{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.03);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cshow a:hover .cshow__img{transform:scale(1.06)}
.cshow__veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,20,38,.93) 0%,rgba(7,20,38,.5) 42%,rgba(7,20,38,.08) 100%)}
.cshow__body{position:absolute;inset:auto 0 0 0;padding:1.2rem 1.1rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.cshow h3{font-size:1.14rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.cshow__arrow{width:34px;height:34px;flex:none;background:var(--brand);color:var(--ink);
  display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.cshow__arrow svg{width:15px;height:15px}
.cshow a:hover .cshow__arrow,.cshow a:focus-visible .cshow__arrow{opacity:1;transform:none}
.cshow a[aria-current="page"] .cshow__veil{
  background:linear-gradient(to top,rgba(10,139,255,.9) 0%,rgba(7,20,38,.55) 50%,rgba(7,20,38,.15) 100%)}
.cshow a[aria-current="page"] .cshow__arrow{opacity:1;transform:none}

/* ============ GENERAL TRUST BAR ============ */
.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:2.2rem}
.trustbar div{background:var(--white);padding:1.5rem 1.35rem}
.trustbar b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;
  line-height:1.05;color:var(--brand-700);margin-bottom:.5rem}
.trustbar p{font-size:.91rem;color:var(--muted)}

/* ============ FORM STATES ============ */
.field--error input,.field--error select,.field--error textarea{border-color:var(--accent)}
.field--error input:focus,.field--error select:focus,.field--error textarea:focus{outline-color:var(--accent)}
.field__err{display:none;font-size:.84rem;color:var(--accent);margin-top:.1rem}
.field--error .field__err{display:block}
.form__status{margin-top:1.1rem;font-size:.92rem;color:var(--muted);min-height:1.2em}
.form__status[data-state="error"]{color:var(--accent)}
.form__status[data-state="ok"]{color:#0E7A3C;font-weight:600}
.btn[disabled]{opacity:.65;cursor:progress}
.btn .spinner{display:none;width:15px;height:15px;border:2px solid rgba(7,20,38,.25);
  border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}
.btn.is-loading .arw{display:none}
.btn.is-loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ THANK YOU ============ */
.ty{max-width:660px}
.tymark{width:66px;height:66px;background:var(--brand);color:var(--ink);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);margin-bottom:1.7rem}
.tymark svg{width:30px;height:30px}
.tysteps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.8rem}
.tysteps li{display:flex;gap:.85rem;font-size:.98rem;color:#22303F}
.tysteps svg{width:18px;height:18px;color:var(--brand-700);flex:none;margin-top:.3rem}

@media (max-width:1024px){
  .pgrid,.pgrid--3{grid-template-columns:repeat(2,1fr)}
  .pdetail{grid-template-columns:1fr}
  .cshow{grid-template-columns:repeat(3,1fr)}
  .trustbar{grid-template-columns:repeat(2,1fr)}
  .hero__slides{min-height:clamp(500px,60vh,640px)}
}
@media (max-width:560px){
  .pgrid,.pgrid--3{grid-template-columns:1fr}
  .cshow{grid-template-columns:repeat(2,1fr);gap:10px}
  .cshow a{aspect-ratio:4/5}
  .trustbar{grid-template-columns:1fr}
  .hero__slides{min-height:520px}
}
/* ============ PRODUCT GALLERY ============ */
.gal{position:relative}
.gal__stage{position:relative;aspect-ratio:4/3;background:var(--white);border:1px solid var(--line);
  overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.gal__slide{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
  background-position:center;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.gal__slide.is-active{opacity:1;visibility:visible}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
  border:0;cursor:pointer;background:rgba(7,20,38,.72);color:var(--white);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);transition:background .2s ease}
.gal__nav:hover{background:var(--brand);color:var(--ink)}
.gal__nav svg{width:18px;height:18px}
.gal__nav--prev{left:10px}
.gal__nav--next{right:10px}
.gal__count{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(7,20,38,.72);
  color:var(--white);font-family:var(--display);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem .6rem}
.gal__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.gal__thumb{aspect-ratio:1;background:var(--white);border:1px solid var(--line);cursor:pointer;
  background-size:contain;background-repeat:no-repeat;background-position:center;padding:0;
  transition:border-color .2s ease}
.gal__thumb:hover{border-color:var(--brand-700)}
.gal__thumb[aria-selected="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

/* ============ LIGHTBOX ============ */
.lbox{position:fixed;inset:0;z-index:200;background:rgba(7,20,38,.97);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  padding:clamp(1rem,4vw,3rem)}
.lbox[data-open="true"]{display:flex}
/* The width is driven by the height the viewport can actually give, times the
   asset aspect (561x463), so the image fills the screen with no letterbox bars
   and never overflows. object-fit:contain is the guard for any other aspect.
   Capped at 1150px: every product photo is 561px wide, so a larger box only
   magnifies the source rather than revealing more detail. */
.lbox__img{width:min(94vw, calc((100vh - 9rem) * 561 / 463), 1150px);
  height:auto;max-height:calc(100vh - 9rem);object-fit:contain;
  background:var(--white);border:1px solid rgba(255,255,255,.12)}
.lbox__close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:var(--white);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);transition:background .2s ease}
.lbox__close:hover{background:var(--brand);color:var(--ink)}
.lbox__close svg{width:20px;height:20px}
/* Solid brand fill, not a translucent white chip: on a phone the enlarged image
   is 358px of a 390px viewport, so the arrows necessarily sit over the white
   photo. A 12% white chip disappears there. Brand blue reads against both the
   white image and the navy backdrop at every width. */
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;
  cursor:pointer;background:var(--brand-700);color:var(--white);display:grid;place-items:center;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);transition:background .2s ease}
.lbox__nav:hover{background:var(--brand);color:var(--white)}
.lbox__nav svg{width:22px;height:22px}
.lbox__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lbox__nav--next{right:clamp(.5rem,2vw,2rem)}
.lbox__cap{text-align:center;margin:0;
  color:rgba(255,255,255,.75);font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;
  font-size:.82rem}
@media (max-width:560px){
  .lbox__nav{width:40px;height:40px}
  /* phones: fit the width, keep the natural aspect, never upscale past the asset */
  .lbox__img{width:min(94vw,561px);max-height:calc(100vh - 8rem)}
  .gal__nav{width:36px;height:36px}
}

/* ---- Get Quote, above the product title on the detail page ----
   One row above the title: category label hard left, button hard right. The row
   wraps to two lines on narrow screens, where a long category name plus the
   button cannot sit side by side. */
.pdetail__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pdetail__head .eyebrow{margin-bottom:0}
.pdetail__quote{display:inline-flex;flex:none;margin:0}
@media (max-width:560px){
  /* stacked: keep the button on the left edge with everything else */
  .pdetail__head{gap:.9rem}
}

/* ---- sparse product grids (1-2 items) keep a sensible card width ---- */
.pgrid--few{grid-template-columns:repeat(2,1fr);max-width:760px}
@media (max-width:560px){ .pgrid--few{grid-template-columns:1fr} }

/* ---- shared customisation line on every product detail page ---- */
.customline{margin-top:1rem;padding:1rem 1.15rem;background:var(--paper);
  border-left:3px solid var(--brand-700);font-size:.95rem;line-height:1.85;color:#22303F}

/* ---- product-type listing page (type.html) --------------------------------
   No dark hero band: a bold title, centred breadcrumbs, then the grid. ----- */
.ptop{padding-block:clamp(2.4rem,5vw,3.6rem) 0;text-align:center}
.ptop h1{font-size:clamp(2.1rem,4.8vw,3.4rem);text-transform:uppercase;font-weight:800}
/* .crumb is a <p>, so it would otherwise pick up the 58ch cap below */
.ptop .crumb{color:var(--brand-700);justify-content:center;flex-wrap:wrap;
  max-width:none;margin:1rem auto 0;row-gap:.25rem}
.ptop .crumb a{color:#5A6B7D}
.ptop .crumb a:hover{color:var(--ink)}
.ptop p{color:#5A6B7D;max-width:58ch;margin:1rem auto 0}
.ptype__count{display:block;font-size:.8rem;color:#6B7A8A;margin-top:.45rem;
  font-family:var(--display);letter-spacing:.14em;text-transform:uppercase}