/* Massagepraktijk ALT — flagship design (Sparkheaven, 2026)
   Warm dark elegance: charcoal, cream, candle-gold. Derived from the
   practice room itself. Fonts self-hosted (Fraunces + Inter variable). */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #241f1a;
  --ink-soft: #55493d;
  --cream: #f6f0e8;
  --paper: #fdfaf5;
  --line: #e5dbcc;
  /* Accent = Corrie's BRAND green/teal, sampled from her logo and storefront
     (decision Danny + Corrie 18-08, replacing the original candle-gold).
     Token names kept as --gold to avoid a rename across every rule; read
     them as "accent". Stars keep real gold via --star. */
  --gold: #4f9733;        /* leaf green - buttons, kickers */
  --gold-deep: #366f27;   /* deep green - links, hover */
  --gold-soft: #2f96a5;   /* her teal - borders, rings, soft accents */
  --star: #d9a441;
  /* #181818: the exact footer colour of her old site (Danny's pick 18-08) -
     neutral near-black, no brown cast, lets the brand green pop. */
  --dark-bg: #181818;
  --dark-text: #efedea;
  --dark-muted: #b0aca6;
  --radius: 14px;
  --shadow: 0 10px 34px rgba(36, 31, 26, 0.10);
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* Nothing should ever be wider than the screen; if something slips through,
   it gets clipped rather than turning the page into a slider. */
html, body { overflow-x: clip; max-width: 100%; }
a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }

h1, h2, h3, .price, .brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1, h2, h3 { color: var(--gold-deep); }
/* the wordmark stays ink: green mark + green text doubles the logo */
.brand, .brand-text { color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.75rem;
}
.section-intro { max-width: 46rem; color: var(--ink-soft); margin-top: 0.9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
.brand { font-size: 1.18rem; color: var(--ink); text-decoration: none; line-height: 1.1; display: inline-flex; align-items: center; gap: 0.6rem; }
.brand > div, .brand-text { display: inline-block; }
.brand-mark { height: 2.2rem; width: auto; flex-shrink: 0; }
.site-footer .brand-mark { width: 1.7rem; height: 1.7rem; }
.brand small { display: block; white-space: nowrap; font-family: "Inter"; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.65rem, 1.4vw, 1.4rem); }
.nav a { font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* :not(.btn): without it this outranks .btn:hover (extra element selector)
   and paints the button's TEXT the same deep green as its hover background -
   the label vanished on hover. */
.nav a:not(.btn):hover { color: var(--gold-deep); }
.nav a.active { color: var(--gold-deep); }

.btn {
  display: inline-block; padding: 0.78rem 1.5rem; border-radius: 999px; white-space: nowrap;
  background: var(--gold); color: #fff; font-weight: 600; font-size: 0.98rem;
  text-decoration: none; border: 1px solid var(--gold);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.on-dark.ghost { color: var(--dark-text); border-color: color-mix(in srgb, var(--dark-text) 45%, transparent); }
.btn.on-dark.ghost:hover { border-color: var(--dark-text); color: #fff; }
.nav .btn { padding: 0.6rem 1.2rem; }

/* mobile nav */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; margin-left: auto; cursor: pointer; padding: 0.6rem; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
  display: block; width: 24px; height: 2px; background: var(--ink); position: relative; content: ""; transition: transform 0.2s;
}
.nav-toggle-label span::before { position: absolute; top: -7px; }
.nav-toggle-label span::after { position: absolute; top: 7px; }
@media (max-width: 1000px) {
  .nav-toggle-label { display: block; position: relative; z-index: 2; background: var(--cream); border-radius: 8px; }
}
/* Narrow phones: compact the brand so it never runs under the menu button. */
@media (max-width: 600px) {
  /* the header is brand + burger on one line and the tagline cannot wrap
     (nowrap), so on a 320px phone it was within a few pixels of pushing the
     page wider than the screen. A smaller gap buys the margin back. */
  .site-header .wrap { gap: 0.75rem; }
  .brand { font-size: 1.02rem; gap: 0.45rem; min-width: 0; }
  .brand small { font-size: 0.55rem; letter-spacing: 0.1em; }
  .brand-mark { height: 1.7rem; }
}
@media (max-width: 1000px) {
  .nav-toggle-label { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .nav a { padding: 0.7rem 0; width: 100%; }
  .nav .btn { margin-top: 0.6rem; text-align: center; width: 100%; }
  .nav-toggle:checked ~ .nav { display: flex; }
}

/* ---------- hero ---------- */
/* overflow:hidden contains .hero-inner::before below - that glow box is far
   wider than the page on purpose (its gradient must die before its own edge)
   and was pushing the page sideways. It is decoration only, so clipping it at
   the hero edge changes nothing visible (Danny: sliding on mobile, 20-08). */
.hero { position: relative; color: var(--ink); padding: 0; overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness(0.95); }
/* The ambient loop is decoration on top of the photo; anyone who asked their
   OS for less motion simply keeps the still. */
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: none; /* veil off (experiment 14-08): raw video, no wash at all */
}
/* The cap governs how much of the video you see. The clip is scaled to the
   viewport WIDTH (object-fit: cover), so on a wide monitor it grows past a
   fixed-height hero and gets cropped hard - the room looked zoomed in at
   1900px while it read fine at 1400px (Danny, 20-08). Letting the hero grow
   further keeps roughly three quarters of the frame visible on wide screens
   instead of six tenths. */
.hero-inner { position: relative; z-index: 1; padding: clamp(5rem, 13vw, 14rem) clamp(1.1rem, 4vw, 2rem); max-width: 40rem; }
/* NB: this element is <div class="wrap hero-inner">. Both classes set the
   padding shorthand and this one wins, so it must repeat .wrap's side
   padding - with '0' the hero text sat flush against the screen edge on a
   phone while every other page had a margin (Danny, 20-08). */
/* Readability glow: a feathered cream ellipse ONLY behind the text column.
   The rest of the frame shows the room untouched (full-frame veil removed
   14-08 on Danny's call - the video carries its own brightness now). */
.hero-inner::before {
  content: ""; position: absolute; z-index: -1;
  /* The box is deliberately much larger than the ellipse: the gradient must
     reach fully transparent BEFORE any box edge, or that edge shows as a
     straight seam over the video. */
  top: -4rem; bottom: -4rem; left: -24rem; width: min(94rem, 210%);
  background: radial-gradient(ellipse 46% 46% at 46% 50%,
    rgba(250, 246, 240, 0.85) 0%,
    rgba(250, 246, 240, 0.72) 38%,
    rgba(250, 246, 240, 0.38) 62%,
    transparent 78%);
}
.hero .section-kicker { color: var(--gold-deep); }
.hero h1 { color: var(--gold-deep); }
.hero p { margin: 1.25rem 0 2rem; color: var(--ink-soft); font-size: 1.08rem; max-width: 34rem; }
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* Phones: the video is hidden entirely (a 16:9 ambient clip has nothing to
   say in a portrait crop, and costs 4 MB of mobile data) and the text gets a
   plain paper hero. Her room appears as its own photo below the text instead
   of behind it - visible AND readable. */
.hero-mobile-photo { display: none; }
@media (max-width: 700px) {
  .hero-media, .hero-inner::before { display: none; }
  .hero { background: var(--paper); border-bottom: 1px solid var(--line); }
  .hero-inner { padding: 3rem clamp(1.1rem, 4vw, 2rem) 2.2rem; }
  .hero-mobile-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
}

/* trust strip */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.trust-item { text-align: center; }
.trust-item .big { font-family: "Fraunces"; font-weight: 600; font-size: 1.45rem; }
.trust-item .big .star { color: var(--star); }
.trust-item .small { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 720px) { .trust .wrap { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

/* ---------- ALT values ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.value-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; }
.value-card .letter {
  font-family: "Fraunces"; font-size: 2.6rem; font-weight: 600; color: var(--gold);
  line-height: 1; margin-bottom: 0.7rem;
}
.value-card h3 { margin-bottom: 0.45rem; }
.value-card p { color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 820px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- corrie intro ---------- */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.split.reverse { grid-template-columns: 6fr 5fr; }
.split-photo img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 4.4; object-fit: cover; width: 100%; }
.quote {
  font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 400; font-style: italic;
  color: var(--gold-deep); border-left: 3px solid var(--gold-soft);
  padding-left: 1.1rem; margin: 1.5rem 0;
}
.split p + p { margin-top: 0.9rem; }
@media (max-width: 820px) { .split, .split.reverse { grid-template-columns: 1fr; } }

/* ---------- treatment cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-body h3 { font-size: 1.15rem; }
.card-body p { color: var(--ink-soft); font-size: 0.94rem; flex: 1; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.5rem; }
.card-meta .price { font-size: 1.05rem; color: var(--gold-deep); }
.card-meta .more { font-size: 0.88rem; font-weight: 600; color: var(--gold-deep); }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* ---------- reviews (dark) ---------- */
.dark { background: var(--dark-bg); color: var(--dark-text); }
.dark h2 { color: var(--gold); }
.dark .section-intro { color: var(--dark-muted); }
.rating-line { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; }
.stars { color: var(--star); font-size: 1.15rem; letter-spacing: 2px; }
.rating-line .score { font-family: "Fraunces"; font-size: 1.3rem; font-weight: 600; color: #fff; }
.rating-line .count { color: var(--dark-muted); font-size: 0.92rem; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.review-card {
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius); padding: 1.5rem 1.5rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.review-card p { font-size: 0.96rem; flex: 1; }
.review-card footer { font-size: 0.86rem; color: var(--dark-muted); }
.review-card footer b { color: var(--dark-text); font-weight: 600; }
@media (max-width: 980px) { .review-grid { grid-template-columns: 1fr; } }

.reviews-portrait { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 3px solid var(--gold-soft); }
.portrait-caption { font-size: 0.85rem; color: var(--dark-muted); margin: 0.6rem 0 1.6rem; }

/* ---------- faq ---------- */
.faq-list { max-width: 46rem; margin-top: 1.8rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.1rem 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.18rem; color: var(--gold-deep);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: "Fraunces"; font-size: 1.4rem; color: var(--gold); flex-shrink: 0; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0; padding: 0 0 1.2rem; color: var(--ink-soft); font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: 0.94rem; line-height: 1.7; max-width: 42rem; }
/* The last question's underline sits right against whatever section follows,
   so the next heading read as another FAQ item. Give it real air (Danny, 20-08). */
.faq-list + h2, .faq-list + h3, .faq-list + h4 { margin-top: 3.2rem; }
/* a photo used as the break between the FAQ and the next section needs the
   same air above it as a heading would get */
.faq-list + figure.photo { margin-top: 3rem; }

/* ---------- price tables ---------- */
.price-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; margin-top: 1.4rem; }
.price-group h3 { margin-bottom: 0.3rem; }
.price-group .desc { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0.8rem; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--line); }
.price-row:first-of-type { border-top: 0; }
.price-row .dur { font-weight: 500; }
.price-row .note { color: var(--ink-soft); font-size: 0.88rem; }
.price-row .price { color: var(--gold-deep); font-size: 1.1rem; white-space: nowrap; }

.btn.small { padding: 0.55rem 1.15rem; font-size: 0.9rem; }
.price-cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.price-cta .more { font-size: 0.88rem; }

/* ---------- generic content pages ---------- */
.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.page-head h1 { max-width: 46rem; }
.page-head .section-intro { margin-top: 1rem; }
.content { max-width: 46rem; }
/* a pasted URL is one long unbreakable word; let it break instead of widening
   the page (klachtenregeling had a 70-character link). */
.content a, .content p, .content li { overflow-wrap: anywhere; }
.content h2 { margin: 2.2rem 0 0.8rem; }
.content h3 { margin: 1.6rem 0 0.5rem; }
.content h4, .content h5 { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--gold-deep); font-size: 1.15rem; margin: 1.5rem 0 0.45rem; }
.content h5 { font-size: 1.02rem; }
.content p { margin: 0.9rem 0; }
.content ul, .content ol { margin: 0.9rem 0 0.9rem 1.4rem; }
/* Her mini leaf as list bullet, like the old site's massage list. */
/* .leaf-list is the same treatment for lists the build writes itself, outside
   the .content column - they were falling back to browser discs (Danny, 20-08). */
.content ul, ul.leaf-list { list-style: none; margin-left: 0; }
.content ul li, ul.leaf-list li { padding-left: 1.7em; position: relative; }
.content ul li::before, ul.leaf-list li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1.05em; height: 1.05em; background: url(/img/icon.png) no-repeat center / contain; }
.content ul.cols { columns: 2; column-gap: 2.6rem; }
.content ul.cols li { break-inside: avoid; }
@media (max-width: 700px) { .content ul.cols { columns: 1; } }
.content li { margin: 0.35rem 0; }
.content img { border-radius: var(--radius); margin: 1.4rem 0; }
.content blockquote { border-left: 3px solid var(--gold-soft); padding-left: 1.1rem; color: var(--gold-deep); font-style: italic; margin: 1.4rem 0; }
.treatment-hero { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(1.8rem, 5vw, 3.5rem); align-items: start; }
/* > img, NOT img: the sticky sidebar photo is the grid's direct child.
   The descendant selector also caught photos inside the page text and made
   them sticky too - they floated over the paragraphs below (bug, 13-08). */
/* De zijfoto plakt mee tijdens het scrollen. Sinds 22-08 zit hij in een
   <figure> zodat het fotobijschrift eronder hoort en mee schuift; daarvoor
   was het bijschrift een DERDE roostercel en belandde het onder de tekst.
   > figure, NIET figure: een descendant-selector pakt ook de foto's in de
   paginatekst en maakt die sticky - dat was eerder al een bug. */
.treatment-hero > figure { position: sticky; top: 6rem; margin: 0; }
.treatment-hero > figure img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.treatment-hero > figure .img-credit { padding: 5px 2px 0; }
@media (max-width: 820px) { .treatment-hero { grid-template-columns: 1fr; } .treatment-hero > figure { position: static; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--dark-bg); color: var(--dark-text); text-align: center; }
.cta-band h2 { color: var(--gold); max-width: 34rem; margin: 0 auto; }
.cta-band p { color: var(--dark-muted); max-width: 32rem; margin: 1rem auto 1.8rem; }

/* ---------- info cards (contact) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.info-card h3 { margin-bottom: 0.5rem; }
.info-card p { color: var(--ink-soft); font-size: 0.96rem; }
.info-card .big-link { font-family: "Fraunces"; font-size: 1.15rem; font-weight: 600; display: inline-block; margin-top: 0.4rem; }
/* .two was an inline grid-template-columns, which beats the media query
   below, so these cards never stacked on a phone (Danny, 20-08). */
.info-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .info-grid, .info-grid.two { grid-template-columns: 1fr; } }

/* ---------- blog list ---------- */
.post-list { max-width: 46rem; margin-top: 1.6rem; }
.post-list a { display: block; text-decoration: none; color: var(--ink); padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.post-list h3 { margin-bottom: 0.3rem; }
.post-list a:hover h3 { color: var(--gold-deep); }
.post-list p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark-bg); color: var(--dark-muted); padding: 3.5rem 0 2.5rem; font-size: 0.94rem; }
.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: var(--gold); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.9rem; }
.site-footer a { color: var(--dark-muted); text-decoration: none; display: block; padding: 0.18rem 0; }
.site-footer a:hover { color: var(--dark-text); }
.site-footer .brand { color: var(--gold); margin-bottom: 0.6rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.09); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }
.footer-bottom a { display: inline; color: var(--dark-muted); }
@media (max-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

/* Photo credits (Shutterstock licences) - small but legible, never hidden.
   A missing credit has cost her money before; this class must stay visible. */
.img-credit { display: block; font-size: 0.66rem; line-height: 1.3; color: var(--ink-soft); opacity: 0.8; text-align: right; padding: 3px 4px 0; }
.card .img-credit { padding: 3px 10px 0; margin-bottom: -6px; }
.dark .img-credit { color: var(--dark-muted); }

/* Footer business block (KvK/BTW/IBAN + annulering) - small, quiet, present. */
.footer-legal { font-size: 0.82rem; color: var(--dark-muted); line-height: 1.7; margin-top: 0.9rem; }
/* Sits under the address in the brand column, like her old footer. */
.footer-annulering { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.8rem; line-height: 1.65; color: var(--dark-muted); }
.footer-annulering strong { color: var(--gold); font-weight: 600; }
.footer-annulering strong { color: var(--dark-text); }

.content .content-cta { margin: 1.4rem 0 1.8rem; }

/* Trio cards inside content (see cardify in build.py). */
.content .info-grid.auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.1rem; margin: 1.6rem 0; }
.content .info-grid.auto .info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.1rem; }
.content .info-grid.auto .info-card h3 { font-size: 1.02rem; margin: 0 0 0.5rem; }
.content .info-grid.auto .info-card p { margin: 0.4rem 0 0; font-size: 0.93rem; color: var(--ink-soft); }

/* conventional ampersand inside serif headings - Fraunces swash & reads as @ */
.amp { font-family: "Inter", system-ui, sans-serif; font-weight: 650; }

/* Content panel: her old site's green text blocks. */
.content .panel { background: var(--gold); color: #fdfaf5; border-radius: var(--radius); padding: 1.6rem 1.8rem; margin: 1.8rem 0; }
.content .panel h1, .content .panel h2, .content .panel h3, .content .panel h4, .content .panel h5 { color: #fff; }
.content .panel a { color: #fff; }
.content .panel ul li::before { filter: brightness(0) invert(1); opacity: 0.9; }

/* Acrostic letter cards: she spells out A-L-T, so the letter is the design.
   Three flat headings before this (Danny, 20-08). */
.letter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.8rem 0 2rem; }
.letter-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.3rem; overflow: hidden; }
.letter-card .letter { position: absolute; top: -0.35em; right: 0.12em; font-family: "Fraunces", Georgia, serif; font-size: 5.2rem; line-height: 1; font-weight: 700; color: var(--gold); opacity: 0.13; pointer-events: none; }
.letter-card h3 { margin: 0 0 0.45rem; position: relative; }
.letter-card p { margin: 0; font-size: 0.95rem; }
@media (max-width: 780px) { .letter-grid { grid-template-columns: 1fr; } }

/* Promo card: photo + heading + button, the way her old site closed a page
   with "wil je meer weten -> Corrie Alt". Side by side, because her photos are
   near-square and a wide banner crop cut her face in half (Danny, 20-08). */
.promo-card { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; align-items: stretch; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 2.2rem 0; transition: box-shadow .18s ease, transform .18s ease; }
.promo-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.09); transform: translateY(-2px); }
.promo-card > figure { margin: 0; min-width: 0; }
.promo-card img { width: 100%; height: 100%; min-height: 165px; object-fit: cover; object-position: center; margin: 0; border-radius: 0; }
.promo-body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.promo-body h3 { margin: 0 0 0.35rem; }
.promo-body p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }

/* Content photos: shrink-wrapped and height-capped. Her photos are square or
   portrait and used to span the whole text column (Danny, 20-08); the figure
   also carries the credit line under the photo's own edge. */
.content figure.photo { width: fit-content; max-width: 100%; margin: 1.6rem auto; }
.content figure.photo img { max-height: 23rem; width: auto; height: auto; max-width: 100%; margin: 0; }
.content figure.photo .img-credit { text-align: right; padding: 4px 2px 0; }
/* A landscape photo fills the text column, so its edges line up with the text
   instead of floating in the middle at some in-between width (Danny, 20-08).
   .small is a photo whose source is too small to fill it; that one keeps its
   own size but lines up with the left edge of the text. */
.content figure.photo:not(.portrait):not(.small) { width: 100%; }
.content figure.photo:not(.portrait):not(.small) img { width: 100%; height: auto; max-height: none; }
.content figure.photo.small { margin-left: 0; margin-right: auto; }
/* The opening photo of a page sits beside the intro text. A real two-column
   block, not a float: short text used to leave a hole under the photo.
   height:auto is LOAD-BEARING here. The <img> carries width/height attributes
   (they reserve the space so the page does not jump while loading), and those
   attributes act as a presentational hint: setting only width in CSS let the
   height attribute stand, so the photo was stretched to 1034px tall and her
   face came out long and narrow (Danny, 20-08). */
.intro-split { display: grid; grid-template-columns: 1fr min(15rem, 36%); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; margin: 1.4rem 0 1.6rem; }
.intro-split .intro-text > p:first-child { margin-top: 0; }
.content .intro-split figure.photo { width: 100%; margin: 0; }
.content .intro-split figure.photo img {
  width: 100%; height: auto; max-width: 100%; max-height: none;
  box-shadow: var(--shadow); margin: 0;
}
@media (max-width: 700px) {
  .intro-split { grid-template-columns: 1fr; gap: 0; }
  .content .intro-split figure.photo { width: min(14rem, 62%); margin: 1.2rem auto 0; }
}
/* nothing structural starts halfway beside a photo */
.content h2, .content h3, .content h4, .content .letter-grid, .content .info-grid,
.content .promo-card, .content .panel, .content .content-cta { clear: both; }
@media (max-width: 719px) { .content figure.photo img { max-height: 16rem; } }

/* Landing page for the old domain: a quiet line of reassurance right under the
   hero for anyone who typed massagemaastrichtcentrum.nl and lands on a site
   with a different name (Danny, 20-08). */
.old-domain-note { background: var(--paper); border-bottom: 1px solid var(--line); margin: 0; padding: 0.85rem 0; font-size: 0.92rem; color: var(--ink-soft); }
.old-domain-note .wrap { display: block; }

/* A run of call-to-action buttons sits on one line, wrapping on narrow screens,
   instead of one per paragraph with a full gap between them (Danny, 20-08). */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 1.3rem 0 1.6rem; }
.cta-row > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.content .cta-row + h3, .content .cta-row + h4 { margin-top: 2.2rem; }

/* Bijschrift binnen de fotokaart: hoort bij de foto, niet als losse rastercel. */
.promo-card .img-credit { padding: 3px 8px 5px; }
/* De ronde portretfoto op de reviewspagina krijgt GEEN bijschrift: het is haar
   eigen foto (dus geen licentieplicht) en de regel eronder zegt al wie het is.
   Alleen toegestaan omdat het haar eigen foto is - nooit bij een licentiefoto. */
.reviews-portrait + .img-credit { display: none; }