/* ═══════════════════════════════════════════
   OCCASIONS BOX / CINEMATIC SITE
   Brand: Gold (#c5a55a) + Black (#1a1a1a) + White
   Typography: Cormorant Garamond + Outfit
   ═══════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --bg-alt: #faf8f5;
  --text: #1a1a1a;
  --text-light: #333333;
  --muted: #888888;
  --gold: #c5a55a;
  --gold-light: #d4be82;
  --gold-dark: #a68a3e;
  --gold-bg: rgba(197,165,90,0.08);
  --border: #e5e0d8;
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;
  --serif: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── Navigation ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 40px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
/* The wordmark sat hard against the 40px nav gutter; this brings it in to
   roughly a two-tab indent without moving the nav links. */
.nav-logo { flex-shrink: 0; margin-left: 64px; }
.nav-logo img { height: 60px; width: auto; transition: all 0.3s; }
.nav.scrolled .nav-logo img { height: 26px; }
.nav-links { display: flex; gap: 32px; align-items: center; white-space: nowrap; }
.nav-links a {
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 24px; border-radius: 100px;
  background: var(--gold); color: #fff;
  transition: background 0.2s;
  cursor: pointer; border: none;
}
.nav-cta:hover { background: var(--gold-dark); }
.nav-hamburger {
  display: none; cursor: pointer; background: none; border: none;
  width: 28px; height: 20px; position: relative;
}
.nav-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--text); position: absolute; left: 0;
  transition: all 0.3s;
}
.nav-hamburger span:nth-child(1) { top: 0; }
.nav-hamburger span:nth-child(2) { top: 9px; }
.nav-hamburger span:nth-child(3) { top: 18px; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-menu.active { opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  color: var(--text);
}
.mobile-menu a:hover { color: var(--gold); }

/* ─── Shared line icons ─── */
.icon svg, .contact-item-icon svg {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon svg { width: 28px; height: 28px; }
.contact-item-icon svg { width: 20px; height: 20px; }

/* ─── Section Utilities ─── */
.section-label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 56px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
}
.section-body {
  font-size: 16px; color: var(--text-light);
  line-height: 1.7; max-width: 60ch;
}
/* Hidden only once the inline head script confirms JS is running, and
   revealed again by a failsafe if the animation library never loads;
   otherwise a CDN hiccup leaves a page blank. */
html.anim .fade-up { opacity: 0; transform: translateY(30px); }

/* ═══════════════════════════════════════════
   SECTION 1: HERO / SCROLL-DRIVEN VIDEO
   ═══════════════════════════════════════════ */
/* The sticky panel inside is 100vh, so this height is how far someone has
   to scroll before the page moves on: at 300vh that was two full screens of
   scrolling past a photograph that had already finished saying what it says.
   150vh keeps the drift and the zoom and halves the wait. */
#hero {
  position: relative;
  height: 150vh;
}
.hero-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
}
/* The photograph drifts slowly on its own wrapper while the visitor is still,
   and GSAP keeps the img's own transform for the scroll zoom. One element
   cannot carry both without them fighting over `transform`.

   36 seconds and a 4% move: slow enough that nobody catches it starting, which
   is the difference between cinematic and a slideshow. */
.hero-photo-wrap {
  position: absolute; inset: 0;
  animation: heroDrift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.04) translate3d(-1.2%, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-wrap { animation: none; }
}

.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% center;
  transform-origin: 30% 45%;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 6vw; text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 9%, rgba(255,255,255,0) 22%),
    linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.70) 52%, rgba(255,255,255,0.94) 72%);
}
.hero-copy { max-width: 600px; width: 100%; margin-top: 64px; }
.hero-copy .hero-headline { font-size: clamp(34px, 4.2vw, 60px); }
.hero-tagline {
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 72px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text); margin-bottom: 24px;
  max-width: 700px;
}
.hero-sub {
  font-size: 17px; color: var(--muted);
  max-width: 50ch; margin-bottom: 32px; line-height: 1.6;
}
.hero-cta {
  display: inline-block;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 40px; border-radius: 100px;
  background: var(--gold); color: #fff;
  transition: background 0.2s;
}
.hero-cta:hover { background: var(--gold-dark); }
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: flex-start;
}
.hero-cta-secondary {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); padding: 14px 0;
  border-bottom: 1px solid var(--gold);
  transition: color 0.2s;
}
.hero-cta-secondary:hover { color: var(--gold); }
/* Hero fallback gradient (used if frames not loaded) */
.hero-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #faf8f5 0%, #f0ebe0 30%, #e8dece 60%, #faf8f5 100%);
  background-size: 400% 400%;
  animation: heroShift 12s ease infinite;
}
@keyframes heroShift {
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}

/* ═══════════════════════════════════════════
   SECTION 4: ABOUT
   ═══════════════════════════════════════════ */
#about { padding: 120px 24px; background: var(--bg-alt); }
.about-inner { max-width: 1100px; margin: 0 auto; }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.about-image {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}
/* Follow the file's own shape rather than a fixed height. At the desktop
   column width this renders identically to the old 400px, but it stops the
   narrower and the stacked breakpoints cropping an already-cropped photo a
   second time and cutting the box out of its own picture. */
.about-image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1300 / 1058; object-fit: cover;
}
.about-services {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 24px;
}
.about-service {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-light);
}
.about-service::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold); flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   FOUNDERS
   ═══════════════════════════════════════════ */
#founders { padding: 110px 24px 120px; background: var(--bg); }
.founders-inner { max-width: 900px; margin: 0 auto; }
.founders-header { text-align: center; margin-bottom: 56px; }
.founders-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.founder-photo {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
  margin-bottom: 24px; background: var(--bg-alt);
}
.founder-photo img {
  display: block; width: 100%; height: 470px;
  object-fit: cover; object-position: center top;
}
.founder-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 26px; color: var(--text); line-height: 1.2;
}
.founder-role {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-top: 8px;
}
.founder-bio {
  font-family: var(--sans); font-size: 15px; line-height: 1.75;
  color: var(--text-light); margin-top: 16px; max-width: 46ch;
}

/* ═══════════════════════════════════════════
   SECTION 5B: SHOP GRID / ALL PRODUCTS
   ═══════════════════════════════════════════ */
#shop { padding: 120px 24px; max-width: 1440px; margin: 0 auto; }
.shop-header { text-align: center; margin-bottom: 56px; }
.shop-filters {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 48px;
}
.shop-filter {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 20px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); cursor: pointer; transition: all 0.2s;
}
.shop-filter:hover, .shop-filter.active {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
/* Occasion filter. Price bands were the obvious thing to copy from the live
   site, but the catalog sits between $105 and $175, so three of its five
   bands would return nothing. Occasion is how people shop for a gift. */
.shop-filters {
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: 10px; margin: 0 auto 48px;
}
.shop-filter {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.03em;
  padding: 10px 20px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.shop-filter:hover { border-color: var(--gold); color: var(--text); }
.shop-filter.active {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.shop-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.shop-empty {
  text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 48px;
}
@media (max-width: 1080px) {
  .shop-filter { font-size: 14px; padding: 9px 16px; letter-spacing: 0; }
  .shop-filters { gap: 8px; }
}
/* Below the width where all eight chips fit on one centred line, the row
   scrolls sideways inside itself rather than pushing the page wider. */
@media (max-width: 1080px) {
  .shop-filters {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding: 2px 20px 8px; margin-bottom: 32px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .shop-filters::-webkit-scrollbar { display: none; }
  .shop-filter { flex: 0 0 auto; }
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px 16px;
}
.shop-card {
  position: relative;
  transition: transform 0.3s ease; cursor: pointer;
}
.shop-card-frame {
  position: relative; overflow: hidden; border-radius: 2px;
  background: var(--border);
}
.modal-variants { margin: 16px 0 0; }
.modal-variants-label {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.modal-variant {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  padding: 7px 16px; margin-right: 8px; cursor: pointer;
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border); border-radius: 100px;
  transition: all 0.2s ease;
}
.modal-variant:hover { border-color: var(--gold); }
.modal-variant.active {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
.modal-caution {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
  color: var(--text-light); margin: 14px 0 0;
  padding: 10px 14px; border-left: 2px solid var(--gold);
  background: var(--gold-bg); border-radius: 0 4px 4px 0;
}
.modal-sub {
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
  color: var(--muted); margin: 14px 0 0;
}
.shop-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,26,26,0.18);
}
.shop-card:hover .shop-card-frame {
  box-shadow: 0 14px 40px rgba(26,26,26,0.16);
}
.shop-card:hover .shop-card-name { color: var(--gold-dark); }
.shop-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shop-card-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 0.4s ease;
}
.shop-card:hover .shop-card-img { transform: scale(1.04); }
.shop-card-body { padding: 12px 2px 0; }
.shop-card-name {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: var(--text); margin-bottom: 4px;
}
.shop-card-price {
  font-family: var(--sans); font-size: 14px; color: var(--gold);
  font-weight: 500;
}
.shop-card-btn { display: none; }

/* ═══════════════════════════════════════════
   SECTION 6: HOW IT WORKS / PROCESS RAIL
   Four steps read at a glance, in one screen. The old version pinned a
   mockup and dimmed three of the four steps until you scrolled past them,
   which meant the page cost four screens of scrolling to say four things.
   ═══════════════════════════════════════════ */
.process-section { padding: 120px 24px; background: var(--bg-alt); }
.process-inner { max-width: 1180px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: 72px; }
.process-figure {
  max-width: 860px; margin: 0 auto 72px;
}
.process-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.10);
}
.process-figure figcaption {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.75;
  color: var(--text-light); text-align: center;
  max-width: 640px; margin: 40px auto 0;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.process-rail {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process-step {
  position: relative;
  text-align: center;
}
/* The hairline that ties the four markers into one run. It starts clear of
   this step's marker and stops clear of the next one. */
.process-step::after {
  content: ''; position: absolute;
  top: 31px; height: 1px;
  left: calc(50% + 44px); right: calc(-50% + 44px);
  background: var(--border);
}
.process-step:last-child::after { display: none; }
.process-marker {
  width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-bg);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.process-marker svg {
  width: 26px; height: 26px; fill: none; stroke: var(--gold);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.process-num {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--gold); letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 10px;
}
.process-step h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.25;
  text-wrap: balance; margin-bottom: 12px;
}
.process-step p {
  font-size: 14px; color: var(--muted); line-height: 1.65;
}

/* Two-up: the rail keeps running across each pair, so the connector is
   hidden on every second step instead of only the last. */
@media (max-width: 1040px) {
  .process-rail { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
  .process-step:nth-child(2n)::after { display: none; }
}

/* On a phone the four steps read as a vertical run: marker in a left
   gutter, copy beside it, and the connector turns to run downward. */
@media (max-width: 640px) {
  .process-section { padding: 80px 20px; }
  .process-header { margin-bottom: 48px; }
  .process-rail { grid-template-columns: 1fr; gap: 32px; }
  .concierge-gallery { grid-template-columns: 1fr; }
  .gift-strip { grid-template-columns: 1fr; }
  .process-step {
    display: grid; grid-template-columns: 52px 1fr;
    gap: 18px; text-align: left; align-items: start;
  }
  .process-marker { width: 52px; height: 52px; margin: 0; }
  .process-marker svg { width: 22px; height: 22px; }
  .process-step::after {
    top: 60px; bottom: -32px; height: auto;
    left: 26px; right: auto; width: 1px;
  }
  .process-step:last-child::after { display: none; }
  .process-step h3 { font-size: 19px; }
}

/* ═══════════════════════════════════════════
   SECTION 7: TESTIMONIALS / HORIZONTAL MARQUEE
   White ground so the section reads as its own
   block under the tinted concierge teaser above.
   ═══════════════════════════════════════════ */
.testimonials-section {
  padding: 110px 0 100px; background: var(--bg);
  overflow: hidden;
}
.testimonials-header { text-align: center; margin-bottom: 48px; padding: 0 24px; }

.reviews-marquee {
  position: relative;
  /* Fades the cards out at both edges instead of letting them clip. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.reviews-track { display: flex; width: max-content; }
.reviews-track.is-looped { animation: reviews-scroll 70s linear infinite; }
/* The gap lives on the card, not the flex container, so the duplicated
   half is exactly 50% of the track and the loop has no seam. */
.review-card {
  flex: 0 0 auto; width: 380px; margin-right: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 24px; padding: 36px 34px; min-height: 300px;
}
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }
/* No JS, no second copy: leave it a plain row the visitor can swipe. */
.reviews-marquee:not(:has(.is-looped)) { overflow-x: auto; padding-bottom: 8px; }

.card-stars {
  display: flex; gap: 3px; color: var(--gold); margin-bottom: 18px;
}
.review-card blockquote {
  font-family: var(--serif); font-size: 20px;
  font-weight: 400; font-style: italic;
  line-height: 1.5; margin-bottom: 22px;
  color: var(--text);
}
.review-card figcaption { display: flex; flex-direction: column; }
.card-author {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text); letter-spacing: 0.05em;
}
.card-role {
  font-family: var(--sans); font-size: 12px;
  color: var(--muted); margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  .reviews-marquee { overflow-x: auto; padding: 0 24px 8px; }
}

/* ═══════════════════════════════════════════
   SECTION 9: CONNECT / NEWSLETTER + SOCIAL
   ═══════════════════════════════════════════ */
#connect { padding: 92px 24px; background: var(--bg); }
.connect-grid {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
.connect-col { text-align: center; padding: 0 44px; }
.connect-col + .connect-col { border-left: 1px solid var(--border); }
.connect-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 31px); line-height: 1.18;
  color: var(--text); text-wrap: balance; margin-top: 12px;
}
.connect-body {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.7;
  color: var(--text-light); margin-top: 12px;
}
.connect-col .newsletter-form { margin-top: 26px; }
.connect-col .social-links { margin-top: 30px; }

/* ═══════════════════════════════════════════
   SECTION 9: FOLLOW ALONG / SOCIAL
   ═══════════════════════════════════════════ */
#social {
  padding: 96px 24px; text-align: center;
  background: var(--bg-alt);
}
.social-inner { max-width: 760px; margin: 0 auto; }
.social-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15;
  color: var(--text); text-wrap: balance; margin-top: 12px;
}
.social-body {
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  color: var(--text-light); margin-top: 14px;
}
.social-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 30px; margin-top: 34px;
}
/* Bare gold glyphs. The link's aria-label carries the network name that
   used to sit next to the icon. Padding keeps the tap target at 44px. */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px; border-radius: 999px;
  color: var(--gold); transition: color 0.25s, transform 0.25s;
}
.social-link:hover { color: var(--gold-dark); transform: translateY(-2px); }
.social-link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .social-link:hover { transform: none; }
}

/* ═══════════════════════════════════════════
   CLIENT LOGOS SECTION
   ═══════════════════════════════════════════ */
#clients {
  padding: 80px 24px 100px; background: var(--bg-alt);
  text-align: center;
}
.clients-header {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold-dark); margin-bottom: 56px;
}
.clients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  justify-items: center; align-items: center;
  gap: 52px 56px; max-width: 840px; margin: 0 auto;
}
.client-logo {
  flex-shrink: 0; width: auto;
  opacity: 0.8; transition: opacity 0.3s;
  filter: saturate(0.9);
}
.client-logo:hover { opacity: 1; filter: none; }

/* Heights are set per mark, not shared: a bold wide wordmark at the same
   height as a badge with fine internal type shouts over the whole row. */
.cl-heisenberg { height: 78px; }
.cl-viox       { height: 64px; }   /* a square app tile, not a wordmark */
.cl-yh         { height: 54px; }
.cl-ch5        { height: 60px; }
.cl-superior   { height: 60px; }
.cl-nw         { height: 76px; }
.cl-adfero     { height: 34px; }
.cl-kr         { height: 64px; }
.cl-chubb      { height: 31px; }

/* Set like the other quiet notes under a photograph row, at the muted weight
   so it reads as a footnote to the marks rather than a tenth logo. */
.clients-note {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--muted); text-align: center;
  margin: 52px 0 0; font-style: italic;
}

@media (max-width: 768px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
}

/* ═══════════════════════════════════════════
   SECTION 8: NEWSLETTER
   ═══════════════════════════════════════════ */
#newsletter {
  padding: 100px 24px; text-align: center;
  background: var(--bg-alt); border-top: 1px solid var(--border);
}
.newsletter-inner { max-width: 520px; margin: 0 auto; }
.newsletter-form {
  display: flex; gap: 12px; margin-top: 24px;
}
.newsletter-form input {
  flex: 1; padding: 14px 20px;
  border: 1px solid var(--border); border-radius: 100px;
  font-family: var(--sans); font-size: 15px;
  outline: none; background: var(--bg);
  transition: border-color 0.2s;
}
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form button {
  padding: 14px 32px; border-radius: 100px;
  background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer; transition: background 0.2s;
  white-space: nowrap;
}
.newsletter-form button:hover { background: var(--gold-dark); }

/* ═══════════════════════════════════════════
   SECTION 9: CONTACT
   ═══════════════════════════════════════════ */
#contact {
  padding: 120px 24px; max-width: 1100px; margin: 0 auto;
}
/* The enquiry form now carries nine fields; an even split left it cramped
   beside a contact column that is only four short lines. */
.contact-grid {
  display: grid; grid-template-columns: 1.7fr 1fr;
  gap: 72px; align-items: start;
}
/* Fields are labelled and carry their own spacing, so the form is a block
   rather than a gapped flex column; a flex gap would double the margins. */
.contact-form { display: block; }
.contact-form input:not([type="checkbox"]), .contact-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 20px; border: 1px solid var(--border);
  border-radius: 12px; font-family: var(--sans); font-size: 15px;
  outline: none; background: var(--bg); transition: border-color 0.2s;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); }
.contact-form textarea { min-height: 140px; }
.contact-form button {
  display: inline-block; padding: 14px 40px;
  border-radius: 100px; background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer; transition: background 0.2s;
}
.contact-form button:hover { background: var(--gold-dark); }
.contact-info { padding-top: 8px; }
.contact-item {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
}
.contact-item-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-bg); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.contact-item-value {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: var(--text);
}
/* The three brand marks, no captions. Same gold discs as the rows above so
   the column still reads as one list. */
.contact-socials { display: flex; gap: 14px; margin-top: 34px; }
.contact-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-bg); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s;
}
.contact-socials a:hover { background: var(--gold); color: #fff; }
.contact-socials a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Same outline treatment as the icons above; currentColor so they invert
   on hover. The Pinterest mark is a solid glyph, not an outline. */
.contact-socials svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact-socials svg.is-solid { fill: currentColor; stroke: none; }
.contact-item-value a { color: var(--gold); }
.contact-item-value a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   SECTION 10: FOOTER
   ═══════════════════════════════════════════ */
footer {
  background: var(--footer-bg); color: var(--footer-text);
  padding: 80px 40px 40px;
}
.footer-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px 32px;
}
.footer-brand p {
  font-size: 14px; color: rgba(255,255,255,0.5);
  margin-top: 16px; line-height: 1.6; max-width: 30ch;
}
.footer-col h4 {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.footer-col a {
  display: block; font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1100px; margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p {
  font-size: 12px; color: rgba(255,255,255,0.3);
}
.footer-social { display: flex; gap: 16px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 14px;
  transition: all 0.2s;
}
.footer-social a:hover {
  border-color: var(--gold); color: var(--gold);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Not enough width for a side column; stack the hero copy at the bottom.
     The desktop drop would push it into the scroll hint from here. */
  .hero-copy { margin-top: 0; }
  .hero-overlay {
    flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 0 24px 11vh; text-align: center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 14%),
      linear-gradient(180deg, rgba(255,255,255,0) 32%, rgba(255,255,255,0.80) 58%, rgba(255,255,255,0.96) 100%);
  }
  .hero-copy { max-width: 560px; }
  .hero-cta-row { justify-content: center; }
  .hero-photo { object-position: 42% center; }
}
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .founders-grid { grid-template-columns: 1fr; gap: 56px; }
  .founder-photo img { height: 420px; }
  .about-services { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-form { flex-direction: column; }
  .connect-grid { grid-template-columns: 1fr; }
  .connect-col { padding: 0; }
  .connect-col + .connect-col {
    border-left: none; border-top: 1px solid var(--border);
    margin-top: 44px; padding-top: 44px;
  }
  /* A 90px fade eats too much of a 300px card on a phone. */
  .reviews-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }
  .review-card { width: 300px; padding: 30px 26px; min-height: 260px; }
  .review-card blockquote { font-size: 18px; }
}
@media (max-width: 480px) {
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  .nav-logo img { height: 44px; }
  #about, #contact { padding: 80px 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  #social, #connect { padding: 72px 16px; }
  .social-links { gap: 22px; }
}

/* ═══════════════════════════════════════════
   LEGAL / POLICY PAGES
   ═══════════════════════════════════════════ */
.legal {
  max-width: 720px; margin: 0 auto;
  padding: 72px 24px 100px;
}
.legal-updated {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 40px;
}
.legal-intro {
  font-size: 17px; line-height: 1.75; color: var(--text-light);
  padding-bottom: 8px;
}
.legal h2 {
  font-family: var(--serif); font-size: 23px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--text);
  margin: 44px 0 14px;
}
.legal h2:first-of-type { margin-top: 8px; }
.legal p {
  font-size: 15.5px; line-height: 1.75; color: var(--muted);
  margin-bottom: 14px;
}
.legal a {
  color: var(--gold); border-bottom: 1px solid rgba(197,165,90,0.35);
  transition: border-color 0.2s;
}
.legal a:hover { border-bottom-color: var(--gold); }
@media (max-width: 600px) {
  .legal { padding: 40px 20px 72px; }
  .legal h2 { font-size: 21px; margin-top: 36px; }
}

/* ═══════════════════════════════════════════
   PRODUCT DETAIL MODAL
   ═══════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 24px;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg); border-radius: 20px;
  max-width: 1180px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 40px 80px rgba(0,0,0,0.15);
  display: grid; grid-template-columns: 1.15fr 1fr;
  position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--text);
  transition: all 0.2s;
}
.modal-close:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
/* The photograph, the thumbnails and the related boxes are one column. */
.modal-side {
  display: flex; flex-direction: column;
  background: var(--bg-alt); border-radius: 20px 0 0 20px; overflow: hidden;
}
.modal-gallery { display: grid; grid-template-rows: auto auto; }
.modal-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain; object-position: center;
}
/* Only shown once a box has more than one photograph. */
.modal-thumbs {
  display: flex; gap: 8px; padding: 10px;
  overflow-x: auto; background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.modal-thumbs[hidden] { display: none; }
.modal-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; line-height: 0;
  transition: border-color 0.2s;
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-thumb:hover { border-color: var(--gold-light); }
.modal-thumb.active { border-color: var(--gold); }
.modal-thumb:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.shop-card-img { cursor: pointer; }
.modal-body {
  padding: 40px; display: flex; flex-direction: column; justify-content: flex-start;
}

/* The gallery is short and the form is long, so the foot of the left column
   was empty. Four boxes from the same occasion go there. */
.modal-more { padding: 20px 20px 24px; }
.modal-more[hidden] { display: none; }
.modal-more-title {
  font-family: var(--serif); font-size: 16px; font-weight: 400;
  color: var(--text); margin: 0 0 14px;
}
.modal-more-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.modal-more-card {
  display: block; width: 100%; padding: 0; cursor: pointer; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.modal-more-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.modal-more-card:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.modal-more-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.modal-more-name {
  display: block; padding: 8px 10px 0;
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text);
}
.modal-more-price {
  display: block; padding: 2px 10px 10px;
  font-family: var(--sans); font-size: 12px; color: var(--gold-dark);
}
.modal-more-all { margin: 14px 0 0; font-size: 12px; }
.modal-more-all a { color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.modal-more-all a:hover { border-bottom-color: var(--gold); }
.modal-name {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  color: var(--text); margin-bottom: 8px;
}
.modal-price {
  font-family: var(--sans); font-size: 20px; font-weight: 500;
  color: var(--gold); margin-bottom: 16px;
}
.modal-desc {
  font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 24px;
}
.modal-qty {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.modal-qty label {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.modal-qty input {
  width: 60px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--sans); font-size: 15px;
  text-align: center; outline: none;
}
.modal-qty input:focus { border-color: var(--gold); }
#paypal-button-container { min-height: 50px; }
.modal-divider {
  height: 1px; background: var(--border); margin: 16px 0;
}
.modal-details {
  font-size: 13px; color: var(--muted); line-height: 1.6;
}
.modal-details span { color: var(--gold); }

/* ═══════════════════════════════════════════
   SECTION 6: PRICING TIERS
   ═══════════════════════════════════════════ */
#pricing { padding: 120px 24px; background: var(--bg); }
.pricing-header { text-align: center; margin-bottom: 56px; max-width: 600px; margin-left: auto; margin-right: auto; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1100px; margin: 0 auto;
}
.pricing-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px; padding: 40px 32px; text-align: center;
  position: relative; transition: all 0.3s ease;
  display: flex; flex-direction: column;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(197,165,90,0.1);
}
.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(197,165,90,0.12);
  transform: scale(1.04);
}
.pricing-card.featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 16px; border-radius: 100px; white-space: nowrap;
}
.pricing-tier {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px; margin-top: 8px;
}
.pricing-price {
  font-family: var(--serif); font-size: 48px; font-weight: 400;
  color: var(--text); line-height: 1; margin-bottom: 4px;
}
.pricing-unit {
  display: block; font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
}
.pricing-items {
  font-size: 14px; color: var(--muted); margin-bottom: 24px;
}
.pricing-features { list-style: none; padding: 0; text-align: left; margin-bottom: 28px; flex: 1; }
.pricing-features li {
  font-size: 14px; color: var(--muted); padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pricing-features li:last-child { border: none; }
.pricing-features li::before { content: '✓ '; color: var(--gold); font-weight: 600; }
.pricing-cta {
  display: block; width: 100%; padding: 14px; border-radius: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold);
  background: transparent; cursor: pointer; transition: all 0.2s;
  text-align: center; text-decoration: none;
}
.pricing-cta:hover, .pricing-card.featured .pricing-cta {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
.pricing-card.featured .pricing-cta:hover { background: var(--gold-dark); }
.pricing-volume {
  max-width: 1100px; margin: 40px auto 0;
  display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
}
.pricing-volume-item {
  text-align: center; padding: 16px 24px;
  background: var(--bg-alt); border-radius: 10px;
}
.pricing-volume-item .qty {
  font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--gold);
}
.pricing-volume-item .disc {
  font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 4px;
}
.pricing-volume-item { min-width: 150px; }
.pricing-volume-intro {
  font-family: var(--sans); font-size: 14px; color: var(--text-light);
  text-align: center; margin: 56px auto 0; max-width: 540px;
}
/* Quieter than the tiers, but it sits with them rather than in the Terms. */
.pricing-excl {
  font-family: var(--sans); font-size: 13px; line-height: 1.7;
  color: var(--muted); text-align: center;
  margin: 14px auto 0; max-width: 620px;
}
.pricing-excl b { color: var(--text-light); font-weight: 500; }

.modal-contents { margin: 4px 0 20px; }
.modal-contents-title {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.modal-contents ul { list-style: none; padding: 0; margin: 0; }
.modal-contents li {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--text-light); padding: 7px 0 7px 16px;
  border-bottom: 1px solid var(--border); position: relative;
}
.modal-contents li:last-child { border-bottom: 0; }
.modal-contents li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.modal-contents li b { color: var(--text); font-weight: 500; }

/* Design and delivery are quoted per project: design is often set low to win
   an account and delivery tracks distance, so publishing a figure for either
   would anchor the wrong way. The buyer still learns they exist. */
/* Bounds what "local" and "white-glove" commit us to, directly under the
   delivery add-on rather than in fine print somewhere else. */
/* The under-12 route out of this card has to look clickable. */
.pm-note a {
  color: var(--gold); border-bottom: 1px solid rgba(197,165,90,0.35);
  transition: border-color 0.2s;
}
.pm-note a:hover { border-bottom-color: var(--gold); }
.pa-note {
  max-width: 560px; margin: 20px auto 0; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.pricing-addons {
  max-width: 1040px; margin: 40px auto 0; text-align: center;
}
.pa-title {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.pa-items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
}
.pa-item {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-size: 14px;
}
.pa-name { color: var(--text-light); }
.pa-price { color: var(--text); }

/* ═══════════════════════════════════════════
   HOW WE START + ENQUIRY FORM
   ═══════════════════════════════════════════ */
#how-we-start { padding: 88px 24px; background: var(--bg-alt); }
.hws-inner { max-width: 1000px; margin: 0 auto; }
.hws-header { text-align: center; margin-bottom: 44px; }
.hws-header .section-label { font-size: 13px; }
.hws-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.hws-step { text-align: left; }
.hws-num {
  font-family: var(--serif); font-size: 15px; color: var(--gold);
  letter-spacing: 0.1em;
}
.hws-title {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  color: var(--text); margin-top: 10px;
}
.hws-desc {
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  color: var(--text-light); margin-top: 10px;
}
.hws-note {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.75;
  color: var(--text-light); text-align: center;
  max-width: 640px; margin: 40px auto 0;
  padding-top: 26px; border-top: 1px solid var(--border);
}

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: block; margin-bottom: 20px; }
.cf-label {
  display: block; font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); margin-bottom: 8px;
}
.cf-label em {
  font-style: normal; text-transform: none; letter-spacing: 0.02em;
  color: var(--muted); font-size: 11px;
}
.cf-help {
  display: block; font-family: var(--sans); font-size: 12.5px;
  line-height: 1.6; color: var(--muted); margin: -2px 0 10px;
}
.cf-help a { color: var(--gold-dark); }
.cf-fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.cf-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
}
.cf-checks label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--text-light);
}
.cf-checks input {
  width: 16px; height: 16px; accent-color: var(--gold);
  flex-shrink: 0; margin: 0;
}
.cf-error {
  font-family: var(--sans); font-size: 13px; color: #a3392f;
  margin: 0 0 16px;
}

@media (max-width: 760px) {
  #how-we-start { padding-top: 32px; }
  .hws-steps { grid-template-columns: 1fr; gap: 28px; }
  .cf-row { grid-template-columns: 1fr; gap: 0; }
  .cf-checks { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SECTION 3: CUSTOM GIFTING BAND
   ═══════════════════════════════════════════ */
#custom-band { padding: 120px 24px; background: var(--bg-alt); }
.cb-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.cb-sub {
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  color: var(--text-light); margin-top: 16px;
}

/* Figure and intro sit side by side. The card used to overlap the photo and
   crop a third of the composition out of it. */
.cb-stage {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.cb-figure {
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.10);
}
.cb-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 616 / 600; object-fit: cover;
}
.cb-intro h3 {
  font-family: var(--serif); font-weight: 400; font-size: 27px;
  color: var(--text); margin: 0 0 16px; line-height: 1.25;
}
.cb-intro p {
  font-family: var(--sans); font-size: 15px; line-height: 1.75;
  color: var(--text-light); margin: 0 0 26px;
}
.cb-link {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
.cb-link:hover { color: var(--gold-dark); }

/* ─── The three routes ─── */
.cb-routes {
  max-width: 1100px; margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cb-route {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 30px 28px; text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.cb-route:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.07);
}
.cb-route:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cb-route-name {
  font-family: var(--serif); font-size: 22px; color: var(--text); line-height: 1.2;
}
.cb-route-desc {
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  color: var(--text-light); margin-top: 10px;
}
/* margin-top:auto pins the numbers to the bottom so the three line up
   however long the description runs. */
.cb-route-facts {
  display: block; margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cb-route-facts { margin-top: auto; }
.cb-route-price {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 21px;
  color: var(--gold-dark); font-variant-numeric: tabular-nums;
}
.cb-route-meta {
  display: block; font-family: var(--sans); font-size: 12.5px;
  color: var(--muted); margin-top: 3px; line-height: 1.55;
}
.cb-route-go {
  display: block; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dark); margin-top: 16px;
}

/* ─── Concierge: a different kind of thing, so it does not look like a route ─── */
.cb-concierge {
  max-width: 1100px; margin: 20px auto 0;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  background: var(--footer-bg); border-radius: 12px;
  padding: 30px 34px; text-decoration: none;
  transition: transform 0.25s;
}
.cb-concierge:hover { transform: translateY(-3px); }
.cb-concierge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cb-conc-label {
  display: block; font-family: var(--serif); font-size: 21px; color: #fff; line-height: 1.25;
}
.cb-conc-text {
  display: block; font-family: var(--sans); font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,0.74); margin-top: 8px; max-width: 62ch;
}
.cb-conc-cta { text-align: right; white-space: nowrap; }
.cb-conc-cta b {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 25px;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.cb-conc-cta > span {
  display: block; font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.55);
}
.cb-conc-go {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff !important; margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .cb-route:hover, .cb-concierge:hover { transform: none; }
}

/* ═══════════════════════════════════════════
   SECTION 5: A LOOK INSIDE THE SHOP
   ═══════════════════════════════════════════ */
.products-section {
  /* White, because the custom band above it is bg-alt and two tinted
     sections in a row read as one. */
  padding: 120px 0; background: var(--bg); text-align: center;
}
.products-header { padding: 0 24px; margin-bottom: 56px; }
.products-cta { margin-top: 56px; }
.products-cta a {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: var(--gold-dark);
  border: 1px solid var(--gold); border-radius: 2px; padding: 15px 34px;
  display: inline-block; transition: background 0.3s, color 0.3s;
}
.products-cta a:hover { background: var(--gold); color: #fff; }

.peek-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.peek-card { display: block; text-decoration: none; }
.peek-img {
  border-radius: 2px; overflow: hidden; background: var(--bg-alt);
}
/* The photographs are 750 by 500. A fixed 340px height in a 279px column
   cropped a third off each side of a landscape photograph of a wide box, so
   the box was the part being thrown away. 3:2 is the shape they were shot in,
   which means nothing is cropped at all. */
.peek-img img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peek-card:hover .peek-img img { transform: scale(1.04); }
.peek-name {
  font-family: var(--serif); font-weight: 400; font-size: 19px;
  color: var(--text); margin-top: 18px; text-align: center;
}
.peek-price {
  font-family: var(--sans); font-size: 13px;
  color: var(--muted); margin-top: 5px; text-align: center;
}

@media (max-width: 1000px) {
  .cb-stage { gap: 0; }
  .cb-stage { grid-template-columns: 1fr; gap: 32px; }
  .cb-figure img { height: 360px; }
  .cb-routes { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .cb-concierge { grid-template-columns: 1fr; gap: 20px; }
  .cb-conc-cta { text-align: left; }
  .peek-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  #custom-band { padding: 90px 24px; }
  .cb-figure img { height: 300px; }
  .cb-route { padding: 26px 22px; }
  .cb-concierge { padding: 26px 24px; }
  .peek-grid { grid-template-columns: 1fr; max-width: 360px; }
  .peek-img img { height: 300px; }
}

/* ═══════════════════════════════════════════
   PRICING MINIMUMS + CONCIERGE TEASER
   ═══════════════════════════════════════════ */
.pricing-minimums {
  max-width: 1040px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.pricing-minimum { background: var(--bg); padding: 28px 32px; text-align: left; }
.pm-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.pm-value {
  font-family: var(--serif); font-size: 25px; font-weight: 400;
  color: var(--text); margin-top: 10px; line-height: 1.25;
}
.pm-value span { font-size: 15px; color: var(--muted); }
.pm-note {
  font-family: var(--sans); font-size: 13px; line-height: 1.7;
  color: var(--text-light); margin-top: 10px;
}

#concierge-teaser { padding: 110px 24px; background: var(--bg-alt); }
.ct-inner {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: 72px; align-items: center;
}
.ct-copy .section-title { margin-bottom: 18px; }
.ct-points { margin-top: 26px; display: grid; gap: 12px; }
.ct-point {
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--text-light); padding-left: 20px; position: relative;
}
.ct-point::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.ct-cta {
  display: inline-block; margin-top: 30px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: var(--gold-dark);
  border: 1px solid var(--gold); border-radius: 2px; padding: 14px 30px;
  transition: background 0.3s, color 0.3s;
}
.ct-cta:hover { background: var(--gold); color: #fff; }
.ct-figure { display: flex; justify-content: center; }
.ct-plan {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 40px 36px; text-align: center; width: 100%; max-width: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}
.ct-plan-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.ct-plan-price {
  font-family: var(--serif); font-size: 52px; font-weight: 400;
  color: var(--text); line-height: 1; margin-top: 12px;
}
.ct-plan-price span { font-size: 18px; color: var(--muted); }
.ct-plan-note {
  font-family: var(--sans); font-size: 13px; line-height: 1.7;
  color: var(--text-light); margin-top: 16px;
}

@media (max-width: 900px) {
  .ct-inner { grid-template-columns: 1fr; gap: 44px; }
  .ct-figure { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .pricing-minimums { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SECTION 9: GIFTING CONCIERGE SUBSCRIPTION
   ═══════════════════════════════════════════ */
#concierge { padding: 120px 24px; background: var(--bg-alt); }
/* On /concierge the page header already sits above, so the section's full
   120px opener leaves a dead band before the billing toggle. */
body.page-concierge #concierge { padding-top: 64px; }
.concierge-header { text-align: center; margin-bottom: 48px; max-width: 650px; margin-left: auto; margin-right: auto; }
.concierge-toggle {
  display: flex; justify-content: center; gap: 0; margin-bottom: 48px;
}
/* The page header now carries the concierge headline, so the toggle is the
   first thing in the section and needs its own breathing room above. */
#concierge > .concierge-toggle:first-child { margin-top: 8px; }
.concierge-toggle-btn {
  padding: 10px 28px; font-family: var(--sans); font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: all 0.2s;
}
.concierge-toggle-btn:first-child { border-radius: 100px 0 0 100px; }
.concierge-toggle-btn:last-child { border-radius: 0 100px 100px 0; }
.concierge-toggle-btn.active {
  background: var(--gold); color: #fff; border-color: var(--gold);
}
/* The label was hard-coded gold, which disappeared against the gold pill the
   moment its own button became the active one. */
.concierge-toggle-btn span { font-size: 10px; color: var(--gold); }
.concierge-toggle-btn.active span { color: #fff; opacity: 0.8; }
.concierge-billing {
  max-width: 560px; margin: 0 auto 36px; text-align: center;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.concierge-billing span {
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--gold);
}
.concierge-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.concierge-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px; padding: 36px 28px; position: relative;
  transition: all 0.3s ease;
}
.concierge-card:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 40px rgba(197,165,90,0.08);
}
.concierge-card.featured {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(197,165,90,0.12);
}
.concierge-card.featured::before {
  content: 'Most Popular'; display: block;
  background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 6px; margin: -36px -28px 24px;
  border-radius: 18px 18px 0 0;
}
.concierge-tier {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.concierge-price {
  font-family: var(--serif); font-size: 44px; font-weight: 400;
  color: var(--text); line-height: 1; margin-bottom: 2px;
}
.concierge-period { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
/* Carries the yearly figure plus the perk annual billing earns, so it has
   to sit on two lines without crowding the description under it. */
.concierge-annual {
  font-size: 12px; color: var(--gold); font-weight: 500;
  line-height: 1.5; margin-bottom: 18px; min-height: 2.2em;
}
.concierge-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
.concierge-features { list-style: none; padding: 0; margin-bottom: 24px; }
.concierge-features li {
  font-size: 12px; color: var(--muted); padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.concierge-features li:last-child { border: none; }
.concierge-features li::before { content: '✓ '; color: var(--gold); font-weight: 600; }
.concierge-cta {
  display: block; width: 100%; padding: 12px; border-radius: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold);
  background: transparent; cursor: pointer; transition: all 0.2s;
  text-align: center; text-decoration: none;
}
.concierge-cta:hover { background: var(--gold); color: #fff; }
.concierge-card.featured .concierge-cta {
  background: var(--gold); color: #fff;
}
.concierge-card.featured .concierge-cta:hover { background: var(--gold-dark); }

.concierge-includes {
  max-width: 1100px; margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.concierge-include {
  text-align: center; padding: 24px 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
}
.concierge-include .icon { font-size: 24px; margin-bottom: 10px; }
.concierge-include .title {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.concierge-include .desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
/* The sixth item was orphaning a row of its own, so it sits under the five
   as a line rather than a card. */
.gift-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin: 64px 0 56px;
}
.gift-strip figure {
  margin: 0; border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}
.gift-strip img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.gift-strip-note {
  grid-column: 1 / -1;
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--text-light); text-align: center; margin: 4px 0 0;
}

.hws-figure {
  max-width: 620px; margin: 56px auto 0;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}
.hws-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}

.concierge-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin: 72px 0 0;
}
.concierge-gallery figure {
  margin: 0; border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}
.concierge-gallery img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.concierge-gallery-note {
  grid-column: 1 / -1;
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--text-light); text-align: center; margin: 4px 0 0;
}

.concierge-footnote {
  max-width: 1100px; margin: 22px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--muted); text-align: center;
}
.concierge-footnote svg { color: var(--gold); flex-shrink: 0; }
.concierge-footnote b { color: var(--text); font-weight: 500; }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card.featured { transform: scale(1); }
  .concierge-grid { grid-template-columns: 1fr; max-width: 400px; }
  .concierge-includes { grid-template-columns: 1fr 1fr; }
  .concierge-footnote { flex-direction: column; gap: 6px; }
}
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .concierge-includes { grid-template-columns: 1fr; }
}

/* Footer team login link + honeypot field */
.footer-team-login { margin-left: 16px; color: var(--muted); font-size: 12px; transition: color 0.2s; }
.footer-team-login:hover { color: var(--gold); }
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important;
}

/* Toast notification */
/* Centred by auto margins between two insets rather than left:50%, which
   capped the box at half the viewport and wrapped it to four lines on a
   phone. */
.toast {
  position: fixed; top: 50%; left: 16px; right: 16px;
  margin-inline: auto; width: fit-content;
  max-width: min(460px, calc(100vw - 32px));
  /* Mid-screen, so it is read before it fades rather than competing with
     whatever section happens to be at the bottom of the viewport. */
  transform: translateY(-50%) scale(0.96); opacity: 0;
  z-index: 300; padding: 20px 34px; border-radius: 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  line-height: 1.5; text-align: center; text-wrap: balance;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  transition: opacity 0.26s ease, transform 0.4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.toast.show { transform: translateY(-50%) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.26s ease; transform: translateY(-50%); }
  .toast.show { transform: translateY(-50%); }
}
.toast.success { background: #1a1a1a; color: #fff; }
.toast.error { background: #c0392b; color: #fff; }

/* Form loading state */
.btn-loading { opacity: 0.6; pointer-events: none; }
.btn-loading::after {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; margin-left: 8px; vertical-align: middle;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  /* Stacked, the related boxes belong after the form, not between the
     photograph and the name of the box. */
  .modal {
    grid-template-columns: 1fr;
    grid-template-areas: "gallery" "body" "more";
    max-height: 95vh;
  }
  .modal-side { display: contents; }
  .modal-gallery {
    grid-area: gallery; min-height: 250px;
    background: var(--bg-alt); border-radius: 20px 20px 0 0; overflow: hidden;
  }
  .modal-body { grid-area: body; padding: 24px; }
  .modal-more {
    grid-area: more; background: var(--bg-alt);
    border-radius: 0 0 20px 20px; border-top: 1px solid var(--border);
  }
}

/* ═══════════════════════════════════════════
   MULTI-PAGE SUPPORT
   Only the home page has a hero. Inner pages open with a compact header
   that clears the fixed nav and carries the page's H1.
   ═══════════════════════════════════════════ */
.page-header {
  padding: 168px 40px 64px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.page-header .eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 58px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.12;
  color: var(--text); margin: 0 auto 18px;
  max-width: 16ch; text-wrap: balance;
}
.page-header p {
  font-size: 17px; color: var(--muted);
  max-width: 58ch; margin: 0 auto; line-height: 1.6;
}
@media (max-width: 768px) {
  .page-header { padding: 132px 24px 48px; }
}
@media (max-width: 480px) {
  .page-header { padding: 116px 20px 40px; }
}

/* Current page in the nav */
.nav-links a.active { color: var(--gold); }
.mobile-menu a.active { color: var(--gold); }

@media (max-width: 1040px) and (min-width: 769px) {
  .concierge-includes { grid-template-columns: repeat(3, 1fr); }
}

/* The nav carries six links plus a CTA since the journal opened. Below 1024
   they crowd the wordmark, so the hamburger takes over there rather than at
   the old 768; the extra link also moved this tightening up from 1150, where
   the logo and the links came within 5px of touching. */
@media (max-width: 1200px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 12px; }
}
/* One more step before the hamburger: at 1060 the seventh item put the links
   within 7px of the wordmark again. */
@media (max-width: 1090px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 11.5px; }
}
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  /* There is no room for the wordmark indent once the hamburger takes over. */
  .nav-logo { margin-left: 0; }
}

/* Inner pages open with the compact nav and no hero behind it, so the 26px
   scrolled logo is the page's only branding; give it a little more presence. */
body:not(.home) .nav.scrolled .nav-logo img { height: 38px; }
@media (max-width: 480px) {
  body:not(.home) .nav.scrolled .nav-logo img { height: 32px; }
}

/* ═══════════════════════════════════════════
   CART
   Someone sending gifts is rarely sending one, so the shop keeps a basket.
   The drawer slides in from the right over the grid, which keeps the
   browsing context intact behind it; "continue shopping" is one tap back.
   ═══════════════════════════════════════════ */
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-cart {
  position: relative; display: inline-flex; align-items: center;
  padding: 4px; line-height: 0; cursor: pointer;
  color: var(--text); background: none; border: none;
  transition: color 0.2s;
}
.nav-cart:hover { color: var(--gold); }
.nav-cart[hidden] { display: none; }
.nav-cart-count {
  position: absolute; top: -4px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.nav-cart-count[hidden] { display: none; }

.modal-add {
  width: 100%; margin-bottom: 20px; padding: 14px 24px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--gold);
  border: none; border-radius: 100px; cursor: pointer;
  transition: background 0.2s;
}
.modal-add:hover { background: var(--gold-dark); }

.cart-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end;
  background: rgba(26,26,26,0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.cart-overlay[hidden] { display: none; }
.cart-overlay.open { opacity: 1; }
.cart-panel {
  width: min(420px, 100%); height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.cart-overlay.open .cart-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .cart-overlay, .cart-panel { transition: none; }
}

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 18px; border-bottom: 1px solid var(--border);
}
.cart-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  letter-spacing: 0.02em; color: var(--text);
}
.cart-close {
  padding: 0 4px; cursor: pointer;
  background: none; border: none;
  font-size: 30px; line-height: 1; color: var(--muted);
  transition: color 0.2s;
}
.cart-close:hover { color: var(--text); }

.cart-body { flex: 1; overflow-y: auto; padding: 8px 28px 24px; }
.cart-empty {
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  color: var(--muted); padding: 32px 0;
}
.cart-empty[hidden] { display: none; }

.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 14px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  width: 64px; height: 64px; max-width: 100%;
  object-fit: cover; border-radius: 8px;
}
.cart-item-name {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.35;
  color: var(--text);
}
.cart-item-unit {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.cart-item-controls {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.cart-step {
  width: 26px; height: 26px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-light); font-size: 14px; line-height: 1;
  transition: border-color 0.2s, color 0.2s;
}
.cart-step:hover { border-color: var(--gold); color: var(--gold-dark); }
.cart-item-qty {
  min-width: 18px; text-align: center;
  font-family: var(--sans); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cart-remove {
  margin-left: 6px; cursor: pointer;
  background: none; border: none;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  transition: color 0.2s;
}
.cart-remove:hover { color: var(--gold-dark); }
.cart-item-total {
  font-family: var(--sans); font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.cart-foot {
  padding: 20px 28px 26px;
  border-top: 1px solid var(--border); background: var(--bg-alt);
}
.cart-foot[hidden] { display: none; }
/* The lines above the total: subtotal, then the processing and handling
   fee, set quieter than the figure they add up to. */
.cart-line {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  padding: 4px 0; font-variant-numeric: tabular-nums;
}
.cart-line small { font-size: 11px; opacity: 0.75; }
.cart-line + .cart-total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }

.cart-total {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cart-total b {
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cart-note {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.6;
  color: var(--muted); margin: 8px 0 16px;
}
.cart-loading {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  text-align: center;
}
.cart-continue {
  width: 100%; margin-top: 12px; padding: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); background: transparent;
  border: 1px solid var(--border); border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}
.cart-continue:hover { border-color: var(--gold); color: var(--gold-dark); }

/* The card button sits under PayPal's own buttons at the same height, so the
   two ways to pay read as one choice rather than a main one and an afterthought. */
.cart-or {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 10px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.cart-or::before, .cart-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cart-stripe {
  display: block; width: 100%; height: 45px; padding: 0 16px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--text); border: 1px solid var(--text);
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.cart-stripe:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.cart-stripe[disabled] { opacity: 0.6; cursor: wait; }
.cart-stripe.is-blocked { opacity: 0.4; pointer-events: none; filter: grayscale(0.6); }

.nav-cart:focus-visible, .cart-close:focus-visible, .cart-step:focus-visible,
.cart-remove:focus-visible, .cart-continue:focus-visible, .cart-stripe:focus-visible, .modal-add:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 2px;
}

/* On a phone the drawer is the full screen, and the line total drops under
   the name rather than squeezing the controls into a sliver. */
@media (max-width: 480px) {
  .cart-head { padding: 20px 18px 14px; }
  .cart-body { padding: 4px 18px 20px; }
  .cart-foot { padding: 18px 18px 22px; }
  .cart-item { grid-template-columns: 52px 1fr; }
  .cart-item-img { width: 52px; height: 52px; }
  .cart-item-total { grid-column: 2; margin-top: -6px; }
}

/* ═══════════════════════════════════════════
   PRODUCT PAGE
   Each box has its own address now, so it needs a page rather than a panel
   floating over the grid. The type and spacing follow the modal deliberately:
   a shopper who opens a box from the grid and one who arrives from a search
   result should be looking at the same thing.
   ═══════════════════════════════════════════ */
.pd {
  max-width: 1180px;
  margin: 0 auto;
  padding: 148px 40px 96px;
}
.pd-crumb {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 40px;
}
.pd-crumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.pd-crumb a:hover { color: var(--gold-dark); }
.pd-crumb span[aria-current] { color: var(--text-light); }

.pd-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
}
.pd-gallery {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--bg-alt);
  position: sticky; top: 108px;
}
/* The photographs are not one shape: most 5:4, several 3:2, one square, so
   the frame takes the file's own ratio from its width and height attributes
   rather than a fixed height that would crop a second time. */
.pd-gallery img { display: block; width: 100%; height: auto; }

.pd-name {
  font-family: var(--serif); font-size: clamp(30px, 4vw, 42px);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 10px;
}
.pd-price {
  font-family: var(--sans); font-size: 22px; font-weight: 500;
  color: var(--gold); margin-bottom: 22px;
}
.pd-variants { margin: 0 0 22px; }
.pd-variants-label {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.pd-variant {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em;
  padding: 7px 16px; margin-right: 8px; cursor: pointer;
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border); border-radius: 100px;
  transition: all 0.2s ease;
}
.pd-variant:hover { border-color: var(--gold); }
.pd-variant.active { background: var(--gold); color: #fff; border-color: var(--gold); }

.pd-contents { margin: 0 0 4px; }
.pd-contents-title {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.pd-contents ul { list-style: none; padding: 0; margin: 0; }
.pd-contents li {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--text-light); padding: 7px 0 7px 16px;
  border-bottom: 1px solid var(--border); position: relative;
}
.pd-contents li:last-child { border-bottom: 0; }
.pd-contents li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.pd-contents li b { color: var(--text); font-weight: 500; }
.pd-generic { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }

.pd-caution {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
  color: var(--text-light); margin: 16px 0 0;
  padding: 10px 14px; border-left: 2px solid var(--gold);
  background: var(--gold-bg); border-radius: 0 4px 4px 0;
}
.pd-sub {
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
  color: var(--muted); margin: 16px 0 0;
}

.pd-buy { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; }
.pd-qty { display: flex; align-items: center; gap: 12px; }
.pd-qty label {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.pd-qty input {
  width: 66px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--sans); font-size: 15px;
  text-align: center; outline: none;
}
.pd-qty input:focus { border-color: var(--gold); }
.pd-add {
  flex: 1; padding: 15px 28px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--gold); border: 1px solid var(--gold);
  border-radius: 100px; transition: all 0.25s ease;
}
.pd-add:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.pd-ship {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.7;
  color: var(--muted); margin: 18px 0 0;
}

.pd-more { margin-top: 112px; padding-top: 56px; border-top: 1px solid var(--border); }
.pd-more-title {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  color: var(--text); margin: 0 0 32px; text-align: center;
}
.pd-more-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.pd-more-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--bg); transition: all 0.25s ease;
}
.pd-more-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.pd-more-card img { display: block; width: 100%; height: auto; }
.pd-more-name {
  display: block; font-family: var(--serif); font-size: 16px;
  color: var(--text); padding: 14px 16px 2px;
}
.pd-more-price {
  display: block; font-family: var(--sans); font-size: 13px;
  color: var(--gold); padding: 0 16px 16px;
}
.pd-more-all {
  text-align: center; margin: 36px 0 0;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em;
}
.pd-more-all a { color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; }

/* The shop card's photograph is now a real link to the box's own page. The
   grid still opens the modal on click; the href is what a crawler follows and
   what a middle click or a share opens. */
.shop-card-link { display: block; }

@media (max-width: 980px) {
  .pd { padding: 128px 24px 72px; }
  .pd-grid { grid-template-columns: 1fr; gap: 36px; }
  .pd-gallery { position: static; }
  .pd-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pd { padding: 116px 16px 60px; }
  .pd-buy { flex-wrap: wrap; }
  .pd-add { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════
   JOURNAL
   The index and the posts share one card, so a post looks the same wherever
   it is listed. Type sizes follow the product pages rather than inventing a
   third scale.
   ═══════════════════════════════════════════ */
.jr-index { max-width: 1180px; margin: 0 auto; padding: 72px 40px 104px; }
.jr-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px;
}
.jr-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.25s ease;
}
.jr-card:hover { transform: translateY(-3px); }
.jr-card:hover .jr-card-more { border-bottom-color: var(--gold); }
.jr-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 14px; margin-bottom: 20px;
}
.jr-card-date, .jr-post-date {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark);
}
.jr-card-title {
  font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.25;
  color: var(--text); margin: 10px 0 8px; text-wrap: balance;
}
.jr-card-summary {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--text-light); margin: 0 0 12px;
}
.jr-card-more {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-dark);
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
  transition: border-color 0.25s ease;
}

.jr-post { max-width: 760px; margin: 0 auto; padding: 148px 40px 96px; }
.jr-crumb {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 40px;
}
.jr-crumb a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.jr-crumb a:hover { color: var(--gold-dark); }
.jr-crumb span[aria-current] { color: var(--text-light); }
.jr-post-head { margin-bottom: 40px; }
.jr-post-title {
  font-family: var(--serif); font-size: clamp(32px, 4.6vw, 48px); font-weight: 400;
  line-height: 1.12; letter-spacing: -0.015em; color: var(--text);
  margin: 12px 0 16px; text-wrap: balance;
}
.jr-post-standfirst {
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  color: var(--text-light); margin: 0;
}
.jr-post-figure { margin: 0 0 48px; }
.jr-post-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.10);
}
/* Body copy is set at a comfortable reading measure; the container already
   caps the line length, so the elements only need rhythm. */
.jr-post-body { font-family: var(--sans); font-size: 16.5px; line-height: 1.8; color: var(--text-light); }
.jr-post-body p { margin: 0 0 22px; }
.jr-post-body b, .jr-post-body strong { font-weight: 600; color: var(--text); }
.jr-post-body h2 {
  font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1.25;
  color: var(--text); margin: 44px 0 14px;
}
.jr-post-body h3 {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dark); margin: 34px 0 10px;
}
.jr-post-body ul, .jr-post-body ol { margin: 0 0 22px; padding-left: 20px; }
.jr-post-body li { margin-bottom: 9px; }
.jr-post-body a { color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--border); }
.jr-post-body a:hover { border-bottom-color: var(--gold); }
.jr-post-body blockquote {
  margin: 30px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--text);
}
.jr-post-body img { display: block; width: 100%; height: auto; border-radius: 6px; margin: 30px 0; }
.jr-post-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); }
.jr-post-cta {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.7;
  color: var(--text-light); margin: 0;
}
.jr-post-cta a { color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid var(--border); }
.jr-more { margin-top: 96px; padding-top: 52px; border-top: 1px solid var(--border); }
.jr-more-title {
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  color: var(--text); margin: 0 0 30px; text-align: center;
}
.jr-more .jr-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.jr-more .jr-card-title { font-size: 17px; }
.jr-more .jr-card-summary { display: none; }

@media (max-width: 980px) {
  .jr-index { padding: 56px 24px 80px; }
  .jr-grid, .jr-more .jr-grid { grid-template-columns: repeat(2, 1fr); }
  .jr-post { padding: 128px 24px 72px; }
}
@media (max-width: 620px) {
  .jr-index { padding: 44px 16px 64px; }
  .jr-grid, .jr-more .jr-grid { grid-template-columns: 1fr; gap: 36px; }
  .jr-post { padding: 116px 16px 60px; }
}

/* A photograph of a box we sell links to that box. The anchor is a plain
   block so it inherits the figure's layout and changes nothing visually; the
   hover lift is what tells you it is clickable. */
.box-link { display: block; transition: transform 0.3s ease, opacity 0.3s ease; }
.box-link:hover { transform: translateY(-3px); opacity: 0.94; }
.box-link img { display: block; }

/* ═══════════════════════════════════════════
   OCCASIONS, /custom-gifting
   Eight short entries, so the grid stays even at every breakpoint: four
   across, then two, then one. Each is a heading and one line, not a card,
   because a border around eight items would fight the pricing table below.
   ═══════════════════════════════════════════ */
#occasions { padding: 96px 40px 24px; }
.occ-inner { max-width: 1100px; margin: 0 auto; }
.occ-header { text-align: center; margin-bottom: 52px; }
.occ-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px 36px;
}
.occ-item h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dark); margin: 0 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.occ-item p {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--text-light); margin: 0;
}

@media (max-width: 980px) {
  #occasions { padding: 72px 24px 16px; }
  .occ-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .pricing-minimums { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #occasions { padding: 56px 16px 8px; }
  .occ-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ═══ Lightbox, product thumbnails and sharing ═══ */

/* The photograph is the product, so say it is clickable. */
.modal-img, .pd-gallery img { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  background: rgba(16,14,12,0.92);
  opacity: 0; transition: opacity 0.22s ease;
}
.lightbox.active { opacity: 1; }
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }

.lightbox-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: min(1100px, 100%); max-height: 100%;
}
.lightbox-img {
  display: block; max-width: 100%; max-height: calc(100vh - 140px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 2px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  background: #fff;
}
.lightbox-caption {
  color: rgba(255,255,255,0.72); font-size: 0.82rem; letter-spacing: 0.04em;
  text-align: center; max-width: 60ch;
}
.lightbox-close, .lightbox-nav {
  flex: none; background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  cursor: pointer; line-height: 1; transition: background 0.18s ease, border-color 0.18s ease;
}
.lightbox-close:hover, .lightbox-nav:hover {
  background: rgba(255,255,255,0.18); border-color: var(--gold);
}
.lightbox-close:focus-visible, .lightbox-nav:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.lightbox-close {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; font-size: 1.6rem;
}
.lightbox-nav { width: 46px; height: 46px; font-size: 2rem; }
.lightbox-nav[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}
@media (max-width: 640px) {
  .lightbox { padding: 16px 8px; }
  .lightbox-img { max-height: calc(100vh - 170px); }
  /* At phone width the arrows sit under the photograph rather than
     squeezing it between them. */
  .lightbox { flex-wrap: wrap; }
  .lightbox-figure { order: -1; flex-basis: 100%; }
}

/* A box with more than one photograph gets a strip under the main one. */
.pd-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.pd-thumbs[hidden] { display: none; }
.pd-thumb {
  width: 74px; height: 74px; padding: 0; overflow: hidden; cursor: pointer;
  background: none; border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 2px; transition: border-color 0.18s ease;
}
.pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: var(--gold-light); }
.pd-thumb.active { border-color: var(--gold); }
.pd-thumb:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* Sharing. Someone who has just found a gift for a friend is one tap from
   telling three more, which is the cheapest reach this shop has. */
.share-row {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
}
.share-row[hidden] { display: none; }
.share-link {
  display: inline-flex; color: var(--gold); opacity: 0.85;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.share-link:hover { opacity: 1; transform: translateY(-1px); }
.share-link:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.share-link svg { display: block; width: 19px; height: 19px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .share-link:hover { transform: none; }
}

/* The story above the contents list. Slightly larger than the generic line it
   replaces, because on most boxes it is now the first thing read. */
.pd-story {
  font-size: 15.5px; color: var(--text); line-height: 1.68;
  margin: 0 0 22px; max-width: 58ch;
}

/* ═══ Save to Pinterest, on the shop grid ═══
   Pinterest is where gift buyers actually browse, and a pin of a box carries
   its photograph, its price and a link back. The old Squarespace shop put a
   Save button on every listing and the rebuild lost it.

   Top right, because the CLIENT FAVORITE badge already owns the top left. */
.shop-pin {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 11px; border-radius: 100px;
  background: #e60023; color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  line-height: 1; letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.shop-card:hover .shop-pin,
.shop-card:focus-within .shop-pin {
  opacity: 1; transform: none; pointer-events: auto;
}
.shop-pin:hover { background: #ad081b; }
.shop-pin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shop-pin svg { width: 14px; height: 14px; fill: currentColor; }

/* A touch screen has no hover, so the button would never appear. */
@media (hover: none) {
  .shop-pin { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-pin { transition: opacity 0.2s ease; transform: none; }
}

/* ═══ The handwritten card ═══
   Offered on the product page, in the modal and again in the cart, because
   the choice is often made after the box is. */
.ob-card-pick {
  display: flex; flex-direction: column; gap: 7px;
  margin: 20px 0; padding: 16px;
  background: var(--gold-bg); border-left: 2px solid var(--gold);
  border-radius: 0 4px 4px 0;
}
.ob-card-pick label {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.ob-card-pick select,
.ob-card-pick textarea,
.cart-item-card select,
.cart-item-card textarea {
  font-family: var(--sans); font-size: 13.5px; color: var(--text);
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; width: 100%; box-sizing: border-box;
}
.ob-card-pick textarea, .cart-item-card textarea { resize: vertical; line-height: 1.5; }
.ob-card-pick select:focus-visible, .ob-card-pick textarea:focus-visible,
.cart-item-card select:focus-visible, .cart-item-card textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.ob-card-hint {
  font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin: 2px 0 0;
}

/* In the cart, tighter, and it says so when it is still empty. */
.cart-item-card {
  display: flex; flex-direction: column; gap: 5px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border);
}
.cart-item-card label {
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.cart-item-card.needs-card select {
  border-color: #b4472e; background: #fdf6f4;
}
.cart-item-card.needs-card > label:first-child { color: #b4472e; }

.cart-card-warning {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: #b4472e; margin: 0 0 12px;
  padding: 10px 12px; background: #fdf6f4;
  border-left: 2px solid #b4472e; border-radius: 0 4px 4px 0;
}
.cart-card-warning[hidden] { display: none; }

/* Dimmed and unclickable while a box still has no card. onClick refuses it
   as well, so removing this class in the inspector buys nothing. */
#paypal-button-container.is-blocked {
  opacity: 0.4; pointer-events: none; filter: grayscale(0.6);
}

/* ═══ Quick view, and paging a card's photographs ═══
   Loft puts a bar across the foot of the photograph on hover. It is the one
   thing the View Details button was doing that the photograph alone did not:
   saying out loud that there is more to see without leaving the grid. */
.shop-quickview {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border: none; cursor: pointer;
  padding: 13px 10px;
  background: rgba(255,255,255,0.94);
  color: var(--text);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shop-card:hover .shop-quickview,
.shop-card:focus-within .shop-quickview { transform: none; }
.shop-quickview:hover { background: #fff; color: var(--gold-dark); }
.shop-quickview:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.shop-page {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); color: var(--text);
  border: none; cursor: pointer; font-size: 1.3rem; line-height: 1;
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
}
.shop-page-prev { left: 10px; }
.shop-page-next { right: 10px; }
.shop-card:hover .shop-page,
.shop-card:focus-within .shop-page { opacity: 1; }
.shop-page:hover { background: #fff; }
.shop-page:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 2px; }

/* No hover on a touch screen, so both stay put rather than never arriving. */
@media (hover: none) {
  .shop-quickview { transform: none; }
  .shop-page { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-quickview { transition: none; }
}

/* The share row on a product page, now that it says what it is for. */
.pd-share-label {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 -8px;
}