/* ==========================================================================
   East Yorkshire Broadband — Direction A, made to scale.

   The brand commits to a fixed palette. This is a real site with a point of
   view, not a themeable shell, so it does not follow the viewer's light/dark
   preference — it is one thing in both.

   Rhythm: dark BARK grounds for the moments that matter (hero, the answer to
   an address check, the close), PAPER between them for reading. The banding
   is the divider. Nothing here loads over the network but the CSS itself —
   the audience is on rural connections, which is the whole point of the site.
   ========================================================================== */

:root {
    /* Brand — fixed */
    --bark: #241C17;
    --bark-2: #322620;
    --bark-3: #3f312a;
    --ochre: #E2A423;
    --ochre-dim: #b8851d;
    --oxide: #A83A1D;
    --moss: #6E7A46;
    --chalk: #F0E6D4;
    --chalk-dim: #C9BCA6;

    /* Paper — the light ground */
    --paper: #F5EFE2;
    --paper-2: #EDE4D2;
    --ink: #241C17;
    --ink-soft: #5f544a;
    --rule: #d8cdb8;

    /* Type. No webfont: it would be the heaviest thing on the page, and this
       audience is exactly the one that can least afford it. A licensed
       geometric sans is a decision to make deliberately, not by default. */
    --display: Futura, "Futura PT", "Century Gothic", Avenir, "Avenir Next", system-ui, sans-serif;
    --body: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --mono: Menlo, "SF Mono", ui-monospace, monospace;

    --measure: 60ch;
    --gutter: clamp(20px, 4vw, 44px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Skip link — the audience skews older and rural, and some of them are on a
   keyboard or a screen reader. */
.skip {
    position: absolute; left: -9999px;
    background: var(--ochre); color: var(--bark);
    padding: 12px 18px; z-index: 100;
    font-family: var(--display); font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--ochre);
    outline-offset: 2px;
    border-radius: 1px;
}
.on-paper :where(a, button, input, select, summary):focus-visible {
    outline-color: var(--oxide);
}

.inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.inner--narrow { max-width: 800px; }

/* ---------------------------------------------------------------- grounds -- */

.on-bark  { background: var(--bark); color: var(--chalk); }
.on-bark-2 { background: var(--bark-2); color: var(--chalk); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper-2 { background: var(--paper-2); color: var(--ink); }

.band { display: block; width: 100%; height: 34px; }

section { padding: clamp(46px, 7vw, 80px) 0; }
section.tight { padding: clamp(32px, 4vw, 48px) 0; }

/* ------------------------------------------------------------------- type -- */

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

h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    margin: 0 0 16px;
    text-wrap: balance;
}
h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; margin: 0 0 10px; font-weight: 600; }

p { margin: 0 0 16px; max-width: var(--measure); }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; }

.eyebrow {
    font-family: var(--display);
    font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; margin: 0 0 16px;
    color: var(--ochre);
}
.on-paper .eyebrow, .on-paper-2 .eyebrow { color: var(--oxide); }

.on-bark p, .on-bark-2 p { color: var(--chalk-dim); }
.on-bark strong, .on-bark-2 strong { color: var(--chalk); font-weight: 600; }
.on-paper p, .on-paper-2 p { color: var(--ink-soft); }
.on-paper strong, .on-paper-2 strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------- nav --- */

/* Wraps rather than crushes: when the check and the links can't share a row,
   the check drops to its own line instead of breaking link labels in half. */
.nav {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px 20px; padding: 20px 0;
}
.wordmark {
    font-family: var(--display);
    font-size: clamp(15px, 2vw, 17px); font-weight: 600;
    letter-spacing: 0.02em; color: var(--chalk); text-decoration: none;
    white-space: nowrap;
}
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 28px); align-items: center; }
.nav-links a {
    font-family: var(--display);
    font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--chalk-dim); text-decoration: none; font-weight: 500;
    padding: 4px 0; white-space: nowrap;
}
.nav-links a:hover { color: var(--chalk); }
.nav-links a[aria-current="page"] { color: var(--ochre); box-shadow: inset 0 -2px 0 var(--ochre); }

.nav-phone {
    font-family: var(--display);
    font-size: 15px; letter-spacing: 0.04em; color: var(--ochre);
    font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nav-phone small {
    display: block; font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--chalk-dim); font-weight: 500;
}
@media (max-width: 880px) { .nav-links { display: none; } }

/* Every page but the homepage carries the check in the header — the address
   check is the site, so it is never more than one control away. */
.nav-check { display: flex; gap: 8px; align-items: center; }
.nav-check input {
    background: var(--bark-2); color: var(--chalk);
    border: 1px solid rgba(240, 230, 212, 0.3);
    border-radius: 2px; padding: 9px 12px; font: inherit; font-size: 15px;
    width: 150px;
}
.nav-check input::placeholder { color: rgba(201, 188, 166, 0.6); }
/* Below 700px the check doesn't fit, so the phone number takes its place —
   it has to be reachable from every page, and this audience rings. */
.nav-phone--narrow { display: none; }
@media (max-width: 700px) {
    .nav-check { display: none; }
    .nav-phone--narrow { display: block; }
}

/* ------------------------------------------------------------------ hero --- */

.hero {
    padding: clamp(36px, 6vw, 64px) 0 clamp(40px, 6vw, 68px);
    display: grid; grid-template-columns: minmax(0, 1fr) 210px;
    gap: clamp(28px, 5vw, 56px); align-items: start;
}
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.hero h1 {
    font-size: clamp(46px, 9vw, 96px);
    line-height: 0.9;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    color: var(--chalk);
}
.hero h1 em { font-style: normal; color: var(--ochre); display: block; }

.hero .lede {
    font-size: clamp(18px, 2.1vw, 20.5px);
    line-height: 1.55; max-width: 46ch; margin: 0 0 30px;
    color: var(--chalk-dim);
}
.hero .lede strong { color: var(--chalk); font-weight: 600; }

.hero .stamp { width: 100%; max-width: 210px; }
@media (max-width: 860px) {
    .hero .stamp { max-width: 132px; }
    .hero > .stamp-slot { order: -1; }
}

/* --------------------------------------------------------- the check widget */

.check {
    background: var(--bark-2);
    border: 1px solid rgba(240, 230, 212, 0.18);
    border-radius: 3px;
    padding: 22px 22px 18px;
    max-width: 500px;
}
.check label {
    display: block;
    font-family: var(--display);
    font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--chalk-dim); margin-bottom: 12px; font-weight: 600;
}
.check-row { display: flex; gap: 9px; }
@media (max-width: 520px) { .check-row { flex-direction: column; } }

.check input {
    flex: 1; min-width: 0;
    background: var(--bark); color: var(--chalk);
    border: 1px solid rgba(240, 230, 212, 0.3);
    border-radius: 2px;
    padding: 14px 15px;
    font-family: var(--body);
    font-size: 17px;              /* 16px+ or iOS zooms the page on focus */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.check input::placeholder { color: rgba(201, 188, 166, 0.55); text-transform: none; letter-spacing: 0; }
.check .hint { font-size: 13.5px; color: var(--chalk-dim); margin: 12px 0 0; max-width: none; }
.check .error {
    font-size: 14px; color: var(--ochre); margin: 12px 0 0;
    font-family: var(--display); font-weight: 600;
}

/* -------------------------------------------------------------- buttons ---- */

.btn {
    display: inline-block; border: 0; cursor: pointer;
    background: var(--ochre); color: var(--bark);
    padding: 14px 26px; border-radius: 2px; text-decoration: none;
    font-family: var(--display);
    font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    white-space: nowrap; text-align: center;
    transition: background-color 120ms ease;
}
.btn:hover { background: #f0b437; }
.btn--block { display: block; width: 100%; }
.btn--quiet {
    background: transparent; color: var(--chalk);
    box-shadow: inset 0 0 0 1px rgba(240, 230, 212, 0.4);
}
.btn--quiet:hover { background: rgba(240, 230, 212, 0.08); }
.on-paper .btn--quiet, .on-paper-2 .btn--quiet {
    color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule);
}
.on-paper .btn--quiet:hover { background: rgba(36, 28, 23, 0.05); }

/* ------------------------------------------------------- the address picker */

.picker { list-style: none; margin: 0 0 22px; padding: 0; max-width: 620px; }
.picker li { margin: 0; }
.picker a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-decoration: none;
    background: var(--bark-2); color: var(--chalk);
    border: 1px solid rgba(240, 230, 212, 0.16);
    border-bottom: 0;
    padding: 17px 18px;                /* deliberately big enough to hit on a phone */
    font-family: var(--body); font-size: 17px;
}
.picker li:last-child a { border-bottom: 1px solid rgba(240, 230, 212, 0.16); }
.picker a:hover { background: var(--bark-3); }
.picker a::after {
    content: "›"; font-family: var(--display); font-size: 22px;
    color: var(--ochre); line-height: 1;
}

/* ------------------------------------------------------------- the answer -- */

.answer {
    display: grid; grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px); align-items: center;
    padding: clamp(34px, 5vw, 52px) 0;
}
@media (max-width: 760px) {
    .answer { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
    .answer .stamp { max-width: 156px; }
}
.answer .stamp { width: 100%; max-width: 200px; }
.stamp--muted { opacity: 0.38; }

.answer .addr {
    font-family: var(--display);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--chalk-dim); margin: 0 0 14px; font-weight: 600;
}
.answer h1 {
    font-size: clamp(32px, 5.2vw, 52px); line-height: 1.0;
    margin: 0 0 18px; color: var(--chalk);
}
.answer h1 em { font-style: normal; color: var(--ochre); }
.answer p { font-size: 17.5px; max-width: 46ch; }

/* ------------------------------------------------------------- packages ---- */

.packages {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px; margin: 28px 0 0;
}
.pkg {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 26px 24px 24px;
    display: flex; flex-direction: column;
    position: relative;
}
.pkg--pick { border-color: var(--oxide); border-width: 2px; padding: 25px 23px 23px; }
.pkg--pick::before {
    content: "Most people take this";
    position: absolute; top: -11px; left: 20px;
    background: var(--oxide); color: var(--paper);
    font-family: var(--display); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 2px;
}
.pkg h3 { font-size: 22px; margin: 0 0 4px; color: var(--ink); }
.pkg .who { font-size: 15px; color: var(--ink-soft); margin: 0 0 20px; min-height: 3em; }

.pkg .price {
    font-family: var(--display); font-weight: 600;
    font-size: 44px; line-height: 1; color: var(--ink);
    letter-spacing: -0.02em; margin: 0 0 4px;
}
.pkg .price span { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); }
.pkg .per { font-family: var(--display); font-size: 12px; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--ink-soft); margin: 0 0 20px; }

.speeds { border-top: 1px solid var(--rule); margin: 0 0 22px; }
.speeds div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--rule);
    font-size: 15px;
}
.speeds dt { color: var(--ink-soft); font-family: var(--display); font-size: 12px;
             letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.speeds dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.speeds .floor dd { color: var(--oxide); }
.pkg .btn { margin-top: auto; }
.order-note { font-size: 14px; color: var(--ink-soft); }

/* --------------------------------------------------------- the four barriers */

/* Four across on a desktop, two-by-two on a tablet, stacked on a phone. They
   are a sequence — the order people raise them — so they must not orphan. */
.barriers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 32px; }
@media (max-width: 900px) { .barriers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .barriers { grid-template-columns: 1fr; } }
.barrier {
    background: var(--paper-2);
    padding: 26px 24px;
    border-top: 3px solid var(--oxide);
}
.barrier h3 {
    font-size: 18px; margin: 0 0 10px; color: var(--ink);
    font-family: var(--body); font-weight: 600; font-style: italic;
    letter-spacing: 0;
}
.barrier p { font-size: 15.5px; margin: 0; }
.barrier .n {
    font-family: var(--display); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; color: var(--oxide); display: block; margin-bottom: 12px;
}

/* ------------------------------------------------------- what changes / not */

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 28px; }
.col { border-left: 3px solid var(--moss); padding: 4px 0 4px 20px; }
.col--changes { border-left-color: var(--ochre); }
.col h3 { margin: 0 0 4px; color: var(--chalk); }
.col .sub {
    font-family: var(--display); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
    margin: 0 0 16px;
}
.col--changes .sub { color: var(--ochre); }
.col ul { margin: 0; padding: 0; list-style: none; }
.col li { padding: 9px 0; border-bottom: 1px solid rgba(240, 230, 212, 0.12); font-size: 16px; color: var(--chalk-dim); }
.col li:last-child { border-bottom: 0; }
.col li strong { color: var(--chalk); font-weight: 600; }

/* ----------------------------------------------------------------- proofs -- */

.proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 36px); margin-top: 30px; }
.proof svg { display: block; margin-bottom: 16px; }
.proof h3 { color: var(--chalk); }
.proof p { font-size: 15.5px; margin: 0; }

/* ----------------------------------------------------------- coverage list */

.stamps {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 30px 18px; margin-top: 30px;
}
.stamps figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stamps .stamp { width: 100%; max-width: 140px; }
.stamps figcaption { font-family: var(--mono); font-size: 11px; color: var(--chalk-dim); letter-spacing: 0.04em; }

/* ------------------------------------------------------------ interest form */

.interest { max-width: 480px; margin-top: 26px; }
.interest label {
    display: block; font-family: var(--display);
    font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--chalk-dim); margin-bottom: 10px; font-weight: 600;
}
.interest input {
    width: 100%; background: var(--bark); color: var(--chalk);
    border: 1px solid rgba(240, 230, 212, 0.3); border-radius: 2px;
    padding: 14px 15px; font-family: var(--body); font-size: 17px; margin-bottom: 12px;
}
.interest .hint { font-size: 13.5px; color: var(--chalk-dim); margin: 12px 0 0; }

/* The marketing tick. Unticked, its own line, and plainly separate from the
   button — what somebody agreed to has to be obvious from looking at it. */
/* Scoped to beat `.interest label`, which is the uppercase field label above it —
   this one is a sentence somebody has to actually read before agreeing to it. */
.interest .tick {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 18px; cursor: pointer;
    font-family: var(--body); font-size: 15px; line-height: 1.45;
    letter-spacing: 0; text-transform: none;
    color: var(--chalk-dim); font-weight: 400;
}
.interest .tick input {
    width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0;
    accent-color: var(--ochre);
}

/* ------------------------------------------------------------------ notes -- */

.note {
    border-left: 2px solid var(--ochre);
    padding: 2px 0 2px 16px; margin: 24px 0 0;
    font-size: 15px; color: var(--chalk-dim); max-width: 56ch;
}
.on-paper .note, .on-paper-2 .note { border-left-color: var(--oxide); color: var(--ink-soft); }

/* ----------------------------------------------------------------- footer -- */

.footer { padding: clamp(40px, 5vw, 60px) 0 44px; }
.footer-top { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 640px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }
.footer .stamp { width: 100%; max-width: 132px; }
.footer p { font-size: 15.5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.footer-links a {
    font-family: var(--display); font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--chalk-dim); text-decoration: none;
}
.footer-links a:hover { color: var(--ochre); }
.footer .legal { font-size: 13px; color: rgba(201, 188, 166, 0.65); margin: 26px 0 0; max-width: none; }

/* ------------------------------------------------------------------ misc --- */

/* ------------------------------------------------------- the tracking strip */

/* A strip, not a modal. It sits at the foot of the page, covers nothing, blocks
   nothing, and gives both answers the same weight — a site arguing that it is
   straight with people cannot open with a dark pattern. */
.tracking {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 20px;
    background: var(--bark-2);
    border-top: 1px solid rgba(240, 230, 212, 0.16);
    padding: 12px clamp(20px, 4vw, 44px);
}
.tracking p {
    margin: 0; max-width: 72ch;
    font-size: 14px; line-height: 1.45; color: var(--chalk-dim);
}
.tracking a { color: var(--ochre); }
.tracking-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tracking-btn {
    cursor: pointer; border: 0; border-radius: 2px;
    padding: 8px 16px; white-space: nowrap;
    font-family: var(--display);
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    background: transparent; color: var(--chalk);
    box-shadow: inset 0 0 0 1px rgba(240, 230, 212, 0.4);
}
.tracking-btn:hover { background: rgba(240, 230, 212, 0.08); }
.tracking-btn--yes { background: var(--ochre); color: var(--bark); box-shadow: none; }
.tracking-btn--yes:hover { background: #f0b437; }
@media (max-width: 560px) {
    .tracking { flex-direction: column; align-items: stretch; }
    .tracking-actions { justify-content: stretch; }
    .tracking-btn { flex: 1; }
}

/* A postcode broken across two lines reads as a typo. */
.nowrap { white-space: nowrap; }

.stack > * + * { margin-top: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt-lg { margin-top: clamp(30px, 4vw, 44px); }

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