/* ============================================================
   /pro v2 — Awwwards-style SHOWCASE of the immo-kit system,
   in MonkeyWeaver's wine/beige gallery. The demo is documented
   as a design piece: live preview, metrics, elements, palette,
   price, credits. No Batz mark, no coral. Paul Slab is reserved
   for accent words WITHOUT French accents (.pro-slab); Jost
   carries everything else.
   ============================================================ */

@font-face {
  font-family: "Paul Slab";
  src: url("/fonts/paulslab-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --wine: #6e1320;
  --wine-deep: #580f1a;
  --beige: #f6e7d8;
  --beige-dim: color-mix(in srgb, var(--beige) 72%, transparent);
  --gold: #bd8b23;
  --red: #c12530;
  --line: color-mix(in srgb, var(--beige) 16%, transparent);
  --slab: "Paul Slab", "Jost", serif;
  --ui: "Jost", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.74, 0.22, 0.99);
  --dur: 0.9s;
  --pad: clamp(22px, 6vw, 110px);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ui);
  font-weight: 400;
  color: var(--beige);
  background: var(--wine);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; }

/* Paul Slab accent: ONLY for words without French accents. */
.pro-slab {
  font-family: var(--slab);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pro-eyebrow {
  font-family: var(--ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 12px;
  color: var(--beige-dim);
}

/* ---- Top bar ---- */
.pro-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--line);
}

.pro-wordmark {
  display: inline-block;
  width: 150px;
  height: 36px;
  background: var(--beige);
  -webkit-mask: url("/monkeyweaver-wordmark.svg") center / contain no-repeat;
  mask: url("/monkeyweaver-wordmark.svg") center / contain no-repeat;
}

.pro-top__logo { display: inline-flex; }

/* Product lockup: KIT IMMO DE LUXE at the top, a small "par MonkeyWeaver"
   maker signature beneath. The MonkeyWeaver wordmark stays in the footer. */
.pro-lockup {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 6px;
}
.pro-lockup__name {
  font-size: 21px;
  color: var(--beige);
  letter-spacing: 0.06em;
}
.pro-lockup__by {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--beige-dim);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.pro-lockup__by:hover { color: var(--beige); }

.pro-top__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--beige);
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
}
.pro-top__live:hover { opacity: 1; }

/* ---- 1 · Hero + the piece ---- */
/* Hero: oversized headline + secondary copy in two columns using the full
   width, then window 1 FULL-WIDTH below (it is the main vitrine, kept large). */
.pro-hero {
  padding: clamp(56px, 9vh, 120px) var(--pad) clamp(28px, 4vh, 56px);
}
/* Window 1: same width and alignment as Fenêtre 2 and 3 (padding var(--pad),
   no max-width, no full-bleed) so all three vitrines match exactly. */
.pro-hero > .pro-piece {
  margin-top: clamp(20px, 3vh, 36px);
}
.pro-hero__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(20px, 3vh, 32px);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.pro-hero__cols .pro-sub,
.pro-hero__cols .pro-offer { margin-top: 0; }
.pro-hero__cols .pro-offer { padding-top: 0; border-top: none; }
@media (max-width: 820px) {
  .pro-hero__cols { grid-template-columns: 1fr; gap: 16px; }
  .pro-hero__cols .pro-offer { padding-top: 20px; border-top: 1px solid var(--line); }
}

.pro-h1 {
  margin-top: 20px;
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.08;
  max-width: 21ch;
  color: var(--beige);
}

.pro-h1 .pro-slab { font-size: 0.98em; }

.pro-sub {
  margin-top: 24px;
  font-size: clamp(16px, 1.8vw, 21px);
  max-width: 52ch;
  color: var(--beige-dim);
}

/* Offer line: fixes the category ("un système clé en main, pas une agence de
   design") right under the hero, before the window. Sober, a filet above it. */
.pro-offer {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--beige);
}

/* ---- Hook cascade (the argument, front-loaded): each beat is one blow that
   earns the next. Two columns — a short hook against a counterpart, either a
   giant ghosted Paul Slab word or a live window — alternating sides. ---- */
.pro-beat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(46px, 8vh, 104px) var(--pad) 0;
}
.pro-beat--flip .pro-beat__aside { order: -1; }
.pro-beat__text {
  margin: 0;
  font-weight: 300;
  font-size: clamp(23px, 2.9vw, 40px);
  line-height: 1.18;
  max-width: 20ch;
  color: var(--beige);
}
.pro-beat__aside { display: grid; place-items: center; min-width: 0; }
.pro-beat__aside .pro-piece { width: 100%; margin: 0; }

/* A statistic as the hook's counterpart: a fine oversized figure, a line of
   meaning, and the source cited small in gold. Sober, editorial, not shouted. */
.pro-stat { max-width: 24ch; }
.pro-stat__n {
  font-family: var(--ui);
  font-weight: 200;
  font-size: clamp(66px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--beige);
}
.pro-stat__n span {
  font-size: 0.4em;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--beige-dim);
}
.pro-stat__l {
  margin-top: 16px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
  color: var(--beige-dim);
}
.pro-stat__src {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 820px) {
  .pro-beat { grid-template-columns: 1fr; gap: 18px; }
  .pro-beat--flip .pro-beat__aside { order: 0; }
  .pro-beat__text { max-width: 30ch; }
}

/* Two-column sections from "Pourquoi cela compte" to the price: the section
   label + lead sit on the left, the content (swatches, FAQ) on the right, so
   nothing stacks full-height and the page scrolls less. */
.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 120px) var(--pad) 0;
}
.pro-split__head { position: sticky; top: 32px; }
.pro-split__head .pro-window-lead { margin-top: 14px; }
.pro-split__body { min-width: 0; }
@media (max-width: 820px) {
  .pro-split { grid-template-columns: 1fr; gap: 20px; }
  .pro-split__head { position: static; }
}

/* Section header on two columns: the label on the left, the lead on the right,
   so the band above a full-width window/image is not left half empty. */
.pro-sectionhead {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(22px, 3vh, 40px);
}
.pro-sectionhead .pro-window-lead { margin-top: 0; }
@media (max-width: 820px) {
  .pro-sectionhead { grid-template-columns: 1fr; gap: 8px; }
}

/* FAQ: the accordion is the heavy content, so give it the WIDE column and keep
   the label narrow (was inverted, cramping the questions). */
.pro-faq.pro-split { grid-template-columns: minmax(0, 0.48fr) minmax(0, 1.52fr); }

/* Price: eyebrow, then included list + notes in two columns, then the
   Ailleurs/Ici comparison FULL-WIDTH so it breathes, CTA below. */
.pro-price__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: 22px;
  margin-bottom: clamp(30px, 4vh, 52px);
}
.pro-price__head .pro-included { margin-top: 0; }
.pro-price__head .pro-note { margin-top: 0; }
.pro-price__head .pro-note + .pro-note { margin-top: 16px; }
@media (max-width: 820px) {
  .pro-price__head { grid-template-columns: 1fr; gap: 20px; }
}

/* The piece: browser chrome + live iframe scaled to show the DESKTOP design.
   The iframe renders at 1440px wide and is scaled to 45% inside a fixed-ratio
   stage; pointer-events off so the page scroll never gets trapped. */
.pro-piece {
  margin-top: clamp(36px, 6vh, 64px);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wine-deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.pro-piece__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.pro-piece__chrome span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--beige) 26%, transparent); }
.pro-piece__chrome p { margin-left: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--beige-dim); }

.pro-piece__stage {
  position: relative;
  aspect-ratio: 1440 / 860;
  overflow: hidden;
}

.pro-piece__stage iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 860px;
  border: 0;
  transform-origin: top left;
  /* Scale = stage width / 1440. The stage spans the container; use cqw via a
     container so the scale tracks the real width. */
  transform: scale(calc(100cqw / 1440));
  pointer-events: none;
}

.pro-piece__stage { container-type: inline-size; }

/* Fallback for browsers without container query units: approximate with vw
   minus page padding (piece is full-bleed inside --pad). */
@supports not (width: 100cqw) {
  .pro-piece__stage iframe { transform: scale(calc((100vw - 2 * 24px) / 1440)); }
}

.pro-piece__open {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--beige);
  color: var(--wine);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.pro-piece__open:hover { transform: translateY(-2px); }

.pro-piece__caption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--beige-dim);
}
.pro-piece__caption a { color: var(--beige); text-underline-offset: 3px; }

.pro-metrics__intro {
  margin-top: clamp(28px, 4vh, 44px);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--beige);
}

/* ---- The numbers: a contained stat bar aligned to the window width, not a
   full-bleed strip. Tighter than before so it reads as one composed block. ---- */
.pro-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: clamp(30px, 5vh, 48px);
}

/* 2x2 variant: the four figures as a grid beside the text (not a wide row). */
.pro-metrics--grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }

.pro-metric {
  background: var(--wine);
  padding: clamp(22px, 2.8vw, 34px);
}

.pro-metric__n {
  font-size: clamp(30px, 3.7vw, 51px);
  line-height: 0.9;
  color: var(--beige);
}

.pro-metric__l { margin-top: 12px; font-size: 18px; line-height: 1.35; color: color-mix(in srgb, var(--beige) 88%, transparent); max-width: 22ch; }

/* Push line at the end of the block: quiet, a touch italic, sends them down. */
.pro-push {
  margin-top: clamp(28px, 4vh, 44px);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 21px);
  color: var(--beige);
  max-width: 40ch;
}

/* ---- Shared block ---- */
.pro-block { padding: clamp(56px, 9vh, 120px) var(--pad) 0; }

.pro-window-lead {
  margin-top: 18px;
  margin-bottom: 8px;
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.3;
  max-width: 44ch;
  color: var(--beige);
}

/* ---- Infographic: photos in -> system -> three channels out, in 5 min ---- */
.pro-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.9fr) minmax(260px, 1.4fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(36px, 6vh, 56px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--wine-deep);
}

.pro-flow__in {
  padding: clamp(20px, 2.6vw, 34px);
  border: 1.5px dashed color-mix(in srgb, var(--beige) 38%, transparent);
  border-radius: 12px;
  text-align: center;
}

.pro-flow__label { font-weight: 500; font-size: clamp(19px, 2.1vw, 25px); color: var(--beige); }
.pro-flow__hint { margin-top: 8px; font-size: 15px; color: var(--beige-dim); }

/* The trivial input, shown: a little heap of tilted, badly-named photos. */
.pro-flow__chips {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  min-height: 56px;
}
.pro-flow__chips span {
  display: inline-flex;
  align-items: flex-end;
  width: 46px;
  height: 46px;
  margin: 0 -8px;
  padding: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--beige) 16%, var(--wine));
  border: 1px solid color-mix(in srgb, var(--beige) 30%, transparent);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 7px;
  color: var(--beige-dim);
  overflow: hidden;
}
.pro-flow__chips span:nth-child(1) { transform: rotate(-7deg); }
.pro-flow__chips span:nth-child(2) { transform: rotate(4deg) translateY(-3px); }
.pro-flow__chips span:nth-child(3) { transform: rotate(-3deg) translateY(2px); }
.pro-flow__chips span:nth-child(4) { transform: rotate(8deg); }

/* Arrow lane with the engine label riding it. */
.pro-flow__arrow {
  position: relative;
  height: 2px;
  background: color-mix(in srgb, var(--beige) 34%, transparent);
}

.pro-flow__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid color-mix(in srgb, var(--beige) 60%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--beige) 60%, transparent);
  transform: translateY(-50%) rotate(45deg);
}

.pro-flow__engine {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--wine);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--beige-dim);
}

.pro-flow__out { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.pro-flow__out li {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--wine);
}

.pro-flow__out b { display: block; font-weight: 600; font-size: 18px; color: var(--beige); }
.pro-flow__out span { font-size: 15px; color: var(--beige-dim); }

/* The five minutes, stated soberly (a figure + a caption), not a promo sticker. */
.pro-flow__time {
  position: absolute;
  top: -18px;
  right: clamp(16px, 4vw, 48px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 16px;
  background: var(--wine);
  border-left: 2px solid var(--gold);
}
.pro-flow__time-n {
  font-family: var(--slab);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.9;
  color: var(--gold);
}
.pro-flow__time-u {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beige-dim);
}

/* ---- 3 · Elements ---- */
.pro-elements {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.pro-el { background: var(--wine); padding: clamp(24px, 3vw, 40px); }

.pro-el__n { font-size: 12px; letter-spacing: 0.22em; color: var(--gold); }

.pro-el__t {
  margin-top: 14px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
  color: var(--beige);
}

.pro-el__d { margin-top: 10px; font-size: 17px; color: var(--beige-dim); }

/* ---- 4 · Palette ---- */
.pro-swatches { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }

.pro-swatch { width: clamp(120px, 16vw, 170px); }

.pro-swatch__c {
  height: clamp(90px, 11vw, 130px);
  border-radius: 10px;
  border: 1px solid var(--line);
}

.pro-swatch p { margin-top: 10px; font-size: 15px; color: var(--beige-dim); }
.pro-swatch code { font-size: 12px; color: var(--beige); }

.pro-note { margin-top: 26px; font-size: 15px; color: var(--beige-dim); max-width: 58ch; }

/* ---- 5 · Description ---- */
.pro-desc__lead {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(19px, 2.7vw, 35px);
  line-height: 1.25;
  max-width: 36ch;
  color: var(--beige);
}

.pro-desc__lead .pro-slab { font-size: 0.95em; }

.pro-desc__second { margin-top: 20px; font-size: clamp(16px, 1.8vw, 21px); max-width: 50ch; color: var(--beige-dim); }

.pro-included { margin-top: 34px; max-width: 640px; list-style: none; }
.pro-included li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.pro-included li:last-child { border-bottom: none; }

/* ---- Price: a composed contrast, market (dimmed) vs. ours (white, italic) ---- */
.pro-price { padding-bottom: clamp(56px, 9vh, 120px); }

.pro-price__panel {
  margin-top: clamp(32px, 5vh, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.pro-price__market {
  padding: clamp(28px, 3vw, 44px);
  background: var(--wine);
}

.pro-price__market .pro-eyebrow { margin-bottom: 18px; }

/* The market is the past: quiet, and each figure struck through. */
.pro-anchors { list-style: none; }
.pro-anchors li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: color-mix(in srgb, var(--beige) 55%, transparent);
}
.pro-anchors li:last-child { border-bottom: none; }
.pro-anchors b { color: color-mix(in srgb, var(--beige) 68%, transparent); font-weight: 600; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); }

/* Ours: the answer. White, italic, luminous against the deep panel. */
.pro-price__ours {
  padding: clamp(28px, 3vw, 44px);
  background: var(--wine-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pro-price__ours .pro-eyebrow { color: var(--gold); margin-bottom: 14px; }

.pro-price__figure {
  font-family: var(--ui);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.95;
  color: var(--beige);
}

.pro-price__once {
  margin-top: 8px;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  color: color-mix(in srgb, var(--beige) 80%, transparent);
}

.pro-price__scarcity {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold);
  max-width: 34ch;
}

.pro-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.pro-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  background: var(--beige);
  color: var(--wine);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pro-btn:hover { background: transparent; color: var(--beige); }

.pro-btn--ghost { background: transparent; color: var(--beige); border-color: color-mix(in srgb, var(--beige) 40%, transparent); }
.pro-btn--ghost:hover { background: var(--beige); color: var(--wine); }

.pro-small { margin-top: 22px; font-size: 13px; color: var(--beige-dim); }

/* ---- Credits ---- */
.pro-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 32px var(--pad) 48px;
  border-top: 1px solid var(--line);
}

.pro-credits__who { font-size: 14px; color: var(--beige-dim); }
.pro-credits__who b { color: var(--beige); font-weight: 600; }

/* ---- Reveals ---- */
html.js [data-r] { opacity: 0; transform: translateY(26px); }
html.js [data-r].in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-r] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pro-elements { grid-template-columns: 1fr; }
  .pro-metrics { grid-template-columns: repeat(2, 1fr); }
  .pro-price__panel { grid-template-columns: 1fr; }

  /* Flow stacks vertically; the arrow becomes a vertical lane. */
  .pro-flow { grid-template-columns: 1fr; }
  .pro-flow__arrow { height: 56px; width: 2px; margin: 0 auto; }
  .pro-flow__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
  .pro-flow__engine { white-space: normal; text-align: center; min-width: 180px; }
}

@media (max-width: 560px) {
  .pro-metrics { grid-template-columns: 1fr 1fr; }
  .pro-credits { flex-direction: column; align-items: flex-start; }
  .pro-top__live { font-size: 11px; }
  .pro-wordmark { width: 120px; height: 30px; }
  .pro-lockup__name { font-size: 17px; }
  .pro-lockup__by { letter-spacing: 0.14em; }
}

/* ---- FAQ accordion: sober hairline rows, gold group labels, no JS. ---- */
.pro-faq__group { margin-top: clamp(30px, 4vw, 52px); max-width: 860px; }
.pro-faq__group[data-r] { transition-delay: 0.05s; }
.pro-faq__grouptitle {
  font-family: var(--ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}
.pro-faq__item { border-top: 1px solid var(--line); }
.pro-faq__group .pro-faq__item:last-child { border-bottom: 1px solid var(--line); }
.pro-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  color: var(--beige);
  transition: color var(--dur) var(--ease);
}
.pro-faq__item summary::-webkit-details-marker { display: none; }
.pro-faq__item summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.4s var(--ease);
}
.pro-faq__item[open] summary::after { content: "−"; transform: rotate(180deg); }
.pro-faq__item summary:hover { color: var(--gold); }
.pro-faq__item > p {
  margin: 0 0 22px;
  max-width: 62ch;
  color: var(--beige-dim);
  line-height: 1.65;
}

/* ---- Social pack showcase (Fenêtre 4): Josué's reference composition — the
   phone (left), a glass story (centre) and the pack collage (right), floating
   on the wine. The collage's wine ground blends into the page. ---- */
.pro-social {
  max-width: 1200px;
  margin: clamp(30px, 5vw, 64px) auto 0;
}
/* Josué's exact composition, flattened to one transparent PNG (phone + glass
   story on the left, the pack carousel with its featured tile on the right).
   The image already carries the whole layout, so it just sits on the wine and
   blends. */
.pro-social__exhibit {
  display: block;
  width: 100%;
  height: auto;
}

.pro-versus__side img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.pro-versus {
  max-width: 900px;
  margin: clamp(26px, 4vw, 52px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}
.pro-versus__side { margin: 0; }
.pro-versus__side figcaption {
  margin-top: 14px;
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--beige-dim);
}
/* The generic poster recedes; ours carries a deeper shadow and a gold label. */
.pro-versus__side--market img {
  opacity: 0.9;
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.5);
}
.pro-versus__side--ours img { box-shadow: 0 44px 84px -30px rgba(0, 0, 0, 0.72); }
.pro-versus__side--ours figcaption { color: var(--gold); }

@media (max-width: 720px) {
  .pro-versus { grid-template-columns: 1fr; gap: 28px; }
}

/* Inline Cal.com booking on /pro (calendar lives in the page, dark theme). */
.pro-cal { margin-top: 44px; }
.pro-cal__lead {
  color: var(--beige);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 12px;
}
.pro-cal__note {
  color: var(--beige-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
}
.pro-cal__embed {
  margin-top: 26px;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
}
.pro-cal__embed iframe { width: 100% !important; border: 0; }