/* ==========================================================================
   PAT Partitions Ltd — site.css
   Design system: plasterboard paper, galvanised steel, signal red.
   Type: Big Shoulders Display (display), Schibsted Grotesk (body), Martian Mono (labels)
   All fonts self hosted in /assets/fonts. No external requests.
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders-display.woff2?v=70aa853b") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted";
  src: url("../fonts/schibsted-grotesk.woff2?v=abd60509") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian";
  src: url("../fonts/martian-mono.woff2?v=b1337618") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --red: #a0122b;
  --red-deep: #7a0d21;
  --red-tint: #f6e4e8;
  --ink: #0e0e0e;
  --charcoal: #2a2a2a;
  --steel: #666666;
  --steel-light: #9a9a9a;
  --galv: #b9bdc1;
  --line: #dcd9d3;
  --line-strong: #c4c0b8;
  --board: #f4f2ee;   /* plasterboard paper facing */
  --board-2: #eae7e1;
  --white: #ffffff;

  /* semantic */
  --bg: var(--board);
  --surface: var(--white);
  --text: var(--ink);
  --text-2: var(--charcoal);
  --text-3: var(--steel);

  /* type */
  --font-display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Schibsted", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Martian", "SFMono-Regular", Menlo, Consolas, monospace;

  /* motion: strong custom curves, UI stays under 300ms */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-pop: 180ms;
  --t-sheet: 320ms;
  --t-reveal: 560ms;

  /* layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 4px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.header :focus-visible, .section--dark :focus-visible, .footer :focus-visible { outline-color: #e8607a; }
::selection { background: var(--red); color: var(--white); }

.skip-link {
  position: absolute; left: 16px; top: -60px;
  padding: 10px 14px; background: var(--ink); color: var(--white);
  font-family: var(--font-mono); font-size: 12px; z-index: 200;
  transition: top var(--t-hover) var(--ease-out);
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   Typography
   Tracking is size specific: negative on display sizes, ~0 on body,
   positive on mono labels.
   -------------------------------------------------------------------------- */
.display, h1 {
  font-family: var(--font-display);
  font-weight: 750;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
  font-variation-settings: "wght" 750;
  color: var(--text);
}
h1 { font-size: clamp(2.9rem, 7.2vw, 6.2rem); letter-spacing: -0.012em; }
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 650;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--text);
  max-width: 24ch;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }

.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.measure { max-width: 64ch; }
.muted { color: var(--text-3); }

.mono, .eyebrow, .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { color: var(--red); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }

.prose p + p { margin-top: 1em; }
.prose h2 { margin-top: 2em; margin-bottom: 0.5em; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.5em; }
.prose ul { margin: 1em 0; padding-left: 0; }
.prose ul li { position: relative; padding-left: 22px; margin: 0.4em 0; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--red); }
.prose a { color: var(--red-deep); display: inline-block; padding-block: 6px; margin-block: -6px; }
.prose > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--dark { background: var(--ink); color: var(--board); --text: var(--board); --text-2: #d8d5cf; --text-3: #a9a6a0; --line: #2c2c2c; --surface: #1c1c1c; --red-on-dark: #e8607a; }
.section--dark .sheet-ref b, .section--dark .eyebrow, .section--dark .service-card__go, .section--dark .tag--red, .section--dark .service-card__icon, .section--dark .badge svg, .section--dark .step__num { color: var(--red-on-dark); }
.section--dark .tag--red { border-color: var(--red-on-dark); }
.section--white { background: var(--white); }
.section--red { background: var(--red); color: var(--white); --text: var(--white); --text-2: #fbe9e9; --text-3: #f3cfd0; --line: rgba(255,255,255,0.25); }

.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lede { margin-top: 2px; }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Sheet reference: drawing title block style numbering used on sections */
.sheet-ref {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
.sheet-ref::after { content: none; }
.sheet-ref b { color: var(--red); font-weight: 600; }

hr.rule { border: 0; height: 1px; background: var(--line); margin: 0; }

/* --------------------------------------------------------------------------
   Buttons — respond on press, scale 0.97, 120ms
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--white);
  --btn-bd: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arrow { transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--red-deep); --btn-bd: var(--red-deep); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }
  .section--dark .btn--ghost:hover { --btn-bg: var(--board); --btn-fg: var(--ink); --btn-bd: var(--board); }
}
.section--dark .btn--ghost { --btn-fg: var(--board); --btn-bd: #4a4a4a; }
.section--red .btn { --btn-bg: var(--white); --btn-fg: var(--red-deep); --btn-bd: var(--white); }
.section--red .btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,0.55); }
@media (hover: hover) and (pointer: fine) { .section--red .btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--red-deep); --btn-bd: var(--white); } }
@media (hover: hover) and (pointer: fine) { .section--red .btn:hover { --btn-bg: var(--board); --btn-bd: var(--board); } }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--text);
  font-size: 0.95rem;
}
.text-link svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }
.text-link span { position: relative; }
.text-link span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover span::after { transform: scaleX(1); }
  .text-link:hover svg { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   Header — translucent material, content scrolls under, scroll edge fade
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(14, 14, 14, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: var(--board);
  --text: var(--board); --text-2: #d8d5cf; --text-3: #a9a6a0;
}
.header::after {
  /* soft edge instead of a hard 1px divider; only visible once content is under it */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0));
  opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.header.is-scrolled::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { .header { background: var(--ink); backdrop-filter: none; } }

.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo svg { height: 44px; width: auto; }
@media (max-width: 480px) { .header .logo img { height: 46px !important; } }

.nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius);
  font-weight: 500; font-size: 0.95rem; text-decoration: none; color: var(--text-2);
  background: transparent; border: 0; cursor: pointer;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.nav__link svg { width: 14px; height: 14px; transition: transform var(--t-pop) var(--ease-out); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--white); background: rgba(255,255,255,0.07); } }
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--red-on-dark, #e8607a);
}
.nav__item { position: relative; }

/* Services dropdown: origin aware, scales from the trigger, 180ms ease-out */
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; box-shadow: 0 16px 40px -12px rgba(31,31,31,0.25), 0 2px 6px rgba(31,31,31,0.06);
  transform-origin: top left;
  opacity: 0; transform: scale(0.96) translateY(-4px); pointer-events: none; visibility: hidden;
  transition: opacity var(--t-pop) var(--ease-out), transform var(--t-pop) var(--ease-out), visibility 0s linear var(--t-pop);
}
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.menu a {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--ink);
  transition: background-color var(--t-hover) ease;
}
.menu a svg { width: 26px; height: 26px; color: var(--red); }
.menu a small { display: block; color: var(--steel); font-size: 0.86rem; margin-top: 1px; }
.menu a strong { font-weight: 600; font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--board); } }
.menu a:focus-visible { background: var(--board); outline-offset: -2px; }
.menu__all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }

.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
.header__actions { display: flex; align-items: center; gap: 10px; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; background: transparent; border: 1.5px solid #3a3a3a;
  border-radius: var(--radius); cursor: pointer; transition: transform var(--t-press) var(--ease-out);
}
.burger:active { transform: scale(0.95); }
.burger span { display: block; height: 2px; background: var(--board); transition: transform var(--t-pop) var(--ease-in-out), opacity var(--t-pop) ease; transform-origin: center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Mobile sheet: enters from the right, exits to the right (spatial consistency) */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 110; background: rgba(31,31,31,0.42);
  opacity: 0; pointer-events: none; transition: opacity var(--t-sheet) ease;
}
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(88vw, 400px); background: var(--board);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t-sheet) var(--ease-drawer), visibility 0s linear var(--t-sheet);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open { overflow: hidden; }
body.menu-open .sheet-scrim { opacity: 1; pointer-events: auto; }
body.menu-open .sheet { transform: none; visibility: visible; transition-delay: 0s, 0s; box-shadow: -20px 0 60px -20px rgba(31,31,31,0.35); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); height: var(--header-h); }
.sheet__close { width: 46px; height: 46px; border: 1.5px solid var(--line-strong); background: transparent; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; transition: transform var(--t-press) var(--ease-out); }
.sheet__close:active { transform: scale(0.95); }
.sheet__close svg { width: 18px; height: 18px; }
.sheet__nav { padding: 8px var(--gutter) 24px; display: flex; flex-direction: column; }
.sheet__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.01em;
  opacity: 0; transform: translateX(12px);
}
.sheet__nav a.sub { font-family: var(--font-body); font-weight: 500; font-size: 1rem; text-transform: none; padding: 12px 0 12px 18px; letter-spacing: 0; }
.sheet__nav a svg { width: 18px; height: 18px; color: var(--red); }
body.menu-open .sheet__nav a { animation: sheetItem 320ms var(--ease-out) forwards; }
body.menu-open .sheet__nav a:nth-child(1) { animation-delay: 40ms; }
body.menu-open .sheet__nav a:nth-child(2) { animation-delay: 70ms; }
body.menu-open .sheet__nav a:nth-child(3) { animation-delay: 100ms; }
body.menu-open .sheet__nav a:nth-child(4) { animation-delay: 130ms; }
body.menu-open .sheet__nav a:nth-child(5) { animation-delay: 160ms; }
body.menu-open .sheet__nav a:nth-child(6) { animation-delay: 190ms; }
body.menu-open .sheet__nav a:nth-child(7) { animation-delay: 220ms; }
body.menu-open .sheet__nav a:nth-child(8) { animation-delay: 250ms; }
body.menu-open .sheet__nav a:nth-child(9) { animation-delay: 280ms; }
@keyframes sheetItem { to { opacity: 1; transform: none; } }
.sheet__foot { margin-top: auto; padding: 20px var(--gutter) 32px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.sheet__foot p { font-size: 1rem; color: var(--text-3); }
.sheet__foot a:not(.btn) { color: var(--text); font-weight: 500; text-decoration: none; display: inline-block; padding-block: 10px; margin-block: -6px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px) clamp(40px, 6vw, 80px); background: var(--ink); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; } }
.hero h1 { margin: 18px 0 20px; max-width: 12ch; }
.hero h1 em { font-style: normal; color: #d8324f; }
.hero .lede { max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__drawing { position: relative; }
.hero__drawing svg { width: 100%; height: auto; }
.hero__note { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* grid backdrop lifted from the logo artwork: fine square grid on ink */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.06) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, transparent 1px 112px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.35));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.35));
}
.hero .container { position: relative; }
.hero__note { color: var(--text-3); }

/* Quick scan metrics */
.metrics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--surface); padding: 26px 24px 24px; display: grid; gap: 8px; align-content: start; }
.metric__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 0.9; text-transform: uppercase; color: var(--text); }
.metric__value small { font-size: 0.55em; color: var(--text); }
.metric h3 { font-size: 1rem; line-height: 1.3; }
.metric p { color: var(--text-3); font-size: 1rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Drawings (inline SVG technical illustrations)
   -------------------------------------------------------------------------- */
.dwg { color: var(--ink); }
.dwg .ln { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.dwg .ln-thin { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.55; vector-effect: non-scaling-stroke; }
.dwg .ln-red { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.dwg .fill-board { fill: var(--board-2); }
.dwg .fill-white { fill: var(--surface); }
.dwg .fill-red { fill: var(--red); }
.dwg .fill-galv { fill: var(--galv); }
.dwg .dim { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.7; vector-effect: non-scaling-stroke; }
.dwg text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; fill: currentColor; }
.dwg text.red { fill: var(--red); font-weight: 600; }
.dwg text.dimtxt { font-size: 10px; opacity: 0.75; }
.section--dark .dwg { color: var(--board); }
.section--dark .dwg .fill-board { fill: #2e2e2e; }
.section--dark .dwg .fill-white { fill: #262626; }
.section--dark .dwg .fill-galv { fill: #55595d; }

/* Draw on reveal: strokes draw once when the figure enters the viewport */
.dwg[data-draw] .ln, .dwg[data-draw] .ln-red, .dwg[data-draw] .dim { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.dwg[data-draw] text, .dwg[data-draw] .fill-board, .dwg[data-draw] .fill-red, .dwg[data-draw] .fill-galv, .dwg[data-draw] .fill-white { opacity: 0; transition: opacity 400ms ease 700ms; }
.dwg[data-draw].is-drawn .ln, .dwg[data-draw].is-drawn .dim { animation: draw 1400ms var(--ease-in-out) forwards; }
.dwg[data-draw].is-drawn .ln-red { animation: draw 1100ms var(--ease-in-out) 400ms forwards; }
.dwg[data-draw].is-drawn text, .dwg[data-draw].is-drawn .fill-board, .dwg[data-draw].is-drawn .fill-red, .dwg[data-draw].is-drawn .fill-galv, .dwg[data-draw].is-drawn .fill-white { opacity: 1; }
.dwg .fill-board, .dwg .fill-white { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dwg[data-draw] .ln, .dwg[data-draw] .ln-red, .dwg[data-draw] .dim { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .dwg[data-draw] text, .dwg[data-draw] .fill-board, .dwg[data-draw] .fill-red, .dwg[data-draw] .fill-galv, .dwg[data-draw] .fill-white { opacity: 1; transition: none; }
}

.figure { display: grid; gap: 12px; }
.figure__frame { background: var(--surface); border: 1px solid var(--line); padding: clamp(16px, 3vw, 32px); position: relative; }
.figure__frame::before, .figure__frame::after {
  /* corner registration marks like a drawing sheet */
  content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--line-strong); border-style: solid; border-width: 0;
}
.figure__frame::before { left: 6px; top: 6px; border-left-width: 1px; border-top-width: 1px; }
.figure__frame::after { right: 6px; bottom: 6px; border-right-width: 1px; border-bottom-width: 1px; }
.figure figcaption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.section--dark .figure__frame { background: #262626; border-color: #3a3a3a; }

/* --------------------------------------------------------------------------
   Cards — services, sectors
   -------------------------------------------------------------------------- */
.service-card {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); padding: 28px 26px 24px;
  text-decoration: none; color: var(--text);
  transition: transform var(--t-hover) var(--ease-out), border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.service-card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(31,31,31,0.35); transform: translateY(-2px); }
  .service-card:hover .service-card__go svg { transform: translateX(4px); }
}
.service-card__icon { width: 52px; height: 52px; color: var(--red); }
.service-card__icon svg { width: 100%; height: 100%; }
.service-card h3 { margin-top: 4px; font-size: 1.25rem; }
.service-card p { color: var(--text-2); font-size: 1rem; margin-top: 10px; }
.service-card__tags { display: block; margin-top: 12px; line-height: 1.5; }
.tag {
  display: inline; font-size: 0.95rem; color: var(--text-3);
}
.tag + .tag::before { content: "\00b7"; margin: 0 6px; color: var(--line-strong); }
.tag--red { color: var(--red-deep); font-weight: 500; }
.footer__accred .tag { display: inline-block; padding: 5px 8px; border: 1px solid #3a3a3a; border-radius: 3px; font-size: 0.85rem; }
.footer__accred .tag + .tag::before { content: none; }
.section--dark .tag { border-color: #4a4a4a; color: var(--text-2); }
.service-card__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--red-deep); }
.service-card__go svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }
.service-card__num { position: absolute; top: 18px; right: 20px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-3); }

/* Sector rows: list with hover accent bar */
.sector-list { border-top: 1px solid var(--line); }
.sector {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line); position: relative;
}
@media (min-width: 800px) { .sector { grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 32px; align-items: center; } }
.sector::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform var(--t-pop) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sector:hover::before { transform: scaleY(1); } }
.sector__icon { width: 56px; height: 56px; color: var(--ink); }
.sector__icon svg { width: 100%; height: 100%; }
.sector h3 { font-size: 1.2rem; }
.sector p { color: var(--text-2); font-size: 1rem; }
@media (max-width: 799px) { .sector p { grid-column: 2; } }
.section--dark .sector__icon { color: var(--board); }

/* Stat / accreditation badges */
.badges { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
@media (min-width: 900px) { .container > .badges { grid-template-columns: repeat(3, 1fr); } }
.badge {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); background: var(--surface);
}
.badge svg { width: 44px; height: 44px; color: var(--red); }
.badge strong { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.badge small { display: block; color: var(--text-3); font-size: 0.86rem; margin-top: 2px; }

/* Manufacturer / system strip */
.systems { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .systems { grid-template-columns: repeat(3, 1fr); } }
.system { background: var(--surface); padding: 24px; display: grid; gap: 6px; }
.system .name { font-weight: 650; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.1; }
.system p { font-size: 1rem; color: var(--text-3); }

/* Process steps */
.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; border-left: 1px solid var(--line); } }
.step { padding: 26px 22px 28px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; counter-increment: step; position: relative; }
@media (min-width: 900px) { .step { padding: 8px 22px 8px 22px; border-bottom: 0; border-right: 1px solid var(--line); } }
.step__num { font-size: 0.9rem; font-weight: 600; color: var(--red-deep); }
.step__num::before { content: "Step " counter(step); }
.step h3 { font-size: 1.15rem; }
.step p { font-size: 1rem; color: var(--text-2); }

/* Spec table for service pages */
.spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec th, .spec td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 600; font-size: 0.95rem; color: var(--text-2); width: 36%; padding-right: 16px; }
.table-wrap { overflow-x: auto; }

/* Split feature block */
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } .split--rev > :first-child { order: 2; } }

/* CTA band */
.cta-band { position: relative; overflow: hidden; }
.cta-band .container { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .cta-band .container { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cta-band h2 { max-width: 22ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band::before { content: none; }

/* Tender desk highlight block */
.tender {
  border: 2px solid var(--red); background: var(--surface); padding: clamp(24px, 4vw, 40px); position: relative;
}
.tender::before { content: ""; position: absolute; left: -2px; top: -2px; width: 22px; height: 22px; background: var(--red); clip-path: polygon(0 0, 100% 0, 0 100%); }
.tender h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.tender ul { display: grid; gap: 12px; margin-top: 22px; }
.tender li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 1rem; }
.tender li svg { width: 20px; height: 20px; color: var(--red); margin-top: 2px; }
.tender__email { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-mono); font-size: clamp(0.85rem, 1.6vw, 1.05rem); letter-spacing: 0.02em; text-decoration: none; padding: 12px 16px; border: 1px solid var(--line-strong); background: var(--board); color: var(--text); transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); max-width: 100%; overflow-wrap: anywhere; }
.tender__email:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .tender__email:hover { border-color: var(--ink); } }
.tender__email svg { width: 18px; height: 18px; color: var(--red); flex: none; }

/* --------------------------------------------------------------------------
   Forms — inline validation, visible labels, 44px+ targets
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field label small { font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31,31,31,0.08); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.field__error { display: none; font-size: 0.82rem; color: var(--red-deep); }
.field.is-invalid .field__error { display: block; }
.field input[type="file"] { padding: 10px 12px; font-size: 0.9rem; }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 0.85rem; padding: 6px 10px; margin-right: 12px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--board); cursor: pointer; }
.form__foot { display: grid; gap: 12px; }
.form__foot p { font-size: 0.88rem; color: var(--text-3); }
.form__status { display: none; padding: 14px 16px; border: 1px solid var(--line-strong); font-size: 0.92rem; }
.form__status.is-error { display: block; border-color: var(--red); color: var(--red-deep); background: var(--red-tint); }
.form__status.is-success { display: block; border-color: #2c7a4b; color: #1f5a37; background: #e8f3ec; }
.checkbox { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 0.9rem; color: var(--text-2); }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   FAQ — native details with animated marker
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none;
  padding: 20px 0; font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); transform: translate(-50%, -50%); transition: transform var(--t-pop) var(--ease-out); }
.faq summary .plus::before { width: 14px; height: 2px; }
.faq summary .plus::after { width: 2px; height: 14px; }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq .faq__body { padding: 0 0 22px; color: var(--text-2); max-width: 70ch; font-size: 1rem; }
.faq .faq__body p + p { margin-top: 0.8em; }

/* --------------------------------------------------------------------------
   Page hero (inner pages) and breadcrumbs
   -------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(36px, 5vw, 72px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 16ch; margin-top: 12px; font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.page-hero .lede { margin-top: 20px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--text-3); }
.crumbs a { text-decoration: none; color: var(--text-3); display: inline-block; padding-block: 10px; margin-block: -10px; }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.crumbs li[aria-current] { color: var(--text-2); }

/* Sticky in page nav for service hub */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.subnav a { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-size: 0.88rem; font-weight: 500; color: var(--text-2); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.subnav a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } }

/* Contact info card */
.contact-card { display: grid; gap: 22px; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); }
.contact-card dl { display: grid; gap: 16px; }
.contact-card dt { font-size: 0.9rem; font-weight: 600; color: var(--text-3); margin-bottom: 3px; }
.contact-card dd { margin: 0; font-size: 1rem; }
.contact-card dd a { text-decoration: none; font-weight: 500; display: inline-block; padding-block: 8px; margin-block: -8px; }
.contact-card dd a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--board); padding-block: clamp(48px, 6vw, 80px) 32px; --line: #2c2c2c; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; } }
.footer .logo svg { height: 40px; }
.footer__about { max-width: 36ch; color: #b7b4ae; font-size: 1rem; margin-top: 18px; }
.footer .footer__h { font-weight: 600; font-size: 0.95rem; color: #ffffff; margin-bottom: 14px; }
.footer ul { display: grid; gap: 10px; }
.footer a { color: var(--board); text-decoration: none; font-size: 1rem; }
.footer ul a, .footer address a, .footer__bar a { display: inline-block; padding-block: 8px; margin-block: -8px; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--white); text-decoration: underline; } }
.footer address { font-style: normal; color: #b7b4ae; font-size: 1rem; line-height: 1.8; }
.footer address a { color: var(--board); }
.footer__bar { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 0.82rem; color: #8d8a84; }
.footer__bar a { color: #b7b4ae; font-size: 0.82rem; }
.footer__bar ul { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__credit { color: #8d8a84; font-size: 0.74rem; }
.footer__credit a { color: #8d8a84; font-size: 0.74rem; }
.footer__accred { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer__accred .tag { color: #d8d5cf; }

/* --------------------------------------------------------------------------
   Scroll reveal: opacity + 12px lift, staggered, never blocks interaction
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-group] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
[data-reveal-group].is-in > * { opacity: 1; transform: none; }
[data-reveal-group].is-in > :nth-child(2) { transition-delay: 50ms; }
[data-reveal-group].is-in > :nth-child(3) { transition-delay: 100ms; }
[data-reveal-group].is-in > :nth-child(4) { transition-delay: 150ms; }
[data-reveal-group].is-in > :nth-child(5) { transition-delay: 200ms; }
[data-reveal-group].is-in > :nth-child(6) { transition-delay: 250ms; }
.no-js [data-reveal], .no-js [data-reveal-group] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { transform: none; transition: opacity 200ms ease; }
  .btn, .service-card, .burger, .sheet__close, .subnav a { transition-property: background-color, border-color, color; }
  .btn:active, .service-card:active { transform: none; }
  .sheet { transition: opacity 200ms ease; transform: none; opacity: 0; pointer-events: none; }
  body.menu-open .sheet { opacity: 1; pointer-events: auto; }
  .sheet__nav a { opacity: 1; transform: none; animation: none !important; }
  .menu { transition: opacity 120ms ease; transform: none; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.stack > * + * { margin-top: 16px; }
.flow > * + * { margin-top: 1em; }
.icon { width: 24px; height: 24px; }
.center { text-align: center; }
.list-check { display: grid; gap: 10px; }
.list-check li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.list-check li svg { width: 20px; height: 20px; color: var(--red); margin-top: 3px; }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.notfound .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 12rem); line-height: 0.85; color: var(--text); letter-spacing: -0.02em; }
.notfound p { margin-top: 18px; color: var(--text-2); }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

@media print {
  .header, .footer, .sheet, .sheet-scrim, .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Credentials table (replaces the badge grid)
   -------------------------------------------------------------------------- */
.cred { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 1rem; }
.cred th, .cred td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cred thead th { font-size: 0.9rem; font-weight: 600; color: var(--text-3); background: var(--board); }
.cred tbody th { font-weight: 600; white-space: nowrap; }
.cred tbody tr:last-child th, .cred tbody tr:last-child td { border-bottom: 0; }
.cred td.status { color: var(--red-deep); font-weight: 500; white-space: nowrap; }
.cred td.status svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 6px; }
@media (max-width: 700px) {
  .cred thead { display: none; }
  .cred tr { display: grid; grid-template-columns: 1fr; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .cred th, .cred td { padding: 2px 0; border: 0; white-space: normal; }
  .cred tbody th { font-size: 1.05rem; }
  .cred td.status { white-space: normal; }
}
.list-check--2 { grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .list-check--2 { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.list-check strong { font-weight: 600; }
.list-check--2 li { font-size: 1rem; line-height: 1.5; }
.section-head p.eyebrow { margin-bottom: -4px; }

/* --------------------------------------------------------------------------
   Tender modal (native dialog). Enter and exit on the same path.
   Desktop: fade + scale from 0.96. Mobile: bottom sheet.
   -------------------------------------------------------------------------- */
.modal {
  border: 0; padding: 0; margin: auto; background: transparent; color: var(--text);
  width: min(100% - 32px, 760px); max-height: min(92dvh, 900px);
  opacity: 0; transform: translateY(8px) scale(0.96);
  transition: opacity var(--t-pop) var(--ease-out), transform var(--t-pop) var(--ease-out), overlay var(--t-pop) allow-discrete, display var(--t-pop) allow-discrete;
}
.modal[open] { opacity: 1; transform: none; }
@starting-style { .modal[open] { opacity: 0; transform: translateY(8px) scale(0.96); } }
.modal::backdrop { background-color: rgba(31,31,31,0.5); transition: background-color var(--t-sheet) ease, overlay var(--t-sheet) allow-discrete, display var(--t-sheet) allow-discrete; }
@starting-style { .modal[open]::backdrop { background-color: rgba(31,31,31,0); } }
.modal__panel { background: var(--board); border: 1px solid var(--line); padding: clamp(22px, 4vw, 36px); max-height: inherit; overflow-y: auto; overscroll-behavior: contain; border-radius: 6px; }
.modal__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-bottom: 22px; }
.modal__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 6px; }
.modal__sub { font-size: 0.97rem; margin-top: 8px; max-width: 56ch; }
.modal__sub a { color: var(--text); }
.modal__close { width: 44px; height: 44px; flex: none; border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; transition: transform var(--t-press) var(--ease-out), border-color var(--t-hover) ease; }
.modal__close svg { width: 18px; height: 18px; }
.modal__close:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .modal__close:hover { border-color: var(--ink); } }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .modal { width: 100%; max-height: 94dvh; margin: auto 0 0; transform: translateY(24px); }
  .modal[open] { transform: none; }
  @starting-style { .modal[open] { transform: translateY(24px); opacity: 0; } }
  .modal__panel { border-radius: 10px 10px 0 0; border-bottom: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal[open] { transform: none; transition: opacity 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete; }
  @starting-style { .modal[open] { transform: none; } }
}