/* ==========================================================================
   Polish Nailbar — Funky Pastel Nailbar
   Single, self-contained design system. Built from the live PHP/HTML.
   --------------------------------------------------------------------------
   1.  Design tokens (:root) + fonts
   2.  Reset / base
   3.  Typography
   4.  Layout containers + section primitives
   5.  Header / navigation / mobile menu
   6.  Buttons / CTA
   7.  Badges / chips / stickers / trust pills
   8.  Cards (shared shadow + radius language)
   9.  Hero system (full-bleed + responsive)
   10. Section backgrounds / waves / dividers
   11. Neon / highlight system (opt-in)
   12. Homepage sections
   13. Treatment / service sections
   14. Gallery sections + lightbox
   15. About sections
   16. Contact / form sections + FAQ
   17. CTA section
   18. Footer
   19. Interactive overlays (booking modal, custom cursor)
   20. Responsive — shared breakpoints
   21. Utilities + reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS + FONTS
   ========================================================================== */
:root {
  /* Palette */
  --cream:        #FFF7F0;
  --cream-deep:   #FCEEE2;
  --white:        #FFFFFF;

  --pink:         #F84CA8;   /* cerise — brand primary */
  --pink-ink:     #D62E86;   /* darker pink: hover / links */
  --pink-soft:    #FFD8EA;   /* light pink fields */
  --pink-soft-2:  #FFE9F3;

  --mint:         #5FD3AE;   /* signature mint */
  --mint-deep:    #1F9D7C;   /* mint for text/contrast on light */
  --mint-soft:    #D2F2E6;

  --lilac:        #C7B6F2;   /* warm light pastel lilac */
  --lilac-soft:   #ECE5FB;

  --ink:          #2B1D33;   /* deep plum near-black — text */
  --ink-soft:     #6E5E78;   /* muted secondary text */
  --line:         #F0DFD3;   /* hairline on cream */
  --plum:         #2A1626;   /* deep berry-plum: footer */

  /* Neon hue (default script-word colour; see §11) */
  --polish-pink:     #F646A8;

  /* Roles */
  --bg:           var(--cream);
  --text:         var(--ink);
  --muted:        var(--ink-soft);
  --card-bg:      var(--white);
  --accent-mint:  var(--mint-soft);
  --accent-lilac: var(--lilac-soft);
  --accent-pink:  var(--pink-soft-2);
  --btn-ring:     rgba(43,29,51,.18);
  --sec-border:   rgba(43,29,51,.85);

  /* Type */
  --font-display: 'Melodrama', Georgia, 'Times New Roman', serif;
  --font-ui:      'Outfit Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand:    'Style Script', cursive;

  /* Radii */
  --r-sm:    10px;
  --r-md:    18px;
  --r-lg:    26px;
  --r-xl:    38px;
  --r-pill:  999px;
  --r-card:  20px;

  /* Shadows (soft, plum-tinted) */
  --shadow-sm:         0 4px 16px rgba(43,29,51,.08);
  --shadow-md:         0 14px 38px rgba(43,29,51,.12);
  --shadow-lg:         0 18px 44px rgba(43,29,51,.18);
  --shadow-xl:         0 26px 60px rgba(43,29,51,.24);
  --shadow-card:       0 12px 30px rgba(43,29,51,.10);
  --shadow-card-hover: 0 18px 40px rgba(43,29,51,.15);
  --shadow-cta:        0 12px 26px rgba(248,76,168,.30);
  --shadow-feature:    0 22px 50px rgba(43,29,51,.14);

  /* Layout */
  --container:        1180px;
  --container-narrow: 820px;
  --pad-x:     clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.8rem, 6.2vw, 5.6rem);
  --air-wave:    clamp(30px, 4.6vw, 64px);
  --air-scallop: clamp(16px, 2.6vw, 38px);

  /* Per-seam bridge tint toward the next section (overridable via .to-*) */
  --sec-to: #E9F4EA;

  /* z-index scale */
  --z-sticky-cta: 80;
  --z-header:     100;
  --z-mobilenav:  200;
  --z-lightbox:   300;
  --z-cursor:     390;
  --z-modal:      400;
}

/* Self-hosted faces only — no third-party font requests (licences in
   assets/fonts/). Outfit is a variable font: one file covers 300–800.
   Fraunces was declared but never used and is no longer loaded. */
@font-face {
  font-family: 'Outfit Variable';
  src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: 'Outfit Variable';
  src: url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Melodrama';
  src: url('../fonts/Melodrama-Semibold.woff2') format('woff2'),
       url('../fonts/Melodrama-Semibold.woff')  format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Melodrama';
  src: url('../fonts/Melodrama-Bold.woff2') format('woff2'),
       url('../fonts/Melodrama-Bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Style Script';
  src: url('../fonts/StyleScript-Regular.woff2') format('woff2'),
       url('../fonts/StyleScript-Regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea, button { font: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: var(--pink); color: var(--white); }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 7.2vw, 5rem); line-height: 1; }
h2 { font-size: clamp(2.05rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: 0; }
p  { text-wrap: pretty; }

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.58;
  color: var(--muted);
  max-width: 56ch;
}
.center .lead { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-ui);
  font-weight: 800; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--pink-ink);
}
.eyebrow::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 3px;
  background: var(--mint); transform: rotate(12deg);
}
.eyebrow--purple { color: #7A4FD0; }

/* Script accent word (the font carries it; neon colour added in §11).
   Solid-colour variants (--mint/--lavender) give the script word its hue
   WITHOUT the neon glow — used on quieter sections so only a few headline
   moments per page actually light up. */
h1 .ital, h2 .ital, h3 .ital, .ital {
  font-family: var(--font-hand); font-style: normal; font-weight: 400;
  color: var(--polish-pink); line-height: 1; font-size: 1.48em;
}
.ital--mint     { color: var(--mint-deep); }
.ital--lavender { color: #7A4FD0; }

/* Small handwritten phrase (e.g. "inspo welcome") */
.phrase {
  font-family: var(--font-hand); font-weight: 400; color: var(--pink);
  font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center; gap: .35rem;
}

/* Section heading block */
.section-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.section-head .eyebrow { margin-bottom: .4rem; }
.section-head h2 { letter-spacing: -.018em; line-height: 1.04; }
.section-head.center { margin-inline: auto; }
.section-head.center .lead { margin-inline: auto; }
.section-head--xl h2 { font-size: clamp(2.7rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -.022em; }

/* Fine print / soft notes */
.note-fine { color: rgba(43,29,51,.6); font-size: .9rem; font-weight: 500; max-width: 56ch; margin-inline: auto; }
.note-soft {
  font-size: .92rem; color: var(--muted); background: var(--white);
  border-radius: var(--r-md); padding: .8rem 1rem; border-left: 4px solid var(--mint);
}
.price-note { font-size: .9rem; color: var(--muted); margin-top: 1rem; font-style: italic; }
.price-note + .treat-group { margin-top: 1.2rem; }
.form-hint  { font-size: .85rem; color: var(--muted); }


/* ==========================================================================
   4. LAYOUT CONTAINERS + SECTION PRIMITIVES
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; overflow: hidden; padding-block: var(--section-y); }
.section > .container { position: relative; z-index: 1; }

.center { text-align: center; }

/* Generic CTA row (hero, studio, cta, page-hero) */
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* Centered CTA row that closes a section (replaces per-page inline styles) */
.section-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: clamp(1.6rem, 3.4vw, 2.2rem); }

/* Fine-print note that follows a grid/wall */
.section-note { margin-top: clamp(1.3rem, 3vw, 1.8rem); }

/* Two-column copy/media split */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.split--top { align-items: start; }
.split__copy { min-width: 0; }
.split__media { min-width: 0; position: relative; }

/* Corner sticker on a media block (.split__media, .framed wrapper, …) */
.sticker--tl { position: absolute; z-index: 6; top: 12px; left: 12px; }

/* Compact section — tighter vertical rhythm for quieter passages */
.section--compact { --section-y: clamp(2.6rem, 4.4vw, 4rem); }

/* Soft background blob behind a section (decorative) */
.deco-blob { position: absolute; z-index: 0; pointer-events: none; opacity: .9; }


/* ==========================================================================
   5. HEADER / NAVIGATION / MOBILE MENU
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding-block: .55rem;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled { background: var(--cream); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Wordmark logo */
.brand { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.wordmark { display: inline-flex; align-items: baseline; gap: .34rem; line-height: 1; }
.wordmark__script { font-family: var(--font-hand); font-weight: 400; font-size: 2.05rem; color: var(--pink); line-height: .7; }
.wordmark__sub    { font-family: var(--font-ui); font-weight: 800; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.wordmark__dot    { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); align-self: center; }

/* Desktop nav */
.nav-desktop { display: none; }
.nav-link { position: relative; font-weight: 500; color: var(--ink); padding: .4rem .15rem; transition: color .18s ease; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--pink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-link:hover { color: var(--pink-ink); }
.nav-link:hover::after, .nav-link.is-active::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--pink-ink); }

/* Hamburger */
.nav-toggle {
  position: relative; width: 46px; height: 46px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; background: var(--white); box-shadow: var(--shadow-sm);
}
.nav-toggle__box { position: relative; width: 22px; height: 14px; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle__bar { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/* Mobile nav — fully inert when closed (no invisible click-catching layer) */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-mobilenav);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(43,29,51,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(87vw, 360px);
  background: var(--cream); box-shadow: -20px 0 50px rgba(43,29,51,.2);
  padding: 1.4rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 1rem;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__close {
  align-self: flex-end; width: 42px; height: 42px; border-radius: var(--r-pill);
  font-size: 1.8rem; line-height: 1; color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm);
}
.mobile-nav__links { display: flex; flex-direction: column; gap: .25rem; margin-top: .25rem; }
.mobile-nav__link {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--ink);
  padding: .55rem 0; border-bottom: 1.5px dashed var(--line);
}
.mobile-nav__link.is-active { color: var(--pink); }
.mobile-nav__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .95rem; padding-top: 1rem; }
.mobile-nav__meta a { font-weight: 600; color: var(--pink-ink); }


/* ==========================================================================
   6. BUTTONS / CTA
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  padding: .82em 1.6em; border: 0; border-radius: var(--r-pill); cursor: pointer; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--sm    { padding: .58em 1.12em; font-size: .94rem; }
.btn--lg    { padding: .95em 1.85em; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* Primary — cerise fill */
.btn--pink {
  background: var(--pink); color: #fff;
  box-shadow: var(--shadow-cta), inset 0 0 0 1.5px var(--btn-ring);
}
.btn--pink:hover  { background: var(--pink-ink); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(248,76,168,.32), inset 0 0 0 1.5px var(--btn-ring); }
.btn--pink:active { transform: translateY(0); box-shadow: var(--shadow-cta), inset 0 0 0 1.5px var(--btn-ring); }

/* Secondary — calm cream/glass base, plum outline */
.btn--ghost, .btn--cream {
  background: rgba(255,247,240,.86); color: var(--ink);
  border: 1.5px solid var(--sec-border); box-shadow: var(--shadow-sm);
}
.btn--ghost:hover, .btn--cream:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-1px); }

/* On-photo secondary (the dark outline would vanish on the hero photo) */
.btn--ghost-light { background: transparent; color: var(--cream); border: 2px solid rgba(255,247,240,.72); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,20,40,.22); }

/* Focus */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.btn--pink:focus-visible { outline-color: var(--lilac); }
.btn--ghost-light:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* a11y helpers */
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 999; background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: var(--r-sm); transition: top .2s ease; }
.skip-link:focus { top: 1rem; }


/* ==========================================================================
   7. BADGES / CHIPS / STICKERS / TRUST PILLS
   ========================================================================== */
.sticker-label, .review-tag, .team-card__tag, .gallery-badge {
  font-family: var(--font-ui); font-weight: 800; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}

/* Sticker label — soft cream default with a small accent dot */
.sticker-label {
  display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .7rem;
  background: var(--cream); color: var(--ink); border: 1px solid rgba(43,29,51,.08);
}
.sticker-label--mint::before, .sticker-label--lilac::before, .sticker-label--orange::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%; flex: none; margin-right: .04rem;
}
.sticker-label--mint::before   { background: var(--mint); }
.sticker-label--lilac::before  { background: var(--lilac); }
.sticker-label--orange::before { background: var(--pink); }
.sticker-label--pink { background: var(--pink); color: #fff; border-color: transparent; }

/* Chip — outlined pill link */
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45em .95em;
  background: var(--white); color: var(--ink); font-weight: 600; font-size: .92rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  transition: transform .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--pink); color: var(--pink-ink); }

/* Tiny policy fact pills (contact) */
.fact-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.fact-pill { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: .45rem .9rem; font-weight: 600; font-size: .9rem; }

/* Trust pills + rating stars */
.trust-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem;
  background: var(--cream); color: var(--ink); border: 1px solid rgba(43,29,51,.08);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font-weight: 700; font-size: .95rem; text-decoration: none;
}
a.trust-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.trust-pill b { color: var(--pink-ink); }
.trust-pill .stars { color: var(--pink); letter-spacing: -1px; }
.trust-pill__sub { color: var(--muted); font-weight: 600; font-size: .86rem; }


/* ==========================================================================
   8. CARDS — one radius + one soft shadow language
   ========================================================================== */
.svc-tile, .review-card, .team-card, .info-card, .teaser-inner, .universe-card, .faq-item {
  border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--card-bg);
}
.svc-tile:hover, .review-card:hover, .team-card:hover { box-shadow: var(--shadow-card-hover); }

/* Organic image frames — pastel offset plate + white photo border */
.media-rounded { border-radius: var(--r-xl); object-fit: cover; }
.framed { position: relative; display: inline-block; }
.framed > img, .framed > video {
  position: relative; z-index: 1;
  border: 4px solid #fff; border-radius: inherit; box-shadow: var(--shadow-lg);
}
.framed::before {
  content: ""; position: absolute; inset: clamp(-26px, -2.8vw, -16px);
  background: var(--lilac); border-radius: inherit; transform: rotate(-3deg); z-index: 0;
  box-shadow: 0 16px 32px rgba(42,22,38,.13);
}
.framed--mint::before  { background: var(--mint); transform: rotate(3deg); }
.framed--pink::before  { background: var(--pink); transform: rotate(-4deg); }
.framed--lilac::before { background: var(--lilac); }
.framed--feature::before { inset: clamp(-34px, -3.6vw, -22px); box-shadow: 0 26px 58px rgba(42,22,38,.22); }
.framed--feature > img, .framed--feature > video { border-width: 5px; box-shadow: var(--shadow-xl); }

/* Subtle consistent photo grade so phone shots feel curated */
.framed > img, .framed > video,
.gallery-item img, .dogs-media img, .treat-media img { filter: saturate(1.05) contrast(1.02); }


/* ==========================================================================
   9. HERO SYSTEM — full-bleed editorial photo
   ========================================================================== */
.hero-bleed {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(540px, 86vh, 840px);
  padding-block: clamp(2.4rem, 6vw, 4rem);
  background: var(--ink);            /* fallback plum behind the photo */
  overflow: hidden;
}
.hero-bleed__img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-pos-d, 70% 30%);
}
/* Editorial scrim — deep plum on the left, fading right; cerise glow lower-left */
.hero-bleed__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(40,22,46,0.89) 0%, rgba(44,24,50,0.81) 22%, rgba(58,30,58,0.71) 40%,
      rgba(58,30,58,0.44) 55%, rgba(58,30,58,0.15) 69%, rgba(58,30,58,0.00) 81%),
    radial-gradient(130% 120% at -10% 115%, rgba(248,76,168,0.36) 0%, rgba(248,76,168,0) 54%),
    linear-gradient(0deg, rgba(34,20,40,0.48) 0%, rgba(34,20,40,0.07) 24%, rgba(34,20,40,0) 42%);
}
.hero-bleed--dim .hero-bleed__overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,20,40,.20), rgba(34,20,40,.30));
}
/* Stronger scrim for light/busy photos (behandlingar, om-oss) where the title
   sits directly on the photo. The <=640px split hero has its own light panel,
   so the extra scrim only applies from tablet width and up. */
@media (min-width: 641px) {
  .hero-bleed--scrim-strong .hero-bleed__overlay::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(34,20,40,.36) 0%, rgba(34,20,40,.24) 52%, rgba(34,20,40,.10) 100%);
  }
}

.hero-bleed__container { position: relative; z-index: 2; width: 100%; }
.hero-bleed__content { max-width: 33rem; color: var(--cream); }

.hero-bleed__eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 1.05rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,247,240,.86);
}
.hero-bleed__eyebrow span { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); display: inline-block; flex: none; }

.hero-bleed__title {
  margin: 0; color: var(--cream);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.015em;
  text-shadow: 0 2px 26px rgba(34,20,40,.45);
}
.hero-bleed__title span { display: block; }
.hero-bleed__title .hl-script {
  position: relative; width: max-content; max-width: 100%; margin: .04em 0 .08em;
  font-family: var(--font-hand); font-weight: 400; color: var(--polish-pink);
  font-size: 1.55em; line-height: 1; letter-spacing: 0;   /* neon set in §11 */
}
.hero-bleed__title--page { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; max-width: 18ch; }
.hero-bleed__title--page .hl-script { font-size: 1.5em; }

.hero-bleed__lead {
  margin-top: 1.25rem; max-width: 42ch;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; color: rgba(255,247,240,.96);
  text-shadow: 0 1px 3px rgba(34,20,40,.6), 0 1px 16px rgba(34,20,40,.45);
}
.hero-bleed__cta { margin-top: 1.7rem; }

.hero-bleed__meta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.hero-bleed__loc {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem;
  color: rgba(255,247,240,.92); text-shadow: 0 1px 12px rgba(34,20,40,.5);
}
.hero-bleed__loc::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint); flex: none; }
.hero-bleed__sep { opacity: .5; padding: 0 .1rem; }
.hero-bleed .trust-pill:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

.hero-bleed--page { min-height: clamp(360px, 52vh, 520px); }

/* One-time entrance */
.hero-bleed__content > * { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-bleed__eyebrow { animation-delay: .02s; }
.hero-bleed__title  { animation-delay: .08s; }
.hero-bleed__lead   { animation-delay: .16s; }
.hero-bleed__cta    { animation-delay: .22s; }
.hero-bleed__meta   { animation-delay: .28s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Tablet / small laptop: widen scrim, narrow column --- */
@media (max-width: 1039px) {
  .hero-bleed__content { max-width: 30rem; }
  .hero-bleed__overlay {
    background:
      linear-gradient(96deg,
        rgba(40,22,46,0.90) 0%, rgba(44,24,50,0.82) 26%, rgba(58,30,58,0.64) 48%,
        rgba(58,30,58,0.33) 64%, rgba(58,30,58,0.10) 78%, rgba(58,30,58,0.00) 90%),
      radial-gradient(130% 120% at -10% 115%, rgba(248,76,168,0.32) 0%, rgba(248,76,168,0) 54%),
      linear-gradient(0deg, rgba(34,20,40,0.48) 0%, rgba(34,20,40,0) 38%);
  }
}

/* --- Portrait phone / small tablet: bottom-anchored white-on-photo --- */
@media (max-width: 760px) {
  .hero-bleed { align-items: flex-end; min-height: clamp(560px, 90vh, 760px); padding-bottom: clamp(3.4rem, 12vw, 4.8rem); }
  .hero-bleed--page { min-height: clamp(420px, 60vh, 540px); }
  .hero-bleed__img { object-position: var(--hero-pos-m, 60% 26%); }
  .hero-bleed__overlay {
    background:
      linear-gradient(0deg,
        rgba(26,14,30,0.92) 0%, rgba(34,18,40,0.80) 15%, rgba(44,22,50,0.56) 33%,
        rgba(50,26,52,0.28) 51%, rgba(50,26,52,0.08) 71%, rgba(50,26,52,0.00) 88%),
      radial-gradient(120% 72% at 100% 3%, rgba(248,76,168,0.18) 0%, rgba(248,76,168,0) 58%);
  }
  .hero-bleed__content { max-width: none; width: 100%; }
  .hero-bleed__eyebrow { font-size: .72rem; letter-spacing: .16em; margin-bottom: .8rem; }
  .hero-bleed__title { font-size: clamp(2.15rem, 9vw, 2.9rem); text-shadow: 0 2px 4px rgba(26,14,30,.55), 0 2px 26px rgba(26,14,30,.5); }
  .hero-bleed__title--page { font-size: clamp(2rem, 8.5vw, 2.7rem); max-width: 16ch; }
  .hero-bleed__lead { margin-top: 1rem; font-size: 1.04rem; max-width: 40ch; }
  .hero-bleed__cta { margin-top: 1.4rem; flex-direction: column; align-items: stretch; }
  .hero-bleed__cta .btn { width: 100%; }
  .hero-bleed__meta { margin-top: 1.3rem; gap: .7rem .9rem; }
  .hero-bleed__loc { font-size: .9rem; }
}

/* --- Phone (<=640): split hero — image band + light Polish text panel --- */
@media (max-width: 640px) {
  .hero-bleed {
    --hero-m-imgh: clamp(228px, 50vw, 322px);
    --hero-wave-h: clamp(22px, 7vw, 34px);
    display: block; min-height: 0; align-items: stretch; overflow: visible;
    /* Room for the absolute bottom wave AND for the panel's drop shadow to fade
       out completely before the next section starts. The next section paints
       over the hero, so a shadow still fading at that point got sliced off in a
       dead straight line — which read as a second, unintended transition. */
    padding: 0 0 clamp(72px, 14vw, 104px);
    background: var(--cream);
  }
  .hero-bleed--page { min-height: 0; }

  .hero-bleed__img { position: relative; height: var(--hero-m-imgh); width: 100%; object-position: var(--hero-pos-m, 60% 30%); }
  .hero-bleed__overlay {
    top: 0; bottom: auto; height: var(--hero-m-imgh);
    background:
      linear-gradient(180deg, rgba(33,17,39,.14) 0%, rgba(33,17,39,0) 36%, rgba(33,17,39,.22) 100%),
      radial-gradient(120% 75% at 78% 12%, rgba(248,76,168,.10) 0%, rgba(248,76,168,0) 60%);
  }

  /* V4.6.2: the card no longer overlaps the photo. The photo's bottom edge and
     the panel now meet exactly, and the wave below spans the FULL viewport —
     previously the wave was only as wide as the inset card, so the photo kept
     running ~32px lower in the gutters beside it and the organic edge turned
     into a straight shelf at both ends. */
  .hero-bleed__container {
    position: relative; z-index: 2; margin-top: 0;
    padding-inline: clamp(.9rem, 4.2vw, 1.25rem);
  }
  /* Edge-to-edge organic transition. Lives on the container (full viewport
     width) rather than the card (inset), and its bottom meets the panel's top
     exactly, so there is no cream band over the panel's pink tint. */
  .hero-bleed__container::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(-1 * var(--hero-wave-h)); height: calc(var(--hero-wave-h) + 1px);
    pointer-events: none;   /* the extra pixel overlaps the panel so the join
                               can never show a sub-pixel hairline */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,80 480,4 720,32 C960,60 1200,84 1440,44 L1440,100 L0,100 Z' fill='%23FFF7F0'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  }
  .hero-bleed__content {
    position: relative; width: 100%; max-width: none; color: var(--ink);
    background:
      /* V4.6.2 — the panel's top edge holds the wave's cream and lets the pink
         tint emerge below it, so the wave and the panel read as one continuous
         surface instead of two shapes meeting at a line. */
      linear-gradient(180deg, var(--cream) 0%, rgba(255,247,240,0) 54px),
      radial-gradient(125% 80% at 8% -10%, var(--pink-soft) 0%, rgba(255,216,234,0) 52%),
      radial-gradient(120% 92% at 110% 118%, var(--lilac-soft) 0%, rgba(236,229,251,0) 56%),
      linear-gradient(176deg, var(--cream) 0%, #FFF1F6 58%, #FBF3FF 100%);
    border-radius: var(--r-lg);
    padding: clamp(1.55rem, 6.5vw, 2.15rem) clamp(1.25rem, 5vw, 1.6rem) clamp(1.5rem, 6vw, 2rem);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6), 0 16px 40px rgba(43,29,51,.16);
  }
  .hero-bleed__content::before { content: none; }   /* superseded by the full-width wave above */
  .hero-bleed__content::after {
    content: "\2726"; position: absolute; right: 20px; top: -12px; z-index: 1; pointer-events: none;
    font-family: var(--font-ui); color: var(--pink); font-size: 1.05rem; line-height: 1; text-shadow: 0 2px 6px rgba(43,29,51,.22);
  }

  .hero-bleed__eyebrow { color: var(--pink-ink); text-shadow: none; margin-bottom: .7rem; }
  .hero-bleed__title   { color: var(--ink); text-shadow: none; }
  .hero-bleed__lead    { color: var(--ink-soft); text-shadow: none; margin-top: .85rem; }
  .hero-bleed__loc     { color: var(--ink-soft); text-shadow: none; }
  .hero-bleed__loc::before { background: var(--pink); }
  .hero-bleed__sep     { color: var(--pink); }

  .hero-bleed__cta { margin-top: 1.2rem; gap: .6rem; flex-direction: column; align-items: stretch; }
  /* V4.6.2: both hero CTAs share one width and one height. The secondary used
     to be width:auto + align-self:center with a shorter padding-block, which
     made the pair look unbalanced. Only the fill/outline treatment differs. */
  .hero-bleed__cta .btn { width: 100%; align-self: stretch; min-height: 48px; }
  .hero-bleed__cta .btn--ghost-light {
    background: transparent; color: var(--ink);
    /* The outline is drawn with an inset shadow rather than a real border, so
       both buttons share an identical box model and therefore an identical
       height — a 1.5px border would otherwise make this one taller. */
    border: 0; box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .hero-bleed__cta .btn--ghost-light:hover,
  .hero-bleed__cta .btn--ghost-light:focus-visible {
    background: var(--ink); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .hero-bleed__cta .btn--ghost-light:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-1px); }
  .hero-bleed__meta { margin-top: 1.1rem; }
}


/* ==========================================================================
   10. SECTION BACKGROUNDS / WAVES / DIVIDERS
   --------------------------------------------------------------------------
   Seam contract: each section starts (0–20%) at the same colour as the
   divider that leads INTO it, drifts through its own family, and ends at
   --sec-to (≈ the next section's top colour). .to-* utilities tune the exit.
   ========================================================================== */
.to-lilac { --sec-to: #ECE9F5; }
.to-pink  { --sec-to: #FFDDEC; }

.section--pink-soft  { background: linear-gradient(172deg, var(--pink-soft) 0%, var(--pink-soft) 20%, var(--pink-soft-2) 55%, var(--sec-to, #FFF0E6) 100%); }
.section--mint-soft  { background: linear-gradient(172deg, var(--mint-soft) 0%, var(--mint-soft) 20%, #DEF2E4 55%, var(--sec-to, #F2F4EA) 100%); }
.section--lilac-soft { background: linear-gradient(172deg, var(--lilac-soft) 0%, var(--lilac-soft) 22%, #EFE6F4 58%, var(--sec-to, #F5ECEF) 100%); }
.section--cream-deep { background: linear-gradient(172deg, var(--cream-deep) 0%, var(--cream-deep) 20%, #FFE9DC 60%, var(--sec-to, #FFDDEC) 100%); }
.section--cream {
  background:
    radial-gradient(64% 44% at 88% 14%, rgba(95,211,174,.08), transparent 62%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream) 16%, var(--cream-deep) 58%, var(--sec-to, #E9F4EA) 100%);
}

/* Dividers — the section's own bottom edge (absolute), carrying the next
   section's fill colour so the incoming shape melts in. */
.divider { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(38px, 6.5vw, 84px); z-index: 1; pointer-events: none; }
.divider path { fill: currentColor; }
.divider--flip { transform: scaleX(-1); }
.divider--scallop { height: clamp(20px, 3.2vw, 42px); }

.fill-cream      { color: var(--cream); }
.fill-cream-deep { color: var(--cream-deep); }
.fill-pink-soft  { color: var(--pink-soft); }
.fill-mint-soft  { color: var(--mint-soft); }
.fill-lilac-soft { color: var(--lilac-soft); }
.fill-pink       { color: var(--pink); }
.fill-plum-soft  { color: #5C2A46; }   /* CTA → footer seam tint */

/* Kill the sub-pixel seam: next surface overlaps the divider's solid base */
main > section:not(:first-child), .site-footer { margin-top: -2px; }

/* Air above the shape, inside the section so it shares the gradient */
.section:has(> .divider)          { padding-bottom: calc(var(--section-y) + var(--air-wave)); }
.section:has(> .divider--scallop) { padding-bottom: calc(var(--section-y) + var(--air-scallop)); }

/* Anchor landing never tucks a heading under the sticky header */
:where(.section, .hero-bleed) { scroll-margin-top: 96px; }
@media (max-width: 920px) { :where(.section, .hero-bleed) { scroll-margin-top: 80px; } }


/* ==========================================================================
   11. NEON / HIGHLIGHT SYSTEM (opt-in)
   --------------------------------------------------------------------------
   A) Hero titles: .hl-script (+ hero hue modifiers) read as lit neon tubing
      on the dark photo (>=641px) and as clean solid colour on the light
      mobile panel (<=640px).
   B) Body words: .neon-highlight + .neon-{pink,mint,lavender}. Nothing is
      neon unless it carries .neon-highlight. Two modes off one API:
      DAYLIGHT on light sections, DARK/HERO (near-white core) on CTA+footer.
   ========================================================================== */

/* --- A) Hero neon --- */
.phrase--mint { color: #10A074; text-shadow: 0 0 4px rgba(45,220,150,.4), 0 0 12px rgba(53,230,168,.26), 0 0 20px rgba(53,230,168,.16); }

@media (min-width: 641px) {
  .hero-bleed__title .hl-script,
  .hero-bleed__title .highlight-pink,
  .hero-bleed__title .highlight-purple,
  .hero-bleed__title .highlight-mint { isolation: isolate; background: none; }
  .hero-bleed__title .hl-script::before,
  .hero-bleed__title .highlight-pink::before,
  .hero-bleed__title .highlight-purple::before,
  .hero-bleed__title .highlight-mint::before {
    content: ""; position: absolute; inset: -.26em -.44em; z-index: -1; pointer-events: none; filter: blur(14px); opacity: .92;
  }

  /* cerise (default hero accent) */
  .hero-bleed__title .hl-script,
  .hero-bleed__title .highlight-pink {
    color: #FFF2FB; -webkit-text-fill-color: #FFF2FB;
    text-shadow:
      0 0 3px rgba(255,255,255,.95), 0 0 7px rgba(255,190,235,.92),
      0 0 14px rgba(248,76,168,.9), 0 0 27px rgba(248,76,168,.74),
      0 0 46px rgba(248,76,168,.46), 0 0 72px rgba(150,80,185,.30);
    filter: drop-shadow(0 0 16px rgba(248,76,168,.5));
  }
  .hero-bleed__title .hl-script::before,
  .hero-bleed__title .highlight-pink::before {
    background: radial-gradient(circle at 48% 52%, rgba(248,76,168,.32) 0%, rgba(126,60,150,.24) 40%, rgba(40,18,54,.22) 60%, transparent 76%);
  }

  /* lavender */
  .hero-bleed__title .highlight-purple {
    color: #F6F0FF; -webkit-text-fill-color: #F6F0FF;
    text-shadow:
      0 0 3px rgba(255,255,255,.95), 0 0 7px rgba(225,210,255,.92),
      0 0 14px rgba(150,110,240,.9), 0 0 27px rgba(150,110,240,.72),
      0 0 46px rgba(150,110,240,.44), 0 0 72px rgba(110,70,170,.30);
    filter: drop-shadow(0 0 16px rgba(150,110,240,.5));
  }
  .hero-bleed__title .highlight-purple::before {
    background: radial-gradient(circle at 48% 52%, rgba(150,110,240,.32) 0%, rgba(110,70,160,.24) 42%, rgba(38,18,54,.22) 62%, transparent 78%);
  }

  /* mint / teal */
  .hero-bleed__title .highlight-mint {
    color: #EAFFF7; -webkit-text-fill-color: #EAFFF7;
    text-shadow:
      0 0 3px rgba(255,255,255,.95), 0 0 7px rgba(190,255,235,.9),
      0 0 14px rgba(45,205,165,.88), 0 0 27px rgba(45,205,165,.66),
      0 0 46px rgba(45,205,165,.40), 0 0 72px rgba(40,120,120,.28);
    filter: drop-shadow(0 0 16px rgba(45,205,165,.46));
  }
  .hero-bleed__title .highlight-mint::before {
    background: radial-gradient(circle at 48% 52%, rgba(45,205,165,.30) 0%, rgba(60,110,130,.22) 42%, rgba(30,30,54,.22) 62%, transparent 78%);
  }
}

/* Hero highlights on the light mobile panel — clean solid colour + soft glow */
@media (max-width: 640px) {
  .hero-bleed__title .hl-script,
  .hero-bleed__title .highlight-pink {
    background: none; -webkit-text-fill-color: var(--pink); color: var(--pink);
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 11px rgba(248,76,168,.26);
  }
  .hero-bleed__title .highlight-purple {
    background: none; -webkit-text-fill-color: #7A4FE0; color: #7A4FE0;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 11px rgba(150,110,240,.24);
  }
  .hero-bleed__title .highlight-mint {
    background: none; -webkit-text-fill-color: var(--mint-deep); color: var(--mint-deep);
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 11px rgba(31,157,124,.24);
  }
}

/* --- B) Body neon (opt-in) --- */
.neon-highlight { position: relative; isolation: isolate; }

/* MODE 1 · DAYLIGHT — saturated readable body + slim top highlight + soft glow */
.neon-highlight.neon-pink {
  color: #D62E86;
  background: linear-gradient(180deg, #FFAAD5 0%, #F84CA8 16%, #EA2E90 78%, #D62E86 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(255,176,214,.5), 0 0 7px rgba(248,76,168,.42), 0 0 17px rgba(248,76,168,.28), 0 0 36px rgba(248,76,168,.15);
}
.neon-highlight.neon-mint {
  color: #0C8A66;
  background: linear-gradient(180deg, #7FE6C4 0%, #12A87E 16%, #0D946C 78%, #0C8A66 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(150,240,210,.45), 0 0 7px rgba(38,200,158,.38), 0 0 18px rgba(38,200,158,.24), 0 0 40px rgba(31,157,124,.14);
}
.neon-highlight.neon-lavender {
  color: #5A2EC2;
  background: linear-gradient(180deg, #CBAEFF 0%, #7B4BE0 16%, #6536D0 78%, #5A2EC2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(205,180,255,.48), 0 0 7px rgba(150,110,240,.4), 0 0 18px rgba(150,110,240,.26), 0 0 38px rgba(120,80,210,.14);
}
/* soft aura behind the word, hugging it (never a visible box) */
.neon-highlight.neon-pink::before,
.neon-highlight.neon-mint::before,
.neon-highlight.neon-lavender::before {
  content: ""; position: absolute; inset: -.34em -.54em; z-index: -1; pointer-events: none; filter: blur(13px); opacity: .42;
}
.neon-highlight.neon-pink::before     { background: radial-gradient(58% 115% at 50% 52%, rgba(248,76,168,.42) 0%, rgba(248,76,168,.16) 46%, transparent 72%); }
.neon-highlight.neon-mint::before     { background: radial-gradient(64% 125% at 50% 52%, rgba(38,200,158,.36) 0%, rgba(38,200,158,.14) 48%, transparent 74%); }
.neon-highlight.neon-lavender::before { background: radial-gradient(58% 115% at 50% 52%, rgba(150,110,240,.4) 0%, rgba(150,110,240,.15) 46%, transparent 72%); }

/* MODE 2 · DARK / HERO — near-white core + strong colour glow on plum CTA + footer */
.cta-final h2 .neon-highlight,
.footer-cta h2 .neon-highlight {
  color: #FFF2FB; background: none;
  -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #FFF2FB;
  text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 8px rgba(255,190,235,.85), 0 0 16px rgba(248,76,168,.66), 0 0 30px rgba(248,76,168,.38);
}
.cta-final h2 .neon-highlight::before,
.footer-cta h2 .neon-highlight::before {
  content: ""; position: absolute; inset: -.2em -.34em; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(248,76,168,.3) 0%, rgba(120,60,150,.2) 46%, transparent 74%); filter: blur(12px); opacity: .7;
}

/* Footer closing sign — the whole line is script + lit neon on the plum */
.footer-cta h2 .footer-cta__sign { display: inline-block; font-size: 1.06em; line-height: 1.18; letter-spacing: .004em; }
.footer-cta h2 .footer-cta__sign.neon-highlight {
  color: #FFF2FB; background: none; -webkit-text-fill-color: #FFF2FB;
  text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 7px rgba(255,190,235,.8), 0 0 15px rgba(248,76,168,.58), 0 0 30px rgba(248,76,168,.32), 0 0 50px rgba(150,80,185,.16);
}
.footer-cta h2 .footer-cta__sign.neon-highlight::before {
  inset: -.14em -.45em; background: radial-gradient(70% 130% at 50% 52%, rgba(248,76,168,.3) 0%, rgba(150,80,185,.16) 48%, transparent 74%); filter: blur(16px); opacity: .4;
}

/* Mobile: crisper neon — tighter glow, smaller aura, rubric words stay whole */
@media (max-width: 640px) {
  .neon-highlight.neon-pink     { text-shadow: 0 0 1px rgba(255,176,214,.45), 0 0 5px rgba(248,76,168,.34), 0 0 12px rgba(248,76,168,.2); }
  .neon-highlight.neon-mint     { text-shadow: 0 0 1px rgba(150,240,210,.4), 0 0 5px rgba(38,200,158,.3), 0 0 13px rgba(38,200,158,.18); }
  .neon-highlight.neon-lavender { text-shadow: 0 0 1px rgba(205,180,255,.42), 0 0 5px rgba(150,110,240,.32), 0 0 13px rgba(150,110,240,.18); }
  .neon-highlight.neon-pink::before,
  .neon-highlight.neon-mint::before,
  .neon-highlight.neon-lavender::before { inset: -.26em -.4em; filter: blur(10px); opacity: .36; }
  .footer-cta h2 .footer-cta__sign { font-size: 1em; }
  .footer-cta h2 .footer-cta__sign.neon-highlight { text-shadow: 0 0 2px rgba(255,255,255,.88), 0 0 6px rgba(255,190,235,.72), 0 0 12px rgba(248,76,168,.5), 0 0 24px rgba(248,76,168,.26); }
  .footer-cta h2 .footer-cta__sign.neon-highlight::before { inset: -.1em -.34em; filter: blur(12px); opacity: .34; }
  h1 .ital, h2 .ital, h3 .ital, .ital { font-size: 1.3em; }
  .hero-bleed__title .hl-script { font-size: 1.48em; }
  .hero-bleed__title--page .hl-script { font-size: 1.34em; }
}


/* ==========================================================================
   12. HOMEPAGE SECTIONS
   ========================================================================== */
/* Positioning — points list */
.points { display: grid; gap: .7rem; margin-top: 1.4rem; }
.point  { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; }
.point__mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pink); color: var(--white); display: grid; place-items: center; font-size: .8rem; margin-top: .12rem; }

/* Service tiles (priced) */
.svc-tiles { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.svc-tile { position: relative; padding: 1.6rem 1.4rem 1.4rem; overflow: visible; display: flex; flex-direction: column; gap: .5rem; }
.svc-tile:nth-child(3) { background: var(--accent-mint); }   /* one sparse accent */
.svc-tile h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -.01em; }
.svc-tile p  { color: var(--ink); opacity: .82; font-size: .98rem; line-height: 1.45; flex: 1; }
.svc-tile__tags { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); opacity: .55; text-transform: uppercase; }
.svc-tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.svc-tile__price { font-family: var(--font-display); font-weight: 700; color: var(--pink-ink); font-size: 1.5rem; line-height: 1; }
.svc-tile__price span { display: block; font-family: var(--font-ui); font-weight: 600; font-size: .78rem; color: var(--ink); opacity: .6; margin-top: .3rem; }
.svc-tile__sticker { position: absolute; top: -11px; right: 14px; transform: rotate(3deg); z-index: 4; }

/* Studio reel */
.studio-v2__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.studio-v2__copy h2 { margin-bottom: .2rem; }
.studio-v2__media { position: relative; }
.reel-card { position: relative; width: clamp(264px, 26vw, 330px); margin-inline: auto; transform: rotate(1.5deg); }
.reel-card::before {
  content: ""; position: absolute; z-index: 0; inset: -6% -17% 2% -19%;
  background: var(--lilac-soft); border-radius: 52% 48% 56% 44% / 50% 57% 43% 50%; transform: rotate(-3deg);
}
.reel-card__video {
  position: relative; z-index: 1; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  border: 5px solid var(--cream); background: var(--ink); box-shadow: var(--shadow-xl); transform: translateZ(0);
}
.reel-card__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card__label { position: absolute; z-index: 2; top: -13px; left: 14px; transform: rotate(-2deg); }
.reel-card__cap { position: relative; z-index: 1; margin: .75rem auto 0; text-align: center; font-size: .87rem; color: var(--muted); max-width: 30ch; line-height: 1.45; }
.reel-card__cap a { font-weight: 700; color: var(--pink-ink); white-space: nowrap; }
.reel-card__cap a:hover, .reel-card__cap a:focus-visible { text-decoration: underline; }

/* Reviews */
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.review-card { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; border: 1px solid rgba(43,29,51,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(43,29,51,.10), 0 2px 6px rgba(43,29,51,.05); }
.reviews-grid .review-card:nth-child(3n+2) { background: var(--accent-pink); border-color: rgba(248,76,168,.16); }
.review-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(43,29,51,.15), 0 3px 8px rgba(43,29,51,.06); }
.review-card p { color: var(--ink); font-size: 1rem; line-height: 1.5; }
.review-stars { display: inline-flex; gap: .15rem; color: var(--pink); letter-spacing: 1.5px; text-shadow: 0 0 6px rgba(248,76,168,.4), 0 0 13px rgba(248,76,168,.22); }
.review-card__who { display: flex; align-items: center; gap: .65rem; margin-top: auto; }
.review-card__who b { display: block; font-weight: 700; line-height: 1.15; }
.review-meta { display: flex; flex-direction: column; }
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-ui); font-weight: 800; font-size: .82rem; color: #fff; background: var(--pink-ink);
  border: 2px solid rgba(255,255,255,.78); box-shadow: 0 3px 10px rgba(214,46,134,.34), 0 0 0 1px rgba(43,29,51,.04);
}
.review-card:nth-child(3n+2) .review-avatar { background: var(--mint-deep); box-shadow: 0 3px 10px rgba(31,157,124,.36), 0 0 0 1px rgba(43,29,51,.04); }
.review-card:nth-child(3n+3) .review-avatar { background: #7a5cc0; box-shadow: 0 3px 10px rgba(122,92,192,.36), 0 0 0 1px rgba(43,29,51,.04); }
.review-tag { font-size: .78rem; font-weight: 700; color: var(--ink); background: var(--cream); border: 1px solid rgba(248,76,168,.2); padding: .2rem .6rem; border-radius: var(--r-pill); align-self: flex-start; text-transform: none; letter-spacing: 0; box-shadow: none; }
.reviews-bridge { font-weight: 700; color: var(--ink); max-width: 46ch; margin: 1.7rem auto .1rem; font-size: 1.05rem; }

/* Team — bookable rating cards */
.team-v2 { position: relative; overflow: hidden; padding-top: clamp(2rem, 4vw, 3.2rem); }
.team-v2 .section-head { margin-bottom: clamp(1.5rem, 3.2vw, 2.3rem); }
.team-v2 .section-head .lead { max-width: 52ch; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.9rem, 2vw, 1.3rem); margin-top: 1.4rem; }
.team-card { position: relative; padding: 1.6rem 1.2rem 1.4rem; text-align: center; overflow: hidden; }
.team-card--3 { background: var(--accent-lilac); }
.team-card__tag {
  display: inline-block; font-family: var(--font-ui); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.72); border-radius: var(--r-pill); padding: .3rem .62rem; margin-bottom: .7rem;
}
.team-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin: 0; }
.team-card__rating { font-family: var(--font-display); font-weight: 700; color: var(--pink-ink); font-size: 2.1rem; margin-top: .5rem; line-height: 1; }
.team-card__rating .s { color: var(--pink); font-size: .68em; }
.team-card__count { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
a.team-card { display: block; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
a.team-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(42,22,38,.16); }
a.team-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.team-card__go { display: inline-block; margin-top: .7rem; font-family: var(--font-ui); font-weight: 800; font-size: .78rem; letter-spacing: .04em; color: var(--pink-ink); }
a.team-card:hover .team-card__go { text-decoration: underline; }

/* Dogs */
.dogs-section { position: relative; overflow: hidden; }
.dogs-media { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dogs-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 4px solid #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.dogs-media img:nth-child(1) { border-radius: 46% 54% 56% 44% / 48% 42% 58% 52%; }

/* Polish Universe chapter */
.section--universe {
  background:
    /* V4.6.2 — seam matcher, painted on top: the incoming wave is pure
       --lilac-soft, but the two radial tints below used to start at full
       strength at y=0, so the section boundary read as a second, straight
       transition right under the wave. This layer holds the exact wave colour
       at the top and fades the tints in over the first 16%. */
    linear-gradient(180deg, var(--lilac-soft) 0%, rgba(236,229,251,0) 16%),
    radial-gradient(120% 80% at 86% -5%, rgba(95,211,174,.20) 0%, rgba(95,211,174,0) 52%),
    radial-gradient(90% 70% at 8% 0%, rgba(199,182,242,.30) 0%, rgba(199,182,242,0) 55%),
    linear-gradient(168deg, var(--lilac-soft) 0%, var(--lilac-soft) 14%, var(--cream) 56%, #EAF6F0 100%);
  padding-block: clamp(3.4rem, 7vw, 5.6rem);
}
.universe__head { max-width: 62ch; margin-inline: auto; }
.universe__head h2 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); line-height: 1.04; }
.universe__head .lead { margin-inline: auto; max-width: 60ch; }
.universe__visual { position: relative; margin: clamp(1.9rem, 4vw, 2.9rem) auto 0; max-width: 1000px; }
.universe__visual img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: clamp(22px, 3vw, 40px); box-shadow: 0 26px 64px rgba(60,30,70,.22), 0 0 0 6px rgba(255,255,255,.72); }
.universe__visual::before {
  content: ""; position: absolute; z-index: 0; inset: -3.5% -3% -8% -3%;
  border-radius: 46% 54% 56% 44% / 48% 42% 58% 52%;
  background: linear-gradient(120deg, var(--pink-soft) 0%, var(--lilac-soft) 60%, var(--mint-soft) 100%); filter: blur(.4px);
}
.universe__sticker { position: absolute; z-index: 3; top: -12px; left: clamp(14px, 4vw, 34px); }
.universe__tracks { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: clamp(1.9rem, 4vw, 2.7rem); }
.universe-card { position: relative; overflow: hidden; padding: clamp(1.5rem, 2.8vw, 2rem); border-top: 4px solid var(--lilac); box-shadow: 0 16px 36px rgba(60,30,70,.12); }
.universe-card--academy { border-top-color: #9B7FE0; }
.universe-card--shop    { border-top-color: var(--mint-deep); }
.universe-card__doodle  { position: absolute; width: 30px; top: 16px; right: 16px; opacity: .65; }
.universe-card__badge {
  display: inline-flex; align-items: center; font-family: var(--font-ui); font-weight: 800; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; padding: .34rem .74rem; border-radius: var(--r-pill);
}
.universe-card__badge--purple { background: #8A53E6; box-shadow: 0 6px 14px rgba(138,83,230,.3); }
.universe-card__badge--mint   { background: var(--mint-deep); box-shadow: 0 6px 14px rgba(31,157,124,.3); }
.universe-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.62rem); margin: .8rem 0 .45rem; color: var(--ink); }
.universe-card p  { color: var(--ink-soft); line-height: 1.55; max-width: 46ch; }
.universe__cta { margin-top: clamp(1.7rem, 3.6vw, 2.3rem); }


/* ==========================================================================
   13. TREATMENT / SERVICE SECTIONS (behandlingar)
   ========================================================================== */
.treat-group { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; scroll-margin-top: 100px; }
.treat-group + .treat-group { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.treat-media { position: relative; }
.treat-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc-card__sticker { position: absolute; top: 12px; left: 12px; z-index: 3; transform: rotate(-5deg); }
.treat-group__head h2 { margin-bottom: .4rem; }
.treat-group__head .lead { font-size: 1.05rem; }
.treat-list { display: grid; gap: .7rem; margin-top: 1.2rem; }
.treat-row { background: var(--white); border-radius: 14px; padding: .95rem 1.1rem; box-shadow: var(--shadow-card); display: grid; gap: .25rem; }
.treat-row__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; }
.treat-row__name { font-weight: 700; color: var(--ink); }
.treat-row__price { font-weight: 700; color: var(--pink-ink); white-space: nowrap; }
.treat-row__desc { color: var(--muted); font-size: .94rem; }
.treat-row__time { font-size: .85rem; color: var(--mint-deep); font-weight: 600; }
.treat-media--soft { max-width: 300px; }
.treat-media--soft img { aspect-ratio: 4 / 5; }

/* Teaser block (behandlingar "Tips") */
.teaser-inner { margin-top: clamp(2.4rem, 5vw, 3.6rem); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-feature); display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.teaser-inner h3 { font-family: var(--font-display); font-size: 1.5rem; }
.teaser-inner p  { color: var(--muted); max-width: 54ch; }
.teaser-inner .badge-new {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--pink); color: #fff; font-family: var(--font-ui); font-weight: 800;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .72rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   14. GALLERY SECTIONS + LIGHTBOX
   ========================================================================== */
.gallery-item {
  position: relative; display: block; width: 100%; padding: 0; overflow: visible;
  border-radius: var(--r-md); border: 3px solid #fff; background: var(--pink-soft-2); box-shadow: var(--shadow-md);
}
/* The picture is clipped by its own wrapper, not by the card. That way the
   category badge sits outside the clipping context and can never be cut by the
   corner radius, whatever the radius happens to be. */
.gallery-item__media {
  display: block; overflow: hidden;
  border-radius: calc(var(--r-md) - 3px);   /* the card's inner curve, minus its 3px frame */
}
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__cap { display: none; }   /* badge carries context; full caption shown in lightbox */

/* Editorial badge (top-left) */
.gallery-badge {
  position: absolute; top: 9px; left: 9px; z-index: 3; display: inline-flex; align-items: center; gap: .3rem;
  max-width: calc(100% - 18px);
  background: var(--white); color: var(--ink); font-size: .72rem; letter-spacing: .04em;
  padding: .24rem .56rem; border: 1px solid rgba(42,22,38,.12); box-shadow: 0 2px 0 0 rgba(42,22,38,.2);
}
.gallery-badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 2px; background: var(--pink); transform: rotate(12deg); }
.gallery-item[data-cat="chrome"] .gallery-badge::before { background: var(--lilac); }
.gallery-item[data-cat="3d"]     .gallery-badge::before { background: var(--mint); }
.gallery-item[data-cat="floral"] .gallery-badge::before { background: var(--pink); }
.gallery-item--feature .gallery-badge { background: var(--pink); color: #fff; }
.gallery-item--feature .gallery-badge::before { display: none; }

/* Feature tiles — soft white frame + cerise ring instead of a hard border */
.inspo-wall .gallery-item--feature,
.masonry .gallery-item--feature {
  box-shadow: 0 16px 38px rgba(42,22,38,.22), 0 0 0 2px rgba(248,76,168,.18);
}

/* Home inspo wall — masonry columns + organic radii */
.inspo-wall { columns: 2; column-gap: .8rem; }
.inspo-wall > * { break-inside: avoid; margin-bottom: .8rem; }
/* V4.6.2: one consistent, conventional corner radius for every gallery card.
   The oval (46% 54% …) and extra-round (38px) variants cut into the category
   labels — the "3D" badge lost its first character. Height variation still
   comes from the images' own aspect ratios, so the masonry rhythm is intact. */
.inspo-wall .gallery-item { border-radius: var(--r-md); }

/* Pull-quote tile in the inspo wall */
.quote-tile { break-inside: avoid; margin-bottom: .8rem; border-radius: var(--r-card); padding: 1.4rem 1.2rem; display: grid; place-items: center; text-align: center; min-height: 160px; background: var(--pink); color: #fff; box-shadow: var(--shadow-feature); }
.quote-tile p { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; }

/* Gallery page — masonry + filter bar */
.masonry { columns: 2; column-gap: .9rem; }
.masonry .gallery-item { break-inside: avoid; margin-bottom: .9rem; }
.masonry .gallery-item[hidden] { display: none; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); justify-content: center; }
.filter-btn {
  padding: .56rem 1.15rem; border-radius: var(--r-pill);
  background: var(--white); border: 1.5px solid rgba(43,29,51,.1); font-weight: 700; font-size: .92rem; color: var(--ink);
  box-shadow: 0 4px 12px rgba(60,30,70,.06);
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.filter-btn:hover { transform: translateY(-1px); border-color: var(--pink); color: var(--pink-ink); box-shadow: 0 8px 18px rgba(248,76,168,.16); }
.filter-btn.is-active { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 8px 20px rgba(248,76,168,.32); }

/* Lightbox (built by JS) */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 1.6rem); visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease;
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(248,76,168,.16) 0%, rgba(248,76,168,0) 46%),
    radial-gradient(140% 130% at 50% 60%, rgba(58,30,58,.92) 0%, rgba(26,14,24,.96) 72%);
}
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox__figure { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox__img { max-width: 92vw; max-height: 78vh; width: auto; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.lightbox__cap { color: var(--cream); font-size: .95rem; text-align: center; max-width: 60ch; background: rgba(43,29,51,.5); padding: .5rem .9rem; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__btn, .lightbox__close {
  position: absolute; width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(43,29,51,.62); border: 1.5px solid rgba(255,247,240,.6); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: background-color .16s ease, transform .16s ease, border-color .16s ease;
}
.lightbox__btn { top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; }
.lightbox__close { top: clamp(.7rem, 2vw, 1.1rem); right: clamp(.7rem, 2vw, 1.1rem); width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; }
.lightbox__btn:hover, .lightbox__close:hover { background: var(--pink); border-color: var(--pink); transform: scale(1.05); }
.lightbox__btn:focus-visible, .lightbox__close:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
@media (max-width: 600px) {
  .lightbox__img { max-height: 70vh; }
  .lightbox__figure { max-height: 80vh; }
  .lightbox__btn { width: 46px; height: 46px; top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__btn:hover { transform: none; }
}


/* ==========================================================================
   15. ABOUT SECTIONS (om-oss)
   --------------------------------------------------------------------------
   Uses shared .split, .framed, .info-grid / .info-card (defined in §8/§16).
   No page-specific structure needed beyond the shared primitives.
   ========================================================================== */


/* ==========================================================================
   16. CONTACT / FORM SECTIONS + FAQ
   ========================================================================== */
/* Info cards (contact + about) */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.info-card { padding: 1.3rem 1.4rem; }
.info-card h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.info-card p, .info-card a { color: var(--muted); }
.info-card a:hover { color: var(--pink-ink); }
.info-card p + p { margin-top: .5rem; }
.info-card .info-list + .form-hint { margin-top: .6rem; }
.info-list { display: grid; gap: .35rem; }
.info-list .row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding: .25rem 0; }

/* Row of chip links inside a card */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

/* Contact form */
.form-heading { margin-bottom: 1rem; }
.contact-form { background: var(--white); border-radius: var(--r-xl); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-md); display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--pink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--cream); color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.field textarea { min-height: 140px; resize: vertical; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: var(--r-md); padding: .85rem 1rem; font-weight: 500; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--mint-soft); color: var(--mint-deep); border: 1.5px solid var(--mint); }
.form-status.is-error { background: #ffe2e2; color: #b3261e; border: 1.5px solid #f3a3a3; }

/* FAQ (native details) */
.faq-list { display: grid; gap: .7rem; }
.faq-item { overflow: hidden; border: 1.5px solid rgba(43,29,51,.05); box-shadow: 0 10px 26px rgba(60,30,70,.08); transition: box-shadow .18s ease; }
.faq-item:hover { box-shadow: 0 14px 32px rgba(60,30,70,.12); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; border-radius: 50%;
  background: var(--pink-soft); color: var(--pink-ink); transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.faq-item:nth-child(3n+2) summary::after { background: var(--mint-soft); color: var(--mint-deep); }
.faq-item:nth-child(3n)   summary::after { background: var(--lilac-soft); color: #7A4FD0; }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--pink); color: #fff; }
.faq-item[open]:nth-child(3n+2) summary::after { background: var(--mint-deep); color: #fff; }
.faq-item[open]:nth-child(3n)   summary::after { background: #8A53E6; color: #fff; }
.faq-item__body { padding: 0 1.2rem 1.1rem; color: var(--muted); }


/* ==========================================================================
   17. CTA SECTION (poster — shared partial)
   ========================================================================== */
.cta-final {
  position: relative; overflow: hidden; color: var(--ink);
  padding-block: clamp(3.4rem, 7vw, 5.5rem);
  background: linear-gradient(168deg, var(--pink) 0%, var(--pink) 14%, #FF5FAE 50%, #E04E86 86%, #B23E6E 118%);
}
.cta-final .container { position: relative; z-index: 2; }
.cta-final h2 { color: var(--ink); text-shadow: none; font-size: clamp(2.3rem, 5.5vw, 3.9rem); }
.cta-final p, .cta-final .lead { color: rgba(43,29,51,.88); margin-inline: auto; }
.cta-final__sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Primary (Boka) — deepest, solid plum */
.cta-final .btn--cream { background: var(--ink); color: var(--cream); border: 0; box-shadow: 0 14px 28px rgba(43,29,51,.32); }
.cta-final .btn--cream:hover { background: #211228; color: #fff; transform: translateY(-1px); box-shadow: 0 18px 34px rgba(43,29,51,.40); }
/* Secondary (Fråga) — solid cream, never transparent */
.cta-final .btn--ghost { background: var(--cream); color: var(--ink); border: 0; box-shadow: var(--shadow-sm); }
.cta-final .btn--ghost:hover { background: #fff; color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.cta-final .divider { height: clamp(26px, 4.2vw, 56px); }


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer { position: relative; color: #E9D7E4; background: linear-gradient(180deg, #5C2A46 0px, var(--plum) 230px, var(--plum) 100%); }

/* Closing headline */
/* V4.6.3: the closing line's neon glow is an absolutely positioned pseudo
   element that reaches about .34em past the text on each side. At 320px the
   line fills the container, so the glow spilled ~11px past the viewport and
   the whole page could be dragged sideways. (Pre-existing — it is in the V4.6.2
   build too; it only surfaced when 320px was added to the test set.)
   `overflow-x: clip` contains the decoration at the container edge without
   creating a scroll container. `hidden` would create one, and that would break
   the sticky header. */
.footer-cta { text-align: center; padding: clamp(2.6rem, 6vw, 4rem) 0 .5rem; overflow-x: clip; }
.footer-cta h2 { color: var(--cream); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; max-width: 18ch; margin-inline: auto; }

/* Grid */
.footer-grid {
  display: grid; gap: 1.8rem 1.4rem; padding-block: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "brand brand" "nav treat" "contact contact";
}
.footer-brand { grid-area: brand; max-width: 38ch; }
.footer-col--nav { grid-area: nav; }
.footer-col--treat { grid-area: treat; }
.footer-contact { grid-area: contact; }

.footer-brand .wordmark { margin-bottom: .2rem; }
.footer-brand .wordmark__script { font-size: 2.3rem; }
.site-footer .wordmark__script { color: var(--pink); }
.site-footer .wordmark__sub { color: var(--cream); }
.footer-tagline { margin-top: 1rem; color: #C9B6C6; }

.footer-trustpills { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0 1rem; }
.footer-social-icons { display: flex; gap: .6rem; }
.footer-social-icons a {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pink); display: grid; place-items: center;
  border: 2px solid rgba(0,0,0,.28); box-shadow: 0 3px 0 0 rgba(0,0,0,.32); transition: transform .15s ease, background .15s ease;
}
.footer-social-icons a:hover { transform: translateY(-2px); background: var(--pink-ink); }
.footer-social-icons svg { width: 20px; height: 20px; fill: #fff; }

.footer-col__title { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--cream); margin-bottom: .8rem; letter-spacing: .02em; }
.footer-col a { display: block; color: #D7C4D4; padding: .25rem 0; transition: color .16s ease; }
.footer-col a:hover { color: var(--pink); }
.footer-address { color: #C9B6C6; }
.footer-contact p { color: #C9B6C6; }
.footer-contact a { color: #D7C4D4; }
.footer-contact a:hover { color: var(--pink); }
.footer-hours { margin-top: .9rem; }
.footer-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #C9B6C6; font-size: .95rem; }
.footer-hours__row span:last-child { color: #E9D7E4; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; padding-block: 1.1rem; font-size: .88rem; color: #B59FB2; }
.footer-bottom__book { color: var(--pink); font-weight: 700; text-decoration: none; }
.footer-bottom__book:hover { color: #fff; }


/* ==========================================================================
   19. INTERACTIVE OVERLAYS
   ========================================================================== */
/* Sticky mobile booking bar — hidden while the hero's own booking CTA is on
   screen (no triple-CTA in the first viewport), shown by JS once the hero has
   been scrolled past, and hidden again over the footer. Hidden state also
   drops visibility so the links never catch keyboard focus while off-screen. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: flex; gap: .6rem; padding: .5rem .9rem calc(.5rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--line); box-shadow: 0 -8px 24px rgba(43,29,51,.1);
  transform: translateY(130%); visibility: hidden;
  transition: transform .3s ease, visibility .3s ease;
}
.sticky-cta.is-visible { transform: none; visibility: visible; }
.sticky-cta__primary { flex: 1; }
.sticky-cta__call { flex: none; }
/* V4.6.3: trimmed from 76px to 63px. Buttons stay at 46px, comfortably above
   the 44px minimum tap target. */
.sticky-cta .btn { padding-block: .5em; min-height: 46px; }

/* The space the page reserves at the bottom for the bar. Declared once, as a
   variable, so it can be zeroed wherever the bar is not shown — that is what
   guarantees no empty strip is ever left behind. 64px covers the 63px bar;
   the safe area is added separately below because the bar carries it too. */
html { --sticky-cta-space: 0px; }
@media (max-width: 920px) { html { --sticky-cta-space: 64px; } }
.footer-bottom__inner { padding-bottom: calc(1.1rem + var(--sticky-cta-space) + env(safe-area-inset-bottom)); }

/* --- Booking modal (BokaDirekt loaded in-page, with fallback) ---
   V4.6.1: the booking surface is generous wherever there is room for it.
   BokaDirekt is a real third-party app — it needs desktop width to lay itself
   out, and its cookie consent dialog needs somewhere to sit. Constraining the
   frame to ~560px forced their compact layout and left the consent dialog
   filling most of the booking area.

   One rule now covers desktop and tablet:
       width  = min(1180px, available width)
       height = min(900px,  available height)
   …so a wide screen gets a capped, centred 1180px panel and a tablet gets
   almost the full width with a controlled gap. "Available" is this container's
   padding box, which means the dialog can never exceed the viewport or touch
   its edges — no calc(), no magic numbers, and nothing to go stale on resize.

   Phones (<=700px) keep the V4.6 full-screen treatment unchanged. */
.booking-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  height: 100vh; height: 100dvh;      /* dvh: never hides behind mobile browser UI */
  display: grid; place-items: center;
  padding: clamp(16px, 2.2vw, 24px);
}
.booking-modal[hidden] { display: none; }
.booking-modal__overlay {
  position: absolute; inset: 0; opacity: 0; transition: opacity .24s ease;
  background: radial-gradient(120% 100% at 50% 0%, rgba(248,76,168,.18) 0%, rgba(58,30,58,0) 55%), rgba(42,22,38,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.booking-modal.is-open .booking-modal__overlay { opacity: 1; }
.booking-modal__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(1180px, 100%);
  height: min(900px, 100%);
  max-width: 100%; max-height: 100%;
  background: var(--cream); border-radius: clamp(16px, 2vw, 26px); overflow: hidden;
  box-shadow: 0 40px 100px rgba(42,22,38,.4), 0 0 0 1px rgba(255,255,255,.55), 0 0 52px rgba(248,76,168,.13), 0 0 90px rgba(199,182,242,.1);
  transform: translateY(16px) scale(.985); opacity: 0;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .26s ease;
}
.booking-modal.is-open .booking-modal__dialog { transform: none; opacity: 1; }
.booking-modal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.8rem, 2vw, 1.1rem) clamp(1rem, 2.4vw, 1.5rem);
  background: linear-gradient(100deg, var(--pink-soft-2) 0%, var(--lilac-soft) 62%, var(--mint-soft) 130%);
  border-bottom: 1px solid rgba(42,22,38,.07);
}
.booking-modal__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: var(--ink); line-height: 1.12; }
.booking-modal__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(248,76,168,.18); flex: none; }
.booking-modal__sub { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.booking-modal__tools { display: flex; align-items: center; gap: .55rem; flex: none; }
.booking-modal__newtab { font-weight: 600; font-size: .82rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; padding: .42rem .7rem; border-radius: var(--r-pill); transition: background-color .16s ease, color .16s ease; }
.booking-modal__newtab:hover { color: var(--pink-ink); background: rgba(248,76,168,.1); }
.booking-modal__newtab:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 2px; }
.booking-modal__close { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.88); box-shadow: 0 4px 12px rgba(42,22,38,.12), inset 0 0 0 1px rgba(42,22,38,.08); transition: background-color .16s ease, color .16s ease, transform .18s ease; }
.booking-modal__close svg { width: 20px; height: 20px; }
.booking-modal__close:hover { background: var(--pink); color: #fff; transform: rotate(90deg); }
.booking-modal__close:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 2px; }
.booking-modal__body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
/* The frame owns the full body box: no horizontal scrollbar, no cropped
   booking navigation, no empty white gutters around the booking. */
.booking-modal__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--cream); }
.booking-modal__status { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 1.5rem; background: var(--cream); color: var(--ink-soft); }
.booking-modal__status[hidden] { display: none; }
.booking-modal__spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(248,76,168,.22); border-top-color: var(--pink); animation: bookingSpin .8s linear infinite; }
@keyframes bookingSpin { to { transform: rotate(360deg); } }
.booking-modal__fallback { z-index: 3; gap: .45rem; }
.booking-modal__fallback-icon { font-size: 1.7rem; color: var(--pink); line-height: 1; }
.booking-modal__fallback-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin: 0; }
.booking-modal__fallback-text { max-width: 40ch; color: var(--ink-soft); margin: 0 0 .7rem; line-height: 1.5; }
.booking-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem clamp(1rem, 2.4vw, 1.5rem); background: #fff; border-top: 1px solid rgba(42,22,38,.07); font-size: .85rem; }
.booking-modal__foot-note { color: var(--ink-soft); font-weight: 600; }
.booking-modal__foot-link { color: var(--ink-soft); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .16s ease; }
.booking-modal__foot-link:hover { color: var(--pink-ink); text-decoration: underline; }
.booking-modal__foot-link:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 2px; }
/* Shared scroll lock for every overlay (menu, lightbox, booking).
   position:fixed keeps iOS from scrolling the page behind the modal; the JS
   restores the exact scroll position on close. */
html.scroll-locked, html.scroll-locked body { overflow: hidden; overscroll-behavior: contain; }
html.scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; }

/* The fixed booking bar must never sit on top of the modal's own controls. */
html.booking-locked .sticky-cta { display: none; }

/* --- Tablet / small desktop: near-full width, chrome stays compact --- */
@media (max-width: 1024px) {
  .booking-modal { padding: clamp(12px, 2vw, 18px); }
  .booking-modal__bar { padding: .75rem 1rem; }
  .booking-modal__title { font-size: 1.1rem; }
}

/* --- Phone: true full screen --- */
@media (max-width: 700px) {
  .booking-modal { padding: 0; place-items: stretch; }
  .booking-modal__dialog {
    width: 100%; max-width: none; border-radius: 0;
    height: 100vh; height: 100dvh;           /* dvh: no jump when the URL bar hides */
    max-height: 100vh; max-height: 100dvh;
  }
  .booking-modal__bar { padding-top: max(.8rem, env(safe-area-inset-top)); }
  .booking-modal__sub { display: none; }
  .booking-modal__newtab { font-size: .78rem; padding: .38rem .55rem; }
  .booking-modal__foot {
    justify-content: center;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  }
  .booking-modal__foot-note { display: none; }
  .booking-modal__foot-link { padding: .35rem .2rem; }   /* comfortable tap target */
}
/* Very small phones: keep the title from crowding the close button. */
@media (max-width: 380px) {
  .booking-modal__newtab { display: none; }   /* the footer link stays visible */
}

/* --- Custom cursor (desktop fine-pointer only; JS opt-in) --- */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor .btn,
  html.has-custom-cursor [role="button"], html.has-custom-cursor .gallery-item,
  html.has-custom-cursor summary, html.has-custom-cursor label { cursor: none; }
  html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select { cursor: auto; }

  .custom-cursor-dot, .custom-cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor);
    border-radius: 50%; opacity: 0; will-change: transform; transition: opacity .25s ease;
  }
  .has-custom-cursor .custom-cursor-dot, .has-custom-cursor .custom-cursor-ring { opacity: 1; }
  .custom-cursor-hidden .custom-cursor-dot, .custom-cursor-hidden .custom-cursor-ring { opacity: 0 !important; }
  html.booking-locked.has-custom-cursor, html.booking-locked.has-custom-cursor * { cursor: auto !important; }
  html.booking-locked .custom-cursor-dot, html.booking-locked .custom-cursor-ring { opacity: 0 !important; }

  .custom-cursor-dot {
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--pink);
    box-shadow: 0 0 7px rgba(248,76,168,.5), 0 0 14px rgba(248,76,168,.26);
    transition: opacity .25s ease, width .18s ease, height .18s ease, margin .18s ease, background-color .18s ease, box-shadow .18s ease, transform .05s linear;
  }
  .custom-cursor-ring {
    width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.4px solid rgba(199,182,242,.5);
    box-shadow: 0 0 9px rgba(248,76,168,.14), 0 0 18px rgba(199,182,242,.12);
    transition: opacity .25s ease, width .22s ease, height .22s ease, margin .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .16s ease-out;
  }
  .custom-cursor-dot.is-hover { background: var(--pink-ink); box-shadow: 0 0 9px rgba(248,76,168,.6), 0 0 20px rgba(248,76,168,.34); }
  .custom-cursor-ring.is-hover { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-color: rgba(248,76,168,.55); background: rgba(248,76,168,.045); box-shadow: 0 0 16px rgba(248,76,168,.24), 0 0 30px rgba(199,182,242,.2); }
  .custom-cursor-ring.is-booking { border-color: rgba(248,76,168,.8); box-shadow: 0 0 18px rgba(248,76,168,.4), 0 0 34px rgba(199,182,242,.24); }
}


/* ==========================================================================
   20. RESPONSIVE — shared breakpoints
   --------------------------------------------------------------------------
   Component-specific responsive rules live with their component above
   (hero, neon, treatments, lightbox). These are the cross-cutting grids.
   ========================================================================== */
@media (min-width: 560px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .dogs-media { max-width: 460px; }
}
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) {
  .universe__tracks { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (min-width: 760px) {
  .svc-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid:not(.info-grid--stack) { grid-template-columns: repeat(2, 1fr); }
  .masonry, .inspo-wall { columns: 3; }
  .split { grid-template-columns: 1.05fr .95fr; }
  .split--reverse .split__media { order: 2; }
  .treat-group { grid-template-columns: .85fr 1.15fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
  .treat-group--reverse .treat-media { order: 2; }
  .treat-media { max-width: 440px; justify-self: center; width: 100%; }
}
@media (min-width: 880px) {
  .studio-v2__grid { grid-template-columns: 1.05fr .95fr; }
}
@media (min-width: 921px) {
  /* Two items in the header row now (brand + nav). auto margins keep the nav
     visually where it sat when the CTA was still there, instead of letting
     space-between fling it against the right edge. */
  .nav-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); margin-inline: auto; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
  .sticky-cta { display: none; }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .masonry, .inspo-wall { columns: 4; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; grid-template-areas: "brand nav treat contact"; }
}
@media (min-width: 1000px) {
  .svc-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* Footer: tablet two-column + contact box below desktop */
@media (min-width: 640px) and (max-width: 920px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr; grid-template-areas: "brand contact" "nav treat"; column-gap: 2.4rem; }
}
@media (max-width: 920px) {
  .footer-contact { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; }
  .footer-contact .footer-col__title { margin-bottom: .6rem; }
  .footer-col a { padding: .34rem 0; }
  .footer-tagline { font-size: .98rem; }
  .footer-bottom__inner { gap: .35rem 1.2rem; row-gap: .55rem; }
}

/* Treatments: calmer image frames, mobile rhythm */
.treat-media .framed::before { inset: clamp(-16px, -1.6vw, -10px); transform: rotate(-2deg); box-shadow: var(--shadow-sm); }
.treat-group--reverse .treat-media .framed::before { transform: rotate(2deg); }
.treat-media .framed--feature::before { inset: clamp(-16px, -1.6vw, -10px); box-shadow: var(--shadow-sm); }
.treat-media .framed > img, .treat-media .framed--feature > img { border-width: 4px; box-shadow: var(--shadow-lg); }
.treat-media--soft .framed::before { inset: -8px; transform: rotate(-1.5deg); }
@media (max-width: 767px) {
  .treat-group { gap: 1.1rem; }
  .treat-group + .treat-group { margin-top: clamp(2.2rem, 8vw, 3rem); }
  .treat-media { max-width: min(420px, 88vw); margin-inline: auto; width: 100%; }
  .treat-media img { aspect-ratio: 1 / 1; max-height: min(430px, 58vh); }
  .treat-media--soft { max-width: min(280px, 74vw); }
  .treat-media--soft img { aspect-ratio: 1 / 1; max-height: 300px; }
  .treat-media .framed::before, .treat-media .framed--feature::before { inset: -8px; transform: none; }
  .treat-group__head h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .treat-list { margin-top: .9rem; gap: .6rem; }
  .treat-row { padding: .85rem .95rem; }
}
@media (max-width: 559px) {
  .masonry, .inspo-wall { column-gap: .7rem; }
  .masonry .gallery-item, .inspo-wall > * { margin-bottom: .7rem; }
  .gallery-badge { font-size: .7rem; padding: .2rem .5rem; }
}


/* ==========================================================================
   21. UTILITIES + REDUCED MOTION
   ========================================================================== */
/* Decorative inline doodles/stickers (placement via inline style on the element) */
.pn-doodle { position: absolute; line-height: 0; pointer-events: none; z-index: 3; color: var(--pink); }
.pn-doodle svg { width: 100%; height: auto; display: block; }
.d-pink { color: var(--pink); } .d-lilac { color: var(--lilac); } .d-white { color: #fff; }
.d-pinkink { color: var(--pink-ink); } .d-mintdeep { color: var(--mint-deep); }

@media (max-width: 600px) {
  .hide-sm { display: none; }
  .pn-doodle { transform: scale(.7); }
  .deco-blob { opacity: .5; }
  .quote-tile { min-height: 120px; }
  .quote-tile p { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .gallery-item:hover img { transform: none; }
  .hero-bleed__content > * { animation: none !important; }
  .booking-modal__overlay, .booking-modal__dialog { transition: none; }
  .booking-modal__spinner { animation-duration: 1.6s; }
  .booking-modal__close:hover { transform: none; }
}


/* ==========================================================================
   22. V4.6 — BREADCRUMBS, REVIEW AUTHORITY, ARTICLE PAGES, 404
   --------------------------------------------------------------------------
   New components only. Nothing here restyles an approved V4.5 surface; each
   block reuses the existing tokens (cream/cerise/mint/lavender/plum), the
   shared radius scale and the same soft plum-tinted shadow language.
   ========================================================================== */

/* --- Breadcrumbs (deeper pages) --- */
.breadcrumbs { padding-top: clamp(1.1rem, 2.6vw, 1.6rem); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .86rem; font-weight: 600; color: var(--muted);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumbs li + li::before {
  content: ""; width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--pink); opacity: .55; flex: none;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; border-bottom: 1.5px solid transparent; }
.breadcrumbs a:hover { color: var(--pink-ink); border-bottom-color: currentColor; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* --- Review authority band --------------------------------------------
   Manually maintained figures (config/site.php). No structured data is
   emitted for these — self-serving review stars are deliberately avoided. */
.rating-band {
  display: grid; gap: clamp(1.1rem, 3vw, 2rem); align-items: center;
  background: var(--white); border-radius: var(--r-xl);
  padding: clamp(1.4rem, 3.6vw, 2.2rem) clamp(1.3rem, 3.4vw, 2.4rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px rgba(43,29,51,.12);
  border: 1px solid rgba(248,76,168,.14);
  margin-bottom: clamp(1.6rem, 3.6vw, 2.4rem);
}
.rating-band__score { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 1.3rem); }
.rating-band__num {
  font-family: var(--font-display); font-weight: 700; line-height: .9; color: var(--pink-ink);
  font-size: clamp(3.4rem, 9vw, 4.6rem); letter-spacing: -.02em;
}
.rating-band__stars { display: block; color: var(--pink); font-size: 1.15rem; letter-spacing: 2px; line-height: 1;
  text-shadow: 0 0 7px rgba(248,76,168,.38), 0 0 15px rgba(248,76,168,.2); }
.rating-band__of { display: block; margin-top: .35rem; font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.35; }
.rating-band__src { display: block; margin-top: .2rem; font-size: .86rem; color: var(--muted); font-weight: 600; }
.rating-band__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.rating-band__logo {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep);
}
.rating-band__logo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); flex: none; }
@media (min-width: 760px) {
  .rating-band { grid-template-columns: auto 1fr auto; }
}

/* --- Long-form article body (treatment pages, info, careers) --- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin-top: clamp(2rem, 4vw, 2.8rem); }
.prose h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.12rem; margin-top: 1.7rem; letter-spacing: 0; }
.prose p, .prose li { color: var(--ink); opacity: .92; }
.prose ul { display: grid; gap: .55rem; padding: 0; }
.prose ul li { display: flex; align-items: flex-start; gap: .65rem; }
.prose ul li::before {
  content: "✦"; flex: none; color: var(--pink); font-size: .85rem; line-height: 1.6;
}
.prose a { color: var(--pink-ink); font-weight: 600; border-bottom: 1.5px solid rgba(214,46,134,.35); }
.prose a:hover { border-bottom-color: currentColor; }
.prose .note-soft { margin-top: 1.4rem; }

/* Two-column article layout: body + sticky booking rail */
.article-grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .article-rail { position: sticky; top: 104px; }
}

/* Booking rail card */
.rail-card {
  background: var(--white); border-radius: var(--r-card); padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-card); border: 1px solid rgba(43,29,51,.06);
}
.rail-card + .rail-card { margin-top: 1rem; }
.rail-card h2, .rail-card h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.rail-card p { color: var(--muted); font-size: .95rem; }
.rail-card .btn { margin-top: .9rem; }
.rail-card__list { display: grid; gap: .1rem; margin-top: .5rem; }
.rail-card__list a { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px dashed var(--line); color: var(--ink); font-weight: 600; font-size: .96rem; }
.rail-card__list a:last-child { border-bottom: 0; }
.rail-card__list a::after { content: "→"; color: var(--pink); flex: none; transition: transform .16s ease; }
.rail-card__list a:hover { color: var(--pink-ink); }
.rail-card__list a:hover::after { transform: translateX(3px); }

/* Fact strip — short, verifiable facts under an article intro */
.fact-strip { display: grid; gap: .8rem; margin: clamp(1.4rem, 3vw, 2rem) 0; }
@media (min-width: 620px) { .fact-strip { grid-template-columns: repeat(3, 1fr); } }
.fact-strip__item {
  background: var(--white); border-radius: var(--r-md); padding: .95rem 1.1rem;
  box-shadow: var(--shadow-sm); border-left: 4px solid var(--mint);
}
.fact-strip__item:nth-child(2) { border-left-color: var(--pink); }
.fact-strip__item:nth-child(3) { border-left-color: var(--lilac); }
.fact-strip__k { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.fact-strip__v { display: block; font-weight: 700; color: var(--ink); line-height: 1.35; }

/* Related treatments */
.related-grid { display: grid; gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
@media (min-width: 620px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
  display: block; background: var(--white); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .16s ease, box-shadow .16s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.related-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.related-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.related-card__body { padding: .95rem 1.1rem 1.2rem; }
.related-card__body h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.related-card__body p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.related-card__go { display: inline-block; margin-top: .6rem; font-weight: 800; font-size: .82rem; color: var(--pink-ink); }

/* --- 404 --- */
.error-page { min-height: clamp(420px, 62vh, 640px); display: grid; place-items: center; text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem); }
.error-page__code {
  font-family: var(--font-hand); font-size: clamp(4.5rem, 16vw, 8rem); line-height: .9; color: var(--pink);
  text-shadow: 0 0 12px rgba(248,76,168,.28);
}
.error-page h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); margin-top: .4rem; }
.error-page .lead { margin-inline: auto; margin-top: .9rem; }
.error-page__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }

/* --- Small V4.6 additions to existing blocks --- */
.mobile-nav__link--sub { font-size: 1.15rem; font-family: var(--font-ui); font-weight: 600; color: var(--muted); }
.footer-hours__note { margin-top: .6rem; font-size: .82rem; color: #B59FB2; }
.footer-social-book svg { width: 19px; height: 19px; }
.section--tight { --section-y: clamp(2.2rem, 4vw, 3.2rem); }
/* The tile heading links to its treatment page. Deliberately a plain link and
   not a full-card overlay: an overlay would swallow text selection and fight
   the corner sticker for z-index. */
.svc-tile__link { color: inherit; text-decoration: none; }
.svc-tile__link:hover, .svc-tile__link:focus-visible { color: var(--pink-ink); text-decoration: underline; text-underline-offset: .18em; }
.rail-card .btn + .btn { margin-top: .6rem; }
.rail-card--center { max-width: 480px; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; text-align: left; }
.rail-card--center h2 { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; }
.info-group__title { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: clamp(2rem, 4.4vw, 3rem) 0 1rem; }
.info-group__title:first-of-type { margin-top: clamp(1.6rem, 3.4vw, 2.2rem); }

/* Treatment overview → deep pages */
.treat-links { display: grid; gap: .8rem; margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 620px) { .treat-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .treat-links { grid-template-columns: repeat(4, 1fr); } }
.treat-link {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--white); border-radius: var(--r-md); padding: .9rem 1.1rem;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(43,29,51,.06);
  font-weight: 700; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.treat-link::after { content: "→"; color: var(--pink); flex: none; transition: transform .16s ease; }
.treat-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); color: var(--pink-ink); }
.treat-link:hover::after { transform: translateX(3px); }
.treat-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }


/* ==========================================================================
   20. LANDSCAPE PHONES  (V4.6.3)
   --------------------------------------------------------------------------
   A phone held sideways is the one case where the viewport is wide but the
   *usable height* is tiny — 375–430 px, of which a fixed header and a fixed
   booking bar would eat a third. Width alone cannot detect it: a landscape
   iPhone 15 Pro Max reports 932 px and would otherwise be served the full
   desktop navigation, while a 1024 × 768 tablet is genuinely a big screen.

   The condition is therefore orientation + limited height, with an upper
   width bound so a short desktop window is never mistaken for a phone:

       orientation: landscape   — held sideways
       max-height:  520px       — no phone in portrait is this short, and no
                                  tablet in landscape is (768 px and up)
       max-width:  1024px       — leaves real tablets and desktops alone

   No user-agent sniffing, no device lists, no JS. Everything below is a
   normal cascade override of rules that already exist.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {

  /* Wide-but-short: keep the hamburger, not the desktop row. Above 921 px the
     desktop block would otherwise win, so these three undo it. */
  .nav-desktop { display: none; }
  .nav-toggle  { display: inline-grid; width: 44px; height: 44px; }
  .mobile-nav  { display: block; }

  /* Header trimmed to ~55 px: less padding and a slightly smaller wordmark.
     The hamburger stays a 44 px square — the minimum comfortable tap target. */
  .site-header { padding-block: .34rem; }
  .wordmark__script { font-size: 1.78rem; }
  .wordmark__sub    { font-size: .72rem; letter-spacing: .22em; }
  .wordmark__dot    { width: .42rem; height: .42rem; }

  /* The fixed booking bar is gone here — it is simply too much furniture for a
     430 px-tall viewport. Booking stays reachable from the hero, the content
     CTAs, the closing CTA and the menu. `display: none` (not just a transform)
     means the links cannot take keyboard focus either. */
  .sticky-cta { display: none; }

  /* …and the space the page reserved for it is released, so no empty strip is
     left behind at the bottom of the footer. */
  html { --sticky-cta-space: 0px; }

  /* The slide-in menu has to fit inside ~430 px of height. Tighter padding and
     spacing keep the five links, the booking button and the contact block on
     screen; it still scrolls if a future menu grows past that. */
  .mobile-nav__panel { padding: .8rem 1.2rem 1.1rem; gap: .6rem; }
  .mobile-nav__close { width: 38px; height: 38px; font-size: 1.5rem; }
  .mobile-nav__links { gap: .1rem; }
  .mobile-nav__link  { font-size: 1.2rem; padding-block: .3rem; }
  .mobile-nav__link--sub { font-size: 1rem; }
  .mobile-nav__meta  { gap: .2rem .9rem; font-size: .86rem; padding-top: .6rem; }

  /* The booking modal gets the same treatment a portrait phone already gets:
     full-screen. Its V4.6.1 desktop geometry — min(1180px, 100%) by
     min(900px, 100%) — is untouched and simply never applies here, because
     this block cannot match a tablet or a desktop.

     The reason is height. On a 390 px-tall viewport the centred-with-a-margin
     treatment, a title bar sized for tall screens and a two-item footer took
     roughly a third of the screen before the booking got any. Full-bleed plus
     compact chrome hands about 50 px back, so BokaDirekt gets ~75 % of the
     height instead of ~61 %. The close button stays 42 px, the footer link
     keeps its tap padding, and the subtitle is hidden exactly as it already is
     on phones (it is still read out — aria-describedby reaches hidden text).
     Horizontal padding respects the side safe areas, which is where a notch
     sits when the phone is turned. */
  .booking-modal { padding: 0; place-items: stretch; }
  .booking-modal__dialog {
    width: 100%; max-width: none; border-radius: 0;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
  }
  .booking-modal__bar {
    padding: .38rem max(.9rem, env(safe-area-inset-right)) .38rem max(.9rem, env(safe-area-inset-left));
  }
  .booking-modal__title { font-size: 1.02rem; }
  .booking-modal__sub { display: none; }
  .booking-modal__foot {
    justify-content: center; font-size: .8rem;
    padding: .32rem max(.9rem, env(safe-area-inset-right)) .32rem max(.9rem, env(safe-area-inset-left));
  }
  .booking-modal__foot-note { display: none; }
}