/* ==========================================================================
   The Conceptstore — Design System
   POWER · LIGHTING · SECURITY
   Dark theme (default) + Light theme via [data-theme="light"]
   ========================================================================== */

:root {
  /* Brand accents — identical in both themes */
  --spark: #ff7a1a;
  --spark-2: #ff9c4d;
  --spark-deep: #ff5a1f;
  --volt: #22d3ee;
  --volt-2: #7ce8f7;
  --volt-deep: #0891b2;
  --amber: #ffc94d;
  --whatsapp: #25d366;
  /* Text-safe accent: the vivid --spark is only 2.6:1 on white, so anything
     that has to be *read* on a light surface uses this instead — this pair
     is redeclared per theme below since the two need different values. */

  /* ---- DARK THEME (default) ---- */
  --accent-text: #ff9c4d;
  --wordmark: #ffffff;
  --success: #2ecc71;
  --danger: #ff5c5c;
  /* The three disciplines each carry their own light: power is the orange
     spark, lighting the warm amber of a filament, security the cool cyan of
     a status LED. Used for the tagline, the pillar headings and their glows. */
  --power: #ff7a1a;
  --light: #ffc94d;
  --secure: #22d3ee;
  --power-glow: rgba(255, 122, 26, .55);
  --light-glow: rgba(255, 201, 77, .55);
  --secure-glow: rgba(34, 211, 238, .55);
  --wordmark-glow: 0 0 10px rgba(255,255,255,.28), 0 0 26px rgba(255,190,60,.22);
  --bg: #161f2b;
  --surface: #1e2937;
  --surface-2: #1a2431;
  --surface-3: #2a3644;
  --stage-bg: #141b25;
  --nav-bg: rgba(22, 31, 43, 0.8);
  --footer-bg: #10161f;

  --heading: #ffffff;
  --text: #dbe5ed;
  --text-muted: #9fb0bd;

  --border: rgba(255, 255, 255, 0.09);
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.18);

  --input-bg: rgba(255, 255, 255, 0.04);
  --chip-bg: rgba(34, 211, 238, 0.1);
  --chip-text: #7ce8f7;

  --hero-base: #161f2b;
  --hero-tint-1: rgba(34, 211, 238, 0.16);
  --hero-tint-2: rgba(255, 122, 26, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 26px 60px -20px rgba(0, 0, 0, .6);
  --amb-1: rgba(255, 122, 26, .17);
  --amb-2: rgba(34, 211, 238, .15);
  --amb-3: rgba(255, 201, 77, .1);
  --amb-4: rgba(124, 92, 255, .09);
  --grid-line: rgba(255, 255, 255, .04);
  --grid-dot: rgba(255, 255, 255, .07);
  --grain: .05;
  --edge-light: rgba(255, 255, 255, .07);
  --band: rgba(16, 24, 34, .55);
  --brand-plate: rgba(255, 255, 255, .045);
  --ring-a: rgba(255, 122, 26, .6);
  --ring-b: rgba(34, 211, 238, .5);

  --glow-spark: 0 0 0 1px rgba(255,122,26,0.35), 0 0 24px rgba(255,122,26,0.35);
  --glow-volt: 0 0 0 1px rgba(34,211,238,0.35), 0 0 24px rgba(34,211,238,0.35);
  --glow-whatsapp: 0 0 0 1px rgba(37,211,102,0.4), 0 0 22px rgba(37,211,102,0.45);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1200px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.8,.28,1);
  --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

[data-theme="light"] {
  --accent-text: #c2440a;
  --wordmark: #14212e;
  /* On white the discipline colours have to deepen to stay readable at
     small sizes; the glows are dropped rather than muddied. */
  --power: #c2440a;
  --light: #9a6100;
  --secure: #0a7d95;
  --power-glow: transparent;
  --light-glow: transparent;
  --secure-glow: transparent;
  --wordmark-glow: none;
  /* ---- LIGHT THEME (default) ---- */
  /* The page sits a shade below pure white so white cards lift off it. */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eaeef4;
  --surface-3: #dfe5ed;
  --stage-bg: #0e1620;              /* product stages stay dark for contrast */
  --nav-bg: rgba(255, 255, 255, 0.86);
  --footer-bg: #0a1119;

  --heading: #0d141d;
  --text: #3b4753;
  --text-muted: #55616e;

  --border: rgba(13, 20, 29, 0.1);
  --border-soft: rgba(13, 20, 29, 0.06);
  --border-strong: rgba(13, 20, 29, 0.2);

  --input-bg: #ffffff;
  --chip-bg: rgba(8, 145, 178, 0.1);
  --chip-text: #0b6f85;

  --hero-base: #f3f6fa;
  --hero-tint-1: rgba(34, 211, 238, 0.26);
  --hero-tint-2: rgba(255, 122, 26, 0.22);

  /* Layered shadows: a tight contact shadow plus a soft ambient one */
  --shadow-sm: 0 1px 2px rgba(13, 20, 29, .06), 0 3px 10px -2px rgba(13, 20, 29, .07);
  --shadow-md: 0 2px 4px rgba(13, 20, 29, .06), 0 14px 32px -10px rgba(13, 20, 29, .18);
  --shadow-lg: 0 3px 8px rgba(13, 20, 29, .08), 0 32px 64px -20px rgba(13, 20, 29, .28);
  /* Ambient wash tints painted behind the whole page. On white these have
     to be far stronger than on the dark ground to register at all — at 10%
     the page read as flat paper with the text floating on it. */
  --amb-1: rgba(255, 122, 26, .24);
  --amb-2: rgba(34, 211, 238, .22);
  --amb-3: rgba(255, 201, 77, .18);
  --amb-4: rgba(124, 92, 255, .11);
  --grid-line: rgba(13, 40, 70, .09);
  --grid-dot: rgba(13, 40, 70, .14);
  --grain: .035;
  --edge-light: rgba(255, 255, 255, .9);
  --band: rgba(214, 224, 236, .82);
  --brand-plate: rgba(255, 255, 255, .72);
  --ring-a: rgba(255, 122, 26, .55);
  --ring-b: rgba(34, 211, 238, .45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
/* A fixed atmospheric layer behind every page: two soft brand-coloured
   washes and a faint technical grid. It never scrolls, so long pages keep a
   consistent ground instead of turning into flat bands of white. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 12% -6%, var(--amb-1), transparent 58%),
    radial-gradient(44rem 32rem at 92% 8%, var(--amb-2), transparent 60%),
    radial-gradient(40rem 34rem at 72% 62%, var(--amb-4), transparent 62%),
    radial-gradient(46rem 36rem at 22% 88%, var(--amb-3), transparent 62%),
    var(--bg);
  background-size: 170% 170%, 170% 170%, 170% 170%, 170% 170%, 100% 100%;
  animation: auroraDrift 42s ease-in-out infinite alternate;
}
/* Slow enough to feel like light moving in a room, not an animation */
@keyframes auroraDrift {
  0%   { background-position: 0% 0%, 100% 0%, 70% 60%, 20% 100%, 0 0; }
  50%  { background-position: 20% 12%, 78% 16%, 46% 44%, 44% 84%, 0 0; }
  100% { background-position: 8% 4%, 96% 6%, 82% 72%, 8% 96%, 0 0; }
}
/* Fine grid, faded out towards the middle so it never fights the content */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* film grain, so large flat areas have tooth instead of reading as empty */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 200px 200px, 28px 28px, 112px 112px, 112px 112px;
  opacity: 1;
  mask-image: radial-gradient(ellipse 95% 80% at 50% 0%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 0%, #000 18%, transparent 78%);
}
/* On the light ground the grid is the main thing stopping the page reading
   as blank paper, so it fades out much later than it does on dark. */
[data-theme="light"] body::after {
  mask-image: radial-gradient(ellipse 120% 105% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 120% 105% at 50% 0%, #000 35%, transparent 100%);
}
/* the grain layer alone is tinted down; the grid lines keep their own alpha */
body::after { mix-blend-mode: normal; }
@supports (mix-blend-mode: overlay) {
  body::after { mix-blend-mode: var(--grain-blend, normal); }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; color: var(--heading); }
p { line-height: 1.72; margin: 0 0 1.05em; font-size: 1rem; }
strong { color: var(--heading); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head);
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 14px;
  text-shadow: 0 0 12px var(--power-glow);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--spark), var(--volt), var(--spark));
  background-size: 220% 100%;
  animation: hairlineSweep 6s linear infinite;
}

.section-head { max-width: 680px; margin-bottom: 48px; }

/* A heading and its supporting sentence sit side by side on wide screens,
   so the row fills the container instead of stopping halfway across.
   Section heads that already carry a button keep their inline flex layout. */
@media (min-width: 900px) {
  .section-head:not(.center):not([style*="flex"]) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "eyebrow eyebrow" "title desc";
    column-gap: 56px; row-gap: 6px;
    align-items: end;
  }
  .section-head:not(.center):not([style*="flex"]) .eyebrow { grid-area: eyebrow; }
  .section-head:not(.center):not([style*="flex"]) h2 { grid-area: title; margin-bottom: 0; }
  .section-head:not(.center):not([style*="flex"]) p {
    grid-area: desc; margin-bottom: 0; padding-bottom: .35em; max-width: 42em;
  }
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(31px, 3.9vw, 48px); letter-spacing: -.015em; }
/* a rule draws itself under the heading as the section arrives */
.section-head h2::after {
  content: ""; display: block; height: 3px; width: 62px; margin-top: 18px;
  border-radius: 3px; background: linear-gradient(90deg, var(--spark), var(--volt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease) .15s;
}
.section-head.in h2::after, .reveal.in .section-head h2::after { transform: scaleX(1); }
.section-head p { font-size: 18.5px; line-height: 1.65; color: var(--text-muted); }

.pad { padding: 88px 0; }
.pad-sm { padding: 54px 0; }
/* Alternating bands are translucent so the ambient wash reads through
   rather than stamping an opaque grey rectangle over it. */
.surface-2 { background: var(--band); }
.contrast-band { background: var(--band); }

/* ---------- Buttons ---------- */
/* "Get a" is its own flex item, so the flex gap would double the word
   space; the span's own nbsp is the space, the gap is cancelled. */
.btn .long { margin-right: -10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* The fill is the full-brightness spark. White text would only manage
   2.6:1 on it, so the label is near-black instead (7:1) — which also makes
   the button read as a lit surface rather than a painted one. */
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ffa040, #ff7a1a);
  color: #1a1008;
  box-shadow: 0 0 0 1px rgba(255,150,60,.45), 0 0 26px rgba(255,122,26,.42),
              0 8px 22px -8px rgba(255,90,31,.7);
}
.btn-primary svg { color: #1a1008; }
/* a light sweep crosses the button on hover */
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn-primary:hover::after { left: 120%; }
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffb35c, #ff8a2a);
  box-shadow: 0 0 0 1px rgba(255,170,80,.6), 0 0 36px rgba(255,140,40,.6),
              0 16px 40px -10px rgba(255,122,26,.75);
}
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--heading); }
.btn-outline:hover { border-color: var(--volt); box-shadow: var(--glow-volt); transform: translateY(-2px); }
.btn-dark { background: var(--footer-bg); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-light { background: #fff; color: #101820; }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost-volt { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.35); color: var(--volt-2); }
[data-theme="light"] .btn-ghost-volt { color: #0b6f85; }
.btn-ghost-volt:hover { box-shadow: var(--glow-volt); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h); display: flex; align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,122,26,.55), rgba(34,211,238,.5), rgba(255,122,26,.55), transparent 95%);
  background-size: 220% 100%;
  animation: hairlineSweep 11s linear infinite;
  opacity: .85;
}
@keyframes hairlineSweep {
  from { background-position: 0% 0; }
  to   { background-position: 220% 0; }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* The company name sits inside a plate with a gradient ring, so it reads as
   a mark rather than as another line of navigation text. The name itself
   stays a single colour; the surround does the standing out. */
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  position: relative;
  padding: 7px 15px 7px 9px;
  border-radius: 14px;
  background: var(--brand-plate);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease;
}
/* gradient ring drawn with a masked border box */
.brand::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(125deg, var(--ring-a), var(--ring-b) 55%, var(--ring-a));
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ringDrift 9s ease-in-out infinite;
  pointer-events: none;
}
/* soft halo, stronger on hover */
.brand::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 16px;
  background: radial-gradient(60% 100% at 20% 50%, rgba(255,122,26,.20), transparent 70%),
              radial-gradient(60% 100% at 85% 50%, rgba(34,211,238,.16), transparent 70%);
  opacity: .55;
  filter: blur(7px);
  z-index: -1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.brand:hover { transform: translateY(-1px); }
.brand:hover::after { opacity: 1; }
/* In the light theme the logo sits on its own dark plate, so the name,
   the tagline and the spark keep exactly the colours and glows they have in
   the dark theme — a lit badge on a white header, rather than deepened,
   muddier versions of the same colours. */
[data-theme="light"] .brand {
  --wordmark: #ffffff;
  --wordmark-glow: 0 0 10px rgba(255,255,255,.28), 0 0 26px rgba(255,190,60,.22);
  --power: #ff7a1a;  --power-glow: rgba(255, 122, 26, .55);
  --light: #ffc94d;  --light-glow: rgba(255, 201, 77, .55);
  --secure: #22d3ee; --secure-glow: rgba(34, 211, 238, .55);
  --text-muted: #8e9cab;
  background: linear-gradient(150deg, #101a26, #17222f);
  box-shadow: 0 6px 18px -8px rgba(13, 20, 29, .45);
}
@keyframes ringDrift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  filter: drop-shadow(0 0 9px rgba(255,122,26,.45));
  animation: markGlow 4.5s ease-in-out infinite;
}
@keyframes markGlow {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(255,122,26,.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,180,32,.7)); }
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
/* Company name: one colour, but lit — a white glow with a warm edge, like
   a backlit sign. It stays a single hue so the name reads as a name. */
.brand-word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .015em;
  color: var(--wordmark);
  text-shadow: var(--wordmark-glow);
}
.brand-word span { color: inherit; font-weight: 700; }
/* The tagline names the three disciplines, each in its own light. */
.brand-tag { font-size: 10px; letter-spacing: .14em; color: var(--text-muted); text-transform: uppercase; margin-top: 3px; }
.brand-tag b { font-weight: 700; }
.brand-tag .t-power  { color: var(--power);  text-shadow: 0 0 8px var(--power-glow); }
.brand-tag .t-light  { color: var(--light);  text-shadow: 0 0 8px var(--light-glow); }
.brand-tag .t-secure { color: var(--secure); text-shadow: 0 0 8px var(--secure-glow); }

/* A single point of light travels the ring around the logo, like current
   in a circuit. pathLength normalises the rectangle to 100 units, so the
   dash length and speed are the same whatever size the header renders at. */
.brand-orbit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.brand-orbit rect {
  fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 3 97;
  filter: drop-shadow(0 0 3px var(--amber)) drop-shadow(0 0 8px rgba(255,190,60,.7));
  animation: orbit 5.5s linear infinite;
}
@keyframes orbit { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .brand-orbit rect { animation: none; stroke-dashoffset: -8; }
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  position: relative; padding: 10px 15px; font-size: 15px; font-weight: 500;
  color: var(--text-muted); border-radius: var(--radius-pill);
  transition: color .2s ease, background .2s ease;
}
.main-nav a:hover { color: var(--heading); background: var(--surface-3); }
.main-nav a:not(.active)::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--spark), var(--volt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.main-nav a:not(.active):hover::after { transform: scaleX(1); }
/* The current page is lit from its underline rather than filled with a
   muddy orange tint: a faint pill, a glowing hairline. */
.main-nav a.active {
  color: var(--heading); background: rgba(255,140,50,.09);
  box-shadow: inset 0 0 0 1px rgba(255,140,50,.18);
}
.main-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--spark), var(--volt));
  box-shadow: 0 0 8px rgba(255,150,60,.7), 0 0 8px rgba(34,211,238,.5);
}

.nav-cta { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--input-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--heading); transition: all .25s ease;
}
.icon-btn:hover { border-color: var(--spark); color: var(--spark); }
.icon-btn svg { width: 20px; height: 20px; }
/* Icon shown = the theme a click switches TO: sun while dark (offering
   light), moon while light (offering dark). */
.theme-toggle .moon { display: none; }
.theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: none; }
.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .main-nav {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 10px 20px 22px; gap: 4px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .main-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav a { padding: 13px 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn .long { display: none; }
}
@media (max-width: 520px) {
  .nav-cta .btn { display: none; }
  .brand-tag { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 80px) 0 92px;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, var(--hero-tint-1), transparent 60%),
    radial-gradient(ellipse 700px 500px at -5% 30%, var(--hero-tint-2), transparent 60%),
    linear-gradient(180deg, var(--hero-base) 60%, transparent 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 80%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.3vw, 62px); letter-spacing: -.022em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--spark), var(--amber) 60%, #fff0b8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,160,50,.35));
}
[data-theme="light"] .hero h1 em {
  background: linear-gradient(90deg, #e8590c, #b07400);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
}
.hero p.lead { font-size: 19.5px; line-height: 1.62; color: var(--text-muted); max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero-stats { display: flex; gap: 34px; margin-top: 48px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-family: var(--font-head); font-size: 31px; color: var(--heading); letter-spacing: -.02em; text-shadow: 0 0 16px var(--light-glow); }
.hero-stats div span { font-size: 14px; color: var(--text-muted); }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Headline first on a phone: the illustration used to fill the opening
     screen and pushed the value proposition below the fold. */
  .hero-visual { order: 2; max-width: 300px; margin: 10px auto 0; }
}
@media (max-width: 560px) {
  .hero-visual { max-width: 210px; }
}

.wire-path {
  fill: none; stroke: url(#wireGrad); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 6 10; animation: dash 3.2s linear infinite; opacity: .85;
}
@keyframes dash { to { stroke-dashoffset: -160; } }
.node-pulse { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { opacity:.55; transform: scale(1);} 50% { opacity:1; transform: scale(1.35);} }
.bulb-glow { filter: drop-shadow(0 0 18px rgba(255,201,77,.55)); }
.hero-bulb-bg { fill: var(--surface); stroke: var(--border-strong); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: calc(var(--nav-h) + 40px) 0 44px;
  background:
    radial-gradient(ellipse 700px 400px at 90% 0%, var(--hero-tint-1), transparent 65%),
    linear-gradient(180deg, var(--hero-base) 55%, transparent 100%);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 75%);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(33px, 4.8vw, 52px); letter-spacing: -.018em; margin-bottom: .35em; }
.page-hero p { color: var(--text-muted); font-size: 18.5px; line-height: 1.62; margin-bottom: 0; }

/* Two columns from tablet up: the wording on the left, a panel of facts on
   the right that would otherwise be dead space. */
.masthead { display: grid; gap: 30px 56px; align-items: end; }
@media (min-width: 900px) {
  .masthead { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
  .masthead .mast-copy p { max-width: 34em; }
}
.mast-facts {
  display: grid; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
  overflow: hidden;
}
.mast-facts div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--border);
}
.mast-facts div:last-child { border-bottom: none; }
.mast-facts dt, .mast-facts .k {
  font-size: 13px; color: var(--text-muted); letter-spacing: .02em;
}
.mast-facts dd, .mast-facts .v {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: 16px; color: var(--heading); text-align: right;
}
.mast-facts .v.small { font-size: 14px; font-weight: 600; }

/* ---------- Grid & cards ---------- */
.grid { display: grid; gap: 28px; }
/* Grid tracks default to min-width:auto, so one wide child (a long button,
   a row of inputs) pushes the whole grid past the viewport. */
.grid > * { min-width: 0; }
.partner-card .btn { white-space: normal; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  /* the inset highlight reads as light catching the top edge */
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,122,26,.22), 0 0 34px -8px rgba(255,122,26,.3);
  border-color: rgba(255,122,26,.45);
}
/* an accent bar wipes across the top edge on hover */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--spark), var(--volt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover::after { transform: scaleX(1); }

/* the icon in a feature card sits in its own lit tile */
.card > div:first-child:not([class]) {
  width: 58px; height: 58px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255,122,26,.14), rgba(34,211,238,.1));
  box-shadow: inset 0 1px 0 var(--edge-light), 0 6px 16px -8px rgba(255,122,26,.5);
  margin-bottom: 20px !important;
  transition: transform .45s var(--ease), box-shadow .45s ease;
}
.card:hover > div:first-child:not([class]) {
  transform: translateY(-2px) scale(1.06);
  box-shadow: inset 0 1px 0 var(--edge-light), 0 10px 22px -8px rgba(255,122,26,.6);
}
.card > div:first-child:not([class]) svg { width: 27px !important; height: 27px !important; }
.card h3 { font-size: 21px; }
.card p { color: var(--text-muted); font-size: 15.5px; }

/* Product / category card */
.prod-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
.prod-card:hover {
  transform: translateY(-9px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--shadow-lg), 0 0 30px -6px rgba(255,122,26,.32);
  border-color: rgba(255,122,26,.45);
}
/* the body opens up as the card lifts */
.prod-card .body { transition: transform .45s var(--ease); }
.prod-card:hover .body { transform: translateY(-3px); }
.prod-card .tags { transition: opacity .4s var(--ease), transform .45s var(--ease); }
/* the enquire link slides forward as the card lifts */
.prod-card .row-link { transition: gap .35s var(--ease), color .3s ease; }
.prod-card:hover .row-link { gap: 11px; }
.icon-stage {
  position: relative; height: 190px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(255,122,26,.12), transparent 65%), var(--stage-bg);
}
.icon-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.icon-stage svg {
  width: 84px; height: 84px; color: var(--volt); position: relative; z-index: 1;
  filter: drop-shadow(0 0 14px rgba(34,211,238,.5));
  transition: transform .4s ease, color .4s ease, filter .4s ease;
}
.prod-card:hover .icon-stage svg,
.zoom-frame:hover .icon-stage svg {
  transform: scale(1.16) rotate(-4deg); color: var(--spark-2);
  filter: drop-shadow(0 0 18px rgba(255,122,26,.6));
}
/* Real product photography stage — white so product shots read cleanly in
   both themes, with a zoom-on-hover that lets you inspect the fitting. */
.photo-stage {
  position: relative; height: 240px; overflow: hidden;
  /* A lit stage: a soft key light above the product and a gentle falloff to
     the corners, so cut-out product shots sit in a space rather than float
     on flat white. */
  background:
    radial-gradient(80% 65% at 50% 22%, #ffffff 0%, #f7f9fb 45%, #e9edf3 100%);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
/* vignette: darkens the outer edge a touch to give the panel depth */
.photo-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(75% 70% at 50% 40%, transparent 55%, rgba(13,20,29,.07) 100%);
}
.photo-stage img {
  position: relative; z-index: 0;
  max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(13, 20, 29, .16));
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.prod-card:hover .photo-stage img { filter: drop-shadow(0 18px 26px rgba(13, 20, 29, .22)); }

/* "Full-bleed" renders are shown whole — never cropped — just scaled up
   closer to the panel edge than a cutout product shot, since these images
   carry their own dark background already. */
.photo-stage.fill { background: #0e1620; }
.photo-stage.fill img {
  max-width: 94%; max-height: 94%; width: auto; height: auto;
  object-fit: contain; filter: none;
}
.prod-card:hover .photo-stage.fill img { filter: none; }
.prod-card:hover .photo-stage img { transform: scale(1.14); }
.photo-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(255,122,26,.16), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.prod-card:hover .photo-stage::after { opacity: 1; }

/* Attribution for manufacturer-supplied product photography */
.img-credit {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: #4a555f; background: rgba(255,255,255,.9);
  padding: 3px 8px; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
  opacity: .75; transition: opacity .3s ease;
}
.prod-card:hover .img-credit { opacity: 1; }

/* "We distribute this" — the commercial message, stated plainly */
.distribute-panel {
  display: flex; gap: 22px; align-items: flex-start;
  margin-top: 40px; padding: 30px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,122,26,.1), rgba(34,211,238,.08)), var(--surface);
  border: 1px solid rgba(255,122,26,.28);
}
.distribute-panel .dp-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,122,26,.14); color: var(--spark);
}
.distribute-panel .dp-icon svg { width: 26px; height: 26px; }
.distribute-panel h3 { font-size: 20px; margin-bottom: 8px; }
.distribute-panel p { font-size: 15px; color: var(--text-muted); margin-bottom: 18px; max-width: 760px; }
.dp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .distribute-panel { flex-direction: column; padding: 24px; gap: 16px; } }

.distribute-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; font-weight: 500;
  color: var(--chip-text); background: var(--chip-bg);
  border: 1px solid rgba(34,211,238,.22);
  border-radius: var(--radius-sm); padding: 9px 11px; margin: 0 0 14px;
}
.distribute-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

.credit-note {
  margin-top: 34px; padding: 18px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 13px; color: var(--text-muted); line-height: 1.65;
}
.credit-note strong { color: var(--heading); }
.credit-note a { color: var(--accent-text); font-weight: 600; }

.prod-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.prod-card h3 { font-size: 19px; margin-bottom: 7px; letter-spacing: -.01em; }
.prod-card p { font-size: 15px; color: var(--text-muted); margin-bottom: 15px; }
.prod-card .brand-line {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 8px;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tags span {
  font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid rgba(34,211,238,.16);
  transition: transform .3s var(--ease);
}
.prod-card:hover .tags span { transform: translateY(-1px); }
.row-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--accent-text);
}
.row-link svg { width: 15px; height: 15px; transition: transform .25s ease; }
.prod-card:hover .row-link svg { transform: translateX(4px); }

/* Partner card */
.partner-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 28px -8px rgba(255,122,26,.26); border-color: rgba(255,122,26,.4); }
/* The card leads with the supplier's real logo, so it sizes as a chip rather
   than a text wordmark and drops the old stand-in colour bar. */
.partner-card .p-logo {
  align-self: flex-start; height: 66px; padding: 0 22px; min-width: 176px;
}
.partner-card .p-logo img { max-width: 150px; }
.partner-card .p-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text); background: rgba(255,122,26,.12); padding: 5px 11px;
  border-radius: var(--radius-pill); width: fit-content;
}
.partner-card .p-role { font-size: 14px; color: var(--text-muted); margin: 0; }
.partner-card p { font-size: 15.5px; color: var(--text-muted); }
.partner-card .btn { align-self: flex-start; margin-top: auto; }

/* Zoom frame (hover-expand imagery) */
.zoom-frame {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  background: var(--stage-bg); border: 1px solid var(--border);
}
.zoom-frame .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
  color: #fff; font-size: 13.5px; font-weight: 600;
  transform: translateY(8px); opacity: 0; transition: all .3s ease;
}
.zoom-frame:hover .cap { transform: translateY(0); opacity: 1; }

/* ---------- Project cards ---------- */
.proj-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
.proj-card:hover {
  transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--shadow-lg), 0 0 30px -8px rgba(34,211,238,.35);
  border-color: rgba(34,211,238,.5);
}
.proj-card .info { transition: transform .45s var(--ease); }
.proj-card:hover .info { transform: translateY(-3px); }
.proj-card .thumb {
  height: 200px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.2), transparent 60%), var(--stage-bg);
}
.proj-card .thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.proj-card .thumb svg {
  width: 82px; height: 82px; color: var(--amber); opacity: .92; position: relative; z-index: 1;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), color .35s ease;
}
.proj-card:hover .thumb svg { transform: scale(1.18); color: var(--volt-2); }
.proj-card .info { padding: 22px 24px 26px; }
.proj-card .tag {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--volt-2); margin-bottom: 9px; display: block;
}
[data-theme="light"] .proj-card .tag { color: #0b6f85; }
.proj-card h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -.01em; }
.proj-card p { font-size: 15px; color: var(--text-muted); margin: 0; }
.proj-card .loc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); margin-top: 12px;
}
.proj-card .loc svg { width: 13px; height: 13px; color: var(--spark); }

/* Project cards carrying real photography */
.proj-card .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.proj-card { cursor: pointer; }
.proj-card:hover .thumb img,
.proj-card:focus-visible .thumb img { transform: scale(1.09); }
.proj-card .thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(10,15,22,.55), rgba(10,15,22,0) 55%);
  opacity: .85; transition: opacity .35s ease;
}
.proj-card:hover .thumb::after { opacity: .55; }
.expand-badge {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: rgba(10,15,22,.72);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 11px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transform: translateY(-6px); opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.expand-badge svg { width: 13px; height: 13px; }
.proj-card:hover .expand-badge,
.proj-card:focus-visible .expand-badge { opacity: 1; transform: translateY(0); }
.proj-card:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* ---------- News cards ---------- */
.news-card {
  display: flex; flex-direction: column; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
.news-card:hover, .news-card:focus-visible {
  transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--shadow-lg), 0 0 26px -6px rgba(255,122,26,.28);
  border-color: rgba(255,122,26,.45);
}
.news-card .news-body { transition: transform .45s var(--ease); }
.news-card:hover .news-body { transform: translateY(-3px); }
.news-card:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.news-thumb { position: relative; height: 190px; overflow: hidden; background: var(--stage-bg); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.news-card:hover .news-thumb img { transform: scale(1.08); }
.news-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.news-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text); background: rgba(255,122,26,.12);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.news-date { font-size: 12px; color: var(--text-muted); }
.news-card h3 { font-size: 20px; margin-bottom: 9px; letter-spacing: -.01em; }
.news-card p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- Expanding detail modal ---------- */
.modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,15,.82); backdrop-filter: blur(6px); animation: fadeIn .25s ease; }
.modal-card {
  position: relative; z-index: 2;
  width: min(980px, 100%); max-height: 90vh; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  animation: modalIn .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.97) } to { opacity: 1; transform: none } }
@media (max-width: 860px) {
  .modal { padding: 0; }
  .modal-card { grid-template-columns: 1fr; max-height: 100vh; height: 100%; border-radius: 0; overflow-y: auto; }
}
.modal-gallery { position: relative; background: var(--stage-bg); min-height: 320px; }
.modal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .modal-gallery { min-height: 250px; height: 250px; } .modal-img { position: relative; } }
.gal-prev, .gal-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(10,15,22,.62); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease;
}
.gal-prev { left: 12px; } .gal-next { right: 12px; }
.gal-prev:hover, .gal-next:hover { background: var(--spark); transform: translateY(-50%) scale(1.06); }
.gal-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.gal-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.42); transition: all .25s ease; }
.gal-dots span.on { background: var(--spark); width: 22px; border-radius: var(--radius-pill); }
.modal-body { padding: 34px 34px 36px; overflow-y: auto; }
.modal-body h2 { font-size: 26px; margin-bottom: 10px; }
.modal-body .tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--volt-2); display: block; margin-bottom: 8px; }
[data-theme="light"] .modal-body .tag { color: #0b6f85; }
.modal-body .loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.modal-body .loc svg { width: 14px; height: 14px; color: var(--spark); }
.modal-body p { font-size: 15px; color: var(--text-muted); }
.modal-body p.lede { color: var(--text); font-size: 16px; }
.scope-head { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 22px 0 10px; }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--heading); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.modal-close:hover { background: var(--spark); color: #fff; border-color: var(--spark); transform: rotate(90deg); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--spark), var(--volt)); border-radius: 2px;
}
.t-item { position: relative; padding-bottom: 42px; }
.t-item:last-child { padding-bottom: 0; }
.t-item::before {
  content: ""; position: absolute; left: -40px; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--spark);
  box-shadow: 0 0 0 4px rgba(255,122,26,.14), 0 0 14px rgba(255,122,26,.45);
  transition: box-shadow .4s ease, transform .4s var(--ease);
}
.t-item:hover::before { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(255,122,26,.18), 0 0 20px rgba(255,122,26,.6); }
.t-item .t-year {
  display: block; font-family: var(--font-head); font-weight: 700;
  color: var(--accent-text); font-size: 14px; letter-spacing: .04em; margin-bottom: 5px;
}
.t-item h3 { font-size: 20px; margin-bottom: 8px; }
.t-item p { color: var(--text-muted); font-size: 15.5px; margin: 0; }

/* ---------- Stats ---------- */
.stat-strip {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
}
.stat-strip .stat { flex: 1 1 190px; padding: 28px 22px; text-align: center; border-right: 1px solid var(--border); }
.stat-strip .stat:last-child { border-right: none; }
.stat-strip strong {
  display: block; font-family: var(--font-head); font-size: 38px; line-height: 1.08; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--spark), var(--amber), var(--spark));
  background-size: 220% 100%;
  animation: hairlineSweep 8s linear infinite;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .stat-strip strong {
  background: linear-gradient(90deg, #bf4a10, #96601a);
  background-size: 100% 100%;
  animation: none;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-strip span { font-size: 14px; color: var(--text-muted); }
.stat-strip.stack { flex-direction: column; }
.stat-strip.stack .stat { flex: 0 0 auto; padding: 24px 22px; border-right: none; border-bottom: 1px solid var(--border); }
.stat-strip.stack .stat:last-child { border-bottom: none; }

/* ---------- Quote ---------- */
.quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.quote-card svg.quote-mark { width: 38px; height: 38px; color: var(--spark); opacity: .8; margin-bottom: 12px; }
.quote-card p.q { font-size: 17.5px; color: var(--text); font-style: italic; }
.quote-card .who { font-family: var(--font-head); font-weight: 700; color: var(--heading); font-size: 14.5px; }
.quote-card .role { font-size: 13px; color: var(--text-muted); }

/* ---------- Search ---------- */
.search-wrap { position: relative; max-width: 760px; }
.search-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 7px 7px 7px 22px;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.search-box:hover { transform: translateY(-1px); }
.search-box:focus-within { border-color: var(--volt); box-shadow: var(--shadow-md), 0 0 0 4px rgba(34,211,238,.16); }
.search-box svg.mag { width: 22px; height: 22px; color: var(--accent-text); flex-shrink: 0; }
.search-box input {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--heading);
  font-family: var(--font-body); font-size: 16.5px; padding: 13px 0;
}
.search-box input:focus { outline: none; }
.search-box input::placeholder { color: var(--text-muted); }
.search-clear {
  border: none; background: transparent; color: var(--text-muted);
  width: 34px; height: 34px; border-radius: 50%; display: none;
  align-items: center; justify-content: center;
}
.search-clear.show { display: inline-flex; }
.search-clear:hover { background: var(--surface-3); color: var(--heading); }
.search-clear svg { width: 16px; height: 16px; }

.search-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.search-hints .lbl { font-size: 12.5px; color: var(--text-muted); }
.chip {
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  transition: all .2s ease;
}
.chip:hover, .chip.active { border-color: var(--spark); color: var(--accent-text); }

.search-meta { margin: 0 0 22px; font-size: 15px; color: var(--text-muted); }
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.filter-bar .lbl { margin-right: 2px; }
@media (max-width: 560px) { .filter-bar { border-radius: var(--radius-md); } }
.search-meta strong { color: var(--heading); }
.partner-hint {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--chip-bg); border: 1px solid rgba(34,211,238,.28);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 24px;
}
.partner-hint svg { width: 20px; height: 20px; color: var(--volt); flex-shrink: 0; margin-top: 2px; }
.partner-hint p { margin: 0; font-size: 14px; color: var(--text); }
.partner-hint a { color: var(--accent-text); font-weight: 600; }

.no-results { text-align: center; padding: 60px 20px; }
.no-results svg { width: 54px; height: 54px; color: var(--text-muted); opacity: .5; margin-bottom: 18px; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  background: var(--input-bg); border: 1px solid var(--border-strong);
  color: var(--heading); border-radius: var(--radius-sm); padding: 13px 15px;
  font-family: var(--font-body); font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .75; }

/* Dropdowns: the OS draws the option list, so set explicit colours on both
   the select and its options or dark-theme text renders white-on-white. */
.field select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
.field select option {
  background-color: #131c27;
  color: #ffffff;
  padding: 10px;
}
[data-theme="light"] .field select option {
  background-color: #ffffff;
  color: #0d141d;
}
.field select:focus option:checked { font-weight: 600; }
.form-note { font-size: 13px; color: var(--text-muted); margin-top: 12px; text-align: center; }
.form-note a { color: var(--accent-text); font-weight: 600; }
.form-status {
  display: none; margin-top: 16px; padding: 14px 18px;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(46,204,113,.12); color: #2fae66; border: 1px solid rgba(46,204,113,.4); }
.form-status.pending { background: var(--chip-bg); color: var(--chip-text); border: 1px solid rgba(34,211,238,.35); }
.form-status.err { background: rgba(255,92,92,.1); color: #e04747; border: 1px solid rgba(255,92,92,.35); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.btn[disabled] { opacity: .65; pointer-events: none; }

/* Contact info tiles */
.info-tile {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(255,122,26,.35); }
.info-tile .ic {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255,122,26,.13), rgba(34,211,238,.1));
  box-shadow: inset 0 1px 0 var(--edge-light);
  transition: transform .4s var(--ease);
}
.info-tile:hover .ic { transform: scale(1.07); }
.info-tile .ic svg { width: 21px; height: 21px; }
.info-tile h3 { font-size: 16px; margin-bottom: 5px; }
.info-tile p, .info-tile a { font-size: 15.5px; margin: 0; color: var(--text-muted); }
.info-tile a { color: var(--accent-text); font-weight: 600; }
.info-tile a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: #9fb0bd; padding: 70px 0 26px; border-top: 1px solid var(--border); }
.site-footer h4 { color: #fff; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer .brand-word { color: #f4f8fb; }
.site-footer .brand { background: rgba(255,255,255,.05); }
.site-footer .brand-tag { color: #7d8d9a; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid ul li { margin-bottom: 11px; }
.footer-grid ul a {
  font-size: 14.5px; display: inline-block;
  transition: color .25s ease, transform .3s var(--ease);
}
.footer-grid ul a:hover { color: var(--spark); transform: translateX(4px); }
.footer-about p { font-size: 14.5px; max-width: 330px; color: #9fb0bd; }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12); color: #9fb0bd;
  transition: all .25s ease;
}
.social-row a svg { width: 18px; height: 18px; }
.social-row a:hover { border-color: var(--spark); box-shadow: var(--glow-spark); color: var(--spark-2); transform: translateY(-3px); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); font-size: 13px;
}

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, #c04808, #a63a09); }
.cta-band .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { color: rgba(255,255,255,.92); margin: 0; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Floating launcher ---------- */
.fab-wrap {
  position: fixed; right: 24px; bottom: 24px; z-index: 600;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.fab-item {
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.fab-wrap.open .fab-item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-wrap.open .fab-item:nth-child(2) { transition-delay: .04s; }
.fab-wrap.open .fab-item:nth-child(1) { transition-delay: .09s; }
.fab-label {
  background: #0d141d; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.12); white-space: nowrap; box-shadow: var(--shadow-md);
}
.fab-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.fab-btn svg { width: 26px; height: 26px; }
.fab-btn.whatsapp { background: var(--whatsapp); animation: glowGreen 2.6s ease-in-out infinite; }
.fab-btn.chatbot { background: linear-gradient(135deg, var(--volt), var(--volt-deep)); animation: glowBlue 2.6s ease-in-out infinite; }
.fab-main {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #ffa040, #ff7a1a); color: #1a1008;
  display: flex; align-items: center; justify-content: center;
  animation: glowOrange 2.6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.fab-main svg { width: 28px; height: 28px; }
.fab-wrap.open .fab-main { transform: rotate(45deg); }
@keyframes glowOrange {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,122,26,.4), 0 0 18px rgba(255,122,26,.45); }
  50% { box-shadow: 0 0 0 1px rgba(255,122,26,.5), 0 0 32px rgba(255,122,26,.75); }
}
@keyframes glowGreen {
  0%,100% { box-shadow: 0 0 0 1px rgba(37,211,102,.4), 0 0 16px rgba(37,211,102,.45); }
  50% { box-shadow: 0 0 0 1px rgba(37,211,102,.5), 0 0 28px rgba(37,211,102,.75); }
}
@keyframes glowBlue {
  0%,100% { box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 16px rgba(34,211,238,.45); }
  50% { box-shadow: 0 0 0 1px rgba(34,211,238,.5), 0 0 28px rgba(34,211,238,.75); }
}

/* Chat panel */
.chat-panel {
  position: fixed; right: 24px; bottom: 100px; z-index: 601;
  width: 350px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none;
  transition: all .25s ease;
}
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-panel .ch-head {
  padding: 15px 18px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #0b7d96, #075f73);
}
.chat-panel .ch-head strong { color: #fff; font-family: var(--font-head); font-size: 14.5px; display: block; }
.chat-panel .ch-head span { color: rgba(255,255,255,.85); font-size: 12px; }
.chat-panel .ch-body { padding: 16px; max-height: 300px; overflow-y: auto; }
.ch-bubble {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  font-size: 13.5px; color: var(--text); line-height: 1.6;
}
.ch-bubble.me { background: rgba(255,122,26,.12); border-color: rgba(255,122,26,.3); margin-left: 28px; }
.ch-bubble a { color: var(--accent-text); font-weight: 600; }
.ch-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ch-quick button {
  font-size: 12.5px; padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  transition: all .2s ease;
}
.ch-quick button:hover { border-color: var(--volt); color: var(--volt); }
.chat-panel .ch-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat-panel .ch-foot input {
  flex: 1; background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 10px 15px; color: var(--heading);
  font-family: var(--font-body); font-size: 13.5px;
}
.chat-panel .ch-foot input:focus { outline: none; border-color: var(--volt); }
.chat-panel .ch-send {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: linear-gradient(135deg, #ffa040, #ff7a1a); color: #1a1008;
  display: flex; align-items: center; justify-content: center;
}
.chat-panel .ch-send svg { width: 17px; height: 17px; }

/* Product cards are now openable, so they need the affordance */
.prod-card { cursor: pointer; }
.prod-card:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.zoom-hint {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,15,22,.6); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.zoom-hint svg { width: 15px; height: 15px; }
.prod-card:hover .zoom-hint,
.prod-card:focus-visible .zoom-hint { opacity: 1; transform: scale(1); }

/* A cut-out product needs padding and a light ground in the detail view.
   Full-bleed renders get their own dark ground and are shown whole too —
   project/news photography is the only thing still allowed to crop here,
   since a scenic shot filling the frame is the intended look there. */
.modal-gallery.fit { background: #0e1620; }
.modal-gallery.fit .modal-img {
  object-fit: contain; padding: 26px;
}
.modal-gallery.contain { background: radial-gradient(80% 70% at 50% 30%, #fff, #eef1f6); }
.modal-gallery.contain .modal-img {
  object-fit: contain; padding: 42px;
  filter: drop-shadow(0 16px 26px rgba(13,20,29,.18));
}
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Partner stock blocks ---------- */
.brand-block { margin-bottom: 54px; }
.brand-block:last-child { margin-bottom: 0; }
.brand-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.brand-block-head h3 { font-size: 23px; margin: 0; letter-spacing: -.01em; margin-right: auto; }
.brand-block-logo { height: 48px; min-width: 124px; padding: 0 14px; }
.brand-block-head .row-link { margin-top: 0; }

/* ---------- Policy pages ---------- */
.cat-nav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: var(--nav-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.cat-nav .container { display: flex; gap: 8px; overflow-x: auto; padding-top: 13px; padding-bottom: 13px; }
.cat-nav a {
  flex-shrink: 0; padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); transition: all .2s ease;
}
.cat-nav a:hover { color: var(--heading); border-color: var(--volt); }

.policy-wrap { max-width: 780px; }
.policy-wrap h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 20px; }
.policy-wrap h3 {
  font-size: 17px; margin: 30px 0 10px;
  padding-left: 14px; border-left: 3px solid var(--spark);
}
.policy-wrap p { font-size: 15.5px; color: var(--text-muted); }
.policy-wrap p a, .policy-wrap li a, .policy-wrap .policy-callout a {
  color: var(--accent-text); font-weight: 600;
}
.policy-callout {
  display: block; margin: 0 0 22px; padding: 16px 20px;
  border-left: 3px solid var(--spark);
  background: rgba(255,122,26,.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px; color: var(--text); line-height: 1.7;
}
.policy-callout strong { color: var(--heading); }

.policy-list { counter-reset: pl; margin: 0 0 18px; padding: 0; list-style: none; }
.policy-list li {
  position: relative; counter-increment: pl;
  padding-left: 38px; margin-bottom: 12px;
  font-size: 15.5px; color: var(--text-muted); line-height: 1.7;
}
.policy-list li::before {
  content: counter(pl);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,122,26,.12); color: var(--spark);
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.policy-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 34px; padding: 20px 24px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { transition: color .2s ease; }
.footer-legal a:hover { color: var(--spark); }


/* ==========================================================================
   SHOWPIECE LAYER
   Everything below is progressive enhancement: any browser that does not
   support a feature simply renders the site as it was.
   ========================================================================== */

/* --- 1. Cross-document view transitions -------------------------------- */
@view-transition { navigation: auto; }

/* The chrome stays put while the page content crossfades beneath it. */
.site-header { view-transition-name: site-header; }
.fab-wrap    { view-transition-name: fab-launcher; }
.site-footer { view-transition-name: site-footer; }

::view-transition-old(root) {
  animation: vtOut .28s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: vtIn .42s cubic-bezier(0,0,.2,1) both;
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(14px) scale(.995); } }

/* --- 2. Scroll-driven: reading progress + hero parallax ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 700;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--spark), var(--amber), var(--volt));
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progressGrow { to { transform: scaleX(1); } }

  /* the hero illustration drifts and fades as the page moves under it */
  .hero-visual {
    animation: heroDrift linear both;
    animation-timeline: view(block);
    animation-range: exit-crossing 0% exit 100%;
  }
  @keyframes heroDrift {
    to { transform: translateY(-46px) scale(.94); opacity: .35; }
  }
}
/* Without scroll timelines the bar is simply never shown. */
@supports not (animation-timeline: scroll()) {
  .scroll-progress { display: none; }
}

/* --- 3a. Cards tilt toward the pointer --------------------------------- */
/* The grid supplies the perspective so sibling cards share one vanishing
   point, which reads as depth rather than as each card warping alone. */
.grid, #partner-stock .grid { perspective: 2600px; }
.prod-card, .proj-card, .news-card { transform-style: preserve-3d; }

/* --- 3b. Gradient border that follows the cursor ----------------------- */
.prod-card::after,
.proj-card::after,
.news-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  border-radius: inherit; padding: 1.4px;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 138, 40, .85), rgba(34, 211, 238, .4) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.prod-card:hover::after,
.proj-card:hover::after,
.news-card:hover::after { opacity: 1; }

/* --- 3. Pointer-tracked spotlight -------------------------------------- */
.prod-card::before,
.proj-card::before,
.news-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 154, 74, .2), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.prod-card:hover::before,
.proj-card:hover::before,
.news-card:hover::before { opacity: 1; }
[data-theme="light"] .prod-card::before,
[data-theme="light"] .proj-card::before,
[data-theme="light"] .news-card::before {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 122, 26, .16), transparent 68%);
}

/* --- 4. Brands marquee -------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden; flex: 1; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 18px; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  color: var(--text-muted); white-space: nowrap;
  transition: color .3s ease;
}
.marquee-track span:hover { color: var(--accent-text); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- 5. Hero headline word reveal -------------------------------------- */
.hero h1 .w {
  display: inline-block;
  opacity: 0; transform: translateY(24px) rotate(1.5deg);
  animation: wordRise .8s var(--ease) forwards;
  animation-delay: calc(var(--wi) * 55ms);
}
@keyframes wordRise { to { opacity: 1; transform: none; } }

/* Nothing here should move for a visitor who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .prod-card:hover, .proj-card:hover, .news-card:hover { transform: none; }
  .section-head h2::after { transition: none; transform: scaleX(1); }
  .marquee-track { animation: none; }
  .hero h1 .w { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  @supports (animation-timeline: scroll()) {
    .hero-visual { animation: none; }
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ==========================================================================
   SECTION COMPOSITION
   Breaks the repeated "heading + N identical cards" template: an asymmetric
   pillar layout for the three disciplines, a featured-plus-two layout for
   the projects teaser, and a numbered process strip for the About page,
   so three different kinds of content stop looking like the same block.
   ========================================================================== */

/* --- Pillar bento (home: Power / Lighting / Security) ------------------ */
.pillar-bento {
  display: grid; grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, minmax(150px, 1fr));
  gap: 26px;
}
.pillar-bento .pillar-lg { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.pillar-lg {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--stage-bg), #223045 120%);
  border-color: rgba(255,122,26,.22);
  padding: 46px 42px;
}
.pillar-lg::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, #000, transparent 72%);
}
.pillar-lg > * { position: relative; z-index: 1; }
.pillar-flag {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--spark-2); background: rgba(255,122,26,.14);
  border: 1px solid rgba(255,122,26,.3);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.pillar-lg h3 { color: #fff; font-size: 27px; }
.pillar-lg p { color: rgba(255,255,255,.74); font-size: 15.5px; max-width: 34em; }
.pillar-lg .row-link { color: var(--spark-2); }
.pillar-lg:hover { border-color: rgba(255,122,26,.4); }
.pillar-lg::after { background: linear-gradient(90deg, var(--spark-2), var(--volt)); }

/* Each discipline is lit in its own colour: the heading takes the hue, the
   icon and the card edge carry the glow. --p-* is set per card below. */
.pillar { --p-col: var(--power); --p-glow: var(--power-glow); }
.pillar-light  { --p-col: var(--light);  --p-glow: var(--light-glow); }
.pillar-secure { --p-col: var(--secure); --p-glow: var(--secure-glow); }
.pillar h3, .pillar-lg h3 { color: var(--p-col); text-shadow: 0 0 18px var(--p-glow); }
.pillar-icon { color: var(--p-col); filter: drop-shadow(0 0 10px var(--p-glow)); transition: filter .35s ease, transform .35s var(--ease); }
.pillar:hover .pillar-icon { filter: drop-shadow(0 0 16px var(--p-col)); transform: scale(1.06); }
.pillar-light:hover  { border-color: rgba(255,201,77,.45); box-shadow: var(--shadow-lg), 0 0 30px -8px var(--light-glow); }
.pillar-secure:hover { border-color: rgba(34,211,238,.45); box-shadow: var(--shadow-lg), 0 0 30px -8px var(--secure-glow); }
.pillar-light .row-link  { color: var(--light); }
.pillar-secure .row-link { color: var(--secure); }
/* The power card is twice the height of its neighbours, so its range is
   laid out as lit chips rather than left as a paragraph over empty space. */
.pillar-tags { margin: 6px 0 22px; gap: 9px; }
.pillar-tags span {
  background: rgba(255,122,26,.1); color: #ffb257;
  border-color: rgba(255,122,26,.3);
  box-shadow: 0 0 12px -4px rgba(255,122,26,.5);
}
/* The power card keeps its dark stage in the light theme, so its heading and
   icon keep the bright dark-theme colours rather than the deepened ones. */
[data-theme="light"] .pillar-lg h3 { color: #ffb257; text-shadow: 0 0 18px rgba(255,122,26,.5); }
[data-theme="light"] .pillar-lg .pillar-icon { color: #ff7a1a; filter: drop-shadow(0 0 10px rgba(255,122,26,.55)); }
@media (max-width: 860px) {
  .pillar-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .pillar-bento .pillar-lg { grid-row: auto; }
}

/* --- Featured-plus-two (home: projects teaser) -------------------------- */
.proj-teaser-grid {
  display: grid; grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, minmax(190px, 1fr));
  gap: 26px;
}
.proj-teaser-grid > :first-child {
  grid-row: span 2; display: flex; flex-direction: column;
}
.proj-teaser-grid > :first-child .thumb { flex: 1 1 auto; height: auto; min-height: 280px; }
.proj-teaser-grid > :first-child .thumb svg { width: 118px; height: 118px; }
.proj-teaser-grid > :first-child h3 { font-size: 23px; }
.proj-teaser-grid > :first-child p { font-size: 15px; }
@media (max-width: 900px) {
  .proj-teaser-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .proj-teaser-grid > :first-child { grid-row: auto; }
  .proj-teaser-grid > :first-child .thumb { height: 220px; min-height: 0; }
}

/* --- Numbered process strip (about: what you get) ----------------------- */
.process-strip {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.process-strip::before {
  content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--spark), var(--volt));
  opacity: .3;
}
.process-step { position: relative; z-index: 1; }
.process-step .step-num {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--spark);
  box-shadow: var(--shadow-sm), 0 0 16px rgba(255,122,26,.3);
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  color: var(--accent-text); margin-bottom: 18px;
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.process-step:hover .step-num { transform: scale(1.08); box-shadow: var(--shadow-sm), 0 0 22px rgba(255,122,26,.45); }
.process-step h3 { font-size: 18px; margin-bottom: 8px; }
.process-step p { font-size: 14.5px; color: var(--text-muted); margin: 0; }
@media (max-width: 860px) {
  .process-strip { grid-template-columns: 1fr; gap: 30px; }
  .process-strip::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; }
  .process-step { padding-left: 70px; }
  .process-step .step-num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

/* --- Real photography in place of a repeated stat block ------------------ */
.about-photo { height: 100%; min-height: 360px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.about-photo:hover img { transform: scale(1.06); }


/* --- Brand thumbnails (partners page: image proof, not repeated prose) -- */
.brand-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.brand-thumb {
  display: block; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s ease;
}
.brand-thumb:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(255,122,26,.35); }
.brand-thumb:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.brand-thumb .photo-stage, .brand-thumb .icon-stage { height: 148px; }
.brand-thumb .photo-stage img { max-width: 72%; max-height: 72%; }
.brand-thumb .icon-stage svg { width: 52px; height: 52px; }
.brand-thumb-name {
  display: block; padding: 12px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) { .brand-thumb-grid { grid-template-columns: repeat(2, 1fr); } }


/* ==========================================================================
   MASTHEAD CIRCUIT — replaces the boxed "facts" panel that sat on every
   inner-page masthead. Same glowing bulb as the home hero, wires running
   out to floating stat pills that bob gently, instead of a bordered card
   of spreadsheet rows.
   ========================================================================== */
.masthead-circuit { position: relative; min-height: 320px; }
.masthead-circuit svg { width: 100%; height: auto; display: block; overflow: visible; }
.mc-pills { display: contents; }
.mc-pill {
  position: absolute; z-index: 2;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 16px;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-light);
  min-width: 118px; text-align: left;
  animation: mcFloat 6.5s ease-in-out infinite;
}
.mc-pill .v {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 17px; color: var(--heading); letter-spacing: -.01em; white-space: nowrap;
}
.mc-pill .k {
  display: block; font-size: 11px; color: var(--text-muted);
  margin-top: 2px; white-space: nowrap;
}
.mc-pill:nth-of-type(1) { left: 0%;  top: 8%;  animation-delay: 0s; }
.mc-pill:nth-of-type(2) { left: 66%; top: 2%;  animation-delay: 1.6s; }
.mc-pill:nth-of-type(3) { left: 2%;  top: 70%; animation-delay: .8s; }
.mc-pill:nth-of-type(4) { left: 68%; top: 76%; animation-delay: 2.3s; }
@keyframes mcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (max-width: 900px) {
  .masthead-circuit { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .masthead-circuit svg { max-width: 230px; }
  .mc-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .mc-pill { position: static; animation: none; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .mc-pill { animation: none; } }

/* ==========================================================================
   AMBIENT CIRCUIT — a second, fixed decorative layer behind every page:
   large slow-drifting circuit traces and pulsing nodes, distinct from the
   aurora wash and grid already in place. Very low opacity, never
   intercepts clicks.
   ========================================================================== */
.ambient-circuit {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.ac-shape {
  position: absolute; height: auto;
  filter: drop-shadow(0 0 9px rgba(255,153,64,.4));
  opacity: 1;
}
[data-theme="light"] .ac-shape {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255,122,26,.35));
}
.ac-shape.volt { filter: drop-shadow(0 0 9px rgba(80,220,245,.4)); }
[data-theme="light"] .ac-shape.volt { filter: drop-shadow(0 0 6px rgba(34,211,238,.35)); }

.ac-1 { top: 9%;  left: 3.5%; width: 150px; animation: acBob 15s ease-in-out infinite; }
.ac-2 { top: 22%; right: 4%;  width: 110px; animation: acBob 12s ease-in-out infinite 1.4s; }
.ac-3 { top: 58%; left: 2%;   width: 130px; animation: acBob 17s ease-in-out infinite .6s; }
.ac-4 { bottom: 14%; right: 3%; width: 160px; animation: acBob 14s ease-in-out infinite 2.1s; }
.ac-5 { bottom: 30%; left: 8%; width: 90px;  animation: acBob 10s ease-in-out infinite .9s; }
.ac-6 { top: 42%; right: 12%; width: 70px;   animation: acBob 11s ease-in-out infinite 1.8s; }
@keyframes acBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.2deg); }
}
@media (max-width: 700px) {
  .ac-2, .ac-4, .ac-6 { display: none; }
  .ac-1, .ac-3, .ac-5 { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-shape { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
:where(.reveal) { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
:where(.reveal.in) { opacity: 1; transform: none; }
.reveal.in { will-change: auto; }
.skip-link { position: absolute; left: -999px; background: #b03d0a; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }
.brand-strip { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.brand-strip span { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text-muted); }
/* Sharing one row with the label and the button leaves the logos barely a
   chip wide on a phone, so below 820px each part takes its own line. */
@media (max-width: 820px) {
  .brand-strip { flex-direction: column; align-items: center; gap: 16px; }
  /* The track is max-content wide, so the marquee needs a definite width here
     or it drags the whole column out to the full length of the logo run. */
  .brand-strip .marquee { width: 100%; flex: none; }
}

/* --- Supplier brand logos ----------------------------------------------
   Each brand's real logo sits on a light chip. The chip stays light in both
   themes on purpose: these are other companies' trademarks, so they show in
   their own colours rather than being tinted to match ours. --logo-h tunes
   optical weight — a wide wordmark and a square badge look equally sized
   only at different heights. */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; height: 58px; padding: 0 18px; min-width: 152px;
  background: linear-gradient(180deg, #fff, #eff2f6);
  border: 1px solid rgba(13, 20, 29, .1); border-radius: 12px;
  box-shadow: 0 2px 10px rgba(6, 11, 18, .18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.brand-logo img {
  display: block; width: auto; height: auto;
  max-height: var(--logo-h, 28px); max-width: 128px; object-fit: contain;
}
/* Eurolux only publish a reversed (white) wordmark, so their chip carries
   their own brand red — the pairing they use for their own icon. */
.brand-logo.on-brand { background: var(--brand-fill); border-color: transparent; }
.brand-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(6, 11, 18, .28);
}
.lede { font-size: 18px; color: var(--text-muted); }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   Small-screen refinements
   Long button labels ("Enquire About Eagle Eye Networks") would not wrap and
   forced cards wider than the viewport, so buttons wrap below 560px and the
   gutters tighten as the screen narrows.
   ========================================================================== */
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
  .card, .partner-card, .form-card, .quote-card { padding: 24px; }
  .distribute-panel { padding: 22px; }
  .pad { padding: 66px 0; }
  .pad-sm { padding: 42px 0; }
  .section-head { margin-bottom: 34px; }
  .icon-btn { width: 40px; height: 40px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-word { font-size: 17px; }
  .hero { padding: calc(var(--nav-h) + 54px) 0 66px; }
  .hero-stats { gap: 22px; margin-top: 34px; }
  .page-hero { padding: calc(var(--nav-h) + 36px) 0 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .fab-wrap { right: 16px; bottom: 16px; gap: 11px; }
  .fab-main { width: 58px; height: 58px; }
  .fab-btn { width: 50px; height: 50px; }
  .fab-btn svg { width: 23px; height: 23px; }
  .chat-panel { right: 16px; bottom: 88px; }
  .modal-body { padding: 26px 22px 30px; }
  .stat-strip .stat { padding: 22px 16px; }
  .policy-wrap h2 { font-size: 25px; }
}

@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .brand-word { font-size: 16px; }
  .icon-btn { width: 38px; height: 38px; }
  .nav-cta { gap: 8px; }
  .card, .partner-card, .form-card { padding: 20px; }
  .hero h1 { font-size: 29px; }
  .stat-strip strong { font-size: 27px; }
}

/* Product codes and long words must never push a card sideways */
h1, h2, h3, h4, p, li, .brand-line, .search-meta { overflow-wrap: break-word; }

/* Comfortable tap targets on the card call-to-action links */
.row-link { min-height: 34px; align-items: center; }
@media (hover: none) {
  .row-link { min-height: 40px; }
  .footer-grid ul a, .footer-legal a { display: inline-block; padding: 3px 0; }
}

/* Phones held sideways: keep the modal usable when height is scarce */
@media (max-height: 480px) and (orientation: landscape) {
  .modal-card { grid-template-columns: 1fr 1fr; max-height: 100vh; }
  .modal-gallery { min-height: 0; }
  .modal-body { padding: 20px; }
  .chat-panel .ch-body { max-height: 130px; }
}

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