/* =====================================================================
   The GPS Within — site styles
   Built on assets/tokens.css (colors, fonts, type scale live there).
   ===================================================================== */

/* ---------- Scripter (licensed display face — Creative Market) ----------
   Only a Regular master ships, so we claim the full weight range on the one
   file: browsers then use the real glyphs at any weight instead of faux-bolding. */
@font-face {
  font-family: "Scripter";
  src: url("assets/fonts/Scripter-Regular.woff2") format("woff2"),
       url("assets/fonts/Scripter-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  position: relative;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1, h2 { font-family: var(--font-display); }   /* Scripter for the two top heading levels */
h2 { color: var(--color-heading); font-weight: var(--weight-strong); font-size: var(--text-h2); }
h3 { color: var(--color-heading); font-weight: var(--weight-heading); font-size: var(--text-h3); }
p  { margin: 0 0 1rem; max-width: 60ch; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }  /* matches Rivka's .container (max-width 1200, 15px gutters) */
.block { max-width: 680px; }

.section { position: relative; padding: clamp(56px, 10vh, 118px) 0; }
#problem { padding-top: 0; }   /* tighten the hero → first-section gap (#3) */

/* Section bands */
.band-cream  { background: var(--color-background); }
.band-white  { background: var(--color-surface); }
.band-gold   { background: #F6E7BE; }
.band-green  { background: var(--green); color: var(--color-text-inverse); }
.band-green h2 { color: var(--color-text-inverse); }

/* Curved terrain dividers between sections.
   Two overshooting fills so no sub-pixel seam can show at any zoom/DPR:
   a solid base in the NEXT colour (--to) covers everything and overshoots
   into the next section; the PREVIOUS colour (--from) wave sits on top and
   overshoots up into the previous section. The overshoot is always the same
   colour as the neighbour it bleeds into, so it is invisible. */
.divider { position: relative; z-index: 1; line-height: 0; height: clamp(58px, 8vw, 112px); margin: -1px 0; overflow: visible; }
.divider svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.divider .d-base { fill: var(--to, transparent); }
.divider .d-l2   { fill: var(--l2, transparent); }   /* mid tint layer (distinct wave) */
.divider .d-l1   { fill: var(--l1, transparent); }   /* lightest tint layer (distinct wave) */
.divider .d-top  { fill: var(--from, transparent); }

/* ---------- Skip link + focus ---------- */
.skip-link {
  position: absolute; left: 12px; top: -50px; z-index: 100;
  background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-family: var(--font-heading); font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  font-size: 15px; text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;   /* pill corners on all CTAs (match "Get in touch") */
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--gold); color: var(--plum);   /* gold like the other CTAs — supports the green headline instead of competing with it */
  box-shadow: 0 10px 24px rgba(77,69,80,.18);
}
.btn-nav {
  background: var(--gold); color: var(--plum);   /* warm gold CTA, plum text, no outline */
  padding: 9px 18px; font-size: 14px; border-radius: 999px;
}
.btn-on-dark {
  background: var(--gold); color: var(--plum);   /* was white — now gold, matching "Get in touch" */
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.btn-small { padding: 9px 16px; font-size: 14px; background: var(--plum); color: #fff; }
.btn-ghost { background: transparent; color: var(--plum); border-color: var(--plum); }

/* breathing room above a CTA placed after a section's closing copy */
.section-cta { margin-top: 32px; }
/* quiet text-style CTA (a clear link, not a prominent button) */
.text-cta {
  font-family: var(--font-heading); font-size: 15px;                  /* Montserrat Alternates, same size as the CTA buttons */
  font-weight: 700; color: #407557;                                   /* bold brand green — matches the CTA buttons (text + arrow) */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .15s ease;
}
.text-cta:hover { color: #2f5a41; }                                   /* a touch darker on hover */

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .3s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled {
  background: rgba(245,239,223,.92); backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(77,69,80,.08);
  border-bottom-color: var(--color-divider);
}
.site-header.hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px; }   /* 15px sides match the content gutter (logo was touching the edge) */
.brand-logo { height: clamp(54px, 6.6vw, 72px); width: auto; transition: height .25s ease; }
.site-header.scrolled .brand-logo,
.site-header.shrunk .brand-logo { height: 50px; }   /* .shrunk = compact logo without the solid bg (used while scrolling DOWN over the hero) */

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.site-nav > a:not(.btn) {
  position: relative; z-index: 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--plum); text-decoration: none; padding: 6px 0;
  transition: color .15s;
}
/* nav hover = just the blob (text colour stays, like the live site) */
/* morphing blob behind the word (z-index -1 keeps it under the text, above the header bg) */
.blob-hover,
.site-nav > a:not(.btn),
.footer-nav a,
.contact-methods dd a,
.footer-links a { position: relative; z-index: 0; }
.blob-hover::before,
.site-nav > a:not(.btn)::before,
.footer-nav a::before,
.contact-methods dd a::before,
.footer-links a::before {
  content: ""; position: absolute; z-index: -1; top: 50%; left: 50%;
  width: 2.1em; height: 2.1em; transform: translate(-50%, -50%) scale(0);
  background: var(--gold); opacity: 0; mix-blend-mode: multiply;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: .4s;
}
.blob-hover:hover::before,
.site-nav > a:not(.btn):hover::before,
.footer-nav a:hover::before,
.contact-methods dd a:hover::before,
.footer-links a:hover::before {
  transform: translate(-50%, -50%) scale(1); opacity: .55;
  animation: blobMorph 2.5s ease infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 30% 70% 26% 74% / 30% 49% 51% 70%; }
  50% { border-radius: 68% 32% 55% 45% / 66% 49% 51% 34%; }
  75% { border-radius: 68% 32% 44% 56% / 29% 75% 25% 71%; }
}

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  padding: 8px; cursor: pointer;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--plum); border-radius: 3px; transition: transform .25s, opacity .2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  height: 1010px;        /* 1920x1080 design stage, cropped 70px off the top (HERO_SHIFT in main.js):
                            art crops from the sides on narrower screens, text is pinned at its design
                            coordinates minus 70. ≤860px reverts to a normal stacked flow (mobile). */
  background: #FFFFFF;   /* white base; the real cream sand-blob SVG (from the live site) sits on top */
}
.route-svg { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; max-width: none; }  /* max-width:none prevents the global svg reset from squishing the road (smush) mid-resize */

/* ---------- hero entrance: one-time load reveal (echoes the live site's cream-preloader fade) ---------- */
#preloader { display: none; }
.js #preloader { display: block; position: fixed; inset: 0; background: #F5EFDF; z-index: 9999; opacity: 1; pointer-events: none; transition: opacity .7s ease; }
body.hero-ready #preloader { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
/* start hidden, settle in on load */
.js .hero-shape   { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.js .route-svg    { opacity: 0; transition: opacity 1s ease .15s; }         /* roundabout + yellow line + car */
.js .hero-copy > * { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.js .hero-title   { transition-delay: .15s; }
.js .hero-lower   { transition-delay: .35s; }
body.hero-ready .hero-shape    { opacity: 1; transform: none; }
body.hero-ready .route-svg     { opacity: 1; }
body.hero-ready .hero-copy > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js #preloader, .js .hero-shape, .js .route-svg, .js .hero-copy > * { transition-duration: .01ms; }
}
/* organic two-tone hero (like Rivka's current site): cream up top behind the headline,
   sweeping down + up to the right into white where the roundabout sits */
.hero-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-inner { position: relative; z-index: 2; width: 100%; height: 100%; }
/* Text is pinned at its design-canvas coordinates (measured in the Hero Lab, 1920x1080 space):
   `left: 15px` = the .wrap 15px gutter = x≈375 when the 1200 container is centred on 1920 (360+15);
   `top` = the exact y from the Lab. This keeps the text locked to the cropping art at every
   desktop width (the centred container and the centre-cropped art track together 1200–1920). */
.hero-copy { position: static; }
.hero-title {
  position: absolute; top: 160px; left: 15px; margin: 0;
  max-width: 1020px;       /* headline wrap width, from the Hero Lab (1020px on the 1920 canvas) */
  font-family: var(--font-display); font-weight: var(--weight-strong);
  color: var(--green); text-transform: uppercase;   /* green all-caps, like the Canva */
  font-size: clamp(2.2rem, 4.9vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.01em;
}
.hero-lower { position: absolute; top: 555px; left: 15px; max-width: clamp(360px, 47vw, 570px); }   /* lower text + button block; narrows on tablet so the (shrunk) roundabout has room on the right */
.hero-sub {
  font-family: var(--font-subheading); font-weight: 700;   /* 700 so it clears WCAG large-text (3:1) — terracotta on white is 3.84 */
  color: var(--terracotta); font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  line-height: 1.3; margin: 0 0 18px;
}
.hero-lead { color: var(--mauve); font-size: clamp(1.02rem, 1.4vw, 1.18rem); margin: 0 0 28px; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plum); background: rgba(255,255,255,.72); padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(77,69,80,.14); animation: bob 1.8s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* ---------- Typographic pieces ---------- */
.sub-line {
  font-family: var(--font-subheading); font-weight: 700;   /* 700 → WCAG large-text (3:1) with the terracotta */
  color: var(--terracotta); font-size: var(--text-h4); margin: -0.2em 0 1.1em;
}
.lead-in { font-weight: 700; margin-bottom: .4rem; }
.pull-quote {
  font-family: var(--font-heading); font-weight: var(--weight-strong);
  color: var(--plum); font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.18; max-width: 20ch; margin: 1.2rem 0;
}
.pull-quote em { color: var(--terracotta); font-style: normal; }
.band-green .pull-quote { color: var(--color-text-inverse); }
.closing-line { font-family: var(--font-subheading); font-weight: 700; color: var(--terracotta); font-size: var(--text-h4); }   /* 700 → WCAG large-text (3:1) */
.route-seq {
  font-family: var(--font-heading); font-weight: 700; color: var(--green);
  font-size: var(--text-h4); line-height: 1.7; margin: 1.3rem 0;
}

/* ---------- Lists ---------- */
.check-list, .plain-list, .quote-list { list-style: none; padding: 0; margin: 0 0 1.2rem; max-width: 60ch; }
.check-list li, .plain-list li, .quote-list li { position: relative; padding: 6px 0 6px 34px; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 14px; height: 8px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green);
  transform: rotate(-45deg);
}
.band-green .check-list li::before { border-color: var(--gold-light); }
.quote-list li { padding-left: 20px; font-style: italic; color: var(--mauve); }
.quote-list li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--gold); border-radius: 3px; }
.plain-list li { padding-left: 20px; }
.plain-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--terracotta); font-weight: 700; }
.band-green .plain-list li::before { color: var(--gold-light); }

/* Feeling pills */
.feel-list { list-style: none; padding: 0; margin: .4rem 0 1.4rem; display: flex; flex-wrap: wrap; gap: 10px; }
.feel-list li {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--plum);
  background: rgba(255,255,255,.7); border: 1px solid #e3d8bd; padding: 8px 16px; border-radius: 999px;
}

/* ---------- Section icon accents ---------- */
.section-icon { width: clamp(52px, 6vw, 74px); height: auto; margin-bottom: 18px; opacity: .92; }

/* ---------- About & Working grids ---------- */
.about-grid, .working-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}

/* ---------- Blob photo frames (organic mask + dashed offset outline) ---------- */
.photo-blob { position: relative; margin: 0; }   /* no z-index here: children set their own so the road (z5) sits between them */
.photo-blob .blob-figure { position: relative; z-index: 6; }   /* image above the road */
.photo-blob .blob-outline {                                    /* dashed outline below the road, so the car drives over it */
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
  overflow: visible; pointer-events: none;
}
.blob-figure { display: block; width: 100%; height: auto; overflow: visible; }
.photo-blob .blob-img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  position: relative; z-index: 1; filter: saturate(.97) contrast(1.02);
}
.photo-blob .blob-dash {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  overflow: visible; transform: translate(-4.5%, 5.5%); opacity: .85;
}
.photo-blob .blob-dash--r { transform: translate(4.5%, 5.5%); }

/* Photos straddle the section boundary above them — each lifts up so it starts in the
   previous section and ends in this one (the road reads their live position and wraps past). */
/* move with position (NOT transform — transform would create a stacking context that traps the
   photo's z-index, letting the road + the green section paint over it). position:relative is already
   set by .photo-blob, so the image (z6) stays above the road (z5) and section backgrounds. */
.about-photo   { top: -290px; }   /* straddles method → about  (~1/4 in method, 3/4 in about) */
.working-photo { top: 337px; }    /* straddles working → cta (~3/4 in working, 1/4 into the green CTA) */

/* ---------- Contact ---------- */
.contact-methods { margin: 1.4rem 0; }
.contact-methods dt {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  color: var(--mauve); text-transform: uppercase; letter-spacing: .06em; margin-top: 1rem;
}
.contact-methods dd { margin: 4px 0 0; }
.contact-methods dd a {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--terracotta); text-decoration: none;   /* always terracotta so they read as links; blob is the hover cue */
}
.contact-loc { font-size: 1.05rem; color: var(--mauve); margin-top: 1.2rem; }
.contact-loc .loc-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.3em; color: var(--terracotta); }   /* matches the terracotta contact links */

/* ---------- Footer ---------- */
/* straight-topped green band, like the other (non-hero) sections */
.site-footer { position: relative; background: var(--green); color: var(--color-text-inverse); padding: clamp(48px, 7vh, 80px) 0 40px; --footer-label: #E9EEE4; /* light sage — the "quiet" tier; lightened to clear WCAG 4.5:1 on the green */ }
.footer-inner {
  /* narrow Explore + widen Contact: pulls Contact left toward Explore and gives the
     location line room to sit on one line */
  display: grid; grid-template-columns: 1.5fr 0.7fr 1.45fr; gap: 40px; align-items: start;
}
.footer-logo { height: 54px; width: auto; margin-bottom: 16px; }
.footer-tagline {
  font-family: var(--font-subheading); font-weight: 600; font-size: 1.15rem;
  color: var(--color-text-inverse); max-width: 24ch; line-height: 1.35;
}
.footer-cta { margin-top: 22px; text-align: left; }
.footer-badge-link { display: inline-block; margin-top: 24px; line-height: 0; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.footer-badge { display: block; width: 72px; height: auto; transition: opacity .15s ease;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }   /* ORSC seal + thin white outline (hugs the circle) */
.footer-badge-link:hover .footer-badge,
.footer-badge-link:focus-visible .footer-badge { opacity: .85; }
.footer-badge-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ORSC certificate lightbox (opened from the footer badge) */
.cert-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cert-lightbox[hidden] { display: none; }
.cert-lightbox__backdrop { position: absolute; inset: 0; background: rgba(30, 26, 34, .74); }
.cert-lightbox__panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(980px, 94vw); }
.cert-lightbox__img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.cert-lightbox__close { position: absolute; top: -16px; right: -16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--plum); font-size: 26px; line-height: 42px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.cert-lightbox__close:hover { background: var(--color-background); }
.cert-lightbox__pdf { color: #fff; font-size: var(--text-small); text-decoration: underline; text-underline-offset: 3px; }
.cert-lightbox__pdf:hover { color: var(--gold-light); }
@media (max-width: 680px) { .cert-lightbox { padding: 16px; } .cert-lightbox__close { top: -10px; right: -10px; } }
/* column headers + jump-nav (best-practice grouping) */
.col-head { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--footer-label); margin-bottom: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 11px; }
.footer-nav a { color: var(--color-text-inverse); text-decoration: none; opacity: 1; align-self: flex-start; }
.footer-nav a:hover { opacity: 1; }
/* on the green footer the blob is a darker shade of the band itself (like the live site), not gold */
.footer-nav a::before, .footer-links a::before { background: var(--green-deep); mix-blend-mode: normal; }
.footer-nav a:hover::before, .footer-links a:hover::before { opacity: 1; }
.footer-contact p { margin: 0 0 11px; }
.footer-contact .one-detail {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: #fff; text-decoration: none;
}
.footer-contact .one-detail .icon {
  position: relative; flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center; color: var(--gold);
}
.footer-contact .one-detail .icon svg { position: relative; z-index: 2; width: 19px; height: 19px; display: block; }
/* the hover blob sits BEHIND the icon (z-index 1 < svg's 2) */
.footer-contact .one-detail .icon::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--green-deep); opacity: 0; transform: scale(0);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: .4s;
}
.footer-contact a.one-detail:hover .icon::before { opacity: 1; transform: scale(1); animation: blobMorph 2.5s ease infinite; }
.footer-contact .one-detail .text { transition: opacity .2s; }        /* no underline; the icon blob is the hover cue */
.footer-contact a.one-detail:hover .text { opacity: .85; }
/* static rows (location, languages) = info, not links: muted cream icon (not gold), dimmed text, no hover */
.footer-contact .one-detail--static { cursor: default; }
.footer-contact .one-detail--static .icon { color: var(--gold-light); }   /* soft gold — less "screamy" than the light sage, still non-clickable info */
.footer-contact .one-detail--static .text { opacity: .8; }
.footer-langs { letter-spacing: .01em; }
/* legal sub-bar across the bottom */
.footer-legalbar { border-top: 1px solid rgba(255,255,255,.2); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: var(--text-small); color: var(--footer-label); }
.footer-legalbar .footer-links { display: flex; gap: 18px; margin: 0; }
.footer-links a { color: var(--footer-label); text-decoration: none; }
.footer-copyright { margin-left: auto; }

/* ---------- Cookie note ---------- */
.cookie-note {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  max-width: 780px; margin: 0 auto;
  background: var(--plum); color: #fff; border-radius: 14px; padding: 16px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; font-size: 14px; flex: 1; min-width: 240px; max-width: none; }   /* max-width:none beats the global `p{max-width:60ch}` so the text fills up to the buttons (no gap) */
.cookie-note a { color: var(--gold-light); white-space: nowrap; }   /* keep "Privacy Policy" on one line */
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
/* Both buttons sit on the dark plum banner. Accept = solid gold (primary, pops); Decline = light outline
   (secondary). Without these, .btn-small is plum-on-plum and .btn-ghost is plum-on-plum — both invisible. */
.cookie-note .btn-small { background: var(--gold); color: var(--plum); border-color: var(--gold); }
.cookie-note .btn-small:hover { background: var(--gold-light); border-color: var(--gold-light); }
.cookie-note .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cookie-note .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- Scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   Section polish (typography) — distilled from the desktop prototype
   (incoming/typography-prototype). One reading column, plain lists,
   grouped by proximity; approved per-section decisions in NOTES.md.
   ===================================================================== */
/* --- Problem: 18px body, grouped lists, 20px bold terracotta reassurance --- */
#problem .proto-revised { max-width: 680px; }
#problem .proto-revised h2 { max-width: 650px; margin-bottom: 30px; }
#problem .proto-intro p { font-size: 18px; line-height: 1.6; color: var(--plum); margin: 0 0 4px; }
#problem .proto-feelings { margin-top: 28px; }
#problem .proto-outcomes { margin-top: 4px; }
#problem .proto-label { font-size: 18px; margin: 0 0 4px; font-weight: 600; color: var(--plum); }
#problem .feel-list, #problem .check-list { display: block; list-style: none; margin: 0; padding: 0; }
#problem .feel-list li, #problem .check-list li {
  position: relative;
  font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.6;
  color: var(--plum); padding: 4px 0 4px 32px; border: 0; border-radius: 0; background: none;
}
#problem .check-list li::before { content: none; }   /* use the compass-marker SVG, not the CSS checkmark */
/* Bullet scheme for this (only white) section: deep-gold rings on the "Maybe you feel" list
   (rivka-ring-gold-dark.svg), default green compass arrows on the "you'll learn" list. */
#problem .proto-reassurance {
  font-family: var(--font-heading); font-size: var(--text-h4); font-weight: 700; line-height: 1.3;
  color: var(--terracotta); max-width: 560px; margin: 30px 0;
}
#problem .proto-close { font-size: 18px; line-height: 1.6; max-width: 550px; margin: 28px 0 0; }
#problem .proto-close strong { font-weight: 600; }

/* Reframe (typography pass, variant C): tighter 20px/700 statement, no break inside
   "It's a signal.", and hand-drawn compass-arrow bullets in place of the checkmarks. */
#reframe .pull-quote { font-size: var(--text-h4); font-weight: 700; line-height: 1.3; max-width: 28ch; }
#reframe .pull-quote em { white-space: nowrap; }
#reframe .check-list li::before { content: none; }
#reframe .check-list li { padding-left: 32px; }

/* Hand-drawn compass-arrow bullet (traced from the GPS Within logo) — shared by the
   Reframe, Method-learning and Working lists. */
.compass-marker {
  position: absolute; left: 4px; top: 13px; width: 13px; height: 13px;
  fill: none; stroke: var(--green); stroke-width: 6.25;
  stroke-linecap: round; stroke-linejoin: round; transform: rotate(-135deg);
}
/* Green favicon-ring bullet — shared by the Reframe and Method-foundation lists. */
.brand-ring { position: absolute; left: 3px; top: 12px; width: 15px; height: 15px; object-fit: contain; }

/* Method (typography pass, variant D): the scattered thoughts gather into one compact
   white "thought blob"; foundations wear the green favicon ring, learning outcomes the
   compass arrow; the close ends on a semibold positive promise. */
#method .method-refined h2 { margin-bottom: 30px; }
#method .method-refined p { font-size: 18px; line-height: 1.6; }
#method .method-opening p:first-child { margin-bottom: 4px; }
#method .method-turn { font-family: var(--font-subheading); font-size: 20px; font-weight: 700; color: var(--plum); margin: 28px 0 22px; }
#method .method-label { font-weight: 600; margin-bottom: 6px; }
#method .method-foundation .method-label { font-weight: 400; }
#method .method-learning { margin-top: 28px; }
#method .method-refined .check-list { margin: 0; }
#method .method-refined .check-list li { padding-left: 32px; font-size: 18px; }
#method .method-refined .check-list li::before { content: none; }
#method .method-ending { margin-top: 30px; }
#method .method-ending p:first-child { font-weight: 400; margin-bottom: 4px; }
#method .method-ending strong { font-weight: 600; }
#method .shared-thought { position: relative; isolation: isolate; width: max-content; max-width: 100%; padding: 27px 27px 42px; margin: 18px 0 16px; }
#method .thought-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--plum); stroke-width: 1.15; stroke-linecap: round; z-index: -1; }
#method .thought-fill { fill: var(--color-surface-warm); fill-opacity: 1; stroke: none; }
#method .thought-stroke { fill: none; vector-effect: non-scaling-stroke; }
#method .shared-thought .thought-bubbles { margin: 0; max-width: none; }
#method .thought-bubbles li { position: relative; padding: 5px 0; margin: 0 0 12px; color: var(--plum); font-size: 18px; line-height: 1.6; font-style: italic; }
#method .thought-bubbles li:last-child { margin-bottom: 0; }
#method .thought-bubbles li::before { content: none; }

/* Meet Rivka (typography pass, variant A): the story grouped into beats, with the
   turning points ("Life was giving me evidence." + the closing line) semibold and the
   route sequence set as a green Montserrat-Alternates refrain. */
#about .about-refined h2 { margin-bottom: 30px; }
#about .about-refined p { font-size: 18px; line-height: 1.6; }
#about .about-opening p { margin-bottom: 12px; }
#about .about-realization { margin: 26px 0; }
#about .about-realization p { margin: 0 0 4px; }
#about .about-realization p:first-child { font-weight: 600; }
#about .about-understanding p { margin-bottom: 14px; }
#about .about-refined .route-seq { font-family: var(--font-subheading); font-size: 20px; font-weight: 600; line-height: 1.6; margin: 26px 0; color: var(--green); }
#about .about-ending p { margin: 0 0 14px; }
#about .about-ending p:last-child { margin: 26px 0 0; }   /* closing line: a little extra breath of space above it (normal weight) */
/* keep each section's bottom whitespace equal to its top (100px): drop the last line's trailing
   16px margin so the bottom gap isn't 100+16. (About/CTA/Problem already sit clean at 100.) */
#method .method-ending p:last-child,
#reframe .closing-line,
#working .working-minimal > p:last-child { margin-bottom: 0; }

/* Working with Me (typography pass): keep the original layout; swap the check-marks for
   the shared compass-arrow bullets, and calm the pull-quote's desktop max from ~34px to
   28px (mobile size unchanged — only the fluid maximum drops). */
#working .working-minimal .check-list li { padding-left: 32px; }
#working .working-minimal .check-list li::before { content: none; }
#working .pull-quote { font-size: clamp(1.4rem, 3vw, 28px); }

/* Ready to Try (typography pass, variant A): keep the original layout/typography; only
   replace the arrow bullets with the gold favicon-ring SVGs. */
#cta .cta-minimal .plain-list li::before { content: none; }
#cta .cta-minimal .cta-ring { position: absolute; left: 0; top: 13px; width: 13px; height: 13px; object-fit: contain; }

/* ---------- Responsive ---------- */
/* ---------- Tablet (681–1199px) ---------- */
/* Keep the two-column layout and the road's curve, but narrow the section photos so the
   road has room to wrap AROUND them (as main.js intends) instead of clamping to the screen
   edge and cutting across. Desktop (≥1200) and mobile (≤680) are untouched. */
/* ---------- Desktop (≥1200px) ---------- */
@media (min-width: 1200px) {
  /* the hero is a fixed 1010px stage, so the scroll cue (pinned to the hero bottom) drops below
     the fold on shorter laptop screens — position it near the bottom of the VIEWPORT instead,
     capped so it never falls below the hero on tall screens */
  .scroll-hint { top: min(calc(100vh - 52px), calc(100% - 72px)); bottom: auto; }
  /* nudge the lower text + CTA block up (extra 10px to offset the taller sub-heading below) */
  .hero-lower { top: 535px; }
  /* (Rivka b) the fixed 1010px stage left ~179px of dead space between the CTA and the next
     section's h2; trim to ~120px while keeping the hero airy (button ends ~831, roundabout ~805). */
  .hero { height: 950px; }
  /* (Rivka) enlarge the "Feeling stuck…" sub-heading — 1.75rem is the biggest that safely holds
     2 lines in the ~563px column (it wraps to 3 by ~1.85rem); scoped to desktop so the narrower
     tablet column doesn't wrap. */
  .hero-sub { font-size: 1.75rem; font-weight: 600; }   /* 28px is already "large" (3:1), so no bold needed on desktop; tablet/mobile keep 700 since they're smaller */
  /* About: let the TEXT set the section height, so there's no dead space above/below it (the photo is
     ~90px taller than the copy). The photo is positioned absolutely so it keeps its exact ~1/4-in-Method
     / 3/4-in-About straddle (top: -290) WITHOUT reserving grid height. Desktop only; tablet/mobile keep
     the in-flow layout. */
  #about .about-grid { position: relative; align-items: start; }
  #about .about-photo { position: absolute; right: 0; top: -290px; width: calc(50% - 32px); margin: 0; }
}

@media (min-width: 681px) and (max-width: 1199px) {
  .about-photo, .working-photo { justify-self: start; max-width: clamp(250px, 33vw, 350px); }
  /* trim the section rhythm: between desktop (~90–118px) and mobile (48px) */
  .section { padding: 64px 0; }
  /* re-fit the straddling photos after the section padding was trimmed: nudge Meet Rivka
     down and Working up (~the padding we removed) so each sits in its own section */
  .about-photo { top: -218px; }
  .working-photo { top: 265px; }
}
/* (a) narrow-tablet hero: it reads empty because the art is a fixed desktop-sized stage.
   Compact it — bigger h1 pulled up (fills the cream), and a shorter stage to cut the dead
   space below. The seam + roundabout keep their positions. ≥ ~1000px already reads well. */
@media (min-width: 681px) and (max-width: 1199px) {
  /* height tracks the content ramp (lower text block + button + scroll hint) so the stage
     ends just below the button instead of leaving dead space before the next section */
  .hero { height: calc(590px + 100vw * 0.25); }
  /* keep 768 (iPad Mini) at 120; nudge the h1 down a touch as it grows on wider tablets so
     it isn't crowding the logo (capped so it never drifts too far) */
  .hero-title { top: min(155px, calc(120px + (100vw - 768px) * 0.12)); font-size: clamp(2.7rem, 6.6vw, 3.6rem); }
  /* follow the seam lift (main.js HERO_SHIFT ramps by 0.3·(1200−W)) so the lower text block
     keeps a ~65px gap below the seam at every tablet width */
  .hero-lower { top: calc(175px + 100vw * 0.3); }
  /* Gefen wants the scroll cue on tablet too (there's room in the compact hero). It sits at the
     base bottom:40px, centred at the foot of the hero. */
  .scroll-hint { display: block; }
}
/* (b) at the narrow end only, keep the Method heading in the text column so it wraps and
   clears the road (at ≥ ~900px the one-line heading already clears it). */
@media (min-width: 681px) and (max-width: 860px) {
  #method .method-refined h2 { max-width: 62%; }
}

@media (max-width: 680px) {
  .ed-br { display: none; }   /* editorial line-breaks (Steve's) help on desktop/tablet; on the narrow phone column they orphan a word, so drop them and let the text wrap naturally */
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-background); border-bottom: 1px solid var(--color-divider);
    padding: 10px 15px 22px;
    box-shadow: 0 14px 30px rgba(77,69,80,.12);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .site-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
  .site-nav > a:not(.btn):hover { border-bottom-color: var(--color-divider); }
  .btn-nav { margin-top: 14px; text-align: center; justify-content: center; }

  .about-grid, .working-grid { grid-template-columns: 1fr; }
  .about-photo, .working-photo { max-width: 380px; top: auto; }
  /* Meet Rivka: photo leads the section AND straddles up into the cream method band above
     (~1/4 in method); extra bottom padding on method gives the photo breathing room above it. */
  #method { padding-bottom: 150px; }
  #about { padding-top: 40px; }
  .about-photo { order: -1; margin: -140px auto 26px; }
  /* Couch: stays at the bottom of Working and straddles down ~1/4 into the green CTA; extra top
     padding on the CTA gives the photo breathing room below it. z-index lifts Working above the
     CTA so the photo paints over the green, not under it. */
  #working { z-index: 2; }
  #cta { z-index: 1; padding-top: 150px; }
  .working-photo { margin-bottom: -180px; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-copyright { margin-left: 0; }

  /* MOBILE ROAD: the winding road becomes a slim ribbon down a right-side gutter (main.js draws
     the mobile geometry). Section content is inset on the right so text/photos clear the ribbon. */
  .route-svg { display: block; }
  .section .wrap { padding-right: 62px; }
  /* tighter section rhythm on mobile (desktop uses ~84–118px; that's a big gap on a phone).
     The larger straddle paddings below (#method/#cta) override this for their own side. */
  .section { padding: 48px 0; }

  /* the scroll hint collides with the roundabout zone on mobile; drop it (touch users scroll anyway) */
  .scroll-hint { display: none; }

  /* leave the fixed 1920x1080 stage on mobile — stack the hero text in a normal flow.
     Extra bottom padding reserves a clear zone for the roundabout below the hero copy. */
  .hero { height: auto; padding: clamp(90px, 14vh, 130px) 0 88px; }   /* more breathing room from the CTA to the next section (was 56 — felt crowded) */
  .hero-inner { height: auto; }
  .hero-copy { display: flex; flex-direction: column; }
  /* Rivka's live-site hero order on mobile: h1 → roundabout (in the gap) → subheading/lead/CTA.
     The gap below the h1 is where main.js drops the roundabout as the above-the-fold hook. */
  /* bolder headline on mobile (the desktop clamp bottoms out at 35px here, too timid); 3 clean lines.
     Drop the desktop line-break so the bigger text wraps naturally (no orphaned "back"). */
  .hero-title { position: static; top: auto; max-width: 100%; margin: 0 0 232px; font-size: clamp(2.5rem, 11.5vw, 3.1rem); line-height: 1.05; }
  .hero-title br { display: none; }
  /* inset the lower copy so the road (now in the gutter by the time it reaches here) stays clear of the text */
  .hero-lower { position: static; top: auto; max-width: 46ch; padding-right: 62px; box-sizing: border-box; }
  /* crank the subheading up on mobile (desktop clamp bottoms out at ~18px); a real sub-headline.
     Road-hugging wrap: a floated shape on the right hugs the road as it peels off, so the text is
     narrow at the top (by the roundabout) and widens as it goes down. */
  .hero-sub { font-size: clamp(1.45rem, 6.5vw, 1.75rem); line-height: 1.2; max-width: none; margin-right: -62px; }
  .hero-sub::before {
    content: ""; float: right; width: 52%; height: 172px;
    shape-outside: polygon(20% 0, 100% 0, 100% 100%, 72% 100%); shape-margin: 9px;
  }
  .hero-lead { font-size: 1.125rem; }   /* 18px — match the section body size on mobile */
  /* let the reassurance flow naturally on mobile (drop the desktop hard break) */
  #problem .proto-reassurance br { display: none; }
}

@media (max-width: 560px) {
  .hero { min-height: auto; }
  .cookie-note { flex-direction: column; align-items: flex-start; }
}

/* ---------- Legal pages ---------- */
.legal-header { border-bottom: 1px solid var(--color-divider); background: var(--color-background); }
.legal-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px; }
.legal-header img { height: 46px; width: auto; }
.legal-back { font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-decoration: none; color: var(--green); }
.legal-page { padding: clamp(40px, 7vh, 80px) 0; }
.legal-page article { max-width: 760px; }
.legal-page h1 { color: var(--color-heading); font-size: var(--text-h2); font-weight: var(--weight-strong); }
.legal-page h2 { font-size: var(--text-h3); margin-top: 1.8rem; }
.legal-page a { color: var(--green); overflow-wrap: anywhere; }
.legal-page .updated { color: var(--mauve); font-style: italic; }
.legal-footer { border-top: 1px solid var(--color-divider); padding: 24px 0; font-size: var(--text-small); color: var(--mauve); }
.legal-footer .wrap { text-align: center; }
.legal-footer a { color: var(--green); text-decoration: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  /* keep the blob appearing on hover, but hold a still shape (no morph loop) */
  .blob-hover:hover::before,
  .site-nav > a:not(.btn):hover::before,
  .footer-nav a:hover::before,
  .contact-methods dd a:hover::before,
  .footer-links a:hover::before,
  .footer-contact a.one-detail:hover .icon::before { animation: none; }
}