/* ══════════════════════════════════════════════════════════════════════════════
   Discovery Systems — site layer.

   Built on the Industry design system (_ds/industry/styles.css): steel-blue on a
   light technical ground, Barlow Condensed over Barlow, square corners, hairline
   borders and "+" registration marks. Every colour, font, space and radius below
   comes from an Industry token.

   Two grounds, one system:
     · the ship  — the hallway and the bridge run on a full --color-accent-900
                   field with type reversed to paper (sanctioned by the system's
                   readme for the deck's own dividers).
     · the rooms — the standard light blueprint ground.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --shell: 1180px;
  --shell-narrow: 760px;
  --header-h: 60px;

  /* Hallway metrics — shared with hallway.js so the runway and the deck map agree.
     It moves with hallway.js's LEN and the door fractions in Content/Hallway.cs: 217vh flies
     the 290-unit corridor at the speed it was tuned at, about 2.5 units a vh. Change one alone
     and the flight speeds up or slows down, and the doors drift off their gap. */
  --hall-runway: 217vh;

  --hair: 1px solid var(--color-divider);
  --grid-ink: color-mix(in srgb, var(--color-accent) 13%, transparent);

  /* The flythrough is a box, not the window.

     A scroll-driven dolly that fills the viewport gives the eye nothing stationary to hold
     on to, and that is what reads as motion sickness rather than as flight. Framing it
     leaves the ship's own grid visible all the way round, so there is always a fixed
     reference the motion is happening *inside*.

     ⚠ One inset, four users: the canvas, the hero, the door layer and the bridge all take
     --hall-box, and hallway.js parks each door at a pixel offset measured from the canvas's
     own content box (`canvas.clientWidth` in resize(), `--x`/`--y` in layoutDoors). Give any
     one of them a different inset or a different border width and every door plate is off by
     the difference. --hall-edge is carried as a transparent border on the layers that have
     no visible frame, so all four content boxes coincide. */
  --hall-gutter: clamp(8px, 2.2vw, 30px);
  --hall-edge: 1px;
  --hall-box: calc(var(--header-h) + var(--hall-gutter)) var(--hall-gutter) var(--hall-gutter) var(--hall-gutter);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeLegibility; }

/* The technical ground the whole site is drawn on. */
body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1:focus, h1:focus-visible { outline: none; }

.shell { width: min(var(--shell), 100% - var(--space-8)); margin-inline: auto; }
.shell-narrow { width: min(var(--shell-narrow), 100% - var(--space-8)); margin-inline: auto; }

.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: 90;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-neutral-100);
  font-family: var(--font-heading); text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-3); }

.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-shell > main { flex: 1 0 auto; }

/* — the dark field: steel as ground, type reversed to paper — */
.field-dark {
  --color-bg: #1d2d3d;              /* --color-accent-900 */
  --color-surface: #2c455d;         /* --color-accent-800 */
  --color-text: #f5f5f8;            /* --color-neutral-100 */
  --color-accent: #b5d9fd;          /* the ramp lightens on a dark ground */
  --color-divider: color-mix(in srgb, #f5f5f8 22%, transparent);
  /* ⚠ Re-declared, not inherited: --hair on :root resolved the LIGHT divider there, and a
     custom property carries its resolved value down — so without this line every hairline on
     the dark ground was a near-black line on navy (fixed 2 Oct 2026). */
  --hair: 1px solid var(--color-divider);
  background-color: var(--color-bg);
  background-image:
    linear-gradient(color-mix(in srgb, #b5d9fd 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #b5d9fd 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--color-text);
}
/* On the ship the footer is an opaque panel that scrolls up over the fixed 3D set. */
.field-dark .site-foot {
  position: relative; z-index: 3;
  background-color: var(--color-bg);
}
.field-dark .btn-primary { color: #1d2d3d; }
.field-dark .btn-primary:hover { background: var(--color-accent-200); }
.field-dark .btn-primary:active { background: var(--color-accent-400); }
.field-dark .tag-accent { background: color-mix(in srgb, #b5d9fd 18%, transparent); color: #eef6ff; }
.field-dark .tag-neutral { background: color-mix(in srgb, #f5f5f8 12%, transparent); color: #f5f5f8; }
.field-dark .input { background: color-mix(in srgb, #f5f5f8 8%, transparent); }

/* Hairline plate — the recurring "drawn on the board" container. */
.plate {
  position: relative;
  border: var(--hair);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  padding: var(--space-6);
}
.field-dark .plate { background: color-mix(in srgb, #1d2d3d 72%, transparent); }

.eyebrow {
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent);
  margin: 0 0 var(--space-2);
}
.mono {
  font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}
.lede { font-size: 18px; line-height: 1.5; max-width: 62ch; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ═══ Figures ═════════════════════════════════════════════════════════════ */

.figure { position: relative; margin: 0; }
.figure__media, .figure__media picture { display: block; }
.figure img { display: block; width: 100%; height: auto; }

/* The stand-in a slot draws until its file is on disk. Deliberately reads as a
   wireframe hatch rather than a broken image — it is a note, not a failure. */
.figure__slot {
  display: grid; place-items: center; text-align: center;
  padding: var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--color-accent) 7%, transparent) 0 7px,
    transparent 7px 14px);
  font: 500 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* Per-slot shapes. object-fit holds the intended crop even if the supplied file
   is a different ratio, so a wrong-sized asset never breaks a grid. */
.crate__logo { max-width: 190px; }
.case-hero, .post-cover { margin-top: var(--space-8); }
.case-hero img, .post-cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.post-list__cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.bridge-logo { width: 130px; }

/* ═══ Header ══════════════════════════════════════════════════════════════ */

.hud {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding-inline-start: 5px;
  padding-inline-end: var(--space-6);
  border-bottom: var(--hair);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(9px);
}
.hud--dark {
  background: color-mix(in srgb, #1d2d3d 82%, transparent);
  border-bottom-color: color-mix(in srgb, #f5f5f8 20%, transparent);
}

.hud-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; letter-spacing: 0.02em; text-decoration: none; color: inherit;
  white-space: nowrap;
}
/* The brand mark carries its own ground and corner radius, so it gets no frame from
   us — it just has to fill the 24px slot exactly. The inline SVG's own width/height
   attributes are overridden here so the viewBox does the scaling. */
.hud-brand__mark {
  display: block;
  width: 50px; height: 50px; flex: none;
}
.hud-brand__mark svg { display: block; width: 100%; height: 100%; }

.hud-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.hud-nav a {
  font-size: 14px; text-decoration: none; color: inherit; white-space: nowrap;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
}
.hud-nav a:hover { color: var(--color-accent); }
.hud-nav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.hud-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  margin-left: auto;
  border: var(--hair); background: transparent; color: inherit; cursor: pointer;
}
.hud-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ═══ Motion toggle ═════════════════════════════════════════════ */

/* Upper right of the hero box. Without the 3D set it sits at the corner of the hero's content
   column and scrolls with the page (the right offset is .shell's own margin, worked out from the
   same min()). With it, it is pinned to the frame's inner corner for the whole flight — see the
   note in Home.razor for why it is not a child of the fading hero. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  position: absolute; z-index: 3; margin: 0;
  top: var(--space-8);
  right: calc((100% - min(var(--shell), 100% - var(--space-8))) / 2);
  background: color-mix(in srgb, #1d2d3d 72%, transparent);
}
html.webgl-on .motion-toggle {
  position: fixed;
  top: calc(var(--header-h) + var(--hall-gutter) + var(--hall-edge) + var(--space-4));
  right: calc(var(--hall-gutter) + var(--hall-edge) + var(--space-4));
}
/* No choice to offer — the OS has asked for reduced motion, or there is no WebGL — so no
   switch. The [hidden] rule is needed because .motion-toggle's own display beats the
   browser's [hidden]. */
.motion-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}
.motion-toggle__dot {
  width: 7px; height: 7px; flex: none;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
/* Off is a hollow mark, not a red one: nothing has gone wrong, a thing is simply not running. */
.motion-toggle[data-off="true"] .motion-toggle__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* The standing document, reached by switching motion off rather than by lacking WebGL.

   Everything it needs already exists: .hall-doors is the three-group tile grid the hallway
   falls back to, and .hall-bridge below it already carries both calls to action. So there is
   no panel to reveal — only the headings, which the 3D set hides, to bring back, and room to
   put between them now that they are a page rather than a HUD. */
html.motion-off .hall-hero__scrollcue { display: none; }
html.motion-off .hall-doors { padding-block: var(--space-8) var(--space-6); }
html.motion-off .hall-section > h2 { display: block; }

/* ═══ Coming soon ══════════════════════════════════════════════════════════

   A product not on sale yet (Door.ComingSoon). One dark layer covers the whole tile and darkens
   it, with a solid "Coming soon" band and "Ask about it" centred on top — the same on the
   standing page and on the hallway sign, which is the same element. The name stays faintly
   readable through the layer, which is what keeps a covered sign navigable down the corridor.

   ⚠ The spacing is set by the smallest place this has to fit: a hallway sign seen from afar,
   before its picture expands, is 59px tall inside. Band + gap + line come to about 51px.

   The tile still works as a link — to the contact form with the product ticked — which is what
   "ask about it" means, so it is dark but never inert, and it still answers hover. */
.hall-door.hall-door--soon { border-color: color-mix(in srgb, var(--color-divider) 55%, transparent); }
.hall-door.hall-door--soon:hover,
.hall-door.hall-door--soon:focus-visible { border-color: var(--color-accent); }
.hall-door--soon .hall-door__shot img { filter: grayscale(0.7) brightness(0.5); }
.hall-door__soon {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, #0d151d 74%, transparent);
  pointer-events: none;
}
.hall-door__soon-label {
  font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent);
  padding: 7px 14px;
  border-block: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: #1d2d3d;
}
.hall-door__soon-ask {
  font-family: var(--font-heading); font-size: 15px; line-height: 1.1; letter-spacing: 0.03em;
  color: color-mix(in srgb, #f5f5f8 82%, transparent);
}
.hall-door--soon:hover .hall-door__soon-ask,
.hall-door--soon:focus-visible .hall-door__soon-ask { color: var(--color-accent); }

.deckmap__soon {
  display: block; margin-top: 4px;
  font: 500 10px/1.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent);
}
.foot-soon { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ═══ Deck rail ═══════════════════════════════════════════════════════════

   The position readout, at the foot of the hallway box. Three slots: where you are on the
   left, the numbered stops in the middle, the scroll hint on the right.

   ⚠ Geometry is --hall-box's, one step in: the rail is its own fixed element at z-index 3
   rather than a child of .hall-frame, because the frame is a z-index 0 stacking context and
   the door plates at z-index 2 would otherwise sit on top of the rail.                   */

.deck-rail { display: none; }
html.webgl-on .deck-rail {
  display: flex; align-items: center; gap: var(--space-6);
  position: fixed; z-index: 3;
  left: calc(var(--hall-gutter) + var(--hall-edge));
  right: calc(var(--hall-gutter) + var(--hall-edge));
  bottom: calc(var(--hall-gutter) + var(--hall-edge));
  padding: var(--space-4) var(--space-6);
  /* Transparent but for a scrim that only reaches the rail's own height: the corridor
     plating and the deck lighting read through it, which is the point — a solid bar would
     sit on top of the picture instead of on the deck. */
  background: linear-gradient(to top,
    color-mix(in srgb, #1d2d3d 62%, transparent),
    color-mix(in srgb, #1d2d3d 18%, transparent) 72%,
    transparent);
}
html.webgl-on .deck-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

/* — you are here — */
.deck-rail__here {
  display: flex; align-items: center; gap: var(--space-3); margin: 0;
  flex: none;
}
.deck-rail__glyph {
  position: relative; flex: none; width: 13px; height: 13px;
  border: 1px solid var(--color-accent); transform: rotate(45deg);
}
.deck-rail__glyph::after {
  content: ""; position: absolute; inset: 2px; background: var(--color-accent);
}
.deck-rail__eyebrow {
  display: block;
  font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.deck-rail__place {
  display: block; margin-top: 4px; white-space: nowrap;
  font-family: var(--font-heading); font-size: 17px; line-height: 1.1;
  color: var(--color-text);
}

/* — the stops — */
.deck-rail__stops {
  display: flex; align-items: flex-end; gap: var(--space-4);
  margin-inline: auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.deck-rail__stops::-webkit-scrollbar { display: none; }
.deck-rail__stop {
  flex: none; padding: 0 0 6px; background: none; cursor: pointer;
  font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  /* The underline is the selection, so it is always drawn and only ever changes colour —
     an appearing rule would shift every other number by its own height. */
  border: 0; border-bottom: 2px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  transition: color 140ms ease, border-color 140ms ease;
}
.deck-rail__stop:hover { color: var(--color-accent); }
.deck-rail__stop[data-current="true"] {
  color: var(--color-accent); border-bottom-color: var(--color-accent);
}

/* — scroll hint — */
.deck-rail__hint {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* The hint is the first thing to go: the numbers and the readout both carry meaning, and
   it repeats what the airlock hero already said. */
@media (max-width: 860px) {
  html.webgl-on .deck-rail { gap: var(--space-4); padding-inline: var(--space-4); }
  .deck-rail__hint { display: none; }
}
@media (max-width: 560px) {
  .deck-rail__stops { margin-left: var(--space-4); margin-right: 0; }
  .deck-rail__place { font-size: 15px; }
}

/* ═══ Deck map drawer ═════════════════════════════════════════════════════ */

.deckmap-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, #1d2d3d 62%, transparent);
  border: 0; padding: 0; cursor: pointer;
}
.deckmap {
  position: fixed; inset: 0 0 0 auto; z-index: 51;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  border-left: 1px solid color-mix(in srgb, #f5f5f8 22%, transparent);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.deckmap__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) var(--space-6);
  border-bottom: var(--hair);
  position: sticky; top: 0; background: inherit; z-index: 1;
}
.deckmap__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.deckmap__group { display: flex; flex-direction: column; gap: var(--space-2); }
.deckmap__door {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent; text-decoration: none; color: inherit;
}
.deckmap__door:hover, .deckmap__door:focus-visible { border-color: var(--color-accent); }
.deckmap__door[aria-current="page"] { border-color: var(--color-accent); background: color-mix(in srgb, #b5d9fd 10%, transparent); }
.deckmap__num { font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--color-accent); }
.deckmap__name { font-family: var(--font-heading); font-size: 17px; line-height: 1.15; }
.deckmap__meta { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ═══ Footer — the full route tree, for crawlers and reduced-motion users ══ */

.site-foot { margin-top: var(--space-8); border-top: var(--hair); padding-block: var(--space-8); }
.site-foot__grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.site-foot h2 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: var(--space-3);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-foot a { color: inherit; text-decoration: none; font-size: 14px; }
.site-foot a:hover { color: var(--color-accent); text-decoration: underline; }
.site-foot__base {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--hair);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ═══ Home — the hallway ══════════════════════════════════════════════════ */

.hall { position: relative; }

/* The scroll runway only exists once the 3D set is live; without it the page is
   an ordinary document and scrolls to its own height. */
html.webgl-on .hall-runway { height: var(--hall-runway); position: relative; }

/* Scroll snapping — one stop per door, so a gesture lands on a door instead of between two.
   Only under .webgl-on: without the 3D set the runway has no height and the page is an
   ordinary document, which must keep scrolling normally.

   `proximity`, not `mandatory`: the footer sits below the runway with no stops of its own, and
   mandatory would keep dragging the reader back out of it. `scroll-snap-stop: always` is what
   actually forbids skipping — the scroll cannot pass a door, however hard it is flicked. */
html.webgl-on { scroll-snap-type: y proximity; }
.hall-snap {
  position: absolute; left: 0;
  width: 1px; height: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}

/* The frame carries the box and the border; the canvas only fills it. Both are inert until
   hallway.js adds .webgl-on, so a visitor without WebGL sees no empty bordered rectangle. */
.hall-frame { display: none; }
html.webgl-on .hall-frame {
  display: block;
  position: fixed; inset: var(--hall-box); z-index: 0;
  border: var(--hall-edge) solid color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: var(--color-bg);
}
#hallway-canvas { display: none; }
html.webgl-on #hallway-canvas { display: block; width: 100%; height: 100%; }
html.webgl-on .hall { color: var(--color-text); }

/* — airlock hero — */
.hall-hero {
  position: relative; z-index: 2;
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column;
  /*justify-content: center;*/
  padding-block: var(--space-8);
}
.hall-hero__inner { max-width: 62ch; }
.hall-hero h1 { font-size: clamp(38px, 6.2vw, 68px); margin-bottom: var(--space-4); }
.hall-hero p { font-size: clamp(16px, 1.7vw, 20px); max-width: 54ch; }
.hall-hero__scrollcue {
  margin-top: var(--space-8); display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
html.webgl-on .hall-hero {
  position: fixed; inset: var(--hall-box);
  border: var(--hall-edge) solid transparent;
  opacity: var(--hero-opacity, 1);
  pointer-events: none;
  transition: opacity 160ms linear;
}
html.webgl-on .hall-hero__inner { pointer-events: auto; }
html.webgl-on .hall-hero[data-faded="true"] { pointer-events: none; visibility: hidden; }

/* The standing document's hero is the height of what is in it.

   The viewport-tall min-height above is for the moment BEFORE the 3D set mounts: it keeps the
   tile grid below the fold, so a visitor who is about to fly is not shown the static layout
   first. Where the set is never coming, the same height is just an empty screen between the
   hero's buttons and the tiles — so it goes, for both visitors that is true of, and for both
   from first paint: motion-off is stamped by a head script before rendering (App.razor), and
   reduced motion is a media query. Without WebGL at all the gap stays; that visitor is rare
   and cannot be known before JavaScript runs. */
html.motion-off .hall-hero { min-height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hall-hero { min-height: auto; }
  .hall-hero__scrollcue { display: none; }
}

/* — doors: the same anchors in both modes — */
.hall-doors { position: relative; z-index: 2; padding-block: var(--space-8); }
.hall-doors__grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.hall-section + .hall-section { margin-top: var(--space-8); }
.hall-section > h2 {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-4);
}

.hall-door {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: var(--hair); text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  transition: border-color 140ms ease, transform 140ms ease;
}
.hall-door:hover { border-color: var(--color-accent); transform: translateY(-2px); }
/* A tile scrolled to from a room's back link lands below the sticky header, not under it. */
.hall-door { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.hall-door__num {
  font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em; color: var(--color-accent);
}
.hall-door__shot img { aspect-ratio: 16 / 10; object-fit: cover; }
/* One line wherever it fits — which, measured 1 Oct, is every name on both the tiles and the 3D
   signs (tightest: "Systems Consultation", 139px of 166px on its sign). These used to be forced
   onto two lines whatever the room, so "AI" sat alone. A longer name will wrap again, and
   balance makes that split even instead of leaving one word stranded. */
.hall-door__name {
  font-family: var(--font-heading); font-size: 24px; line-height: 1.1;
  text-wrap: balance;
}
.hall-door__tag { font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* 3D mode: the grid dissolves and each anchor becomes a door plate that
   hallway.js parks over its projected position in the set. */
html.webgl-on .hall-doors {
  position: fixed; inset: var(--hall-box); z-index: 2; padding: 0;
  border: var(--hall-edge) solid transparent;
  /* Door plates now stop at the frame instead of sliding out over the grid around it. */
  overflow: hidden;
  pointer-events: none;
}
html.webgl-on .hall-doors__shell,
html.webgl-on .hall-doors__grid,
html.webgl-on .hall-section { display: contents; }
html.webgl-on .hall-section > h2 { display: none; }
html.webgl-on .hall-door {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w, 170) * 1px);
  transform:
    translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), 0)
    translate(-50%, -50%)
    scale(var(--s, 1))
    skewY(calc(var(--skew, 0) * 1deg));
  opacity: var(--o, 0);
  visibility: var(--vis, hidden);
  pointer-events: auto;
  background: color-mix(in srgb, #1d2d3d 70%, transparent);
  border-color: color-mix(in srgb, #b5d9fd 45%, transparent);
  color: #f5f5f8;
  gap: var(--space-1); padding: var(--space-3);
  transition: none;
  will-change: transform, opacity;
}
html.webgl-on .hall-door:hover,
html.webgl-on .hall-door:focus-visible {
  border-color: #b5d9fd;
  box-shadow: 0 0 0 1px #b5d9fd, 0 0 26px color-mix(in srgb, #b5d9fd 40%, transparent);
  transform:
    translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), 0)
    translate(-50%, -50%)
    scale(calc(var(--s, 1) * 1.04))
    skewY(calc(var(--skew, 0) * 1deg));
}
html.webgl-on .hall-door__name { font-size: 19px; }
html.webgl-on .hall-door__tag { display: none; }

/* The glimpse into the room, revealed as the camera closes. Collapsed with max-height
   rather than display:none so the browser can still fetch it ahead of the reveal —
   a display:none image does not start loading until it is shown, which lands the
   thumbnail a beat after the door it belongs to. */
html.webgl-on .hall-door__shot {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 220ms ease, opacity 220ms ease;
}
html.webgl-on .hall-door[data-near="true"] .hall-door__shot {
  max-height: 96px; opacity: 1; margin-bottom: var(--space-1);
}
/* No hatched stand-in out in the corridor — a door plate is too small to carry one, and
   eleven of them would read as damage rather than as notes. The card grid keeps them. */
html.webgl-on .hall-door__shot .figure__slot { display: none; }
html.webgl-on .hall-door[data-near="true"] .hall-door__tag {
  display: block; font-size: 11px; line-height: 1.25;
  color: color-mix(in srgb, #f5f5f8 72%, transparent);
}

/* The white-out at the end of a door entry (wireframe 1d), created by hallway.js — in the
   colour of the page the door opens onto, so arriving on a dark page is not a white flash. */
.hall-flash {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-neutral-100);
  opacity: 0; pointer-events: none;
}
.hall-flash--dark { background: #1d2d3d; }

/* — the easter egg (hallway.js, "The way back") —
   A switch on the first crate on the right turns the view round to the bulkhead behind the
   airlock; its terminal and the way back appear once the turn is done. All three are built by
   hallway.js and parked over the set the way the door plates are, in a box the same as theirs. */
.hall-egg {
  position: fixed; inset: var(--hall-box); z-index: 2;
  border: var(--hall-edge) solid transparent;
  overflow: hidden;
  pointer-events: none;
}
.hall-egg__spot,
.hall-egg__screen {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w, 0) * 1px); height: calc(var(--h, 0) * 1px);
  transform: translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), 0) translate(-50%, -50%);
  opacity: var(--o, 0);
  visibility: var(--vis, hidden);
  pointer-events: auto;
}
/* The datapad and the surfboard: transparent targets over fittings drawn in the set. Nothing
   to see but the fitting itself, and pointing at one changes only the cursor (Jared, 14 Oct).
   Keyboard focus draws a faint frame, or a Tab would land somewhere nobody can see. */
.hall-egg__spot {
  margin: 0; padding: 0; border: 0; border-radius: 2px;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hall-egg__spot:focus { outline: none; }
.hall-egg__spot:focus-visible {
  outline: 1px solid color-mix(in srgb, #b5d9fd 35%, transparent);
  outline-offset: 2px;
}
/* The terminal's face: sized to the glass it is parked over, so its type scales with it. */
.hall-egg__screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--h, 200) * 0.05px);
  padding: calc(var(--h, 200) * 0.06px);
  font: 500 calc(var(--h, 200) * 0.07px) / 1.2 ui-monospace, Menlo, Consolas, monospace;
  color: #b5d9fd; text-align: center;
  background: color-mix(in srgb, #0d1722 82%, transparent);
  box-shadow: inset 0 0 calc(var(--h, 200) * 0.14px) color-mix(in srgb, #b5d9fd 24%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, #b5d9fd 55%, transparent);
}
.hall-egg__screen p { margin: 0; }
.hall-egg__prompt { letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.hall-egg__title {
  font-family: var(--font-heading); font-size: 2.8em; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: #f5f5f8;
}
.hall-egg__play { letter-spacing: 0.14em; text-transform: uppercase; }
a.hall-egg__play {
  color: inherit; text-decoration: none;
  padding: 0.35em 1.2em;
  border: 1px solid color-mix(in srgb, #b5d9fd 60%, transparent);
}
a.hall-egg__play:hover,
a.hall-egg__play:focus-visible {
  outline: none; color: #f5f5f8; border-color: #b5d9fd;
  background: color-mix(in srgb, #b5d9fd 18%, transparent);
}
p.hall-egg__play { opacity: 0.6; }
/* The way back: the motion switch's style, centred over the deck rail. */
.hall-egg__back {
  position: absolute; left: 50%; bottom: calc(var(--space-8) * 2);
  transform: translateX(-50%);
  margin: 0;
  opacity: var(--o, 0);
  visibility: var(--vis, hidden);
  pointer-events: auto;
  background: color-mix(in srgb, #1d2d3d 72%, transparent);
  color: #f5f5f8;
}

/* — the bridge, at the end of the hallway — */
.hall-bridge { position: relative; z-index: 2; padding-block: var(--space-8); }
html.webgl-on .hall-bridge {
  position: fixed; inset: var(--hall-box);
  border: var(--hall-edge) solid transparent;
  display: flex; align-items: center;
  opacity: var(--bridge-opacity, 0);
  visibility: var(--bridge-vis, hidden);
  pointer-events: none;
}
html.webgl-on .hall-bridge[data-open="true"] { pointer-events: auto; }
.hall-bridge__viewport {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  border-bottom: 0;
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  overflow: hidden;
}
.hall-bridge__viewport::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1px 1px at 20% 30%, #f5f5f8 50%, transparent 50%),
    radial-gradient(1px 1px at 68% 18%, #f5f5f8 50%, transparent 50%),
    radial-gradient(1px 1px at 41% 61%, #b5d9fd 50%, transparent 50%),
    radial-gradient(1px 1px at 84% 47%, #f5f5f8 50%, transparent 50%),
    radial-gradient(1px 1px at 12% 72%, #b5d9fd 50%, transparent 50%),
    radial-gradient(1px 1px at 57% 84%, #f5f5f8 50%, transparent 50%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, #b5d9fd 16%, transparent), transparent 60%);
  opacity: 0.75;
}
.hall-bridge h2 { font-size: clamp(30px, 4.4vw, 46px); }
.hall-bridge__logos {
  display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center;
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: var(--hair);
  font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.hall-bridge__console {
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
  margin-top: var(--space-6);
}

/* ═══ Rooms ═══════════════════════════════════════════════════════════════ */

.room { position: relative; padding-block: var(--space-8); }
.room-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  justify-content: space-between;
  padding-block: var(--space-3);
  font-size: 13px;
}
.room-bar__crumb { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.room-bar__crumb a { color: inherit; text-decoration: none; }
.room-bar__crumb a:hover { color: var(--color-accent); }

/* The set the content sits inside: a drawn elevation of the room. */
.room-set { position: relative; }
.room-set__art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  color: var(--color-accent);
  opacity: 0.34;
  pointer-events: none;
}
.room-set__inner { position: relative; z-index: 1; padding: clamp(20px, 4vw, 54px) 0; }

.room-head { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.room-head h1 { font-size: clamp(34px, 5vw, 54px); }
.room-head__panel { padding: var(--space-6); border: var(--hair); background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.room-head__bullets { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.room-head__bullets li { position: relative; padding-left: 20px; font-size: 15px; }
.room-head__bullets li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  font: 500 14px/1.5 var(--font-body); color: var(--color-accent);
}
.room-head__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.proof { padding: var(--space-6); border: var(--hair); background: color-mix(in srgb, var(--color-bg) 92%, transparent); }
.proof__figure { margin-top: var(--space-4); }
.proof__figure .figure__slot { min-height: 150px; }
.stat-strip { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: var(--space-6); }
.stat__value { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 36px); line-height: 1; color: var(--color-accent); }
.stat__label { font-size: 12px; line-height: 1.35; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-top: var(--space-1); }

.feature-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { padding: var(--space-6); border: var(--hair); }
.feature h3 { font-size: 21px; }
.feature p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 76%, transparent); }

.section { padding-block: var(--space-8); }
.section > h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--space-6); }

.room-next {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--hair);
  font-size: 14px;
}
.room-next a { text-decoration: none; font-family: var(--font-heading); font-size: 18px; }

.props-note {
  font-family: var(--font-heading); font-style: italic; font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ═══ Company rooms ═══════════════════════════════════════════════════════ */

/* Cargo hold — case studies stacked as crates. */
.crates { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.crate {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border: var(--hair); text-decoration: none; color: inherit;
  background:
    linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent),
                    color-mix(in srgb, var(--color-accent) 5%, transparent));
  transition: border-color 140ms ease, transform 140ms ease;
}
.crate:hover { border-color: var(--color-accent); transform: translateY(-2px); }
a.crate { text-decoration: none; color: inherit; }
.crate__client { font-family: var(--font-heading); font-size: 22px; line-height: 1.1; }
.crate__result { margin-top: auto; padding-top: var(--space-4); border-top: var(--hair); }

/* Comms array — the blog. */
.comms { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-list li { border-top: var(--hair); }
.post-list li:last-child { border-bottom: var(--hair); }
.post-list a { display: block; padding: var(--space-6) 0; text-decoration: none; color: inherit; }
.post-list a.post-list__link {
  display: grid; gap: var(--space-4);
  grid-template-columns: 190px minmax(0, 1fr); align-items: start;
}
.post-list a:hover .post-list__title { color: var(--color-accent); }
.post-list__title { font-family: var(--font-heading); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.15; }
/* The blog's topic links (BlogTopics): above the list on the index and on each topic's page. */
.topic-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.topic-links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: var(--hair);
  border-radius: 999px; font-size: 13px; color: inherit; text-decoration: none;
}
.topic-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.topic-links a[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent); }
.topic-links__count { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.eyebrow__link { color: inherit; text-decoration: none; }
.eyebrow__link:hover { color: var(--color-accent); text-decoration: underline; }
/* "More on {topic}" under a post. */
.post-more { margin-top: var(--space-8); }
.post-more ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.post-more a { color: var(--color-accent); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.prose { max-width: 66ch; }
.prose p { font-size: 17px; line-height: 1.65; margin-bottom: var(--space-6); }
.prose h2 { font-size: 27px; margin-top: var(--space-8); margin-bottom: var(--space-3); }
/* Everything else Markdown can make (BlogMarkdown): sized to the paragraph rhythm above. */
.prose h3 { font-size: 21px; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose h4, .prose h5, .prose h6 { font-size: 17px; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose ul, .prose ol { font-size: 17px; line-height: 1.65; margin: 0 0 var(--space-6); padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-1); }
.prose li > p { margin-bottom: var(--space-2); }
.prose a { color: var(--color-accent); }
.prose blockquote {
  margin: 0 0 var(--space-6); padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 2px solid var(--color-accent);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font: 0.88em/1.4 ui-monospace, Menlo, Consolas, monospace;
  padding: 1px 5px; background: color-mix(in srgb, var(--color-text) 9%, transparent);
}
.prose pre {
  margin: 0 0 var(--space-6); padding: var(--space-4); overflow-x: auto;
  border: var(--hair); background: color-mix(in srgb, var(--color-text) 5%, transparent);
}
.prose pre code { padding: 0; background: none; font-size: 14px; }
/* Uploaded pictures also carry their own max-width (BlogMarkdown), so a portrait one is no
   taller than 80% of the screen. Never `width: auto` here: it overrides the width attribute,
   and the picture then has no box until it loads. */
.prose img { display: block; max-width: 100%; height: auto; margin: 0 0 var(--space-6); border: var(--hair); }
.prose hr { border: 0; border-top: var(--hair); margin: var(--space-8) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: 15px; }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--hair); }
.prose th { font-family: var(--font-heading); }
.prose .footnotes { font-size: 14px; margin-top: var(--space-8); }

/* About — the words under the lede, the team, the timeline. */
.about-body { max-width: 62ch; }
.about-body p { margin: 0 0 var(--space-4); }
.about-body a, .person__bio a { color: var(--color-accent); }
.people { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.person {
  display: grid; gap: var(--space-4); grid-template-columns: 112px minmax(0, 1fr); align-items: start;
  padding: var(--space-6); border: var(--hair);
  scroll-margin-top: 96px; /* a byline's link lands the card clear of the sticky header */
}
.person:target { border-color: var(--color-accent); }
.person__photo img, .person__photo .figure__slot { aspect-ratio: 1; object-fit: cover; }
.person__initials { font-family: var(--font-heading); font-size: 30px; letter-spacing: 0.04em; color: var(--color-accent); }
.person__name { font-size: 21px; margin: 0; }
.person__role { margin: var(--space-1) 0 var(--space-3); }
.person__bio { font-size: 15px; line-height: 1.55; }
.person__bio p { margin: 0 0 var(--space-2); }
.person__link { display: inline-block; margin-top: var(--space-2); font-size: 14px; color: var(--color-accent); }
.timeline { list-style: none; margin: 0; padding: 0; max-width: 70ch; border-left: 1px solid var(--color-accent); }
.timeline li { display: grid; gap: var(--space-4); grid-template-columns: 8em minmax(0, 1fr); padding: var(--space-2) 0 var(--space-2) var(--space-4); }
.timeline__when { font: 500 12px/1.9 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; color: var(--color-accent); }

/* The offerings a post is about, under it. */
.post-doors { margin-top: var(--space-8); }
.post-doors ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.post-doors a {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: var(--space-3) var(--space-4); border: var(--hair); text-decoration: none; color: inherit;
}
.post-doors a:hover { border-color: var(--color-accent); }
.post-doors__number { font: 500 11px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.post-doors__name { font-family: var(--font-heading); font-size: 18px; }
.post-doors__tagline { font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* Bridge console — the contact form. */
.bridge-console { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.field + .field { margin-top: var(--space-4); }
/* The contact form's trap field (EnquiryGuard): moved off-screen rather than display:none,
   which some scripts know to skip. Out of the tab order and hidden from screen readers in the markup. */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.checkgrid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: var(--space-2); }
.checkopt {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: var(--hair); cursor: pointer; font-size: 14px;
}
.checkopt:hover { border-color: var(--color-accent); }
.checkopt:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.checkopt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.checkopt input { accent-color: var(--color-accent); margin-top: 3px; flex: none; }

.notice { padding: var(--space-6); border: 1px solid var(--color-accent); }
.notice__title { font-family: var(--font-heading); font-size: 21px; color: var(--color-accent); }

/* Blazor form validation, restyled off the browser defaults. */
.valid.modified:not([type=checkbox]) { border-color: var(--color-accent); }
.invalid { border-color: #b33a3a; }
.validation-message { display: block; margin-top: 5px; font-size: 12px; color: #b33a3a; }
.field-dark .invalid { border-color: #f0a3a3; }
.field-dark .validation-message { color: #f0a3a3; }

.blazor-error-boundary {
  padding: var(--space-6); border: 1px solid #b33a3a; color: #b33a3a;
  font-family: var(--font-heading);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ═══ Product pages ═══════════════════════════════════════════════════════
   Contractor Suite's overview, pricing and modules (Components/Pages/Products) — DiscoveryONE's
   storefront until 15 Oct 2026, organised as it was there and drawn in the ship's own parts:
   the room head, hairline panels with their registration marks, the steel accent. */

.room-head--single { grid-template-columns: minmax(0, 1fr); }
.room-head--single > div { max-width: 72ch; }
.proof__title { font-size: 23px; margin: 0; }
.proof__shot { margin-top: var(--space-4); }

.fine {
  margin: var(--space-4) 0 0; max-width: 72ch;
  font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.fine a { color: var(--color-accent); }

.section-head { max-width: 72ch; margin-bottom: var(--space-6); }
.section-head h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 var(--space-2); }
.section-head p:not(.eyebrow) { margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); }

.feature-grid--four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* A screenshot of the running application: framed, and a link to the full-size capture. */
.shot { margin: 0; }
.shot__open { display: block; }
.shot img { display: block; width: 100%; height: auto; }
.shot__open:hover img { opacity: 0.9; }
.shot__open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.shot--bare { border: var(--hair); }

/* One thing it does: the words beside the screen that shows it, alternating sides. */
.work-row {
  display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  padding-block: var(--space-6);
}
.work-row + .work-row { border-top: var(--hair); }
.work-row--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.work-row--flip .work-row__body { order: 2; }
.work-row--text { grid-template-columns: minmax(0, 1fr); }
.work-row--text .work-row__body { max-width: 72ch; }
.work-row__body h2, .work-row__body h3 { font-size: 25px; margin: 0 0 var(--space-3); }
.work-row__body > p { margin: 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.work-row__list, .limits {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px;
}
.work-row__list li, .limits li { position: relative; padding-left: 22px; }
.work-row__list li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  font: 500 14px/1.5 var(--font-body); color: var(--color-accent);
}
.limits { margin-top: 0; max-width: 78ch; }
.limits li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--color-accent); }

/* What happens after the button, numbered. */
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step { padding: var(--space-6); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: var(--space-3);
  font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em;
  color: var(--color-accent);
}
.step h3 { font-size: 21px; margin: 0 0 var(--space-2); }
.step p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 76%, transparent); }

/* The plans. */
.tier-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tier { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.tier h3 { font-size: 23px; margin: 0; }
.tier__price { font-family: var(--font-heading); font-size: 46px; line-height: 1; color: var(--color-accent); }
.tier__price span { font-size: 18px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.tier__alt { font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.tier__users { font-size: 14px; }
.tier .btn { align-self: flex-start; margin-top: var(--space-3); }

/* The modules, one card each. */
.module-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.module-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); text-decoration: none; color: inherit;
  transition: border-color 140ms ease, transform 140ms ease;
}
.module-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.module-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.module-card h3 { font-size: 21px; margin: 0; }
.module-card p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 76%, transparent); }
.module-card__price {
  margin-top: auto; padding-top: var(--space-3);
  font: 500 11px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent);
}

/* Tables read across in rows: a heading on the left, what it means on the right. */
.table-scroll { overflow-x: auto; }
.table--spec th[scope="row"] {
  width: 28%; vertical-align: top;
  font-family: var(--font-heading); font-size: 16px; letter-spacing: 0; text-transform: none;
  color: var(--color-text);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table--spec td { vertical-align: top; line-height: 1.55; }
.table--narrow { max-width: 640px; }
.price-matrix th[scope="col"] { white-space: nowrap; }
.price-matrix__users { display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.price-matrix td { white-space: nowrap; }
.price-matrix th[scope="row"] { width: auto; white-space: nowrap; }
.price-matrix th[scope="row"] a { color: var(--color-accent); }
.price-matrix__total th, .price-matrix__total td { font-weight: 600; }
@media (max-width: 640px) {
  /* A product's highlights, one under another: two columns of a phone's width are too narrow to read. */
  .product-row .product-row__highlights { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the prices scroll sideways; the labels wrap so two plans fit beside them. */
  .price-matrix th[scope="row"] { white-space: normal; min-width: 8.5rem; max-width: 10rem; }
}

/* The buttons above a catalogue door's panels, one per kind of business, that jump to its panel —
   and "Other" to the box for everyone else. Each target lands clear of the sticky header, and the
   panel jumped to keeps its accent edge, like a byline's card on the About page. */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-8); }
.product-row, .notice { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.product-row:target { border-color: var(--color-accent); }

/* A product on its catalogue door (ProductRow): its own page's words, beside its picture. The
   whole panel opens the product — the main link's hit area is stretched over it by ::after, and
   the links beside it sit above that layer. ⚠ Nothing between the link and the panel may be
   positioned, or the stretched area shrinks to that element. */
.product-row {
  display: grid; gap: var(--space-8); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  padding: var(--space-8);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  transition: border-color 140ms ease;
}
.product-row + .product-row { margin-top: var(--space-6); }
.product-row--text { align-items: start; }
.product-row .product-row__highlights--aside { margin: 0; align-content: start; }
.product-row:hover { border-color: var(--color-accent); }
.product-row:has(.product-row__go:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.product-row__body > * { margin: 0; }
.product-row__body > * + * { margin-top: var(--space-3); }
.product-row__name {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05;
}
/* The product's app icon beside its name — a navy tile, edged so it holds on the dark ground. */
.product-row__logo {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 18%, transparent);
}
.product-row__headline { font-family: var(--font-heading); font-size: 21px; line-height: 1.2; }
.product-row__lede { font-size: 15px; color: color-mix(in srgb, var(--color-text) 80%, transparent); max-width: 60ch; }
.product-row__highlights {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-row .product-row__highlights { margin-top: var(--space-6); }
.product-row__highlights li {
  position: relative; z-index: 2;      /* above the panel's stretched link, so it can be hovered */
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 72%, transparent);
  transform-origin: left center;
  transition: transform 180ms ease, opacity 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
/* Its own link to the product, over the whole item — so a click here still opens the page. */
.product-row__hit { position: absolute; inset: 0; z-index: 1; }
/* The one under the pointer comes forward; the rest step back. */
.product-row__highlights:has(li:hover) li:not(:hover) { opacity: 0.55; }
.product-row__highlights li:hover {
  opacity: 1; transform: scale(1.035);
  color: var(--color-text);
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.product-row__highlights strong { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 400; color: var(--color-text); }
.product-row .product-row__stats { margin-top: var(--space-6); }
.product-row__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.product-row .product-row__links { margin-top: var(--space-6); }
.product-row__go { position: static; }
.product-row__go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-row__go:focus-visible { outline: none; }
.product-row__arrow { display: inline-block; transition: transform 140ms ease; }
.product-row:hover .product-row__arrow, .product-row__go:focus-visible .product-row__arrow { transform: translateX(4px); }
.product-row__more { position: relative; z-index: 2; }
.product-row__shot { margin: 0; }
.product-row__shot img { display: block; width: 100%; height: auto; transition: transform 200ms ease; }
.product-row:hover .product-row__shot img { transform: scale(1.012); }
.product-row__shot { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .product-row__arrow, .product-row__shot img, .product-row__highlights li { transition: none; }
  .product-row:hover .product-row__arrow, .product-row:hover .product-row__shot img,
  .product-row__highlights li:hover { transform: none; }
}

/* "Coming soon" — the header on a product page that is not on sale yet, and the same stamp on its
   panel. A stamped label rather than a sentence: it is the first thing read, and it must not be
   mistaken for one of the product's own claims. */
.soon-flag {
  display: inline-block; margin: 0 0 var(--space-4);
  padding: 6px 12px; border: 1px solid var(--color-accent);
  font: 600 13px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.soon-flag--small { padding: 4px 9px; font-size: 11px; }
.product-row__body > .soon-flag + * { margin-top: 0; }

/* ═══ Responsive ══════════════════════════════════════════════════════════ */

@media (max-width: 990px) {
  .room-head, .comms, .bridge-console { grid-template-columns: minmax(0, 1fr); }
  .work-row, .work-row--flip { grid-template-columns: minmax(0, 1fr); }
  .product-row { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
  .work-row--flip .work-row__body { order: 0; }
  .post-list a.post-list__link { grid-template-columns: minmax(0, 1fr); }
  .hud-nav { display: none; }
}

@media (max-width: 620px) {
  :root { --space-8: 20px; }
  .hall-hero { min-height: auto; padding-block: var(--space-8); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .hall-bridge__viewport { padding-top: 80px; }
}

/* The 3D set is opt-in: hallway.js never adds .webgl-on when the user has asked
   for reduced motion, so the document below stays exactly as it rendered. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══ Admin ═══════════════════════════════════════════════════════════════════

   Staff pages on the ship's dark ground. Plain on purpose: a working screen, not a room. */
.admin { padding-block: var(--space-6) var(--space-8); }
.admin h1 { margin: var(--space-1) 0 var(--space-4); }
.admin-h2, .admin-purge h2 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); }
.admin-lede { max-width: 70ch; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.admin-muted { display: block; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.admin-ref {
  display: block; margin-top: 2px;
  font: 500 11px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding-bottom: var(--space-3); margin-bottom: var(--space-6);
  border-bottom: var(--hair);
}
.admin-bar__nav { display: flex; gap: var(--space-6); }
.admin-bar__nav a {
  font-family: var(--font-heading); text-decoration: none; color: inherit;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.admin-bar__nav a.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.admin-bar__who { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.admin-bar__who form { margin: 0; }
.admin-bar__who .hud-toggle { margin-left: 0; }
.admin-bar__dev {
  font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent);
}

.admin-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.admin-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); border: var(--hair); text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
}
.admin-card:hover { border-color: var(--color-accent); }
.admin-card__count { font-family: var(--font-heading); font-size: 40px; line-height: 1.05; }
.admin-card__meta { font-size: 14px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.admin-table-wrap { overflow-x: auto; border: var(--hair); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3);
  border-bottom: var(--hair);
}
.admin-table th {
  font: 500 11px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent);
  white-space: nowrap;
}
.admin-table td:first-child { white-space: nowrap; }
.admin-table__excerpt { min-width: 260px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* Steps 1, 2, 3, 4, 6 and 8 exist; a step that does not exists silently voids the whole rule. */
.admin-fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.admin-fields dt {
  font: 500 11px/1.9 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.admin-fields dd { margin: 0; }
.admin-message {
  white-space: pre-wrap; max-width: 75ch; padding: var(--space-4);
  border: var(--hair); background: color-mix(in srgb, #f5f5f8 5%, transparent);
}

.admin-purge { margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--hair); }
.admin-input--months { width: 5.5em; display: inline-block; margin-inline: 4px; }
.admin-confirm { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.admin-confirm label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.admin-confirm .admin-input { width: 12em; }
/* Destructive, so it never borrows the primary colour — and reads as off until it is armed. */
.btn.admin-danger { border-color: #e07a7a; color: #f2a0a0; background: transparent; }
.btn.admin-danger:hover:not(:disabled) { background: color-mix(in srgb, #e07a7a 16%, transparent); }
.btn.admin-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* The blog editor: writing on the left, everything about the post on the right. */
.admin-crumbs { margin: 0 0 var(--space-4); font-size: 14px; }
.admin-crumbs a { color: inherit; }
.admin-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.admin-section { margin-top: var(--space-6); }
.admin-status {
  display: inline-block; padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap;
  font: 500 11px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em;
}
.admin-status--live { color: var(--color-accent); }
.admin-status--scheduled { color: #f2d49b; }
.admin-status--draft { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.admin-editor { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.admin-title { font-family: var(--font-heading); font-size: 22px; }
.admin-slug { display: flex; align-items: center; gap: var(--space-2); }
.admin-slug span { font: 500 13px/1 ui-monospace, Menlo, Consolas, monospace; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.admin-hint { margin: 6px 0 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.admin-hint code { font-size: 12px; }
.admin-tabs { display: flex; gap: var(--space-1); margin-top: var(--space-6); border-bottom: var(--hair); }
.admin-tab {
  padding: var(--space-2) var(--space-4); border: 0; border-bottom: 2px solid transparent;
  background: none; color: inherit; font-family: var(--font-heading); cursor: pointer;
}
.admin-tab[aria-pressed="true"], .admin-tab[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
a.admin-tab { text-decoration: none; }
/* An enquiry's status (EnquiryFollowUp): New stands out, Closed steps back. */
.admin-status--new { color: #f2d49b; }
.admin-status--replied { color: var(--color-accent); }
.admin-status--closed { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.admin-notes { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.admin-notes li { display: grid; gap: 4px; }
.admin-notes .admin-message { margin: 0; }
.admin-notes__status { font: 500 12px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.admin-tabs + .field { margin-top: var(--space-3); }
.admin-body { min-height: 30rem; resize: vertical; font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace; }
.admin-preview { margin-top: var(--space-3); padding: var(--space-6); border: var(--hair); }
.admin-editor__side { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-editor__side .field + .field { margin-top: 0; }
.admin-fieldset { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border: var(--hair); min-width: 0; }
.admin-fieldset legend { padding: 0 var(--space-1); font-family: var(--font-heading); font-size: 14px; }
.admin-fieldset .checkopt + .checkopt { margin-top: var(--space-2); }
.admin-fieldset .checkopt b { display: block; font-weight: 600; }
.admin-checks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.admin-checks .checkopt + .checkopt { margin-top: 0; }
.admin-save { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.admin-row { margin-top: var(--space-3); }
.admin-image__preview { display: block; height: auto; border: var(--hair); margin-bottom: var(--space-3); }
.admin-image__preview--wide { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.admin-image__preview--portrait { width: 160px; aspect-ratio: 1; object-fit: cover; }
/* A logo is shown whole, on a light card, because most wordmarks are drawn for white paper. */
.admin-image__preview--logo { max-width: 100%; width: auto; max-height: 96px; padding: var(--space-3); background: #f5f5f8; }
.admin-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-stack > .field + .field, .admin-stack .field + .field { margin-top: 0; }
.admin-tabs + .admin-stack { margin-top: var(--space-4); }
.admin-md__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: 5px; }
/* The design system styles `.field > label` only; this one sits a level down, beside its tabs. */
.admin-md__head label { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.admin-md__tabs { display: flex; gap: var(--space-1); }
.admin-md__tabs .admin-tab { padding: 2px var(--space-2); font-size: 13px; }
.admin-md__box { resize: vertical; font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace; }
.admin-preview--md { padding: var(--space-4); min-height: 6rem; }
.admin-pair { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.admin-pair .input { flex: 1 1 auto; min-width: 0; }
.admin-pair .admin-pair__short { flex: 0 0 8.5em; }
.btn.admin-icon { flex: none; min-width: 40px; padding-inline: var(--space-2); justify-content: center; }
.admin-person { margin-top: var(--space-4); }
.admin-person__grid { display: grid; gap: var(--space-6); grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
.admin-approval { margin-top: var(--space-3); }
.admin-approval:has(input:checked) b { color: var(--color-accent); }
/* A file picker that looks like the other buttons. The input stays in the label, so it still
   takes keyboard focus and opens on Enter; the ring is drawn on the label instead. */
.admin-file { position: relative; overflow: hidden; }
.admin-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.admin-file:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.admin-file[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.admin-error ul { margin: 0; padding-left: 1.2em; }

.admin-error, .form-error { color: #f2a0a0; }
.admin-error { padding: var(--space-3); border: 1px solid #e07a7a; }
.admin-notice { padding: var(--space-3); border: 1px solid var(--color-accent); color: var(--color-accent); }
.form-error { margin-top: var(--space-3); max-width: 62ch; }
.form-error a { color: inherit; }

@media (max-width: 990px) {
  .admin-editor { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .admin-person__grid, .person { grid-template-columns: minmax(0, 1fr); }
  .person__photo { max-width: 160px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 620px) {
  .admin-fields { grid-template-columns: 1fr; gap: 0 0; }
  .admin-fields dd { margin-bottom: var(--space-2); }
}