/* Project Astra — the site's new look (28 Oct 2026). Loaded only on pages with an Astra template (novo-child/astra/astra.php).
   Source of every value: Project Astra/Style guide (draft).md and the canvas generators (work/canvas/astra_pages.py, gen_round1.py).
   Fixed: her colors and the gold, Montserrat, her wording, her photos. Glass only for what floats; cards hold the content. */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/montserrat-latin-var.woff2) format('woff2');
  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; }
/* size-matched fallback (the blog kit's numbers), so nothing moves when the web font arrives */
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  ascent-override: 85.79%; descent-override: 22.25%; line-gap-override: 0%; size-adjust: 112.83%; }

/* ---------------------------------------------------------------- tokens */
.astra {
  --rp-gold: #c48f56; --rp-gold-l: #d6a56f; --rp-text: #f3f3f1; --rp-muted: #a3a39f; --rp-ground: #08080a; --rp-ink: #1a1208;
  --ab-soft: #d6d6d1; --ab-line: rgba(255, 255, 255, .09);
  --ab-gold-grad: linear-gradient(180deg, #dcae79 0%, #c48f56 55%, #b37e48 100%);
  /* corners: 36 heroes, 32 panels and package cards, 28 cards, 24 tiles, 16 small pieces; inner = outer - gap */
  --r-hero: 36px; --r-panel: 32px; --r-card: 28px; --r-tile: 24px; --r-small: 16px;
  /* spacing (8 px grid), desktop values; the phone values are set below 1024 px */
  --sec: 48px; --t-line: 12px; --t-block: 28px; --gap: 24px; --gap-big: 32px; --to-btn: 28px; --pad: 32px;
  --side: max(24px, calc((100vw - 1140px) / 2)); --cw: min(1140px, calc(100vw - 48px));
  --bar-h: 0px;
}
@media (max-width: 1023px) {
  .astra { --sec: 28px; --t-block: 16px; --gap: 12px; --gap-big: 12px; --to-btn: 20px; --pad: 20px; --side: 16px; --cw: calc(100vw - 32px); --bar-h: 108px; }
}

/* ---------------------------------------------------------------- base */
html.astra-html { background: #08080a; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html.astra-html { scroll-behavior: smooth; } }
body.astra { margin: 0; background: var(--rp-ground); color: var(--rp-text); font-family: Montserrat, 'Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.astra *, .astra *::before, .astra *::after { box-sizing: border-box; }
:where(.astra) img { max-width: 100%; height: auto; display: block; }
:where(.astra) a { color: var(--rp-gold); text-decoration: none; }
:where(.astra) a:hover { color: var(--rp-gold-l); }
:where(.astra) p { margin: 0; }
:where(.astra) p + p { margin-top: 14px; }
:where(.astra) :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: #fff; font-weight: 700; line-height: 1.15; letter-spacing: .3px; }
:where(.astra) button { font-family: inherit; color: inherit; line-height: 1.2; }
.astra :focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; } /* owner decision 198 (30 Oct): no gold focus rings, a calm white one, keyboard only */
.ab-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-wrap { width: var(--cw); margin-left: auto; margin-right: auto; }
.ab-main { display: block; }

/* ---------------------------------------------------------------- surfaces */
.ab-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,var(--tint,.34));
  -webkit-backdrop-filter: blur(var(--blur,26px)) saturate(170%); backdrop-filter: blur(var(--blur,26px)) saturate(170%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45);
}
.ab-glass--flat { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06); }
.ab-surface {
  background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 70px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ab-glass { background: rgba(28,28,32,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .ab-glass { background: rgba(28,28,32,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------------------- sections and ambient light (colors from the nearest photo; no extra requests) */
.ab-sec { position: relative; padding: var(--sec) 0; isolation: isolate; }
.ab-sec[style*="--amb"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .06 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(55% 60% at 28% 45%, rgb(var(--amb) / .20) 0%, rgb(var(--amb) / .17) 18%, rgb(var(--amb) / .12) 34%, rgb(var(--amb) / .07) 50%, rgb(var(--amb) / .03) 63%, transparent 76%),
    radial-gradient(45% 55% at 74% 58%, rgb(var(--amb2, var(--amb)) / .15) 0%, rgb(var(--amb2, var(--amb)) / .12) 18%, rgb(var(--amb2, var(--amb)) / .085) 34%, rgb(var(--amb2, var(--amb)) / .05) 50%, rgb(var(--amb2, var(--amb)) / .02) 63%, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); }
/* (owner, 29 Oct: “pixely and liney” on her Retina Mac = banding: eased stops plus a 6 % white dither, no extra blur; QA Q20: the glow fades out at the section's edges) */
.ab-sec--tight { padding-top: calc(var(--sec) / 3); padding-bottom: calc(var(--sec) / 3); }
.ab-title { text-align: center; font-size: 36px; margin-bottom: var(--t-line); text-transform: uppercase; }
.ab-title:last-child { margin-bottom: 0; }
.ab-sub { max-width: 850px; margin: 0 auto; text-align: center; text-wrap: balance; }
.ab-title, .ab-pkg__title, .ab-trio__card h4, .ab-story h5, .ab-sheet__head h3, .ab-sheet__head h4, .ab-pagetop h1 { text-wrap: balance; }
.ab-head { margin-bottom: var(--t-block); }
.ab-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #b9b9b4; }
.ab-label--gold { color: var(--rp-gold); }
.ab-center { display: flex; justify-content: center; margin-top: var(--to-btn); }
@media (max-width: 1023px) {
  .ab-title { font-size: 26px; padding: 0 16px; }
  .ab-sub { text-align: center; text-wrap: balance; max-width: 358px; padding: 0; margin: 0 auto; font-size: 15px; } /* QA Q2: centred under its centred title */
  .astra { font-size: 15px; }
}

/* ---------------------------------------------------------------- buttons: gold capsule for money, glass capsule for everything else */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rp-text); cursor: pointer; border: 0;
  transition: transform .25s ease, background-color .15s ease, color .15s ease; }
.astra a.ab-btn { color: var(--rp-text); }
.ab-btn:active { transform: translateY(1px); }
.ab-btn--glass { --tint: .28; --blur: 20px; }
.ab-btn--glass:hover { color: #fff; background-color: rgba(60,60,66,.45); }
.ab-btn--gold, .astra a.ab-btn--gold { background: var(--ab-gold-grad); color: var(--rp-ink); font-weight: 600; letter-spacing: 1.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 26px rgba(196,143,86,.32); }
.ab-btn--gold:hover, .astra a.ab-btn--gold:hover { color: var(--rp-ink); filter: brightness(1.07); }
.ab-btn--big { height: 48px; padding: 0 34px; } /* Large (round 7 final): BOOK in a price panel, ORDER */
.ab-center .ab-btn { height: 48px; padding: 0 30px; }
@media (max-width: 1023px) { .ab-center .ab-btn { height: 44px; padding: 0 26px; } }
.ab-btn--small, .ab-socials .ab-btn { height: 38px; padding: 0 18px; font-size: 11.5px; }
.ab-circle { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: var(--rp-text);
  --tint: .30; --blur: 18px; }
.ab-circle svg, .ab-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the menu: desktop capsule, phone top bar, tab bar with BOOK, menu sheet */
.ab-nav { position: fixed; z-index: 50; top: 24px; left: 50%; transform: translateX(-50%); width: min(1240px, calc(100vw - 48px)); height: 64px;
  border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 30px; --tint: .40; --blur: 28px; pointer-events: none; }
.ab-nav > * { pointer-events: auto; }
/* F5 (speed audit): the fold moves nothing in the layout. The bar keeps its width; its glass is a layer clipped to the folded
   capsule (its shadow a layer scaled with it), the name and the right-hand group slide in with transforms, the links fade
   (visibility, not display). --fold-d (half the width the capsule loses), --fold-s and --book-w come from astra.js. */
.ab-nav.ab-glass { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ab-nav::before, .ab-nav::after { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none; transition: clip-path .25s ease, transform .25s ease; }
.ab-nav::before { z-index: -1; clip-path: inset(0 0 round 999px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,var(--tint,.34));
  -webkit-backdrop-filter: blur(var(--blur,26px)) saturate(170%); backdrop-filter: blur(var(--blur,26px)) saturate(170%);
  border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06); }
.ab-nav::after { z-index: -2; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.ab-nav.is-folded::before { clip-path: inset(0 var(--fold-d, 385px) round 999px); }
.ab-nav.is-folded::after { transform: scaleX(var(--fold-s, .38)); }
.ab-nav__name, .ab-nav__right { transition: transform .25s ease; }
.ab-nav.is-folded .ab-nav__name { transform: translateX(var(--fold-d, 385px)); }
.ab-nav.is-folded .ab-nav__right { transform: translateX(calc(-1 * var(--fold-d, 385px))); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ab-nav::before { background: rgba(28,28,32,.94); } }
@media (prefers-reduced-transparency: reduce) { .ab-nav::before { background: rgba(28,28,32,.97); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.admin-bar .ab-nav { top: 56px; }
.ab-nav__name { font-size: 15px; font-weight: 700; letter-spacing: .4px; color: #fff; white-space: nowrap; }
.astra a.ab-nav__name { color: #fff; }
.ab-nav__items { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 500; letter-spacing: .6px; transition: opacity .15s ease, visibility 0s; }
.ab-nav__items a, .ab-nav__right a.ab-nav__link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; color: #fff; white-space: nowrap; }
.ab-nav__items a:hover, .ab-nav__right a.ab-nav__link:hover { color: var(--rp-gold-l); }
.ab-nav__items a[aria-current="page"], .ab-lens { color: var(--rp-gold) !important; background: rgba(10,10,12,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08); }
.ab-nav__right { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #fff; }
.ab-nav__right .ab-nav__link { padding: 0 14px !important; } /* LOGIN and EN | NL keep the lens's 14 px (round 7 final): the center links never shift */
.ab-nav__right .ab-lang { height: 36px; padding: 0 14px; }
.ab-lang { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.astra .ab-lang a { color: #fff; }
.astra .ab-lang a[aria-current="true"] { color: var(--rp-gold); }
.ab-lang span { opacity: .35; }
.ab-nav__menu { display: none; height: 44px; padding: 0 18px; border-radius: 999px; background: none; border: 0; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .6px; cursor: pointer; align-items: center; gap: 10px; }
.ab-nav__menu:hover { color: var(--rp-gold-l); }
/* folded after scrolling: the name, MENU and BOOK in a 470 px capsule (the hidden links keep their place, invisible) */
.ab-nav__right { position: relative; }
.ab-nav__link, .ab-nav__right .ab-lang, .ab-nav__menu { transition: opacity .15s ease, visibility 0s; }
.ab-nav.is-folded .ab-nav__items, .ab-nav.is-folded .ab-nav__link, .ab-nav.is-folded .ab-nav__right .ab-lang { opacity: 0; visibility: hidden; }
@media (min-width: 1280px) { /* MENU only folded: over EN | NL, left of BOOK, so nothing else moves */
  .ab-nav__menu { display: inline-flex; position: absolute; top: 50%; right: calc(var(--book-w, 96px) + 8px); margin-top: -22px; opacity: 0; visibility: hidden; }
  .ab-nav.is-folded .ab-nav__menu { opacity: 1; visibility: visible; }
}
/* 1024–1279 px: the full links don't fit (EN ~1,054 px in a 976 px bar), so the bar is folded from the start as in the portal:
   name, LOGIN, EN | NL, MENU, BOOK in 700 px; scrolling folds it further as on wide screens; full links from 1280 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ab-nav { width: 700px; }
  .ab-nav .ab-nav__items { display: none; }
  .ab-nav .ab-nav__menu { display: inline-flex; }
}
.ab-top { display: none; }
.ab-tabs { display: none; }

/* the menu panel (desktop: under the folded bar; phone: a sheet from the bottom) */
.ab-menu { position: fixed; z-index: 60; inset: 0; display: none; }
.ab-menu.is-open { display: block; }
.ab-menu__dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.ab-menu__panel { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 420px; border-radius: var(--r-panel); padding: 18px; --tint: .55; --blur: 28px; }
.ab-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ab-menu__list a { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .6px; }
.ab-menu__list a:hover { background: rgba(255,255,255,.07); color: #fff; }
.ab-menu__list a[aria-current="page"] { color: var(--rp-gold); background: rgba(255,255,255,.10); }
.ab-menu__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 6px 2px 18px; border-top: 1px solid var(--ab-line); font-size: 12px; font-weight: 500; }
.ab-menu__x { position: absolute; top: 14px; right: 22px; } /* over the rows' arrows, in a header row of its own (owner, 29 Oct) */
.ab-menu__panel { padding-top: 70px; }

@media (max-width: 1023px) {
  .ab-nav { display: none; }
  .ab-top { position: absolute; z-index: 40; top: 22px; left: var(--side); right: var(--side); display: flex; align-items: center; justify-content: space-between; }
  .admin-bar .ab-top { top: 68px; }
  .ab-top .ab-nav__name { font-size: 13px; }
  .ab-top .ab-lang { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 11px; font-weight: 500; --tint: .42; --blur: 18px; }
  .ab-tabs { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: center;
    transition: transform .25s ease, opacity .15s ease; }
  html.rpbf-open .ab-tabs, html.ab-sheet-open .ab-tabs { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .ab-tabs__bar { flex: 1; height: 64px; border-radius: 999px; display: flex; align-items: center; padding: 0 5px; --tint: .34; --blur: 24px; }
  .ab-tab { flex: 1; height: 54px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 500; line-height: 1.2; color: var(--rp-text); background: none; border: 0; padding: 0; cursor: pointer; }
  .astra a.ab-tab { color: var(--rp-text); }
  .ab-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .ab-tab[aria-current="page"], .astra a.ab-tab[aria-current="page"] { color: var(--rp-gold); font-weight: 600; background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08); }
  .ab-tabs__book, .astra a.ab-tabs__book { width: 64px; height: 64px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--ab-gold-grad); color: var(--rp-ink); font-size: 11px; font-weight: 700; letter-spacing: 1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 26px rgba(196,143,86,.4); }
  .ab-menu__panel { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; border-radius: var(--r-panel) var(--r-panel) 0 0;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .ab-menu__panel::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 0 auto 12px; }
}

/* ---------------------------------------------------------------- page tops: hero with photo, or title and intro */
.ab-hero { position: relative; isolation: isolate; padding: 12px; }
.ab-hero__frame { position: relative; height: min(790px, calc(100svh - 24px)); min-height: 520px; max-width: var(--hero-max, none); margin: 0 auto; border-radius: var(--r-hero); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); background: #111; }
/* a header photo narrower than the screen is never enlarged: the frame stays at its own width, centered, with a soft glow around it */
.ab-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 45%, rgba(196,143,86,.12), transparent 72%); }
.ab-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.ab-hero__frame picture { display: contents; }
.ab-hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62)); }
.ab-hero h1 { position: absolute; z-index: 1; left: max(var(--side), calc(50% - var(--hero-max, 100vw) / 2 + 48px)); bottom: 62px; max-width: 1140px; margin-right: 24px; font-size: 54px; text-transform: uppercase; text-wrap: balance; }
.ab-pagetop { padding: 170px 0 var(--t-block); }
.ab-pagetop h1 { font-size: 54px; margin-bottom: 22px; text-transform: uppercase; }
.ab-intro { padding-top: var(--sec); }
@media (max-width: 1023px) {
  .ab-hero { padding: 8px; }
  .ab-hero__frame { height: min(560px, 72svh); min-height: 420px; border-radius: var(--r-panel); box-shadow: none; }
  .ab-hero__frame img { object-position: var(--pos-m, var(--pos, center)); }
  .ab-hero__frame::after { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65)); }
  .ab-hero h1 { left: 26px; right: 26px; bottom: 34px; font-size: 27px; }
  .ab-pagetop { padding: 96px 0 var(--t-block); }
  .ab-pagetop h1 { font-size: 27px; margin-bottom: 16px; }
}

/* ---------------------------------------------------------------- the package switch (a capsule; follows the swipe on phones) */
.ab-switchbox { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ab-switch { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; --tint: .30; --blur: 24px; font-size: 13px; font-weight: 500; letter-spacing: .3px; }
.ab-switch a, .ab-switch button { height: 44px; padding: 0 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 1; white-space: nowrap;
  color: var(--rp-text); background: none; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.astra .ab-switch a { color: var(--rp-text); }
.ab-switch .is-on, .astra .ab-switch a.is-on { color: var(--rp-ink); font-weight: 600; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,236,232,.9)); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
@media (max-width: 1023px) {
  .ab-switchbox { display: contents; } /* only the switch sticks (design QA, 29 Oct): the label stays in the flow */
  .ab-switchbox > .ab-label { display: block; padding: 0 16px; margin-bottom: 10px; }
  .ab-switchbox > .ab-switch { position: sticky; top: 10px; z-index: 30; margin: 0 12px; width: auto; max-width: calc(100% - 24px); box-sizing: border-box; }
  .admin-bar .ab-switchbox { top: 56px; }
  .ab-switch { display: flex; width: 100%; font-size: 12px; }
  .ab-switch a, .ab-switch button { height: 40px; padding: 0 8px; }
}

/* ---------------------------------------------------------------- packages */
.ab-pkgs { display: flex; flex-direction: column; gap: var(--gap-big); margin-top: 16px; }
.ab-pkg { position: relative; width: var(--cw); margin: 0 auto; border-radius: var(--r-panel); padding: 8px; display: flex; gap: 8px; align-items: stretch; scroll-margin-top: 100px; }
.ab-pkg:nth-child(odd) { flex-direction: row-reverse; }
.ab-pkg__photos { position: relative; width: 45.6%; flex: none; min-height: 700px; border-radius: 24px; overflow: hidden; background: #111; }
.ab-pkg__body { flex: 1; min-width: 0; padding: 32px 30px 24px 32px; display: flex; flex-direction: column; }
.ab-pkg__title { font-size: 30px; text-transform: uppercase; }
.ab-pkg__text { margin-top: 16px; font-size: 15px; line-height: 1.6; }
.ab-pkg__text a { color: var(--rp-gold); }
.ab-pkg__more > .ab-label { margin-top: 26px; }
.ab-dots-list { list-style: none; margin: 0; padding: 0; }
.ab-dots-list li { position: relative; padding-left: 18px; margin-top: 8px; font-size: 15px; line-height: 1.5; }
.ab-dots-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 999px; background: var(--rp-gold); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ab-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--rp-text);
  cursor: pointer; --tint: .22; --blur: 16px; }
.ab-chip:hover { color: #fff; }
.ab-chip i { width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-style: normal; color: var(--rp-gold); }
.ab-poplink { color: var(--rp-gold); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
.ab-poplink:hover { color: var(--rp-gold-l); }
.ab-pkg__close { margin-top: 26px; font-size: 15px; line-height: 1.6; }
.ab-price { margin-top: auto; padding-top: 30px; }
.ab-price__panel { padding: 14px 14px 14px 24px; border-radius: 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ab-price__amount { display: flex; flex-direction: column; gap: 2px; }
.ab-price__amount b { font-size: 30px; font-weight: 600; color: var(--rp-gold); line-height: 1.1; white-space: nowrap; }
.ab-price__amount small { font-size: 12px; color: var(--rp-muted); }
.ab-pkg__open { display: none; }
.ab-pkg__dots { display: none; }

@media (max-width: 1023px) {
  /* phone: the packages are one swipe row of quick cards; “What’s included” opens the full package as a sheet */
  .ab-pkgs { flex-direction: row; gap: var(--gap); margin-top: var(--t-block); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--side); scroll-padding: 0 var(--side);
    scrollbar-width: none; overscroll-behavior-x: contain; align-items: flex-start; }
  .ab-pkgs::-webkit-scrollbar { display: none; }
  .ab-pkg, .ab-pkg:nth-child(odd) { flex-direction: column; width: calc(100vw - 56px); max-width: 420px; flex: none; margin: 0; padding: 8px; gap: 0; border-radius: 30px;
    scroll-snap-align: start; transition: opacity .15s ease; }
  .ab-pkg.is-off { opacity: .45; }
  .ab-pkg__photos { width: 100%; min-height: 0; height: 300px; border-radius: 22px; }
  .ab-pkg__body { padding: 18px 10px 8px; }
  .ab-pkg__title { font-size: 22px; }
  .ab-pkg__title .ab-br { display: block; }
  .ab-pkg__text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
  .ab-pkg__text .ab-rest, .ab-pkg__more { display: none; }
  .ab-pkg__open { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 18px; margin-top: 14px; border-radius: 999px;
    font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--rp-text); cursor: pointer; --tint: .26; --blur: 16px; }
  .ab-pkg__open span { width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
  .ab-pkg__open svg { width: 12px; height: 12px; transform: rotate(90deg); }
  .ab-price { padding-top: 18px; margin-top: 0; }
  .ab-price__panel { padding: 12px 10px 12px 18px; border-radius: 16px; }
  .ab-price__amount b { font-size: 24px; }
  .ab-price .ab-btn--big { height: 44px; padding: 0 30px; }
  .ab-pkg__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--t-block); }
}

/* the package sheet (phone) and the add-on pop-ups (everywhere) */
.ab-sheet { position: fixed; z-index: 70; inset: 0; display: none; }
.ab-sheet.is-open { display: block; }
.ab-sheet__dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 1023px) { .ab-sheet__dim { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* F11: on phones the sheet or dialog covers nearly the whole screen: the tint only, no full-screen blur */
.ab-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, #17171b, #0e0e11); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 -20px 60px rgba(0,0,0,.6);
  animation: ab-up .25s ease; }
.ab-sheet__panel::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); margin: 0 auto 14px; }
.ab-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ab-sheet__head h3, .ab-sheet__head h4 { font-size: 24px; text-transform: uppercase; }
.ab-sheet__x[hidden] { display: none; }
.ab-sheet__head .ab-circle { flex: none; width: 36px; height: 36px; margin-top: -2px; }
.ab-sheet__body > .ab-pkg__text:first-of-type { margin-top: 12px; }
.ab-sheet .ab-pkg__more { display: block; }
.ab-sheet .ab-pkg__text .ab-rest { display: inline; }
.ab-sheet .ab-pkg__text { margin-top: 12px; font-size: 15px; }
.ab-sheet .ab-price { padding-top: 18px; }
.ab-sheet .ab-pkg__title .ab-br { display: inline; }
@keyframes ab-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1024px) {
  .ab-sheet__panel { left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%); width: 560px; max-height: 80vh; border-radius: var(--r-panel); padding: 26px 30px 28px; animation: none; }
  .ab-sheet__panel::before { display: none; }
}
.ab-pop[hidden] { display: none; }

/* ---------------------------------------------------------------- photo carousel (package photos, rows of pictures): swipe, arrows on desktop, dots */
.ab-car { position: relative; height: 100%; }
.ab-car__track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ab-car__track::-webkit-scrollbar { display: none; }
.ab-car__track img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.ab-car__track img[data-src] { background: #121215; }
.ab-car__prev, .ab-car__next { position: absolute; top: 50%; margin-top: -22px; z-index: 2; }
.ab-car__prev { left: 14px; } .ab-car__next { right: 14px; }
.ab-car__dots { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); height: 24px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px;
  --tint: .3; --blur: 14px; }
.ab-car__dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.45); transition: width .25s ease, background-color .15s ease; }
.ab-car__dots span.is-on { width: 18px; background: #fff; }
@media (max-width: 1023px), (hover: none) { .ab-car__prev, .ab-car__next { display: none; } }
@media (max-width: 1023px) { .ab-car__dots { bottom: 12px; height: 22px; padding: 0 10px; gap: 5px; } .ab-car__dots span { width: 5px; height: 5px; } .ab-car__dots span.is-on { width: 16px; } }

/* ---------------------------------------------------------------- FAQ (one card; one answer open per page) */
.ab-faq { width: min(880px, var(--cw)); margin: var(--t-block) auto 0; border-radius: var(--r-panel); padding: 6px 32px; }
.ab-q + .ab-q { border-top: 1px solid var(--ab-line); }
.ab-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--rp-text); line-height: 1.4; }
.ab-q summary::-webkit-details-marker { display: none; }
.ab-q summary::after { content: ""; width: 32px; height: 32px; flex: none; border-radius: 999px; background: rgba(255,255,255,.08) center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c48f56' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ab-q[open] summary { color: var(--rp-gold-l); }
.ab-q[open] summary::after { background-color: rgba(196,143,86,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c48f56' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ab-q__a { overflow: hidden; }
.ab-q__a > div { padding: 0 60px 18px 0; font-size: 14px; line-height: 1.6; color: var(--ab-soft); }
.ab-q__a p + p { margin-top: 10px; }
@media (max-width: 1023px) {
  .ab-faq { width: auto; margin: var(--t-block) 12px 0; border-radius: 26px; padding: 2px 20px; }
  .ab-q summary { padding: 15px 0; font-size: 15px; }
  .ab-q__a > div { padding: 0 8px 15px 0; font-size: 13px; }
}

/* ---------------------------------------------------------------- stories gallery: masonry columns, every photo keeps its own shape; a swipe row on phones */
.ab-mas { display: flex; gap: var(--gap); justify-content: center; align-items: flex-start; width: var(--cw); margin: var(--t-block) auto 0; }
.ab-mas__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.ab-story { display: block; border-radius: var(--r-card); padding: 12px; color: var(--rp-text); }
.astra a.ab-story { color: var(--rp-text); }
.ab-story img { width: 100%; height: auto; border-radius: 16px; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; }
.ab-story__t { padding: 14px 8px 8px; }
.ab-story h5 { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.ab-story p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--rp-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .ab-story img { transition: transform .25s ease; } .ab-story:hover img { transform: scale(1.015); } }
@media (max-width: 1023px) {
  .ab-mas { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--side); scroll-padding: 0 var(--side); gap: var(--gap); justify-content: flex-start; }
  .ab-mas::-webkit-scrollbar { display: none; }
  .ab-mas__col { display: contents; }
  .ab-story { flex: none; width: calc(100vw - 56px); max-width: 420px; scroll-snap-align: start; transition: opacity .15s ease; }
  .ab-story.is-off, .ab-photos > .is-off { opacity: .45; }
  .ab-story img { aspect-ratio: auto; height: 360px; }
}

/* ---------------------------------------------------------------- text trios (three cards of text) */
.ab-trio { width: var(--cw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ab-trio__card { border-radius: var(--r-card); padding: var(--pad); }
.ab-trio__card h4 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; }
.ab-trio__card p { font-size: 15px; }
@media (max-width: 1023px) {
  .ab-trio { width: auto; margin: 0 12px; grid-template-columns: 1fr; }
  .ab-trio__card { border-radius: 26px; }
  .ab-trio__card h4 { font-size: 17px; margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- a row of photos (prints) */
.ab-photos { display: flex; gap: 24px; justify-content: center; margin: var(--t-block) auto; width: var(--cw); }
.ab-photos a, .ab-photos > img { flex: 1; min-width: 0; }
.ab-photos img { width: 100%; aspect-ratio: 360 / 238; object-fit: cover; border-radius: 24px; }
@media (max-width: 1023px) {
  .ab-photos { width: auto; margin: var(--t-block) 0; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--side); scroll-padding: 0 var(--side); justify-content: flex-start; }
  .ab-photos::-webkit-scrollbar { display: none; }
  .ab-photos a, .ab-photos > img { flex: none; width: calc(100vw - 56px); scroll-snap-align: start; transition: opacity .15s ease; }
}

/* ---------------------------------------------------------------- photo tiles (locations, photoshoots): a glass label at the bottom, equal-height labels */
.ab-tiles { width: var(--cw); margin: var(--t-block) auto 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap); }
.ab-tile { position: relative; display: block; aspect-ratio: 267 / 330; border-radius: var(--r-tile); overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.5); background: #111; }
.ab-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.ab-tile__label { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; border-radius: 16px; padding: 12px 10px 12px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; --tint: .52; --blur: 20px; }
.ab-tile__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: .4px; color: #fff; line-height: 1.25; white-space: nowrap; }
.ab-tile__t small { font-size: 12px; font-weight: 600; color: var(--rp-gold); letter-spacing: 0; }
/* P-1 (28 Oct, SEO parity): a location tile keeps its live line, small under the name; two lines' room on every tile so the labels stay equal */
.ab-tile__t small.ab-tile__line { font-size: 11.5px; font-weight: 400; line-height: 1.35; min-height: 2.7em; color: rgba(243,243,241,.8); white-space: normal; text-wrap: balance; }
.ab-tile__go { width: 30px; height: 30px; flex: none; border-radius: 999px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: #fff; }
.ab-tile__go svg { width: 12px; height: 12px; }
@media (hover: hover) { .ab-tile img { transition: transform .25s ease; } .ab-tile:hover img { transform: scale(1.03); } }
@media (max-width: 1023px) {
  .ab-tiles { width: auto; margin: var(--t-block) 16px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tile { aspect-ratio: 173 / 220; border-radius: 16px; }
  .ab-tile__label { padding: 10px 8px 10px 12px; border-radius: 8px; }
  .ab-tile__t { font-size: 11px; }
  .ab-tile__t small.ab-tile__line { font-size: 10px; min-height: 4.05em; }
  .ab-tile__go { width: 24px; height: 24px; }
}
@media (max-width: 374px) {
  .ab-tile__t small.ab-tile__line { min-height: 5.4em; } /* the longest Dutch line takes four lines at 360 px; every label the same */
}

/* ---------------------------------------------------------------- the footer (one panel; no EN | NL, the menu has it) */
.ab-foot { padding: 0 12px 12px; }
.ab-pkg__dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.3); transition: width .25s ease, background-color .15s ease; }
.ab-pkg__dots span.is-on { width: 16px; background: #fff; }
.ab-foot__panel { border-radius: var(--r-hero); padding: 56px max(24px, calc(var(--side) - 12px)) 36px; }
.ab-foot__top { display: flex; justify-content: space-between; gap: 60px; }
.ab-foot__brand { display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.ab-foot__name { font-size: 18px; font-weight: 700; letter-spacing: .4px; color: #fff; }
.astra a.ab-foot__name { color: #fff; }
.ab-foot__brand p { font-size: 14px; line-height: 1.6; }
.ab-rating { display: inline-flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 22px; align-self: flex-start; color: var(--rp-text); --tint: .3; --blur: 20px; }
.astra a.ab-rating { color: var(--rp-text); }
.ab-rating b { font-size: 40px; font-weight: 600; color: #fff; line-height: 1; }
.ab-rating__r { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.ab-stars { display: flex; gap: 2px; }
.ab-stars svg { width: 16px; height: 16px; fill: var(--rp-gold); }
.ab-socials { display: flex; gap: 8px; }
.ab-foot__cols { display: flex; gap: 30px; }
.ab-foot__col { min-width: 190px; display: flex; flex-direction: column; gap: 12px; }
.ab-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-foot__col a { font-size: 14px; color: var(--rp-text); }
.ab-foot__col a:hover { color: var(--rp-gold); }
.ab-foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; color: var(--rp-muted); }
.ab-foot__bottom a { color: var(--rp-muted); }
.ab-foot__bottom a:hover { color: var(--rp-gold); }
.ab-foot__bottom i { font-style: normal; opacity: .4; margin: 0 8px; }
@media (max-width: 1279px) { .ab-foot__top { flex-direction: column; gap: 36px; } .ab-foot__brand { max-width: 520px; } }
@media (max-width: 1023px) {
  .ab-foot { padding: 0 8px calc(8px + var(--bar-h)); }
  .ab-foot__panel { border-radius: 30px; padding: 30px 20px 24px; }
  .ab-foot__top { gap: 24px; }
  .ab-foot__brand { gap: 14px; }
  .ab-foot__name { font-size: 16px; }
  .ab-foot__brand p { font-size: 13.5px; }
  .ab-rating { padding: 12px 18px; }
  .ab-rating b { font-size: 34px; }
  .ab-foot__cols { flex-direction: column; gap: 24px; }
  .ab-foot__col { min-width: 0; gap: 10px; }
  .ab-foot__col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .ab-foot__col a { font-size: 13.5px; }
  .ab-foot__bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; padding-top: 18px; font-size: 12px; line-height: 1.6; }
  .ab-foot__bottom i { margin: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .astra *, .astra *::before, .astra *::after { transition: none !important; animation: none !important; }
}

/* Round 7 (28 Oct 2026): four or more choices on the phone are a sideways chip row with the slim peek (Business packages,
   FAQ topics); two or three stay a switch */
@media (max-width: 1023px) {
  .ab-switchbox--many { padding: 0; }
  .ab-switchbox--many > .ab-label { padding-left: 16px; }
  .ab-switch--many { width: auto; padding: 0 16px; gap: 8px; overflow-x: auto; scrollbar-width: none; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; scroll-padding: 0 16px; }
  .ab-switch--many::-webkit-scrollbar { display: none; }
  .ab-switch--many a { flex: none; height: 40px; padding: 0 18px; font-size: 12px; letter-spacing: .3px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.5);
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border: 1px solid rgba(255,255,255,.16); }
  .ab-switch--many a.is-on { border-color: transparent; }
}
/* dots under the phone's other swipe rows (gallery, prints): 17 px under the cards, then 20 to what follows */
.ab-row-dots { display: none; }
@media (max-width: 1023px) {
  .ab-row-dots { display: flex; justify-content: center; gap: 6px; margin-top: 17px; }
  .ab-row-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.3); transition: width .25s ease, background-color .15s ease; }
  .ab-row-dots span.is-on { width: 16px; background: #fff; }
  .ab-row-dots + .ab-center, .ab-row-dots + .ab-sub { margin-top: 20px; }
  .ab-photos { margin-bottom: 0; }
}

/* Tile pages (Photoshoots, Locations; AstraP02 / AstraP04): the page's own top, then the tiles 28 under it. Photoshoot
   tiles carry the “from” price (267 × 356, four per row); locations five per row (208 × 296); phones two per row, and
   every label in a row the same height: EN breaks at the space (COUPLE / PHOTOGRAPHY), a Dutch one-word title at its
   soft hyphen (KOPPEL- / FOTOGRAFIE) */
.ab-pagetop p { max-width: 1140px; }
.ab-sec--tiles { padding-top: 0; }
.ab-tiles--page { margin-top: 0; }
.ab-tile--price { aspect-ratio: 267 / 356; }
.ab-tiles--5 { --cols: 5; }
.ab-tiles--5 .ab-tile { aspect-ratio: 208 / 296; }
@media (max-width: 1023px) {
  .ab-tile--price, .ab-tiles--5 .ab-tile { aspect-ratio: 173 / 240; }
  .ab-tiles--5 .ab-tile { aspect-ratio: 173 / 220; }
  .ab-tile--price .ab-tile__t { white-space: normal; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
}

/* ---------------------------------------------------------------- Home (AstraP01Home): the photoshoot slides in one rounded frame,
   the counter and the thumbnails on glass; each slide links to its page (as today); phones keep the thumbs above the tab bar */
.ab-home { padding: 12px; }
.ab-home__frame { position: relative; height: calc(100svh - 24px); min-height: 600px; max-height: 1000px; border-radius: var(--r-hero); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); background: #111; }
.ab-home__track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ab-home__track::-webkit-scrollbar { display: none; }
.ab-home__slide, .astra a.ab-home__slide { position: relative; flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; color: #fff; }
.ab-home__slide picture, .ab-home__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-home__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 50%, rgba(0,0,0,.66)); }
.ab-home__txt { position: absolute; z-index: 1; left: calc(var(--side) - 12px); bottom: 70px; max-width: 900px; display: flex; flex-direction: column; gap: 12px; }
.ab-home__txt h1, .ab-home__kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 3px; line-height: 1.3; text-transform: uppercase; color: rgba(255,255,255,.85); }
.ab-home__t { margin: 0; font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: #fff; }
.ab-home__line { max-width: 560px; font-size: 15px; font-weight: 400; line-height: 1.5; color: rgba(243,243,241,.82); text-wrap: balance; }
.ab-home__row { display: flex; align-items: center; gap: 22px; }
.ab-home__price { font-size: 20px; font-weight: 600; color: var(--rp-gold); white-space: nowrap; }
.ab-home__nav { position: absolute; z-index: 2; right: 56px; bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ab-home__count { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,.5); }
.ab-home__count b { color: rgba(255,255,255,.85); font-weight: 600; }
.ab-home__thumbs { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; --tint: .3; --blur: 20px; }
.ab-home__th { width: 58px; height: 40px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #222; cursor: pointer; opacity: .55; flex: none;
  transition: opacity .15s ease, box-shadow .15s ease; }
.ab-home__th img { width: 100%; height: 100%; object-fit: cover; }
.ab-home__th.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.ab-home__th:hover { opacity: .85; }
@media (max-width: 1023px) {
  .ab-home { padding: 8px; }
  .ab-home__frame { height: calc(100svh - 16px); min-height: 560px; border-radius: var(--r-panel); box-shadow: none; }
  .ab-home__slide img { object-position: 46% 50%; }
  .ab-home__slide::after { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 52%, rgba(0,0,0,.72) 82%); }
  .ab-home__txt { left: 18px; right: 18px; bottom: calc(var(--bar-h) + 70px); gap: 8px; }
  .ab-home__txt h1, .ab-home__kicker { font-size: 11px; letter-spacing: 2.5px; }
  .ab-home__t { font-size: 27px; line-height: 1.1; }
  .ab-home__line { font-size: 13px; line-height: 1.45; }
  .ab-home__row { gap: 14px; }
  .ab-home__price { font-size: 15px; }
  .ab-home__row .ab-btn { height: 44px; padding: 0 26px; }
  .ab-home__nav { left: 12px; right: 12px; bottom: calc(var(--bar-h) + 16px); align-items: center; }
  .ab-home__count { display: none; }
  .ab-home__thumbs { gap: 5px; padding: 5px; border-radius: 999px; }
  .ab-home__th { width: 30px; height: 30px; border-radius: 999px; }
}

/* ---------------------------------------------------------------- About (AstraP05About + round 7). The signature: AT A GLANCE in glass,
   overlapping the mirror photo's edge so the photo's light comes through. Phones: H1, photo, the card over the photo's foot
   (each label above its value), then her text. */
.ab-about-top { padding-top: 150px; }
.ab-about-top__grid { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 60px; align-items: start; }
.ab-about-top__photo img { width: 100%; height: 820px; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.ab-about-top__col { position: relative; z-index: 1; }
.ab-about-top h1 { font-size: 54px; line-height: 1.08; text-transform: uppercase; }
.ab-about-top h1 span { display: block; } /* QA Q11: white, gold reads as a link */
.ab-about-top__text { margin-top: 24px; }
.ab-about-top__text p + p { margin-top: 16px; }
.ab-glance { margin: var(--t-block) 0 0 -108px; border-radius: var(--r-card); padding: 28px 32px 14px 36px; --tint: .36; --blur: 28px; }
.ab-glance dl { margin: 12px 0 0; }
.ab-glance dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 13px 0; }
.ab-glance dl > div + div { border-top: 1px solid rgba(255,255,255,.10); }
.ab-glance dt { font-size: 14px; color: #b9b9b4; }
.ab-glance dd { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; font-weight: 400; }
.ab-sec--press { padding-top: 0; }
.ab-press { display: flex; align-items: center; gap: 32px; padding: 20px 32px; border-radius: var(--r-card); }
.ab-press__name { display: flex; flex-direction: column; gap: 4px; flex: none; padding-right: 32px; border-right: 1px solid rgba(255,255,255,.10); }
.ab-press__name b { font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #fff; text-transform: uppercase; }
.ab-press__text { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 1; font-size: 15px; }
.ab-press__text a { white-space: nowrap; }
.ab-appr { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: var(--sec); align-items: stretch; }
.ab-appr__text p + p { margin-top: 16px; }
.ab-appr__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--t-block); }
.ab-appr__pair img { width: 100%; aspect-ratio: 264 / 331; object-fit: cover; border-radius: var(--r-tile); }
.ab-appr__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.ab-charity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ab-charity__card { border-radius: var(--r-card); padding: 12px; }
.ab-charity__card img { width: 100%; height: 300px; object-fit: cover; border-radius: 16px; }
.ab-charity__body { padding: 24px 20px 12px; }
.ab-charity__body h4 { font-size: 18px; margin-bottom: 12px; text-transform: uppercase; }
.ab-charity__body p { font-size: 15px; }
.ab-charity__body p + p { margin-top: 12px; }
.ab-pics { width: var(--cw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ab-pic { border-radius: var(--r-card); padding: 12px; }
.ab-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.ab-pic__t { padding: 20px 4px 10px; text-align: center; }
.ab-pic__t h4 { font-size: 17px; letter-spacing: .3px; text-transform: uppercase; }
.ab-pic__t p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; text-wrap: balance; }
@media (max-width: 1023px) {
  .ab-about-top { padding-top: 96px; }
  .ab-about-top__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; }
  .ab-about-top__col { display: contents; }
  .ab-about-top h1 { order: 1; font-size: 27px; padding: 0 16px; margin-bottom: 20px; }
  .ab-about-top__photo { order: 2; margin: 0 12px; }
  .ab-about-top__photo img { height: 400px; object-position: 50% 62%; border-radius: var(--r-card); }
  .ab-glance { order: 3; position: relative; z-index: 1; margin: -80px 24px 0; padding: 22px 20px 10px; }
  .ab-glance dl > div { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .ab-glance dt { font-size: 13px; }
  .ab-glance dd { font-size: 14px; }
  .ab-about-top__text { order: 4; margin: 24px 16px 0; }
  .ab-about-top__text p + p { margin-top: 14px; }
  .ab-press { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 12px; width: auto; padding: 20px; }
  .ab-press__name { padding-right: 0; border-right: 0; }
  .ab-press__text { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ab-appr { display: block; width: auto; margin: 0; }
  .ab-appr__text { padding: 0 16px; }
  .ab-appr__pair { margin: 20px 16px 0; gap: 12px; }
  .ab-appr__photo { margin: 12px 12px 0; }
  .ab-appr__photo img { height: 480px; border-radius: var(--r-tile); }
  .ab-charity { display: flex; flex-direction: column; width: auto; margin: 0 12px; }
  .ab-charity__card img { height: 220px; }
  .ab-charity__body { padding: 20px 8px 8px; }
  .ab-charity__body h4 { font-size: 17px; }
  .ab-pics { width: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 16px; scroll-padding: 0 16px; gap: 12px; }
  .ab-pics::-webkit-scrollbar { display: none; }
  .ab-pic { flex: none; width: calc(100vw - 56px); max-width: 420px; scroll-snap-align: start; transition: opacity .15s ease; }
  .ab-pic.is-off { opacity: .45; }
  .ab-pic__t h4 { font-size: 16px; }
}

/* ---------------------------------------------------------------- Portfolio (AstraP06Portfolio + round 7): category chips at the content's left
   edge (a sideways row with the peek on phones; the chosen one white-filled), the stories as masonry; phones: two columns of
   small cards (title only), 173 wide with 12 gaps */
.ab-chiprow { width: var(--cw); margin: 0 auto var(--t-block); display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chip2, .astra a.ab-chip2 { height: 40px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; flex: none; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--rp-text); border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30); transition: background-color .15s ease, color .15s ease; }
.ab-chip2:hover { color: #fff; }
.ab-chip2.is-on, .astra a.ab-chip2.is-on { color: var(--rp-ink); font-weight: 600; border-color: transparent; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ab-mas[aria-busy="true"] { opacity: .5; transition: opacity .15s ease; }
@media (max-width: 1023px) {
  .ab-chiprow { width: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 16px; margin-bottom: 20px; }
  .ab-chiprow::-webkit-scrollbar { display: none; }
  .ab-mas--grid { display: block; columns: 2; column-gap: 12px; overflow: visible; padding: 0 16px; }
  .ab-mas--grid .ab-story { width: auto; max-width: none; break-inside: avoid; margin-bottom: 12px; padding: 8px; border-radius: var(--r-tile); }
  .ab-mas--grid .ab-story img { height: auto; aspect-ratio: var(--ar, 4 / 5); border-radius: 16px; }
  .ab-mas--grid .ab-story__t { padding: 10px 4px 4px; }
  .ab-mas--grid .ab-story h5 { font-size: 13px; }
  .ab-mas--grid .ab-story p { display: none; }
  .ab-mas--grid + .ab-row-dots { display: none; }
}

/* ---------------------------------------------------------------- FAQ page (AstraP07FAQ + round 7): the topic switch (a chip row on phones),
   each topic a big card (photo, title 30 / 24, line, questions), photo side alternating; big cards 32 apart (phones 12) */
.ab-sec--topics { padding-top: 0; }
.ab-topics { display: flex; flex-direction: column; gap: var(--gap-big); margin-top: var(--t-block); }
.ab-topic { width: var(--cw); margin: 0 auto; border-radius: var(--r-panel); padding: 8px; display: flex; gap: 8px; align-items: flex-start; scroll-margin-top: 100px; }
.ab-topic:nth-child(even) { flex-direction: row-reverse; }
.ab-topic__photo { width: 420px; flex: none; }
.ab-topic__photo img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--r-tile); }
.ab-topic__body { flex: 1; min-width: 0; padding: 30px 34px 14px; }
.ab-topic__body h3 { font-size: 30px; text-transform: uppercase; margin-bottom: 8px; }
.ab-topic__line, .ab-topic__line p { font-size: 15px; color: var(--rp-muted); margin-bottom: 10px; }
.ab-topic .ab-q:first-child { border-top: 0; }
.ab-faq-end { max-width: 850px; margin: var(--t-block) auto 0; text-align: center; }
@media (max-width: 1023px) {
  .ab-topic, .ab-topic:nth-child(even) { flex-direction: column; width: auto; margin: 0 12px; border-radius: 30px; }
  .ab-topic__photo { width: 100%; }
  .ab-topic__photo img { height: 200px; border-radius: 22px; }
  .ab-topic__body { padding: 18px 12px 4px; }
  .ab-topic__body h3 { font-size: 24px; margin-bottom: 6px; }
  .ab-topic__line, .ab-topic__line p { font-size: 14px; margin-bottom: 4px; }
  .ab-faq-end { text-align: left; padding: 0 16px; margin-top: 20px; }
}
.ab-q { scroll-margin-top: 110px; }

/* ---------------------------------------------------------------- Long text pages (AstraP12Terms + round 7): the 760 px reading column and
   “On this page” in glass beside it (sticky; the current section in the gold lens); phones: one capsule that opens it */
.ab-text { padding-bottom: var(--sec); }
.ab-text__grid { display: flex; gap: 60px; align-items: flex-start; margin-top: var(--t-block); }
.ab-toc { position: sticky; top: 110px; width: 300px; flex: none; border-radius: var(--r-card); padding: 18px 12px; --tint: .3; --blur: 24px; max-height: calc(100vh - 140px); overflow: auto; scrollbar-width: none; }
.ab-toc .ab-label { padding: 0 12px 10px; }
.ab-toc ol { list-style: none; margin: 0; padding: 0; }
.ab-toc a, .astra .ab-toc a { display: block; padding: 7px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; color: var(--rp-text); }
.ab-toc a:hover { color: var(--rp-gold-l); }
.ab-toc a.is-on, .astra .ab-toc a.is-on { color: var(--rp-gold); background: rgba(255,255,255,.08); }
.ab-toc__fold { display: none; }
.ab-text__col { flex: 1; min-width: 0; max-width: 760px; }
.ab-table td:first-child { overflow-wrap: anywhere; }
@media (max-width: 1023px) { .ab-table table { min-width: 620px; } .ab-table { -webkit-overflow-scrolling: touch; } }
.ab-text__intro p { font-size: 17px; }
.ab-text__updated { margin: 12px 0 30px !important; font-size: 13px; color: var(--rp-muted); }
.ab-text__col h2 { margin: 34px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: 0; scroll-margin-top: 110px; text-wrap: balance; }
.ab-text__col p + p { margin-top: 12px; }
.ab-table { margin: 16px 0; overflow-x: auto; border-radius: var(--r-small); border: 1px solid rgba(255,255,255,.08); }
.ab-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.ab-table th, .ab-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ab-table th { font-weight: 600; color: #fff; background: rgba(255,255,255,.04); }
.ab-table tr:last-child td { border-bottom: 0; }
@media (max-width: 1023px) {
  .ab-text__grid { flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; }
  .ab-text__col { width: 100%; max-width: none; }
  .ab-toc { position: static; width: 100%; padding: 0; border-radius: 999px; max-height: none; overflow: visible; margin-bottom: 22px; }
  .ab-toc .ab-label, .ab-toc ol { display: none; }
  .ab-toc__fold { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 52px; padding: 0 8px 0 18px; border: 0; background: none; color: var(--rp-text); font-size: 13px; cursor: pointer; }
  .ab-toc__fold span { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #fff; }
  .ab-text__intro p { font-size: 15px; }
  .ab-text__updated { margin: 10px 0 0 !important; font-size: 12.5px; }
  .ab-text__col h2 { margin: 28px 0 10px; font-size: 19px; }
  .ab-sheet .ab-toc-list { list-style: none; margin: 0; padding: 0; }
  .ab-sheet .ab-toc-list a { display: block; padding: 12px 6px; font-size: 15px; color: var(--rp-text); border-bottom: 1px solid var(--ab-line); }
  .ab-sheet .ab-toc-list a.is-on { color: var(--rp-gold); }
}

/* ---------------------------------------------------------------- Contact (AstraP08Contact + round 7) */
.ab-pic__photo { position: relative; display: block; }
.ab-pic__n { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff; --tint: .34; --blur: 18px; }
/* a sideways row of photo cards (BOOK NOW): arrows beside the title on desktop, swipe with dots on phones */
.ab-carousel__head { position: relative; }
.ab-carousel__arrows { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 10px; }
.ab-carousel { position: relative; }
.ab-carousel::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 160px; pointer-events: none; background: linear-gradient(90deg, rgba(8,8,10,0), var(--rp-ground)); }
.ab-carousel__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px var(--side) 20px; scroll-padding: 0 var(--side); }
.ab-carousel__track::-webkit-scrollbar { display: none; }
.ab-carousel__track .ab-tile { flex: none; width: 272px; aspect-ratio: 272 / 360; scroll-snap-align: start; }
/* the contact form in glass, 880 wide like the FAQ card; the site's own form markup (.rp-cf) */
.ab-sec--form { padding-top: calc(var(--sec) / 2); }
.ab-form { width: min(880px, var(--cw)); margin: 0 auto; border-radius: var(--r-panel); padding: 32px; --tint: .40; --blur: 28px; }
.ab-form__title { text-align: center; font-size: 36px; text-transform: uppercase; }
.ab-form__intro { margin-top: 12px; }
.ab-form .rp-cf { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.ab-form .rp-cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ab-form .rp-cf-fld { display: flex; flex-direction: column; gap: 10px; }
.ab-form .rp-cf-lb { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #b9b9b4; }
.ab-form input[type="text"], .ab-form input[type="email"], .ab-form textarea { width: 100%; height: 52px; padding: 0 18px; border-radius: 16px; font: inherit; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.ab-form textarea { height: 150px; padding: 14px 18px; resize: vertical; }
.ab-form input:focus, .ab-form textarea:focus { border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 4px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.05); }
.ab-form .rp-cf-send { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.ab-form .rp-cf-btn { height: 48px; padding: 0 44px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rp-text); cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.30); }
.ab-form .rp-cf-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 1023px) { .ab-form .rp-cf-btn { height: 44px; padding: 0 36px; } }
.ab-form .wpcf7-spinner { display: none; }
.ab-form .rp-cf-note { font-size: 13px; color: var(--rp-muted); }
.ab-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; color: #e8a59b; }
.ab-form .wpcf7-response-output { margin: 0; font-size: 14px; text-align: center; color: var(--ab-soft); }
.ab-form .wpcf7-response-output:empty { display: none; }
.ab-form .rp-cf-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0 8px; text-align: center; outline: 0; }
.ab-form .rp-cf-ic { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); }
.ab-form .rp-cf-done-h { font-size: 19px; font-weight: 600; color: #fff; }
/* the own Instagram feed: a sideways row of 3:4 photos */
.ab-ig .rp-carousel { position: relative; }
.ab-ig .rp-carousel-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px var(--side) 12px; scroll-padding: 0 var(--side); }
.ab-ig .rp-carousel-track::-webkit-scrollbar { display: none; }
.ab-ig .rp-ig-item { flex: none; width: 272px; aspect-ratio: 3 / 4; border-radius: var(--r-tile); overflow: hidden; scroll-snap-align: start; background: #111; }
.ab-ig .rp-ig-item img { width: 100%; height: 100%; object-fit: cover; }
.ab-ig .rp-carousel-btn { position: absolute; z-index: 2; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; padding: 0; color: #fff;
  border: 1px solid rgba(255,255,255,.16); background: rgba(22,22,26,.5) center / 16px no-repeat; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ab-ig .rp-carousel-prev { left: max(12px, calc(var(--side) - 22px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f3f1' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.ab-ig .rp-carousel-next { right: max(12px, calc(var(--side) - 22px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f3f1' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
@media (max-width: 1023px) {
  .ab-carousel__arrows, .ab-carousel::after { display: none; }
  .ab-carousel__track { padding: 0 16px; gap: 12px; }
  .ab-carousel__track .ab-tile { width: calc(100vw - 56px); max-width: 420px; aspect-ratio: 334 / 400; border-radius: var(--r-tile); transition: opacity .15s ease; }
  .ab-carousel__track .ab-tile.is-off { opacity: .45; }
  .ab-carousel__track .ab-tile .ab-tile__t { font-size: 13px; }
  .ab-form { width: auto; margin: 0 12px; border-radius: var(--r-card); padding: 24px 20px; }
  .ab-form__title { font-size: 26px; }
  .ab-form .rp-cf-row { grid-template-columns: 1fr; gap: 20px; }
  .ab-ig .rp-carousel-btn { display: none; }
  .ab-ig .rp-carousel-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0 12px; } /* 3 × 3 as on P08 */
  .ab-ig .rp-ig-item { width: auto; aspect-ratio: 1; border-radius: 12px; }
  .ab-ig .rp-ig-item:nth-child(n+10) { display: none; }
}

/* ---------------------------------------------------------------- Prints (AstraP10Prints + round 7 B3 / B10): AT A GLANCE over the header
   photo's foot (the H1 sits higher to make room), the intro with the two detail photos and the canvas clip, WHAT YOU CAN
   ORDER (photobook card, three products, the gallery-shop extras), HOW TO ORDER, BOOK A PHOTOSHOOT */
body:has(.ab-prints-top) .ab-hero h1 { bottom: 200px; }
.ab-prints-top { padding-top: 0; }
.ab-prints-top__grid { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 60px; align-items: start; }
.ab-prints-top__intro { padding-top: 54px; }
.ab-prints-top__intro p + p { margin-top: 16px; }
.ab-prints-details { display: flex; gap: var(--gap); margin-top: var(--t-block); }
.ab-prints-details img, .ab-prints-details video { width: 170px; height: 160px; flex: none; object-fit: cover; border-radius: 16px; display: block; }
.ab-glance--prints { margin: -150px 0 0 0; position: relative; z-index: 2; padding: 28px 32px 14px; }
.ab-glance--prints dl > div { grid-template-columns: 150px minmax(0, 1fr); }
.ab-layflat { display: flex; gap: 8px; padding: 8px; border-radius: var(--r-panel); align-items: stretch; }
.ab-layflat > img { width: 600px; flex: none; height: 470px; object-fit: cover; border-radius: var(--r-tile); }
.ab-layflat__text { padding: 30px 30px 20px 26px; }
.ab-layflat__text h4 { font-size: 22px; margin-bottom: 14px; text-wrap: balance; }
.ab-layflat__text p { font-size: 15px; }
.ab-layflat__text p + p { margin-top: 12px; }
.ab-mini { margin: 14px 0 0; }
.ab-mini > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 11px 0; }
.ab-mini > div + div { border-top: 1px solid rgba(255,255,255,.1); }
.ab-mini dt { font-size: 13px; color: #b9b9b4; }
.ab-mini dd { margin: 0; font-size: 14px; color: #fff; }
.ab-pics--products { margin-top: var(--gap); }
.ab-pic--wide img { aspect-ratio: 344 / 270; }
.ab-shop-head { margin-top: var(--sec); margin-bottom: var(--t-block); }
.ab-shops { width: var(--cw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ab-shop { border-radius: var(--r-tile); padding: 8px; }
.ab-shop img { width: 100%; aspect-ratio: 255 / 191; object-fit: cover; border-radius: 16px; }
.ab-shop__t { padding: 14px 10px 10px; }
.ab-shop__t h5 { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.ab-shop__t p { font-size: 13.5px; line-height: 1.5; color: var(--rp-muted); }
.ab-carousel__head .ab-sub { margin-top: var(--t-line); }
@media (max-width: 1023px) {
  body:has(.ab-prints-top) .ab-hero h1 { bottom: 110px; }
  .ab-prints-top__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; }
  .ab-glance--prints { order: 1; margin: -76px 20px 0; padding: 22px 20px 10px; }
  .ab-glance--prints dl > div { grid-template-columns: 1fr; gap: 2px; }
  .ab-prints-top__intro { order: 2; padding: 28px 16px 0; }
  .ab-prints-details { gap: 8px; }
  .ab-prints-details img, .ab-prints-details video { width: calc((100vw - 48px) / 3); height: auto; aspect-ratio: 114 / 107; }
  .ab-layflat { flex-direction: column; margin: 0 12px; border-radius: var(--r-card); }
  .ab-layflat > img { width: 100%; height: auto; aspect-ratio: 348 / 262; border-radius: 20px; }
  .ab-layflat__text { padding: 20px 12px 12px; }
  .ab-layflat__text h4 { font-size: 19px; margin-bottom: 10px; }
  .ab-mini > div { grid-template-columns: 110px minmax(0, 1fr); }
  .ab-pics--products { margin-top: 12px; }
  .ab-shop-head { margin: var(--sec) 0 var(--t-block); padding: 0 16px; }
  .ab-shops { width: auto; margin: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ab-shop__t { padding: 10px 4px 4px; }
  .ab-shop__t h5 { font-size: 13.5px; margin-bottom: 4px; }
  .ab-shop__t p { font-size: 12.5px; line-height: 1.45; }
}

/* ---------------------------------------------------------------- Partner program: the agreement card (folded), the APPLY TO JOIN dialog */
.ab-agree { width: min(880px, var(--cw)); margin: 0 auto; border-radius: var(--r-panel); padding: 32px; }
.ab-agree > p { font-size: 16px; line-height: 1.6; margin: 0 0 6px; }
.ab-agree > .ab-agree__date { margin: 0 0 22px; font-size: 13px; color: var(--rp-muted); }
.ab-fold h4 { margin: 18px 0 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ab-fold h4:first-child { margin-top: 0; }
.ab-fold p { margin: 0; font-size: 15px; line-height: 1.6; }
.ab-fold:not(.is-open) { position: relative; max-height: 360px; overflow: hidden; }
.ab-fold:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(17,17,20,0), #111114); pointer-events: none; }
.ab-fold.is-open + .ab-fold__more { display: none; }
.ab-apply__photo { display: none; }
.ab-apply .ab-form { width: auto; margin: 0; padding: 0; border-radius: 0; }
.ab-apply .ab-sheet__head h3 { font-size: 24px; text-transform: uppercase; }
/* APPLY TO JOIN (owner, 29 Oct): no photo; the same card as the contact form's SEND MESSAGE (one glass card, the title centred,
   the intro, Name / Email side by side, Message, SEND centred, the small line under it), as wide as that card */
.ab-apply .ab-sheet__head { position: relative; justify-content: center; text-align: center; }
.ab-apply .ab-sheet__head h3 { flex: 1; text-align: center; padding: 0 48px; }
.ab-apply .ab-form__intro { text-align: center; }
@media (min-width: 1024px) {
  .ab-apply .ab-sheet__panel { width: min(880px, calc(100vw - 48px)); max-height: 88vh; overflow-y: auto; display: block; padding: 32px; border-radius: var(--r-panel);
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.40);
    -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 18px 50px rgba(0,0,0,.45); }
  .ab-apply .ab-sheet__head h3 { font-size: 36px; }
}
@media (max-width: 1023px) {
  .ab-agree { width: auto; margin: 0 12px; border-radius: var(--r-card); padding: 24px 20px; }
  .ab-agree > p { font-size: 15px; }
  .ab-fold h4 { font-size: 15px; }
  .ab-fold p { font-size: 14px; }
  .ab-fold:not(.is-open) { max-height: 420px; }
  .ab-apply .ab-form { margin: 0; padding: 0 2px; }
  .ab-apply .ab-form .rp-cf-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- a blog-kit post (template “Astra” on a post, board AstraP15BlogPost): the 700 reading
   column, pairs and trios in a 900 row, rounded photos, captions centered, the lead photo with the session card in glass */
.ab-post { padding: 150px 0 var(--sec); }
.ab-post__head { width: min(900px, var(--cw)); margin: 0 auto; text-align: center; }
.ab-post__head .ab-label { margin-bottom: 14px; }
.ab-post__head h1 { margin: 0 0 14px; font-size: 44px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.ab-post__by { margin: 0; font-size: 14px; color: var(--rp-muted); }
.astra .ab-post__by a { color: var(--rp-gold); }
.ab-post__top { width: min(900px, var(--cw)); margin: 36px auto 40px; }
.ab-post__lead figure { margin: 0; }
.ab-post__lead img { display: block; width: 100%; height: auto; border-radius: var(--r-card); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.ab-post__top.is-narrow .ab-post__lead { width: 450px; margin: 0 auto; }
.ab-post__top.is-wide .ab-post__lead { width: min(700px, 100%); margin: 0 auto; }
.ab-post__top.is-narrow.has-card { display: grid; grid-template-columns: 105px 370px 80px 345px; grid-template-rows: 330px auto; }
.ab-post__top.is-narrow.has-card .ab-post__lead { grid-column: 2 / 4; grid-row: 1 / 3; width: 450px; margin: 0; }
.ab-post__top.is-narrow.has-card .ab-post__card { grid-column: 3 / 5; grid-row: 2; align-self: start; }
.ab-post__top.is-wide.has-card .ab-post__card { position: relative; width: 430px; margin: -96px 0 0 auto; }
.ab-post__card { border-radius: var(--r-card); padding: 28px 32px 14px 36px; --tint: .36; --blur: 28px; position: relative; z-index: 1; } /* F11: 28 px, the Build rules' most */
.ab-post__card dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; margin: 12px 0 0; }
.ab-post__card dt, .ab-post__card dd { padding: 13px 0; }
.ab-post__card dt { font-size: 14px; color: #b9b9b4; }
.ab-post__card dd { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; font-weight: 400; }
.ab-post__card dt ~ dt, .ab-post__card dt ~ dt + dd { border-top: 1px solid rgba(255,255,255,.10); }
.ab-post .rpb > * { max-width: 700px; margin-left: auto; margin-right: auto; }
.ab-post .rpb p { margin-top: 0; margin-bottom: 18px; font-size: 17px; line-height: 1.7; }
.ab-post .rpb h2 { margin-top: 56px; margin-bottom: 14px; font-size: 28px; line-height: 1.25; font-weight: 600; text-transform: none; letter-spacing: 0; scroll-margin-top: 110px; }
.ab-post .rpb h3 { margin-top: 36px; margin-bottom: 10px; font-size: 20px; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; scroll-margin-top: 110px; }
.ab-post .rpb .rpb-facts { margin-top: -4px; margin-bottom: 14px; font-size: 14px; line-height: 1.5; color: var(--rp-muted); }
.ab-post .rpb figure { margin: 16px auto 28px; }
.ab-post .rpb img { display: block; width: 100%; height: auto; border-radius: var(--r-tile); }
.ab-post .rpb figcaption { margin-top: 10px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--rp-muted); }
.ab-post .rpb > .rpb-narrow, .ab-post .rpb > .rpb-clip { max-width: 450px; }
.ab-post .rpb > .rpb-clip.rpb-clip-wide { max-width: 700px; }
.ab-post .rpb-clip video { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: cover; border-radius: var(--r-tile); background: #0e0e10; }
.ab-post .rpb > .rpb-pair, .ab-post .rpb > .rpb-trio, .ab-post .rpb > .rpb-four, .ab-post .rpb > .rpb-side { max-width: 900px; margin-top: 16px; margin-bottom: 28px; display: grid; gap: 12px; }
.ab-post .rpb-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-post .rpb-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-post .rpb-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-post .rpb-pair figure, .ab-post .rpb-trio figure, .ab-post .rpb-four figure, .ab-post .rpb-side figure { margin: 0; }
.ab-post .rpb-pair figcaption, .ab-post .rpb-trio figcaption, .ab-post .rpb-four figcaption { text-align: left; }
.ab-post .rpb > .rpb-side { grid-template-columns: 2fr 3fr; gap: 32px; align-items: center; }
.ab-post .rpb-side p { margin-bottom: 0; }
.ab-post .rpb-box { margin-top: 28px; margin-bottom: 32px; border-radius: var(--r-card); padding: 28px 32px 18px; background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 70px rgba(0,0,0,.55); }
.ab-post .rpb-box .rpb-box-title { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #b9b9b4; }
.ab-post .rpb-box dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 14px; margin: 0; }
.ab-post .rpb-box dt, .ab-post .rpb-box dd { padding: 12px 0; }
.ab-post .rpb-box dt { font-size: 14px; color: #b9b9b4; }
.ab-post .rpb-box dd { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; font-weight: 400; }
.ab-post .rpb-box dt ~ dt, .ab-post .rpb-box dt ~ dt + dd { border-top: 1px solid rgba(255,255,255,.10); }
.ab-post .rpb-note p:last-child { margin-bottom: 10px; }
.ab-post .rpb .rpb-closing { margin-top: 28px; margin-bottom: 0; }
@media (max-width: 1023px) {
  .ab-post { padding-top: 96px; }
  .ab-post__head { width: auto; margin: 0; padding: 0 16px; text-align: left; }
  .ab-post__head .ab-label { margin-bottom: 10px; }
  .ab-post__head h1 { margin-bottom: 10px; font-size: 27px; }
  .ab-post__by { font-size: 12.5px; }
  .ab-post__top, .ab-post__top.is-narrow.has-card { display: block; width: auto; margin: 20px 12px 24px; }
  .ab-post__top.is-narrow .ab-post__lead, .ab-post__top.is-wide .ab-post__lead, .ab-post__top.is-narrow.has-card .ab-post__lead { width: auto; margin: 0; }
  .ab-post__lead img { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
  .ab-post__top .ab-post__card, .ab-post__top.is-wide.has-card .ab-post__card { width: auto; margin: -100px 16px 0; padding: 20px 20px 10px; }
  .ab-post__top.is-wide.has-card .ab-post__card { margin-top: -48px; }
  .ab-post__card dl, .ab-post .rpb-box dl { grid-template-columns: 1fr; margin-top: 8px; }
  .ab-post__card dt, .ab-post .rpb-box dt { padding: 10px 0 2px; font-size: 13px; }
  .ab-post__card dd, .ab-post .rpb-box dd { padding: 0 0 10px; font-size: 14px; }
  .ab-post__card dt ~ dt + dd, .ab-post .rpb-box dt ~ dt + dd { border-top: 0; }
  .ab-post .rpb > * { max-width: none; margin-left: 16px; margin-right: 16px; }
  .ab-post .rpb p { font-size: 16px; }
  .ab-post .rpb h2 { margin-top: 40px; font-size: 22px; scroll-margin-top: 16px; }
  .ab-post .rpb h3 { margin-top: 28px; font-size: 18px; scroll-margin-top: 16px; }
  .ab-post .rpb > figure, .ab-post .rpb > .rpb-pair, .ab-post .rpb > .rpb-trio, .ab-post .rpb > .rpb-four { margin: 16px 12px; }
  .ab-post .rpb > .rpb-narrow { max-width: none; }
  .ab-post .rpb > .rpb-clip, .ab-post .rpb > .rpb-clip.rpb-clip-wide { max-width: 300px; margin-left: auto; margin-right: auto; }
  .ab-post .rpb > .rpb-pair, .ab-post .rpb > .rpb-trio, .ab-post .rpb > .rpb-four { gap: 8px; }
  .ab-post .rpb-pair img, .ab-post .rpb-four img { border-radius: var(--r-small); }
  .ab-post .rpb-trio img { border-radius: 12px; }
  .ab-post .rpb-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-post .rpb figcaption { font-size: 12px; padding: 0 4px; }
  .ab-post .rpb > .rpb-side { display: block; margin: 16px 0 28px; }
  .ab-post .rpb-side figure { margin: 0 12px 16px; }
  .ab-post .rpb-side p { margin: 0 16px; }
  .ab-post .rpb-box { margin: 24px 12px 28px; padding: 22px 20px 12px; }
}

/* ---------------------------------------------------------------- an older post (legacy view, no blog kit; 28 Oct 2026: one look on go-live day):
   her old content as it is in a calm 700 px column; WPBakery's rows are plain blocks; the Meow gallery's photos in two
   columns (the first across), each in its own shape, without the gallery script */
.ab-legacy__body { width: min(700px, var(--cw)); margin: 36px auto 0; }
.ab-legacy__body .vc_row, .ab-legacy__body .wpb_column, .ab-legacy__body .vc_column-inner, .ab-legacy__body .wpb_wrapper, .ab-legacy__body .wpb_content_element { margin: 0; padding: 0; width: auto; float: none; }
.ab-legacy__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; text-align: left !important; }
.ab-legacy__body h2, .ab-legacy__body h3, .ab-legacy__body h4 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; text-align: left !important; text-wrap: balance; }
.ab-legacy__body h2 span, .ab-legacy__body h3 span, .ab-legacy__body h4 span, .ab-legacy__body p span { font-size: inherit !important; }
.ab-legacy__body ul, .ab-legacy__body ol { margin: 0 0 18px; padding-left: 22px; font-size: 17px; line-height: 1.7; }
.ab-legacy__body img { max-width: 100%; height: auto; border-radius: var(--r-tile); }
.ab-legacy__body iframe, .ab-legacy__body video { display: block; max-width: 100%; border-radius: var(--r-tile); margin: 0 auto 28px; }
.ab-legacy .mgl-root { position: relative; left: 50%; width: min(900px, calc(100vw - 24px)); transform: translateX(-50%); margin: 0 0 40px; }
.ab-legacy .mgl-gallery-container, .ab-legacy .mgl-gallery-skeleton { display: none; }
.ab-legacy .mgl-gallery-images { columns: 2; column-gap: 12px; }
.ab-legacy .mgl-gallery-images img { display: block; width: 100%; height: auto; margin: 0 0 12px; break-inside: avoid; border-radius: var(--r-tile); }
.ab-legacy .mgl-gallery-images img:first-child { column-span: all; }
.ab-legacy__body .ab-center { margin: 32px 0 28px; } /* QA Q24: never on the photo under it */
.ab-legacy__body .ab-center .ab-btn { max-width: 100%; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; white-space: normal; text-align: center; line-height: 1.35; } /* her own long button texts wrap instead of running off a phone */
@media (max-width: 1023px) {
  .ab-legacy__body { width: auto; margin: 24px 16px 0; }
  .ab-legacy__body p, .ab-legacy__body ul, .ab-legacy__body ol { font-size: 16px; }
  .ab-legacy__body h2, .ab-legacy__body h3, .ab-legacy__body h4 { margin-top: 32px; font-size: 19px; }
  .ab-legacy .mgl-root { width: calc(100vw - 24px); margin-bottom: 28px; }
  .ab-legacy .mgl-gallery-images { column-gap: 8px; }
  .ab-legacy .mgl-gallery-images img { margin-bottom: 8px; border-radius: var(--r-small); }
  .ab-legacy .mgl-gallery-images img:first-child { border-radius: var(--r-tile); }
  .ab-legacy__body .ab-center .ab-btn { min-height: 44px; }
}

/* ---------------------------------------------------------------- the views without a page template: 404, the product page (archives and
   search use the Portfolio pieces: page top, chip row, story cards) */
.ab-pagetop__intro { margin-top: var(--t-line); }
.ab-404 { min-height: 70vh; display: flex; align-items: center; padding-top: 150px; text-align: center; }
.ab-404 h1 { font-size: 54px; text-transform: uppercase; }
.ab-404 h1 span { color: var(--rp-gold); }
.ab-404 p { margin-top: var(--t-line); color: var(--rp-muted); }
.ab-product { width: min(900px, var(--cw)); margin: 0 auto; border-radius: var(--r-panel); padding: 8px; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; }
.ab-product__photo img { display: block; width: 100%; height: auto; border-radius: var(--r-tile); }
.ab-product__body { width: auto; margin: 0; padding: 24px 24px 24px 0; }
.ab-product__body h1, .ab-product__body h2, .ab-product__body h3, .ab-product__body h4, .ab-product__body h5 { margin: 20px 0 8px; font-size: 19px; text-transform: uppercase; }
.ab-product__body .wpb_text_column p, .ab-product__body .wpb_wrapper { font-size: 16px; }
@media (max-width: 1023px) {
  .ab-404 { padding-top: 96px; }
  .ab-404 h1 { font-size: 27px; }
  .ab-product { display: block; width: auto; margin: 0 12px; border-radius: var(--r-card); }
  .ab-product__body { padding: 20px 12px 16px; }
}

/* City pages (Astra city pages build, 29 Oct 2026; requests R1 / R2 in work/build/city-pages-css-requests.md, decided by the design session) */
/* R1: their package photos are 560 × 374 files; on desktop the photo column keeps that shape (about 512 × 341) at the top of the card
   instead of the 700 px tall column, so they are never enlarged */
@media (min-width: 1024px) {
  .ab-pkg--land { align-items: center; }
  .ab-pkg--land .ab-pkg__photos { min-height: 0; aspect-ratio: 3 / 2; align-self: center; } /* centred in the card (design QA, 29 Oct) */
}
/* R2: phones: package titles take two lines' room, so every quick card in the row is one height */
@media (max-width: 1023px) {
  .ab-pkg--land .ab-pkg__title { min-height: 2.3em; }
}

/* ---------------------------------------------------------------- design QA and accessibility (29 Oct 2026, decided by the design session) */
.ab-home__row .ab-btn { height: 48px; padding: 0 30px; } /* LEARN MORE is a Large button (phones 44, above) */
@media (max-width: 1023px) { .ab-home__row .ab-btn { height: 44px; padding: 0 26px; } }
@media (min-width: 1024px) { .ab-head + .ab-chiprow { justify-content: center; } } /* gallery chips centred under a centred title (left under Portfolio's) */
.ab-post .rpb h2 { text-wrap: balance; }
/* R3: a carousel with one photo has no arrows or dots */
.ab-car:not(:has(.ab-car__track > img ~ img)) :is(.ab-car__prev, .ab-car__next, .ab-car__dots) { display: none; } /* one photo: no controls (~: a <noscript> may sit between the photos) */
/* T2: links inside running text are underlined as well as gold (1 px, 3 px offset) */
.ab-faq-end a, .ab-q__a p a, .ab-post .rpb p a, .ab-post .rpb li a, .ab-legacy__body p a, .ab-legacy__body li a, .ab-intro p a, .ab-sub a { text-decoration: none; }
/* T3: link lists in FAQ answers and Contact's small links reach a 24 px touch height */
.ab-q__a li a, .ab-intro a, .ab-form__intro a { display: inline-block; min-height: 24px; line-height: 24px; }
/* R4 (city pages' closing text, and any long text under a centred title): a centred 760 px reading column */
.ab-read { max-width: 760px; margin: 0 auto; }
.ab-read p + p { margin-top: 14px; }
/* R5: one-word Dutch package titles get the hyphen at the joint where .ab-br breaks the line (phones only) */
@media (max-width: 1023px) { .ab-pkg__title .ab-hy::after { content: "-"; } }

/* ---------------------------------------------------------------- the owner's phone feedback (29 Oct 2026, 10:15–10:50, Pixel and iPhone; items 1–15 decided by
   the design session; Project Astra/work/build/theme-pages-log.md §25) */
.ab-q { scroll-margin-top: 110px; } /* 9: a shared link to a question lands below the fixed bar */
/* 4: the three text cards of a product page as one card, the texts in three columns with thin lines between */
.ab-trio { gap: 0; padding: 8px; border-radius: var(--r-panel); background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 70px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4); }
.ab-trio > .ab-trio__card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 24px 28px; }
.ab-trio > .ab-trio__card + .ab-trio__card { border-left: 1px solid rgba(255,255,255,.10); }
/* 14: desktop Photoshoots and Locations: two cards per row, the horizontal photos uncropped, an odd last card across */
@media (min-width: 1024px) {
  .ab-tiles--page, .ab-tiles--page.ab-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .ab-tiles--page .ab-tile, .ab-tiles--page.ab-tiles--5 .ab-tile, .ab-tiles--page .ab-tile--price { aspect-ratio: 4 / 3; }
  .ab-tiles--page .ab-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ab-tiles--page .ab-tile__t { font-size: 15px; }
  .ab-tiles--page .ab-tile__t small { font-size: 13px; }
}
@media (max-width: 1023px) {
  /* 1: the tab bar lower (10 px + the safe area); floating pieces stay 12 px above it */
  .astra { --bar-h: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .ab-tabs { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transition: transform .25s ease, opacity .15s ease; }
  .ab-home__nav { bottom: var(--bar-h); }
  /* 11: the tab bar and the round BOOK slide away on scroll down, back on any scroll up and at the end */
  html.ab-bars-hidden .ab-tabs { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); pointer-events: none; }
  /* 2: titles on photos low, about 28 px above the edge */
  .ab-hero h1 { bottom: 28px; }
  /* 3: the package quick card: a 4 : 5 portrait photo, the intro at most three lines (the rest under WHAT'S INCLUDED) */
  .ab-pkg__photos { height: auto; aspect-ratio: 4 / 5; }
  .ab-pkg__body > .ab-pkg__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ab-sheet .ab-pkg__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  /* 4 on phones: the texts stacked inside the one card, a thin line between */
  .ab-trio { border-radius: var(--r-card); padding: 4px; }
  .ab-trio > .ab-trio__card { padding: 20px 16px; }
  .ab-trio > .ab-trio__card + .ab-trio__card { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); }
  /* 5, 6: Photoshoots and Locations one card per row, the photo in its own shape, the plate across */
  .ab-tiles--page, .ab-tiles--page.ab-tiles--5 { grid-template-columns: 1fr; }
  .ab-tiles--page .ab-tile, .ab-tiles--page.ab-tiles--5 .ab-tile, .ab-tiles--page .ab-tile--price { aspect-ratio: 4 / 3; }
  .ab-tiles--page .ab-tile__t { font-size: 13px; }
  .ab-tiles--page .ab-tile__t small.ab-tile__line { min-height: 0; }
  /* 6: the location tiles on product pages stay 2 × 2 with a smaller, lower plate */
  .ab-tiles:not(.ab-tiles--page) .ab-tile__label { left: 5px; right: 5px; bottom: 5px; padding: 6px 5px 6px 8px; border-radius: 7px; }
  .ab-tiles:not(.ab-tiles--page) .ab-tile__t { font-size: 9.5px; gap: 2px; }
  .ab-tiles:not(.ab-tiles--page) .ab-tile__t small.ab-tile__line { font-size: 8.5px; min-height: 3.6em; }
  .ab-tiles:not(.ab-tiles--page) .ab-tile__go { width: 20px; height: 20px; }
  .ab-tiles:not(.ab-tiles--page) .ab-tile__go svg { width: 10px; height: 10px; }
  /* 10: About's header photo whole and vertical on phones */
  .ab-about-top__photo img { height: auto; aspect-ratio: 3 / 4; object-position: center; }
  /* 13: the menu sheet's × above the list, not on the first row's arrow */
  .ab-menu__panel { padding-top: 64px; }
}
@media (max-width: 374px) { .ab-tiles:not(.ab-tiles--page) .ab-tile__t small.ab-tile__line { min-height: 4.8em; } }
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .ab-tabs { transition: opacity .15s ease; }
  html.ab-bars-hidden .ab-tabs { transform: none; opacity: 0; }
}

/* T4: the same look for the new heading levels (section titles h2, card titles h3) */
.ab-trio__card h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; text-wrap: balance; }
.ab-pic__t h3 { font-size: 17px; letter-spacing: .3px; text-transform: uppercase; }
.ab-story h3, .ab-story h2 { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-wrap: balance; }
.ab-topic__body h2 { font-size: 30px; text-transform: uppercase; margin-bottom: 8px; }
.ab-charity__body h3 { font-size: 18px; margin-bottom: 12px; text-transform: uppercase; }
.ab-layflat__text h3 { font-size: 22px; margin-bottom: 14px; text-wrap: balance; }
.ab-shop__t h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.ab-fold h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ab-fold h3:first-child { margin-top: 0; }
h2.ab-label { line-height: inherit; }
@media (max-width: 1023px) {
  .ab-trio__card h3 { font-size: 17px; margin-bottom: 10px; }
  .ab-pic__t h3 { font-size: 16px; }
  .ab-mas--grid .ab-story h3, .ab-mas--grid .ab-story h2 { font-size: 13px; }
  .ab-topic__body h2 { font-size: 24px; margin-bottom: 6px; }
  .ab-charity__body h3 { font-size: 17px; }
  .ab-layflat__text h3 { font-size: 19px; margin-bottom: 10px; }
  .ab-shop__t h3 { font-size: 13.5px; margin-bottom: 4px; }
  .ab-fold h3 { font-size: 15px; }
}
/* 7: FAQ topics: a vertical crop of the photo beside the text on desktop, the wide slice on phones (same photo) */
@media (min-width: 1024px) { .ab-topic__photo img { height: auto; aspect-ratio: 4 / 5; } }
/* 8: BOOK NOW on phones: each photoshoot's vertical booking photo (a <picture> source), cards 4 : 5 */
.ab-tile picture { display: contents; }
@media (max-width: 1023px) { .ab-carousel__track .ab-tile { aspect-ratio: 4 / 5; } }
/* 15: About: the photo first in MY APPROACH on phones (as on live's order she knows), on the right on desktop as drawn */
@media (min-width: 1024px) { .ab-appr__photo { order: 2; } }

/* WooCommerce's own screens in the Astra frame (views switch “shop”; order-pay after a cancelled payment): her content as it is,
   with the site's type and colours; WooCommerce's own styles still load there */
.ab-shop-page .ab-wrap { max-width: 880px; }
.ab-shop-page, .ab-shop-page p, .ab-shop-page td, .ab-shop-page th, .ab-shop-page label { font-size: 15px; color: var(--rp-text); }
.ab-shop-page table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.ab-shop-page th, .ab-shop-page td { padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.10); text-align: left; }
.ab-shop-page a { color: var(--rp-gold); }
.ab-shop-page .woocommerce-checkout-payment, .ab-shop-page #payment { border-radius: var(--r-card); padding: 20px; background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.07); }
.ab-shop-page button.button, .ab-shop-page .button, .ab-shop-page #place_order { height: 48px; padding: 0 30px; border-radius: 999px; border: 0; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: #1a1208; background: linear-gradient(180deg, #dcae79 0%, #c48f56 55%, #b37e48 100%); cursor: pointer; }
/* only paying is gold (two button styles): every other WooCommerce button outlined glass; the account screens' forms (login, lost
   password) in a dark card with the contact form's fields */
.ab-shop-page .woocommerce .button:not(#place_order) { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 30px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); color: var(--rp-text); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; }
.ab-shop-page .woocommerce form.login, .ab-shop-page .woocommerce form.register, .ab-shop-page .woocommerce form.lost_reset_password, .ab-shop-page .woocommerce form.woocommerce-ResetPassword {
  margin: 0; padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); background: linear-gradient(180deg, #17171b, #0e0e11); }
.ab-shop-page .woocommerce form .form-row { margin: 0 0 18px; padding: 0; }
.ab-shop-page .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox) { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #b9b9b4; }
.ab-shop-page .woocommerce form .form-row .required { color: inherit; text-decoration: none; }
/* (Novo's own field rule is stronger: a line under the field only; these win by weight and !important on the box) */
.ab-shop-page .woocommerce form .form-row .input-text { width: 100%; height: 52px !important; padding: 0 18px !important; border-radius: 16px !important; font: inherit; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); outline: 0; }
.ab-shop-page .woocommerce form .form-row .input-text:focus { border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 4px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.05); }
.ab-shop-page .woocommerce .show-password-input { display: none; }
.ab-shop-page .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 0 0; }
.ab-shop-page .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ab-shop-page .woocommerce h2 { margin: 0 0 16px; font-size: 22px; text-transform: uppercase; }

/* Home on phones (design session, 29 Oct, Build rules §7): the carousel dots instead of the thumbnail strip and the counter; the dots
   16 px above the tab bar, the text 24 px above the dots (desktop keeps the strip and the counter) */
.ab-home__dots { display: none; }
@media (max-width: 1023px) {
  .ab-home__nav { display: none; }
  .ab-home__dots { display: flex; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .ab-home__txt { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- the cookie banner: rp-consent (31 Oct 2026) brings its own styles
   inline; nothing for it here (the old banner's variables, ::part() rules and phone rules are gone with it) */

/* ---------------------------------------------------------------- working and done (owner, 29 Oct: “if something takes time,
   there need to be like a visual feedback that something is happening”; style guide “Working and done”, reference CSS):
   a ring in the button after 300 ms (at least 500 ms once shown), the done line in a glass capsule for 3 s, cards rise in */
.is-busy { color: transparent !important; pointer-events: none; position: relative; }
.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--busy, #fff); border-right-color: transparent; animation: busy-spin .8s linear infinite; }
.is-gold.is-busy, .ab-btn--gold.is-busy { --busy: #1a1208; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::after, .astra .is-busy::after { animation: busy-pulse 1.2s ease-in-out infinite !important; } } /* beats the page's “no animation” rule */
@keyframes busy-pulse { 50% { opacity: .35; } }
/* an <input> button has no ::after: a wrapper of its size carries the ring, the input's text turns transparent */
.ab-busywrap { position: relative; display: inline-flex; }
.ab-busywrap.is-busy > input { color: transparent !important; }
.ab-form .ab-busywrap.is-busy > .rp-cf-btn:disabled { opacity: 1; }
.done-line { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px); z-index: 60; transform: translate(-50%, -8px); opacity: 0;
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 10px; border-radius: 999px; white-space: nowrap;
  color: #fff; font-size: 14px; font-weight: 500; background: rgba(22,22,26,.74); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .15s ease, transform .25s ease; pointer-events: none; }
.done-line.is-on { opacity: 1; transform: translate(-50%, 0); }
.done-line svg { flex: none; }
/* new cards from “Discover more” and the Portfolio chips rise in (the site's rise-in), a little after one another */
.ab-rise { animation: ab-up .25s ease both; animation-delay: var(--rise-d, 0ms); }
@media (prefers-reduced-motion: reduce) { .ab-rise { animation: none; } }
/* a form's error answer: under the button, in the booking flow's error colour, until the next try */
.ab-form form.invalid .wpcf7-response-output, .ab-form form.failed .wpcf7-response-output, .ab-form form.aborted .wpcf7-response-output,
.ab-form form.spam .wpcf7-response-output { margin-top: 14px; color: #f1c7c0; }
/* F3 (speed audit): a card held at its usual size while its story loads: a 4 : 5 photo, the title and three excerpt lines */
.ab-story--ph { pointer-events: none; }
.ab-story__ph { display: block; aspect-ratio: 4 / 5; border-radius: 16px; background: rgba(255,255,255,.05); }
.ab-story__phl { display: block; height: 14px; margin: 6px 0 12px; border-radius: 7px; background: rgba(255,255,255,.07); }
.ab-story__phl + .ab-story__phl { width: 72%; height: 60px; margin-bottom: 0; background: rgba(255,255,255,.04); }

/* QA (29 Oct): the EN | NL links reach 24 × 24 px (accessibility decision, tester's E6) without changing the chip's look */
.ab-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin: -3px -4px; padding: 0 4px; }
/* ---------------------------------------------------------------- compact plates on photo cards (owner via the design session, 29 Oct): the glass
   plate hugs its content, centered at the bottom (20 px desktop, 16 px phones), at most the card width − 32; no arrow circle
   (the whole card is the link); the title 15 px semibold uppercase, a 13 px line under it (prices gold, city lines gray, as
   live); one line where every tile in the row fits it (astra.js sets .ab-tiles--one), otherwise every line breaks after
   “photoshoot” / “fotoshoot” (QA Q3; 11 px on the small phone tiles). One plate height per row. */
.astra .ab-tile .ab-tile__go { display: none; }
.astra .ab-tile .ab-tile__label { left: 50%; right: auto; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  justify-content: center; padding: 10px 16px; border-radius: 14px; transition: background-color .15s ease, box-shadow .15s ease; }
.astra .ab-tile .ab-tile__t { align-items: center; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: 1px; gap: 3px; }
.astra .ab-tile .ab-tile__t small { font-size: 13px; letter-spacing: 0; }
.astra .ab-tile .ab-tile__t small.ab-tile__line { font-size: 13px; font-weight: 400; color: #b9b9b4; min-height: 2.7em; white-space: normal; text-wrap: wrap; }
.astra .ab-tiles--one .ab-tile .ab-tile__t small.ab-tile__line, .astra .ab-tiles--one .ab-tile .ab-tile__t small.ab-tile__line { min-height: 0; white-space: nowrap; }
.ab-tiles--one .ab-br-ps { display: none; }
@media (max-width: 1023px) {
  .astra .ab-tile .ab-tile__label { bottom: 16px; padding: 8px 12px; border-radius: 12px; }
  .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t { font-size: 12px; letter-spacing: .6px; }
  .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small { font-size: 11px; }
  .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small.ab-tile__line { font-size: 11px; min-height: 2.7em; }
}
@media (hover: hover) {
  .ab-tile { transition: transform .25s ease, box-shadow .15s ease; }
  .ab-tile:hover { translate: 0 -1px; }
  .astra .ab-tile:hover .ab-tile__label { background-color: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.12); }
}

/* ---------------------------------------------------------------- visual QA round 2 (independent review, decided by the design session, 29 Oct) */
/* Q5: links in running text underlined (buttons, chips, cards, nav and footer lists keep their look) */
.astra .ab-page :is(p, li, dd) a:not(.ab-btn):not(.ab-chip2):not(.ab-tile):not(.ab-story) { text-decoration: none; }
/* Q6: chip rows on phones: room after the last chip, and a peek of the next one */
@media (max-width: 1023px) {
  .ab-chiprow { padding-right: 32px; scroll-padding: 0 16px; }
  .ab-chiprow .ab-chip2, .astra .ab-chiprow a.ab-chip2 { padding: 0 14px; }
}
/* Q7: a dark scrim at the top of every photo hero, so the name, EN | NL and the menu stay readable on any photo */
.ab-hero__frame::before, .ab-home__frame::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); border-radius: inherit; }
@media (max-width: 1023px) { .ab-hero__frame::before, .ab-home__frame::before { height: 96px; } }
/* Q8: no lone words: balanced card titles and captions, Dutch titles may hyphenate, legal links whole */
.ab-pic__t h4, .ab-charity__body h4, .ab-shop__t h5, .ab-trio__card h4, .ab-foot__brand p, figcaption { text-wrap: balance; }
:lang(nl) .ab-pic__t h4, :lang(nl) .ab-charity__body h4 { hyphens: auto; -webkit-hyphens: auto; }
.ab-foot__bottom a { white-space: nowrap; }
.ab-foot__bottom > span { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; } /* each item wraps whole between the vertical lines (they had no break point) */
/* Q9: Home's slide titles on one line below 400 px (the longest EN / NL title within 358 px) */
@media (max-width: 399px) { .ab-home__t { font-size: 24px; } }
/* Q12: About: room between the approach photo and its text on phones */
@media (max-width: 1023px) { .ab-appr__photo { margin-bottom: 20px; } }
/* Q14: FAQ topic sub-lines readable on the dark card */
.ab-topic__line p { color: #b9b9b4; }
/* Q15: Contact's BOOK NOW row ends at the content column (whole cards, the arrows move it) */
@media (min-width: 1024px) { .ab-carousel { width: var(--cw); margin-left: auto; margin-right: auto; overflow: hidden; } .ab-carousel__track { padding-left: 0; padding-right: 0; scroll-padding: 0; } }
/* Q16: the agreement's button never reads as full width on small phones */
@media (max-width: 419px) { .ab-agree .ab-btn { letter-spacing: .6px; padding-left: 18px; padding-right: 18px; } }
/* Q17–Q19, Q21: Prints */
@media (max-width: 1023px) {
  .ab-layflat { margin-left: 16px; margin-right: 16px; width: auto; }
  .ab-layflat dl > div { display: block; } .ab-layflat dl dt { margin-bottom: 2px; } .ab-layflat dl dd { margin-left: 0; text-align: left; }
  .ab-shop__t h5 { min-height: 2.7em; }
}
.ab-pics--products .ab-pic__t, .ab-pics--products .ab-pic__t h4, .ab-pics--products .ab-pic__t p { text-align: left; }
/* the FAQ's end line (and TFP's): a centred glass pill, a balanced two-line card on phones when it can't fit one line */
.ab-faq-end { display: flex; align-items: center; justify-content: center; gap: .35em; width: fit-content; max-width: min(640px, calc(100% - 32px)); min-height: 56px; margin: 48px auto 0;
  padding: 0 28px; border-radius: 999px; font-size: 16px; text-align: center; text-wrap: balance; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 48%, rgba(255,255,255,.06)), rgba(22,22,26,.34); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.ab-faq-end a { color: var(--rp-gold); text-decoration: none; }
@media (max-width: 1023px) { .ab-faq-end { margin-top: 32px; border-radius: 28px; padding: 16px 20px; display: block; } }
/* order-pay after a cancelled payment: WooCommerce's notices in the site's error look (under the booking flow's sheet) */
.ab-shop-page .woocommerce-error, .ab-shop-page .woocommerce-info, .ab-shop-page .woocommerce-message { list-style: none; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(214,110,96,.35);
  background: rgba(214,110,96,.12); color: #f1c7c0; font-size: 14px; }
.ab-shop-page .woocommerce-info, .ab-shop-page .woocommerce-message { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--rp-text); }
.ab-shop-page .woocommerce-error::before, .ab-shop-page .woocommerce-info::before, .ab-shop-page .woocommerce-message::before { display: none; }
.ab-shop-page .woocommerce-error li { margin: 0; }
/* F4: the city pages' package cards keep their own landscape photos on phones too (sharp, no 4 : 5 crop) */
@media (max-width: 1023px) { .ab-pkg--land .ab-pkg__photos { aspect-ratio: 3 / 2; height: auto; } }

/* ---------------------------------------------------------------- everything you can press reacts (owner, 29 Oct; style guide): ONE set of rules for
   every button, capsule, chip, arrow, round icon button, photo card, tab and switch. Hover only on pointer devices (the glass a
   touch brighter with a lighter edge, a 1 px lift, gold a little brighter, 160 ms); press on every device (scale .97); the
   focus ring for keyboards (.astra :focus-visible above). Nothing while disabled or working; reduced motion: brightness only. */
:is(.ab-btn, .ab-circle, .ab-chip, .ab-chip2, .ab-nav__menu, .ab-nav__link, .ab-nav__items a, .ab-switch a, .ab-switch button, .ab-tabs a, .ab-menu__list a, .ab-lang a,
  .ab-socials a, .rp-cf-btn, .ab-rating, .ab-story, .ab-q summary, .ab-faq-end a, .ab-addon, .ab-pkg__open) {
  transition: translate .25s ease, scale .25s ease, transform .25s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) {
  :is(.ab-btn, .ab-circle, .ab-chip2, .ab-nav__menu, .rp-cf-btn, .ab-socials a, .ab-rating, .ab-addon):not(:disabled):not(.is-busy):not([aria-busy="true"]):hover {
    translate: 0 -1px; filter: brightness(1.14); border-color: rgba(255,255,255,.28); }
  .ab-btn--gold:not(:disabled):not(.is-busy):hover, .astra a.ab-btn--gold:hover { filter: brightness(1.06); }
  :is(.ab-switch a, .ab-switch button, .ab-tabs a, .ab-nav__items a, .ab-nav__link):not(.is-on):not([aria-current="page"]):hover { background-color: rgba(255,255,255,.08); }
  .ab-story:hover { translate: 0 -1px; filter: brightness(1.06); }
  :is(.ab-nav__items a, .ab-nav__link, .ab-switch a, .ab-switch button):not(.is-on):hover { color: #fff; }
  .ab-q summary:hover { color: #fff; background-color: rgba(255,255,255,.04); }
  .ab-page :is(p, li, dd) a:not(.ab-btn):not(.ab-chip2):hover, .ab-faq-end a:hover { color: var(--rp-gold-l); }
}
:is(.ab-btn, .ab-circle, .ab-chip, .ab-chip2, .ab-nav__menu, .ab-nav__items a, .ab-nav__link, .ab-lang a, .ab-switch a, .ab-switch button, .ab-tabs a, .ab-menu__list a, .ab-socials a, .rp-cf-btn, .ab-rating, .ab-tile, .ab-story, .ab-addon, .ab-pkg__open):not(:disabled):not(.is-busy):not([aria-busy="true"]):active {
  translate: none; scale: .97; }
.ab-busywrap.is-busy > .rp-cf-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.ab-btn, .ab-circle, .ab-chip2, .ab-nav__menu, .rp-cf-btn, .ab-socials a, .ab-rating, .ab-tile, .ab-story, .ab-addon):hover { translate: none !important; }
  :is(.ab-btn, .ab-circle, .ab-chip, .ab-chip2, .ab-nav__menu, .ab-nav__items a, .ab-nav__link, .ab-lang a, .ab-switch a, .ab-switch button, .ab-tabs a, .ab-menu__list a, .ab-socials a, .rp-cf-btn, .ab-rating, .ab-tile, .ab-story, .ab-addon, .ab-pkg__open):active { translate: none !important; scale: none !important; }
}
/* the × of a dialog or sheet: the ring only for keyboard focus, never after a mouse open (owner, Partner program) */
.astra :is(.ab-sheet__x, .ab-menu__x, .ab-circle):focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- Home (owner, 29 Oct): one action, the price is the button (“From” white, the amount
   gold, a chevron; the slide is the link); a calmer photo strip on desktop (no glass behind it, 48 px thumbs, the active one
   56 px with a white ring, drawn by scale so nothing moves; the counter at its left); about 40 px of what follows peeks */
@media (min-width: 1024px) {
  .ab-home__frame { height: calc(100svh - 52px); max-height: none; }
  .ab-home__nav { flex-direction: row; align-items: center; gap: 16px; }
  .ab-home__thumbs.ab-glass { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 4px; border-radius: 0; }
  .ab-home__th { width: 52px; height: 52px; border-radius: 12px; opacity: .55; transform: scale(.923); transition: opacity .15s ease, transform .25s ease, box-shadow .15s ease; }
  .ab-home__th:hover { opacity: 1; }
  .ab-home__th.is-on { opacity: 1; transform: scale(1.077); box-shadow: 0 0 0 2px #fff; }
  .ab-home__count { font-size: 13px; }
}

/* ---------------------------------------------------------------- add-on info in place (owner, 29 Oct; one add-on style with the booking flow and My Photoshoot) */
.ab-ibox { position: relative; margin: 0 0 14px; padding: 16px 18px 16px 18px; border-radius: 18px; --tint: .45; --blur: 24px; max-width: 100%; box-sizing: border-box; }
.ab-ibox--up::after { content: ""; position: absolute; bottom: -7px; left: calc(var(--caret, 24px) - 7px); width: 14px; height: 14px; transform: rotate(45deg);
  background: rgba(34,34,38,.92); border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.ab-ibox--line { margin: 10px 0 12px; }
.ab-ibox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ab-ibox__head b { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.4; padding-top: 6px; }
.ab-ibox__head b i { font-style: normal; color: var(--rp-gold); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.ab-ibox__x { flex: none; width: 36px; height: 36px; margin: -4px -6px 0 0; }
.ab-ibox p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--rp-muted); }
.ab-ibox p + p { margin-top: 10px; }
.ab-chip.is-on, .ab-poplink.is-on { background-color: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; }
@media (max-width: 1023px) { .ab-ibox:not(.ab-ibox--over) { width: 100% !important; flex: 0 0 100%; } } /* full content width, also where the row's parent is a flex row (the sheet) */
/* QA Q4: on phones a package card shows its first photo only (no dots or arrows in the photo, no sideways swipe inside a sideways
   row); a tap opens the sheet, where the slideshow lives; desktop unchanged */
@media (max-width: 1023px) {
  /* (29 Oct, owner: the photos swipe again in the card, with their own dots; the row dots under the cards go) */
  .ab-pkgs + .ab-row-dots, .ab-pkgs-wrap .ab-row-dots { display: none; }
  .ab-sheet .ab-pkg__photos--sheet { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; margin: 0 0 16px; border-radius: 20px; }
  .ab-sheet .ab-pkg__photos--sheet.ab-pkg__photos--land { aspect-ratio: 3 / 2; } /* the city pages' own landscape photos (F4) */
}
/* [ab_art]: the phone's photo on phones, the desktop's photo on desktop (each with its own alt; the hidden one is never fetched) */
img.ab-art--p { display: none; }
@media (max-width: 1023px) { img.ab-art--p { display: block; } img.ab-art--d { display: none; } }
/* QA Q10: the Photoshoots page on phones: the vertical booking photos at 4 : 5 (the Locations hub keeps its 4 : 3 photos) */
@media (max-width: 1023px) { .astra .ab-tiles--page .ab-tile:has(img.ab-art--p) { aspect-ratio: 4 / 5; } }
/* QA Q23: on phones a kit post's row of three shows the first photo full width, then the other two side by side (desktop: three) */
@media (max-width: 1023px) {
  .ab-post .rpb-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-post .rpb-trio > :first-child { grid-column: 1 / -1; }
}
/* tester E16 / E17 (29 Oct): a package row with ONE card has no peek (centred at the column width, e.g. Group on phones), and
   WHAT'S INCLUDED is centred on every phone quick card (the card-button rule; the price + BOOK panel keeps its own pattern) */
@media (max-width: 1023px) {
  .ab-pkgs:has(> .ab-pkg:only-child) { justify-content: center; overflow: visible; }
  .ab-pkgs > .ab-pkg:only-child { width: 100%; max-width: 420px; margin: 0 auto; }
  .ab-pkg__open { align-self: center; }
}

/* ---------------------------------------------------------------- QA re-check (29 Oct, afternoon), decided by the design session */
/* Q5: links in the phone add-on sheet and a post's session card are underlined too */
.ab-sheet :is(p, li, dd) a:not(.ab-btn):not(.ab-chip), .ab-post :is(p, li, dd) a:not(.ab-btn):not(.ab-chip2) { text-decoration: none; }
/* Q8: no lone words in card titles and story texts */
.ab-charity__body :is(h2, h3, h4), .ab-pic__t :is(h2, h3, h4) { text-wrap: balance; }
.ab-story p { text-wrap: pretty; }
/* Q14: the FAQ topic lines readable on desktop too */
.astra .ab-topic .ab-topic__line, .astra .ab-topic .ab-topic__line p { color: #b9b9b4; }
/* Q17: the Lay-flat card on the content edge (x 16) like every card under it; Q21: equal shop title heights (any heading level) */
@media (max-width: 1023px) {
  .ab-layflat { margin-left: 0; margin-right: 0; }
  .ab-shop__t :is(h3, h4, h5) { min-height: 2.7em; }
}
/* Q25: on phones the legal links are a two-column list without separators (no line ends on a lone “|”), the company line stacked */
@media (max-width: 1023px) {
  .ab-foot__bottom > span:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; width: 100%; }
  .ab-foot__bottom > span:first-child a { white-space: normal; text-wrap: balance; } /* in a column a long link wraps inside it (Q25), never past the screen */
  .ab-foot__bottom > span:last-child { flex-direction: column; align-items: flex-start; }
  .ab-foot__bottom i { display: none; }
}
/* Q27: AT A GLANCE readable over the light part of the photo */
.ab-glance > .ab-label { color: #b9b9b4; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
/* Q29: an older post's closing button: auto width and one line where it fits (the words stay as live) */
.ab-legacy__body .ab-center .ab-btn { width: auto; display: inline-flex; }
@media (max-width: 419px) { .ab-legacy__body .ab-center .ab-btn { letter-spacing: .6px; padding-left: 20px; padding-right: 20px; } }
/* Q31: the contact card's intro centred and balanced */
.ab-form__intro, .ab-form__intro p { text-align: center; text-wrap: balance; }
/* Q6: the chip padding steps down (astra.js) where less than 24 px of the next chip would show */
.ab-chiprow.ab-peek-12 .ab-chip2, .ab-switch--many.ab-peek-12 a { padding-left: 12px; padding-right: 12px; }
.ab-chiprow.ab-peek-10 .ab-chip2, .ab-switch--many.ab-peek-10 a { padding-left: 10px; padding-right: 10px; }
/* Q26: the Photoshoots gift card tile on phones: the same photo, cropped to the gift box (the bow in the upper half, clear of the plate) */
@media (max-width: 1023px) {
  .ab-tiles--page a.ab-tile[href*="photoshoot-gift-card"] img { object-position: 50% 80%; transform: scale(1.2); transform-origin: 50% 78%; }
}
/* Q30 (re-check): the sheet never scrolls sideways (with the add-on box open its content could slide past the screen's edge) */
.ab-sheet__panel { overflow-x: hidden; overscroll-behavior-x: none; }
.ab-sheet .ab-ibox { max-width: 100%; }
/* ---------------------------------------------------------------- sideways drift (owner's iPhone, 29 Oct): a safety net under the real fix (the footer
   grid, 17:00): nothing can widen the page; clip (not hidden) creates no scroll box, so the sticky bars keep working */
html.astra-html, html.astra-html > body { overflow-x: clip; }

/* ---------------------------------------------------------------- phones and other touch screens stay calm (owner's iPhone, 29 Oct; style guide): no
   press scale or shadow change on cards and photo tiles, buttons only a brief brightness on press, switches and chips change at
   once with a 150 ms fade, the draggable lens off (astra.js); desktop keeps hover, press .97 and the lens */
@media (hover: none), (pointer: coarse) {
  :is(.ab-tile, .ab-story, .ab-pkg, .ab-pic, .ab-shop):active { scale: none !important; translate: none !important; filter: none !important; }
  .ab-tile, .ab-story, .ab-tile .ab-tile__label { transition: none; }
  :is(.ab-btn, .ab-circle, .ab-chip, .ab-chip2, .ab-nav__menu, .ab-switch a, .ab-switch button, .ab-tabs a, .ab-menu__list a, .ab-socials a, .rp-cf-btn, .ab-rating, .ab-addon, .ab-pkg__open, .ab-lang a):active {
    scale: none !important; translate: none !important; filter: brightness(1.15); }
  .ab-switch a, .ab-switch button, .ab-chip2 { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease !important; }
}
/* the package switch (and the FAQ topics) scroll with the page: never sticky (owner, 29 Oct; also ends the overlap with the menu) */
@media (max-width: 1023px) { .ab-switchbox > .ab-switch { position: static; } }
/* FAQ topics are the same segmented glass switch as the packages on phones too: all four on one line (NL at 360 included), never scrolled */
@media (max-width: 1023px) {
  .ab-sec--topics .ab-switch--many { display: flex; width: auto; margin: 0 12px; padding: 5px; gap: 2px; overflow: visible; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 48%, rgba(255,255,255,.07)), rgba(22,22,26,.30);
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.30); }
  .ab-sec--topics .ab-switch--many a { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 4px; font-size: 12px; letter-spacing: 0; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* one chip style everywhere (owner, 29 Oct): the FAQ style, sentence case; a row that fits is centred, a row that doesn't starts
   at 16 px, ends with 16 px and fades out at the right edge (astra.js sets .is-fits / .is-scroll); the active chip in view */
.ab-chip2, .astra a.ab-chip2 { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
@media (max-width: 1023px) {
  .ab-chiprow { padding: 0 16px; scroll-padding: 0 16px; }
  .ab-chiprow.is-fits { justify-content: center; }
  .ab-chiprow.is-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
/* a long single word in a photo header's H1 never runs past the screen (last resort; joints get a soft hyphen in ab_hero_title) */
.ab-hero h1 { overflow-wrap: break-word; }
/* phone sheet header (owner, 29 Oct; style guide “Phone sheet header”): the drag handle and the round × in ONE top row (a back
   button on the left where a sheet has one), circles 36 px with a 44 px touch area: the Menu sheet, the package sheet, APPLY TO JOIN */
@media (max-width: 1023px) {
  .ab-menu__panel, .ab-sheet__panel { padding-top: 0 !important; }
  .ab-menu__panel::before, .ab-sheet__panel::before { margin: 22px auto 22px; }
  .ab-menu__x, .ab-sheet .ab-sheet__x { position: absolute; top: 6px; right: 12px; width: 36px; height: 36px; z-index: 2; }
  .ab-menu__x::after, .ab-sheet .ab-sheet__x::after { content: ""; position: absolute; inset: -4px; }
  .ab-sheet .ab-sheet__head { padding-right: 0; }
}
/* ---------------------------------------------------------------- Home desktop, “the photo speaks” (owner, 29 Oct): no thumbnail strip or counter on any
   width; the carousel dots (labelled buttons) centred 14 px above the card's bottom edge; the text block lower and tighter
   (title 56 px at 1440, gaps 8 / 8 / 16), the pill 16 px above the dots; the upper part of the photo stays free */
.ab-home__nav { display: none !important; }
.ab-home__dots { display: flex; }
.ab-home__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.45);
  cursor: pointer; position: relative; transition: width .25s ease, background-color .15s ease; }
.ab-home__dots button.is-on { width: 18px; background: #fff; }
.ab-home__dots button::after { content: ""; position: absolute; inset: -9px -4px; } /* 24 px hit area */
@media (min-width: 1024px) {
  .ab-home__dots { bottom: 14px; }
  .ab-home__txt { bottom: 54px; gap: 8px; }  /* 14 + the dots' 24 + 16 */
  .ab-home__row { margin-top: 8px; }
  .ab-home__t { font-size: clamp(40px, 3.9vw, 56px); }
}
/* photo card labels bottom-left, lower (owner, 29 Oct; style guide “Labels on photo cards”): every compact plate 16 px from the card's
   left and bottom edges on desktop and phones, its text left-aligned; plate size, text styles and the city line unchanged */
.astra .ab-tile .ab-tile__label { left: 16px; right: auto; bottom: 16px; transform: none; justify-content: flex-start; }
.astra .ab-tile .ab-tile__t { align-items: flex-start; text-align: left; }
/* ---------------------------------------------------------------- phones stay steady (astra-mobile, 29 Oct; work/build/mobile-stability.md): swipe rows stop
   at their ends (no bounce, never handing the swipe on to the page); the last card snaps by its end, so its stop is always
   reachable (a 28 px sliver of the card before it, mirroring the peek at the start); no grey tap flash on iOS */
.astra { -webkit-tap-highlight-color: transparent; }
@media (max-width: 1023px) {
  :is(.ab-pkgs, .ab-mas, .ab-photos, .ab-pics, .ab-carousel__track, .ab-home__track, .ab-car__track, .ab-chiprow, .ab-switch--many) { overscroll-behavior-x: none; }
  :is(.ab-pkgs > .ab-pkg, .ab-photos > a, .ab-photos > img, .ab-pics > .ab-pic, .ab-carousel__track > .ab-tile):last-child,
  .ab-mas:not(.ab-mas--grid) > .ab-mas__col:last-child > .ab-story:last-child { scroll-snap-align: end; }
}
/* in-page jumps land on the section (owner, 29 Oct; style guide “In-page jumps”): the target's top edge 10 px below the top of the
   screen (astra.js jumps; this covers the browser's own landing too); the bars slide away for the jump and come back on the
   first scroll up (html.ab-jumped) */
html.astra-html { scroll-padding-top: 10px; }
html.astra-html :is(.ab-pkg, .ab-topic, .ab-q, .ab-text__col h2, .ab-post .rpb h2, .ab-post .rpb h3) { scroll-margin-top: 0; }
.ab-nav { transition: translate .25s ease; }
html.ab-jumped .ab-nav { translate: 0 -140px; }
/* ---------------------------------------------------------------- phones: the navigation at the top (owner, 29 Oct; style guide “Navigation → Phone” and
   “Nothing floats at the bottom on phones”): one darker glass bar 10 px from the top (plus the safe area) and 12 px from the
   sides: the round Menu (40 px), RUDENKO PHOTOGRAPHY (Home) centred BETWEEN Menu and BOOK, at least 10 px clear of both, the
   gold BOOK capsule (36 px). It slides away on scroll down and back on scroll up (astra.js, calm: 24 px one way), and stays
   away during the booking flow and an in-page jump. The bottom tab bar, the round BOOK and the space kept for them are gone:
   pages end 28 px after their last content. The whole phone layout (below 1024 px; 768–1023 had the same bottom bar). */
@media (max-width: 1023px) {
  .astra { --bar-h: 0px; }
  .ab-top { position: fixed; z-index: 50; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; height: 52px; padding: 0 8px 0 5px;
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; border-radius: 999px; --tint: .55; --blur: 24px;
    transition: translate .25s ease; }
  .admin-bar .ab-top { top: 56px; }
  .ab-top .ab-top__menu { width: 40px; height: 40px; --tint: .3; }
  .ab-top .ab-top__menu .ab-ico { width: 18px; height: 18px; }
  .ab-top .ab-nav__name { justify-self: center; font-size: clamp(10px, calc((100vw - 166px) / 14.4), 15px); letter-spacing: .3px; line-height: 1; }
  .astra .ab-top .ab-top__book { height: 36px; padding: 0 13px; font-size: 11px; letter-spacing: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18); }
  .ab-top.is-away, html.ab-jumped .ab-top, html.rpbf-open .ab-top { translate: 0 calc(-100% - 14px - env(safe-area-inset-top, 0px)); }
  html.rpbf-open .ab-top { visibility: hidden; transition: translate .25s ease, visibility 0s .25s; }
  .ab-foot { padding-bottom: 8px; }
  .ab-foot__panel { padding-bottom: 19px; } /* + its 1 px border + 8 = 28 */
  .ab-home__dots { bottom: 12px; }
  .ab-home__txt { bottom: 50px; } /* 12 + the dots' 22 + 16 */
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .ab-top { transition: none; } }
/* ---------------------------------------------------------------- the desktop menu hides and returns in full (owner, 29 Oct; style guide “Navigation →
   Desktop”): never folded; it slides away on a clear scroll down and comes back in full on a scroll up (astra.js, the calm rule
   shared with the phone top bar). Where the full bar doesn't fit (1024–1279 px) the compact bar: name, MENU, BOOK (LOGIN and
   EN | NL are in the menu), the same hide-and-return. “On this page” moves up while the bar is away. */
.ab-nav.is-away, html.ab-jumped .ab-nav { translate: 0 -140px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .ab-nav { width: 470px; }
  .ab-nav .ab-nav__right .ab-nav__link, .ab-nav .ab-nav__right .ab-lang { display: none; }
}
.ab-toc { transition: top .25s ease; }
html:has(.ab-nav.is-away) .ab-toc, html.ab-jumped .ab-toc { top: 24px; }
@media (prefers-reduced-motion: reduce) { .ab-nav, .ab-toc { transition: none; } }
/* desktop titles and spacing (owner, 29 Oct; style guide “Type” and “Spacing”): every page title 52 px (Home's slide title stays
   56), on the full content width, balanced over two lines only where it doesn't fit; title-first pages start 48 px below the
   menu bar (24 + 64 + 48); 64 px between sections (32 above and below each); phones unchanged */
@media (min-width: 1024px) {
  .astra { --sec: 32px; }
  .ab-hero h1, .ab-pagetop h1, .ab-about-top h1, .ab-404 h1 { font-size: 52px; line-height: 1.1; letter-spacing: .2px; }
  .ab-pagetop h1 { max-width: none; }
  .ab-pagetop, .ab-about-top, .ab-post { padding-top: 136px; }
  /* the visible gap is 64 where extra space stacked on it: the hero's 12 px frame margin above an intro, the BOOK NOW row's room
     for shadows (kept, cancelled outside), the form's half padding */
  .ab-intro { padding-top: 52px; }
  .ab-carousel { margin-bottom: -20px; }
  .ab-sec--form { padding-top: var(--sec); }
}
/* Home: arrows beside the dots (owner, 29 Oct): one centred group ‹ dots ›, round glass arrows 32 px (28 on phones) with a 44 px
   touch area, 10 px from the dots; the group 12 px above the card's edge (10 on phones). Desktop and tablet keep the text block
   where it is (the pill at the left never meets the group); on phones the pill sits 12 px above the group */
.ab-home__ctl { position: absolute; z-index: 3; left: 50%; bottom: 12px; translate: -50% 0; display: flex; align-items: center; gap: 10px; }
.ab-home__ctl .ab-home__dots { position: static; bottom: auto; transform: none; }
.ab-home__arrow { position: relative; width: 32px; height: 32px; }
.ab-home__arrow .ab-ico { width: 14px; height: 14px; }
.ab-home__arrow::after { content: ""; position: absolute; inset: -7px; } /* 30 + 14 = 44 (from the padding box) */
@media (min-width: 768px) and (max-width: 1023px) { .ab-home__txt { bottom: 54px; } }
@media (max-width: 767px) {
  .ab-home__ctl { bottom: 10px; }
  .ab-home__arrow { width: 28px; height: 28px; }
  .ab-home__arrow::after { inset: -9px; }
  .ab-home__txt { bottom: 50px; } /* 10 + 28 + 12 */
}
/* add-on info laid over the page (owner, 29 Oct: “It opens where you are and it just overlaps the text which is below it”): below
   the pill with its pointer up, or above it with the pointer down; darker glass so the text under it doesn't show through */
.ab-ibox--over { position: absolute; z-index: 45; margin: 0; --tint: .78; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 50px rgba(0,0,0,.55); }
.ab-sheet .ab-ibox--over { z-index: 5; }
.ab-ibox--down::after { content: ""; position: absolute; top: -7px; left: calc(var(--caret, 24px) - 7px); width: 14px; height: 14px; transform: rotate(45deg);
  background: rgba(34,34,38,.92); border-left: 1px solid rgba(255,255,255,.16); border-top: 1px solid rgba(255,255,255,.16); }
/* ---------------------------------------------------------------- the menu bars (astra-e2e, 29 Oct): on desktop the name and EN | NL react like the other menu
   items; on phones every target in the top bar is big enough: Menu a 44 px touch area round its 40 px circle, the name 28 px tall */
.astra a.ab-nav__name:hover, .astra .ab-nav .ab-lang a:not([aria-current="true"]):hover { color: var(--rp-gold-l); }
.ab-nav__name { transition: color .15s ease, translate .25s ease; }
@media (hover: hover) { .ab-nav .ab-nav__name:hover { translate: 0 -1px; } }
@media (max-width: 1023px) {
  .ab-top .ab-top__menu { position: relative; }
  .ab-top .ab-top__menu::after { content: ""; position: absolute; inset: -3px; } /* from the padding box: 38 + 6 = 44 */
  .ab-top .ab-nav__name { display: flex; align-items: center; min-height: 28px; }
}
/* the add-on box: no pointer (owner: the pill's colour says which one); a panel that takes focus after a click shows no ring */
.ab-ibox--over::after { display: none; }
.ab-ibox:focus, .ab-menu__panel:focus, .ab-sheet__panel:focus { outline: none; }
/* ---------------------------------------------------------------- smaller photo card labels everywhere (owner, 29 Oct: “Yes, everywhere”; as the booking flow's 0.3.28
   plates): the name 12 px semibold uppercase, letter-spacing .5, on one line; a 12 px gold price line under it where there is
   one; padding 8 / 12, radius 12; 16 px from the left and bottom edges (12 on cards narrower than 300 px); the plate always holds
   its text (at most the card − 2 × inset; a name too long for a narrow card wraps inside it, astra.js) */
.astra .ab-tile { container-type: inline-size; }
.astra .ab-tile .ab-tile__label { left: 16px; right: auto; bottom: 16px; width: max-content; max-width: calc(100% - 32px); padding: 8px 12px; border-radius: 12px; transform: none; justify-content: flex-start; }
@container (max-width: 299px) { .astra .ab-tile .ab-tile__label { left: 12px; bottom: 12px; max-width: calc(100% - 24px); } }
.astra .ab-tile .ab-tile__t, .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t, .astra .ab-tiles--page .ab-tile__t, .astra .ab-carousel__track .ab-tile .ab-tile__t {
  font-size: 12px; font-weight: 600; letter-spacing: .5px; line-height: 1.3; gap: 2px; white-space: nowrap; min-width: 0; max-width: 100%; }
.astra .ab-tile .ab-tile__t.is-wrap, .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t.is-wrap, .astra .ab-tiles--page .ab-tile__t.is-wrap,
.astra .ab-carousel__track .ab-tile .ab-tile__t.is-wrap { white-space: normal; text-wrap: balance; }
.astra .ab-tile .ab-tile__t small, .astra .ab-tile .ab-tile__t small.ab-tile__line, .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small,
.astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small.ab-tile__line, .astra .ab-tiles--page .ab-tile__t small {
  font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--rp-gold); text-transform: none; min-height: 0; white-space: nowrap; }
/* ---------------------------------------------------------------- every sideways row of cards: Home's control group centred 24 px under the row (astra.js), the
   arrows at the row's top right gone; desktop rows show whole cards only (four from 1280 px, three below), no cut card or fade */
.ab-carousel__arrows, .ab-ig .rp-carousel-btn, .ab-row-dots { display: none !important; }
.ab-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
.ab-ctl[hidden] { display: none; }
.ab-ctl__dots { position: static; transform: none; display: flex; }
.ab-ctl__dots button, .ab-home__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.45);
  cursor: pointer; position: relative; transition: width .25s ease, background-color .15s ease; }
.ab-ctl__dots button.is-on { width: 18px; background: #fff; }
.ab-ctl__dots button::after { content: ""; position: absolute; inset: -9px -4px; }
.ab-ctl__arrow { position: relative; width: 32px; height: 32px; }
.ab-ctl__arrow .ab-ico { width: 14px; height: 14px; }
.ab-ctl__arrow::after { content: ""; position: absolute; inset: -7px; }
.ab-ctl + .ab-center { margin-top: 24px; }
@media (max-width: 767px) {
  .ab-ctl__arrow { width: 28px; height: 28px; }
  .ab-ctl__arrow::after { inset: -9px; }
}
@media (max-width: 1023px) { .ab-ctl__dots button { width: 5px; height: 5px; } .ab-ctl__dots button.is-on { width: 16px; } }
@media (min-width: 1024px) {
  .ab-carousel::after { display: none; }
  .ab-carousel__track .ab-tile { width: calc((100% - 2 * var(--gap)) / 3); aspect-ratio: 272 / 360; }
  .ab-ig .rp-carousel { width: var(--cw); margin: 0 auto; overflow: hidden; }
  .ab-ig .rp-carousel-track { padding: 8px 0 0; scroll-padding: 0; }
  .ab-ig .rp-ig-item { width: calc((100% - 2 * var(--gap)) / 3); }
}
@media (min-width: 1280px) {
  .ab-carousel__track .ab-tile, .ab-ig .rp-ig-item { width: calc((100% - 3 * var(--gap)) / 4); }
}
/* ---------------------------------------------------------------- the FAQ's end line as one button (owner, 29 Oct: “Maybe it should just say still have a question …
   if you click on that, you get on the contact page”): only the question, the whole pill links to Contact in the outlined style */
.ab-faq-end--link { display: flex; justify-content: center; width: auto; max-width: none; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.astra .ab-faq-end--link a.ab-btn { color: var(--rp-text); text-decoration: none; }
@media (max-width: 1023px) { .ab-faq-end--link { display: flex; padding: 0 16px; } }
/* ---------------------------------------------------------------- phones (owner's iPhone, 29 Oct). The top bar slides fully out of
   sight from wherever it sits: signed in, WordPress's admin bar puts it at 56 px, which the old fixed distance didn't clear */
@media (max-width: 1023px) {
  .ab-top { --bar-top: calc(10px + env(safe-area-inset-top, 0px)); top: var(--bar-top); }
  .admin-bar .ab-top { --bar-top: 56px; }
  .ab-top.is-away, html.ab-jumped .ab-top, html.rpbf-open .ab-top { translate: 0 calc(-100% - var(--bar-top) - 8px); }
  /* nothing under Safari's floating bottom bar: the page's end and Home's hero keep clear of the bottom inset */
  .ab-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) {
  .ab-home__frame { height: calc(100svh - 16px); }
  .ab-home__ctl { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ab-home__txt { bottom: calc(50px + env(safe-area-inset-bottom, 0px)); } /* 10 + 28 + 12 above the group */
}
/* no gold ring on a chosen package or any other jump target (owner: gold frames only on buttons; the switch shows the choice) */
.astra [tabindex="-1"]:focus, .astra .ab-pkg:focus { outline: none; }
/* packages stacked on phones (owner, 29 Oct): one under another at full content width and their natural height, 56 px apart; the switch
   above them jumps to a card (astra.js); the photos inside a card still swipe with their own dots; no card-to-card swipe or peek */
@media (max-width: 767px) {
  .ab-pkgs { flex-direction: column; align-items: stretch; overflow: visible; scroll-snap-type: none; padding: 0 var(--side); gap: calc(2 * var(--sec)); }
  .ab-pkg, .ab-pkg:nth-child(odd) { width: auto; max-width: none; scroll-snap-align: none; }
  .ab-pkg.is-off { opacity: 1; }
}
/* FAQ questions (owner, 29 Oct, B): no fill, lift or box on a row; on hover (pointer devices) and keyboard focus the question turns
   gold like the footer links, its + / − with it; an open question keeps the normal colour (the − shows it is open) */
.ab-foot__col a { transition: color .15s ease; }
.astra .ab-q summary { transition: color .15s ease; }
.astra .ab-q summary::after { transition: background-color .15s ease; }
.astra .ab-q[open] summary { color: var(--rp-text); }
@media (hover: hover) {
  .astra .ab-q summary:hover { color: var(--rp-gold); background-color: transparent; translate: none; filter: none; }
  .astra .ab-q summary:hover::after { background-color: rgba(196,143,86,.18); }
}
.astra .ab-q summary:focus-visible { color: var(--rp-gold); background-color: transparent; }
.astra .ab-q summary:focus-visible::after { background-color: rgba(196,143,86,.18); }
/* one motion everywhere (owner, 29 Oct; style guide “One motion, everywhere”): every slider and row is native scroll with CSS
   scroll-snap, one stop per card, so a swipe moves one card and nothing glides on after release; arrows and dots step through the
   same helper with the browser's own smooth scrolling (astra.js slideTo); UI motion is 150 ms fades and 250 ms slides, ease;
   reduced motion makes the slides instant (the global rule above). No dot row under stacked packages. */
:is(.ab-carousel__track > .ab-tile, .ab-mas .ab-story, .ab-photos > a, .ab-photos > img, .ab-pics > .ab-pic, .ab-pkgs > .ab-pkg, .ab-ig .rp-ig-item) { scroll-snap-stop: always; }
.ab-pkg__dots { display: none !important; }
/* ---------------------------------------------------------------- WHAT'S INCLUDED in place on phones and tablets (owner, 29 Oct): no sheet; the
   full intro shows (the cards stand at their own height), the button sits under it and the lists unfold right under the button,
   pushing the price and BOOK down (250 ms, instant with reduced motion); its chevron turns; each card on its own */
@media (max-width: 1023px) {
  .ab-pkg__body > .ab-pkg__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .ab-pkg__text .ab-rest { display: inline; }
  .ab-pkg__title { order: 1; } .ab-pkg__text { order: 2; } .ab-pkg__open { order: 3; } .ab-pkg__more { order: 4; } .ab-price { order: 5; }
  .ab-pkg__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
  .ab-pkg__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .25s; }
  .ab-pkg.is-open .ab-pkg__more { grid-template-rows: 1fr; }
  .ab-pkg.is-open .ab-pkg__inner { visibility: visible; transition: visibility 0s; }
  .ab-pkg__inner > .ab-label:first-child { margin-top: 18px; }
  .ab-pkg__open svg { transition: transform .25s ease; }
  .ab-pkg.is-open .ab-pkg__open svg { transform: rotate(-90deg); }
}
/* iPhone Safari (astra-site-visual W-01): its bar floats OVER the page's bottom ~80 px, so on Home the ‹ dots › group and the text
   stay above it there (iOS WebKit only; other phones keep the normal spacing). Signed in, the hero leaves room for the admin bar */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .ab-home__ctl { bottom: max(72px, calc(10px + env(safe-area-inset-bottom, 0px))); }
    .ab-home__txt { bottom: calc(max(72px, calc(10px + env(safe-area-inset-bottom, 0px))) + 40px); }
  }
}
@media (max-width: 782px) { .admin-bar .ab-home__frame { height: calc(100svh - 62px); } }
/* signed in on a phone (W-03): the admin bar scrolls away, so once past it the top bar sits at its normal 10 px */
@media (max-width: 600px) { html.ab-past-admin body.admin-bar .ab-top { --bar-top: calc(10px + env(safe-area-inset-top, 0px)); top: var(--bar-top); } }
/* small photo cards (owner, 29 Oct; as the booking flow): on cards under 220 px the label is one line, the name and the gold price side
   by side at 11 px (the name 600 uppercase .4, the price 500, 6 px apart), padding 5 / 10, radius 10, 10 px from the edges; the price
   wraps under the name only where both truly don't fit; city cards keep the name alone */
@container (max-width: 219px) {
  .astra .ab-tile .ab-tile__label { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 10px; }
  .astra .ab-tile .ab-tile__t, .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t, .astra .ab-tiles--page .ab-tile__t, .astra .ab-carousel__track .ab-tile .ab-tile__t {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; font-size: 11px; letter-spacing: .4px; }
  .astra .ab-tile .ab-tile__t small, .astra .ab-tile .ab-tile__t small.ab-tile__line, .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small,
  .astra .ab-tiles:not(.ab-tiles--page) .ab-tile .ab-tile__t small.ab-tile__line, .astra .ab-tiles--page .ab-tile__t small { font-size: 11px; font-weight: 500; }
}
/* keyboard focus on a photo or story card is the site's neutral ring, never a gold frame (gold frames only on buttons) */
.astra :is(.ab-tile, .ab-story, .ab-pic):focus-visible { outline-color: rgba(255,255,255,.8); }
/* ---------------------------------------------------------------- BOOK NOW on desktop (owner's decision “vertical photos for mobile and horizontal ones for desktop”):
   from 1024 px its cards are horizontal 4 : 3 with the Photoshoots page's own horizontal photos, three whole cards per view; phones keep
   the vertical booking photos */
@media (min-width: 1024px) {
  .ab-carousel__track .ab-tile { width: calc((100% - 2 * var(--gap)) / 3); aspect-ratio: 4 / 3; }
}
/* switches change only on a click or tap (owner, 29 Oct): on tablets the package row shows the chosen card and doesn't swipe by hand
   (the photos inside a card still do) */
@media (min-width: 768px) and (max-width: 1023px) { .ab-pkgs { overflow-x: hidden; } }
/* astra-mobile, 29 Oct: on phones the stories fade like every other row (the press rule had made them dim at once); signed in, the
   top bar's real top always follows --bar-top (the older fixed 56 px kept it on screen when it slid away) */
@media (max-width: 1023px) { .astra .ab-mas:not(.ab-mas--grid) .ab-story { transition: opacity .15s ease; } }
.admin-bar .ab-top { top: var(--bar-top); }

/* Contact's Instagram on desktop (design session, 29 Oct, W-07): one static row of 6 whole tiles as drawn on P08 (6 columns, 4:5,
   radius 18), no scrolling and so no ‹ dots ›; phones keep the 3 × 3 grid */
@media (min-width: 1024px) {
  .ab-ig .rp-carousel-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); overflow: visible; scroll-snap-type: none; padding: 8px 0 0; }
  .ab-ig .rp-ig-item { width: auto; aspect-ratio: 4 / 5; border-radius: 18px; }
  .ab-ig .rp-ig-item:nth-child(n+7) { display: none; }
}

/* ---------------------------------------------------------------- package cards: a calm vertical rhythm (owner via the lead, 29 Oct: “way too
   crowded … in the old view a clearer, calmer distribution”), measured against live's Couple page: each label sits close to its own
   list or chips (10 px) with clear space above it (28 px desktop, 24 phones; the intro gets the same before the first label); list
   items line-height 1.5, 6 px apart; 28 px before the closing line. A slimmer price panel and a little less card padding give the
   height back (her OK), so the text stays within the photo's height (cards +10 px). The labels had lost their space when the lists
   moved into .ab-pkg__inner (§36). */
.ab-pkg__more .ab-label { margin-top: 28px; margin-bottom: 10px; }
.ab-pkg__more .ab-dots-list li { margin-top: 6px; line-height: 1.5; }
.ab-pkg__more .ab-label + .ab-dots-list > li:first-child { margin-top: 0; }
.ab-pkg__more .ab-label + .ab-chips { margin-top: 0; }
.ab-pkg__close { margin-top: 28px; }
.ab-price { padding-top: 20px; }
.ab-price__panel { padding: 6px 6px 6px 20px; border-radius: 18px; }
.ab-price__amount { gap: 0; }
.ab-price__amount b { font-size: 24px; }
.ab-price__amount small { font-size: 11.5px; line-height: 1.4; }
.ab-price__panel > a { height: 44px; } /* BOOK (named so, the portal's topbar.css stays as it is) */
@media (min-width: 1024px) { .ab-pkg__body { padding: 28px 30px 18px 32px; } }
@media (max-width: 1023px) {
  .ab-pkg__more .ab-label, .ab-pkg__inner > .ab-label:first-child { margin-top: 24px; }
}

/* ---------------------------------------------------------------- no link is underlined, anywhere (owner, 29 Oct: “I don't want any link to be
   underlined. The orange color is perfect, but no links underlined”): links keep their gold and a hover changes only the color (the
   rules above no longer underline; this also covers underlines written into older posts and plugins' markup). In a package's INCLUDED
   list the gallery link reads as the text around it, a quiet link (gold on hover); the prints credit has no link (page content). */
.astra a, .astra a:hover, .astra a:focus-visible { text-decoration: none !important; }
.astra .ab-dots-list a[href*="gallery.rudenko-photography.com"] { color: inherit; }

/* the row and slide dots answer the mouse like the arrows beside them (astra-site-visual W-12): a lighter dot under the pointer;
   the footer's RUDENKO PHOTOGRAPHY turns gold on hover like the other footer links (W-13) */
@media (hover: hover) {
  .ab-ctl__dots button:not(.is-on):hover, .ab-home__dots button:not(.is-on):hover { background: rgba(255,255,255,.92); }
  .astra a.ab-foot__name:hover { color: var(--rp-gold); }
}
.astra a.ab-foot__name { transition: color .15s ease; }

/* parity S-03: Google's reCAPTCHA badge stays hidden, as on live */
.grecaptcha-badge { visibility: hidden; }

/* ---------------------------------------------------------------- text alignment, batch 1 (the lead's decisions on astra-text-align's A-list,
   29 Oct; the owner: decide per element, step by step): desktop and tablet only, phones unchanged.
   A-01: long running text is justified in its own column, as on live (page and section paragraphs, package descriptions, About,
   Prints, the partner agreement, the text pages, the FAQ topic texts, city pages' reading text, older posts); cards, story texts,
   captions, lists, labels and one-liners keep their alignment. No hyphenation; columns unchanged.
   A-02: the intro under a centered section title runs justified across the content width; in a FAQ section it spans the question
   list (850) from its left edge; Contact's form intro is justified across the form.
   A-05: chip rows that fit are centered on desktop (Portfolio and its categories too). */
@media (min-width: 768px) {
  :is(.ab-sec > .ab-wrap > p, .ab-pagetop__intro, .ab-pagetop__intro p, .ab-pkg__text, .ab-pkg__close, .ab-about-top__text p, .ab-appr__text p,
    .ab-prints-top__intro p, .ab-layflat__text p, .ab-agree > p, .ab-fold p, .ab-text__col p, .ab-text__intro, [class~="ab-topic__line"] p, .ab-read p,
    .ab-legacy__body p) { text-align: justify; hyphens: manual; }
  .ab-legacy__body p { text-align: justify !important; } /* the older posts' calm column was left-only (!important there) */
  .ab-sub { max-width: var(--cw); text-align: justify; text-wrap: wrap; }
  .ab-sec:has(.ab-q) .ab-head .ab-sub { max-width: min(850px, var(--cw)); }
  .ab-form:not(.ab-apply .ab-form) .ab-form__intro, .ab-form:not(.ab-apply .ab-form) .ab-form__intro p { text-align: justify; text-wrap: wrap; }
}
@media (min-width: 1024px) { .ab-chiprow { justify-content: center; } }

/* ---------------------------------------------------------------- the package card, one calm text column (owner via the lead, 29 Oct, on live's
   Couple phone card: “the old way looks way cleaner and it even fits more”):
   - phones and tablets: no WHAT'S INCLUDED button, everything shows at once, as on desktop (reverses the in-place unfold);
   - ADD-ONS is a plain list like INCLUDED and EXTRAS, on every width: a gold bullet, the name in the text's own type (no gold,
     no underline) and the “?” right after it; a tap opens the add-on's box as before;
   - phones take live's density (measured on live's Couple card: 702 px from description to BOOK; ours 701): a 330 px text
     column, text 14.5 px, line-height 1.5, list items 2 px apart, 16 px above each label and 6 px to its list (our label type);
     desktop keeps 28 / 10 / 6;
   - the price bar is one line: the amount on BOOK's centre line, VAT to its right on the amount's baseline; where both can't fit
     (a long Dutch VAT line on a narrow phone) the VAT line drops under the amount on that card only. */
@media (max-width: 1023px) {
  .ab-pkg__open { display: none !important; }
  .ab-pkg__more { display: block; grid-template-rows: none; }
  .ab-pkg__inner { visibility: visible; overflow: visible; }
  .ab-pkg__body { padding-left: 5px; padding-right: 5px; } /* a 330 px text column at 390, as live's */
  .ab-pkg__text, .ab-pkg__close, .ab-pkg__more .ab-dots-list li, .astra .ab-pkg .ab-chips > a.ab-chip { font-size: 14.5px; line-height: 1.5; }
  .ab-pkg__more .ab-label, .ab-pkg__inner > .ab-label:first-child { margin-top: 16px; margin-bottom: 6px; }
  .ab-pkg__more .ab-dots-list li, .astra .ab-pkg .ab-chips > a.ab-chip { margin-top: 2px; }
  .ab-pkg__more .ab-dots-list li:first-child, .astra .ab-pkg .ab-chips > a.ab-chip:first-child { margin-top: 0; }
  .ab-pkg__close { margin-top: 16px; }
  .ab-price { padding-top: 16px; }
}
.ab-pkg .ab-chips { display: block; margin-top: 0; }
.ab-pkg .ab-chips > .ab-chip, .astra .ab-pkg .ab-chips > a.ab-chip { position: relative; display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  height: auto; margin: 6px 0 0; padding: 0 0 0 18px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 15px; font-weight: inherit; line-height: 1.5; color: var(--rp-text); translate: none !important; scale: none !important; filter: none !important; }
.ab-pkg .ab-chips > .ab-chip:first-child { margin-top: 0; }
.ab-pkg .ab-chips > .ab-chip::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 999px; background: var(--rp-gold); }
.ab-pkg .ab-chips > .ab-chip i { flex: none; width: 20px; height: 20px; font-size: 11px; transition: background-color .15s ease, color .15s ease; }
.ab-pkg .ab-chips > .ab-chip:hover, .ab-pkg .ab-chips > .ab-chip.is-on { color: var(--rp-text); background: none; }
.ab-pkg .ab-chips > .ab-chip:hover i, .ab-pkg .ab-chips > .ab-chip.is-on i { background: var(--rp-gold); color: var(--rp-ink); }
.ab-price__amount { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 0; min-width: 0; }
.ab-price__amount small { line-height: 1.3; }
/* W-16: on phones a package card's add-on box is nearly solid (.94 with the blur), so the price and lines under it don't show through */
.ab-ibox--pkg { --tint: .94; } /* desktop too (lead, 30 Oct): nothing under an open box shows through */

/* ---------------------------------------------------------------- the 3-dot capsule on every row and slider (owner, 29 Oct 2026; astra.js dots3, the
   booking flow uses the same values): no arrows; one size everywhere, Home's: a 24 px glass capsule, 12 px side padding, 6 px dots
   6 px apart, the white pill 18 px. Each place answers in a 44 px tall area (E39), the outer ones ≥ 44 × 44. Inside a photo it
   sits 16 px above the photo's bottom (12 on phones); under a row it sits 16 px under the cards (12 on phones) and what follows
   keeps 40 px (32 on phones). Phones: each swipe row shows one whole card in the content width, no peek of the next one. */
.ab-dots3 { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 999px; box-sizing: border-box; }
.ab-dots3[hidden], .ab-ctl[hidden] { display: none !important; }
.ab-dots3 button { position: relative; flex: none; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.45); cursor: pointer; transition: width .25s ease, background-color .15s ease; }
.ab-dots3 button[hidden] { display: none; }
.ab-dots3 button.is-on { width: 18px; background: #fff; cursor: default; }
/* tap areas: 44 px tall; side by side they share the 6 px gaps, the outer ones reach 19 px past the capsule's ends (≥ 44 wide) */
.ab-dots3 button::after { content: ""; position: absolute; top: 50%; height: 44px; left: -3px; right: -3px; transform: translateY(-50%); }
.ab-dots3 button:first-child::after { left: -19px; }
.ab-dots3 button.is-last::after { right: -19px; }
@media (hover: hover) { .ab-dots3 button:not(.is-on):hover { background: rgba(255,255,255,.92); } }
@media (max-width: 1023px) { .ab-car__dots.ab-dots3 { height: 24px; padding: 0 12px; gap: 6px; } .ab-car__dots.ab-dots3 button { width: 6px; height: 6px; } .ab-car__dots.ab-dots3 button.is-on { width: 18px; } }
.ab-home__arrow, .ab-ctl__arrow { display: none !important; }
.ab-ctl { display: flex; justify-content: center; gap: 0; margin-top: 16px; }
.ab-ctl + *, .ab-ctl + .ab-center { margin-top: 40px; }
@media (max-width: 1023px) { .ab-ctl { margin-top: 12px; } .ab-ctl + *, .ab-ctl + .ab-center { margin-top: 32px; } }
@media (max-width: 767px) {
  :is(.ab-mas:not(.ab-mas--grid), .ab-photos, .ab-pics, .ab-carousel__track) { gap: 16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
  :is(.ab-mas:not(.ab-mas--grid) .ab-story, .ab-photos > a, .ab-photos > img, .ab-pics > .ab-pic, .ab-carousel__track .ab-tile) { width: calc(100vw - 32px); max-width: none; } /* swipe rows only (W-18: never the Portfolio grid's cards) */
}
.ab-dots3 button.is-on[data-dir] { cursor: pointer; } /* the pill at an end goes round */

/* ---------------------------------------------------------------- text rhythm from live's logic (the lead's decisions on astra-text-align §6, 29 Oct;
   style guide “Text rhythm numbers”): inside a section the space sits where live has it; between sections stays ours (64).
   A-12: a centered section title owns its intro through the short gold rule (live: 20 × 1 px, 13 px under the title, ≈30 above
   the text): title → intro 48 desktop / 32 phones; a FAQ topic title → its line 33 / 17.
   A-13: a heading sits clearly above its own text: 24 / 18 in text sections; a card title → its text 18 (stories, How to book,
   What to expect, Prints shop, charity, the photobook).
   Paragraph → paragraph about one line (22 / 18); text → the next heading about two lines (44 / 36); lists tight (5 px apart,
   line-height 1.5). ONE body size for running text, as live: 16 px desktop, 15 phones, line-height 1.6 (muted intros keep their
   color); card text never under 14 px. Package cards keep their own decided values. */
.ab-title::after { content: ""; display: block; width: 20px; height: 1px; margin: 13px auto 0; background: #9d7245; }
.ab-title + .ab-sub { margin-top: 35px; }
[class~="ab-topic__body"] :is(h2, h3) { margin-bottom: 30px; }
:is(.ab-text__col, .ab-read) :is(h2, h3) { margin-top: 44px; margin-bottom: 24px; }
:is(.ab-text__col, .ab-read) :is(h2, h3):first-child, .ab-legacy__body > :is(h2, h3, h4):first-child { margin-top: 0; }
.ab-legacy__body :is(h2, h3, h4) { margin-top: 44px; margin-bottom: 24px; }
.ab-fold :is(h3, h4) { margin-bottom: 18px; }
.ab-story p, .ab-pic__t p { margin-top: 18px; }
.ab-trio__card :is(h3, h4), .ab-charity__body :is(h3, h4), .ab-shop__t :is(h3, h4, h5), .ab-layflat__text :is(h3, h4) { margin-bottom: 18px; }
:is(.ab-text__col, .ab-read, .ab-about-top__text, .ab-appr__text, .ab-charity__body, .ab-prints-top__intro, .ab-layflat__text, .ab-q__a, .ab-fold, .ab-agree) p + p { margin-top: 22px; }
.ab-legacy__body p { margin-bottom: 22px; }
:is(.ab-text__col, .ab-read, .ab-legacy__body, .ab-q__a, .ab-fold) li { line-height: 1.5; }
:is(.ab-text__col, .ab-read, .ab-legacy__body, .ab-q__a, .ab-fold) li + li { margin-top: 5px; }
:is(.ab-sec > .ab-wrap > p, .ab-pagetop__intro, .ab-pagetop__intro p, .ab-sub, .ab-sub p, .ab-about-top__text p, .ab-appr__text p, .ab-prints-top__intro p,
  .ab-layflat__text p, .ab-agree > p, .ab-fold p, .ab-text__col p, .ab-text__intro p, .ab-text__col li, [class~="ab-topic__line"], [class~="ab-topic__line"] p,
  .ab-q__a p, .ab-q__a li, .ab-read p, .ab-legacy__body p, .ab-legacy__body li, .ab-form__intro p) { font-size: 16px; line-height: 1.6; }
.ab-shop__t p { font-size: 14px; }
@media (max-width: 1023px) {
  .ab-title::after { margin-top: 10px; }
  .ab-title + .ab-sub { margin-top: 21px; }
  [class~="ab-topic__body"] :is(h2, h3) { margin-bottom: 17px; }
  :is(.ab-text__col, .ab-read) :is(h2, h3), .ab-legacy__body :is(h2, h3, h4) { margin-top: 36px; margin-bottom: 18px; }
  .ab-fold :is(h3, h4) { margin-bottom: 14px; }
  :is(.ab-text__col, .ab-read, .ab-about-top__text, .ab-appr__text, .ab-charity__body, .ab-prints-top__intro, .ab-layflat__text, .ab-q__a, .ab-fold, .ab-agree) p + p { margin-top: 18px; }
  .ab-legacy__body p { margin-bottom: 18px; }
  :is(.ab-sec > .ab-wrap > p, .ab-pagetop__intro, .ab-pagetop__intro p, .ab-sub, .ab-sub p, .ab-about-top__text p, .ab-appr__text p, .ab-prints-top__intro p,
    .ab-layflat__text p, .ab-agree > p, .ab-fold p, .ab-text__col p, .ab-text__intro p, .ab-text__col li, [class~="ab-topic__line"], [class~="ab-topic__line"] p,
    .ab-q__a p, .ab-q__a li, .ab-read p, .ab-legacy__body p, .ab-legacy__body li, .ab-form__intro p) { font-size: 15px; }
  .ab-shop__t p { font-size: 14px; }
}

/* ---------------------------------------------------------------- text alignment batch 2 (the lead's OK in advance, 29 Oct):
   A-03 + A-14: on the plain pages (FAQ, Portfolio and its categories, Terms, Privacy, Cookie, Cancellation) the H1 is centered
   with the gold rule, 72 px from the H1 to what follows (64 phones). A-04: a blog post's title area (label, H1, byline) sits left
   in the 700 column on desktop; kit captions left. A-06: the Prints product cards (FRAMED PRINTS, CANVAS, PRINT PACK) center their
   title and text on desktop. A-15: Contact's form intro → the first field 48. A-16: a FAQ topic's line → its first question about
   two lines. A-17: About's paragraph gaps follow the one-line rule above. */
:is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
  .page-id-27072, .page-id-27079, .category) .ab-pagetop h1 { text-align: center; margin-bottom: 0; }
:is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
  .page-id-27072, .page-id-27079, .category) .ab-pagetop h1::after { content: ""; display: block; width: 20px; height: 1px; margin: 22px auto 0; background: #9d7245; }
:is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
  .page-id-27072, .page-id-27079, .category) .ab-pagetop h1 + * { margin-top: 46px; }
.ab-post .rpb figcaption { text-align: left; }
.ab-form:not(.ab-apply .ab-form) .ab-form__intro + * { margin-top: 44px; }
[class~="ab-topic__line"], [class~="ab-topic__line"] p { margin-bottom: 0; }
[class~="ab-topic__line"] { margin-bottom: 17px; } /* + the question's own padding ≈ 44 */
@media (min-width: 1024px) {
  .ab-post__head { width: min(700px, var(--cw)); text-align: left; }
  :is(.page-id-38561, .page-id-38558) .ab-pic:not(:has(.ab-pic__n)) .ab-pic__t { text-align: center; }
}
@media (max-width: 1023px) {
  :is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
    .page-id-27072, .page-id-27079, .category) .ab-pagetop h1::after { margin-top: 18px; }
  :is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
    .page-id-27072, .page-id-27079, .category) .ab-pagetop h1 + * { margin-top: 42px; }
  [class~="ab-topic__line"] { margin-bottom: 11px; } /* ≈ 36 */
}

/* W-15: Portfolio's grid (and its categories) on phones: two real columns (astra.js phoneCols), the same look as the CSS columns
   they replace; new cards go to the foot of the shorter one */
@media (max-width: 1023px) {
  .ab-mas--grid.is-cols { display: flex; columns: auto; gap: 12px; align-items: flex-start; }
  .ab-mas--grid.is-cols > .ab-mas__col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 0; }
}

/* ---------------------------------------------------------------- arrows on desktop only (owner, 30 Oct: “I agree”): with a mouse at 1024 px and up the
   photo carousels show their two quiet glass circles at the photo's sides, and the card rows and Home show ‹ capsule ›: the
   arrows flank the capsule, all three 40 px high with their edges aligned and even 10 px gaps (the capsule grows to 40 there, the
   dots stay 6 px); the arrows step like the outer dots and go round at the ends. Phones and touch screens: the dots alone. */
.ab-d3arrow { display: none; }
@media (min-width: 1024px) and (hover: hover) {
  .ab-d3arrow { display: inline-flex; position: relative; flex: none; width: 40px; height: 40px; }
  .ab-d3arrow svg { width: 14px; height: 14px; }
  .ab-d3arrow::after { content: ""; position: absolute; inset: -2px; } /* 44 × 44 */
  :is(.ab-ctl, .ab-home__ctl):has(.ab-d3arrow) { gap: 10px; align-items: center; }
  :is(.ab-ctl, .ab-home__ctl) .ab-dots3 { height: 40px; padding: 0 16px; }
  .ab-car__prev, .ab-car__next { width: 40px; height: 40px; margin-top: -20px; }
  .ab-car__prev svg, .ab-car__next svg { width: 14px; height: 14px; }
}
@media (max-width: 1023px), (hover: none) { .ab-car__prev, .ab-car__next { display: none !important; } }


/* the add-on “?” (owner picked style B, 30 Oct): a small glass bead with a white “?” (icon rule: icons white), 24 px (22 on phones);
   open, it lights a touch (no gold) */
.ab-chip i, .ab-pkg .ab-chips > .ab-chip i { box-sizing: border-box; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.35); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; line-height: 1;
  transition: background .15s ease, border-color .15s ease; }
.ab-pkg .ab-chips > .ab-chip:hover i, .ab-pkg .ab-chips > .ab-chip.is-on i, .ab-chip:hover i, .ab-chip.is-on i {
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)); border-color: rgba(255,255,255,.36); color: #fff; }
@media (max-width: 1023px) { .ab-chip i, .ab-pkg .ab-chips > .ab-chip i { width: 22px; height: 22px; } }

/* the three-text card on desktop (owner, 30 Oct, as live): the same glass card in the same place, its three texts one under
   another: each sub-title on one line, its text the card's full width (justified, A-01), 24 px from the sub-title to its text,
   44 px from a text to the next sub-title, no dividers; tablets and phones keep their stacked card */
@media (min-width: 1024px) {
  .ab-trio { grid-template-columns: 1fr; }
  .ab-trio > .ab-trio__card { padding: 0 32px; }
  .ab-trio > .ab-trio__card:first-child { padding-top: 32px; }
  .ab-trio > .ab-trio__card:last-child { padding-bottom: 32px; }
  .ab-trio > .ab-trio__card + .ab-trio__card { border: 0; padding-top: 44px; }
  .ab-trio > .ab-trio__card :is(h3, h4) { margin-bottom: 24px; text-wrap: wrap; }
  .ab-trio > .ab-trio__card p { text-align: justify; hyphens: manual; }
}

/* ---------------------------------------------------------------- ONE type scale (owner, 30 Oct: Astra's type, but “consistent … not a rainbow”;
   astra-text-align's inventory, docs/Astra type inventory (30 Oct 2026).md, with the lead's calls). Montserrat; text weights
   300 (body) and 600/700 (titles), labels 600; the data values of AT A GLANCE keep 400. Colors per role: titles #fff, running
   text #f3f3f1 (intros too, no gray intros), secondary text #d6d6d1, labels #b9b9b4, meta #a3a39f, gold for links and prices.
   Decided exceptions stay: Home's slide titles and kicker, FAQ questions / answers, plates, prices, buttons, chips. */
.astra {
  --fs-h1: 52px; --lh-h1: 1.1; --fs-sec: 36px; --fs-big: 30px; --fs-feat: 18px; --fs-sub: 20px; --fs-story: 16px;
  --fs-body: 16px; --fs-list: 15px; --fs-card: 14px; --fs-row: 13px; --fs-meta: 13px; --fs-vat: 12px;
  --c-title: #fff; --c-text: #f3f3f1; --c-text2: #d6d6d1; --c-label: #b9b9b4; --c-meta: #a3a39f;
}
@media (max-width: 1023px) {
  .astra { --fs-h1: 27px; --lh-h1: 1.15; --fs-sec: 26px; --fs-big: 24px; --fs-feat: 16px; --fs-sub: 18px; --fs-body: 15px; --fs-meta: 12.5px; }
}
/* H1 and section titles */
.ab-pagetop h1, .ab-about-top h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: .2px; color: var(--c-title); }
.ab-title, .ab-form__title { font-size: var(--fs-sec); line-height: 1.15; font-weight: 700; letter-spacing: .3px; color: var(--c-title); }
/* big card titles (packages, FAQ topics) */
.ab-pkg__title, [class~="ab-topic__body"] :is(h2, h3) { font-size: var(--fs-big); line-height: 1.15; font-weight: 700; letter-spacing: .3px; }
/* feature card titles (three-card rows: How to book, What to expect, Prints products, Partner; charity; the photobook) */
.ab-pic__t :is(h3, h4), .ab-charity__body :is(h3, h4), .ab-layflat__text :is(h3, h4) { font-size: var(--fs-feat); line-height: 1.2; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
/* text sub-headings (the three-text card, Terms, the Partner agreement, blog H2 / H3) */
.ab-trio__card :is(h3, h4), .ab-text__col h2, .ab-fold :is(h3, h4), .ab-post .rpb :is(h2, h3) { font-size: var(--fs-sub); line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* story card titles; the Prints shop titles */
.ab-story :is(h2, h3, h5), .ab-shop__t :is(h3, h4, h5) { font-size: var(--fs-story); line-height: 1.35; font-weight: 600; letter-spacing: 0; }
/* running text, one size (the blog's too) */
:is(.ab-pkg__text, .ab-pkg__close, .ab-trio__card p, .ab-charity__body p, .ab-post .rpb p, .ab-post .rpb li, [class~="ab-topic__line"], [class~="ab-topic__line"] p,
  .ab-sec > .ab-wrap > p, .ab-pagetop__intro, .ab-pagetop__intro p, .ab-sub, .ab-sub p, .ab-about-top__text p, .ab-appr__text p, .ab-prints-top__intro p,
  .ab-layflat__text p, .ab-agree > p, .ab-fold p, .ab-text__col p, .ab-text__intro p, .ab-text__col li, .ab-read p, .ab-legacy__body p, .ab-legacy__body li, .ab-form__intro p) {
  font-size: var(--fs-body); line-height: 1.6; font-weight: 300; color: var(--c-text); }
.ab-post .rpb p { line-height: 1.6; }
/* list items (package lists and the add-on list, the city package lists) */
.ab-pkg__more .ab-dots-list li, .astra .ab-pkg .ab-chips > a.ab-chip, .ab-dots-list li { font-size: var(--fs-list); line-height: 1.5; font-weight: 300; color: var(--c-text); }
/* card text (stories, three-card rows, shop cards) */
.ab-story p, .ab-pic__t p, .ab-shop__t p { font-size: var(--fs-card); line-height: 1.6; font-weight: 300; color: var(--c-text2); }
/* AT A GLANCE rows: the label small and gray, the value at the body size, weight 400 (the shared “data value”) */
.ab-glance dt { font-size: var(--fs-row); color: var(--c-label); }
.ab-glance dd { font-size: var(--fs-body); line-height: 1.5; font-weight: 400; color: var(--c-title); }
/* meta: dates, captions, notes, legal; the VAT line under a price */
.ab-text__updated, .rp-cf-note, .ab-agree__date, .ab-post .rpb figcaption, .ab-foot__bottom, .ab-post__by { font-size: var(--fs-meta); line-height: 1.6; color: var(--c-meta); }
.ab-price__amount small { font-size: var(--fs-vat); }
/* the odd ones (lead, 30 Oct): LOGIN like the other menu words; the agreement's button like every button */
.ab-nav__right a.ab-nav__link { letter-spacing: .6px; }
.ab-fold__more .ab-btn { line-height: 1.65; letter-spacing: 1.2px; }
@media (max-width: 1023px) { .ab-mas--grid .ab-story :is(h2, h3, h5) { font-size: 14px; } }
/* the package card on phones keeps live's density (owner: “fit at least as much as live”): the body size, at line-height 1.5 */
@media (max-width: 1023px) { .astra .ab-pkg :is(.ab-pkg__text, .ab-pkg__close) { line-height: 1.5; } }

/* one-line intros centered (owner, 30 Oct): an intro under a centered title that fits on one line sits centered under it; two
   lines or more stay justified across the full width, as live. No script, no jump: the paragraph is as wide as its text but
   never wider than the column, and centered; a long one fills the column and justifies (phones: as decided, centered) */
.ab-sub > p:only-child,
:is(.page-id-33226, .page-id-33228, .page-id-708, .page-id-1856, .page-id-1770, .page-id-23820, .page-id-32704, .page-id-33323, .page-id-33038, .page-id-33325,
  .page-id-27072, .page-id-27079, .category) .ab-pagetop :is(.ab-pagetop__intro > p:only-child, .ab-wrap > p) { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* About: PHOTOGRAPHER / FOTOGRAAF in the site's gold (owner, 30 Oct; replaces QA Q11's white), the layout as it is */
.ab-about-top h1 span { color: var(--rp-gold); }

/* ---------------------------------------------------------------- the footer (owner, 30 Oct; the rating card as her approved mock
   work/preview/footer-rating-proposal-2.png): desktop: the three link columns as wide as their links with equal gaps, the group
   ending at the bottom line's right edge, link rows about 44 px apart; the rating card as wide as the description: “5.0” big,
   five gold stars, then the reviews count and “Read the reviews →” on two lines, the whole card one link. Phones: live's
   structure: Photoshoots | Locations side by side as straight lists, Info below in two columns; rows about 40 px apart. */
.ab-foot__brand { max-width: 470px; }
.ab-foot__cols { gap: clamp(48px, 6vw, 96px); }
.ab-foot__col { min-width: 0; gap: 20px; }
.ab-foot__col ul { gap: 20px; }
.ab-foot__col a { line-height: 1.65; }
.ab-rating, .astra a.ab-rating { align-self: stretch; gap: 30px; padding: 28px 32px; border-radius: var(--r-card); }
.ab-rating b { font-size: 84px; font-weight: 600; line-height: .9; letter-spacing: -1px; }
.ab-rating__r { gap: 10px; font-size: 16px; line-height: 1.4; }
.ab-rating__r > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.ab-stars { gap: 6px; }
.ab-stars svg { width: 38px; height: 38px; }
@media (max-width: 1023px) {
  .ab-foot__brand { max-width: none; }
  .ab-rating, .astra a.ab-rating { align-self: stretch; gap: 20px; padding: 20px 22px; }
  .ab-rating b { font-size: 60px; }
  .ab-rating__r { gap: 8px; font-size: 15px; }
  .ab-stars { gap: 4px; }
  .ab-stars svg { width: 30px; height: 30px; }
  .ab-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .ab-foot__col { gap: 14px; }
  .ab-foot__col ul { display: flex; flex-direction: column; gap: 16px; }
  .ab-foot__col a { font-size: 14px; line-height: 1.5; }
  .ab-foot__col:last-child { grid-column: 1 / -1; }
  .ab-foot__col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
}
@media (max-width: 380px) { .ab-rating, .astra a.ab-rating { gap: 14px; padding: 18px 16px; } .ab-rating b { font-size: 52px; } .ab-stars svg { width: 26px; height: 26px; } }
/* Q25 fix: on phones the hidden “|” between the company items stays a zero-size block, so the three items stay three lines
   (display: none had merged their text into one run: “PhotographyKvK”) */
@media (max-width: 1023px) { .ab-foot__bottom > span:last-child i { display: block; width: 0; height: 0; overflow: hidden; } }
/* phones, as live: the Photoshoots column as wide as its longest link, Locations beside it; Info below runs down its two columns
   (About … Contact, then Prints … My Photoshoot), lined up with the columns above */
@media (max-width: 1023px) {
  .ab-foot__cols { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; }
  .ab-foot__col:last-child { display: grid; grid-template-columns: subgrid; row-gap: 14px; }
  .ab-foot__col:last-child > .ab-label { grid-column: 1 / -1; }
  .ab-foot__col:last-child ul { grid-column: 1 / -1; grid-template-columns: subgrid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 28px; }
}

/* ---------------------------------------------------------------- the phone top bar (owner approved the mock work/preview/phone-topbar-proposal.png,
   30 Oct): the same glass capsule in the same place, still hiding on scroll, 60 px tall (was 52); Menu a 44 px circle; BOOK 44 px
   tall, about 72 wide, a 12 px label; the wordmark 14 px at 390–430 and fitted below so it never comes closer than 12 px to Menu
   or BOOK (its width is 14.0 × its size; the middle column is 100vw − 156). Page tops move down by the same 8 px. Jumps hide the
   bar and land 10 px below the screen's top, so they need no change. */
@media (max-width: 1023px) {
  .ab-top { height: 60px; padding: 0 8px; }
  .ab-top .ab-top__menu { width: 44px; height: 44px; }
  .ab-top .ab-top__menu::after { inset: 0; }
  .ab-top .ab-nav__name { font-size: clamp(10px, calc((100vw - 192px) / 14), 14px); } /* ≥ 12 px to Menu and BOOK down to 360 (measured) */
  .astra .ab-top .ab-top__book { height: 44px; min-width: 72px; padding: 0 15px; font-size: 12px; letter-spacing: 1.2px; justify-content: center; }
  .ab-pagetop { padding-top: 104px; }
  .ab-about-top { padding-top: 104px; }
}

/* ---------------------------------------------------------------- the hero, calm as live (owner approved work/preview/home-hero-live-calm-proposal.png,
   30 Oct): Home and every service page. A calmer title (46 desktop, 34 phones, two lines at most on phones); on Home the price
   is a gold text line under the title (“From €250”, 600, 19 px; the slide stays the link to the packages), then the sub-line in
   regular white; a smooth dark fade from the bottom (.72 → 0 by half the height) and a light one from the left on desktop, never
   a box; the controls left under the text, 22 px below it (desktop ‹ capsule ›, phones the dots). The block sits as low as it
   can: desktop the controls 44 px above the hero's bottom; phones the hero is 100svh (Safari's bars never cover it) and the
   controls' bottom at max(28 px, the safe area + 20 px). */
.ab-home__slide::after { background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 22%), linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0) 48%); }
.ab-hero__frame::after { background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 22%), linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0) 48%); }
.ab-home__txt h1 { order: 0; } .ab-home__t { order: 1; } .ab-home__row { order: 2; } .ab-home__line { order: 3; }
.astra .ab-home__t, .astra .ab-hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: .2px; }
.astra .ab-home__pill { display: inline; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--rp-gold); transition: color .15s ease; } /* a gold text link (the slide), no button left (pile 21) */
.astra .ab-home__pill b { font: inherit; color: inherit; } /* the content's own space separates “From” and the amount */
.astra .ab-home__pill svg { display: none; }
@media (hover: hover) { .ab-home__slide:hover .ab-home__pill { color: var(--rp-gold-l); } }
.astra .ab-home__line { max-width: 640px; font-size: 17px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.95); }
.astra .ab-home__txt { gap: 10px; left: var(--hero-left, max(var(--side), calc(50% - 570px))); bottom: calc(44px + 40px + 22px); }
.astra .ab-home__ctl { left: var(--hero-left, max(var(--side), calc(50% - 570px))); right: auto; bottom: 44px; translate: none; }
.astra .ab-hero h1 { left: max(var(--side), calc(50% - 570px)); bottom: 44px; }
@media (max-width: 1023px) {
  .ab-home__slide::after, .ab-hero__frame::after { background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 22%), linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 50%); }
  .astra .ab-home__frame { height: 100svh; }
  .astra .ab-home__t, .astra .ab-hero h1 { font-size: clamp(24px, 8.6vw, 34px); line-height: 1.08; }
  .astra .ab-home__pill { font-size: 17px; }
  .astra .ab-home__line { font-size: 15px; }
  .astra .ab-home__txt { left: 20px; right: 20px; gap: 8px; bottom: calc(max(28px, env(safe-area-inset-bottom, 0px) + 20px) + 24px + 22px); }
  .astra .ab-home__ctl { left: 20px; bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px); }
  .astra .ab-hero h1 { left: 20px; right: 20px; bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px); }
}
/* hero fixes (measured): the service H1 sits in the header, whose photo frame is inset 12 px (8 on phones), so its bottom is
   offset by that to keep 44 / max(28, safe + 20) from the photo's bottom; on phones the longer service H1 keeps two lines at a
   fitted size; Dutch one-word titles (KOPPELFOTOGRAFIE …) fit the width on phones */
.astra .ab-hero h1 { bottom: 56px; }
@media (max-width: 1023px) {
  .astra .ab-hero h1 { bottom: calc(max(28px, env(safe-area-inset-bottom, 0px) + 20px) + 8px); font-size: clamp(20px, 6vw, 34px); }
  html[lang^="nl"] .astra .ab-home__t { font-size: clamp(20px, 6.6vw, 34px); }
}
/* W-18: in Portfolio's two-column grid (and its categories) a card takes its column's width */
@media (max-width: 1023px) { .ab-mas--grid .ab-story { width: 100%; max-width: none; } }
/* W-17 (site-visual): on phones Home's hero starts 8 px down (the page's frame), so it is 100svh − 8 tall and its bottom meets the
   screen's bottom; the dots then sit at max(28, safe area + 20) above the visible bottom. Signed in, WordPress's 46 px bar too.
   (The service heroes on phones are shorter than the screen by design: unchanged.) */
@media (max-width: 1023px) {
  .astra .ab-home__frame { height: calc(100svh - 8px); }
  body.admin-bar .ab-home__frame { height: calc(100svh - 54px); }
}

/* ---------------------------------------------------------------- the post-rehearsal pile (owner, 30 Oct; Backlog “Astra post-rehearsal fix pile”)
   1–2. Home's hero text, condensed like live: the sub-line on one line on desktop (no 640 px cap, every slide EN + NL), and live's
   rhythm inside the block: kicker → title 12 (phones 10), title → From 6, From → sub-line 4, sub-line → controls 18; the From line
   as tall as its text; the block lower on desktop (the controls 32 px above the photo's bottom, live's ~33). Phones keep their safe
   bottom, max(28, the safe area + 20). */
.astra .ab-home__txt { gap: 0; max-width: min(900px, calc(100% - var(--hero-left, max(var(--side), calc(50% - 570px))) - 40px)); bottom: calc(32px + 40px + 18px); }
.astra .ab-home__ctl { bottom: 32px; }
.astra .ab-home__t { margin-top: 12px; }
.astra .ab-home__row { margin-top: 6px; }
.astra .ab-home__line { max-width: none; margin-top: 4px; }
@media (max-width: 1023px) {
  .astra .ab-home__txt { max-width: none; bottom: calc(max(28px, env(safe-area-inset-bottom, 0px) + 20px) + 24px + 18px); }
  .astra .ab-home__ctl { bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px); }
  .astra .ab-home__t { margin-top: 12px; }
}
/* 3. The 3-dot capsule's tap areas (E39; site-visual's retest, 30 Oct), the look unchanged: every zone is centered on its own dot,
   44 px tall; between two dots the border is halfway (the dots sit 6 px apart), toward the pill a dot reaches 9 px, and the
   pill's own zone covers the pill and lies above them, so a tap on the pill does nothing (astra.js) and its neighbours step */
.ab-dots3 button:not(.is-on)::after { z-index: 1; }
.ab-dots3 button.is-on::after { z-index: 2; }
.ab-dots3 button:not(.is-on):has(+ button.is-on)::after { right: -9px; }
.ab-dots3 button.is-on + button::after { left: -9px; }
/* 4. Phones: longer text justified (owner: “bigger text should be stretched out … large chunks of text are always justified,
   left to right”; replaces the 30 Oct “phones stay left” call): running text, card texts and list text are justified with the
   language's own hyphenation (the page's lang, EN / NL) so the word gaps stay small; bullets stay left. A centered intro keeps
   its last line centered, so one or two lines still read centered; from three lines on astra.js lets that last line run from the
   left (ab-long). The hyphenation is the same either way, so the lines never move. Kept as they are: the short card texts (story,
   picture and shop cards), the package lists' short items and the footer's brand line, where a narrow measure opened gaps of 9–18 spaces (measured at 360), and
   AT A GLANCE values and labels. */
@media (max-width: 767px) {
  :is(.ab-q__a p, .ab-q__a li, .ab-about-top__text p, .ab-agree > p, .ab-appr__text p, .ab-charity__body p, .ab-fold p, .ab-fold li,
    .ab-layflat__text p, .ab-prints-top__intro p, .ab-read p, .ab-text__col p, .ab-text__col li,
    .ab-text__intro p, .ab-trio__card p, .ab-sec > .ab-wrap > p, .ab-pagetop__intro, .ab-pagetop__intro p, .ab-post .rpb p, .ab-post .rpb li,
    .ab-pkg__text, .ab-pkg__close, [class~="ab-topic__line"], [class~="ab-topic__line"] p) {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty; }
  .ab-legacy__body :is(p, li) { text-align: justify !important; -webkit-hyphens: auto; hyphens: auto; }
  :is(.ab-sub, .ab-sub p, .ab-form__intro, .ab-form__intro p, .ab-faq-end p) {
    text-align: justify; text-align-last: center; text-wrap: wrap; -webkit-hyphens: auto; hyphens: auto; }
  :is(.ab-sub, .ab-sub p, .ab-form__intro, .ab-form__intro p, .ab-faq-end p).ab-long { text-align-last: auto; }
}
/* 5. Service pages on phones and tablets: the stacked texts without dividers, separated by space only, each sub-title closer to its
   own text (36 px from a text to the next sub-title, 18 from a sub-title to its text; desktop keeps 44 / 24) */
@media (max-width: 1023px) {
  .ab-trio > .ab-trio__card { padding: 0 16px; }
  .ab-trio > .ab-trio__card:first-child { padding-top: 20px; }
  .ab-trio > .ab-trio__card:last-child { padding-bottom: 20px; }
  .ab-trio > .ab-trio__card + .ab-trio__card { border: 0; padding-top: 36px; }
  .ab-trio > .ab-trio__card :is(h3, h4) { margin-bottom: 18px; }
}
/* 6. The footer on phones: the legal links' two columns line up with the link columns above (the same first column, the same gap)
   and start on one top line; the right column sits further right where the screen allows it. The first column is as wide as the
   longest Photoshoots link (EN 158, NL 153 px), the gap grows from 24 px at 360 to 38 at 390 and 44 from 400, so the right column
   keeps room for its longest word (“Partnerprogramma”, 136 px); below that a footer link may hyphenate instead of running out */
@media (max-width: 1023px) {
  .ab-foot { --foot-l: 160px; --foot-g: clamp(24px, calc(100vw - 352px), 44px); }
  html[lang^="nl"] .ab-foot { --foot-l: 155px; }
  .ab-foot__col a, .ab-foot__bottom > span:first-child a { -webkit-hyphens: auto; hyphens: auto; }
  .ab-foot__cols { grid-template-columns: var(--foot-l) minmax(0, 1fr); column-gap: var(--foot-g); }
  .ab-foot__col:last-child ul { column-gap: var(--foot-g); }
  .ab-foot__bottom > span:first-child { grid-template-columns: var(--foot-l) minmax(0, 1fr); column-gap: var(--foot-g); align-items: start; }
}
/* 15 / 23. One soft fade at the very top of every screen (owner, 30 Oct: text sat sharp between the iPhone's clock and the capsule,
   and above the desktop capsule): fixed, from the screen's top to the capsule's middle, dark at the top and clear by then; under the
   capsule (which keeps its glass), its dropdowns, the menu and the sheets; never catches a tap; there whether the bar shows or has
   slid away. Desktop: the capsule at 24 px, 64 tall, so 56 px. Phones and tablets: the capsule at the safe area + 10, 60 tall, so the
   safe area + 40. Signed in it starts under WordPress's bar. My Photoshoot's signed-out screens get it through topbar.css
   (.ab-chrome); jumps land just below it (astra.js). Item 34 (owner, 30 Oct: “make sure it fades on the downside … spreads out
   evenly”): the same dark top, then a long ease-out tail to fully clear, so no edge shows once the bar has slid away. */
body.astra::after, .ab-chrome::after { content: ""; position: fixed; z-index: 49; top: 0; left: 0; right: 0; pointer-events: none;
  --ab-fade-t: 16px; --ab-fade-l: 80px; /* item 34: t = the dark band at the top, l = the eased tail below it to fully clear */
  height: calc(var(--ab-fade-t) + var(--ab-fade-l));
  background: linear-gradient(180deg, rgba(8,8,10,.94) 0, rgba(8,8,10,.86) var(--ab-fade-t),
    rgba(8,8,10,.74) calc(var(--ab-fade-t) + var(--ab-fade-l) * .1), rgba(8,8,10,.6) calc(var(--ab-fade-t) + var(--ab-fade-l) * .2),
    rgba(8,8,10,.47) calc(var(--ab-fade-t) + var(--ab-fade-l) * .3), rgba(8,8,10,.35) calc(var(--ab-fade-t) + var(--ab-fade-l) * .4),
    rgba(8,8,10,.25) calc(var(--ab-fade-t) + var(--ab-fade-l) * .5), rgba(8,8,10,.16) calc(var(--ab-fade-t) + var(--ab-fade-l) * .6),
    rgba(8,8,10,.09) calc(var(--ab-fade-t) + var(--ab-fade-l) * .7), rgba(8,8,10,.045) calc(var(--ab-fade-t) + var(--ab-fade-l) * .8),
    rgba(8,8,10,.015) calc(var(--ab-fade-t) + var(--ab-fade-l) * .9), rgba(8,8,10,0) calc(var(--ab-fade-t) + var(--ab-fade-l))); }
body.admin-bar.astra::after { top: 32px; }
@media (max-width: 1023px) {
  body.astra::after, .ab-chrome::after { --ab-fade-t: env(safe-area-inset-top, 0px); --ab-fade-l: 72px; }
}
@media (max-width: 782px) { body.admin-bar.astra::after { top: 46px; } }
@media (max-width: 600px) { body.admin-bar.astra::after { top: 0; } }
/* 16. A jump's target is focused quietly (astra.js data-ab-quiet): no ring and no focus color after a link, a tap or a fresh visit; the
   white ring (decision 198) only for the keyboard */
.astra [data-ab-quiet]:focus-visible { outline: none; }
.astra .ab-q[open] > summary[data-ab-quiet]:focus-visible { color: var(--rp-text); }
/* 22. The footer's rating card: the whole card is the one link to the Google reviews (no “Read the reviews →”), reacting like the
   INSTAGRAM / TIKTOK pills (the shared rules above); the stars fill their column (up to 50 px on desktop, 39 on phones, about
   1.3×) with the count centered under them, one column beside the 5.0 */
.ab-rating__r { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-rating__r > span:last-child { align-items: center; }
.ab-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 274px; }
.ab-stars svg { width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 1023px) { .ab-stars { gap: 4px; max-width: 211px; } }
/* 24. The desktop capsule's right group at the page links' own spacing: LOGIN → EN | NL and NL → BOOK's edge 28 px, as between two
   page links (text to text); CONTACT → LOGIN stays the wider break between the groups */
@media (min-width: 1024px) { .ab-nav__right .ab-lang { margin-left: -8px; margin-right: 6px; } }
/* 19–20. The phone menu (owner approved work/preview/phone-menu-proposal.png, 30 Oct): a full-screen glass layer over the still page
   (the page is locked while it is open, astra.js / topbar.js), the capsule staying where it is above it: its Menu button becomes a
   round ×, BOOK leaves it; the six pages centered (600, 23 px, 2.6 spacing, 26 apart, no arrows; the current one gold; hover and
   press change the color only), a short line, LOGIN smaller; at the bottom EN | NL and one gold BOOK (52 px, not full width) above
   the safe area. The ×, Escape and a tap beside the items close it. Tablets and desktop keep their sheet. */
@media (max-width: 767px) {
  .ab-menu__dim { background: rgba(8,8,10,.6); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); }
  .ab-menu__panel, .ab-menu__panel.ab-glass { top: 0; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-height: none; border: 0; border-radius: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 86px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px) !important; overflow-y: auto; overscroll-behavior: contain; }
  .ab-menu__panel::before, .ab-menu .ab-menu__x { display: none !important; }
  .ab-menu__list { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; width: 100%; }
  .ab-menu__list li { display: block; text-align: center; }
  .ab-menu__list a, .astra .ab-menu__list a { display: inline-block; height: auto; padding: 2px 6px; border-radius: 8px; background: none !important; box-shadow: none;
    font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: 2.6px; color: #fff; transition: color .15s ease; }
  .ab-menu__list a svg { display: none; }
  .ab-menu__list a[aria-current="page"], .astra .ab-menu__list a[aria-current="page"] { color: var(--rp-gold); }
  .ab-menu__list a:active { scale: none !important; translate: none !important; filter: none !important; color: var(--rp-gold-l); }
  .ab-menu__list li:last-child { position: relative; padding-top: 26px; }
  .ab-menu__list li:last-child::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 1px; margin-left: -20px; background: rgba(255,255,255,.22); }
  .ab-menu__list li:last-child a { font-size: 14px; font-weight: 500; letter-spacing: 1.6px; color: rgba(255,255,255,.72); }
  .ab-menu__list li:last-child a[aria-current="page"] { color: var(--rp-gold); }
  .ab-menu__foot { flex-direction: column; justify-content: flex-start; align-items: center; gap: 24px; width: 100%; margin: 0; padding: 28px 0 0; border: 0; }
  .ab-menu__foot .ab-lang { font-size: 13px; letter-spacing: 1px; }
  .ab-menu__foot .ab-btn { height: 52px; min-width: 180px; padding: 0 40px; justify-content: center; }
  html.ab-menu-open .ab-top { z-index: 61; translate: none !important; }
  html.ab-menu-open .ab-top .ab-top__book { visibility: hidden; }
  .ab-top .ab-top__menu::before { content: ""; display: none; width: 18px; height: 18px; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
  html.ab-menu-open .ab-top .ab-top__menu svg { display: none; }
  html.ab-menu-open .ab-top .ab-top__menu::before { display: block; }
}
@media (hover: hover) and (max-width: 767px) { .ab-menu__list a:hover, .astra .ab-menu__list a:hover { color: var(--rp-gold-l); background: none; } }
/* the phone menu's layer where the browser draws no blur (or the visitor asks for less transparency): almost solid, the page muted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media (max-width: 767px) { .ab-menu__dim { background: rgba(8,8,10,.94); } } }
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) { .ab-menu__dim { background: rgba(8,8,10,.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* 4, Chrome's widest gaps (site-visual's retest): a link inside justified phone text is inline again (inline-block could not break, so
   the line before it opened up to 74 px); its 24 px line still gives the tap height */
@media (max-width: 767px) { .ab-q__a li a, .ab-intro a, .ab-form__intro a { display: inline; } }
/* WP Rocket's “automatic lazy rendering” (astra-mobile, 30 Oct): its inline rule renders every marked section below the fold
   collapsed (content-visibility: auto, no reserved height) until it nears the screen, so the page grew while scrolling and jumps
   landed short; Safari has no scroll anchoring to hide it. The sections render as they are (live has the same rule) */
html [data-wpr-lazyrender] { content-visibility: visible; }
/* 29. Phones: a section's intro forms one text column with the cards under it (owner, 30 Oct): its left and right edges are those of
   the cards' text (FAQ questions, story cards, the picture cards); sections whose cards carry no text (tiles, photo rows) keep the
   full width. Tablets and desktop keep their reading width. The justification of item 4 stays. */
@media (max-width: 767px) {
  .ab-sec:has(.ab-q, .ab-mas:not(.ab-mas--grid) .ab-story, .ab-pics .ab-pic__t) .ab-head .ab-sub { max-width: none; margin-inline: 16px; } /* the cards' own width */
  .ab-sec:has(.ab-q) .ab-head .ab-sub { padding-inline: 17px; }                                  /* the FAQ questions' text */
  .ab-sec:has(.ab-mas:not(.ab-mas--grid) .ab-story) .ab-head .ab-sub { padding-inline: 21px; } /* the story cards' text */
  .ab-sec:has(.ab-pics .ab-pic__t) .ab-head .ab-sub { padding-inline: 17px; }                  /* the picture cards' text */
}
/* 30. Side-by-side cards end level (owner, 30 Oct: “make sure that the shape is as long as the left one”): a row of cards takes the
   tallest card's height, the content stays at the top and the extra room falls at the bottom inside the card; where each card ends
   in a price bar (the packages on tablets) the bars line up. Padding and type unchanged; phones stack the cards. */
@media (min-width: 768px) { .ab-charity { align-items: stretch; } }
@media (min-width: 768px) and (max-width: 1023px) { .ab-pkgs { align-items: stretch; } .ab-pkgs .ab-price { margin-top: auto; } }
/* W-22 (site-visual): on phones every section intro takes the cards' own 16 px edges (photo rows, tiles), no longer a centered 358 px
   box that ran 1 px from the screen at 360; sections with text cards add that text's inset on top (item 29) */
@media (max-width: 767px) { .ab-sec > .ab-head > .ab-sub, .ab-sec > .ab-sub { max-width: none; margin-inline: 16px; } }
/* W-22b (astra-mobile): a head that is itself a wrap (Prints' BOOK A PHOTOSHOOT carousel head) already sits at the 16 px edges,
   so its intro adds none */
@media (max-width: 767px) { .ab-sec > .ab-head.ab-wrap > .ab-sub { margin-inline: 0; } }
/* 31. Desktop and tablet: a one-line intro under a centered title is centered; the intros written as bare text (no paragraph inside:
   About's WHAT TO EXPECT and LOCATIONS, Prints' BOOK A PHOTOSHOOT) had been missed by the paragraph rule above. Longer ones still fill
   the column and justify; phones unchanged */
@media (min-width: 768px) { .ab-sub:not(:has(p)) { width: fit-content; } }
/* 32. Desktop and tablet: an FAQ answer runs to the right end of its question's line and is justified, as live (the 29 Oct decision);
   lists stay left; phones unchanged */
@media (min-width: 768px) {
  .ab-q__a > div { padding-right: 0; }
  .ab-q__a p { text-align: justify; }
  .ab-q__a li { text-align: left; }
}
/* 35. A button's working ring takes the button's own text color (astra.js sets --busy from it when the ring appears): dark on the
   white chosen filter pill and on gold buttons, white on outlined and dark ones; the gold rule below stays as the fallback */
/* 37. The loading wave in a soft gold glow (owner approved work/preview/loading-shimmer-proposal.png, 30 Oct): one shared value in
   the site's gold, low and smooth (a .24 peak with a soft rise and fall, no edges), the booking flow's speed, direction and shape
   (200 % wide, 1.2 s, left to right); the placeholders keep their own fill; still with reduced motion */
.astra, .ab-chrome { --ab-shimmer: linear-gradient(100deg, transparent 22%, color-mix(in srgb, var(--rp-gold) 10%, transparent) 38%,
  color-mix(in srgb, var(--rp-gold) 24%, transparent) 50%, color-mix(in srgb, var(--rp-gold) 10%, transparent) 62%, transparent 78%); }
.ab-story__ph, .ab-story__phl { background-image: var(--ab-shimmer); background-size: 200% 100%; background-repeat: no-repeat; animation: ab-sk 1.2s linear infinite; }
@keyframes ab-sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ab-story__ph, .ab-story__phl { animation: none; } }
/* 37b (astra-mobile, 30 Oct): a held card is the size of the card it stands for (astra.js builds it from the shapes the page carries):
   its photo box takes that photo's shape (the swipe rows on phones: 360 px high, like their photos), its title and excerpt take the
   real lines as gold-wave bars, so the card lands without moving anything. A new card's photo keeps the wave until it has arrived */
.ab-story__ph { aspect-ratio: var(--ar, 4 / 5); }
@media (max-width: 1023px) {
  .ab-story__ph { aspect-ratio: auto; height: 360px; }
  .ab-mas--grid .ab-story__ph { height: auto; aspect-ratio: var(--ar, 4 / 5); }
}
.ab-story--ph .ab-story__t > * { color: transparent; border-radius: 7px; background-color: rgba(255,255,255,.07); background-image: var(--ab-shimmer);
  background-size: 200% 100%; background-repeat: no-repeat; animation: ab-sk 1.2s linear infinite; }
.ab-story--ph .ab-story__t > p { background-color: rgba(255,255,255,.04); }
.ab-story img.ab-sk-img { background-color: rgba(255,255,255,.05); background-image: var(--ab-shimmer); background-size: 200% 100%; background-repeat: no-repeat;
  animation: ab-sk 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ab-story--ph .ab-story__t > *, .ab-story img.ab-sk-img { animation: none; } }
/* W-23 (site-visual, item 30's rule): on phones and tablets a gallery row's story cards end level: each card takes the row's
   height, its photo and text stay at the top and the extra room falls at the bottom inside the card (a two-line title made one card
   21 px taller than the one beside it). A loading card (37b) has its card's height, so the row keeps its height when they land */
@media (max-width: 1023px) { .ab-mas:not(.ab-mas--grid) { align-items: stretch; } }
/* 50. The footer's upper part (owner, 30 Oct, on her live vs Astra shots: “too big in height … the text above should stretch out … so
   that it matches the width of the button”): the link rows as close as live's, 30 px line to line at every width (were 46 desktop,
   42 phones and tablets; a row is the list item's 26.4 px line plus 3.6), the title → first link gap in the same proportion (24 → 16,
   18 → 13) and the space between the column groups on phones and tablets (32 → 23); column positions and widths unchanged. On
   desktop the description runs the rating card's full width: justified, its last line from the left (it was balanced, 100 px short) */
.ab-foot__col { gap: 12px; }
.ab-foot__col ul { gap: 3.6px; }
@media (min-width: 1024px) { .ab-foot__brand p { text-wrap: wrap; text-align: justify; } }
@media (max-width: 1023px) {
  .ab-foot__cols { row-gap: 23px; }
  .ab-foot__col, .ab-foot__col:last-child { row-gap: 9px; }
  .ab-foot__col ul, .ab-foot__col:last-child ul { row-gap: 3.6px; }
}
/* 40. Policy and text pages (Terms, Privacy, Cookie, Cancellation, the Partner agreement): a section title sits close to its own text
   (half the old gap: 24 → 12 desktop, 18 → 9 phones) and a new section starts a third closer (44 → 32, 36 → 26), still at least 1.4×
   a paragraph break (22 / 18). The Partner agreement's titles take the same rhythm (one type system; it was 18 / 18 there) */
:is(.ab-text__col, .ab-agree .ab-fold) :is(h2, h3, h4) { margin-top: 32px; margin-bottom: 12px; }
:is(.ab-text__col, .ab-agree .ab-fold) :is(h2, h3, h4):first-child { margin-top: 0; }
:is(.ab-text__col, .ab-agree .ab-fold) :is(h2, h3, h4) + * { margin-top: 0; }
@media (max-width: 1023px) {
  :is(.ab-text__col, .ab-agree .ab-fold) :is(h2, h3, h4) { margin-top: 26px; margin-bottom: 9px; }
}