/* second-chances-v2: fresh, self-contained stylesheet built from the Figma
   "Built On Second Chances V2" export. Only the site's real header/footer
   (styled by nhs-tokens.css/nhs-styles.css/nhs-styles-site.css, still linked
   on this page) are reused; everything below is new, scoped under .scv2 so
   nothing here can leak into or be confused with /campaign/'s own styles. */

.scv2 {
  --teal: #009D98;
  --teal-deep: #005F5C;
  --teal-tint: #B2E2E0;
  --teal-wash: #E4F3F2;
  --orange: #FF6633;
  --forest: #00341C;
  --cream: #FFF5E2;
  --font-display: 'Bogart', serif;
  --font-body: 'Circular', sans-serif;
  --content-max: 1200px;
  --outer: 120px;
  background: #fff;
  background-image: url('/images/bosc-paper-grain.webp');
  background-repeat: repeat;
  background-blend-mode: multiply;
  background-size: 384px 320px;
  color: var(--forest);
}
@media (max-width: 1023px) { .scv2 { --outer: 48px; } }
@media (max-width: 767px)  { .scv2 { --outer: 24px; } }

.scv2 * { box-sizing: border-box; }
.scv2 img { max-width: 100%; display: block; }
.scv2 a { text-decoration: none; }

.scv2-container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--outer) * 2);
  margin-inline: auto;
  padding-inline: var(--outer);
}

.scv2-band { padding-block: 88px; position: relative; }
@media (max-width: 1023px) { .scv2-band { padding-block: 72px; } }
@media (max-width: 767px)  { .scv2-band { padding-block: 52px; } }
@media (max-width: 480px)  { .scv2-band { padding-block: 40px; } }
.scv2-band--tint { background-color: var(--teal-tint); }
.scv2-band--tealtint { background-color: var(--teal-wash); }

/* Torn-paper seam wherever the background colour actually changes,
   reusing the real asset (fresh rule, not copied from nhs-campaign.css). */
.scv2-band { z-index: 0; }
.scv2-why + .scv2-tabs,
.scv2-floorplan + .scv2-goal,
.scv2-stats + .scv2-capacity,
.scv2-capacity + .scv2-angel,
.scv2-angel + .scv2-resources,
.scv2-resources + .scv2-steps,
.scv2-steps + .scv2-kim,
.scv2-kim + .scv2-cta {
  position: relative;
}

/* ---------- Buttons ---------- */
.scv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border-radius: 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  border: none;
  list-style: none;
}
.scv2-btn::-webkit-details-marker { display: none; }
.scv2-btn--orange { background: var(--orange); color: #fff; }
.scv2-btn--outline-orange { background: transparent; color: var(--forest); border: 2px solid var(--orange); }
.scv2-btn--teal { background: var(--teal); color: #fff; }
.scv2-btn--outline-teal { background: transparent; color: var(--teal); border: 2px solid var(--teal); }
/* The site-wide `a:not(.nhs-btn):hover` (nhs-styles.css) turns link text olive and outranks a bare .scv2-btn--x:hover,
   so each variant restates its own text colour on hover and focus with an `a` in front to tie it (this file loads later). */
a.scv2-btn--orange:hover, a.scv2-btn--orange:focus-visible { color: #fff; }
a.scv2-btn--outline-orange:hover, a.scv2-btn--outline-orange:focus-visible { color: var(--forest); }
a.scv2-btn--teal:hover, a.scv2-btn--teal:focus-visible { color: #fff; }
a.scv2-btn--outline-teal:hover, a.scv2-btn--outline-teal:focus-visible { color: var(--teal); }
.scv2-btn-group { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }

/* Read More / Read Less disclosure trigger (shared pattern for #why-now and
   each phase card). Pure CSS label + icon swap keyed off [open]. */
.scv2-readmore__summary { width: fit-content; }
.scv2-readmore__open-label { display: none; }
.scv2-readmore .scv2-readmore__icon::before { content: "+"; font-size: 1.2rem; line-height: 1; }
details[open] > .scv2-readmore__summary .scv2-readmore__closed-label { display: none; }
details[open] > .scv2-readmore__summary .scv2-readmore__open-label { display: inline; }
details[open] > .scv2-readmore__summary .scv2-readmore__icon::before { content: "\2212"; }
details.is-closing > .scv2-readmore__summary .scv2-readmore__closed-label { display: inline; }
details.is-closing > .scv2-readmore__summary .scv2-readmore__open-label { display: none; }
details.is-closing > .scv2-readmore__summary .scv2-readmore__icon::before { content: "+"; }
.scv2-readmore__panel,
.scv2-phase__panel { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.scv2-readmore > .scv2-readmore__panel { margin-top: 40px; }
.scv2-phase__more > .scv2-phase__panel { margin-top: 24px; } /* beats .scv2-body-md's margin reset */

/* ---------- Type scale ---------- */
.scv2-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 8px;
}
.scv2-eyebrow--center { text-align: center; }
.scv2-h1, .scv2-h1-white, .scv2-h1-orange {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw + 1rem, 4.25rem);
  line-height: 1.05;
  margin: 0 0 20px;
}
.scv2-h1 { color: var(--teal); }
.scv2-h1-white { color: #fff; }
.scv2-h1-orange { color: var(--orange); }
.scv2-h2, .scv2-h2-white, .scv2-h2-tealdeep {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3.75rem);
  line-height: 1.1;
  margin: 0 0 12px;
}
.scv2-h2 { color: var(--teal); }
.scv2-h2-white { color: #fff; }
.scv2-h2-tealdeep { color: var(--teal-deep); }
.scv2-h2--center { text-align: center; }
.scv2-h3-tealdeep {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--teal-deep);
  margin: 0 0 8px;
}
.scv2-h3--center { text-align: center; }
.scv2-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--orange);
  margin: 0 0 16px;
}
.scv2-tagline--sm { font-size: 1.4rem; }
.scv2-tagline--white { color: #fff; }
.scv2-body-lg {
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--forest);
  margin: 0 0 20px;
}
.scv2-body-lg--center { text-align: center; margin-inline: auto; max-width: 60ch; }
.scv2-body-md {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
.scv2-body-md--center { text-align: center; }
.scv2-body-sm { font-family: var(--font-body); font-size: 0.875rem; }
.scv2-muted { color: rgba(0, 52, 28, 0.65); }
.scv2-body-lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--forest);
  margin: 0 0 16px;
}
.scv2-body-lead--orange { color: var(--orange); }
.scv2-pullquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--orange);
  margin: 0 0 24px;
}
.scv2-link { color: var(--orange); font-weight: 700; text-decoration: underline; }
.scv2-rule { border: none; border-top: 2px solid var(--orange); margin: 28px 0; }

/* Shared media frame (12px white border + shadow), used by several sections */
.scv2-media-frame {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0, 52, 28, 0.18);
}
.scv2-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.scv2-media-frame img[hidden] { display: none; }
.scv2-media-frame--white { border: 12px solid #fff; }
.scv2-media-frame--tealdeep { border: 8px solid var(--teal-deep); }
.scv2-media-frame--square { aspect-ratio: 1 / 1; }

.scv2-icon-16 { width: 16px; height: 16px; }
.scv2-icon-56 { width: 56px; height: 56px; }

/* ---------- 1. Hero ---------- */
.scv2-hero { position: relative; z-index: 0; min-height: 920px; display: flex; align-items: flex-end; padding-top: 64px; padding-bottom: 72px; }
/* Same paper texture as .scv2-why, so the leftover space below the contained
   photo (see object-fit note below) flows straight into that section instead
   of leaving a flat white gap between them. */
.scv2-hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* object-fit:contain (not cover) so the full width of the source photo is always
   visible, never cropped at the sides -- the box is taller than the photo's own
   aspect ratio, and cover was trimming both edges to fill that height. Anchored
   to the top so the leftover space collects below the photo instead, which also
   gives more breathing room under the text panel before the next section; the
   photo's own frayed-white bottom edge (the "torn paper" look) blends into that
   textured space rather than leaving a hard seam. */
.scv2-hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0%; }
.scv2-hero > .scv2-container { position: relative; z-index: 1; }
.scv2-hero__panel {
  max-width: 660px;
  background-color: var(--cream);
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 20px 32px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.scv2-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 3.5vw + 1rem, 3.5rem); line-height: 1; color: var(--teal); margin: 0 0 8px; }
@media (max-width: 767px) { .scv2-hero { min-height: 760px; padding-bottom: 56px; } .scv2-hero__panel { padding: 16px 24px 24px; } }
/* From 768px the hero text card is placed at a fixed spot on the hero (absolute, so it stays where it is on the page and scrolls away
   with it: not sticky, not pinned to the screen). Placement defaults are the ones made by eye on a 1453 x 745 screen: 550px wide, top
   0.1889 of the width (up to 1440px) from the top of the hero, left edge 8.47% of the screen width; an admin can change them per page
   with the drag tool in the CMS (the section then sets --hero-w, --hero-top and --hero-left on the card). The hero is at least a full
   screen tall; min-height keeps the whole photo (it is top aligned and not cropped, its torn edge is part of the picture), so a screen
   shorter than the photo shows the photo's full height. Phones keep the card in the flow, under the photo. */
.scv2-hero__panel { position: relative; }
@media (min-width: 768px) {
  .scv2-hero { min-height: max(100vh, min(63.9vw, 920px)); min-height: max(100svh, min(63.9vw, 920px)); }
  .scv2-hero > .scv2-container { position: static; }
  /* The photo ends in about 200px of plain paper below its torn edge. The next section (opaque paper of its own, raised above the hero)
     is pulled up over the bottom 140px of it, so there is less blank space above "Why This Campaign". */
  .scv2-hero { margin-bottom: -140px; }
  .scv2-why { position: relative; z-index: 1; padding-top: 56px; }
  .scv2-hero__panel {
    position: absolute; z-index: 1; margin: 0;
    top: calc(min(100vw, 1440px) * var(--hero-top, .1889));
    left: var(--hero-left, 8.47vw);
    width: var(--hero-w, 550px);
    max-width: calc(100vw - 32px);
  }
}

/* ---------- 2. Why This Campaign ---------- */
/* Figma's WHY CAMPAIGN - LESS frame fills with this same paper texture (the
   real Background pattern.jpg asset, already converted for the hero panel);
   one image spanning the section, not tiled, matching how Figma applies it. */
.scv2-why {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.scv2-why__grid { display: grid; gap: 32px; align-items: start; } /* start, not center: opening Read More must not move the text */
@media (min-width: 1024px) { .scv2-why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* The photo stays in view beside the text as it scrolls (and while Read More is open); the frame is capped so it fits the screen. */
@media (min-width: 1024px) {
  .scv2-why__media { align-self: start; position: sticky; top: 160px; }
  .scv2-why__media .scv2-media-frame { max-width: calc((100vh - 220px) * 3 / 4); margin-inline: auto; }
}
.scv2-why__media .scv2-media-frame { aspect-ratio: 3 / 4; }
.scv2-why__media .scv2-media-frame { border: 12px solid #fff; }
.scv2-dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.scv2-dots button { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--orange); background: transparent; cursor: pointer; }
.scv2-dots button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.scv2-dots .is-active { background: var(--orange); }
/* One photo: no dots to show. */
.scv2-dots:not(:has(button + button)) { display: none; }

/* ---------- 3. Kennel-area tabs ---------- */
/* Same paper texture as the section above (.scv2-why), continuing the seam. */
.scv2-tabs {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.scv2-tabs__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .scv2-tabs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.scv2-tabs__list { display: flex; flex-direction: column; }
.scv2-tab { border-top: 1px solid rgba(0, 52, 28, 0.25); padding-block: 28px; }
.scv2-tab:last-child { border-bottom: 1px solid rgba(0, 52, 28, 0.25); }
.scv2-tab__trigger { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.scv2-tab__trigger::-webkit-details-marker { display: none; }
.scv2-tab__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.75rem);
  color: var(--teal-deep);
  line-height: 1.05;
}
.scv2-tab__subtitle { display: block; font-family: var(--font-body); font-weight: 700; color: var(--orange); margin-top: 6px; max-width: 60ch; }
.scv2-tab__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; margin-top: 6px; }
.scv2-tab__icon::before, .scv2-tab__icon::after { content: ""; position: absolute; background: var(--forest); }
.scv2-tab__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.scv2-tab__icon::after { top: 0; left: 9px; width: 2px; height: 20px; transition: opacity .15s; }
.scv2-tab[open] .scv2-tab__icon::after { opacity: 0; }
.scv2-tab.is-closing .scv2-tab__icon::after { opacity: 1; } /* +/- flips as the close starts, not when it ends */
.scv2-tab__panel { margin-top: 20px; }
/* The single, shared photo column -- one image visible at a time, synced by
   the toggle-listener script to whichever tab is open. Sticky on desktop so
   it stays in view while scrolling through the list, matching Figma's fixed
   side-by-side layout. */
.scv2-tabs__media { position: relative; }
@media (min-width: 1024px) {
  .scv2-tabs__media { position: sticky; top: 160px; }
  /* The photo is pinned beside the tabs and stops at the bottom of this section (it never runs on underneath the next one). A short empty
     block after the list, 100px, gives the last photo time to fade in while the photo is still pinned; sticky ranges are measured to the
     grid's content box, so it has to be a real block, not padding. */
  .scv2-tabs__list::after { content: ""; display: block; height: 100px; }
  .scv2-tabs { padding-bottom: 24px; }
}
.scv2-tabs__media-item {
  border: 12px solid #fff;
  box-shadow: 0 12px 30px rgba(0, 30, 25, 0.16);
  aspect-ratio: 3 / 4;
}
/* Cap the photo to the viewport height so it fits a laptop screen beside the sticky header. */
@media (min-width: 1024px) { .scv2-tabs__media-item { max-width: calc((100vh - 220px) * 3 / 4); margin-inline: auto; } }
/* Photos crossfade: all sit in one grid cell. The incoming one (no [hidden]) fades in on top while the outgoing one
   holds underneath and fades out over the second half of the fade, so the two dissolve into each other and the page
   background barely shows through. */
.scv2-tabs__media { display: grid; }
.scv2-tabs__media-item { grid-area: 1 / 1; position: relative; z-index: 1; opacity: 1; transition: opacity .7s linear; }
.scv2-tabs__media-item[hidden] { display: block; z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease-in .35s, visibility 0s linear .7s; }
@media (prefers-reduced-motion: reduce) { .scv2-tabs__media-item, .scv2-tabs__media-item[hidden] { transition: none; } }

/* Goal, Capacity and Resources: the paper above tears into the tinted section (same rip as Vision). */
.scv2-goal::before,
.scv2-capacity::before,
.scv2-resources::before,
.scv2-kim::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; aspect-ratio: 2000 / 90; background: url("/images/bosc-rip.webp") top / 100% 100% no-repeat; pointer-events: none; }

/* Angel, Steps and final CTA: paper below a blue section, so the same rip is flipped onto the bottom of Capacity. */
.scv2-capacity::after,
.scv2-resources::after,
.scv2-kim::after { content: ""; position: absolute; inset: auto 0 -1px; z-index: 1; aspect-ratio: 2000 / 90; background: url("/images/bosc-rip.webp") top / 100% 100% no-repeat; transform: scaleY(-1); pointer-events: none; }
.scv2-cta { position: relative; }
/* Final CTA: paper torn along the bottom onto the white section below (white rip = inverted alpha of bosc-rip). */
.scv2-cta::after { content: ""; position: absolute; inset: auto 0 -1px; z-index: 1; aspect-ratio: 2000 / 91; background: url("/images/bosc-rip-white.webp") bottom / 100% 100% no-repeat; pointer-events: none; }
.scv2-angel,
.scv2-steps,
.scv2-cta {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ---------- 4. Vision ---------- */
.scv2-vision { position: relative; z-index: 0; color: #fff; overflow: hidden; padding-block: 120px; }
.scv2-vision__media { position: absolute; inset: -160px 0 0; z-index: 0; }
.scv2-vision__media img { width: 100%; height: 100%; object-fit: cover; }
/* A horizontal band of vignette: dark behind the heading (top) and the numbered points (bottom), almost clear between them
   so the building shows. Stops are in px from each edge because the two text blocks are a fixed height at desktop widths
   (the media box starts 160px above the section). */
.scv2-vision__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 20, 25, .5) 0, rgba(0, 20, 25, .46) 490px, rgba(0, 20, 25, .06) 570px, rgba(0, 20, 25, 0) 620px),
    linear-gradient(0deg, rgba(0, 12, 8, .74) 0, rgba(0, 12, 8, .68) 520px, rgba(0, 12, 8, .08) 660px, rgba(0, 12, 8, 0) 720px);
}
@media (max-width: 1023px) {
  /* points stack and grow taller */
  .scv2-vision__media::after {
    background:
      linear-gradient(180deg, rgba(0, 20, 25, .5) 0, rgba(0, 20, 25, .46) 490px, rgba(0, 20, 25, .06) 570px, rgba(0, 20, 25, 0) 620px),
      linear-gradient(0deg, rgba(0, 12, 8, .74) 0, rgba(0, 12, 8, .68) 860px, rgba(0, 12, 8, .08) 1000px, rgba(0, 12, 8, 0) 1060px);
  }
}
.scv2-vision > .scv2-container { position: relative; z-index: 1; }
/* Torn-paper edge from the section above, overlaid on the top of the photo. */
.scv2-vision::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; aspect-ratio: 2000 / 90; background: url("/images/bosc-rip.webp") top / 100% 100% no-repeat; pointer-events: none; }
.scv2-vision__heading { text-align: center; max-width: 840px; margin-inline: auto; margin-bottom: clamp(280px, 40vw, 600px); }
.scv2-vision__cols { display: grid; gap: 40px; }
@media (min-width: 1024px) { .scv2-vision__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.scv2-numbered-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.scv2-numbered-item { display: flex; gap: 24px; align-items: flex-start; }
.scv2-num {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border: 4px solid var(--orange);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--orange);
}
.scv2-vision__aside { display: flex; flex-direction: column; gap: 24px; }
.scv2-vision .scv2-body-md { color: rgba(255,255,255,.92); }
.scv2-vision .scv2-numbered-item p { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; color: rgba(255,255,255,.92); }

/* ---------- 5. Floor plan ---------- */
/* Same paper texture as .scv2-why. */
.scv2-floorplan {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.scv2-fp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 24px 0; padding: 0; }
.scv2-fp-legend li { display: flex; align-items: center; gap: 8px; outline-offset: 3px; font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--forest); }
.scv2-fp-swatch { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.scv2-fp-swatch--dog       { background: #ff855c; }
.scv2-fp-swatch--cat       { background: #33b1ad; }
.scv2-fp-swatch--reception { background: #a3d165; }
.scv2-fp-swatch--washrooms { background: #5997f6; }
.scv2-fp-swatch--office    { background: #f269ff; }
.scv2-fp-swatch--meet      { background: #f5ce48; }
.scv2-fp-swatch--laundry   { background: #ff59a0; }
.scv2-fp-swatch--utility   { background: #47cfda; }
.scv2-fp-swatch--mpr       { background: #a579de; }
.scv2-fp-swatch--support   { background: #c3d2b6; }

/* Colour keys as pills. Hovering one lights its rooms on the plan (brightens, no movement); clicking opens it like an accordion, pinning the rooms and showing
   their description (js fills .scv2-fp-key__inner). Pills sit in the same colour as their rooms. */
.scv2-fp-key--dog { --k: #ff855c; } .scv2-fp-key--cat { --k: #33b1ad; } .scv2-fp-key--reception { --k: #a3d165; }
.scv2-fp-key--washrooms { --k: #5997f6; } .scv2-fp-key--office { --k: #f269ff; } .scv2-fp-key--meet { --k: #f5ce48; }
.scv2-fp-key--laundry { --k: #ff59a0; } .scv2-fp-key--utility { --k: #47cfda; } .scv2-fp-key--mpr { --k: #a579de; }
.scv2-fp-legend .scv2-fp-key { display: block; margin: 0; }
.scv2-fp-key__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px; border: 0; cursor: pointer;
  border-radius: 999px; background: color-mix(in srgb, var(--k) 38%, #fff); color: #1c2b19; text-align: left;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.25;
  transition: background .2s ease, box-shadow .2s ease, border-radius .25s ease;
}
.scv2-fp-key__btn:hover, .scv2-fp-key__btn:focus-visible { background: color-mix(in srgb, var(--k) 70%, #fff); box-shadow: 0 6px 16px rgba(0, 52, 28, .16); }
.scv2-fp-key__btn:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.scv2-fp-key__chev { flex: 0 0 auto; transition: transform .25s ease; }
.scv2-fp-key.is-open .scv2-fp-key__btn { background: var(--k); border-radius: 22px 22px 0 0; }
.scv2-fp-key.is-open .scv2-fp-key__chev { transform: rotate(180deg); }
.scv2-fp-key__panel { display: none; }
.scv2-fp-key__inner { overflow: hidden; min-height: 0; background: color-mix(in srgb, var(--k) 20%, #fff); border-radius: 0 0 22px 22px; color: #1c2b19; font-size: .9rem; line-height: 1.4; }
.scv2-fp-key__inner > * { margin-inline: 18px; }
.scv2-fp-key__inner > :first-child { margin-top: 10px; }
.scv2-fp-key__inner > :last-child { margin-bottom: 12px; }
.scv2-fp-key__inner p { margin: 0 18px; }
.scv2-fp-key__inner ul { margin: 6px 18px 0; padding-left: 18px; }
@media (min-width: 1024px) {
  .scv2-fp-key__panel { display: grid; transition: grid-template-rows .3s ease; }
  .scv2-fp-key:not(.is-open) .scv2-fp-key__inner { visibility: hidden; }
}
@media (max-width: 1023px) {
  /* phones and tablets: compact chips above the plan, the description stays in the panel under it */
  .scv2-fp-legend { gap: 8px; }
  .scv2-fp-key__btn { padding: 6px 14px; font-size: .9rem; }
  .scv2-fp-key__chev { display: none; }
  .scv2-fp-key.is-open .scv2-fp-key__btn { border-radius: 999px; }
}

.scv2-fp-layout { display: grid; gap: 24px; margin-top: 16px; }
.scv2-fp-scroll { overflow-x: auto; min-width: 0; }
/* Desktop: description panel to the left of the blueprint, sticky beside it. */
/* The colour legend and the description panel share one side column: legend on top, panel under it. On phones the wrapper
   dissolves (display: contents) so the order is still legend, plan, panel. */
.scv2-fp-side { display: contents; }
.scv2-fp-side .scv2-fp-legend { order: -1; }
.scv2-fp-side .scv2-fp-panel { order: 1; }
@media (min-width: 1180px) {
  .scv2-fp-layout { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); gap: 24px; align-items: start; }
  /* no max-height or scrolling: the pills and the open description are sized to fit as they are */
  .scv2-fp-side { display: block; grid-column: 1; grid-row: 1; } /* stays in its place beside the plan; it does not follow the scroll */
  /* the description panel is replaced by the pills opening in place; it stays in the page (hidden from sight) as the live region */
  .scv2-fp-side .scv2-fp-panel { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scv2-fp-side .scv2-fp-legend { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0; }
  .scv2-fp-key__panel { display: grid; grid-template-rows: 0fr; }
  .scv2-fp-key.is-open .scv2-fp-key__panel { grid-template-rows: 1fr; }
  .scv2-fp-layout .scv2-fp-scroll { grid-column: 2; grid-row: 1; }
}
.scv2-fp-ratio { position: relative; width: 100%; min-width: 640px; padding-top: calc(1286 / 1900 * 100%); container-type: inline-size; }
.scv2-fp-plan { position: absolute; inset: 0; background-color: #fff; background-size: 100% 100%; border: 2px solid var(--orange); border-radius: 8px; overflow: hidden; }
.scv2-fp-room {
  position: absolute;
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(11px, 1.15cqw, 17px);
  line-height: 1.2;
  cursor: pointer;
  color: #21301f;
  transition: box-shadow .18s ease, filter .18s ease;
}
.scv2-fp-room:hover, .scv2-fp-room:focus-visible, .scv2-fp-room.is-active, .scv2-fp-room.is-hover {
  box-shadow: 0 12px 26px rgba(0, 52, 28, .3);
  filter: saturate(1.35) contrast(1.05);
  z-index: 6;
}
.scv2-fp-room:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.scv2-fp-room__title { font-size: 1.1em; }
.scv2-fp-room__meta { font-weight: 500; font-size: 0.85em; }
.scv2-fp-room--dog       { background: rgba(255,133,92,.66); }
.scv2-fp-room--cat       { background: rgba(51,177,173,.6); color: #04322f; }
.scv2-fp-room--reception { background: rgba(163,209,101,.66); }
.scv2-fp-room--washrooms { background: rgba(89,151,246,.6); color: #0b2350; }
.scv2-fp-room--office    { background: rgba(242,105,255,.55); color: #3d0645; }
.scv2-fp-room--meet      { background: rgba(245,206,72,.66); }
.scv2-fp-room--laundry   { background: rgba(255,89,160,.55); color: #470524; }
.scv2-fp-room--utility   { background: rgba(71,207,218,.6); color: #053a3f; }
.scv2-fp-room--mpr       { background: rgba(165,121,222,.7); color: #fff; }
.scv2-fp-room--support   { background: rgba(195,210,182,.72); }

.scv2-fp-panel { margin-top: 24px; background: var(--teal); color: #fff; border-radius: 16px; padding: 32px; }
.scv2-fp-panel__kicker { display: block; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; margin-bottom: 8px; opacity: .85; }
.scv2-fp-panel__title { font-family: var(--font-body); font-weight: 500; font-size: 1.75rem; line-height: 1.2; margin: 0 0 8px; }
.scv2-fp-panel__body { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; margin: 0; }
.scv2-fp-panel__list { margin: 12px 0 0; padding-left: 20px; }

/* ---------- 6. Goal / thermometer ---------- */
.scv2-goal__lead { display: block; color: var(--orange); }
.scv2-goal__intro { text-align: center; margin-bottom: 40px; }
.scv2-goal__card { background: var(--cream); border-radius: 12px; padding: 60px clamp(24px, 8vw, 109px); }
.scv2-goal__summary-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.scv2-goal__raised { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3vw + 1rem, 3.75rem); color: var(--teal); margin: 0; line-height: 1.1; }
.scv2-goal__raised-label { font-family: var(--font-body); font-size: 1.25rem; color: var(--forest); margin: 0; }
.scv2-goal__pct-pill { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; color: var(--forest); border: 3px solid var(--teal); border-radius: 40px; padding: 12px 32px; margin: 0; }
.scv2-goal__pct-pill span { font-weight: 400; }
.scv2-goal__pct-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.scv2-thermo__track {
  position: relative;
  height: 44px;
  border-radius: 40px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, #fff, #fff 8px, var(--orange) 8px, var(--orange) 9px);
  border: 3px solid var(--orange);
}
.scv2-thermo__fill { position: absolute; inset: 0; background: var(--teal); border-radius: 40px 0 0 40px; }
/* Three phase ticks run through the bar, labels sit above and to the left of each tick. */
.scv2-thermo { position: relative; padding-top: 44px; }
.scv2-thermo__phase { position: absolute; top: 0; bottom: -8px; width: 4px; background: var(--orange); border-radius: 2px; transform: translateX(-50%); }
.scv2-thermo__phase--end { left: 100%; transform: translateX(-100%); }
.scv2-thermo__phase-label { position: absolute; top: 0; right: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.scv2-thermo__marker { position: absolute; top: calc(44px + 22px); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--orange); border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; }
.scv2-thermo__marker svg { width: 34px; height: 34px; color: var(--forest); }
.scv2-thermo__range { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--teal); }
.scv2-thermo__goal-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; }
.scv2-goal__card > .scv2-body-sm { margin-top: 16px; }
@media (max-width: 640px) { .scv2-goal__summary-row { flex-direction: column; } .scv2-goal__pct-group { justify-content: flex-start; } }

/* ---------- 7. Phase cards ---------- */
.scv2-phases__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .scv2-phases__grid { grid-template-columns: repeat(3, 1fr); } }
.scv2-phase { display: flex; flex-direction: column; }
.scv2-phase__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 12px 12px 0 0; }
.scv2-phase__media img { width: 100%; height: 100%; object-fit: cover; }
.scv2-phase__content { background: var(--cream); padding: 40px 24px; border-radius: 0 0 12px 12px; flex: 1; }
.scv2-phase__label { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; color: var(--teal); margin: 0; line-height: 1; }
.scv2-phase__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--orange); margin: 4px 0 16px; }
.scv2-phase__status { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0 0 20px; }

/* ---------- 8. Our Impact heading / More Than a Shelter ---------- */
.scv2-impact-heading { padding-block: 60px 0; text-align: center; }
.scv2-impact-wrap .scv2-shelter { padding-top: 32px; }
/* why + tabs share one paper sheet, so halve the seam gap between them */
.scv2-why { padding-bottom: 44px; }
.scv2-tabs { padding-top: 44px; }
@media (max-width: 767px) { .scv2-why { padding-bottom: 28px; } .scv2-tabs { padding-top: 40px; } }
/* Same paper texture as .scv2-why, one continuous sheet behind the heading and More Than a Shelter. */
.scv2-impact-wrap {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Brush and title share one grid cell so the title is centred on the stroke. */
.scv2-impact-heading .scv2-container { display: grid; place-items: center; }
.scv2-impact-heading__brush { grid-area: 1 / 1; max-width: 500px; margin: 0 auto; }
.scv2-impact-heading__title {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem);
  color: #fff;
}
.scv2-shelter__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .scv2-shelter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.scv2-shelter__content .scv2-body-lead { font-size: 1.5rem; }
.scv2-shelter .scv2-media-frame img { aspect-ratio: 5 / 4; }

/* ---------- 9. Impact stat tiles ---------- */
.scv2-stats {
  background-color: #fff;
  background-image: url('/images/bosc-v2-bg-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.scv2-stats__intro { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2vw + 1rem, 2.75rem); color: var(--teal-deep); text-align: center; max-width: 900px; margin: 0 auto 40px; line-height: 1.2; }
.scv2-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .scv2-stats__grid { grid-template-columns: repeat(3, 1fr); } }
.scv2-stat { display: flex; align-items: center; gap: 22px; padding: 20px; border-radius: 20px; color: #fff; }
.scv2-stat--teal { background: var(--teal); }
.scv2-stat--orange { background: var(--orange); }
.scv2-stat__body { display: flex; flex-direction: column; gap: 4px; }
.scv2-stat__figure { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; }
.scv2-stat__label { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.scv2-stats__footer { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2vw + 1rem, 2rem); color: var(--orange); margin: 40px 0 0; }
@media (max-width: 640px) { .scv2-stat { flex-direction: column; text-align: center; } }

/* ---------- 10. Capacity cards ---------- */
.scv2-capacity__intro { text-align: center; max-width: 800px; margin: 0 auto 48px; }
.scv2-capacity__grid { display: grid; gap: 32px; margin-bottom: 48px; }
@media (min-width: 768px) { .scv2-capacity__grid { grid-template-columns: repeat(2, 1fr); } }
.scv2-capacity__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 12px 12px 0 0; }
.scv2-capacity__media img { width: 100%; height: 100%; object-fit: cover; }
.scv2-capacity__content { background: var(--cream); padding: 40px 24px; border-radius: 0 0 12px 12px; }
.scv2-capacity__stat { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--orange); margin: 0 0 12px; }
.scv2-capacity__outro { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--forest); text-align: center; max-width: 900px; margin: 0 auto; line-height: 1.4; }

/* ---------- 11. Angel's Story ---------- */
.scv2-angel__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .scv2-angel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.scv2-angel .scv2-media-frame img { aspect-ratio: 1 / 1; }
.scv2-angel__photo { display: block; }

/* ---------- 12. Resources ---------- */
.scv2-resources__intro { text-align: center; max-width: 800px; margin: 0 auto 48px; }
.scv2-resources__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .scv2-resources__grid { grid-template-columns: repeat(3, 1fr); } }
.scv2-resource-card__media { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--orange); margin-bottom: -1px; }
.scv2-resource-card__media img { width: 100%; height: 100%; object-fit: cover; }
.scv2-resource-card__content { background: var(--cream); padding: 20px; text-align: center; border-radius: 0 0 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scv2-resource-card__content .scv2-btn { margin-top: 12px; }

/* ---------- 13. Ways to Support ---------- */
.scv2-steps__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .scv2-steps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.scv2-steps__intro { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.scv2-numbered-list--steps { gap: 24px; }
.scv2-step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; color: var(--orange); margin: 0 0 8px; }

/* ---------- 14. Talk With Kim ---------- */
.scv2-kim__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .scv2-kim__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.scv2-kim .scv2-media-frame { max-width: 360px; justify-self: center; }
.scv2-kim .scv2-media-frame img { aspect-ratio: 4 / 5; }
.scv2-kim__content .scv2-body-md a { color: var(--orange); }

/* ---------- 15. Final CTA ---------- */
.scv2-cta__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .scv2-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.scv2-cta .scv2-media-frame { border-radius: 12px; box-shadow: none; }
.scv2-cta .scv2-media-frame img { aspect-ratio: 4 / 3; object-fit: contain; }


/* ============================================================
   Phones (max 767px). Mobile pass, v3.52.
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Paper texture: the desktop image is 2200px wide and `cover`-scaled to tall, narrow
     sections it blows the grain up to several times its desktop size. Use a mirrored tile
     (seamless when repeated down the page) at a fixed, smaller scale instead. */
  .scv2-hero__media, .scv2-hero__panel, .scv2-why, .scv2-tabs, .scv2-floorplan, .scv2-impact-wrap,
  .scv2-stats, .scv2-angel, .scv2-steps, .scv2-cta {
    background-image: url('/images/bosc-v2-bg-pattern-tile.webp');
    background-size: 1100px auto;
    background-repeat: repeat-y;
    background-position: center top;
  }
  /* Torn edges: keep the rip's grain at the same 0.5x scale as the tile, showing its middle. */
  .scv2-vision::before, .scv2-goal::before, .scv2-capacity::before, .scv2-resources::before, .scv2-kim::before,
  .scv2-capacity::after, .scv2-resources::after, .scv2-kim::after, .scv2-cta::after {
    aspect-ratio: auto; height: 46px; background-size: 1000px 100%;
  }
  .scv2-vision::before, .scv2-goal::before, .scv2-capacity::before, .scv2-resources::before, .scv2-kim::before,
  .scv2-capacity::after, .scv2-resources::after, .scv2-kim::after { background-position: center top; }
  .scv2-cta::after { background-position: center bottom; }

  /* 2. Kennel tabs: photo pinned under the sticky header (88px) above the list, so it stays
     visible while scrolling through and picking items. */
  .scv2-tabs__grid { display: flex; flex-direction: column; gap: 24px; }
  .scv2-tabs__media { order: -1; position: sticky; top: 104px; z-index: 3; }
  .scv2-tabs__media-item { border-width: 6px; aspect-ratio: 16 / 10; max-height: 30vh; width: 100%; box-shadow: 0 6px 16px rgba(0, 30, 25, .18); }

  /* 3. Vision: show the whole building. The desktop full-bleed `cover` photo becomes a thin
     slice on a narrow, tall section, so here the photo sits in flow at its natural ratio,
     fading in behind the end of the tagline and out above the numbered list. */
  .scv2-vision { padding-block: 72px 56px; background: linear-gradient(180deg, #6b7e95 0%, #55657a 34%, #2c3a30 62%, #1e2a20 100%); }
  .scv2-vision__media { display: none; }
  .scv2-vision__heading { max-width: none; margin-bottom: 8px; }
  .scv2-vision__heading > * { position: relative; z-index: 1; }
  .scv2-vision__heading::after {
    content: ""; display: block; position: relative;
    width: 100vw; margin: -56px 0 0 calc(50% - 50vw);
    aspect-ratio: 1400 / 891;
    background: linear-gradient(180deg, rgba(102,102,102,.3), rgba(0,0,0,.55)), url("/images/bosc-phase1.webp") center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 88%, transparent 100%);
  }
  .scv2-vision .scv2-rule { margin-top: 0; }

  /* 4. Floor plan: fit the phone width, no sideways scroll. Room names are too small to read
     at this size, so only the three big wings keep a label; tap any room for its description. */
  .scv2-fp-scroll { overflow-x: visible; }
  .scv2-fp-ratio { min-width: 0; }
  .scv2-fp-room { font-size: 0; padding: 0; border-radius: 3px; }
  .scv2-fp-room__meta { display: none; }
  .scv2-fp-room__title { font-size: 10px; line-height: 1.15; padding: 2px; }
  .scv2-fp-plan { border-width: 1px; border-radius: 6px; }
}

/* ---------- Editable sections (v3.53) ----------
   Staff-edited rich text arrives as bare <p> groups inside the old paragraph's class, so the
   wrapper carries the type and the paragraphs reset their own margins. */
.scv2-body-lg > p, .scv2-body-md > p, .scv2-body-lead > p { margin: 0; }
.scv2-body-lg > p + p, .scv2-body-md > p + p, .scv2-body-lead > p + p { margin-top: 12px; }
.scv2-vision .scv2-numbered-item > div > p { margin: 0; }
/* The closing Stories band is the only .nhs-band on this page; keep the site's alternating tint off it. */
.scv2 > .nhs-band.nhs-band--tint { background-color: transparent; }
.scv2-stat .nhs-icon { width: 56px; height: 56px; flex: none; opacity: .5; }
.scv2-capacity__intro .scv2-h2--center { text-wrap: balance; }
.scv2-kim__content .scv2-body-md a { font-weight: 700; text-decoration: underline; }

/* Flipbook dialog (js/nhs-flipbook.js) */
.scv2-resource-card__dl { margin-top: 4px; min-height: 44px; display: inline-flex; align-items: center; color: var(--teal-deep, #1d3b3a); text-decoration: underline; }
/* the reader fills the whole screen (no window, no rounded corners), whether or not the browser allows real full screen */
.scv2-flip { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--teal-deep); color: #fff; }
.scv2-flip__wrap { display: flex; flex-direction: column; height: 100%; background: var(--teal-deep); }
.scv2-flip::backdrop { background: rgba(0, 0, 0, .7); }
.scv2-flip__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; }
.scv2-flip__btn { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; font: inherit; color: #fff; background: transparent; border: 2px solid #fff; border-radius: 999px; cursor: pointer; text-decoration: none; }
.scv2-flip__btn:hover { background: rgba(255, 255, 255, .15); }
.scv2-flip__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.scv2-flip__status { margin: 0 auto 0 8px; font-variant-numeric: tabular-nums; }
.scv2-flip__book { flex: 1 1 auto; min-height: 0; }
.scv2-flip__brand { flex: 0 1 auto; margin: 0 auto 0 4px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: 1.125rem; font-weight: 700; }
@media (max-width: 899px) { .scv2-flip__brand { order: -1; flex: 0 0 100%; justify-content: flex-start; } }
.scv2-flip__brand img { height: 41px; width: auto; }

/* Interactive cover. The hover page curl is drawn in WebGL by /js/nhs-page-curl.js into a canvas laid over the cover:
   while it runs (.is-curl-active) the cover image and CSS border are hidden (the canvas draws both) and the media may
   overflow, since the lifted sheet and its shadow reach past the card. .is-curl marks a card where the curl is wired up;
   without it (no WebGL2, no mouse) the card just lifts a little. */
.scv2-resource-card.is-flip .scv2-resource-card__media { position: relative; cursor: pointer; }
.scv2-curl-canvas { position: absolute; display: none; pointer-events: none; }
.scv2-resources { overflow-x: clip; } /* the canvas reaches past the cards; never let that scroll the page sideways */
.scv2-resource-card.is-curl-active { position: relative; z-index: 4; }
.scv2-resource-card.is-curl-active .scv2-resource-card__media { overflow: visible; border-color: transparent; }
.scv2-resource-card.is-curl-active .scv2-resource-card__media img { visibility: hidden; }
.scv2-resource-card.is-curl-active .scv2-curl-canvas { display: block; }
@media (hover: hover) {
  .scv2-resource-card.is-flip:not(.is-curl) .scv2-resource-card__media:hover,
  .scv2-resource-card.is-flip:not(.is-curl):has(.scv2-btn:hover, .scv2-btn:focus-visible) .scv2-resource-card__media { transform: translateY(-4px); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .35); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scv2-resource-card.is-flip:not(.is-curl) .scv2-resource-card__media { transition: transform .3s ease, box-shadow .3s ease; }
}

/* Thermometer build (js/nhs-thermo.js): armed = empty, removing it lets the transitions run to the real values */
.scv2-thermo.is-anim .scv2-thermo__fill { transition: width 2.2s cubic-bezier(.215, .61, .355, 1); }
.scv2-thermo.is-anim .scv2-thermo__marker { transition: left 2.2s cubic-bezier(.215, .61, .355, 1); }
.scv2-thermo.is-armed .scv2-thermo__fill { width: 0 !important; }
.scv2-thermo.is-armed .scv2-thermo__marker { left: 0 !important; }

/* Finer sand texture on desktop: the 2200px paper image `cover`-scaled to a 1440px section is ~0.65x, which makes the grain
   coarse behind text. This mirrored tile (seamless both ways, made from the same image at 0.4x) repeats at 1:1 instead.
   Phones already use their own smaller tile (see the max-width: 767px block). The hero text card is small and already fine. */
@media (min-width: 768px) {
  .scv2-hero__media, .scv2-why, .scv2-tabs, .scv2-angel, .scv2-steps, .scv2-cta,
  .scv2-floorplan, .scv2-impact-wrap, .scv2-stats {
    background-image: url('/images/bosc-v2-bg-pattern-fine.webp');
    background-size: 1760px 1174px;
    background-repeat: repeat;
    background-position: center top;
  }
}

/* Scroll builds + micro-animations (js/nhs-bosc-v2.js adds .scv2-anim, tags items, adds .is-in per section) */
@media (prefers-reduced-motion: no-preference) {
  .scv2-anim [data-build] { opacity: 0; transform: translateY(18px); }
  .scv2-anim [data-build].is-in {
    opacity: 1; transform: none;
    transition: opacity .9s ease calc(var(--i, 0) * 150ms), transform .9s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 150ms);
  }
  /* The whole list of kennel areas fades in together, quickly, rather than a row at a time */
  .scv2-anim .scv2-tabs__list[data-build].is-in { transition: opacity .45s ease, transform .45s ease; }
  .scv2-anim .scv2-w { display: inline-block; opacity: 0; transform: translateY(.5em); }
  .scv2-anim .is-in .scv2-w {
    opacity: 1; transform: none;
    transition: opacity .7s ease calc(var(--w, 0) * 80ms), transform .7s cubic-bezier(.2, .7, .3, 1) calc(var(--w, 0) * 80ms);
  }
  /* Floor-plan tiles: fade in from the top-right corner down to the bottom-left (--d set by the script) */
  .scv2-anim [data-tile] { opacity: 0; transform: scale(.5); }
  /* The legend pills come in one after another in the order listed, each with the same --d as its rooms on the plan (js). Desktop only:
     on phones the pills sit above the plan and are simply shown. */
  @media (min-width: 1024px) {
    .scv2-anim .scv2-fp-key { opacity: 0; transform: translateX(-16px) scale(.96); }
    .scv2-anim .scv2-fp-key.is-in { opacity: 1; transform: none; transition: opacity .25s ease var(--d, 0s), transform .55s cubic-bezier(.34, 1.6, .5, 1) var(--d, 0s); }
  }
  .scv2-anim .is-in [data-tile] {
    opacity: 1; transform: none;
    transition: opacity .25s ease var(--d, 0s), transform .55s cubic-bezier(.34, 1.8, .5, 1) var(--d, 0s), box-shadow .18s ease, filter .18s ease;
  }
  .scv2-anim .scv2-numbered-item[data-build] .scv2-num { transform: scale(.5); }
  .scv2-anim .scv2-numbered-item[data-build].is-in .scv2-num { transform: none; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .25s; }
  .scv2-anim .scv2-impact-heading__brush { clip-path: inset(0 100% 0 0); }
  .scv2-anim .scv2-impact-heading .scv2-container.is-in .scv2-impact-heading__brush { clip-path: inset(0); transition: clip-path 1.4s cubic-bezier(.6, .1, .3, 1) .2s; }

  /* Micro-interactions */
  .scv2-btn { transition: transform .18s ease, box-shadow .18s ease; }
  .scv2-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 52, 28, .2); }
  .scv2-btn:active { transform: scale(.97); box-shadow: none; }
  .scv2-stat, .scv2-phase, .scv2-capacity__card { transition: transform .25s ease, box-shadow .25s ease; }
  .scv2-stat:hover, .scv2-phase:hover, .scv2-capacity__card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 52, 28, .14); }
  .scv2-fp-room:hover, .scv2-fp-room:focus-visible, .scv2-fp-room.is-active, .scv2-fp-room.is-hover { transform: scale(1.03); }
  .scv2-fp-room { transition: box-shadow .18s ease, filter .18s ease, transform .18s ease; }

  /* Hero: the card behind the text fades in first, then the text builds on top of it */
  .scv2-anim .scv2-hero__panel { isolation: isolate; background: none; box-shadow: none; }
  .scv2-anim .scv2-hero__panel::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
    background-color: var(--cream);
    background-image: url('/images/bosc-v2-bg-pattern.webp');
    background-repeat: no-repeat; background-blend-mode: multiply; background-size: cover; background-position: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  }
  .scv2-anim .scv2-hero__panel.is-in::before { opacity: 1; transition: opacity 1.4s ease; } /* the card itself fades in slowly, the text starts building once it is about half there */
  .scv2-anim .scv2-hero__panel [data-build].is-in { transition-delay: calc(.1s + var(--i, 0) * 100ms); }
  /* Tagline, intro text, buttons and the eyebrow line fade in (opacity only) one after another, timed by js after the title */
  .scv2-anim .scv2-hero__panel .hero-fade { opacity: 0; }
  .scv2-anim .scv2-hero__panel .hero-fade.is-in { opacity: 1; transition: opacity .6s ease; }
  .scv2-anim .scv2-hero__panel .scv2-eyebrow.hero-fade.is-in { transition-duration: 2s; } /* the small line under everything drifts in slowly */
  /* The title comes in slowly, a beat per line group: "Built" ... "On" ... "Second Chances" (js sets --w and the line break) */
  .scv2-anim .scv2-hero__title.is-in .scv2-w { transition: opacity .9s ease calc(.55s + var(--w, 0) * .4s), transform .9s cubic-bezier(.2, .7, .3, 1) calc(.55s + var(--w, 0) * .4s); }

  /* Closing "We Want to Hear YOUR Stories!" CTA jiggles (quick shake, dying out) when hovered; this page only, the CTA is shared site-wide */
  @keyframes scv2-wiggle {
    0%, 100% { transform: none; }
    10% { transform: rotate(-1.4deg) translateX(-2px); }
    20% { transform: rotate(1.4deg) translateX(2px); }
    30% { transform: rotate(-1.2deg) translateX(-2px); }
    40% { transform: rotate(1.2deg) translateX(2px); }
    50% { transform: rotate(-.9deg) translateX(-1px); }
    60% { transform: rotate(.9deg) translateX(1px); }
    70% { transform: rotate(-.5deg); }
    80% { transform: rotate(.5deg); }
    90% { transform: rotate(-.2deg); }
  }
  .scv2 .nhs-cta:hover, .scv2 .nhs-cta.is-wiggle { animation: scv2-wiggle .5s ease-in-out; }

  /* Once Angel's photo has landed (js adds .is-landed), hovering or focusing it picks it up like a print */
  .scv2-angel__photo.is-landed { transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease; }
  .scv2-angel__photo.is-landed:hover, .scv2-angel__photo.is-landed:focus-visible {
    transform: translateY(-8px) rotate(-1deg) scale(1.02);
    box-shadow: 0 34px 60px rgba(0, 52, 28, .32), 0 8px 16px rgba(0, 52, 28, .18);
  }
}

/* ---------- Campaign header: the white bar wipes away to the left and stops at the logo (js/nhs-bosc-header.js) ---------- */
/* The header keeps its sticky place but takes no room; its bar (everything that was inside it) is positioned inside it.
   Closed, the bar is clipped from its right edge back to just past the logo (--hdr-cut, set by the script), so the one
   logo never moves or changes; open, the clip is lifted (its bottom edge stays long so the dropdown panels are not cut). */
.scv2-hdr { height: 0; background: transparent; overflow: visible; }
.scv2-hdr__bar {
  position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; padding-inline: 40px;
  background: var(--bg-page, #fff); box-shadow: 0 8px 28px rgba(0, 30, 25, .2);
  clip-path: inset(0 var(--hdr-cut, 0px) -600px 0);
  transition: clip-path .7s cubic-bezier(.65, 0, .25, 1);
}
.scv2-hdr.is-open .scv2-hdr__bar { clip-path: inset(0 0 -600px 0); }
/* The bar's own 40px side padding sits on top of the header's 120px page margin, 80px less room than every other
   page. On laptops (about 1220 to 1379px) the five nav items then no longer fit beside the logo and the logo is
   squeezed (to 60% at 1220). Drop the extra padding in that band so the header has the same room as the rest of the site. */
@media (min-width: 1220px) and (max-width: 1379px) {
  .scv2-hdr__bar { padding-inline: 0; }
}
/* the pull handle: just a thin line on the box's right edge when closed, and at the end of the row when open */
.scv2-hdr__tab {
  position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 56px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: rgba(0, 52, 28, .35); transition: opacity .3s ease .3s;
}
.scv2-hdr__tab::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; right: 7px; width: 3px; border-radius: 2px;
  background: currentColor; transition: background-color .2s ease;
}
.scv2-hdr__tab:hover, .scv2-hdr__tab:focus-visible { color: var(--orange, #ff6633); }
.scv2-hdr__tab:focus-visible { outline: 3px solid var(--forest, #00341c); outline-offset: -3px; border-radius: 6px; }
.scv2-hdr__tab--show { right: var(--hdr-cut, 0px); }
.scv2-hdr__tab--hide { right: 10px; height: 60px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.scv2-hdr.is-open .scv2-hdr__tab--show { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.scv2-hdr.is-open .scv2-hdr__tab--hide { opacity: 1; visibility: visible; transition: opacity .3s ease .35s; }
@media (prefers-reduced-motion: reduce) {
  .scv2-hdr__bar, .scv2-hdr__tab { transition: none; }
}

/* The Vision "Explore The Project Plan" button: on hover its label turns italic and springs across to the right-hand end of the
   button and settles with a little bounce. The button is a size container so 100cqw is its own content width; the label is
   moved by (that width - its own width). Hover-capable devices, no reduced-motion only. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scv2-btn--slide { container-type: inline-size; overflow: hidden; }
  .scv2-btn--slide .scv2-btn__label {
    display: inline-block; white-space: nowrap;
    transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), font-style 0s;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    transition-timing-function: linear(0, .45 12%, .95 26%, 1.12 38%, 1 50%, .96 60%, 1.02 72%, 1 84%, 1);
  }
  .scv2-btn--slide:hover .scv2-btn__label, .scv2-btn--slide:focus-visible .scv2-btn__label {
    font-style: italic; transform: translateX(calc(100cqw - 100%));
  }
}