/* base.css: platform layer, independent of the brand.
   Spacing, grid, type scale roles, motion and layer tokens; reset; typography; layout primitives.
   The brand profile theme (colours, fonts, radii, shadows) is printed after this file and overrides
   the neutral fallbacks below.

   Breakpoints: 480 · 768 (tablet) · 1024 (desktop, mega menu) · 1280 · 1440 · 1600 · 1920 (wide).
   Layout rule (CLAUDE.md): content uses the full screen width with fixed side gutters
   (16 / 24 / 32 / 48 px). There is no centred max-width container; wide screens get more columns. */

:root {
  color-scheme: light;

  /* Neutral fallbacks. Every brand profile (profiles/<site>/theme.css) defines these names;
     the values here only keep an unthemed page readable. */
  --bg: #FFFFFF;
  --bg-alt: #F4F5F7;
  --bg-tint: #ECEEF2;
  --surface: #FFFFFF;
  --ink: #161B26;
  --ink-2: #394150;
  --muted: #5B6472;
  --line: #DDE1E8;
  --line-hover: #C5CBD6;
  --line-strong: #7B8494;
  --accent: #1F5FBF;
  --accent-hover: #184D9C;
  --accent-press: #123B78;
  --accent-tint: #EAF1FB;
  --accent-on-tint: #123B78;
  --on-accent: #FFFFFF;
  --secondary: #161B26;
  --secondary-hover: #232A38;
  --secondary-press: #0F131B;
  --band: #161B26;
  --band-deep: #0F131B;
  --band-raised: #232A38;
  /* Home hero fill: the tone of the hero image's edges, so the image melts into it (no scrim). */
  --hero-fill-rgb: 15, 19, 27;
  --hero-glow-rgb: 255, 45, 62;   /* the slogan's colour in the home hero: the light of the photo */
  --hero-fill: rgb(var(--hero-fill-rgb));
  --corp-fill-rgb: 10, 13, 20;     /* the near black ground of the home corporate section */
  --corp-card-rgb: 13, 17, 25;     /* its cards */
  --band-hover: #2C3444;
  --on-band: #FFFFFF;
  --on-band-muted: #C9CED8;
  --on-band-subtle: #A9B0BD;
  --on-band-line: rgba(255, 255, 255, .14);
  --focus-ring: #161B26;
  --focus-ring-on-band: #FFFFFF;
  --scrim: rgba(15, 19, 27, .32);
  --live: #0F7A55;
  --live-fill: #12875A;
  --stale: #8A5A00;
  --stale-tint: #FFF4DC;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stretch-display: 100%;
  --stretch-heading: 100%;
  --stretch-text: 100%;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-ui: 550;
  --fw-semibold: 600;
  --fw-title: 650;
  --fw-bold: 700;
  --ls-display: -0.015em;
  --ls-heading: -0.01em;
  --ls-caps: .06em;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --shadow-tint: 0, 0, 0;

  /* 1 · Type scale: sizes and line heights (family, width, weight and tracking come from the profile) */
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.25rem, 1.2rem + 4.4vw, 5.5rem);    /* 36 (390 px) → 82 (1440 px) → 88 (1600 px): the hero voice */
  --fs-display-short: 3.25rem;                             /* 52: short laptop screens, see below */
  --fs-h1: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);            /* 32 → 52 */
  --fs-h2: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem);        /* 30 → 51 (1440 px) → 52 */
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.375rem);         /* 20 → 22 */
  --fs-h4: 1.125rem;                                       /* 18 */
  --fs-intro: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);    /* 18 → 20, intro text in a content column only */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --fs-price: clamp(3rem, 2.4rem + 2.4vw, 4rem);            /* 48 → 64 */
  --fs-stat: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);        /* 28 → 40 */
  --fs-phone: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);       /* 28 → 40 */
  --lh-display: 1.03;
  --lh-h1: 1.08;
  --lh-h2: 1.1;
  --lh-h3: 1.3;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-ui: 1.25;
  --measure: 68ch;

  /* 2 · Spacing, 4 px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --section-y: clamp(56px, 2rem + 4.4vw, 120px);           /* 56 → 95 (1440 px) → 120 */
  --section-head-gap: clamp(28px, 1rem + 2.2vw, 56px);     /* 28 → 48 (1440 px) → 56 */

  /* 3 · Layout: full width, no centred container */
  --gutter: 16px;          /* side gutter; 768+: 24 · 1024+: 32 · 1600+: 48 */
  --grid-gap: 16px;        /* 768+: 24 */
  --hero-pad-x: 16px;      /* hero card inner padding; 768+: 32 · 1024+: 40 · 1600+: 48 */
  --cta-pad: 24px;         /* final CTA card padding; 768+: 48 */

  /* 4 · Lines */
  --bw: 1px;
  --bw-strong: 1.5px;
  --bw-focus: 2px;

  /* 5 · Shadow geometry (layers only); the tint comes from the profile */
  --shadow-1: 0 1px 2px rgba(var(--shadow-tint), .06), 0 1px 3px rgba(var(--shadow-tint), .06);
  --shadow-2: 0 6px 16px rgba(var(--shadow-tint), .10);
  --shadow-3: 0 16px 40px rgba(var(--shadow-tint), .16);

  /* 6 · Controls and bars */
  --tap: 44px;
  --control-h: 48px;
  --control-h-sm: 40px;
  --control-h-lg: 56px;
  --chip-h: 36px;
  --topbar-h: 32px;          /* tariff strip (scrolls away with the page); 1024+: 36 */
  /* Floating glass header (site.css, DECISIONS 28.09.2026): the bar floats --hdr-top under the tariff
     strip, then sticks --hdr-top under the top of the screen while the page passes under it. */
  --hdr-h: 52px;             /* bar height; 1024+: 68 */
  --hdr-top: 12px;           /* gap above the bar (under the strip, and under the screen top once stuck) */
  --hdr-pad-x: 12px;         /* inner side padding; 1024+: 16 */
  --hdr-r: 18px;             /* 1024+: 20 */
  /* Public footprint (stable names, other modules read them):
     --site-strip-h  everything above the header: the tariff strip (+ the campaign band when shown)
     --site-head-h   the glass bar with its top gap: 64 px, 1024+: 80 px. At the top of the page the bar
                     ends at --site-strip-h + --site-head-h; once stuck it ends at --site-head-h. */
  --site-strip-h: var(--topbar-h);
  --site-head-h: calc(var(--hdr-top) + var(--hdr-h));
  /* Only the stuck bar stays on screen (the strip scrolls away). Sticky page parts and the scroll
     padding add their own gap to these older names. */
  --topbar-h-compact: 0px;
  --header-h: var(--site-head-h);
  --header-h-compact: var(--site-head-h);
  --header-h-mobile: var(--site-head-h);
  --campaign-band-h: 40px;
  --sticky-cta-h: 64px;

  /* 7 · Motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* 8 · Layers */
  --z-sticky-cta: 40;
  --z-header: 50;
  --z-mega: 60;
  --z-sheet: 70;
  --z-modal: 80;
  --z-toast: 90;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --grid-gap: 24px; --hero-pad-x: 32px; --cta-pad: 48px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --hero-pad-x: 40px; --topbar-h: 36px; --hdr-h: 68px; --hdr-pad-x: 16px; --hdr-r: 20px; }
}
@media (min-width: 1600px) {
  :root { --gutter: 48px; --hero-pad-x: 48px; }
}
/* Registered lengths, so scripts reading the header footprint get pixels (getComputedStyle). */
@property --site-strip-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --site-head-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* What sits above the header (the layout marks <html>; site.js then sets the measured value). */
html.no-tstrip { --site-strip-h: 0px; }
html.has-cband { --site-strip-h: calc(var(--topbar-h) + var(--campaign-band-h)); }
html.has-cband.no-tstrip { --site-strip-h: var(--campaign-band-h); }
/* 1366 × 768 class laptops: keep the hero's two doors inside the first screen. */
@media (min-width: 1024px) and (max-height: 820px) {
  :root { --fs-display: var(--fs-display-short); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }

/* ---------- Typography ---------- */
html {
  font-family: var(--font-sans);
  /* Anchor targets and focused elements never end up under the stuck header bar (WCAG 2.4.11). */
  scroll-padding-top: calc(var(--site-head-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-stretch: var(--stretch-text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
h1, .t-display {
  font-stretch: var(--stretch-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
h2, .t-h2 {
  font-stretch: var(--stretch-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
h3, .t-h3 { font-weight: var(--fw-title); font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .t-h4 { font-weight: var(--fw-title); font-size: var(--fs-h4); line-height: 1.33; }
p { text-wrap: pretty; max-width: var(--measure); }
small, .t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-micro { font-size: var(--fs-micro); line-height: 1.33; font-weight: var(--fw-semibold); }
strong, b { font-weight: var(--fw-bold); }
.num, .price, .stat, time { font-variant-numeric: tabular-nums lining-nums; }
code, kbd, samp, .t-mono { font-family: var(--font-mono); font-size: .95em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus { outline: none; }
:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.on-band :focus-visible, .section--navy :focus-visible, .card--navy :focus-visible { outline-color: var(--focus-ring-on-band); }

::selection { background: var(--bg-tint); color: var(--ink); }

/* ---------- Layout primitives ---------- */

/* Full width content with fixed side gutters. Never a centred max-width box. */
.wrap { padding-inline: var(--gutter); width: 100%; }

/* Page fills the screen: main takes the free height. On short pages the section marked .fill
   (or, by default, the last block; the one above a final CTA card) grows to the bottom. */
main { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
main:focus { outline: none; }
main > :last-child, main > .fill, main > .blk:has(> .fill) { flex-grow: 1; }
main:has(> .blk-pages-cta-band:last-child) > .blk-pages-cta-band:last-child { flex-grow: 0; }
main:has(> .blk-pages-cta-band:last-child) > :nth-last-child(2) { flex-grow: 1; }
main > .fill--center, .blk > .fill--center { display: grid; align-content: center; }
.blk { display: flex; flex-direction: column; min-width: 0; }
.blk > :only-child { flex: 1 0 auto; }

.section { padding-block: var(--section-y); }
.section--light { background: var(--bg); }
.section--gray { background: var(--bg-alt); }
.section--tint { background: var(--bg-tint); }
.section--navy { background: var(--band); color: var(--on-band-muted); }
.section--navy :is(h1, h2, h3, h4) { color: var(--on-band); }
/* Two sections with the same background in a row: a hairline between the gutters. */
.blk:has(> .section--light) + .blk:has(> .section--light) > .section--light,
.blk:has(> .section--gray) + .blk:has(> .section--gray) > .section--gray { position: relative; }
.blk:has(> .section--light) + .blk:has(> .section--light) > .section--light::before,
.blk:has(> .section--gray) + .blk:has(> .section--gray) > .section--gray::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}

/* 12 column grid that stretches with the screen (4 columns on phones, 8 on tablets).
   Children span the whole row until a span class applies:
   .t-N from 768 px (of 8), .c-N from 1024 px (of 12), .x-N from 1600 px (of 12, wide layouts). */
.grid {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .grid { --cols: 8; }
  .grid > .t-4 { grid-column: span 4; }
  .grid > .t-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .grid { --cols: 12; }
  .grid > .c-1 { grid-column: span 1; } .grid > .c-2 { grid-column: span 2; } .grid > .c-3 { grid-column: span 3; }
  .grid > .c-4 { grid-column: span 4; } .grid > .c-5 { grid-column: span 5; } .grid > .c-6 { grid-column: span 6; }
  .grid > .c-7 { grid-column: span 7; } .grid > .c-8 { grid-column: span 8; } .grid > .c-9 { grid-column: span 9; }
  .grid > .c-10 { grid-column: span 10; } .grid > .c-11 { grid-column: span 11; } .grid > .c-12 { grid-column: span 12; }
}
@media (min-width: 1600px) {
  .grid > .x-2 { grid-column: span 2; } .grid > .x-3 { grid-column: span 3; } .grid > .x-4 { grid-column: span 4; }
  .grid > .x-5 { grid-column: span 5; } .grid > .x-6 { grid-column: span 6; } .grid > .x-7 { grid-column: span 7; }
  .grid > .x-8 { grid-column: span 8; } .grid > .x-9 { grid-column: span 9; } .grid > .x-12 { grid-column: span 12; }
  /* Hidden from 1600 px where a wide side column shows the same content (at any depth). */
  .x-hide, .grid > .x-hide { display: none; }
}

/* Card grids: the block variant sets the desktop count; SSR writes one more column from 1600 px
   and another from 1920 px (at most 5, never more than the number of cards). */
.cards {
  --cols: 1;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
@media (min-width: 768px) { .cards { --cols: var(--cols-md, 2); } }
@media (min-width: 1024px) { .cards { --cols: var(--cols-lg, 3); } }
@media (min-width: 1600px) { .cards { --cols: var(--cols-xl, 4); } }
@media (min-width: 1920px) { .cards { --cols: var(--cols-2xl, 5); } }

/* Reading layout: the text column stays at 68 characters, side columns share the rest. */
.reading { display: grid; column-gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .reading { grid-template-columns: minmax(0, 68ch) minmax(240px, 1fr); } }
@media (min-width: 1280px) { .reading { grid-template-columns: minmax(200px, 1fr) minmax(0, 68ch) minmax(240px, 1fr); } }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--stack, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); }

/* Page builder visibility switches (core/blocks.js adds these classes). */
@media (max-width: 767.98px) { .blk-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .blk-hide-desktop { display: none !important; } }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Icons from /assets/icons/sprite.svg: <svg class="i"><use href="…#i-name"/></svg> */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.i--16 { width: 16px; height: 16px; stroke-width: 2; }
.i--20 { width: 20px; height: 20px; }
.i--24 { width: 24px; height: 24px; }
.i--28 { width: 28px; height: 28px; stroke-width: 1.6; }
.i--32 { width: 32px; height: 32px; stroke-width: 1.5; }

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