/* ==========================================================================
   Woody Creek Kids — static site stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bubbler+One&display=swap');

:root {
  /* Live-site palette */
  --brown:        #4F3218;
  --brown-d:      #2e1c0c;
  --sage:         #c3c6a8;     /* primary section bg     */
  --sage-light:   #d4d6bc;     /* lighter sage variant   */
  --sage-d:       #aab08a;
  --tan:          #c1b2a2;     /* secondary section bg   */
  --tan-d:        #a6957e;
  --peach:        #FDC581;     /* halo color             */
  --rose:         #9e4348;     /* cover-text fill        */
  --burgundy:     #661B1F;
  --burgundy-h:   #A3292B;     /* nav + body link hover  */
  --link-blue:    #005a8e;     /* Facebook icon, etc.    */
  --cream:        #f4eedb;
  --white:        #ffffff;
  --maxw:         1280px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Bubbler One', cursive;
  font-size: 1.25em;                /* ≈ 20px — matches the live site */
  line-height: 1.6;
  color: var(--brown);
  background: var(--sage);
  letter-spacing: .25px;
  -webkit-text-stroke: 0.6px var(--brown);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--burgundy); text-decoration: none; -webkit-text-stroke: 0.8px var(--burgundy); }
a:hover, a:focus { color: var(--burgundy-h); -webkit-text-stroke-color: var(--burgundy-h); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bubbler One', cursive;
  font-weight: 400;
  color: var(--brown);
  line-height: 1.15;
  letter-spacing: .5px;
  margin: 0 0 .5em;
  -webkit-text-stroke-width: 0.9px;
  -webkit-text-stroke-color: var(--brown);
}
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); -webkit-text-stroke-width: 1.1px; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); -webkit-text-stroke-width: 1px; letter-spacing: 1px; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); -webkit-text-stroke-width: 0.9px; }
h4 { font-size: 1.25rem; -webkit-text-stroke-width: 0.7px; }

p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brown); color: var(--white);
  padding: .5rem 1rem; z-index: 1000; border-radius: 0 0 6px 6px;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   HERO + cloud header
   ========================================================================== */
.site-hero {
  position: relative;
  background-color: var(--tan);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  min-height: var(--hero-h, 750px);
  overflow: hidden;
}
.site-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.15));
  pointer-events: none;
  z-index: 1;
}

.cloud-left {
  position: absolute;
  top: 0; left: 0;
  width: 46vw;
  height: 18vw;
  background: url("../images/clouds/cloud-left.svg") no-repeat left top;
  background-size: 100% auto;
  background-position-y: -2vw;
  z-index: 3;
  pointer-events: none;
}
.cloud-right {
  position: absolute;
  top: 0; right: 0;
  width: 75vw;
  height: 10vw;
  background: url("../images/clouds/cloud-right.svg") no-repeat right top;
  background-size: 100% auto;
  z-index: 4;
  pointer-events: none;
}
.hero-logos {
  position: absolute;
  top: 2vw;
  left: 2vw;
  width: 18vw;
  z-index: 5;
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.hero-logos a {
  flex: 0 0 50%;
  display: block;
  transition: transform .2s ease;
}
.hero-logos a:hover, .hero-logos a:focus { transform: translateY(-3px); }
.hero-logos img { width: 100%; height: auto; display: block; }

/* PRIMARY NAV */
.site-nav {
  position: absolute;
  top: 0; right: 0;
  padding: 2.2vw 5vw 0 0;
  z-index: 6;
}
.site-nav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  gap: 1.5vw;
}
.site-nav__list a {
  font-family: 'Bubbler One', cursive;
  font-size: 1.5vw;
  letter-spacing: .5px;
  -webkit-text-stroke: 1.5px var(--brown);
  color: var(--brown);
  padding: 0 .25vw;
  transition: -webkit-text-stroke-color .15s ease, color .15s ease;
}
.site-nav__list a:hover,
.site-nav__list a:focus,
.site-nav__list a.is-active {
  -webkit-text-stroke-color: var(--burgundy-h);
  color: var(--burgundy-h);
}

/* Hamburger button — hidden on desktop */
.site-nav__toggle {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 102;
}
.site-nav__toggle span {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  background: var(--brown);
  border-radius: 4px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.site-nav__toggle span:nth-child(1) { top: 14px; }
.site-nav__toggle span:nth-child(2) { top: 23px; }
.site-nav__toggle span:nth-child(3) { top: 32px; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  top: 23px; transform: rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  top: 23px; transform: rotate(-45deg);
}

/* HERO COVER TEXT */
.a-cover {
  position: relative;
  padding-top: clamp(15rem, 22vw, 22rem);
  padding-bottom: 3rem;
  text-align: center;
  z-index: 2;
}
/* Cover headings are rendered with inline SVG <text> using
   stroke-linejoin="round" + paint-order="stroke fill". SVG strokes follow
   the actual glyph paths and are rendered identically across every browser
   per the SVG spec — no more text-stroke join discrepancies or filter tricks. */
/* Sized by HEIGHT, not width — every page's title shares the same viewBox
   height (180) and every single-line subtitle shares the same viewBox
   height (95), so pinning CSS height makes the rendered text size
   identical across pages regardless of how long or short the actual
   words are. Width follows from the viewBox aspect ratio. */
.hero-svg {
  display: block;
  margin: 0 auto;
  overflow: visible;
  width: auto;
  max-width: 100%;
}
.hero-title-svg     { height: clamp(72px, 10.5vw, 117px); }
.hero-subtitle-svg  { height: clamp(39px, 5.5vw, 62px); }
/* Two-line subtitles have a taller viewBox (155 vs 95), so they need a
   proportionally taller CSS height to render the same font size. */
.hero-subtitle-svg.is-multiline { height: clamp(63px, 9vw, 100px); }

/* Inner pages — slightly taller than the live site so the hero photo
   has more presence. Title still sits in the lower half. */
.site-hero--inner { --hero-h: 700px; }
.site-hero--inner .a-cover {
  padding-top: clamp(14rem, 20vw, 18rem);
  padding-bottom: 2rem;
}

/* --- Mobile (≤820px) ---------------------------------------------------- */
@media (max-width: 820px) {
  .site-hero { min-height: clamp(460px, 95vw, 700px); }
  .site-hero--inner { min-height: clamp(360px, 75vw, 560px); }
  .cloud-left {
    width: 60vw; height: 24vw;
    background-image: url("../images/clouds/cloud-left-mobile.svg");
    background-position: 50% 28%;
  }
  .cloud-right {
    width: 65vw; height: 24vw;
    background-image: url("../images/clouds/cloud-right-mobile.svg");
    background-position: 50% 60%;
  }
  .hero-logos {
    top: 3vw;
    left: 3vw;
    width: 30vw;
  }

  /* The hamburger sits on the cloud at top-right, above everything */
  .site-nav { padding: 0; top: 1.5vw; right: 3vw; }
  .site-nav__toggle { display: block; }

  /* Drawer — 2/3 width on the right, full height, translucent */
  .site-nav__list {
    position: fixed;
    top: 0;
    right: 0;
    width: 66vw;
    height: 100vh;
    background: rgba(195, 198, 168, 0.82);  /* sage at 82% */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    padding: 4rem 1.5rem;
    z-index: 101;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .site-nav__list.is-open { transform: translateX(0); }
  .site-nav__list a {
    font-size: 1.75rem;
    -webkit-text-stroke-width: 1.4px;
    padding: .5rem 1rem;
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus { color: var(--burgundy); -webkit-text-stroke-color: var(--burgundy); }

  /* Slight dim layer over the rest of the page when drawer is open */
  body.menu-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 100;
  }

  .a-cover { padding-top: clamp(34vw, 50vw, 18rem); }
  .site-hero--inner .a-cover { padding-top: clamp(28vw, 40vw, 14rem); }
}

/* Smallest mobile — pull the twin logos up & left so they stay tucked
   inside the bottom curve of the cloud SVG */
@media (max-width: 480px) {
  .hero-logos { top: 0; left: 0; width: 26vw; padding: .5vw 0 0 .5vw; }
}
@media (max-width: 380px) {
  .hero-logos { top: 0; left: 0; width: 24vw; padding: 0 0 0 .25vw; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: 4rem 0; position: relative; }
section.section--tight { padding: 2.25rem 0; }

.section--sage       { background-color: var(--sage); color: var(--brown); }
.section--sage-light { background-color: var(--sage-light); color: var(--brown); }
.section--sage-d     { background-color: var(--sage-d); color: var(--brown); }
.section--tan        { background-color: var(--tan); color: var(--brown); }
.section--tan-d      { background-color: var(--tan-d); color: var(--brown); }

/* WP-style cover — image + colored overlay at opacity */
.b-cover {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: var(--bg-position, center);
  background-repeat: no-repeat;
  padding: 4.5rem 0;
}
.b-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-color, var(--sage));
  opacity: var(--overlay-opacity, 0.9);
  z-index: 0;
  pointer-events: none;
}
.b-cover > * { position: relative; z-index: 1; }

.b-cover--sage   { --overlay-color: var(--sage);   --overlay-opacity: .90; }
.b-cover--sage70 { --overlay-color: var(--sage);   --overlay-opacity: .70; }
.b-cover--tan    { --overlay-color: var(--tan);    --overlay-opacity: .90; }
.b-cover--tan70  { --overlay-color: var(--tan);    --overlay-opacity: .70; }

.section__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2rem;
}
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 1.25rem;
  color: var(--burgundy);
  margin-bottom: .65rem;
  -webkit-text-stroke: 0.9px var(--burgundy);
}
.section h2, .section__header h2 { margin-top: 0; }

.lead {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  -webkit-text-stroke-width: 0.7px;
}

/* ==========================================================================
   Location cards — no border, just tan tile w/ a subtle inset accent
   ========================================================================== */
.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.location-card {
  background: var(--tan);
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.25rem 1.75rem;
  color: var(--brown);
  -webkit-text-stroke: 0.6px var(--brown);
  transition: transform .25s ease, background-color .25s ease;
  box-shadow: 0 6px 14px rgba(79,50,24,.10);
}
.location-card:hover {
  transform: translateY(-4px);
  background: var(--sage-light);
}
.location-card__logo {
  width: clamp(110px, 14vw, 160px);
  height: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
}
.location-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.location-card__title {
  font-family: 'Bubbler One', cursive;
  font-size: 1.65rem;
  margin: 0 0 .25rem;
  -webkit-text-stroke: 0.9px var(--brown);
}
.location-card__addr {
  margin: 0;
  font-size: 1.25rem;
  color: var(--brown);
}

/* ==========================================================================
   Testimonials — quote marks safely outside the text
   ========================================================================== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.testimonial { margin: 0; padding: 0 1rem; position: relative; }
.testimonial blockquote {
  margin: 1.5rem 0 0;
  font-style: italic;
  font-size: 1.25rem;
  position: relative;
  padding: 0 1rem 0 2.25rem;
  -webkit-text-stroke-width: 0.55px;
}
.testimonial blockquote::before {
  content: "\201C";
  font-family: 'Times New Roman', serif;
  font-size: 4.5rem;
  line-height: 1;
  opacity: .55;
  color: var(--brown);
  -webkit-text-stroke: 0 transparent;
  position: absolute;
  left: -0.25rem;
  top: -2.1rem;
  pointer-events: none;
}
.testimonial cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: var(--burgundy);
  text-align: right;
  -webkit-text-stroke: 1px var(--burgundy);
  font-size: 1.25rem;
}

/* ==========================================================================
   Contact tiles — closer together, transparent panel hover
   ========================================================================== */
.contact-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
}
.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  background: transparent;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  text-align: center;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px var(--brown);
  transition: transform .25s ease, background-color .25s ease,
              color .25s ease, -webkit-text-stroke-color .25s ease;
}
.contact-tile .icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  transition: color .25s ease, transform .25s ease;
}
.contact-tile .icon svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-tile:hover,
.contact-tile:focus {
  background-color: rgba(79,50,24,.85);
  color: var(--cream);
  -webkit-text-stroke-color: var(--cream);
  transform: translateY(-3px);
}
.contact-tile:hover .icon,
.contact-tile:focus .icon {
  color: var(--cream);
  transform: scale(1.05);
}

/* ==========================================================================
   Poem
   ========================================================================== */
.poem {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.7;
  white-space: pre-line;
  -webkit-text-stroke-width: 0.5px;
}
.poem__attr {
  display: block;
  margin-top: 1.5rem;
  font-style: italic;
  color: var(--brown);
}

/* ==========================================================================
   Parent Info — simple centered link list (matches live site layout)
   ========================================================================== */
.pi-links {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.pi-links li { margin: 0; padding: .35rem 0; }
.pi-links li { margin: 0; padding: .55rem 0; }
.pi-links a {
  font-size: 1.45rem;
  -webkit-text-stroke-width: 1.3px;
  letter-spacing: .3px;
}
.pi-links a:hover { -webkit-text-stroke-width: 1.6px; }

/* Twin-logo row at the bottom of the parent info page */
.pi-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 880px;
  margin: 2.5rem auto 0;
  text-align: center;
}
.pi-locations img {
  width: clamp(170px, 22vw, 240px);
  height: auto;
  margin: 0 auto 1rem;
  border-radius: 50%;
}
.pi-locations h3 {
  margin: 1rem 0 .5rem;
  font-size: 1.65rem;
  font-weight: 700;
  -webkit-text-stroke-width: 1.4px;
  letter-spacing: 1px;
}
.pi-locations a {
  display: inline-block;
  padding: .15rem 0;
  font-size: 1.45rem;
  -webkit-text-stroke-width: 1.3px;
  letter-spacing: .3px;
}
.pi-locations a:hover { -webkit-text-stroke-width: 1.6px; }

/* ==========================================================================
   Recent Work sections
   ========================================================================== */
.work-section { margin-bottom: 4rem; }
.work-section__intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.25rem;
  align-items: center;
}
.work-section--reverse .work-section__intro { direction: rtl; }
.work-section--reverse .work-section__intro > * { direction: ltr; }
.work-section__intro img {
  border-radius: 14px;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 720px) {
  .work-section__intro { grid-template-columns: 1fr; }
  .work-section--reverse .work-section__intro { direction: ltr; }
}

/* ==========================================================================
   Galleries — 4 columns
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.gallery img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .25s ease;
}
.gallery img:hover { transform: scale(1.03); }

@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Staff bios — circular photos
   ========================================================================== */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem 1.5rem;
}
.staff-card {
  background: transparent;
  text-align: center;
  padding: .5rem;
}
.staff-card img {
  width: clamp(150px, 18vw, 210px);
  height: clamp(150px, 18vw, 210px);
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.staff-card__name {
  font-family: 'Bubbler One', cursive;
  margin: 0 0 .35rem;
  color: var(--brown);
  font-size: 1.45rem;
  -webkit-text-stroke: 0.9px var(--brown);
}
.staff-card__bio {
  font-size: 1em;                   /* inherit the 1.25em body size */
  color: var(--brown);
  text-align: left;
  padding: 0 .5rem;
  line-height: 1.55;
  -webkit-text-stroke-width: 0.45px;
}

/* ==========================================================================
   "At a Glance" three-column layout (location pages)
   ========================================================================== */
.glance-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.glance-cols .cl-block { text-align: center; margin-bottom: 1.5rem; }
.glance-cols .mailing { text-align: center; }
@media (max-width: 820px) {
  .glance-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Contact-page per-location panels
   ========================================================================== */
.contact-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.contact-location { text-align: center; }
.contact-location__logo {
  width: clamp(130px, 16vw, 180px);
  height: auto;
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.contact-location h3 {
  margin: 0 0 .25rem;
  font-size: 1.65rem;
  -webkit-text-stroke: 1px var(--brown);
}
.contact-location .addr {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
}
.cl-block { margin-bottom: 1.15rem; }
.cl-block h4 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--burgundy);
  -webkit-text-stroke: 0.8px var(--burgundy);
  margin: 0 0 .35rem;
}
.cl-block p { margin: 0; font-size: 1.25rem; line-height: 1.5; }
.contact-location .mailing {
  font-size: 1.25rem;
  opacity: .9;
  margin: 1.25rem 0 0;
}

/* ==========================================================================
   Fact list
   ========================================================================== */
.fact-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.fact-list li {
  background: var(--tan);
  padding: 1.25rem;
  border-radius: 14px;
}
.fact-list strong {
  display: block;
  color: var(--burgundy);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 1.25rem;
  margin-bottom: .35rem;
  -webkit-text-stroke: 0.7px var(--burgundy);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  background: var(--burgundy);
  color: var(--white);
  font-family: 'Bubbler One', cursive;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.6px var(--white);
  transition: background .2s ease, transform .2s ease;
}
.btn:hover, .btn:focus {
  background: var(--brown);
  color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   Footer + Facebook icon (now an SVG in palette blue)
   ========================================================================== */
.site-footer {
  background: var(--brown);
  color: var(--cream);
  padding: 2.5rem 0 1.25rem;
  -webkit-text-stroke: 0.4px var(--cream);
}
.site-footer a { color: var(--cream); -webkit-text-stroke-color: var(--cream); }
.site-footer a:hover { color: var(--peach); -webkit-text-stroke-color: var(--peach); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.site-footer h2 {
  color: var(--cream);
  font-size: 1.35rem;
  margin: 0 0 .5rem;
  -webkit-text-stroke: 0.6px var(--cream);
  letter-spacing: .5px;
}
.site-footer p { margin: 0 0 .25rem; font-size: 1.25rem; line-height: 1.55; }

/* Facebook icon — uses the supplied PNG as-is (already a soft, faded blue
   that fits the palette). Just a small lift on hover. */
.fb-icon {
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease;
  -webkit-text-stroke: 0 transparent;
}
.fb-icon img {
  width: 48px; height: 48px;
  display: block;
}
.fb-icon svg { display: none; }
.fb-icon:hover, .fb-icon:focus { transform: scale(1.05); }

.site-footer__bottom {
  margin-top: 2rem;
  border-top: 1px solid rgba(244,238,219,.18);
  padding-top: 1rem;
  font-size: 1.25rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  opacity: .9;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center { text-align: center; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }