/* A2 — Bento. The v7-bento register: cool #EDF0F4 ground, white tiles at 28px
   radius, generous gaps, and colour tiles that carry a single fact each. Where
   Clinical separates jobs with a rule, Bento gives each one its own tile. */
:root{ --ground:#EDF0F4; --surface:#FFFFFF; --tint:#E6F0FB; --rule:#D7E1E9;
  --r:12px; --r-lg:16px; --sec-y:.5rem; --shell:1280px; }
/* Every section becomes a tile. */
.sec{ padding-block:.5rem; }
.sec + .sec{ border-top:0; }
.sec > .shell > .sec-in{ background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.2rem); }
.sec:first-of-type > .shell > .sec-in{ margin-top:1rem; }
main > .sec:last-child{ padding-bottom:1.5rem; }
/* The hero tile: image behind, navy gradient over, text at the foot. */
.sec.hero > .shell > .sec-in{ padding:0; border:0; overflow:hidden; position:relative;
  background:var(--dark); min-height:clamp(360px,46vw,520px); display:flex; align-items:flex-end; }
.sec.hero .hero-grid{ display:block; position:relative; z-index:2;
  padding:clamp(1.6rem,4vw,3rem); }
.sec.hero .hero-media{ position:absolute; inset:0; z-index:0; }
.sec.hero .hero-media img{ width:100%; height:100%; object-fit:cover; border-radius:0;
  filter:brightness(.6); aspect-ratio:auto; }
.sec.hero > .shell > .sec-in::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgb(15 42 62 / .25),rgb(15 42 62 / .88)); }
.sec.hero h1{ color:#fff; max-width:17ch; }
.sec.hero .lede{ color:rgb(255 255 255 / .86); }
.sec.hero .eyebrow{ color:#BEDAEA; }
.sec.hero .btn:not(.primary){ border-color:rgb(255 255 255 / .5); color:#fff; }
.sec.hero .btn:not(.primary):hover{ background:rgb(255 255 255 / .12); }
/* Accent tiles: a job that is an action gets a solid ground. */
.sec[data-band="accent"] > .shell > .sec-in{ background:var(--blue); border-color:var(--blue); }
.sec[data-band="accent"] h1,.sec[data-band="accent"] h2{ color:#fff; }
.sec[data-band="accent"] .lede,.sec[data-band="accent"] p{ color:rgb(255 255 255 / .88); }
.sec[data-band="accent"] .lede,.sec[data-band="accent"] .card p,
.sec[data-band="accent"] .facts dd,.sec[data-band="accent"] .steps .v{ color:#E6F2FF; }
.sec[data-band="accent"] .btn:not(.primary){ border-color:#fff; color:#fff; }
.sec[data-band="accent"] .btn:not(.primary):hover{ background:rgb(255 255 255 / .16); }
.sec[data-band="accent"] .state-note{ background:var(--dark); color:#DCE7EF; }
.sec[data-band="accent"] .state-note b{ color:#FFC9C4; }
.choice{ border-radius:var(--r); }
.quote{ border-radius:var(--r); background:var(--tint); border-color:transparent; }
.portrait{ border-radius:var(--r); }
.site-foot{ margin-top:1rem; border-radius:var(--r-lg) var(--r-lg) 0 0; }

/* The hero tile's inner box is a flex container so the text can sit at the
   foot; a flex item sizes to its content, so the grid has to be told to fill.
   And the media is absolutely positioned while the text is static, which paints
   the image over the words — the text needs its own positioned context. */
/* renderSection wraps every section's content in a div, so THAT is the flex
   item — not .hero-grid inside it. */
.sec.hero > .shell > .sec-in > div{ flex:1 1 100%; width:100%; min-width:0; }
.sec.hero .hero-grid > div:first-child{ position:relative; z-index:2; }
.sec.hero .hero-media{ z-index:0; }

/* The fork: both tiles photographic — the practice's own studio for HealthFit,
   the treatment room for Physiotherapy — with the same navy gradient as the
   hero. Asymmetric by weight, equal in material, so neither reads as filler. */
@media (min-width:900px){
  .choice-grid[data-variant="fork"]{ grid-template-columns:1.2fr .8fr; }
}
.choice-grid[data-variant="fork"] .choice.fork{
  position:relative; overflow:hidden; border:0; background:var(--dark);
  min-height:400px; display:flex; align-items:flex-end;
}
.choice-grid[data-variant="fork"] .choice-media{ display:block; position:absolute; inset:0; }
.choice-grid[data-variant="fork"] .choice-media img{
  width:100%; height:100%; object-fit:cover; border-radius:0;
}
.choice-grid[data-variant="fork"] .choice.fork::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgb(15 42 62 / .06) 20%, rgb(15 42 62 / .58) 55%, rgb(15 42 62 / .94));
}
.choice-grid[data-variant="fork"] .choice-body{
  position:relative; z-index:2; padding:clamp(.5rem,1.5vw,1.1rem);
  /* All text lives in the bottom third, over the strong part of the gradient —
     the same move as the hero. Nothing sits on the bright window glass. */
  justify-content:flex-end;
}
.choice-grid[data-variant="fork"] .answer{ margin-top:var(--s1); }
.choice-grid[data-variant="fork"] .situation{ color:#fff; font-size:clamp(1.5rem,2.7vw,2rem); }
.choice-grid[data-variant="fork"] .detail{ color:#DCE7EF; }
.choice-grid[data-variant="fork"] .answer{ color:#fff; }