/* ============================================================
   Enzo & Kim — couple UGC creator duo
   "Postcards from Two Coasts" — travel scrapbook:
   warm paper, polaroids, washi tape, postmarks, airmail stripes
   Type: DM Serif Display (display) · Nunito Sans (body) · Caveat (handwriting)
   ============================================================ */

:root {
  --paper: #F7EFDD;
  --paper-2: #F1E5CB;
  --card: #FFFFFF;
  --ink: #28251F;
  --ink-2: #453F33;
  --ink-soft: #6E6553;
  --azure: #1F6FB2;        /* Barcelona blue — safe for text on paper */
  --azure-deep: #15568D;
  --gold: #F2B33D;         /* sun gold — backgrounds only */
  --gold-text: #8F6212;    /* AA-safe gold for small text on paper */
  --coral: #E2725B;        /* coral — decorative (tape, stripes, big type) */
  --coral-text: #BC4A31;   /* AA-safe coral for small text on paper */
  --line: rgba(40, 37, 31, 0.14);
  --line-strong: rgba(40, 37, 31, 0.32);
  --paper-line: rgba(247, 239, 221, 0.28);
  --shadow: 0 8px 24px rgba(40, 37, 31, 0.16);

  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Nunito Sans", -apple-system, sans-serif;
  --font-hand: "Caveat", cursive;

  --pad-x: clamp(1.25rem, 3.5vw, 2.75rem);
  --section-gap: clamp(5rem, 10vw, 9rem);
  --measure: 62ch;
}

/* ---------- Reset & base ---------- */

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

/* center-focused one-pager: everything lives in a shared column */
main > section { max-width: 80rem; margin-inline: auto; }

.footer__row { max-width: 80rem; margin-inline: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; }

h2 { font-size: clamp(2.4rem, 5vw, 3.9rem); letter-spacing: 0; }

h2 em, h1 em, .contact__title em { font-style: italic; }

h2 em { color: var(--azure); }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }

blockquote { margin: 0; }

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

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The ✕ duality mark */
.x { color: var(--coral-text); font-style: normal; }

/* Smooth edges on tilted cards: promote to GPU layer so rotation gets
   filtered anti-aliasing instead of jagged rasterized edges */
.tile, .vclip__frame, .videoph, .svc, .quote, .guar,
.scorecard, .bcard, .person__frame, .hero__status, .about__aside {
  backface-visibility: hidden;
  outline: 1px solid transparent;
}

/* ---------- Utility type ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.eyebrow--light { color: rgba(247, 239, 221, 0.8); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 1em 2em;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover { transform: translateY(-2px); }

/* Primary: solid gold pill */
.btn--ink {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(40, 37, 31, 0.28);
}

.btn--ink:hover { background: var(--coral); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--azure);
  border-color: var(--azure);
}

.btn--ghost:hover { background: var(--azure); color: #fff; }

.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---------- Masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.85rem var(--pad-x);
  background: rgba(247, 239, 221, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead__brand {
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.masthead__brand .x { font-size: 0.8em; }

.masthead__clocks {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-right: auto;
}

.clock {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 0.55em;
  align-items: baseline;
}

.clock__city { color: var(--ink-soft); }
.clock__time { font-variant-numeric: tabular-nums; }
.clock--cali .clock__time { color: var(--coral-text); }
.clock--bcn .clock__time { color: var(--azure); }
.clock__sep { color: var(--line-strong); font-size: 0.7rem; }

.masthead__nav { display: flex; gap: 1.5rem; margin-left: auto; }

.masthead__nav a {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.masthead__nav a:hover { color: var(--azure); }

.masthead__menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
}

.masthead__menu span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.masthead__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.masthead__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 7rem var(--pad-x) 3rem;
  background: var(--paper);
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 860px) {
  .mobile-nav.is-open { display: flex; }
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}

.mobile-nav__cta { color: var(--azure); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "hand media" "eyebrow media" "title media" "body media";
  align-content: start;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(4rem, 8vw, 7rem);
  min-height: 82vh;
}

.hero__hand {
  grid-area: hand;
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--coral-text);
  transform: rotate(-2deg);
  transform-origin: left bottom;
  margin-bottom: 0.6rem;
}

.hero__eyebrow { grid-area: eyebrow; margin-bottom: 1.8rem; }

.hero__title {
  grid-area: title;
  font-size: clamp(4rem, 12vw, 10.5rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Hormozi headline: a sentence, not a wordmark */
.hero__headline {
  grid-area: title;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
  max-width: 16em;
}

.hero__headline em { font-style: italic; color: var(--azure); }

.hero__trust {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.hero__line { display: block; }

.hero__line--2 { padding-left: clamp(2rem, 8vw, 8rem); }

.amp {
  font-style: italic;
  color: var(--coral-text);
}

.hero__body { grid-area: body; margin-top: 2.6rem; max-width: 34rem; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.lede strong { font-weight: 800; color: var(--ink); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.2rem; }

.hero__media {
  grid-area: media;
  position: relative;
  min-height: 500px;
}

.hero__media .tile { position: absolute; }

/* the autoplay showreel polaroid */
.hero__media .hero__reel {
  position: relative;
  width: min(100%, 34rem);
  margin-left: auto;
  transform: rotate(1.5deg);
}

.tile--reel video,
.tile--reel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--sand, #E7DCC6);
}

/* Blue, tucked over the bottom-right corner of the hero photo */
.hero__inset {
  position: absolute;
  right: -2.6rem;
  bottom: -3.5rem;
  width: clamp(132px, 38%, 218px);
  z-index: 3;
}

.hero__inset img {
  width: 100%;
  height: auto;
  display: block;
}

/* hero caption sits left so Blue's frame never covers it */
.hero__reel .tile__chip {
  text-align: left;
  padding-left: 0.7rem;
}

/* handwritten tag floating off the top-right corner */
.hero__inset-note {
  position: absolute;
  top: -1.5rem;
  right: -1.4rem;
  z-index: 2;
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45em 0.85em 0.35em;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(40, 37, 31, 0.18);
  transform: rotate(-7deg);
}

/* below the wide layout there is no outer margin to hang into */
@media (max-width: 1330px) {
  .hero__inset { right: -0.6rem; }
  .hero__inset-note { right: -0.4rem; }
}

@media (max-width: 860px) {
  .hero__inset { right: 0; bottom: -2.5rem; width: clamp(120px, 32%, 180px); }
  .hero__inset-note { right: 0; font-size: 1.05rem; }
}


/* keep the status note clear of the reel caption */
.hero__media .hero__status { bottom: -2.2rem; right: -0.6rem; }

.hero__tile-a {
  width: clamp(200px, 18vw, 265px);
  top: 3%;
  right: clamp(0.5rem, 6vw, 6rem);
  transform: rotate(3deg);
  z-index: 2;
}

.hero__tile-b {
  width: clamp(180px, 16vw, 235px);
  bottom: 8%;
  right: clamp(7rem, 17vw, 16rem);
  transform: rotate(-4deg);
  z-index: 1;
}

.hero__status {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 3px;
  padding: 1.4rem 1.1rem 0.9rem;
  transform: rotate(2deg);
  z-index: 3;
}

/* washi tape on the status note */
.hero__status::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  background: rgba(242, 179, 61, 0.6);
  transform: rotate(-3deg);
}

.hero__status-row { display: inline-flex; align-items: center; gap: 0.6em; }

.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--cali { background: var(--coral); }
.dot--bcn { background: var(--azure); }

/* ---------- Tiles (polaroid media frames) ---------- */

.tile {
  position: relative;
  background: var(--card);
  padding: 9px 9px 6px;
  box-shadow: var(--shadow);
  border-radius: 2px;
}

.tile img { width: 100%; object-fit: cover; }

.tile--916 img { aspect-ratio: 9 / 16; }
.tile--45 img  { aspect-ratio: 4 / 5; }
.tile--169 img { aspect-ratio: 16 / 9; }
.tile--11 img  { aspect-ratio: 1 / 1; }

.tile__chip {
  display: block;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 500;
  color: #5c5344;
  padding: 0.35em 0.2em 0.25em;
  text-transform: none;
  letter-spacing: 0;
}

.tile--play::after {
  content: "▶";
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(31, 111, 178, 0.85);
  border-radius: 50%;
  padding-left: 3px;
}

/* ---------- Ticker ---------- */

.ticker {
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--gold);
  border-top: 1px solid rgba(40, 37, 31, 0.2);
  border-bottom: 1px solid rgba(40, 37, 31, 0.2);
}

.ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  animation: ticker 72s linear infinite;
}

.ticker__track span { padding-right: 0.7em; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad-x);
  border-bottom: 1px solid var(--line);
}

.stat { display: flex; flex-direction: column; gap: 0.4rem; }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  line-height: 1;
  color: var(--azure);
}

.stat:nth-child(even) .stat__num { color: var(--coral-text); }

.stat__label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

/* ---------- Brand partner logos ---------- */

.logos {
  text-align: center;
  padding: clamp(2.2rem, 4vw, 3.2rem) var(--pad-x) clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}

.logos__label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}

.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem clamp(1.4rem, 2.6vw, 2.6rem);
}

/* Static logo wall: three centered rows, each mark bumps on hover */
.logos__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.logos__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem clamp(1.6rem, 3.4vw, 3rem);
}

/* Text wordmarks: swap for official logo files when you have them */
.logos__slot {
  display: grid;
  place-content: center;
  height: 38px;
  color: var(--ink);
  opacity: 0.42;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logos__slot:hover {
  opacity: 0.85;
  transform: translateY(-4px) scale(1.06);
}

/* image logos: rendered as flat black marks so they sit level with the wordmarks */
.logos__slot--img { opacity: 0.5; }
.logos__slot--img:hover { opacity: 0.78; }

.logos__slot img {
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
}

.logos__slot--serif {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.01em;
}

.logos__slot--wide {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.logos__slot--tight {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.logos__slot--mixed {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---------- Vertical UGC rows (Travel / Products / Experiences) ---------- */

.vwork { padding: 0 var(--pad-x); }

.vrow { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.vrow__head {
  border-top: 1px dashed var(--line-strong);
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.vrow__head p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0.7rem auto 0;
}

/* Oversized centered section titles, echoing the footer wordmark */
.bigtitle {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}

.section-head.section-head--center {
  max-width: none;
  text-align: center;
  margin-bottom: clamp(2.2rem, 4vw, 3rem);
}

.section-head.section-head--center .section-head__note {
  max-width: none;
  margin: 0.7rem auto 0;
}

.vrow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  max-width: 68rem;
  margin-inline: auto;
}

.vclip__frame {
  position: relative;
  background: var(--card);
  padding: 7px;
  border-radius: 2px;
  cursor: pointer;
  /* drop-shadow rather than box-shadow: routing the rotated frame through a
     filter gives the composited video anti-aliased edges (box-shadow left
     stair-stepped ridges on the tilted frames) */
  filter: drop-shadow(0 7px 16px rgba(40, 37, 31, 0.20));
}

.vclip:nth-child(odd) .vclip__frame { transform: rotate(-1deg); }
.vclip:nth-child(even) .vclip__frame { transform: rotate(1.1deg); }

/* Phones sit the tiles flat. A rotated box containing a <video> is composited
   by the browser as a separate layer, and on mobile (iOS Safari especially)
   that layer is handed to a hardware overlay that ignores the parent filter,
   so the drop-shadow trick that anti-aliases these edges on desktop does not
   reach it and the tilted border rasterizes with stair-stepped pixels. At a
   ~170px tile the 1deg tilt is barely perceptible anyway: the scrapbook feel
   comes from the white border, the shadow and the caption, not the angle. */
@media (max-width: 700px) {
  .vclip:nth-child(odd) .vclip__frame,
  .vclip:nth-child(even) .vclip__frame { transform: none; }
}

.vclip__frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
}

.vclip__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(31, 111, 178, 0.88);
  border-radius: 50%;
  font-size: 0.85rem;
  padding-left: 3px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.vclip__frame.is-playing .vclip__play { opacity: 0; }

.vclip__frame--auto { cursor: default; }

.vclip__brand {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* ---------- Services ---------- */

.services { padding: var(--section-gap) var(--pad-x); }

.services__grid {
  display: grid;
  /* five cards: 5 across on desktop, 3 then 1 as it narrows, so no row
     is ever left with a single orphan card */
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.svc {
  background: var(--card);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 1.8rem 1.6rem;
}

.svc:nth-child(odd) { transform: rotate(-0.6deg); }
.svc:nth-child(even) { transform: rotate(0.5deg); }

.svc h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }

.svc p { font-size: 0.95rem; color: var(--ink-2); }

.services__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.4rem;
  margin-top: 2.2rem;
}

.services__points li {
  background: var(--paper-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.65em 1.4em;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

/* ---------- Contact card (form + booking) ---------- */

.contact {
  border-radius: 24px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.contact__card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) auto minmax(0, 5fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  text-align: left;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(14, 46, 96, 0.35);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  max-width: 54rem;
  margin: 2.6rem auto 0;
  color: var(--ink);
}

.contact__divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact__divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  border-left: 1px dashed var(--line-strong);
}

.contact__divider span {
  position: relative;
  background: var(--card);
  padding: 0.4em 0;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.contact__book h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }

.contact__book p { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 1.3rem; }

/* categories under the proof strip */
.proof-cats {
  text-align: center;
  padding: 1.1rem var(--pad-x) 1.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

/* ---------- Work rows (Tech / Kitchen & Home / Travel) ---------- */

.wrow { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.wrow__label {
  font-size: 1.6rem;
  border-top: 1px dashed var(--line-strong);
  padding-top: 1.1rem;
  margin-bottom: 1.3rem;
}

.wrow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.wrow__grid .videoph:nth-child(odd) { transform: rotate(-1.2deg); }
.wrow__grid .videoph:nth-child(even) { transform: rotate(1.3deg); }

/* ---------- Guarantees (risk reversal) ---------- */

.guarantees { padding: var(--section-gap) var(--pad-x) 0; }

.guarantees__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.guar {
  position: relative;
  background: var(--card);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 2.2rem 1.9rem 1.8rem;
}

.guar:nth-child(1) { transform: rotate(-1deg); }
.guar:nth-child(2) { transform: rotate(0.6deg); }
.guar:nth-child(3) { transform: rotate(-0.5deg); }

.guar::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 88px;
  height: 26px;
  margin-left: -44px;
  transform: rotate(-3deg);
  background: rgba(242, 179, 61, 0.6);
}

.guar:nth-child(2)::before { background: rgba(31, 111, 178, 0.35); transform: rotate(2deg); }
.guar:nth-child(3)::before { background: rgba(226, 114, 91, 0.4); }

.guar__big {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.guar > p:last-child { font-size: 0.98rem; color: var(--ink-2); }

/* usage rights line items */
.packages__rights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2.4rem;
  margin-top: 2.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.packages__rights b { color: var(--azure); }

.packages__note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  max-width: none;
}

/* three-step layout + objection-killer note */
.process__steps--three { grid-template-columns: repeat(3, 1fr); }

.process__note {
  margin-top: 2.4rem;
  padding: 1rem 1.4rem;
  background: var(--paper-2);
  border-left: 4px solid var(--azure);
  border-radius: 6px;
  font-weight: 700;
  max-width: 54rem;
}

/* ---------- Section head ---------- */

.section-head { max-width: var(--measure); margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head .eyebrow { display: block; margin-bottom: 1rem; }

.section-head__note {
  margin-top: 1.2rem;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 48ch;
}

/* ---------- Pillars ---------- */

.pillars { padding: var(--section-gap) var(--pad-x) 0; }

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px dashed var(--line-strong);
}

.pillar--flip .pillar__text { order: 2; }
.pillar--flip .pillar__media { order: 1; }

.pillar__tags {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coral-text);
  margin-bottom: 0.9rem;
}

.pillar h3 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 1rem; }

.pillar__text p:not(.pillar__tags) { color: var(--ink-2); max-width: 48ch; }

.pillar__media {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.2rem;
  align-items: end;
}

.pillar__media img {
  width: 100%;
  border: 8px solid var(--card);
  border-bottom-width: 26px;
  border-radius: 2px;
  box-shadow: var(--shadow);
  object-fit: cover;
}

.pillar__media img:first-child { transform: rotate(-1.5deg); }
.pillar__media img:last-child { transform: rotate(2deg) translateY(1.4rem); }

/* ---------- Work ---------- */

.work { padding: var(--section-gap) var(--pad-x); }

.work__grid {
  columns: 3;
  column-gap: 1.8rem;
}

.work__grid .tile {
  margin-bottom: 1.8rem;
  break-inside: avoid;
}

.work__grid .tile:nth-child(odd) { transform: rotate(-1.3deg); }
.work__grid .tile:nth-child(even) { transform: rotate(1.4deg); }

.work__note {
  margin-top: 2.4rem;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink-2);
  transform: rotate(-1deg);
}

.work__note a { color: var(--azure); }

/* ---------- Duo band ---------- */

.duo-band {
  background: linear-gradient(180deg, var(--azure) 0%, var(--azure-deep) 100%);
  color: var(--paper);
  padding: var(--section-gap) var(--pad-x);
}

.duo-band .eyebrow--light { display: block; margin-bottom: 1rem; }

.duo-band h2 em { color: var(--gold); }

.duo-band__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.duo-band__col {
  border-top: 2px dashed var(--paper-line);
  padding-top: 1.4rem;
}

.duo-band__col h3 { font-size: 1.5rem; margin-bottom: 0.7rem; color: #fff; }

.duo-band__col p { color: rgba(247, 239, 221, 0.85); font-size: 1rem; }

.duo-band__entity {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 2px dashed var(--paper-line);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 239, 221, 0.7);
  max-width: 72ch;
}

/* ---------- Gear ---------- */

.gear { padding: var(--section-gap) var(--pad-x) 0; }

.gear__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.gear__list li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-top: 1px dashed var(--line-strong);
  font-size: 1rem;
  color: var(--ink-2);
}

.gear__tag {
  flex: 0 0 4.6rem;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--azure);
}

/* ---------- Packages ---------- */

.packages { padding: var(--section-gap) var(--pad-x); }

.packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* name / price / blurb / list / cta - shared rows so every card lines up */
  grid-template-rows: auto auto auto 1fr auto;
  gap: 1.3rem;
  align-items: stretch;
}

.pkg {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-content: start;
  min-width: 0;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: clamp(1.8rem, 3vw, 2.5rem);
}


.pkg--feature {
  background: linear-gradient(180deg, var(--azure) 0%, var(--azure-deep) 100%);
  color: #fff;
  position: relative;
}

.pkg__badge {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--gold);
  color: var(--ink);
  padding: 0.55em 1.2em;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(40, 37, 31, 0.25);
  white-space: nowrap;
}

.pkg__name { font-size: 1.7rem; margin-bottom: 1.1rem; }

.pkg__price {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  margin-bottom: 1.1rem;
  color: var(--azure);
}

.pkg--feature .pkg__price { color: var(--gold); }

.pkg__price-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

.pkg--feature .pkg__price-note { color: rgba(247, 239, 221, 0.75); }

.pkg__for {
  font-size: 0.97rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  min-height: 3.2em;
}

.pkg--feature .pkg__for { color: rgba(247, 239, 221, 0.85); }

.pkg__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.pkg__list li {
  padding: 0.62rem 0;
  border-top: 1px dashed var(--line);
  font-size: 0.95rem;
  font-weight: 600;
}

.pkg--feature .pkg__list li { border-top-color: rgba(247, 239, 221, 0.3); }

.pkg__cta { margin-top: auto; text-align: center; align-self: end; }

@supports not (grid-template-rows: subgrid) {
  .pkg { display: flex; flex-direction: column; }
  .pkg__for { min-height: 4.8em; }
}

.pkg--feature .pkg__cta.btn--ghost {
  color: #fff;
  border-color: rgba(247, 239, 221, 0.7);
}

.pkg--feature .pkg__cta.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.packages__addons {
  margin-top: 2.2rem;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: center;
  transform: rotate(-0.5deg);
}


/* ---------- Annual partnership band ---------- */

.annual {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: 1.3rem;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--azure) 0%, var(--azure-deep) 100%);
  color: var(--paper);
  box-shadow: 0 16px 40px rgba(21, 86, 141, 0.3);
}

.annual__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.annual h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: #fff; }

.annual__lede {
  margin-top: 0.8rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 239, 221, 0.88);
}

.annual__list { display: flex; flex-direction: column; }

.annual__list li {
  padding: 0.6rem 0 0.6rem 1.6rem;
  position: relative;
  font-size: 0.96rem;
  font-weight: 600;
  border-top: 1px dashed rgba(247, 239, 221, 0.3);
  color: rgba(247, 239, 221, 0.95);
}

.annual__list li:first-child { border-top: 0; }

.annual__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}

.annual__cta { text-align: center; }

.annual__note {
  margin-top: 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(247, 239, 221, 0.7);
}

@media (max-width: 1080px) {
  .annual { grid-template-columns: 1fr 1fr; }
  .annual__cta { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .annual { grid-template-columns: 1fr; text-align: center; }
  .annual__list li { text-align: left; }
}

/* ---------- Process ---------- */

.process { padding: 0 var(--pad-x) var(--section-gap); }

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.step { border-top: 1px dashed var(--line-strong); padding-top: 1.4rem; }

.step__num {
  display: inline-grid;
  place-content: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 0 rgba(40, 37, 31, 0.22);
}

.step h3 { font-size: 1.5rem; margin: 0.8rem 0 0.5rem; }

.step p { font-size: 0.96rem; color: var(--ink-2); }

/* ---------- Quotes ---------- */

.quotes {
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad-x);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.quote {
  position: relative;
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 2rem 1.8rem 1.6rem;
}

.quote:nth-child(1) { transform: rotate(-1.2deg); }
.quote:nth-child(2) { transform: rotate(0.8deg); }
.quote:nth-child(3) { transform: rotate(-0.6deg); }

/* washi tape on each quote card */
.quote::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 88px;
  height: 26px;
  margin-left: -44px;
  transform: rotate(-3deg);
  background: rgba(31, 111, 178, 0.35);
}

.quote:nth-child(2)::before { background: rgba(242, 179, 61, 0.55); transform: rotate(2deg); }
.quote:nth-child(3)::before { background: rgba(226, 114, 91, 0.4); }

.quote p {
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
}

.quote cite {
  display: block;
  margin-top: 1.2rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* ---------- About ---------- */

.about { padding: var(--section-gap) var(--pad-x); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.person__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 2px;
  margin-bottom: 1.4rem;
}

.person__frame::after {
  content: "";
  position: absolute;
  inset: 10px 10px 46px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(242, 179, 61, 0.25), transparent 60%),
    var(--paper-2);
}

.person:last-of-type .person__frame::after {
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(31, 111, 178, 0.18), transparent 60%),
    var(--paper-2);
}

.person__frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  transform: rotate(-3deg);
  background: rgba(226, 114, 91, 0.45);
}

.person:last-of-type .person__frame::before { background: rgba(31, 111, 178, 0.35); transform: rotate(3deg); }

.person__initial {
  position: relative;
  z-index: 1;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(6rem, 11vw, 9rem);
  color: var(--coral-text);
}

.person:last-of-type .person__initial { color: var(--azure); }

.person:first-of-type .person__frame { transform: rotate(-1.5deg); }
.person:last-of-type .person__frame { transform: rotate(1.5deg); }

.person h3 { font-size: 1.9rem; }

.person__role {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin: 0.5rem 0 0.9rem;
}

.person > p:last-child { color: var(--ink-2); font-size: 1rem; }

.about__story {
  grid-column: 1;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-2);
  border-top: 1px dashed var(--line-strong);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.about__story strong { color: var(--ink); font-weight: 800; }

.about__aside {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  max-width: 20rem;
  border-top: 1px dashed var(--line-strong);
  padding-top: clamp(2rem, 4vw, 3rem);
  transform: rotate(-2deg);
}

.about__pull {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.2;
  color: var(--azure);
}

.about__pull-note {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

/* ---------- Blue (the dog) ---------- */

.blue {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: var(--section-gap) var(--pad-x);
  margin-bottom: var(--section-gap);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.blue__media { max-width: 26rem; justify-self: center; position: relative; }

.blue__media .tile { transform: rotate(-2.5deg); }

/* tape on Blue's polaroid */
.blue__media::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  transform: rotate(-4deg);
  background: rgba(242, 179, 61, 0.6);
  z-index: 2;
}

.blue__text .eyebrow { display: block; margin-bottom: 1rem; }

.blue__lede {
  margin-top: 1.3rem;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
}

.blue__lede strong { color: var(--ink); font-weight: 800; }

.blue__list { margin-top: 1.7rem; }

.blue__list li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.85rem 0;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.99rem;
  color: var(--ink-2);
}

.blue__tag {
  flex: 0 0 5.4rem;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--azure);
}

.blue__book {
  margin-top: 1.7rem;
  font-family: var(--font-hand);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ink-2);
  transform: rotate(-1deg);
}

.blue__book a { color: var(--coral-text); }

/* ---------- FAQ ---------- */

.faq { padding: 0 var(--pad-x) var(--section-gap); }

.faq__list { max-width: 54rem; margin-inline: auto; }



.faq__list details { border-top: 1px dashed var(--line-strong); }

.faq__list details:last-child { border-bottom: 1px dashed var(--line-strong); }

.faq__list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.3rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  transition: color 0.2s ease;
}

.faq__list summary::-webkit-details-marker { display: none; }

.faq__list summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--coral-text);
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.faq__list details[open] summary::after { transform: rotate(45deg); }

.faq__list summary:hover { color: var(--azure); }

.faq__list details > p {
  padding: 0 3.5rem 1.6rem 0; /* clears the +/- marker, otherwise full width */
  color: var(--ink-2);
}

.faq__list details a { color: var(--azure); }

/* ---------- Contact ---------- */

.contact {
  position: relative;
  background: linear-gradient(180deg, var(--azure) 0%, var(--azure-deep) 100%);
  color: var(--paper);
  text-align: center;
  padding: var(--section-gap) var(--pad-x) clamp(3rem, 6vw, 5rem);
}

.contact .eyebrow--light { display: block; margin-bottom: 1.3rem; }

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.5vw, 5.4rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #fff;
}

.contact__title em { color: var(--gold); }

.contact__sub {
  max-width: 46rem;
  margin: 1.7rem auto 0;
  color: rgba(247, 239, 221, 0.85);
  font-size: 1.05rem;
}

.contact__actions { margin-top: 2.5rem; }

.contact__actions .btn--paper {
  box-shadow: 0 3px 0 rgba(14, 46, 96, 0.55);
}

.contact__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.4rem;
}

.clock--light .clock__city { color: rgba(247, 239, 221, 0.65); }
.clock--light .clock__time { color: #fff; }

.contact__meta .x { color: var(--gold); }

.contact__socials {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.6rem;
}

.contact__socials a {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(247, 239, 221, 0.9);
  text-decoration: none;
  border-bottom: 2px solid rgba(247, 239, 221, 0.4);
  padding-bottom: 0.2em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact__socials a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Footer ---------- */

.footer { padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 2rem; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8.4vw, 7rem);
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.footer__wordmark .amp { color: var(--coral-text); }

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.footer__top { color: var(--ink-2); text-decoration: none; }
.footer__top:hover { color: var(--azure); }

/* ---------- Reveal on scroll (only hidden when JS is running) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal.in-view { opacity: 1; transform: none; }

/* Hero load stagger */
.hero__hand { transition-delay: 0.05s; }
.hero__line--1 { transition-delay: 0.15s; }
.hero__line--2 { transition-delay: 0.28s; }
.hero__body { transition-delay: 0.42s; }
.hero__tile-a { transition-delay: 0.5s; }
.hero__tile-b { transition-delay: 0.62s; }
.hero__status { transition-delay: 0.74s; }

/* Keep rotations after reveal (and without JS) */
html.js .hero__hand.in-view, .hero__hand { transform: rotate(-2deg); }
html.js .hero__tile-a.in-view, .hero__tile-a { transform: rotate(3deg); }
html.js .hero__tile-b.in-view, .hero__tile-b { transform: rotate(-4deg); }
html.js .hero__status.in-view, .hero__status { transform: rotate(2deg); }
html.js .hero__inset.in-view, .hero__inset { transform: rotate(5deg); }

/* rotated cards keep their tilt through the reveal */
html.js .work__grid .tile.in-view:nth-child(odd) { transform: rotate(-1.3deg); }
html.js .work__grid .tile.in-view:nth-child(even) { transform: rotate(1.4deg); }
html.js .quote.in-view:nth-child(1) { transform: rotate(-1.2deg); }
html.js .quote.in-view:nth-child(2) { transform: rotate(0.8deg); }
html.js .quote.in-view:nth-child(3) { transform: rotate(-0.6deg); }
html.js .about__aside.in-view { transform: rotate(-2deg); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero__hand, .hero__hand { transform: rotate(-2deg); }
  html.js .hero__tile-a, .hero__tile-a { transform: rotate(3deg); }
  html.js .hero__tile-b, .hero__tile-b { transform: rotate(-4deg); }
  html.js .hero__status, .hero__status { transform: rotate(2deg); }
  html.js .hero__inset, .hero__inset { transform: rotate(5deg); }
  .ticker__track { animation: none; }
  .logos__slot:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- Responsive ---------- */

/* Clocks need more room than the rest of the masthead */
@media (max-width: 1220px) {
  .masthead__clocks { display: none; }
}

/* Hero collage: lift the second tile clear of the status chip as the column narrows */
@media (max-width: 1020px) and (min-width: 861px) {
  .hero__tile-b { bottom: 20%; }
}

@media (max-width: 1080px) {
  .work__grid { columns: 2; }
  .process__steps { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .quotes__grid { grid-template-columns: 1fr; max-width: 36rem; margin: 0 auto; row-gap: 2.2rem; }
  .packages__grid { grid-template-columns: 1fr 1fr; max-width: 46rem; margin: 0 auto; }
}

@media (max-width: 700px) {
  .packages__grid { grid-template-columns: 1fr; max-width: 34rem; }
}

@media (max-width: 1080px) {
  .vrow__grid { grid-template-columns: repeat(2, 1fr); max-width: 40rem; }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .contact__card { grid-template-columns: 1fr; }
  .contact__divider { display: none; }
  .contact__book { border-top: 1px dashed var(--line-strong); padding-top: 1.4rem; }
}

@media (max-width: 860px) {
  .duo-band__cols { grid-template-columns: 1fr; gap: 1.8rem; }
  .guarantees__grid { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; row-gap: 2rem; }
  .process__steps--three { grid-template-columns: 1fr; }
  .hero__media .hero__reel { margin-left: 0; width: 100%; }

  .masthead__nav, .masthead__cta { display: none; }
  .masthead__menu { display: flex; margin-left: auto; }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "hand" "eyebrow" "title" "body" "media";
    min-height: 0;
  }

  .hero__media {
    margin-top: 3.5rem;
    min-height: 0;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .hero__media .tile { position: static; }

  .hero__tile-a { width: 46%; }
  .hero__tile-b { width: 40%; margin-top: 2.4rem; }

  .hero__status { position: static; align-self: flex-end; margin-top: 2.2rem; }

  .stats { grid-template-columns: 1fr 1fr; gap: 1.6rem; }

  .pillar { grid-template-columns: 1fr; gap: 2rem; }
  .pillar--flip .pillar__text { order: 1; }
  .pillar--flip .pillar__media { order: 2; }

  .gear__list { grid-template-columns: 1fr; }

  .about__grid { grid-template-columns: 1fr; }
  .about__story, .about__aside { grid-column: 1; }
  .about__aside { justify-self: start; }

  .blue { grid-template-columns: 1fr; }
  .blue__media { justify-self: start; max-width: 20rem; }

  .footer__wordmark { white-space: normal; }
}

@media (max-width: 560px) {
  h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .work__grid { columns: 1; }
  .wrow__grid { grid-template-columns: 1fr; max-width: 20rem; margin: 0 auto; }
  .vrow__grid { grid-template-columns: repeat(2, 1fr); }
  .services__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .hero__line--2 { padding-left: 12vw; }
  .hero__media { flex-wrap: wrap; }
  .hero__status { margin-left: auto; }
  .contact__meta { flex-direction: column; gap: 0.8rem; }
  .about__aside { grid-column: 1; justify-self: start; }
}

/* ============================================================
   Contact modal
   ============================================================ */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(36rem, calc(100vw - 2rem));
  width: 100%;
}

.modal::backdrop {
  background: rgba(40, 37, 31, 0.55);
  backdrop-filter: blur(3px);
}

.modal__inner {
  position: relative;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(40, 37, 31, 0.35);
  padding: clamp(1.8rem, 4vw, 3rem);
  overflow: hidden;
}

.modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal__close:hover { background: var(--coral); color: #fff; }

.modal__inner > .eyebrow { display: block; margin-bottom: 0.6rem; }

.modal__inner h3 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.6rem; }

.modal__inner h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: 0 0 0.7rem; }

.modal__cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.modal__call p { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 1.4rem; max-width: 30ch; }

.modal__divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.modal__divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  border-left: 1px dashed var(--line-strong);
}

.modal__divider span {
  position: relative;
  background: var(--card);
  padding: 0.4em 0;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.modal__form { display: flex; flex-direction: column; gap: 0.9rem; }

.modal__form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

.modal__form input,
.modal__form textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.7em 0.9em;
  resize: vertical;
}

.modal__form input:focus,
.modal__form textarea:focus {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
  border-color: var(--azure);
}

.modal__form .btn { align-self: flex-start; }

.modal__hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

@media (max-width: 780px) {
  .modal__cols { grid-template-columns: 1fr; }
  .modal__divider { display: none; }
  .modal__call { border-bottom: 1px dashed var(--line-strong); padding-bottom: 1.4rem; }
  .modal__row { grid-template-columns: 1fr; }
}

/* ============================================================
   Blog — index cards + post template
   ============================================================ */

.blog-head { padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) var(--section-gap);
}

.bcard {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--card);
  padding: 10px 10px 1.4rem;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bcard:nth-child(3n+1) { transform: rotate(-1.2deg); }
.bcard:nth-child(3n+2) { transform: rotate(0.9deg); }
.bcard:nth-child(3n) { transform: rotate(-0.5deg); }

.bcard:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 18px 40px rgba(40, 37, 31, 0.24); }

.bcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.bcard__stamp {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5em 1em;
  border-radius: 3px;
  transform: rotate(3deg);
  box-shadow: 0 2px 0 rgba(40, 37, 31, 0.2);
}

.bcard h3 { font-size: 1.45rem; margin: 1rem 0.4rem 0.4rem; }

.bcard p { font-size: 0.95rem; color: var(--ink-2); margin: 0 0.4rem 0.8rem; }

.bcard__meta {
  display: flex;
  justify-content: space-between;
  margin: 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.bcard__meta b { color: var(--azure); }

/* ---- Post template ---- */

.post-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
}

.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}

.post-hero__meta .stamp {
  background: var(--gold);
  color: var(--ink);
  padding: 0.5em 1em;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(40, 37, 31, 0.2);
}

.post-hero h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.05; margin-bottom: 1.4rem; }

.post-hero h1 em { font-style: italic; color: var(--azure); }

.post-hero__intro { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 50ch; }

.post-hero__intro + .post-hero__intro { margin-top: 1rem; }

/* video placeholder polaroid */
.videoph {
  position: relative;
  background: var(--card);
  padding: 9px 9px 6px;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: rotate(1.6deg);
}

.videoph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.videoph--916 img { aspect-ratio: 9 / 16; }

.videoph__btn {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(31, 111, 178, 0.88);
  border-radius: 50%;
  font-size: 1rem;
  padding-left: 4px;
  pointer-events: none;
}

.videoph__tag {
  display: block;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: #5c5344;
  padding: 0.35em 0.2em 0.25em;
}

/* scorecard */
.post-score {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) var(--pad-x) var(--section-gap);
}

.scorecard {
  position: relative;
  background: var(--card);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem 2rem;
  transform: rotate(-1.5deg);
}

/* extra room when the award stamp is present so it never covers a score row */
.scorecard:has(.scorecard__award) { padding-bottom: 5rem; }

.scorecard::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  transform: rotate(-3deg);
  background: rgba(242, 179, 61, 0.6);
}

.scorecard h3 {
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
  padding-right: 5rem;
}

.scorecard__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.scorecard__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}

.scorecard__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}

.scorecard__num { font-variant-numeric: tabular-nums; color: var(--ink); }

.scorecard__total {
  position: absolute;
  top: -1.6rem;
  right: -1.2rem;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--azure);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(8deg);
  box-shadow: 0 8px 20px rgba(21, 86, 141, 0.4);
}

.scorecard__total b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }

.scorecard__total span { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

/* Absolutely Worth It award stamp (reviews scoring 4.7+/5) */
.scorecard__award {
  position: absolute;
  bottom: -2.4rem;
  right: -1.8rem;
  width: 138px;
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 8px 18px rgba(40, 37, 31, 0.32));
}

.stamp--award {
  background: var(--ink) !important;
  color: var(--gold) !important;
  transform: rotate(2deg) !important;
}

.post-score__text h2 { margin-bottom: 1.2rem; }

.post-score__text p { color: var(--ink-2); max-width: 58ch; }

.post-score__text p + p { margin-top: 1rem; }

.post-score__hand {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--coral-text);
  margin-top: 1.4rem;
  transform: rotate(-1deg);
}

/* album */
.post-album { padding: 0 var(--pad-x) var(--section-gap); }

.post-album .section-head { margin-bottom: 2rem; }

.album {
  columns: 3;
  column-gap: 1.8rem;
}

.album > * {
  margin-bottom: 1.8rem;
  break-inside: avoid;
}

.album .tile:nth-child(odd), .album .videoph:nth-child(odd) { transform: rotate(-1.4deg); }
.album .tile:nth-child(even), .album .videoph:nth-child(even) { transform: rotate(1.5deg); }

/* post CTA band */
.post-cta {
  position: relative;
  background: linear-gradient(180deg, var(--azure) 0%, var(--azure-deep) 100%);
  color: var(--paper);
  text-align: center;
  padding: clamp(4rem, 8vw, 6.5rem) var(--pad-x);
}

.post-cta h2 { color: #fff; }

.post-cta h2 em { color: var(--gold); }

.post-cta p { max-width: 44rem; margin: 1.4rem auto 0; color: rgba(247, 239, 221, 0.85); }

.post-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.post-cta .btn--ghost { color: #fff; border-color: rgba(247, 239, 221, 0.7); }
.post-cta .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* blog responsive */
@media (max-width: 1080px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .album { columns: 2; }
}

@media (max-width: 860px) {
  .post-hero { grid-template-columns: 1fr; }
  .post-score { grid-template-columns: 1fr; }
  .scorecard { max-width: 30rem; }
  .scorecard__total { right: 0; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
  .album { columns: 1; }
}

/* Honeypot: off-screen rather than display:none, since some bots skip
   hidden fields but will happily fill one that is merely positioned away. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  min-height: 1.2em;
}
.form__status--error { color: var(--coral-text); }
.form__status--ok { color: var(--azure-deep); font-weight: 600; }

.contact__card .form__status--ok,
.contact__card .form__status--error { color: inherit; }