/* ============================================================================
   Raptors Freight — the public site.

   Standalone by design: home.php is the one page a visitor sees before they
   have an account, it does not load the admin template, and it does not carry
   the light/dark switch. The delivered design is dark, and the marketing page
   stays dark whatever an operator has chosen for the control panel behind
   their login.

   The tokens below are the same values the admin theme uses
   (assets/css/rf_theme.css); they are restated rather than imported because
   this page must not pull in the template's stylesheet just to read six
   custom properties.

   Structure follows the design: a fluid content column capped at 1200px,
   sections separated by generous vertical rhythm, and one saturated
   "section" ground that the tracking band and nothing else sits on.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&family=Mulish:wght@400;500;600;700&display=swap');

:root {
    --color-bg: #161826;
    --color-surface: #232532;
    --color-text: #e9e9ed;
    --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

    --color-accent: #9184d9;
    --color-accent-100: #f5f4ff;
    --color-accent-200: #e7e5fe;
    --color-accent-300: #d2cefd;
    --color-accent-400: #b5abfc;
    --color-accent-800: #423a6a;
    --color-accent-900: #2b2741;

    --color-neutral-700: #595d6c;
    --color-neutral-800: #3f424d;

    --color-section: #262a60;
    --color-section-glow: #353b80;

    --danger: oklch(0.7 0.17 25);
    --danger-deep: oklch(0.45 0.14 25);

    --font-heading: 'Sora', system-ui, sans-serif;
    --font-body: 'Mulish', system-ui, sans-serif;

    --space-1: 2.8px;
    --space-2: 5.6px;
    --space-3: 8.4px;
    --space-4: 11.2px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    text-wrap: pretty;
    background:
        radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
        radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
        var(--color-bg);
    color: var(--color-text);
}

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent); }

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

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.012em;
    margin: 0;
}

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

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

/* — layout — */

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 72px);
}

.section { padding: 70px 0; }

/* The one saturated ground in the design. It bleeds full width while its
   content stays in the column, which is why it is not simply a .wrap. */
.band {
    background:
        radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
        var(--color-section);
    padding: 70px 0;
}

.rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}

/* Two-column blocks: a narrow lead-in beside a wider body. They collapse to
   one column below the tablet breakpoint, where 5fr of a phone is unreadable. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(24px, 5vw, 96px);
    align-items: start;
}

/* — nav — */

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 12px max(clamp(20px, 5vw, 72px), calc((100% - 1200px) / 2 + clamp(20px, 5vw, 72px)));
    background: color-mix(in srgb, var(--color-bg) 86%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text);
}
.nav-brand img { max-height: 34px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.nav-links a {
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    color: var(--color-text);
    font-size: 14px;
}
.nav-links a:hover {
    background: color-mix(in srgb, var(--color-accent-900) 65%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    color: var(--color-accent-200);
}

/* The menu button only exists below the tablet breakpoint. */
.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-size: 20px;
}

/* — controls — */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    transition: background .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-200); }
.btn-ghost { color: var(--color-accent); border-color: var(--color-neutral-700); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-color: var(--color-neutral-700); }

/* A chip button — the freight-mode and service tabs. Selected state is a
   class rather than an inline style so the JS only toggles one thing. */
.chip {
    border-radius: 999px;
    border: 1px solid var(--color-neutral-700);
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    background: transparent;
}
.chip.is-on {
    border-color: var(--color-accent);
    color: var(--color-accent-200);
    background: color-mix(in srgb, var(--color-accent-900) 60%, transparent);
}

.input {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    font: inherit;
    font-size: 14px;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
textarea.input { min-height: 96px; resize: vertical; font-family: var(--font-body); }

.field label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — surfaces — */

.card {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px;
}
.kicker::before { content: ""; width: 44px; height: 1px; background: var(--color-accent); flex: none; }

/* Centred sections get a rule on both sides. */
.kicker-center { justify-content: center; }
.kicker-center::after { content: ""; width: 44px; height: 1px; background: var(--color-accent); flex: none; }

.lede {
    font-size: 15.5px;
    line-height: 26px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.h2 { font-size: 32px; line-height: 42px; }

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.grid-auto-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* — tables — */

.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 12px 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); }

/* Wide content scrolls inside its own box; the page body never does. */
.scroll-x { overflow-x: auto; }

/* — FAQ — */

.faq details {
    background: color-mix(in srgb, var(--color-neutral-800) 55%, transparent);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-md);
    padding: 0 20px;
    margin-bottom: 10px;
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 16px 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "\F0140"; /* mdi-chevron-down */
    font-family: "Material Design Icons";
    color: var(--color-accent);
    flex: none;
    font-size: 18px;
    transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 25px;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — services list — */

.svc-row {
    display: grid;
    grid-template-columns: minmax(64px, 160px) minmax(0, 380px) minmax(0, 1fr);
    gap: 16px clamp(24px, 4vw, 72px);
    align-items: start;
    padding: 34px 0;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent) 1;
}

/* — the process steps strip — */

.steps { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 18px; margin-top: 28px; }
.step { display: grid; gap: 8px; justify-items: center; min-width: 120px; text-align: center; }
.step-dot {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent-900) 60%, transparent);
    display: grid; place-items: center;
    color: var(--color-accent-200); font-size: 20px;
}
.step-arrow { color: color-mix(in srgb, var(--color-text) 35%, transparent); margin: 14px 4px 0; }

/* — calculator — */

.calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 60px repeat(4, minmax(0, 1fr)) 36px;
    gap: 10px;
    align-items: center;
}
.calc-head {
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    margin-bottom: 8px;
}
.calc-out { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-divider); text-align: center; }
.calc-out .big {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    font-feature-settings: 'tnum' 1;
}

/* — dangerous goods — */

.dg-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
    background: color-mix(in srgb, var(--danger-deep) 30%, transparent);
    color: var(--color-text);
}
.dg-chip i { color: var(--danger); }

/* — footer — */

.site-footer {
    padding: 42px 0 56px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 22px;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    background: #25d366;
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 30px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.wa-float:hover { color: #fff; }

/* ── Tablet ────────────────────────────────────────────────────────────────
   Below 900px the two-column blocks stop earning their split, and the
   calculator's seven-column row is narrower than its own labels. */

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }

    .svc-row {
        grid-template-columns: auto 1fr;
        gap: 10px 20px;
    }
    .svc-row h3 { grid-column: 2; }
    .svc-row p { grid-column: 1 / -1; }

    /* The calculator becomes labelled rows: each input keeps the caption it
       had in the header strip, which is why the header strip is hidden rather
       than wrapped. */
    .calc-head { display: none; }
    .calc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--color-divider);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
    }
    .calc-grid > .calc-name { grid-column: 1 / -1; }
    .calc-grid > .calc-remove { grid-column: 1 / -1; width: 100%; }
    .calc-field { display: block; }
    .calc-field > span {
        display: block;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--color-text) 55%, transparent);
        margin-bottom: 4px;
    }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .nav-toggle { display: grid; }

    /* The links become a sheet under the bar rather than a row that wraps to
       three lines above the fold. */
    .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px clamp(20px, 5vw, 72px) 16px;
        background: color-mix(in srgb, var(--color-bg) 97%, transparent);
        border-bottom: 1px solid var(--color-divider);
    }
    .nav[data-open="1"] .nav-links { display: flex; }
    .nav-links a { padding: 11px 12px; }

    .section, .band { padding: 48px 0; }
    .h2 { font-size: 26px; line-height: 34px; }
    .lede { font-size: 15px; }

    .steps { justify-content: flex-start; }
    .step { min-width: 96px; }

    .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}