/* Starter palette; client approval pending. Keep values in sync with design.md.
   Components must use these roles through var(--token-name). */
:root {
  /* Typography - fluid */
  --c-font-1: 'Inter', sans-serif;
  --font-p: clamp(11px, 0.5vw, 12px);
  --font-font-h4: clamp(11px, 0.5vw, 12px);
  --font-font-h3: clamp(1.5rem, 3.5vw, 3.5rem);
  --font-font-h2: clamp(2.5rem, 4.5vw, 4.5rem);
  --font-font-h1: clamp(2.5rem, 4.5vw, 4.5rem);

  /* Backgrounds and text */
  --bg-1: #ffffff;
  --bg-2: #eeeeee;
  --bg-3: #edf2ef;
  --bg-inverse: var(--primary);
  --text-primary: #18221d;
  --text-muted: #47564d;
  --text-subtle: #5d6d63;
  --text-inverse: #ffffff;

  /* Brand and actions */
  --primary: #b91461;
  --primary-hover: #e40f72;
  --primary-active: #f90a79;
  --on-primary: #ffffff;
  --accent: #f4c84b;
  --accent-hover: #e4b636;
  --accent-active: #d2a323;
  --on-accent: var(--text-primary);

  /* Borders and links */
  --border: #d5ded8;
  --border-strong: #f90a79;
  --link: #145fc2;
  --link-hover: #104e9f;
  --link-active: #0c3d7d;
  --link-visited: #68439a;

  /* Interaction states */
  --bg-hover: #edf2ef;
  --bg-active: #dfe8e2;
  --bg-selected: #e1f2e8;
  --text-selected: #8d172b;
  --border-selected: #c51c38;
  --bg-disabled: #edf0ee;
  --text-disabled: #68766d;
  --border-disabled: #d5ded8;
  --focus-ring: #145fc2;

  /* Feedback: pair each background with its matching text and border */
  --bg-success: #e9f6ee;
  --text-success: #165b34;
  --border-success: #c51c38;
  --bg-warning: #fff5d6;
  --text-warning: #6b4900;
  --border-warning: #947000;
  --bg-error: #fff0f0;
  --text-error: #a32121;
  --border-error: #c43b3b;
  --bg-info: #edf5ff;
  --text-info: #184e91;
  --border-info: #3478be;

  /* Overlays and browser text selection; final hex pair is alpha */
  --overlay: #000000cc;
  --shadow: #10181326;
  --selection-bg: #bde3ff;
  --selection-text: #123752;

  /* Shared layout and readable component typography */
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: 2rem;
  --leading-body: 1.5;
  --leading-menu: 2;
  --weight-medium: 500;
  --weight-semibold: 600;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --page-gutter: clamp(1rem, 4vw, 4rem);
  --section-space: clamp(3rem, 7vw, 7rem);
  --content-max: 90rem;
  --radius-control: 4px;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 4px;
  --control-min: 2.75rem;
  --icon-size: 1.5rem;
  --motion-duration: 240ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-raised: 0 var(--space-2) var(--space-6) var(--shadow);

  /* Header geometry; the collapse breakpoint is 64rem. */
  --header-height: 5.5rem;
  --header-logo-width: 10rem;
  --header-logo-mobile-width: 9rem;
  --header-gap: var(--space-6);
  --header-layer: 30;
  --drawer-width: 75%;
  --hero-ratio: 1920 / 1080;
  --hero-box-max: 44rem;
  --hero-title-size: 4rem;
  --hero-title-mobile-size: 2.5rem;
  --hero-title-leading: 1.1;
  --hero-scrim-opacity: 0.6;
  --hero-media-position: center;
  --section-heading-font: var(--proof-font);
  --section-eyebrow-size: var(--brand-small-size);
  --split-max: var(--content-max);
  --split-gap: var(--space-8);
  --split-media-ratio: 4 / 5;
  --split-media-mobile-ratio: 3 / 2;
  --split-media-position: center;
  --split-thumbnail-size: var(--space-7);
  --split-thumbnail-ratio: 1;
  --split-title-size: var(--partner-title-size);
  --split-title-mobile-size: var(--text-xl);
  --split-copy-max: var(--partner-intro-max);
  --split-row-title-size: var(--partner-row-title-size);
  --split-row-title-mobile-size: var(--text-lg);
  --split-indicator-stroke: var(--focus-width);
  --section-secondary-bg: transparent;
  --section-secondary-text: inherit;
  --section-secondary-border: currentColor;
  --section-secondary-hover-bg: var(--bg-hover);
  --section-secondary-hover-text: var(--text-primary);
  --section-secondary-active-bg: var(--bg-active);
  --proof-font: 'Times New Roman', serif;
  --stat-size: 2.75rem;
  --stat-word-size: 2.25rem;
  --brand-small-size: 0.75rem;
  --trust-caption-size: 0.625rem;
  --trust-caption-width: 9rem;
  --partner-max: 46rem;
  --partner-intro-max: 34rem;
  --partner-title-size: 2.75rem;
  --partner-row-title-size: 1.5rem;
  --services-max: 64rem;
  --comparison-title-size: 4rem;
  --comparison-note-font: 'Segoe Print', 'Bradley Hand', cursive;
  --build-brand-title-size: var(--hero-title-size);
  --build-brand-art-width: var(--header-logo-width);
}

.template-build-brand { --text-primary: var(--text-inverse); --text-muted: var(--text-inverse); --text-subtle: var(--text-inverse); background: linear-gradient(var(--overlay), var(--overlay)), url("assets/dash.webp") center / cover no-repeat var(--bg-inverse); color: var(--text-primary); scroll-margin-block-start: var(--header-height); padding: var(--section-space) var(--page-gutter); }
.build-brand-inner { position: relative; max-inline-size: var(--content-max); margin-inline: auto; padding: var(--space-8) var(--page-gutter); isolation: isolate; }
.build-brand-copy { position: relative; z-index: 1; padding-inline: var(--build-brand-art-width); text-align: center; }
.build-brand-eyebrow { margin: 0 0 var(--space-4); color: var(--text-subtle); font-size: var(--section-eyebrow-size); letter-spacing: 0; }
.build-brand-copy h2 { margin: 0; font: var(--weight-medium) var(--build-brand-title-size)/1 var(--section-heading-font); white-space: pre-line; letter-spacing: 0; overflow-wrap: anywhere; }
.build-brand-intro { margin: var(--space-3) auto var(--space-5); color: var(--text-muted); font-size: var(--text-base); overflow-wrap: anywhere; }
.build-brand-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-5); max-inline-size: 100%; min-block-size: var(--control-min); padding: var(--space-4) var(--space-7); border: var(--border-width) solid var(--bg-inverse); border-radius: var(--radius-control); color: var(--text-inverse); background: var(--bg-inverse); font-size: var(--text-base); text-decoration: none; overflow-wrap: anywhere; }
.build-brand-cta span { min-inline-size: 0; }
.build-brand-cta svg { flex-shrink: 0; inline-size: var(--space-4); block-size: var(--space-4); }
.build-brand-cta:hover { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); }
.build-brand-cta:active { color: var(--on-primary); background: var(--primary-active); border-color: var(--primary-active); }
.build-brand-cta:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.build-brand-art { position: absolute; z-index: 0; inset-block-start: var(--space-5); inline-size: var(--build-brand-art-width); aspect-ratio: 100 / 158; overflow: hidden; pointer-events: none; }
.build-brand-art-left { inset-inline-start: 0; }
.build-brand-art-right { inset-inline-end: 0; aspect-ratio: 100 / 176; }
.build-brand-art img { position: absolute; inline-size: 604%; max-inline-size: none; block-size: auto; inset-block-start: 0; }
.build-brand-art-left img { inset-inline-start: 0; }
.build-brand-art-right img { inset-inline-start: -504%; }
.build-brand-benefits { position: relative; z-index: 1; display: flex; justify-content: center; max-inline-size: var(--services-max); margin: var(--space-6) auto 0; padding: 0; list-style: none; }
.build-brand-benefits li { flex: 1; display: flex; justify-content: center; align-items: center; gap: var(--space-3); min-inline-size: 0; padding-inline: var(--space-5); color: var(--text-muted); font-size: var(--brand-small-size); overflow-wrap: anywhere; }
.build-brand-benefits li + li { border-inline-start: var(--border-width) solid var(--border); }
.build-brand-check { display: grid; place-items: center; flex-shrink: 0; inline-size: var(--space-6); block-size: var(--space-6); border-radius: 50%; background: var(--bg-inverse); color: var(--text-primary); }
.build-brand-check svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
@media (max-width: 79.999rem) {
  .build-brand-copy h2 { font-size: var(--partner-title-size); }
}
@media (max-width: 63.999rem) {
  .build-brand-copy { padding-inline: 0; }
  .build-brand-art { display: none; }
}
@media (max-width: 39.999rem) {
  .build-brand-copy h2 { font-size: var(--text-xl); }
  .build-brand-benefits { flex-direction: column; gap: var(--space-3); inline-size: fit-content; }
  .build-brand-benefits li { justify-content: flex-start; padding-inline: 0; }
  .build-brand-benefits li + li { border: 0; }
}

.template-faq { padding: var(--section-space) var(--page-gutter); color: var(--text-primary); background: var(--bg-1); scroll-margin-block-start: var(--header-height); }
.faq-inner { max-inline-size: var(--services-max); margin-inline: auto; }
.faq-heading { text-align: center; margin-block-end: var(--space-5); }
.faq-eyebrow { margin: 0 0 var(--space-3); color: var(--text-subtle); font-size: var(--section-eyebrow-size); }
.faq-heading h2 { margin: 0; font: var(--weight-medium) var(--comparison-title-size)/1.1 var(--section-heading-font); letter-spacing: 0; overflow-wrap: anywhere; }
.faq-intro { max-inline-size: var(--partner-intro-max); margin: var(--space-2) auto 0; color: var(--text-muted); font-size: var(--text-base); }
.faq-item { position: relative; display: grid; grid-template-columns: var(--space-8) minmax(0, 1.2fr) minmax(0, 1fr) var(--control-min); align-items: center; gap: var(--space-6); padding-block: var(--space-4); border-block-start: var(--border-width) solid var(--border); }
.faq-item:last-child { border-block-end: var(--border-width) solid var(--border); }
.faq-number { display: grid; place-items: center; min-block-size: var(--space-7); border-inline-end: var(--border-width) solid var(--border); color: var(--text-subtle); font-size: var(--brand-small-size); }
.faq-item h3 { min-inline-size: 0; margin: 0; font: var(--weight-medium) var(--partner-row-title-size)/1.15 var(--section-heading-font); }
.faq-question { display: block; inline-size: 100%; min-block-size: var(--control-min); padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: 0; text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.faq-indicator { position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: var(--control-min); block-size: var(--control-min); border-radius: 50%; background: var(--bg-2); }
.faq-indicator svg { inline-size: var(--space-4); block-size: var(--space-4); }
.faq-question:hover .faq-indicator { background: var(--bg-hover); }
.faq-question:active .faq-indicator { background: var(--bg-active); }
.faq-question:focus-visible, .faq-question:focus-visible .faq-indicator { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.faq-question[aria-expanded="true"] .faq-plus-stroke { display: none; }
.faq-answer { min-inline-size: 0; margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); overflow-wrap: anywhere; }
@media (max-width: 47.999rem) {
  .faq-heading h2 { font-size: var(--partner-title-size); }
  .faq-item { grid-template-columns: var(--space-6) minmax(0, 1fr) var(--control-min); gap: var(--space-3); }
  .faq-item h3 { font-size: var(--text-lg); }
  .faq-number { min-block-size: var(--control-min); }
  .faq-indicator { inset-block-start: var(--space-4); transform: none; }
  .faq-answer { grid-column: 2; font-size: var(--text-base); }
}

.template-contact { padding: var(--section-space) var(--page-gutter); color: var(--text-primary); background: var(--bg-2); scroll-margin-block-start: var(--header-height); }
.contact-inner { max-inline-size: var(--services-max); margin-inline: auto; }
.contact-heading { text-align: center; margin-block-end: var(--space-6); }
.contact-eyebrow { margin: 0 0 var(--space-3); color: var(--text-subtle); font-size: var(--section-eyebrow-size); }
.contact-heading h2 { margin: 0; font: var(--weight-medium) var(--comparison-title-size)/1.1 var(--section-heading-font); letter-spacing: 0; overflow-wrap: anywhere; }
.contact-intro { max-inline-size: var(--partner-intro-max); margin: var(--space-2) auto 0; color: var(--text-muted); font-size: var(--text-base); overflow-wrap: anywhere; }
.contact-form { display: grid; gap: var(--space-6); padding: var(--space-6); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--bg-1); }
.contact-identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.contact-field { display: grid; gap: var(--space-2); min-inline-size: 0; }
.contact-field > label { color: var(--text-primary); font-size: var(--text-sm); }
.contact-hint { margin: 0; color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.contact-control { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-min); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-2); color: var(--text-primary); }
.contact-control-area { align-items: flex-start; padding-block: var(--space-4); }
.contact-control-icon { display: grid; place-items: center; flex-shrink: 0; color: var(--text-subtle); }
.contact-control-icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.contact-control input,
.contact-control textarea { flex: 1; min-inline-size: 0; min-block-size: var(--control-min); padding: 0; border: 0; color: var(--text-primary); background: transparent; font: inherit; resize: vertical; }
.contact-control textarea { min-block-size: calc(var(--space-8) * 2); }
.contact-control input::placeholder,
.contact-control textarea::placeholder { color: var(--text-subtle); }
.contact-control input:focus-visible,
.contact-control textarea:focus-visible,
.contact-choice input:focus-visible,
.contact-budget input:focus-visible { outline: none; }
.contact-control:focus-within { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.contact-control.is-invalid { border-color: var(--border-error); }
.contact-error { margin: 0; color: var(--text-error); font-size: var(--text-sm); overflow-wrap: anywhere; }
.contact-counter { margin: 0; color: var(--text-subtle); font-size: var(--brand-small-size); text-align: end; }
.contact-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.contact-legend { display: grid; gap: var(--space-1); padding: 0; margin-block-end: var(--space-4); }
.contact-legend-title { color: var(--text-primary); font-size: var(--text-base); font-weight: var(--weight-medium); }
.contact-choice-grid,
.contact-budget-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.contact-choice,
.contact-budget { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--space-3); min-inline-size: 0; min-block-size: var(--control-min); block-size: 100%; padding: var(--space-5) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--bg-1); color: var(--text-primary); cursor: pointer; overflow-wrap: anywhere; }
.contact-budget { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding-block: var(--space-4); }
.contact-choice input,
.contact-budget input { position: absolute; inset: 0; margin: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.contact-choice-icon,
.contact-budget-icon { display: grid; place-items: center; inline-size: var(--space-7); block-size: var(--space-7); border-radius: 50%; background: var(--bg-2); color: var(--text-primary); }
.contact-choice-icon svg,
.contact-budget-icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.contact-choice-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.contact-budget-title { font-size: var(--text-sm); }
.contact-choice-copy { color: var(--text-muted); font-size: var(--text-sm); }
.contact-choice:hover,
.contact-budget:hover { background: var(--bg-hover); }
.contact-choice:active,
.contact-budget:active { background: var(--bg-active); }
.contact-choice:has(:checked),
.contact-budget:has(:checked) { color: var(--text-selected); background: var(--bg-1); border-color: var(--border-selected); }
.contact-choice:has(:checked) .contact-choice-copy { color: var(--text-selected); }
.contact-choice:has(:checked) .contact-choice-icon,
.contact-budget:has(:checked) .contact-budget-icon { background: var(--bg-1); color: var(--text-selected); }
.contact-choice:has(:focus-visible),
.contact-budget:has(:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.contact-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-5); inline-size: 100%; min-block-size: var(--control-min); padding: var(--space-4) var(--space-7); border: var(--border-width) solid var(--bg-inverse); border-radius: var(--radius-control); color: var(--text-inverse); background: var(--bg-inverse); font-size: var(--text-base); cursor: pointer; overflow-wrap: anywhere; }
.contact-submit svg { flex-shrink: 0; inline-size: var(--space-4); block-size: var(--space-4); }
.contact-submit:hover { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); }
.contact-submit:active { color: var(--on-primary); background: var(--primary-active); border-color: var(--primary-active); }
.contact-success { padding: var(--space-7) var(--space-6); border: var(--border-width) solid var(--border-success); border-radius: var(--radius-control); background: var(--bg-success); color: var(--text-success); text-align: center; overflow-wrap: anywhere; }
.contact-success h3 { margin: 0; font: var(--weight-medium) var(--partner-row-title-size)/1.15 var(--section-heading-font); }
.contact-success p { margin: var(--space-3) 0 0; }
.contact-note { margin: var(--space-4) 0 0; color: var(--text-subtle); font-size: var(--text-sm); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 63.999rem) {
  .contact-choice-grid,
  .contact-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
  .contact-heading h2 { font-size: var(--partner-title-size); }
  .contact-identity { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: var(--space-5); }
}
@media (max-width: 35.999rem) {
  .contact-heading h2 { font-size: var(--text-xl); }
  .contact-choice-grid,
  .contact-budget-grid { grid-template-columns: minmax(0, 1fr); }
}

.template-client-stories { padding: var(--section-space) var(--page-gutter); background: var(--bg-2); color: var(--text-primary); scroll-margin-block-start: var(--header-height); }
.stories-inner { max-inline-size: var(--content-max); margin-inline: auto; }
.stories-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; margin-block-end: var(--space-5); padding-inline: var(--space-4); }
.stories-title-group { grid-column: 1 / -1; min-inline-size: 0; }
.stories-eyebrow { margin: 0 0 var(--space-4); color: var(--text-subtle); font-size: var(--section-eyebrow-size); letter-spacing: 0; }
.stories-heading h2 { margin: 0; font: var(--weight-medium) var(--text-xl)/1 var(--section-heading-font); white-space: pre-line; overflow-wrap: anywhere; letter-spacing: 0; }
.stories-intro { min-inline-size: 0; margin: 0; color: var(--text-muted); font-size: var(--text-base); overflow-wrap: anywhere; }
.stories-controls { display: flex; gap: var(--space-2); justify-self: start; }
.stories-control { display: grid; place-items: center; flex-shrink: 0; inline-size: var(--control-min); block-size: var(--control-min); padding: 0; border: var(--border-width) solid var(--border); border-radius: 50%; color: var(--text-primary); background: var(--bg-1); cursor: pointer; }
.stories-control svg { inline-size: var(--space-4); block-size: var(--space-4); }
.stories-control:hover { background: var(--bg-hover); }
.stories-control:active { background: var(--bg-active); }
.stories-control:disabled { color: var(--text-disabled); background: var(--bg-disabled); border-color: var(--border-disabled); cursor: default; }
.stories-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.stories-card { position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: var(--space-4); min-inline-size: 0; padding: var(--space-4); background: var(--bg-1); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); }
.stories-card:nth-child(n + 2) { display: none; }
.stories-quote-mark { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-4); color: var(--border); font: var(--weight-semibold) var(--hero-title-size)/1 var(--proof-font); }
.stories-quote { margin: var(--space-4) 0 var(--space-2); padding-inline-start: var(--space-7); color: var(--text-muted); font-size: var(--text-base); overflow-wrap: anywhere; }
.stories-quote p { margin: 0; }
.stories-author { display: flex; align-items: center; gap: var(--space-5); min-inline-size: 0; }
.stories-portrait { position: relative; flex-shrink: 0; inline-size: var(--space-8); block-size: var(--space-8); overflow: hidden; border-radius: 50%; background: var(--bg-3); }
.stories-initials { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: var(--text-muted); font-size: var(--text-sm); }
.stories-identity { min-inline-size: 0; overflow-wrap: anywhere; }
.stories-identity p { margin: 0; }
.stories-name { font: var(--weight-medium) var(--text-lg)/1.2 var(--proof-font); }
.stories-brand { color: var(--text-muted); font-size: var(--text-sm); }
.stories-category { color: var(--text-subtle); font-size: var(--brand-small-size); }
.stories-project { position: relative; aspect-ratio: 176 / 79; overflow: hidden; border-radius: var(--radius-control); background: var(--bg-3); }
.stories-project img, .stories-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stories-portrait img { position: absolute; inset: 0; }
.stories-project .stories-cropped-image, .stories-portrait .stories-cropped-image { position: absolute; max-width: none; height: auto; }
.stories-media-fallback { display: grid; place-items: center; block-size: 100%; padding: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.stories-status { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 40rem) {
  .stories-heading h2 { font-size: var(--partner-title-size); }
  .stories-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stories-card:nth-child(2) { display: grid; }
}
@media (min-width: 64rem) {
  .stories-heading { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--space-6); }
  .stories-title-group { grid-column: auto; }
  .stories-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stories-card:nth-child(3) { display: grid; }
}
@media (max-width: 39.999rem) {
  .stories-heading { padding-inline: 0; }
  .stories-intro { grid-column: 1 / -1; }
  .stories-controls { grid-column: 2; }
}

/* Process: an open editorial grid, with one restrained entrance per step. */
.template-how-it-works { padding: var(--section-space) var(--page-gutter); background: var(--bg-1); color: var(--text-primary); scroll-margin-block-start: var(--header-height); }
.how-it-works-inner { max-inline-size: 70rem; margin-inline: auto; }
.how-it-works-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-end: var(--space-8); }
.how-it-works-eyebrow { margin: 0; color: var(--text-subtle); font-size: var(--brand-small-size); letter-spacing: .12em; }
.how-it-works-heading h2 { margin: 0; font: 400 clamp(2.5rem, 4.5vw, 4.5rem)/1.04 var(--section-heading-font); white-space: pre-line; overflow-wrap: anywhere; letter-spacing: -.025em; }
.how-it-works-intro { max-inline-size: 25rem; margin: 0; font-size: var(--text-base); line-height: 1.7; color: var(--text-muted); }
.how-it-works-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-7); row-gap: var(--space-7); list-style: none; padding: 0; margin: 0; }
.how-it-works-step { position: relative; min-inline-size: 0; padding-block-start: var(--space-5); }
.how-it-works-step::before, .how-it-works-step::after { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--border-width); background: var(--border); }
.how-it-works-step::after { background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--motion-ease); }
.how-it-works-step:hover::after { transform: scaleX(1); }
.how-it-works-step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
.how-it-works-number { font: 400 clamp(3rem, 4vw, 4rem)/1 var(--proof-font); letter-spacing: -.04em; color: color-mix(in srgb, var(--text-primary) 55%, var(--bg-1)); }
.how-it-works-icon { display: grid; place-items: center; color: var(--text-subtle); }
.how-it-works-icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.how-it-works-step h3 { margin: 0 0 var(--space-3); font: 400 1.75rem/1.2 var(--section-heading-font); overflow-wrap: anywhere; }
.how-it-works-step p { max-inline-size: 21rem; margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.65; overflow-wrap: anywhere; }
.has-process-motion .how-it-works-step.is-revealed { animation: process-step-reveal 700ms var(--motion-ease) both; }
.has-process-motion .how-it-works-step.is-revealed:nth-child(3n + 2) { animation-delay: 100ms; }
.has-process-motion .how-it-works-step.is-revealed:nth-child(3n) { animation-delay: 200ms; }
@keyframes process-step-reveal { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 40rem) {
  .how-it-works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}
@media (min-width: 60rem) {
  .how-it-works-heading { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .how-it-works-eyebrow { grid-column: 1 / -1; }
  .how-it-works-intro { align-self: end; padding-block-end: var(--space-2); }
  .how-it-works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .has-process-motion .how-it-works-step.is-revealed { animation: none; }
  .how-it-works-step::after { transition: none; }
}

.template-services { padding: var(--section-space) var(--page-gutter); color: var(--text-primary); background: var(--bg-2); scroll-margin-block-start: var(--header-height); }
.services-inner { max-inline-size: var(--services-max); margin-inline: auto; }
.services-heading { text-align: center; margin-block-end: var(--space-6); }
.services-eyebrow, .services-category, .services-from { font-size: var(--trust-caption-size); text-transform: uppercase; letter-spacing: 0; }
.services-eyebrow { color: var(--text-subtle); margin: 0 0 var(--space-4); }
.services-heading h2 { margin: 0; font: var(--weight-medium) var(--partner-title-size)/1 var(--proof-font); white-space: pre-line; letter-spacing: 0; }
.services-intro { max-inline-size: var(--hero-box-max); margin: var(--space-3) auto 0; font-size: var(--text-base); color: var(--text-muted); }
.services-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.services-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .72fr); gap: var(--space-5); align-items: center; padding: var(--space-2); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--bg-1); }
.services-media { position: relative; aspect-ratio: 161 / 93; overflow: hidden; border-radius: var(--radius-control); background: var(--bg-2); }
.services-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.services-media .services-cropped-image { position: absolute; max-width: none; height: auto; }
.services-detail { display: grid; grid-template-columns: var(--control-min) minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-3); }
.services-icon { display: grid; place-items: center; inline-size: var(--control-min); block-size: var(--control-min); border-radius: 50%; background: var(--bg-2); }
.services-icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.services-category { margin: var(--space-2) 0 var(--space-4); }
.services-copy h3 { margin: 0 0 var(--space-3); font: var(--weight-medium) var(--partner-row-title-size)/1.1 var(--proof-font); white-space: pre-line; letter-spacing: 0; }
.services-description { margin: 0; font-size: var(--brand-small-size); color: var(--text-muted); }
.services-copy, .services-pricing { min-inline-size: 0; overflow-wrap: anywhere; }
.services-pricing { border-inline-start: var(--border-width) solid var(--border); padding: var(--space-5); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.services-price { margin: 0 0 var(--space-2); font: var(--weight-medium) var(--stat-size)/1.1 var(--proof-font); }
.services-link { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--control-min); color: inherit; font-size: var(--brand-small-size); text-decoration: none; }
.services-link svg { inline-size: var(--space-4); block-size: var(--space-4); flex-shrink: 0; }
.services-link:hover { color: var(--primary-hover); text-decoration: underline; }
.services-link:active { color: var(--primary-active); }
.services-link:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 60rem) {
  .services-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .services-pricing { grid-column: 2; border-inline-start: 0; border-block-start: var(--border-width) solid var(--border); padding: var(--space-4) 0; }
  .services-media { grid-row: span 2; }
}
@media (max-width: 40rem) {
  .services-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3); }
  .services-media { grid-row: auto; }
  .services-pricing { grid-column: auto; padding: var(--space-4) var(--space-2) 0; }
  .services-detail { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-2); }
  .services-icon { display: none; }
  .services-heading h2 { font-size: var(--text-xl); }
}

.template-before-after { padding: var(--section-space) var(--page-gutter); color: var(--text-primary); background: var(--bg-1); scroll-margin-block-start: var(--header-height); }
.before-after-inner { max-inline-size: var(--content-max); margin-inline: auto; }
.before-after-heading { text-align: center; }
.before-after-heading h2 { margin: 0; font: var(--weight-medium) var(--comparison-title-size)/1 var(--proof-font); white-space: pre-line; overflow-wrap: anywhere; letter-spacing: 0; }
.before-after-heading > p { max-inline-size: var(--hero-box-max); margin: var(--space-5) auto var(--space-7); color: var(--text-muted); font-size: var(--text-base); }
.before-after-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-3); }
.before-after-state { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); align-items: end; min-inline-size: 0; }
.before-after-after { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
.before-after-panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-control); background: var(--bg-2); align-self: stretch; }
.before-after-panel h3 { margin: 0 0 var(--space-5); font-size: var(--text-sm); text-transform: uppercase; font-weight: var(--weight-semibold); }
.before-after-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.before-after-panel li { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr); align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.before-after-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--space-4); block-size: var(--space-4); line-height: 1; text-align: center; color: var(--text-primary); }
.before-after-before .before-after-mark { border-radius: 50%; background: var(--bg-3); color: var(--text-subtle); }
.before-after-laptop { min-inline-size: 0; margin: var(--space-5) 0 0; position: relative; }
.before-after-after .before-after-laptop { grid-column: 1; grid-row: 1; }
.before-after-after .before-after-panel { grid-column: 2; grid-row: 1; }
.before-after-screen { margin-inline: var(--space-4); padding: var(--space-1); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-inverse); }
.before-after-viewport { position: relative; aspect-ratio: 132 / 107; overflow: hidden; background: var(--bg-2); }
.before-after-viewport img { position: absolute; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; top: 0; left: 0; }
.before-after-base { height: var(--space-3); border-radius: 0 0 50% 50%; border-block-start: var(--border-width) solid var(--border-strong); background: var(--bg-3); box-shadow: 0 var(--space-1) var(--space-1) var(--shadow); }
@media (max-width: 74.999rem) {
  .before-after-heading { text-align: center; }
.before-after-heading h2 { font-size: var(--partner-title-size); }
  .before-after-state, .before-after-after { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .before-after-after .before-after-panel, .before-after-after .before-after-laptop { grid-column: auto; grid-row: auto; }
  .before-after-laptop { margin: 0; }
}
@media (max-width: 47.999rem) {
  .before-after-heading { text-align: center; }
.before-after-heading h2 { font-size: var(--text-xl); }
  .before-after-comparison { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .before-after-state { gap: var(--space-5); }
  .before-after-panel { padding: var(--space-5); }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.template-under-hero,
.template-logo-slider {
  background: var(--bg-1);
  color: var(--text-primary);
  padding-inline: var(--page-gutter);
}

.template-logo-slider {
  background: var(--bg-2);
}

.template-under-hero {
  border-block-start: var(--border-width) solid var(--border);
}

.template-under-hero-inner,
.template-logo-slider-inner {
  max-inline-size: var(--content-max);
  margin: 0 auto;
}

.template-under-hero-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: var(--space-6);
}

.site-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-inline: var(--space-3);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.site-stat + .site-stat {
  border-inline-start: var(--border-width) solid var(--border);
}

.site-stat dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.site-stat dd {
  order: -1;
  margin: 0 0 var(--space-1);
  font-family: var(--proof-font);
  font-size: var(--stat-size);
  line-height: var(--hero-title-leading);
}

.site-stat .site-stat-word {
  font-size: var(--stat-word-size);
}

.template-logo-slider-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-block-start: var(--border-width) solid var(--border);
}

.site-brand-list {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  min-inline-size: 100%;
  justify-content: space-around;
  list-style: none;
  padding: 0 var(--space-5) 0 0;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--proof-font);
  font-size: var(--text-lg);
}

.site-brand-list li {
  flex: 0 0 200px;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-brand-list .site-brand-small,
.site-brand-list .site-brand-sans {
  font-family: var(--c-font-1);
  font-size: var(--brand-small-size);
}

.template-logo-slider-caption {
  flex: 0 0 var(--trust-caption-width);
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border-width) solid var(--border);
  text-align: center;
  text-transform: uppercase;
  font-size: var(--trust-caption-size);
  color: var(--text-muted);
}

.site-brand-gallery {
  flex: 1;
  min-inline-size: 0;
  overflow-x: auto;
}

.site-brand-track { display: flex; }
.site-brand-list img { display: block; inline-size: 200px; block-size: 100px; object-fit: contain; }
.site-brand-list[aria-hidden] { display: none; }
.is-animated .site-brand-gallery { overflow: hidden; }
.is-animated .site-brand-track { inline-size: max-content; animation: brand-slide 35s linear infinite; }
.is-animated .site-brand-list { min-inline-size: 0; }
.is-animated .site-brand-list[aria-hidden] { display: flex; }
.template-logo-slider:hover .site-brand-track,
.site-brand-gallery:focus-visible .site-brand-track { animation-play-state: paused; }
@keyframes brand-slide {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .is-animated .site-brand-track { animation: none; }
}

@media (max-width: 36rem) {
  .template-logo-slider {
    display: none;
  }

  .template-under-hero-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .site-stat:nth-child(3) {
    border-inline-start: 0;
  }

  .template-logo-slider-inner {
    flex-direction: column;
    gap: var(--space-5);
  }

  .site-brand-gallery {
    inline-size: 100%;
    flex: auto;
  }

  .template-logo-slider-caption {
    flex-basis: auto;
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

body {
  margin: 0;
  background: var(--bg-2);
  color: var(--text-primary);
  font-family: var(--c-font-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.site-footer {
  --footer-muted: var(--text-muted);
  --footer-rule: color-mix(in srgb, var(--text-primary) 18%, var(--bg-3));
  padding: var(--space-8) var(--page-gutter) var(--space-5);
  background: var(--bg-3);
  color: var(--footer-muted);
  font-size: 0.75rem;
  line-height: 1.75;
}

.site-footer-inner { max-inline-size: var(--services-max); margin-inline: auto; }
.site-footer-main { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: start; gap: var(--space-7); padding-block-end: var(--space-7); }
.site-footer-main > * { min-inline-size: 0; }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.site-footer-logo { display: inline-flex; align-items: center; min-block-size: var(--control-min); max-inline-size: 100%; margin-block-end: var(--space-4); }
.site-footer-logo img { display: block; inline-size: 14rem; max-inline-size: 100%; block-size: auto; }
.site-footer-company { color: var(--text-primary); font-weight: var(--weight-medium); }
.site-footer-registration { display: inline-block; padding-block: var(--space-1); }
.site-footer .site-footer-label { margin-block-end: var(--space-4); color: var(--text-primary); font-size: 0.75rem; font-weight: var(--weight-medium); }
.site-footer address { font-style: normal; overflow-wrap: anywhere; }
.site-footer .site-footer-email { display: inline-flex; align-items: center; min-block-size: var(--control-min); margin-block-start: calc(-1 * var(--space-3)); color: var(--text-primary); font-size: var(--text-sm); text-decoration: underline; text-decoration-color: var(--footer-rule); text-underline-offset: var(--space-2); }
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--footer-rule);
}

.site-footer-policies { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer-bottom a { display: inline-flex; align-items: center; min-block-size: var(--control-min); }
.site-footer a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: var(--space-1); }
.site-footer a:active { color: var(--primary); }
.site-footer a:focus-visible { outline: var(--focus-width) solid var(--text-primary); outline-offset: var(--focus-offset); }

@media (max-width: 63.999rem) {
  .site-footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
  .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 47.999rem) {
  .site-footer { padding-block-start: var(--space-7); }
  .site-footer-main { grid-template-columns: minmax(0, 1fr); }
  .site-footer .site-footer-label { margin-block-end: var(--space-2); }
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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

[hidden] {
  display: none !important;
}

.header-slot {
  min-block-size: var(--header-height);
}

.site-header {
  --header-background: var(--bg-1);
  --header-text: var(--text-primary);
  position: relative;
  z-index: var(--header-layer);
  inline-size: 100%;
  background: var(--header-background);
  color: var(--header-text);
}

.site-header[data-background="bg-2"] { --header-background: var(--bg-2); }
.site-header[data-background="bg-3"] { --header-background: var(--bg-3); }
.site-header[data-background="bg-inverse"] { --header-background: var(--bg-inverse); }
.site-header[data-text="text-muted"] { --header-text: var(--text-muted); }
.site-header[data-text="text-subtle"] { --header-text: var(--text-subtle); }
.site-header[data-text="text-inverse"] { --header-text: var(--text-inverse); }

.site-header[data-transparent="true"]:not(.is-floating) {
  background: transparent;
  color: var(--text-inverse);
}

.site-header.is-floating {
  position: fixed;
  inset: 0 0 auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--motion-duration) var(--motion-ease),
    visibility var(--motion-duration);
  box-shadow: var(--shadow-raised);
}

.site-header.is-floating.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--header-gap);
  min-block-size: var(--header-height);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--space-3) var(--page-gutter);
}

.header-brand {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: var(--control-min);
  inline-size: var(--header-logo-width);
  max-inline-size: 100%;
}

.header-logo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1149 / 195;
  object-fit: contain;
}

.header-nav {
  display: none;
}

.header-menu-link {
  display: flex;
  align-items: center;
  min-block-size: var(--control-min);
  color: inherit;
  text-decoration: none;
  text-underline-offset: var(--space-2);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: color var(--motion-duration) var(--motion-ease);
}

.header-menu-link[aria-current] {
  text-decoration: underline;
}

.header-menu-link:hover {
  color: var(--primary-hover);
}

.header-menu-link:active {
  color: var(--primary-active);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
  min-inline-size: 0;
  gap: var(--space-2);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: var(--control-min);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background var(--motion-duration) var(--motion-ease);
}

.header-cta:hover { background: var(--primary-hover); }
.header-cta:active { background: var(--primary-active); }

.site-header.is-collapsed .header-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-2);
}

.site-header.is-collapsed .header-brand {
  inline-size: var(--header-logo-mobile-width);
}

.site-header.is-collapsed .header-nav {
  position: absolute;
  inline-size: max-content;
  max-inline-size: 100%;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.site-header.is-collapsed .header-actions {
  inline-size: 100%;
}

.site-header.is-collapsed .header-cta {
  padding-inline: var(--space-3);
}

.site-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--split-gap); inline-size: 100%; padding: var(--section-space) max(var(--page-gutter), calc((100% - var(--split-max)) / 2 + var(--page-gutter))); background: var(--bg-1); color: var(--text-primary); }
.split-media, .split-content { align-self: center; min-inline-size: 0; }
.split-content { order: -1; }
.split-media-inner, .split-content-inner { inline-size: 100%; min-inline-size: 0; }
.split-photo, .split-video { inline-size: 100%; block-size: auto; object-position: var(--split-media-position); border-radius: var(--radius-control); }
.split-photo { aspect-ratio: var(--split-media-ratio); object-fit: cover; }
.split-media:has(.split-video:not([hidden])), .split-media-inner:has(.split-video:not([hidden])) { inline-size: fit-content; max-inline-size: 100%; }
.split-media-inner > :not([hidden]) { display: block; }
.split-video { inline-size: auto; max-inline-size: 100%; aspect-ratio: auto; object-fit: contain; background: var(--bg-inverse); }
.split-content { overflow-wrap: anywhere; }
.split-eyebrow { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--section-eyebrow-size); font-weight: var(--weight-semibold); }
.split-title { margin: 0; font-family: var(--section-heading-font); font-size: var(--split-title-size); line-height: var(--hero-title-leading); font-weight: var(--weight-medium); white-space: pre-line; }
.split-intro { margin: var(--space-4) 0 0; color: var(--text-muted); max-inline-size: var(--split-copy-max); font-size: var(--text-sm); white-space: pre-line; }
.split-accordion { display: grid; gap: var(--space-3); margin-block-start: var(--space-6); }
.split-footer { display: none; margin: var(--space-6) 0 0; }
.split-link { color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--space-1); }
.split-link:visited { color: var(--link-visited); }
.split-link:hover { color: var(--link-hover); }
.split-link:active { color: var(--link-active); }
.split-item { border: var(--border-width) none var(--border); border-radius: var(--radius-control); }
.split-item summary { display: grid; grid-template-columns: var(--split-thumbnail-size) minmax(0, 1fr) var(--icon-size); gap: var(--space-4); align-items: center; padding: 0px; cursor: pointer; list-style: none; font-family: var(--section-heading-font); font-size: var(--split-row-title-size); font-weight: var(--weight-medium); border-radius: var(--radius-control); transition: background var(--motion-duration) var(--motion-ease); }
.split-item summary::-webkit-details-marker { display: none; }
.split-item summary:hover { background: var(--bg-hover); }
.split-item summary:active { background: var(--bg-active); }
.split-item summary:focus-visible, .split-link:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.split-icon { display: grid; place-items: center; inline-size: var(--split-thumbnail-size); block-size: var(--split-thumbnail-size); border-radius: 50%; background: var(--bg-2); }
.split-icon svg { inline-size: var(--icon-size); block-size: var(--icon-size); }
.split-item p { margin: 0 0 var(--space-4); padding-inline: calc(var(--split-thumbnail-size) + var(--space-4) + var(--space-4)) var(--space-4); color: var(--text-muted); max-inline-size: var(--split-copy-max); font-size: var(--text-sm); }
.split-indicator { position: relative; inline-size: var(--icon-size); block-size: var(--icon-size); }
.split-indicator::before, .split-indicator::after { content: ''; position: absolute; background: currentColor; inset: calc(50% - var(--split-indicator-stroke) / 2) var(--space-1); block-size: var(--split-indicator-stroke); }
.split-indicator::after { transform: rotate(90deg); }
.split-item[open] .split-indicator::after { display: none; }
@media (max-width: 63.999rem) {
  .site-split { grid-template-columns: minmax(0, 1fr); }
  .split-content { order: 0; }
  .split-photo { aspect-ratio: var(--split-media-mobile-ratio); }
}
@media (max-width: 36rem) {
  .split-title { font-size: var(--split-title-mobile-size); }
  .split-item summary { gap: var(--space-3); font-size: var(--split-row-title-mobile-size); }
  .split-item p { padding-inline-start: var(--space-4); }
}

.template-founder { padding: var(--space-7) var(--page-gutter); background: #fff; color: #111; }
.founder-inner { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); gap: var(--space-5); max-inline-size: 72rem; margin-inline: auto; padding-block-end: var(--space-6); border-block-end: none; }
.founder-copy { min-inline-size: 0; align-self: center; overflow-wrap: anywhere; }
.founder-eyebrow, .founder-name, .founder-role { margin: 0; color: #626572; font-size: 0.625rem; letter-spacing: 0; }
.founder-eyebrow { margin-block-end: var(--space-3); }
.founder-copy h2 { margin: 0 0 var(--space-5); font-family: var(--section-heading-font); font-weight: 400; font-size: 3.5rem; line-height: 1.04; letter-spacing: 0; }
.founder-paragraphs p { margin: 0 0 var(--space-3); color: #626572; font-size: 1rem; line-height: 1.5; }
.founder-portrait { display: grid; align-self: start; min-inline-size: 0; margin: 0; }
.founder-photo { position: relative; grid-area: 1 / 1; align-self: start; aspect-ratio: 299 / 335; overflow: hidden; border-radius: var(--radius-control); }
.founder-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.founder-info-card { grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 1; display: grid; align-content: space-between; gap: 1.25rem; inline-size: max(41%, 14.5rem); max-inline-size: 100%; aspect-ratio: 117 / 124; margin: 59.4% 0 0; padding: 1.25rem; background: #fff; border: 1px solid #ededeb; border-radius: var(--radius-control); box-shadow: 0 2px 10px #00000008; }
.founder-info-row { position: relative; display: grid; align-content: center; min-block-size: 2.75rem; padding-inline-start: 3.75rem; overflow-wrap: anywhere; }
.founder-info-row dt { font-family: var(--section-heading-font); font-size: 1.5rem; line-height: 1.2; }
.founder-info-row:last-child dt { font-size: 1.25rem; }
.founder-info-row dd { margin: 0.25rem 0 0; color: #626572; font-size: 0.75rem; line-height: 1.4; }
.founder-info-icon { position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: #f4f3f0; color: #454541; }
.founder-info-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.founder-role { margin-block-start: var(--space-1); }
@media (max-width: 63.999rem) {
  .founder-copy h2 { font-size: 2.5rem; }
  .founder-paragraphs p { font-size: 0.875rem; }
}
@media (max-width: 47.999rem) {
  .founder-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .founder-copy h2 { font-size: 2.25rem; }
  .founder-portrait { inline-size: 100%; max-inline-size: 36rem; justify-self: center; }
  .founder-info-card { inline-size: max(41%, 13.5rem); padding: 1rem; gap: 1rem; }
  .founder-info-row { min-block-size: 2.5rem; padding-inline-start: 3.25rem; }
  .founder-info-icon { inline-size: 2.5rem; block-size: 2.5rem; }
}

.site-hero {
  --hero-header-offset: 0px;
  position: relative;
  isolation: isolate;
  display: none;
  inline-size: 100%;
  aspect-ratio: var(--hero-ratio);
  margin-block-start: calc(-1 * var(--hero-header-offset));
  padding-block-start: var(--hero-header-offset);
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;
}

.hero-media { object-position: var(--hero-media-position); }
.hero-scrim { background: var(--bg-inverse); opacity: var(--hero-scrim-opacity); z-index: -1; }
.hero-inner {
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--section-space) var(--page-gutter);
  min-inline-size: 0;
}
.hero-box { inline-size: 100%; max-inline-size: var(--hero-box-max); overflow-wrap: anywhere; }
.hero-eyebrow { margin: 0 0 var(--space-4); font-size: var(--section-eyebrow-size); font-weight: var(--weight-semibold); }
.hero-title { margin: 0; font-family: var(--section-heading-font); font-size: var(--hero-title-size); line-height: var(--hero-title-leading); font-weight: var(--weight-medium); }
.hero-subtext { margin: var(--space-4) 0 0; font-size: var(--text-base); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.hero-actions:has(> [hidden]):not(:has(> a:not([hidden]))) { display: none; }
.hero-actions .header-cta { border: var(--border-width) solid transparent; }
.hero-actions .hero-secondary { background: var(--section-secondary-bg); color: var(--section-secondary-text); border-color: var(--section-secondary-border); border-style: none; }
.hero-actions .hero-secondary:hover { background: var(--section-secondary-hover-bg); color: var(--section-secondary-hover-text); }
.hero-actions .hero-secondary:active { background: var(--section-secondary-active-bg); color: var(--section-secondary-hover-text); }
.site-hero[data-alignment="center"] .hero-inner,
.site-hero[data-alignment="center"] .hero-actions { justify-content: center; }
.site-hero[data-alignment="right"] .hero-inner,
.site-hero[data-alignment="right"] .hero-actions { justify-content: flex-end; }
.site-hero[data-alignment="center"] .hero-box { text-align: center; }
.site-hero[data-alignment="right"] .hero-box { text-align: right; }
.hero-playback { position: absolute; inset-block-end: var(--space-4); inset-inline-end: var(--page-gutter); background: var(--bg-inverse); color: var(--text-inverse); }
@media (max-width: 47.999rem) {
  .hero-title { font-size: var(--hero-title-mobile-size); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: 0ms; }
}