/* B&B Hauling — design tokens.
   Dark only. One accent: red. Red marks what can be tapped, nothing else. */

:root {
  /* ---- Color ---------------------------------------------------------- */
  --bg:        #0A0A0B;  /* near-black page */
  --surface:   #141417;  /* cards, FAQ rows, form fields */
  --line:      #26262B;  /* hairline borders */
  --text:      #FFFFFF;  /* headings and body */
  --text-dim:  #A3A3AB;  /* captions and labels ONLY — never body copy */

  /* SIGNAL RULE: --red is for tappable things only. Buttons, links, the
     slider handle, focus rings. Never headings, rules, icons, borders,
     section backgrounds, or decoration. If it is not tappable, it is not red. */
  --red:       #E0271C;
  --red-hover: #FF3B2F;

  /* ---- Radius --------------------------------------------------------- */
  /* Every photo on this site is rounded. No exceptions. */
  --r-photo: 16px;
  --r-btn:   10px;
  --r-card:  16px;

  /* ---- Type ----------------------------------------------------------- */
  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --h1:    clamp(2.75rem, 9vw, 6rem);
  --h2:    clamp(2rem, 5vw, 3.25rem);
  --h3:    1.5rem;
  --body:  1.125rem;  /* 18px floor — this is a phone-first site */
  --small: 0.9375rem;

  /* ---- Space ---------------------------------------------------------- */
  --gap:       1rem;
  --gutter:    1.25rem;                        /* page side padding on mobile */
  /* Was clamp(3.5rem, 9vw, 7rem). Cut ~a third at both ends — the ratio between
     the floor and the ceiling is kept, so the rhythm is the same, just tighter. */
  --section:   clamp(2.25rem, 6vw, 4.75rem);   /* vertical rhythm between sections */
  --maxw:      1200px;
  --maxw-wide: 1320px;                         /* the slider only — page centrepiece */
  --maxw-text: 68ch;                           /* readable measure for prose */

  /* ---- Motion --------------------------------------------------------- */
  --reveal-dur:  400ms;
  --reveal-rise: 16px;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --parallax:    0.85;  /* hero photo scroll rate; read by JS */
}

@media (max-width: 600px) {
  :root { --r-photo: 12px; }
}

/* Large screens get one step more width rather than wider empty margins. */
@media (min-width: 1440px) {
  :root { --maxw: 1360px; --maxw-wide: 1520px; }
}

/* Reduced motion: kill distance and duration at the token level so any
   effect built on these tokens is neutralised without touching its own code. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-dur:  0ms;
    --reveal-rise: 0px;
    --parallax:    0;
  }
}

/* ---- Base ------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; }

p { margin: 0 0 1em; max-width: var(--maxw-text); }

/* Links are tappable, so links are red. */
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-hover); }

/* Quiet link — for secondary actions that must not compete with call/text. */
a.quiet { color: var(--text); text-decoration-color: var(--line); }
a.quiet:hover { text-decoration-color: var(--text-dim); }

:focus-visible {
  outline: 3px solid var(--red-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Photos ----------------------------------------------------------- */
/* Single class every photo passes through, so a sharp corner cannot ship. */
.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--surface);  /* holds the shape before the image decodes */
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;            /* thumb-sized; this is a phone-first site */
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--red);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--red-hover); color: #FFFFFF; }

/* Secondary action: visually quiet, never red. */
.btn-quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-quiet:hover { background: var(--surface); color: var(--text); }

/* ---- Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section); }

/* ---- Scroll reveal ---------------------------------------------------- */
/* Content is visible by default. site.js adds .reveal-on to <html> only once
   it is running, then .is-in per element as it enters the viewport. If the
   script never loads or throws, nothing is ever hidden. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition: opacity var(--reveal-dur) var(--ease),
              transform var(--reveal-dur) var(--ease);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }

/* ---- Sticky mobile call/text bar -------------------------------------- */
.callbar { display: none; }

@media (max-width: 767px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    padding: 0.5rem var(--gutter);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); /* clear the iPhone home bar */
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  /* Keep the bar from covering the end of the page. */
  body { padding-bottom: 5.5rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}