/* ==========================================================================
   djwcorporate.com

   The venue's own site, in the planner's look (src/away-day/away-day.css,
   look B of 4 October 2026): pale paper, dark ink, the forest green of the
   back bar for the one accent, Instrument Serif for what is announced and
   Instrument Sans for what is read. The murals supply the colour; the page
   stays quiet so they can.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-normal-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-normal-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f7f6f2;
  --paper-2: #efede7;
  --ink: #141516;
  --ink-soft: rgba(20, 21, 22, 0.72);
  --muted: #6b6d68;
  --line: rgba(20, 21, 22, 0.12);
  --line-2: rgba(20, 21, 22, 0.2);
  --green: #1f5c45;
  --green-ink: #ffffff;
  --green-tint: rgba(31, 92, 69, 0.1);
  --night: #0b0b0c;
  --night-ink: #f2f2ee;
  --night-muted: rgba(242, 242, 238, 0.68);
  --night-line: rgba(255, 255, 255, 0.14);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.wrap {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

/* Type scale. */
.kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.h-display {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 11ch;
}
.h-section {
  font-size: clamp(34px, 4.6vw, 58px);
  max-width: 16ch;
}
.h-card {
  font-size: 26px;
}
.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
}
.body {
  color: var(--ink-soft);
  max-width: 60ch;
}
.body + .body {
  margin-top: 14px;
}
em {
  font-style: italic;
}

/* Buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 16px/1 var(--sans);
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms, color 160ms, border-color 160ms;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.btn-primary {
  background: var(--green);
  color: var(--green-ink);
}
.btn-primary:hover {
  background: #184a37;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--ink);
}
.btn-light {
  background: var(--night-ink);
  color: var(--night);
}
.btn-outline-light {
  background: transparent;
  color: var(--night-ink);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
  border-color: var(--night-ink);
}
.btn-whatsapp {
  background: #25d366;
  color: #072a15;
}
.btn-whatsapp:hover {
  background: #1fc45a;
}
.btn-whatsapp svg {
  fill: currentColor;
  stroke: none;
}

/* The header: paper, a hairline, the mark and the way in. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 246, 242, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.brand img {
  width: 44px;
  height: 44px;
}
.brand-name {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
}
.brand-name small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.site-nav {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.site-nav a:hover {
  color: var(--ink);
}
.head-actions {
  display: flex;
  gap: 10px;
}
.head-actions .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* The hero: the words on paper, the hall beside them. */
.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero .lede {
  margin-top: 24px;
}
.proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}
.proofs li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.proofs svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--night);
  box-shadow: 0 30px 60px -30px rgba(20, 21, 22, 0.5);
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 24px 22px;
  background: linear-gradient(to top, rgba(11, 11, 12, 0.88), rgba(11, 11, 12, 0));
  color: var(--night-ink);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
}
.hero-figure figcaption span {
  display: block;
  color: var(--night-muted);
  font-family: var(--sans);
  font-size: 14px;
  margin-top: 6px;
}

/* The brands strip: one line, quietly. */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.trust .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  font-size: 14px;
  color: var(--muted);
}
.trust strong {
  color: var(--ink);
  font-weight: 600;
}
.trust-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-left: auto;
}

/* Sections. */
.section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.section-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .lede {
  margin-top: 20px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split > figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.split > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
}

/* A row of three plain claims. */
.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.claims h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.claims p {
  color: var(--ink-soft);
}

/* Cards on the paper. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card .kicker {
  margin-bottom: 4px;
}
.card p {
  color: var(--ink-soft);
}

/* The planner: the one dark passage on the page, the room in it. */
.planner {
  background: var(--night);
  color: var(--night-ink);
  overflow: hidden;
}
.planner .kicker {
  color: #8fd1b4;
}
.planner .lede,
.planner .body {
  color: var(--night-muted);
}
.planner-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.planner-steps {
  margin-top: 32px;
  display: grid;
  gap: 18px;
}
.planner-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.planner-steps .n {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: #8fd1b4;
}
.planner-steps strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.planner-steps span {
  color: var(--night-muted);
  font-size: 15px;
}
.planner-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--night-line);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  transform: rotate(-1deg);
}
.planner-figure img {
  width: 100%;
}
.planner-figure + .planner-figure {
  margin-top: -40px;
  margin-left: 18%;
  transform: rotate(1.2deg);
  width: 70%;
}
.planner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* The agenda: the hours down the left, the sessions beside them. */
.agenda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.agenda li {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 22px;
  display: grid;
  gap: 10px;
}
.agenda .t {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--green);
}
.agenda strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.agenda li > div > span {
  color: var(--ink-soft);
  font-size: 15px;
}
.agenda-note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--muted);
}

/* The event types: a numbered list, large. */
.types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  border-top: 1px solid var(--line);
}
.types li {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: baseline;
}
.types .n {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--green);
}
.types h3 {
  font-size: 24px;
  margin-bottom: 4px;
}
.types p {
  color: var(--ink-soft);
  font-size: 15px;
}

/* The breakout: photographs, and the list under them. */
.breakout {
  background: var(--paper-2);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 12px;
}
.gallery figure {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night);
}
.gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.gallery figure:hover img {
  transform: scale(1.04);
}
.gallery figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.7);
  color: var(--night-ink);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.gallery .wide {
  grid-column: span 4;
  grid-row: span 2;
}
.gallery .tall {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery .small {
  grid-column: span 2;
}
.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 72px);
  align-items: start;
}
.menu ol {
  counter-reset: item;
  border-top: 1px solid var(--line-2);
}
.menu ol li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
}
.menu ol li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--green);
}
.menu ol li > div {
  min-width: 0;
}
.menu ol li span {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}

/* The motto, on the mural. */
.motto {
  position: relative;
  min-height: 64vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--night-ink);
  background: var(--night) url('img/bar.jpg') center / cover no-repeat;
  isolation: isolate;
}
.motto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 11, 12, 0.35), rgba(11, 11, 12, 0.8));
  z-index: -1;
}
.motto .wrap {
  padding: 96px 0;
}
.motto h2 {
  font-size: clamp(56px, 11vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.motto .lede {
  color: var(--night-muted);
  margin: 24px auto 0;
}

/* Location. */
.location-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  font-weight: 500;
}
.location-list li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.location-list svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.location-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.map-card {
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--line);
  padding: 32px;
  display: grid;
  gap: 22px;
}
.map-card .address {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.1;
}
.map-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.map-card dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-card dd {
  margin: 4px 0 0;
  font-weight: 500;
}

/* Pricing. */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.price-card {
  background: var(--ink);
  color: var(--night-ink);
  border-radius: var(--radius);
  padding: 36px;
}
.price-card .kicker {
  color: #8fd1b4;
}
.price-figure {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
}
.price-figure small {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--night-muted);
  margin-left: 8px;
}
.price-card ul {
  margin-top: 28px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--night-line);
  padding-top: 24px;
}
.price-card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.price-card li svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: #8fd1b4;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.price-card .btn {
  margin-top: 28px;
}
.extras {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}
.extras h3 {
  font-size: 30px;
  margin-bottom: 8px;
}
.extras p {
  color: var(--ink-soft);
}
.extras ul {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  font-weight: 500;
  font-size: 15px;
}
.extras li {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--paper);
}
.extras .note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}

/* Contact: the way to the venue. */
.contact {
  background: var(--paper-2);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.contact-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  display: grid;
  gap: 14px;
}
.contact-card h3 {
  font-size: 30px;
}
.contact-card p {
  color: var(--ink-soft);
}
.contact-card .btn {
  justify-content: center;
  width: 100%;
}
.contact-card .or {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Footer. */
.site-foot {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
}
.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-left: auto;
}
.site-foot a:hover {
  color: var(--ink);
}

/* The tour page. */
.tour-page .section {
  padding-top: clamp(32px, 5vw, 64px);
}
.tour-frame {
  margin-top: 32px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--night);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}
.tour-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tour-next {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tour-next h2 {
  font-size: 32px;
}
.tour-next p {
  color: var(--ink-soft);
  margin-top: 8px;
}
.tour-next div:last-child {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* The privacy notice and the terms: one readable column. */
.legal .wrap {
  max-width: 760px;
}
.legal h2 {
  font-size: 30px;
  margin: 44px 0 14px;
}
.legal p,
.legal li {
  color: var(--ink-soft);
}
.legal p + p {
  margin-top: 12px;
}
.legal ul {
  list-style: disc;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}
.legal a {
  color: var(--green);
  text-decoration: underline;
}
.legal .lede {
  margin-top: 18px;
}
.legal-updated {
  margin-top: 44px !important;
  font-size: 14px;
  color: var(--muted) !important;
}

/* The WhatsApp line, always to hand on a phone. */
.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  display: none;
}

/* Motion, lightly. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* Laptops and tablets. */
@media (max-width: 1024px) {
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: grid;
  }
  .site-head.open .site-nav {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 12px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  .site-head.open .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
  }
  .head-actions .btn-ghost {
    display: none;
  }
  .types,
  .agenda {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery {
    grid-auto-rows: 160px;
  }
}

/* Phones. */
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .hero .wrap,
  .split,
  .planner-grid,
  .menu,
  .price-grid,
  .contact-grid,
  .cards,
  .claims,
  .tour-next {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero .wrap {
    gap: 28px;
  }
  .hero-figure {
    order: -1;
    aspect-ratio: 4 / 3;
  }
  .h-display {
    max-width: none;
  }
  .proofs {
    grid-template-columns: minmax(0, 1fr);
  }
  .trust-brands {
    margin-left: 0;
  }
  .types,
  .agenda {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 150px;
  }
  .gallery .wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery .tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery .small {
    grid-column: span 1;
  }
  .split > figure:first-child {
    order: -1;
  }
  .planner-figure {
    transform: none;
  }
  .planner-figure + .planner-figure {
    display: none;
  }
  .map-card dl,
  .extras ul,
  .location-list,
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .price-card,
  .extras,
  .contact-card,
  .map-card {
    padding: 26px 22px;
  }
  .motto {
    min-height: 56vh;
  }
  .whatsapp-float {
    display: inline-flex;
  }
  .btn {
    min-height: 50px;
  }
}