/* Xanthos CSS · generated from the site design system. Edit it in Design system, not here. */
@layer reset, tokens, base, layout, utilities, design-components, components;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
:where(img, picture, video, canvas, svg) { display: block; max-inline-size: 100%; block-size: auto; }
:where(input, button, textarea, select) { font: inherit; }
:where(input, select, textarea) { max-inline-size: 100%; }
:where(html) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { :where(html) { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
}
@layer tokens {
:root {
  color-scheme: light;
  /* Colours: base value, generated OKLCH shades, readable text colour, transparencies */
  --primary: #1e6b5c;
  --primary-ultra-light: oklch(0.97 0.014 177);
  --primary-light: oklch(0.92 0.031 177);
  --primary-semi-light: oklch(0.8 0.058 177);
  --primary-hover: oklch(0.547 0.077 177);
  --primary-semi-dark: oklch(0.45 0.07 177);
  --primary-dark: oklch(0.32 0.058 177);
  --primary-ultra-dark: oklch(0.2 0.039 177);
  --on-primary: #ffffff;
  --on-primary-ultra-light: #111111;
  --on-primary-light: #111111;
  --on-primary-semi-light: #111111;
  --on-primary-semi-dark: #ffffff;
  --on-primary-dark: #ffffff;
  --on-primary-ultra-dark: #ffffff;
  --primary-trans-10: color-mix(in oklch, var(--primary) 10%, transparent);
  --primary-trans-20: color-mix(in oklch, var(--primary) 20%, transparent);
  --primary-trans-40: color-mix(in oklch, var(--primary) 40%, transparent);
  --primary-trans-60: color-mix(in oklch, var(--primary) 60%, transparent);
  --primary-trans-80: color-mix(in oklch, var(--primary) 80%, transparent);
  --secondary: #4f46e5;
  --secondary-ultra-light: oklch(0.97 0.041 277);
  --secondary-light: oklch(0.92 0.092 277);
  --secondary-semi-light: oklch(0.8 0.173 277);
  --secondary-hover: oklch(0.441 0.23 277);
  --secondary-semi-dark: oklch(0.45 0.207 277);
  --secondary-dark: oklch(0.32 0.173 277);
  --secondary-ultra-dark: oklch(0.2 0.115 277);
  --on-secondary: #ffffff;
  --on-secondary-ultra-light: #111111;
  --on-secondary-light: #111111;
  --on-secondary-semi-light: #111111;
  --on-secondary-semi-dark: #ffffff;
  --on-secondary-dark: #ffffff;
  --on-secondary-ultra-dark: #ffffff;
  --secondary-trans-10: color-mix(in oklch, var(--secondary) 10%, transparent);
  --secondary-trans-20: color-mix(in oklch, var(--secondary) 20%, transparent);
  --secondary-trans-40: color-mix(in oklch, var(--secondary) 40%, transparent);
  --secondary-trans-60: color-mix(in oklch, var(--secondary) 60%, transparent);
  --secondary-trans-80: color-mix(in oklch, var(--secondary) 80%, transparent);
  --tertiary: #c2410c;
  --tertiary-ultra-light: oklch(0.97 0.031 38.4);
  --tertiary-light: oklch(0.92 0.07 38.4);
  --tertiary-semi-light: oklch(0.8 0.13 38.4);
  --tertiary-hover: oklch(0.483 0.174 38.4);
  --tertiary-semi-dark: oklch(0.45 0.156 38.4);
  --tertiary-dark: oklch(0.32 0.13 38.4);
  --tertiary-ultra-dark: oklch(0.2 0.087 38.4);
  --on-tertiary: #ffffff;
  --on-tertiary-ultra-light: #111111;
  --on-tertiary-light: #111111;
  --on-tertiary-semi-light: #111111;
  --on-tertiary-semi-dark: #ffffff;
  --on-tertiary-dark: #ffffff;
  --on-tertiary-ultra-dark: #ffffff;
  --tertiary-trans-10: color-mix(in oklch, var(--tertiary) 10%, transparent);
  --tertiary-trans-20: color-mix(in oklch, var(--tertiary) 20%, transparent);
  --tertiary-trans-40: color-mix(in oklch, var(--tertiary) 40%, transparent);
  --tertiary-trans-60: color-mix(in oklch, var(--tertiary) 60%, transparent);
  --tertiary-trans-80: color-mix(in oklch, var(--tertiary) 80%, transparent);
  --accent: #d4a017;
  --accent-ultra-light: oklch(0.97 0.026 84.3);
  --accent-light: oklch(0.92 0.058 84.3);
  --accent-semi-light: oklch(0.8 0.11 84.3);
  --accent-hover: oklch(0.665 0.146 84.3);
  --accent-semi-dark: oklch(0.45 0.132 84.3);
  --accent-dark: oklch(0.32 0.11 84.3);
  --accent-ultra-dark: oklch(0.2 0.073 84.3);
  --on-accent: #111111;
  --on-accent-ultra-light: #111111;
  --on-accent-light: #111111;
  --on-accent-semi-light: #111111;
  --on-accent-semi-dark: #ffffff;
  --on-accent-dark: #ffffff;
  --on-accent-ultra-dark: #ffffff;
  --accent-trans-10: color-mix(in oklch, var(--accent) 10%, transparent);
  --accent-trans-20: color-mix(in oklch, var(--accent) 20%, transparent);
  --accent-trans-40: color-mix(in oklch, var(--accent) 40%, transparent);
  --accent-trans-60: color-mix(in oklch, var(--accent) 60%, transparent);
  --accent-trans-80: color-mix(in oklch, var(--accent) 80%, transparent);
  --base: #78716c;
  --base-ultra-light: oklch(0.97 0.002 58.1);
  --base-light: oklch(0.92 0.005 58.1);
  --base-semi-light: oklch(0.8 0.009 58.1);
  --base-hover: oklch(0.483 0.012 58.1);
  --base-semi-dark: oklch(0.45 0.01 58.1);
  --base-dark: oklch(0.32 0.009 58.1);
  --base-ultra-dark: oklch(0.2 0.006 58.1);
  --on-base: #ffffff;
  --on-base-ultra-light: #111111;
  --on-base-light: #111111;
  --on-base-semi-light: #111111;
  --on-base-semi-dark: #ffffff;
  --on-base-dark: #ffffff;
  --on-base-ultra-dark: #ffffff;
  --base-trans-10: color-mix(in oklch, var(--base) 10%, transparent);
  --base-trans-20: color-mix(in oklch, var(--base) 20%, transparent);
  --base-trans-40: color-mix(in oklch, var(--base) 40%, transparent);
  --base-trans-60: color-mix(in oklch, var(--base) 60%, transparent);
  --base-trans-80: color-mix(in oklch, var(--base) 80%, transparent);
  --neutral: #1c1917;
  --neutral-ultra-light: oklch(0.97 0.001 56);
  --neutral-light: oklch(0.92 0.002 56);
  --neutral-semi-light: oklch(0.8 0.005 56);
  --neutral-hover: oklch(0.286 0.006 56);
  --neutral-semi-dark: oklch(0.45 0.006 56);
  --neutral-dark: oklch(0.32 0.005 56);
  --neutral-ultra-dark: oklch(0.2 0.003 56);
  --on-neutral: #ffffff;
  --on-neutral-ultra-light: #111111;
  --on-neutral-light: #111111;
  --on-neutral-semi-light: #111111;
  --on-neutral-semi-dark: #ffffff;
  --on-neutral-dark: #ffffff;
  --on-neutral-ultra-dark: #ffffff;
  --neutral-trans-10: color-mix(in oklch, var(--neutral) 10%, transparent);
  --neutral-trans-20: color-mix(in oklch, var(--neutral) 20%, transparent);
  --neutral-trans-40: color-mix(in oklch, var(--neutral) 40%, transparent);
  --neutral-trans-60: color-mix(in oklch, var(--neutral) 60%, transparent);
  --neutral-trans-80: color-mix(in oklch, var(--neutral) 80%, transparent);
  --success: #15803d;
  --success-ultra-light: oklch(0.97 0.025 150.1);
  --success-light: oklch(0.92 0.055 150.1);
  --success-semi-light: oklch(0.8 0.103 150.1);
  --success-hover: oklch(0.457 0.137 150.1);
  --success-semi-dark: oklch(0.45 0.123 150.1);
  --success-dark: oklch(0.32 0.103 150.1);
  --success-ultra-dark: oklch(0.2 0.069 150.1);
  --on-success: #ffffff;
  --on-success-ultra-light: #111111;
  --on-success-light: #111111;
  --on-success-semi-light: #111111;
  --on-success-semi-dark: #ffffff;
  --on-success-dark: #ffffff;
  --on-success-ultra-dark: #ffffff;
  --success-trans-10: color-mix(in oklch, var(--success) 10%, transparent);
  --success-trans-20: color-mix(in oklch, var(--success) 20%, transparent);
  --success-trans-40: color-mix(in oklch, var(--success) 40%, transparent);
  --success-trans-60: color-mix(in oklch, var(--success) 60%, transparent);
  --success-trans-80: color-mix(in oklch, var(--success) 80%, transparent);
  --warning: #b45309;
  --warning-ultra-light: oklch(0.97 0.026 49);
  --warning-light: oklch(0.92 0.058 49);
  --warning-semi-light: oklch(0.8 0.109 49);
  --warning-hover: oklch(0.485 0.146 49);
  --warning-semi-dark: oklch(0.45 0.131 49);
  --warning-dark: oklch(0.32 0.109 49);
  --warning-ultra-dark: oklch(0.2 0.073 49);
  --on-warning: #ffffff;
  --on-warning-ultra-light: #111111;
  --on-warning-light: #111111;
  --on-warning-semi-light: #111111;
  --on-warning-semi-dark: #ffffff;
  --on-warning-dark: #ffffff;
  --on-warning-ultra-dark: #ffffff;
  --warning-trans-10: color-mix(in oklch, var(--warning) 10%, transparent);
  --warning-trans-20: color-mix(in oklch, var(--warning) 20%, transparent);
  --warning-trans-40: color-mix(in oklch, var(--warning) 40%, transparent);
  --warning-trans-60: color-mix(in oklch, var(--warning) 60%, transparent);
  --warning-trans-80: color-mix(in oklch, var(--warning) 80%, transparent);
  --info: #0369a1;
  --info-ultra-light: oklch(0.97 0.021 242.7);
  --info-light: oklch(0.92 0.048 242.7);
  --info-semi-light: oklch(0.8 0.089 242.7);
  --info-hover: oklch(0.57 0.119 242.7);
  --info-semi-dark: oklch(0.45 0.107 242.7);
  --info-dark: oklch(0.32 0.089 242.7);
  --info-ultra-dark: oklch(0.2 0.06 242.7);
  --on-info: #ffffff;
  --on-info-ultra-light: #111111;
  --on-info-light: #111111;
  --on-info-semi-light: #111111;
  --on-info-semi-dark: #ffffff;
  --on-info-dark: #ffffff;
  --on-info-ultra-dark: #ffffff;
  --info-trans-10: color-mix(in oklch, var(--info) 10%, transparent);
  --info-trans-20: color-mix(in oklch, var(--info) 20%, transparent);
  --info-trans-40: color-mix(in oklch, var(--info) 40%, transparent);
  --info-trans-60: color-mix(in oklch, var(--info) 60%, transparent);
  --info-trans-80: color-mix(in oklch, var(--info) 80%, transparent);
  --danger: #b91c1c;
  --danger-ultra-light: oklch(0.97 0.034 27.5);
  --danger-light: oklch(0.92 0.076 27.5);
  --danger-semi-light: oklch(0.8 0.143 27.5);
  --danger-hover: oklch(0.435 0.19 27.5);
  --danger-semi-dark: oklch(0.45 0.171 27.5);
  --danger-dark: oklch(0.32 0.143 27.5);
  --danger-ultra-dark: oklch(0.2 0.095 27.5);
  --on-danger: #ffffff;
  --on-danger-ultra-light: #111111;
  --on-danger-light: #111111;
  --on-danger-semi-light: #111111;
  --on-danger-semi-dark: #ffffff;
  --on-danger-dark: #ffffff;
  --on-danger-ultra-dark: #ffffff;
  --danger-trans-10: color-mix(in oklch, var(--danger) 10%, transparent);
  --danger-trans-20: color-mix(in oklch, var(--danger) 20%, transparent);
  --danger-trans-40: color-mix(in oklch, var(--danger) 40%, transparent);
  --danger-trans-60: color-mix(in oklch, var(--danger) 60%, transparent);
  --danger-trans-80: color-mix(in oklch, var(--danger) 80%, transparent);
  /* Colour roles follow the scheme; .scheme--light and .scheme--dark switch any area */
  --bg: light-dark(#ffffff, var(--neutral-ultra-dark));
  --bg-alt: light-dark(var(--base-ultra-light), var(--neutral-dark));
  --text: light-dark(var(--neutral), var(--base-ultra-light));
  --text-muted: light-dark(var(--base-semi-dark), var(--base-semi-light));
  --heading-color: light-dark(var(--neutral), var(--base-ultra-light));
  --link: light-dark(var(--primary), var(--primary-semi-light));
  --link-hover: light-dark(var(--primary-hover), var(--primary-light));
  --border: light-dark(var(--base-light), var(--neutral-semi-dark));
  --focus: light-dark(var(--primary-semi-light), var(--primary-semi-light));
  --focus-color: var(--focus);
  /* Typography */
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  --text-xs: clamp(0.6944rem, 0.0478vw + 0.6837rem, 0.72rem);
  --text-s: clamp(0.8333rem, 0.1246vw + 0.8053rem, 0.9rem);
  --text-m: clamp(1rem, 0.2336vw + 0.9474rem, 1.125rem);
  --text-l: clamp(1.2rem, 0.3855vw + 1.1133rem, 1.4063rem);
  --text-xl: clamp(1.44rem, 0.594vw + 1.3063rem, 1.7578rem);
  --text-xxl: clamp(1.728rem, 0.8771vw + 1.5306rem, 2.1973rem);
  --h1: clamp(2.4883rem, 4.1991vw + 1.5435rem, 4.7348rem);
  --h2: clamp(2.0736rem, 2.7634vw + 1.4518rem, 3.552rem);
  --h3: clamp(1.728rem, 1.7508vw + 1.3341rem, 2.6647rem);
  --h4: clamp(1.44rem, 1.0449vw + 1.2049rem, 1.999rem);
  --h5: clamp(1.2rem, 0.56vw + 1.074rem, 1.4996rem);
  --h6: clamp(1rem, 0.2336vw + 0.9474rem, 1.125rem);
  --text-line-height: 1.6;
  --heading-line-height: 1.15;
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  /* Spacing and layout */
  --space-xs: clamp(0.4444rem, 0.4154vw + 0.351rem, 0.6667rem);
  --space-s: clamp(0.6667rem, 0.6231vw + 0.5265rem, 1rem);
  --space-m: clamp(1rem, 0.9346vw + 0.7897rem, 1.5rem);
  --space-l: clamp(1.5rem, 1.4019vw + 1.1846rem, 2.25rem);
  --space-xl: clamp(2.25rem, 2.1028vw + 1.7769rem, 3.375rem);
  --space-xxl: clamp(3.375rem, 3.1542vw + 2.6653rem, 5.0625rem);
  --section-space-xs: clamp(1.7857rem, 1.6466vw + 1.4152rem, 2.6667rem);
  --section-space-s: clamp(2.5rem, 2.8037vw + 1.8692rem, 4rem);
  --section-space-m: clamp(3.5rem, 4.6729vw + 2.4486rem, 6rem);
  --section-space-l: clamp(4.9rem, 7.6636vw + 3.1757rem, 9rem);
  --section-space-xl: clamp(6.86rem, 12.4112vw + 4.0675rem, 13.5rem);
  --section-space-xxl: clamp(9.604rem, 19.8991vw + 5.1267rem, 20.25rem);
  --content-width: 76rem;
  --gutter: clamp(1rem, 2.8037vw + 0.3692rem, 2.5rem);
  --content-width-safe: min(var(--content-width), 100% - var(--gutter) * 2);
  --container-gap: var(--space-xl);
  --content-gap: var(--space-m);
  --grid-gap: var(--space-l);
  /* Grid templates: use as grid-template-columns: var(--grid-3) */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  /* Shape and depth */
  --radius-xs: 0.125rem;
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999vw;
  --radius: var(--radius-m);
  --shadow-s: 0 1px 2px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.06);
  --shadow-m: 0 4px 12px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.06);
  --shadow-l: 0 16px 40px oklch(0 0 0 / 0.12), 0 4px 12px oklch(0 0 0 / 0.06);
  --box-shadow-1: var(--shadow-s);
  --box-shadow-2: var(--shadow-m);
  --box-shadow-3: var(--shadow-l);
  /* Buttons: override any --btn-* variable on a .btn--{name} class to make your own button */
  --btn-padding-block: 0.75em;
  --btn-padding-inline: 1.5em;
  --btn-min-width: 0;
  --btn-radius: var(--radius-m);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-font-size: var(--text-m);
  --btn-font-weight: 600;
  --btn-line-height: 1.2;
  --btn-letter-spacing: normal;
  --btn-text-transform: none;
  --btn-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* Aliases for sites built before the design system */
  --surface: var(--bg);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --space-2xl: var(--space-xxl);
  --text-base: var(--text-m);
  --text-2xl: var(--h2);
  --text-3xl: var(--h1);
  --btn-weight: var(--btn-font-weight);
}
}
@layer base {
:where(html) {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  color: var(--text);
  background: var(--bg);
}
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-color);
  text-wrap: balance;
}
:where(h1, .h1) { font-size: var(--h1); }
:where(h2, .h2) { font-size: var(--h2); }
:where(h3, .h3) { font-size: var(--h3); }
:where(h4, .h4) { font-size: var(--h4); }
:where(h5, .h5) { font-size: var(--h5); }
:where(h6, .h6) { font-size: var(--h6); }
:where(p, li, figcaption, blockquote) {
  text-wrap: pretty;
}
:where(a) {
  color: var(--link);
  text-underline-offset: 0.2em;
}
:where(a:hover) {
  color: var(--link-hover);
}
:where(code, kbd, pre, samp) {
  font-family: var(--font-mono);
}
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}
::selection {
  background: var(--primary-trans-20);
}
}
@layer layout {
/* Sections that are not inside another section get section spacing automatically */
:where(section:not(section section)) { padding-block: var(--section-space-m); }
.section--xs { padding-block: var(--section-space-xs); }
.section--s { padding-block: var(--section-space-s); }
.section--m { padding-block: var(--section-space-m); }
.section--l { padding-block: var(--section-space-l); }
.section--xl { padding-block: var(--section-space-xl); }
.section--xxl { padding-block: var(--section-space-xxl); }
.section { padding-block: var(--section-space-m); }
/* Content width: .container and .content-width--safe keep the gutter, .content-width does not */
.container, .content-width--safe { inline-size: var(--content-width-safe); margin-inline: auto; }
.content-width { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; }
/* Content grid: children sit in the content column; .content--feature and .content--full break out */
.content-grid {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [feature-start] minmax(0, var(--space-xxl)) [content-start] min(100% - var(--gutter) * 2, var(--content-width)) [content-end] minmax(0, var(--space-xxl)) [feature-end] minmax(var(--gutter), 1fr) [full-end];
}
.content-grid > * { grid-column: content; }
.content-grid > .content--feature { grid-column: feature; }
.content-grid > .content--full { grid-column: full; }
/* Grids: .grid--3 is three columns; add .grid--m-1 to stack below 768px. .grid--auto-3 wraps on its own. */
:where([class^="grid--"], [class*=" grid--"]) { display: grid; gap: var(--grid-gap); }
.grid--1 { grid-template-columns: var(--grid-1); }
.grid--2 { grid-template-columns: var(--grid-2); }
.grid--3 { grid-template-columns: var(--grid-3); }
.grid--4 { grid-template-columns: var(--grid-4); }
.grid--5 { grid-template-columns: var(--grid-5); }
.grid--6 { grid-template-columns: var(--grid-6); }
.grid--7 { grid-template-columns: var(--grid-7); }
.grid--8 { grid-template-columns: var(--grid-8); }
.grid--9 { grid-template-columns: var(--grid-9); }
.grid--10 { grid-template-columns: var(--grid-10); }
.grid--11 { grid-template-columns: var(--grid-11); }
.grid--12 { grid-template-columns: var(--grid-12); }
.grid--1-2 { grid-template-columns: var(--grid-1-2); }
.grid--2-1 { grid-template-columns: var(--grid-2-1); }
.grid--1-3 { grid-template-columns: var(--grid-1-3); }
.grid--3-1 { grid-template-columns: var(--grid-3-1); }
.grid--2-3 { grid-template-columns: var(--grid-2-3); }
.grid--3-2 { grid-template-columns: var(--grid-3-2); }
.grid--auto-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 28rem), (100% - 1 * var(--grid-gap)) / 2)), 1fr)); }
.grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 18.667rem), (100% - 2 * var(--grid-gap)) / 3)), 1fr)); }
.grid--auto-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 14rem), (100% - 3 * var(--grid-gap)) / 4)), 1fr)); }
.grid--auto-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 11.2rem), (100% - 4 * var(--grid-gap)) / 5)), 1fr)); }
.grid--auto-6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 9.333rem), (100% - 5 * var(--grid-gap)) / 6)), 1fr)); }
.grid--auto-7 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 8rem), (100% - 6 * var(--grid-gap)) / 7)), 1fr)); }
.grid--auto-8 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 7rem), (100% - 7 * var(--grid-gap)) / 8)), 1fr)); }
.grid--auto-9 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 6.222rem), (100% - 8 * var(--grid-gap)) / 9)), 1fr)); }
.grid--auto-10 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 5.6rem), (100% - 9 * var(--grid-gap)) / 10)), 1fr)); }
.grid--auto-11 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 5.091rem), (100% - 10 * var(--grid-gap)) / 11)), 1fr)); }
.grid--auto-12 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(min(14rem, 4.667rem), (100% - 11 * var(--grid-gap)) / 12)), 1fr)); }
@media (width < 992px) { .grid--l-1 { grid-template-columns: var(--grid-1); } .grid--l-2 { grid-template-columns: var(--grid-2); } .grid--l-3 { grid-template-columns: var(--grid-3); } .grid--l-4 { grid-template-columns: var(--grid-4); } .grid--l-5 { grid-template-columns: var(--grid-5); } .grid--l-6 { grid-template-columns: var(--grid-6); } }
@media (width < 768px) { .grid--m-1 { grid-template-columns: var(--grid-1); } .grid--m-2 { grid-template-columns: var(--grid-2); } .grid--m-3 { grid-template-columns: var(--grid-3); } .grid--m-4 { grid-template-columns: var(--grid-4); } .grid--m-5 { grid-template-columns: var(--grid-5); } .grid--m-6 { grid-template-columns: var(--grid-6); } }
@media (width < 480px) { .grid--s-1 { grid-template-columns: var(--grid-1); } .grid--s-2 { grid-template-columns: var(--grid-2); } .grid--s-3 { grid-template-columns: var(--grid-3); } .grid--s-4 { grid-template-columns: var(--grid-4); } .grid--s-5 { grid-template-columns: var(--grid-5); } .grid--s-6 { grid-template-columns: var(--grid-6); } }
@media (width < 768px) { .grid--1-md { grid-template-columns: var(--grid-1); } .grid--2-md { grid-template-columns: var(--grid-2); } .grid--3-md { grid-template-columns: var(--grid-3); } }
@media (width < 480px) { .grid--1-sm { grid-template-columns: var(--grid-1); } .grid--2-sm { grid-template-columns: var(--grid-2); } }
/* Smart spacing: consistent rhythm between siblings */
:where(.smart-spacing, .flow) > * + * { margin-block-start: var(--flow-spacing, var(--flow-space, var(--space-m))); }
:where(.smart-spacing, .flow) > :where(h2, h3, h4) { --flow-spacing: var(--space-l); }
.container-gap { gap: var(--container-gap); } .content-gap { gap: var(--content-gap); } .grid-gap { gap: var(--grid-gap); }
.gap--xs { gap: var(--space-xs); } .stack--xs > * + * { margin-block-start: var(--space-xs); } .pad--xs { padding: var(--space-xs); }
.gap--s { gap: var(--space-s); } .stack--s > * + * { margin-block-start: var(--space-s); } .pad--s { padding: var(--space-s); }
.gap--m { gap: var(--space-m); } .stack--m > * + * { margin-block-start: var(--space-m); } .pad--m { padding: var(--space-m); }
.gap--l { gap: var(--space-l); } .stack--l > * + * { margin-block-start: var(--space-l); } .pad--l { padding: var(--space-l); }
.gap--xl { gap: var(--space-xl); } .stack--xl > * + * { margin-block-start: var(--space-xl); } .pad--xl { padding: var(--space-xl); }
.gap--xxl { gap: var(--space-xxl); } .stack--xxl > * + * { margin-block-start: var(--space-xxl); } .pad--xxl { padding: var(--space-xxl); }
.gap--2xl { gap: var(--space-xxl); } .stack--2xl > * + * { margin-block-start: var(--space-xxl); } .pad--2xl { padding: var(--space-xxl); }
.flex { display: flex; flex-wrap: wrap; } .flex--col { display: flex; flex-direction: column; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .align-center { align-items: center; } .align-start { align-items: start; }
:where(.query-container) { container-type: inline-size; }
}
@layer utilities {
.text--xs { font-size: var(--text-xs); }
.text--s { font-size: var(--text-s); }
.text--m { font-size: var(--text-m); }
.text--l { font-size: var(--text-l); }
.text--xl { font-size: var(--text-xl); }
.text--xxl { font-size: var(--text-xxl); }
.text--primary { color: var(--primary); } .bg--primary { background: var(--primary); color: var(--on-primary); } .bg--primary-ultra-light { background: var(--primary-ultra-light); color: var(--on-primary-ultra-light); } .bg--primary-light { background: var(--primary-light); color: var(--on-primary-light); } .bg--primary-dark { background: var(--primary-dark); color: var(--on-primary-dark); } .bg--primary-ultra-dark { background: var(--primary-ultra-dark); color: var(--on-primary-ultra-dark); }
.text--secondary { color: var(--secondary); } .bg--secondary { background: var(--secondary); color: var(--on-secondary); } .bg--secondary-ultra-light { background: var(--secondary-ultra-light); color: var(--on-secondary-ultra-light); } .bg--secondary-light { background: var(--secondary-light); color: var(--on-secondary-light); } .bg--secondary-dark { background: var(--secondary-dark); color: var(--on-secondary-dark); } .bg--secondary-ultra-dark { background: var(--secondary-ultra-dark); color: var(--on-secondary-ultra-dark); }
.text--tertiary { color: var(--tertiary); } .bg--tertiary { background: var(--tertiary); color: var(--on-tertiary); } .bg--tertiary-ultra-light { background: var(--tertiary-ultra-light); color: var(--on-tertiary-ultra-light); } .bg--tertiary-light { background: var(--tertiary-light); color: var(--on-tertiary-light); } .bg--tertiary-dark { background: var(--tertiary-dark); color: var(--on-tertiary-dark); } .bg--tertiary-ultra-dark { background: var(--tertiary-ultra-dark); color: var(--on-tertiary-ultra-dark); }
.text--accent { color: var(--accent); } .bg--accent { background: var(--accent); color: var(--on-accent); } .bg--accent-ultra-light { background: var(--accent-ultra-light); color: var(--on-accent-ultra-light); } .bg--accent-light { background: var(--accent-light); color: var(--on-accent-light); } .bg--accent-dark { background: var(--accent-dark); color: var(--on-accent-dark); } .bg--accent-ultra-dark { background: var(--accent-ultra-dark); color: var(--on-accent-ultra-dark); }
.text--base { color: var(--base); } .bg--base { background: var(--base); color: var(--on-base); } .bg--base-ultra-light { background: var(--base-ultra-light); color: var(--on-base-ultra-light); } .bg--base-light { background: var(--base-light); color: var(--on-base-light); } .bg--base-dark { background: var(--base-dark); color: var(--on-base-dark); } .bg--base-ultra-dark { background: var(--base-ultra-dark); color: var(--on-base-ultra-dark); }
.text--neutral { color: var(--neutral); } .bg--neutral { background: var(--neutral); color: var(--on-neutral); } .bg--neutral-ultra-light { background: var(--neutral-ultra-light); color: var(--on-neutral-ultra-light); } .bg--neutral-light { background: var(--neutral-light); color: var(--on-neutral-light); } .bg--neutral-dark { background: var(--neutral-dark); color: var(--on-neutral-dark); } .bg--neutral-ultra-dark { background: var(--neutral-ultra-dark); color: var(--on-neutral-ultra-dark); }
.text--success { color: var(--success); } .bg--success { background: var(--success); color: var(--on-success); } .bg--success-ultra-light { background: var(--success-ultra-light); color: var(--on-success-ultra-light); } .bg--success-light { background: var(--success-light); color: var(--on-success-light); } .bg--success-dark { background: var(--success-dark); color: var(--on-success-dark); } .bg--success-ultra-dark { background: var(--success-ultra-dark); color: var(--on-success-ultra-dark); }
.text--warning { color: var(--warning); } .bg--warning { background: var(--warning); color: var(--on-warning); } .bg--warning-ultra-light { background: var(--warning-ultra-light); color: var(--on-warning-ultra-light); } .bg--warning-light { background: var(--warning-light); color: var(--on-warning-light); } .bg--warning-dark { background: var(--warning-dark); color: var(--on-warning-dark); } .bg--warning-ultra-dark { background: var(--warning-ultra-dark); color: var(--on-warning-ultra-dark); }
.text--info { color: var(--info); } .bg--info { background: var(--info); color: var(--on-info); } .bg--info-ultra-light { background: var(--info-ultra-light); color: var(--on-info-ultra-light); } .bg--info-light { background: var(--info-light); color: var(--on-info-light); } .bg--info-dark { background: var(--info-dark); color: var(--on-info-dark); } .bg--info-ultra-dark { background: var(--info-ultra-dark); color: var(--on-info-ultra-dark); }
.text--danger { color: var(--danger); } .bg--danger { background: var(--danger); color: var(--on-danger); } .bg--danger-ultra-light { background: var(--danger-ultra-light); color: var(--on-danger-ultra-light); } .bg--danger-light { background: var(--danger-light); color: var(--on-danger-light); } .bg--danger-dark { background: var(--danger-dark); color: var(--on-danger-dark); } .bg--danger-ultra-dark { background: var(--danger-ultra-dark); color: var(--on-danger-ultra-dark); }
.text--muted { color: var(--text-muted); } .text--left { text-align: start; } .text--center { text-align: center; } .text--right { text-align: end; }
.text-muted { color: var(--text-muted); } .text-center { text-align: center; } .text-primary { color: var(--primary); } .bg-primary { background: var(--primary); color: var(--on-primary); } .bg-light { background: var(--primary-ultra-light); }
.scheme--light { color-scheme: light; color: var(--text); background: var(--bg); } .scheme--dark { color-scheme: dark; color: var(--text); background: var(--bg); }
:where([class^="btn--"], [class*=" btn--"], .btn, .button) {
  display: inline-flex;
  align-items: var(--btn-align-items, center);
  justify-content: center;
  gap: 0.5em;
  min-inline-size: var(--btn-min-width);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color, var(--btn-background, var(--btn-bg, var(--primary))));
  border-radius: var(--btn-radius);
  background: var(--btn-background, var(--btn-bg, var(--primary)));
  color: var(--btn-text-color, var(--btn-text, var(--on-primary)));
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size);
  font-style: var(--btn-font-style, normal);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-align: center;
  text-decoration: var(--btn-text-decoration, none);
  text-transform: var(--btn-text-transform);
  cursor: pointer;
  transition: var(--btn-transition);
}
:where([class^="btn--"], [class*=" btn--"], .btn, .button):hover {
  background: var(--btn-background-hover, var(--btn-background, var(--btn-bg-hover, var(--primary-hover))));
  color: var(--btn-text-color-hover, var(--btn-text-color, var(--btn-text, var(--on-primary))));
  border-color: var(--btn-border-color-hover, var(--btn-background-hover, var(--btn-background, var(--btn-bg-hover, var(--primary-hover)))));
  text-decoration: var(--btn-text-decoration-hover, none);
}
:where([class^="btn--"], [class*=" btn--"], .btn, .button):where(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn--primary { --btn-background: var(--primary); --btn-background-hover: var(--primary-hover); --btn-text-color: var(--on-primary); --btn-text-color-hover: var(--on-primary); --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); }
.btn--primary-light { --btn-background: var(--primary-light); --btn-background-hover: var(--primary-semi-light); --btn-text-color: var(--on-primary-light); --btn-text-color-hover: var(--on-primary-semi-light); --btn-border-color: var(--primary-light); --btn-border-color-hover: var(--primary-semi-light); }
.btn--primary-dark { --btn-background: var(--primary-dark); --btn-background-hover: var(--primary-ultra-dark); --btn-text-color: var(--on-primary-dark); --btn-text-color-hover: var(--on-primary-ultra-dark); --btn-border-color: var(--primary-dark); --btn-border-color-hover: var(--primary-ultra-dark); }
.btn--secondary { --btn-background: var(--secondary); --btn-background-hover: var(--secondary-hover); --btn-text-color: var(--on-secondary); --btn-text-color-hover: var(--on-secondary); --btn-border-color: var(--secondary); --btn-border-color-hover: var(--secondary-hover); }
.btn--secondary-light { --btn-background: var(--secondary-light); --btn-background-hover: var(--secondary-semi-light); --btn-text-color: var(--on-secondary-light); --btn-text-color-hover: var(--on-secondary-semi-light); --btn-border-color: var(--secondary-light); --btn-border-color-hover: var(--secondary-semi-light); }
.btn--secondary-dark { --btn-background: var(--secondary-dark); --btn-background-hover: var(--secondary-ultra-dark); --btn-text-color: var(--on-secondary-dark); --btn-text-color-hover: var(--on-secondary-ultra-dark); --btn-border-color: var(--secondary-dark); --btn-border-color-hover: var(--secondary-ultra-dark); }
.btn--tertiary { --btn-background: var(--tertiary); --btn-background-hover: var(--tertiary-hover); --btn-text-color: var(--on-tertiary); --btn-text-color-hover: var(--on-tertiary); --btn-border-color: var(--tertiary); --btn-border-color-hover: var(--tertiary-hover); }
.btn--tertiary-light { --btn-background: var(--tertiary-light); --btn-background-hover: var(--tertiary-semi-light); --btn-text-color: var(--on-tertiary-light); --btn-text-color-hover: var(--on-tertiary-semi-light); --btn-border-color: var(--tertiary-light); --btn-border-color-hover: var(--tertiary-semi-light); }
.btn--tertiary-dark { --btn-background: var(--tertiary-dark); --btn-background-hover: var(--tertiary-ultra-dark); --btn-text-color: var(--on-tertiary-dark); --btn-text-color-hover: var(--on-tertiary-ultra-dark); --btn-border-color: var(--tertiary-dark); --btn-border-color-hover: var(--tertiary-ultra-dark); }
.btn--accent { --btn-background: var(--accent); --btn-background-hover: var(--accent-hover); --btn-text-color: var(--on-accent); --btn-text-color-hover: var(--on-accent); --btn-border-color: var(--accent); --btn-border-color-hover: var(--accent-hover); }
.btn--accent-light { --btn-background: var(--accent-light); --btn-background-hover: var(--accent-semi-light); --btn-text-color: var(--on-accent-light); --btn-text-color-hover: var(--on-accent-semi-light); --btn-border-color: var(--accent-light); --btn-border-color-hover: var(--accent-semi-light); }
.btn--accent-dark { --btn-background: var(--accent-dark); --btn-background-hover: var(--accent-ultra-dark); --btn-text-color: var(--on-accent-dark); --btn-text-color-hover: var(--on-accent-ultra-dark); --btn-border-color: var(--accent-dark); --btn-border-color-hover: var(--accent-ultra-dark); }
.btn--base { --btn-background: var(--base); --btn-background-hover: var(--base-hover); --btn-text-color: var(--on-base); --btn-text-color-hover: var(--on-base); --btn-border-color: var(--base); --btn-border-color-hover: var(--base-hover); }
.btn--base-light { --btn-background: var(--base-light); --btn-background-hover: var(--base-semi-light); --btn-text-color: var(--on-base-light); --btn-text-color-hover: var(--on-base-semi-light); --btn-border-color: var(--base-light); --btn-border-color-hover: var(--base-semi-light); }
.btn--base-dark { --btn-background: var(--base-dark); --btn-background-hover: var(--base-ultra-dark); --btn-text-color: var(--on-base-dark); --btn-text-color-hover: var(--on-base-ultra-dark); --btn-border-color: var(--base-dark); --btn-border-color-hover: var(--base-ultra-dark); }
.btn--neutral { --btn-background: var(--neutral); --btn-background-hover: var(--neutral-hover); --btn-text-color: var(--on-neutral); --btn-text-color-hover: var(--on-neutral); --btn-border-color: var(--neutral); --btn-border-color-hover: var(--neutral-hover); }
.btn--neutral-light { --btn-background: var(--neutral-light); --btn-background-hover: var(--neutral-semi-light); --btn-text-color: var(--on-neutral-light); --btn-text-color-hover: var(--on-neutral-semi-light); --btn-border-color: var(--neutral-light); --btn-border-color-hover: var(--neutral-semi-light); }
.btn--neutral-dark { --btn-background: var(--neutral-dark); --btn-background-hover: var(--neutral-ultra-dark); --btn-text-color: var(--on-neutral-dark); --btn-text-color-hover: var(--on-neutral-ultra-dark); --btn-border-color: var(--neutral-dark); --btn-border-color-hover: var(--neutral-ultra-dark); }
.btn--success { --btn-background: var(--success); --btn-background-hover: var(--success-hover); --btn-text-color: var(--on-success); --btn-text-color-hover: var(--on-success); --btn-border-color: var(--success); --btn-border-color-hover: var(--success-hover); }
.btn--success-light { --btn-background: var(--success-light); --btn-background-hover: var(--success-semi-light); --btn-text-color: var(--on-success-light); --btn-text-color-hover: var(--on-success-semi-light); --btn-border-color: var(--success-light); --btn-border-color-hover: var(--success-semi-light); }
.btn--success-dark { --btn-background: var(--success-dark); --btn-background-hover: var(--success-ultra-dark); --btn-text-color: var(--on-success-dark); --btn-text-color-hover: var(--on-success-ultra-dark); --btn-border-color: var(--success-dark); --btn-border-color-hover: var(--success-ultra-dark); }
.btn--warning { --btn-background: var(--warning); --btn-background-hover: var(--warning-hover); --btn-text-color: var(--on-warning); --btn-text-color-hover: var(--on-warning); --btn-border-color: var(--warning); --btn-border-color-hover: var(--warning-hover); }
.btn--warning-light { --btn-background: var(--warning-light); --btn-background-hover: var(--warning-semi-light); --btn-text-color: var(--on-warning-light); --btn-text-color-hover: var(--on-warning-semi-light); --btn-border-color: var(--warning-light); --btn-border-color-hover: var(--warning-semi-light); }
.btn--warning-dark { --btn-background: var(--warning-dark); --btn-background-hover: var(--warning-ultra-dark); --btn-text-color: var(--on-warning-dark); --btn-text-color-hover: var(--on-warning-ultra-dark); --btn-border-color: var(--warning-dark); --btn-border-color-hover: var(--warning-ultra-dark); }
.btn--info { --btn-background: var(--info); --btn-background-hover: var(--info-hover); --btn-text-color: var(--on-info); --btn-text-color-hover: var(--on-info); --btn-border-color: var(--info); --btn-border-color-hover: var(--info-hover); }
.btn--info-light { --btn-background: var(--info-light); --btn-background-hover: var(--info-semi-light); --btn-text-color: var(--on-info-light); --btn-text-color-hover: var(--on-info-semi-light); --btn-border-color: var(--info-light); --btn-border-color-hover: var(--info-semi-light); }
.btn--info-dark { --btn-background: var(--info-dark); --btn-background-hover: var(--info-ultra-dark); --btn-text-color: var(--on-info-dark); --btn-text-color-hover: var(--on-info-ultra-dark); --btn-border-color: var(--info-dark); --btn-border-color-hover: var(--info-ultra-dark); }
.btn--danger { --btn-background: var(--danger); --btn-background-hover: var(--danger-hover); --btn-text-color: var(--on-danger); --btn-text-color-hover: var(--on-danger); --btn-border-color: var(--danger); --btn-border-color-hover: var(--danger-hover); }
.btn--danger-light { --btn-background: var(--danger-light); --btn-background-hover: var(--danger-semi-light); --btn-text-color: var(--on-danger-light); --btn-text-color-hover: var(--on-danger-semi-light); --btn-border-color: var(--danger-light); --btn-border-color-hover: var(--danger-semi-light); }
.btn--danger-dark { --btn-background: var(--danger-dark); --btn-background-hover: var(--danger-ultra-dark); --btn-text-color: var(--on-danger-dark); --btn-text-color-hover: var(--on-danger-ultra-dark); --btn-border-color: var(--danger-dark); --btn-border-color-hover: var(--danger-ultra-dark); }
.btn--outline { background: transparent; color: var(--btn-background, var(--primary)); }
.btn--outline:hover { background: var(--btn-background, var(--primary)); color: var(--btn-text-color, var(--on-primary)); }
.btn--xs { --btn-font-size: var(--text-xs); }
.btn--s { --btn-font-size: var(--text-s); }
.btn--m { --btn-font-size: var(--text-m); }
.btn--l { --btn-font-size: var(--text-l); }
.btn--xl { --btn-font-size: var(--text-xl); }
.btn--xxl { --btn-font-size: var(--text-xxl); }
.radius--xs { border-radius: var(--radius-xs); } .radius--s { border-radius: var(--radius-s); } .radius--m { border-radius: var(--radius-m); } .radius--l { border-radius: var(--radius-l); } .radius--xl { border-radius: var(--radius-xl); } .radius--full { border-radius: var(--radius-full); }
.radius { border-radius: var(--radius); }
.shadow--s { box-shadow: var(--shadow-s); } .shadow--m { box-shadow: var(--shadow-m); } .shadow--l { box-shadow: var(--shadow-l); }
.card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-l); }
.width--full, .width-full { inline-size: 100%; }
.list--none { list-style: none; margin: 0; padding: 0; }
.hidden-accessible, .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 10; background: var(--bg); padding: 1rem; } .skip-link:focus { inset-block-start: 1rem; }

}
@layer design-components {

}
@layer components {
  .hero__content {
    align-items: flex-start;
  }

  .hero__actions {
    flex-wrap: wrap;
    padding-block-start: var(--space-s);
  }

  .offer__card {
    --heading-color: var(--on-primary-dark);
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: var(--space-xxl) var(--space-xl);
    align-items: center;
  }
  @media (width < 768px) {
    .offer__card {
      padding: var(--space-xl) var(--space-l);
    }
  }

  .offer__badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .services__intro {
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .services__card {
    background: var(--bg);
  }

  .services__price {
    margin-block-start: auto;
    padding-block-start: var(--space-s);
    font-weight: 600;
  }

  .steps__intro {
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .steps__item {
    padding-block-start: var(--space-m);
    border-block-start: 2px solid var(--primary-light);
  }

  .steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--text-l);
    font-weight: 700;
  }

  .contact__content {
    --heading-color: var(--on-primary-dark);
    max-inline-size: 40rem;
    margin-inline: auto;
    align-items: center;
  }

  .contact__actions {
    flex-wrap: wrap;
    padding-block-start: var(--space-s);
  }

  .site-header {
    background: var(--bg);
    border-block-end: 1px solid var(--border);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    padding-block: var(--space-s);
  }

  .site-header__logo {
    color: var(--heading-color);
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: 700;
    text-decoration: none;
  }

  @media (width < 768px) {
    .site-header__nav {
      order: 3;
      inline-size: 100%;
    }
  }

  .site-header__menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
  }
  @media (width < 768px) {
    .site-header__menu {
      justify-content: center;
      gap: var(--space-xs) var(--space-s);
      font-size: var(--text-s);
    }
  }

  .site-header__link {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }
  .site-header__link:hover {
    color: var(--primary);
    text-decoration: underline;
  }

  .site-header__cta {
    white-space: nowrap;
  }

  .site-footer {
    padding-block: var(--section-space-s);
  }

  .site-footer__columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--grid-gap);
  }
  @media (width < 768px) {
    .site-footer__columns {
      grid-template-columns: var(--grid-1);
    }
  }

  .site-footer__logo {
    color: var(--on-neutral-ultra-dark);
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: 700;
    text-decoration: none;
  }

  .site-footer__link {
    color: var(--on-neutral-ultra-dark);
    text-decoration: none;
  }
  .site-footer__link:hover {
    text-decoration: underline;
  }

  .site-footer__contact {
    font-style: normal;
  }

  .site-footer__legal {
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--base-semi-dark);
  }

  .eyebrow {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .hero__trust {
    color: var(--text-muted);
  }

  .hero__media {
    margin: 0;
  }

  .hero__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
  }

  .services__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: var(--radius-m);
  }

  .about__media {
    margin: 0;
  }

  .about__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--radius-l);
  }
  @media (width < 768px) {
    .about__image {
      aspect-ratio: 4/3;
    }
  }

  .about__item {
    position: relative;
    padding-inline-start: 1.75em;
  }
  .about__item::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--primary);
    font-weight: 700;
  }

  .about__list {
    padding-block-start: var(--space-xs);
    font-weight: 500;
  }

  .testimonials__intro {
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .testimonial {
    background: var(--bg);
  }

  .testimonial__figure {
    margin: 0;
    block-size: 100%;
  }

  .testimonial__quote {
    margin: 0;
    font-size: var(--text-l);
  }
  .testimonial__quote::before {
    content: "“";
    display: block;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--h2);
    line-height: 1;
  }

  .testimonial__author {
    margin-block-start: auto;
    color: var(--primary-dark);
    font-weight: 600;
  }

  .faq__inner {
    max-inline-size: 48rem;
  }

  .faq__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--bg);
  }
  .faq__item[open] {
    border-color: var(--primary);
  }
  .faq__item[open] .faq__question::after {
    content: "−";
  }

  .faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-m);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }
  .faq__question::-webkit-details-marker {
    display: none;
  }
  .faq__question::after {
    content: "+";
    color: var(--primary);
    font-size: var(--text-xl);
    line-height: 1;
  }
  .faq__question:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: var(--radius-m);
  }

  .faq__answer {
    margin: 0;
    padding: 0 var(--space-m) var(--space-m);
  }
}