/* Franklin Farm Reproduction & Performance
   Landing page styles
   ------------------------------------------------------------ */

/* Fonts ---------------------------------------------------------
   Archivo Narrow: all headings, small uppercase labels, navigation,
   buttons and text links. Variable, weights 400-700.
   PT Serif: all running copy, captions and form fields.
   Both SIL Open Font License, self-hosted, no third-party requests.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Archivo Narrow";
  src: url("assets/fonts/archivo-narrow-var.woff2") format("woff2-variations"),
       url("assets/fonts/archivo-narrow-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("assets/fonts/pt-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("assets/fonts/pt-serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("assets/fonts/pt-serif-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #06111F;
  --navy-hover: #18304A;
  --ivory: #EEE7DA;
  --slate: #5B708B;
  --slate-strong: #4A5D75;   /* closed accordion titles: 5.4:1 on ivory */
  --gold: #B28A52;
  --cream: #F8F5EF;
  --charcoal: #202B35;
  --blue-gray: #E3E8EE;

  --hairline: rgba(178, 138, 82, 0.5);
  --hairline-dark: rgba(178, 138, 82, 0.45);

  --sans: "PT Serif", Georgia, "Times New Roman", serif;   /* body face */
  --display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3rem, 5.5vw, 4.75rem);
  --radius: 2px;
  --acc-bleed: clamp(1rem, 1.6vw, 1.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 114px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 94px; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.55em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2.2rem, 4.1vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.005em; }
h4 { font-size: 1.2rem; font-weight: 700; }

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

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

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--navy);
  color: var(--ivory);
  padding: 0.75rem 1rem;
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.bg-cream { background: var(--cream); }
.bg-blue-gray { background: var(--blue-gray); }
.bg-navy { background: var(--navy); color: var(--ivory); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--ivory); }
.bg-navy a { color: var(--ivory); }
.bg-navy a:hover { color: #fff; }

.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}
.bg-navy .eyebrow, .on-dark .eyebrow { color: var(--gold); }

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 42rem;
}

.italic { font-family: var(--display); font-weight: 600; }


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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.9rem 1.7rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--small { min-height: 44px; padding: 0.65rem 1.25rem; font-size: 0.74rem; }

.btn--primary { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--ivory); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: rgba(6, 17, 31, 0.07); color: var(--navy); }

.on-dark .btn--primary, .bg-navy .btn--primary { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.on-dark .btn--primary:hover, .bg-navy .btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }

.on-dark .btn--secondary, .bg-navy .btn--secondary { color: var(--ivory); border-color: var(--ivory); }
.on-dark .btn--secondary:hover, .bg-navy .btn--secondary:hover { background: rgba(238, 231, 218, 0.12); color: var(--ivory); }

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

.text-link {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.text-link:hover { border-bottom-color: currentColor; }

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

/* Scrolled past the hero: warm ivory bar, navy type, soft separation */
.site-header.is-solid {
  background: var(--ivory);
  border-bottom-color: rgba(178, 138, 82, 0.55);
  box-shadow: 0 1px 12px rgba(6, 17, 31, 0.07);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 98px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 72px; width: auto; }

/* Over the hero the cream mark shows; once the bar turns ivory the
   original dark mark takes its place. */
.brand__mark--dark { display: none; }
.site-header.is-solid .brand__mark--light { display: none; }
.site-header.is-solid .brand__mark--dark { display: block; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; gap: 1.45rem; }
.nav__list a {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 200ms ease;
}
.nav__list a:hover { border-bottom-color: var(--ivory); color: var(--ivory); }
.site-header.is-solid .nav__list a { color: var(--navy); }
.site-header.is-solid .nav__list a:hover { border-bottom-color: var(--gold); color: var(--navy); }

/* Header call to action: cream on the image, navy once the bar is solid */
.site-header .btn--primary {
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--ivory);
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}
.site-header .btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.site-header.is-solid .btn--primary { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.site-header.is-solid .btn--primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ivory);
  border-radius: var(--radius);
  color: var(--ivory);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: color 250ms ease, border-color 250ms ease;
}
.site-header.is-solid .nav-toggle { border-color: var(--navy); color: var(--navy); }

@media (max-width: 900px) {
  .site-header__inner { min-height: 78px; }
  .brand img { height: 54px; }
  .nav-toggle { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--ivory);
    border-bottom: 1px solid rgba(178, 138, 82, 0.55);
    box-shadow: 0 8px 20px rgba(6, 17, 31, 0.12);
    padding: 0.5rem var(--gutter) 1.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  /* the open menu is always an ivory panel, so its type is always navy */
  .nav__list a, .site-header.is-solid .nav__list a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(178, 138, 82, 0.4);
    font-size: 1.05rem;
    color: var(--navy);
  }
  .nav .btn--primary,
  .site-header .nav .btn--primary {
    width: 100%;
    background: var(--navy);
    color: var(--ivory);
    border-color: var(--navy);
  }
}

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

.hero {
  position: relative;
  min-height: min(90vh, 880px);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(6, 17, 31, 0.9) 0%, rgba(6, 17, 31, 0.8) 38%, rgba(6, 17, 31, 0.35) 68%, rgba(6, 17, 31, 0.12) 100%),
    linear-gradient(to top, rgba(6, 17, 31, 0.55) 0%, rgba(6, 17, 31, 0.08) 38%, rgba(6, 17, 31, 0.42) 76%, rgba(6, 17, 31, 0.78) 100%);
}

.hero__content {
  padding-block: clamp(5.5rem, 11vw, 8.5rem) clamp(3.5rem, 6.5vw, 5.5rem);
  max-width: 58rem;
}
.hero h1 {
  color: var(--ivory);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: -0.005em;
  line-height: 1.06;
}
.hero h1 .h1-lead { display: block; font-weight: 700; }
.hero h1 .h1-sub  { display: block; font-weight: 500; }
.nowrap { white-space: nowrap; }
.br-lg { display: none; }
@media (min-width: 761px) { .br-lg { display: inline; } }
.hero .lede { color: var(--ivory); font-size: 1.22rem; max-width: 43rem; margin-bottom: 0.9rem; }
.hero__body { color: rgba(238, 231, 218, 0.88); max-width: 38rem; }
.hero .btn-row { margin-top: 2.1rem; }
.hero__support {
  margin-top: 1.5rem;
  font-size: 0.96rem;
  color: rgba(238, 231, 218, 0.8);
}

/* Short, wide windows: the hero copy is bottom-aligned, so on a shallow
   viewport it rises until it meets the fixed bar. Easing the scale here
   keeps clear space between the two. */
@media (min-width: 761px) and (max-height: 860px) {
  .hero__content { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
  .hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
  .hero .lede { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .hero .btn-row { margin-top: 1.4rem; }
  .hero__support { margin-top: 1rem; }
}

@media (max-width: 760px) {
  .hero { display: block; min-height: 0; background: var(--navy); }
  .hero__media { position: relative; inset: auto; z-index: auto; height: 62vw; }
  .hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--navy) 0%, rgba(6, 17, 31, 0.10) 34%, rgba(6, 17, 31, 0.40) 58%, rgba(6, 17, 31, 0.74) 78%, rgba(6, 17, 31, 0.93) 100%);
  }
  .hero::after { display: none; }
  .hero__content { padding-block: 0.25rem 2.75rem; }
}

/* Services: accordion with synced photograph ---------------------- */

.detail { padding-bottom: 0; }

.detail__head { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

.detail__head-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.detail__head h2 { margin-bottom: 0; max-width: none; }
/* a hairline carries the eye across the space beside the heading */
.detail__head-row::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}

.detail__tagline {
  margin: 0.9rem 0 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--charcoal);
  /* wide enough to keep each tagline on a single line on desktop */
  max-width: 58rem;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .detail__head-row { display: block; }
  .detail__head-row::after { display: none; }
}

.acc {
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.acc__list { border-top: 1px solid var(--hairline); }
.acc__item {
  position: relative;
  padding-inline: var(--acc-bleed);
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 114px;
  transition: background-color 260ms ease, border-color 200ms ease;
}
/* a closed row warms slightly under the cursor, and a gold rule wipes in
   along its foot: the list equivalent of the facility cards' hover, without
   lifting rows that are not cards */
.acc__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.acc__item:not(.is-open):hover { background: rgba(178, 138, 82, 0.07); }
.acc__item:not(.is-open):hover::after { transform: scaleX(1); }
.acc__item.is-open {
  background: var(--navy);
  border-bottom-color: var(--navy);
}

.acc__heading { margin: 0; font-family: inherit; font-size: 1rem; font-weight: 400; }

.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 0.95rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.55vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--slate-strong);
  transition: color 200ms ease;
}
.acc__trigger {
  transition: color 200ms ease;
}
.acc__trigger span { transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.acc__item:not(.is-open) .acc__trigger:hover { color: var(--navy); }
.acc__item:not(.is-open) .acc__trigger:hover span { transform: translateX(6px); }
.acc__item:not(.is-open) .acc__trigger:hover::after { transform: rotate(45deg) translate(0, 0); }
.acc__item.is-open .acc__trigger { color: var(--ivory); }

/* Chevron, drawn in CSS so no icon library is needed */
.acc__trigger::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms ease;
}
.acc__item.is-open .acc__trigger::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--gold);
}

.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.acc__panel-inner { padding-bottom: 1.35rem; max-width: 30rem; }
.acc__panel-inner p { font-size: 1rem; }
.acc__item.is-open .acc__panel-inner p { color: rgba(238, 231, 218, 0.92); }
.acc__item.is-open .svc__includes { color: rgba(238, 231, 218, 0.82); }
.acc__item.is-open .text-link { color: var(--ivory); }
.acc__link { margin-top: 1.1rem; }

/* Photograph column */

.acc__media {
  position: relative;
  /* a fixed height keeps the photograph steady as panels open and close,
     instead of resizing with the list beside it */
  height: clamp(420px, 46vw, 660px);
}
.acc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the photographs are wide; bias the crop below centre so the barns and
     ground stay in frame rather than a band of sky */
  object-position: 50% 62%;
  opacity: 0;
  transition: opacity 500ms ease;
}
/* only the layer marked current is shown; the other holds the incoming
   photograph until it has decoded, then the two swap roles */
.acc__img.is-current { opacity: 1; }

/* Mobile photograph lives inside the open panel */
.acc__panel-photo { margin-top: 1.1rem; }
.acc__panel-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.svc__includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  margin-top: 0.9rem;
  font-size: 0.96rem;
  color: var(--charcoal);
}
.svc__includes li { display: inline; }
.svc__includes li::after { content: "\00a0\00a0\00b7\00a0\00a0"; color: var(--gold); }
.svc__includes li:last-child::after { content: ""; }

.svc { scroll-margin-top: 114px; }
.svc h3 { margin-bottom: 0.75rem; }

@media (max-width: 860px) {
  .detail__head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .acc { grid-template-columns: 1fr; }
  .acc__media { display: none; }
  .svc__includes { display: block; }
  .svc__includes li { display: block; padding: 0.35rem 0; border-top: 1px solid var(--hairline); }
  .svc__includes li::after { content: ""; }
  .svc__includes li:last-child { border-bottom: 1px solid var(--hairline); }
}

/* Services CTA */

.services-cta {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--gold);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.services-cta p {
  flex: 1 1 30rem;
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.5;
  margin: 0;
}
/* the two clauses sit on their own lines wherever there is room for them */
.services-cta strong {
  display: block;
  font-weight: 700;
  color: var(--navy);
}
.services-cta .btn { flex: 0 0 auto; }

/* Facility -------------------------------------------------------- */

.fac {
  background: var(--ivory);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

/* entrance photograph, edge to edge */
.fac__entrance { margin: 0; }
.fac__entrance img,
.fac__entrance-video {
  display: block;
  width: 100%;
  /* the width/height attributes reserve space before the file loads, so the
     height is released here or they would win over the aspect ratio */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--navy);
}
.fac__entrance figcaption {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}

/* the three areas of care */

.fac__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.fac__note {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(178, 138, 82, 0.3);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  box-shadow: 0 1px 2px rgba(6, 17, 31, 0.04), 0 10px 24px -14px rgba(6, 17, 31, 0.16);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
/* gold rule along the top edge, drawn in on hover */
.fac__note::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fac__note:hover {
  transform: translateY(-4px);
  border-color: rgba(178, 138, 82, 0.55);
  box-shadow: 0 2px 4px rgba(6, 17, 31, 0.05), 0 20px 38px -18px rgba(6, 17, 31, 0.26);
}
.fac__note:hover::before { transform: scaleX(1); }
.fac__note h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.fac__note p { font-size: 1rem; margin: 0; }

/* gallery */
.fac__gallery {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5.5rem);
}
/* soft fade at the trailing edge so the strip reads as continuing */
.fac__gallery::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(40px, 6vw, 90px);
  background: linear-gradient(to right, rgba(238, 231, 218, 0), var(--ivory));
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}
/* the strip loops, so the trailing fade always applies */
.fac__gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.fac__hint {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}
.fac__gallery-nav { display: flex; gap: 0.5rem; }
.gal-btn {
  width: 48px; height: 48px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  color: var(--ivory);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.gal-btn:hover { background: var(--navy-hover); transform: translateY(-2px); }
.gal-btn[disabled] {
  background: transparent;
  color: var(--slate);
  border-color: rgba(178, 138, 82, 0.45);
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.fac__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100% - 1200px) / 2));
  /* snapping must respect that inset, or the first photo snaps flush to
     the viewport edge instead of sitting on the page grid */
  scroll-padding-inline: max(var(--gutter), calc((100% - 1200px) / 2));
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}
.fac__track::-webkit-scrollbar { display: none; }
.fac__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.fac__track li {
  flex: 0 0 clamp(300px, 46vw, 680px);
  scroll-snap-align: start;   /* so the strip can reach its true end */
}
.fac__track img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fac__track:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.fac__progress {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin: 1.5rem auto 0;
  height: 2px;
  background: rgba(178, 138, 82, 0.28);
  position: relative;
  z-index: 1;
}
.fac__progress span {
  display: block;
  height: 100%;
  width: 18%;
  background: var(--gold);
  transform-origin: left;
  transition: transform 120ms linear;
}

@media (max-width: 900px) {
  .fac__notes { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; }
  .fac__entrance img,
  .fac__entrance-video { aspect-ratio: 16 / 10; }
  .fac__gallery-nav { display: none; }
  .fac__text p { max-width: none; }
}

/* Veterinarian -------------------------------------------------- */

.vet__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.vet__text p { max-width: 36rem; }
.vet__text > p:not(.vet__name):not(.vet__cred) { color: rgba(238, 231, 218, 0.9); }
.vet__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ivory);
  margin: 0 0 0.35rem;
}
.vet__text h2 { margin-bottom: 1.4rem; }

/* Credentials row */
.vet__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin: 2rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(178, 138, 82, 0.45);
}
.vet__stat dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivory);
}
.vet__stat dt {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* the supplied seal is the cream version, made for dark grounds, so it
   sits directly on the navy with no chip behind it. It is sized to the
   same height as the figure-and-label blocks so the row reads as one
   band rather than one item overhanging the others. */
.vet__stat--mark { line-height: 0; display: flex; align-items: center; }
.vet__stat--mark img { width: auto; height: 100%; max-height: 74px; }
.vet__portrait img {
  width: 100%;
  /* the backdrop is cut out of the file itself, so the subject sits
     directly on the page with no box around it. The source is cropped
     flat at the foot, so the last few percent fades into the section. */
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

@media (max-width: 760px) {
  .vet__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* the portrait is capped in width, so it needs centring explicitly */
  .vet__portrait { order: -1; max-width: 320px; margin-inline: auto; }
  .vet__stats { gap: 1.5rem 2rem; }
  /* the seal wraps to its own line here, so it is centred rather than
     left stranded under the two figures */
  .vet__stat--mark {
    flex: 1 0 100%;
    justify-content: center;
    margin-top: 0.25rem;
  }
  .vet__stat--mark img { height: 82px; max-height: none; }
}

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

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact__info .lede { color: rgba(238, 231, 218, 0.9); }

.contact__details {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--gold);
}
.contact__mark {
  display: block;
  height: clamp(74px, 6.5vw, 92px);
  width: auto;
  margin-bottom: 1.1rem;
}
.contact__details strong {
  display: block;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.contact__details .loc { font-family: var(--display); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0.3rem 0 1.4rem; }
.contact__details dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; }
.contact__details dt {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 231, 218, 0.7);
  padding-top: 0.25rem;
}
.contact__details dd { margin: 0; }
.contact__details dd a {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 138, 82, 0.5);
  padding-bottom: 1px;
}
.contact__details dd a:hover { border-bottom-color: var(--gold); }
.tbd { color: rgba(238, 231, 218, 0.6); font-style: italic; }

.form {
  background: rgba(238, 231, 218, 0.06);
  border: 1px solid var(--gold);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form__field { margin-bottom: 1.15rem; }
.form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
  color: var(--ivory);
}
.form label .opt { font-weight: 400; color: rgba(238, 231, 218, 0.7); }
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  min-height: 50px;
}
.form textarea { min-height: 130px; resize: vertical; }
.form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2306111F' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.form .is-invalid { border-color: #C9583A; box-shadow: inset 0 0 0 1px #C9583A; }

.form__error { display: none; margin-top: 0.4rem; font-size: 0.88rem; color: #F2C8B8; }
.form__error.is-visible { display: block; }

.form__status { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--gold); font-size: 0.98rem; display: none; }
.form__status.is-visible { display: block; }
.form__status--success { background: rgba(238, 231, 218, 0.1); }
.form__status--error { background: rgba(201, 88, 58, 0.15); }

.form .btn { width: 100%; margin-top: 0.4rem; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* Page foot, inside the contact section --------------------------- */

.contact__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(178, 138, 82, 0.4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.88rem;
  color: rgba(238, 231, 218, 0.7);
}
.contact__foot p { margin: 0; }

/* Utilities ----------------------------------------------------- */

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

/* Scroll reveal (progressive enhancement; class added by script.js) */

.js-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .acc__img { transition: none !important; }
  .fac__note:hover { transform: none; }
  .fac__note::before { transform: scaleX(1); }
  .acc__trigger:hover span { transform: none !important; }
  .acc__item::after { transform: scaleX(1); }
  .js-reveal { opacity: 1; transform: none; }
  .acc__panel { transition: none !important; }
}