/* ==========================================================================
   MovingMoving
   ---------------------------------------------------------------------------
   Design thesis: we are the clearance firm that shows you the arithmetic.

   Every competitor in this trade wears the same uniform — hi-vis yellow on
   black, condensed capitals. Yellow is also the skip industry's colour, and
   skips are the competition, so wearing it is an own goal.

   Instead: the ground is dust-sheet grey, the colour of a decorator's canvas
   on a cleared floor. One bold colour — surveyor's orange — and it is reserved
   entirely for volume and measurement, because cubic yards are what we sell.
   Every price and every yard figure is set in monospace, so the numbers read
   as a readout rather than a sales claim.

   The signature element is the yard bar: a measuring stick that fills as a load
   grows. Customers cannot picture a cubic yard, and that is the single biggest
   reason they don't ask for a price.
   ========================================================================== */

:root {
  /* ground and ink — navy from the real brand mark (img/logo-icon.png),
     not a generic near-black, so headings/buttons/footer read as the same
     brand as the logo rather than a neutral default sitting next to it. */
  --sheet:    #F1F0EC;   /* dust sheet */
  --paper:    #FBFBF9;   /* raised surfaces */
  --ink:      #0C3255;
  --ink-2:    #234A68;
  --graphite: #4F5A66;   /* body text, navy-toned rather than neutral grey */
  --quiet:    #808A93;   /* captions */
  --rule:     #DCDAD3;

  /* the one bold colour: measurement — red, at Sajjad's request (2026-09-13)
     for a full rebrand of every CTA/accent on the pages that sell a
     service; was the logo's own arc orange (#E2712A) until then. Kept
     deliberately distinct from --flag-red (#C81E33, a rare emphasis accent,
     unused by any rule right now) and --alarm (#A32717, error/danger state)
     so a CTA, a rare flag and an error don't all read as the same red. */
  --mark:     #C62D22;
  --mark-ink: #B3261E;   /* text-safe on light grounds */
  --mark-light: #F5ADA6; /* text-safe on dark grounds, incl. the lightest
                            corner of --panel-deep's highlight — --mark
                            itself dips well below AA there, this holds
                            ~6.1:1 at that corner and ~7.1:1 on flat --ink */
  --mark-wash:#FBE4E1;

  /* the flag's red — used sparingly, never as a second "measurement"
     colour: a rare emphasis accent only (see .flag-accent). */
  --flag-red: #C81E33;
  --flag-red-wash: #FAE4E7;

  /* state, never decoration */
  --sorted:   #2E6B45;
  --sorted-wash: #E4EFE7;
  --alarm:    #A32717;

  --wrap: 1140px;
  --r:    10px;
  --r-lg: 16px;

  --lift: 0 2px 4px rgba(6,27,46,.07), 0 14px 30px -14px rgba(6,27,46,.3);
  --lift-lg: 0 30px 64px -26px rgba(6,27,46,.5);

  /* Deep brand: the same navy and orange, given real depth rather than a
     flat fill — a boxed radial for cards (the highlight implies a light
     source above the content), a plain linear for full-bleed bands (a
     radial's off-centre glow reads wrong stretched across 100vw). Both
     layer in the same fine grain so a large dark panel doesn't read as a
     flat vector fill. */
  --ink-deep: #071D33;
  --ink-muted-dark: #C9CCC9;   /* secondary text on a dark panel — footer, CTA band, summary totals */
  --grain:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  --panel-deep:
    var(--grain),
    radial-gradient(130% 150% at 18% 0%, #123c67 0%, var(--ink) 45%, var(--ink-deep) 100%);
  --panel-deep-wide:
    var(--grain),
    linear-gradient(165deg, #123c67 0%, var(--ink) 45%, var(--ink-deep) 100%);
  /* Both gradients only ever get darker than --mark-ink (6.54:1 on white,
     already the AA-safe fill), never lighter — a lighter stop would repeat
     the contrast failure --mark-ink itself was chosen to fix. */
  --mark-deep: linear-gradient(180deg, var(--mark-ink) 0%, #7A1610 100%);
  --mark-light-deep: linear-gradient(180deg, #F5A99C 0%, var(--mark) 100%);

  /* Vivid backdrop — blue/orange/red/purple, the Stripe-marketing-page
     look Sajjad pointed at. Kept OFF the hero copy itself: the purple end
     (#8B3FD1/#5B2E9E) measures under 3:1 against both --ink and --graphite,
     so the hero text sits on its own frosted panel above this, the same
     way Stripe's own page never puts body copy directly on the gradient
     either — every readable line there sits on a white card. */
  --bg-vivid: linear-gradient(125deg,
    #4F8FE8 0%, #7FA8EA 14%, #FFEFDD 24%, #FFC38A 36%,
    #FF8A3D 48%, #FF5A36 60%, #E23A6E 74%, #8B3FD1 88%, #5B2E9E 100%);

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* One scale, used everywhere. */
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--sheet);
  color: var(--graphite);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2.5px solid var(--mark);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 .45em;
  text-wrap: balance;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* Eyebrows are set in mono: they are labels on a drawing, not decoration. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mark-ink);
  margin: 0 0 .7rem;
}

.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; color: var(--ink-2); }

/* Live-price preview card — corporate.html and house_clearance.html's
   "typical price" asides used these classes with no CSS behind them at
   all (no border, no card, plain text); book.html's own booking summary
   layers .card__head/.pulse on top of its own already-styled
   .qsummary__inner, so this only needs to add the missing inner parts,
   not a second competing container there. */
.card {
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--lift);
}
.card__head {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sorted);
  margin: 0 0 .7rem;
}
/* Green, not brand orange — this label always means "this price is live,
   right now", and green is this site's own existing colour for "sorted/
   good to go" (.qfree, .done__row--due) rather than a new one. */
.pulse {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--sorted); box-shadow: 0 0 0 rgba(46,107,69,.5);
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(46,107,69,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(46,107,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,107,69,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; box-shadow: none; }
}
.card__slot {
  font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1; margin: 0 0 .3rem; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--mark-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card__sub { font-size: .9rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.card__slot-unit {
  font-size: 1rem; font-weight: 500; -webkit-text-fill-color: var(--quiet);
}
.card__rows { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.card__rows > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--rule);
  font-size: .9rem; color: var(--ink-2);
}
.card__rows > div:last-child { border-bottom: 0; }
.card__rows strong { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.card__fine { font-size: .78rem; color: var(--quiet); margin: .8rem 0 0; text-align: center; }

/* Every figure is a readout. */
.num, .money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 650;
  font-size: var(--step-0);
  letter-spacing: -.01em;
  padding: .78rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  text-align: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              transform .16s ease;
}
.btn--lg   { padding: 1rem 1.8rem; font-size: var(--step-1); }
.btn--full { width: 100%; }

/* Was --ink-btn-deep (navy) until the 2026-09-13 red rebrand — now the same
   --mark-deep gradient .btn--mark already used, so the primary CTA and the
   accent colour are one colour, not two, on the pages that sell a service. */
.btn--primary {
  background: var(--mark-deep); color: var(--paper);
  box-shadow: 0 10px 22px -12px rgba(122,22,16,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--primary:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* --mark-ink, not --mark, as the base — white-on-#C62D22 measures 5.53:1,
   comfortably above WCAG AA's 4.5:1, but --mark-ink's 6.54:1 gives more
   margin as the starting stop, and --mark-deep only ever darkens further
   from there, so every point of the gradient stays AA-safe, not just the
   top stop. */
.btn--mark { background: var(--mark-deep); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(122,22,16,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.btn--mark:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* The .cta band's own background is the same dark navy the page body uses,
   so a "primary" button there reads as almost invisible — swap it for the
   mark treatment so it actually stands out against the dark band. */
.cta .btn--primary { background: var(--mark-deep);
  box-shadow: 0 10px 22px -12px rgba(122,22,16,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.cta .btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper); }

.btn.is-disabled { opacity: .4; pointer-events: none; }

.btn--book { padding: .65rem 1.25rem; flex: none; }

.btn--call {
  flex-direction: column; align-items: flex-end; gap: 0;
  padding: .45rem 1rem; line-height: 1.2;
  border: 1.5px solid var(--rule); background: var(--paper);
}
.btn__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--quiet); }
.btn__num { font-family: var(--mono); font-weight: 600; font-size: 1.02rem; color: var(--ink); }

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

.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav--scrolled { border-bottom-color: var(--rule); }
.nav__inner { display: flex; align-items: center; gap: 2rem; height: 168px; }

.logo { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin-right: auto; }
/* One-line tagline under the lockup — the wordmark itself is baked into
   the PNG, so this is a separate text element rather than something
   trying to match the logo's own colours. */
.logo__tag {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-2); white-space: nowrap;
}
/* Dropped below 620px rather than shrunk further or allowed to wrap — at
   phone widths the nav has to stay compact, and the same line is already
   in the H1 lede on every page it matters for. */
@media (max-width: 620px) {
  .logo__tag { display: none; }
}
/* The real brand mark, full lockup (img/logo-full.png) — flag M, arc, van
   and parcel, with the wordmark baked in underneath exactly as the source
   logo has it, "Moving" and "Moving" each their own colour.
   Doubled from 60px on request — .nav__inner's height grows to match so
   the sticky bar doesn't clip it or overlap page content underneath. */
/* width is an explicit px value (matching the source PNG's 355:150 ratio)
   rather than "auto" — width:auto here interacts with the global
   `img { max-width: 100% }` reset and this element's flex-item context to
   collapse to a computed 0px in some engines, verified via getComputedStyle
   before this fix; an explicit width sidesteps that sizing cycle entirely.
   Sized to 136px — the tallest this renders without upscaling past the
   source PNG's native 355×150 and visibly softening; the source file isn't
   a vector, so "sharper" has to mean "not blown up past its real
   resolution" rather than a crisper re-render. The drop-shadow pair below
   is what gives it the requested lift/3D feel — a tight dark shadow for
   contact, a softer wider one for the raised look. */
.logo__full {
  height: 136px; width: 322px; flex: none; display: block;
  filter: drop-shadow(0 1px 1px rgba(7, 29, 51, .35))
          drop-shadow(0 6px 12px rgba(7, 29, 51, .22));
}
/* The icon-only mark (img/logo-icon.png), still used by the admin panel
   (app/templates/admin/base.html, admin/login.html), which pairs it with
   plain text rather than the full public-site lockup. */
.logo__mark { height: 40px; width: auto; flex: none; display: block; }
/* Kept for the footer, which stays on a dark ground where the light-
   optimised full lockup's shadow/bevel wouldn't read — plain two-tone
   text still does the "different colours" job there. */
.logo__text {
  font-family: var(--display); font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.03em; color: var(--ink);
}
.logo__text em { font-style: normal; color: var(--mark-ink); }
.logo__text--light { color: var(--paper); }
.logo__text--light em { color: var(--mark); }

.nav__links { display: flex; gap: 1.5rem; }
.nav__links a {
  font-size: var(--step--1); font-weight: 550; color: var(--ink-2);
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--mark); }

/* ============================================ THE SIGNATURE: the yard bar ==
   A measuring stick. Ticks are cubic yards; the fill is the load. Used in the
   hero, the quote builder and the route plan so volume reads the same way
   everywhere. This is the element the site is remembered by.
   ========================================================================== */

.yardbar {
  --yb-fill: 0%;
  position: relative;
  height: 46px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
}
.yardbar__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--yb-fill);
  background: repeating-linear-gradient(
    -45deg, var(--mark) 0 9px, #D24C24 9px 18px);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
/* Ticks sit above the fill so the scale stays readable when it is full. */
.yardbar__ticks {
  position: absolute; inset: 0; display: flex; pointer-events: none;
}
.yardbar__tick {
  flex: 1 1 0; border-right: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  position: relative;
}
.yardbar__tick:last-child { border-right: 0; }
.yardbar__tick span {
  position: absolute; bottom: 3px; left: 4px;
  font-family: var(--mono); font-size: .62rem; color: var(--ink);
  opacity: .55;
}
.yardbar__read {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-end; padding-right: .7rem;
  font-family: var(--mono); font-weight: 600; font-size: .95rem; color: var(--ink);
  pointer-events: none;
}
.yardbar--sm { height: 30px; }
.yardbar--sm .yardbar__read { font-size: .8rem; }

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

.hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--bg-vivid);
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__copy {
  background: rgba(251,251,249,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--lift-lg);
}
.hero h1 { font-size: var(--step-4); letter-spacing: -.035em; margin-bottom: .5rem; font-weight: 800; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--mark) 0%, var(--mark-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1.2rem; }

.hero__points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: .5rem .9rem; font-size: var(--step--1); color: var(--ink-2); }
.hero__points li { display: flex; align-items: center; gap: .4rem; }
.hero__points li::before {
  content: ""; width: 14px; height: 8px; flex: none;
  border-left: 2px solid var(--sorted); border-bottom: 2px solid var(--sorted);
  transform: rotate(-45deg) translateY(-2px);
}

/* Text next to a real photo — a supporting image for a section that's
   making a specific point, not a decorative banner. Stacks to one column
   at the same breakpoint .hero__inner already does. */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.split__photo {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); box-shadow: var(--lift-lg);
}

/* the live sum — the thesis, made visible */
.sum {
  background: var(--panel-deep); background-size: 3px 3px, auto; color: var(--paper);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 1.9rem);
  box-shadow: var(--lift-lg), inset 0 1px 0 rgba(255,255,255,.06);
}
.sum__label {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mark-light); margin: 0 0 1rem;
}
.sum__line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .5rem 0; font-size: var(--step--1);
  border-bottom: 1px solid rgba(255,255,255,.1); color: var(--ink-muted-dark);
}
.sum__line strong { font-family: var(--mono); font-weight: 600; color: var(--paper); font-size: 1rem; }
.sum__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--mark);
}
.sum__total span { font-size: var(--step--1); color: var(--ink-muted-dark); }
.sum__total strong {
  font-family: var(--mono); font-weight: 600; font-size: var(--step-3);
  letter-spacing: -.03em;
  background: var(--mark-light-deep);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sum__what { margin: .9rem 0 0; font-size: var(--step--1); color: var(--ink-muted-dark); }
.sum .yardbar { margin: 1rem 0 .3rem; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.sum .yardbar__tick { border-right-color: rgba(255,255,255,.16); }
.sum .yardbar__tick span, .sum .yardbar__read { color: var(--paper); }

/* --------------------------------------------------------------- strip --- */

/* A quiet fact-strip read as filler before; now a confident colour-block
   bar — same four true, checkable numbers, just given the weight they're
   due. Same dark panel language as .sum/.trustcard elsewhere, not a new
   colour introduced just for this. */
.strip { background: var(--panel-deep); background-size: 3px 3px, auto; }
.strip__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 1.7rem clamp(20px,4vw,32px);
}
.strip__inner > div {
  padding: 0 1rem 0 2.1rem; border-right: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.strip__inner > div:first-child { padding-left: 2.1rem; }
.strip__inner > div:last-child { border-right: 0; }
/* Same checkmark language as .hero__points, just bigger — one visual
   vocabulary for "this is confirmed", not a second icon set to maintain. */
.strip__inner > div::before {
  content: ""; position: absolute; left: 0; top: .3rem;
  width: 18px; height: 10px;
  border-left: 2.5px solid var(--sorted); border-bottom: 2.5px solid var(--sorted);
  transform: rotate(-45deg);
}
.strip__inner > div:first-child::before { left: 1.1rem; }
.strip strong {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: var(--step-2); color: var(--paper); letter-spacing: -.03em;
}
.strip span { font-size: var(--step--1); color: var(--ink-muted-dark); }

/* ------------------------------------------------------------ sections --- */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--paper { background: var(--paper); border-block: 1px solid var(--rule); }

.grid { display: grid; gap: 1rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.tile {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1.5rem; position: relative;
  display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-decoration: none;   /* some tiles are now links (property-size cards) */
  box-shadow: var(--lift);
}
/* A small fact badge in the corner — same-day/licensing status at a glance,
   never a superlative we can't back up ("most popular", "best price"). */
.tile__badge {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px; line-height: 1;
  background: var(--mark-ink); color: #fff;
}
/* Solid colour, not the pale wash these used before — same pillar-colour
   logic as the booking page: orange for speed (same-day), green for
   environment (WEEE). --mark-ink/--sorted are both already AA-safe with
   white text (5.48:1 / 6.35:1), so this is bolder without needing a new
   contrast check per badge. */
.tile__badge--weee { background: var(--sorted); color: #fff; }
.tile--dark .tile__badge { background: rgba(255,255,255,.14); color: #fff; }
.section--paper .tile { background: var(--sheet); }
.tile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--lift-lg); }
/* The visible link text was the only clickable part of the whole card --
   tapping the icon, heading, description or price (most of the tile's
   actual area, especially on a phone) did nothing. The stretched-link
   technique keeps the one real <a> (so this stays a single link for
   screen readers and "open in new tab", not a fake click-handler on a
   div) but makes its hit target the full card via an absolutely
   positioned pseudo-element.
   Scoped to ".tile .tile__link" specifically, not the bare class -- the
   same class name is reused on a <span> inside quote_page.html's already-
   fully-clickable property-size <a class="tile"> cards (harmless either
   way there) and, more importantly, standalone inside skip_hire.html's
   .promise article, which has no position:relative of its own. An
   unscoped rule would have positioned that one absolute against whatever
   ancestor happens to be positioned instead -- a much bigger, wrong hit
   area, not a fix. */
.tile .tile__link { position: static; }
.tile .tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Each service gets its own coloured badge — real icon illustrations, not
   a bare emoji character, and a distinct hue per card so the services grid
   reads as multi-colour rather than one flat brand tone repeated seven
   times. Colour is decorative background only; every icon's own line/fill
   detail still carries the object, same as the item-picker icon system. */
.tile__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1rem;
}
.tile__icon svg { width: 34px; height: 34px; }
.tile__icon--furniture { background: #F1DFC8; }
.tile__icon--rubbish { background: #FCE4D2; }
.tile__icon--house { background: #DCE7F1; }
.tile__icon--builders { background: #E7E5E0; }
.tile__icon--appliances { background: #DCEAF0; }
.tile__icon--business { background: #DDE3EC; }
.tile__icon--sharps { background: #FBDADA; }
.tile--dark .tile__icon { background: rgba(255,255,255,.1); }
.tile h3 { font-size: var(--step-1); }
.tile p { margin: 0 0 1.1rem; font-size: var(--step--1); }
.tile__price {
  margin-top: auto; align-self: flex-start;
  font-family: var(--mono); font-weight: 600; font-size: var(--step--1);
  color: var(--mark-ink); background: var(--mark-wash);
  padding: .25rem .6rem; border-radius: 5px;
}
.tile--dark {
  background: var(--panel-deep); background-size: 3px 3px, auto; border-color: transparent;
  box-shadow: var(--lift);
}
.tile--dark h3 { color: var(--paper); }
.tile--dark p { color: var(--ink-muted-dark); }
.tile__link { margin-top: auto; font-weight: 600; color: var(--mark); font-size: var(--step--1); }

/* Man & van fixed-load tiles — image-led product cards: the load-pile
   illustration up top so the size is seen before it's read, then price,
   then the same weight/bag-count detail line a hire company publishes. */
.loadtile {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 1.3rem;
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--lift);
}
.loadtile:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--lift-lg); }
.loadtile__image {
  width: 100%; aspect-ratio: 3 / 2; max-height: 150px; margin-bottom: .6rem;
  background: var(--sheet); border-radius: var(--r);
  display: grid; place-items: center; padding: .5rem;
}
.loadtile__image svg { width: 78%; height: 78%; }
.loadtile__blurb {
  font-size: var(--step--1); color: var(--quiet); margin: 0 0 .7rem;
  line-height: 1.4;
}
.loadtile h3 { font-size: var(--step-0); margin: 0 0 .25rem; }
.loadtile__price {
  font-family: var(--mono); font-weight: 700; font-size: var(--step-2);
  color: var(--ink); line-height: 1; margin: 0 0 .5rem;
}
.loadtile__stats { font-size: var(--step--1); color: var(--quiet); margin: 0 0 1.1rem; line-height: 1.5; }
.loadtile__cta { margin-top: auto; font-weight: 600; color: var(--mark-ink); font-size: var(--step--1); }

.loadtile--dark {
  background: var(--panel-deep); background-size: 3px 3px, auto; border-color: transparent;
  box-shadow: var(--lift);
}
.loadtile--dark .loadtile__image { background: rgba(255,255,255,.08); }
.loadtile--dark h3 { color: var(--paper); }
.loadtile--dark .loadtile__price {
  background: var(--mark-light-deep);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loadtile--dark .loadtile__stats, .loadtile--dark .loadtile__blurb { color: var(--ink-muted-dark); }
.loadtile--dark .loadtile__cta { color: var(--mark-light); }
.loadtile--dark:hover { transform: translateY(-2px); box-shadow: var(--lift-lg); }

@media (max-width: 640px) { .loadtiles { grid-template-columns: repeat(2, 1fr); } }

/* house-clearance.html's "price it yourself" item teaser — icons and names
   only, no prices (see the comment in that file for why). */
.hcitems { margin: 2rem 0 2.2rem; }
.hcitem {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; padding: 1.2rem .8rem; background: var(--sheet);
  border-radius: var(--r-lg);
}
.hcitem__icon { width: 46px; height: 46px; }
.hcitem__icon svg { width: 100%; height: 100%; }
.hcitem span:last-child { font-weight: 600; font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 640px) { .hcitems { grid-template-columns: repeat(2, 1fr); } }

/* steps: a real sequence, so numbering carries information */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.steps li { position: relative; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.steps__n {
  font-family: var(--mono); font-weight: 600; font-size: var(--step--1);
  color: var(--mark-ink); display: block; margin-bottom: .5rem;
}
.steps h3 { font-size: var(--step-1); }
.steps p { margin: 0; font-size: var(--step--1); }
.steps__time {
  margin: .6rem 0 0; font-family: var(--mono); font-size: .78rem;
  color: var(--sorted); font-weight: 500;
}

/* published rate block */
.rate {
  background: var(--panel-deep); background-size: 3px 3px, auto;
  border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); margin: 1.8rem 0 1.4rem;
  box-shadow: var(--lift);
}
.rate__eq { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1.5rem; }
.rate__bit { display: flex; flex-direction: column; }
.rate__bit strong {
  font-family: var(--mono); font-weight: 600; font-size: var(--step-3);
  line-height: 1; letter-spacing: -.03em;
  background: var(--mark-light-deep);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rate__bit em {
  font-style: normal; font-size: var(--step--1); color: var(--ink-muted-dark); margin-top: .4rem;
}
.rate__op { font-family: var(--mono); font-size: var(--step-1); color: var(--ink-muted-dark); padding-bottom: .9rem; }
.rate__rule { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--ink-muted-dark); font-size: var(--step--1); }

.ratelist { list-style: none; margin: auto 0 0; padding: 0; width: 100%; }
.ratelist li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1);
}
.ratelist li:last-child { border-bottom: 0; }
.ratelist strong { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.rate__free { color: var(--sorted) !important; }

/* comparison table */
.cmp__scroll { overflow-x: auto; margin-top: 1.6rem; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--step--1); }
.cmp th, .cmp td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); }
.cmp thead th { font-family: var(--display); font-weight: 650; color: var(--ink);
  border-bottom: 2px solid var(--ink); font-size: var(--step-0); }
.cmp tbody th { font-weight: 550; color: var(--graphite); width: 30%; }
.cmp td { font-variant-numeric: tabular-nums; }
.cmp thead th.cmp__us { background: var(--panel-deep-wide); color: var(--paper); border-radius: 8px 8px 0 0; border-bottom-color: var(--mark); }
.cmp td.cmp__us { background: var(--paper); }
.cmp td.cmp__us strong { font-family: var(--mono); color: var(--mark-ink); font-weight: 600; }
.cmp tbody tr:last-child td.cmp__us { border-radius: 0 0 8px 8px; }
.cmp__note { font-size: .84rem; color: var(--quiet); margin-top: .9rem; }
.pcheck { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.pcheck label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: .6rem; }
.pcheck__row { display: flex; gap: .6rem; max-width: 360px; }
.pcheck__row input {
  flex: 1; min-width: 0; padding: .6rem .8rem; border: 1.5px solid var(--rule);
  border-radius: var(--r); font: inherit; font-size: var(--step--1);
}
.pcheck__row input:focus { outline: 2px solid var(--mark); outline-offset: 1px; border-color: var(--mark); }
.pcheck__result { margin: .7rem 0 0; font-size: var(--step--1); min-height: 1.4em; }
.pcheck__result--yes { color: var(--sorted); font-weight: 600; }
.pcheck__result--maybe { color: var(--ink-2); }

/* promises */
.promise { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.4rem; }
.section--paper .promise { background: var(--sheet); }
.promise h3 { font-size: var(--step-1); }
.promise p { margin: 0; font-size: var(--step--1); }

.pledge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0;
  background: var(--mark-wash); color: var(--mark-ink);
  border-radius: 999px; padding: .45rem 1rem; font-size: var(--step--1);
}

/* cta band */
.cta { background: var(--panel-deep-wide); color: var(--ink-muted-dark); }
.cta__inner { display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: clamp(2.2rem,5vw,3.4rem) clamp(20px,4vw,32px); flex-wrap: wrap; }
.cta p { margin: 0; max-width: 44ch; font-size: var(--step--1); }
.h2--light { color: var(--paper); }

/* areas */
.coverage-map {
  height: 420px; border-radius: var(--r-lg); border: 1px solid var(--rule);
  overflow: hidden; margin-bottom: 2.2rem; background: var(--sheet); box-shadow: var(--lift);
}
.coverage-map .leaflet-popup-content strong { color: var(--ink); }
.coverage-map .leaflet-popup-content a { color: var(--mark-ink); font-weight: 600; }
@media (max-width: 620px) { .coverage-map { height: 320px; } }

.areas { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: start; }
.chips { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li a, .chips li {
  display: inline-block; border: 1px solid var(--rule); background: var(--paper);
  border-radius: 999px; padding: .3rem .8rem; font-size: var(--step--1); color: var(--ink-2);
}
.chips li a:hover { border-color: var(--ink); color: var(--ink); }
.quotebox { display: grid; gap: 1rem; }
.quotebox blockquote {
  margin: 0; background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--mark); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 1.2rem 1.4rem;
}
.quotebox p { margin: 0 0 .6rem; font-size: var(--step-0); color: var(--ink-2); }
.quotebox cite { font-style: normal; font-family: var(--mono); font-size: .78rem; color: var(--quiet); }

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

.foot { background: var(--panel-deep-wide); color: var(--ink-muted-dark); padding-top: 3rem; }
.foot__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.foot__brand p { font-size: var(--step--1); max-width: 40ch; margin: .8rem 0 0; }
.foot__col h4 { color: var(--paper); font-size: var(--step-0); }
.foot__col a { display: block; padding: .2rem 0; font-size: var(--step--1); }
.foot__col a:hover { color: var(--mark); }
.foot__hours { font-size: .82rem; margin-top: .7rem; color: var(--ink-muted-dark); }
.foot__legal {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0 1.3rem;
  font-size: .82rem; color: var(--ink-muted-dark);
}

/* --------------------------------------------------- mobile action bar --- */

.mobar { display: none; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 960px) {
  .hero__inner, .areas, .split { grid-template-columns: 1fr; }
  .grid--4, .grid--3, .steps { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .strip__inner { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  .strip__inner > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 620px) {
  .grid--3, .steps { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__legal { flex-direction: column; }
  .hero__cta .btn { flex: 1 1 100%; }
  .btn--call .btn__label { display: none; }
  .logo__full { height: 104px; width: 246px; }
  .nav__inner { height: 122px; gap: .9rem; }
  .steps li { border-top-width: 1.5px; }

  .mobar {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .45rem;
    box-shadow: 0 -8px 24px -16px rgba(23,25,26,.4);
  }
  .mobar a {
    text-align: center; padding: .6rem 0; border-radius: 8px;
    font-weight: 600; font-size: var(--step--1); color: var(--ink);
    border: 1px solid var(--rule);
  }
  .mobar__cta { background: var(--mark); color: #fff !important; border-color: var(--mark); }
  .foot { padding-bottom: 76px; }
}

/* hero sum: the job description above the bar */
.sum__job {
  font-family: var(--display); font-weight: 600; font-size: var(--step-1);
  color: var(--paper); margin: 0 0 1rem; letter-spacing: -.02em;
  min-height: 2.6rem;
}

/* ==================================================== load sizes ==========
   Four loads, shot from the same spot, so the volumes compare at a glance.
   Until real photos exist a scale diagram carries the same information.
   ========================================================================== */

.loads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.8rem; }

.load {
  display: grid; grid-template-columns: 200px 1fr;
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
}
.section--paper .load { background: var(--paper); }

.load__shot { position: relative; background: var(--panel-deep); background-size: 3px 3px, auto; color: #6E736E; }
.load__shot img { width: 100%; height: 100%; object-fit: cover; }
.load__shot--drawn { display: flex; align-items: center; padding: .8rem; }
.load__shot svg { width: 100%; height: auto; }
.load__badge {
  position: absolute; top: .6rem; left: .6rem;
  background: var(--paper); color: var(--ink);
  font-size: .78rem; padding: .18rem .5rem; border-radius: 4px;
}

.load__body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.load__body h3 { font-size: var(--step-1); margin-bottom: .15rem; }
.load__short { font-size: var(--step--1); color: var(--mark-ink); margin: 0 0 .7rem; font-weight: 550; }

.load__fits { list-style: none; padding: 0; margin: 0 0 .7rem; }
.load__fits li {
  font-size: var(--step--1); padding-left: 1.1rem; position: relative; margin-bottom: .18rem;
}
.load__fits li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; background: var(--mark); border-radius: 1px;
}

.load__compare { font-size: .8rem; color: var(--quiet); margin: 0 0 .9rem; }
.load__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.load__price { font-size: var(--step-2); color: var(--ink); letter-spacing: -.03em; }

@media (max-width: 900px) { .loads { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .load { grid-template-columns: 1fr; }
  .load__shot { min-height: 150px; }
}

/* ==========================================================================
   Cookie consent banner (js/analytics.js). Hidden entirely unless a GA4 ID
   is actually configured — most of the time this CSS simply never applies.
   ========================================================================== */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink); border-top: 3px solid var(--mark);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}
.consent__inner {
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.consent__text {
  flex: 1; min-width: 240px; margin: 0; color: var(--paper);
  font-size: .85rem; line-height: 1.5;
}
.consent__actions { display: flex; gap: .6rem; flex: none; }
.consent__decline {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: var(--paper);
}
.consent__decline:hover { background: rgba(255,255,255,.08); }

@media (max-width: 560px) {
  .consent__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .consent__actions { justify-content: center; }
}

/* Honest trust panel replacing what should never have been invented quotes —
   see the areas section. Real, checkable claims only: the licence register,
   the published price, the guarantees already made elsewhere on the page. */
.trustcard {
  background: var(--panel-deep); background-size: 3px 3px, auto;
  color: var(--paper); border-radius: var(--r-lg);
  padding: 1.8rem 2rem; height: 100%; display: flex; flex-direction: column;
  justify-content: center; box-shadow: var(--lift);
}
.trustcard .eyebrow { color: var(--mark-light); }
.trustcard h3 {
  font-size: var(--step-1); line-height: 1.3; margin: .4rem 0 .9rem; color: var(--paper);
}
.trustcard p { color: rgba(255,255,255,.82); font-size: var(--step--1); line-height: 1.6; margin: 0 0 .9rem; }
.trustcard a { color: var(--paper); text-decoration-color: var(--mark); }
.trustcard__foot {
  margin: 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6) !important; font-size: .82rem !important;
}

/* ==========================================================================
   FAQ — answers real questions with real answers, right before the last
   decision point on the page. Reduces the exact anxieties that stop someone
   filling in a form: what if there's less, what if I need to cancel, is this
   actually legitimate.
   ========================================================================== */
/* ============================================================== recycling */
.eco { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.eco__badge { flex: none; width: clamp(120px, 16vw, 176px); }
.eco__badge svg { width: 100%; height: auto; display: block; }
/* The globe is the section's own visual centrepiece now, not a small
   corner badge -- sized to actually read as "substantial" on desktop while
   still fitting a phone screen without forcing a scroll before the copy. */
.eco__badge--globe { width: clamp(200px, 30vw, 360px); }
.eco__copy { flex: 1 1 420px; min-width: 0; }
.eco__points { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.eco__points li {
  position: relative; padding-left: 1.6rem; font-size: var(--step--1); color: var(--ink-2);
}
.eco__points li::before {
  content: ''; position: absolute; left: 0; top: .45em; width: 9px; height: 9px;
  border-radius: 50%; background: #4C8556;
}
.eco__charity {
  margin: 1.4rem 0 0; padding: .9rem 1.1rem; background: var(--sheet);
  border-left: 3px solid #4C8556; border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--step--1); color: var(--ink-2);
}
.eco__charity a { color: inherit; text-decoration-color: #4C8556; }
@media (max-width: 620px) { .eco { flex-direction: column; text-align: left; } }

.faq { max-width: 780px; }
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__item summary {
  padding: 1.1rem .2rem; cursor: pointer; font-weight: 600; font-size: var(--step-0);
  color: var(--ink); list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--mark-ink);
  flex: none; transition: transform .15s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--mark-ink); }
.faq__item p {
  margin: 0 .2rem 1.2rem; color: var(--graphite); font-size: var(--step--1); line-height: 1.6;
  max-width: 62ch;
}

/* ------------------------------------------------------- support widget --- *
 * The floating "leave us a message" button, present on every page (see
 * js/support-widget.js, which injects this markup and owns the behaviour).
 * A general contact channel: unlike /send-photos it never requires a photo
 * or a postcode, only a way to reply back to someone.
 */
.support-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 85;
  width: 58px; height: 58px; border-radius: 50%; border: none;
  background: var(--mark); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px -10px rgba(226,85,43,.55), var(--lift);
  transition: transform .15s ease, background .15s ease;
}
.support-fab:hover { background: var(--mark-ink); transform: translateY(-2px); }
.support-fab svg { width: 24px; height: 24px; }
.support-fab .i-close { display: none; }
.support-fab.is-open .i-open { display: none; }
.support-fab.is-open .i-close { display: block; }
@media (max-width: 620px) {
  body:has(.mobar) .support-fab { bottom: 84px; }
  body:has(.mobar) .support-panel { bottom: 152px; }
}

.support-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 84;
  width: 380px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 130px));
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--lift-lg), 0 2px 12px rgba(23,25,26,.12);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.support-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Same [hidden]-vs-own-display bug as elsewhere (see css/quote.css) —
   harmless here only because opacity:0 + pointer-events:none already hide
   and disable it independently of the (silently broken) hidden attribute;
   fixed anyway so that safety net isn't the only thing holding this up. */
.support-panel[hidden] { display: none; }

.support-panel__head {
  background: var(--ink); color: #fff; padding: 1rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; flex: none;
}
.support-panel__head strong { font-family: var(--display); font-size: 1.05rem; display: block; }
.support-panel__head small {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; opacity: .65;
}
.support-panel__close {
  background: none; border: none; color: #fff; opacity: .75; cursor: pointer;
  padding: .3rem; line-height: 0;
}
.support-panel__close:hover { opacity: 1; }

.support-panel__body { padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1; }

.sw__field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.sw__field > span {
  font-size: .8rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: .4rem;
}
.sw__field em {
  font-style: normal; font-family: var(--mono); font-size: .64rem;
  color: var(--mark-ink); text-transform: uppercase; letter-spacing: .08em;
}
.sw__field input, .sw__field select, .sw__field textarea {
  font: 16px/1.4 var(--text); padding: .65rem .8rem; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--paper); color: var(--ink);
  width: 100%; box-sizing: border-box;
}
.sw__field textarea { resize: vertical; min-height: 72px; }
.sw__field input:focus-visible, .sw__field select:focus-visible,
.sw__field textarea:focus-visible { border-color: var(--mark); outline: none; }
.sw__row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.sw__attach {
  display: block; border: 1.5px dashed var(--rule); border-radius: var(--r);
  padding: .65rem .7rem; text-align: center; font-size: .82rem; color: var(--graphite);
  cursor: pointer; margin-bottom: .85rem; transition: border-color .15s ease;
}
.sw__attach:hover { border-color: var(--mark); }
.sw__attach input { position: absolute; left: -9999px; }
.sw__thumbs {
  list-style: none; margin: 0 0 .85rem; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap;
}
.sw__thumbs[hidden] { display: none; }
.sw__thumbs li {
  width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule);
}
.sw__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sw__error {
  color: var(--alarm); font-size: .82rem; margin-bottom: .8rem; padding: .6rem .7rem;
  background: #FBEAE7; border-radius: var(--r);
}

.support-panel__foot { padding: 1rem 1.2rem; border-top: 1px solid var(--rule); flex: none; }
.support-panel__legal { font-size: .72rem; color: var(--quiet); margin: .6rem 0 0; text-align: center; }

.support-panel__success { text-align: center; padding: 1.5rem .5rem; }
.support-panel__success svg { width: 40px; height: 40px; color: var(--sorted); margin-bottom: .6rem; }
.support-panel__success h4 { font-family: var(--display); margin: 0 0 .4rem; color: var(--ink); }
.support-panel__success p { color: var(--graphite); font-size: var(--step--1); margin: 0; }

@media (max-width: 460px) {
  .support-panel { right: 12px; left: 12px; width: auto; max-width: none; bottom: 88px; }
  .support-fab { right: 16px; bottom: 16px; }
}