/* =============================================================================
   Be Free Driving School — the Road Sign design system.

   Ported from the design canvas, where every rule was an inline style on a
   fixed 1440px artboard. Two things change in the port:

   1. The values live here once instead of being repeated in every page.
   2. It is fluid. The canvas could assume 1440px; a real site cannot, so the
      type is clamped and the grids collapse.

   The "sign" treatment is the motif the whole design rests on: a coloured
   outer shell with padding, holding an inner panel with a thick white border.
   That padding is what makes the white rule look inset, the way a real road
   sign is printed. Outer radius minus shell padding gives the inner radius.
   ========================================================================== */

:root {
    /* Surfaces */
    --asphalt: #1c1e20;          /* page ground, and near-black text on light */
    --canvas: #2a2c2e;           /* the road surface, with grain over it */
    --border: #3a3d40;

    /* Signs */
    --green: #00613f;            /* direction signs, and location pages */
    --blue: #0d4a9e;             /* motorway signs, and the main call to action */
    --yellow: #ffcd00;           /* warnings, and every primary button */
    --red: #d4202c;              /* prohibition, and anything that ends a test */
    --white: #ffffff;
    --line: #f4f4f0;             /* lane markings */

    /* Text */
    --ink: #ffffff;
    --ink-soft: #d6d9dc;
    --ink-muted: #b8bcc0;
    --ink-dark: #3a3d40;         /* body copy on white and yellow cards */
    --ink-on-green: #d6e5dd;
    --ink-on-blue: #dbe6f5;

    /* Type. Clamped so a phone does not get 66px headings. */
    --fs-h1: clamp(34px, 5.2vw, 66px);
    --fs-h2: clamp(26px, 3.6vw, 52px);
    --fs-h2-sm: clamp(24px, 2.8vw, 42px);
    --fs-h3: clamp(19px, 1.9vw, 28px);
    --fs-h4: clamp(17px, 1.5vw, 21px);
    --fs-lead: clamp(17px, 1.4vw, 20px);
    --fs-body: 16px;
    --fs-sm: 15px;
    --fs-xs: 13px;

    /* Rhythm */
    --gutter: clamp(18px, 4vw, 56px);
    --section-y: clamp(44px, 6vw, 80px);
    --section-y-sm: clamp(34px, 4.5vw, 64px);

    --radius-sign: 28px;
    --radius-sign-inner: 18px;
    --radius-panel: 24px;
    --radius-panel-inner: 15px;
    --radius-card: 14px;
    --radius-btn: 8px;

    --max-width: 1440px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--asphalt);
}

body {
    font-family: "Overpass", "Trebuchet MS", Arial, sans-serif;
    font-size: var(--fs-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* The road surface: two offset dot grids, one light, one dark. */
.page {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--canvas);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px),
        radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 1.6px);
    background-size: 7px 7px, 11px 11px;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--yellow); text-decoration: none; }
a:hover { color: var(--white); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

h1 { font-weight: 900; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-weight: 900; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-weight: 900; font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-weight: 900; font-size: var(--fs-h4); line-height: 1.25; }

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.section { padding: var(--section-y) var(--gutter); }
.section--tight { padding: var(--section-y-sm) var(--gutter); }
.section--dark { background: var(--asphalt); }
.section--flush-top { padding-top: 0; }

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 28px; }

.grid { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.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)); }

/* A heading on the left with its supporting line on the right. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.section-head p { max-width: 52ch; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }

.lede { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 70ch; }
.prose + .prose { margin-top: 14px; }
.muted { color: var(--ink-muted); }
.note { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-muted); }

.eyebrow {
    font-weight: 900;
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
}

/* The lane markings that separate the head of a page from its body. */
.lane-divider {
    height: 10px;
    background-image: repeating-linear-gradient(90deg, var(--line) 0 90px, transparent 90px 150px);
}

/* -----------------------------------------------------------------------------
   Signs

   .sign is the shell, .sign__panel is the inset white-bordered face.
   -------------------------------------------------------------------------- */

.sign { border-radius: var(--radius-sign); padding: 14px; }
.sign__panel {
    border: 5px solid var(--white);
    border-radius: var(--radius-sign-inner);
    padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.6vw, 52px);
}
.sign--green { background: var(--green); }
.sign--blue { background: var(--blue); }
.sign--yellow { background: var(--yellow); color: var(--asphalt); }
.sign--yellow .sign__panel { border-color: var(--asphalt); }

/* The smaller sign used for mid-page panels and calls to action. */
.sign--panel { border-radius: var(--radius-panel); padding: 12px; }
.sign--panel > .sign__panel {
    border-radius: var(--radius-panel-inner);
    padding: clamp(22px, 2.8vw, 36px) clamp(20px, 3vw, 44px);
}

.sign--green .sign__panel p { color: var(--ink-on-green); }
.sign--blue .sign__panel p { color: var(--ink-on-blue); }

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px var(--gutter);
    position: relative;
}

.logo {
    display: inline-flex;
    align-items: center;
    background: var(--green);
    border-radius: 12px;
    padding: 12px 22px;
    /* Two inset rings rather than a border, so the white rule sits inside the
       green the way it does on a real sign. */
    box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 5px var(--white);
    font-weight: 900;
    font-size: clamp(16px, 1.7vw, 22px);
    color: var(--white);
    letter-spacing: -0.01em;
}
.logo:hover { color: var(--white); }

.nav { display: flex; align-items: center; gap: 30px; font-weight: 800; }
.nav > li { list-style: none; position: relative; }
.nav a { color: var(--white); }
.nav a:hover,
.nav [aria-current="page"],
.nav .is-active > a { color: var(--yellow); }

.nav__group > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--white);
    font: inherit;
    cursor: pointer;
}
.nav__group > button:hover { color: var(--yellow); }
.nav__group svg { flex-shrink: 0; }
.nav__group[open] > button,
.nav__group > button[aria-expanded="true"] { color: var(--yellow); }

.nav__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 20;
    min-width: 260px;
    padding: 18px 20px;
    background: var(--asphalt);
    border: 3px solid var(--white);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nav__panel a { font-size: var(--fs-body); font-weight: 800; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
    .site-header { flex-wrap: wrap; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        height: 46px;
        padding: 0 18px;
        background: none;
        border: 2px solid var(--border);
        border-radius: var(--radius-btn);
        color: var(--white);
        font: inherit;
        font-weight: 900;
        cursor: pointer;
    }
    .nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        order: 3;
        margin: 0;
        padding: 0;
    }
    .nav.is-open { display: flex; }
    .nav > li { border-bottom: 1px solid var(--border); }
    .nav > li:last-child { border-bottom: 0; }
    .nav__group > button,
    .nav > li > a { width: 100%; padding: 14px 2px; justify-content: space-between; }
    .nav__panel {
        position: static;
        border: 0;
        border-left: 3px solid var(--border);
        border-radius: 0;
        margin: 0 0 12px 8px;
        padding: 4px 0 4px 16px;
        min-width: 0;
    }
}

/* -----------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px var(--gutter) 0;
    font-size: 14px;
    color: var(--ink-muted);
    list-style: none;
    margin: 0;
}
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs [aria-current="page"] { color: var(--white); }
.breadcrumbs li { display: flex; align-items: center; gap: 10px; }
.breadcrumbs li + li::before { content: "\203a"; color: var(--ink-muted); }

/* -----------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */

.page-head { padding: clamp(22px, 3vw, 32px) var(--gutter) clamp(30px, 4vw, 48px); }
.page-head .lede { margin-top: 14px; }
.page-head .eyebrow + h1 { margin-top: 12px; }

.page-head__split {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
}

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--asphalt);
    border: 2px solid var(--border);
    border-radius: var(--radius-card);
    padding: clamp(18px, 2vw, 26px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card h3 { color: var(--ink); }
.card p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-muted); }

/* A card that is itself a small sign. */
.card--sign { background: var(--green); border: 0; border-radius: 16px; padding: 10px; }
.card--sign > .card__face {
    border: 4px solid var(--white);
    border-radius: 10px;
    padding: clamp(18px, 2vw, 26px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card--sign p { color: var(--ink-on-green); font-size: var(--fs-body); }
.card--sign .card__link { margin-top: auto; font-weight: 800; }

.card--yellow { background: var(--yellow); color: var(--asphalt); border: 0; }
.card--yellow h3 { color: var(--asphalt); }
.card--yellow p { color: #2a2c2e; font-size: 17px; }

.card--white { background: var(--white); color: var(--asphalt); border: 0; border-radius: 12px; padding: 8px; }
.card--white > .card__face {
    border: 3px solid var(--asphalt);
    border-radius: 8px;
    padding: clamp(18px, 2vw, 24px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card--white h3 { color: var(--asphalt); }
.card--white p { color: var(--ink-dark); font-size: var(--fs-body); line-height: 1.65; }

/* A bullet card: a warning diamond beside the text. */
.card--bullet { flex-direction: row; align-items: flex-start; gap: 16px; }

/* -----------------------------------------------------------------------------
   Head tiles

   The small stat plates that sit beside a page-head heading. They share the
   narrow right-hand column of .page-head__split three-across, so each one is
   only ~140px wide at desktop. The full-size .stat__value cannot go in there:
   it is clamp(32px, 4vw, 52px), which follows the VIEWPORT while the tile does
   not, so at 1440px it renders 52px of text in about 56px of content box and
   spills over its own white border.

   Two treatments, because the artboards draw them differently: --tile is a
   green sign with a white plate inside it, --plate is a white-edged plate on
   the page ground. Sizes are from design-roadsign.

   The value is sized in cqi, against the TILE, not the viewport. That is the
   whole point: the widest string on these is "2 Years", about 3.1em, so it
   fits only while 3.1 x size stays inside the tile. That is a proportional
   relationship, which no vw curve can hold across the range — a size tuned to
   look right at 1440px overflows at 900px, and one tuned for 900px is tiny at
   1440px. Three-across only exists above 860px, where the tiles collapse to
   full width and the constraint disappears.
   -------------------------------------------------------------------------- */

.card--tile { border-radius: var(--radius-card); padding: 8px; }
.card--tile > .card__face {
    container-type: inline-size;
    border-width: 3px;
    border-radius: 10px;
    padding: 30px 12px;
    gap: 6px;
}
/* Measured in the browser, not estimated. cqi resolves against the face's
   CONTENT box — 103px at desktop, not the 149px tile — and "2 Years", the
   widest string here, runs 3.35em. So 28cqi puts it at 94% of the available
   width with ~9px of clearance, and because cqi is proportional that ratio
   holds at EVERY container size. Which is the whole reason this is not in vw.

   A floor always outruns a shrinking box eventually, and this one does: forced
   down in the browser, 16px holds clearance until the text box reaches ~45px,
   then goes negative. That needs a tile under ~75px, which three-across cannot
   produce — .grid--3 and .page-head__split both collapse at 860px, and the
   measured tile at desktop is 133px with a 103px text box. */
.card--tile .stat__value { font-size: clamp(16px, 28cqi, 28px); }

.card--plate {
    container-type: inline-size;
    border: 3px solid var(--white);
    border-radius: 10px;
    padding: 30px 12px;
    gap: 6px;
}
.card--plate .stat__value { font-size: clamp(24px, 30cqi, 38px); color: var(--yellow); }

/* Both centre their contents and carry a quiet label rather than the yellow
   all-caps one, which is too wide to sit on a tile this narrow. */
.card--tile > .card__face,
.card--plate {
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* 13px flat, as drawn. The longest label here, "Minimum Age (Car)", measures
   the full 103px of the text box and wraps to two lines — that is a label
   filling its width, not overflowing it: the border is clear either way. */
.card--tile .stat__label,
.card--plate .stat__label {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-on-green);
}

/* -----------------------------------------------------------------------------
   Warning diamond
   -------------------------------------------------------------------------- */

.diamond {
    width: 14px;
    height: 14px;
    background: var(--yellow);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 5px;
}
.diamond--sm { width: 12px; height: 12px; }
.diamond--lg { width: 16px; height: 16px; margin-top: 6px; }

/* The large feature diamond, with its double ring. */
.diamond-icon {
    width: 86px;
    height: 86px;
    transform: rotate(45deg);
    background: var(--yellow);
    border: 6px solid var(--asphalt);
    box-shadow: 0 0 0 4px var(--yellow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 18px;
}
/* The glyph is counter-rotated so it sits upright in the rotated frame. */
.diamond-icon svg { transform: rotate(-45deg); }

/* -----------------------------------------------------------------------------
   Stats, steps and plates
   -------------------------------------------------------------------------- */

.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__label { font-weight: 900; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.stat__value { font-weight: 900; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__note { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-muted); }

.step { background: var(--canvas); border-radius: var(--radius-card); padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 10px; }
.step__number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--asphalt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 17px;
}
.step--final .step__number { background: var(--white); }

/* L and N plates, and the small duration badges. */
.plate {
    display: inline-flex;
    align-items: center;
    background: var(--yellow);
    color: var(--asphalt);
    font-weight: 900;
    font-size: 20px;
    padding: 3px 12px;
    border-radius: 6px;
    border: 2px solid var(--asphalt);
}
.plate--n { background: var(--white); color: var(--red); }
.plate--time { background: var(--green); color: var(--white); border-color: var(--white); font-size: 15px; }

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--radius-btn);
    background: var(--yellow);
    color: var(--asphalt);
    font-family: inherit;
    font-weight: 900;
    font-size: 17px;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: #ffd733; color: var(--asphalt); }
.btn--ghost { background: none; border: 3px solid var(--white); color: var(--white); }
.btn--ghost:hover { background: none; border-color: var(--yellow); color: var(--yellow); }
.btn--sm { height: 48px; padding: 0 22px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* -----------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.cta { padding: 0 var(--gutter) var(--section-y); }
.cta__inner { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); justify-content: space-between; align-items: center; }
.cta__text { flex: 1 1 24rem; display: flex; flex-direction: column; gap: 10px; }
.cta h2 { font-size: var(--fs-h2-sm); }
.cta__aside { flex: 0 1 22rem; display: flex; flex-direction: column; gap: 14px; }
.cta__phone { display: flex; align-items: center; gap: 14px; }
.cta__phone-label { background: var(--white); color: var(--blue); font-weight: 900; font-size: 18px; border-radius: 8px; padding: 6px 14px; }
.cta__phone-number { font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); color: var(--white); }

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--asphalt); padding: clamp(34px, 4vw, 56px) var(--gutter) 28px; }

.site-footer__columns {
    display: grid;
    gap: clamp(22px, 3vw, 40px);
    grid-template-columns: 2fr repeat(4, 1fr);
    margin-bottom: 34px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h2 { font-weight: 900; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.site-footer__col a { color: var(--white); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--yellow); }
.site-footer__brand { font-weight: 900; font-size: 20px; color: var(--white); }
.site-footer__brand + p { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-muted); }

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    align-items: center;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--ink-muted);
}

/* -----------------------------------------------------------------------------
   Collapsing
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__columns { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 860px) {
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head__split { grid-template-columns: 1fr; }
    .section-head { align-items: flex-start; }
}

@media (max-width: 620px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: 1fr; }
    .site-footer__columns { grid-template-columns: 1fr 1fr; }
    .btn { width: 100%; }
    .actions { flex-direction: column; align-items: stretch; }
}

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

/* -----------------------------------------------------------------------------
   Inline icons

   The glyph takes its colour from the text it sits beside, so one drawing
   serves the green footer, the blue contact panel and the dark admin table.
   -------------------------------------------------------------------------- */

.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.icon {
    flex-shrink: 0;
    fill: currentColor;
}