/* Morris Chiropractic PSC — global stylesheet
   All sizes come from the Figma file (1601px frame, 1473px content width). */

:root {
  --navy: #001d47;
  --teal: #59b0ba;
  --blue: #2f5fb3;
  --aqua: #d7ecee;
  --ink: #2c3a4f;
  --muted: #a9b6cc;
  --line: #d6dde8;
  --white: #fff;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --inter: "Inter", var(--sans);
  --open: "Open Sans", var(--sans);

  --wrap: 1601px;
  --gutter: 64px;
  --header-h: 79px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--white); color: var(--navy); font: 400 16px/1.625 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Type ---------- */
.h-display { font: 400 clamp(32px, 4vw, 50px)/1.1445 var(--serif); letter-spacing: -0.02em; color: var(--navy); }
.text-lg { font-size: 18px; line-height: 27px; }

/* ---------- Buttons ---------- */
/* One pill system for every button on the site: same height, type, padding, icon and shadow.
   (.btn--lg / .btn--md stay in the markup as hooks but no longer change the size.) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 32px; border: 1.5px solid transparent; border-radius: 100px; font: 500 16px/24px var(--sans); white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn .icon { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(47, 95, 179, .28); }
.btn--primary:hover { background: #244f9c; }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(0, 29, 71, .22); }
.btn--navy:hover { background: var(--blue); }
.btn--outline { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn--outline:hover { background: var(--teal); color: #fff; }
.btn--ghost { border-color: #fff; color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; height: var(--header-h); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 29, 71, .1); }
.site-header .container { height: 100%; display: flex; align-items: center; padding-left: 62px; }
.brand { display: block; flex: none; }
.brand img { width: 196px; height: 72px; object-fit: contain; }
.nav { margin-left: 90px; }
.nav__menu { display: flex; align-items: center; gap: 8px; }
.nav__menu a { display: block; padding: 2px 11px; border-radius: 4px; font-size: 17px; line-height: 27px; color: var(--navy); transition: color .2s, background-color .2s; }
.nav__menu a:hover { color: var(--teal); }
.nav__menu a.is-active { background: rgba(89, 176, 186, .24); color: var(--teal); font-weight: 600; }
.header-call { margin-left: auto; }
.nav-toggle { display: none; margin-left: 16px; width: 48px; height: 48px; border-radius: 12px; align-items: center; justify-content: center; color: var(--navy); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background-color .25s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Figma layer order: photo + glow -> Common Injuries card -> spine figure (separate cut-out on top of the card).
   Both images share one cover box so the figure stays aligned with its glow. */
.hero { position: relative; overflow: hidden; background: var(--navy) url("../images/hero/hero-base.webp") right bottom / cover no-repeat; color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url("../images/hero/hero-figure.webp") center bottom / cover no-repeat; background-position: inherit; pointer-events: none; }
.hero .container { position: relative; min-height: 737px; padding-left: 62px; }
/* Wider than the 1601px design: keep the art at design size, centred with the container,
   and continue its edge colours (navy on the left, the photo's blue gradient on the right) */
@media (min-width: 1602px) {
  .hero { background: url("../images/hero/hero-base.webp") center bottom / auto 100% no-repeat, linear-gradient(90deg, #001e48 50%, transparent 50%), linear-gradient(#04214c, #17355f 33%, #2f4f79 66%, #23416b); }
  .hero::after { background-size: auto 100%; background-position: center bottom; }
}
.hero__content { position: relative; z-index: 4; max-width: 624px; padding: 58px 0 0; }
.hero__title { font: 400 clamp(40px, 5.2vw, 67px)/1.1445 var(--serif); letter-spacing: -0.02em; max-width: 534px; margin-left: 2px; }
.hero__title em { font-style: normal; color: var(--teal); }
.hero__lead { margin-top: 20px; font-size: 18px; line-height: 27px; }
.hero .btn-row { margin-top: 33px; }
.owner-card { margin-top: 33px; display: inline-flex; align-items: center; gap: 28px; width: 387px; max-width: 100%; position: relative; padding: 28px 32px; border-radius: 20px; background: rgba(0, 29, 71, .878);
  box-shadow: 2px 3px 8px rgba(74, 103, 145, .1), 9px 11px 14px rgba(74, 103, 145, .09), 20px 24px 19px rgba(74, 103, 145, .05), 35px 42px 22px rgba(74, 103, 145, .01); }
/* 1px gradient stroke (white -> transparent), drawn as a ring so it never tints the translucent fill */
.owner-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #fff, rgba(153, 153, 153, 0)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.owner-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.owner-card__title { font: 700 20px/27px var(--serif); letter-spacing: -0.01em; color: var(--teal); }
.owner-card__name { margin-top: 4px; font-size: 14px; line-height: 21px; font-weight: 600; }
.hero-stats { display: flex; align-items: stretch; margin-top: 33px; margin-left: 2px; }
.hero-stats li { display: flex; flex-direction: column; align-items: center; gap: 15px; font-size: 14px; line-height: 21px; font-weight: 600; text-align: center; white-space: nowrap; }
.hero-stats li + li { border-left: 1px solid rgba(255, 255, 255, .24); }
.hero-stats li:first-child { padding-right: 40px; }
.hero-stats li:nth-child(2) { padding: 0 42px 0 45px; }
.hero-stats li:last-child { padding-left: 43px; }
.hero-stats__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: var(--navy); display: grid; place-items: center; }
.hero-stats__icon .icon { width: 26px; height: 26px; stroke-width: 2; }
.injuries-card { position: absolute; z-index: 2; top: 70px; right: var(--gutter); width: 252px; padding: 22px 18px 32px; border-radius: 23px; background: rgba(4, 37, 68, .456); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.injuries-card__title { font: italic 700 15px/18px var(--inter); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.injuries-card ul { display: grid; gap: 10px; padding-top: 18px; }
.injuries-card li { display: flex; align-items: center; gap: 10px; font: 600 16px/19px var(--inter); }
.check-ring { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: grid; place-items: center; flex: none; }
.check-ring .icon { width: 13px; height: 13px; stroke-width: 2; }

/* ---------- Welcome ---------- */
.welcome { position: relative; overflow-x: clip; padding: 54px 0 69px; }
/* soft spill of the hero's teal glow below the banner (Figma "Ellipse 5") */
.welcome::before { content: ""; position: absolute; top: 0; left: 50%; width: 520px; height: 110px; transform: translateX(-30%); background: radial-gradient(50% 100% at 50% 0, rgba(89, 176, 186, .13), rgba(89, 176, 186, 0)); pointer-events: none; }
.welcome__body p { max-width: 643px; }
.welcome .container { display: grid; grid-template-columns: 759fr 664fr; gap: 50px; align-items: center; }
.welcome__media img { width: 100%; aspect-ratio: 759 / 493; object-fit: cover; border-radius: 21px; }
.welcome__body p { margin-top: 25px; }
.welcome__body .btn { margin-top: 40px; }
/* Below the 1601px design width the text column gets narrower than Figma's 643px:
   share the row equally and ease the size down so the paragraph keeps its 6 lines */
@media (min-width: 1101px) and (max-width: 1600px) {
  .welcome .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .welcome__body p { font-size: clamp(16px, 1.17vw, 18px); line-height: 1.5; }
}

/* ---------- Drug-free healing ---------- */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px; border-radius: 24px; background: var(--aqua); }
.approach__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 21px; font-weight: 600; text-transform: uppercase; color: var(--teal); }
.eyebrow__badge { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.eyebrow__badge .icon { width: 20px; height: 20px; stroke-width: 2; }
.approach h2 { margin-top: 16px; font: 400 clamp(32px, 3.8vw, 48px)/1.3333 var(--serif); letter-spacing: -0.02em; }
.approach__text { max-width: 607px; font-size: 18px; line-height: 28px; }
/* Figma: three items on one row; when the column is narrow the labels wrap inside their item instead */
.icon-list { display: grid; grid-template-columns: repeat(3, minmax(0, 204px)); gap: 16px; width: 100%; padding-top: 8px; }
.icon-list li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; line-height: 21px; font-weight: 600; }
.icon-list__ring { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--teal); color: var(--teal); display: grid; place-items: center; flex: none; }
.icon-list__ring .icon { width: 20px; height: 20px; stroke-width: 2; }
.approach__media img { width: 100%; aspect-ratio: 666 / 424; object-fit: cover; border-radius: 16px; }

/* ---------- Get checked by us ---------- */
.checked { padding: 88px 0 108px; }
.checked > .container > h2 { text-align: center; }
.checked__grid { display: grid; grid-template-columns: 720fr 723fr; gap: 32px; margin-top: 70px; }
.care-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; min-height: 595px; box-shadow: 0 24px 64px -8px rgba(0, 29, 71, .25), 0 8px 24px rgba(0, 29, 71, .13); }
.care-card--alt { border: 1.5px solid rgba(89, 176, 186, .2); box-shadow: 0 24px 64px -8px rgba(0, 29, 71, .19), 0 8px 24px rgba(0, 29, 71, .08); }
.care-card__img { width: 100%; height: 260px; object-fit: cover; }
.care-card__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 44px 48px; }
.care-card__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.care-card__eyebrow::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--teal); }
.care-card h3 { font: 500 clamp(28px, 2.6vw, 36px)/1.18 var(--serif); letter-spacing: -0.015em; padding-right: 76px; }
.care-card__text { max-width: 494px; font-size: 16px; line-height: 26px; }
.care-card--alt .care-card__text { max-width: none; color: rgba(0, 29, 71, .702); }
.care-card__cta { margin-top: auto; }
.care-card--alt .care-card__cta { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.icon-badge { position: absolute; top: 40px; right: 44px; width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(89, 176, 186, .38); }
.icon-badge .icon { width: 30px; height: 30px; stroke-width: 2; }
.logo-badge { position: absolute; right: 51px; bottom: 45px; width: 124px; height: 124px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: -2px 1px 5px rgba(0, 29, 71, .1), -7px 6px 9px rgba(0, 29, 71, .09), -17px 13px 13px rgba(0, 29, 71, .05), -29px 24px 15px rgba(0, 29, 71, .01); }
.logo-badge img { width: 89px; height: 103px; object-fit: contain; }
.trust-row { display: flex; flex-wrap: wrap; gap: 16px; }
.trust-row li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; background: var(--aqua); font-size: 12px; line-height: 18px; font-weight: 600; }
.trust-row .icon { width: 14px; height: 14px; color: var(--teal); stroke-width: 2; }

/* ---------- Services ---------- */
.services { background: var(--navy); color: #fff; padding: 57px 0 100px; }
.services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-bottom: 39px; border-bottom: 1px solid rgba(255, 255, 255, .33); }
.services__head .h-display { color: #fff; }
.services__head p { margin-bottom: 8px; color: var(--teal); font-size: 18px; line-height: 27px; }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 63px; }
.service-card { display: flex; flex-direction: column; background: #fff; color: var(--navy); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px -8px rgba(0, 29, 71, .19), 0 8px 24px rgba(0, 29, 71, .08); }
.service-card img { width: 100%; aspect-ratio: 352 / 319; object-fit: cover; transition: transform .5s; }
.service-card__img { overflow: hidden; }
.service-card:hover img { transform: scale(1.04); }
/* Title and line each stay on one line: below the Figma card width the type scales with the card (cqi = text width) */
.service-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 21px; padding: 28px 22px 42px; container-type: inline-size; }
.service-card h3 { font: 700 min(26px, 100cqi / 11.6)/1.18 var(--serif); letter-spacing: -0.015em; white-space: nowrap; }
.service-card p { font-size: min(16px, 100cqi / 18.3); line-height: 26px; color: rgba(0, 29, 71, .702); white-space: nowrap; }
.service-card .btn { margin-top: auto; }

/* ---------- Conditions ---------- */
.conditions { padding: 113px 0 106px; }
/* both columns share one height: the list rows split the panel height, so the cards line up top and bottom */
.conditions .container { display: grid; grid-template-columns: 738fr 692fr; gap: 46px; align-items: stretch; }
.conditions__panel { display: flex; flex-direction: column; justify-content: space-between; gap: 23px; padding: 32px; border-radius: 32px; background: var(--aqua); box-shadow: 0 24px 64px -12px rgba(0, 29, 71, .2); }
.conditions__panel p { margin-top: 23px; max-width: 674px; font-size: 16px; line-height: 26px; }
.conditions__panel > img { width: 100%; aspect-ratio: 672 / 371; object-fit: cover; border-radius: 32px; }
.conditions__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.stats { display: flex; gap: 16px; margin: 0; }
.stats div { width: 170px; display: flex; flex-direction: column; gap: 4px; }
.stats dt { font-size: 12px; line-height: 18px; font-weight: 600; text-transform: uppercase; color: var(--teal); }
.stats dd { margin: 0; font: 700 28px/37px var(--serif); }

.conditions__list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: clamp(16px, 1.7vw, 27px) 16px; }
.condition { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 16px; border-radius: 20px; background: #fff; border: 1.5px solid rgba(89, 176, 186, .2); box-shadow: 0 12px 24px -10px rgba(0, 29, 71, .08); font: 700 18px/1.2 var(--serif); transition: background-color .2s; }
.condition__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--aqua); color: var(--teal); display: grid; place-items: center; flex: none; transition: background-color .2s; }
.condition__icon .icon { width: 24px; height: 24px; stroke-width: 1.7; }
.condition.is-active, .condition:hover { background: rgba(0, 29, 71, .08); }
.condition.is-active .condition__icon, .condition:hover .condition__icon { background: #011d47; }

/* ---------- Why choose us + testimonials ---------- */
.why { position: relative; padding-top: 88px; }
.why::before { content: ""; position: absolute; inset: 0 0 219px; background: rgba(1, 29, 71, .06); z-index: -1; }
.why__grid { display: grid; grid-template-columns: 810fr 559fr; gap: 82px; padding-left: 22px; }
.why__intro { padding: 14px 0 20px; }
.why__intro p { margin-top: 23px; max-width: 540px; font-size: 16px; line-height: 26px; }
.why__intro .btn-row { margin-top: 36px; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 57px; }
.proof li { border-top: 3px solid var(--teal); padding-top: 24px; }
.proof .icon { width: 28px; height: 28px; color: var(--teal); stroke-width: 2; }
.proof h3 { margin-top: 12px; font-size: 18px; line-height: 26px; font-weight: 600; }
.proof p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font: 400 14px/22px var(--open); color: var(--ink); }
.facts strong { font: 700 17px/22px var(--serif); color: var(--navy); }
.facts strong span { color: var(--teal); }
.why__media { position: relative; }
/* photo always spans the full height of the text column (top of heading -14px .. bottom of facts) */
.why__media > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center top; border-radius: 23px; }
.directions-card { position: absolute; right: 14px; bottom: 31px; width: 220px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); font-family: var(--inter); }
.directions-card__head, .directions-card__addr { display: flex; align-items: center; gap: 10px; background: var(--navy); }
.directions-card__head { padding: 14px 16px; border-bottom: 1px solid #2c2c2e; }
.directions-card__pin { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; flex: none; }
.directions-card__pin svg { width: 16px; height: 16px; }
.directions-card__label { display: block; font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: #9ca3af; }
.directions-card__city { display: block; margin-top: 2px; font-size: 14px; line-height: 17px; font-weight: 700; color: #fff; }
.directions-card__addr { padding: 12px 16px; border-bottom: 1px solid #2c2c2e; font-size: 12px; line-height: 15px; color: #d1d5db; }
.directions-card__addr .icon { width: 14px; height: 14px; color: #fff; stroke-width: 2; }
.directions-card__cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; background: var(--teal); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .3px; color: var(--navy); transition: background-color .2s; }
.directions-card__cta:hover { background: #7cc6ce; }
.directions-card__cta svg { width: 15px; height: 15px; }

.reviews { position: relative; display: grid; grid-template-columns: 428px 1fr; gap: 120px; margin-top: 79px; padding: 70px 44px 47px; border-radius: 31px; background: var(--navy); color: #fff; }
.reviews__title { font: 500 clamp(36px, 4vw, 50px)/1.02 var(--serif); letter-spacing: -0.02em; }
.rating { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 15.56px; line-height: 23px; color: rgba(255, 255, 255, .72); }
.rating img { width: 93px; height: 18px; }
.slider-nav { display: flex; align-items: center; gap: 27px; margin-top: 30px; }
.slider-nav button { width: 53px; height: 53px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; transition: background-color .2s; }
.slider-nav button:hover { background: rgba(255, 255, 255, .24); }
.slider-nav .icon { width: 22px; height: 22px; stroke-width: 2.22; }
.dots { display: flex; align-items: center; gap: 9px; }
.dots span { width: 9px; height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .3); transition: width .3s, background-color .3s; }
.dots span.is-active { width: 27px; background: #fff; }
.reviews__more { margin-top: 43px; }
.reviews__note { margin-top: 30px; font-size: 13.33px; line-height: 20px; color: rgba(255, 255, 255, .56); }
.reviews .logo-badge { right: auto; bottom: auto; left: 392px; top: 199px; }
/* two equal columns inside the reviews box (never wider than it); cards keep the Figma tilt and offsets */
.quotes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; min-height: 435px; margin-top: -31px; }
.quote { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 41.8px; border-radius: 32.5px; background: #fff; color: var(--navy); box-shadow: 0 27.9px 55.8px rgba(0, 0, 0, .25); transition: transform .5s, z-index 0s .25s; }
.quote::before { content: "\201C"; position: absolute; left: 29px; top: 30px; font: 600 139.4px/1.35 var(--serif); color: rgba(89, 176, 186, .2); pointer-events: none; }
.quote.is-front { margin-top: 11px; transform: rotate(-2deg); min-height: 417px; z-index: 2; }
.quote.is-back { margin: 8px 0 0 2px; transform: rotate(2deg); min-height: 383px; background: #ddfcff; z-index: 1; }
.quote__stars { position: relative; display: flex; gap: 4.6px; color: #f2b84b; }
.quote__stars .icon { width: 17px; height: 17px; stroke-width: 2.32; }
.quote blockquote { position: relative; margin: 27.9px 0 0; font: italic 400 22.55px/30.2px var(--serif); }
.quote__foot { margin-top: 21px; padding-top: 18.6px; border-top: 1.16px solid rgba(42, 26, 56, .08); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote__author { display: flex; align-items: center; gap: 13.9px; }
.quote__author img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.quote__name { display: block; font-size: 18.59px; line-height: 28px; font-weight: 600; color: #2a1a38; }
.quote__meta { display: block; font-size: 16.26px; line-height: 24px; color: #5b5563; }
.verified { display: flex; align-items: center; gap: 4.6px; font-size: 12.78px; line-height: 21px; font-weight: 500; color: #5b5563; }
.verified .icon { width: 17px; height: 17px; color: #8ccbd5; stroke-width: 2.32; }

/* ---------- Questions ---------- */
.questions { padding: 50px 0 46px; text-align: center; }
.questions__sub { margin-top: 17px; font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.questions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1200px; margin: 44px auto 0; text-align: left; }
.link-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 378px; padding: 48px; background: #fff; }
.link-panel + .link-panel { border-left: 1px solid var(--line); }
.link-panel__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(89, 176, 186, .2); color: var(--blue); display: grid; place-items: center; }
.link-panel__icon .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.link-panel h3 { margin-top: 32px; font-size: 22px; line-height: 30px; font-weight: 600; }
.link-panel p { margin-top: 16px; font: 400 15px/24px var(--open); color: var(--ink); }
.link-panel__action { display: flex; align-items: center; justify-content: space-between; font: 700 13px/20px var(--open); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.link-panel__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy); color: var(--navy); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.link-panel__arrow .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.link-panel:hover .link-panel__arrow { background: var(--navy); color: #fff; }

/* ---------- CTA banner ---------- */
/* Figma layers, bottom to top: sky photo, teal swoosh, runner cut-out — all share one cover box so they stay aligned */
.cta-banner { background: #a9c7d6 center / cover no-repeat; background-image: url("../images/backgrounds/cta-runner.webp"), url("../images/backgrounds/cta-swoosh.svg"), url("../images/backgrounds/cta-bg.webp"); }
.cta-banner .container { min-height: 366px; display: flex; align-items: center; justify-content: flex-end; padding-right: 219px; }
.cta-card { position: relative; width: 536px; max-width: 100%; padding: 40px 27px 40px 41px; border-radius: 34px; background: #fff; }
.cta-card p { margin-top: 24px; font-size: 18px; line-height: 27px; }
.cta-card .btn { margin-top: 33px; }
.chat-bubble { position: absolute; left: 463px; top: 187px; width: 104px; height: 104px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background-color .2s, transform .2s; }
.chat-bubble:hover { background: var(--navy); transform: scale(1.04); }
.chat-bubble .icon { width: 45px; height: 45px; stroke-width: 2.79; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--muted); font-size: 15px; line-height: 24px; }
/* Figma columns: brand 360 (+58 gap), Explore 144 (+17), Visit us 195 (+17), Office hours, map 353 at the right edge */
.footer__main { display: grid; grid-template-columns: 418px 161px 212px 1fr 353px; padding-top: 42px; padding-bottom: 61px; }
.footer__brand img { width: 266px; height: 98px; object-fit: contain; object-position: left center; }
.footer__logo { display: inline-block; }
.footer__brand p { margin-top: 24px; max-width: 328px; }
/* Figma: square outline, Open Sans Bold 13/20 uppercase +8% tracking, 227x48, radius 4 (8px top padding in its frame) */
.footer__book { display: inline-flex; align-items: center; justify-content: center; width: 227px; max-width: 100%; min-height: 48px; margin-top: 32px; padding: 0 12px; border: 1px solid #fff; white-space: nowrap; border-radius: 4px; font: 700 13px/20px var(--open); letter-spacing: .08em; text-transform: uppercase; color: #fff; transition: background-color .2s, color .2s; }
.footer__book:hover { background: #fff; color: var(--navy); }
.footer__col h2 { font: 600 22px/30px var(--open); color: #fff; }
.footer__col ul { margin-top: 24px; display: grid; gap: 8px; }
.footer__col address { margin-top: 24px; font-style: normal; white-space: nowrap; }
.footer__col a:hover { color: #fff; }
.footer__contact { margin-top: 24px; display: grid; gap: 8px; }
.footer__col .footer__dir { display: inline-block; margin-top: 24px; }
.hours { margin-top: 24px; display: grid; gap: 8px; width: 265px; }
.hours div { display: flex; justify-content: space-between; }
.hours dd { margin: 0; }
.footer__map { justify-self: end; align-self: start; width: 353px; margin-top: -3px; padding: 9px; border-radius: 24px; background: rgba(217, 217, 217, .09); }
.footer__map img { width: 100%; aspect-ratio: 335 / 327; object-fit: cover; border-radius: 24px; }
.footer__bar { background: var(--blue); color: var(--navy); }
.footer__bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
.footer__bar ul { display: flex; gap: 32px; }
.footer__bar a:hover { color: #fff; }

/* =========================================================
   Inner pages (shared templates)
   ========================================================= */
/* Page hero: same type, buttons and stats as the home hero; the art is one photo set per page via --hero-img */
.hero--page, .hero--page::after { background: var(--navy) var(--hero-img) right bottom / cover no-repeat; }
.hero--page::after { content: none; }
.hero--page .container { display: flex; align-items: center; }
.hero--page .hero__content { padding: 40px 0; }
.hero--page .btn-row { margin-top: 50px; }
.hero--page .hero-stats { margin-top: 92px; }
.hero--about { --hero-img: url("../images/about/about-hero.webp"); }
/* inner-page banners a little shorter than the Figma 737px (user request); photo pinned to the top so heads are never cut */
.hero--page { background-position: right top; }
/* wider than the design: keep the whole photo (fit to banner height, pinned right); its navy left edge fills the rest */
@media (min-width: 1602px) { .hero--page { background-size: auto 100%; background-position: right top; } }
.hero--page .container { min-height: 690px; }
.hero--about .hero-stats { margin-top: 76px; }
.hero--services { --hero-img: url("../images/services/services-hero.webp"); }
/* Services page: shared Conditions section sits right under the hero (Figma 72px) */
[data-page="services"] .conditions { padding: 72px 0 100px; }

/* About: bio uses the home Welcome split, team uses the home Approach card */
.welcome--bio { padding: 75px 0 100px; }
.welcome--bio .welcome__body p { margin-top: 15px; }
/* About bio: larger photo than the Figma 759x493 (user request) */
@media (min-width: 901px) { .welcome--bio:not(.welcome--split) .container:first-child { grid-template-columns: 800fr 623fr; } }
.welcome--bio:not(.welcome--split) .welcome__media img { aspect-ratio: 800 / 540; }
/* About quote always on 3 lines: type eases down with the box width (cqi = text width; 585px fits 3 lines at 18px) */
@media (min-width: 1280px) {
  .welcome--bio:not(.welcome--split) .bio-quote { container-type: inline-size; padding-left: 24px; padding-right: 22px; }
  .welcome--bio:not(.welcome--split) .bio-quote blockquote { font-size: min(18px, 100cqi / 32.6); line-height: 1.5; }
}
.bio-quote { max-width: 643px; margin: 40px 0 0; padding: 29px 29px 28px; border-radius: 10px; background: var(--blue); color: #fff; }
.bio-quote blockquote { margin: 0; font: italic 400 18px/27px var(--sans); }
.bio-quote figcaption { margin-top: 10px; font-size: 20px; line-height: 27px; font-weight: 500; }
.welcome--bio .container + .container { display: block; }
.bio-quote blockquote { max-width: 586px; }
.bio-note { margin-top: 50px; padding: 18px 32px; border-radius: 10px; background: var(--teal); color: #fff; font-size: 16px; line-height: 26px; }
.team { padding-bottom: 100px; }
.approach--team { padding: 59px 46px 59px 47px; }
.approach--team .approach__text { max-width: 649px; }
.approach--team .approach__text p + p { margin-top: 28px; }
.approach--team .btn { margin-top: 31px; }
/* Team card (user request): title on 1 line, first sentence on 1 line, second paragraph on 2 lines.
   Type scales with the text column (cqi); measured: title 13.31em, first sentence 35.74em wide. */
@media (min-width: 1280px) {
  .approach--team .approach__content { container-type: inline-size; }
  .approach--team h2 { font-size: min(48px, 100cqi / 13.5); white-space: nowrap; }
  .approach--team .approach__text { max-width: none; font-size: min(18px, 100cqi / 36.3); line-height: 1.556; }
  .approach--team .approach__text p:first-child { white-space: nowrap; }
}
.hero--adjustments { --hero-img: url("../images/adjustments/adjustments-hero.webp"); }

/* Split variant of the Welcome/Bio layout (Chiropractic Adjustments): 759 photo, 72px gap, 643 text column */
.welcome--split .container:first-child { grid-template-columns: 759fr 643fr; gap: 72px; }
.welcome--split .welcome__body h2 { margin-top: 10px; }
.welcome--split .welcome__body > p.text-lg { margin-top: 25px; }
.welcome--split .bio-quote { margin-top: 27px; padding: 25px 24px 25px 29px; }
.welcome--split .bio-quote blockquote { max-width: 590px; }
/* Adjustments quote on 5 lines (user request): type eases down with the box (text is 162em long, ~34.5em per line) */
@media (min-width: 1280px) {
  .welcome--split .bio-quote { container-type: inline-size; }
  .welcome--split .bio-quote blockquote { max-width: none; font-size: min(18px, 100cqi / 34.5); line-height: 1.5; }
}
.welcome--bio.welcome--split { padding-bottom: 75px; }
.eyebrow--center { justify-content: center; }
/* the eyebrow is a <p>; keep the Welcome/Bio paragraph margins off it */
.welcome .welcome__body p.eyebrow { margin-top: 0; }

/* Approach card variant: taller photo, tight eyebrow-to-title gap */
.approach--care h2 { margin-top: 1px; }
.approach--care .approach__media img { aspect-ratio: 666 / 491; }

/* How it works */
.steps { padding: 82px 0; background: var(--navy); color: #fff; text-align: center; }
.steps .h-display { margin-top: 15px; color: #fff; }
.steps__lead { max-width: 1010px; margin: 25px auto 0; font-size: 18px; line-height: 27px; }
.steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; max-width: 1444px; margin: 50px auto 0; padding: 0; list-style: none; }
.step-card { display: flex; flex-direction: column; align-items: center; padding: 32px; border-radius: 16px; background: #fff; color: var(--navy); }
.step-card__icon { margin-bottom: 24px; width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.step-card__icon .icon { width: 32px; height: 32px; stroke-width: 2; }
.step-card h3 { font: 500 20px/27px var(--serif); }
.step-card p { margin-top: 12px; font-size: 15px; line-height: 22.5px; }

/* Who can benefit: Welcome split + blue list */
.welcome--benefit { padding: 100px 0; }
.welcome--benefit .welcome__media img { aspect-ratio: 759 / 684; }
.benefit-list { max-width: 628px; margin-top: 40px; padding: 28px 27px 27px; border-radius: 10px; background: var(--blue); color: #fff; list-style: none; }
.benefit-list li { display: grid; grid-template-columns: 28px 1fr; gap: 24px; padding: 14px 12px 13px; font-size: 18px; line-height: 27px; }
.benefit-list li:first-child { padding-top: 0; }
.benefit-list li:last-child { padding-bottom: 0; }
.benefit-list li + li { border-top: 1px solid rgba(255, 255, 255, .5); }
.benefit-list .icon { width: 28px; height: 28px; stroke-width: 1.98; }
.benefit-list strong { display: block; font-weight: 400; }
/* each item = 2 lines (title + one-line description; user request). cqi = item width, minus the 28px icon + 24px gap; description is 27.6em long */
@media (min-width: 1280px) {
  .benefit-list li { container-type: inline-size; }
  .benefit-list li > span { font-size: min(18px, (100cqi - 52px) / 28); line-height: 1.5; white-space: nowrap; }
}

/* FAQ accordion (native <details>; js keeps one open) */
.faq { padding-bottom: 100px; text-align: center; }
.faq__title { margin-top: 10px; font: 400 clamp(32px, 4vw, 50px)/1.32 var(--serif); letter-spacing: -2px; color: var(--navy); }
.faq__list { display: grid; gap: 35px; max-width: 1223px; margin: 50px auto 0; text-align: left; }
.faq__item { padding: 23px; border: 1px solid var(--teal); border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .02); transition: background-color .2s; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font: 400 26px/1.25 var(--serif); color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.faq__toggle .icon { width: 14px; height: 14px; stroke-width: 2; }
.faq__minus, .faq__item[open] .faq__plus { display: none; }
.faq__item[open] .faq__minus { display: block; }
.faq__item[open] { background: var(--teal); }
.faq__item[open] summary { color: #fff; }
.faq__item[open] .faq__toggle { background: #fff; color: var(--teal); }
.faq__body { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e2e8f0; font-size: 17px; line-height: 1.6; color: #fff; }

/* Why choose us without the reviews box */
.why--solo { padding: 88px 0 87px; }
.why--solo::before { inset: 0; }
.why--solo + .questions { padding-top: 100px; }
.hero--testimonials { --hero-img: url("../images/testimonials/testimonials-hero.webp"); }

/* Testimonials: Welcome split with a button instead of the quote box */
.welcome--testi { padding: 72px 0 100px; }
.welcome--testi .welcome__body .btn { margin-top: 27px; }
.text-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--blue); }
.checked--page { padding: 0 0 100px; }

/* Reviews wall: home quote cards, untilted, 3 per row */
.review-wall__box { padding: 70px 79px 99px; border-radius: 31px; background: var(--navy); color: #fff; text-align: center; }
.rating--center { justify-content: center; margin-top: 27px; }
.review-wall__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 418px)); justify-content: center; gap: 30px; margin-top: 63px; text-align: left; }
.quote.quote--grid { position: relative; min-height: 417px; transform: none; }
.quote--grid::before { top: 19px; left: 28px; }
.quote--grid .quote__stars .icon { width: 16px; height: 16px; }
.quote--grid .quote__author img { width: 56px; height: 56px; }
.quote--grid .quote__foot { margin-top: auto; }
.quote--grid blockquote { margin-bottom: 3px; }
.review-wall__more { margin-top: 75px; }

/* Contact (shared partial) */
.contact { padding: 100px 0; }
.page-contact .contact { padding-top: 50px; }
.contact__grid { display: grid; grid-template-columns: 726fr 561fr; gap: 172px; padding-left: 71px; padding-right: 71px; align-items: start; }
.contact__title { font: 400 clamp(36px, 4vw, 50px)/1.04 var(--serif); color: var(--navy); }
.contact__lead { margin-top: 11px; font-size: 17px; line-height: 26px; }
.contact__list { margin-top: 30px; list-style: none; }
.contact__list li { display: grid; grid-template-columns: 44px 1fr; gap: 17px; padding: 15px 0; font-size: 17px; line-height: 28px; color: #6d6d6d; }
.contact__list li:first-child { padding-top: 0; }
.contact__list li + li { border-top: 1px solid rgba(0, 0, 0, .4); }
.contact__list strong { display: block; margin-bottom: 2px; font: 400 22px/1.25 var(--serif); color: var(--navy); }
.contact__list a:hover { color: var(--blue); }
.contact__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.contact__icon .icon { width: 22px; height: 22px; stroke-width: 2; }
.contact__map { display: block; margin-top: 21px; max-width: 720px; }
.contact__map img { width: 100%; aspect-ratio: 720 / 132; object-fit: cover; border-radius: 10px; }
.contact-form { display: grid; gap: 30px; padding: 64px 40px 31px; border: 1px solid var(--blue); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); font-family: var(--inter); }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--navy); }
.field__label b { color: #ef4444; font-weight: 600; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font: 400 14px/17px var(--inter); color: var(--navy); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(0, 29, 71, .55); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); }
.contact-form__submit { width: 100%; }
.contact-form__submit:disabled { opacity: .7; cursor: wait; transform: none; }
.form-alert { padding: 14px 16px; border: 1px solid #fca5a5; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 14px; line-height: 20px; }
.form-alert a { color: inherit; text-decoration: underline; }
/* honeypot: off-screen for people, still filled in by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { position: relative; }
.contact-form__note { margin-top: 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--navy); }
.hero--insurance { --hero-img: url("../images/insurance/insurance-hero.webp"); }
.hero--new-patients { --hero-img: url("../images/new-patients/new-patients-hero.webp"); }
.hero--blog { --hero-img: url("../images/blog/blog-hero.webp"); }
.btn--outline-navy { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline-navy:hover { background: var(--navy); color: #fff; }
.btn-row--center { justify-content: center; }

/* Insurance */
.plans { padding: 86px 0 80px; text-align: center; }
.plans .h-display { max-width: 900px; margin: 0 auto; }
.plans__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; max-width: 1264px; margin: 53px auto 0; padding: 0; list-style: none; }
.plans__logos img { height: auto; }
.plans__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 35px; margin-top: 46px; padding: 0; list-style: none; }
.plans__checks li { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 27px; }
.plans__checks img { width: 40px; height: 40px; }
.plans .btn-row { gap: 20px; margin-top: 57px; }

/* New patients: first visit (Welcome split) */
.welcome--visit { padding: 72px 0 100px; }
.welcome--visit .welcome__media img { aspect-ratio: 759 / 773; }
.welcome--visit .welcome__body h2 { margin-top: 10px; letter-spacing: -0.05em; }
.welcome--visit .welcome__body .text-lg { margin-top: 15px; }
.welcome--visit .welcome__body .text-lg + .text-lg { margin-top: 27px; }
.welcome--visit .bio-quote { margin-top: 30px; padding: 23px 16px 23px 27px; }
.welcome--visit .bio-quote blockquote { max-width: none; }
/* What to bring panel */
.bring { padding-bottom: 100px; }
.bring__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 47px; padding: 65px 47px 64px; border-radius: 24px; background: var(--aqua); }
.bring__text { margin-top: 20px; max-width: 649px; font-size: 18px; line-height: 28px; }
.bring__list { margin: 28px 0 0; padding-left: 22px; list-style: disc; font-size: 18px; line-height: 28px; }
/* No Insurance? text on 3 lines (user request): type eases with the box (text is 79em long, ~28em per line) */
@media (min-width: 1280px) {
  .no-insurance { container-type: inline-size; }
  .bring .no-insurance p { max-width: none; font-size: min(18px, 100cqi / 28); line-height: 1.556; }
}
.bring__panel h2 { margin-top: 30px; font: 400 clamp(32px, 3.8vw, 48px)/1.3333 var(--serif); letter-spacing: -0.02em; }
.bring__panel h2 + p { margin-top: 16px; }
.bring__panel p + p { margin-top: 28px; }
.bring__media img { width: 100%; aspect-ratio: 666 / 364; object-fit: cover; border-radius: 16px; }
.no-insurance { position: relative; margin-top: 30px; padding: 31px 120px 31px 31px; border-radius: 16px; background: var(--teal); color: #fff; }
.no-insurance h3 { font: 400 clamp(32px, 3.8vw, 48px)/1.3333 var(--serif); letter-spacing: -0.02em; }
.no-insurance p { margin-top: 13px; max-width: 506px; font-size: 18px; line-height: 28px; }
.no-insurance a { color: inherit; }
.no-insurance img { position: absolute; top: 57px; right: 13px; width: 108px; height: 110px; }
/* Paperwork: the How-it-works band with 5 cards */
.steps--paperwork { padding: 80px 0; }
.steps--paperwork .steps__lead { margin-top: 15px; }
.steps--paperwork .steps__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; }
.steps--paperwork .step-card { padding: 32px 14px; }
.steps--paperwork .step-card h3 { white-space: pre-line; letter-spacing: -0.03em; }
.steps__note { max-width: 1224px; margin: 40px auto 0; font-size: 18px; line-height: 27px; }
.steps__note a, .steps__lead a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.steps--paperwork .btn-row { gap: 25px; margin-top: 42px; }

/* Blog list */
.blog-list { padding: 72px 0 99px; }
.blog-list__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 22px; }
.post-card { display: grid; grid-template-columns: minmax(0, 1fr) 271px; gap: 0; min-height: 351px; padding: 27px 27px 27px 24px; border: 1px solid var(--teal); border-radius: 20px; background: #fff; transition: box-shadow .2s, transform .2s; }
/* every card starts white; the aqua fill only appears on hover / keyboard focus (user request) */
.post-card:hover, .post-card:focus-visible { background: var(--aqua); box-shadow: 0 16px 40px -12px rgba(0, 29, 71, .18); transform: translateY(-2px); }

.post-card__body { display: flex; flex-direction: column; align-items: flex-start; padding-top: 17px; container-type: inline-size; }
.post-card__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.post-card__icon .icon { width: 23px; height: 23px; stroke-width: 2; }
/* per-card letter-spacing comes from Figma (inline) so every title sits on 2 lines */
/* titles always on 2 lines: longest is 24.6em, so scale with the text column (cqi) */
.post-card h2 { max-width: 406px; margin-top: 20px; font: 400 min(30px, 100cqi / 13.2)/1.3 var(--serif); letter-spacing: 0; color: var(--navy); }
.post-card p { margin-top: 11px; max-width: 350px; font-size: 16px; line-height: 24px; }
.post-card__more { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--navy); }
.post-card__more .icon { width: 14px; height: 14px; color: var(--blue); stroke-width: 2; }
.post-card img { width: 271px; height: 296px; object-fit: cover; border-radius: 10px; }
.blog-list__more { display: flex; justify-content: center; margin-top: 100px; }
/* ---------- Single blog post (template: partials/post-layout.html) ---------- */
.post-hero { padding: 56px 0 64px; background: var(--navy); color: #fff; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .65); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: rgba(255, 255, 255, .9); }
.post-hero .eyebrow { margin-top: 28px; }
.post-hero__title { max-width: 920px; margin-top: 16px; font: 400 clamp(34px, 4vw, 54px)/1.15 var(--serif); letter-spacing: -0.02em; }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .8); }
.post-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.post-hero__meta .icon { width: 18px; height: 18px; color: var(--teal); stroke-width: 2; }
.post { padding: 72px 0 100px; }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.post__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; margin-bottom: 40px; }
.prose { max-width: 820px; font-size: 18px; line-height: 30px; color: var(--navy); }
.prose > * + * { margin-top: 20px; }
.prose__lead { font-size: 21px; line-height: 33px; }
.prose h2 { margin-top: 44px; font: 400 34px/1.25 var(--serif); letter-spacing: -0.01em; }
.prose h3 { margin-top: 32px; font: 400 26px/1.3 var(--serif); }
.prose ul, .prose ol { padding-left: 24px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 36px 0; padding: 28px 32px; border-radius: 10px; background: var(--blue); color: #fff; font-style: italic; }
.prose figure { margin: 32px 0; }
.prose figure img { width: 100%; border-radius: 16px; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: rgba(0, 29, 71, .7); }
.post-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 28px; }
.post-aside__card { padding: 32px; border-radius: 24px; background: var(--navy); color: #fff; }
.post-aside__card h2 { font: 400 30px/1.2 var(--serif); }
.post-aside__card p { margin-top: 12px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .85); }
.post-aside__card .btn { width: 100%; margin-top: 22px; white-space: normal; text-align: center; }
.post-aside__call { display: block; margin-top: 14px; text-align: center; font-size: 15px; color: var(--teal); }
.post-aside__call:hover { color: #fff; }
.post-recent { padding: 28px; border: 1px solid var(--teal); border-radius: 20px; }
.post-recent h2 { font: 400 24px/1.2 var(--serif); }
.post-recent ul { margin-top: 16px; display: grid; gap: 16px; }
.post-recent a { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; font: 400 17px/1.3 var(--serif); color: var(--navy); }
.post-recent a:hover { color: var(--blue); }
.post-recent img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.post-recent__date { display: block; margin-bottom: 4px; font: 600 12px/18px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--teal); }
.post-recent__empty { font-size: 15px; color: rgba(0, 29, 71, .7); }
.post-back { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--navy); }
.post-back .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.post-back:hover { color: var(--blue); }
/* Thank-you page (after the contact form) */
.thanks { padding: 100px 0; background: var(--aqua); }
.thanks__card { max-width: 760px; margin: 0 auto; padding: 56px 48px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 24px 64px -12px rgba(0, 29, 71, .2); }
.thanks__card img { margin: 0 auto; width: 72px; height: 72px; }
.thanks__title { margin-top: 20px; font: 400 clamp(36px, 4vw, 54px)/1.15 var(--serif); letter-spacing: -0.02em; color: var(--navy); }
.thanks__card p { margin-top: 14px; font-size: 18px; line-height: 28px; }
.thanks__card p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.thanks .btn-row { margin-top: 32px; gap: 16px; }
@media (max-width: 768px) { .thanks { padding: 56px 0; } .thanks__card { padding: 36px 20px; } .thanks__card p { font-size: 16px; line-height: 26px; } }
/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1600px) {
  /* narrower desktops: text columns keep their natural width, a fixed 40px gap separates every column (map included) */
  .footer__main { grid-template-columns: minmax(220px, 1fr) auto auto auto minmax(240px, 353px); column-gap: 40px; }
  .footer__brand img { width: 100%; max-width: 266px; height: auto; aspect-ratio: 266 / 98; }
  .footer__map { width: 100%; }
}

@media (max-width: 1500px) {
  .nav { margin-left: 48px; }
  .nav__menu { gap: 2px; }
  .nav__menu a { padding: 2px 8px; font-size: 16px; }
  .header-call { width: 210px; }
}

@media (max-width: 1300px) {
  :root { --gutter: 40px; }
  .site-header .container, .hero .container { padding-left: var(--gutter); }
  .nav { margin-left: 32px; }
  .reviews { grid-template-columns: 1fr; gap: 48px; }
  .reviews .logo-badge { left: auto; right: 44px; top: 70px; }
  .quotes { min-height: 0; margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .quote__foot { flex-wrap: wrap; }
  .quote__author { min-width: 0; }
  .quote__name { overflow-wrap: anywhere; }
  .hours { width: 100%; max-width: 265px; }
  .quote, .quote.is-front, .quote.is-back { margin: 0; min-height: 0; transform: none; }
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand img { width: 266px; }
  .footer__map { grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 560px; }
  .footer__map img { aspect-ratio: 16 / 9; }
  .cta-banner .container { padding-right: var(--gutter); }
}

@media (min-width: 1501px) and (max-width: 1600px) {
  .quote { padding: 34px; }
  .quote blockquote { font-size: 20px; line-height: 28px; }
}

@media (min-width: 1301px) and (max-width: 1500px) {
  .reviews { grid-template-columns: 340px 1fr; gap: 48px; padding-right: 36px; }
  .reviews .logo-badge { display: none; }
  .quote { padding: 34px; }
  .quote blockquote { font-size: 20px; line-height: 28px; }
}

@media (max-width: 1440px) {
  .service-card__body { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 1240px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1220px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; margin: 0; background: #fff; box-shadow: 0 16px 32px rgba(0, 29, 71, .12); padding: 12px var(--gutter) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__menu a { padding: 12px 14px; font-size: 17px; border-radius: 10px; }
}

@media (max-width: 1100px) {
  .hero .container { min-height: 0; }
  .hero-stats li { white-space: normal; }
  .icon-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero__content { padding-bottom: 36px; }
  /* below the hero content instead of floating over the photo */
  .injuries-card { position: relative; z-index: 4; top: auto; right: auto; width: 100%; max-width: 420px; margin-bottom: 48px; padding-bottom: 24px; background: rgba(4, 37, 68, .62); }
  .hero { background-position: 70% bottom; }
  .hero::after { z-index: 0; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 29, 71, .92) 0%, rgba(0, 29, 71, .7) 55%, rgba(0, 29, 71, .2) 100%); }
  .conditions .container, .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__grid { padding-left: 0; gap: 56px; }
  .why__media { max-width: 560px; }
  .why__media > img { height: auto; min-height: 0; aspect-ratio: 559 / 585; }
  .welcome .container { gap: 32px; }
  .approach { gap: 32px; padding: 36px; }
  .checked__grid { grid-template-columns: 1fr; }
  .conditions__list { gap: 16px; }
  .why::before { bottom: 0; }
  .why { padding-bottom: 0; }
  .questions__grid { grid-template-columns: 1fr; gap: 0; }
  .link-panel { min-height: 0; padding: 32px 0; }
  .link-panel + .link-panel { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .welcome .container, .approach { grid-template-columns: 1fr; }
  .welcome__body { order: -1; }
  .welcome__media img, .approach__media img { max-height: 420px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --header-h: 68px; }
  body { font-size: 15px; }
  .brand img { width: 150px; height: 55px; }
  .header-call { display: none; }
  .nav-toggle { margin-left: auto; }
  .hero__content { padding-top: 40px; }
  .hero__lead { margin-top: 20px; font-size: 16px; line-height: 25px; }
  .btn-row .btn { flex: 1 1 100%; }
  .welcome__body .btn, .cta-card .btn { width: 100%; }
  .owner-card { width: 100%; padding: 20px; gap: 18px; }
  .hero-stats { flex-wrap: wrap; justify-content: space-between; row-gap: 20px; }
  .hero-stats li, .hero-stats li:first-child, .hero-stats li:nth-child(2), .hero-stats li:last-child { padding: 0 8px; flex: 1; white-space: normal; font-size: 13px; }
  .welcome { padding: 48px 0; }
  .welcome__body p, .approach__text, .cta-card p { font-size: 16px; line-height: 26px; }
  .approach { padding: 28px 20px; border-radius: 20px; }
  .icon-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .checked { padding: 64px 0; }
  .checked__grid { margin-top: 36px; }
  .care-card { min-height: 0; }
  .care-card__img { height: 200px; }
  .care-card__body { padding: 28px 22px 32px; }
  .care-card h3 { padding-right: 0; }
  .icon-badge, .care-card .logo-badge { display: none; }
  .services { padding: 56px 0 64px; }
  .services__head { padding-bottom: 28px; }
  .services__grid { gap: 16px; margin-top: 36px; }
  .service-card__body { padding: 22px 18px 28px; }
  .conditions { padding: 64px 0; }
  .conditions__panel { padding: 20px; border-radius: 24px; }
  .conditions__panel > img { border-radius: 20px; }
  .conditions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { width: auto; flex: 1; }
  .stats { flex: 1 1 100%; }
  .conditions__foot .btn { flex: 1 1 100%; }
  .condition { min-height: 72px; }
  .why { padding-top: 64px; }
  .proof, .facts { grid-template-columns: 1fr; gap: 24px; }
  .facts { gap: 12px; }
  .reviews { margin-top: 56px; padding: 40px 20px; border-radius: 24px; }
  .reviews .logo-badge { display: none; }
  .quote { padding: 28px; }
  .quote__foot { flex-wrap: wrap; }
  .quote__author { min-width: 0; }
  .quote__name { overflow-wrap: anywhere; }
  .quote blockquote { font-size: 19px; line-height: 27px; }
  .questions { padding: 64px 0 40px; }
  .questions__sub { font-size: 16px; }
  .cta-banner .container { justify-content: center; padding-top: 48px; padding-bottom: 48px; }
  /* extra bottom room so the chat bubble on the card corner never touches the full-width button */
  .cta-card { padding: 28px 24px 60px; border-radius: 24px; }
  .chat-bubble { width: 64px; height: 64px; left: auto; right: 16px; top: auto; bottom: -32px; }
  .chat-bubble .icon { width: 28px; height: 28px; }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-top: 40px; padding-bottom: 40px; }
  .footer__brand img { width: 220px; }
  .footer__col ul, .footer__col address, .footer__contact, .hours { margin-top: 16px; }
  .footer__brand, .footer__hours, .footer__map { grid-column: 1 / -1; }
  .hours { width: 100%; max-width: 320px; }
  .footer__bar .container { justify-content: center; text-align: center; font-size: 13px; line-height: 20px; padding-top: 10px; padding-bottom: 10px; }
  .stats dd { font-size: 24px; line-height: 32px; white-space: nowrap; }
}

@media (max-width: 600px) {
  .services__grid, .conditions__list { grid-template-columns: minmax(0, 1fr); }
  .service-card img { aspect-ratio: 16 / 11; }
  .quote::before { top: 6px; left: 14px; font-size: 110px; }
  /* phones: one testimonial at a time - arrows, dots or a swipe bring in the next card */
  .quotes { grid-template-columns: minmax(0, 1fr); touch-action: pan-y; }
  .quote.is-back { display: none; }
  .quotes[data-dir] .quote.is-front { animation: quote-in .4s ease both; }
  .quotes[data-dir="prev"] .quote.is-front { animation-name: quote-in-prev; }
  /* small phones: pills may wrap instead of pushing the page sideways */
  .btn { padding: 12px 20px; white-space: normal; text-align: center; line-height: 22px; }
  .footer__book { white-space: normal; }
  .quote__foot { flex-wrap: wrap; }
  .quote__author { min-width: 0; }
  .verified { margin-left: 72px; }
}

@keyframes quote-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes quote-in-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* very small phones (320-400px) */
@media (max-width: 400px) {
  .footer__main { grid-template-columns: minmax(0, 1fr); }
  .footer__col address { white-space: normal; }
  .hours { max-width: none; }
  .quote { padding: 24px 20px; }
  .quote__name { overflow-wrap: anywhere; }
  .quote blockquote { font-size: 18px; line-height: 26px; }
  .hero-stats li { font-size: 12px; }
  .injuries-card li { font-size: 15px; }
}

/* inner pages - small screens */
@media (max-width: 1100px) {
  .hero--page .hero__content { padding: 48px 0; }
  .hero--page .hero-stats { margin-top: 48px; }
  .welcome--bio { padding: 56px 0 64px; }
  .approach--team { padding: 36px; }
  .team { padding-bottom: 64px; }
  [data-page="services"] .conditions { padding: 56px 0 64px; }
}
@media (max-width: 768px) {
  .hero--page .btn-row { margin-top: 28px; }
  .welcome--bio .welcome__body { order: 0; }
  .bio-quote { margin-top: 28px; padding: 22px 20px; }
  .bio-quote blockquote { font-size: 16px; line-height: 25px; }
  .bio-quote figcaption { font-size: 18px; }
  .bio-note { margin-top: 32px; padding: 16px 20px; font-size: 15px; line-height: 24px; }
  .approach--team { padding: 28px 20px; }
  .approach--team .approach__text p + p { margin-top: 18px; }
  .approach--team .btn { margin-top: 8px; width: 100%; }
}

/* chiropractic adjustments - small screens */
@media (max-width: 1100px) {
  .welcome--split .container:first-child { gap: 32px; }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .welcome--benefit { padding: 64px 0; }
  .faq { padding-bottom: 64px; }
  .faq__list { gap: 20px; margin-top: 32px; }
  .why--solo { padding: 64px 0; }
  .why--solo + .questions { padding-top: 64px; }
}
@media (max-width: 900px) {
  .welcome--split .container:first-child { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .steps { padding: 56px 0; }
  .steps__lead { font-size: 16px; line-height: 26px; }
  .step-card { padding: 24px 16px; }
  .benefit-list { padding: 22px 18px; }
  .benefit-list li { grid-template-columns: 24px 1fr; gap: 14px; padding: 12px 4px; font-size: 16px; line-height: 25px; }
  .benefit-list .icon { width: 24px; height: 24px; }
  .faq__item { padding: 18px; }
  .faq__item summary { font-size: 20px; }
  .faq__body { font-size: 16px; }
}
@media (max-width: 600px) {
  .steps__grid { grid-template-columns: minmax(0, 1fr); }
}

/* testimonials + contact - small screens */
@media (max-width: 1440px) {
  .contact__grid { gap: 80px; padding-left: 0; padding-right: 0; }
  .review-wall__box { padding-left: 44px; padding-right: 44px; }
}
@media (max-width: 1300px) {
  .review-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1100px) {
  .welcome--testi { padding: 56px 0 64px; }
  .checked--page { padding-bottom: 64px; }
  .contact { padding: 64px 0; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .review-wall__more { margin-top: 48px; }
}
@media (max-width: 768px) {
  .review-wall__box { padding: 48px 20px; border-radius: 24px; }
  .review-wall__grid { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .contact-form { padding: 28px 20px; gap: 22px; }
  .contact__list li { font-size: 15px; line-height: 24px; gap: 14px; }
  .contact__list strong { font-size: 20px; }
}
@media (max-width: 480px) {
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* insurance / new patients / blog - small screens */
@media (max-width: 1300px) {
  .steps--paperwork .steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-list__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .plans { padding: 56px 0 64px; }
  .plans__logos { justify-content: center; }
  .welcome--visit { padding: 56px 0 64px; }
  .bring { padding-bottom: 64px; }
  .bring__panel { grid-template-columns: minmax(0, 1fr); padding: 36px; }
  .steps--paperwork { padding: 56px 0; }
  .blog-list { padding: 56px 0 64px; }
  .blog-list__grid { grid-template-columns: minmax(0, 1fr); }
  .blog-list__more { margin-top: 48px; }
}
@media (max-width: 768px) {
  .plans__logos img { max-width: 140px; }
  .plans__checks li { font-size: 18px; }
  .bring__panel { padding: 28px 20px; border-radius: 20px; }
  .bring__text, .bring__list, .no-insurance p { font-size: 16px; line-height: 26px; }
  .no-insurance { padding: 24px 20px 120px; }
  .no-insurance img { top: auto; bottom: 16px; right: 16px; width: 80px; height: 82px; }
  .steps--paperwork .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__note { font-size: 16px; line-height: 26px; }
  .post-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .post-card img { order: -1; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .post-card__body { padding-top: 0; }
}
@media (max-width: 480px) {
  .steps--paperwork .steps__grid { grid-template-columns: minmax(0, 1fr); }
}

/* blog: 2 columns on 1301-1440px get a narrower photo so the titles stay large */
@media (min-width: 1301px) and (max-width: 1440px) {
  .post-card { grid-template-columns: minmax(0, 1fr) 220px; }
  .post-card img { width: 220px; height: 100%; max-height: 296px; }
}

/* single post - small screens */
@media (max-width: 1100px) {
  .post { padding: 56px 0 64px; }
  .post__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .post-aside { position: static; }
}
@media (max-width: 768px) {
  .post-hero { padding: 40px 0 48px; }
  .prose { font-size: 16px; line-height: 27px; }
  .prose__lead { font-size: 18px; line-height: 29px; }
  .prose h2 { font-size: 28px; }
  .prose h3 { font-size: 22px; }
  .post__image { border-radius: 16px; margin-bottom: 28px; }
  .post-aside__card, .post-recent { padding: 24px 20px; }
}