/* =========================================================================
   Maria Psychologist — style.css
   Calm & warm design system (sage-green + warm beige), light + dark themes.
   No font-awesome: all icons are inline SVG in the markup.
   ========================================================================= */

/* ---------- Fonts (local Montserrat) ---------- */
/* woff2 subsets — the browser downloads only the ranges the page actually uses */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-ext-400.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-ext-500.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-ext-700.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-cyrillic-ext-600.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Theme tokens ---------- */
:root,
[data-theme="morning"] {
  --bg:        #f4efe6;
  --surface:   #fffdf9;
  --surface-2: #ebe3d5;
  --ink:       #2f3428;
  --muted:     #5f6a4e;
  --line:      #e0d6c2;
  --sage:      #5c6a45;
  --sage-deep: #414a32;
  --sand:      #bd8f63;
  --sand-deep: #9c6f43;
  --shadow:    0 18px 50px -24px rgba(79, 90, 65, .35);
  --shadow-sm: 0 8px 24px -14px rgba(79, 90, 65, .28);
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans); /* headings share the sans stack */
  --radius:    22px;
  --radius-sm: 14px;
  --on-sage:   #fff;   /* text on a --sage / --sage-deep fill */
  --on-sand:   #fff;   /* text on a --sand-deep fill */
}

[data-theme="night"] {
  --bg:        #1c201b;
  --surface:   #262b23;
  --surface-2: #2f362c;
  --ink:       #eceadf;
  --muted:     #a8ae9c;
  --line:      #3a4133;
  --sage:      #9fb083;
  --sage-deep: #b8c79e;
  --sand:      #d9b58d;
  --sand-deep: #e0c19c;
  --shadow:    0 22px 60px -26px rgba(0, 0, 0, .6);
  --shadow-sm: 0 10px 28px -16px rgba(0, 0, 0, .55);
  /* Night flips the brand colours light, so white text on them drops to ~2.3:1.
     These two tokens keep every filled control above 4.5:1 in both themes. */
  --on-sage:   #1c201b;
  --on-sand:   #1c201b;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* overflow-x: clip (not hidden) — prevents sideways scroll WITHOUT breaking position:sticky */
html, body { max-width: 100%; overflow-x: clip; }
/* Content copy protection (form fields remain selectable) */
body.no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
body.no-copy input, body.no-copy textarea, body.no-copy select, body.no-copy [contenteditable] { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
/* Reserve the scrollbar gutter so opening a modal/offcanvas doesn't shift the page */
html { scrollbar-gutter: stable; }
/* Bootstrap adds body padding when a modal opens — neutralize the horizontal jump */
body.modal-open { padding-right: 0 !important; overflow: hidden; }

body {
  margin: 0;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}

h1, h2, h3, h4, h5, h6, .h-disp {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.section-header { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: .2em; }
.section-header span { color: var(--sage); }
.sub-header { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin: 0; }

p { margin: 0 0 1rem; }
a { color: var(--sage-deep); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--sand-deep); }
img, picture, svg { max-width: 100%; }
ul { padding-left: 1.15rem; margin: 0; }
ul li { margin-bottom: .5rem; }

.container { max-width: 1180px; }
section { padding: clamp(2.1rem, 4.6vw, 3.6rem) 0; }
.sec { position: relative; }
.text-muted { color: var(--muted) !important; }
.mono { font-variant-numeric: tabular-nums; }
.u-hide { display: none !important; }
.fz-78 { font-size: .78rem; } .fz-90 { font-size: .9rem; } .fz-95 { font-size: .95rem; }
.mw-46 { max-width: 46ch; }

/* Row helpers carried from source markup */
.row-second-layer > [class*="col-"] { margin-bottom: 0; }
.row-pagging > * + * { margin-top: .35rem; }

/* ---------- Icons (external SVG via <img class="ic-img">) ---------- */
.ic-img { display: inline-block; vertical-align: middle; flex: none; }
/* dark by default (light theme); lightened in night theme */
[data-theme="night"] .ic-img:not(.ic-w):not(.ic-d) { filter: brightness(0) invert(0.82); }
/* white icons on coloured backgrounds (both themes) */
.ic-w { filter: brightness(0) invert(1); }
/* forced dark (icons on light-coloured buttons, e.g. sand) */
.ic-d { filter: none; }
/* in-button arrows: colour follows the button context */
.modal-ask-a-question .ic-img, .button-working-process .ic-img, .service-01 .ic-img { filter: brightness(0) invert(1) !important; }
.service-02 .ic-img { filter: none !important; }
/* legacy inline-svg support (kept for safety) */
.ic { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn-olive, .btn-sand {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .8rem 1.6rem; font-weight: 600; font-size: 1rem;
  transition: transform .25s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
  text-align: center;
}
.btn-olive { background: var(--sage); color: var(--on-sage); box-shadow: var(--shadow-sm); }
.btn-olive:hover { background: var(--sage-deep); color: var(--on-sage); transform: translateY(-2px); }
.btn-sand { background: var(--sand); color: #3a2f22; }
.btn-sand:hover { background: var(--sand-deep); color: var(--on-sand); transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: .7rem 1.35rem; font-weight: 600; color: var(--ink); background: transparent;
  transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: var(--sage); color: var(--sage-deep); }

/* ---------- Header / nav ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; }
.nav-wrap.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.navbar { padding-top: .55rem; padding-bottom: .55rem; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 42px; width: auto; }
.logo-night { display: none; }
[data-theme="night"] .logo-morning { display: none; }
[data-theme="night"] .logo-night { display: inline-block; }

.navlink { position: relative; color: var(--ink); font-weight: 500; font-size: 14px; padding: .35rem .1rem; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199px) { .navbar-nav.nav-menu { gap: .9rem !important; } .navlink { font-size: 13.5px; } }
.navlink::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--sage); border-radius: 2px; transition: width .25s ease; }
.navlink:hover, .navlink.active { color: var(--sage-deep); }
.navlink.active::after, .navlink:hover::after { width: 100%; }

.theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.theme-toggle:hover { border-color: var(--sage); transform: rotate(-12deg); }
.theme-toggle .ic-moon { display: none; }
[data-theme="night"] .theme-toggle .ic-sun { display: none; }
[data-theme="night"] .theme-toggle .ic-moon { display: inline-block; }

.navbar-toggler { padding: .35rem; border-radius: 12px; color: var(--ink); }
.navbar-toggler:focus { box-shadow: none; }

/* Language switch */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.lang-item { padding: .28rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.lang-item.active { background: var(--surface); color: var(--sage-deep); box-shadow: var(--shadow-sm); }

/* ---------- Hero / intro ---------- */
#introduction { padding-top: clamp(2.5rem, 5vw, 4rem); }
.hero-badge { display: inline-flex; align-items: center; gap: .45rem; background: var(--surface-2); color: var(--sage-deep); font-size: .82rem; font-weight: 600; padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1rem; }
#introduction h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--sage-deep); margin-top: .8rem; }
.profile-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 3/4; background: var(--surface-2); }
.modal-ask-a-question, .service, .button-working-process {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--sage); color: var(--on-sage); border-radius: 999px;
  padding: .8rem 1.5rem; font-weight: 600; margin-top: .8rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.modal-ask-a-question:hover, .button-working-process:hover { background: var(--sage-deep); color: var(--on-sage); transform: translateY(-2px); }
/* Buttons inside content blocks span the full width */
.block-process .button-working-process { display: flex; width: 100%; margin-top: 1.2rem; justify-content: center; }
/* Hero CTA full width (item 11) */
#introduction .modal-ask-a-question { display: flex; width: 100%; justify-content: center; }
/* Worries CTAs centered (item 12) */
#worries .card-cta .d-flex { justify-content: center; }
#worries .card-cta .btn-olive, #worries .card-cta .btn-ghost { flex: 1 1 auto; justify-content: center; text-align: center; }
@media (max-width: 575.98px) { #worries .card-cta .btn-olive, #worries .card-cta .btn-ghost { flex: 1 1 100%; width: 100%; } }

/* ---------- Marquee (running line) ---------- */
#marguee { padding: 0; }
.marquee { overflow: hidden; background: var(--sage-deep); color: var(--on-sage); padding: .95rem 0; width: 100%; }
.marquee-track { display: inline-flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-size: 1.05rem; position: relative; padding: 0 1.5rem 0 3rem; flex: none; }
.marquee-track span::before { content: "✦"; position: absolute; left: 1rem; color: var(--sand); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Hero typeit line ---------- */
.type-line { font-family: var(--font-display); font-weight: 600; color: var(--sage); font-size: clamp(1.2rem, 2.6vw, 1.7rem); min-height: 1.3em; margin-bottom: .6rem; }
.type-line .ti-cursor { color: var(--sand); }

/* ---------- Cards / generic surfaces ---------- */
.card-soft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.4rem, 3vw, 2rem); }

/* ---------- Parallax media (Rellax on the img inside an overflow frame) ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface-2); }
.media.portrait { aspect-ratio: 3/4; }
.media.square { aspect-ratio: 1/1; border-radius: var(--radius-sm); }
.media picture { display: block; }
/* The image is taller than the frame so it can drift vertically without gaps.
   Rellax with speed 1.6 and center:true travels at most 1.6*100*0.5 = 80px each
   way, so the slack is an absolute 88px — a percentage would shrink with the
   frame and let the background show through on short frames. */
.media .parallax-photo { position: absolute; top: -88px; left: 0; width: 100%; height: calc(100% + 176px); object-fit: cover; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .media .parallax-photo { top: 0; height: 100%; } }

/* ---------- Experience timeline ---------- */
.date-experience { position: relative; padding-left: 4.3rem; margin-bottom: 1rem; }
.date-experience span { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; color: var(--sage); background: var(--surface-2); border-radius: 999px; padding: .1rem .6rem; font-size: .9rem; }

/* ---------- Achievements ---------- */
#achivments .block-achivments { text-align: center; padding: 1.4rem 1rem; }
.border-achivments { border-right: 1px solid var(--line); }
@media (max-width: 767px) { .border-achivments { border-right: 0; border-bottom: 1px solid var(--line); } }
.scroll-size { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--sage); margin: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.block-achivments p:last-child { color: var(--muted); margin: .4rem 0 0; }

/* ---------- Working process ---------- */
.block-process { position: relative; background: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 100%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: 1.6rem; overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.block-process:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.block-process::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--sage), var(--sand)); }
.problem-img { width: 100%; border-radius: var(--radius-sm); object-fit: cover; aspect-ratio: 1/1; background: var(--surface-2); }
.block-process .media.square { border-radius: var(--radius-sm); }
.block-process .sub-header { display: inline-flex; align-items: center; gap: .5rem; background: color-mix(in srgb, var(--sage) 12%, transparent); color: var(--sage-deep); padding: .4rem .9rem; border-radius: 999px; font-size: 1rem; }
/* Check-list instead of bullets */
.block-process ul { list-style: none; padding-left: 0; margin: 0; }
.block-process ul li { position: relative; padding-left: 2rem; margin-bottom: .7rem; color: var(--ink); }
.block-process ul li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--sage) 16%, transparent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 12.5 10 18 20 6'/%3e%3c/svg%3e") center / .78rem no-repeat; }
[data-theme="night"] .block-process ul li::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb083' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 12.5 10 18 20 6'/%3e%3c/svg%3e"); }

/* ---------- Forbidden ---------- */
.block-forbidden { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.4rem 1.4rem 1.4rem 3.4rem; height: 100%; box-shadow: var(--shadow-sm); }
.block-forbidden .no-mark { position: absolute; left: 1.2rem; top: 1.4rem; width: 26px; height: 26px; color: var(--sand-deep); }
.block-forbidden .sub-header { margin-bottom: .3rem; }
.block-forbidden p:last-child { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- Principles (values) ---------- */
#principles { position: relative; }
.principle-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.9rem 1.5rem 1.6rem; height: 100%; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.principle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.principle-ico { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: color-mix(in srgb, var(--sage) 12%, transparent); display: flex; align-items: center; justify-content: center; }
.principle-ico .ic-img { width: 30px; height: 30px; }
.principle-card h3 { font-size: 1.12rem; margin: .2rem 0 .5rem; }
.principle-card p { color: var(--muted); margin: 0; font-size: .95rem; }
/* Full-page decorative parallax layer (Rellax) — sits behind all content */
.parallax-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.parallax-decor img { position: absolute; opacity: .5; max-width: none; will-change: transform; }
@media (max-width: 767.98px) { .parallax-decor { display: none; } }

/* ---------- How it works (steps) ---------- */
.step-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem 1.5rem 1.6rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-num { position: absolute; top: -22px; left: 1.5rem; width: 46px; height: 46px; border-radius: 50%; background: var(--sage); color: var(--on-sage); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; box-shadow: var(--shadow-sm); }
.step-num span, .step-num { text-align: center; }
.step-card h3 { font-size: 1.15rem; margin: .6rem 0 .4rem; }
.step-card p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------- Pricing ---------- */
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem 1.6rem; height: 100%; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.featured { border-color: var(--sage); box-shadow: var(--shadow); }
.price-card.featured::before { content: attr(data-badge); position: absolute; top: -13px; right: 1.4rem; background: var(--sand); color: #3a2f22; font-size: .74rem; font-weight: 700; padding: .28rem .8rem; border-radius: 999px; }
.price-card .p-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.price-card .p-amount { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--sage-deep); margin: .6rem 0 .2rem; }
.price-card .p-amount small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-card .p-meta { color: var(--muted); font-size: .94rem; margin-bottom: 1rem; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.price-card ul li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; font-size: .95rem; }
.price-card ul li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--sage) 16%, transparent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 12.5 10 18 20 6'/%3e%3c/svg%3e") center / .7rem no-repeat; }
[data-theme="night"] .price-card ul li::before { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb083' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 12.5 10 18 20 6'/%3e%3c/svg%3e"); }
.price-card .btn-olive, .price-card .btn-ghost { margin-top: auto; width: 100%; justify-content: center; text-align: center; }

/* ---------- Consultations services ---------- */
.service { width: 100%; justify-content: space-between; margin: 0 0 .8rem; padding: 1rem 1.4rem; text-align: left; }
.service .ic { flex: none; }
.service-02 { background: var(--sand); color: #3a2f22; }
.service-02:hover { background: var(--sand-deep); color: var(--on-sand); }
.service-03 { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.service-03:hover { border-color: var(--sage); color: var(--sage-deep); background: var(--surface); }
/* Quick tests — distinct tinted-sage pill with border, stands apart from the others */
.service-04 { background: color-mix(in srgb, var(--sage) 15%, var(--surface)); color: var(--sage-deep); border: 1.5px solid var(--sage); box-shadow: none; }
.service-04:hover { background: color-mix(in srgb, var(--sage) 26%, var(--surface)); color: var(--sage-deep); border-color: var(--sage-deep); transform: translateY(-2px); }
.service-04 .ic-img { filter: none !important; }

/* ---------- FAQ accordion (Bootstrap-native chevron) ---------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--line);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--sage-deep);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 18%, transparent);
  display: grid; gap: .8rem;
}
.accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm) !important; overflow: hidden; box-shadow: var(--shadow-sm); }
.accordion-header { margin: 0; }
.accordion-button { background: transparent; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; padding: 1.05rem 1.3rem; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--sage-deep); background: color-mix(in srgb, var(--sage) 8%, transparent); }
/* recolor the default Bootstrap chevron to the sage accent */
.accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f7d5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); background-size: 1.15rem; }
[data-theme="night"] .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239fb083' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.accordion-body { padding: .2rem 1.3rem 1.25rem; color: var(--muted); }
.accordion-body .sub-header, .accordion-body p, .accordion-body li { color: var(--muted); }
.accordion-body p:last-child { margin-bottom: 0; }

/* ---------- Reviews slider ---------- */
.feedback-slider { overflow: hidden; }
.feedback-slider .swiper-slide { height: auto; display: flex; }
/* Photo review cards (fancybox gallery) */
.review-photo { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface); transition: transform .2s ease; }
.review-photo:hover { transform: translateY(-3px); }
.review-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
/* Text review cards (fallback / SEO) */
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem; height: 100%; display: flex; flex-direction: column; }
.review-card .quote { font-size: 2.4rem; font-family: var(--font-display); color: var(--sand); line-height: 1; margin-bottom: .3rem; }
.review-card p { color: var(--ink); }
.review-stars { color: var(--sand); margin-top: auto; letter-spacing: 2px; }
.review-author { font-weight: 600; color: var(--sage-deep); margin-top: .6rem; }
/* Pagination sits BELOW the cards, styled as a soft pill row */
#reviews .swiper-pagination { position: static; margin-top: 1.8rem; display: flex; justify-content: center; align-items: center; gap: 8px; }
#reviews .swiper-pagination-bullet { background: var(--line); opacity: 1; width: 8px; height: 8px; margin: 0 !important; transition: width .3s ease, background .3s ease; }
#reviews .swiper-pagination-bullet-active { background: var(--sage); width: 26px; border-radius: 999px; }

/* ---------- Worries CTA ---------- */
#worries .card-cta { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.6rem, 4vw, 2.6rem); }
/* From md up the photo fills the card's full height instead of keeping its own
   3/4 box: the row stretches (no align-items-center), the text column centers
   itself, and the frame drops its aspect-ratio so height:100% wins. */
@media (min-width: 768px) {
  #worries .card-cta > .row > [class*="col-"] { display: flex; flex-direction: column; justify-content: center; }
  #worries .card-cta .media.portrait { aspect-ratio: auto; height: 100%; min-height: 100%; flex: 1 1 auto; }
}

/* ---------- Footer ---------- */
.foot { background: var(--surface); border-top: 1px solid var(--line); margin-top: 2rem; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.foot .brand-logo { height: 40px; }
.foot-links { display: flex; flex-direction: column; gap: .5rem; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--sage-deep); }
.contacts-list a { color: var(--ink); overflow-wrap: anywhere; word-break: break-word; align-items: flex-start !important; }
.contacts-list a .ic { flex: none; margin-top: .15rem; }
.soc { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: all .2s ease; }
.soc:hover { border-color: var(--sage); color: var(--sage-deep); background: var(--surface-2); transform: translateY(-2px); }

/* ---------- Forms / modals ---------- */
/* Only real text controls are full-width — never checkboxes/radios */
.form-control, .form-select {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  color: var(--ink); padding: .7rem .95rem; width: 100%; max-width: 100%; margin-bottom: .55rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.form-control { resize: vertical; }
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent);
}
.form-label { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-check-input { flex: none; margin-top: .28rem; }
.form-check-input:checked { background-color: var(--sage); border-color: var(--sage); }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent); border-color: var(--sage); }
/* Neutralize Bootstrap's green "valid" feedback after submit — show only red errors,
   not green on every answered option. Selected radios keep our own sage highlight. */
.was-validated .form-check-input:valid ~ .form-check-label,
.was-validated .form-control:valid, .was-validated .form-select:valid { color: inherit; }
.was-validated .form-check-input:valid { border-color: var(--line); }
.was-validated .form-check-input:valid:checked { border-color: var(--sage); background-color: var(--sage); }
.was-validated .form-control:valid, .was-validated .form-select:valid { border-color: var(--line); background-image: none; }
.was-validated .form-control:valid:focus, .was-validated .form-select:valid:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent);
}
.form-status { border-radius: 12px; padding: .7rem .9rem; font-size: .92rem; }
.form-status.is-ok { background: color-mix(in srgb, var(--sage) 16%, transparent); color: var(--sage-deep); }
.form-status.is-err { background: color-mix(in srgb, var(--sand) 20%, transparent); color: var(--sand-deep); }

.modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; line-height: 1.25; padding-right: .5rem; }
.modal-body { overflow-x: hidden; }
.modal-questions .sub-header { color: var(--sage-deep); margin-top: .7rem; margin-bottom: .35rem; font-size: 1.05rem; }
/* Robust checkbox/radio rows — text wraps, never overflows */
.modal-questions .form-check { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .4rem; padding-left: 0; min-width: 0; }
.modal-questions .form-check .form-check-input { margin-left: 0; float: none; }
.modal-questions .form-check .form-check-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Polished question modals (consultation / additional / tests) ---------- */
.modal-questions .modal-header {
  background: color-mix(in srgb, var(--sage) 7%, var(--surface));
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
  padding: .95rem 1.3rem;
}
.modal-questions .modal-body { padding: 1.2rem 1.35rem 1.5rem; }
/* Section titles get a small sage accent bar (question legends stay clean) */
.modal-questions p.sub-header { position: relative; padding-left: .8rem; }
.modal-questions p.sub-header::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px; background: var(--sage);
}
/* Inputs: larger radius, roomier, soft ground */
.modal-questions .form-control {
  border-radius: 14px; padding: .8rem 1rem; margin-bottom: .6rem;
  background: color-mix(in srgb, var(--surface-2) 30%, var(--surface));
}
.modal-questions .form-control::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
/* Consent CHECKBOXES → soft plates that highlight when ticked */
.modal-questions .form-check:has(input[type="checkbox"]) {
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 38%, transparent);
  transition: border-color .2s ease, background .2s ease;
}
.modal-questions .form-check:has(input[type="checkbox"]) + .form-check:has(input[type="checkbox"]) { margin-top: .4rem; }
.modal-questions .form-check:has(input[type="checkbox"]:checked) {
  border-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, transparent);
}
/* Answer RADIO options → light rows; only the SELECTED one turns green */
.modal-questions .form-check:has(input[type="radio"]) {
  padding: .4rem .65rem; border: 1px solid transparent; border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.modal-questions .form-check:has(input[type="radio"]):hover { background: color-mix(in srgb, var(--sage) 6%, transparent); }
.modal-questions .form-check:has(input[type="radio"]:checked) {
  background: color-mix(in srgb, var(--sage) 10%, transparent);
  border-color: color-mix(in srgb, var(--sage) 35%, transparent);
}
.thanks-ico { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: color-mix(in srgb, var(--sage) 18%, transparent); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; }
.btn-close { filter: none; }
[data-theme="night"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- FAB stack ---------- */
.fab-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: flex; flex-direction: column; gap: .6rem; }
.fab { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--sage-deep); box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, background-color .25s ease, border-color .25s ease; }
.fab:hover { transform: translateY(-3px); border-color: var(--sage); }
.fab-chat { background: var(--sage); color: var(--on-sage); position: relative; border-color: var(--sage-deep); }
.fab-chat:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.fab-top { opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .2s ease; }
.fab-top.show { opacity: 1; pointer-events: auto; }
.fab-dot { position: absolute; top: 10px; right: 12px; width: 9px; height: 9px; background: var(--sand); border-radius: 50%; box-shadow: 0 0 0 3px var(--sage); }

/* ---------- Chat panel (fixed-height, like the reference) ---------- */
.chat-panel { position: fixed; right: 18px; bottom: 88px; width: 360px; max-width: calc(100vw - 24px); height: 500px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 1041; display: none; flex-direction: column; overflow: hidden; }
.chat-panel.open { display: flex; animation: chatIn .22s ease; }
@keyframes chatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .chat-panel { right: 12px; bottom: 80px; } }
.chat-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; background: var(--sage); color: var(--on-sage); }
.chat-head b { font-family: var(--font-display); }
.chat-head span { font-size: .78rem; opacity: .85; }
.chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #a8e6a1; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.chat-close { background: transparent; border: 0; color: var(--on-sage); opacity: .85; display: inline-flex; cursor: pointer; }
.chat-close:hover { opacity: 1; }
.chat-setup, .chat-gate, .chat-form { padding: 1rem; }
.chat-gate input, .chat-form input { width: 100%; border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .55rem; color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-msg { max-width: 82%; padding: .55rem .8rem; border-radius: 14px; font-size: .92rem; line-height: 1.45; }
.chat-msg.me { align-self: flex-end; background: var(--sage); color: var(--on-sage); border-bottom-right-radius: 4px; }
.chat-msg.op { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg.sys { align-self: center; background: transparent; color: var(--muted); font-size: .8rem; }
.chat-form { display: flex; gap: .5rem; padding-top: 0; }
.chat-form input { margin-bottom: 0; }
.chat-form button { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--sage); color: var(--on-sage); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chat-count { font-size: .7rem; color: var(--muted); text-align: right; padding: 0 1rem .3rem; }
.chat-count.over { color: var(--sand-deep); }

/* ---------- Callback offcanvas (bottom) ---------- */
/* Own panel, not bootstrap .offcanvas: the merged vendor build contains
   only Modal and Collapse, and PurgeCSS would strip the JS-injected
   offcanvas classes anyway. Same slide-up look, zero dependency. */
.cb-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  color: var(--ink); box-shadow: var(--shadow);
  transform: translateY(100%); visibility: hidden; transition: transform .35s ease, visibility .35s ease; }
.cb-panel.is-open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cb-panel { transition: none; } }
/* padding-right only on the TEXT (to clear the close button), NOT on the form */
#callbackOc .oc-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; padding: 1.1rem 0 1.2rem; }
#callbackOc .oc-text { flex: 1 1 260px; padding-right: 52px; }
#callbackOc .oc-text b { font-family: var(--font-display); font-size: 1.12rem; }
#callbackOc form { display: flex; flex: 1 1 320px; flex-wrap: wrap; gap: .55rem; align-items: center; }
#callbackOc .form-control { flex: 1 1 100%; width: 100%; min-width: 0; margin-bottom: 0; }
#callbackOc .btn-olive { flex: 1 1 100%; width: 100%; white-space: nowrap; }
.oc-close { position: absolute; top: 10px; right: 14px; z-index: 5; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.oc-close:hover { border-color: var(--sage); color: var(--sage-deep); }
@media (min-width: 768px) { #callbackOc form { flex: 0 1 auto; } #callbackOc .form-control { flex: 1 1 180px; width: auto; } #callbackOc .btn-olive { flex: 0 0 auto; width: auto; } }
@media (max-width: 575.98px) { #callbackOc .oc-inner { padding-right: 44px; } }

/* ---------- Reveal on scroll ---------- */
/* Initial hidden state + reveal are provided by kno-animation.css (bidirectional replay).
   No-JS / reduced-motion fallback so content is never stuck invisible: */
html:not(.js) [kno-position], html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { [kno-position], .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Responsive niceties ---------- */
/* Mobile (≤576): center the text inside every button */
@media (max-width: 575.98px) {
  .btn-olive, .btn-sand, .btn-ghost, .service, .modal-ask-a-question, .button-working-process {
    justify-content: center; text-align: center;
  }
  .service { justify-content: center; gap: .6rem; }
}

@media (max-width: 991px) {
  .navbar-collapse { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; margin-top: .6rem; box-shadow: var(--shadow-sm); }
  /* Header actions stack full-width on mobile: language row, then the CTA */
  .navbar-collapse .nav-actions { flex-direction: column; align-items: stretch !important; gap: .6rem !important; }
  .navbar-collapse .lang-switch { display: flex; width: 100%; justify-content: center; }
  .navbar-collapse .lang-switch .lang-item { flex: 1 1 0; text-align: center; }
  .navbar-collapse .modal-ask-a-question { display: flex; width: 100%; }
}

/* ============ Lottie motifs (animated SVG accents) ============ */
.lottie { display: block; line-height: 0; }
.lottie svg { display: block; width: 100%; height: 100%; }
/* Left-aligned accent above a section header — fixed box → no layout shift */
.lottie-accent { width: 76px; height: 76px; margin: 0 0 .35rem; }
/* Small inline accent next to text/CTAs */
.lottie-inline { width: 72px; height: 72px; flex: 0 0 auto; }
/* Support motif inside the "worries" CTA */
.lottie-cta { width: 96px; height: 96px; }
/* Full-width calm divider band before the footer */
.lottie-divider { width: 100%; max-width: 460px; height: 96px; margin: 0 auto; opacity: .9; }
/* Floating hero motif — decorative only, hidden on small screens */
.lottie-hero { position: absolute; right: 4%; top: 8%; width: 118px; height: 118px;
  pointer-events: none; opacity: .85; z-index: 1; }
#introduction .container { position: relative; }
@media (max-width: 767px) { .lottie-hero { display: none; } }

/* ============ 404 error page ============ */
.err-404 { min-height: 68vh; display: flex; align-items: center; }
.err-wrap { max-width: 620px; margin: 0 auto; text-align: center; padding: 1rem 0; }
.err-lottie { width: 128px; height: 128px; margin: 0 auto .25rem; }
.err-code { font-size: clamp(4.5rem, 16vw, 8rem); font-weight: 800; line-height: .9;
  letter-spacing: -.04em; color: var(--sage); opacity: .18; margin-bottom: -.35em; }
.err-wrap .section-header { justify-content: center; }
.err-lead { max-width: 44ch; margin: .6rem auto 1.6rem; }
.err-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.4rem; }
.err-links { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; justify-content: center; }
.err-links a { color: var(--sage-deep); font-size: .95rem; border-bottom: 1px solid transparent; }
.err-links a:hover { border-bottom-color: currentColor; }

/* ============ Self-check test (anxiety / stress) ============ */
.test-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  height: 100%; min-height: 200px; text-align: center; padding: 1.3rem 1rem; border: 1px solid var(--line, #e0d6c2);
  border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.test-pick b { min-height: 2.8em; display: flex; align-items: center; justify-content: center; }
.test-pick .text-muted { margin-top: 0; }
.test-pick:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06)); }
.test-pick b { font-size: 1.05rem; color: var(--ink, #2f3428); }
.test-pick .tp-ico { width: 64px; height: 64px; display: grid; place-items: center; }
.tp-lottie { width: 60px; height: 60px; display: block; }
.quiz-back { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface);
  border: 1px solid var(--line, #e0d6c2); color: var(--sage-deep); font-size: .9rem;
  padding: .35rem .8rem; margin-bottom: 1rem; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, background .2s; }
.quiz-back:hover { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 8%, transparent); }
.quiz-back .ic-img { width: 16px; height: 16px; }
.quiz-q { border: 0; margin: 0 0 1rem; padding: 0; }
.quiz-q legend { float: none; margin-bottom: .5rem; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.quiz-opt { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .4rem .7rem;
  border: 1px solid var(--line, #e0d6c2); border-radius: 999px; cursor: pointer; font-size: .9rem;
  transition: border-color .2s, background .2s; }
.quiz-opt input { margin: 0; }
.quiz-opt:has(input:checked) { border-color: var(--sage); background: color-mix(in srgb, var(--sage) 12%, transparent); }
.quiz-q.q-missing legend { color: #b5573f; }
/* result */
.quiz-result { text-align: center; max-width: 520px; margin: 0 auto; padding: .5rem 0; }
.qr-badge { display: inline-block; padding: .35rem 1rem; border-radius: 999px; font-weight: 700;
  font-size: .95rem; margin-bottom: .6rem; background: #e7ece0; color: #414a32; }
.qr-badge.is-ok   { background: #e2ede0; color: #3f6b4b; }
.qr-badge.is-mild { background: #eef0d9; color: #6c6a2c; }
.qr-badge.is-warn { background: #f4e6d2; color: #9a6a2d; }
.qr-badge.is-high { background: #f3ddd6; color: #a4432c; }
.qr-title { font-family: inherit; font-size: 1.25rem; margin: 0 0 .8rem; }
.qr-meter { height: 10px; border-radius: 999px; background: #ece5d6; overflow: hidden; margin: 0 auto .6rem; max-width: 340px; }
.qr-meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; background: var(--sage); }
.qr-meter span.is-ok { background: #6a9a6f; } .qr-meter span.is-mild { background: #b7b13f; }
.qr-meter span.is-warn { background: #d29a52; } .qr-meter span.is-high { background: #cf6a52; }
.qr-advice { color: var(--ink, #2f3428); margin: 0 auto 1rem; max-width: 46ch; }

/* ---------- Interaction polish: cursors + keyboard focus ---------- */
/* Every clickable choice row (answers, consents) shows a pointer */
.modal-questions .form-check,
.modal-questions .form-check .form-check-label,
.modal-questions .form-check .form-check-input,
.quiz-opt, .quiz-opt span, .quiz-opt input,
.form-check-input, .form-check-label { cursor: pointer; }
/* Visible, on-brand focus ring for keyboard users (mouse clicks stay clean) */
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 6px; }
.btn-olive:focus-visible, .btn-sand:focus-visible, .btn-ghost:focus-visible,
.service:focus-visible, .modal-ask-a-question:focus-visible, .test-pick:focus-visible {
  outline: 2px solid var(--sage-deep); outline-offset: 3px;
}

/* ---------- Reviews slider: pre-init sizing ----------
   The wrapper is already flex before Swiper boots (critical CSS), but the
   slides had no width, so they laid out at their natural size and then
   snapped to the real one on init — the biggest layout shift on the page.
   These widths mirror the slidesPerView breakpoints in app.js
   (spaceBetween: 16), so init changes nothing visible. */
/* margin-right mirrors spaceBetween: Swiper adds it on init, and without it
   here the slides slide sideways the moment the plugin boots. */
.feedback-slider .swiper-slide { width: 100%; margin-right: 16px; }
@media (min-width: 480px)  { .feedback-slider .swiper-slide { width: calc((100% - 16px) / 2); } }
@media (min-width: 768px)  { .feedback-slider .swiper-slide { width: calc((100% - 32px) / 3); } }
@media (min-width: 1200px) { .feedback-slider .swiper-slide { width: calc((100% - 48px) / 4); } }
.feedback-slider .swiper-slide + .swiper-slide { margin-left: 0; }
.feedback-slider .review-photo img { width: 100%; height: auto; aspect-ratio: 480 / 620; object-fit: cover; display: block; }

/* ---------- Booking calendar (7-day strip + free hours) ---------- */
.booking-cal { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem 1rem; }
.booking-cal.is-missing { border-color: #cf6a52; box-shadow: 0 0 0 3px color-mix(in srgb, #cf6a52 18%, transparent); }
/* Capped so seven chips stay chip-sized in a full-width modal column
   instead of stretching to 140px each. */
.bc-head, .bc-days { max-width: 620px; }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.bc-range { font-weight: 600; text-align: center; flex: 1 1 auto; font-size: .98rem; }
.bc-nav { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease; }
.bc-nav:hover:not(:disabled) { border-color: var(--sage); color: var(--sage-deep); }
.bc-nav:disabled { opacity: .35; cursor: default; }
/* Seven equal chips, one per day. No month grid: no leading blank cells and a
   third of the height, which is what a booking form actually needs. */
.bc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bc-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: .4rem .1rem .45rem; border: 1.5px solid transparent; border-radius: 12px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease; }
.bc-day:hover:not(:disabled) { border-color: var(--sage); }
.bc-dw { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.bc-dn { font-size: 1.02rem; font-weight: 600; line-height: 1.1; }
/* Days that cannot be booked stay readable but clearly inactive */
.bc-day.is-off { background: none; color: color-mix(in srgb, var(--ink) 32%, transparent); cursor: default; }
.bc-day.is-today { border-color: var(--sand); }
.bc-day.is-sel, .bc-day.is-sel:hover { background: var(--sage); border-color: var(--sage); color: var(--on-sage); }
.bc-times { display: flex; flex-wrap: wrap; gap: .4rem; }
.bc-time { border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: .9rem; font-weight: 500; padding: .34rem .8rem; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease; }
.bc-time:hover:not(:disabled) { border-color: var(--sage); color: var(--sage-deep); }
.bc-time.is-off { opacity: .4; cursor: default; text-decoration: line-through; }
.bc-time.is-sel, .bc-time.is-sel:hover { background: var(--sage); border-color: var(--sage); color: var(--on-sage); }
.bc-note { font-size: .9rem; color: var(--muted, #6f7566); }
.bc-chosen { font-weight: 600; color: var(--sage-deep); font-size: .95rem; }
@media (max-width: 400px) { .bc-days { gap: 3px; } .bc-day { padding: .35rem 0 .4rem; border-radius: 10px; }
  .bc-dw { font-size: .6rem; } .bc-dn { font-size: .92rem; } .bc-time { padding: .32rem .68rem; font-size: .85rem; } }