/* ==========================================================================
   GT Physical Therapy — site stylesheet (2026 redesign)
   Layout idea: clinic-sign clarity. Left-aligned, asymmetric two-column rows
   on a 1180px measure; white and mist sections; navy bands reserved for dry
   needling and the contact block. Real photos, square corners, no shadows.
   ========================================================================== */

@font-face {
  font-family: "GT Archivo";
  src: url("/assets/fonts/archivo-sc.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Color — straight from the logo, plus navy-tinted neutrals */
  --navy: #24225D;        /* logo navy: buttons, dark bands */
  --ink: #1A1940;         /* body text */
  --ink-soft: #46445F;    /* secondary text (9:1 on white) */
  --paper: #FFFFFF;
  --mist: #F3F2F7;        /* alternate sections */
  --line: #DCDAE6;        /* hairlines */
  --gold: #D9AB52;        /* logo gold: accents, buttons on navy */
  --gold-ink: #8A6418;    /* gold-toned text on white (5.4:1) */
  --on-navy: #FFFFFF;
  --on-navy-soft: #CFCDE6;
  --focus: var(--navy);

  /* Type */
  --font-display: "GT Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  --fs-body: clamp(1.125rem, 1.07rem + 0.2vw, 1.1875rem);   /* 18 → 19px */
  --fs-small: 1rem;                                          /* never below 16px */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2vw, 2.75rem);
  --fs-h1: clamp(2.375rem, 1.55rem + 3.4vw, 4rem);

  /* Space */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --measure: 73.75rem;          /* 1180px */
  --section: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tel { white-space: nowrap; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: 1.04; font-weight: 750; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.2; }

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

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--navy); color: var(--on-navy); padding: 0.75rem 1rem; border-radius: var(--r);
}
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.prose { max-width: 38rem; display: grid; gap: 1.1rem; }
.prose--wide { max-width: 44rem; }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-small); }
.stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.stack--lg { gap: 1.5rem; }
.stack--xl { gap: 2rem; }

/* Section heading block */
.sec-head { display: grid; gap: 1rem; max-width: 40rem; align-content: start; }
.sec-head p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.8rem 1.4rem;
  border-radius: var(--r); border: 2px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--primary { background: var(--navy); color: var(--on-navy); }
.btn--primary:hover { background: var(--ink); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #E6BD6A; }
.btn--outline { border-color: currentColor; color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--mist); }
.btn--outline-light { border-color: var(--on-navy-soft); color: var(--on-navy); }
.btn--outline-light:hover { background: rgba(255,255,255,0.08); }

.text-link {
  font-weight: 700; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px;
  display: inline-flex; align-items: baseline; gap: 0.35em; padding-block: 0.6rem;
}
.text-link .arrow { transition: transform 0.15s ease; }
.text-link:hover .arrow { transform: translateX(3px); }
.text-link:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-right: auto; }
.brand img { width: 3.1rem; height: auto; }
.brand-name { display: grid; line-height: 1.1; }
.brand-name strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; color: var(--navy); }
.brand-name span { font-size: 0.95rem; color: var(--ink-soft); }

.nav-list { display: flex; gap: 0.25rem; list-style: none; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.7rem;
  text-decoration: none; font-size: 1.0625rem; border-radius: var(--r);
}
.nav-list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.nav-list a[aria-current="page"] { font-weight: 700; }
.header-call { white-space: nowrap; }
.header-call .hc-label { font-weight: 400; }
.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 3px solid var(--navy);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .site-nav.is-open .nav-list { flex-direction: column; gap: 0; }
  .site-nav.is-open .nav-list a { min-height: 3.25rem; font-size: 1.1875rem; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; width: 100%; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 0.9rem;
    background: transparent; border: 2px solid var(--line); border-radius: var(--r);
    font: 700 1.0625rem/1 var(--font-body); color: var(--ink); cursor: pointer;
  }
  .menu-toggle svg { width: 1.25rem; height: 1.25rem; }
  .header-call .hc-label { display: none; }
}
@media (max-width: 560px) {
  .header-row { gap: 0.5rem; min-height: 4.25rem; }
  .brand { gap: 0.5rem; }
  .brand img { width: 2.4rem; }
  .brand-name strong { font-size: 1.0625rem; }
  .site-header .brand-name span { display: none; }
  .menu-toggle { padding: 0 0.7rem; }
  .header-call { padding-inline: 0.85rem; min-height: 3rem; }
  .header-call .num { display: none; }
}
@media (min-width: 561px) { .header-call .short { display: none; } }

/* --------------------------------------------------------------------------
   Hero (homepage + service pages)
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.75rem) clamp(3rem, 2rem + 4vw, 5.5rem); overflow-x: clip; }
.hero-grid { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 4rem); align-items: center; }
.hero-copy { display: grid; gap: 1.4rem; min-width: 0; }
.kicker { font-size: var(--fs-small); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.kicker b { color: var(--gold-ink); font-weight: 700; }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 34rem; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hero-note { font-size: var(--fs-small); color: var(--ink-soft); }

.facts { display: grid; gap: 0; border-top: 1px solid var(--line); margin: 0; min-width: 0; }
.fact { padding-block: 0.9rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.15rem; align-content: start; }
.fact dt { font-weight: 700; font-size: var(--fs-small); color: var(--gold-ink); }
.fact dd { margin: 0; font-size: var(--fs-small); }
.fact dd a { font-weight: 700; color: var(--navy); }

.hero-photo { margin: 0; min-width: 0; }
.hero-photo img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.hero-photo figcaption, .photo figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.6rem; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy photo" "facts photo"; row-gap: 2rem; }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-photo { grid-area: photo; }
  .facts { grid-area: facts; align-self: start; }
  .hero--home .hero-photo { margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--measure)) / 2 - var(--gutter)))); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .fact { border-bottom: 0; padding-inline: 0 1rem; }
  .fact + .fact { border-left: 1px solid var(--line); padding-left: 1rem; }
}

.stars { color: var(--gold-ink); letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   Conditions index
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split > .sec-head { position: sticky; top: 2rem; align-self: start; }
}

.index-groups { display: grid; gap: 2.5rem; min-width: 0; }
@media (min-width: 720px) { .index-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.index-group h3 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; color: var(--gold-ink); margin-bottom: 0.5rem; letter-spacing: 0; }
.index-list { list-style: none; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; align-items: center;
  padding: 0.9rem 0.25rem; text-decoration: none; min-height: 3.5rem;
}
.index-list .name { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; color: var(--navy); line-height: 1.2; }
.index-list .desc { grid-column: 1; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
.index-list .go { grid-column: 2; grid-row: 1 / span 2; color: var(--navy); font-size: 1.25rem; transition: transform 0.15s ease; }
.index-list a:hover { background: var(--mist); }
.index-list a:hover .name { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.index-list a:hover .go { transform: translateX(3px); }
.section--mist .index-list a:hover { background: var(--paper); }
.index-group .index-sub { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   About Dr. Baskin
   -------------------------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 700px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.photo { margin: 0; min-width: 0; }
.photo img { width: 100%; object-fit: cover; }
.photo--portrait img { aspect-ratio: 4 / 5; }
.photo--wide img { aspect-ratio: 3 / 2; }

.creds { display: grid; border-top: 1px solid var(--line); margin-top: 0.5rem; }
.creds div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.creds dt { font-family: var(--font-display); font-weight: 750; color: var(--navy); font-size: 1.125rem; }
.creds dd { margin: 0; }
.about-photos { display: grid; gap: 1.5rem; min-width: 0; }
.about-text { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
@media (max-width: 699px) {
  .about-grid { gap: 1.5rem; }
  .about-photos, .about-text { display: contents; }
  .about-text > h2 { order: 1; }
  .about-photos > .photo--portrait { order: 2; }
  .about-text > .prose { order: 3; }
  .about-text > .creds { order: 4; }
  .about-photos > .photo--wide { order: 5; }
}

/* Gold triangle marker — taken from the logo */
.tri-list { list-style: none; display: grid; gap: 0.6rem; }
.tri-list li { position: relative; padding-left: 1.5rem; }
.tri-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.8rem; height: 0.7rem;
  background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   First visit (a real sequence, so it is numbered)
   -------------------------------------------------------------------------- */
.visit-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 760px) { .visit-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.steps { list-style: none; counter-reset: step; display: grid; margin-top: 2rem; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  font-family: var(--font-display); font-weight: 750; font-size: 1.75rem; line-height: 1; color: var(--gold-ink);
  padding-top: 0.15rem;
}
.steps h3 { font-size: 1.3125rem; }
.steps p { color: var(--ink); }

.plan { margin-top: 2rem; display: grid; gap: 0.75rem; }
.plan-title { font-weight: 700; }
.plan-track { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 4px; }
.plan-track span { display: block; padding: 0.7rem 0.8rem; font-size: 0.95rem; line-height: 1.35; background: var(--paper); border-top: 4px solid var(--navy); }
.plan-track span:nth-child(2) { border-top-color: #6B69A0; }
.plan-track span:nth-child(3) { border-top-color: var(--gold); }
.plan-track b { display: block; }
@media (max-width: 520px) { .plan-track { grid-template-columns: 1fr; } }

.bring { margin-top: 2rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 0.6rem; }
.section--mist .bring { background: var(--paper); }
.bring h3 { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Navy band (dry needling, contact)
   -------------------------------------------------------------------------- */
.band { background: var(--navy); color: var(--on-navy); --focus: var(--gold); }
.band h2, .band h3 { color: var(--on-navy); }
.band .muted, .band .sec-head p { color: var(--on-navy-soft); }
.band a:not(.btn) { color: var(--on-navy); text-decoration-color: var(--gold); }
.band .text-link { color: var(--on-navy); }
.band .label { color: var(--gold); }
.band .tri-list li::before { background: var(--gold); }

.dn-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 760px) { .dn-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.dn-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; min-width: 0; }
.dn-photos img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.dn-photos figure { margin: 0; }
.dn-photos figure:nth-child(2) { margin-top: 2.5rem; }
.dn-copy { display: grid; gap: 1.2rem; min-width: 0; }
.label { font-weight: 700; color: var(--gold-ink); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.reviews-top { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 700px) { .reviews-top { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; } }
@media (max-width: 699px) { .reviews-top .photo img { aspect-ratio: 1 / 1; object-position: 50% 30%; } }
.feature-quote { margin: 0; display: grid; gap: 1.25rem; }
.feature-quote blockquote { margin: 0; }
.feature-quote p {
  font-family: var(--font-display); font-weight: 550; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); text-wrap: pretty;
}
.feature-quote p::before { content: "\201C"; color: var(--gold); margin-right: 0.05em; }
.feature-quote p::after { content: "\201D"; color: var(--gold); }
.cite { font-size: var(--fs-small); color: var(--ink-soft); font-style: normal; }
.cite b { color: var(--ink); }
.rating-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.rating-line .score { font-family: var(--font-display); font-weight: 750; font-size: 2.25rem; color: var(--navy); line-height: 1; }
.quotes { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.quotes figure { margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--navy); display: grid; gap: 0.9rem; align-content: start; }
.quotes blockquote { margin: 0; }
.quotes p { font-size: 1.0625rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Insurance
   -------------------------------------------------------------------------- */
.ins-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .ins-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.plans { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plans li { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line); font-weight: 700; display: flex; align-items: center; gap: 0.75rem; }
.plans li::before { content: ""; width: 0.75rem; height: 0.65rem; background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
.plans small { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.ins-notes { display: grid; gap: 1.5rem; }
.ins-notes h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   Contact band
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.15fr 1fr 1fr; gap: 3rem; } }
.contact-grid > div { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.22); }
.contact-grid h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; color: var(--gold); letter-spacing: 0; }
.big-phone { font-family: var(--font-display); font-weight: 750; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1; letter-spacing: -0.01em; color: var(--on-navy); text-decoration: none; font-variant-numeric: tabular-nums; }
.band a.big-phone { text-decoration: none; }
.band a.big-phone:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); font-weight: 400; vertical-align: top; }
.hours th { padding-right: 1rem; font-weight: 700; white-space: nowrap; }
address { font-style: normal; }
.areas { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.22); color: var(--on-navy-soft); }
.areas a { color: var(--on-navy); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--mist); padding-block: 3.5rem 2.5rem; font-size: var(--fs-small); }
.foot-grid { display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand { grid-column: 1 / -1; }
.foot-grid .foot-col:first-of-type { grid-row: span 2; }
@media (min-width: 1080px) {
  .foot-grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
  .foot-grid .foot-col:first-of-type { grid-row: auto; }
}
.foot-brand { display: grid; gap: 0.6rem; align-content: start; }
.foot-brand .brand { margin: 0 0 0.25rem; }
.foot-col h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--gold-ink); letter-spacing: 0; margin-bottom: 0.6rem; }
.foot-col ul { list-style: none; display: grid; gap: 0.1rem; }
.foot-col a { display: inline-block; padding-block: 0.45rem; text-decoration: none; }
.foot-col a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.foot-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* --------------------------------------------------------------------------
   Mobile call bar (appears after the hero's call button scrolls away)
   -------------------------------------------------------------------------- */
.call-bar { display: none; }
@media (max-width: 760px) {
  .call-bar {
    display: flex; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 0.2s ease; visibility: hidden;
  }
  .call-bar.is-visible { transform: none; visibility: visible; }
  .call-bar .btn { flex: 1 1 auto; min-height: 3.25rem; padding-inline: 0.75rem; white-space: nowrap; }
  .call-bar .btn--primary { flex: 2 1 auto; }
  .site-footer { padding-bottom: 6.5rem; }
}
@media (max-width: 359px) { .call-bar .tel { display: none; } }

/* --------------------------------------------------------------------------
   Service pages
   -------------------------------------------------------------------------- */
.crumbs { font-size: var(--fs-small); color: var(--ink-soft); padding-top: 1.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.hero--service .hero-photo img { aspect-ratio: 4 / 5; max-height: 38rem; }
@media (min-width: 960px) { .hero--service .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.two-col { display: grid; gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.two-col--flip { }
@media (min-width: 760px) { .two-col--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.aside-box { border-top: 2px solid var(--navy); padding-top: 1.25rem; display: grid; gap: 0.75rem; }
.aside-box h3 { font-size: 1.25rem; }

.mech { list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,0.22); margin-top: 2rem; }
@media (min-width: 900px) { .mech { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; border-top: 0; } }
.mech li { padding-block: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.22); display: grid; gap: 0.5rem; align-content: start; }
@media (min-width: 900px) { .mech li { border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.22); } }
.pull { margin: 2.5rem 0 0; max-width: 40rem; }
.pull p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.25; color: var(--on-navy); }
.pull footer { margin-top: 0.75rem; color: var(--on-navy-soft); font-size: var(--fs-small); }

.cond-list { list-style: none; display: grid; border-top: 1px solid var(--line); margin-top: 2rem; }
@media (min-width: 760px) { .cond-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.cond-list li { padding-block: 1.1rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.3rem; }
.cond-list h3 { font-size: 1.25rem; color: var(--navy); }
.cond-list p { color: var(--ink-soft); font-size: 1.0625rem; }

.faq { border-top: 1px solid var(--line); max-width: 52rem; margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.1rem 0.25rem; font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; color: var(--navy); min-height: 3.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-size: 1.6rem; line-height: 1; color: var(--gold-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--mist); }
.faq .answer { padding: 0 0.25rem 1.25rem; max-width: 44rem; display: grid; gap: 0.75rem; }

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

/* --------------------------------------------------------------------------
   Shared blocks for service, location and FAQ pages
   -------------------------------------------------------------------------- */
.cond-list--flush { margin-top: 0; }
.hero-photo--wide img { aspect-ratio: 6 / 5 !important; }
.visit-grid--solo { grid-template-columns: minmax(0, 1fr) !important; }
.visit-grid--solo > div { max-width: 52rem; }
.tri-list--cols { column-gap: 2.5rem; }
@media (min-width: 760px) { .tri-list--cols { display: block; columns: 2; } .tri-list--cols li { break-inside: avoid; margin-bottom: 0.6rem; } }

.notice { border-left: 4px solid #9A3412; background: #FBF1EC; padding: 1.1rem 1.25rem; display: grid; gap: 0.5rem; }
.notice h3 { font-size: 1.1875rem; color: #7C2D12; }

.pull--light { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--gold); }
.pull--light p { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; color: var(--navy); }

.refs { max-width: 52rem; display: grid; gap: 0.75rem; }
.refs h2 { font-size: 1.375rem; }
.refs ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--ink-soft); }

.pt-card { display: grid; gap: 1.5rem 2.5rem; align-items: start; }
@media (min-width: 640px) { .pt-card { grid-template-columns: 15rem minmax(0, 1fr); } }
.pt-photo { margin: 0; max-width: 15rem; }
.pt-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pt-text { display: grid; gap: 1rem; max-width: 42rem; }
.pt-text h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }

.hero--faq .hero-copy { max-width: 46rem; }
.hero--faq h1 { max-width: 20ch; }
.faq-layout { display: grid; gap: 2rem 3rem; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 14rem minmax(0, 1fr); } .faq-toc { position: sticky; top: 2rem; align-self: start; } }
.faq-toc ul { list-style: none; display: grid; gap: 0.1rem; margin-top: 0.5rem; }
.faq-toc a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
@media (max-width: 959px) { .faq-toc ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; } }
.faq-cats { display: grid; gap: 3rem; min-width: 0; }
.faq-cat h2 { font-size: 1.625rem; }
.faq-cat .faq { margin-top: 1rem; }
.section--mist .faq summary:hover { background: var(--paper); }

.photo--landscape img { aspect-ratio: 6 / 5; }

/* --------------------------------------------------------------------------
   Homepage hero: business-card portrait (matches Austin's printed cards)
   -------------------------------------------------------------------------- */
.hero-card { margin: 0; min-width: 0; display: grid; gap: 0.75rem; }
.hc-card {
  position: relative; container-type: inline-size; overflow: hidden;
  aspect-ratio: 1491 / 1055; background: #1A1940; color: #fff;
}
.hc-card::before {
  content: ""; position: absolute; left: 0; top: 6.8%; width: 40%; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(217,171,82,0.15));
}
.hc-card::after {
  content: ""; position: absolute; left: 0; bottom: 4.5%; width: 46%; height: 2px;
  background: linear-gradient(90deg, rgba(217,171,82,0.15), var(--gold) 60%, rgba(217,171,82,0.2));
}
.hc-card picture, .hc-card > img { position: absolute; top: 0; right: 0; height: 100%; width: auto; }
.hc-card picture img { height: 100%; width: auto; max-width: none; }
.hc-text {
  position: absolute; left: 4.5%; top: 14%; bottom: 10%; width: 50%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw;
}
.hc-brand { display: flex; align-items: center; gap: 2cqw; font-family: var(--font-display); font-weight: 750; font-size: 3.6cqw; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 2.5cqw; }
.hc-brand img { width: 11cqw; height: auto; }
.hc-name { font-family: var(--font-display); font-weight: 750; font-size: 7.2cqw; line-height: 1; letter-spacing: -0.015em; }
.hc-letters { font-weight: 700; color: var(--gold); font-size: 3.6cqw; letter-spacing: 0.02em; padding-bottom: 2.4cqw; border-bottom: 2px solid rgba(217,171,82,0.55); }
.hc-phone { display: inline-flex; align-items: center; gap: 1.6cqw; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 5.4cqw; margin-top: 1cqw; white-space: nowrap; }
.hc-phone svg { width: 4.6cqw; height: 4.6cqw; color: var(--gold); flex: none; }
.hc-phone:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.hc-card :focus-visible { outline-color: var(--gold); }
.hero-card figcaption { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
@media (min-width: 960px) {
  .hero--home .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hero-card { grid-area: photo; align-self: center; }
}
@media (min-width: 700px) and (max-width: 959px) { .hero-card { max-width: 40rem; } }