/* ==========================================================================
   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)}