/* Med Health Medical Center — physical therapy clinic
   Single stylesheet. Mobile-first.

   Design direction: "range of motion".
   Physical therapy measures recovery in degrees of movement regained, so the
   page is built out of arcs rather than rounded rectangles — a swept corner on
   the hero photograph, and a small arc rule that marks every section label.
   Type does the rest: one variable family, used at two widths. Section labels
   are condensed and set tight; headlines are expanded. That width contrast is
   the personality, and it costs one font file.

   The coral accent is sampled from the resistance band in the clinic
   photograph, so the one warm colour on the page is already in the imagery. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b2426;
  --ink-2: #4a6668;
  --teal: #0f6f66;
  --teal-deep: #063f3b;
  --band: #d94b30;
  --band-soft: #f8e9e5;
  --paper: #eef3f2;
  --surface: #ffffff;
  --rule: #cddedb;
  --rule-strong: #a9c4c0;

  --wrap: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;
  --sweep: clamp(3.5rem, 10vw, 11rem);

  --font: "Archivo", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-stretch: 112%;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.1rem);
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
}

h3 {
  font-size: 1.0625rem;
  font-stretch: 104%;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--teal-deep);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--band);
}

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

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

/* The section label. Condensed and tracked out, against expanded headlines —
   the two ends of the same family's width axis. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  color: var(--teal);
  font-size: 0.75rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* Signature: a shallow arc, the mark a goniometer leaves. Repeats at every
   section label so the arc language reads as a system, not an ornament. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 3rem;
  height: 0.5rem;
  border: 1.5px solid var(--band);
  border-bottom: 0;
  border-radius: 3rem 3rem 0 0 / 0.5rem 0.5rem 0 0;
}

.lede {
  max-width: 46rem;
  color: var(--ink-2);
  font-size: clamp(1.075rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section-tint {
  background: #dbe9e5;
}

.section-surface {
  background: var(--surface);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Header / nav ---------- */

.site-header {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--ink);
  font-stretch: 108%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-decoration: none;
}

.brand span {
  color: var(--teal);
  font-size: 0.68rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.brand:hover {
  color: var(--teal-deep);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-stretch: 78%;
  font-weight: 650;
  letter-spacing: 0.14em;
  padding: 0.55rem 1rem;
  text-transform: uppercase;
}

/* Collapsed only when JS is available to reopen it. */
.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem var(--gutter) 1.5rem;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a:not(.btn) {
  display: block;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 550;
  padding: 0.8rem 0.25rem;
  text-decoration: none;
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--teal-deep);
}

.site-nav .btn {
  border-bottom: 0;
  margin-top: 1rem;
  text-align: center;
}

@media (min-width: 56rem) {
  .nav-toggle {
    display: none;
  }
  .site-nav,
  .js .site-nav,
  .js .site-nav.is-open {
    display: block;
    position: static;
    border: 0;
    padding: 0;
  }
  .site-nav ul {
    align-items: center;
    flex-direction: row;
    gap: 1.75rem;
  }
  .site-nav a:not(.btn) {
    border-bottom: 0;
    padding: 0.3rem 0;
  }
  .site-nav .btn {
    margin-top: 0;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--teal-deep);
  border: 1.5px solid var(--teal-deep);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9375rem;
  font-stretch: 92%;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
}

.btn:hover {
  background: var(--band);
  border-color: var(--band);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

button.btn {
  cursor: pointer;
  font-family: inherit;
}

/* A disabled submit must look disabled — it renders in the primary colour
   otherwise, which reads as a working button that silently does nothing. */
.btn:disabled,
.btn:disabled:hover {
  background: #97aeab;
  border-color: #97aeab;
  box-shadow: none;
  color: #f4f8f7;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.hero h1 {
  max-width: 17ch;
}

.hero p {
  max-width: 40rem;
  color: var(--ink-2);
  font-size: clamp(1.075rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

/* Home hero: the photograph is cut with one large swept corner — the arc a
   joint travels through. Everything else on the page stays square so this
   single curve carries the idea. */

.hero-with-image {
  overflow: hidden;
  padding-block: 0;
}

.hero-with-image .wrap {
  display: grid;
  gap: 0;
  padding-inline: 0;
}

.hero-figure {
  order: -1;
  margin: 0;
  overflow: hidden;
  border-bottom-left-radius: var(--sweep);
}

.hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 68% 50%;
}

.hero-copy {
  padding: clamp(2rem, 6vw, 3rem) var(--gutter) clamp(2.75rem, 6vw, 3.5rem);
}

@media (min-width: 56rem) {
  .hero-with-image .wrap {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    min-height: 31rem;
  }

  .hero-figure {
    order: 0;
    align-self: stretch;
    /* Bleeds to the viewport edge so the sweep reads as a cut in the page,
       not a card sitting on it. Measured against --wrap rather than 100%,
       which inside a grid item resolves to the column and overshoots. */
    margin-right: min(0px, calc((var(--wrap) - 100vw) / 2));
  }

  .hero-img {
    height: 100%;
    aspect-ratio: auto;
    /* The column is narrower than the 16:9 source, so the crop is anchored
       right — that is where both the therapist and the patient are. */
    object-position: 88% 45%;
  }

  .hero-copy {
    padding: 4rem 3.5rem 4rem var(--gutter);
  }
}

/* ---------- Statement list (why patients choose us) ---------- */

.facets {
  border-top: 1px solid var(--rule);
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.facets li {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.6rem;
}

.facets h3 {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
}

.facets p {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-2);
}

@media (min-width: 48rem) {
  .facets {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .facets li:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* ---------- Service index ---------- */

.index {
  border-top: 1px solid var(--rule-strong);
  list-style: none;
  margin: 0;
  padding: 0;
}

.index li {
  border-bottom: 1px solid var(--rule);
}

.index a {
  align-items: baseline;
  color: inherit;
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.5rem;
  text-decoration: none;
}

.index .name {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-stretch: 110%;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.index .detail {
  color: var(--ink-2);
}

/* Below the two-column breakpoint the arrow would sit alone on its own line,
   which reads as a stray glyph. The whole row is the link either way. */
.index .go {
  display: none;
  color: var(--band);
  font-size: 1.1rem;
  line-height: 1;
}

@media (min-width: 48rem) {
  .index a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 1.75rem;
    padding-block: 1.85rem;
  }
  .index .go {
    display: block;
    justify-self: end;
  }
}

/* ---------- Service cards (services page) ---------- */

.cards {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 52rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service {
  display: flex;
  flex-direction: column;
}

.service figure {
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-bottom-left-radius: clamp(3rem, 7vw, 6rem);
}

.service img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-stretch: 110%;
  margin-bottom: 0.9rem;
}

.service dl {
  border-top: 1px solid var(--rule);
  margin: 0 0 1.5rem;
}

.service dt {
  color: var(--teal);
  font-size: 0.7rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.16em;
  padding-top: 0.9rem;
  text-transform: uppercase;
}

.service dd {
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  margin: 0.25rem 0 0;
  padding-bottom: 0.9rem;
}

.service .note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.service .btn-row {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ---------- Steps (about) ---------- */

/* A real sequence, so it is numbered. The numbers sit on the rule as position
   markers rather than in badges. */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  border-top: 1px solid var(--rule);
  counter-increment: step;
  padding: 1.6rem 0 1.6rem 3.5rem;
  position: relative;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--band);
  font-size: 0.8rem;
  font-stretch: 76%;
  font-weight: 700;
  left: 0;
  letter-spacing: 0.1em;
  position: absolute;
  top: 1.85rem;
}

.steps li:last-child {
  border-bottom: 1px solid var(--rule);
}

.steps h3 {
  font-size: 1.25rem;
  font-stretch: 110%;
  margin-bottom: 0.3rem;
}

.steps p {
  max-width: 38rem;
  margin: 0;
  color: var(--ink-2);
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .steps li:nth-child(-n + 2) {
    border-top: 1px solid var(--rule);
  }
  .steps li:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }
}

/* ---------- Beliefs ---------- */

.beliefs {
  border-top: 1px solid var(--rule);
  list-style: none;
  margin: 0;
  max-width: 52rem;
  padding: 0;
}

.beliefs li {
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-stretch: 106%;
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.3;
  padding-block: 1.25rem;
}

/* ---------- Figures ---------- */

.figure-block {
  margin: 0 0 2rem;
  max-width: 52rem;
}

.figure-block img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-bottom-left-radius: clamp(3rem, 8vw, 7rem);
  object-fit: cover;
}

.figure-block figcaption {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-stretch: 90%;
  margin-top: 0.75rem;
}

/* ---------- Placeholder markers ---------- */

.needs-note {
  background: var(--band-soft);
  border-left: 2px solid var(--band);
  color: #6f2a17;
  max-width: 44rem;
  padding: 1rem 1.25rem;
}

.needs-note p:last-child {
  margin-bottom: 0;
}

/* ---------- CTA band ---------- */

/* The one place the accent runs the show: deep field, coral action. */

.cta-band {
  background: var(--teal-deep);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -14rem;
  top: -10rem;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.cta-band .wrap {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  color: #fff;
  max-width: 18ch;
}

.cta-band p {
  color: #bcd6d2;
  max-width: 40rem;
}

.cta-band .eyebrow {
  color: #7fc0b6;
}

.cta-band .eyebrow::before {
  border-color: var(--band);
}

.cta-band a:not(.btn) {
  color: #fff;
}

.cta-band a:not(.btn):hover {
  color: var(--band-soft);
}

.cta-band .btn {
  background: var(--band);
  border-color: var(--band);
  color: #fff;
}

.cta-band .btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--teal-deep);
}

.cta-band :focus-visible {
  outline-color: #fff;
}

/* ---------- Contact ---------- */

.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .contact-layout {
    align-items: start;
    grid-template-columns: 1fr 1fr;
  }
}

/* Everything in this two-column layout is a subsection, so its headings sit a
   step below the page's section headings rather than competing with them. */
.contact-layout h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.contact-layout h2:not(:first-child) {
  margin-top: 2.5rem;
}

.form-panel h2 {
  margin-top: 0;
}

.detail-list {
  border-top: 1px solid var(--rule);
  margin: 0;
}

.detail-list dt {
  color: var(--teal);
  font-size: 0.7rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.16em;
  padding-top: 0.85rem;
  text-transform: uppercase;
}

.detail-list dd {
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  margin: 0.1rem 0 0;
  padding-bottom: 0.85rem;
}

.form-panel {
  background: var(--surface);
  border-bottom-left-radius: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.form-field {
  margin-bottom: 1.1rem;
}

.form-field label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  padding: 0.7rem 0.8rem;
}

.form-field input:focus,
.form-field textarea:focus {
  background: #fff;
}

.form-field .hint,
.form-panel .hint {
  color: var(--ink-2);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #b9cecd;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover {
  color: var(--band-soft);
}

.site-footer h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.site-footer .tagline {
  color: #7fc0b6;
  font-size: 0.68rem;
  font-stretch: 76%;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr auto;
  }
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer nav a {
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-footer nav a:hover {
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.footer-legal {
  border-top: 1px solid #24403f;
  color: #8aa5a4;
  font-size: 0.85rem;
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
}

/* ==========================================================================
   Motion
   Presentational only. The reduced-motion block near the top disables every
   transition and animation in one place.
   ========================================================================== */

.btn,
.index a,
.index .go,
a {
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.35s var(--ease);
}

@media (hover: hover) {
  .index a:hover {
    background: var(--surface);
  }
  .index a:hover .go {
    transform: translateX(0.4rem);
  }
  .index a:hover .name {
    color: var(--teal-deep);
  }
}

.service img,
.hero-img {
  transition: transform 0.6s var(--ease);
}

@media (hover: hover) {
  .service figure:hover img {
    transform: scale(1.03);
  }
}

/* Hero entrance */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sweep-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 0 12%);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.js .hero-copy > * {
  animation: rise 0.7s var(--ease) both;
}

.js .hero-copy > :nth-child(2) {
  animation-delay: 0.07s;
}

.js .hero-copy > :nth-child(3) {
  animation-delay: 0.14s;
}

.js .hero-copy > :nth-child(4) {
  animation-delay: 0.21s;
}

.js .hero-figure {
  animation: sweep-in 0.9s var(--ease) both;
}

/* Scroll reveal. The `reveal` class is added to <html> by nav.js itself, so if
   that file is missing or fails to load nothing is ever hidden. */

html.reveal .rv {
  opacity: 0;
  transform: translateY(14px);
}

html.reveal .rv.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  html.reveal .rv {
    opacity: 1;
    transform: none;
  }
}