/* Pagehouse tokens. Palette and type from brand book v0.1 (2.10.2026); motion tokens from MOTION_SPEC.md. */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-pgh.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/sourcesans3-pgh.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Display cut (v2): Newsreader at optical size 72, static weight 380. High-contrast hairlines for
   sizes from about 40 px up; the text cut above (opsz 40, weight 400 to 600) stays for smaller headings. */
@font-face {
  font-family: 'Newsreader Display';
  src: url('/fonts/newsreader-display-pgh.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks: the swap to the web font does not move the layout (CLS). */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia');
  size-adjust: 95.6%;
  ascent-override: 76.9%;
  descent-override: 27.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Display Fallback';
  src: local('Georgia');
  size-adjust: 91.5%;
  ascent-override: 80.3%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 92.5%;
  ascent-override: 110.7%;
  descent-override: 43.2%;
  line-gap-override: 0%;
}

:root {
  /* Colour: palette „Światłocień” (decision of 2.10.2026, PALETY.md). Paper for reading, forest ink with brass
     for the proof moments. Two raw token sets: --day-* (the page) and --night-* (the dark surfaces). Which
     surfaces are dark is decided in site.css („Światłocień: dark surfaces”), which re-points the role tokens
     below to the night set. Every colour on the site comes from a token in this block. */
  /* Day: the paper page. */
  --day-paper: #f6f2ea;     /* Papier: page background */
  --day-linen: #ece5d8;     /* Len: alternate section */
  --day-mist: #e5e3d7;      /* Mgła: callout, secondary hover */
  --day-sheet: #fffdf8;     /* sheets and fields (tinted, never pure white) */
  --day-line: #d6ccb9;
  --day-ink: #1a1f1d;       /* Atrament: body text */
  --day-pine: #1f3a34;      /* Sosna: headings on paper */
  --day-stone: #586660;     /* Kamień: muted text, field borders */
  --day-brick: #7a5a1f;     /* Mosiądz patynowany: the only accent on paper */
  --day-brick-hover: #614716;
  --day-focus: #1f3a34;
  --day-on-accent: #fffdf8;
  --day-dark: #0f1a17;
  --day-focus-gap-dark: #0f1a17;
  --day-success: #2c6a4d; --day-success-bg: #e3eee7;
  --day-error: #a1261b;   --day-error-bg: #f7e1dd;
  --day-warn: #835400;    --day-warn-bg: #f6ebcf;
  --day-paper-rgb: 246 242 234;
  --day-shade-rgb: 31 58 52;        /* shadows take Sosna, never grey */
  --day-accent-shade-rgb: 60 42 12; /* contact shadow under the brass button */
  --day-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .2 0 0 0 0 .17 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  --day-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .90 0 0 0 0 .85 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  /* Night: forest ink (header, hero, 7 checks, quote). */
  --night-paper: #0f1a17;   /* Leśna czerń */
  --night-linen: #13201c;
  --night-mist: #203029;
  --night-sheet: #16241f;
  --night-line: #2b3a34;
  --night-ink: #e6e0d3;     /* Kość słoniowa: body text on dark */
  --night-pine: #f0eadf;    /* headings on dark */
  --night-stone: #a9a898;
  --night-brick: #c9a45c;   /* Mosiądz polerowany: the accent on dark */
  --night-brick-hover: #dcbc7a;
  --night-focus: #c9a45c;
  --night-on-accent: #0f1a17;
  --night-dark: #15241f;
  --night-focus-gap-dark: #15241f;
  --night-success: #8bcba6; --night-success-bg: #14291f;
  --night-error: #f4a99c;   --night-error-bg: #33191b;
  --night-warn: #e2bf72;    --night-warn-bg: #2b2614;
  --night-paper-rgb: 15 26 23;
  --night-shade-rgb: 3 8 6;          /* umbra darker than the surface, never grey */
  --night-accent-shade-rgb: 40 30 10;
  --night-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .90 0 0 0 0 .85 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --night-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .90 0 0 0 0 .85 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  /* Shared by both sets. */
  --brick-soft: #d2af69;    /* brass on the dark band and in the footer */
  --footer: #0a1310;        /* dark footer */
  --focus-dark: #d2af69;    /* focus ring on dark surfaces */
  --on-dark: #ece6da;       /* text and outlines on the dark band and in the footer */
  --on-dark-rgb: 236 230 218;
  --theme: #0f1a17;         /* <meta name="theme-color">: the dark header */
  --brass-rgb: 201 164 92;  /* text selection on dark (translucent brass) */
  --scrollbar-thumb: #8c968f;
  --photo-grade: #f7efe0;   /* photographs on dark: warm grade (multiply) ... */
  --photo-vignette: #ab9c82; /* ... and a soft vignette */

  /* Active role tokens: the day set. Dark surfaces re-point them to the night set (site.css). */
  --paper: var(--day-paper);
  --linen: var(--day-linen);
  --mist: var(--day-mist);
  --sheet: var(--day-sheet);
  --line: var(--day-line);
  --ink: var(--day-ink);
  --pine: var(--day-pine);
  --stone: var(--day-stone);
  --brick: var(--day-brick);
  --brick-hover: var(--day-brick-hover);
  --focus: var(--day-focus);
  --on-accent: var(--day-on-accent);
  --dark: var(--day-dark);            /* surface of the dark band (pinned process) */
  --focus-gap-dark: var(--day-focus-gap-dark);
  --success: var(--day-success); --success-bg: var(--day-success-bg);
  --error: var(--day-error);     --error-bg: var(--day-error-bg);
  --warn: var(--day-warn);       --warn-bg: var(--day-warn-bg);
  /* Channels for translucent colour: rgb(var(--paper-rgb) / 0.8). */
  --paper-rgb: var(--day-paper-rgb);
  --shade-rgb: var(--day-shade-rgb);
  --accent-shade-rgb: var(--day-accent-shade-rgb);
  --line-dark: rgb(var(--on-dark-rgb) / 0.22);
  /* Logo A „Szczyt”, recoloured through tokens (classes added in Logo.astro). */
  --logo-roof: var(--brick);
  --logo-body: var(--pine);
  --logo-roof-dark: var(--brick-soft);
  --logo-body-dark: var(--on-dark);

  /* Type (v2): a two-cut serif. Display (opsz 72, 380) carries everything from 40 px up; the text cut
     carries small headings, numerals in lists and sheets. Scale ratio about 1.333 with a dramatic hero step. */
  --font-display: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --font-grand: 'Newsreader Display', 'Newsreader Display Fallback', Georgia, serif;
  --font-text: 'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif;
  --fs-hero: clamp(2.875rem, 0.95rem + 6.2vw, 7rem);
  --fs-mega: clamp(3rem, 1.2rem + 6vw, 6.5rem);
  --fs-h1: clamp(2.5rem, 1.55rem + 3.6vw, 4.75rem);
  --fs-h2: clamp(2.125rem, 1.45rem + 2.5vw, 3.75rem);
  --fs-h3: 1.5rem;
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-caption: 0.875rem;
  --fs-label: 0.8125rem;
  --track-grand: -0.028em;
  --measure: 64ch;

  /* Space (4 px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --section-tight: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1200px;

  /* Shape and depth */
  --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-btn: 3px;
  --shadow-1: 0 1px 2px rgb(var(--shade-rgb) / 0.08), 0 1px 1px rgb(var(--shade-rgb) / 0.04);
  --shadow-2: 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28), 0 3px 8px rgb(var(--shade-rgb) / 0.07);
  /* Paper on a desk: a long soft umbra, a short contact shadow and a hairline edge. */
  --shadow-paper: 0 1px 0 rgb(255 253 248 / 0.9) inset, 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 2px 3px rgb(var(--shade-rgb) / 0.08), 0 14px 24px -12px rgb(var(--shade-rgb) / 0.18), 0 42px 70px -30px rgb(var(--shade-rgb) / 0.32);
  /* Material: a fine, static paper grain (SVG noise as data URI: no request, no animation), from the active set. */
  --grain: var(--day-grain);
  --grain-light: var(--day-grain-light);
  --control-h: 52px;

  /* Motion: one easing family (ease-out-quart). UI <= 500 ms, entrances <= 700 ms. */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-ui: 240ms;
  --t-panel: 300ms;
  --t-enter: 600ms;
  --t-enter-long: 700ms;
}
/* Base: reset, type, links, focus, layout primitives. Static state = final state (no motion here). */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  color-scheme: light;
  scrollbar-color: var(--scrollbar-thumb) var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-x: clip;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--pine);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
}
/* Large headings use the display cut (opsz 72): finer hairlines, tighter fit, set lighter and tighter. */
h1,
h2 {
  font-family: var(--font-grand);
  font-weight: 380;
}
h1 {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--track-grand);
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
}
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}
p {
  text-wrap: pretty;
  hanging-punctuation: first;
}
strong {
  font-weight: 600;
}
a {
  color: var(--brick);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
}
a:hover {
  text-decoration-thickness: 2px;
}
/* Focus language: a Sosna ring (brass on dark) with a gap in the surface colour, so it reads on every surface (never animated). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 2px;
}
.on-dark :focus-visible {
  outline-color: var(--focus-dark);
  box-shadow: 0 0 0 2px var(--focus-gap-dark);
}
::selection {
  background: var(--mist);
  color: var(--ink);
}
/* On the dark surfaces: translucent brass with ivory text; sheets on the dark desk keep the paper default. */
:is(.site-header, .hero, #siedem-kontroli, .owner-band, .peak, .site-footer) ::selection {
  background: rgb(var(--brass-rgb) / 0.42);
  color: var(--on-dark);
}
:is(.site-header, .hero, #siedem-kontroli, .owner-band) :is(.protocol, .sheet, .price-notice, .table-wrap) ::selection {
  background: var(--mist);
  color: var(--ink);
}
/* Print and PDF: browsers drop backgrounds by default, which would leave ivory text on white paper. The dark
   surfaces therefore keep their colours in print (a PDF looks like the screen). */
@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--dark);
  color: var(--on-dark);
  font-weight: 600;
  border-radius: var(--r);
  transform: translateY(-160%);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--focus-dark);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure {
  max-width: var(--measure);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}
.muted {
  color: var(--stone);
}
.small {
  font-size: var(--fs-small);
  line-height: 1.5;
}
.caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--stone);
}
.label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.stack > * + * {
  margin-top: var(--flow, 1em);
}

/* design-review FINDING-002: visited links stay distinguishable (darker brass, 7.8:1 on Papier). */
main a:not(.btn):visited {
  color: var(--brick-hover);
}
.on-dark a:not(.btn):visited {
  color: var(--brick-soft);
}
/* Components. Every rule here is the FINAL, static state: it is what Firefox, no-JS and reduced-motion visitors see. */

/* ---------- header ---------- */
.site-header {
  view-transition-name: site-header;
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--paper) var(--grain);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 80px;
}
.brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
}
.brand svg {
  width: 156px;
  height: auto;
}
/* Logo A „Szczyt” takes its colours from the palette tokens (fill attributes are the fallback). */
.logo--kolor .logo__roof { fill: var(--logo-roof); }
.logo--kolor .logo__body { fill: var(--logo-body); }
.logo--odwrocone .logo__roof { fill: var(--logo-roof-dark); }
.logo--odwrocone .logo__body { fill: var(--logo-body-dark); }
.nav {
  display: flex;
  align-items: center;
  gap: var(--s7);
}
.nav__list {
  display: flex;
  gap: clamp(20px, 2.2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
}
.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__link[aria-current='page'] {
  color: var(--pine);
}
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  background: var(--brick);
  height: 2px;
}
.menu {
  display: none;
}
@media (max-width: 1199px) {
  .nav--desktop {
    display: none;
  }
  .site-header__bar {
    min-height: 68px;
  }
  .brand svg {
    width: 132px;
  }
  .menu {
    display: block;
  }
  .menu__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 4px 0 14px;
    border: 1px solid var(--pine);
    border-radius: var(--r-btn);
    color: var(--pine);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
  }
  .menu__toggle::-webkit-details-marker {
    display: none;
  }
  .menu__icon {
    position: relative;
    width: 32px;
    height: 32px;
  }
  .menu__icon::before,
  .menu__icon::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1.5px;
    background: currentColor;
    top: 12px;
  }
  .menu__icon::after {
    top: 19px;
  }
  .menu[open] .menu__icon::before {
    top: 15.5px;
    transform: rotate(45deg);
  }
  .menu[open] .menu__icon::after {
    top: 15.5px;
    transform: rotate(-45deg);
  }
  .menu__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--s5) var(--gutter) var(--s7);
    background: var(--paper) var(--grain);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -30px rgb(var(--shade-rgb) / 0.35);
  }
  .menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
  }
  .menu__list li {
    border-bottom: 1px solid var(--line);
  }
  .menu__link {
    display: flex;
    align-items: center;
    min-height: 60px;
    font-family: var(--font-grand);
    font-weight: 380;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--pine);
    text-decoration: none;
  }
  .menu__link[aria-current='page'] {
    color: var(--brick);
  }
  .menu__cta {
    margin-top: var(--s5);
    width: 100%;
  }
  /* Contact first (no scrolling to reach it), main links, then the secondary links as a compact two-column list. */
  .menu__panel {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: var(--s4);
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  }
  .menu__cta--contact {
    margin-top: 0;
    margin-bottom: var(--s4);
  }
  .menu__link {
    min-height: 52px;
    font-size: 1.65rem;
  }
  .menu__more-title {
    margin: var(--s5) 0 var(--s2);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
  }
  .menu__list--more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s4);
  }
  .menu__list--more .menu__link {
    min-height: 48px;
    font-size: 1.1rem;
    font-family: var(--font-text);
    font-weight: 600;
    letter-spacing: 0;
  }
}
@media (max-width: 359px) {
  .menu__list--more {
    grid-template-columns: 1fr;
  }
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: 600 1.0625rem/1.1 var(--font-text);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.btn--compact {
  min-height: 48px;
  padding: 0 22px;
  font-size: 1rem;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
}
.btn--primary {
  background: var(--brick);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.14) inset, 0 1px 2px rgb(var(--accent-shade-rgb) / 0.25);
}
.btn--primary::after {
  background: var(--brick-hover);
}
.btn--primary:hover::after {
  opacity: 1;
}
.btn--secondary {
  background: transparent;
  color: var(--pine);
  border-color: var(--pine);
}
.btn--secondary::after {
  background: var(--mist);
}
.btn--secondary:hover::after {
  opacity: 1;
}
.on-dark .btn--secondary {
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.on-dark .btn--secondary::after {
  background: rgb(var(--on-dark-rgb) / 0.12);
}
.btn:hover {
  text-decoration: none;
}
.btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
}
/* Editorial text link: a hairline that is always there, a brass line that draws over it on hover. */
.text-link {
  font-weight: 600;
  color: var(--brick);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 0% 2px no-repeat,
    linear-gradient(var(--line), var(--line)) left calc(100% - 8px) / 100% 1px no-repeat;
}
.text-link:hover {
  background-size: 100% 2px, 100% 1px;
}
.text-link::after {
  content: '\2009\2192';
  content: '\2009\2192' / '';
  display: inline-block;
}

/* ---------- sections ---------- */
.section {
  padding-block: var(--section);
}
.section--tight {
  padding-block: var(--section-tight);
}
.section--linen {
  background: var(--linen) var(--grain);
}
.section--pine {
  background: var(--dark) var(--grain-light);
  color: var(--on-dark);
}
.section--pine :focus-visible {
  box-shadow: 0 0 0 2px var(--dark);
}
.section--pine h2,
.section--pine h3 {
  color: var(--on-dark);
}
.section--pine a:not(.btn) {
  color: var(--brick-soft);
}
.section__head {
  display: grid;
  gap: var(--s5);
  margin-bottom: clamp(2.75rem, 1.5rem + 3.5vw, 4.75rem);
  max-width: 52rem;
}
.section__head p {
  max-width: var(--measure);
}
/* Wide screens: heading left, standfirst right, both sitting on one baseline zone (editorial spread). */
@media (min-width: 1024px) {
  .section__head:has(> h2 + p):not(.split > .section__head) {
    max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: end;
  }
  .section__head:has(> h2 + p):not(.split > .section__head) > h2 {
    max-width: 16ch;
  }
  .section__head:has(> h2 + p):not(.split > .section__head) > p {
    margin-top: 0;
    padding-bottom: 0.4em;
  }
}
html.is-home .footer__statement-cta {
  display: none;
}

/* ---------- hero (v2): one editorial sentence across the page, the protocol on a desk ---------- */
.hero {
  padding-block: clamp(2rem, 0.5rem + 4.5vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 7rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.hero__kicker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--stone);
}
.hero__kicker::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--brick);
}
.hero__title {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.034em;
  max-width: 19.5ch;
  text-wrap: wrap;
}
.hero__body {
  grid-column: 1 / span 5;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--ink);
}
.hero__lead {
  max-width: 32rem;
}
.hero .btn-row {
  margin-top: var(--s6);
}
.hero__micro {
  margin-top: var(--s4);
}
.hero__body {
  grid-row: 3;
}
.hero__desk {
  grid-column: 7 / -1;
  grid-row: 3 / span 2;
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  margin-right: calc(-1 * var(--gutter));
  display: grid;
}

.hero__desk > * {
  grid-area: 1 / 1;
}
/* The desk photograph takes the height of the sheet laid on it (the sheet sets the size, never the image). */
.hero__photo {
  align-self: stretch;
}
.hero__photo .photo__frame {
  position: relative;
  min-height: 320px;
}
.hero__photo picture {
  position: absolute;
  inset: 0;
}
.hero__photo .photo__frame img {
  height: 100%;
  aspect-ratio: auto;
  object-position: 30% 40%;
}
.hero__photo {
  grid-template-rows: 1fr auto;
}
.hero__photo .photo__caption {
  justify-self: end;
  padding-inline: var(--gutter);
}
.hero__desk .protocol {
  align-self: start;
  justify-self: center;
  width: min(86%, 30rem);
  margin-block: clamp(56px, 7vw, 120px) clamp(72px, 7vw, 120px);
}
/* Three facts set as a colophon at the foot of the left column, level with the bottom of the desk. */
.hero__facts {
  grid-column: 1 / span 5;
  grid-row: 4;
  align-self: end;
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.hero__facts li {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.hero__fact-key {
  font-family: var(--font-grand);
  font-weight: 380;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--pine);
}
.hero__fact-note {
  font-size: 0.9375rem;
  color: var(--stone);
}
@media (max-width: 1100px) and (min-width: 900px) {
  .hero__body,
  .hero__facts {
    grid-column: 1 / span 6;
  }
  .hero__facts li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
@media (max-width: 899px) {
  .hero__title,
  .hero__body,
  .hero__desk,
  .hero__facts {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .hero__facts li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .hero__title {
    max-width: none;
  }
  .hero__desk {
    margin-top: var(--s7);
    margin-inline: calc(-1 * var(--gutter));
  }
  .hero__desk .protocol {
    width: min(calc(100% - 2 * var(--gutter)), 34rem);
    margin-block: 40px;
  }
}

/* Proof-first: the acceptance protocol sheet (sample) */
.protocol {
  position: relative;
  margin: 0;
  background: var(--sheet) var(--grain);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  padding: clamp(22px, 2.4vw, 36px);
  transform: rotate(-1.2deg);
}
.protocol__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.protocol__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--pine);
  line-height: 1.2;
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.protocol__head .tag{max-width:100%;white-space:normal;overflow-wrap:normal}
.protocol__meta {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--stone);
}
.protocol__list {
  list-style: none;
  padding: 0;
  margin-top: var(--s4);
}
.protocol__list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding-block: 7px;
  border-bottom: 1px dashed var(--line);
  font-size: 1rem;
}
.protocol__list svg {
  width: 20px;
  height: 20px;
  color: var(--pine);
}
.protocol__state {
  font-size: 0.875rem;
  color: var(--stone);
}
.protocol__sign {
  margin-top: var(--s5);
  display: grid;
  gap: 2px;
}
.protocol__sign-line {
  height: 1px;
  background: var(--ink);
  width: 70%;
  margin-bottom: var(--s2);
}
.protocol__sign strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--pine);
}

/* ---------- photo (v2): print treatment, square corners, hairline caption ---------- */
.photo {
  display: grid;
  gap: 10px;
  margin: 0;
}
.photo__frame {
  overflow: hidden;
  background: var(--linen);
}
.photo picture,
.photo img {
  display: block;
  width: 100%;
}
.photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.photo--portrait img {
  aspect-ratio: 4 / 5;
}
.photo--tall img {
  aspect-ratio: 2 / 3;
}
.photo--wide img {
  aspect-ratio: 21 / 9;
}
.photo__caption {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- splits ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.split--reverse > :first-child {
  order: 2;
}
@media (max-width: 899px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split--reverse > :first-child {
    order: 0;
  }
}

/* ---------- questions (v2): sticky heading, photo and three numbered questions ---------- */
.questions__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: var(--s7);
}
.questions__head {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: 40px;
}
.questions__head .lead {
  max-width: 28rem;
}
.questions__body {
  grid-column: 7 / -1;
}
.qlist {
  list-style: none;
  padding: 0;
  margin-top: var(--s6);
}
.qlist li {
  position: relative;
  padding-block: var(--s5) var(--s6);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s2) var(--s4);
}
.qlist li:last-child {
  border-bottom: 1px solid var(--line);
}
.qlist li > :not(.qlist__num) {
  grid-column: 2;
}
.qlist__num {
  grid-row: span 2;
  font-family: var(--font-grand);
  font-size: 2.75rem;
  line-height: 0.9;
  color: var(--brick);
}
.qlist h3 {
  font-size: 1.625rem;
  font-weight: 500;
}
@media (max-width: 899px) {
  .questions__head,
  .questions__body {
    grid-column: 1 / -1;
    position: static;
  }
}

/* ---------- the 7 checks ---------- */
.checks__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.checks__aside {
  position: sticky;
  top: 32px;
}
/* The one stronger accent of the site: the oversized typographic 7. */
.checks__seven {
  font-family: var(--font-grand);
  font-weight: 380;
  font-size: clamp(11rem, 4rem + 22vw, 24rem);
  line-height: 0.74;
  color: var(--pine);
  letter-spacing: -0.06em;
  margin-left: -0.06em;
  margin-bottom: var(--s6);
}
.checks__aside h2 {
  max-width: 13ch;
}
.checks__aside p {
  margin-top: var(--s5);
  max-width: 30rem;
}
.checks__list {
  list-style: none;
  padding: 0;
}
.check {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s2) var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid var(--line);
}
.check:last-child {
  border-bottom: 1px solid var(--line);
}
.check__num {
  position: relative;
  grid-row: span 3;
  font-family: var(--font-grand);
  font-size: 2.5rem;
  line-height: 0.9;
  font-weight: 380;
}
.check__num span {
  display: block;
}
.check__num-off {
  color: var(--stone);
}
.check__num-on {
  position: absolute;
  inset: 0;
  color: var(--brick);
}
.check__num::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 10px;
  background: var(--brick);
  transform-origin: left center;
}
.check h3 {
  font-size: 1.5rem;
  font-weight: 500;
}
.check__report {
  font-size: 0.9375rem;
  color: var(--stone);
}
.verdict {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s4);
  align-items: center;
  padding: var(--s5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.verdict svg {
  width: 56px;
  height: 56px;
  color: var(--brick);
}
.verdict p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--pine);
  font-weight: 500;
}
@media (max-width: 899px) {
  .checks__grid {
    grid-template-columns: 1fr;
  }
  .checks__aside {
    position: static;
  }
}

/* ---------- sample audit report (sheets) ---------- */
.sheets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding-block: var(--s4) var(--s6);
}
.sheet {
  background: var(--sheet) var(--grain);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  padding: clamp(20px, 2vw, 30px);
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 100%;
}
.sheet:nth-child(1) {
  transform: rotate(-1.4deg) translateY(10px);
}
.sheet:nth-child(2) {
  transform: rotate(0.5deg);
}
.sheet:nth-child(3) {
  transform: rotate(-0.4deg) translateY(16px);
}
.sheet__kicker {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stone);
}
.sheet h3 {
  font-size: 1.375rem;
  margin-top: var(--s2);
}
.sheet dl {
  margin-top: var(--s4);
  display: grid;
  gap: var(--s2);
}
.sheet dt {
  font-weight: 600;
  color: var(--stone);
  font-size: 0.875rem;
}
.sheet dd {
  margin: 0;
}
.sheet__rows {
  list-style: none;
  padding: 0;
  margin-top: var(--s4);
}
.sheet__rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: 7px;
  border-bottom: 1px solid var(--line);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.875rem;
}
.status svg {
  width: 16px;
  height: 16px;
}
.status--ok {
  color: var(--success);
}
.status--fix {
  color: var(--warn);
}
.status--none {
  color: var(--error);
}
.sheet ol {
  margin-top: var(--s4);
  padding-left: 1.2em;
  display: grid;
  gap: var(--s3);
}
.sheet__note {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.example-note {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s5);
}
@media (max-width: 899px) {
  .sheets {
    grid-template-columns: 1fr;
    max-width: 34rem;
  }
  .sheet:nth-child(n) {
    transform: none;
  }
}

/* ---------- pinned chapter: from request to acceptance (static layout first) ---------- */
.peak {
  position: relative;
}
.peak__sticky {
  padding-block: var(--section);
}
.peak__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.peak__intro p {
  margin-top: var(--s5);
  max-width: 28rem;
  color: rgb(var(--on-dark-rgb) / 0.88);
}
.peak__steps {
  list-style: none;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--s6);
}
.peak__steps::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--brick-soft);
  transform-origin: top center;
}
.peak__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s2) var(--s5);
}
.peak__num {
  grid-row: span 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dark);
  border: 2px solid var(--brick-soft);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  position: relative;
  z-index: 1;
}
.peak__step h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
}
.peak__step p {
  color: rgb(var(--on-dark-rgb) / 0.9);
  max-width: 36rem;
}
.peak__who {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brick-soft) !important;
}
.peak__rail {
  display: none;
}
@media (max-width: 899px) {
  .peak__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- region band (v2): portrait and landscape offset on a 12-column grid ---------- */
.region__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: var(--s7);
  align-items: start;
}
.region__a {
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
}
.region__text {
  grid-column: 7 / -1;
  padding-top: clamp(0rem, 4vw, 4rem);
}
.region__text h2 {
  max-width: 14ch;
}
.region__text .lead {
  margin-top: var(--s5);
}
.region__b {
  grid-column: 7 / span 5;
}
@media (max-width: 899px) {
  .region__a,
  .region__text,
  .region__b {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .region__a {
    width: 82%;
  }
  .region__b {
    width: 82%;
    justify-self: end;
  }
}

/* ---------- packages (editorial rows, not a card grid) ---------- */
.pkgs {
  list-style: none;
  padding: 0;
}
.pkg {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 0.55fr);
  gap: var(--s5) clamp(1.5rem, 3vw, 3rem);
  padding-block: var(--s6) var(--s7);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.pkg:first-child {
  border-top-color: var(--ink);
}
.pkg:last-child {
  border-bottom: 1px solid var(--line);
}
.pkg__name {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-grand);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
  font-weight: 380;
  letter-spacing: -0.03em;
  color: var(--pine);
  line-height: 1;
}
.pkg__index {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brick);
  transform: translateY(-1.1em);
}
.pkg__price {
  font-weight: 600;
  color: var(--pine);
}
.pkg__price--hidden {
  font-weight: 400;
  color: var(--stone);
  font-size: var(--fs-small);
}
@media (max-width: 899px) {
  .pkg {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}
.price-notice {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--sheet) var(--grain);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
}
.price-notice p {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--pine);
  line-height: 1.3;
  flex: 1 1 22rem;
}

/* ---------- exit terms ---------- */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem);
}
.term {
  padding-block: var(--s5) var(--s6);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.term h3 {
  font-size: 1.625rem;
  font-weight: 500;
}
@media (max-width: 767px) {
  .terms {
    grid-template-columns: 1fr;
  }
}

/* ---------- owner (v2): the pull quote as the brand's signature moment ---------- */
.owner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}
.owner__quote {
  grid-column: 1 / span 10;
  margin: 0;
}
.owner__quote p {
  font-family: var(--font-grand);
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--pine);
  font-weight: 380;
  text-indent: -0.42em;
  hanging-punctuation: none;
  text-wrap: balance;
}
.owner__by {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s6);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.owner__rule {
  width: 56px;
  height: 1px;
  background: var(--brick);
}
.owner__points {
  grid-column: 1 / -1;
  list-style: none;
  padding: var(--s6) 0 0;
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5) clamp(1.5rem, 3vw, 3rem);
}
.owner__points li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--s3);
}
.owner__points svg {
  width: 24px;
  height: 24px;
  color: var(--pine);
  margin-top: 3px;
}
@media (max-width: 899px) {
  .owner__quote {
    grid-column: 1 / -1;
  }
  .owner__points {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: var(--s4);
  align-items: center;
  padding-block: var(--s5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 450;
  color: var(--pine);
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__icon {
  width: 28px;
  height: 28px;
  color: var(--brick);
}
.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}
.faq__body {
  padding-bottom: var(--s5);
  max-width: var(--measure);
}

/* ---------- closing (v2): the last sentence, then a quiet full-bleed horizon ---------- */
.closing-band {
  padding-top: var(--section);
  border-top: 1px solid var(--ink);
}
.closing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: var(--s6);
  align-items: end;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.closing__title {
  grid-column: 1 / span 7;
  font-size: var(--fs-mega);
  line-height: 0.98;
  letter-spacing: -0.034em;
}
.closing__body {
  grid-column: 9 / -1;
}
.closing__body .btn-row {
  margin-top: var(--s6);
}
.closing__photo .photo__caption {
  padding-inline: var(--gutter);
}
@media (max-width: 899px) {
  .closing__title,
  .closing__body {
    grid-column: 1 / -1;
  }
  .closing__photo img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- subpage header ---------- */
.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--ink);
}
.page-head h1 {
  max-width: 17ch;
  font-size: var(--fs-mega);
  line-height: 0.99;
  letter-spacing: -0.032em;
}
.page-head .lead {
  margin-top: var(--s5);
  max-width: 44rem;
}
.crumbs {
  margin-bottom: var(--s5);
}
.crumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 0.9375rem;
  color: var(--stone);
}
.crumbs li + li::before {
  content: '/';
  margin-right: var(--s2);
  color: var(--line);
}
.crumbs a {
  color: var(--stone);
}

/* ---------- prose and tables ---------- */
.prose > * + * {
  margin-top: 1em;
}
.prose h2 {
  margin-top: 2.2em;
  margin-bottom: 1.2rem;
}
@media (max-width: 360px) {
  .privacy-prose h2 {
    font-size: 1.7rem;
    overflow-wrap: normal;
  }
}
.prose h3 {
  margin-top: 1.6em;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: 0.4em;
}
.ticks {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: var(--s3);
}
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  margin: 0 !important;
}
.ticks svg {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--pine);
}
.table-wrap {
  overflow-x: auto;
  border-radius: 2px;
  background: var(--sheet) var(--grain);
  box-shadow: var(--shadow-paper);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
caption {
  text-align: left;
  padding: var(--s4) var(--s5) 0;
  color: var(--stone);
  font-size: 0.9375rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
thead th {
  font-weight: 600;
  color: var(--pine);
  background: var(--linen);
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody th {
  font-weight: 600;
  color: var(--pine);
  white-space: nowrap;
}

.pkg-detail {
  padding-block: var(--s7);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.pkg-detail dl {
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) 1fr;
  border-top: 1px solid var(--line);
}
.pkg-detail dt,
.pkg-detail dd {
  margin: 0;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.pkg-detail dt {
  font-weight: 600;
  color: var(--pine);
  padding-right: var(--s4);
}
@media (max-width: 899px) {
  .pkg-detail {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479px) {
  .pkg-detail dl {
    grid-template-columns: 1fr;
  }
  .pkg-detail dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.callout {
  padding: var(--s5) var(--s6);
  border-radius: 2px;
  background: var(--mist) var(--grain);
}
.callout p {
  font-weight: 600;
}

/* ---------- forms ---------- */
.form {
  display: grid;
  gap: var(--s5);
  max-width: 40rem;
}
.field {
  display: grid;
  gap: 6px;
}
.field label,
.field legend {
  font-weight: 600;
}
.field__hint {
  font-size: 0.9375rem;
  color: var(--stone);
}
.input,
.textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 12px 14px;
  border: 1.5px solid var(--stone);
  border-radius: var(--r-btn);
  background: var(--sheet);
  color: var(--ink);
  font: 400 1.125rem/1.3 var(--font-text);
}
.textarea {
  min-height: 160px;
  resize: vertical;
}
.input:focus-visible,
.textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--pine);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--error);
  border-width: 2px;
}
.check-field {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s3);
  align-items: start;
}
.check-field input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--pine);
}
.check-field label {
  font-weight: 400;
}
.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--error);
  font-weight: 600;
  font-size: 1rem;
}
.field__error svg {
  flex: none;
  margin-top: 3px;
}
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.notice {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-btn);
  border: 2px solid;
}
.notice--preview {
  display: block;
}
.notice svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.notice--ok {
  border-color: var(--success);
  background: var(--success-bg);
}
.notice--ok svg {
  color: var(--success);
}
.notice--error {
  border-color: var(--error);
  background: var(--error-bg);
}
.notice--error svg {
  color: var(--error);
}
.notice[hidden],
.field__error[hidden] {
  display: none;
}
.info-clause {
  font-size: 0.9375rem;
  color: var(--stone);
  line-height: 1.5;
}
.turnstile-slot:empty {
  display: none;
}

/* ---------- footer (v2): Atrament, a closing line in the display cut, then the colophon ---------- */
.site-footer {
  background: var(--footer) var(--grain-light);
  color: rgb(var(--on-dark-rgb) / 0.86);
  padding-block: clamp(4rem, 3rem + 4vw, 7rem) var(--s6);
  font-size: 1rem;
}
.site-footer a {
  color: var(--on-dark);
  text-decoration-color: rgb(var(--on-dark-rgb) / 0.4);
}
.site-footer a:hover {
  text-decoration-color: var(--brick-soft);
}
.footer__statement {
  font-family: var(--font-grand);
  font-weight: 380;
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-dark);
  max-width: 16ch;
  text-wrap: balance;
}
.footer__statement-cta {
  margin-top: var(--s6);
}
.footer__grid {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  padding-top: var(--s6);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr));
  gap: var(--s7);
}
.footer__brand svg {
  width: 168px;
  height: auto;
}
.footer__brand p {
  margin-top: var(--s5);
  max-width: 26rem;
}
.footer__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / 0.78);
  margin-bottom: var(--s3);
}
.footer__links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s1);
}
.footer__links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
}
.footer__legal {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: var(--s2);
  font-size: 0.9375rem;
  color: rgb(var(--on-dark-rgb) / 0.76);
}
@media (max-width: 899px) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6) var(--s5);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__group:last-child {
    grid-column: 1 / -1;
  }
  .footer__group:last-child .footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s4);
  }
}
@media (max-width: 359px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__group:last-child .footer__links {
    grid-template-columns: 1fr;
  }
}
/* Short ending for legal and utility pages: logo, four links, legal lines. */
.site-footer--compact {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.footer__compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
}
.footer__links--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
}
@media (max-width: 599px) {
  .footer__links--row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.site-footer--compact .footer__legal {
  margin-top: var(--s5);
}
/* Clearance for the floating assistant launcher so it never covers the last lines of the page. */
.site-footer {
  padding-bottom: calc(var(--s6) + 72px + env(safe-area-inset-bottom));
}

/* ---------- 404 ---------- */
.notfound {
  padding-block: var(--section);
  min-height: 50vh;
}
.checks__more { margin-top: var(--s5); }
h2 + p,
h2 + .lead {
  margin-top: var(--s5);
}
/* Text-led sections share a readable heading-to-copy rhythm. */
.section :is(.split,.section__head) h2 + p,
.section .stack h2 + p{margin-top:clamp(1.5rem,2.2vw,2rem)}
.section__head{row-gap:clamp(1.2rem,2vw,2rem)}
.section:has(> .container.split):not(:has(.terms,.table-wrap,.qlist,.ticks)){padding-block:clamp(4rem,6vw,7rem)}
#sub-title + .strategy-table-wrap{margin-top:clamp(1.5rem,2.5vw,2.5rem)}
#sub-title{margin-bottom:clamp(1.5rem,2.5vw,2.5rem)}
.lead + p {
  margin-top: var(--s4);
}
.example-note + .btn-row {
  margin-top: var(--s6);
}
.split .callout, .stack + .callout, p + .callout { margin-top: var(--s5); }
.measure-wide { max-width: 52rem; }

/* design-review FINDING-001: touch targets of at least 44 px for standalone links (audience 50+). */
.text-link,
.checks__more a,
.section__head a,
.footer__links a,
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Światłocień: dark surfaces (PALETY.md) ----------
   The page is paper. The proof moments are forest ink with brass: the header (every page), the hero, the 7 checks
   (also on /jak-pracujemy) and the owner's quote re-point the role tokens to the night set from tokens.css.
   The pinned process (.section--pine) and the footer are dark through --dark and --footer on every surface.
   :is() with the #siedem-kontroli id gives these rules id specificity, so they win over the class rules above.
   Derived tokens (shadows, hairlines, logo) are computed where they are declared, so they are declared again here. */
:is(.site-header, .hero, #siedem-kontroli, .owner-band) {
  --paper: var(--night-paper);
  --linen: var(--night-linen);
  --mist: var(--night-mist);
  --sheet: var(--night-sheet);
  --line: var(--night-line);
  --ink: var(--night-ink);
  --pine: var(--night-pine);
  --stone: var(--night-stone);
  --brick: var(--night-brick);
  --brick-hover: var(--night-brick-hover);
  --focus: var(--night-focus);
  --on-accent: var(--night-on-accent);
  --dark: var(--night-dark);
  --focus-gap-dark: var(--night-focus-gap-dark);
  --success: var(--night-success);
  --success-bg: var(--night-success-bg);
  --error: var(--night-error);
  --error-bg: var(--night-error-bg);
  --warn: var(--night-warn);
  --warn-bg: var(--night-warn-bg);
  --paper-rgb: var(--night-paper-rgb);
  --shade-rgb: var(--night-shade-rgb);
  --accent-shade-rgb: var(--night-accent-shade-rgb);
  --grain: var(--night-grain);
  --grain-light: var(--night-grain-light);
  --shadow-1: 0 0 0 1px rgb(var(--on-dark-rgb) / 0.07), 0 1px 2px rgb(var(--shade-rgb) / 0.4);
  --shadow-2: 0 0 0 1px rgb(var(--on-dark-rgb) / 0.12), 0 1px 0 rgb(var(--on-dark-rgb) / 0.06) inset, 0 24px 48px -24px rgb(var(--shade-rgb) / 0.75);
  --shadow-paper: 0 1px 0 rgb(255 253 248 / 0.9) inset, 0 0 0 1px rgb(var(--shade-rgb) / 0.35), 0 2px 4px rgb(var(--shade-rgb) / 0.5), 0 16px 28px -12px rgb(var(--shade-rgb) / 0.6), 0 46px 80px -30px rgb(var(--shade-rgb) / 0.8);
  --line-dark: rgb(var(--on-dark-rgb) / 0.22);
  --logo-roof: var(--brick);
  --logo-body: var(--pine);
  --logo-roof-dark: var(--brick-soft);
  --logo-body-dark: var(--on-dark);
  color-scheme: dark;
  color: var(--ink);
  background: var(--paper) var(--grain);
}
/* Sheets inside a dark surface (the protocol in the hero) stay paper on a dark desk: the day set again, but the
   dark-desk shadow (--shadow-paper above) is deliberately kept. */
:is(.site-header, .hero, #siedem-kontroli, .owner-band) :is(.protocol, .sheet, .price-notice, .table-wrap) {
  --paper: var(--day-paper);
  --linen: var(--day-linen);
  --mist: var(--day-mist);
  --sheet: var(--day-sheet);
  --line: var(--day-line);
  --ink: var(--day-ink);
  --pine: var(--day-pine);
  --stone: var(--day-stone);
  --brick: var(--day-brick);
  --brick-hover: var(--day-brick-hover);
  --focus: var(--day-focus);
  --on-accent: var(--day-on-accent);
  --dark: var(--day-dark);
  --focus-gap-dark: var(--day-focus-gap-dark);
  --success: var(--day-success);
  --success-bg: var(--day-success-bg);
  --error: var(--day-error);
  --error-bg: var(--day-error-bg);
  --warn: var(--day-warn);
  --warn-bg: var(--day-warn-bg);
  --paper-rgb: var(--day-paper-rgb);
  --shade-rgb: var(--day-shade-rgb);
  --accent-shade-rgb: var(--day-accent-shade-rgb);
  --grain: var(--day-grain);
  --grain-light: var(--day-grain-light);
  color-scheme: light;
  color: var(--ink);
}
/* Photographs on dark: one static overlay (warm grade and a soft vignette, multiply), no filter on the image. */
.hero .photo__frame {
  position: relative;
}
.hero .photo__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 105% at 50% 42%, var(--photo-grade) 42%, var(--photo-vignette) 100%);
  mix-blend-mode: multiply;
}

/* Narrow screens: long words in page titles and article text must wrap instead of widening the page (320px). */
.page-head .lead,.prose p,.prose li,.prose code{overflow-wrap:anywhere;hyphens:auto}
/* Display headings wrap at word boundaries. Constrained layouts size type to fit whole Polish words. */
.page-head h1,.prose h2,.prose h3{overflow-wrap:normal;hyphens:manual}
.prose{min-width:0}
/*
 * Motion layer. Everything here is progressive enhancement:
 *  - only inside @media (prefers-reduced-motion: no-preference);
 *  - load animations only under html.js (set by /gate.js before first paint);
 *  - scroll-driven animations only under html.sda (CSS supports animation-timeline AND motion is allowed);
 *  - only transform and opacity are animated; one easing family (ease-out-quart, var(--ease)).
 * Under prefers-reduced-motion: reduce, the last block sets animation: none on everything.
 * Effect ids (M1 to M7) match MOTION_SPEC.md.
 */

@media (prefers-reduced-motion: no-preference) {
  /* M6: native cross-document page transitions (crossfade, header stays put). */
  @view-transition {
    navigation: auto;
  }
  /* v2: the old page settles away (220 ms), the new page rises into place (460 ms). The header is its
     own group (view-transition-name: site-header) and stays put; only opacity and transform move. */
  ::view-transition {
    background: var(--paper);
  }
  ::view-transition-old(root) {
    animation: vt-out 220ms var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 460ms var(--ease) 60ms both;
  }
  @keyframes vt-out {
    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }
  @keyframes vt-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  /* M7: micro-interactions (UI, <= 300 ms). */
  .btn::after {
    transition: opacity var(--t-hover) var(--ease);
  }
  .btn:active {
    transform: translateY(1px);
    transition: transform var(--t-press) var(--ease);
  }
  .nav__link::after {
    transition: transform var(--t-ui) var(--ease);
  }
  .text-link {
    transition: background-size var(--t-ui) var(--ease);
  }
  .btn__arrow {
    transition: transform var(--t-ui) var(--ease);
  }
  .btn:hover .btn__arrow {
    transform: translateX(4px);
  }
  .menu__icon::before,
  .menu__icon::after {
    transition: transform var(--t-ui) var(--ease), top var(--t-ui) var(--ease);
  }
  .menu[open] .menu__panel {
    animation: menu-open var(--t-panel) var(--ease) both;
  }
  @keyframes menu-open {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  .faq__icon {
    transition: transform var(--t-ui) var(--ease);
  }
  .faq__item[open] .faq__body {
    animation: faq-open var(--t-panel) var(--ease) both;
  }
  @keyframes faq-open {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  /* M1: calm hero entrance, once on load (600 ms, 12 px). The roof of the mark settles on the page. */
  html.js .hero [data-enter] {
    animation: enter var(--t-enter) var(--ease) both;
  }
  html.js .hero [data-enter='2'] {
    animation-delay: 90ms;
  }
  html.js .hero [data-enter='3'] {
    animation-delay: 180ms;
  }
  html.js .hero [data-enter='sheet'] {
    animation: enter-sheet var(--t-enter-long) var(--ease) 160ms both;
  }
  html.js.is-home .site-header .brand .roof {
    animation: roof var(--t-enter) var(--ease) 120ms both;
  }
  /* v2: the headline rises behind a mask, the kicker rule draws, the desk photograph opens like a
     print being uncovered and the protocol sheet is laid on it last. */
  /* Specificity above the generic [data-enter] rule; fill backwards only, so no clip remains after the end. */
  html.js .hero .hero__title[data-enter] {
    animation: title-in 900ms var(--ease) 60ms backwards;
  }
  html.js .hero__kicker::before {
    transform-origin: left center;
    animation: rule-draw 700ms var(--ease) 200ms both;
  }
  html.js .hero__photo .photo__frame {
    animation: frame-open 1100ms var(--ease) 120ms backwards;
  }
  html.js .hero__photo img {
    animation: frame-settle 1400ms var(--ease) 120ms both;
  }
  html.js .hero__desk [data-enter='sheet'] {
    animation: enter-sheet 800ms var(--ease) 480ms both;
  }
  @keyframes title-in {
    from {
      opacity: 0;
      transform: translateY(0.18em);
      clip-path: inset(-20% 0 35% 0);
    }
    to {
      clip-path: inset(-20% 0 -20% 0);
    }
  }
  @keyframes frame-open {
    from {
      clip-path: inset(12% 0 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  @keyframes frame-settle {
    from {
      transform: scale(1.06);
    }
  }
  @keyframes enter {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
  @keyframes enter-sheet {
    from {
      opacity: 0;
      transform: translateY(28px) rotate(0.6deg);
    }
  }
  @keyframes roof {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  /* M2: the 7 checks light up in sequence while the visitor reads (tied to the scroll position).
     Text stays at full opacity (contrast); what lights up is the numeral (Kamień to brass crossfade)
     and a short brass rule under it that draws itself (scaleX). */
  html.sda .check__num-on {
    animation: num-light linear both;
    animation-timeline: view();
    animation-range: entry 70% cover 40%;
  }
  html.sda .check__num::after {
    animation: rule-draw linear both;
    animation-timeline: view();
    animation-range: entry 70% cover 42%;
  }
  @keyframes num-light {
    from {
      opacity: 0;
    }
  }
  @keyframes rule-draw {
    from {
      transform: scaleX(0);
    }
  }

  /* M3: the sample audit report assembles from three sheets (desktop and tablet). */
  @media (min-width: 900px) {
    html.sda .sheets {
      view-timeline: --sheets block;
    }
    html.sda .sheet {
      animation: sheet-in linear both;
      animation-timeline: --sheets;
      animation-range: entry 15% cover 48%;
    }
    html.sda .sheet:nth-child(1) {
      --from: translateX(104%) translateY(40px);
    }
    html.sda .sheet:nth-child(2) {
      --from: translateY(56px);
      animation-range: entry 22% cover 50%;
    }
    html.sda .sheet:nth-child(3) {
      --from: translateX(-104%) translateY(40px);
      animation-range: entry 28% cover 52%;
    }
    @keyframes sheet-in {
      from {
        transform: var(--from);
      }
    }
  }
  @media (max-width: 899px) {
    html.sda .sheet {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }
  }

  /* M5: calm entrances for the price and exit-terms sections (and other marked blocks). */
  html.sda .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 80%;
  }
  /* Transform only: text keeps full contrast at every scroll position. */
  @keyframes rise {
    from {
      transform: translateY(24px);
    }
  }

  /* M8 (v2): photographs open like prints being uncovered while they enter the viewport.
     Clip and scale only; the static state (and reduced motion, Firefox, no JS) is the full image. */
  html.sda .photo--reveal .photo__frame {
    animation: frame-open linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }
  html.sda .photo--reveal img {
    animation: frame-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 0%;
  }
  /* M5 (v2): editorial stagger. Headings and list rows rise in reading order; text keeps full opacity. */
  html.sda:not(.is-home) main h2:not(.visually-hidden):not(.reveal h2):not(.peak h2),
  html.sda .qlist li,
  html.sda .term,
  html.sda .faq__item {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  /* M4 (mobile and narrow windows): progress line draws down beside the five stages. */
  @media (max-width: 1099px), (max-height: 619px) {
    html.sda .peak__steps::before {
      animation: line-draw linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 70%;
    }
    @keyframes line-draw {
      from {
        transform: scaleY(0);
      }
    }
  }

  /* M4 (desktop only, from 1100 x 620): the one pinned peak, „od zgłoszenia do odbioru”. */
  @media (min-width: 1100px) and (min-height: 620px) {
    html.sda .peak {
      height: 380vh;
      view-timeline: --peak block;
    }
    html.sda .peak__sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: 64px;
      overflow: hidden;
    }
    html.sda .peak__steps {
      display: block;
      min-height: 22rem;
    }
    html.sda .peak__steps::before {
      display: none;
    }
    html.sda .peak__step {
      position: absolute;
      inset: 0 0 auto 0;
      animation: stage linear both;
      animation-timeline: --peak;
    }
    /* v2: in the pinned chapter the stage number becomes a large display numeral (no circle). */
    html.sda .peak__step .peak__num {
      width: auto;
      height: auto;
      display: block;
      border: 0;
      border-radius: 0;
      background: none;
      font-family: var(--font-grand);
      font-weight: 380;
      font-size: clamp(7rem, 3rem + 7vw, 11rem);
      line-height: 0.74;
      letter-spacing: -0.05em;
      color: var(--brick-soft);
    }
    html.sda .peak__step {
      grid-template-columns: clamp(7rem, 3rem + 7vw, 11rem) 1fr;
      gap: var(--s3) var(--s7);
    }
    html.sda .peak__intro h2 {
      font-size: clamp(3rem, 1rem + 3.6vw, 4.75rem);
      line-height: 1;
    }
    html.sda .peak__step h3 {
      font-family: var(--font-grand);
      font-weight: 380;
      letter-spacing: -0.024em;
      font-size: clamp(2.5rem, 1rem + 2.4vw, 3.5rem);
      line-height: 1.02;
    }
    html.sda .peak__step p {
      font-size: 1.25rem;
      line-height: 1.55;
    }
    html.sda .peak__step .peak__who {
      font-size: 1rem;
    }
    html.sda .peak__step:nth-child(1) {
      animation-name: stage-first;
      animation-range: contain 0% contain 20%;
    }
    html.sda .peak__step:nth-child(2) {
      animation-range: contain 20% contain 40%;
    }
    html.sda .peak__step:nth-child(3) {
      animation-range: contain 40% contain 60%;
    }
    html.sda .peak__step:nth-child(4) {
      animation-range: contain 60% contain 80%;
    }
    html.sda .peak__step:nth-child(5) {
      animation-name: stage-last;
      animation-range: contain 80% contain 96%;
    }
    @keyframes stage {
      0% {
        opacity: 0;
        transform: translateY(36px);
      }
      18%,
      82% {
        opacity: 1;
        transform: none;
      }
      100% {
        opacity: 0;
        transform: translateY(-28px);
      }
    }
    @keyframes stage-first {
      0%,
      82% {
        opacity: 1;
        transform: none;
      }
      100% {
        opacity: 0;
        transform: translateY(-28px);
      }
    }
    @keyframes stage-last {
      0% {
        opacity: 0;
        transform: translateY(28px);
      }
      25%,
      100% {
        opacity: 1;
        transform: none;
      }
    }

    /* The rail: five nodes and a bar that fills with the reading. */
    html.sda .peak__rail {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      position: relative;
      margin-top: clamp(32px, 6vh, 64px);
    }
    html.sda .peak__rail::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 7px;
      height: 2px;
      background: var(--line-dark);
    }
    html.sda .peak__bar {
      position: absolute;
      left: 0;
      right: 0;
      top: 7px;
      height: 2px;
      background: var(--brick-soft);
      transform-origin: left center;
      animation: bar linear both;
      animation-timeline: --peak;
      animation-range: contain 0% contain 96%;
    }
    @keyframes bar {
      from {
        transform: scaleX(0.02);
      }
    }
    html.sda .peak__node {
      position: relative;
      display: grid;
      gap: 10px;
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--on-dark);
    }
    html.sda .peak__dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--brick-soft);
      box-shadow: 0 0 0 4px var(--dark);
    }
    /* Only the dot lights up; the labels keep full contrast. */
    html.sda .peak__node .peak__dot {
      animation: node linear both;
      animation-timeline: --peak;
    }
    html.sda .peak__node:nth-child(2) .peak__dot {
      animation-range: contain 0% contain 4%;
    }
    html.sda .peak__node:nth-child(3) .peak__dot {
      animation-range: contain 20% contain 24%;
    }
    html.sda .peak__node:nth-child(4) .peak__dot {
      animation-range: contain 40% contain 44%;
    }
    html.sda .peak__node:nth-child(5) .peak__dot {
      animation-range: contain 60% contain 64%;
    }
    html.sda .peak__node:nth-child(6) .peak__dot {
      animation-range: contain 80% contain 84%;
    }
    @keyframes node {
      from {
        opacity: 0.3;
        transform: scale(0.6);
      }
    }
  }
}

/* Reduced motion: no animation of any kind. Scroll-driven animations are not time-based, so a
   duration override would not stop them; animation: none does. The static layout is the full design. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Pagehouse PHASE: shared visual language and page-specific composition. Static styles are the no-JS state. */
@font-face{font-family:Archivo;src:url('/fonts/archivo-phase.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
 --ph-ink:#070A10;--ph-ice:#EEF7FA;--ph-blue:#67D8FF;--ph-lime:#D8FC3B;--ph-steel:#9BAAB5;--ph-petroleum:#0B292D;
 --day-paper:#EEF7FA;--day-linen:#E3EDF0;--day-mist:#D7E7EC;--day-sheet:#FFFFFF;--day-line:#BDD0D7;--day-ink:#111923;--day-pine:#070A10;--day-stone:#44535F;--day-brick:#0B5E7D;--day-brick-hover:#074560;--day-focus:#005B7B;--day-on-accent:#EEF7FA;--day-dark:#070A10;--day-focus-gap-dark:#070A10;--day-paper-rgb:238 247 250;--day-shade-rgb:7 10 16;--day-accent-shade-rgb:7 10 16;
 --night-paper:#070A10;--night-linen:#0C141D;--night-mist:#112B35;--night-sheet:#111D26;--night-line:#34444F;--night-ink:#EEF7FA;--night-pine:#EEF7FA;--night-stone:#A8BDC7;--night-brick:#67D8FF;--night-brick-hover:#8BE2FF;--night-focus:#D8FC3B;--night-on-accent:#070A10;--night-dark:#070A10;--night-focus-gap-dark:#070A10;--night-paper-rgb:7 10 16;--night-shade-rgb:0 0 0;--night-accent-shade-rgb:14 112 144;
 --brick-soft:#67D8FF;--footer:#070A10;--focus-dark:#D8FC3B;--on-dark:#EEF7FA;--on-dark-rgb:238 247 250;--theme:#070A10;--brass-rgb:103 216 255;--scrollbar-thumb:#7D929B;--photo-grade:#E8F8FF;--photo-vignette:#7898A5;
 --font-display:Archivo,'Source Sans 3',sans-serif;--font-grand:Archivo,'Source Sans 3',sans-serif;--font-text:Archivo,'Source Sans 3',sans-serif;--track-grand:-.075em;--container:1440px;--gutter:clamp(22px,3.25vw,60px);--r-btn:0;--r-sm:0;--r:0;--r-lg:0;--section:clamp(6rem,10vw,11rem);--section-tight:clamp(4rem,7vw,8rem);--fs-h1:clamp(3.5rem,8vw,8rem);--fs-h2:clamp(2.85rem,5.5vw,6.5rem);
}
html{color-scheme:light;scroll-padding-top:95px}body{background:var(--ph-ice);font-family:var(--font-text);font-size:1rem;line-height:1.55}h1,h2,h3{font-family:var(--font-grand);font-weight:740;letter-spacing:-.055em;line-height:1.01}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:clamp(1.5rem,2vw,2.4rem)}p{hanging-punctuation:none}.container{max-width:calc(var(--container) + 2*var(--gutter))}.label,.phase-kicker,.phase-overline{font-family:var(--font-text);font-weight:650;letter-spacing:.16em;text-transform:uppercase}.section{padding-block:var(--section)}
.site-header{background:var(--ph-ink)!important;border-color:#2B3B45!important;color:var(--ph-ice)!important;position:relative}.site-header__bar{min-height:88px}.site-header .nav__link{color:var(--ph-ice);font-size:.83rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase}.site-header .nav__link[aria-current='page']{color:var(--ph-blue)}.site-header .nav__link[aria-current='page']::after{background:var(--ph-blue)}.site-header .brand svg{width:158px}.site-header .btn--primary{min-height:46px}.brand{overflow:visible}.brand svg{overflow:visible}
.btn{font-family:var(--font-text);font-weight:720;font-size:.86rem;text-transform:uppercase;letter-spacing:.09em;min-height:58px;padding:0 23px;box-shadow:none;border-radius:0}.btn--primary{background:var(--ph-lime);color:var(--ph-ink);border-color:var(--ph-lime)}.btn--primary::after{background:var(--ph-ice)}.btn--secondary{border:1px solid currentColor}.btn:focus-visible{outline:3px solid var(--ph-blue);outline-offset:3px}.btn__arrow{width:18px;height:18px}.phase-text-link{display:inline-flex;gap:1.4rem;min-height:48px;align-items:center;color:inherit!important;font-size:.78rem;font-weight:750;letter-spacing:.14em;text-decoration:none;text-transform:uppercase;border-bottom:1px solid currentColor}.phase-text-link span{font-size:1.45rem;line-height:1}.phase-text-link:hover{color:var(--ph-blue)!important}
.page-head{background:var(--ph-ink);color:var(--ph-ice);padding-block:clamp(5rem,8vw,9rem);position:relative;overflow:hidden}.page-head:after{content:'';position:absolute;width:38vw;height:38vw;right:-12vw;bottom:-23vw;background:linear-gradient(135deg,transparent 37%,var(--ph-blue) 37.1% 37.5%,transparent 37.6% 45%,#153746 45.1% 67%,transparent 67.1%);transform:rotate(-12deg);opacity:.28;pointer-events:none}.page-head h1{color:var(--ph-ice);max-width:12ch;font-size:clamp(3.4rem,7vw,8rem);line-height:.96}.page-head .lead{color:#C8DCE4;max-width:54rem;font-size:clamp(1.1rem,1.7vw,1.4rem);margin-top:2.5rem}.crumbs{margin-bottom:3.3rem}.crumbs,.crumbs a{color:var(--ph-blue);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.crumbs ol{gap:1.2rem}.site-footer{background:var(--ph-ink)!important;color:var(--ph-ice);border-top:1px solid #263C47;padding-top:8rem}.footer__statement{font-size:clamp(3rem,6vw,7rem);font-weight:780;letter-spacing:-.07em;max-width:16ch}.footer__grid{border-color:#31434E}.site-footer .brand svg{width:190px}.site-footer a:hover{color:var(--ph-lime)}.footer__title{color:var(--ph-blue)}
/* Home — editorial rhythm, stepped geometry, one cinematic image reveal. */
.phase-hero{min-height:clamp(790px,85svh,1060px);position:relative;overflow:hidden;background:var(--ph-ink)!important;color:var(--ph-ice);isolation:isolate}.phase-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 64%,#0A2739 0,transparent 28%),linear-gradient(180deg,#070A10, #0A1018);z-index:-2}.phase-hero__top,.phase-hero__bottom{display:flex;align-items:center;gap:2rem;font-size:.65rem;font-weight:700;letter-spacing:.25em;color:#A9BEC8}.phase-hero__top{height:70px}.phase-line{height:1px;background:#48636E;flex:1;max-width:210px}.phase-hero__top span:last-child{margin-left:auto}.phase-hero__content{position:relative;z-index:2;padding-top:clamp(2rem,4vw,5rem)}.phase-overline{display:flex;align-items:center;gap:12px;color:var(--ph-blue);font-size:.69rem}.phase-square{width:10px;height:10px;background:var(--ph-lime);display:inline-block;transform:skewY(-18deg)}.phase-wordmark{font-size:clamp(5.4rem,14.1vw,16rem);font-weight:820;line-height:.77;letter-spacing:-.103em;white-space:nowrap;margin:.16em 0 .15em -.07em;color:var(--ph-ice)}.phase-wordmark__period{color:var(--ph-blue)}.phase-hero__heading{font-size:clamp(2.7rem,5.3vw,6.5rem);font-weight:300;line-height:1.08;letter-spacing:-.07em;color:var(--ph-ice);max-width:15ch}.phase-hero__heading em,.phase-showcase h2 em,.phase-proof h2 em,.phase-close h2 em{font-style:normal;color:var(--ph-blue)}.phase-hero__lower{display:flex;align-items:flex-end;justify-content:space-between;gap:4rem;margin-top:clamp(3rem,6vw,6rem);padding-bottom:5rem;max-width:900px}.phase-hero__lower p{max-width:38ch;font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;color:#D8E7EE}.phase-hero__actions{display:flex;align-items:center;gap:1.7rem;flex-shrink:0}.phase-hero__bottom{position:absolute;z-index:4;left:0;right:0;bottom:1.4rem}.phase-hero__bottom span:nth-child(2){margin-left:auto}.phase-hero__scroll{font-size:1.3rem;color:var(--ph-lime)}.phase-ribbon{position:absolute;z-index:0;right:-15%;bottom:4%;width:87%;height:37%;pointer-events:none;transform:rotate(-20deg);transform-origin:center;clip-path:polygon(0 4%,100% 0,100% 100%,0 90%);overflow:hidden;opacity:.9}.phase-ribbon__plane{position:absolute;inset:-60%;background:linear-gradient(120deg,transparent 18%,#0A3651 25%,var(--ph-blue) 28%,#D2F1FC 29%,#101C29 31%,#04070C 45%,#829BA9 51%,#F1FDFF 52%,#132C3B 53%,transparent 65%);transform:rotate(9deg)}.phase-ribbon__beam{position:absolute;inset:0;background:linear-gradient(0deg,transparent 52%,var(--ph-lime) 52.3%,transparent 53.2%);opacity:.64}.phase-ribbon__tiny{position:absolute;bottom:11%;right:26%;font-size:7rem;font-weight:900;letter-spacing:-.1em;color:#DAEDF4;opacity:.16}
.phase-kicker{font-size:.72rem;color:#385763;display:flex;gap:1.5rem;align-items:center;margin-bottom:2rem}.phase-kicker span{color:#087598;font-weight:800}.phase-intro{background:var(--ph-ice);color:var(--ph-ink)}.phase-intro__grid,.phase-offer__head,.phase-proof__grid,.phase-qa__grid{display:grid;grid-template-columns:25% 1fr;gap:3rem}.phase-intro h2{max-width:13ch}.phase-intro h2 span{color:#207FA3}.phase-intro__lead{font-size:clamp(1.25rem,2.1vw,2rem);max-width:46rem;line-height:1.35;margin-top:3rem}.phase-pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(5rem,9vw,9rem)}.phase-pillar{min-height:460px;border-top:1px solid #A9C2CE;border-right:1px solid #A9C2CE;padding:2rem 2.2rem 2rem 0;position:relative}.phase-pillar:not(:first-child){padding-left:2.2rem}.phase-pillar:last-child{border-right:0}.phase-pillar__index{font-size:.7rem;letter-spacing:.2em;color:#336579;font-weight:700}.phase-pillar h3{font-size:clamp(2.3rem,3.3vw,4.6rem);margin-top:4.3rem}.phase-pillar p{max-width:25ch;margin-top:1.8rem;font-size:1.1rem}.phase-pillar__glyph{position:absolute;bottom:2rem;right:2rem;font-size:3.3rem;color:#2EA6C8;line-height:1}
.phase-showcase{background:var(--ph-ink);color:var(--ph-ice);padding-block:var(--section);overflow:hidden}.phase-showcase .phase-kicker,.phase-proof .phase-kicker,.phase-close .phase-kicker{color:var(--ph-blue)}.phase-showcase h2{color:var(--ph-ice);font-size:clamp(3.8rem,8vw,9rem);line-height:.9;max-width:10ch}.phase-showcase__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:center;margin-top:5rem}.phase-showcase__visual{height:clamp(420px,52vw,680px);position:relative;background:radial-gradient(circle at 60% 55%,#0B3A52,transparent 45%),#0C151D;overflow:hidden;border:1px solid #2F4652}.phase-showcase__visual span{position:absolute;font-size:clamp(13rem,31vw,37rem);font-weight:820;letter-spacing:-.13em;line-height:.78;color:#DBF4FB;left:-.08em;top:9%;z-index:1}.phase-showcase__slice{position:absolute;width:130%;height:31%;transform:rotate(-22deg);background:linear-gradient(135deg,#DAF6FF,#6E95A5 18%,#07131E 28%,#07131E 68%,#94DFF7 72%,#132834 77%);z-index:2;left:-10%}.phase-showcase__slice--one{top:39%}.phase-showcase__slice--two{top:67%;height:9%;background:var(--ph-blue);opacity:.7}.phase-showcase__copy{max-width:32rem}.phase-showcase__big{font-size:clamp(1.7rem,2.7vw,3.2rem);font-weight:590;letter-spacing:-.05em;line-height:1.15;color:var(--ph-ice)}.phase-showcase__copy p+p{color:#B4C8D1;margin-top:2rem;font-size:1.06rem}.phase-showcase__copy .btn{margin-top:2.8rem;color:var(--ph-ice);border-color:#7D9BAB}.phase-showcase__copy .btn:hover{border-color:var(--ph-blue)}
.phase-offer{background:var(--ph-ice)}.phase-offer__head h2{max-width:13ch}.phase-offer__head p{max-width:50ch;margin-top:2rem;font-size:1.2rem}.phase-offer__list{margin-top:5rem;border-top:1px solid #B0C6CE}.phase-offer__row{display:grid;grid-template-columns:28% minmax(0,1fr) 7%;gap:1rem;align-items:center;min-height:162px;border-bottom:1px solid #B0C6CE;color:var(--ph-ink);text-decoration:none}.phase-offer__row:hover{background:#DDEFF4}.phase-offer__name{font-size:clamp(2.5rem,4.2vw,5rem);font-weight:750;letter-spacing:-.065em;line-height:.95}.phase-offer__desc{max-width:37ch;color:#425763;font-size:1rem}.phase-offer__arrow{font-size:2rem;color:#126F90;text-align:right}.phase-offer .price-notice{margin-top:3rem}
.phase-proof{background:var(--ph-petroleum);color:var(--ph-ice)}.phase-proof__grid{grid-template-columns:20% 1fr 27%}.phase-proof h2{color:var(--ph-ice);font-size:clamp(3.5rem,6.6vw,8rem)}.phase-proof__lead{max-width:36ch;font-size:1.3rem;margin:2.7rem 0 2rem}.phase-proof__number{font-size:clamp(10rem,19vw,23rem);font-weight:780;line-height:.7;letter-spacing:-.12em;color:var(--ph-lime);align-self:center;white-space:nowrap}.phase-proof__number span{font-size:.8rem;letter-spacing:.05em;display:block;margin:2rem 0 0 50%;color:var(--ph-ice)}
.phase-qa{background:#E2EEF2}.phase-qa .phase-text-link{margin-top:2rem;color:#0A5D79!important}.phase-qa .faq{max-width:none}.phase-close{background:var(--ph-ink);color:var(--ph-ice);padding-block:var(--section)}.phase-close h2{color:var(--ph-ice);font-size:clamp(4.4rem,9.3vw,11rem);line-height:.9;max-width:14ch}.phase-close__bottom{display:flex;justify-content:space-between;gap:4rem;align-items:end;margin-top:5rem;padding-top:2rem;border-top:1px solid #32454F}.phase-close__bottom p{max-width:40ch;color:#B9D0D9;font-size:1.1rem}
/* QA split: the heading column must be wide enough for its longest word ("zaczniemy." is ~10 characters), so the old 25% track is replaced by a 5:7 split and the type scales with that column rather than the viewport alone. Below 900px the grid is single-column (rule further down). */
.phase-qa__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem)}.phase-qa__grid>*{min-width:0}.phase-qa .faq__body{overflow-wrap:anywhere}.phase-qa h2{max-width:none;font-size:clamp(2.6rem,3.7vw,4.4rem);line-height:1.05}
.section h2{line-height:1.06}
.section--tight:has(> .container.split):not(:has(.terms,.table-wrap,.qlist,.ticks)){padding-block:clamp(4rem,6vw,7rem)}
/* Existing route content now uses the same precise editorial rhythm. */
.section--linen{background:#E2EEF2}.section__head h2{max-width:16ch}.split{gap:clamp(3rem,7vw,8rem)}.qlist li,.term,.pkg-detail{border-color:#B5CDD5}.qlist__num,.pkg__index,.check__num{color:#14799A}.tag{background:var(--ph-lime);color:var(--ph-ink);border-radius:0}.callout{background:#D2E9F0;border-left:4px solid var(--ph-blue);border-radius:0}.price-notice,.sheet,.protocol,.table-wrap{border-radius:0;box-shadow:0 12px 45px #08162014}.field .input,.field .textarea{border-radius:0}.input:focus-visible,.textarea:focus-visible{border-color:#067C9E}.peak,.owner-band{background:var(--ph-petroleum)!important;color:var(--ph-ice)}.closing-band{background:var(--ph-ink);color:var(--ph-ice)}.closing-band h2,.owner-band h2,.peak h2{color:var(--ph-ice)}.notfound{background:var(--ph-ice)}
@media(max-width:1100px){.phase-hero__lower{max-width:760px}.phase-ribbon{right:-37%;width:105%;bottom:5%}.phase-proof__grid{grid-template-columns:20% 1fr}.phase-proof__number{grid-column:2;justify-self:end;margin-top:3rem}}
@media(max-width:899px){.site-header .menu__toggle{color:var(--ph-ice);border-color:#607883}.menu__panel{background:var(--ph-ink);border-color:#374D58}.menu__list li{border-color:#374D58}.menu__link{color:var(--ph-ice);font-family:var(--font-text);font-weight:700}.menu__link[aria-current='page']{color:var(--ph-blue)}.phase-hero{min-height:820px}.phase-wordmark{font-size:14vw}.phase-hero__lower{flex-wrap:wrap;margin-top:3rem}.phase-ribbon{right:-35%;width:120%;bottom:8%;height:30%;opacity:.65}.phase-intro__grid,.phase-offer__head,.phase-qa__grid{grid-template-columns:1fr;gap:1rem}.phase-pillars{grid-template-columns:1fr}.phase-pillar,.phase-pillar:not(:first-child){min-height:260px;padding:1.5rem 5rem 1.5rem 0;border-right:0;border-bottom:1px solid #A9C2CE}.phase-pillar h3{margin-top:2rem}.phase-pillar__glyph{bottom:1.5rem;right:1rem}.phase-showcase__grid{grid-template-columns:1fr}.phase-showcase__visual{height:420px}.phase-showcase__copy{max-width:42rem}.phase-offer__row{grid-template-columns:minmax(0,1fr) 7%;min-height:135px}.phase-offer__desc{grid-column:1;grid-row:2;padding-bottom:1rem}.phase-offer__arrow{grid-column:2;grid-row:1}.phase-proof__grid{grid-template-columns:1fr}.phase-proof__number{grid-column:1}.phase-close__bottom{flex-wrap:wrap}}
@media(max-width:600px){.site-header__bar{min-height:66px}.site-header .brand svg{width:142px}.phase-hero{min-height:780px}.phase-hero__top{height:54px;font-size:.55rem}.phase-hero__top .phase-line{display:none}.phase-hero__content{padding-top:2rem}.phase-overline{font-size:.58rem}.phase-wordmark{font-size:13.8vw;letter-spacing:-.105em;margin-top:.55em}.phase-hero__heading{font-size:clamp(2.5rem,9vw,4rem);margin-top:1.2rem}.phase-hero__lower{margin-top:2rem;padding-bottom:0;gap:1.5rem}.phase-hero__lower p{font-size:1rem;max-width:30ch}.phase-hero__actions{flex-wrap:wrap;gap:.8rem}.phase-hero__actions .btn{width:auto}.phase-ribbon{width:125%;right:-45%;bottom:3%;height:24%;opacity:.8}.phase-hero__bottom{font-size:.54rem;bottom:1rem}.phase-hero__bottom span:nth-child(2){display:none}.phase-hero__scroll{margin-left:auto}.phase-intro__lead{margin-top:2rem}.phase-showcase__visual{height:310px}.phase-showcase__visual span{font-size:50vw}.phase-showcase h2{font-size:clamp(3.5rem,13vw,5.7rem)}.phase-offer__row{grid-template-columns:minmax(0,1fr) 9%;gap:.4rem}.phase-offer__name{font-size:clamp(2.3rem,9vw,3.4rem)}.phase-offer__desc{font-size:.9rem}.phase-proof__number{font-size:44vw}.phase-close h2{font-size:clamp(3.5rem,12vw,5.5rem)}.phase-close__bottom{margin-top:3rem}.page-head{padding-block:4rem}.page-head h1{font-size:clamp(3.2rem,11vw,5.5rem)}.footer__statement{font-size:clamp(3rem,11vw,5rem)}}
.site-header .brand img{display:block;width:158px;height:auto}.site-footer .brand img{display:block;width:190px;height:auto}.phase-wordmark{font-size:initial;line-height:normal;margin:clamp(1.5rem,3vw,3rem) 0 2.4rem;max-width:100%}.phase-wordmark img{display:block;width:min(100%,1430px);height:auto}.phase-ribbon__plane{background:linear-gradient(90deg,#070A10A0,#070A1000 20%,#070A1000 80%,#070A10A0),url('/brand/phase-planes.webp') center 57%/cover no-repeat;transform:rotate(20deg) scale(1.45)}
@media(max-width:899px){.site-header .brand img{width:142px}}@media(max-width:600px){.phase-wordmark{margin:2.6rem 0 2.5rem}.site-header .brand img{width:142px}}
/* Review refinement: bring the promise and action into the first desktop viewport. */
.phase-hero__top{height:46px}.phase-hero__content{padding-top:clamp(.9rem,1.6vw,1.7rem)}.phase-wordmark{margin:clamp(1rem,1.8vw,1.5rem) 0 clamp(1.5rem,2.1vw,2rem);max-width:95%}.phase-hero__heading{font-size:clamp(2.7rem,4.6vw,5.7rem)}.phase-hero__lower{margin-top:clamp(1.25rem,2.5vw,2.7rem);padding-bottom:4rem}.phase-ribbon__plane{inset:-12%;transform:rotate(20deg) scale(1.12)}
@media(max-width:899px){.phase-hero__top{height:44px}.phase-hero__content{padding-top:1rem}.phase-wordmark{max-width:100%;margin:1.4rem 0 1.9rem}.phase-hero__lower{margin-top:1.5rem}}
@media(max-width:600px){.phase-hero__top{height:40px}.phase-wordmark{margin:1.8rem 0 2rem}.phase-hero__actions{align-items:flex-start;flex-direction:column;gap:.4rem}.phase-hero__actions .phase-text-link{min-height:38px}.phase-hero__lower{gap:1rem}.phase-hero{min-height:790px}}
.page-head h1{max-width:21ch;font-size:clamp(3.25rem,6vw,6.9rem)}
@media(max-width:600px){.page-head h1{font-size:clamp(3rem,10.4vw,5rem);max-width:100%}}
.phase-evidence{background:#D9E9EF;color:var(--ph-ink)}.phase-evidence__head{display:grid;grid-template-columns:25% 1fr;gap:3rem}.phase-evidence h2{font-size:clamp(3rem,6vw,7rem)}.phase-evidence h2 em{font-style:normal;color:#157697}.phase-evidence__head p:last-child{font-size:1.15rem;max-width:47ch;margin-top:2rem}.phase-evidence__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:4rem;margin-top:5rem;align-items:start}.phase-evidence__label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:730;color:#237895;margin-bottom:1rem}.phase-evidence .sheets{max-width:100%}.phase-evidence .sheet{background:#F7FCFD}.phase-evidence .protocol{background:#F7FCFD;box-shadow:none;border:1px solid #B0C9D2}.phase-evidence .protocol__head{gap:1rem}.phase-evidence .protocol__title{font-family:var(--font-text)}
@media(max-width:899px){.phase-evidence__head,.phase-evidence__body{grid-template-columns:1fr}.phase-evidence__body{gap:4rem}}
.phase-showcase__visual img{position:absolute;display:block;width:min(56%,350px);height:auto;left:9%;top:9%;z-index:1;filter:drop-shadow(20px 35px 45px #0008)}
@media(max-width:600px){.phase-showcase__visual img{width:42%;top:7%}}
/* Give each audit page enough width to be read; the example is evidence, not decoration. */
.phase-evidence__body{display:block}.phase-evidence__body>div:first-child{margin-bottom:2.5rem}.phase-evidence .sheets{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3.5rem);align-items:stretch;padding-bottom:0}.phase-evidence .sheet{overflow:visible;min-width:0;transform:none}.phase-evidence .protocol{max-width:520px;margin-inline:auto;transform:none}
html.sda .phase-evidence .sheet{animation:none}
@media(max-width:899px){.phase-evidence .sheets{grid-template-columns:1fr;max-width:38rem}.phase-evidence .protocol{max-width:38rem}}
/* Keep home section introductions close to their headings across the site rhythm. */
.phase-intro__grid h2+.phase-intro__lead,.phase-offer__head h2+p,.phase-proof h2+.phase-proof__lead,.phase-evidence__head h2+p{margin-top:1.5rem}
/* Small technical labels retain AA contrast on each surface. */
.phase-kicker span,.phase-evidence__label{color:#0B5E7D}
:is(.phase-showcase,.phase-proof,.phase-close) .phase-kicker span{color:var(--ph-lime)}

:is(.phase-proof,.phase-showcase,.phase-close) :focus-visible{outline-color:var(--ph-lime);box-shadow:0 0 0 2px var(--ph-ink)}
@media(max-width:360px){.phase-hero__actions .btn{max-width:calc(100vw - 44px);white-space:normal;text-align:center}}
@media(max-width:360px){.phase-close h2{font-size:3.35rem}}
@media(max-width:360px){.page-head h1{font-size:clamp(2.65rem,10.4vw,3rem);letter-spacing:-.04em;line-height:1.04}.phase-close h2{font-size:3rem;letter-spacing:-.04em}}

/* Layout after removing decorative kickers and hero scroll cues. */
.phase-hero__content{padding-top:clamp(3.5rem,5vw,5rem)}
.phase-intro__grid,.phase-offer__head,.phase-evidence__head{grid-template-columns:minmax(0,1fr)}
.phase-proof__grid{grid-template-columns:minmax(0,1fr) 27%}
.phase-pillar{min-height:380px}
.phase-pillar h3{margin-top:.5rem}
@media(max-width:899px){.phase-proof__grid{grid-template-columns:1fr}.phase-pillar{min-height:230px}}
@media(max-width:600px){.phase-hero__content{padding-top:3rem}}

/* Decorative artwork belongs to the full section, with only its edges fading. */
.phase-showcase{position:relative;isolation:isolate;min-height:clamp(760px,70vw,980px)}
.phase-showcase__head,.phase-showcase__grid{position:relative;z-index:2}
.phase-showcase__head::before{content:'';position:absolute;z-index:-1;inset:-3rem 24% -3rem -2rem;background:radial-gradient(ellipse 80% 110% at 24% 48%,var(--ph-ink) 5%,#070A10EB 52%,transparent 100%);pointer-events:none}
.phase-showcase__visual{position:absolute;inset:0;z-index:0;width:100%;height:100%;border:0;background:radial-gradient(ellipse at 30% 49%,#123A4A 0%,#0B1F2C 31%,var(--ph-ink) 75%);pointer-events:none}
.phase-showcase__visual::after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,var(--ph-ink) 0%,transparent 10%,transparent 37%,#070A10F0 61%,var(--ph-ink) 100%),linear-gradient(180deg,var(--ph-ink) 0%,transparent 16%,transparent 72%,var(--ph-ink) 100%)}
.phase-showcase__visual img{width:clamp(190px,25vw,370px);left:clamp(4%,8vw,12%);top:52%;filter:drop-shadow(20px 35px 45px #0008)}
.phase-showcase__slice{width:120%;left:-8%;opacity:.82}
.phase-showcase__slice--one{top:46%}.phase-showcase__slice--two{top:71%;opacity:.42}
.phase-showcase__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(2rem,6vw,8rem);margin-top:clamp(5rem,10vw,10rem);min-height:350px}
.phase-showcase__copy{grid-column:2;max-width:33rem;text-shadow:0 2px 16px #070A10B0}
.phase-showcase__copy p+p{color:#DFEDF3}
@media(max-width:899px){.phase-showcase__grid{grid-template-columns:1fr;min-height:0;margin-top:clamp(14rem,29vw,20rem)}.phase-showcase__copy{grid-column:1;max-width:42rem}.phase-showcase__visual::after{background:linear-gradient(180deg,var(--ph-ink) 0%,transparent 19%,#070A1033 43%,#070A10ED 68%,var(--ph-ink) 100%),linear-gradient(90deg,var(--ph-ink) 0%,transparent 13%,transparent 72%,var(--ph-ink) 100%)}.phase-showcase__visual img{width:clamp(170px,32vw,300px);left:8%;top:44%}}
@media(max-width:600px){.phase-showcase{min-height:0}.phase-showcase__grid{margin-top:clamp(11rem,45vw,15rem)}.phase-showcase__visual img{width:clamp(130px,39vw,220px);left:3%;top:40%}.phase-showcase__slice--one{top:37%}.phase-showcase__slice--two{top:55%}}

/* The two illustrative photographs read as atmospheres behind editorial copy. */
.atmosphere-section{position:relative;isolation:isolate;overflow:hidden;background:var(--ph-ice)}
.atmosphere-section>.container{position:relative;z-index:1}
.atmosphere-section .photo--atmosphere{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.atmosphere-section .photo--atmosphere .photo__frame,.atmosphere-section .photo--atmosphere picture{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:transparent}
.atmosphere-section .photo--atmosphere img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.atmosphere-section .photo--atmosphere .photo__frame::after{content:'';position:absolute;inset:0;z-index:1}
.atmosphere-section .photo--atmosphere .photo__caption{position:absolute;right:var(--gutter);bottom:1.5rem;z-index:2;color:#364C57}
.atmosphere-section--about .photo--atmosphere img{object-position:76% 46%}

/* Phone headings: no automatic hyphenation, sizes tuned so the longest Polish words fit a line at 390 and 320px. */
h1,h2,h3{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
@media(max-width:600px){
  main h2:not(#h){font-size:clamp(2rem,8.4vw,3rem);line-height:1.06;letter-spacing:-.045em}
  .page-head h1,.notfound h1{font-size:clamp(2.35rem,9vw,3.4rem);line-height:1.04;letter-spacing:-.05em;max-width:100%}
  .phase-close h2{font-size:clamp(2.1rem,9vw,3rem)}
}
@media(max-width:360px){
  :root{--gutter:16px}
  main h2:not(#h){font-size:clamp(1.8rem,8.6vw,2.1rem);letter-spacing:-.04em}
  .page-head h1,.notfound h1{font-size:clamp(1.85rem,9vw,2.2rem);letter-spacing:-.035em;line-height:1.06}
  .phase-close h2{font-size:1.9rem}
}

/* Reading measure: text only. Full-bleed sections, backgrounds and artwork keep the whole container width. */
.container.prose.measure{max-width:calc(var(--container) + 2*var(--gutter))}
.container.prose.measure>:is(p,ul,ol,h2,h3,h4){max-width:72ch}
.container.prose.measure>:is(h2,h3,h4){max-width:min(100%,24ch)}.atmosphere-section--about .photo__frame::after{background:linear-gradient(90deg,var(--ph-ice) 0%,#EEF7FAF2 30%,#EEF7FA99 53%,#EEF7FA33 76%,var(--ph-ice) 100%),linear-gradient(180deg,var(--ph-ice) 0%,transparent 19%,transparent 68%,var(--ph-ice) 100%)}
.atmosphere-section--audit .photo--atmosphere img{object-position:76% 52%}
.atmosphere-section--audit .photo__frame::after{background:linear-gradient(90deg,#EEF7FAED 0%,#EEF7FAD9 49%,#EEF7FAAA 77%,var(--ph-ice) 100%),linear-gradient(180deg,var(--ph-ice) 0%,transparent 17%,transparent 68%,var(--ph-ice) 100%)}
@media(max-width:899px){.atmosphere-section .photo--atmosphere{height:min(75vw,430px);bottom:auto}.atmosphere-section .photo--atmosphere .photo__caption{bottom:.75rem}.atmosphere-section--about .photo__frame::after,.atmosphere-section--audit .photo__frame::after{background:linear-gradient(180deg,#EEF7FAAA 0%,#EEF7FA99 22%,#EEF7FAE6 70%,var(--ph-ice) 100%),linear-gradient(90deg,var(--ph-ice) 0%,transparent 22%,transparent 72%,var(--ph-ice) 100%)}}
/* PHASE website motion. The 700ms lower-slab alignment belongs to the logo only.
   All page content is fully visible without JS, scroll-timeline support, or motion consent. */
@media (prefers-reduced-motion: no-preference) {
  html.js.is-home .site-header .phase-symbol-slab {
    animation: phase-slab-align 700ms cubic-bezier(.25,1,.5,1) 80ms both;
  }
  @keyframes phase-slab-align {
    from { transform: translateY(12px); opacity: .25; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Keep the complete wordmark readable throughout the entrance; the
     engineered planes carry the diagonal reveal. */
  html.js.is-home .phase-hero .phase-overline[data-enter] {
    animation: phase-overline-arrive 560ms cubic-bezier(.2,.85,.2,1) 80ms backwards;
  }
  html.js.is-home .phase-hero .phase-wordmark[data-enter] {
    animation: phase-wordmark-uncover 1050ms cubic-bezier(.16,1,.3,1) 90ms backwards;
  }
  html.js.is-home .phase-hero .phase-hero__heading[data-enter] {
    animation: phase-copy-arrive 780ms cubic-bezier(.16,1,.3,1) 340ms backwards;
  }
  html.js.is-home .phase-hero .phase-hero__lower[data-enter] {
    animation: phase-copy-arrive 700ms cubic-bezier(.16,1,.3,1) 540ms backwards;
  }
  html.js.is-home .phase-hero .phase-ribbon {
    animation: phase-plane-uncover 1100ms cubic-bezier(.16,1,.3,1) 240ms backwards;
  }
  @keyframes phase-overline-arrive {
    from { opacity: .45; transform: translateY(14px); }
  }
  @keyframes phase-wordmark-uncover {
    from { opacity: .72; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes phase-copy-arrive {
    from { opacity: .35; transform: translateY(24px); }
  }
  @keyframes phase-plane-uncover {
    from { opacity: .25; clip-path: polygon(0 46%, 100% 36%, 100% 52%, 0 62%); transform: rotate(-20deg) translateX(9%); }
    to { opacity: .9; clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 90%); transform: rotate(-20deg) translateX(0); }
  }

  /* Editorial subpage arrival. Text remains complete as the decorative
     diagonal graphic resolves behind it. */
  html.js:not(.is-home) .page-head h1 {
    animation: phase-page-title 880ms cubic-bezier(.16,1,.3,1) 60ms backwards;
  }
  html.js:not(.is-home) .page-head .lead {
    animation: phase-page-lead 650ms cubic-bezier(.16,1,.3,1) 300ms backwards;
  }
  html.js:not(.is-home) .page-head::after {
    animation: phase-page-plane 1050ms cubic-bezier(.16,1,.3,1) 140ms backwards;
  }
  @keyframes phase-page-title {
    from { opacity: .78; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes phase-page-lead { from { opacity: .5; transform: translateY(18px); } }
  @keyframes phase-page-plane { from { opacity: 0; transform: translate(12%, 16%) rotate(-12deg); } }

  @supports (animation-timeline: view()) {
    /* The art follows scroll in both directions. Compositor transform keeps the
       movement cheap; the background crop remains stable on smaller screens. */
    html.sda.is-home .phase-ribbon__plane {
      animation: phase-plane-scroll linear both;
      animation-timeline: scroll(root);
      animation-range: 0 950px;
    }
    @keyframes phase-plane-scroll {
      from { transform: rotate(20deg) scale(1.1) translateY(-5%); }
      to { transform: rotate(20deg) scale(1.24) translateY(7%); }
    }

    /* Adjacent sections arrive in a reading rhythm; each row has its own
       viewport entry and therefore reverses naturally when scrolling back. */
    html.sda.is-home :is(.phase-intro__grid h2, .phase-showcase__head h2, .phase-offer__head h2, .phase-proof h2, .phase-evidence__head h2, .phase-qa h2, .phase-close h2) {
      animation: phase-section-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    html.sda.is-home .phase-pillar.reveal {
      animation: phase-card-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    html.sda.is-home .phase-pillar:nth-child(2) { animation-range: entry 6% cover 35%; }
    html.sda.is-home .phase-pillar:nth-child(3) { animation-range: entry 12% cover 40%; }
    html.sda.is-home .phase-offer__row {
      animation: phase-row-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    html.sda.is-home .phase-offer__row:nth-child(2) { animation-range: entry 5% cover 29%; }
    html.sda.is-home .phase-offer__row:nth-child(3) { animation-range: entry 10% cover 34%; }
    html.sda.is-home .phase-showcase__visual img {
      animation: phase-symbol-arrive linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 46%;
    }
    html.sda.is-home .phase-showcase__slice--one,
    html.sda.is-home .phase-showcase__slice--two {
      animation: phase-slice-arrive linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    html.sda.is-home .phase-showcase__slice--two { animation-range: entry 20% cover 50%; }

    /* The seven-check motif completes as the visitor reaches the process
       section. The real detailed process page retains its existing step rail. */
    html.sda.is-home .phase-proof__number {
      position: relative;
      animation: phase-count-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    html.sda.is-home .phase-proof__number::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 80%;
      left: -1.5rem;
      top: 10%;
      background: var(--ph-lime);
      transform-origin: center top;
      animation: phase-rail-grow linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 55%;
    }
    @keyframes phase-section-arrive { from { opacity: .45; transform: translateY(46px); } }
    @keyframes phase-card-arrive { from { opacity: .55; transform: translateY(54px); } }
    @keyframes phase-row-arrive { from { opacity: .8; transform: translateY(18px); } }
    @keyframes phase-symbol-arrive { from { opacity: .5; transform: translate3d(-8%, 8%, 0) scale(.88); } }
    @keyframes phase-slice-arrive { from { opacity: .35; translate: 16% 0; } }
    @keyframes phase-count-arrive { from { opacity: .45; transform: translateY(50px) scale(.92); } }
    @keyframes phase-rail-grow { from { transform: scaleY(0); } }

    /* Offer packages are read in sequence. Their top rule draws while the
       complete package and CTA remain source-visible on unsupported browsers. */
    html.sda .phase-package-section .pkg-detail {
      position: relative;
      animation: phase-package-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    html.sda .phase-package-section .pkg-detail::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ph-blue);
      transform-origin: left center;
      animation: phase-package-rule linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 40%;
    }
    @keyframes phase-package-arrive { from { transform: translateY(32px); } }
    @keyframes phase-package-rule { from { transform: scaleX(0); } }

    /* Five step numbers and their connecting lines advance with reading,
       independent of the existing later seven-check rail. */
    html.sda .phase-steps-section .qlist li.reveal {
      animation: phase-step-arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    html.sda .phase-steps-section .qlist li::before {
      content: '';
      position: absolute;
      left: 1.45rem;
      top: 5rem;
      bottom: .6rem;
      width: 2px;
      background: var(--ph-blue);
      transform-origin: center top;
      animation: phase-step-rule linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 66%;
    }
    html.sda .phase-steps-section .qlist__num {
      animation: phase-step-number linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    @keyframes phase-step-arrive { from { opacity: .62; transform: translateY(34px); } }
    @keyframes phase-step-rule { from { transform: scaleY(0); } }
    @keyframes phase-step-number { from { opacity: .42; transform: scale(.78); } }
  }
}

/* Touch and reduced-motion views keep the same final composition without tilt
   or entry timing. This follows the global reduced-motion reset in motion.css. */
@media (prefers-reduced-motion: reduce) {
  .phase-hero *, .phase-hero *::before, .phase-hero *::after,
  .phase-showcase__visual, .phase-showcase__visual * {
    animation: none !important;
    transition: none !important;
  }
}
/* Shared corner system for interactive controls and contained content surfaces.
   Full-width sections, artwork, typography and native checks keep their shapes. */
:root {
  --r-btn: 12px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 20px;
}

/* The PHASE theme previously reset these controls to square corners. */
.btn,
.menu__toggle,
.menu__link,
.menu__cta,
.notice,
.tag,
.quiz__choice,
.strategy-ladder li,
.demo-suggestions button,
.demo-handoff__actions button,
.demo-voice button,
.demo-ask__row button,
.ph-assist__launcher,
.ph-assist__close,
.ph-assist__choices button,
.ph-chat__close,
.ph-chat__suggestions button,
.ph-chat__followup button,
.ph-chat__followup a,
.ph-chat__inputrow button,
.ph-voice__close,
.ph-voice__actions button,
.ph-voice__stop {
  border-radius: 12px;
}

.field .input,
.field .textarea,
.calc__field input,
.calc__field select,
.demo-ask input,
.demo-handoff input,
.demo-handoff select,
.demo-handoff textarea,
.ph-chat__inputrow input {
  border-radius: 13px;
}

.contact-start .field .input,
.lead-form .field .input,
.lead-form .field .textarea,
.brief-form .field .input,
.brief-form .field .textarea {
  border-radius: 13px;
}

/* Content cards and contained examples. Horizontal tables retain scrolling. */
.price-notice,
.sheet,
.protocol,
.table-wrap,
.callout,
.strategy-card,
.calc__result,
.quiz__question,
.quiz__result:not(:empty),
.quiz__note,
.demo-brief,
.demo-panel,
.demo-handoff__form,
.demo-no-send,
.lead-brief,
.ph-chat__panel,
.ph-voice__panel,
.ph-assist__menu,
.ph-chat__noscript,
.demo-chat__entry {
  border-radius: 18px;
}

.calc__formula,
.ph-chat__message,
.ph-chat__followup,
.ph-chat__notice,
.demo-panel__disclosure {
  border-radius: 12px;
}

.demo-panel,
.table-wrap {
  overflow: hidden;
}

.ph-assist__menu {
  overflow-x: hidden;
  overflow-y: auto;
}

.table-wrap {
  overflow-x: auto;
}

/* The offer and FAQ remain readable rows, now on distinct soft cards. */
.pkg,
.phase-offer__row,
.faq__item,
.strategy-table--stack tr {
  border-radius: 18px;
}

.pkgs,
.phase-offer__list,
.faq {
  display: grid;
  gap: 14px;
  border-top: 0;
}

.pkg,
.pkg:first-child,
.pkg:last-child,
.phase-offer__row,
.faq__item {
  border: 1px solid var(--line);
  background: var(--sheet);
}

.pkg {
  padding: clamp(1.2rem, 2.5vw, 2rem);
}

.phase-offer__row {
  padding-inline: clamp(1rem, 2vw, 2rem);
}

.faq__item summary {
  padding: var(--s5);
}

.faq__body {
  max-width: none;
  padding: 0 var(--s5) var(--s5);
}

/* Keep opened menus and panels clipped to the same silhouette. */
.menu__panel {
  border-radius: 18px;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .pkg,
  .phase-offer__row,
  .faq__item,
  .price-notice,
  .sheet,
  .protocol,
  .quiz__question,
  .calc__result {
    border-radius: 16px;
  }
}
/* Pagehouse text chat: a compact, readable conversation surface. Opened from the single assistant launcher (assistant.css). */
.ph-chat{font-family:Archivo,Arial,sans-serif;color:#EEF7FA}
.ph-chat *{box-sizing:border-box}
.ph-chat [hidden]{display:none!important}
.ph-chat__panel{position:fixed;right:clamp(14px,2.5vw,36px);bottom:calc(clamp(14px,2.5vw,32px) + 62px + env(safe-area-inset-bottom));z-index:1001;display:flex;flex-direction:column;width:min(480px,calc(100vw - 24px));height:min(620px,calc(var(--ph-vh,100dvh) - 150px));max-height:calc(var(--ph-vh,100dvh) - 150px);overflow:hidden;border:1px solid #496574;background:#101E27;box-shadow:0 24px 70px #0009}
.ph-chat__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:18px 22px 14px;border-bottom:1px solid #36505B}
.ph-chat__head h2{margin:0;color:#F0F8FA;font-size:1.55rem;line-height:1.1;letter-spacing:-.035em;hyphens:manual}
.ph-chat__close{flex:none;width:44px;height:44px;border:1px solid #728F9C;background:transparent;color:#EEF7FA;font-size:1.55rem;line-height:1;cursor:pointer}
.ph-chat__notice{flex:none;margin:0;padding:10px 22px 11px;border-bottom:1px solid #304A55;color:#BCD2DA;font-size:.76rem;line-height:1.43}
.ph-chat__notice p{margin:0}
.ph-chat__details{margin-top:6px}
.ph-chat__details summary{display:inline-flex;align-items:center;min-height:32px;color:#91E3F8;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ph-chat__details p{max-height:7.5rem;overflow:auto;margin:4px 0 2px}
.ph-chat__notice a,.ph-chat__notice a:visited{color:#91E3F8;text-decoration:underline;text-underline-offset:2px}
.ph-chat__notice a:hover{color:#D8FC3B}
.ph-chat__log{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 22px 8px}
.ph-chat__welcome{max-width:34ch;margin:0;color:#E6F2F5;font-size:1rem;line-height:1.5}
.ph-chat__message{max-width:88%;width:fit-content;margin:0 0 14px;padding:12px 15px;font-size:.94rem;line-height:1.48;overflow-wrap:anywhere;white-space:pre-wrap}
.ph-chat__message--question{margin-left:auto;border:1px solid #4F8493;background:#244655;color:#EEF7FA}
.ph-chat__message--answer{border:1px solid #BBD9E2;background:#E5F1F4;color:#102733}
.ph-chat__message--answer a,.ph-chat__message--answer a:visited{color:#07566F;text-decoration:underline;text-underline-offset:3px}
.ph-chat__suggestions{display:flex;flex:none;flex-wrap:wrap;gap:8px;padding:8px 22px 12px}
.ph-chat__suggestions button{min-height:38px;padding:7px 11px;border:1px solid #7296A4;background:transparent;color:#E6F2F5;font:700 .73rem Archivo,Arial,sans-serif;cursor:pointer}
.ph-chat__suggestions button:hover,.ph-chat__followup button:hover{border-color:#9CE3F6;background:#18333F}
.ph-chat__followup{flex:none;max-height:165px;overflow:auto;padding:12px 22px;border-top:1px solid #304A57;background:#172C36}
.ph-chat__followup p{margin:0 0 10px;color:#EEF7FA;font-size:.85rem;line-height:1.4}
.ph-chat__followup [data-chat-next-options]{display:flex;flex-wrap:wrap;gap:7px}
.ph-chat__followup button{min-height:40px;padding:8px 10px;border:1px solid #6B91A1;background:#10232D;color:#EEF7FA;font:700 .73rem Archivo,Arial,sans-serif;cursor:pointer}
.ph-chat__followup a{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;padding:8px 12px;background:#D8FC3B;color:#10232D;font-size:.76rem;font-weight:750;text-decoration:none}
.ph-chat__form{flex:none;padding:12px 22px 4px}
.ph-chat__form label{display:block;margin-bottom:8px;color:#D4E7ED;font-size:.76rem;font-weight:700}
.ph-chat__inputrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-width:0}
.ph-chat__inputrow input{display:block;width:100%;min-width:0;min-height:50px;border:1px solid #86A7B2;background:#F1F8FA;color:#102733;padding:11px 12px;font:400 1rem Archivo,Arial,sans-serif}
.ph-chat__inputrow input::placeholder{color:#526C77}
.ph-chat__inputrow button{min-width:86px;min-height:50px;padding:9px 14px;border:1px solid #D8FC3B;background:#D8FC3B;color:#10232D;font:750 .77rem Archivo,Arial,sans-serif;cursor:pointer}
.ph-chat__status{flex:none;min-height:1.4em;margin:0;padding:6px 22px 0;color:#C6DBE4;font-size:.72rem}
.ph-chat__foot{display:flex;flex:none;gap:20px;margin:0;padding:6px 22px 17px;font-size:.74rem}
.ph-chat__foot a,.ph-chat__noscript a{color:#91E3F8}
.ph-chat :focus-visible{outline:2px solid #A0E9F8;outline-offset:2px}
.ph-chat__inputrow input:focus-visible{outline:2px solid #0B789A;outline-offset:-4px}
.ph-chat__noscript{max-width:320px;padding:12px;border:1px solid #496574;background:#102733;color:#EEF7FA;font-size:.8rem}
/* Phone: a bottom sheet above the keyboard (--ph-kb / --ph-vh come from assistant-launcher.ts); the launcher steps aside while it is open. */
@media(max-width:600px){
  .ph-chat__panel{right:12px;left:12px;width:auto;bottom:calc(8px + var(--ph-kb,0px) + env(safe-area-inset-bottom));height:min(600px,calc(var(--ph-vh,100dvh) - 16px));max-height:calc(var(--ph-vh,100dvh) - 16px);overflow-y:auto;overscroll-behavior:contain}
  .ph-chat__head{padding:12px 16px 10px}
  .ph-chat__head h2{font-size:1.35rem}
  .ph-chat__notice,.ph-chat__log,.ph-chat__suggestions,.ph-chat__form,.ph-chat__status,.ph-chat__foot{padding-left:16px;padding-right:16px}
  .ph-chat__log{padding-top:14px}
  .ph-chat__form{padding-top:12px;padding-bottom:6px}
  .ph-chat__inputrow button{min-width:78px;padding-inline:10px}
  .ph-chat__foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .ph-chat__followup{padding-inline:16px;max-height:120px}
}
@media(max-width:360px){.ph-chat__notice{font-size:.73rem}.ph-chat__suggestions button{font-size:.68rem;padding-inline:8px}.ph-chat__panel{left:8px;right:8px}}
@media(max-height:560px){
  .ph-chat__panel{top:calc(8px + var(--ph-top,0px));bottom:calc(8px + var(--ph-kb,0px));height:auto;max-height:none;overflow-y:auto}
  .ph-chat__head{position:sticky;top:0;z-index:2;padding:5px 12px;background:#101E27}
  .ph-chat__head h2{font-size:1.1rem}
  .ph-chat__notice{max-height:58px;overflow-y:auto;padding:4px 12px;font-size:.65rem;line-height:1.25}
  .ph-chat__details{margin-top:0}
  .ph-chat__details summary{min-height:24px}
  .ph-chat__suggestions,.ph-chat__foot{display:none}
  .ph-chat__log{flex:1 0 72px;min-height:72px;padding:8px 12px}
  .ph-chat__welcome{font-size:.85rem;line-height:1.3}
  .ph-chat__form{position:sticky;bottom:0;z-index:2;padding:6px 12px;background:#101E27}
  .ph-chat__form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ph-chat__status{min-height:1.2em;padding:0 12px 2px;font-size:.65rem}
  .ph-chat__inputrow input,.ph-chat__inputrow button{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.ph-chat *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Voice pilot panel. Opened only from the single assistant launcher (assistant.css), after the visitor chooses voice; opening a panel closes any other. */
.ph-voice{font-family:Archivo,Arial,sans-serif;color:#EEF7FA}
.ph-voice *{box-sizing:border-box}.ph-voice [hidden]{display:none!important}
.ph-voice__panel{position:fixed;right:clamp(14px,2.5vw,36px);bottom:calc(clamp(14px,2.5vw,32px) + 62px + env(safe-area-inset-bottom));z-index:1001;width:min(380px,calc(100vw - 28px));max-height:calc(var(--ph-vh,100dvh) - 150px);overflow:auto;background:#0B141C;border:1px solid #496574;box-shadow:0 20px 60px #0009;padding:18px 20px}
.ph-voice__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ph-voice__head h2{font-size:1.25rem;line-height:1.1;margin:0;color:#EEF7FA;hyphens:manual}
.ph-voice__close{width:44px;height:44px;background:transparent;border:1px solid #78909D;color:#EEF7FA;font-size:1.65rem;line-height:1;cursor:pointer}
.ph-voice p{margin:12px 0 0;font-size:.84rem;line-height:1.45;color:#D6E8EE}
.ph-voice__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ph-voice__actions button,.ph-voice__stop{min-height:44px;padding:8px 14px;border:1px solid #D8FC3B;background:#D8FC3B;color:#070A10;font:750 .78rem Archivo,Arial,sans-serif;cursor:pointer}
.ph-voice__actions button+button{background:transparent;color:#EEF7FA;border-color:#78909D}
.ph-voice__stop{margin-top:14px}
.ph-voice__status{min-height:1.5em;font-weight:700;color:#EEF7FA!important}
.ph-voice[data-state=listening] .ph-voice__status::before,.ph-voice[data-state=speaking] .ph-voice__status::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:#67D8FF;animation:ph-voice-pulse 1.4s ease-in-out infinite}
.ph-voice[data-state=speaking] .ph-voice__status::before{background:#D8FC3B}
.ph-voice__foot a{color:#86E0FF}
.ph-voice :focus-visible{outline:3px solid #D8FC3B;outline-offset:3px}
@keyframes ph-voice-pulse{50%{opacity:.35}}
@media(max-width:600px){.ph-voice__panel{right:12px;left:12px;width:auto;bottom:calc(8px + var(--ph-kb,0px) + env(safe-area-inset-bottom));max-height:calc(var(--ph-vh,100dvh) - 16px);padding:16px}}
@media(prefers-reduced-motion:reduce){.ph-voice *,.ph-voice *::before{animation:none!important;transition:none!important}}
/* One small floating assistant launcher. It opens a chooser (text or voice); the text and voice panels are in chat.css / voice.css. */
.ph-assist{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:1000;font-family:Archivo,Arial,sans-serif;color:#EEF7FA}
.ph-assist *{box-sizing:border-box}
.ph-assist [hidden]{display:none!important}
.ph-assist__launcher{display:none;align-items:center;justify-content:center;gap:.55rem;min-height:50px;max-width:calc(100vw - 20px);padding:0 15px;border:1px solid #B6D830;background:#D8FC3B;color:#10232D;font:750 .9rem Archivo,Arial,sans-serif;letter-spacing:0;white-space:nowrap;box-shadow:0 10px 26px #0005;cursor:pointer}
.ph-assist--ready .ph-assist__launcher{display:inline-flex;width:auto;min-width:0}
.ph-assist__label{display:inline}
.ph-assist__launcher>span:first-child{color:#10232D;font-size:1.1rem}
.ph-assist__launcher:hover{background:#E8FF80;border-color:#D8FC3B}
.ph-assist__menu{position:absolute;right:0;bottom:calc(100% + 10px);width:min(340px,calc(100vw - 24px));padding:16px 18px 14px;border:1px solid #496574;background:#101E27;box-shadow:0 20px 60px #0009}
.ph-assist__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ph-assist__head h2{margin:0;color:#F0F8FA;font-size:1.2rem;line-height:1.15;letter-spacing:-.02em;font-weight:700;hyphens:manual;overflow-wrap:normal}
.ph-assist__close{flex:none;width:44px;height:44px;border:1px solid #728F9C;background:transparent;color:#EEF7FA;font-size:1.5rem;line-height:1;cursor:pointer}
.ph-assist__hint{margin:8px 0 0;color:#BCD2DA;font-size:.8rem;line-height:1.45}
.ph-assist__choices{display:grid;gap:8px;margin-top:12px}
.ph-assist__choices button{display:grid;gap:2px;min-height:56px;padding:9px 12px;border:1px solid #7296A4;background:transparent;color:#EEF7FA;text-align:left;font:400 .78rem/1.35 Archivo,Arial,sans-serif;cursor:pointer}
.ph-assist__choices button strong{font-size:.95rem;font-weight:750}
.ph-assist__choices button span{color:#C6DBE4}
.ph-assist__choices button:hover{border-color:#D8FC3B;background:#18333F}
.ph-assist__foot{display:flex;gap:20px;margin:10px 0 0;font-size:.76rem}
.ph-assist__foot a,.ph-chat__noscript a{display:inline-flex;align-items:center;min-height:32px;color:#91E3F8}
.ph-assist :focus-visible{outline:3px solid #D8FC3B;outline-offset:3px}
.ph-chat__noscript{max-width:320px;padding:12px;border:1px solid #496574;background:#102733;color:#EEF7FA;font-size:.8rem}
/* Steps aside while a page form field has focus, so it never sits over a field or the keyboard. */
.ph-assist--typing .ph-assist__launcher,.ph-assist--obstructing .ph-assist__launcher{display:none}
@media(min-width:601px){
  /* A reserved dock keeps the launcher available without covering page copy or controls. */
  body:has(.ph-assist--ready){padding-bottom:62px}
  .ph-assist{right:0;left:0;bottom:0;min-height:62px;display:flex;justify-content:flex-end;align-items:center;padding:6px var(--gutter);background:#101E27;border-top:1px solid #496574}
  .ph-assist--ready .ph-assist__launcher{min-height:46px;box-shadow:none}
  .ph-assist__menu{right:var(--gutter);bottom:calc(100% + 8px);max-height:calc(var(--ph-vh,100dvh) - 82px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:600px){
  /* The bottom strip gives the labelled launcher its own reading space. */
  body:has(.ph-assist--ready){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .ph-assist{right:0;left:0;bottom:0;min-height:calc(70px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;align-items:flex-start;padding:9px 12px calc(8px + env(safe-area-inset-bottom));background:#101E27;border-top:1px solid #496574}
  .ph-assist--ready .ph-assist__launcher{width:auto;min-width:0;min-height:44px;box-shadow:none}
  .ph-assist__menu{right:12px;bottom:calc(100% + 8px);width:min(340px,calc(100vw - 24px));max-height:calc(var(--ph-vh,100dvh) - 86px);overflow-y:auto;overscroll-behavior:contain}
  .ph-assist__head{position:sticky;top:-16px;z-index:1;background:#101E27}
  /* an open text/voice panel is a bottom sheet with its own close button: no launcher underneath it */
  .ph-assist--panel{display:none}
}
@media(max-height:560px){.ph-assist__menu{max-height:calc(var(--ph-vh,100dvh) - 92px);bottom:calc(100% + 8px);overflow-y:auto;overscroll-behavior:contain}.ph-assist__head{position:sticky;top:-16px;z-index:1;background:#101E27}}
@media(max-width:600px) and (max-height:560px){.ph-assist__menu{max-height:calc(var(--ph-vh,100dvh) - 86px)}}
@media(max-width:360px){.ph-assist__head h2{font-size:1.1rem}.ph-assist__choices button span{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){.ph-assist *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}