/* ==========================================================================
   SOS LABS AND RESEARCH CENTRE — SITE-WIDE ADDITIONS
   --------------------------------------------------------------------------
   Loaded AFTER css/style.css, which is the approved Concept 02 design system,
   copied across unmodified. Everything in this file is additive: components
   the internal pages need, built from the same tokens, spacing scale, type
   ramp, motion timings and colour palette. No approved value is overridden
   except the logo lockup, which now carries the client's official mark.
   --------------------------------------------------------------------------
   01 Official logo lockup · 02 Internal page hero · 03 Breadcrumbs
   04 Prose · 05 Feature list · 06 Service cards · 07 Image/content split
   08 Tag grids · 09 Contact · 10 Clients · 11 Notices · 12 ISO strip
   13 Legal pages · 14 Section variants
   ========================================================================== */

/* 01 ─────────────────────────────────────────── Official logo lockup ──── */
/* The client's own logo, used as artwork rather than rebuilt in HTML, so the
   tree, the SOST letterforms and the SKY OF SCIENCE & TECHNOLOGY tagline are
   all theirs. Source is 1352x256, displayed around 40px tall, so it is heavily
   oversampled and stays crisp on any screen. Its green is the logo's own
   colour and sits outside the site palette on purpose. */
.brand{display:flex;align-items:center;flex:none}
.brand__logo{
  width:auto;height:40px;object-fit:contain;
  transition:height var(--t-base) var(--ease);
}
.is-stuck .brand__logo{height:34px}

/* The full logo lockup is wider than the concept's mark-plus-text, so the nav
   items give back the difference. Measured at 1240px (the desktop-nav
   breakpoint) the CTA still clears the nav by 27px; at 1440px, 63px. */
.nav-link,.nav-trigger{padding-inline:.62rem}
.nav-link::after,.nav-trigger::after{left:.62rem;right:.62rem}

/* Footer and any oversized use gets the original vertical lockup */
.brand--stack .brand__logo{height:auto;width:min(230px,62vw)}

@media(max-width:479px){
  .brand__logo{height:34px}
  .is-stuck .brand__logo{height:30px}
}

/* 01b ────────────────────────────────── Homepage hero — client collage ── */
/* The collage is shown whole. Giving the frame the image's own aspect ratio
   means object-fit:cover crops nothing, and the block is centred in the column
   rather than stretched to the height of the copy beside it. */
.hero__media--collage{
  display:grid;align-content:center;gap:clamp(1rem,2vw,1.5rem);
  min-height:0;padding-block:clamp(1.25rem,3vw,3rem);
}
.hero__media--collage .hero__shot{
  position:relative;inset:auto;width:100%;aspect-ratio:1402/1122;
}
/* The plate normally breaks out over the photograph. Against the collage that
   would cover two of its panels, so here it sits beneath it instead. */
.hero__media--collage .hero__plate{
  position:relative;left:auto;bottom:auto;translate:none;max-width:none;
}
.hero__media--collage .hero__shot img{object-position:center}
/* The collage is a light image, so the darkening gradient built for a single
   photograph is dropped and the corner marks flip to the ink colour. */
.hero__media--collage .hero__shot::after{display:none}
.hero__media--collage .hero__reg{border-color:rgba(11,37,56,.35)}
@media(max-width:999px){
  .hero__media--collage{padding-inline:var(--gutter);padding-block:0 clamp(1.5rem,4vw,2.5rem)}
}

/* 01c ──────────────────────── Homepage ingredients — stage caption ────── */
/* The stage is a tall image column beside the category index. A solid chip in
   its corner left most of that column doing nothing, so the caption becomes a
   full-width panel naming the category, its line count and the materials in
   it — the left half now carries information. */
.ing__stage-cap{
  left:0;right:0;bottom:0;
  display:grid;gap:.5rem;align-items:start;
  padding:clamp(3.5rem,6vw,6rem) clamp(1.25rem,1rem + 1.2vw,2rem) clamp(1.25rem,1rem + 1vw,1.85rem);
  background:linear-gradient(180deg,rgba(11,37,56,0) 0%,rgba(11,37,56,.72) 34%,rgba(11,37,56,.95) 72%,rgba(11,37,56,.98) 100%);
}
.ing__stage-cap .mono{color:var(--amber);order:1}
.ing__stage-cap b{
  order:2;font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2.05rem);line-height:1.1;color:#fff;
}
.ing__stage-items{
  order:3;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.76);
  max-width:44ch;padding-top:.15rem;
}
@media(max-width:899px){
  .ing__stage-cap{padding-top:clamp(2.5rem,14vw,4rem)}
  .ing__stage-items{font-size:.9rem}
}

/* 01d ──────────────────────────────────────────────── Enquiry form ────── */
/* Honeypot. Kept out of the accessibility tree and off-screen rather than
   display:none, because some bots skip fields that are display:none. */
.hp{
  position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
}
.btn[disabled]{opacity:.62;cursor:progress}
.btn[disabled]::before{transform:translateY(101%)}
.form-status a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* 02 ───────────────────────────────────────────── Internal page hero ──── */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy);color:rgba(255,255,255,.76);
  padding-top:calc(var(--top-h) + var(--bar-h));
}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,37,56,.96) 0%,rgba(11,37,56,.9) 46%,rgba(11,37,56,.74) 100%);
}
/* The horizontal scrim leaves nothing of the photograph visible once the hero
   is narrow, so it becomes a vertical one and the image reads at the top. */
@media(max-width:899px){
  .phero::before{
    background:linear-gradient(180deg,rgba(11,37,56,.72) 0%,rgba(11,37,56,.9) 52%,rgba(11,37,56,.97) 100%);
  }
  .phero__bg img{object-position:center 32%}
}
.phero__in{padding-block:clamp(2.5rem,1.8rem + 3.6vw,4.75rem) clamp(2.25rem,1.6rem + 3vw,4rem)}
/* Page titles are single long words that cannot be broken by an authored line
   break the way the homepage headline is, so this runs a shade smaller than
   --fs-h1. Sized so "ACCREDITATIONS" and "PHARMACEUTICAL" fit at 320px. */
.phero h1{
  color:#fff;text-transform:uppercase;letter-spacing:-.022em;
  font-size:clamp(1.95rem,1.15rem + 3.7vw,4.75rem);
  margin-bottom:clamp(1rem,.8rem + 1vw,1.5rem);
}
.phero__lead{font-size:var(--fs-lead);line-height:1.5;color:rgba(255,255,255,.76);max-width:56ch}
.phero .btn-row{margin-top:clamp(1.75rem,1.2rem + 2vw,2.5rem)}

/* The headline reveal masks each line with overflow:hidden, but the display
   line-height (1.03) is tighter than the font's descenders — so y, g, p and q
   were being clipped. Padding grows the clip box downward; the negative margin
   keeps the layout identical. */
.line{padding-bottom:.14em;margin-bottom:-.14em}

/* 03 ────────────────────────────────────────────────────── Breadcrumbs ── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-bottom:clamp(1.25rem,1rem + 1.2vw,2rem)}
.crumbs li{display:flex;align-items:center;gap:.5rem .7rem;color:rgba(255,255,255,.52)}
.crumbs li + li::before{content:"/";color:rgba(255,255,255,.3)}
.crumbs a{color:var(--aqua)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:rgba(255,255,255,.74)}

/* 04 ───────────────────────────────────────────────────────────── Prose ── */
.prose{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3.5rem)}
@media(min-width:900px){.prose{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start}}
.prose h2{font-size:var(--fs-h2);letter-spacing:-.04em}
.prose h2 .tint{color:var(--teal)}
.prose__body > * + *{margin-top:1.15rem}
.prose__body p{color:var(--ink-soft);max-width:62ch}
.section--navy .prose__body p{color:rgba(255,255,255,.7)}

/* 05 ──────────────────────────────────────────────────── Feature list ─── */
.flist{border-top:1px solid var(--rule)}
.flist__i{
  display:grid;gap:.4rem clamp(1.25rem,1rem + 2vw,3rem);align-items:baseline;
  grid-template-columns:auto minmax(0,1fr);
  padding:clamp(1.25rem,1rem + 1.2vw,1.85rem) 0;border-bottom:1px solid var(--rule);
}
@media(min-width:820px){.flist__i{grid-template-columns:auto minmax(0,.82fr) minmax(0,1.18fr)}}
.flist__i .mono{color:var(--teal)}
.flist__i h3{font-size:clamp(1.08rem,1rem + .6vw,1.45rem)}
.flist__i p{color:var(--ink-soft);grid-column:2/-1;max-width:58ch}
@media(min-width:820px){.flist__i p{grid-column:3/4;grid-row:1}}
.flist--light{border-top-color:var(--rule-light)}
.flist--light .flist__i{border-bottom-color:var(--rule-light)}
.flist--light h3{color:#fff}
.flist--light p{color:rgba(255,255,255,.66)}
.flist--light .mono{color:var(--aqua)}

/* 06 ──────────────────────────────────────────────────── Service cards ── */
.scards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:640px){.scards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.scards{grid-template-columns:repeat(4,1fr)}}
.scards--3{grid-template-columns:1fr}
@media(min-width:640px){.scards--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.scards--3{grid-template-columns:repeat(3,1fr)}}
.scard{
  background:#fff;padding:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  display:flex;flex-direction:column;gap:.7rem;position:relative;
  transition:background var(--t-base) var(--ease);
}
.scard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out);
}
.scard:hover{background:var(--cool)}
.scard:hover::before{transform:scaleX(1)}
.scard .mono{color:var(--teal)}
.scard h3{font-size:1.18rem}
.scard p{font-size:.94rem;color:var(--ink-soft);line-height:1.55}
.scard__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.scard__tags li{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);padding:.3rem .55rem;
}
.scard .tlink{margin-top:auto;padding-top:1rem;font-size:.72rem}

/* 07 ────────────────────────────────────────── Image / content split ──── */
.isplit{display:grid;align-items:stretch}
@media(min-width:900px){
  .isplit{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .isplit--flip .isplit__media{order:2}
}
.isplit__media{position:relative;min-height:clamp(260px,36vw,500px);overflow:hidden;background:var(--light)}
.isplit__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.isplit__body{
  padding:clamp(2rem,1.5rem + 3vw,4rem) max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))
          clamp(2rem,1.5rem + 3vw,4rem) clamp(1.5rem,1rem + 2.4vw,3.5rem);
  display:flex;flex-direction:column;justify-content:center;
}
@media(min-width:900px){
  .isplit--flip .isplit__body{
    padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
    padding-right:clamp(1.5rem,1rem + 2.4vw,3.5rem);
  }
}
.isplit__body > * + *{margin-top:1.1rem}
.isplit__body p{color:var(--ink-soft);max-width:56ch}
.isplit--navy{background:var(--navy);color:rgba(255,255,255,.72)}
.isplit--navy h2,.isplit--navy h3{color:#fff}
.isplit--navy p{color:rgba(255,255,255,.7)}

/* 08 ──────────────────────────────────────────────────────── Tag grids ── */
.taggrid{display:grid;gap:.1rem 2rem;border-top:1px solid var(--rule);padding-top:1.35rem}
@media(min-width:560px){.taggrid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.taggrid--3{grid-template-columns:repeat(3,1fr)}}
.taggrid li{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem 0;font-size:.98rem}
.taggrid li::before{content:"";width:6px;height:6px;flex:none;margin-top:.6rem;background:var(--aqua);transform:rotate(45deg)}
.taggrid--light{border-top-color:var(--rule-light)}
.taggrid--light li{color:rgba(255,255,255,.76)}
.taggrid--green li::before{background:var(--green)}

/* 09 ────────────────────────────────────────────────────────── Contact ── */
.contact{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem)}
@media(min-width:960px){.contact{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.cdetails{border-top:1px solid var(--rule)}
.cdetail{display:grid;gap:.35rem;padding:clamp(1.15rem,1rem + .8vw,1.6rem) 0;border-bottom:1px solid var(--rule)}
.cdetail .mono{color:var(--teal)}
.cdetail a,.cdetail address,.cdetail span{font-style:normal;font-size:1.05rem;color:var(--navy);line-height:1.55}
.cdetail a:hover{color:var(--teal)}
.cform{border:1px solid var(--rule);padding:clamp(1.5rem,1.2rem + 2vw,2.75rem);background:var(--cool)}
.cform h2{font-size:clamp(1.3rem,1.15rem + .8vw,1.8rem);margin-bottom:.6rem}
.cform > p{color:var(--ink-soft);margin-bottom:1.75rem;max-width:54ch}
.cform .field input,.cform .field select,.cform .field textarea{background:#fff}
.cform .filefield{background:#fff}

/* 10 ────────────────────────────────────────────── Client placeholders ── */
.cplaceholder{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:520px){.cplaceholder{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cplaceholder{grid-template-columns:repeat(4,1fr)}}
.cplaceholder div{
  background:#fff;aspect-ratio:16/7;display:grid;place-items:center;text-align:center;padding:.5rem;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.5;
}

/* 11 ────────────────────────────────────────────────────────── Notices ── */
.notice{
  display:flex;gap:.9rem;align-items:flex-start;
  border-left:2px solid var(--teal);padding:1.15rem 1.35rem;background:var(--cool);
  font-size:.95rem;color:var(--ink-soft);line-height:1.6;max-width:88ch;
}
.notice .triad{margin-top:.28rem;flex:none;color:var(--teal)}
.notice strong{color:var(--navy)}
.notice--light{background:rgba(255,255,255,.06);border-left-color:var(--aqua);color:rgba(255,255,255,.68)}
.notice--light strong{color:#fff}
.notice--light .triad{color:var(--aqua)}

/* 12 ────────────────────────────────────────────────────── ISO strip ──── */
/* Wording is quoted verbatim from the client's letterhead. */
.isostrip{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;padding:1.1rem 0;border-block:1px solid var(--rule)}
.isostrip__label{color:var(--ink-soft)}
.isostrip__items{display:flex;flex-wrap:wrap;gap:.45rem}
.isostrip__items span{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.4rem .7rem;color:var(--navy);
}
.isostrip--light{border-block-color:var(--rule-light)}
.isostrip--light .isostrip__label{color:rgba(255,255,255,.5)}
.isostrip--light .isostrip__items span{border-color:var(--rule-light);color:#fff}

/* 13 ──────────────────────────────────────────────────── Legal pages ──── */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.2rem,1.1rem + .7vw,1.6rem);margin-top:2.5rem;margin-bottom:.75rem}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-soft)}
.legal p + p{margin-top:1rem}
.legal ul{margin-top:.75rem;display:grid;gap:.4rem}
.legal li{display:flex;gap:.65rem}
.legal li::before{content:"";width:6px;height:6px;flex:none;margin-top:.62rem;background:var(--aqua);transform:rotate(45deg)}

/* 14 ────────────────────────────────────────────── Section variants ───── */
.section--cool{background:var(--cool)}
.section--bone{background:var(--bone)}
.section--navy{background:var(--navy);color:rgba(255,255,255,.72)}
.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy .smast{border-top-color:var(--rule-light)}
.section--navy .smast__idx{color:var(--aqua)}
.section--navy .smast__label{color:rgba(255,255,255,.55)}

/* 15 ═══════════════════════════════════ CLIENT REVISION — 30 Sep 2026 ═══
   Feedback: type reads too large on phones and not quite appealing; the logo
   and company name are too small against it; some copy looks dull; the site
   does not feel "finished".

   Everything here is an override layer. css/style.css stays byte-identical to
   the approved Concept 02 system, so the original values remain recoverable by
   deleting this one block.
   -------------------------------------------------------------------------
   15a Type ramp · 15b Ink & hairlines · 15c Logo · 15d Nav fit
   15e Page-hero title · 15f Technical strap · 15g Rhythm
   ======================================================================== */

/* 15a ──────────────────────────────────────────────────────── Type ramp ──
   Roughly a 17% reduction across the ramp, weighted towards the small end:
   at 375px the drop is 17–20%, at 1440px it is 15–17%. The proportions
   between steps are unchanged, so the design reads tighter, not different.

                     375px            1440px
     body            17 → 16          19.0 → 17.5
     lead            18.9 → 17        24.0 → 20.4
     h3              23.2 → 20        32.0 → 26.4
     h2              33.6 → 27.5      62.4 → 51.6
     h1              44 → 35.2        87.8 → 73.3
     mega (hero)     38.4 → 32       101.7 → 84.9                          */
:root{
  --fs-mono:clamp(.7rem,.67rem + .12vw,.75rem);
  --fs-body:clamp(1rem,.965rem + .15vw,1.0938rem);
  --fs-lead:clamp(1.0625rem,.99rem + .32vw,1.3125rem);
  --fs-h4:clamp(1.0625rem,1.01rem + .24vw,1.2188rem);
  --fs-h3:clamp(1.25rem,1.11rem + .6vw,1.6875rem);
  --fs-h2:clamp(1.72rem,1.19rem + 2.26vw,3.3rem);
  --fs-h1:clamp(2.2rem,1.34rem + 3.6vw,4.6rem);
  --fs-mega:clamp(2rem,.72rem + 5.1vw,5.4rem);
}

/* Smaller type carries tighter tracking less well, so the display faces give
   a little of it back. At 88px the old -.035em was right; at 73px it bites. */
h1,h2,.dsp{letter-spacing:-.028em}
h1,h2{line-height:1.06}
body{line-height:1.58}

/* 15b ────────────────────────────────────────────── Ink & hairlines ─────
   "Dull" was the secondary colour, not the primary. --ink-soft at #5A6E76
   measured 5.3:1 on white — legally fine, visually washed out, and it carries
   every lead paragraph, every mono label and most body copy on the site.
   #44585F measures 7.5:1 and still sits five steps below --ink (12.5:1), so
   the hierarchy is intact and the page simply looks inked rather than grey. */
:root{
  --ink-soft:#44585F;
  /* Hairlines are structural in this design — they were too faint to register
     as intent, which is a large part of "finishing nahi aa rahi". */
  --rule:rgba(11,37,56,.19);
  --rule-soft:rgba(11,37,56,.11);
  --rule-light:rgba(255,255,255,.24);
}
/* Mono labels sat at the same weight as body copy and disappeared. */
.mono{font-weight:600}
.smast__label,.statement__meta .mono{color:var(--ink-soft)}

/* 15c ────────────────────────────────────────────────────────── Logo ────
   The mark was 40px against a 44px headline — the smallest brand signal on
   the page. 46px reads as the identity it is. The artwork is 1352x256, so
   even at 46px it is oversampled about 6x and cannot soften. */
.brand__logo{height:46px}
.is-stuck .brand__logo{height:40px}
@media(max-width:479px){
  .brand__logo{height:42px}
  .is-stuck .brand__logo{height:36px}
}
/* Footer lockup moves with it */
.brand--stack .brand__logo{height:auto;width:min(258px,66vw)}

/* 15d ───────────────────────────────────────────────────── Nav fit ─────
   A 46px logo is 243px wide against 211px before. The desktop nav gives the
   32px back out of its own tracking and padding rather than pushing the
   breakpoint up, which would have dropped 1280px laptops to the hamburger. */
@media(min-width:1240px){
  .nav-link,.nav-trigger{font-size:.845rem;padding-inline:.56rem}
  .nav-link::after,.nav-trigger::after{left:.56rem;right:.56rem}
}

/* 15e ──────────────────────────────────────────── Internal page hero ───
   Held its own scale because ACCREDITATIONS and PHARMACEUTICAL are long
   single words. Re-tuned to the new ramp; still checked against both. */
.phero h1{font-size:clamp(1.68rem,1.02rem + 2.9vw,3.6rem)}

/* 15f ─────────────────────────────────────────────── Technical strap ───
   The ISO sentence is a full line of prose set in tracked-out mono. At .14em
   it wrapped to three lines of pale grey and read as boilerplate. Tighter
   tracking, teal, and a rule to mark it as a credential rather than a caption. */
.iso-claim,.statement__aside p.iso-claim{
  color:var(--teal);letter-spacing:.07em;line-height:1.55;font-weight:600;
  border-left:2px solid var(--aqua);padding-left:.85rem;max-width:46ch;
}
.isostrip__label{letter-spacing:.08em}

/* 15g ───────────────────────────────────────────────────────── Rhythm ──
   Sections were built around the larger type. Held on desktop, tightened on
   phones where the old 60px gap plus shrunken headings left the page feeling
   loosely stacked. */
:root{--section-y:clamp(3.15rem,2.1rem + 4.6vw,7rem)}

/* 16 ═══════════════════════════════ HERO FITS THE FOLD — 30 Sep 2026 ═══
   Client: the hero has dead white space on the left and runs past the bottom
   of the screen, so nothing of the next section shows.

   Measured at 1680x950 before this block:
     header 126 + grid 846 + paths band 140 = 1112px of hero in a 950px screen.
   The grid was 846 tall because the collage column set the height and the
   copy column then had to match it, which is exactly where the white space
   came from — the copy is only ~525px of content centred in an 846px column.

   The collage may not be cropped (it is the client's own artwork), so instead
   of cutting it, its width is derived from the height actually left on screen
   and the whole thing scales down in proportion. Everything above and below it
   is measured out of the same budget.
   ======================================================================== */
@media(min-width:1000px){
  .hero__media--collage{
    /* paths band + caption plate + padding + gap + a strip of the next
       section showing under the fold */
    --hero-reserve:21.5rem;
    --hero-free:calc(100svh - var(--top-h) - var(--bar-h) - var(--hero-reserve));
    padding-block:clamp(1rem,1.6vw,1.6rem);
    gap:clamp(.75rem,1.2vw,1.1rem);
  }
  /* Width, not height, is the constrained axis: aspect-ratio then sets the
     height, so the image keeps its proportions and nothing is cut. The floor
     stops a short window shrinking it past the point where the five panels
     read -- below that the hero is allowed to run a little past the fold
     instead, which is the better of the two compromises. */
  .hero__media--collage{
    --collage-w:min(100%,max(420px,calc(var(--hero-free) * 1.2496)));
    justify-items:end;
  }
  /* Held against the right edge, so the collage keeps exactly the margin it
     had before and the space it gives up becomes the gutter between the
     headline and the image rather than a gap at the edge of the page. */
  .hero__media--collage .hero__shot,
  .hero__media--collage .hero__plate{width:var(--collage-w)}
  /* The copy column no longer has 846px to fill, so its generous block
     padding would push the grid back out again. */
  .hero__copy{padding-block:clamp(1.75rem,.75rem + 1.8vw,2.75rem)}
}

/* Browsers without svh get vh, which is the same on desktop. */
@supports not (height:100svh){
  @media(min-width:1000px){
    .hero__media--collage{
      --hero-free:calc(100vh - var(--top-h) - var(--bar-h) - var(--hero-reserve));
    }
  }
}

/* On a short desktop window (1366x768 laptops) it is the copy column, not the
   collage, that sets the height — the headline, lead and buttons need about
   510px whatever the image does. Shrinking the picture further would not buy
   anything, so the block padding above and below is what gives way. */
@media(min-width:1000px) and (max-height:820px){
  .hero__copy{padding-block:.9rem}
  .path{padding-block:1.4rem}
}

/* 17 ═════════════════════════ DESKTOP SCALE & RHYTHM — 30 Sep 2026 ═════
   Second pass after seeing the full page on a 1920 monitor. Section 15 fixed
   the phone; this fixes the desktop end, where three things were wrong.

   1. The headings were still shouting. 53px section headings and two 86px
      display headings on one page is poster scale, not the voice of a testing
      laboratory. Confidence reads quieter than this.
   2. The photography bled to the edge of the monitor. At the 1440 width this
      was designed against, a bleed panel is ~700px and sits in proportion to
      the text beside it. At 1920 it becomes ~950px, because the image column
      absorbs every extra pixel while the text column stays pinned to the
      1440 grid. The composition comes apart as the screen widens.
   3. Sections were very tall, which is most of why the page felt unresolved.
   -------------------------------------------------------------------------
   17a Display scale · 17b Mask fix · 17c Framed bleed · 17d Vertical rhythm
   ======================================================================== */

/* 17a ───────────────────────────────────────────────── Display scale ────
   Phone sizes are left exactly where section 15 put them — the client was
   looking at a desktop. Only the top of each ramp comes down, so the curve
   flattens instead of the whole thing shrinking again.

                    375px       1440px        1920px
     body           16          17            17      (was 17.5)
     lead           17          19            19      (was 21)
     h3             20          24            24      (was 27)
     h2             27.5        41            44      (was 53)
     h1             35.2        55            60      (was 74)
     mega           32          61            68      (was 86)                */
:root{
  --fs-body:clamp(1rem,.975rem + .11vw,1.0625rem);
  --fs-lead:clamp(1.0625rem,1rem + .27vw,1.1875rem);
  --fs-h4:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --fs-h3:clamp(1.25rem,1.125rem + .53vw,1.5rem);
  --fs-h2:clamp(1.72rem,1.427rem + 1.245vw,2.75rem);
  --fs-h1:clamp(2.2rem,1.761rem + 1.872vw,3.75rem);
  --fs-mega:clamp(2rem,1.363rem + 2.717vw,4.25rem);
}

/* 17b ─────────────────────────────────────────── Mask reveal clipping ───
   The two display headings set line-height below 1 (.92 and .94) so the
   lines stack tightly. Inside .line, which is overflow:hidden for the mask
   reveal, that cuts the tops off capitals -- visible on "Have a scientific
   challenge?" and "Ingredients backed by science.". The descender fix on
   line 140 only ever guarded the bottom. Same trick, other end. */
.line{padding-top:.28em;margin-top:-.28em;padding-bottom:.22em;margin-bottom:-.22em}
/* .50em of headroom clears Manrope ExtraBold ink at the tightest
   line-height on the site (.92 on the ingredients headline). The
   negative margins cancel it, so line spacing is unchanged. */

/* 17c ───────────────────────────────────────────────── Framed bleed ─────
   Photography is framed above 1600px instead of running to the edge of the
   monitor. Nothing changes at or below the width this was designed against;
   past it the picture columns stop growing and the composition holds.

   The right-hand text padding has to be recalculated against the frame
   rather than the viewport, otherwise it over-pads and the text no longer
   lines up with the contained sections above and below. With this, every
   text column on the page shares one left and one right edge at any width. */
@media(min-width:1601px){
  .split,.svc__grid,.ing__body,.isplit{max-width:1600px;margin-inline:auto}
  .svc__panel,.ing__index,.isplit__body{
    padding-right:calc((1600px - var(--max)) / 2 + var(--gutter));
  }
  /* The flipped variant puts the text on the left, so the frame padding
     swaps with it. */
  .isplit--flip .isplit__body{
    padding-left:calc((1600px - var(--max)) / 2 + var(--gutter));
    padding-right:clamp(1.5rem,1rem + 2.4vw,3.5rem);
  }
}

/* 17d ─────────────────────────────────────────────── Vertical rhythm ────
   Section padding was built for the larger type. Held in proportion to it. */
:root{--section-y:clamp(3.15rem,2.2rem + 3.9vw,5.75rem)}
.statement{padding-block:clamp(3.5rem,2.2rem + 3.4vw,6rem)}

/* 18 ══════════════════════════════════ QA PASS — 30 Sep 2026 ═══════════
   Automated sweep of all 20 pages at 360 / 390 / 768 / 1024 / 1440 / 1920,
   checking horizontal overflow, clipped text, broken images, duplicate ids,
   heading order, empty links, tap-target size, minimum type size and colour
   contrast. Layout came back clean at every width. These are what it found.
   -------------------------------------------------------------------------
   18a Tap targets · 18b Minimum type size · 18c Heading order support
   ======================================================================== */

/* 18a ───────────────────────────────────────────────────── Tap targets ──
   WCAG 2.5.8 asks for 24x24 CSS px on any pointer target. Five inline links
   sat under it -- worst was the breadcrumb at 18px, which on a phone is a
   genuine miss-and-try-again. Heights are set on the link box only, so the
   text and the layout around it do not move; only the hit area grows.
     breadcrumb        18 -> 28
     CTA email         20 -> 28
     footer legal      23 -> 30
     contact email     26 -> 32                                             */
.crumbs a{display:inline-flex;align-items:center;min-height:28px}
.cta2__contact a{display:inline-flex;align-items:center;min-height:28px}
.footer__legal a{display:inline-flex;align-items:center;min-height:30px}
.cdetail a{display:inline-flex;align-items:center;min-height:32px}

/* 18b ─────────────────────────────────────────────── Minimum type size ──
   The mono face carries every technical marking in this design, and a
   handful of those markings had drifted to 10.2-10.6px. Uppercase mono with
   .1-.16em tracking is already hard work; under 11px it stops being legible
   and starts being texture. Nothing here goes below .7rem (11.2px). */
.topbar .mono,.rail a{font-size:.7rem}
.mlogo,.isostrip__items span{font-size:.72rem}
.qnet__mark .mono,.clients__note,.footer__placeholder,
.scard__tags li,.cplaceholder div{font-size:.72rem}

/* 18c ───────────────────────────────────────── Heading order support ────
   The R&D phase cards were h4 directly under an h2, which leaves a hole in
   the document outline for anyone navigating by headings. They are h3 now;
   this keeps them looking exactly as they did. */
.rphase h3{
  font-size:var(--fs-h4);font-weight:700;line-height:1.25;
  letter-spacing:-.014em;margin-bottom:.4rem;
}

/* Inline mail and phone links sit inside running text, so WCAG exempts them
   from the target-size rule -- their height is set by the line-height of the
   sentence around them. They are still the action on those pages, so they get
   a taller hit area the only way that costs nothing: padding on an inline
   box paints and receives pointer events outside the line box without
   changing where the line sits. 20px becomes about 29px, no layout shift. */
.prose__body p a[href^="mailto"],.prose__body p a[href^="tel"],
.legal p a[href^="mailto"],.legal p a[href^="tel"],
.isplit__body p a[href^="mailto"],.isplit__body p a[href^="tel"]{padding-block:.28rem}

/* The utility bar's phone and email links were 18px tall inside a 38px bar.
   The bar has the room; the links were just not claiming it. */
.topbar__links a{display:inline-flex;align-items:center;min-height:30px}

/* 19 ═══════════════════════════ TWO OFFICES & CREDIT — 4 Nov 2026 ══════
   The client added a second office in Bangkok. Both now appear in the
   footer and on the Contact page, each labelled by country so neither can
   be mistaken for the other, and both are in the Organization schema.
   ======================================================================== */

/* 19a ───────────────────────────────────────────── Footer office tag ───
   The footer contact rows are an icon plus one line of content. A row now
   carries a country label above its address, so the content side becomes a
   block and the icon keeps its alignment against the first line. */
.footer__contact li > span{display:block;min-width:0}
.office-tag{
  display:block;color:var(--aqua);font-weight:600;
  margin-bottom:.3rem;font-size:.7rem;letter-spacing:.14em;
}
.footer__contact address{font-style:normal}
.footer__contact .office-tag + address + a{display:inline-block;margin-top:.35rem}

/* 19b ─────────────────────────────────────────────────── Build credit ──
   Sits with the copyright rather than as a third column, so the bottom bar
   keeps its two-part balance and the credit reads as part of the same
   sentence. Quieter than the copyright it follows. */
.footer__credit{
  display:inline-block;margin-left:.6rem;color:rgba(255,255,255,.4);
}
.footer__credit a{
  color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.28);
  /* Inline in a sentence, so padding grows the hit area to ~27px without
     moving the line — same treatment as the other inline links. */
  padding-block:.3rem;
}
.footer__credit a:hover{color:var(--aqua);text-decoration-color:var(--aqua)}
@media(max-width:539px){.footer__credit{display:block;margin-left:0;margin-top:.4rem}}

/* 19c ──────────────────────────────────── Contact page office blocks ───
   Each office block is address then telephone, so a visitor reads one
   complete office at a time instead of matching a list of addresses to a
   separate list of numbers. */
.cdetail address + a{margin-top:.45rem}