/* ==========================================================================
   Gynae Solution — shared styles
   Single source of truth for tokens. design-system.html documents everything
   in here. Page-specific CSS lives in css/<page>.css.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand: coral from the logo mark */
  --coral:#EF8F99;
  --coral-mid:#E1707C;
  --coral-deep:#B33F4E;   /* accessible on light grounds: links, eyebrows */
  --coral-ink:#8C2E3B;    /* hover / pressed */
  --coral-tint:#FCEDEE;
  --coral-tile:#F9E1E4;
  --coral-08:rgba(239,143,153,.08);
  --coral-20:rgba(239,143,153,.20);
  --coral-40:rgba(239,143,153,.40);

  /* Neutrals: one deep warm neutral for text, warm off-white ground */
  --ink:#2A2126;
  --ink-2:#5C4F55;
  --ink-3:#877478;
  --bg:#FDF9F7;
  --surface:#FFFFFF;
  --surface-2:#F7EFEC;
  --border:#E9DDD9;
  --border-light:#F1E8E4;

  /* Deep band (footer, dark sections) */
  --deep:#33262B;
  --deep-2:#241A1E;
  --on-deep:#FBF3F1;
  --on-deep-2:#CFBDBF;

  /* Feedback */
  --danger:#B3364A;
  --danger-bg:#FCEEF0;
  --success:#2F6B52;
  --success-bg:#EAF4EF;
  --amber:#8A5A16;
  --amber-bg:#FBF1E2;

  /* Radii: soft, pill-forward */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(42,33,38,.05), 0 2px 8px -4px rgba(42,33,38,.08);
  --shadow-md:0 4px 10px -4px rgba(42,33,38,.10), 0 14px 30px -18px rgba(42,33,38,.18);
  --shadow-lg:0 10px 24px -12px rgba(42,33,38,.16), 0 30px 60px -30px rgba(42,33,38,.24);
  --shadow-overlay:0 12px 34px -10px rgba(42,33,38,.24);
  --ring:0 0 0 3px var(--coral-40);

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Type */
  --font-head:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap:1360px;
  --gutter:clamp(20px, 5vw, 64px);
  --section-y:clamp(56px, 9vw, 112px);
}

[data-theme="dark"]{
  --coral:#F0A0A9;
  --coral-mid:#E88F99;
  --coral-deep:#F2A9B1;
  --coral-ink:#F8C7CC;
  --coral-tint:#2E2126;
  --coral-tile:#3A2A2F;
  --coral-08:rgba(240,160,169,.10);
  --coral-20:rgba(240,160,169,.22);
  --coral-40:rgba(240,160,169,.42);

  --ink:#F7EFEC;
  --ink-2:#C9B8B4;
  --ink-3:#9D8B89;
  --bg:#1B1418;
  --surface:#241B1F;
  --surface-2:#2C2227;
  --border:#3B2F34;
  --border-light:#332830;

  --deep:#150F12;
  --deep-2:#0F0A0C;
  --on-deep:#F7EFEC;
  --on-deep-2:#C9B8B4;

  --danger:#F0919F;
  --danger-bg:#3A2226;
  --success:#8FCFAF;
  --success-bg:#1F3129;
  --amber:#E0B472;
  --amber-bg:#33271A;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px -6px rgba(0,0,0,.55);
  --shadow-lg:0 18px 44px -18px rgba(0,0,0,.7);
  --shadow-overlay:0 14px 40px -12px rgba(0,0,0,.75);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--coral-20)}

/* ---------- Type scale ---------- */
h1,h2,h3{font-family:var(--font-head); font-weight:500; color:var(--ink); margin:0 0 .5em; text-wrap:pretty}
h1{font-size:clamp(36px,5.6vw,64px); line-height:1.06; letter-spacing:-.015em}
h2{font-size:clamp(28px,4vw,44px); line-height:1.14; letter-spacing:-.01em}
h3{font-size:clamp(22px,2.6vw,30px); line-height:1.24}
h4{font-family:var(--font-body); font-size:20px; font-weight:700; line-height:1.35; margin:0 0 .5em; color:var(--ink)}
h5{font-family:var(--font-body); font-size:17px; font-weight:700; line-height:1.4; margin:0 0 .4em}
h6,.eyebrow{
  font-family:var(--font-body); font-size:13px; font-weight:800; line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep); margin:0 0 .8em;
}
p{margin:0 0 1.1em; text-wrap:pretty}
.lead{font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--ink-2)}
.small{font-size:14px; line-height:1.6; color:var(--ink-2)}
.measure{max-width:62ch}
strong{font-weight:700}

/* ---------- Links ---------- */
a{color:var(--coral-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; transition:color .15s ease}
a:hover{color:var(--coral-ink); text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--coral-deep); outline-offset:2px; border-radius:4px;
}
.link-plain{text-decoration:none}
.link-plain:hover{text-decoration:underline}
.link-arrow{display:inline-flex; min-height:44px; align-items:center; gap:8px; font-weight:700; text-decoration:none}
.link-arrow svg{transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Layout helpers ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--surface-2)}
.section--coral{background:var(--coral-tint)}
.section--deep{background:var(--deep); color:var(--on-deep)}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:var(--on-deep)}
.section--deep p{color:var(--on-deep-2)}
.section--deep .eyebrow{color:var(--coral)}
.stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.row{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center}
.grid{display:grid; gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.split{display:grid; gap:clamp(28px,5vw,72px); align-items:center; grid-template-columns:1fr}
@media (min-width:900px){ .split{grid-template-columns:1.05fr .95fr} }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--coral); --btn-fg:var(--ink); --btn-bd:var(--coral);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 26px;
  font-family:var(--font-body); font-size:16px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  border-radius:var(--radius-pill);
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover{background:var(--coral-mid); border-color:var(--coral-mid); color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0); background:var(--coral-ink); border-color:var(--coral-ink); color:#fff; box-shadow:none}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn[disabled],.btn.is-disabled{background:var(--surface-2); border-color:var(--border); color:var(--ink-3); cursor:not-allowed; transform:none; box-shadow:none}

.btn--secondary{--btn-bg:transparent; --btn-fg:var(--coral-deep); --btn-bd:var(--coral-40)}
.btn--secondary:hover{background:var(--coral-tint); border-color:var(--coral); color:var(--coral-ink)}
.btn--secondary:active{background:var(--coral-tile)}

.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent; padding-inline:14px}
.btn--ghost:hover{background:var(--surface-2); border-color:transparent; color:var(--ink); box-shadow:none}

.btn--on-deep{--btn-bg:#fff; --btn-fg:var(--deep); --btn-bd:#fff}
.btn--on-deep:hover{background:var(--coral-tint); border-color:var(--coral-tint); color:var(--deep)}

.btn--sm{min-height:40px; padding:8px 18px; font-size:15px}
.btn--lg{min-height:56px; padding:16px 34px; font-size:17px}
.btn--block{width:100%}

/* ---------- Pills / tags ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--coral-deep); background:var(--coral-tint);
  border:1px solid var(--coral-20); border-radius:var(--radius-pill); padding:5px 12px;
}
.tag--neutral{color:var(--ink-2); background:var(--surface-2); border-color:var(--border)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:var(--sp-3)}
.card--link:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--coral-40)}
.card__icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  background:var(--coral-tile); border:1px solid var(--coral-20);
  display:grid; place-items:center; color:var(--coral-deep); flex:none;
}
.card__media{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; aspect-ratio:16/10}
.card__media img,.card__media svg{width:100%; height:100%; object-fit:cover}
.card p{color:var(--ink-2); margin:0}
.card--quote{background:var(--surface-2); border-color:transparent}
.card--quote blockquote{margin:0; font-family:var(--font-head); font-size:clamp(19px,2.2vw,25px); line-height:1.45; color:var(--ink)}
.card--quote cite{display:block; margin-top:var(--sp-4); font-family:var(--font-body); font-style:normal; font-size:14px; font-weight:700; color:var(--ink-2)}

/* Image placeholder (used until real photography is supplied) */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--coral-08) 0 10px, transparent 10px 20px),
    var(--surface-2);
  border:1px dashed var(--coral-40); border-radius:var(--radius-lg);
  display:grid; place-items:center; min-height:180px; padding:var(--sp-4);
}
.ph span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; letter-spacing:.04em;
  color:var(--ink-3); text-align:center; text-transform:uppercase;
}

/* ---------- Form controls ---------- */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:var(--sp-4)}
.field label{font-size:14px; font-weight:700; color:var(--ink)}
.field .hint{font-size:13px; color:var(--ink-3)}
.input,.textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px 15px; min-height:48px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{min-height:132px; resize:vertical; line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.textarea:hover{border-color:var(--coral-40)}
.input:focus,.textarea:focus{outline:none; border-color:var(--coral); box-shadow:var(--ring)}
.input.is-invalid,.textarea.is-invalid{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg)}
.field .error{font-size:13px; font-weight:700; color:var(--danger)}
.field--inline{flex-direction:row; align-items:center; gap:10px; min-height:44px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Custom select / dropdown — required style for every picker. Never a raw <select>. */
.cselect{position:relative; width:100%}
.cselect__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px 44px 13px 15px; min-height:48px; text-align:left; cursor:pointer;
  color:var(--ink-3); transition:border-color .15s ease, box-shadow .15s ease;
}
.cselect__trigger:hover{border-color:var(--coral-40)}
.cselect__trigger:focus-visible{outline:none; border-color:var(--coral); box-shadow:var(--ring)}
.cselect.is-filled .cselect__trigger{color:var(--ink); font-weight:600}
.cselect.is-invalid .cselect__trigger{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg)}
.cselect__chev{position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--coral-deep); pointer-events:none; transition:transform .2s ease}
.cselect.is-open .cselect__chev{transform:translateY(-50%) rotate(180deg)}
.cmenu{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  margin:0; padding:6px; list-style:none;
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-md);
  box-shadow:var(--shadow-overlay); max-height:300px; overflow:auto;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.cselect.is-open .cmenu{opacity:1; transform:translateY(0); pointer-events:auto}
.cmenu__opt{padding:10px 12px; border-radius:var(--radius-sm); font-size:16px; cursor:pointer; color:var(--ink)}
.cmenu__opt.is-active,.cmenu__opt:hover{background:var(--coral-tile); color:var(--coral-ink)}
.cmenu__opt[aria-selected="true"]{font-weight:700; color:var(--coral-deep)}
.cselect__native{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- Site header / nav ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-light)}
/* Same reason as the footer: the interim logo's white cut-outs need a light ground. */
[data-theme="dark"] .site-header{background:rgba(255,255,255,.94); border-bottom-color:#E9DDD9}
[data-theme="dark"] .nav a{color:#2A2126}
[data-theme="dark"] .nav a:hover{background:#FCEDEE; color:#8C2E3B}
[data-theme="dark"] .nav a[aria-current="page"]{color:#B33F4E}
[data-theme="dark"] .nav-toggle{background:#fff; border-color:#E9DDD9; color:#2A2126}
.site-header__inner{display:flex; align-items:center; gap:var(--sp-4); min-height:76px}
.brand{display:flex; flex:none; min-height:44px; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.brand img{height:38px; width:auto}
.nav{display:none; margin-left:auto; align-items:center; gap:4px}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; border-radius:var(--radius-pill);
}
.nav a:hover{background:var(--coral-tint); color:var(--coral-ink)}
.nav a[aria-current="page"]{color:var(--coral-deep); font-weight:700}
.nav-toggle{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); cursor:pointer}
/* Full nav from 1260px: below that its 1016px of links crowd the logo, so tablets and small laptops get the menu button. */
@media (min-width:1260px){ .nav{display:flex} .nav-toggle{display:none} .mobile-menu.is-open{display:none} }
.mobile-menu{position:fixed; inset:76px 0 0; z-index:55; background:var(--bg); padding:var(--sp-5) var(--gutter); overflow:auto; display:none}
.mobile-menu.is-open{display:block}
.mobile-menu__nav{display:flex; flex-direction:column; gap:2px}
.mobile-menu__nav a{display:flex; align-items:center; min-height:52px; padding:0 12px; font-size:18px; font-weight:600; color:var(--ink); text-decoration:none; border-radius:var(--radius-md)}
.mobile-menu__nav a:hover{background:var(--surface-2)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface); color:var(--ink-2); padding-block:var(--sp-8) var(--sp-5); border-top:1px solid var(--border-light)}
.site-footer h5{color:var(--ink); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--sp-4)}
.site-footer a{color:var(--ink-2); text-decoration:none}
.site-footer a:hover{color:var(--coral-deep); text-decoration:underline}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; font-size:15px}
.site-footer ul a,.site-footer__base a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.site-footer ul li:not(:has(a)){padding-block:10px}
.site-footer__grid{display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.site-footer__base{margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--border-light); font-size:13px; display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between}
/* The footer stays white in both themes: the interim logo has white cut-outs
   inside the G and S, which show as gaps on any dark ground. */
[data-theme="dark"] .site-footer{background:#fff; color:#5C4F55; border-top-color:#E9DDD9}
[data-theme="dark"] .site-footer h5{color:#2A2126}
[data-theme="dark"] .site-footer a{color:#5C4F55}
[data-theme="dark"] .site-footer a:hover{color:#B33F4E}
[data-theme="dark"] .site-footer__base{border-top-color:#F1E8E4}
.site-footer__credit{margin:var(--sp-3) 0 0; font-size:13px; text-align:center; color:#5C4F55}
.site-footer__credit a{color:inherit; text-decoration:none}
.site-footer__credit a:hover{color:#B33F4E; text-decoration:underline; text-underline-offset:3px}
[data-theme="dark"] .site-footer .small,[data-theme="dark"] .site-footer p,[data-theme="dark"] .site-footer li{color:#5C4F55}

/* ---------- Patient pathway rail ---------- */
.pathway{display:grid; gap:var(--sp-6)}
.process-rail{position:relative}
.process-rail__track{position:absolute; left:0; right:0; top:21px; height:3px; background:var(--border); border-radius:2px}
.process-rail__fill{position:absolute; left:0; top:21px; height:3px; width:0; background:var(--coral); border-radius:2px; transition:width .45s cubic-bezier(.4,0,.2,1)}
.process-steps{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-3); list-style:none; margin:0; padding:0}
@media (max-width:760px){
  .process-rail__track,.process-rail__fill{display:none}
  .process-steps{grid-auto-flow:row; grid-auto-columns:auto}
}
.step{background:none; border:0; padding:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:10px; min-height:44px}
.step__dot{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:15px;
  background:var(--surface); color:var(--ink-3); border:2px solid var(--border);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.step__label{font-size:15px; font-weight:700; color:var(--ink-3); transition:color .2s ease}
.step.is-done .step__dot{background:var(--coral-tile); border-color:var(--coral-40); color:var(--coral-deep)}
.step.is-done .step__label{color:var(--ink-2)}
.step.is-active .step__dot{background:var(--coral); border-color:var(--coral); color:#fff; transform:scale(1.06)}
.step.is-active .step__label{color:var(--ink)}
.step:focus-visible .step__dot{box-shadow:var(--ring)}
@media (max-width:760px){ .step{flex-direction:row; align-items:center; gap:14px} }
.process-detail{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-xl); padding:clamp(24px,4vw,44px); box-shadow:var(--shadow-sm); transition:opacity .28s ease}
.process-detail.is-fading{opacity:0}
.process-nav{display:flex; gap:10px; justify-content:flex-end}
.process-nav button{width:48px; height:48px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.process-nav button:hover{border-color:var(--coral); color:var(--coral-deep); background:var(--coral-tint)}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:80px; height:44px; padding:4px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:space-between;
}
.theme-toggle svg{width:16px; height:16px; margin-inline:7px; color:var(--ink-3); position:relative; z-index:1}
.theme-toggle__thumb{
  position:absolute; top:3px; left:4px; width:36px; height:36px; border-radius:50%;
  background:var(--coral); transition:transform .26s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .theme-toggle__thumb{transform:translateX(36px)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ---------- Utilities ---------- */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--coral-deep); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius-md) 0; z-index:100; text-decoration:none}
.skip-link:focus{left:0}
.center{text-align:center}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}

/* ============================================================
   COOKIE CONSENT, ported from membership project, rebranded to 2xN.
   Panel stays dark in both site themes (reads as intentional chrome).
   ============================================================ */
.cookie {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(1rem, 4vw, 2rem);
  pointer-events: none;
}
.cookie[hidden] { display: none; }
.cookie--modal { align-items: center; justify-content: center; }

.cookie__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 5, 24, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
  animation: cookieFadeIn 0.26s ease both;
  pointer-events: auto;
}
@keyframes cookieFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cookie__backdrop[hidden] { display: none; }

.cookie__panel {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  background: var(--bg-dark-2);
  color: var(--text-on-dark);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 70px -24px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(168, 85, 247, 0.06);
  padding: 1.6rem 1.6rem 1.5rem;
  transform: none;
  opacity: 1;
}
.cookie--modal .cookie__panel { max-width: 540px; }
.cookie.is-in .cookie__panel { animation: cookiePanelIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cookie.is-out .cookie__panel { animation: cookiePanelOut 0.22s ease forwards; }
.cookie.is-out .cookie__backdrop { animation: cookieFadeOut 0.22s ease both; }

@keyframes cookiePanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cookiePanelOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
@keyframes cookieFadeOut { from { opacity: 1; } to { opacity: 0; } }

.cookie__view--banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 1rem;
}
.cookie__view[hidden] { display: none !important; }

.cookie__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--purple-bright);
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.1);
}
.cookie__icon svg { width: 21px; height: 21px; }
.cookie__body { min-width: 0; }

.cookie__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin: 0 0 0.35rem;
}
.cookie__copy {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.cookie__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.cookie__btn {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cookie__btn--primary {
  background: var(--purple);
  color: #fff;
  flex: 1;
  min-width: 120px;
}
.cookie__btn--primary:hover { background: var(--purple-bright); transform: translateY(-1px); }
.cookie__btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.2);
  flex: 1;
  min-width: 110px;
}
.cookie__btn--ghost:hover { border-color: var(--purple); color: var(--purple-bright); }
.cookie__btn--text {
  background: transparent;
  color: var(--text-on-dark-muted);
  padding-left: 0.2rem; padding-right: 0.2rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.cookie__btn--text:hover { color: var(--purple-bright); }

.cookie__prefs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.cookie__close {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: border-color 0.2s ease;
}
.cookie__close:hover { border-color: var(--purple); }
.cookie__close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.4px;
  background: var(--text-on-dark-muted);
}
.cookie__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cookie__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.cookie__cats {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cookie__cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cookie__cat:first-child { border-top: none; }
.cookie__cat-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 0.2rem;
}
.cookie__cat-desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}
.cookie__always {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple-bright);
  white-space: nowrap;
  margin-top: 0.15rem;
}

.cookie__switch {
  position: relative;
  flex: none;
  width: 44px; height: 24px;
  margin-top: 0.1rem;
  cursor: pointer;
}
.cookie__switch input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.cookie__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.cookie__track::after {
  content: '';
  position: absolute;
  top: 50%; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease;
}
.cookie__switch input:checked ~ .cookie__track { background: var(--purple); border-color: var(--purple); }
.cookie__switch input:checked ~ .cookie__track::after { transform: translateY(-50%) translateX(20px); background: #fff; }
.cookie__switch input:focus-visible ~ .cookie__track { outline: 2px solid var(--purple-bright); outline-offset: 2px; }

.cookie__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cookie__actions--prefs { margin-top: 1.4rem; }

@media (max-width: 540px) {
  .cookie { padding: 0.9rem; }
  .cookie__panel { max-width: none; }
  .cookie__actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie__btn--text { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie__panel,
  .cookie.is-in .cookie__panel,
  .cookie__backdrop,
  .cookie__track,
  .cookie__track::after { animation: none; transition: none; }
}

/* ---------- Cookie consent: brand mapping for Gynae Solution ----------
   The block above is copied from the 2xN kit unchanged. This maps its variables
   to the brand and replaces the literal purples it carries. Fixed hex rather
   than theme tokens, because the panel stays dark in both themes. */
.cookie{
  --purple:#B33F4E;
  --purple-bright:#EF8F99;
  --bg-dark-2:#241A1E;
  --text-on-dark:#FBF3F1;
  --text-on-dark-muted:#CFBDBF;
  --font:var(--font-body);
}
.cookie__backdrop{background:rgba(36,26,30,.6)}
.cookie__panel{border-color:rgba(239,143,153,.22); box-shadow:0 28px 70px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(239,143,153,.06)}
.cookie__icon{border-color:rgba(239,143,153,.3); background:rgba(239,143,153,.1)}
.cookie__title{font-family:var(--font-head); font-weight:500; font-size:1.35rem}
.cookie__copy,.cookie__cat-desc{font-size:1rem}
.cookie__btn{min-height:44px; font-size:.95rem; cursor:pointer}
.cookie__btn--primary:hover{background:#8C2E3B}

/* ---------- Mobile type floor: 16px body text under 768px ---------- */
@media (max-width:767px){
  .small,.site-footer ul,.site-footer__base,.site-footer__credit,.card--quote cite,.field label,.field .hint,.field .error{font-size:16px}
}