/* ==========================================================================
   The Full Melt Advisory — shared stylesheet
   Sunlit rainforest canopy. Midday, humid, lush. Light ground, dark type.
   Mobile-first.
   NOTE: no pure-white value is used anywhere in this file. Where one would
   normally be reached for, --jungle-light stands in.
   Accent is deep green only — there is no third hue in this palette.
   ========================================================================== */

/* ---- Palette ------------------------------------------------------------- */
:root {
  --jungle-light: #E8F0E3; /* page background, pale sunlit green-white */
  --jungle-mist:  #C9DDBF; /* section backgrounds                      */
  --frond:        #6FA860; /* mid greens, dividers, hover              */
  --canopy:       #2F5D3A; /* headings, strong text                    */
  --deep-leaf:    #1C3A24; /* darkest text, maximum contrast           */
  --bark:         #5C4433; /* secondary accent, subtle borders         */

  /* Accent roles — deep green on light. No third hue. */
  --accent:       #2F5D3A; /* links, nav, key figures, headings        */
  --accent-dark:  #1C3A24; /* hover, active, strongest headline text   */
  --cta:          #55A83F; /* CTA button background — bright warm green */
  --cta-text:     #12240F; /* CTA button label — near-black for contrast */
  --ink:          #121712; /* near-black — active nav marker only       */
  --cta-hover:    #4A9636; /* CTA hover — deeper warm green            */

  /* CTA is clay, not green, and clay appears NOWHERE else on the site.
     Verified contrast on #E8F0E3 page background:
       button vs pale background   5.07:1  (passes WCAG AA)
       button vs tinted band       4.11:1  (passes WCAG AA and 1.4.11)
       label on button             5.07:1  (passes WCAG AA)
     Checked against BOTH the base background and the tinted section
     bands, since CTAs appear on both.
     Green passed contrast too (8.67:1) but competed with the green
     headings, borders and links for attention. Salience, not legibility,
     was the problem. */

  --maxw: 60rem;
  --pad: 1.5rem;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--jungle-light);
  color: var(--deep-leaf);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover,
a:focus { color: var(--accent-dark); text-decoration: underline; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  color: var(--canopy);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: -0.01em;
     color: var(--deep-leaf); }
h2 { font-size: clamp(1.6rem, 6vw, 2.5rem); }
h3 { font-size: 1.25rem; color: var(--canopy); font-weight: 600; }

p { margin: 0 0 1.2em; }

.lead { font-size: 1.2rem; color: var(--deep-leaf); }

.subhead {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--frond);
  margin: 0 0 1rem;
}

.accent { color: var(--accent-dark); }

/* The 2.1 lbs figure — emphasis comes from size, not a contrasting colour */
.hero h1 .accent {
  display: block;
  font-size: 1.2em;
  letter-spacing: -0.02em;
}

/* The three service names, set big */
.big-service {
  font-size: clamp(2.4rem, 11vw, 4.25rem);
  color: var(--deep-leaf);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 0.35em;
}

/* ---- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section { padding: 4rem 0; }

/* Alternating light bands for depth without hard lines */
.band-deep { background: var(--jungle-light); }
.band-mid  { background: var(--jungle-mist); }

/* Organic soft divider — blurred horizontal fade, not a hard box */
.fade-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    rgba(111, 168, 96, 0),
    var(--frond) 20%,
    var(--frond) 80%,
    rgba(111, 168, 96, 0)
  );
  opacity: 0.6;
}

/* ---- Header / nav -------------------------------------------------------- */
/* The business name is the largest text in the header. It takes the full
   width on its own line; the nav links sit on a second line beneath it. */
.site-header {
  background: var(--jungle-light);
  border-bottom: 1px solid var(--frond);
  overflow-x: hidden;   /* guard: never let the wordmark cause a sideways scroll */
}

.nav {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem 0.6rem 0.6rem;
  text-align: center;          /* brand and links both centred */
}



/* Second line — big, bold, well separated tap targets */
.navlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* single centred row under the name */
  gap: 0.4rem 2.5rem;
  padding: 0 0.9rem 0.75rem;
}

.navlinks a.navlink {
  color: var(--accent);
  font-size: 1.3125rem;       /* 21px on mobile, never smaller */
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.85rem 0;
  line-height: 1.2;
}
.navlinks a.navlink:hover { color: var(--accent-dark); text-decoration: underline; }
.navlinks a.navlink[aria-current="page"],
.bottom-nav a.navlink[aria-current="page"] {
  color: var(--ink);
  border-bottom: 6px solid var(--ink);   /* thicker, black */
  padding-bottom: 0.35rem;
}

/* ==========================================================================
   HERO — real photo background, zoomed so it reads as a jungle of plants
   ========================================================================== */
.hero {
  position: relative;
  padding: 3.5rem 0 4rem;
  background-color: var(--jungle-light);
  background-image: linear-gradient(
      to bottom,
      var(--jungle-light) 0%,
      var(--jungle-mist) 100%
    );
  border-bottom: 1px solid var(--frond);
}


.hero h1 { margin-bottom: 0.75rem; }

/* Credential list */
.creds {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
}
.creds li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.4rem;
  border-top: 1px solid rgba(111, 168, 96, 0.55);
  color: var(--deep-leaf);
}
.creds li:last-child { border-bottom: 1px solid rgba(111, 168, 96, 0.55); }
.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--frond);
  border-radius: 50%;
}

/* ---- Full-bleed photo blocks -------------------------------------------- */
.photo-bleed {
  position: relative;
  width: 100%;
  /* Capped at the native pixel width of the source files (1284px).
     Beyond this the browser would upscale and the image goes soft. */
  max-width: 1284px;
  margin: 0 auto;
  min-height: 60vw;
  max-height: 78vh;
  overflow: hidden;
  background: var(--jungle-mist);
}
.photo-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.04) saturate(1.05);
}
/* Caption overlay — light wash from the bottom, dark type stays readable */
.photo-bleed .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(232, 240, 227, 0.92) 0%,
    rgba(232, 240, 227, 0.35) 30%,
    rgba(232, 240, 227, 0) 60%
  );
  display: flex;
  align-items: flex-end;
  padding: var(--pad);
}
.photo-bleed .overlay .caption {
  color: var(--deep-leaf);
  font-size: 0.95rem;
  font-weight: 500;
  max-width: 32rem;
  margin: 0;
}

/* Inline framed photo */
.photo-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--frond);
  margin: 1.5rem 0;
}
.photo-frame img { width: 100%; filter: brightness(1.03) saturate(1.04); }

/* ---- Cards / lists ------------------------------------------------------- */
.stack > * + * { margin-top: 1.25rem; }

.card {
  background: var(--jungle-mist);
  border: 1px solid rgba(111, 168, 96, 0.6);
  border-radius: 6px;
  padding: 1.75rem var(--pad);
}
.band-mid .card {
  background: var(--jungle-light);
  border-color: rgba(92, 68, 51, 0.25); /* bark, subtle */
}

/* Service list */
.svc-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.svc-list li {
  padding: 0.55rem 0 0.55rem 1.3rem;
  position: relative;
  border-bottom: 1px solid rgba(111, 168, 96, 0.4);
  color: var(--deep-leaf);
}
.svc-list li:last-child { border-bottom: 0; }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.5rem;
  height: 1px;
  background: var(--bark);
}

/* ---- Buttons / CTA ------------------------------------------------------- */
.cta-row { margin-top: 2rem; }

.btn {
  display: inline-block;
  background: var(--cta);
  color: var(--cta-text);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  padding: 1.05rem 2rem;
  border-radius: 3px;
  border: 1px solid var(--cta);
}
.btn:hover,
.btn:focus {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-text);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-ghost:hover {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  background: transparent;
}

/* Repeated CTA band */
.cta-band {
  text-align: center;
  padding: 4rem 0;
  background: linear-gradient(to bottom, var(--jungle-light), var(--jungle-mist));
  border-top: 1px solid rgba(111, 168, 96, 0.45);
}
.cta-band h2 { margin-bottom: 0.5rem; }

/* ---- Contact ------------------------------------------------------------- */
.contact-lines {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.contact-lines li {
  padding: 1rem 0;
  border-top: 1px solid rgba(111, 168, 96, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.contact-lines li:last-child {
  border-bottom: 1px solid rgba(111, 168, 96, 0.55);
}
.contact-lines .label {
  color: var(--frond);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 7rem;
  padding-top: 0.15rem;
}
.contact-lines .value { color: var(--deep-leaf); font-size: 1.1rem; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--frond);
  padding: 2.5rem 0;
  background: var(--jungle-mist);
  color: var(--canopy);
  font-size: 0.85rem;
}
.site-footer a { color: var(--bark); }
.site-footer .foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ---- Utility ------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.measure { max-width: 38rem; }
.center { text-align: center; }

/* ==========================================================================
   Larger screens
   ========================================================================== */
@media (min-width: 48rem) {
  body { font-size: 1.125rem; }

  section { padding: 5.5rem 0; }

  .hero { padding: 6rem 0 6.5rem; }

  .creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
  .creds li { border-top: 1px solid rgba(111, 168, 96, 0.55); }
  .creds li:nth-last-child(2):not(:last-child) { border-bottom: 0; }

  .photo-bleed { min-height: 0; height: 70vh; }

  .two-col {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
  }
}

@media (min-width: 64rem) {
  .hero-inner { max-width: 46rem; }
}


/* ==========================================================================
   Proof strip — credentials as specifics, sitting under the fold
   ========================================================================== */
.proof-strip {
  background: var(--accent-dark);
  padding: 2.25rem 0;
}
.proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.proof li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.proof-fig {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--jungle-light);
  flex: none;
  min-width: 3.2rem;
}
.proof-lbl {
  color: var(--jungle-mist);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* ==========================================================================
   Symptom list — operator language, set as quotes
   ========================================================================== */
.symptoms {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.symptoms li {
  background: var(--jungle-light);
  border-left: 4px solid var(--frond);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--deep-leaf);
}
.symptoms em { font-style: italic; }

@media (min-width: 48rem) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .proof li { display: block; }
  .proof-fig { display: block; font-size: 3.4rem; margin-bottom: 0.4rem; }
  .symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .stack > * + * { margin-top: 0; }
}


/* ==========================================================================
   KNF proof mosaic
   Tiles are 420x560px native. Column width is capped so they are never
   scaled above native size — that is what kept the rest of the site sharp.
   ========================================================================== */
.mosaic-lead { margin-top: 3rem; }

.knf-mosaic {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.knf-mosaic li {
  margin: 0;
  background: var(--jungle-light);
  border: 1px solid rgba(111, 168, 96, 0.55);
  border-radius: 4px;
  overflow: hidden;
}
.knf-mosaic img {
  width: 100%;
  aspect-ratio: 420 / 560;
  object-fit: cover;
  display: block;
}
.knf-mosaic span {
  display: block;
  padding: 0.6rem 0.7rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--canopy);
  font-weight: 500;
}
.mosaic-note {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  color: var(--deep-leaf);
  font-weight: 500;
}

@media (min-width: 34rem) {
  .knf-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .knf-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    /* 4 x 420px native + gaps — never exceeds native tile width */
    max-width: 1780px;
  }
}


/* ==========================================================================
   Hero banner — real photo, capped at its native 2000px width.
   Wider viewports get letterboxed rather than an upscaled image.
   ========================================================================== */
.hero-banner {
  max-width: 2000px;
  margin: 0 auto;
  background: var(--jungle-mist);
  line-height: 0;
}
.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Empty slots — no image exists yet. Do not substitute a related photo. */
.slot-empty {
  border: 2px dashed var(--frond);
  border-radius: 4px;
  padding: 2.25rem 1.5rem;
  text-align: center;
  color: var(--canopy);
  background: var(--jungle-light);
  margin: 1.5rem 0;
}
.slot-empty strong { display: block; font-size: 1.05rem; margin-bottom: 0.35rem; }
.slot-empty span { font-size: 0.9rem; color: var(--frond); }


/* Wide room shots are context, not the pitch — they stay small. */
.photo-row-small {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.photo-row-small img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--frond);
  border-radius: 3px;
}
.photo-small { max-width: 440px; }


/* ==========================================================================
   BRAND WORDMARK — metallic ice
   Reflective blue-white, like light through melting ice. Pure CSS: a vertical
   gradient clipped to the glyphs, a bright sweep across the middle, and a
   soft dark edge beneath for depth. Applies to the brand name ONLY.
   Note: this is the one place cool blues and a near-white appear. Everything
   else on the site stays on the green palette.
   ========================================================================== */
.brand {
  display: block;
  width: 100%;
  font-family: "Playfair Display", var(--serif);
  font-weight: 900;
  /* "THE FULL MELT ADVISORY" is 22 characters. Sized so it holds ONE
     centred line at every width without overflowing a narrow phone. */
  font-size: min(6.0vw, 4.3rem);
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  word-spacing: 0.16em;
  margin: 0 0 0.85rem;
  /* fallback if background-clip:text is unavailable — never invisible */
  color: #33607F;
}
/* the wordmark is forced to a single line on DESKTOP ONLY */
@media (min-width: 768px) { .brand { white-space: nowrap; } }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand {
    background-image: linear-gradient(
      177deg,
      #E4F1FD 0%,
      #A9CCE5 12%,
      #5D8FB4 26%,
      #9CC6E2 38%,
      #EAF5FE 47%,
      #F4FAFF 50%,   /* the light sweep through the middle */
      #D2E8F8 54%,
      #7FAACB 66%,
      #46718F 79%,
      #8FBBD9 90%,
      #DDEFFC 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* faint darker edge underneath for depth */
    text-shadow:
      0 1px 0    rgba(28, 58, 36, 0.20),
      0 2px 1px  rgba(21, 46, 66, 0.22),
      0 5px 14px rgba(21, 46, 66, 0.16);
  }
  .brand:hover {
    filter: brightness(1.06) saturate(1.08);
    text-decoration: none;
  }
}
.brand:hover { text-decoration: none; }

/* ==========================================================================
   Hero headline — centred, full width, large
   ========================================================================== */
.hero { position: relative; overflow: hidden; }

/* low-opacity photo behind the band, capped at its native 2000px */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 2000px;
  background-image: url("photos/site/hero-buds.jpg");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.20;
}
/* heavy palette wash so --deep-leaf type stays fully readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(232, 240, 227, 0.72) 0%,
    rgba(232, 240, 227, 0.80) 45%,
    rgba(201, 221, 191, 0.90) 100%
  );
}
.hero > .wrap { position: relative; z-index: 2; }

.hero-inner { max-width: 84rem; }

.hero-headline {
  text-align: center;
  /* sized so each of the two forced lines fits on one row at 1920 */
  font-size: clamp(1.9rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.hero-lead {
  text-align: center;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.hero .cta-row { text-align: center; }


/* Bottom nav — same treatment as the top, repeated on every page */
.bottom-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.25rem 1rem 1.75rem;
  border-top: 1px solid var(--frond);
}
.bottom-nav a.navlink {
  color: var(--accent);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.7rem 0;
  line-height: 1.2;
}
.bottom-nav a.navlink:hover { color: var(--accent-dark); text-decoration: underline; }


/* ==========================================================================
   7. SERVICE LISTS — multi-column, dense and scannable
   ========================================================================== */
.svc-list {
  columns: 2;
  column-gap: 2.25rem;
  margin-top: 1.25rem;
}
.svc-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 0.42rem 0 0.42rem 1.1rem;
  border-bottom: 1px solid rgba(111, 168, 96, 0.32);
  font-size: 0.99rem;
  line-height: 1.4;
}
@media (min-width: 40rem) { .svc-list { columns: 3; } }
@media (min-width: 60rem) { .svc-list { columns: 4; } }

/* ==========================================================================
   5. Solventless photo grid — uniform cells, evenly spaced
   ========================================================================== */
.solventless-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.5rem 0;
}
.solventless-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--frond);
  border-radius: 3px;
}
@media (min-width: 34rem) { .solventless-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .solventless-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   8. NO EMPTY SPACE — palette texture so no band reads as a blank gap
   ========================================================================== */
.band-deep,
.band-mid {
  position: relative;
}
.band-mid > *,
.band-deep > * { position: relative; z-index: 1; }

/* a thin palette rule so sections never butt into dead space */
.section-rule {
  height: 6px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    var(--canopy) 0%, var(--frond) 22%, var(--jungle-mist) 50%,
    var(--frond) 78%, var(--canopy) 100%);
  opacity: 0.55;
}

/* CTA band gets real surface instead of flat colour */
.cta-band {
  background:
    radial-gradient(circle at 50% 0%, rgba(111,168,96,0.18) 0 40%, transparent 70%),
    linear-gradient(to bottom, var(--jungle-light), var(--jungle-mist));
}

/* proof strip fills its own space with depth */
.proof-strip {
  background:
    radial-gradient(circle at 15% 20%, rgba(111,168,96,0.14) 0 30%, transparent 65%),
    radial-gradient(circle at 85% 80%, rgba(111,168,96,0.10) 0 28%, transparent 60%),
    var(--accent-dark);
}

/* Active-page marker, restated LAST so both specificity and source order
   favour it over the generic .bottom-nav / .navlinks link rules above.
   Root cause of the earlier disappearance: --ink was referenced but never
   defined, which made the whole border declaration invalid and rendered
   no marker at all. */
.navlinks a.navlink[aria-current="page"],
.bottom-nav a.navlink[aria-current="page"] {
  color: var(--ink);
  border-bottom: 6px solid var(--ink);
  padding-bottom: 0.35rem;
  font-weight: 700;
}

/* ==========================================================================
   RATES — clear and readable, deliberately not fine print
   ========================================================================== */
.rates {
  background:
    radial-gradient(circle at 12% 15%, rgba(111,168,96,0.16) 0 30%, transparent 62%),
    radial-gradient(circle at 88% 85%, rgba(47,93,58,0.12) 0 28%, transparent 60%),
    var(--jungle-mist);
  border-top: 1px solid var(--frond);
  border-bottom: 1px solid var(--frond);
  padding: 3.25rem 1.25rem;
}
.rates > h2 {
  max-width: var(--maxw);
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  color: var(--deep-leaf);
}
.rates-grid {
  max-width: 52rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.rate-card {
  background: var(--jungle-light);
  border: 2px solid var(--canopy);
  border-radius: 5px;
  padding: 1.5rem 1.5rem 1.25rem;
}
.rate-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.35rem;
  color: var(--canopy);
  border-bottom: 2px solid var(--frond);
  padding-bottom: 0.5rem;
}
.rate-card ul { list-style: none; margin: 0; padding: 0; }
.rate-card li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 1.1rem;
  color: var(--deep-leaf);
  border-bottom: 1px solid rgba(111,168,96,0.35);
}
.rate-card li:last-child { border-bottom: 0; }
.rate-fig {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--deep-leaf);
  min-width: 5.2rem;
}
.rate-note {
  margin: 0.85rem 0 0;
  font-size: 0.98rem;
  color: var(--canopy);
  font-weight: 600;
}
.rate-credit {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  text-align: center;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--deep-leaf);
  background: var(--jungle-light);
  border-left: 5px solid var(--cta);
  border-radius: 4px;
  padding: 1.1rem 1.35rem;
}
@media (min-width: 44rem) {
  .rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}


/* ==========================================================================
   TILED PHOTO TEXTURES — cropped from the approved photo set, heavily blurred
   and flattened so they read as surface, never as a picture.
   Every tile is mirror-folded, so all four edges match their opposite edge and
   it repeats with no visible seam. Each sits under a heavy palette wash.
   Assignments:
     header      rosin, cropped from the material only
     band-mid    healthy green leaf surface
     band-deep   trichome / bud frost
     rates       sprouted fava and root detail
     cta-band    trichome / bud frost, darker wash
   ========================================================================== */
.site-header { position: relative; }
.site-header::before,
.band-mid::before,
.band-deep::before,
.rates::before,
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  z-index: 0;
}
/* keep all content above the texture layer */
.site-header > .nav,
.band-mid > *,
.band-deep > *,
.rates > *,
.cta-band > * { position: relative; z-index: 1; }

.site-header::before {
  background-image: url("photos/tex/tex-rosin.jpg");
  background-size: 300px 300px;
  opacity: 0.30;
}
.band-mid::before {
  background-image: url("photos/tex/tex-leaf.jpg");
  background-size: 420px 420px;
  opacity: 0.20;
}
.band-deep::before {
  background-image: url("photos/tex/tex-frost.jpg");
  background-size: 380px 380px;
  opacity: 0.16;
}
.rates::before {
  background-image: url("photos/tex/tex-sprout.jpg");
  background-size: 400px 400px;
  opacity: 0.18;
}
.cta-band::before {
  background-image: url("photos/tex/tex-frost.jpg");
  background-size: 460px 460px;
  opacity: 0.14;
}

/* heavy palette wash over each texture so type is never competing with it */
.site-header::after,
.band-mid::after,
.band-deep::after,
.rates::after,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.site-header::after { background: rgba(232, 240, 227, 0.62); }
.band-mid::after    { background: rgba(201, 221, 191, 0.70); }
.band-deep::after   { background: rgba(232, 240, 227, 0.74); }
.rates::after       { background: rgba(201, 221, 191, 0.68); }
.cta-band::after    { background: rgba(232, 240, 227, 0.66); }

/* ==========================================================================
   HOME HERO — three original photographs, side by side.
   No fade, no wash, no overlay, no filter, no contrast change. The images
   render exactly as the files are. Declared last so nothing overrides it.
   ========================================================================== */
.hero-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 2000px;
  margin: 0 auto;
  background: none;
  line-height: 0;
}
.hero-three::before,
.hero-three::after { content: none !important; display: none !important; }
.hero-three img {
  width: 100%;
  height: auto;
  display: block;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
}

/* ==========================================================================
   BUG FIX 2026-08-12 — THE WASH-OUT
   .rates and .cta-band carry absolutely-positioned texture/wash overlays
   (::before and ::after with inset:0) but were never given a positioning
   context. With no positioned ancestor those overlays resolved against the
   initial containing block and stretched across the ENTIRE PAGE, washing out
   the header and the hero photographs.
   Giving them position:relative confines each overlay to its own section.
   ========================================================================== */
.rates,
.cta-band { position: relative; }

/* Belt and braces: the hero photographs sit above any stray overlay. */
.hero-three { position: relative; z-index: 5; }


/* ==========================================================================
   BAND CAPTIONS — sit tight under a photo band, centred
   ========================================================================== */
.band-caption {
  max-width: 2000px;
  margin: 0.3rem auto 0;      /* nearly touching the photos above */
  padding: 0 1rem 0.9rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;            /* slightly smaller than the 1.3125rem nav links */
  font-weight: 500;
  line-height: 1.35;
  color: var(--canopy);
}

/* ==========================================================================
   PRIMARY BUTTON — bright warm green, site-wide.
   Label is near-black for legibility: pale text on a bright green fails
   WCAG AA, dark text on it clears 5.49:1. A deeper green border supplies
   the 3:1 boundary against the page (4.56:1).
   ========================================================================== */
.btn {
  background: var(--cta);
  color: var(--cta-text);
  border: 2px solid #2E7A35;
}
.btn:hover,
.btn:focus {
  background: var(--cta-hover);
  border-color: #245F29;
  color: var(--cta-text);
}
/* the rates callout used the old clay border */
.rate-credit { border-left-color: var(--cta); }


/* A panel whose source is far taller than the band. Show the WHOLE frame
   rather than cropping 38% of it away to fill the panel. The letterbox sits
   on a dark palette tone so it reads as a deliberate frame. */
/* Band 2's sources are 1284x2778 — far taller than a 0.75 panel. Filling the
   panel meant cropping 38% of the height away, which read as heavy zoom.
   This band gets its own taller aspect so much less is discarded, and the
   bud frame is shown whole. */
.band-tall img { aspect-ratio: 760 / 1330; object-fit: cover; width: 100%; height: auto; display: block; }
/* Letterbox bar beside the tall bud photo uses the EXACT token behind the
   hero headline (--jungle-light, #E8F0E3) so it reads as page background
   rather than a dark divider. */
.band-tall img.fit-whole { object-fit: contain; background: var(--jungle-light); }


/* Per-photo captions inside a band. The <figure> becomes the grid cell so the
   image keeps its exact previous sizing and the caption sits directly under
   its own photo. Same type treatment as the band-level caption. */
.band-tall figure { margin: 0; display: block; }
.band-tall figcaption {
  padding: 0.3rem 0.6rem 0.9rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--canopy);
}


/* Hard line break in the hero headline. Each line is its own block, so the
   break is guaranteed at every width; on a narrow phone each line may wrap
   within itself rather than the two lines running together. */
.hero-headline .line { display: block; }

/* ==========================================================================
   Services page — big centred title, caps strapline, centred section heads
   ========================================================================== */
.services-title {
  text-align: center;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1.02;
  margin: 0 0 0.6rem;
  color: var(--deep-leaf);
}
.services-sub {
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  color: var(--canopy);
  margin: 0;
}
.big-service { text-align: center; }
.svc-intro { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   Contact — paid call question grid, three across
   ========================================================================== */
.paid-call-head {
  text-align: center;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--deep-leaf);
  margin-bottom: 1.5rem;
}
.qgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
.qgrid li {
  background: var(--jungle-light);
  border-left: 4px solid var(--cta);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--deep-leaf);
}
@media (min-width: 34rem) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }

/* ==========================================================================
   PART 3 — global heading and button treatment on the home page
   Every section heading gets the hero-headline scale. All centred.
   ========================================================================== */
.big-head {
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--deep-leaf);
  margin: 0 0 0.6rem;
}
.section-lead {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto 1.4rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--deep-leaf);
}
/* every button on the home page sits centred */
.cta-row { text-align: center; }

/* hero supporting line forced onto one row */
.hero-lead.one-line { font-size: clamp(0.72rem, 1.62vw, 1.15rem); }
/* the forced single line is a DESKTOP behaviour only */
@media (min-width: 768px) { .hero-lead.one-line { white-space: nowrap; } }

/* proof strip: "500" and "light facility" share a line */
.proof-fig em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.30em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jungle-mist);
}

/* mosaic closing line centred */
.mosaic-note { text-align: center; }
/* practice-area cards centred */
.band-deep .stack .card, .band-mid .stack .card { text-align: center; }

/* ==========================================================================
   Contact rows — label column fixed, every value on the same left edge
   ========================================================================== */
.contact-lines li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0 1.25rem;
  align-items: start;
}
.contact-lines .label { min-width: 0; padding-top: 0.2rem; }
.contact-lines .value { display: block; }
.contact-lines .v-line { display: block; }
.contact-lines .v-line + .v-line { margin-top: 0.3rem; }
@media (max-width: 33rem) {
  .contact-lines li { grid-template-columns: 1fr; gap: 0.25rem 0; }
}

/* Question cards — a step up in size and weight, still under the rates text */
.qgrid li { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }

/* ==========================================================================
   Proof strip — big figure unchanged, unit label to its right,
   all three unit labels identical in size and treatment
   ========================================================================== */
.proof-top { display: flex; align-items: center; gap: 0.55rem; }
.proof-unit {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.7rem;          /* ~half the 3.4rem figure, identical on all three */
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--jungle-mist);
  max-width: 7ch;
}
.proof-unit.stacked { display: flex; flex-direction: column; text-align: center; }


/* ==========================================================================
   TAGLINE — rebuilt from scratch 2026-08-12 as SVG.
   The gradient uses the default objectBoundingBox units, so its three stops
   map to the TEXT ELEMENT'S OWN GLYPH BOUNDING BOX. The thirds are therefore
   exact by construction rather than hand-offset, and SVG does not clip
   glyphs the way background-clip:text on a tight box did.
   ========================================================================== */
.tagline {
  display: block;
  width: min(30rem, 72%);
  height: auto;
  margin: 0.1rem auto 0.9rem;
  overflow: visible;
}

/* ==========================================================================
   MOBILE PASS — everything below applies only under 768px.
   Desktop layout is untouched.
   ========================================================================== */
@media (max-width: 767px) {

  /* Nothing may exceed the viewport. The wordmark's white-space:nowrap was
     setting a minimum page width far wider than a phone, which pushed every
     section off the right edge and created horizontal scroll sitewide. */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg { max-width: 100%; }

  .brand {
    white-space: normal;            /* allow it to wrap instead of forcing width */
    font-size: clamp(1.4rem, 7.4vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    word-spacing: 0.06em;
    margin-bottom: 0.5rem;
  }
  .tagline { width: min(20rem, 84%); margin-bottom: 0.6rem; }

  /* all four nav items on ONE line, no wrapping */
  .navlinks,
  .bottom-nav {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 0.75rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .navlinks a.navlink,
  .bottom-nav a.navlink {
    font-size: 0.92rem;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 0.65rem 0;
  }
  .navlinks a.navlink[aria-current="page"],
  .bottom-nav a.navlink[aria-current="page"] { border-bottom-width: 4px; }

  /* the hero support line must wrap on a phone rather than force width */
  .hero-lead.one-line { white-space: normal; font-size: 1rem; line-height: 1.45; }
  .hero-headline { font-size: clamp(1.55rem, 7.4vw, 2.3rem); }
  .hero-inner, .wrap { max-width: 100%; }

  /* keep everything that is centred on desktop centred here too */
  .big-head, .section-lead, .band-caption, .mosaic-note,
  .services-title, .services-sub, .paid-call-head, .big-service,
  .svc-intro, .cta-row { text-align: center; }
  .section-lead, .svc-intro, .mosaic-note { margin-left: auto; margin-right: auto; }

  /* proof strip: stack figure over its unit so nothing is clipped */
  .proof li { display: block; }
  .proof-top { justify-content: center; gap: 0.4rem; }
  .proof-fig { font-size: 2.3rem; min-width: 0; }
  .proof-unit { font-size: 1.05rem; max-width: none; }
  .proof-lbl { display: block; text-align: center; margin-top: 0.3rem; }

  /* photo bands stay three across; captions scale down to suit */
  .band-tall figcaption { font-size: 0.78rem; line-height: 1.3; padding: 0.3rem 0.35rem 0.7rem; }
  .band-caption { font-size: 0.88rem; }

  /* tappable buttons */
  .btn { padding: 0.95rem 1.5rem; font-size: 1rem; display: inline-block; }

  /* contact rows stack, values left-aligned under their label */
  .contact-lines li { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .contact-lines .label { padding-top: 0; }

  /* rates read clearly on a narrow screen */
  .rate-fig { font-size: 1.7rem; min-width: 4.2rem; }
  .rate-card li { font-size: 1rem; }
  .rates { padding: 2.5rem 1rem; }
}

/* ==========================================================================
   GRID BLOWOUT FIX
   Grid items default to min-width:auto, which resolves to the item's
   min-content size. For an <img> that is its INTRINSIC pixel width, so three
   800px photos in a three-column grid forced a 2400px track and pushed the
   whole document wider than a phone screen. minmax(0,1fr) plus min-width:0
   lets the tracks actually shrink. No visual change on desktop, where there
   was already enough room.
   ========================================================================== */
.hero-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-three > *,
.knf-mosaic > *,
.solventless-grid > *,
.qgrid > *,
.rates-grid > *,
.proof > *,
.photo-row-small > * { min-width: 0; }
.knf-mosaic,
.solventless-grid,
.qgrid,
.rates-grid,
.proof { grid-auto-columns: minmax(0, 1fr); }

/* ==========================================================================
   MOBILE COMPLIANCE — from Steve's real iPhone, not a render.
   Declared last so nothing can override it.
   ========================================================================== */
@media (max-width: 767px) {

  /* 1. hero supporting line wraps freely, centred, never forced to one line */
  .hero-lead,
  .hero-lead.one-line {
    white-space: normal !important;
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* 2. proof strip: each stat stacks. Figure and unit share line one,
        sentence sits centred underneath on line two. */
  .proof { grid-template-columns: 1fr !important; gap: 1.7rem; }
  .proof li {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .proof-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
  }
  .proof-fig { font-size: 2.1rem; min-width: 0; white-space: nowrap; }
  /* the unit label must never wrap - shrink it instead */
  .proof-unit {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.3rem;
    white-space: nowrap;
    max-width: none;
    font-size: clamp(0.8rem, 3.4vw, 1.05rem);
  }
  .proof-unit.stacked { flex-direction: row; text-align: center; }
  .proof-unit.stacked span { white-space: nowrap; }
  .proof-lbl {
    display: block;
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }
}