/* ==========================================================================
   Bloom Occupational Therapy and Consulting
   Precompiled utility stylesheet (Tailwind class naming, no runtime).
   Only the utilities actually used by the site are included.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ----------
   Poppins 400 / 500 / 700 / 700 italic. `swap` renders fallback text
   immediately and swaps when the file lands, so text is never invisible. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
/* The only italic file supplied is 700. Exposing it under its own family name
   stops CSS font-matching from handing *every* italic to it (which would render
   the light italics bold too). Apply `.font-bold-italic` where the design calls
   for bold italic — the testimonial names, the land acknowledgement. Ordinary
   `.italic` text still synthesises an oblique from the correct upright weight.
   Adding a real poppins-400-italic.woff2 would let this be simplified. */
@font-face {
  font-family: 'Poppins Bold Italic';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-italic.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  --ink: #171802;              /* dark surfaces, header/mobile nav text, shadows, waves */
  --text: #283008;            /* body & heading text on light backgrounds (the logo's dark green) */
  /* Muted text tints, derived from --text; kept at/above WCAG AA (4.5:1). */
  --ink-70: rgba(40, 48, 8, 0.74);
  --ink-55: rgba(40, 48, 8, 0.72);
  --green: #728a4b;
  --green-dark: #5d7240;
  --cream: #e0e9a4;
  --cream-soft: #eef2cd;
  --accent: #e3de83;
  --accent-dark: #d5cf6a;
  --card: #f0ead6;            /* light beige fill for cards/boxes (softer than white) */
  --white: #ffffff;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(23, 24, 2, 0.06);
  --shadow: 0 6px 20px -8px rgba(23, 24, 2, 0.18);
  --shadow-lg: 0 18px 45px -18px rgba(23, 24, 2, 0.32);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Layout ---------- */
.container { width: 100%; margin-inline: auto; padding-inline: 1.25rem; max-width: 1200px; }
.container-narrow { width: 100%; margin-inline: auto; padding-inline: 1.25rem; max-width: 820px; }
@media (min-width: 768px) { .container, .container-narrow { padding-inline: 2rem; } }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky  { position: sticky; }
.inset-0 { inset: 0; }
.top-0   { top: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid/flex children must be allowed to shrink below their intrinsic size,
   otherwise wide images blow out their track. */
.grid > *, .flex > * { min-width: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-14 { gap: 3.5rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-xs  { max-width: 20rem; }
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-inline: auto; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-14 { margin-bottom: 3.5rem; }

.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-5 { padding-inline: 1.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-3 { padding-block: 0.75rem; }
.pt-8 { padding-top: 2rem; }
.pb-8 { padding-bottom: 2rem; }

.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }
.object-top { object-position: top; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* ---------- Typography ---------- */
.text-xs   { font-size: 0.78rem;  line-height: 1.5; }
.text-sm   { font-size: 0.9rem;   line-height: 1.6; }
.text-base { font-size: 1rem;     line-height: 1.7; }
.text-lg   { font-size: 1.1rem;   line-height: 1.7; }
.text-xl   { font-size: 1.25rem;  line-height: 1.55; }
.text-2xl  { font-size: 1.5rem;   line-height: 1.35; }
.text-3xl  { font-size: 1.85rem;  line-height: 1.25; }
.text-4xl  { font-size: 2.25rem;  line-height: 1.15; }
.text-5xl  { font-size: 2.9rem;   line-height: 1.08; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-bold     { font-weight: 700; }

.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.font-bold-italic {
  font-family: 'Poppins Bold Italic', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
}
.tracking-wide  { letter-spacing: 0.06em; }
.tracking-wider { letter-spacing: 0.12em; }
.leading-relaxed { line-height: 1.75; }
.text-center { text-align: center; }

.text-ink     { color: var(--text); }
.text-muted   { color: var(--ink-70); }
.text-subtle  { color: var(--ink-55); }

/* The green surface is dark enough that any tint of ink drops below AA,
   so muted/subtle text resolves to full ink there. */
.bg-green .text-muted,  .site-footer .text-muted,
.bg-green .text-subtle, .site-footer .text-subtle { color: var(--ink); }
.text-white   { color: var(--white); }
.text-green   { color: var(--green); }
.text-cream   { color: var(--cream); }

.bg-white  { background-color: var(--card); }  /* repurposed: soft card fill, not pure white */
.bg-cream  { background-color: var(--cream); }
.bg-soft   { background-color: var(--cream-soft); }
.bg-green  { background-color: var(--green); }
.bg-accent { background-color: var(--accent); }
.bg-ink    { background-color: var(--ink); }

.rounded-lg   { border-radius: 12px; }
.rounded-xl   { border-radius: var(--radius); }
.rounded-2xl  { border-radius: 26px; }
.rounded-full { border-radius: 9999px; }
/* Portrait shape from the original: a large uniform radius that the browser
   clamps to half the width, giving a stadium-oval with slightly straight sides
   rather than a true ellipse. */
.rounded-oval { border-radius: 200px; }

.shadow    { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.border-t  { border-top: 1px solid rgba(23, 24, 2, 0.12); }
.border-accent { border: 2px solid var(--accent); }

.transition { transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease; }

/* ---------- Components ---------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 300px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
/* Primary CTA — the logo's dark green with cream text. On dark/green surfaces
   (footer, mobile nav) it flips to the accent so it stays visible; see overrides. */
.btn-primary { background-color: var(--text); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background-color: #1b2405; transform: translateY(-2px); box-shadow: var(--shadow); }
.site-footer .btn-primary, .mobile-nav .btn-primary { background-color: var(--accent); color: var(--text); }
.site-footer .btn-primary:hover, .mobile-nav .btn-primary:hover { background-color: var(--accent-dark); }
.btn-outline { border: 2px solid var(--text); color: var(--text); }
.btn-outline:hover { background-color: var(--text); color: var(--cream); }
.btn-light { background-color: var(--card); color: var(--text); }
.btn-light:hover { background-color: var(--accent); }
.btn:active { transform: translateY(0); }

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 300px;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--green);
  box-shadow: 0 1px 0 rgba(23, 24, 2, 0.1);
}
/* The header spans the full viewport — no 1200px cap — so the nav has room to
   sit on a single line on wide screens instead of wrapping early. */
.header-inner {
  width: 100%;
  max-width: none;
  padding-inline: 1.25rem;
}
@media (min-width: 768px)  { .header-inner { padding-inline: 2rem; } }
@media (min-width: 1600px) { .header-inner { padding-inline: 3rem; } }

.site-header .logo img { width: min(340px, 62vw); }
@media (min-width: 1024px) { .site-header .logo img { width: 380px; } }
@media (min-width: 1600px) { .site-header .logo img { width: 430px; } }

/* Nav sits on one line once there's room; below that it wraps gracefully. */
.site-header nav { flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 1500px) {
  .site-header nav { flex-wrap: nowrap; }
  .nav-link { white-space: nowrap; }
}

.nav-link {
  position: relative;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.35rem 0;
  transition: opacity .2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { font-weight: 500; }

/* Mobile nav */
.nav-toggle { display: inline-flex; padding: 0.5rem; border-radius: 8px; }
.nav-toggle span {
  display: block; width: 26px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background-color: var(--green);
  border-top: 1px solid rgba(23, 24, 2, 0.12);
  padding: 0.5rem 0 1.5rem;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 0.8rem 0;
  font-size: 1.05rem;
  color: var(--ink);              /* on the green panel — keep the darker ink for contrast */
  border-bottom: 1px solid rgba(23, 24, 2, 0.1);
}
.mobile-nav a[aria-current="page"] { font-weight: 700; }

/* Sections */
.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 5.5rem; } }
.section-sm { padding-block: 3rem; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}

/* Cards */
.card {
  background-color: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
/* Keep the call-to-action pinned to the bottom so buttons line up across a row. */
.card-body > .btn:last-child { margin-top: auto; }
.card-body > :nth-last-child(2) { margin-bottom: 1.5rem; }

/* Fixed-ratio media boxes.
   The child is absolutely positioned: a percentage height on a normal-flow
   child cannot resolve against an aspect-ratio-derived parent height, so the
   box would otherwise collapse to the image's own proportions. */
.card-media,
.video-frame,
.hero-media {
  position: relative;
  overflow: hidden;
}
.card-media > img,
.video-frame > iframe,
.hero-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-media { aspect-ratio: 4 / 3; }
.video-frame { aspect-ratio: 16 / 9; }

/* Workshop flyers — event posters shown whole (never cropped), each matted on a
   beige "frame", in a tidy centred two-column masonry. */
.flyer-masonry { column-gap: 1.75rem; max-width: 900px; margin-inline: auto; }
@media (min-width: 640px) { .flyer-masonry { column-count: 2; } }
.flyer {
  break-inside: avoid;
  margin-bottom: 1.75rem;
  border-radius: var(--radius);
  background-color: var(--card);
  box-shadow: var(--shadow);
  padding: 0.85rem;
  transition: box-shadow .25s ease;
}
.flyer:hover { box-shadow: var(--shadow-lg); }
.flyer img { width: 100%; height: auto; display: block; border-radius: 10px; }
/* No transforms on anything inside the multi-column masonry: a transform in a
   `column-count` container leaves stray repaint artifacts (ghost shadow bands).
   So the flyers fade in without the usual slide-up, and don't lift on hover. */
.js .flyer.reveal { transform: none; }

/* Full-bleed banner hero: image with the title overlaid */
.banner-hero { position: relative; overflow: hidden; height: 320px; }
.banner-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,24,2,.10) 0%, rgba(23,24,2,.20) 45%, rgba(23,24,2,.50) 100%); }
.banner-hero-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; }
.banner-title { color: var(--cream); text-shadow: 0 2px 16px rgba(23,24,2,.6); }
@media (min-width: 768px)  { .banner-hero { height: 420px; } }
@media (min-width: 1200px) { .banner-hero { height: 500px; } }

/* Full-bleed closing banner: image edge-to-edge with the text overlaid (right side) */
.closing-banner { position: relative; overflow: hidden; background-color: var(--ink); }
.closing-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
.closing-banner::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(23,24,2,.12) 0%, rgba(23,24,2,.20) 45%, rgba(23,24,2,.60) 100%); }
.closing-banner-inner { position: relative; z-index: 1; padding-block: 3.5rem; }
.closing-banner-text { max-width: 40rem; margin-left: auto; text-align: center; }
/* Green wave rising straight out of the image, so the photo meets the green with
   no dark gap between them. */
.closing-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; z-index: 2; display: block; }
.closing-wave path { fill: var(--green); }
@media (min-width: 768px) { .closing-banner-inner { padding-block: 5rem; } .closing-wave { height: 84px; } }
@media (max-width: 767px) {
  .closing-banner::after { background: rgba(23,24,2,.55); }
  .closing-banner-text { margin-inline: auto; }
}

/* Offering cards, stacked full-width down the page — no horizontal scrolling,
   so every workshop is reachable by scrolling alone. */
.offering-list { display: flex; flex-direction: column; gap: 2.5rem; }
.offering-list > article { width: 100%; }

/* Card image. On small screens it sits across the top of the card. */
.offering-banner { height: 200px; overflow: hidden; background: var(--cream-soft); }
.offering-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.offering-banner.is-top img { object-position: top; }
.offering-banner.is-contain img { object-fit: contain; }

/* From md up the card goes side-by-side: image column on the left, copy on the
   right.

   The image column stretches to the full height of the card, so its height is
   set by however much copy sits beside it. */
@media (min-width: 768px) {
  .offering-list > article {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .offering-list > article > .offering-banner { height: 100%; min-height: 22rem; }

  /* A `contain` graphic can't fill a very tall column — beside a long card it
     would sit small in a big empty band. Top-align it at a set ratio instead,
     and let the card's own colour show through so the column reads as one
     surface rather than a separate block. */
  .offering-list > article > .offering-banner.is-contain {
    align-self: start;
    height: auto;
    aspect-ratio: 4 / 3;
    background: transparent;
  }
}

/* Split hero: fixed ratio on small screens, fills the grid row from md up. */
.hero-media { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .hero-media { aspect-ratio: auto; height: 100%; min-height: 560px; }
}

/* Checklist */
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
  color: var(--ink-70);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--green);
}

/* Prose blocks */
.prose > * + * { margin-top: 1.15rem; }
.prose p { color: var(--ink-70); }
.prose h2 { font-size: 1.85rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.3rem; margin-top: 2rem; }
.prose strong { font-weight: 700; color: var(--ink); }

/* Price rows */
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(23, 24, 2, 0.12);
}
.price-row:last-child { border-bottom: 0; }
.price-row .amount { font-size: 1.5rem; font-weight: 500; white-space: nowrap; }

/* Plain stacked quotes — no cards, no columns, left aligned. */
.quote-list p { max-width: 88ch; }
.quote-list p + p { margin-top: 1.25rem; }

/* ---------- Testimonials (flat on the page, no cards) ---------- */
.testimonial + .testimonial { margin-top: 4.5rem; }
.testimonial h3 {
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}
.testimonial p { color: var(--ink); }
.testimonial p + p { margin-top: 1.1rem; }
/* Alternating indent, as on the original */
@media (min-width: 900px) {
  /* nth-of-type, not nth-child: the section's <h2> would otherwise shift the
     parity and flip which testimonials are indented. */
  .testimonial { max-width: 78ch; }
  .testimonial:nth-of-type(even) { margin-left: auto; margin-right: 0; }
}

/* Green ribbon: a green band that bridges a dark section into the dark footer.
   The wave at its top is filled ink so the dark section appears to dip into the
   green; the footer's own wave then carries the green down into the footer. */
/* Plain green band that carries the green from the closing wave down to the footer. */
.green-ribbon { background-color: var(--green); height: 70px; }
@media (min-width: 768px) { .green-ribbon { height: 90px; } }

/* ---------- Footer ---------- */
.footer-wave { display: block; width: 100%; height: 90px; }
@media (min-width: 768px) { .footer-wave { height: 130px; } }
.footer-wave path { fill: var(--ink); }

/* Floating back-to-top button (bottom-right). Hidden until the page is scrolled. */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  width: 48px; height: 48px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--text); color: var(--cream);
  box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background-color: #1b2405; }
.to-top svg { width: 22px; height: 22px; }
@media (min-width: 768px) { .to-top { right: 1.75rem; bottom: 1.75rem; width: 52px; height: 52px; } }

.site-footer { background-color: var(--ink); padding-block: 1rem 3.5rem; color: var(--cream); }
.site-footer a { color: var(--cream); }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 { color: var(--cream); font-weight: 400; }
.site-footer .btn-primary,
.site-footer .btn-primary:hover { color: var(--text); }
.site-footer .btn { padding-inline: 1.35rem; font-size: 0.95rem; }

/* Boxed service note */
.service-note {
  background-color: var(--cream);
  border: 6px solid var(--accent);
  padding: 1.15rem 1.35rem;
  text-align: center;
  color: #ef5f5f;
  font-weight: 700;
  max-width: 340px;
}

.footer-logo { width: 100%; max-width: 286px; }

/* Contact column carries the most content, so it gets the widest track. */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-left: -0.5rem;          /* keep the icon visually flush despite the larger hit area */
  border-radius: 9999px;
  transition: color .2s ease, background-color .2s ease;
}
.social-link:hover { color: var(--accent); background-color: rgba(224, 233, 164, 0.12); }
/* flex: none + explicit size stops the icon collapsing to 0 width inside the
   shrink-to-fit inline-flex link (the global svg `max-width:100%` would otherwise
   resolve against the link's own content-derived width and zero it out). */
.social-link svg { width: 28px; height: 28px; flex: none; max-width: none; }

/* Scroll reveal.
   Scoped to .js so content is never hidden when JavaScript is unavailable. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive utilities ---------- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-left { text-align: left; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 1.15; }
}
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-lg { font-size: 1.1rem; line-height: 1.7; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 1.35; }
  .md\:text-3xl { font-size: 1.85rem; line-height: 1.25; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 1.15; }
  .md\:text-5xl { font-size: 2.9rem; line-height: 1.08; }
  .md\:text-6xl { font-size: 3.6rem; line-height: 1.03; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:aspect-auto { aspect-ratio: auto; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-6xl { font-size: 3.6rem; line-height: 1.03; }
  .lg\:text-7xl { font-size: 4.4rem; line-height: 1; }
  .lg\:py-28 { padding-block: 7rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}