:root{
  --olive: #767F46;
  --olive-deep: #454B29;
  --olive-ink: #2E331C;
  --gold: #F6BE44;
  --gold-soft: #FBDA9B;
  --cream: #FBF8F0;
  --cream-soft: #F1EBDA;
  --line: rgba(46,51,28,0.12);
  --shadow: 0 24px 60px rgba(46,51,28,0.16);
  --header-h: 74px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ font-family:'Work Sans', sans-serif; color:var(--olive-ink); background:var(--cream); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{padding:100px 0;}
.icon{width:1em; height:1em; display:inline-block; vertical-align:-0.15em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- NAV ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(251,248,240,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); height:var(--header-h); display:flex; align-items:center; }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{height:44px; width:auto;}
.brand span{font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600; color:var(--olive-deep);}
.navlinks{display:flex; gap:30px; font-size:0.93rem;}
.navlinks a{opacity:0.75; transition:opacity .2s; color:var(--olive-ink); padding:6px 0; border-bottom:2px solid transparent;}
.navlinks a:hover{opacity:1;}
.navlinks a[aria-current="page"]{opacity:1; border-bottom-color:var(--gold);}
.nav-actions{display:flex; gap:12px; align-items:center;}
/* Header-only: shrink the For Workplaces / Book a session buttons so
   their height roughly matches the 44px logo mark next to them --
   they were visibly taller than the logo and crowded it. Scoped to
   .nav-actions so the same .btn class elsewhere on the site (hero,
   body-check, etc.) is untouched. */
.nav-actions .btn{ padding:9px 20px; font-size:0.86rem; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:100px;
  font-size:0.9rem; font-weight:500; border:1px solid transparent; cursor:pointer; transition:transform .2s, background .2s; white-space:nowrap; }
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--olive-deep); color:var(--cream);}
.btn-primary:hover{background:var(--olive-ink);}
/* Header booking CTA uses the same quiet style at every screen width.
   Leave booking buttons elsewhere on the site unchanged. */
.nav-actions .btn-primary{
  padding:8px 15px;
  font-size:0.84rem;
  background:rgba(118,127,70,0.055);
  color:var(--olive-deep);
  border-color:rgba(69,75,41,0.22);
  box-shadow:none;
}
.nav-actions .btn-primary:hover{
  background:var(--cream-soft);
  color:var(--olive-deep);
  transform:none;
}
.btn-outline{ border-color:var(--olive-deep); color:var(--olive-deep); }
.btn-outline:hover{background:var(--cream-soft);}
.btn-gold{background:var(--gold); color:var(--olive-ink);}
.btn-gold:hover{background:var(--gold-soft);}
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--olive-ink); font-size:1.5rem; line-height:1; }
.mobile-panel{ display:none; position:fixed; inset:var(--header-h) 0 0 0; background:var(--cream); z-index:49; padding:24px 20px; overflow-y:auto; }
.mobile-panel.open{ display:block; }
.mobile-panel a{ display:block; padding:14px 4px; font-size:1.05rem; border-bottom:1px solid var(--line); }
.mobile-panel .btn{ width:100%; display:flex; justify-content:center; margin-top:16px; }

@media (max-width:900px){
  .navlinks, .nav-actions .btn-outline{display:none;}
  .menu-toggle{display:block;}
  /* Book a session is the only nav-actions button left once the outline
     one hides -- shrink it further here, closer to the logo (34px) and
     hamburger icon (40px) sizes at this width, since the earlier
     header-wide shrink (42.7px) was tuned for the 44px desktop logo. */
  .nav-actions .btn{ padding:7px 16px; font-size:0.8rem; }
}

/* Prelaunch responsive header (approved 2026-10-27):
   full WorkWell wordmark on phones; booking CTA is quiet across widths.
   Only geometry changes at narrow breakpoints. */
@media (max-width:520px){
  /* Keep the complete WorkWell lockup visible on phones. */
  nav.wrap{ gap:6px; padding-left:12px; padding-right:12px; }
  .brand{ gap:6px; flex:0 0 auto; }
  .brand span{ display:inline; font-size:clamp(0.94rem, 3.8vw, 1.12rem); white-space:nowrap; }
  .brand img{ height:32px; }
  .nav-actions{ gap:5px; margin-left:auto; flex:0 0 auto; }
  /* Booking stays accessible but quieter than the brand. */
  .nav-actions .btn{ min-height:40px; padding:7px 10px; font-size:0.77rem; }
  .menu-toggle{ width:40px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; }
}
@media (max-width:350px){
  .brand{ gap:4px; }
  .brand img{ height:28px; }
  .brand span{ font-size:0.92rem; }
  .nav-actions .btn{ padding:7px 8px; font-size:0.7rem; }
  .menu-toggle{ width:36px; }
}

/* ---------- LANGUAGE BAR ---------- */
/* Thin utility bar holding ONLY the EN / DA language control, right after
   .proto-banner and before the main <header> (see renderLangBar() in
   js/site.js) -- kept completely OUT of the main nav row so that row is
   pixel-identical to how it looked before the language switcher existed.
   This mirrors the common pattern of a slim secondary bar above the main
   navigation carrying just language/utility links, right-aligned in the
   page's top-right corner. Not sticky -- it scrolls away with the page
   (same as the staging banner above it), while the main header below
   keeps its own sticky behaviour unchanged. Each language is a small flag
   icon (see FLAG_EN/FLAG_DA in js/site.js) rather than text -- the active
   one shown in full colour with a thin highlight ring, the inactive one
   dimmed and desaturated, so the current language is obvious at a glance
   without needing a text label. */
.lang-bar{ background:var(--cream-soft); border-bottom:1px solid var(--line); }
.lang-bar-inner{ display:flex; justify-content:flex-end; align-items:center; padding-top:6px; padding-bottom:6px; }
.lang-switch{ display:flex; align-items:center; gap:8px; }
.lang-btn{ background:none; border:none; cursor:pointer; padding:2px; border-radius:3px; line-height:0;
  opacity:0.4; filter:grayscale(70%); transition:opacity .2s, filter .2s, box-shadow .2s; }
.lang-btn svg{ display:block; border-radius:2px; }
.lang-btn:hover{ opacity:0.75; filter:grayscale(25%); }
.lang-btn.active{ opacity:1; filter:none; box-shadow:0 0 0 2px var(--olive-deep); }

/* ---------- HERO ---------- */
.hero{ padding:64px 0 0; }
.hero-copy{ max-width:900px; margin-bottom:34px; }
.eyebrow{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--olive); margin-bottom:16px; font-weight:600; }
.hero h1{ font-size:clamp(1.9rem, 2.8vw, 2.5rem); line-height:1.18; margin-bottom:20px; max-width:none;}
.hero p.lead{ max-width:52ch; font-size:1.08rem; color:rgba(46,51,28,0.72); margin-bottom:30px; }
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.hero-media{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.hero-media img{ width:100%; height:auto; display:block; }
.hero-badge{ position:absolute; right:22px; bottom:22px; background:var(--cream); border-radius:16px;
  padding:16px 20px; font-size:0.85rem; box-shadow:var(--shadow); max-width:220px; color:var(--olive-ink); }
.hero-badge b{display:block; font-family:'Fraunces',serif; font-weight:500;}
/* for-you.html's centered "Take the body check" band, right after the
   hero -- was an inline padding:56px 0, which (a) can't be tightened
   for mobile via media query (inline always wins) and (b) stacked on
   top of the hero's own bottom padding + lead paragraph's margin,
   leaving a very large empty gap above the button on small screens. */
.body-check-band{ padding:8px 0 56px; }
/* .hero-cta (for-you.html's hero only -- index.html's hero has a
   photo between copy and the next section, so is untouched) tightens
   the gap above the body-check-band's button on every breakpoint, not
   just mobile -- the same stacked hero-bottom-padding + lead-margin +
   band-top-padding problem was still visible on desktop. */
.hero-cta{ padding-bottom:0; }
.hero-cta p.lead{ margin-bottom:8px; }

/* ---------- FOR YOU / FOR WORKPLACES SPLIT ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.split-card{ background:var(--cream-soft); border-radius:20px; overflow:hidden; border:1px solid var(--line); }
.split-card img{ width:100%; height:340px; object-fit:cover; display:block; }
/* Round 81 delta: new photo (woman stretching, both arms up, WorkWell
   Reset Point sign in view), file renamed from workplaces-standing-
   reset.jpg to match the terminology change. Position tuned via
   simulated object-fit:cover crops at the card's actual box sizes
   (desktop ~547x340, mobile ~368x340) so the subject + sign both stay
   in frame at both shapes. */
.split-card img[src*="workplaces-reset-point"]{ object-position:40% 20%; }
.split-card--dev{ position:relative; }
.dev-badge{ position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(46,51,28,0.72); color:var(--cream); font-size:0.68rem;
  letter-spacing:0.02em; font-weight:500; padding:5px 11px; border-radius:8px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); pointer-events:none; }
@media (max-width:520px){ .dev-badge{ font-size:0.62rem; padding:4px 9px; top:10px; left:10px; } }
.split-card-body{ padding:28px; }
.split-icon{ width:44px; height:44px; border-radius:50%; background:var(--olive-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.3rem; }
.split-card h3{font-size:1.3rem; margin-bottom:10px;}
.split-card p{color:rgba(46,51,28,0.68); margin-bottom:16px; font-size:0.95rem;}
.split-card a.link{font-weight:500; color:var(--olive-deep); font-size:0.92rem;}

/* ---------- GIFT CARD PROMO BAND (for-you.html) ---------- */
/* Same dark-band treatment as .quiz-section, reused here so the promo
   reads as a distinct, intentional module instead of blending into the
   cream-soft background shared by the sections around it. */
.gift-promo-band{ background:var(--olive-ink); padding:56px 0; position:relative; overflow:hidden; }
.gift-promo-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 30%, rgba(246,190,68,0.14), transparent 55%); }
.gift-promo-band .wrap{ position:relative; text-align:center; max-width:520px; }
.gift-promo-band .tag{ color:var(--gold-soft); }
.gift-promo-band h2{ font-size:1.55rem; margin:12px 0 10px; color:var(--cream); }
.gift-promo-band p{ color:rgba(251,248,240,0.8); max-width:42ch; margin:0 auto 22px; }

/* ---------- GIFT CARD (Gavekort) ---------- */
.gift-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:820px; margin:0 auto; }
.gift-card{ background:var(--cream-soft); border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.gift-card img{ width:100%; height:auto; aspect-ratio:941/1672; display:block; }
.gift-card-body{ padding:20px; text-align:center; }
.gift-card-body .btn{ width:100%; justify-content:center; }

/* ---------- GIFT CARD ORDER FORM ---------- */
.choice-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.choice-card{ position:relative; flex:1; min-width:120px; cursor:pointer; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; text-align:center; font-size:0.9rem; transition:border-color .15s, background .15s; }
.choice-card:hover{ border-color:var(--olive-deep); }
.choice-card.selected{ border-color:var(--olive-deep); background:rgba(90,107,58,0.08); font-weight:500; }
/* Round 82: .choice-card is now a real <label> wrapping a visually-hidden
   (not display:none -- screen readers and Tab order still need it) native
   radio input, so each gift-order "choice row" is a proper accessible
   radio group: keyboard-focusable, announced by name/role/checked state,
   and still fully clickable the way it always was. */
.choice-card input[type="radio"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.choice-card:focus-within{ outline:2px solid var(--gold); outline-offset:3px; }
.design-choice{ gap:16px; margin-bottom:22px; }
.design-choice .choice-card{ padding:0; overflow:hidden; }
.design-choice img{ width:100%; height:auto; aspect-ratio:941/1672; object-fit:cover; object-position:top; display:block; }
.design-choice .design-label{ padding:10px; font-size:0.88rem; }
.giftorder-confirm{ background:var(--cream-soft); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:40px 32px; text-align:center; }
.giftorder-confirm .confirm-icon{ width:52px; height:52px; border-radius:50%; background:var(--olive-deep);
  color:var(--gold-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.giftorder-confirm .confirm-icon .icon{ width:24px; height:24px; }
.giftorder-confirm h3{ font-family:'Fraunces',serif; font-size:1.5rem; margin:0 0 24px; }
.giftorder-confirm .confirm-lead{ font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--olive); font-weight:600; margin-bottom:8px; }
.giftorder-confirm .order-code{ display:inline-block; font-family:'Courier New', monospace; font-size:1.15rem;
  letter-spacing:1.5px; color:var(--olive-deep); font-weight:600; background:var(--cream);
  border:1px solid var(--line); border-radius:10px; padding:10px 22px; margin:0 0 26px; }
.giftorder-confirm .confirm-summary{ background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:16px 22px; margin-bottom:16px; text-align:left; font-size:0.86rem; line-height:1.9; max-width:42ch;
  margin-left:auto; margin-right:auto; }
.giftorder-confirm .confirm-summary .row{ display:flex; justify-content:space-between; gap:12px; }
.giftorder-confirm .confirm-summary .row + .row{ border-top:1px solid var(--line); padding-top:4px; margin-top:2px; }
.giftorder-confirm .confirm-summary .label{ color:var(--olive); white-space:nowrap; flex-shrink:0; }
/* Round 82: the recipient name is the buyer's own free-text input, so it
   can be long and/or contain Unicode (accents, non-Latin scripts) with no
   natural break points for the browser to wrap on cleanly -- previously
   this could leave a single stray character ("orphan") alone on its own
   line, especially since the value is right-aligned. overflow-wrap:anywhere
   lets a long unbroken word break at any character once it must, and
   min-width:0 lets this flex item actually shrink to make room instead of
   pushing the row wider than the card. */
.giftorder-confirm .confirm-summary .value{ text-align:right; overflow-wrap:anywhere; min-width:0; }
.giftorder-confirm .confirm-payment{ background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:18px 22px; margin-bottom:16px; }
.giftorder-confirm .confirm-payment p{ margin:0; }
.giftorder-confirm p{ max-width:42ch; margin-left:auto; margin-right:auto; }
.giftorder-confirm .confirm-note{ opacity:0.62; font-size:0.85rem; }
.placeholder-block{ border-radius:16px; background:linear-gradient(155deg, var(--cream-soft) 0%, #E8DFC5 100%);
  display:flex; align-items:center; justify-content:center; color:rgba(46,51,28,0.42); font-size:0.78rem;
  border:1px dashed rgba(46,51,28,0.25); text-align:center; padding:14px; min-height:200px; }

/* ---------- ABOUT / GENERIC TWO-COL ---------- */
/* #for-you and .about sit back-to-back with the same cream background
   and no divider -- the generic section{padding:100px 0} on both sides
   stacked into a 200px gap that read as empty/broken. Tightened both. */
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
/* Same 1:1 square on every page that uses this section (both the
   homepage's whatis.jpg and about.html's whatis-about.jpg), so the
   "What is WorkWell" photo always matches the neighboring Founder
   portrait card size exactly -- on desktop AND mobile, since both use
   the same aspect-ratio rather than a fixed pixel size. */
.about-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); display:block; }
.about-img--dev{ position:relative; }
.tag{ display:inline-block; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); margin-bottom:16px; font-weight:600; }
.about h2, .about h1{font-size:2rem; margin-bottom:18px; max-width:16ch;}
.about p{color:rgba(46,51,28,0.72); max-width:50ch; margin-bottom:16px;}
#for-you{padding-bottom:40px;}
.about{padding-top:40px; padding-bottom:40px;}
/* .about (What is WorkWell) and #founder sit back-to-back on both
   about.html and index.html, same as the #for-you/.about pair above --
   same bug, just never given the same fix: the generic
   section{padding:100px 0} on both sides stacked into a 200px gap
   (88px on mobile). Tightened both sides the same way. */
#founder{padding-top:40px;}

/* ---------- BODY CHECK BANNER ---------- */
.check-banner{ background:var(--olive-deep); color:var(--cream); border-radius:22px; padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.check-left{ display:flex; align-items:center; gap:18px; max-width:340px; }
.check-icon{ width:46px; height:46px; border-radius:50%; background:rgba(251,248,240,0.14);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.check-left h3{font-size:1.25rem; font-family:'Fraunces',serif; font-weight:500;}
.check-tags{ display:flex; gap:22px; flex-wrap:wrap; font-size:0.8rem; color:rgba(251,248,240,0.85); }
.check-tags span{display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0.9; font-size:1.15rem;}
.check-tags small{font-size:0.72rem;}

/* ---------- MASSAGE MENU ---------- */
.menu-section{background:var(--cream-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:60ch; margin-bottom:50px;}
.section-head h2, .section-head h1{font-size:2rem;}
.section-head p{color:rgba(46,51,28,0.68); margin-top:12px;}
.massage-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.massage-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
.massage-card{ background:var(--cream); border-radius:18px; overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.massage-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.massage-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.massage-card-body{ padding:20px; flex:1; display:flex; flex-direction:column; }
.massage-card h3{font-size:1.08rem; margin-bottom:8px;}
.massage-card p{font-size:0.88rem; color:rgba(46,51,28,0.66); margin-bottom:14px;}
.massage-card .card-meta{ margin-top:auto; }
.card-meta{ font-size:0.8rem; color:var(--olive-deep); font-weight:500; }
/* Centered CTA strip below a card grid -- same pattern used by the
   "Ready to book?" block on massage.html and the Gavekort promo on
   for-you.html, reused here so the homepage teaser's CTA no longer
   sits in an off-balance narrow sidebar next to the grid. */
.menu-cta{ text-align:center; max-width:46ch; margin:36px auto 0; }
.menu-cta p{ font-size:0.92rem; color:rgba(46,51,28,0.68); margin-bottom:18px; }

/* ---------- FOR WORKPLACES DETAIL ---------- */
/* Photo bleeds to the card edge, top to bottom (matches the massage-card
   / split-card pattern) instead of floating inside the cards own 40px
   padding. align-items:stretch on the grid (not overridden here) makes
   .wd-photo fill the full row height -- object-fit:cover on the img
   crops it to match, same as every other photo card on the site. The
   card clips the photo to its own border-radius via overflow:hidden,
   and only the text column keeps padding. */
.wd-photo{ position:relative; }
/* Keep photo at left on desktop; on phones show introduction first. */
.workplaces-detail{
  display:grid; grid-template-columns:0.8fr 1.2fr;
  grid-template-areas:"photo intro" "photo icons";
  grid-template-rows:auto 1fr; column-gap:40px; row-gap:20px;
  align-items:stretch; background:var(--cream-soft);
  border-radius:22px; border:1px solid var(--line); overflow:hidden;
}
.wd-copy{grid-area:intro; padding:40px 40px 0 0;}
.workplaces-detail .wd-photo{grid-area:photo; min-height:0;}
.wd-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.workplaces-detail .wd-icons{
  grid-area:icons; display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; padding:0 40px 40px 0; align-content:start;
}
.wd-icon-item{font-size:0.88rem;}
.wd-icon-item .icon-circle{ width:38px; height:38px; border-radius:50%; background:var(--olive-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:1.1rem; }
.wd-icon-item b{display:block; margin-bottom:3px;}
.wd-icon-item span{color:rgba(46,51,28,0.62); font-size:0.82rem;}

/* ---------- HOW IT STARTS (for-workplaces.html) ---------- */
.how-it-starts{ margin-top:64px; padding-top:56px; border-top:1px solid var(--line); }
.his-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:8px; }
.his-step{ background:var(--cream-soft); border:1px solid var(--line); border-radius:16px; padding:22px 20px; }
.his-num{ width:34px; height:34px; border-radius:50%; background:var(--olive-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; margin-bottom:14px; }
.his-step b{display:block; margin-bottom:6px; font-size:1rem;}
.his-step span{color:rgba(46,51,28,0.62); font-size:0.86rem;}
@media (max-width:600px){ .his-steps{grid-template-columns:1fr 1fr;} }
@media (max-width:420px){ .his-steps{grid-template-columns:1fr;} }

/* "Built to Grow" block (round 81 delta) — a short text block between the
   How It Starts steps and the final "Talk to WorkWell" CTA. */
.built-to-grow{ max-width:56ch; margin:44px auto 0; text-align:center; }
.built-to-grow h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem; margin-bottom:10px; }
.built-to-grow p{ color:rgba(46,51,28,0.68); margin:0; }
.built-to-grow .btg-closing{ margin-top:10px; font-weight:600; color:var(--olive-deep); }

/* ---------- FOUNDER ---------- */
.founder-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
/* Haroldas's portrait (about-1.jpg) is natively 2:3 (1000x1502) --
   square 1:1 frame matches the What is WorkWell photo card exactly.
   User explicitly wants the box fully filled edge-to-edge (no empty
   or blurred side strips), so object-fit:cover it is -- the crop
   amount (~33% of height) is fixed by the ratio mismatch, but
   founder.pos in content.js was picked (via a pixel-grid check of
   the source photo) so the crop falls on empty space above his hair,
   never on his head, face or hands. */
.founder-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow:var(--shadow); display:block; }
.founder-credentials{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 30px; margin-top:26px; }
.fc-item{font-size:0.9rem;}
.fc-item b{display:block; color:var(--olive-deep);}
.fc-item span{color:rgba(46,51,28,0.6); font-size:0.82rem;}

/* ---------- GALLERY ---------- */
/* Uniform 4-up grid (2-up on mobile). Each image uses object-fit:contain
   with a shared aspect-ratio (the widest photo's own ratio) so every
   photo shows in full, never cropped, at the same card size. */
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.gallery-grid img{ border-radius:16px; width:100%; aspect-ratio:9/10; object-fit:cover; display:block; }

/* ---------- QUIZ ---------- */
.quiz-section{background:var(--olive-ink); color:var(--cream); position:relative; overflow:hidden;}
.quiz-section::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 25%, rgba(246,190,68,0.15), transparent 50%); }
.quiz-section .wrap{position:relative;}
.quiz-head{text-align:center; max-width:56ch; margin:0 auto 46px;}
.quiz-head .tag{color:var(--gold-soft);}
.quiz-head h2{font-size:1.95rem;}
.quiz-head p{color:rgba(251,248,240,0.72); margin-top:12px;}
.quiz-card{ max-width:640px; margin:0 auto; background:rgba(251,248,240,0.05); border:1px solid rgba(251,248,240,0.14);
  border-radius:24px; padding:44px; backdrop-filter:blur(6px); }
.quiz-progress{display:flex; gap:6px; margin-bottom:28px;}
.quiz-progress span{height:4px; flex:1; background:rgba(251,248,240,0.2); border-radius:4px; overflow:hidden;}
.quiz-progress span i{display:block; height:100%; width:0%; background:var(--gold); transition:width .3s;}
.q-title{font-family:'Fraunces',serif; font-size:1.3rem; margin-bottom:24px;}
.q-options{display:grid; gap:12px;}
.q-option{ text-align:left; background:rgba(251,248,240,0.06); border:1px solid rgba(251,248,240,0.16);
  color:var(--cream); padding:15px 20px; border-radius:14px; font-size:0.94rem; cursor:pointer; transition:background .2s, border-color .2s; }
.q-option:hover{background:rgba(251,248,240,0.14); border-color:var(--gold-soft);}
.quiz-result{display:none; text-align:center;}
.quiz-result.show{display:block;}
.quiz-body.hide{display:none;}
.result-badge{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--gold-soft); margin-bottom:12px; }
.result-name{font-family:'Fraunces',serif; font-size:1.8rem; margin-bottom:14px;}
.result-desc{color:rgba(251,248,240,0.78); margin-bottom:18px; max-width:44ch; margin-left:auto; margin-right:auto;}
.result-time-note{display:none; font-size:0.85rem; font-style:italic; color:var(--gold-soft); margin:-4px auto 22px; max-width:42ch;}
.restart-link{font-size:0.85rem; opacity:0.7; margin-top:16px; display:inline-block; cursor:pointer;}
.restart-link:hover{opacity:1;}

/* ---------- GOOGLE REVIEWS ---------- */
.reviews-badge{ display:inline-flex; align-items:center; gap:14px; margin:18px 0 36px; }
.reviews-badge svg.g-logo{ width:34px; height:34px; flex-shrink:0; }
.reviews-score-block{ text-align:left; }
.reviews-score{ display:flex; align-items:center; gap:8px; font-family:'Fraunces', serif; font-size:1.5rem; font-weight:500; line-height:1; }
.reviews-count{ font-size:0.85rem; color:rgba(46,51,28,0.62); margin-top:4px; }
.star-row{ display:inline-flex; gap:2px; }
.icon.star-icon{ fill:currentColor; stroke:none; width:0.85em; height:0.85em; }
.star-filled{ color:var(--gold); }
.star-empty{ color:rgba(46,51,28,0.16); }
.reviews-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:960px; margin:0 auto; }
.review-card{ background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:24px; text-align:left; display:flex; flex-direction:column; gap:12px; }
.review-card .star-row{ margin-bottom:2px; }
.review-text{ font-size:0.92rem; color:rgba(46,51,28,0.75); line-height:1.55; flex-grow:1; }
.review-name{ font-size:0.85rem; font-weight:600; color:var(--olive-ink); }
/* Round 82: on desktop the carousel wrapper/nav/dots stay inert -- the
   grid above is the real layout. The <=720px rule below turns .reviews-grid
   into the actual swipeable track and switches these on. */
.reviews-carousel{ position:relative; }
.reviews-nav{ display:none; }
.reviews-dots{ display:none; }

/* ---------- CONTACT ---------- */
.contact{background:var(--cream-soft); border-top:1px solid var(--line);}
.contact-paths{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:44px; }
.cp-card{ background:var(--cream); border-radius:18px; padding:26px; border:1px solid var(--line); }
.cp-card b{display:block; margin-bottom:6px; font-size:1.02rem;}
.cp-card p{font-size:0.9rem; color:rgba(46,51,28,0.66); margin-bottom:14px;}
.contact-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.info-row{display:flex; gap:10px; font-size:0.92rem; align-items:center;}
.info-list{display:flex; flex-direction:column; gap:16px;}
.social-row{display:flex; gap:12px;}
.find-us-visual{margin:24px 0;}
.find-us-visual .tag{margin-bottom:8px;}
.find-us-visual h3{font-size:1.1rem; margin-bottom:8px;}
.find-us-visual p{font-size:0.88rem; color:rgba(46,51,28,0.68); margin-bottom:14px;}
.find-us-visual img{width:100%; max-width:480px; height:auto; border-radius:14px; box-shadow:var(--shadow); display:block;}
.find-us-visual .find-us-address{font-weight:600; color:var(--olive-ink); margin:-4px 0 14px;}
.find-us-visual .find-us-maps-btn{margin-top:14px;}
.social-pill{ width:38px; height:38px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; transition:transform .2s, box-shadow .2s; }
.social-pill:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.contact-form .field{margin-bottom:16px;}
.contact-form label{display:block; font-size:0.82rem; margin-bottom:7px; color:rgba(46,51,28,0.6);}
.contact-form input, .contact-form textarea{ width:100%; padding:13px 15px; border-radius:12px; border:1px solid var(--line);
  background:var(--cream); font-family:inherit; font-size:0.94rem; color:var(--olive-ink); }
.contact-form textarea{resize:vertical; min-height:110px;}

/* ---------- FOOTER ---------- */
footer{background:var(--olive-ink); color:rgba(251,248,240,0.6); padding:40px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; font-size:0.85rem;}
footer .brand span{color:var(--cream);}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{opacity:0.8;} .footer-links a:hover{opacity:1;}
.footer-social{display:flex; gap:14px;}

.proto-banner{ background:var(--gold); color:var(--olive-ink); text-align:center; font-size:0.82rem; padding:8px 12px; font-weight:500; }

/* ================= MOBILE ================= */
@media (max-width:860px){
  .about-grid, .founder-grid{grid-template-columns:1fr; gap:26px;}
  .workplaces-detail{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "photo" "icons";
    grid-template-rows:auto auto auto;
    gap:0;
  }
  .workplaces-detail .wd-copy{padding:28px 28px 22px;}
  .workplaces-detail .wd-photo img{height:340px;}
  .workplaces-detail .wd-icons{padding:26px 28px 28px; gap:20px;}
}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:800px){
  .split{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .contact-paths{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .massage-grid{grid-template-columns:1fr;}
  .massage-grid.cols-3{grid-template-columns:1fr;}
  .workplaces-detail .wd-icons{grid-template-columns:1fr;}
}
/* The hero-badge only shrank below 720px, but some phones/tablets in
   the 721-900px range (where the header already switches to the
   hamburger menu) were still getting the larger base badge size,
   which reads as oversized on a narrow photo. Give that range its
   own, slightly smaller badge too. */
@media (max-width:900px){
  .hero-badge{ right:14px; bottom:14px; padding:10px 14px; font-size:0.7rem; max-width:150px; border-radius:12px; }
}
@media (max-width:720px){
  :root{ --header-h:60px; }
  .brand img{height:34px;}
  .brand span{font-size:1.02rem;}
  section{padding:44px 0;}
  #for-you{padding-bottom:24px;}
  .about{padding-top:24px; padding-bottom:24px;}
  #founder{padding-top:24px;}
  .wrap{padding:0 18px;}
  .hero{padding-top:36px; padding-bottom:36px;}
  .btn-row{justify-content:center;}
  .about h2, .about h1{max-width:none;}
  .footer-row{flex-direction:column; align-items:center; text-align:center;}
  .footer-links{justify-content:center;}
  .footer-social{justify-content:center;}
  .gift-grid{grid-template-columns:1fr;}
  .hero-copy{margin-bottom:22px;}
  .eyebrow{margin-bottom:22px;}
  .hero h1{font-size:1.7rem; max-width:none; line-height:1.3; margin-bottom:22px;}
  .hero p.lead{margin-bottom:34px;}
  .body-check-band{ padding:0 0 40px; }
  /* for-you.html's hero feeds straight into the body-check-band with
     no image/media between them (unlike index.html's hero, which has
     a photo). Its own bottom padding + the lead's margin were still
     adding up to a large gap even after body-check-band's own top
     padding was already removed above -- tighten both, scoped to
     this page only via .hero-cta so index.html's hero is untouched. */
  .hero-cta{ padding-bottom:0; }
  .hero-cta p.lead{ margin-bottom:14px; }
  .btn{padding:11px 18px; font-size:0.86rem;}
  .check-banner{padding:22px 20px; flex-direction:column; align-items:stretch;}
  .check-tags{justify-content:center; gap:14px;}
  .check-tags span{font-size:1rem;}
  .check-banner > .btn-gold{align-self:center;}
  .quiz-card{padding:24px 18px;}
  /* Round 81 delta: max-width was too narrow for "Where WorkWell began."
     at this font-size, wrapping the badge to 3 lines instead of the
     required 2 (one phrase per line). Widened just enough to fit both
     phrases on their own single line — verified by rendering, not just
     computed. */
  .hero-badge{ right:10px; bottom:10px; padding:8px 12px; font-size:0.64rem; max-width:170px; border-radius:10px; white-space:nowrap; }
  .hero-media img{ height:340px; object-fit:cover; }
  /* Round 82 delta: the reviews section used to stack all cards in one
     tall column that needed scrolling down to read. Requested change:
     let people move between reviews by swiping (finger drag) or tapping
     a prev/next arrow, one review visible at a time, without needing to
     scroll the whole page. Native CSS scroll-snap gives the swipe for
     free (no JS needed for the gesture itself); the arrows/dots are a
     secondary, button-based way to do the same thing. The track bleeds
     to the screen edges (negative margin matching .wrap's own 18px
     padding at this breakpoint) so the next card peeks in slightly,
     hinting that it's swipeable. */
  .reviews-grid{
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:16px;
    max-width:none;
    margin:0 -18px;
    padding:4px 18px 10px;
  }
  .reviews-grid::-webkit-scrollbar{ display:none; }
  .reviews-grid .review-card{ flex:0 0 86%; scroll-snap-align:center; }
  .reviews-badge{ flex-direction:column; text-align:center; }
  .reviews-score-block{ text-align:center; }
  .reviews-nav{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%;
    background:var(--cream); border:1px solid var(--line);
    color:var(--olive-ink); font-size:1.2rem; line-height:1;
    cursor:pointer; z-index:2; padding:0;
  }
  .reviews-prev{ left:-4px; }
  .reviews-next{ right:-4px; }
  .reviews-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
  .reviews-dot{ width:7px; height:7px; border-radius:50%; background:rgba(46,51,28,0.22); border:none; padding:0; cursor:pointer; transition:width 0.15s, border-radius 0.15s; }
  .reviews-dot.active{ background:var(--olive-ink); width:18px; border-radius:4px; }
}

/* Round 81 delta: on narrow phones, show the HOME hero photo (Haroldas at
   the massage table, 1536x1152 / 4:3) at its full original composition —
   no crop, no stretch. The shared <=720px rule above force-crops it to a
   fixed 340px height via object-fit:cover, which reads fine on a wide
   phone/small-tablet width but crops real content out of the frame on a
   truly narrow phone. Scoped to <=480px (comfortably covers real phone
   widths without touching the 720px rule tablets/large phones might also
   hit) rather than editing that shared rule directly. Tablet/desktop
   presentation is untouched. */
@media (max-width:480px){
  .hero-media img{ height:auto; object-fit:unset; }
  /* For Workplaces: preserve the original portrait composition on phones.
     The previous fixed 340px image height cropped the feet and floor mat. */
  .workplaces-detail .wd-photo img{height:auto; object-fit:contain;}
}