/* ==========================================================================
   International Paint Warba — Design System
   style.css  ·  tokens, reset, base typography, layout primitives
   --------------------------------------------------------------------------
   Palette is sampled directly from the IWC / International Paint logo:
     #03438A  brand blue   (wordmark)
     #E6312B  brand red    (propeller mark)
   Everything else is a cool steel neutral scale, chosen to sit under
   industrial photography without competing with it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand */
    --primary-color: #03438a;
    --primary-deep: #022b58;
    --primary-700: #043a77;
    --primary-tint: #e9f0f8;
    --secondary-color: #0f5fa8;
    --primary-500: var(--secondary-color);
    --accent-color: #e6312b;
    --accent-dark: #c2231d;

    /* Steel neutrals */
    --dark-color: #0c1420;
    --steel-800: #1b2634;
    --steel-600: #4a5768;
    --steel-300: #a9b6c6;
    --steel-200: #d8e0ea;
    --steel-100: #eaeff5;
    --light-color: #f2f5f9;
    --paper: #ffffff;

    /* Semantic */
    --text-color: #28313d;
    --text-muted: #5c6b7e;
    --text-invert: #ffffff;
    --border-color: #d8e0ea;
    --border-strong: #b9c5d4;

    /* Type */
    --font-display: "Archivo", "Segoe UI", Arial, sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;

    --fs-eyebrow: 0.75rem;
    --fs-small: 0.875rem;
    --fs-body: 1rem;
    --fs-lead: 1.125rem;
    --fs-h4: 1.125rem;
    --fs-h3: 1.375rem;
    --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
    --fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
    --fs-hero: clamp(2.125rem, 1.2rem + 4.2vw, 4rem);

    /* Space scale (8px base) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;

    /* Layout */
    --container: 1240px;
    --container-narrow: 900px;
    --gutter: 1.5rem;
    --radius-sm: 2px;
    --radius: 4px;
    --radius-lg: 6px;

    /* Elevation — restrained, never coloured glows */
    --shadow-sm: 0 1px 2px rgba(12, 20, 32, 0.06);
    --shadow: 0 2px 8px rgba(12, 20, 32, 0.07);
    --shadow-lg: 0 12px 32px rgba(12, 20, 32, 0.12);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 520ms;

    /* Header metrics — shared by JS scroll offset */
    --header-utility-h: 38px;
    --header-bar-h: 84px;
    --header-bar-h-condensed: 64px;

    /* ------------------------------------------------------------------
       Signature device: "the coating stratum".
       A protective coating is a measured stack of films over blasted
       steel — finish, intermediate, primer, substrate. Every rule on
       this site is that stack in section, 4px tall.
       ------------------------------------------------------------------ */
    --stratum: linear-gradient(
        to bottom,
        var(--accent-color) 0 1px,
        var(--primary-color) 1px 2px,
        var(--primary-500) 2px 3px,
        var(--steel-300) 3px 4px
    );
    --stratum-v: linear-gradient(
        to right,
        var(--accent-color) 0 1px,
        var(--primary-color) 1px 2px,
        var(--primary-500) 2px 3px,
        var(--steel-300) 3px 4px
    );
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bar-h-condensed) + var(--sp-4));
}

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

svg {
    display: block;
    fill: currentColor;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

a:hover {
    color: var(--accent-color);
}

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

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 var(--sp-4);
    padding-left: 1.25rem;
}

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

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

strong,
b {
    font-weight: 600;
}

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

table {
    border-collapse: collapse;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.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;
    top: -100px;
    left: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--primary-color);
    color: var(--text-invert);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: top var(--dur) var(--ease);
}

.skip-link:focus {
    top: var(--sp-4);
    color: var(--text-invert);
}

/* --------------------------------------------------------------------------
   4. 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(--sp-10);
}

.section--tight {
    padding-block: var(--sp-8);
}

.section--tint {
    background-color: var(--light-color);
}

.section--steel {
    background-color: var(--dark-color);
    color: rgba(255, 255, 255, 0.78);
}

.section--steel h1,
.section--steel h2,
.section--steel h3 {
    color: var(--text-invert);
}

.section--edge {
    border-top: 1px solid var(--border-color);
}

.grid {
    display: grid;
    gap: var(--sp-6);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: center;
}

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

/* --------------------------------------------------------------------------
   5. The stratum rule — the site's signature device
   -------------------------------------------------------------------------- */

.stratum {
    height: 4px;
    background-image: var(--stratum);
}

/* --------------------------------------------------------------------------
   6. Section headings
   -------------------------------------------------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.eyebrow::before {
    content: "";
    width: 4px;
    height: 1.1em;
    flex: none;
    background-image: var(--stratum-v);
}

.section--steel .eyebrow {
    color: var(--steel-300);
}

.section__head {
    max-width: 62ch;
    margin-bottom: var(--sp-8);
}

.section__title {
    margin-bottom: 0;
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.section__title--caps {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Prose — the container that holds preserved source copy verbatim
   -------------------------------------------------------------------------- */

.prose {
    font-size: var(--fs-body);
    color: var(--text-color);
}

.prose p {
    margin-bottom: var(--sp-5);
    line-height: 1.75;
}

.prose--justify p {
    text-align: justify;
    hyphens: auto;
}

.prose--lead p {
    font-size: var(--fs-lead);
    line-height: 1.7;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   9. Print
   -------------------------------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .to-top,
    .page-hero__media {
        display: none !important;
    }

    body {
        color: #000;
    }
}