/* Self-hosted Google Fonts (SIL Open Font License, see assets/fonts/OFL-*.txt).
   Same files and @font-face rules Google served, Latin character sets only.
   Variable fonts: one file per family and character set covers every weight. */

/* Cormorant Garamond · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.a9e49ee5.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.74db058f.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;
}
/* Cormorant Garamond · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.a9e49ee5.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.74db058f.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;
}
/* Jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.2b2ae750.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.d3fc5b41.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;
}
/* Jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.2b2ae750.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.d3fc5b41.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;
}
/* Jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.2b2ae750.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.d3fc5b41.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;
}

/* QST Esthetics — colour tokens */
:root {
  /* Base palette */
  --aubergine: #4B285A;
  --aubergine-deep: #3B1F47; /* hover for primary buttons */
  --champagne-gold: #C4A263;
  --warm-ivory: #F5EFE6;
  --espresso: #241826;
  --soft-lilac: #D8C7E0;
  --white: #FFFFFF;

  /* Semantic aliases */
  --surface-page: var(--warm-ivory);
  --surface-card: var(--white);
  --surface-dark: var(--aubergine);
  --surface-tint: var(--soft-lilac);

  --text-body: var(--espresso);
  --text-heading: var(--aubergine);
  --text-on-dark: var(--warm-ivory);
  --text-accent-on-dark: var(--champagne-gold); /* large/decorative only */

  --accent-hairline: var(--champagne-gold); /* dividers, borders, ornament — never text on light */
  --border-card: rgba(196, 162, 99, 0.45);

  --link: var(--aubergine);
  --focus-ring: var(--aubergine);
}
/* QST Esthetics — spacing, radii, borders, shadow, motion */
:root {
  /* Spacing — generous whitespace is the luxury */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 140px;

  --section-pad: clamp(64px, 10vw, 140px);
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 48px);

  /* Radii — near-square, quiet */
  --radius-button: 2px;
  --radius-card: 4px;

  /* Hairlines — the signature gold thread */
  --hairline: 1px solid var(--champagne-gold);
  --hairline-fine: 0.5px solid var(--border-card);

  /* Shadow — minimal; cards rely on hairline + white surface */
  --shadow-card: 0 1px 2px rgba(36, 24, 38, 0.05);

  /* Motion — calm fades, no bounce */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-quick: 180ms; /* @kind other */
  --duration-gentle: 320ms; /* @kind other */
}

/* QST Esthetics — typography tokens
   Cormorant Garamond = headings · Jost 400/500 body/UI (300 only ≥16px) · WindSong = tagline ONLY */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-script: 'WindSong', cursive; /* "For Women. By Women." tagline only */

  /* Fluid scale */
  --text-h1: clamp(2.2rem, 5vw, 3.4rem);
  --text-h2: clamp(1.6rem, 3.5vw, 2.4rem);
  --text-h3: 1.4rem;
  --text-body-size: 1rem;
  --text-small: 0.8rem;

  --leading-body: 1.65;
  --leading-heading: 1.15;

  /* Eyebrow / label style */
  --tracking-label: 0.28em;
  --weight-body: 400;
  --weight-emphasis: 500;
  --weight-light: 300; /* Jost 300: only at 16px and larger */
  --weight-heading: 400;  /* Cormorant light–regular */
}

/* Global base + shared header/footer styles. Applies to all 20 pages.
   Page-specific CSS stays in each page's own <style> block. */

/* --- Tap targets (WCAG 2.5.5). Controls that must LOOK smaller keep a 44px
   target via this pseudo-element; never shrink the target. --qst-tap-gap
   widens the box horizontally where neighbours allow. --- */
.qst-tap{position:relative;touch-action:manipulation}
.qst-tap::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + var(--qst-tap-gap,12px));height:44px}

/* The mobile menu panel and overlay carry inline display values, which beat the
   UA stylesheet's [hidden]{display:none}. Without this they render over the page. */
[hidden]{display:none !important}

html{overflow-y:scroll}
body{margin:0;background:var(--warm-ivory,#F5EFE6);color:var(--espresso,#241826);font-family:var(--font-body,Jost,sans-serif);font-size:16px;line-height:1.7}
a{color:var(--aubergine,#4B285A);text-decoration:none}
a:hover{color:var(--aubergine,#4B285A);text-decoration:underline;text-underline-offset:4px}

/* --- Header --- */
.qst-navlinks{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.qst-navlinks a{white-space:nowrap}
.qst-burger{display:none}
@media (max-width:968px){.qst-navlinks{display:none}.qst-burger{display:inline-flex}}
.qst-sub{position:relative}
.qst-sub-left{flex-wrap:nowrap;white-space:nowrap;justify-content:center}
.qst-burger-social{display:none;align-items:center;gap:2px}
@media (max-width:968px){.qst-burger-social{display:inline-flex}}
@media (max-width:968px){.qst-social{display:none !important}}
@media (max-width:700px){
  .qst-sub{flex-direction:column;align-items:center;gap:0 !important;padding-top:4px !important;padding-bottom:10px !important}
  .qst-sub-left{flex-direction:column;align-items:center;gap:0 !important}
  .qst-sub-addr{white-space:nowrap}
}
.qst-logo{height:64px;min-width:200px;object-fit:contain;object-position:left}
@media (max-width:520px){.qst-logo{height:54px;min-width:0;max-width:200px}.qst-sub{font-size:12px}}
@media (max-width:430px){.qst-burger-social{display:none !important}.qst-logo{max-width:180px;min-width:132px}.qst-burger{gap:8px !important}.qst-burger-book{padding:3px 9px !important;letter-spacing:0.1em !important;font-size:12px !important}}

/* Mobile menu animations */
@keyframes qstMenuFade{from{opacity:0}to{opacity:1}}
@keyframes qstMenuSlide{from{transform:translateY(-10px)}to{transform:none}}
@keyframes qstMenuFadeSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes qstMenuReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes qstMenuFadeOut{from{opacity:1}to{opacity:0}}
@keyframes qstMenuSlideUp{from{transform:none}to{transform:translateY(-10px)}}
@keyframes qstMenuFadeSlideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
@keyframes qstMenuConceal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion: reduce){.qst-anim{animation:none !important}}

/* Announcement bar */
.qst-alert a{color:var(--warm-ivory,#F5EFE6);text-decoration:underline;text-underline-offset:3px}
.qst-alert a:hover{color:#fff;text-decoration:underline}
@media (max-width:520px){.qst-alert{padding-left:44px !important;padding-right:44px !important}}
@media (max-width:359px){.qst-alert{font-size:13px !important}}

/* Header interaction states (were style-hover / style-focus attributes) */
.qst-alert-close:hover{opacity:1}
.qst-alert-close:focus{outline:2px solid var(--champagne-gold);outline-offset:-4px}
.qst-navlink:hover{text-decoration:underline;color:var(--aubergine)}
.qst-btn-book:hover{background:#3A1F46;text-decoration:none;color:var(--warm-ivory)}
.qst-social-link:hover{color:var(--espresso)}
.qst-social-link:focus{outline:2px solid var(--aubergine)}
.qst-burger-btn:focus{outline:2px solid var(--aubergine)}
.qst-menu-close:hover{background:var(--champagne-gold);color:#fff}
.qst-menu-close:focus{outline:2px solid var(--aubergine)}
.qst-menu-cta:hover{background:#3A1F46;text-decoration:none;color:var(--warm-ivory,#F5EFE6)}
.qst-menu-cta:focus{outline:2px solid var(--aubergine);outline-offset:2px}
.qst-menu-social:hover{background:var(--champagne-gold);color:#fff}
.qst-menu-contact:hover{color:var(--aubergine)}

/* FAQ accordions (animated by assets/js/faq.js). While an answer animates
   closed its [open] attribute stays on until the motion ends, so turn the
   + icon back as soon as the close starts. */
details[data-closing] .qst-faq-ico,
details[data-closing] .qst-faq-plus{transform:none !important}

/* Skip link (was a style-focus attribute on every page) */
.qst-skip:focus{left:12px;top:12px;outline:2px solid var(--champagne-gold)}

/* --- Footer --- */
.qst-foot-logo{height:100px;object-fit:contain;object-position:left}
@media (max-width:520px){.qst-foot-logo{height:76px;max-width:240px}}
/* Tagline set to the footer logo's width: 19.1px spans the 202px logo. On
   phones the logo is 154px, which would need 14.6px; Jost 300 stays at 16px
   or above, so it runs slightly wider there. */
.qst-foot-tag{font-size:19.1px}
@media (max-width:520px){.qst-foot-tag{font-size:16px}}
/* Footer links: 32px rows by client decision (Oct 2026), tighter than the
   site-wide 44px tap-target rule; still above the WCAG 2.2 AA 24px minimum. */
.qst-foot-link{display:flex;align-items:center;box-sizing:border-box;min-height:32px;color:var(--warm-ivory,#F5EFE6);text-decoration:none}
.qst-foot-link:hover{color:var(--warm-ivory,#F5EFE6);text-decoration:underline;text-underline-offset:4px}
/* Logo left, link columns right, for as long as at least 64px separates them
   (column-gap). Below that the whole column group drops under the logo,
   left-aligned. The logo block grows to take up the slack, which pushes the
   columns right without margin-left:auto: that would keep them right-aligned
   after they wrap onto their own line. Never justify-content:space-between on
   the columns; it dumps the slack between them instead. flex:0 0 auto plus
   max-width:100% means the group wraps as a whole rather than squeezing its
   columns, and still fits a phone screen once it is on its own line. */
.qst-foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:64px;row-gap:clamp(36px,5vw,56px)}
.qst-foot-top > div:first-child{flex:1 0 auto}
.qst-foot-cols{display:flex;flex:0 0 auto;max-width:100%;flex-wrap:wrap;row-gap:28px;column-gap:48px}
.qst-foot-cols > div{flex:0 0 auto;white-space:nowrap}
@media (max-width:899px){.qst-foot-cols{column-gap:32px}}
@media (max-width:319px){.qst-foot-cols > div{flex:1 1 100%}}