/* 888 Trading home page (v2.1): home-only sections. Shared parts (base, type, buttons, header, menus, verify us, footer,
   modals, motion) are in site.css; every value comes from tokens.css.
   Sections in page order: hero · about · lines · story · products carousel · clients · electrical · contact · phone modal · electrical view */

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:var(--c-charcoal);color:var(--c-white)}
@media (min-width:1800px){.hero{max-height:none}}   /* v2.3.1: on a 2560 x 1440 screen or a TV the hero fills the screen */
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 1.1s}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 8s linear}
.hero-slide.is-active .hero-img{transform:scale(1)}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,16,15,.72) 0%,rgba(17,16,15,.32) 55%,rgba(17,16,15,.26) 100%)}
.hero-copy{position:absolute;z-index:1;left:0;right:0;bottom:clamp(96px,14vh,150px);max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.hero-copy > *{max-width:720px}
.hero .eyebrow{color:var(--c-white);opacity:.9}
.hero-text{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:600px;opacity:.95}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-ctrl{position:absolute;z-index:2;right:var(--gutter);bottom:var(--s-6);display:flex;align-items:center;gap:var(--s-4)}
@media (min-width:1400px){.hero-ctrl{right:calc((100vw - var(--container)) / 2 + var(--gutter))}}
.hero-dots{display:flex;gap:2px}
.hero-dot{width:44px;height:44px;position:relative}
.hero-dot::before{content:"";position:absolute;left:8px;right:8px;top:21px;height:2px;background:rgba(255,255,255,.4);transition:background var(--t-fast)}
.hero-dot[aria-current="true"]::before{background:var(--c-white)}
.hero-pause{width:44px;height:44px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.hero-pause:hover{border-color:var(--c-white)}
.i-pause{width:10px;height:12px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.hero-pause.is-paused .i-pause{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.hero-down{position:absolute;z-index:2;left:50%;bottom:var(--s-5);width:44px;height:44px;margin-left:-22px;display:none}
.hero-down span{position:absolute;left:50%;top:8px;width:1px;height:28px;background:rgba(255,255,255,.7);overflow:hidden}
.hero-down span::after{content:"";position:absolute;left:0;top:-28px;width:1px;height:28px;background:var(--c-white);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{to{top:28px}}
@media (min-width:768px){.hero-down{display:block}}
@media (max-width:767px){.hero-copy{bottom:120px}.hero-ctrl{left:var(--gutter);right:auto}.hero-cta .btn{flex:1 1 auto;padding-left:18px;padding-right:18px}}   /* v2.3.1: 18px sides keep "What we do" and "Request a quote" on one row from 375px */

/* ---------- About ---------- */
#about .lead{margin-bottom:var(--s-5)}
#about p:not(.lead):not(.eyebrow){color:var(--c-ink-soft);text-align:left;max-width:36em;margin-left:auto;margin-right:auto}   /* body copy left-aligned (v2.3.0) */

/* ---------- What we do (v2.3.0): one company, two product groups. Each group = a head (number, group name, text, links) + its lines.
   Desktop: head left (4/12, sticky), lines right (8/12, 2 columns). Tablet: head on top, lines 2 columns. Mobile: one column. ---------- */
.units{display:grid;gap:var(--s-9)}
.unit{display:grid;gap:var(--s-7);padding-top:var(--s-7);border-top:1px solid var(--c-line)}
@media (min-width:1024px){.unit{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8)}}
.unit-head{min-width:0;max-width:560px}
@media (min-width:1024px){.unit-head{position:sticky;top:calc(var(--header-h) + var(--s-6));align-self:start}}
.unit-no{display:flex;align-items:center;gap:14px;margin:0 0 var(--s-4);font:400 var(--fs-small)/1 var(--f-display);letter-spacing:.2em;color:var(--c-gold-deep)}
.unit-no::after{content:"";flex:none;width:40px;height:1px;background:var(--c-gold)}
.unit-name{font-size:clamp(24px,2.3vw,28px);line-height:1.3;margin-bottom:var(--s-5)}
:lang(th) .unit-name{line-height:1.45}
.unit-text{color:var(--c-ink-soft);max-width:38em}
.unit-acts{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-6)}
.unit-acts .more{margin-top:var(--s-4)}
.unit-lines{display:grid;gap:var(--s-7) var(--s-6);min-width:0}
@media (min-width:768px){.unit-lines{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.line{display:flex;flex-direction:column;min-width:0}
.line-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--c-line-soft)}
.line-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.line:hover .line-media img{transform:scale(1.03)}
.line-body{padding-top:var(--s-5);max-width:560px}
.line h4{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:300;margin-bottom:var(--s-3)}
.line p{color:var(--c-ink-soft)}

/* ---------- Story ---------- */
.split{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9)}}
.split-media{aspect-ratio:4/5;overflow:hidden;background:var(--c-line-soft)}
.split-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.split-media{aspect-ratio:3/2}}
.split-body p:not(.eyebrow){color:var(--c-ink-soft)}
.stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--s-7);border-top:1px solid var(--c-line)}
.stats > div{padding:var(--s-5) 0;border-bottom:1px solid var(--c-line)}
.stats > div:nth-child(odd){padding-right:var(--s-4);border-right:1px solid var(--c-line)}
.stats > div:nth-child(even){padding-left:var(--s-5)}
.stats dt{font:300 clamp(34px,4vw,46px)/1 var(--f-display);color:var(--c-ink)}
.stats dt span{color:var(--c-gold)}
.stats dd{margin-top:var(--s-2);font:400 var(--fs-small)/1.5 var(--f-display);letter-spacing:.06em;color:var(--c-ink-soft)}
:lang(en) .stats dd{text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.values{display:grid;gap:var(--s-6);margin-top:var(--s-9)}
@media (min-width:768px){.values{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.values > div{padding:0 var(--s-6);border-left:1px solid var(--c-line)}.values > div:first-child{border-left:0;padding-left:0}}
.values h3{font-size:var(--fs-h4);line-height:var(--lh-h4);margin-bottom:var(--s-3)}
.values p{color:var(--c-ink-soft);font-size:var(--fs-small);line-height:1.8}

/* ---------- Products carousel ---------- */

/* ---------- Clients ---------- */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line-soft);border-left:1px solid var(--c-line-soft)}
@media (min-width:768px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.logos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.logos li{min-width:0;min-height:0;height:clamp(72px,20vw,96px);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3.2vw,22px) clamp(14px,3.8vw,28px);border-right:1px solid var(--c-line-soft);border-bottom:1px solid var(--c-line-soft)}
.logos img{min-width:0;max-width:100%;max-height:clamp(38px,10.5vw,54px);width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.72;transition:filter var(--t) var(--ease),opacity var(--t) var(--ease)}
.logos li:hover img{filter:none;opacity:1}

/* ---------- Product group 02 band (electrical, IT & government vehicles) ---------- */
#electrical-intro{padding-top:0}
.dark-media{height:clamp(220px,32vw,460px);overflow:hidden;margin-bottom:var(--section-y)}
.dark-media img{width:100%;height:100%;object-fit:cover;opacity:.9}
#electrical-intro .fam{justify-content:center;font:400 var(--fs-eyebrow)/1.9 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-on-dark-soft);margin:0 auto var(--s-6);max-width:680px}
:lang(th) #electrical-intro .fam{text-transform:none;letter-spacing:.02em;font-size:15px}
#electrical-intro .lead{margin-bottom:var(--s-6)}

/* ---------- Contact ---------- */
.contacts{display:grid;border-top:1px solid var(--c-line)}
@media (min-width:768px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.contacts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.contact{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;width:100%;padding:var(--s-6) var(--s-5) var(--s-6) 0;border-bottom:1px solid var(--c-line);text-decoration:none;transition:background var(--t-fast)}
@media (min-width:768px){.contact{padding-left:var(--s-5)}.contact:nth-child(odd){padding-left:0}}
@media (min-width:1200px){.contact{border-left:1px solid var(--c-line);padding-left:var(--s-5)!important}.contact:first-child{border-left:0;padding-left:0!important}}
a.contact:hover .contact-v,button.contact:hover .contact-v{color:var(--c-gold-deep)}
.contact-k{display:block;font:400 var(--fs-eyebrow)/1.6 var(--f-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-gold-deep);margin-bottom:var(--s-3)}
:lang(th) .contact-k{letter-spacing:.04em;font-size:14px}
.contact-v{display:block;font-size:var(--fs-lead);line-height:1.5;color:var(--c-ink);transition:color var(--t-fast);overflow-wrap:anywhere}
.cta-row{margin-top:var(--s-7)}

/* ---------- Verify us (component in site.css) ---------- */
#contact .verify{margin-top:var(--s-9)}

/* ---------- Phone modal ---------- */
.phone-big{font:300 34px/1.2 var(--f-display);letter-spacing:.04em;margin:var(--s-4) 0 var(--s-6)}
.modal-sm .btn{margin-top:var(--s-2)}

/* ---------- Product group 02 page (/electrical/), full screen ---------- */
#electricalView{position:fixed;inset:0;z-index:90;background:var(--c-charcoal)}
#electricalView[hidden]{display:none}
#electricalView iframe{display:block;width:100%;height:100%;border:0;background:var(--c-charcoal)}
html.elec-open,html.elec-open body{overflow:hidden}

/* reduced motion: the hero photo does not zoom */
@media (prefers-reduced-motion:reduce){.hero-img{transform:none!important}}

/* ---------- v2.1.0 crafted art: hero/band/story art direction, production index ---------- */
picture{display:contents}
@media (max-width:767px) and (orientation:portrait){.hero-img{bottom:auto;height:66%;object-position:50% 0;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}}
@media (max-width:767px){.hero-text{display:none}.dark-media img{object-position:50% 58%}}
.split-art{background:var(--c-ivory)}
@media (max-width:1023px){.split-media.split-art{aspect-ratio:4/5;max-width:560px;width:100%;margin-inline:auto}}
.makes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--c-line)}
/* v2.2.0: six categories = 2 columns (tablet, 3 rows) or 3 columns (desktop, 2 rows); hairlines follow the column.
   v2.3.0: rules target .makes > li only (the item lists inside are <ul class="items">) */
@media (min-width:768px){.makes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.makes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.makes > li{min-width:0;padding:var(--s-6) 0;border-bottom:1px solid var(--c-line)}
@media (min-width:768px) and (max-width:1199px){.makes > li{padding:var(--s-7) var(--s-6);border-left:1px solid var(--c-line)}.makes > li:nth-child(2n+1){padding-left:0;border-left:0}.makes > li:nth-child(2n){padding-right:0}}
@media (min-width:1200px){.makes > li{padding:var(--s-7) var(--s-6);border-left:1px solid var(--c-line)}.makes > li:nth-child(3n+1){padding-left:0;border-left:0}.makes > li:nth-child(3n){padding-right:0}}
.makes-no{margin:0 0 var(--s-3);font:400 14px/1 var(--f-display);letter-spacing:.2em;color:var(--c-gold-deep)}
.makes h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0 0 var(--s-4)}
.makes-items > li{font-size:15px;line-height:1.75;color:var(--c-ink-soft)}
:lang(th) .makes-items > li{line-height:1.85}
/* v2.4.0 product plates: each card = plate (4:3 engraved still life, ivory on ivory) > number > title > one sentence > item list.
   From 768px the five parts of every card share row tracks with the other cards in its row (subgrid), so plates, titles,
   sentences and lists line up across the row whatever the text length. */
.makes-fig{margin:0 0 var(--s-5);aspect-ratio:4 / 3;overflow:hidden}
.makes > li{scroll-margin-top:var(--s-5)}   /* menu links to a card (#make-01 ... #make-06) land with room under the header, also before the reveal lifts it 24px */
.makes-fig img{display:block;width:100%;height:100%;object-fit:contain}
.makes-text{margin:0 0 var(--s-4);max-width:34em;color:var(--c-ink-soft);text-wrap:pretty}
:lang(th) .makes-text{line-height:1.8}
.makes h3{text-wrap:balance}
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){.makes > li{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}.makes > li > *{min-width:0;align-self:start}}
}
/* call to action, then the cross-link to product group 02 under a hairline */
.makes-cta{margin:var(--s-8) auto 0;max-width:var(--measure);display:flex;flex-direction:column;align-items:center;gap:var(--s-7)}
.makes-x{margin:0;width:100%;padding-top:var(--s-6);border-top:1px solid var(--c-line);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);color:var(--c-ink-soft);font-size:15px;line-height:1.75}
.makes-x .more{margin-top:0}

/* v2.1.1: phone dialog lists both company numbers */
.phone-list{list-style:none;margin:var(--s-5) 0 var(--s-4);padding:0;display:grid;gap:var(--s-3)}
.phone-list .btn{font-variant-numeric:tabular-nums}

/* ---------- v2.1.1 hero: art and type composed together (scrim only under the copy, gold eyebrow rule, tablet framing) ---------- */
.hero-slide::after{background:linear-gradient(90deg,rgba(17,16,15,.62) 0%,rgba(17,16,15,.34) 34%,rgba(17,16,15,0) 58%),linear-gradient(0deg,rgba(17,16,15,.5) 0%,rgba(17,16,15,0) 30%)}
@media (max-width:767px){.hero-slide::after{background:linear-gradient(0deg,rgba(17,16,15,.55) 0%,rgba(17,16,15,0) 50%)}}
.hero .eyebrow{color:var(--c-gold);opacity:1;display:flex;align-items:center;gap:14px}
.hero .eyebrow::before{content:"";flex:none;width:40px;height:1px;background:currentColor}
@media (min-width:768px) and (max-width:1199px){.hero-img{object-position:70% 50%}}
@media (min-width:768px) and (max-width:1199px) and (orientation:portrait){.hero-img{bottom:auto;height:64%;object-position:50% 0;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}.hero-slide::after{background:linear-gradient(0deg,rgba(17,16,15,.55) 0%,rgba(17,16,15,0) 50%)}}

/* v2.1.3: the client logo grid uses fixed cell heights and pixel logo limits. iOS Safari could not resolve
   img max-height:100% inside an aspect-ratio cell, so each logo stretched its own cell and the rows overlapped. */
@media (min-width:768px){.logos li{height:clamp(108px,14.5vw,128px)}.logos img{max-height:66px}}
@media (min-width:1200px){.logos li{height:128px}.logos img{max-height:80px}}

/* v2.3.1 large desktop and TV (>= 1800px): fixed sizes of the production index grow with the type scale */
@media (min-width:1800px){.makes-items > li,.makes-x{font-size:16px}.makes-no{font-size:15px}}
@media (min-width:2400px){.makes-items > li,.makes-x{font-size:17px}}

/* v2.3.1 tall phones (iPhone 12-17 and larger): the hero art moves down into the space above the copy, so the artwork sits
   centred between the header and the headline instead of leaving an empty band; 667px-tall phones are unchanged.
   Without svh support the declaration is ignored and the art stays at the top. */
@media (max-width:767px) and (orientation:portrait){.hero-img{top:clamp(0px,calc((100svh - 667px) * .72),200px);-webkit-mask-image:linear-gradient(transparent 0,#000 12%,#000 74%,transparent);mask-image:linear-gradient(transparent 0,#000 12%,#000 74%,transparent)}}

/* v2.3.1 phones held sideways (landscape, up to 500px tall): the hero uses the wide artwork (picture sources are portrait-only)
   and fits the screen, with the copy at the bottom left and the slide controls at the bottom right */
@media (orientation:landscape) and (max-height:500px){
  .hero{min-height:0}
  .hero-copy{bottom:var(--s-6)}
  .hero-copy > *{max-width:52%}
  .hero-copy > .hero-cta{max-width:none}
  .hero-text{display:none}
  .hero-title{margin-bottom:var(--s-4)}
  .hero-cta{margin-top:var(--s-4)}
  .hero-cta .btn{flex:0 0 auto}
  .hero-ctrl{left:auto;right:var(--gutter);bottom:var(--s-5)}
  .hero-down{display:none}
}