:root {
  --bg: #f8f5e8;
  --surface: #ffffff;
  --fg: #0f4f48;
  --muted: #4e5c58;
  --border: #4e8079;
  --accent: #f0721c;
  --danger: #b42318;
  --font-display: 'Cormorant Garamond', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius: 8px;
  --space: clamp(72px, 8vw, 120px);
  --container: 1240px;
}


* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
::selection { background: var(--fg); color: var(--surface); }

h1, h2, h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(48px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(36px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: 65ch; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space); }
.section--tight { padding-block: clamp(64px, 6vw, 88px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--border); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.section-head p { color: var(--muted); max-width: 44ch; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.wordmark span { display: block; margin-top: -8px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.consultation-logo { display: none; }
.consultation-back { display: none; }
@media (max-width: 760px) {
  .consultation-page .site-header {
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
    background: var(--fg);
    backdrop-filter: none;
  }
  .consultation-page .wordmark,
  .consultation-page .wordmark span {
    color: var(--bg);
  }
  .consultation-logo {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
  .consultation-page [data-od-id="back-home-link"] {
    display: none;
  }
  .consultation-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--bg) 52%, transparent);
    border-radius: 50%;
    color: var(--bg);
  }
  .consultation-back svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 700; }
.main-nav a { padding-block: 12px; }
.main-nav a:hover { color: var(--muted); }
.main-nav a:not(.nav-cta) { display: inline-block; transform-origin: left center; transition: transform .2s ease, color .2s ease; }
.main-nav a:not(.nav-cta):hover { transform: scale(1.06); }
.nav-cta, .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 22px;
  background: var(--accent);
  color: var(--surface);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.btn[type="button"] { font: inherit; }
.copy-feedback {
  position: fixed;
  z-index: 1000;
  max-width: calc(100vw - 32px);
  transform: translate(-50%, 8px);
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 700 14px/1.3 var(--font-body);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.copy-feedback--on-dark {
  background: var(--surface);
  color: var(--fg);
}
.copy-feedback--on-light {
  background: var(--fg);
  color: var(--surface);
}
.copy-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.nav-cta:hover, .btn:hover { transform: translateY(-2px); }
.main-nav .nav-cta { border-color: var(--fg); background: var(--fg); }
.btn--secondary { border-color: var(--border); background: var(--surface); color: var(--fg); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--fg); }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); }

.hero { padding: 28px 0 0; }
.hero-panel {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
}
.hero-visual { position: absolute; inset: 0; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-wash { position: absolute; inset: 0; background: transparent; }
.hero-content { position: relative; z-index: 2; width: 62%; min-height: 680px; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 76px); }
.hero-content h1 { font-size: clamp(48px, 5vw, 68px); }
.hero-content p { margin-top: 24px; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-note { margin-top: 34px; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-weight: 700; }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius); background: var(--fg); }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); border-top: 0; background: var(--surface); }
.trust-item { padding: 24px; border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
.trust-item:last-child { border-right: 0; }
.trust-item strong { display: block; font-family: var(--font-display); font-size: 22px; }
.trust-item span { color: var(--muted); font-size: 13px; }

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.service-card { min-height: 370px; display: flex; flex-direction: column; padding: 34px 30px 30px; border: 0; border-right: 1px solid color-mix(in srgb, var(--border) 45%, transparent); border-radius: 0; background: transparent; transition: background .2s ease; }
.service-card:last-child { border-right: 0; }
.service-card:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); }
.service-icon { width: auto; height: auto; display: block; margin-bottom: auto; border: 0; border-radius: 0; color: var(--fg); }
.service-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { max-width: 11ch; font-size: clamp(26px, 2.2vw, 34px); }
.service-card p { margin-top: 16px; color: var(--muted); font-size: 15px; }
.service-card a { margin-top: 26px; padding-top: 0; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

.delivery { background: var(--fg); color: var(--bg); }
.delivery h2, .delivery h3 { color: var(--bg); }
.delivery .eyebrow, .delivery .section-head p { color: var(--bg); }
.delivery-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.delivery-tabs { display: grid; gap: 0; border-top: 1px solid color-mix(in srgb, var(--bg) 34%, transparent); }
.delivery-tab { width: 100%; min-height: 78px; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 34%, transparent); border-radius: 0; background: transparent; color: var(--bg); text-align: left; cursor: pointer; }
.delivery-tab[aria-selected='true'] { background: transparent; color: var(--accent); }
.delivery-tab span:last-child { font-size: 12px; letter-spacing: 0.08em; }
.delivery-detail { min-height: 330px; padding: 8px 0 8px 48px; border: 0; border-left: 1px solid color-mix(in srgb, var(--bg) 38%, transparent); border-radius: 0; }
.delivery-detail p { margin-top: 18px; color: var(--bg); font-size: 17px; }
.delivery-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); }
.delivery-fact { padding: 16px 18px 0 0; border: 0; font-size: 13px; }

.delivery-reference {
  padding: 28px 20px 84px;
  background: var(--bg);
}
.delivery-reference-shell {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 68px 78px 58px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.delivery-reference-head {
  display: grid;
  width: fit-content;
  max-width: 100%;
  justify-items: center;
  gap: 12px;
  margin: 0 auto 42px;
  text-align: center;
}
.delivery-reference-head h2 {
  font-size: clamp(52px, 5.2vw, 74px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.delivery-options {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 42px;
  align-items: end;
  margin-bottom: 54px;
}
.delivery-option {
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-align: center;
}
.delivery-image-mask {
  width: 100%;
  height: 264px;
  padding: 0;
  border: 1px solid transparent;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease, padding .2s ease, transform .2s ease;
}
.delivery-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.delivery-image-home {
  width: min(100%, 272px);
  height: 272px;
  border-radius: 58% 42% 56% 44% / 46% 56% 44% 54%;
}
.delivery-image-community {
  width: min(100%, 272px);
  height: 272px;
  border-radius: 44% 56% 44% 56% / 58% 42% 56% 44%;
}
.delivery-image-online {
  width: min(100%, 272px);
  height: 272px;
  border-radius: 55% 45% 58% 42% / 44% 56% 42% 58%;
}
.delivery-option:not(.is-active) .delivery-image-mask {
  opacity: .72;
  filter: saturate(.78) contrast(.96);
  transform: scale(.96);
}
.delivery-option.is-active .delivery-image-mask {
  padding: 0;
  border: 3px solid var(--accent);
  box-shadow: none;
  transform: translateY(-8px) scale(1.035);
}
.delivery-option-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 21px);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.delivery-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius);
  background: var(--border);
}
.delivery-option.is-active .delivery-dot {
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
.delivery-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  padding: clamp(28px, 3.2vw, 48px);
  border: 1px solid color-mix(in srgb, var(--border) 26%, transparent);
  border-radius: calc(var(--radius) * 8) calc(var(--radius) * 8) calc(var(--radius) * 2) calc(var(--radius) * 2);
  background: var(--surface);
}
.delivery-story-copy {
  max-width: 880px;
  padding-right: 88px;
}
.delivery-story h3 {
  max-width: 760px;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.delivery-copy {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.delivery-copy p {
  margin: 0;
  max-width: 94ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}
.delivery-controls {
  display: inline-flex;
  gap: 14px;
  padding-top: 6px;
}
.delivery-arrow {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.delivery-arrow-next {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
  opacity: 1;
}

.why-choose {
  position: relative;
  padding: 86px 20px clamp(118px, 9vw, 148px);
  overflow: hidden;
  background: var(--bg);
}
.why-choose::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(104px, 9vw, 154px);
  background: var(--bg);
  z-index: 0;
}
.why-choose-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin: 0 auto;
}
.why-choose-head {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 0 auto 24px;
  text-align: center;
}
.why-choose-head h2 {
  font-size: clamp(52px, 4.4vw, 70px);
  line-height: .98;
  letter-spacing: -0.03em;
}
.why-section-mark,
.why-card-mark {
  position: relative;
  display: block;
  width: 130px;
  height: 14px;
}
.why-section-mark { width: 54px; }
.why-section-mark::before,
.why-card-mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--accent);
}
.why-section-mark::after,
.why-card-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  transform: translateX(-50%);
}
.why-choose-kicker {
  color: var(--fg);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.18;
}
.why-choose-intro {
  max-width: 720px;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.45;
}
.why-choose-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin: 0 auto;
  max-width: 1160px;
  padding: 26px 28px 32px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: calc(var(--radius) * 3);
  box-shadow: none;
}
.why-choose-card {
  display: grid;
  grid-template-rows: 168px 84px 14px 58px 112px auto;
  justify-items: center;
  gap: 18px;
  min-height: 588px;
  padding: 0 36px;
  text-align: center;
}
.why-choose-card + .why-choose-card {
  border-left: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
}
.why-choose-icon {
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
  border-radius: calc(var(--radius) * 3.5);
  color: var(--fg);
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}
.why-choose-icon img {
  width: 96px;
  height: 96px;
  display: block;
  object-fit: contain;
}
.why-choose-card h3 {
  min-height: 84px;
  display: grid;
  place-items: center;
  max-width: 21ch;
  margin-top: 6px;
  font-size: clamp(25px, 1.9vw, 30px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.why-choose-card[data-od-id="why-choose-card-team"] h3 {
  max-width: 20ch;
}
.why-choose-card[data-od-id="why-choose-card-abilities"] h3 {
  max-width: 22ch;
}
.why-card-mark {
  width: 170px;
}
.why-card-mark::after {
  border-color: var(--surface);
}
.why-choose-card p {
  display: grid;
  place-items: center;
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}
.why-choose-card .why-choose-lead {
  min-height: 58px;
  max-width: 30ch;
  color: var(--fg);
  font-weight: 700;
  line-height: 1.4;
}
.why-choose-card p:not(.why-choose-lead) {
  min-height: 112px;
}
.why-choose-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-self: end;
  padding-top: 6px;
}
.why-choose-tags span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
  border-radius: 999px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.why-select-row,
.who-select-row {
  display: none;
}
.who-help {
  position: relative;
  padding: 72px 20px clamp(138px, 10.2vw, 172px);
  overflow: hidden;
  background: var(--bg);
}
.who-help::before {
  display: none;
}
.who-help::after {
  display: none;
}
.who-help-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1500px);
  margin: 0 auto;
}
.who-help-head {
  display: grid;
  justify-items: center;
  gap: 15px;
  max-width: 920px;
  margin: 0 auto 34px;
  text-align: center;
}
.who-help-head h2 {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(60px, 6.25vw, 96px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -0.035em;
}
.who-help-head p {
  max-width: 920px;
  color: var(--fg);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.38;
  text-wrap: pretty;
}
.who-help-head .who-help-kicker {
  max-width: none;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.18;
}
.who-help-mark,
.who-help-card-mark {
  position: relative;
  width: 176px;
  height: 12px;
  display: block;
}
.who-help-mark::before,
.who-help-mark::after,
.who-help-card-mark::before,
.who-help-card-mark::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 76px;
  height: 2px;
  background: var(--accent);
}
.who-help-mark::before,
.who-help-card-mark::before { left: 0; }
.who-help-mark::after,
.who-help-card-mark::after { right: 0; }
.who-help-mark {
  margin-top: -2px;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 6px, transparent 7px);
}
.who-help-mark::before,
.who-help-mark::after {
  width: 74px;
}
.who-help-card-mark {
  width: 214px;
  height: 16px;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 4px, transparent 5px);
}
.who-help-card-mark::before,
.who-help-card-mark::after {
  top: 7px;
  width: calc(50% - 16px);
  height: 1px;
  background: color-mix(in srgb, var(--border) 54%, transparent);
}
.who-help-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  min-height: 536px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: calc(var(--radius) * 4);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--fg) 14%, transparent);
}
.who-help-card {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  justify-items: center;
  gap: 14px;
  min-height: 536px;
  padding: 36px 64px 30px;
  text-align: center;
}
.who-help-card + .who-help-card {
  border-left: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
}
.who-help-icon-frame {
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: calc(var(--radius) * 3);
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fg) 9%, transparent);
}
.who-help-icon-frame::before {
  content: "";
  width: 78px;
  height: 78px;
  border: 1px dashed color-mix(in srgb, var(--border) 66%, transparent);
  border-radius: calc(var(--radius) * 2);
}
.who-help-icon-frame:has(img)::before {
  content: none;
}
.who-help-icon-frame img {
  width: 78px;
  height: 78px;
  display: block;
  object-fit: contain;
}
.who-help-card h3 {
  max-width: 22ch;
  margin-top: 4px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.55vw, 42px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.025em;
}
.who-help-card p {
  max-width: 34ch;
  color: var(--fg);
  font-size: 18px;
  line-height: 1.42;
  text-wrap: pretty;
}
.who-help-card .who-help-lead {
  max-width: 33ch;
  font-weight: 700;
  line-height: 1.34;
}
.who-help-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.who-help-tags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
  border-radius: calc(var(--radius) * 3);
  background: color-mix(in srgb, var(--surface) 56%, var(--bg));
  font-size: 15px;
  font-weight: 700;
}

/* About Us — homepage section (Who We Are / Our Vision / Our Mission),
   CTA banner, and the standalone brand footer used only on this section. */
.about-page {
  position: relative;
  padding: 52px 20px clamp(96px, 8vw, 128px);
  background: var(--bg);
}
.about-inner {
  position: relative;
  width: min(100%, 1160px);
  margin: 0 auto;
}
.about-head {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 48px;
  text-align: center;
}
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.about-eyebrow::before, .about-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--accent); }
.about-head h2 { font-size: clamp(48px, 5.4vw, 68px); line-height: 1; letter-spacing: -0.03em; }
.about-head p { color: var(--muted); font-size: 17px; }

.about-body { display: grid; gap: 34px; margin-bottom: clamp(48px, 5vw, 64px); }
.about-block h3 { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; }
.about-block-mark { display: none; }
.about-block p { max-width: 78ch; color: var(--fg); font-size: 16px; line-height: 1.6; }
.about-block-subtitle { max-width: 78ch; margin-top: 18px; color: var(--fg); font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.45; }
.about-block-subtitle + p { margin-top: 8px; }
.about-block p + p { margin-top: 12px; }

.about-cta {
  position: relative;
  display: block;
  min-height: clamp(320px, 38vw, 420px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fg);
}
.about-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; z-index: 0; }
.about-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--fg) 0%, var(--fg) 32%, color-mix(in srgb, var(--fg) 50%, transparent) 42%, transparent 52%);
}
.about-cta-copy { position: relative; z-index: 2; max-width: 560px; padding: clamp(36px, 4.6vw, 56px); color: var(--surface); }
.about-cta-copy h3 { color: var(--surface); font-size: clamp(30px, 3vw, 38px); line-height: 1.1; }
.about-cta-copy p { margin-top: 12px; color: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 16px; }
.about-cta-phone {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--surface);
  font-size: 20px;
  font-weight: 700;
}
.about-cta-phone[type="button"] {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.about-cta-phone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.about-cta-actions .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-cta-actions .btn--secondary { border-color: color-mix(in srgb, var(--surface) 50%, transparent); background: transparent; color: var(--surface); }

.about-footer { padding: clamp(56px, 6vw, 80px) 0 36px; border-top: 0; }
.about-footer-inner { display: grid; justify-items: center; gap: 4px; text-align: center; }
.about-footer-brand { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.about-footer-logo { width: 54px; height: 54px; object-fit: contain; }
.about-footer-brand span { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--fg); transform: translateY(-1px); }
.about-footer-tagline { color: var(--fg); font-size: 17px; font-weight: 700; }
.about-footer-copy { max-width: 62ch; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.about-footer-social { display: flex; gap: 14px; margin-top: 22px; }
.about-footer-social button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.about-footer-social button:hover { border-color: var(--fg); color: var(--accent); }
.about-footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.country-acknowledgement { display: grid; justify-items: center; gap: 14px; width: min(100%, 1160px); margin-top: 48px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent); text-align: center; background: transparent; }
.country-copy h2 { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; color: var(--fg); }
.country-copy p { max-width: 70ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.flag-placeholders { display: flex; gap: clamp(12px, 2vw, 24px); align-items: center; justify-content: center; }
.flag-img { width: 54px; height: 32px; display: block; border-radius: 2px; object-fit: cover; }
.about-footer .footer-bottom { justify-content: center; margin-top: 28px; padding-top: 0; border-top: 0; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 900px) {
  .about-cta { min-height: clamp(280px, 60vw, 380px); }
  .about-cta-copy { max-width: 100%; padding-top: clamp(56px, 8vw, 80px); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .about-cta { display: flex; align-items: center; }
  .about-cta-copy { padding-top: 0; transform: translateY(30%); }
  .about-cta::before { background: linear-gradient(90deg, var(--fg) 0%, var(--fg) 32%, color-mix(in srgb, var(--fg) 50%, transparent) 42%, transparent 52%); }
}

@media (max-width: 560px) {
  .about-page { padding: 54px 14px 72px; }
  .about-head h2 { font-size: clamp(38px, 11vw, 48px); }
  .about-cta-copy { padding: 28px 22px; }
  .flag-placeholders { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .country-acknowledgement { width: calc(100% + 12px); max-width: none; }
  /* The actual .about-inner phone-padding override lives further down,
     right after the unified-card rule it needs to beat (see the comment
     there) — a copy here would be dead code, since a later same-specificity
     rule always wins regardless of where the earlier one sits in the file. */
  /* .about-page's own outer padding only dropped to 14px at the ≤560px
     breakpoint (see below); .join-us-section drops to 14px across the
     entire ≤760px range. Between 561–760px .about-page was still sitting
     on its 20px base, so "Who We Are" sat 6px further right than the
     Join Us Name field at those widths — the actual remaining cause of
     the misalignment. Matching the 14px value across the same ≤760px
     range makes both sections' left edge identical everywhere on mobile. */
  .about-page { padding-inline: 14px; }
}


.reveal { opacity: 1; transform: none; }
.reveal.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.will-reveal.is-visible { opacity: 1; transform: none; }

/* Consultation */
.consultation-page { min-height: 100vh; }
.consultation-page .consultation-header {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
  background: var(--fg);
  backdrop-filter: none;
}
.consultation-page .consultation-header-inner {
  width: min(calc(100% - 56px), var(--container));
  min-height: 104px;
  gap: 24px;
}
.consultation-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.1vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.consultation-page .consultation-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-right: -5px;
}
.consultation-home-cta {
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  top: 4px;
  padding: 0;
  background: transparent;
  color: var(--bg);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.consultation-home-cta:hover { color: var(--accent); }
.consultation-home-cta:active { color: color-mix(in srgb, var(--accent) 75%, var(--surface)); }
@media (max-width: 760px) {
  .consultation-page .consultation-header-inner {
    width: min(calc(100% - 28px), var(--container));
    min-height: 92px;
  }
  .consultation-page [data-od-id="back-home-link"] { display: inline-flex; }
  .consultation-page .consultation-logo { width: 52px; height: 52px; margin-right: -5px; }
  .consultation-home-cta {
    min-width: 0;
    min-height: 0;
    padding-inline: 0;
    font-size: 19px;
  }
}
.consultation-main { padding: clamp(48px, 7vw, 92px) 0; }
.consultation-intro { text-align: center; max-width: 820px; margin: 0 auto 42px; }
.consultation-intro p { margin: 18px auto 0; color: var(--muted); }
.stepper { max-width: 820px; margin: 0 auto 34px; display: grid; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.step::before { content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--border) 45%, transparent); z-index: 0; }
.step:first-child::before { left: 50%; }
.step:last-child::before { right: 50%; }
.step-num { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.step.is-active, .step.is-complete { color: var(--fg); }
.step.is-active .step-num { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.step.is-complete .step-num { background: var(--surface); }
.consultation-card { max-width: 820px; margin: 0 auto; padding: clamp(28px, 5vw, 52px); border: 1px solid color-mix(in srgb, var(--border) 45%, transparent); border-radius: var(--radius); background: var(--surface); }
.form-step[hidden] { display: none; }
.form-step > p { margin-top: 12px; color: var(--muted); }
.field-group { margin-top: 30px; }
.field-label { display: block; margin-bottom: 10px; font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { min-height: 64px; display: flex; align-items: center; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.choice input:checked + span { border-color: var(--fg); color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--fg); }
.choice input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
/* 同意条款未勾选时的错误高亮:红色边框(保留到勾选)+ 一次抖动提示 */
.choice.consent-invalid span { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; background: color-mix(in srgb, #c0392b 6%, var(--surface)); animation: consent-shake 0.4s ease; }
@keyframes consent-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .choice.consent-invalid span { animation: none; }
}
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; border: 1px solid color-mix(in srgb, var(--border) 58%, transparent); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); color: var(--fg); transition: border-color 160ms ease, box-shadow 160ms ease; }
.field textarea { min-height: 130px; resize: vertical; }
.field small { color: var(--muted); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--bg)); }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); outline: none; }
.field-error { min-height: 18px; margin-top: 2px; color: var(--danger); font-size: 13px; font-weight: 700; }
.form-error { min-height: 24px; margin-top: 16px; color: var(--danger); font-size: 14px; font-weight: 700; }
.form-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; }
.review-list { display: grid; gap: 12px; margin-top: 28px; }
.review-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
.review-row dt { color: var(--muted); }
.review-row dd { margin: 0; font-weight: 700; }
.success-panel { text-align: center; padding: 22px 0; }
.success-mark { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid var(--fg); border-radius: var(--radius); font-size: 24px; }
.success-panel p { margin: 14px auto 0; color: var(--muted); }
.success-panel .btn { margin-top: 28px; }

@media (max-width: 1024px) {
  .main-nav { gap: 18px; }
  .main-nav > a:not(.nav-cta) { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .main-nav.is-open { position: fixed; inset: 83px 0 auto; display: grid; gap: 0; padding: 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .main-nav.is-open > a:not(.nav-cta) { display: block; min-height: 52px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); }
  .main-nav.is-open .nav-cta { margin-top: 14px; }
  .hero-content { width: 68%; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .delivery-layout, .process-wrap, .faq-layout { gap: 42px; }
  .delivery-reference-shell { padding: 56px 42px 48px; }
  .delivery-options { gap: 24px; }
  .delivery-image-mask { height: 220px; }
  .delivery-image-home,
  .delivery-image-community,
  .delivery-image-online { width: 220px; height: 220px; }
  .why-choose-panel { padding: 42px 24px 50px; }
  .why-choose-card { grid-template-rows: 138px 76px 14px 56px 112px auto; min-height: 500px; padding-inline: 24px; }
  .why-choose-icon { width: 138px; height: 138px; }
  .why-choose-icon img { width: 100px; height: 100px; }
  .why-choose-card h3 { font-size: clamp(25px, 3vw, 31px); }
  .who-help-panel { min-height: 500px; }
  .who-help-card { min-height: 500px; padding-inline: 26px; }
  .who-help-icon-frame { width: 126px; height: 126px; }
  .who-help-icon-frame::before { width: 70px; height: 70px; }
  .who-help-icon-frame img { width: 70px; height: 70px; }
  .who-help-card h3 { font-size: clamp(28px, 3.2vw, 36px); }
  .who-help-card p { font-size: 16px; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  /* Keep Why Choose on the same spacious three-card system as Who We Help. */
  .why-choose-head {
    gap: 15px;
    max-width: 920px;
    margin-bottom: 34px;
  }

  .why-choose-head h2 {
    font-size: clamp(60px, 6.25vw, 96px);
    line-height: .92;
    letter-spacing: -0.035em;
  }

  .why-choose-kicker {
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.18;
  }

  .why-choose-intro {
    max-width: 920px;
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.38;
  }

  .why-choose-panel {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 780px;
    padding: 0;
    overflow: hidden;
    border-radius: calc(var(--radius) * 4);
    background: var(--bg);
    border-color: color-mix(in srgb, var(--border) 28%, transparent);
    box-shadow: none;
  }

  .why-choose-card {
    grid-template-rows: 138px 124px 14px 92px 156px auto;
    gap: 18px;
    min-height: 780px;
    min-width: 0;
    padding: 36px 28px 30px;
    justify-items: center;
    text-align: center;
  }

  .why-choose-icon {
    width: 136px;
    height: 136px;
    border-radius: calc(var(--radius) * 3);
    background: color-mix(in srgb, var(--surface) 72%, var(--bg));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--fg) 9%, transparent);
  }

  .why-choose-icon,
  .why-choose-icon img,
  .why-choose-card .why-card-mark {
    justify-self: center;
  }

  .why-choose-icon img { width: 78px; height: 78px; margin: auto; }

  .why-choose-card h3 {
    max-width: 22ch;
    min-height: 0;
    margin-top: 4px;
    font-size: clamp(28px, 2.25vw, 34px);
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
    justify-self: center;
    width: 100%;
    text-align: center;
  }

  .why-choose-card .why-choose-lead {
    min-height: 0;
    max-width: 33ch;
    font-size: 18px;
    line-height: 1.34;
    justify-self: center;
    text-align: center;
  }

  .why-choose-card p:not(.why-choose-lead) {
    min-height: 156px;
    max-width: 34ch;
    font-size: 18px;
    line-height: 1.42;
    justify-self: center;
    text-align: center;
  }

  .why-choose-card .why-choose-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    gap: 10px;
    margin-top: 18px;
    padding-top: 0;
    transform: translateY(10%);
    justify-self: center;
  }

  .why-choose-tags span {
    min-height: 34px;
    padding: 6px 20px;
    border-radius: calc(var(--radius) * 3);
    background: color-mix(in srgb, var(--surface) 56%, var(--bg));
    font-size: 15px;
  }
  .why-choose-card .why-choose-tags span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .who-help-card {
    grid-template-rows: 138px 106px 14px 104px 156px auto;
    align-content: start;
    gap: 18px;
    min-height: 748px;
  }

  .who-help-panel {
    min-height: 748px;
  }

  .who-help-card .who-help-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-self: start;
    width: min(190px, 100%);
    gap: 10px;
    margin-top: 18px;
    transform: translateY(10%);
  }

  .who-help-card p:not(.who-help-lead) {
    min-height: 156px;
    align-self: start;
  }

  .who-help-card .who-help-tags span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Mobile hero: editorial overlap inspired by the supplied portrait reference.
   Copy stays in normal flow; the care image occupies the right side until the
   full-width actions, followed by a three-row service summary. */
@media (max-width: 760px) {
  .home-page .site-header {
    border-bottom: 0;
    background: var(--bg);
  }

  .home-page .header-inner {
    width: 100%;
    min-height: 68px;
    padding: 8px 18px;
    justify-content: flex-end;
  }

  .home-page .home-brand { display: none; }

  .home-page .menu-toggle {
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--fg);
  }

  .home-page .menu-toggle svg {
    width: 31px;
    height: 31px;
    stroke-width: 1.7;
  }

  .home-page .main-nav.is-open { inset: 68px 0 auto; }

  .home-page .hero { padding: 0; }

  .home-page .hero-panel {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: clip;
    border: 0;
    border-radius: 0;
    background: var(--bg);
  }

  .home-page .hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 18px 24px 28px;
    justify-content: flex-start;
  }

  .home-page .hero-content .eyebrow {
    max-width: 250px;
    margin: 0 0 34px;
    gap: 13px;
    color: var(--accent);
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: .11em;
  }

  .home-page .hero-content .eyebrow::before {
    width: 16px;
    height: 20px;
    flex: 0 0 auto;
    border: 2px solid var(--accent);
    border-radius: 50% 50% 50% 0;
    background: transparent;
    transform: rotate(-45deg);
  }

  .home-page .hero-content h1 {
    max-width: 68%;
    font-size: clamp(40px, 10.6vw, 46px);
    line-height: .94;
    letter-spacing: -0.025em;
  }

  .home-page .hero-title-line:nth-child(1) { width: 5.35ch; }
  .home-page .hero-title-line:nth-child(2) { width: 10ch; }
  .home-page .hero-title-line:nth-child(3) { width: 10ch; }

  .home-page .hero-content > p {
    position: relative;
    z-index: 2;
    width: 48%;
    max-width: 210px;
    margin-top: 36px;
    color: var(--fg);
    font-size: 15px;
    line-height: 1.62;
  }

  .home-page .hero-visual {
    position: absolute;
    z-index: 1;
    top: clamp(150px, 40vw, 176px);
    right: -11%;
    width: 64%;
    height: clamp(338px, 96vw, 412px);
    overflow: hidden;
    border-radius: 54% 0 0 46% / 20% 0 0 55%;
    background: var(--surface);
  }

  .home-page .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }

  .home-page .hero-visual img:hover { transform: none; }
  .home-page .hero-visual::before,
  .home-page .hero-visual::after,
  .home-page .hero-wash { display: none; }

  .home-page .hero-actions {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    gap: 12px;
    margin-top: 48px;
  }

  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    border-radius: calc(var(--radius) * 2);
    padding: 12px 20px;
    font-size: 16px;
  }

  .home-page .hero-actions .btn:first-child {
    justify-content: flex-start;
    gap: 16px;
  }

  .home-page .hero-actions .btn:first-child::before {
    content: '→';
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface);
    color: var(--fg);
    font-size: 22px;
    line-height: 1;
  }

  .home-page .hero-actions .btn--secondary {
    justify-content: flex-start;
    padding-left: 31px;
  }

  .home-page .hero-facts {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 26px 0 0;
    padding: 0;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
  }

  .home-page .hero-facts::before { display: none; }

  .home-page .hero-fact,
  .home-page .hero-fact:first-child {
    position: relative;
    min-height: 78px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    padding: 12px 4px 12px 0;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
    color: var(--fg);
    font-size: 15px;
    line-height: 1.4;
  }

  .home-page .hero-fact::after {
    content: '›';
    grid-column: 3;
    grid-row: 1;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
  }

  .home-page .hero-fact svg {
    grid-column: 1;
    grid-row: 1;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--border) 12%, var(--surface));
    stroke-width: 1.5;
  }

  .home-page .hero-fact:nth-child(2) svg {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }

  .home-page .hero-fact span {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 760px) {
  .home-page .site-header .menu-toggle { color: var(--fg); }
}

/* Desktop: copy reads as a paragraph with one consistent left edge. */
@media (min-width: 1025px) {
  .why-choose-panel {
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 26px 0 32px;
  }

  .why-choose-card {
    grid-template-rows: 138px 76px 12px 56px 104px auto;
    align-content: start;
    gap: 14px;
    min-height: 500px;
    min-width: 0;
    justify-items: center;
    text-align: center;
  }

  .why-choose-card h3 {
    display: grid;
    place-items: center;
    max-width: 22ch;
    min-height: 76px;
    margin-top: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    justify-self: center;
    width: 100%;
    text-align: center;
  }

  .why-choose-card[data-od-id="why-choose-card-team"] h3,
  .why-choose-card[data-od-id="why-choose-card-abilities"] h3 { max-width: 22ch; }

  .why-choose-icon {
    align-self: center;
    justify-self: center;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: calc(var(--radius) * 3);
    background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  }

  .why-choose-card .why-card-mark {
    position: relative;
    width: 168px;
    height: 12px;
    background: radial-gradient(circle at 50% 50%, var(--accent) 0 5px, transparent 6px);
    transform: translateY(-3px);
    justify-self: center;
  }

  .why-choose-card .why-card-mark::before,
  .why-choose-card .why-card-mark::after {
    top: 5px;
    width: 76px;
    height: 2px;
    border: 0;
    border-radius: 0;
    background: var(--accent);
    transform: none;
  }

  .why-choose-card .why-card-mark::before { left: 0; right: auto; }
  .why-choose-card .why-card-mark::after { right: 0; left: auto; }

  .why-choose-card p:not(.why-choose-lead) {
    display: grid;
    width: min(100%, 40ch);
    max-width: 40ch;
    min-height: 0;
    place-items: center;
    text-align: center;
    text-wrap: pretty;
    color: var(--fg);
    font-size: 14px;
    line-height: 1.52;
    align-self: start;
    justify-self: center;
  }

  .why-choose-card .why-choose-lead {
    min-height: 0;
    max-width: 33ch;
    line-height: 1.34;
    align-self: start;
    justify-self: center;
    text-align: center;
  }

  .why-choose-card .why-choose-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-self: start;
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    gap: 10px;
    margin-top: 12px;
    padding-top: 0;
  }

  .why-choose-card .why-choose-tags span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .why-choose-card .why-card-mark {
    width: 168px;
  }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .header-inner { min-height: 72px; }
  .main-nav.is-open { inset: 73px 0 auto; }
  .main-nav .nav-cta { display: none; }
  .main-nav.is-open .nav-cta { display: inline-flex; }
  .hero { padding-top: 14px; }
  .hero-panel { min-height: 0; display: flex; flex-direction: column; }
  .hero-content { width: auto; min-height: 0; padding: 38px 26px 32px; order: 1; }
  .hero-visual { position: relative; inset: auto; height: 300px; order: 2; }
  .hero-visual img { object-position: 72% center; }
  .hero-wash { display: none; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
  .section-head { display: grid; gap: 18px; }
  .service-grid, .audience-grid, .delivery-layout, .process-wrap, .faq-layout, .cta-panel, .footer-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 270px; }
  .delivery-detail { min-height: 0; padding: 28px; }
  .delivery-reference { padding: 18px 14px 44px; }
  .delivery-reference-shell { padding: 40px 22px 34px; border: 0; }
  .delivery-reference-head { margin-bottom: 30px; }
  .delivery-reference-head h2 { font-size: clamp(42px, 12vw, 58px); }
  .delivery-options { grid-template-columns: 1fr; gap: 30px; margin-bottom: 38px; }
  .delivery-image-mask, .delivery-image-community { height: min(62vw, 320px); }
  .delivery-image-home,
  .delivery-image-community,
  .delivery-image-online { width: min(62vw, 320px); height: min(62vw, 320px); }
  .delivery-story { grid-template-columns: 1fr; gap: 28px; }
  .delivery-story h3 { font-size: clamp(30px, 8vw, 40px); }
  .delivery-copy p { font-size: 15px; }
  .delivery-controls { justify-self: start; }
  .why-choose { padding: 54px 14px 64px; }
  .why-choose::after { height: 86px; }
  .why-choose-head { margin-bottom: 32px; }
  .why-choose-head h2 { font-size: clamp(44px, 13vw, 62px); }
  .why-choose-intro br { display: none; }
  .why-choose-panel { grid-template-columns: 1fr; padding: 30px 22px; border-radius: calc(var(--radius) * 3); border: 0; }
  .why-choose-card {
    min-height: 0;
    padding: 34px 2px;
    grid-template-rows: auto;
  }
  .why-choose-card + .why-choose-card {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
  }
  .why-choose-card h3 {
    max-width: 20ch;
    min-height: 0;
    font-size: clamp(26px, 7vw, 34px);
  }
  .why-choose-icon { width: 124px; height: 124px; border-radius: calc(var(--radius) * 3); }
  .why-choose-icon img { width: 92px; height: 92px; }
  .who-help { padding: 54px 14px 64px; }
  .who-help::before { bottom: 66px; height: 58px; }
  .who-help::after { bottom: -42px; height: 104px; }
  .who-help-head { margin-bottom: 32px; }
  .who-help-head h2 { font-size: clamp(44px, 13vw, 62px); }
  .who-help-head p { font-size: 16px; line-height: 1.5; }
  .who-help-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: calc(var(--radius) * 3);
    border: 0;
  }
  .who-help-card {
    min-height: 0;
    padding: 28px 24px 30px;
    grid-template-rows: auto;
  }
  .who-help-card + .who-help-card {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
  }
  .who-help-icon-frame { width: 118px; height: 118px; border-radius: calc(var(--radius) * 3); }
  .who-help-icon-frame::before { width: 62px; height: 62px; }
  .who-help-icon-frame img { width: 62px; height: 62px; }
  .who-help-card h3 { font-size: clamp(28px, 7.4vw, 36px); }
  .who-help-card p { max-width: 32ch; font-size: 16px; }
  /* The body paragraph ("Therapy at home, schools...") sits in a
     justify-items:center grid cell with a 32ch cap, so it renders as a
     narrow centered block with ragged edges instead of running flush to
     the card's left padding — the "border" it should line up with. */
  .who-help-card > p:not(.who-help-lead) {
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
  .who-help-tags { gap: 16px; }
  .who-help-tags span { min-height: 32px; padding-inline: 14px; font-size: 13px; }
  /* Reference layout: title/subtitle as plain page text, then the full
     photo with nothing overlaid on it, then two full-width stacked
     buttons — replacing the text-on-photo overlay card. .about-cta-copy
     had its own box (padding, color) for the overlay version; display:
     contents drops that box so h3/p/actions become direct flex items of
     .about-cta and can be ordered around the photo individually. */
  .about-cta {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px;
    gap: 18px;
    background: var(--bg);
  }
  .about-cta::before {
    display: none;
  }
  .about-cta-bg {
    position: static;
    order: 2;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: var(--radius);
  }
  .about-cta-copy {
    display: contents;
  }
  .about-cta-copy h3 {
    order: 1;
    color: var(--fg);
    font-size: clamp(24px, 6vw, 28px);
  }
  .about-cta-copy p {
    order: 1;
    margin-top: 6px;
    color: var(--muted);
  }
  .about-cta-phone { display: none; }
  .about-cta-actions {
    order: 3;
    flex-direction: column;
    margin-top: 0;
    gap: 12px;
  }
  .about-cta-actions .btn {
    width: 100%;
  }
  .about-cta-actions .btn--secondary {
    border-color: var(--border);
    color: var(--fg);
  }

  /* Why Choose / Who We Help mobile: compact icon selectors + one open detail
     card, replacing the fully-stacked cards. Layout structure only — colors,
     fonts and copy are untouched from the desktop/tablet cards above. */
  .why-select-row,
  .who-select-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  /* Who We Help's three selectors specifically — Why Choose's row keeps
     the wider 8px gap since only Who Help was asked to tighten. */
  .who-select-row {
    gap: 2px;
  }
  .why-select-btn,
  .who-select-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .why-select-icon,
  .who-select-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: calc(var(--radius) * 2);
    background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  }
  .why-select-icon img,
  .who-select-icon img {
    width: 32px;
    height: 32px;
  }
  .why-select-label,
  .who-select-label {
    max-width: 18ch;
    color: var(--fg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }
  .why-select-btn::after,
  .who-select-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 8px;
    background: transparent;
  }
  /* Who We Help's active underline specifically — shortened to a fixed
     bar instead of running the button's full width; align-items:center
     on the button centers it under the icon/label column automatically. */
  .who-select-btn::after {
    width: 88px;
  }
  .why-select-btn.is-active::after,
  .who-select-btn.is-active::after {
    background: var(--fg);
  }
  .why-choose-card:not(.is-open),
  .who-help-card:not(.is-open) {
    display: none;
  }
  .why-choose-card.is-open .why-choose-icon,
  .who-help-card.is-open .who-help-icon-frame {
    display: none;
  }
  .why-choose-card + .why-choose-card,
  .who-help-card + .who-help-card {
    border-top: 0;
  }

  .process-intro { position: static; }
  .cta-panel .btn { justify-self: stretch; }
  .footer-bottom { display: grid; }
  .choice-grid, .field-row { grid-template-columns: 1fr; }
  .consultation-card { padding: 26px 20px; }
  .step span:last-child { font-size: 10px; }
  .review-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 26px; }
  .trust-item { padding: 18px 14px; }
  .hero-note { display: grid; gap: 10px; }
  .form-actions { display: grid; }
  .form-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Homepage direction: split editorial hero based on the supplied reference.
   Pixel baseline: 1672 x 941 CSS px, DPR 1, browser zoom 100%.
   Desktop dimensions below resolve to the reference values at 1672px and
   scale down toward common laptop widths instead of relying on one fixed size. */
.home-page .site-header {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
  background: var(--fg);
  backdrop-filter: none;
}
.home-page .site-header .home-brand,
.home-page .site-header .main-nav { color: var(--bg); }
.home-page .site-header .main-nav a:hover { color: var(--accent); }
.home-page .site-header .main-nav .nav-cta:hover { color: var(--surface); }
.home-page .site-header .menu-toggle {
  border-color: color-mix(in srgb, var(--bg) 52%, transparent);
  color: var(--bg);
}
.home-page .header-inner {
  width: calc(100% - 56px);
  min-height: clamp(100px, 7.2vw, 120px);
}
.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: clamp(20px, 1.74vw, 29px);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(24px, 1.68vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.home-brand > span { font-size: clamp(30px, 2.16vw, 36px); line-height: 1; transform: translateY(-1px); }
.home-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 20px;
  font-weight: 700;
}
.home-brand-logo {
  width: clamp(78px, 5.75vw, 96px);
  height: clamp(78px, 5.75vw, 96px);
  object-fit: contain;
  flex: 0 0 auto;
  margin-right: -7px;
  transform: none;
}
.home-page .main-nav {
  gap: clamp(24px, 2.5vw, 42px);
  color: var(--fg);
  font-size: 16px;
  transform: translateY(4px);
}
.home-page .main-nav > a:not(.nav-cta) { font-size: 16px; }
.home-page .main-nav a:hover { color: var(--muted); }
.home-page .main-nav .nav-cta {
  min-height: 44px;
  border-color: var(--accent);
  border-radius: 999px;
  padding-inline: 26px;
  background: var(--accent);
  color: var(--surface);
  font-size: 14px;
  padding-block: 0;
}
.home-page .menu-toggle {
  border-color: var(--border);
  background: transparent;
  color: var(--fg);
}
.home-page .hero {
  padding: clamp(28px, 2.1vw, 35px) clamp(24px, 2.16vw, 36px) 0;
}
.home-page .hero-panel {
  width: min(100%, 1600px);
  min-height: clamp(620px, 45.46vw, 760px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50.25% 49.75%;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
}
.home-page .hero-content {
  position: relative;
  z-index: 3;
  width: auto;
  min-height: clamp(620px, 45.46vw, 760px);
  padding: clamp(62px, 5vw, 86px) clamp(38px, 2.87vw, 48px) clamp(56px, 4.55vw, 76px) clamp(44px, 6.3vw, 106px);
  justify-content: flex-start;
}
@media (min-width: 1025px) {
  .home-page .hero-content { transform: translateX(18%); }
}
.home-page .hero-content .eyebrow {
  margin: 10px 0 24px;
  color: var(--accent);
  letter-spacing: 0.14em;
}
.home-page .hero-content .eyebrow::before { background: var(--accent); }
.home-page .hero-content h1 {
  max-width: 620px;
  font-size: clamp(62px, 5.2vw, 88px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -0.025em;
}
.home-page .hero-title-line { display: block; }
.home-page .hero-title-line:nth-child(1) { width: max-content; transform: scaleX(1.08); transform-origin: left center; }
.home-page .hero-title-line:nth-child(2) { width: max-content; transform: scaleX(.98); transform-origin: left center; }
.home-page .hero-title-line:nth-child(3) { width: max-content; transform: scaleX(1.06); transform-origin: left center; }
.home-page .hero-content h1 em {
  color: var(--accent);
  font-style: normal;
}
.home-page .hero-content p {
  max-width: clamp(400px, 27.22vw, 455px);
  margin-top: clamp(20px, 1.56vw, 26px);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.5;
}
.home-page .hero-actions {
  margin-top: clamp(28px, 2.22vw, 37px);
  gap: clamp(24px, 2.52vw, 42px);
}
.home-page .hero-actions .btn {
  min-width: clamp(210px, 14.96vw, 250px);
  min-height: clamp(54px, 3.71vw, 62px);
  border-radius: var(--radius);
  padding-inline: 30px;
}
.home-page .hero-actions .btn:first-child { background: var(--fg); border-color: var(--fg); }
.home-page .hero-actions .btn--secondary {
  min-width: clamp(206px, 14.72vw, 246px);
  border-color: var(--border);
}
.home-page .hero-actions .btn--secondary svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-page .hero-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: calc(100% + 12px);
  margin-left: -18px;
  margin-top: auto;
  padding-top: clamp(20px, 1.68vw, 28px);
  border-top: 0;
}
.home-page .hero-facts::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--fg) 0%, color-mix(in srgb, var(--fg) 32%, transparent) 52%, transparent 100%);
}
.home-page .hero-fact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, .72vw, 12px);
  padding-inline: clamp(12px, 1.08vw, 18px);
  color: var(--fg);
  font-size: clamp(12px, .78vw, 13px);
  line-height: 1.35;
}
.home-page .hero-fact:first-child { padding-left: 8px; }
.home-page .hero-fact + .hero-fact { border-left: 1px solid color-mix(in srgb, var(--border) 30%, transparent); }
.home-page .hero-fact svg { width: clamp(30px, 2.04vw, 34px); height: clamp(30px, 2.04vw, 34px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; }
.home-page .hero-visual {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  overflow: hidden;
  clip-path: none;
  background: transparent;
}
.home-page .hero-visual::before {
  display: none;
}
.home-page .hero-visual img {
  position: absolute;
  top: 8.5%;
  left: -25%;
  width: auto;
  max-width: none;
  height: 80%;
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--fg) 18%, var(--fg) 100%);
  mask-image: linear-gradient(to right, transparent 0%, var(--fg) 18%, var(--fg) 100%);
  transform: scale(1);
  transform-origin: center center;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .65s ease;
  will-change: transform;
}
.home-page .hero-visual img:hover {
  transform: translateX(-1%) scale(1.025);
  filter: saturate(1.04);
}
.home-page .hero-wash { display: none; }

/* Short desktop viewports: browser chrome and 125% Windows scaling can turn
   a 1920 x 1080 display into roughly 1536 x 695 CSS px. Keep the complete
   hero inside that visible height without changing the 1672 x 941 baseline. */
@media (min-width: 1181px) and (max-height: 920px),
       (min-width: 1000px) and (max-width: 1180px) and (orientation: landscape) {
  .home-page {
    --home-compact-header: clamp(76px, 10.5svh, 96px);
    --home-compact-gap: clamp(16px, 2.8svh, 26px);
  }
  .home-page .header-inner { min-height: var(--home-compact-header); }
  .home-brand-logo {
    width: clamp(68px, 9.6svh, 86px);
    height: clamp(68px, 9.6svh, 86px);
  }
  .home-brand > span { font-size: clamp(30px, 4.2svh, 34px); }
  .home-page .main-nav { transform: none; }
  .home-page .main-nav .nav-cta { min-height: 40px; }
  .home-page .hero { padding-top: var(--home-compact-gap); }
  .home-page .hero-panel,
  .home-page .hero-content {
    min-height: min(760px, calc(100svh - var(--home-compact-header) - var(--home-compact-gap) - 12px));
  }
  .home-page .hero-content {
    padding: clamp(28px, 5.2svh, 48px) 38px clamp(16px, 2.8svh, 24px) clamp(44px, 5.8vw, 90px);
  }
  .home-page .hero-content .eyebrow {
    margin: 0 0 clamp(10px, 1.6svh, 15px);
  }
  .home-page .hero-content h1 {
    font-size: clamp(58px, 9.4svh, 82px);
    line-height: .9;
  }
  .home-page .hero-content p {
    max-width: 430px;
    margin-top: clamp(12px, 2svh, 18px);
    font-size: clamp(15px, 1.9svh, 17px);
    line-height: 1.45;
  }
  .home-page .hero-actions {
    margin-top: clamp(16px, 2.6svh, 24px);
    gap: clamp(20px, 2.4vw, 34px);
  }
  .home-page .hero-actions .btn {
    min-width: 200px;
    min-height: clamp(46px, 6.4svh, 56px);
    padding-inline: 24px;
  }
  .home-page .hero-actions .btn--secondary { min-width: 196px; }
  .home-page .hero-facts { padding-top: clamp(12px, 2.1svh, 18px); }
  .home-page .hero-fact {
    gap: 8px;
    padding-inline: 12px;
    font-size: clamp(11px, 1.5svh, 12px);
  }
  .home-page .hero-fact svg {
    width: clamp(26px, 4svh, 32px);
    height: clamp(26px, 4svh, 32px);
  }
  .home-page .hero-visual img {
    top: 0;
    height: 100%;
  }
}

@media (max-width: 1180px) {
  .home-page .header-inner { width: min(calc(100% - 48px), 1540px); }
  .home-page .main-nav { gap: 18px; }
  .home-page .main-nav > a:not(.nav-cta) { font-size: 15px; }
  .home-page .hero-panel { grid-template-columns: 54% 46%; }
  .home-page .hero-content { padding-inline: 46px; }
  .home-page .hero-content h1 { font-size: clamp(58px, 6.4vw, 76px); }
  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary { min-width: 210px; }
  .home-page .hero-fact { padding-inline: 10px; font-size: 11px; }
  .home-page .hero-fact svg { width: 28px; height: 28px; }
}

/* Tablet landscape only (iPad mini/Air landscape; excludes iPad Pro >=1181px
   and every portrait orientation): tighten the hero photo's left fade and pull
   it closer to the copy so it stops reading as over-blurred with a gap. */
@media (min-width: 1000px) and (max-width: 1180px) and (orientation: landscape) {
  .home-page .hero-visual img {
    left: -18%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--fg) 9%, var(--fg) 100%);
    mask-image: linear-gradient(to right, transparent 0%, var(--fg) 9%, var(--fg) 100%);
  }
}

@media (max-width: 1024px) {
  .home-page .main-nav.is-open {
    inset: 88px 0 auto;
    color: var(--fg);
    background: var(--surface);
    transform: none;
  }
  .home-page .header-inner { min-height: 88px; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .home-page .header-inner {
    justify-content: flex-start;
    gap: 14px;
  }
  .home-page .menu-toggle {
    order: -1;
    flex: 0 0 48px;
  }
  .home-page .home-brand { margin-left: 0; }
  .home-page .main-nav { margin-left: auto; }
}

@media (max-width: 760px) {
  .home-page .header-inner { width: min(calc(100% - 28px), 1440px); min-height: 76px; }
  .home-brand { margin-left: 0; gap: 10px; }
  .home-brand-logo { width: 64px; height: 64px; transform: none; }
  .home-brand > span { font-size: 30px; }
  .home-page .main-nav.is-open { inset: 76px 0 auto; }
  .home-page .hero { padding: 16px 14px 0; }
  .home-page .hero-panel { display: flex; min-height: 0; }
  .home-page .hero-content {
    width: 100%;
    min-height: 0;
    padding: 46px 24px 36px;
  }
  .home-page .hero-content h1 { font-size: clamp(50px, 14vw, 64px); }
  .home-page .hero-title-line:nth-child(n) { width: auto; transform: none; }
  .home-page .hero-content p { font-size: 16px; }
  .home-page .hero-actions { gap: 14px; }
  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary { min-width: 0; }
  .home-page .hero-facts { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 14px; }
  .home-page .hero-fact, .home-page .hero-fact:first-child { padding: 0; }
  .home-page .hero-fact + .hero-fact { border-left: 0; }
  .home-page .hero-visual {
    position: relative;
    left: auto;
    width: 100%;
    height: 360px;
    clip-path: none;
  }
  .home-page .hero-visual img {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    -webkit-mask-image: none;
    mask-image: none;
    transform: scale(1.02);
  }
  .home-page .hero-visual img:hover {
    transform: translateX(-1%) scale(1.055);
  }
  .home-page .hero-visual::before { display: none; }
  .home-page .hero-wash { display: none; }
}

/* Tablets keep copy and care scene as one proportional hero composition. */
@media (max-width: 1180px) {
  .home-page .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    min-height: 620px;
  }
  .home-page .hero-content {
    width: auto;
    min-height: 620px;
    padding: 52px clamp(20px, 2.6vw, 34px) 38px clamp(36px, 4.4vw, 52px);
    transform: none;
  }
  .home-page .hero-content h1 { max-width: 500px; font-size: clamp(52px, 7.3vw, 66px); }
  .home-page .hero-title-line:nth-child(n) { width: auto; transform: none; }
  .home-page .hero-content p { max-width: 42ch; font-size: 15px; }
  .home-page .hero-actions { gap: 12px; }
  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    min-width: 168px;
    min-height: 48px;
    padding-inline: 18px;
  }
  .home-page .hero-facts {
    width: 100%;
    margin-left: 0;
  }
  .home-page .hero-fact {
    gap: 7px;
    padding-inline: 8px;
    font-size: 10px;
  }
  .home-page .hero-fact svg { width: 24px; height: 24px; }
  .home-page .hero-visual {
    position: relative;
    inset: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 620px;
    clip-path: none;
    background: transparent;
    isolation: isolate;
  }
  .home-page .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 67% center;
    -webkit-mask-image: none;
    mask-image: none;
    transform: scale(1);
  }
  .home-page .hero-visual::before { display: none; }
  .home-page .hero-visual::after {
    display: none;
  }
}

/* Our Delivery reference posture: the selected setting owns the story below.
   The story stays on the page canvas; arrows live at its content-driven bottom. */
@media (min-width: 761px) {
  .delivery-story {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0 0 82px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .delivery-story-copy {
    max-width: 880px;
    padding-right: 0;
  }

  .delivery-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
  }
}

/* Join Us — a separate panel placed below About Us and above the footer.
   It deliberately shares the Who We Help panel's horizontal measure. */
.join-us-section {
  padding: 0 20px clamp(80px, 7vw, 116px);
  background: var(--bg);
}
.join-us-panel {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 82px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: calc(var(--radius) * 4);
  background: var(--bg);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--fg) 14%, transparent);
}
.join-us-head { max-width: 680px; margin: 0 auto clamp(48px, 5vw, 66px); text-align: center; }
.join-us-head h2, .join-us-content h3 { color: var(--fg); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.join-us-head h2 { font-size: clamp(48px, 5vw, 64px); line-height: 1; }
.join-us-tagline { margin-top: 12px; color: var(--fg); font-size: clamp(19px, 2vw, 22px); font-weight: 700; }
.join-us-rule { position: relative; display: block; width: min(340px, 78%); height: 16px; margin: 24px auto; background: radial-gradient(circle at center, var(--accent) 0 4px, transparent 5px); }
.join-us-rule::before, .join-us-rule::after { content: ""; position: absolute; top: 7px; width: calc(50% - 16px); height: 1px; background: color-mix(in srgb, var(--border) 54%, transparent); }
.join-us-rule::before { left: 0; }
.join-us-rule::after { right: 0; }
.join-us-intro { color: var(--muted); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.join-us-content { display: grid; grid-template-columns: 1fr; gap: clamp(42px, 6vw, 64px); }
.join-us-content h3 { font-size: clamp(29px, 3vw, 38px); line-height: 1.1; }
.join-us-benefit-list { display: grid; gap: 18px; margin-top: 28px; padding: 0; list-style: none; }
.join-us-benefit-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
.join-us-benefit-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--surface); background: var(--fg); }
.join-us-benefit-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.join-us-benefit-list p, .join-us-closing { color: var(--fg); font-size: 16px; line-height: 1.58; }
.join-us-benefit-list strong { font-weight: 700; }
.join-us-closing { margin-top: 30px; max-width: 60ch; color: var(--muted); }
.join-us-form-section { padding-top: clamp(38px, 5vw, 54px); border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent); }
.join-us-form { display: grid; gap: 15px; margin-top: 28px; }
.join-us-form label { position: relative; display: block; }
.join-us-form label > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.join-us-top-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.join-us-form input, .join-us-form textarea { width: 100%; border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: 16px/1.4 var(--font-body); transition: border-color 160ms ease, box-shadow 160ms ease; }
.join-us-form input { min-height: 48px; padding: 10px 12px; }
.join-us-form textarea { min-height: 126px; padding: 12px; resize: vertical; }
.join-us-form input:focus, .join-us-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
.join-us-form input[aria-invalid="true"], .join-us-form textarea[aria-invalid="true"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.join-us-form input[aria-invalid="true"]:focus, .join-us-form textarea[aria-invalid="true"]:focus { outline: 3px solid color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); }
.join-us-form .field-error { margin-top: -6px; }
.join-us-top-fields .field-error { margin-top: -6px; }
.join-us-form-action { display: flex; align-items: center; gap: 16px; margin-top: 5px; }
.join-us-form-action .btn { min-height: 48px; padding-inline: 28px; }
.join-us-form-status { color: var(--fg); font-size: 14px; font-weight: 700; }
@media (max-width: 760px) {
  .join-us-section { padding: 0 14px 62px; }
  .join-us-panel { padding: 42px 24px; border-radius: calc(var(--radius) * 3); }
  .join-us-content { gap: 42px; }
  .join-us-top-fields { grid-template-columns: 1fr; }
  /* Single column now stacks all 6 grid children in DOM order — the 3
     (usually empty) error slots for Name/Email/Phone land together after
     Phone instead of under their own field, reading as one big dead gap.
     Reorder so each error sits directly under its field, matching the
     tighter rhythm consultation.html already uses. */
  .join-us-top-fields label:nth-of-type(1) { order: 1; }
  .join-us-top-fields #join-name-error { order: 2; }
  .join-us-top-fields label:nth-of-type(2) { order: 3; }
  .join-us-top-fields #join-email-error { order: 4; }
  .join-us-top-fields label:nth-of-type(3) { order: 5; }
  .join-us-top-fields #join-phone-error { order: 6; }

  /* Lock the section's text to the same left edge as the form fields below
     (Name input etc.) instead of the tagline/rule/intro centering
     themselves independently in their own 680px measure. */
  .join-us-head {
    max-width: none;
    text-align: left;
  }
  .join-us-head h2,
  .join-us-tagline {
    text-align: center;
  }
  .join-us-rule {
    margin: 24px auto;
  }
}

/* Desktop alignment system — one shared content edge across core sections. */
@media (min-width: 1025px) {
  .home-page {
    --desktop-content: 1160px;
  }

  .home-page .hero {
    padding-inline: max(28px, calc((100vw - var(--desktop-content)) / 2));
  }

  .home-page .hero-panel,
  .services-showcase-panel,
  .delivery-reference-shell,
  .why-choose-inner,
  .who-help-inner {
    width: min(100%, var(--desktop-content));
    max-width: var(--desktop-content);
  }

  .home-page .hero-content {
    padding-left: 0;
    transform: none;
  }

  .services-showcase-panel {
    padding-inline: 0;
  }

  .delivery-reference-shell {
    padding-inline: 48px;
  }

  .delivery-reference-head h2,
  .why-choose-head h2,
  .who-help-head h2 {
    font-size: clamp(52px, 4.4vw, 70px);
    line-height: .98;
    letter-spacing: -0.03em;
  }

  .why-choose-head,
  .who-help-head {
    gap: 9px;
    max-width: 720px;
    margin-bottom: 24px;
  }

  .who-help-head {
    gap: 0;
  }

  .why-choose-head {
    gap: 0;
  }

  .why-choose-head h2 {
    margin-bottom: 22px;
  }

  .why-choose-head .why-choose-kicker {
    margin-bottom: 20px;
  }

  .who-help-head h2 {
    margin-bottom: 22px;
  }

  .who-help-head .who-help-kicker {
    margin-bottom: 20px;
  }

  .why-choose-intro,
  .who-help-head p {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.45;
  }

  .who-help-panel {
    min-height: 0;
    padding: 26px 28px;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
    border-radius: calc(var(--radius) * 3);
    box-shadow: none;
  }

  .who-help-card {
    grid-template-rows: 138px 76px 12px 56px 104px auto;
    align-content: start;
    gap: 14px;
    min-height: 500px;
    padding: 0 36px;
  }

  .who-help-icon-frame {
    width: 138px;
    height: 138px;
    align-self: center;
    box-shadow: none;
  }

  .who-help-icon-frame img {
    width: 96px;
    height: 96px;
  }

  .who-help-card h3 {
    display: grid;
    place-items: center;
    min-height: 76px;
    margin-top: 0;
    font-size: clamp(25px, 1.9vw, 30px);
    line-height: 1.06;
  }

  .who-help-card .who-help-card-mark {
    transform: translateY(-10px);
  }

  .who-help-card p {
    width: min(100%, 40ch);
    max-width: 40ch;
    justify-self: center;
    text-align: left;
    text-wrap: pretty;
    font-size: 14px;
    line-height: 1.52;
  }

  .who-help-card .who-help-lead {
    align-self: start;
  }

  .who-help-tags {
    align-self: start;
    gap: 10px;
    margin-top: 12px;
  }

  .who-help-tags span {
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--border) 38%, transparent);
    background: transparent;
    font-size: 12px;
    letter-spacing: .02em;
  }
}

/* Homepage services showcase — reference-matched desktop composition. */
#services.services-showcase {
  padding: 56px 0;
  background: var(--bg);
}
.services-showcase-panel {
  width: min(calc(100% - 136px), 1536px);
  margin: 0 auto;
  padding: 32px 60px 42px;
  border-radius: var(--radius);
  background: var(--bg);
}
.services-showcase-panel > h2 {
  color: var(--fg);
  font-size: clamp(52px, 5.05vw, 72px);
  line-height: 1;
  text-align: center;
}
.services-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
}
.services-tab {
  position: relative;
  min-height: 64px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.services-tab::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: transparent;
}
.services-tab[aria-selected='true'] { color: var(--accent); }
.services-tab[aria-selected='true']::after { background: var(--accent); }
.services-detail {
  display: grid;
  grid-template-columns: 43.2% 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "photo copy" "photo sections";
  gap: 50px;
  align-items: start;
  padding-top: 28px;
}
.services-detail-image {
  grid-area: photo;
  min-width: 0;
  height: 590px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fg);
}
.services-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% center;
}
.services-detail-copy { grid-area: copy; padding-top: 12px; min-width: 0; }
#services-sections { grid-area: sections; min-width: 0; }
.services-detail-copy h3 {
  max-width: 720px;
  margin-bottom: 6px;
  color: var(--fg);
  font-size: clamp(40px, 3.45vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.services-lead {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.services-intro {
  max-width: 68ch;
  margin-bottom: 24px;
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.62;
}
.services-list-lead {
  margin-bottom: 22px;
  color: var(--fg);
  font-size: 15.5px;
  font-weight: 700;
}
.services-cta-heading {
  margin-top: 26px;
  margin-bottom: 12px;
  color: var(--fg);
  font-size: 17px;
  font-weight: 700;
}
.services-detail-copy p {
  max-width: 68ch;
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.62;
}
.services-detail-copy p + p { margin-top: 20px; }
.services-subsection h4 {
  margin-bottom: 10px;
  color: var(--fg);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.services-divider {
  display: block;
  max-width: 68ch;
  height: 1px;
  margin: 24px 0;
  background: color-mix(in srgb, var(--border) 30%, transparent);
}
.services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.services-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
  border-radius: 999px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.services-list {
  display: grid;
  gap: 10px;
  max-width: 68ch;
  padding: 0;
  list-style: none;
}
.services-list li {
  position: relative;
  padding-left: 22px;
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.5;
}
.services-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.services-item-icon,
.services-icon-row {
  display: none;
}

/* Tablet + mobile share the same single-column composition (title, tabs,
   full-width image, copy stacked) that matches the reference layout. This
   used to switch back to the desktop two-column grid as early as 901px,
   which squeezed the fixed-height image and copy together on every tablet
   width (768 / 820 / 1024 / 1180) — the same "tablet" band the rest of the
   site (nav, hero) already treats as one device category. */
@media (max-width: 1180px) {
  #services.services-showcase { padding: 18px 14px 36px; }
  .services-showcase-panel { width: 100%; padding: 36px 24px; }
  .services-showcase-panel > h2 { font-size: clamp(42px, 10vw, 58px); }
  .services-tab { font-size: 15px; }
  .services-detail { grid-template-columns: 1fr; gap: 32px; }
  .services-detail-image { height: min(112vw, 520px); }
  .services-detail-copy h3 { font-size: clamp(38px, 9vw, 46px); }
  .services-detail-copy p { font-size: 16px; }
}

/* Tablet-only refinements: the mobile values above are tuned for narrow
   phone widths, so bump tab labels, copy width and image height a step for
   the roomier 761–1180px band without touching phones (≤760px keeps the
   mobile-tuned sizes from the final mobile override further below). */
@media (min-width: 761px) and (max-width: 1180px) {
  /* Values below are pixel-matched to the user-supplied 820x1180 tablet
     mockup (speech_pathology_820x1180.html) at the 820px anchor, then
     allowed to scale up gently via clamp() toward 1180px so the tablet
     band (768/820/1024/1180) doesn't look tiny at its wider end. Colors
     use the brand's registered tokens, not the mockup's placeholder hex. */
  #services.services-showcase {
    padding: 28px 20px 36px;
    background: var(--bg);
  }
  .services-showcase-panel {
    width: 100%;
    padding: 40px 28px 44px;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--border) 22%, transparent);
    border-radius: calc(var(--radius) * 3.5);
  }
  .services-showcase-panel > h2 { font-size: clamp(36px, 4vw, 44px); }
  /* The tab rail shares the same left/right guide as the image + copy below.
     Each button is already one of two equal grid columns, so its orange
     selection bar fills exactly one half of this full-width rail. */
  .services-tabs { width: 100%; margin: 0; }
  .services-tab { height: 38px; font-size: 15px; }
  .services-detail {
    grid-template-columns: minmax(0, 0.515fr) minmax(0, 0.485fr);
    grid-template-rows: auto auto;
    grid-template-areas: "photo copy" "sections sections";
    /* Add the two requested 20px breathing bands: below the tab rail, then
       between the photo/copy row and the \"We can help with\" section. */
    gap: 44px 30px;
    margin-top: 46px;
    background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 80%, var(--surface) 20%));
    /* Remove the enclosing service-details outline on every side while
       retaining the layout and clipping of its content. */
    border: 0;
    border-radius: calc(var(--radius) * 1.75);
    padding: 0;
    overflow: hidden;
  }
  .services-detail-image {
    grid-area: photo;
    align-self: start;
    height: 274px;
  }
  /* Both service-tab states share this copy block: align its title with the
     top edge of the paired service image. */
  .services-detail-copy { grid-area: copy; min-width: 0; padding: 0 26px 18px 0; }
  #services-sections { grid-area: sections; min-width: 0; }
  .services-detail-copy h3 { font-size: clamp(26px, 2.6vw, 32px); }
  .services-lead { font-size: 15px; }
  .services-detail-copy p { max-width: 62ch; font-size: 13.5px; line-height: 1.5; }

  /* Tablet card layout for Our Services: cream cards around every
     subsection except the icon-grid list, matching the reference layout.
     Dividers are hidden in favour of card spacing. */
  .services-subsection h4 { font-size: clamp(22px, 2.2vw, 26px); }
  .services-divider { display: none; }
  .services-subsection { margin-bottom: 20px; }
  /* Speech Pathology needs the approved upward adjustment. Occupational
     Therapy keeps the standard image-to-list breathing space. */
  #services-detail[aria-labelledby='services-tab-speech'] .services-subsection:has(.services-list) {
    position: relative;
    top: -30px;
    margin-bottom: -10px;
  }
  #services-detail[aria-labelledby='services-tab-occupational'] .services-subsection:has(.services-list) {
    position: relative;
    top: -5px;
    margin-bottom: 15px;
  }
  .services-subsection:not(:has(.services-list)) {
    /* Match the 92%-wide service grid: its 4% side gutters establish the
       shared guide for the follow-up headings, copy and location row. */
    padding: clamp(14px, 1.6vw, 20px) 4%;
    min-height: 108px;
    /* Reference cards sit directly on the warm page canvas: no white wash,
       no border, and no extra visual weight around the service copy. */
    background: var(--bg);
    border-radius: calc(var(--radius) * 1.75);
  }
  .services-subsection h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    /* Share the nine-card grid guide with the list label and follow-up copy. */
    margin-left: 0;
  }
  .services-subsection p { font-size: 13px; line-height: 1.48; }
  .services-subsection .services-list-lead {
    /* Use the same 92% width and auto gutters as the nine-card grid so the
       section label lands on the first card's left edge. */
    width: 92%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
  /* The label-to-first-card gap is a shared internal rhythm, independent of
     which service tab is selected. */
  #services-detail[aria-labelledby='services-tab-speech'] .services-list-lead,
  #services-detail[aria-labelledby='services-tab-occupational'] .services-list-lead {
    margin-bottom: 24px;
  }
  .services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    gap: clamp(9px, 1vw, 14px) clamp(14px, 1.4vw, 18px);
    width: 92%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  .services-list li {
    height: clamp(118px, 13vw, 148px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 13px 12px;
    background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 88%, var(--accent) 12%));
    border: none;
    border-radius: calc(var(--radius) * 2.1);
    text-align: center;
  }
  .services-list li::before { display: none; }
  /* 9-item lists (Speech Pathology) match the reference mockup's 3-column
     grid exactly; other counts (e.g. Occupational Therapy's 7) fall back
     to a 4-column grid since 7 doesn't divide evenly into 3. */
  .services-list:not(:has(li:nth-child(9))) {
    grid-template-columns: repeat(4, 1fr);
  }
  /* The speech-pathology list is a true 3 × 3 grid. Its final label needs
     three lines, so reserve the same icon and label tracks for every tile
     instead of letting the last card overflow its fixed-height frame. */
  .services-list:has(li:nth-child(9)) {
    grid-auto-rows: minmax(140px, auto);
  }
  .services-list:has(li:nth-child(9)) li {
    height: auto;
    min-height: 140px;
    display: grid;
    grid-template-rows: 58px 3.75em;
    align-content: center;
    justify-items: center;
    gap: 6px;
  }
  .services-list:has(li:nth-child(9)) .services-item-icon {
    width: 58px;
    height: 58px;
  }
  .services-list:has(li:nth-child(9)) .services-item-icon :is(svg, img) {
    width: 48px;
    height: 48px;
  }
  .services-list:has(li:nth-child(9)) .services-item-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.25;
  }
  /* Occupational Therapy uses its own 4 + 3 rhythm: four equal cards on the
     first row, then three cards centered beneath them. It shares Speech
     Pathology's icon and copy tracks, so both service tabs stay aligned. */
  .services-list.services-list--four-plus-three:not(:has(li:nth-child(9))) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(140px, auto);
  }
  .services-list--four-plus-three li {
    grid-column: span 3;
    height: auto;
    min-height: 140px;
    display: grid;
    grid-template-rows: 58px 3.75em;
    align-content: center;
    justify-items: center;
    gap: 6px;
  }
  .services-list--four-plus-three li:nth-child(5) { grid-column: 2 / span 3; }
  .services-list--four-plus-three li:nth-child(6) { grid-column: 5 / span 3; }
  .services-list--four-plus-three li:nth-child(7) { grid-column: 8 / span 3; }
  .services-list--four-plus-three .services-item-icon {
    width: 58px;
    height: 58px;
  }
  .services-list--four-plus-three .services-item-icon :is(svg, img) {
    width: 48px;
    height: 48px;
  }
  .services-list--four-plus-three .services-item-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    line-height: 1.25;
  }
  .services-item-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    color: var(--accent);
  }
  .services-item-icon :is(svg, img) {
    width: 54px;
    height: 54px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .services-item-label { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
  .services-icon-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .services-icon-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding-right: 8px;
    color: var(--fg);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .services-icon-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    width: 1px;
    height: 44px;
    background: color-mix(in srgb, var(--border) 28%, transparent);
  }
  .services-icon-item .services-item-icon {
    width: 52px;
    height: 52px;
    color: var(--border);
  }
  .services-icon-item .services-item-icon :is(svg, img) {
    width: 38px;
    height: 38px;
  }
  /* Intentional SVG well: every location slot uses the enlarged shared scale;
     At home stays one step larger as the lead location marker. */
  .services-icon-item:first-child .services-item-icon {
    width: 52px;
    height: 52px;
    /* The visible 46px SVG sits inside a 52px interaction box. Offset the
       box by its 3px inset so the house outline—not transparent padding—
       meets the first service card's left edge. */
    margin-left: -3px;
  }
  .services-icon-item:first-child .services-item-icon :is(svg, img) {
    width: 46px;
    height: 46px;
  }
  /* The lead location is the first item in the row, so its icon + label
     begin on the section's shared left guide instead of being centered in
     the first grid column. */
  .services-icon-item:first-child {
    justify-content: flex-start;
  }
}

@media (min-width: 1025px) {
  .services-showcase-panel {
    width: min(100%, var(--desktop-content));
    max-width: var(--desktop-content);
    padding-inline: 0;
  }
}

/* Final Why Choose card contract: the white panel and its three cards use
   one shared set of horizontal axes at tablet and desktop widths. */
@media (min-width: 761px) {
  .why-choose-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-height: 0;
    padding: 26px 0 32px;
    overflow: hidden;
  }

  .why-choose-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 138px 124px 14px 92px 156px auto;
    min-width: 0;
    min-height: 780px;
    padding: 0 28px;
    align-content: start;
    justify-items: center;
    gap: 18px;
    text-align: center;
  }

  .why-choose-card > .why-choose-icon,
  .why-choose-card > h3,
  .why-choose-card > .why-card-mark,
  .why-choose-card > p,
  .why-choose-card > .why-choose-tags {
    justify-self: center;
  }

  .why-choose-card > h3 {
    width: 100%;
    min-height: 0;
    margin: 0;
    font-size: clamp(28px, 2.25vw, 34px);
    line-height: 1.03;
    text-align: center;
    text-wrap: balance;
  }

  .why-choose-card > .why-card-mark { transform: none; }

  .why-choose-card > p {
    display: block;
    align-self: start;
    width: min(100%, 34ch);
    max-width: 34ch;
    min-height: 0;
    color: var(--fg);
    text-align: center;
  }

  .why-choose-card > .why-choose-lead {
    max-width: 33ch;
    font-size: 18px;
    line-height: 1.34;
  }

  .why-choose-card > p:not(.why-choose-lead) {
    min-height: 156px;
    font-size: 18px;
    line-height: 1.42;
  }

  .why-choose-card > .why-choose-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    gap: 6px;
    margin: 18px auto 0;
    padding: 0;
    transform: none;
  }

  .why-choose-card > .why-choose-tags span {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .why-choose-card > .why-choose-tags span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .who-help-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 26px 0 32px;
    overflow: hidden;
  }

  .who-help-card {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 0 28px;
    justify-items: center;
    text-align: center;
  }

  .who-help-card > .who-help-icon-frame,
  .who-help-card > h3,
  .who-help-card > .who-help-card-mark,
  .who-help-card > p,
  .who-help-card > .who-help-tags {
    justify-self: center;
  }

  .who-help-card > h3 {
    width: 100%;
    text-align: center;
  }

  .who-help-card > p {
    display: grid;
    place-items: center;
    width: min(100%, 34ch);
    max-width: 34ch;
    text-align: center;
  }

  .who-help-card > .who-help-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    gap: 10px;
    margin: 18px auto 0;
    transform: none;
  }

  .who-help-card > .who-help-tags span:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Tablet: all three cards share six content rows. The tallest item in each
   row sets the common height, so visible text stays top-aligned and the tag
   groups begin together after the longest body copy. */
@media (min-width: 761px) and (max-width: 1024px) {
  .why-choose-head,
  .who-help-head {
    gap: 0;
    margin-bottom: 34px;
  }

  .why-choose-head h2,
  .who-help-head h2 {
    margin-bottom: 20px;
    font-size: clamp(56px, 6.25vw, 64px);
    line-height: .96;
  }

  .why-choose-kicker,
  .who-help-head .who-help-kicker {
    font-family: var(--font-body);
    font-size: clamp(20px, 2.15vw, 22px);
    line-height: 1.25;
    margin-bottom: 15px;
  }

  .why-choose-intro,
  .who-help-head > p:not(.who-help-kicker) {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
  }

  .why-choose-card > h3,
  .who-help-card > h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.125vw, 32px);
    line-height: 1.05;
  }

  .why-choose-card > .why-choose-lead,
  .who-help-card > .who-help-lead {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.4;
  }

  .why-choose-card > p:not(.why-choose-lead),
  .who-help-card > p:not(.who-help-lead) {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
  }

  .why-choose-card > .why-choose-tags span,
  .who-help-card > .who-help-tags span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  .why-choose-panel,
  .who-help-panel {
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    row-gap: 14px;
  }

  .why-choose-card,
  .who-help-card {
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
    row-gap: 14px;
    min-height: 0;
    align-content: start;
  }

  .why-choose-panel > .why-choose-card:nth-child(1),
  .who-help-panel > .who-help-card:nth-child(1) { grid-column: 1; }

  .why-choose-panel > .why-choose-card:nth-child(2),
  .who-help-panel > .who-help-card:nth-child(2) { grid-column: 2; }

  .why-choose-panel > .why-choose-card:nth-child(3),
  .who-help-panel > .who-help-card:nth-child(3) { grid-column: 3; }

  .why-choose-card > h3,
  .who-help-card > h3,
  .why-choose-card > .why-choose-lead,
  .who-help-card > .who-help-lead,
  .why-choose-card > p:not(.why-choose-lead),
  .who-help-card > p:not(.who-help-lead) {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .why-choose-card > h3,
  .who-help-card > h3 {
    align-self: start;
  }

  .why-choose-card > .why-choose-lead,
  .who-help-card > .who-help-lead,
  .why-choose-card > p:not(.why-choose-lead),
  .who-help-card > p:not(.who-help-lead) {
    display: block;
    align-self: start;
  }

  .why-choose-card > .why-choose-tags,
  .who-help-card > .who-help-tags {
    margin-top: 0;
    transform: none !important;
  }

  .who-help-card > p,
  .who-help-card > .who-help-lead {
    display: block;
    align-self: start;
    justify-self: center;
    width: min(100%, 34ch);
    max-width: 34ch;
    text-align: center;
  }

  /* The grid gap now owns paragraph spacing; avoid extra visual offsets. */
  .why-choose-card > p:not(.why-choose-lead),
  .who-help-card > p:not(.who-help-lead) {
    transform: none;
    margin-top: 0;
    padding-top: 0;
  }
}

/* Final mobile composition override: text and care image interlock above the
   actions; the service facts continue as a vertical quick-access list. */
@media (max-width: 760px) {
  .services-showcase-panel > h2,
  .delivery-reference-head h2,
  .why-choose-head h2,
  .who-help-head h2 {
    font-size: clamp(36px, 9.3vw, 40px);
    line-height: 1.04;
    letter-spacing: -0.02em;
  }

  /* The audience introduction begins on the same left guide as its panel;
     the section title and support line retain their centered hierarchy. */
  .who-help-head > p:not(.who-help-kicker) {
    width: calc(100% - 44px);
    margin-inline: 22px;
    text-align: left;
  }

  .services-detail-copy h3,
  .delivery-story-copy h3,
  .why-choose-card h3,
  .who-help-card h3 {
    font-size: clamp(24px, 6.7vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.015em;
  }

  .why-choose-kicker,
  .who-help-kicker {
    font-size: 18px;
    line-height: 1.4;
  }

  .why-choose-intro,
  .who-help-head > p:not(.who-help-kicker),
  .services-detail-copy p,
  .services-list li,
  .services-intro,
  .services-list-lead,
  .services-cta-heading,
  .delivery-copy p,
  .why-choose-card > p:not(.why-choose-lead),
  .who-help-card > p:not(.who-help-lead) {
    font-size: 16px;
    line-height: 1.6;
  }

  .why-choose-lead,
  .who-help-lead {
    font-size: 17px;
    line-height: 1.45;
  }

  .why-choose-tags span,
  .who-help-tags span {
    font-size: 13px;
    line-height: 1.3;
  }

  .services-tab,
  .delivery-option-label {
    font-size: 15px;
    line-height: 1.35;
  }

  .services-detail-image { height: min(78vw, 340px); }
  .services-detail {
    gap: 22px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "photo" "copy" "sections";
  }

  .home-page .site-header {
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
    background: var(--fg);
  }

  .home-page .header-inner {
    width: 100%;
    min-height: 68px;
    padding: 8px 18px;
    justify-content: flex-start;
    gap: 12px;
  }

  .home-page .home-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 0;
    color: var(--bg);
    font-family: var(--font-display);
  }

  .home-page .home-brand-logo {
    width: 52px;
    height: 52px;
    transform: none;
  }

  .home-page .home-brand > span {
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .home-page .menu-toggle {
    order: -1;
    width: 48px;
    height: 48px;
    margin-left: 0;
    border: 1px solid color-mix(in srgb, var(--bg) 52%, transparent);
    background: transparent;
    color: var(--bg);
  }

  .home-page .site-header .menu-toggle { color: var(--bg); }

  .home-page .menu-toggle svg {
    width: 31px;
    height: 31px;
    stroke-width: 1.7;
  }

  .home-page .main-nav.is-open { inset: 68px 0 auto; }
  .home-page .hero { padding: 0; }

  .home-page .hero-panel {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: clip;
    border: 0;
    border-radius: 0;
    background: var(--bg);
  }

  .home-page .hero-content {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 246px 16px 0;
    color: var(--surface);
  }

  .home-page .hero-content .eyebrow {
    max-width: none;
    margin: 0 0 14px;
    gap: 8px;
    color: var(--accent);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  .home-page .hero-content .eyebrow::before {
    width: 22px;
    height: 1px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: var(--accent);
    transform: none;
  }

  .home-page .hero-content h1 {
    max-width: 320px;
    color: var(--surface);
    font-size: clamp(42px, 11.2vw, 48px);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -0.025em;
  }

  .home-page .hero-title-line:nth-child(1),
  .home-page .hero-title-line:nth-child(2),
  .home-page .hero-title-line:nth-child(3) {
    width: auto;
    white-space: nowrap;
  }

  .home-page .hero-content > p {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 330px;
    margin-top: 12px;
    color: var(--surface);
    font-size: 16px;
    line-height: 1.48;
  }

  .home-page .hero-visual {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    width: 100%;
    height: 640px;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--surface);
  }

  .home-page .hero-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 36% center;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }

  .home-page .hero-visual img:hover { transform: none; }
  .home-page .hero-visual::before,
  .home-page .hero-wash { display: none; }

  .home-page .hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--fg) 4%, transparent) 16%,
      color-mix(in srgb, var(--fg) 34%, transparent) 44%,
      color-mix(in srgb, var(--fg) 86%, transparent) 100%
    );
    pointer-events: none;
  }

  .home-page .hero-actions {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    gap: 10px;
    margin-top: 16px;
  }

  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    width: 100%;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    border-radius: var(--radius);
    padding: 10px 18px;
    font-size: 16px;
  }

  .home-page .hero-actions .btn:first-child {
    justify-content: center;
    gap: 10px;
  }

  .home-page .hero-actions .btn:first-child::before {
    content: none;
  }

  .home-page .hero-actions .btn--secondary {
    justify-content: center;
    border-color: var(--border);
    background: transparent;
    color: var(--surface);
    padding-left: 18px;
  }

  .home-page .hero-facts {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100% + 32px);
    margin: 24px -16px 0;
    padding: 18px 16px 20px;
    gap: 8px;
    border-top: 0;
    background: var(--bg);
  }

  .home-page .hero-facts::before { display: none; }

  .home-page .hero-fact,
  .home-page .hero-fact:first-child {
    position: relative;
    min-height: 36px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    border-left: 0;
    border-bottom: 0;
    color: var(--fg);
    font-size: 13px;
    line-height: 1.3;
  }

  .home-page .hero-fact::after {
    content: none;
  }

  .home-page .hero-fact svg {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    stroke-width: 1.7;
  }

  .home-page .hero-fact:nth-child(2) svg {
    background: transparent;
  }

  .home-page .hero-fact span {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Mobile only: present Our Delivery as three full-width image choices,
   following the supplied stacked-card reference without changing type or copy. */
@media (max-width: 760px) {
  .delivery-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0 -10px 38px;
  }

  .delivery-option {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.72;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    text-align: left;
  }

  .delivery-image-mask,
  .delivery-image-home,
  .delivery-image-community,
  .delivery-image-online {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .delivery-image-mask img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    object-fit: cover;
  }

  .delivery-option:not(.is-active) .delivery-image-mask,
  .delivery-option.is-active .delivery-image-mask {
    padding: 0;
    border: 0;
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .delivery-option.is-active {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .delivery-option-label {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: flex;
    min-height: 44px;
    justify-content: center;
    padding: 8px 48px;
    background: color-mix(in srgb, var(--fg) 82%, transparent);
    color: var(--surface);
    text-align: center;
  }

  .delivery-option-label::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--surface);
    border-right: 2px solid var(--surface);
    transform: translateY(-50%) rotate(45deg);
  }

  .delivery-options > .delivery-story {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: -12px 0 4px;
    padding: 24px 18px 26px;
    border-radius: var(--radius);
    background: var(--bg);
  }

  .delivery-options > .delivery-story[hidden] {
    display: none;
  }

  .delivery-options > .delivery-story .delivery-story-copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .delivery-options > .delivery-story h3 {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }

  .delivery-options > .delivery-story .delivery-copy {
    gap: 14px;
    margin-top: 18px;
  }

  .delivery-options > .delivery-story .delivery-copy p {
    max-width: none;
    text-align: center;
  }

  .delivery-options > .delivery-story .delivery-controls {
    display: none;
  }

  .delivery-dot {
    display: none;
  }
}

/* Portrait tablet homepage — calibrated against the supplied 1045 × 1506
   reference. The photograph stays clear while the left wash protects copy. */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  html {
    scrollbar-width: none;
  }

  /* Native scroll-snap was removed here on purpose. `y proximity` grabbed the
     user inside a wide, invisible catch zone and yanked the page whenever they
     released a gesture near the services edge — the same gesture snapped or
     did not snap depending on release velocity, which read as a stutter.
     The soft settle is now driven from site.js: it only nudges once the scroll
     has actually come to rest, only when the target edge is genuinely close,
     and only in the direction the user was already travelling. */

  html::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .home-page .site-header {
    position: relative;
    z-index: 60;
    border-bottom: 0;
    background: var(--fg);
  }

  .home-page .header-inner {
    width: 100%;
    min-height: 116px;
    padding: 22px 30px;
    justify-content: flex-start;
    gap: 22px;
  }

  .home-page .menu-toggle {
    order: -1;
    width: 62px;
    height: 62px;
    display: grid;
    flex: 0 0 62px;
    margin: 0;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--bg) 58%, transparent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--bg);
  }

  .home-page .menu-toggle svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.7;
  }

  .home-page .home-brand {
    display: inline-flex;
    min-width: 0;
    gap: 10px;
    margin: 0;
    color: var(--bg);
  }

  .home-page .home-brand-logo {
    width: 64px;
    height: 64px;
    transform: none;
  }

  .home-page .home-brand > span {
    font-size: clamp(38px, 4.5vw, 46px);
    line-height: 1;
  }

  .home-page .main-nav {
    margin-left: auto;
    transform: none;
  }

  .home-page .main-nav > a:not(.nav-cta) {
    display: none;
  }

  .home-page .main-nav .nav-cta {
    min-width: 220px;
    min-height: 64px;
    padding-inline: 34px;
    font-size: 18px;
  }

  .home-page .main-nav.is-open {
    position: fixed;
    inset: 116px 0 auto;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 22px 30px 28px;
    color: var(--fg);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .home-page .main-nav.is-open > a:not(.nav-cta) {
    display: block;
    min-height: 52px;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
    font-size: 18px;
    line-height: 1.35;
  }

  .home-page .main-nav.is-open .nav-cta {
    width: fit-content;
    margin-top: 18px;
  }

  .home-page .hero {
    padding: 0;
  }

  /* The opening header + hero already total one viewport. The services section
     is the only settle target; site.js reads this element's offset directly, so
     no snap declarations are needed here. Later long-form content keeps its
     ordinary continuous scroll instead of becoming page-locked. */

  .home-page .hero-panel {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100vh - 116px);
    height: calc(100svh - 116px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--fg);
  }

  .home-page .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
  }

  .home-page .hero-visual img {
    position: absolute;
    top: 3.5%;
    left: 0;
    width: auto;
    max-width: none;
    height: 72.5%;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }

  .home-page .hero-visual img:hover {
    transform: none;
    filter: none;
  }

  .home-page .hero-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background:
      linear-gradient(180deg,
        transparent 58%,
        color-mix(in srgb, var(--fg) 10%, transparent) 70%,
        color-mix(in srgb, var(--fg) 52%, transparent) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--fg) 96%, transparent) 0%,
        color-mix(in srgb, var(--fg) 78%, transparent) 26%,
        color-mix(in srgb, var(--fg) 48%, transparent) 35%,
        color-mix(in srgb, var(--fg) 10%, transparent) 48%,
        transparent 68%);
    pointer-events: none;
  }

  .home-page .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100vh - 116px);
    height: calc(100svh - 116px);
    min-height: 0;
    padding: clamp(168px, 18svh, 272px) 46px clamp(20px, calc(28svh - 267px), 154px);
    justify-content: flex-start;
    transform: none;
  }

  .home-page .hero-content .eyebrow {
    max-width: 330px;
    margin: 0 0 48px;
    gap: 14px;
    color: var(--accent);
    font-size: clamp(16px, 1.72vw, 18px);
    line-height: 1.45;
    letter-spacing: 0.04em;
  }

  .home-page .hero-content .eyebrow::before {
    width: 38px;
    height: 2px;
    flex: 0 0 38px;
    background: var(--accent);
  }

  .home-page .hero-content h1 {
    max-width: 520px;
    color: var(--bg);
    font-size: clamp(72px, 8.04vw, 84px);
    line-height: 1.08;
  }

  .home-page .hero-content > p {
    max-width: 500px;
    margin-top: 20px;
    color: var(--bg);
    font-size: clamp(19px, 2.1vw, 22px);
    line-height: 1.45;
  }

  .home-page .hero-actions {
    display: grid;
    width: min(350px, 48vw);
    margin-top: 48px;
    gap: 24px;
  }

  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    width: 100%;
    min-width: 0;
    height: 80px;
    min-height: 80px;
    padding-inline: 26px;
    font-size: clamp(18px, 1.91vw, 20px);
  }

  .home-page .hero-actions .btn:first-child {
    border-color: var(--fg);
    background: color-mix(in srgb, var(--fg) 88%, transparent);
    color: var(--surface);
  }

  .home-page .hero-actions .btn--secondary {
    border-color: color-mix(in srgb, var(--fg) 72%, transparent);
    background: color-mix(in srgb, var(--fg) 88%, transparent);
    color: var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent), 0 0 18px color-mix(in srgb, var(--fg) 30%, transparent);
  }

  /* Keep both opening actions quiet at rest; feedback is reserved for hover
     and press, so the controls do not compete with the hero image. */
  .home-page .hero-actions .btn:first-child,
  .home-page .hero-actions .btn--secondary {
    border-color: color-mix(in srgb, var(--fg) 72%, transparent);
    background: color-mix(in srgb, var(--fg) 88%, transparent);
    box-shadow: none;
    transition: font-size 160ms ease, transform 160ms ease, border-color 160ms ease;
  }
  .home-page .hero-actions .btn:hover {
    font-size: clamp(19px, 2.05vw, 21px);
    transform: none;
  }
  .home-page .hero-actions .btn:active {
    font-size: clamp(18px, 1.91vw, 20px);
    transform: translateY(1px);
  }

  .home-page .hero-facts {
    grid-template-columns: 30% 36.6% 33.4%;
    width: min(82.6vw, 930px);
    margin: auto 0 0;
    padding-top: clamp(8px, 1.6svh, 18px);
    color: var(--bg);
  }

  .home-page .hero-facts::before {
    display: none;
  }

  .home-page .hero-fact,
  .home-page .hero-fact:first-child {
    gap: 22px;
    min-height: 112px;
    padding: 8px 30px;
    color: var(--bg);
    font-size: clamp(18px, 1.91vw, 20px);
    line-height: 1.45;
  }

  .home-page .hero-fact:first-child {
    padding-left: 0;
  }

  .home-page .hero-fact:not(:first-child) {
    padding-left: 44px;
  }

  .home-page .hero-fact + .hero-fact {
    border-left: 1px solid color-mix(in srgb, var(--bg) 34%, transparent);
  }

  .home-page .hero-fact svg {
    width: 42px;
    height: 42px;
    color: var(--bg);
  }

  .home-page .hero-fact span {
    max-width: 150px;
  }
}

/* Reduced-motion users get no soft settle at all — site.js checks the same
   query before scheduling one, so there is nothing left to disable in CSS. */

/* Compact portrait tablets keep the same copy and type scale, but remove the
   vertical surplus that previously pushed the green opening frame beyond one
   viewport. These values converge back to the regular tablet rhythm by 1200px. */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) and (max-height: 1199px) {
  .home-page .hero-content h1 { line-height: 1.02; }

  .home-page .hero-content > p { line-height: 1.35; }

  .home-page .hero-actions {
    margin-top: clamp(24px, calc(15svh - 130px), 48px);
    gap: clamp(16px, calc(5svh - 35px), 24px);
  }

  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    height: clamp(72px, calc(5svh + 21px), 80px);
    min-height: clamp(72px, calc(5svh + 21px), 80px);
  }

  .home-page .hero-fact,
  .home-page .hero-fact:first-child {
    min-height: clamp(102px, 10svh, 112px);
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Responsive smart header: the full header belongs to the opening frame. Once
   it has naturally scrolled away, a compact header returns only on upward intent. */
.tablet-header-spacer {
  display: none;
}

@media (max-width: 1180px) {
  .tablet-header-spacer.is-active {
    display: block;
    height: var(--tablet-header-flow-height, 88px);
  }

  .home-page .site-header.tablet-header-detached {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    width: 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
    background: var(--fg);
    transform: translateY(-100%);
    transition: transform 160ms ease-out;
    will-change: transform;
    pointer-events: none;
  }

  .home-page .site-header.tablet-header-detached.tablet-header-visible {
    transform: translateY(0);
    pointer-events: auto;
  }

}

/* Shared content-frame language — aligned to the Our Delivery outer panel.
   This deliberately applies only to page-scale content regions, not controls,
   image treatments, tags, or service-detail surfaces. */
.home-page .hero-panel,
.delivery-reference-shell,
.services-showcase-panel,
.who-help-panel,
.about-inner,
.about-cta,
.join-us-panel {
  border: 1px solid color-mix(in srgb, var(--border) 28%, transparent);
  border-radius: var(--radius);
}

.home-page .hero-panel,
.delivery-reference-shell,
.services-showcase-panel,
.who-help-panel,
.about-inner,
.join-us-panel {
  background: var(--bg);
  box-shadow: none;
}

/* Mobile and tablet Hero are image/content fields, not framed cards. */
@media (max-width: 1180px) {
  .home-page .hero-panel {
    border: 0;
    border-radius: 0;
  }
}

.about-inner {
  padding: clamp(42px, 5vw, 68px);
  overflow: hidden;
}

/* This rule sits after the ≤760px override earlier in the file (around
   line 881) and has the same specificity (0,1,0) — since a media query
   doesn't add specificity, plain source order decides, and this later
   unscoped rule was silently winning at every width, which is why the
   earlier phone-padding fix never actually rendered. Repeating the
   override here, after this rule, is what actually makes it win. */
@media (max-width: 760px) {
  .about-inner { padding: 42px 24px; }

  /* CTA's frame starts on the same guide as the Join Us Name field. The
     supplied photo deliberately spans the frame's inner width, instead of
     inheriting the text/action inset around it. */
  .about-cta {
    padding-inline: 0;
    border-color: transparent;
  }

  .about-cta-copy h3,
  .about-cta-copy > p {
    margin-inline: 0;
  }

  .about-cta-copy h3 {
    /* This negative top margin lifts the following subtitle and image with
       the heading in the same mobile CTA content flow. */
    margin: -25px 0 -18px;
    max-width: 240px;
    line-height: 1;
  }

  .about-cta-bg {
    width: 100%;
    border-radius: 0;
  }
}

/* Tablet section rhythm: About Us ends with 96px of its own canvas space.
   Add the remaining 94px before Join Us so this transition matches the
   190px Who We Help → About Us gap without altering phone or desktop. */
@media (min-width: 761px) and (max-width: 1180px) {
  .join-us-section { padding-top: 94px; }
}

/* Shared paragraph-copy treatment for the marked service, support and about
   content. Headings, bold summary lines, navigation, labels and tags retain
   their own hierarchy. */
.delivery-copy p,
.services-detail-copy p:not(.services-lead),
.services-subsection > p:not(.services-list-lead):not(.services-cta-heading),
.who-help-card > p:not(.who-help-lead),
.about-block > p {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
}

/* The supplied referral-banner image is the complete background treatment.
   Keep it unmasked; shift the copy to dark brand colors for the image's
   intentionally pale left-side space. */
.about-cta::before {
  display: none;
}

.about-cta-copy,
.about-cta-copy h3 {
  color: var(--surface);
}

.about-cta-copy p {
  color: color-mix(in srgb, var(--surface) 82%, transparent);
}

.about-cta-actions .btn--secondary {
  border-color: color-mix(in srgb, var(--surface) 50%, transparent);
  color: var(--surface);
}

/* The rules above assume the overlay-on-photo card (white text for
   contrast against the image) and sit after the ≤760px stacked-layout
   override earlier in the file — same specificity, later source wins,
   so without this they'd silently repaint the phone layout's dark text
   back to white-on-cream (invisible). Re-asserting dark colors here,
   after them, is what actually makes the phone version win. */
@media (max-width: 760px) {
  .about-cta-copy,
  .about-cta-copy h3 {
    color: var(--fg);
  }
  .about-cta-copy p {
    color: var(--muted);
  }
  .about-cta-actions .btn--secondary {
    border-color: var(--border);
    color: var(--fg);
  }
}

/* Who We Help — tablet card refinements from the marked review.
   The bold support summaries carry the first reading weight, while the
   paragraph below remains the softer secondary copy. */
@media (min-width: 761px) and (max-width: 1180px) {
  .who-help-card > .who-help-lead {
    color: color-mix(in srgb, #1a1a1a 72%, var(--muted));
  }

  /* Every support title follows the compact one-line Adults treatment. */
  .who-help-card > h3 {
    display: block;
    align-self: start;
    white-space: nowrap;
    font-size: clamp(22px, 2.35vw, 26px);
    line-height: 1.05;
  }

  /* The two dividers belong to the equal-width panel itself—not to a card
     sibling—so both stay present even when cards are re-ordered or hidden. */
  .who-help-panel {
    position: relative;
    isolation: isolate;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .who-help-panel::before,
  .who-help-panel::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 26px;
    bottom: 32px;
    width: 1px;
    background: color-mix(in srgb, var(--border) 22%, transparent);
    pointer-events: none;
  }

  .who-help-panel::before { left: calc(100% / 3); }
  .who-help-panel::after { left: calc(200% / 3); }

  .who-help-panel > article.who-help-card {
    position: relative;
    z-index: 2;
  }

  .who-help-panel > article.who-help-card + article.who-help-card {
    border-left: 0;
  }
}

/* Homepage referral action: keep the conversion action distinct from the call action. */
.home-page .hero-actions .btn,
.home-page .hero-actions .btn--secondary {
  font-weight: 600;
  transition: transform .2s ease, background .2s ease, font-weight .16s ease;
}

.home-page .hero-actions .btn:hover {
  font-weight: 700;
}

.home-page .hero-actions .btn[data-od-id="hero-primary-action"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.home-page .hero-actions .btn[data-od-id="hero-primary-action"]:hover {
  border-color: color-mix(in srgb, var(--accent) 84%, var(--fg));
  background: color-mix(in srgb, var(--accent) 84%, var(--fg));
}

.home-page .hero-actions .btn[data-od-id="hero-primary-action"]:active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--fg));
  background: color-mix(in srgb, var(--accent) 72%, var(--fg));
}

/* The referral action belongs in the opened navigation list, never in the header row. */
.home-page .main-nav .nav-cta { display: none; }
.home-page .main-nav.is-open .nav-cta { display: inline-flex; }

/* Desktop services now follows the approved tablet information order:
   image + two-paragraph overview, a full support grid, then approach and
   location sections. The tablet breakpoint keeps its own scale below. */
@media (min-width: 1181px),
       (min-width: 1000px) and (max-width: 1180px) and (orientation: landscape) {
  /* PC only: keep every page-level panel in the layout, but make its
     outline fully invisible. Internal dividers, controls, and image frames
     remain untouched. */
  .home-page .hero-panel,
  .delivery-reference-shell,
  .services-showcase-panel,
  .who-help-panel,
  .about-inner,
  .about-cta,
  .join-us-panel {
    border-color: transparent !important;
  }

  /* One shared outer-frame calculation: the Hero and services panel must
     begin and end on the exact same desktop guide, not on parent-specific
     padding values. */
  .home-page .hero {
    padding-inline: 0;
  }

  .home-page .hero-panel,
  .services-showcase-panel {
    width: min(calc(100% - 56px), var(--desktop-content));
    max-width: var(--desktop-content);
    margin-inline: auto;
  }

  /* PC reference treatment: a warm cream field gently brightens toward the
     photograph. The image remains untinted and owns the final hand-off. */
  .home-page .hero-panel {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    /* Keep the green field inside the padding edge so it cannot tint the
       translucent frame. The border then mixes against the same cream page
       canvas as the Services panel and reads with the same quiet weight. */
    border-color: color-mix(in srgb, var(--border) 28%, transparent) !important;
    background: linear-gradient(90deg,
      var(--bg) 0%,
      var(--bg) 40%,
      color-mix(in srgb, var(--surface) 24%, var(--bg)) 58%,
      color-mix(in srgb, var(--surface) 58%, var(--bg)) 78%,
      var(--surface) 100%);
    background-clip: padding-box;
    isolation: isolate;
  }

  /* The photo reaches into the green field, then reveals itself gradually.
     No green overlay sits on top of it; the image's own alpha is the hand-off. */
  .home-page .hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 118%;
    min-height: 0;
    margin-left: -18%;
    overflow: hidden;
    background: transparent;
  }

  .home-page .hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 21% center;
    /* PC: tighten the image hand-off so the left edge reads clearer rather
       than like a broad soft-focus band. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, color-mix(in srgb, var(--fg) 56%, transparent) 9%, color-mix(in srgb, var(--fg) 92%, transparent) 16%, var(--fg) 23%, var(--fg) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, color-mix(in srgb, var(--fg) 56%, transparent) 9%, color-mix(in srgb, var(--fg) 92%, transparent) 16%, var(--fg) 23%, var(--fg) 100%);
    transform: none;
  }

  .home-page .hero-image img:hover {
    transform: none;
    filter: none;
  }

  .home-page .hero-image::before {
    display: none;
  }

  /* No full-width overlay: it would create a second green colour field and
     reveal the image column as a vertical band. */
  .home-page .hero-panel::after {
    display: none;
  }

  .home-page .hero-content {
    z-index: 3;
    transform: none;
    padding-left: clamp(58px, 4.4vw, 76px);
    padding-right: clamp(42px, 3vw, 52px);
  }

  /* PC only: move the marked three-line hero title without changing the
     paragraph, actions, or any tablet/mobile layout. */
  .home-page .hero-content h1 {
    transform: translateY(13px);
  }

  .home-page .hero-content > p {
    margin-top: calc(clamp(20px, 1.56vw, 26px) + 20px);
    transform: translateY(12px);
  }

  .home-page .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(570px, 100%);
    margin-top: calc(clamp(28px, 2.22vw, 37px) + 22px);
    gap: clamp(24px, 2.52vw, 42px);
  }

  .home-page .hero-actions .btn,
  .home-page .hero-actions .btn--secondary {
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    padding-inline: 18px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease, font-weight .16s ease;
  }

  .home-page .hero-actions .btn[data-od-id="hero-primary-action"] {
    border-color: var(--fg);
    background: var(--fg);
    color: var(--surface);
  }

  .home-page .hero-actions .btn[data-od-id="hero-primary-action"]:hover {
    border-color: color-mix(in srgb, var(--fg) 88%, var(--muted));
    background: color-mix(in srgb, var(--fg) 88%, var(--muted));
  }

  .home-page .hero-actions .btn:hover {
    font-weight: 700;
  }

  .home-page .hero-actions .btn[data-od-id="hero-primary-action"]:active {
    border-color: color-mix(in srgb, var(--fg) 76%, var(--muted));
    background: color-mix(in srgb, var(--fg) 76%, var(--muted));
  }

  .home-page .hero-actions .btn--secondary svg {
    display: none;
  }

  .home-page .hero-facts {
    width: 100%;
    margin-left: 0;
  }

  .home-page .hero-fact:first-child {
    padding-left: 0;
  }

  .home-page .hero-content,
  .home-page .hero-content h1,
  .home-page .hero-content > p,
  .home-page .hero-note,
  .home-page .hero-fact {
    color: var(--fg);
  }

  .home-page .hero-facts::before {
    /* The rule deliberately reaches beyond the copy column and fades out at
       the photo hand-off; the highlight content itself stays in its grid. */
    width: 116%;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--border) 58%, transparent) 0%,
      color-mix(in srgb, var(--border) 30%, transparent) 62%,
      color-mix(in srgb, var(--border) 12%, transparent) 80%,
      transparent 94%);
  }

  .home-page .hero-fact + .hero-fact {
    border-left-color: color-mix(in srgb, var(--border) 30%, transparent);
  }

  #services.services-showcase { padding: 56px 0 72px; }

  .services-showcase-panel {
    /* Match the Hero frame's actual outer width at every desktop viewport:
       the same 28px minimum side inset applies before the 1160px cap. */
    width: min(calc(100% - 56px), var(--desktop-content));
    max-width: var(--desktop-content);
    padding: 40px 56px 56px;
  }

  .services-tabs { margin-top: 34px; }

  .services-detail {
    grid-template-columns: minmax(0, 0.515fr) minmax(0, 0.485fr);
    grid-template-rows: auto auto;
    grid-template-areas: "photo copy" "sections sections";
    gap: 48px 54px;
    margin-top: 46px;
    padding: 0;
  }

  .services-detail-image {
    height: 400px;
    border-radius: calc(var(--radius) * 1.75);
  }

  .services-detail-copy {
    padding: 8px 32px 16px 0;
  }

  .services-detail-copy h3 {
    max-width: 720px;
    font-size: clamp(38px, 3vw, 48px);
  }

  .services-lead {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .services-intro {
    max-width: 62ch;
    margin-bottom: 0;
  }

  .services-intro p + p { margin-top: 18px; }

  #services-sections { min-width: 0; }
  .services-divider { display: none; }
  .services-subsection { margin-bottom: 30px; }

  .services-subsection:not(:has(.services-list)) {
    min-height: 0;
    padding: 26px 4%;
    background: var(--bg);
    border-radius: calc(var(--radius) * 1.75);
  }

  .services-subsection h4,
  .services-subsection .services-list-lead {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .services-subsection h4 {
    margin-bottom: 14px;
    font-size: clamp(26px, 2.15vw, 32px);
  }

  .services-subsection .services-list-lead {
    width: 92%;
    margin: 0 auto 26px;
    font-size: clamp(28px, 2.35vw, 34px);
  }

  .services-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(164px, auto);
    gap: 18px 22px;
    width: 92%;
    max-width: none;
    margin: 0 auto;
  }

  .services-list li {
    min-width: 0;
    min-height: 164px;
    display: grid;
    grid-template-rows: 62px 3.75em;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 18px;
    background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--bg) 88%, var(--accent) 12%));
    border-radius: calc(var(--radius) * 2.1);
    color: var(--fg);
    text-align: center;
  }

  .services-list li::before { display: none; }
  .services-list--four-plus-three { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .services-list--four-plus-three li { grid-column: span 3; }
  .services-list--four-plus-three li:nth-child(5) { grid-column: 2 / span 3; }
  .services-list--four-plus-three li:nth-child(6) { grid-column: 5 / span 3; }
  .services-list--four-plus-three li:nth-child(7) { grid-column: 8 / span 3; }

  .services-item-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    color: var(--accent);
  }

  .services-item-icon :is(svg, img) {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .services-item-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }

  .services-subsection > p:not(.services-list-lead) {
    max-width: 78ch;
    font-size: 16px;
    line-height: 1.62;
  }

  .services-icon-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }

  .services-icon-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding-right: 10px;
    color: var(--fg);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .services-icon-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 0;
    width: 1px;
    height: 46px;
    background: color-mix(in srgb, var(--border) 28%, transparent);
  }

  .services-icon-item .services-item-icon {
    width: 48px;
    height: 48px;
    color: var(--border);
  }

  .services-icon-item .services-item-icon :is(svg, img) {
    width: 42px;
    height: 42px;
  }

  .services-icon-item:first-child { justify-content: flex-start; }
  .services-icon-item:first-child .services-item-icon { width: 56px; height: 56px; margin-left: -3px; }
  .services-icon-item:first-child .services-item-icon :is(svg, img) { width: 50px; height: 50px; }
}

/* Keep page-level panels for spacing/clipping, but hide their outer outlines
   at every viewport. Internal dividers, controls, and image frames remain. */
.home-page .hero-panel,
.delivery-reference-shell,
.services-showcase-panel,
.who-help-panel,
.about-inner,
.about-cta,
.join-us-panel {
  border-color: transparent !important;
}

/* ============================================================
   表单提交状态区(2026-08 后端接入新增,规范:说明书 §4.4)
   ============================================================ */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1c2b28;
}

.form-status--error,
.join-us-form-status.form-status--error {
  color: #b3261e;
}

.form-status--success,
.join-us-form-status.form-status--success {
  color: #0f4f48;
  font-weight: 600;
}

.form-status-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn--small {
  padding: 8px 16px;
  font-size: 0.9rem;
}

button[disabled].btn {
  opacity: 0.65;
  cursor: not-allowed;
}