/*
 * Shimti Multimedia: section pages
 *
 * Shared stylesheet for about / ai / services / shop / media / contact.
 *
 * Separate from styles.css on purpose. That file styles the homepage's fixed, non
 * scrolling radial interface - it sets overflow:hidden on html and body, which would
 * make a page of prose impossible to scroll. These pages are ordinary documents and
 * need ordinary document behaviour.
 */

@font-face {
  font-family: 'Orbitron';

  /*
   * One variable WOFF2, covering the whole weight axis.
   *
   * This replaces a static Orbitron-Regular.ttf, and fixes two things at once.
   *
   * SIZE. WOFF2 is Brotli-compressed and is the universally supported web font format;
   * raw TrueType is not a web delivery format at all. The variable file is 16KB against
   * the single static weight's 24KB - smaller while carrying every weight rather than one.
   *
   * WEIGHT. Only weight 400 used to be declared, yet the stylesheet asks for 600 in
   * several places and so does the rotating wordmark. With no 600 to load, the browser
   * synthesised one by smearing the regular weight sideways - faux bold, visibly coarser
   * than the real thing, on the brand's own wordmark. The real weights were sitting
   * unused on disk the whole time. Declaring the axis range means 600 now resolves to
   * actual 600.
   */
  src: url('../../shared/fonts/Orbitron-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Preserve document structure for assistive technology without leaving visual remnants
   when a page deliberately replaces or removes its displayed heading. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:root {
  --text-color: #eaffff;
  --muted-color: rgba(234, 255, 255, 0.72);
  --panel-bg: rgba(180, 220, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.65);
  --accent: #8cf;
  --focus-outline: #8cf;
  /* About establishes the site's background grade: cool blue-black, restrained
     saturation, and a stronger falloff toward the bottom. Every major page uses
     this same optical veil while retaining its own subject matter. */
  --site-background-grade: linear-gradient(rgba(0, 8, 14, 0.76), rgba(0, 8, 14, 0.88));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*
 * The window does not scroll; the sheet inside it does.
 *
 * The masthead and the footer are the frame the page is mounted in, so they stay put and
 * only the white area moves - which is also what keeps the frame from sliding away and
 * leaving the doors' surround visible mid-scroll. Using the small viewport unit rather
 * than 100vh so mobile browser chrome cannot push the footer off the bottom.
 */
body {
  margin: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #000;
  color: var(--text-color);
  font-family: 'Orbitron', sans-serif;
  line-height: 1.7;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Form editing remains ordinary even though the surrounding interface is inert. */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Visible only once focused, so keyboard users can jump the header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #000;
  border: 2px solid var(--accent);
  color: var(--text-color);
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

a {
  color: var(--text-color);
  text-decoration-color: rgba(180, 220, 255, 0.6);
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 3px;
}

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

/*
 * Stacked and centred: masthead, then the studio line, then the navigation.
 *
 * The old header put a small wordmark on the left and the nav on the right, which reads as
 * an app toolbar. This is a page - the doors have shut and this is what is printed on them
 * - so it gets a masthead, and the masthead is the biggest thing on it.
 */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(0.5rem, 1.2vw, 0.8rem) clamp(1rem, 4vw, 3rem) clamp(0.45rem, 1vw, 0.7rem);
  text-align: center;
  border-bottom: 1px solid rgba(180, 220, 255, 0.25);
}

/*
 * Wordmark and tagline are one thing, so they are grouped and spaced as one.
 *
 * They used to be two children of the header sharing its gap, which spaced them the same
 * distance apart as the navigation below - so they read as two separate items rather than
 * as a title and its subtitle.
 */
.section-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.section-home {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Masthead scale. Grows with the viewport but stops before it wraps awkwardly on a
     wide monitor. */
  font-size: clamp(1.2rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  text-decoration: none;
}

.section-home img {
  filter: brightness(1.1);
  /* Tied to the text it sits beside, so the lockup keeps its proportions at every size
     rather than the logo drifting relative to the wordmark. */
  width: clamp(2rem, 5vw, 3.25rem);
  height: auto;
}

.section-home-logo-mirror {
  display: none;
}

.section-tagline {
  margin: 0;
  color: var(--muted-color);
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-tagline-cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.section-tagline-line {
  grid-area: 1 / 1;
  justify-self: center;
  width: max-content;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity 1.8s ease-in-out;
}

.section-tagline-line-primary {
  animation: section-tagline-primary 120s ease-in-out infinite;
}

.section-tagline-line-alternate {
  opacity: 0;
  animation: section-tagline-alternate 120s ease-in-out infinite;
}

@keyframes section-tagline-primary {
  0%, 46.667%, 100% { opacity: 1; }
  50%, 96.667% { opacity: 0; }
}

@keyframes section-tagline-alternate {
  0%, 46.667%, 100% { opacity: 0; }
  50%, 96.667% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .section-tagline-line {
    animation: none;
  }

  .section-tagline-line-primary { opacity: 1; }
  .section-tagline-line-alternate { opacity: 0; }
}

.section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-nav a {
  display: block;
  padding: 0.3rem 0.7rem;
  border: 0;
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transform-origin: center;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.section-nav a:hover,
.section-nav a:focus-visible,
.section-nav a:active,
.section-nav a[aria-current="page"],
.section-nav a[aria-current="true"] {
  outline: none;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(164, 220, 248, 0.85),
    0 0 24px rgba(90, 178, 226, 0.55);
  transform: scale(1.08);
}

/* The About presentation keeps its navigation on the page centreline while the brand
   becomes a conventional left-aligned desktop lockup. The header retains the same
   responsive height as the former stacked masthead, so none of the presentation's
   vertical anchors move when this layout takes over. */
@media (min-width: 56.25em) {
  .section-header {
    position: relative;
    height: clamp(7.65rem, 8.8vw, 8.1rem);
    min-height: 0;
    justify-content: center;
  }

  .section-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: clamp(1rem, 4vw, 3rem);
    width: clamp(3.25rem, 5.5vw, 4.75rem);
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 1px solid rgba(180, 220, 255, 0.46);
    border-radius: 50%;
    background: url('../../shared/branding/header-tesseract.gif') center / 84% no-repeat;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .section-brand {
    --about-brand-gap: 0.6rem;
    --about-brand-logo: 2.25rem;
    position: absolute;
    top: 50%;
    left: clamp(1rem, 4vw, 3rem);
    align-items: flex-start;
    text-align: left;
    transform: translateY(-50%);
  }

  .section-home {
    gap: var(--about-brand-gap);
    font-size: 1.15rem;
  }

  .section-home img {
    width: var(--about-brand-logo);
  }

  .section-tagline {
    align-self: stretch;
    width: calc(100% - var(--about-brand-logo) - var(--about-brand-gap));
    margin-left: calc(var(--about-brand-logo) + var(--about-brand-gap));
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-align: center;
  }

  .section-header > nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .section-nav a {
    padding: 0.34rem 0.78rem;
    font-size: 1.05rem;
  }
}

@media (min-width: 56.25em) and (prefers-reduced-motion: reduce) {
  .section-header::after {
    display: none;
  }
}

/* Preserve breathing room between the lockup and the centred navigation in narrower
   desktop windows. Below 900px the original stacked header remains in charge. */
@media (min-width: 56.25em) and (max-width: 74.99em) {
  .section-home {
    font-size: 0.72rem;
  }

  .section-brand {
    --about-brand-gap: 0.25rem;
    --about-brand-logo: 1.4rem;
  }

  .section-tagline {
    font-size: 0.56rem;
    letter-spacing: 0.09em;
  }

  .section-nav {
    gap: 0.2rem;
  }

  .section-nav a {
    padding: 0.31rem 0.48rem;
    font-size: 0.86rem;
    letter-spacing: 0.07em;
  }
}

@media (max-width: 56.24em) {
  .section-brand {
    width: 100%;
  }

  .section-home {
    display: grid;
    grid-template-columns: clamp(2rem, 5vw, 3.25rem) auto clamp(2rem, 5vw, 3.25rem);
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .section-home::after {
    content: '';
    width: clamp(2rem, 5vw, 3.25rem);
    aspect-ratio: 1;
    background: url('../../shared/branding/logo.png') center / contain no-repeat;
    filter: brightness(1.1);
  }

  .section-home-logo-mirror {
    display: none;
  }

  .section-tagline {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Main ---------- */

/*
 * The page itself: a white sheet spanning everything between header and footer.
 *
 * The doors are the dark surround. What is printed on them is an ordinary page, and an
 * ordinary page is a light one - so this is where the sci-fi shell stops and readable
 * long-form content starts. The colours are re-declared rather than inherited, because
 * every token in :root is tuned for light text on black and every one of them is wrong
 * here.
 */
.section-main {
  flex: 1;
  /* Without this a flex child refuses to shrink below its content and scrolls the body
     instead, which is the whole thing being avoided here. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;

  /*
   * The tokens are re-pointed rather than the rules being overridden one by one.
   *
   * Every value in :root is tuned for pale text glowing on black, and every one of them
   * is wrong on a white sheet - the muted grey turns invisible, the panel fill and the
   * borders disappear into the background. Redefining the same names here means each
   * existing rule keeps working and simply resolves to ink instead of light. Anything
   * added to the sheet later inherits the correct palette without knowing this happened.
   *
   * All four foreground values clear WCAG 1.4.3 AA against white: the body text at about
   * 17:1, the muted text and the link colour both around 7:1.
   */
  --text-color: #10151c;
  --muted-color: #4a5560;
  --panel-bg: #f2f5f8;
  --border-color: #c9d3dc;
  --accent: #10517d;
  --focus-outline: #10517d;

  background: #ffffff;
  color: var(--text-color);
}

/* Shop keeps its long-form scrolling document, but places that document on the supplied
   technology field instead of the shared white sheet. The dark veil is deliberately
   uniform: marketplace screenshots vary wildly in brightness, while the prose needs one
   dependable contrast relationship from the top of the catalogue to the bottom. */
.section-main-shop {
  --text-color: #f3fbff;
  --muted-color: #cbd8df;
  --panel-bg: rgba(4, 15, 23, 0.88);
  --border-color: rgba(175, 221, 242, 0.48);
  --accent: #8deaff;
  --focus-outline: #b9efff;

  position: relative;
  background-color: #00080e;
  background-image:
    var(--site-background-grade),
    url('../../pages/shop/background/shop-background.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
}

.shop-rectangle-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.section-main-shop > article {
  position: relative;
  z-index: 2;
}

@media (max-width: 56.249em) {
  .shop-rectangle-field {
    position: fixed;
    contain: strict;
  }
}

.section-main-shop a:hover { color: #ffffff; }

/* Media uses its own network field instead of the shared white reading sheet. */
.section-main-media {
  --text-color: #f3fbff;
  --muted-color: #cbd8df;
  --panel-bg: rgba(4, 15, 23, 0.86);
  --border-color: rgba(175, 221, 242, 0.48);
  --accent: #8deaff;
  --focus-outline: #b9efff;

  position: relative;
  background-color: #00080e;
  background-image:
    var(--site-background-grade),
    url('../../pages/media/background/media-background.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
}

.media-network-flow {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body:has(.section-main-media) > .site-footer {
  position: relative;
  z-index: 3;
}

.section-main-media a:hover { color: #ffffff; }

.section-main.section-main-media > article {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.media-scene-intro {
  position: absolute;
  top: 15rem;
  left: 50%;
  z-index: 3;
  width: min(78rem, calc(100% - 4rem));
  margin: 0;
  transform: translateX(-50%);
  color: #eaffff;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.95);
}

.media-carousel {
  position: absolute;
  top: 20rem;
  right: 0;
  bottom: 0.6rem;
  left: 0;
  z-index: 2;
  outline: none;
}

.media-carousel:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: -2px;
}

.media-carousel-viewport {
  position: absolute;
  inset: 0 0 3.25rem;
  overflow: hidden;
  perspective: 1200px;
}

.media-carousel-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.media-platform-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0.55rem;
  width: min(42rem, 72vw);
  margin: 0;
  padding: 0.8rem;
  border: 1px solid rgba(141, 234, 255, 0.42);
  border-radius: 0.85rem;
  transform: translate(-50%, -50%);
  background: rgba(2, 13, 20, 0.92);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 340ms ease, opacity 240ms ease;
}

.media-platform-card[data-offset='0'] { z-index: 4; opacity: 1; pointer-events: auto; }
.media-platform-card[data-offset='-1'] { transform: translate(-110%, -50%) rotateY(34deg) scale(0.76); opacity: 0.34; }
.media-platform-card[data-offset='1'] { transform: translate(10%, -50%) rotateY(-34deg) scale(0.76); opacity: 0.34; }

.media-platform-visual {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 0.6rem;
  background: #081621;
}

.media-platform-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-platform-visual svg { width: 22%; height: 22%; fill: currentColor; }
.media-platform-visual strong { font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: 0.05em; }
.media-platform-visual--youtube { color: #fff; background: linear-gradient(135deg, #220006, #e62117); }
.media-platform-visual--instagram { color: #fff; background: linear-gradient(135deg, #405de6, #833ab4 40%, #e1306c 72%, #fdc468); }

.media-platform-card h2,
.media-platform-card p { margin: 0; text-align: center; }
.media-platform-card h2 { color: #8deaff; font-size: clamp(0.9rem, 1vw, 1.1rem); }
.media-platform-card p { color: #e7f4fa; font-size: clamp(0.72rem, 0.8vw, 0.9rem); line-height: 1.45; }
.media-platform-card > a {
  justify-self: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(141, 234, 255, 0.58);
  border-radius: 999px;
  color: #eaffff;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.media-carousel-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 0.05rem 0.75rem;
}

.media-carousel-chevron { border: 0; padding: 0 0.2rem; background: transparent; color: #eaffff; font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.media-carousel-dots { display: flex; gap: 0.35rem; }
.media-carousel-dot { width: 0.5rem; height: 0.5rem; padding: 0; border: 1px solid #72b7d2; border-radius: 50%; background: transparent; cursor: pointer; }
.media-carousel-dot.is-active { background: #8deaff; box-shadow: 0 0 0.5rem rgba(141, 234, 255, 0.9); }
.media-carousel-status { grid-column: 1 / -1; margin: 0; color: #eaffff; font-size: 0.62rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

@media (max-width: 56.249em) {
  .section-main-media { overflow-y: auto; }
  .media-network-flow { contain: strict; }
  .section-main.section-main-media > article { height: auto; min-height: 100%; padding-bottom: 1.25rem; }
  .media-carousel { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin-top: 10.5rem; }
  .media-carousel-viewport { position: static; overflow: visible; perspective: none; }
  .media-carousel-track { position: static; display: grid; gap: 1.35rem; padding: 0 0.5rem; transform: none; }
  .media-platform-card,
  .media-platform-card[data-offset='-1'],
  .media-platform-card[data-offset='0'],
  .media-platform-card[data-offset='1'] {
    position: static;
    display: grid;
    width: 100%;
    padding: 0.6rem;
    gap: 0.38rem;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .media-platform-card h2 { font-size: 0.78rem; }
  .media-platform-card p { font-size: clamp(0.62rem, 2.8vw, 0.76rem); }
  .media-platform-card > a { padding: 0.32rem 0.55rem; font-size: 0.58rem; }
  .media-carousel-controls { display: none; }
}

/* Contact uses the supplied fibre field instead of the shared white reading sheet. */
.section-main-contact {
  --text-color: #f3fbff;
  --muted-color: #cbd8df;
  --panel-bg: rgba(4, 15, 28, 0.86);
  --border-color: rgba(175, 221, 242, 0.48);
  --accent: #8deaff;
  --focus-outline: #b9efff;

  position: relative;
  background-color: #00080e;
  background-image:
    var(--site-background-grade),
    url('../../pages/contact/background/contact-background.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
}

.contact-lightning-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../../pages/contact/background/contact-background.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  filter: brightness(1.42) saturate(0.38) contrast(1.04);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.section-main-contact a:hover { color: #ffffff; }

/* Contact is an interactive project brief rather than a long-form reading page. */
.section-main.section-main-contact > .contact-scene {
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 2;
  min-height: calc(100svh - var(--header-height, 5rem) - var(--footer-height, 2.5rem));
  padding: clamp(14.5rem, 27vh, 17rem) clamp(1rem, 3vw, 3rem) 3.5rem;
}

.contact-scene-intro {
  position: absolute;
  top: clamp(9.5rem, 18vh, 11.25rem);
  left: 50%;
  z-index: 3;
  width: min(72rem, calc(100% - 3rem));
  margin: 0;
  transform: translateX(-50%);
  color: #eaffff;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: 0.035em;
  text-align: center;
}

.contact-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(76rem, 100%);
  margin: 0 auto;
}

.contact-panel {
  min-width: 0;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid rgba(141, 234, 255, 0.48);
  border-radius: 1.25rem;
  background: rgba(2, 12, 24, 0.88);
  box-shadow: 0 0 2rem rgba(38, 151, 190, 0.1);
  backdrop-filter: blur(12px);
}

.contact-panel h2,
.contact-panel h3 {
  margin: 0;
  color: #8deaff;
  text-transform: uppercase;
}

.contact-panel h2 { font-size: clamp(1rem, 1.4vw, 1.3rem); }
.contact-panel h3 { font-size: 0.76rem; }

.contact-brief-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.9rem;
}

.contact-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.contact-brief-form label,
.contact-summary-label {
  display: grid;
  gap: 0.35rem;
  color: #dcebf2;
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
}

.contact-brief-form label > span { color: #9db0ba; font-size: 0.65rem; }

.contact-brief-form input,
.contact-brief-form select,
.contact-brief-form textarea,
.contact-summary {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(141, 234, 255, 0.42);
  border-radius: 0.55rem;
  background: rgba(242, 250, 253, 0.96);
  color: #07131d;
  font: 0.82rem/1.45 'Orbitron', sans-serif;
}

.contact-brief-form input,
.contact-brief-form select { min-height: 2.65rem; padding: 0.55rem 0.65rem; }
.contact-brief-form textarea,
.contact-summary { padding: 0.7rem; resize: vertical; }

.contact-brief-form input:focus-visible,
.contact-brief-form select:focus-visible,
.contact-brief-form textarea:focus-visible,
.contact-summary:focus-visible {
  border-color: #8deaff;
  outline: 2px solid rgba(141, 234, 255, 0.72);
  outline-offset: 2px;
}

.contact-summary-label { margin-top: 0.9rem; }
.contact-summary { min-height: 13.25rem; margin-top: 0.5rem; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.contact-actions a,
.contact-actions button,
.contact-routes a {
  border: 1px solid rgba(141, 234, 255, 0.65);
  border-radius: 999px;
  background: rgba(5, 25, 39, 0.92);
  color: #eaffff;
  font: 0.7rem/1 'Orbitron', sans-serif;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
}

.contact-actions a,
.contact-actions button { padding: 0.72rem 1rem; }
.contact-actions .contact-primary-action { background: #8deaff; color: #06121c; }
.contact-actions a:hover,
.contact-actions button:hover,
.contact-routes a:hover { border-color: #fff; box-shadow: 0 0 0.9rem rgba(141, 234, 255, 0.42); }

.contact-copy-status { min-height: 1.2em; margin: 0.5rem 0 0; color: #8deaff; font-size: 0.68rem; }

.contact-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(175, 221, 242, 0.25);
}

.contact-routes a { padding: 0.52rem 0.75rem; }

.contact-expectations {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(175, 221, 242, 0.25);
}

.contact-expectations ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  color: #cbd8df;
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (min-width: 56.25em) {
  .contact-page .section-main-contact {
    overflow: hidden;
  }

  .section-main.section-main-contact > .contact-scene {
    height: 100%;
    min-height: 0;
    padding-top: clamp(17rem, 31vh, 19rem);
    padding-bottom: clamp(0.75rem, 2vh, 1.5rem);
  }

  .contact-scene-intro {
    top: clamp(10.75rem, 20vh, 12.25rem);
  }

  .contact-workspace {
    width: min(88rem, calc(100% - 3rem));
    height: min(34rem, calc(100% - clamp(17rem, 31vh, 19rem) - 0.75rem));
  }

  .contact-panel {
    height: 100%;
    padding: clamp(1.35rem, 2vw, 1.85rem);
  }
}

@media (max-width: 56.249em) {
  .section-main-contact { background-attachment: scroll; }
  .contact-lightning-flash { background-attachment: scroll; }

  .section-main.section-main-contact > .contact-scene {
    min-height: auto;
    padding: 12.35rem 0.7rem 1.5rem;
  }

  .contact-scene-title {
    top: 0.55rem;
    max-width: calc(100% - 1.4rem);
    font-size: clamp(2.25rem, 13vw, 4.5rem);
  }

  .contact-scene-intro {
    top: 6.55rem;
    width: calc(100% - 1.7rem);
    font-size: clamp(0.72rem, 3.25vw, 0.88rem);
    line-height: 1.4;
  }

  .contact-workspace { grid-template-columns: 1fr; gap: 0.85rem; }
  .contact-panel { padding: 0.9rem; border-radius: 1rem; }
  .contact-field-row { grid-template-columns: 1fr; }
  .contact-brief-form { gap: 0.7rem; }
  .contact-brief-form input,
  .contact-brief-form select { min-height: 2.5rem; }
  .contact-summary { min-height: 12rem; }
  .contact-actions > * { flex: 1 1 8rem; text-align: center; }
}

.shop-scene-intro {
  position: absolute;
  top: clamp(10rem, 20vh, 12rem);
  left: 50%;
  z-index: 3;
  width: min(72rem, calc(100% - 3rem));
  margin: 0;
  transform: translateX(-50%);
  color: #eaffff;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.section-main.section-main-shop > article {
  padding-top: clamp(13rem, 28vh, 16rem);
}

@media (max-width: 56.249em) {
  .shop-scene-title,
  .media-scene-title {
    top: 0.65rem;
    max-width: calc(100% - 2rem);
  }

  .shop-scene-intro,
  .media-scene-intro {
    top: 16rem;
    top: clamp(6.8rem, 25vw, 8rem);
    width: calc(100% - 2rem);
    font-size: clamp(0.68rem, 3vw, 0.86rem);
    line-height: 1.45;
    letter-spacing: 0.025em;
    white-space: normal;
  }

  .section-main.section-main-shop > article {
    padding-top: 10.5rem;
  }
}

/* Services uses the supplied chamber photograph as a persistent dark stage. The source
   asset is cropped to the picture itself, so responsive cover never reveals its former
   top and bottom letterbox bars. */
.section-main-services {
  --text-color: #f3fbff;
  --muted-color: #cfdae1;
  --panel-bg: rgba(5, 15, 22, 0.86);
  --border-color: rgba(190, 226, 244, 0.58);
  --accent: #9bdcff;
  --focus-outline: #b9e8ff;

  background-color: #00080e;
  background-image:
    var(--site-background-grade),
    url('../../pages/services/background/services-background.webp');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
  position: relative;
}

.section-main-services a:hover {
  color: #e8f8ff;
}

.bench-stage-chevron,
.bench-model-chevron {
  display: none;
}

@media (max-width: 40em) {
  .section-main-services {
    background-position: 50% center;
  }
}

/* Phone Services uses the same luminous scene-title language as About and AI, then
   proceeds directly into the interactive stations. Station refinements mirror their
   desktop counterparts, while the 3D carousel itself remains desktop-only. */
@media (max-width: 56.249em) {
  .services-page,
  .services-page .section-main-services {
    overflow: hidden;
  }

  .services-page .services-scene-title {
    top: 0.65rem;
    display: block;
    max-width: calc(100% - 2rem);
  }

  .services-page .services-scene-intro {
    position: absolute;
    top: clamp(5rem, 17vw, 5.8rem);
    left: 50%;
    z-index: 3;
    display: block;
    width: calc(100% - 2rem);
    margin: 0;
    color: #eaffff;
    font-size: clamp(0.62rem, 2.8vw, 0.78rem);
    line-height: 1.45;
    letter-spacing: 0.025em;
    text-align: center;
    text-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.95);
    transform: translateX(-50%);
  }

  .services-page .section-main-services > article {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: clamp(8.7rem, 33vw, 9.4rem) 0.6rem 0.6rem;
    overflow: hidden;
    container-type: normal;
  }

  .services-mobile-deck,
  .services-mobile-viewport,
  .services-mobile-track {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .services-mobile-deck {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .services-mobile-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .services-mobile-viewport::-webkit-scrollbar {
    display: none;
  }

  .services-mobile-track {
    display: flex;
    align-items: flex-end;
  }

  .services-page .services-mobile-track > .bench {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.5rem 0.72rem 0.58rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(155, 220, 255, 0.54);
    border-radius: 1.1rem;
    background: rgba(2, 12, 18, 0.92);
    box-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.48);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    scrollbar-color: rgba(155, 220, 255, 0.72) rgba(0, 0, 0, 0.25);
    scrollbar-width: thin;
  }

  .services-page .services-mobile-track > .bench .bench-title {
    margin-top: 0;
    margin-bottom: 0.42rem;
    font-size: 0.95rem;
  }

  .services-page .services-mobile-track > .bench .bench-note {
    margin-top: 0;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .services-page .services-mobile-track > .bench:not([data-bench="app"]) .bench-stage,
  .services-page .services-mobile-track .gallery--bench .gallery-track {
    flex: 1 1 auto;
    height: clamp(8rem, 38vw, 9rem);
    min-height: 8rem;
    aspect-ratio: auto;
  }

  .services-page .services-mobile-track > .bench > .gallery--bench {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  .services-page .services-mobile-track > [data-bench="app"] .bench-stage--app {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.35rem;
    gap: 0.25rem;
    aspect-ratio: auto;
  }

  .services-page .services-mobile-track [data-bench="app"] .bench-app {
    gap: 0.22rem;
  }

  .services-page .services-mobile-track [data-bench="app"] .bench-tabs {
    gap: 0.2rem;
  }

  .services-page .services-mobile-track [data-bench="app"] .bench-tab {
    min-height: 1.55rem;
    padding: 0.12rem 0.4rem;
    font-size: 0.58rem;
  }

  .services-page .services-mobile-track [data-bench="app"] .calc-display {
    padding: 0.2rem 0.45rem;
    font-size: 0.85rem;
    line-height: 1.15;
  }

  .services-page .services-mobile-track [data-bench="app"] .calc-keys {
    gap: 0.18rem;
  }

  .services-page .services-mobile-track [data-bench="app"] .bench-key {
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .bench-stage--frame {
    padding: 0.4rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-shell {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    background: transparent;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-frame {
    box-sizing: border-box;
    width: var(--mobile-preview-width, 100%) !important;
    height: 100% !important;
    margin-inline: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    transform: none;
    container-type: normal;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-bar {
    gap: 0.2rem;
    padding: 0.22rem 0.35rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-bar i {
    width: 0.28rem;
    height: 0.28rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-page {
    padding: 0.4rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-head {
    margin-bottom: 0.35rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-head b {
    font-size: 0.55rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-nav {
    gap: 0.22rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-nav span {
    width: 1.05rem;
    height: 0.2rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-hero {
    height: 3.5rem;
    margin-bottom: 0.35rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .mini-grid div {
    height: 1.55rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="tablet"] .mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="tablet"] .mini-hero {
    height: 3rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="phone"] .mini-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="phone"] .mini-hero {
    height: 2.35rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="phone"] .mini-grid {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"]
  .mini-frame[data-preview-mode="phone"] .mini-grid div {
    height: 0.72rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] > .bench-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .bench-tab {
    min-width: 0;
    min-height: 1.45rem;
    padding: 0.08rem 0.22rem;
    font-size: 0.48rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .transport-scrub {
    flex: 1 1 3rem;
    min-width: 0;
    width: 100%;
    min-height: 1.2rem;
    height: 1.2rem;
  }

  .services-page .services-mobile-track [data-bench="responsive"] .bench-readout {
    flex: 0 0 2.2rem;
    font-size: 0.5rem;
    text-align: right;
    white-space: nowrap;
  }

  .services-page .services-mobile-track .gallery--bench .gallery-track {
    height: 8.35rem;
  }

  .services-page .services-mobile-track > [data-bench="photos"]
  .gallery--bench .gallery-track,
  .services-page .services-mobile-track > [data-bench="ai-images"]
  .gallery--bench .gallery-track,
  .services-page .services-mobile-track > [data-bench="drawings"]
  .gallery--bench .gallery-track {
    flex: 0 0 10.75rem;
    height: 10.75rem;
    min-height: 10.75rem;
  }

  .services-page .services-mobile-track [data-bench="workflow"] .bench-stage {
    height: 10.75rem;
    padding: 0.5rem;
    gap: 0.35rem;
  }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path {
    gap: 0.5rem;
  }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path li {
    min-height: 2.75rem;
  }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path button { min-height: 2.65rem; }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path li:not(:last-child)::after {
    width: 0.5rem;
  }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path li:not(:last-child)::before {
    left: calc(100% + 0.16rem);
  }

  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path b { font-size: 0.55rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-path small { font-size: 0.45rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-step-icon { width: 1rem; height: 1rem; margin-bottom: 0.1rem; font-size: 0.48rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-inspector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-input,
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-artifact { padding: 0.4rem 0.45rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-input label,
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-artifact h4 {
    font-size: 0.54rem;
    line-height: 1.25;
  }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-input textarea,
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-reply { font-size: 0.55rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-data { grid-template-columns: 1fr; gap: 0.1rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-artifact { font-size: 0.52rem; }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
  }
  .services-page .services-mobile-track [data-bench="workflow"] .workflow-controls .bench-button {
    width: 100%;
    min-width: 0;
    min-height: 1.75rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.58rem;
  }

  .services-page .services-mobile-track .bench-controls,
  .services-page .services-mobile-track .bench-options,
  .services-page .services-mobile-track .gallery[data-ready] .gallery-controls {
    gap: 0.24rem;
    margin-top: 0.32rem;
  }

  .services-page .services-mobile-track .bench-option {
    min-height: 1.7rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.62rem;
  }

  .services-page .services-mobile-track .bench-playlist .bench-button {
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    min-height: 1.65rem;
    padding: 0;
    font-size: 0.6rem;
  }

  .services-page .services-mobile-track .bench-button,
  .services-page .services-mobile-track .bench-tab {
    min-height: 1.8rem;
    padding: 0.18rem 0.5rem;
    font-size: 0.66rem;
  }

  .services-page .services-mobile-track .transport-scrub {
    min-height: 1.8rem;
  }

  .services-page .services-mobile-track [data-bench="walk"] .bench-gaits {
    gap: 0.22rem;
    margin: 0;
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .bench-gaits .bench-tab {
    min-height: 1.45rem;
    padding: 0.1rem 0.36rem;
    font-size: 0.58rem;
  }

  .services-page .services-mobile-track [data-bench="walk"] .bench-transport {
    gap: 0.34rem;
    margin-top: 0.3rem;
  }

  .services-page .services-mobile-track [data-bench="walk"] .transport-play {
    width: 1.45rem;
    height: 1.45rem;
  }

  .services-page .services-mobile-track [data-bench="walk"] .transport-play svg {
    width: 0.62rem;
    height: 0.62rem;
  }

  .services-page .services-mobile-track [data-bench="walk"] .transport-scrub {
    appearance: none;
    height: 1rem;
    min-height: 1rem;
    margin: 0;
    background: transparent;
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .transport-scrub::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      to right,
      #8cf 0 var(--walk-progress, 0%),
      rgba(255, 255, 255, 0.32) var(--walk-progress, 0%) 100%
    );
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .transport-scrub::-webkit-slider-thumb {
    appearance: none;
    width: 0.72rem;
    height: 0.72rem;
    margin-top: calc(1px - 0.36rem);
    border: 0;
    border-radius: 50%;
    background: #8cf;
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .transport-scrub::-moz-range-track {
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .transport-scrub::-moz-range-progress {
    height: 2px;
    border-radius: 999px;
    background: #8cf;
  }

  .services-page .services-mobile-track [data-bench="walk"]
  .transport-scrub::-moz-range-thumb {
    width: 0.72rem;
    height: 0.72rem;
    border: 0;
    border-radius: 50%;
    background: #8cf;
  }

  .services-page .services-mobile-track [data-bench="app"]
  .clock-face[data-clock-mode="digital"] {
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
    overflow: hidden;
  }

  .services-page .services-mobile-track [data-bench="app"] .clock-time {
    font-size: clamp(2.25rem, 11vw, 3.1rem);
    line-height: 1;
  }

  .services-page .services-mobile-track [data-bench="app"] .clock-date {
    font-size: clamp(0.72rem, 3.4vw, 0.95rem);
    line-height: 1.2;
    text-align: center;
  }

  .services-page .services-mobile-track [data-bench="app"] .clock-zone {
    font-size: clamp(0.66rem, 3vw, 0.82rem);
    line-height: 1.2;
  }

  .services-page .services-mobile-track [data-bench="app"]
  .clock-controls .bench-button {
    min-height: 1.8rem;
    padding-block: 0.15rem;
  }

  .services-page .services-mobile-track .gallery-button {
    width: 1.7rem;
    height: 1.7rem;
  }

  .services-page .services-mobile-track .gallery-dot {
    width: 1.05rem;
    height: 1.05rem;
  }

  .services-page .services-mobile-track [data-bench="photos"]
  .gallery[data-ready] .gallery-controls,
  .services-page .services-mobile-track [data-bench="ai-images"]
  .gallery[data-ready] .gallery-controls,
  .services-page .services-mobile-track [data-bench="drawings"]
  .gallery[data-ready] .gallery-controls {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    margin-top: 0.25rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-button,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-button,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-button {
    width: 1.25rem;
    height: 1.25rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-button svg,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-button svg,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-button svg {
    width: 0.64rem;
    height: 0.64rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-dot,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-dot,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-dot {
    width: 0.55rem;
    height: 0.55rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-dot::before,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-dot::before,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-dot::before {
    width: 0.28rem;
    height: 0.28rem;
  }

  .services-page .services-mobile-track [data-bench="photos"]
  .gallery-dot[aria-current="true"]::before,
  .services-page .services-mobile-track [data-bench="ai-images"]
  .gallery-dot[aria-current="true"]::before,
  .services-page .services-mobile-track [data-bench="drawings"]
  .gallery-dot[aria-current="true"]::before {
    width: 0.38rem;
    height: 0.38rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-count,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-count,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-count {
    font-size: 0.65rem;
  }

  .services-page .services-mobile-track [data-bench="photos"] .gallery-dots,
  .services-page .services-mobile-track [data-bench="ai-images"] .gallery-dots,
  .services-page .services-mobile-track [data-bench="drawings"] .gallery-dots {
    justify-content: flex-start;
    margin: 0 auto 0 0;
  }

  .services-mobile-navigation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: min(100%, 16.5rem);
    margin: 0.95rem auto 0;
  }

  .services-mobile-arrow,
  .services-mobile-dot {
    padding: 0;
    border: 0;
    background: transparent;
    color: #eaffff;
  }

  .services-mobile-arrow {
    display: grid;
    width: 1.8rem;
    height: 1.65rem;
    place-items: center;
    font: 1.7rem/1 'Orbitron', sans-serif;
  }

  .services-mobile-arrow > span {
    transform: translateY(-0.08rem);
  }

  .services-mobile-dots {
    display: flex;
    justify-content: center;
    gap: clamp(0.18rem, 1.15vw, 0.3rem);
  }

  .services-mobile-dot {
    width: clamp(0.36rem, 1.8vw, 0.48rem);
    height: clamp(0.36rem, 1.8vw, 0.48rem);
    border: 1px solid rgba(155, 220, 255, 0.76);
    border-radius: 50%;
  }

  .services-mobile-dot[aria-current="true"] {
    background: #8cf;
    border-color: #dff7ff;
    box-shadow: 0 0 0.55rem rgba(136, 204, 255, 0.86);
  }

  .services-mobile-arrow:focus-visible,
  .services-mobile-dot:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
  }

  .services-mobile-status {
    min-height: 1.3em;
    margin: 0.28rem 0 0.55rem;
    color: #eaffff;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }

  .services-page [data-bench="reveal"] .bench-clip::after {
    display: none;
  }

  .services-page [data-bench="reveal"] .bench-reveal-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reveal-seam, 50%);
    z-index: 2;
    display: block;
    width: 3px;
    background: #fff;
    box-shadow:
      0 0 0.35rem rgba(255, 255, 255, 0.95),
      0 0 0.75rem rgba(136, 204, 255, 0.8);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .services-page [data-bench="reveal"] .bench-range::-webkit-slider-thumb {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.15rem;
    transform: rotate(45deg);
  }

  .services-page [data-bench="reveal"] .bench-range::-moz-range-thumb {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.15rem;
    transform: rotate(45deg);
  }

  .services-page .bench-grade-stage [data-grade-image][hidden] {
    display: none;
  }

  .services-page .bench-stage-chevron {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.42);
    color: #eaffff;
    font: 2.6rem/1 'Orbitron', sans-serif;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .services-page .bench-stage-chevron--previous { left: 0.35rem; }
  .services-page .bench-stage-chevron--next { right: 0.35rem; }

  .services-page .bench-stage-chevron > span {
    display: block;
    line-height: 1;
  }

  .services-page .bench-model-chevron {
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #eaffff;
    font: 1.8rem/1 'Orbitron', sans-serif;
    place-items: center;
    cursor: pointer;
  }

  .services-page .bench-stage-chevron:focus-visible,
  .services-page .bench-model-chevron:focus-visible {
    color: #fff;
    text-shadow: 0 0 0.8rem rgba(136, 204, 255, 0.95);
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
  }

  .services-page .chat-input,
  .services-page .calc-display,
  .services-page .bench-key,
  .services-page .clock-face,
  .services-page .clock-time,
  .services-page .clock-date,
  .services-page .clock-zone {
    color: #10151c;
  }

  .services-page .chat-input::placeholder {
    color: #58636d;
    opacity: 1;
  }

  .services-page .dial-rim { fill: #fff; stroke: #596671; }
  .services-page .dial-tick { stroke: #7a8791; }
  .services-page .dial-tick--hour,
  .services-page .dial-hand { stroke: #10151c; }
  .services-page .dial-hand--second { stroke: #10517d; }
}

/*
 * About uses the studio image as its sheet instead of the shared white ground.
 *
 * The photograph has both near-black edges and a bright doorway, so text cannot rely on
 * any one part of it for contrast. The first background layer is a uniform dark scrim;
 * it preserves the image while guaranteeing a stable ground for the light palette below.
 * This class is deliberately page-specific: every other section retains the shared
 * white reading sheet.
 */
.section-main-about {
  --text-color: #f3fbff;
  --muted-color: #cfdae1;
  --panel-bg: rgba(5, 15, 22, 0.82);
  --border-color: rgba(190, 226, 244, 0.58);
  --accent: #9bdcff;
  --focus-outline: #b9e8ff;

  background: #00080e;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(0.45rem, 1.3vh, 0.85rem);
  padding: clamp(0.5rem, 1.5vh, 1rem) clamp(0.75rem, 2vw, 1.5rem);
  overflow: hidden;
}

/*
 * Three rings lifted from the homepage's dashed concentric language. The photograph and
 * SVG deliberately occupy the same fitted box and use the image's native 1376x768
 * coordinate system. That makes the shared 688,384 centre and the measured source-arc
 * radii invariant under cover cropping instead of merely eyeballing two unrelated boxes.
 * The absolute wrapper exactly fills the now-static reading area and creates no overflow.
 */
.about-background-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about-background-rings::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background:
    var(--site-background-grade),
    url('../../pages/about/background/about-background.webp') center / cover no-repeat;
}

.about-ring-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}

@media (pointer: coarse) {
  .about-background-rings {
    contain: strict;
    isolation: isolate;
    transform: translateZ(0);
  }

  .about-background-rings::before,
  .about-ring-layer {
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

.about-scene-title,
.services-scene-title,
.shop-scene-title,
.media-scene-title,
.contact-scene-title {
  position: absolute;
  top: clamp(1.25rem, 5vh, 3rem);
  left: 50%;
  z-index: 3;
  width: min-content;
  margin: 0;
  padding: 0.16em 0.42em 0.2em;
  border: 1px solid rgba(180, 220, 255, 0.46);
  border-radius: 999px;
  transform: translateX(-50%);
  background: transparent;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(225, 246, 255, 0.7),
    0 0 32px rgba(175, 226, 248, 0.4);
}

.section-main-about .about-scene-title {
  position: relative;
  top: auto;
  left: auto;
  justify-self: center;
  transform: none;
}

.services-scene-title,
.services-scene-intro,
.services-title-connector {
  display: none;
}

.about-title-connector,
.services-title-connector,
.shop-title-connector,
.media-title-connector,
.contact-title-connector {
  display: none;
}

@media (min-width: 56.25em) {
  .services-page {
    height: 100svh;
    overflow: hidden;
  }

  .services-page .section-main-services {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
    gap: clamp(0.55rem, 1.25vh, 1rem);
    box-sizing: border-box;
    min-height: 0;
    padding: clamp(0.75rem, 2vh, 1.4rem) 0 clamp(0.35rem, 1vh, 0.75rem);
    overflow: clip;
  }

  .services-scene-title {
    display: block;
    position: relative;
    inset: auto;
    justify-self: center;
    margin: 0;
    transform: none;
  }

  .services-scene-intro {
    position: relative;
    inset: auto;
    z-index: 3;
    display: block;
    width: min(92rem, 90vw);
    justify-self: center;
    margin: 0;
    color: #eaffff;
    font-size: clamp(0.95rem, 1.05vw, 1.2rem);
    line-height: 1.5;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.95);
    transform: none;
    white-space: nowrap;
  }

  .services-page .section-main-services > article {
    box-sizing: border-box;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .services-carousel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    outline: none;
  }

  .services-carousel:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
  }

  .services-carousel-viewport {
    position: relative;
    min-height: 0;
    overflow: clip;
    perspective: 1300px;
    perspective-origin: 50% 42%;
  }

  .services-carousel-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
  }

  .services-page .services-carousel .bench {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-auto-rows: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: calc(20 - var(--carousel-depth));
    box-sizing: border-box;
    width: min(56rem, 66vw);
    max-width: none;
    height: calc(100% - 0.7rem);
    max-height: none;
    margin: 0;
    padding:
      clamp(0.55rem, 0.9vw, 0.8rem)
      clamp(0.85rem, 1.3vw, 1.2rem)
      clamp(0.7rem, 1vw, 0.9rem);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(155, 220, 255, 0.54);
    border-radius: 1.4rem;
    background: rgba(2, 12, 18, 0.92);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.52);
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--carousel-distance) * min(31vw, 29rem)),
        calc(-50% + var(--carousel-depth) * 0.8rem),
        calc(var(--carousel-depth) * -12rem)
      )
      rotateY(calc(var(--carousel-distance) * -42deg))
      scale(calc(1 - var(--carousel-depth) * 0.12));
    transform-origin: center;
    transition: transform 320ms ease, opacity 220ms ease, filter 220ms ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 220, 255, 0.72) rgba(0, 0, 0, 0.25);
    scrollbar-gutter: stable;
    pointer-events: none;
  }

  .services-page .services-carousel .bench::-webkit-scrollbar {
    width: 0.55rem;
  }

  .services-page .services-carousel .bench::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
  }

  .services-page .services-carousel .bench::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(155, 220, 255, 0.72);
  }

  .services-page .services-carousel .bench.is-carousel-active {
    z-index: 30;
    opacity: 1;
    filter: none;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .services-page .services-carousel .bench-title {
    margin-top: 0;
    margin-bottom: 0.22rem;
  }

  .services-page .services-carousel .bench-note {
    margin-bottom: 0.62rem;
  }

  .services-page .services-carousel [data-bench="walk"] .bench-title {
    margin-bottom: 0.4375rem;
  }

  .services-page .services-carousel [data-bench="walk"] .bench-note {
    margin-bottom: 1.0625rem;
  }

  .services-page .services-carousel .bench.is-carousel-neighbor {
    opacity: 0.7;
    filter: saturate(0.8) brightness(0.8);
  }

  .services-page .services-carousel .bench.is-carousel-distant {
    visibility: hidden;
  }

  .services-carousel-navigation {
    z-index: 40;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: clamp(1.15rem, 2vw, 2rem);
    width: fit-content;
    max-width: 92vw;
    margin: 0.45rem auto 0;
  }

  .services-carousel-arrow,
  .services-carousel-dot {
    border: 1px solid rgba(155, 220, 255, 0.6);
    background: rgba(2, 12, 18, 0.9);
    color: #eaffff;
    cursor: pointer;
  }

  .services-carousel-arrow {
    display: grid;
    width: 2.5rem;
    height: 2.8rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    place-items: center;
    font: 2.4rem/1 'Orbitron', sans-serif;
  }

  .services-carousel-arrow > span {
    display: block;
    transform: translateY(-0.18rem);
  }

  .services-carousel-arrow:hover,
  .services-carousel-arrow:focus-visible,
  .services-carousel-dot:hover,
  .services-carousel-dot:focus-visible,
  .services-carousel-dot[aria-current="true"] {
    border-color: #dff7ff;
    box-shadow: 0 0 0.8rem rgba(136, 204, 255, 0.72);
    outline: none;
  }

  .services-carousel-arrow:hover,
  .services-carousel-arrow:focus-visible {
    box-shadow: none;
    text-shadow:
      0 0 0.45rem rgba(234, 255, 255, 0.95),
      0 0 0.9rem rgba(136, 204, 255, 0.75);
  }

  .services-carousel-dots {
    display: flex;
    justify-content: center;
    gap: clamp(0.28rem, 0.65vw, 0.55rem);
  }

  .services-carousel-dot {
    width: clamp(0.55rem, 0.8vw, 0.72rem);
    height: clamp(0.55rem, 0.8vw, 0.72rem);
    padding: 0;
    border-radius: 50%;
  }

  .services-carousel-dot[aria-current="true"] {
    background: #8cf;
  }

  .services-carousel-status {
    min-height: 1.5em;
    margin: 0.25rem 0 0.45rem;
    color: #eaffff;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  /* Desktop instrument refinements. These are intentionally scoped beneath the
     Services desktop breakpoint so the established phone benches remain unchanged. */
  .services-page [data-bench="reveal"] .bench-clip::after {
    display: none;
  }

  .services-page [data-bench="reveal"] .bench-reveal-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reveal-seam, 50%);
    z-index: 2;
    display: block;
    width: 3px;
    background: #fff;
    box-shadow:
      0 0 0.35rem rgba(255, 255, 255, 0.95),
      0 0 0.75rem rgba(136, 204, 255, 0.8);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .services-page [data-bench="reveal"] .bench-range::-webkit-slider-thumb {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.15rem;
    transform: rotate(45deg);
  }

  .services-page [data-bench="reveal"] .bench-range::-moz-range-thumb {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.15rem;
    transform: rotate(45deg);
  }

  .services-page .bench-grade-stage [data-grade-image][hidden] {
    display: none;
  }

  .services-page .bench-stage-chevron {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.42);
    color: #eaffff;
    font: 3rem/1 'Orbitron', sans-serif;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .services-page .bench-stage-chevron--previous { left: 0.45rem; }
  .services-page .bench-stage-chevron--next { right: 0.45rem; }

  .services-page .bench-stage-chevron > span {
    display: block;
    line-height: 1;
  }

  .services-page .bench-stage-chevron:hover,
  .services-page .bench-stage-chevron:focus-visible,
  .services-page .bench-model-chevron:hover,
  .services-page .bench-model-chevron:focus-visible {
    color: #fff;
    text-shadow: 0 0 0.8rem rgba(136, 204, 255, 0.95);
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
  }

  .services-page .bench-model-chevron {
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #eaffff;
    font: 1.8rem/1 'Orbitron', sans-serif;
    place-items: center;
    cursor: pointer;
  }

  .services-page .chat-input,
  .services-page .calc-display,
  .services-page .bench-key,
  .services-page .clock-face,
  .services-page .clock-time,
  .services-page .clock-date,
  .services-page .clock-zone {
    color: #10151c;
  }

  .services-page .chat-input::placeholder {
    color: #58636d;
    opacity: 1;
  }

  .services-page .dial-rim { fill: #fff; stroke: #596671; }
  .services-page .dial-tick { stroke: #7a8791; }
  .services-page .dial-tick--hour,
  .services-page .dial-hand { stroke: #10151c; }
  .services-page .dial-hand--second { stroke: #10517d; }

  .about-title-connector,
  .services-title-connector,
  .shop-title-connector,
  .media-title-connector,
  .contact-title-connector {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
  }

  .about-title-connector-line,
  .services-title-connector-line,
  .shop-title-connector-line,
  .media-title-connector-line,
  .contact-title-connector-line {
    fill: none;
    stroke: rgba(180, 220, 255, 0.46);
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
  }

  .about-title-connector-node,
  .services-title-connector-node,
  .shop-title-connector-node,
  .media-title-connector-node,
  .contact-title-connector-node,
  .ai-title-connector-node {
    fill: #8cf;
    filter: drop-shadow(0 0 0.3rem rgba(136, 204, 255, 0.72));
    vector-effect: non-scaling-stroke;
  }
}

@media (min-width: 56.25em) and (prefers-reduced-motion: reduce) {
  .about-title-connector,
  .services-title-connector,
  .shop-title-connector,
  .media-title-connector,
  .contact-title-connector {
    display: none;
  }

  .services-page .services-carousel .bench {
    transition: none;
  }
}

.about-story {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  place-items: stretch center;
  pointer-events: auto;
}

.about-story-paragraph,
.about-story-slide {
  grid-area: 1 / 1;
  width: min(100%, 64ch);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.45rem);
  transition:
    opacity 5s ease,
    transform 5s ease,
    visibility 0s linear 5s;
}

.about-story-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.about-story-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.5vh, 1rem);
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  max-height: 100%;
  min-height: 0;
}

.about-story-slide.is-prepared {
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.about-story-image {
  display: block;
  width: min(94%, 25rem);
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(204, 238, 253, 0.5);
  border-radius: 4px;
  box-shadow:
    0 0 18px rgba(169, 224, 248, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.55);
}

.about-story-visual {
  position: relative;
  display: grid;
  flex: 0 1 auto;
  width: min(94%, calc(50svh * 16 / 9));
  height: min(52.875cqw, 50svh);
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  container-type: size;
  place-items: center;
}

.about-story-visual .about-story-image {
  width: min(100cqw, calc((100cqh - 2px) * 16 / 9 + 2px));
  height: auto;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.about-story-pause-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(3.5rem, 8vw, 5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(220, 244, 255, 0.78);
  border-radius: 50%;
  background: rgba(0, 8, 14, 0.62);
  box-shadow:
    0 0 16px rgba(202, 239, 255, 0.5),
    0 0 34px rgba(136, 204, 236, 0.32);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.88);
  transition: opacity 220ms ease, transform 220ms ease;
}

.about-story-pause-mark::before,
.about-story-pause-mark::after {
  position: absolute;
  top: 26%;
  bottom: 26%;
  width: 12%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(220, 246, 255, 0.9);
  content: '';
}

.about-story-pause-mark::before {
  left: 31%;
}

.about-story-pause-mark::after {
  right: 31%;
}

.about-story-slide.is-paused .about-story-pause-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.about-story-paragraph,
.about-story-copy {
  color: rgba(244, 251, 255, 0.94);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.92rem, 1.35vw, 1.14rem);
  font-weight: 350;
  line-height: 1.72;
  letter-spacing: 0.025em;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.about-story-copy {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  overflow: visible;
  margin: 0;
  padding: 0 0.35rem;
  white-space: pre-line;
  pointer-events: auto;
}

.about-story-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.about-story-controls button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(244, 251, 255, 0.9);
  font: inherit;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, text-shadow 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.about-story-step {
  padding: 0;
  border-radius: 50%;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
}

.about-story-toggle {
  padding: 0.22rem 0.78rem;
  border: 1px solid rgba(190, 226, 244, 0.42);
  border-radius: 999px;
  background: rgba(0, 8, 14, 0.72);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-shadow: 0 0 8px rgba(183, 230, 251, 0.55);
}

.about-story-controls button:hover,
.about-story-controls button:focus-visible,
.about-story-controls.is-paused .about-story-toggle {
  color: #fff;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 1),
    0 0 16px rgba(174, 226, 250, 0.95);
  transform: scale(1.08);
}

.about-story-controls button:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

.about-story-controls.is-paused .about-story-toggle {
  border-color: rgba(220, 244, 255, 0.88);
  background: rgba(8, 24, 34, 0.9);
  box-shadow:
    0 0 12px rgba(201, 239, 255, 0.62),
    0 0 25px rgba(124, 196, 230, 0.35);
}

.about-story.is-manual-navigation .about-story-slide {
  transition-duration: 700ms, 700ms, 0s;
  transition-delay: 0s, 0s, 700ms;
}

.about-story.is-settling .about-story-slide {
  transition: none !important;
}

.about-story-paragraph.is-active,
.about-story-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (min-width: 700px) {
  .about-page .section-main-about {
    flex: 1 1 auto;
    min-height: 0;
  }

  .about-page .section-header {
    position: relative;
    z-index: 10;
    background: #000;
  }

  .about-page .about-background-rings {
    position: absolute;
    inset: 0;
  }

  .about-page .section-footer {
    position: relative;
    z-index: 10;
    background: #000;
  }

  .about-scene-title,
  .services-scene-title,
  .shop-scene-title {
    font-size: 6rem;
  }

  .about-story-paragraph,
  .about-story-slide {
    width: min(100%, 60rem);
  }

  .about-story-paragraph,
  .about-story-copy {
    font-size: 1.25rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }

  .about-story-copy.is-short {
    max-width: 40rem;
  }

  .about-story-controls {
    z-index: 4;
  }
}

@media (max-height: 450px) and (orientation: landscape) {
  .section-main-about {
    gap: 0.25rem;
    padding-block: 0.25rem;
  }

  .section-main-about .about-scene-title {
    font-size: clamp(1.4rem, 6vh, 2rem);
  }

  .about-story-content {
    gap: 0.25rem;
  }

  .about-story-copy {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .about-story-controls button {
    min-height: 2rem;
  }
}

.about-ring {
  fill: none;
  stroke: rgba(181, 229, 250, 0.24);
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.about-ring-inner {
  stroke-width: 0.8;
  stroke-dasharray: 1 2 13 5 3 21 8 4;
}

.about-ring-middle {
  stroke-width: 4.5;
  stroke-dasharray: 7 1 2 11 29 4 5 16;
}

.about-ring-outer {
  stroke-width: 2.2;
  stroke-dasharray: 23 3 1 14 6 27 4 9;
}

.about-ring-layer-inner {
  animation: aboutRingClockwise 97s linear infinite;
}

.about-ring-layer-middle {
  animation: aboutRingCounterClockwise 173s linear infinite;
}

.about-ring-layer-outer {
  animation: aboutRingClockwise 281s linear infinite;
}

@keyframes aboutRingClockwise {
  to { transform: rotate(360deg); }
}

@keyframes aboutRingCounterClockwise {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-ring-layer {
    animation: none;
  }

  .about-story-paragraph,
  .about-story-slide,
  .about-story-pause-mark,
  .about-story-controls button {
    transform: none;
    transition: none;
  }
}

.section-main-about a:hover {
  color: #e8f8ff;
}

/* The sheet is full width; the reading column inside it is not. */
.section-main > article {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);

  /* Makes this the size reference for .section-title below, so the heading can be sized
     against the column it has to fit inside rather than against the viewport. */
  container-type: inline-size;
}

.section-main a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

.section-main a:hover {
  color: #0a3a5c;
}

/*
 * The hero, and the line laid over it.
 *
 * The frame exists only to give the caption something to be positioned against; the image
 * keeps its own sizing so the space is still reserved before it loads.
 */
.section-hero-frame {
  position: relative;
  margin: 0 0 2rem;
  border-radius: 10px;
  /* Clips the scrim to the rounded corners - without this it squares off the bottom two. */
  overflow: hidden;
}

.section-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 3.5rem clamp(0.9rem, 2.5vw, 1.5rem) clamp(0.7rem, 1.8vw, 1rem);
  color: #ffffff;
  font-size: clamp(0.72rem, 1.5vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /*
   * A scrim, not a guess.
   *
   * Text on an image has no contrast it can rely on - a photograph can be any brightness
   * at any point, and this one changes per page. The gradient guarantees a dark ground
   * under the words wherever the image happens to be pale, which is what keeps this
   * legible rather than hoping the photographs cooperate. The tall top padding is what
   * gives the fade room to be gradual instead of a band.
   */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/*
 * A plate, not a hero.
 *
 * .section-hero crops to 16/9 with object-fit: cover, which is right for a photograph
 * chosen to fill a band and wrong for an artefact. This image is a cylinder-seal
 * impression roughly 1.94:1, so cover would shave the cuneiform panels off both ends -
 * cutting away the part of the object that carries the writing. A plate therefore shows
 * the whole thing at its own proportions, deriving the box from the width and height
 * attributes so the space is still reserved before it loads.
 *
 * The credit sits below the image rather than in a .section-eyebrow laid over it, for the
 * same reason: an overlay would cover the artefact it is captioning.
 */
.section-plate {
  margin: 0 0 2rem;
}

.section-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  /* A dark ground, so a scanned object with a ragged edge reads as a plate rather than as
     a picture bleeding into the sheet. */
  background: #12161c;
}

.section-plate figcaption {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted-color);
}

/*
 * A smaller figure, set into the text rather than interrupting it.
 *
 * Floated left directly under its heading so the paragraphs run down the right of it and
 * then close underneath - the ordinary magazine set, and the reason the figure has to be
 * written into the markup BEFORE the paragraphs it wraps: a float only pushes content
 * that comes after it in source order.
 *
 * Sized in rem rather than as a percentage so the picture stays the same physical size as
 * the column widens, which keeps it subordinate to the writing on a large screen.
 *
 * Museum photographs arrive with their own pale backdrop, so no ground is painted behind
 * them - one would only show as a rim.
 */
.section-figure {
  float: left;
  width: 14rem;
  margin: 0.4rem 1.5rem 0.9rem 0;
}

.section-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/*
 * A banner, whether or not it goes anywhere yet.
 *
 * Linked entries carry this on an <a>, the rest on a <span>, so one rule covers both and
 * there is nothing to remember when an address arrives. Only the anchor takes a pointer
 * cursor and focus, so the picture reacts to the mouse without promising a click that
 * cannot be honoured.
 *
 * transform is used for the growth rather than width/height because it is composited:
 * it cannot reflow the paragraph wrapped around the float, so the text beside it stays
 * exactly where it was while the picture lifts. The site-wide reduce-motion rule at the
 * end of this file flattens the transition for anyone who asks for that; the glow still
 * appears, so the affordance survives without the movement.
 */
.shop-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* A span is inline by default, which would collapse the box around the picture. */
span.shop-link {
  display: block;
}

.shop-link:hover,
.shop-link:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--accent), 0 0 20px 2px rgba(16, 81, 125, 0.45);
}

/* The outline would be hidden by the overflow clip above, so the glow is the focus
   indicator - stated explicitly rather than left to the browser to lose. */
.shop-link:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 3px;
}

/* Only ever a credit a licence demands, never a description - the alt text carries what
   the picture shows. */
.section-figure figcaption {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-color);
}

/*
 * A float escapes its own section unless something stops it, so a tall picture would
 * otherwise hang down beside the NEXT heading and shove it sideways. Clearing every
 * heading ends the wrap where the section ends.
 */
.section-main h2,
.section-main h3,
.pager {
  clear: both;
}

/*
 * A section break needs to be bigger than the gaps inside a section, or the groups read
 * as one continuous list. The h3 entries sit 2rem apart, so the h2 above them gets more
 * than double that - and the rule marks the boundary for the eye without adding a word.
 */
.section-main h2 + .section-icon {
  margin-top: 0.25rem;
}

.section-main h3 ~ h2 {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

/*
 * Below roughly 34em the column is too narrow to hold a picture and a readable line
 * beside it - the text would set in a four-word gutter. So the float is dropped and the
 * figure becomes a normal block.
 */
@media (max-width: 34em) {
  .section-header {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .section-tagline {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .section-nav {
    flex-wrap: nowrap;
    gap: clamp(0.08rem, 0.6vw, 0.2rem);
  }

  .section-nav a {
    padding: 0.28rem 0.25rem;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
  }

  .section-nav a:hover,
  .section-nav a:focus-visible,
  .section-nav a:active,
  .section-nav a[aria-current="page"],
  .section-nav a[aria-current="true"] {
    transform: scale(1.05);
  }

  .section-figure {
    float: none;
    width: auto;
    max-width: 18rem;
    margin: 1.25rem 0 1.5rem;
  }
}

/*
 * Sized against the reading column, not the viewport.
 *
 * The old value was clamp(2rem, 7vw, 3.5rem), which is a bet that no page ever gets a
 * long title. "How we got the name" needed 876px of the 865px available and wrapped to
 * two lines, and the fix of dropping the maximum a notch would have been a magic number
 * good until the next title.
 *
 * cqi is a percentage of the column's own inline size, and the width a line of set caps
 * needs is also proportional to the type size - so a title sized in cqi keeps the same
 * ratio to the measure at every width, and the longest title on the site fits on one line
 * by construction rather than by coincidence. 6.2cqi leaves headroom over the 6.39cqi at
 * which the longest one would touch the edge.
 *
 * The bounds still matter: on a phone the column is too narrow for a heading this long to
 * hold one line at a readable size, so it wraps there, which is normal and fine.
 */
.section-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 6.2cqi, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}

.section-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border-color);
  /* width/height plus aspect-ratio reserve the space before the image arrives, so the
     text below never jumps once it loads. */
}

/*
 * Long-form content inside the sheet.
 *
 * The sheet used to hold one paragraph, so it needed no typographic scale. It holds real
 * writing now, and writing needs a hierarchy to be read rather than just displayed:
 * headings that are clearly headings, and space between blocks that separates ideas
 * instead of merely existing.
 */
.section-main h2 {
  margin: 2.5rem 0 0.75rem;
  /*
   * Sized from the column like .section-title, so the two keep their relationship at any
   * width instead of drifting apart as the viewport changes. About 3.6cqi against the
   * title's 6.2cqi - clearly a heading, clearly not the name of the page.
   */
  font-size: clamp(1.15rem, 3.6cqi, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/*
 * A third level, for pages that group entries under a section - the marketplaces on Shop.
 * Deliberately quieter than h2: same family, no uppercasing, and ink rather than accent,
 * so the eye reads it as an item inside the group above rather than as a new group.
 */
/*
 * The mark under a section title.
 *
 * Sits between the heading and its first line of text, so it reads as belonging to the
 * section rather than floating beside it. Takes currentColor and the heading's accent, so
 * one file serves the light sheet and would serve a dark one unchanged. Purely decorative
 * - the heading immediately above already names the section - hence aria-hidden in the
 * markup and no title element here.
 */
.section-icon {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 0 1.1rem;
  fill: var(--accent);
}

.section-main h3,
.section-main h2.bench-title {
  margin: 2rem 0 0.5rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.section-main p {
  margin: 0 0 1.1rem;
}

/*
 * The address, given the weight of the thing it is.
 *
 * This page exists to produce one action, so the address is set as a heading rather than
 * buried in a sentence - a visitor who reads nothing else on the page should still leave
 * with it. Wrapping is forced on because an email address is one long unbreakable word and
 * would otherwise overflow the sheet on a narrow screen.
 */
.section-contact {
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 3.2vw, 1.75rem);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.section-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  /* Two columns where there is room, one where there is not. Eight single words spread
     across four thin columns read as scattered; paired up they read as a set. min() keeps
     the track from exceeding the container on a narrow screen. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.35rem 1.5rem;
}

.section-list li {
  padding-left: 1.1rem;
  position: relative;
}

.section-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent);
}

/*
 * Breadcrumbs.
 *
 * The separators are drawn here rather than typed into the markup, because a screen
 * reader announcing "Home slash About slash The name" is reading punctuation aloud. They
 * are decoration; the list structure is the actual information.
 */
.crumbs {
  margin: 0 0 1.25rem;
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: '/';
  margin-right: 0.6rem;
  opacity: 0.5;
}

.crumbs a {
  color: inherit;
}

/*
 * The hub: four summaries that hand over to their own pages.
 */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem 1.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

/*
 * The thumbnail on a hub card.
 *
 * Each one is the opening image of the page the card links to, so the picture is a preview
 * of the destination rather than decoration. aria-hidden and tabindex="-1" because the
 * heading beneath already links to the same place: without that, every card would present
 * a screen reader with two identical links and a keyboard user with two tab stops for one
 * destination. The alt is empty for the same reason.
 */
.hub-thumb {
  display: block;
  margin: 0 0 0.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.hub-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The routes inside the last card: a list, but not a bulleted one - it is already inside
   a list item, and a second level of bullets reads as a menu rather than as prose. */
.hub-routes {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted-color);
}

.hub h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hub h3 a {
  text-decoration: none;
}

.hub h3 a:hover,
.hub h3 a:focus-visible {
  text-decoration: underline;
}

.hub p {
  margin: 0;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  color: var(--muted-color);
}

/*
 * Onward navigation at the foot of each sub-page.
 *
 * space-between with an empty span holding the first slot, so "Next" stays hard right on
 * the first page instead of sliding left where "Previous" would have been.
 */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
}

.pager-next {
  text-align: right;
}

.pager a span {
  font-size: clamp(0.68rem, 1.4vw, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-color);
}

.pager a:hover,
.pager a:focus-visible {
  text-decoration: underline;
}

/*
 * The practices.
 *
 * Auto-fitting columns rather than a fixed count, so the grouping survives every width
 * without a breakpoint per screen size. Each group is a section with a real heading, which
 * is what lets a screen reader move between practices instead of wading through one
 * undifferentiated list of eighteen items.
 */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 1.75rem;
  margin: 0 0 1.75rem;
}

.craft h3 {
  margin: 0 0 0.4rem;
  font-size: clamp(0.78rem, 1.6vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.craft ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.craft li {
  position: relative;
  padding-left: 0.9rem;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
}

.craft li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--accent);
}

.section-intro {
  margin: 0 0 2.5rem;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
}

/*
 * Back to top.
 *
 * Fixed to the viewport rather than placed in the sheet, so it stays put while the thing
 * it controls scrolls underneath it. Sat above the footer rather than over it - the
 * footer is short and a button crossing it reads as a mistake.
 *
 * 2.75rem square, comfortably past the 24px minimum target of WCAG 2.5.8, and it inherits
 * the sheet's ink rather than the interface's glow because it sits against white.
 *
 * [hidden] is honoured explicitly: this element is display:flex, and a class-based display
 * beats the browser's own [hidden] { display: none }, which would otherwise leave the
 * button on screen permanently.
 */
.about-founder {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 6;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #a4dbea;
  background: #041119;
  border-radius: 50%;
}

.about-founder svg { width: 100%; height: 100%; fill: currentColor; }
.about-founder:hover { color: #e5faff; }
.about-founder:focus-visible { outline: 2px solid #e5faff; outline-offset: 4px; }

.to-top {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: 3.5rem;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  border: 1px solid #c9d3dc;
  border-radius: 50%;
  background: #ffffff;
  color: #10517d;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 21, 28, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.to-top[hidden] {
  display: none;
}

.to-top svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  pointer-events: none;
}

.to-top:hover,
.to-top:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16, 81, 125, 0.35);
}

.to-top:focus-visible {
  outline: 2px solid #10517d;
  outline-offset: 3px;
}

/* The sheet is given tabindex="-1" when the button moves focus to it. That makes it
   focusable, and a focus ring around the entire page is not useful - the scroll position
   is the feedback. */
.section-main:focus {
  outline: none;
}

/* AI is a single, non-scrolling environmental scene. The image lives on the main
   element itself so there are no oversized child layers or presentation scripts. */
.section-main-ai {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    var(--site-background-grade),
    url('../../pages/ai/background/ai-background.webp') center / cover no-repeat;
  scrollbar-width: none;
}

.section-main-ai::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html:has(.section-main-ai),
body:has(.section-main-ai) {
  height: 100%;
  overflow: hidden;
}

.ai-server-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  contain: strict;
  pointer-events: none;
}

@media (max-width: 56.249em) {
  .ai-server-lights {
    isolation: isolate;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

.services-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.services-page .section-main-services > article {
  z-index: 2;
}

@media (max-width: 56.249em) {
  .services-atmosphere {
    contain: strict;
    isolation: isolate;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

.ai-scene-title {
  position: absolute;
  top: clamp(1.25rem, 5vh, 3rem);
  left: 50%;
  z-index: 3;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.16em 0.42em 0.2em;
  border: 1px solid rgba(180, 220, 255, 0.46);
  border-radius: 999px;
  transform: translateX(-50%);
  background: transparent;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.05rem, 5vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(225, 246, 255, 0.7),
    0 0 32px rgba(175, 226, 248, 0.4);
}

.ai-title-connector {
  display: none;
}

.ai-scene-intro {
  position: absolute;
  top: clamp(11rem, 21vh, 14.5rem);
  left: 50%;
  z-index: 2;
  display: block;
  width: min(108rem, calc(100% - 2rem));
  transform: translateX(-50%);
  color: rgba(233, 247, 255, 0.82);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.65;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 0.9rem rgba(0, 11, 18, 0.9);
}

.ai-scene-intro p {
  margin: 0;
}

.ai-scene-intro p + p {
  margin-top: 0.8rem;
}

/* Supplemental quota guidance belongs only to the phone information window. */
.ai-phone-usage-info {
  display: none;
}

.ai-phone-station-info,
.ai-station-arrow {
  display: none;
}

.ai-info-trigger,
.ai-info-close {
  display: none;
}

@media (min-width: 56.25em) {
  .ai-scene-title {
    width: max-content;
    font-size: 6rem;
    line-height: 0.95;
    letter-spacing: 0.1em;
    white-space: normal;
  }

  .ai-scene-intro::before {
    position: absolute;
    top: -1.35rem;
    bottom: -1.35rem;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.72) 12%,
      rgba(0, 0, 0, 0.86) 28%,
      rgba(0, 0, 0, 0.86) 72%,
      rgba(0, 0, 0, 0.72) 88%,
      transparent 100%
    );
    content: '';
  }

  .ai-title-connector {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
  }

  .ai-title-connector-line {
    fill: none;
    stroke: rgba(180, 220, 255, 0.46);
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
  }
}

@media (min-width: 56.25em) and (prefers-reduced-motion: reduce) {
  .ai-title-connector {
    display: none;
  }
}

/* The AI bench is one instrument, not a dashboard of cards. Its source, viewer and
   professional bridge share one frame and read left-to-right on desktop. */
.ai-bench {
  position: absolute;
  top: clamp(5.4rem, 17vh, 10.5rem);
  left: 50%;
  z-index: 2;
  display: grid;
  width: min(82rem, calc(100% - 2rem));
  max-height: calc(100% - clamp(6rem, 19vh, 11.5rem));
  overflow: hidden;
  border: 1px solid rgba(140, 198, 232, 0.5);
  border-radius: 1.2rem;
  transform: translateX(-50%);
  background: rgba(0, 8, 14, 0.82);
  box-shadow: 0 0 2.5rem rgba(0, 118, 172, 0.14) inset;
  color: #e9f7ff;
  font-family: 'Orbitron', sans-serif;
}

.ai-bench-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1rem;
  align-items: end;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(140, 198, 232, 0.24);
  text-align: center;
}

.ai-bench-heading h2 {
  margin: 0;
}

.ai-bench-heading h2 {
  font-size: clamp(1rem, 2.1vw, 1.65rem);
  letter-spacing: 0.16em;
}

.ai-bench-workspace {
  display: grid;
  grid-template-columns: minmax(14rem, 0.78fr) minmax(24rem, 1.45fr) minmax(13rem, 0.72fr);
  min-height: 0;
}

/* Each generator is a separate station inside the permanent bay. The station wrapper
   must pass the bay's flexible row through to its workspace; otherwise the established
   3D viewer collapses to its intrinsic content height when another station is added. */
.ai-station {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ai-station[hidden] {
  display: none;
}

.ai-station-placeholder {
  place-items: center;
  color: rgba(223, 245, 255, 0.58);
  text-align: center;
}

.ai-station-placeholder p {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  font: 500 0.72rem/1.5 'Orbitron', sans-serif;
  letter-spacing: 0.18em;
}

.ai-station-placeholder strong {
  color: #8cf;
  font-size: 1.15rem;
}

.ai-station > .ai-bench-workspace {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Text stations mirror the 3D bench: balanced side panels frame a larger,
   precisely centred result viewer. */
.ai-station[data-ai-station='image'] > .ai-bench-workspace,
.ai-station[data-ai-station='video'] > .ai-bench-workspace,
.ai-station[data-ai-station='music'] > .ai-bench-workspace,
.ai-station[data-ai-station='audio'] > .ai-bench-workspace,
.ai-station[data-ai-station='text'] > .ai-bench-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
}

.ai-image-input {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.3rem;
  border-right: 1px solid rgba(140, 198, 232, 0.24);
}

.ai-audio-input {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.3rem;
  border-right: 1px solid rgba(140, 198, 232, 0.24);
}

.ai-audio-sentence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid rgba(140, 198, 232, 0.42);
  border-radius: 0.9rem;
  background: rgba(0, 18, 29, 0.72);
  color: #dff5ff;
  font-size: 0.64rem;
  line-height: 1.5;
  text-align: center;
}

.ai-audio-sentence select {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 1.2rem 0.62rem 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(140, 204, 255, 0.64);
  border-radius: 0;
  outline: 0;
  background: rgba(0, 8, 14, 0.78);
  color: #eaffff;
  font: 600 0.62rem/1.35 'Orbitron', sans-serif;
  cursor: pointer;
}

.ai-audio-sentence select:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ai-audio-output {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(32, 100, 138, 0.22), transparent 48%),
    linear-gradient(rgba(2, 14, 22, 0.5), rgba(0, 4, 8, 0.9));
}

.ai-audio-output audio {
  width: min(78%, 36rem);
  accent-color: #8cf;
}

.ai-audio-output audio[hidden] {
  display: none;
}

.ai-audio-output .ai-bench-progress {
  z-index: 3;
}

.ai-writing-input {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.3rem;
  border-right: 1px solid rgba(140, 198, 232, 0.24);
}

.ai-writing-sentence {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid rgba(140, 198, 232, 0.42);
  border-radius: 0.9rem;
  background: rgba(0, 18, 29, 0.72);
  color: #dff5ff;
  font-size: 0.62rem;
  line-height: 1.5;
}

.ai-writing-sentence select,
.ai-writing-sentence input {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.55rem;
  border: 0;
  border-bottom: 1px solid rgba(140, 204, 255, 0.64);
  border-radius: 0;
  outline: 0;
  background: rgba(0, 8, 14, 0.78);
  color: #eaffff;
  font: 600 0.62rem/1.35 'Orbitron', sans-serif;
}

.ai-writing-sentence select:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ai-writing-output {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(32, 100, 138, 0.22), transparent 48%), linear-gradient(rgba(2, 14, 22, 0.5), rgba(0, 4, 8, 0.9));
}

.ai-writing-result {
  width: min(86%, 44rem);
  max-height: 76%;
  overflow: auto;
  padding: 1.2rem;
  color: #eaffff;
  font-size: clamp(0.72rem, 1vw, 1rem);
  line-height: 1.7;
  white-space: pre-wrap;
  text-align: left;
}

.ai-writing-result[hidden] {
  display: none;
}

.ai-image-sentence {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1.65fr);
  align-items: center;
  gap: 0.38rem;
  padding: 0.9rem;
  border: 1px solid rgba(140, 198, 232, 0.42);
  border-radius: 0.9rem;
  background: rgba(0, 18, 29, 0.72);
  color: #dff5ff;
  font-size: 0.68rem;
  line-height: 1.5;
}

.ai-image-sentence select,
.ai-image-sentence input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(140, 204, 255, 0.64);
  border-radius: 0;
  outline: 0;
  background: rgba(0, 8, 14, 0.78);
  color: #eaffff;
  font: 600 0.62rem/1.35 'Orbitron', sans-serif;
}

.ai-image-sentence select {
  padding: 0.62rem 1.2rem 0.62rem 0.55rem;
  cursor: pointer;
}

.ai-image-sentence input {
  padding: 0.62rem 0.55rem;
}

.ai-image-sentence select:focus-visible,
.ai-image-sentence input:focus-visible {
  border-bottom-color: #eaffff;
  box-shadow: 0 0.45rem 0.8rem -0.65rem #8cf;
}

.ai-image-sentence select:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ai-image-sentence input::placeholder {
  color: rgba(220, 239, 249, 0.42);
}

.ai-image-output {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(32, 100, 138, 0.22), transparent 48%),
    linear-gradient(rgba(2, 14, 22, 0.5), rgba(0, 4, 8, 0.9));
}

.ai-image-output img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-image-output img[hidden] {
  display: none;
}

.ai-video-output video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-video-output video[hidden] {
  display: none;
}

.ai-image-placeholder {
  margin: 0;
  color: rgba(191, 233, 255, 0.44);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-align: center;
}

.ai-image-output .ai-bench-progress {
  z-index: 3;
}

.ai-bench-input {
  display: grid;
  grid-template-rows: minmax(9rem, 1fr) auto auto;
  gap: 0.65rem;
  padding: 1rem;
  border-right: 1px solid rgba(140, 198, 232, 0.24);
}

.ai-bench-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ai-bench-drop {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 10rem;
  overflow: hidden;
  border: 1px dashed rgba(140, 198, 232, 0.56);
  border-radius: 0.7rem;
  background:
    linear-gradient(rgba(0, 12, 20, 0.58), rgba(0, 12, 20, 0.78)),
    var(--ai-preview, linear-gradient(135deg, rgba(45, 111, 155, 0.24), transparent)) center / cover no-repeat;
  text-align: center;
  cursor: pointer;
}

.ai-bench-drop:hover,
.ai-bench-file:focus-visible + .ai-bench-drop {
  border-style: solid;
  border-color: #dff5ff;
  box-shadow: 0 0 1rem rgba(140, 198, 232, 0.28);
}

.ai-bench-drop-mark {
  color: #8cc6e8;
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1;
}

.ai-bench-drop strong {
  display: block;
  max-width: 14rem;
  overflow: hidden;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-bench-drop > span:last-child,
.ai-bench-privacy {
  color: rgba(220, 239, 249, 0.62);
  font-size: 0.58rem;
  line-height: 1.45;
}

.ai-bench-privacy {
  margin: 0;
}

.ai-bench-action,
.ai-bench-view-controls button {
  border: 1px solid rgba(140, 198, 232, 0.56);
  border-radius: 999px;
  background: rgba(0, 24, 38, 0.7);
  color: #e9f7ff;
  font: 600 0.66rem/1 'Orbitron', sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
}

.ai-bench-action {
  min-height: 2.5rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
}

.ai-bench-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ai-bench-action:not(:disabled):hover,
.ai-bench-view-controls button:hover {
  border-color: #fff;
  box-shadow: 0 0 1rem rgba(140, 198, 232, 0.36);
}

.ai-bench-viewer {
  position: relative;
  min-height: 21rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 56%, rgba(32, 100, 138, 0.32), transparent 42%),
    linear-gradient(rgba(2, 14, 22, 0.5), rgba(0, 4, 8, 0.9));
}

.ai-bench-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 21rem;
  touch-action: none;
  cursor: grab;
}

.ai-bench-viewer canvas:active {
  cursor: grabbing;
}

.ai-bench-status {
  margin: 0;
  padding: 0.2rem 0;
  color: rgba(220, 239, 249, 0.72);
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: center;
}

.ai-bench-status:empty {
  display: none;
}

.ai-bench-progress {
  position: absolute;
  right: 1rem;
  bottom: 3.35rem;
  left: 1rem;
  height: 2px;
  overflow: hidden;
  background: rgba(140, 198, 232, 0.16);
}

.ai-bench-progress span {
  display: block;
  width: 38%;
  height: 100%;
  background: #bfe9ff;
  animation: ai-bench-scan 1.8s ease-in-out infinite alternate;
}

.ai-bench-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(191, 233, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 1.4rem rgba(140, 198, 232, 0.25);
}

.ai-bench-pause::before {
  position: absolute;
  inset: 0.72rem;
  border: 2px solid transparent;
  border-top-color: #bfe9ff;
  border-radius: 50%;
  content: '';
  animation: ai-bench-turn 1.4s linear infinite;
}

.ai-bench-view-controls {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  left: 1rem;
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.ai-bench-view-controls button,
.ai-bench-view-controls a {
  min-width: 7.4rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
}

.ai-bench-view-controls .ai-bench-reset,
.ai-bench-view-controls .ai-bench-services-link {
  display: grid;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0.52rem;
  place-items: center;
  border: 1px solid rgba(140, 198, 232, 0.56);
  border-radius: 50%;
  background: rgba(0, 24, 38, 0.7);
  color: #e9f7ff;
  text-decoration: none;
}

.ai-bench-reset svg,
.ai-bench-services-link svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-bench-view-controls .ai-bench-services-link:hover {
  border-color: #fff;
  box-shadow: 0 0 1rem rgba(140, 198, 232, 0.36);
}

.ai-bench-offer {
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: 1rem;
  border-left: 1px solid rgba(140, 198, 232, 0.24);
  color: rgba(220, 239, 249, 0.62);
  font-size: 0.62rem;
  line-height: 1.55;
}

.ai-bench-offer p {
  margin: 0;
}

.ai-bench-offer-label,
.ai-bench-credit,
.ai-bench-quota strong {
  color: #bfe9ff;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.ai-bench-offer-label strong {
  color: #eaffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}

.ai-bench-instructions {
  display: grid;
  gap: 0.38rem;
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(140, 198, 232, 0.24);
}

.ai-bench-instructions > p strong {
  color: #eaffff;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.ai-bench-instructions ol {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding-left: 1.15rem;
}

.ai-bench-instructions li::marker {
  color: #8cf;
  font-weight: 700;
}

@media (min-width: 56.25em) {
  .ai-bench-offer {
    align-content: start;
    padding-top: 1.45rem;
  }
}

.ai-bench-credit {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.ai-bench-quota {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem;
  border: 1px solid rgba(140, 198, 232, 0.3);
  border-radius: 0.55rem;
  background: rgba(0, 22, 34, 0.72);
}

.ai-bench-quota[hidden] {
  display: none;
}

.ai-bench-offer a {
  justify-self: start;
  padding: 0.58rem 0.78rem;
  border: 1px solid rgba(140, 198, 232, 0.5);
  border-radius: 999px;
  color: #e9f7ff;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.ai-bench-offer a:hover {
  border-color: #fff;
  box-shadow: 0 0 1rem rgba(140, 198, 232, 0.36);
}

.ai-bench[data-state='result'] .ai-bench-offer a {
  text-shadow: 0 0 0.8rem rgba(191, 233, 255, 0.72);
}

@keyframes ai-bench-scan {
  from { transform: translateX(-5%); }
  to { transform: translateX(170%); }
}

@keyframes ai-bench-turn {
  to { transform: rotate(360deg); }
}

/* On desktop, the title establishes the upper edge of the presentation area and the
   main element ends immediately above the footer. Pin both edges, then let auto block
   margins centre the instrument in that exact remaining region. */
@media (min-width: 56.25em) {
  .ai-bench {
    top: clamp(22rem, 35vh, 26rem);
    bottom: 0;
    height: fit-content;
    margin-block: auto;
    max-height: calc(100% - clamp(22rem, 35vh, 26rem));
  }

}

@media (max-width: 56.249em) {
  .ai-scene-intro {
    top: 5.05rem;
    display: block;
    width: min(72ch, calc(100% - 1.5rem));
    font-size: 0.52rem;
    line-height: 1.45;
  }

  .ai-scene-intro p + p {
    margin-top: 0.5rem;
  }

  .ai-bench {
    top: 13.5rem;
    width: calc(100% - 1rem);
    max-height: calc(100% - 13.95rem);
    border-radius: 0.85rem;
  }

  .ai-bench-heading {
    grid-template-columns: 1fr;
    padding: 0.55rem 0.7rem;
    text-align: center;
  }

  .ai-bench-workspace {
    grid-template-columns: 0.78fr 1.22fr;
  }

  .ai-bench-offer {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem 0.75rem;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid rgba(140, 198, 232, 0.24);
    border-left: 0;
  }

  .ai-bench-offer > p:nth-of-type(2) {
    display: none;
  }

  .ai-bench-quota {
    grid-column: 1 / -1;
  }

  .ai-bench-input {
    grid-template-rows: minmax(7rem, 1fr) auto auto;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .ai-bench-drop {
    min-height: 7rem;
  }

  .ai-bench-drop-mark {
    font-size: 2rem;
  }

  .ai-bench-drop strong {
    max-width: 8rem;
    font-size: 0.55rem;
  }

  .ai-bench-drop > span:last-child,
  .ai-bench-privacy {
    font-size: 0.46rem;
  }

  .ai-bench-action {
    min-height: 2.2rem;
    padding: 0.5rem;
    font-size: 0.52rem;
  }

  .ai-bench-viewer,
  .ai-bench-viewer canvas {
    min-height: 15.5rem;
  }

  .ai-bench-progress {
    right: 0.45rem;
    bottom: 2.85rem;
    left: 0.45rem;
  }

  .ai-bench-view-controls {
    right: 0.45rem;
    bottom: 0.5rem;
    left: 0.45rem;
    gap: 0.35rem;
  }

  .ai-bench-view-controls button {
    min-width: 0;
    padding: 0.48rem 0.5rem;
    font-size: 0.48rem;
  }

  .ai-bench-offer { font-size: 0.5rem; }
}

/* Phone portrait: keep the outlined page title visually attached to the header.
   Tablet and desktop geometry deliberately retain their existing offsets. */
@media (max-width: 40em) and (orientation: portrait) {
  .ai-scene-title {
    top: 0.65rem;
  }
}

@media (max-width: 56.249em) and (orientation: landscape) {
  .section-header {
    flex-direction: row;
    gap: 0.18rem;
    justify-content: space-between;
    padding: 0.22rem 0.75rem 0.28rem;
  }

  .section-brand {
    width: auto;
    gap: 0;
  }

  .section-home {
    display: inline-flex;
    width: auto;
    gap: 0.45rem;
    font-size: 0.95rem;
  }

  .section-home::after {
    display: none;
  }

  .section-home img {
    width: 1.45rem;
  }

  .section-tagline {
    display: none;
  }

  .section-nav {
    gap: 0.08rem;
  }

  .section-nav a {
    padding: 0.16rem 0.38rem;
    font-size: 0.62rem;
  }

  .ai-scene-title {
    top: 0.4rem;
    font-size: 1.45rem;
  }

  .ai-scene-intro {
    top: 2.25rem;
    width: min(92ch, calc(100% - 2rem));
    font-size: 0.42rem;
    line-height: 1.3;
  }

  .ai-scene-intro p + p {
    margin-top: 0.25rem;
  }

  .ai-bench {
    top: 5.4rem;
    max-height: calc(100% - 5.75rem);
  }

  .ai-bench-heading {
    padding: 0.3rem 0.55rem;
  }

  .ai-bench-heading h2 {
    font-size: 0.78rem;
  }

  .ai-bench-input {
    grid-template-rows: minmax(3.2rem, 1fr) auto;
    padding: 0.4rem;
  }

  .ai-bench-drop {
    min-height: 3.2rem;
  }

  .ai-bench-drop strong {
    max-width: 100%;
  }

  .ai-bench-privacy {
    display: none;
  }

  .ai-bench-action {
    min-height: 1.7rem;
  }

  .ai-bench-viewer,
  .ai-bench-viewer canvas {
    min-height: 5.6rem;
  }

  .ai-bench-offer { padding: 0.22rem 0.55rem; }

  .section-footer {
    padding-block: 0.3rem;
  }
}

@media (max-width: 32em) and (orientation: portrait) {
  .ai-bench {
    top: 13.5rem;
    max-height: calc(100% - 13.9rem);
  }

  .ai-bench-heading h2 {
    font-size: 0.86rem;
  }

  .ai-bench-workspace {
    grid-template-columns: 1fr;
  }

  .ai-bench-input {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 5.1rem;
    gap: 0.45rem;
    padding: 0.45rem;
    border-right: 0;
    border-bottom: 1px solid rgba(140, 198, 232, 0.24);
  }

  .ai-bench-drop {
    min-height: 5.1rem;
  }

  .ai-bench-drop strong {
    max-width: 12rem;
  }

  .ai-bench-action {
    align-self: stretch;
    width: 7.2rem;
  }

  .ai-bench-viewer,
  .ai-bench-viewer canvas {
    min-height: 11.5rem;
  }

  .ai-bench-privacy {
    display: none;
  }

  .ai-bench-offer {
    grid-column: auto;
    grid-template-columns: 1fr auto;
  }

  .ai-bench-offer-label {
    display: none;
  }
}

/* A phone gets a compact information control instead of a full introductory block.
   The panel occupies only the main presentation area, leaving the site header and footer
   visible, and deliberately has no entrance or exit animation. */
@media (max-width: 40em) and (orientation: portrait),
       (max-height: 40em) and (orientation: landscape) and (max-width: 56.249em) {
  .ai-mobile-usage {
    position: absolute;
    top: 2.82rem;
    left: 50%;
    z-index: 5;
    display: block;
    width: calc(100% - 2rem);
    min-height: 0.55rem;
    align-items: center;
    transform: translateX(-50%);
    color: #eaffff;
    font: 600 0.48rem/1 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
    pointer-events: none;
  }

  .ai-mobile-usage-track {
    display: block;
    height: 0.42rem;
    overflow: hidden;
    border: 1px solid rgba(180, 220, 255, 0.58);
    border-radius: 0.18rem;
    background: rgba(4, 13, 19, 0.9);
    box-shadow: inset 0 0 0.35rem rgba(0, 0, 0, 0.9), 0 0 0.45rem rgba(136, 204, 255, 0.16);
  }

  .ai-mobile-usage-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: #4dff9a;
    box-shadow: 0 0 0.45rem rgba(77, 255, 154, 0.64);
    transition: width 360ms ease, background-color 360ms ease, box-shadow 360ms ease;
  }

  .ai-mobile-usage[data-level='medium'] .ai-mobile-usage-fill {
    background: #ffe45c;
    box-shadow: 0 0 0.45rem rgba(255, 228, 92, 0.64);
  }

  .ai-mobile-usage[data-level='low'] .ai-mobile-usage-fill {
    background: #ff9d3f;
    box-shadow: 0 0 0.45rem rgba(255, 157, 63, 0.64);
  }

  .ai-mobile-usage[data-level='empty'] .ai-mobile-usage-track {
    border-color: #ff4b55;
    background: rgba(255, 75, 85, 0.18);
    box-shadow: inset 0 0 0.35rem rgba(0, 0, 0, 0.9), 0 0 0.5rem rgba(255, 75, 85, 0.48);
  }

  .ai-info-trigger {
    position: absolute;
    top: 4.05rem;
    left: 50%;
    z-index: 5;
    display: grid;
    width: 1.85rem;
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(180, 220, 255, 0.62);
    border-radius: 50%;
    background: rgba(0, 9, 15, 0.78);
    color: rgba(239, 249, 255, 0.94);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    transform: translateX(-50%);
  }

  .ai-station-arrow {
    position: absolute;
    top: 4.2rem;
    z-index: 5;
    display: grid;
    width: 1.55rem;
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: #bfe9ff;
    filter: drop-shadow(0 0 0.35rem rgba(136, 204, 255, 0.58));
  }

  .ai-station-arrow svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ai-station-arrow-prev {
    left: calc(50% - 3.45rem);
  }

  .ai-station-arrow-next {
    right: calc(50% - 3.45rem);
  }

  .ai-station-arrow:focus-visible,
  .ai-info-trigger:focus-visible {
    outline: 1px solid #eaffff;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ai-mobile-usage-fill { transition: none; }
  }

  .ai-scene-intro {
    display: none;
  }

  .ai-scene-intro[data-open] {
    position: absolute;
    inset: 0.7rem;
    z-index: 40;
    display: block;
    width: auto;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    padding: 1rem 1.1rem 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(164, 216, 244, 0.58);
    border-radius: 0.9rem;
    background: rgba(0, 7, 12, 0.97);
    color: rgba(239, 249, 255, 0.94);
    font-size: clamp(1rem, 4.7vw, 1.2rem);
    line-height: 1.68;
    text-align: left;
    transform: none;
    scrollbar-color: rgba(158, 211, 240, 0.72) rgba(0, 11, 18, 0.5);
    scrollbar-width: thin;
  }

  .ai-scene-intro[data-open] .ai-phone-usage-info {
    display: block;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(140, 198, 232, 0.3);
  }

  .ai-scene-intro[data-open] .ai-phone-station-info {
    display: block;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(140, 198, 232, 0.3);
  }

  .ai-phone-station-info h2 {
    margin: 0 0 0.65rem;
    color: #8cf;
    font: 700 clamp(0.9rem, 4.4vw, 1.08rem)/1.35 'Orbitron', sans-serif;
    letter-spacing: 0.05em;
  }

  .ai-phone-station-info .ai-bench-instructions {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
  }

  .ai-phone-station-info .ai-bench-instructions ol {
    gap: 0.55rem;
    padding-left: 1.4rem;
  }

  .ai-bench-offer {
    display: none;
  }

  .ai-phone-usage-info h2 {
    margin: 1.15rem 0 0.5rem;
    color: #bfe9ff;
    font: 700 clamp(0.82rem, 4vw, 1rem)/1.35 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
  }

  .ai-phone-usage-info h2:first-child {
    margin-top: 0;
  }

  .ai-phone-usage-info p {
    margin: 0;
  }

  .ai-phone-usage-info p + p {
    margin-top: 0.7rem;
  }

  .ai-phone-usage-info ul {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding-left: 1.35rem;
  }

  .ai-info-close {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    margin: 0 0 0.75rem auto;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(180, 220, 255, 0.62);
    border-radius: 50%;
    background: #020a0f;
    color: #fff;
    font: 400 1.65rem/1 sans-serif;
  }

  .ai-bench {
    top: 6.4rem;
    bottom: 0.55rem;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    max-height: none;
  }

  .ai-bench-action {
    font-size: 0;
  }

  .ai-bench-action::after {
    content: 'GENERATE';
    font-size: 0.52rem;
  }

  .ai-station[data-ai-station='3d'] .ai-bench-action {
    align-self: center;
    height: 2.5rem;
    min-height: 2.5rem;
    border-radius: 999px;
  }

  .ai-station[data-ai-station='image'] > .ai-bench-workspace,
  .ai-station[data-ai-station='video'] > .ai-bench-workspace,
  .ai-station[data-ai-station='music'] > .ai-bench-workspace,
  .ai-station[data-ai-station='audio'] > .ai-bench-workspace,
  .ai-station[data-ai-station='text'] > .ai-bench-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .ai-image-input,
  .ai-audio-input,
  .ai-writing-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.2rem;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.45rem;
    border-right: 0;
    border-bottom: 1px solid rgba(140, 198, 232, 0.24);
  }

  .ai-image-sentence,
  .ai-audio-sentence,
  .ai-writing-sentence {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0.48rem;
  }

  .ai-writing-sentence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
  }

  .ai-writing-sentence > span {
    display: none;
  }

  .ai-image-input > .ai-bench-action,
  .ai-audio-input > .ai-bench-action,
  .ai-writing-input > .ai-bench-action {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 7.2rem;
    min-height: 0;
  }

  .ai-image-input > .ai-bench-status,
  .ai-audio-input > .ai-bench-status,
  .ai-writing-input > .ai-bench-status {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ai-image-output,
  .ai-audio-output,
  .ai-writing-output {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .ai-writing-result {
    max-height: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-bench-progress span,
  .ai-bench-pause::before {
    animation: none;
  }
}

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

.section-footer {
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(180, 220, 255, 0.25);
  color: var(--muted-color);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  letter-spacing: 0.08em;
  text-align: center;
}

.section-footer p {
  margin: 0;
}

.footer-socials {
  display: none;
}

@media (max-width: 56.24em) {
  .section-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(0.2rem, 1.5vw, 0.45rem);
    padding: 0.65rem 0.5rem;
  }

  .section-footer > p {
    grid-column: 2;
    font-size: clamp(0.52rem, 2.15vw, 0.62rem);
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .footer-socials {
    display: flex;
    align-items: center;
    gap: clamp(0.16rem, 1vw, 0.3rem);
  }

  .footer-socials:first-of-type {
    justify-content: flex-end;
  }

  .footer-socials:last-of-type {
    justify-content: flex-start;
  }

  .footer-social-link {
    display: grid;
    width: clamp(0.85rem, 3.7vw, 1rem);
    height: clamp(0.85rem, 3.7vw, 1rem);
    place-items: center;
    color: var(--muted-color);
    text-decoration: none;
  }

  .footer-social-link:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
  }

  .footer-social-icon {
    width: clamp(0.68rem, 3vw, 0.8rem);
    height: clamp(0.68rem, 3vw, 0.8rem);
    fill: currentColor;
    pointer-events: none;
  }
}

@media (min-width: 56.25em) {
  .section-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 3rem);
  }

  .section-footer > p {
    grid-column: 2;
    white-space: nowrap;
  }

  .footer-socials {
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1.25vw, 1.15rem);
  }

  .footer-socials:first-of-type {
    justify-content: flex-end;
  }

  .footer-socials:last-of-type {
    justify-content: flex-start;
  }

  .footer-social-link {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: var(--muted-color);
    border-radius: 50%;
    text-decoration: none;
    transition:
      color 180ms ease,
      filter 180ms ease,
      transform 180ms ease;
  }

  .footer-social-link:hover,
  .footer-social-link:focus-visible {
    outline: none;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(164, 220, 248, 0.9));
    transform: scale(1.12);
  }

  .footer-social-icon {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
    pointer-events: none;
  }
}

/*
 * The channels. Contact only, deliberately.
 *
 * They lived in the footer of every page, which put seven links in front of someone on
 * every single screen and took the height out of a reading area that cannot scroll the
 * window to get it back. They belong on the page where a visitor has already decided to
 * make contact.
 */
.channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.4rem 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.channel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  color: var(--muted-color);
  text-decoration: none;
}

/* The mark takes the link's colour, so one file serves both states. */
.channel-mark {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}

.channel:hover,
.channel:focus-visible {
  color: var(--accent);
}

.channel:hover span,
.channel:focus-visible span {
  text-decoration: underline;
}

/* Desktop viewport contract for the three full-screen interactive compositions.
   The frame owns the viewport; the main row may shrink, and each page gives its
   interactive region the remaining space. If that region reaches its usable
   minimum, it scrolls visibly instead of disappearing beneath the footer. */
@media (min-width: 56.25em) {
body:has(.section-main-ai),
  body:has(.section-main-contact),
  body:has(.section-main-media),
  body:has(.section-main-services) {
    display: grid;
    /* A bare implicit column is sized to its widest unshrinkable child, so one nowrap
       heading used to widen the whole frame past the window and push every page element
       off the right edge. minmax(0, 1fr) pins the column to the viewport instead. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100svh;
    overflow: clip;
  }

  body:has(.section-main-ai) > .section-main,
  body:has(.section-main-contact) > .section-main,
  body:has(.section-main-media) > .section-main,
  body:has(.section-main-services) > .section-main {
    min-height: 0;
  }

  .section-main-ai {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: clamp(0.55rem, 1.25vh, 1rem);
    align-content: stretch;
    padding: clamp(0.65rem, 2vh, 1.5rem) clamp(1rem, 2vw, 2rem) clamp(0.5rem, 1.25vh, 1rem);
    box-sizing: border-box;
    overflow: clip;
  }

  .section-main-ai .ai-scene-title,
  .section-main-ai .ai-scene-intro,
  .section-main-ai .ai-generator-selector,
  .section-main-ai .ai-bench {
    position: relative;
    inset: auto;
    transform: none;
  }

  .section-main-ai .ai-scene-title {
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
    font-size: clamp(2.5rem, min(6vw, 9vh), 6rem);
  }

  .section-main-ai .ai-scene-intro {
    grid-row: 2;
    justify-self: center;
    width: min(108rem, calc(100% - 2rem));
    box-sizing: border-box;
    padding-block: clamp(0.65rem, 1.5vh, 1.35rem);
    font-size: clamp(0.72rem, min(1.35vw, 1.8vh), 1.3rem);
    line-height: 1.45;
  }

  /* Keep the backing inside the measured row instead of bleeding into its neighbours. */
  .section-main-ai .ai-scene-intro::before {
    top: 0;
    bottom: 0;
  }

  .section-main-ai .ai-generator-selector {
    grid-row: 3;
    justify-self: center;
  }

  .section-main-ai .ai-generator-selector button {
    min-width: clamp(4.25rem, 6vw, 6.2rem);
    padding: clamp(0.35rem, 0.8vh, 0.55rem) clamp(0.6rem, 1vw, 1rem);
  }

  .section-main-ai .ai-bench {
    grid-row: 4;
    align-self: stretch;
    justify-self: center;
    width: min(94rem, calc(100% - clamp(2rem, 4vw, 5rem)));
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    scrollbar-color: rgba(141, 234, 255, 0.72) rgba(0, 11, 18, 0.62);
    scrollbar-width: thin;
  }

  .section-main-ai .ai-bench-workspace,
  .section-main-ai .ai-station,
  .section-main-ai .ai-bench-viewer,
  .section-main-ai .ai-bench-viewer canvas {
    min-height: 0;
    max-height: 100%;
  }

  .section-main.section-main-contact > .contact-scene {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(0.75rem, 2vh, 1.5rem);
    height: 100%;
    min-height: 0;
    padding: clamp(0.75rem, 2vh, 1.5rem) clamp(1rem, 3vw, 3rem) clamp(0.6rem, 1.5vh, 1.2rem);
  }

  .section-main-contact .contact-scene-title,
  .section-main-contact .contact-scene-intro {
    position: relative;
    inset: auto;
    justify-self: center;
    transform: none;
  }

  .section-main-contact .contact-scene-title {
    grid-row: 1;
    font-size: clamp(2.5rem, min(7vw, 9vh), 5rem);
  }

  .section-main-contact .contact-scene-intro {
    grid-row: 2;
    width: min(72rem, calc(100% - 3rem));
    font-size: clamp(0.78rem, min(1.05vw, 1.8vh), 1.2rem);
  }

  .section-main-contact .contact-workspace {
    grid-row: 3;
    align-self: stretch;
    width: min(88rem, calc(100% - 3rem));
    height: auto;
    min-height: 0;
    padding-right: 0.45rem;
    overflow-y: auto;
    scrollbar-color: rgba(141, 234, 255, 0.72) rgba(0, 11, 18, 0.62);
    scrollbar-width: thin;
  }

  .section-main-contact .contact-panel {
    height: max-content;
  }

  .section-main.section-main-media > article {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(0.75rem, 2vh, 1.5rem);
    min-height: 0;
    padding: clamp(0.75rem, 2vh, 1.5rem) clamp(1rem, 2vw, 2rem) clamp(0.5rem, 1.25vh, 1rem);
  }

  .section-main-media .media-scene-title,
  .section-main-media .media-scene-intro,
  .section-main-media .media-carousel {
    position: relative;
    inset: auto;
    transform: none;
  }

  .section-main-media .media-scene-title {
    grid-row: 1;
    justify-self: center;
    font-size: clamp(2.5rem, min(7vw, 9vh), 5rem);
  }

  .section-main-media .media-scene-intro {
    grid-row: 2;
    justify-self: center;
    width: min(78rem, calc(100% - 4rem));
    font-size: clamp(0.78rem, min(1.05vw, 1.8vh), 1.2rem);
  }

  .section-main-media .media-carousel {
    grid-row: 3;
    min-height: 0;
  }

  .section-main-media .media-carousel-viewport {
    overflow: clip;
  }

  .section-main-media .media-platform-card {
    max-height: 100%;
    box-sizing: border-box;
  }

  .section-main-media .media-platform-visual,
  .section-main-media .media-platform-visual img {
    min-height: 0;
    max-height: 100%;
  }
}

/* Desktop AI generator bay. The outer frame is the permanent bay; the current 3D
   bench is its present content and later generator benches can replace that content. */
.ai-generator-selector {
  display: none;
}

@media (min-width: 56.25em) {
  .ai-generator-selector {
    position: absolute;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .ai-generator-selector button {
    position: relative;
    min-width: 6.2rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(136, 204, 255, 0.34);
    border-radius: 999px;
    background: rgba(0, 9, 15, 0.76);
    color: rgba(218, 239, 250, 0.58);
    font: 600 0.78rem/1 'Orbitron', sans-serif;
    letter-spacing: 0.11em;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, text-shadow 160ms ease;
  }

  .ai-generator-selector button:hover,
  .ai-generator-selector button:focus-visible,
  .ai-generator-selector button.is-active {
    border-color: #8cf;
    color: #eaffff;
    box-shadow: 0 0 0.35rem rgba(136, 204, 255, 0.72), 0 0 1rem rgba(136, 204, 255, 0.42);
    text-shadow: 0 0 0.7rem #8cf;
  }

  .ai-generator-selector button:focus-visible {
    outline: 1px solid #eaffff;
    outline-offset: 3px;
  }

  .ai-bench {
    top: clamp(16.5rem, 29vh, 19rem);
    bottom: auto;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(94rem, calc(100% - clamp(2rem, 4vw, 5rem)));
    height: clamp(32rem, 54vh, 45rem);
    max-height: calc(100% - 2rem);
    margin: 0;
    border-radius: 2.5rem;
  }

  .ai-bench-workspace { min-height: 0; }

  .ai-bench-heading {
    padding: 1.05rem 1.3rem 0.9rem;
  }

  .ai-bench-heading h2 {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
  }

  .ai-bench-workspace {
    grid-template-columns: minmax(14rem, 0.82fr) minmax(24rem, 1.55fr) minmax(13rem, 0.78fr);
  }

  .ai-bench-input {
    grid-template-rows: clamp(10rem, 18vh, 13rem) auto auto;
    gap: 0.85rem;
    align-content: start;
    padding: 1.3rem;
  }

  .ai-bench-drop {
    min-height: clamp(10rem, 18vh, 13rem);
  }

  .ai-bench-drop-mark {
    font-size: 3rem;
  }

  .ai-bench-drop strong {
    font-size: 0.78rem;
  }

  .ai-bench-drop > span:last-child {
    font-size: 0.64rem;
  }

  .ai-bench-action {
    min-height: 2.8rem;
    font-size: 0.72rem;
  }

  .ai-bench-offer {
    gap: 0.85rem;
    padding: 1.4rem;
    font-size: 0.7rem;
    line-height: 1.62;
  }

  .ai-bench-offer-label strong {
    font-size: 0.9rem;
  }

  .ai-bench-instructions > p strong {
    font-size: 0.76rem;
  }

  .ai-bench-instructions ol {
    gap: 0.55rem;
  }

  .ai-bench-credit {
    font-size: 0.64rem;
  }

  .ai-bench-view-controls .ai-bench-reset,
  .ai-bench-view-controls .ai-bench-services-link {
    width: 2.7rem;
    min-width: 2.7rem;
    height: 2.7rem;
    padding: 0.58rem;
  }

  .ai-bench-viewer,
  .ai-bench-viewer canvas {
    height: 100%;
    min-height: 0;
  }

  .ai-usage {
    position: absolute;
    z-index: 4;
    width: 6rem;
    height: 6rem;
    color: #eaffff;
    font-family: 'Orbitron', sans-serif;
    pointer-events: none;
  }

  .ai-usage-gauge {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ai-usage-frame {
    fill: rgba(0, 8, 14, 0.5);
    stroke: rgba(180, 220, 255, 0.46);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .ai-usage-segment {
    fill: none;
    stroke: rgba(136, 204, 255, 0.18);
    stroke-width: 19;
    stroke-linecap: butt;
    transition: stroke 360ms ease, filter 360ms ease;
  }

  .ai-usage-segment.is-used:nth-child(1) {
    stroke: #4dff9a;
    filter: drop-shadow(0 0 3px rgba(77, 255, 154, 0.62));
  }

  .ai-usage-segment.is-used:nth-child(2) {
    stroke: #ffe45c;
    filter: drop-shadow(0 0 3px rgba(255, 228, 92, 0.62));
  }

  .ai-usage-segment.is-used:nth-child(3) {
    stroke: #ff9d3f;
    filter: drop-shadow(0 0 3px rgba(255, 157, 63, 0.62));
  }

  .ai-usage-segment.is-used:nth-child(4) {
    stroke: #ff4b55;
    filter: drop-shadow(0 0 3px rgba(255, 75, 85, 0.62));
  }

  .ai-usage-segment-gaps {
    fill: none;
    stroke: #00080e;
    stroke-width: 4;
    stroke-linecap: butt;
  }

  .ai-usage-count {
    fill: #eaffff;
    font-family: 'Orbitron', sans-serif;
    /* SVG units: keep the widest count inside the ring's 57-unit opening. */
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .ai-usage-traces {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .ai-usage-trace-line {
    fill: none;
    stroke: rgba(180, 220, 255, 0.46);
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
  }

  .ai-usage-trace-node {
    fill: #8cf;
    stroke: rgba(180, 220, 255, 0.46);
    stroke-width: 1;
    filter: drop-shadow(0 0 5px rgba(136, 204, 255, 0.45));
    vector-effect: non-scaling-stroke;
  }

  .ai-bench-quota-countdown {
    color: #eaffff;
    font-size: 0.64rem;
  }

  .ai-bench-quota-paths {
    display: flex;
    gap: 0.45rem;
  }

  .ai-bench-quota-paths a {
    padding: 0.35rem 0.55rem;
    font-size: 0.54rem;
  }
}

@media (min-width: 56.25em) and (prefers-reduced-motion: reduce) {
  .ai-usage-segment { transition: none; }
}

/* Shop's progressive enhancement reorganises the existing catalogue into category tabs
   and one focused marketplace card. Without JavaScript the original document still
   scrolls normally; only a successfully built carousel locks the page. */
.shop-layout-pending .shop-page,
.shop-layout-pending .section-main-shop,
.shop-page.shop-carousel-ready,
.shop-page.shop-carousel-ready .section-main-shop {
  height: 100svh;
  overflow: hidden;
}

.shop-layout-pending .section-main.section-main-shop > article,
.shop-carousel-ready .section-main.section-main-shop > article {
  box-sizing: border-box;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.shop-layout-pending .section-main-shop > article { visibility: hidden; }

.shop-category-nav {
  position: absolute;
  top: clamp(13rem, 24vh, 15rem);
  left: 50%;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, 0.6vw, 0.75rem);
  width: min(96vw, 90rem);
  transform: translateX(-50%);
}

.shop-mobile-category-heading,
.shop-mobile-category-icon {
  display: none;
}

.shop-category-button {
  display: grid;
  place-items: center;
  gap: 0.18rem;
  min-width: 4.6rem;
  padding: 0.3rem 0.45rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #bed3dc;
  font: inherit;
  font-size: clamp(0.54rem, 0.62vw, 0.72rem);
  line-height: 1.1;
  cursor: pointer;
}

.shop-category-button:hover,
.shop-category-button:focus-visible,
.shop-category-button.is-active {
  border-bottom-color: #8deaff;
  color: #fff;
  text-shadow: 0 0 0.5rem rgba(141, 234, 255, 0.9);
}

.shop-category-icon {
  width: 1.55rem;
  height: 1.55rem;
  fill: currentColor;
}

.shop-category-stage {
  position: absolute;
  top: clamp(17rem, 31vh, 19rem);
  right: 0;
  bottom: 0.35rem;
  left: 0;
  min-height: 0;
}

.shop-category-panel {
  position: relative;
  width: 100%;
  height: 100%;
}

.shop-category-panel[hidden] { display: none; }

.shop-category-heading {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  margin: 0;
  transform: translateX(-50%);
  color: #8deaff;
  font-size: clamp(0.72rem, 0.85vw, 0.95rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shop-category-description {
  position: absolute;
  top: 1.35rem;
  left: 50%;
  z-index: 4;
  width: min(70rem, 90vw);
  margin: 0;
  transform: translateX(-50%);
  color: #d8e5eb;
  font-size: clamp(0.6rem, 0.66vw, 0.75rem);
  text-align: center;
}

.shop-carousel-viewport {
  position: absolute;
  top: 2rem;
  right: 0;
  bottom: 3.15rem;
  left: 0;
  overflow: hidden;
  perspective: 1100px;
}

.shop-category-panel:has(.shop-category-description) .shop-carousel-viewport { top: 3.4rem; }

.shop-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(12rem, 44%) 1fr;
  grid-template-rows: auto 1fr;
  gap: 0.55rem 1rem;
  box-sizing: border-box;
  width: min(45rem, 62vw);
  height: min(21rem, 95%);
  padding: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(141, 234, 255, 0.45);
  border-radius: 1rem;
  transform: translate(-50%, -50%);
  background: rgba(2, 13, 20, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform 360ms ease, opacity 260ms ease;
}

.shop-card[data-offset="0"] { z-index: 4; opacity: 1; pointer-events: auto; }
.shop-card[data-offset="-1"] { transform: translate(-112%, -50%) rotateY(34deg) scale(0.78); opacity: 0.38; }
.shop-card[data-offset="1"] { transform: translate(12%, -50%) rotateY(-34deg) scale(0.78); opacity: 0.38; }

.shop-card h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: #8deaff;
  font-size: clamp(0.9rem, 1vw, 1.15rem);
}

.shop-card .section-figure {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  min-height: 0;
  margin: 0;
}

.shop-card .shop-link,
.shop-card .section-figure img { display: block; width: 100%; height: 100%; }
.shop-card .section-figure img { border-radius: 0.65rem; object-fit: cover; }

.shop-card > p {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  color: #f3fbff;
  font-size: clamp(0.78rem, 0.9vw, 1rem);
  line-height: 1.55;
}

.shop-card:not(:has(.section-figure)) > p {
  grid-column: 1 / -1;
  max-width: 55rem;
  margin: auto;
  text-align: center;
}

.shop-carousel-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  gap: 0.08rem 0.75rem;
}

.shop-carousel-chevron {
  border: 0;
  padding: 0 0.2rem;
  background: transparent;
  color: #eaffff;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.shop-carousel-dots { display: flex; justify-content: center; gap: 0.35rem; }
.shop-carousel-dot { width: 0.55rem; height: 0.55rem; padding: 0; border: 1px solid #72b7d2; border-radius: 50%; background: transparent; cursor: pointer; }
.shop-carousel-dot.is-active { background: #8deaff; box-shadow: 0 0 0.5rem rgba(141, 234, 255, 0.9); }

.shop-carousel-status {
  grid-column: 1 / -1;
  margin: 0;
  color: #eaffff;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 56.249em) {
  .shop-mobile-category-heading,
  .shop-mobile-category-icon {
    display: block;
  }

  .shop-category-nav { top: 10rem; gap: 0.05rem; width: calc(100% - 0.75rem); }
  .shop-category-button { flex: 1 1 0; min-width: 0; padding: 0.2rem 0; }
  .shop-category-button span { display: none; }
  .shop-category-icon { width: 1.15rem; height: 1.15rem; }
  .shop-category-stage { top: 12.35rem; bottom: 0.2rem; }
  .shop-category-heading { font-size: 0.72rem; }
  .shop-category-description { top: 1.1rem; width: calc(100% - 1.5rem); font-size: 0.52rem; line-height: 1.25; }
  .shop-carousel-viewport { top: 2rem; bottom: 2.85rem; }
  .shop-category-panel:has(.shop-category-description) .shop-carousel-viewport { top: 2.75rem; }
  .shop-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.35rem; width: calc(100% - 1.25rem); height: calc(100% - 0.25rem); padding: 0.65rem; border-radius: 0.85rem; }
  .shop-card[data-offset]:not([data-offset="0"]) { opacity: 0; }
  .shop-card h3 { grid-column: 1; grid-row: 1; font-size: 0.78rem; }
  .shop-card .section-figure { grid-column: 1; grid-row: 2; }
  .shop-card > p,
  .shop-card:not(:has(.section-figure)) > p { grid-column: 1; grid-row: 3; align-self: center; max-height: 4.8em; overflow: auto; font-size: clamp(0.62rem, 2.8vw, 0.78rem); line-height: 1.4; text-align: left; }
  .shop-card:not(:has(.section-figure)) > p { grid-row: 2 / 4; margin: auto; text-align: center; }
  .shop-carousel-controls { gap: 0.05rem 0.45rem; }
  .shop-carousel-chevron { font-size: 1.65rem; }
  .shop-carousel-dots { gap: 0.26rem; }
  .shop-carousel-dot { width: 0.42rem; height: 0.42rem; }
  .shop-carousel-status { font-size: 0.56rem; }
}

/* Final Shop presentation refinements. Desktop uses an image-led 16:9 carousel;
   phone keeps the readable top-to-bottom catalogue. */
@media (min-width: 56.25em) {
  .shop-scene-intro {
    top: 15rem;
    right: auto;
    left: 50%;
    width: min(78rem, calc(100% - 4rem));
    transform: translateX(-50%);
    text-align: center;
  }

  .shop-category-nav {
    top: 20rem;
    gap: clamp(0.55rem, 1vw, 1.15rem);
  }

  .shop-category-button {
    position: relative;
    min-width: 3.7rem;
    padding: 0.35rem 0.55rem 0.5rem;
  }

  .shop-category-icon {
    width: 2.05rem;
    height: 2.05rem;
  }

  .shop-category-button span {
    position: absolute;
    top: calc(100% + 0.38rem);
    left: 50%;
    z-index: 20;
    width: max-content;
    padding: 0.28rem 0.45rem;
    border: 1px solid rgba(141, 234, 255, 0.46);
    border-radius: 0.3rem;
    transform: translate(-50%, -0.2rem);
    background: rgba(2, 13, 20, 0.96);
    color: #f3fbff;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .shop-category-button:hover span,
  .shop-category-button:focus-visible span {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .shop-category-stage {
    top: 23rem;
  }

  .shop-category-heading,
  .shop-category-description {
    display: none;
  }

  .shop-carousel-viewport {
    top: 0.5rem;
    bottom: 3rem;
  }

  .shop-category-panel:has(.shop-category-description) .shop-carousel-viewport {
    top: 0.5rem;
  }

  .shop-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(4rem, auto);
    gap: 0.7rem;
    width: min(52rem, 72vw);
    height: min(36rem, 96%);
    padding: 0.9rem;
  }

  .shop-card h3 {
    display: none;
  }

  .shop-card .section-figure {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .shop-card > p,
  .shop-card:not(:has(.section-figure)) > p {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    width: min(100%, 52rem);
    margin: 0 auto;
    font-size: clamp(0.78rem, 0.82vw, 0.94rem);
    line-height: 1.45;
    text-align: center;
  }

  .shop-card:not(:has(.section-figure)) > p {
    grid-row: 1 / 3;
    align-self: center;
  }

  .shop-card[data-offset="-1"] {
    transform: translate(-108%, -50%) rotateY(34deg) scale(0.72);
  }

  .shop-card[data-offset="1"] {
    transform: translate(8%, -50%) rotateY(-34deg) scale(0.72);
  }
}

@media (max-width: 56.249em) {
  .section-main-shop > article > h2,
  .section-main-shop > article > .section-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }

  .section-main-shop > article > h2 {
    position: relative;
    height: 2rem;
    padding-top: 0;
    border-top: 0;
    margin: 3rem 0.55rem 1.1rem 0;
    font-size: 1.2rem;
    line-height: 1;
  }

  .section-main-shop > article > h2::before {
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: calc(100vw - 2rem);
    border-top: 1px solid var(--border-color);
    content: '';
  }

  .section-main-shop > article > .section-icon {
    width: 2rem;
    height: 2rem;
    margin: 3rem 0 1.1rem;
  }

  .section-main-shop > article > .section-icon + p:not(.shop-scene-intro) {
    margin: 0 0 1.25rem;
    font-size: clamp(0.72rem, 3.1vw, 0.86rem);
    line-height: 1.45;
  }

  .section-main-shop > article > h3 {
    display: none;
  }

  .section-main-shop > article > .section-figure {
    display: flex;
    align-items: center;
    width: calc(100vw - 1rem);
    max-width: none;
    aspect-ratio: 16 / 9;
    margin: 1rem calc(50% - 50vw + 0.5rem);
    overflow: hidden;
  }

  .section-main-shop > article > .section-figure .shop-link,
  .section-main-shop > article > .section-figure img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .section-main-shop > article > .section-figure img {
    object-fit: cover;
    object-position: center;
  }

  .section-main-shop > article > .section-figure + p {
    margin: 0.75rem 0 1.6rem;
    font-size: clamp(0.68rem, 3vw, 0.82rem);
    line-height: 1.5;
  }
}

/* The legal documents remain readable long-form pages in every supported language. */
@media (max-width: 56.249em) {
  .section-main.section-main-shop > article,
  .section-main.section-main-media > article {
    padding-top: calc(clamp(0.5rem, 1.5vh, 1rem) + 3.525rem + 1rem);
  }
  .section-main-shop .shop-scene-intro,
  .section-main-media .media-scene-intro {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    transform: none;
  }
  .section-main-media .media-carousel { margin-top: 1rem; }
  .section-main-shop > article > .shop-mobile-category-heading,
  .section-main-shop > article > .shop-mobile-category-heading + .section-icon { margin-top: 2.25rem; }
  .section-main-shop > article > .shop-mobile-category-heading::before { top: -1.1rem; }
}

.legal-page .section-title { white-space: normal; overflow-wrap: anywhere; }
.legal-page #legal-content { overflow-wrap: anywhere; }
.legal-page .section-nav { flex-wrap: wrap; }
@media (min-width: 56.25em) {
  .legal-page .section-header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) clamp(3.25rem, 5.5vw, 4.75rem);
    column-gap: clamp(0.5rem, 2vw, 2rem);
  }
  .legal-page .section-brand,
  .legal-page .section-header > nav {
    position: static;
    transform: none;
    min-width: 0;
  }
}
.legal-page .footer-legal-link {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.legal-page .footer-legal-link--privacy { text-align: left; }
.legal-page .footer-legal-link--impressum { text-align: right; }
@media (max-width: 56.249em) {
  .legal-page .footer-legal-link { max-width: calc((100vw - 2rem) / 2); }
}

/* Legal destinations bookend the footer, without displacing its centred content. */
.footer-legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  font-size: inherit;
  white-space: nowrap;
}
.footer-legal-icon { display: none; }
.footer-legal-link--privacy { justify-self: start; }
.footer-legal-link--impressum { justify-self: end; }
@media (min-width: 56.25em) {
  .section-footer:has(.footer-legal-link) {
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  }
  .section-footer:has(.footer-legal-link) > p { grid-column: 3; grid-row: 1; }
  .footer-legal-link--privacy { grid-column: 1; grid-row: 1; }
  .footer-legal-link--impressum { grid-column: 5; grid-row: 1; }
  .section-footer:has(.footer-legal-link) > .footer-socials:first-of-type { grid-column: 2; grid-row: 1; }
  .section-footer:has(.footer-legal-link) > .footer-socials:last-of-type { grid-column: 4; grid-row: 1; }
}
@media (max-width: 56.249em) {
  .section-footer:has(.footer-legal-link) {
    grid-template-columns: 24px 96px minmax(0, 1fr) 96px 24px;
    gap: 0;
    padding: 0.5rem;
  }
  .section-footer:has(.footer-legal-link) > p {
    grid-column: 3; grid-row: 1;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .section-footer:has(.footer-legal-link) > .footer-socials:first-of-type { grid-column: 2; grid-row: 1; }
  .section-footer:has(.footer-legal-link) > .footer-socials:last-of-type { grid-column: 4; grid-row: 1; }
  .footer-legal-link--privacy { grid-column: 1; grid-row: 1; }
  .footer-legal-link--impressum { grid-column: 5; grid-row: 1; }
  .footer-legal-link { position: relative; justify-content: center; width: 24px; height: 24px; }
  .footer-legal-link > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .footer-legal-icon {
    display: block; width: clamp(0.85rem, 3.7vw, 1rem); height: clamp(0.85rem, 3.7vw, 1rem);
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .about-founder { width: 32px; height: 32px; }
  .about-founder::before { content: ''; position: absolute; inset: -6px; }
}

/* Invisible hit areas preserve the authored icon and dot sizes. */
@media (max-width: 56.249em) {
.footer-social-link,
.section-nav a,
.services-mobile-dot,
.services-carousel-dot,
.media-carousel-dot,
.shop-carousel-dot {
  position: relative;
}
.footer-social-link::before,
.section-nav a::before,
.services-mobile-dot::before,
.services-carousel-dot::before,
.media-carousel-dot::before,
.shop-carousel-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
  background: transparent;
}

.section-nav a { min-width: 24px; min-height: 24px; box-sizing: border-box; text-align: center; }
.footer-social-link { min-width: 24px; min-height: 24px; }
.footer-social-link svg { width: 1.25rem; height: 1.25rem; }
:is(.services-mobile-dot, .services-carousel-dot, .shop-carousel-dot, .media-carousel-dot) {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:is(.services-mobile-dot, .services-carousel-dot, .shop-carousel-dot, .media-carousel-dot)::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: var(--tap-dot-size, 0.5rem);
  height: var(--tap-dot-size, 0.5rem);
  border: 1px solid #72b7d2;
  border-radius: 50%;
  pointer-events: none;
}
:is(.services-mobile-dot, .services-carousel-dot)[aria-current="true"]::after,
:is(.shop-carousel-dot, .media-carousel-dot).is-active::after {
  background: #8deaff;
  box-shadow: 0 0 0.5rem rgba(141, 234, 255, 0.9);
}
.services-carousel-dot { --tap-dot-size: clamp(0.55rem, 0.8vw, 0.72rem); }
.shop-carousel-dot { --tap-dot-size: 0.55rem; }
.services-mobile-dots { flex-wrap: wrap; gap: 0; }
.services-carousel-dots, .shop-carousel-dots, .media-carousel-dots { gap: 0; }
@media (max-width: 56.249em) {
  .footer-socials { gap: 0; }
  .footer-social-link svg { width: clamp(0.85rem, 3.7vw, 1rem); height: clamp(0.85rem, 3.7vw, 1rem); }
  .services-mobile-dot { --tap-dot-size: clamp(0.36rem, 1.8vw, 0.48rem); }
  .shop-carousel-dot { --tap-dot-size: 0.42rem; }
}
  .services-mobile-dot::after { border-color: rgba(155, 220, 255, 0.76); }
  .services-mobile-dot[aria-current="true"]::after {
    background: #8cf;
    border-color: #dff7ff;
    box-shadow: 0 0 0.55rem rgba(136, 204, 255, 0.86);
  }
}

/* Use Contact's page title as the shared placement and type scale. The long AI
   heading fits to the available width while its pill occupies the same title row. */
@media (min-width: 56.25em) {
  .section-main-shop .shop-scene-title {
    top: clamp(0.75rem, 2vh, 1.5rem);
    font-size: clamp(2.5rem, min(7vw, 9vh), 5rem);
  }

  .section-main-about .about-scene-title {
    font-size: clamp(2.5rem, min(7vw, 9vh), 5rem);
  }

  .section-main-services .services-scene-title,
  .section-main-media .media-scene-title {
    font-size: clamp(2.5rem, min(7vw, 9vh), 5rem);
  }

  /* "ARTIFICIAL INTELLIGENCE" cannot wrap and measures about 17.2em including its pill.
     It shares its row with the usage gauge (at most 6rem), which ai-usage.js places at
     least 1.5rem from the edge and 2rem before the title. The centred title therefore
     keeps a 9.5rem lane free on each side, and its size is bounded by what is left
     (viewport less at most 4rem of main padding and both lanes). Dividing by 18 keeps a
     margin, so the heading fits beside the gauge at every desktop width by construction.
     The gauge takes the title row's height, so it can never hang into the intro below. */
  .section-main-ai {
    --ai-title-lane: 9.5rem;
    --ai-title-size: clamp(1.25rem, min(7vw, 9vh, (100vw - 4rem - 2 * var(--ai-title-lane)) / 18), 5rem);
    --ai-title-row: calc(var(--ai-title-size) * 1.385);
  }

  .section-main-ai .ai-usage {
    width: min(6rem, var(--ai-title-row));
    height: min(6rem, var(--ai-title-row));
  }

  .section-main-ai .ai-scene-title {
    box-sizing: border-box;
    min-height: var(--ai-title-row);
    max-width: calc(100% - 2 * var(--ai-title-lane));
    font-size: var(--ai-title-size);
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

@media (max-width: 40em) and (orientation: portrait) {
  .services-page .services-scene-title,
  .section-main-ai .ai-scene-title {
    top: clamp(1.25rem, 5vh, 3rem);
  }

  .section-main-ai .ai-scene-title {
    display: grid;
    min-height: 3.525rem;
    place-items: center;
  }

  .services-page .services-scene-intro {
    top: 6.55rem;
  }

  .services-page .section-main-services > article {
    padding-top: clamp(10rem, 39vw, 10.8rem);
  }

  .section-main-ai {
    --ai-phone-title-bottom: calc(clamp(0.5rem, 1.5vh, 1rem) + 3.525rem);
    --ai-phone-control-gap: 0.85rem;
    --ai-phone-bar-top: calc(var(--ai-phone-title-bottom) + var(--ai-phone-control-gap));
    --ai-phone-info-top: calc(var(--ai-phone-bar-top) + 0.42rem + var(--ai-phone-control-gap));
    --ai-phone-bench-top: calc(var(--ai-phone-info-top) + 1.85rem + var(--ai-phone-control-gap));
  }
  .section-main-ai .ai-mobile-usage { top: var(--ai-phone-bar-top); min-height: 0; }
  .section-main-ai .ai-info-trigger { top: var(--ai-phone-info-top); }
  .section-main-ai .ai-station-arrow { top: calc(var(--ai-phone-info-top) + 0.15rem); }
  .section-main-ai .ai-bench { top: var(--ai-phone-bench-top); }
}

/* Phone title clearance follows About's main padding, not the former large offset. */
@media (max-width: 56.249em) {
  .section-main-ai .ai-scene-title,
  .services-page .services-scene-title,
  .section-main-shop .shop-scene-title,
  .section-main-media .media-scene-title,
  .section-main-contact .contact-scene-title { top: clamp(0.5rem, 1.5vh, 1rem); }
  .services-mobile-navigation { width: fit-content; max-width: 100%; gap: 0; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .services-mobile-arrow { width: 44px; height: 44px; }
  .services-mobile-arrow > span {
    width: 8px;
    height: 8px;
    font-size: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .services-mobile-previous > span { transform: rotate(-135deg); }
  .services-page .services-mobile-status { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .services-page .services-scene-intro {
    top: var(--services-phone-intro-center, 6.55rem);
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 56.249em) and (max-height: 450px) and (orientation: landscape) {
  .section-main-ai .ai-scene-title,
  .services-page .services-scene-title,
  .section-main-shop .shop-scene-title,
  .section-main-media .media-scene-title,
  .section-main-contact .contact-scene-title { top: 0.25rem; }
}

/* Keep the desktop viewer inside its actual visible bay, not a taller overflow row. */
@media (min-width: 900px) {
  .section-main-ai .ai-bench { grid-template-rows: auto minmax(0, 1fr); }
  .section-main-ai .ai-bench-workspace { height: 100%; overflow: hidden; }
  .section-main-ai .ai-bench-viewer,
  .section-main-ai .ai-bench-viewer canvas { height: 100%; min-height: 0; }
  .section-main-ai .ai-bench-offer,
  .section-main-ai .ai-bench-controls { min-height: 0; overflow-y: auto; }
}

/* Let the tablet portrait AI bench use the available panel height. */
@media (min-width: 481px) and (max-width: 899px) and (orientation: portrait) {
  .section-main-ai .ai-scene-intro {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    line-height: 1.5;
    width: calc(100% - 2rem);
  }
  .section-main-ai .ai-bench {
    bottom: 0.75rem;
    height: auto;
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .section-main-ai .ai-bench-workspace {
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .section-main-ai .ai-bench-viewer,
  .section-main-ai .ai-bench-viewer canvas { min-height: 0; height: 100%; }
}

/* About and AI responsive polish: keep the presentation centred and footer compact. */
:is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-main-about {
  grid-template-columns: minmax(0, 1fr);
}
:is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-footer:has(.footer-legal-link) {
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  column-gap: clamp(0.15rem, 0.6vw, 0.75rem);
}
:is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .footer-legal-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
:is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .footer-legal-link > span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .footer-legal-icon {
  display: block; width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 481px) and (max-width: 1400px) {
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-main-about {
    gap: clamp(0.5rem, 2vh, 1.25rem);
  }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-main-about .about-scene-title {
    font-size: clamp(1.4rem, min(6vw, 8vh), 4rem);
    max-width: 100%;
  }
}
@media (min-width: 900px) and (max-width: 1600px) {
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-nav { flex-wrap: nowrap; gap: 0.15rem; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-nav a {
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    padding-inline: 0.4rem;
    white-space: nowrap;
  }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-brand {
    --about-brand-logo: 1.65rem;
    --about-brand-gap: 0.35rem;
    left: 1.25rem;
  }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-home { font-size: clamp(0.7rem, 1vw, 0.9rem); }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-tagline { font-size: 0.5rem; letter-spacing: 0.07em; }
}
/* Centre the laptop subtitle under the complete brand lockup, including its logo. */
@media (min-width: 1025px) and (max-width: 1600px) {
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-tagline {
    /* Override the shared script's inline wordmark-only alignment in this range. */
    width: 100% !important;
    margin-inline: 0 !important;
    text-align: center;
  }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-header { flex-wrap: nowrap; gap: 0.5rem; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-brand { flex-direction: row; gap: 0.5rem; min-width: 0; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-home { font-size: clamp(0.5rem, 1.2vw, 0.65rem); gap: 0.25rem; white-space: nowrap; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-home img { width: 1.1rem; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-tagline {
    display: grid; font-size: clamp(0.3rem, 0.75vw, 0.4rem);
    margin: 0; letter-spacing: 0; width: auto;
  }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-nav { flex-wrap: nowrap; gap: 0; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-nav a { font-size: clamp(0.4rem, 1vw, 0.55rem); padding-inline: 0.25rem; }
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-main-about { gap: 0.5rem; }
}
@media (max-width: 480px) {
  :is(.about-page, .services-page, .shop-page, .contact-page, body:has(.section-main-ai, .section-main-media, [data-legal-page])) .section-footer:has(.footer-legal-link) { column-gap: 0; }
}

/* Services: reserve space for the interactive stage before decorative spacing. */
@media (min-width: 481px) and (max-width: 1600px) {
  .services-page .section-main-services .services-scene-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }
  .services-page .services-scene-intro {
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    line-height: 1.45;
    white-space: normal;
  }
}
@media (min-width: 900px) and (max-width: 1600px) {
  .services-page .section-header { height: 5.25rem; flex-shrink: 0; }
  .services-page .services-carousel .bench { width: min(46rem, 62vw); }
  .services-page .services-carousel-navigation { padding-block: 0; }
  .services-page .services-carousel-status { margin-block: 0; }
}
@media (min-width: 481px) and (max-width: 899px) and (orientation: portrait) {
  .services-page .services-mobile-track > .bench .bench-title { font-size: 1.1rem; }
  .services-page .services-mobile-track > .bench .bench-note { font-size: 0.9rem; }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .services-page .section-main-services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
  }
  .services-page .section-main-services .services-scene-title,
  .services-page .services-scene-intro {
    position: relative; inset: auto; transform: none;
    justify-self: center; margin: 0;
  }
  .services-page .section-main-services .services-scene-title { font-size: 1.2rem; }
  .services-page .services-scene-intro { font-size: 0.65rem; width: 100%; }
  .services-page .section-main-services > article {
    position: relative; inset: auto; padding: 0; min-height: 0;
    width: min(60vw, 30rem);
    justify-self: center;
  }
  .services-page .services-mobile-track > .bench { padding: 0.3rem 0.5rem; }
  .services-page .services-mobile-track > .bench .bench-title { font-size: 0.8rem; margin-bottom: 0.15rem; }
  .services-page .services-mobile-track > .bench .bench-note { font-size: 0.65rem; margin-bottom: 0.2rem; }
  .services-page .services-mobile-navigation { margin-top: 0.2rem; }
  .services-page [data-bench="platformer"] .game-overlay { padding: 0.25rem; }
  .services-page [data-bench="platformer"] .game-panel { padding: 0.35rem 0.6rem; }
  .services-page [data-bench="platformer"] .game-panel h4 { font-size: 0.75rem; }
  .services-page [data-bench="platformer"] .game-panel p { font-size: 0.65rem; margin: 0.25rem 0; }
  .services-page [data-bench="platformer"] .game-action {
    min-height: 28px; padding: 0.25rem 0.65rem; font-size: 0.65rem;
  }
  .services-page [data-bench="platformer"] .game-scores { padding: 0.2rem 0.35rem; font-size: 0.6rem; }
  .services-page [data-bench="platformer"] .game-scores small { font-size: 0.55rem; margin-top: 0.1rem; }
  .services-page .services-mobile-arrow { height: 44px; }
  .services-page .services-mobile-track > .bench:not([data-bench="app"]) .bench-stage {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  .services-page .services-mobile-track > .bench > .bench-controls,
  .services-page .services-mobile-track > .bench > .bench-options {
    flex: 0 0 auto;
  }
  .services-page .services-mobile-track > .bench > .gallery--bench {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
  }
  .services-page .services-mobile-track > .bench .gallery--bench .gallery-track {
    height: 100%;
    min-height: 0;
    flex: initial;
  }
  .services-page .services-mobile-track .gallery[data-ready] .gallery-controls {
    flex-shrink: 0;
    margin-top: 0.2rem;
  }
  .services-page .services-mobile-track .gallery--bench .gallery-slide img {
    object-fit: contain;
  }
}

/* Services image galleries reserve a control row and show the complete artwork. */
.services-page :is([data-bench="photos"], [data-bench="ai-images"], [data-bench="drawings"]) > .gallery--bench {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  min-height: 0;
  flex: 1 1 0;
}
.services-page :is(.services-mobile-track, .services-carousel) :is([data-bench="photos"], [data-bench="ai-images"], [data-bench="drawings"]) .gallery--bench .gallery-track {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  flex: initial;
}
.services-page :is([data-bench="photos"], [data-bench="ai-images"], [data-bench="drawings"]) .gallery-slide img {
  object-fit: contain;
}
.services-page [data-bench="platformer"] .game-overlay { padding: 0.25rem; }
.services-page [data-bench="platformer"] .game-panel {
  padding: clamp(0.35rem, 1vh, 0.75rem) 0.65rem;
}
.services-page [data-bench="platformer"] .game-panel h4 { font-size: clamp(0.75rem, 1.3vh, 1rem); }
.services-page [data-bench="platformer"] .game-panel p { font-size: 0.7rem; margin: 0.3rem 0; }
.services-page [data-bench="platformer"] .game-action {
  min-height: 28px; padding: 0.3rem 0.7rem; font-size: 0.7rem;
}

/* Shop: content-led spacing instead of overlapping absolute title/intro offsets. */
@media (max-width: 899px) {
  .shop-page .section-main.section-main-shop > article {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
    container-type: inline-size;
  }
  .shop-page .section-main-shop > article > h2::before { width: 100cqw; }
  .shop-page .section-main-shop > article > .section-figure {
    width: 100%; max-width: 100%; margin-inline: 0; float: none;
  }
  .shop-page .section-main-shop .shop-scene-title {
    position: relative; inset: auto; transform: none;
    width: fit-content; max-width: 100%; margin: 0 auto 1rem;
    font-size: clamp(2rem, 7vw, 3rem);
  }
  .shop-page .section-main-shop .shop-scene-intro { font-size: clamp(0.8rem, 1.8vw, 1rem); }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .shop-page .section-main-shop .shop-scene-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .shop-page .section-main-shop > article > .section-figure {
    width: min(60vw, 30rem); margin-inline: auto; float: none;
  }
  .shop-page .section-main-shop > article > .section-figure + p { clear: both; }
}
@media (min-width: 900px) {
  .shop-page.shop-carousel-ready .section-main.section-main-shop > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: clamp(0.5rem, 1.5vh, 1rem);
    padding: 0.75rem 0 0.4rem;
  }
  .shop-page .section-main-shop .shop-scene-title,
  .shop-page .shop-scene-intro,
  .shop-page .shop-category-nav,
  .shop-page .shop-category-stage {
    position: relative; inset: auto; transform: none;
    justify-self: center; margin: 0;
  }
  .shop-page .section-main-shop .shop-scene-title { font-size: clamp(2.5rem, 6vh, 4.5rem); }
  .shop-page .shop-scene-intro {
    width: calc(100% - 3rem); white-space: normal; line-height: 1.45;
    font-size: clamp(0.85rem, 1vw, 1.2rem);
  }
  .shop-page .shop-category-stage { width: 100%; height: 100%; min-height: 0; }
  .shop-page .shop-category-panel:not([hidden]) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }
  .shop-page .shop-category-panel .shop-carousel-viewport {
    position: relative;
    inset: auto;
    min-height: 0;
  }
  .shop-page .shop-carousel-controls { position: relative; inset: auto; }
  .shop-page .shop-card[data-offset="0"] { background: #020d14; }
  .shop-page .shop-card { grid-template-rows: minmax(0, 1fr) auto; }
  .shop-page .shop-card .section-figure { height: 100%; aspect-ratio: auto; align-self: stretch; }
  .shop-page .shop-card .section-figure img { object-fit: contain; }
  .shop-page .shop-card > p { min-height: 0; }
}
@media (min-width: 900px) and (max-width: 1600px) {
  .shop-page .section-header { height: 5.25rem; flex-shrink: 0; }
}

/* Media reserves separate space for its introduction, artwork and controls. */
.section-main.section-main-media > article {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 1rem; padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
  width: 100%; min-width: 0;
}
.section-main-media .media-scene-title,
.section-main-media .media-scene-intro,
.section-main-media .media-carousel {
  position: relative; inset: auto; transform: none; margin: 0;
}
.section-main-media .media-scene-title {
  justify-self: center; max-width: 100%; font-size: clamp(2rem, 6vh, 4.5rem);
}
.section-main-media .media-scene-intro {
  justify-self: center; width: min(78rem, 100%);
  font-size: clamp(0.85rem, 1.5vw, 1.1rem); line-height: 1.5;
}
.section-main-media .media-platform-card {
  box-sizing: border-box; min-width: 0; background: #020d14;
}
.section-main-media .media-platform-card h2 { font-size: 1.1rem; }
.section-main-media .media-platform-card p { font-size: 0.85rem; line-height: 1.5; }
.section-main-media .media-platform-card h2,
.section-main-media .media-platform-card p { margin: 0; padding: 0; }
.section-main-media .media-platform-card > a { font-size: 0.75rem; }
.section-main-media .media-platform-visual img { object-fit: contain; }
@media (min-width: 900px) {
  .section-main-media .media-carousel {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.75rem; min-height: 0;
  }
  .section-main-media .media-carousel-viewport { position: relative; inset: auto; min-height: 0; }
  .section-main-media .media-carousel-controls { position: relative; inset: auto; }
  .section-main-media .media-platform-card {
    height: 96%; max-height: 42rem; width: min(48rem, 72vw);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  .section-main-media .media-platform-visual { height: 100%; min-height: 0; aspect-ratio: auto; }
}
@media (min-width: 900px) and (max-width: 1600px) {
  body:has(.section-main-media) .section-header { height: 5.25rem; flex-shrink: 0; }
}
@media (max-width: 899px) {
  .section-main.section-main-media > article { height: auto; grid-template-rows: auto auto auto; }
  .section-main-media .media-carousel-track { padding: 0; min-width: 0; }
  .section-main-media .media-platform-card { gap: 0.75rem; }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .section-main-media .media-scene-title { font-size: 1.5rem; }
  .section-main-media .media-carousel { width: min(60vw, 30rem); justify-self: center; }
}

/* Contact uses one scrolling surface; form panels never clip their actions. */
.contact-page .section-main-contact { overflow-y: auto; }
.section-main.section-main-contact > .contact-scene {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto; gap: 1rem;
  width: 100%; height: auto; min-height: 0;
  padding: 0.75rem clamp(1rem, 3vw, 1.5rem) 1.5rem;
}
.section-main-contact .contact-scene-title,
.section-main-contact .contact-scene-intro {
  position: relative; inset: auto; transform: none; margin: 0; justify-self: center;
}
.section-main-contact .contact-scene-title { max-width: 100%; font-size: clamp(1.75rem, min(9vw, 6vh), 4.5rem); }
.section-main-contact .contact-scene-intro {
  width: min(72rem, 100%); font-size: clamp(0.85rem, 1.5vw, 1.1rem); line-height: 1.5;
}
.section-main-contact .contact-workspace {
  width: min(88rem, 100%); height: auto; min-height: 0;
  padding: 0; overflow: visible; align-items: start;
}
.section-main-contact .contact-panel { box-sizing: border-box; height: auto; padding: 1rem; }
.section-main-contact .contact-panel :is(h2, h3) { margin: 0; padding: 0; }
.section-main-contact .contact-panel h2 { font-size: 1.2rem; }
.section-main-contact :is(input, select, textarea) { min-width: 0; font-size: 1rem; }
.section-main-contact :is(input, select) { min-height: 44px; }
.section-main-contact :is(.contact-brief-form label, .contact-summary-label) { font-size: 0.85rem; }
.section-main-contact :is(.contact-actions a, .contact-actions button, .contact-routes a) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 0.8rem;
}
.section-main-contact .contact-expectations ul { font-size: 0.85rem; }
@media (min-width: 900px) and (max-width: 1600px) {
  .contact-page .section-header { height: 5.25rem; flex-shrink: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .section-main-contact .contact-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .section-main-contact .contact-scene-title { font-size: 1.5rem; }
  .section-main-contact .contact-workspace { width: min(40rem, 100%); }
}

/* Legal documents: readable long-form content at every viewport size. */
.legal-main[data-legal-page] > article {
  box-sizing: border-box; width: 100%; max-width: 64rem;
  min-width: 0; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 2rem;
}
.legal-main[data-legal-page] .section-title {
  margin: 0 0 1.5rem; text-align: center;
  font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.3;
}
.legal-main[data-legal-page] #legal-content {
  font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere;
}
.legal-main[data-legal-page] #legal-content p { font-size: inherit; line-height: inherit; margin: 0 0 1.25rem; }
.legal-main[data-legal-page] #legal-content h3 { font-size: 1.1rem; line-height: 1.5; margin: 1.75rem 0 0.65rem; }
.legal-main[data-legal-page] #legal-content a { text-decoration: underline; }
@media (min-width: 900px) and (max-width: 1600px) {
  body:has([data-legal-page]) .section-header { height: 5.25rem; flex-shrink: 0; }
}
@media (max-width: 899px) and (max-height: 640px) and (orientation: landscape) {
  .legal-main[data-legal-page] > article { padding-top: 0.75rem; }
  .legal-main[data-legal-page] .section-title { font-size: 1.5rem; margin-bottom: 1rem; }
}

.services-page .services-carousel .bench.is-carousel-active { background: #020d14; }
.ai-bench-offer:focus-visible { outline: 2px solid #8deaff; outline-offset: -3px; }
@media (min-width: 900px) {
  :is(.services-carousel-dot, .shop-carousel-dot, .media-carousel-dot) {
    position: relative; flex: 0 0 24px; width: 24px; height: 24px;
    padding: 0; border: 0; background: transparent; box-shadow: none;
  }
  :is(.services-carousel-dot, .shop-carousel-dot, .media-carousel-dot)::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 8px; height: 8px;
    box-sizing: border-box; border: 1px solid #72b7d2; border-radius: 50%; pointer-events: none;
  }
  .services-carousel-dot[aria-current="true"],
  :is(.shop-carousel-dot, .media-carousel-dot).is-active { background: transparent; box-shadow: none; }
  .services-carousel-dot[aria-current="true"]::after,
  :is(.shop-carousel-dot, .media-carousel-dot).is-active::after { background: #8deaff; box-shadow: 0 0 0.5rem #8deaff; }
}

/* Honours the OS reduce-motion setting (WCAG 2.1 SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}