/* Fortitude21 — buyer-facing site
   Palette: navy #0F2A44 with orange #F07C1E accent. */

:root {
  --navy: #0F2A44;
  --navy-dark: #071A2B;
  --navy-mid: #38566E;
  --orange: #F07C1E;
  --orange-dark: #D2680E;   /* backgrounds / hover fills */
  --orange-text: #A85309;   /* orange for TEXT on light backgrounds — 5.4:1 on white.
                               --orange-dark is only 3.7:1 and fails WCAG AA. */
  --ink: #17222C;
  --body: #4A5A68;
  --line: #DCE3E9;
  --light: #E8EDF2;
  --paper: #F6F8FA;
  --white: #fff;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;

  /* ---------- motion ----------
     Custom curves, not the weak CSS built-ins. --ease-out is the strong
     "instant response" curve for entrances and UI feedback; --ease-out-soft is
     gentler for scroll reveals; --ease-in-out is for on-screen movement.
     Durations are kept short: UI feedback <200ms, reveals ~600ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --shadow-sm: 0 1px 2px rgba(7,26,43,.07), 0 2px 6px rgba(7,26,43,.05);
  --shadow-md: 0 10px 30px rgba(7,26,43,.11);
  --shadow-lg: 0 18px 44px rgba(7,26,43,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--orange-text); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ink);
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 700; text-transform: uppercase; }
h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; text-transform: uppercase; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 700;
  /* Default is the light-background case. Plain --orange is only 2.6:1 on white. */
  color: var(--orange-text);
  margin-bottom: 14px;
}
/* On navy grounds the brand orange reads correctly (5.3:1) and is preferred. */
.hero .eyebrow,
section.dark .eyebrow,
.closer .eyebrow { color: var(--orange); }
.lede { font-size: 18px; color: var(--body); max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s var(--ease-out), color .16s var(--ease-out),
              border-color .16s var(--ease-out), transform .12s var(--ease-out),
              box-shadow .18s var(--ease-out);
  border: 2px solid transparent;
}
/* Press feedback: the button acknowledges the click. scale(0.97) is subtle but
   unmistakable — the interface confirms it heard you. */
.btn:active { transform: scale(.97); }
/* Site convention: orange focus ring on light/navy grounds; the orange fill
   button flips to a navy ring so it is not orange-on-orange. */
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-primary:focus-visible { outline-color: var(--navy); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-dark); }
/* Hover lift only where a pointer can hover — never on touch (where :hover
   sticks after a tap). Transform + a warm glow on the primary CTA. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(240,124,30,.34); }
  .btn-dark:hover, .btn-ghost:hover, .btn-ghost-dark:hover { transform: translateY(-1px); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- header ---------- */
header.site {
  background: var(--navy-dark);
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: box-shadow .22s var(--ease-out);
}
/* motion.js adds .scrolled once the page leaves the top, so the header lifts
   off the content with a shadow instead of sitting flush against it. */
header.site.scrolled { box-shadow: 0 6px 24px rgba(4,14,24,.55); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding-top: 14px; padding-bottom: 14px;
}
.brandmark { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brandmark .mark { width: 34px; height: 34px; flex-shrink: 0; }
.brandmark .wordmark {
  font-family: var(--head); font-weight: 700; font-size: 25px;
  color: #fff; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
}
.brandmark .wordmark span { color: var(--orange); }

/* ---------- language dropdown + Japanese ---------- */
.lang-select-wrap { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.lang-globe { width: 13px; height: 13px; color: rgba(255,255,255,.5); flex-shrink: 0; display: inline-flex; }
.lang-globe svg { width: 13px; height: 13px; display: block; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 9px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 4px;
  color: rgba(255,255,255,.85); font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  line-height: 1; padding: 6px 22px 6px 9px; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lang-select:hover { border-color: rgba(255,255,255,.45); background-color: rgba(255,255,255,.1); }
.lang-select:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(240,124,30,.35); }
.lang-select option { background: var(--navy-dark); color: #fff; }
/* Japanese: swap to a CJK-capable family — Barlow Condensed / Inter carry no kanji.
   Keep the FORTITUDE21 wordmark in the brand face (it is Latin). */
html.lang-ja {
  --head: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
html.lang-ja .brandmark .wordmark { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
html.lang-ja h1, html.lang-ja h2 { letter-spacing: .02em; }
html.lang-ja .eyebrow { letter-spacing: .08em; }

nav.main { display: flex; align-items: center; gap: 26px; }
nav.main a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  position: relative; transition: color .15s var(--ease-out);
}
nav.main a:hover { color: #fff; }
nav.main a.active { color: #fff; border-bottom-color: var(--orange); }
/* Hover underline wipes in from the left (desktop pointers only). Active links
   already carry the static orange border, so they are excluded to avoid a
   double rule; the mobile stacked menu has no hover, so it is excluded too. */
@media (hover: hover) and (pointer: fine) {
  nav.main a:not(.cta):not(.active)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--orange); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease-out);
  }
  nav.main a:not(.cta):not(.active):hover::after { transform: scaleX(1); }
}
nav.main a.cta { transition: background .16s var(--ease-out), transform .12s var(--ease-out); }
nav.main a.cta:active { transform: scale(.97); }
nav.main a.cta {
  background: var(--orange); color: #fff; padding: 11px 20px;
  border-radius: 3px; border-bottom: none; font-weight: 600;
}
nav.main a.cta:hover { background: var(--orange-dark); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 3px; padding: 8px 12px; font-size: 15px; cursor: pointer;
}

/* products dropdown */
.has-sub { position: relative; }
.has-sub .caret { font-size: 10px; opacity: .75; }
.submenu {
  position: absolute; top: 100%; left: -14px; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(7,26,43,.20);
  padding: 8px 0; z-index: 70;
  /* Origin-aware entrance: scales down from the top-left, anchored to the
     Products trigger rather than appearing from nowhere. visibility (not
     display) keeps it animatable; pointer-events guard stops the hidden menu
     from swallowing clicks. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.98); transform-origin: top left;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
/* Scoped under nav.main so these beat `nav.main a` (0,1,2), which sets white text.
   Without the nav.main prefix these links render white-on-white. */
nav.main .submenu a {
  display: block; padding: 10px 18px; color: var(--ink);
  font-size: 14.5px; border-bottom: none; white-space: nowrap; font-weight: 500;
}
nav.main .submenu a:hover { background: var(--paper); color: var(--orange-text); }
nav.main .submenu a.all {
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px;
  font-weight: 600; color: var(--orange-text);
}

/* product line badge */
.line-badge {
  display: inline-block; background: rgba(240,124,30,.16); color: var(--orange);
  border: 1px solid rgba(240,124,30,.5); border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; margin-bottom: 16px;
}
.prod-card .tagline {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-text); margin-bottom: 8px;
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(130% 120% at 78% 0%, #1B4468 0%, var(--navy) 45%, var(--navy-dark) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .11; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 62px);
}
/* PADDING TRAP: .hero is a <section>, so the generic `section { padding: 84px 0 }`
   applies to it as well. With the wrap's own 96px on top that was 180px of dead
   space between the header and the first line of the hero — the homepage opened on
   an empty band and you had to scroll to reach the headline. The wrap owns the
   hero's vertical rhythm; the section contributes nothing. */
.hero { padding: 0; }
.hero .wrap { position: relative; z-index: 2; padding-top: 58px; padding-bottom: 66px; }
.hero.slim .wrap { padding-top: 44px; padding-bottom: 48px; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero p.sub { color: rgba(255,255,255,.84); font-size: 19px; max-width: 56ch; margin-top: 20px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.hero-art { width: 100%; height: auto; }

/* The homepage hero art is a landscape range group (1135x800 cutout on transparency),
   not the old 3:4 portrait drawing, so its column gets more width and the image is
   allowed to bleed slightly past the wrap on the right. The cans are baseline aligned
   in the source, so a soft elliptical shadow under the group is what stops them
   looking like they are floating on the navy. */
.hero.has-range .hero-grid { grid-template-columns: 1fr 1.02fr; gap: 40px; }
.hero-range { position: relative; margin-right: -34px; }
.hero-range::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 2%; height: 34px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 72%);
  filter: blur(6px); z-index: -1;
}
.hero-range .hero-art { display: block; }
@media (max-width: 900px) {
  .hero.has-range .hero-grid { grid-template-columns: 1fr; }
  .hero-range { margin-right: 0; max-width: 560px; }
}
.crumb { font-size: 13.5px; color: rgba(255,255,255,.62); margin-bottom: 12px; }
.crumb a { color: rgba(255,255,255,.62); text-decoration: none; }
.crumb a:hover { color: #fff; }

/* ---------- trust strip ---------- */
.trust { background: var(--navy-dark); border-top: 1px solid rgba(255,255,255,.08); }
.trust .wrap {
  /* Sized for FIVE items across at desktop. At 210px min / 30px gap the fifth
     wrapped alone onto a second row, which reads as a mistake. 190/22 gives
     5x190 + 4x22 = 1038 inside the 1128px content box. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px 22px; padding-top: 26px; padding-bottom: 26px;
}
.trust li { list-style: none; color: rgba(255,255,255,.78); font-size: 13.8px; display: flex; gap: 10px; }
.trust ul { display: contents; margin: 0; padding: 0; }
.trust .tick { color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ---------- sections ---------- */
section { padding: 84px 0; }
section.tight { padding: 60px 0; }
section.paper { background: var(--paper); }
section.dark { background: var(--navy); color: rgba(255,255,255,.82); }
section.dark h2, section.dark h3 { color: #fff; }
section.dark .lede { color: rgba(255,255,255,.8); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { text-align: center; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* min() guards the track so cards never exceed a narrow viewport (320/360px phones). */
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 26px; }

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 30px 28px; position: relative;
}
.card.on-dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; font-size: 15.5px; }
.card .num {
  font-family: var(--head); font-size: 15px; font-weight: 700;
  color: var(--orange); letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.icon { width: 40px; height: 40px; color: var(--orange); margin-bottom: 16px; }

/* buyer cards: full-bleed photo banner above the text */
.card.buyer { padding: 0; overflow: hidden; }
.card.buyer > img {
  display: block; width: 100%; height: auto; aspect-ratio: 490 / 262;
  object-fit: cover; border-bottom: 1px solid rgba(255,255,255,.12);
}
.card.buyer .card-body { padding: 26px 26px 28px; }
.card.buyer .card-body h3 { margin-top: 0; }

/* ---------- product ---------- */
.prod-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.prod-figure {
  background: linear-gradient(160deg, #24405C, var(--navy-dark));
  border-radius: 5px; padding: 46px; display: grid; place-items: center;
}
/* Multi-image variant: primary shot with a thumbnail strip beneath. */
.prod-figure.has-gallery { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.prod-figure.has-gallery .prod-main {
  width: 250px; height: 250px; object-fit: contain;
  background: #fff; border-radius: 4px; padding: 10px;
}
.prod-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.prod-thumb {
  padding: 4px; background: #fff; border: 2px solid transparent; border-radius: 4px;
  cursor: pointer; line-height: 0; transition: border-color .15s, transform .15s;
}
.prod-thumb img { width: 64px; height: 64px; object-fit: contain; }
.prod-thumb:hover { transform: translateY(-2px); }
.prod-thumb.active { border-color: var(--orange); }
.prod-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.prod-card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
/* Stretched link: the single CTA inside each tile is expanded to cover the
   whole card, so the entire card is one big click target instead of a small
   button. The visible button copy stays as the accessible label. */
.prod-card .btn-row .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod-card .fig {
  background: linear-gradient(160deg, #24405C, var(--navy-dark));
  padding: 34px; display: grid; place-items: center;
  overflow: hidden;
}
.prod-card .fig img, .prod-card .fig svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(240,124,30,.45); }
  .prod-card:hover .fig img, .prod-card:hover .fig svg { transform: scale(1.045); }
}
.prod-card .body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.prod-card .body p { font-size: 15px; flex: 1; }

table.spec { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15.5px; }
table.spec th, table.spec td { text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line); }
table.spec th { color: var(--ink); font-weight: 600; width: 46%; }
table.spec td { font-variant-numeric: tabular-nums; }
/* De-emphasised but still legible: #98A6B2 was only 2.5:1 on white. This is 5.0:1. */
/* Dangerous-goods / contents caution shown to the buyer. Stays on the live site. */
.spec-warn {
  margin-top: 18px; font-size: 14.5px; color: #6B3410;
  background: #FDF0DC; border-left: 3px solid #C8791A; padding: 14px 17px; border-radius: 0 3px 3px 0;
}
/* Internal reminder. Delete the 
/* ---------- faq ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--head); font-size: 21px; font-weight: 600; color: var(--ink); list-style: none;
  transition: color .15s var(--ease-out);
}
.faq summary:hover { color: var(--orange-text); }
.faq summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 18px;
  color: var(--orange); font-size: 27px; font-family: var(--sans); font-weight: 300;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 22px; font-size: 15.5px; max-width: 74ch; }

/* ---------- closer ---------- */
.closer { background: var(--orange); color: #fff; text-align: center; }
.closer h2 { color: #fff; }
.closer p { color: rgba(255,255,255,.93); max-width: 56ch; margin: 14px auto 0; }
.closer .btn-row { justify-content: center; }
.closer .btn-dark { background: var(--navy-dark); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.detail { display: flex; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.detail .ic { color: var(--orange); flex-shrink: 0; width: 21px; height: 21px; margin-top: 3px; }
.detail strong { display: block; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.detail a { color: var(--body); text-decoration: none; }
.detail a:hover { color: var(--orange-text); }

form.enquiry { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 32px 30px; }
form.enquiry label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; margin: 18px 0 7px; }
form.enquiry label:first-of-type { margin-top: 0; }
form.enquiry input, form.enquiry select, form.enquiry textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 3px; font-family: var(--sans); font-size: 15.5px; color: var(--ink); background: #fff;
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
form.enquiry textarea { min-height: 118px; resize: vertical; }
form.enquiry .btn { margin-top: 22px; width: 100%; text-align: center; border: none; cursor: pointer; font-size: 15px; }
/* #7A8894 was 3.4:1 on the form's paper background. This is 4.9:1. */
.form-note { font-size: 13px; color: #5E6C78; margin-top: 14px; }

/* ---------- footer ---------- */
footer.site { background: var(--navy-dark); color: rgba(255,255,255,.66); padding: 66px 0 0; font-size: 14.5px; }
footer.site .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 42px; }
footer.site h4 {
  color: #fff; font-family: var(--sans); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; margin-bottom: 17px; font-weight: 700;
}
footer.site a { color: rgba(255,255,255,.66); text-decoration: none; }
footer.site a:hover { color: var(--orange); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.site .fbrand { margin-bottom: 16px; }
footer.site .legal {
  margin-top: 54px; border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.46);
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero-grid, .two-col, .prod-hero, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero .wrap { padding-top: 40px; padding-bottom: 48px; }
  .hero.slim .wrap { padding-top: 30px; padding-bottom: 34px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  section { padding: 62px 0; }
  nav.main { display: none; }
  nav.main.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-dark); padding: 10px 26px 22px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  nav.main.open a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  nav.main.open a.cta { text-align: center; margin-top: 12px; border-bottom: none; }
  /* dropdown flattens into the stacked mobile menu */
  .has-sub { position: static; }
  .submenu {
    position: static; display: block; min-width: 0; background: none;
    border: none; box-shadow: none; padding: 0 0 0 14px;
    /* undo the desktop animated-dropdown state so the flattened menu is simply
       always visible in the stacked mobile nav */
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
  }
  nav.main .submenu a { color: rgba(255,255,255,.7); padding: 11px 0; font-size: 13.5px; }
  nav.main .submenu a:hover { background: none; color: #fff; }
  nav.main .submenu a.all { border-top: none; margin-top: 0; padding-top: 11px; color: rgba(255,255,255,.7); }
  .has-sub .caret { display: none; }
  .nav-toggle { display: block; }
  header.site .wrap { position: relative; }
}
@media (max-width: 560px) {
  footer.site .cols { grid-template-columns: 1fr; }
  .prod-figure { padding: 30px; }
}

/* ---------- WhatsApp floating button ----------
   Colour: #0E7A6B, not WhatsApp's signature #25D366.
   White on #25D366 is 1.98:1 and fails even the 3:1 non-text bar, let alone the
   4.5:1 the "Chat on WhatsApp" label needs. #0E7A6B sits in WhatsApp's own
   teal-green family and measures 5.23:1 against white. The glyph carries the
   recognition; the hue does not have to.

   z-index 50 keeps it BELOW the sticky header (60) and its submenu (70), so an
   open mobile menu covers the button instead of the button punching through it. */
.wa-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  background: #0E7A6B;
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans, inherit);
  font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab:hover { background: #0B6558; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(14, 122, 107, .55); }

/* Under 600px the label costs more than it earns: collapse to a round icon so the
   button never sits on top of body copy on a narrow screen. */
@media (max-width: 600px) {
  .wa-fab { padding: 14px; border-radius: 50%; gap: 0; }
  .wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab:hover { transition: none; transform: none; }
}

/* ---------- sizing calculator ---------- */
/* LAYOUT TRAP, do not undo: the mode switch must NOT be two 50%-width tabs.
   The body below is a two-column grid, so full-width halves line up exactly with
   the columns and read as column headings — "Water" over the inputs, "Fuel" over
   the results. It was reported as confusing for precisely that reason. Keep the
   switch as a compact segmented pill on its own navy bar, sized to its content,
   so it cannot align with anything underneath it. */
.calc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }

.calc-switch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
  padding: 17px 28px; background: var(--navy);
}
.calc-switch-label {
  font-family: var(--head); font-size: 20px; font-weight: 600;
  letter-spacing: .01em; color: #fff;
}
.calc-modes {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, .13); border-radius: 999px;
}
.calc-modes button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 010px; padding-inline: 20px; border: 0; border-radius: 999px;
  background: transparent; color: #DCE6EF; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
}
.calc-modes button svg { width: 18px; height: 18px; flex: none; }
.calc-modes button:hover { color: #fff; }
.calc-modes button[aria-selected="true"] { background: #fff; color: var(--navy); }
.calc-modes button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.calc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.calc-inputs { padding: 28px; border-right: 1px solid var(--line); }
.calc-outwrap { padding: 28px; background: var(--paper); }
.calc-out { }
.calc-pane-title {
  font-family: var(--head); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--body);
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.calc-intro { font-size: 15px; margin: 0 0 20px; }

.calc label, .calc legend { display: block; font-weight: 700; font-size: 14px; margin: 18px 0 6px; }
.calc-inputs > label:first-of-type { margin-top: 0; }
.calc select, .calc input[type="number"] {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.calc select:focus-visible, .calc input:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.calc input.is-locked { background: var(--paper); color: var(--body); }
.calc-row { display: flex; align-items: center; gap: 10px; }
.calc-suffix { font-size: 14px; color: var(--body); white-space: nowrap; flex: none; }
.calc-hint { font-size: 13.5px; color: var(--body); margin: 6px 0 0; line-height: 1.5; }
.calc-check { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14.5px; }
.calc-check input { width: auto; }
.calc-units { border: 0; padding: 0; margin: 18px 0 0; }
.calc-units legend { margin-bottom: 6px; }
.calc-units label { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 0 0; font-weight: 500; }
.calc-units input { width: auto; }

.calc-headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 16px; }
.calc-stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.calc-stat span { display: block; font-family: var(--head, inherit); font-size: 30px; line-height: 1.05; font-weight: 700; color: var(--navy, #0F2A44); }
.calc-stat small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted, #5E6C78); }
.calc-stat.is-hero { background: var(--navy, #0F2A44); border-color: var(--navy, #0F2A44); }
.calc-stat.is-hero span { color: #fff; font-size: 40px; }
.calc-stat.is-hero small { color: #C9D6E2; }
.calc-stat.is-pending span { color: var(--muted, #5E6C78); }

.calc-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.5px; }
.calc-table th, .calc-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc-table th { font-weight: 700; width: 42%; padding-right: 14px; }
.calc-canline { margin: 18px 0 0; font-size: 15px; }
.calc-alts { margin-top: 20px; }
.calc-alts h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #5E6C78); }
.calc-alts ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.calc-alts li { margin-bottom: 4px; }
.calc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.calc-cta .btn { flex: 1 1 auto; text-align: center; cursor: pointer; font: inherit; font-weight: 700; }
.calc-empty { color: var(--muted, #5E6C78); font-size: 15px; }
.calc-foot { font-size: 13.5px; color: var(--muted, #5E6C78); margin-top: 18px; max-width: 760px; }

@media (max-width: 800px) {
  .calc-inputs { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .calc-switch { padding: 15px 20px; }
  .calc-switch-label { font-size: 18px; }
  .calc-modes { width: 100%; }
  .calc-modes button { flex: 1 1 0; justify-content: center; padding-inline: 12px; }
  .calc-inputs, .calc-outwrap { padding: 20px; }
  .calc-stat.is-hero span { font-size: 34px; }
}

/* ---------- calculator: market-entry compliance block ----------
   Tier colours are semantic, not decorative: 'required' must read as a hard stop,
   'route' as an opportunity. All four text/background pairs clear WCAG AA. */
.calc-compliance { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--line); }
.calc-compliance h4 { margin: 0 0 4px; font-size: 21px; }
.calc-compliance h5 {
  margin: 20px 0 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--body);
}
.req-count { margin: 0; font-size: 14px; color: var(--body); }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-list li {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 6px; padding: 13px 15px;
}
.req-list p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.req-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.req-code { font-weight: 700; color: var(--ink); font-size: 15px; }
.req-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.req-need { color: var(--ink); }
.req-need strong { font-weight: 700; }

.req-list li.is-req    { border-left-color: #B3261E; }
.req-list li.is-req    .req-tag { background: #FBE9E7; color: #8C1D18; }
.req-list li.is-cond   { border-left-color: #A85309; }
.req-list li.is-cond   .req-tag { background: #FCEEE0; color: #8A4408; }
.req-list li.is-route  { border-left-color: #0E7A6B; }
.req-list li.is-route  .req-tag { background: #E2F2EF; color: #0A5B50; }
.req-list li.is-info   { border-left-color: var(--navy-mid); }
.req-list li.is-info   .req-tag { background: var(--light); color: var(--navy); }

.req-disclaimer {
  margin: 18px 0 0; padding: 13px 15px; border-radius: 6px;
  background: var(--light); color: var(--ink);
  font-size: 13.5px; line-height: 1.6;
}

/* ---------- factory photo grid (Capabilities) ---------- */
.factory-grid {
  margin-top: 34px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.factory-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.factory-grid img { display: block; width: 100%; height: 200px; object-fit: cover; }
.factory-grid figcaption { padding: 11px 14px; font-size: 13.5px; color: var(--body); border-top: 1px solid var(--line); }

/* ---------- full-bleed photo banner ----------
   CONTRAST TRAP, measured — do not go back to a vertical gradient.
   The caption text block is ~150px tall, so with a `to top` gradient the eyebrow
   (the topmost line) landed 81.5% up the caption box where the fade was only ~0.30
   alpha. The brightest pixel behind it was pure white, putting brand orange at
   roughly 1.6:1. Raising the vertical gradient enough to fix that flattens the
   whole photograph, which defeats the point of a banner.

   The gradient is therefore HORIZONTAL: near-solid navy behind the left-aligned
   text, clearing to almost nothing on the right so the image still reads. Worst
   case (pure white photo under the text) measures 5.47:1 for the orange eyebrow.
   A second, gentle vertical pass grounds the bottom edge. */
.banner { position: relative; overflow: hidden; background: var(--navy); }
.banner > img { display: block; width: 100%; height: 460px; object-fit: cover; }
.banner-tight > img { height: 320px; }
.banner-cap {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 0 0 36px;
  color: #fff;
  background:
    linear-gradient(to right,
      rgba(7,26,43,.965) 0%, rgba(7,26,43,.945) 38%,
      rgba(7,26,43,.62) 62%, rgba(7,26,43,.10) 100%),
    linear-gradient(to top, rgba(7,26,43,.55) 0%, rgba(7,26,43,0) 46%);
}
.banner-cap .wrap { width: 100%; }
.banner-cap h2 { color: #fff; margin: 6px 0 8px; max-width: 620px; }
.banner-cap p { color: #E2EAF2; max-width: 560px; margin: 0; font-size: 16px; }
/* Constrained so the box cannot extend past the dark side of the gradient. It is a
   block element, so without this it spans the full wrap even though the glyphs stop
   early — which makes the contrast measurement (and any future hover/focus ground)
   run out over the clear part of the photo. */
.banner-cap .eyebrow { color: var(--orange); max-width: 620px; }
.banner-note { font-size: 14.5px; color: #D5E0EA; }
.banner-tight .banner-cap { padding: 0 0 22px; }
@media (max-width: 700px) {
  .banner > img { height: 300px; }
  .banner-tight > img { height: 210px; }
}

/* ---------- capabilities: numbered process sequence ---------- */
.process { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.process > li {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
/* Alternate the image side so a long sequence does not read as a list of rows. */
.process > li:nth-child(even) .process-img { order: 2; }
.process-img { position: relative; }
.process-img img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.process-n {
  position: absolute; top: 0; left: 0; padding: 9px 15px;
  background: var(--orange); color: #fff;
  font-family: var(--head); font-size: 19px; font-weight: 700; line-height: 1;
}
.process-txt { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.process-txt h3 { margin: 0 0 8px; }
.process-txt p { margin: 0; font-size: 15px; }
@media (max-width: 640px) {
  .process > li:nth-child(even) .process-img { order: 0; }
  .process-txt { padding: 20px; }
}

/* Below 640px the caption block grows taller than the banner image (measured: 317px
   of text over a 300px photo at 320px wide), so the overlay would clip its own top.
   Drop out of the overlay and stack it under the image on the navy ground instead. */
@media (max-width: 640px) {
  .banner-cap {
    position: static; background: var(--navy-dark, #071A2B);
    padding: 24px 0 26px;
  }
  .banner-tight .banner-cap { padding: 18px 0 20px; }
}

/* ---------- About: text beside the showroom photo ---------- */
/* .two-col is 1fr 1fr; the copy block here needs the larger share or the
   paragraphs set to a cramped measure next to a wide landscape photo. */
.two-col-wide { grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.photo-card { margin: 0; }
.photo-card img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
}
.photo-card figcaption {
  margin-top: 11px; font-size: 13.5px; color: var(--body); line-height: 1.5;
}
@media (max-width: 860px) {
  .two-col-wide { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- homepage FAQ block ---------- */
/* Constrained measure: the answers are long, and full-bleed lines on a wide
   homepage are unreadable. Centred so it does not look orphaned in the section. */
.faq-list { max-width: 900px; margin: 34px auto 0; }
.faq-list .faq:first-child { border-top: 1px solid var(--line); }

/* The header is sticky at ~74px, so a jump to #faqs from the footer link lands with
   the section heading tucked underneath it. scroll-margin-top offsets the landing. */
#faqs { scroll-margin-top: 92px; }

/* Provenance line under a spec table: these are the factory's figures, not ours. */
.spec-source {
  margin-top: 16px; padding: 12px 15px; border-radius: 6px;
  background: var(--light); color: var(--ink);
  font-size: 13.5px; line-height: 1.6;
}

/* ---------- product code ---------- */
/* Monospace: a part number is copied into an order form, so 0/O and 1/l must be
   distinguishable. Tracking is widened for the same reason. */
.prod-code {
  margin: 10px 0 0; font-size: 13px; letter-spacing: .04em;
  color: rgba(255,255,255,.72); text-transform: uppercase;
}
.prod-code span {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 14.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--orange); margin-left: 8px; text-transform: none;
}
.card-code {
  display: inline-block; margin: 0 0 8px;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--orange-text);
}
table.spec td strong { font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace; letter-spacing: .05em; }

/* ---------- enquiry form actions ---------- */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.form-actions .btn { cursor: pointer; font: inherit; font-weight: 700; }
.btn-ghost-dark {
  background: transparent; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 4px; padding: 13px 22px; text-decoration: none;
}
.btn-ghost-dark:hover { background: var(--navy); color: #fff; }
.btn-plain {
  background: transparent; color: var(--body); border: 0; padding: 13px 10px;
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-plain:hover { color: var(--ink); }
.form-note { font-size: 13.5px; color: var(--body); margin-top: 12px; line-height: 1.55; }
.form-note.is-warn { color: #8C1D18; font-weight: 600; }
.form-note.is-ok { color: #0A5B50; font-weight: 600; }

/* ---------- locations map: left / right split ----------
   Map left, copy and the location list right. The dots on the list are the exact
   pin colours sampled out of the map artwork (#E46C24 orange, #1E5028 green), so
   the list reads as a legend for the map rather than as unrelated cards.
   Stacked full-width the map was 87% of the viewport and pushed the explanation
   below the fold; side by side they land together. */
.map-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
.map-figure { margin: 0; }
.map-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
/* Japanese location labels: the English labels are baked into the map image, so on
   /ja/ we cover them with matching grey (#e8e8e8) and show Japanese. Sizes are in
   cqw so the labels scale with the map. Hidden on English pages. */
.map-figure { position: relative; }
.map-ja { display: none; }
html.lang-ja .map-figure { container-type: inline-size; }
html.lang-ja .map-ja {
  display: block; position: absolute; inset: 0; pointer-events: none;
  border-radius: 10px; overflow: hidden;
}
.map-ja .mloc { position: absolute; background: #e8e8e8; line-height: 1.12; }
.map-ja .mloc b { display: block; font-weight: 700; font-size: 2.15cqw; letter-spacing: .01em; }
.map-ja .mloc span { display: block; font-weight: 500; font-size: 1.5cqw; color: #555; margin-top: .15em; }
.map-ja .m-cn { left: 72.3%; top: 20.2%; width: 24%; height: 9.4%; }
.map-ja .m-cn b { color: #2e7d32; }
.map-ja .m-vn { left: 67.8%; top: 58.6%; width: 19.6%; height: 9%; }
.map-ja .m-vn b { color: #e0691f; }
.map-ja .m-sg { left: 13.8%; top: 86.3%; width: 17%; height: 8.6%; }
.map-ja .m-sg b { color: #e0691f; }
.map-copy h2 { margin-bottom: 10px; }
.map-copy .lede { margin-bottom: 6px; }

.loc-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.loc { position: relative; padding-left: 26px; }
/* Dot sits on the cap-height of the heading, not the top of the box. */
.loc::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
}
.loc.is-orange::before { background: #E46C24; }
.loc.is-green::before  { background: #1E5028; }
.loc h3 { margin: 0 0 5px; font-size: 19px; }
.loc p { margin: 0; font-size: 14.7px; line-height: 1.6; }

@media (max-width: 900px) {
  .map-split { grid-template-columns: 1fr; gap: 30px; }
  /* Copy first on a phone: the heading has to introduce the map, not follow it. */
  .map-copy { order: -1; }
}

/* ============================================================================
   MOTION LAYER — scroll reveal, staggered entrances, reduced-motion guard
   ----------------------------------------------------------------------------
   Progressive enhancement. The reveal-hiding below is scoped under `html.js`,
   a class set by a tiny inline script in <head> BEFORE first paint. So:
     - no JavaScript  -> `.js` never added -> everything is visible, no flash
     - reduced motion -> hiding lives inside `no-preference`, so it never applies
   motion.js then toggles `.in` (and a per-item --reveal-delay for stagger) as
   each group scrolls into view. A failsafe in motion.js reveals everything if
   IntersectionObserver is missing or the observer never fires.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .cols-3 > *,
  .js .cols-2 > *,
  .js .process > li,
  .js .factory-grid > figure,
  .js .loc-list > .loc,
  .js .section-head {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s var(--ease-out-soft) var(--reveal-delay, 0ms),
                transform .6s var(--ease-out-soft) var(--reveal-delay, 0ms);
  }
  .js .cols-3 > *.in,
  .js .cols-2 > *.in,
  .js .process > li.in,
  .js .factory-grid > figure.in,
  .js .loc-list > .loc.in,
  .js .section-head.in {
    opacity: 1; transform: none;
  }

  /* Answer panel eases open rather than snapping when an FAQ is expanded. */
  .faq[open] p { animation: faqReveal .28s var(--ease-out) both; }
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Honour a request for less motion everywhere: strip movement and transitions,
   keep the interface fully usable (colour/opacity feedback stays, position and
   scale animation is removed). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .btn-primary:hover, .btn-dark:hover, .btn-ghost:hover, .btn-ghost-dark:hover,
  nav.main a.cta:active,
  .prod-card:hover, .prod-card:hover .fig img, .prod-card:hover .fig svg,
  .wa-fab:hover {
    transform: none !important;
  }
}