ページ難しい

Clinic — Specialist / Surgery Center Landing

Premium specialist and surgery center landing in a deep-blue, silver and restrained-gold palette with modern serif headings. Sticky nav with mobile menu, a gradient hero with a live consultation desk, a six-card specialties grid, an animated outcomes band, text-based accreditation seals, a featured-surgeon spotlight, and a validated consultation request form. Reveal-on-scroll, scroll-spy nav, counting stats, and toast feedback throughout.

Labで開く

html css vanilla-js

ターゲット: JS HTML

コード

:root {
  --navy: #11284a;
  --navy-d: #0a1a33;
  --navy-700: #0e2240;
  --steel: #5b7299;
  --steel-soft: #eaeff7;
  --silver: #dfe5ee;
  --silver-2: #c7d1e1;
  --gold: #c7a86a;
  --gold-d: #a8884a;
  --gold-soft: #f3ebd9;
  --ink: #0d1b30;
  --ink-2: #33425c;
  --muted: #6c7993;
  --bg: #f6f8fc;
  --white: #ffffff;
  --line: rgba(13, 27, 48, 0.1);
  --line-2: rgba(13, 27, 48, 0.18);
  --ok: #2f7a6b;
  --warn: #b5852c;
  --danger: #c2503e;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(13, 27, 48, 0.05), 0 6px 18px rgba(13, 27, 48, 0.07);
  --shadow-2: 0 22px 52px rgba(10, 26, 51, 0.26);
  --shadow-gold: 0 10px 26px rgba(199, 168, 106, 0.34);
  --maxw: 1140px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  font-size: 0.9rem;
}
.skip-link:focus {
  left: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Buttons ── */
.btn {
  --btn-pad: 11px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: var(--btn-pad);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.18s, border-color 0.18s, box-shadow 0.18s,
    color 0.18s;
}
.btn:active {
  transform: translateY(1px);
}
.btn-sm {
  --btn-pad: 9px 16px;
  font-size: 0.84rem;
}
.btn-lg {
  --btn-pad: 14px 26px;
  font-size: 0.96rem;
}
.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 20px rgba(17, 40, 74, 0.22);
}
.btn-primary:hover {
  background: var(--navy-d);
  box-shadow: 0 12px 26px rgba(17, 40, 74, 0.3);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--navy-d);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(199, 168, 106, 0.42);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.btn-ghost:hover {
  border-color: var(--navy);
  background: var(--steel-soft);
  color: var(--navy);
}

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 248, 252, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 22px rgba(13, 27, 48, 0.07);
  background: rgba(246, 248, 252, 0.94);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--navy);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--navy), var(--navy-d));
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(199, 168, 106, 0.4);
}
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-sub {
  font-family: var(--font);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 3px;
}
.brand-name.big {
  font-size: 1.42rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 6px;
}
.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color 0.15s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--navy);
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.nav-toggle span {
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 15% 0%, #1b3a66 0%, var(--navy) 42%, var(--navy-d) 100%);
  color: #eaf0fb;
  isolation: isolate;
}
.hero-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 130%;
  background: radial-gradient(circle, rgba(199, 168, 106, 0.22), transparent 62%);
  filter: blur(4px);
  z-index: -1;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
}
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 84px 22px 92px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d6c79a;
  background: rgba(199, 168, 106, 0.12);
  border: 1px solid rgba(199, 168, 106, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(199, 168, 106, 0.2);
}

.display {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
}
.display .hl {
  color: var(--gold);
  font-style: italic;
}
.lede {
  margin-top: 20px;
  max-width: 38ch;
  font-size: 1.06rem;
  color: #c4d0e6;
  line-height: 1.62;
}
.hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.26);
  color: #eaf0fb;
}
.hero .btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.hero-trust {
  margin-top: 38px;
  display: flex;
  gap: 34px;
  list-style: none;
  flex-wrap: wrap;
}
.hero-trust li {
  display: flex;
  flex-direction: column;
}
.hero-trust strong {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
}
.hero-trust span {
  font-size: 0.82rem;
  color: #9fb0cd;
  margin-top: 2px;
}

/* Hero card */
.hero-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-lg);
  padding: 24px;
  color: var(--ink);
  box-shadow: var(--shadow-2);
}
.hc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hc-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.hc-headline {
  margin: 16px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hc-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}
.hc-unit {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 14ch;
  line-height: 1.35;
}
.hc-list {
  list-style: none;
  margin: 18px 0;
  border-top: 1px solid var(--line);
}
.hc-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.hc-list li span:nth-child(2) {
  flex: 1;
}
.hc-list strong {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.86rem;
}
.hc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.hc-foot {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* ── Badges ── */
.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.ok {
  background: rgba(47, 122, 107, 0.14);
  color: var(--ok);
}
.badge.warn {
  background: rgba(181, 133, 44, 0.16);
  color: var(--warn);
}

/* ── Section scaffolding ── */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 84px 22px;
}
.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-d);
}
.kicker.light {
  color: var(--gold);
}
.section-head h2 {
  margin-top: 12px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  color: var(--navy);
}
.section-sub {
  margin-top: 14px;
  font-size: 1.02rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.grid {
  display: grid;
  gap: 18px;
}

/* ── Specialties grid ── */
.specialties-grid {
  grid-template-columns: repeat(3, 1fr);
}
.spec {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.spec:hover,
.spec:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}
.spec:hover::before,
.spec:focus-visible::before {
  transform: scaleX(1);
}
.spec-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--steel-soft);
  color: var(--navy);
  margin-bottom: 18px;
  transition: background 0.2s, color 0.2s;
}
.spec:hover .spec-icon {
  background: var(--navy);
  color: var(--gold);
}
.spec h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.spec p {
  margin-top: 9px;
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.56;
}
.spec-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-d);
  background: var(--gold-soft);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ── Outcomes band ── */
.band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-d), var(--navy) 55%, #173356);
  color: #eaf0fb;
  isolation: isolate;
}
.band-glow {
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 50%;
  height: 140%;
  background: radial-gradient(circle, rgba(199, 168, 106, 0.18), transparent 60%);
  z-index: -1;
}
.band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 76px 22px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 52px;
  align-items: center;
}
.band-copy h2 {
  margin-top: 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}
.serif.light,
.band-copy h2 {
  color: #fff;
}
.band-copy p {
  margin-top: 16px;
  font-size: 1rem;
  color: #c4d0e6;
  line-height: 1.64;
  max-width: 42ch;
}
.band-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.band-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 24px 22px;
  transition: border-color 0.2s, background 0.2s;
}
.band-stat:hover {
  border-color: rgba(199, 168, 106, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}
.band-stat dd {
  margin-top: 8px;
  font-size: 0.86rem;
  color: #b3c1da;
}

/* ── Accreditation seals ── */
.seals {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.seal {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s ease, border-color 0.18s;
}
.seal:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}
.seal-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  background: radial-gradient(circle at 30% 25%, #fff, var(--silver));
  border: 2px solid var(--silver-2);
  box-shadow: inset 0 0 0 3px rgba(199, 168, 106, 0.35);
}
.seal div {
  display: flex;
  flex-direction: column;
}
.seal strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.seal span {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Surgeon spotlight ── */
.spotlight {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
  background: linear-gradient(135deg, var(--white), var(--steel-soft));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px;
  box-shadow: var(--shadow-1);
}
.spot-portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
}
.spot-avatar {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.4rem;
  color: var(--gold);
  background: linear-gradient(150deg, var(--navy), var(--navy-d));
  box-shadow: inset 0 0 0 2px rgba(199, 168, 106, 0.45), var(--shadow-2);
  z-index: 2;
}
.spot-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--silver-2);
  z-index: 1;
}
.spot-ring.r1 {
  width: 210px;
  height: 210px;
}
.spot-ring.r2 {
  width: 250px;
  height: 250px;
  border-style: dashed;
  border-color: rgba(199, 168, 106, 0.4);
}
.spot-badge {
  position: absolute;
  bottom: 18px;
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-d);
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-gold);
}
.spot-copy h2 {
  margin-top: 12px;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--navy);
}
.spot-role {
  margin-top: 6px;
  font-weight: 600;
  color: var(--steel);
  font-size: 0.95rem;
}
.spot-bio {
  margin-top: 16px;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.64;
  max-width: 52ch;
}
.spot-stats {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 22px 0;
  flex-wrap: wrap;
}
.spot-stats li {
  display: flex;
  flex-direction: column;
}
.spot-stats strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
}
.spot-stats span {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.spot-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Consult CTA ── */
.consult-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
.consult-copy {
  background: linear-gradient(150deg, var(--navy), var(--navy-d));
  color: #eaf0fb;
  padding: 48px 40px;
}
.consult-copy h2 {
  margin-top: 12px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
}
.consult-copy p {
  margin-top: 14px;
  font-size: 1rem;
  color: #c4d0e6;
  line-height: 1.62;
}
.consult-points {
  list-style: none;
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.consult-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.94rem;
  color: #dbe4f4;
}
.consult-points li span {
  color: var(--gold);
  font-size: 0.8rem;
}
.consult-meta {
  margin-top: 20px;
  font-size: 0.84rem;
  color: #9fb0cd;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 16px;
}
.consult-form {
  background: var(--white);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field textarea {
  resize: vertical;
  min-height: 76px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(17, 40, 74, 0.12);
}
.field input.invalid,
.field select.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(194, 80, 62, 0.12);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.consult-fine {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* ── Footer ── */
.footer {
  background: var(--navy-d);
  color: #c4d0e6;
  margin-top: 40px;
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 22px 36px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
.footer .brand-name,
.footer .brand-name .brand-sub {
  color: #fff;
}
.footer .brand-sub {
  color: var(--steel);
}
.foot-brand p {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 38ch;
  color: #9fb0cd;
}
.foot-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
}
.foot-col a {
  text-decoration: none;
  transition: color 0.15s;
}
.foot-col a:hover {
  color: #fff;
}
.foot-col span {
  color: var(--steel);
  display: inline-block;
  min-width: 86px;
}
.footer-bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #8294b3;
}
.footer-bar a {
  text-decoration: none;
  color: var(--gold);
}

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy-d);
  color: #fff;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(199, 168, 106, 0.4);
  z-index: 60;
  max-width: 90vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-inner,
  .band-inner,
  .spotlight,
  .consult-card {
    grid-template-columns: 1fr;
  }
  .hero-inner {
    gap: 38px;
    padding: 64px 22px 72px;
  }
  .spotlight {
    text-align: center;
    gap: 30px;
  }
  .spot-stats,
  .spot-actions {
    justify-content: center;
  }
  .specialties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seals {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    padding: 8px 16px 16px;
    margin: 0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-links.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-cta .btn-primary {
    display: none;
  }
  .section,
  .band-inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .hero-trust {
    gap: 24px;
  }
  .band-stats,
  .specialties-grid,
  .seals,
  .field-row {
    grid-template-columns: 1fr;
  }
  .spotlight,
  .consult-copy,
  .consult-form {
    padding: 28px 22px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-bar {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

(function () {
  "use strict";

  /* ── Toast helper ── */
  const toastEl = document.getElementById("toast");
  let toastTimer = null;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.hidden = false;
    // force reflow so the transition runs every time
    void toastEl.offsetWidth;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => {
      toastEl.classList.remove("show");
      setTimeout(() => {
        toastEl.hidden = true;
      }, 280);
    }, 2600);
  }

  /* ── Sticky nav shadow ── */
  const nav = document.getElementById("nav");
  const onScrollNav = () => {
    if (!nav) return;
    nav.classList.toggle("is-stuck", window.scrollY > 8);
  };
  onScrollNav();
  window.addEventListener("scroll", onScrollNav, { passive: true });

  /* ── Mobile nav toggle ── */
  const navToggle = document.getElementById("navToggle");
  const navLinks = document.getElementById("navLinks");
  function closeMenu() {
    if (!navToggle || !navLinks) return;
    navToggle.setAttribute("aria-expanded", "false");
    navToggle.setAttribute("aria-label", "Open menu");
    navLinks.classList.remove("open");
  }
  if (navToggle && navLinks) {
    navToggle.addEventListener("click", () => {
      const open = navToggle.getAttribute("aria-expanded") === "true";
      navToggle.setAttribute("aria-expanded", String(!open));
      navToggle.setAttribute("aria-label", open ? "Open menu" : "Close menu");
      navLinks.classList.toggle("open", !open);
    });
  }

  /* ── Smooth in-page nav + close mobile menu ── */
  document.querySelectorAll("[data-link]").forEach((link) => {
    link.addEventListener("click", (e) => {
      const href = link.getAttribute("href") || "";
      if (href.startsWith("#")) {
        const target = document.querySelector(href);
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: "smooth", block: "start" });
          closeMenu();
        }
      }
    });
  });

  /* ── Reveal on scroll ── */
  const revealEls = document.querySelectorAll(".reveal");
  if ("IntersectionObserver" in window) {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.14, rootMargin: "0px 0px -40px 0px" }
    );
    revealEls.forEach((el) => io.observe(el));
  } else {
    revealEls.forEach((el) => el.classList.add("in"));
  }

  /* ── Active nav link via section observer ── */
  const links = Array.from(document.querySelectorAll(".nav-links a[href^='#']"));
  const sections = links
    .map((l) => document.querySelector(l.getAttribute("href")))
    .filter(Boolean);
  if ("IntersectionObserver" in window && sections.length) {
    const spy = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const id = entry.target.id;
            links.forEach((l) =>
              l.classList.toggle("is-active", l.getAttribute("href") === "#" + id)
            );
          }
        });
      },
      { rootMargin: "-45% 0px -50% 0px" }
    );
    sections.forEach((s) => spy.observe(s));
  }

  /* ── Animated stat counters ── */
  function animateCount(el) {
    const target = parseFloat(el.dataset.count || "0");
    const suffix = el.dataset.suffix || "";
    const decimals = parseInt(el.dataset.decimals || "0", 10);
    const duration = 1400;
    const start = performance.now();
    function frame(now) {
      const p = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
      const value = target * eased;
      const shown =
        decimals > 0
          ? value.toFixed(decimals)
          : Math.round(value).toLocaleString("en-US");
      el.textContent = shown + suffix;
      if (p < 1) requestAnimationFrame(frame);
      else
        el.textContent =
          (decimals > 0 ? target.toFixed(decimals) : target.toLocaleString("en-US")) +
          suffix;
    }
    requestAnimationFrame(frame);
  }
  const statEls = document.querySelectorAll(".stat-num[data-count]");
  if ("IntersectionObserver" in window) {
    const statObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            animateCount(entry.target);
            statObs.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.5 }
    );
    statEls.forEach((el) => statObs.observe(el));
  } else {
    statEls.forEach(animateCount);
  }

  /* ── Hero consult desk: reserve a slot (live count) ── */
  const slotCountEl = document.getElementById("slotCount");
  const reserveBtn = document.getElementById("reserveBtn");
  const deskBadge = document.getElementById("deskBadge");
  if (reserveBtn && slotCountEl) {
    reserveBtn.addEventListener("click", () => {
      let count = parseInt(slotCountEl.textContent, 10) || 0;
      if (count <= 0) {
        toast("This week is fully booked — we'll add you to the waitlist.");
        return;
      }
      count -= 1;
      slotCountEl.textContent = String(count);
      if (count === 0) {
        reserveBtn.textContent = "Join the waitlist";
        if (deskBadge) {
          deskBadge.textContent = "Waitlist only";
          deskBadge.classList.remove("ok");
          deskBadge.classList.add("warn");
        }
        toast("Last slot reserved — desk is now waitlist only.");
      } else {
        toast("Consult slot reserved · " + count + " remaining this week.");
      }
    });
  }

  /* ── Surgeon profile button ── */
  const bioBtn = document.getElementById("bioBtn");
  if (bioBtn) {
    bioBtn.addEventListener("click", () => {
      toast("Dr. Vasquez's full profile would open here.");
    });
  }

  /* ── Consultation form ── */
  const form = document.getElementById("consultForm");
  if (form) {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const name = form.querySelector("[name='name']");
      const email = form.querySelector("[name='email']");
      let ok = true;

      [name, email].forEach((f) => f && f.classList.remove("invalid"));

      if (!name || !name.value.trim()) {
        ok = false;
        if (name) name.classList.add("invalid");
      }
      const emailVal = email ? email.value.trim() : "";
      if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
        ok = false;
        if (email) email.classList.add("invalid");
      }

      if (!ok) {
        toast("Please add your name and a valid email so we can reply.");
        const firstInvalid = form.querySelector(".invalid");
        if (firstInvalid) firstInvalid.focus();
        return;
      }

      const firstName = name.value.trim().split(/\s+/)[0];
      const specialty = form.querySelector("[name='specialty']");
      const spec = specialty ? specialty.value : "a specialist";
      toast("Thank you, " + firstName + " — your " + spec + " request is in.");
      form.reset();
    });

    form.querySelectorAll("input, select, textarea").forEach((el) => {
      el.addEventListener("input", () => el.classList.remove("invalid"));
    });
  }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,[email protected],400;9..144,500;9..144,600&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Specialty Care · Meridian Surgical Institute</title>
  </head>
  <body>
    <a class="skip-link" href="#hero">Skip to content</a>

    <!-- ── Sticky nav ── -->
    <header class="nav" id="nav">
      <div class="nav-inner">
        <a class="brand" href="#hero" aria-label="Meridian Surgical Institute home">
          <span class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
              <path
                d="M12 2 4 6v6c0 4.4 3.4 8.2 8 10 4.6-1.8 8-5.6 8-10V6l-8-4Z"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linejoin="round"
              />
              <path d="M12 8v6M9 11h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
          </span>
          <span class="brand-name">Meridian<span class="brand-sub">Surgical Institute</span></span>
        </a>

        <nav class="nav-links" id="navLinks" aria-label="Primary">
          <a href="#specialties" data-link>Specialties</a>
          <a href="#outcomes" data-link>Outcomes</a>
          <a href="#accreditation" data-link>Accreditation</a>
          <a href="#surgeon" data-link>Our surgeons</a>
        </nav>

        <div class="nav-cta">
          <a class="btn btn-primary btn-sm" href="#consult" data-link>Request a consult</a>
          <button
            class="nav-toggle"
            id="navToggle"
            aria-label="Open menu"
            aria-expanded="false"
            aria-controls="navLinks"
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>

    <main>
      <!-- ── Hero ── -->
      <section class="hero" id="hero">
        <span class="hero-glow" aria-hidden="true"></span>
        <span class="hero-grid-lines" aria-hidden="true"></span>
        <div class="hero-inner">
          <div class="hero-copy reveal">
            <span class="eyebrow">
              <span class="dot" aria-hidden="true"></span> Accredited Center of Surgical Excellence
            </span>
            <h1 class="display">
              Advanced specialty care, <span class="hl">delivered with precision.</span>
            </h1>
            <p class="lede">
              Meridian Surgical Institute brings together fellowship-trained specialists, modern
              operating suites and evidence-led protocols — so complex procedures are handled with the
              composure they deserve. Every case begins with an unhurried consultation.
            </p>
            <div class="hero-actions">
              <a class="btn btn-primary btn-lg" href="#consult" data-link>Request a consultation</a>
              <a class="btn btn-ghost btn-lg" href="#specialties" data-link>Explore specialties</a>
            </div>
            <ul class="hero-trust" aria-label="At a glance">
              <li><strong>32</strong><span>fellowship-trained surgeons</span></li>
              <li><strong>6</strong><span>specialty programs</span></li>
              <li><strong>4</strong><span>state-of-the-art suites</span></li>
            </ul>
          </div>

          <aside class="hero-card reveal" aria-label="Consultation availability">
            <div class="hc-top">
              <span class="hc-tag">Consultation desk</span>
              <span class="badge ok" id="deskBadge">Accepting referrals</span>
            </div>
            <p class="hc-headline">
              <span class="hc-num" id="slotCount">9</span>
              <span class="hc-unit">consultation slots open this week</span>
            </p>
            <ul class="hc-list">
              <li>
                <span class="hc-dot" aria-hidden="true"></span>
                <span>Cardiology review</span>
                <strong>Tue · 10:15</strong>
              </li>
              <li>
                <span class="hc-dot" aria-hidden="true"></span>
                <span>Orthopedic eval</span>
                <strong>Wed · 14:40</strong>
              </li>
              <li>
                <span class="hc-dot" aria-hidden="true"></span>
                <span>Neurosurgery panel</span>
                <strong>Thu · 09:00</strong>
              </li>
            </ul>
            <button class="btn btn-gold btn-block" id="reserveBtn" type="button">
              Reserve a consult slot
            </button>
            <p class="hc-foot">Reviewed by Dr. Adrien Vasquez &amp; the surgical board</p>
          </aside>
        </div>
      </section>

      <!-- ── Specialties grid ── -->
      <section class="section" id="specialties">
        <header class="section-head reveal">
          <span class="kicker">Centers of excellence</span>
          <h2 class="serif">Specialty programs built around the case</h2>
          <p class="section-sub">
            Multidisciplinary teams, dedicated nursing and the latest minimally invasive techniques —
            organized by the condition, not the corridor.
          </p>
        </header>

        <div class="grid specialties-grid">
          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <path d="M12 20s-7-4.3-7-9.5A3.7 3.7 0 0 1 12 7a3.7 3.7 0 0 1 7 3.5C19 15.7 12 20 12 20Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M6 12h3l1.5-3 2 5 1.5-2H18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <h3>Cardiology &amp; cardiac surgery</h3>
            <p>Coronary intervention, valve repair and structural heart programs led by a dedicated cardiac team.</p>
            <span class="spec-tag">Heart &amp; vascular</span>
          </article>

          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <path d="M8 3v4M16 3v4M8 7c0 2-2 3-2 5s2 3 2 5v4M16 7c0 2 2 3 2 5s-2 3-2 5v4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <path d="M8 12h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </span>
            <h3>Orthopedics &amp; joint reconstruction</h3>
            <p>Robotic-assisted joint replacement, sports medicine and complex spine — built for a faster return to motion.</p>
            <span class="spec-tag">Bones &amp; joints</span>
          </article>

          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <path d="M9 3a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 1 5 3 3 0 0 0 4 4V3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M9 8h2M9 13h3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <path d="M15 3a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-1 5 3 3 0 0 1-4 4V3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
              </svg>
            </span>
            <h3>Neurology &amp; neurosurgery</h3>
            <p>Cerebrovascular care, image-guided tumor resection and spine surgery within a single coordinated pathway.</p>
            <span class="spec-tag">Brain &amp; spine</span>
          </article>

          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <path d="M7 4h6l4 4v12H7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M13 4v4h4" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M11 12v4M9 14h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </span>
            <h3>General &amp; minimally invasive surgery</h3>
            <p>Laparoscopic and same-day procedures with rapid-recovery protocols and clear, written pre-op guidance.</p>
            <span class="spec-tag">Day surgery</span>
          </article>

          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <circle cx="12" cy="9" r="5" stroke="currentColor" stroke-width="1.6"/>
                <path d="M12 14v6M9 17h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <path d="M10 8.5l1.5 1.5L14 7.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <h3>Anesthesiology &amp; pain</h3>
            <p>Perioperative monitoring, regional anesthesia and interventional pain management for measured comfort.</p>
            <span class="spec-tag">Comfort &amp; safety</span>
          </article>

          <article class="spec reveal" tabindex="0">
            <span class="spec-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
                <path d="M5 12a7 7 0 0 1 14 0M5 12a7 7 0 0 0 14 0" stroke="currentColor" stroke-width="1.6"/>
                <path d="M12 5v14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <circle cx="12" cy="12" r="1.6" fill="currentColor"/>
              </svg>
            </span>
            <h3>Rehabilitation &amp; recovery</h3>
            <p>Structured post-surgical therapy and remote check-ins that keep your recovery on a confident track.</p>
            <span class="spec-tag">After-care</span>
          </article>
        </div>
      </section>

      <!-- ── Outcomes / stats band ── -->
      <section class="band" id="outcomes">
        <span class="band-glow" aria-hidden="true"></span>
        <div class="band-inner reveal">
          <div class="band-copy">
            <span class="kicker light">Measured by results</span>
            <h2 class="serif light">Outcomes our patients can count on</h2>
            <p>
              Every program publishes its outcomes to an independent registry. These figures reflect a
              fictional dataset for demonstration — but the discipline behind them is the standard we hold.
            </p>
          </div>
          <dl class="band-stats" aria-label="Outcome highlights">
            <div class="band-stat">
              <dt class="stat-num" data-count="98.4" data-suffix="%" data-decimals="1">0</dt>
              <dd>surgical success rate</dd>
            </div>
            <div class="band-stat">
              <dt class="stat-num" data-count="24600" data-suffix="+">0</dt>
              <dd>procedures performed</dd>
            </div>
            <div class="band-stat">
              <dt class="stat-num" data-count="27" data-suffix=" yrs">0</dt>
              <dd>of specialty practice</dd>
            </div>
            <div class="band-stat">
              <dt class="stat-num" data-count="1.9" data-suffix=" days" data-decimals="1">0</dt>
              <dd>average length of stay</dd>
            </div>
          </dl>
        </div>
      </section>

      <!-- ── Accreditation row ── -->
      <section class="section accred" id="accreditation">
        <header class="section-head reveal">
          <span class="kicker">Independently verified</span>
          <h2 class="serif">Accreditation &amp; standards</h2>
          <p class="section-sub">
            Held to national benchmarks for safety, sterility and surgical quality — and audited on a
            regular cycle.
          </p>
        </header>
        <ul class="seals reveal" aria-label="Accreditations">
          <li class="seal">
            <span class="seal-mark" aria-hidden="true">JC</span>
            <div>
              <strong>Joint Surgical Accreditation</strong>
              <span>Gold seal of approval · 2023</span>
            </div>
          </li>
          <li class="seal">
            <span class="seal-mark" aria-hidden="true">ISO</span>
            <div>
              <strong>ISO 9001 Quality Management</strong>
              <span>Certified facility processes</span>
            </div>
          </li>
          <li class="seal">
            <span class="seal-mark" aria-hidden="true">CoE</span>
            <div>
              <strong>Center of Excellence</strong>
              <span>Cardiac &amp; orthopedic programs</span>
            </div>
          </li>
          <li class="seal">
            <span class="seal-mark" aria-hidden="true">AS</span>
            <div>
              <strong>Ambulatory Surgery Accreditation</strong>
              <span>Day-surgery safety standard</span>
            </div>
          </li>
        </ul>
      </section>

      <!-- ── Surgeon spotlight ── -->
      <section class="section" id="surgeon">
        <div class="spotlight reveal">
          <div class="spot-portrait" aria-hidden="true">
            <span class="spot-avatar" data-initials="AV">AV</span>
            <span class="spot-ring r1"></span>
            <span class="spot-ring r2"></span>
            <span class="spot-badge">Chief of Surgery</span>
          </div>
          <div class="spot-copy">
            <span class="kicker">Featured surgeon</span>
            <h2 class="serif">Dr. Adrien Vasquez, MD, FACS</h2>
            <p class="spot-role">Chief of Surgery · Cardiothoracic &amp; structural heart</p>
            <p class="spot-bio">
              With more than two decades in cardiothoracic surgery, Dr. Vasquez leads Meridian's structural
              heart program and chairs the surgical quality board. He is known for an unhurried, plain-spoken
              consultation style — and for treating every plan as a shared decision.
            </p>
            <ul class="spot-stats" aria-label="Surgeon highlights">
              <li><strong>4,200+</strong><span>procedures led</span></li>
              <li><strong>22 yrs</strong><span>cardiothoracic practice</span></li>
              <li><strong>5</strong><span>fellowship trainees mentored</span></li>
            </ul>
            <div class="spot-actions">
              <a class="btn btn-primary" href="#consult" data-link>Request a consultation</a>
              <button class="btn btn-ghost" id="bioBtn" type="button">View full profile</button>
            </div>
          </div>
        </div>
      </section>

      <!-- ── Consult CTA / form ── -->
      <section class="section consult" id="consult">
        <div class="consult-card reveal">
          <div class="consult-copy">
            <span class="kicker">Begin with a conversation</span>
            <h2 class="serif">Request a consultation</h2>
            <p>
              Share a few details and our surgical coordination team will reach out — typically within one
              business day — to confirm timing and gather any records.
            </p>
            <ul class="consult-points">
              <li><span aria-hidden="true">◆</span> Reviewed by the relevant specialty team</li>
              <li><span aria-hidden="true">◆</span> Second opinions welcome</li>
              <li><span aria-hidden="true">◆</span> Referrals coordinated for you</li>
            </ul>
            <p class="consult-meta">
              <span id="quoteEta">Current coordination response: within 1 business day</span>
            </p>
          </div>
          <form class="consult-form" id="consultForm" novalidate>
            <label class="field">
              <span>Full name</span>
              <input type="text" name="name" placeholder="Jordan Ellery" autocomplete="name" required />
            </label>
            <div class="field-row">
              <label class="field">
                <span>Email</span>
                <input type="email" name="email" placeholder="[email protected]" autocomplete="email" required />
              </label>
              <label class="field">
                <span>Phone</span>
                <input type="tel" name="phone" placeholder="(555) 204-7781" autocomplete="tel" />
              </label>
            </div>
            <label class="field">
              <span>Specialty of interest</span>
              <select name="specialty">
                <option>Cardiology &amp; cardiac surgery</option>
                <option>Orthopedics &amp; joint reconstruction</option>
                <option>Neurology &amp; neurosurgery</option>
                <option>General &amp; minimally invasive surgery</option>
                <option>Anesthesiology &amp; pain</option>
                <option>Rehabilitation &amp; recovery</option>
              </select>
            </label>
            <label class="field">
              <span>How can we help?</span>
              <textarea name="notes" rows="3" placeholder="A brief description of your condition or referral."></textarea>
            </label>
            <button class="btn btn-gold btn-block btn-lg" type="submit">Submit consultation request</button>
            <p class="consult-fine">Illustrative form — no data is sent anywhere.</p>
          </form>
        </div>
      </section>
    </main>

    <!-- ── Footer ── -->
    <footer class="footer" id="contact">
      <div class="footer-grid">
        <div class="foot-brand">
          <span class="brand-name big">Meridian<span class="brand-sub">Surgical Institute</span></span>
          <p>A specialist surgery center where complex care is delivered with precision, composure and clarity.</p>
        </div>
        <div class="foot-col">
          <h4>Visit</h4>
          <ul>
            <li>1800 Summit Pavilion, Tower B</li>
            <li>Northgate, WA 98011</li>
            <li><span>Mon – Fri</span> 7:00 AM – 6:00 PM</li>
            <li><span>Surgical desk</span> 24 / 7</li>
          </ul>
        </div>
        <div class="foot-col">
          <h4>Coordination</h4>
          <ul>
            <li><a href="tel:+15552047781">(555) 204-7781</a></li>
            <li><a href="mailto:[email protected]">[email protected]</a></li>
            <li>Physician referral line</li>
          </ul>
        </div>
      </div>
      <div class="footer-bar">
        <span>© 2026 Meridian Surgical Institute — a fictional center for demonstration.</span>
        <a href="#hero" data-link>Back to top ↑</a>
      </div>
    </footer>

    <div class="toast" id="toast" hidden role="status" aria-live="polite"></div>

    <script src="script.js"></script>
  </body>
</html>

Specialist / Surgery Center Landing

An authoritative, premium landing page for Meridian Surgical Institute — a fictional specialist surgery center. The deep-blue gradient hero pairs a modern serif headline with a live consultation desk card: each reservation decrements the open-slot count, and the desk gracefully flips to a waitlist once the week fills. A sticky top nav collapses into an accessible mobile menu and highlights the current section as you scroll.

Below the fold, a six-card specialties grid (cardiology, orthopedics, neurology, general surgery, anesthesiology and rehabilitation) animates on hover with a navy-to-gold accent. An outcomes band counts up success rate, procedures, years of practice and length of stay as it enters the viewport, followed by a row of text-based accreditation seals and a featured-surgeon spotlight for the Chief of Surgery.

The closing call to action is a split consultation request form with inline validation — name and email are checked, friendly toasts confirm submission or flag what is missing, and focus moves to the first invalid field. Everything is vanilla JS with reveal-on-scroll, a reduced-motion fallback, and a small toast helper for action feedback.

Illustrative UI only — not intended for real medical use.