/* ============================================================
   VALORE — RIVER RE-SKIN  (loaded AFTER style.css)
   The living-water design. Nav + footer are themed globally so
   every page shares one shell. Everything else is themed under
   body.river, an opt-in the interactive tools do not carry, so
   their working light UI is left untouched.
   Palette: ground #04101f · navy #002664 · cream #fff4ca
            aqua #5fd3d0 · aqua-bright #9cf0ec · slate #9db0c7
============================================================ */

:root{
  --r-ground:#04101f; --r-ground-2:#062340; --r-navy:#002664;
  --r-cream:#fff4ca; --r-aqua:#5fd3d0; --r-aqua-bright:#9cf0ec;
  --r-slate:#9db0c7; --r-line:rgba(157,176,199,.16);
  --r-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --r-sans:'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------
   1. LIVING-WATER BACKGROUND  (injected by animations.js on .river)
--------------------------------------------------------------- */
.water-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:var(--r-ground); }
.water-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.water-tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,16,31,.70) 0%, rgba(4,16,31,.80) 55%, rgba(4,16,31,.90) 100%); }
.water-fallback{ position:absolute; inset:0; background:radial-gradient(140% 80% at 50% -10%, #0e3b66 0%, rgba(14,59,102,0) 55%), linear-gradient(180deg,#04101f,#072a4d 48%,#04101f); }

/* River spine — a single current that threads the whole page */
.river-track{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:hidden; opacity:.92; }
.river-track .river-svg{ width:100%; height:100%; display:block; }
.river-track .river-bed{ fill:none; stroke:rgba(95,211,208,.08); stroke-width:2; vector-effect:non-scaling-stroke; }
.river-track .river-glow{ fill:none; stroke:rgba(95,211,208,.10); stroke-width:7; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px rgba(95,211,208,.16)); }
.river-track .river-flow{ fill:none; stroke:rgba(46,148,142,.82); stroke-width:2.4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 1px rgba(3,22,26,.6)); }
.river-track .river-current{ fill:none; stroke:rgba(62,186,178,.98); stroke-width:3.2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:3 300; filter:drop-shadow(0 0 1.4px rgba(3,22,26,.9)); animation:r-current 7s linear infinite; }
@keyframes r-current{ to{ stroke-dashoffset:-303; } }

body.river{ background:var(--r-ground); color:var(--r-slate); }
/* Background layers sit at negative z-index (fixed), so page content keeps its
   natural stacking above them with no per-child position hacks. The nav stays
   fixed, and nothing is pushed into the flow. */

/* ---------------------------------------------------------------
   2. NAV — themed globally (shared shell on every page)
--------------------------------------------------------------- */
body .nav{ background:transparent; border-bottom:1px solid transparent; box-shadow:none; transition:background .4s ease, border-color .4s ease, padding .4s ease; }
body .nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(4,16,31,.5), transparent); pointer-events:none; transition:opacity .4s; }
body .nav.nav--scrolled{ background:rgba(4,16,31,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--r-line); }
body .nav.nav--scrolled::before{ opacity:0; }
body .nav__logo-name{ font-family:var(--r-serif); color:var(--r-cream); letter-spacing:.04em; }
body .nav__logo-sub{ color:var(--r-slate); letter-spacing:.14em; }
body .nav__link{ color:#eaf1f8; }
body .nav__link:hover{ color:var(--r-cream); }
body .nav.nav--scrolled .nav__link{ color:var(--r-slate); }
body .nav.nav--scrolled .nav__link:hover{ color:var(--r-cream); }
body .nav__cta{ display:inline-block; background:var(--r-cream); color:var(--r-navy); border:none; letter-spacing:.06em; text-transform:uppercase; font-weight:600; border-radius:3px; padding:.95rem 2rem; transition:transform .25s, box-shadow .25s, background .25s; }
body .nav__cta:hover{ transform:translateY(-2px); background:#fff; box-shadow:0 10px 30px rgba(255,244,202,.28); }
body .nav__hamburger span{ background:var(--r-cream); }
@media(max-width:900px){
  body .nav__links{ background:rgba(4,16,31,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--r-line); }
  body .nav__links .nav__link{ color:#eaf1f8; }
}

/* ---------------------------------------------------------------
   3. FOOTER — themed globally
--------------------------------------------------------------- */
body .footer{ background:rgba(4,16,31,.72); backdrop-filter:blur(6px); border-top:1px solid var(--r-line); color:var(--r-slate); }
body .footer__tools{ border-bottom:1px solid var(--r-line); }
body .footer__tools-label{ color:var(--r-aqua); letter-spacing:.2em; }
body .footer__tools a{ color:var(--r-slate); }
body .footer__tools a:hover{ color:var(--r-cream); }
body .footer__name{ font-family:var(--r-serif); color:var(--r-cream); }
body .footer__tagline{ color:var(--r-slate); letter-spacing:.2em; }
body .footer__copy{ color:rgba(157,176,199,.55); }
body .footer__social a{ color:rgba(255,244,202,.6); }
body .footer__social a:hover{ color:var(--r-cream); }

/* ===============================================================
   EVERYTHING BELOW IS SCOPED TO  body.river
=============================================================== */

/* ---------------------------------------------------------------
   4. SHARED SECTION SYSTEM (re-themes inner pages with no markup change)
--------------------------------------------------------------- */
body.river{ font-family:var(--r-sans); line-height:1.6; }
body.river .section{ background:transparent; background-image:none; padding:clamp(4.5rem,11vh,8rem) 0; }
body.river .section--cream,
body.river .section--light,
body.river .section--navy{ background:transparent; background-image:none; }
body.river .section--cream{ background:rgba(7,28,57,.34); }
body.river .section--navy{ background:rgba(2,10,24,.42); }

body.river .label{ color:var(--r-aqua); font-weight:500; letter-spacing:.22em; }
body.river .label--navy,
body.river .label--light{ color:var(--r-aqua); }

body.river .section__headline{ font-family:var(--r-serif); font-weight:300; color:var(--r-cream); letter-spacing:-.005em; text-wrap:balance; }
body.river .section__headline--light{ color:var(--r-cream); }
body.river .section__headline em{ font-style:italic; color:var(--r-aqua-bright); }
body.river .section__body{ color:var(--r-slate); font-size:1.28rem; }
body.river .section__body--light{ color:var(--r-slate); }
body.river blockquote,
body.river .about-quote{ color:var(--r-cream); border-color:var(--r-line); }
body.river .about-quote cite{ color:var(--r-aqua); }

/* Buttons */
body.river .btn{ background:var(--r-cream); color:var(--r-navy); border:none; letter-spacing:.06em; text-transform:uppercase; font-weight:600; border-radius:2px; transition:transform .25s, box-shadow .25s; }
body.river .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(255,244,202,.22); }
body.river .btn--navy{ background:var(--r-cream); color:var(--r-navy); }
body.river .btn--cream{ background:var(--r-cream); color:var(--r-navy); }
body.river .btn--ghost{ background:transparent; color:var(--r-cream); border:1px solid rgba(255,244,202,.5); }
body.river .cta-note,
body.river .hero__note,
body.river .packages-note,
body.river .form-submit-note{ color:rgba(157,176,199,.7); }

/* Inner-page hero (about/services/process/menswear/b2b/brand-brain) */
body.river .page-hero{ background:transparent; padding:clamp(9rem,20vh,13rem) 0 clamp(2rem,5vh,3.5rem); text-align:center; }
body.river .page-hero .container{ text-align:center; }
body.river .page-hero__label{ color:var(--r-aqua); letter-spacing:.28em; }
body.river .page-hero__headline{ font-family:var(--r-serif); font-weight:300; font-size:clamp(2.9rem,6vw,4.9rem); line-height:1.08; color:var(--r-cream); text-wrap:balance; text-align:center; max-width:900px; margin-left:auto; margin-right:auto; }
body.river .page-hero__headline em{ font-style:italic; color:var(--r-aqua-bright); }
body.river .page-hero__body{ color:var(--r-slate); font-size:1.22rem; text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }

/* Old homepage hero classes, should any remain on an inner surface */
body.river .hero{ background:transparent; }
body.river .hero__headline{ font-family:var(--r-serif); color:#fff; }
body.river .hero__lead, body.river .hero__body{ color:#dfeaf3; }

/* lead statement / pain / manifesto / marquee */
body.river .lead-statement{ color:var(--r-cream); font-family:var(--r-serif); }
body.river .lead-statement strong{ color:var(--r-aqua-bright); }
body.river .pain-statement{ color:var(--r-slate); border-color:var(--r-line); }
body.river .manifesto{ background:rgba(2,10,24,.4); }
body.river .manifesto__eyebrow{ color:var(--r-aqua); }
body.river .manifesto__text{ color:var(--r-cream); font-family:var(--r-serif); }
body.river .marquee-strip{ background:rgba(2,10,24,.5); border-block:1px solid var(--r-line); color:var(--r-slate); }
body.river .marquee-sep{ color:var(--r-aqua); }

/* card-ish inner components → dark glass surfaces */
body.river .service-item,
body.river .service-block,
body.river .pricing-box,
body.river .package,
body.river .stat-item,
body.river .casehub-card{
  background:rgba(7,28,57,.42); border:1px solid var(--r-line); border-radius:4px;
}
body.river .service-item__title,
body.river .service-block__name,
body.river .pricing-box__headline,
body.river .package__name{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .service-item__body,
body.river .service-block__for,
body.river .pricing-box__body,
body.river .package__tag,
body.river .package__list li,
body.river .service-block__list li{ color:var(--r-slate); }
body.river .service-block__num,
body.river .package__num,
body.river .service-block__col-label,
body.river .service-block__outcome-label,
body.river .pricing-box__label{ color:var(--r-aqua); }
body.river .service-block__outcome{ background:rgba(4,16,31,.5); border-left:2px solid var(--r-aqua); }
body.river .service-block__outcome p{ color:var(--r-slate); }
body.river .package--featured{ background:linear-gradient(160deg, rgba(95,211,208,.16), rgba(7,28,57,.55)); border-color:rgba(95,211,208,.5); }
body.river .package__price{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .packages-note{ color:rgba(157,176,199,.78); }

/* stats */
body.river .stat-item__num{ font-family:var(--r-serif); color:var(--r-aqua-bright); }
body.river .stat-item__unit{ color:var(--r-aqua); }
body.river .stat-item__label{ color:var(--r-slate); }
body.river .brand-stats{ background:rgba(2,10,24,.4); }

/* case-study hub */
body.river .casehub-link{ color:var(--r-aqua); }
body.river .casehub-stats .stat-item{ background:transparent; border:none; }

/* process steps */
body.river .process-step{ border-bottom:1px solid var(--r-line); }
body.river .process-step__num{ font-family:var(--r-serif); color:var(--r-aqua); }
body.river .process-step__title{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .process-step__body{ color:var(--r-slate); }
body.river .process-step__note{ color:rgba(156,240,236,.85); }

/* about photo */
body.river .about-photo{ border:1px solid var(--r-line); border-radius:6px; }

/* ---------------------------------------------------------------
   5. FORMS (contact / brand-brain enquiry) on the dark ground
--------------------------------------------------------------- */
body.river .form-label{ color:var(--r-slate); }
body.river .form-input,
body.river .form-select,
body.river .form-textarea{
  background:rgba(4,16,31,.6); border:1px solid var(--r-line); color:var(--r-cream);
}
body.river .form-input::placeholder,
body.river .form-textarea::placeholder{ color:rgba(157,176,199,.6); }
body.river .form-input:focus,
body.river .form-select:focus,
body.river .form-textarea:focus{ outline:none; border-color:var(--r-aqua); box-shadow:0 0 0 3px rgba(95,211,208,.16); }
body.river .form-input.is-error,
body.river .form-select.is-error,
body.river .form-textarea.is-error{ border-color:#e0736b; }
body.river .form-status--error{ color:#f0a59d; }
body.river .form-select option{ background:var(--r-ground-2); color:var(--r-cream); }

/* ---------------------------------------------------------------
   6. BLOG — index grid + 128 posts, re-themed with no markup change
--------------------------------------------------------------- */
body.river .blog-grid{ }
body.river .blog-card{ background:rgba(7,28,57,.42); border:1px solid var(--r-line); border-radius:5px; transition:transform .25s, border-color .25s, background .25s; }
body.river .blog-card:hover{ transform:translateY(-4px); border-color:rgba(95,211,208,.5); background:rgba(7,28,57,.62); }
body.river .blog-card__tag, body.river .bc-tag{ color:var(--r-aqua); letter-spacing:.18em; }
body.river .blog-card__title{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .blog-card__excerpt{ color:var(--r-slate); }
body.river .blog-card__meta{ color:rgba(157,176,199,.6); }

/* Blog post shell */
body.river .post-breadcrumb__list,
body.river .post-breadcrumb__item,
body.river .post-breadcrumb__current{ color:var(--r-slate); }
body.river .post-breadcrumb a,
body.river .post-breadcrumb__item a{ color:var(--r-aqua); }
body.river .post-breadcrumb a:hover,
body.river .post-breadcrumb__item a:hover{ color:var(--r-cream); }
body.river .post-header__tag{ color:var(--r-aqua); letter-spacing:.2em; }
body.river .post-header__title{ font-family:var(--r-serif); font-weight:300; color:var(--r-cream); }
body.river .post-header__subtitle{ color:var(--r-slate); }
body.river .post-meta__item{ color:rgba(157,176,199,.7); }
body.river .post-meta__sep{ color:var(--r-line); }
body.river .post-body{ color:#c7d4e2; font-size:1.16rem; }
body.river .post-body h2{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .post-body h3{ color:var(--r-cream); }
body.river .post-body a{ color:var(--r-aqua); text-decoration:underline; text-underline-offset:3px; }
body.river .post-body a:hover{ color:var(--r-aqua-bright); }
body.river .post-body strong{ color:#eaf1f8; }
body.river .post-body blockquote{ border-left:2px solid var(--r-aqua); color:var(--r-cream); }
body.river .post-takeaways,
body.river .post-toc,
body.river .post-lead-magnet,
body.river .post-cta-inline,
body.river .post-author,
body.river .post-faq__item,
body.river .post-related__card{
  background:rgba(7,28,57,.42); border:1px solid var(--r-line); border-radius:5px;
}
body.river .post-takeaways__label,
body.river .post-toc__label,
body.river .post-related__label,
body.river .post-faq__label,
body.river .post-lead-magnet__eyebrow{ color:var(--r-aqua); }
body.river .post-takeaways__list li,
body.river .post-toc__list a{ color:var(--r-slate); }
body.river .post-toc__list a:hover{ color:var(--r-cream); }
body.river .post-lead-magnet__title,
body.river .post-faq__headline,
body.river .post-related__title,
body.river .post-author__name{ font-family:var(--r-serif); color:var(--r-cream); }
body.river .post-lead-magnet__body,
body.river .post-faq__a,
body.river .post-author__bio,
body.river .post-related__tag{ color:var(--r-slate); }
body.river .post-faq__q{ color:var(--r-cream); }
body.river .post-author__role{ color:var(--r-aqua); }
body.river .post-figure figcaption{ color:rgba(157,176,199,.6); }
body.river .post-cta-inline{ background:linear-gradient(160deg, rgba(95,211,208,.14), rgba(7,28,57,.5)); border-color:rgba(95,211,208,.4); }

/* ---------------------------------------------------------------
   7. HOMEPAGE RIVER COMPONENTS (new markup)
--------------------------------------------------------------- */
body.river .band{ max-width:1160px; margin:0 auto; padding:clamp(5rem,12vh,9rem) clamp(1.25rem,5vw,3rem); position:relative; }
body.river h2.r-h2{ font-family:var(--r-serif); font-weight:300; font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.08; color:var(--r-cream); text-wrap:balance; margin-bottom:1.3rem; }
body.river .r-h2 em{ font-style:italic; color:var(--r-aqua-bright); }
body.river p.r-body{ font-size:1.32rem; color:var(--r-slate); }
body.river .r-label{ font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--r-aqua); margin-bottom:1.3rem; }

/* HERO */
body.river .r-hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7rem clamp(1.25rem,5vw,2rem) 4rem; overflow:hidden; }
body.river .hero-night{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(70% 45% at 72% 12%, rgba(150,190,240,.16), rgba(150,190,240,0) 60%), linear-gradient(180deg, rgba(2,8,22,.60) 0%, rgba(3,14,34,.72) 55%, rgba(4,16,31,.9) 100%); }
body.river .hero-ripple{ position:absolute; inset:0; z-index:2; pointer-events:none; }
body.river .hero-fade{ position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(4,16,31,0) 0%, rgba(4,16,31,.55) 68%, var(--r-ground) 100%); }
body.river .hero-inner{ position:relative; z-index:3; max-width:1280px; width:100%; }
body.river .eyebrow{ font-size:.92rem; letter-spacing:.34em; text-transform:uppercase; color:var(--r-aqua-bright); font-weight:600; margin-bottom:1.7rem; text-shadow:0 2px 18px rgba(0,0,0,.5); }
body.river .r-hero h1{ font-family:var(--r-serif); font-weight:400; font-size:clamp(3.4rem,9.6vw,8.6rem); line-height:1.0; color:#fff; letter-spacing:-.015em; text-wrap:balance; margin-bottom:1.8rem; text-shadow:0 2px 40px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
body.river .r-hero h1 .l2{ display:block; font-style:italic; color:var(--r-aqua-bright); }
body.river .r-hero .sub{ max-width:720px; margin:0 auto; font-size:clamp(1.2rem,1.7vw,1.5rem); color:#dfeaf3; text-shadow:0 2px 24px rgba(0,0,0,.6); }
body.river .scroll-cue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:.7rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:#eef4f7; }
body.river .scroll-cue .dot{ width:1px; height:46px; background:linear-gradient(#eef4f7, transparent); position:relative; overflow:hidden; }
body.river .scroll-cue .dot::after{ content:""; position:absolute; left:0; top:0; width:1px; height:14px; background:#fff; animation:r-flowdown 2s ease-in-out infinite; }
@keyframes r-flowdown{ 0%{ transform:translateY(-14px); } 100%{ transform:translateY(46px); } }

/* THROUGH statement */
body.river .through{ text-align:center; max-width:900px; margin:0 auto; }
body.river .through .big{ font-family:var(--r-serif); font-weight:300; line-height:1.12; font-size:clamp(2.2rem,5.5vw,4.4rem); color:var(--r-cream); text-wrap:balance; }
body.river .through .big .stop{ font-style:italic; color:var(--r-aqua-bright); }

/* VALUES sticky */
body.river .values{ height:340vh; position:relative; }
body.river .values-sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 1.5rem; }
body.river .values-words{ display:flex; flex-wrap:wrap; gap:clamp(.6rem,3vw,2.2rem); justify-content:center; margin-bottom:2.4rem; }
body.river .vw{ font-family:var(--r-serif); font-weight:300; font-size:clamp(2.1rem,7vw,5rem); line-height:1; color:rgba(157,176,199,.32); transition:color .5s ease, transform .5s ease; }
body.river .vw.active{ color:var(--r-cream); transform:translateY(-4px); }
body.river .vw.sep{ color:var(--r-aqua); }
body.river .values-cap{ position:relative; height:6.5rem; max-width:660px; width:100%; }
body.river .vcap{ position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; font-size:1.4rem; color:var(--r-slate); }
body.river .vcap.show{ opacity:1; transform:none; }
body.river .values-hint{ margin-top:2.5rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(157,176,199,.5); }

/* CLIMB */
body.river .climb-head{ text-align:center; max-width:760px; margin:0 auto clamp(3rem,7vh,5rem); }
body.river .climb{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; }
body.river .rung{ border:1px solid var(--r-line); border-radius:3px; padding:2.4rem 1.8rem; background:rgba(7,28,57,.4); position:relative; overflow:hidden; }
body.river .rung::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(var(--r-aqua), transparent); opacity:.4; }
body.river .rung.peak::before{ opacity:1; box-shadow:0 0 18px var(--r-aqua); }
body.river .rung .n{ font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--r-aqua); margin-bottom:1rem; }
body.river .rung h3{ font-family:var(--r-serif); font-weight:400; font-size:1.9rem; color:var(--r-cream); margin-bottom:.7rem; }
body.river .rung.peak h3{ color:var(--r-aqua-bright); }
body.river .rung p{ font-size:1.18rem; color:var(--r-slate); }
@media(max-width:820px){ body.river .climb{ grid-template-columns:1fr; } }

/* OFFERS */
body.river .offer-head{ text-align:center; max-width:760px; margin:0 auto clamp(3rem,6vh,4.5rem); }
body.river .offers{ display:flex; align-items:stretch; gap:.7rem; max-width:1240px; margin:0 auto; }
body.river .offer{ flex:1 1 0; min-width:0; border:1px solid var(--r-line); border-radius:5px; padding:2.4rem 1.9rem; background:rgba(7,28,57,.45); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, background .3s; }
body.river .offer:hover{ transform:translateY(-8px); border-color:rgba(95,211,208,.55); box-shadow:0 28px 66px rgba(0,0,0,.42); }
body.river .offer:hover h3{ color:var(--r-aqua-bright); }
body.river .offer:hover .offer-link{ color:var(--r-aqua-bright); }
body.river .offer.entry{ background:linear-gradient(160deg, rgba(95,211,208,.17), rgba(7,28,57,.55)); border-color:rgba(95,211,208,.62); box-shadow:0 0 0 1px rgba(95,211,208,.22), 0 20px 60px rgba(0,0,0,.28); }
body.river .offer-arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--r-aqua); font-family:var(--r-serif); font-size:2.3rem; opacity:.6; }
body.river .offer .kicker{ font-size:.73rem; letter-spacing:.17em; text-transform:uppercase; color:var(--r-aqua); margin-bottom:.9rem; min-height:1.1rem; }
body.river .offer.entry .kicker{ color:var(--r-aqua-bright); }
body.river .offer h3{ font-family:var(--r-serif); font-weight:400; font-size:2rem; color:var(--r-cream); margin-bottom:.9rem; }
body.river .offer.entry h3{ color:var(--r-aqua-bright); }
body.river .offer p{ font-size:1.14rem; color:var(--r-slate); margin-bottom:1.6rem; flex:1; }
body.river .offer .price{ font-family:var(--r-serif); font-size:1.5rem; color:var(--r-cream); min-height:3.4rem; }
body.river .offer .price small{ display:block; font-family:var(--r-sans); font-size:.82rem; color:var(--r-slate); letter-spacing:.03em; margin-top:.2rem; }
body.river .offer-link{ display:inline-block; margin-top:1rem; font-size:.98rem; color:var(--r-aqua); font-weight:500; }
body.river .offer-note{ text-align:center; max-width:700px; margin:2.6rem auto 0; font-size:1.05rem; color:rgba(157,176,199,.78); font-style:italic; }
@media(max-width:860px){ body.river .offers{ flex-direction:column; } body.river .offer-arrow{ transform:rotate(90deg); align-self:center; padding:.4rem 0; } }

/* PROOF / testimonials */
body.river .proof-head{ text-align:center; max-width:820px; margin:0 auto clamp(3rem,6vh,4.5rem); }
body.river .proofs{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1000px; margin:0 auto; }
body.river .proof{ border:1px solid var(--r-line); border-radius:4px; padding:2.4rem 2rem; background:rgba(7,28,57,.4); }
body.river .proof .who{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--r-aqua); margin-bottom:1.6rem; }
body.river .proof .stats{ display:flex; flex-direction:column; gap:1.3rem; }
body.river .proof .stat{ display:flex; align-items:baseline; gap:.9rem; border-bottom:1px solid var(--r-line); padding-bottom:1.2rem; }
body.river .proof .stat:last-child{ border-bottom:none; padding-bottom:0; }
body.river .proof .num{ font-family:var(--r-serif); font-size:2.5rem; line-height:1; color:var(--r-aqua-bright); font-weight:400; }
body.river .proof .desc{ font-size:1.12rem; color:var(--r-slate); }
@media(max-width:760px){ body.river .proofs{ grid-template-columns:1fr; } }
body.river .proof-wide{ display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center; max-width:1000px; margin:1.5rem auto 0; border:1px solid var(--r-line); border-radius:4px; padding:2.4rem 2rem; background:rgba(7,28,57,.4); }
body.river .proof-wide .pw-h{ font-family:var(--r-serif); font-weight:400; font-size:1.7rem; color:var(--r-cream); margin:.2rem 0 .8rem; }
body.river .pw-tags{ display:flex; flex-direction:column; gap:.8rem; }
body.river .pw-tags span{ font-size:1.05rem; color:var(--r-aqua-bright); border-left:2px solid var(--r-aqua); padding-left:.9rem; }
@media(max-width:760px){ body.river .proof-wide{ grid-template-columns:1fr; } }

/* CTA band */
body.river .cta{ text-align:center; max-width:820px; margin:0 auto; padding:clamp(5rem,12vh,9rem) clamp(1.25rem,5vw,3rem); }
body.river .cta h2{ font-family:var(--r-serif); font-weight:300; font-size:clamp(2rem,4.6vw,3.5rem); color:var(--r-cream); margin-bottom:1.4rem; text-wrap:balance; }
body.river .cta h2 em{ font-style:italic; color:var(--r-aqua-bright); }
body.river .cta p{ font-size:1.28rem; color:var(--r-slate); max-width:560px; margin:0 auto 2.2rem; }
body.river .fine{ margin-top:1.6rem; font-size:.85rem; color:rgba(157,176,199,.6); }

/* Two-column do / hold lists (brand-brain, approach) */
body.river .cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1000px; margin:0 auto; }
body.river .col{ border:1px solid var(--r-line); border-radius:4px; padding:2.2rem 1.9rem; background:rgba(7,28,57,.4); }
body.river .col h3{ font-family:var(--r-serif); font-weight:400; font-size:1.5rem; color:var(--r-cream); margin-bottom:1rem; }
body.river .col ul{ list-style:none; display:flex; flex-direction:column; gap:.8rem; padding:0; margin:0; }
body.river .col li{ position:relative; padding-left:1.4rem; font-size:1.14rem; color:var(--r-slate); }
body.river .col li::before{ content:""; position:absolute; left:0; top:.6rem; width:6px; height:6px; border-radius:50%; background:var(--r-aqua); }
@media(max-width:760px){ body.river .cols{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   8. BRAND BRAIN — gate, setup, starter prompt, helper
--------------------------------------------------------------- */
body.river .gate-band{ max-width:760px; margin:0 auto; padding:clamp(2rem,5vh,4rem) clamp(1.25rem,5vw,3rem); text-align:center; }
body.river .gate{ border:1px solid rgba(95,211,208,.4); border-radius:6px; padding:clamp(2.2rem,5vw,3.6rem); background:rgba(7,28,57,.55); box-shadow:0 0 0 1px rgba(95,211,208,.14), 0 24px 60px rgba(0,0,0,.3); }
body.river .gate h2{ font-family:var(--r-serif); font-weight:300; color:var(--r-cream); font-size:clamp(2rem,4vw,3rem); margin-bottom:.8rem; }
body.river .gate .r-body{ max-width:560px; margin:0 auto 1.8rem; }
body.river .gate-form{ display:flex; flex-wrap:wrap; gap:.8rem; max-width:560px; margin:0 auto; }
body.river .gate-form input{ flex:1 1 180px; min-width:0; padding:.95rem 1.1rem; font-size:1rem; font-family:var(--r-sans); color:var(--r-cream); background:rgba(4,16,31,.6); border:1px solid var(--r-line); border-radius:3px; }
body.river .gate-form input::placeholder{ color:rgba(157,176,199,.7); }
body.river .gate-form input:focus{ outline:none; border-color:var(--r-aqua); box-shadow:0 0 0 3px rgba(95,211,208,.18); }
body.river .gate-form button{ flex:1 1 100%; padding:1rem 1.6rem; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--r-navy); background:var(--r-cream); border:none; border-radius:3px; cursor:pointer; transition:transform .2s, box-shadow .2s; }
body.river .gate-form button:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,244,202,.2); }
body.river .gate-note{ margin-top:1.1rem; font-size:.85rem; color:rgba(157,176,199,.6); }
body.river .gate-success{ font-size:1.2rem; color:var(--r-aqua-bright); }

body.river .setup-steps{ max-width:660px; margin:1.4rem 0 0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.7rem; color:var(--r-slate); font-size:1.2rem; }
body.river .setup-steps strong{ color:var(--r-cream); font-weight:600; }
body.river .setup-link{ color:var(--r-aqua); text-decoration:underline; text-underline-offset:3px; }
body.river .setup-link:hover{ color:var(--r-aqua-bright); }
body.river .prompt-box{ border:1px solid var(--r-line); border-radius:6px; background:rgba(4,16,31,.55); margin:1.8rem 0; overflow:hidden; }
body.river .prompt-head{ display:flex; justify-content:space-between; align-items:center; padding:.75rem 1.1rem; border-bottom:1px solid var(--r-line); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--r-aqua); }
body.river .prompt-head button{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--r-navy); background:var(--r-cream); border:none; border-radius:3px; padding:.4rem .9rem; cursor:pointer; font-weight:600; }
body.river .prompt-box pre{ margin:0; padding:1.1rem 1.2rem; max-height:280px; overflow:auto; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9rem; line-height:1.55; color:#c7d4e2; white-space:pre-wrap; }
body.river .helper{ border:1px solid rgba(95,211,208,.4); border-radius:8px; background:rgba(7,28,57,.5); overflow:hidden; margin-top:2rem; box-shadow:0 0 0 1px rgba(95,211,208,.12); }
body.river .helper-head{ padding:1.1rem 1.3rem; border-bottom:1px solid var(--r-line); }
body.river .helper-head strong{ display:block; font-family:var(--r-serif); font-weight:500; font-size:1.3rem; color:var(--r-cream); }
body.river .helper-head span{ display:block; margin-top:.35rem; font-size:.95rem; color:rgba(156,240,236,.85); }
body.river .helper-log{ max-height:360px; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.75rem; }
body.river .hb{ max-width:86%; padding:.7rem 1rem; border-radius:11px; font-size:1.05rem; line-height:1.5; white-space:pre-wrap; }
body.river .hb-user{ align-self:flex-end; background:var(--r-cream); color:var(--r-navy); }
body.river .hb-bot{ align-self:flex-start; background:rgba(4,16,31,.6); color:#e7eef6; border:1px solid var(--r-line); }
body.river .helper-form{ display:flex; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--r-line); }
body.river .helper-form input{ flex:1; min-width:0; padding:.85rem 1rem; font-size:1rem; font-family:var(--r-sans); color:var(--r-cream); background:rgba(4,16,31,.6); border:1px solid var(--r-line); border-radius:4px; }
body.river .helper-form input:focus{ outline:none; border-color:var(--r-aqua); box-shadow:0 0 0 3px rgba(95,211,208,.14); }
body.river .helper-form button{ padding:.85rem 1.4rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--r-navy); background:var(--r-cream); border:none; border-radius:4px; cursor:pointer; }

/* ---------------------------------------------------------------
   9. REVEAL (works with animations.js .is-visible and river .in)
--------------------------------------------------------------- */
body.river .reveal{ opacity:0; transform:translateY(32px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
body.river .reveal.is-visible,
body.river .reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------------
   10. START (booking) — dark frame around the embed
--------------------------------------------------------------- */
body.river .booking-embed{ background:rgba(7,28,57,.4); border:1px solid var(--r-line); border-radius:8px; padding:1rem; }

/* ---------------------------------------------------------------
   11. READING MODE — blog posts + blog index
   Long-form text needs a near-solid ground, not a moving video.
   The water becomes a faint texture at the edges; the spine dims.
--------------------------------------------------------------- */
body.river.reading .water-tint{ background:linear-gradient(180deg, rgba(4,16,31,.90) 0%, rgba(4,16,31,.93) 45%, rgba(4,16,31,.95) 100%); }
body.river.reading .river-track{ opacity:.3; }
body.river.reading .post-body{ color:#d6e0ec; }
body.river.reading .post-body h2,
body.river.reading .post-header__title{ color:#fff; }
body.river.reading .post-header__subtitle{ color:#b9c6d6; }

/* ---------------------------------------------------------------
   12. REVIEW FIXES (Sep 1)
--------------------------------------------------------------- */
/* .service-item became a card (bg + border) but had no padding in the
   base sheet, so content sat flush to the edges. Give it real space,
   and enlarge the card body copy. */
body.river .service-item{ padding:2rem 1.9rem; }
body.river .service-item__body{ font-size:1.16rem; }
/* Center the hero call-to-action on centered page heroes (menswear, b2b). */
body.river .page-hero .hero__actions{ justify-content:center; }
@media(max-width:640px){ body.river .page-hero .hero__actions{ align-items:center; } }
/* In-copy links need to look clickable on the dark ground. */
body.river .section__body a,
body.river .page-hero__body a,
body.river .about-quote + * a{ color:var(--r-aqua); text-decoration:underline; text-underline-offset:3px; }
body.river .section__body a:hover,
body.river .page-hero__body a:hover{ color:var(--r-aqua-bright); }
/* About: vertically center the photo against the text, theme its frame,
   and center it when the layout stacks. */
body.river .about-split{ align-items:center; }
body.river .about-photo{ background:rgba(7,28,57,.4); border-color:var(--r-line); margin-left:auto; margin-right:auto; }
/* The pull-quote's navy left border is invisible on dark: make it aqua. */
body.river .about-quote{ border-left-color:var(--r-aqua); }

/* ---------------------------------------------------------------
   13. MOBILE FIT (Sep 2) — the big display type overflowed narrow
   screens (clamp minimums too large), pushing content and the nav
   off-screen. Cap the headline sizes and clip any stray overflow.
--------------------------------------------------------------- */
@media(max-width:600px){
  body.river{ overflow-x:hidden; }
  body.river .r-hero{ padding-left:1.25rem; padding-right:1.25rem; }
  body.river .r-hero h1{ font-size:2.05rem; letter-spacing:-.01em; }
  body.river .r-hero h1 span{ display:block; }
  body.river .r-hero .sub{ font-size:1.08rem; }
  body.river .eyebrow{ font-size:.72rem; letter-spacing:.22em; }
  body.river .through .big{ font-size:2rem; }
  body.river .r-h2{ font-size:2rem; }
  body.river .cta h2{ font-size:2rem; }
  body.river .page-hero__headline{ font-size:2.3rem; }
  body.river .section__headline{ font-size:1.95rem; }
  body.river .vw{ font-size:2.3rem; }
  body.river .offer h3, body.river .rung h3{ font-size:1.7rem; }
}

@media(prefers-reduced-motion:reduce){
  .river-track .river-current{ animation:none; opacity:.6; }
  body.river .scroll-cue .dot::after{ animation:none; }
  body.river .reveal{ opacity:1; transform:none; transition:none; }
}