/* ==========================================================
   Fonts (stored on this site, never loaded from Google)
   ========================================================== */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================
   Design settings: every colour, font and spacing lives here
   ========================================================== */
:root {
  /* Colours */
  --cream: #F6EFE3;
  --sand: #EADCC3;
  --dune: #D9C29E;
  --clay: #C48A63;
  --gold: #C9A24A;
  --olive: #6B7043;
  --cocoa: #3F2A20;
  --cocoa-soft: #6A4C3B;
  --rust: #8A4B2D;
  --rust-deep: #6B3820;
  --sunset: #9A5A35;
  --forest: #4E5431;
  --night: #2B1D15;
  --cream-soft: #E9DBC4;

  /* Textures */
  --grain: url("../assets/textures/grain.svg");
  --specks: url("../assets/textures/specks.svg");
  --grain-mask: url("../assets/textures/grain-mask.svg");
  --grain-fine: url("../assets/textures/grain-fine.svg");
  --mottle: url("../assets/textures/mottle.svg");
  --paper: url("../assets/textures/paper.svg");
  --palm-shadow: url("../assets/textures/palm-shadow-soft.svg");
  --hero-photo: url("../assets/images/hero-bg.jpg");

  --page-bg: var(--cream);
  --text: var(--cocoa);
  --text-soft: var(--cocoa-soft);
  --line: var(--dune);

  /* Fonts */
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Text sizes (scale smoothly from phone to laptop) */
  --size-hero: clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);
  --size-h2: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  --size-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --size-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --size-small: 0.875rem;
  --size-label: 0.75rem;

  /* Spacing */
  --section-space: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  --gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --side: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Block widths */
  --width-page: 72rem;
  --width-text: 38rem;

  --radius: 1.25rem;
  --radius-small: 0.75rem;
  --header-height: 4rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grain), var(--paper), var(--page-bg);
  background-size: 200px, 900px, auto;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--size-hero); }
/* every section title matches "Scroll-stopping content for your brand" */
h2 {
  font-size: var(--size-h2);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h3 { font-size: var(--size-h3); }

p { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 3px;
  border-radius: 4px;
}

section[id] { scroll-margin-top: calc(var(--header-height) + 1rem); }

.wrap {
  width: 100%;
  max-width: calc(var(--width-page) + 2 * var(--side));
  margin-inline: auto;
  padding-inline: max(var(--side), env(safe-area-inset-left)) max(var(--side), env(safe-area-inset-right));
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--cocoa);
  color: var(--cream);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-small);
  z-index: 100;
}
.skip-link:focus { top: 1rem; }

/* ==========================================================
   Header and menu
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-height);
}
.logo {
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
.logo svg { width: 1.4rem; height: 1.4rem; color: var(--clay); }

.site-nav {
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  mask-image: linear-gradient(to right, #000 85%, transparent);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0 1.5rem 0 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: var(--size-small);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
}
.site-nav a:hover { background: var(--sand); }

@media (min-width: 48rem) {
  .site-nav { -webkit-mask-image: none; mask-image: none; }
  .site-nav ul { padding-right: 0; }
}
@media (max-width: 30rem) {
  .logo span { display: none; }
}

/* ==========================================================
   Buttons and small labels
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--size-small);
  text-decoration: none;
  background: var(--cocoa);
  color: var(--cream);
  transition: background 0.2s;
}
.btn:hover { background: var(--night); }
.btn--light { background: var(--cream); color: var(--cocoa); }
.btn--light:hover { background: var(--sand); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { background: rgba(246, 239, 227, 0.12); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 2px;
}

.eyebrow {
  font-size: var(--size-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}

/* ==========================================================
   Placeholders (clearly marked; all removed before launch)
   ========================================================== */
.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  border: 1.5px dashed var(--clay);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(196, 138, 99, 0.1) 14px 28px),
    var(--ph-bg, rgba(234, 220, 195, 0.75));
  color: var(--text);
  font-size: var(--size-small);
  line-height: 1.4;
}
.placeholder svg { width: 2.25rem; height: 2.25rem; color: var(--clay); margin: 0 auto 0.5rem; }
.placeholder strong { display: block; font-weight: 600; }
.ph-text {
  background: var(--ph-bg, rgba(234, 220, 195, 0.75));
  outline: 1.5px dashed var(--clay);
  outline-offset: 2px;
  border-radius: 4px;
  padding: 0 0.25em;
}

/* Video boxes always keep their shape, so the page never jumps */
.video-box {
  aspect-ratio: 9 / 16;
  width: 100%;
}

/* ==========================================================
   Chapters (section headings)
   ========================================================== */
.chapter { padding-block: var(--section-space); }

.chapter-head {
  display: grid;
  gap: 0.75rem;
  max-width: var(--width-text);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.chapter-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chapter-mark svg { width: 1.75rem; height: 1.75rem; color: var(--clay); flex: none; }
.chapter-mark::after {
  content: "";
  height: 1px;
  width: 3rem;
  background: var(--line);
}
.chapter-head p { color: var(--text-soft); }

/* ==========================================================
   Intro
   ========================================================== */
.intro { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section-space); }
.intro .wrap {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.intro-text { display: grid; gap: 1.25rem; justify-items: start; }
.intro-text > p { color: var(--text-soft); max-width: 34rem; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.intro-video {
  width: min(100%, 22rem);
  max-height: 72svh;
  justify-self: center;
}
.intro-video .video-box { max-height: 72svh; width: auto; margin-inline: auto; height: 100%; }

@media (min-width: 56rem) {
  .intro .wrap { grid-template-columns: 1.2fr 1fr; }
  .intro-video { justify-self: end; max-height: min(78svh, 40rem); }
  .intro-video .video-box { max-height: min(78svh, 40rem); }
}

/* ==========================================================
   Work
   ========================================================== */
/* Rows scroll sideways inside their own box on phones */
.video-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(68%, 15rem);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  margin-inline: calc(-1 * var(--side));
  padding-inline: var(--side);
  scroll-padding-inline: var(--side);
  scrollbar-color: var(--dune) transparent;
}
.video-row > * { scroll-snap-align: start; }
@media (min-width: 56rem) {
  .video-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.video-card { display: grid; gap: 0.75rem; align-content: start; margin: 0; }
.video-card figcaption { display: grid; gap: 0.125rem; }
.video-card figcaption { justify-self: start; font-family: var(--font-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 1.05rem; }

/* ==========================================================
   Proof
   ========================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--gap);
}
.stat {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--cream);
}
.stat .number {
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
}
.stat p { font-size: var(--size-small); color: var(--text-soft); }
.stat .placeholder { aspect-ratio: 4 / 3; margin-top: 0.5rem; }

.logos-title { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); margin-bottom: var(--gap); }
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.logos .placeholder { aspect-ratio: 5 / 2; border-radius: var(--radius-small); }

.quote {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0;
  max-width: 46rem;
}
.quote svg { width: 2rem; height: 2rem; color: var(--clay); }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.45;
}
.quote figcaption { font-size: var(--size-small); color: var(--text-soft); }

/* ==========================================================
   About
   ========================================================== */
.about-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.about-photo { aspect-ratio: 4 / 5; width: min(100%, 26rem); }
.about-text { display: grid; gap: 1.25rem; max-width: var(--width-text); }
.facts {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.facts li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.facts .eyebrow { min-width: 6.5rem; }
@media (min-width: 56rem) {
  .about-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* ==========================================================
   Services
   ========================================================== */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--gap);
}
.service {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
.service svg { width: 2rem; height: 2rem; color: var(--clay); }
.service p { color: var(--text-soft); font-size: var(--size-small); }
.service ul { margin: 0; padding-left: 1.1rem; font-size: var(--size-small); display: grid; gap: 0.25rem; }
.service .price { margin-top: 0.5rem; font-weight: 500; color: var(--text); }

/* ==========================================================
   Contact
   ========================================================== */
.contact { text-align: center; }
.contact .chapter-head { margin-inline: auto; justify-items: center; }
.contact .chapter-mark::before {
  content: "";
  height: 1px;
  width: 3rem;
  background: var(--line);
}
.email {
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1.4rem, 1rem + 2.5vw, 2.6rem);
  overflow-wrap: anywhere;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 2px;
}
.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2rem calc(2rem + env(safe-area-inset-bottom));
  font-size: var(--size-small);
  color: var(--text-soft);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ==========================================================
   Colour chapters, textures and motifs
   ========================================================== */
.band {
  --bg: var(--page-bg);
  position: relative;
  isolation: isolate;
  background: var(--grain), var(--paper), var(--bg);
  background-size: 200px, 900px, auto;
}
/* Soft fade from the colour of the section above */
.band[class*="from-"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(3rem, 2rem + 5vw, 6.5rem);
  background: linear-gradient(180deg, var(--prev) 0%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.from-rust { --prev: var(--rust); }
.from-sunset { --prev: var(--sunset); }
.from-cream { --prev: var(--cream); }
.from-sand { --prev: var(--sand); }
.from-forest { --prev: var(--forest); }
.band--sand {
  --bg: var(--sand);
  --fade: clamp(4rem, 3rem + 6vw, 9rem);
  /* a see-through sand tint over the page's own paper texture, fading in and out: no seams */
  --sand-tint: rgb(217 194 158 / 0.55);
  background: linear-gradient(180deg, transparent 0, var(--sand-tint) var(--fade), var(--sand-tint) calc(100% - var(--fade)), transparent 100%);
}
.band--sand.solid-bottom {
  background: linear-gradient(180deg, transparent 0, var(--sand-tint) var(--fade), var(--sand-tint) 100%);
}
/* Plain cream sections let the page's paper texture show through, so it runs on without seams */
.band:not([class*="band--"]) { background: transparent; }
.band--dark, .band--rust, .band--forest, .band--glow {
  --text: var(--cream);
  --text-soft: var(--cream-soft);
  --line: rgba(246, 239, 227, 0.28);
  --ph-bg: rgba(246, 239, 227, 0.1);
  color: var(--text);
}
.band--dark { --bg: var(--night); }
.band--rust { --bg: var(--rust); }
.band--forest { --bg: var(--forest); }
.band--dark, .band--rust, .band--forest { background: var(--grain), var(--bg); background-size: 200px, auto; }
/* Green and dark sections fade in from (and out to) the page's paper texture: no seams.
   The fade is shorter than the section padding, so text always sits on full colour. */
.band--forest, .band--dark {
  --fade: clamp(3rem, 2rem + 4vw, 6rem);
  background:
    var(--grain),
    linear-gradient(180deg, transparent 0, var(--bg) var(--fade), var(--bg) calc(100% - var(--fade)), transparent 100%);
  background-size: 200px, auto;
}
.band--forest.solid-bottom, .band--dark.solid-bottom {
  background:
    var(--grain),
    linear-gradient(180deg, transparent 0, var(--bg) var(--fade), var(--bg) 100%);
  background-size: 200px, auto;
}
.site-footer.band--dark { background: var(--grain), var(--bg); background-size: 200px, auto; }
.band--glow {
  --bg: var(--rust-deep);
  background:
    var(--grain),
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(201, 162, 74, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(43, 29, 21, 0.7), transparent 70%),
    linear-gradient(170deg, #9A5A35 0%, var(--rust-deep) 55%, var(--night) 100%);
  background-size: 200px, auto, auto, auto;
}
.band--dark .placeholder,
.band--rust .placeholder,
.band--forest .placeholder,
.band--glow .placeholder { border-color: rgba(246, 239, 227, 0.5); }
.band--dark .placeholder svg,
.band--rust .placeholder svg,
.band--forest .placeholder svg,
.band--glow .placeholder svg,
.band--dark .chapter-mark svg,
.band--rust .chapter-mark svg,
.band--forest .chapter-mark svg,
.band--glow .chapter-mark svg { color: var(--gold); }
.band--dark :focus-visible,
.band--rust :focus-visible,
.band--forest :focus-visible,
.band--glow :focus-visible { outline-color: var(--cream); }

/* Soft palm-leaf shadows drifting over a section */
.palm-shade::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  right: 0;
  width: min(95vw, 60rem);
  aspect-ratio: 4 / 3;
  background: var(--palm-shadow) left top / contain no-repeat;
  opacity: 0.32;
  scale: -1 1;
  /* soft top edge so the shadow never starts with a line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}
.palm-shade--left::after { right: auto; left: 0; scale: 1; }
.band--glow.palm-shade::after,
.band--dark.palm-shade::after,
.band--forest.palm-shade::after { opacity: 0.28; }
.band--glow.palm-shade::after { width: min(110vw, 60rem); }

/* Decorative sun and palm motifs */
.motif {
  position: absolute;
  pointer-events: none;
  color: var(--clay);
  width: clamp(3rem, 2.4rem + 2.5vw, 5rem);
  height: auto;
  aspect-ratio: 1;
}
.band--dark .motif, .band--rust .motif, .band--forest .motif, .band--glow .motif { color: var(--gold); }
.motif--tr { top: clamp(1.5rem, 1rem + 2vw, 3rem); right: var(--side); }
.motif--bl { bottom: clamp(1.5rem, 1rem + 2vw, 3rem); left: var(--side); }
.motif--palm { width: clamp(3.5rem, 2.8rem + 3vw, 6rem); }
.motif--big { width: clamp(5.5rem, 4rem + 6vw, 9rem); }
/* film grain "printed" into a motif: tiny specks are cut out of it */
.motif--grain {
  -webkit-mask: var(--grain-mask) 0 0 / 70px repeat;
  mask: var(--grain-mask) 0 0 / 70px repeat;
}

/* Brands band: same sunset orange and same fine grain as the photo above, so they melt together */
.band--sunset {
  --bg: var(--sunset);
  --text: var(--cream);
  --text-soft: var(--cream-soft);
  --ph-bg: rgba(246, 239, 227, 0.1);
  color: var(--text);
  /* solid sunset orange: the hero photo fades into it above, and the sunset image fades in over its lower part */
  background: var(--sunset);
  overflow: clip;
}
.band--sunset::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain-fine);
  background-size: 130px;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.brands { padding-block: clamp(1rem, 0.5rem + 1.5vw, 2rem) var(--scene-fade); text-align: center; }
.brands .eyebrow { display: block; margin-bottom: 0.75rem; }
.brands h2 { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* Logos scroll gently sideways in an endless loop */
.marquee {
  overflow: hidden;
  padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-right: clamp(3rem, 2rem + 4vw, 5.5rem);
  margin: 0;
  list-style: none;
}
.marquee-set li { display: grid; place-items: center; height: clamp(3.25rem, 2.75rem + 1.5vw, 4.25rem); }
@keyframes marquee {
  to { translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-set[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Every logo gets the same box height and is shown whole (logo files are cream on transparent) */
.logo { width: auto; height: auto; max-height: 100%; max-width: clamp(6.5rem, 5.5rem + 3vw, 9rem); object-fit: contain; }

.brands-more {
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  color: var(--text-soft);
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  max-width: 44rem;
  margin-inline: auto;
}

/* Hero on a golden-hour background */
.intro.band--glow { padding-top: clamp(3rem, 2rem + 5vw, 7rem); }
.intro .btn--light { min-width: 9rem; }

/* About: photo with a palm-shadow card behind it */
.about-visual {
  position: relative;
  width: min(100%, 26rem);
  justify-self: center;
  padding: 0 1.25rem 1.25rem 0;
}
.about-visual .shadow-card {
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  border-radius: var(--radius);
  background: var(--palm-shadow) 30% 20% / 160% no-repeat, var(--grain), var(--sand);
  background-size: 160%, 240px, auto;
  opacity: 1;
  rotate: 3deg;
}
.about-visual .shadow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(234, 220, 195, 0.72);
}
.about-visual .about-photo { position: relative; rotate: -2deg; width: 100%; }

/* Hook testing chapter */
.hooks-grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}
.hooks-text { display: grid; gap: 1.25rem; justify-items: start; max-width: var(--width-text); }
.hooks-text > p { color: var(--text-soft); }
.phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
  max-width: 30rem;
  width: 100%;
  justify-self: center;
}
.phone { display: grid; gap: 0.5rem; justify-items: center; font-size: var(--size-small); color: var(--text-soft); }
.phone .placeholder { aspect-ratio: 9 / 16; width: 100%; border-radius: 1rem; padding: 0.5rem; font-size: var(--size-label); }
.phone:nth-child(2) { translate: 0 -1.5rem; }
@media (min-width: 56rem) {
  .hooks-grid { grid-template-columns: 1fr 1fr; }
}

/* Contact on a dark band */
.contact.band--dark .email { text-decoration-color: var(--gold); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }

/* Stats on the sand band */
.band--sand .stat { background: rgba(246, 239, 227, 0.7); }
.band--dark .site-footer { color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  .phone:nth-child(2) { translate: none; }
}

/* ==========================================================
   Hero: island photo, "Hi, I'm Holly", Polaroid
   ========================================================== */
.site-header--over {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
.site-header--over .site-nav { margin-inline: auto; color: var(--cream); text-shadow: 0 1px 8px rgba(43, 29, 21, 0.35); }
.site-header--over .site-nav a:hover { background: rgba(246, 239, 227, 0.18); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-height) + 2rem + env(safe-area-inset-top)) 4rem;
  background: var(--hero-photo) 22% 70% / cover no-repeat, #B9875E;
  color: var(--cream);
}
/* soft wash so text stays readable, plus a very fine film grain */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background:
    linear-gradient(180deg, rgba(43, 29, 21, 0.18) 0%, rgba(43, 29, 21, 0) 40%),
    linear-gradient(180deg, transparent 70%, var(--sunset) 100%);
}
.hero::after {
  background: var(--grain-fine);
  background-size: 130px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.hero .wrap {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  justify-items: center;
  text-align: center;
}
.hero-title { display: grid; gap: 0.35rem; position: relative; text-shadow: 0 1px 2px rgba(43, 29, 21, 0.25), 0 4px 24px rgba(43, 29, 21, 0.35); }
.hero h1 {
  font-size: clamp(3.25rem, 2.2rem + 5.5vw, 6.5rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero-sub {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: 0.01em;
}
.hero-link {
  justify-self: center;
  font-size: var(--size-small);
  font-weight: 500;
  text-decoration-color: var(--cocoa);
  text-decoration-thickness: 1px;
}

/* Polaroid */
.polaroid-wrap {
  position: relative;
  width: min(70vw, 20rem);
  rotate: -3deg;
}
.polaroid {
  margin: 0;
  position: relative;
  padding: 0.75rem 0.75rem 3.25rem;
  background: var(--grain), var(--paper), #EAE0CC;
  background-size: 110px, 600px, auto;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(43, 29, 21, 0.18), 0 3px 8px rgba(43, 29, 21, 0.12);
}
.polaroid-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  /* gentle analog film grade */
  filter: sepia(0.08) saturate(1) hue-rotate(-7deg) contrast(1.02) brightness(1.04);
}
.polaroid-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain), linear-gradient(180deg, rgba(222, 180, 90, 0.1), rgba(222, 180, 90, 0.04));
  background-size: 100px, auto;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
/* soft white film specks and a light haze over the photo */
.polaroid-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--specks), linear-gradient(rgba(255, 248, 235, 0.07), rgba(255, 248, 235, 0.07));
  background-size: 180px, auto;
  opacity: 0.55;
  pointer-events: none;
}

/* Location tags: soft off-white pills */
.location-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem 0.5rem 0.8rem;
  border-radius: 999px;
  background: var(--grain), #F3EBDD;
  background-size: 90px, auto;
  color: var(--cocoa);
  font-family: var(--font-head);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: none;
}
.location-tag svg { width: 1.35rem; height: 1.35rem; color: var(--rust); flex: none; }
.location-tag--uk { top: 1.75rem; right: -2rem; rotate: 6deg; }
.location-tag--bali { bottom: 2.25rem; left: -2.25rem; rotate: -4deg; }
.location-tag--bali svg { width: 1.6rem; height: 1.6rem; }

/* Motifs on the photo */
.hero .motif { color: var(--cream); opacity: 0.95; z-index: -1; }
/* the grain layer (.hero::after) is painted after the motifs, so it sits on top of them */
.hero .motif-sun {
  width: clamp(5.5rem, 4rem + 6vw, 9rem);
  top: calc(var(--header-height) + 1rem);
  right: clamp(1rem, 3vw, 4rem);
  stroke-width: 2;
}
.hero .motif-spiral-2 {
  width: clamp(5.5rem, 4rem + 6vw, 9rem);
  stroke-width: 2;
  left: clamp(1rem, 6vw, 6rem);
  bottom: clamp(2rem, 8vh, 5rem);
  color: var(--cream);
}

@media (min-width: 56rem) {
  .hero { background-position: 15% 72%; }
  .hero .wrap {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
    align-items: center;
  }
  .hero h1, .hero-sub { white-space: nowrap; }
  .hero h1 { font-size: clamp(3.5rem, 1rem + 5vw, 6rem); }
  .hero-content {
    grid-column: 2;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .hero-title { text-align: left; }
  .hero-link { justify-self: start; }
  .polaroid-wrap { width: clamp(16rem, 20vw, 21rem); }
}
@media (max-width: 55.99rem) {
  .hero-content { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 3.5rem); justify-items: center; }
  .location-tag--uk { right: -0.75rem; }
  .location-tag--bali { left: -0.75rem; }
  .hero .motif-spiral-2 { bottom: 1rem; left: 1rem; }
  .hero-title { margin-top: 2.75rem; }
}
.hero :focus-visible,
.site-header--over :focus-visible { outline-color: var(--cream); }

/* ==========================================================
   Work: three folders (Tech, Lifestyle, Hotels)
   ========================================================== */
:root {
  --folder-tech: var(--sand);
  --folder-lifestyle: #6E4546; /* dusty plum from the sunset-shadow photo */
  --folder-hotels: #B39478;
}
.work { padding-block: 0 var(--section-space); }
/* pull Work (and its image) up so the title sits in the middle of the orange-to-cream fade */
/* the sunset image starts inside the orange band, so orange melts straight into it */
.scene-span--sunset { margin-top: calc(-1 * var(--scene-fade)); }
.work { padding-top: calc(var(--scene-fade) * 0.55); }
.work-title { color: var(--cream); text-shadow: 0 1px 14px rgba(60, 25, 20, 0.45); }
.work-title { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 48rem) {
  .work-title { white-space: nowrap; font-size: clamp(2rem, 0.4rem + 3.9vw, 4.25rem); }
}


.folder-tabs { display: none; }
.folders--tabs .folder-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -1px;
}
.folder-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 48px;
  padding: 0.7rem clamp(0.9rem, 0.6rem + 1.5vw, 2.25rem) 0.6rem;
  border-radius: 1rem 1rem 0 0;
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--cocoa);
  white-space: nowrap;
  flex: none;
  background: var(--grain), var(--tab-bg);
  background-size: 110px, auto;
  opacity: 0.72;
  transition: padding 0.2s, opacity 0.2s;
}
.folder-tab:hover { opacity: 0.9; }
.folder-tab[aria-selected="true"] { opacity: 1; padding-top: 0.95rem; }
.folder-tab--tech { --tab-bg: var(--folder-tech); }
.folder-tab--lifestyle { --tab-bg: var(--folder-lifestyle); color: var(--cream); }
.folder-tab--hotels { --tab-bg: var(--folder-hotels); }
.folder-tab:focus-visible { outline-offset: -4px; }

.folder-panel {
  --pad: clamp(1rem, 0.6rem + 2vw, 2rem);
  position: relative;
  z-index: 1;
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--grain), var(--panel-bg);
  background-size: 110px, auto;
  color: var(--text);
}
.folder-panel + .folder-panel { margin-top: var(--gap); }
.folders--tabs .folder-panel { border-top-left-radius: 0; }
.folders--tabs .folder-panel + .folder-panel { margin-top: 0; }
.folder-panel--tech { --panel-bg: var(--folder-tech); }
.folder-panel--lifestyle {
  --text: var(--cream);
  --text-soft: var(--cream-soft);
  --ph-bg: rgba(246, 239, 227, 0.12);
}
.folder-panel--lifestyle { --panel-bg: var(--folder-lifestyle); }
.folder-panel--hotels { --panel-bg: var(--folder-hotels); }
.folder-panel--lifestyle .placeholder { border-color: rgba(246, 239, 227, 0.55); }
.folder-panel--lifestyle .placeholder svg { color: var(--cream); }
.folder-panel--hotels { --ph-bg: rgba(246, 239, 227, 0.25); }
.folder-panel--hotels .placeholder { border-color: var(--cocoa-soft); }
.folder-panel--hotels .placeholder svg { color: var(--cocoa); }
.folder-panel:focus-visible { outline-offset: 3px; }

/* Folder name shows only when tabs are not available */
.folder-label { font-size: var(--size-h3); margin-bottom: var(--gap); }
.folders--tabs .folder-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Inside a folder, the row scrolls within the folder on phones */
.folder-panel .video-row {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
}
@media (min-width: 56rem) {
  .folder-panel .video-row { margin-inline: 0; padding-inline: 0; }
}

/* ==========================================================
   Photo backgrounds (creator's own Canva images, film-graded)
   Each image sits on its own layer and fades in and out very
   gradually, so sections melt into each other with no lines.
   ========================================================== */
:root {
  --bg-contact: url("../assets/backgrounds/bg-c5-pink-sea.jpg");
  --scene-fade: clamp(4.5rem, 3rem + 5vw, 8rem);
}
.scene { position: relative; isolation: isolate; background: transparent; }
.scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  /* the photo's natural shape on laptops (70.7vw tall); a taller crop on phones so it isn't a thin strip */
  height: min(100%, max(70.7vw, 36rem));
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(var(--scene-veil, transparent), var(--scene-veil, transparent)), var(--scene-img) var(--scene-pos, center) / cover no-repeat;
  /* eased fade: starts very gently, so there is never a visible edge */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--scene-fade) * 0.25),
    rgb(0 0 0 / 0.35) calc(var(--scene-fade) * 0.5),
    rgb(0 0 0 / 0.75) calc(var(--scene-fade) * 0.75),
    #000 var(--scene-fade),
    #000 calc(100% - var(--scene-fade)),
    rgb(0 0 0 / 0.75) calc(100% - var(--scene-fade) * 0.75),
    rgb(0 0 0 / 0.35) calc(100% - var(--scene-fade) * 0.5),
    rgb(0 0 0 / 0.08) calc(100% - var(--scene-fade) * 0.25),
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--scene-fade) * 0.25),
    rgb(0 0 0 / 0.35) calc(var(--scene-fade) * 0.5),
    rgb(0 0 0 / 0.75) calc(var(--scene-fade) * 0.75),
    #000 var(--scene-fade),
    #000 calc(100% - var(--scene-fade)),
    rgb(0 0 0 / 0.75) calc(100% - var(--scene-fade) * 0.75),
    rgb(0 0 0 / 0.35) calc(100% - var(--scene-fade) * 0.5),
    rgb(0 0 0 / 0.08) calc(100% - var(--scene-fade) * 0.25),
    transparent 100%);
}
.scene--contact { --scene-img: var(--bg-contact); --scene-pos: 50% 60%; }

/* light images keep dark text; content cards get a soft cream backing */
.scene--contact .chapter-head { text-shadow: 0 0 18px rgba(246, 239, 227, 0.6); }
.scene--contact .service { background: rgba(246, 239, 227, 0.88); text-align: left; }
.contact .services { margin-top: clamp(1rem, 0.5rem + 2vw, 2rem); }
.contact-details { margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }

/* Work + Results: one continuous sunset image.
   The tile is the photo stacked on its own mirror image, so it repeats down
   the page with no visible join. It is shown at the photo's natural zoom
   (full width on laptops, a little wider than the screen on phones). */
.scene-span { position: relative; isolation: isolate; --span-img: url("../assets/backgrounds/bg-c1-sunset-tile.jpg"); --span-pos: 35%; }
/* palm shadow: the photo turned on its side, so it is one long continuous image (no mirroring) */
.scene-span--palm { --span-img: url("../assets/backgrounds/bg-c6-cream-palm-long.jpg"); }
.scene-span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--span-img) var(--span-pos) 0 / max(100%, 50rem) auto repeat-y;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, rgb(0 0 0 / 0.08) calc(var(--scene-fade) * 0.25), rgb(0 0 0 / 0.35) calc(var(--scene-fade) * 0.5), rgb(0 0 0 / 0.75) calc(var(--scene-fade) * 0.75), #000 var(--scene-fade),
    #000 calc(100% - var(--scene-fade)), rgb(0 0 0 / 0.75) calc(100% - var(--scene-fade) * 0.75), rgb(0 0 0 / 0.35) calc(100% - var(--scene-fade) * 0.5), rgb(0 0 0 / 0.08) calc(100% - var(--scene-fade) * 0.25), transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0, rgb(0 0 0 / 0.08) calc(var(--scene-fade) * 0.25), rgb(0 0 0 / 0.35) calc(var(--scene-fade) * 0.5), rgb(0 0 0 / 0.75) calc(var(--scene-fade) * 0.75), #000 var(--scene-fade),
    #000 calc(100% - var(--scene-fade)), rgb(0 0 0 / 0.75) calc(100% - var(--scene-fade) * 0.75), rgb(0 0 0 / 0.35) calc(100% - var(--scene-fade) * 0.5), rgb(0 0 0 / 0.08) calc(100% - var(--scene-fade) * 0.25), transparent 100%);
}

/* Results text sits on the dark sunset image: light text; cards stay cream */
.results-on-image {
  --text: var(--cream);
  --text-soft: #F3E4D2;
  --ph-bg: rgba(246, 239, 227, 0.16);
  color: var(--text);
}
.results-on-image .chapter-head,
.results-on-image .quote { text-shadow: 0 1px 14px rgba(60, 25, 20, 0.5); }
.results-on-image .motif,
.results-on-image .quote svg { color: var(--cream); }
.results-on-image .stat {
  --text: var(--cocoa);
  --text-soft: var(--cocoa-soft);
  --ph-bg: rgba(234, 220, 195, 0.75);
  color: var(--text);
  background: rgba(246, 239, 227, 0.94);
}
.results-on-image .quote .ph-text { outline-color: rgba(246, 239, 227, 0.7); }
.results-on-image :focus-visible { outline-color: var(--cream); }
/* keep the light Results text clear of the image's fade-out */
.results-on-image { padding-bottom: calc(var(--scene-fade) + 1.5rem); }

/* (after the shared .scene-span rule so it wins) */
.scene-span--palm::before {
  /* never enlarged: the image box is only as tall as the photo naturally is at this width (1414 x 2000) */
  bottom: auto;
  height: min(100%, calc(max(100vw, 50rem) * 1.414));
  background-size: max(100%, 50rem) auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ==========================================================
   Video players (tap to play with sound)
   ========================================================== */
.player {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--cocoa);
}
.player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(43, 29, 21, 0) 55%, rgba(43, 29, 21, 0.25));
  color: var(--cream);
  cursor: pointer;
}
.play-btn svg {
  width: clamp(3.25rem, 2.5rem + 2vw, 4rem);
  height: auto;
  aspect-ratio: 1;
  padding: 0.85rem;
  border-radius: 50%;
  background: rgba(246, 239, 227, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: scale 0.2s;
}
.play-btn:hover svg { scale: 1.06; }
.play-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: -6px; }
.player.is-playing .play-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .play-btn svg { transition: none; } }

/* Results: big number, label, the real Insights screenshot as proof, and its source */
.stat { margin: 0; gap: 0.35rem; }
.stat .number { margin: 0; font-weight: 650; letter-spacing: -0.02em; font-size: clamp(2.75rem, 2rem + 3vw, 4rem); }
.stat-label { font-family: var(--font-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 1.1rem; color: var(--text); }
.proof {
  margin-top: 0.85rem;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 29, 21, 0.12), 0 6px 16px rgba(43, 29, 21, 0.08);
}
.stat:nth-child(1) .proof { rotate: -1.2deg; }
.stat:nth-child(2) .proof { rotate: 0.8deg; }
.stat:nth-child(3) .proof { rotate: -0.6deg; }
.stat-source {
  margin-top: 0.85rem;
  font-size: var(--size-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Hook testing: two versions of the same video side by side */
.hook-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 30rem;
  width: 100%;
  justify-self: center;
}
.hook { position: relative; margin: 0; display: grid; gap: 0.5rem; }
.hook:nth-child(1) { rotate: -1.5deg; }
.hook:nth-child(2) { rotate: 1.5deg; translate: 0 1.25rem; }
.hook-badge {
  position: absolute;
  z-index: 2;
  top: -0.7rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(43, 29, 21, 0.12);
}
.hook-caption {
  grid-column: 1 / -1;
  margin-top: 1.75rem;
  text-align: center;
  font-size: var(--size-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
@media (prefers-reduced-motion: reduce) { .hook { rotate: none; translate: none; } }

/* Photography: an editorial collage that keeps every photo's own shape */
.photos { padding-block: 0 var(--section-space); color: var(--cream); }
.photos-title { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); text-shadow: 0 1px 14px rgba(60, 25, 20, 0.45); }
.photo-grid { columns: 2; column-gap: var(--gap); }
@media (min-width: 40rem) { .photo-grid { columns: 3; } }
.photo-break { display: none; }
/* laptops: two straight rows (4 + 3); each photo's width follows its shape so a row lines up perfectly */
@media (min-width: 64rem) {
  .photo-grid { columns: auto; display: flex; flex-wrap: wrap; gap: var(--gap); max-width: min(100%, 60rem); }
  .photo-grid .photo { flex: var(--r) 1 0; margin: 0; }
  .photo-break { display: block; flex-basis: 100%; height: 0; }
}
.photo {
  margin: 0 0 var(--gap);
  break-inside: avoid;
  border-radius: 0;
  overflow: hidden;
  background: var(--sand);
}
.photo img { width: 100%; height: auto; display: block; }

.addons {
  margin: var(--gap) auto 0;
  max-width: 46rem;
  font-size: var(--size-small);
  color: var(--text-soft);
}
.addons strong { color: var(--text); font-weight: 600; }

.proof-cta { display: flex; justify-content: center; margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }

.service li strong { font-weight: 600; color: var(--text); }

/* each service card ends with its own email button, lined up at the bottom */
.service { display: flex; flex-direction: column; }
.service ul { margin-bottom: 0.75rem; }

/* one big call to action at the end */
.contact-details { display: grid; justify-items: center; gap: 1rem; }
.cta-lead {
  font-family: var(--font-head);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--text);
}
.btn--big {
  min-height: 3.75rem;
  padding: 0 clamp(2.5rem, 2rem + 3vw, 4rem);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
}
.cta-email { font-size: var(--size-small); color: var(--text-soft); }
.cta-email .text-link { min-height: 44px; color: var(--text); }
.contact-details .socials { margin-top: 0.5rem; }

/* on narrower screens the centred contact title sits below the big palm */
@media (max-width: 56rem) { .contact .chapter-head { padding-top: clamp(4rem, 3rem + 6vw, 6rem); } }

/* About photo: a real photo in the frame */
figure.about-photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
figure.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* About: two photos layered like scrapbook prints */
.about-duo { position: relative; padding: 0; width: min(100%, 28rem); aspect-ratio: 1 / 1.05; }
.about-duo .shadow-card { display: none; }
.about-duo .about-photo {
  position: absolute;
  width: 62%;
  aspect-ratio: 4 / 5;
  border: 0.55rem solid #EAE0CC;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(43, 29, 21, 0.18), 0 6px 16px rgba(43, 29, 21, 0.12);
}
.about-photo--back { top: 0; left: 0; rotate: -5deg; }
.about-photo--front { bottom: 0; right: 0; rotate: 4deg; }
@media (prefers-reduced-motion: reduce) { .about-duo .about-photo { rotate: none; } }
/* warm the bright beach photo towards the muted, golden film grade of the viewpoint photo */
.about-photo--front img { filter: sepia(0.42) saturate(0.85) hue-rotate(-10deg) contrast(0.95) brightness(0.98); }
.about-photo--front img { filter: sepia(0.1) saturate(1.02) contrast(0.97) brightness(1.03); }
.about-photo--front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(214, 170, 100, 0.55) 0%, rgba(206, 162, 98, 0.3) 22%, rgba(206, 162, 98, 0.06) 40%, rgba(206, 162, 98, 0) 55%);
  mix-blend-mode: multiply;
}

/* a folder with only 3 videos keeps the same card size, centred */
@media (min-width: 56rem) {
  .video-row:has(> .video-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, calc((100% - 3 * var(--gap)) / 4));
    justify-content: center;
  }
}

/* testimonial: one quote, centred */
.quote { justify-items: center; text-align: center; margin-inline: auto; }