/* ==========================================================================
   FieldHound Outfitters — one-page site
   Component styles. Every value here comes from tokens/ or is an explicit
   literal carried over from the approved design. Layout order matches the
   ten bands in the handoff.
   ========================================================================== */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/surfaces.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

:root{
  /* Presentation config, kept as theme values rather than runtime state.
     --crest-badge: 280–460px. 260px is the design system's hard floor
     wherever the badge is the subject. */
  --crest-badge:380px;
  --nav-height:90px;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow)}

.band{padding-block:var(--section-y)}
.band--page{background:var(--surface-page);background-image:var(--texture-canvas)}
.band--sunken{background:var(--surface-sunken);background-image:var(--texture-canvas)}
.band--dark{background:var(--surface-dark);background-image:var(--texture-canvas-dark)}

.eyebrow{
  font-family:var(--font-eyebrow);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-accent);
}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--gold{color:var(--fh-brass-400)}

.display-2{
  font-family:var(--font-display);
  font-size:var(--fs-display-2);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  color:var(--text-strong);
  margin:0;
}
.display-2 em,
.hero__title em{font-style:italic}
.display-2 em{color:var(--text-accent-strong)}

.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--text-body);
  margin:0;
}

/* Buttons — flat by design; no transforms on hover, only a press scale. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-button);
  text-transform:uppercase;
  text-decoration:none;
  padding:18px 34px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard);
}
.btn:active{transform:scale(var(--press-scale))}

.btn--brass{
  background:var(--accent-secondary);
  border-color:var(--accent-secondary);
  color:var(--fh-ink-900);
}
.btn--brass:hover{
  background:var(--accent-secondary-hover);
  border-color:var(--accent-secondary-hover);
  color:var(--fh-ink-900);
}

.btn--ghost{
  background:transparent;
  border-color:var(--border-on-dark);
  color:var(--text-inverse);
  padding:18px 30px;
}
.btn--ghost:hover{
  background:rgba(249,245,236,.1);
  border-color:var(--fh-oat-100);
  color:var(--text-inverse);
}

.btn--outline{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text-strong);
}
.btn--outline:hover{
  background:var(--accent-primary);
  border-color:var(--accent-primary);
  color:var(--text-inverse);
}

.btn--peat{
  background:var(--accent-primary);
  border-color:var(--accent-primary);
  color:var(--text-inverse);
}
.btn--peat:hover{
  background:var(--accent-primary-hover);
  border-color:var(--accent-primary-hover);
  color:var(--text-inverse);
}

.btn--sm{font-size:var(--fs-caption);padding:14px 24px}
.btn--nav{font-size:var(--fs-eyebrow);padding:11px 20px;white-space:nowrap;flex-shrink:0}
.btn--dogs{font-size:var(--fs-caption);padding:15px 28px}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   1. Sticky header
   -------------------------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(35,42,30,.92);
  backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);
  border-bottom:1px solid var(--border-on-dark);
}

.site-nav{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--sp-3) var(--gutter);
  display:flex;
  align-items:center;
  gap:clamp(var(--sp-4),2vw,var(--sp-8));
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  text-decoration:none;
  flex-shrink:0;
}
.brand__mark{width:44px;height:auto;display:block}
.brand__lockup{display:flex;flex-direction:column;line-height:1.1}
.brand__name{
  font-family:var(--font-display);
  font-size:1.0625rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-inverse);
}
.brand__name em{
  font-style:italic;
  color:var(--fh-brass-400);
  letter-spacing:.02em;
  text-transform:none;
}
.brand__tagline{
  font-size:9px;
  font-weight:var(--fw-semibold);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-inverse-muted);
  margin-top:3px;
}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:clamp(var(--sp-4),2.2vw,var(--sp-8));
  margin:0 0 0 auto;
  padding:0;
  min-width:0;
}
.nav-links a{
  font-size:var(--fs-caption);
  font-weight:var(--fw-medium);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  color:var(--text-inverse-muted);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--text-inverse);border-bottom-color:var(--border-gold)}

.site-nav > .btn--nav{margin-left:auto}

/* Mobile menu toggle — undesigned in the prototype; built to match the nav. */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-left:auto;
  padding:0;
  background:transparent;
  border:1px solid var(--border-on-dark);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:var(--transition-control);
  flex-shrink:0;
}
.nav-toggle:hover{border-color:var(--fh-oat-100)}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:18px;
  height:1px;
  background:var(--text-inverse);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:1px;
  background:var(--text-inverse);
  transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  display:none;
  border-top:1px solid var(--border-on-dark);
  background:rgba(35,42,30,.98);
  backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);
}
.mobile-menu[data-open="true"]{display:block}
.mobile-menu ul{
  list-style:none;
  margin:0;
  padding:var(--sp-2) var(--gutter) var(--sp-6);
  display:flex;
  flex-direction:column;
}
.mobile-menu a{
  display:block;
  padding:var(--sp-4) 0;
  font-size:var(--fs-caption);
  font-weight:var(--fw-medium);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-inverse-muted);
  border-bottom:1px solid var(--border-on-dark);
}
.mobile-menu li:last-child a{border-bottom:0}
.mobile-menu a:hover{color:var(--text-inverse)}

@media (max-width:1040px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav > .btn--nav{margin-left:0}
}
@media (max-width:560px){
  /* Below this the logo lockup and the CTA cannot share a row honestly. */
  .site-nav > .btn--nav{display:none}
  .brand__tagline{display:none}
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:min(92vh,860px);
  display:grid;
  align-items:center;
  background:#1c2118;
  overflow:hidden;
}
.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 50%;
}
.hero__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(28,33,24,.72) 0%,rgba(28,33,24,.28) 30%,rgba(28,33,24,.42) 70%,rgba(28,33,24,.88) 100%),
    linear-gradient(90deg,rgba(28,33,24,.9) 0%,rgba(28,33,24,.62) 34%,rgba(28,33,24,.18) 62%,transparent 82%);
}
.hero__inner{
  position:relative;
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--sp-24) var(--gutter);
  width:100%;
}
.hero__copy{
  max-width:clamp(340px,44vw,620px);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.hero__eyebrow{align-self:flex-start}
.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-display-1);
  font-weight:var(--fw-regular);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  color:var(--text-inverse);
  margin:0;
}
.hero__title em{color:var(--fh-brass-400)}
.hero__lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--text-inverse);
  opacity:.92;
  margin:0;
  max-width:52ch;
}
.hero__actions{
  display:flex;
  gap:var(--sp-5);
  align-items:center;
  flex-wrap:wrap;
  margin-top:var(--sp-3);
}
.hero__cue{
  position:absolute;
  left:50%;
  bottom:var(--sp-8);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  pointer-events:none;
}
.hero__cue span:first-child{
  font-size:9px;
  font-weight:var(--fw-semibold);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-inverse-muted);
}
.hero__cue-bar{
  width:1px;
  height:34px;
  background:linear-gradient(180deg,var(--fh-brass-400),transparent);
  animation:fh-scroll-cue 2.4s var(--ease-in-out-slow) infinite;
}
@keyframes fh-scroll-cue{
  0%{transform:translateY(0);opacity:.15}
  45%{opacity:1}
  100%{transform:translateY(14px);opacity:.15}
}

@media (max-width:768px){
  /* The 44vw measure collapses to nothing on a phone; give the copy the width. */
  .hero__copy{max-width:none}
  .hero__image{object-position:64% 50%}
  .hero__scrim{
    background:linear-gradient(180deg,rgba(28,33,24,.78) 0%,rgba(28,33,24,.5) 35%,rgba(28,33,24,.72) 72%,rgba(28,33,24,.94) 100%);
  }
  .hero__cue{display:none}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
}

/* --------------------------------------------------------------------------
   3. The Story
   -------------------------------------------------------------------------- */

.story__inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-6);
}
.story__inner p{max-width:none}

.ornament{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  width:180px;
}
.ornament span:first-child,
.ornament span:last-child{flex:1;height:1px;background:var(--border-gold-soft)}
.ornament__diamond{color:var(--fh-brass-500);font-size:10px}

.story__body{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-muted);
  margin:0;
}
.story__pull{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  color:var(--text-strong);
  margin:var(--sp-2) 0;
}
.text-link{
  font-size:var(--fs-small);
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  color:var(--text-link);
  text-decoration:none;
  border-bottom:1px solid var(--border-gold-soft);
  padding-bottom:3px;
}
.text-link:hover{color:var(--text-link-hover);border-bottom-color:var(--border-gold)}

/* --------------------------------------------------------------------------
   4. The Hunts
   -------------------------------------------------------------------------- */

.hunts__head{
  text-align:center;
  max-width:720px;
  margin:0 auto var(--sp-16);
}
.hunts__head .eyebrow{display:block;margin-bottom:var(--sp-4)}

.hunts__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--grid-gap);
  align-items:stretch;
}

/* The three cards must read as one set: the client asked specifically that the
   divider lines align across all three. The two min-heights below are what
   hold them level — do not remove them. */
.hunt-card{
  display:flex;
  flex-direction:column;
  background:var(--surface-raised);
  border:1px solid var(--border-hairline);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.hunt-card--featured{
  border-color:var(--border-gold-soft);
  box-shadow:var(--shadow-md);
}

/* Where subgrid is available, every card's three blocks share the grid's row
   tracks, so the dividers stay level at any width however the copy wraps.
   The min-heights below stay as the fallback for browsers without it. */
@supports (grid-template-rows:subgrid){
  .hunt-card{
    display:grid;
    grid-row:span 3;
    grid-template-rows:subgrid;
    row-gap:0;
  }
}

.hunt-card__head{
  padding:var(--sp-8) var(--sp-8) var(--sp-6);
  min-height:300px;
  display:flex;
  flex-direction:column;
}
/* Two lines reserved for the same reason as the title below: "Pheasant · The
   Hard Flush" wraps at three-column widths while "Quail · The Classic" does
   not, which would drop that card's price row by one line. */
.hunt-card__head .eyebrow{
  display:block;
  margin-bottom:var(--sp-3);
  line-height:var(--lh-body);
  min-height:calc(2 * var(--lh-body) * 1em);
}
/* Two lines are reserved whether or not the title uses them. "The Traditional
   Quail Hunt" wraps at three-column widths while the other two titles do not,
   which otherwise drops that card's price row and birds divider by one line.
   The prototype only looked level because at its capture width every title
   happened to fit on one line. */
.hunt-card__title{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-medium);
  color:var(--text-strong);
  margin:0 0 var(--sp-4);
  min-height:calc(2 * var(--lh-heading) * 1em);
}
.hunt-card__price{
  display:flex;
  align-items:baseline;
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
  padding:var(--sp-3) 0;
  border-top:1px solid var(--border-gold-soft);
  border-bottom:1px solid var(--border-gold-soft);
}
/* Brick, not brass: brick holds ~6:1 on white where brass reads ~2.6:1. */
.hunt-card__amount{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:var(--fw-medium);
  line-height:1;
  color:var(--fh-brick-600);
}
.hunt-card__unit{
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--fh-brick-600);
}
/* margin:auto 0 0 pushes the description to the bottom of the fixed-height
   header block — this is what keeps the first divider level across cards. */
.hunt-card__desc{
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  color:var(--text-muted);
  margin:auto 0 0;
  max-width:none;
}

.hunt-card__birds{
  padding:var(--sp-5) var(--sp-8);
  border-top:1px solid var(--border-hairline);
  min-height:210px;
}
.hunt-card__birds .eyebrow{display:block;margin-bottom:var(--sp-3)}
.bird-list{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:var(--sp-4);
  margin:0;
}
.bird-list dt{font-size:var(--fs-small);padding:var(--sp-2) 0}
.bird-list dd{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  color:var(--text-strong);
  text-align:right;
  padding:var(--sp-2) 0;
}
.bird-list dt:not(:first-of-type),
.bird-list dd:not(:first-of-type){border-top:1px solid var(--border-hairline)}
.bird-list dd.is-total{color:var(--text-accent-strong)}

.hunt-card__foot{
  padding:var(--sp-6) var(--sp-8) var(--sp-8);
  margin-top:auto;
}

.hunts__note{
  max-width:760px;
  margin:var(--sp-16) auto 0;
  text-align:center;
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  color:var(--text-strong);
}

/* --------------------------------------------------------------------------
   5. Crest band + The FieldHound Experience
   -------------------------------------------------------------------------- */

.crest{position:relative;overflow:hidden}
.crest__watermark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-52%) scale(6);
  width:380px;
  opacity:.035;
  filter:grayscale(1) blur(3px);
  pointer-events:none;
}
.crest__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-6);
}
.crest__badge{
  width:var(--crest-badge);
  max-width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.45));
}
.crest__inner .eyebrow{margin-top:var(--sp-4)}
.crest__title{
  font-family:var(--font-display);
  font-size:var(--fs-display-2);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  color:var(--text-inverse);
  margin:0;
  text-align:center;
}
.crest__title em{font-style:italic;color:var(--fh-brass-400)}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:var(--sp-16);
  width:100%;
  max-width:1000px;
  margin-top:var(--sp-10);
}
.step{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding-top:var(--sp-5);
  border-top:1px solid var(--border-on-dark);
}
.step__meta{display:flex;align-items:baseline;gap:var(--sp-4)}
.step__num{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  color:var(--fh-brass-400);
  line-height:1;
}
.step__lead{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  color:var(--text-inverse);
  line-height:var(--lh-heading);
}
.step p{
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  color:var(--text-inverse-muted);
  margin:0;
  max-width:none;
}

@media (max-width:900px){
  .steps{gap:var(--sp-10)}
}

/* --------------------------------------------------------------------------
   6. The Dogs
   -------------------------------------------------------------------------- */

.dogs__head{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--sp-6) var(--sp-16);
  align-items:end;
  margin-bottom:var(--sp-12);
}
.dogs__head .eyebrow{display:block;margin-bottom:var(--sp-4)}
.dogs__head .lead{max-width:none}

.collage{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);
}
.collage figure{margin:0;min-width:0}
.collage__frame{
  overflow:hidden;
  background:var(--fh-peat-900);
  height:clamp(200px,21vw,300px);
}
.collage__frame img{width:100%;height:100%;object-fit:cover;display:block}
.collage figure:first-child{grid-column:span 2;grid-row:span 2}
.collage figure:first-child .collage__frame{height:clamp(420px,44vw,620px)}

/* The prototype locks this to four columns at every width. Two steps down. */
@media (max-width:900px){
  .collage{grid-template-columns:repeat(2,1fr)}
  .collage figure:first-child{grid-column:span 2;grid-row:auto}
  .collage figure:first-child .collage__frame{height:clamp(300px,52vw,460px)}
  .collage__frame{height:clamp(160px,26vw,240px)}
}
@media (max-width:520px){
  .collage{grid-template-columns:1fr}
  .collage figure:first-child{grid-column:span 1}
  .collage__frame{height:clamp(200px,58vw,280px)}
}

.dogs__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-6);
  flex-wrap:wrap;
  margin-top:var(--sp-5);
}
.dogs__caption{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Meet Your Guide
   -------------------------------------------------------------------------- */

.guide__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--sp-16);
  align-items:stretch;
}
.guide__figure{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  min-width:0;
}
.guide__frame{flex:1;min-height:520px;overflow:hidden}
.guide__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  display:block;
}
.guide__caption{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:1.7;
}
.guide__body .eyebrow{display:block;margin-bottom:var(--sp-4)}
.guide__body .display-2{margin-bottom:var(--sp-6)}
.guide__body .lead{margin-bottom:var(--sp-5);max-width:none}
.guide__body p{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-muted);
  margin:0 0 var(--sp-5);
  max-width:none;
}
.guide__body p:last-of-type{margin-bottom:var(--sp-8)}
.guide__quote{
  margin:0;
  padding-top:var(--sp-8);
  border-top:1px solid var(--border-hairline);
}
.guide__quote blockquote{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-regular);
  font-style:italic;
  line-height:var(--lh-heading);
  color:var(--text-strong);
  margin:0 0 var(--sp-4);
}

@media (max-width:900px){
  .guide__frame{min-height:clamp(340px,62vw,520px)}
}

/* --------------------------------------------------------------------------
   8. Visit / closing CTA
   -------------------------------------------------------------------------- */

.visit{
  position:relative;
  background:var(--fh-tobacco-800);
  background-image:var(--texture-canvas-dark);
  overflow:hidden;
}
.visit__media{position:relative}
.visit__image{
  display:block;
  width:100%;
  height:clamp(560px,66vw,820px);
  object-fit:cover;
  object-position:50% 42%;
}
/* Tuned so the type clears the flames. */
.visit__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,33,24,.3) 0%,
    rgba(28,33,24,.05) 20%,
    rgba(28,33,24,.1) 34%,
    rgba(28,33,24,.62) 50%,
    rgba(28,33,24,.86) 66%,
    rgba(28,33,24,.96) 100%);
}
.visit__overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:var(--sp-10) var(--gutter) var(--sp-16);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-5);
  text-align:center;
}
.visit__title{
  font-family:var(--font-display);
  font-size:var(--fs-display-2);
  font-weight:var(--fw-regular);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  color:var(--text-inverse);
  margin:0;
}
.visit__title em{font-style:italic;color:var(--fh-brass-400)}
.visit__lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-body);
  color:var(--text-inverse);
  opacity:.92;
  margin:0;
  max-width:52ch;
}
.visit__actions{
  display:flex;
  gap:var(--sp-5);
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:var(--sp-2);
}

@media (max-width:640px){
  /* At phone widths the overlay outgrows the photo; let the band stack. */
  .visit__image{height:clamp(380px,72vw,520px)}
  .visit__overlay{
    position:static;
    padding:var(--sp-8) var(--gutter) var(--sp-12);
    background:linear-gradient(180deg,rgba(28,33,24,.96),var(--fh-peat-900));
    margin-top:-2px;
  }
  .visit__scrim{
    background:linear-gradient(180deg,rgba(28,33,24,.34) 0%,rgba(28,33,24,.1) 30%,rgba(28,33,24,.55) 72%,rgba(28,33,24,.96) 100%);
  }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-footer{
  background:var(--fh-peat-900);
  background-image:var(--texture-canvas-dark);
  padding:var(--section-y-tight) 0 var(--sp-8);
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--sp-12);
  align-items:start;
  padding-bottom:var(--sp-12);
  border-bottom:1px solid var(--border-on-dark);
}
.footer__brand{display:flex;flex-direction:column;gap:var(--sp-5)}
.footer__lockup{display:flex;align-items:center;gap:var(--sp-3)}
.footer__lockup .brand__mark{width:56px}
.footer__blurb{
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  color:var(--text-inverse-muted);
  margin:0;
  max-width:34ch;
}
.footer__col .eyebrow{display:block;margin-bottom:var(--sp-5)}
.footer__col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.footer__col a{
  font-size:var(--fs-small);
  color:var(--text-inverse-muted);
  text-decoration:none;
}
.footer__col a:hover{color:var(--text-inverse)}

.footer__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-6);
  flex-wrap:wrap;
  padding-top:var(--sp-6);
}
.footer__bar span{font-size:var(--fs-caption);color:var(--text-inverse-muted)}
.footer__bar .eyebrow{color:var(--fh-brass-400)}
.footer__legal{display:flex;gap:var(--sp-5)}
.footer__legal a{
  font-size:var(--fs-caption);
  color:var(--text-inverse-muted);
  text-decoration:none;
}
.footer__legal a:hover{color:var(--text-inverse)}