/* Concept: "Open brackets, one line" - the nested open rectangles of the practice's logo mark become corner brackets that hold every picture, and the single phone line that serves all five Valley offices runs through the page as a route; sections follow the order a nervous patient's questions arrive. */

:root {
  --ink: #0C2B3A;    /* deep blue-black, body copy and dark bands */
  --slate: #46606E;  /* blue-biased neutral for secondary text */
  --paper: #F2F8FB;  /* cool tinted white, sampled toward the logo blue */
  --sky: #00A0DF;    /* logo blue: fills, rules and brackets only */
  --deep: #075C85;   /* text-safe blue for links and the call button */
  --lime: #ADCF3A;   /* logo green: brackets and the closing band */
  --gutter: 16px;
  --head-h: 60px;
  --font-head: "Outfit", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 1.5vw + 1.6rem, 2.75rem); font-weight: 600; }
h3 { font-size: clamp(1.375rem, 0.6vw + 1.25rem, 1.75rem); font-weight: 600; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--deep); text-underline-offset: 0.18em; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero-panel :focus-visible { outline-color: var(--lime); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 600;
}
.skip-link:focus { top: 8px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- header: stays put, logo left, menu between, call right ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  background: #fff;
  border-bottom: 1px solid #cfe3ee;
}
.site-header .bar {
  height: 100%; display: flex; align-items: center; gap: 6px;
  max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
}
.logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; flex: none; }
.logo img { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; }
.menu-btn {
  width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 6px;
  background: #fff; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-fallback {
  display: none; min-height: 44px; align-items: center; padding: 0 10px;
  font-weight: 600; color: var(--ink);
}
.no-js .menu-btn { display: none; }
.no-js .menu-fallback { display: inline-flex; }
.site-menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 4px solid var(--sky);
  padding: 8px var(--gutter) 16px;
  box-shadow: 0 18px 30px rgba(12, 43, 58, 0.18);
  max-height: calc(100vh - var(--head-h)); overflow-y: auto;
}
.site-menu.is-open { display: block; }
.site-menu a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid #dbe9f1;
}
.site-menu a[aria-current="page"] { color: var(--deep); box-shadow: inset 4px 0 0 var(--sky); padding-left: 12px; }
.site-menu .menu-call a { border: 0; color: var(--deep); margin-top: 6px; }

.call-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 12px;
  background: var(--deep); color: #fff; border-radius: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.call-btn svg { width: 16px; height: 16px; flex: none; }
.call-btn:hover { background: var(--ink); }
@media (max-width: 349px) {
  .call-btn svg { display: none; }
  .logo img { height: 36px; }
}

@media (min-width: 1120px) {
  .menu-btn, .menu-fallback, .no-js .menu-fallback { display: none; }
  .site-menu, .site-menu.is-open {
    display: flex; position: static; padding: 0; border: 0; box-shadow: none; gap: 2px;
    background: none; max-height: none; overflow: visible; margin-right: 10px;
  }
  .site-menu a { min-height: 44px; padding: 0 9px; border: 0; font-size: 0.9375rem; white-space: nowrap; }
  .site-menu a:hover { color: var(--deep); text-decoration: underline; text-decoration-thickness: 2px; }
  .site-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sky); padding-left: 9px; }
  .site-menu .menu-call { display: none; }
  .logo img { height: 46px; }
  .call-btn { font-size: 1rem; padding: 0 16px; }
}

/* ---------- buttons ---------- */
.btn-call {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 22px; border-radius: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.25rem;
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--deep); color: #fff;
}
.btn-call svg { width: 20px; height: 20px; flex: none; }
.btn-call:hover { background: var(--ink); }
.btn-call.lime { background: var(--lime); color: var(--ink); }
.btn-call.lime:hover { background: #fff; }
.btn-call.dark { background: var(--ink); color: #fff; }
.btn-call.dark:hover { background: var(--deep); }
.more { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- pictures held by the logo's brackets ---------- */
.frame { margin: 0; }
.shot { position: relative; }
.shot img { width: 100%; }
.shot::before, .shot::after {
  content: ""; position: absolute; width: 56px; height: 56px; pointer-events: none;
}
.shot::before { top: -8px; left: -8px; border-top: 6px solid var(--sky); border-left: 6px solid var(--sky); }
.shot::after { bottom: -8px; right: -8px; border-bottom: 6px solid var(--lime); border-right: 6px solid var(--lime); }
figcaption { margin-top: 14px; font-size: 0.9375rem; color: var(--slate); }
.on-dark figcaption { color: var(--paper); }

/* ---------- hero ---------- */
.hero { background: var(--ink); }
.hero picture, .hero picture img { display: block; width: 100%; }
.hero picture img { aspect-ratio: 5 / 4; object-fit: cover; }
.hero-panel { background: var(--ink); color: #fff; padding: 24px var(--gutter) 32px; position: relative; }
.hero-panel::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); width: 72px; height: 6px; background: var(--lime);
}
.hero h1 { font-size: clamp(2.125rem, 7vw + 0.4rem, 3.75rem); font-weight: 600; letter-spacing: -0.02em; }
.hero .btn-call { margin-top: 20px; }
.hero .lead { margin-top: 20px; color: var(--paper); max-width: 34em; }
@media (min-width: 760px) {
  .hero picture img { aspect-ratio: 16 / 9; }
  .hero-panel { padding: 32px max(var(--gutter), calc((100vw - 1168px) / 2)) 40px; }
}
@media (min-width: 960px) {
  .hero {
    background: var(--paper); display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 1168px) minmax(var(--gutter), 1fr);
    padding-bottom: 72px;
  }
  .hero picture { grid-column: 1 / -1; grid-row: 1; }
  .hero picture img { aspect-ratio: auto; height: clamp(500px, 70vh, 660px); object-position: 80% 30%; }
  .hero-panel {
    grid-column: 2; grid-row: 1; align-self: end; justify-self: start;
    width: min(580px, 54%); padding: 40px 40px 44px; margin-bottom: -72px;
  }
  .hero-panel::before { left: 40px; }
}

/* ---------- sections ---------- */
.band { padding-block: 56px; }
.band.white { background: #fff; }
.band.on-dark { background: var(--ink); color: #fff; }
.band.on-dark a:not(.btn-call) { color: #fff; }
.band.lime { background: var(--lime); }
.stack > * + * { margin-top: 20px; }
.note { color: var(--slate); font-size: 1rem; }
.on-dark .note { color: var(--paper); }
@media (min-width: 900px) { .band { padding-block: 96px; } }

blockquote { margin: 0; }
blockquote p { font-family: var(--font-head); font-weight: 500; line-height: 1.3; }
blockquote footer, .cite { margin-top: 12px; font-size: 1rem; font-weight: 600; color: var(--slate); font-family: var(--font-body); }
.on-dark blockquote footer { color: var(--paper); }
.quote-big p { font-size: clamp(1.375rem, 1.3vw + 1.05rem, 2rem); }
.quote-side { border-left: 6px solid var(--sky); padding-left: 18px; }
.quote-side p { font-size: 1.25rem; }

/* the nerves */
.nerves .wrap { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .nerves .wrap { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
}

/* the work */
.work-head { max-width: 22em; }
.work-pair { display: grid; gap: 28px; margin-top: 40px; }
.work-pair + .work-pair { margin-top: 64px; }
.also { margin-top: 56px; padding-top: 24px; border-top: 2px solid var(--ink); max-width: 46em; }
@media (min-width: 900px) {
  .work-pair { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; margin-top: 56px; }
  .work-pair.flip { grid-template-columns: 5fr 6fr; margin-left: 8%; margin-top: 96px; }
  .work-pair.flip .frame { order: 2; }
}

/* the people */
.roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 16px; margin-top: 40px; }
.roster li { width: calc(50% - 8px); }
.roster img { width: 100%; border-radius: 4px; }
.roster h3 { font-size: 1.125rem; margin-top: 12px; line-height: 1.25; }
.roster .deg { font-size: 1rem; color: var(--slate); }
.people-intro { max-width: 40em; }
.hospitals { margin-top: 56px; display: grid; gap: 28px; }
.hospitals ul { margin-top: 14px; }
.hospitals li { padding: 8px 0 8px 18px; border-bottom: 1px solid #c9dde8; position: relative; }
.hospitals li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; background: var(--sky); }
.team { margin-top: 64px; display: grid; gap: 28px; }
@media (min-width: 700px) {
  .roster li { width: calc(33.333% - 11px); }
}
@media (min-width: 1000px) {
  .roster { flex-wrap: nowrap; gap: 20px; padding-bottom: 32px; }
  .roster li { width: 20%; }
  .roster li:nth-child(even) { transform: translateY(32px); }
  .hospitals { grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; margin-top: 88px; }
  .hospitals ul { columns: 2; column-gap: 32px; }
  .hospitals li { break-inside: avoid; }
  .team { grid-template-columns: 8fr 4fr; gap: 56px; align-items: end; margin-top: 96px; }
}

/* the place: one line, five offices */
.place-top { display: grid; gap: 32px; }
.route { margin-top: 44px; position: relative; padding-left: 30px; }
.route::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 4px; background: var(--sky); }
.route li { position: relative; padding-bottom: 26px; }
.route li:last-child { padding-bottom: 0; }
.route li::before {
  content: ""; position: absolute; left: -30px; top: 7px; width: 16px; height: 16px;
  background: var(--ink); border: 4px solid var(--lime);
}
.route h3 { font-size: 1.5rem; }
.route .sat { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--lime); color: var(--ink); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; vertical-align: middle; border-radius: 3px; }
.route address, .route .hours { color: var(--paper); font-size: 1.0625rem; }
.route-end { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
@media (min-width: 900px) {
  .place-top { grid-template-columns: 5fr 7fr; gap: 72px; align-items: end; }
  .route { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-left: 0; padding-top: 34px; margin-top: 72px; }
  .route::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 4px; }
  .route li { padding-bottom: 0; }
  .route li::before { left: 0; top: -34px; }
  .route address, .route .hours { font-size: 1rem; }
}

/* first visit */
.visit .wrap { display: grid; gap: 36px; }
.visit-list { margin-top: 8px; }
.visit-list li { padding: 16px 0; border-top: 1px solid #c9dde8; }
.visit-list li:last-child { border-bottom: 1px solid #c9dde8; }
.visit-list strong { font-family: var(--font-head); font-size: 1.1875rem; display: block; }
@media (min-width: 900px) {
  .visit .wrap { grid-template-columns: 6fr 6fr; gap: 72px; align-items: center; }
  .visit .frame { order: 2; }
}

/* proof */
.proof .wrap { display: grid; gap: 36px; }
.rating { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 20px; border-top: 2px solid var(--ink); }
.rating .num { font-family: var(--font-head); font-weight: 600; font-size: 3.5rem; line-height: 1; }
.rating .what { flex: 1 1 220px; font-size: 1rem; color: var(--slate); }
@media (min-width: 900px) {
  .proof .wrap { grid-template-columns: 6fr 6fr; gap: 72px; align-items: center; }
}

/* closing call */
.closing { text-align: left; }
.closing h2 { max-width: 16em; }
.closing .big-number {
  display: inline-flex; align-items: center; min-height: 56px; margin-top: 18px;
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  font-size: clamp(2.5rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -0.02em;
  text-decoration-thickness: 4px; text-underline-offset: 0.12em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.closing .big-number:focus-visible { outline-color: var(--ink); }
.closing p { margin-top: 18px; max-width: 36em; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 48px 32px; font-size: 1rem; }
.site-footer a { color: #fff; }
.site-footer .cols { display: grid; gap: 32px; }
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-brand .chip { background: #fff; padding: 8px; border-radius: 6px; flex: none; }
.foot-brand img { width: 40px; height: auto; }
.foot-brand strong { font-family: var(--font-head); font-size: 1.125rem; line-height: 1.25; color: #fff; display: block; }
.foot-nav a, .foot-call a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-nav ul { columns: 2; column-gap: 24px; }
.foot-h { font-family: var(--font-head); font-weight: 600; color: #fff; margin-bottom: 6px; font-size: 1rem; }
.foot-small { margin-top: 32px; padding-top: 20px; border-top: 1px solid #2b4f61; font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
@media (min-width: 900px) {
  .site-footer .cols { grid-template-columns: 5fr 4fr 3fr; gap: 56px; }
}

/* ---------- stub pages ---------- */
.stub { padding-block: 56px 72px; background: #fff; }
.stub .wrap { max-width: 860px; }
.stub h1 { font-size: clamp(2.25rem, 5vw + 1rem, 4rem); font-weight: 600; letter-spacing: -0.02em; position: relative; padding-top: 22px; }
.stub h1::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 6px; background: var(--sky); }
.stub p { margin-top: 20px; max-width: 38em; }
.stub .btn-call { margin-top: 28px; }
@media (min-width: 900px) { .stub { padding-block: 96px 120px; min-height: 60vh; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .call-btn, .btn-call, .site-menu a { transition: background-color 0.15s ease, color 0.15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}