/* ==========================================================================
   Warba International Co. for Renting and Leasing (WIC)
   style.css — tokens, reset, base typography, layout primitives

   Design note
   -----------
   Warba is not a consumer car-hire brand. It is a fleet operator in Ahmadi
   serving K-Companies, EPC and civil contractors. The system is therefore
   built like a plant-hire register rather than a booking site: a condensed
   grotesque for signage, a monospace layer for anything countable, and one
   piece of equipment-livery amber reserved exclusively for fleet class.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Colour -----------------------------------------------------------
       Cyan is sampled straight from the WIC roundel. The ground is a
       petroleum near-black rather than a neutral grey — Ahmadi, not showroom.
       Amber appears in exactly one role: the fleet-class marker. Nowhere
       else, so that the eye learns it means "which part of the fleet".    */
    --primary-color:  #0095C8;   /* sampled from the WIC lockup */
    --primary-dark:   #00719C;
    --primary-deep:   #00506F;
    --primary-wash:   #E7F4F9;

    --ink:            #0B1A22;   /* hero + footer ground */
    --ink-2:          #12262F;
    --ink-3:          #1B3540;

    --light-color:    #F1F4F6;
    --surface:        #FFFFFF;
    --surface-sunken: #E7EDF0;

    --text-color:     #12242D;
    --text-muted:     #55666F;
    --text-faint:     #5D6C74;   /* micro-labels; clears AA on white, light and sunken */
    --text-invert:    #FFFFFF;
    --text-invert-mu: #A9BAC4;
    --text-faint-inv: #8496A0;   /* micro-labels on the ink ground */

    --border-color:   #D9E1E6;
    --border-strong:  #BECBD3;
    --border-invert:  rgba(255, 255, 255, .14);

    --plant:          #E8A33D;   /* equipment livery — fleet class only */
    --plant-deep:     #8A5D12;   /* same hue, AA-safe on light grounds */

    --accent-color:    var(--primary-color);
    --secondary-color: var(--ink);
    --focus-ring:      #0095C8;

    /* --- Type ------------------------------------------------------------
       One superfamily across three widths. The condensed cut carries every
       heading, the regular cut carries prose, the mono carries anything a
       reader would count or check — unit tallies, hours, phone numbers. */
    --font-display: "IBM Plex Sans Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
    --font-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --step--2: 0.75rem;
    --step--1: 0.8125rem;
    --step-0:  1rem;
    --step-1:  1.0625rem;
    --step-2:  clamp(1.25rem, 0.6vw + 1.1rem, 1.4375rem);
    --step-3:  clamp(1.5rem, 1vw + 1.25rem, 1.9375rem);
    --step-4:  clamp(1.9rem, 1.9vw + 1.4rem, 2.75rem);
    --step-5:  clamp(2.15rem, 2.6vw + 1.35rem, 3.5rem);

    /* --- Space ----------------------------------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;

    --container: 1240px;
    --container-narrow: 880px;
    --gutter: 24px;
    --section-spacing: var(--sp-9);

    --radius-sm: 2px;
    --radius:    3px;
    --radius-lg: 6px;

    --shadow-sm: 0 1px 2px rgba(11, 26, 34, .06);
    --shadow:    0 2px 10px rgba(11, 26, 34, .07), 0 1px 2px rgba(11, 26, 34, .05);
    --shadow-lg: 0 14px 38px rgba(11, 26, 34, .12), 0 2px 6px rgba(11, 26, 34, .06);

    --header-h: 74px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .28s;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.005em;
    color: var(--text-color);
    text-wrap: balance;
}

h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 600; }

p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-deep); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15em; }
li + li { margin-top: var(--sp-2); }

hr { height: 1px; margin: var(--sp-7) 0; border: 0; background: var(--border-color); }

strong, b { font-weight: 600; }

::selection { background: var(--primary-color); color: #fff; }

/* --- Focus --------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
    position: absolute;
    top: 0;
    left: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-110%);
    transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* --- Layout primitives ---------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-spacing); }
.section--tight { padding-block: var(--sp-8); }
.section--sunken { background: var(--light-color); }
.section--rule { border-top: 1px solid var(--border-color); }

/* Inverted ground. Everything inside flips to the dark palette so a section
   can be dropped onto the ink without restating a dozen colour rules.     */
.on-dark {
    background: var(--ink);
    color: var(--text-invert);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-invert); }
.on-dark p, .on-dark li { color: var(--text-invert-mu); }
.on-dark a { color: #fff; }
.on-dark hr { background: var(--border-invert); }

/* --- Section headers ------------------------------------------------------
   The eyebrow is a mono label with a short cyan rule. It names the register
   the section belongs to — it is a locator, not decoration.              */
.eyebrow {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.eyebrow::before {
    content: "";
    flex: none;
    width: 26px;
    height: 2px;
    margin-top: .62em;
    background: var(--primary-color);
}
.on-dark .eyebrow { color: var(--primary-color); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head p {
    font-size: var(--step-1);
    color: var(--text-muted);
    text-wrap: pretty;
}
.on-dark .section-head p { color: var(--text-invert-mu); }

.section-head--center {
    max-width: 68ch;
    margin-inline: auto;
    text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }

/* --- Prose ---------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { color: var(--text-muted); text-wrap: pretty; }
.prose > :last-child { margin-bottom: 0; }

.lede {
    font-size: var(--step-2);
    line-height: 1.5;
    color: var(--text-color);
    font-weight: 400;
    text-wrap: pretty;
}
.on-dark .lede { color: #E4ECF0; }

/* --- Utilities ------------------------------------------------------------ */
.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;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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