/* ==========================================================================
   Scrapper Jeff

   ART DIRECTION: the page is built to look like the material it is about.
   Steel plate, stamped tags, hard rules, punched holes — but the whole plate
   is green, because the point of the job is that the metal gets recycled
   instead of buried. The greens sit at the warm, growing end rather than the
   cold teal end: forest floor for the plate, a living leaf green for the
   accent. (The owner is an Eagles fan and his son's school, Mainland, wears
   green too.) One colour carries the opposite meaning: iron oxide, for what
   he can't take.

   STILL DELIBERATELY NOT DONE, because it is what every generated local
   services page looks like:
     - no soft grey shadows under identical rounded cards — there is not one
       box-shadow in this file, and not one border-radius above 2px
     - no tracked-out uppercase eyebrow labels above headings
     - no scroll-triggered entrance animations
     - no stock photography

   MOBILE FIRST, and specifically 375px first — the small phone, not the
   comfortable 390 or 414. One breakpoint at 768px. Every contrast pair was
   measured before use; ratios are in the comments.
   ========================================================================== */

:root {
  /* ---- Materials ---- */
  --forest: #143d28;  /* forest floor — the plate */
  --moss: #7fa085;    /* lichen — rules and secondary type */
  --sage: #cfdfd0;    /* pale leaf, legible on the plate (8.75:1) */
  --paper: #f0f3ec;   /* the page surface, warm green cast */
  --leaf: #2c7349;    /* growing green — what he takes */
  --leaf-lt: #8fd0a0; /* same, legible on dark (6.77:1) */
  --rust: #8e3b1e;    /* iron oxide — what he can't */

  /* ---- Applied ---- */
  --ink: var(--forest);       /* 10.85:1 on --paper */
  --ink-soft: #4a5a4c;        /*  6.56:1 on --paper */
  --rule: #bccbbb;

  /* ---- Type scale ---- */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.3vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2.4vw, 3.25rem);

  --measure: 60ch;

  /* GRAIN. Fine fractal noise generated by the browser from an inline SVG
     filter — no image file, no request, a few hundred bytes. Laid over the
     dark blocks so they read as a material surface with tooth. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  /* Nothing on this page may cause a sideways scroll at 375px. */
  overflow-x: hidden;
}

/* Display face. Condensed, industrial, set tight. */
h1, h2, .badge, .btn, .logo-word, .slogan, .area-name, .footer-slogan {
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.94;
}

h1 { font-size: var(--step-3); margin: 0 0 0.75rem; }
h2 { font-size: var(--step-2); margin: 0 0 0.75rem; }
p { margin: 0 0 1rem; }
a { color: var(--leaf); }        /* 5.13:1 on --paper */
b { font-weight: 600; }

.wrap { width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100;
  display: inline-flex; align-items: center; min-height: 3rem;
  padding: 0.75rem 1rem;
  background: var(--leaf); color: #fff;
  font-weight: 600;
}

/* One focus treatment, everywhere, and it is not subtle. */
a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
.hero a:focus-visible,
.panel a:focus-visible,
.footer a:focus-visible { outline-color: var(--leaf-lt); }

/* ------------------------------------------------------------- logotype */

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin-bottom: 1rem;
  color: var(--moss);
  text-decoration: none;
}
.logo-tag { flex: none; }
.logo-word {
  font-size: 1.5rem;
  line-height: 0.92;
  color: var(--paper);
}

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

   56px tall, comfortably over the 48px floor, and full width on a phone so
   the target is the whole screen rather than a word. Square, because it is
   sheet metal.
   ------------------------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 0;
  font-size: 1.3125rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, background-color 0.12s ease;
}
.btn:active { transform: translateY(2px); }

.btn-call { background: var(--leaf); color: #fff; }        /* 5.75:1 */
.btn-call:hover { background: #23603c; }

/* On the dark plate the second button is a solid light slab — the highest
   contrast pairing available here (10.85:1), so "Text" never reads as the
   lesser option. Half the people who want this will not phone a stranger. */
.btn-text { background: var(--paper); color: var(--forest); }
.btn-text:hover { background: #fff; }

/* The same button on a light section has to invert to stay that legible. */
.btn-text-alt { background: var(--forest); color: var(--paper); }
.btn-text-alt:hover { background: #0e2e1e; }

/* ==========================================================================
   THE FOLD
   ==========================================================================
   min-height:100svh is doing real work: it guarantees the next section
   cannot peek in and claim space above the fold. svh rather than vh so the
   mobile browser's collapsing address bar does not clip the buttons on load.
   Content is centred vertically, and the scroll cue is pushed to the floor
   by margin-top:auto.
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1.5rem 0 1rem;
  background-color: var(--forest);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--paper);
}

.hero h1 { color: var(--paper); }
/* The county drops to lichen — a hierarchy move, not a colour accent. 4.21:1,
   and it is 32px+ display type, where AA-large asks 3:1. */
.h1-region { color: var(--moss); }

/* A stamped tag, not a pill: square, ruled, sitting on the plate. */
.badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--leaf-lt);
  color: var(--leaf-lt);          /* 6.77:1 */
  font-size: 1rem;
  letter-spacing: 0.08em;
}

/* Jeff's own words, and the best line on the site. Set at reading size, not
   display size — it works because it sounds like a person, not a slogan. */
.hero-free {
  max-width: 34ch;
  margin: 0 0 1.5rem;
  color: var(--sage);             /* 8.75:1 */
  font-size: var(--step-1);
  line-height: 1.4;
}

.hero-actions { display: flex; flex-direction: column; gap: 0.75rem; }

.scroll-cue {
  margin: 1.5rem 0 0;
  padding: 0 1.25rem;
  color: var(--moss);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A narrow band of hard diagonal bars — the marking used on a loaded
   trailer, so the green reads as structure rather than decoration. */
.stripe {
  height: 0.75rem;
  background-image: repeating-linear-gradient(
    45deg, var(--leaf) 0 12px, var(--forest) 12px 24px
  );
}

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

.section { padding: 2.5rem 0; }
.section-alt { background: #e4ebdf; }
.section h2 { padding-bottom: 0.5rem; border-bottom: 3px solid var(--forest); }
.h2-no { margin-top: 2.5rem; }

/* ----------------------------------------------------------- image slots

   Four across even at 375px — they are marks, not pictures, and a 2x2 grid
   of icons starts to look like an app menu. When real photos land they
   become a 2x2 of 4:3 images instead; see IMAGES.md.
   ------------------------------------------------------------------------ */

.shots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.shots li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.shots svg {
  width: 100%;
  max-width: 3.25rem;
  height: auto;
  fill: none;
  stroke: var(--leaf);
  stroke-width: 2.5;
  stroke-linejoin: miter;
}
.shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--forest);
}
.shots span {
  font-size: var(--step--1);
  line-height: 1.2;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ lists

   Six lines and five lines. Ruled rows, no bullets and no icons: the two
   headings say "What I take" and "What I can't take" outright, so nothing
   here depends on colour or on a glyph to be understood.
   ------------------------------------------------------------------------ */

.list { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.35;
}
.list b { font-weight: 600; }

/* Struck through, and dimmed. No red cross icon — the line is the mark. */
.list-no li { color: var(--ink-soft); }
.list-no b {
  color: var(--rust);             /* 6.71:1 on --paper */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.ask { margin: 1.25rem 0 1.5rem; font-weight: 600; }

.actions { display: flex; flex-direction: column; gap: 0.75rem; }

/* ------------------------------------------------------------- creed

   The environmental line, promoted to the top of the page at the client's
   request. It is no longer a green band — on the plate, a green band would
   be green on green — so it is marked instead by the same hard rule the
   slogan always carried, holding two lines: the line itself and one sentence
   of reasoning. That is the entire environmental section now.
   ------------------------------------------------------------------------ */

.creed-top {
  margin: 0 0 1.25rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 5px solid var(--leaf-lt);
  max-width: 36ch;
}
.slogan {
  margin: 0 0 0.25rem;
  color: var(--leaf-lt);          /* 6.77:1 on the plate */
  font-size: var(--step-2);
}
.creed-top p:last-child {
  margin: 0;
  color: var(--sage);             /* 8.75:1 */
  font-size: var(--step--1);
  line-height: 1.4;
}

/* ------------------------------------------------------------ area, panel */

.area-name { font-size: var(--step-2); margin: 1.25rem 0 0.5rem; }
.area-towns { max-width: var(--measure); }
.section-alt p:last-child { margin-bottom: 0; color: var(--ink-soft); }

.panel {
  background-color: var(--forest);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--sage);
  padding: 1.5rem 1.25rem;
  border-left: 6px solid var(--leaf);
}
.panel h2 { color: var(--paper); border-bottom-color: var(--moss); }
.panel p { max-width: var(--measure); }

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

.footer {
  background-color: var(--forest);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--sage);
  padding: 2rem 0;
}
.footer a { color: var(--leaf-lt); }
.footer p { margin-bottom: 0.375rem; }
.footer-phone a {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: var(--step-1);
  font-weight: 600;
}
.footer-slogan { color: var(--leaf-lt); font-size: var(--step-1); margin-top: 0.5rem; }
.footer-area { margin: 0.75rem 0 0; font-size: var(--step--1); }

/* ===================================================================
   768px and up
   =================================================================== */
@media (min-width: 768px) {
  .hero { padding: 3rem 0 1.5rem; }
  .section { padding: 4rem 0; }

  /* Buttons stop being full-width slabs once there is a mouse. */
  .hero-actions, .actions { flex-direction: row; flex-wrap: wrap; }
  .btn { width: auto; min-width: 17rem; }

  .shots { gap: 1.5rem; }
  .shots svg { max-width: 4.5rem; }

  /* Two columns of list, side by side, once there is room for them. */
  .h2-no { margin-top: 3rem; }

  .panel { padding: 2rem; }
}

/* Anyone who asked their OS for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}