/* ==========================================================================
   Psicología Canteras — main stylesheet
   Sand, soft Atlantic blue and a touch of gold. No frameworks, no dependencies.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  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: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-ext-wght.woff2") format("woff2");
  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; }

/* ---------- Tokens ---------- */
:root {
  --sand-50:  #FBF8F2;
  --sand-100: #F5EFE4;
  --sand-200: #EAE0CC;
  --sand-300: #D9CBAE;
  --ink:      #1C2733;
  --ink-2:    #45525F;
  --ink-3:    #5C6873;   /* was #6F7B87: 3.78:1 on the footer, below AA */
  --blue-50:  #F0F2FA;
  --blue-100: #E1E6F4;
  --blue-200: #C5CDE7;
  --blue-500: #6174B8;
  --blue-600: #374A95;
  --blue-700: #223077;
  --navy:      #000B3D;   /* primary buttons and the dark banner */
  --navy-soft: #142457;   /* button hover: lifts rather than darkens, there is no room below */
  --gold-100: #F5EBD6;
  --gold-500: #C7A66A;
  --gold-600: #A98748;
  --gold-700: #806636;   /* text on gold-100: 4.58:1 */
  --white:    #FFFFFF;

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,39,51,.04), 0 2px 8px rgba(28,39,51,.04);
  --shadow:    0 2px 6px rgba(28,39,51,.04), 0 12px 32px -8px rgba(28,39,51,.10);
  --shadow-lg: 0 4px 10px rgba(28,39,51,.05), 0 30px 60px -20px rgba(28,39,51,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);

  --container: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section: clamp(3rem, 7vw, 5.5rem);
  --header-h: 4.25rem;
}

/* ---------- Per-page wash ----------
   Every page shares one layout, so moving between them went unnoticed. Each key
   pulls the whole neutral family a few percent toward its own --wash, so the
   ground, the sand sections, the blue sections, the wave dividers, the header
   glass and the footer all shift together. Tinting only the ground left the
   sections and footer on the old palette, which read as a mismatch.

   These are declared on body, not :root, because a custom property that uses
   var(--wash) is substituted on the element that declares it - on :root it
   would bake in the root's wash before the page class on <body> applies.

   Saturated brand colours (blue-500..900, gold-500/600, ink) are deliberately
   left alone so buttons, links and text stay identical across the site. */
body {
  --wash: #FBF8F2;
  --wash-amt: 0%;
  --sand-50:  color-mix(in srgb, #FBF8F2, var(--wash) var(--wash-amt));
  --sand-100: color-mix(in srgb, #F5EFE4, var(--wash) var(--wash-amt));
  --sand-200: color-mix(in srgb, #EAE0CC, var(--wash) var(--wash-amt));
  --sand-300: color-mix(in srgb, #D9CBAE, var(--wash) var(--wash-amt));
  --blue-50:  color-mix(in srgb, #F0F2FA, var(--wash) var(--wash-amt));
  --blue-100: color-mix(in srgb, #E1E6F4, var(--wash) var(--wash-amt));
  --blue-200: color-mix(in srgb, #C5CDE7, var(--wash) var(--wash-amt));
  --gold-100: color-mix(in srgb, #F5EBD6, var(--wash) var(--wash-amt));
  --white:    color-mix(in srgb, #FFFFFF, var(--wash) calc(var(--wash-amt) / 2));
}
body.page-clinic     { --wash: #EFF5F7; --wash-amt: 38%; }
body.page-team       { --wash: #FBF0DC; --wash-amt: 32%; }
body.page-profile, body.page-profile-georgina { --wash: #F0F6FA; --wash-amt: 30%; }
body.page-directions { --wash: #E9F3FB; --wash-amt: 45%; }
body.page-work       { --wash: #FAEBCF; --wash-amt: 45%; }
body.page-legal      { --wash: #F0F1F1; --wash-amt: 35%; }
body.page-privacy    { --wash: #ECF1F4; --wash-amt: 38%; }
body.page-notfound   { --wash: #F4F1EA; --wash-amt: 30%; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--sand-50); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-700); text-decoration: none; text-underline-offset: .18em; transition: color .2s var(--ease); }
a:hover { color: var(--blue-600); }
p a { text-decoration: underline; text-decoration-color: var(--blue-200); text-decoration-thickness: 1.5px; }
p a:hover { text-decoration-color: var(--blue-500); }
ul, ol { padding-left: 1.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue-200); color: var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 480; line-height: 1.1; letter-spacing: -.014em; margin: 0 0 .5em; color: var(--ink); font-variation-settings: "opsz" 96, "SOFT" 30; }
h1 { font-size: clamp(2.5rem, 2.6vw + 1.6rem, 4rem); text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 1.5vw + 1.2rem, 2.6rem); text-wrap: balance; }
h3 { font-size: clamp(1.2rem, .5vw + 1.05rem, 1.4rem); font-family: var(--font-sans); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.12rem, .45vw + 1rem, 1.3rem); color: var(--ink-2); line-height: 1.55; text-wrap: pretty; max-width: 38em; }
.eyebrow { display: inline-flex; align-items: center; gap: .55em; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 1.6em; height: 2px; border-radius: 2px; background: var(--gold-500); }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.prose { max-width: 66ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose li { margin-bottom: .35em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--sand { background: var(--sand-100); }
.section--blue { background: linear-gradient(180deg, var(--blue-50), var(--blue-100)); }
.section--dark { background: var(--navy); color: var(--sand-100); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .lead, .section--dark p { color: color-mix(in srgb, var(--sand-100) 82%, transparent); }
.section--dark .eyebrow { color: var(--blue-200); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid--2 { grid-template-columns: 1fr; } }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr .95fr; } .split--rev > :first-child { order: 2; } }

/* Wave edge between sections */
.wave { position: relative; }
.wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 5vw, 64px); background: var(--wave-color, var(--sand-100)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 10 480 10 720 34S1200 64 1440 24V64H0z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 10 480 10 720 34S1200 64 1440 24V64H0z' fill='%23000'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; pointer-events: none; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--white); padding: .6rem 1rem; border-radius: var(--radius-pill); transition: top .2s; }
.skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn { --bg: var(--ink); --fg: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .9em 1.5em; border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease), background .25s var(--ease), color .25s; box-shadow: var(--shadow-sm); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--fg); } }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
.btn--primary { --bg: var(--navy); }
@media (hover: hover) { .btn--primary:hover { --bg: var(--navy-soft); } }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--sand-300); box-shadow: none; }
@media (hover: hover) { .btn--ghost:hover { --bg: var(--white); border-color: var(--sand-200); } }
.btn--light { --bg: var(--white); --fg: var(--ink); border-color: var(--sand-200); }
.btn--sm { padding: .7em 1.15em; font-size: .92rem; }
.btn--lg { padding: 1.05em 1.8em; font-size: 1.05rem; }
.btn__icon { width: 1.05em; height: 1.05em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.section--dark .btn--ghost { --fg: var(--white); border-color: color-mix(in srgb, var(--white) 30%, transparent); }
@media (hover: hover) { .section--dark .btn--ghost:hover { --bg: color-mix(in srgb, var(--white) 10%, transparent); } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: .75rem; pointer-events: none; transition: padding .3s var(--ease); }
.site-header__inner { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 1rem; justify-content: space-between; min-height: var(--header-h); padding: .5rem .6rem .5rem 1.1rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--sand-50) 74%, transparent); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border: 1px solid color-mix(in srgb, var(--white) 55%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent) inset, 0 10px 30px -14px rgba(28,39,51,.22); transition: box-shadow .3s var(--ease), background .3s, transform .3s var(--ease); }
.site-header.is-scrolled { padding-top: .4rem; }
.site-header.is-scrolled .site-header__inner { box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 60%, transparent) inset, 0 14px 36px -16px rgba(28,39,51,.32); background: color-mix(in srgb, var(--sand-50) 86%, transparent); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; font-variation-settings: "opsz" 40; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand__accent { color: inherit; }
.brand__mark { flex: none; }
.site-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { display: inline-flex; align-items: center; white-space: nowrap; padding: .5rem .8rem; line-height: 1.5; border-radius: var(--radius-pill); color: var(--ink-2); font-weight: 500; font-size: .96rem; transition: background .25s var(--ease), color .25s; }
.site-nav__list a:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); }
.site-nav__list a[aria-current="page"] { color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); }

/* Dropdowns. The parent is a button rather than a link so the submenu can be
   opened without navigating; the section's own page is the first item inside. */
.has-sub { position: relative; }
.sub__btn { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; padding: .5rem .8rem;
  border: 0; background: transparent; border-radius: var(--radius-pill); color: var(--ink-2);
  font-weight: 500; font-size: .96rem; line-height: 1.5; font-family: inherit; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.sub__btn:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); }
.sub__btn[aria-current="page"] { color: var(--ink); background: var(--white); box-shadow: var(--shadow-sm); }
.sub__chev { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.has-sub:hover .sub__chev, .sub__btn[aria-expanded="true"] .sub__chev { transform: rotate(180deg); }
.subnav { position: absolute; left: 0; top: calc(100% + .45rem); z-index: 30; min-width: 15rem;
  list-style: none; margin: 0; padding: .45rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--sand-50) 97%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--white) 55%, transparent); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .25s var(--ease), visibility .22s; }
.has-sub:hover .subnav, .has-sub:focus-within .subnav, .sub__btn[aria-expanded="true"] + .subnav {
  opacity: 1; visibility: visible; transform: none; }
.subnav a { display: block; padding: .55rem .8rem; border-radius: var(--radius-sm); white-space: nowrap;
  color: var(--ink-2); font-size: .95rem; }
.subnav a:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 80%, transparent); }
.subnav > li:first-child a { font-weight: 600; color: var(--ink); }
.subnav > li:first-child { border-bottom: 1px solid color-mix(in srgb, var(--sand-200) 60%, transparent); margin-bottom: .3rem; padding-bottom: .3rem; }
/* Services dropdown: grouped by area, "soon" items tagged, a non-link note for areas not offered yet */
.subnav--services { min-width: 18rem; }
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav__group + .subnav__group { border-top: 1px solid color-mix(in srgb, var(--sand-200) 60%, transparent); margin-top: .3rem; padding-top: .3rem; }
.subnav__label { display: block; padding: .45rem .8rem .2rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.subnav__note { margin: 0; padding: .1rem .8rem .5rem; max-width: 17rem; font-size: .85rem; line-height: 1.45; color: var(--ink-3); white-space: normal; }
.subnav__soon { display: inline-block; margin-left: .35rem; padding: .1em .55em; border-radius: var(--radius-pill); background: var(--gold-100); color: var(--gold-700); font-size: .72rem; font-weight: 600; vertical-align: .1em; }
.site-header__tools { display: flex; align-items: center; gap: .6rem; }
.lang-switch { display: inline-flex; gap: .1rem; padding: .18rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--sand-200) 60%, transparent); }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: .32rem .55rem; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); transition: background .25s, color .25s; line-height: 1.2; }
.lang-switch a:hover { color: var(--ink); }
html[lang="es"] .lang-switch a[data-lang="es"], html[lang="en"] .lang-switch a[data-lang="en"], html[lang="de"] .lang-switch a[data-lang="de"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.lang-switch--footer { background: var(--sand-200); }
.lang-switch--footer a { text-transform: none; letter-spacing: 0; font-size: .88rem; padding: .45rem .8rem; min-height: 2.1rem; }
.nav-toggle { display: none; }

/* Raised from 960px when Servicios joined the nav: between ~960 and 1150 the
   row was too tight and labels wrapped, pushing the header to 108px. */
@media (max-width: 1150px) {
  .site-header { padding-top: .5rem; }
  .site-header__inner { border-radius: var(--radius); padding: .45rem .5rem .45rem .9rem; }
  .site-header__cta { display: none; }
  .nav-toggle { display: block; position: relative; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-pill); cursor: pointer; padding: 0; flex: none; }
  .nav-toggle__bar { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); transform-origin: center; }
  .nav-toggle__bar:nth-child(1) { transform: translateY(-4px); }
  .nav-toggle__bar:nth-child(2) { transform: translateY(4px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); padding: .6rem; border-radius: var(--radius); background: color-mix(in srgb, var(--sand-50) 97%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid color-mix(in srgb, var(--white) 55%, transparent); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--ease-spring); transform-origin: top center; }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .site-nav__list a { display: block; padding: .85rem 1rem; font-size: 1.05rem; }
  .sub__btn { display: none; }
  .subnav { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    padding: 0 0 .3rem .6rem; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .subnav a { font-size: 1rem; padding: .6rem 1rem; }
  .subnav > li:first-child { border: 0; margin: 0; padding: 0; }
  .subnav__group + .subnav__group { border: 0; margin: 0; padding: 0; }
  .subnav__label { padding: .5rem 1rem .1rem; }
  .subnav__note { padding: .1rem 1rem .4rem; max-width: none; }
}
@media (max-width: 420px) { .brand__name { font-size: 1.05rem; } .lang-switch a { padding: .3rem .42rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); overflow: clip; isolation: isolate; }
/* The hero clips its overflow, which sliced the blurred blobs off with a hard
   straight edge at the bottom of the section - visible as a flat line under
   the wave curve. Fading the blob layer out before that edge removes it. */
.hero__bg { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 92%); }
.hero__blob { position: absolute; border-radius: 50%; will-change: transform; }
.hero__blob--blue { width: 48vw; height: 48vw; max-width: 640px; max-height: 640px; left: 55%; top: -5%; background: radial-gradient(circle at 40% 40%, var(--blue-200), transparent 70%); animation: drift 22s var(--ease) infinite alternate; }
.hero__blob--gold { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; left: 5%; top: 35%; background: radial-gradient(circle at 60% 60%, var(--gold-100), transparent 70%); animation: drift 28s var(--ease) infinite alternate-reverse; }
.hero__blob--sand { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; left: 30%; top: 55%; background: radial-gradient(circle, var(--sand-200), transparent 70%); animation: drift 34s var(--ease) infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.08); } }
.hero__content { max-width: 46rem; }
.hero .lead { margin-top: 1.1rem; }
.hero .btn-row { margin-top: 1.9rem; }
.hero--home { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero--home .hero__content { max-width: 52rem; }
.hero--home h1 { font-size: clamp(2.7rem, 3.4vw + 1.6rem, 4.6rem); }

/* Trust strip: the "3 seconds" row */
.trust { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.trust > div { display: flex; gap: .8rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--white) 88%, transparent); border: 1px solid color-mix(in srgb, var(--white) 80%, transparent);  }
.trust__icon { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-700); }
.trust strong { display: block; font-size: .98rem; line-height: 1.25; }
.trust span { font-size: .84rem; color: var(--ink-3); line-height: 1.3; }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- Badges / tags ---------- */
.badge { display: inline-flex; align-items: center; gap: .45em; padding: .4em .85em; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 600; letter-spacing: .01em; background: var(--white); color: var(--ink-2); border: 1px solid var(--sand-200); box-shadow: var(--shadow-sm); }
.badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ink-3); }
.badge--live::before { background: #3FA574; box-shadow: 0 0 0 3px rgba(63,165,116,.18); }
.badge--soon { background: var(--gold-100); border-color: transparent; color: var(--gold-700); }
.badge--soon::before { background: var(--gold-500); }
.badge--blue { background: var(--blue-100); border-color: transparent; color: var(--blue-700); }
.badge--blue::before { background: var(--blue-500); }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li { padding: .35em .75em; border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-700); font-size: .84rem; font-weight: 500; border: 1px solid var(--blue-100); }
.tags--lg li { font-size: .95rem; padding: .45em .9em; background: var(--white); }

/* ---------- Cards ---------- */
.card { background: var(--white); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 2rem); box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease); }
@media (hover: hover) { .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.card--sand { background: var(--sand-100); border-color: transparent; }
.card--blue { background: linear-gradient(160deg, var(--blue-100), color-mix(in srgb, var(--blue-100) 40%, var(--white))); border-color: transparent; }
.card--flat { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-700); margin-bottom: 1rem; }
.card__icon--gold { background: var(--gold-100); color: var(--gold-600); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card--link { display: block; color: inherit; }
.card--link:hover { color: inherit; }
/* Service cards: same surface as .card, but the whole card is the link */
.svc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.svc-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.2vw, 1.75rem); box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--sand-200) 60%, transparent); color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) { .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; } }
.svc-card h3 { margin: 0 0 .45rem; }
.svc-card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.svc-card .card__arrow { margin-top: auto; padding-top: .9rem; }
@media (hover: hover) { .svc-card:hover .card__arrow { color: var(--blue-600); } }

.card__arrow { display: inline-flex; align-items: center; gap: .4em; color: var(--blue-700); font-weight: 600; margin-top: .9rem; }
.card__arrow svg { transition: transform .3s var(--ease); }
@media (hover: hover) { .card--link:hover .card__arrow svg, .pro-card:hover .card__arrow svg { transform: translateX(3px); } }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 2.1rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5F7C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center / 60% no-repeat; }

.facts { display: grid; gap: .9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 0 0 1.5rem; }
.facts div { background: var(--white); border-radius: var(--radius-sm); padding: .9rem 1.1rem; border: 1px solid var(--sand-200); }
.facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; margin-bottom: .2rem; }
.facts dd { margin: 0; font-weight: 500; }

/* Steps with a connecting line */
.steps { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; position: relative; }
.steps > div { position: relative; padding-top: 3.6rem; }
.steps > div::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; background: var(--white); color: var(--blue-700); border: 1px solid var(--blue-200); box-shadow: var(--shadow-sm); z-index: 1; }
.steps > div::after { content: ""; position: absolute; top: 1.3rem; left: 2.6rem; right: -2.5rem; height: 1px; background: linear-gradient(90deg, var(--blue-200), transparent); }
.steps > div:last-child::after { display: none; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .steps > div { padding-top: 0; padding-left: 3.6rem; } .steps > div::after { display: none; } }

/* ---------- Team ---------- */
.team-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.pro-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; color: inherit; border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease); }
@media (hover: hover) { .pro-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); color: inherit; } }
.pro-card__photo { aspect-ratio: 4 / 3.4; overflow: hidden; background: linear-gradient(160deg, var(--sand-200), var(--blue-100)); }
.pro-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .pro-card:hover .pro-card__photo img { transform: scale(1.04); } }
.pro-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.pro-card__body .badge { align-self: flex-start; }
.pro-card__name { margin: .2rem 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; }
.pro-card__facts { display: flex; flex-direction: column; gap: .15rem; }
.pro-card__facts p { margin: 0; }
.pro-card__title { font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.pro-card__meta { font-size: .88rem; color: var(--ink-3); }
.pro-card__facts .pro-card__area { margin-top: .45rem; align-self: flex-start; padding: .25em .75em; border-radius: var(--radius-pill); background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); font-size: .84rem; font-weight: 500; }
.pro-card__facts .pro-card__langs { margin-top: .35rem; font-size: .86rem; color: var(--ink-3); }
.pro-card .card__arrow { margin-top: auto; padding-top: .6rem; }
.pro-card--onboarding .pro-card__photo { filter: saturate(.6); }
.pro-card--open { background: transparent; border: 2px dashed var(--sand-300); box-shadow: none; justify-content: center; }
@media (hover: hover) { .pro-card--open:hover { border-color: var(--blue-200); background: color-mix(in srgb, var(--white) 60%, transparent); } }
.pro-card--open .badge { background: transparent; border-color: var(--sand-300); }

/* ---------- Profile ---------- */
.hero--profile { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.profile-hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .profile-hero { grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 5rem); } }
.profile-hero__photo { order: -1; }
@media (min-width: 860px) { .profile-hero__photo { order: 2; } }
.profile-hero .btn-row { margin-top: 1.8rem; }
.portrait { aspect-ratio: 4 / 5; width: min(100%, 22rem); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--sand-200), var(--blue-100)); box-shadow: var(--shadow-lg); position: relative; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--framed::before { content: ""; position: absolute; inset: auto -12% -12% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-100) 80%, transparent), transparent 70%); z-index: -1; }
.profile-hero__photo { position: relative; }
.profile-hero__photo::before { content: ""; position: absolute; inset: 8% -8% -8% 8%; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--blue-100), var(--gold-100)); z-index: -1; }
.portrait--sm { width: 5.5rem; aspect-ratio: 1; border-radius: 22px; box-shadow: var(--shadow-sm); flex: none; }
.person-card { display: flex; gap: 1.25rem; align-items: center; }
.person-card h3 { margin: 0 0 .2rem; }
.person-card__meta { font-size: .92rem; color: var(--ink-3); margin: 0; }

/* Focus list on profile (two-column definition style) */
.focus-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .focus-list { grid-template-columns: 1fr; } }
.focus-list > div { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--white); border-left: 3px solid var(--gold-500); box-shadow: var(--shadow-sm); }
.focus-list h3 { margin-bottom: .3em; }
.focus-list p { margin: 0; color: var(--ink-2); }

/* Booking */
.section--booking { padding-block: calc(var(--section) * .5); }
.booking { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.75rem); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); position: relative; overflow: hidden; }
.booking::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--blue-100), transparent 70%); pointer-events: none; }
.booking__grid { display: grid; gap: 2rem; align-items: start; position: relative; }
@media (min-width: 860px) { .booking__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.booking__card { background: var(--sand-100); border-radius: var(--radius); padding: 1.5rem; }
.btn__ext { font-size: .9em; opacity: .75; margin-left: -.15em; }
.booking__notice { font-size: .86rem; color: var(--ink-3); margin: 1rem 0 0; max-width: 52ch; }
.price { display: flex; align-items: baseline; gap: .35rem; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--ink); font-variation-settings: "opsz" 72; margin: 0 0 .5rem; }
.price small { font-family: var(--font-sans); font-size: .95rem; font-weight: 500; color: var(--ink-3); }

/* ---------- Parking / location ---------- */
.parking { position: relative; }
.parking__tag { position: absolute; top: 1.1rem; right: 1.1rem; }
.loc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.loc-list li { display: flex; gap: .85rem; align-items: flex-start; }
.loc-list__dot { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .85rem; color: var(--white); background: var(--navy); margin-top: .1rem; }
.loc-list__dot--gold { background: var(--gold-500); color: var(--ink); }   /* white on gold was 2.31:1 */
.map-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--sand-200); box-shadow: var(--shadow); color: inherit; transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease); }
@media (hover: hover) { .map-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; } }
.map-card__art { display: block; aspect-ratio: 1568 / 704; background: var(--blue-100); overflow: hidden; }
.map-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .map-card:hover .map-card__art img { transform: scale(1.03); } }
.map-card__body { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-top: 1px solid var(--sand-200); }
.map-card__cta { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--blue-700); }
.map-card__cta svg { transition: transform .3s var(--ease); }
@media (hover: hover) { .map-card:hover .map-card__cta svg { transform: translate(2px, -2px); } }
.map-card__pin { display: none; }

/* ---------- Banners ---------- */
.banner { border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); background: var(--navy); color: var(--sand-100); position: relative; overflow: hidden; isolation: isolate; }
.banner h2 { color: var(--white); }
.banner p { color: color-mix(in srgb, var(--sand-100) 80%, transparent); max-width: 44em; }
.banner .eyebrow { color: var(--blue-200); }
.banner::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blue-500) 45%, transparent), transparent 70%); z-index: -1; filter: blur(30px); }
.banner .btn--light { --bg: var(--sand-50); }
.notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--gold-100); font-size: .95rem; margin-bottom: 1rem; }
.notice p { margin: 0; color: var(--ink-2); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section); background: var(--sand-100); border-top: 1px solid var(--sand-200); padding-block: 3.5rem 2rem; font-size: .95rem; }
/* When the page ends on a tinted section, meet the footer directly instead of leaving a pale band. */
main:has(> .section--sand:last-child, > .section--blue:last-child) + .site-footer { margin-top: 0; }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer__brand .brand { margin-bottom: .75rem; }
.site-footer__tagline { color: var(--ink-2); max-width: 28em; }
.site-footer__address { color: var(--ink-3); }
.site-footer__heading { font-family: var(--font-sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 .75rem; font-weight: 600; }
.site-footer__heading + .site-footer__list + .site-footer__heading { margin-top: 1.5rem; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer__list a { color: var(--ink-2); }
.site-footer__list a:hover { color: var(--blue-700); }
.site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sand-200); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; color: var(--ink-3); font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
.hr { border: 0; border-top: 1px solid var(--sand-200); margin: 1.25rem 0; }

/* ---------- Motion: reveal on scroll ----------
   Scroll-driven and CSS-only. An element already inside the first screen is
   already at the end of its range, so it paints in its final state - the
   JS-gated version started everything invisible and faded it in after the
   bundle ran, which read as a second load on any page with content above the
   fold. Browsers without scroll-driven animations simply show the content. */
/* Reveals animate the individual `translate` property, never `transform`, and never scale.
   An animation on `transform` overrides the :hover lift on cards, and a scaled layer can be
   rasterised at the wrong size and look soft or shadowed until something forces a repaint. */
@keyframes reveal-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: none; } }
@keyframes reveal-in-scale { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes reveal-in-left { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: none; } }
@keyframes reveal-in-right { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 20%;   /* anything meaningfully on screen at load is already at 100% */ }
    .reveal--scale { animation-name: reveal-in-scale; }
    .reveal--left  { animation-name: reveal-in-left; }
    .reveal--right { animation-name: reveal-in-right; }
    .hero .reveal { animation: none; }   /* the first screen never animates in */
  }
}

/* ---------- Cross-document view transitions ---------- */
@view-transition { navigation: auto; }
/* Page change: the old page is gone before the new one fades in, so the two never overlap.
   (They used to overlap for ~260ms, offset by a few pixels, which read as a shadow on buttons.) */
::view-transition-old(root) { animation: 140ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 360ms var(--ease) 90ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* The header stays put and cross-fades only what changes (the active menu item).
   Showing old and new header unanimated on top of each other let the old page's
   active pill show through the glass as a faint shadow until the transition ended. */
.site-header { view-transition-name: header; }
::view-transition-group(header) { animation-duration: 200ms; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Print ---------- */
@media print { .site-header, .site-footer, .btn { display: none !important; } body { background: #fff; } }
.wave--white::after { background: var(--sand-50); }
.wave--blue::after { background: var(--blue-50); }
.section { overflow-x: clip; }
@media (max-width: 960px) { .site-header__inner { gap: .5rem; padding-left: .8rem; } .site-header__tools { gap: .35rem; } }
@media (max-width: 400px) { .brand__mark { display: none; } .lang-switch a { padding: .3rem .38rem; font-size: .72rem; } }
@media (max-width: 860px) { .portrait { width: min(100%, 15rem); } }

/* Compact team cards on phones */
@media (max-width: 520px) {
  .team-grid { gap: .75rem; }
  .pro-card { flex-direction: row; align-items: stretch; }
  .pro-card__photo { flex: 0 0 7rem; aspect-ratio: auto; }
  .pro-card__body { padding: .9rem 1rem 1rem; gap: .4rem; }
  .pro-card__name { font-size: 1.15rem; }
  .tags li { font-size: .76rem; padding: .28em .6em; }
  .pro-card .card__arrow { font-size: .9rem; padding-top: .3rem; }
  .pro-card--open { min-height: 7rem; }
}

/* Render / photo figures */
.render { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); }
.render img { width: 100%; height: auto; display: block; }
.render figcaption { padding: .7rem 1.1rem; font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--sand-200); }
.render--wide { max-width: 60rem; margin-inline: auto; }
.portrait picture { display: block; width: 100%; height: 100%; }

.also { margin-top: 1.5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.8; }
.also span { white-space: nowrap; }
.hero--clinic .split { align-items: center; }
@media (min-width: 860px) { .hero--clinic .split { grid-template-columns: .9fr 1.1fr; } }

.facts--spaced { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.photo-pair { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 1.25rem; }
@media (max-width: 480px) { .photo-pair { grid-template-columns: 1fr; } }
.photo { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--sand-100); }
.photo img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.photo figcaption { font-size: .8rem; color: var(--ink-3); padding: .45rem .6rem; }
.social { margin-top: 1.1rem; font-size: .92rem; display: flex; gap: .6rem; align-items: center; }
.social a { font-weight: 600; }
.hero--split .hero__split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero--split .hero__split { grid-template-columns: 1.05fr .95fr; } }
.render--hero { box-shadow: var(--shadow-lg); }
/* Home hero: the trust row is a line of compact chips, not three stacked
   cards - in a split hero the cards made the column far taller than the
   image beside it. The fuller versions still appear in the sections below. */
.hero--home .trust { display: flex; flex-wrap: wrap; gap: .5rem; grid-template-columns: none; margin-top: 1.5rem; }
.hero--home .trust > div { padding: .4rem .85rem .4rem .45rem; gap: .5rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--white) 88%, transparent); }
.hero--home .trust__icon { width: 1.65rem; height: 1.65rem; }
.hero--home .trust__icon svg { width: 14px; height: 14px; }
.hero--home .trust strong { font-size: .85rem; font-weight: 600; }
.hero--home .trust strong + span { display: none; }
@media (min-width: 900px) and (max-width: 1100px) { .hero--home h1 { font-size: 2.9rem; } }

/* Hero runs underneath the floating header so the gradient has no hard edge */
main { margin-top: calc(-1 * (var(--header-h) + .75rem)); }
main > .hero:first-child { padding-top: calc(var(--header-h) + .75rem + clamp(2.5rem, 6vw, 5rem)); }
main > .section:first-child { padding-top: calc(var(--header-h) + .75rem + clamp(2.5rem, 5vw, 4rem)); }
main > .hero--profile:first-child { padding-top: calc(var(--header-h) + .75rem + clamp(2rem, 5vw, 4rem)); }
/* Home hero image: balanced against the text column, matted frame + caption */
@media (min-width: 900px) { .hero--split .hero__split { grid-template-columns: 1fr 1fr; } }
.render--hero { max-width: 42rem; margin-inline: auto; padding: .5rem; border-radius: calc(var(--radius-lg) + .35rem); }
.render--hero picture { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.render--hero img { aspect-ratio: auto; }
.render--hero figcaption { border-top: 0; padding: .6rem .5rem .25rem; text-align: center; font-size: .78rem; }
.render__legal { margin: 0; padding: .2rem .9rem .75rem; font-size: .78rem; line-height: 1.55; color: var(--ink-3); text-align: center; }

/* Hero clarification line under the buttons */
.hero__note { margin-top: 1.1rem; max-width: 32rem; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.hero__note strong { color: var(--ink); font-weight: 600; }

.pro-card--blur { cursor: default; }
@media (hover: hover) { .pro-card--blur:hover { transform: none; box-shadow: var(--shadow-sm); } }
.pro-card__blur { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; display: flex; flex-direction: column; gap: .55rem; }

/* ---------- Scroll cue ----------
   Testers stopped at the first screen because nothing suggested more below.
   Shown only while the page is at the top and only when there is actually
   something to scroll to; it fades the moment the reader moves. Decorative,
   so it is aria-hidden and never appears without JS. */
.scroll-cue { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 4;
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--ink-3); background: color-mix(in srgb, var(--white) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--sand-200) 60%, transparent); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .55s var(--ease); }
.scroll-cue.is-on { opacity: 1; }
.scroll-cue svg { width: 15px; height: 15px; animation: cue-bob 2.6s var(--ease) infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media print { .scroll-cue { display: none !important; } }

/* Patient reviews card (profile): links out to Doctoralia, never copies reviews in */
.reviews { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.5rem; align-items: start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid var(--blue-100); }
.reviews__icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-700); }
.reviews__body h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: .35rem 0 .6rem; }
.reviews__body p { max-width: 58ch; }
.reviews__stats { margin: .9rem 0 0; color: var(--ink-3); font-size: .95rem; }
.reviews__stats strong { color: var(--ink); font-size: 1.15rem; }
.reviews__body .btn { margin-top: 1.1rem; }
@media (max-width: 560px) { .reviews { grid-template-columns: 1fr; } .reviews__icon { width: 2.5rem; height: 2.5rem; } }

/* Profile: portrait photo beside a text block */
@media (min-width: 860px) { .split--photo { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: center; } }
.render--talk { max-width: 24rem; margin-inline: auto; }
.render--talk img { aspect-ratio: 724 / 1046; object-fit: cover; }

/* Profile hero facts: title + registration, area, languages; then education */
.profile-facts { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .9rem; }
.profile-facts p { margin: 0; }
.profile-facts__title { font-size: 1.1rem; color: var(--ink-2); }
.profile-facts__title strong { color: var(--ink); font-weight: 600; }
.profile-facts__area { margin-top: .2rem; padding: .3em .85em; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--blue-100); color: var(--blue-700); font-size: .92rem; font-weight: 500; }
.profile-facts__langs { font-size: .98rem; color: var(--ink-3); }
.profile-facts + .lead { margin-top: 1.3rem; }
.edu { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: color-mix(in srgb, var(--white) 65%, transparent); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); max-width: 36rem; }
.edu__label { margin: 0 0 .45rem; font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.edu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.edu__list li { position: relative; padding-left: 1.1rem; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.edu__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold-500); }

/* Services overview, events and blog */
.svc-card .badge { align-self: flex-start; margin-bottom: .7rem; }
.svc-card--static { cursor: default; background: color-mix(in srgb, var(--white) 55%, transparent); box-shadow: none; }
@media (hover: hover) { .svc-card--static:hover { transform: none; box-shadow: none; } }
.section__head--sub { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.empty { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); border: 2px dashed var(--sand-300); text-align: center; color: var(--ink-2); }
.empty p { margin: 0; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.event { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.event__date { font-weight: 600; color: var(--blue-700); }
.event__title { margin: 0; font-size: 1.1rem; }
.event__place { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-3); }
@media (max-width: 640px) { .event { grid-template-columns: 1fr; gap: .4rem; } }
.post-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.post-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; border-radius: var(--radius); background: var(--white); color: inherit; box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease); }
@media (hover: hover) { .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; } }
.post-card time { font-size: .82rem; color: var(--ink-3); }
.post-card h3 { margin: 0; }
.post-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.post-card .card__arrow { margin-top: auto; padding-top: .6rem; }

/* Team page: common reasons to start, as a compact bulleted grid */
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.issues li { position: relative; padding: .15rem 0 .15rem 1.4rem; font-size: 1.05rem; color: var(--ink-2); }
.issues li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold-500); }
.issues__more { margin: 1.8rem 0 0; font-weight: 600; }

/* Service pages: one card per professional who offers the service */
.prov-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.prov-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.2rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--sand-200) 70%, transparent); box-shadow: var(--shadow-sm); }
.prov-card__photo { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--sand-200), var(--blue-100)); }
.prov-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.prov-card__body p { margin: 0; }
.prov-card__name { margin: .1rem 0 .35rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.3rem; }
.prov-card__name a { color: var(--ink); }
.prov-card__meta { font-size: .9rem; color: var(--ink-2); }
.prov-card__body .prov-card__langs { margin-top: .2rem; font-size: .86rem; color: var(--ink-3); }
.prov-card__body .prov-card__price { margin-top: .6rem; color: var(--ink-3); font-size: .9rem; }
.prov-card__price strong { color: var(--ink); font-size: 1.15rem; }
.prov-card .btn-row { margin-top: 1rem; gap: .5rem; }
.prov-note { margin: 1.2rem 0 0; font-size: .88rem; color: var(--ink-3); }
@media (max-width: 520px) { .prov-card { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; } }