/* ==========================================================================
   Spryt — layout system
   The structural devices from the presentation and layout templates:
   the logo TAB, edge-to-edge block rows, and the wordmark watermark.
   These are what make the brand read as architecture rather than cards.
   ========================================================================== */

/* --- 2.5 / 2.6  THE TAB DEVICE -------------------------------------------
   A block whose corner is stepped away, leaving a tab that carries the logo
   on the surface behind. Spryt sits top-LEFT; Asa always sits top-RIGHT
   (2.6: "when using the tab device for Asa, always position it in the top
   right corner"). Same reflex-corner fillet as the connector.

     ┌──────┐
     │ logo │────────────────────┐
     ├──────┘                    │
     │        block              │
     └───────────────────────────┘
   -------------------------------------------------------------------------- */
.tabbed{
  --tab-fill:var(--pathway-green);
  --tab-r:var(--r-block);
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr;
}
.tabbed__tab{
  grid-row:1; align-self:end;
  display:flex; align-items:center; gap:.6em;
  padding:0 clamp(20px,2.2vw,32px) clamp(14px,1.4vw,20px) 0;
}
.tabbed__body{
  grid-column:1 / 3; grid-row:2;
  position:relative;
  background:var(--tab-fill);
  border-radius:0 var(--tab-r) var(--tab-r) var(--tab-r);
  padding:clamp(28px,3.4vw,60px);
  display:flex; flex-direction:column; justify-content:center;
}
/* the strip that sits beside the tab, completing the block's top edge */
.tabbed__ledge{
  grid-column:2; grid-row:1;
  background:var(--tab-fill);
  border-radius:var(--tab-r) var(--tab-r) 0 0;
  position:relative;
}
/* reflex corner where the ledge meets the body, left of the ledge */
.tabbed__ledge::after{
  content:""; position:absolute;
  left:calc(-1 * var(--tab-r)); bottom:0;
  width:var(--tab-r); height:var(--tab-r); pointer-events:none;
  background:radial-gradient(circle at 0 0,
    transparent var(--tab-r), var(--tab-fill) calc(var(--tab-r) + 0.5px));
}

/* Asa mirrors to the top right. */
.tabbed--right{ grid-template-columns:1fr auto; }
.tabbed--right .tabbed__tab{ grid-column:2; justify-content:flex-end;
  padding:0 0 clamp(14px,1.4vw,20px) clamp(20px,2.2vw,32px); }
.tabbed--right .tabbed__ledge{ grid-column:1;
  border-radius:var(--tab-r) var(--tab-r) 0 0; }
.tabbed--right .tabbed__body{ border-radius:var(--tab-r) 0 var(--tab-r) var(--tab-r); }
.tabbed--right .tabbed__ledge::after{
  left:auto; right:calc(-1 * var(--tab-r));
  background:radial-gradient(circle at 100% 0,
    transparent var(--tab-r), var(--tab-fill) calc(var(--tab-r) + 0.5px));
}

/* --- Full-bleed sections -------------------------------------------------
   Template layouts run blocks to the page edge. `.bleed` breaks a child out
   of the centred column; `.bleed-right` keeps the left edge on the column
   and runs the right edge off-screen (and vice versa). */
/* 100vw includes the scrollbar, so a full-bleed child can push the page
   1–17px wide. Clipping at the root is the cheap, reliable guard. */
html{ overflow-x:hidden; }
.bleed{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); }
.bleed-right{ margin-right:calc(50% - 50vw); }
.bleed-left{ margin-left:calc(50% - 50vw); }

/* --- Edge-to-edge block row ----------------------------------------------
   Deck slide 2: cloud block, sky stat and photograph abutting with no gap,
   sharing one height. Blocks are square where they meet and rounded only on
   the outside of the run. */
.run{ display:grid; gap:0; align-items:stretch; }
.run > *{ border-radius:0; }
.run > *:first-child{ border-radius:var(--r-block) 0 0 var(--r-block); }
.run > *:last-child{ border-radius:0 var(--r-block) var(--r-block) 0; }
.run > *:only-child{ border-radius:var(--r-block); }
.run .media{ overflow:hidden; }

/* --- Wordmark watermark --------------------------------------------------
   The templates set the wordmark very large and very low-contrast in a
   bottom corner. It is decorative only. */
/* Held inside the section, as the templates do — a wordmark cropped by the
   viewport edge reads as an accident rather than a watermark. */
.wordmark{
  position:absolute; left:var(--gutter); bottom:clamp(18px,2.4vw,40px);
  width:min(24%,290px); height:auto;
  opacity:.07; pointer-events:none; z-index:0;
}
.wordmark--right{ left:auto; right:var(--gutter); }
.has-wordmark{ position:relative; overflow:hidden; }
.has-wordmark > *:not(.wordmark){ position:relative; z-index:1; }

/* --- Overlapping callout -------------------------------------------------
   Template 1: an Asa Sunrise card sitting over the top-right corner of a
   photograph. Nested-block logic (6.6), pinned to a corner. */
.overlay{ position:absolute; z-index:2; max-width:min(24rem,72%);
  border-radius:var(--r-card); padding:clamp(18px,1.8vw,26px); }
.overlay--tr{ top:clamp(16px,1.6vw,26px); right:clamp(16px,1.6vw,26px); }
.overlay--bl{ left:clamp(16px,1.6vw,26px); bottom:clamp(16px,1.6vw,26px); }
.overlay--br{ right:clamp(16px,1.6vw,26px); bottom:clamp(16px,1.6vw,26px); }

/* --- Split hero ----------------------------------------------------------
   Template 3: photograph flush to one half, flat colour to the other, both
   running the full height of the section. */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:clamp(420px,54vw,660px); }
.split__media{ position:relative; overflow:hidden; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__panel{ display:flex; flex-direction:column; justify-content:center;
  gap:clamp(16px,1.8vw,26px); padding:clamp(28px,4vw,72px); }

/* --- Eyebrow -------------------------------------------------------------
   The templates set the section label in Spryt Sky on Pathway Green, and in
   Pathway Green on light surfaces. Sky on white measures 1.75:1, so it is
   never used there however 4.3 reads. */
/* Set as an inherited custom property, not a descendant rule, so a light
   block nested inside a Pathway Green section resolves correctly. */
.eyebrow{ font-size:var(--t-label); font-weight:600; letter-spacing:var(--track);
  color:var(--eyebrow,var(--pathway-green)); }
.on-green{ --eyebrow:var(--spryt-sky); }
.on-sunrise{ --eyebrow:var(--white); }
.on-white, .on-cloud, .on-sky{ --eyebrow:var(--pathway-green); }

/* --- Numbered steps ------------------------------------------------------
   Deck slides number real sequences 01 / 02 / 03. Used only where the
   content genuinely is ordered. */
.steps{ display:grid; gap:clamp(24px,3vw,44px); }
.step__num{ font-size:var(--t-small); font-weight:600;
  color:var(--eyebrow,var(--asa-sunrise));
  display:block; margin-bottom:clamp(12px,1.4vw,20px); }

/* --- Channel marks ------------------------------------------------------- */
.channels{ display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(12px,1.4vw,20px); }
.channels img{ height:22px; width:auto; }
.channels span{ font-size:var(--t-small); opacity:.8; }

@media (max-width:860px){
  .split, .split[style]{ grid-template-columns:1fr !important; min-height:0; }
  .split__media{ min-height:clamp(260px,58vw,360px); }
  .run{ grid-template-columns:1fr !important; }
  .run > *{ border-radius:0 !important; }
  .run > *:first-child{ border-radius:var(--r-block) var(--r-block) 0 0 !important; }
  .run > *:last-child{ border-radius:0 0 var(--r-block) var(--r-block) !important; }
  .overlay{ max-width:calc(100% - 32px); }
  .wordmark{ width:56%; }
}

/* --- Home hero ------------------------------------------------------------
   Copy block on the column, photograph running off the right edge, so the
   composition reads as architecture rather than two cards in a container. */
.hero-grid{
  display:grid; gap:clamp(20px,2.4vw,36px);
  grid-template-columns:1.05fr 1fr; align-items:stretch;
}
.hero-grid__copy{ display:flex; }
.hero-grid__copy .tabbed{ width:100%; }
.hero-grid__media{ position:relative; min-height:clamp(360px,40vw,520px); }
.proof-run{ grid-template-columns:1.3fr 1fr 1fr; margin-top:clamp(20px,2.4vw,36px); }

@media (max-width:1024px){ .hero-grid{ grid-template-columns:1fr; }
  .hero-grid__media{ margin-right:0; min-height:clamp(300px,50vw,420px); }
  .proof-run{ grid-template-columns:1fr; } }

/* --- MediDrive hero: card and photograph side by side --------------------
   Same composition language as the home and Asa heroes: a white copy card on
   the left and the photograph on the right, filling the card's full height so
   the two read as one clean rectangle rather than a card floating over a
   letterboxed photo. */
.md-hero2{
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:0.92fr 1fr; align-items:stretch;
}
.md-hero2__card{
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,2vw,26px);
  padding:clamp(28px,3.4vw,56px);
}
.md-hero2__media{
  margin:0; position:relative; align-self:stretch;
  min-height:clamp(360px,40vw,540px);
  border-radius:var(--r-block); overflow:hidden;
}
.md-hero2__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
}
@media (max-width:900px){
  /* stacked: photograph on top, card below (matching the Asa hero order) */
  .md-hero2{ grid-template-columns:1fr; }
  .md-hero2__media{ order:1; min-height:clamp(280px,58vw,420px); }
  .md-hero2__card{ order:2; }
}

/* --- Tab, chip variant ---------------------------------------------------
   Where the surface behind the tab is a photograph or the block's own
   colour, the tab carries its own fill so the logo never sits on busy
   imagery (2.3, logo don'ts). The chip's rounded corners cut the notch, so
   the ledge fillet is not needed. */
.tabbed--chip .tabbed__tab{
  align-self:stretch;
  background:var(--tab-chip,var(--white));
  padding:clamp(14px,1.4vw,20px) clamp(20px,2.2vw,32px);
  border-radius:var(--tab-r) var(--tab-r) 0 var(--tab-r);
}
.tabbed--chip.tabbed--right .tabbed__tab{
  border-radius:var(--tab-r) var(--tab-r) var(--tab-r) 0;
}
.tabbed--chip .tabbed__ledge::after{ display:none; }
.tabbed--chip .tabbed__ledge{ background:transparent; }
.tabbed--chip.tabbed--right .tabbed__body{
  border-radius:var(--tab-r) 0 var(--tab-r) var(--tab-r);
}

/* --- Home hero, p46 -------------------------------------------------------
   White block and case-study card stacked in the left column; photograph
   right, running the full height of both. */
.hero{
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:0.87fr 1fr; align-items:stretch;
}
/* The column stretches to the row height; its children must stretch with it,
   or the last block stops short of the photograph's bottom edge. */
.hero__col{ display:grid; gap:clamp(16px,2vw,22px); align-content:stretch;
  grid-template-rows:auto 1fr; }
/* p46: the photograph runs the full height of the white block plus the
   case-study card. No min-height on desktop — the column sets the height
   and the image stretches to match it. */
.hero__media{ align-self:stretch; }
/* p46: a tab is notched out of the photograph's top-right corner. Asa's
   tab always sits top right (2.6). The pill inside it is the mockup's
   "Demo Asa"; the brief defers that to phase 2, so it currently links
   through to the Asa page. */
/* p46: the notch is cut out of the PHOTOGRAPH, so the Pathway Green behind
   shows through, carrying the Asa symbol avatar (2.2) and the pill. The tab
   is painted in the section colour and sized to its own content, so the
   notch hugs what is inside it — a fixed-fraction notch left a band of empty
   green beside the logo. The tab sits outside the photograph's clip, so no
   antialiased seam can form along the corner. */
.hero__media{ position:relative; align-self:stretch; }
.hero__photo{ position:absolute; inset:0; overflow:hidden;
  border-radius:var(--r-block); }
.hero__photo img{ width:100%; height:100%; object-fit:cover;
  object-position:center 30%; }
.hero__tab{
  --tab-r:clamp(5px,0.55vw,8px);   /* 6.6: under 15% of the tab height */
  position:absolute; top:0; right:0; z-index:2;
  background:var(--pathway-green);
  border-radius:0 0 0 var(--tab-r);
  display:flex; align-items:center; gap:clamp(8px,1vw,14px);
  padding:0 0 clamp(12px,1.3vw,18px) clamp(16px,1.8vw,26px);
}
.asa-avatar{
  display:grid; place-items:center;
  width:clamp(30px,2.6vw,40px); aspect-ratio:1;
  background:var(--white); border-radius:clamp(4px,0.4vw,5px);
  color:var(--asa-sunrise);
}
.asa-avatar svg{ width:62%; height:auto; }
.hero__case-head{ display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; }


/* --- Pivot band + p42 block watermark ------------------------------------
   Loose staircase of rounded blocks, one step off the background. */
.pivot{ position:relative; overflow:hidden;
  padding-block:clamp(96px,12vw,168px); text-align:center; }
.pivot .wrap{ position:relative; z-index:1; }
.pivot .display{ max-width:22ch; margin-inline:auto; }
/* When the animated connector device is present the band becomes a two-column
   composition: the question on the left, the mark "doing the talking" on the
   right. Collapses to stacked and centred on narrow screens. */
.pivot__grid{ display:grid; gap:clamp(32px,5vw,72px); align-items:center;
  grid-template-columns:1.1fr 0.9fr; text-align:left; }
.pivot__grid .display{ margin-inline:0; }
.pivot__device{ position:relative; }
/* The concept runs the stage at 560px against a 460-unit viewBox. The pivot
   column is narrower than the concept's hero, so it is held at 440px — the
   blocks then read at the same physical size they did before the viewBox
   changed, with the extra units going to the two labels either side. */
.pivot__device .connector-loop{ max-width:min(100%,440px); margin-inline:auto; }
@media (max-width:860px){
  .pivot__grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .pivot__grid .display{ margin-inline:auto; }
}
/* Measured on p42. The top-left cluster is THREE blocks in a descending
   zigzag — a wide one at the top, then a square down-left, then a square
   down-right of that — on a 1:1:2 column grid with a hairline of field
   showing between them. The bottom-right cluster is only TWO. */
.bw{ position:absolute; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:1fr 1fr 2fr; grid-template-rows:repeat(3,1fr);
  gap:clamp(2px,0.3vw,5px);
  width:clamp(180px,20vw,300px); aspect-ratio:662 / 487; }
.bw i{ background:rgba(255,255,255,.038); border-radius:clamp(6px,0.7vw,11px); }
.bw i:nth-child(1){ grid-area:1/2/2/4; }
.bw i:nth-child(2){ grid-area:2/1/3/2; }
.bw i:nth-child(3){ grid-area:3/2/4/3; }
/* Held fully inside the band, as on p42 — a cropped staircase reads as an
   accident rather than a watermark. */
.bw--tl{ top:clamp(20px,3vw,52px); left:clamp(16px,2.5vw,56px); }
.bw--br{
  bottom:clamp(20px,3vw,52px); right:clamp(16px,2.5vw,56px);
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  aspect-ratio:1 / 1;
}
.bw--br i:nth-child(1){ grid-area:1 / 2 / 2 / 3; }
.bw--br i:nth-child(2){ grid-area:2 / 1 / 3 / 2; }
.bw--br i:nth-child(3){ display:none; }

@media (max-width:1024px){
  /* Screenshot 2: on mobile the photograph (with its Asa tab) comes FIRST,
     then the orange copy block below it. */
  .hero{ grid-template-columns:1fr; }
  .hero__col{ display:contents; }
  .hero__media{ order:1; }
  .hero__col > *:nth-child(1){ order:2; }
  .hero__col > *:nth-child(2){ order:3; }
  .hero__media{ min-height:clamp(300px,60vw,440px); }
  .silent-gap{ grid-template-columns:1fr; }
}

/* --- Patient journey ------------------------------------------------------
   The presentation template's "Five words, one story" run: abutting colour
   blocks, a label at the top of each, then the content. It suits a journey
   better than a grid because it is ONE unbroken line — the eye only ever
   travels in one direction, which a 3x2 grid breaks at step four.

   The colour sequence runs light to dark so the last block carries the
   payoff, and no two neighbours share a surface.
   ------------------------------------------------------------------------- */
.journey{
  list-style:none; margin:clamp(24px,3vw,44px) 0 0; padding:0;
  grid-template-columns:repeat(6,1fr);
}
.step-card{
  display:flex; flex-direction:column;
  gap:clamp(8px,0.8vw,12px);
  padding:clamp(18px,1.7vw,28px);
  min-height:clamp(230px,20vw,300px);
}
.step__num{
  font-size:var(--t-label); font-weight:600; letter-spacing:.06em;
  opacity:.62;
}
.step__title{
  font-size:clamp(0.95rem,1.15vw,1.15rem); line-height:1.2;
  font-weight:600; letter-spacing:-0.01em;
}
.step-card .small{ font-size:clamp(11px,0.85vw,13px); line-height:1.45;
  max-width:none; }
.step-card .dialogue,
.step-card .outcome{ margin-top:auto; padding-top:clamp(10px,1.2vw,16px); }
.step-card .dialogue__concern{
  background:var(--white); color:var(--pathway-green);
  margin:0; border-radius:var(--r-chip);
  font-size:clamp(11px,0.85vw,12px); padding:10px 12px; max-width:none;
}
.step-card .outcome{ align-self:start; }

/* Spryt Sky measures 1.75:1 on white but 8.4:1 on Pathway Green, so the
   number takes the accent only where it can carry it. */
.step-card.on-green .step__num{ color:var(--spryt-sky); opacity:1; }
.step-card.on-green .small{ color:var(--cloud); }
.step-card.on-sunrise .dialogue__concern,
.step-card.on-green .dialogue__concern{ background:var(--white); }

/* .run has a blanket single-column rule below 860px, so these need to match
   its weight to keep the six steps in a readable grid down to phone size. */
@media (max-width:1100px){
  .run.journey{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:760px){
  .run.journey{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){
  /* On a phone the six-block run is taller than the screen, so it becomes a
     horizontal carousel: one card at a time, scroll-snapping, auto-advancing
     (site.js). The run stops abutting — each step is now its own rounded card
     with a full radius, since they no longer share edges. */
  .run.journey{
    display:flex !important; grid-template-columns:none !important;
    gap:clamp(12px,3.4vw,18px);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    /* let the cards run to the screen edges, with a peek of the next one */
    margin-inline:calc(-1 * var(--gutter));
    padding:4px var(--gutter) clamp(14px,4vw,20px);
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .run.journey::-webkit-scrollbar{ display:none; }
  .run.journey > .step-card{
    flex:0 0 84%;                 /* one card fills the view, next one peeks */
    scroll-snap-align:start;
    min-height:0;                 /* size to content — no forced dead space */
    align-self:stretch;           /* all cards match the tallest for a clean row */
    border-radius:var(--r-card) !important;   /* every card fully rounded */
    padding:clamp(20px,5vw,28px) clamp(18px,4.5vw,24px);
  }
  /* hairline dividers between abutting blocks are meaningless once separated */
  .run.journey > .step-card + .step-card{ box-shadow:none !important; }
  /* the dialogue/outcome chip no longer pushes to the card's bottom — it sits
     just after the copy, so the tallest card (and therefore every card) is as
     short as its content, removing the empty space (screenshot 3) */
  .run.journey .step-card .dialogue,
  .run.journey .step-card .outcome{ margin-top:clamp(12px,3vw,18px); }
}

/* --- Stat figure scales with how many sit in a row -----------------------
   A figure block in a three-up row has roughly half the width of one in a
   two-up row, so the figure has to come down with it or it overflows. */
.grid-2 .stat-figure{ font-size:clamp(2.1rem,3.2vw,3rem); }
.grid-3 .stat-figure{ font-size:clamp(1.7rem,2.5vw,2.4rem); line-height:1.05; }
.grid-3 .connector--stat > .connector__a p,
.grid-2 .connector--stat > .connector__a p{ font-size:var(--t-label); line-height:1.4; }


/* --- Closing vision -------------------------------------------------------
   Manifesto copy left, photograph right, spanning the full column so both
   outer edges sit on the page margins. The photograph carries a shallow
   connector silhouette — small notches top-left and bottom-right — so it
   reads as the mark without becoming a device in its own right. Because the
   clip is an SVG viewBox, the media keeps that viewBox's aspect ratio;
   stretched, it would crop and the notches would shift.
   ------------------------------------------------------------------------- */
.manifesto-section{ padding-block:clamp(64px,8vw,120px); }
/* an even split: copy left, photograph right */
.manifesto{
  display:grid; gap:clamp(28px,3.6vw,64px);
  grid-template-columns:1fr 1fr;
  align-items:center;
}
.manifesto__copy p{ max-width:62ch; }
.manifesto__close{
  font-size:clamp(1.5rem,2.7vw,2.5rem); line-height:1.15;
  letter-spacing:var(--track);
  color:var(--spryt-sky); margin-top:clamp(12px,1.6vw,24px); max-width:none;
}
/* full height of the section; the notches are percentages of this box */
.manifesto__media{
  --cut-x:17%; --cut-y:46%; --cut-r:var(--r-block);
  --cut-bg:var(--pathway-green);   /* must match the section's surface */
  margin:0; position:relative; align-self:stretch;
  min-height:clamp(300px,34vw,520px);
}
.manifesto__media img{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  border-radius:var(--r-block); }
.mcut{ position:absolute; background:var(--cut-bg); }
.mcut::before, .mcut::after{
  content:""; position:absolute;
  width:var(--cut-r); height:var(--cut-r);
}
/* top-left notch */
.mcut--tl{ left:0; top:0; width:var(--cut-x); height:var(--cut-y);
  border-bottom-right-radius:var(--cut-r); }
.mcut--tl::before{ right:calc(-1 * var(--cut-r)); top:0;
  background:radial-gradient(circle at 100% 100%,
    transparent var(--cut-r), var(--cut-bg) calc(var(--cut-r) + .5px)); }
.mcut--tl::after{ left:0; bottom:calc(-1 * var(--cut-r));
  background:radial-gradient(circle at 100% 100%,
    transparent var(--cut-r), var(--cut-bg) calc(var(--cut-r) + .5px)); }
/* bottom-right notch */
.mcut--br{ right:0; bottom:0; width:var(--cut-x);
  height:calc(100% - var(--cut-y));
  border-top-left-radius:var(--cut-r); }
.mcut--br::before{ left:calc(-1 * var(--cut-r)); bottom:0;
  background:radial-gradient(circle at 0 0,
    transparent var(--cut-r), var(--cut-bg) calc(var(--cut-r) + .5px)); }
.mcut--br::after{ right:0; top:calc(-1 * var(--cut-r));
  background:radial-gradient(circle at 0 0,
    transparent var(--cut-r), var(--cut-bg) calc(var(--cut-r) + .5px)); }

@media (max-width:900px){
  .manifesto{ grid-template-columns:1fr; }
  /* the measure is capped again once the copy has the full column */
  .manifesto__copy p{ max-width:64ch; }
  .manifesto__media{ min-height:clamp(260px,52vw,380px); }
}

/* --- The silent gap -------------------------------------------------------
   White copy block on a Cloud field, photograph right. The PHOTOGRAPH carries
   the connector silhouette: a notch is cut from its lower-left, and the stat
   fills exactly that notch, so the two lock into a single shape rather than
   the stat sitting on top of the image.

   The clip is an SVG viewBox, so the media must keep that viewBox's aspect
   ratio — stretched by the grid it would crop (slice) and the notch would
   drift away from the stat. The media therefore sizes itself and the copy
   block stretches to match it.
   ------------------------------------------------------------------------- */
.sg-row{ display:grid; gap:0; grid-template-columns:1.15fr 1fr;
  align-items:start; }
.sg-copy{
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,2.2vw,32px);
  padding:clamp(32px,4vw,72px);
  border-radius:var(--r-block) 0 0 var(--r-block);
}
/* Section headings sit at display scale, so they follow the guideline's
   display row exactly: -10 tracking, 108% leading (was -0.02em / 1.0). */
.sg-head{ font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.08;
  font-weight:500; letter-spacing:var(--track); }
.sg-copy p{ font-size:clamp(0.95rem,1.05vw,1.05rem); line-height:1.4;
  max-width:44ch; }
.sg-close{ font-weight:600; }  /* 3.1: alternate has no Bold; SemiBold is the heaviest cut */

/* Shorter crop: the copy block stretches to the photograph's height, so a
   tall photograph leaves dead white space above and below the copy. */
.sg-media{ margin:0; position:relative; align-self:start;
  aspect-ratio:680 / 560; }
/* the crop is pulled down so the subject reaches the photograph's left edge:
   the original frames a pale flat wall there, which reads as a gap beside
   the stat rather than as picture */
/* The copy card and the photograph form ONE rounded rectangle: the card
   carries the left corners, the photograph the right, and the join between
   them is square on both sides. Rounding the photograph's left corners left
   a wedge of the section colour showing against the card's square corner.

   The -1px pull closes a subpixel seam: both edges compute to the same
   fractional x, and the browser was leaving a hairline of background
   between them. */
.sg-media img{ width:100%; height:100%; object-fit:cover; display:block;
  object-position:center 68%;
  border-radius:0 var(--r-block) var(--r-block) 0; }
.sg-media{ margin-left:-1px; }

/* The stat connector locks into the photograph's lower-left corner, at the
   proportions Spryt's own manifesto template uses: the figure block sits out
   to the left with its right edge on the image's left edge, and the caption
   block tucks beneath the image. Percentages are of the photograph's box, so
   the lock holds at every width. */
.sg-stat{
  position:absolute; z-index:2;
  /* the whole connector sits INSIDE the photograph's height: the caption
     block's bottom lands on the image's bottom edge rather than hanging
     below it and out of the section's block */
  /* left and width are locked together: the figure block spans 47.5% of the
     connector, so left must equal -0.475 x width for its right edge to land
     on the photograph's left edge. Sized so the overhang clears the copy. */
  left:-40.3%; top:55%; width:76%; height:45%;
  grid-template-columns:0.44fr 0.09fr 0.47fr;
  grid-template-rows:64.5% 35.5%;
  --r-conn:clamp(7px,0.75vw,11px);   /* 6.6: under 15% of the caption block */
}
.sg-stat > .connector__b,
.sg-stat > .connector__a{
  padding:clamp(12px,1.4vw,20px) clamp(14px,1.6vw,24px);
  display:flex; align-items:center;
}
/* Both of these close sub-pixel seams, and both are invisible because the
   surfaces either side are the same colour.

   right: the figure block's right edge is derived from percentages, so it
   lands a fraction short of the photograph's left edge and the white card
   behind showed through as a hairline.

   top: the two blocks share a horizontal edge at a fractional device pixel —
   on mobile the scroll transform guarantees it — so neither one fully covers
   that row and whatever sits behind (the photograph) bleeds through as a
   darker line. Pulling the caption up a pixel gives them a real overlap. */
.sg-stat > .connector__b{ margin-right:-1px; }
.sg-stat > .connector__a{ margin-top:-1px; }

/* Laid out beside the photograph, the caption block's bottom edge is
   COLLINEAR with the photograph's, while its right edge stops 270-440px
   short of the photograph's at every width. That makes its bottom-right a
   mid-edge junction between two blocks sharing one bottom line, not an
   outer corner of the connector — so it has to be square, exactly as the
   copy card and the photograph are square where they meet. Left rounded,
   the curve bit a crescent out of the shared line and the photograph showed
   through it as a sliver under the block. Stacked (<=900px) the connector
   sits clear of the photograph and that corner IS an outer corner, so this
   is scoped to the side-by-side layout only. */
@media (min-width:901px){
  .sg-stat > .connector__a{ border-bottom-right-radius:0; }
}
.sg-stat .stat-figure{ font-size:clamp(1.9rem,3.6vw,4.2rem); line-height:1;
  letter-spacing:-0.02em; }
.sg-stat > .connector__a p{ font-size:clamp(12px,0.95vw,14px); line-height:1.4; }

/* Between the stack breakpoint and ~1280 the copy column narrows faster than
   the overhang does, so the stat starts clipping the body text. The connector
   is pulled in and its rows rebalanced here: the figure row gives height to
   the caption row so the caption's sentence fits inside the photograph rather
   than overshooting its bottom edge, and the columns give the caption block
   more width so the sentence sits on fewer lines. left stays -0.475 x width to
   keep the figure block's right edge locked to the photograph's left edge. */
@media (max-width:1280px){
  .sg-stat{
    left:-33.3%; width:64%;
    /* Anchor to the photograph's BOTTOM edge and let the height follow the
       content, so the caption's sentence can never overshoot the image bottom
       however many lines it takes. */
    top:auto; bottom:0; height:auto;
    grid-template-columns:0.40fr 0.09fr 0.51fr;
    grid-template-rows:auto auto;
  }
  .sg-stat .stat-figure{ font-size:clamp(1.5rem,3.2vw,2.8rem); }
  .sg-stat > .connector__b{ min-height:clamp(78px,9vw,120px); }
  .sg-stat > .connector__a p{ font-size:clamp(11px,1vw,13px); line-height:1.38; }
  .sg-copy p{ max-width:38ch; }
}

@media (max-width:900px){
  .sg-row{ grid-template-columns:1fr; }
  .sg-copy{ border-radius:var(--r-block) var(--r-block) 0 0; }
  /* Stacked, the stat sits BELOW the photograph instead of straddling it:
     with a single column there is nothing to the left to overhang into, so
     an overlapping connector just spilled past the image's edges. The media
     drops its fixed aspect so it can grow around both. */
  .sg-media{ align-self:stretch; aspect-ratio:auto; display:grid; }
  /* Stacked, the copy card sits directly ABOVE the photograph, so the join
     moves from vertical to horizontal: the card keeps the top corners, the
     photograph the bottom two, and the edge between them is square. The
     desktop -1px pull is horizontal and would offset the photograph from the
     card, so it becomes a -1px pull upwards instead. */
  .sg-media{ margin-left:0; margin-top:-1px; }
  .sg-media img{ position:static; width:100%; height:auto;
    aspect-ratio:680 / 460; object-fit:cover;
    border-radius:0 0 var(--r-block) var(--r-block); }
  .sg-stat{
    position:static; width:100%; height:auto;
    margin-top:clamp(16px,3.5vw,26px);
    grid-template-rows:auto auto;
    /* The figure block only has to hold five characters; the caption is a
       full sentence. The default mobile split gave the figure 64% and the
       caption 50%, which left 133px of dead space beside "100m+" while the
       sentence wrapped. Inverted: figure 46%, caption 72%.
       !important because the global small-screen connector rule uses it. */
  }
  /* The global small-screen rule targets .connector[style], and this element
     carries an inline style, so a plain .sg-stat selector loses on
     specificity even with !important. Matching its shape wins.
     The figure block takes more width so "100m+" fills it rather than leaving
     dead space beside a small numeral. */
  .connector.sg-stat[style]{
    grid-template-columns:0.34fr 0.08fr 0.58fr !important;
  }
  .sg-stat > .connector__b{ min-height:clamp(74px,15vw,104px); }
  /* the caption block is short once stacked; its radius has to come down
     with it to stay inside 6.6's 15% of the shortest side */
  .sg-stat{ --r-conn:clamp(4px,0.7vw,6px); }
  .sg-stat > .connector__a{ min-height:clamp(52px,9vw,72px); }
  .sg-stat .stat-figure{ font-size:clamp(2.4rem,8vw,3.4rem); }
}
@media (max-width:560px){
  /* stays stacked; only the crop tightens */
  .sg-media img{ aspect-ratio:680 / 520; }
  .sg-stat .stat-figure{ font-size:clamp(2.2rem,9vw,3rem); }
}


/* --- Partnership quote cards ----------------------------------------------
   Each quote is attributed with its speaker's company logo, so the two cards
   read as a MediDrive voice and a Spryt voice answering each other. A large
   opening quote mark in the surface's accent gives the card presence. */
.quotes{ align-items:stretch; }
.quote-card{
  margin:0; position:relative; display:flex; flex-direction:column;
  gap:clamp(18px,2vw,26px);
  padding:clamp(28px,3vw,44px);
  border-radius:var(--r-block);
}
.quote-card__mark{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.4rem,6vw,5.4rem); line-height:0.6; height:0.5em;
  opacity:.55;
}
.on-sky .quote-card__mark{ color:var(--pathway-green); }
.on-green .quote-card__mark{ color:var(--spryt-sky); opacity:.8; }
.quote-card__text{
  font-size:clamp(1.15rem,1.5vw,1.5rem); line-height:1.34;
  font-weight:600; letter-spacing:-0.01em; max-width:34ch;
}
.quote-card__by{
  margin-top:auto; display:flex; align-items:center; gap:clamp(14px,1.6vw,20px);
  padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.quote-card__logo{ display:block; height:clamp(20px,2vw,26px); width:auto; flex:none; }
.quote-card__logo--spryt svg{ height:clamp(20px,2vw,26px); width:auto; display:block; }
.quote-card__name{ font-size:var(--t-small); font-weight:600; line-height:1.25; }
.quote-card__role{ font-weight:400; opacity:.8; }
@media (max-width:760px){
  .quotes{ grid-template-columns:1fr; }
}

/* --- Proof stats ----------------------------------------------------------
   The brand presents a SET as a run of colour blocks (presentation template,
   "Five words, one story"): equal columns, abutting, rounded only on the
   outside of the run. Three repeats of the connector read as a row of
   identical staircases — the connector is a single feature moment.

   The cells hug their content: a min-height taller than the content plus
   space-between pushed the caption to the floor and left a void under the
   figure. The row still shares one height (grid stretch), so the captions
   bottom-align across all three. */
.stat-run{ grid-template-columns:repeat(3,1fr); }
.stat-cell{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(16px,1.8vw,26px);
  padding:clamp(24px,2.6vw,40px);
}
.stat-cell__figure{
  font-size:clamp(2.4rem,4.6vw,4rem); line-height:0.95;
  letter-spacing:-0.03em; font-weight:400;
}
.stat-cell p:not(.stat-cell__figure){ font-size:var(--t-small); line-height:1.45;
  max-width:34ch; }
.stat-cell.on-green .stat-cell__figure{ color:var(--spryt-sky); }
.stat-cell.on-green p:not(.stat-cell__figure){ color:var(--cloud); }

@media (max-width:860px){
  .stat-run{ grid-template-columns:1fr !important; }
  .stat-cell{ gap:clamp(16px,4vw,28px); }
  /* stacked, the cells are short enough that the run's outer radius crosses
     6.6's 15% ceiling on the last cell */
  .stat-run > *:first-child{ border-radius:var(--r-card) var(--r-card) 0 0 !important; }
  .stat-run > *:last-child{ border-radius:0 0 var(--r-card) var(--r-card) !important; }
}

/* --- Skip link ------------------------------------------------------------
   Off-screen until focused, then anchored top-left. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--pathway-green);
  padding:12px 18px; border-radius:0 0 var(--r-chip) 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

/* --- Meet Asa -------------------------------------------------------------
   p47 sets the "Meet Asa" label at roughly 1.4x the body size, not as a
   small eyebrow. The photograph fills the whole right side of the block —
   pulled up to the notch step and out to the right and bottom edges — and
   the tab CUTS the notch rather than sitting in one, so it can never fall
   out of register. The tab covers the block's top-right corner instead of
   being clipped by it; clipping there left an antialiased arc. */
.meet-asa{
  /* the tab anchors here once the layout stacks and the media goes static */
  position:relative;
  --pad:clamp(24px,2.9vw,46px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:clamp(24px,3.2vw,56px);
  border-radius:var(--r-block); align-items:stretch;
}
.meet-asa__copy{
  display:grid; gap:clamp(16px,1.9vw,26px); align-content:center;
  padding:var(--pad); padding-right:0;
}
.meet-asa__copy p{ max-width:64ch; }
.meet-asa__label{
  font-size:clamp(1.05rem,1.55vw,1.55rem); font-weight:600; line-height:1;
  color:var(--white); letter-spacing:-0.01em;
}
.meet-asa__media{
  margin:0; position:relative; overflow:hidden;
  min-height:clamp(320px,33vw,480px);
  border-radius:0 0 var(--r-block) 0;
}
.meet-asa__media img{ position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.meet-asa__tab{
  --tab-r:clamp(5px,0.55vw,8px);
  position:absolute; top:0; right:0; z-index:2;
  background:var(--white);
  border-radius:0 0 0 var(--tab-r);
  display:flex; align-items:center;
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.7vw,24px)
          clamp(16px,1.7vw,22px) clamp(20px,2.2vw,30px);
}
.meet-asa__tab .logo-lockup{ height:clamp(20px,1.9vw,28px); }
.meet-asa__media .bw{ width:clamp(96px,11vw,150px); }
.meet-asa__media .bw i{ background:rgba(255,255,255,.30); }

@media (max-width:860px){
  .meet-asa{ grid-template-columns:1fr; gap:0; }
  .meet-asa__copy{ padding:var(--pad); }
  .meet-asa__label{ font-size:1.05rem; }

  /* p47's mobile mockup notches the ORANGE block's top-right corner, not the
     photograph. Stacked, the photograph sits at the bottom of the block, so
     the tab has to escape the media's containing block to reach that corner
     — hence the media going static and the photograph returning to flow. */
  .meet-asa__media{ position:static; overflow:visible; min-height:0; }
  .meet-asa__media img{
    position:static; width:100%; height:auto;
    aspect-ratio:16 / 11; object-fit:cover;
    border-radius:0 0 var(--r-block) var(--r-block);
  }
  .meet-asa__tab{ top:0; right:0; }
  .meet-asa__media .bw--br{
    bottom:clamp(14px,4vw,26px); right:clamp(14px,4vw,26px);
  }
}

/* --- Closing band ---------------------------------------------------------
   Centred headline with the call to action beneath it, over the p42 block
   watermark — two loose staircases of rounded blocks, a shade off the
   field, top-left and bottom-right. Measured on p42 at 38%x46% and 19%x31%
   of the panel. Not the icon set: 6.5 watermarks with the BLOCKS. */
.contact-band{ position:relative; overflow:hidden; }
.contact-band__inner{
  position:relative; z-index:1;
  display:grid; justify-items:center; text-align:center;
  gap:clamp(20px,2.4vw,34px);
}
.contact-band__inner h2{ max-width:26ch; }


/* the band's watermark runs larger and a touch stronger than the pivot's,
   because Asa Sunrise carries a light overlay less readily than green */
.contact-band .bw i{ background:rgba(255,255,255,.13); }
/* sized off the band's HEIGHT, not its width: the band is far wider than
   p42's panel, so width fractions taken from p42 would stretch the clusters
   out of proportion with the type */
.contact-band .bw--tl{ height:56%; width:auto;
  left:clamp(10px,2.5vw,52px); top:clamp(10px,2vw,34px); }
.contact-band .bw--br{ height:34%; width:auto;
  right:clamp(10px,2.5vw,52px); bottom:clamp(10px,2vw,34px); }
@media (max-width:640px){
  /* the clusters crowd the type once the band narrows */
  .contact-band .bw--br{ display:none; }
  .contact-band .bw--tl{ height:42%; }
}

/* Section label, set like the "Meet Asa" label on p47: about 1.4x the body
   size rather than a small eyebrow, so it reads as a heading. */
.manifesto__label{
  font-size:clamp(1.05rem,1.55vw,1.55rem); font-weight:600; line-height:1;
  color:var(--white); letter-spacing:-0.01em;
  margin-bottom:clamp(6px,0.8vw,12px);
}

/* --- Asa results ----------------------------------------------------------
   The lead figure keeps the connector (a single feature moment); the
   supporting numbers become a run of colour blocks. */
.stat-run--4{ grid-template-columns:repeat(4,1fr); }
.stat-cell.on-sky .stat-cell__figure,
.stat-cell.on-white .stat-cell__figure,
.stat-cell.on-cloud .stat-cell__figure{ color:var(--pathway-green); }
.stat-cell.on-sunrise .stat-cell__figure{ color:var(--white); }
.stat-cell.on-sunrise p:not(.stat-cell__figure){ color:var(--white); }

@media (max-width:1024px){
  .stat-run--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .stat-run--4{ grid-template-columns:1fr !important; }
}

/* the video block carries the watermark until a real poster frame exists */
.video-block{ position:relative; overflow:hidden; }
.video-block .bw{ z-index:0; }
.video-block .bw i{ background:rgba(255,255,255,.05); }
.video-block .bw--tl{ height:52%; width:auto; left:clamp(10px,2vw,32px);
  top:clamp(10px,2vw,28px); }
.video-block .bw--br{ height:32%; width:auto; right:clamp(10px,2vw,32px);
  bottom:clamp(10px,2vw,28px); }
.video-block .video-facade{ z-index:1; }

/* --- Asa remembers --------------------------------------------------------
   The photograph carries the connector silhouette: it fills the block and
   the copy sits in the notch cut out of its top right. The white copy block
   IS the notch — it paints over the photograph — so the reflex corner is
   just its bottom-left radius, and no clip path is needed.

   The heading rides on the photograph at the bottom left on its own white
   block, which is where the eye lands after the picture.
   ------------------------------------------------------------------------- */
.remembers{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
  grid-template-rows:auto 1fr;
  min-height:clamp(400px,44vw,640px);
}
.remembers__media{
  grid-area:1 / 1 / 3 / 3;      /* the photograph sits behind the whole block */
  margin:0; position:relative; z-index:0;
}
.remembers__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 34%;
  border-radius:var(--r-block);
}
/* The notch: white, flush to the top-right corner, carrying the heading. Its
   BOTTOM-LEFT radius IS the reflex fillet — the photograph bulges into it,
   exactly as the drawn connector rounds an inner corner.

   The 1px outset on the top and right stops the photograph's own corner
   curve showing as a hairline where the two coincide. */
.remembers__title{
  grid-area:1 / 2 / 2 / 3; position:relative; z-index:1;
  background:var(--white); color:var(--pathway-green);
  border-radius:0 var(--r-block) 0 var(--r-block);
  padding:clamp(26px,2.8vw,44px) clamp(24px,2.6vw,44px)
          clamp(26px,2.8vw,44px) clamp(28px,3.2vw,52px);
  margin:-1px -1px 0 0;
  align-self:start;
}

/* The copy rides on the photograph at the bottom left, on its own white
   block — the same 1px outset on the left and bottom. */
.remembers__body{
  grid-area:2 / 1 / 3 / 2; position:relative; z-index:1;
  align-self:end; justify-self:start;
  background:var(--white); color:var(--pathway-green);
  padding:clamp(22px,2.4vw,36px) clamp(26px,3vw,46px);
  border-radius:0 var(--r-block) 0 var(--r-block);
  margin:0 0 -1px -1px;
  gap:clamp(12px,1.4vw,18px);
}
.remembers__body p{ max-width:44ch; }

@media (max-width:860px){
  /* On mobile the heading sits ON the photograph as a white tab notched into
     its lower-left corner — the same tab device as desktop, mirrored left, so
     the label reads on the surface behind it (2.5) rather than as a plain
     stacked bar. The photo is the top row; the title overlaps its bottom-left;
     the body runs full width beneath. */
  .remembers{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    min-height:0; gap:0;
  }
  .remembers__media{
    grid-area:1 / 1 / 2 / 2; min-height:clamp(260px,56vw,400px);
    position:relative; z-index:0;
  }
  .remembers__media img{
    border-radius:var(--r-block) var(--r-block) 0 0;
    height:100%; object-fit:cover; display:block;
  }
  .remembers__title{
    /* overlay the photo's lower-left as a clean white notch tab, rounded only
       on its top-right, flush to the photo's left and bottom edges */
    grid-area:1 / 1 / 2 / 2;
    align-self:end; justify-self:start;
    position:relative; z-index:1;
    background:var(--white); color:var(--pathway-green);
    border-radius:0 var(--r-block) 0 0;
    margin:0; padding:clamp(14px,4vw,22px) clamp(26px,7vw,38px)
                      clamp(12px,3.4vw,18px) var(--gutter);
    max-width:86%;
  }
  .remembers__body{
    grid-area:2 / 1 / 3 / 2; justify-self:stretch;
    border-radius:0 0 var(--r-block) var(--r-block);
    /* -1px closes the subpixel seam between the photograph's hard bottom edge
       and the body block, which otherwise shows as a faint line to the right
       of the white tab */
    margin:-1px 0 0; padding-top:clamp(18px,5vw,26px);
    position:relative; z-index:2;
  }
}

/* --- Why it works --------------------------------------------------------
   The copy names three layers and bolds each one, so the paragraph is a SET.
   It becomes a run of colour blocks, light to dark — the template's "Five
   words, one story" device — and the conclusion is set large on the Cloud
   rather than boxed. Every clause is the brief's own, verbatim.
   ------------------------------------------------------------------------- */
.works{
  display:grid; gap:clamp(20px,2.4vw,40px) clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  align-items:start;
}
.works__title{ align-self:start; }
.works__body p{ max-width:62ch; }
.works__lead{ font-weight:600; }  /* 3.1: SemiBold is the alternate's top weight, not Bold */

.works-run{
  list-style:none; margin:clamp(26px,3.4vw,48px) 0 0; padding:0;
  grid-template-columns:repeat(3,1fr);
}
.layer{
  display:flex; flex-direction:column; gap:clamp(8px,0.9vw,12px);
  padding:clamp(22px,2.4vw,36px);
  min-height:clamp(180px,17vw,240px);
}
.layer__num{ font-size:var(--t-label); font-weight:600;
  letter-spacing:.06em; opacity:.6; }
.layer__title{ font-size:clamp(1.05rem,1.35vw,1.4rem); line-height:1.15;
  font-weight:600; letter-spacing:-0.01em; }
.layer .small{ max-width:none; }
/* One continuous Pathway Green mass, so Spryt Sky can carry every number
   (8.4:1 on this surface) and the body sits in Cloud. */
.layer.on-green .layer__num{ color:var(--spryt-sky); opacity:1; }
.layer.on-green .small{ color:var(--cloud); }
/* Three blocks in the same fill would read as one slab, so a hairline marks
   each division — the same rule the template uses across a colour run. */
.works-run > .layer + .layer{
  box-shadow:inset 1px 0 0 rgba(255,255,255,.16);
}

.works__close{
  margin:clamp(26px,3.4vw,48px) 0 0; max-width:44ch;
  font-size:clamp(1.5rem,3vw,2.8rem); line-height:1.15;
  font-weight:600; letter-spacing:var(--track); color:var(--pathway-green);
}

@media (max-width:900px){
  .remembers{ grid-template-columns:1fr; }
  .remembers__media{ min-height:clamp(260px,54vw,380px); }
  .works{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .run.works-run{ grid-template-columns:1fr !important; }
  .layer{ min-height:0; }
  .run.works-run > *:first-child{
    border-radius:var(--r-card) var(--r-card) 0 0 !important; }
  .run.works-run > *:last-child{
    border-radius:0 0 var(--r-card) var(--r-card) !important; }
  /* stacked, the divisions run horizontally */
  .works-run > .layer + .layer{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
  .works__close{ max-width:none; }
}

/* Partner mark. Sized by height so the lockup keeps its proportions, with
   clear space beneath it before the heading. */
.partner-mark{
  display:block; width:auto; height:clamp(34px,3.6vw,52px);
  margin-bottom:clamp(14px,1.6vw,22px);
}

/* --- Safe by design -------------------------------------------------------
   The NHS England approval is the section's credential, so it sits on its
   own line beneath a rule at statement size rather than trailing the body
   copy as a second paragraph. The icon anchors the left column at the scale
   the presentation deck uses it, with the p42 blocks behind.
   ------------------------------------------------------------------------- */
.safe{
  position:relative;
  display:grid; gap:clamp(26px,3vw,52px) clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  align-items:start;
}
/* No watermark here: the section is not tall enough to hold one clear of
   both the body copy and the statement, and the icon at this scale already
   anchors the left column. */
.safe__mark{
  grid-column:1; display:flex; flex-direction:column;
  gap:clamp(16px,1.8vw,26px);
}
.safe__body{ grid-column:2; }
.safe__icon{ color:var(--asa-sunrise); }
.safe__icon .icon{ width:clamp(64px,7.5vw,116px); height:auto; }
.safe__body p{ max-width:62ch; }

.safe__first{
  grid-column:1 / -1;
  margin:clamp(8px,1.2vw,18px) 0 0;
  padding-top:clamp(24px,2.8vw,42px);
  /* full width, so the rule reads as a division of the section rather than
     a stray line under the left column */
  border-top:1px solid rgba(255,255,255,.18);
  max-width:none;
  font-size:clamp(1.15rem,1.9vw,1.75rem); line-height:1.25;
  font-weight:600; letter-spacing:-0.01em;
  color:var(--white);
}

@media (max-width:860px){
  .safe{ grid-template-columns:1fr; }
  .safe__mark, .safe__body{ grid-column:1; }
  .safe__first{ max-width:none; }
}

/* --- Results band ---------------------------------------------------------
   One band, two labelled rows. Each label sits directly on its row rather
   than floating a section apart from it, and the captions align along a
   single line across every cell — with figures of different heights they
   were stepping up and down and the row stopped reading as one set.
   ------------------------------------------------------------------------- */
.results{ display:grid; gap:clamp(30px,3.6vw,58px); }
.results__lead{ margin:0; }
.results__row{ display:grid; gap:clamp(10px,1.2vw,16px); }
.results__row .eyebrow{ margin:0; }
/* the caption is pushed to the foot of the cell, so all captions in a row
   share a baseline whatever the figure above them does */
.stat-cell p:not(.stat-cell__figure){ margin-top:auto; }

/* --- Asa hero -------------------------------------------------------------
   Same arrangement as the homepage: photograph one side, two stacked blocks
   the other, with Asa's lockup in a tab notched out of the photograph's top
   right (2.6). White ground, as the lockup carries dark ink. */
.hero--asa .hero__tab--asa{
  background:var(--white);
  display:grid; place-items:center;
  padding:clamp(12px,1.2vw,18px) clamp(16px,1.6vw,26px);
}
/* The column is built for the homepage's two blocks (auto + 1fr). With one
   block it sat in the auto row and left an empty second row, so the block
   finished 22px short of the photograph. One row, and the two sides of the
   composition end level. */
.hero--asa .hero__col{ grid-template-rows:1fr; }
.hero--asa .hero__block{ height:100%; justify-content:center; }

/* --- Hero dialogue --------------------------------------------------------
   Two message blocks on the photograph, per 6.3: Asa on Asa Sunrise, the
   outcome on white. Placed low-left, over the darker part of the frame and
   clear of the tab at the top right. */
.hero__thread{
  position:absolute; left:clamp(14px,1.6vw,26px);
  bottom:clamp(14px,1.6vw,26px);
  display:grid; gap:clamp(8px,0.9vw,12px);
  justify-items:start; max-width:min(78%,320px); z-index:2;
}
.hero__msg{
  margin:0; border-radius:var(--r-chip);
  padding:clamp(10px,1vw,15px) clamp(13px,1.3vw,18px);
  font-size:clamp(12px,0.95vw,14px); line-height:1.35;
  box-shadow:0 2px 14px rgba(19,44,44,.18);
}
.hero__msg--asa{ background:var(--asa-sunrise); color:var(--white); }
.hero__msg--patient{
  background:var(--white); color:var(--pathway-green);
  justify-self:end; font-weight:600;
}
@media (max-width:560px){
  .hero__thread{ max-width:86%; }
}