/* ============================================================
   SUBPAGE HERO — "CONSTELLATION RIBBON" (single-hue)

   The home hero is the full mark: a tall living iris running the
   whole spectrum. This is the same dot system in its indoor
   voice — a short band that says where you are and gets out of
   the way.

   Two rules define it:

   1. SHORT. ~230-280px, down from the earlier 400-480px. At this
      height the band is a page header, not a second hero, and it
      carries far fewer dots — which is the point: the home page
      keeps the density, the subpages stay calm.

   2. ONE HUE PER PAGE. Not a spectrum sweep. Each page owns a
      single colour from the logo's seven, and the only variation
      within a page is shade and tint of THAT hue. The whole site
      still spans the spectrum; each individual page does not.
      Set with --dot-h/--dot-s/--dot-l plus data-hue on the JS side.
   ============================================================ */
.rb-hero, .rb-hero *, .rb-hero *::before, .rb-hero *::after{box-sizing:border-box}

.rb-hero{
  --navy:#2E1F18;   /* espresso — matches home warm rebuild */
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F5EDE2;
  --pale:#FAF5EE;
  --border:#E6D9C8;   /* matches home --w-rule */

  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Page accent. Overridden per page; teal is the neutral default. */
  --accent:#29A3A3;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* Roughly HALF the previous band. A subpage title needs room for
     two lines of Clearface and a breadcrumb — nothing more. */
  min-height:clamp(190px, 24vh, 260px);
  display:flex;
  align-items:center;
  padding:clamp(34px,4.6vh,50px) 0;

  /* Near-flat wash, tinted a few percent toward the page's own hue so
     the band reads as belonging to that colour even before the dots
     register. Kept very pale — this sits directly above body copy. */
  /* Flat warm ground, matching the home page. The page's hue is carried
     by the dots, the breadcrumb and the full stop — the band itself does
     not need tinting, and tinting it with a cool accent made it read grey.
     Starts at p-05, the same tone as the nav bar above it, and fades to
     p-10 — no bone/white step, since the body now runs p-10/p-20 and a
     near-white band up top read as a different page. */
  background:linear-gradient(180deg, #FAF5EE 0%, #F8F1E8 55%, var(--parchment) 100%);
  border-bottom:1px solid var(--border);
}

.rb-hero .rb-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* Left-anchored wash: only the copy needs guaranteed contrast, and
   veiling the right half would erase the constellation entirely. */
.rb-hero .rb-lens{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(255,253,252,0.97) 0%,
      rgba(255,253,252,0.93) 28%,
      rgba(255,253,249,0.68) 44%,
      rgba(255,253,249,0.26) 60%,
      rgba(246,241,239,0.04) 76%,
      rgba(246,241,239,0) 88%);
}

/* ---------- CONTENT ---------- */
.rb-hero .rb-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:calc(1120px + 2 * clamp(20px,4vw,32px));   /* content edge = .sb-wrap = form/footer */
  margin:0 auto;
  padding:0 clamp(20px,4vw,32px);
}
.rb-hero .rb-copy{ max-width:40rem; }

/* ---------- BREADCRUMB ---------- */
.rb-hero .rb-crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 clamp(11px,1.5vh,15px);
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--teal-soft);
}
.rb-hero .rb-crumbs a{
  color:inherit;
  text-decoration:none;
  opacity:.72;
  border-bottom:1px solid transparent;
  transition:opacity .18s ease, border-color .18s ease;
}
.rb-hero .rb-crumbs a:hover{ opacity:1; border-bottom-color:currentColor; }
.rb-hero .rb-crumbs .rb-sep{ opacity:.38; }
.rb-hero .rb-crumbs .rb-here{ color:var(--accent); opacity:1; }

.rb-hero .rb-h1{
  font-family:var(--serif);
  font-weight:400;
  text-transform:none;
  /* Tops out at 46px — the home hero runs to 82px and must stay the
     largest type on the site. */
  font-size:clamp(29px, 3.4vw, 46px);
  line-height:1.07;
  letter-spacing:-0.012em;
  color:var(--navy);
  margin:0;
  text-wrap:balance;
}
/* A coloured full stop in the page's hue. Gives one-word titles
   ("Glasses") something to land on without inflating the type. */
.rb-hero .rb-h1::after{
  content:".";
  color:var(--accent);
}

/* ---------- COLOURED TITLE ----------
   With the breadcrumb gone the h1 is the only thing left in the copy
   column, so it carries the page's colour itself rather than borrowing
   it from a crumb. Single-hue pages take their own accent; About runs
   the whole logo palette letter by letter, the same seven colours its
   dot ribbon uses. The builder wraps each letter in a .rb-ch span and
   assigns the colour inline, so spaces and wrapping behave normally. */
.rb-hero .rb-h1--hue{ color:var(--accent); }
.rb-hero .rb-h1 .rb-ch{ color:inherit; }
.rb-hero .rb-h1--multi .rb-ch{ color:var(--ch); }

.rb-hero .rb-sub{
  font-family:var(--sans);
  font-size:clamp(14px,1.15vw,16px);
  line-height:1.5;
  color:var(--teal-soft);
  margin:clamp(9px,1.3vh,13px) 0 0;
  max-width:34rem;
}

/* ---------- ENTRANCE ---------- */
@keyframes rb-rise{
  from{ opacity:0; transform:translate3d(0,12px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
.rb-hero .rb-rise{ opacity:0; animation:rb-rise .66s cubic-bezier(.2,.75,.25,1) forwards; }
.rb-hero .rb-d1{animation-delay:.04s}
.rb-hero .rb-d2{animation-delay:.13s}
.rb-hero .rb-d3{animation-delay:.23s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .rb-hero{
    min-height:auto;
    padding:clamp(28px,4vh,38px) 0 clamp(64px,9vh,86px);
  }
  .rb-hero .rb-copy{ max-width:none; }
  /* Copy goes full-bleed on a phone, so the field moves BELOW it and
     the wash becomes vertical: protect the copy, then clear entirely
     so the dots are still visible rather than washed out. */
  .rb-hero .rb-lens{
    background:
      linear-gradient(180deg,
        rgba(255,253,252,0.96) 0%,
        rgba(255,253,252,0.93) 48%,
        rgba(255,253,249,0.58) 66%,
        rgba(246,241,239,0.12) 82%,
        rgba(246,241,239,0) 93%);
  }
}
@media (max-width:520px){
  .rb-hero .rb-crumbs{ font-size:11px; letter-spacing:0.12em; gap:6px; }
}

/* ---------- REDUCED MOTION ----------
   Non-negotiable on a practice that sells visual-stress assessments.
   The JS paints one composed frame and never starts a loop. */
@media (prefers-reduced-motion: reduce){
  .rb-hero .rb-rise{ opacity:1; animation:none; }
}