/* ==========================================================================
   Matsushi Power Technologies — global stylesheet
   Plain CSS, no build step. Edit the tokens below to re-skin the whole site.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #172737;
  --navy-800: #22384a;
  --navy-700: #2b4257;
  --navy-600: #3e627f;
  --amber:    #f5a623;   /* railway signal amber — primary accent */
  --amber-600:#d98b0c;
  --green:    #14996b;   /* "clear signal" green, used for status ticks */

  /* Neutrals */
  --ink:      #11202e;
  --slate:    #55677a;
  --slate-400:#8496a8;
  --line:     #e3e9f0;
  --bg:       #ffffff;
  --bg-soft:  #f5f8fb;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1140px;
  --gut: 24px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(23, 39, 55, .06), 0 2px 8px rgba(23, 39, 55, .05);
  --shadow-md: 0 4px 12px rgba(23, 39, 55, .08), 0 12px 32px rgba(23, 39, 55, .08);
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

/* Keyboard users must always see where they are */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --- 3. Layout helpers --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: linear-gradient(145deg, #172737 0%, #22384a 58%, #0e1a25 100%); color: #dce7f2; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--slate); font-size: 1.06rem; margin-bottom: 0; }
.section--navy .section-head p { color: #b8c9d8; }
.capability-points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  list-style: none; padding: 18px 0 0; margin: 20px auto 0; max-width: 900px;
  text-align: left;
}
.capability-points li {
  position: relative; margin: 0; padding-left: 24px;
  color: var(--ink); font-weight: 700; line-height: 1.35;
}
.capability-points li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(245,166,35,.16);
}

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-600); margin-bottom: 12px;
}
.section--navy .eyebrow { color: var(--amber); }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px; border: 2px solid transparent;
  font-weight: 600; font-size: .97rem; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--amber); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #ffb53d; box-shadow: var(--shadow-md); }
.btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--outline { border-color: var(--line); color: var(--navy-700); background: #fff; }
.btn--outline:hover { border-color: var(--navy-600); }

/* --- 5. Header / nav ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background:
    linear-gradient(135deg, rgba(23,39,55,.98), rgba(43,66,87,.98));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(14,26,37,.16);
  transition: transform .26s cubic-bezier(.2, .78, .2, 1), box-shadow .18s ease;
  will-change: transform;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--amber), rgba(255,255,255,.62), var(--green));
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 22px; }
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header.is-scrolled { box-shadow: 0 12px 30px rgba(14,26,37,.22); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark {
  flex: none; width: 40px; height: 40px; object-fit: contain;
  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.brand__mark--footer { width: 40px; height: 40px; margin-bottom: 12px; }
.brand__name { font-weight: 800; font-size: .98rem; color: #fff; letter-spacing: 0; line-height: 1.15; }
.brand__tag  { display: block; font-weight: 500; font-size: .66rem; letter-spacing: .08em;
               text-transform: uppercase; color: #c7d6e2; }

.nav__links {
  display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
}
.nav__links a {
  position: relative; display: block; padding: 5px 0; border-radius: 0;
  font-weight: 600; font-size: .92rem; color: #e7eff7;
  transition: color .15s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav__links a:hover { color: #fff; text-decoration: none; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] {
  color: #fff; font-weight: 700; background: transparent; box-shadow: none;
}
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__toggle {
  display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; background: rgba(255,255,255,.08); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 18px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 480px at 78% -12%, rgba(245,166,35,.18), transparent 62%),
    radial-gradient(760px 420px at 12% 8%, rgba(43,66,87,.56), transparent 64%),
    linear-gradient(165deg, #172737 0%, #2b4257 54%, #0e1a25 100%);
  color: #fff;
}
/* Faint rail-track motif — pure CSS, no image request */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px; opacity: .10;
  background-image: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 26px);
  mask-image: linear-gradient(to top, #000, transparent);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center;
  padding: clamp(64px, 9vw, 110px) var(--gut);
}
.hero__inner > * { min-width: 0; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 span { display: block; }
.hero__lead { font-size: 1.13rem; color: #dce8f3; max-width: 58ch; margin-bottom: 22px; }
.hero__points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  list-style: none; padding: 0; margin: 0 0 28px; max-width: 620px;
}
.hero__points li {
  margin: 0; padding: 12px 13px; border-radius: 8px;
  background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.hero__points strong {
  display: block; color: #fff; font-size: .86rem; line-height: 1.2; margin-bottom: 4px;
}
.hero__points span {
  display: block; color: #bed0df; font-size: .78rem; line-height: 1.45;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__note { font-size: .87rem; color: #9fb2c4; margin: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: rgba(245,166,35,.13); border: 1px solid rgba(245,166,35,.34);
  font-size: .83rem; font-weight: 600; color: #ffd08a;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* --- Hero showcase ------------------------------------------------------
   Ver. 3.0 cutout kept frameless, shifted right and tilted slightly.
   ------------------------------------------------------------------------ */
.showcase {
  position: relative; isolation: isolate; min-height: 600px;
  max-width: 620px; margin-inline: auto; overflow: visible;
}

.showcase::before,
.showcase::after { display: none; }

.showcase__plate {
  position: relative; z-index: 4;
  width: min(104%, 620px); overflow: visible;
  background: transparent; border: 0; box-shadow: none; padding: 0;
  --product-rest: translate(7%, -24px) rotate(5deg);
  --product-enter: translate(42%, -38px) rotate(13deg) scale(.96);
  --product-settle: translate(5%, -24px) rotate(4deg) scale(1.01);
  transform: var(--product-rest);
  transform-origin: 58% 52%;
  animation: product-enter 1.05s cubic-bezier(.18, .82, .24, 1) .12s both;
  will-change: transform, opacity;
}
.showcase__plate img {
  width: 100%; max-width: none; height: auto; border-radius: 0;
  filter:
    drop-shadow(0 22px 28px rgba(0,0,0,.46))
    drop-shadow(0 54px 58px rgba(0,0,0,.28));
}

/* Compact detail card tucks behind the product, so the device stays in front. */
.showcase__panel {
  position: relative; z-index: 2;
  width: min(76%, 390px); margin: -42px 28px 0 auto;
  transform: translateX(3%);
}
.showcase .device {
  padding: 52px 13px 13px; border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.showcase .device__bar {
  flex-direction: row; align-items: center; gap: 10px;
  padding-bottom: 8px; margin-bottom: 7px;
  font-size: .56rem; letter-spacing: .07em;
}
.showcase .device__row { padding: 7px 0; gap: 9px; }
.showcase .device__icon {
  display: grid; width: 27px; height: 27px; border-radius: 7px; font-size: .82rem;
}
.showcase .device__label { font-size: .76rem; }
.showcase .device__meta { font-size: .66rem; }
.showcase .device__dist { font-size: .76rem; }

@media (max-width: 900px) {
  .showcase { min-height: auto; max-width: 620px; padding-top: 48px; }
  .showcase::before { inset: 10% 0 38% 8%; }
  .showcase__plate {
    width: 100%;
    --product-rest: translateX(3%) rotate(4deg);
    --product-enter: translateX(34%) rotate(10deg) scale(.96);
    --product-settle: translateX(1%) rotate(3deg) scale(1.01);
  }
  .showcase__plate img { width: 100%; max-width: 100%; margin-inline: auto; }
  .showcase__panel {
    position: relative; left: auto; top: auto;
    width: 100%; margin: 12px 0 0; transform: none;
  }
  .showcase .device { padding: 18px; }
}

@keyframes product-enter {
  0% {
    opacity: 0;
    transform: var(--product-enter);
  }
  72% {
    opacity: 1;
    transform: var(--product-settle);
  }
  100% {
    opacity: 1;
    transform: var(--product-rest);
  }
}

/* Device mock panel in the hero */
.device {
  background: linear-gradient(160deg, #22384a, #0e1a25);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.device__bar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #9eb3c5; padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.device__live { display: inline-flex; align-items: center; gap: 6px; color: #6fe3b0; }
.device__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #37d99a;
  box-shadow: 0 0 0 0 rgba(55,217,154,.7); animation: ping 2s ease-out infinite;
}
@keyframes ping {
  70%  { box-shadow: 0 0 0 9px rgba(55,217,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(55,217,154,0); }
}
.device__row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px dashed rgba(255,255,255,.09);
}
.device__row:last-child { border-bottom: 0; }
.device__icon {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: rgba(245,166,35,.15); border: 1px solid rgba(245,166,35,.3);
}
.device__label { display: block; font-weight: 600; font-size: .95rem; color: #fff; }
.device__meta  { display: block; font-size: .8rem; color: #aabdcf; }
.device__dist  { margin-left: auto; font-weight: 700; font-size: .95rem; color: var(--amber); white-space: nowrap; }

/* --- 7. Stat strip ------------------------------------------------------- */
.stats { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 36px 0; }
.stat { text-align: center; }
.stat__num { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.03em; }
.stat__label { font-size: .84rem; color: var(--slate); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* --- 8. Cards ------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdae7; }
.card h3 { margin-bottom: 8px; color: var(--navy-900); }
.card p  { color: var(--slate); font-size: .96rem; margin-bottom: 0; }
.card__icon {
  width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: linear-gradient(145deg, #fff2da, #ffe3b0); border: 1px solid #f6dcae;
}
.card__icon--role {
  background: linear-gradient(145deg, #eef5fb, #fff2da);
  border-color: #d7e2ed;
}
.card__icon--role::before {
  content: ""; width: 25px; height: 25px; display: block;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.card__icon--production::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232b4257'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021h18'/%3E%3Cpath%20d='M5%2021V8l7-4v17'/%3E%3Cpath%20d='M19%2021V11l-7-4'/%3E%3Cpath%20d='M9%2021v-4h6v4'/%3E%3C/svg%3E");
}
.card__icon--software::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232b4257'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m16%2018%206-6-6-6'/%3E%3Cpath%20d='m8%206-6%206%206%206'/%3E%3Cpath%20d='m14%204-4%2016'/%3E%3C/svg%3E");
}
.card__icon--quality::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232b4257'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010Z'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E");
}
.card__icon--field::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232b4257'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s6-5.2%206-10a6%206%200%201%200-12%200c0%204.8%206%2010%206%2010Z'/%3E%3Ccircle%20cx='12'%20cy='11'%20r='2'/%3E%3C/svg%3E");
}
.card__icon--operations::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232b4257'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204h6'/%3E%3Cpath%20d='M9%202h6v4H9z'/%3E%3Cpath%20d='M7%204H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-2'/%3E%3Cpath%20d='M9%2012h6'/%3E%3Cpath%20d='M9%2016h6'/%3E%3C/svg%3E");
}
.card--link { display: block; color: inherit; }
.card--link:hover { text-decoration: none; }
.card__more { display: inline-block; margin-top: 14px; font-weight: 600; font-size: .92rem; color: var(--navy-600); }

/* --- 9. Split feature ---------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--flip .split__media { order: -1; }

.checklist { list-style: none; padding: 0; margin: 0 0 28px; }
.checklist li {
  position: relative; padding-left: 32px; margin-bottom: 13px;
  color: var(--slate); font-size: .98rem;
}
.checklist li strong { color: var(--ink); font-weight: 650; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(20,153,107,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314996b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--navy .checklist li { color: #c2d1df; }
.section--navy .checklist li strong { color: #fff; }

/* --- 10. Spec table ------------------------------------------------------ */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.specs { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
table.specs th, table.specs td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); }
table.specs tr:last-child th, table.specs tr:last-child td { border-bottom: 0; }
table.specs th { width: 38%; font-weight: 650; color: var(--navy-800); background: var(--bg-soft); }
table.specs td { color: var(--slate); }

/* Three-column variant: requirement | version A | version B */
table.specs--compare { min-width: 760px; }
table.specs--compare th[scope="row"] { width: 26%; }
table.specs--compare td { width: 37%; }
table.specs--compare thead th {
  background: var(--navy-800); color: #fff; width: auto;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
table.specs--compare thead th:first-child { background: var(--navy-900); }
table.specs--compare tbody tr:nth-child(even) th[scope="row"] { background: #eef3f8; }
table.specs--compare tbody tr:nth-child(even) td { background: #fafcfe; }
/* Values still pending trial read as secondary, not as a gap */
table.specs--compare .pending { color: var(--slate-400); font-style: italic; }

/* --- 11. Contact / forms ------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }

.info-item { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-item:last-child { border-bottom: 0; }
.info-item__icon {
  flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--line); font-size: 1.05rem;
}
.info-item__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }
.info-item__value { font-weight: 600; color: var(--navy-900); }
.info-item__value a { color: var(--navy-900); }
.info-item p { margin: 0; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--navy-800); }
.field .req { color: #d1483f; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid #d3dde8; border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(62,98,127,.16);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .84rem; color: var(--slate-400); margin: 14px 0 0; }
.form-status { margin: 0 0 16px; padding: 12px 15px; border-radius: 8px; font-size: .92rem; display: none; }
.form-status.is-ok   { display: block; background: rgba(20,153,107,.1); color: #0d7150; border: 1px solid rgba(20,153,107,.3); }
.form-status.is-err  { display: block; background: rgba(209,72,63,.09); color: #a5342c; border: 1px solid rgba(209,72,63,.28); }

/* --- 12. CTA band -------------------------------------------------------- */
.cta {
  background:
    radial-gradient(560px 240px at 80% 0%, rgba(245,166,35,.16), transparent 64%),
    linear-gradient(135deg, #20364a, #3e627f);
  border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 56px); text-align: center; color: #fff;
}
.cta h2 { color: #fff; }
.cta p { color: #d9e6f1; max-width: 56ch; margin-inline: auto; margin-bottom: 26px; }
.cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- 13. Footer ---------------------------------------------------------- */
.site-footer { background: #0f1b26; color: #99adc0; padding: 56px 0 26px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 38px; }
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: #99adc0; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__tag { color: #7890a8; }
.footer-about { max-width: 42ch; margin: 16px 0 0; color: #879fb5; }
.footer-contact { display: grid; gap: 11px; }
.site-footer .footer-contact li {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; line-height: 1.45;
}
.footer-contact strong {
  display: block; color: #fff; font-weight: 650; margin-bottom: 2px;
}
.footer-contact__icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px; margin-top: -3px;
  display: grid; place-items: center;
  background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.22);
}
.footer-contact__icon::before {
  content: ""; width: 15px; height: 15px; display: block;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.footer-contact__icon--phone::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f5a623'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.12.9.33%201.77.62%202.61a2%202%200%200%201-.45%202.11L8%209.72a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.84.29%201.71.5%202.61.62A2%202%200%200%201%2022%2016.92Z'/%3E%3C/svg%3E");
}
.footer-contact__icon--mobile::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f5a623'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='7'%20y='2'%20width='10'%20height='20'%20rx='2'/%3E%3Cpath%20d='M12%2018h.01'/%3E%3C/svg%3E");
}
.footer-contact__icon--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f5a623'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E");
}
.footer-contact__icon--location::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f5a623'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s6-5.2%206-10a6%206%200%201%200-12%200c0%204.8%206%2010%206%2010Z'/%3E%3Ccircle%20cx='12'%20cy='11'%20r='2'/%3E%3C/svg%3E");
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
  font-size: .86rem; color: #7189a0;
}

/* --- 14. Page banner (inner pages) --------------------------------------- */
.page-banner {
  background:
    radial-gradient(720px 300px at 84% -10%, rgba(245,166,35,.16), transparent 62%),
    linear-gradient(160deg, #172737, #2b4257);
  color: #fff; padding: clamp(46px, 6vw, 78px) 0;
}
.page-banner h1 { color: #fff; margin-bottom: 14px; }
.page-banner p { color: #c9d8e6; max-width: 62ch; margin: 0; font-size: 1.06rem; }
.crumbs { font-size: .85rem; color: #9fb2c4; margin-bottom: 14px; }
.crumbs a { color: #9fb2c4; }
.crumbs a:hover { color: #fff; }

/* --- 15. Misc ------------------------------------------------------------ */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge {
  padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--navy-700);
}
.section--navy .badge { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #dbe8f4; }
.muted { color: var(--slate); }
.center { text-align: center; }

/* Visible to screen readers only — used for table captions and hidden labels */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Product shot — frames a product photo that has a white studio background,
   so it reads as a deliberate plate instead of a floating white rectangle.
   Works on light sections and on .section--navy. */
.product-shot {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(14px, 2.5vw, 26px);
  box-shadow: var(--shadow-sm);
}
.product-shot img { width: 100%; height: auto; border-radius: 10px; }
.section--navy .product-shot,
.hero .product-shot {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}
.product-shot__caption {
  margin: 14px 0 0; text-align: center; font-size: .82rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400);
}

/* Studio shots need containing, not cropping — a cover crop eats the product */
.product-card__media--shot, .featured__media--shot { background: #fff; padding: 14px; }
.product-card__media--shot img, .featured__media--shot img { object-fit: contain; }

/* Variant cards — for a product supplied to more than one specification
   version. Media is fixed-ratio so photos of differing quality and
   orientation still line up in a row. */
.variant {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.variant__media {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: #eef2f7; border-bottom: 1px solid var(--line);
}
/* Default: crop to fill — rescues casual photos with distracting surroundings */
.variant__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* For studio shots on white, contain instead so the product is never clipped */
.variant__media--contain { background: #fff; }
.variant__media--contain img { object-fit: contain; padding: 16px; }

.variant__body { padding: 26px; flex: 1; display: flex; flex-direction: column; }

/* Supply status — a buyer must be able to tell at a glance what they can
   actually order today versus what is still under development. */
.variant__status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-bottom: 12px; font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.variant__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.variant__status--live  { color: #0d7150; }
.variant__status--live::before  { background: var(--green); }
.variant__status--development { color: var(--amber-600); }
.variant__status--development::before { background: var(--amber); }
.variant__body h3 { margin-bottom: 10px; color: var(--navy-900); }
.variant__spec {
  align-self: flex-start; margin-bottom: 16px; padding: 5px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; color: var(--navy-700);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
}
.variant .checklist { margin-bottom: 0; }
.variant .checklist li { font-size: .93rem; }

/* Responsive map embed — keeps the iframe from breaking the layout */
.map-embed {
  position: relative; aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--bg-soft); box-shadow: var(--shadow-sm);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Placeholder image block — swap for a real <img> when photos are ready */
.ph {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #e8eef6, #d6e1ee);
  border: 1px dashed #b6c6da; display: grid; place-items: center;
  color: #7c92ab; font-size: .88rem; font-weight: 600; text-align: center; padding: 20px;
}

.about-visual {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(245,166,35,.16), transparent 62%),
    linear-gradient(145deg, #172737 0%, #2b4257 64%, #43637f 100%);
  color: #fff; padding: clamp(24px, 4vw, 34px);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.about-visual::after {
  content: ""; position: absolute; inset: auto -10% -18% -10%; height: 42%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 26px);
  transform: skewY(-8deg); opacity: .32; pointer-events: none;
}
.about-visual__top,
.about-visual__body,
.about-visual__grid { position: relative; z-index: 1; }
.about-visual__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.about-visual__top img {
  width: 72px; height: 72px; object-fit: contain; background: #fff;
  border-radius: 10px; padding: 8px; box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.about-visual__top span {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #cbd9e6; text-align: right;
}
.about-visual__body strong {
  display: block; max-width: 11ch; font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02; letter-spacing: 0; margin-bottom: 14px;
}
.about-visual__body p { max-width: 33ch; margin: 0; color: #d5e2ec; font-size: .98rem; }
.about-visual__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.about-visual__grid span {
  min-height: 44px; display: flex; align-items: center;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  color: #edf4fb; font-size: .82rem; font-weight: 650;
}

.about-photo {
  position: relative; overflow: hidden; margin: 0;
  min-height: 520px; max-height: 620px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: #dfe7f0; box-shadow: var(--shadow-md);
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  filter: saturate(.94) contrast(1.04);
}
.about-photo::after {
  content: ""; position: absolute; inset: auto 0 0; height: 42%;
  background: linear-gradient(to top, rgba(23,39,55,.88), rgba(23,39,55,.08));
  pointer-events: none;
}
.about-photo figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1;
  margin: 0; color: #fff;
}
.about-photo figcaption span {
  display: block; margin-bottom: 5px;
  color: var(--amber); font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.about-photo figcaption strong {
  display: block; max-width: 26ch; font-size: 1.12rem; line-height: 1.22;
  letter-spacing: 0;
}

/* --- 15b. Product catalogue ---------------------------------------------
   Used by products.html. One .product-card per product in the range.
   ------------------------------------------------------------------------ */
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdae7; text-decoration: none; }
.product-card__media {
  aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, #eaf0f7, #d9e3ef);
  display: grid; place-items: center; color: #7c92ab;
  font-size: .82rem; font-weight: 600; text-align: center; padding: 16px;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media--abstract {
  position: relative; overflow: hidden; padding: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(145deg, #10253d, #274b6d);
}
.product-card__media--abstract::before {
  content: ""; position: absolute; inset: 16% -10% auto; height: 54%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 28px);
  transform: skewY(-10deg); opacity: .32;
}
.product-card__media--abstract::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 22%;
  height: 4px; border-radius: 999px; background: var(--amber);
  box-shadow: 0 18px 0 rgba(255,255,255,.16);
}
.product-card__media--locomotive { background: linear-gradient(145deg, #10253d, #31577c); }
.product-card__media--lighting { background: linear-gradient(145deg, #143b34, #1f6b5b); }
.product-card__media--warning { background: linear-gradient(145deg, #382b16, #a96618); }
.product-card__media--electronics { background: linear-gradient(145deg, #1a2d45, #515f70); }
.product-card__glyph {
  position: relative; z-index: 1;
  min-width: 88px; max-width: 72%;
  min-height: 72px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255,255,255,.94);
  color: var(--navy-900); font-weight: 800; font-size: clamp(.98rem, 2vw, 1.24rem);
  line-height: 1.05; letter-spacing: 0; text-transform: uppercase;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.product-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.product-card__cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-600); margin-bottom: 8px;
}
.product-card h3 { margin-bottom: 8px; color: var(--navy-900); }
.product-card p { color: var(--slate); font-size: .94rem; margin-bottom: 16px; }
.product-card__link { margin-top: auto; font-weight: 600; font-size: .92rem; color: var(--navy-600); }

/* Flagship Products block — wider treatment at the top of the catalogue */
.featured {
  display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.featured__media {
  background: linear-gradient(145deg, #eaf0f7, #d9e3ef);
  display: grid; place-items: center; min-height: 320px; padding: 20px;
  color: #7c92ab; font-size: .86rem; font-weight: 600; text-align: center;
  border-right: 1px solid var(--line);
}
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__body { padding: clamp(28px, 4vw, 44px); }
.featured__body h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }

/* --- 15c. Product detail page --------------------------------------------
   Used by product-template.html and every page copied from it.
   ------------------------------------------------------------------------ */
.gallery__main {
  aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(145deg, #eaf0f7, #d9e3ef); border: 1px solid var(--line);
  display: grid; place-items: center; color: #7c92ab; font-size: .88rem; font-weight: 600;
  text-align: center; padding: 20px;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.gallery__thumb {
  aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0;
  background: linear-gradient(145deg, #eef3f8, #dde6f0); border: 2px solid var(--line);
  display: grid; place-items: center; font-size: .68rem; color: #8ba0b6; font-weight: 600;
  transition: border-color .15s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: #b9c8d9; }
.gallery__thumb[aria-selected="true"] { border-color: var(--navy-600); }

/* Downloads — datasheets, catalogues, approval letters */
.downloads { list-style: none; padding: 0; margin: 0; }
.download-item {
  display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.download-item:hover { border-color: var(--navy-600); box-shadow: var(--shadow-sm); text-decoration: none; }
.download-item__icon {
  flex: none; width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--line); font-size: 1.1rem;
}
.download-item__name { font-weight: 650; color: var(--navy-900); }
.download-item__meta { font-size: .84rem; color: var(--slate-400); }
.download-item__arrow { margin-left: auto; color: var(--navy-600); font-weight: 700; }

/* Compact key/value pairs, e.g. "At a glance" under the product intro */
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
      border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.kv__cell { background: #fff; padding: 16px 18px; }
.kv__label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); }
.kv__value { font-weight: 650; color: var(--navy-900); font-size: .98rem; }

/* --- 16. Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__inner, .split, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split--flip .split__media { order: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .featured { grid-template-columns: 1fr; }
  .featured__media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .capability-points { grid-template-columns: 1fr; max-width: 520px; }

  .nav__toggle { display: flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gut) 20px;
    background: #172737; border: 1px solid rgba(255,255,255,.14); border-top: 0;
    border-radius: 0; box-shadow: 0 18px 32px rgba(14,26,37,.28);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 14px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .nav { min-height: 72px; gap: 12px; }
  .brand { min-width: 0; gap: 10px; }
  .brand__mark { width: 38px; height: 38px; padding: 0; }
  .brand__name { display: block; font-size: .92rem; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__tag { font-size: .62rem; letter-spacing: .07em; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .kv { grid-template-columns: 1fr; }
  .map-embed { aspect-ratio: 4 / 3; }   /* 21:9 is a letterbox slit on a phone */
  .section, .page-banner, .hero { overflow: hidden; }
  .featured, .product-card, .variant, .form-card, .cta, .about-visual, .about-photo, .map-embed {
    width: 100%; max-width: 100%; min-width: 0;
  }
  .about-photo { min-height: 360px; max-height: 470px; }
  .featured__media { overflow: hidden; padding: 12px; }
  .featured__media img {
    width: 100%; height: auto; max-height: 320px; object-fit: contain;
  }
  .hero__inner > * {
    width: 100%; max-width: 100%; min-width: 0;
    justify-self: start;
  }
  .hero h1, .hero__lead, .hero__points, .hero__actions, .hero__note, .page-banner p {
    width: 100%; max-width: 100%;
    overflow-wrap: break-word;
  }
  .hero h1 { overflow-wrap: break-word; }
  .hero__points { grid-template-columns: 1fr; }
  .hero__points li { min-width: 0; overflow-wrap: break-word; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; justify-content: center; }
  .product-card__glyph { max-width: calc(100% - 40px); min-width: 72px; }
  .showcase__plate { transform: none; }
  .device { padding: 18px; }
  .device__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .device__row { gap: 10px; }
  .device__icon { width: 34px; height: 34px; border-radius: 8px; }
  .form-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- 17. Print ----------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta, .nav__toggle { display: none; }
  body { font-size: 12pt; color: #000; }
  .hero, .page-banner, .section--navy { background: none !important; color: #000 !important; }
  .hero h1, .page-banner h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
}