/* ==========================================================================
   POV360 — Mediterranean Sunset on white
   ========================================================================== */

:root {
  /* Mediterranean Sunset on white. Warm ink, coral sun, amber, sea teal. */
  --ink: #2B1C24;                          /* warm near-black */
  --ink-muted: rgba(43, 28, 36, 0.68);
  --paper: #ffffff;
  --paper-trans: rgba(255, 255, 255, 0.92);
  --card: #FFF6F0;                         /* warm off-white surface */
  --card-hover: #FCE9DC;                   /* deeper warm tint */
  --accent: #E2552C;                       /* the sun on the water */
  --accent-hover: #C8441F;
  --accent-ink: #ffffff;                   /* text that sits on the accent */
  --accent-glow: rgba(226, 85, 44, 0.26);
  --accent-2: #2C7A7B;                     /* sea teal */
  --amber: #F2A65A;
  --border-color: rgba(43, 28, 36, 0.14);
  --wa: #25d366;
  --ig: #e1306c;
  --li: #0a66c2;

  --font: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --s1: 6px;  --s2: 10px; --s3: 14px; --s4: 20px;
  --s5: 28px; --s6: 40px; --s7: 56px; --s8: 80px; --s9: 112px;

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 40px;

  --shadow: 0 14px 34px -14px rgba(120, 60, 40, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lift: 0 22px 46px -16px rgba(226, 85, 44, 0.34);
  --ease: cubic-bezier(.25, .8, .25, 1);
  --t: all .28s var(--ease);

  --head-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--paper); color: var(--ink);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }

/* --- Reveal animations --- */
.reveal { opacity: 0; filter: blur(8px); transform: translateY(18px); will-change: opacity, filter, transform; }
.no-fx .reveal { opacity: 1!important; filter: none!important; transform: none!important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1!important; filter: none!important; transform: none!important; }
}

/* --- Header --- */
header {
  position: sticky; top: 0; z-index: 900;
  /* The inset is only non-zero where the browser hands us the area behind the
     status bar. Where it does, the header grows into it and the glass below
     fills it, so the blur runs to the very top edge of the screen. */
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3);
}
/* 100vw can exceed the viewport when a classic scrollbar is shown, so clip the
   overflow. `clip` rather than `hidden`: hidden would break the sticky header. */
body { overflow-x: clip; }

/* Liquid glass. Stacked blur layers, each masked so the blur itself fades out
   instead of ending on a hard line, and each spanning the whole viewport
   instead of stopping at the content gutters. */
.glass {
  position: absolute; top: -2px; bottom: -18px;
  left: 50%; width: 100vw;
  transform: translateX(-50%); z-index: -1; pointer-events: none; overflow: hidden;
}
.glass i { position: absolute; inset: 0; display: block; }
/* Progressive blur. Four backdrop layers, each masked with a smoothstep ramp
   rather than a straight line, and each window overlapping the next by about
   half. Straight ramps meet at a slope change and the eye reads that as a
   printed line across the header, which is what the stacked version did. */
.glass i:nth-child(1) {
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.925) 9.1%, rgba(0,0,0,0.736) 18.2%, rgba(0,0,0,0.492) 27.3%, rgba(0,0,0,0.250) 36.4%, rgba(0,0,0,0.067) 45.5%, rgba(0,0,0,0.000) 54.5%, rgba(0,0,0,0.000) 63.6%, rgba(0,0,0,0.000) 72.7%, rgba(0,0,0,0.000) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.925) 9.1%, rgba(0,0,0,0.736) 18.2%, rgba(0,0,0,0.492) 27.3%, rgba(0,0,0,0.250) 36.4%, rgba(0,0,0,0.067) 45.5%, rgba(0,0,0,0.000) 54.5%, rgba(0,0,0,0.000) 63.6%, rgba(0,0,0,0.000) 72.7%, rgba(0,0,0,0.000) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
}
.glass i:nth-child(2) {
  -webkit-backdrop-filter: blur(11px) saturate(150%);
  backdrop-filter: blur(11px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,0.984) 18.2%, rgba(0,0,0,0.858) 27.3%, rgba(0,0,0,0.649) 36.4%, rgba(0,0,0,0.408) 45.5%, rgba(0,0,0,0.186) 54.5%, rgba(0,0,0,0.036) 63.6%, rgba(0,0,0,0.000) 72.7%, rgba(0,0,0,0.000) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,0.984) 18.2%, rgba(0,0,0,0.858) 27.3%, rgba(0,0,0,0.649) 36.4%, rgba(0,0,0,0.408) 45.5%, rgba(0,0,0,0.186) 54.5%, rgba(0,0,0,0.036) 63.6%, rgba(0,0,0,0.000) 72.7%, rgba(0,0,0,0.000) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
}
.glass i:nth-child(3) {
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,1.000) 18.2%, rgba(0,0,0,1.000) 27.3%, rgba(0,0,0,0.994) 36.4%, rgba(0,0,0,0.876) 45.5%, rgba(0,0,0,0.655) 54.5%, rgba(0,0,0,0.396) 63.6%, rgba(0,0,0,0.162) 72.7%, rgba(0,0,0,0.018) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,1.000) 18.2%, rgba(0,0,0,1.000) 27.3%, rgba(0,0,0,0.994) 36.4%, rgba(0,0,0,0.876) 45.5%, rgba(0,0,0,0.655) 54.5%, rgba(0,0,0,0.396) 63.6%, rgba(0,0,0,0.162) 72.7%, rgba(0,0,0,0.018) 81.8%, rgba(0,0,0,0.000) 90.9%, rgba(0,0,0,0.000) 100.0%);
}
.glass i:nth-child(4) {
  -webkit-backdrop-filter: blur(2px) saturate(150%);
  backdrop-filter: blur(2px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,1.000) 18.2%, rgba(0,0,0,1.000) 27.3%, rgba(0,0,0,1.000) 36.4%, rgba(0,0,0,1.000) 45.5%, rgba(0,0,0,1.000) 54.5%, rgba(0,0,0,0.920) 63.6%, rgba(0,0,0,0.676) 72.7%, rgba(0,0,0,0.371) 81.8%, rgba(0,0,0,0.110) 90.9%, rgba(0,0,0,0.000) 100.0%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,1.000) 9.1%, rgba(0,0,0,1.000) 18.2%, rgba(0,0,0,1.000) 27.3%, rgba(0,0,0,1.000) 36.4%, rgba(0,0,0,1.000) 45.5%, rgba(0,0,0,1.000) 54.5%, rgba(0,0,0,0.920) 63.6%, rgba(0,0,0,0.676) 72.7%, rgba(0,0,0,0.371) 81.8%, rgba(0,0,0,0.110) 90.9%, rgba(0,0,0,0.000) 100.0%);
}
/* The white veil sits on top of all four, on the same smoothstep, so the
   whole thing dissolves into the page without a seam. */
.glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.800) 0.0%, rgba(255,255,255,0.800) 8.3%, rgba(255,255,255,0.787) 16.7%, rgba(255,255,255,0.741) 25.0%, rgba(255,255,255,0.667) 33.3%, rgba(255,255,255,0.573) 41.7%, rgba(255,255,255,0.466) 50.0%, rgba(255,255,255,0.356) 58.3%, rgba(255,255,255,0.248) 66.7%, rgba(255,255,255,0.151) 75.0%, rgba(255,255,255,0.072) 83.3%, rgba(255,255,255,0.019) 91.7%, rgba(255,255,255,0.000) 100.0%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass::after { background: linear-gradient(to bottom, #fff 0%, #fff 56%, rgba(255,255,255,0) 100%); }
}
.logo { display: inline-flex; align-items: center; }
.logo img { width: 83px; height: auto; }

.nav { position: relative; display: flex; align-items: center; gap: var(--s4); justify-self: center; }
.nav a {
  text-decoration: none; font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  opacity: .85; transition: var(--t); padding: 6px 2px; white-space: nowrap;
}
.nav a:hover, .nav a.on { opacity: 1; color: var(--accent); }
.nav-bar {
  position: absolute; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent);
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
  opacity: 0; transform-origin: left center; left: 0;
}
.head-actions { display: flex; align-items: center; gap: var(--s2); justify-self: end; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border-color); box-shadow: var(--shadow);
  transition: var(--t);
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.icon-btn.ig:hover { color: var(--ig); }
.icon-btn.wa:hover { color: var(--wa); }
.burger { display: none; cursor: pointer; }

/* --- Hero --- */
.hero { padding: clamp(56px, 6vw, 72px) 0 clamp(40px, 6vw, 64px); text-align: center; }
h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.7rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  background: linear-gradient(118deg, var(--ink) 0%, #8E3B2E 46%, var(--accent) 74%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  /* background-clip: text paints only inside the element box, and the negative
     tracking is applied after the last glyph as well, so the box ends a sliver
     inside the ink: the final letter lost its right edge, worst on a g or an e.
     Pad the box out and pull the same amount back off the layout. */
  padding: 0 .09em .06em; margin: 0 -.09em -.06em;
}
.hero p {
  margin: var(--s3) auto 0; max-width: 46ch; color: var(--ink-muted);
  font-size: clamp(1rem, 1.35vw, 1.18rem); font-weight: 500;
}
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: clamp(28px, 4vw, 44px); }
.pick {
  position: relative; display: flex; flex-direction: column; text-align: left; text-decoration: none;
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; transition: var(--t); cursor: pointer;
}
.pick:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.pick figure { position: relative; aspect-ratio: 4/5; background: var(--card-hover); overflow: hidden; }
.pick figure img, .pick figure video { width: 100%; height: 100%; object-fit: cover; }
.pick .no {
  position: absolute; top: 12px; left: 14px; z-index: 2; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); padding: 4px 10px;
}
.pick div { padding: var(--s4) var(--s4) var(--s5); flex: 1; display: flex; flex-direction: column; }
.pick h3 { font-size: 1.28rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.pick p { margin-top: 6px; font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }
.pick .go { margin-top: auto; padding-top: var(--s3); display: inline-block; font-size: .85rem; font-weight: 700; color: var(--accent); }
.pick .go::after { content: ' ↓'; display: inline-block; transition: var(--t); }
.pick:hover .go::after { transform: translateY(3px); }

/* --- Trust Strip --- */
.strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5);
  padding: var(--s4) 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); text-align: center;
}

/* --- Section Shell --- */
section[id] { scroll-margin-top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + 18px); }
.sec { padding: clamp(56px, 8vw, var(--s9)) 0; }
.sec-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: end; }
.sec-head.with-rail { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.ghost {
  position: absolute; left: -.06em; top: -.52em; z-index: -1; pointer-events: none; user-select: none;
  font-size: clamp(7rem, 15vw, 13rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: rgba(43, 28, 36, 0.055);
}
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin-top: var(--s2); }
.lead { font-size: 1.05rem; line-height: 1.62; color: var(--ink-muted); max-width: 34em; }

/* --- Price Tiles --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: var(--s2); }
.tile {
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: var(--s3); transition: var(--t);
}
.tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.tile .amt { font-size: 1.55rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.tile .amt small { font-size: .55em; font-weight: 700; opacity: .8; margin-left: 3px; }
.tile .lbl { margin-top: 5px; font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
.tier-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.note { font-size: .85rem; line-height: 1.55; color: var(--ink-muted); max-width: 36em; }

/* Price Rail */
.rail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.rail .tile .amt { font-size: 1.75rem; }

/* Band */
.band { display: grid; gap: var(--s4) var(--s6); margin-top: var(--s7); align-items: start; }
.band.tiers { grid-template-columns: 3fr 4fr; }
.band.split { grid-template-columns: minmax(0, 1fr) auto; }
.tiles.n2 { grid-template-columns: repeat(2, minmax(0, 160px)); }
.tiles.n3 { grid-template-columns: repeat(3, 1fr); }
.tiles.n4 { grid-template-columns: repeat(4, 1fr); }
.band .note { grid-column: 1/-1; margin-top: calc(var(--s2) * -1); }

/* --- Sliders / Clean Video Elements --- */
.sliders {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: var(--s5);
  margin-top: var(--s6); --stage: clamp(340px, 40vw, 520px);
}
.slider-col { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.slider-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.slider { position: relative; }
.stage {
  position: relative; height: var(--stage); max-height: var(--stage-max, 620px);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--card-hover); border: 1px solid var(--border-color); box-shadow: var(--shadow);
  display: grid; place-items: center; touch-action: pan-y;
  transition: height .45s var(--ease);
}
/* Any area the clip does not fill is a soft blurred continuation of its own
   poster, so there is never a flat beige band beside the picture. */
.blurbg {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  filter: blur(30px) saturate(118%); transform: scale(1.18); opacity: .55;
}
.slide video { position: relative; z-index: 1; }
/* The phone mockups are filmed on their own near-white ground, so the stage
   simply wears the same colour and the edge disappears. */
.slider.phones .stage, .slider.phones .slide { background: #fbfdfa; }
.slider.phones .slide video { box-shadow: none; }
.slider.phones .blurbg { display: none; }
.slide {
  position: absolute; inset: 0; opacity: 0; filter: blur(6px); pointer-events: none;
  transition: opacity .5s var(--ease), filter .5s var(--ease);
  display: flex; align-items: center; justify-content: center; background: var(--card-hover);
  overflow: hidden;
}
.slide.on { opacity: 1; filter: blur(0); pointer-events: auto; }
.slide video {
  width: 100%; height: 100%; object-fit: contain; cursor: pointer;
  box-shadow: 0 4px 20px rgba(120, 60, 40, 0.22);
}

.arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); cursor: pointer;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); color: var(--ink);
  box-shadow: 0 6px 20px rgba(120, 60, 40, 0.20); display: grid; place-items: center; transition: var(--t);
}
.arrow svg { width: 16px; height: 16px; }
.arrow.prev { left: -18px; } .arrow.next { right: -18px; }
.arrow:hover { transform: translateY(-50%) scale(1.1); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.counter {
  position: absolute; right: 14px; top: 12px; z-index: 3; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); border: 1px solid var(--border-color);
  border-radius: var(--r-pill); padding: 4px 10px; color: var(--ink);
}

/* --- Bento & Media --- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, var(--s6)); align-items: stretch; margin-top: var(--s6); }
.copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bento { display: grid; gap: var(--s3); }
.bento.wide { grid-template-columns: 1fr 1fr; }
.bento.wide .b-main { grid-column: 1/-1; aspect-ratio: 4/3; }
.bento.wide .b-sub { aspect-ratio: 4/3; }
.bento.tall { grid-template-columns: 1.32fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.4/1; }
.bento.tall .b-main { grid-row: 1/3; aspect-ratio: auto; height: 100%; }
.bento.tall .b-sub { aspect-ratio: auto; height: 100%; }

.shot {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  border: 1px solid var(--border-color); box-shadow: var(--shadow); transition: var(--t);
}
.bento .b-sub { border-radius: var(--r-md); }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; }
.shot video { position: absolute; inset: 0; opacity: 0; z-index: 2; transition: opacity .5s ease; }
.shot video.ready { opacity: 1; }
.shot:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }

.points { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.points li { position: relative; padding-left: 26px; font-size: .94rem; line-height: 1.58; color: var(--ink-muted); }
.points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.points b { font-weight: 800; color: var(--ink); }

/* --- Forms & Dropdowns --- */
.form-card {
  max-width: 780px; margin: var(--s7) auto 0; background: var(--card);
  border: 1px solid var(--border-color); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 38px);
}
.form-card h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.form-card .intro { margin-top: 6px; font-size: .94rem; line-height: 1.55; color: var(--ink-muted); max-width: 52ch; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.w { grid-column: 1/-1; }
.field label { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: .95rem; color: var(--ink); transition: var(--t); appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2552C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px;
}
.field textarea { resize: vertical; min-height: 82px; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.field input[type=file] { background: none; border: none; padding: 6px 0; font-size: .85rem; }
.field input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .82rem; border: none; border-radius: var(--r-pill);
  padding: 8px 14px; margin-right: 10px; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: var(--t);
}
.field input[type=file]::file-selector-button:hover { background: var(--accent-hover); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.small { font-size: .78rem; line-height: 1.5; color: var(--ink-muted); max-width: 44ch; }
.status { width: 100%; font-size: .9rem; font-weight: 700; margin-top: var(--s2); color: var(--accent); }

.calc-preview {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card-hover); border: 1px dashed var(--accent); border-radius: var(--r-sm);
  padding: 12px 16px; margin-top: var(--s3); grid-column: 1/-1;
}
.calc-preview span { font-size: .85rem; font-weight: 600; color: var(--ink-muted); }
.calc-preview strong { font-size: 1.25rem; font-weight: 900; color: var(--ink); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .95rem;
  padding: 13px 24px; border-radius: var(--r-pill); transition: var(--t); white-space: nowrap;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn svg { width: 19px; height: 19px; }
.btn.wa-btn { background: var(--wa); color: #0c0e0d; }
.btn.wa-btn:hover { background: #20ba5a; }

.linkline { font-size: .9rem; color: var(--ink-muted); margin-top: var(--s4); text-align: center; }
.linkline a { font-weight: 700; color: var(--accent); text-underline-offset: 3px; }
.linkline a:hover { color: var(--accent-hover); }

/* --- Footer & CTA --- */
.close-cta { text-align: center; padding: clamp(44px, 6vw, 76px) 0 clamp(36px, 5vw, 64px); }
.close-cta h2 { margin: 0; }
.close-cta p { margin-top: 8px; color: var(--ink-muted); }
.close-cta a { display: inline-block; margin-top: var(--s5); transition: var(--t); }
.close-cta svg { width: 88px; height: 88px; color: var(--wa); }
.close-cta a:hover { transform: scale(1.08); filter: drop-shadow(0 12px 24px rgba(37, 211, 102, .4)); }

footer {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s5); align-items: start; text-align: center;
  padding: var(--s6) 0 var(--s8); border-top: 1px solid var(--border-color); font-size: .88rem; font-weight: 600;
}
footer a { text-decoration: none; color: var(--ink-muted); transition: var(--t); }
footer a:hover { color: var(--accent); }
.f-brand { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; font-size: .74rem; }
.f-details { font-weight: 400; line-height: 1.65; color: var(--ink-muted); font-size: .84rem; }

/* --- Collapsible form panels --- */
details.form-card { padding: 0; overflow: hidden; }
details.form-card > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s4);
  padding: clamp(20px, 3vw, 30px) clamp(22px, 3.4vw, 38px); transition: var(--t);
}
details.form-card > summary::-webkit-details-marker { display: none; }
details.form-card > summary:hover { background: var(--card-hover); }
.sum-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sum-t { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.sum-s { font-size: .94rem; line-height: 1.5; color: var(--ink-muted); max-width: 52ch; }
.chev {
  width: 30px; height: 30px; flex-shrink: 0; margin-left: auto; color: var(--accent);
  transition: transform .3s var(--ease);
}
details[open] > summary .chev { transform: rotate(180deg); }
details.form-card > form { padding: 0 clamp(22px, 3.4vw, 38px) clamp(22px, 3.4vw, 38px); }
details.form-card > form .fields { margin-top: 0; }
@media (max-width: 900px) {
  .sum-t { font-size: 1.15rem; }
  .chev { width: 26px; height: 26px; }
}

/* --- Sent confirmation: a drawn check and one quiet ring --- */
.sent {
  display: none; align-items: center; gap: var(--s3); width: 100%;
  margin-top: var(--s2);
}
.sent.on { display: flex; }
.sent-mark { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.sent-mark svg { width: 46px; height: 46px; overflow: visible; }
.sent-mark circle, .sent-mark path {
  fill: none; stroke: var(--accent-2); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.sent-mark circle { stroke-dasharray: 145; stroke-dashoffset: 145; }
.sent-mark path   { stroke-dasharray: 34;  stroke-dashoffset: 34; stroke-width: 3; }
.sent.on .sent-mark circle { animation: draw .5s var(--ease) forwards; }
.sent.on .sent-mark path   { animation: draw .34s var(--ease) .42s forwards; }
.sent-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--accent-2); opacity: 0;
}
.sent.on .sent-mark::after { animation: ring .9s var(--ease) .35s; }
.sent-txt { font-size: .95rem; font-weight: 700; color: var(--ink); }
.sent-txt small { display: block; font-weight: 500; font-size: .85rem; color: var(--ink-muted); margin-top: 2px; }
.sent.on .sent-txt { animation: rise .45s var(--ease) .5s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sent.on .sent-mark circle, .sent.on .sent-mark path { animation: none; stroke-dashoffset: 0; }
  .sent.on .sent-mark::after, .sent.on .sent-txt { animation: none; }
}

/* --- Language switcher --- */
.lang { position: relative; }
.lang-btn { width: auto; padding: 0 11px; gap: 7px; display: inline-flex; align-items: center; border-radius: 13px; }
.lang-btn svg { width: 18px; height: 18px; }
.lang-cur { font-size: .8rem; font-weight: 800; letter-spacing: .04em; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 950; min-width: 172px;
  background: var(--paper); border: 1px solid var(--border-color); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 6px; display: none; flex-direction: column;
}
.lang.on .lang-menu { display: flex; }
.lang-menu button {
  background: none; border: none; text-align: left; cursor: pointer; border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .92rem; font-weight: 600; color: var(--ink); transition: var(--t);
}
.lang-menu button:hover { background: var(--card-hover); }
.lang-menu button[aria-current="true"] { color: var(--accent); }

/* --- Mobile Menu & Modal --- */
.sheet {
  position: fixed; inset: 0; z-index: 1400; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet a { text-decoration: none; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.sheet .close { position: absolute; top: 22px; right: 22px; background: none; border: none; font-size: 2rem; color: var(--ink); cursor: pointer; }

.dock { display: none; position: fixed; right: 14px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 850; flex-direction: column; gap: 10px; }
.dock .icon-btn { width: 46px; height: 46px; }

.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(43, 28, 36, 0.55); backdrop-filter: blur(8px); display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal-box {
  background: var(--card); border: 1px solid var(--border-color); color: var(--ink); width: 100%; max-width: 700px;
  max-height: 85dvh; overflow-y: auto; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); position: relative;
  box-shadow: 0 24px 60px rgba(120, 60, 40, .28); animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-box h2 { font-size: 1.7rem; padding-right: 34px; }
.modal-box h3 { font-size: 1.12rem; margin-top: 22px; margin-bottom: 6px; color: var(--accent); }
.modal-box p, .modal-box ul { font-size: .94rem; line-height: 1.62; color: var(--ink-muted); margin-bottom: 12px; }
.modal-box ul { padding-left: 20px; }
.modal-box h3 { margin-top: 20px; }
.legal-meta { font-size: .82rem; color: var(--ink-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--card-hover); color: var(--ink); cursor: pointer; font-weight: 900; display: grid; place-items: center; }
body.locked { overflow: hidden; }

/* Responsive adjustments */
@media (max-width: 900px) {
  :root { --head-h: 60px; }
  .logo img { width: 66px; }
  .nav { display: none; }
  .head-actions { gap: 5px; }
  .head-actions .icon-btn:not(.lang-btn) { width: 38px; height: 38px; }
  .head-actions .icon-btn svg { width: 19px; height: 19px; }
  .head-actions .lang-btn { width: auto; height: 38px; padding: 0 9px; gap: 5px; border-radius: 12px; }
  .head-actions .lang-btn svg { width: 17px; height: 17px; }
  .lang-cur { font-size: .74rem; }
  .lang-menu { right: -4px; }
  .burger { display: grid; place-items: center; justify-self: end; width: 38px; height: 38px; color: var(--ink); }
  .burger svg { width: 21px; height: 21px; }
  header { grid-template-columns: auto 1fr auto auto; gap: 6px; }
  .dock { display: none; }

  .hero { padding-top: 60px; }
  .picker {
    display: flex; gap: 12px; width: 100vw; margin: var(--s5) calc(50% - 50vw) 0; padding: 4px 7vw 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .picker::-webkit-scrollbar { display: none; }
  .pick { flex: 0 0 74vw; scroll-snap-align: center; }

  .sec-head.with-rail { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr 1fr; }

  .sliders { grid-template-columns: 1fr; gap: var(--s5); --stage: min(84vw, 440px); }
  .arrow { width: 38px; height: 38px; }
  .arrow.prev { left: 8px; } .arrow.next { right: 8px; }

  .duo { grid-template-columns: 1fr; gap: var(--s5); }
  .band.tiers, .band.split { grid-template-columns: 1fr; }
  .tiles.n4, .tiles.n2 { grid-template-columns: repeat(2, 1fr); }
  .bento.tall { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
  .bento.tall .b-main { grid-column: 1/-1; aspect-ratio: 4/4.4; }
  .bento.tall .b-sub { aspect-ratio: 4/3; }

  .fields { grid-template-columns: 1fr; }
  .form-card { margin-top: var(--s6); }
  .btn { width: 100%; justify-content: center; }
  footer { grid-template-columns: 1fr 1fr; gap: 26px 16px; padding-bottom: 64px; }
  .f-center { grid-column: 1/-1; order: 3; }
}

/* =====================================================================
   v11 additions: the pieces a multi-page site needs that the one-pager
   never had. Everything above this line is carried over unchanged from
   Website v10, so the brand does not shift between the two.
   ===================================================================== */

/* the language menu is now a list of links, not buttons ------------- */
.lang-menu a {
  display: block; text-decoration: none;
  background: none; border: none; text-align: left; cursor: pointer; border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .92rem; font-weight: 600; color: var(--ink); transition: var(--t);
}
.lang-menu a:hover { background: var(--card-hover); }
.lang-menu a[aria-current="true"] { color: var(--accent); }
.nav a.on { color: var(--accent); }

/* sub-page hero: smaller than the home hero, with an eyebrow -------- */
.hero.sub { padding-bottom: clamp(28px, 4vw, 44px); }
.hero.sub h1 { font-size: clamp(1.85rem, 4.4vw, 3rem); }
.hero.sub .eyebrow { display: block; margin-bottom: var(--s2); }
.hero .strip { margin-top: var(--s4); }

/* --------------------------------------------------------------------
   Product cards: the photograph stays, and a drawn icon sits in a band
   directly under it. The photo says what the thing looks like, the icon
   says what it does, and the two do not compete for the same rectangle.
   -------------------------------------------------------------------- */
.pick.icard figure { aspect-ratio: 16 / 11; }
.pick.icard .icobar {
  /* .pick div { flex: 1 } from the old stylesheet also catches this one and
     stretches it by whatever the card's text leaves over, so the three bars
     came out different heights. It sizes to its icon and nothing else. */
  flex: 0 0 auto;
  display: grid; place-items: center; padding: var(--s3) var(--s4);
  background: linear-gradient(160deg, #FFFBF8 0%, var(--card-hover) 100%);
  border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
  transition: var(--t);
}
.pick.icard:hover .icobar { background: linear-gradient(160deg, var(--card-hover) 0%, #FBDFCE 100%); }
.pick.icard .ico { width: 100%; max-width: 208px; height: auto; display: block; }

.ico-fill  { fill: #fff; stroke: none; }
.ico-line  { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ico-thin  { fill: none; stroke: rgba(43, 28, 36, .28); stroke-width: 2.2; }
.ico-stars { fill: var(--amber); }
.ico-accent{ fill: var(--accent); }
.ico-orbit { fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-dasharray: 5 7; stroke-linecap: round; }
.ico-halo  { fill: #FFF6EF; }
.ico-accent-fill { fill: #FBDCCB; stroke: none; }
.ico-accent-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-word  {
  font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: -.02em;
  fill: var(--ink);
}

/* why-it-matters tiles --------------------------------------------- */
.tiles.why .tile { text-align: left; padding: var(--s5); }
.tiles.why .tier-label { margin: 0 0 var(--s2); font-size: 1.04rem; color: var(--ink); text-align: left; }
.tiles.why p { margin: 0; color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }

/* customer quotes --------------------------------------------------- */
.quotes { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.quote {
  margin: 0; padding: var(--s5); background: var(--card); border: 1px solid var(--border-color);
  border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: left;
}
.quote blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.quote blockquote::before { content: "\201C"; color: var(--accent); font-size: 2.2rem; line-height: 0; vertical-align: -.35em; margin-right: 4px; }
.quote figcaption { margin-top: var(--s4); font-size: .86rem; display: flex; flex-direction: column; gap: 2px; }
.quote figcaption b { color: var(--ink); }
.quote figcaption span { color: var(--ink-muted); }
.quote.empty {
  background: repeating-linear-gradient(135deg, #FAFAFA 0 10px, #F4F4F5 10px 20px);
  border-style: dashed; box-shadow: none;
}
.quote.empty blockquote { color: rgba(43, 28, 36, .34); font-style: italic; }
.quote.empty blockquote::before { color: rgba(43, 28, 36, .22); }

/* numbered how-it-works steps --------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.step { display: flex; gap: var(--s3); align-items: flex-start; text-align: left; }
.step-n {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .95rem;
}
.step b { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--ink); }
.step p { margin: 0; color: var(--ink-muted); font-size: .93rem; line-height: 1.55; }

/* three-up photo row ------------------------------------------------ */
.bento-3 { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.bento-3 .shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-color); background: var(--card); box-shadow: var(--shadow); }
.bento-3 .shot img { display: block; width: 100%; height: 260px; object-fit: cover; }
.bento-3 figcaption { padding: var(--s3) var(--s4); font-size: .86rem; color: var(--ink-muted); }

/* pricing tiers ----------------------------------------------------- */
.tier + .tier { margin-top: var(--s5); }
.tier .tier-label { margin-bottom: var(--s3); }

/* FAQ --------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s2); }
.faq-item { background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-md); overflow: hidden; }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: var(--s4); display: flex; gap: var(--s3);
  align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); transition: var(--t);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--card-hover); }
.faq-item .chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); transition: transform .3s var(--ease); }
.faq-item .chev svg { width: 18px; height: 18px; }
.faq-item[open] > summary .chev { transform: rotate(90deg); }
.faq-item > p { margin: 0; padding: 0 var(--s4) var(--s4); color: var(--ink-muted); line-height: 1.65; font-size: .95rem; }

/* closing call to action -------------------------------------------- */
.cta-row { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s4); }
.btn.ghost-btn { background: transparent; color: var(--ink); border: 1px solid var(--border-color); }
.btn.ghost-btn:hover { background: var(--card-hover); border-color: var(--accent); color: var(--accent); }

/* legal pages ------------------------------------------------------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose .hero.sub h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.legal-meta { font-size: .86rem; color: var(--ink-muted); max-width: 60ch; margin: var(--s3) auto 0; }
.legal { text-align: left; }
.legal h3 { margin: var(--s5) 0 var(--s2); font-size: 1.05rem; color: var(--ink); }
.legal h3:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--s3); color: var(--ink-muted); line-height: 1.7; font-size: .95rem; }
.note.fineprint { font-size: .82rem; max-width: 70ch; margin-left: auto; margin-right: auto; }

/* mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  .quotes, .steps, .bento-3 { grid-template-columns: 1fr; }
  .bento-3 .shot img { height: 220px; }
  .pick.icard .ico { max-width: 104px; }
  .step { align-items: center; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; justify-content: center; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .quotes, .steps, .bento-3 { grid-template-columns: repeat(2, 1fr); }
}

/* reveal, now driven by IntersectionObserver instead of GSAP --------- */
.reveal { transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; filter: blur(0); transform: none; }

/* --------------------------------------------------------------------
   Rhythm. The one-pager needed big air between its sections because it
   was one long scroll; a page that does one job does not. And .band in
   the old stylesheet is a grid helper, not a background, so the tinted
   band a multi-page site wants is its own thing.
   -------------------------------------------------------------------- */
.sec { padding: clamp(44px, 5.5vw, 84px) 0; }
.sec-head + * { margin-top: var(--s5); }
.sec.tinted {
  position: relative; isolation: isolate;
}
.sec.tinted::before {
  content: ""; position: absolute; z-index: -1; inset: 0; left: 50%; width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFFBF8 0%, var(--card) 55%, #FFFBF8 100%);
  border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
.sec.tinted .tile { background: #fff; }

/* cross-page links point sideways, not down the page */
.pick.icard .go::after { content: " \2192"; }
.pick.icard:hover .go::after { transform: translateX(3px); }

/* why-tiles get a normal sentence-case heading, not the eyebrow style */
.tiles.why .tier-label {
  text-transform: none; letter-spacing: -.01em; color: var(--ink); font-weight: 800;
}

/* the closing CTA is two buttons now, not one giant WhatsApp glyph */
.close-cta .cta-row a { margin-top: 0; }
.close-cta .cta-row .btn svg { width: 19px; height: 19px; color: inherit; }
.close-cta .cta-row a:hover { transform: translateY(-2px); filter: none; }
.close-cta .btn.wa-btn { color: #0c2a17; }

/* pricing tiers sit centred under their heading */
.tier { max-width: 720px; margin-left: auto; margin-right: auto; }
.tier .tiles { gap: var(--s3); }
.tier .tile { text-align: center; padding: var(--s4) var(--s3); }
.tier .tile .amt::before { content: "\20AC"; font-size: .6em; font-weight: 700; margin-right: 2px; opacity: .75; }
.sec .note { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head { text-align: center; }
.sec-head .lead { margin-left: auto; margin-right: auto; }
.hero.sub .eyebrow { color: var(--accent); }

/* the bullet list sits under a centred heading, so it is centred too */
.sec > .points { max-width: 720px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------
   Mobile. On the one-pager the three product cards were a swipe strip,
   which was fine when they were a teaser above a page that contained
   everything anyway. Here they are the only way into the three product
   pages, so a card nobody swipes to is a page nobody visits: stack them.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .picker { display: grid; grid-template-columns: 1fr; gap: var(--s3); overflow: visible; }
  .pick { flex: none; }
  .pick.icard figure.icobox { aspect-ratio: 21 / 9; }
  .tiles.n3 { grid-template-columns: 1fr; }
  .tiles.why .tile { padding: var(--s4); }
}
@media (min-width: 620px) and (max-width: 900px) {
  .picker { grid-template-columns: repeat(2, 1fr); }
  .tiles.n3 { grid-template-columns: repeat(3, 1fr); }
}

/* both arrows share one chevron, so the left one is mirrored */
.arrow.prev svg { transform: scaleX(-1); }

/* a form panel sitting inside a tinted band keeps a white card */
.sec.tinted .form-card { background: #fff; }
.sec.tinted .form-card > summary:hover { background: var(--card); }

/* --------------------------------------------------------------------
   The mobile logo now matches the header buttons exactly: the mark is
   6497 x 4226, so 58px wide renders 37.7px tall against their 38px.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .logo img { width: 58px; }
}

/* =====================================================================
   v12. The site was built for a local video studio that also made trays.
   It is now a European review-tray brand, so the trays lead everywhere,
   the page has one clear action, and nothing on it can look unfinished
   to an owner who opens it ten seconds after reading a cold email.
   ===================================================================== */

/* --- Reveal, inverted -------------------------------------------------
   Content is visible by default now. A script in <head> adds .fx to
   <html>, and only then do the animations arm; it removes itself after
   2.5s as a second net. A blocked or slow script can no longer leave a
   section blank, which is what made the product pages look broken. */
.reveal { opacity: 1; filter: none; transform: none; }
html.fx .reveal { opacity: 0; filter: blur(8px); transform: translateY(18px); }
html.fx .reveal.in { opacity: 1; filter: blur(0); transform: none; }

/* --- Header: four social buttons and one filled action ---------------- */
header { grid-template-columns: auto 1fr auto; }
.nav { justify-self: center; }
.btn.nav-cta {
  padding: 9px 16px; font-size: .84rem; border-radius: var(--r-sm);
  box-shadow: 0 2px 10px var(--accent-glow); margin-right: 4px;
}
.icon-btn.li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.icon-btn.li svg { fill: currentColor; }
.sheet .btn.sheet-cta { font-size: 1.05rem; color: var(--accent-ink); padding: 14px 28px; }

/* --- Trust strip: four claims, the same on every page ----------------- */
.strip span { white-space: nowrap; }

/* --- Home hero: text and the action on the left, the tray on the right */
.hero.split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center; text-align: left;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(32px, 4vw, 52px);
}
.hero.split h1 { margin-top: var(--s2); }
.hero.split p { margin: var(--s4) 0 0; max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.12rem); }
.brandline {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.hero-btn { margin-top: var(--s5); }
.hero-shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.hero-shot img { display: block; width: 100%; height: clamp(300px, 34vw, 440px); object-fit: cover; }
.hero.sub .hero-btn { margin-top: var(--s5); }

/* --- Product cards: three photographs, the tray one wider ------------- */
.picker { grid-template-columns: 1.45fr 1fr 1fr; align-items: stretch; }
/* A language with only two products keeps a tidy row instead of a third empty
   column. Scoped above 900px: without that it beat the mobile single-column
   rule on specificity and left two 190px cards with the headings running off
   the side of the phone. */
@media (min-width: 901px) { .picker.n2 { grid-template-columns: 1.45fr 1fr; } }
.pick figure { aspect-ratio: 16 / 11; }
.pick.lead-card h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.go-row { margin-top: auto; padding-top: var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.go-row .go { margin: 0; padding: 0; }
.from {
  font-size: .82rem; font-weight: 800; color: var(--ink); background: var(--card-hover);
  border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap;
}

/* --- Facts row: words, not decorative numbers ------------------------- */
.tiles.facts .tile { text-align: center; padding: var(--s4) var(--s3); display: grid; place-items: center; }
.tiles.facts .lbl { margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.4; }

/* --- Per-tray price line ---------------------------------------------- */
.tile .per { margin-top: 4px; font-size: .74rem; font-weight: 700; color: var(--accent); }
.tier .tile .per::before { content: "\20AC"; font-size: .85em; margin-right: 1px; opacity: .8; }

/* --- Cross-links between the three products --------------------------- */
.crosslink {
  margin: var(--s5) auto 0; max-width: 680px; text-align: center; font-size: .96rem;
  color: var(--ink-muted); background: var(--card); border: 1px dashed var(--border-color);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.crosslink a { font-weight: 800; color: var(--accent); }
.crosslink a:hover { color: var(--accent-hover); }

/* --- The form is the point of the page, so it is open ----------------- */
.form-card.open { padding: clamp(22px, 3vw, 34px); max-width: 780px; margin: 0 auto; text-align: left; }
.form-card.open h3 { font-size: 1.15rem; margin-bottom: 6px; }
.form-card.open .lead { font-size: .94rem; margin-bottom: var(--s4); }

/* --- Contact page ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--s5); align-items: start; }
.contact-card {
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); text-align: left;
}
.contact-card h2 { font-size: 1.3rem; margin: 0 0 var(--s4); }
.cta-row.stack { flex-direction: column; align-items: stretch; margin-top: 0; }
.cta-row.stack .btn { justify-content: center; }
.contact-social { display: flex; gap: var(--s2); margin-top: var(--s4); }
.contact-meta { margin-top: var(--s4); font-size: .9rem; line-height: 1.7; color: var(--ink-muted); }
.contact-card .small { margin-top: var(--s3); display: block; font-size: .82rem; color: var(--ink-muted); }

/* --- E-mail button, the same weight as WhatsApp ----------------------- */
.btn.mail-btn { background: var(--accent); color: var(--accent-ink); }
.btn.mail-btn:hover { background: var(--accent-hover); }
.btn.mail-btn svg { width: 19px; height: 19px; }
.close-cta .cta-row .btn { min-width: 172px; justify-content: center; }

/* --- Footer: brand, pages, legal --------------------------------------- */
footer { text-align: left; grid-template-columns: 1.3fr 1fr 1fr; }
.f-col { display: flex; flex-direction: column; gap: 6px; }
.f-nav a, .f-legal a { font-weight: 600; }
.f-social { display: flex; gap: 8px; margin-top: var(--s3); }
.f-social .icon-btn { width: 34px; height: 34px; }
.f-social .icon-btn svg { width: 16px; height: 16px; }

/* --- A section right under a hero does not need a second helping of air */
.sec.tight { padding-top: clamp(20px, 2.4vw, 32px); }
.hero + .strip, .strip + .sec { margin-top: 0; }

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero.split { grid-template-columns: 1fr; text-align: center; padding-top: 24px; }
  .hero.split p { margin-left: auto; margin-right: auto; }
  .hero-shot { order: 2; }
  .hero-shot img { height: clamp(240px, 56vw, 340px); }
  .picker { grid-template-columns: 1fr; }
  .btn.nav-cta { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  footer { text-align: center; grid-template-columns: 1fr; gap: var(--s5); }
  .f-col { align-items: center; }
  .f-social { justify-content: center; }
  .strip { font-size: .68rem; gap: var(--s2) var(--s4); }
  .head-actions { gap: 4px; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .picker { grid-template-columns: repeat(2, 1fr); }
  footer { grid-template-columns: 1fr 1fr; }
}

/* --- Card photos: one height, not one ratio ---------------------------
   The tray card is wider than the other two, so an identical aspect ratio
   made its photo taller and pushed its text below theirs. A fixed band
   height keeps the three titles on one line and simply shows more of the
   scene in the wide card. */
.pick figure { aspect-ratio: auto; height: clamp(180px, 17vw, 240px); }
.pick figure img, .pick figure video { height: 100%; }
.pick .go::after { content: " \2192"; }
.pick:hover .go::after { transform: translateX(3px); }
@media (max-width: 900px) {
  .pick figure { height: clamp(190px, 46vw, 260px); }
}

/* four claims stack into two rows on a phone rather than four lines */
@media (max-width: 620px) {
  .strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
  .strip span { white-space: normal; }
}

/* =====================================================================
   v13 header layout.
   Desktop, left to right: logo, the three social buttons, the menu, then
   language and the one filled action on the far right.
   Phone: logo, language, burger. The social buttons leave the header and
   stick to the bottom right of the screen, where a thumb already is.
   ===================================================================== */
header { grid-template-columns: auto auto 1fr auto; }
.head-social { display: flex; align-items: center; gap: var(--s2); }
.head-social .icon-btn { width: 38px; height: 38px; }
.head-social .icon-btn svg { width: 18px; height: 18px; }
.nav { justify-self: center; }
.head-actions { gap: var(--s2); }
.btn.nav-cta { margin-right: 0; margin-left: 2px; order: 2; }
.lang { order: 1; }

.dock {
  display: none;
  position: fixed; right: 14px; z-index: 850;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  flex-direction: column; gap: 10px;
}
.dock .icon-btn {
  width: 44px; height: 44px;
  background: var(--paper-trans);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(120, 60, 40, .38), 0 0 0 1px rgba(43, 28, 36, .06);
}
.dock .icon-btn svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  header { grid-template-columns: auto 1fr auto auto; }
  .head-social { display: none; }
  .dock { display: flex; }
  /* nothing floats over the footer text */
  footer { padding-bottom: calc(var(--s8) + 24px); }
}

.dock { transition: opacity .25s var(--ease), transform .25s var(--ease); }
.dock.away { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* the studio shot is a tall portrait, so the card band takes its top third
   where the engraving actually is, not a slice of empty board */
.pick.lead-card figure img { object-position: center 22%; }
/* The clip is portrait in a landscape card: centre it, the phone and the
   hand sit in the middle band through the whole take. */
.pick.lead-card figure video { object-position: center 50%; background: #0c0b0a; }
/* "See the stickers ->" and its price pill drop onto two lines rather than
   breaking the arrow off the end of the link */
.go-row { flex-wrap: wrap; row-gap: 6px; }
.go-row .go { white-space: nowrap; }

/* A floating button is an overlay, so it will sit over the right edge of
   some lines. Keeping it small and clearly frosted makes it read as one
   rather than as a mistake, and it steps aside at the footer. */
.dock { right: 12px; gap: 8px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dock .icon-btn { width: 40px; height: 40px; }
.dock .icon-btn svg { width: 17px; height: 17px; }

/* =====================================================================
   v14. Ten real holders, the visitor's own language first. The photos
   were normalised to one height, angle, ground and shadow before they
   got here (trays/standardise.py), so the grid can be flush and even.
   ===================================================================== */
.options {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3);
  margin-top: var(--s5);
}
.opt {
  position: relative; margin: 0; background: var(--card); border: 1px solid var(--border-color);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); transition: var(--t);
}
.opt:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.opt img { display: block; width: 100%; height: auto; background: #F7F6F4; }
.opt figcaption {
  padding: var(--s3) var(--s3) var(--s4); text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.opt figcaption b { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.opt figcaption span { font-size: .78rem; color: var(--ink-muted); font-weight: 600; }

/* the visitor's own language is the one they will buy, so it is marked */
.opt.mine { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.opt-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill);
  padding: 4px 10px; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}

/* two photographs instead of three where that is all there honestly is */
.bento-2 { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); max-width: 940px; margin: 0 auto; }
.bento-2 .shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-color); background: var(--card); box-shadow: var(--shadow); }
.bento-2 .shot img { display: block; width: 100%; height: 300px; object-fit: cover; }
.bento-2 figcaption { padding: var(--s3) var(--s4); font-size: .86rem; color: var(--ink-muted); }

@media (max-width: 900px) {
  .options { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .opt figcaption b { font-size: .92rem; }
  .bento-2 { grid-template-columns: 1fr; }
  .bento-2 .shot img { height: 240px; }
}
@media (min-width: 620px) and (max-width: 1100px) {
  .options { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   v15. The home page now makes one argument instead of two lists, the
   product page tells the story once, and the price is picked rather than
   read off nine cards.
   ===================================================================== */

/* --- button glyphs: the icon sits on the text baseline, not above it --- */
.btn { line-height: 1.15; }
.btn svg { flex: 0 0 auto; display: block; align-self: center; }
.btn > span { display: inline-block; line-height: 1.15; }

/* --- home: visibility, with the drawing --------------------------------- */
.vis { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.vis-art { display: grid; place-items: center; }
.shield { width: 100%; max-width: 300px; height: auto; display: block; }
.sh-fill   { fill: #fff; }
.sh-line   { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.sh-stars  { fill: var(--amber); }
.sh-paper  { fill: #FFF8F3; stroke: none; }
.sh-awn    { fill: #FBDCCB; stroke: none; }
.sh-awnline{ fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }

.vis-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); text-align: left; }
.vis-points li { padding-left: var(--s4); border-left: 3px solid var(--accent); }
.vis-points b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.vis-points p { margin: 0; color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }

.vis-facts-h {
  margin: clamp(32px, 4vw, 52px) 0 var(--s3); text-align: center;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- product page: the one merged story --------------------------------- */
.story-why-h { margin: clamp(30px, 4vw, 48px) 0 var(--s3); text-align: center; font-size: 1.15rem; }
.points.why-list { max-width: 760px; margin-left: auto; margin-right: auto; }
.points.why-list li { margin-bottom: var(--s3); }

/* --- the holder viewer -------------------------------------------------- */
.viewer { margin-top: var(--s5); }
.viewer-stage {
  position: relative; max-width: 420px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border-color);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.view { display: none; margin: 0; }
.view.on { display: block; }
.view img { display: block; width: 100%; height: auto; background: #F7F6F4; }
.view figcaption { padding: var(--s3) var(--s4) var(--s4); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.view figcaption b { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.view figcaption span { font-size: .82rem; color: var(--ink-muted); font-weight: 600; }
.viewer-stage .arrow { top: 42%; }
.viewer-stage .arrow.prev { left: 10px; }
.viewer-stage .arrow.next { right: 10px; }

.thumbs {
  display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s4); max-width: 760px; margin-left: auto; margin-right: auto;
}
.thumb {
  flex: 0 0 auto; width: 64px; cursor: pointer; padding: 4px 4px 5px;
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-sm);
  transition: var(--t); display: grid; gap: 3px; justify-items: center;
}
.thumb img { display: block; width: 100%; height: 54px; object-fit: contain; background: #F7F6F4; border-radius: 4px; }
.thumb span { font-size: .58rem; font-weight: 700; color: var(--ink-muted); line-height: 1.1; }
.thumb:hover { border-color: var(--accent); }
.thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.thumb.on span { color: var(--accent); }

/* --- the price picker ---------------------------------------------------- */
.picker-box {
  max-width: 620px; margin: var(--s5) auto 0; padding: clamp(20px, 3vw, 30px);
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--r-lg);
  box-shadow: var(--shadow); text-align: left;
}
.pick-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pick-f { display: grid; gap: 6px; }
.pick-f > span { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pick-f select {
  width: 100%; padding: 13px 38px 13px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-color); background-color: var(--card); color: var(--ink);
  font-family: inherit; font-size: .96rem; font-weight: 600; appearance: none; cursor: pointer;
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2552C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.pick-f select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pick-out {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-color);
}
.pick-each strong { font-size: 1.9rem; font-weight: 900; letter-spacing: -.04em; color: var(--ink); }
.pick-each span { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-muted); margin-top: 2px; }
.pick-total { text-align: right; }
.pick-total span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pick-total strong { font-size: 1.35rem; font-weight: 900; color: var(--accent); }
.btn.pick-cta { width: 100%; justify-content: center; margin-top: var(--s4); }

/* --- the request form folds again -------------------------------------- */
details.form-card { max-width: 780px; margin: 0 auto; text-align: left; }
details.form-card .form-body { padding: 0 clamp(22px, 3.4vw, 38px) clamp(22px, 3vw, 32px); }

@media (max-width: 900px) {
  .vis { grid-template-columns: 1fr; }
  .shield { max-width: 190px; }
  .pick-fields { grid-template-columns: 1fr; }
  .thumb { width: 56px; }
  .thumb img { height: 46px; }
}

/* `.close-cta a { display: inline-block }` in the old stylesheet outranks
   `.btn { display: inline-flex }`, so inside the closing block the glyph
   stacked above the label instead of sitting next to it. */
.close-cta .cta-row .btn { display: inline-flex; align-items: center; }
/* two columns in the footer now that the menu is gone */
footer { grid-template-columns: 1.6fr 1fr; }

/* v16: drone work is Dutch airspace work. The note sits under the video hero,
   quiet but unmissable, and the link lets them check their own address. */
.hero.sub .note.zoning { margin-top: var(--s4); max-width: 54ch; }
.hero.sub .note.zoning a { color: var(--accent); text-underline-offset: 3px; }

/* v17: the tap-to-review clip beside the three steps it illustrates. Muted
   autoplay loop, so it plays itself and there is no control to find.

   Two things the first pass got wrong, both visible straight away in the
   render: the video kept its height="1212" attribute because only width was
   set, so it drew a 1200px box and letterboxed itself inside it; and the three
   steps stayed in their 3-column grid inside a half-width column, which cut
   them to 80px of text each. Height is auto now and the steps stack. */
.story-demo { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s6); align-items: center; }
.story-demo .steps { margin: 0; grid-template-columns: 1fr; gap: var(--s4); }
.demo { margin: 0; }
.demo video { display: block; width: 100%; height: auto; max-width: 300px; margin: 0 auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift); background: var(--ink); }
.demo figcaption { max-width: 320px; margin: var(--s3) auto 0; text-align: center;
  font-size: .86rem; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 900px) {
  .story-demo { grid-template-columns: 1fr; gap: var(--s5); }
  .story-demo .steps { grid-template-columns: 1fr; }
  .demo video { max-width: 260px; }
}

/* The venue photographs are portrait and the holder sits low in the frame, so a
   centred cover crop showed the table and cut the product off. Bias the crop
   down to where the holder actually is. */
.bento-3 .shot img { object-position: center 64%; }

/* ==========================================================================
   Trays page, rebuilt 10 October to David's layout
   ========================================================================== */

/* The page is a single centred column on every width. The old version went
   wide and two-sided on desktop, which made the mobile design and the desktop
   design two different arguments. */
.tray-page .sec > .sec-head,
.tray-page .rank-p,
.tray-page .note,
.tray-page .why-list,
.tray-page .story-why-h { margin-left: auto; margin-right: auto; }
/* ch units here are measured at body size, not at the h1 size, so a ch
   maximum squeezes the headline into a column. Pixels. */
.tray-page .hero.sub.narrow { max-width: min(94%, 600px); margin-inline: auto; padding-bottom: var(--s5); }
.tray-page .hero.sub.narrow h1 { margin-top: var(--s2); }

/* Two pieces of evidence, same size, same shape, captioned above so the eye
   reads the claim before the picture rather than after it. */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.2vw, 20px);
  max-width: 780px; margin-inline: auto; grid-template-rows: auto auto;
}
/* Subgrid so both captions share one row: a caption that wraps to two lines
   must not push its own picture out of line with the other. */
.duo-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 8px; }
@supports not (grid-template-rows: subgrid) {
  .duo-item { display: flex; flex-direction: column; }
  .duo-cap { min-height: 2.4em; }
}
.duo-cap {
  align-self: end; text-align: center; font-size: .64rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.duo-media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-md); background: var(--card-hover); box-shadow: var(--shadow);
}
.duo-media img, .duo-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Price. Two cards, one per shape, three quantities each. The five row is the
   one we want read, so it carries the weight. */
.price-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.2vw, 18px);
  max-width: 620px; margin: var(--s5) auto 0;
}
.price-card {
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-lg);
  padding: var(--s4) var(--s4) var(--s3); box-shadow: var(--shadow);
}
.price-card h3 {
  font-size: clamp(.95rem, 2.4vw, 1.08rem); text-align: center; margin-bottom: var(--s3);
}
.pc-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.pc-rows { list-style: none; margin: 0; padding: 0; }
.pc-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-color);
}
.pc-rows li:last-child { border-bottom: 0; }
.pc-q { font-size: .92rem; font-weight: 700; color: var(--ink-muted); }
.pc-p { font-size: clamp(1rem, 2.8vw, 1.15rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-best { margin: 0 -10px; padding-inline: 10px; background: var(--card-hover); border-radius: var(--r-sm); }
.pc-best .pc-q { color: var(--ink); }
.pc-best .pc-p { color: var(--accent); }

.tray-page .note { max-width: 56ch; text-align: center; margin-top: var(--s4); }
.tray-page .form-card { max-width: 620px; margin: var(--s5) auto 0; }

/* Why it works. Bulleted, centred block, left aligned text inside it so the
   lines still start on one edge. */
.tray-page .story-why-h { text-align: center; max-width: 30ch; margin-top: var(--s6); }
.tray-page .why-list { max-width: 48ch; margin-top: var(--s4); }
.tray-page .why-list li { margin-bottom: var(--s3); }
.tray-page .duo + .story-why-h { margin-top: var(--s6); }

/* How Google ranks you. The diagram is line art on white, so it needs no card
   around it, only air. */
.rank-art { max-width: 645px; margin: var(--s5) auto 0; }
.rank-art img { width: 100%; height: auto; }
.rank-p {
  max-width: 52ch; text-align: center; margin-top: var(--s5);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 600; color: var(--ink);
}

@media (min-width: 901px) {
  .duo { max-width: 900px; }
  .duo-cap { font-size: .72rem; letter-spacing: .12em; }
  .price-duo { max-width: 760px; }
  .tray-page .form-card { max-width: 760px; }
  .rank-art { max-width: 700px; }
}
@media (max-width: 420px) {
  .price-card { padding: var(--s3) var(--s3) var(--s2); }
  .pc-head { font-size: .56rem; letter-spacing: .06em; }
}

/* The holders card plays the clip, and a portrait clip in a landscape card is
   mostly crop. On phones the cards are stacked, so that one can be taller
   without pulling the other two out of line, and the window sits lower because
   the phone and the hand are in the lower half of the frame. */
.pick.lead-card figure video { object-position: center 63%; }
@media (max-width: 900px) {
  .pick.lead-card figure { height: clamp(250px, 58vw, 340px); }
}

/* --- Alignment and hover corrections, 12 October --------------------------
   Three small things that each read as a mistake rather than a choice. */

/* The price tiles are fixed-width columns inside a 720px grid, so two of them
   sat hard left under a centred heading and a centred note. */
.tier .tiles { justify-content: center; }

/* The footer ran the full 1120px wrap while most pages read in a 760px column,
   which left its two groups at opposite ends of an empty row and the brand
   block orphaned against the page edge. */
footer { max-width: 920px; margin-inline: auto; }

/* All three social buttons now hover the same way: the brand colour fills the
   button and the mark goes white. Instagram and WhatsApp used to tint only
   their icon while LinkedIn filled, so they read as three components. */
.icon-btn.ig:hover, .icon-btn.li:hover, .icon-btn.wa:hover { color: #fff; }
.icon-btn.ig:hover { background: var(--ig); border-color: var(--ig); }
.icon-btn.li:hover { background: var(--li); border-color: var(--li); }
.icon-btn.wa:hover { background: var(--wa); border-color: var(--wa); }

/* --shadow ends with an inset white highlight along the top edge. On a big
   card that reads as light catching the surface; inside a 1px border on a
   38px circle it reads as a second rim just inside the first. Drop shadow
   only for the round buttons. */
.icon-btn { box-shadow: 0 10px 20px -14px rgba(120, 60, 40, .22); }