/* Calm, polished layer (23 October 2026). Loaded after launch.css and product-scenes.css.
   Pill buttons with an arrow (the live header is kept), framed photographs and cards,
   a two-column opening on desktop, generous spacing. Brand palette and fonts unchanged. */
:root{
  --green-deep:#2f4a40;--paper:#FCFBF8;
  --hair:rgba(74,107,94,.12);--hair-strong:rgba(74,107,94,.2);
  /* A framed card: an outer tray drawn with spread shadows around the element itself. */
  /* Tray colour as in the concept: cream with 4.5% green, then a hairline. */
  --bezel:0 0 0 7px #F1F1EC,0 0 0 8px rgba(74,107,94,.12),0 34px 60px -42px rgba(31,53,44,.35);
  --spring:cubic-bezier(.32,.72,0,1);
}
body{background:var(--cream)}
/* Paper grain: one fixed layer above everything, never part of scrolling content. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.04;background:url(../assets/brand/grain.svg)}

/* ── Pill buttons with an arrow in its own circle ───────────────────── */
.calm .button{gap:14px;padding:7px 7px 7px 26px;min-height:52px;border:0;border-radius:999px;background:var(--green);font-weight:400;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 30px -18px rgba(31,53,44,.75);transition:background-color .5s var(--spring),transform .5s var(--spring)}
.calm .button::after{content:'';flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14) url(../assets/brand/arrow-up-right.svg) center/15px no-repeat;transition:transform .6s var(--spring)}
.calm .button:hover{background:var(--green-deep)}
.calm .button:hover::after{transform:translate(3px,-1px) scale(1.05)}
.calm .button:active{transform:scale(.98)}
.calm .button[disabled]{opacity:.55}

/* ── Opening: two columns on desktop, photograph between headline and text on phones ── */
.calm .hero-band{background:transparent;padding:0}
.calm .hero-band::before,.calm .hero-band::after{content:none}
.calm .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:1fr auto auto auto auto 1fr;gap:0 72px;min-height:0;padding:64px 0 104px;align-items:start}
.calm .hero-copy{display:contents}
.calm .hero-copy>.eyebrow{grid-column:1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:7px 15px;border-radius:999px;background:rgba(201,115,90,.09);color:var(--ember);font-size:12px;letter-spacing:.2em;text-align:left}
.calm .hero-copy>.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ember)}
.calm .hero h1{grid-column:1;grid-row:3;margin:0;max-width:11.5em;text-align:left;font-size:clamp(46px,5vw,72px);line-height:1.05;letter-spacing:-.025em;color:var(--green-deep)}
.calm .hero h1 em{font-style:normal;color:var(--sage)}
.calm .hero .hero-description{grid-column:1;grid-row:4;margin:28px 0 0;max-width:30em;text-align:left;font-size:19px;line-height:1.7;color:var(--muted)}
.calm .hero .hero-cta{grid-column:1;grid-row:5;justify-self:start;align-items:flex-start;margin-top:40px}
.calm .hero-cta .button{min-width:0;width:auto;padding-inline:26px 7px}
.calm .hero-photo{grid-column:2;grid-row:1/-1;position:relative;inset:auto;z-index:auto;align-self:center;width:auto;height:auto;margin:0;aspect-ratio:4/4.5;border-radius:24px;overflow:visible;box-shadow:var(--bezel)}
.calm .hero-photo::after{content:none}
.calm .hero-frame{position:absolute;inset:0;border-radius:24px;overflow:hidden}
.calm .hero-frame>img{position:absolute;inset:0;width:100%;height:100%;left:0;max-width:none;min-height:0;max-height:none;object-fit:cover;object-position:50% 62%;border-radius:0;transform-origin:50% 60%;will-change:transform}
.calm .hero-frame>img[src*="venue-andalusia"]{object-position:30% 55%}
.float-card{position:absolute;left:-44px;bottom:42px;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:20px;background:rgba(252,251,248,.94);box-shadow:0 0 0 1px var(--hair),0 24px 44px -26px rgba(31,53,44,.6);font-size:14px;line-height:1.45;color:var(--muted)}
.float-card b{display:block;font-family:var(--serif);font-weight:500;font-size:18px;color:var(--green-deep)}
.float-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px;background:var(--clay)}
@media(max-width:1100px){.calm .hero{gap:0 44px}.float-card{left:-24px}}
@media(max-width:800px){
  .calm .hero{grid-template-columns:1fr;grid-template-rows:none;padding:40px 0 80px}
  .calm .hero-copy>.eyebrow{grid-row:1;margin-bottom:20px}
  .calm .hero h1{grid-row:2;font-size:clamp(40px,9.6vw,52px)}
  .calm .hero-photo{grid-column:1;grid-row:3;margin-top:30px;aspect-ratio:4/3.4;align-self:stretch}
  .calm .hero .hero-description{grid-row:4;font-size:18px;margin-top:30px}
  .calm .hero .hero-cta{grid-row:5;justify-self:stretch;margin-top:30px}
  .calm .hero-cta .button{width:100%;justify-content:space-between}
  .float-card{left:12px;bottom:12px;padding:10px 16px 10px 10px;font-size:13px}
  .float-card b{font-size:16px}
  .float-icon{width:38px;height:38px}
}

/* ── Sections: more air ─────────────────────────────────────────────── */
.calm .section-space{padding-block:128px}
.calm .benefits-band.section-space{padding-top:96px}
@media(max-width:600px){.calm .section-space{padding-block:88px}.calm .benefits-band.section-space{padding-top:72px}}

/* ── How it works: three numbered framed cards holding the animations ──
   Card 1 is the search story (title, text and its animation as an inner screen). Cards 2 and 3
   are the two halves of the quotes animation: the quote table, and the price and profit. */
.calm .product-panels{gap:28px}
.calm .product-story:first-child{padding:34px 34px 28px;border-radius:28px;background:var(--paper);box-shadow:var(--bezel)}
.calm .product-story:first-child .scene-search{border:1px solid var(--hair);border-radius:18px;box-shadow:none}
.calm .product-story:first-child .story-heading{padding:0 0 24px}
/* The quotes story: its own heading is kept for screen readers; the cards carry the titles. */
.calm .product-story:nth-child(2)>.story-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.calm .scene-quotes{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.calm .scene-quotes .scene-chrome{display:none}
.calm .scene-quotes .scene-stage{padding:0}
.calm .scene-quotes .quote-stage{gap:28px}
.calm .scene-quotes .quote-terms,.calm .scene-quotes .quote-figure{padding:30px;border-radius:28px;background:#fbf6f2;box-shadow:var(--bezel)}
.calm .scene-quotes .quote-terms{background:var(--paper)}
.calm .scene-quotes .scene-overline{margin-bottom:6px}
.calm .scene-quotes>figcaption{border-top:0;padding-inline:6px;margin-top:10px}
.calm .scene-quotes .scene-progress{display:none}
.calm .scene-quotes .scene-private{padding:22px 6px 0}
@media(max-width:600px){
  .calm .product-story:first-child{padding:24px 18px 18px;border-radius:24px}
  .calm .scene-quotes .quote-terms,.calm .scene-quotes .quote-figure{padding:22px 16px;border-radius:24px}
  .calm .scene-quotes .quote-stage{gap:22px}
}

/* ── Photographic bands: full width; the last one framed ────────────── */
.calm .people-moment{width:min(1320px,calc(100% - 32px));margin:0 auto 24px;border-radius:26px;overflow:hidden;box-shadow:var(--bezel)}
@media(max-width:600px){.calm .people-moment{width:calc(100% - 24px);border-radius:20px}}

/* ── Gallery: plain rounded photographs that lean in on hover ───────── */
.calm .range-photo{display:block;border-radius:18px;overflow:hidden;background:var(--wash)}
.calm .range-strip img{border-radius:0;transition:transform 1.2s var(--spring)}
.calm .range-strip figure:hover img{transform:scale(1.05)}
.calm .range-strip figcaption{font-size:16px}

/* ── FAQ: hairlines and a round plus that turns into a cross ────────── */
.calm .faq details,.calm .faq details:first-child{border-color:var(--hair-strong)}
.calm .faq summary{font-size:18px;padding:26px 56px 26px 0;color:var(--green-deep)}
.calm .faq summary::after{content:'';top:50%;right:0;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:rgba(74,107,94,.07) url(../assets/brand/icon-plus.svg) center/14px no-repeat;transition:transform .6s var(--spring)}
.calm .faq details[open] summary::after{content:'';transform:rotate(45deg)}
.calm .faq details p{font-size:17px;margin-right:56px}

/* ── Underlined heading words: a soft, brushed stroke instead of a hard rule ── */
.calm h2[data-underline]::after{height:12px;margin-top:-4px;background:url(../assets/brand/underline-soft.svg?v=2) no-repeat 0 0/100% 100%}

/* ── Readable sizes ─────────────────────────────────────────────────── */
.calm .story-heading h3{font-size:clamp(26px,2.6vw,34px)}
.calm .story-heading>p:last-child{font-size:18px}
@media(max-width:600px){
  body.calm,.calm body{font-size:17px}
  .calm .story-heading>p:last-child,.calm .closing .closing-description,.calm .venue-closing .intro,.calm .faq details p{font-size:17px}
  .calm .faq summary{font-size:18px}
  .calm .site-footer{font-size:16px}
}

/* ── Gentle entrance as sections scroll in (launch.js adds .reveal only below the fold) ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--spring),transform 1.1s var(--spring)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Small labels stay readable on phones. */
.calm .hero-copy>.eyebrow{font-size:13px}
.calm .scene-status,.calm .scene-overline,.calm .product-scene>figcaption{font-size:13px}
@media(max-width:600px){.calm .hero-copy>.eyebrow{font-size:12.5px;letter-spacing:.16em}.calm .hero h1{text-wrap:balance}}

/* About page: the label as a tag, the portrait framed. */
.calm .about-heading .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(201,115,90,.09);color:var(--ember);font-size:13px;letter-spacing:.2em}
.calm .about-heading .eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ember)}
.calm .about-portrait img{border-radius:22px;box-shadow:var(--bezel)}
.calm .about-page{padding-top:56px}

/* ── The opening photograph breathes: a very slow drift and zoom, plus the scroll movement ── */
@keyframes calm-breathe{0%{scale:1;translate:0 0}50%{scale:1.045;translate:-1.2% -.8%}100%{scale:1;translate:0 0}}
.calm .hero-frame>img{animation:calm-breathe 26s ease-in-out infinite}
@keyframes calm-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.float-card{animation:calm-float 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.calm .hero-frame>img,.float-card{animation:none}}

/* ── Venue opening: soften the generated look (warmer, less saturated, a little film grain) ── */
.calm .hero-frame>img[src*="venue-andalusia"]{filter:saturate(.8) contrast(.93) brightness(1.03) sepia(.1)}
.calm .hero-frame:has(img[src*="venue-andalusia"])::after{content:'';position:absolute;inset:0;pointer-events:none;background:url(../assets/brand/grain.svg);opacity:.16;mix-blend-mode:soft-light}
.calm .hero-frame:has(img[src*="venue-andalusia"])::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(40,35,25,.22))}

/* ── 24 Oct: How it works like the concept ─────────────────────────────
   Desktop: card 1 (the search) on the left, cards 2 and 3 (quotes, pricing) stacked on the right.
   Grey "01 · …" labels above serif titles; no screen chrome; quieter table and chart. */
.calm .benefits-band .section-intro{text-align:left;margin-inline:0;max-width:none}
.calm .card-label{margin:0 0 10px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.calm .card-step{margin:0 0 18px;font-family:var(--serif);font-size:clamp(24px,2.1vw,30px);line-height:1.22;color:var(--green-deep)}
.calm .product-story:first-child .story-heading h3{margin:0}
.calm .scene-search .scene-chrome{display:none}
.calm .scene-search .scene-split,.calm .scene-quotes .scene-split{grid-template-columns:minmax(0,1fr)}
.calm .quote-terms .scene-overline,.calm .quote-takeaway{display:none}
.calm .quote-terms .scene-quote-table tbody tr:nth-child(5){display:none}
.calm .quote-price-value{display:none}
.calm .quote-price-entry{flex-wrap:nowrap;gap:14px;padding:10px 12px 10px 16px}
.calm .quote-price-entry>span:first-child{flex:1;min-width:0}
.calm .quote-price-options{display:flex;flex-basis:auto;gap:6px}
.calm .quote-price-options button{min-height:42px;padding:0 14px;border-radius:999px}
@media(min-width:1000px){
  .calm .product-panels{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1240px}
}
@media(max-width:600px){
  .calm .quote-price-entry{flex-wrap:wrap}
  .calm .quote-price-entry>span:first-child{flex-basis:100%}
  .calm .quote-price-options{width:100%}.calm .quote-price-options button{flex:1}
}
.calm .panels-after{margin-top:40px}

/* Small terracotta tags above the gallery, FAQ and closing headings. */
.calm .tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:7px 15px;border-radius:999px;background:rgba(201,115,90,.09);color:var(--ember);font-size:13px;letter-spacing:.2em;text-transform:uppercase;line-height:1.4}
.calm .tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ember)}
.calm .retreat-range .tag{display:flex;width:fit-content;margin-inline:auto}
.calm .retreat-range{padding-block:104px}
@media(max-width:600px){.calm .retreat-range{padding-block:72px}}

/* The singing-bowl (and venue villa) band: framed, across the page width. */
.calm .quiet-band{width:calc(100% - 24px);margin:0 auto;border-radius:26px;box-shadow:var(--bezel)}
@media(max-width:600px){.calm .quiet-band{border-radius:20px}}

/* The venue photograph keeps its filter but not the slow zoom (it shimmered at this size). */
.calm .hero-frame>img[src*="venue-andalusia"]{animation:none}

/* ── About page: pull quote, photograph, three facts, sign-off ───────── */
.calm .about-quote{margin:40px 0;padding:6px 0 6px 26px;border-left:2px solid rgba(201,115,90,.45)}
.calm .about-quote p{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1.3;color:var(--green-deep)}
.calm .about-photo{margin:44px 0;border-radius:24px;overflow:hidden;box-shadow:var(--bezel)}
.calm .about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
.calm .about-facts{list-style:none;margin:44px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.calm .about-facts li{padding:20px 20px 22px;border-radius:20px;background:var(--wash)}
.calm .about-facts b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;color:var(--green-deep);margin-bottom:6px}
.calm .about-facts span{display:block;font-size:15px;line-height:1.55;color:var(--muted)}
.calm .about-prose .about-signature{display:flex;flex-direction:column;margin:0}
.calm .about-signature span{font-family:var(--sans);font-size:15px;color:var(--muted)}
.calm .about-signoff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;margin-top:40px;padding-top:30px;border-top:1px solid var(--hair-strong)}
@media(max-width:700px){.calm .about-facts{grid-template-columns:1fr}.calm .about-signoff .button{width:100%;justify-content:space-between}}
/* The section heading lines up with the cards' left edge. */
@media(min-width:1000px){.calm .benefits-band .section-intro{max-width:1240px;margin-inline:auto;padding-left:4px}}

/* ── 24 Oct (b): card 1 closer to the concept ───────────────────────────
   The card frame is drawn behind card 1 (::before) so its caption and Replay sit under the frame,
   as for cards 2 and 3; both columns end on the same line. */
@media(min-width:1000px){.calm .product-panels{align-items:stretch}}
.calm .product-story:first-child{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:34px 34px 0;background:none;box-shadow:none;border-radius:0}
.calm .product-story:first-child::before{content:'';position:absolute;inset:0 0 58px 0;z-index:-1;border-radius:28px;background:var(--paper);box-shadow:var(--bezel)}
.calm .product-story:first-child .story-heading{padding:0}
.calm .product-story:first-child .scene-search{flex:1;display:flex;flex-direction:column;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.calm .scene-search .scene-visual{flex:1;display:flex;flex-direction:column;margin-bottom:44px}
.calm .scene-search .scene-stage{flex:1;display:flex;flex-direction:column;gap:22px;padding:0}
.calm .scene-search .search-results-stage{flex:1}
.calm .product-scene>figcaption{height:48px;min-height:48px;border-top:0;padding:0 6px}
.calm .scene-quotes>figcaption{margin-top:10px}
.calm .product-scene .scene-progress{display:none}
@media(max-width:600px){.calm .product-story:first-child{padding:24px 18px 0}.calm .product-story:first-child::before{border-radius:24px}.calm .scene-search .scene-visual{margin-bottom:34px}}

/* Same title style and spacing on all three cards. */
.calm .product-story:first-child .story-heading h3,.calm .card-step{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.3vw,31px);line-height:1.22;letter-spacing:-.02em;color:var(--green-deep);margin:0 0 22px}
.calm .card-label{margin:0 0 12px}
.calm .scene-quotes .quote-terms,.calm .scene-quotes .quote-figure{gap:0}
.calm .quote-figure>.quote-price-entry{margin-bottom:22px}

/* The brief, its understood criteria and the matches, as in the concept. */
.calm .scene-brief{padding:22px 24px;border:0;border-radius:18px;background:var(--wash)}
.calm .scene-brief .scene-overline{color:var(--muted)}
.calm .scene-brief-copy{font-size:19px;line-height:1.55;color:var(--green);margin-top:6px}
.calm .scene-criteria{gap:8px}
.calm .scene-criteria>span{border:0;border-radius:999px;padding:6px 13px;background:var(--clay);color:var(--green-deep);font-size:14px}
.calm .scene-venue .venue-mark{display:none}
.calm .scene-venues{gap:10px}
.calm .scene-venue{gap:14px;padding:10px 14px 10px 10px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair);min-height:0}
.calm .scene-venue>img{width:48px;height:48px;border-radius:12px}
.calm .scene-venue strong{color:var(--green-deep)}
.calm .venue-reply.is-received{box-shadow:none;background:var(--wash);color:var(--green);padding:5px 12px;border-radius:999px}
.calm .scene-request{border-radius:999px}
.calm .scene-request.is-sent{border-radius:999px;border-color:transparent;background:var(--wash)}
.calm .venue-inquiry{border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.calm .inquiry-envelope{border-radius:14px}
@media(max-width:600px){.calm .scene-brief{padding:18px}.calm .scene-brief-copy{font-size:17px}}

/* Brand fonts: Inter is loaded at one weight, so nothing in the illustrations asks for a bolder
   Inter (the browser would fake it). Serif headings use Playfair 500. */
.calm .product-scene *{font-weight:400}
.calm .product-scene :is(.quote-bridge h4,.inquiry-heading h4,.inquiry-payoff,.scene-brief-copy,.scene-brief-copy *){font-weight:500}
.calm .scene-quote-table td strong,.calm .quote-key strong{color:var(--green-deep)}
.calm .scene-quote-table td span.per{display:inline;margin:0 0 0 4px}

/* Headings and tags sit on the left, except in the closing invitation. */
.calm .retreat-range h2{text-align:left;margin-left:0}
.calm .retreat-range .tag{margin-inline:0}
.calm .benefits-band .section-intro{margin-bottom:44px}

/* The closing form is a framed section; the last photograph runs full width. */
.calm .closing,.calm .venue-closing{width:min(1200px,calc(100% - 48px));margin:0 auto 104px;border-radius:30px;overflow:hidden;box-shadow:var(--bezel)}
.calm .venue-closing .companion-grid{width:calc(100% - 96px)}
@media(max-width:800px){.calm .venue-closing .companion-grid{width:calc(100% - 48px)}}
@media(max-width:600px){
  .calm .closing,.calm .venue-closing{width:calc(100% - 24px);margin-bottom:72px;border-radius:24px}
  .calm .closing-inner{width:calc(100% - 40px)}
  .calm .venue-closing .companion-grid{width:calc(100% - 36px)}
}
.calm .people-moment{width:auto;margin:0;border-radius:0;box-shadow:none}

/* Venue closing: the same Water lines as the homepage closing. */
.calm .venue-closing{position:relative;isolation:isolate}
.calm .venue-closing .water-art{width:880px;right:-140px;bottom:-40px;opacity:1;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.16) 45%,#000 75%);-webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.16) 45%,#000 75%)}
.calm .venue-closing .water-art-left{right:auto;left:-260px;bottom:60px;transform:rotate(-16deg);mask-image:linear-gradient(to left,transparent,transparent 18%,rgba(0,0,0,.14) 50%,#000 80%);-webkit-mask-image:linear-gradient(to left,transparent,transparent 18%,rgba(0,0,0,.14) 50%,#000 80%)}
@media(max-width:600px){.calm .venue-closing .water-art{width:610px;right:-250px;bottom:-30px}.calm .venue-closing .water-art-left{display:none}}
/* A full-width photograph with no caption (venue page, after the form). */
.calm .people-moment-plain::before{content:none}
@media(min-width:601px){.calm .people-moment-plain{min-height:clamp(380px,34vw,560px)}}
.calm .people-moment-plain>img{object-position:50% 55%}

/* 24 Oct (c): more air in card 1, a tighter card 2 and 3. */
.calm .product-story:first-child{padding:44px 42px 0}
.calm .product-story:first-child .story-heading h3{margin-bottom:30px}
.calm .scene-search .scene-stage{gap:30px}
.calm .scene-brief{padding:26px 28px}
.calm .scene-criteria{gap:9px}
.calm .scene-venues{gap:14px}
.calm .scene-venue{padding:12px 16px 12px 12px}
.calm .scene-search .scene-visual{margin-bottom:52px}
.calm .scene-quotes .card-step{margin-bottom:12px}
.calm .quote-figure>.quote-price-entry{margin-bottom:16px}
/* Card 3: "Profit (18 paying participants)" beside the three totals; the chart moves up. */
@media(min-width:601px){
  .calm .quote-chart-phase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;align-items:start}
  .calm .quote-chart-phase>*{grid-column:1/-1}
  .calm .quote-chart-phase>.quote-chart-title{grid-column:1;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
  .calm .quote-chart-phase>.quote-legend{grid-column:2;margin:0 0 6px}
}
.calm .quote-chart-title>span::before{content:'('}
.calm .quote-chart-title>span::after{content:')'}
@media(max-width:600px){.calm .product-story:first-child{padding:28px 20px 0}.calm .scene-brief{padding:20px}}
@media(min-width:1000px){
  /* Any height left in card 1 is shared above and below the matches, not left as a gap. */
  .calm .scene-search .search-results-stage{justify-content:center}
  .calm .scene-search .scene-venues{margin-block:auto}
  .calm .scene-venue{padding:14px 18px 14px 14px}
  .calm .scene-venue>img{width:54px;height:54px;border-radius:14px}
}
@media(min-width:1000px){
  /* The between-steps explanation in card 3 is no taller than the chart that replaces it. */
  .calm .quote-bridge{gap:12px;padding-top:6px}
  .calm .quote-bridge>p{min-height:0;line-height:1.6}
  .calm .quote-normalized{padding:11px 16px}
  /* A slightly tighter quote table. */
  .calm .scene-quote-table thead th{padding-block:9px}
  .calm .scene-quote-table td,.calm .scene-quote-table tbody th{padding-block:8px}
  .calm .scene-quotes .quote-terms,.calm .scene-quotes .quote-figure{padding:28px 30px}
  /* Card 1 gets the room back as air. */
  .calm .scene-search .scene-stage{gap:36px}
  .calm .scene-venues{gap:16px}
}
@media(min-width:1000px){.calm .scene-search .scene-stage{gap:44px}.calm .product-story:first-child .story-heading h3{margin-bottom:34px}[data-scene-audience="venue"] .quote-bridge .quote-unit-cloud{min-height:0}}

/* About: two facts, each a terracotta label, a green figure and a short line. */
.calm .about-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.calm .about-facts li{padding:24px 26px 26px}
.calm .about-facts .fact-label{display:block;margin-bottom:8px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.calm .about-facts b{font-size:30px;margin-bottom:8px}
.calm .about-facts span:last-child{font-size:16px;line-height:1.6}
@media(max-width:700px){.calm .about-facts{grid-template-columns:1fr}}

/* 24 Oct (d): no reply pills — the quotes arriving are shown by cards 2 and 3. */
.calm .venue-reply{display:none}

/* Phones: a compact How it works. */
@media(max-width:600px){
  .calm .product-panels{gap:20px}
  .calm .scene-search .scene-stage{gap:22px}
  .calm .product-story:first-child .story-heading h3{margin-bottom:22px}
  /* The quote table keeps its columns, with the row labels in a narrow first column. */
  .calm .scene-quote-table{display:table;width:100%;table-layout:fixed;font-size:13px}
  .calm .scene-quote-table thead{display:table-header-group}
  .calm .scene-quote-table tbody{display:table-row-group}
  .calm .scene-quote-table tr{display:table-row}
  .calm .scene-quote-table tr>*:first-child{display:table-cell;grid-column:auto;width:27%;padding:8px 4px 8px 8px;background:none;font-size:13px;text-align:left;border-top:1px solid #efe6df}
  .calm .scene-quote-table thead tr>*:first-child{display:table-cell;border-top:0;background:#f0e4da}
  .calm .scene-quote-table thead th{padding:9px 3px;font-size:13px;background:#f0e4da}
  .calm .scene-quote-table td,.calm .scene-quote-table tbody th{padding:8px 3px;border-top:1px solid #efe6df;font-size:13px}
  .calm .scene-quote-table td strong{font-size:16px}
  .calm .scene-quote-table td span{font-size:12.5px}
  .calm .scene-quote-table td span.per{display:block;margin:0}
  .calm .scene-quote-table small{font-size:12px}
  /* The three profit totals side by side, as on desktop. */
  .calm .quote-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
  .calm .quote-key>span{display:block}
  .calm .quote-key strong{font-size:17px;margin-top:2px}
  .calm .quote-key>span>span{font-size:13px}
  .calm .quote-chart-title{flex-direction:row;align-items:baseline;gap:6px;margin-bottom:10px}
}
/* About photo: shown nearly whole (it is almost square), so the sky and the ledge stay in. */
.calm .about-photo img{aspect-ratio:1/1.04;object-position:50% 50%}
/* About photo: less tall, the cut taken from the sky so the ridge and the figure stay in. The headshot is hidden on phones. */
.calm .about-photo img{aspect-ratio:5/4;object-position:50% 92%}
@media(max-width:700px){.calm .about-portrait{display:none}}