/* Pack: Verge — the warm look.

   For the trades someone chooses rather than summons: landscapers, gardeners,
   cleaners, photographers, signwriters, framers. Where Ironbark is the page
   you land on at 11pm with a burst pipe, this is the page you land on while
   deciding who you would like in your garden. Warm paper, deep green, restrained
   radii, fine borders, and an editorial serif hero.

   Fraunces gives the warm look a quieter editorial voice, using an already
   self-hosted face. No new font asset or external dependency is needed.

   Loaded after site.css; see the note there about why every value is restated
   rather than diffed. */
:root {
  --ink: #1d2a22;
  --muted: #4f5f54;
  --line: #e2dccd;
  /* Off-white rather than white. The difference is barely nameable next to a
     photograph and completely obvious next to a browser's own white. */
  --paper: #fffdf8;
  --wash: #f2eee3;
  --accent: #2f6b46;
  --accent-deep: #225134;
  --accent-light: #86caa1;
  --on-accent: #ffffff;
  --band: #1d2a22;
  --on-band: #eef2ea;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --h1-size: 2.5rem;
  --h1-size-wide: 4rem;
  --h2-size: 2rem;
  --lead-size: 1.2rem;
  --display-weight: 400;
  --display-tracking: -.015em;
  /* Sentence case keeps the small label quiet beside the serif headline. */
  --kicker-transform: none;
  --kicker-tracking: .02em;

  --radius-card: 12px;
  --radius-cta: 999px;
  --radius-shot: 12px;
  --card-bg: var(--paper);
  /* Fine borders keep service groups clear without floating card shadows. */
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --card-pad: 2rem;

  --section-y: 4.5rem;
  --hero-y: 6rem;
  /* The wash behind the centred hero. A gradient rather than a flat fill, so
     the fold between hero and page is soft instead of a visible line. */
  --hero-bg: linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%);

  /* The header sits on the same warm paper as the hero wash below it, with no
     rule between them — the gradient is doing that job. */
  --header-bg: var(--paper);
  --header-ink: var(--ink);
  --header-border: 0;
}

/* The kicker is not shouting here, so it needs weight to stay a kicker rather
   than becoming a first line of body text. */
.kicker { font-size: .85rem; font-weight: 700; }

/* Pill CTAs want a little more horizontal room than square ones to look
   deliberate rather than squeezed. */
.cta { padding: .75rem 1.4rem; }
.cta.big { padding: 1rem 2.1rem; }

/* Static cards are information, not clickable controls. */
.card { transition: none; }

/* Photographs are the point for this group, so the placeholder tiles are given
   a warmer, less obviously-empty fill than the shared grey. */
.shot { background: linear-gradient(140deg, var(--wash) 0%, var(--line) 100%); }

/* Somebody on a phone in a garden centre has one hand free. Nothing here is
   allowed to animate for them. */
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transition: none; transform: none; }
}

/* Story-led, rather than Slate's brochure: a centred invitation, broad
   photograph, open service chapters and a generous quote at the end. */
.hero-verge { max-width: 75rem; padding-block: 3.5rem; }
.verge-intro { max-width: 48rem; margin: auto; text-align: center; }
.verge-intro .lead { margin-inline: auto; }
.verge-image { margin-top: 3rem; border-radius: 2rem; overflow: hidden; }
.verge-image img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.pack-verge .why-us { text-align: center; max-width: 64rem; }
.pack-verge .why-us .card { border: 0; padding: 1rem; }
.pack-verge .why-us .card-icon { border-radius: 50%; }
.pack-verge .services { background: var(--paper); }
.pack-verge .services > h2 { text-align: center; }
.pack-verge .services .cards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 60rem; }
.pack-verge .services .card {
  background: var(--wash); border: 0; border-radius: 2rem .5rem 2rem .5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.pack-verge :where(.services .card) h3 { font-size: 1.75rem; }
.pack-verge .services .card p { max-width: 34rem; }
.pack-verge .about { max-width: 58rem; }
.pack-verge .about > h2 { max-width: 22ch; }
.pack-verge .about-copy { min-width: 0; border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.pack-verge .gallery .cards { gap: 1.5rem; }
.pack-verge .gallery .shot { aspect-ratio: 1; border-radius: 2rem .5rem; }
.pack-verge .testimonials { max-width: 58rem; text-align: center; }
.pack-verge .testimonials .cards { grid-template-columns: minmax(0, 1fr); }
.pack-verge .testimonial { border: 0; padding: 2rem 0; }
.pack-verge .testimonial .quote { font: 400 clamp(1.4rem, 3vw, 2rem)/1.5 var(--font-display); color: var(--ink); }
.pack-verge .testimonial .quote::before { content: none; }
.pack-verge .contact { max-width: 58rem; border-top: 1px solid var(--line); }
.pack-verge :is(.area, .hours) { max-width: 58rem; padding-block: 1.75rem; }
.pack-verge .enquiry-form { max-width: none; }
@media (min-width: 800px) {
  .pack-verge .services .card { width: 85%; }
  .pack-verge .services .card:nth-child(even) { margin-left: auto; border-radius: .5rem 2rem .5rem 2rem; }
  .pack-verge .gallery .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pack-verge .gallery .shot:nth-child(even) { margin-top: 3rem; }
}
@media (max-width: 799px) {
  .pack-verge { --section-y: 2.5rem; }
  .hero-verge { padding-block: 2.5rem; }
  .verge-image { margin-top: 2rem; border-radius: 1.5rem; }
  .verge-image img { aspect-ratio: 4 / 3; }
}