/* ==========================================================================
   DARIDAM INTEGRATED FACILITY SERVICES — SITE STYLESHEET
   Framework-free. No external request. No build step.
   Every page links this one file. Change it here, it changes everywhere.

   TO RETHEME THE WHOLE SITE: change the :root block below and nothing else.
   Eight alternative canvases are proven at _design_directions/background-schemes.html
   ========================================================================== */

:root{
  /* --- CANVAS. 2026-08-29 successor pass: lighter body surfaces to reduce
         the dense beige cast and improve visual alignment across sections. --- */
  --canvas:#FFFFFF;
  --canvas-2:#F6F4F8;

  /* --- BRAND. Fixed. Never introduce #1B3A5C — it is an internal document colour. --- */
  --purple:#300070;
  --purple-2:#4A11A8;
  --amber:#F8A838;          /* fills, rules, accents — NEVER body text on a light canvas */
  --amber-dk:#8F5600;       /* amber as text — this one passes contrast */

  /* --- TEXT AND LINES --- */
  --ink:#1A1410;
  --body:#49414B;
  --mute:#6D6472;
  --line:#E4DFE8;

  /* --- SURFACES. Panels stay white on every canvas. The certification mark
         must sit on white, untinted and unoverlaid. Do not change these. --- */
  --surface:#FFFFFF;
  --surface-tint:#FAF8FD;
  --surface-line:#E5E1EC;

  /* --- TYPE --- */
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  /* --- SPACING SCALE. All spacing is a multiple of 4. --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --wrap:1160px;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--canvas);color:var(--body);
  font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(32px,4.6vw,54px)}
h2{font-size:clamp(25px,3vw,36px)}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--purple)}
img{max-width:100%;height:auto;display:block}

/* Focus is always visible. Do not remove. */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;border-radius:4px;
}

/* Anchored sections clear the header. Paired with the header script — see below. */
[id]{scroll-margin-top:96px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}

/* ===== Brief 16 Section A §2.A — four responsive tiers, explicit.
   Mobile   (<640px):        images render 100vw — the base .wrap rule
                              above already does this; no override needed.
   Tablet   (640px-1024px):  images render 50vw-100vw of the flowing
                              container — already true of the existing
                              grid/card layout at these widths; asserted
                              here explicitly rather than left implicit.
   Desktop  (1025px-1440px): container width capped at 1200px, matching
                              the spec's own worked example ("e.g. 1200px").
   Ultrawide (>1440px):      same 1200px cap as Desktop — "Desktop max
                              constraint", content does not grow further. */
@media(min-width:640px) and (max-width:1024px){
  .wrap{max-width:var(--wrap)} /* Tablet tier, stated explicitly */
}
@media(min-width:1025px){
  .wrap{max-width:1200px} /* Desktop tier: 1200px per spec's example */
}
@media(min-width:1441px){
  .wrap{max-width:1200px} /* Ultrawide tier: same Desktop constraint, no further growth */
}
section{padding:clamp(48px,6vw,86px) 0}
.band{background:var(--canvas-2)}
.eyebrow{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dk);margin:0 0 var(--s3)}
.rule{height:4px;width:56px;background:var(--amber);border-radius:2px;margin:var(--s5) 0}
.lede{font-size:19px;max-width:62ch}
.small{font-size:14.5px;color:var(--mute)}

.skip{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:var(--s4);top:var(--s4)}

/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1.5px solid transparent;border-radius:8px;padding:13px 22px;
  font:800 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;min-height:48px}
.btn-p{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-p:hover{background:var(--purple-2)}
.btn-o{color:var(--ink);border-color:var(--line);background:transparent}
.btn-o:hover{border-color:var(--purple);color:var(--purple)}

/* --- HEADER --- */
.dbanner{background:var(--ink);color:#fff;font-size:13px;padding:9px 0}
.dbanner a{color:var(--amber);font-weight:700;text-decoration:none}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:transform .28s ease}
header.hidden{transform:translateY(-100%)}
.hrow{display:flex;align-items:center;gap:var(--s5);padding:var(--s3) 0}
/* Brand lockup. The master logo is a 1080x1080 square containing the
   building icon plus the DARIDAM wordmark and tagline stacked underneath.
   The header uses a real cropped derivative, daridam-icon-mark.png (icon
   graphic only, no text), with the name set separately in HTML text
   alongside — a CSS object-position/transform crop was tried previously
   but landed on the wordmark instead of the icon, cutting "DARIDAM" off
   mid-word (found 2026-08-25). The full square master is unchanged and
   still used in the footer, the favicon, and schema.org's logo field.
   The DARIDAM logo master file used to derive this icon crop remains
   untouched — only a separate cropped file was created alongside it.
   Sized at 72px (was 52px): at 52px the swoosh/curve detail in the icon
   compressed into an indistinct blur that two independent viewers misread
   as stray cut-off lettering (IMS_root live-browser audit, 2026-08-25) —
   not a text-rendering bug, a legibility-at-size issue. Source assets
   regenerated at matching resolution (144px / 288px @2x) for crispness. */
.brand{display:flex;align-items:center;gap:var(--s3);flex:none;text-decoration:none}
.brand-icon{width:72px;height:72px;flex:none;overflow:hidden;border-radius:6px}
.brand-icon img{width:72px;height:72px;object-fit:contain}
.brand-name{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-name .n{font:800 20px/1 var(--sans);letter-spacing:.02em;color:var(--purple)}
.brand-name .s{font:700 10.5px/1 var(--sans);letter-spacing:.13em;color:var(--purple);text-transform:uppercase}
.brand-name .t{font:600 10.5px/1 var(--sans);color:var(--amber-dk);letter-spacing:.01em}
@media(max-width:520px){ .brand-name .t{display:none} }
nav.primary{display:flex;gap:var(--s1);flex-wrap:wrap}
nav.primary a{padding:9px 12px;border-radius:7px;font:700 14.5px/1 var(--sans);
  color:var(--ink);text-decoration:none}
nav.primary a:hover{background:var(--canvas-2);color:var(--purple)}
nav.primary a[aria-current="page"]{color:var(--purple);box-shadow:inset 0 -3px 0 var(--amber)}
.hactions{margin-left:auto;display:flex;gap:var(--s3);align-items:center}

/* --- HERO --- */
/* Hero height per Brief 16 Section A §2.B: discrete per-breakpoint ranges,
   not one continuous fluid formula spanning both tiers. min-height (not a
   hard height/max-height) keeps this a real floor — if a hero's own text
   content ever needs more room than the range's top end, the container
   grows to fit rather than clipping copy or buttons; every current hero's
   content already fits comfortably within these ranges. */
.hero{position:relative;min-height:clamp(360px,45vw,420px);display:flex;align-items:center;
  overflow:hidden;background:#241a33}
@media(min-width:768px){
  .hero{min-height:clamp(500px,32vw,600px)}
}
.hero-img{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#2c2140,#2c2140 16px,#33264a 16px,#33264a 32px);
  display:flex;align-items:center;justify-content:center}
.hero-img span{font:800 12.5px/1.4 var(--sans);letter-spacing:.07em;color:#9a8cb8;text-align:center;
  border:1px dashed #6a5a8c;border-radius:5px;padding:9px 14px;background:rgba(20,12,30,.55)}
.hero-shade{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,8,52,.94) 0%,rgba(24,8,52,.80) 42%,rgba(24,8,52,.28) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:var(--s7);padding-bottom:var(--s7)}
.hero h1{color:#fff;max-width:19ch}
.hero p{color:#ddd4ee;font-size:clamp(17px,1.6vw,20px);max-width:50ch;margin-top:var(--s4)}
.hero.hero-home h1{max-width:20ch}
.hero.hero-home p{max-width:47ch}
.hero.hero-public h1{max-width:18ch}
.hero.hero-public p{max-width:48ch}
.hero .teaser{font:800 14px/1.5 var(--sans);color:var(--amber);margin-top:var(--s5)}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-o:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.hero .btn-p{background:var(--amber);color:#241000;border-color:var(--amber)}
.hero .btn-p:hover{background:#ffbe63}

/* --- TRUST STRIP: names as text only. Never place marks here. --- */
.trust{background:var(--canvas);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s4) 0}
.chip{border:1.5px solid var(--line);border-radius:100px;padding:8px 15px;
  font:700 13.5px/1 var(--sans);color:var(--ink)}
.chip.prog{border-style:dashed;color:var(--amber-dk)}

/* --- COMPACT ASSURANCE AND CAS MARK --- */
.trust-compact .wrap{justify-content:space-between;gap:8px 24px;padding:10px 0}
.trust-compact .trust-contact,.trust-compact .trust-credentials{font-size:13px;line-height:1.45}
.trust-compact .trust-credentials{color:var(--mute);font-weight:700}
.cas-cert-mark{width:180px;max-width:100%;height:auto}
.cas-credential-logo{display:block;width:160px;max-width:100%;height:auto;flex:0 0 auto}
.credlist .cas-standard{align-items:center}
@media(max-width:760px){.trust-compact .wrap{display:block}.trust-compact .trust-credentials{display:block;margin-top:4px}}
/* --- PANELS: always white. --- */
.panel{background:var(--surface);color:var(--body);border:1px solid var(--surface-line);
  border-radius:16px;box-shadow:0 22px 54px -38px rgba(20,6,40,.5)}
.panel h2,.panel h3,.panel h4{color:var(--ink)}

.grid{display:grid;gap:var(--s5);margin-top:var(--s6)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.svc{padding:var(--s6);border-top:5px solid var(--amber);border-radius:var(--radius)}
.svc h3{margin-bottom:var(--s2)}
.svc p{font-size:15.5px;margin:0;color:var(--mute)}

.card{border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -34px rgba(20,6,40,.55)}
.card-img{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#efe9f8,#efe9f8 12px,#e6dcf5 12px,#e6dcf5 24px);
  display:flex;align-items:center;justify-content:center}
.card-img span{font:800 12px/1.3 var(--sans);letter-spacing:.05em;color:#8a7fa0;
  border:1px dashed #b9b0c9;background:rgba(255,255,255,.78);padding:6px 11px;border-radius:4px;text-align:center}
.card-body{padding:var(--s5)}
.card-body h3{margin-bottom:var(--s2)}
.card-body p{font-size:15px;color:var(--mute);margin:0}

/* --- CREDENTIALS: three separate groups. Never merged. --- */
.credgroup + .credgroup{margin-top:var(--s6);border-top:1px solid var(--surface-line);padding-top:var(--s6)}
.credgroup h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--s4)}
.credlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.credlist li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);
  border-top:1px solid var(--surface-line);padding-top:var(--s3)}
.credlist li:first-child{border-top:0;padding-top:0}
.credlist b{font:800 16px/1.4 var(--sans);color:var(--ink);min-width:190px}
.credlist span{font-size:15px;color:var(--mute)}
.pill{display:inline-block;font:800 12px/1 var(--sans);letter-spacing:.05em;padding:6px 10px;border-radius:100px}
.pill.prog{background:#FDF1DD;color:var(--amber-dk)}

/* Mark slots. Matched set — the certification body's logo and the accreditation
   mark always together, on white, each bounded, never recoloured. */
/* CERTIFICATION MARKS — issued by AUVA, used per "How to Use Our Logos" Issue 5.
   The AUVA logo and the UKAS mark are ONE issued image and are never separated.
   Issued single-colour artwork: white on black. NEVER recolour, crop or overlay.
   Minimum height 20 mm — 76px at 96dpi. Each mark bounded, on white, clear of others. */
/* ===== CERTIFICATION MARKS =================================================
   Build spec 14_BUILD_SPEC_Certification_Marks_Block.md, 10 Aug 2026.
   That file GOVERNS layout and sizing and supersedes briefs 09, 10, 11, 13.

   DO NOT ADD to .cert-mark or .cert-badge: filter, transform, opacity,
   border-radius, box-shadow, hover state, pointer-events, object-fit,
   background-image. Every one of those breaches a certifying body's
   prohibition. AUVA sanction: suspension and possible legal action.
   UKAS sanction: withdrawal of certification.

   overflow MUST stay visible on this container and every ancestor - the
   BlockMark tooltip expands below the badge and a clipping ancestor eats it.
   ========================================================================= */
.cert-marks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px 24px;
  padding:8px 0;
  overflow:visible;
}
.cert-mark{
  display:block;
  border:0;
  height:auto;               /* honour the width/height attributes, never stretch */
}
.cert-badge{
  border:none;
  display:block;
}
@media (max-width:640px){
  .cert-marks{ gap:22px 18px; justify-content:flex-start; }
}

/* Scope statement — UKAS permits the accreditation symbol on a website ONLY
   where the extent and limitations are described alongside it. Minimum 13px,
   no lighter than #2b2b2b. It is a permission condition, not small print.
   Removing or shrinking this removes the right to display the marks. */
.cert-scope{
  font-size:13px;
  line-height:1.55;
  color:#2b2b2b;
  max-width:78ch;
  margin:0 0 8px
}
.cert-scope:first-of-type{margin-top:18px}

.ref{font:700 14.5px/1.5 var(--mono);color:var(--purple);letter-spacing:.02em}

/* --- STANDING --- */
.stand{background:var(--purple);color:#fff;border-radius:18px;padding:clamp(30px,4.6vw,54px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s7);align-items:center}
.stand h2{color:#fff}
.stand p{color:#D9CDF2;margin:var(--s4) 0 0;font-size:16px}
.figs{display:grid;gap:var(--s3)}
.fig{display:flex;justify-content:space-between;gap:var(--s5);
  border-top:1px solid rgba(255,255,255,.2);padding-top:var(--s3);font-size:15px;color:#E4DCF5}
.fig:first-child{border-top:0;padding-top:0}
.fig b{font-family:var(--mono);color:var(--amber)}

/* --- WHERE TO FIND US: plain hairlines. Never a card, chip, box or badge —
       a boxed treatment reads as an accreditation display. --- */
.portals{list-style:none;margin:var(--s5) 0 0;padding:0;max-width:820px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:var(--s7)}
.portals li{border-top:1px solid var(--line);padding:var(--s3) 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.portals b{font:700 16.5px/1.4 var(--sans);color:var(--ink)}
.portals i{font:400 14.5px/1.4 var(--sans);font-style:normal;color:var(--mute)}
.portals-close{margin-top:var(--s5);max-width:62ch;font-size:15.5px;color:var(--mute);
  border-left:3px solid var(--amber);padding-left:var(--s4)}

.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:var(--s7);
  text-align:center;color:var(--mute)}

/* ===== ADDED FOR THE 12-PAGE REBUILD, 14 Aug 2026 =========================
   Document table (Compliance Vault), form fields (Contact), and a data
   table for the onboarding/procurement comparison tables. No new colours —
   every value below is one of the tokens in :root.
   ========================================================================= */
.dtable{width:100%;border-collapse:collapse;font-size:15px}
.dtable th,.dtable td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--surface-line);vertical-align:top}
.dtable th{font:800 13px/1.3 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--line)}
.dtable td:first-child{font-weight:700;color:var(--ink);min-width:180px}
.dtable-wrap{overflow-x:auto}

.field{display:grid;gap:6px;margin-bottom:var(--s4)}
.field label{font:700 14px/1.3 var(--sans);color:var(--ink)}
.field input,.field select,.field textarea{
  font:15px/1.4 var(--sans);color:var(--ink);background:var(--surface);
  border:1.5px solid var(--surface-line);border-radius:8px;padding:11px 13px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--amber);outline-offset:1px}
.field .hint{font-size:13px;color:var(--mute)}
.field-error{display:none;color:#9f1d16;font-size:13px;font-weight:700;margin:0}
.field.has-error .field-error{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#9f1d16}
.form-status{display:none;margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:8px;font-weight:700}
.form-status.show{display:block}
.form-status.success{background:#e7f6ed;color:#145c2e;border:1px solid #a8d8b9}
.form-status.error{background:#fdecea;color:#8b1d16;border:1px solid #efb5b0}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--body)}
.field-check input{margin-top:4px}
.field-check.has-error{outline:2px solid #9f1d16;outline-offset:5px}
.field-check.has-error + .field-error{display:block;margin-top:var(--s2)}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ===== Controlled certificate request modal (compliance-vault.html only).
   Certificates are fulfilled after a recorded business-contact request; no
   certificate file is published in the deployable website package. ===== */
.cert-gate-overlay{position:fixed;inset:0;background:rgba(20,6,40,.55);z-index:300;
  display:none;align-items:center;justify-content:center;padding:var(--s4)}
.cert-gate-overlay.open{display:flex}
.cert-gate-dialog{background:var(--surface);border-radius:var(--radius);max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;padding:var(--s6);position:relative}
.cert-gate-dialog h2{margin:0 0 var(--s2);font-size:20px}
.cert-gate-dialog .cert-gate-sub{margin:0 0 var(--s5);color:var(--mute);font-size:14.5px}
.cert-gate-close{position:absolute;top:var(--s4);right:var(--s4);background:none;border:0;
  font:800 20px/1 var(--sans);color:var(--mute);cursor:pointer;padding:4px}
.cert-gate-error{color:#9f1d16;font-size:13px;margin-top:-2px;margin-bottom:var(--s3);display:none}
.cert-gate-error.show{display:block}
.cert-gate-status{font-size:14px;margin-top:var(--s3);display:none}
.cert-gate-status.show{display:block}
.cert-gate-privacy{font-size:12.5px;color:var(--mute);margin:var(--s4) 0}

/* ===== NAV DROPDOWNS — added 22 Aug 2026, replacing 8 flat top-level links.
   CSS-only (:focus-within covers keyboard, :hover covers mouse) — no JS,
   consistent with the no-build, no-toolchain rule. Links exist in the DOM
   at all times; only visibility changes, so nothing breaks without CSS. ===== */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:4px}
.has-drop>a::after{content:"";width:6px;height:6px;border:1.5px solid currentColor;
  border-top:0;border-left:0;transform:rotate(45deg);margin-top:-3px}
.dropdown{position:absolute;top:100%;left:0;min-width:260px;background:var(--surface);
  border:1px solid var(--surface-line);border-radius:10px;box-shadow:0 20px 40px -20px rgba(20,6,40,.35);
  padding:var(--s2);margin-top:8px;display:none;z-index:40}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:10px 12px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:14.5px}
.dropdown a:hover,.dropdown a:focus{background:var(--canvas-2)}

/* ===== IMAGE-SLOT CARD — a feature card with a photo, for capability and
   sector cards specifically (not for short scope/checklist grids). Empty
   state matches .hero-img's placeholder treatment. Swap in a real <img>
   inside .fcard-img and remove the placeholder span — no markup change
   needed elsewhere. ===== */
.fcard-img{background:var(--canvas-2);border-radius:var(--radius) var(--radius) 0 0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4)}
.fcard-img span{font:700 12px/1.3 var(--sans);letter-spacing:.04em;color:var(--mute);text-align:center;padding:0 var(--s4)}
.fcard-img img{width:100%;height:100%;object-fit:cover;display:block}

.fcard{background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius);
  padding:var(--s5);height:100%}
.fcard h3{font-size:17px;margin:0 0 var(--s2);color:var(--ink)}
.fcard p{font-size:14.5px;line-height:1.55;color:var(--mute);margin:0}
.fcard p+p{margin-top:var(--s2)}
.fcard .k{display:inline-block;font:800 12.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--amber-dk);margin-bottom:var(--s2)}

.doclist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.doclist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--surface-line)}
.doclist li:first-child{border-top:0;padding-top:0}
.doclist b{font:700 16px/1.4 var(--sans);color:var(--ink);flex:1 1 260px}
.doclist span{font-size:14px;color:var(--mute)}

/* --- FOOTER --- */
footer{background:#150F1D;color:#B3AAC2;font-size:14.5px;padding:var(--s8) 0 var(--s6)}
footer a{color:#fff}
footer h4,footer .fh{color:#fff;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:var(--s4);font-weight:800}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s7)}
.flist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.flist a{text-decoration:none;color:#B3AAC2}
.flist a:hover{color:#fff}
.fmarks{display:flex;gap:var(--s2);margin-top:var(--s4)}
.fmark{width:66px;height:66px;border:1px dashed #4A4159;border-radius:6px;background:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:800 8px/1.25 var(--sans);color:#8A7FA0;padding:4px}
.fnote{font-size:12.5px;color:#8D84A1;margin-top:var(--s4);max-width:52ch}
.fsoc{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.fsoc a{width:42px;height:42px;border:1px solid #3A3247;border-radius:8px;display:flex;
  align-items:center;justify-content:center;font:800 10px/1 var(--sans);color:#6D6482;text-decoration:none;
  transition:color .15s,border-color .15s}
.fsoc a:hover{color:#fff;border-color:#6D6482}
.fsoc-inline{display:inline-flex;gap:var(--s3)}
.fsoc-inline a{color:var(--purple);display:inline-flex;text-decoration:none}
.fsoc-inline a:hover{color:var(--purple-2)}
.fbar{border-top:1px solid #2C2439;margin-top:var(--s6);padding-top:var(--s5);font-size:12.5px;color:#8D84A1}

/* ===== MOBILE SLIDE-OUT MENU — button state and focus are synchronized by
   /js/site.js so assistive technology receives the open/closed state. ===== */
.nav-toggle-btn{display:none;position:relative;z-index:210;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.nav-toggle-btn span[aria-hidden="true"]{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;transition:transform .2s ease,opacity .2s ease}
#site-header.nav-open .nav-toggle-btn span[aria-hidden="true"]:nth-of-type(2){transform:translateY(7px) rotate(45deg)}
#site-header.nav-open .nav-toggle-btn span[aria-hidden="true"]:nth-of-type(3){opacity:0}
#site-header.nav-open .nav-toggle-btn span[aria-hidden="true"]:nth-of-type(4){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-scrim{display:none}
body.nav-menu-open{overflow:hidden}

@media(max-width:900px){
  .stand{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hrow{flex-wrap:wrap}
  .nav-toggle-btn{display:flex}
  nav.primary{position:fixed;top:0;right:-320px;width:280px;max-width:82vw;height:100vh;
    background:var(--surface);flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--s8) + var(--s4)) var(--s4) var(--s5);
    box-shadow:-24px 0 48px -20px rgba(20,6,40,.45);transition:right .28s ease;z-index:200;
    overflow-y:auto;order:0}
  nav.primary a{padding:14px 14px;font-size:15.5px;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid var(--surface-line)}
  #site-header.nav-open nav.primary{right:0}
  /* .nav-scrim is a SIBLING of #site-header in the DOM, not a descendant —
     so it never competes against nav.primary's z-index:200 directly. It
     competes against #site-header's own stacking-context rank (z-index:50).
     At 190 it used to win that comparison and paint over the entire header
     context (including the open nav panel), swallowing every tap even
     though the panel was visibly showing through the semi-transparent
     scrim underneath it (found 2026-08-25, IMS_root live-device report).
     Kept below 50 so the header's own context always wins. */
  #site-header.nav-open + .nav-scrim{display:block;position:fixed;inset:0;background:rgba(10,4,20,.45);z-index:10;border:0;padding:0;cursor:pointer}
  .dropdown{position:static;box-shadow:none;border:0;margin:0;padding-left:var(--s4);display:block}
  .has-drop>a::after{display:none}
  .credlist li{flex-direction:column;gap:2px}
  .credlist b{min-width:0}
}
@media(min-width:901px){
  nav.primary a{min-height:48px;padding:12px 14px}
}

/* ===== STICKY PROCUREMENT ACTION BAR — brief developer note, §2:
   "persistent global call-to-action ... Request Tender Pack / Access
   Compliance Vault", every page, desktop and mobile. ===== */
.action-bar{display:none}
@media(max-width:1024px){
  .action-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:var(--purple);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -16px 32px -20px rgba(0,0,0,.4)}
  .action-bar .wrap{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;padding:10px var(--s5)}
  .action-bar a{flex:1 1 220px;text-align:center;max-width:320px}
  body{padding-bottom:64px}
}
@media(max-width:640px){
  .portals{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}


/* Visually-hidden heading used to keep the outline unbroken (h1 -> h2 -> h3). */
.sr-only-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- PHOTOGRAPHY. Real <img>, so alt text reaches screen readers and search.
   Every image is registered in the image asset register before placement.
   No image is captioned or implied as a Daridam project. --- */
.hero-img img,.card-img img,.fcard-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-img.has-photo,.card-img.has-photo,.fcard-img.has-photo{background:none}

/* ===== Brief 16 Section A §5 exact snippet class, applied to every photo <img> ===== */
.hero-img-cover{width:100%;height:100%;object-fit:cover;object-position:center;
  background-color:#f3f4f6;display:block}

/* ===== Per-role intrinsic aspect ratios (Section A §1.B / §4) — replaces the
   previous single hardcoded 16/10 on .fcard-img, which did not match any
   delivered image's real aspect ratio (3:2 or 4:3) and caused a second,
   invisible crop on top of the export crop via object-fit:cover.
   Not applied to .hero-img: it is position:absolute;inset:0 inside .hero,
   stretched to the parent's min-height on both axes, so a CSS aspect-ratio
   on .hero-img itself would be inert (ignored per spec when both dimensions
   are already constrained) — hero CLS protection comes from the <img
   width/height> attributes plus .hero's own min-height, which is real and
   already verified, not from this property. ===== */
.fcard-img{aspect-ratio:auto}
.fcard-img.ar-3-2{aspect-ratio:3/2}
.fcard-img.ar-4-3{aspect-ratio:4/3}

.pagebanner{width:100%;aspect-ratio:16/6;overflow:hidden;background:var(--canvas-2);margin-top:var(--s6)}
.pagebanner img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.pagebanner{aspect-ratio:16/9}}