/* Atrium: complete palette, compatible with every named colour override. */
:root {
  --ink: #29362e;
  --muted: #546258;
  --line: #dedfd3;
  --paper: #fafbf5;
  --wash: #edf0e5;
  --accent: #476344;
  --accent-deep: #314730;
  --accent-light: #bdd0a6;
  --on-accent: #ffffff;
  --band: #233329;
  --on-band: #f4f7eb;
  --font: "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -.035em;
  --h1-size: 2.8rem;
  --h1-size-wide: 4rem;
  --h2-size: 2.1rem;
  --radius-card: 24px;
  --radius-shot: 24px;
  --radius-cta: 100px;
  --card-border: 0;
  --card-pad: 1.75rem;
  --section-y: 4rem;
  --hero-y: 3.5rem;
  --header-bg: var(--paper);
  --header-ink: var(--ink);
  --header-border: 1px solid var(--line);
}
.hero-atrium { display: grid; align-items: center; gap: 3rem; }
.atrium-image { min-width: 0; width: 100%; max-width: 27rem; margin: auto; overflow: hidden; border-radius: 50% 50% 1rem 1rem; background: var(--wash); }
.atrium-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.atrium-copy { min-width: 0; text-align: center; }
.atrium-copy .lead { margin-inline: auto; }
.hero-atrium h1 { line-height: 1.08; }
.pack-atrium .services .card { background: var(--paper); }
.pack-atrium .about { text-align: center; }
.pack-atrium .about p { margin-inline: auto; }
.pack-atrium .cards > * { min-width: 0; }
@media (min-width: 800px) {
  .hero-atrium.hero-with-image { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5rem; }
  .hero-atrium:not(.hero-with-image) { max-width: 55rem; }
}
@media (max-width: 799px) {
  .pack-atrium { --section-y: 2.5rem; --hero-y: 2rem; }
  .atrium-copy { grid-row: 1; }
  .atrium-image { max-width: 20rem; }
}

/* Boutique, portrait-led composition: open, centred service offerings,
   framed photographs and a quiet, narrow reading/booking column. */
.pack-atrium .why-us { max-width: 58rem; text-align: center; }
/* display: grid stated, not inherited: site.css turns .why-us .cards into a
   wrapped flex row above phone width, which left grid-template-columns
   doing nothing and Atrium's centred list of claims flowing sideways (caught
   by tests/browser/templates.py's Atrium check, 23 September 2026). */
.pack-atrium .why-us .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pack-atrium .why-us .card { padding: 1.25rem 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.pack-atrium .why-us .card-icon { display: none; }
.pack-atrium .services { background: var(--paper); }
.pack-atrium .services > h2 { text-align: center; }
.pack-atrium .services .cards { gap: 2.5rem; }
.pack-atrium .services .card { border: 0; border-radius: 0; border-top: 1px solid var(--accent); padding: 2rem .5rem; text-align: center; }
.pack-atrium :where(.services .card) h3 { font-size: 1.5rem; }
.pack-atrium .about { max-width: 50rem; }
.pack-atrium .about-copy { padding-top: 1rem; }
.pack-atrium .gallery { background: var(--paper); }
.pack-atrium .gallery .cards { max-width: 62rem; gap: 2rem; }
.pack-atrium .gallery .shot { border-radius: 50% 50% .75rem .75rem; aspect-ratio: 4 / 5; }
.pack-atrium .gallery > h2, .pack-atrium .gallery > .placeholder { text-align: center; }
.pack-atrium .testimonials { max-width: 50rem; text-align: center; }
.pack-atrium .testimonials .cards { grid-template-columns: minmax(0, 1fr); }
.pack-atrium .testimonial { background: var(--wash); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 3rem; }
.pack-atrium .testimonial .quote { font: 400 1.5rem/1.5 var(--font-display); color: var(--ink); }
.pack-atrium .testimonial .quote::before { content: none; }
.pack-atrium .contact { max-width: 44rem; }
.pack-atrium :is(.area, .hours) { max-width: 44rem; text-align: center; padding-block: 1.75rem; }
.pack-atrium .contact > h2 { text-align: center; }
.pack-atrium .enquiry-form { max-width: none; }
.pack-atrium .enquiry-form .cta { border-radius: 100px; }
@media (min-width: 800px) {
  .pack-atrium .gallery .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-atrium .gallery .shot:nth-child(odd):last-child { grid-column: 1 / -1; max-width: 28rem; width: 100%; justify-self: center; }
}

/* Atrium's hero photograph is domed — `border-radius: 50% 50% 1rem 1rem` with
   the overflow clipped — so its top-right corner is not inside the picture at
   any inset, and a pencil pinned there is sliced by the curve. The bottom
   corners are a 1rem radius, which clears the chip, so this is the one pack
   where the banner control sits at the bottom of the photo instead of the top.
   Squarer packs keep the top-right corner the rest of the page uses. */
.atrium-image > .edit-pencil { top: auto; bottom: .9rem; right: .9rem; }

/* Atrium's services already carry their accent as a rule across the top of a
   centred card (see .pack-atrium .services .card above). The shared left-hand
   bar would add a second accent edge at right angles to that one, which reads
   as an L-bracket round centred text rather than as structure. This pack
   keeps its own. */
.pack-atrium .services .card-accent { padding-left: 2rem; }
.pack-atrium .services .card-accent::before { content: none; }