/* one typeface across the whole site: Lexend (sans-serif, close to Balgin), self-hosted, OFL licence,
   with the Romanian letters (ă ș ț in the latin-ext file). No serif anywhere. */
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/lexend-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/lexend-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --bg: #fbf9f5;
  --card: #ffffff;
  --sage: #7b9e89;
  --sage-deep: #5f8170; /* hover / text on cream, keeps AA contrast */
  --sage-soft: #e7efe9;
  --rose: #dda5a5;
  --rose-soft: #f6e6e4;
  --ink: #2d3748;
  --muted: #64748b;
  --line: rgba(123, 158, 137, 0.2);

  --sans: 'Lexend Variable', system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 12px;
  --r-md: 16px;
  --shadow: 0 12px 32px -8px rgba(45, 55, 72, 0.05);
  --measure: 42rem; /* max-w-2xl: comfortable reading width */
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  /* every page except the landing (which has its own moving gradient): the same mood at the top,
     sage in the corners and a faint rose glow, fading into the plain cream where the reading starts */
  background-image:
    radial-gradient(38% 52% at 0% 0%, rgba(123, 158, 137, 0.42) 0%, transparent 70%),
    radial-gradient(34% 46% at 100% 4%, rgba(123, 158, 137, 0.34) 0%, transparent 70%),
    radial-gradient(30% 34% at 62% 20%, rgba(221, 165, 165, 0.26) 0%, transparent 72%),
    linear-gradient(180deg, #f1f4ef 0%, var(--bg) 100%);
  background-size: 100% 760px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lexend has no italic and a faked slant looks poor: emphasis is shown with weight instead */
em,
i,
cite {
  font-style: normal;
  font-weight: 500;
}
h1,
h2,
h3 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  z-index: 100;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.btn-primary {
  background: var(--sage);
  color: #fff;
}
.btn-primary:hover {
  background: var(--sage-deep);
}
.btn-ghost {
  background: transparent;
  border-color: var(--sage);
  color: var(--sage-deep);
}
.btn-ghost:hover {
  background: var(--sage-soft);
}
.btn-sm {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
/* header button: a small arrow that nudges forward on hover */
.btn-arrow svg {
  width: 16px;
  height: 16px;
  margin-right: -2px;
  transition: transform 0.2s ease;
}
.btn-arrow:hover svg {
  transform: translateX(3px);
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
/* every page except the landing: a very soft gradient behind the whole page, wherever you scroll —
   sage in the corners, a hint of rose. A fixed layer, so scrolling repaints nothing. */
body:not(:has(.hero-full))::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 0% 100%, rgba(123, 158, 137, 0.2) 0%, transparent 70%),
    radial-gradient(40% 45% at 100% 55%, rgba(221, 165, 165, 0.16) 0%, transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(123, 158, 137, 0.14) 0%, transparent 70%),
    radial-gradient(35% 35% at 0% 45%, rgba(246, 230, 228, 0.5) 0%, transparent 70%);
}
/* narrow screens: the same top gradient, with wider shapes so the rose reads as a glow, not a streak */
@media (max-width: 560px) {
  body {
    background-image:
      radial-gradient(70% 40% at 0% 0%, rgba(123, 158, 137, 0.42) 0%, transparent 70%),
      radial-gradient(60% 34% at 100% 4%, rgba(123, 158, 137, 0.34) 0%, transparent 70%),
      radial-gradient(70% 28% at 65% 22%, rgba(221, 165, 165, 0.24) 0%, transparent 72%),
      linear-gradient(180deg, #f1f4ef 0%, var(--bg) 100%);
    background-size: 100% 680px;
  }
}
/* transparent at the top so the background gradient shows through, frosted once you scroll */
.site-header:not([data-scrolled='true']):not([data-open='true']) {
  background: transparent;
  backdrop-filter: none;
}
.site-header[data-scrolled='true'] {
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo svg {
  width: 20px;
  height: 33px;
  color: var(--ink);
  flex: none;
}
.logo-name {
  display: block;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.logo-role {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.2;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.nav a:hover {
  background: var(--sage-soft);
}
.nav a[aria-current='page'] {
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--sage-soft);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-btn svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 960px) {
  .nav,
  .header-cta .btn {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .site-header[data-open='true'] .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  /* compact list: light links, a small rounded highlight for the current page */
  .site-header[data-open='true'] .nav a {
    padding: 9px 14px;
    font-size: 15.5px;
    font-weight: 400;
    border-radius: 10px;
  }
  .site-header[data-open='true'] .nav a[aria-current='page'] {
    font-weight: 500;
  }
  .site-header[data-open='true'] .nav .nav-call {
    margin-top: 10px;
    padding: 10px 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--sage);
    color: #fff;
  }
}
@media (min-width: 961px) {
  .nav .nav-call {
    display: none;
  }
}

/* ---------- generic sections ---------- */
.section {
  padding-block: clamp(64px, 8vw, 96px);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 42px);
}
.section-head p {
  color: var(--muted);
  max-width: var(--measure);
  margin-top: 10px;
}
.text-link {
  color: var(--sage-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.section-head .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.text-link:hover {
  color: var(--ink);
}

/* page heading used on inner pages */
.page-head {
  padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 48px);
}
.page-head h1 {
  font-size: clamp(38px, 6vw, 64px);
  max-width: 18ch;
}
.page-head p {
  margin-top: 18px;
  font-size: 19px;
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------- hero (home: one centered message, full screen) ---------- */
.hero {
  padding-block: clamp(56px, 10vw, 120px) clamp(48px, 7vw, 80px);
}
.hero-full {
  position: relative;
  /* clip sideways only, so the shapes can fade softly under the header */
  overflow-x: clip;
  min-height: calc(100vh - 63px);
  min-height: calc(100svh - 63px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px 104px;
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.scroll-cue:hover {
  color: var(--sage-deep);
}
.scroll-cue svg {
  width: 22px;
  height: 22px;
  color: var(--sage);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg {
    animation: nudge 2s ease-in-out infinite;
  }
  @keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }
}
/* short screens (small phones, landscape laptops): tighten the hero so the cue stays visible */
@media (max-height: 820px) {
  .hero-full {
    padding-block: 16px 72px;
  }
  .scroll-cue {
    bottom: 12px;
  }
  .hero-full .hero-lead {
    margin-top: 10px;
    font-size: 16px;
  }
  .hero-full .hero-actions {
    margin-top: 22px;
  }
  .hero-full .topics-line {
    margin-top: 20px;
  }
}
/* page transitions (browsers that support them): soft fade by default */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
/* the header stays put while the page underneath changes */
.site-header {
  view-transition-name: site-header;
}
/* Acasă → Despre: the landing slides up and away, Despre rises in, like one continuous scroll */
html:active-view-transition-type(to-about)::view-transition-old(root) {
  animation: vt-up-out 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
html:active-view-transition-type(to-about)::view-transition-new(root) {
  animation: vt-up-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vt-up-out {
  to {
    transform: translateY(-14%);
    opacity: 0;
  }
}
@keyframes vt-up-in {
  from {
    transform: translateY(22%);
    opacity: 0;
  }
}
/* Despre → Acasă: the reverse, Despre slides down and the landing comes in from above */
html:active-view-transition-type(to-landing)::view-transition-old(root) {
  animation: vt-down-out 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
html:active-view-transition-type(to-landing)::view-transition-new(root) {
  animation: vt-down-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes vt-down-out {
  to {
    transform: translateY(14%);
    opacity: 0;
  }
}
@keyframes vt-down-in {
  from {
    transform: translateY(-22%);
    opacity: 0;
  }
}
.leaving-down main {
  animation: vt-down-out 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* same idea for browsers without view transitions */
.leaving main {
  animation: vt-up-out 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* landing background: a soft gradient in the palette (cream, light sage, light rose) that drifts slowly.
   Its box reaches up under the transparent header but stops at the bottom of the screen, so it never
   makes the page scrollable. The colours sit on an oversized layer that only moves (transform), so the
   animation stays cheap: nothing is repainted frame by frame. */
/* the grey text on the landing is a step darker so it stays readable (≥ 4.5:1) on the tinted background */
.hero-full {
  --muted: #48546a;
}
.hero-bg {
  position: absolute;
  inset: -200px 0 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  background: var(--bg);
}
/* colour with a job: warm rose glows behind the green things (the brain, "soluție") so they stand out,
   and the sage tints stay at the edges and corners, where nothing green sits */
.hero-bg-layer {
  position: absolute;
  inset: -12%;
  /* positions are in the oversized layer: the visible screen spans about 10–90% across and 20–90% down */
  background:
    radial-gradient(22% 26% at 50% 48%, rgba(221, 165, 165, 0.5) 0%, rgba(246, 230, 228, 0.6) 50%, transparent 78%),
    radial-gradient(13% 15% at 68% 49%, rgba(246, 230, 228, 0.95) 0%, transparent 72%),
    radial-gradient(26% 32% at 10% 22%, rgba(123, 158, 137, 0.62) 0%, transparent 70%),
    radial-gradient(22% 28% at 90% 22%, rgba(123, 158, 137, 0.5) 0%, transparent 70%),
    radial-gradient(28% 30% at 11% 86%, rgba(123, 158, 137, 0.66) 0%, transparent 72%),
    radial-gradient(26% 30% at 89% 86%, rgba(123, 158, 137, 0.6) 0%, transparent 72%),
    linear-gradient(180deg, #f3f5f0 0%, var(--bg) 40%, #f8f2ee 100%);
  will-change: transform;
}
/* phones: the brain sits near the top, so the rose glow moves up with it; the green stays on the sides */
@media (max-width: 560px) {
  .hero-bg-layer {
    background:
      radial-gradient(40% 16% at 50% 37%, rgba(221, 165, 165, 0.5) 0%, rgba(246, 230, 228, 0.6) 50%, transparent 78%),
      radial-gradient(34% 22% at 10% 22%, rgba(123, 158, 137, 0.6) 0%, transparent 70%),
      radial-gradient(30% 20% at 90% 24%, rgba(123, 158, 137, 0.5) 0%, transparent 70%),
      radial-gradient(40% 20% at 11% 85%, rgba(123, 158, 137, 0.62) 0%, transparent 72%),
      radial-gradient(38% 20% at 89% 86%, rgba(123, 158, 137, 0.58) 0%, transparent 72%),
      linear-gradient(180deg, #f3f5f0 0%, var(--bg) 40%, #f8f2ee 100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg-layer {
    animation: hero-bg-drift 22s ease-in-out infinite alternate;
  }
  /* a slow breathing drift, small enough that the rose stays behind the brain */
  @keyframes hero-bg-drift {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-1.5%, 1%) scale(1.04);
    }
    100% {
      transform: translate(1.5%, -1%) scale(1.02);
    }
  }
}
/* the title on both sides of the brain:  De la simptom  [brain]  la soluție. */
.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'left brain right';
  align-items: center;
  column-gap: clamp(6px, 1.4vw, 20px);
  width: 100%;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* the title: "simptom" bold in ink, "soluție" bolder in sage, the small words light and quiet */
.stage-word {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: clamp(18px, 3.6vw, 54px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
/* the small connecting words sit just above the big ones, light and quiet */
.stage-word small {
  display: block;
  margin-bottom: 0.15em;
  font-size: max(0.4em, 15px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.stage-left {
  grid-area: left;
  justify-self: end;
  text-align: right;
}
.stage-right {
  grid-area: right;
  justify-self: start;
  text-align: left;
}
/* the highlighted word: bolder, in sage */
.stage-right em {
  font-style: normal;
  font-weight: 700;
  color: var(--sage-deep); /* fallback where text gradients are not supported */
}
/* "soluție." in a gradient from the palette: deep sage → sage → deep rose, drifting slowly */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stage-right em {
    background: linear-gradient(100deg, var(--sage-deep) 0%, var(--sage) 35%, #b9757a 70%, var(--sage-deep) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-right: 0.04em; /* the clip would shave the last letter's edge */
  }
  @media (prefers-reduced-motion: no-preference) {
    .stage-right em {
      animation: solutie-drift 9s ease-in-out infinite alternate;
    }
    @keyframes solutie-drift {
      to {
        background-position: 100% 50%;
      }
    }
  }
}
/* interactive brain in the middle: it takes the height the rest of the landing leaves free */
.hero-brain {
  grid-area: brain;
  display: block;
  width: min(560px, 40vw);
  height: clamp(120px, calc(100vh - 480px), 500px);
  height: clamp(120px, calc(100svh - 480px), 500px);
  /* touch: hold and drag turns the brain, a quick swipe still opens Despre (handled in JS) */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (max-width: 760px) {
  /* phones: the brain keeps the proportions of its drawing, so no empty bands around it */
  .hero-brain {
    width: 46vw;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 340px) {
  .hero-brain {
    width: 40vw;
  }
  .hero-full p.hero-lead {
    font-size: 13.5px;
  }
  .hero-full ul.topics-line {
    font-size: 13.5px;
  }
}
/* landing: the paragraph and the two buttons share one width; both buttons the same size */
.hero-full .hero-copy {
  --copy-w: min(100%, 600px);
}
.hero-full .hero-lead {
  width: var(--copy-w);
  max-width: none;
  text-wrap: pretty;
}
.hero-full .hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: var(--copy-w);
}
.hero-full .hero-actions .btn {
  justify-content: center;
}
@media (max-width: 560px) {
  .hero-full .hero-actions {
    grid-template-columns: 1fr;
  }
}
/* laptops (wide but short): give the brain most of the height, tighten the text under it */
@media (min-width: 761px) and (max-height: 1000px) {
  .hero-full {
    padding-block: 4px 64px;
  }
  .hero-full .hero-brain {
    width: min(620px, 44vw);
    height: clamp(200px, calc(100vh - 360px), 520px);
    height: clamp(200px, calc(100svh - 360px), 520px);
  }
  .hero-full .hero-sub {
    margin-top: 6px;
    font-size: clamp(17px, 1.6vw, 22px);
  }
  .hero-full .hero-lead {
    margin-top: 8px;
    font-size: 15.5px;
    line-height: 1.55;
  }
  .hero-full .hero-actions {
    margin-top: 16px;
  }
  .hero-full .hero-actions .btn {
    min-height: 44px;
  }
  .hero-full .topics-line {
    margin-top: 14px;
    line-height: 1.4;
  }
  .scroll-cue {
    bottom: 6px;
  }
}
/* phones: a big brain on top, the title under it on one centred line, read as a sentence:
     De la simptom la soluție.          */
@media (max-width: 560px) {
  /* the brain spans the whole row; the two halves of the title sit snugly in the middle columns,
     the outer 1fr columns soak up the brain's extra width so nothing stretches between the words */
  .hero-full .hero-stage {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
      'brain brain brain brain'
      '. left right .';
    align-items: baseline;
    column-gap: 0;
    row-gap: 2px;
  }
  .hero-full .hero-brain {
    justify-self: center;
  }
  .hero-full .stage-right {
    margin-left: 0.3em;
  }
  .hero-full .stage-left,
  .hero-full .stage-right {
    justify-self: auto;
    text-align: left;
  }
  .hero-full .hero-brain {
    width: min(80vw, 44vh);
    height: auto;
    aspect-ratio: 16 / 11;
    margin-bottom: 6px;
  }
  .hero-full .stage-word {
    font-size: clamp(24px, 8vw, 36px);
  }
  .hero-full .stage-word small {
    display: inline;
    margin: 0 0.32em 0 0;
    font-size: 0.6em;
  }
}
/* phones: start right under the header and spread the rest out, buttons the same width */
@media (max-width: 560px) {
  .hero-full {
    justify-content: flex-start;
    padding-block: clamp(6px, 2vh, 24px) 84px;
  }
  .hero-full .hero-sub {
    margin-top: clamp(12px, 2.6vh, 28px);
  }
  .hero-full .hero-lead {
    margin-top: clamp(8px, 1.4vh, 14px);
  }
  .hero-full .hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: clamp(16px, 3.2vh, 32px);
  }
  .hero-full .hero-actions .btn {
    justify-content: center;
  }
  .hero-full .topics-line {
    margin-top: clamp(14px, 2.8vh, 30px);
    font-size: 16px;
    line-height: 1.75;
  }
}
/* narrow phones: a touch smaller and closer together so the topics still sit on two lines */
@media (max-width: 400px) {
  .hero-full .topics-line {
    font-size: 15px;
  }
  .hero-full .topics-line li {
    margin-inline: 0.32em;
  }
}
/* small, short phones: tighter text so the whole landing still fits one screen */
@media (max-width: 560px) and (max-height: 800px) {
  .hero-full .hero-brain {
    width: min(72vw, 33vh);
  }
  .hero-full .hero-sub {
    font-size: 15.5px;
  }
  .hero-full .hero-lead {
    font-size: 15px;
  }
  .hero-full {
    padding-bottom: 76px;
  }
  .hero-full .hero-actions {
    margin-top: 16px;
  }
  .hero-full .topics-line {
    margin-top: 12px;
  }
}
@media (max-width: 560px) and (max-height: 700px) {
  .hero-full .hero-brain {
    width: min(60vw, 27vh);
  }
  .hero-full {
    padding-bottom: 66px;
  }
  .hero-full .scroll-cue {
    padding-top: 2px;
  }
  .hero-full .hero-sub {
    margin-top: 10px;
  }
  .hero-full .hero-lead {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .hero-full .hero-actions {
    margin-top: 16px;
    gap: 8px;
  }
  .hero-full .hero-actions .btn {
    min-height: 42px;
  }
  .hero-full .topics-line {
    margin-top: 12px;
  }
}
@media (pointer: fine) {
  .hero-brain {
    cursor: grab;
  }
  .hero-brain.is-dragging {
    cursor: grabbing;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-brain {
    animation: brain-in 1.4s ease both;
  }
  @keyframes brain-in {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
  }
  /* back from Despre: the landing arrives already in place, the page transition is the only motion */
  .no-intro .hero-brain,
  .no-intro .hero-center > * {
    animation: none;
  }
}
.hero-full .hero-center,
.hero-full .scroll-cue {
  z-index: 1;
}
.hero-full .hero-center {
  position: relative;
}
.topics-line {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 2.95cqi, 18px); /* grows with the column, as long as all topics fit on one line */
  line-height: 1.7;
  color: var(--muted);
  /* narrow columns: two even rows, never one topic alone */
  text-align: center;
  text-wrap: balance;
}
.topics-line li {
  display: inline-block;
  margin: 0 0.45em;
  white-space: nowrap;
}
/* wide enough: everything on one line */
@container (min-width: 520px) {
  .topics-line {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.9em;
  }
  .topics-line li {
    margin: 0;
  }
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  container-type: inline-size; /* the topics line sizes itself to this column */
}
.hero-sub {
  margin-top: clamp(14px, 2.2vh, 24px);
  font-family: var(--sans);
  font-size: clamp(17px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--sage-deep);
}
.hero-lead {
  margin-top: 14px;
  max-width: 54ch;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--muted);
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-center > * {
    animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-center > :nth-child(2) { animation-delay: 0.08s; }
  .hero-center > :nth-child(3) { animation-delay: 0.16s; }
  .hero-center > :nth-child(4) { animation-delay: 0.24s; }
  .hero-center > :nth-child(5) { animation-delay: 0.32s; }
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

.quote-card {
  position: relative;
  max-width: 760px;
  margin: 28px auto 0;
  padding: clamp(44px, 6vw, 60px) clamp(22px, 6vw, 64px) clamp(30px, 4vw, 40px);
  background: var(--sage-soft);
  border: 1px solid var(--sage);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
/* small badge sitting on the card's top edge */
.quote-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rose-soft);
  border: 1px solid var(--rose);
  box-shadow: 0 0 0 4px var(--bg);
  color: #a85a5a;
}
.quote-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  transform: rotate(180deg); /* opening quote */
}
.quote-carousel .quote-card {
  margin-top: 8px;
}
/* reviews carousel: slides share one grid cell, so the card keeps the tallest height */
.quote-stage {
  display: grid;
  text-align: center;
}
/* desktop: the reviews look exactly like the "Cred cu tărie" quote on Despre — sage card,
   green quote badge on the left edge, green text aligned left */
@media (min-width: 861px) {
  .quote-carousel .quote-card {
    max-width: 760px;
    margin: 8px auto 0;
    padding: 22px 30px 22px 46px;
    box-shadow: none;
  }
  .quote-carousel .quote-card .quote-icon {
    top: 50%;
    left: 0;
    width: 46px;
    height: 46px;
    background: var(--sage-soft);
    border-color: var(--sage);
    color: var(--sage-deep);
    transition: top 0.45s ease;
  }
  .quote-carousel .quote-card .quote-icon svg {
    width: 18px;
    height: 18px;
  }
  .quote-carousel .quote-stage {
    text-align: left;
  }
  .quote-carousel .quote-slide {
    align-items: flex-start;
  }
  .quote-carousel .quote-slide blockquote {
    color: var(--sage-deep);
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
  }
}
/* the stage takes the height of the review on show (set from JS), so short reviews leave no gap */
.quote-stage {
  transition: height 0.45s ease;
}
.quote-slide {
  grid-area: 1 / 1;
  align-self: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
.quote-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease 0.1s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.quote-slide blockquote {
  margin: 0;
  max-width: 60ch;
  font-family: var(--sans);
  font-size: clamp(16.5px, 1.5vw, 18px);
  line-height: 1.75;
  text-wrap: pretty;
}
.quote-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 22px;
}
.quote-controls[hidden] {
  display: none;
}
.quote-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(123, 158, 137, 0.35);
  background: transparent;
  color: var(--sage-deep);
  cursor: pointer;
  transition: background-color 0.15s;
}
.quote-arrow:hover {
  background: var(--sage-soft);
}
.quote-arrow svg {
  width: 18px;
  height: 18px;
}
.quote-dots {
  display: flex;
  align-items: center;
}
/* 24px hit area around a small pill */
.quote-dots button {
  width: 22px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s;
}
.quote-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(123, 158, 137, 0.3);
  transition: width 0.3s, background-color 0.3s;
}
.quote-dots button:hover::before {
  background: rgba(123, 158, 137, 0.5);
}
.quote-dots button[aria-current='true'] {
  width: 36px;
}
.quote-dots button[aria-current='true']::before {
  width: 24px;
  background: var(--sage);
}
@media (prefers-reduced-motion: reduce) {
  .quote-slide,
  .quote-slide.is-active,
  .quote-dots button,
  .quote-dots button::before {
    transition: none;
  }
}

/* The arch: the one memorable shape on the site */
.arch {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--r-md) var(--r-md);
  overflow: hidden;
  background: var(--sage-soft);
  box-shadow: 0 0 0 10px var(--card), 0 0 0 11px var(--line);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ---------- article cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /* the cards cover most of the Articole page, so they carry the gradient themselves:
     white at the top, a breath of sage in the middle, light rose in the lower corner */
  --muted: #4a5568; /* a shade darker so grey text keeps ≥ 4.5:1 on the tinted part */
  background: linear-gradient(165deg, #ffffff 0%, #fbfcfa 38%, #eaf2ec 66%, #f6e5e2 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.2s;
}
.card:hover {
  border-color: var(--sage);
  box-shadow: 0 18px 40px -14px rgba(45, 55, 72, 0.18);
}
.card:hover h3 {
  color: var(--sage-deep);
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .card:hover {
    transform: translateY(-4px);
  }
  /* pressed */
  .card:active {
    transform: translateY(-1px) scale(0.985);
    transition-duration: 0.1s;
  }
}
/* small round arrow in the image corner */
.card-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sage-deep);
  box-shadow: 0 4px 14px -4px rgba(45, 55, 72, 0.25);
  overflow: hidden;
  transition: background-color 0.25s, color 0.25s;
}
.card-arrow svg {
  width: 17px;
  height: 17px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card:hover .card-arrow,
.card:focus-visible .card-arrow {
  background: var(--sage);
  color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  /* the arrow slips out the top-right corner and comes back in from bottom-left */
  .card:hover .card-arrow svg,
  .card:focus-visible .card-arrow svg {
    animation: arrow-out 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes arrow-out {
    0% { transform: translate(0, 0); }
    45% { transform: translate(140%, -140%); }
    46% { transform: translate(-140%, 140%); }
    100% { transform: translate(0, 0); }
  }
  .card:active .card-arrow svg {
    transform: translate(2px, -2px);
  }
}
.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--sage-soft);
  overflow: hidden;
}
.thumb img {
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .thumb img {
  transform: scale(1.03);
}
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--sage-soft), var(--rose-soft));
  color: var(--sage);
}
.thumb-fallback svg {
  width: 40px;
  height: 66px;
  opacity: 0.7;
}
.card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.15s;
}
.card .meta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--muted);
}
.card .meta svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sage);
}

/* Articole page: newest article shown large while the list is unfiltered */
/* badge + bigger title on every screen size */
.article-list:not(.is-filtered) > .card:first-child .card-body::before {
  content: 'Cel mai nou';
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--rose-soft);
  color: #8a4b4b;
  font-size: 13px;
  font-weight: 600;
}
.article-list:not(.is-filtered) > .card:first-child h3 {
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.22;
}
@media (min-width: 761px) {
  .article-list:not(.is-filtered) > .card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  /* its height follows the screen, so the whole card fits in the first view, even zoomed in */
  .article-list:not(.is-filtered) > .card:first-child .thumb {
    flex: 0 0 56%;
    aspect-ratio: auto;
    align-self: stretch; /* the image always fills the card's full height, no empty band under it */
    min-height: clamp(220px, calc(100vh - 360px), 360px);
    min-height: clamp(220px, calc(100svh - 360px), 360px);
  }
  .article-list:not(.is-filtered) > .card:first-child .card-body {
    justify-content: center;
    padding: clamp(20px, 3vh, 36px) clamp(24px, 3.5vw, 44px);
    gap: 14px;
  }
  .article-list:not(.is-filtered) > .card:first-child .meta {
    margin-top: 0;
  }
}

.page-head-compact {
  padding-block: clamp(12px, 2.2vh, 26px) clamp(12px, 1.6vh, 18px);
}
.page-head-compact h1 {
  font-size: clamp(30px, 3.8vw, 42px);
}
.page-head-compact p {
  margin-top: 4px;
  font-size: clamp(15px, 1.3vw, 16.5px);
}
.article-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 560px) {
  /* phones: keep the newest article in the first screen */
  .page-head-compact p {
    display: none;
  }
  .article-list:not(.is-filtered) > .card:first-child .thumb {
    aspect-ratio: 16 / 8;
  }
  /* phones: one swipeable row of topics instead of several lines */
  .article-tools .topic-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .article-tools .topic-filters::-webkit-scrollbar {
    display: none;
  }
  .article-tools .topic-filters button {
    flex: none;
  }
}
.search-row {
  display: flex;
  align-items: center;
  gap: 8px 20px;
}
.search-row .search {
  flex: 1 1 auto;
}
.results-count {
  flex: none;
}
.results-count {
  color: var(--muted);
  font-size: 14.5px;
}
.topic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topic-filters button {
  min-height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 14.5px var(--sans);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.topic-filters button:hover {
  border-color: var(--sage);
}
.topic-filters button[aria-pressed='true'] {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.topic-filters button[hidden] {
  display: none;
}

.search {
  width: 100%;
  max-width: 420px;
  min-height: 46px;
  padding: 0 18px 0 46px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 17px center / 19px;
  font: 16px var(--sans);
  color: var(--ink);
}
.search:focus {
  outline: none;
  border-color: var(--sage);
}
.empty {
  padding: 48px 0;
  color: var(--muted);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 40px;
}
.pagination[hidden] {
  display: none;
}
.pagination button {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 15px var(--sans);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--sage);
  color: var(--sage-deep);
}
.pagination button[aria-current='page'] {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.pagination svg {
  width: 17px;
  height: 17px;
}
.page-gap {
  padding: 0 4px;
  color: var(--muted);
}
@media (max-width: 480px) {
  /* phones: arrows only, so all the numbers fit on one line */
  .page-step span {
    display: none;
  }
  .pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
  }
}

/* ---------- article page ---------- */
.article-head {
  padding-block: clamp(40px, 6vw, 72px) 32px;
  max-width: 820px;
}
.article-head h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
}
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.back:hover {
  color: var(--sage-deep);
}
.article-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  color: var(--muted);
  font-size: 15px;
}
.article-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.article-author {
  color: var(--ink);
  font-weight: 500;
}
.article-author svg {
  width: 15px;
  height: 25px;
  color: var(--ink);
}
.article-time svg {
  width: 17px;
  height: 17px;
  color: var(--sage);
}
.article-cover img {
  view-transition-name: article-cover;
}
.article-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 1000px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sage-soft);
}
.article-cover img {
  object-fit: cover;
}
::view-transition-group(article-cover) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* article body: light weight for long reading */
.prose {
  overflow-wrap: break-word;
  max-width: 68ch;
  padding-block: 48px 24px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
}
.prose strong,
.prose b {
  font-weight: 500;
}
/* share row under the article */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  max-width: 68ch;
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* the small copy next to the reading time: icons only, after a thin divider */
.article-meta .share-top {
  margin: 0;
  padding: 0 0 0 22px;
  border: 0;
  border-left: 1px solid var(--line);
  gap: 0;
}
/* very narrow phones: the icons drop to their own line, so no divider in front of them */
@media (max-width: 380px) {
  .article-meta .share-top {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}
/* the "Link copiat" bubble opens to the left so it never leaves the screen */
.share-top [data-share='copy'] .share-copied {
  left: auto;
  right: 0;
  translate: 0 4px;
}
.share-top [data-share='copy'].is-copied .share-copied {
  translate: 0 0;
}
.share-top .share-btns {
  gap: 8px;
}
.share-top .share-btn {
  width: 36px;
  height: 36px;
}
.share-top .share-btn svg {
  width: 16px;
  height: 16px;
}
.share-label {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--sage-deep);
}
.share-btns {
  display: flex;
  gap: 10px;
}
.share-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rose);
  background: var(--rose-soft);
  color: var(--sage-deep);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.share-btn svg {
  width: 19px;
  height: 19px;
}
.share-btn:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
  transform: translateY(-2px);
}
.share-btn:active {
  transform: scale(0.94);
}
.share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
.share-btn.is-copied .share-copied {
  opacity: 1;
  translate: -50% 0;
}
/* a plain text page (Confidențialitate): the text starts right under the title */
.prose-plain {
  padding-top: 8px;
}
.prose-plain > h2:first-child {
  margin-top: 0;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: 1.45em;
  line-height: 1.25;
  margin-top: 2em;
}
.prose h3 {
  font-size: 1.2em;
  margin-top: 1.6em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li::marker {
  color: var(--sage);
}
.prose blockquote {
  margin-inline: 0;
  padding: 18px 24px;
  background: var(--rose-soft);
  border-radius: var(--r-sm);
}
.prose a {
  color: var(--sage-deep);
  text-underline-offset: 3px;
}
.prose strong {
  font-weight: 600;
}

.cta-box {
  margin-block: 40px 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-md);
  background: var(--sage);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.cta-box h2 {
  font-size: clamp(26px, 3vw, 34px);
}
.cta-box p {
  margin-top: 10px;
  opacity: 0.92;
  max-width: 52ch;
}
.cta-box .btn-primary {
  background: #fff;
  color: var(--sage-deep);
}
.cta-box .btn-primary:hover {
  background: var(--bg);
}
.cta-box .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.cta-box .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}
.cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* call + WhatsApp side by side, next to the booking button (on its own row on phones) */
.contact-pair {
  display: flex;
  gap: 10px;
}
@media (max-width: 560px) {
  .contact-pair {
    flex-basis: 100%;
    justify-content: center;
  }
  .contact-pair .btn {
    flex: 1 1 0;
    justify-content: center;
  }
  /* the booking button spans the same width as the pair under it */
  .about-intro .hero-actions > .btn-primary,
  .cta-actions > .btn-primary {
    flex-basis: 100%;
    justify-content: center;
  }
  .cta-actions .contact-pair {
    justify-content: flex-start;
  }
  main:has(.about-hero) .cta-actions .contact-pair {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .cta-box {
    grid-template-columns: 1fr;
  }
}

/* ---------- about ---------- */
/* the first screen of Despre: photo, intro and the "Cred cu tărie" quote, all in one view on laptops and desktops */
.about-hero {
  padding-block: clamp(20px, 3.5vh, 44px) clamp(40px, 6vw, 72px);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.about-photo .arch {
  max-width: 420px;
}
.about-intro {
  max-width: var(--measure);
}
.about-intro h1 {
  margin-top: 0;
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -0.02em;
}
.lead {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
}
.about-intro > p:not(.pill):not(.lead) {
  margin-top: 16px;
  color: var(--muted);
}
/* the belief, as a small sage card with the rose quote badge on its left edge */
.about-quote {
  position: relative;
  margin: 22px 0 0 26px;
  padding: 18px 22px 18px 40px;
  background: var(--sage-soft);
  border: 1px solid var(--sage);
  border-radius: var(--r-md);
}
.about-quote .quote-icon {
  top: 50%;
  left: 0;
  width: 46px;
  height: 46px;
  /* green here, to match the quote (the reviews keep the rose badge) */
  background: var(--sage-soft);
  border-color: var(--sage);
  color: var(--sage-deep);
}
.about-quote .quote-icon svg {
  width: 18px;
  height: 18px;
}
.about-quote blockquote {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--sage-deep);
  text-wrap: pretty;
}
/* the three labels sit on the photo's bottom edge, half on it and half below */
.about-photo {
  position: relative;
  padding-bottom: 34px; /* room for the lower half of the labels */
}
.about-photo .about-tags {
  position: absolute;
  left: 50%;
  bottom: 34px;
  translate: -50% 50%;
  width: max-content;
  max-width: min(100%, 380px);
  justify-content: center;
  gap: 8px;
  z-index: 1;
}
.about-photo .about-tags li {
  padding: 7px 14px;
  background: var(--card);
  color: var(--sage-deep);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px -10px rgba(45, 55, 72, 0.28);
  font-size: 14px;
}
.about-intro .hero-actions {
  margin-top: 24px;
  justify-content: flex-start;
}
/* laptops and desktops: photo, intro and quote fit the first screen, close under the header;
   the photo is sized by the screen's height */
@media (min-width: 861px) {
  .about-hero {
    padding-top: clamp(16px, 3vh, 36px);
  }
  .about-photo .arch {
    width: min(420px, calc((100svh - 63px - 100px) * 0.8));
    max-width: 100%;
    margin-inline: auto;
  }
}
/* short laptop screens: everything a step tighter */
@media (min-width: 861px) and (max-height: 860px) {
  .about-intro h1 {
    font-size: clamp(36px, 4.2vw, 46px);
  }
  .lead {
    margin-top: 10px;
    font-size: 19px;
  }
  .about-quote {
    margin-top: 16px;
    padding-block: 14px;
  }
  .about-quote blockquote {
    font-size: 18px;
  }
  .about-intro > p:not(.pill):not(.lead) {
    margin-top: 12px;
    font-size: 16px;
  }
  .about-intro .hero-actions {
    margin-top: 18px;
  }
}
@media (max-width: 860px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
  /* photo above the text: the intro is centred, the quote badge moves to the card's top edge */
  .about-intro {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  .about-quote {
    margin: 34px 0 0;
    padding: 30px 22px 18px;
  }
  .about-quote .quote-icon {
    top: 0;
    left: 50%;
  }
  .about-quote blockquote {
    text-wrap: balance;
  }
  .about-intro .hero-actions {
    justify-content: center;
  }
  .about-photo .arch {
    max-width: 280px;
    margin-inline: auto;
  }
}
/* Despre on phones and narrow tablets: the whole page is centred, section by section */
@media (max-width: 860px) {
  .about-how-text {
    text-align: center;
    text-wrap: balance;
  }
  .quote-carousel .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-wrap: balance;
  }
  main:has(.about-hero) .cta-box {
    justify-items: center;
    text-align: center;
  }
  main:has(.about-hero) .cta-box p {
    margin-inline: auto;
    text-wrap: balance;
  }
  main:has(.about-hero) .cta-actions {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .revealed .about-photo .arch {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }
  /* the labels settle onto the photo once it has risen */
  .revealed .about-photo .about-tags li {
    animation: fade-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both;
  }
  .revealed .about-photo .about-tags li:nth-child(2) { animation-delay: 0.85s; }
  .revealed .about-photo .about-tags li:nth-child(3) { animation-delay: 0.95s; }
  .revealed .about-intro > * {
    animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .about-intro > :nth-child(2) { animation-delay: 0.08s; }
  .about-intro > :nth-child(3) { animation-delay: 0.16s; }
  .about-intro > :nth-child(4) { animation-delay: 0.24s; }
  .about-intro > :nth-child(5) { animation-delay: 0.32s; }
  .about-intro > :nth-child(6) { animation-delay: 0.4s; }
  .about-intro > :nth-child(7) { animation-delay: 0.48s; }
  @keyframes rise {
    from {
      clip-path: inset(100% 0 0 0 round 999px 999px 16px 16px);
    }
    to {
      clip-path: inset(0 0 0 0 round 999px 999px 16px 16px);
    }
  }
}

.about-how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.about-how-text h2 {
  font-size: clamp(30px, 4vw, 42px);
}
.about-how-text p {
  margin-top: 16px;
  color: var(--muted);
}
/* the three values: short rows with a thin line between them, not tall cards */
.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.value {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.value:first-child {
  padding-top: 0;
}
.value:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.value-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.value-icon svg {
  width: 19px;
  height: 19px;
}
.value h3 {
  font-size: 18px;
  font-weight: 600;
}
.value p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .about-how-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* centred page, but the value rows keep their icon on the left, in a centred block */
  .values {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    text-align: left;
  }
}
/* "În esență" closes the section as a sage card, instead of a separate white band */
.essence-card {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--sage);
  border-radius: var(--r-md);
  background: var(--sage-soft);
  text-align: center;
}
.essence-card h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.essence-card p {
  max-width: 52ch;
  margin: 12px auto 0;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  text-wrap: balance;
}

/* ---------- services ---------- */
/* an accordion: every service is a closed card that opens to its details (native <details>) */
.services {
  display: grid;
  gap: 12px;
}
.service {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  scroll-margin-top: 80px;
  transition: border-color 0.2s;
}
.service[open] {
  border-color: var(--sage);
}
.service summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 22px) clamp(16px, 3vw, 28px);
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
}
.service summary::-webkit-details-marker {
  display: none;
}
.service summary:hover .svc-toggle {
  background: var(--sage);
  color: #fff;
}
.svc-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.svc-icon svg {
  width: 22px;
  height: 22px;
}
.svc-head {
  flex: 1;
  min-width: 0;
}
.service h2 {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.3;
}
.svc-summary {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.svc-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
  transition: background-color 0.2s, color 0.2s, transform 0.3s;
}
.svc-toggle svg {
  width: 18px;
  height: 18px;
}
.service[open] .svc-toggle {
  transform: rotate(180deg);
}
.service-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(20px, 4vw, 56px);
  padding: 4px clamp(16px, 3vw, 28px) clamp(20px, 3vw, 28px);
}
.service .intro {
  color: var(--muted);
}
/* the longer paragraphs inside a card are justified; hyphenation keeps the gaps between words even */
.service .intro,
.service .note {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.service .tags {
  margin-top: 14px;
}
.service .checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.service .checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
/* each point gets its own icon in a small sage circle */
.service .checklist .item-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.service .checklist .item-icon svg {
  width: 17px;
  height: 17px;
}
.service .note {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--rose-soft);
  font-size: 15.5px;
}
/* smooth opening where the browser can animate to auto height */
@supports (interpolate-size: allow-keywords) {
  .services {
    interpolate-size: allow-keywords;
  }
  .service::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .service[open]::details-content {
    height: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .service::details-content {
      transition: none;
    }
  }
}
@media (max-width: 860px) {
  .service-body {
    grid-template-columns: 1fr;
  }
}
/* phones: compact cards (smaller icons, the one-liner capped at two lines, a tighter list inside) */
@media (max-width: 560px) {
  .service summary {
    gap: 10px;
    padding: 14px;
  }
  .svc-icon {
    width: 34px;
    height: 34px;
    align-self: flex-start;
  }
  .svc-icon svg {
    width: 17px;
    height: 17px;
  }
  .service h2 {
    font-size: 17px;
  }
  .svc-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .svc-toggle {
    width: 30px;
    height: 30px;
  }
  .service-body {
    gap: 16px;
    padding: 0 14px 16px;
  }
  .service .intro {
    font-size: 15.5px;
    line-height: 1.6;
  }
  .service .checklist {
    gap: 6px;
  }
  .service .checklist li {
    gap: 10px;
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.5;
  }
  .service .checklist .item-icon {
    width: 28px;
    height: 28px;
    margin-top: -2px;
  }
  .service .checklist .item-icon svg {
    width: 15px;
    height: 15px;
  }
  .service .note {
    padding: 12px 14px;
    font-size: 14.5px;
  }
  .svc-summary {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}
.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.phone-big {
  font-family: var(--sans);
  font-size: clamp(34px, 4.4vw, 46px);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.phone-big:hover {
  color: var(--sage-deep);
}
.contact-card .label {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 6px;
}
.contact-card .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact-card .actions .btn {
  justify-content: center;
}
.contact-card .pill {
  align-self: flex-start;
}
.contact-card address {
  font-style: normal;
  font-size: 18px;
}
.map {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  min-height: 420px;
  background: var(--sage-soft);
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .contact-card .actions {
    grid-template-columns: 1fr;
  }
}

/* ---------- pills, tags, meta ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--sage-deep);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.pill svg {
  width: 16px;
  height: 16px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--rose-soft);
  color: #8a4b4b;
  font-size: 13.5px;
  font-weight: 500;
}
/* under the dots: one centred line, the lock sitting inline with the words when it wraps */
.quote-carousel .trust-note {
  display: block;
  margin-top: 14px;
  text-align: center;
  text-wrap: balance;
}
.quote-carousel .trust-note svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
}
.trust-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14.5px;
}
.trust-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sage);
}

/* ---------- booking form ---------- */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 4vw, 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  scroll-margin-top: 96px;
}
.booking-form h2 {
  font-size: clamp(26px, 3vw, 34px);
}
.form-lead {
  margin-top: -8px;
  color: var(--muted);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 15px;
  font-weight: 600;
}
fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  gap: 10px;
}
.field legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}
.field legend span,
.field label span {
  color: var(--muted);
  font-weight: 400;
}
.field input:not([type='checkbox']),
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font: 16px/1.5 var(--sans);
  color: var(--ink);
  transition: border-color 0.15s, background-color 0.15s;
}
/* availability: equal tiles — six days in a row (two rows of three on phones), three times of day with icons */
.choices {
  display: grid;
  gap: 8px;
}
.choices-days {
  grid-template-columns: repeat(6, 1fr);
}
.choices-time {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .choices-days {
    grid-template-columns: repeat(3, 1fr);
  }
}
.choice {
  position: relative;
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 8px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.choice span svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--sage);
}
.choices-time .choice span {
  min-height: 52px;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}
.choice:hover span {
  border-color: var(--sage);
}
.choice:active span {
  transform: scale(0.97);
}
.choice input:checked + span {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.choice input:checked + span svg {
  color: #fff;
}
.choice input:focus-visible + span {
  outline: 2.5px solid var(--sage-deep);
  outline-offset: 2px;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field input:not([type='checkbox']):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 4px var(--sage-soft);
}
/* send button across the form, the privacy note centred under it */
.booking-form .btn {
  align-self: stretch;
  justify-content: center;
  min-height: 52px;
  margin-top: 4px;
}
.booking-form .trust-note {
  display: block;
  margin-top: -6px;
  text-align: center;
  font-size: 13.5px;
  text-wrap: balance;
}
.booking-form .trust-note svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -3px;
}

/* the map inside the contact card: an inset rounded map, then a row with a pin, the address and an "open" button */
.map-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.contact-card .map-in-card {
  flex: 1;
  min-height: 200px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.contact-card .map-in-card iframe {
  min-height: 200px;
}
.map-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px 2px;
}
.map-meta > div {
  flex: 1;
  min-width: 0;
}
.map-pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: #a85a5a;
}
.map-pin svg {
  width: 18px;
  height: 18px;
}
.map-title {
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.contact-card .map-meta address {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}
/* round icon button that opens the address in Google Maps */
.map-open {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  background: var(--card);
  color: var(--sage-deep);
  transition: background-color 0.2s, color 0.2s;
}
.map-open:hover {
  background: var(--sage);
  color: #fff;
}
.map-open svg {
  width: 19px;
  height: 19px;
}
.choices-format {
  grid-template-columns: 1fr 1fr;
}
/* name and topic share a row */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* laptops and desktops: the whole Contact page (form, details, map) fits one screen,
   down to short laptop windows (~620px under the header) */
@media (min-width: 861px) {
  .contact-grid {
    margin-top: clamp(12px, 2.4vh, 28px);
  }
  .booking-form {
    gap: 8px;
    padding: 18px 24px;
  }
  .booking-form h2 {
    font-size: 21px;
  }
  .form-lead {
    margin-top: -6px;
    font-size: 14.5px;
  }
  .field {
    gap: 4px;
  }
  .field label,
  .field legend {
    font-size: 14px;
  }
  fieldset.field {
    gap: 6px;
  }
  .field legend {
    margin-bottom: 0;
  }
  .choices {
    gap: 6px;
  }
  .choice span,
  .choices-time .choice span {
    min-height: 36px;
    flex-direction: row;
    gap: 7px;
    font-size: 14px;
  }
  .field input:not([type='checkbox']):not([type='radio']),
  .field select {
    min-height: 40px;
    padding-block: 7px;
  }
  .field textarea {
    min-height: 60px;
    padding-block: 8px;
  }
  .booking-form .btn {
    min-height: 44px;
    margin-top: 2px;
  }
  .booking-form .trust-note {
    margin-top: -2px;
    font-size: 13px;
  }
  .contact-card {
    padding: 18px 22px;
    gap: 12px;
  }
  .contact-card .phone-big {
    font-size: clamp(26px, 2.4vw, 32px);
  }
  .contact-card .label {
    font-size: 13.5px;
    margin-bottom: 0;
  }
  .contact-card .actions .btn {
    min-height: 42px;
  }
  .contact-card .map-in-card,
  .contact-card .map-in-card iframe {
    min-height: 150px;
  }
}
/* very short windows: the last few pixels */
@media (min-width: 861px) and (max-height: 660px) {
  .contact-grid {
    margin-top: 8px;
  }
  .field textarea {
    min-height: 50px;
  }
  .form-lead {
    display: none;
  }
}
/* tall screens: a little more air */
@media (min-width: 861px) and (min-height: 860px) {
  .booking-form {
    gap: 12px;
    padding: 24px 28px;
  }
  .choice span,
  .choices-time .choice span {
    min-height: 40px;
  }
  .field textarea {
    min-height: 84px;
  }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: clamp(48px, 6vw, 72px);
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: 44px 24px;
  font-size: 14px;
}
/* one row: logo on the left, page links in the middle, contact icons on the right */
.footer-top {
  display: grid;
  /* the links fill the space between logo and icons and centre in it: equal room on both sides */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px 32px;
  padding-bottom: 28px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 30px;
  font-size: 16px;
}
.site-footer a {
  text-decoration: none;
  transition: color 0.15s;
}
.footer-pages a:hover {
  color: var(--sage-deep);
}
.site-footer .footer-contact {
  justify-self: end;
  display: flex;
  gap: 10px;
}
.footer-contact a {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.footer-contact svg {
  width: 18px;
  height: 18px;
}
.footer-contact a:hover {
  background: var(--sage);
  color: #fff;
  transform: translateY(-2px);
}
/* the number / address shows in a small bubble above the icon */
.footer-contact a::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s;
}
.footer-contact a:hover::after,
.footer-contact a:focus-visible::after {
  opacity: 1;
  translate: 0 0;
}
.footer-bottom {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 6px 24px;
  flex-wrap: wrap;
}
/* tablets and phones: logo top left, contact icons top right, the page links on their own row below */
@media (max-width: 960px) {
  .footer-top {
    grid-template-columns: auto auto;
    grid-template-areas:
      'logo icons'
      'nav nav';
    justify-content: space-between;
    row-gap: 22px;
  }
  .footer-top .logo {
    grid-area: logo;
  }
  .footer-top nav {
    grid-area: nav;
    justify-self: center;
  }
  .site-footer .footer-contact {
    grid-area: icons;
    gap: 8px;
  }
}
@media (max-width: 560px) {
  .footer-contact a {
    width: 36px;
    height: 36px;
  }
  .footer-contact svg {
    width: 16px;
    height: 16px;
  }
}
/* the privacy link in the small print */
.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.footer-bottom a:hover {
  color: var(--sage-deep);
  text-decoration-color: currentColor;
}
/* touch screens have no hover: no bubbles there (the long address would also run off narrow screens) */
@media (hover: none), (max-width: 560px) {
  .footer-contact a::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .site-footer ul.footer-pages {
    display: block;
    text-align: center;
    text-wrap: balance;
    line-height: 2;
  }
  .footer-pages li {
    display: inline-block;
    margin: 0 10px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* the floating WhatsApp button never covers the small print */
@media (max-width: 760px) {
  .site-footer {
    padding-bottom: 72px;
  }
}

/* floating buttons on phones: WhatsApp bottom right, call bottom left */
.fab {
  display: none;
}
@media (max-width: 760px) {
  /* small and quiet: they stay at hand without covering the page */
  .fab {
    display: inline-flex;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px -8px rgba(45, 55, 72, 0.45);
  }
  .fab svg {
    width: 21px;
    height: 21px;
  }
  .fab-phone {
    right: auto;
    left: 14px;
  }
  .fab-phone svg {
    width: 19px;
    height: 19px;
  }
}

/* ---------- plain-HTML adjustments ---------- */
.thumb img,
.article-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.card[hidden] {
  display: none;
}