/* Cotehele House — shared stylesheet
   Brand values sampled from the printed brochure. Do not alter. */

:root {
  --navy:   #1A2744;
  --forest: #2D4A3E;
  --gold:   #C8A96E;
  --gold-deep: #8A6D2F;   /* gold is unreadable on white — use this on light bands */
  --cream:  #F5F0E8;
  --ink:    #1A1A1A;
  --muted:  #5A5A5A;
  --rule:   rgba(26, 39, 68, 0.14);

  --serif: Georgia, "Times New Roman", serif;
  --sans:  Arial, Helvetica, sans-serif;

  --wrap: 1080px;
  --gut: 28px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.narrow { max-width: 760px; }

/* photo grids run wider than the text column */
.wrap--wide { max-width: 1360px; }

/* ---------- type ---------- */

h1, h2, h3 { font-weight: normal; margin: 0; letter-spacing: -0.01em; }

h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); line-height: 1.12; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); line-height: 1.2; }
h3 { font-size: 1.22rem; line-height: 1.3; }

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

.kicker {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}

.lede { font-size: 1.18rem; line-height: 1.55; }

.fact {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

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

.nav {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav__brand {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* serif, sentence case — ties the bar to the page, which is set in Georgia */
.nav__links a {
  font-family: var(--serif);
  font-size: 1.14rem;
  letter-spacing: 0;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

@media (max-width: 560px) {
  .nav__links { gap: 22px; }
  .nav__links a { font-size: 1.02rem; }
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--gold);
}

/* ---------- bands ---------- */

.band { padding: clamp(48px, 7vw, 88px) 0; }
.band--navy   { background: var(--navy);   color: #fff; }
.band--forest { background: var(--forest); color: #fff; }
.band--cream  { background: var(--cream); }
.band--tight  { padding: clamp(36px, 5vw, 60px) 0; }

.band--navy .kicker,
.band--forest .kicker { color: var(--gold); }

/* ---------- hero ---------- */

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px); }

.hero__name {
  font-size: clamp(2.5rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
}

.hero__inv {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(200,169,110,0.35);
  display: inline-block;
}

.hero__slogan {
  font-size: clamp(1.3rem, 2.9vw, 1.85rem);
  line-height: 1.3;
  margin: 30px 0 28px;
  max-width: 24ch;
  color: rgba(255,255,255,0.95);
}

.hero__choice {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 22px;
  color: rgba(255,255,255,0.93);
}

.hero__choice span { display: block; }

.hero__choice { margin-bottom: 34px; }

/* ---------- photos ---------- */

/* every photo renders at its own ratio — no slot crops a picture any more */
.shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.shot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--rule);
}

.shot--empty span {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.shot--band { aspect-ratio: 4 / 3; }

/* shown at the photo's own ratio — nothing is cropped at any width */
.shot--natural { aspect-ratio: 2996 / 1846; }

/* true panorama — sized to its own ratio so almost nothing is cropped */
.shot--pano { aspect-ratio: 2600 / 1067; }

/* large image contained inside a band rather than full-bleed */
.shot--inset {
  aspect-ratio: 4 / 3;
  border-top: 3px solid var(--gold);
  margin: 32px 0 4px;
}

/* band photos held inside the page width rather than running edge to edge.
   Same gold rule as .shot--inset so the two read as one treatment. */
.shotframe {
  max-width: 1180px;
  margin: 46px auto;
  padding: 0 var(--gut);
}
.shotframe .shot { border-top: 3px solid var(--gold); }

/* held-in band photos run at the camera's own 3:2 rather than 4:3, so they
   read as a band across the page instead of a large square-ish block */
.shotframe .shot--band { aspect-ratio: 3 / 2; }

@media (max-width: 700px) { .shotframe { margin: 30px auto; } }

.shots3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

.shots3 .shot,
.shots3 .shot--empty { aspect-ratio: 4 / 3; border-top-width: 2px; }

/* a photo whose subject is taller than a 4:3 window can keep its own shape;
   the grid row grows to suit rather than cropping the picture */
.shots3 .shot--sq { aspect-ratio: 1 / 1; }

/* four-up: two across on desktop so each photo is large */
.shots4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 22px;
}

.shots4 .shot,
.shots4 .shot--empty { aspect-ratio: 4 / 3; border-top-width: 2px; }

@media (max-width: 520px) {
  .shots4 { grid-template-columns: 1fr; }
}

.shot__cap {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 0;
}

/* ---------- buttons ---------- */

.btns { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--navy);
  transition: background .15s, color .15s;
}

.btn:hover { background: transparent; color: var(--gold); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--navy); }

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

/* ---------- tick lists ---------- */

.ticks { list-style: none; margin: 0; padding: 0; }

.ticks li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

.ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 11px;
  color: var(--gold);
  font-size: 0.95em;
}

.band--navy .ticks li,
.band--forest .ticks li { border-bottom-color: rgba(255,255,255,0.18); }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(26px, 4vw, 52px);
}

.col__head {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--gold);
  margin: 0 0 4px;
}

.band--navy .col__head,
.band--forest .col__head { color: var(--gold); }

/* ---------- product cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  color: #fff;
  text-decoration: none;
  border-top: 4px solid var(--gold);
}

.card--wing { background: var(--forest); }
.card--apts { background: var(--navy); }

.card h3 { font-size: 1.7rem; margin-bottom: 6px; }

.card__sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  color: var(--gold);
  margin-bottom: 18px;
}

.card p { color: rgba(255,255,255,0.9); font-size: 1rem; }

.card__go {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}

.card:hover .card__go { text-decoration: underline; }

/* ---------- audience panels ---------- */

.doors { border-top: 1px solid var(--rule); margin-top: 34px; }

details.door { border-bottom: 1px solid var(--rule); }

details.door > summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 52px;
  position: relative;
  font-size: 1.18rem;
}

details.door > summary::-webkit-details-marker { display: none; }

details.door > summary::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--gold);
}

details.door > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 17px;
  font-size: 1.35rem;
  color: var(--gold);
}

details.door[open] > summary::after { content: "\2013"; }

.door__body { padding: 4px 0 30px 52px; max-width: 68ch; }
.door__body h4 { font-family: var(--serif); font-size: 1.05rem; margin: 20px 0 6px; font-weight: normal; }

/* ---------- distances ---------- */

.dist { list-style: none; margin: 0; padding: 0; }

.dist li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.dist span:last-child { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

.band--navy .dist li { border-bottom-color: rgba(255,255,255,0.18); }
.band--navy .dist span:last-child { color: var(--gold); }

/* ---------- pull quote / terms ---------- */

.terms {
  border-left: 4px solid var(--gold);
  padding: 4px 0 4px 22px;
  margin: 30px 0 0;
  max-width: 62ch;
}

/* ---------- form ---------- */

.form { display: grid; gap: 18px; max-width: 640px; }

.field { display: grid; gap: 6px; }

.field label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.field textarea { min-height: 130px; resize: vertical; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.foot { background: var(--navy); color: rgba(255,255,255,0.8); padding: 54px 0 40px; }
.foot a { color: #fff; }
.foot .kicker { margin-bottom: 10px; }

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.foot__legal {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-family: var(--sans);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.6);
}

/* ---------- misc ---------- */

.crossnav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 10px;
}

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

.stack > * + * { margin-top: 28px; }

/* ---------- lightbox ---------- */

.shot--zoom { cursor: zoom-in; }
.shot--zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 18, 30, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lb[hidden] { display: none; }

.lb__fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lb__img {
  max-width: min(1500px, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-top: 3px solid var(--gold);
}

.lb__cap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

.lb__count { color: var(--gold); letter-spacing: 0.1em; }

.lb__btn {
  position: absolute;
  border: 1px solid rgba(200,169,110,0.5);
  background: rgba(12,18,30,0.6);
  color: var(--gold);
  font-family: var(--sans);
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.lb__btn:hover { background: var(--gold); color: var(--navy); }
.lb__btn[hidden] { display: none; }

.lb__close {
  top: 20px; right: 20px;
  width: 46px; height: 46px;
  font-size: 1.6rem;
}

.lb__prev, .lb__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 68px;
  font-size: 2rem;
}

.lb__prev { left: 18px; }
.lb__next { right: 18px; }

@media (max-width: 640px) {
  .lb { padding: 12px; }
  .lb__img { max-height: 74vh; }
  .lb__prev, .lb__next { width: 42px; height: 54px; font-size: 1.6rem; }
  .lb__prev { left: 6px; }
  .lb__next { right: 6px; }
}

/* ---------- outbound link ---------- */

.outlink { margin: 30px 0 0; }

.outlink a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold);
  transition: color .15s;
}

.outlink a:hover { color: var(--navy); }

.band--navy .outlink a,
.band--forest .outlink a { color: var(--gold); }
.band--navy .outlink a:hover,
.band--forest .outlink a:hover { color: #fff; }

/* ---------- hero choice: two options, then what they share ---------- */

.choice {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 32px;
  max-width: 820px;
  margin: 30px 0 0;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(200, 169, 110, 0.45);
}

/* the hinge between the two options — ruled, so it reads as a choice */
.choice__or {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.choice__or::before,
.choice__or::after {
  content: "";
  width: 1px;
  height: 26px;
  background: rgba(200, 169, 110, 0.5);
}

@media (max-width: 680px) {
  .choice { grid-template-columns: 1fr; }
  .choice__or { flex-direction: row; gap: 12px; justify-self: start; padding: 16px 0; }
  .choice__or::before,
  .choice__or::after { width: 26px; height: 1px; }
}

.choice__opt {
  font-size: 1.16rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.94);
  padding: 18px 0;
  border-top: 1px solid rgba(200,169,110,0.35);
}

.choice__lead {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* the choice block closes with its own rule; the buttons sit clear of it */
.hero .btns { margin-top: 44px; }

/* ---------- Wairarapa strip: 2 x 2, Tripadvisor as the fourth cell ---------- */

.wai { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.wai .shot,
.wai .shot--empty { aspect-ratio: 1400 / 950; border-top-width: 2px; }

/* the Tripadvisor cell matches a photo's height so the grid stays square */
.ta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  aspect-ratio: 1400 / 950;
  padding: 34px 32px;
  background: var(--cream);
  border-top: 2px solid var(--gold);
  text-decoration: none;
}

.ta img { width: 156px; height: auto; }

.ta span {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}

.ta:hover span { color: var(--navy); }

@media (max-width: 700px) {
  .wai { grid-template-columns: 1fr; }
  .ta { aspect-ratio: auto; padding: 30px 26px; }
  .ta span { max-width: 20ch; }
}

/* ---------- audience grid ---------- */

.aud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 40px;
  margin-top: 30px;
}

.aud__item {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: 1.1rem;
  line-height: 1.35;
}

.aud__item span {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- rate figures (homepage enquiry block) ---------- */

.figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  margin: 26px 0 14px;
}
.figs > div {
  padding: 24px 24px 26px;
  border-right: 1px solid var(--rule);
}
.figs > div:last-child { border-right: 0; background: rgba(200, 169, 110, 0.12); }

.figs p { margin: 0; }

.figs .figs__cap {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
}
.figs .figs__n {
  font-family: var(--sans); font-size: 2.5rem; font-weight: bold;
  line-height: 1; color: var(--forest);
}
.figs > div:last-child .figs__n { color: var(--gold-deep); }
.figs .figs__k { font-family: var(--serif); font-size: 1.02rem; margin: 10px 0 4px; }
.figs .figs__s { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .figs { grid-template-columns: 1fr; }
  .figs > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .figs > div:last-child { border-bottom: 0; }
}

/* ---------- enquiry form panel ---------- */

/* the 96 gate photo, veiled almost to white so it reads as texture, not picture */
.form--bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.90), rgba(255,255,255,0.90)),
    url('/img/enquire-bg.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--rule);
  padding: clamp(24px, 4vw, 40px);
}

/* ---------- track record (enquiry section) ---------- */

.rec { border: 1px solid var(--rule); margin-top: 34px; }

.rec__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.rec__row > div { padding: 20px 22px; border-right: 1px solid var(--rule); }
.rec__row > div:last-child { border-right: 0; }

.rec__v {
  font-family: var(--sans); font-size: 1.3rem; font-weight: bold;
  color: var(--forest); margin: 0;
}
.rec__l {
  font-family: var(--sans); font-size: 0.71rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted); margin: 6px 0 0;
}
.rec__t {
  margin: 0; padding: 20px 22px;
  border-top: 1px solid var(--rule);
  background: rgba(45, 74, 62, 0.045);
}

@media (max-width: 860px) { .rec__row { grid-template-columns: repeat(2, 1fr); }
  .rec__row > div:nth-child(2) { border-right: 0; }
  .rec__row > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 480px) { .rec__row { grid-template-columns: 1fr; }
  .rec__row > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .rec__row > div:last-child { border-bottom: 0; } }

/* ---------- rates: dwelling headings + colour coding (matches product cards) ---------- */

.figs__dwell {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin: 40px 0 0;
}
.figs__dwell span {
  display: inline-block;
  margin-left: 14px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 3px;
}
.figs__dwell--wing { color: var(--forest); }
.figs__dwell--apts { color: var(--navy); }

.figs--wing { border-top: 4px solid var(--forest); margin-top: 16px; }
.figs--apts { border-top: 4px solid var(--navy);   margin-top: 16px; }

.figs--apts .figs__n { color: var(--navy); }
.figs--wing > div:last-child .figs__n,
.figs--apts > div:last-child .figs__n { color: var(--gold-deep); }

/* the per-night equivalent is what buyers compare — give it real weight */
.figs__pn {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--ink);
  margin: 4px 0 0;
}
/* ================================================================
   HOMEPAGE ADDITIONS — 11 September 2026
   Three blocks. Every selector below is new; nothing here overrides
   an existing rule.
   ================================================================ */

/* ---------- 1. hero gallery ----------
   Four photos instead of one. Lead frame across the top at 2:1,
   three beneath at 4:3. */

.herogrid { padding: 0 0 6px; }

.herogrid__g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.herogrid__g .shot {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.herogrid__lead { grid-column: 1 / -1; }
.herogrid__g .shot.herogrid__lead { aspect-ratio: 2 / 1; }

@media (max-width: 900px) {
  .herogrid__g { grid-template-columns: 1fr 1fr; }
  .herogrid__g .shot.herogrid__lead { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .herogrid__g { grid-template-columns: 1fr; gap: 8px; }
  .herogrid__g .shot.herogrid__lead { aspect-ratio: 3 / 2; }
}

/* ---------- 2. Wairarapa strip, dialled down ----------
   Was a 2x2 of near-half-page tiles, which made the attractions the
   second biggest picture block on the page. They are not the product. */

.wai { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ta { padding: 20px 18px; gap: 12px; }
.ta img { width: 112px; }
.ta span { font-size: 0.72rem; }

@media (max-width: 900px) { .wai { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 700px) { .ta { aspect-ratio: 1400 / 950; } }

/* below this two tiles are too small to read; the TripAdvisor cell in
   particular goes cramped, so drop to one column */
@media (max-width: 520px) {
  .wai { grid-template-columns: 1fr; }
  .ta { aspect-ratio: auto; padding: 26px 22px; }
}

/* ---------- 3. aerial band above the enquiry form ----------
   Answers "what am I actually booking into" at the moment of
   deciding to make contact. Wide, because an aerial is a wide
   subject — beside the form it reads as a postage stamp. */

.aerialband { margin: 44px 0 30px; }

.aerialband .shot {
  aspect-ratio: 22 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) { .aerialband .shot { aspect-ratio: 16 / 9; } }

/* ---------- 4. how the name is said ----------
   Under the wordmark, deliberately quiet. Someone who cannot say a
   name out loud will not recommend it down a phone, and placement
   coordinators recommend things down phones all day.

   Dots rather than brackets — the page already uses the middot as a
   separator in the line beneath, so it reads as part of the same
   punctuation language instead of an interruption. The sound itself
   is bold and upright so the eye lands on it, not on the label. */

.hero__say {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(200, 169, 110, 0.9);
  margin: 12px 0 0;
}

.hero__say em {
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: rgba(214, 186, 130, 0.98);
}