/* ==========================================================================
   Optima Ideas / InnovAIte Slovakia — static website
   Design tokens verified against client-supplied final page mockups
   (vstup.images/1-5 - *.png) and brand assets (vstup.images/*.svg, *.png)
   ========================================================================== */

/* Self-hosted webfonts (Barlow Semi Condensed + Outfit) — no external CDN dependency */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-semi-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --color-red: #ad3335;
  --color-red-60: #c93d3d;
  --color-red-dark: #8a292b;

  --color-black: #151616;
  --color-dark-90: #252627;
  --color-dark-80: #39393a;
  --color-dark-70: #525254;
  --color-dark-60: #68696b;
  --color-grey-40: #a7a8ab;
  --color-grey-30: #c6c6c8;
  --color-grey-20: #dfe0e0;
  --color-grey-10: #f3f3f4;
  --color-white: #ffffff;

  --font-display: 'Barlow Semi Condensed', sans-serif;
  --font-body: 'Outfit', sans-serif;

  --container-w: 1496px;
  --gutter: clamp(20px, 5vw, 96px);
  /* Reading column on the detail pages — every block in the stack shares it
     and is centred in the container, instead of hugging the left gutter with
     an empty half-page beside it. */
  --text-col: 760px;
  /* The deployment panel is a panel, not a paragraph: it breaks out of the
     reading column by ~200px on each side while staying centred on it. */
  --panel-col: 1176px;

  --radius-sm: 8px;
  --radius-md: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* Watermark heading — huge faint text behind section titles ------------- */

.watermark-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.watermark {
  font-family: var(--font-body);
  font-weight: 700;
  /* As large as the word can be without crossing either boundary — whichever
     cap bites first wins:
       --wm-max-height  the vertical band between the header pill (its bottom
                        edge sits at 104px) and the bottom of .page-header.
                        A fixed px band, so a fixed size — a vw term here would
                        drift the cap up behind the pill on wide screens.
                        Mobile re-states it in the 768px query, where
                        .page-header drops to 280px.
       --wm-width-ratio the word's advance width in em, so the width cap solves
                        for "the last letter lands on the right edge". Differs
                        per word, so each page sets its own next to the text.
       --wm-reserve     width taken off the right before solving, for whatever
                        the word must stop short of. */
  --wm-max-height: 19.5rem;
  --wm-width-ratio: 4.2;
  --wm-reserve: 40px;
  font-size: min(var(--wm-max-height), calc((100vw - var(--wm-reserve)) / var(--wm-width-ratio)));
  line-height: 0.78;
  color: var(--color-grey-40);
  opacity: 0.2;
  white-space: nowrap;
  user-select: none;
  transform: translate(-0.05em, 0%);
}
/* Behind a page caption the word is decoration only, so it sits fainter than
   the section watermarks, which carry more of their block's weight. */
.page-header .watermark { color: var(--color-white); opacity: 0.1; }
/* This section pins an .ai-badge to its bottom-right corner, which the
   watermark would otherwise run underneath. Reserving the badge's own width
   (same clamp) makes the word stop at it instead. */
.bg-soft .watermark { --wm-reserve: calc(40px + clamp(60px, 6.4vw, 110px)); }

/* Buttons — "ticket" shape with clipped corner --------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 30px 18px 26px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn i { font-size: 0.85em; font-weight: 900; color: var(--color-red); }
.btn-outline {
  background: var(--color-grey-20);
  color: var(--color-red);
  border: none;
}
.btn-outline:hover { background: var(--color-white); }
.btn-solid {
  background: var(--color-red-dark);
  color: var(--color-white);
}
.btn-solid i { color: var(--color-white); }
.btn-solid:hover { background: var(--color-red); }
.btn-light {
  position: relative;
  background: var(--color-grey-30);
  color: var(--color-red);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn-light::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-white);
  clip-path: inherit;
  border-radius: inherit;
  z-index: -1;
}
.btn-light:hover::before { background: var(--color-grey-10); }

/* Header / nav ----------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(21,22,22,0.08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  max-width: none;
  padding-left: 28px;
  padding-right: 28px;
}
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-left: auto;
  margin-right: 44px;
}
.nav-links a {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-black);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a.active,
.nav-links a:hover { color: var(--color-red); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
/* The other language is a link to its counterpart page; the current one is a
   plain span, so there's nothing to click that lands you back where you are. */
.lang-switch a,
.lang-switch .active {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-grey-40);
  padding: 4px 0;
}
.lang-switch a { cursor: pointer; }
.lang-switch .active {
  color: var(--color-red);
  border-bottom: 2px solid var(--color-red);
}
.lang-switch .sep { color: var(--color-grey-30); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-black);
  border-radius: 999px;
  display: block;
}

/* Hero (home) ------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1728 / 798;
  background: #fff;
}
.hero-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.42) 35%, rgba(255,255,255,0.08) 65%, rgba(255,255,255,0) 80%);
}
.hero .container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.hero-content { max-width: 788px; position: relative; z-index: 2; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.63vw, 5rem);
  line-height: 1.0;
  color: var(--color-black);
  margin-bottom: 14px;
}
.hero p {
  color: var(--color-dark-60);
  font-size: clamp(1rem, 1.39vw, 1.5rem);
  max-width: 560px;
}

/* Page header (inner pages) ---------------------------------------------- */

.page-header {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  background: var(--color-grey-10);
  padding: 140px 0 60px;
}
.page-header .container { z-index: 1; }
.page-header .header-inner { max-width: 600px; margin-left: auto; margin-right: auto; }
.page-header .header-inner--offset { margin-left: 33%; margin-right: 0; }
/* .section-bg-continue is anchored at top:100% — outside the section box — so
   the header can't clip its own overflow when it carries one. The watermark is
   still clipped by .watermark-layer's own overflow:hidden. */
.page-header.has-bg-continue { overflow: visible; }
.page-header.detail-header { padding-bottom: 0; }
/* Centred on the same column as the copy below it, then pulled left by the
   back button's own footprint (48px wide + the 24px gap) so the heading — not
   the button — starts on the column's left edge and the button sits beside the
   column. `left` shifts it visually only, so the heading keeps the column's
   width. The clamp gives back whatever of those 72px the page can't spare:
   once the free space either side of the column runs out, the shift goes to
   zero and the button falls back into the flow instead of off-canvas. */
.detail-header-top {
  padding-top: 10px;
  padding-bottom: 90px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  /* This one is itself a .container, so the column width has to carry its
     gutter padding to end up on the same edges as the copy below. */
  max-width: calc(var(--text-col) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: clamp(-72px, calc((var(--text-col) + 2 * var(--gutter) - 100vw) / 2), 0px);
}
.detail-header-body { padding-top: 56px; padding-bottom: 72px; }
/* Detail headers whose body copy lives in the spec list below instead have no
   .detail-header-body to supply the section's bottom air, so the title block
   carries it. */
.detail-header--no-body .detail-header-top { padding-bottom: 150px; }
/* Hairline separating the title block from the body copy. Full-bleed rather
   than container-width, so it reads as a section rule and not an underline. */
.detail-header-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
/* The 72px gap below the capability images (.detail-header-body's own
   padding-bottom) is mirrored here on the next section's top, so the divider
   sits exactly halfway between the images above and "Detection Modules"
   below — not wherever the section box itself happens to end. */
/* The deployment box that ends the section needs more air beneath it than the
   generic 80px gives, or the tag pills read as crowding the band below. The
   stepped corner decoration is anchored to this section's bottom edge, so it
   travels with the new boundary and stays flush against the next section. */
.detail-header + .cta-lead-in { padding-top: 72px; padding-bottom: 184px; }
.page-header::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--color-grey-20);
  z-index: 1;
}
.section-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  z-index: 0;
}
/* Lets the section background image carry on past the section edge, so its
   diagonal runs unbroken into whatever follows and then fades out. The window
   is exactly as tall as its section, so shifting the image up by 100% resumes
   it at the pixel the section cut it off — at any viewport size. */
.section-bg-continue {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 80%);
}
/* The short page-headers (research/products/contact) are only 340px tall, so
   the 100%-based window above barely reveals any of the image before the mask
   fades it out — .detail-header is tall enough on its own that the same rule
   already produces the long reach we want everywhere. Here we detach the
   window from the section's own (short) height and give it a fixed, deeper
   one instead, while keeping the image's shift pinned to the actual 340px
   crop so it still picks up exactly where the visible background left off. */
.page-header.has-bg-continue:not(.detail-header) .section-bg-continue {
  height: 880px;
}
.page-header.has-bg-continue:not(.detail-header) .section-bg-continue img {
  top: -340px;
}
.section-bg-continue img {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
}
.page-header h1 {
  /* Same cut as the home hero h1 (and the detail headers): Barlow at 400. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  /* Body leading would open a gap between the caption's two lines. */
  line-height: 1.05;
  color: var(--color-black);
  position: relative;
  z-index: 1;
}
.page-header .subtitle-line {
  color: #39393A;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.page-header p.lead {
  color: var(--color-dark-70);
  max-width: 640px;
  margin-top: 18px;
  font-size: 1rem;
  position: relative;
  z-index: 1;
}
.detail-header h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 4.63vw, 5rem);
  line-height: 1;
}
.detail-header .subtitle-line {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.39vw, 1.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-dark-80);
}
.detail-header-body .section-lead {
  color: var(--color-dark-70);
  font-size: clamp(0.9rem, 1.16vw, 1.25rem);
}
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--color-grey-20);
  border-radius: var(--radius-sm);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
  /* Centers the button against the h1's own line box (font-size, since
     line-height:1) rather than the flex row's full height, which would
     include the subtitle line below it. */
  margin-top: calc((clamp(2.5rem, 4.63vw, 5rem) - 48px) / 2);
  color: var(--color-red);
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(21,22,22,0.06);
}
.back-link i { transform: scaleX(-1); }

/* Sections ----------------------------------------------------------------*/

section { padding: 80px 0; position: relative; }
section.tight { padding: 48px 0; }
.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.05vw, 4.375rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-red);
  margin-bottom: 18px;
}
.section-title.dark {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--color-black);
}
.section-title--compact { margin-top: 44px; font-size: 1.4rem; }
/* Everything in the detail stack rides the same centred column ------------ */
.detail-header-body .section-lead,
.detail-header-body .section-title--compact,
.capability-list,
.capability-images,
.spec-block {
  max-width: var(--text-col);
  margin-left: auto;
  margin-right: auto;
}
.detail-header-body .section-title--compact {
  color: var(--color-red);
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
}
.section-title.h1-style {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.63vw, 5rem);
  line-height: 1;
  letter-spacing: normal;
  color: var(--color-black);
}
.section-subblock { margin-top: 64px; }
.section-cta { margin-top: 32px; }
.section-lead {
  color: var(--color-black);
  font-size: clamp(1rem, 1.39vw, 1.5rem);
  max-width: 620px;
}
.section-lead--large {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.74vw, 1.875rem);
  max-width: 700px;
}
.section-lead + .section-lead { margin-top: 16px; }
.section-lead--wide { max-width: var(--text-col); }
.section-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.bg-soft {
  position: relative;
  min-height: 500px;
  background: var(--color-grey-10);
}
/* Full-bleed hairline at the section's bottom edge, level with .ai-badge's
   own bottom:0 — matching the page-header watermark divider elsewhere. */
.bg-soft::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--color-grey-20);
  z-index: 1;
}
.section-corner-badge {
  position: absolute;
  top: -40px;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: 2;
}
.ai-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(60px, 6.4vw, 110px);
  height: clamp(60px, 6.4vw, 110px);
  z-index: 1;
}
.bg-research {
  position: relative;
  min-height: 400px;
  background: var(--color-grey-10);
}
.bg-research .section-lead { font-weight: 600; max-width: 600px; }

/* Product cards ------------------------------------------------------------*/

.product-section {
  position: relative;
  overflow: hidden;
}
.product-list {
  display: flex;
  flex-direction: column;
  gap: 168px;
  margin-top: 56px;
  position: relative;
  z-index: 1;
}
.product-list--flush { margin-top: 0; }
.product-card {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 56px;
  align-items: center;
}
.product-card.reverse { grid-template-columns: 1fr 330px; }
.product-card.reverse .thumb { order: 2; }
.product-card.reverse .copy { order: 1; }
.product-card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-grey-10);
}
.product-card .thumb > img:not(.corner-accent) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb img.corner-accent {
  position: absolute;
  width: 96px !important;
  height: 96px !important;
  z-index: 2;
}
.corner-accent.bl { left: -48px; bottom: -48px; }
.corner-accent.tl { left: -48px; top: -48px; }
.product-card .kicker {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 3.01vw, 3.25rem);
  letter-spacing: -0.03em;
  color: var(--color-red);
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
a.kicker:hover,
a.kicker:focus-visible { color: var(--color-red-dark); }
.product-card .subtitle {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.39vw, 1.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-dark-80);
  display: block;
  margin-bottom: 14px;
}
.product-card .desc {
  color: var(--color-dark-70);
  margin-bottom: 24px;
  font-size: clamp(0.9rem, 1.16vw, 1.25rem);
}

/* Research / project list --------------------------------------------------*/

.project-list { position: relative; z-index: 1; }
.mini-project-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.mini-project-list li { position: relative; padding-left: 24px; }
.mini-project-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 10px;
  background: var(--color-red);
}
.mini-project-title { color: var(--color-red); font-weight: 500; font-size: clamp(1.25rem, 1.74vw, 1.875rem); }
.mini-project-subtitle { color: var(--color-black); font-size: clamp(0.9rem, 1.16vw, 1.25rem); display: inline-block; max-width: 420px; }
.project-item {
  padding: 44px 0;
  border-top: 1px solid var(--color-grey-20);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.project-item:first-child { border-top: none; padding-top: 0; }
.project-item .kicker {
  display: block;
  color: var(--color-red);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.project-item h3 {
  color: #68696B;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 18px;
}
.project-item p {
  color: #68696B;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 12px;
}
.project-item .funding-note {
  margin-bottom: 18px;
}
.project-actions { margin-top: 44px; }
.partnership-link {
  display: inline-block;
  color: var(--color-red);
  font-weight: 600;
  text-decoration: underline;
  margin-bottom: 22px;
}

/* Capability list (product detail) ------------------------------------------*/

.capability-list {
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.capability-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
}
.capability-list i {
  color: var(--color-red);
  font-size: 1.15rem;
  flex: none;
  width: 22px;
  text-align: center;
  margin-top: 3px;
}
/* SVG variant of the icon slot above. The supplied icons differ in aspect
   ratio (23x30 up to 38x29), so they get a fixed square box with contain
   rather than a width — otherwise the wide ones sit visibly larger. */
.capability-list img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-top: 2px;
}
.capability-list p { color: var(--color-dark-80); font-size: 0.98rem; }

/* Product shot that sits to the right of the capability list and overlaps it,
   rather than occupying its own full-width row. Pulled up by its own height so
   it optically hangs off the capability card. Staying pinned to the container's
   right edge puts it just outside the centred column, which is where it reads
   as a companion to the list rather than on top of it.

   The studio backdrop the photograph carries is close to the page's own but
   not the same, so the rounded edge and the shadow are what keep it from
   reading as a square patch pasted over the wave. */
.product-cutout {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: auto;
  margin-top: clamp(-320px, -18vw, -120px);
  width: clamp(180px, 22vw, 300px);
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 48px -26px rgba(21,22,22,0.45);
  pointer-events: none;
}

.capability-images {
  display: flex;
  gap: 24px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.capability-images img {
  flex: 1 1 0;
  object-fit: cover;
  height: 220px;
  width: 100%;
}

.spec-block { margin-bottom: 48px; }
.spec-block h3 {
  color: var(--color-red);
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 4px;
}
.spec-block .spec-note {
  color: var(--color-dark-60);
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 14px;
}
.spec-block ul li {
  position: relative;
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--color-grey-20);
  color: var(--color-dark-80);
  font-size: 0.95rem;
}
.spec-block ul li p { margin-top: 10px; }
.spec-block ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 7px; height: 7px;
  background: var(--color-red);
}
.spec-block-hardware {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: center;
}

/* Product gallery -------------------------------------------------------- */

/* Tiles in a 2:4 / 4:2 / 3:3 mosaic on a six-column track, so each row
   alternates which side carries the wide image; every third row is shallower
   than the two above it. The rows are implicit so a gallery of four photos
   gets two rows and nothing else — the three-track pattern repeats for as
   many rows as the tiles need. */
.gallery-grid {
  --gallery-row: clamp(150px, 19vw, 320px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: var(--gallery-row) var(--gallery-row) calc(var(--gallery-row) * 0.78);
  gap: 12px;
  margin-top: 18px;
  /* Collapses up through the block's own 48px rather than adding to it, so
     this is the full gap: twice the usual air before the next section. */
  margin-bottom: 96px;
}
.gallery-item {
  display: block;
  padding: 0;
  border: none;
  background: var(--color-grey-10);
  cursor: pointer;
  overflow: hidden;
  grid-column: span 3;
}
.gallery-item:nth-child(6n+1),
.gallery-item:nth-child(6n+4) { grid-column: span 2; }
.gallery-item:nth-child(6n+2),
.gallery-item:nth-child(6n+3) { grid-column: span 4; }
/* Every odd tile opens a row, so a last tile at an odd position is alone on
   its own — a gallery with an odd number of photos closes on a full-width
   one rather than a half-empty row. */
.gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }

/* Every other photograph on a gallery page opens the same lightbox; the grid
   tiles are already buttons, these are bare images given the same handling.
   pointer-events comes back on for the sake of the product cutout, which
   ignores the pointer where it overlaps the column beside it. */
.is-zoomable { cursor: zoom-in; pointer-events: auto; }
.is-zoomable:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }

/* Lightbox — the page stays faintly visible behind a grey veil rather than
   the usual dark scrim. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Sideways drags belong to the gallery, not to the browser's swipe-to-go-
     back; vertical panning and pinch-zoom are left alone. */
  touch-action: pan-y pinch-zoom;
  background: rgba(223,224,224,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gallery-lightbox.is-open { opacity: 1; visibility: visible; }
/* Shrink-wraps the image so the arrows can be hung off its own edges. */
.gallery-lightbox-figure {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
}
.gallery-lightbox-figure img {
  cursor: zoom-out;
  max-width: min(1370px, 88vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 40px 60px -22px rgba(21,22,22,0.4);
}
/* Same chamfered square as the detail page's back button. Hand-drawn against
   the fixed 72x72 box: 12px corners, a 28px cut off the bottom right, and a
   curve where the cut joins each edge.

   Placed against the overlay rather than the image, so they hold still as
   pictures of different shapes come and go: pinned to the screen edge on a
   phone, walking outward with the viewport only until they reach the widest
   an image can get (685px of half-width plus half an arrow), then stopping. */
.gallery-nav {
  --nav-size: 72px;
  --nav-reach: 721px;
  --nav-inset: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--color-grey-10);
  color: var(--color-red);
  border-radius: 12px;
  clip-path: path("M12 0 H60 A12 12 0 0 1 72 12 V44 Q72 50 67.76 54.24 L54.24 67.76 Q50 72 44 72 H12 A12 12 0 0 1 0 60 V12 A12 12 0 0 1 12 0 Z");
  /* box-shadow would be clipped away with everything else outside the path;
     drop-shadow is applied after the clip and traces the cut corner. */
  filter: drop-shadow(0 6px 14px rgba(21,22,22,0.12));
  transition: background 0.2s ease;
}
.gallery-nav:hover { background: var(--color-white); }
.gallery-nav svg { width: 30px; height: 30px; }
.gallery-nav--prev { left: max(var(--nav-inset), calc(50% - var(--nav-reach))); }
.gallery-nav--prev svg { transform: scaleX(-1); }
.gallery-nav--next { right: max(var(--nav-inset), calc(50% - var(--nav-reach))); }

/* The arrows and the dots share a wrapper so a phone can lay them out as one
   row under the picture. Here the wrapper is not a box at all — the arrows go
   on floating against the viewport and the dots are left out. */
.gallery-bar { display: contents; }
.gallery-dots { display: none; }

.gallery-close {
  position: absolute;
  top: clamp(16px, 2.8vw, 48px);
  right: clamp(16px, 2.8vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  background: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 50%;
  color: var(--color-black);
  font-size: 1.125rem;
  transition: background 0.2s ease;
}
.gallery-close:hover { background: var(--color-grey-10); }

.deployment-box {
  background: var(--color-grey-10);
  border-radius: var(--radius-md);
  padding: 64px 40px;
  margin: 8px auto 0;
  max-width: var(--panel-col);
}
.deployment-box .eyebrow {
  display: block;
  color: var(--color-red);
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-display);
  font-size: 29px;
  font-style: normal;
  font-weight: 300;
  line-height: 90%;
  letter-spacing: -0.87px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 16px; }
.tag-pill {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-grey-20);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-black);
}

/* Contact page ---------------------------------------------------------- */

.contact-block {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  text-align: left;
}
.contact-block h3 {
  color: var(--color-red);
  font-size: 24px;
  margin-bottom: 20px;
}
.contact-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  font-size: 24px;
}
/* em-sized so the icon keeps its proportion to the row text. */
.contact-row i {
  color: var(--color-red);
  font-size: 1.3em;
  width: 1.6em;
  text-align: center;
}
/* The address is assembled from text + a drawn "@" and carries no mailto, so
   harvesters can't lift it straight out of the markup. The SVG is Outfit's own
   at-glyph at weight 400, exported on its font metrics: 0.75em advance, box one
   em tall with the baseline 0.75em down. Sized and offset to match, it sets
   exactly like the typed character at any font size. It comes in as a mask
   rather than an <img> so its colour is a CSS decision. */
.email-plain .at {
  display: inline-block;
  width: 0.75em;
  height: 1em;
  vertical-align: -0.25em;
  background: var(--color-red);
  -webkit-mask: url(../svg/icon-at.svg) no-repeat center / contain;
  mask: url(../svg/icon-at.svg) no-repeat center / contain;
}
/* Breaks that only exist on a phone, where a line is set to a fixed wrap. */
.br-mobile { display: none; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.legal-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-grey-20);
  font-size: 0.95rem;
}
.legal-table td:first-child { color: var(--color-dark-60); width: 240px; }
.legal-table td:last-child { font-weight: 500; }
.legal-note {
  margin-top: 20px;
  color: #68696B;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* CTA banner --------------------------------------------------------------*/

.cta-banner {
  position: relative;
  background: var(--color-dark-70);
  color: var(--color-white);
  text-align: center;
  padding: 88px 0;
}
.cta-banner p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  max-width: 780px;
  margin: 0 auto 32px;
  color: var(--color-white);
  position: relative;
  z-index: 1;
}
.cta-banner .todo-flag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-red-60);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.cta-banner .btn { position: relative; z-index: 1; }

/* Footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--color-dark-70);
  color: var(--color-grey-20);
  padding: 24px 0 72px;
}
.footer-corner-square {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(50px, 5.8vw, 100px);
  height: clamp(50px, 5.8vw, 100px);
  background: var(--color-white);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 48px;
  align-items: center;
  font-size: 0.88rem;
}
.footer-row .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-white);
}
.footer-row .footer-logo img { height: 44px; width: 44px; }
.footer-row .spacer { display: block; flex: 0 1 80px; min-width: 24px; }
.footer-row a:hover { color: var(--color-white); }

/* Decorative corner blocks (page-level) ----------------------------------*/

.deco-corner {
  --corner-size: clamp(56px, 6.7vw, 100px);
  position: absolute;
  width: var(--corner-size); height: var(--corner-size);
  pointer-events: none;
  z-index: 0;
}
.deco-corner--red { background: var(--color-red); }
/* The three blocks form one stepped composition, so every offset is expressed
   in --corner-size rather than fixed px: the red square stays flush with the
   viewport edge and the grey L's sit exactly one square-width inboard of it
   (less 2px, so the shared edges overlap instead of showing a hairline gap).
   Anchoring them to anything else — a gutter, a fixed px — makes them drift
   apart and overlap as the size scales down. */
.bg-research .deco-corner--grey,
.cta-lead-in .deco-corner--grey { right: calc(var(--corner-size) - 2px); bottom: calc(var(--corner-size) * 0.9); transform: rotate(90deg); }
.bg-research .deco-corner--red,
.cta-lead-in .deco-corner--red { right: 0; bottom: calc(var(--corner-size) * -0.1); }
/* Light-grey L mirrored onto the bottom-left corner — sits flush with the
   section's own bottom edge, which is also the footer's top edge. */
.bg-research .deco-corner--grey-bl { left: 0; bottom: 0; transform: rotate(90deg); filter: brightness(0) invert(1); }
.cta-banner .deco-corner--grey { right: calc(var(--corner-size) - 2px); top: 0; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .section-grid,
  .spec-block-hardware {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product-card,
  .product-card.reverse {
    grid-template-columns: 1fr;
  }
  .product-card.reverse .thumb,
  .product-card.reverse .copy { order: initial; }
  /* Buttons run full width here, and a chamfer cut at 12% of that width
     stretches into a long shallow shear across the bottom edge. Measured in
     px instead, the clipped corner keeps the desktop's proportions. */
  .btn {
    clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 28px) 100%, 0 100%);
    /* Same cut with both ends eased into the edges, like the back button.
       shape() is what allows the curves to keep px radii on a percentage-
       sized box; browsers without it fall back to the sharp polygon above. */
    clip-path: shape(
      from 0 0,
      hline to 100%,
      vline to calc(62% - 5px),
      curve to calc(100% - 3.8px) calc(62% + 3.2px) with 100% 62%,
      line to calc(100% - 24.2px) calc(100% - 3.2px),
      curve to calc(100% - 33px) 100% with calc(100% - 28px) 100%,
      hline to 0,
      close);
  }
  .product-card { justify-items: center; text-align: center; }
  .product-card .thumb { max-width: 320px; margin: 0 auto; }
  .product-card .copy { display: flex; flex-direction: column; align-items: center; }
  .product-card .btn { width: 100%; max-width: 480px; justify-content: center; }
  .product-list .product-card:last-child .btn { margin-bottom: 120px; }
  .project-item .btn {
    width: 100%;
    max-width: 480px;
    justify-content: center;
    display: flex;
    margin: 0 auto;
  }
  .project-item:last-child .btn { margin-bottom: 120px; }
  .legal-note { margin-bottom: 168px; }
  .bg-research .btn {
    width: calc(100% - 48px);
    max-width: 480px;
    justify-content: center;
    display: flex;
    margin: 72px auto;
  }
  .bg-research { padding-bottom: 72px; }
  .cta-banner .btn {
    width: calc(100% - 48px);
    max-width: 480px;
    justify-content: center;
    display: flex;
    margin: 0 auto;
    padding: 22px 30px;
    font-size: 1.1rem;
  }
  /* Full-width buttons centre their label across the whole button, so the
     chevron is pinned to the left edge instead of travelling with the label
     into the middle. */
  .product-card .btn,
  .project-item .btn,
  .bg-research .btn,
  .cta-banner .btn { position: relative; }
  .product-card .btn i,
  .project-item .btn i,
  .bg-research .btn i,
  .cta-banner .btn i {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    /* Font Awesome Free only ships the 900 cut, so a heavier chevron has to
       come from stroking the glyph rather than from a bolder face. */
    -webkit-text-stroke: 0.8px currentColor;
  }
  .br-mobile { display: inline; }
  /* Plain white on a phone — the grey ring the desktop button carries reads
     as a stray border at full width. */
  .btn-light { background: var(--color-white); }
  .btn-light::before { content: none; }
  .contact-block h3 { text-align: center; }
  /* The red "@" is a desktop accent; on a phone it sets as plain text. */
  .email-plain .at { background: currentColor; }
  .contact-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  /* Only the line under each icon steps down to body size — .contact-row keeps
     its 24px so the em-sized icon above it doesn't shrink with the text. */
  .contact-row span {
    color: #68696B;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .footer-row {
    flex-direction: column;
    text-align: center;
  }
  .footer-row .footer-logo {
    flex-direction: column;
    gap: 16px;
  }
  .footer-row .spacer { display: none; }
  /* No empty column beside the 760px capability list at this width, so the
     cut-out's negative pull lands it on top of the copy. Back into normal
     flow, centred below the text. */
  .product-cutout {
    margin: 24px auto 0;
    width: clamp(200px, 52vw, 300px);
  }
  .capability-images { flex-direction: column; }
  .capability-images img { height: auto; }
  /* The desktop panel's deep top and bottom air is most of a phone screen. */
  .deployment-box { padding: 36px 24px; }
  /* The mosaic's 2:4 ratio leaves the narrow tile too thin to read at this
     width — plain halves instead. */
  .gallery-grid {
    --gallery-row: clamp(120px, 30vw, 220px);
    grid-auto-rows: var(--gallery-row);
    gap: 8px;
  }
  .gallery-item,
  .gallery-item:nth-child(6n+1),
  .gallery-item:nth-child(6n+2),
  .gallery-item:nth-child(6n+3),
  .gallery-item:nth-child(6n+4) { grid-column: span 3; }
  /* Halves here, so the odd tile left over is the one that goes full width. */
  .gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* No room beside the picture on a phone, so the controls move under it:
     the picture centred, then a row of prev / dots / next across the full
     width. The figure may not grow into the space the row needs, hence the
     shorter cap on the image. */
  .gallery-lightbox {
    flex-direction: column;
    gap: 20px;
    padding: 12px;
  }
  .gallery-lightbox-figure img { max-width: 94vw; max-height: 70vh; }
  .gallery-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(94vw, 100%);
  }
  /* Bare arrows down here — the chamfered plate they wear beside the image
     would read as two buttons competing with the picture above them. */
  .gallery-nav {
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    background: none;
    color: var(--color-black);
    border-radius: 0;
    clip-path: none;
    filter: none;
  }
  .gallery-nav:hover { background: none; }
  .gallery-nav svg { width: 30px; height: 30px; }
  .gallery-dots {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-grey-30);
    transition: background 0.2s ease;
  }
  .gallery-dot.is-current { background: var(--color-dark-80); }
  .gallery-close {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
  .hero { aspect-ratio: 1100 / 798; }
  .hero-content { max-width: 420px; }
}

@media (max-width: 600px) {
  /* On mobile the banner runs full-width at its natural aspect ratio, then
     plain white background carries the heading/copy below it in normal
     flow — rather than the desktop treatment of full-bleed image with text
     overlaid on top (unreadable at this aspect ratio). */
  /* Override the generic mobile "section { padding: 56px 0 }" rule below —
     this layout manages its own spacing. */
  .hero { aspect-ratio: auto; overflow: visible; padding: 0; }
  .hero-banner {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: initial;
  }
  .hero::after {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1100 / 798;
    height: auto;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 55%, #fff 96%);
  }
  .hero .container {
    position: static;
    display: block;
    /* Keep the normal --gutter padding: the 420px content box would
       otherwise sit flush against the screen edges on ~430px phones. */
  }
  .hero-content {
    max-width: 420px;
    margin: -56px auto 0;
    padding-bottom: 48px;
    position: relative;
    z-index: 2;
    text-align: left;
  }
  .hero h1 { font-size: 2.375rem; margin-bottom: 12px; }
  .hero p { font-size: 1.125rem; max-width: none; }
  .section-corner-badge { display: none; }
}

@media (max-width: 768px) {
  .nav-links, .lang-switch { display: none; }
  /* Same red disc as the open (X) state, so the button doesn't gain a ring
     only once it's been tapped. */
  .nav-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    gap: 6px;
    border: 2px solid var(--color-red);
    border-radius: 50%;
  }
  /* Thicker bars so the pill ends actually read as rounded. Bar + gap makes a
     10px pitch: at fractional zoom/DPR all three then land on the same
     subpixel offset and round to the same thickness — on the 9px pitch the
     bars below the first came out a pixel heavier. */
  .nav-toggle span { width: 24px; height: 4px; }

  /* Let the 300x39 logo scale down rather than shove the toggle onto its own
     row on narrow phones. */
  .logo { min-width: 0; }
  .logo img { height: auto; max-height: 32px; max-width: 100%; }

  /* Open menu is a single rounded card: logo and close button share the top
     row, links and language switch sit centred below. Everything stays in
     normal flow, so the card grows with its contents instead of relying on
     offsets that have to be re-measured whenever an item is added. */
  .site-header.nav-open {
    background: var(--color-white);
    border-radius: 20px;
  }
  /* Grid pins the logo and close button to the first row. A wrapping flex row
     wraps before it shrinks, which drops the button below the logo on narrow
     phones. */
  .site-header.nav-open .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo  toggle"
      "links links"
      "lang  lang";
    align-items: center;
    column-gap: 18px;
    height: auto;
    padding-bottom: 44px;
  }
  .site-header.nav-open .logo { grid-area: logo; min-height: 84px; }
  .site-header.nav-open .nav-toggle {
    grid-area: toggle;
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    gap: 0;
    border: 2px solid var(--color-red);
    border-radius: 50%;
  }
  .site-header.nav-open .nav-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    margin: -1px 0 0 -9px;
    background: var(--color-red);
  }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg); }

  .site-header.nav-open .nav-links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 56px 0 12px;
  }
  .site-header.nav-open .nav-links a { font-weight: 400; }

  .site-header.nav-open .lang-switch {
    grid-area: lang;
    display: flex;
    justify-content: center;
    gap: 26px;
    padding-top: 52px;
  }
  .site-header.nav-open .lang-switch .sep { display: none; }
  /* Only the size changes here — the inactive language keeps the desktop's
     grey so it doesn't read as a second active item. */
  .site-header.nav-open .lang-switch a,
  .site-header.nav-open .lang-switch .active { font-size: 1.05rem; }
  .site-header.nav-open .lang-switch .active { color: var(--color-red); }
  section { padding: 56px 0; }
  .detail-header + .cta-lead-in { padding-bottom: 128px; }
  .cta-banner { padding: 56px 0; }
  /* No min-height on a phone: the band hugs the caption, which closes the dead
     space under the header pill and brings the bottom rule — and with it the
     watermark sitting on it — up behind the two lines. */
  /* Shallow bottom padding rather than a deeper top one: the caption keeps its
     tight gap under the header pill and the bottom rule — the watermark's
     baseline — rides up, so the caption sits lower on the word. */
  /* The word keeps its fit-the-width size, so it grows with the viewport; the
     band's floor drops with it (pill bottom 104px + a 24px gap + the ascender
     height of the tightest-set word, ratio 3.6) instead of the word shrinking.
     The baseline rides the floor, so the gap under the pill stays constant. */
  .page-header {
    /* The 14px that used to sit under the caption moved above it, so the
       caption drops onto the word without the band's floor — and the
       watermark riding it — moving with it. */
    padding: 140px 0 0;
    min-height: calc(128px + 0.203 * (100vw - 40px));
  }
  .page-header .subtitle-line { margin-top: 2px; }
  /* Shorter header band here, so the word shrinks to keep its cap on the pill. */
  .watermark { --wm-max-height: 14.5rem; }
  /* The caption runs full width on a phone, so it keeps the gutter instead of
     the desktop third-indent. */
  .page-header .header-inner--offset { margin-left: 0; }
  /* The white wash needs the wide pale band of the desktop header to read; in
     the short phone band the word goes back to a grey ghost. It keeps the
     fit-the-width size, so the whole word stays on screen, with its baseline
     on the band's bottom rule under the caption. */
  .page-header .watermark { color: var(--color-grey-40); opacity: 0.2; }
  /* A phone-width render of the background image isn't tall enough to fill
     the deep desktop window — back off to the self-sized version so the
     continuation still runs out inside the fade instead of hitting a hard
     edge partway through. */
  /* Product detail caption: the back button centres on the whole caption
     block instead of the h1's line box, and the rule below comes in close —
     closer than the caption sits to the header pill — so the two read as one
     unit rather than the caption floating in the middle of the band. */
  .detail-header-top { align-items: center; padding-bottom: 30px; }
  .detail-header--no-body .detail-header-top { padding-bottom: 70px; }
  /* Not a full-bleed hairline here but a short white bar with pill ends, run
     to the container's own edges — the back button starts on the same line. */
  .detail-header-body::before {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    transform: none;
  }
  .back-link {
    margin-top: 0;
    width: 40px;
    height: 40px;
    /* Same straight chamfer as the desktop, but its two ends are eased into
       the edges instead of meeting them at a point. Hand-drawn against the
       fixed 40x40 box: 8px corners, a 10px cut off the bottom right, and a
       3.5px curve where the cut joins each edge. */
    clip-path: path("M8 0 H32 A8 8 0 0 1 40 8 V26.5 Q40 30 37.53 32.47 L32.47 37.53 Q30 40 26.5 40 H8 A8 8 0 0 1 0 32 V8 A8 8 0 0 1 8 0 Z");
    border-radius: var(--radius-sm);
  }
  /* Font Awesome Free ships the solid cut only, so a lighter glyph means a
     smaller one. */
  .back-link i { font-size: 0.8rem; }
  .page-header.has-bg-continue:not(.detail-header) .section-bg-continue { height: 100%; }
  .page-header.has-bg-continue:not(.detail-header) .section-bg-continue img { top: -100%; }
}