/* ==========================================================================
   Wellness4Workers
   Hand-written static site. No build step, no framework, no dependencies.

   The design prototype in /design-reference computed every breakpoint in
   JavaScript from window.innerWidth. That is reproduced here as real media
   queries, which is both correct and more robust: on mobile browsers
   innerWidth reports the OVERFLOWED content width whenever a page is wider
   than the viewport, so a JS breakpoint can read its own overflow and latch
   onto the desktop layout. CSS has no such failure mode.
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------- */
  --canvas: #F5F3EF;
  --surface: #FFFFFF;
  --surface-alt: #EFEDE7;
  --field: #FBFAF7;
  --ink: #15181A;
  --ink-600: #4A5155;
  --ink-500: #565D61;
  --ink-400: #7A817F;
  --ink-300: #9A9F9C;
  --border: #E4E0D8;
  --border-strong: #D8D4CB;
  --accent: #B02A2A;
  --accent-dark: #8A2020;
  --accent-tint: #F7E5E3;
  --accent-300: #E09A94;
  --dark-border: #2C3134;

  /* Responsive grid tracks. These replace the sixCols / quadCols / stepCols
     holes in the prototype. Mobile-first: one column unless told otherwise. */
  --cols-6: repeat(1, minmax(0, 1fr));
  --cols-4: repeat(1, minmax(0, 1fr));
  --cols-5: repeat(1, minmax(0, 1fr));

  /* Scroll reveal. Content is VISIBLE by default and only hidden once
     js/site.js has confirmed IntersectionObserver support and added
     .reveal-on to <html>. Fail-open on purpose: a script that fails to load,
     is blocked, or throws leaves a readable page rather than a blank one.
     Per-element transition delays stay inline, so the stagger is unchanged. */
  --rv-o: 1;
  --rv-t: none;
  --rv-b: none;

  /* Service card hover, resting state. */
  --card-lift: translateY(0);
  --card-border: #E4E0D8;
  --card-shadow: 0 0 0 rgba(21, 24, 26, 0);
  --card-icon: translateY(0) scale(1);
  --card-arrow-o: 0;
  --card-arrow-x: translateX(-8px);

  /* Side panels only stick when there is a second column beside them. */
  --side-pos: static;

  /* Hero */
  --hero-min: min(84vh, 620px);
  --hero-pad: 40px 24px 52px;
  --hero-pos: 62% 40%;
  --hero-scrim: linear-gradient(180deg, rgba(15,17,19,0.55) 0%, rgba(15,17,19,0.4) 35%, rgba(15,17,19,0.86) 78%, rgba(15,17,19,0.95) 100%);

  /* Footer bottom strip clears the fixed mobile action bar. */
  --foot-pad: 24px 24px 110px;
}

@media (min-width: 560px)  { :root { --cols-4: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 620px)  { :root { --cols-6: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { :root { --cols-5: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px)  {
  :root {
    --hero-pos: 68% 50%;
    --hero-scrim: linear-gradient(90deg, rgba(15,17,19,0.92) 0%, rgba(15,17,19,0.82) 34%, rgba(15,17,19,0.45) 58%, rgba(15,17,19,0.12) 82%, rgba(15,17,19,0.05) 100%);
  }
}
@media (min-width: 1000px) {
  :root {
    --side-pos: sticky;
    --hero-min: 84vh;
    --hero-pad: clamp(90px, 9vw, 120px) 28px clamp(80px, 9vw, 110px);
    --foot-pad: 24px 24px 40px;
  }
}
@media (min-width: 1060px) { :root { --cols-4: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { :root { --cols-5: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1000px) { :root { --cols-6: repeat(3, minmax(0, 1fr)); } }

/* Base ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: Karla, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: Archivo, system-ui, sans-serif; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
p, li, h1, h2, h3, h4, h5, span, a { overflow-wrap: break-word; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
/* The UA stylesheet gives [hidden] display:none at the lowest precedence, so any
   element carrying an inline display (most of this design does) ignores it.
   Everything that toggles visibility with .hidden depends on this rule. */
[hidden] { display: none !important; }
::selection { background: #F5D6D2; }

/* A white inner ring keeps the brand-red outline legible on the dark and
   accent sections as well as on the canvas. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px #FFFFFF; }

/* Stripe pins its buy-button iframe to exactly 288px and defaults the custom
   element to display:inline, which escapes any container it is put in. */
stripe-buy-button { display: block; max-width: 100%; }

/* Hover states lifted from the prototype's style-hover attributes ----------- */
.hov-tint:hover        { background: #EAE7E0 !important; color: #15181A !important; }
.hov-ink-invert:hover  { background: #15181A !important; color: #F5F3EF !important; }
.hov-accent:hover      { background: #B02A2A !important; color: #FFFFFF !important; }
.hov-accent-fill:hover { background: #B02A2A !important; border-color: #B02A2A !important; color: #FFFFFF !important; }
.hov-ghost-light:hover { border-color: #FFFFFF !important; background: rgba(255,255,255,0.1) !important; color: #FFFFFF !important; }
.hov-accent-tint:hover { background: #F7E5E3 !important; color: #8A2020 !important; }
.hov-border-light:hover{ border-color: #FFFFFF !important; color: #FFFFFF !important; }
.hov-ink:hover         { background: #15181A !important; color: #FFFFFF !important; }
.hov-border-ink:hover  { border-color: #15181A !important; }
.hov-accent-bg:hover   { background: #B02A2A !important; }
.hov-ink-text:hover    { color: #15181A !important; }
.hov-accent-300:hover  { border-color: #E09A94 !important; color: #E09A94 !important; }
.hov-white-text:hover  { color: #FFFFFF !important; }

/* Service cards: the prototype tracked hover in React state, which is a job
   CSS does better. The icon stroke has to live here because a presentation
   attribute cannot resolve a custom property. */
[data-card] svg { stroke: var(--ink); transition: stroke 260ms ease; }
[data-card]:hover {
  --card-lift: translateY(-6px);
  --card-border: #B02A2A;
  --card-shadow: 0 20px 36px -20px rgba(21, 24, 26, 0.38);
  --card-icon: translateY(-3px) scale(1.1);
  --card-arrow-o: 1;
  --card-arrow-x: translateX(0);
}
[data-card]:hover svg { stroke: var(--accent); }

/* Scroll reveal ------------------------------------------------------------ */
.reveal-on [data-reveal]     { --rv-o: 0; --rv-t: translateY(22px); --rv-b: translateY(34px); }
.reveal-on [data-reveal].in  { --rv-o: 1; --rv-t: none; --rv-b: none; }

/* Header ------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header__row { max-width: 1240px; margin: 0 auto; padding: 12px 24px; min-height: 74px; display: flex; align-items: center; gap: 16px; }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 38px; width: auto; mix-blend-mode: multiply; }

.nav-burger {
  margin-left: auto; width: 46px; height: 46px; border-radius: 10px;
  border: 1.5px solid #D3CFC6; background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0;
}
.nav-burger span { width: 20px; height: 2px; background: var(--ink); display: block; transition: transform 220ms ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: scaleX(0); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-desktop { display: none; align-items: center; gap: 4px; margin-left: auto; }
.nav-desktop a { padding: 10px 11px; border-radius: 8px; color: #3C4348; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-desktop a[aria-current="page"] { background: #EAE7E0; color: var(--ink); }
.nav-cta { display: none; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-drawer {
  display: none; border-top: 1px solid var(--border); background: var(--surface); padding: 14px 24px 22px;
  /* taller than a phone in landscape, and it sits inside a sticky header, so
     it has to scroll itself or its lower edge can never be reached */
  max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-drawer.open { display: block; }
.nav-drawer nav { display: flex; flex-direction: column; }
.nav-drawer nav a { padding: 15px 4px; font-size: 18px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); }
.nav-drawer nav a:last-child { border-bottom: 0; }

/* The desktop header needs about 970px of content width. Switching at 1000
   leaves headroom so it can never overflow at the seam. */
@media (min-width: 1000px) {
  .nav-burger { display: none; }
  .nav-desktop, .nav-cta { display: flex; }
  .nav-drawer, .nav-drawer.open { display: none; }
}

/* Fixed mobile action bar -------------------------------------------------- */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.action-bar a { padding: 15px; border-radius: 11px; font-size: 16px; font-weight: 700; text-align: center; }
.action-bar__primary { background: var(--ink); color: #FFFFFF; }
.action-bar__secondary { border: 1.5px solid var(--ink); color: var(--ink); }
/* Hidden while the hero's own CTAs are on screen, so the two never duplicate. */
.action-bar.is-hidden { display: none; }
@media (min-width: 1000px) { .action-bar { display: none; } }

/* Newsletter + footer ------------------------------------------------------ */
.newsletter__row { max-width: 1240px; margin: 0 auto; padding: clamp(44px, 5.5vw, 64px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: center; }
.site-footer__bottom { max-width: 1240px; margin: 0 auto; padding: var(--foot-pad); border-top: 1px solid var(--dark-border); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Motion ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal-on [data-reveal] { --rv-o: 1; --rv-t: none; --rv-b: none; }
}

/* Impact survey ------------------------------------------------------------ */
:root { --sv-scale-cols: repeat(6, minmax(0, 1fr)); }
@media (min-width: 620px) { :root { --sv-scale-cols: repeat(11, minmax(0, 1fr)); } }

.sv-opt { transition: border-color 150ms ease, background 150ms ease, transform 150ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.sv-opt:hover { border-color: #B02A2A !important; background: #F7E5E3 !important; transform: translateX(3px); }
.sv-opt:active { transform: translateX(3px) scale(0.995); }
.sv-num { transition: border-color 150ms ease, background 150ms ease; }
.sv-num:hover { border-color: #B02A2A !important; }

#sv-question:not([hidden]) { animation: sv-in 420ms cubic-bezier(0.16, 0.84, 0.24, 1) both; }
@keyframes sv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #sv-question:not([hidden]) { animation: none; } }