/* ==========================================================================
   Injury & Performance Chiropractic — styles.css
   Hand-editable. No build step, no preprocessor, no dependencies.
   The whole palette is driven by the custom properties in :root below —
   change a value there and it updates everywhere on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled directly from the logo */
  --navy:        #13294B;
  --navy-dark:   #0B1A32;
  --navy-mid:    #1D3A66;
  --navy-light:  #2E5490;
  --slate:       #5C6773;
  --slate-light: #8A939D;

  /* Accent — brass, used sparingly and reserved for the primary CTA */
  --brass:       #B08D4F;
  --brass-dark:  #92733D;
  --brass-tint:  #F4EEE2;

  /* Neutrals */
  --cream:       #FAF8F4;
  --cream-dark:  #F1EDE6;
  --line:        #E2DED6;
  --line-strong: #CFC9BE;
  --white:       #FFFFFF;
  --ink:         #1B2430;
  --ink-soft:    #48525E;

  /* Feedback */
  --error:       #B3261E;
  --error-bg:    #FDF2F1;
  --success:     #1E6B4F;

  /* Type */
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gutter: 20px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(19, 41, 75, .06), 0 2px 6px rgba(19, 41, 75, .05);
  --shadow-md: 0 2px 6px rgba(19, 41, 75, .07), 0 10px 26px rgba(19, 41, 75, .08);
  --shadow-lg: 0 4px 12px rgba(19, 41, 75, .08), 0 20px 48px rgba(19, 41, 75, .12);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.55vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.42rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { font-weight: 700; color: var(--navy); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: #D9E0EA; }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: .7rem;
}
.section--navy .eyebrow { color: #C3A874; }

.lede { font-size: 1.16rem; color: var(--ink-soft); }

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: .8rem 1.2rem;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 17px; height: 17px; flex: 0 0 auto; }

.btn-primary { background: var(--brass); color: var(--navy-dark); border-color: var(--brass); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-navy:hover { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-lg { padding: .95rem 1.75rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.topbar {
  background: var(--navy);
  color: #B9C4D4;
  font-size: .8rem;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1.5rem;
  padding-block: .48rem;
}
.topbar a { color: #E6EBF2; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-item { display: inline-flex; align-items: center; gap: .42rem; }
.topbar .icon { width: 14px; height: 14px; opacity: .75; }
@media (max-width: 860px) { .topbar-item--hide-sm { display: none; } }

.header-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
  padding-block: .6rem;
}

.brand { flex: 0 0 auto; display: block; line-height: 0; }
.brand img { width: 232px; max-width: 46vw; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: .35rem 0;
  color: var(--navy);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--brass); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.header-actions .btn { padding: .68rem 1.05rem; font-size: .86rem; }

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Header — tablet and mobile.
   The three action buttons (Text to Book, Call, Book Now) stay visible at
   every width; only the page navigation collapses behind the toggle. */
@media (max-width: 1080px) {
  .header-main { flex-wrap: wrap; gap: .75rem 1rem; }
  .nav-toggle { display: inline-flex; order: 3; margin-left: auto; }
  .nav {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
    display: none;
    border-top: 1px solid var(--line);
    padding-top: .5rem;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--line); }
  .nav a:hover { border-bottom-color: var(--line); background: var(--cream); }
  .nav a[aria-current="page"] { color: var(--brass-dark); }
  .header-actions { order: 2; margin-left: auto; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
  /* The sticky header carries the three actions on mobile, so the info bar is
     dropped to keep it short. Address and hours still appear in the footer
     and on the Contact page. */
  .topbar { display: none; }
  .header-main { padding-block: .5rem; }
  .brand { flex-basis: calc(100% - 60px); }
  .brand img { width: 200px; max-width: 62vw; }
  .nav-toggle { order: 1; margin-left: auto; }
  .header-actions { order: 3; flex-basis: 100%; margin-left: 0; gap: .4rem; }
  .header-actions .btn {
    flex: 1 1 0;
    padding: .6rem .3rem;
    min-height: 44px;      /* minimum comfortable touch target */
    font-size: .78rem;
    gap: .34rem;
  }
  .header-actions .btn .icon { width: 15px; height: 15px; }
}

@media (max-width: 380px) {
  .header-actions .btn { font-size: .72rem; letter-spacing: 0; }
  .header-actions .btn .icon { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(155deg, var(--navy-dark) 0%, var(--navy) 52%, var(--navy-mid) 100%);
  color: #D9E0EA;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 88% 8%, rgba(176,141,79,.18), transparent 62%),
    radial-gradient(560px 420px at 4% 100%, rgba(46,84,144,.34), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(3rem, 6.5vw, 5.5rem) 0;
}
@media (min-width: 980px) {
  .hero-inner { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; }
}
.hero h1 { color: #fff; margin-bottom: .55rem; }
.hero h1 em { font-style: normal; color: #D6BB86; }
.hero .hero-sub {
  font-size: clamp(1.04rem, .97rem + .32vw, 1.2rem);
  color: #C2CDDC;
  max-width: 34em;
  margin-bottom: 1.75rem;
}
.hero .btn-row { margin-bottom: 1.75rem; }

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hero-points li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 0;
  font-size: .96rem;
  color: #C7D2E0;
}
.hero-points .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .22rem; color: #C6A867; }

/* Hero side card */
.hero-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.5rem;
  border-top: 4px solid var(--brass);
}
.hero-card h2 {
  font-size: 1.22rem;
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.hero-card .btn { margin-top: 1.1rem; }
.hero-card .card-note { font-size: .85rem; color: var(--slate); margin-top: .9rem; text-align: center; }

.hours-list { margin: 0; font-size: .95rem; }
.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .46rem 0;
  border-bottom: 1px dotted var(--line);
}
.hours-list div:last-child { border-bottom: 0; }
.hours-list dt { color: var(--ink-soft); margin: 0; }
.hours-list dd { margin: 0; font-weight: 700; color: var(--navy); }
.hours-list .is-closed dt { color: var(--slate-light); }
.hours-list .is-closed dd { color: var(--slate-light); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */
.trust-strip { background: var(--cream); border-bottom: 1px solid var(--line); }
.trust-strip ul {
  list-style: none;
  margin: 0;
  padding: 1.15rem 0;
  display: grid;
  gap: .6rem 2rem;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 700px) { .trust-strip ul { grid-template-columns: repeat(4, 1fr); } }
.trust-strip li {
  margin: 0;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.65rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card ul { font-size: .95rem; color: var(--ink-soft); padding-left: 1.1em; }
.card .card-link { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--navy-light); }
.card .card-link:hover { text-decoration: underline; }
.card .card-link::after { content: " \2192"; }

.card-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--brass-dark);
  margin-bottom: 1.1rem;
}
.card-icon .icon { width: 23px; height: 23px; }

.card--flat { background: var(--cream); border-color: transparent; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* Numbered process steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 3px solid var(--line);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brass);
  line-height: 1;
  margin-bottom: .55rem;
}
.steps h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.steps p { color: var(--ink-soft); font-size: .97rem; margin: 0; }
.section--navy .steps li { border-top-color: rgba(255,255,255,.2); }
.section--navy .steps p { color: #BCC7D6; }

/* --------------------------------------------------------------------------
   9. Conditions
   -------------------------------------------------------------------------- */
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pill-list li { margin: 0; }
.pill-list a, .pill-list span {
  display: block;
  padding: .55rem 1.05rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: .91rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.pill-list a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.condition-block {
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .5rem 2.5rem;
  scroll-margin-top: calc(var(--header-h) + 90px);
}
.condition-block:last-child { border-bottom: 0; }
@media (min-width: 860px) { .condition-block { grid-template-columns: 300px 1fr; } }
.condition-block h3 { margin: 0; }
.condition-block p { margin: 0; color: var(--ink-soft); }
.condition-block .tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

/* --------------------------------------------------------------------------
   10. Media / prose blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split--sidebar { grid-template-columns: 1.38fr .62fr; align-items: start; }
}

.figure-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-dark);
  box-shadow: var(--shadow-md);
}
.figure-frame img { width: 100%; display: block; }

/* Portrait photo framing. The source photo is 3:4 with a lot of ceiling at the
   top, so the frame is slightly wider than the source and the crop is pushed
   almost entirely to the top edge. Adjust the second value of object-position
   if you swap in a differently composed photo: 100% crops only from the top,
   0% only from the bottom. */
.figure-frame--portrait img {
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 100%;
}

/* Placeholder shown until real photography is dropped in.
   Replace the .img-placeholder element with a real <img> when photos exist. */
.img-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: repeating-linear-gradient(135deg, var(--cream-dark) 0 14px, var(--cream) 14px 28px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--slate);
  font-size: .85rem;
  letter-spacing: .04em;
}
.img-placeholder span { max-width: 28ch; }
.img-placeholder--portrait { aspect-ratio: 3 / 4; }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.85rem; }
.prose ul { padding-left: 1.15em; }
.prose li { color: var(--ink-soft); }

.callout {
  background: var(--cream);
  border-left: 4px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.4rem;
  margin: 1.75rem 0;
}
.callout p { margin-bottom: 0; font-size: .98rem; color: var(--ink-soft); }
.callout strong { display: block; margin-bottom: .3rem; }

/* Sticky sidebar used on Services / Conditions */
.sidebar-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
}
.sidebar-card h3 { font-size: 1.16rem; }
.sidebar-card p { font-size: .95rem; color: var(--ink-soft); }
.sidebar-card .btn { margin-top: .4rem; }
.sidebar-card ul { list-style: none; padding: 0; margin: 0 0 1.1rem; font-size: .95rem; }
.sidebar-card ul li { padding: .5rem 0; border-bottom: 1px dotted var(--line-strong); margin: 0; }
.sidebar-card ul li:last-child { border-bottom: 0; }
@media (min-width: 900px) { .sidebar-card { position: sticky; top: calc(var(--header-h) + 24px); } }

/* --------------------------------------------------------------------------
   10b. Testimonials

   NOTE: these are displayed only — they are deliberately NOT marked up with
   Review / AggregateRating schema. Google does not allow an organisation to
   host review markup about itself ("self-serving reviews"), and doing so
   risks a structured-data manual action instead of star ratings.
   -------------------------------------------------------------------------- */
.testimonial {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.65rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.section--cream .testimonial { border-color: transparent; box-shadow: var(--shadow-sm); }

.stars {
  color: var(--brass);
  font-size: 1rem;
  letter-spacing: .16em;
  line-height: 1;
  margin-bottom: .9rem;
}

.testimonial blockquote { margin: 0 0 1.35rem; }
.testimonial blockquote p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after  { content: "\201D"; }

.testimonial figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.testimonial .avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.testimonial .who { display: grid; line-height: 1.35; }
.testimonial .who strong { color: var(--navy); font-size: .95rem; }
.testimonial .who span { font-size: .81rem; color: var(--slate); }

/* Lead quote — spans the full grid width above the others */
@media (min-width: 640px) {
  .testimonial--featured { grid-column: 1 / -1; }
}
.testimonial--featured { border-top: 3px solid var(--brass); }
.testimonial--featured blockquote p { font-size: 1.18rem; line-height: 1.5; }

/* Single quote used inline within body copy */
.pull-quote {
  margin: 2rem 0 0;
  padding: 1.4rem 1.6rem;
  background: var(--cream);
  border-left: 4px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pull-quote .stars { margin-bottom: .7rem; }
.pull-quote blockquote { margin: 0 0 .8rem; }
.pull-quote blockquote p {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.pull-quote blockquote p::before { content: "\201C"; }
.pull-quote blockquote p::after  { content: "\201D"; }
.pull-quote figcaption { font-size: .87rem; font-weight: 600; color: var(--slate); }

/* --------------------------------------------------------------------------
   11. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--navy-light); }
.faq .faq-body { padding: 0 2.5rem 1.35rem 0; }
.faq .faq-body p { color: var(--ink-soft); font-size: .99rem; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .38rem; }
.field label { font-size: .89rem; font-weight: 700; color: var(--navy); }
.field .req { color: var(--error); }
.field .hint { font-size: .82rem; color: var(--slate); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C6773' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(46,84,144,.15);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-bg);
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179,38,30,.15);
}

.field-error {
  display: none;
  font-size: .84rem;
  font-weight: 600;
  color: var(--error);
}
.field-error.is-visible { display: block; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 19px; height: 19px; margin-top: .22rem; accent-color: var(--navy); }
.field--check label { font-weight: 500; font-size: .89rem; color: var(--ink-soft); line-height: 1.5; }
.field--check .field-error { grid-column: 1 / -1; }

@media (min-width: 620px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }

.form-status {
  display: none;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 600;
}
.form-status.is-visible { display: block; }
.form-status[data-state="error"] {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid rgba(179,38,30,.28);
}

/* Honeypot — off-screen for humans, filled in by bots */
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   13. Contact / map
   -------------------------------------------------------------------------- */
.contact-methods { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.15rem; }
.contact-methods li { margin: 0; display: flex; gap: .95rem; align-items: flex-start; }
.contact-methods .icon-wrap {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--brass-dark);
}
.contact-methods .icon { width: 19px; height: 19px; }
.contact-methods .label {
  display: block;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate);
}
.contact-methods .value { font-size: 1.04rem; font-weight: 700; color: var(--navy); text-decoration: none; }
.contact-methods a.value:hover { color: var(--navy-light); text-decoration: underline; }
.contact-methods .value--sm { font-size: .98rem; font-weight: 600; line-height: 1.55; }
.contact-methods address { font-style: normal; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.map-frame iframe { width: 100%; height: 400px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #CBD5E2;
  text-align: center;
}
.cta-band .wrap { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.cta-band h2 { color: #fff; margin-bottom: .65rem; }
.cta-band p { max-width: 54ch; margin-inline: auto; margin-bottom: 1.75rem; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-dark); color: #9BA9BC; font-size: .93rem; }
.site-footer .wrap { padding-block: 3.25rem 1.5rem; }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; gap: 3rem; } }

.site-footer img.footer-logo { width: 250px; max-width: 78%; margin-bottom: 1.15rem; }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: #B9C6D6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
  color: #7E8DA1;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom li { margin: 0; }

.footer-disclaimer {
  margin-top: 1.15rem;
  font-size: .78rem;
  line-height: 1.65;
  color: #6E7D91;
  max-width: 82ch;
}

/* --------------------------------------------------------------------------
   16. Page heads, breadcrumbs, utility pages
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}
.page-head h1 { margin-bottom: .5rem; }
.page-head p { max-width: 62ch; color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 0; }

.breadcrumbs { margin-bottom: 1rem; font-size: .82rem; color: var(--slate); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--slate); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }

.centered-page { text-align: center; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.centered-page .btn-row { justify-content: center; }
.centered-page p { max-width: 54ch; margin-inline: auto; }
.centered-page .icon-badge {
  width: 68px; height: 68px;
  margin: 0 auto 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--brass-dark);
}
.centered-page .icon-badge .icon { width: 32px; height: 32px; }

/* Service-area list */
.area-list { columns: 2; column-gap: 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .area-list { columns: 3; } }
.area-list li {
  margin: 0 0 .55rem;
  padding-left: 1.15rem;
  position: relative;
  break-inside: avoid;
  font-size: .96rem;
}
.area-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .btn-row { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}