/* =====================================================================
   FIBER OCEAN — Design System (Phase 2)
   Benchmark: Vertiv / Huawei Digital Power. Clean, corporate, restrained.
   Brand tokens verified against FIBER_OCEAN_logo.png (crimson #9C1824–#A81824).
   RTL-ready via logical properties. WCAG 2.1 AA targeted.
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --fo-crimson:        #A21C23;
  --fo-crimson-deep:   #8C2828;
  --fo-crimson-hover:  #7d1519;
  --fo-charcoal:       #4D4D4F;
  --fo-ink:            #15171C;   /* dark section bg / headings */
  --fo-ink-2:          #1e2129;
  --fo-white:          #ffffff;

  /* Neutrals */
  --fo-gray-50:  #f7f8fa;
  --fo-gray-100: #eef0f3;
  --fo-gray-200: #e2e5ea;
  --fo-gray-300: #cfd4dc;
  --fo-gray-500: #8b929e;
  --fo-gray-700: #565c66;

  /* Semantic */
  --fo-bg:            var(--fo-white);
  --fo-bg-alt:        var(--fo-gray-50);
  --fo-text:          #23262d;
  --fo-text-soft:     var(--fo-gray-700);
  --fo-heading:       var(--fo-ink);
  --fo-border:        var(--fo-gray-200);
  --fo-primary:       var(--fo-crimson);

  /* Type — Arial per brand standard; grotesque display fallback stack */
  --fo-font-body: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --fo-font-head: "Arial Black", Arial, "Helvetica Neue", sans-serif;

  /* Fluid type scale */
  --fo-fs-hero:   clamp(2.4rem, 1.4rem + 4.5vw, 4.5rem);
  --fo-fs-h1:     clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fo-fs-h2:     clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  --fo-fs-h3:     clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fo-fs-lead:   clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fo-fs-body:   1rem;
  --fo-fs-sm:     0.875rem;

  /* Spacing scale */
  --fo-s1: 0.25rem; --fo-s2: 0.5rem; --fo-s3: 0.75rem; --fo-s4: 1rem;
  --fo-s5: 1.5rem;  --fo-s6: 2rem;   --fo-s7: 3rem;    --fo-s8: 4rem;
  --fo-s9: 6rem;    --fo-s10: 8rem;

  --fo-maxw: 1200px;
  --fo-radius: 10px;
  --fo-radius-lg: 16px;
  --fo-shadow-sm: 0 1px 3px rgba(21,23,28,.08), 0 1px 2px rgba(21,23,28,.06);
  --fo-shadow-md: 0 6px 20px rgba(21,23,28,.10);
  --fo-shadow-lg: 0 18px 50px rgba(21,23,28,.16);
  --fo-header-h: 76px;
  --fo-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fo-font-body);
  font-size: var(--fo-fs-body);
  line-height: 1.65;
  color: var(--fo-text);
  background: var(--fo-bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--fo-font-head); color: var(--fo-heading); line-height: 1.12; margin: 0 0 var(--fo-s4); letter-spacing: -.01em; font-weight: 800; }
h1 { font-size: var(--fo-fs-h1); }
h2 { font-size: var(--fo-fs-h2); }
h3 { font-size: var(--fo-fs-h3); }
p  { margin: 0 0 var(--fo-s4); }
a  { color: var(--fo-crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
img,svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--fo-crimson); outline-offset: 2px; border-radius: 3px; }

/* ---------- 3. Layout ---------- */
.fo-container { width: 100%; max-width: var(--fo-maxw); margin-inline: auto; padding-inline: var(--fo-s5); }
.fo-section { padding-block: var(--fo-s9); }
.fo-section--tight { padding-block: var(--fo-s7); }
.fo-section--alt { background: var(--fo-bg-alt); }
.fo-section--dark { background: var(--fo-ink); color: #d7dbe2; }
.fo-section--dark h2, .fo-section--dark h3 { color: #fff; }
.fo-grid { display: grid; gap: var(--fo-s5); }
.fo-eyebrow { display:inline-block; font-family: var(--fo-font-body); font-weight: 700; font-size: var(--fo-fs-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--fo-crimson); margin-bottom: var(--fo-s3); }
.fo-section--dark .fo-eyebrow { color: #ff6b73; }
.fo-lead { font-size: var(--fo-fs-lead); color: var(--fo-text-soft); max-width: 60ch; }
.fo-section--dark .fo-lead { color: #aeb4c0; }
.fo-center { text-align: center; margin-inline: auto; }

/* ---------- 4. Buttons ---------- */
.fo-btn { display:inline-flex; align-items:center; gap:.55rem; font-family: var(--fo-font-body); font-weight:700; font-size:1rem; line-height:1; padding: .95rem 1.6rem; border-radius: 8px; border: 2px solid transparent; cursor:pointer; transition: transform .15s var(--fo-ease), background .2s, box-shadow .2s; text-decoration:none; }
.fo-btn:hover { text-decoration:none; transform: translateY(-2px); }
.fo-btn--primary { background: var(--fo-crimson); color:#fff; box-shadow: var(--fo-shadow-sm); }
.fo-btn--primary:hover { background: var(--fo-crimson-hover); box-shadow: var(--fo-shadow-md); }
.fo-btn--ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.fo-btn--ghost:hover { border-color:#fff; background: rgba(255,255,255,.08); }
.fo-btn--outline { background:#fff; color: var(--fo-ink); border-color: var(--fo-gray-300); }
.fo-btn--outline:hover { border-color: var(--fo-crimson); color: var(--fo-crimson); }
.fo-btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

/* ---------- 5. Header / nav ---------- */
.fo-header { position: sticky; top:0; z-index:100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--fo-border); height: var(--fo-header-h); }
.fo-header__inner { display:flex; align-items:center; gap: var(--fo-s5); height:100%; }
.fo-logo img { height: 38px; width:auto; }
.fo-nav { display:flex; align-items:center; gap: var(--fo-s5); margin-inline-start: auto; }
.fo-nav__list { display:flex; gap: var(--fo-s5); align-items:center; }
.fo-nav__link { color: var(--fo-ink); font-weight:600; font-size:.95rem; padding: .5rem 0; position:relative; }
.fo-nav__link:hover { color: var(--fo-crimson); text-decoration:none; }
.fo-nav__link[aria-haspopup]::after { content:"▾"; font-size:.7em; margin-inline-start:.3rem; color: var(--fo-gray-500); }
.fo-lang { font-weight:700; font-size:.85rem; color: var(--fo-charcoal); border:1px solid var(--fo-border); border-radius:6px; padding:.35rem .55rem; }
.fo-burger { display:none; background:none; border:0; font-size:1.6rem; color:var(--fo-ink); cursor:pointer; }

/* Mega menu */
.fo-mega { position:absolute; inset-inline:0; top: var(--fo-header-h); background:#fff; border-bottom:1px solid var(--fo-border); box-shadow: var(--fo-shadow-md); opacity:0; visibility:hidden; transform: translateY(-8px); transition: .18s var(--fo-ease); }
.fo-has-mega:hover .fo-mega, .fo-has-mega:focus-within .fo-mega { opacity:1; visibility:visible; transform:none; }
.fo-mega__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--fo-s5); padding-block: var(--fo-s6); }
.fo-mega__col h4 { font-family: var(--fo-font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fo-gray-500); margin-bottom: var(--fo-s3); }
.fo-mega__link { display:block; padding:.4rem 0; color: var(--fo-ink); font-weight:600; font-size:.95rem; }
.fo-mega__link:hover { color: var(--fo-crimson); text-decoration:none; }

/* ---------- 6. Hero ---------- */
.fo-hero { position:relative; color:#fff; background: linear-gradient(120deg, #15171C 0%, #2a1416 60%, #4a1418 100%); overflow:hidden; }
.fo-hero::after { content:""; position:absolute; inset:0; background:
  radial-gradient(1000px 500px at 85% -10%, rgba(162,28,35,.55), transparent 60%),
  radial-gradient(700px 400px at 10% 110%, rgba(162,28,35,.25), transparent 60%); pointer-events:none; }
/* Homepage hero photo (P4 — bright campus + energy-storage yard). Left scrim keeps the headline legible. */
.fo-hero--home::before { content:""; position:absolute; inset:0; z-index:0;
  background:url('../img/hero-home.jpg') center/cover no-repeat; }
.fo-hero--home::after { background:
  linear-gradient(90deg, rgba(10,11,14,.90) 0%, rgba(10,11,14,.60) 34%, rgba(10,11,14,.16) 66%, rgba(10,11,14,0) 100%); }
.fo-hero--home { min-height: 460px; display:flex; align-items:center; }
.fo-hero__inner { position:relative; z-index:1; padding-block: clamp(4rem, 3rem + 8vw, 8rem); max-width: 900px; }
.fo-hero h1 { color:#fff; font-size: var(--fo-fs-hero); margin-bottom: var(--fo-s5); }
.fo-hero p { color:#d9dde5; font-size: var(--fo-fs-lead); max-width: 62ch; margin-bottom: var(--fo-s6); }
.fo-hero__cta { display:flex; gap: var(--fo-s4); flex-wrap:wrap; }

/* ---------- 7. Stats ---------- */
.fo-stats { background: var(--fo-ink-2); }
.fo-stats__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--fo-s5); text-align:center; }
.fo-stat__num { font-family: var(--fo-font-head); font-weight:800; font-size: clamp(2rem,1.4rem+2.4vw,3.2rem); color:#fff; line-height:1; }
.fo-stat__num span { color: var(--fo-crimson); }
.fo-section--dark .fo-stat__num span { color:#ff6b73; }
.fo-stat__label { color:#9aa1ad; font-size:.9rem; margin-top:.4rem; letter-spacing:.02em; }

/* ---------- 8. Cards ---------- */
.fo-cards--2 { grid-template-columns: repeat(2,1fr); }
.fo-cards--3 { grid-template-columns: repeat(3,1fr); }
.fo-cards--4 { grid-template-columns: repeat(4,1fr); }
.fo-card { background:#fff; border:1px solid var(--fo-border); border-radius: var(--fo-radius); overflow:hidden; transition: transform .2s var(--fo-ease), box-shadow .2s, border-color .2s; display:flex; flex-direction:column; }
.fo-card:hover { transform: translateY(-4px); box-shadow: var(--fo-shadow-md); border-color: var(--fo-gray-300); }
.fo-card__media { aspect-ratio: 16/10; background: linear-gradient(135deg,#20242c,#3a1417); background-size:cover; background-position:center; position:relative; }
.fo-card__media--telecom-5g { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.06)), url('../img/sol-telecom-5g.jpg'); }
.fo-card__media--data-centers { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.06)), url('../img/sol-data-centers.jpg'); }
.fo-card__media--government-mega-projects { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.06)), url('../img/sol-government.jpg'); }
/* AquaCore series cards (real Data Center catalog renders). */
.fo-card__media--micro-dc { background-image: linear-gradient(135deg,rgba(162,28,35,.05),rgba(21,23,28,.05)), url('../img/ac-micro-dc.jpg'); }
.fo-card__media--containment-dc { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/ac-containment-dc.jpg'); }
.fo-card__media--prefab-container-dc { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/ac-prefab-container-dc.jpg'); }
.fo-card__media--ai-data-center { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/ac-ai-data-center.jpg'); }
.fo-card__body { padding: var(--fo-s5); display:flex; flex-direction:column; gap: var(--fo-s2); flex:1; }
.fo-card__body h3 { margin-bottom: var(--fo-s1); }
.fo-card__meta { font-size:.85rem; color: var(--fo-gray-500); }
.fo-card__link { margin-top:auto; font-weight:700; color: var(--fo-crimson); }
.fo-card__link::after { content:" →"; }

/* Flagship (larger) cards */
.fo-flagship { grid-template-columns: repeat(2,1fr); gap: var(--fo-s6); }
.fo-flag { position:relative; border-radius: var(--fo-radius-lg); overflow:hidden; min-height: 320px; color:#fff; display:flex; align-items:flex-end; padding: var(--fo-s7); background:#20242c; isolation:isolate; }
.fo-flag::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(160deg, rgba(21,23,28,.15), rgba(21,23,28,.85)); }
.fo-flag--aqua { background: linear-gradient(150deg,rgba(11,43,58,.68),rgba(18,63,82,.42) 42%,rgba(26,90,112,.34)), url('../img/flag-aquacore.jpg') center/cover no-repeat; }
.fo-flag--energy { background: linear-gradient(150deg,rgba(42,20,22,.68),rgba(90,26,31,.46) 55%,rgba(125,34,40,.36)), url('../img/flag-energyguard.jpg') center/cover no-repeat; }
.fo-flag h3 { color:#fff; font-size: var(--fo-fs-h2); }
.fo-flag__tag { position:absolute; top: var(--fo-s5); inset-inline-start: var(--fo-s7); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; color:#fff; opacity:.9; }
.fo-flag p { color:#e6e9ef; }

/* Product category tiles */
.fo-tile { position:relative; display:flex; flex-direction:column; gap: var(--fo-s3); padding: var(--fo-s5); background:#fff; border:1px solid var(--fo-border); border-radius: var(--fo-radius); overflow:hidden; transition: .2s var(--fo-ease); }
.fo-tile::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--fo-crimson); transform: scaleX(0); transform-origin:left; transition: transform .28s var(--fo-ease); }
.fo-tile::after { content:"\2192"; position:absolute; top: var(--fo-s5); right: var(--fo-s5); font-size:1.15rem; line-height:1; color: var(--fo-crimson); opacity:0; transform: translateX(-6px); transition: .2s var(--fo-ease); }
.fo-tile:hover { border-color: var(--fo-crimson); box-shadow: var(--fo-shadow-sm); transform: translateY(-3px); text-decoration:none; }
.fo-tile:hover::before { transform: scaleX(1); }
.fo-tile:hover::after { opacity:1; transform: translateX(0); }
.fo-tile__icon { width:46px; height:46px; border-radius:10px; background: rgba(162,28,35,.08); color: var(--fo-crimson); display:grid; place-items:center; transition: .2s var(--fo-ease); }
.fo-tile__icon svg { width:24px; height:24px; display:block; }
.fo-tile:hover .fo-tile__icon { background: var(--fo-crimson); color:#fff; }
.fo-tile h3 { font-size:1.05rem; margin:0; color: var(--fo-ink); padding-right:1.25rem; }
.fo-tile p { font-size:.9rem; color: var(--fo-text-soft); margin:0; }

/* ---------- 9. Capabilities / feature blocks ---------- */
.fo-feature { text-align:center; padding: var(--fo-s5); }
.fo-feature__icon { width:56px;height:56px;margin:0 auto var(--fo-s3); border-radius:14px; background:rgba(162,28,35,.1); color:var(--fo-crimson); display:grid;place-items:center;font-size:1.6rem; }
.fo-section--dark .fo-feature__icon { background: rgba(255,107,115,.14); color:#ff8a90; }
.fo-feature h3 { font-size:1.1rem; }

/* ---------- 10. Split / band ---------- */
.fo-split { display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--fo-s7); align-items:center; }
.fo-band-cta { background: linear-gradient(120deg, var(--fo-crimson-deep), var(--fo-crimson)); color:#fff; text-align:center; }
.fo-band-cta h2 { color:#fff; }
.fo-band-cta p { color: rgba(255,255,255,.9); }
.fo-media-frame { border-radius: var(--fo-radius-lg); overflow:hidden; box-shadow: var(--fo-shadow-lg); aspect-ratio: 4/3; background: linear-gradient(135deg,#20242c,#3a1417); background-size:cover; background-position:center; }
.fo-media-frame--spark { background-image: linear-gradient(135deg,rgba(21,23,28,.18),rgba(58,20,23,.20)), url('../img/spark.jpg'); }
.fo-media-frame--renewable { background-image: linear-gradient(135deg,rgba(21,23,28,.10),rgba(58,20,23,.12)), url('../img/renewable-aquacore.jpg'); }
.fo-media-frame--ai { background-image: linear-gradient(135deg,rgba(21,23,28,.12),rgba(58,20,23,.14)), url('../img/ac-ai-data-center.jpg'); }
.fo-media-frame--micro-detail { background-image: url('../img/ac-micro-dc-detail.jpg'); }
.fo-media-frame--containment-detail { background-image: url('../img/ac-containment-dc-detail.jpg'); }
.fo-media-frame--prefab-detail { background-image: url('../img/ac-prefab-container-dc-detail.jpg'); }
.fo-media-frame--prefab-g1 { background-image: url('../img/ac-prefab-container-dc-g1.jpg'); }
.fo-media-frame--prefab-g2 { background-image: url('../img/ac-prefab-container-dc-g2.jpg'); }
.fo-thumb--prefab-detail { background-image: url('../img/ac-prefab-container-dc-detail.jpg'); }
.fo-thumb--prefab-g1 { background-image: url('../img/ac-prefab-container-dc-g1.jpg'); }
.fo-thumb--prefab-g2 { background-image: url('../img/ac-prefab-container-dc-g2.jpg'); }

/* ---------- 11. Logo marquee ---------- */
.fo-marquee { overflow:hidden; }
.fo-marquee__track { display:flex; gap: var(--fo-s7); align-items:center; opacity:.7; flex-wrap:wrap; justify-content:center; }
.fo-marquee__item { font-weight:800; color: var(--fo-gray-500); font-size:1.1rem; letter-spacing:.02em; }

/* ---------- 12. Certifications strip ---------- */
.fo-certs { display:flex; gap: var(--fo-s6); flex-wrap:wrap; justify-content:center; align-items:center; }
.fo-cert { border:1px solid var(--fo-border); border-radius:8px; padding:.7rem 1.1rem; font-weight:700; color: var(--fo-charcoal); font-size:.9rem; background:#fff; }

/* ---------- 13. Breadcrumb ---------- */
.fo-crumb { font-size:.85rem; color: var(--fo-gray-500); padding-block: var(--fo-s4); }
.fo-crumb a { color: var(--fo-gray-700); }

/* ---------- 14. Spec table ---------- */
.fo-spec { width:100%; border-collapse:collapse; font-size:.95rem; }
.fo-spec th, .fo-spec td { text-align:start; padding:.85rem 1rem; border-bottom:1px solid var(--fo-border); }
.fo-spec thead th { background: var(--fo-ink); color:#fff; font-family: var(--fo-font-body); }
.fo-spec tbody tr:nth-child(even) { background: var(--fo-gray-50); }
.fo-spec td:first-child { font-weight:700; color: var(--fo-ink); width:38%; }
.fo-list { margin:1.25rem 0 0; padding:0; list-style:none; }
.fo-list li { position:relative; padding:.5rem 0 .5rem 1.5rem; border-bottom:1px solid var(--fo-border); }
.fo-list li:last-child { border-bottom:0; }
.fo-list li::before { content:""; position:absolute; left:0; top:.95rem; width:8px; height:8px; border-radius:2px; background: var(--fo-crimson); }
.fo-spec__wrap { overflow-x:auto; border:1px solid var(--fo-border); border-radius: var(--fo-radius); }
.fo-spec__wrap .fo-spec { min-width:520px; }
/* Ladder tables (rows = models): natural column widths, no cell wrapping; fo-spec__wrap provides the horizontal scroll. */
.fo-spec--ladder td:first-child { width:auto; }
.fo-spec--ladder th, .fo-spec--ladder td { white-space:nowrap; }

/* ---------- 14b. Product templates (T2 category / T3 detail) ---------- */
/* AquaCore product hero photo (bright connected-world skyline). Left scrim keeps the headline legible. */
.fo-hero--product::before { content:""; position:absolute; inset:0; z-index:0;
  background:url('../img/hero-aquacore.jpg') center 32%/cover no-repeat; }
.fo-hero--product::after { background:
  linear-gradient(90deg, rgba(10,11,14,.93) 0%, rgba(10,11,14,.70) 40%, rgba(10,11,14,.30) 72%, rgba(10,11,14,.06) 100%); }
.fo-hero--product { min-height: 440px; display:flex; align-items:center; }
/* EnergyGuard (T2) imagery */
.fo-hero--energyguard::before { background:url('../img/hero-energyguard.jpg') center 42%/cover no-repeat; }
/* UPS Systems (T2) imagery — distinct red-lit power aisle (not the AquaCore skyline) */
.fo-hero--ups::before { background:url('../img/hero-ups.jpg') center 50%/cover no-repeat; }
/* DC Power Systems imagery — bright clean-energy skyline (solar + wind + telecom tower + data-center city).
   Overlay = left→right darkening for the headline + a soft top wash for text over the bright sky,
   both fading out on the right so the city/tower/data-center detail stays bright and clear. */
.fo-hero--dc::before { background:url('../img/hero-dc.jpg') center 50%/cover no-repeat; }
.fo-hero--dc::after { background:
  linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.82) 42%, rgba(8,9,12,.52) 62%, rgba(8,9,12,.18) 80%, rgba(8,9,12,0) 94%),
  linear-gradient(180deg, rgba(8,9,12,.34) 0%, rgba(8,9,12,.10) 32%, rgba(8,9,12,0) 55%); }
/* Batteries (T2) imagery: Higgsfield battery-applications scene (ESS cabinet row + telecom tower + solar + city). The --product left scrim keeps the headline legible over the dark storm sky. */
.fo-hero--batteries::before { background:url('../img/hero-batteries.jpg') center 62%/cover no-repeat; }
/* Cooling family hero: Higgsfield cold-aisle scene (D42). */
.fo-hero--cooling::before { background:url('../img/hero-cooling.jpg') center 55%/cover no-repeat; }
/* IT Racks & Smart PDU family hero: Higgsfield bright rack hall with open-door PDU (D69). */
.fo-hero--itracks::before { background:url('../img/hero-it-racks.jpg') center 50%/cover no-repeat; }
.fo-card__media--eg-elite-power { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/eg-elite-power.jpg'); }
.fo-card__media--eg-smart-power { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/eg-smart-power.jpg'); }
.fo-card__media--eg-smart-one-power { background-image: linear-gradient(135deg,rgba(162,28,35,.06),rgba(21,23,28,.10)), url('../img/eg-smart-one-power.jpg'); }
.fo-media-frame--eg-renewable { background-image: url('../img/eg-renewable-hybrid.jpg'); }
.fo-media-frame--eg-elite-power { background-image: url('../img/eg-elite-power.jpg'); }
.fo-media-frame--eg-smart-power { background-image: url('../img/eg-smart-power.jpg'); }
.fo-media-frame--eg-smart-one-power { background-image: url('../img/eg-smart-one-power.jpg'); }
/* UPS Systems (T2 category cards + T3 detail frames). White-background product cutouts: contain on a soft neutral rather than cover. */
.fo-card__media--ups-tower, .fo-card__media--ups-rack, .fo-card__media--ups-modular,
.fo-media-frame--ups-tower, .fo-media-frame--ups-rack, .fo-media-frame--ups-modular {
  background-color:#eef0f3; background-size:contain; background-repeat:no-repeat; background-position:center; }
.fo-card__media--ups-tower, .fo-media-frame--ups-tower { background-image: url('../img/ups-tower.jpg'); }
.fo-card__media--ups-rack, .fo-media-frame--ups-rack { background-image: url('../img/ups-rack.jpg'); }
.fo-card__media--ups-modular, .fo-media-frame--ups-modular { background-image: url('../img/ups-modular.jpg'); }
/* DC Power Systems (T2). White-background product renders: contain on a white studio field (matches the renders' baked white bg so there's no grey seam); depth added by the shared DC vignette below. */
.fo-card__media--dc-cabinet, .fo-card__media--dc-front, .fo-card__media--dc-angle, .fo-card__media--dc-distribution, .fo-card__media--dc-module, .fo-card__media--dc-outdoor,
.fo-media-frame--dc-cabinet, .fo-media-frame--dc-front, .fo-media-frame--dc-angle, .fo-media-frame--dc-distribution, .fo-media-frame--dc-module, .fo-media-frame--dc-outdoor, .fo-media-frame--dc-outdoor-battery,
.fo-thumb--dc-front, .fo-thumb--dc-angle, .fo-thumb--dc-module {
  background-color:#ffffff; background-size:contain; background-repeat:no-repeat; background-position:center; }
.fo-card__media--dc-cabinet, .fo-media-frame--dc-cabinet { background-image: url('../img/dc-modular-48200.jpg'); }
.fo-card__media--dc-front, .fo-media-frame--dc-front, .fo-thumb--dc-front { background-image: url('../img/dc-system-front.jpg'); }
.fo-card__media--dc-angle, .fo-media-frame--dc-angle, .fo-thumb--dc-angle { background-image: url('../img/dc-system-angle.jpg'); }
.fo-card__media--dc-distribution, .fo-media-frame--dc-distribution { background-image: url('../img/dc-system-distribution.jpg'); }
.fo-card__media--dc-module, .fo-media-frame--dc-module, .fo-thumb--dc-module { background-image: url('../img/dc-rectifier-module.jpg'); }
.fo-card__media--dc-outdoor, .fo-media-frame--dc-outdoor { background-image: url('../img/dc-outdoor-module.jpg'); }
.fo-media-frame--dc-outdoor-battery { background-image: url('../img/dc-outdoor-battery.jpg'); }
/* Batteries (T2 + T3). White-background product renders on a white studio field, matching the DC render treatment. */
.fo-card__media--battery-lithium, .fo-card__media--battery-outdoor, .fo-card__media--battery-vrla,
.fo-media-frame--battery-lithium, .fo-media-frame--battery-outdoor, .fo-media-frame--battery-vrla {
  background-color:#ffffff; background-size:contain; background-repeat:no-repeat; background-position:center; }
.fo-card__media--battery-lithium, .fo-media-frame--battery-lithium { background-image: url('../img/battery-lithium.jpg'); }
.fo-card__media--battery-outdoor, .fo-media-frame--battery-outdoor { background-image: url('../img/battery-outdoor.jpg'); }
.fo-card__media--battery-vrla, .fo-media-frame--battery-vrla { background-image: url('../img/battery-vrla.jpg'); }
/* Battery product frames: same soft studio vignette + hairline edge as the DC frames. */
.fo-card__media[class*="--battery-"], .fo-media-frame[class*="--battery-"] { position:relative; }
.fo-card__media[class*="--battery-"]::after, .fo-media-frame[class*="--battery-"]::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(130% 112% at 50% 38%, rgba(255,255,255,0) 48%, rgba(24,28,36,.05) 78%, rgba(24,28,36,.14) 100%);
  box-shadow: inset 0 0 0 1px rgba(24,28,36,.06); }
/* Application strip: icon row (icon + label), hairline dividers via 1px grid gap. */
.fo-appstrip {
  margin-top:1.5rem; display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--fo-border); border:1px solid var(--fo-border); border-radius:16px;
  box-shadow:0 1px 2px rgba(21,23,28,.04), 0 10px 26px rgba(21,23,28,.05); overflow:hidden; }
.fo-appstrip__item {
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-align:center; padding:1.7rem 1rem; background:var(--fo-white); }
.fo-appstrip__icon { color:var(--fo-primary); line-height:0; }
.fo-appstrip__icon svg, .fo-appstrip__icon img { width:52px; height:52px; display:block; }
.fo-appstrip__label { font-size:.9rem; line-height:1.3; font-weight:700; color:var(--fo-text-soft); max-width:13ch; }
@media (max-width:880px){ .fo-appstrip { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .fo-appstrip { grid-template-columns:repeat(2,1fr); } .fo-appstrip__item { padding:1.3rem .75rem; } }
/* 3-item variant of the application strip (e.g. cooling): 3 equal columns, stacking to 1 on phones so no empty divider cells are exposed. */
.fo-appstrip--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:880px){ .fo-appstrip--3 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .fo-appstrip--3 { grid-template-columns:1fr; } }
.fo-appstrip--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:880px){ .fo-appstrip--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .fo-appstrip--4 { grid-template-columns:repeat(2,1fr); } }
/* Cooling: catalog product imagery (D42). Product renders sit contained on dark/neutral fields. */
.fo-card__media--cool-room { background:#fff url('../img/cool-room-unit.jpg') center/contain no-repeat; }
.fo-card__media--cool-inrow { background:#fff url('../img/cool-inrow-unit.jpg') center/contain no-repeat; }
.fo-card__media--cool-rackm { background:#fff url('../img/cool-rackm-unit.jpg') center/contain no-repeat; }
.fo-card__media--cool-odc { background:#fff url('../img/cool-odc-unit.jpg') center/cover no-repeat; }
.fo-card__media--cool-imm { background:#f4f5f7 url('../img/cool-imm-cabinet.jpg') center/contain no-repeat; }
.fo-card__media--cool-liq { background:#fff url('../img/cool-liq-tanks.jpg') center/cover no-repeat; }
.fo-media-frame--cool-room-unit { background:#fff url('../img/cool-room-unit.jpg') center/contain no-repeat; }
.fo-media-frame--cool-inrow-unit { background:#fff url('../img/cool-inrow-unit.jpg') center/contain no-repeat; }
.fo-media-frame--cool-rackm-airflow { background:#fff url('../img/cool-rackm-airflow.jpg') center/contain no-repeat; }
.fo-media-frame--cool-odc-banner { background:#fff url('../img/cool-odc-banner.jpg') center/cover no-repeat; }
.fo-media-frame--cool-odc-mounted { background:#101216 url('../img/cool-odc-mounted.jpg') center/cover no-repeat; }
.fo-media-frame--cool-imm-diagram { background:#fff url('../img/cool-imm-diagram.jpg') center/contain no-repeat; }
.fo-media-frame--cool-liq-modular { background:#fff url('../img/cool-liq-modular.jpg') center/contain no-repeat; }
.fo-card__media--cool-liq-aidc { background:#fff url('../img/cool-liq-aidc-row.jpg') center/cover no-repeat; }
.fo-media-frame--cool-liq-aidc-cutaway { background:#fff url('../img/cool-liq-aidc-cutaway.jpg') center/contain no-repeat; }
.fo-media-frame--cool-liq-aidc-row { background:#fff url('../img/cool-liq-aidc-row.jpg') center/cover no-repeat; }
.fo-media-frame--cool-liq-aidc-section { background:#fff url('../img/cool-liq-aidc-section.jpg') center/contain no-repeat; }
.fo-card__media--cool-room-cutaway { background:#fff url('../img/cool-room-cutaway.jpg') center/contain no-repeat; }
.fo-card__media--cool-room-hall { background:#fff url('../img/cool-room-hall.jpg') center/cover no-repeat; }
.fo-card__media--cool-inrow-row { background:#0f1319 url('../img/cool-inrow-row.jpg') center/cover no-repeat; }
.fo-card__media--cool-rackm-split { background:#fff url('../img/cool-rackm-split.jpg') center/contain no-repeat; }
.fo-card__media--cool-liq-cdu { background:#fff url('../img/cool-liq-cdu.jpg') center/cover no-repeat; }
.fo-card__media--cool-odc-banner { background:#101216 url('../img/cool-odc-banner.jpg') center/cover no-repeat; }
.fo-card__media--cool-aidc-section { background:#fff url('../img/cool-liq-aidc-section.jpg') center/cover no-repeat; }
.fo-card__media--cool-aidc-hall { background:#fff url('../img/cool-liq-aidc-hall.jpg') center/cover no-repeat; }
.fo-card__media--cool-family { background:#101216 url('../img/hero-cooling.jpg') center/cover no-repeat; }
.fo-card__media--cool-odc-mounted { background:#101216 url('../img/cool-odc-mounted.jpg') center/cover no-repeat; }
.fo-card__media--dcim-noc { background:#0e1420 url('../img/dcim-noc.jpg') center/cover no-repeat; }
.fo-card__media--pdu-h-basic { background:#f4f5f7 url('../img/pdu-h-basic.jpg') center/cover no-repeat; }
.fo-card__media--pdu-h-smart { background:#f4f5f7 url('../img/pdu-h-smart.jpg') center/cover no-repeat; }
.fo-card__media--pdu-v-smart { background:#f4f5f7 url('../img/pdu-v-smart.jpg') center/cover no-repeat; }
.fo-card__media--pdu-v-long { background:#f4f5f7 url('../img/pdu-v-long.jpg') center/cover no-repeat; }
.fo-card__media--it-rack { background:#fff url('../img/rack-scm.jpg') center/contain no-repeat; }
.fo-media-frame--pdu-v-long { background:#f4f5f7 url('../img/pdu-v-long.jpg') center/cover no-repeat; }
.fo-media-frame--pdu-v-smart { background:#f4f5f7 url('../img/pdu-v-smart.jpg') center/cover no-repeat; }
.fo-card__media--rack-scm { background:#fff url('../img/rack-scm.jpg') center/contain no-repeat; }
.fo-card__media--rack-ncb { background:#fff url('../img/rack-ncb.jpg') center/contain no-repeat; }
.fo-card__media--rack-scg { background:#fff url('../img/rack-scg.jpg') center/contain no-repeat; }
.fo-card__media--rack-wcb { background:#fff url('../img/rack-wcb.jpg') center/contain no-repeat; }
.fo-media-frame--rack-scm-exploded { background:#fff url('../img/rack-scm-exploded.jpg') center/contain no-repeat; }
.fo-media-frame--rack-scg-airflow { background:#fff url('../img/rack-scg-airflow.jpg') center/contain no-repeat; }
.fo-media-frame--rack-doors { background:#fff url('../img/rack-doors.jpg') center/contain no-repeat; }
.fo-media-frame--rack-aisle { background:#101216 url('../img/rack-aisle.jpg') center/cover no-repeat; }
/* Product-series comparison cards (D73): accent-topped cards with kicker, bullets, optional popular badge. */
.fo-series__card { position:relative; background:#fff; border:1px solid var(--fo-border); border-top:4px solid var(--fo-crimson); border-radius:8px; padding:1.6rem 1.4rem; }
.fo-series__card--popular { border-top-color:#EBB40F; }
.fo-series__badge { position:absolute; top:-14px; right:16px; background:#F5C211; color:#1d1d1f; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.32rem .75rem; border-radius:5px; }
.fo-series__kicker { display:block; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--fo-crimson); }
.fo-series__card--popular .fo-series__kicker { color:#A87B00; }
.fo-series__card h3 { margin:.5rem 0 .6rem; }
.fo-series__card > p { color:var(--fo-text-soft); font-size:.95rem; }
.fo-series__list { list-style:none; margin:1.1rem 0 0; padding:0; }
.fo-series__list li { position:relative; padding-left:1.15rem; margin:.55rem 0; font-size:.92rem; }
.fo-series__list li::before { content:""; position:absolute; left:0; top:.45em; width:7px; height:7px; border-radius:50%; background:var(--fo-crimson); }
.fo-series__card--popular .fo-series__list li::before { background:#EBB40F; }

/* Smart PDU KPI band (D74): dark strip of headline figures with gold icons. */
.fo-kpiband { background:#2b2b2d; border-top:4px solid var(--fo-crimson); }
.fo-kpis { display:grid; grid-template-columns:repeat(6,1fr); }
.fo-kpi { text-align:center; padding:2.1rem .8rem 1.9rem; border-left:1px solid rgba(255,255,255,.09); }
.fo-kpi:first-child { border-left:0; }
.fo-kpi__icon { color:#F5C211; line-height:0; margin-bottom:.75rem; }
.fo-kpi__icon svg { width:26px; height:26px; }
.fo-kpi__num { font-size:1.3rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.fo-kpi__label { margin-top:.35rem; font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.55); }
@media (max-width:900px) {
  .fo-kpis { grid-template-columns:repeat(3,1fr); }
  .fo-kpi { padding:1.5rem .6rem 1.3rem; }
  .fo-kpi:nth-child(4) { border-left:0; }
}
@media (max-width:560px) {
  .fo-kpis { grid-template-columns:repeat(2,1fr); }
  .fo-kpi:nth-child(even) { border-left:1px solid rgba(255,255,255,.09); }
  .fo-kpi:nth-child(odd) { border-left:0; }
}

.fo-media-frame--pdu-h-basic { background:#f4f5f7 url('../img/pdu-h-basic.jpg') center/cover no-repeat; }
.fo-media-frame--pdu-h-smart { background:#f4f5f7 url('../img/pdu-h-smart.jpg') center/cover no-repeat; }
.fo-media-frame--it-rack { background:#fff url('../img/rack-scm.jpg') center/contain no-repeat; }
/* Cooling proof band: dim Higgsfield thermal backdrop under the dark overlay; gradient alone is the fallback. */
.fo-stats--cooling { background: linear-gradient(90deg, rgba(14,17,23,.92) 0%, rgba(14,17,23,.78) 55%, rgba(30,14,16,.82) 100%), url('../img/stats-cooling-bg.jpg') center/cover no-repeat #12151b; }
/* 4000 A flagship (2-rack) renders. */
.fo-card__media--dc-4000a, .fo-media-frame--dc-4000a, .fo-thumb--dc-4000a,
.fo-card__media--dc-4000a-hero, .fo-media-frame--dc-4000a-hero {
  background-color:#ffffff; background-size:contain; background-repeat:no-repeat; background-position:center; }
.fo-card__media--dc-4000a, .fo-media-frame--dc-4000a, .fo-thumb--dc-4000a { background-image: url('../img/dc-4000a-cabinets.png'); }
.fo-card__media--dc-4000a-hero, .fo-media-frame--dc-4000a-hero { background-image: url('../img/dc-4000a-hero.jpg'); }
/* Applications banner (DC overview): full-width cover image with a bottom gradient caption. */
.fo-banner { position:relative; border-radius: var(--fo-radius); overflow:hidden; min-height:360px; background-color:#0d1420; background-size:cover; background-position:center; box-shadow: var(--fo-shadow-sm); }
.fo-banner--dc-applications { background-image: url('../img/dc-applications-banner.jpg'); }
.fo-banner__overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:.55rem; padding: clamp(1.25rem, 3vw, 2.5rem); background:linear-gradient(0deg, rgba(8,12,20,.82) 0%, rgba(8,12,20,.35) 45%, rgba(8,12,20,0) 78%); }
.fo-banner__overlay h3 { margin:0; color:#fff; font-size: clamp(1.25rem,2.4vw,1.9rem); }
.fo-banner__overlay p { margin:0; color: rgba(255,255,255,.86); max-width:52ch; }
.fo-banner__overlay .fo-btn { margin-top:.5rem; }
@media (max-width:600px){ .fo-banner{ min-height:300px; } }
/* DC product frames: soft studio vignette + hairline edge so white-bg renders read as premium studio shots (frame styling only; product images untouched). */
.fo-card__media[class*="--dc-"], .fo-media-frame[class*="--dc-"], .fo-thumb[class*="--dc-"] { position:relative; }
.fo-card__media[class*="--dc-"]::after, .fo-media-frame[class*="--dc-"]::after, .fo-thumb[class*="--dc-"]::after {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(130% 112% at 50% 38%, rgba(255,255,255,0) 48%, rgba(24,28,36,.05) 78%, rgba(24,28,36,.14) 100%);
  box-shadow: inset 0 0 0 1px rgba(24,28,36,.06); }
.fo-detail__top { align-items:start; }
.fo-tag { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--fo-crimson); background: rgba(162,28,35,.08); border-radius:6px; padding:.28rem .6rem; margin-bottom:.6rem; }
.fo-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.fo-tags .fo-tag { margin-bottom:0; }
.fo-note { color: var(--fo-crimson); font-size:.85rem; font-weight:600; }
.fo-section--dark .fo-note { color:#ff8a90; }
.fo-download { display:flex; align-items:center; justify-content:space-between; gap: var(--fo-s5); flex-wrap:wrap; border:1px solid var(--fo-border); border-inline-start:4px solid var(--fo-crimson); border-radius: var(--fo-radius); background:#fff; padding: var(--fo-s5); }
.fo-download h3 { margin:0 0 .25rem; font-size:1.1rem; }
.fo-download p { margin:0; color: var(--fo-text-soft); font-size:.92rem; }
/* Interactive product image gallery (T3 detail) */
.fo-gallery { display:grid; gap: var(--fo-s3); }
.fo-gallery__thumbs { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--fo-s3); }
.fo-thumb { aspect-ratio: 4/3; border-radius:10px; border:2px solid var(--fo-border); background-size:cover; background-position:center; background-color:#f4f5f7; cursor:pointer; padding:0; opacity:.72; transition: opacity .2s ease, border-color .2s ease; }
.fo-thumb:hover, .fo-thumb:focus-visible { opacity:1; }
.fo-thumb[aria-selected="true"] { opacity:1; border-color: var(--fo-crimson); }
.fo-thumb--micro-detail { background-image: url('../img/ac-micro-dc-detail.jpg'); }
.fo-thumb--micro-g1 { background-image: url('../img/ac-micro-dc-g1.jpg'); }
.fo-thumb--micro-g2 { background-image: url('../img/ac-micro-dc-g2.jpg'); }
.fo-media-frame--micro-g1 { background-image: url('../img/ac-micro-dc-g1.jpg'); }
.fo-media-frame--micro-g2 { background-image: url('../img/ac-micro-dc-g2.jpg'); }
.fo-thumb--containment-detail { background-image: url('../img/ac-containment-dc-detail.jpg'); }
.fo-thumb--containment-g1 { background-image: url('../img/ac-containment-dc-g1.jpg'); }
.fo-thumb--containment-g2 { background-image: url('../img/ac-containment-dc-g2.jpg'); }
.fo-media-frame--containment-g1 { background-image: url('../img/ac-containment-dc-g1.jpg'); }
.fo-media-frame--containment-g2 { background-image: url('../img/ac-containment-dc-g2.jpg'); }
.fo-media-frame--ai-detail { background-image: linear-gradient(135deg,rgba(21,23,28,.12),rgba(58,20,23,.14)), url('../img/ac-ai-data-center-detail.jpg'); }
.fo-media-frame--ai-g1 { background-image: url('../img/ac-ai-data-center-g1.jpg'); }
.fo-media-frame--ai-g2 { background-image: url('../img/ac-ai-data-center-g2.jpg'); }
.fo-thumb--ai-detail { background-image: linear-gradient(135deg,rgba(21,23,28,.12),rgba(58,20,23,.14)), url('../img/ac-ai-data-center-detail.jpg'); }
.fo-thumb--ai-g1 { background-image: url('../img/ac-ai-data-center-g1.jpg'); }
.fo-thumb--ai-g2 { background-image: url('../img/ac-ai-data-center-g2.jpg'); }

/* Inquiry / RFQ form */
.fo-form { display:grid; gap: var(--fo-s4); background:#fff; border-radius: var(--fo-radius-lg); padding: var(--fo-s6); box-shadow: var(--fo-shadow-lg); }
.fo-field { display:grid; gap:.35rem; }
.fo-field label { font-weight:700; font-size:.85rem; color: var(--fo-ink); }
.fo-field input, .fo-field textarea { font: inherit; padding:.7rem .85rem; border:1px solid var(--fo-border); border-radius:10px; background: var(--fo-gray-50); color: var(--fo-ink); }
.fo-field input:focus, .fo-field textarea:focus { outline:2px solid var(--fo-crimson); outline-offset:1px; border-color: var(--fo-crimson); background:#fff; }
.fo-field input[readonly] { background: var(--fo-gray-50); color: var(--fo-text-soft); }
.fo-consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color: var(--fo-text-soft); }
.fo-consent input { margin-top:.2rem; }
.fo-consent a { color: var(--fo-crimson); text-decoration:underline; }

/* ---------- 15. Footer ---------- */
.fo-footer { background: var(--fo-ink); color:#aab0bb; padding-block: var(--fo-s8) var(--fo-s6); font-size:.92rem; }
.fo-footer a { color:#c7ccd5; }
.fo-footer a:hover { color:#fff; }
.fo-footer__grid { display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--fo-s6); }
.fo-footer h4 { color:#fff; font-family: var(--fo-font-body); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--fo-s4); }
.fo-footer li { margin-bottom:.5rem; }
.fo-footer__logo img { height:40px; width:auto; margin-bottom: var(--fo-s4); }
.fo-footer__meta { color:#7e858f; }
.fo-footer__social { margin-top: var(--fo-s5); }
.fo-social { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid #2a2e38; border-radius:8px; color:#c7ccd5; transition: .2s var(--fo-ease); }
.fo-social svg { width:19px; height:19px; display:block; }
.fo-social:hover { background: var(--fo-crimson); border-color: var(--fo-crimson); color:#fff; }
.fo-footer__legal { border-top:1px solid #2a2e38; margin-top: var(--fo-s7); padding-top: var(--fo-s5); font-size:.82rem; color:#7e858f; display:flex; justify-content:space-between; gap: var(--fo-s4); flex-wrap:wrap; }

/* Office cards (address + email only — NO phone, per D13) */
.fo-offices { grid-template-columns: repeat(3,1fr); }
.fo-office { border:1px solid var(--fo-border); border-radius: var(--fo-radius); padding: var(--fo-s5); background:#fff; }
.fo-office--hq { border-color: var(--fo-crimson); box-shadow: 0 0 0 1px var(--fo-crimson) inset; }
.fo-office__badge { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background: var(--fo-crimson); padding:.2rem .5rem; border-radius:4px; margin-bottom: var(--fo-s3); }
.fo-office h3 { font-size:1.05rem; margin-bottom: var(--fo-s2); }
.fo-office address { font-style:normal; color: var(--fo-text-soft); font-size:.92rem; }

/* ---------- 15b. Legal / long-form prose ---------- */
.fo-prose { max-width: 74ch; color: var(--fo-ink); }
.fo-prose h2 { font-size:1.35rem; margin: var(--fo-s6) 0 var(--fo-s3); }
.fo-prose h3 { font-size:1.05rem; margin: var(--fo-s5) 0 var(--fo-s2); }
.fo-prose p, .fo-prose li { color: var(--fo-text-soft); line-height:1.7; }
.fo-prose p { margin-bottom: var(--fo-s4); }
.fo-prose ul { margin: 0 0 var(--fo-s4); padding-inline-start: 1.25rem; }
.fo-prose li { margin-bottom:.4rem; }
.fo-prose a { color: var(--fo-crimson); text-decoration:underline; }
.fo-prose__meta { color: var(--fo-text-soft); font-size:.85rem; margin-bottom: var(--fo-s5); }

/* ---------- 16. Scroll reveal (progressive enhancement: hidden state only when JS is active) ---------- */
.js .fo-reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--fo-ease), transform .6s var(--fo-ease); }
.js .fo-reveal.is-in { opacity:1; transform:none; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 960px) {
  .fo-nav__list, .fo-lang { display:none; }
  .fo-burger { display:block; margin-inline-start:auto; }
  .fo-mega { display:none; }
  .fo-flagship, .fo-split, .fo-cards--3, .fo-cards--4, .fo-stats__grid, .fo-offices, .fo-footer__grid { grid-template-columns: repeat(2,1fr); }
  .fo-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .fo-cards--2, .fo-cards--3, .fo-cards--4, .fo-flagship, .fo-stats__grid, .fo-offices, .fo-split, .fo-footer__grid { grid-template-columns: 1fr; }
  .fo-section { padding-block: var(--fo-s7); }
}

/* ---------- 18. RTL ---------- */
[dir="rtl"] .fo-card__link::after { content:" ←"; }
[dir="rtl"] .fo-nav { margin-inline-start:0; margin-inline-end:auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior:auto; }
  .js .fo-reveal { opacity:1; transform:none; }
}

/* Generators (D75): hero + catalog imagery classes. */
.fo-hero--generators::before { background:url('../img/hero-generators.jpg') center 50%/cover no-repeat; }
.fo-card__media--gen-family, .fo-media-frame--gen-family { background:url('../img/hero-generators.jpg') center/cover no-repeat; }
.fo-card__media--gen-perkins-canopy-yellow, .fo-media-frame--gen-perkins-canopy-yellow { background:url('../img/gen-perkins-canopy-yellow.jpg') center/cover no-repeat; }
.fo-card__media--gen-perkins-canopy-white, .fo-media-frame--gen-perkins-canopy-white { background:url('../img/gen-perkins-canopy-white.jpg') center/cover no-repeat; }
.fo-card__media--gen-kubota-twin, .fo-media-frame--gen-kubota-twin { background:url('../img/gen-kubota-twin.jpg') center/cover no-repeat; }
.fo-card__media--gen-kubota-detail1, .fo-media-frame--gen-kubota-detail1 { background:url('../img/gen-kubota-detail1.jpg') center/cover no-repeat; }
.fo-card__media--gen-kubota-detail2, .fo-media-frame--gen-kubota-detail2 { background:url('../img/gen-kubota-detail2.jpg') center/cover no-repeat; }
.fo-card__media--gen-yanmar-detail1, .fo-media-frame--gen-yanmar-detail1 { background:url('../img/gen-yanmar-detail1.jpg') center/cover no-repeat; }
.fo-card__media--gen-yanmar-detail2, .fo-media-frame--gen-yanmar-detail2 { background:url('../img/gen-yanmar-detail2.jpg') center/cover no-repeat; }
.fo-card__media--gen-fawde-photo1, .fo-media-frame--gen-fawde-photo1 { background:url('../img/gen-fawde-photo1.jpg') center/cover no-repeat; }
.fo-card__media--gen-fawde-photo2, .fo-media-frame--gen-fawde-photo2 { background:url('../img/gen-fawde-photo2.jpg') center/cover no-repeat; }
.fo-card__media--gen-fpt-engine1, .fo-media-frame--gen-fpt-engine1 { background:url('../img/gen-fpt-engine1.jpg') center/cover no-repeat; }
.fo-card__media--gen-fpt-engine2, .fo-media-frame--gen-fpt-engine2 { background:url('../img/gen-fpt-engine2.jpg') center/cover no-repeat; }
.fo-card__media--gen-hv-switchgear, .fo-media-frame--gen-hv-switchgear { background:url('../img/gen-hv-switchgear.jpg') center/cover no-repeat; }
.fo-card__media--gen-trailer, .fo-media-frame--gen-trailer { background:url('../img/gen-trailer.jpg') center/cover no-repeat; }
.fo-card__media--gen-container, .fo-media-frame--gen-container { background:url('../img/gen-container.jpg') center/cover no-repeat; }
.fo-card__media--gen-silent-650, .fo-media-frame--gen-silent-650 { background:url('../img/gen-silent-650.jpg') center/cover no-repeat; }
.fo-card__media--gen-silent-60, .fo-media-frame--gen-silent-60 { background:url('../img/gen-silent-60.jpg') center/cover no-repeat; }
.fo-card__media--gen-lt-site, .fo-media-frame--gen-lt-site { background:url('../img/gen-lt-site.jpg') center/cover no-repeat; }
.fo-card__media--gen-gas-plant, .fo-media-frame--gen-gas-plant { background:url('../img/gen-gas-plant.jpg') center/cover no-repeat; }
.fo-card__media--gen-factory-yard, .fo-media-frame--gen-factory-yard { background:url('../img/gen-factory-yard.jpg') center/cover no-repeat; }
.fo-card__media--gen-cummins-open, .fo-media-frame--gen-cummins-open { background:#fff url('../img/gen-cummins-open.jpg') center/contain no-repeat; }
.fo-card__media--gen-cummins-open2, .fo-media-frame--gen-cummins-open2 { background:#fff url('../img/gen-cummins-open2.jpg') center/contain no-repeat; }
.fo-card__media--gen-cummins-canopy1, .fo-media-frame--gen-cummins-canopy1 { background:#fff url('../img/gen-cummins-canopy1.jpg') center/contain no-repeat; }
.fo-card__media--gen-cummins-canopy2, .fo-media-frame--gen-cummins-canopy2 { background:#fff url('../img/gen-cummins-canopy2.jpg') center/contain no-repeat; }
.fo-card__media--gen-perkins-open1, .fo-media-frame--gen-perkins-open1 { background:#fff url('../img/gen-perkins-open1.jpg') center/contain no-repeat; }
.fo-card__media--gen-perkins-open2, .fo-media-frame--gen-perkins-open2 { background:#fff url('../img/gen-perkins-open2.jpg') center/contain no-repeat; }
.fo-card__media--gen-perkins-open3, .fo-media-frame--gen-perkins-open3 { background:#fff url('../img/gen-perkins-open3.jpg') center/contain no-repeat; }
.fo-card__media--gen-doosan-open, .fo-media-frame--gen-doosan-open { background:#fff url('../img/gen-doosan-open.jpg') center/contain no-repeat; }
.fo-card__media--gen-doosan-set1, .fo-media-frame--gen-doosan-set1 { background:#fff url('../img/gen-doosan-set1.jpg') center/contain no-repeat; }
.fo-card__media--gen-doosan-set2, .fo-media-frame--gen-doosan-set2 { background:#fff url('../img/gen-doosan-set2.jpg') center/contain no-repeat; }
.fo-card__media--gen-fpt-open, .fo-media-frame--gen-fpt-open { background:#fff url('../img/gen-fpt-open.jpg') center/contain no-repeat; }
.fo-card__media--gen-yanmar-canopy, .fo-media-frame--gen-yanmar-canopy { background:#fff url('../img/gen-yanmar-canopy.jpg') center/contain no-repeat; }
.fo-card__media--gen-fawde-open, .fo-media-frame--gen-fawde-open { background:#fff url('../img/gen-fawde-open.jpg') center/contain no-repeat; }
.fo-card__media--gen-hv-set, .fo-media-frame--gen-hv-set { background:#fff url('../img/gen-hv-set.jpg') center/contain no-repeat; }
.fo-card__media--gen-hv-paralleling, .fo-media-frame--gen-hv-paralleling { background:#fff url('../img/gen-hv-paralleling.jpg') center/contain no-repeat; }
.fo-card__media--gen-ats, .fo-media-frame--gen-ats { background:#fff url('../img/gen-ats.jpg') center/contain no-repeat; }
.fo-card__media--gen-lt-pair, .fo-media-frame--gen-lt-pair { background:#fff url('../img/gen-lt-pair.jpg') center/contain no-repeat; }
.fo-card__media--gen-lt-heads, .fo-media-frame--gen-lt-heads { background:#fff url('../img/gen-lt-heads.jpg') center/contain no-repeat; }
.fo-card__media--gen-gas-open1, .fo-media-frame--gen-gas-open1 { background:#fff url('../img/gen-gas-open1.jpg') center/contain no-repeat; }
.fo-card__media--gen-gas-open2, .fo-media-frame--gen-gas-open2 { background:#fff url('../img/gen-gas-open2.jpg') center/contain no-repeat; }

/* DCIM & Monitoring (D80): hero + solution-document imagery. */
.fo-hero--dcim::before { background:url('../img/hero-dcim.jpg') center 50%/cover no-repeat; }
.fo-card__media--dcim-cab-single, .fo-media-frame--dcim-cab-single { background:#fff url('../img/dcim-cab-single.jpg') center/contain no-repeat; }
.fo-card__media--dcim-cab-multi, .fo-media-frame--dcim-cab-multi { background:#fff url('../img/dcim-cab-multi.jpg') center/contain no-repeat; }
.fo-card__media--dcim-aisle-single, .fo-media-frame--dcim-aisle-single { background:#fff url('../img/dcim-aisle-single.jpg') center/contain no-repeat; }
.fo-card__media--dcim-aisle-double, .fo-media-frame--dcim-aisle-double { background:#fff url('../img/dcim-aisle-double.jpg') center/contain no-repeat; }
.fo-media-frame--dcim-platform { background:#fff url('../img/dcim-platform.jpg') center/contain no-repeat; }
.fo-media-frame--dcim-sensors { background:#fff url('../img/dcim-sensors.jpg') center/contain no-repeat; }

/* Remote Monitoring S3/FSU (D84): hero + document imagery. */
.fo-hero--rms::before { background:url('../img/hero-rms.jpg') center 50%/cover no-repeat; }
.fo-media-frame--rms-platform { background:#fff url('../img/rms-platform.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-map { background:#fff url('../img/rms-ui-map.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-3d { background:#fff url('../img/rms-ui-3d.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-power { background:#fff url('../img/rms-ui-power.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-alarms { background:#fff url('../img/rms-ui-alarms.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-reports { background:#fff url('../img/rms-ui-reports.jpg') center/contain no-repeat; }
.fo-card__media--rms-ui-authority { background:#fff url('../img/rms-ui-authority.jpg') center/contain no-repeat; }

/* Fiber Passive Infrastructure (D87): hero + document imagery. */
.fo-hero--fiber::before { background:url('../img/hero-fiber-pro.jpg') center 50%/cover no-repeat; }
.fo-card__media--fiber-cable-brand, .fo-media-frame--fiber-cable-brand { background:#fff url('../img/fiber-cable-cut.jpg') center/contain no-repeat; }
.fo-card__media--fiber-indoor, .fo-media-frame--fiber-indoor { background:#fff url('../img/fiber-indoor.jpg') center/contain no-repeat; }
.fo-card__media--fiber-adss-cross, .fo-media-frame--fiber-adss-cross { background:#fff url('../img/fiber-adss-cross.jpg') center/contain no-repeat; }
.fo-card__media--fiber-gyts-cross, .fo-media-frame--fiber-gyts-cross { background:#fff url('../img/fiber-gyts-cross.jpg') center/contain no-repeat; }
.fo-card__media--fiber-pc, .fo-media-frame--fiber-pc { background:#fff url('../img/fiber-pc.jpg') center/contain no-repeat; }
.fo-card__media--fiber-mpo, .fo-media-frame--fiber-mpo { background:#fff url('../img/fiber-mpo.jpg') center/contain no-repeat; }
.fo-card__media--fiber-pp24, .fo-media-frame--fiber-pp24 { background:#fff url('../img/fiber-pp24.jpg') center/contain no-repeat; }
.fo-card__media--fiber-odf144, .fo-media-frame--fiber-odf144 { background:#fff url('../img/fiber-odf144.jpg') center/contain no-repeat; }
.fo-card__media--fiber-splice, .fo-media-frame--fiber-splice { background:#fff url('../img/fiber-splice.jpg') center/contain no-repeat; }
.fo-card__media--fiber-fat, .fo-media-frame--fiber-fat { background:#fff url('../img/fiber-fat.jpg') center/contain no-repeat; }
.fo-card__media--fiber-plc, .fo-media-frame--fiber-plc { background:#fff url('../img/fiber-plc.jpg') center/contain no-repeat; }
.fo-card__media--fiber-cab-main, .fo-media-frame--fiber-cab-main { background:#fff url('../img/fiber-cab-main.jpg') center/contain no-repeat; }
.fo-card__media--fiber-cab-solar, .fo-media-frame--fiber-cab-solar { background:#fff url('../img/fiber-cab-solar.jpg') center/contain no-repeat; }
.fo-card__media--fiber-cab-ss, .fo-media-frame--fiber-cab-ss { background:#fff url('../img/fiber-cab-ss.jpg') center/contain no-repeat; }
.fo-card__media--fiber-cab-open, .fo-media-frame--fiber-cab-open { background:#fff url('../img/fiber-cab-open.jpg') center/contain no-repeat; }
.fo-card__media--fiber-ccc { background:#fff url('../img/fiber-ccc.jpg') center/contain no-repeat; }

/* Enclosures & Outdoor Cabinets (D91): hero + catalogue imagery. */
.fo-hero--enclosures::before { background:url('../img/hero-enclosures-cat.jpg') center 55%/cover no-repeat; }
.fo-card__media--enc-a9 { background:#fff url('../img/enc-a9.jpg') center/contain no-repeat; }
.fo-card__media--enc-a10 { background:#fff url('../img/enc-a10.jpg') center/contain no-repeat; }
.fo-card__media--enc-m01 { background:#fff url('../img/enc-m01.jpg') center/contain no-repeat; }
.fo-card__media--enc-dodc { background:#fff url('../img/enc-dodc.jpg') center/contain no-repeat; }
.fo-card__media--enc-bsc { background:#fff url('../img/enc-bsc.jpg') center/contain no-repeat; }
.fo-card__media--enc-mini { background:#fff url('../img/enc-mini.jpg') center/contain no-repeat; }
.fo-card__media--enc-npc { background:#fff url('../img/enc-npc.jpg') center/contain no-repeat; }
.fo-card__media--enc-obc-b { background:#fff url('../img/enc-obc-b.jpg') center/contain no-repeat; }
.fo-card__media--enc-obc-s { background:#fff url('../img/enc-obc-s.jpg') center/contain no-repeat; }
.fo-card__media--enc-oec { background:#fff url('../img/enc-oec.jpg') center/contain no-repeat; }
.fo-card__media--enc-otc-fa { background:#fff url('../img/enc-otc-fa.jpg') center/contain no-repeat; }
.fo-card__media--enc-otc-ff { background:#fff url('../img/enc-otc-ff.jpg') center/contain no-repeat; }
.fo-card__media--enc-otc-fh { background:#fff url('../img/enc-otc-fh.jpg') center/contain no-repeat; }
.fo-card__media--enc-otc-p { background:#fff url('../img/enc-otc-p.jpg') center/contain no-repeat; }
.fo-card__media--enc-otc-w { background:#fff url('../img/enc-otc-w.jpg') center/contain no-repeat; }
.fo-media-frame--enc-dodc-open { background:#fff url('../img/enc-dodc-open.jpg') center/contain no-repeat; }
.fo-card__media--enc-factory { background:url('../img/enc-factory.jpg') center/cover no-repeat; }

/* Telecom, 5G & TowerCo solution (D99): hero. */
.fo-hero--telecom::before { background:url('../img/hero-telecom.jpg') center 55%/cover no-repeat; }

/* Telecom NOC event-feed band (D106). */
.fo-noclog { max-width:880px; margin:0 auto; background:#101216; border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:1rem 1.4rem 1.1rem; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.fo-noclog__head { display:flex; align-items:center; gap:.45rem; padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:.3rem; }
.fo-noclog__led { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14); }
.fo-noclog__title { margin-left:.6rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#8b919c; }
.fo-noclog__row { display:flex; gap:.85rem; align-items:center; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem; color:#cfd3da; }
.fo-noclog__row:last-child { border-bottom:0; }
.fo-noclog__t { color:#8b919c; flex:none; width:3.4rem; }
.fo-noclog__dot { width:9px; height:9px; border-radius:50%; flex:none; }
.fo-noclog__tag { color:#fff; font-weight:700; letter-spacing:.05em; flex:none; }
@media (max-width:640px) { .fo-noclog__row { flex-wrap:wrap; } }

/* Data Centers solution (D108): hero. */
.fo-hero--dcsol::before { background:url('../img/hero-dcsol.jpg') center 50%/cover no-repeat; }

/* Government & Mega Projects solution (D110): hero. */
.fo-hero--govsol::before { background:url('../img/hero-govsol.jpg') center 55%/cover no-repeat; }

/* Healthcare solution (D111): hero. */
.fo-hero--hcsol::before { background:url('../img/hero-hcsol.jpg') center 45%/cover no-repeat; }

/* Banking & Enterprise solution (D114): hero. */
.fo-hero--besol::before { background:url('../img/hero-besol.jpg') center 45%/cover no-repeat; }

/* Energy & Utilities solution (D116): hero. */
.fo-hero--eusol::before { background:url('../img/hero-eusol.jpg') center 55%/cover no-repeat; }

/* Disaster Recovery solution (D117): hero. */
.fo-hero--drsol::before { background:url('../img/hero-drsol.jpg') center 50%/cover no-repeat; }

/* Modular & Micro DC solution (D119): hero. */
.fo-hero--mdcsol::before { background:url('../img/hero-mdcgen.jpg') center 50%/cover no-repeat; }
/* DR Containers (D121): container-deployment hero on the generic T4 page. */
.fo-hero--sol-dr-containers::before { background:url('../img/hero-drcont.jpg') center 55%/cover no-repeat; }

/* Prefab & Container DC solution (D122): hero. */
.fo-hero--pcdsol::before { background:url('../img/hero-pcdsol.jpg') center 55%/cover no-repeat; }

/* Hybrid Site Power solution (D124): hero. */
.fo-hero--hspsol::before { background:url('../img/hero-hspsol.jpg') center 55%/cover no-repeat; }

/* Solar Systems solution (D126): hero. */
.fo-hero--slrsol::before { background:url('../img/hero-slrsol2.jpg') center 55%/cover no-repeat; }

/* Converged Power solution (D127): hero. */
.fo-hero--cvpsol::before { background:url('../img/hero-cvpsol.jpg') center 55%/cover no-repeat; }

/* Micro DC solution (D130): hero. */
.fo-hero--micsol::before { background:url('../img/hero-micsol2.jpg') center 50%/cover no-repeat; }

/* AI Data Center solution (D134): hero. */
.fo-hero--aisol::before { background:url('../img/hero-aisol2.jpg') center 50%/cover no-repeat; }

/* Company page (D140): hero. */
.fo-hero--cosol::before { background:url('../img/hero-company.jpg') center 50%/cover no-repeat; }

/* Resources page (D153): hero. */
.fo-hero--ressol::before { background:url('../img/hero-resources.jpg') center 55%/cover no-repeat; }
.fo-hero--ressol::after { background: linear-gradient(90deg, rgba(10,11,14,.92) 0%, rgba(10,11,14,.72) 38%, rgba(10,11,14,.42) 70%, rgba(10,11,14,.18) 100%); }

/* Home impact band (D161): full-bleed bright image + floating message card. */
.fo-impact { position:relative; background: url('../img/home-impact.jpg') center 45%/cover no-repeat; }
.fo-impact__inner { display:flex; justify-content:flex-end; padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.fo-impact__card { background:#fff; border-radius:14px; padding: clamp(1.75rem, 4vw, 3rem); max-width: 620px; box-shadow: var(--fo-shadow-lg); }
.fo-impact__card h2 { margin-bottom: 1rem; }
.fo-impact__card p { color: var(--fo-text-soft); margin-bottom: 1.75rem; }
@media (max-width: 760px) { .fo-impact__inner { justify-content:stretch; } .fo-impact__card { max-width:none; } }

/* Solutions showcase (D162): full-bleed crossfade slides + bottom tab bar. */
.fo-showcase { position:relative; min-height: clamp(540px, 74vh, 740px); overflow:hidden; background: var(--fo-ink); }
.fo-showcase__slide { position:absolute; inset:0; opacity:0; transition:opacity .9s var(--fo-ease); background-size:cover; background-position:center; }
.fo-showcase__slide::after { content:""; position:absolute; inset:0; background:
  linear-gradient(270deg, rgba(10,11,14,.88) 0%, rgba(10,11,14,.55) 40%, rgba(10,11,14,.18) 78%, rgba(10,11,14,.40) 100%),
  linear-gradient(0deg, rgba(10,11,14,.72) 0%, rgba(10,11,14,0) 38%); }
.fo-showcase__slide.is-active { opacity:1; z-index:1; }
.fo-showcase__content { position:relative; z-index:2; padding-top: clamp(3.5rem, 3rem + 5vw, 6.5rem); max-width:660px; margin-inline-start:auto; padding-inline-end: clamp(1rem,4vw,4rem); opacity:0; transform:translateY(14px); transition:opacity .7s var(--fo-ease) .3s, transform .7s var(--fo-ease) .3s; }
.fo-showcase__slide.is-active .fo-showcase__content { opacity:1; transform:none; }
.fo-showcase__content h2 { color:#fff; }
.fo-showcase__content p { color:#d9dde5; margin:1rem 0 1.75rem; max-width:56ch; }
.fo-showcase__rail { position:absolute; left: clamp(1rem,3.5vw,3.5rem); top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:.35rem; }
.fo-showcase__item { appearance:none; background:none; border:0; border-inline-start:2px solid rgba(255,255,255,.28); color:rgba(255,255,255,.66); font:inherit; text-align:left; padding:.55rem 0 .55rem .95rem; cursor:pointer; position:relative; display:flex; align-items:baseline; gap:.6rem; }
.fo-showcase__item:hover { color:#fff; }
.fo-showcase__num { font-size:.72rem; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.45); }
.fo-showcase__name { font-weight:600; font-size:.95rem; white-space:nowrap; }
.fo-showcase__prog { position:absolute; left:-2px; top:0; bottom:0; width:2px; overflow:hidden; }
.fo-showcase__prog i { position:absolute; left:0; top:0; width:100%; height:0; background: var(--fo-crimson); display:block; }
.fo-showcase__item.is-active { color:#fff; }
.fo-showcase__item.is-active .fo-showcase__num { color:#ff8a90; }
.fo-showcase__item.is-active .fo-showcase__prog i { animation: fo-railfill 6s linear forwards; }
@keyframes fo-railfill { from { height:0; } to { height:100%; } }
@media (max-width: 1100px) {
  .fo-showcase__rail { top:auto; bottom:.9rem; right:0; left:0; transform:none; flex-direction:row; justify-content:center; gap:.5rem; padding:0 1rem; flex-wrap:wrap; }
  .fo-showcase__item { border-inline-start:0; border-block-start:2px solid rgba(255,255,255,.28); padding:.5rem .4rem 0; }
  .fo-showcase__name { display:none; }
  .fo-showcase__prog { left:0; right:0; top:-2px; bottom:auto; height:2px; width:auto; }
  .fo-showcase__prog i { height:100%; width:0; }
  .fo-showcase__item.is-active .fo-showcase__prog i { animation: fo-railfill-h 6s linear forwards; }
}
@keyframes fo-railfill-h { from { width:0; } to { width:100%; } }
@media (prefers-reduced-motion: reduce) {
  .fo-showcase__slide { transition:none; }
  .fo-showcase__item.is-active .fo-showcase__prog i { animation:none; height:100%; width:100%; }
}

/* Ken Burns motion for hero images + showcase slides (D163). */
@keyframes fo-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.fo-hero--product::before, .fo-hero--home::before { animation: fo-kenburns 16s var(--fo-ease) forwards; will-change: transform; }
.fo-showcase__slide::before { content:""; position:absolute; inset:0; background-image:inherit; background-size:cover; background-position:center; }
.fo-showcase__slide.is-active::before { animation: fo-kenburns 7s linear forwards; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .fo-hero--product::before, .fo-hero--home::before, .fo-showcase__slide.is-active::before { animation: none; }
}

/* Portfolio tiles: industry backdrops + bare line icons (D167, fixed D168: dedicated bg layer, tile ::before/::after stay the accent bar and arrow). */
.fo-tile__bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.fo-tile__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.44) 100%); transition: .3s var(--fo-ease); }
.fo-tile--bg:hover .fo-tile__bg::after { background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.30) 100%); }
.fo-tile--bg > *:not(.fo-tile__bg) { position:relative; z-index:2; }
.fo-tile--bg::before, .fo-tile--bg::after { z-index:3; }
.fo-tile--bg .fo-tile__icon { width:auto; height:auto; border-radius:0; background:none; }
.fo-tile--bg .fo-tile__icon svg { width:34px; height:34px; }
.fo-tile--bg:hover .fo-tile__icon { background:none; color: var(--fo-crimson-deep); }
.fo-tile--bg-dc-power-systems .fo-tile__bg { background-image:url('../img/tile-bg-dc.jpg'); }
.fo-tile--bg-ups-systems .fo-tile__bg { background-image:url('../img/tile-bg-ups.jpg'); }
.fo-tile--bg-batteries .fo-tile__bg { background-image:url('../img/tile-bg-batt.jpg'); }
.fo-tile--bg-cooling-systems .fo-tile__bg { background-image:url('../img/tile-bg-cool.jpg'); }
.fo-tile--bg-it-racks-smart-pdu .fo-tile__bg { background-image:url('../img/tile-bg-racks.jpg'); }
.fo-tile--bg-dcim-monitoring .fo-tile__bg { background-image:url('../img/tile-bg-dcim.jpg'); }
.fo-tile--bg-diesel-generators .fo-tile__bg { background-image:url('../img/tile-bg-gen.jpg'); }
.fo-tile--bg-fiber-optics-accessories .fo-tile__bg { background-image:url('../img/tile-bg-fiber.jpg'); }
.fo-tile--bg-remote-monitoring .fo-tile__bg { background-image:url('../img/tile-bg-rms.jpg'); }

/* Stats band, Idea 1 (D169): faint dotted world + crimson ticks + count-up. */
.fo-stats--map { background: var(--fo-ink-2) url('../img/fo-map-faint.svg') center/88% no-repeat; }
.fo-stats--map .fo-reveal::before { content:""; display:block; width:26px; height:3px; background: var(--fo-crimson); margin:0 auto .85rem; }

/* Footer button legibility (D170): the .fo-footer a tint must not gray the CTA. */
.fo-footer .fo-btn { color:#fff; }

/* Hub heroes (D180). */
.fo-hero--prodhub::before { background:url('../img/hero-products.jpg') center 45%/cover no-repeat; }
.fo-hero--prodhub::after { background: linear-gradient(90deg, rgba(10,11,14,.92) 0%, rgba(10,11,14,.72) 38%, rgba(10,11,14,.42) 70%, rgba(10,11,14,.18) 100%); }
.fo-hero--solhub::before { background:url('../img/hero-solutions.jpg') center 60%/cover no-repeat; }
.fo-hero--solhub::after { background: linear-gradient(90deg, rgba(10,11,14,.88) 0%, rgba(10,11,14,.60) 40%, rgba(10,11,14,.22) 75%, rgba(10,11,14,.10) 100%); }

/* Accessibility skip-link (D182): hidden until keyboard focus. */
.fo-skip { position:absolute; top:-48px; left:12px; z-index:200; background: var(--fo-crimson); color:#fff; font-weight:600; padding:.65rem 1.1rem; border-radius:0 0 10px 10px; text-decoration:none; transition: top .2s var(--fo-ease); }
.fo-skip:focus { top:0; color:#fff; outline:2px solid #fff; outline-offset:2px; }

/* Content protection (D189): deter casual copying. */
body { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
input, textarea, select { -webkit-user-select:text; -moz-user-select:text; user-select:text; }
img, svg { -webkit-user-drag:none; user-drag:none; }