/* 2S Metal corporate site — shared interaction & motion layer.
 * Tokens, type and base reset all come from the design system's styles.css.
 * This file only adds hover/press affordances, scroll reveal, accordion motion
 * and the cool steel placeholder fills used where brand photography will land. */

html, body { font-size: 15px; }

:root {
  /* Cool steel placeholder fills — stay inside the brand's blue-gray family */
  --steel-coarse: repeating-linear-gradient(135deg, #c2cbd1 0 22px, #b6c0c6 22px 44px);
  --steel-fine:   repeating-linear-gradient(135deg, #cdd5da 0 12px, #c1cad0 12px 24px);
  --steel-photo:  linear-gradient(118deg, rgba(11,59,74,0.72) 0%, rgba(15,75,94,0.30) 46%, rgba(20,34,43,0.55) 100%), repeating-linear-gradient(135deg, #9aa9b2 0 26px, #8b9aa4 26px 52px);
  --steel-deep:   linear-gradient(140deg, rgba(11,59,74,0.55), rgba(20,34,43,0.20)), repeating-linear-gradient(135deg, #7f8e98 0 24px, #73828c 24px 48px);
}

/* ---- kenburns-bottom — hero image (very subtle, 1.00 → 1.03 over 25s) ---- */
@keyframes kenburns-bottom {
  0%   { transform: scale(1) translateY(0);      transform-origin: 50% 84%; }
  100% { transform: scale(1.03) translateY(4px); transform-origin: bottom;  }
}
.kenburns-bottom {
  animation: kenburns-bottom 25s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .kenburns-bottom { animation: none; }
}

/* ---- hero-line-up — About hero h1 line-by-line reveal ---- */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-line { display: inline-block; opacity: 0; transform: translateY(24px); }
.hero-h1.is-visible .hero-line { animation: heroReveal .8s ease forwards; }
.hero-line-2 { animation-delay: .15s; }
.hero-line-3 { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .hero-line { opacity: 1; transform: none; }
  .hero-h1.is-visible .hero-line { animation: none; }
}

/* ---- buttons: restrained hover/press, no bounce (per DS motion spec) ---- */
.dsbtn { transition: filter .16s ease-out, box-shadow .16s ease-out, transform .12s ease-out; }
.dsbtn:hover { filter: brightness(0.93); }
.dsbtn:active { transform: translateY(1px); filter: brightness(0.86); }
/* ghost / secondary buttons read a faint teal wash on hover */
.dsbtn-ghost:hover { background: var(--color-primary-tint) !important; filter: none; }

/* ---- interactive cards: subtle 6px lift (motion token: hover-lift) ---- */
.hovcard, .hover-lift { transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out; }
.hovcard:hover, .hover-lift:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(11,59,74,0.14); border-color: var(--color-hairline) !important; }

/* product list rows */
.prow { transition: background .16s ease-out, border-color .16s ease-out; }
.prow:hover { background: var(--color-surface-soft); border-color: var(--color-hairline) !important; }
.prow:hover .prow-go { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.prow:hover .prow-go svg { stroke: #fff; color: #fff; }

/* nav pill underline-style links handled by DS PillTabs; CTA gets the lift */

/* ---- FAQ accordion ---- */
.faq-item { border-bottom: 1px solid var(--color-hairline-soft); }
.faq-q { display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 0; background: none; border: none; text-align: left; cursor: pointer; }
.faq-body { overflow: hidden; max-height: 0; transition: max-height .3s ease-in-out, opacity .25s ease-in-out, padding .3s ease-in-out; opacity: 0; }
.faq-item.open .faq-body { max-height: 320px; opacity: 1; padding-bottom: 24px; }
.faq-sign { transition: transform .3s ease-in-out; }
.faq-item.open .faq-sign { transform: rotate(45deg); }

/* ---- newsletter input ---- */
.nl-input { height: 48px; flex: 1; min-width: 0; padding: 0 18px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); color: #fff; font: 400 15px/1 var(--font-sans); outline: none; transition: border-color .16s ease-out, background .16s ease-out; }
.nl-input::placeholder { color: rgba(255,255,255,0.55); }
.nl-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.10); }

/* footer links */
.foot-link { transition: color .14s ease-out; }
.foot-link:hover { color: #fff !important; text-decoration: none; }

/* ---- reveal: intentionally a no-op ----
 * Content is always visible. (Scroll/opacity entrance animations proved
 * unreliable in non-painting preview iframes, stranding content at opacity 0.)
 * The .reveal class is kept on markup only as a styling hook. */
/* ---- Scroll reveal (opt-in via .reveal) ----
 * Elements start hidden, fade + slide up when marked .is-visible by the
 * IntersectionObserver in index.html. Content is force-shown after
 * ~2s regardless (script guarantees .is-visible), so nothing is stranded
 * hidden if the observer fails to fire.
 */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger direct children of a .reveal-stagger container when it becomes visible */
.reveal-stagger.is-visible > * { animation: revealUp .55s cubic-bezier(.2,.7,.2,1) both; }
.reveal-stagger.is-visible > *:nth-child(1)  { animation-delay:   0ms; }
.reveal-stagger.is-visible > *:nth-child(2)  { animation-delay:  70ms; }
.reveal-stagger.is-visible > *:nth-child(3)  { animation-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4)  { animation-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5)  { animation-delay: 280ms; }
.reveal-stagger.is-visible > *:nth-child(6)  { animation-delay: 350ms; }
.reveal-stagger.is-visible > *:nth-child(7)  { animation-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8)  { animation-delay: 490ms; }
@keyframes revealUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Gentle image zoom on hover for cards with .card-media wrapping their img (motion token: hover-zoom, 1.03x) */
.card-media, .hover-zoom { overflow: hidden; }
.card-media img, .hover-zoom img { transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.hovcard:hover .card-media img,
.hover-lift:hover .hover-zoom img,
.card-media:hover img,
.hover-zoom:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .dsbtn, .hovcard, .faq-body, .faq-sign { transition: none !important; }
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-stagger.is-visible > * { animation: none !important; }
  .card-media img { transition: none !important; }
}

/* ---- hero heading: word-by-word blur fade-up entrance ---- */
@keyframes blurWordIn {
  from { filter: blur(10px); opacity: 0; transform: translateY(26px); }
  to   { filter: blur(0);    opacity: 1; transform: translateY(0); }
}
.blur-word {
  display: inline-block;
  animation: blurWordIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* ---- generic hero right-side fade-up ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-fade-up { opacity: 0; animation: heroFadeUp 0.8s cubic-bezier(0.22,0.61,0.36,1) both; }
/* ---- home hero background subtle Ken-Burns zoom ---- */
@keyframes heroBgZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
.home-hero-bg { transform-origin: center; animation: heroBgZoom 12s ease-out both; will-change: transform; }
.home-hero::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0.28) 50%,rgba(255,255,255,0) 70%,transparent 100%);transform:skewX(-18deg);pointer-events:none;animation:heroSweep 6s ease-in-out 1.2s infinite;z-index:1;mix-blend-mode:screen;}
@keyframes heroSweep{0%{left:-60%}55%{left:120%}100%{left:120%}}
.about-hero-title{background:linear-gradient(100deg,#fff 0%,#fff 42%,rgba(255,255,255,0.55) 50%,#fff 58%,#fff 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:aboutTitleShine 5s ease-in-out 0.6s infinite;}
@keyframes aboutTitleShine{0%{background-position:100% 0}55%{background-position:-20% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion: reduce){.about-hero-title{animation:none !important;color:#fff !important;-webkit-text-fill-color:#fff !important;}}
@media (prefers-reduced-motion: reduce) {
  .blur-word, .hero-fade-up, .home-hero-bg, .home-hero::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Responsive breakpoints ──────────────────────────────────────────────── */

/* Hero h1 — scale down gracefully, keep one line on desktop */
@media (max-width: 1200px) {
  .hero-h1 { font-size: clamp(32px, 5.4vw, 64px) !important; }
}
@media (max-width: 640px) {
  .hero-h1 { white-space: normal !important; }
}

/* Home hero right-block responsive */
@media (max-width: 900px) {
  .home-hero-inner { padding: 40px 28px 44px !important; gap: 20px !important; }
  .home-hero-right { max-width: 100% !important; align-self: stretch !important; }
  .home-hero-right p { font-size: 18px !important; }
  .home-hero-right p:first-child { font-size: 24px !important; }
}
@media (max-width: 640px) {
  .home-hero { min-height: 520px !important; }
  .home-hero-inner { padding: 32px 20px 36px !important; min-height: 520px !important; }
  .home-hero-bg { background-position: 60% center !important; }
  .home-hero-right p { font-size: 16px !important; line-height: 1.55 !important; }
  .home-hero-right p:first-child { font-size: 22px !important; }
  .home-hero-right .dsbtn { width: 100%; }
  .home-hero-right > div:last-child { justify-content: stretch !important; }
}

/* Reassurance bar — 4-col → 2-col → 1-col */
@media (max-width: 1000px) {
  .rbar-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .rbar-grid { grid-template-columns: 1fr !important; margin: 16px 0 0 !important; }
}

/* Product showcase — side-by-side → stacked */
@media (max-width: 960px) {
  .showcase-grid { grid-template-columns: 1fr !important; }
}

/* Stats trio — 3-col → 1-col */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid > *:nth-child(2) { transform: none !important; }
}

/* Why choose — 4-col → 2-col → 1-col */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr !important; }
}

/* Bento feature grid — 12-col → 2-col → 1-col */
@media (max-width: 1100px) {
  .bento-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; }
  .bento-cell { grid-column: auto !important; grid-row: auto !important; min-height: 220px; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr !important; }
}

/* Three steps — 2-col → 1-col */
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* Standards of excellence — 3-col → 1-col */
@media (max-width: 960px) {
  .standards-grid { grid-template-columns: 1fr !important; }
}

/* FAQ — 2-col → 1-col */
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* Footer columns — 4-col → 2-col → 1-col */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* Newsletter — side-by-side → stacked */
@media (max-width: 800px) {
  .newsletter-grid { grid-template-columns: 1fr !important; }
}

/* lucide icons inherit currentColor + sizing from inline style */
[data-lucide] { display: inline-block; vertical-align: middle; }
[data-lucide] svg, svg.lucide { display: block; }

/* ── Global responsive baseline ──────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }

/* Interactive controls: enforce 44px min hit-target on touch */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px; }
}

/* Container gutters — shrink on smaller screens (design system tokens are ~40px) */
@media (max-width: 1024px) { :root { --container-gutter: 28px; } }
@media (max-width: 768px)  { :root { --container-gutter: 20px; } }
@media (max-width: 480px)  { :root { --container-gutter: 16px; } }

/* Section padding — reduce top/bottom rhythm on mobile so pages don't feel empty */
@media (max-width: 768px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}
@media (max-width: 480px) {
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* Header: hide desktop nav + CTA, show burger on narrow screens */
@media (max-width: 1024px) {
  .site-header-nav { display: none !important; }
  .site-header-cta { display: none !important; }
  .site-header-burger { display: inline-flex !important; }
}

/* Big display headings — cap responsively */
@media (max-width: 900px) {
  .t-display, h1.t-display, h2.t-display {
    font-size: clamp(28px, 6vw, 44px) !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 480px) {
  .t-display, h1.t-display, h2.t-display { font-size: clamp(26px, 8vw, 36px) !important; }
}

/* Generic column-count-N grids from inline styles — flatten on tablet/mobile */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(5"],
  [style*="gridTemplateColumns: \"repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 0.92fr 1.08fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.15fr 1fr"],
  [style*="grid-template-columns: 1fr 1.25fr 1fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
}

/* Reassurance bar — reduce hero-overlap negative margin on mobile */
@media (max-width: 900px) {
  .rbar-grid { margin: 24px 0 0 !important; }
}

/* Hero container: reduce large fixed paddings that break on small screens */
@media (max-width: 768px) {
  [style*="80px var(--container-gutter) 0"] { padding: 40px var(--container-gutter) 0 !important; }
  [style*="padding: 40px 48px"] { padding: 28px 20px !important; }
  [style*="padding: \"40px 48px\""] { padding: 28px 20px !important; }
}

/* Tables — make wide product spec tables horizontally scrollable */
@media (max-width: 900px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: fixed; }
}

/* Product listing card grids — 4→2→1 */
@media (max-width: 1200px) {
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .products-grid { grid-template-columns: 1fr !important; }
}

/* Product-detail split (gallery + info) — stack on tablet */
@media (max-width: 900px) {
  .pdp-split { grid-template-columns: 1fr !important; }
}

/* Product-detail 3-column shell: sidebar | gallery | info
 * Tablet: gallery + info side-by-side, sidebar full-width below.
 * Mobile: single column — gallery, info, sidebar. */
@media (max-width: 1100px) {
  .pdp-shell { grid-template-columns: 1fr 340px !important; gap: 32px !important; }
  .pdp-shell > *:nth-child(1) { grid-column: 1 / -1 !important; order: 3; }
  .pdp-shell > *:nth-child(2) { order: 1; }
  .pdp-shell > *:nth-child(3) { order: 2; }
}
@media (max-width: 768px) {
  .pdp-shell { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* About — Leadership grid: 5 → 3 → 2 → 1 */
.leadership-grid { grid-template-columns: repeat(5, minmax(0, 190px)) !important; }
@media (max-width: 1100px) {
  .leadership-grid { grid-template-columns: repeat(3, minmax(0, 190px)) !important; }
}
@media (max-width: 700px) {
  .leadership-grid { grid-template-columns: repeat(2, minmax(0, 190px)) !important; column-gap: 16px !important; }
}
@media (max-width: 420px) {
  .leadership-grid { grid-template-columns: minmax(0, 190px) !important; }
}
/* Cards must shrink with the grid on narrower screens */
@media (max-width: 700px) {
  .exec-card { width: 100% !important; max-width: 190px; }
}

/* Sidebar-nav-driven category layouts — stack sidebar above content */
@media (max-width: 900px) {
  .cat-shell { grid-template-columns: 1fr !important; }
  .cat-sidebar { position: static !important; width: 100% !important; }
}

/* Newsletter grid already stacks; also reduce Big footer type on mobile */
@media (max-width: 768px) {
  .footer-grid > div { max-width: 100% !important; }
}

/* Buttons and inputs full-width on very narrow screens */
@media (max-width: 480px) {
  .nl-input { width: 100%; }
  form[style*="display: flex"] { flex-wrap: wrap; }
}

/* Prevent overflow from fixed pixel widths */
@media (max-width: 768px) {
  [style*="max-width: 900px"],
  [style*="max-width: 760px"],
  [style*="max-width: 640px"] { max-width: 100% !important; }
}


/* ── Corporate Structure Chart ─────────────────────────────────────────── */
.cs-chart{position:relative;padding:24px 0 8px}
.cs-node{background:var(--color-surface-cool,#f4f6fa);border:1px solid var(--color-hairline-soft,#e5e9f0);border-radius:var(--radius-xl,16px);padding:24px 28px;text-align:center}
.cs-node .cs-name{font:700 16px/1.4 var(--font-thai);color:var(--color-ink-deep);margin-top:8px}
.cs-node .cs-cap{font:400 15px/1.55 var(--font-thai);color:var(--color-slate);margin-top:6px}
.cs-top .cs-name{font-size:20px}
.cs-top .cs-cap{font-size:15px}
.cs-logo{display:block;margin:0 auto;height:110px;width:auto;max-width:80%;object-fit:contain}
.cs-sub-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.cs-sub-card .cs-logo{height:120px;max-width:85%;margin:0 auto 4px;object-position:center}
.cs-sub-2 .cs-sub-card .cs-logo{transform:translateX(-28px)}

.cs-top{max-width:420px;margin:0 auto}
.cs-top .cs-logo{height:130px}

.cs-vline{width:2px;background:var(--color-ink-deep,#0d2a5c);margin:0 auto;transform-origin:top center;transform:scaleY(0);transition:transform .55s ease}
.cs-vline-1{height:36px}
.cs-vline-2{height:44px}
.is-in .cs-vline-1{transform:scaleY(1);transition-delay:.55s}
.is-in .cs-vline-2{transform:scaleY(1);transition-delay:1.5s}

.cs-holding{max-width:640px;margin:0 auto;background:linear-gradient(135deg,#1a3a8a 0%,#0d2a5c 100%);border:none;color:#fff;padding:20px 32px;box-shadow:0 8px 24px rgba(13,42,92,.18)}
.cs-holding-title{font:700 18px/1.35 var(--font-thai);color:#fff;letter-spacing:.01em}
.cs-holding-sub{font:400 14px/1.5 var(--font-thai);color:rgba(255,255,255,.85);margin-top:6px}

.cs-bus{position:relative;height:2px;max-width:calc(100% - 40px);margin:0 auto}
.cs-bus-line{position:absolute;top:0;height:2px;background:var(--color-ink-deep,#0d2a5c);width:0;transition:width .5s ease}
.cs-bus-left{right:50%;transform-origin:right center}
.cs-bus-right{left:50%;transform-origin:left center}
.is-in .cs-bus-line{width:50%;transition-delay:1.05s}

.cs-drops{display:grid;grid-template-columns:repeat(3,1fr);max-width:calc(100% - 40px);margin:0 auto}
.cs-drop{width:2px;height:36px;background:var(--color-ink-deep,#0d2a5c);justify-self:center;transform-origin:top center;transform:scaleY(0);transition:transform .45s ease}
.is-in .cs-drop-0{transform:scaleY(1);transition-delay:1.5s}
.is-in .cs-drop-1{transform:scaleY(1);transition-delay:1.55s}
.is-in .cs-drop-2{transform:scaleY(1);transition-delay:1.6s}

.cs-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:0}
.cs-sub-col{display:flex;flex-direction:column;gap:16px}
.cs-sub-card{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.is-in .cs-sub-0 .cs-sub-card{opacity:1;transform:none;transition-delay:1.9s}
.is-in .cs-sub-1 .cs-sub-card{opacity:1;transform:none;transition-delay:2.1s}
.is-in .cs-sub-2 .cs-sub-card{opacity:1;transform:none;transition-delay:2.3s}
.cs-pct{font:700 20px/1.2 var(--font-thai);color:var(--color-ink-deep);margin-top:10px}
.cs-desc{font:400 14px/1.55 var(--font-thai);color:var(--color-slate);text-align:center;padding:0 8px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.is-in .cs-sub-0 .cs-desc{opacity:1;transform:none;transition-delay:2.15s}
.is-in .cs-sub-1 .cs-desc{opacity:1;transform:none;transition-delay:2.35s}
.is-in .cs-sub-2 .cs-desc{opacity:1;transform:none;transition-delay:2.55s}

/* Parent + Holding entry */
.cs-top,.cs-holding{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.is-in .cs-top{opacity:1;transform:none}
.is-in .cs-holding{opacity:1;transform:none;transition-delay:.95s}

@media (max-width:900px){
  .cs-subs{grid-template-columns:1fr;gap:36px}
  .cs-drops{display:none}
  .cs-bus{display:none}
  .cs-vline-2{height:28px}
  .cs-sub-col{position:relative}
  .cs-sub-col+.cs-sub-col::before{content:"";position:absolute;top:-24px;left:50%;width:2px;height:16px;background:var(--color-ink-deep,#0d2a5c);transform:translateX(-50%)}
  .cs-logo{height:88px}
  .cs-top .cs-logo{height:104px}
}
@media (prefers-reduced-motion:reduce){
  .cs-vline,.cs-bus-line,.cs-drop,.cs-sub-card,.cs-desc,.cs-top,.cs-holding{transition:none!important;opacity:1!important;transform:none!important}
  .cs-vline,.cs-drop{transform:scaleY(1)!important}
  .cs-bus-line{width:50%!important}
}


/* ── Cover Flow Carousel ───────────────────────────────────────────────── */
.cf-wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 12px}
.cf-stage{position:relative;height:520px;perspective:1600px;transform-style:preserve-3d;overflow:hidden;user-select:none;cursor:grab}
.cf-stage:active{cursor:grabbing}
.cf-slide{position:absolute;top:50%;left:50%;width:min(56%,640px);aspect-ratio:4/3;transform-origin:center center;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s ease;border-radius:var(--radius-xxl,20px);overflow:hidden;box-shadow:0 24px 60px rgba(11,59,74,0.28);background:#000;will-change:transform}
.cf-slide.is-active{box-shadow:0 32px 80px rgba(11,59,74,0.35),0 0 0 4px rgba(255,255,255,0.9) inset}
.cf-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;border-radius:inherit}
.cf-slide:not(.is-active){cursor:pointer;filter:brightness(.75) saturate(.9)}
.cf-slide:not(.is-active):hover{filter:brightness(.9)}

.cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--color-hairline-soft,#e5e9f0);box-shadow:0 8px 20px rgba(11,59,74,0.15);display:grid;place-items:center;cursor:pointer;color:var(--color-ink-deep,#0b3b4a);transition:transform .2s ease,box-shadow .2s ease}
.cf-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.06);box-shadow:0 12px 26px rgba(11,59,74,0.22)}
.cf-nav:disabled{opacity:.35;cursor:not-allowed}
.cf-prev{left:8px}
.cf-next{right:8px}

.cf-dots{display:flex;justify-content:center;gap:10px;margin-top:28px}
.cf-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(11,59,74,0.22);padding:0;cursor:pointer;transition:transform .2s ease,background .2s ease}
.cf-dot:hover{background:rgba(11,59,74,0.4)}
.cf-dot.is-active{background:var(--color-primary,#0b3b4a);transform:scale(1.35)}

@media (max-width:1024px){
  .cf-stage{height:440px}
  .cf-slide{width:min(62%,540px)}
}
@media (max-width:768px){
  .cf-stage{height:360px}
  .cf-slide{width:min(72%,440px)}
  .cf-nav{width:44px;height:44px}
}
@media (max-width:480px){
  .cf-stage{height:280px}
  .cf-slide{width:min(80%,360px)}
  .cf-nav{width:40px;height:40px;box-shadow:0 6px 14px rgba(11,59,74,0.18)}
  .cf-prev{left:2px}
  .cf-next{right:2px}
}
@media (prefers-reduced-motion:reduce){
  .cf-slide{transition:opacity .3s ease}
}