/* ==================================================================
   Emily Evan Kitchens & Interiors
   "The welcome pack, unfolded" — cream paper, hairline gold,
   engraved serif headings, one gold seam through the process.
   ================================================================== */

:root {
  /* colour — sampled from brand artwork */
  --cream:       #f7f2ea;
  --cream-deep:  #efe7db;
  --paper:       #fcfaf5;
  --charcoal:    #2b2b2b;
  --charcoal-2:  #222122;
  --ink:         #34322f;
  --ink-soft:    #6a655c;   /* was #6f6a61: 4.38:1 on cream-deep, now 4.7:1 */
  --gold:        #bc8e4a;
  --gold-deep:   #80602c;   /* was #8f6a33: darkened to reach AA (4.5:1) on every cream */
  --gold-pale:   #dcc49e;
  --gold-lift:   #d3a967;

  /* type */
  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', cursive;

  /* rhythm */
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --pad-inline: clamp(1.25rem, 4vw, 3rem);
  --header-h: 92px;
}

/* ---------- reset-lite ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* NO overflow-x here. Any value other than visible on <body> attaches
     fixed/sticky children to the wrong scroller on mobile: during a touch
     drag the compositor moves them up with the page and they only snap back
     when the gesture ends. Horizontal overflow is clipped at source instead
     (each section that holds a watermark has its own overflow: hidden). */
}
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Guard. The headers are fixed/sticky overlays: a transform on these rows
   moves the logo off its resting place (and makes them the containing block
   for the fixed mobile menu). Nothing should ever transform them, and this
   makes sure a stray animation cannot. */
.hdr3__inner, .hdr3__brand, .hdr3__util {
  transform: none !important;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--cream); padding: .6rem 1.2rem;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* ---------- typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.14;
  text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 3.1vw, 2.85rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: .9em;
  margin-bottom: 1.1rem;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.eyebrow--light { color: var(--gold-pale); }
.eyebrow--gold { color: var(--gold-lift); }

.script {
  font-family: var(--font-script);
  font-size: clamp(2.3rem, 3.6vw, 3.3rem);
  line-height: 1.25;
  color: var(--gold);
  text-wrap: balance;
}
.script--gold { color: var(--gold-lift); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border: 1px solid transparent;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn--gold {
  background: var(--gold);
  color: #221c12;
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--cream); transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(247, 242, 234, .55);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--gold-lift); color: var(--gold-lift); transform: translateY(-2px); }
.btn--lg { padding: 1.2rem 2.6rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  position: relative;
}
.link-arrow i {
  width: 26px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width .35s ease;
}
.link-arrow i::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) scale(.8);
  transform-origin: center;
}
.link-arrow:hover i { width: 40px; }
.link-arrow--lg { font-size: .88rem; }

.site-nav { display: flex; align-items: center; gap: 2.2rem; }
.site-nav__list { display: flex; gap: 1.9rem; }
.site-nav__list a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: .4rem;
  position: relative;
  transition: color .4s ease;
}
.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s ease;
}
.site-nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav__cta { padding: .8rem 1.5rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px; height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--cream);
  margin: 5px auto;
  transition: transform .35s ease, opacity .35s ease, background-color .35s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__media picture { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(198deg, rgba(24, 22, 19, .04) 32%, rgba(24, 22, 19, .72) 84%),
    linear-gradient(0deg, rgba(24, 22, 19, .46) 0%, rgba(24, 22, 19, 0) 36%),
    linear-gradient(180deg, rgba(24, 22, 19, .42) 0%, rgba(24, 22, 19, 0) 24%);
}
.hero__frame {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(220, 196, 158, .38);
  pointer-events: none;
  z-index: 5;
}
.hero__content {
  position: relative;
  z-index: 6;
  padding-bottom: clamp(4.5rem, 9vh, 7rem);
}
.hero__title {
  font-size: clamp(2.55rem, 5vw, 4.3rem);
  color: #fdfaf4;
  line-height: 1.1;
  margin-bottom: 2.2rem;
  max-width: 20ch;
  text-shadow: 0 2px 28px rgba(15, 14, 12, .3);
}
.hero__eyebrow { color: #ecd9b4; text-shadow: 0 1px 14px rgba(15, 14, 12, .45); }
/* each line is a reveal mask; the padding/negative-margin pair extends the
   window downward so g/y descenders aren't clipped, without changing spacing */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
.hero__title .line-inner { display: block; }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__scroll {
  position: absolute;
  right: clamp(2rem, 4vw, 3.4rem);
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.hero__scroll-label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-pale);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px; height: 74px;
  background: linear-gradient(var(--gold-pale), rgba(220, 196, 158, 0));
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: scroll-drip 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes scroll-drip { 60% { top: 100%; } 100% { top: 100%; } }

/* ---------- sections shared ---------- */
.section { padding-block: var(--space-section); position: relative; }
.section--deep { background: var(--cream-deep); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--gold-pale);
}
.section-head__meta {
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.7;
}
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  gap: 0;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head__sub {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* framed imagery — hairline gold inset, like mounted photography */
.frame { position: relative; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame > picture { display: block; width: 100%; height: 100%; }
.frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(252, 250, 245, .55);
  pointer-events: none;
}
.frame--dark::after { border-color: rgba(220, 196, 158, .35); }

/* ---------- welcome ---------- */
.welcome { overflow: hidden; }
.welcome__watermark, .plaque__watermark, .cta__watermark {
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
}
.welcome__watermark {
  position: absolute;
  top: 50%; right: -200px;
  transform: translateY(-50%);
  width: 640px; height: 640px;
  background: url('../img/logo/monogram-gold.png') center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
}
.welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
  position: relative;
}
.welcome__lead { margin-top: 1.9rem; font-size: 1.13rem; line-height: 1.85; }
.welcome__aside {
  margin-top: 2.2rem;
  padding-left: 1.6rem;
  border-left: 1px solid var(--gold-pale);
  color: var(--ink-soft);
  font-size: .98rem;
  max-width: 52ch;
}
.welcome__aside-names {
  margin-top: .7rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.welcome__services { display: flex; flex-direction: column; }
.service { padding-block: 1.55rem; border-top: 1px solid var(--gold-pale); }
.service:last-child { border-bottom: 1px solid var(--gold-pale); }
.service__title { font-size: 1.32rem; margin-bottom: .45rem; }
.service p { color: var(--ink-soft); font-size: .98rem; line-height: 1.7; }

/* ---------- craftsmanship plaque ---------- */
.plaque {
  background: var(--charcoal);
  color: #d8d4cc;
  overflow: hidden;
}
.plaque h2 { color: #f4efe6; }
.plaque__watermark {
  position: absolute;
  bottom: -140px; left: -120px;
  width: 560px; height: 560px;
  background: url('../img/logo/monogram-gold.png') center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.plaque__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
}
.plaque__media { aspect-ratio: 4 / 3.4; }
.plaque__lead { margin-top: 1.4rem; line-height: 1.8; }
.spec-list { margin-top: 1.9rem; }
.spec-list li {
  padding: .95rem 0 .95rem 1.9rem;
  border-top: 1px solid rgba(188, 142, 74, .28);
  position: relative;
  color: #e8e3d9;
  font-size: 1rem;
}
.spec-list li:last-child { border-bottom: 1px solid rgba(188, 142, 74, .28); }
.spec-list li::before {
  content: '';
  position: absolute;
  left: .2rem; top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.plaque__note { margin-top: 1.7rem; font-size: .92rem; color: #a9a49a; max-width: 52ch; }

/* ---------- process ---------- */
.process__steps {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  padding-block: 1rem 0;
}
.process__spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--gold-pale);
}
.process__spine-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: top center;
  transform: scaleY(0);
}
.process__spine::before, .process__spine::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.process__spine::before { top: -4px; }
.process__spine::after { bottom: -4px; }
.step {
  position: relative;
  width: 50%;
  padding-block: 1.4rem;
}
@media (min-width: 701px) {
  .step + .step { margin-top: -5.6rem; }
}
.step--left { left: 0; padding-right: clamp(2.4rem, 5vw, 4.5rem); text-align: right; }
.step--right { left: 50%; padding-left: clamp(2.4rem, 5vw, 4.5rem); }
.step__node {
  position: absolute;
  top: 2.55rem;
  width: 11px; height: 11px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px var(--cream);
}
.step--left .step__node { right: -5.5px; }
.step--right .step__node { left: -5.5px; }
.step__num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .5rem;
}
.step__title { font-size: 1.5rem; margin-bottom: .55rem; }
.step__text { color: var(--ink-soft); font-size: .99rem; line-height: 1.7; }
.step--left .step__text { margin-left: auto; }
.step__text { max-width: 40ch; }
.process__cta { text-align: center; margin-top: 3.2rem; }

/* ---------- other rooms ---------- */
.rooms__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.rooms__lead { margin-top: 1.3rem; color: var(--ink-soft); max-width: 50ch; }
.rooms__list { margin-top: 2.1rem; }
.rooms__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--gold-pale);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--charcoal);
  transition: color .35s ease, padding-left .35s ease;
}
.rooms__list li:last-child a { border-bottom: 1px solid var(--gold-pale); }
.rooms__list a i {
  width: 30px; height: 1px;
  background: currentColor;
  position: relative;
  flex: none;
  transition: width .35s ease;
}
.rooms__list a i::after {
  content: '';
  position: absolute;
  right: 0; top: -3.5px;
  width: 9px; height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.rooms__list a:hover { color: var(--gold-deep); padding-left: .5rem; }
.rooms__list a:hover i { width: 44px; }
.rooms__media { aspect-ratio: 4 / 5; }

/* ---------- testimonial ---------- */
.testimonial__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.testimonial blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 30ch;
  margin-inline: auto;
}
.testimonial__attr {
  margin-top: 1.6rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.testimonial__stars { margin-top: .6rem; color: var(--gold); letter-spacing: .35em; font-size: 1.05rem; }

/* ---------- cta ---------- */
.cta {
  position: relative;
  background: var(--charcoal);
  color: #d8d4cc;
  padding-block: clamp(5rem, 10vw, 8.5rem);
  overflow: hidden;
  text-align: center;
}
.cta h2 { color: #f4efe6; font-size: clamp(2.1rem, 3.6vw, 3.2rem); margin-top: 1.2rem; }
.cta__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  width: 780px; height: 780px;
  background: url('../img/logo/monogram-gold.png') center / contain no-repeat;
  opacity: .045;
  pointer-events: none;
}
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta__lead { margin-top: 1.3rem; max-width: 56ch; color: #b9b4aa; }
.cta__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.cta__phone {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-lift);
  border-bottom: 1px solid rgba(211, 169, 103, .4);
  padding-bottom: 2px;
  transition: border-color .35s ease;
}
.cta__phone:hover { border-color: var(--gold-lift); }
.cta__note {
  margin-top: 2.2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8d887e;
}

/* ---------- footer ---------- */
.site-footer { background: var(--charcoal-2); color: #b3aea4; font-size: .95rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.site-footer__logo { width: 190px; height: auto; margin-bottom: 1.4rem; }
.site-footer__brand p { max-width: 34ch; line-height: 1.7; }
.site-footer__col h3 {
  color: #ece7dd;
  font-size: .82rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(188, 142, 74, .3);
}
.site-footer__col li { padding-block: .34rem; }
.site-footer__col a { transition: color .3s ease; }
.site-footer__col a:hover { color: var(--gold-lift); }
.site-footer__bottom { border-top: 1px solid rgba(188, 142, 74, .22); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2.5rem;
  padding-block: 1.5rem;
  font-size: .82rem;
  color: #868177;
}
/* agency credit: present but quiet, so it sits under the client's line
   rather than competing with it */
.site-footer__credit { white-space: nowrap; }
.site-footer__credit a {
  color: inherit;
  border-bottom: 1px solid rgba(188, 142, 74, .35);
  padding-bottom: 1px;
  transition: color .3s ease, border-color .3s ease;
}
.site-footer__credit a:hover { color: var(--gold-lift); border-color: var(--gold-lift); }

.site-footer__strap { font-family: var(--font-script); font-size: 1.25rem; color: var(--gold); letter-spacing: .02em; }

/* ==================================================================
   responsive
   ================================================================== */
@media (max-width: 1100px) {
  .site-nav__list { gap: 1.3rem; }
  .brand__monogram { width: 74px; }
}

@media (max-width: 980px) {
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    gap: 2.6rem;
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform .5s cubic-bezier(.7, 0, .3, 1), visibility 0s .5s;
    z-index: 110;
  }
  body.nav-open .site-nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform .5s cubic-bezier(.7, 0, .3, 1), visibility 0s;
  }
  .site-nav__list { flex-direction: column; align-items: center; gap: 1.6rem; }
  .site-nav__list a { color: var(--charcoal); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .1em; text-transform: none; font-weight: 400; }
  .nav-toggle { display: block; }

  .welcome__grid, .plaque__grid, .rooms__grid { grid-template-columns: 1fr; }
  .plaque__grid { gap: 3rem; }
  .rooms__media { order: -1; max-width: 560px; }
  .plaque__media { max-width: 640px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

@media (max-width: 700px) {
  :root { --header-h: 74px; }
  /* both selectors need the is-scrolled specificity, or the desktop
     scrolled rule wins here and the mark grows instead of shrinking */
  .brand__monogram,   .brand__name { font-size: 1.18rem; }

  /* process: spine moves to the left rail */
  .process__spine { left: 8px; transform: none; }
  .process__spine::before, .process__spine::after { display: none; }
  .step, .step--left, .step--right {
    width: 100%;
    left: 0;
    padding: 1.1rem 0 1.1rem 2.6rem;
    text-align: left;
  }
  .step--left .step__node, .step--right .step__node { left: 3px; right: auto; }
  .step--left .step__text { margin-left: 0; }
  .step__node { box-shadow: 0 0 0 4px var(--cream); }

  .hero__scroll { display: none; }
  .hero__frame { inset: 12px; }
  .hero__title { max-width: none; }
  /* too long for one line on a phone: wrap it plainly rather than strand
     the diamond markers at opposite edges of a two-line block */
  .hero__eyebrow { display: block; font-size: .62rem; letter-spacing: .18em; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
  /* on its own line once it wraps, so the separator dot never leads a line */
  .site-footer__credit { display: block; margin-top: .3rem; }
  .site-footer__sep { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
  .btn, .rooms__list a { transition: none; }
}

/* ==================================================================
   VERSION 3 header — the full lockup over the photograph, condensing
   to the monogram on a solid bar as you scroll.
   ================================================================== */

.v3 {
  --lockup-w3: 250px;
  --mono-w: 122px;   /* the wreath is wide (2.5:1); smaller and it turns to mush */
  --brand-w: var(--lockup-w3);
  --brand-h: 150px;              /* lockup width / 1.668 */
  --pad-y: 26px;
}
.v3.h3-centre { --lockup-w3: 300px; --brand-h: 180px; --pad-y: 18px; }

.site-header3 {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .45s ease, box-shadow .45s ease;
}
.v3.h3-shrink .site-header3 { position: fixed; }
.v3.h3-shrink main section[id] { scroll-margin-top: 96px; }

/* condensed bar */
.h3-cream .site-header3.is-condensed {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(188, 142, 74, .3);
}
.h3-dark .site-header3.is-condensed {
  background: var(--charcoal);
  box-shadow: 0 1px 0 rgba(188, 142, 74, .3);
}

/* masthead scrim: the cream lockup has to hold up over a bright photograph.
   Fades out as the bar condenses onto its own solid colour. */
.v3 .site-header3::after {
  content: '';
  position: absolute;
  inset: 0 0 -46px 0;
  background: linear-gradient(180deg, rgba(20, 18, 16, .66) 0%, rgba(20, 18, 16, .52) 44%, rgba(20, 18, 16, .3) 72%, rgba(20, 18, 16, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .45s ease;
}
.v3 .site-header3.is-condensed::after { opacity: 0; }

/* brand: the two marks cross-fade inside a box that resizes.
   Concrete px values, not var() indirection: the bar must never depend on
   something that might not interpolate, or the logo appears to jump. */
.hdr3__brand {
  position: relative;
  display: block;
  flex: none;
  width: 250px;
  height: 150px;
  transition: width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1);
}
.h3-centre .hdr3__brand { width: 300px; height: 180px; }
.site-header3.is-condensed .hdr3__brand,
.h3-centre .site-header3.is-condensed .hdr3__brand { width: 122px; height: 49px; }
.hdr3__brand img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .38s ease;
}
.hdr3__lockup { width: var(--lockup-w3); }
.hdr3__monogram { width: var(--mono-w); opacity: 0; }
.site-header3.is-condensed .hdr3__lockup { opacity: 0; }
.site-header3.is-condensed .hdr3__monogram { opacity: 1; }

/* rows — the bar is an authored height in both states, so its contents stay
   optically centred at every point of the transition, including mid-flight */
.hdr3__inner {
  max-width: 1480px;
  margin-inline: auto;
  height: 202px;
  padding: 0 clamp(1.25rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}
.site-header3.is-condensed .hdr3__inner { height: 86px; }
.h3-centre .hdr3__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.4rem, 3vw, 3.2rem);
  height: 216px;
}
.h3-centre .site-header3.is-condensed .hdr3__inner { height: 86px; }
.h3-left .hdr3__nav { margin-left: auto; }

.hdr3__nav ul { display: flex; gap: clamp(1rem, 2.1vw, 2rem); }
.hdr3__nav--l ul { justify-content: flex-end; }
.hdr3__nav--r ul { justify-content: flex-start; }
.hdr3__nav a {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #f3ede3;
  text-shadow: 0 1px 10px rgba(18, 16, 14, .5);
  padding-block: .45rem;
  position: relative;
  white-space: nowrap;
  transition: color .35s ease;
}
.hdr3__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s ease;
}
.hdr3__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.h3-cream .site-header3.is-condensed .hdr3__nav a { color: var(--ink); text-shadow: none; }
.h3-cream .site-header3.is-condensed .hdr3__nav a::after { background: var(--gold-deep); }
.h3-dark .site-header3.is-condensed .hdr3__nav a { color: #ded9d0; text-shadow: none; }
.hdr3__btn { flex: none; padding: .82rem 1.5rem; }

/* transparent utility strip (centre layout only) */
/* height must be in the transition list and share the main bar's timing, or
   the strip collapses instantly and shunts the logo up by its full height */
.hdr3__util {
  border-bottom: 1px solid rgba(220, 196, 158, .28);
  transition: border-color .45s ease, height .45s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}
.hdr3__util-inner {
  max-width: 1480px;
  margin-inline: auto;
  padding: .55rem clamp(1.25rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hdr3__est {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-pale);
  text-shadow: 0 1px 10px rgba(18, 16, 14, .5);
}
.hdr3__util-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.hdr3__util-links > a:first-child {
  font-size: .8rem;
  color: #f3ede3;
  text-shadow: 0 1px 10px rgba(18, 16, 14, .5);
  transition: color .3s ease;
}
.hdr3__util-links > a:first-child:hover { color: var(--gold-lift); }
.hdr3__cta {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #221c12;
  background: var(--gold);
  padding: .55rem 1.15rem;
  transition: background-color .3s ease, color .3s ease;
}
.hdr3__cta:hover { background: var(--gold-deep); color: var(--cream); }
/* the strip folds away once the bar condenses */
.hdr3__util { height: 41px; overflow: hidden; }
.hdr3__util-inner { height: 41px; }
.site-header3.is-condensed .hdr3__util {
  height: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}

/* toggle sits over the photograph, then follows the condensed bar */
.v3 .nav-toggle span { background: #f3ede3; }
.h3-cream .site-header3.is-condensed .nav-toggle span { background: var(--charcoal); }
body.v3.nav-open .nav-toggle span { background: var(--charcoal) !important; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 981px) {
  .v3 .site-nav { display: none; }
}

@media (max-width: 980px) {
  .v3 { --lockup-w3: 215px; --mono-w: 98px; }
  .v3.h3-centre { --lockup-w3: 220px; }
  .hdr3__brand, .h3-centre .hdr3__brand { width: 215px; height: 129px; }
  .site-header3.is-condensed .hdr3__brand,
  .h3-centre .site-header3.is-condensed .hdr3__brand { width: 98px; height: 40px; }
  .hdr3__inner, .h3-centre .hdr3__inner { height: 173px; }
  .site-header3.is-condensed .hdr3__inner,
  .h3-centre .site-header3.is-condensed .hdr3__inner { height: 76px; }
  /* shorter transition: long ones feel laggy against momentum scrolling */
  .hdr3__inner, .hdr3__brand, .hdr3__util { transition-duration: .32s; }
  .hdr3__nav, .hdr3__btn, .hdr3__est { display: none; }
  .h3-left .hdr3__inner { justify-content: space-between; }
  .h3-centre .hdr3__inner {
    display: flex;
    justify-content: center;
    position: relative;
    padding-inline: 58px;
  }
  .h3-centre .nav-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
  .hdr3__util-inner { justify-content: center; padding-inline: 1rem; }
  body.nav-open .site-nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform .5s cubic-bezier(.7, 0, .3, 1), visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr3__brand, .hdr3__brand img, .hdr3__inner, .hdr3__util, .site-header3 { transition: none; }
}

/* ==================================================================
   Paint stability for the fixed/sticky headers.
   Symptom this addresses: the header measures correctly (top 0, no
   transform) but is PAINTED at a stale offset while scrolling, so the
   logo looks like it has jumped to the top edge until something forces
   a repaint. Promoting the bar to its own compositing layer stops the
   browser having to repaint it in step with the scrolling page.
   The mobile menu lives outside <header> precisely so this promotion
   cannot become its containing block.
   ================================================================== */
.site-header3 {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* no `contain: paint` here: it would clip the gradient scrim, which
     deliberately extends below the bar */
}

/* The promoted header is now its own stacking context, so the toggle inside it
   can no longer paint above the menu overlay. Put the header above the menu and
   strip its background while the menu is open, so only the X shows over the
   cream panel — the same appearance as before, but the close button works. */
.site-header3 { z-index: 130; }
body.nav-open .site-header3 {
  background: transparent !important;
  box-shadow: none !important;
}
body.nav-open .site-header3::after { opacity: 0; }
/* With the menu open only the close button should remain: the lockup would
   otherwise sit over the menu items and neither would be readable. */
body.nav-open .hdr3__brand,
body.nav-open .hdr3__util { opacity: 0; pointer-events: none; visibility: hidden; }
/* v2's position rules are more specific, so they need the raised z-index too */
.v3.h3-shrink .site-header3, .v3.h3-plain .site-header3 { z-index: 130; }
/* zero the border too, so the collapsed strip leaves no 1px sliver */
.site-header3.is-condensed .hdr3__util { border-bottom-width: 0; }

/* Safety net for horizontal overflow, applied to the CONTENT, never to <body>.
   The headers are siblings of <main>, so clipping here cannot detach them from
   the viewport the way body-level overflow does on mobile. */
main { overflow-x: clip; }

/* footer: the email address is a long unbreakable token; give it room to wrap
   and drop to two columns before it can push the page wider than the screen */
/* two columns on tablets only: phones keep the single column set earlier */
@media (min-width: 701px) and (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
.site-footer__contact a, .site-footer__col a { overflow-wrap: anywhere; }

/* ==================================================================
   Short screens (iPhone SE and similar). The header is a fixed overlay
   and the hero content is bottom-aligned, so on a short viewport the
   content rides up underneath the logo. Reserve the header's height as
   top padding, and ease the type down so it still fits on one screen.
   ================================================================== */
.v3 .hero__content { padding-top: 218px; }
@media (max-width: 980px) { .v3 .hero__content { padding-top: 190px; } }

@media (max-width: 700px) and (max-height: 720px) {
  .v3 .hero__title { font-size: 2.05rem; }
  .v3 .hero__eyebrow { font-size: .56rem; margin-bottom: .9rem; }
  .v3 .hero__content { padding-top: 178px; padding-bottom: 2.2rem; }
  .v3 .hero__ctas { gap: .65rem; }
  .v3 .btn { padding: .85rem 1.6rem; }
}

/* ==================================================================
   Collections, layout two: large photography with an overlapping card,
   alternating sides. overflow-x is clipped on the section itself so the
   slide-in can start beyond the edge without ever widening the page.
   ================================================================== */
.showcase { background: var(--cream-deep); overflow-x: clip; }
.showcase__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.showcase__row:first-of-type { margin-top: 0; }

.showcase__media {
  grid-row: 1;
  grid-column: 1 / 9;
  aspect-ratio: 3 / 2;
}
.showcase__card {
  grid-row: 1;
  grid-column: 8 / 13;
  z-index: 2;
  background: var(--paper);
  padding: clamp(1.8rem, 3vw, 2.9rem);
  border: 1px solid var(--gold-pale);
  box-shadow: 0 24px 60px rgba(43, 40, 34, .1);
}
.showcase__row--flip .showcase__media { grid-column: 5 / 13; }
.showcase__row--flip .showcase__card  { grid-column: 1 / 6; }

.showcase__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .8em;
}
.showcase__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-pale);
}
.showcase__title { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: .7rem; }
.showcase__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.showcase__meta {
  margin: 1.1rem 0 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-pale);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .showcase__row, .showcase__row--flip { display: block; }
  .showcase__media, .showcase__row--flip .showcase__media { aspect-ratio: 4 / 3; }
  .showcase__card, .showcase__row--flip .showcase__card {
    width: calc(100% - 2.2rem);
    margin: -3.2rem auto 0;
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__media, .showcase__card { transition: none; }
}
/* wider frame for this section so the photography reads large, without any
   100vw maths or negative margins that could reintroduce overflow */
.showcase .container { max-width: 1520px; }

/* ==================================================================
   Inner pages: solid header (no hero photograph behind it) + legal
   page layout. The bar keeps its full lockup and never condenses, so
   its height is fixed and nothing reflows as you scroll.
   ================================================================== */
.v3.h3-solid .site-header3 {
  position: sticky;
  top: 0;
  z-index: 130;
  background: var(--charcoal);
  box-shadow: 0 1px 0 rgba(188, 142, 74, .3);
}
.v3.h3-solid .site-header3::after { display: none; }
/* base first, THEN the narrow override: same specificity, so whichever
   comes last wins. The lockup width is a custom property, so it has to be
   set too or the image overflows a smaller brand box. */
.v3.h3-solid { --lockup-w3: 215px; }
.v3.h3-solid .hdr3__brand { width: 215px; height: 129px; }
.v3.h3-solid .hdr3__inner { height: 150px; }
@media (max-width: 980px) {
  .v3.h3-solid { --lockup-w3: 178px; }
  .v3.h3-solid .hdr3__brand { width: 178px; height: 107px; }
  .v3.h3-solid .hdr3__inner { height: 124px; }
}

/* ---------- legal pages ---------- */
.legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
/* full container width, split into a sticky contents rail and the prose.
   The prose is capped only because legal copy at 1280px runs past 150
   characters a line, which is genuinely unreadable. */
.legal__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0 clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.legal__head { grid-column: 1 / -1; }
.legal__body { min-width: 0; }
.legal__head { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--gold-pale); }
.legal h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.legal__intro {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 1.4vw, 1.16rem);
  line-height: 1.8;
  color: var(--ink-soft);
}
.legal__updated {
  margin-top: 1.4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.legal__toc {
  position: sticky;
  top: 178px;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--cream-deep);
  border-left: 2px solid var(--gold);
}
.legal__toc-title {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.legal__toc ul { display: grid; gap: .4rem; }
.legal__toc a {
  font-size: .96rem;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.legal__toc a:hover { color: var(--gold-deep); border-color: var(--gold-pale); }

.legal__section { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); scroll-margin-top: 170px; }
.legal__body > .legal__section:first-child { margin-top: clamp(2rem, 4vw, 3rem); }
.legal__section h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--gold-pale);
  margin-bottom: 1.2rem;
}
.legal__section h3 {
  font-size: 1.18rem;
  margin-top: 1.7rem;
  margin-bottom: .5rem;
  color: var(--charcoal);
}
.legal__section p { margin-bottom: 1rem; color: var(--ink-soft); line-height: 1.8; }
.legal__section p:last-child { margin-bottom: 0; }
.legal__section a:not(.link-arrow) {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-pale);
  transition: border-color .3s ease;
}
.legal__section a:not(.link-arrow):hover { border-color: var(--gold-deep); }

.legal__list { margin: 0 0 1rem; }
.legal__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: .15rem; top: .72em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.legal__table-wrap { overflow-x: auto; margin-bottom: 1.2rem; }
.legal__table { width: 100%; border-collapse: collapse; min-width: 460px; }
.legal__table th, .legal__table td {
  text-align: left;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--gold-pale);
  vertical-align: top;
  font-size: .97rem;
  line-height: 1.65;
}
.legal__table th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.legal__table td { color: var(--ink-soft); }

.legal__note {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  background: var(--cream-deep);
  border-left: 2px solid var(--gold);
  color: var(--ink) !important;
}

.legal__contact { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 1.4rem; }
.legal__contact-item { display: block; }
.legal__contact-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .3rem;
}
.legal__contact-value {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold-pale);
  padding-bottom: 2px;
  transition: border-color .3s ease, color .3s ease;
}
.legal__contact-item:hover .legal__contact-value { color: var(--gold-deep); border-color: var(--gold-deep); }
.legal__back { margin-top: 2.4rem; }

@media (max-width: 900px) {
  .legal__inner { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__toc ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem 2rem; }
}

/* the footer legal link sits on its own line once the bar wraps */
@media (max-width: 700px) {
  .site-footer__legal { display: block; margin-top: .3rem; }
}

/* Tablet-to-laptop gap: the full lockup plus six nav items plus the button
   do not fit between about 980px and 1260px. Drop the button (the menu and
   the Contact link both still reach it) and tighten the nav. */
@media (max-width: 1260px) {
  .hdr3__btn { display: none; }
  .hdr3__nav a { font-size: .72rem; letter-spacing: .11em; }
  .hdr3__nav ul { gap: 1rem; }
}

/* ---------- footer: social icons + legal entity ---------- */
.social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(188, 142, 74, .38);
  color: #b3aea4;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.social svg { width: 17px; height: 17px; display: block; }
.social a:hover {
  color: #221c12;
  background: var(--gold);
  border-color: var(--gold);
}

.site-footer__entity {
  padding-bottom: 1.5rem;
  margin-top: -.3rem;
  font-size: .74rem;
  line-height: 1.7;
  color: #6f6a61;
  max-width: 92ch;
}

/* ==================================================================
   Review slideshow. One quote at a time, kept in the speech-mark
   style the client already liked. Quotes are stacked and cross-faded
   rather than slid, so the section height never jumps between a short
   quote and a long one.
   ================================================================== */
.testimonial__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.testimonial__head .eyebrow { justify-content: center; }

.quotes { max-width: 900px; margin-inline: auto; }
.quotes__viewport { position: relative; display: grid; }
.quote {
  grid-area: 1 / 1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;
}
.quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}
.quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.55;
  color: var(--charcoal);
  text-wrap: pretty;
}
.quote figcaption {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.quote__who {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.quote__stars { color: var(--gold); letter-spacing: .3em; font-size: .95rem; }

.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.quotes__arrow {
  width: 42px; height: 42px;
  border: 1px solid var(--gold-pale);
  background: none;
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease, background-color .3s ease;
}
.quotes__arrow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid var(--gold-deep);
  border-right: 1px solid var(--gold-deep);
  transition: border-color .3s ease;
}
.quotes__arrow--next::after { transform: translate(-65%, -50%) rotate(45deg); }
.quotes__arrow--prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.quotes__arrow:hover { border-color: var(--gold); background: var(--cream-deep); }

.quotes__dots { display: flex; gap: .6rem; }
.quotes__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid var(--gold-deep);
  background: none;
  transform: rotate(45deg);
  cursor: pointer;
  transition: background-color .3s ease;
}
.quotes__dot.is-active { background: var(--gold); }

.quotes__source { text-align: center; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); }

@media (prefers-reduced-motion: reduce) {
  .quote { transition: opacity .01s, visibility 0s; transform: none; }
}

/* ==================================================================
   Inner page heroes (About, Contact). Shorter than the homepage hero
   because there is no scroll cue and no CTA pair to fit underneath.
   ================================================================== */
.hero--page { min-height: max(520px, 74vh); }
.hero--short { min-height: max(440px, 58vh); }
.v3 .hero--page .hero__content { padding-bottom: clamp(3rem, 6vh, 5rem); }
.hero--page .hero__title { margin-bottom: 0; }

/* ---------- page intro ----------
   The script line gets the full container so it stays on one line: the longest
   of them measures 822px against 1184px of container at desktop, and the vw
   term in the clamp shrinks it in step with narrower viewports. Underneath,
   the lead and the at-a-glance list share the row so neither is stranded. */
/* The at-a-glance list sits beside the script heading, not beside the body copy,
   so its first rule lines up with the top of the heading. That means every
   script line has to fit the 7fr column on one line: the longest measures 636px
   against 707px of column at desktop. */
.about__intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}
.about__lead {
  margin-top: clamp(1.5rem, 2.6vw, 2.2rem);
  font-size: clamp(1.04rem, 1.3vw, 1.14rem);
  line-height: 1.85;
  color: var(--ink-soft);
}
.about__lead--next { margin-top: 1.1rem; }
.intro__facts {
  list-style: none;
  padding: 0;
  /* drops the top rule to roughly the cap height of the script line beside it */
  margin: .85rem 0 0;
  border-top: 1px solid var(--gold-pale);
}
/* flex rather than an inline ::before, so a line that wraps keeps its text
   aligned under the first line instead of running back under the rule */
.intro__facts li {
  display: flex;
  gap: .8rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--gold-pale);
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.intro__facts li::before {
  content: '';
  flex: 0 0 16px;
  height: 1px;
  margin-top: .72em;
  background: var(--gold);
}
@media (max-width: 860px) {
  .about__intro { grid-template-columns: 1fr; }
  .intro__facts { margin-top: 1.9rem; }
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.pillar { padding-top: 1.4rem; border-top: 1px solid var(--gold-pale); }
.pillar__num {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--charcoal);
  margin-bottom: .6rem;
}
.pillar__text { color: var(--ink-soft); font-size: .98rem; line-height: 1.75; }
.pillar__text + .pillar__text { margin-top: .8rem; }

/* ---------- contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.contact__lead { margin-top: 1rem; color: var(--ink-soft); max-width: 60ch; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.form__field { margin-bottom: 1.3rem; }
.form label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .5rem;
}
.form .req { color: var(--gold); font-size: .6em; vertical-align: middle; margin-left: .2em; }
.form .opt { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-soft); margin-left: .2em; }
.form input, .form select, .form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--gold-pale);
  padding: .9rem 1rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.form textarea { resize: vertical; min-height: 150px; line-height: 1.7; }
.form select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(188, 142, 74, .15);
}
.form__field.is-invalid input, .form__field.is-invalid select, .form__field.is-invalid textarea {
  border-color: #a4442f;
  background: #fdf6f4;
}
.form__err { margin-top: .45rem; font-size: .86rem; color: #a4442f; }
.form__privacy { margin-top: 1.2rem; font-size: .86rem; color: var(--ink-soft); }
.form__privacy a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-pale); }

/* honeypot: off-screen rather than display:none, which some bots detect */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-alert {
  margin-bottom: 1.6rem;
  padding: 1rem 1.2rem;
  background: #fdf6f4;
  border-left: 2px solid #a4442f;
  color: #7c3323;
  font-size: .95rem;
}
.form-thanks { padding: clamp(1.8rem, 3vw, 2.6rem) 0; }
.form-thanks h2 { margin-bottom: .9rem; }
.form-thanks p { color: var(--ink-soft); margin-bottom: .9rem; max-width: 56ch; }
.form-thanks a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-pale); }
.form-thanks__next a { border: 0; }
.script--sent { margin-bottom: .6rem; }

.contact__aside { display: grid; gap: 1.2rem; }
.contact__card {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--cream-deep);
  border-left: 2px solid var(--gold);
}
.contact__card--quiet { background: none; border-left-color: var(--gold-pale); }
.contact__card-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .9rem;
}
.contact__big {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  color: var(--charcoal);
  transition: color .3s ease;
}
.contact__big:hover { color: var(--gold-deep); }
.contact__small {
  display: block;
  margin-top: .5rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--gold-pale);
  word-break: break-word;
}
.contact__note { margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); }
.contact__steps { counter-reset: step; list-style: none; }
.contact__next p { color: var(--ink-soft); font-size: .95rem; }
.contact__next p + p { margin-top: .7rem; }
.contact__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
.contact__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  color: var(--gold-deep);
}
.social--light a { border-color: var(--gold-pale); color: var(--ink-soft); }
.social--light a:hover { color: #221c12; background: var(--gold); border-color: var(--gold); }

/* ---------- service area map ---------- */
.map-wrap { margin-top: clamp(2rem, 3.5vw, 3rem); }
.map {
  max-width: 860px;          /* near-square, so the radius fills the frame */
  margin-inline: auto;
  height: clamp(360px, 52vh, 520px);
  border: 1px solid var(--gold-pale);
  background: var(--cream);
  z-index: 0;                     /* keep tiles under the sticky header */
}
.map .leaflet-container { font-family: var(--font-body); }
.map__note {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
}

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

/* ==================================================================
   Director portraits. They sit over the corner of the large photo on
   the About page and fly in as each row arrives. Absolute placement is
   desktop only: on a narrow screen they take their turn in the flow.
   ================================================================== */
.showcase__row { position: relative; }
.portrait {
  position: absolute;
  bottom: -26px;
  width: clamp(150px, 15vw, 205px);
  z-index: 3;
  background: var(--paper);
  padding: 10px 10px 0;
  border: 1px solid var(--gold-pale);
  box-shadow: 0 22px 50px rgba(43, 40, 34, .22);
}
.portrait--left  { left: clamp(1rem, 3vw, 3rem); }
.portrait--right { right: clamp(1rem, 3vw, 3rem); }
.portrait img { width: 100%; height: auto; display: block; }
.portrait figcaption {
  padding: .65rem .2rem .8rem;
  text-align: center;
}
.portrait__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--charcoal);
  line-height: 1.2;
}
.portrait__role {
  display: block;
  margin-top: .2rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.showcase__quote {
  margin: 1.1rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--charcoal);
}

/* ---------- our story split ---------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.story__text { margin-top: 1.2rem; color: var(--ink-soft); line-height: 1.85; }
.story__media { aspect-ratio: 4 / 3.2; }

@media (max-width: 900px) {
  .portrait {
    position: static;
    width: 170px;
    margin: -3.6rem auto 1.4rem;
    box-shadow: 0 14px 34px rgba(43, 40, 34, .18);
  }
  .portrait--left, .portrait--right { left: auto; right: auto; }
  .story__grid { grid-template-columns: 1fr; }
  .story__media { order: -1; max-width: 560px; }
}

/* ==================================================================
   Inspiration: scroll reel, drifting strip, lightbox
   ================================================================== */
.lightbox {
  /* the widest the picture can ever be. The arrows are anchored to this rather
     than to the picture, so a narrow portrait shot does not pull them inwards
     and leave you clicking the backdrop where the button used to be. */
  --lb-max: min(1100px, 74vw);
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18, 16, 14, .94);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { max-width: var(--lb-max); text-align: center; }
.lightbox__figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border: 1px solid rgba(220, 196, 158, .3);
}
.lightbox__figure figcaption {
  margin-top: 1rem;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.lightbox__close {
  position: absolute;
  top: clamp(.8rem, 2vw, 1.6rem);
  right: clamp(.8rem, 2vw, 1.6rem);
  width: 46px; height: 46px;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(220, 196, 158, .35);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.lightbox__close:hover { color: var(--gold-lift); border-color: var(--gold-lift); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px; height: 48px;
  background: rgba(18, 16, 14, .5);
  border: 1px solid rgba(220, 196, 158, .35);
  cursor: pointer;
  transition: border-color .3s ease;
}
/* half the max picture width out from the centre line, plus a gap: fixed
   whatever is on screen, and unaffected by a caption that runs to two lines */
.lightbox__nav--prev { right: calc(50% + var(--lb-max) / 2 + clamp(.5rem, 1.6vw, 1.4rem)); }
.lightbox__nav--next { left:  calc(50% + var(--lb-max) / 2 + clamp(.5rem, 1.6vw, 1.4rem)); }

/* below this there is no room beside the picture, so anchor to the viewport
   edges instead. Still fixed, just a different fixed place. */
@media (max-width: 1000px) {
  /* no room beside the picture, so give the picture the width back and put the
     arrows on the viewport edges instead. Still fixed, just a different fixed place. */
  .lightbox { --lb-max: min(1100px, 88vw); }
  .lightbox__nav--prev { right: auto; left: clamp(.35rem, 1.4vw, 1rem); }
  .lightbox__nav--next { left: auto; right: clamp(.35rem, 1.4vw, 1rem); }
}
.lightbox__nav::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-top: 1px solid var(--gold-pale);
  border-right: 1px solid var(--gold-pale);
}
.lightbox__nav--next::after { transform: translate(-65%, -50%) rotate(45deg); }
.lightbox__nav--prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.lightbox__nav:hover { border-color: var(--gold-lift); }

/* ---------- colour swatches ---------- */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.swatch__chip {
  display: block;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(43, 40, 34, .12);
}
.swatch figcaption { padding-top: .9rem; }
.swatch__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--charcoal);
}
.swatch__note {
  display: block;
  margin-top: .3rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.swatches__note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-size: .86rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- process step note ---------- */
.step__note {
  margin-top: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- testimonial stories page ---------- */
.stories { padding-top: clamp(3rem, 6vw, 5rem); }
.stories .legal__head { border-bottom: 1px solid var(--gold-pale); padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.story {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
  border-bottom: 1px solid var(--gold-pale);
}
.story:last-of-type { border-bottom: 0; }
.story__mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: .8;
  color: var(--gold-pale);
}
.story__kind {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .7rem;
}
.story h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); margin-bottom: 1.1rem; }
.story__para { color: var(--ink-soft); line-height: 1.85; margin-bottom: .9rem; max-width: 74ch; }
.story__stars { color: var(--gold); letter-spacing: .3em; margin-top: .4rem; }

@media (max-width: 700px) {
  .story { grid-template-columns: 1fr; gap: .4rem; }
  .story__mark { line-height: .6; }
}

/* ==================================================================
   Kitchens: per-collection slideshow
   Plain CSS transitions driven by a class, so the images still cycle if
   GSAP fails to load. The slow scale on the active slide gives the drift.
   ================================================================== */
.styleshow { position: relative; }
.styleshow__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream-deep);
}
.styleshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* doubled, so the dissolve overlaps most of the 3s dwell and the images
     read as one continuous drift rather than a sequence of cuts */
  transition: opacity 1.9s ease;
}
.styleshow__slide.is-on { opacity: 1; z-index: 1; }
.styleshow__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.075);
  transition: transform 5s linear;
}
.styleshow__slide.is-on img { transform: scale(1); }
.styleshow__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(28, 26, 23, .72), rgba(28, 26, 23, 0));
}
.styleshow__bar {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2.2vw, 1.5rem);
}
.styleshow__dots { display: flex; gap: .5rem; flex: 0 0 auto; }
.styleshow__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid rgba(252, 250, 245, .75);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.styleshow__dot[aria-current="true"] { background: var(--gold-lift); border-color: var(--gold-lift); transform: scale(1.2); }
.styleshow__arrows { display: flex; gap: .45rem; flex: 0 0 auto; }
.styleshow__arrow {
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid rgba(252, 250, 245, .5);
  background: rgba(28, 26, 23, .3);
  color: #fcfaf5;
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease, background .3s ease;
}
.styleshow__arrow:hover { border-color: var(--gold-lift); background: rgba(28, 26, 23, .55); }
.styleshow__arrow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.styleshow__arrow--next::after { transform: translate(-70%, -50%) rotate(45deg); }
.styleshow__arrow--prev::after { transform: translate(-30%, -50%) rotate(-135deg); }

/* No captions since 2026-09-25 (client asked for the photos alone): on a phone
   the dots sit left and the arrows right. */
@media (max-width: 700px) {
  .styleshow__bar { gap: .8rem; padding: .85rem; }
  .styleshow__dots { flex: 1 1 auto; }
  .styleshow__arrow { width: 32px; height: 32px; }
  .styleshow__scrim { height: 34%; }
}
@media (max-width: 420px) {
  .styleshow__dot { width: 8px; height: 8px; }
  .styleshow__dots { gap: .38rem; }
}

/* ==================================================================
   Inspiration: full-bleed scroll reel
   Default styling is a plain stack of large images, which is what a
   visitor gets with no JS or with reduced motion. `.is-live` upgrades it
   to the pinned, cross-dissolving version.
   ================================================================== */
.reel { position: relative; background: var(--charcoal); }
.reel__slide { position: relative; margin: 0; }
.reel__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.reel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(24, 22, 20, .82) 0%, rgba(24, 22, 20, .2) 34%, rgba(24, 22, 20, 0) 62%),
    linear-gradient(to right, rgba(24, 22, 20, .5), rgba(24, 22, 20, 0) 55%);
}
.reel__cap {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.6rem, 4vw, 3.2rem);
  color: #fcfaf5;
}
.reel__count {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--gold-lift);
  margin-bottom: .8rem;
}
.reel__count i { font-style: normal; opacity: .5; margin: 0 .35rem; }
.reel__cap h3 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  color: #fcfaf5;
  margin-bottom: .7rem;
}
.reel__cap p.reel__meta {
  font-size: max(var(--fs-body), min(1.2vw, 1.12rem));
  color: rgba(252, 250, 245, .8);
  max-width: 46ch;
}

.reel.is-live .reel__track { position: relative; height: calc(var(--n) * 78vh); }
.reel.is-live .reel__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.reel.is-live .reel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.reel.is-live .reel__media { aspect-ratio: auto; height: 100%; }
.reel__progress {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(252, 250, 245, .16);
  display: none;
}
.reel.is-live .reel__progress { display: block; }
.reel__progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ==================================================================
   Inspiration: drifting strip
   ================================================================== */
.strip { overflow: hidden; padding: clamp(.5rem, 1.4vw, 1rem) 0; }
.strip__row { overflow: hidden; padding: .45rem 0; }
.strip__track {
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  width: max-content;
  animation: strip-drift 78s linear infinite;
  will-change: transform;
}
.strip__row--back .strip__track { animation-direction: reverse; animation-duration: 96s; }
.strip:hover .strip__track, .strip:focus-within .strip__track { animation-play-state: paused; }
@keyframes strip-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.strip__item {
  flex: 0 0 auto;
  width: clamp(210px, 24vw, 340px);
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.strip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.22, .8, .3, 1), filter .5s ease;
}
.strip__item::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(252, 250, 245, .55);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.strip__item:hover img, .strip__item:focus-visible img { transform: scale(1.07); }
.strip__item:hover::after, .strip__item:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
  .styleshow__slide img { transition: none; transform: none; }
}

/* ten full-screen slides is a long pinned run on a phone, so shorten the
   dwell per slide rather than dropping images from the sequence */
@media (max-width: 700px) {
  .reel.is-live .reel__track { height: calc(var(--n) * 62vh); }
}

/* The slides carry z-index so they stack in order, which was painting them over
   the frame's inset rule and making it vanish the moment a slide changed.
   Lift the rule above the whole slideshow. */
.showcase__media.frame::after { z-index: 5; }

/* an emphasised word inside a heading */
.stress { font-style: italic; font-weight: 600; }

/* a section carrying only a heading does not need the full run-out beneath it */
.section--head-only { padding-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }
.section--head-only .section-head { margin-bottom: 0; }

/* ---------- reel: right-hand rail ----------
   A fixed-width column so the diamonds and the scroll indicator share one
   vertical axis rather than each being positioned off the viewport edge. */
.reel__rail {
  position: absolute;
  z-index: 4;
  right: clamp(.9rem, 2.6vw, 2.4rem);
  top: 0; bottom: 0;
  width: 46px;
  display: none;
  align-items: center;
  justify-content: center;
}
.reel.is-live .reel__rail { display: flex; }
.reel__dots { display: flex; flex-direction: column; align-items: center; gap: .95rem; }
.reel__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid rgba(252, 250, 245, .8);
  background: rgba(24, 22, 20, .28);
  transform: rotate(45deg);
  cursor: pointer;
  /* half these photographs are pale, and an unfilled outline vanishes against
     them, so each diamond carries its own shadow */
  box-shadow: 0 1px 5px rgba(24, 22, 20, .55);
  transition: background-color .35s ease, border-color .35s ease, transform .35s ease;
}
.reel__dot:hover { border-color: var(--gold-lift); }
.reel__dot[aria-current="true"] {
  background: var(--gold);
  border-color: var(--gold);
  transform: rotate(45deg) scale(1.45);
}
.reel__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 3vw, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
@media (max-width: 700px) {
  .reel__rail { width: 32px; right: .55rem; }
  .reel__dots { gap: .7rem; }
  .reel__dot { width: 7px; height: 7px; }
  .reel__scroll { display: none; }
}

/* ---------- strip: driven by rAF once JS is up ----------
   The CSS animation is the no-JS fallback. It cannot ease between speeds
   (changing animation-duration mid-flight jumps, because progress is elapsed
   time over duration), and it cannot be dragged, so JS takes over. */
.strip.is-live .strip__track { animation: none; }
.strip.is-live .strip__row { cursor: grab; touch-action: pan-y; }
.strip.is-live .strip__row.is-dragging { cursor: grabbing; }
.strip.is-live .strip__row.is-dragging img { transform: none; }

/* ---------- page transition ----------
   `.pf` is set by a tiny inline script in the head, before first paint, and only
   when motion is welcome. With scripting off the cover is never shown at all.
   The lift is a CSS animation rather than JS so the page still uncovers itself
   if main.js fails to load. */
.pagefade {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pagefade__mark {
  width: clamp(118px, 16vw, 210px);
  aspect-ratio: 438 / 178;
  background: url('../img/logo/monogram-gold.png') center / contain no-repeat;
}
/* A brief beat covered while the new page loads underneath, then a one second
   lift, so the whole thing reads as a fade rather than a logo screen. With the
   one second fade on the way out that is about 2.1s door to door, and the load
   overlaps the hold rather than adding to it. */
.pf .pagefade {
  opacity: 1;
  visibility: visible;
  animation: pf-lift 1s cubic-bezier(.4, 0, .2, 1) .1s forwards;
}
.pf .pagefade__mark { animation: pf-mark .82s ease .1s forwards; }
@keyframes pf-lift { to { opacity: 0; visibility: hidden; } }
@keyframes pf-mark { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } }

/* On the way out the cover cannot simply be faded back up with inline styles or
   the Web Animations API. The arrival animation above fills forwards holding
   visibility:hidden, and a filling animation sits above author styles in the
   cascade, so the fade runs perfectly at an invisible element. JS therefore
   drops `pf` entirely, which removes that animation, and hands over to this one,
   which owns both properties. */
.pagefade.is-leaving {
  pointer-events: all;
  animation: pf-cover 1s ease forwards;
}
.pagefade.is-leaving .pagefade__mark { animation: pf-mark-in .82s ease forwards; }
@keyframes pf-cover {
  from { opacity: 0; visibility: visible; }
  to   { opacity: 1; visibility: visible; }
}
@keyframes pf-mark-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pagefade { display: none; }
}
.strip.is-live .strip__row { user-select: none; -webkit-user-select: none; }

/* same problem as the diamonds: the indicator has to read on a pale photograph */
.reel__scroll .hero__scroll-label { text-shadow: 0 1px 6px rgba(24, 22, 20, .7); }
.reel__scroll .hero__scroll-line { box-shadow: 0 0 5px rgba(24, 22, 20, .5); }

/* ---------- slideshow bar vs the overlapping card ----------
   The card sits over one of the media's eight grid columns, so an eighth of the
   photo's width is behind it, full height. Whichever end of the bar falls on
   that side has to be kept out of it: the controls on a normal row, the caption
   on a flipped one. Below 900px the row stacks and the card overlaps the bottom
   of the photo instead, where the whole bar lives, so there the bar moves to the
   top, which nothing covers. */
@media (min-width: 901px) {
  .showcase__row .styleshow__bar { padding-right: calc(12.5% + .9rem); }
  .showcase__row--flip .styleshow__bar {
    padding-right: clamp(1rem, 2.2vw, 1.5rem);
    padding-left: calc(12.5% + .9rem);
  }
}
@media (max-width: 900px) {
  .styleshow__bar { top: 0; bottom: auto; }
  .styleshow__scrim {
    inset: 0 0 auto 0;
    height: 34%;
    background: linear-gradient(to bottom, rgba(28, 26, 23, .74), rgba(28, 26, 23, 0));
  }
}

/* ==================================================================
   Tap targets (2026-09-21). Every control is at least 44px tall to a
   thumb. Each one grows its hit area and cancels the growth with a
   negative margin or a transparent box, so nothing moves visually.
   ================================================================== */
.link-arrow { padding-block: 11px; margin-block: -11px; }
.quotes__arrow { width: 44px; height: 44px; }
.social a { width: 44px; height: 44px; }
.quotes__dots { gap: 0; }
.quotes__dot {
  position: relative;
  width: 24px; height: 44px;
  margin: -18px -3.2px;
  border: 0;
  background: none;
  transform: none;
}
.quotes__dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border: 1px solid var(--gold-deep);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color .3s ease;
}
.quotes__dot.is-active { background: none; }
.quotes__dot.is-active::before { background: var(--gold); }

/* Hero heading masks: Marcellus caps and the ampersand rise above the
   1.1 line box, so open each mask upward as well. All the negative
   margin sits on the bottom so the lines never collapse into each
   other; the first line takes back the top padding. */
.hero__title .line { padding-top: .2em; margin-bottom: -.42em; }
.hero__title .line:first-child { margin-top: -.2em; }
.hero__title .line:last-child { margin-bottom: -.22em; }

/* "or call" sits under the CTA button: grow it to 44px, and draw the
   underline as a background so it stays 2px under the text as before */
.cta__phone {
  border-bottom: 0;
  padding: 3px 0 6px;
  margin-block: -3px;
  background: linear-gradient(rgba(211, 169, 103, .4), rgba(211, 169, 103, .4)) no-repeat 0 calc(100% - 3px) / 100% 1px;
  transition: background-image .35s ease;
}
.cta__phone:hover { background-image: linear-gradient(var(--gold-lift), var(--gold-lift)); }
.contact__big { padding-block: 1px; margin-block: -1px; }
.contact__small { padding-top: 14px; margin-top: calc(.5rem - 14px); }

/* kitchens slideshow controls: 44px tall hit areas around the same marks */
.styleshow__dots { gap: 0; }
.styleshow__dot,
.styleshow__dot[aria-current="true"] {
  position: relative;
  width: 24px; height: 44px;
  margin: -17.5px -3.5px;
  border: 0;
  background: none;
  transform: none;
}
.styleshow__dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  box-sizing: border-box;
  border: 1px solid rgba(252, 250, 245, .75);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background .3s ease, transform .3s ease;
}
.styleshow__dot[aria-current="true"]::before {
  background: var(--gold-lift); border-color: var(--gold-lift);
  transform: translate(-50%, -50%) scale(1.2);
}
.styleshow__arrow,
.styleshow__arrow:hover {
  width: 44px; height: 44px;
  margin: -5px;
  border: 0;
  background: none;
}
.styleshow__arrow::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(252, 250, 245, .5);
  background: rgba(28, 26, 23, .3);
  transition: border-color .3s ease, background .3s ease;
}
.styleshow__arrow:hover::before { border-color: var(--gold-lift); background: rgba(28, 26, 23, .55); }
.styleshow__arrow::after { z-index: 1; }
.styleshow__arrows { gap: .45rem; }
@media (max-width: 700px) {
  .styleshow__arrow, .styleshow__arrow:hover { width: 44px; height: 44px; margin: -6px; }
  .styleshow__arrow::before { inset: 6px; }
  .styleshow__dot::before { width: 8px; height: 8px; }
  .styleshow__dot, .styleshow__dot[aria-current="true"] { margin-inline: -4.96px; }
}
/* each dot's hit area overhangs the row by half a gap at both ends */
.styleshow__dots { margin-inline: -4px; }
.quotes__arrow { margin: -1px; }
.social a { margin: -2px; }
@media (max-width: 700px) { .styleshow__dots { margin-inline: -3.04px; } }
/* the masks only ever slide text vertically, so clip top and bottom and
   let glyph overhangs (the ampersand, the comma's tail) run out sideways.
   Browsers without overflow: clip keep the overflow: hidden above. */
.hero__title .line { overflow-x: visible; overflow-y: clip; }

/* map controls: 44px zoom buttons on touch screens, and a taller hit area
   on the credit links without moving them */
.leaflet-container.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.leaflet-control-attribution a { display: inline-block; padding-block: 15px; margin-block: -15px; }

/* reel dots: 24 x 44 hit areas overlapping at the same 24px pitch (18px on
   a phone), with the diamond drawn inside */
.reel__dots { gap: 0; }
.reel__dot, .reel__dot:hover, .reel__dot[aria-current="true"] {
  position: relative;
  width: 24px; height: 44px;
  margin-block: -9.9px;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.reel__dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border: 1px solid rgba(252, 250, 245, .8);
  background: rgba(24, 22, 20, .28);
  box-shadow: 0 1px 5px rgba(24, 22, 20, .55);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color .35s ease, border-color .35s ease, transform .35s ease;
}
.reel__dot:hover::before { border-color: var(--gold-lift); }
.reel__dot[aria-current="true"]::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.45);
}
@media (max-width: 700px) {
  /* 23px pitch: any closer and each hit area covers its neighbour's centre */
  .reel__dot, .reel__dot:hover, .reel__dot[aria-current="true"] { margin-block: -10.5px; }
  .reel__dot::before { width: 7px; height: 7px; }
}

/* ==================================================================
   Readability (Lee approved, 2026-09-21). Running text is never below
   16px on a phone or 17px on a desktop, and every colour meets WCAG AA
   on its background. One token so the floor is set in one place.
   ================================================================== */
:root { --fs-body: clamp(1rem, .94rem + .3vw, 1.0625rem); }
body,
.site-footer, .site-footer__bottom-inner, .site-footer__entity,
.site-footer__brand p, .site-footer__contact li,
.link-arrow, .link-arrow--lg,
.hero__eyebrow, .welcome__aside p, .welcome__aside-names, .service p,
.section-head__sub, .section-head__meta, .intro__facts li, .spec-list li,
.showcase__text, .showcase__quote,
.plaque__lead, .plaque__note, .pillar__text, .rooms__lead,
.step__text, .step__note, .story__kind, .story__para, .story__text,
.reel__meta, .swatches__note, .swatch__note,
.cta__lead, .cta__note,
.contact__lead, .contact__note, .contact__steps li, .contact__next p, .form__field label,
.form__privacy, .map__note,
.legal__section p, .legal__list li, .legal__note, .legal__updated,
.legal__section td, .legal__section strong, .legal a {
  font-size: var(--fs-body);
}
/* the tracked capitals were set small; at body size they need less air */
.hero__eyebrow, .link-arrow, .story__kind, .step__note,
.cta__note, .welcome__aside-names, .legal__updated, .form__field label {
  letter-spacing: .12em;
}

.site-footer, .site-footer__bottom-inner, .site-footer__entity { color: #9a958b; }
.script { color: #9f793b; }
.script--gold { color: var(--gold-lift); }

/* ==================================================================
   Use the width (Lee approved, 2026-09-21). Text wraps only when the
   words genuinely do not fit: no balanced wrapping, no narrow ch caps.
   Long paragraphs keep a readable measure of 120ch.
   ================================================================== */
h1, h2, h3, h4, .script, .quote blockquote p { text-wrap: wrap; }
.hero__title, .section-head__meta, .section-head__sub, .welcome__aside,
.step__text, .rooms__lead, .testimonial blockquote p, .cta__lead,
.site-footer__brand p, .contact__lead, .form-thanks p, .plaque__note,
.reel__cap p.reel__meta { max-width: none; }
.story__para { max-width: 120ch; }
.quotes { max-width: none; }
/* The arrow is glued to the last word (.link-arrow__end, nowrap), so when a
   link wraps on a narrow card it ends "... KITCHEN ->" rather than leaving the
   arrow alone on a line of its own, which read as a stray mark (client, 2026-09-25). */
.link-arrow { display: inline-block; }
.link-arrow__end { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.link-arrow i { display: inline-block; vertical-align: middle; margin: -.2em 0 0 .6em; }
/* eight colours: two even rows of four, so no row ends short */
.swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   Linen (Lee approved "texture but subtle", 2026-09-21). The sections
   that carry no photograph sit on a faint woven texture, like the paper
   of a brochure, so no band of the page is a flat fill.
   ================================================================== */
.testimonial, .process, #approach, #independent, #reel-intro, #palette, #faqs,
.section.contact, .stories, .legal, .brands {
  background-image: url("../img/texture-linen.svg");
  background-size: 300px 300px;
}

/* ==================================================================
   Strip without the drift (Lee approved, 2026-09-21). With reduced
   motion, or before any script has run, the strip does not move, so
   each row becomes a swipeable, snapping scroller showing each photo
   once (the second set only exists to make the drift loop seamless).
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .strip__row {
    overflow: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--pad-inline);
    padding-inline: var(--pad-inline);
    scrollbar-width: thin; scrollbar-color: var(--gold-pale) transparent;
  }
  .strip__track { animation: none; transform: none; }
  .strip__item { scroll-snap-align: start; }
  .strip__item[aria-hidden="true"] { display: none; }
}
.no-js .strip__row {
  overflow: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad-inline);
  padding-inline: var(--pad-inline);
  scrollbar-width: thin; scrollbar-color: var(--gold-pale) transparent;
}
.no-js .strip__track { animation: none; transform: none; }
.no-js .strip__item { scroll-snap-align: start; }
.no-js .strip__item[aria-hidden="true"] { display: none; }
/* body-size footer text: give the contact column room for the email address */
@media (min-width: 1101px) {
  .site-footer__grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.3fr) minmax(0, 2.7fr) minmax(0, 3.3fr); }
}
/* the legal and testimonials pages open with their own head section, so the
   page padding and the linen live on the sections rather than on <main> */
.legal, .stories { padding-block: 0; background-image: none; }
.legal__top, .stories__top { padding-top: clamp(3rem, 6vw, 5rem); }
.legal__doc { padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.legal__top, .legal__doc, .stories__top, .stories__list {
  background-image: url("../img/texture-linen.svg");
  background-size: 300px 300px;
}

/* ==================================================================
   One screen each (Lee's rule, 2026-09-21): a section of related content
   that ran just off the bottom of a 1440x900 screen is tightened to fit.
   Long sections that flow down the page in rows are left alone.
   ================================================================== */
@media (min-width: 901px) {
  #process.process, #difference, .section.plaque, #more, #palette, .contact ~ .section.section--deep {
    padding-block: clamp(3.5rem, 5vw, 4.5rem);
  }
  #process.process .section-head { margin-bottom: clamp(1.8rem, 2.6vw, 2.4rem); }
  #process.process .process__cta { margin-top: 1.8rem; }
  #palette .swatch__chip { aspect-ratio: 5 / 2; }
  #palette .swatches { margin-top: clamp(1.6rem, 2.6vw, 2.2rem); }
}
.legal__head .legal__intro + p { margin-top: 1.2rem; }

/* About: Our Story, Meet the Directors and Our Approach sit a little closer
   together (client request, 2026-09-21) */
#our-story { padding-bottom: calc(var(--space-section) * .7); }
#team { padding-block: calc(var(--space-section) * .7); }
#approach { padding-top: calc(var(--space-section) * .7); }
@media (min-width: 901px) {
  /* longer client copy in the plaques: the text takes a little more of the row */
  .plaque__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .plaque .spec-list li { padding-block: .8rem; }
  /* the service-area heading now names three counties and runs to two lines */
  .contact ~ .section.section--deep .map { height: clamp(340px, 48vh, 480px); }
}
@media (min-width: 901px) {
  .plaque .plaque__lead { line-height: 1.7; }
  .plaque .spec-list { margin-top: 1.4rem; }
  .plaque .plaque__note { margin-top: 1.2rem; }
  .plaque .spec-list li { padding-block: .7rem; }
  .section.plaque { padding-block: clamp(3.2rem, 4.2vw, 3.8rem); }
}

/* Client request (2026-09-21): the collection feature points go back to their
   original small capitals so they read as a list of points, and the company
   small print in the footer steps down a little from body size. Both carry
   data-small-ok in the markup, so the QA reports list them as exceptions. */
.site-footer__entity { font-size: clamp(.875rem, .82rem + .2vw, .9375rem); }

/* ==================================================================
   Client amends (2026-09-23)
   ================================================================== */

/* Inspiration palette: Caledonia's painted range as round paint chips.
   Thirty-one colours: eleven a row on a desktop (11, 11, 9), eight on a
   tablet (8, 8, 8, 7) and four on a phone, the short last row centred. */
.swatches--dots {
  --cols: 11;
  --gap-x: clamp(.8rem, 1.6vw, 1.3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.3rem, 2.2vw, 1.8rem) var(--gap-x);
  list-style: none;
  padding: 0;
}
.swatches--dots .swatch {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.swatches--dots .swatch__chip,
#palette .swatches--dots .swatch__chip {
  width: min(100%, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(43, 40, 34, .14);
  /* a little depth, like a dried paint chip rather than a flat dot */
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .07), inset 0 6px 10px rgba(255, 255, 255, .12),
              0 6px 14px -8px rgba(43, 40, 34, .35);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
.swatches--dots .swatch:hover .swatch__chip {
  transform: translateY(-4px) scale(1.05);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .07), inset 0 6px 10px rgba(255, 255, 255, .12),
              0 12px 20px -10px rgba(43, 40, 34, .45);
}
.swatches--dots .swatch__name {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.3;
}
@media (max-width: 1199px) { .swatches--dots { --cols: 8; } }
@media (max-width: 640px)  { .swatches--dots { --cols: 4; } }

/* Process FAQs: eight longer answers read in two columns, not four narrow ones */
@media (min-width: 761px) {
  .pillars--faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.4rem, 5vw, 4.5rem); }
}
.pillars--faq .pillar__num { line-height: 1.3; }

/* Kitchens: brands we supply, a slow band of logos in one dark grey */
.brands {
  background-color: var(--cream-deep);
  padding-block: clamp(2.6rem, 4.5vw, 3.6rem);
  border-bottom: 1px solid var(--gold-pale);
  overflow: clip;
}
.brands .eyebrow { justify-content: center; margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem); }
.brands__row {
  overflow: hidden;
  /* the logos fade in and out at the edges rather than being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.brands__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brands-drift 75s linear infinite;
}
.brands__row:hover .brands__track { animation-play-state: paused; }
.brands__list {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 5.5vw, 5rem);
  padding-right: clamp(3rem, 5.5vw, 5rem);
  list-style: none;
  margin: 0;
}
.brands__logo {
  display: block;
  /* each logo is sized by its own optical height in the markup (--h) */
  /* x1.12: the files carry 6% transparent padding top and bottom */
  height: calc(var(--h, 1) * clamp(26px, 2.6vw, 36px) * 1.12);
  width: auto;
  opacity: .85;
  transition: opacity .3s;
}
.brands__logo:hover { opacity: 1; }
@keyframes brands-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* still: the logos sit as a centred, wrapping group and the copy for the
   loop is not shown */
@media (prefers-reduced-motion: reduce) {
  .brands__row { -webkit-mask-image: none; mask-image: none; }
  .brands__track { animation: none; width: auto; justify-content: center; }
  .brands__list { flex-wrap: wrap; justify-content: center; row-gap: 2rem; padding-inline: var(--pad-inline); }
  .brands__list[aria-hidden="true"] { display: none; }
}

/* The narrow-screen .section-head rule (align-items: flex-start) outranked the
   centred variant, so centred heads put the eyebrow and heading on the left
   and the line under them in the middle. Centred heads stay centred. */
@media (max-width: 1100px) { .section-head--center { align-items: center; gap: 0; } }

/* the palette fits one 1440x900 screen */
@media (min-width: 901px) {
  #palette .swatches--dots { margin-top: clamp(1.4rem, 2.2vw, 1.9rem); row-gap: clamp(1.1rem, 1.8vw, 1.5rem); }
  #palette .swatches__note { margin-top: clamp(1.3rem, 2.2vw, 1.8rem); }
}

/* Testimonials page: the customer's name under the stars, once names are added */
.story__name {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--charcoal);
}

/* Seven nav items since Installation was added (2026-09-23): on laptop widths
   the full-size links pushed the button off the right edge, so the tighter
   link spacing used below 1260px now runs up to 1439px, with the button kept. */
@media (min-width: 1261px) and (max-width: 1439px) {
  .hdr3__nav a { font-size: .72rem; letter-spacing: .11em; }
  .hdr3__nav ul { gap: 1rem; }
  .hdr3__btn { padding-inline: 1.2rem; }
}
/* Eight nav items since Testimonials joined the menu (2026-09-29). Wherever
   the gold Start Your Project button shows, it IS the contact link, so the
   plain Contact link steps aside to make room; below 1261px the button is
   hidden and Contact comes back. The narrowest desktop band tightens again. */
@media (min-width: 1261px) { .hdr3__nav-contact { display: none; } }
@media (min-width: 981px) and (max-width: 1100px) {
  .hdr3__nav a { letter-spacing: .07em; }
  .hdr3__nav ul { gap: .55rem; }
}
/* hero pages carry the wider full lockup at page top, so the full-size
   links need a narrower gap until the viewport has room to spare */
@media (min-width: 1440px) and (max-width: 1699px) {
  .hdr3__nav ul { gap: 1.25rem; }
}

/* Client request (2026-09-24): on the Process and Inspiration pages every
   section sits on a different ground, stepping through plain cream, plain
   darker cream, light linen and darker linen. .section--plain drops the
   linen from a section that would otherwise carry it; the reviews take
   .section--deep through $quotesClass for the darker linen. */
.section--plain { background-image: none; }

/* Kitchens, What We Handle (2026-09-24): the cabinet note grew to seven
   lines, so on desktop it moves under the photo and fills the space the
   photo left in its column; the section then still fits one screen. On a
   phone it follows the list as before. */
.plaque__grid--aside { grid-template-areas: "media" "body" "aside"; }
.plaque__grid--aside .plaque__media { grid-area: media; }
.plaque__grid--aside .plaque__body { grid-area: body; }
.plaque__grid--aside .plaque__aside { grid-area: aside; margin-top: -1.3rem; }
.plaque__grid--aside .plaque__aside .plaque__note { margin-top: 0; }
@media (min-width: 901px) {
  .plaque__grid--aside { grid-template-areas: "media body" "aside body"; row-gap: 1.8rem; }
  .plaque__grid--aside .plaque__media { align-self: end; }
  .plaque__grid--aside .plaque__aside { align-self: start; margin-top: 0; }
  .plaque__grid--aside .plaque__aside .plaque__note { max-width: none; }
}
/* Inspiration palette (2026-09-24): the longer colour-matching intro runs to a
   third line, so the section padding gives back the height it added */
@media (min-width: 901px) { #palette { padding-block: 3.5rem; } }
/* About, directors (2026-09-24): on phones the card's pull-up overlap slid it
   over the portrait and hid "Director"; after a portrait it sits below it */
@media (max-width: 900px) { .portrait + .showcase__card { margin-top: 0; } }

/* ==================================================================
   Client amends (2026-09-25)
   Process: a full-bleed kitchen between the stages and the FAQs. The
   section keeps the stages' darker cream, so the margin the photo opens
   out from reads as the end of that section.
   ================================================================== */
.vista { background: var(--cream-deep); }
.vista__media {
  position: relative;
  overflow: hidden;
  height: clamp(360px, 72vh, 760px);
}
.vista__media picture { position: absolute; inset: 0; }
.vista__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vista__media::after {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(252, 250, 245, .55);
  pointer-events: none;
}
@media (max-width: 700px) {
  .vista__media { height: clamp(300px, 56vh, 480px); }
  .vista__media::after { inset: 12px; }
}

/* Kitchens: the slideshow fills its photo box. Its stage is 3:2, which matched
   the box on desktop, but on phones the box is 4:3, so the photos stopped
   short and left a cream strip with the frame line hanging below them. */
.showcase__media > .styleshow,
.showcase__media > .styleshow .styleshow__stage { height: 100%; aspect-ratio: auto; }

/* Phone menu: the header stays above the open menu so its close button works,
   but at the top of a page it is 173px tall and, though transparent, it took
   the taps meant for the first menu links (About, and Kitchens on short
   screens). Only the close button may catch taps while the menu is open. */
body.nav-open .site-header3 { pointer-events: none; }
body.nav-open .site-header3 .nav-toggle { pointer-events: auto; }

/* Privacy: the lawful-basis table was 460px wide in a 350px column on phones
   and scrolled sideways with nothing to say so, so it looked cut off. There
   each row becomes a short block with its two labels written in. */
@media (max-width: 600px) {
  .legal__table-wrap { overflow: visible; }
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: auto; min-width: 0; }
  .legal__table thead { display: none; } /* each cell writes its own label below */
  .legal__table tr { padding: 1rem 0; border-bottom: 1px solid var(--gold-pale); }
  .legal__table td { border: 0; padding: 0; }
  .legal__table td::before {
    display: block;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }
  .legal__table td:nth-child(1)::before { content: 'What we do'; }
  .legal__table td:nth-child(2)::before { content: 'Our lawful basis'; margin-top: .75rem; }
}

/* Process: the stages keep their plain background (client, 2026-09-24) but
   carry the faint monogram the welcome, craft and CTA sections use, on the
   left so it does not repeat the welcome section's right-hand one. */
#process { overflow: clip; }
.process__watermark {
  position: absolute;
  top: 58%; left: -220px;
  transform: translateY(-50%);
  width: 640px; height: 640px;
  background: url('../img/logo/monogram-gold.png') center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 96%);
  opacity: .055;
  pointer-events: none;
}
#process > .container { position: relative; }
@media (max-width: 700px) { .process__watermark { width: 420px; height: 420px; left: -170px; } }

/* Process FAQs on large, tall screens: eight answers in two columns ran to
   1309px at 1920x1080. A wider measure and tighter spacing bring it onto one
   screen. Shorter screens keep the normal layout, where it flows row by row. */
@media (min-width: 1600px) and (min-height: 1000px) {
  #faqs { padding-block: calc(var(--space-section) * .6); }
  #faqs > .container { max-width: 1560px; }
  #faqs .section-head { margin-bottom: 2.6rem; }
  #faqs .pillars--faq { row-gap: 2rem; column-gap: 5rem; }
}

/* Other Rooms "What We Make" head: the longer intro (client copy 2026-09-28)
   squeezed the heading onto three lines at 1440 while the paragraph ran wide.
   The heading keeps its natural width, up to 60% of the row. */
@media (min-width: 1101px) {
  #rooms .section-head__main { flex-shrink: 0; max-width: 60%; }
}

/* About (2026-10-09, launch): Meet Kelly & Gary sat on the same darker cream
   as Our Story above and Our Approach below, so the three read as one block.
   It takes the plain cream ground instead, like every page's alternating
   sections (the client's rule: no two neighbours share a background). */
.showcase--cream { background: var(--cream); }

/* 404 page (2026-10-09): legal__top only pads the top, and here nothing
   follows it before the footer */
.notfound { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Testimonials, Privacy and 404 (2026-10-09, launch): the opening band and the
   page body below it sat on the same linen, so they read as one block. The
   opening band takes the darker cream as a page header, the body stays light
   (the client's rule: no two neighbouring sections share a background). */
.legal__top, .stories__top {
  background-color: var(--cream-deep);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.legal__top .legal__head, .stories__top .legal__head { border-bottom: 0; padding-bottom: 0; }
.legal__doc, .stories__list { padding-top: clamp(2.6rem, 5vw, 3.8rem); }

/* Contact map credit: Leaflet's default link blue on its 80% white panel fell
   under 4.5:1 over the map tiles */
#areaMap .leaflet-control-attribution { background: rgba(255, 255, 255, .94); }
#areaMap .leaflet-control-attribution a { color: #005077; }
.notfound__links { margin-top: 1.8rem; }