/* ==========================================================================
   Deliveroxx — orange-led brand system

   Orange is the brand and carries the page: the sign, the buttons, the rules.
   Deep slate is the only other colour of any weight, and it is there to make
   the orange louder rather than to compete with it.

   ONE THING TO CHECK: --brand below is our best match for the orange on
   app.deliveroxx.com. Paste your exact hex over it and the whole site follows,
   including the printed decal. --brand-deep is the darker version used
   wherever orange has to sit behind small text and still pass contrast rules;
   if you change --brand, darken --brand-deep by roughly the same amount.
   ========================================================================== */

:root {
  --brand:       #f0600c;   /* the orange. Everything keys off this */
  --brand-deep:  #b84806;   /* text-safe orange for links and small type */
  --brand-tint:  #fdefe4;   /* pale wash for quiet backgrounds */
  --brand-glint: #ffe2c6;   /* the highlight that sweeps across the logo */
  --brand-lift:  #ff7a2e;   /* lighter orange, for orange sitting on the dark bands */

  --slate:       #14313a;   /* supporting dark, complementary to the orange */
  --slate-deep:  #0b2027;
  --paper:       #faf9f6;
  --paper-hi:    #ffffff;
  --ink:         #16181a;
  --muted:       #5d6468;
  --rule:        rgba(22, 24, 26, 0.16);
  --chalk:       #fdfaf7;

  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --measure: 62ch;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, .sans { font-family: var(--sans); }

h1, h2, h3 { line-height: 1.08; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.022em; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--brand-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--slate-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--dark :focus-visible, .decal :focus-visible { outline-color: var(--chalk); }

.wrap { width: min(72rem, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.narrow { width: min(46rem, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--slate); color: var(--chalk);
  padding: 0.7rem 1rem; z-index: 50; font-family: var(--sans);
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- header --- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head__inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1.15rem;
  flex-wrap: wrap;
}
/* --- The logo ------------------------------------------------------------
   Plain text in the brand orange with a highlight that sweeps across it,
   matching app.deliveroxx.com. The sweep is a periodic glint rather than
   constant motion: it crosses in the first fifth of the cycle and the rest of
   the loop is deliberately still, so it catches the eye without nagging.
   To match the app exactly, change the 9s below to your app's duration.
   .wordmark--static is the same logo with no movement — used on the decal,
   because that panel is a preview of a printed sticker and vinyl cannot
   shimmer. -------------------------------------------------------------- */

.wordmark {
  font-family: var(--sans); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.035em; color: var(--brand); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.28rem;
}
.wordmark__text { display: inline-block; color: var(--brand); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wordmark:not(.wordmark--static) .wordmark__text {
    /* background-clip: text clips the background COLOUR as well as the image,
       so this solid orange is what the letters are made of. The gradient only
       rides on top of it. Without it, any part of the logo the gradient is not
       currently covering has no paint at all, and transparent letters let the
       page show through as a white block. */
    background-color: var(--brand);
    background-image: linear-gradient(
      100deg,
      var(--brand)       0%, var(--brand)       40%,
      var(--brand-glint) 47%, #fff8f1           50%, var(--brand-glint) 53%,
      var(--brand)       60%, var(--brand)      100%
    );
    background-size: 280% 100%;
    background-position: 140% 0;
    /* Tiles rather than sitting alone. The gradient is solid orange at both
       ends, so the seam is invisible and only one glint is ever on screen. */
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: wordmark-sweep 9s ease-in-out 0.8s infinite;
  }
}

@keyframes wordmark-sweep {
  0%   { background-position: 140% 0; }
  22%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }   /* held still for the rest of the loop */
}

/* Motion is decoration here, so it goes entirely when asked to. */
@media (prefers-reduced-motion: reduce) {
  .wordmark .wordmark__text {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--brand);
    color: var(--brand);
  }
}

.wordmark--static .wordmark__text { animation: none; background-image: none; }

.wordmark::after {
  content: ""; width: 7px; height: 7px; background: var(--brand);
  border-radius: 50%; transform: translateY(-2px); flex: none;
}
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--sans); font-size: 0.95rem; color: var(--muted);
  text-decoration: none; padding-block: 0.2rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }

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

/* Every call to action is orange. Text on it is near-black rather than white:
   white on this orange lands around 3:1, which fails for button-sized text,
   while the dark text clears 7:1 and reads as high-vis rather than timid. */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: 1rem; line-height: 1.2; padding: 0.95rem 1.6rem;
  border: 2px solid var(--brand); background: var(--brand); color: var(--slate-deep);
  text-decoration: none; cursor: pointer; border-radius: 2px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* Kept so older markup using btn--amber still renders correctly. */
.btn--amber { background: var(--brand); border-color: var(--brand); color: var(--slate-deep); }
.btn--amber:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* Secondary action. Outlined, never orange — two orange buttons side by side
   would leave neither looking like the thing to press. */
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn--ghost:hover { background: var(--slate); color: var(--chalk); border-color: var(--slate); }
.band--dark .btn--ghost { color: var(--chalk); border-color: var(--chalk); }
.band--dark .btn--ghost:hover { background: var(--chalk); color: var(--slate-deep); }
.btn--wide { width: 100%; text-align: center; }

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

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}
.hero h1 { margin-bottom: 0.4em; }
.hero__lede { font-size: 1.2rem; color: #2c3739; }
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__note {
  font-family: var(--sans); font-size: 0.9rem; color: var(--muted);
  margin-top: 1.4rem; max-width: 34ch;
}

/* ------------------------------------------------------- the sign decal -- */

.decal-stage { display: grid; gap: 1.1rem; justify-items: stretch; }

.decal {
  background: var(--brand);
  color: var(--slate-deep);
  border: 9px solid var(--paper-hi);
  border-radius: 10px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: 0 18px 40px -22px rgba(120, 48, 4, 0.75);
  transform: rotate(-1.4deg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.decal::after {   /* glass sheen, kept faint */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,0.14) 0 38%, transparent 38.5%);
  pointer-events: none;
}

/* On an orange panel the small print goes dark, not white: white would drop
   under 3:1 at these sizes. The Deliveroxx wordmark is the one thing knocked
   out in white, which is what makes it the loudest element on the sign. */
.decal__store {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0 0 0.55rem;
  overflow-wrap: break-word; color: var(--slate-deep);
}
.decal__delivers {
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: rgba(11, 32, 39, 0.82); margin: 0 0 1.35rem;
}
.decal__rule { height: 2px; background: rgba(11, 32, 39, 0.45); width: 74%; margin: 0 auto 1.35rem; }
.decal__provided {
  font-family: var(--serif); font-size: 0.95rem;
  color: rgba(11, 32, 39, 0.8); margin: 0 0 0.35rem;
}
.decal__brand {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: -0.04em;
  margin: 0; color: #fff;
  display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.decal__brand::after {
  content: ""; width: 9px; height: 9px; background: var(--slate-deep);
  border-radius: 50%; transform: translateY(-3px); flex: none;
}
.decal__meta {
  font-family: var(--sans); font-size: 0.82rem;
  color: rgba(11, 32, 39, 0.72); margin: 0.7rem 0 0;
}

.decal-input { display: grid; gap: 0.45rem; }
.decal-input label { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
.decal-input input {
  font-family: var(--sans); font-size: 1.05rem; padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule); border-bottom: 2px solid var(--slate);
  background: var(--paper-hi); color: var(--ink); border-radius: 2px; width: 100%;
}

/* -------------------------------------------------------------- bands ---- */

.band { padding-block: clamp(3.25rem, 6vw, 5rem); }
.band--rule { border-top: 1px solid var(--rule); }
.band--dark { background: var(--slate); color: var(--chalk); }
.band--dark h2 { color: var(--chalk); }
.band--dark p { color: rgba(244, 246, 241, 0.86); }
.band--dark a { color: var(--brand-lift); }
.band--tint { background: var(--paper-hi); }

.band__head { max-width: 34ch; margin-bottom: 2.5rem; }
.band__head p { color: var(--muted); margin-bottom: 0; }
.band--dark .band__head p { color: rgba(244, 246, 241, 0.8); }

/* --------------------------------------------------- how it works (1-4) -- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem;
  padding-block: 1.7rem;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num {
  font-family: var(--sans); font-weight: 700; font-size: 2rem;
  color: var(--brand); line-height: 1; letter-spacing: -0.04em;
}
.step h3 { margin-bottom: 0.3em; }
.step p { margin: 0; color: var(--muted); }

/* ---------------------------------------------------------- the kit ------ */

.kit { display: grid; gap: 1.6rem 3rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 44rem) { .kit { grid-template-columns: 1fr 1fr; } }
.kit li { padding-left: 1.5rem; position: relative; max-width: 42ch; }
.kit li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; background: var(--brand);
}
.kit strong { font-family: var(--sans); font-weight: 600; display: block; }
.kit span { color: var(--muted); font-size: 0.98rem; }
.band--dark .kit span { color: rgba(244, 246, 241, 0.78); }

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

.coverage__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .coverage__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.zip-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; }
.zip-form input {
  font-family: var(--sans); font-size: 1.15rem; letter-spacing: 0.06em;
  padding: 0.9rem 1rem; border: 2px solid var(--chalk); border-radius: 2px;
  background: transparent; color: var(--chalk); width: 9.5rem;
}
.zip-form input::placeholder { color: rgba(244, 246, 241, 0.5); letter-spacing: 0.06em; }
.zip-result {
  margin-top: 1.4rem; padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--brand); background: rgba(255, 255, 255, 0.07);
  max-width: 46ch;
}
.zip-result p { margin: 0; }
.zip-result[hidden] { display: none; }

/* ---------------------------------------------------------------- forms -- */

.form-block {
  background: var(--paper-hi);
  border-top: 4px solid var(--slate);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.field-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 42rem) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--sans); font-size: 0.94rem; font-weight: 500; }
.field .hint { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem;
  padding: 0.75rem 0.85rem; width: 100%;
  border: 1px solid #c9cdc4; border-radius: 2px;
  background: #fff; color: var(--ink);
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--slate); }
.field--error input, .field--error select, .field--error textarea { border-color: #a02c1c; background: #fdf4f2; }
.field .err { font-family: var(--sans); font-size: 0.86rem; color: #a02c1c; }

.check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; flex: none; }

.form-actions { margin-top: 1.9rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.form-actions .fineprint { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0; max-width: 34ch; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 1rem 1.2rem; border-left: 4px solid #a02c1c;
  background: #fdf4f2; margin-bottom: 1.8rem; font-family: var(--sans); font-size: 0.96rem;
}
.alert--ok { border-left-color: var(--brand); background: #fdf6e7; }

/* ----------------------------------------------------------- side rails -- */

.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 58rem) { .split { grid-template-columns: 0.85fr 1.15fr; } }

.quote {
  border-left: 3px solid var(--brand); padding-left: 1.4rem;
  font-size: 1.15rem; font-style: italic; color: #2c3739; max-width: 40ch;
}
.quote cite {
  display: block; margin-top: 0.8rem; font-family: var(--sans);
  font-style: normal; font-size: 0.9rem; color: var(--muted);
}

.stat-row { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 2.5rem; }
.stat b { font-family: var(--sans); font-size: 1.9rem; font-weight: 700; display: block; letter-spacing: -0.03em; }
.stat span { color: var(--muted); font-size: 0.96rem; }
.band--dark .stat span { color: rgba(244, 246, 241, 0.78); }

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

.site-foot { background: var(--slate-deep); color: rgba(244, 246, 241, 0.82); padding-block: 3rem 2.25rem; }
.site-foot a { color: var(--chalk); }
.site-foot__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h4 { font-size: 0.95rem; margin: 0 0 0.8rem; color: var(--chalk); font-weight: 600; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.96rem; }
.site-foot .wordmark, .site-foot .wordmark__text { color: var(--brand-lift); }
.site-foot .wordmark::after { background: var(--brand-lift); }
.site-foot__base {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 246, 241, 0.18);
  font-family: var(--sans); font-size: 0.85rem; display: flex; gap: 1rem;
  justify-content: space-between; flex-wrap: wrap;
}

/* ------------------------------------------------------------- utility --- */

.lede { font-size: 1.15rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------------------------------------------------------- Roxx the Ox ---
   The mascot artwork is a JPG, so it carries its own background rather than
   being a cut-out. Everything here is built around that: he sits in a frame
   like a framed picture, and nothing crops him. Height is left to the image
   (height: auto) because forcing an aspect ratio on artwork whose proportions
   we do not control is how you end up slicing the top off his head.
   If you later export him as a transparent PNG, delete the .roxx-frame border
   and background and he will float free instead. -------------------------- */

/* Two knobs control how big Roxx ever gets. --roxx-w caps his width, --roxx-h
   caps his height. The height cap matters as much as the width one: a portrait
   image constrained only by width still runs tall down the page, which is what
   made him overpower the section before. object-fit: contain keeps him
   undistorted inside those bounds, and any spare space is white, which the
   frame already is, so the letterboxing is invisible. */
.roxx-frame {
  --roxx-w: 13rem;
  --roxx-h: 14rem;
  background: var(--paper-hi);
  border: 8px solid var(--paper-hi);
  border-radius: 8px;
  box-shadow: 0 14px 34px -20px rgba(11, 32, 39, 0.55);
  overflow: hidden;
  line-height: 0;              /* kills the inline-image gap under the picture */
  width: 100%;
  max-width: var(--roxx-w);
}
.roxx-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--roxx-h);
  object-fit: contain;
}

/* Slight tilt so he reads as a sticker slapped on, echoing the window decal.
   The hero decal leans one way, Roxx leans the other. */
.roxx-frame--tilt { transform: rotate(1.6deg); }

/* The small version, for the drivers and thank-you pages. */
.roxx-frame--sm { --roxx-w: 8.5rem; --roxx-h: 9.5rem; border-width: 6px; }

/* He shares the row with the copy rather than dominating it, and sits at the
   top of his column so the heading beside him stays the entry point. */
.roxx-meet { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .roxx-meet { grid-template-columns: auto 1fr; } }
.roxx-meet .roxx-frame { justify-self: start; }

.roxx-name {
  font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
  color: var(--brand-deep); margin: 0 0 0.6rem;
}
.band--dark .roxx-name { color: var(--brand-lift); }

/* Thank-you page: Roxx sits beside the confirmation rather than above it,
   so the message stays the first thing read. */
.roxx-aside { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .roxx-aside { grid-template-columns: auto 1fr; } }