/* woman + womb — site styles. Extracted from the single-page build; visual output unchanged. */

  html { scroll-behavior:smooth; }
  html, body { margin:0; padding:0; background:#FBF4E2; }
  body {
    --head: 'Bricolage Grotesque', sans-serif;
    --floatPlay: running;
    font-family: 'TT Commons Pro','TT Commons','Hanken Grotesk',sans-serif;
    color:#321813;
    -webkit-font-smoothing: antialiased;
  }
  a { color:#AA343E; text-decoration-color:#DCA4C4; text-underline-offset:3px; }
  a:hover { color:#321813; }
  ::selection { background:#FAE4ED; color:#AA343E; }
  input, textarea, button { font-family:inherit; }
  input::placeholder, textarea::placeholder { color:rgba(251,244,226,0.55); }
  input:focus, textarea:focus { outline:2px solid #FAE4ED; outline-offset:2px; }
  summary::-webkit-details-marker { display:none; }
  details[open] .faqmark { transform:rotate(45deg); }
  .noscrollbar::-webkit-scrollbar { display:none; }
  @keyframes floaty { 0%, 100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-16px) rotate(7deg); } }
  @keyframes marqueeX { from { transform:translateX(0); } to { transform:translateX(-50%); } }


body { --pink:#FAE4ED; --pink-ink:color-mix(in oklch, #FAE4ED 45%, #B0517B); }
details[open] summary { color:#AA343E; }
input::placeholder, textarea::placeholder { color:rgba(50,24,19,0.45); }
input[style*="color:#FBF4E2"]::placeholder, textarea[style*="color:#FBF4E2"]::placeholder { color:rgba(251,244,226,0.55); }

/* hover states (were inline style-hover attributes) */
.wh1:hover { color:#AA343E !important; }
.wh2:hover { background:#321813 !important; color:#FBF4E2 !important; }
.wh3:hover { background:#321813 !important; }
.wh4:hover { background:#DCA4C4 !important; color:#321813 !important; }
.wh5:hover { background:#AA343E !important; color:#FBF4E2 !important; }
.wh6:hover { transform:rotate(6deg) scale(1.04) !important; }
.wh7:hover { background:#FBF4E2 !important; color:#AA343E !important; }
.wh8:hover { background:#AA343E !important; color:#FAE4ED !important; }
.wh9:hover { color:#FBD4AC !important; }
.wh10:hover { transform:translateY(-4px) !important; color:#321813 !important; }

/* ---------- LARGE DESKTOP (>1440px): scale the whole layout with the
   viewport so the design always fills the screen, whatever its width ---------- */
@media (min-width: 1500px) { body { zoom: 1.02; } }
@media (min-width: 1650px) { body { zoom: 1.12; } }
@media (min-width: 1800px) { body { zoom: 1.22; } }
@media (min-width: 1950px) { body { zoom: 1.33; } }
@media (min-width: 2100px) { body { zoom: 1.43; } }
@media (min-width: 2250px) { body { zoom: 1.53; } }
@media (min-width: 2400px) { body { zoom: 1.63; } }
@media (min-width: 2550px) { body { zoom: 1.73; } }
@media (min-width: 2700px) { body { zoom: 1.84; } }
@media (min-width: 2850px) { body { zoom: 1.94; } }
@media (min-width: 3000px) { body { zoom: 2.04; } }

/* ===================== RESPONSIVE ADDITIONS (v2) =====================
   Desktop (>1024px) renders identically — every rule below lives in a
   max-width media query or is a no-op at desktop sizes.
   NOTE: attribute selectors include both "prop:value" and "prop: value"
   forms because the runtime serialises inline styles with a space. */
html, body { overflow-x: clip; }

/* ---------- TABLET (<=1024px): giant script wordmark scales down so the
   full phrase stays on screen instead of clipping at both edges ---------- */
@media (max-width: 1024px) {
  .ww-script-wm { font-size: 19vw !important; }
}

/* ---------- MOBILE (<=767px) ---------- */
@media (max-width: 767px) {
  /* Multi-column grids collapse to one column, in source (reading) order */
  section[style*="grid-template-columns"], div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* ...EXCEPT rotated NEW/EXISTING CLIENTS label rows — label stays beside content */
  div[style*="grid-template-columns:auto 1fr"], div[style*="grid-template-columns: auto 1fr"] { grid-template-columns: auto 1fr !important; }
  /* Media never wider than the screen */
  img, svg, video { max-width: 100%; }
  h1, h2, h3 { overflow-wrap: break-word; }
  /* Script wordmark: fit the whole phrase at phone widths */
  .ww-script-wm { font-size: 17vw !important; }
  /* Tall photo panels capped so pages don't feel endless */
  div[style*="min-height:540px"], div[style*="min-height: 540px"],
  div[style*="min-height:560px"], div[style*="min-height: 560px"] { min-height: 420px !important; }
  img[style*="min-height:480px"], img[style*="min-height: 480px"] { min-height: 0 !important; height: 340px !important; }
  /* Mobile-only CTA block (display:none inline at desktop) */
  .ww-mobile-cta { display: flex !important; }
  /* Footer: one clean left-aligned stack, logo block on top */
  footer div[style*="wrap-reverse"] { flex-direction: column-reverse !important; }
  footer div[style*="align-items:flex-end"], footer div[style*="align-items: flex-end"] { align-items: flex-start !important; text-align: left !important; margin-left: 0 !important; }
  footer a { padding-top: 8px; padding-bottom: 8px; }
  /* --- Hamburger navigation --- */
  .ww-nav-links, .ww-nav-cta { display: none !important; }  /* hide desktop links + pill */
  .ww-nav-burger { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; }
  .ww-nav-check:checked ~ .ww-nav-overlay { display: flex !important; }  /* checkbox opens overlay */
  body:has(.ww-nav-check:checked) { overflow: hidden; }  /* lock scroll behind overlay */
  .ww-nav-overlay { position: fixed; inset: 0; z-index: 120; background: #FBF4E2; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 72px 24px 48px; overflow: auto; }
  .ww-nav-overlay a { font-size: 19px !important; padding: 12px 20px !important; min-height: 44px; display: flex !important; align-items: center; justify-content: center; }
  .ww-nav-overlay a[style*="border-radius:999px"], .ww-nav-overlay a[style*="border-radius: 999px"] { margin-top: 20px; padding: 16px 36px !important; font-size: 15px !important; }
  .ww-nav-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
}