/* Bower Magic — static rebuild of the Squarespace homepage */

@font-face {
  font-family: 'Europa';
  src: url('/assets/fonts/EuropaNuovaRegular.woff2?v=d6aa2a71') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Europa';
  src: url('/assets/fonts/EuropaNuovaBold.woff2?v=b7b7e03f') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Europa';
  src: url('/assets/fonts/EuropaNuovaExtraBold.woff2?v=0508443e') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Light.woff2?v=a8c0080b') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Light-Italic.woff2?v=c0913111') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Medium.woff2?v=124166d0') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Medium.woff2?v=124166d0') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Demi-Bold.woff2?v=6a0ff4ee') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbane';
  src: url('/assets/fonts/Urbane-Bold.woff2?v=4d4c587d') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/GeneralSans-Variable.woff2?v=7b5937ef') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #10331B;
  --gold: #D3B890;
  --cream: #E2D0B5;
  --brown: #3F1D00;
  --bg: #F4F4F4;
  --alert: #E02B01;
  --sage: #607767;

  --font-head: 'Europa', 'General Sans', system-ui, sans-serif;
  --font-body: 'Urbane', 'General Sans', system-ui, sans-serif;
  --gutter: max(15px, 1vw);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--cream); padding: 8px 14px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Announcement bar ---------- */
.announce {
  position: relative;
  background: var(--alert);
  color: #fff;
  text-align: center;
  font-size: 17.7px;
  line-height: 1.35;
  padding: 12px 56px;
}
.announce a { display: block; }
.announce p { margin: 0; }
.announce strong { font-weight: 700; text-decoration: underline; }
.announce-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px;
}
.announce[hidden] { display: none; }

/* ---------- Header ---------- */
.site-header {
  background: var(--green);
  color: var(--cream);
  position: relative;
  z-index: 20;
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 23px var(--gutter);
}
.nav { display: flex; gap: 0 1.1em; align-items: center; }
.nav a, .nav-folder > button {
  font-family: var(--font-body);
  font-size: 17.7px;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: .01em;
  padding: 2px 0;
  background: none; border: 0; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s ease;
}
.nav a:hover, .nav a[aria-current="page"], .nav-folder > button:hover { background-size: 100% 1px; }
.nav-folder { position: relative; }
.nav-folder-menu {
  position: absolute; top: 100%; left: -14px;
  display: none; flex-direction: column; gap: 6px;
  background: var(--green); padding: 12px 14px; min-width: 150px;
}


.logo img { width: 192px; height: auto; }

.menu-toggle {
  display: none;
  justify-self: end;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.menu-toggle span { display: block; width: 28px; height: 1px; background: var(--cream); margin: 7px 0; transition: transform .3s; }

.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  background: var(--green);
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.mobile-menu a { color: var(--cream); font-size: 30px; font-family: var(--font-head); }
.mobile-menu .close {
  position: absolute; top: 24px; right: 20px; background: none; border: 0;
  color: var(--cream); font-size: 38px; cursor: pointer;
}
.mobile-menu.open { display: flex; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 519px;
  background: var(--green);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  text-align: center;
  padding: 0 var(--gutter) 40px;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0 0 -22% 0; overflow: hidden; will-change: transform; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
}
.hero-title, .hero-sub { position: relative; z-index: 2; }
.hero h1 {
  color: var(--gold);
  font-size: clamp(30px, 3.8vw, 54.8px);
  line-height: 1;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.hero-title { padding-top: 2px; }
.hero p {
  color: var(--cream);
  font-size: clamp(18px, 1.7vw, 24.6px);
  line-height: 1.6;
  max-width: 940px;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.hero p strong { font-weight: 700; }

/* ---------- Showreel + enquiry ---------- */
.reel {
  display: grid;
  grid-template-columns: 925fr 455fr;
  gap: 15px;
  padding: 27px var(--gutter) 60px;
  max-width: 1440px; margin: 0 auto;
}
.reel h2 {
  color: var(--brown);
  font-size: clamp(30px, 3.4vw, 48.8px);
  line-height: 1.25;
  text-align: center;
  margin-bottom: 30px;
}
.reel h2.enquire { font-size: clamp(28px, 3.1vw, 48px); white-space: nowrap; }
.reel video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.reel iframe { width: 100%; min-height: 672px; border: 0; }

/* ---------- Happy clients / logo marquee (original custom code) ---------- */
.clients {
  background: var(--green);
  padding: 30px 0 20px;
}
.clients h3 {
  color: var(--gold);
  font-size: clamp(40px, 4.85vw, 69.8px);
  text-align: center;
  line-height: 1.3;
}
.image-slider {
  overflow: hidden;
  width: 100%;
  height: 140px;
  position: relative;
  transform: translateZ(0);
  background: #10331B;
}
.slider-track {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.slider-track img {
  width: 140px;
  height: auto;
  margin-right: 30px;
  object-fit: contain;
  border-radius: 6px;
}
.slider-track img.small-logo { transform: scale(0.7); }
.image-slider::before,
.image-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 240px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.image-slider::before {
  left: 0;
  background: linear-gradient(to right, #10331B 35%, rgba(16,51,27,0.85) 60%, rgba(16,51,27,0.5) 78%, rgba(16,51,27,0) 100%);
}
.image-slider::after {
  right: 0;
  background: linear-gradient(to left, #10331B 35%, rgba(16,51,27,0.85) 60%, rgba(16,51,27,0.5) 78%, rgba(16,51,27,0) 100%);
}
@media (max-width: 768px) {
  .image-slider::before, .image-slider::after { width: 40px; }
}

/* ---------- Photo reel (replaces Squarespace Gallery Reel) ---------- */
.photo-reel {
  position: relative;
  height: 50vh;
  min-height: 300px;
  overflow: hidden;
  background: var(--bg);
}
.photo-reel-track {
  display: flex;
  height: 100%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.photo-reel-track img {
  height: 100%;
  width: auto;
  flex: none;
  object-fit: cover;
}
.reel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(244,244,244,.85); color: var(--green);
  font-size: 22px; line-height: 44px;
  opacity: 0; transition: opacity .3s;
}
.photo-reel:hover .reel-btn, .reel-btn:focus-visible { opacity: 1; }
.reel-btn.prev { left: 16px; }
.reel-btn.next { right: 16px; }

/* ---------- Google reviews (original custom code) ---------- */
.reviews-head {
  text-align: center;
  padding: 18px var(--gutter) 15px;
}
.reviews-head h2 {
  color: var(--brown);
  font-size: clamp(34px, 4.25vw, 60.9px);
  line-height: 1.25;
}
.reviews {
  padding: 10px var(--gutter) 50px;
  max-width: 1440px; margin: 0 auto;
}
.google-custom-review {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  justify-content: center;
}
.google-custom-review .single-review {
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  padding: 20px 20px 10px 20px;
  width: calc(33.333% - 20px);
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #222;
  line-height: 1.5;
}
.google-custom-review .img { width: 50px; height: 50px; border-radius: 50%; flex: none; }
.google-custom-review .main-review p { margin: 10px 0; }
.checked { color: orange; }
@media only screen and (max-width: 767px) {
  .google-custom-review .single-review { width: 100%; }
  .google-custom-review .single-review:nth-of-type(n+4) { display: none; }
}

/* ---------- Ice-breaker band ---------- */
.band {
  position: relative;
  background: #3F1D00 center / cover no-repeat;
  color: var(--cream);
  text-align: center;
  padding: 36px var(--gutter);
}
.band::before { content: ""; position: absolute; inset: 0; background: rgba(61,61,61,.15); }
.band > * { position: relative; max-width: 1164px; margin: 0 auto; }
.band .band-lead {
  font-size: clamp(19px, 1.95vw, 28px);
  line-height: 1.36;
  color: var(--cream);
}
.band .band-lead + .band-lead { margin-top: 1.1em; }
.band a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- What people are saying ---------- */
.saying { padding: 42px var(--gutter) 30px; }
.saying h3 {
  color: var(--green);
  text-align: center;
  font-size: clamp(30px, 3vw, 43.6px);
  line-height: 1.3;
  margin-bottom: 20px;
}
.saying-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1400px; margin: 0 auto;
}
.saying-grid video {
  width: min(399px, 100%);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  justify-self: center;
  background: #000;
}
.quote {
  font-family: 'General Sans', sans-serif;
  margin: 20px; padding: 10px;
  text-align: center;
}
.quote p { margin: 0; }
.quote .q { font-size: 24px; font-weight: 500; color: #10331B; line-height: 1.3; }
.quote .who { font-size: 18px; font-weight: 400; color: var(--sage); font-style: italic; }

/* ---------- Trust badges ---------- */
.badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1300px; margin: 0 auto;
  padding: 10px var(--gutter) 20px;
  text-align: center;
}
.badges figure { margin: 0; }
.badges img { height: 196px; width: auto; max-width: 282px; margin: 0 auto 26px; object-fit: contain; }
.badges figcaption { font-weight: 700; font-size: 15px; }

/* ---------- FAQ (original custom code) ---------- */
.bm-faq {
  --green: #10331B;
  --gold: #D3B890;
  --brown: #3F1D00;
  --line: rgba(16, 51, 27, 0.18);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(14px, 8vw, 100px) 5%;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 8vw, 110px);
  color: var(--green);
  font-family: var(--font-body);
  font-weight: 300;
}
.bm-faq-heading { position: sticky; top: 36px; align-self: start; }
.bm-faq-kicker {
  margin: 0 0 16px; color: var(--brown);
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase;
}
.bm-faq h2 {
  font-family: var(--font-head);
  max-width: 470px; margin: 0; color: var(--green);
  font-size: clamp(38px, 4.5vw, 64px); line-height: .98; letter-spacing: -.045em;
}
.bm-faq-intro { max-width: 390px; margin: 24px 0 0; color: var(--brown); font-size: 17px; line-height: 1.58; }
.bm-faq-media {
  position: relative; margin: 36px 0 0; overflow: hidden; border-radius: 4px; background: var(--green);
  box-shadow: 0 18px 45px rgba(16, 51, 27, .12), 0 2px 8px rgba(16, 51, 27, .08);
}
.bm-faq-media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
}
.bm-faq-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 51, 27, .18) 0%, rgba(16, 51, 27, 0) 42%);
}
.bm-faq-list { border-top: 1px solid var(--line); }
.bm-faq details { margin: 0; border-bottom: 1px solid var(--line); }
.bm-faq summary {
  position: relative; display: block; padding: 25px 54px 25px 0;
  color: var(--green); cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.32;
  transition: color .25s ease;
}
.bm-faq summary::-webkit-details-marker { display: none; }
.bm-faq summary::after {
  content: "+"; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  color: var(--brown); font-size: 29px; font-weight: 300; line-height: 1;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
.bm-faq details[open] summary { color: var(--brown); }
.bm-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--green); }
.bm-faq summary:hover { color: var(--brown); }
.bm-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.bm-faq-answer {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}
.bm-faq details[open] .bm-faq-answer { grid-template-rows: 1fr; opacity: 1; }
.bm-faq-answer-inner { min-height: 0; overflow: hidden; }
.bm-faq-answer p {
  max-width: 710px; margin: 0; padding: 0 44px 28px 0;
  color: var(--brown); font-size: 16px; line-height: 1.7;
}
.bm-faq a {
  color: var(--green); font-weight: 500;
  text-decoration-line: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.bm-faq a:hover { text-decoration-color: var(--green); }
.bm-faq-contact { margin: 31px 0 0; color: var(--brown); font-size: 15px; line-height: 1.5; }

/* ---------- Closing CTA ---------- */
.cta {
  position: relative;
  min-height: clamp(0px, 66.67vw, 70vh);
  background: var(--green);
  color: #fff;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 45px 9% 55px 9%;
}
.cta-bg { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.cta::after { content: ""; position: absolute; inset: 0; background: rgba(151,149,149,.12); pointer-events: none; }
.cta > h3, .cta > .cta-lead { position: relative; z-index: 2; }
.cta .cta-lead { font-size: clamp(19px, 1.95vw, 28px); line-height: 1.36; max-width: 590px; margin-left: 8%; }
.cta h3 { font-size: clamp(24px, 2.55vw, 36.7px); line-height: 1.3; }

/* Marker highlight that "draws" in, like the Squarespace text highlight */
.marker {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .15em;
  transition: background-size 1.8s cubic-bezier(.22, 1, .36, 1);
}
.is-visible .marker { background-size: 100% 100%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green); color: var(--cream); }
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1180px; margin: 0 auto;
  padding: 40px var(--gutter) 30px;
  text-align: center;
}
.footer-about img { width: 165px; margin: 0 auto 12px; }
.footer-about p { margin: 0 0 1em; font-size: 17px; }
.site-footer h4, .site-footer .footer-h {
  display: inline-block; position: relative;
  color: #fff; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.36;
  margin-bottom: 24px;
}
.site-footer h4 svg, .site-footer .footer-h svg {
  position: absolute; left: -4%; bottom: -10px; width: 108%; height: 14px; overflow: visible;
}
.site-footer h4 path, .site-footer .footer-h path {
  fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset .5s ease;
}
.site-footer .is-visible h4 path, .site-footer h4.is-visible path, .site-footer .is-visible .footer-h path, .site-footer .footer-h.is-visible path { stroke-dashoffset: 0; }
.footer-links, .footer-connect { display: flex; flex-direction: column; gap: 18px; text-align: center; }
.footer-links a, .footer-connect a { color: #E2D0B5; font-size: 1.2rem; transition: all 0.25s ease; }
.footer-links a:hover, .footer-connect a:hover { text-decoration: underline; text-underline-offset: 4px; opacity: 0.85; }
.footer-divider { max-width: 1110px; height: .5px; background: #e2d0b5; margin: 0 auto; opacity: 0.3; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 26px;
  font-family: monospace; font-size: 0.95rem; letter-spacing: 0.5px; color: #E2D0B5;
}
.footer-legal a { color: #E2D0B5; transition: all 0.25s ease; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: 4px; opacity: 0.85; }
.footer-legal span { margin: 0 10px; opacity: 0.7; }


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr; gap: 40px; }
  .saying-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .header-inner { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .header-inner .nav { display: none; }
  .logo { justify-self: start; }
  .logo img { width: 130px; }
  .menu-toggle { display: block; }
  .announce { font-size: 15px; padding: 10px 44px; }
  .hero { min-height: 480px; padding-bottom: 30px; }
  .reel { padding: 24px 16px 40px; }
  .reel iframe { min-height: 600px; }
  .photo-reel { height: 42vh; }
  .reviews, .saying, .reviews-head { padding-left: 16px; padding-right: 16px; }
  .quote { margin: 10px 0; }
  .quote .q { font-size: 20px; }
  .badges { grid-template-columns: 1fr; gap: 36px; }
  .badges img { height: 150px; margin-bottom: 14px; }
  .bm-faq { display: block; padding: 58px 7%; }
  .bm-faq-heading { position: static; margin-bottom: 42px; }
  .bm-faq h2 { max-width: 360px; font-size: clamp(38px, 11vw, 48px); }
  .bm-faq-intro { margin-top: 20px; font-size: 16px; }
  .bm-faq-media { margin-top: 28px; }
  .bm-faq-media img { aspect-ratio: 16 / 11; }
  .bm-faq summary { padding: 21px 43px 21px 0; font-size: 18px; }
  .bm-faq summary::after { right: 2px; font-size: 27px; }
  .bm-faq-answer p { padding: 0 0 24px; font-size: 15px; line-height: 1.65; }
  .bm-faq-contact { margin-top: 26px; }
  .cta { min-height: 460px; padding: 34px 16px 40px; }
  .cta .cta-lead { margin-left: 0; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { justify-content: center; text-align: center; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal, .js [data-stagger] > *, .js .intro, .js .hero-sub { opacity: 1 !important; transform: none !important; }
  .js .hero h1 .line > span { transform: none !important; }
  .marker { background-size: 100% 100%; }
}

/* =====================================================================
   POLISH LAYER: motion, depth and texture
   Everything that hides content is scoped to .js, so the page still
   renders fully if JavaScript fails.
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

::selection { background: var(--gold); color: var(--green); }


/* ---------- Film grain on deep sections ---------- */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.clients, .site-footer { position: relative; }
.clients > *:not(.grain), .site-footer > *:not(.grain) { position: relative; z-index: 2; }

/* ---------- Header intro + scroll-back sticky header ---------- */
.header-slot { position: relative; z-index: 30; }
.site-header { transition: transform .55s var(--ease-out), background-color .4s ease, box-shadow .4s ease; }
.site-header .header-inner { transition: padding .45s var(--ease-out); }
.logo img { transition: width .45s var(--ease-out); }
.site-header.is-floating {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(16, 51, 27, .82);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .35);
  transform: translateY(-105%);
}
.site-header.is-floating.is-shown { transform: none; }
.site-header.no-anim, .site-header.no-anim * { transition: none !important; }
.site-header.is-floating .header-inner { padding-top: 10px; padding-bottom: 10px; }
.site-header.is-floating .logo img { width: 118px; }

.js .intro { opacity: 0; transform: translateY(-10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.js .logo.intro { transition-delay: .05s; }
.js .nav.intro { transition-delay: .2s; }
.is-ready .intro { opacity: 1; transform: none; }

/* Dropdown: fade + slide instead of snapping open */
.nav-folder-menu {
  display: flex; opacity: 0; visibility: hidden; transform: translateY(8px);
  border-radius: 8px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.45);
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .3s;
}
.nav-folder:hover .nav-folder-menu,
.nav-folder:focus-within .nav-folder-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s;
}
.nav-folder > button::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease-out);
}
.nav-folder:hover > button::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Mobile menu: fade in with staggered links */
.mobile-menu {
  display: flex; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.mobile-menu a { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu.open a:nth-of-type(2) { transition-delay: .05s; }
.mobile-menu.open a:nth-of-type(3) { transition-delay: .1s; }
.mobile-menu.open a:nth-of-type(4) { transition-delay: .15s; }
.mobile-menu.open a:nth-of-type(5) { transition-delay: .2s; }
.mobile-menu.open a:nth-of-type(6) { transition-delay: .25s; }

/* ---------- Hero ---------- */
.hero { min-height: clamp(519px, 70vh, 760px); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 40%, rgba(5,20,10,.35) 100%),
    linear-gradient(180deg, rgba(8,26,14,.62) 0%, rgba(8,26,14,.12) 32%, rgba(8,26,14,.1) 58%, rgba(8,26,14,.72) 100%);
}
.hero-title { padding-top: clamp(24px, 4vh, 48px); }
.hero h1 .line { display: block; overflow: hidden; padding: .04em 0 .08em; }
.hero h1 .line > span { display: inline-block; }
.js .hero-media .hero-bg { transform: scale(1.14); transition: transform 3.2s var(--ease-out); }
.is-ready .hero-media .hero-bg { transform: scale(1); }
.js .hero h1 .line > span { transform: translateY(110%); transition: transform 1.2s var(--ease-out) .35s; }
.js .hero h1 .line + .line > span { transition-delay: .5s; }
.is-ready .hero h1 .line > span { transform: none; }
.js .hero-sub { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease .9s, transform 1.2s var(--ease-out) .9s; }
.is-ready .hero-sub { opacity: 1; transform: none; }
.hero-sub a strong {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px; transition: background-size .5s var(--ease-out), color .3s;
}
.hero-sub a:hover strong { color: var(--gold); background-size: 0% 1px; background-position: 100% 100%; }

/* ---------- Reveal on scroll ---------- */
.js .reveal,
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-visible,
.js [data-stagger] > .is-visible { opacity: 1; transform: none; }

/* Lazy images fade in once decoded, never "pop" */
.js img.fade { opacity: 0; transition: opacity .9s ease; }
.js img.fade.loaded { opacity: 1; }

/* ---------- Videos: framed, with a custom play button ---------- */
.video-frame {
  position: relative; overflow: hidden; border-radius: 12px; background: #000;
  box-shadow: 0 40px 70px -30px rgba(16, 51, 27, .55), 0 10px 24px -10px rgba(0, 0, 0, .18);
}
.video-frame video { width: 100%; display: block; object-fit: cover; }
.reel .video-frame video { aspect-ratio: 16 / 9; }
.video-frame.portrait { width: min(399px, 100%); justify-self: center; }
.video-frame.portrait video { width: 100%; aspect-ratio: 9 / 16; }
.video-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.35));
  transition: opacity .5s ease;
}
.video-frame .play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(211, 184, 144, .94); color: var(--green);
  transition: transform .6s var(--ease-out), background-color .3s ease, opacity .4s ease;
  animation: pulse 2.8s ease-out infinite;
}
.video-frame .play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.video-frame:hover .play { background: #e6cda6; }
.video-frame.is-playing .play,
.video-frame.is-playing::after { opacity: 0; pointer-events: none; }
.video-frame.is-playing .play { animation: none; transform: scale(.7); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(211, 184, 144, .6); }
  70%  { box-shadow: 0 0 0 26px rgba(211, 184, 144, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 184, 144, 0); }
}

/* Enquiry form card */
.reel iframe {
  background: #fff; border-radius: 12px;
  box-shadow: 0 30px 60px -32px rgba(16, 51, 27, .45), 0 2px 10px rgba(0, 0, 0, .04);
}
.reel h2 a { transition: color .3s ease; }
.reel h2 a:hover { color: var(--green); }
.bob { display: inline-block; animation: bob 1.9s ease-in-out infinite; }
.bob:last-child { animation-delay: .2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Photo reel: focus on the centre slide ---------- */
.photo-reel-track { gap: 6px; transition: transform 1.1s var(--ease-in-out); }
.photo-reel-track img { transition: filter 1.1s ease; filter: brightness(.7) saturate(.85); }
.photo-reel-track img.is-active { filter: none; }
.reel-btn {
  width: 54px; height: 54px; line-height: 50px; font-size: 30px;
  background: rgba(16, 51, 27, .55); color: var(--cream);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 208, 181, .35);
  transition: opacity .4s ease, transform .4s var(--ease-out), background-color .3s;
}
.photo-reel:hover .reel-btn { opacity: 1; }
.reel-btn:hover { background: rgba(16, 51, 27, .85); }
@media (hover: none) { .reel-btn { opacity: .85; } }

/* ---------- Review cards ---------- */
.google-custom-review .single-review {
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(16,51,27,.06), 0 10px 30px -18px rgba(16,51,27,.25);
}
.js .google-custom-review .single-review {
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* ---------- Ice-breaker band ---------- */
.band { padding-top: 56px; padding-bottom: 56px; }
.band a {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .3s ease;
}
.band a:hover { color: var(--gold); }

/* ---------- Quotes ---------- */
.quote .q { transition: color .4s ease; }
.quote:hover .q { color: #1c5230; }

/* ---------- Badges ---------- */

/* ---------- FAQ row hover ---------- */

/* ---------- Footer ---------- */
.footer-links a, .footer-connect a { position: relative; display: inline-block; align-self: center; }
.footer-links a:hover, .footer-connect a:hover { text-decoration: none; opacity: 1; color: #fff; }
.footer-links a::after, .footer-connect a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.footer-links a:hover::after, .footer-connect a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-media .hero-bg { transform: none; }
  .bob, .video-frame .play { animation: none; }
}

/* =====================================================================
   404 page (matches the Squarespace "Boom." page)
   ===================================================================== */
.page-404 {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 10vmax var(--gutter);
  overflow: hidden;
  color: #000;
}
.page-404-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-404::after { content: ""; position: absolute; inset: 0; background: rgba(226, 234, 248, .15); pointer-events: none; }
.page-404-inner { position: relative; z-index: 1; width: min(1060px, 100%); }
.page-404 h1 { text-align: center; font-size: clamp(40px, 4vw, 57.5px); line-height: 1.2; color: #000; }
.page-404 h2 { text-align: center; font-size: clamp(26px, 3.03vw, 43.6px); line-height: 1.3; margin: .6em 0 2.4em; color: #000; }
.page-404 p, .page-404 li { color: #3d3d3d; font-size: 17.7px; line-height: 1.6; }
.page-404 ul { margin: .4em 0 1.4em; padding-left: 40px; }
.page-404 li { margin: .5em 0; }
.page-404 strong { font-weight: 700; }
.page-404 a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Legal pages (privacy, terms, cookies)
   ===================================================================== */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) var(--gutter) clamp(60px, 9vw, 120px);
  color: var(--brown);
}
.legal h1 {
  color: var(--green);
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.1;
  margin-bottom: .35em;
}
.legal .updated { color: #4b5f50; font-style: italic; margin: 0 0 2.2em; }
.legal h2, .legal h3 {
  color: var(--green);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3;
  margin: 1.9em 0 .5em;
}
.legal h2 + h3 { margin-top: .9em; }
.legal h3 { font-size: 19px; margin: 1.6em 0 .4em; }
.legal h4 { color: var(--green); font-size: 19px; margin: 1.6em 0 .4em; }
.legal p, .legal li { font-size: 17.7px; line-height: 1.7; margin: 0 0 1em; }
.legal ul { padding-left: 1.3em; margin: 0 0 1.2em; }
.legal li { margin-bottom: .35em; }
.legal li::marker { color: var(--gold); }
.legal strong { font-weight: 600; }
.legal a { color: var(--green); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 3.5em; padding-top: 1.6em;
  border-top: 1px solid rgba(16, 51, 27, .15);
  font-size: 15px;
}
.legal-nav a[aria-current="page"] { text-decoration: none; color: var(--brown); font-weight: 600; }

/* =====================================================================
   Prediction (performance page): long gaps build suspense before the reveal
   ===================================================================== */
.prediction { text-align: center; color: var(--brown); }
.pr-block { max-width: 820px; margin: 0 auto; padding: clamp(56px, 9vw, 110px) var(--gutter); }
.prediction h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.25; color: var(--brown); }
.prediction h2 + h2 { margin-top: 1.1em; }
.prediction h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; color: var(--brown); }
.pr-lines {
  height: 110vh; max-width: 1100px; margin: 0 auto;
  background: repeating-linear-gradient(to bottom, transparent 0 88px, rgba(63, 29, 0, .55) 88px 89px);
}
.pr-lines.short { height: 60vh; }
.pr-card { padding: 20px var(--gutter) 40px; }
.pr-card img { margin: 0 auto; max-width: min(560px, 100%); height: auto; }
.pr-review p { font-size: 18px; margin: 1em 0 0; }
.pr-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pr-btn {
  display: inline-block; padding: 15px 26px; border-radius: 999px;
  background: var(--green); color: var(--cream); font-weight: 600; font-size: 16px;
  border: 1px solid var(--green); transition: background-color .25s, color .25s;
}
.pr-btn:hover { background: #1c5230; }
.pr-btn.ghost { background: transparent; color: var(--green); }
.pr-btn.ghost:hover { background: var(--green); color: var(--cream); }
.pr-small { font-size: 15px !important; opacity: .8; }
.pr-small a { text-decoration: underline; text-underline-offset: 3px; }
.pr-quote { position: relative; min-height: 70vh; display: grid; place-items: center; overflow: hidden; color: #fff; }
.pr-quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-quote::after { content: ""; position: absolute; inset: 0; background: rgba(16, 51, 27, .72); }
.pr-quote div { position: relative; z-index: 1; padding: 0 var(--gutter); max-width: 900px; }
.pr-quote h2 { color: #fff; }
.pr-quote p { font-size: 20px; margin-top: 1em; color: var(--cream); }

/* Hidden performance link inside "EXPECTED": looks exactly like the heading */
a.secret { color: inherit; text-decoration: none; cursor: text; background: none; }

/* =====================================================================
   INNER PAGES (corporate, weddings, hosting, trade shows, about, contact,
   blog, case study, galleries): shared components in the classic style
   ===================================================================== */
.pg-wrap { width: min(1352px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.pg-narrow { width: min(1174px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Hero headline: sizes come from --h1 / --sub (px at 1440 wide), scaled down fluidly */
.pg-hero { text-align: center; padding: clamp(40px, 6.5vw, 90px) var(--gutter) clamp(24px, 3.5vw, 46px); }
.pg-hero h1 {
  color: var(--brown); line-height: 1.02; letter-spacing: .01em;
  font-size: clamp(32px, calc(var(--h1, 90) * 100vw / 1440), calc(var(--h1, 90) * 1px));
}
.pg-hero h1 .sub { display: block; margin-top: .14em; font-size: clamp(22px, calc(var(--sub, 60) * 100vw / 1440), calc(var(--sub, 60) * 1px)); }
.pg-hero .lead { font-size: clamp(17px, 1.7vw, 24px); max-width: 60ch; margin: 18px auto 0; line-height: 1.55; }

/* Form + photo split */
.pg-split { display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 823fr); gap: clamp(28px, 4.2vw, 60px); align-items: start; padding-block: clamp(16px, 2.6vw, 36px); }
.pg-split.flip { grid-template-columns: minmax(0, 823fr) minmax(0, 555fr); }
.pg-split.flip > .pg-photo { order: -1; }
.pg-form h2 { text-align: center; font-size: clamp(21px, 1.95vw, 28px); color: var(--brown); line-height: 1.36; margin: 0 0 16px; }
.pg-photo { position: relative; margin: 0; overflow: hidden; }
.pg-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-split .pg-photo { align-self: stretch; min-height: 420px; }
.pg-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 12% 26px; text-align: center;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.36;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}
.pg-photo figcaption.gold { color: var(--gold); }
.pg-photo figcaption strong { text-decoration: underline; text-decoration-color: rgba(211, 184, 144, .86); text-decoration-thickness: .1em; text-underline-offset: .18em; }
.pg-badge { position: absolute; right: 18px; bottom: 18px; width: clamp(70px, 8.2vw, 118px); height: auto; }

/* Enquiry card (same treatment everywhere the 17hats form appears) */
.form-card {
  background: #fff; border: 1px solid rgba(63, 29, 0, .1); border-radius: 14px;
  padding: clamp(8px, 1.4vw, 18px); box-shadow: 0 30px 60px -38px rgba(16, 51, 27, .45);
}
.form-card iframe { display: block; width: 100%; min-height: 620px; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.reel .form-card iframe { min-height: 620px; background: transparent; box-shadow: none; border-radius: 0; }
.form-alt { font-size: 15px; margin: 16px 4px 0; color: rgba(63, 29, 0, .82); line-height: 1.5; }
.form-alt a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Full-width video */
.pg-video { padding-block: clamp(20px, 3vw, 40px); }
.pg-video h2 { text-align: center; color: var(--brown); font-size: clamp(30px, 3.4vw, 48.8px); line-height: 1.25; margin-bottom: 22px; }
.pg-video .video-frame video, .pg-media .video-frame video { aspect-ratio: 16 / 9; }

/* Logo strip (drag / swipe / auto-drift), used on the home page and service pages */
.logo-strip {
  height: 140px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 240px, #000 calc(100% - 240px), transparent 100%);
}
.logo-strip::-webkit-scrollbar { display: none; }
.logo-strip.dragging { cursor: grabbing; }
.logo-strip .strip-track { display: flex; width: max-content; height: 100%; align-items: center; list-style: none; margin: 0; padding: 0; }
.logo-strip li { flex: none; margin-right: 30px; }
.logo-strip img { width: 140px; height: auto; object-fit: contain; border-radius: 6px; pointer-events: none; }
.logo-strip img.small-logo { transform: scale(.7); }
@media (max-width: 768px) {
  .logo-strip {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
.clients.light { background: var(--bg); }
.clients.light h2, .clients.light h3 { color: var(--brown); }
.clients h2 { color: var(--gold); font-size: clamp(40px, 4.85vw, 69.8px); text-align: center; line-height: 1.3; }

/* Google review cards with the client's logo in the corner */
.single-review { position: relative; }
.single-review.has-brand { padding-bottom: 58px !important; }
.rev-brand { position: absolute; right: 18px; bottom: 14px; max-height: 34px; max-width: 96px; width: auto; height: auto; object-fit: contain; }

/* About split */
.pg-about { display: grid; grid-template-columns: minmax(0, 882fr) minmax(0, 470fr); gap: clamp(28px, 4.2vw, 60px); align-items: center; padding-block: clamp(40px, 5vw, 70px); }
.pg-about .pg-photo > img:first-child { aspect-ratio: 882 / 607; }
.pg-about.portrait { grid-template-columns: minmax(0, 821fr) minmax(0, 437fr); }
.pg-about.portrait .pg-photo > img:first-child { aspect-ratio: 821 / 1126; }
.pg-about-text { text-align: center; }
.pg-about-text h2 { font-size: clamp(34px, 4.2vw, 60.9px); color: var(--brown); line-height: 1.25; margin-bottom: .35em; }
.pg-about-text p { font-size: clamp(17px, 1.7vw, 24.6px); line-height: 1.6; margin: 0 0 1em; }

/* "I perform..." feature rows */
.pg-features { padding-block: clamp(24px, 3.5vw, 44px); }
.pg-features > hr { border: 0; border-top: 1px solid rgba(63, 29, 0, .3); margin: 0 0 22px; }
.pg-features-title { text-align: center; color: var(--brown); font-size: clamp(28px, 4.2vw, 60.9px); line-height: 1.25; margin-bottom: clamp(24px, 3vw, 40px); }
.pg-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-bottom: clamp(28px, 3.5vw, 48px); }
.pg-feature.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.pg-feature.flip > .pg-photo { order: -1; }
.pg-feature .pg-photo > img:first-child { aspect-ratio: 764 / 640; }
.pg-feature-text { text-align: center; padding-inline: clamp(0px, 2.5vw, 40px); }
.pg-feature-text .pg-kicker, .pg-kicker { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 3vw, 43.6px); line-height: 1.3; color: var(--brown); margin: 0; }
.pg-feature-title {
  font-size: clamp(32px, 4.2vw, 60.9px); color: var(--brown); line-height: 1.1; margin: .05em 0 .55em;
  text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em;
}
.pg-feature-text p { font-size: clamp(17px, 1.48vw, 21.3px); line-height: 1.6; margin: 0; }

/* Long-form copy (trade shows, case study) */
.pg-prose { padding-block: clamp(28px, 4.5vw, 64px); }
.pg-prose h2 { color: var(--brown); font-size: clamp(28px, 3.3vw, 48px); line-height: 1.2; margin: 1.5em 0 .5em; }
.pg-prose > :first-child, .pg-prose .pg-narrow > :first-child { margin-top: 0; }
.pg-prose p, .pg-prose li { font-size: 18px; line-height: 1.65; }
.pg-prose p { margin: 0 0 1em; }
.pg-prose ul { padding-left: 1.25em; margin: 0 0 1.2em; }
.pg-prose li { margin: .4em 0; }
.pg-prose li::marker { color: var(--gold); }
.pg-prose strong { font-weight: 600; }
.pg-prose blockquote {
  margin: 0 0 .8em; padding: 22px 26px; background: #fff; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; font-style: italic; color: var(--green);
}
.pg-media { display: grid; grid-template-columns: minmax(0, 404fr) minmax(0, 759fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding-block: clamp(28px, 4.5vw, 64px); }
.pg-media .pg-prose { padding: 0; }

/* About page */
.pg-band { position: relative; overflow: hidden; background: var(--green); text-align: center; padding: clamp(64px, 8vw, 96px) var(--gutter); }
.pg-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-band::after { content: ""; position: absolute; inset: 0; background: rgba(16, 51, 27, .35); }
.pg-band h2 { position: relative; z-index: 1; color: var(--gold); line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.pg-band h2 span { display: block; }
.pg-band .l1 { font-size: clamp(18px, 2.1vw, 30px); }
.pg-band .l2 { font-size: clamp(26px, 3.4vw, 49px); margin: .35em 0; }
.pg-band .l3 { font-size: clamp(20px, 2.35vw, 33.8px); }
.pg-bio { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 582fr); gap: clamp(28px, 5vw, 70px); align-items: start; padding-block: clamp(36px, 4vw, 50px) clamp(40px, 5vw, 70px); }
.pg-bio .pg-photo { border-radius: 24px; }
.pg-bio .pg-photo > img:first-child { aspect-ratio: 700 / 1017; }
.pg-bio h1 { color: var(--brown); font-size: clamp(36px, 4vw, 57.5px); line-height: 1.25; margin-bottom: .45em; }
.pg-bio p { font-size: 17.7px; line-height: 1.6; margin: 0 0 1em; }
.pg-btn {
  display: inline-block; background: var(--green); color: var(--gold); font-family: var(--font-head); font-weight: 700;
  font-size: 16px; letter-spacing: .05em; padding: 17px 32px; border-radius: 300px; border: 0; cursor: pointer;
  transition: background-color .25s ease;
}
.pg-btn:hover { background: #1c5230; }
.pg-btn.white { color: #fff; }
.pg-btn.brown { background: var(--brown); color: #E2EAF8; }
.pg-btn.brown:hover { background: #5a2b03; }
.pg-center { text-align: center; }
.pg-h2 { color: var(--brown); font-size: clamp(32px, 4.2vw, 60.9px); line-height: 1.25; text-align: center; margin-bottom: 24px; }
.pg-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: clamp(30px, 4vw, 50px); }
.pg-quote-card { background: #fff; border-radius: 25px; padding: 16px 22px 26px; }
.pg-quote-card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pg-quote-card .top img { height: 36px; width: auto; }
.pg-quote-card .checked { font-size: 15px; letter-spacing: 1px; }
.pg-quote-card p { margin: 0; line-height: 1.45; }

/* Contact */
/* Contact: a cream band, the words on the left, the form card on the right, the photo shown properly */
.cx { background: var(--cream); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "intro form" "pic form"; gap: clamp(30px, 4vw, 52px) clamp(32px, 6vw, 96px); align-items: start; padding: clamp(50px, 7vw, 110px) max(var(--gutter), calc((100% - 1240px) / 2)); }
.cx-intro { grid-area: intro; }
.cx-form { grid-area: form; scroll-margin-top: 20px; }
.cx-pic { grid-area: pic; margin: 0; }
.cx h1 { color: var(--brown); font-size: clamp(42px, 5vw, 72px); line-height: 1.05; margin-bottom: .5em; }
.cx-intro p { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; margin: 0 0 .4em; }
.cx-intro .cx-label { margin-top: 1.4em; margin-bottom: .1em; }
.cx-big a { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; color: var(--green); text-decoration: underline; text-decoration-color: rgba(16, 51, 27, .3); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.cx-big a:hover { text-decoration-color: var(--green); }
.cx-intro .cx-more { margin-top: 1.8em; max-width: 30em; }
.cx-pic img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 126px, 100% 100%, 0 100%); }
.cx .form-card { box-shadow: 0 30px 60px -36px rgba(63, 29, 0, .45); }
@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "pic"; }
}

/* Blog */
.pg-blog { max-width: 820px; margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--gutter); }
.pg-blog > h1 { color: var(--brown); font-size: clamp(40px, 5vw, 64px); margin-bottom: 26px; }
.post-card { border-top: 1px solid rgba(63, 29, 0, .15); padding: 30px 0; }
.post-card time, .post .meta { font-size: 14px; color: #4b5f50; letter-spacing: .02em; }
.post-card h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin: .3em 0 .45em; }
.post-card h2 a { color: var(--green); }
.post-card p { margin: 0 0 1em; line-height: 1.65; }
.more { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.post { max-width: 760px; margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--gutter); }
.post h1 { color: var(--brown); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.15; margin: .3em 0 .4em; }
.post h2 { color: var(--green); font-size: clamp(22px, 2vw, 26px); line-height: 1.3; margin: 1.7em 0 .45em; }
.post p { font-size: 18px; line-height: 1.75; margin: 0 0 1.05em; }
.post .back { font-size: 15px; }
.post-author { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(63, 29, 0, .15); margin-top: 40px; padding-top: 24px; font-size: 15px; }
.post-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

/* Gallery pages */
.pg-gal-hero { position: relative; overflow: hidden; min-height: clamp(460px, 51vw, 732px); display: grid; place-items: center; text-align: center; padding: 70px var(--gutter); color: #d2d1d1; }
.pg-gal-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-gal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, .25), rgba(20, 20, 20, .55)); }
.pg-gal-hero > div { position: relative; z-index: 1; max-width: 1100px; }
.pg-gal-hero h1 { color: #e4e3e3; font-size: clamp(36px, 5.6vw, 80.7px); line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.pg-gal-hero p { margin: .6em 0 0; font-size: clamp(17px, 1.7vw, 24.6px); }
.pg-gal-hero p + p { font-size: 17.7px; margin-top: .2em; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.pg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
.pg-gallery a { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e8e5df; }
.pg-gallery img { width: 100%; height: 100%; object-fit: cover; }
.pg-thanks { text-align: center; max-width: 700px; margin: 0 auto; padding: clamp(40px, 5vw, 60px) var(--gutter) clamp(50px, 6vw, 80px); }
.pg-thanks p { margin: 0 0 .9em; }
.pg-thanks a:not(.pg-btn) { text-decoration: underline; text-underline-offset: 3px; }
.pg-thanks .pg-actions { flex-direction: column; align-items: center; }
.pg-thanks .pg-btn { min-width: 300px; }

/* Lightbox for galleries */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 11, .94); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-size: 42px; line-height: 1; padding: 14px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lightbox .lb-x { top: 10px; right: 14px; font-size: 38px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px; }

@media (max-width: 900px) {
  .pg-split, .pg-split.flip, .pg-about, .pg-about.portrait, .pg-feature, .pg-feature.flip, .pg-media, .pg-bio { grid-template-columns: 1fr; }
  .pg-split > .pg-photo, .pg-split.flip > .pg-photo { order: -1; min-height: 0; }
  .pg-split .pg-photo > img:first-child { aspect-ratio: 4 / 3; height: auto; }
  .pg-feature > .pg-photo, .pg-feature.flip > .pg-photo { order: -1; }
  .pg-quotes { grid-template-columns: 1fr; }
  .pg-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px; }
}
@media (max-width: 767px) {
  .form-card iframe { min-height: 600px; }
  .pg-bio .pg-photo { max-width: 420px; margin-inline: auto; }
  .pg-thanks .pg-btn { min-width: 0; width: 100%; }
}

/* =====================================================================
   ROUND 3 REFINEMENTS
   ===================================================================== */
@font-face { font-family: 'Google Sans'; src: url('/assets/fonts/GoogleSans.woff2?v=9223214a') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/assets/fonts/Roboto.woff2?v=41ca6b7e') format('woff2'); font-weight: 400 500; font-display: swap; }

:root { --gap: clamp(52px, 7vw, 104px); }

/* Floating header: solid brand green, no see-through glass */
.site-header.is-floating { background: var(--green); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Hero copy: stronger shadow so it reads on any photo */
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .55); }
.hero-sub { position: relative; z-index: 2; max-width: 900px; }
.hero-sub p { margin: 0; text-shadow: 0 1px 16px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .65); }
.hero-sub .hero-lead { font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; margin-bottom: .55em; }
.hero-sub .hero-lead + p { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.6; }
a.quiet { color: inherit; text-decoration: none; background: none; cursor: text; }

/* Videos: title sits on the video and fades when it plays; bigger play button */
.video-frame.has-title .vf-title {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; margin: 0;
  padding: clamp(18px, 2.4vw, 32px) 24px 70px; text-align: center; pointer-events: none;
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 3vw, 44px); line-height: 1.15;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  transition: opacity .45s ease;
}
.video-frame.portrait.has-title .vf-title { font-size: clamp(21px, 2vw, 27px); padding-bottom: 56px; }
.video-frame.is-playing .vf-title { opacity: 0; }
.reel h2.vf-title { color: #fff; margin: 0; }
.video-frame .play { width: clamp(104px, 12.8vw, 184px); height: clamp(104px, 12.8vw, 184px); }
.video-frame.portrait .play { width: clamp(96px, 10vw, 140px); height: clamp(96px, 10vw, 140px); }
.video-frame .play svg { width: 40%; height: 40%; margin-left: 7%; }
.reel-video { padding-top: calc(clamp(28px, 3.1vw, 48px) * 1.25 + 30px); }
.reel h2.enquire a.hand { text-decoration: none; display: inline-block; }
.reel h2.enquire a.hand:hover { color: inherit; }

/* Google reviews that look like the real thing */
.reviews-head .g-heading {
  font-family: 'Google Sans', Roboto, Arial, sans-serif; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  color: #5f6368; font-size: clamp(32px, 4vw, 56px);
}
.reviews-head .g-heading a span { display: inline; transform: none !important; }
.g-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.g-review {
  position: relative; background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 16px 16px 18px;
  font-family: Roboto, Arial, sans-serif; color: #202124; box-shadow: 0 1px 2px rgba(60, 64, 67, .1);
}
.g-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.g-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #f1f3f4; }
.g-who { flex: 1; min-width: 0; }
.g-name { font-family: 'Google Sans', Roboto, Arial, sans-serif; font-weight: 500; font-size: 15px; line-height: 20px; color: #202124; }
.g-name a { color: inherit; text-decoration: none; }
.g-name a:hover { text-decoration: underline; }
.g-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.g-stars { display: inline-flex; gap: 1px; }
.g-stars svg { width: 14px; height: 14px; fill: #fbbc04; }
.g-when { font-size: 13px; line-height: 18px; color: #70757a; }
.g-logo { width: 20px; height: 20px; flex: none; align-self: flex-start; }
.g-text { margin: 0; font-size: 14px; line-height: 20px; color: #202124; }
.g-review.has-brand { padding-bottom: 64px; }
.rev-brand { position: absolute; right: 16px; bottom: 14px; height: 36px; width: auto; max-width: 150px; max-height: none; object-fit: contain; }
.rev-brand.big { height: 48px; max-width: 170px; }
@media (max-width: 900px) { .g-reviews { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .g-reviews .g-review:nth-child(n+4) { display: none; } }

/* What people are saying: Uri's video first, then the quotes */
.saying .video-frame.portrait { width: min(399px, 100%); margin: 0 auto clamp(32px, 4vw, 52px); }
.saying h3 { margin-bottom: clamp(18px, 2.6vw, 32px); }
.saying-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 48px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 767px) { .saying-quotes { grid-template-columns: 1fr; } }

/* Closing section: taller photo, beige text on translucent green, second line 2s later */
.cta { min-height: clamp(560px, 84vh, 960px); }
.cta .cta-lead, .cta h3 { color: var(--cream); }
.marker { background-image: linear-gradient(rgba(16, 51, 27, .74), rgba(16, 51, 27, .74)); }
.cta .late { --d: 2s; }
.cta .late .marker { transition-delay: 2.25s; }

/* Photo reel: centred arrows, a steady edge shade instead of dimming slides */
.photo-reel-track img, .photo-reel-track img.is-active { filter: none; }
.photo-reel::before, .photo-reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15%; z-index: 1; pointer-events: none; }
.photo-reel::before { left: 0; background: linear-gradient(90deg, rgba(10, 24, 15, .5), rgba(10, 24, 15, 0)); }
.photo-reel::after { right: 0; background: linear-gradient(270deg, rgba(10, 24, 15, .5), rgba(10, 24, 15, 0)); }

/* Brand image treatment on the homepage hero and photo reel, as on the old site: Daniel's 2025 overlays, green over
   the left half and gold (turned 180°) over the right half, on wide screens only */
.brand-overlay { display: none; }
@media (min-width: 992px) {
  .brand-overlay { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .brand-overlay::before, .brand-overlay::after { content: ""; position: absolute; top: 0; width: 50%; height: 100%; background: center / cover no-repeat; }
  .brand-overlay::before { left: 0; background-image: url('/assets/img/overlays/DanielBower_2025_Image_Overlay_16x9_Green.png?v=73262a1e'); }
  .brand-overlay::after { right: 0; background-image: url('/assets/img/overlays/DanielBower_2025_Image_Overlay_16x9_Gold.png?v=a4028c5e'); transform: rotate(180deg); }
}
.reel-btn { display: grid; place-items: center; padding: 0; line-height: 0; font-size: 0; }
.reel-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reel-btn.prev svg { transform: translateX(-1px); }
.reel-btn.next svg { transform: translateX(1px); }
@media (max-width: 767px) {
  .photo-reel { height: clamp(240px, 64vw, 48vh); }
  .photo-reel::before, .photo-reel::after { width: 9%; }
  .reel-btn { width: 42px; height: 42px; opacity: .92; }
  .reel-btn.prev { left: 10px; }
  .reel-btn.next { right: 10px; }
}

/* More breathing room between homepage sections */
.reel { padding-bottom: 0; }
.clients { margin-top: var(--gap); }
.photo-reel { margin-top: var(--gap); }
.reviews-head { padding-top: var(--gap); }
.band { margin-top: calc(var(--gap) * .8); }
.saying { padding-top: var(--gap); }
.badges { padding-top: var(--gap); }
.cta { margin-top: calc(var(--gap) * .6); }

/* Mobile menu: the burger becomes the X */
.menu-toggle span { transition: transform .35s var(--ease-out); transform-origin: center; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
body.menu-open .header-slot { z-index: 60; }
body.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; transform: none !important; }

/* FAQ answers glide open and closed (JS sets the height) */
.js .bm-faq-answer { display: block; height: 0; overflow: hidden; opacity: 0; transition: height .45s var(--ease-out), opacity .3s ease; }
.js .bm-faq details[open] .bm-faq-answer { opacity: 1; }
.js .bm-faq details.closing .bm-faq-answer { opacity: 0; }
.js .bm-faq details.closing summary::after { transform: translateY(-50%) rotate(0); color: var(--brown); }
.js .bm-faq details.closing summary { color: var(--green); }
.bm-faq-answer-inner { overflow: visible; }

/* Lightbox: eased open/close, slides between photos, touch-friendly */
.lightbox { display: none; align-items: center; justify-content: center; background: rgba(8, 14, 10, 0); transition: background-color .3s ease; touch-action: none; }
.lightbox.open { display: flex; }
.lightbox.show { background: rgba(8, 14, 10, calc(.95 - var(--drag, 0) * .6)); }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 72px 84px; }
.lightbox .lb-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7); user-select: none; -webkit-user-drag: none;
  opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .45s var(--ease-out);
}
.lightbox.show .lb-img { opacity: 1; transform: none; }
.lightbox .lb-img.no-anim { transition: none !important; }
.lightbox.show .lb-img.out-left { opacity: 0; transform: translateX(-56px); transition: opacity .17s ease, transform .17s ease; }
.lightbox.show .lb-img.out-right { opacity: 0; transform: translateX(56px); transition: opacity .17s ease, transform .17s ease; }
.lightbox.show .lb-img.from-right { opacity: 0; transform: translateX(56px); }
.lightbox.show .lb-img.from-left { opacity: 0; transform: translateX(-56px); }
.lightbox button, .lightbox .lb-dl {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; cursor: pointer; font-size: 0;
  opacity: 0; transition: opacity .3s ease .08s, background-color .2s ease;
}
.lightbox.show button, .lightbox.show .lb-dl { opacity: 1; }
.lightbox button:hover, .lightbox .lb-dl:hover { background: rgba(255, 255, 255, .2); }
.lightbox svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-x { top: 16px; right: 16px; }
.lightbox .lb-dl { top: 16px; right: 74px; }
.lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev svg { transform: translateX(-1px); }
.lightbox .lb-next svg { transform: translateX(1px); }
.lightbox .lb-count { position: absolute; top: 30px; left: 24px; bottom: auto; right: auto; color: rgba(255, 255, 255, .72); font-size: 14px; letter-spacing: .08em; }
.lb-spin { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; border-radius: 50%; animation: lbspin .8s linear infinite; display: none; }
.lightbox.loading .lb-spin { display: block; }
@keyframes lbspin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .lb-stage { padding: 70px 8px 40px; }
  .lightbox .lb-prev, .lightbox .lb-next { display: none; }
}
@media (hover: hover) { .pg-gallery a img { transition: opacity .25s ease; } .pg-gallery a:hover img { opacity: .9; } }

/* =====================================================================
   ROUND 4
   ===================================================================== */
/* Hero: original wording, strong shadow, the link isn't underlined */
.hero p.hero-sub { text-shadow: 0 1px 16px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .65); }
.hero-sub a.quiet strong { background: none; padding-bottom: 0; }
.hero-sub a.quiet:hover strong { color: inherit; }

/* Brown band: new wording */
.band .band-lead { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.3; max-width: 940px; margin-inline: auto; }
.band .band-sub { color: var(--cream); opacity: .92; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; max-width: 780px; margin: 1em auto 0; }

/* Play button: circle back to its original size, triangle twice as big */
.video-frame .play, .video-frame.portrait .play { width: 92px; height: 92px; }
.video-frame .play svg { width: 68px; height: 68px; margin-left: 6px; }

/* Reviews heading: only the word "Google" in Google's font */
.reviews-head .g-heading { font-family: var(--font-head); font-weight: 700; color: var(--brown); letter-spacing: .01em; font-size: clamp(34px, 4.25vw, 60.9px); }
.reviews-head .g-heading .g-brand { font-family: 'Google Sans', Roboto, Arial, sans-serif; font-weight: 500; letter-spacing: -.01em; }

/* Review cards: compact, and all the same height on desktop (long ones get Google's "More") */
.g-review { padding: 13px 14px 14px; display: flex; flex-direction: column; }
.g-head { margin-bottom: 8px; }
.g-text { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.g-review.open .g-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.g-more { align-self: flex-start; background: none; border: 0; padding: 4px 0 0; margin: 0; font: 500 14px/20px Roboto, Arial, sans-serif; color: #1a73e8; cursor: pointer; }
.g-more:hover { text-decoration: underline; }
.g-review.has-brand { padding-bottom: 56px; }
@media (min-width: 901px) { .g-reviews { grid-auto-rows: 1fr; align-items: stretch; } }
.g-note { text-align: center; margin: 18px 0 0; font-size: 15px; color: var(--brown); font-style: italic; }

/* Services dropdown: the underline sits under the word, not across the whole menu */
.nav-folder-menu a { align-self: flex-start; }

/* Styled lines that aren't section headings (keeps the page outline in order) */
.band-lead, .cta-lead { font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; margin: 0; }
.band .band-lead { color: var(--cream); }

/* Local SEO pages (Hertfordshire): case study + areas list */
.pg-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; padding-block: clamp(20px, 3.5vw, 48px); }
.pg-case .pg-photo { border-radius: 18px; }
.pg-case .pg-photo > img:first-child { aspect-ratio: 3 / 2; }
.pg-case .pg-prose { padding: 0; }
.pg-case .pg-prose h2 { margin-top: .1em; }
.pg-case-kicker { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px !important; color: var(--brown); margin: 0 0 .3em !important; }
.pg-prose ul.pg-areas { list-style: none; padding: 0; margin: .4em 0 1.4em; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pg-prose ul.pg-areas li { margin: 0; font-size: 15.5px; line-height: 1.2; padding: 8px 14px; border-radius: 999px; background: rgba(211, 184, 144, .22); border: 1px solid rgba(63, 29, 0, .14); color: var(--brown); }
@media (max-width: 900px) {
  .pg-case { grid-template-columns: 1fr; }
}
.bm-faq-media img { height: auto; }

/* Uri Geller video: play button lower down (on his shirt) so his face shows */
.video-frame.portrait .play { inset: auto 0 calc(30% - 46px) 0; margin: 0 auto; }

.footer-legal button { font: inherit; letter-spacing: inherit; color: #E2D0B5; background: none; border: 0; padding: 0; cursor: pointer; }
.footer-legal button:hover { text-decoration: underline; text-underline-offset: 4px; opacity: .85; }

.legal-table { overflow-x: auto; margin: 0 0 1.4em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; min-width: 560px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid rgba(63, 29, 0, .15); }
.legal th { color: var(--green); font-weight: 700; }
.legal-link { font: inherit; color: var(--green); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Thank-you page after an enquiry (Cal.com booking) */
.pg-thanks-call { text-align: center; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(30px, 5vw, 60px); }
.pg-thanks-call h1 { color: var(--brown); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.15; margin: 0 0 .35em; }
.pg-thanks-call p { color: var(--brown); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; margin: 0 auto 28px; max-width: 34ch; }
.cal-embed { width: min(1000px, 100%); min-height: 640px; margin: 0 auto; overflow: auto; }

/* Homepage: magic / hosting / customised line under the band */

/* Forms: one short line under the heading */
.pg-form .form-intro { text-align: center; color: var(--brown); font-size: 16.5px; line-height: 1.5; margin: -6px auto 16px; max-width: 42ch; }
.pg-cta { text-align: center; margin: 1.6em 0 0; }

/* Trade shows: Attract > Engage > Connect > Hand over */
.pg-steps { padding-block: clamp(20px, 3.5vw, 48px); }
.pg-steps h2 { color: var(--brown); font-size: clamp(28px, 3.3vw, 48px); line-height: 1.2; margin: 0 0 .7em; }
.pg-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.pg-steps li { position: relative; background: #fff; border: 1px solid rgba(63, 29, 0, .12); border-radius: 16px; padding: 18px 18px 20px; }
.pg-steps li + li::before { content: "→"; position: absolute; left: -15px; top: 26px; color: var(--gold); font-size: 20px; line-height: 1; }
.pg-step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--cream); font-weight: 700; font-size: 14px; }
.pg-steps h3 { color: var(--green); font-size: 20px; margin: 10px 0 6px; }
.pg-steps p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.pg-steps .pg-steps-outro { margin: 18px 0 0; font-size: 18px; }
@media (max-width: 900px) { .pg-steps ol { grid-template-columns: 1fr 1fr; } .pg-steps li:nth-child(3)::before { display: none; } }
@media (max-width: 560px) { .pg-steps ol { grid-template-columns: 1fr; } .pg-steps li + li::before { content: "↓"; left: 20px; top: -17px; } .pg-steps li:nth-child(3)::before { display: block; } }

/* Weddings / private events: when magic fits */
.pg-moments { padding-block: clamp(20px, 3.5vw, 48px); }
.pg-moments h2 { color: var(--brown); font-size: clamp(28px, 3.3vw, 48px); line-height: 1.2; margin: 0 0 .7em; }
.pg-moments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pg-moments-grid > div { background: #fff; border: 1px solid rgba(63, 29, 0, .12); border-radius: 16px; padding: 18px 20px; }
.pg-moments h3 { color: var(--green); font-size: 20px; margin: 0 0 6px; }
.pg-moments p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.pg-moments a, .pg-steps a { text-decoration: underline; text-underline-offset: 3px; }

/* Case study quote */
.pg-prose blockquote cite { display: block; margin-top: .6em; font-style: normal; font-size: 15.5px; color: var(--sage, #6b6b67); }
.pg-split-text { align-self: center; }
.pg-split-text h2 { margin-top: 0; }

/* About: the quote above the H1 is a styled line, not a heading */
.pg-band .pg-band-quote { position: relative; z-index: 1; margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--gold); line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.pg-band .pg-band-quote span { display: block; }
.pg-moments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-moments-grid > div:last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 900px) { .pg-moments-grid { grid-template-columns: 1fr; } .pg-moments-grid > div:last-child:nth-child(3n+2) { grid-column: auto; } }
.pg-prose p a, .pg-prose li a { text-decoration: underline; text-underline-offset: 3px; }

/* Bar & Bat Mitzvah page: bullet lists and quotes inside the feature blocks, testimonial row */
.pg-feature-list { display: inline-block; text-align: left; margin: 14px 0 0; padding-left: 1.2em; }
.pg-feature-list li { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.5; margin: .35em 0; }
.pg-feature-list li::marker { color: var(--gold); }
.pg-feature-quote { margin: 18px auto 0; max-width: 460px; padding: 16px 18px; background: #fff; border-radius: 14px; border: 1px solid rgba(63, 29, 0, .12); font-size: 16px; line-height: 1.5; color: var(--brown); font-style: italic; }
.pg-feature-quote .stars, .pg-proof-quote .stars { display: block; color: var(--green); letter-spacing: .12em; font-style: normal; font-size: 18px; margin-bottom: 6px; }
.pg-feature-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.pg-proof { padding-block: clamp(24px, 4vw, 56px); }
.pg-proof-grid { display: grid; grid-template-columns: 1fr minmax(0, .8fr) 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; margin-top: 20px; }
.pg-proof-quote { margin: 0; background: var(--gold); border-radius: 16px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--brown); }
.pg-proof-quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.35; }
.pg-proof-quote figcaption { margin-top: 14px; font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.pg-proof-photo { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--green); }
.pg-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-proof-photo figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(16, 51, 27, .88); color: var(--cream); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.pg-proof-photo figcaption span { display: block; font-weight: 300; font-size: 13px; opacity: .9; }
@media (max-width: 900px) { .pg-proof-grid { grid-template-columns: 1fr; } .pg-proof-photo { max-width: 420px; justify-self: center; } }

/* ---------- Homepage: More than just magic (replaces the three pillars) ---------- */
.mtm { width: min(1164px, 100% - 2 * var(--gutter)); margin: clamp(40px, 5.5vw, 72px) auto 0; }
.mtm > h2 { text-align: center; color: var(--green); font-size: clamp(30px, 3vw, 43.6px); line-height: 1.3; margin-bottom: clamp(20px, 2.6vw, 34px); }
.mtm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.mtm-card { display: flex; flex-direction: column; background: var(--brown); color: var(--cream); padding: clamp(24px, 2.4vw, 36px); border-radius: 6px; }
.mtm-card h3 { color: var(--gold); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25; margin-bottom: .5em; }
.mtm-card p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; }
.mtm-more { margin-top: auto; padding-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; letter-spacing: .05em; color: var(--gold); }
.mtm-more span { display: inline-block; transition: transform .3s var(--ease-out); }
a.mtm-card { transition: background-color .3s ease; }
a.mtm-card:hover { background: #552a06; }
a.mtm-card:hover .mtm-more span { transform: translateX(4px); }
a.mtm-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mtm-tag { text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--brown); font-size: clamp(19px, 1.8vw, 25px); line-height: 1.4; margin: clamp(22px, 2.8vw, 36px) auto 0; max-width: 34ch; }
@media (max-width: 800px) { .mtm-cards { grid-template-columns: 1fr; } }

/* ---------- Custom magic (/custom-magic) ----------
   The brand line runs at 70deg, 11 to 5 on a clock: skewX(20deg) on tags and the steps line, and
   clip-path corner cuts whose drop is 2.747 x their width. Daniel asked for no circle-and-line decoration here. */
.cm-kicker { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: #4b5f50; margin: 0 0 18px; }
.cm-tag { display: inline-block; transform: skewX(20deg); background: var(--green); color: var(--gold); padding: 5px 14px; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; margin: 0; }
.cm-tag > span { display: inline-block; transform: skewX(-20deg); }
.cm-tag-gold { background: var(--gold); color: var(--green); }
.cm-cut { --c: 60px; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% calc(var(--c) * 2.747), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c) * 2.747)); }
.cm-loop { position: relative; z-index: 1; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--green); }
.cm-small { font-size: 15px !important; color: #4b5f50; }
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }
.cm-textlink { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--green); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .25s ease; }
.cm-textlink:hover { color: var(--brown); }
.cm-head { width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto clamp(26px, 3.5vw, 46px); }
.cm-head h2, .cm-promo h2, .cm-why h2, .cm-steps h2 { color: var(--brown); font-size: clamp(32px, 3.8vw, 54px); line-height: 1.12; }
.cm-head > p:not(.cm-kicker) { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; max-width: 44em; margin: 16px 0 0; }

/* Hero: words left, the MetricStream reveal right */
.cm-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: center; width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 90px) 0 clamp(48px, 6.5vw, 96px); }
.cm-hero h1 { color: var(--brown); font-size: clamp(40px, 4.7vw, 68px); line-height: 1.06; max-width: 12ch; }
.cm-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; max-width: 32em; margin: 24px 0 32px; }
.cm-hero-visual { margin: 0; }
.cm-hero-visual img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #1b1430; --c: 48px; }
.cm-hero-visual figcaption { margin-top: 14px; font-size: 14px; color: #4b5f50; text-align: center; }

/* The line, said once in words */
.cm-statement { background: var(--green); color: var(--cream); padding: clamp(42px, 6vw, 84px) var(--gutter); text-align: center; }
.cm-statement p { margin: 0 auto; max-width: 1180px; font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.5vw, 50px); line-height: 1.2; }
.cm-statement span { display: block; }
.cm-statement span + span { color: var(--gold); }

/* Real examples */
.cm-examples { padding: clamp(60px, 8vw, 116px) 0 clamp(36px, 5vw, 70px); }
.cm-mosaic { width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; display: grid; gap: clamp(14px, 1.5vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(250px, 23vw, 330px)); grid-template-areas: "r r b n" "r r k n" "c l g g"; }
.cm-mosaic > :nth-child(1) { grid-area: r; }
.cm-mosaic > :nth-child(2) { grid-area: b; }
.cm-mosaic > :nth-child(3) { grid-area: c; }
.cm-mosaic > :nth-child(4) { grid-area: k; }
.cm-mosaic > :nth-child(5) { grid-area: l; }
.cm-mosaic > :nth-child(6) { grid-area: n; }
.cm-mosaic > :nth-child(7) { grid-area: g; }
.cm-tile { position: relative; margin: 0; display: flex; flex-direction: column; min-height: 0; }
.cm-tile > img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; background: #e6e2dc; }
.cm-tile-tall > img { object-position: 50% 35%; }
.cm-tile figcaption { padding: 12px 2px 0; font-size: 15px; line-height: 1.45; }
.cm-tile figcaption .cm-tag { position: absolute; top: 14px; left: 16px; }
.cm-tile a { text-decoration: underline; text-underline-offset: 3px; }
.cm-tile q { font-style: italic; }
.cm-tile cite { font-style: normal; font-weight: 600; white-space: nowrap; }
.cm-tile cite::before { content: "– "; }
.cm-tile-text { padding: clamp(20px, 2vw, 30px); gap: 14px; justify-content: flex-end; }
.cm-tile-text .cm-tag { align-self: flex-start; margin-bottom: auto; }
.cm-tile-text p { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.28; }
.cm-tile-text a { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.cm-tile-green { background: var(--green); color: var(--cream); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 93px, 100% 100%, 0 100%); }
.cm-tile-green a { color: var(--gold); }
.cm-tile-gold { background: var(--gold); color: var(--green); }
.cm-tile-gold p { max-width: 15em; font-size: clamp(21px, 2vw, 30px); }

/* Synology: the case card, on deep green */
.cm-case-wrap { padding: clamp(30px, 5vw, 70px) var(--gutter); scroll-margin-top: 20px; }
.cm-case { position: relative; width: min(1240px, 100%); margin: 0 auto; background: var(--green); color: var(--cream); display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; padding: clamp(32px, 5vw, 76px) clamp(24px, 6vw, 96px) clamp(40px, 5vw, 76px) clamp(24px, 5vw, 76px); clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 176px, 100% 100%, 0 100%); }
.cm-case-visual { position: relative; width: min(380px, 100%); justify-self: center; }
.cm-case-visual .cm-loop { --c: 50px; }
.cm-case-text > .cm-tag { margin-bottom: 20px; }
.cm-case h2 { color: var(--cream); font-size: clamp(34px, 4vw, 58px); line-height: 1.08; margin-bottom: clamp(24px, 2.8vw, 38px); }
.cm-case-block { margin: 0 0 24px; }
.cm-case-block h3 { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.cm-case-block p { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; }
.cm-case-results { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 26px 0 0; }
.cm-case-results p { margin: 0; }
.cm-case-extras { margin: 30px 0 10px; font-size: 16px; line-height: 1.55; }
.cm-case-extras a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cm-case-note { margin: 0; font-size: 14.5px; line-height: 1.5; font-style: italic; color: rgba(226, 208, 181, .78); }

/* It doesn't have to be a card trick */
.cm-chips-wrap { padding: clamp(60px, 8vw, 116px) 0 clamp(30px, 4vw, 56px); }
.cm-chips { align-items: center; list-style: none; padding: 0 0 0 10px; width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 14px; }
.cm-chips li { transform: skewX(20deg); background: var(--green); color: var(--gold); padding: 13px 26px; font-family: var(--font-head); font-weight: 700; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; }
.cm-chips li > span { display: inline-block; transform: skewX(-20deg); }
.cm-chips li.alt { background: var(--gold); color: var(--green); }
.cm-chips li.out { background: transparent; color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown); }
.cm-chips li:nth-child(3), .cm-chips li:nth-child(5), .cm-chips li:nth-child(9) { font-size: clamp(19px, 2vw, 28px); padding: 14px 30px; }

/* Promo video before the event */
.cm-promo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; width: min(1040px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 110px); scroll-margin-top: 20px; }
.cm-promo-text p { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; max-width: 32em; margin: 16px 0 0; }

/* Why I can actually do this */
.cm-why { background: var(--cream); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; padding: clamp(60px, 8vw, 116px) max(var(--gutter), calc((100% - 1240px) / 2)); }
.cm-why-text p { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; max-width: 38em; margin: 0 0 16px; }
.cm-why-text { padding-top: 8px; }
.cm-why-lead .cm-big { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.3; color: var(--green); margin-top: 24px; max-width: 26em; }
.cm-why-text a:not(.pg-btn) { text-decoration: underline; text-underline-offset: 3px; }
.cm-why-text .cm-actions { margin-top: 30px; }

/* How it comes together: four steps whose circles sit on one 70deg line */
.cm-steps { width: min(940px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(60px, 8vw, 116px) 0 clamp(50px, 7vw, 100px); }
.cm-steps h2 { margin-bottom: clamp(30px, 4vw, 50px); }
.cm-steps ol { --row: 120px; position: relative; list-style: none; margin: 0; padding: 0; }
.cm-steps ol::before { content: ""; position: absolute; left: 27px; top: 28px; height: calc(var(--row) * (var(--n, 4) - 1)); width: 2px; background: var(--gold); transform: skewX(20deg); transform-origin: 0 0; }
.cm-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; height: var(--row); align-content: start; padding-left: calc(var(--i, 0) * var(--row) * .364); }
.cm-steps li:nth-child(2) { --i: 1; }
.cm-steps li:nth-child(3) { --i: 2; }
.cm-steps li:nth-child(4) { --i: 3; }
.cm-step-n { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 22px; }
.cm-steps h3 { color: var(--green); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; padding-top: 4px; }
.cm-steps li p { margin: 4px 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; }

/* Final call, with the form */
.cm-cta { background: var(--green); color: var(--cream); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 96px); align-items: start; padding: clamp(60px, 8vw, 116px) max(var(--gutter), calc((100% - 1240px) / 2)); }
.cm-cta h2 { color: var(--gold); font-size: clamp(34px, 4vw, 58px); line-height: 1.1; }
.cm-cta-text p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; margin: 20px 0 0; max-width: 26em; }
.cm-cta .cm-small { color: var(--cream); opacity: .85; margin-top: 28px; }
.cm-cta .cm-small a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .cm-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(240px, 46vw, 340px); grid-template-areas: "r r" "b n" "k n" "c l" "g g"; }
  .cm-case { grid-template-columns: 1fr; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 121px, 100% 100%, 0 100%); }
  .cm-case-visual { width: min(320px, 74%); justify-self: start; margin-bottom: 30px; }
  .cm-why { grid-template-columns: 1fr; gap: 24px; }
  .cm-cta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cm-hero { grid-template-columns: 1fr; padding-top: 28px; }
  .cm-hero h1 { max-width: none; }
  .cm-hero-visual { margin-top: 8px; }
  .cm-cut { --c: 44px; }
  .cm-promo { grid-template-columns: 1fr; }
  .cm-promo-video { width: min(320px, 100%); }
  .cm-chips li { padding: 11px 20px; }
  .cm-steps ol { --row: auto; }
  .cm-steps ol::before { height: calc(100% - 56px); transform: none; }
  .cm-steps li { height: auto; padding-left: 0; padding-bottom: 28px; }
}
@media (max-width: 520px) {
  .cm-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: none; }
  .cm-mosaic > * { grid-area: auto !important; }
  .cm-tile > img { flex: none; aspect-ratio: 4 / 3; }
  .cm-mosaic > :nth-child(6) > img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .cm-tile-text { min-height: 200px; }
  .cm-case-visual { width: 78%; }
}

/* Homepage: Uri Geller's video sits in the brand circle, crossed by the 70deg line */
.uri-ring { position: relative; isolation: isolate; width: min(399px, 100%); margin: 0 auto clamp(32px, 4vw, 52px); }
.uri-ring::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 152%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid var(--gold); border-radius: 50%; }
.uri-line { position: absolute; z-index: -1; left: 50%; top: -9%; width: 1.5px; height: 118%; background: var(--gold); transform: rotate(-20deg); }
.saying .uri-ring .video-frame.portrait { width: 100%; margin: 0; }
.saying { overflow-x: clip; }
@media (max-width: 600px) { .uri-ring { width: min(330px, 84%); } .uri-ring::before { width: 128%; } }

/* More than just magic, desktop: the cards step down a 70deg line. Each card's brown is a skewX(20deg)
   pseudo element, and every card is shifted right by (height + gap) x tan(20deg), so the slanted
   edges line up into one continuous line. Mobile keeps the plain stacked cards. */
@media (min-width: 901px) {
  .mtm-cards { --h: 206px; --g: 16px; --w: min(780px, 100% - 2 * var(--shift) - 80px); --shift: calc((var(--h) + var(--g)) * .364);
    display: flex; flex-direction: column; gap: var(--g); width: min(100%, 1000px); margin: 0 auto; }
  .mtm-card { position: relative; isolation: isolate; width: var(--w); height: var(--h); margin-left: calc(40px + var(--i, 0) * var(--shift)); background: none; border-radius: 0;
    display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); column-gap: 28px; align-content: center; align-items: start; padding: 0 clamp(60px, 5.4vw, 80px) 0 clamp(40px, 4vw, 60px); }
  .mtm-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brown); transform: skewX(20deg); transition: background-color .3s ease; }
  .mtm-card:nth-child(2) { --i: 1; }
  .mtm-card:nth-child(3) { --i: 2; }
  .mtm-card h3 { grid-row: span 2; margin: 0; padding-top: 2px; }
  .mtm-more { padding-top: 10px; }
  a.mtm-card, a.mtm-card:hover { background: none; }
  a.mtm-card:hover::before { background: #552a06; }
}
@media (min-width: 901px) and (max-width: 1180px) { .mtm-cards { --h: 230px; } .mtm-card { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); } }

/* Cookie banner = CookieConsent (assets/css/vendor/cookieconsent.css) in the brand colours. "html #cc-main" outranks
   the library's own "#cc-main" rules whichever file loads last. Reject and Accept are the same size, as the ICO asks;
   Accept is filled gold, Reject is a gold outline (Daniel's choice), "Choose" is a plain link. */
html #cc-main {
  --cc-font-family: 'Urbane', 'General Sans', system-ui, sans-serif;
  --cc-z-index: 90;
  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 999px;
  --cc-bg: #10331B;
  --cc-primary-color: #E2D0B5;
  --cc-secondary-color: #E2D0B5;
  --cc-link-color: #D3B890;
  --cc-btn-primary-bg: #D3B890;
  --cc-btn-primary-color: #10331B;
  --cc-btn-primary-border-color: #D3B890;
  --cc-btn-primary-hover-bg: #e6cda6;
  --cc-btn-primary-hover-color: #10331B;
  --cc-btn-primary-hover-border-color: #e6cda6;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #E2D0B5;
  --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: rgba(211, 184, 144, .12);
  --cc-btn-secondary-hover-color: #E2D0B5;
  --cc-btn-secondary-hover-border-color: transparent;
  --cc-separator-border-color: rgba(226, 208, 181, .18);
  --cc-toggle-on-bg: #D3B890;
  --cc-toggle-off-bg: rgba(226, 208, 181, .35);
  --cc-toggle-on-knob-bg: #10331B;
  --cc-toggle-off-knob-bg: #10331B;
  --cc-toggle-enabled-icon-color: #D3B890;
  --cc-toggle-disabled-icon-color: #10331B;
  --cc-toggle-readonly-bg: rgba(226, 208, 181, .55);
  --cc-toggle-readonly-knob-bg: #10331B;
  --cc-toggle-readonly-knob-icon-color: #E2D0B5;
  --cc-cookie-category-block-bg: rgba(255, 255, 255, .04);
  --cc-cookie-category-block-border: rgba(226, 208, 181, .18);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, .07);
  --cc-cookie-category-block-hover-border: rgba(226, 208, 181, .28);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, .05);
  --cc-overlay-bg: rgba(0, 0, 0, .55);
  --cc-footer-bg: #0c2915;
  --cc-footer-color: #E2D0B5;
  --cc-footer-border-color: rgba(226, 208, 181, .18);
  --cc-webkit-scrollbar-bg: rgba(226, 208, 181, .3);
}
html #cc-main .cm, html #cc-main .pm { box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
html #cc-main .cm__desc, html #cc-main .pm__section-desc { font-size: 15px; line-height: 1.5; color: #E2D0B5; }
html #cc-main a { color: #D3B890; text-decoration: underline; text-underline-offset: 3px; }
html #cc-main .cm__btn, html #cc-main .pm__btn { font-weight: 700; font-size: 15px; border-width: 2px; }
html #cc-main .cm__btn[data-role="necessary"], html #cc-main .pm__btn[data-role="necessary"] {
  background: transparent; color: #D3B890; border-color: #D3B890; }
html #cc-main .cm__btn[data-role="necessary"]:hover, html #cc-main .pm__btn[data-role="necessary"]:hover {
  background: rgba(211, 184, 144, .12); color: #D3B890; border-color: #D3B890; }
html #cc-main .cm__btn[data-role="show"] { text-decoration: underline; text-underline-offset: 3px; font-weight: 400; font-size: 14px; }
html #cc-main .cm__btn:focus-visible, html #cc-main .pm__btn:focus-visible { outline: 2px solid #E2D0B5; outline-offset: 2px; }
@media print { #cc-main { display: none; } }

/* Gallery whose old page had no heading (David's 80th): its first line is the heading, looking like the line it was */
.pg-gal-hero h1.pg-gal-line { color: inherit; font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.7vw, 24.6px); line-height: 1.5; text-shadow: none; margin: .6em 0 0; }
.pg-gal-hero h1.pg-gal-line + p { font-size: 17.7px; margin-top: .2em; }

/* Gig tools copied from the old site (/trick, /cryptext, /sigaba, /props). Each tool's own styles are scoped inside its page. */
.gt { background: var(--bg); padding: clamp(24px, 4vw, 48px) var(--gutter); }
.gt-note { text-align: center; max-width: 700px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) var(--gutter) clamp(48px, 6vw, 72px); }
.gt-trick { position: relative; min-height: max(100svh, 760px); display: grid; place-items: center; padding: 60px var(--gutter); overflow: hidden; background: #111; }
.gt-trick-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gt-trick #magic-trick-container { position: relative; z-index: 1; }
/* Fonts as the old site showed them: buttons, and all of Sigaba's controls, in the site font */
.gt.gt-cryptext button, .gt.gt-sigaba, .gt.gt-sigaba textarea, .gt.gt-sigaba input, .gt.gt-sigaba button { font-family: var(--font-body); }

/* Proposals (/proposal/<client>, Pages CMS -> Proposals). Reuses the steps line, chips and quotes from the other pages. */
.pr-hero { position: relative; overflow: hidden; min-height: clamp(420px, 46vw, 640px); display: grid; place-items: center; text-align: center; padding: 70px var(--gutter); color: var(--cream); }
.pr-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 51, 27, .55), rgba(16, 51, 27, .85)); }
.pr-hero > div { position: relative; z-index: 1; max-width: 1000px; }
.pr-hero h1 { color: #fff; font-size: clamp(40px, 6vw, 84px); line-height: 1.05; margin: .35em 0 .25em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.pr-hero p:last-child { margin: 0; font-size: clamp(17px, 1.7vw, 23px); }
.pr-letter { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; width: min(900px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(50px, 6vw, 90px) 0 clamp(30px, 4vw, 50px); }
.pr-letter > img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.pr-letter p { margin: 0 0 .9em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.pr-hi { font-family: var(--font-head); font-weight: 700; color: var(--green); font-size: clamp(22px, 2vw, 28px) !important; }
.pr-sign { font-family: var(--font-head); font-weight: 700; color: var(--brown); }
.pr-glance { width: min(1100px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(10px, 2vw, 24px) 0 clamp(40px, 5vw, 70px); }
.pr-glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0; }
.pr-glance dl > div { background: var(--brown); color: var(--cream); padding: 20px 24px; border-radius: 6px; }
.pr-glance dt { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.pr-glance dd { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; }
.pr-goals { padding: clamp(40px, 5vw, 70px) 0 clamp(30px, 4vw, 50px); background: var(--bg); }
.pr-goals h2, .pr-quotes h2, .pr-price h2, .pr-next h2 { text-align: center; color: var(--green); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; margin-bottom: clamp(22px, 3vw, 38px); }
.pr-goals .cm-chips { justify-content: center; }
.pr-goals .cm-chips li { font-size: clamp(16px, 1.45vw, 20px); padding: 13px 26px; }   /* all the same size here */
.pr-plan h2 { color: var(--green); }
.pr-quotes { padding: clamp(50px, 6vw, 90px) var(--gutter) clamp(30px, 4vw, 60px); }
.pr-price { padding: clamp(50px, 6vw, 90px) var(--gutter); background: var(--bg); }
.pr-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; width: min(1000px, 100%); margin: 0 auto; }
.pr-package { background: var(--green); color: var(--cream); padding: clamp(28px, 3vw, 44px); border-radius: 6px; text-align: center; }
.pr-package h3 { color: var(--gold); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.pr-amount { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4vw, 54px); color: #fff; margin: .25em 0 .4em; }
.pr-package ul { list-style: none; padding: 0; margin: 0 auto; max-width: 420px; text-align: left; }
.pr-package li { position: relative; padding: 8px 0 8px 30px; border-top: 1px solid rgba(211, 184, 144, .25); font-size: 17px; line-height: 1.45; }
.pr-package li::before { content: "✓"; position: absolute; left: 4px; color: var(--gold); font-weight: 700; }
.pr-note { margin: 18px 0 0; font-size: 15px; color: var(--gold); font-style: italic; }
.pr-next { text-align: center; width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 7vw, 100px); }
.pr-next > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; margin: 0; }
.pr-valid { margin-top: 22px !important; font-size: 16px !important; color: var(--sage); }
.pr-foot { margin-top: 34px !important; font-size: 14px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
@media (max-width: 640px) {
  .pr-letter { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pr-letter > img { width: 120px; height: 120px; }
}

/* Client quote under "Why I can actually do this" on /custom-magic */
.cm-why-quote { margin-top: clamp(20px, 2.6vw, 30px); max-width: 30em; }

/* Media kit (/media-kit): socials, brand work and ways to work together, for brands and agencies */
.mk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 5vw, 80px); align-items: center; background: var(--green); color: var(--cream); padding: clamp(50px, 7vw, 110px) max(var(--gutter), calc((100% - 1160px) / 2)); }
.mk-hero h1 { color: #fff; font-size: clamp(46px, 7vw, 96px); line-height: 1; margin: .3em 0 .15em; }
.mk-role { font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: clamp(19px, 2vw, 26px); line-height: 1.3; margin: 0; }
.mk-lead { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.45; margin: .9em 0 0; max-width: 30em; }
.mk-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 24px 0 0; }
.mk-facts li { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 6px 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(211, 184, 144, .45); }
.mk-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mk-social a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 6px; background: rgba(226, 208, 181, .08); color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(211, 184, 144, .45); transition: background-color .2s ease; }
.mk-social a:hover { background: rgba(226, 208, 181, .2); }
.mk-social svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }
.mk-portrait { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mk-stats h2, .mk-about h2, .mk-content h2, .mk-brands h2, .mk-quotes h2, .mk-offers h2, .mk-contact h2 { text-align: center; color: var(--green); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; margin: 0 0 clamp(22px, 3vw, 38px); }
.mk-stats { padding: clamp(50px, 6vw, 90px) var(--gutter) clamp(30px, 4vw, 50px); }
.mk-platforms { display: grid; gap: 14px; width: min(760px, 100%); margin: 0 auto; }
.mk-platform { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); background: #fff; border-radius: 10px; padding: 18px clamp(16px, 2.4vw, 26px); color: var(--brown); text-decoration: none; box-shadow: 0 18px 40px -28px rgba(16, 51, 27, .45); transition: box-shadow .2s ease; }
.mk-platform:hover { box-shadow: 0 18px 40px -22px rgba(16, 51, 27, .6); }
.mk-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 10px; background: var(--green); }
.mk-icon svg { width: 26px; height: 26px; fill: var(--gold); }
.mk-platform-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mk-platform-name { font-family: var(--font-head); font-weight: 700; color: var(--green); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.2; }
.mk-handle { color: var(--sage); font-size: 16px; line-height: 1.4; }
.mk-extra { font-size: 15px; color: var(--sage); line-height: 1.4; }
.mk-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mk-num { font-family: var(--font-head); font-weight: 800; color: var(--green); font-size: clamp(28px, 3vw, 38px); line-height: 1; }
.mk-num-label { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.mk-go { flex: none; font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--green); }
.mk-asof { text-align: center; color: var(--sage); font-size: 15px; margin: 18px 0 0; }
.mk-aud-h { text-align: center; color: var(--green); font-size: clamp(22px, 2vw, 28px); margin: clamp(34px, 4vw, 50px) 0 18px; }
.mk-audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; width: min(1100px, 100%); margin: 0 auto; }
.mk-audience > div { background: var(--brown); color: var(--cream); padding: 18px 22px; border-radius: 6px; }
.mk-audience dt { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.mk-audience dd { margin: 0; font-size: 19px; line-height: 1.4; }
.mk-about { width: min(780px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(30px, 4vw, 60px) 0 clamp(50px, 6vw, 90px); }
.mk-about p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; margin: 0 0 1em; }
.mk-content { background: var(--green); padding: clamp(50px, 6vw, 90px) var(--gutter); }
.mk-content h2 { color: #fff; }
.mk-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); width: min(1000px, 100%); margin: 0 auto; }
.mk-wide { width: min(1000px, 100%); margin: clamp(30px, 4vw, 54px) auto 0; }
.mk-video { margin: 0; }
.mk-video .video-frame.portrait { width: 100%; }
.mk-video figcaption { color: var(--cream); text-align: center; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.35; }
.mk-loop { border-radius: 12px; overflow: hidden; background: #000; }
.mk-loop video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.mk-brands { padding: clamp(50px, 6vw, 90px) var(--gutter) clamp(10px, 2vw, 30px); }
.mk-brand-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 1.8vw, 22px); width: min(1160px, 100%); margin: 0 auto; }
.mk-brand { flex: 0 1 calc((100% - 2 * clamp(14px, 1.8vw, 22px)) / 3); min-width: min(100%, 290px); margin: 0; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(16, 51, 27, .45); }
.mk-brand img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mk-brand figcaption { padding: 20px 22px 24px; }
.mk-brand-text { display: block; margin-top: 12px; font-size: 17px; line-height: 1.5; }
.mk-brand-text a { font-family: var(--font-head); font-weight: 700; color: var(--green); white-space: nowrap; }
.mk-quotes { padding: clamp(40px, 5vw, 80px) var(--gutter); }
.mk-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 22px); width: min(1160px, 100%); margin: 0 auto; }
.mk-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; background: var(--brown); color: var(--cream); border-radius: 10px; padding: clamp(24px, 2.6vw, 34px); }
.mk-quote blockquote { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.mk-quote figcaption { margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--gold); }
.mk-offers { background: var(--green); padding: clamp(50px, 6vw, 90px) var(--gutter); }
.mk-offers h2 { color: #fff; }
.mk-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(22px, 2.4vw, 34px); width: min(1160px, 100%); margin: 0 auto; }
.mk-offer { border-top: 2px solid var(--gold); padding-top: 18px; color: var(--cream); }
.mk-offer h3 { color: var(--gold); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; margin-bottom: 8px; }
.mk-offer p { margin: 0; font-size: 17px; line-height: 1.55; }
.mk-contact { text-align: center; width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 7vw, 100px); }
.mk-contact > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; margin: 0; }
.mk-contact .mk-mail { margin-top: 22px; font-size: 16px; }
.mk-mail a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.pg-btn.mk-line { background: transparent; color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.pg-btn.mk-line:hover { background: var(--green); color: var(--cream); }
@media (max-width: 760px) {
  .mk-hero { grid-template-columns: 1fr; text-align: center; }
  .mk-portrait { order: -1; width: min(240px, 64vw); justify-self: center; }
  .mk-lead { margin-inline: auto; }
  .mk-facts, .mk-social { justify-content: center; }
  .mk-facts li { font-size: 12px; letter-spacing: .08em; padding: 5px 10px; }
  .mk-social a { padding: 13px; }                 /* just the icons here: the full list is right below */
  .mk-social a span { display: none; }
  .mk-social svg { width: 24px; height: 24px; }
  /* the three phone videos side by side, swiped like a feed, instead of one very long column */
  .mk-tall { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .mk-tall > * { scroll-snap-align: center; }
}