:root {
  /* Color system */
  --color-text-black: #000;
  --color-white: #fff;
  --color-charcoal: #171918;
  --color-button-text: #151515;
  --color-secondary-button-text: #191b1a;
  --color-surface-dark: #1b1d1c;
  --color-surface-dark-card: #1d201e;
  --color-border-dark-card: #3f4340;
  --color-border-dark: #464a47;
  --color-text-nav: #4f5350;
  --color-text-field: #555;
  --color-status-available: #6bc37b;
  --color-text-footer: #717571;
  --color-border-inverse: #737773;
  --color-text-note: #777b78;
  --color-text-label-muted: #858985;
  --color-border-outline: #acada8;
  --color-text-process: #adb1ae;
  --color-text-process-intro: #b8bcb9;
  --color-border-input: #bfc1bc;
  --color-text-inverse-muted: #c5c8c5;
  --color-border-control: #c9cac5;
  --color-border-capability: #d1cfc6;
  --color-border-concierge: #d1d0c9;
  --color-border-capability-card: #d6d4cb;
  --color-border: #d9d9d2;
  --color-border-start-card: #d9d7cf;
  --color-border-panel: #deddd7;
  --color-text-inverse-soft: #e0e1df;
  --color-border-header: #e7e6e1;
  --color-surface-capability: #eeece5;
  --color-surface-concierge: #efeee8;
  --color-surface-nav-active: #f1f0eb;
  --color-surface-start: #f4f2eb;
  --color-text-inverse: #f4f4f1;
  --color-surface-page: #f5f4ef;
  --color-accent: #f36c21;
  --color-text-muted: #676b68;

  /* Image overlays and effects */
  --hero-overlay-mobile-top: rgba(10, 11, 11, .52);
  --hero-overlay-mobile-middle: rgba(10, 11, 11, .78);
  --hero-overlay-mobile-bottom: rgba(10, 11, 11, .98);
  --hero-overlay-desktop-left: rgba(10, 11, 11, .99);
  --hero-overlay-desktop-middle: rgba(10, 11, 11, .91);
  --hero-overlay-desktop-right: rgba(10, 11, 11, .22);
  --focus-color: var(--color-accent);
  --availability-ring-color: rgba(107, 195, 123, .14);
  --panel-shadow-color: rgba(20, 22, 20, .07);

  /* Typography */
  --font-family-sans: Arial, Helvetica, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-optional: 450;
  --font-weight-label: 680;
  --font-weight-bold: 700;
  --font-weight-strong: 750;
  --font-weight-heavy: 780;
  --font-size-eyebrow: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-ui: 14px;
  --font-size-small: 15px;
  --font-size-base: 16px;
  --font-size-large: 17px;
  --font-size-xl: 18px;
  --font-size-section-copy: 19px;
  --font-size-2xl: 20px;
  --font-size-card-title: 22px;
  --font-size-feature-title: 24px;
  --font-size-desktop-card-title: 28px;
  --font-size-phone: clamp(12px, 3.4vw, 14px);
  --font-size-lede-mobile: clamp(17px, 4.7vw, 20px);
  --font-size-heading-mobile: clamp(34px, 10vw, 44px);
  --font-size-hero-mobile: clamp(42px, 14vw, 58px);
  --font-size-lede-desktop: clamp(20px, 2vw, 23px);
  --font-size-heading-desktop: clamp(48px, 5vw, 68px);
  --font-size-concierge-desktop: clamp(34px, 4vw, 58px);
  --font-size-hero-desktop: clamp(64px, 6.5vw, 86px);
  --line-height-hero: .98;
  --line-height-menu: 1;
  --line-height-heading: 1.04;
  --line-height-feature: 1.15;
  --line-height-nav: 1.2;
  --line-height-control: 1.25;
  --line-height-title: 1.3;
  --line-height-label: 1.35;
  --line-height-meta: 1.45;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.55;
  --line-height-copy: 1.6;
  --line-height-copy-wide: 1.65;
  --line-height-copy-max: 1.7;
  --letter-spacing-hero: -.05em;
  --letter-spacing-hero-desktop: -.055em;
  --letter-spacing-heading: -.04em;
  --letter-spacing-card: -.025em;
  --letter-spacing-card-soft: -.02em;
  --letter-spacing-eyebrow: .14em;
  --letter-spacing-eyebrow-desktop: .16em;
  --letter-spacing-step: .15em;

  /* Shape and interaction */
  --radius-none: 0;
  --radius-small: 6px;
  --radius-control: 7px;
  --radius-card: 8px;
  --radius-card-large: 9px;
  --radius-panel: 10px;
  --radius-panel-large: 12px;
  --radius-round: 50%;
  --radius-pill: 999px;
  --focus-outline: 3px solid var(--focus-color);
  --availability-shadow: 0 0 0 4px var(--availability-ring-color);
  --panel-shadow-mobile: 0 12px 34px var(--panel-shadow-color);
  --panel-shadow-desktop: 0 18px 50px var(--panel-shadow-color);
  --hover-brightness: .96;

  /* Shared dimensions */
  --page-min-width: 280px;
  --tap-target-size: 44px;
  --menu-item-height: 46px;
  --button-height: 52px;
  --submit-height: 54px;
  --textarea-height: 128px;
  --desktop-header-height: 82px;
  --desktop-hero-height: 720px;
  --desktop-button-min-width: 180px;
  --desktop-card-height: 240px;
  --desktop-step-title-height: 58px;
  --visually-hidden-size: 1px;
  --hamburger-width: 20px;
  --hamburger-line-height: 2px;
  --status-dot-size: 8px;
  --menu-button-min-width: 82px;
  --logo-mobile-width: clamp(132px, 42vw, 172px);
  --logo-desktop-width: clamp(185px, 19vw, 215px);
  --logo-footer-mobile-width: 162px;
  --logo-footer-desktop-width: 178px;
  --content-copy-width: 610px;
  --content-callout-width: 650px;
  --content-hero-width: 680px;
  --content-form-width: 760px;
  --content-heading-width: 850px;
  --content-start-grid-width: 1240px;
  --content-result-grid-width: 1320px;
  --content-process-width: 1400px;

  /* Responsive layout tokens */
  --gutter: clamp(18px, 5vw, 28px);
  --section-space: clamp(64px, 15vw, 86px);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-padding-top: 16px;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: var(--page-min-width);
  margin: 0;
  overflow-x: hidden;
  background: var(--color-surface-page);
  color: var(--color-charcoal);
  font-family: var(--font-family-sans);
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
summary {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

header,
main,
footer,
nav,
section,
article,
div,
ol,
ul,
li {
  min-width: 0;
}

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

p,
h1,
h2,
h3,
strong,
span {
  overflow-wrap: break-word;
}

.site-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-areas:
    "brand menu"
    "call call"
    "nav nav";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 13px var(--gutter) 11px;
  border-bottom: 1px solid var(--color-border-header);
  background: var(--color-white);
}

.brand {
  grid-area: brand;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.brand img {
  width: var(--logo-mobile-width);
}

.header-call {
  grid-area: call;
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--tap-target-size);
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  font-size: var(--font-size-phone);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-control);
  text-align: center;
  white-space: normal;
}

.header-call span {
  display: inline;
  margin-right: 5px;
  color: var(--color-accent);
}

.nav-toggle {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}

.nav-trigger {
  grid-area: menu;
  display: inline-flex;
  width: auto;
  min-width: var(--menu-button-min-width);
  min-height: var(--tap-target-size);
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 9px;
  margin: 0;
  padding: 8px 11px;
  border: 2px solid var(--color-charcoal);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-text-black);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-menu);
  cursor: pointer;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: var(--hamburger-width);
  height: var(--hamburger-line-height);
  border-radius: var(--radius-pill);
  background: var(--color-charcoal);
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.hamburger-icon::before {
  top: -6px;
}

.hamburger-icon::after {
  top: 6px;
}

.nav-toggle:checked + .nav-trigger .hamburger-icon {
  background: transparent;
}

.nav-toggle:checked + .nav-trigger .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle:checked + .nav-trigger .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-toggle:focus-visible + .nav-trigger {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

nav {
  grid-area: nav;
  display: none;
  grid-template-columns: 1fr;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border-header);
}

.nav-toggle:checked ~ nav {
  display: grid;
}

nav > a,
.service-menu summary {
  display: flex;
  min-width: 0;
  min-height: var(--menu-item-height);
  align-items: center;
  justify-content: flex-start;
  padding: 10px 13px;
  border-radius: var(--radius-small);
  color: var(--color-text-nav);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-nav);
  text-align: left;
}

nav > a.active,
.service-menu.active > summary {
  background: var(--color-surface-nav-active);
  color: var(--color-text-black);
}

.service-menu {
  min-width: 0;
}

.service-menu summary {
  cursor: pointer;
  list-style: none;
}

.service-menu summary::-webkit-details-marker {
  display: none;
}

.service-menu summary::after {
  margin-left: auto;
  color: var(--color-accent);
  content: "+";
  font-weight: var(--font-weight-bold);
}

.service-menu[open] summary::after {
  content: "−";
}

.service-submenu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 4px 0 2px 16px;
}

.service-submenu a {
  display: flex;
  min-height: var(--menu-item-height);
  align-items: center;
  padding: 10px 13px;
  border-radius: var(--radius-small);
  color: var(--color-text-nav);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-nav);
}

.service-submenu a.active {
  background: var(--color-surface-nav-active);
  color: var(--color-text-black);
  font-weight: var(--font-weight-bold);
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: calc(100svh - 150px);
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-charcoal);
  color: var(--color-white);
}

.hero-photo {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(180deg, var(--hero-overlay-mobile-top) 0%, var(--hero-overlay-mobile-middle) 42%, var(--hero-overlay-mobile-bottom) 100%),
    url("/assets/images/make-parts.webp");
  background-position: 64% center;
  background-size: cover;
}

.hero-copy {
  width: 100%;
  padding: clamp(74px, 18vh, 116px) var(--gutter) 52px;
}

.eyebrow {
  margin: 0 0 15px;
  color: var(--color-accent);
  font: var(--font-weight-bold) var(--font-size-eyebrow) var(--font-family-mono);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--color-accent);
}

h1 {
  max-width: var(--content-hero-width);
  margin: 0 0 20px;
  font-size: var(--font-size-hero-mobile);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  text-wrap: balance;
}

.lede {
  max-width: var(--content-copy-width);
  margin: 0;
  color: var(--color-text-inverse-soft);
  font-size: var(--font-size-lede-mobile);
  line-height: var(--line-height-base);
}

.hero-starting-line {
  max-width: var(--content-callout-width);
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
}

.hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  width: 100%;
  min-height: var(--button-height);
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: var(--radius-control);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-control);
  text-align: center;
}

.button.primary {
  background: var(--color-accent);
  color: var(--color-button-text);
}

.button.secondary {
  background: var(--color-white);
  color: var(--color-secondary-button-text);
}

.button.outline {
  border: 1px solid var(--color-border-outline);
}

.availability {
  margin: 18px 0 0;
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-meta);
}

.availability i {
  display: inline-block;
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  margin-right: 8px;
  border-radius: var(--radius-round);
  background: var(--color-status-available);
  box-shadow: var(--availability-shadow);
}

.make-starts,
.build-examples,
.build-process,
.capability-proof,
.fit-review,
.concierge {
  padding: var(--section-space) var(--gutter);
}

.make-starts {
  background: var(--color-surface-start);
}

.build-examples {
  background: var(--color-white);
}

.make-section-heading,
.capability-copy,
.concierge-intro {
  max-width: var(--content-heading-width);
}

.make-section-heading h2,
.capability-copy h2,
.fit-review h2,
.concierge h2 {
  margin: 0 0 18px;
  font-size: var(--font-size-heading-mobile);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

.make-section-heading > p:last-child,
.capability-copy > p:not(.eyebrow) {
  max-width: var(--content-form-width);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-copy-wide);
}

.starting-point-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: var(--content-start-grid-width);
  margin: 36px auto 0;
}

.starting-point-grid article {
  min-width: 0;
  padding: 24px 22px 26px;
  border: 1px solid var(--color-border-start-card);
  border-radius: var(--radius-panel);
  background: var(--color-white);
}

.starting-point-grid span,
.build-steps > li > span {
  color: var(--color-accent);
  font: var(--font-weight-bold) var(--font-size-eyebrow) var(--font-family-mono);
  letter-spacing: var(--letter-spacing-step);
}

.starting-point-grid h3 {
  margin: 22px 0 9px;
  font-size: var(--font-size-feature-title);
  line-height: var(--line-height-feature);
  letter-spacing: var(--letter-spacing-card);
}

.starting-point-grid p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-copy);
}

.concierge {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  background: var(--color-surface-concierge);
}

.concierge-intro > p:not(.eyebrow):not(.concierge-phone) {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-large);
  line-height: var(--line-height-copy);
}

.concierge-phone {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-concierge);
  font-size: var(--font-size-base);
  line-height: var(--line-height-copy);
}

.concierge-phone a {
  color: var(--color-accent);
  font-weight: var(--font-weight-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.concierge-card {
  min-width: 0;
  padding: 22px 18px;
  border: 1px solid var(--color-border-panel);
  border-radius: var(--radius-panel);
  background: var(--color-white);
  box-shadow: var(--panel-shadow-mobile);
}

.chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 24px;
}

.chips button {
  width: 100%;
  min-height: var(--menu-item-height);
  padding: 10px 13px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: var(--color-charcoal);
  cursor: pointer;
  line-height: var(--line-height-label);
  text-align: left;
}

.chips button.selected {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-charcoal);
}

.callback-form label {
  display: grid;
  min-width: 0;
  gap: 8px;
  margin-bottom: 18px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
}

.callback-form label span {
  margin-left: 4px;
  color: var(--color-text-label-muted);
  font-weight: var(--font-weight-optional);
}

textarea,
input {
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--color-charcoal);
  font-size: var(--font-size-base);
}

textarea {
  min-height: var(--textarea-height);
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
}

.upload {
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px dashed var(--color-border-input);
  border-radius: var(--radius-small);
  color: var(--color-text-field);
}

.upload input {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 8px 0 0;
  border: 0;
  font-size: var(--font-size-ui);
}

.submit {
  display: flex;
  width: 100%;
  min-height: var(--submit-height);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-charcoal);
  font-weight: var(--font-weight-heavy);
  cursor: pointer;
  text-align: left;
}

.submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.form-error {
  margin: 12px 0 0;
  color: #9c271f;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-copy);
}

.form-note {
  margin: 12px 0 0;
  color: var(--color-text-note);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  text-align: center;
}

.form-success {
  padding: 12px 4px;
  text-align: center;
}

.form-success > span:first-child {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-charcoal);
  font-size: 28px;
  font-weight: var(--font-weight-heavy);
}

.form-success h3 {
  margin: 8px 0 12px;
  font-size: var(--font-size-feature-title);
  line-height: var(--line-height-feature);
}

.form-success p:not(.eyebrow) {
  margin: 0 auto 24px;
  color: var(--color-text-muted);
  line-height: var(--line-height-copy);
}

.form-success .button {
  width: 100%;
}

.build-process {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.build-process .make-section-heading > p:last-child {
  color: var(--color-text-process-intro);
}

.build-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: var(--content-process-width);
  margin: 38px auto 0;
  padding: 0;
  list-style: none;
}

.build-steps li {
  min-width: 0;
  padding: 23px 22px 25px;
  border: 1px solid var(--color-border-dark-card);
  border-radius: var(--radius-card-large);
  background: var(--color-surface-dark-card);
}

.build-steps strong {
  display: block;
  margin: 15px 0 8px;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-title);
}

.build-steps p {
  margin: 0;
  color: var(--color-text-process);
  font-size: var(--font-size-small);
  line-height: var(--line-height-copy);
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  max-width: var(--content-result-grid-width);
  margin: 38px auto 0;
}

.result-grid article {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.result-grid h3 {
  margin: 0 0 9px;
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-control);
  letter-spacing: var(--letter-spacing-card-soft);
}

.result-grid p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-copy);
}

.capability-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  background: var(--color-surface-capability);
}

.capability-copy .capability-note {
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-capability);
  font-size: var(--font-size-small) !important;
}

.capability-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--color-border-capability-card);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.capability-list strong {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-title);
}

.capability-list span {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
}

.fit-review {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  background: var(--color-surface-dark);
  color: var(--color-white);
}

.fit-review > div:first-child > p:last-child {
  max-width: var(--content-heading-width);
  margin: 0;
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-copy-max);
}

.fit-review-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fit-review .button.outline {
  border-color: var(--color-border-inverse);
  color: var(--color-white);
}

footer {
  display: grid;
  gap: 9px;
  padding: 32px var(--gutter) 38px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-footer);
  font-size: var(--font-size-sm);
}

footer img {
  width: var(--logo-footer-mobile-width);
  margin-bottom: 10px;
}

footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-links a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-link {
  color: inherit;
}

.card-link::after {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-accent);
  content: "View page →";
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
}

.gallery-section,
.faq-section,
.policy-section {
  padding: var(--section-space) var(--gutter);
  background: var(--color-surface-start);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: var(--content-result-grid-width);
  margin: 38px auto 0;
}

.gallery-card {
  overflow: hidden;
  border: 1px solid var(--color-border-start-card);
  border-radius: var(--radius-panel);
  background: var(--color-white);
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-card div {
  padding: 22px;
}

.gallery-card h3 {
  margin: 0 0 8px;
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-control);
}

.gallery-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-copy);
}

.faq-list,
.policy-content {
  max-width: var(--content-heading-width);
  margin: 38px auto 0;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  border: 1px solid var(--color-border-start-card);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.faq-list summary {
  padding: 20px 52px 20px 20px;
  cursor: pointer;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  float: right;
  margin-right: -32px;
  color: var(--color-accent);
  content: "+";
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list p {
  margin: 0;
  padding: 0 20px 22px;
  color: var(--color-text-muted);
  line-height: var(--line-height-copy);
}

.policy-content {
  padding: 28px 24px;
  border: 1px solid var(--color-border-start-card);
  border-radius: var(--radius-panel);
  background: var(--color-white);
}

.policy-content h2 {
  margin: 38px 0 10px;
  font-size: var(--font-size-feature-title);
  line-height: var(--line-height-title);
}

.policy-content h2:first-child {
  margin-top: 0;
}

.policy-content p,
.policy-content li {
  color: var(--color-text-muted);
  line-height: var(--line-height-copy);
}

.policy-content ul {
  padding-left: 22px;
}

.placeholder-notice {
  padding: 14px 16px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-concierge);
  color: var(--color-charcoal) !important;
  font-weight: var(--font-weight-label);
}

textarea:focus,
input:focus,
button:focus-visible,
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.nav-trigger:hover {
  background: var(--color-white);
  color: var(--color-text-black);
}

nav > a:hover,
.service-menu summary:hover,
.service-submenu a:hover {
  background: var(--color-surface-nav-active);
  color: var(--color-text-black);
}

.button:hover {
  filter: brightness(var(--hover-brightness));
}

@media (min-width: 1100px) {
  :root {
    --gutter: 7vw;
    --section-space: 115px;
  }

  .site-header {
    display: flex;
    min-height: var(--desktop-header-height);
    gap: clamp(18px, 2.5vw, 36px);
    padding: 0 5vw;
  }

  .brand {
    order: 0;
    flex: 0 1 auto;
    margin-right: auto;
  }

  .brand img {
    width: var(--logo-desktop-width);
  }

  .nav-toggle,
  .nav-trigger {
    display: none;
  }

  .site-header .nav-toggle ~ nav {
    display: flex;
  }

  nav {
    order: 1;
    flex: 0 1 auto;
    width: auto;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  nav > a,
  .service-menu summary {
    min-height: auto;
    justify-content: center;
    padding: 10px clamp(6px, .65vw, 10px);
    font-size: var(--font-size-ui);
    text-align: center;
    white-space: nowrap;
  }

  .service-menu {
    position: relative;
  }

  .service-menu summary::after {
    margin-left: 7px;
  }

  .service-submenu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    min-width: 210px;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--color-border-header);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--panel-shadow-mobile);
  }

  .service-submenu a {
    min-height: 42px;
    white-space: nowrap;
  }

  .header-call {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    min-height: var(--tap-target-size);
    justify-content: flex-end;
    padding: 5px 0;
    font-size: var(--font-size-ui);
    white-space: nowrap;
  }

  .hero {
    min-height: var(--desktop-hero-height);
    align-items: center;
  }

  .hero-photo {
    background-image:
      linear-gradient(90deg, var(--hero-overlay-desktop-left) 0%, var(--hero-overlay-desktop-middle) 38%, var(--hero-overlay-desktop-right) 70%),
      url("/assets/images/make-parts.webp");
    background-position: center;
  }

  .hero-copy {
    width: min(760px, 90vw);
    margin-left: 8vw;
    padding: 90px 0;
  }

  .eyebrow {
    margin-bottom: 20px;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-eyebrow-desktop);
  }

  h1 {
    margin-bottom: 26px;
    font-size: var(--font-size-hero-desktop);
    letter-spacing: var(--letter-spacing-hero-desktop);
  }

  .lede {
    font-size: var(--font-size-lede-desktop);
  }

  .hero-starting-line {
    padding-left: 18px;
    font-size: var(--font-size-large);
  }

  .hero-actions,
  .fit-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-actions {
    margin-top: 34px;
  }

  .button {
    width: auto;
    min-width: var(--desktop-button-min-width);
  }

  .availability {
    margin-top: 20px;
    font-size: var(--font-size-ui);
  }

  .make-starts,
  .build-examples {
    padding: 115px 7vw 125px;
  }

  .build-process {
    padding: 120px 7vw 130px;
  }

  .make-section-heading h2,
  .capability-copy h2,
  .fit-review h2 {
    margin-bottom: 24px;
    font-size: var(--font-size-heading-desktop);
  }

  .make-section-heading > p:last-child,
  .capability-copy > p:not(.eyebrow) {
    font-size: var(--font-size-section-copy);
  }

  .starting-point-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 60px;
  }

  .starting-point-grid article {
    min-height: var(--desktop-card-height);
    padding: 34px;
  }

  .starting-point-grid h3 {
    margin-top: 40px;
    font-size: var(--font-size-desktop-card-title);
  }

  .concierge {
    grid-template-columns: .8fr 1.2fr;
    align-items: start;
    gap: 7vw;
    padding: 110px 8vw;
  }

  .concierge-intro {
    position: sticky;
    top: 30px;
  }

  .concierge h2 {
    margin-bottom: 22px;
    font-size: var(--font-size-concierge-desktop);
  }

  .concierge-card {
    padding: 34px;
    border-radius: var(--radius-panel-large);
    box-shadow: var(--panel-shadow-desktop);
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
  }

  .chips button {
    width: auto;
    min-height: auto;
    padding: 11px 14px;
    border-radius: var(--radius-pill);
  }

  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .build-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 68px;
    border-top: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-dark);
  }

  .build-steps li {
    padding: 30px 26px 34px;
    border: 0;
    border-right: 1px solid var(--color-border-dark);
    border-radius: var(--radius-none);
    background: transparent;
  }

  .build-steps li:last-child {
    border-right: 0;
  }

  .build-steps strong {
    min-height: var(--desktop-step-title-height);
    margin: 32px 0 12px;
  }

  .result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 60px;
    border: 1px solid var(--color-border);
    background: var(--color-border);
  }

  .result-grid article {
    padding: 32px;
    border: 0;
    border-radius: var(--radius-none);
  }

  .capability-proof {
    grid-template-columns: .8fr 1.2fr;
    gap: 8vw;
    padding: 120px 7vw;
  }

  .capability-copy {
    position: sticky;
    top: 30px;
    align-self: start;
  }

  .capability-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .capability-list li {
    padding: 25px 26px;
    border-radius: var(--radius-card-large);
  }

  .fit-review {
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: 8vw;
    padding: 95px 7vw;
  }

  .fit-review > div:first-child > p:last-child {
    font-size: var(--font-size-large);
  }

  .fit-review-actions {
    display: grid;
    gap: 12px;
  }

  footer {
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 34px 5vw;
  }

  footer img {
    width: var(--logo-footer-desktop-width);
    margin: 0 auto 0 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 60px;
  }

  .policy-content {
    padding: 48px 52px;
  }
}