/* ==========================================================================
   CASEY BROWN SERVICES — DESIGN SYSTEM
   Register: Industrial.  Level 1 brief: _docs/DESIGN_CONTEXT.md
   Loaded AFTER style.css so it supersedes the legacy gold theme.

   Every colour is sampled from the client's own brand collateral
   (assets/brand/) and verified with design-doctrine/scripts/contrast.py.
   Do not "adjust" a value without re-running it.
   ========================================================================== */

:root {
    /* -- Brand: sampled from the designer's logo artwork ------------------ */
    --amber:        #FE9D24;   /* flat brand amber (logo droplet, flyer heads) */
    --amber-deep:   #F08A00;   /* droplet gradient base / hover               */
    --amber-ink:    #8F5200;   /* the ONLY amber allowed as text on light     */
    --amber-rgb:    254, 157, 36;

    /* -- Dark ground: sampled from the flyer ------------------------------ */
    --bg:           #12171A;   /* deep ground                                 */
    --surface:      #1C1F24;   /* the flyer's banner bars                     */
    --elevated:     #262A30;
    --charcoal:     #2C2C2C;   /* logo-artwork ground, for seamless joins     */
    --border:       #2E333A;   /* decorative hairline                         */
    --border-ctl:   #5F666E;   /* form controls: 3.11:1, meets WCAG UI        */
    --text-hi:      #FFFFFF;   /* 18.05:1                                     */
    --text:         #EDEFF1;   /* 15.66:1                                     */
    --muted:        #A2A9B0;   /*  7.60:1                                     */

    /* -- Light ground: the client's "more white" -------------------------- */
    --l-bg:         #FFFFFF;
    --l-sunken:     #ECECEC;   /* the flyer's value band                      */
    --l-rule:       #DEDEDE;
    --l-border-ctl: #767C84;   /* 4.21:1                                      */
    --l-ink:        #16191C;   /* 17.65:1                                     */
    --l-muted:      #5A6066;   /*  6.36:1                                     */

    /* -- Semantic: two variants, because we ship both grounds ------------- */
    --danger:       #E5484D;   --danger-ink:  #C4341F;
    --ok:           #3DA35D;   --ok-ink:      #1F7A43;

    /* -- Type ------------------------------------------------------------- */
    --font-display: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
    --font-body:    'Archivo', system-ui, -apple-system, sans-serif;

    --step--2: clamp(0.75rem,   0.73rem + 0.08vw, 0.8125rem);
    --step--1: clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);
    --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);   /* 17px floor */
    --step-1:  clamp(1.25rem,   1.18rem + 0.36vw, 1.4375rem);
    --step-2:  clamp(1.625rem,  1.49rem + 0.68vw, 2rem);
    --step-3:  clamp(2.125rem,  1.87rem + 1.27vw, 2.875rem);
    --step-4:  clamp(2.75rem,   2.3rem  + 2.25vw, 4rem);
    --step-display: clamp(2.75rem, 1.55rem + 5.6vw, 6.25rem);

    /* -- Motion: Industrial. Deliberate, weighty, never bouncy ------------ */
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-firm: cubic-bezier(0.65, 0, 0.35, 1);
    --dur:       600ms;
    --dur-micro: 160ms;

    /* -- Form ------------------------------------------------------------- */
    --radius: 2px;             /* industrial is hard-edged */
    --rule-w: 3px;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --shell:  min(100% - (var(--gutter) * 2), 78rem);
    --slash:  3.5vw;           /* the signature diagonal depth */
}

@media (max-width: 48rem) { :root { --slash: 6vw; } }

/* ==========================================================================
   BASE
   ========================================================================== */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.tnum, table, .stat, time, .num { font-variant-numeric: tabular-nums; }

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
    border-radius: var(--radius);
}
.ground-light :focus-visible,
.ground-sunken :focus-visible { outline-color: var(--amber-ink); }

::selection { background: var(--amber); color: #0D0D0D; }

.shell { width: var(--shell); margin-inline: auto; }

.u-hide {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Skip link: keyboard users land here first */
.skip-link {
    position: absolute; left: 0.5rem; top: -4rem; z-index: 200;
    background: var(--amber); color: #0D0D0D;
    padding: 0.7rem 1.1rem; font-weight: 700; border-radius: var(--radius);
    transition: top var(--dur-micro) var(--ease-firm);
}
.skip-link:focus { top: 0.5rem; }

/* ==========================================================================
   GROUNDS - alternating dark/light is the page's navigational rhythm
   ========================================================================== */

.ground-dark   { background: var(--bg);       color: var(--text); }
.ground-panel  { background: var(--surface);  color: var(--text); }
.ground-light  { background: var(--l-bg);     color: var(--l-ink); }
.ground-sunken { background: var(--l-sunken); color: var(--l-ink); }

.ground-light  .u-muted, .ground-sunken .u-muted { color: var(--l-muted); }
.ground-dark   .u-muted, .ground-panel  .u-muted { color: var(--muted); }

/* NEVER --amber as text on light: it measures 2.09:1 */
.ground-light  .u-accent, .ground-sunken .u-accent { color: var(--amber-ink); }
.ground-dark   .u-accent, .ground-panel  .u-accent { color: var(--amber); }

/* ==========================================================================
   SIGNATURE 1 - THE SLASH
   The designer's flyer separates copy from photography with a steep diagonal.
   That edge is the brand's compositional voice. Reproduced with clip-path so
   it costs nothing, and flattened at mobile where a steep angle eats the copy.
   ========================================================================== */

.slash       { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slash)), 0 100%); }
.slash--up   { clip-path: polygon(0 var(--slash), 100% 0, 100% 100%, 0 100%); }
.slash--both { clip-path: polygon(0 var(--slash), 100% 0, 100% calc(100% - var(--slash)), 0 100%); }
.slash-pull  { margin-top: calc(var(--slash) * -1); }

/* Diagonal seam between two side-by-side panels. Desktop only: at mobile the
   panels stack and a diagonal would crop the photograph's subject. */
@media (min-width: 62rem) {
    .slash-split__media { clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); }
}

/* ==========================================================================
   SIGNATURE 2 - CORNER BRACKETS
   Lifted from the flyer's caption blocks: an amber L-rule anchoring a corner.
   Used on stats, captions and callouts INSTEAD of a bordered card.
   ========================================================================== */

.bracket { position: relative; padding: 1.15rem 0 0.35rem 1.15rem; }
.bracket::before {
    content: "";
    position: absolute; left: 0; top: 0;
    width: 1.6rem; height: 1.6rem;
    border-left: var(--rule-w) solid var(--amber);
    border-top:  var(--rule-w) solid var(--amber);
}
.bracket--close::after {
    content: "";
    position: absolute; right: 0; bottom: 0;
    width: 1.6rem; height: 1.6rem;
    border-right:  var(--rule-w) solid var(--amber);
    border-bottom: var(--rule-w) solid var(--amber);
}
.ground-light .bracket::before,  .ground-light .bracket--close::after,
.ground-sunken .bracket::before, .ground-sunken .bracket--close::after {
    border-color: var(--amber-ink);
}

/* ==========================================================================
   SIGNATURE 3 - THE HAZARD RULE
   A 3px amber line that draws itself in. Marks section heads.
   ========================================================================== */

.hazard-rule {
    display: block;
    width: clamp(3rem, 8vw, 6rem);
    height: var(--rule-w);
    background: var(--amber);
    margin-bottom: 1.5rem;
    transform-origin: left center;
    transform: scaleX(0);
    animation: rule-draw 700ms var(--ease) forwards;
}
@keyframes rule-draw { to { transform: scaleX(1); } }

.hazard-rule--tape {
    width: clamp(5rem, 14vw, 11rem);
    background: repeating-linear-gradient(135deg,
        var(--amber) 0 10px, var(--bg) 10px 20px);
}
.ground-light .hazard-rule,  .ground-sunken .hazard-rule  { background: var(--amber-ink); }
.ground-light .hazard-rule--tape, .ground-sunken .hazard-rule--tape {
    background: repeating-linear-gradient(135deg,
        var(--amber-ink) 0 10px, var(--l-ink) 10px 20px);
}
.hazard-rule--center { margin-inline: auto; }

/* ==========================================================================
   TYPE
   ========================================================================== */

.eyebrow {
    display: block;
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--amber);
    margin-bottom: 0.85rem;
}
.ground-light .eyebrow, .ground-sunken .eyebrow { color: var(--amber-ink); }

.display {
    font-family: var(--font-display);
    font-size: var(--step-display);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-wrap: balance;
}
.h-section {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}
.h-sub {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}
.lede    { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; }
.prose p { max-width: 68ch; }

/* The flyer's amber continuation line: "SAFETY, CONSULTING / & COMPLIANCE" */
.display em, .h-section em { font-style: normal; display: block; color: var(--amber); }
.ground-light .display em,  .ground-light .h-section em,
.ground-sunken .display em, .ground-sunken .h-section em { color: var(--amber-ink); }

/* ==========================================================================
   BRAND LOCKUP - rebuilt as live text so it stays crisp at any size.
   Follows the flyer: CBS white, HSE amber, OIL AND GAS beneath.
   ========================================================================== */

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__mark {
    width: 2.75rem; height: 2.75rem;   /* square. it stays square. */
    object-fit: contain;
    border-radius: 0;
    flex: none;
}
.brand__type { display: flex; align-items: flex-start; gap: 0.28rem; line-height: 1; }
.brand__cbs {
    font-family: var(--font-display);
    font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-hi); text-transform: uppercase;
}
.brand__tag { display: flex; flex-direction: column; padding-top: 0.15rem; }
.brand__tag b {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--amber); line-height: 1;
}
.brand__tag span {
    font-size: 0.44rem; font-weight: 600; letter-spacing: 0.055em;
    color: var(--muted); line-height: 1.4; text-transform: uppercase;
}
@media (max-width: 30rem) {
    .brand__cbs  { font-size: 1.6rem; }
    .brand__mark { width: 2.4rem; height: 2.4rem; }
}

/* ==========================================================================
   HERO - still photography. Videos removed: 23MB, no posters, AI watermark.
   ========================================================================== */

.hero {
    position: relative; isolation: isolate;
    min-height: 100svh;
    display: flex; align-items: center; overflow: hidden;
}
.hero--short { min-height: 78svh; }

.hero__media {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
    filter: saturate(0.82) contrast(1.06) brightness(0.92);
}

/* Graded scrim, not a flat wash: the photo stays a photo, the copy stays legible */
.hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(18,23,26,0.97) 0%,  rgba(18,23,26,0.90) 34%,
            rgba(18,23,26,0.55) 62%, rgba(18,23,26,0.30) 100%),
        linear-gradient(to top, rgba(18,23,26,0.88) 0%, transparent 45%);
}
@media (max-width: 48rem) {
    .hero__scrim {
        background: linear-gradient(to top,
            rgba(18,23,26,0.97) 0%, rgba(18,23,26,0.92) 45%, rgba(18,23,26,0.74) 100%);
    }
}
.hero__inner {
    position: relative; width: 100%;
    padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 8vh, 5rem);
}
.hero__copy { max-width: min(62%, 46rem); }    /* asymmetric. never 50/50. */
@media (max-width: 62rem) { .hero__copy { max-width: 100%; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ==========================================================================
   PROOF ROW - what a procurement manager actually checks.
   Replaces the three-icon-card reflex.
   ========================================================================== */

.proof {
    display: grid; gap: 1.5rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-top: clamp(2.5rem, 6vh, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    max-width: 46rem;
}
.proof dt {
    font-size: var(--step--2); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--muted); margin-bottom: 0.4rem;
}
.proof dd {
    font-family: var(--font-display);
    font-size: var(--step-1); font-weight: 700; line-height: 1.1;
    color: var(--text-hi); margin: 0;
}
.ground-light .proof, .ground-sunken .proof { border-top-color: var(--l-rule); }
.ground-light .proof dt, .ground-sunken .proof dt { color: var(--l-muted); }
.ground-light .proof dd, .ground-sunken .proof dd { color: var(--l-ink); }

/* ==========================================================================
   VALUE BAND - the flyer's light 4-up, divided by rules rather than boxed
   into cards. Divider rules are cheaper than borders and read as one object.
   ========================================================================== */

.values {
    display: grid; gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.values > * {
    padding: 2rem clamp(1.25rem, 3vw, 2.25rem);
    border-left: 1px solid var(--l-rule);
}
.values > *:first-child { border-left: 0; }
@media (max-width: 60rem) {
    .values > * { border-left: 0; border-top: 1px solid var(--l-rule); }
    .values > *:first-child { border-top: 0; }
}
.values h3 {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    font-size: var(--step-1); letter-spacing: 0.01em; margin-bottom: 0.5rem;
}
.values p { font-size: var(--step--1); color: var(--l-muted); max-width: 32ch; }
.values .ico { font-size: 2rem; color: var(--l-ink); display: block; margin-bottom: 0.9rem; }

/* ==========================================================================
   CHECKLIST - the flyer's amber circled ticks with a hairline under-rule
   ========================================================================== */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--step-0);
}
.checklist li::before {
    content: "\2713";
    flex: none;
    width: 1.4rem; height: 1.4rem; margin-top: 0.16rem;
    display: grid; place-items: center;
    border: 2px solid var(--amber); border-radius: 50%;
    color: var(--amber); font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.ground-light .checklist li, .ground-sunken .checklist li { border-bottom-color: var(--l-rule); }
.ground-light .checklist li::before, .ground-sunken .checklist li::before {
    border-color: var(--amber-ink); color: var(--amber-ink);
}

/* ==========================================================================
   BADGE ICON - amber outline ring, from the flyer's caption markers
   ========================================================================== */

.badge-icon {
    width: 3rem; height: 3rem; flex: none;
    display: grid; place-items: center;
    border: 2px solid var(--amber); border-radius: 50%;
    color: var(--amber); font-size: 1.35rem;
}
.ground-light .badge-icon, .ground-sunken .badge-icon {
    border-color: var(--amber-ink); color: var(--amber-ink);
}
.badge-icon--solid { background: var(--amber); color: #0D0D0D; border-color: var(--amber); }

/* ==========================================================================
   TAGLINE BAR - "SAFETY IS OUR MAIN GOAL | EVERY PERSON. EVERY TASK."
   The flyer's closing rhythm, with the repeated word carried in amber.
   ========================================================================== */

.tagline-bar {
    background: var(--surface);
    border-block: 1px solid var(--border);
    padding-block: 1.1rem;
    text-align: center;
    font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    font-size: var(--step--1); color: var(--text);
}
.tagline-bar i { font-style: normal; color: var(--amber); }
.tagline-bar span { color: var(--muted); margin-inline: 0.75rem; }

/* ==========================================================================
   CAPTION TILE - photo + overlaid title block with an amber bracket.
   The flyer's three image callouts.
   ========================================================================== */

.tile { position: relative; overflow: hidden; background: var(--charcoal); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block;
            filter: saturate(0.85) contrast(1.04);
            transition: transform var(--dur) var(--ease); }
.tile:hover img, .tile:focus-within img { transform: scale(1.035); }
.tile__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(to top, rgba(18,23,26,0.96) 30%, rgba(18,23,26,0));
    color: var(--text);
}
.tile__cap h3 {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    font-size: var(--step-1); line-height: 1.1; color: var(--text-hi);
}
.tile__cap p { font-size: var(--step--1); color: var(--muted); margin-top: 0.3rem; max-width: 40ch; }
.tile__cap::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 1.5rem; height: 1.5rem;
    border-right: var(--rule-w) solid var(--amber);
    border-bottom: var(--rule-w) solid var(--amber);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: block; margin-bottom: 1.15rem; }
.field > label {
    display: block; margin-bottom: 0.4rem;
    font-size: var(--step--1); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
}
.ground-light .field > label, .ground-sunken .field > label { color: var(--l-muted); }

.input, .field input, .field select, .field textarea {
    width: 100%; min-height: 48px;
    padding: 0.75rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border-ctl);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body); font-size: var(--step-0);
    transition: border-color var(--dur-micro) var(--ease-firm),
                box-shadow var(--dur-micro) var(--ease-firm);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--amber);
    box-shadow: inset 0 -2px 0 var(--amber);
    outline-offset: 1px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.ground-light .input, .ground-light .field input,
.ground-light .field select, .ground-light .field textarea,
.ground-sunken .input, .ground-sunken .field input,
.ground-sunken .field select, .ground-sunken .field textarea {
    background: var(--l-bg); color: var(--l-ink); border-color: var(--l-border-ctl);
}
.ground-light .input:focus, .ground-sunken .input:focus,
.ground-light .field input:focus, .ground-light .field textarea:focus,
.ground-light .field select:focus {
    border-color: var(--amber-ink); box-shadow: inset 0 -2px 0 var(--amber-ink);
}
.field__hint  { font-size: var(--step--1); color: var(--muted); margin-top: 0.3rem; }
.field__error { font-size: var(--step--1); color: var(--danger); margin-top: 0.3rem; font-weight: 600; }
.ground-light .field__error, .ground-sunken .field__error { color: var(--danger-ink); }
[aria-invalid="true"] { border-color: var(--danger) !important; }

/* ==========================================================================
   ALERTS - inline status, left-ruled rather than boxed
   ========================================================================== */

.alert {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border-left: var(--rule-w) solid var(--muted);
    border-radius: var(--radius);
    font-size: var(--step--1);
    margin-bottom: 1.25rem;
}
.alert--ok     { border-left-color: var(--ok); }
.alert--error  { border-left-color: var(--danger); }
.alert--amber  { border-left-color: var(--amber); }
.ground-light .alert, .ground-sunken .alert { background: var(--l-sunken); color: var(--l-ink); }

/* ==========================================================================
   TOASTS - transient notification stack, bottom-right on desktop,
   full-width above the thumb on mobile.
   ========================================================================== */

.toast-stack {
    position: fixed; z-index: 120;
    right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem));
    display: flex; flex-direction: column; gap: 0.6rem;
    pointer-events: none;
}
@media (max-width: 40rem) {
    .toast-stack { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; }
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--elevated);
    color: var(--text);
    border-left: var(--rule-w) solid var(--amber);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    font-size: var(--step--1);
    transform: translateY(0.75rem); opacity: 0;
    animation: toast-in 380ms var(--ease) forwards;
}
.toast--ok    { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--danger); }
.toast.is-out { animation: toast-out 260ms var(--ease-firm) forwards; }
.toast__body  { flex: 1; }
.toast__title { font-weight: 700; display: block; margin-bottom: 0.1rem; color: var(--text-hi); }
.toast__close {
    background: none; border: 0; color: var(--muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    padding: 0.2rem; min-width: 32px; min-height: 32px;
}
.toast__close:hover { color: var(--text-hi); }
@keyframes toast-in  { to { transform: translateY(0);      opacity: 1; } }
@keyframes toast-out { to { transform: translateY(0.5rem); opacity: 0; } }

/* ==========================================================================
   SECTION RHYTHM - varied on purpose. Uniform padding is the sound of nothing.
   ========================================================================== */

.sec        { padding-block: clamp(4rem, 8vw, 7rem); }
.sec--tall  { padding-block: clamp(6rem, 13vw, 11rem); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

.sec-head { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* ==========================================================================
   REVEAL - one-shot, staggered, capped. Never fade-everything-on-scroll.
   ========================================================================== */

[data-reveal] { opacity: 0; transform: translateY(1.5rem); }
[data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur) var(--ease) calc(var(--i, 0) * 70ms),
                transform var(--dur) var(--ease) calc(var(--i, 0) * 70ms);
}

/* ==========================================================================
   REDUCED MOTION - a designed still state, not a broken layout.
   Nothing may be left invisible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal]  { opacity: 1 !important; transform: none !important; }
    .hazard-rule   { transform: scaleX(1) !important; animation: none !important; }
    .toast         { opacity: 1 !important; transform: none !important; }
    .tile:hover img { transform: none !important; }
}

/* ==========================================================================
   PRINT - procurement people print these pages
   ========================================================================== */

@media print {
    body { background: #FFF; color: #000; }
    .no-print, .toast-stack, .hero__scrim, #page-loader { display: none !important; }
    .hero { min-height: auto; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* ==========================================================================
   SITE HEADER + NAVIGATION
   ========================================================================== */

#site-header { transition: background-color var(--dur-micro) var(--ease-firm); }
#site-header.is-scrolled { background-color: rgba(18, 23, 26, 0.985) !important; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); margin: 0; padding: 0; list-style: none; }

.nav__link {
    position: relative;
    display: block;
    padding-block: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--dur-micro) var(--ease-firm);
}
.nav__link::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--rule-w);
    background: var(--amber);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 260ms var(--ease);
}
.nav__link:hover { color: var(--amber); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--text-hi); }

/* Hamburger drawn in CSS: no icon font dependency, and it morphs into a close X */
.nav-toggle {
    position: relative;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: none; border: 0; cursor: pointer;
    color: var(--text);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    display: block; width: 22px; height: 2px;
    background: currentColor;
    transition: transform 240ms var(--ease), opacity 140ms linear;
}
.nav-toggle__bars::before { position: absolute; transform: translateY(-7px); }
.nav-toggle__bars::after  { position: absolute; transform: translateY(7px); }
.nav-toggle.is-open { color: var(--amber); }
.nav-toggle.is-open .nav-toggle__bars { background: transparent; }
.nav-toggle.is-open .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars::after  { transform: rotate(-45deg); }

.mobile-menu {
    background: var(--bg);
    border-top: 1px solid var(--border);
    max-height: calc(100svh - 4.5rem);
    overflow-y: auto;
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu-item {
    display: block;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.mobile-menu-item.is-current { color: var(--amber); }
.mobile-menu-item:active { background: var(--surface); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); }
.site-footer h3 {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--amber);
    margin-bottom: 1.25rem;
}
.site-footer a { color: var(--muted); text-decoration: none; transition: color var(--dur-micro) var(--ease-firm); }
.site-footer a:hover { color: var(--amber); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.65rem; }

.footer-lockup {
    display: block; width: 100%; max-width: 22rem;
    border-radius: var(--radius);
    /* No border. The artwork's own charcoal ground already separates it from
       the footer surface, and a hairline on top of that edge reads as a
       rendering artefact rather than a frame. */
}

.footer-contact { display: flex; align-items: flex-start; gap: 0.7rem; }
.footer-contact i { color: var(--amber); font-size: 1.1rem; line-height: 1.5; flex: none; }

.footer-legal {
    border-top: 1px solid var(--border);
    margin-top: clamp(2rem, 5vw, 3rem);
    padding-top: 1.5rem;
    font-size: var(--step--1);
    color: var(--muted);
}

/* ==========================================================================
   LOGO STRIP
   Client logos are drawn for white grounds, so the band is white and the
   logos sit directly on it. No cards, no shadows, no scale-on-hover.
   Desaturated at rest so eleven competing brand palettes do not fight the
   amber; full colour on hover for anyone who wants to read them.
   ========================================================================== */

.logo-strip__item {
    flex: none;
    height: clamp(2.75rem, 6vw, 4.25rem);
    width: auto;
    max-width: 12rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter var(--dur-micro) var(--ease-firm),
                opacity var(--dur-micro) var(--ease-firm);
}
.logo-strip__item:hover { filter: grayscale(0); opacity: 1; }

/* Legacy section separators and the gold underline belong to the retired
   theme. Neutralised here rather than hunted through 47KB of style.css. */
.gold-underline::after { display: none !important; }
.section-separator::before, .section-separator::after { display: none !important; }

/* ==========================================================================
   STAFF ENTRANCE
   A quiet route into the timesheet portal. It must be findable by crews
   without competing with the buyer's path to Contact — so it is a muted
   text link, not a second button, and it only appears once there is room
   for it (lg and up; the mobile menu carries its own).
   ========================================================================== */

.nav-staff {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding-inline: 0.6rem;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur-micro) var(--ease-firm);
}
.nav-staff:hover { color: var(--amber); }
.nav-staff i { font-size: 1.05rem; }

/* ==========================================================================
   MOBILE MENU — override of the legacy collapse
   style.css carries `#mobile-menu { max-height:0; opacity:0 }` with a
   `.open` class to expand it. That is an ID selector, so it outranks the
   `.mobile-menu` rules above, and the class name no longer matches what
   app.js sets. The result was a menu that toggled its button to an X while
   staying zero-height.

   Neutralised here at equal specificity. Visibility is driven by `hidden`
   alone; `max-height: 500px` is not reinstated because the menu now carries
   six links plus two buttons and would clip.
   ========================================================================== */

#mobile-menu.mobile-menu {
    position: static;              /* it sits inside the already-fixed header */
    max-height: calc(100svh - 4.5rem);
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
    border-top: 1px solid var(--border);
    transition: none;              /* the legacy max-height transition is gone */
}

#mobile-menu.mobile-menu.is-open {
    animation: menu-drop 240ms var(--ease);
}

@keyframes menu-drop {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu.mobile-menu.is-open { animation: none; }
}

/* ==========================================================================
   BUTTONS
   Restored. These were lost when this file was rewritten for the sampled
   palette, so every .btn on the site had been rendering as an unstyled
   inline link — hero calls to action, the mobile menu, the 404 page.

   Amber fill with a near-black label measures 9.31:1 and works on BOTH
   grounds, which is why the primary button needs no light-ground variant.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;                 /* above the 44px touch floor */
    padding: 0.85rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-firm),
                border-color var(--dur-micro) var(--ease-firm),
                color var(--dur-micro) var(--ease-firm),
                transform var(--dur-micro) var(--ease-firm);
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: 1.1em; line-height: 1; }

.btn--primary { background: var(--amber); color: #0D0D0D; }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--amber-deep); color: #0D0D0D; }

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-ctl);
}
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--amber); color: var(--amber); }

.ground-light .btn--ghost,
.ground-sunken .btn--ghost { color: var(--l-ink); border-color: var(--l-border-ctl); }
.ground-light .btn--ghost:hover,
.ground-sunken .btn--ghost:hover { border-color: var(--amber-ink); color: var(--amber-ink); }

/* Full width. On a phone menu, two of these must stack rather than collide. */
.btn--block { display: flex; width: 100%; }

.btn--sm {
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: var(--step--1);
    gap: 0.4rem;
}

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Long labels must wrap inside the button rather than overflow the screen. */
@media (max-width: 26rem) {
    .btn { padding-inline: 1.1rem; }
    .btn--block { white-space: normal; }
}

/* ==========================================================================
   FULL-SCREEN MENU
   Replaces the inline dropdown. Mechanisms borrowed from the reference:
   an overlay panel, oversized indexed type as the navigation, a staggered
   entrance, and a quiet secondary zone at the bottom.

   Executed in the Industrial register rather than copied: hard edges and a
   hazard-tape header instead of a rounded card, a drawn amber bar instead of
   a colour swap, and the 24/7 number given the weight it earns on a phone.
   ========================================================================== */

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
    padding-top: calc(env(safe-area-inset-top));
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* visibility, not display: display:none cannot be transitioned, and it
       also drops the panel out of the tab order abruptly mid-animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--ease-firm), visibility 0s linear 220ms;
}
.site-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms var(--ease-firm), visibility 0s;
}
@media (min-width: 48rem) {
    /* Never a full-bleed sheet on a tablet — anchor it to one side. */
    .site-menu { left: auto; width: min(30rem, 88vw); border-left: 1px solid var(--border); }
}

.site-menu__tape {
    position: absolute; inset: 0 0 auto; height: 6px;
    background: repeating-linear-gradient(135deg,
        var(--amber) 0 10px, var(--bg) 10px 20px);
}

.site-menu__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem 0.5rem;
    flex: none;
}

.site-menu__eyebrow {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-menu__close {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 48px; padding-inline: 0.5rem;
    background: none; border: 0; cursor: pointer;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step--1); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: color var(--dur-micro) var(--ease-firm);
}
.site-menu__close i { font-size: 1.5rem; }
.site-menu__close:hover { color: var(--amber); }

/* ---- the navigation itself ---- */
.site-menu__nav { flex: 1 0 auto; display: flex; align-items: center; padding-block: 1rem; }
.site-menu__nav ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.site-menu__nav li { margin: 0; }

.site-menu__link {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.35rem 0 0.35rem 1rem;
    text-decoration: none;
    color: var(--text);
    transition: color var(--dur-micro) var(--ease-firm),
                transform 260ms var(--ease);
}
/* the drawn bar — the hazard rule, rotated into a margin marker */
.site-menu__link::before {
    content: "";
    position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem;
    width: var(--rule-w);
    background: var(--amber);
    transform: scaleY(0); transform-origin: top center;
    transition: transform 260ms var(--ease);
}
.site-menu__link:hover, .site-menu__link:focus-visible { color: var(--amber); }
.site-menu__link:hover::before,
.site-menu__link:focus-visible::before,
.site-menu__link.is-current::before { transform: scaleY(1); }
.site-menu__link.is-current { color: var(--amber); }

.site-menu__label {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 11vw, 3.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}
.site-menu__num {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--amber);
    padding-top: 0.35rem;
    flex: none;
}
.site-menu__link.is-current .site-menu__num { color: var(--text-hi); }

/* ---- the quiet zone ---- */
.site-menu__foot {
    flex: none;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}
.site-menu__phone {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-hi);
    text-decoration: none;
    margin: 0.35rem 0 1rem;
}
.site-menu__phone:hover { color: var(--amber); }

.site-menu__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-menu__links a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px;
    color: var(--muted); text-decoration: none;
    font-size: var(--step--1); font-weight: 600;
    transition: color var(--dur-micro) var(--ease-firm);
}
.site-menu__links a:hover { color: var(--amber); }

/* ---- the stagger ---- */
.site-menu__nav li,
.site-menu__foot { opacity: 0; }

.site-menu.is-open .site-menu__nav li,
.site-menu.is-open .site-menu__foot {
    /* animation, not transition: `forwards` guarantees the element ends
       visible even if the animation is interrupted or never gets to run.
       A transition that does not fire leaves the item at opacity 0, which
       is a menu nobody can read. */
    animation: menu-item-in 400ms var(--ease) calc(60ms + var(--i, 0) * 55ms) forwards;
}

@keyframes menu-item-in {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
}

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .site-menu { transition-duration: 0.01ms !important; }
    .site-menu.is-open .site-menu__nav li,
    .site-menu.is-open .site-menu__foot { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
    .site-menu__nav li, .site-menu__foot { opacity: 1; transform: none; }
    .site-menu__link::before { transition: none; }
}

/* ==========================================================================
   HERO EDGE
   Was referenced in the markup on every page with no rule behind it — an
   empty div doing nothing. It marks where the hero photograph stops, so the
   image never just ends mid-gradient when the section below is dark rather
   than a light slash band.
   ========================================================================== */

.hero__edge {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--amber) 0%,
        var(--amber) clamp(3rem, 12vw, 9rem),
        var(--border) clamp(3rem, 12vw, 9rem),
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}