@charset "utf-8";

/* --------------------------------------------------------------------------
   Self-hosted webfonts. The source PDFs embed no fonts at all, so these are
   the closest visual matches to the artwork: Archivo for display and
   headings (heavy grotesque), Inter for body, Noto Sans Devanagari for the
   Hindi on the learning boards. Self-hosted so the site has no external
   dependency and renders identically offline.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; font-style: normal; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; font-style: normal; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; font-style: normal; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("../fonts/noto-sans-devanagari-devanagari-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("../fonts/noto-sans-devanagari-devanagari-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("../fonts/noto-sans-devanagari-devanagari-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; font-style: normal; }

/* ==========================================================================
   SAFETY INFO PVT. LTD.
   High-fidelity web conversion of the ENV and PSM profile PDFs.

   The source decks are 1440 x 810 pt (exactly 16:9). Rendered 1:1 that is
   1440 x 810 CSS pixels, so every measurement below is taken straight off
   the artwork with no conversion.

   The desktop composition is therefore built on a fixed 1440 x 810 STAGE
   which is scaled as a whole with a CSS custom property, so the layout
   overlays the PDF at any viewport width instead of reflowing away from it.
   Below the tablet breakpoint the stage is abandoned and each page reflows
   to a natural document order (see section 90).

   SECTIONS
     01  Tokens
     02  Reset & base
     03  Stage / page shell
     04  Typography primitives
     05  Shared components (badges, pills, cards, rules, quotes)
     06  Decorative furniture (dot grid, chevrons, skyline, arcs)
     07  Site header / primary navigation
     08  Profile navigation (Previous / Next / Back to Services)
     09  Footer
     10+ Layout templates A - S
     90  Responsive
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   Every colour below was sampled off the source artwork, not chosen.
   ========================================================================== */

:root {

    /* ---- Brand ---------------------------------------------------------- */
    --red:            #CC0001;   /* logo wordmark, swoosh                     */
    --red-brick:      #7D211F;   /* PSM numbered labels                       */
    --red-fire:       #BA1F13;   /* ENVID quadrant                            */

    --green-deep:     #012F07;   /* pill banner fills, OUR SERVICES           */
    --green-dark:     #002B00;   /* cover headings, Corporate Office          */
    --green-forest:   #2A4F11;   /* page H1 line 1 on light pages             */
    --green-mid:      #568A0C;   /* cover chevron wedges                      */
    --green-badge:    #277A32;   /* step badges                               */
    --green-olive:    #4A7219;   /* step badges                               */
    --green-leaf:     #77A027;   /* H1 line 2 on dark pages, rules            */
    --green-pale:     #E8F2E4;   /* card tints                                */
    --green-mist:     #F2F7EF;   /* page washes                               */

    --navy:           #0D2E4F;   /* H1 line 2 on light pages                  */
    --navy-deep:      #001B38;   /* PSM wordmark, dark panels                 */
    --navy-ink:       #0E2038;   /* photo overlays                            */
    --steel:          #36709B;   /* step labels, nodes                        */
    --teal:           #266979;   /* step badges, wheel segments               */

    --orange:         #D97222;   /* PSM SAFETY, wheel segments                */
    --orange-hot:     #E96B05;   /* wheel segments                            */
    --amber:          #C38200;   /* PSM numbered labels                       */

    /* ---- Pastel card-hover tints ------------------------------------------
       Light washes of the brand hues above, for the Services modal's
       per-position card hover rotation - --green-pale already covers the
       green slot. */
    --pastel-navy:    #E4EBF2;
    --pastel-orange:  #F7EBDF;
    --pastel-teal:    #E2F0EE;
    --pastel-red:     #F7E6E4;

    --ink:            #333333;
    --ink-body:       #4E4E4E;   /* paragraph text                            */
    --ink-soft:       #6F6F6F;   /* secondary text                            */
    --line:           #DFE4E6;
    --line-soft:      #ECEFF1;
    --white:          #FFFFFF;
    --paper:          #FAFAF8;   /* the off-white the light pages sit on      */
    /* One flat wash behind every light section on every page, so the end of
       one section and the start of the next is never visible as a change of
       background. Sections that paint nothing of their own already show it
       through from body. */
    --surface:        #EFF9FF;

    /* Per-page accent. Templates read these; pages override them. */
    --accent:         var(--green-forest);
    --accent-2:       var(--navy);
    --accent-soft:    var(--green-pale);

    /* ---- Stage ---------------------------------------------------------- */
    --stage-w: 1440;
    --stage-h: 810;
    --stage-scale: 1;

    /* ---- Type ramp, measured off the artwork ---------------------------- */
    /* The source display face is a condensed grotesque: "ENVIRONMENTAL" is
       572px wide at 80px cap height. Barlow Condensed is the closest free
       match (within 17%); the .fit utility closes the remainder exactly. */
    --f-display: "Barlow Condensed", "Archivo Narrow", "Oswald",
                 "Helvetica Neue Condensed", "Arial Narrow", system-ui, sans-serif;
    --f-head:    "Archivo", "Inter", "Segoe UI", system-ui, sans-serif;
    --f-body:    "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --f-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;
    --f-deva:    "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif;

    --t-hero:    76px;   /* cover wordmark scale                              */
    --t-h1:      64px;   /* page display heading                             */
    --t-h1-sm:   46px;
    --t-h2:      30px;
    --t-h3:      21px;
    --t-h4:      16px;
    --t-lede:    22px;
    --t-body:    16px;
    --t-sm:      14px;
    --t-xs:      12.5px;
    --t-xxs:     11px;

    --lh-display: 0.94;
    --lh-head:    1.16;
    --lh-body:    1.45;

    --track-wide: 0.08em;
    --track-head: 0.01em;
    --track-tight: -0.02em;

    /* ---- Shape ---------------------------------------------------------- */
    /* Radii deliberately tightened. The previous scale read consumer-soft;
       a consulting site wants edges that look engineered, not rounded. */
    --r-xs: 3px;
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --r-pill: 999px;

    /* Restrained elevation. Borders carry the structure; shadow only
       separates a surface from the one behind it. */
    --sh-xs:   0 1px 2px rgba(16, 24, 32, .05);
    --sh-card: 0 1px 2px rgba(16, 24, 32, .05), 0 4px 12px -6px rgba(16, 24, 32, .14);
    --sh-lift: 0 2px 6px rgba(16, 24, 32, .08), 0 14px 32px -18px rgba(16, 24, 32, .30);
    --sh-badge: 0 2px 6px rgba(16, 24, 32, .16);

    /* 4px spacing scale - every gap in the shell is a multiple of it. */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;  --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* Section rhythm, fluid between mobile and desktop. */
    --sec-y: clamp(40px, 3.2vw + 16px, 68px);
    --gutter: clamp(16px, 2vw + 6px, 40px);
    --measure: 68ch;

    --line-strong: #CBD3D8;

    --dur-1: .16s;
    --dur: .24s;
    --dur-3: .36s;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --header-h: 64px;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Scroll reveal: subtle fade + upward move for section headings, card grids,
   testimonials, team and client areas - see bindScrollReveal() in site.js.
   Scoped behind body.js-reveal-ready so content stays fully visible if JS
   never runs; site.js also never adds .reveal under prefers-reduced-motion
   in the first place (the blanket rule above would collapse the transition
   to instant anyway, but the elements would still jump - simplest to skip
   the hidden state entirely rather than rely on that alone). */
body.js-reveal-ready .reveal {
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
body.js-reveal-ready .reveal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--s-4));
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink-body);
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sticky footer: #mainForm/#main grow to fill a short page instead of
       leaving body's own background showing below the footer. No effect
       once content is already taller than the viewport. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#mainForm { display: flex; flex-direction: column; flex: 1; }
#main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--lh-head); color: var(--ink); }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--green-deep);
    color: #fff;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 700;
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

/* :where(a, button, [tabindex]):focus-visible lives in the "10. Accessibility
   foundation" block below (it's the profile-aware, currently-active version -
   this was a duplicate at equal specificity, always overridden by source
   order). */


/* ==========================================================================
   03. STAGE / PAGE SHELL

   One PDF page = one .pdf-page. Inside it, .stage is a fixed 1440 x 810
   coordinate space; children are positioned with the same numbers measured
   off the artwork. The whole stage is scaled by --stage-scale, computed in
   site.js from the available width, so the composition never reflows on
   desktop - it overlays the PDF.
   ========================================================================== */

/* The rebuilt PDF composition, presented as a full-bleed website section.
   No sheet framing, no page number, no reader chrome - the composition is
   the content of the page it belongs to. */
.composition-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--paper);
}

.composition {
    position: relative;
    width: calc(var(--stage-w) * 1px * var(--stage-scale));
    height: calc(var(--stage-h) * 1px * var(--stage-scale));
    max-width: 100%;
    overflow: hidden;
    background: var(--paper);
}

.stage {
    position: absolute;
    top: 0; left: 0;
    width: calc(var(--stage-w) * 1px);
    height: calc(var(--stage-h) * 1px);
    transform: scale(var(--stage-scale));
    transform-origin: 0 0;
    overflow: hidden;
    background: var(--paper);
}

/* Absolute placement helper: every template uses design-space pixels. */
.at {
    position: absolute;
}



/* ==========================================================================
   04. TYPOGRAPHY PRIMITIVES

   The decks use one dominant pattern: a two-tone display heading where the
   first line is one colour and the second another, followed by a rule and a
   lede. These classes carry that.
   ========================================================================== */

.d-title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: var(--t-h1);
    line-height: var(--lh-display);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}
.d-title .l1 { display: block; color: var(--accent); }
.d-title .l2 { display: block; color: var(--accent-2); }
.d-title .l3 { display: block; }
.d-title--sm  { font-size: var(--t-h1-sm); }
.d-title--mix { text-transform: none; }

.d-rule {
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 14px 0;
}
.d-rule--hair { height: 1.5px; background: var(--line); }
.d-rule--fade { background: linear-gradient(90deg, var(--accent), rgba(0,0,0,0)); }

/* the thin rule that ends in a dot, used on the centred title pages */
.d-rule--dot { position: relative; }
.d-rule--dot::after {
    content: "";
    position: absolute;
    right: -3px; top: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
}

.d-lede {
    font-family: var(--f-body);
    font-size: var(--t-lede);
    font-weight: 500;
    line-height: 1.34;
    color: var(--ink-body);
}

.d-eyebrow {
    font-family: var(--f-head);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
}

.d-h2 { font-family: var(--f-head); font-size: var(--t-h2); letter-spacing: var(--track-tight); color: var(--accent); }
.d-h3 { font-family: var(--f-head); font-size: var(--t-h3); letter-spacing: var(--track-head); color: var(--accent); }
.d-h4 {
    font-family: var(--f-head);
    font-size: var(--t-h4);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--accent);
}

.d-body   { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-body); }
.d-body-s { font-size: var(--t-sm);   line-height: 1.42; color: var(--ink-body); }
.d-body-xs{ font-size: var(--t-xs);   line-height: 1.38; color: var(--ink-soft); }

.on-dark,
.on-dark .d-body, .on-dark .d-body-s, .on-dark .d-body-xs { color: rgba(255,255,255,.86); }
.on-dark .d-title .l1 { color: #fff; }


/* ==========================================================================
   05. SHARED COMPONENTS
   ========================================================================== */

/* --- 5.1 Circular icon badge --------------------------------------------
   The single most repeated object in both decks. Solid fill, white glyph,
   sometimes a white ring. Size is set per use with --bs.
------------------------------------------------------------------------- */
.badge {
    --bs: 76px;
    --bf: var(--accent);
    width: var(--bs);
    height: var(--bs);
    border-radius: 50%;
    background: var(--bf);
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: var(--sh-badge);
}
.badge svg {
    width: 52%;
    height: 52%;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.badge--solid svg { fill: #fff; stroke: none; }
.badge--ring   { box-shadow: 0 0 0 3px #fff, var(--sh-badge); }
.badge--outline {
    background: transparent;
    border: 2.5px solid var(--bf);
}
.badge--outline svg { stroke: var(--bf); }
.badge--soft { background: var(--accent-soft); }
.badge--soft svg { stroke: var(--bf); }

/* --- 5.2 Dark-green pill heading ---------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px 8px;
    background: var(--green-deep);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: var(--f-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    line-height: 1.1;
}
.pill--navy  { background: var(--navy-deep); }
.pill--sq    { border-radius: var(--r-sm); }
.pill--wide  { display: flex; justify-content: center; }

/* --- 5.3 Rounded white card --------------------------------------------- */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.card--flat  { box-shadow: none; }
.card--tint  { background: var(--green-mist); }
.card--glass {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}
.card--pad   { padding: 22px 24px; }

/* --- 5.4 Bullet list ----------------------------------------------------- */
.blist li {
    position: relative;
    padding-left: 17px;
    margin-bottom: 7px;
    font-size: var(--t-sm);
    line-height: 1.42;
    color: var(--ink-body);
}
.blist li:last-child { margin-bottom: 0; }
.blist li::before {
    content: "";
    position: absolute;
    left: 2px; top: .55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.blist--tight li { margin-bottom: 4px; }

/* --- 5.5 Decorative quotation block -------------------------------------- */
.quote {
    position: relative;
    padding-left: 34px;
}
.quote::before {
    content: "\201C";
    position: absolute;
    left: 0; top: -14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 62px;
    line-height: 1;
    color: var(--accent);
}
.quote em { font-style: normal; font-weight: 700; color: var(--accent); }
.quote strong { font-weight: 700; color: var(--navy); }

/* --- 5.6 Numbered step ---------------------------------------------------- */
.step-num {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 15px;
    color: var(--accent);
}
.step-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.step-row > * { flex: 1 1 0; min-width: 0; }

/* vertical hairline divider between step columns */
.step-div {
    position: relative;
}
.step-div + .step-div::before {
    content: "";
    position: absolute;
    left: 0; top: 6%;
    width: 1px; height: 88%;
    background: rgba(0,0,0,.10);
}
.on-dark .step-div + .step-div::before { background: rgba(255,255,255,.22); }

/* --- 5.7 Chip / tag ------------------------------------------------------- */
.chip {
    display: inline-block;
    padding: 4px 11px 5px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--t-xxs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --- 5.8 Data table ------------------------------------------------------- */
.dtable {
    font-size: var(--t-xs);
    background: #fff;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.dtable th,
.dtable td {
    border: 1px solid var(--line);
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
}
.dtable th {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
}
.dtable tbody tr:nth-child(even) td { background: #F6F8F5; }

/* --- 5.9 Cropped-source marker -------------------------------------------
   The source artboards overrun the exported page on 27 of 42 pages, so some
   captions genuinely end mid-sentence. Where that happens the visible text is
   reproduced verbatim and this class marks the truncation for screen readers
   without adding any invented wording.
------------------------------------------------------------------------- */
.src-cropped { position: relative; }
.src-cropped::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 10px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), currentColor);
    opacity: .0;
}


/* ==========================================================================
   06. DECORATIVE FURNITURE
   ========================================================================== */

/* --- Green dotted grid, top-right and upper-left on several pages -------- */
.dotgrid {
    background-image: radial-gradient(var(--green-mid) 1.6px, transparent 1.7px);
    background-size: 13px 13px;
    opacity: .55;
}
.dotgrid--dark { background-image: radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.7px); }

/* --- Chevron / wedge frames (cover page) --------------------------------- */
.wedge {
    background: linear-gradient(160deg, var(--green-mid), var(--green-deep));
}
.wedge--l { clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.wedge--r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }

/* --- Skyline silhouette, shared SVG -------------------------------------- */
.skyline {
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
    opacity: .5;
}

/* --- Dashed orbit ring ---------------------------------------------------- */
.orbit {
    border-radius: 50%;
    border: 1.5px dashed rgba(0,0,0,.22);
}
.on-dark .orbit { border-color: rgba(255,255,255,.30); }

/* --- Photo frame ---------------------------------------------------------- */
.photo {
    overflow: hidden;
    background: #E9ECEE center/cover no-repeat;
    border-radius: var(--r-md);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--sq   { border-radius: 0; }
.photo--circle { border-radius: 50%; }
.photo--diag { border-radius: 0; }

/* dark scrim used wherever text sits over a photograph */
.scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scrim--l { background: linear-gradient(90deg, rgba(6,14,26,.94) 0%, rgba(6,14,26,.78) 34%, rgba(6,14,26,.28) 70%, rgba(6,14,26,.12) 100%); }
.scrim--b { background: linear-gradient(0deg, rgba(6,14,26,.92) 0%, rgba(6,14,26,.42) 46%, rgba(6,14,26,.08) 100%); }
.scrim--f { background: linear-gradient(180deg, rgba(6,14,26,.55), rgba(6,14,26,.78)); }


/* ==========================================================================
   07. SITE SHELL
   Structure follows the Sparrow RMS reference: a thin dark bar carrying the
   two profile tabs, a white navigation bar beneath it, then a full-width
   hero. Everything inside those frames - colour, type, imagery, content -
   comes from the Safety Info profile PDFs.
   ========================================================================== */

.legacy-header--unused {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--header-h);
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 40px; height: auto; }
.brand-word { width: 132px; height: auto; }

.nav-list { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
    display: block;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: #2C3A44;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: var(--green-mist); color: var(--green-deep); }
.nav-link.is-active { color: var(--green-deep); background: var(--green-pale); }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    margin-left: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    place-items: center;
}
.nav-toggle span {
    display: block;
    width: 19px; height: 2px;
    margin: 3px auto;
    background: var(--green-deep);
    border-radius: 2px;
}


/* ==========================================================================
   09. FOOTER
   ========================================================================== */

.site-footer {
    background: #231F40;
    color: rgba(255,255,255,.72);
    /* Top padding only has to separate the footer from the last section, which
       already ends on its own var(--sec-y) bottom padding (52-96px) - at
       clamp(48px, 6vw, 80px) this was stacking a second full section gap on
       top of one that was there anyway. */
    padding: clamp(28px, 2.6vw, 40px) 22px 0;
}
.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 26px 46px;
    align-items: flex-start;
}
.footer-logo { width: 150px; }
.footer-addr { font-size: 14px; line-height: 1.62; }
.footer-addr strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.footer-values { display: flex; gap: 22px; margin-left: auto; }
.footer-values li {
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    /* Plain text only - explicit and !important because no background/border
       rule for .footer-values li exists anywhere else in this file, so this
       guards against whatever else is winning the cascade right now. */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.footer-base {
    max-width: 1320px;
    /* The columns' own padding-bottom already provides the gap above this
       rule, so the extra 24px margin was doubling it; 28px below a single
       12.5px line was likewise leaving a visibly empty band under the footer. */
    margin: 0 auto;
    padding: 14px 22px 16px;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 12.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, .78);
}
.footer-base a { color: #E0A526; font-weight: 700; text-decoration: none; }
.footer-base a:hover { text-decoration: underline; }


/* ==========================================================================
   10. TEMPLATE A - COVER            (page 01)
   White centre panel between green chevron wedges carrying photo cut-outs;
   centred logo lockup; address block; four circular value badges over a
   pale skyline.
   ========================================================================== */

.tA { position: absolute; inset: 0; background: #fff; }

.tA-wedge { position: absolute; top: 0; bottom: 0; width: 372px; }
.tA-wedge--l { left: 0;  clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%); }
.tA-wedge--r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 42% 50%); }
.tA-wedge .photo { position: absolute; inset: 0; border-radius: 0; }
.tA-wedge-edge {
    position: absolute; top: 0; bottom: 0; width: 372px;
    background: linear-gradient(150deg, var(--green-mid), var(--green-deep));
}
.tA-wedge-edge--l { left: -26px;  clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%); }
.tA-wedge-edge--r { right: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 42% 50%); }

.tA-core { position: absolute; left: 372px; right: 372px; top: 0; bottom: 0; text-align: center; }
.tA-lockup { width: 470px; margin: 26px auto 0; }
.tA-dots3 { display: flex; gap: 11px; justify-content: center; margin: 12px 0 16px; }
.tA-dots3 i { width: 11px; height: 11px; border-radius: 50%; background: var(--green-mid); }
.tA-office {
    font-family: var(--f-head);
    font-size: 27px; font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
}
.tA-addr { font-size: 17.5px; line-height: 1.6; color: #3A3A3A; }
.tA-hr {
    width: 300px; height: 1.5px; margin: 18px auto 0;
    background: var(--green-mid); position: relative;
}
.tA-hr::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green-mid); transform: translate(-50%, -50%);
}
.tA-values { display: flex; justify-content: center; gap: 0; margin-top: 26px; }
.tA-val { flex: 1 1 0; position: relative; }
.tA-val + .tA-val::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 1.5px; height: 74px; background: var(--green-mid); opacity: .5;
}
.tA-val .badge { --bs: 84px; --bf: linear-gradient(150deg, #2E7D32, #0B3F14); margin: 0 auto 12px; }
.tA-val-label {
    font-family: var(--f-head); font-size: 15px; font-weight: 700;
    letter-spacing: .06em; color: var(--green-dark);
}
.tA-val-label::after {
    content: ""; display: block; width: 42px; height: 2px; margin: 6px auto 0;
    background: var(--green-mid);
}
.tA-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; }


/* ==========================================================================
   11. TEMPLATE B - SERVICES OVERVIEW POSTER      (page 02)
   Photo header band, then a three-column masonry of white cards each with a
   circular outline badge and a dark-green pill heading, then a five-item
   value strip.
   ========================================================================== */

.tB { position: absolute; inset: 0; background: var(--paper); }
.tB-head { position: absolute; left: 0; right: 0; top: 0; height: 152px; }
.tB-head .photo { position: absolute; top: 0; bottom: 0; border-radius: 0; }
.tB-title {
    position: absolute; left: 0; right: 0; top: 12px;
    text-align: center;
    font-family: var(--f-display); font-weight: 800;
    font-size: 74px; line-height: .96; letter-spacing: -.015em;
    color: var(--green-deep);
    text-transform: uppercase;
}
.tB-strap {
    position: absolute; left: 0; right: 0; top: 106px;
    text-align: center; font-size: 19px; font-weight: 600; color: #1D2B21;
}
.tB-cols { position: absolute; left: 14px; right: 14px; top: 158px; bottom: 82px; display: flex; gap: 12px; }
.tB-col  { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; }
.tB-card { position: relative; padding: 16px 16px 14px 16px; }
.tB-card .badge { --bs: 46px; position: absolute; left: 12px; top: 12px; background: #fff; }
.tB-card-head { margin-left: 56px; margin-bottom: 9px; }
.tB-card .pill { font-size: 13.5px; padding: 6px 15px 7px; }
.tB-card .blist { margin-left: 56px; }
.tB-card .blist li { font-size: 12.8px; margin-bottom: 4px; padding-left: 14px; }
.tB-card .photo { border-radius: var(--r-sm); }
.tB-values { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 64px; display: flex; }
.tB-value { flex: 1 1 0; display: flex; align-items: center; gap: 12px; position: relative; padding: 0 14px; }
.tB-value + .tB-value::before {
    content: ""; position: absolute; left: 0; top: 12px;
    width: 1px; height: 40px; background: var(--line);
}
.tB-value .badge { --bs: 38px; --bf: transparent; box-shadow: none; }
.tB-value .badge svg { stroke: var(--green-deep); width: 100%; height: 100%; }
.tB-value p { font-size: 13px; line-height: 1.32; color: #22301F; font-weight: 500; }


/* ==========================================================================
   12. TEMPLATE C - DARK PHOTO HERO + STEP ROW    (pages 03, 28, 35)
   ========================================================================== */

.tC { position: absolute; inset: 0; background: #0B1A2C; }
.tC-bg { position: absolute; inset: 0; }
.tC-bg .photo { position: absolute; inset: 0; border-radius: 0; }
.tC-head { position: absolute; z-index: 2; }
.tC-steps {
    position: absolute; z-index: 2;
    display: flex;
}
.tC-step { flex: 1 1 0; position: relative; text-align: center; padding: 0 14px; }
.tC-step + .tC-step::before {
    content: ""; position: absolute; left: 0; top: 4%;
    width: 1px; height: 88%; background: rgba(255,255,255,.24);
}
.tC-step .badge { --bs: 118px; margin: 0 auto 16px; }
.tC-step-label {
    font-family: var(--f-head); font-size: 22px; font-weight: 800;
    letter-spacing: .05em; margin-bottom: 8px;
}
.tC-step-desc { font-size: 15px; line-height: 1.42; color: rgba(255,255,255,.90); }


/* ==========================================================================
   13. TEMPLATE D - TEXT + ORBIT DIAGRAM        (pages 04, 05, 09, 11)
   Left title and quote column; right circular orbit of labelled icon nodes
   around a central photo medallion.
   ========================================================================== */

.tD { position: absolute; inset: 0; background: linear-gradient(180deg, #FFFFFF, var(--green-mist)); }
.tD-left  { position: absolute; }
.tD-hub   { position: absolute; border-radius: 50%; overflow: hidden; }
.tD-hub img { width: 100%; height: 100%; object-fit: cover; }
.tD-orbit { position: absolute; }
.tD-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tD-node  { position: absolute; display: flex; align-items: flex-start; gap: 12px; }
.tD-node .badge { --bs: 74px; }
.tD-node-body { width: 190px; }
.tD-node-title {
    font-family: var(--f-head); font-size: 15px; font-weight: 800;
    letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
    color: var(--accent); margin-bottom: 5px;
}
.tD-node-desc { font-size: 12.8px; line-height: 1.38; color: var(--ink-body); }
.tD-node--rtl { flex-direction: row-reverse; text-align: right; }


/* ==========================================================================
   14. TEMPLATE E - MULTI-PANEL POSTER            (page 06 BRSR)
   ========================================================================== */

.tE { position: absolute; inset: 0; background: var(--paper); }
.tE-panel { position: absolute; padding: 16px 18px; }
.tE-panel .pill { margin-bottom: 10px; }
.tE-pillars { display: flex; gap: 10px; }
.tE-pillar { flex: 1 1 0; padding: 12px; border-radius: var(--r-md); background: var(--green-mist); border: 1px solid var(--line); }
.tE-benefits { position: absolute; display: flex; }
.tE-benefit { flex: 1 1 0; text-align: center; padding: 0 10px; position: relative; }
.tE-benefit + .tE-benefit::before {
    content: ""; position: absolute; left: 0; top: 10%;
    width: 1px; height: 76%; background: var(--line);
}
.tE-benefit .badge { --bs: 52px; margin: 0 auto 8px; }
.tE-benefit p { font-size: 12.5px; line-height: 1.32; font-weight: 600; color: var(--green-deep); }


/* ==========================================================================
   15. TEMPLATE F - CARD + PROCESS ROW + BENEFITS
                                     (pages 07, 08, 12, 13, 19)
   ========================================================================== */

.tF { position: absolute; inset: 0; background: var(--paper); }
.tF-title { position: absolute; left: 0; right: 0; text-align: center; }
.tF-leaf { display: inline-block; width: 30px; vertical-align: middle; opacity: .9; }
.tF-card { position: absolute; padding: 18px 20px; }
.tF-card-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 13px; }
.tF-card-row:last-child { margin-bottom: 0; }
.tF-card-row .badge { --bs: 46px; }
.tF-card-row h4 { font-family: var(--f-head); font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-bottom: 4px; }
.tF-card-row p  { font-size: 12.8px; line-height: 1.4; }
.tF-dash { height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); margin: 12px 0; }

.tF-panel { position: absolute; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: 14px 16px 16px; }
.tF-panel > .pill { position: absolute; top: -15px; left: 18px; }
.tF-process { display: flex; gap: 8px; margin-top: 12px; }
.tF-proc { flex: 1 1 0; text-align: center; position: relative; }
.tF-proc .badge { --bs: 50px; margin: 0 auto 8px; }
.tF-proc-n {
    display: inline-block; min-width: 20px;
    font-family: var(--f-head); font-weight: 800; font-size: 13px;
    color: var(--accent);
}
.tF-proc h5 { font-family: var(--f-head); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--accent-2); margin: 2px 0 4px; line-height: 1.2; }
.tF-proc p  { font-size: 11.5px; line-height: 1.34; color: var(--ink-soft); }
.tF-arrow {
    position: absolute; right: -6px; top: 24px;
    width: 12px; height: 12px;
    border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
    transform: rotate(45deg); opacity: .5;
}
.tF-benefits { display: flex; gap: 8px; margin-top: 10px; }
.tF-benefit { flex: 1 1 0; text-align: center; }
.tF-benefit .badge { --bs: 46px; margin: 0 auto 7px; }
.tF-benefit p { font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--accent); }


/* ==========================================================================
   16. TEMPLATE G - QUADRANT CYCLE                (page 10 ENVID)
   ========================================================================== */

.tG { position: absolute; inset: 0; background: #0A1420; }
.tG-bg .photo { position: absolute; inset: 0; border-radius: 0; }
.tG-frame { position: absolute; inset: 12px; border: 2px solid rgba(214,178,92,.75); border-radius: 4px; pointer-events: none; }
.tG-hub {
    position: absolute; border-radius: 50%; background: #fff;
    display: grid; place-items: center; text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.tG-hub b { font-family: var(--f-display); font-size: 40px; font-weight: 800; color: var(--navy-deep); letter-spacing: -.01em; display: block; }
.tG-hub span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tG-quad { position: absolute; width: 320px; border-radius: var(--r-md); overflow: hidden; }
.tG-quad-head { padding: 7px 14px; color: #fff; font-family: var(--f-head); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tG-quad-body { padding: 11px 14px 12px; background: rgba(255,255,255,.93); }
.tG-quad-body li { font-size: 12.4px; line-height: 1.36; }


/* ==========================================================================
   17. TEMPLATE H - PHOTO TILE GALLERY            (pages 14, 17)
   ========================================================================== */

.tH { position: absolute; inset: 0; background: var(--paper); }
.tH-grid { position: absolute; display: grid; gap: 12px; }
.tH-tile { position: relative; border-radius: var(--r-md); overflow: hidden; background: #E9ECEE; }
.tH-tile img { width: 100%; height: 100%; object-fit: cover; }
.tH-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 10px 8px;
    background: linear-gradient(0deg, rgba(4,20,10,.92), rgba(4,20,10,0));
    color: #fff; font-family: var(--f-head);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; text-align: center; line-height: 1.24;
}
.tH-cap--chip {
    background: var(--green-deep); border-radius: var(--r-sm);
    position: static; padding: 6px 8px; margin-top: 6px;
}


/* ==========================================================================
   18. TEMPLATE I - MODELLING DASHBOARD           (pages 15, 16)
   ========================================================================== */

.tI { position: absolute; inset: 0; background: #FBFBF6; }
.tI-flow { display: flex; align-items: center; gap: 10px; }
.tI-flow-box {
    flex: 1 1 0; padding: 9px 11px; border-radius: var(--r-sm);
    background: #fff; border: 1px solid var(--line);
}
.tI-flow-box h5 { font-family: var(--f-head); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.tI-flow-box li { font-size: 11px; line-height: 1.34; }
.tI-flow-arrow { width: 16px; height: 16px; flex: none; border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent); transform: rotate(45deg); }
.tI-legend { display: flex; border-radius: 3px; overflow: hidden; }
.tI-legend i { flex: 1 1 0; height: 13px; display: block; }
.tI-legend-labels { display: flex; margin-top: 4px; }
.tI-legend-labels span { flex: 1 1 0; text-align: center; font-size: 9.5px; color: var(--ink-soft); }
.tI-terms { display: flex; align-items: center; gap: 6px; }
.tI-term { text-align: center; flex: 1 1 0; }
.tI-term .badge { --bs: 40px; margin: 0 auto 5px; }
.tI-term p { font-size: 9.5px; line-height: 1.24; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--accent); }
.tI-plus { font-size: 17px; font-weight: 700; color: var(--accent); flex: none; }


/* ==========================================================================
   19. TEMPLATE J - HUB AND SPOKE                 (page 18)
   ========================================================================== */

.tJ { position: absolute; inset: 0; background: linear-gradient(180deg, #FFFFFF, #F3F7F1); }
.tJ-hub { position: absolute; display: grid; place-items: center; }
.tJ-hub .orbit { position: absolute; inset: 0; }
.tJ-item { position: absolute; display: flex; gap: 12px; align-items: flex-start; width: 300px; }
.tJ-item--r { flex-direction: row-reverse; text-align: right; }
.tJ-item .badge { --bs: 58px; }
.tJ-item h4 { font-family: var(--f-head); font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-bottom: 4px; }
.tJ-item p  { font-size: 12.5px; line-height: 1.38; }
.tJ-links { position: absolute; inset: 0; pointer-events: none; }
.tJ-links svg { width: 100%; height: 100%; overflow: visible; }


/* ==========================================================================
   20. TEMPLATE K - SPLIT DIAGONAL COLLAGE        (pages 20, 36, 37)
   ========================================================================== */

.tK { position: absolute; inset: 0; background: var(--green-mist); }
.tK-left { position: absolute; left: 0; top: 0; bottom: 0; width: 512px; background: #F4F8F1; z-index: 2; }
.tK-left-inner { position: absolute; inset: 0; padding: 54px 44px; }
.tK-rows { margin-top: 26px; }
.tK-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 17px; }
.tK-row .badge { --bs: 44px; }
.tK-row h4 { font-family: var(--f-head); font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-bottom: 3px; }
.tK-row p  { font-size: 12.8px; line-height: 1.4; }
.tK-collage { position: absolute; right: 0; top: 0; bottom: 0; left: 470px; }
.tK-collage .photo { position: absolute; border-radius: 0; }
.tK-cut { clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%); }


/* ==========================================================================
   21. TEMPLATE L - WHEEL + TWO NUMBERED COLUMNS
                                (pages 21, 22, 26, 27, 33)
   ========================================================================== */

.tL { position: absolute; inset: 0; background: #F2F3F1; }
.tL-wheel { position: absolute; }
.tL-wheel svg { width: 100%; height: 100%; overflow: visible; }
.tL-wheel-hub {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    text-align: center; width: 58%;
}
.tL-wheel-hub b {
    display: block; font-family: var(--f-display); font-weight: 800;
    font-size: 44px; line-height: 1; color: var(--navy-deep); letter-spacing: -.01em;
}
.tL-wheel-hub em { display: block; font-style: normal; font-family: var(--f-head); font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: .03em; }
.tL-wheel-hub span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); }
.tL-seg-label {
    font-family: var(--f-head); font-size: 13px; font-weight: 700;
    fill: #fff; text-anchor: middle;
}
.tL-col { position: absolute; width: 380px; }
.tL-item { display: flex; gap: 13px; align-items: flex-start; padding: 9px 0; }
.tL-item + .tL-item { border-top: 1px solid var(--line); }
.tL-item .badge { --bs: 52px; }
.tL-item h4 {
    font-family: var(--f-head); font-size: 13.5px; font-weight: 800;
    letter-spacing: .02em; text-transform: uppercase; margin-bottom: 3px;
}
.tL-item p { font-size: 11.8px; line-height: 1.36; }
.tL-col--r .tL-item { flex-direction: row-reverse; text-align: right; }


/* ==========================================================================
   22. TEMPLATE M - ILLUSTRATED SCENE             (page 23 HAZOP)
   ========================================================================== */

.tM { position: absolute; inset: 0; background: linear-gradient(180deg, #EAF3FB, #D6E7F5); }
.tM-card { position: absolute; border-radius: var(--r-lg); padding: 16px 18px; }
.tM-card--blue { background: #1E5F9E; color: #fff; }
.tM-card--blue h4 { color: #fff; }
.tM-card--blue .blist li { color: rgba(255,255,255,.94); }
.tM-card--blue .blist li::before { background: #fff; }
.tM-q { position: absolute; display: flex; align-items: center; gap: 12px; }
.tM-q h4 { font-family: var(--f-head); font-size: 17px; font-weight: 800; color: var(--navy-deep); line-height: 1.2; }


/* ==========================================================================
   23. TEMPLATE N - DATA DASHBOARD                (page 24 QRA)
   ========================================================================== */

.tN { position: absolute; inset: 0; background: #fff; }
.tN-header { position: absolute; left: 0; right: 0; top: 0; height: 118px; background: var(--navy-deep); }
.tN-header .photo { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0; }
/* the unfilled Canva frame on the source page - reproduced exactly as found */
.tN-placeholder {
    position: absolute;
    background: #CFE0EF;
    border-radius: var(--r-sm);
}
.tN-block { position: absolute; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 12px 14px; }
.tN-block > .pill { position: absolute; top: -14px; left: 14px; font-size: 12px; padding: 5px 13px 6px; }
.tN-chart { width: 100%; height: 100%; }
.tN-take {
    position: absolute; background: var(--navy-deep); color: #fff;
    border-radius: var(--r-md); padding: 12px 16px;
}
.tN-take h4 { color: #fff; }


/* ==========================================================================
   24. TEMPLATE O - PHOTO HERO + NUMBERED COLUMNS
                          (pages 25, 29, 30, 31, 32)
   ========================================================================== */

.tO { position: absolute; inset: 0; background: #10161C; }
.tO-hero { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.tO-hero .photo { position: absolute; inset: 0; border-radius: 0; }
.tO-wedge {
    position: absolute; background: rgba(244,245,240,.94);
}
.tO-body { position: absolute; left: 0; right: 0; bottom: 0; }
.tO-cols { display: flex; gap: 14px; }
.tO-col { flex: 1 1 0; }
.tO-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tO-col-n {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--accent); color: #fff;
    font-family: var(--f-head); font-weight: 800; font-size: 14px;
}
.tO-col h4 { font-family: var(--f-head); font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tO-badge-row { display: flex; gap: 14px; align-items: center; }
.tO-stripe {
    background: repeating-linear-gradient(45deg, #F2B705 0 14px, #1A1A1A 14px 28px);
    padding: 3px; border-radius: var(--r-sm);
}
.tO-stripe > span {
    display: block; background: #1A1A1A; color: #F2B705;
    padding: 7px 16px; border-radius: 4px;
    font-family: var(--f-head); font-size: 15px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
}


/* ==========================================================================
   25. TEMPLATE P - DRAWING THUMBNAILS            (page 34)
   ========================================================================== */

.tP { position: absolute; inset: 0; background: var(--paper); }
.tP-grid { position: absolute; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tP-thumb { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.tP-thumb img { width: 100%; height: auto; display: block; }
.tP-thumb figcaption {
    padding: 6px 10px 7px; text-align: center;
    font-family: var(--f-head); font-size: 12px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: #fff; background: var(--green-deep);
}


/* ==========================================================================
   26. TEMPLATE Q - LEARNING BOARD                (pages 38, 39, 40)
   Hybrid by instruction: the frame, title band and section headings are
   rebuilt in HTML/CSS; the dense bilingual interior is kept as the original
   board image, contained inside the recreated frame and never upscaled past
   its native resolution.
   ========================================================================== */

.tQ { position: absolute; inset: 0; background: #F4F7F2; }
.tQ-frame {
    position: absolute; inset: 10px;
    border: 5px solid var(--green-deep);
    border-radius: var(--r-sm);
    background: #fff;
    overflow: hidden;
}
.tQ-titlebar {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 9px 18px 10px;
    background: var(--green-deep);
    color: #fff; text-align: center;
}
.tQ-titlebar h2 {
    font-family: var(--f-display); font-size: 32px; font-weight: 800;
    letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.06;
}
.tQ-titlebar .hi { font-family: var(--f-deva); font-size: 17px; font-weight: 600; color: #DCEBD6; display: block; margin-top: 2px; }
.tQ-titlebar .en { font-size: 13px; color: rgba(255,255,255,.86); display: block; }
.tQ-interior {
    position: absolute; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
}
/* image-rendering left at auto: the board is never scaled beyond native */
.tQ-interior img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.tQ-note {
    position: absolute; right: 14px; bottom: 8px;
    font-size: 10.5px; color: var(--ink-soft);
}


/* ==========================================================================
   27. TEMPLATE R - CLIENT DIRECTORY              (page 41)
   ========================================================================== */

.tR { position: absolute; inset: 0; background: var(--paper); }
.tR-grid { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tR-item {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 8px 12px;
    min-height: 58px;
}
.tR-logo { width: 62px; height: 42px; flex: none; display: grid; place-items: center; }
.tR-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tR-item::after { content: none; }
.tR-sep { width: 1px; align-self: stretch; background: var(--line); flex: none; }
.tR-name { font-size: 12.6px; font-weight: 600; line-height: 1.28; color: var(--ink); }


/* ==========================================================================
   28. TEMPLATE S - CLOSING                       (page 42)
   ========================================================================== */

.tS { position: absolute; inset: 0; background: #fff; }
.tS-lockup { position: absolute; left: 50%; transform: translateX(-50%); width: 300px; }
.tS-title {
    position: absolute; left: 0; right: 0; text-align: center;
    font-family: var(--f-display); font-weight: 800;
    font-size: 92px; line-height: .96; letter-spacing: -.02em; text-transform: uppercase;
}
.tS-title .l1 { color: var(--green-deep); }
.tS-title .l2 { color: var(--red); }
.tS-values { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.tS-value { flex: 0 1 300px; text-align: center; position: relative; padding: 0 20px; }
.tS-value + .tS-value::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 1px; height: 62px; background: var(--green-mid); opacity: .5;
}
.tS-value .badge { --bs: 54px; margin: 0 auto 10px; }
.tS-value p {
    font-family: var(--f-head); font-size: 15px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--green-deep);
}


/* ==========================================================================
   FIT-TO-WIDTH

   The PDFs embed no fonts, so the display face is a visual match rather than
   the original. Any heading whose exact source width was measured carries
   data-fit="<width in design px>"; site.js measures the natural width in the
   actual rendering font and sets --fit so the line lands on the source width
   precisely. Font substitution can then never shift the composition.
   ========================================================================== */
.fit {
    display: inline-block;
    white-space: nowrap;
    transform: scaleX(var(--fit, 1));
    transform-origin: left center;
}
.fit--c { transform-origin: center center; }
.fit--r { transform-origin: right center; }


/* ==========================================================================
   90. RESPONSIVE

   At 1200 and up the 1440 x 810 stage is scaled as a unit, so the page
   overlays the PDF, and above 1440 it keeps growing so a wide window is
   filled edge to edge rather than showing a 1440 island in a sea of empty
   margin. Below 1200 that scaling would put the page's body copy under
   ~12px, so the stage is abandoned entirely and the page REFLOWS.

   The breakpoint is 1200, not 900: at 1024 the scaled stage rendered its
   lists at 9px, which is what "the sections become too small" was.

   Reflow is possible because every string is real HTML in document order and
   every shape is CSS or SVG - nothing is baked into a picture. Absolutely
   positioned children return to normal flow and stack vertically, keeping
   the same colours, the same imagery, the same section order and the same
   typographic hierarchy. Nothing is shrunk into an unreadable miniature.
   ========================================================================== */

/* ---------- 1440 and up: 1:1 with the source --------------------------- */
@media (min-width: 1500px) {
    .profile-deck { padding-top: 10px; }
}

/* ---------- 1200 - 1439: stage scaled as a unit ------------------------ */
@media (max-width: 1439px) and (min-width: 1200px) {
    .pdf-page { margin-bottom: 16px; }
}

/* ---------- below 1200: reflow ----------------------------------------- */
@media (max-width: 1199px) {

    body.is-reflow .composition {
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: var(--r-md);
        background: var(--paper);
    }

    body.is-reflow .stage {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        overflow: visible;
        padding: 20px 18px 24px;
    }

    /* Template roots stop being full-bleed canvases and become sections. */
    body.is-reflow .stage > [class^="t"] {
        position: static;
        inset: auto;
        display: block;
    }

    /* Everything the templates positioned by coordinate returns to flow.
       Excluded: pseudo-decoration hosts, media boxes and anything inside an
       SVG, which keeps its own coordinate system. */
    body.is-reflow .stage [class^="t"] > *,
    body.is-reflow .stage [class*=" t"] > * {
        position: static;
        inset: auto;
        left: auto; right: auto; top: auto; bottom: auto;
        width: auto;
        max-width: 100%;
        height: auto;
        transform: none;
        margin-bottom: 14px;
    }

    body.is-reflow .stage svg,
    body.is-reflow .stage svg * {
        position: static;
    }
    body.is-reflow .stage .badge {
        width: var(--bs);
        height: var(--bs);
        flex: none;
    }
    /* An inline host cannot take a height, so a bare sized SVG would grow to
       the column width. Any span that directly wraps an SVG becomes a block. */
    body.is-reflow .stage span > svg { max-width: 100%; height: auto; }
    body.is-reflow .stage span:has(> svg):not(.badge) { display: inline-block; }

    /* Fit-to-width is a desktop-only device; on mobile the type sets normally. */
    body.is-reflow .fit {
        transform: none !important;
        white-space: normal;
        display: block;
    }

    /* Photographs become responsive blocks rather than positioned fills.
       Logos, wordmarks and other line art keep their aspect and are never
       cropped - only photographic fills are. */
    body.is-reflow .stage .photo {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: 46vh;
        border-radius: var(--r-md);
        overflow: hidden;
    }
    body.is-reflow .stage .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body.is-reflow .stage img {
        position: static;
        width: auto;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
    body.is-reflow .stage .tQ-interior img { max-height: none; width: 100%; }

    /* Full-bleed background photographs that carry no content become a
       banner at the head of the reflowed section instead of a backdrop. */
    body.is-reflow .stage .tC-bg,
    body.is-reflow .stage .tO-hero,
    body.is-reflow .stage .tG-bg {
        position: relative;
        height: 190px;
        margin-bottom: 16px;
        border-radius: var(--r-md);
        overflow: hidden;
    }
    body.is-reflow .stage .tC-bg .photo,
    body.is-reflow .stage .tO-hero .photo,
    body.is-reflow .stage .tG-bg .photo {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        max-height: none;
        margin: 0;
    }

    /* Purely decorative page furniture is dropped rather than stacked:
       chevron frames, dot grids, skylines and orbit rings carry no content
       and only add noise once the composition is linear. */
    body.is-reflow .stage .tA-frame,
    body.is-reflow .stage .tA-sky,
    body.is-reflow .stage .dotgrid,
    body.is-reflow .stage .tA-dotsgrid,
    body.is-reflow .stage .orbit,
    body.is-reflow .stage .tD-orbit svg,
    body.is-reflow .stage .tJ-links,
    body.is-reflow .stage .tG-frame { display: none; }

    /* The cover reads as a masthead. */
    body.is-reflow .pg-01 .tA-core { text-align: center; }
    body.is-reflow .pg-01 .tA-mark { width: 96px; margin: 4px auto 10px; }
    body.is-reflow .pg-01 .tA-word { width: 100%; max-width: 380px; margin: 0 auto 4px; }
    body.is-reflow .pg-01 .tA-word img { width: 100%; height: auto; }
    body.is-reflow .pg-01 .tA-div { justify-content: center; padding-left: 0; }
    body.is-reflow .pg-01 .tA-pin { display: block; width: 34px; height: 44px; margin: 2px auto 4px; }
    body.is-reflow .pg-01 .tA-office,
    body.is-reflow .pg-01 .tA-addr { padding-left: 0; text-align: center; }
    body.is-reflow .pg-01 .tA-hr { width: 180px; margin: 4px auto 14px; }
    body.is-reflow .pg-01 .tA-val { display: flex; align-items: center; gap: 14px; text-align: left; }
    body.is-reflow .pg-01 .tA-val .badge { margin: 0; }
    body.is-reflow .pg-01 .tA-val-label::after { margin-left: 0; }

    /* Our Services overview - the generic rules above already turn the nine
       cards and the value strip into a clean vertical stack with their card
       borders/shadow intact; the touches below are only for elements the
       generic reset leaves too large, empty of padding, or leftover in a
       coordinate system that no longer applies (the desktop-only condensed
       title transform, the value-strip's absolutely-positioned dividers). */
    body.is-reflow .pg-02 .tB-head { margin-bottom: 10px; }
    body.is-reflow .pg-02 .tB-title {
        position: static;
        font-size: 34px;
        line-height: 1.1;
        white-space: normal;
        margin: 4px 0;
    }
    body.is-reflow .pg-02 .tB-rule { width: 140px; margin: 4px auto 10px; }
    body.is-reflow .pg-02 .tB-leaf { display: none; }
    body.is-reflow .pg-02 .tB-strap { white-space: normal; }

    body.is-reflow .pg-02 .tB-card { padding: 18px 16px; }
    body.is-reflow .pg-02 .tB-pill {
        display: inline-block;
        padding: 7px 16px;
        font-size: 15px;
        margin-bottom: 10px;
    }
    body.is-reflow .pg-02 .tB-badge { margin: 0 0 10px; }
    body.is-reflow .pg-02 .tB-brsr { white-space: normal; margin-bottom: 8px; }
    body.is-reflow .pg-02 .tB-art { margin-top: 10px; max-height: 160px; object-fit: contain; }

    body.is-reflow .pg-02 .tB-values { padding: 18px; }
    body.is-reflow .pg-02 .tB-value {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
        margin-bottom: 16px;
    }
    body.is-reflow .pg-02 .tB-value:last-child { margin-bottom: 0; }
    body.is-reflow .pg-02 .tB-vbadge { margin: 0; }
    body.is-reflow .pg-02 .tB-value::before { display: none; }

    /* Closing page. */
    body.is-reflow .pg-42 .tS-lockup { position: static; transform: none; width: 220px; margin: 0 auto 16px; }
    body.is-reflow .pg-42 .tS-value { display: flex; align-items: center; gap: 14px; text-align: left; }
    body.is-reflow .pg-42 .tS-value .badge { margin: 0; }

    /* Multi-column rows stack. */
    body.is-reflow .stage .step-row,
    body.is-reflow .stage .tC-steps,
    body.is-reflow .stage .tB-cols,
    body.is-reflow .stage .tB-col,
    body.is-reflow .stage .tF-process,
    body.is-reflow .stage .tF-benefits,
    body.is-reflow .stage .tE-benefits,
    body.is-reflow .stage .tE-pillars,
    body.is-reflow .stage .tO-cols,
    body.is-reflow .stage .tI-terms,
    body.is-reflow .stage .tA-values,
    body.is-reflow .stage .tS-values {
        display: block;
    }
    body.is-reflow .stage .tC-step,
    body.is-reflow .stage .tF-proc,
    body.is-reflow .stage .tF-benefit,
    body.is-reflow .stage .tE-benefit,
    body.is-reflow .stage .tO-col,
    body.is-reflow .stage .tA-val,
    body.is-reflow .stage .tS-value {
        width: auto;
        padding: 0 0 14px;
        text-align: left;
    }
    body.is-reflow .stage .tC-step + .tC-step::before,
    body.is-reflow .stage .tA-val + .tA-val::before,
    body.is-reflow .stage .tS-value + .tS-value::before,
    body.is-reflow .stage .tE-benefit + .tE-benefit::before,
    body.is-reflow .stage .tB-value + .tB-value::before { content: none; }

    body.is-reflow .stage .tH-grid,
    body.is-reflow .stage .tP-grid,
    body.is-reflow .stage .tR-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Display type steps down but keeps its hierarchy and colour. */
    body.is-reflow .stage .d-title,
    body.is-reflow .stage h2 { font-size: clamp(28px, 7.4vw, 44px); line-height: 1.04; }
    body.is-reflow .stage h3 { font-size: clamp(18px, 4.6vw, 24px); }
    body.is-reflow .stage h4 { font-size: clamp(15px, 3.9vw, 18px); }
    body.is-reflow .stage p,
    body.is-reflow .stage li  { font-size: 15px; line-height: 1.5; }

    /* Header and profile bar compress. */
    .header-inner { padding: 0 14px; gap: 12px; }
    .nav-list { display: none; }
    .nav-toggle { display: grid; }
}

@media (max-width: 560px) {
    body.is-reflow .stage { padding: 16px 14px 20px; }
    .profile-tag .profile-name { display: none; }
}

.footer-addr a { text-decoration: none; }
.footer-addr a:hover { color: #fff; text-decoration: underline; }


/* ==========================================================================
   07-0. TIER 1 / TIER 2 - dark strips above the main nav

   Tier 1: tagline (left) - profile switch (true-centered) - WhatsApp enquire
   link (right). Tier 2: phone/email (left) - social links (right).
   ========================================================================== */

/* Tier 1 stays pinned through scroll (its own mini sticky bar, above
   Tier 3's sticky nav); Tier 2 is the one that collapses away - see
   .tier-2.is-collapsed below and the scroll handler in site.js that toggles
   it. --tier1-h is measured at runtime (site.js) so Tier 3's own sticky
   offset always sits flush under Tier 1 without a hardcoded pixel guess. */
/* Premium pumpkin/tangerine - deliberately a different, richer shade than
   --orange (PSM's own accent) so PSM's active dot/underline doesn't sit
   invisibly on a same-toned background; see the psm-on-tier-1 override
   below, same fix as before for the same reason. */
.tier-1 { position: sticky; top: 0; z-index: 70; background: #F2600C; }

/* Dark midnight / Prussian blue - reuses the same --navy-deep token PSM's
   own dark panels already use, rather than a new one-off color. */
.tier-2 {
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    max-height: var(--tier2-h, 60px);
    transition: max-height .32s var(--ease), opacity .26s var(--ease), border-color .32s var(--ease);
}
.tier-2.is-collapsed {
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent;
}

.tier-1-inner, .tier-2-inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Bar heights matched to the JTC reference: 46px announcement bar, 36px
   contact/social bar, 80px main header (.mainnav-inner below). Set on the
   *-inner element (not the outer .tier-1/.tier-2) since that's the flex box
   .topbar-profile's absolute centering is measured against on desktop. */
.tier-1-inner { min-height: 34px; }
.tier-2-inner { min-height: 36px; }

/* JTC hides its contact/social bar below md (768px) entirely, leaning on
   the floating WhatsApp/call buttons for mobile contact instead - same
   reasoning already applied to just the enquire link/label at 899px below. */
@media (max-width: 767px) {
    .tier-2 { display: none; }
}

.tier-1-tagline {
    margin: 0;
    font-family: var(--f-head);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

/* True-centered regardless of the tagline/enquire-link widths on either side. */
.tier-1-inner .topbar-profile {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.tier-2-social { display: flex; align-items: center; gap: 12px; }
.tier-2-social-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    margin-right: 2px;
}
.tier-2-social a {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    /* Solid white glyph, no chip behind it. The brand colour is held back for
       hover, where it is applied to the glyph itself rather than a background. */
    background: transparent;
    color: #fff;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tier-2-social svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Each platform's real brand colour, revealed on hover only - the row reads as
   one calm set of white glyphs at rest and identifies itself on interaction.
   :focus-visible mirrors hover so keyboard users get the same cue. */
.tier-2-social a[aria-label="Facebook"]:hover,
.tier-2-social a[aria-label="Facebook"]:focus-visible { color: #1877F2; }
.tier-2-social a[aria-label="Instagram"]:hover,
.tier-2-social a[aria-label="Instagram"]:focus-visible { color: #E4405F; }
.tier-2-social a[aria-label="LinkedIn"]:hover,
.tier-2-social a[aria-label="LinkedIn"]:focus-visible { color: #0A66C2; }
.tier-2-social a[aria-label="X (Twitter)"]:hover,
.tier-2-social a[aria-label="X (Twitter)"]:focus-visible { color: #fff; }
.tier-2-social a[aria-label="YouTube"]:hover,
.tier-2-social a[aria-label="YouTube"]:focus-visible { color: #FF0000; }

.tier-2-social a:hover { transform: translateY(-2px); }

/* Specificity note: plain .tier-2-enquire (one class) loses to the more
   general .tier-2-social a / .tier-2-social svg (class+element) rules above
   regardless of source order, since those match every link in this row too -
   the icon was rendering at zero width with the wrong color as a result.
   Qualifying with the parent class here outranks them on purpose. */
.tier-2-social .tier-2-enquire {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    gap: 6px;
    margin-left: 10px;
    padding-left: 12px;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, .18);
    background: none;
    font-family: var(--f-head);
    font-size: 12.5px;
    font-weight: 600;
    color: #25D366;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tier-2-social .tier-2-enquire:hover {
    color: #2FE07A;
    background: none;
    transform: translateY(-1px);
}
.tier-2-social .tier-2-enquire svg {
    width: 15px; height: 15px;
    fill: currentColor; stroke: none;
    /* Two quick beats then a rest, like a pulse - draws the eye to WhatsApp
       without the constant motion of a plain loop. */
    animation: wa-heartbeat 1.6s var(--ease) infinite;
}
@keyframes wa-heartbeat {
    0%, 28%, 70%, 100% { transform: scale(1); }
    14%, 42%           { transform: scale(1.22); }
}
/* Hover replaces the beat with a steady lift, so the two do not fight over
   transform (an animation always outranks a plain declaration). */
.tier-2-social .tier-2-enquire:hover svg { animation: none; transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
    .tier-2-social .tier-2-enquire svg { animation: none; }
}

/* --- Topbar contact links (sits alongside the profile switch) ------------ */

.topbar-contact { display: flex; align-items: center; gap: 18px; }
.topbar-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    transition: color var(--dur) var(--ease);
}
.topbar-contact-link:hover { color: #fff; }
.topbar-contact-link svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* --- Floating WhatsApp / call actions ------------------------------------- */

.floating-actions {
    position: fixed;
    left: 18px;
    /* 18px clear of the fixed bottom bar (46px) below, not the viewport edge. */
    bottom: 64px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity var(--dur) var(--ease);
}
/* Set by updateFloatingOverlap() in site.js whenever a card/form/map/footer
   element's actual on-screen rect intersects this fixed corner - a static
   offset can't guarantee that never happens across every scroll position and
   viewport width, so this fades the buttons out for exactly that moment
   instead of letting them sit visibly on top of real content. */
.floating-actions.is-content-clash { opacity: 0; pointer-events: none; }
.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(16, 24, 32, .28);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.floating-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 24, 32, .34); }
.floating-btn svg { width: 24px; height: 24px; fill: #fff; }
.floating-whatsapp {
    background: #25D366;
    animation: floatWhatsapp 2.4s ease-in-out infinite;
}
/* Pausing on hover (rather than letting hover's own transform fight the
   keyframe's) is what keeps the lift-on-hover from Site.Master's other
   floating buttons feeling smooth here too, instead of stuttering. */
.floating-whatsapp:hover { animation-play-state: paused; }
@keyframes floatWhatsapp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .floating-whatsapp { animation: none; }
}
.floating-call { background: var(--green-forest); }
body[data-profile="psm"] .floating-call { background: var(--navy-deep); }

/* --- Back to top ----------------------------------------------------------- */

.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 64px;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--line-strong, var(--line));
    box-shadow: 0 6px 18px rgba(16, 24, 32, .18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* See .floating-actions.is-content-clash above - same guard, same reason. */
.back-to-top.is-visible.is-content-clash { opacity: 0; pointer-events: none; }
.back-to-top:hover { border-color: var(--green-forest); }
body[data-profile="psm"] .back-to-top:hover { border-color: var(--orange); }

/* Ring sits behind the arrow, filling the whole button; rotated so the fill
   starts at 12 o'clock instead of SVG's default 3 o'clock start point. */
.back-to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.back-to-top-ring-track {
    fill: none;
    stroke: var(--line-strong, var(--line));
    stroke-width: 2;
    opacity: .6;
}
.back-to-top-ring-fill {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2;
    stroke-linecap: round;
    /* Circumference for r=21 (2 * pi * 21 = 131.947): the whole ring is drawn
       but hidden by an equal-length gap, then site.js pulls the gap back via
       stroke-dashoffset as the user scrolls (0 = empty, 131.947 = full). */
    stroke-dasharray: 131.947;
    stroke-dashoffset: 131.947;
    transition: stroke-dashoffset .1s linear;
}
@media (prefers-reduced-motion: reduce) { .back-to-top-ring-fill { transition: none; } }

.back-to-top-arrow { position: relative; z-index: 1; width: 18px; height: 18px; fill: var(--green-forest); }
body[data-profile="psm"] .back-to-top-arrow { fill: var(--orange); }

/* --- Fixed bottom bar, matched to the JTC reference bar ------------------ */

/* Shared with .enq-panel below, which anchors to the top of this bar - one
   definition per breakpoint instead of the same pixel height living twice. */
:root { --bottombar-h: 44px; }

.bottom-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    height: var(--bottombar-h);
    background: var(--navy-deep);
    border-top: 1px solid rgba(255, 255, 255, .1);
    transition: transform var(--dur) var(--ease);
}
/* Slid out of the way while the Footer is in view - see bindBottomBarFooterVisibility()
   in site.js, which toggles this from an IntersectionObserver on #siteFooter so the
   fixed bar never sits over the Footer's own content (incl. the last "Designed By"
   line). Transform-only so it never affects layout/scroll height. */
.bottom-bar.is-footer-visible {
    transform: translateY(100%);
}

.bottom-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    /* Left padding clears the floating WhatsApp/call buttons parked over
       this end of the bar - see .floating-actions' own left offset. */
    padding: 0 0 0 92px;
}

.bottom-bar-contact { flex: none; gap: 16px; }
/* Full white here (base .topbar-contact-link is 92% white) - a small bump,
   but this bar's own text/icons are otherwise all fully opaque, so this one
   was the odd one out. */
.bottom-bar-contact .topbar-contact-link { color: #fff; }

/* Deliberately lighter than Tier 2's bold brand-color badges above - small,
   translucent, low-contrast-on-purpose icons, matching the reference's
   restrained treatment instead of repeating the heavier one. */
.bottom-bar-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.bottom-bar-social-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .68);
    white-space: nowrap;
}
/* Same treatment as .tier-2-social above: solid white glyphs at rest, no chip,
   each platform's brand colour revealed only on hover/focus. Size unchanged. */
.bottom-bar-social a {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bottom-bar-social a[aria-label="Facebook"]:hover,
.bottom-bar-social a[aria-label="Facebook"]:focus-visible { color: #1877F2; }
.bottom-bar-social a[aria-label="Instagram"]:hover,
.bottom-bar-social a[aria-label="Instagram"]:focus-visible { color: #E4405F; }
.bottom-bar-social a[aria-label="LinkedIn"]:hover,
.bottom-bar-social a[aria-label="LinkedIn"]:focus-visible { color: #0A66C2; }
.bottom-bar-social a[aria-label="X (Twitter)"]:hover,
.bottom-bar-social a[aria-label="X (Twitter)"]:focus-visible { color: #fff; }
.bottom-bar-social a[aria-label="YouTube"]:hover,
.bottom-bar-social a[aria-label="YouTube"]:focus-visible { color: #FF0000; }
.bottom-bar-social a:hover { transform: translateY(-2px); }
.bottom-bar-social svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.bottom-bar-enquiry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 100%;
    padding: 0 24px;
    border: none;
    background: #F2600C;
    font-family: var(--f-head);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.bottom-bar-enquiry:hover { background: #D8540A; }
.bottom-bar-enquiry-briefcase { width: 15px; height: 15px; flex: none; }
.bottom-bar-enquiry-icon { width: 15px; height: 15px; flex: none; transition: transform var(--dur) var(--ease); }
.bottom-bar-enquiry[aria-expanded="true"] .bottom-bar-enquiry-icon { transform: rotate(180deg); }

@media (max-width: 1080px) {
    .bottom-bar-contact { display: none; }
}

@media (max-width: 899px) {
    :root { --bottombar-h: 42px; }
    .bottom-bar-inner { padding-left: 68px; gap: 8px; }
    .bottom-bar-social-label { display: none; }
    .bottom-bar-enquiry { padding: 0 14px; font-size: 12px; gap: 5px; }
}

@media (max-width: 480px) {
    .bottom-bar-inner { padding-left: 60px; }
    .bottom-bar-social { gap: 6px; }
    .bottom-bar-enquiry span { display: none; }
    .bottom-bar-enquiry { padding: 0 13px; gap: 4px; }
}

/* --- Enquiry panel ------------------------------------------------- */

.enq-overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(3, 10, 20, .68);
}
.enq-overlay[hidden] { display: none; }

/* Set on <body> for as long as the popup is open (openEnquiryPanel()/
   closeEnquiryPanel() in site.js), so the page behind the overlay can't
   be scrolled while it's up. */
body.enq-lock { overflow: hidden; }

/* Centered modal, matched to the reference screenshot: white card with a
   dark full-screen backdrop (.enq-overlay above), fixed to the middle of
   the viewport rather than anchored to the bottom bar. Still the exact
   same #enqPanel every data-enq-trigger opens - see Assets/js/site.js - only
   this element's own position/transform changed.
   The transition stays at .5s to match closeEnquiryPanel()'s hardcoded
   500ms hide-after-close timeout in site.js - changing one without the
   other would cut the closing animation short. */
.enq-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 190;
    width: min(400px, calc(100% - 24px));
    max-height: min(680px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -12px rgba(3, 10, 20, .45);
    overflow: hidden;
    transform: translate(-50%, -50%) scale(.94);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.enq-panel[hidden] { display: none; }
.enq-panel.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .enq-panel { transition: none; } }

/* Positioned relative to .enq-panel-head itself (child of it, not a
   sibling before it) so it lines up with the heading regardless of the
   header's own height - no separate pixel math to keep in sync. */
.enq-panel-close {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.enq-panel-close:hover { background: rgba(255, 255, 255, .18); }
.enq-panel-close svg { width: 18px; height: 18px; }

/* Blue banner with a wavy bottom edge, matching the reference card: the
   curve is a plain white ellipse pinned to the bottom of this (clipped)
   header, not an SVG/image - one shape, no extra asset. */
.enq-panel-head {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    text-align: left;
    background: #F26A10;
}
.enq-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--f-head);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}
.enq-head-mail { width: 20px; height: 20px; flex: none; }

.enq-panel-body { flex: 1; overflow-y: auto; padding: 10px 24px 24px; }
.enq-panel-body .form-field { margin-bottom: 14px; }

/* Scoped to the popup only - Contact.aspx's own form shares .form-field
   and keeps its existing white background/spacing untouched. */
/* Popup field styling lives after the shared .form-field rules below, so it
   is not overridden by them - see the .enq-panel-body block there. */

.enq-phone-row { display: flex; }
.enq-country-code {
    flex: none;
    display: flex; align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    background: var(--paper);
    font-size: 0.875rem;
    color: var(--ink);
}
/* Real India flag (tricolour + a simplified Ashoka Chakra), not a generic
   globe icon - accurate at a glance even at this small size. */
.flag-in {
    flex: none;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    outline: 1px solid rgba(0, 0, 0, .12);
    outline-offset: -0.5px;
}
.enq-phone-row input { flex: 1; min-width: 0; }
.enq-country-arrow { width: 14px; height: 14px; flex: none; opacity: .7; }

/* Custom listbox for the Service field, matched to the JTC reference's own
   compact dropdown card (fixed-height scroll list, hover-highlighted rows)
   in Safety Info's own orange rather than JTC's blue. The real <select>
   stays in the DOM (visually-hidden) as the field's actual value carrier -
   see bindEnquiryServiceSelect() in site.js. */
.enq-service-select { position: relative; }

.enq-service-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--paper);
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
}
.enq-service-trigger.has-value { color: var(--ink); }
.enq-service-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enq-service-trigger-arrow {
    width: 16px; height: 16px; flex: none;
    transition: transform var(--dur) var(--ease);
}
.enq-service-trigger[aria-expanded="true"] .enq-service-trigger-arrow { transform: rotate(180deg); }

.enq-service-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 20;
    height: 150px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: 0 10px 24px -8px rgba(10, 13, 16, .28);
}
/* Inside the compact popup specifically (not Contact.aspx's own inline
   dropdown, which keeps opening downward), this field sits near the bottom
   of a short card - opens upward instead so the list stays inside the
   popup rather than spilling past its bottom edge. */
.enq-panel .enq-service-list {
    top: auto;
    bottom: calc(100% + 4px);
}
.enq-service-list[hidden] { display: none; }

.enq-service-option {
    padding: 9px 10px;
    border-radius: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink-body);
    cursor: pointer;
}
.enq-service-option:hover,
.enq-service-option.is-active {
    background: rgba(242, 96, 12, .1);
}
.enq-service-option.is-selected {
    background: rgba(242, 96, 12, .14);
    color: #F2600C;
    font-weight: 600;
}

/* .enq-check is a <label>, and on Contact.aspx it sits inside a .form-field
   like every other field label - .form-field label's display:block (element
   + class, (0,1,1)) otherwise beats this rule's bare class, (0,1,0)), which
   was breaking the row into checkbox-above-text. .form-field .enq-check
   raises the specificity enough to always win, in both the popup (no
   .form-field ancestor - the bare .enq-check rule below still applies
   there) and the Contact page form. Same fix shape for the checkbox itself:
   .form-field input's width:100% (also (0,1,1)) was stretching it to the
   full row width - input[type="checkbox"] below is scoped to only ever
   match the checkbox, never the other text/email/tel inputs. */
.enq-check,
.form-field .enq-check {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-body);
}
.enq-check input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    /* 1px nudge lines the box up with the cap height of the first text line,
       which matters now the row is top-aligned for wrapped labels. */
    margin: 1px 0 0;
    accent-color: var(--green-forest);
    cursor: pointer;
}
body[data-profile="psm"] .enq-check input[type="checkbox"] { accent-color: var(--navy-deep); }
.enq-check a { color: var(--green-forest); }
body[data-profile="psm"] .enq-check a { color: var(--navy-deep); }

.enq-submit { width: 100%; text-align: center; justify-content: center; }
/* Black, not .cta-button's site-wide green - matches the reference card's
   own submit button, scoped to this popup only. Two classes (not just
   .enq-submit) so this reliably beats .cta-button's own background-color
   regardless of which rule comes later in the cascade. */
.enq-submit.cta-button {
    background-color: #F26A10;
    border-radius: var(--r-lg);
    padding: 15px 24px;
    font-size: 0.9375rem;
    text-transform: none;
}
.enq-submit.cta-button:hover { background-color: #D95B08; }
.enq-panel-body .form-note { margin: 6px 0 14px; font-size: 0.75rem; }

@media (max-width: 480px) {
    .enq-panel-head { padding: 16px 16px 24px; }
    .enq-panel-body { padding: 8px 16px 20px; }
}

/* --- Footer: 4-column layout ------------------------------------------------ */

.footer-inner--cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px 32px;
    padding-bottom: clamp(20px, 2vw, 28px);
    text-align: left;
}
.footer-col--company { display: flex; flex-direction: column; gap: 14px; }
.footer-intro { font-size: 14px; line-height: 1.6; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.footer-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-col-title {
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }
/* Double-arrow marker, reusable and consistent by construction - one rule
   styles every .footer-links link, rather than a class applied by hand to
   each <a>. Contact Info's plain <p><a> links (address/phone/email/website)
   intentionally don't get one, matching the JTC reference. */
.footer-links a::before {
    content: "\00BB";
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .82);
}
.footer-col .footer-addr { margin-bottom: 10px; }
.footer-col > p { margin: 0 0 6px; font-size: 14px; }
.footer-col > p a { color: rgba(255,255,255,.72); }
.footer-col > p a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 899px) {
    .floating-actions { left: 12px; bottom: 58px; }
    .floating-btn { width: 44px; height: 44px; }
    .floating-btn svg { width: 20px; height: 20px; }
    .back-to-top { right: 12px; bottom: 58px; width: 40px; height: 40px; }

    .footer-inner--cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-col--company { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer-inner--cols { grid-template-columns: 1fr; }
    .topbar-contact-link:nth-child(2) { display: none; }
}


/* ==========================================================================
   07a. LEVEL 1 - PROFILE TABS (.ptab) - the bar itself is .tier-1 above
   ========================================================================== */

.ptab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* "Process Safety" is the longer label; both tabs share this width so
       they're identically sized rectangles regardless of text length. */
    min-width: 160px;
    padding: 11px 30px 12px;
    border-radius: 0;
    font-family: var(--f-head);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    background: none;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ptab + .ptab { margin-left: 6px; }
.ptab:hover { color: rgba(255, 255, 255, .9); }

/* Clean by default - no dot, no underline, no pill. The selected tab gets a
   full rectangular fill instead, per the reference - same background for
   either profile, so Environment and Process Safety stay visually
   identical; only the label text says which one is selected. */
.ptab.is-active { background: var(--green-leaf); color: #0A0D10; }

/* A profile that is built but not yet released. The tab stays in place so the
   structure of the site is honest, but it cannot be selected. */
.ptab.is-inactive,
.ptab.is-inactive:hover {
    color: rgba(255, 255, 255, .32);
    background: none;
    cursor: default;
}


/* ==========================================================================
   07b. LEVEL 2 - WHITE NAVIGATION
   ========================================================================== */

.mainnav {
    position: sticky;
    top: var(--tier1-h, 0px);
    z-index: 65;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(16, 24, 32, .04);
    transition: transform .3s var(--ease);
}
/* Slides up out of the way while a scroll is in progress and drops back down
   once scrolling has been idle for a moment - updateNavAutoHide() in site.js
   owns the class. Tier 1 sits above at z-index 70 and is opaque, so the bar
   tucks behind it rather than leaving a gap.
   Suppressed while the mobile menu is open: below 1200px #navMenu is
   position:fixed *inside* .mainnav, and a transform on an ancestor turns that
   ancestor into the containing block - the menu would anchor to the nav bar
   instead of the viewport. */
body:not(.nav-open) .mainnav.is-nav-hidden { transform: translateY(-100%); }

.mainnav-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 74px;
    display: flex;
    align-items: center;
    gap: 26px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 44px; height: auto; }
.brand-word { width: 152px; height: auto; }

/* #navMenu (not .nav-list) carries the auto-margin: nav-list's own auto-margin
   only has effect if its parent is wider than its content, and with no
   .nav-cta after it anymore, #navMenu shrink-wraps to nav-list's width - so
   without this, "flush right" had nothing to push against. */
#navMenu { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
    position: relative;
    display: block;
    padding: 9px 15px 10px;
    border-radius: var(--r-sm);
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .012em;
    color: #26333C;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--green-deep); background: var(--green-mist); }
.nav-link.is-active { color: var(--green-deep); }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 2px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--green-badge);
}
body[data-profile="psm"] .nav-link:hover { color: var(--navy-deep); background: #F1F4F8; }
body[data-profile="psm"] .nav-link.is-active { color: var(--navy-deep); }
body[data-profile="psm"] .nav-link.is-active::after { background: var(--orange); }

.nav-cta {
    margin-left: 6px;
    padding: 10px 20px 11px;
    border-radius: var(--r-pill);
    background: var(--green-badge);
    color: #fff;
    font-family: var(--f-head);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background-color var(--dur) var(--ease);
}
.nav-cta:hover { background: #2E8C3B; }
body[data-profile="psm"] .nav-cta { background: var(--orange); }
body[data-profile="psm"] .nav-cta:hover { background: #C4621A; }

.nav-toggle {
    display: none;
    width: 46px; height: 46px;
    margin-left: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    place-items: center;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    margin: 3.5px auto;
    background: var(--green-deep);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}


/* ==========================================================================
   07c. SINGLE-PAGE SECTIONS

   One document, six anchor sections. Nothing is routed and nothing is
   swapped out: blocks that belong to one profile carry .prof and are shown
   or hidden in place.
   ========================================================================== */

.anchor { scroll-margin-top: 90px; }
.prof[hidden] { display: none !important; }

/* .wrap and .section themselves are defined once, below, at "STEP 3 —
   DESIGN SYSTEM REFINEMENT" (search that heading) - this used to also have
   its own earlier .wrap/.section here, silently overridden by the later
   ones since both are unqualified single-class selectors at equal
   specificity. Consolidated onto the one active definition; margin:0 auto
   still lives here since Step 3 never redeclared it. */
.wrap { margin: 0 auto; }
.section--tint { background: transparent; }
body[data-profile="psm"] .section--tint { background: transparent; }

.section-head { max-width: 780px; margin-bottom: clamp(26px, 2.4vw, 44px); }
.section-head--c { margin-left: auto; margin-right: auto; text-align: center; }
/* .eyebrow, .section-title and .section-lede are defined once, below, at
   "STEP 3 - DESIGN SYSTEM REFINEMENT" (this used to be two partial
   declarations per selector, silently overriding each other's font-size/
   line-height/letter-spacing/margin - merged into one canonical block with
   zero computed-style change). Their profile-color overrides stay here,
   since Step 3 never touches color for either. */
body[data-profile="psm"] .eyebrow { color: var(--orange); }
body[data-profile="psm"] .section-title { color: var(--navy-deep); }

/* ==========================================================================
   07d. LEVEL 3 - HERO
   Imagery and wording come from the profile's own opening PDF pages:
   ENV page 03, PSM pages 21-22.
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(430px, 44vw, 580px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0B1A2C;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(6,16,28,.94) 0%, rgba(6,16,28,.84) 34%,
                rgba(6,16,28,.46) 68%, rgba(6,16,28,.22) 100%);
}
.hero .wrap { width: 100%; }
.hero-inner { max-width: 720px; padding: 44px 0; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px 8px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.06);
    font-family: var(--f-head); font-size: 11.5px; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase; color: #fff;
    margin-bottom: 22px;
}
.hero-eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--green-leaf);
}
body[data-profile="psm"] .hero-eyebrow::before { background: var(--orange); }

.hero-title {
    font-family: var(--f-display);
    font-size: clamp(40px, 4.2vw + 14px, 78px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
}
.hero-title .accent { color: var(--green-leaf); display: block; }
body[data-profile="psm"] .hero-title .accent { color: var(--orange); }

.hero-rule {
    width: 176px; height: 3px; margin: 22px 0 20px;
    background: linear-gradient(90deg, var(--green-leaf), rgba(255,255,255,0));
    border-radius: 2px;
}
body[data-profile="psm"] .hero-rule { background: linear-gradient(90deg, var(--orange), rgba(255,255,255,0)); }

.hero-lede {
    font-size: clamp(16px, .6vw + 14px, 21px);
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    max-width: 34em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }

/* .btn and its modifiers are defined once, below, at "STEP 3 — DESIGN
   SYSTEM REFINEMENT" (search that heading) - consolidated there so there's
   one .btn declaration, not two competing ones resolved only by source
   order. */


/* ==========================================================================
   07e. VALUE PILLARS  (SAFETY / PEOPLE / ENVIRONMENT / QUALITY, from PDF p01)
   ========================================================================== */

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pillar {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    padding: 26px 24px;
}
.pillar + .pillar::before {
    content: ""; position: absolute; left: 0; top: 22%;
    width: 1px; height: 56%; background: var(--line);
}
.pillar .badge {
    --bs: 58px;
    --bf: radial-gradient(circle at 34% 26%, #3C8A3F 0%, #1D5C22 46%, #0A3A10 100%);
}
.pillar-label {
    font-family: var(--f-head); font-size: 15px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark);
}


/* ==========================================================================
   07f. SERVICE INDEX CARDS
   Card grid shape follows the Sparrow reference; the categories, headings
   and descriptions are taken verbatim from the profile PDFs.
   ========================================================================== */

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* .svc-card/.svc-card:hover box model + hover behavior are defined once,
   below, at "5. Service cards" inside "STEP 3 — DESIGN SYSTEM REFINEMENT"
   (search that heading) - consolidated there. The .svc-card-* sub-element
   rules just below (media, chip, etc.) are untouched - those were always a
   single targeted override each, not a duplicated generation. */

.svc-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E9ECEE; }
.svc-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease);
}
.svc-card:hover .svc-card-media img { transform: scale(1.045); }
.svc-card-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(4,16,10,.62), rgba(4,16,10,0) 58%);
}

.svc-card-chip {
    position: absolute; left: 12px; bottom: 11px; z-index: 2;
    padding: 5px 12px 6px;
    border-radius: var(--r-pill);
    background: var(--green-deep);
    color: #fff;
    font-family: var(--f-head); font-size: 10px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
}
body[data-profile="psm"] .svc-card-chip { background: var(--navy-deep); }

.svc-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.svc-card-title {
    font-family: var(--f-head);
    font-size: 17px; font-weight: 800;
    line-height: 1.24; letter-spacing: -.006em;
    color: var(--green-deep);
    margin-bottom: 9px;
}
body[data-profile="psm"] .svc-card-title { color: var(--navy-deep); }
.svc-card-desc {
    font-size: 13.8px; line-height: 1.5; color: var(--ink-body);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.svc-card-more {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: auto; padding-top: 15px;
    font-family: var(--f-head); font-size: 13px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--green-badge);
}
body[data-profile="psm"] .svc-card-more { color: var(--orange); }
.svc-card-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4;
    transition: transform var(--dur) var(--ease); }
.svc-card:hover .svc-card-more svg { transform: translateX(4px); }

/* whole card is the link target */
.svc-card:focus-within { outline: 3px solid var(--green-leaf); outline-offset: 3px; }


/* ==========================================================================
   07h. CLIENT / BOARD STRIPS
   ========================================================================== */

.strip-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }


/* ==========================================================================
   07i. CONTACT
   ========================================================================== */

/* Intro: heading block (left) + support image (right). Heading sized up
   and the lede given a left accent bar to match the reference's
   .tmp-top-contact-area treatment (big 2-line heading, accent-barred
   description) - scoped to this row only, not the shared .section-title/
   .section-lede classes used elsewhere on the site. */
.contact-intro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    /* Top-aligned, not centered - matches the reference (heading and image
       start at the same Y); with the copy and photo columns now close in
       height, center-alignment read as the heading being pushed down. */
    align-items: start;
}
.contact-intro-row .section-head { margin-bottom: 0; max-width: none; }
.contact-intro-row .section-title { font-size: clamp(32px, 2.8vw + 16px, 54px); line-height: 1.15; }
.contact-intro-row .section-lede {
    position: relative;
    padding-left: 18px;
}
.contact-intro-row .section-lede::before {
    content: "";
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: 4px;
    border-radius: 2px;
    background: var(--green-forest);
}
body[data-profile="psm"] .contact-intro-row .section-lede::before { background: var(--orange); }

/* Copy column: header + short descriptive paragraphs + highlight checklist +
   CTA, stacked with one consistent gap so spacing never has to be tuned
   per-element. Fills the column height the tall photo on the right sets, so
   the two sides read as balanced instead of the photo dwarfing a short
   heading-only column. */
.contact-intro-copy {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.contact-intro-text {
    margin: 0;
    color: var(--ink-body);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 58ch;
}
.contact-intro-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-intro-highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}
.contact-intro-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
}
.contact-intro-highlight-icon svg { width: 14px; height: 14px; }
.contact-intro-cta { align-self: flex-start; }

@media (max-width: 480px) {
    .contact-intro-highlights { grid-template-columns: 1fr; }
}

.contact-intro-media {
    display: flex;
    justify-content: center;
}
/* Arch shape uses a border-radius far larger than any width this frame will
   ever render at, which CSS clamps down to exactly half-width - a perfect
   dome at every breakpoint with no per-breakpoint radius tuning needed.
   Width set explicitly here, top-down (not left to shrink-wrap through
   nested content sizing - a child using width:min(Npx,100%) inside an
   auto-sized ancestor is an intrinsic-sizing edge case browsers resolve
   inconsistently), so .contact-intro-photo and its img below just inherit
   100% of this already-resolved size. 390px is a deliberately smaller photo
   than the column could fit, because this section sits above the fixed
   .bottom-bar and the row's height is set by the copy column next to it
   (taller than the photo) - at real-world browser window heights a bigger
   photo's bottom edge runs under that bar before the user scrolls further;
   this size keeps clearance even at a ~600px-tall viewport. Orange
   border/badge stay fixed-orange (not profile-aware like most accents)
   because badge.png is a fixed-color image asset. */
.contact-intro-frame {
    position: relative;
    width: min(390px, 100%);
}
.contact-intro-frame::before {
    content: "";
    position: absolute;
    top: 16px; left: 16px; right: -16px; bottom: -16px;
    border: 3px solid var(--orange);
    border-radius: 999px 999px 0 0;
    z-index: 0;
}
.contact-intro-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 480 / 570;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    box-shadow: var(--sh-lift);
}
.contact-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-intro-badge {
    position: absolute;
    z-index: 2;
    /* Straddles the photo edge: left is exactly minus half the badge width, so
       one half sits on the image and the other half outside it. Centred with
       top + a negative margin rather than translateY, because transform is
       reserved for the rotation on the img below. */
    left: -52px;
    top: 40%;
    margin-top: -52px;
    width: 104px;
    height: 104px;
    filter: drop-shadow(0 8px 20px rgba(16, 24, 32, .18));
}
/* Same technique as the JTC reference (matched live: animation: 7s linear
   infinite rotateIt, plain img, no hover pause) - the whole flat badge.png
   spins, but since its ring and center dot are both perfectly round and
   centered, only the asymmetric text visibly appears to move. Rotating the
   img here rather than the .contact-intro-badge wrapper above keeps that
   wrapper's drop-shadow pointing one fixed direction instead of spinning
   with it. */
.contact-intro-badge img {
    display: block;
    width: 100%;
    height: 100%;
    animation: contactBadgeRotate 7s linear infinite;
}
@keyframes contactBadgeRotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-intro-badge img { animation: none; }
}

/* Info cards: a flat centered row (icon badge, heading, detail), matching
   the reference's plain .get-in-touch-wrapper cards exactly - white card,
   soft shadow (no border), circular icon badge that's shadowed rather
   than color-tinted. */
.contact-info-row { margin-top: clamp(28px, 2.4vw, 44px); }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}
.contact-card {
    text-align: center;
    padding: 30px 24px;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lift);
}
.contact-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 70px; height: 70px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sh-card);
    color: var(--green-forest);
}
body[data-profile="psm"] .contact-card-icon { color: var(--navy-deep); }
.contact-card-icon svg { width: 28px; height: 28px; }
.contact-card h3 { margin-bottom: 8px; font-size: 1.125rem; }
.contact-card p, .contact-card address { font-style: normal; line-height: 1.5; font-size: 0.9375rem; color: var(--ink-body); }
.contact-card a { color: var(--green-deep); }
.contact-card a:hover { text-decoration: underline; }
body[data-profile="psm"] .contact-card a { color: var(--navy-deep); }


/* ==========================================================================
   90b. SHELL RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    .mainnav-inner { height: 64px; gap: 12px; padding: 0 16px; }
    .brand-mark { width: 36px; }
    .brand-word { width: 118px; }
    .nav-cta { display: none; }
    .nav-toggle { display: grid; }

    #navMenu {
        position: fixed;
        left: 0; right: 0; top: 0;
        z-index: 90;
        padding: 78px 18px 26px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 60px -24px rgba(16, 24, 32, .5);
        transform: translateY(-102%);
        transition: transform var(--dur) var(--ease);
    }
    body.nav-open #navMenu { transform: none; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
    .nav-link { padding: 14px 14px; font-size: 16px; border-radius: var(--r-md); }
    .nav-link.is-active::after { left: 14px; right: auto; width: 26px; }

    .tier-1-inner, .tier-2-inner { padding: 0 12px; }
    .topbar-contact-link span { display: none; }

    /* Tier 1 becomes just the profile tabs, full width - the tagline is
       decorative (it already repeats in the footer), so it steps aside for
       the tabs here. */
    .tier-1-tagline { display: none; }
    .tier-1-inner { padding: 0; }
    .tier-1-inner .topbar-profile { position: static; transform: none; width: 100%; }
    .topbar-profile { display: flex; }
    /* min-width: 0 releases the 160px desktop floor set on .ptab above. With
       flex: 1 1 0 the two tabs are supposed to split the bar, but a flex item's
       default min-width: auto keeps that floor in force - 160 + 6 + 160 = 326,
       which is what pushed a 320px viewport 6px wide. */
    .ptab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 11px 10px 12px; font-size: 11px; letter-spacing: .1em; }

    /* Tier 2's WhatsApp "Enquire Now" is redundant with the floating WhatsApp
       button on every page, so it steps aside here to leave room for the
       social icons; the "Follow Us:" label text goes too, icons stay. */
    .tier-2-social .tier-2-enquire { display: none; }
    .tier-2-social-label { display: none; }

    .hero { min-height: 0; }
    .hero-inner { padding: 40px 0 44px; max-width: none; }
    .hero-scrim { background: linear-gradient(0deg, rgba(6,16,28,.94) 0%, rgba(6,16,28,.72) 58%, rgba(6,16,28,.5) 100%); }

    .pillars { grid-template-columns: repeat(2, 1fr); }
    .pillar { padding: 18px 14px; }
    .pillar + .pillar::before { content: none; }
    .pillar .badge { --bs: 46px; }

    .svc-grid { grid-template-columns: 1fr; gap: 16px; }
    /* .wrap/.section padding at this width: both silently overridden by the
       unconditional Step-3 rules below (equal specificity, later in file) -
       removed rather than left as dead code. */
}

@media (max-width: 480px) {
    .brand-word { display: none; }
    .pillars { grid-template-columns: 1fr; }
}

/* The composition already carries the service's own title in the source
   design, so the detail header stays a breadcrumb only. The h1 is kept in
   the document for semantics and search, visually hidden. */



/* ==========================================================================
   07j. INLINE SERVICE DISCLOSURE

   Read More opens the service's full content in place. The panel is a grid
   item spanning every column, so it lands beneath the card's row and the
   remaining cards flow on after it. Nothing navigates.
   ========================================================================== */

.svc-grid { align-items: start; }

.svc-card-num {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--green-badge);
    margin-bottom: 6px;
}
body[data-profile="psm"] .svc-card-num { color: var(--orange); }

.svc-card.is-open { border-color: var(--green-badge); box-shadow: var(--sh-lift); }
body[data-profile="psm"] .svc-card.is-open { border-color: var(--orange); }

/* momentary highlight when reached from the mega menu */
@keyframes svc-flag {
    0%   { box-shadow: 0 0 0 0 rgba(39, 122, 50, .55), var(--sh-lift); }
    70%  { box-shadow: 0 0 0 12px rgba(39, 122, 50, 0), var(--sh-lift); }
    100% { box-shadow: 0 0 0 0 rgba(39, 122, 50, 0), var(--sh-lift); }
}
.svc-card.is-flagged { animation: svc-flag 1.6s var(--ease) 2; }

/* Read More / Show less */
.svc-card-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 15px;
    font-family: var(--f-head); font-size: 13px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--green-badge);
    transition: color var(--dur) var(--ease);
}
body[data-profile="psm"] .svc-card-more { color: var(--orange); }
.svc-card-more .chev {
    width: 9px; height: 9px;
    border-right: 2.2px solid currentColor;
    border-bottom: 2.2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--dur) var(--ease);
}
.svc-card-more.is-open .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.svc-card-more .lbl-less { display: none; }
.svc-card-more.is-open .lbl-more { display: none; }
.svc-card-more.is-open .lbl-less { display: inline; }

/* the expanded panel */
.svc-detail {
    grid-column: 1 / -1;
    margin: 4px 0 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
}
.svc-detail[hidden] { display: none; }
.svc-detail.is-open { animation: detail-in .3s var(--ease) both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.svc-detail .composition-wrap { background: transparent; }
.svc-detail-foot {
    padding: 18px 0 22px;
    text-align: center;
    border-top: 1px solid var(--line);
    background: #fff;
}


/* ==========================================================================
   07k. SERVICES MODAL

   Click "Services" opens a full-catalogue dialog: left sidebar of categories
   for the active profile, right side that category's service cards. Markup
   is rendered server-side (see Site.Master) from ServiceCatalog; this file
   only styles it and toggles which category panel is visible.

   .mega-cat is kept - Services.aspx's category headings still use it.
   ========================================================================== */

.mega-cat {
    font-family: var(--f-head); font-size: 11.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--green-deep);
    padding-bottom: 9px; margin-bottom: 10px;
    border-bottom: 2px solid var(--green-pale);
}
body[data-profile="psm"] .mega-cat { color: var(--navy-deep); border-bottom-color: #DDE5EF; }

.svc-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
.svc-modal[hidden] { display: none; }
body.svc-modal-open { overflow: hidden; }

.svc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 13, 16, .62);
}

.svc-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1120px, 100%);
    /* Fixed, not capped: a max-height lets a short category list shrink the
       whole panel around it. This must stay the same size for a 2-service
       category and a 12-service one - see .svc-modal-panels below for the
       scroll that actually absorbs the overflow. */
    height: min(760px, 100%);
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 40px 90px -20px rgba(10, 13, 16, .55);
    /* visible, not hidden: the close button sits partly outside this box (JTC
       reference), so the panel itself can't clip it. Rounded corners are
       instead handled by .svc-modal-head/.svc-modal-body below. */
    overflow: visible;
    /* Opacity only, deliberately - animating transform/scale here would resize
       the panel every frame, and the card grid's auto-fill column count would
       recompute mid-animation, reading as the grid itself flickering. */
    animation: svc-modal-in .15s linear both;
}
@keyframes svc-modal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .svc-modal-panel { animation: none; } }

.svc-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: var(--green-deep);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
body[data-profile="psm"] .svc-modal-head { background: var(--navy-deep); }
.svc-modal-head h2 {
    margin: 0;
    text-align: center;
    font-family: var(--f-head);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

/* Sibling of .svc-modal-head/.svc-modal-body, not nested in either - sits at
   the panel's own top-right corner, half outside it, matching the reference. */
.svc-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--green-deep);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(10, 13, 16, .35);
    transition: background-color var(--dur) var(--ease);
}
body[data-profile="psm"] .svc-modal-close { background: var(--navy-deep); }
.svc-modal-close:hover { background: #000; }
.svc-modal-close svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; }

.svc-modal-body { flex: 1; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.svc-modal-profile { display: flex; flex-direction: column; height: 100%; }
.svc-modal-profile[hidden] { display: none; }

/* Two different presentations of the same server-rendered data: a card grid
   for desktop, a text accordion for mobile (see below). Exactly one of the
   two is ever visible - which one is decided purely by viewport width. */
.svc-modal-desktop { display: flex; flex: 1; min-height: 0; }
.svc-modal-mobile { display: none; }

.svc-modal-sidebar {
    flex: none;
    width: 270px;
    overflow-y: auto;
    background: var(--paper);
    border-right: 1px solid var(--line);
    padding: 12px;
}
.svc-modal-cat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 3px;
    border-radius: var(--r-md);
    border-left: 3px solid transparent;
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
    color: var(--ink);
    /* background-color only - a transform/box-shadow here would repaint every
       card underneath on every hover, which is what caused the flicker. */
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-modal-cat:hover { background: var(--green-mist); }
.svc-modal-cat.is-active { background: var(--green-forest); color: #fff; border-left-color: var(--green-leaf); }
body[data-profile="psm"] .svc-modal-cat:hover { background: #F1F4F8; }
body[data-profile="psm"] .svc-modal-cat.is-active { background: var(--navy-deep); border-left-color: var(--orange); }
.svc-modal-panels { flex: 1; overflow-y: auto; padding: 24px 28px; }

/* Fixed-size card grid, matched to JTC's own .coursecard (180x180, literal
   px on both axes - not minmax(...,1fr), which would stretch cards to fill
   whatever's left in the row). auto-fill on a fixed track just changes how
   many 180px columns fit; it never resizes the columns themselves, so cards
   stay identical regardless of title length or how many are in a category.
   Cards only ever show an image + a title; see Site.Master for the (equally
   minimal) markup. */
.svc-modal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    grid-auto-rows: 180px;
    gap: 22px 18px;
}
.svc-modal-cards[hidden] { display: none; }

.svc-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    height: 180px;
    /* No padding here any more - the image sits flush against the card's
       own edges (see .svc-modal-card-img below) and is clipped to its
       rounded top corners by this overflow:hidden. Only the title beneath
       it is inset - see its own padding. */
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    text-decoration: none;
    color: inherit;
    /* Only ever the background fades - width/height/border/radius/shadow
       stay constant so the card never shifts, resizes or looks "raised" on
       hover, just re-tinted. */
    transition: background-color .5s ease-in-out;
}
/* Nothing site-wide resets the browser's own default focus ring for a bare
   :focus (only :focus-visible is styled, in the accessibility section far
   below) - a plain mouse click on a card was leaving that native ring
   sitting on it as a rectangular outline. Scoped to the card itself so
   keyboard users still get a clear, on-brand ring via :focus-visible. */
.svc-modal-card:focus { outline: none; }
.svc-modal-card:focus-visible {
    outline: 2px solid var(--green-badge);
    outline-offset: 2px;
}
body[data-profile="psm"] .svc-modal-card:focus-visible { outline-color: var(--orange); }

/* Matched to JTC's own per-card hover wash: a 5-color rotation by grid
   position, cycling in Safety Info's own brand hues (pale green/navy/
   orange/teal/red - see the --pastel-* tokens in :root) instead of JTC's
   literal palette. Same rotation in both profiles - this is a grid-position
   effect, not a profile-branding one. */
.svc-modal-card:nth-child(5n+1):hover { background: var(--green-pale); }
.svc-modal-card:nth-child(5n+2):hover { background: var(--pastel-orange); }
.svc-modal-card:nth-child(5n+3):hover { background: var(--pastel-teal); }
.svc-modal-card:nth-child(5n+4):hover { background: var(--pastel-red); }
.svc-modal-card:nth-child(5n+5):hover { background: var(--pastel-navy); }
@media (prefers-reduced-motion: reduce) { .svc-modal-card { transition: none; } }

/* Fixed rectangle, full-bleed across the card's own width - object-fit
   covers it regardless of the source photo's actual dimensions, so every
   card's image area is identical no matter what was uploaded for that
   service. --empty is the same box with no <img> in it (the handful of
   services with no curated hero image - see Site.Master), so the layout
   never depends on whether a given service happens to have a photo. */
.svc-modal-card-img,
.svc-modal-card-img--empty {
    flex: none;
    display: block;
    width: 180px;
    height: 104px;
    object-fit: cover;
    background-color: #EEF1F4;
}

.svc-modal-card-title {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding: 10px 12px 0;
    font-family: var(--f-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.32;
    text-align: center;
}

/* --- Mobile accordion: category rows that expand into a plain list of
   service names. No images here at all - text navigation only. -------- */
.svc-acc { height: 100%; overflow-y: auto; padding: 6px 4px; }
.svc-acc-item { border-bottom: 1px solid var(--line); }
.svc-acc-item:first-child { border-top: 1px solid var(--line); }

.svc-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 12px;
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
}
.svc-acc-trigger[aria-expanded="true"] { color: var(--green-forest); }
body[data-profile="psm"] .svc-acc-trigger[aria-expanded="true"] { color: var(--navy-deep); }

/* Plus/minus glyph drawn with two CSS bars - no icon font, no image. */
.svc-acc-icon { position: relative; flex: none; width: 14px; height: 14px; }
.svc-acc-icon::before, .svc-acc-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.svc-acc-icon::before { width: 14px; height: 2px; }
.svc-acc-icon::after { width: 2px; height: 14px; transition: transform var(--dur) var(--ease); }
.svc-acc-trigger[aria-expanded="true"] .svc-acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.svc-acc-panel[hidden] { display: none; }
.svc-acc-list { padding: 0 12px 12px 12px; }
.svc-acc-list li + li { border-top: 1px solid var(--line-soft); }
.svc-acc-list a {
    display: block;
    padding: 11px 10px 11px 20px;
    font-size: 13.5px;
    color: var(--ink-body);
    text-decoration: none;
}
.svc-acc-list a:hover, .svc-acc-list a:active { color: var(--green-forest); background: var(--green-mist); border-radius: var(--r-sm); }
body[data-profile="psm"] .svc-acc-list a:hover,
body[data-profile="psm"] .svc-acc-list a:active { color: var(--navy-deep); background: #F1F4F8; }

@media (max-width: 899px) {
    .svc-modal { padding: 0; }
    .svc-modal-panel { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
    .svc-modal-head { padding: 12px 48px; border-radius: 0; }
    .svc-modal-body { border-radius: 0; }
    /* On a full-screen panel there's no outer edge to sit astride, so the
       close button stays a normal inset corner button instead. */
    .svc-modal-close { top: 10px; right: 10px; }

    .svc-modal-desktop { display: none; }
    .svc-modal-mobile { display: block; flex: 1; min-height: 0; }
}

@media (pointer: coarse) {
    .svc-modal-close { min-width: 44px; min-height: 44px; }
}


/* ==========================================================================
   07l. EXPANDED CARD - NO DUPLICATED CONTENT

   Collapsed, the card is the service's summary: photo, category, number,
   title and lede. Expanded, the composition below IS the service, and it
   opens with the same title and lede set in the source's own typography.
   So on expand the card falls back to being the control that opened it:
   photo, category, number and Show less. Nothing is read twice, and no PDF
   content is removed - the composition still carries all of it.
   ========================================================================== */

.svc-card.is-open .svc-card-title,
.svc-card.is-open .svc-card-desc { display: none; }

.svc-card.is-open .svc-card-body { padding-bottom: 16px; }
.svc-card.is-open .svc-card-num { margin-bottom: 10px; }
.svc-card.is-open .svc-card-more { padding-top: 0; }

/* A quiet marker so an open card still reads as the active one. */
.svc-card.is-open::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--green-badge);
}
body[data-profile="psm"] .svc-card.is-open::after { background: var(--orange); }
/* position:relative already set on .svc-card's single consolidated
   declaration (see "5. Service cards" below) - this redeclared it. */


/* ==========================================================================
   07m. HERO - fuller treatment, distinct per profile

   Both heroes use their own profile's PDF artwork and their own PDF wording.
   ENV takes the glass-globe scene and the green scale from page 03; PSM
   takes the refinery scene and the navy/orange scale from pages 21-22.
   ========================================================================== */

.hero { min-height: clamp(520px, 52vw, 660px); }
.hero-inner { padding: 56px 0 60px; max-width: 760px; }

/* profile-specific overlay: ENV reads green, PSM reads navy/orange */
.hero[data-prof="env"] .hero-scrim {
    background:
        linear-gradient(90deg, rgba(3,20,10,.95) 0%, rgba(3,20,10,.86) 32%,
                        rgba(3,20,10,.44) 66%, rgba(3,20,10,.18) 100%),
        radial-gradient(58rem 34rem at 6% 108%, rgba(18,133,84,.42), transparent 62%);
}
.hero[data-prof="psm"] .hero-scrim {
    background:
        linear-gradient(90deg, rgba(0,14,30,.95) 0%, rgba(0,14,30,.86) 32%,
                        rgba(0,14,30,.42) 66%, rgba(0,14,30,.16) 100%),
        radial-gradient(56rem 32rem at 4% 106%, rgba(217,114,34,.36), transparent 60%);
}

/* hairline rule along the foot, in the profile's accent */
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green-badge), var(--green-leaf) 46%, rgba(255,255,255,0));
}
body[data-profile="psm"] .hero::after {
    background: linear-gradient(90deg, var(--orange), var(--amber) 46%, rgba(255,255,255,0));
}

.hero-title { font-size: clamp(44px, 4.6vw + 14px, 86px); }
.hero-lede { font-size: clamp(17px, .7vw + 14px, 23px); max-width: 30em; }

/* the four value pillars, restated as a compact strip inside the hero */
.hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-strip li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 9px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}
.hero-strip li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green-leaf);
}
body[data-profile="psm"] .hero-strip li::before { background: var(--orange); }

/* a service count, taken from the deck itself - not an invented statistic */
.hero-count {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 26px;
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
}
.hero-count b {
    font-family: var(--f-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

@media (max-width: 899px) {
    .hero { min-height: 0; }
    .hero-inner { padding: 40px 0 44px; max-width: none; }
    .hero[data-prof="env"] .hero-scrim,
    .hero[data-prof="psm"] .hero-scrim {
        background: linear-gradient(0deg, rgba(3,16,26,.95) 0%, rgba(3,16,26,.74) 58%, rgba(3,16,26,.5) 100%);
    }
    .hero-strip { gap: 7px; margin-top: 22px; padding-top: 20px; }
    .hero-strip li { padding: 6px 12px 7px; font-size: 10.5px; }
}


/* ==========================================================================
   STEP 3 — DESIGN SYSTEM REFINEMENT

   Nothing below changes content. It tightens the shell so the site reads as
   a mature consulting practice rather than a product landing page:
   engineered edges instead of soft ones, borders carrying structure instead
   of shadow, one 4px spacing scale, one type ramp, and a single accent per
   profile. Rules here come after the earlier blocks and deliberately
   override them.
   ========================================================================== */

/* --- 1. Rhythm ----------------------------------------------------------- */

.wrap    { max-width: 1320px; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); }
/* The Our Services block is a full-bleed --paper composition panel that sits
   directly under the hero on all three landing pages, so .section's top
   padding showed as a band of page background between the two. Only the top
   is dropped - the bottom padding still separates it from what follows. */
#our-services-overview { padding-top: 0; }

.section-head        { max-width: 60ch; margin-bottom: clamp(28px, 2.6vw, 52px); }
.section-head--c     { text-align: center; margin-inline: auto; }
.section-lede        { margin-top: var(--s-4); font-size: 16.5px; line-height: 1.62; max-width: 58ch; color: var(--ink-body); }
.section-head--c .section-lede { margin-inline: auto; }

/* --- 2. Type ------------------------------------------------------------- */

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--f-head); font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--green-badge); margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }

.section-title {
    font-family: var(--f-display);
    font-size: clamp(28px, 2.2vw + 13px, 44px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.018em;
    text-transform: uppercase;
    color: var(--green-deep);
}

/* --- 3. Buttons ---------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px;
    border-radius: var(--r-sm);
    font-family: var(--f-head); font-size: 14px; font-weight: 700;
    letter-spacing: .015em;
    min-height: 46px;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.btn:hover { transform: none; }              /* no lift; corporate, not playful */
.btn--primary { background: var(--green-badge); color: #fff; }
.btn--primary:hover { background: #2E8C3B; filter: brightness(1.08); }
body[data-profile="psm"] .btn--primary { background: var(--orange); }
body[data-profile="psm"] .btn--primary:hover { background: #C4621A; }
.btn--ghost { border: 1.5px solid rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--line  { border: 1.5px solid var(--line-strong); color: var(--green-deep); background: #fff; }
.btn--line:hover { background: var(--green-mist); border-color: var(--green-badge); }
body[data-profile="psm"] .btn--line:hover { background: #F1F4F8; border-color: var(--orange); }

/* --- 4. Header ----------------------------------------------------------- */

@media (min-width: 900px) {
    .tier-1-inner, .tier-2-inner { max-width: 1320px; padding-inline: var(--gutter); }
}
.ptab {
    padding: 7px 22px 8px;
    font-size: 11.5px;
    letter-spacing: .04em;
}

/* Environment and Process Safety are deliberately identical here - same
   size, padding and weight - so the tabs read as two equal options, not
   one emphasized over the other. */

.mainnav-inner { height: 80px; max-width: 1320px; padding-inline: var(--gutter); }
.nav-link { font-size: 13.8px; padding: 9px 13px 10px; border-radius: var(--r-xs); }
.nav-link.is-active::after { height: 2px; bottom: 3px; }
.nav-cta {
    border-radius: var(--r-sm);
    font-size: 13px;
    padding: 11px 20px 12px;
    letter-spacing: .015em;
}

/* --- 5. Service cards ---------------------------------------------------- */

.svc-grid { gap: var(--s-5); }

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    /* Rest-state shadow matches the site's standard card language (rest
       --sh-card, hover --sh-lift - same pair .feat-card/.board-card/
       .svcd-related-card use) instead of the flat none->--sh-card this had
       before, which was the one card family that showed no shadow at rest.
       Hover moved up to --sh-lift to match too - keeping it at --sh-card
       would have made hover a no-op once rest already showed that value. */
    box-shadow: var(--sh-card);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card:hover {
    transform: none;
    box-shadow: var(--sh-lift);
    border-color: #A9B6BD;
}
.svc-card-media { aspect-ratio: 3 / 2; }
.svc-card-media::after {
    background: linear-gradient(0deg, rgba(4, 16, 10, .52), rgba(4, 16, 10, 0) 52%);
}
.svc-card:hover .svc-card-media img { transform: scale(1.03); }

.svc-card-chip {
    left: var(--s-3); bottom: var(--s-3);
    padding: 4px 9px 5px;
    border-radius: var(--r-xs);
    font-size: 9.5px;
    letter-spacing: .1em;
    background: rgba(1, 47, 7, .92);
}
body[data-profile="psm"] .svc-card-chip { background: rgba(0, 27, 56, .92); }

.svc-card-body { padding: var(--s-5) var(--s-5) var(--s-5); }
.svc-card-num  { font-size: 10.5px; letter-spacing: .14em; margin-bottom: var(--s-2); }
.svc-card-title {
    font-size: 16.5px;
    line-height: 1.3;
    margin-bottom: var(--s-2);
    /* two lines keeps every card's text block the same height */
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    min-height: calc(2 * 1.3 * 16.5px);
}
.svc-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-line-clamp: 3; line-clamp: 3;
    min-height: calc(3 * 1.55 * 13.5px);
}
.svc-card-more {
    padding-top: var(--s-4);
    margin-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .09em;
    width: 100%;
    justify-content: space-between;
    min-height: 44px;                          /* touch target */
}
.svc-card.is-open .svc-card-more { margin-top: 0; border-top: 0; }
.svc-card.is-open::after { height: 2px; }

/* --- 6. Service category rail -------------------------------------------
   The categories already exist in the locked map; this is the UI for them.
   Purely a jump list - it filters nothing and adds no content.
------------------------------------------------------------------------- */

.cat-rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-8);
    border-bottom: 1px solid var(--line);
}
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 9px 15px 10px;
    min-height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: #fff;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #33424C;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.cat-chip b {
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-soft);
}
.cat-chip:hover, .cat-chip:focus-visible {
    color: var(--green-deep);
    border-color: var(--green-badge);
    background: var(--green-mist);
}
body[data-profile="psm"] .cat-chip:hover,
body[data-profile="psm"] .cat-chip:focus-visible {
    color: var(--navy-deep);
    border-color: var(--orange);
    background: #F1F4F8;
}
.cat-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin: var(--s-6) 0 calc(var(--s-1) * -1);
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--green-deep);
    scroll-margin-top: 120px;
}
body[data-profile="psm"] .cat-head { border-bottom-color: var(--navy-deep); }
.cat-head:first-child { margin-top: 0; }
.cat-head h3 {
    font-family: var(--f-head);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-deep);
}
body[data-profile="psm"] .cat-head h3 { color: var(--navy-deep); }
.cat-head span { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft); }

/* --- 7. Inline expansion -------------------------------------------------- */

.svc-detail {
    border-radius: var(--r-md);
    border-color: var(--line-strong);
    box-shadow: none;
    margin: var(--s-2) 0 var(--s-4);
}
.svc-detail.is-open { animation: detail-in var(--dur-3) var(--ease-out) both; }
@keyframes detail-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.svc-detail-foot { padding: var(--s-5) 0 var(--s-6); }

/* --- 8. Services modal ----------------------------------------------------- */

.mega-cat { font-size: 11px; letter-spacing: .14em; border-bottom-width: 1px; }

/* --- 9. Cards elsewhere --------------------------------------------------- */

.contact-card {
    border-radius: var(--r-lg);
    border-color: var(--line);
    box-shadow: var(--sh-lift);
    padding: 26px 22px;
    /* Grid rows only equalize height within their own row by default - the
       two-line address card in row 2 was taller than row 1's shorter cards.
       An explicit min-height (sized for the longest content, the address)
       makes all four match regardless of which row they land in. */
    min-height: 216px;
}

/* --- 10. Accessibility foundation ---------------------------------------- */

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--green-badge);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
body[data-profile="psm"] :where(a, button, [tabindex]):focus-visible {
    outline-color: var(--orange);
}
.ptab:focus-visible, .nav-link:focus-visible, .svc-modal-cat:focus-visible {
    outline-color: #fff;
    outline-offset: -3px;
}
.mainnav .nav-link:focus-visible { outline-color: var(--green-badge); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .svc-detail.is-open { animation: none; }
    .svc-card:hover .svc-card-media img { transform: none; }
}

/* Touch targets: every interactive element clears 44px on coarse pointers. */
@media (pointer: coarse) {
    .nav-link, .cat-chip, .svc-modal-cat, .svc-modal-card, .ptab { min-height: 44px; }
    .svc-card-more { min-height: 48px; }
    /* Secondary controls that were still under 44 on a real touch device.
       display:grid on the round ones keeps their glyph centred while the box
       grows; .pv-btn--text is a bare text link (height:auto), so it needs the
       box built rather than just enlarged. */
    .carousel-arrow, .team-card-icon { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
    .back-to-top { width: 44px; height: 44px; }
    .pv-btn--text { min-height: 44px; align-items: center; }
    .brand { min-height: 44px; align-items: center; }
    /* Social rows: the hit box grows, the glyph does not. The footer row has
       room for the full 44 square; the fixed bottom bar is only 41px tall, so
       that one takes the full width and the bar height rather than bursting
       out of it. */
    .footer-social a { width: 44px; height: 44px; }
    .bottom-bar-social a { width: 44px; height: 40px; border-radius: 6px; }
}

/* the category heading sits inside the grid, so it must span every column */
.svc-grid > .cat-head { grid-column: 1 / -1; }


/* ==========================================================================
   STEP 4 — SERVICE DETAIL PANEL

   The panel reads as a consulting detail section: a slim meta band that
   identifies the service, then the PDF-derived composition itself, then a
   controlled foot. The composition already opens with the service's own
   title, so the band deliberately carries only the code, the category and
   the source subtitle - the title is never printed twice.
   ========================================================================== */

.svc-detail {
    background: #fff;
    border-top: 3px solid var(--green-badge);
}
body[data-profile="psm"] .svc-detail { border-top-color: var(--orange); }

.svc-panel-head {
    padding: var(--s-5) var(--gutter) var(--s-5);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--green-mist), #fff);
}
body[data-profile="psm"] .svc-panel-head {
    background: linear-gradient(180deg, #F1F4F8, #fff);
}

.svc-panel-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}
.svc-panel-code {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--green-badge);
}
body[data-profile="psm"] .svc-panel-code { color: var(--orange); }

.svc-panel-cat {
    position: relative;
    padding-left: var(--s-4);
    font-family: var(--f-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.svc-panel-cat::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 1px;
    background: var(--line-strong);
}

.svc-panel-sub {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-body);
    max-width: 74ch;
}

.svc-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    padding: var(--s-5) var(--gutter) var(--s-6);
    text-align: left;
    border-top: 1px solid var(--line);
    background: #FBFCFB;
}
body[data-profile="psm"] .svc-detail-foot { background: #FAFBFC; }

.svc-panel-back {
    font-family: var(--f-head);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green-deep);
}
body[data-profile="psm"] .svc-panel-back { color: var(--navy-deep); }
.svc-panel-back:hover { text-decoration: underline; text-underline-offset: 3px; }


/* --- Technical tables inside a reflowed panel ----------------------------
   The source tables are fixed-width by design. Below the reflow breakpoint
   they get their own horizontal scroller so the page itself never overflows.
------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    body.is-reflow .stage table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    body.is-reflow .svc-panel-head,
    body.is-reflow .svc-detail-foot { padding-inline: var(--s-4); }
    .svc-detail-foot { flex-direction: column; align-items: stretch; }
    .svc-detail-foot .btn { justify-content: center; }
    .svc-panel-back { text-align: center; }
}


/* ==========================================================================
   STEP 5 — HOME

   Every string in these blocks comes from the locked content map: the
   commitments and strapline are PDF page 02, the practice-area descriptors
   are the verified subtitles of ENV-01 and PSM-01, the board titles are
   pages 38-40, the client names are page 41. The only figures shown are
   counts of what the deck itself contains.
   ========================================================================== */

/* --- Commitments ---------------------------------------------------------- */

.commit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}
.commit {
    padding: var(--s-6);
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.commit-n {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--green-badge);
    margin-bottom: var(--s-3);
}
body[data-profile="psm"] .commit-n { color: var(--orange); }
.commit p { font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }

/* --- Practice areas ------------------------------------------------------- */

.pa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.pa-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
}
.pa-media { aspect-ratio: 21 / 9; overflow: hidden; background: #E9ECEE; }
.pa-media img { width: 100%; height: 100%; object-fit: cover; }
.pa-body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1 1 auto; }
.pa-tag {
    font-family: var(--f-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .16em; color: var(--green-badge); margin-bottom: var(--s-2);
}
.pa-card--psm .pa-tag { color: var(--orange); }
.pa-title {
    font-family: var(--f-display); font-size: clamp(22px, 1.4vw + 14px, 30px);
    font-weight: 800; letter-spacing: -.012em; text-transform: uppercase;
    color: var(--green-deep); margin-bottom: var(--s-3);
}
.pa-card--psm .pa-title { color: var(--navy-deep); }
.pa-lede { font-size: 15.5px; line-height: 1.58; margin-bottom: var(--s-5); }
.pa-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.pa-cats li {
    padding: 5px 11px 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-soft);
}
.pa-count {
    font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft);
    margin-bottom: var(--s-5);
}
.pa-go {
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-top: auto; min-height: 44px;
    font-family: var(--f-head); font-size: 13px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--green-badge);
}
.pa-card--psm .pa-go { color: var(--orange); }
.pa-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4;
             transition: transform var(--dur) var(--ease); }
.pa-go:hover svg { transform: translateX(4px); }

/* --- Selected services preview -------------------------------------------- */

.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mini {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line-strong);
    border-radius: var(--r-md); overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.mini:hover { border-color: #A9B6BD; }
.mini-media { aspect-ratio: 16 / 9; overflow: hidden; background: #E9ECEE; }
.mini-media img { width: 100%; height: 100%; object-fit: cover; }
.mini-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.mini-cat {
    font-family: var(--f-head); font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: var(--s-2);
}
.mini-title {
    font-size: 15px; font-weight: 700; line-height: 1.32; color: var(--green-deep);
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    min-height: calc(2 * 1.32 * 15px);
    margin-bottom: var(--s-4);
}
body[data-profile="psm"] .mini-title { color: var(--navy-deep); }
.mini-go {
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-top: auto; min-height: 40px;
    font-family: var(--f-head); font-size: 12px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--green-badge);
}
body[data-profile="psm"] .mini-go { color: var(--orange); }
.mini-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4;
               transition: transform var(--dur) var(--ease); }
.mini-go:hover svg { transform: translateX(4px); }
.mini-all { margin-top: var(--s-8); text-align: center; }

/* --- Learning board preview ------------------------------------------------ */

.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.bd-card {
    display: block; background: #fff;
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    overflow: hidden; transition: border-color var(--dur) var(--ease);
}
.bd-card:hover { border-color: var(--green-badge); }
body[data-profile="psm"] .bd-card:hover { border-color: var(--orange); }
.bd-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #E9ECEE; }
.bd-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bd-title {
    display: block; padding: var(--s-4) var(--s-5) var(--s-5);
    font-family: var(--f-head); font-size: 13.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep);
}
body[data-profile="psm"] .bd-title { color: var(--navy-deep); }

/* --- Client preview -------------------------------------------------------- */

.cl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}
.cl-grid li {
    padding: var(--s-4) var(--s-5);
    min-height: 62px;
    display: flex; align-items: center;
    font-size: 13.5px; font-weight: 600; line-height: 1.34; color: var(--ink);
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

/* --- Final CTA -------------------------------------------------------------- */

.cta { background: var(--navy-deep); color: #fff; padding-block: clamp(44px, 3.4vw + 24px, 72px); }
.cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-6);
}
.cta .eyebrow { color: var(--green-leaf); }
body[data-profile="psm"] .cta .eyebrow { color: var(--orange); }
.cta-title {
    font-family: var(--f-display);
    font-size: clamp(24px, 1.9vw + 14px, 38px);
    font-weight: 800; line-height: 1.1; letter-spacing: -.015em;
    text-transform: uppercase; color: #fff; max-width: 22ch;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta .btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.cta .btn--line:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Home responsive -------------------------------------------------------- */

@media (max-width: 1080px) {
    .mini-grid, .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .pa-grid { grid-template-columns: 1fr; }
    .mini-grid, .bd-grid { grid-template-columns: 1fr; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .cta-actions { width: 100%; }
    .cta-actions .btn { flex: 1 1 auto; justify-content: center; }
    .commit-grid { grid-template-columns: 1fr; }
}

/* The Home clients block is a preview of 8 names; the full list of 22 stays
   in the #clients section. Four across reads as a deliberate short list. */
.cl-grid--preview { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
@media (max-width: 899px) { .cl-grid--preview { grid-template-columns: 1fr; } }


/* ==========================================================================
   90c. REFLOW - DEEP RESET FOR NESTED COMPOSITION LAYERS   (STEP 5 refinement)

   The original reflow only returned the template root's DIRECT children to
   normal flow. Pages whose artwork nests two or three levels deep (the
   process strips, the key-area columns, the numbered panels) kept their
   absolute coordinates inside a collapsed parent, so they stacked on top of
   one another or vanished. This block takes every non-SVG descendant of a
   reflowed stage out of absolute positioning, then restores the few things
   that genuinely need an intrinsic box: badges, photo frames and images.

   Nothing here runs at or above 900px, so the desktop 1440 x 810 stage that
   reproduces the PDF page is untouched.
   ========================================================================== */

@media (max-width: 1199px) {

    body.is-reflow .stage *:not(svg):not(svg *) {
        position: static;
        left: auto; right: auto; top: auto; bottom: auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none;
        white-space: normal;
    }

    /* Rows that were flex/grid at 1440 stack; the ones that read as a short
       list keep their gap so the stack does not become a wall of text. */
    body.is-reflow .stage [class*="-row"],
    body.is-reflow .stage [class*="-cols"],
    body.is-reflow .stage [class*="-grid"],
    body.is-reflow .stage [class*="-steps"],
    body.is-reflow .stage [class*="-process"],
    body.is-reflow .stage [class*="-areas"],
    body.is-reflow .stage [class*="-nodes"],
    body.is-reflow .stage [class*="-panels"],
    body.is-reflow .stage [class*="-benefits"] {
        display: block;
    }

    /* Panels keep their card look so the stack still reads as the source. */
    body.is-reflow .stage [class*="-card"],
    body.is-reflow .stage [class*="-panel"],
    body.is-reflow .stage [class*="-proc"],
    body.is-reflow .stage [class*="-area"],
    body.is-reflow .stage [class*="-node"],
    body.is-reflow .stage [class*="-step"] {
        margin-bottom: 12px;
    }

    /* Badges are circles: they must keep the box the token gives them. */
    body.is-reflow .stage .badge {
        width: var(--bs, 48px);
        height: var(--bs, 48px);
        max-width: var(--bs, 48px);
        flex: none;
    }
    body.is-reflow .stage .badge svg { width: 58%; height: 58%; }

    /* Photographic frames become responsive banners rather than fills. */
    body.is-reflow .stage .photo {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: var(--r-md);
    }
    body.is-reflow .stage .photo img { width: 100%; height: 100%; object-fit: cover; }
    body.is-reflow .stage img { width: auto; max-width: 100%; height: auto; }

    /* Inline SVG diagrams keep their own coordinate system and simply scale. */
    body.is-reflow .stage svg { max-width: 100%; height: auto; }

    /* Type scale is set by the reflow block above; anything that carried a
       display size measured against the 1440 stage is stepped down here so a
       110px headline cannot run off a 390px screen. */
    body.is-reflow .stage .d-title,
    body.is-reflow .stage .d-title span,
    body.is-reflow .stage h2,
    body.is-reflow .stage h2 span {
        font-size: clamp(26px, 6.6vw, 40px);
        line-height: 1.06;
    }
    body.is-reflow .stage h3,
    body.is-reflow .stage h3 span { font-size: clamp(17px, 4.4vw, 22px); line-height: 1.2; }
    body.is-reflow .stage h4,
    body.is-reflow .stage h4 span { font-size: clamp(15px, 3.8vw, 18px); line-height: 1.25; }
    body.is-reflow .stage p,
    body.is-reflow .stage li,
    body.is-reflow .stage td,
    body.is-reflow .stage th { font-size: 15px; line-height: 1.5; }

    /* Rules, hairlines and dividers measured in stage pixels become full-width
       hairlines rather than stray dots. */
    body.is-reflow .stage [class*="-rule"],
    body.is-reflow .stage [class*="-hair"],
    body.is-reflow .stage [class*="-div"]:empty {
        width: 100%;
        height: 1px;
        margin: 10px 0;
    }
}

/* Decorative flourishes measured against the stage (leaf sprigs, quote marks,
   corner dots) are dropped in reflow: they carry no content and at 390px a
   56px leaf would otherwise fill a third of the screen. */
@media (max-width: 1199px) {
    body.is-reflow .stage [class*="-leaf"],
    body.is-reflow .stage [class*="-sprig"],
    body.is-reflow .stage [class*="-qm"],
    body.is-reflow .stage [class*="-corner"],
    body.is-reflow .stage [class$="-dot"] { display: none; }

    body.is-reflow .stage .badge { margin-left: 0; margin-right: 0; }
}

/* Panel and pill backgrounds are painted by empty elements sitting behind the
   text at 1440. Once the stage reflows they collapse to nothing and the white
   label they were carrying lands on the white page. In reflow the empty
   painters are dropped and the label carries its own pill. */
@media (max-width: 1199px) {
    body.is-reflow .stage i:empty,
    body.is-reflow .stage div:empty:not([style]),
    body.is-reflow .stage span:empty:not(.badge) { display: none; }

    body.is-reflow .stage [class*="pill-t"],
    body.is-reflow .stage [class*="tag-t"],
    body.is-reflow .stage [class*="-band-t"] {
        display: inline-block;
        margin: 4px 0 12px;
        padding: 7px 16px 8px;
        border-radius: var(--r-pill);
        background: var(--pill, var(--accent, var(--green-deep)));
        color: #fff;
    }
    body.is-reflow .stage [class*="pill-t"] span,
    body.is-reflow .stage [class*="tag-t"] span,
    body.is-reflow .stage [class*="-band-t"] span { display: inline; color: inherit; }
}


/* ==========================================================================
   STEP 5 — VISUAL POLISH

   Direction is approved; nothing below redesigns anything. It loosens the
   hero's vertical rhythm, guarantees a level card row whatever a card's
   state, binds an open card to the panel it opened so the two read as one
   component, frames the composition as an exhibit inside that component
   rather than a canvas dropped onto the page, and repairs three reflow
   defects at 390px. The composition itself is untouched: no coordinate, no
   colour, no string inside .stage is changed here.
   ========================================================================== */

/* --- 1. Hero: the heading was set almost solid, so two long uppercase lines
       closed up on each other. Opening the leading and easing the negative
       tracking lets the lockup breathe without changing its size. --------- */

.hero-title {
    line-height: 1.06;
    letter-spacing: -.008em;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero-rule { margin: 28px 0 24px; }
.hero-lede { line-height: 1.56; }
.hero-actions { margin-top: 34px; gap: 14px; }
.hero-count { margin-top: 30px; }
.hero-strip { margin-top: 34px; padding-top: 28px; }

@media (min-width: 900px) {
    .hero-inner { padding-block: 64px 68px; }
}


/* --- 2. A level row, whatever a card is doing ------------------------------
   Cards were already uniform closed; an open card shrank because its title
   and lede are suppressed while the composition below carries them. The row
   now stretches, and the open card spends the freed space saying what it is
   doing instead of leaving a hole. */

.svc-grid { align-items: stretch; }
.svc-card { height: 100%; }
.svc-card-body { justify-content: flex-start; }

.svc-card.is-open .svc-card-body {
    background: linear-gradient(180deg, var(--green-mist), #fff 62%);
}
body[data-profile="psm"] .svc-card.is-open .svc-card-body {
    background: linear-gradient(180deg, #F1F4F8, #fff 62%);
}

/* Nothing is substituted for the suppressed title: the composition below
   carries it, and the card keeps only its code and its control. */


/* --- 3. Card state -------------------------------------------------------
   The detail no longer lives in the grid, so an open card is purely the
   control that opened it: accent border, accent foot bar, tinted body. */

.svc-card.is-open .svc-card-body { justify-content: center; gap: 10px; }
.svc-card.is-open .svc-card-num  { margin-bottom: 0; }
.svc-card.is-open .svc-card-more { margin-top: 0; }
.svc-card.is-open::after { height: 4px; }


/* --- 5. 390px repairs -----------------------------------------------------
   a) Icons: the deep reflow reset skipped SVG so composition icons kept the
      absolute coordinates they hold on the 1440 stage and hung off the card.
   b) Buttons: the panel foot controls get a real touch target.
   c) Wrapping: long uppercase source headings are allowed to break. */

@media (max-width: 1199px) {

    /* Page CSS positions these with three classes, so the reflow reset has to
       win explicitly. This is the only place the codebase uses !important and
       it applies below 900px only - the 1440 composition is untouched. */
    body.is-reflow .stage svg {
        position: static !important;
        left: auto !important; right: auto !important;
        top: auto !important; bottom: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100%;
    }

    /* Source line breaks are set for the 1440 canvas. In reflow the fitted
       line spans go back to being inline, so a four-line caption is four
       wrapped lines of one paragraph rather than four stacked blocks with a
       block gap between each. The <br> tags stay: no HTML is changed. */
    body.is-reflow .stage .fit {
        display: inline;
        transform: none;
        white-space: normal;
    }
    body.is-reflow .stage [class*="icon"] > svg,
    body.is-reflow .stage svg[class*="icon"],
    body.is-reflow .stage svg[class*="glyph"] {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }

    body.is-reflow .stage h2,
    body.is-reflow .stage h3,
    body.is-reflow .stage h4 {
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .svc-detail-foot .btn,
    .svc-detail-foot .svc-panel-back,
    .svc-card-more,
    .mini-all {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
    }
    .svc-detail-foot .svc-panel-back { justify-content: center; }

    .svc-detail {
        margin: -10px 0 var(--s-5);
        border-radius: 0 0 var(--r-md) var(--r-md);
    }
    .svc-detail .composition-wrap { padding: var(--s-4) var(--s-3) var(--s-5); }
    .svc-card.is-open::before { display: none; }
}


/* ==========================================================================
   STEP 5R — SERVICE DETAIL AS A FULL-WIDTH WEB SECTION

   The grid holds cards only. Every detail is rendered once into the service
   stage that follows the grid, spans the full content container and is shown
   one at a time. There is no page counter, no previous/next, no sheet
   framing and no reader chrome: a detail is a section of this website, not a
   document being viewed.
   ========================================================================== */

.svc-stage {
    display: none;
    margin-top: var(--s-10);
    border-top: 1px solid var(--line);
}
.svc-stage.is-live { display: block; }

.svc-detail {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    scroll-margin-top: 124px;
}
.svc-detail[hidden] { display: none; }
.svc-detail.is-open { animation: detail-in var(--dur-3) var(--ease-out) both; }

/* The only chrome the stage adds is a close control, and it sits on its own
   bar OUTSIDE the recreation. Nothing is appended inside the composition:
   no code, no category, no counts, no calls to action, no navigation. */
.svc-shellbar {
    border-top: 1px solid var(--line);
    background: #FBFCFB;
}
body[data-profile="psm"] .svc-shellbar { background: #FAFBFC; }
.svc-shellbar-inner {
    display: flex;
    justify-content: flex-end;
    padding-block: var(--s-3);
}
.svc-close {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 4px;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--dur) var(--ease);
}
.svc-close:hover { color: var(--ink); }
.svc-close-x {
    position: relative;
    width: 12px; height: 12px;
}
.svc-close-x::before,
.svc-close-x::after {
    content: "";
    position: absolute;
    left: 0; top: 5px;
    width: 12px; height: 1.6px;
    background: currentColor;
}
.svc-close-x::before { transform: rotate(45deg); }
.svc-close-x::after  { transform: rotate(-45deg); }

/* Services still rendering their reproduction sit inside the same stage. */
.svc-detail .svc-panel-head {
    padding-inline: 0;
    padding-block: var(--s-8) var(--s-5);
    background: none;
    border-bottom: 1px solid var(--line);
}


/* ==========================================================================
   HOME HERO — PDF PAGE 01 RECREATED

   Page 01 is the company cover. Everything on it is here and nothing else is:
   the traced mark, the company name, the dotted rule, the location pin,
   Corporate Office with its three address lines, the hairline with its centre
   dot, and the four value badges. The two framed photographs and the pale
   skyline are the page's own assets and supply the image layer only.

   Fluid, not a canvas: sizes are proportions of the trim, so the composition
   keeps the page's proportions at any width. Every visible string is live,
   selectable, findable HTML.
   ========================================================================== */

.hero--cover {
    --cv-green: #1E6B22;
    --cv-green-2: #2E7D32;
    --cv-ink: #1B1B1B;
    --cv-red: #D2000F;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(380px, 30vw, 580px);
    background: #FFFFFF;
}
body[data-profile="psm"] .hero--cover {
    --cv-green: var(--navy);
    --cv-green-2: var(--orange);
}

/* --- the page's own artwork, supplied clean -------------------------------
   One asset carries the whole image layer: the diagonal green frame, both
   photographic panels, the dotted grids and the pale skyline. It holds no
   text - every string is live HTML over the top. */

.hero--cover .cv-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.hero--cover .cv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- the centre stack ---------------------------------------------------- */

.hero--cover .cv-core {
    max-width: clamp(540px, 60vw, 880px);
    margin-inline: auto;
    padding-block: clamp(28px, 3vw, 46px);
    text-align: center;
}

.hero--cover .cv-mark {
    display: block;
    width: clamp(60px, 7.4vw, 110px);
    height: auto;
    margin: 0 auto clamp(2px, .4vw, 6px);
}

/* the company name, set as live text at the page's own proportion:
   851px wide on a 1440 trim, 72px cap height */
/* The deck sets the name 851px wide at a 72px cap height on a 1440 trim.
   Archivo carries the right weight and cap ratio but is narrower than the
   deck's face, so the cap height is matched by size and the remaining width
   by a horizontal scale - the same correction the display headings use. */
.hero--cover .cv-name {
    display: inline-block;
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(24px, 4.7vw, 66px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.012em;
    color: var(--cv-red);
    white-space: nowrap;
    transform: scaleX(.944);
}

/* the dotted rule: two fading hairlines flanking three dots */
.hero--cover .cv-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: clamp(12px, 1.3vw, 20px) 0 clamp(12px, 1.4vw, 22px);
}
.hero--cover .cv-rule i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cv-green);
}
.hero--cover .cv-rule::before,
.hero--cover .cv-rule::after {
    content: "";
    width: clamp(60px, 8.5vw, 130px);
    height: 1.6px;
    background: linear-gradient(90deg, rgba(30, 107, 34, 0), var(--cv-green));
    margin-inline: 6px;
}
.hero--cover .cv-rule::after { transform: scaleX(-1); }

.hero--cover .cv-pin {
    display: block;
    width: clamp(17px, 1.8vw, 26px);
    height: auto;
    margin: 0 auto clamp(6px, .8vw, 12px);
    fill: var(--cv-green);
}

.hero--cover .cv-office {
    margin: 0 0 clamp(6px, .8vw, 12px);
    font-family: var(--f-head);
    font-size: clamp(18px, 2.1vw, 31px);
    font-weight: 800;
    letter-spacing: -.004em;
    line-height: 1.16;
    color: var(--cv-green);
}

.hero--cover .cv-addr {
    font-style: normal;
    font-size: clamp(14px, 1.5vw, 22px);
    line-height: 1.52;
    color: var(--cv-ink);
}

/* the hairline with a centre dot that closes the address block */
.hero--cover .cv-hr {
    position: relative;
    width: clamp(200px, 26vw, 380px);
    height: 1.4px;
    margin: clamp(16px, 2vw, 30px) auto clamp(18px, 2.2vw, 34px);
    background: linear-gradient(90deg,
        rgba(30, 107, 34, 0), var(--cv-green-2) 22%,
        var(--cv-green-2) 78%, rgba(30, 107, 34, 0));
}
.hero--cover .cv-hr::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--cv-green);
}

/* --- the four value badges ---------------------------------------------- */

/* Page 01 spaces the four badges on a 197px pitch with 90px circles, giving
   a row that spans a little under half the trim. The columns carry that pitch
   so the row keeps its proportion instead of closing up. */
.hero--cover .cv-values {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.hero--cover .cv-value {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, .7vw, 10px);
    min-width: clamp(72px, 10.5vw, 150px);
}
.hero--cover .cv-value + .cv-value::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px; bottom: 4px;
    width: 1px;
    background: #D8DFD6;
}
.hero--cover .cv-badge {
    display: grid;
    place-items: center;
    width: clamp(42px, 4.9vw, 72px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cv-green);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.6px var(--cv-green-2);
}
.hero--cover .cv-badge svg { width: 54%; height: 54%; fill: #fff; stroke: #fff; stroke-width: 0; }
.hero--cover .cv-label {
    font-family: var(--f-head);
    font-size: clamp(9.5px, 1vw, 14px);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cv-green);
}

.hero--cover .cv-strap {
    max-width: 44ch;
    margin: clamp(14px, 1.5vw, 22px) auto clamp(26px, 2.9vw, 42px);
    font-family: var(--f-head);
    font-size: clamp(15px, 1.7vw, 21px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.006em;
    color: var(--cv-green);
}

.hero--cover .cv-cta {
    display: inline-block;
    margin-top: clamp(18px, 2vw, 28px);
    padding: 0.85rem 2rem;
    background-color: var(--green-forest);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: .01em;
    transition: all 0.25s ease;
}

.hero--cover .cv-cta:hover {
    background-color: var(--green-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
    .hero--cover .cv-core { max-width: 560px; }
}

@media (max-width: 767px) {
    .hero--cover { aspect-ratio: auto; min-height: 0; }
    /* the artwork's frame is decorative; on a narrow screen it is allowed to
       crop so the lockup keeps the full width */
    .hero--cover .cv-bg img { object-position: 50% 42%; }
    .hero--cover .cv-core { max-width: none; padding-block: 30px 34px; }
    .hero--cover .cv-mark { width: 62px; }
    .hero--cover .cv-name { font-size: clamp(21px, 6.8vw, 27px); letter-spacing: -.01em; transform: scaleX(.93); }
    .hero--cover .cv-rule::before,
    .hero--cover .cv-rule::after { width: 46px; margin-inline: 5px; }
    .hero--cover .cv-office { font-size: 19px; }
    .hero--cover .cv-addr { font-size: 14.5px; }
    .hero--cover .cv-values { gap: 14px 0; }
    .hero--cover .cv-value { min-width: 50%; }
    .hero--cover .cv-value + .cv-value::before { display: none; }
    .hero--cover .cv-badge { width: 48px; }
    .hero--cover .cv-label { font-size: 9.5px; letter-spacing: .08em; }
}


/* ==========================================================================
   REFLOW WITH ROOM  ·  620 - 1199

   Reflow was written for a phone: one column, every card full width. At the
   new breakpoint it also has to serve 1024 and 1180, where a single column
   leaves most of the window empty and sets three words to a line. Once the
   composition has real width its cards flow into as many columns as fit and
   the page header goes back to the band it occupies on the source page.

   Nothing here changes what is on the page. It is column count and gap only.
   ========================================================================== */
@media (max-width: 1199px) and (min-width: 620px) {

    body.is-reflow .pg-02 .tB {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
        gap: 16px;
        align-items: start;
    }
    body.is-reflow .pg-02 .tB > * { margin-bottom: 0; }

    /* The header band and the commitments strip run the full width, as on
       the page. Everything between them is a card and takes one column. */
    body.is-reflow .pg-02 .tB-head,
    body.is-reflow .pg-02 .tB-values { grid-column: 1 / -1; }

    body.is-reflow .pg-02 .tB-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        row-gap: 4px;
        text-align: center;
    }
    body.is-reflow .pg-02 .tB-head > * { margin-bottom: 0; }
    body.is-reflow .pg-02 .tB-photo {
        width: 100%;
        height: auto;
        border-radius: 10px;
        align-self: stretch;
        object-fit: cover;
    }
    body.is-reflow .pg-02 .tB-photo--l { grid-column: 1; grid-row: 1 / span 2; }
    body.is-reflow .pg-02 .tB-photo--r { grid-column: 3; grid-row: 1 / span 2; }
    body.is-reflow .pg-02 .tB-title    { grid-column: 2; grid-row: 1; }
    body.is-reflow .pg-02 .tB-strap    { grid-column: 2; grid-row: 2; }

    body.is-reflow .pg-02 .tB-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 16px 18px 18px;
    }
    body.is-reflow .pg-02 .tB-values {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px 18px;
    }
    body.is-reflow .pg-02 .tB-value { margin-bottom: 0; }
}

/* The list rhythm and the card watermarks, at every reflowed width. The
   generic reset gives each returning child a 14px margin, which is right for
   a heading and much too loose for a service list; and the watermark artwork
   sits behind the list on the page, so at full column width it dominated the
   card it is meant to sit behind. */
@media (max-width: 1199px) {
    body.is-reflow .pg-02 .tB-list > li { margin-bottom: 3px; }
    body.is-reflow .pg-02 .tB-art {
        display: block;
        width: auto;
        max-width: 46%;
        max-height: 104px;
        margin: 10px 0 0 auto;
        object-fit: contain;
    }
}

/* ==== PAGE COMPOSITION STYLES (from Assets/css/pages/*.css) ==== */


/* ==========================================================================
   PAGE 01 · COVER                                            Template A
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-01 .tA {
    --accent: var(--green-dark);
    --accent-2: var(--green-mid);
    background: #fff;
}

/* --- side assemblies ------------------------------------------------------ */
.pg-01 .tA-frame {
    position: absolute;
    top: 0;
    width: 432px;
    height: 810px;
    object-fit: cover;
}
.pg-01 .tA-frame--l { left: 0; }
.pg-01 .tA-frame--r { left: 1008px; }

/* --- foot skyline --------------------------------------------------------- */
.pg-01 .tA-sky {
    position: absolute;
    left: 236px;
    top: 636px;
    width: 980px;
    height: 174px;
    z-index: 1;
}

/* --- dotted grid ---------------------------------------------------------- */
.pg-01 .tA-dotsgrid {
    position: absolute;
    left: 160px;
    top: 128px;
    width: 76px;
    height: 76px;
    z-index: 2;
}

/* --- centre column -------------------------------------------------------- */
.pg-01 .tA-core {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    text-align: center;
}

.pg-01 .tA-mark {
    position: absolute;
    left: 653px;
    top: 36px;
    width: 176px;
    height: 110px;
}

.pg-01 .tA-word {
    position: absolute;
    left: 324px;
    top: 166px;
    width: 853px;
    height: 95px;
}
.pg-01 .tA-word img { width: 100%; height: 100%; }

/* rule · three dots · rule */
.pg-01 .tA-div {
    position: absolute;
    left: 0;
    right: 0;
    top: 274px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-left: 20px;   /* the source group is centred on x=730, not 720 */
}
.pg-01 .tA-div-rule {
    display: block;
    width: 104px;
    height: 2px;
    background: var(--green-dark);
    opacity: .85;
}
.pg-01 .tA-div-dot {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--green-dark);
}

.pg-01 .tA-pin {
    position: absolute;
    left: 698px;
    top: 314px;
    width: 46px;
    height: 60px;
}
.pg-01 .tA-pin svg {
    width: 100%;
    height: 100%;
    fill: var(--green-dark);
    stroke: none;
}

.pg-01 .tA-office {
    position: absolute;
    left: 0;
    right: 0;
    top: 382px;
    padding-left: 20px;
    font-family: var(--f-head);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--green-dark);
}

.pg-01 .tA-addr {
    position: absolute;
    left: 0;
    right: 0;
    top: 430px;
    padding-left: 20px;
    font-style: normal;
    font-size: 19px;
    line-height: 1.52;
    color: #3B3B3B;
}

.pg-01 .tA-hr {
    position: absolute;
    left: 605px;
    top: 541px;
    width: 228px;
    height: 2px;
    background: var(--green-mid);
}
.pg-01 .tA-hr::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--green-mid);
    transform: translate(-50%, -50%);
}

/* --- four value badges ---------------------------------------------------- */
.pg-01 .tA-values {
    position: absolute;
    left: 324px;
    top: 582px;
    width: 788px;
    display: flex;
}
.pg-01 .tA-val {
    flex: 1 1 0;
    position: relative;
    text-align: center;
}
.pg-01 .tA-val + .tA-val::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 2px;
    height: 100px;
    background: var(--green-mid);
    opacity: .55;
}
.pg-01 .tA-val .badge {
    --bs: 88px;
    --bf: radial-gradient(circle at 34% 26%, #3C8A3F 0%, #1D5C22 46%, #0A3A10 100%);
    margin: 0 auto 10px;
    box-shadow: 0 0 0 5px #fff, 0 5px 14px rgba(10, 40, 14, .28);
}
.pg-01 .tA-val .badge svg { width: 56%; height: 56%; }

.pg-01 .tA-val-label {
    display: inline-block;
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .045em;
    color: var(--green-dark);
}
.pg-01 .tA-val-label::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin: 7px auto 0;
    background: var(--green-mid);
}

/* ==========================================================================
   PAGE 02 · OUR SERVICES                                     Template B
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-02 .tB {
    --accent: #05320A;          /* pill / heading forest green, sampled       */
    --accent-2: #05320A;
    --accent-soft: #E8F2E4;
    --body: #3A3A3A;
    /* the deck sets body copy in a narrow humanist grotesque; Liberation Sans
       is the closest metric match available when Inter has not loaded        */
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
    background: #FEFEFE;
}

/* the two display faces used on this page */
.pg-02 .tB-title {
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
}

/* The card headings are set in a condensed face on the page. Measured against
   the source, every pill in Archivo came out ~1.23x too wide, which is why the
   three longest ones ran past their card. Archivo Narrow is the face the page
   actually uses; on it the eight measured pill widths land within a few pixels
   of the source and nothing is clipped. */
.pg-02 .tB-pill,
.pg-02 .tB-brsr {
    font-family: "Archivo Narrow", "Archivo SemiCondensed", "Oswald",
                 "Barlow Condensed", "TeX Gyre Heros Cn",
                 "Liberation Sans Narrow", "Arial Narrow", sans-serif;
}


/* --- header band ---------------------------------------------------------
   Two photographic assemblies, each carrying its own green swoosh; neither
   holds any text, so each is one extracted asset. The rule, its terminal dot
   and the strapline over them are live HTML.
-------------------------------------------------------------------------- */
.pg-02 .tB-head {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 157px;
}
.pg-02 .tB-photo { position: absolute; top: 0; height: 157px; }
.pg-02 .tB-photo--l { left: 0;      width: 415px; }
.pg-02 .tB-photo--r { left: 1085px; width: 355px; }

.pg-02 .tB-title {
    position: absolute;
    left: 0; right: 0; top: 3.7px;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    font-size: 109px;
    line-height: 96px;
    letter-spacing: 0;
    color: var(--accent);
    text-transform: uppercase;
    /* The source wordmark is set in a heavy condensed face; Archivo is wider,
       so the line is condensed back onto the span measured off the page,
       450 - 1030 px. The origin is chosen so the scaled centre lands on the
       source centre, 740. */
    transform: scaleX(.706);
    transform-origin: 790px 0;
}

.pg-02 .tB-rule {
    position: absolute;
    left: 425px; top: 115px;
    width: 612px; height: 2px;
    background: #2A3B2E;
}
.pg-02 .tB-rule::before {
    content: "";
    position: absolute;
    left: -4px; top: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #0A2A12;
    transform: translateY(-50%);
}
.pg-02 .tB-leaf {
    position: absolute;
    left: 1032px; top: 99px;
    width: 50px; height: 54px;
}

.pg-02 .tB-strap {
    position: absolute;
    left: 470px; top: 125px;
    width: 559px;
    text-align: center;
    white-space: nowrap;
    font-size: 20.6px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    color: #1E1E1E;
}


/* --- cards ---------------------------------------------------------------
   Nine rounded white cards on a three-column grid. Measured edges:
   columns x = 15 / 486 / 920, row splits y = 158 / 404 / 437 / 544 / 641 /
   713. The BRSR card is the one that breaks the grid, running from x = 486
   to x = 996.
-------------------------------------------------------------------------- */
.pg-02 .tB-card {
    position: absolute;
    padding: 0;
    border-radius: 14px;
    border: 1px solid #DCE0DA;
    background: #fff;
    box-shadow: 0 1px 4px rgba(20, 30, 20, .07);
    overflow: hidden;
}
.pg-02 .tB-card--a { left: 15px;  top: 158px; width: 473px; height: 246px; }
.pg-02 .tB-card--b { left: 15px;  top: 405px; width: 473px; height: 139px; }
.pg-02 .tB-card--c { left: 15px;  top: 545px; width: 473px; height: 168px; }
.pg-02 .tB-card--d { left: 486px; top: 158px; width: 437px; height: 279px; }
.pg-02 .tB-card--e { left: 486px; top: 438px; width: 437px; height: 203px; }
.pg-02 .tB-card--f { left: 486px; top: 642px; width: 510px; height: 71px; z-index: 3; }
.pg-02 .tB-card--g { left: 920px; top: 158px; width: 504px; height: 279px; }
.pg-02 .tB-card--h { left: 920px; top: 438px; width: 504px; height: 106px; }
.pg-02 .tB-card--i { left: 920px; top: 545px; width: 504px; height: 168px; }


/* --- dark-green pill heading + circular badge -----------------------------
   The pill runs underneath the badge, which is an opaque white disc, so the
   pill's left end is never visible. Values below are the pill's true box.
-------------------------------------------------------------------------- */
.pg-02 .tB-pill {
    position: absolute;
    display: block;
    padding: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}
.pg-02 .tB-badge {
    position: absolute;
    z-index: 2;
    --bs: 66px;
    --bf: var(--accent);
    background: #fff;
    border: 2.4px solid var(--accent);
    box-shadow: none;
    color: var(--accent);
}
.pg-02 .tB-badge svg { width: 62%; height: 62%; fill: var(--accent); stroke: none; }

.pg-02 .tB-card--a .tB-pill { left: 76px; top: 13px; min-width: 0; padding-right: 20px; height: 35px; line-height: 35px; padding-left: 22px; font-size: 19.8px; }
.pg-02 .tB-card--b .tB-pill { left: 73px; top: 16px; min-width: 0; padding-right: 20px; height: 33px; line-height: 33px; padding-left: 25px; font-size: 19.3px;   }
.pg-02 .tB-card--c .tB-pill { left: 71px; top: 18px; min-width: 0; padding-right: 20px; height: 34px; line-height: 34px; padding-left: 26px; font-size: 18.5px; }
.pg-02 .tB-card--d .tB-pill { left: 79px; top: 13px; min-width: 0; padding-right: 20px; height: 35px; line-height: 35px; padding-left: 35px; font-size: 21px; }
.pg-02 .tB-card--e .tB-pill { left: 66px; top: 13px; min-width: 0; padding-right: 20px; height: 32px; line-height: 32px; padding-left: 25px; font-size: 17.7px; }
.pg-02 .tB-card--g .tB-pill { left: 75px; top: 13px; min-width: 0; padding-right: 20px; height: 34px; line-height: 34px; padding-left: 29px; font-size: 20.7px; }
.pg-02 .tB-card--h .tB-pill { left: 72px; top: 17px; min-width: 0; padding-right: 20px; height: 33px; line-height: 33px; padding-left: 23px; font-size: 19.3px; }
.pg-02 .tB-card--i .tB-pill { left: 68px; top: 13px; min-width: 0; padding-right: 20px; height: 32px; line-height: 32px; padding-left: 24px; font-size: 16.3px; }

.pg-02 .tB-card--a .tB-badge { left: 19px; top: 7px;  }
.pg-02 .tB-card--b .tB-badge { left: 17px; top: 7px;  }
.pg-02 .tB-card--c .tB-badge { left: 15px; top: 10px; }
.pg-02 .tB-card--d .tB-badge { left: 23px; top: 8px;  }
.pg-02 .tB-card--e .tB-badge { left: 10px; top: 4px;  }
.pg-02 .tB-card--f .tB-badge { left: 12px; top: 3px; --bs: 60px; }
.pg-02 .tB-card--g .tB-badge { left: 19px; top: 9px;  }
.pg-02 .tB-card--h .tB-badge { left: 16px; top: 7px;  }
.pg-02 .tB-card--i .tB-badge { left: 12px; top: 4px;  }


/* --- bulleted lists ------------------------------------------------------- */
.pg-02 .tB-list {
    position: absolute;
    margin-left: 0;
    z-index: 2;
}
.pg-02 .tB-list li {
    margin: 0 0 0;
    color: var(--body);
    letter-spacing: 0;
}
.pg-02 .tB-list li::before {
    background: #3A3A3A;
    width: 4.6px; height: 4.6px;
    left: 0; top: .58em;
}

.pg-02 .tB-card--a .tB-list    { left: 97px; top: 53px; }
.pg-02 .tB-card--a .tB-list li { font-size: 14.1px; line-height: 21px; padding-left: 17px; }

.pg-02 .tB-card--b .tB-list    { left: 93px; top: 54px; }
.pg-02 .tB-card--b .tB-list li { font-size: 13.6px; line-height: 22.5px; padding-left: 16px; }

.pg-02 .tB-card--c .tB-list    { left: 91px; top: 58px; }
.pg-02 .tB-card--c .tB-list li { font-size: 13.4px; line-height: 22px; padding-left: 17px; }

.pg-02 .tB-card--d .tB-list    { left: 103px; top: 54px; width: 300px; }
.pg-02 .tB-card--d .tB-list li { font-size: 14.2px; line-height: 18px; padding-left: 18px; margin-bottom: 3px; }

.pg-02 .tB-card--e .tB-list    { left: 88px; top: 48px; }
.pg-02 .tB-card--e .tB-list li { font-size: 14.3px; line-height: 22px; padding-left: 18px; }

.pg-02 .tB-card--f .tB-list    { left: 84px; top: 33px; }
.pg-02 .tB-card--f .tB-list li { font-size: 12.8px; line-height: 19px; padding-left: 12px; }

.pg-02 .tB-card--g .tB-list    { left: 98px; top: 54px; }
.pg-02 .tB-card--g .tB-list li { font-size: 13px; line-height: 16.75px; padding-left: 16px; }

.pg-02 .tB-card--h .tB-list    { left: 91px; top: 53px; }
.pg-02 .tB-card--h .tB-list li { font-size: 14.1px; line-height: 21px; padding-left: 17px; }

.pg-02 .tB-card--i .tB-list    { left: 86px; top: 51px; }
.pg-02 .tB-card--i .tB-list li { font-size: 13.4px; line-height: 21px; padding-left: 16px; }


/* --- BRSR heading (green text, no pill) ----------------------------------- */
.pg-02 .tB-brsr {
    position: absolute;
    left: 84px; top: 6px;
    line-height: 22px;
    font-size: 19.4px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accent);
    white-space: nowrap;
}
.pg-02 .tB-brsr span { font-size: 14.1px; font-weight: 700; }


/* --- card artwork --------------------------------------------------------- */
.pg-02 .tB-art { position: absolute; }
.pg-02 .tB-art--wm      { left: 302px; top: 85px;  width: 140px; height: 155px; }
.pg-02 .tB-art--ext     { left: 358px; top: 0;     width: 115px; height: 139px; }
.pg-02 .tB-art--train   { left: 295px; top: 1px;   width: 178px; height: 167px; }
.pg-02 .tB-art--plant   { left: 9px;   top: 111px; width: 427px; height: 169px; }
.pg-02 .tB-art--binders { left: 44px;  top: 95px;  width: 390px; height: 105px; border-radius: 10px; }
.pg-02 .tB-art--globe   { left: 332px; top: 54px;  width: 172px; height: 226px; }
.pg-02 .tB-art--dojo    { left: 339px; top: 1px;   width: 165px; height: 154px; }


/* --- value strip ---------------------------------------------------------- */
.pg-02 .tB-values {
    position: absolute;
    left: 15px; top: 719px; right: auto; bottom: auto;
    width: 1409px; height: 77px;
    display: block;
    background: #fff;
    border: 1px solid #DCE0DA;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(20, 30, 20, .07);
}
.pg-02 .tB-value {
    position: absolute;
    top: 0; left: 0;
    display: block;
    padding: 0;
}
.pg-02 .tB-vbadge {
    position: absolute;
    --bs: 48px;
    --bf: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
}
.pg-02 .tB-vbadge svg { width: 100%; height: 100%; fill: var(--accent); stroke: none; }
.pg-02 .tB-value p {
    position: absolute;
    top: 14px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #2B2B2B;
    white-space: nowrap;
}

.pg-02 .tB-value--1 .tB-vbadge { left: 41px;   top: 10px; --bs: 48px; }
.pg-02 .tB-value--1 p          { left: 107px; }
.pg-02 .tB-value--2 .tB-vbadge { left: 319px;  top: 9px;  --bs: 56px; }
.pg-02 .tB-value--2 p          { left: 393px; }
.pg-02 .tB-value--3 .tB-vbadge { left: 630px;  top: 10px; --bs: 48px; }
.pg-02 .tB-value--3 p          { left: 690px; }
.pg-02 .tB-value--4 .tB-vbadge { left: 912px;  top: 11px; --bs: 54px; }
.pg-02 .tB-value--4 p          { left: 983px; }
.pg-02 .tB-value--5 .tB-vbadge { left: 1180px; top: 12px; --bs: 44px; }
.pg-02 .tB-value--5 p          { left: 1240px; }

/* hairline dividers between the five cells, measured at x = 282 / 600 / 890 / 1155 */
.pg-02 .tB-value--2::before,
.pg-02 .tB-value--3::before,
.pg-02 .tB-value--4::before,
.pg-02 .tB-value--5::before {
    content: "";
    position: absolute;
    top: 15px;
    width: 1.5px; height: 45px;
    background: #C9CDC6;
}
.pg-02 .tB-value--2::before { left: 266px; }
.pg-02 .tB-value--3::before { left: 584px; }
.pg-02 .tB-value--4::before { left: 874px; }
.pg-02 .tB-value--5::before { left: 1139px; }

/* Bullets are now real links to their service pages (the source page itself
   is static print content with no links) - kept visually identical to the
   plain black bullet text by inheriting colour and dropping the underline,
   with an underline only on hover/focus as the sole affordance that they're
   clickable. */
.pg-02 .tB-list li a {
    color: inherit;
    text-decoration: none;
}
.pg-02 .tB-list li a:visited { color: inherit; }
.pg-02 .tB-list li a:hover,
.pg-02 .tB-list li a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   PAGE 03 · ENVIRONMENTAL CONSULTING                          Template C
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-03 .tC {
    --accent: var(--green-leaf);
    --accent-2: var(--green-leaf);
    background: #001C33;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

.pg-03 .tC-bg { position: absolute; inset: 0; }
.pg-03 .tC-bg .photo { position: absolute; inset: 0; border-radius: 0; }

.pg-03 .tC-head { position: absolute; inset: 0; z-index: 2; }


/* --- two-tone display heading ---------------------------------------------
   Line 1 is white, line 2 bright leaf green and set slightly larger in the
   source. Both are condensed further onto their measured widths
   (ENVIRONMENTAL 28-732, CONSULTING 29-610) because the available stack is
   wider than the deck's condensed face.
-------------------------------------------------------------------------- */
.pg-03 .tC-title {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-03 .tC-title .l1,
.pg-03 .tC-title .l2 {
    position: absolute;
    left: 28px;
    white-space: nowrap;
    transform-origin: 0 0;
}
.pg-03 .tC-title .l1 {
    top: 35px;
    left: 22px;
    font-size: 110px;
    line-height: 107px;
    color: #FFFFFF;
}
.pg-03 .tC-title .l2 {
    top: 144px;
    left: 25px;
    font-size: 117px;
    line-height: 107px;
    color: var(--green-leaf);
}

/* thin green rule running out of the title into a leaf glyph */
.pg-03 .tC-rule {
    position: absolute;
    left: 30px; top: 278px;
    width: 592px; height: 3px;
    background: #66844F;
}
.pg-03 .tC-leaf {
    position: absolute;
    left: 620px; top: 248px;
    width: 56px; height: 44px;
}

.pg-03 .tC-lede {
    position: absolute;
    left: 25px; top: 306px;
    font-family: inherit;
    font-size: 33.4px;
    line-height: 45px;
    font-weight: 400;
    letter-spacing: 0;
    color: #F2F6FA;
}
.pg-03 .tC-lede .ld1,
.pg-03 .tC-lede .ld2 { display: inline-block; }


/* --- hairline dividers ----------------------------------------------------
   Measured at x = 280 / 570 / 860 / 1150, fading out top and bottom.
-------------------------------------------------------------------------- */
.pg-03 .tC-div {
    position: absolute;
    top: 437px;
    width: 1.6px; height: 368px;
    z-index: 2;
    background: linear-gradient(180deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.30) 16%,
                rgba(255,255,255,.30) 84%,
                rgba(255,255,255,0) 100%);
}
.pg-03 .tC-div--1 { left: 280px; }
.pg-03 .tC-div--2 { left: 570px; }
.pg-03 .tC-div--3 { left: 860px; }
.pg-03 .tC-div--4 { left: 1150px; }


/* --- five-step row --------------------------------------------------------
   Column centres measured at 136 / 425.5 / 715.5 / 1005 / 1294.5, i.e. five
   289.6px columns starting at x = -9.
-------------------------------------------------------------------------- */
.pg-03 .tC-steps {
    position: absolute;
    left: -9px; top: 440px;
    width: 1448px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
}
.pg-03 .tC-step {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    padding: 0;
}
.pg-03 .tC-step + .tC-step::before { content: none; }

.pg-03 .tC-step .badge {
    --bs: 149px;
    margin: 0 auto;
    box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 8px 22px rgba(0, 12, 24, .45);
}
.pg-03 .tC-step .badge svg { width: 60%; height: 60%; fill: #fff; stroke: none; }

.pg-03 .tC-step--1 .badge { --bf: radial-gradient(circle at 34% 28%, #5C8A22, #46701A); }
.pg-03 .tC-step--2 .badge { --bf: radial-gradient(circle at 34% 28%, #0A6070, #01505F); }
.pg-03 .tC-step--3 .badge { --bf: radial-gradient(circle at 34% 28%, #4B7620, #3C6115); }
.pg-03 .tC-step--4 .badge { --bf: radial-gradient(circle at 34% 28%, #0A5F9E, #004A83); }
.pg-03 .tC-step--5 .badge { --bf: radial-gradient(circle at 34% 28%, #2E8639, #23702D); }

.pg-03 .tC-step-label {
    margin: 23px 0 0;
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 40px;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.pg-03 .tC-step--1 .tC-step-label { color: #6E9548; font-size: 37.3px; }
.pg-03 .tC-step--2 .tC-step-label { color: #2C7B88; font-size: 39.2px; }
.pg-03 .tC-step--3 .tC-step-label { color: #6B924A; font-size: 36.8px; }
.pg-03 .tC-step--4 .tC-step-label { color: #36709B; font-size: 40.8px; }
.pg-03 .tC-step--5 .tC-step-label { color: #5C9048; font-size: 39.5px; }

.pg-03 .tC-step-desc {
    margin: 8px 0 0;
    font-size: 22.4px;
    line-height: 33px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255,255,255,.96);
}

/* ==========================================================================
   PAGE 04 · ENVIRONMENTAL MANAGEMENT SYSTEM (EMS)             Template D
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-04 .tD {
    --accent: var(--green-forest);
    --accent-2: var(--navy);
    --node-g: #3F6214;          /* green node badge, sampled                  */
    --node-n: #092B4B;          /* navy node badge, sampled                  */
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
    /* white page carrying a soft pale-green wash in the two left corners */
    background:
        radial-gradient(420px 300px at -40px -30px,  #DDE5CD 0%, rgba(221,229,205,0) 72%),
        radial-gradient(430px 320px at -30px 840px,  #DCE4CC 0%, rgba(220,228,204,0) 74%),
        #FBFBF9;
}

.pg-04 .tD-left { position: absolute; inset: 0; }

/* --- three-line display heading -------------------------------------------
   The deck sets this in a much more condensed face than page 03: line 1 is
   570px wide at an 82px cap height. Each line is scaled back onto its
   measured width from a left origin.
-------------------------------------------------------------------------- */
.pg-04 .tD-title {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-04 .tD-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    line-height: 100px;
    transform-origin: 0 0;
}
.pg-04 .tD-title .l1 { left: 22px; top: 2px;   font-size: 110px;  color: var(--green-forest); }
.pg-04 .tD-title .l2 { left: 24px; top: 94px;  font-size: 76.7px; color: var(--navy); }
.pg-04 .tD-title .l3 { left: 26px; top: 170px; font-size: 60.6px; color: var(--green-forest); }

/* --- quotation marks and their short rules -------------------------------- */
.pg-04 .tD-qm { position: absolute; fill: #2E5514; }
.pg-04 .tD-qm--open  { left: 22px;  top: 288px; width: 34px; height: 27px; }
.pg-04 .tD-qm--close { left: 286px; top: 791px; width: 30px; height: 24px; transform: rotate(180deg); }
.pg-04 .tD-qrule { position: absolute; height: 1.6px; background: #9A9A8E; }
.pg-04 .tD-qrule--open  { left: 66px;  top: 300px; width: 42px; }
.pg-04 .tD-qrule--close { left: 327px; top: 804px; width: 46px; }

/* --- quote body ------------------------------------------------------------ */
.pg-04 .tD-quote {
    position: absolute;
    left: 72px; top: 309px;
    width: 420px;
    padding-left: 0;
}
.pg-04 .tD-quote::before { content: none; }
.pg-04 .tD-quote p {
    font-size: 26.2px;
    line-height: 34.3px;
    letter-spacing: 0;
    color: #4B4B4B;
}
.pg-04 .tD-quote p + p { margin-top: 25.6px; }
.pg-04 .tD-quote strong { font-weight: 700; color: #4E8A2F; }

/* --- central photo hub -----------------------------------------------------
   The source masks the photograph into an oval; measured bounding box is
   x 574-1044, y 152-689.
-------------------------------------------------------------------------- */
.pg-04 .tD-hub {
    position: absolute;
    left: 574px; top: 152px;
    width: 470px; height: 537px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(255,255,255,.92), 0 14px 40px -18px rgba(30, 50, 20, .45);
}

/* --- orbit arc -------------------------------------------------------------
   One circle, centre (751, 404) radius 370, drawn from the upper-left ring
   terminal clockwise to the lower-left one.
-------------------------------------------------------------------------- */
.pg-04 .tD-orbit {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}

/* --- five nodes ------------------------------------------------------------ */
.pg-04 .tD-nodes { position: absolute; inset: 0; }
.pg-04 .tD-node { position: absolute; display: block; }
.pg-04 .tD-node .badge {
    position: absolute;
    --bs: 114px;
    box-shadow: 0 0 0 5px #FFFFFF, 0 8px 20px -10px rgba(20, 40, 15, .5);
}
.pg-04 .tD-node .badge svg { width: 58%; height: 58%; fill: #fff; stroke: none; }
.pg-04 .tD-node-body { position: absolute; width: auto; }

.pg-04 .tD-node-title {
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 24.4px;
    line-height: 29px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}
.pg-04 .tD-node-desc {
    font-size: 17.5px;
    line-height: 25px;
    letter-spacing: 0;
    color: #6A6A6A;
    white-space: nowrap;
}

/* node 1 · POLICIES & PROCEDURES */
.pg-04 .tD-node--1 .badge      { left: 829px; top: 5px; --bf: #264A14; --bs: 115px; }
.pg-04 .tD-node--1 .tD-node-body { left: 992px; top: 0; }
.pg-04 .tD-node--1 .tD-node-title { color: #2C5E1E; font-size: 24.1px; padding-top: 5.6px; }
.pg-04 .tD-node--1 .tD-node-desc  { margin-top: 8.9px; }

/* node 2 · REGULATORY COMPLIANCE */
.pg-04 .tD-node--2 .badge      { left: 1010px; top: 155px; --bf: var(--node-n); }
.pg-04 .tD-node--2 .tD-node-body { left: 1163px; top: 169px; }
.pg-04 .tD-node--2 .tD-node-title { color: var(--navy); font-size: 23.9px; padding-top: 5.6px; }
.pg-04 .tD-node--2 .tD-node-desc  { margin-top: 8.9px; }

/* node 3 · MONITORING & MEASUREMENT */
.pg-04 .tD-node--3 .badge      { left: 1062px; top: 377px; --bf: var(--node-g); --bs: 112px; }
.pg-04 .tD-node--3 .tD-node-body { left: 1207px; top: 389px; }
.pg-04 .tD-node--3 .tD-node-title { color: #2C5E1E; font-size: 24.9px; padding-top: 5.6px; }
.pg-04 .tD-node--3 .tD-node-desc  { margin-top: 8.9px; }

/* node 4 · CONTINUAL IMPROVEMENT */
.pg-04 .tD-node--4 .badge      { left: 996px; top: 585px; --bf: var(--node-n); }
.pg-04 .tD-node--4 .tD-node-body { left: 1144px; top: 596px; }
.pg-04 .tD-node--4 .tD-node-title { color: var(--navy); font-size: 25.8px; padding-top: 5.6px; }
.pg-04 .tD-node--4 .tD-node-desc  { margin-top: 8.9px; }

/* node 5 · RISK & RESOURCE MANAGEMENT — description is cropped off the page */
.pg-04 .tD-node--5 .badge      { left: 776px; top: 708px; --bf: #43670F; --bs: 110px; }
.pg-04 .tD-node--5 .tD-node-body { left: 923px; top: 740px; }
.pg-04 .tD-node--5 .tD-node-title { color: #2C5E1E; font-size: 23.9px; padding-top: 5.6px; }

/* ==========================================================================
   PAGE 05 · ENVIRONMENTAL, SOCIAL AND GOVERNANCE (ESG)        Template D
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-05 .tD {
    --accent: var(--green-forest);
    --accent-2: var(--navy);
    --esg-green: #4A7A22;
    --esg-navy: #17365D;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
    background: #FDFDFD;
}

.pg-05 .tD-corner {
    position: absolute;
    left: 0; top: 730px;
    width: 66px; height: 80px;
}

.pg-05 .tD-left { position: absolute; inset: 0; z-index: 3; }

/* --- four-line display heading -------------------------------------------- */
.pg-05 .tD-title {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-05 .tD-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    line-height: 100px;
    transform-origin: 0 0;
}
.pg-05 .tD-title .l1 { left: 5px;  top: 37px;  font-size: 86px; color: var(--green-forest); }
.pg-05 .tD-title .l2 { left: 8px;  top: 121px; font-size: 86px; color: var(--navy); }
.pg-05 .tD-title .l3 { left: 11px; top: 204px; font-size: 88px; color: var(--green-forest); }
.pg-05 .tD-title .l4 { left: 11px; top: 281px; font-size: 60px; color: var(--navy); }

/* thin rule under the title, fading out to the right */
.pg-05 .tD-titlerule {
    position: absolute;
    left: 14px; top: 392px;
    width: 415px; height: 2.5px;
    background: linear-gradient(90deg, #40603C 0%, #9BA894 52%, rgba(255,255,255,0) 100%);
}

/* --- quotation marks and the closing rule --------------------------------- */
.pg-05 .tD-qm { position: absolute; fill: #2E5514; }
.pg-05 .tD-qm--open  { left: 14px;  top: 423px; width: 29px; height: 26px; }
.pg-05 .tD-qm--close { left: 180px; top: 766px; width: 33px; height: 26px; transform: rotate(180deg); }
.pg-05 .tD-qrule {
    position: absolute;
    left: 110px; top: 775px;
    width: 57px; height: 2px;
    background: #ADB3A4;
}

/* --- quote body ------------------------------------------------------------ */
.pg-05 .tD-quote {
    position: absolute;
    left: 66px; top: 426px;
    width: 470px;
    padding-left: 0;
}
.pg-05 .tD-quote::before { content: none; }
.pg-05 .tD-quote p {
    font-size: 22px;
    line-height: 32.3px;
    letter-spacing: 0;
    color: #3A3A3A;
}
.pg-05 .tD-quote p + p { margin-top: 25.8px; }
.pg-05 .tD-quote strong { font-weight: 700; color: #4E8A2F; }

/* --- central 3D render -----------------------------------------------------
   The 'ESG' lettering is baked into the render, so it stays in the asset and
   is carried in the alt text rather than repeated as live type.
-------------------------------------------------------------------------- */
.pg-05 .tD-render {
    position: absolute;
    left: 722px; top: 220px;
    width: 484px; height: 552px;
    z-index: 2;
}

/* --- connector arcs -------------------------------------------------------- */
.pg-05 .tD-links {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 3;
    overflow: visible;
}

/* --- three nodes ----------------------------------------------------------- */
.pg-05 .tD-nodes { position: absolute; inset: 0; z-index: 4; }
.pg-05 .tD-node { position: absolute; display: block; }
.pg-05 .tD-node .badge {
    position: absolute;
    --bs: 120px;
    box-shadow: 0 0 0 5px #FFFFFF, 0 8px 22px -12px rgba(15, 35, 60, .55);
}
.pg-05 .tD-node .badge svg { width: 56%; height: 56%; fill: #fff; stroke: none; }
.pg-05 .tD-node-body { position: absolute; width: auto; }

.pg-05 .tD-node-title {
    font-family: "Archivo", "Archivo Narrow", "Oswald", "Barlow Condensed",
                 "TeX Gyre Heros Cn", "Liberation Sans Narrow",
                 "Arial Narrow", sans-serif;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}
.pg-05 .tD-node-list li {
    position: relative;
    padding-left: 17px;
    color: #3A3A3A;
    letter-spacing: 0;
    white-space: nowrap;
}
.pg-05 .tD-node-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .58em;
    width: 6px; height: 6px;
    border-radius: 50%;
}

/* ENVIRONMENTAL node */
.pg-05 .tD-node--env .badge        { left: 886px; top: 60px; --bs: 121px; --bf: #4A7A22; }
.pg-05 .tD-node--env .tD-node-body { left: 1071px; top: 99px; }
.pg-05 .tD-node--env .tD-node-title { color: var(--esg-green); font-size: 24.6px; }
.pg-05 .tD-node--env .tD-node-list  { position: absolute; left: 0; top: 33.5px; }
.pg-05 .tD-node--env .tD-node-list li { font-size: 16.8px; line-height: 28px; }
.pg-05 .tD-node--env .tD-node-list li::before { background: #6C9A32; }

/* SOCIAL node */
.pg-05 .tD-node--soc .badge        { left: 567px; top: 353px; --bs: 120px; --bf: #17365D; }
.pg-05 .tD-node--soc .tD-node-body { left: 528px; top: 511px; }
.pg-05 .tD-node--soc .tD-node-title { color: var(--esg-navy); font-size: 22.3px; padding-left: 56px; }
.pg-05 .tD-node--soc .tD-node-list  { position: absolute; left: 0; top: 48px; }
.pg-05 .tD-node--soc .tD-node-list li { font-size: 16.5px; line-height: 30.3px; }
.pg-05 .tD-node--soc .tD-node-list li::before { background: #2C5486; }

/* GOVERNANCE node */
.pg-05 .tD-node--gov .badge        { left: 1229px; top: 354px; --bs: 118px; --bf: #17365D; }
.pg-05 .tD-node--gov .tD-node-body { left: 1208px; top: 511px; }
.pg-05 .tD-node--gov .tD-node-title { color: var(--esg-navy); font-size: 22.9px; padding-left: 17px; }
.pg-05 .tD-node--gov .tD-node-list  { position: absolute; left: 0; top: 47px; }
.pg-05 .tD-node--gov .tD-node-list li { font-size: 16.2px; line-height: 30.7px; }
.pg-05 .tD-node--gov .tD-node-list li::before { background: #2C5486; }

/* ==========================================================================
   PAGE 06 · BRSR — BUSINESS RESPONSIBILITY AND SUSTAINABILITY REPORTING
                                                              Template E
   All coordinates measured off the 1440 x 810 source page. The poster
   artboard itself only spans x 69 - 1371; everything outside that is bare
   white paper, and the two right-hand panels run off the trim at x 1371.
   ========================================================================== */

.pg-06 .tE {
    --accent:      #054207;      /* display green, sampled off "BRSR"        */
    --pill:        #05420A;      /* section pill fill                        */
    --disc:        #0A4906;      /* solid icon disc                          */
    --panel:       #F8F9F2;      /* panel fill                               */
    --panel-line:  #E7E9E0;      /* panel hairline                           */
    --paper6:      #FBFCF6;      /* poster paper                             */
    background: #FFFFFF;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

.pg-06 .p06-poster {
    position: absolute;
    left: 69px; top: 0;
    width: 1302px; height: 810px;
    background: var(--paper6);
    overflow: hidden;
}
/* every child is placed in poster-local coordinates = design x - 69 */
.pg-06 .p06-poster > * { position: absolute; }


/* --- header ---------------------------------------------------------------
   Photo band, trimmed at the poster edge. The blurred leaf that sits under
   the tagline belongs to this band, so it travels with the asset and is not
   redrawn; the fragment of the word AND that the band overlapped was erased
   from the asset because that word is set as live text below.
-------------------------------------------------------------------------- */
.pg-06 .p06-photo {
    left: 936px; top: 0;
    width: 366px; height: 217px;
    object-fit: cover;
}

.pg-06 .p06-title { position: absolute; left: 0; top: 0; right: 0; margin: 0; }
.pg-06 .p06-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    font-family: "Archivo", "Archivo Narrow", "Barlow Condensed",
                 "Liberation Sans Narrow", "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    transform-origin: 0 0;
}
/* "BRSR": 267px wide over a 99px cap height */
.pg-06 .p06-brsr { left: 25px; top: 5.5px; font-size: 138px; line-height: 138px; }
/* the two-line expansion: 39px cap height */
.pg-06 .p06-t1   { left: 330px; top: 21.2px; font-size: 54.5px; line-height: 54.5px; }
.pg-06 .p06-t2   { left: 330px; top: 77.2px; font-size: 54.5px; line-height: 54.5px; }

.pg-06 .p06-tag {
    left: 331px; top: 137px;
    font-size: 22.3px;
    line-height: 30px;
    font-weight: 400;
    color: #55595A;
    white-space: nowrap;
}

.pg-06 .p06-rule {
    left: 25px; top: 180.4px;
    width: 948px; height: 2.4px;
    background: #AFC0AE;
}
.pg-06 .p06-rule-dot {
    left: 20.5px; top: 177.1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #2C4A2D;
}


/* --- panel shells ---------------------------------------------------------- */
.pg-06 .p06-panel {
    background: var(--panel);
    border: 1.4px solid var(--panel-line);
    border-radius: 15px;
}
.pg-06 .p06-panel--a { left:  12.5px; top: 216.5px; width: 659px;   height: 275px; }
.pg-06 .p06-panel--b { left: 683px;   top: 216.5px; width: 640px;   height: 378px; }
.pg-06 .p06-panel--c { left:  12.5px; top: 519px;   width: 659px;   height: 289.5px; }
.pg-06 .p06-panel--d { left: 683px;   top: 608px;   width: 640px;   height: 200.5px; }


/* --- section pill headings -------------------------------------------------
   A dark-green rounded bar whose left cap runs under a white disc badge. The
   bar, the disc and the label are placed separately so each lands on its own
   measured coordinates.
-------------------------------------------------------------------------- */
.pg-06 .p06-pill {
    height: 36px;
    background: var(--pill);
    border-radius: 18px;
}
.pg-06 .p06-pill--a { left:  43px;   top: 216.8px; width: 223px; }
.pg-06 .p06-pill--b { left: 721px; top: 216.8px; width: 238px; }
.pg-06 .p06-pill--c { left:  41px;   top: 512.5px; width: 337.5px; height: 33px; border-radius: 16.5px; }
.pg-06 .p06-pill--d { left: 705px;   top: 606.8px; width: 269.8px; height: 33px; border-radius: 16.5px; }

.pg-06 .p06-ph {
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 21px;
    letter-spacing: 0;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-06 .p06-ph--a { left:  88.5px; top: 224px; }
.pg-06 .p06-ph--b { left: 760.5px; top: 224px; }
.pg-06 .p06-ph--c { left:  74px;   top: 519px; font-size: 19.5px; line-height: 19.5px; }
.pg-06 .p06-ph--d { left: 749.5px; top: 613px; font-size: 19.5px; line-height: 19.5px; }

.pg-06 .p06-disc {
    display: grid;
    place-items: center;
    width: 55px; height: 55px;
    border-radius: 50%;
    background: #FDFEFA;
    border: 1.3px solid #C8D6C2;
}
.pg-06 .p06-disc svg { width: 40px; height: 40px; }
.pg-06 .p06-disc--a { left:  16px;   top: 207px; }
.pg-06 .p06-disc--b { left: 694px;   top: 207px; }
.pg-06 .p06-disc--c { left:  13.5px; top: 501.5px; }
.pg-06 .p06-disc--d { left: 677.5px; top: 596px; }


/* --- panel 1 · WHAT IS BRSR? ---------------------------------------------- */
.pg-06 .p06-a-body {
    left: 33.8px; top: 281px;
    z-index: 1;
    font-size: 19.7px;
    line-height: 27.76px;
    color: #454545;
    white-space: nowrap;
}
.pg-06 .p06-a-body b { font-weight: 700; letter-spacing: -.021em; color: #2F5B31; }

.pg-06 .p06-a-illo { left: 407px; top: 247px; width: 263px; height: 232px; z-index: 0; }


/* --- panel 2 · WHY BRSR MATTERS ------------------------------------------- */
.pg-06 .p06-b-rows { position: absolute; left: 0; top: 0; right: 0; }
.pg-06 .p06-b-row  { position: absolute; }
.pg-06 .p06-b-row .badge {
    position: absolute;
    left: 704.8px;
    --bs: 64px;
    --bf: var(--disc);
    box-shadow: none;
}
.pg-06 .p06-b-row .badge svg { width: 68%; height: 68%; }
.pg-06 .p06-b-row h3 {
    position: absolute;
    left: 780.8px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 16.1px;
    line-height: 16.1px;
    letter-spacing: -.012em;
    white-space: nowrap;
    color: #3A5A3C;
}
.pg-06 .p06-b-row p {
    position: absolute;
    left: 782.8px;
    font-size: 15.3px;
    line-height: 21.3px;
    letter-spacing: -.02em;
    color: #4A4A4A;
    white-space: nowrap;
}
.pg-06 .p06-b-row--1 .badge { top: 275.8px; }
.pg-06 .p06-b-row--1 h3     { top: 269.5px; }
.pg-06 .p06-b-row--1 p      { top: 289.5px; }
.pg-06 .p06-b-row--2 .badge { top: 387px; }
.pg-06 .p06-b-row--2 h3     { top: 377px; }
.pg-06 .p06-b-row--2 p      { top: 396.5px; }
.pg-06 .p06-b-row--3 .badge { top: 506.8px; }
.pg-06 .p06-b-row--3 h3     { top: 508px; }
.pg-06 .p06-b-row--3 p      { top: 527.5px; }

.pg-06 .p06-dash {
    left: 703.5px;
    width: 588px; height: 1.5px;
    background: repeating-linear-gradient(90deg,
                #C4D2BE 0 5px, rgba(0,0,0,0) 5px 11px);
}
.pg-06 .p06-dash--1 { top: 362.5px; }
.pg-06 .p06-dash--2 { top: 491.8px; }


/* --- panel 3 · ESG PILLARS ------------------------------------------------
   Three sub-cards. The letter badge and the pillar heading sit on the card's
   own top border, masking it — that is the notch the source shows.
-------------------------------------------------------------------------- */
.pg-06 .p06-pillar {
    top: 583.5px;
    height: 205px;
    border: 1.3px solid #E2E6DE;
    border-radius: 11px;
}
.pg-06 .p06-pillar--e { left:  23px;  width: 210.5px; }
.pg-06 .p06-pillar--s { left: 241px;  width: 202.5px; }
.pg-06 .p06-pillar--g { left: 451px;  width: 204px; }

.pg-06 .p06-letter {
    position: absolute;
    top: -15.5px;
    z-index: 2;
    width: 29px; height: 29px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #FFFFFF;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 0 0 4px var(--panel);
}
.pg-06 .p06-pillar--e .p06-letter { left: 18.5px; background: #4A7A2B; }
.pg-06 .p06-pillar--s .p06-letter { left: 18px;   background: #2C517F; }
.pg-06 .p06-pillar--g .p06-letter { left: 19.5px; background: #6A3FA0; }

.pg-06 .p06-pillar-h {
    position: absolute;
    top: -12.5px;
    padding: 0 4px 0 0;
    background: var(--panel);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.9px;
    line-height: 19px;
    letter-spacing: .055em;
    white-space: nowrap;
}
.pg-06 .p06-pillar--e .p06-pillar-h { left: 54px; color: #3A6A36; }
.pg-06 .p06-pillar--s .p06-pillar-h { left: 45px;   color: #30527A; }
.pg-06 .p06-pillar--g .p06-pillar-h { left: 45px;   color: #50437A; }

.pg-06 .p06-pillar-illo { position: absolute; }
.pg-06 .p06-pillar--e .p06-pillar-illo { left: 77.2px; top: 26.5px; width: 59.3px; height: 50.2px; }
.pg-06 .p06-pillar--s .p06-pillar-illo { left: 65.8px; top: 22px;   width: 74.2px; height: 51px; }
.pg-06 .p06-pillar--g .p06-pillar-illo { left: 74px;   top: 19.7px; width: 57px;   height: 57.8px; }

.pg-06 .p06-bullets { position: absolute; top: 84px; }
.pg-06 .p06-pillar--e .p06-bullets { left: 16.2px; }
.pg-06 .p06-pillar--s .p06-bullets { left: 18.2px; }
.pg-06 .p06-pillar--g .p06-bullets { left: 16.8px; }
.pg-06 .p06-bullets li {
    position: relative;
    padding-left: 9px;
    height: 20.05px;
    font-size: 11.1px;
    line-height: 20.05px;
    color: #4E4E4C;
    white-space: nowrap;
}
.pg-06 .p06-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 2.6px; height: 2.6px;
    border-radius: 50%;
    background: #6E6E6C;
}


/* --- panel 4 · KEY BENEFITS ------------------------------------------------ */
.pg-06 .p06-benefits { position: absolute; left: 0; top: 0; right: 0; }
.pg-06 .p06-benefit  { position: absolute; top: 655px; text-align: center; }
.pg-06 .p06-benefit svg { position: absolute; left: 50%; transform: translateX(-50%); }
.pg-06 .p06-benefit p {
    position: absolute;
    left: 0; right: 0; top: 72px;
    font-size: 12.5px;
    line-height: 20.2px;
    color: #4B4B49;
}
.pg-06 .p06-benefit--1 { left: 679px; width: 107.5px; }
.pg-06 .p06-benefit--2 { left: 790.5px; width: 128.5px; }
.pg-06 .p06-benefit--3 { left: 919px; width: 120.5px; }
.pg-06 .p06-benefit--4 { left: 1039.5px; width: 133.5px; }
.pg-06 .p06-benefit--5 { left: 1173px; width: 142px; }
.pg-06 .p06-benefit--1 svg { top: 7px;  width: 47.3px; height: 57px; }
.pg-06 .p06-benefit--2 svg { top: 7px;  width: 62.2px; height: 57px; }
.pg-06 .p06-benefit--3 svg { top: 15px; width: 81px;   height: 48px; }
.pg-06 .p06-benefit--4 svg { top: 3px;  width: 51.7px; height: 57px; }
.pg-06 .p06-benefit--5 svg { top: 5px;  width: 54px;   height: 57.7px; }

.pg-06 .p06-div {
    top: 655px;
    width: 1.4px; height: 135px;
    background: #DCE0D8;
}
.pg-06 .p06-div--1 { left: 790.5px; }
.pg-06 .p06-div--2 { left: 919px; }
.pg-06 .p06-div--3 { left: 1039.5px; }
.pg-06 .p06-div--4 { left: 1173px; }

/* ==========================================================================
   PAGE 07 · ENVIRONMENTAL AUDIT PLAN                           Template F
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-07 .tF {
    --accent:   #172D0D;      /* H1 forest green                             */
    --pill:     #264115;      /* pill / solid badge fill                     */
    --card:     #F7F8F1;      /* left card fill                              */
    --card-line:#DFE0D7;
    background: #FDFDFB;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-07 .tF > * { position: absolute; }


/* --- title band ------------------------------------------------------------ */
.pg-07 .p07-sprig { width: 94px; height: 96px; }
.pg-07 .p07-sprig--l { left: 192px;  top: 58px; }
.pg-07 .p07-sprig--r { left: 1211px; top: 58px; width: 98px; }

.pg-07 .p07-title {
    left: 309.8px; top: 51.7px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 91.9px;
    line-height: 91.9px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.pg-07 .p07-rule {
    left: 35.8px; top: 169.7px;
    width: 1395px; height: 2.4px;
    background: #656F61;
}
.pg-07 .p07-dot {
    top: 166.1px;
    width: 11.5px; height: 11.5px;
    border-radius: 50%;
    background: #21401A;
}
.pg-07 .p07-dot--l { left: 30px; }
.pg-07 .p07-dot--r { left: 1424.8px; }


/* --- left description card -------------------------------------------------
   The card runs off the foot of the page; only the visible part is drawn.
-------------------------------------------------------------------------- */
.pg-07 .p07-card {
    left: 26.5px; top: 201.5px;
    width: 504.5px; height: 620px;
    background: var(--card);
    border: 1.4px solid var(--card-line);
    border-radius: 20px;
}

.pg-07 .p07-cbadge {
    --bs: 111.5px;
    --bf: #223D11;
    left: 42.8px;
    box-shadow: none;
}
.pg-07 .p07-cbadge svg { width: 62%; height: 62%; }
.pg-07 .p07-cbadge--1 { top: 229px; }
.pg-07 .p07-cbadge--2 { top: 442.5px; }

.pg-07 .p07-p1,
.pg-07 .p07-p2 {
    font-size: 22.7px;
    line-height: 32.25px;
    color: #45463F;
    white-space: nowrap;
}
.pg-07 .p07-p1 b,
.pg-07 .p07-p2 b { font-weight: 700; color: #2F4526; }
.pg-07 .p07-p1 { left: 171.5px; top: 221.5px; }
.pg-07 .p07-p2 { left: 172px;   top: 436px; line-height: 32.76px; }

.pg-07 .p07-dash {
    left: 56px; top: 407px;
    width: 444px; height: 1.8px;
    background: repeating-linear-gradient(90deg,
                #969D91 0 7px, rgba(0,0,0,0) 7px 15px);
}

.pg-07 .p07-illo { left: 27px; top: 630px; width: 504px; height: 180px; }


/* --- pill headings ---------------------------------------------------------- */
.pg-07 .p07-pill { background: var(--pill); }
.pg-07 .p07-pill--process { left: 761.5px; top: 203.2px; width: 387px; height: 37.6px; border-radius: 18.8px; }
.pg-07 .p07-pill--kb      { left: 832.2px; top: 665.2px; width: 195.8px; height: 34.6px; border-radius: 17.3px; }

.pg-07 .p07-pill-t {
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-07 .p07-pill-t--process { left: 781px; top: 211px; font-size: 24px; line-height: 24px; }
.pg-07 .p07-pill-t--kb      { left: 862px; top: 673px; font-size: 22px; line-height: 22px; }

.pg-07 .p07-flank {
    top: 682.4px; height: 1.6px;
    background: #CDCFCC;
}
.pg-07 .p07-flank--l { left: 556.5px; width: 256.5px; }
.pg-07 .p07-flank--r { left: 1045.5px; width: 363px; }


/* --- six-step audit process -------------------------------------------------
   Node centres measured off the source: 620, 763.4, 910.4, 1060.4, 1212.7,
   1370.9; every node is a 126px white disc on a 4px pale ring, centred on
   y 381.5, with the numbered chip riding above it.
-------------------------------------------------------------------------- */
.pg-07 .p07-steps { position: absolute; left: 0; top: 0; right: 0; }
.pg-07 .p07-step  { position: absolute; top: 0; text-align: center; }

.pg-07 .p07-node {
    position: absolute;
    left: 50%;
    top: 318.5px;
    width: 126px; height: 126px;
    margin-left: -63px;
    border-radius: 50%;
    background: #FCFDF9;
    border: 4px solid #9EA89A;
    display: grid;
    place-items: center;
}
.pg-07 .p07-node svg { width: 66px; height: 66px; }

.pg-07 .p07-chip {
    position: absolute;
    left: 50%;
    top: 282.5px;
    width: 26.5px; height: 26.5px;
    margin-left: -13.25px;
    border-radius: 50%;
    background: #1D3711;
    color: #FFFFFF;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 26.5px;
}

.pg-07 .p07-step h4 {
    position: absolute;
    left: 0; right: 0;
    top: 462px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18.6px;
    line-height: 23px;
    letter-spacing: .01em;
    color: #2E4A26;
}


.pg-07 .p07-step p {
    position: absolute;
    left: 0; right: 0;
    font-size: 16.6px;
    line-height: 22.7px;
    color: #5E5E5E;
}
.pg-07 .p07-step--1 { left: 499.7px;  width: 240px; }
.pg-07 .p07-step--2 { left: 644.1px;  width: 240px; }
.pg-07 .p07-step--3 { left: 790.8px;  width: 240px; }
.pg-07 .p07-step--4 { left: 941.2px;  width: 240px; }
.pg-07 .p07-step--5 { left: 1092.7px; width: 240px; }
.pg-07 .p07-step--6 { left: 1250.2px; width: 240px; }

.pg-07 .p07-step--1 p { top: 508px; }
.pg-07 .p07-step--2 p { top: 526.5px; }
.pg-07 .p07-step--3 p { top: 507.5px; }
.pg-07 .p07-step--4 p { top: 507.5px; }
.pg-07 .p07-step--5 p { top: 522.5px; }
.pg-07 .p07-step--6 p { top: 522.5px; }

.pg-07 .p07-arrows {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}


/* --- key benefits strip ----------------------------------------------------
   The captions that belong under these six glyphs sit below the page trim in
   the source, so only the glyphs and their dividers are reproduced.
-------------------------------------------------------------------------- */
.pg-07 .p07-bens { position: absolute; left: 0; top: 0; right: 0; }
.pg-07 .p07-ben  { position: absolute; }
.pg-07 .p07-ben svg { width: 100%; height: 100%; }
.pg-07 .p07-ben--1 { left: 577.8px;  top: 719.2px; width: 81px;   height: 82.6px; }
.pg-07 .p07-ben--2 { left: 730.8px;  top: 722.2px; width: 75.7px; height: 75.8px; }
.pg-07 .p07-ben--3 { left: 870.8px;  top: 726px;   width: 69.7px; height: 67.5px; }
.pg-07 .p07-ben--4 { left: 1010px;   top: 722.2px; width: 75.8px; height: 76.6px; }
.pg-07 .p07-ben--5 { left: 1159.8px; top: 721.5px; width: 78.7px; height: 75px; }
.pg-07 .p07-ben--6 { left: 1305.2px; top: 723px;   width: 79.6px; height: 81px; }

.pg-07 .p07-bdiv {
    top: 721.5px;
    width: 1.5px; height: 88px;
    background: #DFE0DA;
}
.pg-07 .p07-bdiv--1 { left: 701.6px; }
.pg-07 .p07-bdiv--2 { left: 836.6px; }
.pg-07 .p07-bdiv--3 { left: 980.2px; }
.pg-07 .p07-bdiv--4 { left: 1126.1px; }
.pg-07 .p07-bdiv--5 { left: 1268.2px; }

/* ==========================================================================
   PAGE 08 · ENVIRONMENTAL DUE DILIGENCE (EDD)                  Template F
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-08 .tF {
    --accent:    #082A08;     /* H1 near-black green                         */
    --pill:      #1C4219;     /* pill / glyph green                          */
    --label:     #3C6B33;     /* column label green                          */
    --line8:     #E2E4DC;
    background: #FDFDFB;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-08 .tF > * { position: absolute; }


/* --- title band ------------------------------------------------------------ */
.pg-08 .p08-hair {
    left: 0; top: 2.2px;
    width: 1395px; height: 2.8px;
    background: #5A6650;
}

.pg-08 .p08-title {
    left: 32.5px; top: 26px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 93.8px;
    line-height: 93.8px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}
.pg-08 .p08-sprig { left: 1338px; top: 28px; width: 96px; height: 106px; }

.pg-08 .p08-rule {
    left: 0; top: 133.6px;
    width: 1412px; height: 2.6px;
    background: #76806F;
}
.pg-08 .p08-rule-dot {
    left: 1410.5px; top: 128.5px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #1E3F20;
}


/* --- left definition card --------------------------------------------------
   Cut by the left and bottom trim in the source, so only the right and top
   edges of the rounded card are ever visible.
-------------------------------------------------------------------------- */
.pg-08 .p08-card {
    left: -40px; top: 156px;
    width: 438px; height: 700px;
    background: #FDFDFD;
    border: 1.4px solid var(--line8);
    border-radius: 22px;
}
.pg-08 .p08-photo {
    left: 0; top: 588px;
    width: 397px; height: 222px;
    object-fit: cover;
}

.pg-08 .p08-p1,
.pg-08 .p08-p2 {
    left: 19.5px;
    font-size: 24px;
    color: #4A4A4A;
    white-space: nowrap;
}
.pg-08 .p08-p1 b,
.pg-08 .p08-p2 b { font-weight: 700; color: #2F5B2B; }
.pg-08 .p08-p1 { top: 169px; line-height: 34.2px; }
.pg-08 .p08-p2 { top: 423.6px; line-height: 33.6px; }

.pg-08 .p08-dash {
    left: 8px; top: 395px;
    width: 380px; height: 1.8px;
    background: repeating-linear-gradient(90deg,
                #9AA694 0 8px, rgba(0,0,0,0) 8px 17px);
}


/* --- panels and pill headings ---------------------------------------------- */
.pg-08 .p08-panel {
    left: 417px;
    width: 1006px;
    background: #FEFEFC;
    border: 1.4px solid var(--line8);
    border-radius: 22px;
}
.pg-08 .p08-panel--process { top: 177px; height: 349px; }
.pg-08 .p08-panel--areas   { top: 555px; height: 268px; }

.pg-08 .p08-pill { background: var(--pill); }
.pg-08 .p08-pill--process { left: 739px;   top: 157.2px; width: 303.8px; height: 35.3px; border-radius: 17.7px; }
.pg-08 .p08-pill--areas   { left: 728.5px; top: 536.8px; width: 319.5px; height: 35.2px; border-radius: 17.6px; }

.pg-08 .p08-pill-t {
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}
.pg-08 .p08-pill-t--process { left: 742.5px; top: 164px;   width: 300px; font-size: 23.6px; line-height: 23.6px; }
.pg-08 .p08-pill-t--areas   { left: 742.5px; top: 544.2px; width: 300px; font-size: 21.8px; line-height: 21.8px; }


/* --- six process step cards -------------------------------------------------
   Card rectangles and column centres measured individually: the source
   artwork is a raster and its columns are not perfectly even.
-------------------------------------------------------------------------- */
.pg-08 .p08-steps { position: absolute; left: 0; top: 0; right: 0; }
.pg-08 .p08-step {
    position: absolute;
    top: 227.5px; height: 287px;
    background: #FAFAF7;
    border: 1.3px solid #EBECE6;
    border-radius: 14px;
    text-align: center;
}
.pg-08 .p08-step--1 { left: 427.5px;  width: 126.7px; }
.pg-08 .p08-step--2 { left: 580.1px;  width: 138.8px; }
.pg-08 .p08-step--3 { left: 746.6px;  width: 151.1px; }
.pg-08 .p08-step--4 { left: 927px;    width: 148.1px; }
.pg-08 .p08-step--5 { left: 1103.6px; width: 142.9px; }
.pg-08 .p08-step--6 { left: 1274px;   width: 132.6px; }

.pg-08 .p08-chip {
    position: absolute;
    left: 50%; top: -17.5px;
    margin-left: -15px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #193F1B;
    color: #FFFFFF;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
}
.pg-08 .p08-icon {
    position: absolute;
    left: 50%; top: 27px;
    margin-left: -38px;
    width: 76px; height: 76px;
}
.pg-08 .p08-step--3 .p08-icon { margin-left: -28.5px; width: 57px; }
.pg-08 .p08-step--4 .p08-icon { margin-left: -45px;   width: 90px; height: 74px; }
.pg-08 .p08-step--5 .p08-icon { margin-left: -33px;   width: 66px; height: 66px; top: 32px; }
.pg-08 .p08-step--6 .p08-icon { margin-left: -34px;   width: 68px; height: 72px; top: 30px; }

.pg-08 .p08-step h4 {
    position: absolute;
    left: -45px; right: -45px;
    top: 114.5px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17.6px;
    line-height: 20.4px;
    letter-spacing: .01em;
    color: #34512C;
}
.pg-08 .p08-step p {
    position: absolute;
    left: -45px; right: -45px;
    font-size: 16.4px;
    line-height: 22.3px;
    color: #6E6E6E;
}
.pg-08 .p08-step--1 p { top: 166.5px; }
.pg-08 .p08-step--2 p { top: 167px; }
.pg-08 .p08-step--3 p { top: 167px; }
.pg-08 .p08-step--4 p { top: 167px; }
.pg-08 .p08-step--5 p { top: 189px; }
.pg-08 .p08-step--6 p { top: 167px; }

.pg-08 .p08-arrows { left: 0; top: 0; width: 1440px; height: 810px; overflow: visible; }


/* --- key areas covered ------------------------------------------------------ */
.pg-08 .p08-areas { position: absolute; left: 0; top: 0; right: 0; }
.pg-08 .p08-area  { position: absolute; top: 0; text-align: center; }
.pg-08 .p08-area--1 { left: 420px;   width: 160px; }
.pg-08 .p08-area--2 { left: 586px;   width: 160px; }
.pg-08 .p08-area--3 { left: 753.2px; width: 160px; }
.pg-08 .p08-area--4 { left: 920.8px; width: 160px; }
.pg-08 .p08-area--5 { left: 1086.8px; width: 160px; }
.pg-08 .p08-area--6 { left: 1256.2px; width: 160px; }

.pg-08 .p08-aicon { position: absolute; left: 50%; }
.pg-08 .p08-area--1 .p08-aicon { margin-left: -35px;   top: 584.8px; width: 70px;   height: 68.2px; }
.pg-08 .p08-area--2 .p08-aicon { margin-left: -41.2px; top: 584px;   width: 82.5px; height: 69px; }
.pg-08 .p08-area--3 .p08-aicon { margin-left: -33px;   top: 590px;   width: 66px;   height: 63px; }
.pg-08 .p08-area--4 .p08-aicon { margin-left: -20.6px; top: 591.5px; width: 41.2px; height: 59.3px; }
.pg-08 .p08-area--5 .p08-aicon { margin-left: -36px;   top: 584px;   width: 72px;   height: 69px; }
.pg-08 .p08-area--6 .p08-aicon { margin-left: -27.4px; top: 578.8px; width: 54.8px; height: 74.2px; }

.pg-08 .p08-area h4 {
    position: absolute;
    left: -45px; right: -45px;
    top: 661px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17.6px;
    line-height: 20.6px;
    letter-spacing: .01em;
    color: var(--label);
}
.pg-08 .p08-area p {
    position: absolute;
    left: -45px; right: -45px;
    font-size: 16.4px;
    line-height: 21.3px;
    color: #6E6E6E;
}
.pg-08 .p08-area--1 p { top: 711px; }
.pg-08 .p08-area--2 p { top: 728px; }
.pg-08 .p08-area--3 p { top: 711px; }
.pg-08 .p08-area--4 p { top: 696.8px; }
.pg-08 .p08-area--5 p { top: 710px; }
.pg-08 .p08-area--6 p { top: 711px; }

.pg-08 .p08-adiv {
    top: 570px;
    width: 1.4px; height: 240px;
    background: #ECEEE8;
}
.pg-08 .p08-adiv--1 { left: 583px; }
.pg-08 .p08-adiv--2 { left: 749px; }
.pg-08 .p08-adiv--3 { left: 917.5px; }
.pg-08 .p08-adiv--4 { left: 1084px; }
.pg-08 .p08-adiv--5 { left: 1249.5px; }

/* ==========================================================================
   PAGE 09 · ENVIRONMENTAL FRAMEWORK                            Template D
   All coordinates measured off the 1440 x 810 source page. The lifecycle
   wheel sits on a circle of radius 233 about (985, 515); every node centre
   below was read off that source, not derived.
   ========================================================================== */

.pg-09 .tD {
    --accent:  #113512;      /* H1 forest green                              */
    --badge9:  #153A10;      /* solid circular badge fill                    */
    background: #F6F5F1;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-09 .tD > * { position: absolute; }

.pg-09 .p09-stripe {
    left: 0; top: 0;
    width: 14.5px; height: 810px;
    background: #66883C;
}


/* --- title band ------------------------------------------------------------ */
.pg-09 .p09-sprig { top: 8px; }
.pg-09 .p09-sprig--l { left: 166px;  width: 82px; height: 74px; }
.pg-09 .p09-sprig--r { left: 1236px; width: 86px; height: 74px; }

.pg-09 .p09-title {
    left: 240px; top: -12px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 111.5px;
    line-height: 111.5px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.pg-09 .p09-rule {
    left: 58.5px; top: 114.5px;
    width: 1367px; height: 3px;
    background: #646C5E;
}
.pg-09 .p09-dot {
    top: 110.5px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #24401E;
}
.pg-09 .p09-dot--l { left: 53px; }
.pg-09 .p09-dot--r { left: 1420px; }

.pg-09 .p09-divider {
    left: 588px; top: 140px;
    width: 2.6px; height: 670px;
    background: #707564;
}


/* --- left column ----------------------------------------------------------- */
.pg-09 .p09-badge {
    --bs: 123px;
    --bf: var(--badge9);
    box-shadow: none;
}
.pg-09 .p09-badge svg { width: 66%; height: 66%; }
.pg-09 .p09-badge--1 { left: 47.5px; top: 175.5px; }
.pg-09 .p09-badge--2 { left: 46.5px; top: 452.5px; }
.pg-09 .p09-badge--3 { left: 47.5px; top: 661px; }

.pg-09 .p09-p1,
.pg-09 .p09-p2 {
    left: 199px;
    font-size: 28.5px;
    color: #414141;
    white-space: nowrap;
}
.pg-09 .p09-p1 b,
.pg-09 .p09-p2 b { font-weight: 700; color: #2C5E1E; }
.pg-09 .p09-p1 { top: 163px; line-height: 41.25px; }
.pg-09 .p09-p2 { top: 461px; line-height: 41px; }

.pg-09 .p09-dash {
    left: 52.5px; top: 411.5px;
    width: 504px; height: 2.6px;
    background: repeating-linear-gradient(90deg,
                #9A9F98 0 8px, rgba(0,0,0,0) 8px 12px);
}


/* --- wheel subhead ---------------------------------------------------------- */
.pg-09 .p09-sub {
    left: 689px; top: 143.5px;
    width: 600px;
    margin: 0;
    text-align: center;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 28px;
    letter-spacing: .02em;
    color: #24401E;
    white-space: nowrap;
}
.pg-09 .p09-flank {
    top: 167.5px; height: 1.6px;
    background: #A9B69C;
}
.pg-09 .p09-flank--l { left: 679.5px; width: 54.7px; }
.pg-09 .p09-flank--r { left: 1247.2px; width: 38.3px; }


/* --- the wheel -------------------------------------------------------------- */
.pg-09 .p09-hub {
    left: 838px; top: 367px;
    width: 296px; height: 296px;
    border-radius: 50%;
    object-fit: cover;
}

.pg-09 .p09-arrows {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}

.pg-09 .p09-nodes { position: absolute; left: 0; top: 0; right: 0; }
.pg-09 .p09-node  { position: absolute; text-align: center; }
.pg-09 .p09-ring {
    position: absolute;
    inset: 0;
    border: 2.6px solid #B9CDA8;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}
.pg-09 .p09-num {
    position: absolute;
    left: 0; right: 0;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 26px;
    color: #3C4E38;
}
.pg-09 .p09-node h4 {
    position: absolute;
    left: -30px; right: -30px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 16.8px;
    line-height: 19.8px;
    letter-spacing: .03em;
    color: #4C544A;
}
.pg-09 .p09-glyph { position: absolute; left: 50%; }

/* node 1 · PLANNING */
.pg-09 .p09-node--1 { left: 912.5px; top: 211px; width: 135px; height: 148px; }
.pg-09 .p09-node--1 .p09-num   { top: 17px; }
.pg-09 .p09-node--1 h4         { top: 46px; }
.pg-09 .p09-node--1 .p09-glyph { top: 76px; margin-left: -28px; width: 56px; height: 62px; }
/* node 2 · DESIGN */
.pg-09 .p09-node--2 { left: 1122px; top: 336px; width: 130px; height: 130px; }
.pg-09 .p09-node--2 .p09-num   { top: 18px; }
.pg-09 .p09-node--2 h4         { top: 47px; }
.pg-09 .p09-node--2 .p09-glyph { top: 66px; margin-left: -30px; width: 60px; height: 56px; }
/* node 3 · IMPLEMENTATION */
.pg-09 .p09-node--3 { left: 1121px; top: 566px; width: 130px; height: 130px; }
.pg-09 .p09-node--3 .p09-num   { top: 14px; }
.pg-09 .p09-node--3 h4         { top: 43px; }
.pg-09 .p09-node--3 .p09-glyph { top: 62px; margin-left: -33px; width: 66px; height: 56px; }
/* node 4 · MONITORING */
.pg-09 .p09-node--4 { left: 919px; top: 685px; width: 132px; height: 132px; }
.pg-09 .p09-node--4 .p09-num   { top: 17px; }
.pg-09 .p09-node--4 h4         { top: 46px; }
.pg-09 .p09-node--4 .p09-glyph { top: 65px; margin-left: -31px; width: 62px; height: 54px; }
/* node 5 · EVALUATION */
.pg-09 .p09-node--5 { left: 718.5px; top: 561px; width: 132px; height: 132px; }
.pg-09 .p09-node--5 .p09-num   { top: 16px; }
.pg-09 .p09-node--5 h4         { top: 46px; }
.pg-09 .p09-node--5 .p09-glyph { top: 65px; margin-left: -31px; width: 62px; height: 54px; }
/* node 6 · CONTINUAL IMPROVEMENT */
.pg-09 .p09-node--6 { left: 726px; top: 339px; width: 133.5px; height: 133.5px; }
.pg-09 .p09-node--6 .p09-num   { top: 10px; }
.pg-09 .p09-node--6 h4         { top: 42px; }
.pg-09 .p09-node--6 .p09-glyph { top: 85px; margin-left: -28px; width: 56px; height: 52px; }


/* --- call-outs -------------------------------------------------------------- */
.pg-09 .p09-call {
    font-size: 19px;
    line-height: 22.8px;
    color: #666664;
    white-space: nowrap;
}
.pg-09 .p09-call--1 { left: 1124.8px; top: 236.5px; }
.pg-09 .p09-call--2 { left: 1271.8px; top: 416.5px; }
.pg-09 .p09-call--3 { left: 1271px;   top: 668.5px; }
.pg-09 .p09-call--4 { left: 714.2px;  top: 781.5px; }
.pg-09 .p09-call--5 { left: 604.8px;  top: 641.5px; }
.pg-09 .p09-call--6 { left: 639px;    top: 303.5px; }

/* ==========================================================================
   PAGE 10 · ENVID | ENVIRONMENTAL IMPACT IDENTIFICATION        Template G
   All coordinates measured off the 1440 x 810 source page.

   The source is one full-bleed photomontage. Only that montage is a raster
   asset (with every string, panel, badge, arc and ring erased from it); the
   quadrant cycle itself is rebuilt in CSS and inline SVG on top.
   ========================================================================== */

.pg-10 .tG {
    --orange: #E47C09;      /* quadrant 1                                    */
    --red:    #BE1D11;      /* quadrant 2                                    */
    --blue:   #1D67AA;      /* quadrant 3                                    */
    --leaf:   #628531;      /* quadrant 4                                    */
    --gold:   #EEBD31;      /* ENVID wordmark                                */
    --navy:   #0B2445;      /* subtitle, central copy, strapline             */
    --ink:    #3C3932;      /* bullet copy                                   */
    background: #0A1420;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-10 .tG > * { position: absolute; }

.pg-10 .p10-bg { position: absolute; inset: 0; }
.pg-10 .p10-bg img { width: 1440px; height: 810px; object-fit: cover; }


/* --- title lockup -----------------------------------------------------------
   ENVID is set roughly 1.5x the size of the rest of the line and both sit on
   the darkened navy scrim at the head of the montage.
-------------------------------------------------------------------------- */
.pg-10 .p10-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-10 .p10-title span { position: absolute; display: block; white-space: nowrap; }

.pg-10 .p10-envid {
    left: 64px; top: 8px;
    font-size: 92px; line-height: 92px;
    color: var(--gold);
    text-shadow: 0 2px 7px rgba(6, 18, 34, .55);
}
.pg-10 .p10-h1 {
    left: 384px; top: 27px;
    font-size: 55.5px; line-height: 55.5px;
    color: #FFFFFF;
    text-shadow: 0 2px 7px rgba(6, 18, 34, .55);
}
.pg-10 .p10-sep {
    left: 352px; top: 32px;
    width: 1.8px; height: 54px;
    background: rgba(255,255,255,.92);
}

.pg-10 .p10-sub {
    left: 284px; top: 105px;
    width: 872px;
    font-size: 28.5px; line-height: 30px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    text-shadow: 0 1px 5px rgba(255,255,255,.5);
}


/* --- the four connector arcs ------------------------------------------------
   One ring, centre (725.5, 456) radius 242. The arcs run clockwise and are
   drawn under the cards, which clip their tails exactly as the source does.
-------------------------------------------------------------------------- */
.pg-10 .p10-arcs {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 4;
    overflow: visible;
}
.pg-10 .p10-arcs .a-s { fill: none; stroke-width: 13; stroke-linecap: butt; }
.pg-10 .p10-arcs .a-h { stroke: none; }
.pg-10 .p10-arcs .a-o { stroke: var(--orange); fill: var(--orange); }
.pg-10 .p10-arcs .a-r { stroke: #C4291C;      fill: #C4291C; }
.pg-10 .p10-arcs .a-g { stroke: #6F9A3E;      fill: #6F9A3E; }
.pg-10 .p10-arcs .a-b { stroke: #2E6FA8;      fill: #2E6FA8; }


/* --- central definition disc ------------------------------------------------
   The montage carries the photograph; only the thick white ring and the copy
   are rebuilt, so the disc shows straight through to the base image.
-------------------------------------------------------------------------- */
.pg-10 .p10-ring {
    left: 500px; top: 215px;
    width: 456px; height: 482px;
    border: 16px solid rgba(255,255,255,.95);
    border-radius: 50%;
    z-index: 5;
    background: url("/Assets/images/pages/p-10/montage.jpg") -500px -215px / 1440px 810px no-repeat border-box;
    box-shadow: 0 8px 26px -12px rgba(6, 16, 30, .55);
}

.pg-10 .p10-core-t {
    left: 530px; top: 284px;
    width: 400px;
    z-index: 6;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 64px; line-height: 64px;
    letter-spacing: -.01em;
    color: #0C2A55;
}
.pg-10 .p10-core-p {
    left: 530px; top: 352px;
    width: 400px;
    z-index: 6;
    text-align: center;
    font-size: 19.5px; line-height: 24.3px;
    color: #22293A;
}


/* --- quadrant cards ---------------------------------------------------------
   Each card is a colour header bar with a rounded top and a cream body; the
   circular badge overhangs the header bar's left end.
-------------------------------------------------------------------------- */
.pg-10 .p10-hd,
.pg-10 .p10-bd { z-index: 3; }

.pg-10 .p10-hd { border-radius: 14px 14px 0 0; }
.pg-10 .p10-bd { border-radius: 0 14px 18px 18px; }

.pg-10 .p10-hd--1 { left: 195px; top: 153px; width: 394px; height: 65px; background: linear-gradient(90deg, #DE6E05, #EE8A18); }
.pg-10 .p10-bd--1 { left: 221px; top: 218px; width: 359px; height: 227px; background: linear-gradient(180deg, #FCF6EC, #F6E9D6); }

.pg-10 .p10-hd--2 { left: 843px; top: 153px; width: 434px; height: 67px; background: linear-gradient(90deg, #B4160C, #CE2A19); }
.pg-10 .p10-bd--2 { left: 943px; top: 220px; width: 333px; height: 225px; background: linear-gradient(180deg, #FDF7F1, #F5E7DB); }

.pg-10 .p10-hd--3 { left: 195px; top: 470px; width: 315px; height: 66px; background: linear-gradient(90deg, #10528F, #2A79BB); }
.pg-10 .p10-bd--3 { left: 215px; top: 536px; width: 368px; height: 187px; background: linear-gradient(180deg, #F4F7FA, #E7EBEF); }

.pg-10 .p10-hd--4 { left: 948px; top: 467px; width: 352px; height: 69px; background: linear-gradient(90deg, #4E7B22, #79993F); }
/* card 4's body runs left under the central disc */
.pg-10 .p10-bd--4 { left: 853px; top: 536px; width: 454px; height: 186px; background: linear-gradient(180deg, #F6F5EC, #EDEBDD); }

/* card headings */
.pg-10 .p10-qt {
    z-index: 6;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 23.5px; line-height: 24px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-10 .p10-qt span { display: inline-block; }
.pg-10 .p10-qt-i { margin-left: 20px; }      /* the wrapped line is indented */

.pg-10 .p10-qt--1 { left: 251px; top: 177px; }
.pg-10 .p10-qt--2 { left: 956px; top: 170px; }
.pg-10 .p10-qt--3 { left: 240px; top: 482px; }
.pg-10 .p10-qt--4 { left: 1041px; top: 492px; }

/* card bullets */
.pg-10 .p10-list {
    z-index: 6;
    font-size: 19px;
    line-height: 23px;
    color: var(--ink);
    white-space: nowrap;
}
.pg-10 .p10-list li { position: relative; padding-left: 12px; margin-bottom: 9px; }
.pg-10 .p10-list li:last-child { margin-bottom: 0; }
.pg-10 .p10-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 6.5px; height: 6.5px;
    border-radius: 50%;
}
.pg-10 .p10-list--1 { left: 256px; top: 236px; }
.pg-10 .p10-list--1 li::before { background: var(--orange); }
.pg-10 .p10-list--2 { left: 961px; top: 236px; }
.pg-10 .p10-list--2 li::before { background: var(--red); }
.pg-10 .p10-list--2 li { margin-bottom: 10px; }
.pg-10 .p10-list--3 { left: 247px; top: 551px; }
.pg-10 .p10-list--3 li::before { background: var(--blue); }
.pg-10 .p10-list--3 li { margin-bottom: 8px; }
.pg-10 .p10-list--4 { left: 984px; top: 553px; }
.pg-10 .p10-list--4 li::before { background: var(--leaf); }
.pg-10 .p10-list--4 li { margin-bottom: 10px; line-height: 24px; }

/* icon badges */
.pg-10 .p10-badge {
    z-index: 7;
    width: 78px; height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 3.5px #FFFFFF, 0 5px 14px -6px rgba(8, 18, 30, .6);
}
.pg-10 .p10-badge svg { width: 60%; height: 60%; }
.pg-10 .p10-badge--1 { left: 145px; top: 155px; background: #E3791A; }
.pg-10 .p10-badge--2 { left: 866px; top: 157px; background: #C4291C; }
.pg-10 .p10-badge--3 { left: 142px; top: 470px; background: #1D67AA; }
.pg-10 .p10-badge--4 { left: 951px; top: 471px; background: #5E8438; }


/* --- ENVIRONMENT FIRST, lettered on the clipboard in the montage ---------- */
.pg-10 .p10-ef {
    left: 1278px; top: 627px;
    width: 92px;
    z-index: 6;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    color: #2C4A22;
    transform: rotate(-1.6deg);
}
.pg-10 .p10-ef-1 { display: block; font-size: 16px; line-height: 17px; }
.pg-10 .p10-ef-2 { display: block; font-size: 23.5px; line-height: 24px; }


/* --- strapline -------------------------------------------------------------- */
.pg-10 .p10-pill {
    left: 392px; top: 742px;
    width: 657px; height: 44px;
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    z-index: 5;
}
.pg-10 .p10-leaf {
    left: 421px; top: 755px;
    width: 23px; height: 23px;
    z-index: 6;
}
.pg-10 .p10-strap {
    left: 461px; top: 751px;
    z-index: 6;
    font-size: 23.5px; line-height: 28px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

/* ==========================================================================
   PAGE 11 · ENVIRONMENTAL AND SOCIAL IMPACT ASSESSMENT (ESIA) / EIA
                                                                Template D
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-11 .tD {
    --deep:  #1B3A17;        /* badges, arrows, glyphs                       */
    --h1:    #1D3E19;        /* display heading                              */
    --lab:   #47603F;        /* node labels                                  */
    --body:  #3F3F3F;        /* running copy                                 */
    --line:  #DDE2D8;        /* card and panel hairlines                     */
    background: #F9F8F4;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-11 .tD > * { position: absolute; }


/* --- title band ------------------------------------------------------------- */
.pg-11 .p11-hair {
    left: 0; top: 9px;
    width: 1435px; height: 3.6px;
    background: #8B8F87;
}

.pg-11 .p11-sprig { position: absolute; }
.pg-11 .p11-sprig--l { left: 46px;   top: 48px; width: 106px; height: 112px; }
.pg-11 .p11-sprig--r { left: 1219px; top: 48px; width: 108px; height: 112px; }

.pg-11 .p11-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    text-align: center;
}
.pg-11 .p11-title > span { position: absolute; left: 0; right: 0; display: block; white-space: nowrap; }
.pg-11 .p11-title .l1 { top: 20px;  left: -60px; font-size: 86px; line-height: 86px; }
.pg-11 .p11-title .l2 { top: 99px;  left: -66px; font-size: 86px; line-height: 86px; }

.pg-11 .p11-rule { top: 170px; height: 3.4px; background: #9EA398; }
.pg-11 .p11-rule--l { left: 0;      width: 158px; }
.pg-11 .p11-rule--r { left: 1230px; width: 196px; }
.pg-11 .p11-dot {
    left: 1428px; top: 166px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #3D5236;
}


/* --- left definition card ----------------------------------------------------
   The card is clipped by the left trim and runs off the foot of the page.
-------------------------------------------------------------------------- */
.pg-11 .p11-card {
    left: -30px; top: 195px;
    width: 621px; height: 640px;
    background: #F5F6F1;
    border: 1.6px solid var(--line);
    border-radius: 22px;
}

.pg-11 .p11-cbadge {
    left: -24px; top: 217px;
    width: 119px; height: 119px;
    border-radius: 50%;
    background: #16330F;
    display: grid;
    place-items: center;
}
.pg-11 .p11-cbadge svg { width: 66%; height: 66%; }

.pg-11 .p11-p1,
.pg-11 .p11-p2 {
    font-size: 22.4px;
    line-height: 37.5px;
    color: var(--body);
    white-space: nowrap;
}
.pg-11 .p11-p1 b,
.pg-11 .p11-p2 b { font-weight: 700; color: #23531D; }
.pg-11 .p11-p1 { left: 116px; top: 210px; z-index: 1; }
.pg-11 .p11-p2 { left: 16px; top: 399px; line-height: 36.5px; z-index: 1; }

.pg-11 .p11-dash {
    left: 0; top: 376px;
    width: 560px; height: 2px;
    background: repeating-linear-gradient(90deg,
                #9AA394 0 12px, rgba(0,0,0,0) 12px 22px);
}

.pg-11 .p11-photo { left: 0; top: 570px; width: 592px; height: 240px; z-index: 0; }


/* --- right process panel ------------------------------------------------------ */
.pg-11 .p11-panel {
    left: 602px; top: 195px;
    width: 836px; height: 640px;
    background: #FBFAF6;
    border: 1.6px solid var(--line);
    border-radius: 22px;
}

.pg-11 .p11-pill {
    left: 880px; top: 211px;
    width: 260px; height: 37px;
    border-radius: 18.5px;
    background: #1E4218;
}
.pg-11 .p11-pill-t {
    left: 902px; top: 219px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 23px; line-height: 23px;
    letter-spacing: .04em;
    color: #FFFFFF;
    white-space: nowrap;
}

/* central photographic disc */
.pg-11 .p11-hub {
    left: 837px; top: 329px;
    width: 346px; height: 344px;
    border-radius: 50%;
    object-fit: cover;
}

.pg-11 .p11-arrows {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}
.pg-11 .p11-arrows path { fill: var(--deep); stroke: none; }
.pg-11 .p11-arrows path[d^="M913 306"],
.pg-11 .p11-arrows path[d^="M1204 361"],
.pg-11 .p11-arrows path[d^="M1243 549"],
.pg-11 .p11-arrows path[d^="M1110 706"],
.pg-11 .p11-arrows path[d^="M837 647"],
.pg-11 .p11-arrows path[d^="M793 443"] {
    fill: none;
    stroke: var(--deep);
    stroke-width: 8;
    stroke-linecap: round;
}
.pg-11 .p11-arrows circle { fill: var(--deep); }


/* --- the six wheel nodes ------------------------------------------------------
   Ring centres measured off the source: (840.5, 307) (1181, 307) (1244, 496.5)
   (1165, 692) (855, 692) (781, 496.5).
-------------------------------------------------------------------------- */
.pg-11 .p11-nodes { position: absolute; inset: 0; }
.pg-11 .p11-node  { position: absolute; }

.pg-11 .p11-ring {
    position: absolute;
    width: 95px; height: 95px;
    border-radius: 50%;
    border: 1.6px solid #A9B3A3;
    background: #FAF9F5;
    display: grid;
    place-items: center;
}
.pg-11 .p11-ring svg { width: 56%; height: 56%; }

.pg-11 .p11-num {
    position: absolute;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--deep);
    color: #FFFFFF;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
}

.pg-11 .p11-lab {
    position: absolute;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15.5px; line-height: 21px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lab);
    white-space: nowrap;
}
.pg-11 .p11-desc {
    position: absolute;
    font-size: 14.4px; line-height: 20.8px;
    color: #4C4C4C;
    white-space: nowrap;
}

/* node 1 · SCREENING */
.pg-11 .p11-node--1 .p11-ring { left: 790px; top: 256px; width: 102px; height: 102px; }
.pg-11 .p11-node--1 .p11-num  { left: 721px; top: 272px; }
.pg-11 .p11-node--1 .p11-lab  { left: 628px; top: 303px; width: 200px; text-align: center; }
.pg-11 .p11-node--1 .p11-desc { left: 614px; top: 330px; width: 200px; text-align: center; }

/* node 2 · SCOPING */
.pg-11 .p11-node--2 .p11-ring { left: 1130px; top: 256px; width: 102px; height: 102px; }
.pg-11 .p11-node--2 .p11-num  { left: 1252px; top: 272px; }
.pg-11 .p11-node--2 .p11-lab  { left: 1251px; top: 302px; }
.pg-11 .p11-node--2 .p11-desc { left: 1251px; top: 328px; }

/* node 3 · IMPACT ASSESSMENT */
.pg-11 .p11-node--3 .p11-ring { left: 1197px; top: 449px; }
.pg-11 .p11-node--3 .p11-num  { left: 1307px; top: 465px; }
.pg-11 .p11-node--3 .p11-lab  { left: 1307px; top: 496px; }
.pg-11 .p11-node--3 .p11-desc { left: 1307px; top: 541px; }

/* node 4 · MITIGATION MEASURES — the last line runs off the page trim */
.pg-11 .p11-node--4 .p11-ring { left: 1118px; top: 644px; }
.pg-11 .p11-node--4 .p11-num  { left: 1229px; top: 658px; }
.pg-11 .p11-node--4 .p11-lab  { left: 1229px; top: 689px; }
.pg-11 .p11-node--4 .p11-desc { left: 1229px; top: 734px; }

/* node 5 · REPORTING & DISCLOSURE */
.pg-11 .p11-node--5 .p11-ring { left: 808px; top: 644px; }
.pg-11 .p11-node--5 .p11-num  { left: 735px; top: 660px; }
.pg-11 .p11-node--5 .p11-lab  { left: 648px; top: 690px; width: 200px; text-align: center; }
.pg-11 .p11-node--5 .p11-desc { left: 647px; top: 737px; width: 200px; text-align: center; }

/* node 6 · REVIEW & DECISION MAKING */
.pg-11 .p11-node--6 .p11-ring { left: 734px; top: 449px; }
.pg-11 .p11-node--6 .p11-num  { left: 642px; top: 466px; }
.pg-11 .p11-node--6 .p11-lab  { left: 572px; top: 497px; width: 200px; text-align: center; }
.pg-11 .p11-node--6 .p11-desc { left: 572px; top: 546px; width: 200px; text-align: center; }

/* ==========================================================================
   PAGE 12 · SOCIAL IMPACT ASSESSMENT                            Template F
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-12 .tF {
    --deep:  #16380F;        /* icon badges                                  */
    --olive: #304722;        /* banner pill                                  */
    --lab:   #3F5B36;        /* column labels                                */
    --h1:    #1E3A16;        /* display heading                              */
    --line:  #DFE4DA;        /* hairlines                                    */
    background: #F4F3EF;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-12 .tF > * { position: absolute; }

/* --- corner foliage ---------------------------------------------------------- */
.pg-12 .p12-foliage { z-index: 0; }
.pg-12 .p12-foliage--tr { left: 1303px; top: 0;     width: 137px; height: 76px; }
.pg-12 .p12-foliage--bl { left: 0;      top: 612px; width: 226px; height: 198px; }


/* --- title band --------------------------------------------------------------- */
.pg-12 .p12-sprig--l { left: 162px;  top: 34px; width: 94px; height: 66px; }
.pg-12 .p12-sprig--r { left: 1224px; top: 42px; width: 68px; height: 54px; }

.pg-12 .p12-title {
    left: 254px; top: 1px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 103px;
    line-height: 103px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

.pg-12 .p12-rule {
    left: 26px; top: 126px;
    width: 1396px; height: 3.4px;
    background: #7E8579;
}
.pg-12 .p12-dot {
    top: 122px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #2F3E2A;
}
.pg-12 .p12-dot--l { left: 22px; }
.pg-12 .p12-dot--r { left: 1414px; }

/* the rule turns the corner and runs down the right trim */
.pg-12 .p12-vrule {
    left: 1422px; top: 126px;
    width: 3.4px; height: 684px;
    background: #7E8579;
}


/* --- left definition column ----------------------------------------------------
   Both paragraphs sit to the right of a solid dark-green circular badge; the
   badges are cut by nothing but sit close to the left trim.
-------------------------------------------------------------------------- */
.pg-12 .p12-badge {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--deep);
    display: grid;
    place-items: center;
}
.pg-12 .p12-badge svg { width: 62%; height: 62%; }
.pg-12 .p12-badge--1 { left: 25px; top: 185px; }
.pg-12 .p12-badge--2 { left: 21px; top: 511px; width: 119px; height: 119px; }

.pg-12 .p12-p1,
.pg-12 .p12-p2 {
    font-size: 22px;
    line-height: 38.2px;
    color: #3D3D3D;
    white-space: nowrap;
}
.pg-12 .p12-p1 b,
.pg-12 .p12-p2 b { font-weight: 700; color: #23531D; }
.pg-12 .p12-p1 { left: 167px; top: 186px; z-index: 1; }
.pg-12 .p12-p2 { left: 166px; top: 518px; line-height: 38.7px; z-index: 1; }

.pg-12 .p12-dash {
    left: 26px; top: 467px;
    width: 476px; height: 2px;
    background: repeating-linear-gradient(90deg,
                #7C8477 0 13px, rgba(0,0,0,0) 13px 24px);
}


/* --- photograph and its banner -------------------------------------------------- */
.pg-12 .p12-photo {
    left: 527px; top: 157px;
    width: 858px; height: 404px;
    border-radius: 22px;
    overflow: hidden;
}
.pg-12 .p12-photo img { width: 100%; height: 100%; object-fit: cover; }

.pg-12 .p12-banner {
    left: 695px; top: 177px;
    width: 476px; height: 36px;
    border-radius: 18px;
    background: var(--olive);
}
.pg-12 .p12-banner-t {
    left: 717px; top: 185px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 18px; line-height: 18px;
    letter-spacing: .03em;
    color: #E6EFDF;
    white-space: nowrap;
}


/* --- six-column caption row -----------------------------------------------------
   The card is cut by the page trim, so no bottom edge is drawn. Divider
   positions measured off the source: 672.5, 815.5, 959, 1100.5, 1243.5.
-------------------------------------------------------------------------- */
.pg-12 .p12-row {
    left: 524px; top: 565px;
    width: 863px; height: 260px;
    background: #F2F4EE;
    border: 1.6px solid var(--line);
    border-radius: 22px;
}
.pg-12 .p12-div {
    top: 578px;
    width: 1.6px; height: 232px;
    background: var(--line);
}
.pg-12 .p12-div--1 { left: 672px; }
.pg-12 .p12-div--2 { left: 815px; }
.pg-12 .p12-div--3 { left: 958px; }
.pg-12 .p12-div--4 { left: 1100px; }
.pg-12 .p12-div--5 { left: 1243px; }

.pg-12 .p12-cols { position: absolute; inset: 0; }
.pg-12 .p12-col  { position: absolute; top: 0; width: 200px; text-align: center; }

.pg-12 .p12-ring {
    position: absolute;
    left: 50%; top: 579px;
    width: 86px; height: 86px;
    margin-left: -43px;
    border-radius: 50%;
    border: 1.8px solid #6E7F68;
    display: grid;
    place-items: center;
}
.pg-12 .p12-ring svg { width: 62%; height: 62%; }

.pg-12 .p12-lab {
    position: absolute;
    left: 0; right: 0; top: 673px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15.5px; line-height: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lab);
    white-space: nowrap;
}
.pg-12 .p12-desc {
    position: absolute;
    left: 0; right: 0;
    font-size: 13.8px; line-height: 19.7px;
    color: #4A4A4A;
    white-space: nowrap;
}

.pg-12 .p12-col--1 { left: 496px; }
.pg-12 .p12-col--2 { left: 643px; }
.pg-12 .p12-col--3 { left: 789px; }
.pg-12 .p12-col--4 { left: 929px; }
.pg-12 .p12-col--5 { left: 1071px; }
.pg-12 .p12-col--6 { left: 1211px; }

.pg-12 .p12-col--1 .p12-desc { top: 725px; }
.pg-12 .p12-col--2 .p12-desc { top: 716px; }
.pg-12 .p12-col--3 .p12-desc { top: 715px; }
.pg-12 .p12-col--4 .p12-desc { top: 724px; }
.pg-12 .p12-col--5 .p12-desc { top: 715px; }
.pg-12 .p12-col--6 .p12-desc { top: 716px; }

/* ==========================================================================
   PAGE 13 · ENVIRONMENTAL MANAGEMENT PLAN (EMP)                 Template F
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-13 .tF {
    --deep:  #1E4216;        /* pill, glyphs                                 */
    --h1:    #0F2C0C;        /* display heading                              */
    --lab:   #3F5C33;        /* column headings                              */
    --line:  #DEE3D7;        /* hairlines                                    */
    background: #F7F8F2;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-13 .tF > * { position: absolute; }


/* --- title band -----------------------------------------------------------------
   The heading sits in a white band closed by a hairline rule.
-------------------------------------------------------------------------- */
.pg-13 .p13-band {
    left: 0; top: 0;
    width: 1440px; height: 149px;
    background: #FDFDFD;
}
.pg-13 .p13-hair {
    left: 0; top: 0;
    width: 1417px; height: 3.4px;
    background: #7C8478;
}

.pg-13 .p13-title {
    left: 34px; top: 26px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 99px;
    line-height: 99px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

.pg-13 .p13-sprig { left: 1382px; top: 36px; width: 58px; height: 113px; }

.pg-13 .p13-rule {
    left: 0; top: 149px;
    width: 1440px; height: 5px;
    background: #7C8478;
}
.pg-13 .p13-dot {
    left: 1430px; top: 145px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #2F3E2A;
}


/* --- left definition card ------------------------------------------------------
   The card is clipped by the left trim and runs off the foot of the page; a
   pale illustrated skyline sits behind its lower half.
-------------------------------------------------------------------------- */
.pg-13 .p13-card {
    left: -26px; top: 180px;
    width: 447px; height: 660px;
    background: #FCFCF8;
    border: 1.6px solid var(--line);
    border-radius: 22px;
}

.pg-13 .p13-skyline { left: 0; top: 638px; width: 420px; height: 172px; }

.pg-13 .p13-p1,
.pg-13 .p13-p2 {
    font-size: 22.2px;
    line-height: 38px;
    color: #3C3C3C;
    white-space: nowrap;
    z-index: 1;
}
.pg-13 .p13-p1 b,
.pg-13 .p13-p2 b { font-weight: 700; color: #23531D; }
.pg-13 .p13-p1 { left: 18px; top: 202px; }
.pg-13 .p13-p2 { left: 18px; top: 448px; line-height: 37.5px; }

.pg-13 .p13-dash {
    left: 0; top: 416px;
    width: 400px; height: 2.4px;
    background: repeating-linear-gradient(90deg,
                #C6CBC0 0 15px, rgba(0,0,0,0) 15px 27px);
}


/* --- key elements panel ---------------------------------------------------------
   The panel and its sixth column are cut by the right trim, so the panel is
   drawn wide enough to run off the page exactly as the source does.
-------------------------------------------------------------------------- */
.pg-13 .p13-panel {
    left: 431px; top: 211px;
    width: 1023px; height: 620px;
    background: #FCFCF8;
    border: 1.6px solid var(--line);
    border-radius: 22px;
}

.pg-13 .p13-pill {
    left: 729px; top: 185px;
    width: 398px; height: 41px;
    border-radius: 20.5px;
    background: var(--deep);
}
.pg-13 .p13-pill-t {
    left: 766px; top: 194px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 25px; line-height: 25px;
    letter-spacing: .03em;
    color: #FFFFFF;
    white-space: nowrap;
}

.pg-13 .p13-div {
    top: 266px;
    width: 1.6px; height: 496px;
    background: var(--line);
}
.pg-13 .p13-div--1 { left: 599px; }
.pg-13 .p13-div--2 { left: 766px; }
.pg-13 .p13-div--3 { left: 936px; }
.pg-13 .p13-div--4 { left: 1112px; }
.pg-13 .p13-div--5 { left: 1283px; }


/* --- the six element columns ----------------------------------------------------
   Column centres measured off the source: 515, 682, 851, 1024, 1197, 1368.
-------------------------------------------------------------------------- */
.pg-13 .p13-cols { position: absolute; inset: 0; }
.pg-13 .p13-col  { position: absolute; top: 0; width: 220px; text-align: center; }

.pg-13 .p13-ring {
    position: absolute;
    left: 50%; top: 260px;
    width: 98px; height: 98px;
    margin-left: -49px;
    border-radius: 50%;
    border: 1.8px solid #7A8874;
    display: grid;
    place-items: center;
}
.pg-13 .p13-ring svg { width: 56%; height: 56%; }

.pg-13 .p13-lab {
    position: absolute;
    left: 0; right: 0; top: 371px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px; line-height: 26px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--lab);
    white-space: nowrap;
}
.pg-13 .p13-desc {
    position: absolute;
    left: 0; right: 0;
    font-size: 14.6px; line-height: 25.8px;
    color: #3C3C3C;
    white-space: nowrap;
}
.pg-13 .p13-el { position: absolute; }

.pg-13 .p13-col--1 { left: 405px; }
.pg-13 .p13-col--2 { left: 572px; }
.pg-13 .p13-col--3 { left: 741px; }
.pg-13 .p13-col--4 { left: 914px; }
.pg-13 .p13-col--5 { left: 1087px; }
.pg-13 .p13-col--6 { left: 1258px; }

.pg-13 .p13-col--1 .p13-desc { top: 461px; margin-left: -4px; }
.pg-13 .p13-col--2 .p13-desc { top: 453px; }
.pg-13 .p13-col--3 .p13-desc { top: 452px; }
.pg-13 .p13-col--4 .p13-desc { top: 452px; }
.pg-13 .p13-col--5 .p13-desc { top: 452px; }
.pg-13 .p13-col--6 .p13-desc { top: 461px; }

.pg-13 .p13-col--1 .p13-el { left: 29px; top: 624px; width: 164px; height: 186px; }
.pg-13 .p13-col--2 .p13-el { left: 28px; top: 624px; width: 166px; height: 186px; }
.pg-13 .p13-col--3 .p13-el { left: 49px; top: 618px; width: 148px; height: 192px; }
.pg-13 .p13-col--4 .p13-el { left: 32px; top: 626px; width: 166px; height: 184px; }
.pg-13 .p13-col--5 .p13-el { left: 25px; top: 624px; width: 172px; height: 186px; }
.pg-13 .p13-col--6 .p13-el { left: 26px; top: 614px; width: 156px; height: 196px; }

/* ==========================================================================
   PAGE 14 · BASELINE STUDIES                                    Template H
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-14 .tH {
    --deep:  #173D14;        /* icon badge fill                              */
    --h1:    #0C390E;        /* display heading                              */
    --cap:   #26402A;        /* tile captions                                */
    --bold:  #1A331A;        /* bold green emphasis in the body copy         */
    --edge:  #7E8878;        /* hairline card borders                        */
    background: #F8F7F3;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-14 .tH > * { position: absolute; }

/* dark frame line down the left trim */
.pg-14 .p14-edge {
    left: 0; top: 0;
    width: 2.6px; height: 810px;
    background: #4C5B41;
}

/* --- title band ----------------------------------------------------------- */

.pg-14 .p14-sprig { width: 92px; }
.pg-14 .p14-sprig--l { left: 242px; top: 26px; height: 87px; }
.pg-14 .p14-sprig--r { left: 1106px; top: 27px; height: 85px; }

.pg-14 .p14-title {
    left: 355px; top: 5px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 124px;
    line-height: 124px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

.pg-14 .p14-rule {
    left: 42px; top: 137.2px;
    width: 1362px; height: 1.6px;
    background: #788276;
}
.pg-14 .p14-dot {
    top: 133px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #1B4018;
}
.pg-14 .p14-dot--l { left: 37px; }
.pg-14 .p14-dot--r { left: 1399px; }

/* --- left definition card -------------------------------------------------
   The card runs off the foot of the page, so it has no visible bottom edge.
-------------------------------------------------------------------------- */
.pg-14 .p14-card {
    left: 32px; top: 183px;
    width: 531px; height: 660px;
    background: #F7F6F2;
    border: 1.5px solid var(--edge);
    border-radius: 17px;
}

.pg-14 .p14-badge {
    --bs: 112px;
    --bf: var(--deep);
    left: 47px;
    box-shadow: none;
}
.pg-14 .p14-badge svg { width: 66%; height: 66%; fill: #fff; stroke: none; }
.pg-14 .p14-badge--1 { top: 217px; }
.pg-14 .p14-badge--2 { top: 478px; }

.pg-14 .p14-p1,
.pg-14 .p14-p2 {
    left: 180px;
    font-size: 26.4px;
    color: #2E2E2E;
    white-space: nowrap;
}
.pg-14 .p14-p1 { top: 215.7px; line-height: 36px; }
.pg-14 .p14-p2 { top: 481px; line-height: 34.8px; }
.pg-14 .p14-p1 b,
.pg-14 .p14-p2 b { font-weight: 700; color: var(--bold); }

.pg-14 .p14-dash {
    left: 58px; top: 435px;
    width: 481px; height: 1.6px;
    background: repeating-linear-gradient(90deg,
        #7E8878 0 8px, rgba(0,0,0,0) 8px 11px);
}

/* --- corner artwork -------------------------------------------------------
   The pale illustrated skyline inside the foot of the card and the leaf
   sprays that bleed over the trim are one flattened region in the source.
-------------------------------------------------------------------------- */
.pg-14 .p14-corner { left: 0; top: 700px; width: 570px; height: 110px; }
.pg-14 .p14-leaves { left: 1344px; top: 0; width: 96px; height: 76px; }

/* --- photo tile gallery ---------------------------------------------------- */

.pg-14 .p14-row { position: absolute; inset: 0; }

.pg-14 .p14-tile {
    position: absolute;
    background: #F7F6F2;
    border: 1.5px solid var(--edge);
    border-radius: 11px;
    overflow: hidden;
}

.pg-14 .p14-tbadge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    --bs: 63px;
    --bf: var(--deep);
    box-shadow: none;
}
.pg-14 .p14-tbadge svg { width: 62%; height: 62%; fill: #fff; stroke: none; }

.pg-14 .p14-cap {
    position: absolute;
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14.4px;
    line-height: 20px;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--cap);
    white-space: nowrap;
}

.pg-14 .p14-photo { position: absolute; left: 0; right: 0; }
.pg-14 .p14-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* row 1 · five tiles, the fifth cut by the right trim */
.pg-14 .p14-row--1 .p14-tile { top: 186px; width: 172px; height: 324px; }
.pg-14 .p14-row--1 .p14-tbadge { top: 7px; }
.pg-14 .p14-row--1 .p14-cap { top: 77px; }
.pg-14 .p14-row--1 .p14-photo { top: 105.5px; height: 217px; }
/* the fifth tile is cut by the right trim, so only the visible strip exists */
.pg-14 .p14-tile--r1e .p14-photo { right: auto; width: 155px; }

.pg-14 .p14-tile--r1a { left: 580px; }
.pg-14 .p14-tile--r1b { left: 756px; }
.pg-14 .p14-tile--r1c { left: 932px; }
.pg-14 .p14-tile--r1d { left: 1107px; }
.pg-14 .p14-tile--r1e { left: 1283px; }

/* row 2 · four tiles, all sliced by the bottom trim */
.pg-14 .p14-row--2 .p14-tile { top: 540px; height: 300px; }
.pg-14 .p14-row--2 .p14-tbadge { top: 10.5px; }
.pg-14 .p14-row--2 .p14-cap { top: 80px; }
.pg-14 .p14-row--2 .p14-photo { top: 109.5px; height: 159px; }

.pg-14 .p14-tile--r2a { left: 581px; width: 207px; }
.pg-14 .p14-tile--r2b { left: 795px; width: 206px; }
.pg-14 .p14-tile--r2c { left: 1008px; width: 193px; }
.pg-14 .p14-tile--r2d { left: 1207px; width: 222px; }

/* the two-line caption pushes this tile's photograph down */
.pg-14 .p14-tile--r2c .p14-photo { top: 126.5px; height: 142px; }
.pg-14 .p14-tile--r2d .p14-photo { top: 108.5px; height: 160px; }

/* ==========================================================================
   PAGE 15 · AIR MODELLING                                       Template I
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-15 .tI {
    --deep:  #35541F;        /* icon badge fill                              */
    --h1:    #0A2C0E;        /* display heading                              */
    --bold:  #2C3F22;        /* bold green emphasis                          */
    --hair:  #63705A;        /* hairline card borders                        */
    background: #FFFFFF;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

/* The poster is an inset artboard: white page margins left, right and top,
   and the artboard's own bottom edge falls at y 769. */
.pg-15 .p15-poster {
    position: absolute;
    left: 91px; top: 40px;
    width: 1261px; height: 729px;
    background: #F4F3EF;
    overflow: hidden;
}
.pg-15 .p15-poster > * { position: absolute; }

/* --- title row -------------------------------------------------------------
   Coordinates inside the poster are page coordinates minus (91, 40).
-------------------------------------------------------------------------- */
.pg-15 .p15-wind { width: 88px; height: 68px; }
.pg-15 .p15-wind--l { left: 298px; top: 5px; }
.pg-15 .p15-wind--r { left: 879px; top: 5px; transform: scaleX(-1); }

.pg-15 .p15-title {
    left: 424px; top: -11px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 97px;
    line-height: 97px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

/* --- left text card -------------------------------------------------------- */

.pg-15 .p15-card {
    left: 16px; top: 104px;
    width: 567px; height: 700px;
    border: 1.6px solid var(--hair);
    border-radius: 20px;
}
.pg-15 .p15-leaf { left: -5px; top: 684px; width: 36px; height: 45px; z-index: 2; }

.pg-15 .p15-badge {
    --bs: 86px;
    --bf: var(--deep);
    box-shadow: none;
}
.pg-15 .p15-badge svg { width: 62%; height: 62%; fill: #fff; stroke: none; }
.pg-15 .p15-badge--1 { left: 42px; top: 136px; }
.pg-15 .p15-badge--2 { left: 41px; top: 375px; }
.pg-15 .p15-badge--3 { left: 41px; top: 621px; }

.pg-15 .p15-p1,
.pg-15 .p15-p2,
.pg-15 .p15-p3 {
    left: 146px;
    font-size: 24.8px;
    line-height: 34.2px;
    color: #2F2F2D;
    white-space: nowrap;
}
.pg-15 .p15-p1 { top: 134px; }
.pg-15 .p15-p2 { top: 380px; }
.pg-15 .p15-p3 { top: 627px; }
.pg-15 .p15-p1 b,
.pg-15 .p15-p2 b,
.pg-15 .p15-p3 b { font-weight: 700; color: var(--bold); }

.pg-15 .p15-dash {
    left: 40px;
    width: 480px; height: 1.6px;
    background: repeating-linear-gradient(90deg,
        #93A18B 0 9px, rgba(0,0,0,0) 9px 12px);
}
.pg-15 .p15-dash--1 { top: 356px; }
.pg-15 .p15-dash--2 { top: 604px; }

/* --- dispersion panel ------------------------------------------------------ */

.pg-15 .p15-panel {
    left: 595px; top: 104px;
    width: 644px; height: 560px;
    border: 1.6px solid var(--hair);
    border-radius: 20px;
    overflow: hidden;
}
.pg-15 .p15-panel > * { position: absolute; }
.pg-15 .p15-scene { left: 0; top: 0; width: 641px; height: 557px; }

.pg-15 .p15-dhead {
    left: 261.4px; top: 18px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.6px;
    line-height: 16px;
    letter-spacing: .015em;
    color: #1E4426;
    white-space: nowrap;
}

/* The three flow boxes are translucent white plates over the photograph.
   Every line is positioned and fitted to its measured source width. */
.pg-15 .p15-box {
    background: rgba(255,255,255,.34);
    border: 1.2px solid #77898C;
    border-radius: 7px;
}
.pg-15 .p15-box h4 {
    position: absolute;
    left: 0; right: 0; top: 6.9px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.2px;
    line-height: 16px;
    letter-spacing: .02em;
    color: #22422A;
    white-space: nowrap;
}
.pg-15 .p15-box li,
.pg-15 .p15-box p {
    font-size: 12.3px;
    line-height: 16px;
    color: #38404A;
    white-space: nowrap;
}
.pg-15 .p15-box li {
    position: absolute;
    left: 11.4px;
    padding-left: 9px;
}
.pg-15 .p15-box li::before {
    content: "";
    position: absolute;
    left: 0; top: 7.4px;
    width: 3.2px; height: 3.2px;
    border-radius: 50%;
    background: #38404A;
}
.pg-15 .p15-box p {
    position: absolute;
    left: 0; right: 0; top: 31px;
    text-align: center;
}

.pg-15 .p15-box--in  { left: 149.9px; top: 46.9px; width: 111.5px; height: 133.5px; }
.pg-15 .p15-box--in  li:nth-child(1) { top: 30px; }
.pg-15 .p15-box--in  li:nth-child(2) { top: 52px; }
.pg-15 .p15-box--in  li:nth-child(3) { top: 74px; }
.pg-15 .p15-box--in  li:nth-child(4) { top: 96px; }

.pg-15 .p15-box--mo  { left: 291.9px; top: 66.9px; width: 101.5px; height: 88px; }

.pg-15 .p15-box--out { left: 432.9px; top: 46.9px; width: 116px; height: 133.5px; }
.pg-15 .p15-box--out li:nth-child(1) { top: 30px; }
.pg-15 .p15-box--out li:nth-child(2) { top: 70px; }
.pg-15 .p15-box--out li:nth-child(3) { top: 108px; }

.pg-15 .p15-arrow { width: 19px; height: 10px; }
.pg-15 .p15-arrow--1 { left: 267.4px; top: 104.4px; }
.pg-15 .p15-arrow--2 { left: 402.4px; top: 103.4px; }

/* colour-ramp legend, sitting straight on the photograph */
.pg-15 .p15-legend-t {
    left: 519.4px; top: 309.3px;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 11.2px;
    line-height: 14px;
    letter-spacing: .01em;
    color: #303840;
    white-space: nowrap;
}
.pg-15 .p15-legend-bar {
    left: 518.4px; top: 343.4px;
    width: 22px; height: 128px;
    background: linear-gradient(180deg,
        #D32513 0 13%, #DB5B1B 13% 26%, #E29A16 26% 40%,
        #E5C72B 40% 55%, #A9C349 55% 71%, #689E86 71% 85%, #1E6DA8 85% 100%);
}
.pg-15 .p15-legend-l {
    left: 550.4px;
    font-size: 12.4px;
    line-height: 14px;
    color: #3A4148;
    white-space: nowrap;
}
.pg-15 .p15-legend-l--h { top: 348.6px; }
.pg-15 .p15-legend-l--m { top: 395.6px; }
.pg-15 .p15-legend-l--l { top: 442.6px; }

/* --- bottom icon strip · cut by the poster trim ----------------------------- */

.pg-15 .p15-strip {
    left: 595px; top: 665px;
    width: 644px; height: 90px;
    border: 1.6px solid var(--hair);
    border-radius: 20px;
}
.pg-15 .p15-ring {
    position: absolute;
    top: 9.4px;
    width: 52px; height: 52px;
    border: 1.6px solid #4C5C44;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.pg-15 .p15-ring svg { width: 100%; height: 100%; }
.pg-15 .p15-ring--1 { left: 49.4px; }
.pg-15 .p15-ring--2 { left: 200.4px; }
.pg-15 .p15-ring--3 { left: 358.4px; }
.pg-15 .p15-ring--4 { left: 510.4px; }

/* ==========================================================================
   PAGE 16 · NOISE DISPERSION MODELLING                          Template I
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-16 .tI {
    --deep:  #2A5320;        /* icon badge fill                              */
    --h1:    #123A12;        /* display heading                              */
    --bold:  #234A21;        /* bold green emphasis                          */
    --hair:  #47543E;        /* hairline card borders                        */
    background: #F2F1ED;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-16 .tI > * { position: absolute; }

/* the thin dark frame lines down the left and right trims */
.pg-16 .p16-edge { top: 0; width: 4.4px; height: 810px; background: #1E3418; }
.pg-16 .p16-edge--l { left: 1.6px; }
.pg-16 .p16-edge--r { left: 1433.6px; }

/* --- title row -------------------------------------------------------------- */

.pg-16 .p16-wave { top: 15px; height: 72px; }
.pg-16 .p16-wave--l { left: 210px; width: 65px; }
.pg-16 .p16-wave--r { left: 1241px; top: 16px; width: 61px; height: 70px; }

.pg-16 .p16-title {
    left: 301px; top: -7px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 110px;
    line-height: 110px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

/* --- left text card ---------------------------------------------------------
   The card runs off the foot of the page and has no visible bottom edge.
-------------------------------------------------------------------------- */
.pg-16 .p16-card {
    left: 27.5px; top: 116px;
    width: 590px; height: 740px;
    border: 1.8px solid var(--hair);
    border-radius: 18px;
}

.pg-16 .p16-badge {
    --bs: 100px;
    --bf: var(--deep);
    box-shadow: none;
}
.pg-16 .p16-badge svg { width: 62%; height: 62%; fill: #fff; stroke: none; }
.pg-16 .p16-badge--1 { left: 56px; top: 156px; }
.pg-16 .p16-badge--2 { left: 54px; top: 462px; }
.pg-16 .p16-badge--3 { left: 54px; top: 678px; }

.pg-16 .p16-p1,
.pg-16 .p16-p2,
.pg-16 .p16-p3 {
    left: 178px;
    font-size: 27.5px;
    color: #333330;
    white-space: nowrap;
}
.pg-16 .p16-p1 { top: 151px; line-height: 37.2px; }
.pg-16 .p16-p2 { top: 468px; line-height: 40.3px; }
.pg-16 .p16-p3 { top: 683px; line-height: 41px; }
.pg-16 .p16-p1 b,
.pg-16 .p16-p2 b,
.pg-16 .p16-p3 b { font-weight: 700; color: var(--bold); }

.pg-16 .p16-dash {
    left: 48px;
    width: 494px; height: 1.8px;
    background: repeating-linear-gradient(90deg,
        #6E7A66 0 11px, rgba(0,0,0,0) 11px 15px);
}
.pg-16 .p16-dash--1 { top: 434px; }
.pg-16 .p16-dash--2 { top: 650px; }

/* --- propagation panel ------------------------------------------------------ */

.pg-16 .p16-panel {
    left: 633px; top: 116px;
    width: 776px; height: 631px;
    border: 1.8px solid var(--hair);
    border-radius: 18px;
    overflow: hidden;
}
.pg-16 .p16-panel > * { position: absolute; }

.pg-16 .p16-phead {
    left: 148.2px; top: 15.6px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: .01em;
    color: #1B4020;
    white-space: nowrap;
}

/* seven additive factor terms, joined by plus glyphs */
.pg-16 .p16-factors { position: absolute; inset: 0; }
.pg-16 .p16-f { position: absolute; top: 54.7px; width: 120px; }
.pg-16 .p16-ring {
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 64px; height: 64px;
    border: 1.6px solid #46583E;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #F2F1ED;
}
.pg-16 .p16-ring svg { width: 100%; height: 100%; }
.pg-16 .p16-f h4 {
    position: absolute;
    left: 0; right: 0; top: 73.4px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.4px;
    line-height: 15px;
    letter-spacing: .012em;
    color: #24402A;
    white-space: nowrap;
}
.pg-16 .p16-f--1 { left: -6.3px; }
.pg-16 .p16-f--2 { left: 100.7px; }
.pg-16 .p16-f--3 { left: 208.7px; }
.pg-16 .p16-f--4 { left: 317.7px; }
.pg-16 .p16-f--5 { left: 426.7px; }
.pg-16 .p16-f--6 { left: 539.7px; }
.pg-16 .p16-f--7 { left: 652.7px; }

.pg-16 .p16-plus {
    top: 79.9px;
    width: 15px; height: 15px;
    background:
        linear-gradient(#22401E, #22401E) center/15px 2.6px no-repeat,
        linear-gradient(#22401E, #22401E) center/2.6px 15px no-repeat;
}
.pg-16 .p16-plus--1 { left: 99.4px; }
.pg-16 .p16-plus--2 { left: 206.4px; }
.pg-16 .p16-plus--3 { left: 315.4px; }
.pg-16 .p16-plus--4 { left: 425.4px; }
.pg-16 .p16-plus--5 { left: 535.4px; }
.pg-16 .p16-plus--6 { left: 648.4px; }

.pg-16 .p16-scene { left: 0; top: 154.6px; width: 772.4px; height: 473px; }

/* predicted-noise legend, a white plate over the photograph */
.pg-16 .p16-legend {
    left: 653.6px; top: 216.2px;
    width: 111px; height: 220px;
    background: #FCFCFA;
    border: 1.3px solid #7C8878;
    border-radius: 7px;
}
.pg-16 .p16-legend h4 {
    position: absolute;
    left: 0; right: 0; top: 3.7px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.4px;
    line-height: 17px;
    letter-spacing: .01em;
    color: #2A2F2A;
    white-space: nowrap;
}
.pg-16 .p16-legend li {
    position: absolute;
    left: 16px;
    height: 21px;
    font-size: 13.6px;
    line-height: 21px;
    color: #2A2F2A;
    white-space: nowrap;
}
.pg-16 .p16-legend li i {
    position: absolute;
    left: 0; top: 0;
    width: 21px; height: 21px;
    display: block;
}
.pg-16 .p16-legend li span { position: absolute; left: 29.2px; top: 0; }
.pg-16 .p16-legend li:nth-child(1) { top: 50.2px; }
.pg-16 .p16-legend li:nth-child(2) { top: 73.5px; }
.pg-16 .p16-legend li:nth-child(3) { top: 96.8px; }
.pg-16 .p16-legend li:nth-child(4) { top: 120.1px; }
.pg-16 .p16-legend li:nth-child(5) { top: 143.4px; }
.pg-16 .p16-legend li:nth-child(6) { top: 166.7px; }
.pg-16 .p16-legend li:nth-child(7) { top: 190.0px; }

/* --- bottom icon strip · cut by the bottom trim ------------------------------ */

.pg-16 .p16-strip {
    left: 633px; top: 745px;
    width: 776px; height: 90px;
    background: #E7E9DD;
    border: 1.8px solid var(--hair);
    border-top: 0;
    border-radius: 0 0 18px 18px;
}
.pg-16 .p16-sring {
    position: absolute;
    top: 8.4px;
    width: 64px; height: 64px;
    border: 1.6px solid #57654E;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.pg-16 .p16-sring svg { width: 100%; height: 100%; }
.pg-16 .p16-sring--1 { left: 53.2px; }
.pg-16 .p16-sring--2 { left: 239.2px; }
.pg-16 .p16-sring--3 { left: 432.2px; }
.pg-16 .p16-sring--4 { left: 630.2px; }

.pg-16 .p16-div {
    position: absolute;
    top: 23.4px;
    width: 1.6px; height: 60px;
    background: #B9BCAE;
}
.pg-16 .p16-div--1 { left: 179.2px; }
.pg-16 .p16-div--2 { left: 369.2px; }
.pg-16 .p16-div--3 { left: 559.2px; }

/* --- corner leaf sprigs ------------------------------------------------------ */

.pg-16 .p16-leaf--tl { left: 0; top: 0; width: 44px; height: 58px; }
.pg-16 .p16-leaf--bl { left: 0; top: 758px; width: 56px; height: 52px; }

/* ==========================================================================
   PAGE 17 · APPROVALS AND AUTHORIZATIONS                        Template H
   All coordinates measured off the 1440 x 810 source page.
   ========================================================================== */

.pg-17 .tH {
    --deep:  #22461B;        /* icon badge fill                              */
    --h1:    #0B310E;        /* display heading                              */
    --bold:  #244122;        /* bold green emphasis                          */
    --lab:   #263A24;        /* card labels                                  */
    --hair:  #7C897A;        /* hairline card borders                       */
    background: #F6F5F1;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-17 .tH > * { position: absolute; }

.pg-17 .p17-edge { top: 0; height: 810px; background: #374B32; }
.pg-17 .p17-edge--l { left: 0; width: 2.6px; }
.pg-17 .p17-edge--r { left: 1437px; width: 3px; }

/* --- title band ------------------------------------------------------------ */

.pg-17 .p17-sprig--l { left: 148px; top: 15px; width: 80px; height: 84px; }
.pg-17 .p17-sprig--r { left: 1327px; top: 15px; width: 78px; height: 82px; }
.pg-17 .p17-leaves   { left: 1405px; top: 0; width: 35px; height: 52px; }

.pg-17 .p17-title {
    left: 251px; top: -1px;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: 111px;
    line-height: 111px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--h1);
    white-space: nowrap;
}

.pg-17 .p17-rule {
    left: 46px; top: 122px;
    width: 1351px; height: 2px;
    background: #71786E;
}
.pg-17 .p17-dot {
    top: 117px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #2C4428;
}
.pg-17 .p17-dot--l { left: 40px; }
.pg-17 .p17-dot--r { left: 1391px; }

/* --- left text card --------------------------------------------------------
   The card runs off the foot of the page, so it has no visible bottom edge.
-------------------------------------------------------------------------- */
.pg-17 .p17-card {
    left: 30px; top: 161px;
    width: 520px; height: 690px;
    border: 1.6px solid var(--hair);
    border-radius: 18px;
}

.pg-17 .p17-badge {
    --bs: 118px;
    --bf: var(--deep);
    box-shadow: none;
}
.pg-17 .p17-badge svg { width: 62%; height: 62%; fill: #fff; stroke: none; }
.pg-17 .p17-badge--1 { left: 51px; top: 186px; }
.pg-17 .p17-badge--2 { left: 48px; top: 458px; --bs: 117px; }

.pg-17 .p17-p1,
.pg-17 .p17-p2 {
    left: 188px;
    font-size: 24.8px;
    color: #262624;
    white-space: nowrap;
}
.pg-17 .p17-p1 { top: 187px; line-height: 39.5px; }
.pg-17 .p17-p2 { top: 450px; line-height: 39.8px; }
.pg-17 .p17-p1 b,
.pg-17 .p17-p2 b { font-weight: 700; color: var(--bold); }

.pg-17 .p17-dash {
    left: 47px; top: 415px;
    width: 463px; height: 1.8px;
    background: repeating-linear-gradient(90deg,
        #9AA396 0 11px, rgba(0,0,0,0) 11px 15px);
}

/* --- bottom-left corner artwork -------------------------------------------
   Pale skyline, wind turbine and globe silhouettes with leaf sprigs; drawn
   over the foot of the left card in the source and cut by the bottom trim.
-------------------------------------------------------------------------- */
.pg-17 .p17-corner-leaves { left: 0; top: 683px; width: 176px; height: 49px; z-index: 2; }
.pg-17 .p17-corner-band   { left: 0; top: 730px; width: 570px; height: 80px; z-index: 2; }

/* --- approval card grid ----------------------------------------------------- */

.pg-17 .p17-grid { position: absolute; inset: 0; }

.pg-17 .p17-tile {
    position: absolute;
    background: #EFF0E7;
    border: 1.6px solid var(--hair);
    border-radius: 11px;
    overflow: hidden;
}

.pg-17 .p17-tbadge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    --bs: 74px;
    --bf: var(--deep);
    box-shadow: none;
}
.pg-17 .p17-tbadge svg { width: 62%; height: 62%; fill: #fff; stroke: none; }

.pg-17 .p17-lab {
    position: absolute;
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15.1px;
    line-height: 23px;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--lab);
    white-space: nowrap;
}

.pg-17 .p17-photo { position: absolute; left: 0; right: 0; }
.pg-17 .p17-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* row 1 */
.pg-17 .p17-tile--r1 { top: 161px; height: 333px; }
.pg-17 .p17-tile--r1 .p17-tbadge { top: 13.4px; }
.pg-17 .p17-tile--r1 .p17-lab    { top: 96.4px; }
.pg-17 .p17-tile--r1 .p17-photo  { top: 152.4px; height: 179px; }

/* row 2 · sliced by the bottom trim */
.pg-17 .p17-tile--r2 { top: 513px; height: 341px; }
.pg-17 .p17-tile--r2 .p17-tbadge { top: 12.4px; }
.pg-17 .p17-tile--r2 .p17-lab    { top: 100.4px; }
.pg-17 .p17-tile--r2 .p17-photo  { top: 160.4px; height: 135px; }

/* columns */
.pg-17 .p17-tile--c1 { left: 573.3px; width: 197.2px; }
.pg-17 .p17-tile--c2 { left: 783.8px; width: 198.2px; }
.pg-17 .p17-tile--c3 { left: 994.8px; width: 198.7px; }
.pg-17 .p17-tile--c4 { left: 1206.8px; width: 198.7px; }

/* the three-line labels start higher and, in row 1, push the photo down */
.pg-17 .p17-tile--r1 .p17-lab--3   { top: 93.4px; }
.pg-17 .p17-tile--r1.p17-tile--c3 .p17-photo { top: 163.4px; height: 168px; }
.pg-17 .p17-tile--r2 .p17-lab--3   { top: 89.4px; }
.pg-17 .p17-tile--r2.p17-tile--c1 .p17-photo { top: 159.4px; height: 136px; }

/* ==========================================================================
   PAGE 18 · STATUTORY COMPLIANCE TRAINING                     Template J
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-18 .tJ {
    --nv: #113145;              /* navy, sampled from the solid badges        */
    --gr: #4C7243;              /* mid green, sampled from the solid badges   */
    --pg-body: #404040;
    background: #F7F7F7;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* --- bottom props (skyline, laptop, clipboard, leaf) ---------------------- */
.pg-18 .tJ-props {
    position: absolute;
    left: 0; top: 700px;
    width: 1440px; height: 110px;
    z-index: 0;
}

/* --- two-line centred display heading -------------------------------------
   line 1 "STATUTORY COMPLIANCE"  x 308.8-1219.5, cap band y 41-103
   line 2 "TRAINING"              x 574.1-953.0,  cap band y 126-188
-------------------------------------------------------------------------- */
.pg-18 .tJ-title {
    position: absolute;
    left: 86px; right: 0; top: 0;
    z-index: 3;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-18 .tJ-title span {
    position: absolute;
    left: 0; right: 0;
    display: block;
    line-height: 86px;
    font-size: 86px;
}
.pg-18 .tJ-title i { font-style: normal; }
.pg-18 .tJ-title .l1 { top: 30px; color: var(--nv); }
.pg-18 .tJ-title .l2 { top: 114px; color: #466E41; }

.pg-18 .tJ-titlerule {
    position: absolute;
    left: 630px; top: 215px;
    width: 243px; height: 3.4px;
    background: #34506A;
    z-index: 3;
}

/* --- orbit, connectors, terminals ----------------------------------------- */
.pg-18 .tJ-links {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 1;
}
.pg-18 .lk path   { fill: none; stroke-width: 2.4; }
.pg-18 .lk circle { stroke: none; }
.pg-18 .lk--g path, .pg-18 .lk--g circle { stroke: var(--gr); fill: var(--gr); }
.pg-18 .lk--n path, .pg-18 .lk--n circle { stroke: var(--nv); fill: var(--nv); }
.pg-18 .lk--g path { fill: none; }
.pg-18 .lk--n path { fill: none; }

/* --- central shield ------------------------------------------------------- */
.pg-18 .tJ-shield {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 2;
}
.pg-18 .sh-out  { fill: var(--nv); }
.pg-18 .sh-mid  { fill: #FFFFFF; }
.pg-18 .sh-in   { fill: url(#p18shield); }
.pg-18 .sh-tick {
    fill: none; stroke: #FFFFFF; stroke-width: 21;
    stroke-linecap: round; stroke-linejoin: round;
}

/* --- the six spokes -------------------------------------------------------- */
.pg-18 .tJ-items { position: absolute; inset: 0; z-index: 3; }
.pg-18 .tJ-item  { position: absolute; display: block; width: 0; height: 0; }

.pg-18 .tJ-item .badge {
    position: absolute;
    --bs: 122px;
    box-shadow: none;
}
.pg-18 .tJ-item .badge svg {
    width: 54%; height: 54%;
    fill: none; stroke: #fff;
    stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.pg-18 .tJ-item .badge--solid svg { fill: #fff; stroke: none; }

.pg-18 .tJ-h {
    position: absolute;
    margin: 0;
    white-space: nowrap;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-18 .tJ-h .fit { display: inline-block; }
.pg-18 .tJ-h--g { color: var(--gr); }
.pg-18 .tJ-h--n { color: var(--nv); }

.pg-18 .tJ-p {
    position: absolute;
    margin: 0;
    white-space: nowrap;
    font-size: 23.8px;
    line-height: 31px;
    letter-spacing: 0;
    color: var(--pg-body);
}

/* item 1 · KNOW THE LAW */
.pg-18 .tJ-item--1 .badge { left: 97px;  top: 229px; --bf: var(--gr); }
.pg-18 .tJ-item--1 .tJ-h  { left: 241px; top: 244px; }
.pg-18 .tJ-item--1 .tJ-p  { left: 241px; top: 298px; }

/* item 2 · ENSURE COMPLIANCE */
.pg-18 .tJ-item--2 .badge { left: 56px;  top: 420px; --bf: var(--nv); }
.pg-18 .tJ-item--2 .tJ-h  { left: 202px; top: 435px; }
.pg-18 .tJ-item--2 .tJ-p  { left: 202px; top: 485px; }

/* item 3 · IDENTIFY RISKS */
.pg-18 .tJ-item--3 .badge { left: 128px; top: 611px; --bf: var(--gr); }
.pg-18 .tJ-item--3 .tJ-h  { left: 272px; top: 624px; }
.pg-18 .tJ-item--3 .tJ-p  { left: 272px; top: 674px; }

/* item 4 · AVOID PENALTIES */
.pg-18 .tJ-item--4 .badge { left: 994px;  top: 230px; --bf: var(--nv); }
.pg-18 .tJ-item--4 .tJ-h  { left: 1136px; top: 247px; }
.pg-18 .tJ-item--4 .tJ-p  { left: 1136px; top: 298px; }

/* item 5 · BUILD AWARENESS */
.pg-18 .tJ-item--5 .badge { left: 1027px; top: 421px; --bf: var(--gr); }
.pg-18 .tJ-item--5 .tJ-h  { left: 1166px; top: 435px; }
.pg-18 .tJ-item--5 .tJ-p  { left: 1166px; top: 485px; }

/* item 6 · SUPPORT BUSINESS */
.pg-18 .tJ-item--6 .badge { left: 983px;  top: 615px; --bf: var(--nv); }
.pg-18 .tJ-item--6 .tJ-h  { left: 1122px; top: 628px; }
.pg-18 .tJ-item--6 .tJ-p  { left: 1122px; top: 679px; }

/* ==========================================================================
   PAGE 19 · ETP / STP DESIGN AND COMMISSIONING                Template F
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-19 .tF {
    --g-deep:  #1E3A12;         /* pill / badge / icon green, sampled        */
    --g-title: #143205;
    --g-bold:  #2C5320;         /* bold key phrases in the card copy         */
    --g-label: #21421A;
    --ink19:   #464646;
    --ink19-s: #565656;
    --hair:    #CCCEC8;
    --hair-s:  #E1E3DF;
    background: #FDFDFD;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* --- page frame hairlines -------------------------------------------------- */
.pg-19 .tF-fr { position: absolute; background: #C6C8C3; }
.pg-19 .tF-fr--top { left: 92px;   top: 3px;  width: 1273px; height: 1.6px; }
.pg-19 .tF-fr--l   { left: 33px;   top: 59px; width: 1.6px;  height: 751px; background: #C0C2BD; }
.pg-19 .tF-fr--r   { left: 1425px; top: 65px; width: 1.6px;  height: 745px; background: #DEE0DB; }

/* --- title row ------------------------------------------------------------- */
.pg-19 .tF-leaf {
    position: absolute;
    display: block;
    width: auto; opacity: 1;
    vertical-align: baseline;
}
.pg-19 .tF-leaf--l { left: 62px;   top: 20px; width: 82px; height: 84px; }
.pg-19 .tF-leaf--r { left: 1330px; top: 24px; width: 78px; height: 80px; }

.pg-19 .tF-title {
    position: absolute;
    left: 197px; right: auto; top: 27px;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 88px;
    line-height: 88px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--g-title);
}

.pg-19 .tF-rule {
    position: absolute;
    left: 0; top: 106px;
    width: 1440px; height: 20px;
}

/* ==========================  LEFT CARD  ==================================== */
.pg-19 .tF-card {
    left: 52px; top: 134px;
    width: 432px; height: 690px;
    padding: 0;
    border: 1.6px solid var(--hair);
    border-radius: 20px;
    background: #FCFCFA;
    overflow: hidden;
}
.pg-19 .tF-cbadge {
    position: absolute;
    --bs: 96px; --bf: var(--g-deep);
    box-shadow: none;
}
.pg-19 .tF-cbadge svg { width: 56%; height: 56%; fill: #fff; stroke: none; }
.pg-19 .tF-cbadge--1 { left: 9px; top: 19px; }
.pg-19 .tF-cbadge--2 { left: 9px; top: 187px; }

.pg-19 .tF-ctext {
    position: absolute;
    left: 116px;
    margin: 0;
    font-size: 19.5px;
    line-height: 31.4px;
    color: var(--ink19);
}
.pg-19 .ln { display: block; white-space: nowrap; }
.pg-19 i.fit { font-style: normal; }
.pg-19 .ln > i { font-style: normal; }
.pg-19 .tF-ctext b { font-weight: 700; color: var(--g-bold); }
.pg-19 .tF-ctext--1 { top: 18px; }
.pg-19 .tF-ctext--2 { top: 180px; }

.pg-19 .tF-dash {
    position: absolute;
    left: 16px; top: 160px;
    width: 394px; height: 2px;
    background: repeating-linear-gradient(90deg,
                #7C7C78 0 11px, transparent 11px 20px);
}

.pg-19 .tF-cphoto {
    position: absolute;
    left: -1px; top: 363px;
    width: 431px; height: 312px;
    overflow: hidden;
}
.pg-19 .tF-cphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================  PANELS & PILLS  =============================== */
.pg-19 .tF-panel {
    padding: 0;
    border: 1.6px solid var(--hair-s);
    border-radius: 16px;
    background: #FCFCFA;
}
.pg-19 .tF-panel--proc { left: 498px; top: 154px; width: 904px; height: 489px; }
.pg-19 .tF-panel--ben  { left: 498px; top: 676px; width: 904px; height: 140px; }

.pg-19 .tF-pill {
    position: absolute;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-deep);
    color: #fff;
    border-radius: 999px;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: uppercase;
    z-index: 3;
}
.pg-19 .tF-pill--proc { left: 793px; top: 138px; width: 221px; height: 30px; font-size: 21px; }
.pg-19 .tF-pill--ben  { left: 792px; top: 657px; width: 201px; height: 29px; font-size: 20px; }

/* ==========================  PROCESS STEPS  ================================ */
.pg-19 .tF-steps { position: absolute; inset: 0; }
.pg-19 .tF-step {
    position: absolute;
    top: 206px; height: 437px;
    border: 1.4px solid var(--hair-s);
    border-radius: 12px;
    background: #FCFCFA;
}
.pg-19 .tF-step--1 { left: 505px;  width: 114px; }
.pg-19 .tF-step--2 { left: 629px;  width: 117px; }
.pg-19 .tF-step--3 { left: 756px;  width: 118px; }
.pg-19 .tF-step--4 { left: 883px;  width: 120px; }
.pg-19 .tF-step--5 { left: 1012px; width: 122px; }
.pg-19 .tF-step--6 { left: 1144px; width: 120px; }
.pg-19 .tF-step--7 { left: 1273px; width: 118px; }

.pg-19 .tF-num {
    position: absolute;
    left: 50%; top: -18px;
    transform: translateX(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--g-deep);
    color: #fff;
    display: grid; place-items: center;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}
.pg-19 .tF-step--1 .tF-num { left: 61px; transform: none; }

.pg-19 .tF-icon {
    position: absolute;
    left: 50%; top: 21px;
    transform: translateX(-50%);
    width: 62px; height: 64px;
    display: grid; place-items: center;
}
.pg-19 .tF-icon svg { width: 100%; height: 100%; fill: var(--g-deep); }

.pg-19 .tF-label {
    position: absolute;
    left: -60px; right: -60px; top: 97px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 16.6px;
    line-height: 18.5px;
    letter-spacing: 0;
    color: var(--g-label);
}
.pg-19 .tF-desc {
    position: absolute;
    left: -60px; right: -60px; top: 145px;
    margin: 0;
    text-align: center;
    font-size: 12.6px;
    line-height: 17.7px;
    color: var(--ink19-s);
}
.pg-19 .tF-step--5 .tF-desc { top: 163px; }

.pg-19 .tF-sphoto {
    position: absolute;
    left: 0; right: 0; top: 282px;
    height: 146px;
    border-radius: 8px;
    overflow: hidden;
}
.pg-19 .tF-sphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-19 .tF-arrows {
    position: absolute;
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 2;
}

/* ==========================  KEY BENEFITS  ================================= */
.pg-19 .tF-bens { position: absolute; inset: 0; }
.pg-19 .tF-ben { position: absolute; top: 676px; width: 0; }
.pg-19 .tF-ben::before {
    content: "";
    position: absolute;
    left: 0; top: 16px;
    width: 1.4px; height: 134px;
    background: var(--hair-s);
}
.pg-19 .tF-ben--1 { left: 569px; }
.pg-19 .tF-ben--2 { left: 718px; }
.pg-19 .tF-ben--3 { left: 859px; }
.pg-19 .tF-ben--4 { left: 1002px; }
.pg-19 .tF-ben--5 { left: 1157px; }
.pg-19 .tF-ben--6 { left: 1310px; }
.pg-19 .tF-ben--1::before { left: -68px; }
.pg-19 .tF-ben--2::before { left: -77px; }
.pg-19 .tF-ben--3::before { left: -70px; }
.pg-19 .tF-ben--4::before { left: -69px; }
.pg-19 .tF-ben--5::before { left: -74px; }
.pg-19 .tF-ben--6::before { left: -76px; }

.pg-19 .tF-bicon {
    position: absolute;
    left: -37px; top: 17px;
    width: 74px; height: 68px;
    display: grid; place-items: center;
}
.pg-19 .tF-bicon svg { width: 100%; height: 100%; fill: var(--g-deep); }

.pg-19 .tF-bcap {
    position: absolute;
    left: -110px; top: 95px;
    width: 220px;
    margin: 0;
    text-align: center;
    font-size: 14.6px;
    line-height: 20px;
    color: #555555;
}

/* ==========================================================================
   PAGE 20 · 3D ENVIRONMENT DESIGN                             Template K
   All coordinates measured from the 1440 x 810 source page.
   The collage's left edge and the A|B/C and D|E gutters are all diagonal;
   each cell is clipped with the measured polygon.
   ========================================================================== */

.pg-20 .tK {
    --g-ink:  #0B2408;          /* title + badge fill, sampled               */
    --g-dot:  #243D16;          /* halftone dots                            */
    --g-bul:  #2A421E;          /* bullet dots                              */
    --lbl:    #1D1D1D;
    background: #F0F2ED;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* --- halftone dot-grid corners ---------------------------------------------
   A halftone: dot size falls off with distance from the corner, so three
   stacked dot layers are masked at increasing radii, over a solid corner blob.
-------------------------------------------------------------------------- */
.pg-20 .tK-dots { position: absolute; }
.pg-20 .tK-dots::before,
.pg-20 .tK-dots::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 9.6px 9.6px;
}

.pg-20 .tK-dots--tl {
    left: 0; top: 0; width: 150px; height: 140px;
    background: radial-gradient(86px 82px at -14px -16px,
        var(--g-dot) 0 54%, rgba(36,61,22,.45) 74%, rgba(36,61,22,0) 92%);
}
.pg-20 .tK-dots--tl::before {
    background-image: radial-gradient(circle, var(--g-dot) 42%, rgba(0,0,0,0) 47%);
    -webkit-mask-image: radial-gradient(158px 150px at -8px -10px,
        #000 0 32%, rgba(0,0,0,.55) 48%, rgba(0,0,0,0) 64%);
    mask-image: radial-gradient(158px 150px at -8px -10px,
        #000 0 32%, rgba(0,0,0,.55) 48%, rgba(0,0,0,0) 64%);
}
.pg-20 .tK-dots--tl::after {
    background-image: radial-gradient(circle, var(--g-dot) 24%, rgba(0,0,0,0) 29%);
    -webkit-mask-image: radial-gradient(172px 162px at -8px -10px,
        rgba(0,0,0,0) 28%, rgba(0,0,0,.9) 48%, rgba(0,0,0,.5) 74%, rgba(0,0,0,0) 97%);
    mask-image: radial-gradient(172px 162px at -8px -10px,
        rgba(0,0,0,0) 28%, rgba(0,0,0,.9) 48%, rgba(0,0,0,.5) 74%, rgba(0,0,0,0) 97%);
}

.pg-20 .tK-dots--bl {
    left: 0; top: 675px; width: 136px; height: 135px;
}
.pg-20 .tK-dots--bl::before {
    background-image: radial-gradient(circle, var(--g-dot) 40%, rgba(0,0,0,0) 45%);
    -webkit-mask-image: radial-gradient(140px 136px at -6px 140px,
        #000 0 26%, rgba(0,0,0,.5) 46%, rgba(0,0,0,0) 62%);
    mask-image: radial-gradient(140px 136px at -6px 140px,
        #000 0 26%, rgba(0,0,0,.5) 46%, rgba(0,0,0,0) 62%);
}
.pg-20 .tK-dots--bl::after {
    background-image: radial-gradient(circle, var(--g-dot) 23%, rgba(0,0,0,0) 28%);
    -webkit-mask-image: radial-gradient(152px 146px at -6px 140px,
        rgba(0,0,0,0) 24%, rgba(0,0,0,.85) 46%, rgba(0,0,0,.45) 72%, rgba(0,0,0,0) 97%);
    mask-image: radial-gradient(152px 146px at -6px 140px,
        rgba(0,0,0,0) 24%, rgba(0,0,0,.85) 46%, rgba(0,0,0,.45) 72%, rgba(0,0,0,0) 97%);
}

/* --- left feature panel ----------------------------------------------------- */
.pg-20 .tK-left {
    position: absolute;
    inset: 0;
    width: auto;
    background: none;
    z-index: 2;
}
.pg-20 .tK-left-inner { position: static; padding: 0; }

.pg-20 .tK-title {
    position: absolute;
    left: 46px; top: 0;
    margin: 0;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--g-ink);
}
.pg-20 .tK-title span {
    position: absolute;
    left: 0;
    display: block;
    white-space: nowrap;
    font-size: 110px;
    line-height: 110px;
}
.pg-20 .tK-title i { font-style: normal; }
.pg-20 .tK-title .l1 { top: 89px; }
.pg-20 .tK-title .l2 { top: 190px; }

.pg-20 .tK-rows { position: absolute; inset: 0; margin: 0; }
.pg-20 .tK-row {
    position: absolute;
    left: 0; right: 0;
    display: block;
    margin: 0;
}
.pg-20 .tK-row--1 { top: 322px; }
.pg-20 .tK-row--2 { top: 407.3px; }
.pg-20 .tK-row--3 { top: 492.6px; }
.pg-20 .tK-row--4 { top: 577.9px; }
.pg-20 .tK-row--5 { top: 663.2px; }

.pg-20 .tK-row .badge {
    position: absolute;
    left: 46px; top: 0;
    --bs: 70px; --bf: var(--g-ink);
    box-shadow: none;
}
.pg-20 .tK-row .badge svg {
    width: 54%; height: 54%;
    fill: none; stroke: #fff; stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.pg-20 .tK-row .badge--solid svg { stroke: none; }

.pg-20 .tK-bullet {
    position: absolute;
    left: 133px; top: 29px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--g-bul);
}
.pg-20 .tK-label {
    position: absolute;
    left: 163px; top: 19px;
    margin: 0;
    white-space: nowrap;
    font-size: 24.8px;
    line-height: 30px;
    color: var(--lbl);
}
.pg-20 .tK-label i { font-style: normal; }

.pg-20 .tK-div { position: absolute; left: 149px; height: 1.6px; background: #CED0CB; }
.pg-20 .tK-div--1 { top: 399px; width: 334px; }
.pg-20 .tK-div--2 { top: 484px; width: 321px; }
.pg-20 .tK-div--3 { top: 569px; width: 304px; }
.pg-20 .tK-div--4 { top: 654px; width: 288px; }

/* --- diagonal render collage ------------------------------------------------ */
.pg-20 .tK-collage {
    position: absolute;
    left: 0; top: 0; right: auto; bottom: auto;
    width: 1440px; height: 810px;
    z-index: 1;
}
.pg-20 .tK-cell { position: absolute; overflow: hidden; }
.pg-20 .tK-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-20 .tK-cell--a {
    left: 490px; top: 0; width: 586px; height: 541px;
    clip-path: polygon(272px 0, 586px 0, 388px 540px, 1px 540px);
}
.pg-20 .tK-cell--b {
    left: 983px; top: 0; width: 457px; height: 266px;
    clip-path: polygon(98px 0, 457px 0, 457px 265px, 1px 265px);
}
.pg-20 .tK-cell--c {
    left: 883px; top: 268px; width: 557px; height: 273px;
    clip-path: polygon(100px 0, 557px 0, 557px 272px, 0 272px);
}
.pg-20 .tK-cell--d {
    left: 415px; top: 545px; width: 565px; height: 266px;
    clip-path: polygon(78px 0, 563px 0, 460px 265px, 10px 265px,
                       2px 230px, 7px 205px, 32px 155px, 55px 105px, 77px 55px);
}
.pg-20 .tK-cell--e {
    left: 878px; top: 545px; width: 562px; height: 266px;
    clip-path: polygon(105px 0, 562px 0, 562px 266px, 3px 266px);
}

.pg-20 .tK-edge {
    position: absolute;
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 3;
    pointer-events: none;
}

/* ==========================================================================
   PAGE 21 · PSM — PROCESS SAFETY MANAGEMENT                   Template L
   All coordinates measured from the 1440 x 810 source page.
   The wheel is inline SVG: donut arcs measured off the source (centre
   707.5 / 475.5, outer r 244, inner r 116) with live <text> labels.
   ========================================================================== */

.pg-21 .tL {
    --navy21:  #08203C;
    --orange21:#DA6606;
    --ink21:   #3E3E3E;
    --hair21:  #D2D2D2;
    background: #EEEEEE;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* --- hero band -------------------------------------------------------------- */
.pg-21 .tL-hero {
    position: absolute;
    left: 596px; top: 0;
    width: 844px; height: 310px;
    z-index: 1;
}
.pg-21 .tL-shield {
    position: absolute;
    left: 687px; top: 27px;
    width: 70px; height: 92px;
    z-index: 2;
}
.pg-21 .tL-tag {
    position: absolute;
    left: 777px; top: 32px;
    margin: 0;
    z-index: 2;
    font-size: 21px;
    line-height: 29.5px;
    color: #FFFFFF;
}
.pg-21 .ln { display: block; white-space: nowrap; }
.pg-21 i.fit { font-style: normal; }

/* --- title lockup ------------------------------------------------------------ */
.pg-21 .tL-psm {
    position: absolute;
    left: 40px; top: -19px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 800;
    font-size: 184px;
    line-height: 184px;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--navy21);
}
/* the source sets PSM in a grained/distressed face; a fine speckle is clipped
   to the glyphs so the texture survives at page scale */
.pg-21 .tL-psm .fit {
    background-image:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,.20) 0 1px, rgba(0,0,0,0) 1.4px),
        radial-gradient(circle at 70% 15%, rgba(255,255,255,.15) 0 .8px, rgba(0,0,0,0) 1.2px),
        radial-gradient(circle at 15% 80%, rgba(255,255,255,.12) 0 1.1px, rgba(0,0,0,0) 1.5px),
        linear-gradient(var(--navy21), var(--navy21));
    background-size: 7px 9px, 11px 6px, 13px 12px, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pg-21 .tL-stack {
    position: absolute;
    left: 339px; top: 0;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}
.pg-21 .tL-stack span {
    position: absolute;
    left: 0;
    display: block;
    white-space: nowrap;
    font-size: 57px;
    line-height: 57px;
}
.pg-21 .tL-stack .s1 { top: -3px;  color: var(--navy21); }
.pg-21 .tL-stack .s2 { top: 48px;  color: var(--orange21); }
.pg-21 .tL-stack .s3 { top: 98px;  color: var(--navy21); }

.pg-21 .tL-rule {
    position: absolute;
    left: 48px; top: 160px;
    width: 539px; height: 2.4px;
    background: #6B6B74;
    z-index: 3;
}
.pg-21 .tL-dot {
    position: absolute;
    left: 37px; top: 156px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--orange21);
    z-index: 3;
}
.pg-21 .tL-lede {
    position: absolute;
    left: 40px; top: 172px;
    margin: 0;
    z-index: 3;
    font-size: 24px;
    line-height: 27px;
    color: var(--ink21);
}

/* --- bottom refinery silhouettes --------------------------------------------- */
.pg-21 .tL-sil {
    position: absolute;
    left: 250px; top: 685px;
    width: 375px; height: 125px;
    z-index: 1;
}

/* --- PSM KEY ELEMENTS pill + right panel -------------------------------------- */
.pg-21 .tL-pill {
    position: absolute;
    left: 23px; top: 246px;
    width: 227px; height: 39px;
    margin: 0;
    z-index: 4;
    display: flex; align-items: center; justify-content: center;
    background: #04335B;
    color: #fff;
    border-radius: 20px;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.pg-21 .tL-panel {
    position: absolute;
    left: 955px; top: 306px;
    width: 490px; height: 510px;
    border-radius: 18px;
    background: #E8E8E8;
    z-index: 2;
}

/* --- the two numbered element columns ----------------------------------------- */
.pg-21 .tL-col { position: absolute; inset: 0; z-index: 3; }
.pg-21 .tL-item {
    position: absolute;
    display: block;
    padding: 0;
}
.pg-21 .tL-item + .tL-item { border-top: 0; }

.pg-21 .tL-item .badge {
    position: absolute;
    --bs: 68px;
    box-shadow: 0 0 0 3px #FFFFFF, 0 3px 8px rgba(20,30,45,.28);
}
.pg-21 .tL-item .badge svg { width: 56%; height: 56%; fill: #fff; stroke: none; }

.pg-21 .tL-h {
    position: absolute;
    margin: 0;
    width: 340px;
    text-align: left;
    white-space: nowrap;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 17px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-21 .tL-p {
    position: absolute;
    margin: 0;
    width: 340px;
    text-align: left;
    font-size: 15px;
    line-height: 18px;
    color: var(--ink21);
}

/* left column ---------------------------------------------------------------- */
.pg-21 .tL-col--l .tL-item .badge { left: 32px; }
.pg-21 .tL-col--l .tL-h { left: 122px; top: -2px; }
.pg-21 .tL-col--l .tL-p { left: 136px; top: 20px; }

.pg-21 .tL-item--1 { left: 0; top: 305px; }
.pg-21 .tL-item--1 .badge { top: -5px;  --bf: #052852; }
.pg-21 .tL-item--1 .tL-h  { color: #123863; }
.pg-21 .tL-item--1 .tL-p  { top: 23px; }

.pg-21 .tL-item--2 { left: 0; top: 415px; }
.pg-21 .tL-item--2 .badge { top: -15px; --bf: #395621; }
.pg-21 .tL-item--2 .tL-h  { color: #4B6B2C; }
.pg-21 .tL-item--2 .tL-p  { top: 21px; }

.pg-21 .tL-item--3 { left: 0; top: 507px; }
.pg-21 .tL-item--3 .badge { top: -9px;  --bf: #CD7709; }
.pg-21 .tL-item--3 .tL-h  { color: #D08312; }
.pg-21 .tL-item--3 .tL-p  { top: 22px; }

.pg-21 .tL-item--4 { left: 0; top: 610px; }
.pg-21 .tL-item--4 .badge { top: -12px; --bf: #3D2E5A; }
.pg-21 .tL-item--4 .tL-h  { color: #46356A; }
.pg-21 .tL-item--4 .tL-p  { top: 23px; }

.pg-21 .tL-item--5 { left: 0; top: 712px; }
.pg-21 .tL-item--5 .badge { top: -14px; --bf: #05254D; }
.pg-21 .tL-item--5 .tL-h  { color: #123863; }
.pg-21 .tL-item--5 .tL-p  { top: 22px; }

/* right column --------------------------------------------------------------- */
.pg-21 .tL-col--r .tL-item .badge { left: 1007px; }
.pg-21 .tL-col--r .tL-h { left: 1095px; top: -3px; }
.pg-21 .tL-col--r .tL-p { left: 1106px; top: 20px; }

.pg-21 .tL-item--6 { left: 0; top: 325px; }
.pg-21 .tL-item--6 .badge { top: -5px;  --bf: #701F1D; }
.pg-21 .tL-item--6 .tL-h  { color: #8A2422; }
.pg-21 .tL-item--6 .tL-p  { top: 22px; }

.pg-21 .tL-item--7 { left: 0; top: 440px; }
.pg-21 .tL-item--7 .badge { top: -12px; --bf: #07525F; }
.pg-21 .tL-item--7 .tL-h  { color: #0E5E6E; }
.pg-21 .tL-item--7 .tL-p  { top: 20px; }

.pg-21 .tL-item--8 { left: 0; top: 537px; }
.pg-21 .tL-item--8 .badge { top: -12px; --bf: #BD820C; }
.pg-21 .tL-item--8 .tL-h  { color: #C08A16; }
.pg-21 .tL-item--8 .tL-p  { top: 23px; }

.pg-21 .tL-item--9 { left: 0; top: 634px; }
.pg-21 .tL-item--9 .badge { top: -13px; --bf: #3A5723; }
.pg-21 .tL-item--9 .tL-h  { color: #47652C; }
.pg-21 .tL-item--9 .tL-p  { top: 21px; }

.pg-21 .tL-item--10 { left: 0; top: 722px; }
.pg-21 .tL-item--10 .badge { top: -6px;  --bf: #031B35; }
.pg-21 .tL-item--10 .tL-h  { color: #123863; }
.pg-21 .tL-item--10 .tL-p  { top: 21px; }

/* hairline dividers ------------------------------------------------------------ */
.pg-21 .tL-div { position: absolute; height: 1.4px; background: var(--hair21); z-index: 3; }
.pg-21 .tL-div--l1 { left: 120px; top: 392px; width: 299px; }
.pg-21 .tL-div--l2 { left: 120px; top: 489px; width: 299px; }
.pg-21 .tL-div--l3 { left: 120px; top: 591px; width: 299px; }
.pg-21 .tL-div--l4 { left: 120px; top: 690px; width: 299px; }
.pg-21 .tL-div--r1 { left: 1017px; top: 416px; width: 368px; }
.pg-21 .tL-div--r2 { left: 1017px; top: 512px; width: 368px; }
.pg-21 .tL-div--r3 { left: 1017px; top: 607px; width: 368px; }
.pg-21 .tL-div--r4 { left: 1017px; top: 702px; width: 368px; }

/* --- the wheel ---------------------------------------------------------------- */
.pg-21 .tL-wheel {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 3;
    overflow: visible;
}
.pg-21 .wh-halo { fill: url(#p21halo); }
.pg-21 .wh-dash {
    fill: none; stroke: #9C9C9C; stroke-width: 1.3;
    stroke-dasharray: 8 8;
}
.pg-21 .wh-arr  { fill: #12294A; }
.pg-21 .wh-seg  { stroke: #FFFFFF; stroke-width: 1; }
.pg-21 .wh-hub  { fill: #FFFFFF; stroke: #E2E2E2; stroke-width: 2.4; }
.pg-21 .wh-icon { fill: #FFFFFF; }
.pg-21 .wh-lab {
    fill: #FFFFFF;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 15.6px;
    font-weight: 500;
    text-anchor: middle;
}
.pg-21 .wh-psm {
    fill: #143160;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-size: 68px; font-weight: 800; letter-spacing: -.01em;
    text-anchor: middle;
}
.pg-21 .wh-fw {
    fill: #143160;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-size: 25px; font-weight: 700; letter-spacing: .04em;
    text-anchor: middle;
}
.pg-21 .wh-cap {
    fill: #5F6369;
    font-family: "Inter", Arial, sans-serif;
    font-size: 15px; font-weight: 500;
    text-anchor: middle;
}
.pg-21 .wh-fac { fill: #1B3A63; stroke: #1B3A63; }

/* ==========================================================================
   PAGE 22 · PROCESS SAFETY & RISK MANAGEMENT                  Template L
   All coordinates measured off the 1440 x 810 source page.

   The night refinery photograph is the only full-bleed raster (with the
   baked title, rule and subtitle erased from it, because those are re-set
   as live HTML). The six cards are CSS rounded rectangles, the cycle is
   inline SVG and only the hub portrait is a second raster.
   ========================================================================== */

.pg-22 .tL {
    background: #061428;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}
.pg-22 .ln { display: block; white-space: nowrap; }
.pg-22 i.fit { font-style: normal; }

.pg-22 .p22-bg {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    object-fit: fill;
    z-index: 0;
}

/* --- hero title ------------------------------------------------------------
   Line 1 is set larger than line 2 in the artwork: cap heights 65 and 55.
-------------------------------------------------------------------------- */
.pg-22 .p22-title {
    position: absolute;
    left: 0; right: 0; top: 0;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Archivo Narrow", "Inter",
                 "Liberation Sans", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.pg-22 .p22-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(4, 12, 24, .55);
}
.pg-22 .p22-title .l1 {
    left: 361px; top: 19px;
    font-size: 89px; line-height: 89px;
    color: #F8F9FA;
}
.pg-22 .p22-title .l2 {
    left: 357px; top: 105px;
    font-size: 75px; line-height: 75px;
    color: #EFB327;
}

.pg-22 .p22-rule {
    position: absolute;
    left: 352px; top: 189px;
    width: 723px; height: 2.5px;
    z-index: 3;
    background: linear-gradient(90deg,
        rgba(197,168,104,0) 0%, #C5A868 6%, #C5A868 94%, rgba(197,168,104,0) 100%);
}

.pg-22 .p22-sub {
    position: absolute;
    left: 0; right: 0; top: 205px;
    margin: 0;
    z-index: 3;
    text-align: center;
    font-size: 21px;
    line-height: 21px;
    font-weight: 400;
    color: #DFE6EF;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(4, 12, 24, .6);
}
.pg-22 .p22-sub span { display: inline-block; }

/* --- the six cards ---------------------------------------------------------
   Every card runs under the cycle; the source only ever shows the outer
   half of each, so the inner edge is placed where the ring hides it.
-------------------------------------------------------------------------- */
.pg-22 .p22-card {
    position: absolute;
    z-index: 1;
    border-radius: 18px;
}
.pg-22 .p22-card--1,
.pg-22 .p22-card--6,
.pg-22 .p22-card--5 { border-radius: 18px 0 0 18px; }
.pg-22 .p22-card--2,
.pg-22 .p22-card--3,
.pg-22 .p22-card--4 { border-radius: 0 18px 18px 0; }

.pg-22 .p22-card--1 { left: 87px;  top: 259px; width: 525px; height: 178px;
    background: linear-gradient(180deg, #002A56 0%, #002450 100%); }
.pg-22 .p22-card--2 { left: 714px; top: 259px; width: 639px; height: 178px;
    background: linear-gradient(180deg, #B8480A 0%, #944007 100%); }
.pg-22 .p22-card--6 { left: 71px;  top: 458px; width: 399px; height: 186px;
    background: linear-gradient(180deg, #7E5104 0%, #6C4602 100%); }
.pg-22 .p22-card--3 { left: 714px; top: 458px; width: 645px; height: 186px;
    background: linear-gradient(180deg, #3A5C18 0%, #345516 100%); }
.pg-22 .p22-card--5 { left: 71px;  top: 659px; width: 641px; height: 175px;
    background: linear-gradient(180deg, #044F65 0%, #004052 100%); }
.pg-22 .p22-card--4 { left: 714px; top: 659px; width: 651px; height: 175px;
    background: linear-gradient(180deg, #3D2A62 0%, #322453 100%); }

/* numbered ring */
.pg-22 .p22-n {
    position: absolute;
    margin: 0;
    width: 54px; height: 54px;
    border: 1.8px solid rgba(255,255,255,.82);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .01em;
    color: rgba(255,255,255,.94);
}
.pg-22 .p22-h {
    position: absolute;
    margin: 0;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: .012em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #FFFFFF;
}
.pg-22 .p22-p {
    position: absolute;
    margin: 0;
    font-size: 19.5px;
    line-height: 27.5px;
    color: rgba(255,255,255,.90);
}

/* card 01 */
.pg-22 .p22-card--1 .p22-n { left: 32px;  top: 17px; }
.pg-22 .p22-card--1 .p22-h { left: 105px; top: 29px; }
.pg-22 .p22-card--1 .p22-p { left: 105px; top: 71px; }
/* card 02 */
.pg-22 .p22-card--2 .p22-n { left: 285px; top: 17px; }
.pg-22 .p22-card--2 .p22-h { left: 372px; top: 32px; }
.pg-22 .p22-card--2 .p22-p { left: 365px; top: 71px; }
/* card 06 */
.pg-22 .p22-card--6 .p22-n { left: 27px;  top: 18px; }
.pg-22 .p22-card--6 .p22-h { left: 98px; top: 30px; }
.pg-22 .p22-card--6 .p22-p { left: 110px; top: 63px; }
/* card 03 */
.pg-22 .p22-card--3 .p22-n { left: 312px; top: 14px; }
.pg-22 .p22-card--3 .p22-h { left: 384px; top: 30px; }
.pg-22 .p22-card--3 .p22-p { left: 384px; top: 69px; }
/* card 05 */
.pg-22 .p22-card--5 .p22-n { left: 32px;  top: 16px; }
.pg-22 .p22-card--5 .p22-h { left: 106px; top: 31px; }
.pg-22 .p22-card--5 .p22-p { left: 107px; top: 70px; }
/* card 04 */
.pg-22 .p22-card--4 .p22-n { left: 274px; top: 16px; }
.pg-22 .p22-card--4 .p22-h { left: 347px; top: 32px; }
.pg-22 .p22-card--4 .p22-p { left: 347px; top: 70px; }

/* --- the cycle -------------------------------------------------------------
   Centre (713, 524); segment band r 178 - 281; the chevron apex of every
   join sits at r 229.5, six degrees clockwise of the radial boundary.
-------------------------------------------------------------------------- */
.pg-22 .p22-hub {
    position: absolute;
    left: 543px; top: 354px;
    width: 340px; height: 340px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
}
.pg-22 .p22-wheel {
    position: absolute;
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}
.pg-22 .wh-seg {
    stroke: #F1F3F2;
    stroke-width: 6.5;
    stroke-linejoin: round;
}
.pg-22 .wh-hubring {
    fill: none;
    stroke: #F1F3F2;
    stroke-width: 7;
}
.pg-22 .wh-icon {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-linecap: round;
}

/* ==========================================================================
   PAGE 23 · HAZOP | HAZARD & OPERABILITY STUDY                Template M
   All coordinates measured off the 1440 x 810 source page.

   The page is one flat vector illustration, so the artwork stays a single
   raster - but every string in it was erased from that raster and is re-set
   here as live HTML, and the Analysis Team pill, the two hairlines and the
   four bullet dots are rebuilt in CSS.
   ========================================================================== */

.pg-23 .tM {
    background: linear-gradient(180deg, #4E86C4, #2E68AE);
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}
.pg-23 .ln { display: block; white-space: nowrap; }
.pg-23 i.fit { font-style: normal; }

.pg-23 .p23-scene { position: absolute; left: 0; top: 0; margin: 0; }
.pg-23 .p23-scene img {
    width: 1440px; height: 810px;
    object-fit: fill;
}

/* --- title lockup ----------------------------------------------------------
   HAZ is white and OP amber; both sit on one baseline, cap height 80.
-------------------------------------------------------------------------- */
.pg-23 .p23-title {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.pg-23 .p23-title span {
    position: absolute;
    left: 486px; top: 22px;
    display: block;
    white-space: nowrap;
    font-size: 117px; line-height: 117px;
    color: #F3F6F8;
    text-shadow: 0 3px 12px rgba(10, 40, 80, .30);
}
.pg-23 .p23-op { font-style: normal; color: #FAD351; }

.pg-23 .p23-sub {
    position: absolute;
    left: 492px; top: 147px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 32px; line-height: 32px;
    color: #E4F1F9;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(10, 40, 80, .32);
}

/* --- Guide Words card ------------------------------------------------------
   The card body belongs to the illustration; the rules, the heading, the
   dots and the four items are rebuilt.
-------------------------------------------------------------------------- */
.pg-23 .p23-hr {
    position: absolute;
    height: 2.4px;
    z-index: 3;
    background: #6FA0CD;
}
.pg-23 .p23-hr--t { left: 43px; top: 293px; width: 196px; }
.pg-23 .p23-hr--b { left: 41px; top: 332px; width: 204px; }

.pg-23 .p23-gw {
    position: absolute;
    left: 65px; top: 301px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 25px; line-height: 25px;
    color: #EFD264;
    white-space: nowrap;
}

.pg-23 .p23-list { position: absolute; left: 0; top: 0; z-index: 3; }
.pg-23 .p23-li {
    position: absolute;
    left: 72px;
    margin: 0;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 25px; line-height: 25px;
    color: #F0F6FA;
    white-space: nowrap;
}
.pg-23 .p23-li::before {
    content: "";
    position: absolute;
    left: -23px; top: 5px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #F7CE4C;
}
.pg-23 .p23-li--1 { top: 356px; }
.pg-23 .p23-li--2 { top: 396px; }
.pg-23 .p23-li--3 { top: 437px; }
.pg-23 .p23-li--4 { top: 476px; }

/* --- Analysis Team pill ----------------------------------------------------- */
.pg-23 .p23-pill {
    position: absolute;
    left: 480px; top: 234px;
    width: 297px; height: 52px;
    margin: 0;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    padding-left: 15px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2F5F9C 0%, #1C3F76 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(10, 34, 66, .28);
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 30px; line-height: 30px;
    color: #E4F2F9;
    white-space: nowrap;
}
.pg-23 .p23-pill span { display: block; padding-bottom: 4px; }

/* --- the three questions ----------------------------------------------------- */
.pg-23 .p23-q {
    position: absolute;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 30px; line-height: 34px;
    color: #1E4079;
    white-space: nowrap;
}
.pg-23 .p23-q span { display: block; }
.pg-23 .p23-q--1 { left: 933px; top: 234px; }
.pg-23 .p23-q--2 { left: 934px; top: 399px; }
.pg-23 .p23-q--3 { left: 933px; top: 605px; line-height: 33px; }
.pg-23 .p23-q--2 .ln + .ln { margin-left: 1px; }
.pg-23 .p23-q--3 .ln + .ln { margin-left: 6px; }

/* ==========================================================================
   PAGE 24 · QUANTITATIVE RISK ASSESSMENT(QRA)                  Template N
   All coordinates measured off the 1440 x 810 source page.

   Rebuilt live: the navy header wedge, the empty pale-blue frame, all five
   pill headings and their trailing rules, the numbered step row and its
   tapered arrows, the F-N curve (inline SVG with live <text>), the six-row
   LPG results table (a real <table class="dtable">) and the KEY TAKEAWAY
   callout. Raster only for the header photograph, the LPG spheres and the
   small flat step / benefit / vendor-logo illustrations.
   ========================================================================== */

.pg-24 .tN {
    background: #FDFDFD;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}
.pg-24 .ln { display: block; white-space: nowrap; }
.pg-24 i.fit { font-style: normal; }

/* --- header band ------------------------------------------------------------ */
.pg-24 .tN-header { height: 102px; overflow: hidden; background: #002665; }
.pg-24 .p24-hero {
    position: absolute;
    left: 460px; top: 0;
    width: 980px; height: 102px;
    object-fit: fill;
}
.pg-24 .p24-navy {
    position: absolute;
    left: 0; top: 0; width: 540px; height: 102px;
    background: #002665;
    clip-path: polygon(0 0, 528px 0, 478px 100%, 0 100%);
}
.pg-24 .p24-wedge {
    position: absolute;
    left: 0; top: 0; width: 600px; height: 102px;
    background: rgba(226, 236, 248, .55);
    clip-path: polygon(526px 0, 542px 0, 492px 100%, 476px 100%);
}
.pg-24 .tN-placeholder {
    left: 966px; top: -12px;
    width: 466px; height: 93px;
    background: #D0E6FB;
    border: 1px solid #BACFE6;
    border-radius: 10px;
    z-index: 3;
}

.pg-24 .p24-title {
    position: absolute;
    left: 58px; top: -6px;
    margin: 0;
    z-index: 4;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 39px;
    line-height: 53px;
    color: #F0DE3E;
}

/* --- shared card / pill / rule furniture ------------------------------------- */
.pg-24 .tN-block {
    border: 1.4px solid #E7EAEE;
    border-radius: 16px;
    background: #FFFFFF;
    padding: 0;
}
.pg-24 .p24-b-proc  { left: 15px;  top: 118px; width: 831px; height: 281px; }
.pg-24 .p24-b-fn    { left: 16px;  top: 421px; width: 516px; height: 400px; }
.pg-24 .p24-b-ben   { left: 531px; top: 438px; width: 323px; height: 344px; }
.pg-24 .p24-b-app   { left: 878px; top: 121px; width: 544px; height: 368px; }
.pg-24 .p24-b-tools { left: 881px; top: 508px; width: 559px; height: 152px; }

.pg-24 .p24-rule { position: absolute; height: 1.4px; background: #E7EAEE; z-index: 2; }
.pg-24 .p24-rule--proc  { left: 229px;  top: 135px; width: 605px; }
.pg-24 .p24-rule--fn    { left: 376px;  top: 440px; width: 145px; }
.pg-24 .p24-rule--app   { left: 1298px; top: 137px; width: 115px; }
.pg-24 .p24-rule--tools { left: 1150px; top: 528px; width: 280px; }

.pg-24 .p24-pill {
    position: absolute;
    margin: 0;
    height: 34px;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    border-radius: 17px;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px; line-height: 17px;
    letter-spacing: .015em;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-24 .p24-pill span { display: block; padding-bottom: 2px; }
.pg-24 .p24-pill--proc  { left: 18px;  top: 117px; width: 211px; background: #218A5E; }
.pg-24 .p24-pill--fn    { left: 17px;  top: 423px; width: 359px; background: #0C2B6B; }
.pg-24 .p24-pill--ben   { left: 559px; top: 438px; width: 229px; background: #582F91; }
.pg-24 .p24-pill--tools { left: 903px; top: 511px; width: 247px; background: #E87716; }
.pg-24 .p24-pill--app   { left: 966px; top: 120px; width: 332px; background: #16407F; }

/* --- the five process steps --------------------------------------------------- */
.pg-24 .p24-steps { position: absolute; left: 0; top: 0; z-index: 2; }
.pg-24 .p24-step { position: absolute; }
.pg-24 .p24-n {
    position: absolute;
    width: 31px; height: 31px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 16px; line-height: 16px;
    color: #FFFFFF;
}
.pg-24 .p24-icon { position: absolute; max-width: none; }
.pg-24 .p24-lab {
    position: absolute;
    left: -170px; top: 293px;
    width: 340px;
    margin: 0;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 16.5px; line-height: 20px;
    text-align: center;
}
.pg-24 .p24-lab .ln,
.pg-24 .p24-desc .ln { display: block; }
.pg-24 .p24-lab .fit,
.pg-24 .p24-desc .fit { display: inline-block; }
.pg-24 .p24-desc {
    position: absolute;
    left: -170px; top: 339px;
    width: 340px;
    margin: 0;
    font-size: 15px; line-height: 18px;
    color: #3A3A3A;
    text-align: center;
}
.pg-24 .p24-step--1 { left: 112px; }
.pg-24 .p24-step--2 { left: 265px; }
.pg-24 .p24-step--3 { left: 410px; }
.pg-24 .p24-step--4 { left: 571px; }
.pg-24 .p24-step--5 { left: 748px; }

.pg-24 .p24-step--1 .p24-n { left: -66px; top: 173px; background: #104783; }
.pg-24 .p24-step--2 .p24-n { left: -65px; top: 173px; background: #1E9059; }
.pg-24 .p24-step--3 .p24-n { left: -60px; top: 173px; background: #E07918; }
.pg-24 .p24-step--4 .p24-n { left: -68px; top: 173px; background: #654492; }
.pg-24 .p24-step--5 .p24-n { left: -90px; top: 173px; background: #C25546; }

.pg-24 .p24-step--1 .p24-icon { left: -34px; top: 203px; width: 66px; height: 83px; }
.pg-24 .p24-step--2 .p24-icon { left: -37px; top: 203px; width: 76px; height: 83px; }
.pg-24 .p24-step--3 .p24-icon { left: -26px; top: 203px; width: 56px; height: 83px; }
.pg-24 .p24-step--4 .p24-icon { left: -37px; top: 209px; width: 76px; height: 75px; }
.pg-24 .p24-step--5 .p24-icon { left: -46px; top: 203px; width: 69px; height: 83px; }

.pg-24 .p24-step--1 .p24-lab { color: #104783; }
.pg-24 .p24-step--2 .p24-lab { color: #1E9059; }
.pg-24 .p24-step--3 .p24-lab { color: #E07918; }
.pg-24 .p24-step--4 .p24-lab { color: #654492; }
.pg-24 .p24-step--5 .p24-lab { color: #C25546; }

.pg-24 .p24-hair { stroke: #DCE0E5; stroke-width: 1.4; fill: none; }
.pg-24 .p24-arrows {
    position: absolute; left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 2;
}

/* --- F-N curve ---------------------------------------------------------------- */
.pg-24 .p24-chart {
    position: absolute; left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 2;
}
.pg-24 .fn-grid  { stroke: #EDEFF2; stroke-width: 1; fill: none; }
.pg-24 .fn-axis  { stroke: #1A1A1A; stroke-width: 2.4; fill: none; }
.pg-24 .fn-red   { stroke: #D0342A; stroke-width: 2.6; stroke-dasharray: 11 8; fill: none; }
.pg-24 .fn-green { stroke: #1E8A44; stroke-width: 2.6; stroke-dasharray: 11 8; fill: none; }
.pg-24 .fn-step  { stroke: #17376E; stroke-width: 3; fill: none; }
.pg-24 .fn-dot   { fill: #17376E; }
.pg-24 .fn-tick {
    font-family: "Inter", Arial, sans-serif;
    font-size: 15px; font-weight: 600; fill: #1A1A1A;
}
.pg-24 .fn-tick--y { text-anchor: end; }
.pg-24 .fn-tick--x { text-anchor: middle; }
.pg-24 .fn-axl {
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px; font-weight: 700; fill: #1A1A1A;
    text-anchor: middle;
}
.pg-24 .fn-note { font-family: "Inter", Arial, sans-serif; font-size: 16px; font-weight: 700; }
.pg-24 .fn-note--r { fill: #D0342A; }
.pg-24 .fn-note--g { fill: #1E8A44; }
.pg-24 .fn-note--b { fill: #1B4A8A; }

/* --- benefits ----------------------------------------------------------------- */
.pg-24 .p24-bens { position: absolute; left: 0; top: 0; z-index: 2; }
.pg-24 .p24-ben { position: absolute; left: 578px; }
.pg-24 .p24-ben img { position: absolute; left: 0; top: 0; max-width: none; }
.pg-24 .p24-ben p {
    position: absolute;
    left: 78px; top: 3px;
    margin: 0;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 16.5px; line-height: 21px;
    color: #16305C;
    white-space: nowrap;
}
.pg-24 .p24-ben--1 { top: 500px; }
.pg-24 .p24-ben--1 img { width: 62px; height: 57px; }
.pg-24 .p24-ben--2 { top: 558px; }
.pg-24 .p24-ben--2 img { width: 62px; height: 57px; }
.pg-24 .p24-ben--2 p { top: 6px; }
.pg-24 .p24-ben--3 { top: 628px; }
.pg-24 .p24-ben--3 img { width: 62px; height: 53px; }
.pg-24 .p24-ben--4 { top: 691px; }
.pg-24 .p24-ben--4 img { width: 62px; height: 57px; }

/* --- QRA application ----------------------------------------------------------- */
.pg-24 .p24-scen-l,
.pg-24 .p24-scen {
    position: absolute;
    left: 909px;
    margin: 0;
    z-index: 2;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px; line-height: 20px;
    color: #14243F;
    white-space: nowrap;
}
.pg-24 .p24-scen-l { top: 165px; }
.pg-24 .p24-scen   { top: 187px; }

.pg-24 .p24-lpg {
    position: absolute;
    left: 900px; top: 214px;
    width: 232px; height: 250px;
    margin: 0;
    z-index: 2;
    overflow: hidden;
}
.pg-24 .p24-lpg img { width: 232px; height: 250px; object-fit: fill; }

.pg-24 .p24-table {
    position: absolute;
    left: 1138px; top: 216px;
    width: 300px;
    z-index: 2;
    border-radius: 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12.5px;
    table-layout: fixed;
}
.pg-24 .p24-table th,
.pg-24 .p24-table td { border: 1px solid #D9E2EC; padding: 3px 7px; line-height: 1.22; white-space: nowrap; }
.pg-24 .p24-table thead th {
    text-align: center;
    background: #0A3A82;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    height: 30px;
    padding: 0 10px;
}
.pg-24 .p24-table thead th:first-child { width: 149px; text-align: left; }
.pg-24 .p24-table tbody th {
    background: transparent;
    color: #14243F;
    font-weight: 700;
    text-align: left;
}
.pg-24 .p24-table tbody td { color: #14243F; font-weight: 500; text-align: center; }
.pg-24 .p24-table tbody tr { height: 42px; }
.pg-24 .p24-table tbody tr:nth-child(1) { height: 30px; }
.pg-24 .p24-table tbody tr:nth-child(5) { height: 28px; }
.pg-24 .p24-table tbody tr:nth-child(6) { height: 36px; }
.pg-24 .p24-table tbody tr:nth-child(even) th,
.pg-24 .p24-table tbody tr:nth-child(even) td { background: #E9F0F9; }
.pg-24 .p24-table tbody tr:nth-child(odd) th,
.pg-24 .p24-table tbody tr:nth-child(odd) td { background: #FFFFFF; }
.pg-24 .p24-table tbody tr.p24-concl th,
.pg-24 .p24-table tbody tr.p24-concl td { background: #E3F2E7; }
.pg-24 .p24-table .p24-sub { font-weight: 600; font-size: 12px; }
.pg-24 .p24-table sup { font-size: .72em; }

/* --- tools -------------------------------------------------------------------- */
.pg-24 .p24-tools { position: absolute; left: 0; top: 0; z-index: 2; }
.pg-24 .p24-tool {
    position: absolute;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 25px; line-height: 25px;
    white-space: nowrap;
}
.pg-24 .p24-tool--dnv   { left: 918px; top: 578px; }
.pg-24 .p24-tool--dnv img { width: 100px; height: 51px; max-width: none; }
.pg-24 .p24-tool--phast { left: 1041px; top: 585px; color: #2E7CC4; }
.pg-24 .p24-tool--rspec { left: 1143px; top: 580px; color: #262626; font-weight: 500; }
.pg-24 .p24-tool--rspec img { position: absolute; left: 0; top: 0; width: 34px; height: 35px; max-width: none; }
.pg-24 .p24-tool--rspec span { display: inline-block; margin-left: 41px; padding-top: 5px; }
.pg-24 .p24-tool--oscaar { left: 1301px; top: 585px; color: #C81E14; }

/* --- KEY TAKEAWAY ------------------------------------------------------------- */
.pg-24 .p24-kt {
    position: absolute;
    left: 890px; top: 651px;
    width: 550px; height: 165px;
    z-index: 4;
    background: #0B2A6B;
    border-radius: 16px 0 0 0;
    clip-path: polygon(36px 0, 100% 0, 100% 100%, 8px 100%);
}
.pg-24 .p24-bulb { position: absolute; left: 68px; top: 15px; width: 92px; height: 76px; }
.pg-24 .p24-kt-h {
    position: absolute;
    left: 150px; top: 15px;
    margin: 0;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px; line-height: 20px;
    letter-spacing: .01em;
    color: #F2E03A;
    white-space: nowrap;
}
.pg-24 .p24-kt-p {
    position: absolute;
    left: 148px; top: 47px;
    margin: 0;
    font-size: 16px; line-height: 23px;
    color: #FFFFFF;
}

/* ==========================================================================
   PAGE 25 · FERA | FIRE AND EXPLOSION RISK ANALYSIS            Template O
   All coordinates measured off the 1440 x 810 source page.

   Two rasters only - the photographic hero composite and the lower
   illustration field - both with every baked string erased. The title
   lockup, its rules, the keyword line, the three numbered pills, the
   bullet copy and the tools card wordmarks are all live HTML.
   ========================================================================== */

.pg-25 .tO {
    background: #EFF4FA;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}
.pg-25 .ln { display: block; white-space: nowrap; }
.pg-25 i.fit { font-style: normal; }

.pg-25 .tO-hero { height: 360px; }
.pg-25 .p25-hero { width: 1440px; height: 360px; object-fit: fill; }
.pg-25 .p25-panels {
    position: absolute;
    left: 0; top: 356px;
    width: 1440px; height: 454px;
    object-fit: fill;
}

/* --- title lockup ------------------------------------------------------------- */
.pg-25 .p25-fera {
    position: absolute;
    left: 133px; top: 18px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 800;
    font-size: 106px; line-height: 106px;
    letter-spacing: -.005em;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 3px 14px rgba(6, 18, 40, .45);
}
.pg-25 .p25-fera em { font-style: normal; color: #F0B429; }

.pg-25 .p25-vrule {
    position: absolute;
    left: 461px; top: 30px;
    width: 2.4px; height: 93px;
    z-index: 3;
    background: rgba(255,255,255,.86);
}
.pg-25 .p25-h2 {
    position: absolute;
    left: 491px; top: 37px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 31.5px; line-height: 31.5px;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(6, 18, 40, .45);
}
.pg-25 .p25-hrule {
    position: absolute;
    left: 494px; top: 80px;
    width: 536px; height: 1.6px;
    z-index: 3;
    background: rgba(255,255,255,.62);
}
.pg-25 .p25-lede {
    position: absolute;
    left: 491px; top: 92px;
    margin: 0;
    z-index: 3;
    font-size: 27px; line-height: 27px;
    font-weight: 400;
    color: #DCE6F2;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(6, 18, 40, .45);
}

.pg-25 .p25-predict {
    position: absolute;
    left: 759px; top: 211px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 28px; line-height: 28px;
    color: #17356B;
    white-space: nowrap;
}
.pg-25 .p25-key {
    position: absolute;
    left: 402px; top: 268px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 33px; line-height: 33px;
    color: #17356B;
    white-space: nowrap;
}

/* --- the three numbered column headers ----------------------------------------- */
.pg-25 .p25-pill {
    position: absolute;
    margin: 0;
    height: 42px;
    z-index: 3;
    border-radius: 21px;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 19px; line-height: 19px;
    letter-spacing: .015em;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-25 .p25-num {
    position: absolute;
    top: 3px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 21px;
}
.pg-25 .p25-pt { position: absolute; display: block; }

.pg-25 .p25-pill--1 {
    left: -30px; top: 370px; width: 395px;
    background: linear-gradient(90deg, #0B5245 0%, #1E7A62 100%);
}
.pg-25 .p25-pill--1 .p25-num { left: 34px; }
.pg-25 .p25-pill--1 .p25-pt  { left: 88px; top: 10px; }

.pg-25 .p25-pill--2 {
    left: 427px; top: 369px; width: 360px;
    background: linear-gradient(90deg, #E2681B 0%, #F08A2A 100%);
}
.pg-25 .p25-pill--2 .p25-num { left: 11px; }
.pg-25 .p25-pill--2 .p25-pt  { left: 79px; top: 12px; }

.pg-25 .p25-pill--3 {
    left: 872px; top: 369px; width: 448px;
    background: linear-gradient(90deg, #A32A1C 0%, #CE3A24 100%);
}
.pg-25 .p25-pill--3 .p25-num { left: 12px; }
.pg-25 .p25-pill--3 .p25-pt  { left: 52px; top: 11px; }

/* --- column copy ---------------------------------------------------------------- */
.pg-25 .p25-intro,
.pg-25 .p25-c1 .p25-i,
.pg-25 .p25-c2 .p25-j,
.pg-25 .p25-c3 .p25-k {
    position: absolute;
    margin: 0;
    z-index: 3;
    font-size: 25px;
    line-height: 29.5px;
    color: #2E3844;
}
.pg-25 .p25-intro { left: 152px; top: 438px; }

.pg-25 .p25-c1, .pg-25 .p25-c2, .pg-25 .p25-c3 { position: absolute; left: 0; top: 0; }
.pg-25 .p25-i { left: 88px; line-height: 33px; }
.pg-25 .p25-i--1 { top: 571px; }
.pg-25 .p25-i--2 { top: 664px; }
.pg-25 .p25-i--3 { top: 744px; }

.pg-25 .p25-j { left: 505px; }
.pg-25 .p25-j b { font-weight: 700; color: #17356B; }
.pg-25 .p25-j--1 { top: 571px; }
.pg-25 .p25-j--2 { top: 631px; }
.pg-25 .p25-j--3 { top: 692px; line-height: 31px; }

.pg-25 .p25-k { left: 1043px; line-height: 29px; }
.pg-25 .p25-k::before {
    content: "";
    position: absolute;
    left: -18px; top: 12px;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.pg-25 .p25-k--1 { top: 433px; }
.pg-25 .p25-k--1::before { background: #B3221C; }
.pg-25 .p25-k--2 { top: 514px; }
.pg-25 .p25-k--2::before { background: #7E9B3A; }
.pg-25 .p25-k--3 { top: 619px; }
.pg-25 .p25-k--nodot::before { content: none; }

/* --- KEY FERA TOOLS card -------------------------------------------------------- */
.pg-25 .p25-tools-h {
    position: absolute;
    left: 1219px; top: 448px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    font-size: 20.5px; line-height: 20.5px;
    letter-spacing: .01em;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-25 .p25-tools { position: absolute; left: 0; top: 0; z-index: 3; }
.pg-25 .p25-tool {
    position: absolute;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 700;
    white-space: nowrap;
}
.pg-25 .p25-tool--phast  { left: 1325px; top: 501px; font-size: 30px; line-height: 30px; color: #1E4C8F; }
.pg-25 .p25-tool--flacs  { left: 1313px; top: 572px; font-size: 26px; line-height: 26px; color: #17181A; }
.pg-25 .p25-tool--cfd    { left: 1390px; top: 576px; font-size: 19px; line-height: 19px; font-weight: 600; color: #6E7278; }
.pg-25 .p25-tool--fds    { left: 1245px; top: 635px; font-size: 30px; line-height: 30px; color: #17181A; }
.pg-25 .p25-tool--safeti { left: 1319px; top: 641px; font-size: 27px; line-height: 27px; color: #1E4C8F; }

/* ==========================================================================
   PAGE 26 · FMEA — FAILURE MODE AND EFFECTS ANALYSIS           Template L
   All coordinates measured off the 1440 x 810 source page.

   Only the top-right photographic band is a raster asset (with the wheel
   petals that overlap it erased from the file). The wheel, the shield hub,
   the translucent panel, every badge and every string are rebuilt live.
   ========================================================================== */

.pg-26 .tL {
    --navy-base:  #011121;
    --navy-panel: #092238;
    --gold:       #F4B313;
    --gold-rule:  #C9A227;
    background:
        radial-gradient(900px 460px at 1180px 60px, #12304A 0%, rgba(18,48,74,0) 74%),
        var(--navy-base);
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-26 .tL > * { position: absolute; }
.pg-26 i.fit { font-style: normal; }

/* --- photographic band ------------------------------------------------------ */
.pg-26 .p26-photo {
    left: 700px; top: 0;
    width: 740px; height: 392px;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 90px);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 90px);
}

/* --- title block ------------------------------------------------------------ */
.pg-26 .p26-h1,
.pg-26 .p26-h2 {
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Archivo",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-26 .p26-h1 {
    left: 41px; top: -35px;
    font-size: 153px; line-height: 153px;
    color: var(--gold);
}
.pg-26 .p26-h2 {
    left: 45px; top: 119px;
    font-size: 38.5px; line-height: 38.5px;
    color: #FFFFFF;
}
.pg-26 .p26-rule {
    left: 45px; top: 178px;
    width: 655px; height: 2.4px;
    background: linear-gradient(90deg, var(--gold-rule) 0%, var(--gold-rule) 46%, rgba(201,162,39,0) 100%);
}

.pg-26 .p26-lede {
    left: 46px; top: 198px;
    font-size: 25px;
    color: #E7EAEE;
    white-space: nowrap;
}
.pg-26 .p26-lede .ln { display: block; height: 34px; }
.pg-26 .p26-lede b { font-weight: 700; color: var(--gold); }

/* --- translucent panel behind the two side columns -------------------------- */
.pg-26 .p26-panel {
    left: 28px; top: 368px;
    width: 1380px; height: 442px;
    border-radius: 20px 20px 0 0;
    background: var(--navy-panel);
}

/* --- column headings -------------------------------------------------------- */
.pg-26 .p26-ph {
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 26px; line-height: 26px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}
.pg-26 .p26-ph--l { left: 59px;   top: 393px; }
.pg-26 .p26-ph--r { left: 1070px; top: 393px; }
.pg-26 .p26-prule { top: 427px; height: 2.4px; background: var(--gold-rule); }
.pg-26 .p26-prule--l { left: 59px;   width: 149px; }
.pg-26 .p26-prule--r { left: 1069px; width: 176px; }

/* --- the six benefit rows --------------------------------------------------- */
.pg-26 .p26-rows { position: absolute; }
.pg-26 .p26-row  { position: absolute; }
.pg-26 .p26-row .badge {
    position: absolute;
    --bs: 64px;
    box-shadow: none;
}
.pg-26 .p26-row .badge svg { width: 56%; height: 56%; }
.pg-26 .p26-row h4 {
    position: absolute;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px; line-height: 24px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-26 .p26-row p {
    position: absolute;
    font-size: 17px;
    color: #C6D0DA;
    white-space: nowrap;
}
.pg-26 .p26-row h4 .ln,
.pg-26 .p26-row p  .ln { display: block; }
.pg-26 .p26-row h4 .ln { height: 23px; }

.pg-26 .p26-rows--l .badge { left: 47px; }
.pg-26 .p26-rows--l h4,
.pg-26 .p26-rows--l p { left: 127px; }
.pg-26 .p26-rows--r .badge { left: 1063px; }
.pg-26 .p26-rows--r h4,
.pg-26 .p26-rows--r p { left: 1145px; }

.pg-26 .p26-row--l1 .badge { top: 452px; --bf: #0E4D8C; }
.pg-26 .p26-row--l1 h4 { top: 456px; }
.pg-26 .p26-row--l1 p  { top: 482px; line-height: 25px; }
.pg-26 .p26-row--l2 .badge { top: 569px; --bf: #0F7C8B; }
.pg-26 .p26-row--l2 h4 { top: 575px; }
.pg-26 .p26-row--l2 p  { top: 602px; line-height: 24px; }
.pg-26 .p26-row--l3 .badge { top: 683px; --bf: #4B3C7E; }
.pg-26 .p26-row--l3 h4 { top: 688px; }
.pg-26 .p26-row--l3 p  { top: 738px; line-height: 24px; }

.pg-26 .p26-row--r1 .badge { top: 452px; --bf: #0E538F; }
.pg-26 .p26-row--r1 h4 { top: 454px; }
.pg-26 .p26-row--r1 p  { top: 504px; line-height: 23px; }
.pg-26 .p26-row--r2 .badge { top: 577px; --bf: #4A7C2A; }
.pg-26 .p26-row--r2 h4 { top: 583px; }
.pg-26 .p26-row--r2 p  { top: 609px; line-height: 26px; }
.pg-26 .p26-row--r3 .badge { top: 688px; --bf: #B25C09; }
.pg-26 .p26-row--r3 h4 { top: 695px; }
.pg-26 .p26-row--r3 p  { top: 723px; line-height: 24px; }

/* --- the five-petal cycle wheel --------------------------------------------- */
.pg-26 .p26-wheel {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}
.pg-26 .p26-wheel .pt {
    stroke: #E9EDF4;
    stroke-width: 7;
    stroke-linejoin: round;
}
.pg-26 .p26-wheel .wi { fill: #fff; }
.pg-26 .p26-wheel .wh {
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 19.5px;
    letter-spacing: .01em;
    fill: #FFFFFF;
}
.pg-26 .p26-wheel .wb {
    font-family: "Inter", "Source Sans 3", system-ui, sans-serif;
    font-size: 16.4px;
    fill: #E4EBF3;
}

/* --- hub shield + tagline ---------------------------------------------------- */
.pg-26 .p26-shield {
    left: 682px; top: 427px;
    width: 69px; height: 84px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.pg-26 .p26-tag {
    left: 517px; top: 532px;
    width: 400px;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 19.5px;
    letter-spacing: .01em;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-26 .p26-tag .ln { display: block; height: 24px; }
.pg-26 .p26-tag b { font-weight: 800; color: var(--gold); }

/* ==========================================================================
   PAGE 27 · HSEIA — HEALTH SAFETY ENVIRONMENT IMPACT ASSESSMENT   Template L
   All coordinates measured off the 1440 x 810 source page.

   The only raster asset is the sunset refinery photograph on the right, with
   the baked title text and the step-card bodies that overlapped it erased.
   The donut ring, the tethers, the nodes, the card shapes, the badges and
   every string are rebuilt live.
   ========================================================================== */

.pg-27 .tL {
    --navy:   #12283E;
    --c1:     #1B3357;
    --c2:     #3E5A24;
    --c3:     #C0762B;
    --c4:     #52304F;
    --c5:     #22607A;
    --body:   #3B3E44;
    background:
        radial-gradient(560px 520px at 980px 380px, rgba(250,214,150,.42) 0%, rgba(250,214,150,0) 72%),
        linear-gradient(180deg, #F6F2E9 0%, #F3EFE6 52%, #EEE7DF 100%);
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-27 .tL > * { position: absolute; }

/* --- photograph -------------------------------------------------------------- */
.pg-27 .p27-photo {
    left: 700px; top: 0;
    width: 740px; height: 810px;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 90px, #000 195px);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 90px, #000 195px);
}

/* --- title block -------------------------------------------------------------- */
.pg-27 .p27-h1,
.pg-27 .p27-h2 {
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #0A2440;
}
.pg-27 .p27-h1 { left: 34px; top: 23px; font-size: 122px; line-height: 122px; }
.pg-27 .p27-h2 { left: 438px; top: 21px; font-size: 51px; }
.pg-27 .p27-h2 .ln { display: block; height: 49px; }

.pg-27 .p27-amber {
    left: 664px; top: 132px;
    width: 180px; height: 2.6px;
    background: linear-gradient(90deg, rgba(214,163,64,0) 0%, #D6A340 22%, #D6A340 78%, rgba(214,163,64,0) 100%);
}
.pg-27 .p27-sub {
    left: 223px; top: 136px;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    color: #3A3D45;
    white-space: nowrap;
}

/* --- ring, tethers, nodes and card shapes ------------------------------------- */
.pg-27 .p27-art {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    overflow: visible;
}
.pg-27 .p27-art .rg { fill: none; stroke-width: 25; stroke-linecap: butt; }
.pg-27 .p27-art .disc {
    fill: #EFECE8;
    stroke: #FBFAF8;
    stroke-width: 7;
}
.pg-27 .p27-art .tie { fill: none; stroke: #55575C; stroke-width: 3; }
.pg-27 .p27-art .nd  { stroke: #FBFAF8; stroke-width: 4; }
.pg-27 .p27-art .cd {
    fill: rgba(255,253,249,.90);
    stroke: #D9D5CE;
    stroke-width: 1.6;
}

/* --- coloured rule across the head of each card -------------------------------- */
.pg-27 .p27-top { height: 2.4px; }
.pg-27 .p27-top--1 { left: 384px; top: 189px; width: 410px; background: #142035; }
.pg-27 .p27-top--2 { left: 510px; top: 296px; width: 351px; background: #46602C; }
.pg-27 .p27-top--3 { left: 524px; top: 437px; width: 336px; background: #98592C; }
.pg-27 .p27-top--4 { left: 509px; top: 578px; width: 337px; background: #58324F; }
.pg-27 .p27-top--5 { left: 386px; top: 692px; width: 442px; background: #435966; }

/* --- ring centre ---------------------------------------------------------------- */
.pg-27 .p27-core {
    left: 50px; top: 400px;
    width: 400px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 80px; line-height: 80px;
    letter-spacing: -.005em;
    color: #0A2440;
    white-space: nowrap;
}
.pg-27 .p27-core-p {
    left: 50px; top: 480px;
    width: 400px;
    text-align: center;
    font-size: 18px;
    color: #3B3E48;
    white-space: nowrap;
}
.pg-27 .p27-core-p .ln { display: block; height: 25px; }

/* --- step cards ------------------------------------------------------------------ */
.pg-27 .p27-card { position: absolute; }
.pg-27 .p27-card h3 {
    position: absolute;
    margin: 0;
    left: 0; top: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 21px; line-height: 21px;
    letter-spacing: .005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-27 .p27-card ul { position: absolute; }
.pg-27 .p27-card li {
    position: absolute;
    left: 0;
    font-size: 18px;
    line-height: 24px;
    color: var(--body);
    white-space: nowrap;
}
.pg-27 .p27-card li::before {
    content: "";
    position: absolute;
    left: -18px; top: 8px;
    width: 5.5px; height: 5.5px;
    border-radius: 50%;
}
.pg-27 .p27-card li .ln { display: block; height: 18.5px; }

.pg-27 .p27-card--1 { left: 427px; top: 204px; }
.pg-27 .p27-card--1 h3 { color: var(--c1); }
.pg-27 .p27-card--1 ul { left: 20px; }
.pg-27 .p27-card--1 li::before { background: var(--c1); }
.pg-27 .p27-card--1 .b1 { top: 23px; }
.pg-27 .p27-card--1 .b2 { top: 46px; }

.pg-27 .p27-card--2 { left: 555px; top: 309px; }
.pg-27 .p27-card--2 h3 { color: var(--c2); }
.pg-27 .p27-card--2 ul { left: 18px; }
.pg-27 .p27-card--2 li::before { background: var(--c2); }
.pg-27 .p27-card--2 .b1 { top: 24px; }
.pg-27 .p27-card--2 .b2 { top: 64px; }

.pg-27 .p27-card--3 { left: 576px; top: 452px; }
.pg-27 .p27-card--3 h3 { color: var(--c3); }
.pg-27 .p27-card--3 ul { left: 17px; }
.pg-27 .p27-card--3 li::before { background: var(--c3); }
.pg-27 .p27-card--3 .b1 { top: 25px; }
.pg-27 .p27-card--3 .b2 { top: 67px; }

.pg-27 .p27-card--4 { left: 543px; top: 593px; }
.pg-27 .p27-card--4 h3 { color: var(--c4); }
.pg-27 .p27-card--4 ul { left: 21px; }
.pg-27 .p27-card--4 li::before { background: var(--c4); }
.pg-27 .p27-card--4 .b1 { top: 23px; }
.pg-27 .p27-card--4 .b2 { top: 47px; }

.pg-27 .p27-card--5 { left: 429px; top: 708px; }
.pg-27 .p27-card--5 h3 { color: var(--c5); }
.pg-27 .p27-card--5 ul { left: 19px; }
.pg-27 .p27-card--5 li::before { background: var(--c5); }
.pg-27 .p27-card--5 .b1 { top: 24px; }
.pg-27 .p27-card--5 .b2 { top: 48px; }
.pg-27 .p27-card--5 .b3 { top: 72px; }

/* --- step badges ------------------------------------------------------------------ */
.pg-27 .p27-badge {
    position: absolute;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px #FBFAF8, 0 8px 18px -8px rgba(30, 26, 20, .5);
}
.pg-27 .p27-badge svg { width: 58%; height: 58%; }
.pg-27 .p27-badge--1 { left: 294px; top: 187px; width: 95px; height: 95px; background: #1C3557; }
.pg-27 .p27-badge--2 { left: 428px; top: 299px; width: 93px; height: 93px; background: #3D6129; }
.pg-27 .p27-badge--3 { left: 449px; top: 444px; width: 94px; height: 94px; background: #DC7B15; }
.pg-27 .p27-badge--4 { left: 423px; top: 580px; width: 92px; height: 92px; background: #5A2F58; }
.pg-27 .p27-badge--5 { left: 301px; top: 695px; width: 95px; height: 95px; background: #1B6785; }

/* ==========================================================================
   PAGE 28 · CONSULTING & ASSESSMENT                            Template C
   All coordinates measured off the 1440 x 810 source page.

   One raster asset: the right-hand photography (hazy plant above the diagonal
   cut, clipboard on the desk below it), with the step-5 badge and caption that
   overlapped it erased and its left edge faded into the rebuilt light band.
   The navy panel, the step row, the chevrons, the dividers and every string
   are rebuilt live.
   ========================================================================== */

.pg-28 .tC {
    --c1: #062F5C;
    --c2: #3C5C26;
    --c3: #DF9C0E;
    --c4: #097886;
    --c5: #3B2871;
    --gold: #C9A227;
    background:
        radial-gradient(300px 260px at -70px 690px, rgba(198,204,212,.60) 0%, rgba(198,204,212,0) 100%),
        linear-gradient(180deg, #E9EAEC 0%, #F2F3F5 32%, #F4F4F4 70%, #E6E7E9 100%);
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-28 .tC > * { position: absolute; }

/* --- navy title panel --------------------------------------------------------
   The panel darkens to the left and top and washes out into the light band at
   roughly y 380-500; the plant photograph carries the diagonal cut itself.
-------------------------------------------------------------------------- */
.pg-28 .p28-panel {
    left: 0; top: 0;
    width: 1090px; height: 560px;
    background:
        linear-gradient(90deg, rgba(60,110,150,0) 60%, rgba(60,110,150,.34) 100%),
        radial-gradient(500px 300px at 1010px 395px, rgba(206,220,232,1) 0%, rgba(206,220,232,0) 100%),
        linear-gradient(180deg,
            #00142D 0%, #00142D 33%, #01213A 53.6%, #0C2C45 60.7%, #24425A 66%,
            #3F586E 70.5%, #597082 74%, #7D8F9D 78.6%, #BBC2CC 89%,
            #E2E4E6 96%, rgba(226,228,230,0) 100%);
}

/* --- photography --------------------------------------------------------------- */
.pg-28 .p28-photo {
    left: 930px; top: 0;
    width: 510px; height: 810px;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 78px);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 78px);
}

/* --- title ---------------------------------------------------------------------- */
.pg-28 .p28-h1 {
    left: 24px; top: 42px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-28 .p28-h1 .ln { display: block; height: 110px; font-size: 125px; line-height: 125px; }
.pg-28 .p28-h1 .l2 { margin-left: -4px; }
.pg-28 .p28-h1 .l1 { color: #FFFFFF; }
.pg-28 .p28-h1 .l2 { color: #F0B21F; }

.pg-28 .p28-tag {
    left: 29px; top: 279px;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 37px; line-height: 37px;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-28 .p28-tag b { color: #F0B21F; font-weight: 700; }

.pg-28 .p28-rule {
    left: 28px; top: 332px;
    width: 774px; height: 3.4px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 62%, rgba(201,162,39,.25) 100%);
}

/* --- chevrons between the badges -------------------------------------------------- */
.pg-28 .p28-chev {
    left: 0; top: 0;
    width: 1440px; height: 810px;
}
.pg-28 .p28-chev path {
    fill: none;
    stroke: #7B848A;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- vertical hairlines between the columns --------------------------------------- */
.pg-28 .p28-div { top: 556px; width: 1.4px; height: 200px; background: #D6D6D6; }
.pg-28 .p28-div--1 { left: 189px; }
.pg-28 .p28-div--2 { left: 394px; }
.pg-28 .p28-div--3 { left: 598px; }
.pg-28 .p28-div--4 { left: 803px; }

/* --- the five step columns --------------------------------------------------------- */
.pg-28 .p28-steps { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.pg-28 .p28-step  { position: absolute; top: 0; width: 205px; text-align: center; }
.pg-28 .p28-step--1 { left: -14.5px; }
.pg-28 .p28-step--2 { left: 190.1px; }
.pg-28 .p28-step--3 { left: 394.6px; }
.pg-28 .p28-step--4 { left: 599.2px; }
.pg-28 .p28-step--5 { left: 803.8px; }

.pg-28 .p28-step .badge {
    position: absolute;
    left: 27.5px; top: 384px;
    --bs: 150px;
    box-shadow: none;
}
.pg-28 .p28-step .badge svg { width: 60%; height: 60%; }
.pg-28 .p28-step--1 .badge { --bf: var(--c1); }
.pg-28 .p28-step--2 .badge { --bf: var(--c2); }
.pg-28 .p28-step--3 .badge { --bf: var(--c3); }
.pg-28 .p28-step--4 .badge { --bf: var(--c4); }
.pg-28 .p28-step--5 .badge { --bf: var(--c5); }

.pg-28 .p28-step h3 {
    position: absolute;
    left: 0; right: 0; top: 557px;
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 26px; line-height: 26px;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-28 .p28-step--1 h3 { color: #14294D; }
.pg-28 .p28-step--2 h3 { color: #3B5A24; }
.pg-28 .p28-step--3 h3 { color: #DDA22B; }
.pg-28 .p28-step--4 h3 { color: #12707B; }
.pg-28 .p28-step--5 h3 { color: #3B2871; }

.pg-28 .p28-urule {
    position: absolute;
    left: 72.5px; top: 601px;
    width: 60px; height: 4px;
    border-radius: 2px;
}
.pg-28 .p28-step--1 .p28-urule { background: #2D3D58; }
.pg-28 .p28-step--2 .p28-urule { background: #4A5C41; }
.pg-28 .p28-step--3 .p28-urule { background: #C7A152; }
.pg-28 .p28-step--4 .p28-urule { background: #498389; }
.pg-28 .p28-step--5 .p28-urule { background: #413B62; }

.pg-28 .p28-step p {
    position: absolute;
    left: -20px; right: -20px; top: 621px;
    font-size: 19px;
    color: #4A4F5A;
    white-space: nowrap;
}
.pg-28 .p28-step p .ln { display: block; height: 28.5px; }

/* ==========================================================================
   PAGE 29 · FIRE SAFETY CONSULTING                             Template O
   All coordinates measured off the 1440 x 810 source page.

   The source is one painted full-bleed scene. It is kept as the single raster
   asset with the baked title, the four card header bars, every bullet and
   every bullet dot erased from it; those are rebuilt here in CSS and HTML.
   The card bodies, the four illustrations, the painted connector arrows and
   the circular control-room photograph stay in the raster because they are
   continuous-tone artwork.
   ========================================================================== */

.pg-29 .tO {
    background: #10161C;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-29 .tO > * { position: absolute; }

.pg-29 .p29-scene {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    object-fit: fill;
}

/* --- title on the torn parchment banner ---------------------------------------- */
.pg-29 .p29-title {
    left: 221px; top: 186px;
    width: 1000px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 83px; line-height: 83px;
    letter-spacing: -.005em;
    color: #F5C518;
    white-space: nowrap;
    text-shadow: 0 3px 10px rgba(60, 34, 0, .55);
}

/* --- card header bars ------------------------------------------------------------ */
.pg-29 .p29-bar { border-radius: 16px 16px 0 0; }
.pg-29 .p29-bar--1 {
    left: 72px; top: 318px; width: 448px; height: 75px;
    background: linear-gradient(100deg, #E4732E 0%, #C24E23 55%, #B54A26 100%);
}
.pg-29 .p29-bar--2 {
    left: 923px; top: 318px; width: 445px; height: 75px;
    background: linear-gradient(100deg, #16407B 0%, #1B4780 55%, #2A5A97 100%);
}
.pg-29 .p29-bar--3 {
    left: 69px; top: 583px; width: 412px; height: 73px;
    background: linear-gradient(100deg, #C63C2C 0%, #B4362F 55%, #B0392F 100%);
}
.pg-29 .p29-bar--4 {
    left: 951px; top: 583px; width: 430px; height: 73px;
    background: linear-gradient(100deg, #5E7E58 0%, #3D5C4C 55%, #2A4A48 100%);
}

/* --- card headings ---------------------------------------------------------------- */
.pg-29 .p29-hd {
    margin: 0;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(20, 10, 4, .45);
}
.pg-29 .p29-hd .ln { display: block; }
.pg-29 .p29-hd--1,
.pg-29 .p29-hd--2 { font-size: 26px; }
.pg-29 .p29-hd--3,
.pg-29 .p29-hd--4 { font-size: 24px; }
.pg-29 .p29-hd--1 .ln,
.pg-29 .p29-hd--2 .ln { height: 33px; }
.pg-29 .p29-hd--3 .ln,
.pg-29 .p29-hd--4 .ln { height: 30px; }

.pg-29 .p29-hd--1 { left: 195px; top: 325px; }
.pg-29 .p29-hd--2 { left: 988px; top: 325px; }
.pg-29 .p29-hd--2 .l2 { margin-left: 104px; }
.pg-29 .p29-hd--3 { left: 129px; top: 592px; }
.pg-29 .p29-hd--3 .l2 { margin-left: 83px; }
.pg-29 .p29-hd--4 { left: 992px; top: 592px; }
.pg-29 .p29-hd--4 .l2 { margin-left: 108px; }

/* --- card bullets ------------------------------------------------------------------ */
.pg-29 .p29-list { position: absolute; }
.pg-29 .p29-list li {
    position: absolute;
    left: 0;
    white-space: nowrap;
}
.pg-29 .p29-list li::before {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.pg-29 .p29-list li.nodot::before { content: none; }

.pg-29 .p29-list--1 { left: 249px; top: 0; font-size: 26px; color: #6B3323; }
.pg-29 .p29-list--1 li::before { left: -18px; top: 11px; background: #B73710; }
.pg-29 .p29-list--1 .b1 { top: 409px; }
.pg-29 .p29-list--1 .b2 { top: 452px; }
.pg-29 .p29-list--1 .b3 { top: 493px; }

.pg-29 .p29-list--2 { left: 1108px; top: 0; font-size: 24px; color: #22344F; }
.pg-29 .p29-list--2 li::before { left: -19px; top: 10px; background: #2E5A96; }
.pg-29 .p29-list--2 .b1 { top: 413px; }
.pg-29 .p29-list--2 .b2 { top: 453px; }
.pg-29 .p29-list--2 .b3 { top: 495px; }

.pg-29 .p29-list--3 { left: 232px; top: 0; font-size: 25px; color: #6B3A30; }
.pg-29 .p29-list--3 li::before { left: -16px; top: 10px; background: #B83C23; }
.pg-29 .p29-list--3 .b1 { left: -82px; top: 671px; }
.pg-29 .p29-list--3 .b2 { top: 715px; }
.pg-29 .p29-list--3 .b3 { top: 757px; }

.pg-29 .p29-list--4 { left: 1114px; top: 0; font-size: 24px; color: #3A3535; }
.pg-29 .p29-list--4 li::before { left: -25px; top: 9px; background: #5A7548; }
.pg-29 .p29-list--4 .b1 { top: 673px; }
.pg-29 .p29-list--4 .b2 { top: 715px; }
.pg-29 .p29-list--4 .b3 { top: 755px; }

/* ==========================================================================
   PAGE 30 · CONSTRUCTION SAFETY MANAGEMENT                     Template O
   All coordinates measured off the 1440 x 810 source page.

   The single raster is the burning-construction-site photograph, cropped to
   the right of the chevron panel (x 680 -> 1440) with the shield + tagline
   lockup erased from it. The FIRE PLAN lettering printed on the extinguisher
   belongs to the photograph and is left in the raster. The chevron panel, the
   pale concrete wedge, the amber outline, the six badges, their icons, the
   grid hairlines and the hazard-stripe callout are all rebuilt live.
   ========================================================================== */

.pg-30 .tO {
    --navy30:   #12365C;
    --orange30: #B0611F;
    --green30:  #3D5A20;
    --purple30: #38254D;
    --teal30:   #17474C;
    --red30:    #7E2B1C;
    --ink30:    #33302A;
    --amber30:  #E5A431;
    --concrete: #E5DCD5;
    background: #12171C;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-30 .tO > * { position: absolute; }
.pg-30 .ln { display: block; white-space: nowrap; }
.pg-30 i.fit { font-style: normal; }

/* --- photographic base ------------------------------------------------------- */
.pg-30 .p30-scene {
    left: 680px; top: 0;
    width: 760px; height: 810px;
    object-fit: fill;
    z-index: 1;
}

/* --- pale concrete wedge ------------------------------------------------------
   Right edge measured every 6px down the page: it runs out to x 914 at y 441,
   back to x 850 at y 602, out again to x 878 at y 694 and off the foot at 835.
-------------------------------------------------------------------------- */
.pg-30 .p30-wedge {
    left: 0; top: 0;
    width: 920px; height: 810px;
    z-index: 2;
    background: var(--concrete);
    clip-path: polygon(0 264px, 863px 264px, 914px 441px, 850px 602px,
                       878px 694px, 835px 810px, 0 810px);
}

/* --- dark chevron title panel -------------------------------------------------- */
.pg-30 .p30-panel {
    left: 0; top: 0;
    width: 770px; height: 267px;
    z-index: 3;
    background: linear-gradient(90deg, #070B0E 0, #0F1215 18%, #17191C 45%, #1C1E21 100%);
    clip-path: polygon(0 0, 690px 0, 755px 130px, 704px 267px, 0 267px);
}
.pg-30 .p30-outline {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 4;
    fill: none;
    stroke: #C08A18;
    stroke-width: 2.2;
    stroke-linejoin: miter;
}

/* --- title lockup ---------------------------------------------------------------- */
.pg-30 .p30-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    z-index: 5;
    font-family: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-30 .p30-title span { position: absolute; display: block; white-space: nowrap; }
/* the source face is grained; a fine speckle is clipped to the glyphs */
.pg-30 .p30-title .l1,
.pg-30 .p30-title .l2 {
    background-image:
        radial-gradient(circle at 30% 40%, rgba(0,0,0,.30) 0 1.1px, rgba(0,0,0,0) 1.6px),
        radial-gradient(circle at 72% 18%, rgba(0,0,0,.22) 0 .9px, rgba(0,0,0,0) 1.3px),
        radial-gradient(circle at 12% 78%, rgba(0,0,0,.20) 0 1.2px, rgba(0,0,0,0) 1.6px);
    background-size: 17px 21px, 23px 15px, 27px 25px;
    -webkit-background-clip: text;
    background-clip: text;
}
.pg-30 .p30-title .l1 {
    left: 42px; top: -8px;
    font-size: 104px; line-height: 104px;
    background-color: #FDFDFD;
    -webkit-text-fill-color: transparent;
}
.pg-30 .p30-title .l2 {
    left: 41px; top: 82px;
    font-size: 100px; line-height: 100px;
    background-color: var(--amber30);
    -webkit-text-fill-color: transparent;
}
.pg-30 .p30-rule {
    left: 43px; top: 196px;
    width: 634px; height: 2.2px;
    background: #B8891F;
    z-index: 5;
}
.pg-30 .p30-sub {
    left: 43px; top: 214px;
    margin: 0;
    z-index: 5;
    font-size: 27.5px; line-height: 27.5px;
    font-weight: 400;
    color: #FBFBFB;
    white-space: nowrap;
}

/* --- shield + tagline lockup ----------------------------------------------------- */
.pg-30 .p30-shield { left: 810px; top: 34px; width: 71px; height: 84px; z-index: 5; }
.pg-30 .p30-div {
    left: 904.5px; top: 38px;
    width: 1.8px; height: 79px;
    background: #1A1A1A;
    z-index: 5;
}
.pg-30 .p30-tag {
    left: 927px; top: 51px;
    margin: 0;
    z-index: 5;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 27.5px; line-height: 33px;
    color: #16181A;
}

/* --- grid hairlines -------------------------------------------------------------- */
.pg-30 .p30-hrule {
    left: 41px; top: 535px;
    width: 861px; height: 1.6px;
    background: rgba(120, 108, 96, .35);
    z-index: 5;
}
.pg-30 .p30-vrule {
    width: 1.6px;
    background: rgba(120, 108, 96, .32);
    z-index: 5;
}
.pg-30 .p30-vrule--a { left: 307px; top: 303px; height: 216px; }
.pg-30 .p30-vrule--b { left: 600px; top: 303px; height: 216px; }
.pg-30 .p30-vrule--c { left: 307px; top: 560px; height: 250px; }
.pg-30 .p30-vrule--d { left: 600px; top: 560px; height: 250px; }

/* --- badges ---------------------------------------------------------------------- */
.pg-30 .p30-badge {
    z-index: 6;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px rgba(229, 220, 213, .96),
                0 0 0 6.4px rgba(90, 80, 72, .40);
}
.pg-30 .p30-badge svg { width: 62%; height: 62%; }
.pg-30 .p30-badge--1,
.pg-30 .p30-badge--2,
.pg-30 .p30-badge--3 { width: 95px; height: 95px; }
.pg-30 .p30-badge--4,
.pg-30 .p30-badge--5,
.pg-30 .p30-badge--6 { width: 87px; height: 87px; }

.pg-30 .p30-badge--1 { left: 49px;  top: 297px; background: radial-gradient(circle at 50% 55%, #14477A, #0A3055); }
.pg-30 .p30-badge--2 { left: 381px; top: 298px; background: radial-gradient(circle at 50% 55%, #D06A11, #B25608); }
.pg-30 .p30-badge--3 { left: 670px; top: 297px; background: radial-gradient(circle at 50% 55%, #3F6B1D, #2C4E15); }
.pg-30 .p30-badge--4 { left: 51px;  top: 563px; background: radial-gradient(circle at 50% 55%, #3E2A5A, #2A1A3C); }
.pg-30 .p30-badge--5 { left: 358px; top: 563px; background: radial-gradient(circle at 50% 55%, #10585F, #094348); }
.pg-30 .p30-badge--6 { left: 642px; top: 563px; background: radial-gradient(circle at 50% 55%, #B02C15, #8C1F10); }

/* --- block headings ---------------------------------------------------------------- */
.pg-30 .p30-h {
    margin: 0;
    z-index: 6;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20.5px; line-height: 20.5px;
    letter-spacing: .005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-30 .p30-h span { display: block; }
.pg-30 .p30-h--1 { left: 43px;  top: 404px; color: var(--navy30); }
.pg-30 .p30-h--2 { left: 337px; top: 404px; color: var(--orange30); }
.pg-30 .p30-h--3 { left: 621px; top: 404px; color: var(--green30); }
.pg-30 .p30-h--4 { left: 42px;  top: 660px; color: var(--purple30); }
.pg-30 .p30-h--5 { left: 337px; top: 660px; color: var(--teal30); line-height: 21.5px; }
.pg-30 .p30-h--5 .l2 { margin-left: 22px; }
.pg-30 .p30-h--6 { left: 620px; top: 660px; color: var(--red30); }

/* --- block bullets ------------------------------------------------------------------- */
.pg-30 .p30-list {
    margin: 0; padding: 0;
    z-index: 6;
    list-style: none;
    font-size: 16.5px;
    line-height: 16.5px;
    color: var(--ink30);
    white-space: nowrap;
}
.pg-30 .p30-list li { position: relative; padding-left: 16.3px; margin-bottom: 4.8px; }
.pg-30 .p30-list li:last-child { margin-bottom: 0; }
.pg-30 .p30-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 4.6px; height: 4.6px;
    border-radius: 50%;
    background: #55504A;
}
.pg-30 .p30-list--1 { left: 47px;  top: 429px; }
.pg-30 .p30-list--2 { left: 342px; top: 429px; }
.pg-30 .p30-list--3 { left: 627px; top: 429px; }
.pg-30 .p30-list--4 { left: 47px;  top: 685px; }
.pg-30 .p30-list--5 { left: 342px; top: 707px; }
.pg-30 .p30-list--6 { left: 627px; top: 685px; }
.pg-30 .p30-list--5 li { margin-bottom: 4.2px; }
.pg-30 .p30-list--6 li { margin-bottom: 4px; }

/* FIRE PLAN is lettering printed on the extinguisher inside the photograph;
   it stays in the raster and has no rule here. */

/* --- hazard-stripe callout ------------------------------------------------------------ */
.pg-30 .p30-callout {
    left: 1027px; top: 684px;
    width: 413px; height: 119px;
    z-index: 7;
    padding: 2.4px 0 15px 2.4px;
    border-radius: 7px 0 0 0;
    background: repeating-linear-gradient(45deg, #E8A020 0 11px, #131313 11px 22px);
}
.pg-30 .p30-plate {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 5px 0 0 0;
    background: linear-gradient(180deg, #0E1216, #0A0E12);
}
.pg-30 .p30-tri { position: absolute; left: 41px; top: 22px; width: 78px; height: 76px; }
.pg-30 .p30-c1, .pg-30 .p30-c2, .pg-30 .p30-c3 {
    position: absolute;
    left: 129px;
    margin: 0;
    white-space: nowrap;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
}
.pg-30 .p30-c1 {
    top: 26px;
    font-weight: 700; font-size: 21px; line-height: 21px;
    color: #E8A020;
}
.pg-30 .p30-c2 {
    top: 53px;
    font-weight: 700; font-size: 22px; line-height: 22px;
    color: #FFFFFF;
}
.pg-30 .p30-c3 {
    top: 82px;
    font-weight: 600; font-size: 15px; line-height: 15px;
    color: #F2F2F2;
}

/* ==========================================================================
   PAGE 31 · HUMAN FACTOR CONSULTING                            Template O
   All coordinates measured off the 1440 x 810 source page.

   Two rasters only: the circular photograph in the centre (with its four
   ring labels erased and rebuilt as live text) and the pale refinery skyline
   along the foot. The navy banner, the six chevron cards, all badges, the
   leader lines and every string are CSS, inline SVG and HTML.
   ========================================================================== */

.pg-31 .tO {
    --navy31:  #12305C;
    --orange31:#DE6A1E;
    --teal31:  #17787E;
    --green31: #3C7A2E;
    --amber31: #DE9A0D;
    --red31:   #A3211E;
    --ink31:   #2E313A;
    background: linear-gradient(135deg, #FAF9F8 0, #F3F2F0 45%, #EDEDEE 100%);
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-31 .tO > * { position: absolute; }
.pg-31 .ln { display: block; white-space: nowrap; }
.pg-31 i.fit { font-style: normal; }

/* --- background furniture ------------------------------------------------------ */
.pg-31 .p31-dots {
    background-image: radial-gradient(rgba(60, 80, 120, .30) 1.1px, transparent 1.3px);
    background-size: 11px 11px;
    z-index: 1;
}
.pg-31 .p31-dots--bl {
    left: 0; top: 690px; width: 330px; height: 120px;
    -webkit-mask-image: radial-gradient(60% 80% at 25% 60%, #000, transparent 75%);
    mask-image: radial-gradient(60% 80% at 25% 60%, #000, transparent 75%);
}
.pg-31 .p31-dots--tr {
    left: 860px; top: 620px; width: 130px; height: 130px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
    mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
}
.pg-31 .p31-skyline {
    left: 0; top: 735px; width: 475px; height: 75px;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px),
                        linear-gradient(90deg, #000 0, #000 400px, transparent 474px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 14px),
                linear-gradient(90deg, #000 0, #000 400px, transparent 474px);
    mask-composite: intersect;
}

/* --- title stack ---------------------------------------------------------------- */
.pg-31 .p31-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    z-index: 4;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.pg-31 .p31-title span { position: absolute; display: block; white-space: nowrap; left: 35px; }
.pg-31 .p31-title .l1 { top: 13px;  font-size: 106px; line-height: 106px; color: var(--navy31); }
.pg-31 .p31-title .l2 { top: 103px; font-size: 108px; line-height: 108px; color: var(--navy31); }
.pg-31 .p31-title .l3 { top: 206px; font-size: 60px;  line-height: 60px;  color: var(--orange31); }
.pg-31 .p31-rule {
    left: 41px; top: 281px;
    width: 357px; height: 1.6px;
    background: linear-gradient(90deg, #7C8087, rgba(124,128,135,.15));
    z-index: 4;
}

/* --- tagline -------------------------------------------------------------------- */
.pg-31 .p31-vrule {
    left: 464px; top: 40px;
    width: 2.6px; height: 190px;
    background: #D08B4E;
    z-index: 4;
}
.pg-31 .p31-tag {
    left: 491px; top: 39px;
    margin: 0;
    z-index: 4;
    font-size: 24px;
    line-height: 31.7px;
    font-weight: 500;
    color: #17203A;
}

/* --- intro paragraph ------------------------------------------------------------ */
.pg-31 .p31-intro {
    left: 41px; top: 298px;
    margin: 0;
    z-index: 4;
    font-size: 17px;
    line-height: 24.7px;
    color: var(--ink31);
}

/* --- value rows ------------------------------------------------------------------ */
.pg-31 .p31-vb {
    z-index: 5;
    left: 39px;
    width: 79px; height: 79px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.pg-31 .p31-vb svg { width: 60%; height: 60%; }
.pg-31 .p31-vb--1 { top: 434px; background: radial-gradient(circle at 40% 32%, #1B4879, #0B2A50); }
.pg-31 .p31-vb--2 { top: 532px; background: radial-gradient(circle at 40% 32%, #1D8A90, #0E666C); }
.pg-31 .p31-vb--3 { top: 631px; background: radial-gradient(circle at 40% 32%, #F0821E, #DB6410); }

.pg-31 .p31-vh {
    left: 132px;
    margin: 0;
    z-index: 5;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px; line-height: 18px;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-31 .p31-vh--1 { top: 444px; color: var(--navy31); }
.pg-31 .p31-vh--2 { top: 543px; color: #1B6169; }
.pg-31 .p31-vh--3 { top: 642px; color: var(--orange31); }

.pg-31 .p31-vp {
    left: 132px;
    margin: 0;
    z-index: 5;
    font-size: 16.5px;
    line-height: 20.7px;
    color: var(--ink31);
}
.pg-31 .p31-vp--1 { top: 468px; }
.pg-31 .p31-vp--2 { top: 567px; }
.pg-31 .p31-vp--3 { top: 665px; }

/* --- centre circle --------------------------------------------------------------- */

.pg-31 .p31-circle {
    left: 437px; top: 225px;
    width: 423px; height: 501px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;
    box-shadow: 0 0 0 4px rgba(255,255,255,.9);
}
.pg-31 .p31-node {
    margin: 0;
    z-index: 4;
    text-align: center;
    white-space: nowrap;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px; line-height: 15px;
    letter-spacing: .04em;
    color: #EEF3F8;
    text-shadow: 0 1px 3px rgba(10, 25, 50, .45);
}
.pg-31 .p31-node--beh { left: 604px; top: 322px; width: 120px; }
.pg-31 .p31-node--per { left: 495px; top: 373px; width: 120px; }
.pg-31 .p31-node--wel { left: 702px; top: 374px; width: 120px; }
.pg-31 .p31-node--cul { left: 609px; top: 537px; width: 120px; }

/* --- leader lines ----------------------------------------------------------------- */
.pg-31 .p31-leads {
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 5;
    overflow: visible;
}

.pg-31 .p31-leads .dash { stroke: #8E96A4; stroke-width: 1.8; stroke-dasharray: 6 7; }
.pg-31 .p31-leads .arc  { stroke: #6E7684; stroke-width: 1.4; fill: none; }
.pg-31 .p31-leads .n  { stroke: #12305C; fill: #12305C; }
.pg-31 .p31-leads .t  { stroke: #17787E; fill: #17787E; }
.pg-31 .p31-leads .g  { stroke: #3C7A2E; fill: #3C7A2E; }
.pg-31 .p31-leads .a  { stroke: #DE9A0D; fill: #DE9A0D; }
.pg-31 .p31-leads .o  { stroke: #DE6A1E; fill: #DE6A1E; }
.pg-31 .p31-leads .r  { stroke: #B8321F; fill: #B8321F; }
.pg-31 .p31-leads path.ld { fill: none; stroke-width: 1.8; }
.pg-31 .p31-leads path.dash { fill: none; }
.pg-31 .p31-leads circle.dt { stroke: none; }

/* --- navy banner -------------------------------------------------------------------- */
.pg-31 .p31-banner {
    left: 800px; top: 0;
    width: 640px; height: 88px;
    z-index: 6;
    background: linear-gradient(100deg, #0A2144 0, #123763 55%, #0E2C50 100%);
    clip-path: polygon(68px 0, 640px 0, 640px 88px, 5px 88px);
}
.pg-31 .p31-bicon { left: 965px; top: 17px; width: 76px; height: 52px; z-index: 7; }
.pg-31 .p31-btitle {
    left: 1065px; top: 18px;
    margin: 0;
    z-index: 7;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px; line-height: 22px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-31 .p31-bsub {
    left: 1065px; top: 48px;
    margin: 0;
    z-index: 7;
    font-size: 17px; line-height: 17px;
    font-weight: 400;
    color: #E9EEF5;
    white-space: nowrap;
}

/* --- the six chevron cards ---------------------------------------------------------- */
.pg-31 .p31-cards {
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 3;
}
.pg-31 .p31-cards .bd { fill: #F6F7F8; stroke-width: 1.6; }
.pg-31 .p31-cards .hd { stroke: none; }
.pg-31 .p31-cards .c1 .bd { stroke: #2C5A8C; } .pg-31 .p31-cards .c1 .hd { fill: #0B4B85; }
.pg-31 .p31-cards .c2 .bd { stroke: #3E93A6; } .pg-31 .p31-cards .c2 .hd { fill: #087E96; }
.pg-31 .p31-cards .c3 .bd { stroke: #5E9A62; } .pg-31 .p31-cards .c3 .hd { fill: #37854F; }
.pg-31 .p31-cards .c4 .bd { stroke: #DCB05C; } .pg-31 .p31-cards .c4 .hd { fill: #E29A0A; }
.pg-31 .p31-cards .c5 .bd { stroke: #DC9257; } .pg-31 .p31-cards .c5 .hd { fill: #E16D0E; }
.pg-31 .p31-cards .c6 .bd { stroke: #C0645A; } .pg-31 .p31-cards .c6 .hd { fill: #9E2322; }

.pg-31 .p31-cb {
    z-index: 6;
    left: 930px;
    width: 96px; height: 96px;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 0 0 5px #F7F8F9, 0 0 0 6.4px rgba(120,132,150,.45);
}
.pg-31 .p31-cb svg { width: 58%; height: 58%; }
.pg-31 .p31-cb--1 { top: 116px; background: radial-gradient(circle at 42% 30%, #17406E, #042653); }
.pg-31 .p31-cb--2 { top: 236px; background: radial-gradient(circle at 42% 30%, #1595AE, #087E96); }
.pg-31 .p31-cb--3 { top: 357px; background: radial-gradient(circle at 42% 30%, #74994A, #4C7020); }
.pg-31 .p31-cb--4 { top: 478px; background: radial-gradient(circle at 42% 30%, #F2A81E, #DA8C04); }
.pg-31 .p31-cb--5 { top: 593px; background: radial-gradient(circle at 42% 30%, #F1811C, #DB640B); }
.pg-31 .p31-cb--6 { top: 709px; background: radial-gradient(circle at 42% 30%, #C13A26, #9A1F00); }

.pg-31 .p31-ch {
    left: 1041px;
    margin: 0;
    z-index: 6;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px; line-height: 18px;
    letter-spacing: .005em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-31 .p31-ch--1 { top: 132px; color: #12305C; }
.pg-31 .p31-ch--2 { top: 251px; color: #1B6C77; }
.pg-31 .p31-ch--3 { top: 374px; color: #44662F; }
.pg-31 .p31-ch--4 { top: 493px; color: #C08A2E; }
.pg-31 .p31-ch--5 { top: 611px; color: #C4682E; }
.pg-31 .p31-ch--6 { top: 725px; color: #8A2422; }

.pg-31 .p31-cl {
    left: 1050px;
    margin: 0; padding: 0;
    z-index: 6;
    list-style: none;
    font-size: 15px;
    line-height: 15px;
    color: var(--ink31);
    white-space: nowrap;
}
.pg-31 .p31-cl li { position: relative; padding-left: 9px; margin-bottom: 6.5px; }
.pg-31 .p31-cl li::before {
    content: "";
    position: absolute;
    left: -6px; top: 5px;
    width: 4.2px; height: 4.2px;
    border-radius: 50%;
    background: #4B5160;
}
.pg-31 .p31-cl--1 { top: 159px; }
.pg-31 .p31-cl--2 { top: 278px; }
.pg-31 .p31-cl--3 { top: 399px; }
.pg-31 .p31-cl--4 { top: 520px; }
.pg-31 .p31-cl--5 { top: 635px; }
.pg-31 .p31-cl--6 { top: 750px; }

/* ==========================================================================
   PAGE 32 · BBS — BEHAVIOUR BASED SAFETY STUDY                 Template O
   All coordinates measured off the 1440 x 810 source page.

   Rasters: the circular team photograph, the right-hand refinery plate and
   the two painted banner strokes. Every string on them was erased and is
   rebuilt as live HTML; the badges, connectors, arc ring and rules are CSS
   and inline SVG.
   ========================================================================== */

.pg-32 .tO {
    --navy32:  #16304F;
    --orange32:#DD6A1E;
    --olive32: #5E8C3A;
    --blue32:  #1B5C96;
    --green32: #3F7A34;
    --ink32:   #2B2F38;
    background: #F2F2F0;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-32 .tO > * { position: absolute; }
.pg-32 .ln { display: block; white-space: nowrap; }
.pg-32 i.fit { font-style: normal; }

/* --- right-hand refinery plate ------------------------------------------------- */
.pg-32 .p32-right {
    left: 1000px; top: -4px;
    width: 440px; height: 810px;
    object-fit: fill;
    z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px);
}

/* --- site sign lettering (clipped by the page edge) ---------------------------- */
.pg-32 .p32-sign {
    left: 1300px; top: 415px;
    width: 160px;
    margin: 0;
    z-index: 2;
    font-family: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
    font-weight: 700;
    color: #33473A;
}
.pg-32 .p32-sign span { position: absolute; display: block; white-space: nowrap; }
.pg-32 .p32-sign .s1 { left: 42px; top: 2px;   font-size: 44px; line-height: 44px; }
.pg-32 .p32-sign .s2 { left: 72px; top: 43px;  font-size: 30px; line-height: 30px; }
.pg-32 .p32-sign .s3 { left: 28px; top: 75px;  font-size: 34px; line-height: 34px; }
.pg-32 .p32-sign .s4 { left: 38px; top: 107px; font-size: 36px; line-height: 36px; }
.pg-32 .p32-sign .s5 { left: 46px; top: 140px; font-size: 37px; line-height: 37px; }

/* --- faint dotted texture bottom-left ------------------------------------------ */
.pg-32 .p32-dots {
    left: 0; top: 730px; width: 300px; height: 80px;
    z-index: 1;
    background-image: radial-gradient(rgba(70, 90, 120, .22) 1.1px, transparent 1.3px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(70% 90% at 20% 70%, #000, transparent 78%);
    mask-image: radial-gradient(70% 90% at 20% 70%, #000, transparent 78%);
}

/* --- title lockup --------------------------------------------------------------- */
.pg-32 .p32-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    z-index: 4;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--navy32);
}
.pg-32 .p32-title span { position: absolute; display: block; white-space: nowrap; }
.pg-32 .p32-title .bbs { left: 33px; top: 8px;   font-size: 207px; line-height: 207px; letter-spacing: -.02em; }
.pg-32 .p32-title .l1  { left: 368px; top: 46px; font-size: 68px;  line-height: 68px; }
.pg-32 .p32-title .l2  { left: 367px; top: 107px; font-size: 68px; line-height: 68px; }

.pg-32 .p32-strap {
    left: 38px; top: 198px;
    margin: 0;
    z-index: 4;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px; line-height: 20px;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: var(--orange32);
    white-space: nowrap;
}
.pg-32 .p32-rule { left: 37px; background: var(--navy32); z-index: 4; }
.pg-32 .p32-rule--a { top: 229px; width: 585px; height: 3.4px; }
.pg-32 .p32-rule--b { top: 235px; width: 585px; height: 1.4px; }

/* --- painted banners + their labels ---------------------------------------------- */
.pg-32 .p32-banner { z-index: 3; }
.pg-32 .p32-banner--obj  { left: 22px; top: 262px; width: 340px; height: 73px; }
.pg-32 .p32-banner--proc { left: 22px; top: 472px; width: 360px; height: 68px; }

.pg-32 .p32-bl {
    margin: 0;
    z-index: 4;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 24px; line-height: 24px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
}
.pg-32 .p32-bl--obj  { left: 130px; top: 282px; }
.pg-32 .p32-bl--proc { left: 131px; top: 490px; }

.pg-32 .p32-obj {
    left: 58px; top: 341px;
    margin: 0;
    z-index: 4;
    font-size: 17.5px;
    line-height: 24.8px;
    color: var(--ink32);
}

/* --- hero circle + orange arc ----------------------------------------------------- */
.pg-32 .p32-hero {
    left: 670px; top: 85px;
    width: 400px; height: 400px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;
}
.pg-32 .p32-arc {
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 4;
    overflow: visible;
}
.pg-32 .p32-arc .ar { fill: none; stroke: var(--orange32); stroke-width: 4.6; stroke-linecap: round; }
.pg-32 .p32-arc .an { fill: none; stroke: var(--navy32);   stroke-width: 4.6; stroke-linecap: round; }
.pg-32 .p32-arc .dt { fill: var(--orange32); }

/* --- slogan tag -------------------------------------------------------------------- */
.pg-32 .p32-sicon { left: 925px; top: 350px; width: 70px; height: 56px; z-index: 5; }
.pg-32 .p32-slogan {
    left: 0; top: 0;
    margin: 0;
    z-index: 5;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.pg-32 .p32-slogan span { position: absolute; left: 1004px; display: block; white-space: nowrap; font-size: 24px; line-height: 24px; }
.pg-32 .p32-slogan .g1 { top: 325px; color: #FFFFFF; }
.pg-32 .p32-slogan .g2 { top: 361px; color: var(--orange32); }
.pg-32 .p32-slogan .g3 { top: 389px; color: #FFFFFF; }

/* --- process row -------------------------------------------------------------------- */
.pg-32 .p32-conn {
    left: 0; top: 0; width: 1440px; height: 810px;
    z-index: 3;
}
.pg-32 .p32-conn path {
    fill: none; stroke: #8B8F96; stroke-width: 1.8; stroke-dasharray: 3 6; stroke-linecap: round;
}
.pg-32 .p32-conn .hd { fill: #8B8F96; stroke: none; }

.pg-32 .p32-badge {
    z-index: 4;
    width: 96px; height: 96px;
    top: 544px;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 0 0 5px #F2F2F0, 0 0 0 6.6px rgba(120,124,132,.45);
}
.pg-32 .p32-badge svg { width: 56%; height: 56%; }
.pg-32 .p32-badge--1 { left: 77px;   background: radial-gradient(circle at 42% 32%, #1E4670, #0A2038); }
.pg-32 .p32-badge--2 { left: 274px;  background: radial-gradient(circle at 42% 32%, #6E9E45, #4B7529); }
.pg-32 .p32-badge--3 { left: 472px;  background: radial-gradient(circle at 42% 32%, #E77C1F, #C85E0B); }
.pg-32 .p32-badge--4 { left: 662px;  background: radial-gradient(circle at 42% 32%, #23689F, #0C4470); }
.pg-32 .p32-badge--5 { left: 837px;  background: radial-gradient(circle at 42% 32%, #4E8A3C, #2F6425); }
.pg-32 .p32-badge--6 { left: 1020px; background: radial-gradient(circle at 42% 32%, #E77C1F, #C85E0B); }

.pg-32 .p32-num {
    z-index: 5;
    top: 634px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #FFFFFF;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 0 0 3px #F2F2F0;
}
.pg-32 .p32-num--1 { left: 109px;  background: #12365C; }
.pg-32 .p32-num--2 { left: 306px;  background: #4B7529; }
.pg-32 .p32-num--3 { left: 504px;  background: #C85E0B; }
.pg-32 .p32-num--4 { left: 694px;  background: #0C4470; }
.pg-32 .p32-num--5 { left: 869px;  background: #2F6425; }
.pg-32 .p32-num--6 { left: 1052px; background: #C85E0B; }

.pg-32 .p32-lab {
    z-index: 5;
    top: 671px;
    width: 200px;
    margin: 0;
    text-align: center;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px; line-height: 19px;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-32 .p32-lab--1 { left: 25px;   color: #12365C; }
.pg-32 .p32-lab--2 { left: 222px;  color: #4B7529; }
.pg-32 .p32-lab--3 { left: 420px;  color: #C85E0B; }
.pg-32 .p32-lab--4 { left: 610px;  color: #12558E; }
.pg-32 .p32-lab--5 { left: 785px;  color: #3F7A34; }
.pg-32 .p32-lab--6 { left: 968px;  color: #C85E0B; }

.pg-32 .p32-desc {
    z-index: 5;
    top: 697px;
    margin: 0; padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 19.2px;
    color: var(--ink32);
    white-space: nowrap;
}
.pg-32 .p32-desc li { position: relative; padding-left: 16px; }
.pg-32 .p32-desc li::before {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #5A5F68;
}
.pg-32 .p32-desc--1 { left: 51px; }
.pg-32 .p32-desc--2 { left: 252px; }
.pg-32 .p32-desc--3 { left: 452px; }
.pg-32 .p32-desc--4 { left: 640px; }
.pg-32 .p32-desc--5 { left: 809px; }
.pg-32 .p32-desc--6 { left: 998px; }

/* ==========================================================================
   PAGE 33 · PROCESS SAFETY TRAINING                            Template L
   All coordinates measured off the 1440 x 810 source page.

   The only raster is the burning-refinery photograph on the right (the
   fragment of the competence wheel that the crop caught along its left edge
   has been cleared back to the page ground so only the live SVG wheel shows). The
   six-segment competence wheel is inline SVG (centre 689.5 / 490, outer
   radius 210, inner radius 118, segment joins at 31/91/151/210/269/329
   degrees) with live <text> labels; the navy banner, both pills, all
   badges and every string are rebuilt live.
   ========================================================================== */

.pg-33 .tL {
    --navy33:  #12305C;
    --orange33:#DD6A1E;
    --ink33:   #2B2F38;
    background: #F0ECE4;
    font-family: "Inter", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pg-33 .tL > * { position: absolute; }
.pg-33 .ln { display: block; white-space: nowrap; }
.pg-33 i.fit { font-style: normal; }

/* --- photographic base ------------------------------------------------------- */
.pg-33 .p33-photo {
    left: 840px; top: 0;
    width: 600px; height: 810px;
    object-fit: fill;
    z-index: 1;
}

/* --- navy angled banner ------------------------------------------------------- */
.pg-33 .p33-banner {
    left: 430px; top: 0;
    width: 560px; height: 190px;
    z-index: 2;
    background: linear-gradient(105deg, #0B2544 0, #143A66 55%, #10305A 100%);
    clip-path: polygon(17px 0, 545px 0, 470px 122px, 270px 182px, 102px 172px);
}
.pg-33 .p33-shield { left: 510px; top: 33px; width: 76px; height: 100px; z-index: 3; }
.pg-33 .p33-tag {
    left: 631px; top: 47px;
    margin: 0;
    z-index: 3;
    font-size: 21px;
    line-height: 31.5px;
    color: #F3F5F8;
}

/* --- title lockup -------------------------------------------------------------- */
.pg-33 .p33-title {
    left: 0; top: 0; right: 0;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.pg-33 .p33-title span { position: absolute; display: block; white-space: nowrap; }
.pg-33 .p33-title .l1 { left: 33px; top: 12px;  font-size: 116px; line-height: 116px; color: var(--navy33); }
.pg-33 .p33-title .l2 { left: 37px; top: 117px; font-size: 116px; line-height: 116px; color: var(--orange33); }
.pg-33 .p33-title .l3 { left: 36px; top: 223px; font-size: 68px;  line-height: 68px;  color: var(--navy33); }
.pg-33 .p33-rule {
    left: 38px; top: 296px;
    width: 300px; height: 2px;
    background: var(--orange33);
    z-index: 3;
}
.pg-33 .p33-strap {
    left: 38px; top: 309px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px; line-height: 18px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--navy33);
    white-space: nowrap;
}
.pg-33 .p33-strap b { color: var(--orange33); font-weight: 700; }

/* --- pill headings ---------------------------------------------------------------- */
.pg-33 .p33-pill {
    margin: 0;
    z-index: 3;
    display: flex; align-items: center;
    background: linear-gradient(100deg, #0B2544, #17416F);
    color: #FFFFFF;
    border-radius: 5px;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-33 .p33-pill--a { left: 32px;  top: 358px; width: 198px; height: 34px; padding-left: 12px; }
.pg-33 .p33-pill--b { left: 966px; top: 492px; width: 250px; height: 34px; padding-left: 22px; }

/* --- WHAT WE COVER list ------------------------------------------------------------ */
.pg-33 .p33-spine {
    left: 100px; top: 436px;
    width: 1.6px; height: 328px;
    background: rgba(120, 116, 106, .35);
    z-index: 2;
}
.pg-33 .p33-lb {
    z-index: 3;
    left: 31px;
    width: 66px; height: 66px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.pg-33 .p33-lb svg { width: 58%; height: 58%; }
.pg-33 .p33-lb--1 { top: 403px; background: radial-gradient(circle at 40% 32%, #17406E, #0A2447); }
.pg-33 .p33-lb--2 { top: 485px; background: radial-gradient(circle at 40% 32%, #7E9E3C, #5C7A26); }
.pg-33 .p33-lb--3 { top: 565px; background: radial-gradient(circle at 40% 32%, #17406E, #0A2447); }
.pg-33 .p33-lb--4 { top: 648px; background: radial-gradient(circle at 40% 32%, #7C5CA8, #56397F); }
.pg-33 .p33-lb--5 { top: 730px; background: radial-gradient(circle at 40% 32%, #2AA3B5, #17798C); }

.pg-33 .p33-lh {
    left: 124px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px; line-height: 16px;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-33 .p33-lh--1 { top: 407px; color: #12305C; }
.pg-33 .p33-lh--2 { top: 493px; color: #5C7A26; }
.pg-33 .p33-lh--3 { top: 577px; color: #12305C; }
.pg-33 .p33-lh--4 { top: 659px; color: #56397F; }
.pg-33 .p33-lh--5 { top: 740px; color: #17798C; }

.pg-33 .p33-lp {
    left: 124px;
    margin: 0;
    z-index: 3;
    font-size: 14px;
    line-height: 16px;
    color: var(--ink33);
}
.pg-33 .p33-lp--1 { top: 428px; }
.pg-33 .p33-lp--2 { top: 512px; }
.pg-33 .p33-lp--3 { top: 596px; }
.pg-33 .p33-lp--4 { top: 678px; }
.pg-33 .p33-lp--5 { top: 759px; }

/* --- LEARNING METHODS list ---------------------------------------------------------- */
.pg-33 .p33-mpanel {
    left: 965px; top: 526px;
    width: 475px; height: 284px;
    z-index: 2;
    background: rgba(249, 248, 245, .95);
}
.pg-33 .p33-mdiv {
    left: 978px;
    width: 458px; height: 1.4px;
    background: rgba(40, 45, 55, .13);
    z-index: 3;
}
.pg-33 .p33-mdiv--1 { top: 601px; }
.pg-33 .p33-mdiv--2 { top: 670px; }
.pg-33 .p33-mdiv--3 { top: 739px; }

.pg-33 .p33-rb {
    z-index: 3;
    left: 978px;
    width: 57px; height: 57px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.pg-33 .p33-rb svg { width: 58%; height: 58%; }
.pg-33 .p33-rb--1 { top: 538px; background: radial-gradient(circle at 40% 32%, #17406E, #0A2447); }
.pg-33 .p33-rb--2 { top: 608px; background: radial-gradient(circle at 40% 32%, #E9772A, #CE5A10); }
.pg-33 .p33-rb--3 { top: 677px; background: radial-gradient(circle at 40% 32%, #5C9438, #3F7020); }
.pg-33 .p33-rb--4 { top: 745px; background: radial-gradient(circle at 40% 32%, #7C5CA8, #56397F); }

.pg-33 .p33-rh {
    left: 1054px;
    margin: 0;
    z-index: 3;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px; line-height: 17px;
    color: #1E2A3A;
    white-space: nowrap;
}
.pg-33 .p33-rh--1 { top: 543px; }
.pg-33 .p33-rh--2 { top: 613px; }
.pg-33 .p33-rh--3 { top: 683px; }
.pg-33 .p33-rh--4 { top: 751px; }

.pg-33 .p33-rp {
    left: 1054px;
    margin: 0;
    z-index: 3;
    font-size: 14px;
    line-height: 16px;
    color: #3A3F48;
}
.pg-33 .p33-rp--1 { top: 563px; }
.pg-33 .p33-rp--2 { top: 633px; }
.pg-33 .p33-rp--3 { top: 702px; }
.pg-33 .p33-rp--4 { top: 770px; }

/* --- the competence wheel ------------------------------------------------------------ */
.pg-33 .p33-wheel {
    left: 0; top: 0;
    width: 1440px; height: 810px;
    z-index: 4;
    overflow: visible;
}
.pg-33 .wh-ring { fill: none; stroke: rgba(30, 55, 90, .35); stroke-width: 1.6; }
.pg-33 .wh-seg  { stroke: none; }
.pg-33 .wh-seg.s1 { fill: #1A4670; }
.pg-33 .wh-seg.s2 { fill: #DE6103; }
.pg-33 .wh-seg.s3 { fill: #669239; }
.pg-33 .wh-seg.s4 { fill: #096897; }
.pg-33 .wh-seg.s5 { fill: #55427C; }
.pg-33 .wh-seg.s6 { fill: #5A9C9A; }
.pg-33 .wh-dot.s1f { fill: #1A4670; }
.pg-33 .wh-dot.s2f { fill: #DE6103; }
.pg-33 .wh-dot.s3f { fill: #669239; }
.pg-33 .wh-dot.s4f { fill: #096897; }
.pg-33 .wh-dot.s5f { fill: #55427C; }
.pg-33 .wh-dot.s6f { fill: #5A9C9A; }
.pg-33 .wh-ic  { fill: #FFFFFF; }
.pg-33 .wh-lab {
    fill: #FFFFFF;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    text-anchor: middle;
}
.pg-33 .wh-hub {
    fill: #FBFAF7;
    stroke: #E3DFD6;
    stroke-width: 3;
    filter: drop-shadow(0 4px 10px rgba(30, 40, 60, .18));
}
.pg-33 .wh-glyph { fill: #12305C; }
.pg-33 .wh-hub-t {
    fill: #12305C;
    font-family: "Archivo", "Inter", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .01em;
    text-anchor: middle;
}
.pg-33 .wh-hub-t.t1 { font-size: 26px; }
.pg-33 .wh-hub-t.t2 { font-size: 26px; }
.pg-33 .wh-hub-t.t3 { font-size: 26px; }

/* ==========================================================================
   PAGE 34 · ENGINEERING 2D (LAYOUT, P&ID) & 3D DRAWINGS        Template P
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-34 .tP {
    --g-deep:  #0C2A0E;   /* title, sampled                                   */
    --g-pill:  #14360A;   /* pill / caption fill, sampled                     */
    --g-head:  #2A4A22;   /* entry headings + icon line art                   */
    --ink34:   #4B4B4B;   /* body copy                                        */
    background: #FCFCFC;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

.pg-34 .ln { display: block; white-space: nowrap; }
.pg-34 i.fit { font-style: normal; }

/* --- outer page card -------------------------------------------------------- */
.pg-34 .tP-page-card {
    position: absolute;
    left: 34px; top: 40px;
    width: 1376px; height: 800px;
    background: #FEFEFE;
    border: 1px solid #F0F0EE;
    border-radius: 26px;
}

/* --- leaf sprigs ------------------------------------------------------------ */
.pg-34 .tP-leaf { position: absolute; }
.pg-34 .tP-leaf--l { left: 56px;   top: 42px; width: 96px;  height: 90px; }
.pg-34 .tP-leaf--r { left: 1279px; top: 45px; width: 127px; height: 118px; }

/* --- two-line centred display title ----------------------------------------
   Line 1 ink x 320-1187 with a 49px cap height; line 2 ink x 204-1270 with a
   51px cap height. Each line is placed on its measured left edge and fitted
   to its measured width.
-------------------------------------------------------------------------- */
.pg-34 .tP-title {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Oswald",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--g-deep);
}
.pg-34 .tP-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
}
.pg-34 .tP-title .l1 { left: 320px; top: 14px;   font-size: 70px;   line-height: 100px; }
.pg-34 .tP-title .l2 { left: 204px; top: 74.9px; font-size: 72.9px; line-height: 100px; }

/* --- rule with round terminals ---------------------------------------------- */
.pg-34 .tP-rule {
    position: absolute;
    left: 72px; top: 170px;
    width: 1301px; height: 4px;
    background: linear-gradient(180deg,
        rgba(140,150,140,0) 0%, rgba(120,132,120,.55) 32%,
        #6E7A6E 52%, rgba(140,150,140,.30) 78%, rgba(140,150,140,0) 100%);
}
.pg-34 .tP-rule-dot {
    position: absolute;
    top: 167px;
    width: 11.5px; height: 11.5px;
    border-radius: 50%;
    background: #16350D;
}
.pg-34 .tP-rule-dot--l { left: 66.5px; }
.pg-34 .tP-rule-dot--r { left: 1367px; }

/* --- dark-green pill sub-headings -------------------------------------------- */
.pg-34 .tP-pill {
    position: absolute;
    left: 173.5px;
    width: 214px; height: 31.5px;
    margin: 0;
    border-radius: 999px;
    background: var(--g-pill);
    color: #fff;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 18.3px;
    line-height: 31.5px;
    letter-spacing: .01em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.pg-34 .tP-pill--1 { top: 196.8px; }
.pg-34 .tP-pill--2 { top: 523.2px; }

/* --- left-column entries ------------------------------------------------------ */
.pg-34 .tP-entry { position: absolute; left: 0; right: 0; }
.pg-34 .tP-entry--1 { top: 0; }
.pg-34 .tP-entry--2 { top: 0; }
.pg-34 .tP-entry--3 { top: 0; }
.pg-34 .tP-entry--4 { top: 0; }

.pg-34 .tP-ico {
    position: absolute;
    left: 85px;
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 1.8px solid #55694F;
    display: grid;
    place-items: center;
}
.pg-34 .tP-ico svg {
    width: 56px; height: 56px;
    fill: none;
    stroke: var(--g-head);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pg-34 .tP-entry--1 .tP-ico { top: 246.5px; }
.pg-34 .tP-entry--2 .tP-ico { top: 387.5px; }
.pg-34 .tP-entry--3 .tP-ico { top: 568.5px; }
.pg-34 .tP-entry--4 .tP-ico { top: 677.5px; }

.pg-34 .tP-h {
    position: absolute;
    left: 199.5px;
    margin: 0;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 21.5px;
    line-height: 26px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--g-head);
}
.pg-34 .tP-entry--1 .tP-h { top: 250.6px; }
.pg-34 .tP-entry--2 .tP-h { top: 382.3px; }
.pg-34 .tP-entry--3 .tP-h { top: 571.3px; }
.pg-34 .tP-entry--4 .tP-h { top: 687.8px; }

.pg-34 .tP-p {
    position: absolute;
    left: 199.5px;
    margin: 0;
    font-size: 18.6px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--ink34);
}
.pg-34 .tP-entry--1 .tP-p { top: 279.6px; }
.pg-34 .tP-entry--2 .tP-p { top: 410.3px; }
.pg-34 .tP-entry--3 .tP-p { top: 599.3px; }
.pg-34 .tP-entry--4 .tP-p { top: 717.3px; }

/* --- hairline dividers between entries, fading at both ends ------------------- */
.pg-34 .tP-div {
    position: absolute;
    left: 158px;
    width: 368px; height: 2.4px;
    background: linear-gradient(90deg,
        rgba(226,226,224,0) 0%, #E2E2E0 12%, #E2E2E0 88%, rgba(226,226,224,0) 100%);
}
.pg-34 .tP-div--1 { top: 365.4px; }
.pg-34 .tP-div--2 { top: 675.4px; }

/* --- thumbnail panel ---------------------------------------------------------- */
.pg-34 .tP-panel {
    position: absolute;
    left: 519px; top: 199px;
    width: 862px; height: 584px;
    background: #F8F9F3;
    border: 1px solid #EDEEE8;
    border-radius: 22px;
}

/* --- the four drawing thumbnails ---------------------------------------------- */
.pg-34 .tP-thumb {
    position: absolute;
    margin: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #F1F1EF;
}
.pg-34 .tP-thumb img {
    position: absolute;
    left: 0;
    width: 100%;
    display: block;
}
.pg-34 .tP-thumb--1 { left: 564px; top: 240px; width: 375px; height: 241px; }
.pg-34 .tP-thumb--2 { left: 955px; top: 240px; width: 404px; height: 241px; }
.pg-34 .tP-thumb--3 { left: 564px; top: 530px; width: 375px; height: 243px; }
.pg-34 .tP-thumb--4 { left: 955px; top: 530px; width: 404px; height: 243px; }

.pg-34 .tP-thumb--1 img,
.pg-34 .tP-thumb--2 img { top: 0;   height: 241px; }
.pg-34 .tP-thumb--3 img,
.pg-34 .tP-thumb--4 img { top: 4px; height: 239px; }

/* caption pills, straddling the top edge of each card */
.pg-34 .tP-cap {
    position: absolute;
    height: 30px;
    border-radius: 999px;
    background: var(--g-pill);
    color: #fff;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 16.4px;
    line-height: 30px;
    letter-spacing: .01em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 3;
}
/* the caption sits outside its card, so it is positioned on the stage */
.pg-34 .tP-thumb { overflow: visible; }
.pg-34 .tP-thumb img { border-radius: 11px; }
.pg-34 .tP-thumb--1 .tP-cap { left: 102.5px; top: -34px; width: 159px; }
.pg-34 .tP-thumb--2 .tP-cap { left: 117.5px; top: -34px; width: 117px; }
.pg-34 .tP-thumb--3 .tP-cap { left: 68px;    top: -25px; width: 220px; height: 27px; line-height: 27px; }
.pg-34 .tP-thumb--4 .tP-cap { left: 112px;   top: -25px; width: 146px; height: 27px; line-height: 27px; }

/* --- top edge of the next card, cut off by the page bottom -------------------- */
.pg-34 .tP-next-card {
    position: absolute;
    left: 72px; top: 802px;
    width: 1316px; height: 60px;
    background: #F8F9F3;
    border: 1.4px solid #E4E5E0;
    border-radius: 20px;
}

/* ==========================================================================
   PAGE 35 · 3D MODELING                                        Template C
   All coordinates measured from the 1440 x 810 source page.
   ========================================================================== */

.pg-35 .tC {
    --navy35:  #0D2F50;
    --green35: #4A7A20;
    --ink35:   #4E4E4E;
    background: #F8F8F8;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

.pg-35 .ln { display: block; white-space: nowrap; }
.pg-35 i.fit { font-style: normal; }

/* --- blueprint wash and the plant render ------------------------------------
   The render bleeds off the top and right edges; the wash meets the white
   left area on a soft diagonal. Everything above y 418 is one extracted
   raster; below it only a faint residue of the wash remains, carried by a
   CSS gradient behind the benefit row.
-------------------------------------------------------------------------- */
.pg-35 .tC-render {
    position: absolute;
    left: 620px; top: 0;
    width: 820px; height: 438px;
    z-index: 1;
}
.pg-35 .tC-wash {
    position: absolute;
    left: 900px; top: 425px;
    width: 540px; height: 55px;
    background: radial-gradient(ellipse 290px 45px at 68% 0%,
        rgba(206,213,216,.70) 0%, rgba(228,232,234,.30) 55%, rgba(232,236,238,0) 80%);
    z-index: 0;
}

/* --- two-tone display title -------------------------------------------------
   "3D" ink x 40-174 with a 102px cap height, "MODELING" ink x 218-700 with a
   94px cap height - the two words are set at slightly different sizes in the
   source, so each is placed and fitted on its own.
-------------------------------------------------------------------------- */
.pg-35 .tC-title {
    position: absolute;
    left: 0; top: 0;
    z-index: 3;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Oswald",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-35 .tC-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    line-height: 150px;
}
.pg-35 .tC-title .l1 { left: 37px;  top: 49px; font-size: 145.7px; color: var(--navy35); }
.pg-35 .tC-title .l2 { left: 213px; top: 51px; font-size: 134.3px; color: var(--green35); }

/* --- navy-to-green rule ------------------------------------------------------ */
.pg-35 .tC-rule {
    position: absolute;
    left: 40px; top: 217px;
    width: 536px; height: 6px;
    z-index: 3;
    background: linear-gradient(90deg,
        #1C2C46 0%, #1C2C46 28%, #3E5A4A 48%, #59764A 62%,
        #617E46 78%, rgba(120,140,90,.40) 92%, rgba(140,160,110,0) 100%);
}

/* --- lede -------------------------------------------------------------------- */
.pg-35 .tC-lede {
    position: absolute;
    left: 40px; top: 246px;
    z-index: 3;
    margin: 0;
    font-size: 32px;
    line-height: 43px;
    letter-spacing: 0;
    color: var(--ink35);
}
.pg-35 .tC-lede strong { font-weight: 700; color: var(--navy35); }

/* --- benefit row ------------------------------------------------------------- */
.pg-35 .tC-steps { position: absolute; inset: 0; z-index: 3; display: block; }
.pg-35 .tC-step  { position: absolute; text-align: center; padding: 0; }
.pg-35 .tC-step::before { content: none; }

.pg-35 .tC-step--1 { left: -2.5px; width: 332px; }
.pg-35 .tC-step--2 { left: 265.5px; width: 332px; }
.pg-35 .tC-step--3 { left: 544px; width: 332px; }
.pg-35 .tC-step--4 { left: 824.5px; width: 332px; }
.pg-35 .tC-step--5 { left: 1118px; width: 332px; }

.pg-35 .tC-step .badge {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -53.5px;
    --bs: 107px;
    box-shadow: none;
}
.pg-35 .tC-step .badge svg {
    width: 58px; height: 58px;
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pg-35 .tC-step .badge--solid svg { fill: #fff; stroke: none; }

.pg-35 .tC-step--1 .badge { top: 419px; --bf: var(--navy35); }
.pg-35 .tC-step--2 .badge { top: 422px; --bf: var(--green35); }
.pg-35 .tC-step--3 .badge { top: 421px; --bf: var(--navy35); }
.pg-35 .tC-step--4 .badge { top: 424px; --bf: var(--green35); }
.pg-35 .tC-step--5 .badge { top: 421px; --bf: var(--navy35); }

.pg-35 .tC-step-label {
    position: absolute;
    left: 0; right: 0; top: 548.7px;
    margin: 0;
    font-family: "Archivo", "Inter", "Liberation Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 33px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-35 .tC-step--1 .tC-step-label,
.pg-35 .tC-step--3 .tC-step-label,
.pg-35 .tC-step--5 .tC-step-label { color: var(--navy35); }
.pg-35 .tC-step--2 .tC-step-label,
.pg-35 .tC-step--4 .tC-step-label { color: var(--green35); }

.pg-35 .tC-step-rule {
    position: absolute;
    left: 50%; top: 632px;
    width: 57px; height: 5px;
    margin-left: -28.5px;
}
.pg-35 .tC-step--1 .tC-step-rule,
.pg-35 .tC-step--3 .tC-step-rule,
.pg-35 .tC-step--5 .tC-step-rule { background: var(--navy35); }
.pg-35 .tC-step--2 .tC-step-rule,
.pg-35 .tC-step--4 .tC-step-rule { background: var(--green35); }

.pg-35 .tC-step-desc {
    position: absolute;
    left: 0; right: 0; top: 656.5px;
    margin: 0;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 0;
    color: var(--ink35);
}

/* --- vertical hairline dividers ---------------------------------------------- */
.pg-35 .tC-div {
    position: absolute;
    top: 447px;
    width: 1px; height: 304px;
    background: #E4E4E4;
    z-index: 2;
}
.pg-35 .tC-div--1 { left: 289px; }
.pg-35 .tC-div--2 { left: 569px; }
.pg-35 .tC-div--3 { left: 851px; }
.pg-35 .tC-div--4 { left: 1131px; }

/* ==========================================================================
   PAGE 36 · 3D INDUSTRIAL ANIMATION                            Template K
   All coordinates measured from the 1440 x 810 source page.
   The collage is one raster clipped to the panel outline traced off the
   source: a straight diagonal from (730,0) to (426,700) and a chamfered
   bottom-left corner running out to (536,810).
   ========================================================================== */

.pg-36 .tK {
    --ink36:   #333333;
    --green36: #186A1D;
    --ring36:  #3F7A44;
    background: #FEFEFE;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

.pg-36 i.fit { font-style: normal; }

/* --- halftone dot grids ------------------------------------------------------ */
.pg-36 .tK-dots {
    position: absolute;
    background-image: radial-gradient(#3F8C43 2.4px, rgba(63,140,67,0) 2.9px);
    background-size: 11.9px 11.9px;
    background-position: 2px 2px;
}
.pg-36 .tK-dots--tl {
    left: 0; top: 0; width: 146px; height: 119px;
    -webkit-mask-image: linear-gradient(115deg, #000 8%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 96%);
    mask-image: linear-gradient(115deg, #000 8%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 96%);
}
.pg-36 .tK-dots--bl {
    left: 0; top: 680px; width: 128px; height: 130px;
    -webkit-mask-image: linear-gradient(60deg, #000 10%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 96%);
    mask-image: linear-gradient(60deg, #000 10%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 96%);
}

/* --- two-line display title --------------------------------------------------
   Line 1 ink x 49-623 with a 70px cap height; line 2 ink x 47-595 with an
   81px cap height - the second line is set larger in the source.
-------------------------------------------------------------------------- */
.pg-36 .tK-title {
    position: absolute;
    left: 0; top: 0;
    z-index: 3;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Oswald",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.pg-36 .tK-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    line-height: 120px;
}
.pg-36 .tK-title .l1 { left: 50px; top: 69px;  font-size: 99px;   color: #0D0D0D; }
.pg-36 .tK-title .l2 { left: 48px; top: 149px; font-size: 114.4px; color: var(--green36); }

/* --- green flare rule under the title ---------------------------------------- */
.pg-36 .tK-flare {
    position: absolute;
    left: 30px; top: 271px;
    width: 578px; height: 20px;
    z-index: 2;
    background:
        radial-gradient(ellipse 62px 9px at 288px 10px, rgba(255,255,255,.95) 0%, rgba(190,240,190,.55) 45%, rgba(190,240,190,0) 100%),
        radial-gradient(ellipse 250px 8px at 288px 10px, rgba(90,190,90,.42) 0%, rgba(90,190,90,0) 100%),
        linear-gradient(90deg,
            rgba(60,160,60,0) 0%, rgba(60,160,60,.55) 12%,
            #3FAE43 42%, #6FE07A 50%, #3FAE43 58%,
            rgba(60,160,60,.55) 88%, rgba(60,160,60,0) 100%) 0 9px / 100% 2.4px no-repeat;
}

/* --- feature list ------------------------------------------------------------- */
.pg-36 .tK-rows { position: absolute; inset: 0; z-index: 3; margin: 0; }
.pg-36 .tK-row  { position: absolute; left: 0; display: block; margin: 0; }

.pg-36 .tK-row .badge {
    position: absolute;
    left: 49px;
    --bs: 77px;
    --bf: var(--ring36);
    border-width: 1.7px;
    box-shadow: none;
    background: transparent;
}
.pg-36 .tK-row .badge svg {
    width: 41px; height: 41px;
    fill: #0F0F0F;
    stroke: none;
}

.pg-36 .tK-label {
    position: absolute;
    left: 148px;
    margin: 0;
    font-size: 27px;
    line-height: 36px;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--ink36);
}

.pg-36 .tK-row--1 .badge { top: 312px; }
.pg-36 .tK-row--2 .badge { top: 401px; }
.pg-36 .tK-row--3 .badge { top: 489.5px; }
.pg-36 .tK-row--4 .badge { top: 578.5px; }
.pg-36 .tK-row--5 .badge { top: 668.5px; }

.pg-36 .tK-row--1 .tK-label { top: 330px; }
.pg-36 .tK-row--2 .tK-label { top: 420px; }
.pg-36 .tK-row--3 .tK-label { top: 508px; }
.pg-36 .tK-row--4 .tK-label { top: 597px; }
.pg-36 .tK-row--5 .tK-label { top: 687px; }

/* --- dotted separators, shortened to clear the collage edge ------------------- */
.pg-36 .tK-sep {
    position: absolute;
    left: 145px; height: 1.6px;
    z-index: 3;
    background: repeating-linear-gradient(90deg,
        #8E9C8E 0 3px, rgba(142,156,142,0) 3px 5.8px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
}
.pg-36 .tK-sep--1 { top: 394px; width: 329px; }
.pg-36 .tK-sep--2 { top: 483px; width: 327px; }
.pg-36 .tK-sep--3 { top: 572px; width: 328px; }
.pg-36 .tK-sep--4 { top: 661px; width: 286px; }

/* --- diagonal photo collage --------------------------------------------------- */
.pg-36 .tK-collage-img {
    position: absolute;
    left: 381px; top: 1px;
    width: 1060px; height: 810px;
    z-index: 1;
    clip-path: polygon(
        350px 0, 1060px 0, 1060px 810px,
        156px 810px, 142px 800px, 110px 780px, 83px 760px,
        57px 740px, 46px 720px, 46px 700px);
}

/* ==========================================================================
   PAGE 37 · SAFETY TRAINING ANIMATION                          Template K
   All coordinates measured from the 1440 x 810 source page.

   The collage is cut by two parallel diagonal gutters, both 12px wide:
       gutter A (page boundary)  x = 676.0  - 0.430 * y
       gutter B (collage gutter) x = 1156.5 - 0.392 * y
   and by three horizontal gutters at y 529-538, 291-301 and 551-561.
   Every cell polygon below is derived from those four lines.
   ========================================================================== */

.pg-37 .tK {
    --g37:    #052307;          /* gutter / collage backing green, sampled   */
    --badge37:#06230A;          /* solid icon badge fill                     */
    --ink37:  #131313;          /* row labels                                */
    --ttl37:  #022006;          /* display title                             */
    --dot37:  #0E2A12;          /* halftone dots                             */
    background: #EDEDED;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

.pg-37 i.fit { font-style: normal; }

/* --- halftone dot fans -------------------------------------------------------
   A solid corner blob dissolving into a 10px halftone that fades out along a
   radial ramp - two masked dot layers over the blob, as on page 20.
-------------------------------------------------------------------------- */
.pg-37 .tK-dots { position: absolute; z-index: 1; }
.pg-37 .tK-dots::before,
.pg-37 .tK-dots::after {
    content: "";
    position: absolute;
    inset: 0;
    /* the halftone sits on a 45-degree lattice: two offset square grids */
    background-size: 8.6px 8.6px, 8.6px 8.6px;
    background-position: 0 0, 4.3px 4.3px;
}

.pg-37 .tK-dots--tl {
    left: 0; top: 0; width: 200px; height: 172px;
    background: radial-gradient(146px 126px at -8px -10px,
        var(--dot37) 0 66%, rgba(14,42,18,.62) 84%, rgba(14,42,18,.18) 96%, rgba(14,42,18,0) 100%);
}
.pg-37 .tK-dots--tl::before {
    background-image:
        radial-gradient(circle, var(--dot37) 37%, rgba(0,0,0,0) 44%),
        radial-gradient(circle, var(--dot37) 37%, rgba(0,0,0,0) 44%);
    -webkit-mask-image: radial-gradient(168px 144px at -8px -10px,
        #000 0 52%, rgba(0,0,0,.78) 72%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(168px 144px at -8px -10px,
        #000 0 52%, rgba(0,0,0,.78) 72%, rgba(0,0,0,0) 100%);
}
.pg-37 .tK-dots--tl::after {
    background-image:
        radial-gradient(circle, var(--dot37) 16%, rgba(0,0,0,0) 23%),
        radial-gradient(circle, var(--dot37) 16%, rgba(0,0,0,0) 23%);
    -webkit-mask-image: radial-gradient(199px 166px at -6px -8px,
        rgba(0,0,0,0) 40%, rgba(0,0,0,.9) 60%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(199px 166px at -6px -8px,
        rgba(0,0,0,0) 40%, rgba(0,0,0,.9) 60%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
}

.pg-37 .tK-dots--bl {
    left: 0; top: 686px; width: 162px; height: 124px;
    background: radial-gradient(76px 60px at -8px 128px,
        var(--dot37) 0 60%, rgba(14,42,18,.6) 82%, rgba(14,42,18,.16) 96%, rgba(14,42,18,0) 100%);
}
.pg-37 .tK-dots--bl::before {
    background-image:
        radial-gradient(circle, var(--dot37) 36%, rgba(0,0,0,0) 43%),
        radial-gradient(circle, var(--dot37) 36%, rgba(0,0,0,0) 43%);
    -webkit-mask-image: radial-gradient(124px 98px at -8px 128px,
        #000 0 48%, rgba(0,0,0,.72) 72%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(124px 98px at -8px 128px,
        #000 0 48%, rgba(0,0,0,.72) 72%, rgba(0,0,0,0) 100%);
}
.pg-37 .tK-dots--bl::after {
    background-image:
        radial-gradient(circle, var(--dot37) 15%, rgba(0,0,0,0) 22%),
        radial-gradient(circle, var(--dot37) 15%, rgba(0,0,0,0) 22%);
    -webkit-mask-image: radial-gradient(152px 122px at -6px 126px,
        rgba(0,0,0,0) 38%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.42) 80%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(152px 122px at -6px 126px,
        rgba(0,0,0,0) 38%, rgba(0,0,0,.85) 58%, rgba(0,0,0,.42) 80%, rgba(0,0,0,0) 100%);
}

/* --- two-line display title --------------------------------------------------
   Line 1 ink x 60-545 with a 67px cap height; line 2 ink x 57-479 with an
   80px cap height - the second line is set larger in the source.
-------------------------------------------------------------------------- */
.pg-37 .tK-title {
    position: absolute;
    left: 0; top: 0;
    z-index: 3;
    margin: 0;
    font-family: "Barlow Condensed", "Archivo Narrow", "Oswald",
                 "Arial Narrow", sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ttl37);
}
.pg-37 .tK-title span {
    position: absolute;
    display: block;
    white-space: nowrap;
    line-height: 120px;
    color: var(--ttl37);
}
.pg-37 .tK-title .l1 { left: 62px; top: 89.7px;  font-size: 94.7px; }
.pg-37 .tK-title .l2 { left: 61px; top: 189.6px; font-size: 113px; }

/* --- rule broken by the shield badge ------------------------------------------ */
.pg-37 .tK-rule {
    position: absolute;
    top: 333px; height: 2px;
    z-index: 3;
    background: #404740;
}
.pg-37 .tK-rule--l { left: 57px;  width: 165px; }
.pg-37 .tK-rule--r { left: 299px; width: 181px; }

.pg-37 .tK-shield {
    position: absolute;
    left: 241px; top: 313px;
    width: 39px; height: 48px;
    z-index: 3;
}

/* --- five feature rows --------------------------------------------------------- */
.pg-37 .tK-rows { position: absolute; inset: 0; z-index: 3; margin: 0; }
.pg-37 .tK-row  { position: absolute; left: 0; right: 0; display: block; margin: 0; }

.pg-37 .tK-row .badge {
    position: absolute;
    left: 52.5px;
    --bs: 62px;
    --bf: var(--badge37);
    box-shadow: none;
}
.pg-37 .tK-row .badge svg { width: 74%; height: 74%; fill: #fff; stroke: none; }

.pg-37 .tK-bullet {
    position: absolute;
    left: 130px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #0B2A0E;
}

.pg-37 .tK-label {
    position: absolute;
    left: 162px;
    margin: 0;
    font-size: 21.5px;
    line-height: 30px;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--ink37);
}

.pg-37 .tK-row--1 .badge { top: 360.5px; }
.pg-37 .tK-row--2 .badge { top: 437px; }
.pg-37 .tK-row--3 .badge { top: 511.5px; }
.pg-37 .tK-row--4 .badge { top: 586px; }
.pg-37 .tK-row--5 .badge { top: 660.5px; }

.pg-37 .tK-row--1 .tK-bullet { top: 386px; }
.pg-37 .tK-row--2 .tK-bullet { top: 463.5px; }
.pg-37 .tK-row--3 .tK-bullet { top: 537.5px; }
.pg-37 .tK-row--4 .tK-bullet { top: 612.5px; }
.pg-37 .tK-row--5 .tK-bullet { top: 686.5px; }

.pg-37 .tK-row--1 .tK-label { top: 376.8px; }
.pg-37 .tK-row--2 .tK-label { top: 454.8px; }
.pg-37 .tK-row--3 .tK-label { top: 528.8px; }
.pg-37 .tK-row--4 .tK-label { top: 603.8px; }
.pg-37 .tK-row--5 .tK-label { top: 677.8px; }

/* --- dotted separators --------------------------------------------------------- */
.pg-37 .tK-sep {
    position: absolute;
    left: 130px; height: 2px;
    z-index: 3;
    background: repeating-linear-gradient(90deg,
        #BCBCBC 0 2px, rgba(188,188,188,0) 2px 5px);
}
.pg-37 .tK-sep--1 { top: 431px; width: 306px; }
.pg-37 .tK-sep--2 { top: 505px; width: 303px; }
.pg-37 .tK-sep--3 { top: 581px; width: 274px; }
.pg-37 .tK-sep--4 { top: 655px; width: 242px; }

/* --- diagonal photo collage ------------------------------------------------------
   The backing panel supplies the dark-green gutters; each photograph is laid
   at its own crop rectangle and clipped back to the measured cell polygon.
-------------------------------------------------------------------------- */
.pg-37 .tK-collage {
    position: absolute;
    left: 0; top: 0; right: auto; bottom: auto;
    width: 1440px; height: 810px;
    z-index: 2;
}
.pg-37 .tK-gutter {
    position: absolute;
    inset: 0;
    background: var(--g37);
    clip-path: polygon(676px 0, 1440px 0, 1440px 810px, 327.7px 810px);
}
.pg-37 .tK-cell { position: absolute; }
.pg-37 .tK-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* a · training talk  (bleeds off the top) */
.pg-37 .tK-cell--a {
    left: 446px; top: 1px; width: 715px; height: 535px;
    clip-path: polygon(242px -1px, 710.5px -1px, 503.2px 528px, 14.5px 528px);
}
/* b · grinding + WEAR YOUR PPE sign, clipped by the right page edge */
.pg-37 .tK-cell--b {
    left: 1046px; top: 1px; width: 395px; height: 296px;
    clip-path: polygon(122.5px -1px, 395px -1px, 395px 290px, 8.4px 290px);
}
/* c · wet floor */
.pg-37 .tK-cell--c {
    left: 946px; top: 297px; width: 495px; height: 260px;
    clip-path: polygon(104.5px 4px, 495px 4px, 495px 254px, 6.5px 254px);
}
/* d · extinguisher drill */
.pg-37 .tK-cell--d {
    left: 331px; top: 534px; width: 620px; height: 277px;
    clip-path: polygon(125.7px 4px, 614.6px 4px, 507.9px 276px, 8.7px 276px);
}
/* e · first aid */
.pg-37 .tK-cell--e {
    left: 841px; top: 557px; width: 600px; height: 254px;
    clip-path: polygon(107.6px 4px, 600px 4px, 600px 253px, 9.9px 253px);
}

/* ==========================================================================
   PAGE 38 · FIRE SAFETY LEARNING BOARD                         Template Q
   All coordinates measured from the 1440 x 810 source page.

   Hybrid build (client instruction): frame, title stack and the three
   bilingual panel headings are live HTML; everything below y=232 - the
   dense product-photo grid, the fire triangle, the PASS strip and the
   micro-captions - is the original board raster, contained, never upscaled.

   Measured:
     title  "FIRE SAFETY"   x 572-913 (w 342)  cap y 16-62  (cap h 47)
     Hindi  subtitle        x 460-1003 (w 544) y 69-103
     strapline              x 411-1041 (w 631) cap y 113-127
     cards  x 32-302 / 310-1030 / 1056-1400, top border y 143,
            head separator y 230
     banner x 333-1007, y 158-220
     circles 67px at (48,156) and (1067,154); ring circle 72px at (423,154)
   ========================================================================== */

.pg-38 .tQ {
    --grn38:  #2C4A1E;          /* display green, sampled off the title      */
    --pill38: #324C1F;          /* banner fill, sampled flat                 */
    --ink38:  #26301F;          /* panel heading text                        */
    --line38: #CBCEC4;          /* card hairline                             */
    background: #F8F9F3;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* The board bleeds to the page edge - no green frame on this one. */
.pg-38 .tQ-frame {
    inset: 0;
    border: 0;
    border-radius: 0;
    background: #F8F9F3;
}

/* --- title stack ---------------------------------------------------------- */
.pg-38 .tQ-titlebar {
    top: 0;
    padding: 0;
    background: none;
    color: var(--grn38);
    height: 142px;
}
.pg-38 .tQ-titlebar h2 {
    position: absolute;
    left: 45px;                 /* centres the line on x 742.5               */
    right: 0;
    top: 9px;
    font-family: var(--f-head);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--grn38);
}
.pg-38 .tQ-titlebar .hi {
    position: absolute;
    left: 23px;                 /* centres on x 731.5                        */
    right: 0;
    top: 74px;
    margin: 0;
    font-size: 29.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--grn38);
}
.pg-38 .tQ-titlebar .en {
    position: absolute;
    left: 12px;                 /* centres on x 726                          */
    right: 0;
    top: 110px;
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #3A3A3A;
}

/* --- panel cards ---------------------------------------------------------- */
.pg-38 .tQ-card {
    position: absolute;
    top: 143px;
    height: 88px;
    background: #F7F8F2;
    border: 1px solid var(--line38);
    border-bottom: 1px solid #E2E4DC;
    border-radius: 11px 11px 0 0;
    z-index: 1;
}
.pg-38 .tQ-card--1 { left: 32px;   width: 269px; }
.pg-38 .tQ-card--2 { left: 310px;  width: 719px; }
.pg-38 .tQ-card--3 { left: 1056px; width: 343px; }

/* --- panel headings -------------------------------------------------------
   Each line is placed on its own measured centre. The boxes are deliberately
   wider than the text so the .fit scale stays centred (an inline-block that
   overflows its line box is left-aligned, not centred).
-------------------------------------------------------------------------- */
.pg-38 .tQ-head { position: absolute; inset: 0; z-index: 3; }
.pg-38 .tQ-head h3 { position: static; }
.pg-38 .tQ-head i.fit { font-style: normal; }
.pg-38 .tQ-titlebar i.fit { font-style: normal; }
.pg-38 .tQ-head .hi,
.pg-38 .tQ-head .en {
    position: absolute;
    width: 300px;
    text-align: center;
    line-height: 1;
    color: var(--ink38);
}
.pg-38 .tQ-head .hi { font-size: 24px; font-weight: 700; }
.pg-38 .tQ-head .en { font-family: var(--f-head); font-size: 17px; font-weight: 700; }

.pg-38 .tQ-icon { position: absolute; z-index: 3; }
.pg-38 .tQ-head--1 .tQ-icon { left: 46px; top: 153px; width: 72px; height: 72px; }
.pg-38 .tQ-head--3 .tQ-icon { left: 1064px; top: 151px; width: 72px; height: 72px; }
.pg-38 .tQ-icon--ext { left: 421px; top: 152px; width: 78px; height: 78px; }

.pg-38 .tQ-head--1 .hi { left: 50px;   top: 166px; }   /* centre x 200 */
.pg-38 .tQ-head--1 .en { left: 53px;   top: 197px; }   /* centre x 203 */

.pg-38 .tQ-head--2 .hi { left: 552px;  top: 165px; }   /* centre x 702 */
.pg-38 .tQ-head--2 .en { left: 552px;  top: 194px; }
.pg-38 .tQ-head--2 .hi,
.pg-38 .tQ-head--2 .en { color: #FFFFFF; }

.pg-38 .tQ-head--3 .hi { left: 1104px; top: 161px; }   /* centre x 1254 */
.pg-38 .tQ-head--3 .en { left: 1104px; top: 192px; }

/* --- centre banner -------------------------------------------------------- */
.pg-38 .tQ-banner {
    position: absolute;
    left: 334px;
    top: 159px;
    width: 674px;
    height: 60px;
    background: var(--pill38);
    border-radius: 7px;
    z-index: 2;
}

/* --- board interior ------------------------------------------------------- */
.pg-38 .tQ-interior {
    top: 232px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F8F9F3;
    z-index: 0;
}

/* ==========================================================================
   PAGE 39 · NOISE POLLUTION LEARNING BOARD                     Template Q
   All coordinates measured from the 1440 x 810 source page.

   Hybrid build (client instruction): the outer green rule, the white title
   band and the display heading are live HTML; the three-column interior is
   the original board raster, contained, never upscaled.

   Measured:
     outer green rule   x 10..1430, y 12..800, 4px stroke   #0F5A15
     title-band rule    y 91..92, 2px                       #5B8C4F
     column rules       x 444..446 and x 934..937 (inside the interior image)
     H1                 x 261..1197 (w 937), cap y 31..78 (cap h 48)
   ========================================================================== */

.pg-39 .tQ {
    --grn39:  #0F5A15;          /* outer rule, sampled                       */
    --ttl39:  #014D0A;          /* display heading                           */
    --rule39: #5B8C4F;          /* title-band underscore                     */
    background: #FFFFFF;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* Board frame: the bright green rectangle. Children below are positioned
   inside its padding box, whose origin is page (14, 16). */
.pg-39 .tQ-frame {
    inset: 12px 10px 10px 10px;
    border: 4px solid var(--grn39);
    border-radius: 0;
    background: #FFFFFF;
}

/* --- title band ----------------------------------------------------------- */
.pg-39 .tQ-titlebar {
    top: 0;
    height: 77px;
    padding: 0;
    background: #FFFFFF;
    border-bottom: 2px solid var(--rule39);
}
.pg-39 .tQ-titlebar h2 {
    position: absolute;
    left: 18px;               /* centres the line on x 729                  */
    right: 0;
    top: 3px;                   /* cap top lands on page y 31                */
    font-family: var(--f-display);
    font-size: 67px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ttl39);
}
.pg-39 .tQ-titlebar i.fit { font-style: normal; }

/* --- board interior ------------------------------------------------------- */
.pg-39 .tQ-interior {
    top: 77px;                  /* page y 93                                  */
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
}

/* ==========================================================================
   PAGE 40 · MAINTENANCE DOJO BOARD                             Template Q
   All coordinates measured from the 1440 x 810 source page.

   Hybrid build (client instruction): the green outer rule, the title band,
   the display heading and the three bilingual column headings are live HTML;
   the item grid below y=156 is the original board raster.

   Measured:
     outer green rule  x 12..1430, y 5..802, 4px stroke
     title rule        y 84..88, 4px
     column rules      x 511..513 and x 949..952
     H1                x 310..1158 (w 849), cap y 17..76 (cap h 60)
     col heads         EN cap y 99..119; HI y 126..150
                       centres x 267 / 729.5 / 1172.5 (EN)
                                x 264.5 / 724 / 1171   (HI)
     item grid starts  y 156

   The page's native raster is 1116 x 636, i.e. smaller than the 1440 x 810
   design stage. The crop is taken at native resolution - nothing is
   resampled up on disk - and the browser scales it to the frame, exactly as
   the source PDF page itself is scaled.
   ========================================================================== */

.pg-40 .tQ {
    --grn40:  #274E27;          /* outer rule, sampled                       */
    --rule40: #315132;          /* title rule                                */
    --vrule40:#3D6440;          /* column rules                              */
    --ttl40:  #014902;          /* display heading                           */
    --head40: #1D4D1E;          /* column headings                           */
    background: #FFFFFF;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* Board frame. Children below sit in its padding box, origin page (16, 9). */
.pg-40 .tQ-frame {
    inset: 5px 10px 8px 12px;
    border: 4px solid var(--grn40);
    border-radius: 0;
    background: #FFFFFF;
}

/* --- title band ----------------------------------------------------------- */
.pg-40 .tQ-titlebar {
    top: 0;
    height: 79px;
    padding: 0;
    background: #FFFFFF;
    border-bottom: 4px solid var(--rule40);
}
.pg-40 .tQ-titlebar h2 {
    position: absolute;
    left: 27px;                 /* centres the line on x 733.5               */
    right: 0;
    top: -7px;
    font-family: var(--f-display);
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ttl40);
}
.pg-40 .tQ-titlebar i.fit,
.pg-40 .tQ-colhead i.fit { font-style: normal; }

/* --- column rules (title rule down to the item grid) ---------------------- */
.pg-40 .tQ-vrule {
    position: absolute;
    top: 79px;                  /* page y 88                                  */
    height: 68px;               /* to page y 156                              */
    width: 3px;
    background: var(--vrule40);
}
.pg-40 .tQ-vrule--1 { left: 495px; }    /* page x 511 */
.pg-40 .tQ-vrule--2 { left: 933px; }    /* page x 949 */

/* --- bilingual column headings -------------------------------------------
   Each line carries its own measured centre; the boxes are wider than the
   text so the .fit scale stays centred.
-------------------------------------------------------------------------- */
.pg-40 .tQ-colhead {
    position: absolute;
    inset: 0;
    color: var(--head40);
    font-weight: 400;
}
.pg-40 .tQ-colhead .en,
.pg-40 .tQ-colhead .hi {
    position: absolute;
    width: 460px;
    text-align: center;
    line-height: 1;
}
.pg-40 .tQ-colhead .en {
    font-family: var(--f-head);
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}
.pg-40 .tQ-colhead .hi { font-size: 23px; font-weight: 700; }

.pg-40 .tQ-colhead--1 .en { left: 21px;    top: 87px; }    /* centre x 267    */
.pg-40 .tQ-colhead--1 .hi { left: 18.5px;  top: 120px; }   /* centre x 264.5  */
.pg-40 .tQ-colhead--2 .en { left: 484px;   top: 87px; }    /* centre x 730    */
.pg-40 .tQ-colhead--2 .hi { left: 478px;   top: 120px; }   /* centre x 724    */
.pg-40 .tQ-colhead--3 .en { left: 926.5px; top: 87px; }    /* centre x 1172.5 */
.pg-40 .tQ-colhead--3 .hi { left: 924.5px; top: 120px; }   /* centre x 1170.5 */

/* --- item grid ------------------------------------------------------------ */
.pg-40 .tQ-interior {
    top: 147px;                 /* page y 156                                 */
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
}
.pg-40 .tQ-interior img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   PAGE 41 · OUR ESTEEMED CLIENTS                               Template R
   All coordinates measured from the 1440 x 810 source page.

   Measured:
     H1 "Our Esteemed Clients"  x 372..1096 (w 725), cap y 72..118
     amber flanking rules       y 92-94 and 99-100, x 293..341 / 1119..1160
     dotted rule                y 141..142, x 519..688 and 764..912,
                                three dots d11 at x 708 / 727.5 / 746
     card columns               x 93 (w 392), 521 (w 399), 953 (w 398)
     card rows                  y 159..231, 240..310, 318..387, 394..463,
                                470..535, 541..609, 616..683, 690..756
     dividers                   x 257.5 / 659.5 / 1107.5, 43px tall
     name text left             x 281 / 684 / 1134, 22px line pitch
     corner swash arc           circle centre (403, 557.5) r 563
   ========================================================================== */

.pg-41 .tR {
    --grn41:  #013A13;          /* corner swash, sampled                     */
    --grn41b: #056E17;          /* swash highlight edge                      */
    --ttl41:  #02280D;          /* display heading                           */
    --amb41:  #E2A63F;          /* flanking rules                            */
    --rule41: #3D6147;          /* dotted rule                               */
    --name41: #3C3C3C;          /* client names                              */
    background: #FBFBFB;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
}

/* --- top-left corner swash ------------------------------------------------
   A dark green corner cut by a very large circular arc, with a mid-green
   highlight band along the arc. Both circles share centre (403, 557.5).
-------------------------------------------------------------------------- */
.pg-41 .tR-swash {
    position: absolute;
    left: 0; top: 0; width: 344px; height: 172px;
    overflow: hidden;
    background: var(--grn41);
    z-index: 1;
}
.pg-41 .tR-swash::before,
.pg-41 .tR-swash::after { content: ""; position: absolute; border-radius: 50%; }
.pg-41 .tR-swash::before {           /* r = 587 -> mid-green band            */
    left: -184px; top: -29.5px; width: 1174px; height: 1174px;
    background: var(--grn41b);
}
.pg-41 .tR-swash::after {            /* r = 563 -> the page                  */
    left: -160px; top: -5.5px; width: 1126px; height: 1126px;
    background: #FBFBFB;
}

/* --- dot matrices --------------------------------------------------------- */
.pg-41 .tR-dots { position: absolute; z-index: 2; }
.pg-41 .tR-dots--tl {
    left: 20px; top: 15px; width: 60px; height: 55px;
    background-image: radial-gradient(rgba(255,255,255,.42) 1.7px, transparent 1.8px);
    background-size: 10.6px 10.6px;
    opacity: 1;
}
.pg-41 .tR-dots--bl {
    left: 15px; top: 735px; width: 82px; height: 66px;
    background-image: radial-gradient(rgba(90,140,90,.16) 1.7px, transparent 1.8px);
    background-size: 11.5px 11.5px;
    opacity: 1;
}

/* --- refinery artwork ----------------------------------------------------- */
.pg-41 .tR-art { position: absolute; z-index: 0; }
.pg-41 .tR-art--top   { left: 1168px; top: 0;     width: 272px; height: 136px; }
.pg-41 .tR-art--foot  { left: 1010px; top: 684px; width: 342px; height: 126px; }
.pg-41 .tR-art--right { left: 1352px; top: 540px; width: 88px;  height: 270px; }

/* --- page heading --------------------------------------------------------- */
.pg-41 .tR-title {
    position: absolute;
    left: 28px;                 /* centres the line on x 734                 */
    right: 0;
    top: 65px;
    z-index: 3;
    text-align: center;
    font-family: var(--f-head);
    font-size: 65px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.005em;
    color: var(--ttl41);
}
.pg-41 .tR-title i.fit,
.pg-41 .tR-title span.fit { font-style: normal; }

.pg-41 .tR-flank { position: absolute; z-index: 3; height: 9px; }
.pg-41 .tR-flank::before,
.pg-41 .tR-flank::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2.4px;
    background: var(--amb41); border-radius: 2px;
}
.pg-41 .tR-flank::before { top: 0; }
.pg-41 .tR-flank::after  { bottom: 0; left: 6px; }
.pg-41 .tR-flank--l { left: 293px;  width: 49px; top: 92px; }
.pg-41 .tR-flank--r { left: 1119px; width: 42px; top: 92px; }

.pg-41 .tR-under {
    position: absolute; z-index: 3;
    left: 519px; top: 141px; width: 394px; height: 2px;
    background: linear-gradient(to right,
        var(--rule41) 0 170px, transparent 170px 245px, var(--rule41) 245px 100%);
}
.pg-41 .tR-under-dots {
    position: absolute; z-index: 3;
    left: 702px; top: 137px; width: 50px; height: 11px;
    background-image: radial-gradient(var(--rule41) 5px, transparent 5.4px);
    background-size: 19.3px 11px;
    background-position: 0.5px 0;
}

/* --- client card grid ----------------------------------------------------- */
.pg-41 .tR-grid {
    position: absolute; inset: 0;
    display: block; grid-template-columns: none; gap: 0;
    z-index: 4;
}
.pg-41 .tR-col { position: absolute; top: 0; }
.pg-41 .tR-col--1 { left: 93px; width: 392px; }
.pg-41 .tR-col--2 { left: 521px; width: 399px; }
.pg-41 .tR-col--3 { left: 953px; width: 398px; }

.pg-41 .tR-item {
    position: absolute;
    left: 0; right: 0;
    display: block; padding: 0; gap: 0; min-height: 0;
    background: #FDFDFD;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.035);
}
.pg-41 .tR-item--1 { top: 159px; height: 72px; }
.pg-41 .tR-item--2 { top: 240px; height: 70px; }
.pg-41 .tR-item--3 { top: 318px; height: 69px; }
.pg-41 .tR-item--4 { top: 394px; height: 69px; }
.pg-41 .tR-item--5 { top: 470px; height: 65px; }
.pg-41 .tR-item--6 { top: 541px; height: 68px; }
.pg-41 .tR-item--7 { top: 616px; height: 67px; }
.pg-41 .tR-item--8 { top: 690px; height: 66px; }

.pg-41 .tR-logo {
    position: absolute;
    top: 4px; bottom: 4px;
    height: auto;
    display: block;
}
.pg-41 .tR-logo img { width: 100%; height: 100%; object-fit: fill; }
.pg-41 .tR-sep {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 1px; height: 43px;
    background: #C6C6C6;
}
.pg-41 .tR-name {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: 6px;
    font-size: 17.2px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
    letter-spacing: .002em;
    color: var(--name41);
}
.pg-41 .tR-col--1 .tR-logo { left: 3px; width: 157px; }
.pg-41 .tR-col--1 .tR-sep  { left: 164.5px; }
.pg-41 .tR-col--1 .tR-name { left: 188px; }
.pg-41 .tR-col--2 .tR-logo { left: 3px; width: 131px; }
.pg-41 .tR-col--2 .tR-sep  { left: 138.5px; }
.pg-41 .tR-col--2 .tR-name { left: 163px; }
.pg-41 .tR-col--3 .tR-logo { left: 3px; width: 147px; }
.pg-41 .tR-col--3 .tR-sep  { left: 154.5px; }
.pg-41 .tR-col--3 .tR-name { left: 181px; }

/* ==========================================================================
   PAGE 42 · THANK YOU                                          Template S
   All coordinates measured from the 1440 x 810 source page.

   Measured:
     THANK          x 322..825, cap y 327..425 (cap h 99)
     YOU            x 863..1141;  whole line x 322..1141 (w 820), centre 731.5
     lockup mark    x 665..830, y 82..187
     wordmark       x 567..915, y 202..235; flanking rules x 460..545 / 930..1015
     divider        rule y 462..464, x 580..694 and 779..894;
                    three dots d12 at x 712.5 / 737 / 761
     icons          shield x 500..560 y 514..584; people x 697..773 y 515..582;
                    gear   x 907..977 y 514..584
     captions       cap y 606..618, x 481..577 / 647..821 / 865..1026
     group rules    x 619.5 and 849.5, y 521..599
     corner chevron right edge  x = 275 - 0.858y; bright/dark split 61px in
     bottom-right wedges        bright top edge (1090,743)->(1440,601)
                                dark   top edge  (764,810)->(1440,682)
     bottom-right dots          6 x 4 from (1321,723), pitch 15.3 x 16

   The refinery skyline and the hard-hat inset are the page's only rasters.
   The skyline crop starts at x 560, where the photographic tint has already
   faded into the page white, so it joins the background without a seam.
   ========================================================================== */

.pg-42 .tS {
    --grn42:  #4C8B19;          /* bright corner / wedge green, sampled      */
    --drk42:  #0B3C1E;          /* dark corner / wedge green                 */
    --ttl42:  #0A2A10;          /* THANK                                     */
    --you42:  #4A8A17;          /* YOU                                       */
    --icn42:  #4A8517;          /* strapline icons                           */
    background: #F7F7F5;
    font-family: "Inter", "Source Sans 3", "Segoe UI",
                 "Liberation Sans", Arial, Helvetica, sans-serif;
    overflow: hidden;
}

/* --- refinery skyline ----------------------------------------------------- */
.pg-42 .tS-sky { position: absolute; z-index: 0; }
.pg-42 .tS-sky--r1 { left: 1030px; top: 0;     width: 410px; height: 318px; }
.pg-42 .tS-sky--r2 { left: 1145px; top: 318px; width: 295px; height: 115px; }
.pg-42 .tS-sky--r3 { left: 1030px; top: 433px; width: 410px; height: 377px; }
.pg-42 .tS-sky--r4 { left: 940px;  top: 433px; width: 90px;  height: 72px; }
.pg-42 .tS-sky--f  { left: 380px;  top: 628px; width: 650px; height: 182px; }

/* --- bottom-right wedges -------------------------------------------------- */
.pg-42 .tS-wedge {
    position: absolute; inset: 0;
    width: 1440px; height: 810px;
    z-index: 1;
}
.pg-42 .tS-dots--br {
    position: absolute;
    left: 1320px; top: 722px; width: 82px; height: 56px;
    background-image: radial-gradient(#FFFFFF 1.6px, transparent 1.7px);
    background-size: 15.3px 16px;
    z-index: 2;
}

/* --- top-left corner chevron ---------------------------------------------
   A rounded rectangle rotated 40.6deg so its right edge falls on the
   measured line x = 275 - 0.858y, filled bright green with a 61px dark band
   along that edge, and clipped to the corner.
-------------------------------------------------------------------------- */
.pg-42 .tS-corner {
    position: absolute;
    left: 0; top: 0; width: 330px; height: 268px;
    overflow: hidden;
    z-index: 2;
}
.pg-42 .tS-corner::before {
    content: "";
    position: absolute;
    left: -162px; top: -247px;
    width: 400px; height: 430px;
    border-radius: 46px;
    background: linear-gradient(90deg,
        var(--grn42) 0 339px, #082E04 339px 400px);
    transform: rotate(40.6deg);
}
/* the hairline that runs parallel to the chevron, 18px further out */
.pg-42 .tS-hair {
    position: absolute;
    left: 0; top: 0; width: 340px; height: 250px;
    overflow: hidden;
    z-index: 2;
}
.pg-42 .tS-hair::before {
    content: "";
    position: absolute;
    left: -148px; top: -235px;
    width: 400px; height: 470px;
    border: 2px solid #2F6B23;
    border-radius: 46px;
    transform: rotate(40.6deg);
}

/* --- hard hat / PPE inset -------------------------------------------------- */
.pg-42 .tS-ppe {
    position: absolute;
    left: 0; top: 276px; width: 372px; height: 534px;
    z-index: 2;
}

/* --- logo lockup ----------------------------------------------------------
   The shared lockup SVG is drawn twice, through two measured windows: the
   mark is scaled to 165px wide and the wordmark to 348px wide, which is the
   proportion this page uses.
-------------------------------------------------------------------------- */
.pg-42 .tS-lockup {
    position: absolute;
    left: 669px; top: 86px; width: 163px; height: 104px;
    transform: none;
    background: url("/Assets/images/logo/sipl-lockup.svg") no-repeat -309px -1px;
    background-size: 780px auto;
    z-index: 3;
}
.pg-42 .tS-word {
    position: absolute;
    left: 567px; top: 206px; width: 349px; height: 38px;
    background: url("/Assets/images/logo/sipl-lockup.svg") no-repeat 0 -53px;
    background-size: 349px auto;
    z-index: 3;
}
.pg-42 .tS-wing {
    position: absolute;
    top: 215px; height: 13px;
    z-index: 3;
}
.pg-42 .tS-wing::before,
.pg-42 .tS-wing::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.6px;
    background: #3F6B2A;
}
.pg-42 .tS-wing::before { top: 3px; }
.pg-42 .tS-wing::after  { top: 8px; }
.pg-42 .tS-wing--l { left: 468px;  width: 78px; }
.pg-42 .tS-wing--r { left: 936px;  width: 78px; }

/* --- headline -------------------------------------------------------------- */
.pg-42 .tS-title {
    position: absolute;
    left: 23px;                 /* centres the line on x 731.5               */
    right: 0;
    top: 311px;
    z-index: 3;
    font-family: var(--f-head);
    font-size: 140px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.012em;
    text-align: center;
}
.pg-42 .tS-title .l1 { color: var(--ttl42); }
.pg-42 .tS-title .l2 { color: var(--you42); }

/* --- divider ---------------------------------------------------------------- */
.pg-42 .tS-div {
    position: absolute;
    left: 580px; top: 462px; width: 315px; height: 2.5px;
    z-index: 3;
    background: linear-gradient(to right,
        #4C7A3C 0 115px, transparent 115px 199px, #4C7A3C 199px 100%);
}
.pg-42 .tS-div-dots {
    position: absolute;
    left: 706px; top: 456px; width: 62px; height: 14px;
    z-index: 3;
    background-image: radial-gradient(#4C7A3C 6px, transparent 6.4px);
    background-size: 24.3px 14px;
    background-position: 0.5px 0;
}

/* --- strapline --------------------------------------------------------------
   Three measured groups; the base template centres them in a flex row, this
   page places each on its measured centre and draws the two dividing rules.
-------------------------------------------------------------------------- */
.pg-42 .tS-values {
    position: absolute; inset: 0;
    display: block;
    z-index: 3;
}
.pg-42 .tS-value {
    position: absolute;
    flex: none; padding: 0;
    width: 300px;
    text-align: center;
}
.pg-42 .tS-value::before { content: none; }
.pg-42 .tS-value--1 { left: 379px; top: 512px; }   /* centre x 529 */
.pg-42 .tS-value--2 { left: 584px; top: 512px; }   /* centre x 734 */
.pg-42 .tS-value--3 { left: 793px; top: 512px; }   /* centre x 943 */

.pg-42 .tS-icon { display: block; margin: 0 auto; }
.pg-42 .tS-value--1 .tS-icon { width: 61px; height: 71px; margin-top: 2px; }
.pg-42 .tS-value--2 .tS-icon { width: 77px; height: 68px; margin-top: 3px; }
.pg-42 .tS-value--3 .tS-icon { width: 71px; height: 71px; margin-top: 2px; }
.pg-42 .tS-icon svg { width: 100%; height: 100%; }

.pg-42 .tS-value p i.fit { font-style: normal; }
.pg-42 .tS-value p {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #111111;
    line-height: 1;
}
.pg-42 .tS-value--1 p { margin-top: 17px; }
.pg-42 .tS-value--2 p { margin-top: 19px; }
.pg-42 .tS-value--3 p { margin-top: 17px; }

.pg-42 .tS-values::before,
.pg-42 .tS-values::after {
    content: "";
    position: absolute;
    top: 521px; width: 1.6px; height: 79px;
    background: #5A5A58;
}
.pg-42 .tS-values::before { left: 619px; }
.pg-42 .tS-values::after  { left: 849px; }

/* ==========================================================================
   FAMILY — CYCLE RING                                      (map family tF)

   Source pages in this family: ENV pages 09 and 11.

   Structure: a banner title between two leaf sprigs over a full-width rule;
   then a split page. Left is a column of icon-and-paragraph notes divided by
   a dashed rule. Right is a closed cycle: a sub-heading between two flanking
   rules, a circular hub photograph, N numbered nodes standing on a ring with
   curved arrows running between them, and each node's call-out set outside
   the ring beside it.

   THE FAMILY OWNS: the banner, the split, the cycle geometry and how nodes
   and call-outs are placed on it, the type ramp and its scaling, spacing,
   the responsive reflow and the semantics.

   THE VARIANT OWNS: palette, the hub photograph, the arrow artwork, each
   node's box and its call-out offset, the node count, and the two lockup
   width corrections.

   Fluid, not a canvas. The cycle is a box carrying the source page's own
   aspect; everything inside it is placed in per cent of that box and sized
   in container units, so the whole diagram scales without a transform and
   reflows to a numbered list on a narrow screen.
   ========================================================================== */

.fam--cycle {
    --cyc-trim: clamp(16px, 2.2vw, 34px);
    --cyc-ink: #414141;
    --cyc-ground: #F6F5F1;
    --cyc-accent: #113512;
}

.fam--cycle .fam-scene {
    position: relative;
    background: var(--cyc-ground);
    overflow: hidden;
}

/* the page's left-edge stripe */
.fam--cycle .fam-scene::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: clamp(6px, 1vw, 15px);
    background: var(--cyc-stripe, #66883C);
}

.fam--cycle .fam-inner {
    position: relative;
    max-width: none;
    padding: clamp(14px, 1.6vw, 26px) var(--cyc-trim) var(--cyc-trim);
}


/* --- banner ------------------------------------------------------------- */

.fam--cycle .fam-cyc-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    column-gap: clamp(8px, 1.2vw, 20px);
}
.fam--cycle .fam-cyc-sprig {
    width: clamp(38px, 5.7vw, 86px);
    height: auto;
}

.fam--cycle .fam-cyc-title {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 800;
    /* page 09 sets this lockup at 111.5px on its 1440 trim; page 11 sets a
       two-line one at 86px, so the size is a variant decision */
    font-size: var(--cyc-title-size, clamp(26px, 7.74vw, 116px));
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--cyc-accent);
    text-align: center;
    text-wrap: balance;
}
/* the source display face is wider than the substitute, so the lockup is
   extended onto the width measured off the page - a ratio, so it holds at
   every width */
.fam--cycle .fam-cyc-title span {
    display: inline-block;
    white-space: nowrap;
    transform: scaleX(var(--cyc-title-x, 1));
}
/* a lockup the page sets on two lines, each with its own measured width. The
   box hugs the line so extending it horizontally extends the letters and not
   an empty full-width block. */
.fam--cycle .fam-cyc-title .l1,
.fam--cycle .fam-cyc-title .l2 {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}
.fam--cycle .fam-cyc-title .l2 { transform: scaleX(var(--cyc-title-x2, var(--cyc-title-x, 1))); }

/* page 09 rules right across; page 11 shows only a short segment at each end,
   so the fill is a variant decision */
.fam--cycle .fam-cyc-rule {
    position: relative;
    height: 3px;
    margin: clamp(8px, 1vw, 16px) 0 0;
    background: var(--cyc-rule-fill, #646C5E);
}
.fam--cycle .fam-cyc-rule::before,
.fam--cycle .fam-cyc-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #24401E;
    transform: translateY(-50%);
}
.fam--cycle .fam-cyc-rule::before { left: -5px; background: var(--cyc-dot-l, #24401E); }
.fam--cycle .fam-cyc-rule::after  { right: -5px; background: var(--cyc-dot-r, #24401E); }

/* the hairline page 11 runs across the very top of its trim */
.fam--cycle .fam-inner::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3.6px;
    background: var(--cyc-hair, none);
}


/* --- the split ---------------------------------------------------------- */

.fam--cycle .fam-cyc-body {
    display: grid;
    /* the page's own divider stands at 40.8% of the trim; a variant whose
       page splits elsewhere sets --cyc-split */
    grid-template-columns: var(--cyc-split, minmax(0, 40.8fr) minmax(0, 59.2fr));
    align-items: start;
    margin-top: clamp(12px, 1.4vw, 22px);
}
.fam--cycle .fam-cyc-notes {
    padding-right: clamp(14px, 2vw, 34px);
    border-right: 2.6px solid #707564;
}
.fam--cycle .fam-cyc-cycle-col {
    min-width: 0;
    padding-left: clamp(14px, 2vw, 34px);
}


/* --- left column: icon and paragraph notes ------------------------------ */

.fam--cycle .fam-cyc-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(10px, 1.6vw, 28px);
}
.fam--cycle .fam-cyc-note + .fam-cyc-note { margin-top: clamp(16px, 2.2vw, 36px); }

/* the page rules off between the notes with a dashed line */
.fam--cycle .fam-cyc-note--ruled {
    padding-top: clamp(16px, 2.2vw, 36px);
    border-top: 2.6px dashed #9A9F98;
}

.fam--cycle .fam-cyc-badge {
    display: grid;
    place-items: center;
    width: clamp(56px, 8.6vw, 123px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cyc-badge, #153A10);
}
.fam--cycle .fam-cyc-badge svg { width: 66%; height: 66%; }

.fam--cycle .fam-cyc-note p {
    margin: 0;
    /* page 09 sets these at 28.5px on its 1440 trim and page 11 at 22.4px,
       both floored so they never go under 15px */
    font-size: var(--cyc-note-size, clamp(15px, 1.98vw, 30px));
    line-height: var(--cyc-note-lh, 1.45);
    color: var(--cyc-ink);
}
.fam--cycle .fam-cyc-note b { font-weight: 700; color: var(--cyc-em, #2C5E1E); }


/* --- right column: the cycle -------------------------------------------- */

.fam--cycle .fam-cyc-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(8px, 1.2vw, 18px);
    margin: 0 0 clamp(10px, 1.4vw, 22px);
}
.fam--cycle .fam-cyc-sub::before,
.fam--cycle .fam-cyc-sub::after {
    content: "";
    height: 1.6px;
    background: #A9B69C;
}
.fam--cycle .fam-cyc-sub span {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 24px);
    line-height: 1.22;
    letter-spacing: .02em;
    color: #24401E;
    text-align: center;
}

.fam--cycle .fam-cyc {
    position: relative;
    min-width: 0;
    /* the reference for every per-cent and container unit inside; the nodes
       are shrink-to-fit, so a percentage on a ring would otherwise resolve
       against the node and collapse */
    container-type: size;
    container-name: cycle;
    aspect-ratio: var(--cyc-ar, 852 / 680);
}

/* Between 768 and 1023 the diagram has the column to itself but not much of
   it, and the type may not go under 15px. A page whose text blocks cannot be
   made to fit at the source proportion can ask for a taller field here; the
   nodes keep their positions on it and the arrows stretch with it, because
   they carry preserveAspectRatio="none". Neither page in this family needs
   it - both hold the source proportion at every width - so it is a hook, not
   a behaviour. */
@media (max-width: 1023px) and (min-width: 768px) {
    .fam--cycle .fam-cyc { aspect-ratio: var(--cyc-ar-sm, var(--cyc-ar, 852 / 680)); }
}

.fam--cycle .fam-cyc-hub {
    position: absolute;
    left: var(--hub-x); top: var(--hub-y);
    width: var(--hub-w); height: var(--hub-h);
    border-radius: 50%;
    object-fit: cover;
}

/* the arrows run on the cycle's own coordinate system, so they scale with
   the diagram instead of being rasterised */
.fam--cycle .fam-cyc-arrows {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* ==========================================================================
   SERVICE DETAIL PAGE - PHASE 5 MODERN DESIGN
   ========================================================================== */

.service-detail-page {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
}

/* Both are toggled via the plain hidden attribute/property by
   Assets/js/service-detail.js (only one of the two is ever shown at a time) -
   without this, the unconditional display:flex above and on .error-404-page
   below outranks the browser's own [hidden]{display:none} default, so the
   hidden one stays visible. */
#serviceDetailRoot[hidden],
#serviceNotFound[hidden] {
    display: none;
}

/* Slim utility breadcrumb bar - de-emphasized, not a generic hero */
.svc-topbar {
    padding: 0.875rem 3rem;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--green-forest);
    text-decoration: underline;
}

.breadcrumb span {
    opacity: 0.6;
}

/* ==========================================================================
   SERVICE DETAIL PAGE (continued)
   One unified layout for all 35 services: compact breadcrumb hero, then an
   image-gallery + info two-column section, full-width Additional
   Information, the shared closing CTA, a Related Services slider, and the
   source footer. Replaces the earlier per-template-family hero/visual
   compositions (process circle, ESG pillars, HAZOP steps, tech-drawing
   grid, curriculum modules, gallery highlights) with one consistent
   presentation driven entirely by ServiceCatalog + ServiceHeroImages data.
   ========================================================================== */

/* --- Detail hero: gallery (left) + service information (right). This IS
   the reference's hero - it has no separate title banner above it, so
   removing our old dark gradient strip and moving the title here (still
   exactly one <h1> - see svcd-info-title) matches its actual structure
   instead of duplicating the title in two places. ------------------------ */
/* Detail-page palette and card treatment, from the design brief. Scoped to
   .service-detail-page so no global token or other page is affected. */
.service-detail-page {
    --sd-orange: #F26A10;
    --sd-navy: #0B1B3A;
    --sd-text: #555555;
    --sd-line: #E6E6E6;
    --sd-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.svcd-main { padding: clamp(2rem, 3vw, 3.5rem) 2rem; }

.svcd-main-inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 3vw, 3.5rem);
    /* Top-aligned, not centered - gallery height varies with each service's
       thumbnail count and info height varies with its highlight-card count,
       so the two rarely match; centering was pushing the shorter column's
       content down into visibly empty space above it. */
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--sd-line);
    border-radius: 12px;
    box-shadow: var(--sd-shadow);
}

.svcd-gallery-main {
    position: relative;
    width: 100%;
    height: clamp(320px, 28vw, 400px);
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--green-mist);
}
body[data-profile="psm"] .svcd-gallery-main { background: #F1F4F8; }
.svcd-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r-md);
    object-fit: cover;
}

.svcd-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.svcd-gallery-thumb {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    padding: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 2px solid transparent;
    background-color: #EEF1F4;
    cursor: pointer;
    opacity: .65;
    transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.svcd-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svcd-gallery-thumb:hover { opacity: 1; }
.svcd-gallery-thumb.is-active { border-color: var(--green-badge); opacity: 1; }
body[data-profile="psm"] .svcd-gallery-thumb.is-active { border-color: var(--navy-deep); }

.svcd-info-title {
    margin: 0 0 var(--s-4);
    font-family: var(--f-head);
    font-size: clamp(1.375rem, 1.4vw + 0.95rem, 2.25rem);
    font-weight: 600;
    line-height: 1.23;
    color: var(--green-deep);
}
body[data-profile="psm"] .svcd-info-title { color: var(--navy-deep); }

/* The accent line under the title - the reference's coloured "meta title".
   Takes the profile accent rather than the reference's own blue, so the
   Environment / Process Safety switch keeps working. */
.svcd-info-metatitle {
    margin: 0 0 15px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--green-badge);
}
body[data-profile="psm"] .svcd-info-metatitle { color: var(--navy-deep); }

.svcd-info-desc {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.625;
    color: var(--ink-body);
}


/* --- Overview / Highlights / Detail: the content area, split into three
   purposeful sections instead of one long scroll - a short lead-in, a
   scannable highlight-card row, then the full verified content (as an
   accordion once it has more than one heading to collapse). ------------- */
.svcd-section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.svcd-section-title {
    margin: 0 0 var(--s-6);
    font-family: var(--f-display), "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.375rem, 0.8vw + 1.15rem, 1.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--green-deep);
}
body[data-profile="psm"] .svcd-section-title { color: var(--navy-deep); }


/* Additional Information. Metrics off the reference's .tab-area: a centred
   filled pill (44px tall, 4px radius) 50px above a plain panel - no border,
   no background, no padding of its own - then a 24px left-aligned heading
   35px above a checked list set 15px apart. The pill and check icons take the
   profile accent rather than the reference's blue, so the Environment /
   Process Safety switch keeps working. */
.svcd-highlights-tabs {
    display: flex;
    justify-content: center;
    gap: 17px;
    margin-bottom: 28px;
}
.svcd-highlights-tab {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--r-sm);
    background: var(--sd-navy);
    color: var(--white);
    font-family: var(--f-head);
    font-size: 1rem;
    font-weight: 600;
}

.svcd-highlights-box {
    max-width: 1400px;
    /* min-height keeps the card visually consistent across services whose
       highlight count varies (3 to 10 items) without clipping the long ones. */
    min-height: 320px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--sd-line);
    border-radius: 12px;
    box-shadow: var(--sd-shadow);
}
.svcd-highlights-heading {
    margin: 0 0 28px;
    font-family: var(--f-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--sd-navy);
}
/* Short orange rule under the section heading, as in the reference. */
.svcd-highlights-heading::after,
.svcd-related-head .svcd-section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--sd-orange);
}

.svcd-highlights {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.svcd-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.625;
    color: var(--ink-body);
}
.svcd-highlight-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: var(--green-badge);
}
body[data-profile="psm"] .svcd-highlight-icon { color: var(--navy-deep); }
.svcd-highlight-item { color: var(--sd-text); }
.svcd-highlight-text strong {
    font-weight: 700;
    color: var(--sd-navy);
}

@media (max-width: 575px) {
    .svcd-main { padding-inline: 1rem; }
    .svcd-highlights-tabs { margin-bottom: 20px; }
    .svcd-highlights-heading { margin-bottom: 24px; font-size: 1.25rem; }
}

/* Detailed content accordion - one item per heading the verified content
   already has. Single-open-at-a-time, same hidden-attribute toggle already
   proven in the Services modal's mobile accordion, restyled at section scale
   rather than that modal's compact list scale. */

/* Content Sections */
.service-content-sections {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-body);
}

.service-content-sections h2 {
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem 0;
    color: var(--green-forest);
    line-height: 1.3;
}

.service-content-sections h2:first-child {
    margin-top: 0;
}

.service-content-sections p {
    margin: 1rem 0;
}

.service-content-sections li {
    margin: 0.75rem 0 0.75rem 1.5rem;
}

.service-content-sections ul {
    margin: 1.5rem 0;
    padding: 0;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--green-forest);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--r-lg);
    font-weight: 600;
    /* transition left as-is (not var(--dur)/var(--ease)): .3s/ease don't
       exactly match --dur (.24s) or --ease's cubic-bezier curve, and
       forcing either would be a small but real timing change - out of
       scope per "keep the rendered appearance unchanged". */
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
}

.cta-button:hover {
    /* No lift/shadow - matches .btn's hover language ("no lift; corporate,
       not playful") so the two button families read as one interaction
       style instead of two. Color-darken on hover kept, same cue
       .btn--primary already uses. */
    background-color: var(--green-deep);
}

/* --- Service detail: closing CTA (every service shares this one block) -- */
.service-cta {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--navy-deep);
}
.service-cta h2 {
    margin: 0 0 1.25rem;
    color: #fff;
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}
.service-cta .cta-button { background-color: #fff; color: var(--navy-deep); }
.service-cta .cta-button:hover { background-color: var(--green-mist); color: var(--green-deep); }

/* --- Related services: same category first, same profile to fill in ----- */
.svcd-related {
    padding: 2.75rem 0 3.5rem;
    background: var(--surface);
}

.svcd-related-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.svcd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}
.svcd-related-head .svcd-section-title {
    margin: 0;
    text-transform: uppercase;
    color: var(--sd-navy);
}
.svcd-unavailable {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Error States */
.error-404-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    background-color: var(--surface);
}

.error-content {
    text-align: center;
    max-width: 500px;
    padding: 2rem;
}

.error-404-page h1 {
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1rem 0;
}

.error-404-page p {
    font-size: 1.125rem;
    color: var(--ink-body);
    margin: 0 0 2rem 0;
}

.error-link {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--green-forest);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.error-link:hover {
    background-color: var(--green-deep);
}

.error-message {
    padding: 2rem;
    background-color: #FFFBEA;
    border-left: 4px solid var(--amber);
    border-radius: 4px;
    color: #5D4037;
}

/* ==========================================================================
   RESPONSIVE - SERVICE DETAIL PAGE
   ========================================================================== */

/* This page's own main-content breakpoint is already 899px (block below) -
   .svcd-related-card/.breadcrumb/.svcd-gallery-thumb/.cta-button used to
   sit on a separate legacy 1024px+767px pair instead of matching it.
   Consolidated onto the 899px/480px breakpoints this exact page already
   uses for its neighboring rules, rather than the site's other legacy
   or current pair - the most directly justified choice available, not an
   arbitrary pick. */
@media (max-width: 899px) {
    .svc-topbar { padding: 0.75rem 1.25rem; }

    .svcd-main-inner { grid-template-columns: 1fr; gap: var(--s-6); padding: 20px; }
}

@media (max-width: 575px) {
    .svcd-main-inner, .svcd-highlights-box { padding: 16px; }
    .svcd-gallery-main { height: clamp(260px, 60vw, 380px); }
    .svcd-section-inner { padding: 2.25rem 1.25rem; }
    .svcd-related-inner { padding: 0 1.25rem; }

    .service-content-sections h2 { font-size: 1.5rem; margin-top: 2rem; }

    .breadcrumb { font-size: 0.75rem; }
    .svcd-gallery-thumb { flex-basis: 68px; width: 68px; height: 68px; }
    .cta-button { width: 100%; }
}

@media (max-width: 480px) {
    .svcd-info-title { font-size: 1.5rem; }
    .service-content-sections { font-size: 0.95rem; line-height: 1.65; }
    .service-content-sections h2 { font-size: 1.25rem; }
}


/* ==========================================================================
   PHASE 6: HOMEPAGE — profile selector, featured services, showcase,
   learning boards, clients, values, CTA. Reuses the same color tokens, card
   language and hover patterns already established across the 35 approved
   service pages (var(--navy-deep), var(--green-forest), .cta-button,
   card-hover-lift), and the shell's own shape/shadow/spacing scale.
   ========================================================================== */

/* --- Profile selector ---------------------------------------------------- */


.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.feat-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-card);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.feat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lift);
    border-color: var(--green-forest);
}
.prof[data-prof="psm"] .feat-card:hover { border-color: var(--orange); }

.feat-card-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
    background-color: #EEF1F4;
    transition: transform var(--dur-3) var(--ease);
}
.feat-card:hover .feat-card-img { transform: scale(1.05); }

.feat-card-body {
    padding: var(--s-5) var(--s-6) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feat-card-cat {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green-forest);
}
.prof[data-prof="psm"] .feat-card-cat { color: var(--orange); }

.feat-card-title {
    font-family: var(--f-head);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.feat-card-desc {
    font-size: 0.875rem;
    color: var(--ink-body);
    line-height: 1.5;
}

.feat-more {
    margin-top: var(--s-6);
    text-align: center;
}

.feat-more a {
    color: var(--green-forest);
    font-weight: 600;
    text-decoration: none;
}
.prof[data-prof="psm"] .feat-more a { color: var(--orange); }

.feat-more a:hover { text-decoration: underline; }

/* Profile visibility handled by setProfile() in site.js via [hidden] + .is-on;
   this is a purely cosmetic transition layer on top of that. */
.prof[data-prof] { transition: opacity 0.2s ease; }

/* --- Services overview page hero: same dark-banner + breadcrumb treatment
   as Contact.aspx's .contact-hero (same background photo, same sizing) -
   kept as its own class rather than sharing .contact-hero directly, to
   avoid touching the already-verified Contact page while editing this
   one. --- */
.services-hero {
    position: relative;
    padding: clamp(70px, 5vw + 65px, 140px) 0;
    background: linear-gradient(90deg, rgba(1,27,7,.12), rgba(1,27,7,.52)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
    text-align: center;
}
body[data-profile="psm"] .services-hero {
    background:
        linear-gradient(90deg, rgba(0,20,42,.92), rgba(0,20,42,.82)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
}
.services-hero h1 {
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(34px, 3.4vw + 16px, 54px);
    font-weight: 800;
    color: #fff;
}
.services-hero-crumb {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, .76);
}
.services-hero-crumb a { color: rgba(255, 255, 255, .76); text-decoration: none; }
.services-hero-crumb a:hover { color: #fff; text-decoration: underline; }
.services-hero-crumb span[aria-current] { color: #fff; font-weight: 600; }
.services-hero-crumb span[aria-hidden] { margin: 0 8px; }

/* --- Services overview page: one category group (heading + listing grid) - */
.services-category { margin-top: var(--s-8); }

/* --- Services listing cards: image top, centered title/desc, Read More
   button - matches the reference's .product-wrapper cards (measured on
   its live page: 300px image, 1px #efefef-equivalent border, 4px-scale
   radius, scale(1.02) hover). Card resize/move on hover is deliberately
   NOT reproduced (explicitly not wanted here) - shadow + border-color
   carries the "this card responded" feeling instead. Fixed card height
   plus line-clamped title/desc means content length can never resize a
   card, regardless of how long a given service's title or description is. */
/* Section head for the catalog: centred kicker with a rule either side and a
   ring mark above it, matching the reference's section title block. Scoped to
   #services so the shared .section-head--c used elsewhere is untouched. */
#services .section-head--c::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 16px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 9px var(--orange);
}
#services .section-head--c .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#services .section-head--c .eyebrow::before,
#services .section-head--c .eyebrow::after {
    content: "";
    width: 46px;
    height: 1px;
    background: var(--orange);
}

/* Service listing cards. Four up on desktop, fixed equal height so every card
   in the catalog matches regardless of how its title or description wraps -
   both are clamped to two lines, so nothing can overflow the fixed box. */
.svc-listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: var(--s-6);
}
.svc-listing-card a {
    display: flex;
    flex-direction: column;
    height: 340px;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow var(--dur-3) var(--ease),
                transform var(--dur-3) var(--ease),
                border-color var(--dur-3) var(--ease);
}
.svc-listing-card a:hover {
    border-color: transparent;
    box-shadow: 0 13px 48px 0 rgba(215, 216, 222, .44);
    transform: scale(1.02);
}

.svc-listing-img {
    display: block;
    flex: none;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
    background-color: #EEF1F4;
}

.svc-listing-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 16px 16px 18px;
    text-align: left;
}
.svc-listing-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--f-head);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}
.svc-listing-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 8px 0 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
/* Read More is a real button box rather than a text link: a full-width hairline
   outline at rest, filling with the accent on card hover. align-self overrides
   .svc-listing-body's align-items: flex-start, which would otherwise shrink the
   box to its text. The arrow swaps to the leading edge on hover via
   row-reverse - the markup order is text-then-arrow, so reversing the row is
   what moves it, rather than shipping a second copy of the icon. */
.svc-listing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    margin-top: auto;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #F26A10;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.svc-listing-btn svg { width: 14px; height: 14px; flex: none; }
.svc-listing-card a:hover .svc-listing-btn {
    flex-direction: row-reverse;
    background: #F26A10;
    border-color: #F26A10;
    color: #fff;
}

/* Touch devices latch :hover after a tap, so the whole hover treatment is
   undone here - including the filled button, which would otherwise stay lit
   on whichever card was tapped last. */
@media (hover: none) {
    .svc-listing-card a:hover {
        box-shadow: none;
        border-color: var(--line-soft);
        transform: none;
    }
    .svc-listing-card a:hover .svc-listing-btn {
        flex-direction: row;
        background: transparent;
        border-color: var(--line);
        color: #F26A10;
    }
}

/* 4 -> 3 -> 2 -> 1 across desktop, small desktop, tablet and phone. */
@media (max-width: 1199px) {
    .svc-listing-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .svc-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 575px) {
    .svc-listing-grid { grid-template-columns: 1fr; }
    .svc-listing-card a { height: auto; }
    .svc-listing-img { height: 200px; }
}

/* --- Services overview page: explicit "View Details" action on each card - */
.feat-card-action {
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--green-forest);
}
.prof[data-prof="psm"] .feat-card-action { color: var(--orange); }
.feat-card:hover .feat-card-action { text-decoration: underline; }

/* --- Contact hero: dark banner + breadcrumb, same navy/green family as the
   Services modal head. Background reuses the existing Our Services header
   photo (already established as the site's own "industrial plant" imagery)
   under a dark overlay, rather than a new/invented image. --- */
.contact-hero {
    position: relative;
    padding: clamp(70px, 5vw + 65px, 140px) 0;
    background:
        linear-gradient(90deg, rgba(1,27,7,.12), rgba(1,27,7,.52)),
        url("/Assets/images/contact/contact-banner.jpg") center / cover no-repeat;
    text-align: center;
}
body[data-profile="psm"] .contact-hero {
    background:
        linear-gradient(90deg, rgba(0,20,42,.92), rgba(0,20,42,.82)),
        url("/Assets/images/contact/contact-banner.jpg") center / cover no-repeat;
}
.contact-hero h1 {
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(34px, 3.4vw + 16px, 54px);
    font-weight: 800;
    color: #fff;
}
.contact-hero-crumb {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, .76);
}
.contact-hero-crumb a { color: rgba(255, 255, 255, .76); text-decoration: none; }
.contact-hero-crumb a:hover { color: #fff; text-decoration: underline; }
.contact-hero-crumb span[aria-current] { color: #fff; font-weight: 600; }
.contact-hero-crumb span[aria-hidden] { margin: 0 8px; }

/* --- Learning Boards standalone page: same dark-banner + breadcrumb
   treatment as Services.aspx's .services-hero and Contact.aspx's
   .contact-hero (same background photo, same sizing) - kept as its own
   class for the same reason those two are separate from each other. --- */
.boards-hero {
    position: relative;
    padding: clamp(70px, 5vw + 65px, 140px) 0;
    background: linear-gradient(90deg, rgba(1,27,7,.12), rgba(1,27,7,.52)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
    text-align: center;
}
body[data-profile="psm"] .boards-hero {
    background:
        linear-gradient(90deg, rgba(0,20,42,.92), rgba(0,20,42,.82)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
}
.boards-hero h1 {
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(34px, 3.4vw + 16px, 54px);
    font-weight: 800;
    color: #fff;
}
.boards-hero-crumb {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, .76);
}
.boards-hero-crumb a { color: rgba(255, 255, 255, .76); text-decoration: none; }
.boards-hero-crumb a:hover { color: #fff; text-decoration: underline; }
.boards-hero-crumb span[aria-current] { color: #fff; font-weight: 600; }
.boards-hero-crumb span[aria-hidden] { margin: 0 8px; }

/* --- Clients standalone page: same dark-banner + breadcrumb treatment as
   Services.aspx's .services-hero, Contact.aspx's .contact-hero and
   LearningBoards.aspx's .boards-hero (same background photo, same sizing) -
   kept as its own class for the same reason those are separate from each
   other. --- */
.clients-hero {
    position: relative;
    padding: clamp(70px, 5vw + 65px, 140px) 0;
    background: linear-gradient(90deg, rgba(1,27,7,.12), rgba(1,27,7,.52)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
    text-align: center;
}
body[data-profile="psm"] .clients-hero {
    background:
        linear-gradient(90deg, rgba(0,20,42,.92), rgba(0,20,42,.82)),
        url("/Assets/images/heroes/page-banner.jpg") center / cover no-repeat;
}
.clients-hero h1 {
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(34px, 3.4vw + 16px, 54px);
    font-weight: 800;
    color: #fff;
}
.clients-hero-crumb {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, .76);
}
.clients-hero-crumb a { color: rgba(255, 255, 255, .76); text-decoration: none; }
.clients-hero-crumb a:hover { color: #fff; text-decoration: underline; }
.clients-hero-crumb span[aria-current] { color: #fff; font-weight: 600; }
.clients-hero-crumb span[aria-hidden] { margin: 0 8px; }

/* ==========================================================================
   TERMS & CONDITIONS / PRIVACY POLICY - visually matched to the JTC India
   reference's legal pages specifically (termsAndCondition.php/privacyPolicy.php),
   which is a deliberately DIFFERENT treatment from Contact/Services/Boards/
   Clients' own dark .contact-hero-style band: JTC itself uses a plain,
   light-background heading (no hero band, no breadcrumb) for these two pages,
   so matching JTC here means diverging from Safety Info's other standalone
   pages, not copying them. Everything below is scoped to .legal-page so it
   cannot affect any other page - no existing selector is modified.
   ========================================================================== */

.legal-page {
    /* Was a blue-to-white gradient of its own; now the same flat --surface as
       every other section, so Privacy/Terms no longer read as a differently
       shaded page. */
    background: var(--surface);
    padding: clamp(32px, 3.4vw + 12px, 48px) 0 var(--sec-y);
}

.legal-title {
    position: relative;
    margin: 0 0 var(--s-5);
    font-family: var(--f-head);
    font-size: clamp(24px, 1.5vw + 18px, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
}
/* Plain, non-squiggled variant for a page-level label above squiggled
   sub-headings - used by PrivacyPolicy.aspx's "Disclaimer & Privacy Policy"
   super-title, same as the JTC reference itself: its own plain page label
   is visually smaller/lighter than the squiggled section titles below it
   (36px/600 vs 40px/800, measured), not the other way around. Same clamp()
   shape as .legal-title above, each endpoint scaled by that same 36/40
   ratio - not em, since em here would resolve against the inherited
   (16px body) font-size rather than against .legal-title's own clamp(),
   the two rules being two separate declarations for the same property
   rather than a true parent/child relationship. */
.legal-title--plain { font-size: clamp(21.6px, 1.35vw + 16.2px, 36px); font-weight: 600; }

/* Section sub-heading - one .legal-title per topic on a page that bundles
   more than one (Disclaimer, then Privacy Policy). Always preceded by other
   content (the super-title above, or the previous section's paragraphs), so
   its own top margin is unconditional rather than an adjacent-sibling rule. */
.legal-subtitle { margin-top: clamp(36px, 4vw, 56px); }

.legal-title-accent {
    position: relative;
    display: inline-block;
    color: var(--orange);
}
/* Hand-drawn double-stroke underline, same technique as the JTC reference
   (two overlapping SVG paths under the coloured word, stroke=currentColor)
   redrawn as original path data rather than reusing theirs. Sized/positioned
   in em so it scales with .legal-title's own responsive clamp() above. */
.legal-title-squiggle {
    position: absolute;
    left: 0;
    bottom: -0.16em;
    width: 100%;
    height: 0.5em;
    pointer-events: none;
}
.legal-title-squiggle svg { display: block; width: 100%; height: 100%; overflow: visible; }

.legal-body {
    margin: 0 0 var(--s-6);
    color: var(--ink-body);
    font-size: var(--t-body);
    line-height: 1.7;
}
.legal-body:last-child { margin-bottom: 0; }

/* Native decimal numbering, reintroduced locally: the site-wide ul/ol reset
   (list-style:none, used by every nav/card/footer list) stays untouched -
   this only opts .legal-list back in, and only inside .legal-page. */
.legal-list {
    margin: 0;
    padding-left: 1.3em;
    list-style: decimal outside;
}
.legal-list li {
    margin: 0 0 var(--s-3);
    padding-left: 0.4em;
    color: var(--ink-body);
    font-size: var(--t-body);
    line-height: 1.7;
}
.legal-list li:last-child { margin-bottom: 0; }
.legal-list li strong { color: var(--ink); }

@media (max-width: 767px) {
    .legal-title { font-size: 24px; }
    /* Same specificity as .legal-title above and declared later, so without
       this, that rule would win the tie at this width and erase the
       smaller/lighter distinction .legal-title--plain has everywhere else. */
    .legal-title--plain { font-size: 21.6px; }
}

/* ==========================================================================
   TERMS & CONDITIONS / PRIVACY POLICY - JTC-style CTA band.

   The CTA band (.legal-cta) is a brand-new class used only by these two
   pages, so it needs no extra scoping. The footer's own JTC-style treatment
   (background, double-arrow links) lives with the rest of section 09 FOOTER
   above, since it now applies site-wide rather than being scoped to these
   two pages.
   ========================================================================== */

/* --- CTA band: sits as the last element of each page's own content, so it
   renders immediately before Site.Master's <footer> with no gap - nothing
   in normal document flow sits between them (floating/back-to-top/enquiry
   are all position:fixed). Blue/purple is a one-off here to match the JTC
   reference's own CTA family; Safety Info has no existing token for it and
   it's used nowhere outside this band. --- */
.legal-cta {
    position: relative;
    overflow: hidden;
    background: #525FE1;
    padding: clamp(32px, 4vw, 56px) 0;
}
.legal-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}
.legal-cta-shape--a { width: 260px; height: 260px; left: -80px; top: -120px; }
.legal-cta-shape--b { width: 180px; height: 180px; right: 8%; bottom: -90px; }
.legal-cta-shape--c { width: 90px; height: 90px; right: 22%; top: -30px; }
.legal-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    flex-wrap: wrap;
}
.legal-cta-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: var(--f-head);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.legal-cta-title {
    margin: 0;
    max-width: 46ch;
    font-family: var(--f-head);
    font-size: clamp(21px, 1.3vw + 15px, 28px);
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}
.legal-cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    flex: none;
}
.legal-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: var(--r-sm);
    background: #fff;
    color: #525FE1;
    font-family: var(--f-head);
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform var(--dur) var(--ease);
}
.legal-cta-btn:hover { transform: translateY(-2px); }
.legal-cta-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.legal-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-family: var(--f-head);
    font-size: 15.5px;
    font-weight: 700;
    white-space: nowrap;
}
.legal-cta-phone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 767px) {
    .legal-cta-inner { flex-direction: column; align-items: flex-start; }
    .legal-cta-actions { width: 100%; justify-content: space-between; }
}

/* --- Contact page: enquiry form (left) + location map (right), side by
   side and equal height - align-items:stretch makes the shorter of the
   two (the map, which has no natural content height of its own) match
   the form's height rather than the other way around. Both cards now use
   the same plain white-card-with-shadow treatment (no visible border) as
   the reference's .contact-form-area/.contact-map: padding, radius,
   soft shadow. -- */
/* Contact form row. Proportions taken off the reference: a ~620/590 split
   inside the page container, image left, form right, both stretched to the
   same height. The map is no longer part of this row - it sits full width
   below, as it does on the reference. */
.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 620fr) minmax(0, 590fr);
    gap: 30px;
    align-items: stretch;
    margin-top: clamp(28px, 2.4vw, 44px);
}
.contact-form-media {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--green-mist);
    min-height: 420px;
}
body[data-profile="psm"] .contact-form-media { background: #F1F4F8; }
.contact-form-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center;
}

.contact-form-card {
    padding: clamp(28px, 2.6vw, 48px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
}
.contact-form-title {
    margin: 0;
    font-family: var(--f-head);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
}
.contact-form-lede { margin: 8px 0 0; font-size: 1rem; color: var(--ink-body); }

.contact-form {
    display: grid;
    /* minmax(0, 1fr) - NOT 1fr. With plain 1fr the min-content width of a long
       selected service ("ENVIRONMENTAL MANAGEMENT SYSTEM (EMS)") blows out its
       column and collapses the sibling one to ~40px. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
}

/* --- Location map: full-width band under the form row, at the reference's
   500px height, framed by the same hairline the form card uses. */
.contact-map {
    overflow: hidden;
    margin-top: clamp(32px, 3vw, 50px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    height: 500px;
}
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 991px) {
    .contact-main-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-form-media, .contact-form-media img { min-height: 300px; }
    .contact-map { height: 380px; }
}

@media (max-width: 899px) {
    .contact-intro-row { grid-template-columns: 1fr; gap: var(--s-6); }
    .contact-intro-frame { width: min(235px, 100%); }
    .contact-intro-badge { width: 76px; height: 76px; left: -38px; margin-top: -38px; }
    .contact-intro-frame::before { top: 12px; left: 12px; right: -12px; bottom: -12px; border-width: 2px; }
    .contact-grid { grid-template-columns: 1fr 1fr; }
    /* No tall sibling to stretch against once stacked - the map needs its
       own explicit height again here. */
    .contact-main-grid { grid-template-columns: 1fr; }
    .contact-map { min-height: 0; }
    .contact-map iframe { height: 340px; }
}
@media (max-width: 560px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.form-field--full { grid-column: 1 / -1; }

.form-field label {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 6px;
    color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
}

.form-field textarea { resize: vertical; min-height: 140px; }

/* Enquiry popup fields: light grey, rounded, roomier than the page forms.
   Scoped to .enq-panel-body so Contact's own form is untouched. */
.enq-panel-body input,
.enq-panel-body select,
.enq-panel-body textarea {
    background: #F5F5F5;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    padding: 14px 16px;
    font-size: 0.875rem;
}
.enq-panel-body textarea { min-height: 96px; resize: vertical; }
.enq-panel-body input:focus,
.enq-panel-body select:focus,
.enq-panel-body textarea:focus { border-color: #F26A10; background: #fff; }
.contact-form-card .cta-button {
    width: auto;
    min-width: 160px;
    height: 50px;
    padding: 0 28px;
    font-size: 1rem;
}
.contact-form-card .form-field input:not([type="checkbox"]),
.contact-form-card .form-field select,
.contact-form-card .form-field .enq-service-trigger {
    height: 49px;
    padding: 14px 15px;
}
.contact-form-card .form-field textarea { padding: 14px 15px; min-height: 107px; }
.contact-form-card .form-field input:not([type="checkbox"]),
.contact-form-card .form-field select,
.contact-form-card .form-field textarea,
.contact-form-card .form-field .enq-service-trigger {
    border-color: var(--line-soft);
    border-radius: var(--r-sm);
}

@media (max-width: 991px) {
    .contact-form-card .cta-button { width: 100%; }
}

/* Select Service's trigger button is already the same grid-column width as
   every other field (both are width:100% of an equal 1fr track) - but its
   own .enq-service-trigger padding/font-size (sized for the compact Enquiry
   popup) is smaller than the 16px/1rem used here, so it rendered visibly
   shorter than Name/Email/Company and read as inconsistent. Matching just
   those two properties (not touching the popup's own instance, which stays
   at its original compact size) brings it to the same size as its siblings. */
.contact-form .enq-service-trigger { padding: 16px; font-size: 1rem; line-height: 1.25; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--green-forest);
    outline-offset: 1px;
}
body[data-profile="psm"] .form-field input:focus,
body[data-profile="psm"] .form-field select:focus,
body[data-profile="psm"] .form-field textarea:focus {
    outline-color: var(--orange);
}

/* Real validation, not decorative - see bindContactForm() in site.js. */
.form-field.has-error input,
.form-field.has-error select {
    border-color: var(--red);
}
.cf-error {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--red);
}
.cf-status {
    margin-top: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green-forest);
}
body[data-profile="psm"] .cf-status { color: var(--navy-deep); }

.form-note {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--ink-body);
    font-style: italic;
}

.cta-button:disabled,
.cta-button:disabled:hover {
    background-color: var(--green-forest);
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 700px) {
    .contact-form { grid-template-columns: 1fr; }
}

/* --- Visual showcase strip ------------------------------------------------ */

.home-showcase { background: transparent; }

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
}

.showcase-tile {
    margin: 0;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.showcase-tile img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    background: #EEF1F4;
}

/* Click-to-zoom affordance. Keyed off [role="button"], which bindBoardLightbox()
   in site.js adds at boot - so the cursor/hover cue only ever appears on tiles
   that can actually open the lightbox. */
.showcase-tile[role="button"] {
    cursor: zoom-in;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.showcase-tile[role="button"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lift);
}
.showcase-tile[role="button"]:focus-visible {
    outline: 2px solid var(--green-forest);
    outline-offset: 3px;
}
.showcase-tile img { transition: transform .35s var(--ease); }
.showcase-tile[role="button"]:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .showcase-tile[role="button"], .showcase-tile img { transition: none; }
    .showcase-tile[role="button"]:hover { transform: none; }
    .showcase-tile[role="button"]:hover img { transform: none; }
}

.showcase-tile figcaption {
    padding: var(--s-2) var(--s-3);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--navy-ink);
    text-align: center;
    line-height: 1.3;
}

/* --- Learning boards -------------------------------------------------------
   Curated preview cards: a cropped thumbnail of the real board photograph
   plus its title. The full board (native resolution, fully legible) opens
   in a new tab — kept out of the page flow instead of embedded at full
   size, per the PHASE 6 polish brief. The verbatim transcription that used
   to sit beside each raw board stays on the page as .visually-hidden text,
   so nothing that was searchable/readable before is lost.
   ---------------------------------------------------------------------- */

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.board-card {
    margin: 0;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.board-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }

.board-card-thumb {
    position: relative;
    display: block;
    height: 200px;
    overflow: hidden;
}
.board-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease);
}
.board-card:hover .board-card-thumb img { transform: scale(1.05); }

.board-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 28, 45, 0) 55%, rgba(9, 28, 45, .68) 100%);
}

.board-card-view {
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-3);
    z-index: 1;
    font-family: var(--f-head);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
}
.board-card-view::after { content: " \2192"; }

.board-card-body {
    padding: var(--s-5) var(--s-6) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.board-card-title {
    font-family: var(--f-head);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.board-card-sub {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    line-height: 1.45;
}

/* --- Board image lightbox: clicking a board image opens it here instead of
   a new tab (see bindBoardLightbox() in site.js). Single fixed layer that is
   both the dark backdrop and the click-outside-to-close target - only the
   image and the close button opt out of that, so no separate overlay/panel
   split is needed the way .svc-modal uses one for its header/sidebar/cards. --- */
.board-lightbox {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(10, 13, 16, .82);
    animation: board-lightbox-in var(--dur) var(--ease) both;
}
.board-lightbox[hidden] { display: none; }
body.board-lightbox-open { overflow: hidden; }

@keyframes board-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .board-lightbox { animation: none; } }

.board-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: 0 40px 90px -20px rgba(10, 13, 16, .55);
    animation: board-lightbox-img-in var(--dur-3) var(--ease-out) both;
}
@keyframes board-lightbox-img-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .board-lightbox-img { animation: none; } }

.board-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .7);
    transition: background-color var(--dur) var(--ease);
}
.board-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.board-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.board-lightbox-close svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; }

/* --- Clients: two independent auto-scrolling rows --------------------------
   Each row is its own carousel over real clients, stepping one logo at a
   time - via its own arrows, or automatically on a timer. The two rows run
   opposite directions (data-auto-dir on .clients-row: 1 = advances toward
   more-negative scroll, i.e. right-to-left; -1 = the reverse) so they read
   as a pair rather than a doubled-up single row. Logos are never cropped
   (object-fit: contain); every client named in the company profile is kept.
   ---------------------------------------------------------------------- */

.clients-rows {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    margin-top: var(--s-6);
}

.clients-row {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.clients-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.clients-track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--s-4);
    transition: transform var(--dur-3) var(--ease);
}

.carousel-arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--white);
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover {
    border-color: var(--green-forest);
    color: var(--green-forest);
    background: var(--green-mist);
}
body[data-profile="psm"] .carousel-arrow:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: #F1F4F8;
}

/* --- Testimonials -----------------------------------------------------------
   Ported from the Connext reference's own layout: a pale rounded "panel"
   background (their --primary-100 -> our --green-mist), left column text/
   stats, right column a real 2-visible-of-3 card track with circular
   prev/next arrows overlapping its edges. Cards are deliberately flat -
   no radius, no shadow, no border - matching the reference's own cards
   exactly, even though every other card on this site is rounded; the
   rounded panel around them supplies the visual containment instead. ---- */

.testi-panel {
    background: var(--green-mist);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 56px);
}
body[data-profile="psm"] .testi-panel { background: #F1F4F8; }

.testi-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s-10);
    align-items: center;
}

.testi-intro-col .eyebrow { color: var(--green-forest); }
body[data-profile="psm"] .testi-intro-col .eyebrow { color: var(--navy-deep); }

.testi-stats {
    display: flex;
    gap: var(--s-8);
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
}
.testi-stat-num {
    display: block;
    font-family: var(--f-head);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--green-forest);
}
body[data-profile="psm"] .testi-stat-num { color: var(--navy-deep); }
.testi-stat p { margin: 8px 0 0; font-size: 0.875rem; color: var(--ink-body); line-height: 1.5; max-width: 22ch; }

.testi-card-col { position: relative; }

.testi-viewport { overflow: hidden; }
.testi-track {
    display: flex;
    gap: var(--s-6);
    transition: transform .45s var(--ease);
}

.testi-card {
    flex: none;
    width: calc(50% - var(--s-6) / 2);
    height: 372px;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: var(--s-6);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.testi-stars {
    display: flex;
    gap: 3px;
    width: fit-content;
    padding: 4px 10px;
    background: var(--paper);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
}
.testi-stars svg { width: 15px; height: 15px; fill: #F5A623; }

.testi-quote-text {
    margin: 0;
    flex: 1;
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.6;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
}

.testi-person { margin-top: var(--s-5); flex: none; }
.testi-role { display: block; font-family: var(--f-head); font-size: 1rem; font-weight: 700; color: var(--ink); }
.testi-sector { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-soft); }

.testi-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.testi-nav-btn--prev { left: -20px; }
.testi-nav-btn--next { right: -20px; }
.testi-nav-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

@media (max-width: 899px) {
    .testi-panel { padding: var(--s-6); }
    .testi-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
    /* Narrower card = more lines per quote at the same character count, so
       this needs more headroom than the desktop card, not the same amount -
       485px is the measured natural (unclamped) height of the longest
       quote at a 320px viewport, the narrowest width this site supports. */
    .testi-card { width: 100%; height: 490px; }
    .testi-quote-text { -webkit-line-clamp: 16; }
    .testi-stats { gap: var(--s-6); }
}

.client-tile {
    /* gap-aware: 5 whole tiles fit with no partial tile cropped at the
       edge. A plain 20% here ignores the 4 gaps between them, which
       overflows the row by exactly that much and crops the last tile. */
    flex: 0 0 calc((100% - 4 * var(--s-4)) / 5);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2);
    text-align: center;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
}
.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ==========================================================================
   CLIENTS GRID — the standalone Clients page (clients/index.html) only.
   A separate component from .clients-row/.client-tile above (the
   auto-scrolling teaser still used on the home page) rather than a restyle
   of it, so the two pages can evolve independently without fighting over
   one selector. Rendered from Assets/js/client-data.js by
   Assets/js/client-render.js.
   ========================================================================== */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-7);
    list-style: none;
    padding: 0;
}

.client-card {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 96px;
    padding: var(--s-5) var(--s-6);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.client-card:hover {
    border-color: var(--green-forest);
    box-shadow: var(--sh-lift);
    transform: translateY(-2px);
}

.client-card-logo {
    flex: 0 0 72px;
    width: 72px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-card-logo--fallback {
    background: var(--green-pale);
    border-radius: var(--r-md);
    width: 100%;
    height: 100%;
    color: var(--green-forest);
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 22px;
}

.client-card-divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--line);
}

.client-card-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--navy-deep);
}

@media (max-width: 899px) {
    .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .clients-grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .client-card { padding: var(--s-4) var(--s-5); }
}

/* ==========================================================================
   OUR TEAM — replaces the old homepage "Get in touch" teaser. Card icons
   reuse the exact same category badge artwork already used in the Our
   Services section above, since named individual photos/bios aren't part
   of the source company profile - keeps every card grounded in a real,
   verified practice area rather than an invented person.

   Hover mechanics (accent crossfade, share-button fill, sliding icon
   stack) are ported 1:1 from the live Connext reference's own stylesheet
   (design.worklog.in/connext - .team-wrapper6), read directly from its
   computed styles rather than guessed from the screenshot: two identically-
   sized pseudo-elements crossfade opacity to swap the bottom accent color,
   the icon stack sits at opacity:0/translateY(60px) until the whole card
   (not just the button) is hovered, and each icon has its own scale-in
   circle-fill on top of that. Colors swapped for Safety Info's own tokens.
   ========================================================================== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-7);
}

.team-card {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--white);
    border-radius: var(--r-lg);
    z-index: 1;
    transition: transform .3s var(--ease);
}
.team-card:hover { transform: translateY(-3px); }

/* Bottom accent: two identical boxes stacked behind the card, offset 5px
   lower so only a thin sliver peeks out beneath it. Crossfading their
   opacity on hover swaps that sliver from neutral to brand color, instead
   of animating a border (which can't transition its color this smoothly
   across a rounded corner). */
.team-card::before,
.team-card::after {
    content: "";
    position: absolute;
    left: 0; bottom: -5px;
    width: 100%; height: 100%;
    border-radius: var(--r-lg);
    transition: opacity .4s var(--ease);
}
.team-card::before { background: var(--line-soft); z-index: -1; opacity: 1; }
.team-card::after   { background: var(--green-forest); z-index: -2; opacity: 0; }
body[data-profile="psm"] .team-card::after { background: var(--navy-deep); }
.team-card:hover::before { opacity: 0; }
.team-card:hover::after  { opacity: 1; }

.team-card-photo {
    position: relative;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-mist);
    color: var(--green-forest);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
}
body[data-profile="psm"] .team-card-photo { background: #F1F4F8; color: var(--navy-deep); }
.team-card-photo svg { width: 68px; height: 68px; }
.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Source photos are portrait headshots (618x671) forced into a wide
       box - a plain center crop (50%) lands ~22% down the original image,
       cutting into the hairline. 20% was checked against byte-accurate
       crops of all four source photos and keeps full head + face-to-collar
       framing; the taller box below (250px desktop / 235px mobile, up from
       180/150) shows noticeably more of each photo than that check was
       done against, never less, so it stays safe at the new size too. */
    object-position: center 20%;
}

/* Name/role plate: a diagonal-cut white panel overlapping the bottom of
   the photo, exactly like the reference's .content-area. It must reach
   the card's own bottom edge (bottom: 0), not stop short of it - the
   plate is what keeps the outer ::before/::after accent (below) reduced
   to a thin sliver. Leaving a gap here was the earlier bug: the accent
   layer is full-card-sized, so any uncovered strip let its color show
   through as a solid band instead of a hairline. */
.team-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 132px;
    background: var(--white);
    z-index: 2;
    overflow: hidden;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%);
    padding: 26px var(--s-6) 18px;
}

/* Name (primary) + designation (secondary) on the left, share/connect
   icons on the right - same row, per the card's own reference layout.
   align-items:flex-start keeps the icons pinned to the name's own line
   rather than centered across the full name+designation block. */
.team-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
}

.team-card-name {
    font-family: var(--f-head);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-card-role {
    font-family: var(--f-head);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--green-forest);
    margin: 3px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body[data-profile="psm"] .team-card-role { color: var(--navy-deep); }
.team-card-focus {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* The 3 placeholder social links (same "no real profile exists yet"
   placeholder pattern as Site.Master's own header/footer social icons, not
   a per-card social account) - a direct sibling of .team-card-photo/-body
   again, not nested inside the body panel: at 4-across-40px-plus-gaps they
   need more width than the name/role row has room for next to them, and
   .team-card-body's own overflow:hidden would silently clip whatever
   didn't fit. Positioned over the photo, well clear of where the diagonal
   cut into .team-card-body begins (card height minus body height), so
   hovering never overlaps the name/role/share button below. */
.team-card-icons {
    position: absolute;
    right: var(--s-5);
    bottom: 138px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.team-card-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.team-card-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The 3 placeholder social links - hidden until the card is hovered,
   fading/sliding up into their fixed column position. */
a.team-card-icon {
    background: var(--white);
    box-shadow: var(--sh-card);
    color: var(--ink);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
}
.team-card:hover a.team-card-icon {
    opacity: 1;
    transform: translateY(0);
}
a.team-card-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--green-forest);
    transform: scale(.2);
    opacity: 0;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    z-index: 0;
}
body[data-profile="psm"] a.team-card-icon::after { background: var(--navy-deep); }
a.team-card-icon:hover { color: var(--white); }
a.team-card-icon:hover::after { transform: scale(1); opacity: 1; }

/* Share/connect button - always visible (opacity/transform never toggle),
   fill only changes on *card* hover (.team-card:hover, not its own
   :hover), matching the reference exactly. */
.team-card-action {
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--green-forest);
}
body[data-profile="psm"] .team-card-action { color: var(--navy-deep); }
.team-card:hover .team-card-action {
    background: var(--green-forest);
    color: var(--white);
    border-color: var(--green-forest);
}
body[data-profile="psm"] .team-card:hover .team-card-action {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
}

/* ==========================================================================
   RESPONSIVE — HOMEPAGE
   ========================================================================== */

@media (max-width: 1024px) {
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .showcase-grid { grid-template-columns: repeat(3, 1fr); }
    .board-grid { gap: var(--s-4); }
    .client-tile { flex-basis: calc((100% - 3 * var(--s-4)) / 4); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .profile-cards { grid-template-columns: 1fr; gap: var(--s-5); }
    .profile-card { min-height: 220px; }
    .feat-grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
    .board-grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .board-card-thumb { height: 180px; }
    .board-lightbox-close { width: 44px; height: 44px; top: 10px; right: 10px; }
    .clients-row { gap: var(--s-2); }
    .carousel-arrow { width: 34px; height: 34px; }
    .carousel-arrow svg { width: 16px; height: 16px; }
    .client-tile { flex-basis: calc((100% - 2 * var(--s-4)) / 3); }
    .team-grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .team-card { height: 380px; }
    .team-card-photo { height: 267px; }
    .team-card-body { height: 135px; }
    /* Smaller icons + recomputed seam clearance for this card's own height/
       photo split (380 - 135 = 245 from the top, so bottom: 140 keeps the
       column's own bottom edge above it, same margin as desktop). */
    .team-card-icons { bottom: 140px; gap: 6px; }
    .team-card-icon { width: 32px; height: 32px; }
    .team-card-icon svg { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
    .profile-card-body { padding: 1.25rem 1.375rem; }
    .profile-card-title { font-size: 1.375rem; }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .showcase-tile img { height: 90px; }
    .client-tile { flex-basis: calc((100% - 1 * var(--s-4)) / 2); }
}


/* ==========================================================================
   HOME - PREMIUM SECTIONS
   Trust strip, About, Core Expertise, Why Safety Info, Value Proposition and
   the closing CTA. Markup comes from renderHomeSections() in site.js.

   The --pv-* tokens below are NEW names, added alongside the existing palette
   rather than redefining it, so nothing outside these sections can shift.
   ========================================================================== */

:root {
    --pv-green:  #052B18;
    --pv-navy:   #06233D;
    --pv-accent: #F26A10;
    --pv-bg:     var(--surface);
    --pv-text:   #555555;
    --pv-line:   #E6E6E6;
    --pv-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    --pv-lift:   0 13px 48px rgba(215, 216, 222, .44);
    --pv-r:      12px;
}

.pv-inner { max-width: 1400px; margin: 0 auto; padding-inline: 2rem; }

.pv-eyebrow {
    margin: 0 0 10px;
    font-family: var(--f-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pv-accent);
}
.pv-h2 {
    margin: 0;
    font-family: var(--f-head);
    font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.25rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--pv-navy);
}
.pv-head { margin-bottom: clamp(28px, 2.6vw, 44px); }
.pv-head--c { text-align: center; }
.pv-head--invert .pv-h2 { color: #fff; }

/* Buttons ---------------------------------------------------------------- */
.pv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border-radius: var(--r-sm);
    font-family: var(--f-head);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), gap .25s var(--ease);
}
.pv-btn:hover { gap: 12px; }
.pv-btn--accent  { background: var(--pv-accent); color: #fff; }
.pv-btn--accent:hover { background: #D95B08; }
.pv-btn--outline { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.pv-btn--outline:hover { background: rgba(255, 255, 255, .12); }
.pv-btn--ghost   { border: 1px solid var(--pv-line); color: var(--pv-navy); }
.pv-btn--ghost:hover { border-color: var(--pv-accent); color: var(--pv-accent); }
.pv-btn--text    { height: auto; padding: 0; color: var(--pv-accent); }

/* Primary CTA pill - solid accent, soft accent-tinted shadow and a circled
   arrow that slides on hover. The arrow lives in the <span aria-hidden> the
   other .pv-btn variants already carry, so no extra markup. */
.pv-btn--cta {
    height: 54px;
    gap: 14px;
    padding: 0 8px 0 30px;
    border-radius: 999px;
    background: linear-gradient(100deg, #E2580A 0%, #F26A10 52%, #FF8B3D 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(242, 106, 16, .30);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pv-btn--cta span {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .20);
    font-size: 1.0625rem;
    line-height: 1;
    transition: transform .25s var(--ease), background-color .25s var(--ease);
}
/* gap is restated because the shared .pv-btn:hover widens it to 12px, which
   would otherwise nudge the pill on every hover. */
.pv-btn--cta:hover {
    gap: 14px;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(242, 106, 16, .38);
}
.pv-btn--cta:hover span { background: rgba(255, 255, 255, .32); transform: translateX(4px); }
.pv-btn--cta:focus-visible { outline: 2px solid var(--pv-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .pv-btn--cta, .pv-btn--cta span { transition: none; }
    .pv-btn--cta:hover, .pv-btn--cta:hover span { transform: none; }
}

/* 1. Trust strip --------------------------------------------------------- */
.pv-trust { padding: clamp(32px, 3vw, 48px) 0; background: var(--pv-bg); }
.pv-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0; padding: 0; list-style: none;
}
.pv-stat {
    padding: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    box-shadow: var(--pv-shadow);
}
.pv-stat-num {
    display: block;
    font-family: var(--f-head);
    font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pv-green);
}
.pv-stat-label {
    display: block;
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pv-text);
}

/* 2. About --------------------------------------------------------------- */
.pv-about { padding: clamp(44px, 4vw, 72px) 0; }
.pv-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 3vw, 48px);
    /* Top-aligned rather than centred: the copy column is shorter than the
       image, so centring pushed the heading down the page instead of starting
       it level with the image's top edge. */
    align-items: start;
}
.pv-about-media {
    overflow: hidden;
    border-radius: var(--pv-r);
    border: 1px solid var(--pv-line);
    box-shadow: var(--pv-shadow);
}
.pv-about-media img {
    display: block; width: 100%; height: 100%;
    min-height: 320px; object-fit: cover;
    transition: transform .4s var(--ease);
}
.pv-about-media:hover img { transform: scale(1.03); }
.pv-about-copy p { margin: 0 0 16px; font-size: 1rem; line-height: 1.7; color: var(--pv-text); }
.pv-about-copy .pv-h2 { margin-bottom: 16px; }

/* 3. Core expertise ------------------------------------------------------ */
.pv-expertise { padding: clamp(44px, 4vw, 72px) 0; background: var(--pv-bg); }
.pv-expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pv-exp-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    box-shadow: var(--pv-shadow);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pv-exp-card:hover { box-shadow: var(--pv-lift); transform: translateY(-3px); }
.pv-exp-media { overflow: hidden; }
.pv-exp-media img {
    display: block; width: 100%; height: 220px; object-fit: cover;
    transition: transform .4s var(--ease);
}
.pv-exp-card:hover .pv-exp-media img { transform: scale(1.04); }
.pv-exp-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.pv-exp-title { margin: 0 0 10px; font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; color: var(--pv-navy); }
.pv-exp-desc  { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--pv-text); }
.pv-exp-list  { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pv-exp-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pv-navy);
}
.pv-exp-list li::before {
    content: "";
    position: absolute; left: 0; top: .45em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pv-accent);
}
.pv-exp-body .pv-btn--text { margin-top: auto; }

/* 4. Why Safety Info ----------------------------------------------------- */
.pv-why { padding: clamp(44px, 4vw, 72px) 0; }
.pv-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 0; padding: 0; list-style: none;
}
.pv-why-card {
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-r);
    box-shadow: var(--pv-shadow);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pv-why-card:hover { box-shadow: var(--pv-lift); transform: translateY(-3px); }
.pv-why-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: var(--r-sm);
    background: rgba(242, 106, 16, .1);
    color: var(--pv-accent);
}
.pv-why-icon svg { width: 22px; height: 22px; }
.pv-why-card h3 { margin: 0 0 8px; font-family: var(--f-head); font-size: 1rem; font-weight: 700; color: var(--pv-navy); }
.pv-why-card p  { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--pv-text); }

/* 5. Value proposition --------------------------------------------------- */
.pv-pillars { padding: clamp(44px, 4vw, 72px) 0; background: var(--pv-green); }
.pv-pillars .pv-eyebrow { color: #F9A86A; }
.pv-pillar-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 0; padding: 0; list-style: none;
    counter-reset: pv;
}
.pv-pillar {
    position: relative;
    padding: 22px 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--pv-r);
    background: rgba(255, 255, 255, .04);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.pv-pillar:hover { background: rgba(255, 255, 255, .09); border-color: var(--pv-accent); }
/* Connector between nodes - drawn on the gap, hidden for the last item and
   whenever the row wraps to one column. */
.pv-pillar:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: -16px;
    width: 16px; height: 1px;
    background: rgba(255, 255, 255, .25);
}
.pv-pillar-num {
    display: block;
    font-family: var(--f-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--pv-accent);
}
.pv-pillar-name {
    display: block;
    margin-top: 6px;
    font-family: var(--f-head);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

/* 6. Closing CTA --------------------------------------------------------- */
.pv-cta { padding: clamp(40px, 4vw, 64px) 0; background: var(--pv-navy); }
.pv-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.pv-cta .pv-h2 { color: #fff; max-width: 34ch; }
.pv-cta p { margin: 10px 0 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 52ch; }
.pv-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1199px) {
    .pv-why-grid { grid-template-columns: repeat(3, 1fr); }
    .pv-pillar-row { grid-template-columns: repeat(3, 1fr); }
    .pv-pillar:not(:last-child)::after { display: none; }
}
@media (max-width: 991px) {
    .pv-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .pv-about-grid { grid-template-columns: 1fr; }
    .pv-expertise-grid { grid-template-columns: 1fr; }
    .pv-why-grid { grid-template-columns: repeat(2, 1fr); }
    .pv-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575px) {
    .pv-inner { padding-inline: 1rem; }
    .pv-why-grid { grid-template-columns: 1fr; }
    .pv-pillar-row { grid-template-columns: 1fr; }
    .pv-about-media img { min-height: 240px; }
    .pv-exp-media img { height: 180px; }
    .pv-btn { width: 100%; justify-content: center; }
    .pv-cta-actions { width: 100%; }
}


/* ==========================================================================
   FORMS - SECURITY CHECK + SUCCESS CONFIRMATION
   Shared by the Contact form and the Enquiry popup.
   ========================================================================== */
.form-captcha-row { display: flex; align-items: center; gap: 10px; }
.form-captcha-q {
    flex: none;
    padding: 0 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-family: var(--f-head);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink);
    background: var(--green-mist);
    border-radius: var(--r-sm);
    user-select: none;
}
body[data-profile="psm"] .form-captcha-q { background: #F1F4F8; }
.form-captcha-row input { flex: 1; min-width: 0; }
.form-captcha-refresh {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.form-captcha-refresh:hover { color: var(--green-forest); border-color: var(--green-forest); }
body[data-profile="psm"] .form-captcha-refresh:hover { color: var(--navy-deep); border-color: var(--navy-deep); }
.form-captcha-refresh svg { width: 17px; height: 17px; }

.form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px;
    text-align: center;
}
.form-success-icon {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--green-mist);
    color: var(--green-forest);
}
body[data-profile="psm"] .form-success-icon { background: #F1F4F8; color: var(--navy-deep); }
.form-success-icon svg { width: 24px; height: 24px; }
.form-success h3 {
    margin: 0;
    font-family: var(--f-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}
.form-success p {
    margin: 0;
    max-width: 34ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-body);
}
.form-success-again {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--f-head);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--green-forest);
    cursor: pointer;
}
body[data-profile="psm"] .form-success-again { color: var(--navy-deep); }
.form-success-again:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .form-captcha-row { flex-wrap: wrap; }
    .form-captcha-row input { flex: 1 1 120px; }
    .form-success { padding: 22px 12px; }
}


/* ==========================================================================
   FORMS - FINAL PASS
   ========================================================================== */

/* Used by showFormSuccess(). Beats any author `display`, which the plain
   [hidden] attribute cannot do. */
.is-form-hidden { display: none !important; }

/* Keep a long selected service inside its column instead of forcing the grid
   to widen around it. The .form-field entry is the important one: as a grid
   item its default min-width:auto resolves to the min-content width of that
   long label, which pushed the whole card wider than the viewport on mobile.
   Every link in the chain needs min-width:0 for the ellipsis to take effect. */
.contact-form .form-field,
.enq-panel-body .form-field { min-width: 0; }
.enq-service-select { min-width: 0; }
.enq-service-trigger { min-width: 0; }
.enq-service-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Compact success state - no tall empty card. */
.form-success { padding: 22px 20px; gap: 4px; }
.form-success-icon { width: 46px; height: 46px; margin-bottom: 6px; }
.form-success h3 { font-size: 1.125rem; }
.form-success p { font-size: 0.9375rem; }
.form-success-again { margin-top: 8px; }

/* The contact card should not keep the form's full height once the compact
   confirmation replaces it. */
.contact-form-card:has(.form-success) { height: auto; }

@media (max-width: 575px) {
    .form-success { padding: 20px 14px; }
    .form-success-icon { width: 42px; height: 42px; }
}


/* Submission failure feedback - the form stays put and says why. */
.cf-status.is-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: #FDECEA;
    color: #A32316;
    font-size: 0.875rem;
    line-height: 1.5;
}
.enq-panel-body .cf-status.is-error { margin-top: 8px; }


/* ==========================================================================
   PHONE INPUT GROUP
   The +91 chip and the number field read as one control: no gap between them,
   the outer corners rounded and the inner ones square, a single shared outline
   and one hairline divider where they meet. Scoped per context because the
   popup and the contact card style their inputs differently (grey/large-radius
   vs white/small-radius) - the chip has to match whichever it sits beside.
   ========================================================================== */
.enq-phone-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.enq-phone-row input {
    flex: 1;
    min-width: 0;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.enq-country-code {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Enquiry popup: grey field, large radius. */
.enq-panel-body .enq-country-code {
    background: #F5F5F5;
    border: 1px solid transparent;
    border-right: 1px solid #E2E2E2;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.enq-panel-body .enq-phone-row input {
    /* Full shorthand, not just the right corners: the .enq-panel-body input
       rule above is more specific than .enq-phone-row input and would
       otherwise re-round the left side back onto the chip. */
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

/* Contact card: white field, small radius, 49px tall to match its siblings. */
.contact-form-card .enq-country-code {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}
/* Needs .form-field in the chain to match the specificity of the
   .contact-form-card .form-field input:not([type="checkbox"]) rule above,
   which would otherwise re-round all four corners. */
.contact-form-card .form-field .enq-phone-row input {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}


/* ==========================================================================
   PHONE GROUP - FOCUS
   The +91 chip and the number field are one control, so the focus ring has to
   belong to the group. The inner input keeps its own outline suppressed and
   .enq-phone-row:focus-within carries the ring instead, matching whatever the
   sibling inputs use in that context. Outlines take no layout space, so the
   two halves stay seamlessly joined while focused.
   ========================================================================== */
.enq-phone-row { border-radius: var(--r-sm); }
.enq-panel-body .enq-phone-row { border-radius: var(--r-lg); }

/* Suppress the half-width ring on the number box itself. */
.enq-phone-row input:focus { outline: none; }

/* Contact card + anywhere using the shared .form-field focus outline. */
.enq-phone-row:focus-within {
    outline: 2px solid var(--green-forest);
    outline-offset: 1px;
}
body[data-profile="psm"] .enq-phone-row:focus-within { outline-color: var(--navy-deep); }

/* Enquiry popup uses a border + white fill rather than an outline - apply it
   to BOTH halves so the whole group lifts together. */
.enq-panel-body .enq-phone-row:focus-within {
    outline: none;
}
.enq-panel-body .enq-phone-row:focus-within .enq-country-code,
.enq-panel-body .enq-phone-row:focus-within input {
    background: #fff;
    border-color: #F26A10;
}
/* Keep the hairline divider between the two halves on focus. */
.enq-panel-body .enq-phone-row:focus-within .enq-country-code {
    border-right-color: #E2E2E2;
}


/* ==========================================================================
   FORM FOCUS - ONE TREATMENT FOR EVERY FIELD

   Previously three different things happened depending on which control you
   tabbed into: inputs/selects/textareas got a --green-forest ring at 1px
   offset, the Select Service trigger is a <button> so it fell through to the
   generic :focus-visible ring (--green-badge, 3px offset), and the popup used
   a border+fill change instead of a ring. PSM disagreed with itself too:
   --orange on fields, --navy-deep on the phone group.

   Everything below resolves to a single --focus-accent, one ring geometry and
   one soft halo, applied to every control in both forms - including the
   Select Service button and the +91 group as a whole.
   ========================================================================== */
:root { --focus-accent: var(--green-forest); }
body[data-profile="psm"] { --focus-accent: var(--navy-deep); }

.contact-form .form-field input:focus,
.contact-form .form-field textarea:focus,
.contact-form .form-field select:focus,
.contact-form .form-field .enq-service-trigger:focus,
.contact-form .form-field .enq-service-trigger:focus-visible,
.enq-panel-body .form-field input:focus,
.enq-panel-body .form-field textarea:focus,
.enq-panel-body .form-field select:focus,
.enq-panel-body .form-field .enq-service-trigger:focus,
.enq-panel-body .form-field .enq-service-trigger:focus-visible,
.enq-phone-row:focus-within {
    /* Flat by design: focus is shown by the border alone - no ring, no glow. */
    outline: none;
    border-color: var(--focus-accent);
    box-shadow: none;
}

/* The number box sits inside the group, which carries the ring for both
   halves - it must not draw a second one of its own. */
.enq-phone-row input:focus {
    outline: none;
    box-shadow: none;
}
/* Focus is carried by the border, so both halves of the joined control must
   take it - otherwise only one side would appear focused. */
.enq-phone-row:focus-within .enq-country-code,
.enq-phone-row:focus-within input {
    border-color: var(--focus-accent);
}
.enq-phone-row:focus-within .enq-country-code { border-right-color: var(--focus-accent); }
/* The number box needs the .form-field link in the chain to outrank
   .contact-form-card .form-field input:not([type="checkbox"]), which sets the
   resting border colour and would otherwise leave half the group unfocused. */
.contact-form-card .form-field .enq-phone-row:focus-within input,
.enq-panel-body .form-field .enq-phone-row:focus-within input,
.enq-panel-body .form-field .enq-phone-row:focus-within .enq-country-code {
    border-color: var(--focus-accent);
}

/* The popup previously swapped border+background instead of ringing. Keep the
   grey field lifting to white for legibility, but the focus indicator itself
   is now the same ring as everywhere else. */
.enq-panel-body .enq-phone-row:focus-within,
.enq-panel-body .enq-phone-row:focus-within .enq-country-code,
.enq-panel-body .enq-phone-row:focus-within input,
.enq-panel-body .form-field input:focus,
.enq-panel-body .form-field textarea:focus { background: #fff; }

.enq-panel-body .enq-phone-row:focus-within {
    outline: none;
    box-shadow: none;
}
.enq-panel-body .enq-phone-row:focus-within .enq-country-code,
.enq-panel-body .enq-phone-row:focus-within input {
    border-color: var(--focus-accent);
    box-shadow: none;
}
.enq-panel-body .enq-phone-row:focus-within .enq-country-code { border-right-color: #E2E2E2; }


/* ==========================================================================
   THANK YOU MODAL
   Shown after a successful Contact form submission. Compact and centred, with
   the company lockup, a green check and one action. The Enquiry popup keeps
   its inline confirmation instead - it is already a dialog.
   ========================================================================== */
.ty-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 10, 20, .55);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.ty-overlay.is-open { opacity: 1; }

.ty-card {
    width: min(380px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 32px 28px 28px;
    text-align: center;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -12px rgba(3, 10, 20, .45);
    transform: translateY(10px) scale(.97);
    transition: transform .25s var(--ease);
}
.ty-overlay.is-open .ty-card { transform: none; }

.ty-logo {
    display: block;
    width: 150px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 20px;
}
.ty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--green-mist);
    color: var(--green-forest);
}
body[data-profile="psm"] .ty-icon { background: #F1F4F8; color: var(--navy-deep); }
.ty-icon svg { width: 26px; height: 26px; }

.ty-title {
    margin: 0 0 8px;
    font-family: var(--f-head);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--green-deep);
}
body[data-profile="psm"] .ty-title { color: var(--navy-deep); }

.ty-text {
    margin: 0 auto 20px;
    max-width: 30ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-body);
}

.ty-again {
    width: 100%;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--green-forest);
    color: #fff;
    font-family: var(--f-head);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
body[data-profile="psm"] .ty-again { background: var(--navy-deep); }
.ty-again:hover { background: var(--green-deep); }
body[data-profile="psm"] .ty-again:hover { background: #000F22; }

@media (prefers-reduced-motion: reduce) {
    .ty-overlay, .ty-card { transition: none; }
}
@media (max-width: 575px) {
    .ty-card { padding: 26px 20px 22px; }
    .ty-logo { width: 130px; margin-bottom: 16px; }
    .ty-icon { width: 50px; height: 50px; }
    .ty-title { font-size: 1.3125rem; }
}


/* ==========================================================================
   FLOATING-BUTTON LANES

   The WhatsApp/call column (fixed, left: 18px, 50px wide) and back-to-top
   (fixed, right: 18px, 44px wide) sit on top of the page. Rather than letting
   them land on text and relying only on updateFloatingOverlap()'s fade-out,
   the two main content containers reserve a lane at each edge so content is
   never underneath them in the first place.

   max-width grows by exactly what the padding adds, so on wide screens the
   readable column is still the same 1320px / 1400px it was - only viewports
   narrow enough to actually clash give any width up.

   Below 900px the buttons shrink and move inboard (see the max-width: 899px
   block above) and there simply isn't width to spare, so the lanes stop
   there and the existing .is-content-clash fade stays the safety net.
   ========================================================================== */

:root { --fab-lane: 78px; }

@media (min-width: 900px) {
    .wrap {
        max-width: calc(1320px + 2 * var(--fab-lane));
        padding-inline: max(var(--gutter), var(--fab-lane));
    }
    .pv-inner {
        max-width: calc(1400px + 2 * var(--fab-lane));
        padding-inline: max(2rem, var(--fab-lane));
    }

    /* Service detail pages don't use .wrap - they have their own containers.
       .svcd-main takes the lane rather than .svcd-main-inner: the inner is the
       white card, so padding there would inset the card's own contents instead
       of moving the card off the buttons. The card keeps its own 1400px
       max-width - the compensating max-width bump above only applies where the
       padding and the max-width are on the same element, which they are not
       here. .svcd-highlights-box needs nothing: it sits inside
       .svcd-section-inner and is already carried by that. */
    .svcd-main { padding-inline: max(2rem, var(--fab-lane)); }
    .svcd-section-inner,
    .svcd-related-inner {
        max-width: calc(1400px + 2 * var(--fab-lane));
        padding-inline: max(2rem, var(--fab-lane));
    }
    .svc-topbar { padding-inline: max(3rem, var(--fab-lane)); }
}