@font-face {
  font-family: "Pattern Sans";
  src: url("assets/fonts/barlow-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pattern Sans";
  src: url("assets/fonts/barlow-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #20201e;
  --muted: #64625c;
  --paper: #f3f2ed;
  --white: #fffefa;
  --line: #d5d2c8;
  --soft: #e9e7df;
  --max: 1240px;
  --sans: "Pattern Sans", "Arial Narrow", Arial, sans-serif;
  --serif: var(--sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--accent); color: var(--accent-on); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 5px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 58%, white);
  outline-offset: 3px;
}
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.13em;
}
.skip-link {
  position: fixed;
  inset: 10px auto auto 10px;
  z-index: 1000;
  padding: 10px 14px;
  transform: translateY(-180%);
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: white;
}
.skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; }

.announcement {
  position: relative;
  min-height: 35px;
  padding: 7px max(22px, calc((100% - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
}
.announcement::before {
  content: none;
}
.announcement p { margin: 0; }
.announcement a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
}

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.header-inner {
  width: min(var(--max), calc(100% - 44px));
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 28px;
}
.brand {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo { width: auto; height: 50px; object-fit: contain; object-position: left center; }
.brand-monogram {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, transparent 45%, var(--accent) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--accent) 45% 55%, transparent 55%);
  background-size: 15px 15px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.brand-name {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.brand-name small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: none;
}
.site-menu { display: flex; align-items: center; gap: 28px; }
.site-menu a {
  padding: 27px 0 24px;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.site-menu a:hover, .site-menu a[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent-text);
}
.header-book, .btn {
  min-height: 46px;
  padding: 12px 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.header-book { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.header-book:hover, .btn-primary:hover { filter: brightness(.92); }
.header-book:active, .btn:active { transform: translateY(1px); }
.menu-toggle { display: none; padding: 10px; border: 0; background: transparent; color: var(--ink); }
.menu-toggle span { width: 27px; height: 2px; margin: 5px 0; display: block; background: currentColor; }
.menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.section {
  width: min(var(--max), calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 116px) 0;
}
.section-label {
  width: auto;
  max-width: 14ch;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  border: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: none;
}
.section-label::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border: 1px solid currentColor;
  background: linear-gradient(135deg, transparent 40%, var(--accent) 40% 60%, transparent 60%);
}
.home-story-copy,
.section-head > div,
.craft-title,
.page-intro > div,
.booking-copy,
.about-story > div,
.team-intro,
.contact-copy,
.closing > div {
  display: grid;
  grid-template-columns: minmax(76px, 96px) minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.home-story-copy > .section-label,
.section-head > div > .section-label,
.craft-title > .section-label,
.page-intro > div > .section-label,
.booking-copy > .section-label,
.about-story > div > .section-label,
.team-intro > .section-label,
.contact-copy > .section-label,
.closing > div > .section-label { grid-column: 1; grid-row: 1; }
.home-story-copy > h2,
.section-head > div > h2,
.craft-title > h2,
.page-intro > div > h1,
.booking-copy > h1,
.about-story > div > h2,
.team-intro > h2,
.contact-copy > h1,
.closing > div > h2 { grid-column: 2; grid-row: 1; }
.home-story-copy > p,
.home-story-copy > a,
.booking-copy > p,
.booking-copy > .booking-promise,
.about-story > div > p,
.contact-copy > p,
.contact-copy > .contact-ledger { grid-column: 2; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }
h1 { font-size: clamp(3rem, 5.4vw, 5.4rem); line-height: .94; }
h2 { font-size: clamp(2.4rem, 4.25vw, 4.5rem); line-height: .98; }
h3 { font-size: 1.45rem; line-height: 1.08; }

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(620px, calc(100dvh - 111px), 730px);
  margin: 0;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #282824;
  color: white;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: clamp(10px, 1.4vw, 20px);
  background:
    linear-gradient(45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%),
    linear-gradient(-45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%);
  background-size: 18px 18px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(22, 22, 20, .88) 0%, rgba(22, 22, 20, .7) 42%, rgba(22, 22, 20, .24) 73%, rgba(22, 22, 20, .14));
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: min(var(--max), calc(100% - 64px));
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 86px) 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .55fr) minmax(170px, .32fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.hero .section-label {
  position: absolute;
  top: 50%;
  left: -18px;
  z-index: 4;
  margin: 0;
  color: white;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}
.hero .section-label::before { margin: 0 2px 8px 0; }
.hero h1 {
  grid-column: 1 / 3;
  align-self: center;
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.25rem, 4.7vw, 5rem);
  line-height: .92;
  text-wrap: balance;
}
.hero-lede { grid-column: 1; max-width: 38ch; margin: 0; color: rgba(255,255,255,.86); font-size: 18px; }
.hero-actions { grid-column: 2; display: grid; gap: 14px; align-self: end; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.text-link, .section-link {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.hero .text-link { color: white; }
.hero-facts {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: stretch;
  margin: 0;
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  border-left: 1px solid rgba(255,255,255,.4);
}
.hero-facts div { min-width: 0; }
.hero-facts dt { color: rgba(255,255,255,.68); font-size: 12px; font-weight: 600; }
.hero-facts dd { margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; background: #282824; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.home-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.15fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.home-story::after {
  content: "";
  position: absolute;
  right: calc(50% - 50vw);
  bottom: -1px;
  width: min(34vw, 440px);
  height: 14px;
  background:
    linear-gradient(45deg, transparent 35%, var(--accent) 35% 65%, transparent 65%),
    linear-gradient(-45deg, transparent 35%, var(--accent) 35% 65%, transparent 65%);
  background-size: 14px 14px;
}
.home-story-copy { padding-bottom: 42px; }
.home-story-copy h2 { max-width: 12ch; margin: 0 0 24px; }
.home-story-copy > p:last-of-type { max-width: 46ch; margin: 0; color: var(--muted); }
.home-story-copy > a { margin-top: 30px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; text-decoration: none; }
.home-story figure { margin: 0; min-height: 520px; max-height: 650px; overflow: hidden; }
.home-story img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center; }

.section-head { max-width: 900px; margin-bottom: 48px; }
.section-head h2 { max-width: 15ch; margin: 0; }
.section-head > p { max-width: 52ch; margin: 22px 0 0; color: var(--muted); }
.services-preview { padding-bottom: 116px; }
.service-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.service-card { min-width: 0; display: flex; flex-direction: column; background: var(--white); border-top: 1px solid var(--ink); }
.service-card:nth-child(3n + 1) { grid-column: 1 / 8; }
.service-card:nth-child(3n + 2) { grid-column: 8 / -1; margin-top: 74px; }
.service-card:nth-child(3n + 3) { grid-column: 4 / 11; margin-top: 10px; }
.service-photo { position: relative; min-height: 280px; display: block; overflow: hidden; background: var(--soft); }
.service-card:nth-child(3n + 1) .service-photo { min-height: 360px; }
.service-card:nth-child(3n + 2) .service-photo { min-height: 320px; }
.service-photo img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .42s cubic-bezier(.16,1,.3,1); }
.service-photo:hover img { transform: scale(1.02); }
.service-photo > span {
  display: none;
}
.service-card-copy { min-height: 220px; padding: 24px 26px 27px; display: flex; flex-direction: column; align-items: flex-start; }
.service-meta { width: 100%; margin: 0 0 24px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; }
.service-card h3 { max-width: 17ch; margin: 0 0 13px; font-size: clamp(2rem, 3.2vw, 3.25rem); }
.service-card p:not(.service-meta) { max-width: 47ch; margin: 0; color: var(--muted); font-size: 15px; }
.service-card-copy > a { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 600; text-decoration: none; }
.section-link { margin-top: 36px; }
.empty-state { grid-column: 1 / -1; padding: 64px; border: 1px solid var(--line); background: var(--white); text-align: center; }
.empty-state h2, .empty-state h3 { margin: 0 0 14px; }
.empty-state p { color: var(--muted); }

.craft { position: relative; border-top: 1px solid var(--line); }
.craft::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 11px;
  background: linear-gradient(90deg, var(--accent) 0 28%, transparent 28% 31%, var(--ink) 31% 58%, transparent 58% 61%, var(--accent) 61% 100%);
}
.craft-title { padding-top: 38px; }
.craft-title h2 { max-width: 14ch; margin: 0 0 55px; }
.craft-points { display: grid; grid-template-columns: 1.08fr .82fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.craft-points article { min-height: 250px; padding: 30px 30px 36px 0; border-right: 1px solid var(--line); }
.craft-points article + article { padding-left: 30px; }
.craft-points article:last-child { border-right: 0; }
.craft-points b { display: block; margin-bottom: 52px; color: var(--accent-text); font-size: 12px; }
.craft-points h3 { max-width: 13ch; margin: 0 0 12px; font-size: 1.8rem; }
.craft-points p { max-width: 34ch; margin: 0; color: var(--muted); }

.process { border-bottom: 1px solid var(--line); }
.process ol { margin: 0; padding: 0; display: grid; grid-template-columns: .85fr 1.15fr .9fr; list-style: none; border-top: 1px solid var(--line); }
.process li { min-height: 220px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.process li:nth-child(2) { background: var(--white); }
.process li:last-child { border-right: 0; }
.process li > b { color: var(--accent-text); font-size: 12px; }
.process h3 { max-width: 14ch; margin: 50px 0 8px; font-size: 1.8rem; }
.process p { margin: 0; color: var(--muted); font-size: 15px; }

.room-feature { min-height: 680px; display: grid; grid-template-columns: .72fr 1.28fr; grid-template-rows: 1fr 1fr; border-block: 1px solid var(--line); background: var(--white); }
.room-feature figure { margin: 0; min-width: 0; overflow: hidden; }
.room-feature img { width: 100%; height: 100%; object-fit: cover; }
.room-copy { grid-column: 1; grid-row: 1 / 3; padding: clamp(48px, 6vw, 86px); display: grid; grid-template-columns: 62px minmax(0, 1fr); align-content: center; align-items: start; column-gap: 26px; border-right: 1px solid var(--line); }
.room-copy .section-label { grid-column: 1; grid-row: 1 / 4; writing-mode: vertical-rl; transform: rotate(180deg); }
.room-copy h2, .room-copy p:not(.section-label), .room-copy a { grid-column: 2; }
.room-copy h2 { max-width: 10ch; margin: 0 0 24px; font-size: clamp(2.6rem, 4vw, 4.45rem); }
.room-copy p:not(.section-label) { max-width: 39ch; margin: 0; color: var(--muted); }
.room-copy a { margin-top: 30px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; text-decoration: none; }
.room-large { grid-column: 2; grid-row: 1; border-bottom: 1px solid var(--line); }
.room-detail { grid-column: 2; grid-row: 2; }
.room-large img { object-position: center 56%; }

.team { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(52px, 8vw, 118px); }
.team-intro h2 { max-width: 12ch; margin: 0; }
.team-list { border-top: 1px solid var(--line); }
.team-list article { padding: 29px 0; display: grid; grid-template-columns: 62px 1fr; gap: 20px; border-bottom: 1px solid var(--line); }
.team-list article > span { width: 54px; height: 54px; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); font-size: 17px; font-weight: 600; }
.team-list h3 { margin: 0 0 8px; font-size: 1.7rem; }
.team-list p { margin: 0; color: var(--muted); }

.visit { border-top: 1px solid var(--line); }
.visit-copy { display: grid; grid-template-columns: .65fr 1fr 1fr; gap: 20px 48px; align-items: start; }
.visit-copy .section-label { grid-column: 1; grid-row: 1 / 4; writing-mode: vertical-rl; transform: rotate(180deg); }
.visit-copy h2 { grid-column: 2; max-width: 14ch; margin: 0; }
.visit-copy > p { grid-column: 3; margin: 0; color: var(--muted); }
.visit-copy > p + p { margin-top: 32px; }
.visit-copy > a { grid-column: 3; margin-top: 68px; width: max-content; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; text-decoration: none; }
.visit .sb-location-map--embedded { margin-top: 64px; }
.visit .sb-location-map__canvas { border-radius: 0; border-color: var(--line); }
.sb-location-map__canvas {
  position: relative;
  background-color: #ded8ca;
  background-image:
    linear-gradient(29deg, transparent 47%, rgba(77,98,90,.22) 48% 50%, transparent 51%),
    linear-gradient(151deg, transparent 47%, rgba(181,107,23,.18) 48% 50%, transparent 51%);
  background-size: 86px 64px;
}
.sb-location-map__canvas iframe { position: relative; z-index: 1; }
.pattern-map-link {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  min-width: min(250px, calc(100% - 36px));
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  border: 1px solid var(--ink);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
.pattern-map-link > span { grid-row: 1 / 3; font-size: 22px; }
.pattern-map-link b { font-size: 14px; line-height: 1.25; }
.pattern-map-link small { color: var(--muted); font-size: 11px; }
.pattern-map-link:hover { background: var(--accent); color: var(--accent-on); }
.pattern-map-link:hover small { color: inherit; }
.pattern-map-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.quote-section { position: relative; padding: clamp(88px, 10vw, 140px) 22px; overflow: hidden; border-block: 1px solid var(--line); background: var(--white); text-align: center; }
.quote-section::before, .quote-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  background:
    linear-gradient(45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%),
    linear-gradient(-45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%);
  background-size: 22px 22px;
}
.quote-section::before { left: 0; }
.quote-section::after { right: 0; }
.quote-section blockquote { max-width: 940px; margin: 0 auto; font-size: clamp(2.6rem, 4.8vw, 5.2rem); font-weight: 600; line-height: .98; letter-spacing: -.035em; }
.quote-section p { margin: 28px 0 0; color: var(--accent-text); font-size: 14px; font-weight: 600; }
.closing { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: clamp(72px, 8vw, 108px) 0; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; }
.closing h2 { max-width: 14ch; margin: 0; }
.closing .btn { margin-bottom: 7px; }

.site-footer { padding: 62px max(22px, calc((100% - var(--max)) / 2)) 22px; border-top: 1px solid var(--line); background: #fff; color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.35fr .6fr .9fr .9fr; gap: 42px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-brand { margin-bottom: 10px; }
.footer-grid p { max-width: 34ch; margin: 0; color: var(--muted); font-size: 14px; }
.footer-grid a { font-size: 14px; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-label { color: var(--ink) !important; font-size: 14px !important; font-weight: 600; letter-spacing: 0; text-transform: none; }
.footer-cta { font-weight: 600; border-bottom: 1px solid currentColor; }
.footer-bottom { margin-top: 50px; padding-top: 18px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.page-intro { position: relative; width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: clamp(72px, 8vw, 112px) 0 62px 74px; border-bottom: 1px solid var(--line); }
.page-intro::before {
  content: "";
  position: absolute;
  inset: clamp(72px, 8vw, 112px) auto 62px 0;
  width: 30px;
  background:
    linear-gradient(45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%),
    linear-gradient(-45deg, transparent 34%, var(--accent) 34% 66%, transparent 66%);
  background-size: 18px 18px;
}
.page-intro h1 { max-width: 16ch; margin: 0; font-size: clamp(3rem, 5vw, 5.2rem); }
.page-intro > p { max-width: 52ch; margin: 24px 0 0; color: var(--muted); font-size: 18px; }
.services-page { padding-top: 64px; }
.services-page .service-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
.services-page .service-card-copy { min-height: 220px; }
.services-page .service-photo { min-height: 320px; }

.gallery-page { width: min(1380px, calc(100% - 44px)); margin: 0 auto; padding: 64px 0 116px; display: grid; grid-template-columns: 1.2fr .8fr; grid-auto-rows: 300px; gap: 18px; }
.gallery-tile { position: relative; min-height: 0; margin: 0; overflow: hidden; background: var(--soft); }
.gallery-tile:nth-child(1) { grid-column: 1; grid-row: span 2; }
.gallery-tile:nth-child(2) { grid-column: 2; grid-row: span 1; }
.gallery-tile:nth-child(3) { grid-column: 2; grid-row: span 2; }
.gallery-tile:nth-child(4) { grid-column: 1; grid-row: span 1; }
.gallery-tile--wide { grid-column: auto; }
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-tile figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 11px; background: var(--white); color: var(--ink); font-size: 12px; }

.booking-page { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: clamp(70px, 8vw, 110px) 0; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 8vw, 108px); }
.booking-copy { align-self: start; }
.booking-copy h1 { max-width: 12ch; margin: 0 0 24px; font-size: clamp(3rem, 4.8vw, 5rem); }
.booking-copy > p { max-width: 44ch; color: var(--muted); }
.booking-promise { max-width: 450px; padding: 22px 0; display: grid; grid-template-columns: 42px 1fr; gap: 15px; border-top: 1px solid var(--line); }
.booking-promise:first-of-type { margin-top: 40px; }
.booking-promise > span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--white); }
.booking-promise b { font-size: 14px; }
.booking-promise p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.booking-panel { position: relative; align-self: start; padding: clamp(28px, 4vw, 46px); border: 1px solid var(--ink); background: var(--white); }
.booking-panel::before { content: ""; position: absolute; inset: -1px -1px auto; height: 10px; background: var(--accent); }
.form-head { margin: 8px 0 28px; padding-bottom: 15px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.form-head b { color: var(--accent-text); }
.booking-panel form { display: grid; gap: 21px; }
.booking-panel label, .field-label { display: block; }
.booking-panel label > span, .field-label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.booking-panel input, .booking-panel select { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #aaa79f; border-radius: 0; background: white; color: var(--ink); }
.booking-panel input:focus, .booking-panel select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.slot-grid button { min-height: 42px; border: 1px solid var(--line); background: white; color: var(--ink); cursor: pointer; }
.slot-grid button:hover, .slot-grid button.is-selected { border-color: var(--ink); background: var(--ink); color: white; }
.slot-note, .form-note, .booking-status { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.consent { display: grid !important; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.consent input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; }
.consent span { margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 400 !important; }
.booking-panel button[disabled] { opacity: .48; cursor: not-allowed; }
.booking-status:not(:empty) { padding: 12px; background: #fff1ef; color: #7d221b; }
.booking-success { padding: 38px 8px; text-align: center; }
.booking-success { display: flex; flex-direction: column; align-items: center; }
.booking-success .success-mark { order: 1; }
.booking-success h2 { order: 2; }
.booking-success .section-label { order: 3; margin: 0 0 14px; }
.booking-success p:not(.section-label) { order: 4; }
.booking-success .btn { order: 5; }
.success-mark { width: 58px; height: 58px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-on); }
.booking-success h2 { margin: 0 0 16px; font-size: 3rem; }
.booking-success p:not(.section-label) { margin: 0 0 25px; color: var(--muted); }

.about-story { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.about-story figure { margin: 0; max-height: 720px; overflow: hidden; }
.about-story img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; }
.about-story h2 { max-width: 12ch; margin: 0 0 23px; }
.about-story > div > p:last-child { max-width: 46ch; color: var(--muted); }
.values { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.values article { min-height: 270px; padding: 34px; border-right: 1px solid var(--line); background: transparent; }
.values article:last-child { border-right: 0; }
.values b { display: none; }
.values h3 { margin: 0 0 12px; font-size: 1.9rem; }
.values p { margin: 0; color: var(--muted); }

.contact-page { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: clamp(72px, 8vw, 112px) 0; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 8vw, 105px); }
.contact-copy h1 { max-width: 12ch; margin: 0 0 24px; }
.contact-copy > p { max-width: 45ch; color: var(--muted); }
.contact-ledger { margin-top: 44px; border-top: 1px solid var(--line); }
.contact-ledger > div { padding: 17px 0; display: grid; grid-template-columns: 120px 1fr; gap: 18px; border-bottom: 1px solid var(--line); }
.contact-ledger span { color: var(--muted); font-size: 13px; font-weight: 600; }
.contact-ledger p, .contact-ledger a { margin: 0; font-size: 15px; }
.contact-card { position: relative; align-self: start; padding: clamp(34px, 5vw, 58px); border: 1px solid var(--ink); background: var(--white); color: var(--ink); }
.contact-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); }
.contact-card .section-label { margin-top: 12px; }
.contact-card { display: flex; flex-direction: column; }
.contact-card h2 { order: 1; }
.contact-card .section-label { order: 2; margin: 0 0 16px; }
.contact-card p:not(.section-label) { order: 3; }
.contact-card .btn { order: 4; }
.contact-card > a:last-child { order: 5; }
.contact-card h2 { margin: 0 0 18px; }
.contact-card p:not(.section-label) { color: var(--muted); }
.contact-card .btn { width: 100%; margin: 22px 0 14px; background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.contact-card > a:last-child { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; text-decoration: none; }
.contact-page .sb-location-map--embedded { grid-column: 1 / -1; width: 100%; margin: 64px 0 0; }
.contact-page .sb-location-map__canvas { border-radius: 0; }

.policy-page { padding-top: 62px; }
.policy-page > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.policy-page article { min-height: 300px; padding: 42px; border-right: 1px solid var(--line); background: var(--white); }
.policy-page article:nth-child(2n) { border-right: 0; }
.policy-page b { color: var(--accent-text); font-size: 12px; }
.policy-page h2 { margin: 36px 0 14px; font-size: 2.1rem; }
.policy-page p { margin: 0; color: var(--muted); }
.not-found { min-height: 70vh; padding: 70px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.not-found > span { order: 1; color: var(--accent-text); font-size: 6.5rem; font-weight: 600; }
.not-found h1 { order: 2; max-width: 11ch; margin: 0 0 14px; }
.not-found .section-label { order: 3; margin: 0 0 28px; }
.not-found .btn { order: 4; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 100; max-width: 360px; padding: 13px 16px; transform: translateY(150%); background: var(--ink); color: white; font-size: 14px; transition: transform .25s ease; }
.toast:empty { display: none; }
.toast.is-visible { display: block; transform: none; }

@media (max-width: 980px) {
  .header-inner { min-height: 72px; grid-template-columns: 1fr auto; }
  .site-menu { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 22px; border-bottom: 1px solid var(--line); background: white; }
  .site-menu.is-open { display: flex; }
  .site-menu a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .menu-toggle { display: block; }
  .header-book { display: none; }
  .hero { min-height: 680px; }
  .hero-copy { grid-template-columns: minmax(0, 1fr) minmax(190px, .42fr); }
  .hero h1 { grid-column: 1 / -1; font-size: clamp(3.25rem, 8vw, 4.9rem); }
  .hero-lede { grid-column: 1; }
  .hero-actions { grid-column: 2; }
  .hero-facts { grid-column: 1 / -1; grid-row: auto; margin-top: 34px; padding: 18px 0 0; flex-direction: row; justify-content: flex-start; border-top: 1px solid rgba(255,255,255,.4); border-left: 0; }
  .home-story { grid-template-columns: 1fr; }
  .home-story-copy { max-width: 680px; padding-bottom: 0; }
  .home-story figure, .home-story img { min-height: 520px; }
  .service-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .craft-points { grid-template-columns: 1fr; }
  .craft-points article { min-height: 0; padding: 28px 0; border-right: 0; border-top: 1px solid var(--line); }
  .craft-points article + article { padding-left: 0; }
  .craft-points b { margin-bottom: 24px; }
  .room-feature { grid-template-columns: 1fr 1fr; grid-template-rows: auto 430px; }
  .room-copy { grid-column: 1 / -1; grid-row: 1; min-height: 410px; border-right: 0; border-bottom: 1px solid var(--line); }
  .room-large { grid-column: 1; grid-row: 2; border: 0; border-right: 1px solid var(--line); }
  .room-detail { grid-column: 2; grid-row: 2; }
  .team { grid-template-columns: 1fr; }
  .visit-copy { grid-template-columns: 58px 1fr 1fr; }
  .visit-copy .section-label { grid-column: 1; }
  .visit-copy h2 { grid-column: 2; }
  .visit-copy > p, .visit-copy > a { grid-column: 3; }
  .visit-copy > a { margin-top: 0; }
  .footer-grid { grid-template-columns: 1.15fr .75fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
  .booking-page, .contact-page { grid-template-columns: 1fr; }
  .about-story { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .values article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .values article:last-child { border-bottom: 0; }
  .policy-page > div { grid-template-columns: 1fr; }
  .policy-page article { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .announcement { min-height: 0; padding: 8px 14px 8px 22px; }
  .announcement p { max-width: 42ch; }
  .announcement a { display: none; }
  .header-inner { width: calc(100% - 28px); }
  .brand-name { font-size: 21px; }
  .brand-monogram { width: 42px; height: 42px; }
  .brand-logo { height: 44px; }
  .section, .closing, .page-intro, .booking-page, .contact-page { width: calc(100% - 28px); }
  .section { padding: 66px 0; }
  .home-story-copy,
  .section-head > div,
  .craft-title,
  .page-intro > div,
  .booking-copy,
  .about-story > div,
  .team-intro,
  .contact-copy,
  .closing > div {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .home-story-copy > .section-label,
  .section-head > div > .section-label,
  .craft-title > .section-label,
  .page-intro > div > .section-label,
  .booking-copy > .section-label,
  .about-story > div > .section-label,
  .team-intro > .section-label,
  .contact-copy > .section-label,
  .closing > div > .section-label {
    grid-column: 1;
    grid-row: 2;
  }
  .home-story-copy > h2,
  .section-head > div > h2,
  .craft-title > h2,
  .page-intro > div > h1,
  .booking-copy > h1,
  .about-story > div > h2,
  .team-intro > h2,
  .contact-copy > h1,
  .closing > div > h2 {
    grid-column: 1;
    grid-row: 1;
  }
  .home-story-copy > p,
  .home-story-copy > a,
  .booking-copy > p,
  .booking-copy > .booking-promise,
  .about-story > div > p,
  .contact-copy > p,
  .contact-copy > .contact-ledger { grid-column: 1; }
  .hero { min-height: 700px; }
  .hero::before { width: 9px; background-size: 12px 12px; }
  .hero::after { background: linear-gradient(180deg, rgba(22,22,20,.12) 0%, rgba(22,22,20,.36) 34%, rgba(22,22,20,.93) 100%); }
  .hero-copy { width: calc(100% - 42px); padding: 60px 0 28px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
  .hero .section-label { top: 35%; left: -8px; margin: 0; }
  .hero h1 { max-width: 12ch; margin: 0 0 18px; font-size: clamp(2.8rem, 12vw, 3.6rem); line-height: .94; }
  .hero-lede { max-width: 34ch; font-size: 16px; }
  .hero-actions { width: 100%; margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-actions .btn, .hero-actions .text-link { width: 100%; }
  .hero-facts { width: 100%; margin-top: 25px; padding-top: 14px; gap: 18px; }
  .hero-media img { object-position: 67% center; }
  h2 { font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .home-story::after { width: 52vw; }
  .home-story figure, .home-story img { min-height: 450px; }
  .section-head { margin-bottom: 38px; }
  .service-list, .services-page .service-list { grid-template-columns: 1fr; gap: 16px; }
  .service-card:nth-child(n), .services-page .service-card:nth-child(n) { grid-column: 1; margin-top: 0; }
  .service-card:nth-child(n) .service-photo, .services-page .service-photo { min-height: 280px; }
  .service-card-copy { min-height: 210px; padding: 23px 20px 26px; }
  .service-card h3 { font-size: 2rem; }
  .process ol { grid-template-columns: 1fr; }
  .process li { min-height: 0; padding: 27px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .process h3 { margin-top: 26px; }
  .room-feature { display: block; }
  .room-copy { min-height: 390px; grid-template-columns: 1fr; row-gap: 14px; }
  .room-copy .section-label { grid-column: 1; grid-row: 2; writing-mode: horizontal-tb; transform: none; }
  .room-copy h2 { grid-column: 1; grid-row: 1; }
  .room-copy p:not(.section-label), .room-copy a { grid-column: 1; }
  .room-large { height: 430px; border-right: 0; }
  .room-detail { display: none; }
  .visit-copy { display: flex; flex-direction: column; }
  .visit-copy h2 { order: 1; }
  .visit-copy .section-label { order: 2; writing-mode: horizontal-tb; transform: none; }
  .visit-copy > p { order: 3; }
  .visit-copy > a { order: 4; }
  .visit-copy > * { margin-bottom: 18px !important; }
  .visit .sb-location-map--embedded { margin-top: 38px; }
  .quote-section { padding-inline: 38px; }
  .quote-section::before, .quote-section::after { width: 16px; background-size: 14px 14px; }
  .quote-section blockquote { font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .closing { grid-template-columns: 1fr; gap: 27px; }
  .closing .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 22px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .page-intro { padding: 64px 0 50px 42px; }
  .page-intro::before { inset: 64px auto 50px 0; width: 20px; background-size: 14px 14px; }
  .page-intro h1, .booking-copy h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .gallery-page { width: calc(100% - 28px); padding-top: 40px; display: block; }
  .gallery-tile, .gallery-tile--wide { min-height: 440px; margin-bottom: 15px; }
  .booking-panel { padding: 26px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .about-story figure { max-height: 580px; }
  .contact-ledger > div { grid-template-columns: 86px 1fr; }
  .contact-card { padding: 34px 23px; }
  .policy-page article { padding: 33px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-photo img, .toast, .header-book, .btn { transition: none; }
}

/* >>> standard 2026-09-25 */
:root body{--band:clamp(40px,5vw,68px)}
@media(max-width:760px){:root body{--band:40px}}
/* The engines take the design's own colours, square like its own parts. */
:root body :is(.eng-sec,.eng-page-intro){--ground:var(--white,#fff);--surface:var(--paper);--surface-2:var(--line);--ink-soft:var(--muted);--primary:var(--accent);--on-primary:var(--accent-on);--primary-text:var(--accent-text);--font-display:var(--serif,var(--display,var(--font,inherit)));--radius:0px;--radius-sm:0px;--radius-btn:0px}
/* Sections: the band's room, top and bottom. */
:root body .section{padding-top:var(--band);padding-bottom:var(--band)}
:root body :is(.services-preview,.craft,.process,.visit,.closing,.booking-page,.contact-page){padding-top:var(--band);padding-bottom:var(--band)}
:root body .quote-section{padding-top:var(--band);padding-bottom:var(--band)}
:root body .page-intro{padding-top:var(--band);padding-bottom:clamp(28px,3vw,40px)}
:root body .services-page{padding-top:clamp(28px,3vw,40px)}
:root body .gallery-page{padding-top:clamp(28px,3vw,40px);padding-bottom:var(--band)}
:root body .policy-page{padding-top:clamp(28px,3vw,40px)}
:root body .section-head{margin-bottom:clamp(28px,3vw,40px)}
:root body .services-preview .section-link{margin-top:28px}
/* The About page's values keep their own hairline frame (no band of it). */
:root body .values.section{padding-top:1px;padding-bottom:1px}
:root body .room-feature{min-height:clamp(420px,42vw,560px)}
:root body .room-copy{padding-top:var(--band);padding-bottom:var(--band)}
/* Headings spread across their room, at a size that lets them. */
:root body main h2{font-size:clamp(2.1rem,3.6vw,3.5rem)}
@media(max-width:680px){:root body main h2{font-size:clamp(2rem,9vw,2.6rem)}}
:root body :is(.home-story-copy h2,.section-head h2,.craft-title h2,.visit-copy h2,.closing h2,.room-copy h2,.about-story h2,.team-intro h2,.booking-copy h1,.contact-copy h1,.page-intro h1,.not-found h1,.eng-head h2,.quote-section blockquote){max-width:none;text-wrap:balance}
:root body :is(.home-story-copy,.visit-copy,.closing>div,.eng-head>div){max-width:none}
:root body :is(.home-story-copy,.room-copy) > p:not(.section-label){max-width:56ch}
@media(min-width:981px){
  :root body .section-head{grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:18px 60px}}
/* The business's name always shows in full: it wraps to a second line
   rather than being cut off. */
:root body .brand{width:auto;max-width:100%;min-width:0}
:root body .brand-name{flex:0 1 auto;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;line-height:1.05;min-width:0}
:root body .brand-name small{white-space:normal}
@media(max-width:980px){:root body .header-inner{grid-template-columns:minmax(0,1fr) auto}}
/* The real map, always shown. */
:root body .sb-location-map__canvas::before,:root body .sb-location-map__canvas::after{content:none}
:root body .sb-location-map__canvas iframe{opacity:1}
:root body .visit .sb-location-map--embedded{margin-top:0}
/* The engines' bands: edge to edge like the design's own, their words and cards in its width. */
:root body .eng-sec{width:100%;max-width:none;margin:0;padding:var(--band) max(22px,calc((100% - var(--max))/2))}
:root body .eng-sec > .eng-wrap{width:100%;max-width:none;margin:0}
:root body .eng-sec+.eng-sec:not(.eng-figures-band){border-top:1px solid var(--line)}
:root body .eng-head{margin-top:0}
:root body .eng-head .eng-lead{margin:12px 0 0;color:var(--muted);max-width:56ch}
:root body .eng-head h2{margin:0}
:root body .eng-link{color:var(--ink);font-size:14px;font-weight:600;text-decoration-thickness:1px}
:root body .eng-card{border-color:var(--line);background:var(--white,#fff)}
:root body .eng-card__body h3{font-family:var(--sans,inherit);font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
:root body .eng-card__body .btn{min-height:44px;padding:10px 18px}
:root body .eng-figures-band{background:var(--ink);color:var(--white,#fff)}
:root body .eng-figures-band .eng-figure{border-left-color:var(--accent)}
:root body .eng-figures-band .eng-figure strong{color:var(--white,#fff);font-size:clamp(2.2rem,3.6vw,3.4rem);font-weight:600;letter-spacing:-.04em}
:root body .eng-figures-band .eng-figure span{color:rgba(255,255,255,.8)}
:root body .eng-date{background:var(--ink);color:var(--white,#fff)}
:root body .eng-review{background:var(--white,#fff);border:1px solid var(--line)}
:root body :is(.eng-request__form,.eng-aside,.eng-success){background:var(--white,#fff);border:1px solid var(--line)}
:root body .eng-page-intro{border-bottom:1px solid var(--line)}
:root body main>.eng-sec.eng-page{border-top:0}
:root body .eng-off{text-align:center}
:root body .eng-off h1{margin:0 auto 24px;font-size:clamp(2rem,3.4vw,3rem)}
/* The basket's Add button (the shop engine), square like the studio's own
   buttons, under the card's words (lifestyle_engines.settle_basket puts it there). */
:root body .service-card-copy>.sb-shop-add{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:16px 0 0;padding:0 18px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:600 13px/1 var(--sans,inherit);text-decoration:none}
:root body .service-card-copy>.sb-shop-add:hover,:root body .service-card-copy>.sb-shop-add:focus-visible{background:var(--ink);color:var(--white,#fff)}
:root body .service-card-copy>.sb-shop-add:hover .oi-add-label{color:inherit;mix-blend-mode:normal}
/* The footer: the studio, its pages in two columns, where to find it. */
:root body .footer-grid:has(>.footer-explore){grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:40px clamp(32px,5vw,72px)}
:root body .footer-grid>.footer-explore{display:block!important;columns:2;column-gap:clamp(18px,2.4vw,32px)}
:root body .footer-explore>.footer-label{column-span:all;margin:0 0 11px}
:root body .footer-explore>a{display:block;width:max-content;max-width:100%;margin:0 0 11px;break-inside:avoid}
:root body .site-footer{padding-top:clamp(40px,5vw,60px)}
:root body .footer-bottom{margin-top:clamp(28px,3vw,40px)}
@media(max-width:980px){
  :root body .footer-grid:has(>.footer-explore){grid-template-columns:1fr 1fr}
  :root body .footer-grid>.footer-brand-col{grid-column:1/-1}
  :root body .site-menu{max-height:calc(100vh - 120px);overflow:auto}
}
@media(max-width:680px){
  :root body .footer-grid:has(>.footer-explore){grid-template-columns:1fr;gap:32px}
  :root body .footer-grid:has(>.footer-explore)>div{grid-column:auto}
  :root body .eng-sec{padding:var(--band) 14px}
}
/* The editors: every photograph keeps its frame inside the editor's wrapper,
   and a tap beside the hero's words reaches the photograph. */
:root body :is(.hero-media,.home-story figure,.service-photo,.room-feature figure,.about-story figure,.gallery-tile,.eng-card__photo,.eng-photo)>[data-paurtal-img-wrap]{display:block!important;width:100%;height:100%}
:root body .hero-media{min-height:100%}
:root body .hero-copy{pointer-events:none}
:root body .hero-copy *{pointer-events:auto}
:root body .hero-copy>:is(.section-label,h1,.hero-lede){width:fit-content}
@media(min-width:981px){:root body .hero-copy>h1:is(h1){max-width:min(100%,40vw)}}
:root body section[data-section="hero"]::before,:root body section[data-section="hero"]::after{pointer-events:none}
/* Pattern House: no drawn ornaments (the textile patterns, the stripes, the
   corner marks); its colours, type and rhythm stay. */
:root body :is(.announcement,.section-label,.hero,.craft,.quote-section,.page-intro,.booking-panel,.contact-card)::before{content:none;display:none}
:root body :is(.home-story,.quote-section)::after{content:none;display:none}
:root body .brand-monogram{background:none}
:root body .sb-location-map__canvas{background-image:none}
/* The studio band at one screen's height (its two photographs share it). */
:root body .room-feature{height:clamp(520px,46vw,680px);min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
:root body .room-feature figure{min-height:0}
@media(max-width:980px){:root body .room-feature{height:auto;grid-template-rows:none}}
/* <<< standard 2026-09-25 */
/* >>> fixes 2026-09-26 */
/* The 2026-09-26 pass: no heading squeezed into five lines on a laptop,
   the contact page's map one band below the details, a service alone on the
   last row of the services page laid out across it, heads and hair kept in
   every wide photograph, and one shape for every service photograph. */
@media(min-width:981px){
  :root body .booking-copy h1{font-size:clamp(2.6rem,3.7vw,3.8rem)}
}
@media(min-width:981px){
  :root body .hero{min-height:max(clamp(620px,calc(100dvh - 111px),730px),35vw)}
  :root body .hero-media img{object-position:50% 12%}
}
:root body .service-list .service-card .service-photo.service-photo{flex:none;align-self:start;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1/1}
:root body .service-list .service-card .service-photo.service-photo img{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 25%}
:root body .room-feature img{object-position:50% 20%}
:root body .contact-page{row-gap:var(--band)}
:root body .contact-page .sb-location-map--embedded{margin-top:0}
@media(min-width:681px){
  :root body .services-page .service-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  :root body .services-page .service-card:last-child:nth-child(odd) .service-card-copy{justify-content:center}
}
@media(min-width:981px){
  :root body .home-story{grid-template-columns:minmax(0,1.2fr) minmax(380px,1fr)}
  :root body .room-feature{grid-template-columns:1fr 1fr}
  :root body .about-story{grid-template-columns:1fr 1fr}
  :root body .contact-copy h1{font-size:clamp(2.6rem,3.7vw,3.8rem)}
}
/* On a wide screen the studio band's two photographs stand side by side (a
   portrait photograph in a short, wide strip lost the heads). */
@media(min-width:1500px){
  :root body .room-feature{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.75fr);grid-template-rows:minmax(0,1fr)}
  :root body .room-copy{grid-row:1}
  :root body .room-large{grid-column:2;grid-row:1;border-bottom:0;border-right:1px solid var(--line)}
  :root body .room-detail{grid-column:3;grid-row:1}
}
/* The menu beside the logo, however many pages it lists (Tumi 2026-09-27:
   "it should be next to the logo"). A long menu tightens rather than
   dropping to a row of its own; the phone keeps its menu button. */
@media(min-width:981px){
  :root body .header-inner:has(.site-menu>a:nth-child(7)){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;gap:clamp(16px,2vw,32px);padding-top:0}
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .site-menu{grid-column:auto;grid-row:auto;justify-content:flex-end;flex-wrap:wrap;column-gap:clamp(12px,1.4vw,24px);row-gap:0;min-width:0;margin-top:0;border-top:0}
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .site-menu a{white-space:nowrap}
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .header-book{grid-column:auto;grid-row:auto}
}
@media(min-width:981px) and (max-width:1319px){
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .site-menu a{font-size:12px;padding-top:10px;padding-bottom:8px}
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .header-book{padding-inline:14px;font-size:12.5px}
  :root body .header-inner:has(.site-menu>a:nth-child(7)) .brand-name small{display:none}
}
/* <<< fixes 2026-09-26 */