/* Shared layout scale for the hand-built sections (.wwd-*).
   Kept in sync with the builder export: sections are 1440px wide including
   their own horizontal padding, so content lines up with #i1lwz / #i1lwz-2-4. */
:root {
    --sec-max: 1440px;
    --sec-pad-x: clamp(20px, 4vw, 40px);
    --sec-pad-y: clamp(72px, 7.5vw, 120px);
    --sec-gap: clamp(32px, 4vw, 56px);
    --nav-offset: 96px;

    /* --- Colour, derived from the Oxyfinz mark ------------------------
       #408848 is the wordmark green; #f8b840 the largest ring segment.
       Every --text-* step clears WCAG AA (4.5:1) on --bg and --surface,
       so no copy on this site renders as unreadable grey. Ratios noted. */
    --bg: #0A0A0A;
    --surface: #141414;
    --surface-2: #1C1C1C;
    --surface-3: #101010;

    --text: #ffffff;            /* 20.4 : 1 */
    --text-2: #cdccd1;          /* 12.8 : 1  body copy */
    --text-3: #a9a9b1;          /*  8.8 : 1  descriptions, eyebrows */
    --text-4: #9a9aa4;          /*  7.3 : 1  dimmest text permitted */
    --text-on-light: #12261f;      /* on --card-light, 11.2 : 1 */
    --text-on-light-2: #2c4a3f;    /*  6.9 : 1 */
    --card-light: #c9ddd6;

    --brand: #408848;           /* logo green, for marks and fills */
    --brand-solid: #34703c;     /* button fill; white label = 5.95 : 1 */
    --brand-hover: #2b5f33;
    --brand-bright: #5fb56c;    /* green text/icons on dark, 8.1 : 1 */
    --brand-tint: #4088481f;
    --brand-line: #40884859;
    --accent: #f8b840;          /* logo amber, 11.6 : 1 */

    --line: #ffffff1f;
    --line-soft: #ffffff14;
    --line-strong: #ffffff2e;
    --rule: 1px solid var(--line);

    --danger: #e08a8a;
}

/* Light theme, applied only when the visitor's OS/browser is explicitly set
   to light — dark stays the default for "no preference" so existing dark
   users see no change. Scoped to the sections below only: the homepage's
   Navbar/Hero/SolutionsIntro/Security/CTA/Footer sit directly on a fixed,
   persistent 3D scene rendered by a compiled third-party bundle that can't
   be retthemed, so those stay dark in both modes (a deliberate dark hero/CTA
   bookend around light body content, same as most marketing sites use) and
   re-pin their own tokens back to these dark values regardless of this
   override - see the #security and #footer rules. */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f7f4;
        --surface: #ffffff;
        --surface-2: #f1f1ec;
        --surface-3: #ecebe4;

        --text: #10140f;            /* 18.6 : 1 on --surface */
        --text-2: #3a413c;          /* 10.5 : 1 */
        --text-3: #5b6259;          /*  6.3 : 1 */
        --text-4: #5f665b;          /*  5.9 : 1 */

        --brand: #2e6e38;
        --brand-solid: #2e6e38;
        --brand-hover: #245a2c;
        --brand-bright: #1e7a3a;    /* 5.4 : 1 on --surface */
        --brand-tint: #2e6e381f;
        --brand-line: #2e6e3859;
        --accent: #a66a0a;

        --line: #00000018;
        --line-soft: #00000010;
        --line-strong: #00000026;

        --danger: #b3413f;
    }
}

.wwd-section {
    width: 100%;
    background-color: var(--bg);
    padding: var(--sec-pad-y) var(--sec-pad-x);
    position: relative;
    scroll-margin-top: var(--nav-offset);
}

/* A section continuing the same dark band as the one above it: a reduced
   top rhythm so stacked sections read as a sequence, not as separate pages. */
.wwd-section--follow {
    padding-top: calc(var(--sec-pad-y) * 0.55);
}

.wwd-inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

.wwd-top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: var(--rule);
}

.wwd-eyebrow {
    font-family: DM Sans;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-3);
}

.wwd-index {
    font-family: DM Sans;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-4);
}

.wwd-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    column-gap: var(--sec-gap);
    row-gap: 24px;
    padding: var(--sec-gap) 0;
}

.wwd-headline {
    font-family: DM Sans;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.1em;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
    max-width: min(100%, 620px);
    text-wrap: balance;
}

.wwd-body {
    font-family: DM Sans;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.45em;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text-2);
    max-width: 46ch;
    margin: 0;
    padding-top: 6px;
    justify-self: end;
}

@media (max-width: 992px) {
    .wwd-header-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 32px 0;
    }

    .wwd-headline {
        max-width: none;
    }

    .wwd-body {
        justify-self: start;
        max-width: none;
        padding-top: 0;
    }
}