/* Pack: Slate — the professional look.

   For the businesses someone retains rather than summons: brokers,
   accountants, conveyancers. The whole identity is restraint. Serif headings
   over a sans body, a cool grey-blue, flat bordered cards and no shadows
   anywhere — the visual language of a letterhead, which is what this group's
   customers are used to reading a promise on.

   Loaded after site.css, which defines every property below and defaults them
   to these values. The duplication is deliberate: site.css must render a
   complete site on its own if a pack ever fails to load, and this file must
   read as one whole design rather than as a diff against another one.

   Replaces theme-slate.css, which was this palette and nothing else. Pages
   written before the rename still link the old name; packs.RETIRED_STYLESHEETS
   keeps it resolving here. */
:root {
  --ink: #16181d;
  --muted: #5b6472;
  --line: #e3e6ea;
  --paper: #ffffff;
  --wash: #f6f8fa;
  --accent: #14539a;
  --accent-deep: #0e3d73;
  --accent-light: #7db3ea;
  --on-accent: #ffffff;
  --band: #16181d;
  --on-band: #f2f4f7;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Fraunces is the self-hosted display face (site.css @font-face); the rest
     is the fallback if it never loads — ui-serif so Apple platforms get New
     York, Iowan and Charter ship widely, Georgia is the floor. */
  --font-display: "Fraunces", ui-serif, "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --h1-size: 2.75rem;
  --h1-size-wide: 4rem;
  --h2-size: 2rem;
  --lead-size: 1.15rem;
  --display-weight: 600;
  --display-tracking: -.01em;

  --radius-card: 6px;
  --radius-cta: 8px;
  --radius-shot: 10px;
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --card-pad: 2rem;

  --section-y: 4.5rem;
  --hero-y: 6rem;
  /* Full-bleed now (see sections/hero.html) rather than a plain paper hero
     with nothing to mark it as a banner — a bare transparent fill would
     make the change invisible. Wash to paper, the same soft fold Verge
     already uses, just in Slate's own cool grey rather than warm paper. */
  --hero-bg: linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%);

  /* A light header that reads as stationery rather than as signage. */
  --header-bg: var(--paper);
  --header-ink: var(--ink);
  --header-border: 1px solid var(--line);
}

/* The one place the serif earns its keep: a business name set large enough to
   show the shapes. */
.hero h1 { line-height: 1.1; }

/* Flat cards need their edges to do the work the shadows are not doing. */
.card { transition: border-color .15s ease; }
.card:hover { border-color: var(--accent); }

/* Restrained stationery details, with a clear separation of text and imagery. */
.hero .kicker { margin-bottom: 1.5rem; }
.card-icon { background: transparent; width: 2rem; justify-content: flex-start; }
.why-us-card .card-icon { justify-content: center; }

/* Brochure composition: headings in a quiet left rail, information on the
   right. No visual reordering; the heading still precedes its content. */
.pack-slate { --measure: 62rem; --section-y: 3.5rem; }
.pack-slate .services { background: var(--paper); }
.pack-slate .services .cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* Was a two-column grid, the first column a 2rem gutter holding the icon
   tile. The tile is gone (see sections/services.html), so the grid is gone
   with it — a 2rem column with nothing in it squeezed the service name into
   four characters a line. Hairline rows, and the accent bar supplies the
   left-hand structure the icon column used to. */
.pack-slate .services .card {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 1.5rem 0 1.5rem 1.25rem;
}
.pack-slate .services .card p { margin: .35rem 0 0; max-width: 38rem; }
.pack-slate .why-us .cards { gap: 0 2rem; }
.pack-slate .why-us .card {
  display: flex; align-items: flex-start; gap: .75rem; text-align: left;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.25rem 0;
}
.pack-slate .why-us .card-icon { flex: 0 0 1.5rem; height: 1.5rem; margin: 0; }
.pack-slate .testimonials .cards { grid-template-columns: minmax(0, 1fr); }
.pack-slate .testimonial { border: 0; border-left: 3px solid var(--accent); border-radius: 0; }
.pack-slate .testimonial .quote::before { content: none; }
.pack-slate .gallery .cards { gap: .75rem; }
.pack-slate .gallery .shot { aspect-ratio: 3 / 2; border-radius: 0; }
.pack-slate .about-copy { min-width: 0; }
.pack-slate :is(.area, .hours) { padding-block: 1.75rem; }
@media (min-width: 900px) {
  .pack-slate :is(.services, .about:has(.about-copy), .testimonials) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0 3rem; max-width: var(--measure);
  }
  .pack-slate :is(.services, .about, .testimonials) > h2 { margin: 0; }
  .pack-slate :is(.services, .about, .testimonials) > :not(h2, .edit-pencil) {
    grid-column: 2; min-width: 0; width: 100%; margin-top: 0;
  }
  /* .contact is deliberately absent from the selectors above. Its heading is
     three words and its form is the tallest thing on the page, so a column
     beside the form stayed empty for that whole height — the hole the shared
     rule in site.css now avoids by putting the heading on top and giving the
     form its own two columns. The other sections here keep the treatment:
     their content is tall enough to sit beside a heading without leaving
     one. */
}
@media (max-width: 799px) {
  .pack-slate { --section-y: 2.5rem; }
}