/* Hero v6: isolated home layout, inspired by BlueSpa 2026. */
.home-bento { --hero-paper: #fff8f1; }
.hero-header { position: absolute; z-index: 50; top: 38px; left: 50%; transform: translateX(-50%); width: calc(100% - 112px); max-width: 1320px; height: 48px; display: flex; align-items: center; justify-content: center; }
.hero-wordmark img { width: 124px; height: auto; filter: brightness(0) invert(1) drop-shadow(0 0 3px #0082bd); }
.hero-home-dot, .hero-menu-toggle { display: none; }
.bento-hero { padding: 24px 24px 44px; max-width: 1600px; margin: auto; }
.bento-scene { position: relative; min-height: 650px; height: min(780px, calc(100svh - 70px)); }
.bento-media { position: absolute; inset: 0 68px 70px 84px; border-radius: 38px; overflow: hidden; background: #687369; }
.bento-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.bento-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,31,23,.36), transparent 65%), linear-gradient(180deg, rgba(20,31,23,.28), transparent 26%); }
.bento-card { position: absolute; z-index: 3; top: 100px; left: 24px; width: clamp(390px, 36vw, 490px); aspect-ratio: 1; border-radius: 38px; }
.bento-glass { position: absolute; inset: 0; border-radius: inherit; background-color: rgba(222,233,225,.24); background-image: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.04) 30%, rgba(255,255,255,.08) 70%, rgba(230,240,242,.3)); box-shadow: inset 0 2px 2px rgba(255,255,255,.8), inset 2px 0 5px rgba(255,255,255,.4), inset -2px -3px 5px rgba(208,228,240,.6), 0 18px 30px -18px rgba(15,26,18,.55); backdrop-filter: blur(10px) saturate(125%); -webkit-backdrop-filter: blur(10px) saturate(125%); }
.bento-glass { background-color: transparent; background-image: radial-gradient(ellipse at 28% 24%, #67676785 0%, #97afbb80 100%); background-size: 100% 100%; }
.bento-glass::before, .bento-rail::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 90px 90px; }
html.has-liquid .bento-glass.lens-ready { backdrop-filter: var(--hero-lens) blur(1.5px) saturate(125%); }
.bento-glass::after { padding: 2px; background: linear-gradient(130deg, #ffffffce, #eff2cb7a 15%, #b9d9ea99 26%, #ffffff44 42%, #ffffff22 68%, #c3d9ebbb 90%, #ffffffdd); }
.bento-copy { position: relative; padding: 30px 34px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; color: #fffaf3; text-shadow: 0 1px 8px #19281f70; }
.bento-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.bento-copy h1 { font-family: var(--font-serif); font-size: clamp(48px, 4.75vw, 67px); font-weight: 400; line-height: .98; margin: 20px 0 18px; letter-spacing: -.045em; }
.bento-copy h1 span { display: block; white-space: nowrap; }
.bento-copy h1 em { display: block; font-family: var(--font-script); font-size: 1.15em; font-style: normal; margin: 2px 0 0 22px; letter-spacing: 0; }
.bento-description { font-family: var(--font-serif); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4; }
.bento-services { font-size: 11px; line-height: 1.9; margin-top: 15px; opacity: .9; }
.bento-book { display: inline-flex; align-items: center; gap: 30px; margin-top: auto; padding: 8px 10px 8px 18px; min-height: 44px; background: #f2e2ce; border-radius: 40px; color: #28362b; font-size: 12px; font-weight: 600; text-shadow: none; box-shadow: inset 0 1px 0 #fff9; transition: background .2s; }
.bento-book span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff5; font-size: 20px; }
.bento-book:hover { background: #fff8ef; }
.bento-whatsapp { margin-top: 9px; font-size: 10px; min-height: 24px; }
.bento-leaf { position: absolute; pointer-events: none; object-fit: contain; width: 280px; height: auto; z-index: 2; }
.leaf-left { left: -55px; top: 300px; transform: rotate(-30deg); }
.leaf-right { display: none; }
.bento-rail { position: absolute; z-index: 4; right: 24px; bottom: 38px; width: 84px; border-radius: 999px; padding: 14px 6px; display: flex; align-items: center; flex-direction: column; gap: 4px; background-color: transparent; background-image: radial-gradient(ellipse at 28% 24%, #67676755, #97afbb66); background-size: 100% 100%; }
.bento-rail.lens-ready { backdrop-filter: var(--hero-lens) blur(1px) saturate(125%); }
.bento-rail { background-color: #ffffff75; }
.bento-rail a { position: relative; text-shadow: 0 1px 4px #ffffffaa; }
.bento-rail a { writing-mode: horizontal-tb; font-family: var(--font-serif); font-size: 14px; letter-spacing: 0; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 0; border-radius: 20px; }
/* hover-v8.8: only the colour shifts; the white pill behind the label is gone. */
.bento-rail a:hover { color: #00628e; transition: color .2s; }
.bento-location { position: absolute; bottom: 30px; left: 84px; color: var(--green); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.bento-invite { display: none; }
.home-bento a:focus-visible, .hero-menu-toggle:focus-visible { outline: 3px solid #0082bd; outline-offset: 4px; }
.hero-menu-panel[hidden] { display: none; }
.hero-menu-panel { position: fixed; z-index: 49; inset: 0; background: #fff8f1f5; backdrop-filter: blur(18px); overflow: auto; padding: 120px 24px 32px; }
.hero-menu-panel nav { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-menu-panel nav > a:not(.btn) { font-family: var(--font-serif); font-size: 30px; }
.hero-menu-open { overflow: hidden; }
.hero-menu-open .hero-header { position: fixed; }
@media (max-width: 760px) {
  .hero-header { top: 16px; width: calc(100% - 32px); height: 46px; padding: 0 12px; border-radius: 16px; background: #777872; justify-content: space-between; }
  .hero-wordmark { position: absolute; left: 50%; transform: translateX(-50%); }
  .hero-wordmark img { width: 120px; filter: brightness(0) invert(1) drop-shadow(0 0 3px #0082bd); }
  .hero-home-dot { display: block; width: 27px; height: 27px; border-radius: 50%; background: #f2dfc9; }
  .hero-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; cursor: pointer; }
  .hero-menu-toggle span { display: block; width: 19px; height: 2px; background: #f2dfc9; transition: transform .2s; }
  .hero-menu-open .hero-menu-toggle span:first-child { transform: translateY(6px) rotate(45deg); }
  .hero-menu-open .hero-menu-toggle span:nth-child(2) { opacity: 0; }
  .hero-menu-open .hero-menu-toggle span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .bento-hero { padding: 98px 16px 45px; background: var(--hero-paper); }
  .bento-scene { height: auto; min-height: 0; aspect-ratio: .92; max-width: 520px; margin: auto; }
  .bento-media { inset: auto 0 0 auto; width: 75%; height: 64%; border-radius: 38px; }
  .bento-media img { object-position: 65% 50%; }
  .bento-media::after { display: none; }
  .bento-card { top: 0; left: 0; width: 75%; border-radius: 34px; }
  .bento-copy { padding: 22px; color: #24362b; text-shadow: 0 1px 5px #fff9; }
  .bento-eyebrow { font-size: 7px; letter-spacing: .12em; }
  .bento-copy h1 { font-size: clamp(30px, 7.9vw, 46px); margin: 12px 0 10px; }
  .bento-copy h1 em { margin-left: 8px; }
  .bento-description { font-size: clamp(12px, 3vw, 16px); line-height: 1.3; }
  .bento-services, .bento-whatsapp { display: none; }
  .bento-book { font-size: 10px; padding: 4px 7px 4px 13px; gap: 14px; min-height: 36px; margin-top: auto; }
  .bento-book span { width: 25px; height: 25px; }
  .bento-glass { background-color: transparent; }
  .bento-leaf { width: 40%; }
  .leaf-left { left: 7%; top: auto; bottom: 15%; transform: rotate(-30deg); }
  .leaf-right { display: block; right: 3%; top: 8%; transform: rotate(35deg); }
  .bento-media { z-index: 1; }
  .leaf-left { z-index: 0; }
  .leaf-right { z-index: 2; }
  .bento-rail, .bento-location { display: none; }
  .bento-invite { display: flex; align-items: center; justify-content: space-between; width: 70%; max-width: 350px; min-height: 112px; padding: 20px 22px; margin: 18px auto 0; margin-left: max(0px, calc((100% - 520px) / 2)); border-radius: 40px; background: #777872; color: #fff8f1; }
  .bento-invite > span:first-child { align-self: flex-start; font-family: var(--font-serif); text-transform: uppercase; font-size: 12px; line-height: 1.2; }
  .invite-arrow { display: grid; place-items: center; align-self: flex-end; flex: 0 0 40px; height: 40px; background: #f2dfc9; color: #596350; border-radius: 50%; font-size: 25px; }
}
@media (max-width: 359px) {
  .bento-copy { padding: 16px; }
  .bento-copy h1 { margin-top: 9px; font-size: 28px; }
  .bento-description { font-size: 11px; }
  .bento-book { min-height: 34px; }
  .bento-invite { width: 78%; }
}

/* MERO booking: retain direct telephone and WhatsApp contact options. */
.mero-partner { margin: 22px 0 12px; font-size: 12px; color: var(--green); }
.mero-partner strong { letter-spacing: .1em; }
.bento-invite small { display: block; margin-top: 12px; font: 10px/1.4 var(--font-body); text-transform: none; }
@media (max-width: 760px) {
  .bento-book { gap: 6px; max-width: 100%; }
  .bento-book span { flex-shrink: 0; }
  .bento-invite { gap: 10px; }
}

/* Distinct direct and MERO booking choices. Logo sourced from mero.ro. */
.booking-options { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hero-booking { margin-top: auto; flex-wrap: nowrap; width: 100%; }
.hero-booking .bento-book { margin-top: 0; }
.mero-book { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 12px 18px; border-radius: 40px; color: #fff; background: linear-gradient(120deg, #7135c5, #a545ce 55%, #6334b9); box-shadow: inset 0 1px 0 #ffffff50, 0 5px 15px #6628aa25; text-shadow: none; transition: filter .2s; }
.mero-book:hover { filter: brightness(1.12); color: #fff; }
.mero-book svg { width: 65px; height: auto; }
.footer .booking-options { justify-content: center; }
@media (max-width: 760px) {
  .hero-booking { gap: 7px; }
  .hero-booking .bento-book { padding: 6px 10px; white-space: nowrap; }
  .hero-booking .bento-book span { display: none; }
  .hero-booking .mero-book { min-height: 36px; padding: 10px; }
  .hero-booking .mero-book svg { width: 42px; }
}

/* MERO reference: lilac upper left, blue lower left, navy right. */
.mero-book { gap: 8px; background: radial-gradient(ellipse at 0% 0%, #b780f7 0%, transparent 65%), radial-gradient(ellipse at 0% 100%, #005cff 0%, transparent 72%), linear-gradient(110deg, #6558d9, #060f64 90%); }
.mero-label { font: 600 11px/1.3 var(--font-body); white-space: nowrap; }
.mero-book svg { width: 52px; }
.hero-booking { flex-wrap: wrap; gap: 8px; }
.hero-booking .bento-book { gap: 12px; }
.hero-booking .mero-book { padding-inline: 12px; }
@media (max-width: 760px) {
  .hero-booking { gap: 5px; }
  .hero-booking .mero-book { gap: 5px; min-height: 32px; padding: 7px 10px; }
  .hero-booking .mero-label { font-size: 9px; }
  .hero-booking .mero-book svg { width: 38px; }
  .hero-booking .bento-book { min-height: 30px; padding-block: 5px; }
}

/* Larger editorial headline, with a deliberate staggered second line. */
.bento-copy h1 { font-size: clamp(62px, 5.7vw, 84px); line-height: .95; margin-top: 18px; margin-bottom: 20px; }
.bento-copy h1 em { margin-left: 38px; font-size: 1.12em; }
@media (min-width: 761px) and (max-width: 1100px) {
  .bento-copy h1 { font-size: 62px; }
  .bento-copy h1 em { margin-left: 28px; }
}
@media (max-width: 760px) {
  .bento-copy h1 { font-size: clamp(32px, 9.1vw, 50px); margin-top: 10px; margin-bottom: 12px; }
  .bento-copy h1 em { margin-left: 18px; }
}
@media (max-width: 359px) {
  .bento-copy h1 { font-size: 31px; margin-top: 8px; margin-bottom: 8px; }
  .bento-copy h1 em { margin-left: 15px; }
}

/* Headline scale: larger display line and 1.25x script, sized to the panel. */
@media (min-width: 761px) {
  .bento-card { container-type: inline-size; }
  .bento-copy h1 { font-size: 19cqw; line-height: .9; margin-top: 18px; margin-bottom: 24px; }
  .bento-copy h1 em { font-size: 1.25em; margin-left: 7cqw; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .bento-card { min-height: 490px; }
}

/* “Descoperă” is cut into the glass: dark upper rim, light lower rim. */
.bento-copy h1 span {
  color: rgba(224, 235, 235, .16);
  -webkit-text-stroke: .7px rgba(239, 248, 247, .22);
  text-shadow:
    -1px -1px 1px rgba(12, 24, 27, .72),
    1px 1px 1px rgba(255, 255, 255, .78),
    0 2px 4px rgba(255, 255, 255, .2),
    0 -2px 3px rgba(10, 24, 27, .3);
}
@supports (mix-blend-mode: soft-light) {
  .bento-copy h1 span { mix-blend-mode: soft-light; }
}
@media (max-width: 760px) {
  .bento-copy h1 span {
    color: rgba(31, 52, 50, .2);
    -webkit-text-stroke-color: rgba(255, 255, 255, .18);
    text-shadow:
      -1px -1px 1px rgba(18, 35, 34, .62),
      1px 1px 1px rgba(255, 255, 255, .86),
      0 2px 3px rgba(255, 255, 255, .2);
  }
}

/* hero-spacing-v6.8: card grows with its content; roomier rhythm around the booking row. */
@media (min-width: 761px) {
  .bento-scene { min-height: 745px; }
  .bento-card { aspect-ratio: auto; display: flex; min-height: 0; }
  .bento-copy { height: auto; flex: 1; padding: 30px 34px 34px; }
  .bento-services { margin-top: 22px; line-height: 1.8; margin-bottom: 34px; }
  .hero-booking { gap: 16px; }
  .bento-whatsapp { margin-top: 20px; }
}

/* hero-frame-v6.9: photo frame ends above the glass card, which now hangs past it. */
@media (min-width: 761px) {
  .bento-scene { height: 745px; min-height: 745px; }
  .bento-media { bottom: 120px; }
  .bento-card { top: auto; bottom: 90px; }
  .bento-rail { bottom: 150px; }
}

/* hero-notch-v7.4: notch lifted 8px above the frame edge, so its straight side is clipped away instead of leaving a half-opaque seam; the wordmark's ink, not its transparent box, meets the edge. */
@media (min-width: 761px) {
  .hero-header { top: 11.5px; }

  .bento-media {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='60' viewBox='0 0 560 60'%3E%3Cpath d='M0,0 C140,0 140,52 280,52 C420,52 420,0 560,0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='60' viewBox='0 0 560 60'%3E%3Cpath d='M0,0 C140,0 140,52 280,52 C420,52 420,0 560,0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
    -webkit-mask-position: calc(50% - 8px) -8px, 0 0;
    mask-position: calc(50% - 8px) -8px, 0 0;
    -webkit-mask-size: clamp(430px, 40%, 560px) 60px, 100% 100%;
    mask-size: clamp(430px, 40%, 560px) 60px, 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

/* home-nav-v7.5: the prices-page header drops in past the marquee and stays put. */
.home-nav-wrap {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; padding: 0 16px;
  transform: translateY(calc(-100% - 24px)); visibility: hidden; pointer-events: none;
  transition: transform .5s cubic-bezier(.4,.14,.2,1), visibility .5s;
}
.home-nav-wrap.is-in { transform: none; visibility: visible; pointer-events: auto; }
.home-nav-wrap .nav { max-width: 860px; }
.home-nav-wrap .nav-links { display: none; }
.home-nav-wrap .hero-menu-toggle { display: flex; margin-left: auto; }
.home-nav-wrap .hero-menu-toggle span { width: 20px; background: var(--ink); }
@media (min-width: 761px) {
  .home-nav-wrap .nav-links { display: flex; }
  .home-nav-wrap .hero-menu-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-nav-wrap { transition: none; }
}

/* preloader-v8.3: the wordmark opening from the middle IS the progress meter. */
.preloader { display: none; }
html.is-loading .preloader, html.preloader-out .preloader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(120% 90% at 50% 42%, var(--bg-soft) 0%, var(--bg) 62%);
}
html.is-loading { overflow: hidden; }
.preloader-inner { display: grid; justify-items: center; gap: 22px; }
/* The mark opens from the middle out to both ends: a centred mask box that grows
   sideways, soft at its two edges, flat top to bottom so nothing vignettes.
   Its width is set from JS every frame; 135% is the point it is fully open. */
.preloader-mark {
  width: 190px; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
}
/* Leaving: the mark lifts away a touch before the paper fades. */
html.preloader-out .preloader { opacity: 0; pointer-events: none; transition: opacity .55s ease .1s; }
html.preloader-out .preloader-inner {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .38s ease, transform .55s cubic-bezier(.4,.14,.2,1);
}
@media (max-width: 760px) {
  .preloader-mark { width: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-mark { -webkit-mask-image: none; mask-image: none; }
  html.preloader-out .preloader, html.preloader-out .preloader-inner { transition: none; }
}

/* phone-icon-v8.4: the round chip on the hero booking button is a handset, not an arrow. */
.bento-book span svg { display: block; width: 15px; height: 15px; }
@media (max-width: 760px) {
  .bento-book span svg { width: 13px; height: 13px; }
}

/* brands-v9.0: the marquee rides on the same liquid glass as the cards, over leaves. */
/* Same box as the hero: the capsule lines up with the cards above, and the
   leaves stay inside the site's column instead of hugging the screen edges. */
/* overflow visible: the leaves spill past the band instead of being cut off
   square. body already clips the page horizontally, so no side scrollbar. */
.brands { background: none; padding: 56px 24px 60px; max-width: 1600px; margin: auto; overflow: visible; position: relative; }
.brands-leaf { position: absolute; z-index: 0; pointer-events: none; width: 260px; height: auto; object-fit: contain; }
.brands-leaf.leaf-a { left: -46px; top: 50%; transform: translateY(-54%) rotate(-26deg); }
.brands-leaf.leaf-b { right: -54px; top: 50%; transform: translateY(-44%) rotate(152deg); }
.brands-panel { position: relative; z-index: 1; border-radius: 999px; padding: 24px 0; }
.brands-glass {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background-color: transparent;
  /* Frosted pane: this one blurs and tints the leaves behind it. The logos are
     painted ON TOP of it, so nothing here touches them. */
  background-image: radial-gradient(ellipse at 28% 24%, #6767674d 0%, #97afbb47 100%);
  background-size: 100% 100%;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.8), inset 2px 0 5px rgba(255,255,255,.4), inset -2px -3px 5px rgba(208,228,240,.6), 0 18px 30px -18px rgba(15,26,18,.55);
  /* In line with the other panels: the card blurs at 1.5px and the rail at 1px.
     This one carries no lens of its own, so it sits a touch above them. */
  backdrop-filter: blur(2px) saturate(125%); -webkit-backdrop-filter: blur(2px) saturate(125%);
}
.brands-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 90px 90px;
}
.brands-glass::after { padding: 2px; background: linear-gradient(130deg, #ffffffce, #eff2cb7a 15%, #b9d9ea99 26%, #ffffff44 42%, #ffffff22 68%, #c3d9ebbb 90%, #ffffffdd); }
/* Two panes, so the logos get the warp without the fog. Order in the panel:
   frosted glass (0) -> logos (1) -> a pane that only bends light (2). The top
   one carries no blur and no tint, so the logos stay crisp and full strength
   while the leaves underneath keep the frosted treatment. */
.brands .marquee { position: relative; z-index: 1; }
.brands-lens { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
html.has-liquid .brands-lens.lens-ready { backdrop-filter: var(--marquee-lens); -webkit-backdrop-filter: var(--marquee-lens); }
/* Slightly under full strength, so the logos read as being IN the glass. */
.brands .marquee-track img { height: 46px; opacity: .8; filter: grayscale(10%) brightness(1.04); }
@media (max-width: 760px) {
  .brands { padding: 40px 16px 44px; }
  .brands-panel { padding: 18px 0; }
  .brands .marquee-track img { height: 34px; }
  .brands-leaf { width: 170px; }
}

/* reviews-v9.16: three flowing columns instead of a rigid 3x2 grid, so a tall card
   rises into the gap above it. Cards keep their own height: stretching them left
   uneven gaps inside, which looked worse than a slightly ragged bottom edge. */
.reviews-col { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 991px) {
  .reviews-col { display: contents; }
}