/* ============================================================================
   STERiJECT interior-page components.
   Page hero, numbered pillar lists, audience columns, the navy technical band,
   pull quotes and fact pairs. Shared chrome lives in base.css.
   ========================================================================== */

/* Interior pages sit below a header that is solid from the top, so the first
   module clears its full 88px height. */
.page-top{padding-top:88px}

/* --- Page hero ----------------------------------------------------------- */
.phero{position:relative;background:var(--white)}
.phero-txt{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;padding:var(--space-20) var(--pagepad)}
/* The artboard caps this block at 1080px INCLUDING the 80px gutters, i.e. a
   920px measure at 1440. Reproducing that literally breaks above 1440, where
   the gutter grows and the measure would collapse to 440px at 1920 -- the
   artboard is authored at a single width (body{min-width:1440px}). Capping the
   children instead gives an identical result at 1440 and a correct one beyond. */
.phero-txt>*{max-width:920px}
.phero-h1{margin:0;font-size:clamp(2.5rem,1.5rem + 4.6vw,var(--size-6xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);color:var(--ink);text-wrap:balance}
.phero-sub{margin:0;font-size:clamp(1.125rem,1rem + .8vw,var(--size-xl));line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--neutral-700);max-width:52ch}

/* --- Navy technical band ------------------------------------------------- */
.sec--tech{background:#00345F;color:var(--white)}
.sec--tech .h2{color:var(--white)}
.sec--tech .p{color:var(--white)}
.sec--tech .eyebrow{color:#4FA8E8;color:oklch(from var(--tsk-blue) .78 calc(c*.9) h)}
.sec--tech .bul li{border-top-color:rgba(255,255,255,.22)}
.sec--tech .bul b{color:var(--white)}
.sec--tech .rule-top{margin-top:var(--space-10);padding-top:var(--space-8);border-top:var(--stroke-hairline) solid rgba(255,255,255,.22);max-width:88ch}

/* --- Numbered pillar list ------------------------------------------------ */
.bul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-12);margin:0;padding:0;list-style:none}
.bul li{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) 0;border-top:var(--stroke-hairline) solid var(--line-soft)}
.bul--one{grid-template-columns:minmax(0,1fr)}
.bul--one li{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-8);align-items:start}
.bul--edge{border-bottom:var(--stroke-hairline) solid var(--line-soft)}
.bul b{font-size:var(--size-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink)}
.num{display:flex;align-items:baseline;gap:var(--space-4)}
.num i{font-style:normal;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);color:var(--neutral-400);font-variant-numeric:tabular-nums;flex:none;width:22px}

/* --- Audience columns ---------------------------------------------------- */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-10)}
.aud-c{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);background:var(--white);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg)}
.aud-c .h3{color:var(--ink);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight)}
.aud-c .eyebrow{color:var(--text-brand)}

/* --- Pull quote ---------------------------------------------------------- */
.pull{margin:0;font-size:var(--size-xl);line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--ink);text-wrap:pretty}
.pull b{font-weight:var(--weight-medium);color:var(--text-brand)}

/* --- Fact pair ----------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);border-top:var(--stroke-frame) solid var(--line)}
.fact{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-10) 0 0}
.fact+.fact{border-left:var(--stroke-hairline) solid var(--line-soft);padding-left:var(--space-16)}
.fact b{font-size:clamp(2rem,1.4rem + 2.2vw,44px);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);line-height:1;color:#00345F;font-variant-numeric:tabular-nums}
.fact span{font-size:var(--size-sm);color:var(--ink-2)}

/* --- Two-column prose block ---------------------------------------------- */
/* The artboard sets these grids inline; as classes they can collapse on narrow
   viewports, which an inline style cannot. */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20);align-items:start}
.duo--mb{margin-bottom:var(--space-12)}

/* Solid white button for use on the navy CTA band. */
.sj .btn--onvideo{border-color:var(--white);background:var(--white);color:var(--text-brand)}
.sj .btn--onvideo:hover{background:transparent;border-color:var(--white);color:var(--white)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .aud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bul--one li{grid-template-columns:220px minmax(0,1fr);gap:var(--space-6)}
  .duo{gap:var(--space-12)}
}
@media (max-width:768px){
  .page-top{padding-top:64px}
  .phero-txt{padding:var(--section-y-tight) var(--pagepad)}
  .aud{grid-template-columns:minmax(0,1fr)}
  .bul{grid-template-columns:minmax(0,1fr)}
  .bul--one li{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .fact+.fact{border-left:0;padding-left:0;border-top:var(--stroke-hairline) solid var(--line-soft);padding-top:var(--space-8)}
}

/* ============================================================================
   Specialty / audience page components (V2 practitioners, drugdev, research).
   ========================================================================== */

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--pagepad);border-bottom:var(--stroke-hairline) solid var(--line-soft);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.crumb b{font-weight:var(--weight-medium);color:var(--ink)}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--text-brand)}

/* --- Split hero: copy left, image right ---------------------------------- */
.phero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;align-items:stretch}
.phero-grid>.fig{position:relative;min-height:600px}
.phero-grid>.fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phero-txt--split{justify-content:center;padding:var(--space-20) var(--space-16) var(--space-20) var(--pagepad);border-bottom:var(--stroke-hairline) solid var(--line-soft)}
.phero-txt--split>*{max-width:none}
.phero-txt--split .phero-sub{max-width:46ch}

/* --- Credential chips ---------------------------------------------------- */
.creds{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1);max-width:48ch}
.cred{font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand);background:var(--tsk-blue-050);border:var(--stroke-hairline) solid var(--tsk-blue-100);border-radius:var(--radius-xs);padding:6px var(--space-3)}

/* --- Large light section title ------------------------------------------- */
.sectitle{display:block;margin:0 0 var(--space-16);font-size:clamp(2rem,1.4rem + 2.2vw,48px);font-weight:var(--weight-light);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);color:var(--text-brand);text-wrap:balance}

/* --- Callout ------------------------------------------------------------- */
.callout{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) var(--space-8);background:var(--tsk-blue-050);border-radius:var(--radius-lg);border:var(--stroke-hairline) solid var(--tsk-blue-100)}
.callout .lede{font-weight:var(--weight-medium);color:var(--ink)}
.callout--tech{background:rgba(255,255,255,.06);border-color:var(--border-on-technical)}
.callout--tech .lede{color:var(--sterject-light)}
.callout--tech .p{color:var(--white)}

/* --- Q&A rows ------------------------------------------------------------ */
.faq{display:flex;flex-direction:column;gap:0}
/* Each row is a <details>. On desktop it stays the two-column question/answer
   grid with the answer always shown; below 768px it becomes a real accordion,
   because six open answers is a punishing scroll on a phone.
   The answers are in the HTML either way, only visually collapsed, so search
   engines and AI crawlers still read them in full. */
.faq-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-16);padding:var(--space-8) 0;border-top:var(--stroke-hairline) solid var(--line);align-items:start}
.sj .faq-row>summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.sj .faq-row>summary::-webkit-details-marker{display:none}
.faq-ico{display:none;flex:none;color:var(--text-brand);transition:transform .22s ease}
.faq-row:last-child{border-bottom:var(--stroke-hairline) solid var(--line)}
.faq-row .rq{margin-top:var(--space-4)}
.faq-row .rq b{font-weight:var(--weight-medium);color:var(--ink)}
/* Optional "read more" line under an answer. Underlined rather than left as a
   bare colour change, because it sits inside a block of body copy where colour
   alone is a weak affordance. */
.faq-more{margin-top:var(--space-3)}
.sj .faq-more a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* --- Brief cards on the navy band ---------------------------------------- */
.brief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-10)}
.brief-c{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);background:rgba(255,255,255,.05);border:var(--stroke-hairline) solid var(--border-on-technical);border-radius:var(--radius-lg)}
.brief-c b{font-size:var(--size-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--white)}
.brief-c ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.brief-c li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:var(--space-3);font-size:var(--size-sm);line-height:var(--leading-normal);color:var(--white)}
.brief-c li::before{content:"";width:5px;height:5px;border-radius:50%;background:#4FA8E8;background:oklch(from var(--tsk-blue) .78 calc(c*.9) h);margin-top:8px}

/* --- Dotted starting-point list ------------------------------------------ */
.start{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-5);max-width:92ch}
.start li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:var(--space-4);align-items:start}
.start li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tsk-blue);margin-top:9px}

/* --- Reference list (interior variant: simple numbered column) ----------- */
.reflist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-4);counter-reset:r;max-width:110ch}
.reflist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-4);font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--neutral-600);text-wrap:pretty}
.reflist li::before{counter-increment:r;content:counter(r) ".";font-variant-numeric:tabular-nums;color:var(--ink-2)}
.reflist a{word-break:break-word}

/* --- Platform table ------------------------------------------------------ */
.pt-wrap{border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);margin-top:var(--space-10)}
.pt{width:100%;border-collapse:collapse}
.pt th{padding:var(--space-4) var(--space-6);background:var(--tsk-blue-050);color:#000;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);text-align:left}
.pt th:first-child{width:220px}
.pt tbody th{background:var(--tsk-blue-050);color:#000;font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);border-top:var(--stroke-hairline) solid var(--line-soft);vertical-align:top;text-transform:none}
.pt td{padding:var(--space-5) var(--space-6);border-top:var(--stroke-hairline) solid var(--line-soft);font-size:var(--size-sm);color:var(--neutral-700);line-height:var(--leading-normal);vertical-align:top}

/* --- Misc ---------------------------------------------------------------- */
.dfn{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand)}
.sec--tech .fn{color:#4FA8E8;color:oklch(from var(--tsk-blue) .78 calc(c*.9) h)}
.bul--wide li{grid-template-columns:300px minmax(0,1fr)}
/* Stacked CTA (specialty pages) rather than the two-column CTA used on home. */
.cta-in--stack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);min-height:0}
.cta-in--stack h2{max-width:24ch}
.duo--asym{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .faq-row{gap:var(--space-8)}
  .bul--wide li{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:900px){
  .phero-grid{grid-template-columns:minmax(0,1fr)}
  .phero-grid>.fig{min-height:320px;order:-1}
  .phero-txt--split{padding:var(--section-y-tight) var(--pagepad)}
}
@media (min-width:769px){
  /* Rows stay open on desktop (see inc/faq.php); the summary is inert so a
     stray click cannot collapse a row that has no affordance to reopen it. */
  .sj .faq-row>summary{pointer-events:none}
}
@media (max-width:768px){
  .faq-row{grid-template-columns:minmax(0,1fr);gap:0}
  .sj .faq-row>summary{cursor:pointer;padding:var(--space-1) 0}
  .faq-ico{display:flex}
  .faq-row[open] .faq-ico{transform:rotate(180deg)}
  .faq-a{padding-top:var(--space-3)}
  .brief{grid-template-columns:minmax(0,1fr)}
  .bul--wide li{grid-template-columns:minmax(0,1fr)}
  .duo--asym{grid-template-columns:minmax(0,1fr)}
  .pt-wrap{overflow-x:auto}
  .pt{min-width:560px}
}

/* Translational-planning block: asymmetric split with a ruled pull statement. */
.duo--4-7{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.techquote{font-size:clamp(1.25rem,1rem + 1vw,26px);line-height:var(--leading-snug);font-weight:var(--weight-light);max-width:44ch;border-left:var(--stroke-hairline) solid rgba(255,255,255,.22);padding-left:var(--space-12)}
@media (max-width:768px){
  .duo--4-7{grid-template-columns:minmax(0,1fr)}
  .techquote{border-left:0;padding-left:0;padding-top:var(--space-6);border-top:var(--stroke-hairline) solid rgba(255,255,255,.22)}
}

/* Light technical band: same structure as .sec--tech, inverted palette. */
.sec--light{background:#F4F7FA;color:var(--ink)}
.sec--light .h2,.sec--light h2{color:#00345F}
.sec--light .p{color:var(--neutral-700)}
.sec--light .eyebrow{color:var(--text-brand)}
.sec--light .fn{color:var(--text-brand)}
.sec--light .sectitle{color:var(--text-brand)}
.reflist--plain{counter-reset:none}
.reflist--plain li{grid-template-columns:minmax(0,1fr)}
.reflist--plain li::before{content:none}

/* ============================================================================
   Attribute matrix. Moved here from product.css once the Innovations overview
   started using it too -- shared by product-comparison and innovations.
   ========================================================================== */
/* --- Attribute matrix ---------------------------------------------------- */
.mx-wrap{border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white)}
.mx{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.mx col.c-lbl{width:288px}
.mx th,.mx td{padding:var(--space-5) var(--space-6);border-bottom:var(--stroke-hairline) solid var(--line-soft);text-align:center;vertical-align:middle}
.mx tbody tr:last-child th,.mx tbody tr:last-child td{border-bottom:0}
.mx thead th{padding-top:var(--space-6);padding-bottom:var(--space-6);border-bottom:var(--stroke-frame) solid var(--line)}
.mx .rl{text-align:left;font-size:var(--size-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--ink)}
.mx thead .rl{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2);font-weight:var(--weight-medium)}
.mx-name{display:flex;flex-direction:column;gap:var(--space-1);align-items:center}
.mx-name b{font-size:var(--size-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--ink)}
.mx-name span{font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.mx-name span.mx-badge{display:inline-flex;font-weight:var(--weight-medium);color:var(--white);background:#0172BD;border-radius:var(--radius-xs);padding:4px var(--space-2);margin-bottom:var(--space-2)}
.mx .hc{background:var(--tsk-blue-050);border-left:var(--stroke-hairline) solid var(--tsk-blue-100);border-right:var(--stroke-hairline) solid var(--tsk-blue-100)}
.mx td.val{font-size:var(--size-sm);color:var(--neutral-700);font-variant-numeric:tabular-nums;line-height:var(--leading-normal)}
.mx td.val--strong{font-weight:var(--weight-medium);color:var(--ink)}
.ck{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--tsk-blue-050);color:var(--text-brand)}
.mx .hc .ck{background:var(--tsk-blue-100);color:var(--text-brand)}
.mx .no{color:var(--neutral-300)}

@media (max-width:768px){
  .mx-wrap{overflow-x:auto}
  .mx{min-width:720px}
}

/* --- Innovation cards (overview) ----------------------------------------- */
.inno{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.inno-c{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);background:var(--white);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg)}
.inno-c .h3{color:var(--ink);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight)}
.inno-c .eyebrow{color:var(--text-brand)}
.inno-c .p b{font-weight:var(--weight-medium);color:var(--ink)}
.inno-rw{margin-top:auto;padding-top:var(--space-5);border-top:var(--stroke-hairline) solid var(--line-soft)}
.inno-rw p{margin:0;font-size:var(--size-sm);line-height:var(--leading-normal);color:var(--neutral-700)}
.inno-rw b{font-weight:var(--weight-medium);color:var(--text-brand);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;display:block;margin-bottom:var(--space-2)}
@media (max-width:1024px){ .inno{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){ .inno{grid-template-columns:minmax(0,1fr)} }

/* ============================================================================
   Shared layout primitives. Moved out of product.css once the innovation
   pages needed them too.
   ========================================================================== */
/* --- Split layouts ------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-20);align-items:start}
.split--figl{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--one{grid-template-columns:minmax(0,1fr)}
.stick{position:sticky;top:var(--space-10)}

.figc{margin:var(--space-3) 0 0;font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--ink-2);text-wrap:pretty}
.figcol{display:flex;flex-direction:column}
.shot{display:flex;align-items:center;justify-content:center;background:var(--fill);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;padding:var(--space-8)}
.shot img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:900px){
  .split,.split--figl{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .stick{position:static}
}

/* Let a numbered list share a row with a figure and finish level with it. The
   figure sets the row height and the list's rows divide that height evenly, so
   the rules stay regular instead of the list stopping short and leaving a gap
   beneath it. Opt in with `split--even`; only applies above the width where the
   two columns stack. */
@media (min-width:901px){
  .split--even{align-items:stretch}
  .split--even > .stick{align-self:start}
  .split--even > .bul--one{grid-auto-rows:minmax(min-content,1fr)}
}

/* --- Innovation split hero ----------------------------------------------- */
/* Distinct from the specialty split hero: the figure is a tinted panel holding
   a contained render plus a caption, not an edge-to-edge cover photograph. */
.phero--inno .phero-grid>.fig{position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-10) var(--space-16);background:var(--fill)}
.phero--inno .phero-grid>.fig img{position:static;inset:auto;width:100%;max-width:520px;height:auto;object-fit:contain;display:block}
.phero--inno .phero-grid>.fig .figc{text-align:center;margin:0}
.phero--inno .phero-txt>*{max-width:none}
@media (max-width:900px){
  .phero--inno .phero-grid>.fig{min-height:0;padding:var(--space-8) var(--pagepad);order:-1}
}
/* Wider label column matches the innovation wireframes. */
.bul--wide300 li{grid-template-columns:300px minmax(0,1fr)}
@media (max-width:1024px){ .bul--wide300 li{grid-template-columns:220px minmax(0,1fr)} }
@media (max-width:768px){ .bul--wide300 li{grid-template-columns:minmax(0,1fr)} }
.sec--tech .bul--wide300 li{border-top-color:rgba(255,255,255,.22)}
.sec--tech .bul--wide300 b{color:var(--white)}
/* Innovation card used as a link (Hub Design's three hub paths). */
.sj a.inno-c{text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sj a.inno-c:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--tsk-blue-100);color:inherit}

/* --- Global footprint band (About) --------------------------------------- */
/* The map sits behind the content rather than beside it, and is an SVG rather
   than a bitmap. TSK's only world map is a 253px PNG — there is no larger source,
   not even in the .psd — so at this size it was visibly blurred. tsk-map.svg is
   built from that PNG's own geography: the landmass was sampled on a grid and
   redrawn as vector dots, so it is sharp at any size and half the weight (9KB
   gzipped against 18KB). Its eight markers are the real ones, traced from the
   original, and correspond to the "8 regional entities" figure below.
   Regenerate rather than hand-edit if the source map is ever updated.
   The URL arrives as --gfoot-map from the template: a stylesheet cannot append
   the file's timestamp, so referencing it directly here meant browsers cached the
   old map indefinitely after any change. */
.sj .gfoot{
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-height:clamp(480px,44vw,640px);
}
/* The map used to be drawn at 92% of the band and centred, which made it taller
   than the band itself: the top and bottom of the world were cropped, and the
   markers landed square on the headline. It sits to the right at a size that
   fits the band whole, so the copy has open ground of its own. */
.sj .gfoot::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background:var(--gfoot-map) right -3% top 8%/min(820px,54%) no-repeat;
	pointer-events:none;
}
/* and fades out under the text on the left, and just far enough up from the foot
   to keep the figures clean. The map is held high in the band so Australia sits
   clear of that bottom fade rather than washing out inside it. */
.sj .gfoot::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:
		linear-gradient(90deg,#00345F 0%,rgba(0,52,95,.94) 26%,rgba(0,52,95,0) 62%),
		linear-gradient(0deg,#00345F 0%,rgba(0,52,95,.88) 20%,rgba(0,52,95,0) 32%);
}
.sj .gfoot > *{position:relative;z-index:1}
/* Holds the figures to the foot of the taller band instead of leaving a gap
   below them. */
.sj .gfoot-txt{max-width:46ch;margin-bottom:auto}
.sj .gfoot-txt .p{margin-top:var(--space-4)}

.sj .gfacts{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--space-8);
	margin:var(--space-12) 0 0;
	padding-top:var(--space-8);
	border-top:var(--stroke-hairline) solid rgba(255,255,255,.24);
}
.sj .gfact{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.sj .gfact dt{
	font-size:clamp(2rem,1.4rem + 1.6vw,44px);
	font-weight:var(--weight-semibold);
	letter-spacing:var(--tracking-display);
	line-height:1;
	color:var(--white);
	font-variant-numeric:tabular-nums;
}
.sj .gfact dd{
	margin:0;
	font-size:var(--size-3xs);
	letter-spacing:var(--tracking-label);
	text-transform:uppercase;
	color:rgba(255,255,255,.72);
	line-height:var(--leading-normal);
}
@media (max-width:900px){
	.sj .gfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
	/* No room for the map beside the copy at this width, so it goes back behind
	   it, centred and held well down in contrast. */
	.sj .gfoot{min-height:0}
	.sj .gfoot-txt{max-width:none}
	.sj .gfoot::before{background-position:center;background-size:min(720px,118%)}
	.sj .gfoot::after{background:linear-gradient(180deg,rgba(0,52,95,.9) 0%,rgba(0,52,95,.6) 38%,rgba(0,52,95,.94) 100%)}
}
@media (max-width:520px){
	.sj .gfacts{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
	.sj .gfoot::before{background-size:150%}
}

/* A plain vertical text block: heading, paragraphs, an optional callout. Used
   where a section is prose rather than a component — the V6 audience pages are
   mostly this shape. Exists because the alternative was repeating the same
   inline flex declaration on every one of them. */
.sj .stack{display:flex;flex-direction:column;gap:var(--space-5)}
.sj .stack > *{margin:0}

/* .shot mats its contents: a tinted panel with 32px of padding, which suits a
   render that needs air around it. For a photograph — or a render that already
   carries its own background — that padding produces two nested rectangles, the
   picture's own edge sitting inside the panel's. This variant keeps the frame,
   the hairline border and the corner radius, and lets the picture fill it edge to
   edge so there is only ever one rectangle. */
.sj .shot--photo{padding:0;overflow:hidden;position:relative;display:block}
/* Taken out of flow on purpose: the panel's height comes from aspect-ratio, and
   a percentage height on a flow child cannot resolve against that, so the
   picture would keep its own proportions and sit letterboxed inside the frame —
   the two nested rectangles this variant exists to avoid. Positioned, it has a
   real box to cover. */
.sj .shot--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Some renders are drawn hard to the top and right of their own frame. Matting
   those inside the panel's padding wastes the composition, so this modifier
   drops the padding and anchors the artwork to the top-right corner; the panel
   clips whatever runs past. Left and bottom are the render's own empty margin. */
.sj .shot--bleed{padding:0;position:relative;display:block}
/* The panel's height comes from aspect-ratio, which a percentage height on a
   flow child cannot resolve against, so the image is taken out of flow to give
   object-fit a box that really is the full panel. Anchoring it top-right keeps
   the artwork against those two edges; contain rather than cover holds the whole
   render, which reads about a tenth smaller and crops nothing. */
.sj .shot--bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 0}

/* Centre a split's columns against each other. The default is top-aligned, which
   is right when both sides are long. Where a short block of prose sits beside a
   picture it leaves the text stranded at the top of a much taller column. */
@media (min-width:901px){
	.sj .split--mid{align-items:center}
}

/* Legal documents: a clause number in a fixed gutter with the text beside it, so
   the numbering reads as structure rather than as part of the sentence. Narrow
   measure, because these are long paragraphs of dense prose. */
.legal{display:flex;flex-direction:column;gap:var(--space-12);max-width:78ch}
.legal-sec{display:flex;flex-direction:column;gap:var(--space-4)}
.legal-h{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:var(--space-3);align-items:baseline;margin:0}
.legal-cl{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.legal-cl .p{margin:0}
.legal-n{font-variant-numeric:tabular-nums;color:var(--text-brand);font-weight:var(--weight-medium)}
/* A document with headings but no clause numbering drops the number gutter. */
.legal--plain .legal-h{grid-template-columns:minmax(0,1fr)}
.legal--plain .legal-sec{gap:var(--space-5)}
/* iubenda ships its own stylesheet for the embedded policy. Keep the container
   to the same measure as the hand-built legal pages and let their CSS handle
   the inside, rather than fighting it selector by selector. */
.legal--embed{display:block}
.legal--embed .iub_content,.legal--embed .iubenda-embed{max-width:100%}
/* iubenda's embed opens with a 16px green rule. Recoloured rather than removed:
   it is their layout, it just should not be the one green thing on the site.
   Hung off their own #iub-legalDoc id, so it degrades to a no-op if they
   restructure the embed. */
.legal--embed #iub-legalDoc{border-top-color:var(--tsk-blue)}
.legal--plain .legal-sec .p{margin:0}
.legal-list{margin:0;padding:0 0 0 1.15em;display:flex;flex-direction:column;gap:var(--space-3)}
.legal-list li{list-style:disc}
.legal-list li::marker{color:var(--text-brand)}
.legal-list .p{margin:0}
.legal-h .legal-n{font-weight:var(--weight-semibold)}
@media (max-width:600px){
	.legal-h,.legal-cl{grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-2)}
}