/* SavvyRest Homepage Blocks: section CSS for the eight Refined Calm homepage
   blocks. Moved verbatim from the child theme style.css (lines 1169-1718,
   2199-2235 and 2248-2353 as of 2026-09-11): .svp-aurora, .fprod-ed,
   .sren-strata, .freefrom-sr9x4, .praise-lv7k2, .nbf-heirloom, .sr-purpose,
   .srcert. The retired .sr-emblem-promise and .srhs blocks (0 references on
   the page) were dropped. The hero and Spectra-container rules (theme lines
   979-1167) stay in the theme because those blocks stay Spectra.
   Enqueued on the front page / pages carrying srhb blocks and inside the
   block editor iframe (includes/class-assets.php). */

/* ============================================================
   Value-prop cards "Aurora" — color-coded cream-seal trio that
   extends the deep-forest trust band's cream-disc language.
   Replaces the old plain .sr-vcard boxes (wp:html block in 132970).
   GOTCHA: the FA7 kit swaps <i> -> <svg>, so icon font-size/color set on
   `i` is LOST after swap. Set size/color/--fa-* on the SEAL CONTAINER
   (the svg inherits font-size as 1em); that is why the disc, not the i,
   carries font-size:34px + the duotone color vars.
   ============================================================ */
.svp-aurora{--svp-ink:#243017;--svp-text:#4B4F58;font-family:'Cabinet Grotesk',system-ui,sans-serif;background:#f7f4ec;padding:64px 24px;}
.svp-aurora *{box-sizing:border-box;}
.svp-aurora__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1080px;margin:0 auto;}
.svp-aurora__card{position:relative;isolation:isolate;border-radius:20px;padding:36px 30px 34px;background:var(--svp-surf);border:1px solid var(--svp-brd);box-shadow:0 1px 2px rgba(36,48,23,.04),0 18px 42px -30px var(--svp-shadow);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1);}
.svp-aurora__card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--svp-accent);z-index:2;}
.svp-aurora__card::after{content:"";position:absolute;inset:0;background:radial-gradient(150px 150px at 100% 0,var(--svp-wash),transparent 70%);z-index:-1;pointer-events:none;}
.svp-aurora__card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(36,48,23,.05),0 30px 58px -28px var(--svp-shadow);}
.svp-aurora__seal{display:flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;background:#f5f2ea;box-shadow:inset 0 0 0 1px rgba(36,48,23,.07),0 6px 16px -8px var(--svp-shadow);margin-bottom:24px;font-size:34px;color:var(--svp-accent-text);--fa-primary-color:var(--svp-accent-text);--fa-secondary-color:var(--svp-accent);--fa-secondary-opacity:.42;}
.svp-aurora__seal svg,.svp-aurora__seal i{display:block;width:1em;height:1em;line-height:1;}
.svp-aurora__kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--svp-accent-text);margin:0 0 9px;}
.svp-aurora__title{font-size:23px;line-height:1.14;font-weight:600;letter-spacing:-.015em;color:var(--svp-ink);margin:0 0 10px;}
.svp-aurora__body{font-size:15.5px;line-height:1.55;color:var(--svp-text);margin:0;max-width:32ch;}
/* Inline links in a card body inherit that card's own accent (the --svp-accent-text
   var is set per card modifier), so the link reads as native to the tile instead of
   falling back to a generic theme link colour. Underlined rather than colour-only:
   colour alone is not a sufficient affordance (WCAG 1.4.1). On the --order card that
   is #3f626a on #eaf1f2 = 5.80:1, clears AA for body text.
   The !important is not optional: an inline sheet on every page sets a global
   a{text-decoration:none!important}, which no amount of specificity beats. Using
   the longhands (not the text-decoration shorthand) so the important shorthand
   upstream cannot reset thickness back to auto. */
.svp-aurora__body a{color:var(--svp-accent-text);text-decoration-line:underline !important;text-decoration-thickness:1px !important;text-underline-offset:2px;font-weight:600}
.svp-aurora__body a:hover,.svp-aurora__body a:focus-visible{text-decoration-thickness:2px !important}
.svp-aurora--feel{--svp-surf:#f6f0f8;--svp-brd:#e7d8ec;--svp-accent:#9660a2;--svp-accent-text:#7e4f8a;--svp-wash:rgba(150,96,162,.10);--svp-shadow:rgba(126,79,138,.45);}
.svp-aurora--pure{--svp-surf:#eef4ea;--svp-brd:#d6e4cd;--svp-accent:#496b3d;--svp-accent-text:#34512c;--svp-wash:rgba(73,107,61,.12);--svp-shadow:rgba(52,81,44,.5);}
.svp-aurora--order{--svp-surf:#eaf1f2;--svp-brd:#cfe0e2;--svp-accent:#678e96;--svp-accent-text:#3f626a;--svp-wash:rgba(103,142,150,.12);--svp-shadow:rgba(63,98,106,.5);}
@media (max-width:900px){.svp-aurora__row{grid-template-columns:1fr 1fr;}}
@media (max-width:768px){.svp-aurora{padding:48px 20px;}.svp-aurora__row{grid-template-columns:1fr;gap:18px;}.svp-aurora__card{padding:32px 26px 28px;}}
@media (prefers-reduced-motion:reduce){.svp-aurora__card{transition:none;}.svp-aurora__card:hover{transform:none;}}

/* ============================================================
   Featured Products "Editorial Catalog" — WHITE section (breaks the
   forest->sage green run), large imagery, color-coded category dots,
   whole-card links + hover image-zoom. Replaces the sage-band product
   cards (block 308510f7). FA icons: size/color on container, see memory.

   2026-08-11: this section absorbed the category tiles ("Find what your
   home is missing"). The four cards now link to CATEGORY archives, not
   products. The tile section and the Forest Sanctuary mattress spotlight
   that sat either side of it were retired in the same pass, so this is the
   page's only card grid — which is why the cream-vs-white separation the
   earlier design called for is absent.
   Card line 3 is a descriptor, NOT a price: the honest per-category
   minimum describes a different kind of item in each card (Living Room
   Furniture would advertise a $150 slipcover beside $2,999 seating).
   Frames are 1:1 — the tile photos are landscape 1440x758 and a portrait
   4:5 crop cut three of the four down to unreadable centre slices.
   ============================================================ */
.fprod-ed{
  --ink:#243017;--forest:#34512c;--forest2:#496b3d;--purple:#7e4f8a;
  --teal:#678e96;--teal-dk:#4d6b72;--text:#4B4F58;--cream:#f7f4ec;--hair:#e3ddd0;
  background:#fff;
  padding:88px 40px 96px;
  font-family:'Cabinet Grotesk',system-ui,-apple-system,sans-serif;
}
.fprod-ed *{box-sizing:border-box;}
.fprod-ed__inner{max-width:1200px;margin:0 auto;}
.fprod-ed__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  border-bottom:1px solid var(--hair);padding-bottom:26px;margin-bottom:54px;
}
.fprod-ed__kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--forest2);font-weight:600;margin:0 0 16px;
}
.fprod-ed__title{
  font-size:50px;line-height:.98;letter-spacing:-.02em;
  color:var(--ink);font-weight:700;margin:0;
}
.fprod-ed__shop{
  display:inline-flex;align-items:center;gap:11px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--forest);text-decoration:none;white-space:nowrap;
  padding-bottom:5px;border-bottom:1.5px solid var(--ink);
  transition:gap .3s ease,color .3s ease;
}
.fprod-ed__shop-ico{font-size:14px;color:var(--forest);--fa-secondary-opacity:.4;transition:transform .3s ease;}
.fprod-ed__shop:hover{gap:16px;color:var(--forest2);}
.fprod-ed__shop:hover .fprod-ed__shop-ico{transform:translateX(3px);}
.fprod-ed__shop:focus-visible{outline:3px solid var(--forest2);outline-offset:4px;border-radius:3px;}
.fprod-ed__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
.fprod-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;outline:none;}
.fprod-card__frame{
  position:relative;overflow:hidden;border-radius:18px;
  background:var(--cream);aspect-ratio:1/1;margin-bottom:20px;
}
.fprod-card__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.fprod-card__view{
  position:absolute;left:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:9px 15px;border-radius:999px;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease;
}
.fprod-card__view i{font-size:12px;color:var(--forest);}
.fprod-card__cat{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin:0 0 13px;padding-bottom:13px;border-bottom:1px solid var(--hair);
}
.fprod-card__cat::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.fprod-card--beds .fprod-card__cat{color:var(--forest2);}
.fprod-card--beds .fprod-card__cat::before{background:var(--forest2);}
.fprod-card--mat .fprod-card__cat{color:var(--purple);}
.fprod-card--mat .fprod-card__cat::before{background:var(--purple);}
.fprod-card--bed .fprod-card__cat{color:var(--teal-dk);}
.fprod-card--bed .fprod-card__cat::before{background:var(--teal);}
.fprod-card--furn .fprod-card__cat{color:var(--forest);}
.fprod-card--furn .fprod-card__cat::before{background:var(--forest);}
/* Per-card crop tuning. The four category photos have unrelated framings,
   so a centred 1:1 crop lands badly on three of them: the bedding shot
   centres on blank quilting, the Verona shot on a green cushion mass, the
   outdoor mattress shot on the tree behind the bed. These pull each crop
   onto its actual subject. Re-check if a photo is ever swapped. */
.fprod-card--mat .fprod-card__img{object-position:60% 50%;}
.fprod-card--bed .fprod-card__img{object-position:72% 45%;}
.fprod-card--furn .fprod-card__img{object-position:24% 50%;}
.fprod-card--beds .fprod-card__img{object-position:50% 42%;}
.fprod-card__name{
  font-size:25px;line-height:1.08;letter-spacing:-.01em;
  color:var(--ink);font-weight:600;margin:0 0 8px;transition:color .3s ease;
}
.fprod-card__desc{font-size:14px;line-height:1.45;letter-spacing:.01em;color:var(--text);font-weight:500;margin:0;}
.fprod-card__price{font-size:14px;letter-spacing:.01em;color:var(--text);font-weight:500;margin:0;}
.fprod-card__price b{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#736e60;font-weight:600;margin-right:5px;
}
.fprod-card:hover .fprod-card__img{transform:scale(1.05);}
.fprod-card:hover .fprod-card__view{opacity:1;transform:translateY(0);}
.fprod-card:hover .fprod-card__name{color:var(--forest);}
.fprod-card:focus-visible .fprod-card__frame{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--forest2);}
@media (max-width:980px){
  .fprod-ed{padding:64px 28px 72px;}
  .fprod-ed__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;}
  .fprod-ed__title{font-size:40px;}
}
@media (max-width:768px){
  .fprod-ed__head{flex-direction:column;align-items:flex-start;gap:24px;}
  /* Stays 2-up, unlike the 3 product cards this section replaced. Four
     full-width squares ran 2,251px at 375px -- about three screens of
     scrolling for what is navigation. 2-up brings it back to ~900px.
     Type steps down so "Living Room Furniture" still fits a ~160px card. */
  .fprod-ed__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;}
  .fprod-card__frame{border-radius:14px;margin-bottom:14px;}
  .fprod-card__cat{font-size:10px;letter-spacing:.16em;gap:7px;margin-bottom:9px;padding-bottom:9px;}
  .fprod-card__name{font-size:18px;margin-bottom:5px;}
  .fprod-card__desc{font-size:12.5px;line-height:1.4;}
  .fprod-card__view{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fprod-ed *{transition:none!important;}
  .fprod-card__view{opacity:1;transform:none;}
  .fprod-card:hover .fprod-card__img{transform:none;}
}
.fprod-ed img{border-radius:12px !important;}


/* ============================================================
   Serenity spotlight "Strata" — CREAM band (breaks the white run after
   Featured Products), framed product image with a 01 Soft/02 Medium/03 Firm
   layers overlay (the customizable-layers story) + a 2-col color-coded
   seal-disc feature grid + forest CTA. Replaces the dated radial-callout
   (twins 426f1877 desktop + 5106340b mobile). FA icons sized/colored on the
   disc CONTAINER (i->svg swap), see memory.
   ============================================================ */
.sren-strata{--p:#9660a2;--p2:#7e4f8a;--forest:#34512c;--forest2:#496b3d;--sage:#9fc28e;--teal:#678e96;--text:#4B4F58;--ink:#243017;--cream:#f7f4ec;--cream2:#f5f2ea;--lav:#f0e8f3;--white:#fff;background:#e9dfcd;font-family:"Cabinet Grotesk",system-ui,-apple-system,sans-serif;color:var(--text);padding:clamp(2.75rem,6vw,5rem) clamp(1.25rem,5vw,3.5rem);box-sizing:border-box}
.sren-strata *,.sren-strata *::before,.sren-strata *::after{box-sizing:border-box}
.sren-strata__inner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center;max-width:1180px;margin:0 auto}
.sren-strata__media{position:relative;min-width:0}
.sren-strata__frame{margin:0;border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 20px 54px -24px rgba(36,48,23,.45)}
.sren-strata__frame img{display:block;width:100%;height:auto;aspect-ratio:4/3.2;object-fit:cover}
.sren-strata__badge{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 13px;border-radius:999px;
  background:var(--p2);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 26px -12px rgba(36,48,23,.7);
}
/* FA7 swaps <i> to <svg>, so icon size/colour must sit on this container, not
   the <i> -- see the kit gotcha note on the cert band. */
.sren-strata__badge .fa-duotone{font-size:.85rem;--fa-primary-color:#fff;--fa-secondary-color:#fff;--fa-secondary-opacity:.55}
/* Trust marks. White chips rather than bare logos on the cream: the UL
   GREENGUARD asset is a JPEG with a white ground, so a chip makes that
   deliberate instead of a stray white rectangle, and GOTS (transparent PNG)
   matches it. Both render ~3x their display height, so they stay crisp. */
.sren-strata__certs{display:flex;align-items:center;gap:14px;margin:0 0 2rem;flex-wrap:wrap}
/* Fixed width, not padding-driven: GOTS is square and GREENGUARD is 112x150,
   so at a shared logo height the chips came out 94px and 79px wide. A set
   width makes the pair read as one system instead of two odd sizes.
   Sized to hold the GOTS licence line (Liz, 2026-09-15): "Certified by Control
   Union" measures 119px at 10.5px, so 150px is the narrowest chip that keeps it
   on one line. Both chips grow together for the same reason as above -- the
   GREENGUARD mark simply gets more air. Same lockup as .srcert__tile on the
   certifications band, at the smaller scale this column allows. */
.sren-strata__cert{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  height:150px;width:168px;padding:13px 12px;
  background:var(--white);border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(36,48,23,.07),0 8px 20px -14px rgba(36,48,23,.45);
}
.sren-strata__cert img{display:block;height:72px;width:auto}

/* Same lockup exception as .srcert__logo--lockup: the approved GOTS file
   carries its own licence line, so it needs the height that keeps that line
   readable. Both chips grew to 150x168 so the pair still reads as one system. */
.sren-strata__cert--lockup img{height:120px}
.sren-strata__cert-scope{
  display:block;margin:0;
  font-size:10.5px;line-height:1.3;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:center;
}
.sren-strata__eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 1rem;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--p2)}
.sren-strata__eyebrow .fa-duotone{font-size:.95rem;--fa-primary-color:var(--p2);--fa-secondary-color:var(--p);--fa-secondary-opacity:.32}
.sren-strata__h2{margin:0;font-size:clamp(2.7rem,6.5vw,4.25rem);font-weight:700;letter-spacing:-.02em;line-height:.95;color:var(--ink)}
.sren-strata__sub{margin:.55rem 0 2rem;font-size:clamp(1.05rem,2.3vw,1.35rem);font-weight:500;color:var(--text)}
.sren-strata__grid{list-style:none;margin:0 0 2.15rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}
/* Guard for an odd bullet count, which would otherwise strand the last item
   beside an empty cell at every width above 520px. Inert at the current six
   (it was load-bearing at five, before "Greenguard Gold certified"). */
.sren-strata__grid > li:last-child:nth-child(odd){grid-column:1 / -1}
.sren-strata__feat{display:flex;align-items:center;gap:13px;min-width:0}
.sren-strata__seal{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;box-shadow:inset 0 0 0 1px rgba(36,48,23,.06)}
.sren-strata__seal--purple{background:var(--lav);--fa-primary-color:var(--p2);--fa-secondary-color:var(--p);--fa-secondary-opacity:.3}
.sren-strata__seal--forest{background:#e7efe1;--fa-primary-color:var(--forest);--fa-secondary-color:var(--forest2);--fa-secondary-opacity:.3}
.sren-strata__seal--teal{background:#e0ecee;--fa-primary-color:#42606a;--fa-secondary-color:var(--teal);--fa-secondary-opacity:.32}
.sren-strata__seal--sage{background:#eaf1e4;--fa-primary-color:var(--forest2);--fa-secondary-color:var(--sage);--fa-secondary-opacity:.45}
.sren-strata__label{font-size:.97rem;font-weight:500;line-height:1.3;color:var(--ink)}
.sren-strata__cta{display:inline-flex;align-items:center;gap:10px;background:var(--forest);color:#fff;text-decoration:none;font-size:1rem;font-weight:600;letter-spacing:.01em;padding:15px 30px;border-radius:14px;transition:background .25s ease,transform .25s ease}
.sren-strata__cta .fa-duotone{--fa-primary-color:#fff;--fa-secondary-color:#fff;--fa-secondary-opacity:.5;transition:transform .25s ease}
.sren-strata__cta:hover{background:var(--forest2);transform:translateY(-2px)}
.sren-strata__cta:hover .fa-duotone{transform:translateX(4px)}
.sren-strata__cta:focus-visible{outline:3px solid var(--p2);outline-offset:3px}
@media (max-width:860px){.sren-strata__inner{grid-template-columns:1fr;gap:2.25rem}}
@media (max-width:520px){.sren-strata__grid{grid-template-columns:1fr}.sren-strata__cert{height:132px;width:150px;padding:11px 10px;gap:6px}.sren-strata__cert img{height:63px}.sren-strata__cert--lockup img{height:104px}.sren-strata__cert-scope{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.sren-strata__cta,.sren-strata__cta .fa-duotone{transition:none}.sren-strata__cta:hover{transform:none}}

/* ===== CTA hover/focus color fix (2026-06-28) =====
   Astra dynamic CSS sets `a:hover, a:focus { color:<blue accent> }` at
   specificity (0,1,1). Our CTA :hover rules either omit color or tie at
   (0,1,1) and lose on source order, so green buttons flashed blue text on
   hover. Scope under the section class -> (0,3,0) to win, and declare the
   intended color on hover/focus/active explicitly. */
.sren-strata .sren-strata__cta:hover,
.sren-strata .sren-strata__cta:focus,
.sren-strata .sren-strata__cta:active{color:#fff;}


/* ============================================================
   Organic Sofas / Loveseats / Armchairs -> "Free-From Forest"
   (2026-06-28, frontend-design workflow winner: 2/3 judges)
   Full-bleed deep-forest band; free-from chip cluster signature.
   ============================================================ */
.freefrom-sr9x4{width:100%;box-sizing:border-box;background:#34512c;background-image:radial-gradient(120% 90% at 88% 8%, #3c5a32 0%, #34512c 55%, #2c451f 100%);color:#f5f2ea;font-family:"Cabinet Grotesk",system-ui,-apple-system,sans-serif;padding:clamp(3.25rem,7vw,6rem) clamp(1.15rem,5vw,3rem);overflow:hidden}
.freefrom-sr9x4 *{box-sizing:border-box}
.freefrom-sr9x4__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.02fr 0.98fr;gap:clamp(2rem,4.4vw,4rem);align-items:center}
.freefrom-sr9x4__eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#d4e6c2;margin:0 0 1rem}
.freefrom-sr9x4__heading{font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.06;letter-spacing:-.018em;font-weight:600;color:#f7f4ec;margin:0 0 1.15rem;text-wrap:balance}
.freefrom-sr9x4__body{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.62;color:#e9efe2;max-width:35rem;margin:0 0 1.9rem}
/* justify-content:center so an odd trailing chip reads as centred rather than
   stranded. The row went 7 -> 6 chips when the inaccurate "No plywood" came out,
   which left "No down" alone on its own row at ~900px. */
.freefrom-sr9x4__chips{background:rgba(247,244,236,.055);border:1px solid rgba(159,194,142,.3);border-radius:18px;padding:1.05rem 1.1rem 1.15rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:0 0 1.9rem}
.freefrom-sr9x4__chips-lead{flex:0 0 100%;display:flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d4e6c2;margin:0 0 .25rem}
.freefrom-sr9x4__chips-lead i{font-size:1rem;--fa-primary-color:#d4e6c2;--fa-secondary-color:#d4e6c2;--fa-secondary-opacity:.45}
.freefrom-sr9x4__chip{display:inline-flex;align-items:center;gap:.42rem;background:#f5f2ea;color:#243017;font-size:.86rem;font-weight:500;letter-spacing:-.005em;padding:.46rem .78rem;border-radius:999px;line-height:1;white-space:nowrap}
/* Tablet range: greedy flex wrapping packs 5 chips on the first row and leaves
   the 6th alone. A 3-column grid keeps it an even 3+3. Columns are `auto` so the
   chips stay content-sized pills rather than stretching. */
@media (min-width:521px) and (max-width:1100px){
 .freefrom-sr9x4__chips{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:center;gap:.55rem}
 .freefrom-sr9x4__chips-lead{grid-column:1 / -1}
}
.freefrom-sr9x4__chip i{font-size:.92rem;line-height:1;--fa-primary-color:#7e4f8a;--fa-secondary-color:#9660a2;--fa-secondary-opacity:.28}
.freefrom-sr9x4__materials{list-style:none;margin:0 0 2.1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.1rem}
.freefrom-sr9x4__material{display:flex;align-items:center;gap:.7rem;min-width:0}
.freefrom-sr9x4__maticon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.18rem;background:#f5f2ea;border:1px solid rgba(159,194,142,.5);box-shadow:0 5px 12px -7px rgba(15,28,11,.7)}
.freefrom-sr9x4__maticon--wood{--fa-primary-color:#34512c;--fa-secondary-color:#9fc28e;--fa-secondary-opacity:.55}
.freefrom-sr9x4__maticon--fabric{--fa-primary-color:#496b3d;--fa-secondary-color:#9fc28e;--fa-secondary-opacity:.55}
.freefrom-sr9x4__maticon--latex{--fa-primary-color:#7e4f8a;--fa-secondary-color:#9660a2;--fa-secondary-opacity:.45}
.freefrom-sr9x4__maticon--finish{--fa-primary-color:#4f6e75;--fa-secondary-color:#678e96;--fa-secondary-opacity:.5}
.freefrom-sr9x4__mattext{font-size:.96rem;font-weight:500;color:#f1f4ec;line-height:1.25}
.freefrom-sr9x4__cta{display:inline-flex;align-items:center;gap:.6rem;background:#9fc28e;color:#243017;font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:.005em;text-decoration:none;padding:.92rem 1.6rem;border-radius:14px;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.freefrom-sr9x4__cta i{font-size:.95rem;--fa-primary-color:#243017;--fa-secondary-color:#243017;--fa-secondary-opacity:.4;transition:transform .2s ease}
.freefrom-sr9x4__cta:hover{background:#b3d2a3;transform:translateY(-2px)}
.freefrom-sr9x4__cta:hover i{transform:translateX(3px)}
.freefrom-sr9x4__cta:focus-visible{outline:3px solid #f0e8f3;outline-offset:3px;box-shadow:0 0 0 6px rgba(150,96,162,.55)}
.freefrom-sr9x4__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.4vw,1rem)}
.freefrom-sr9x4__shot{margin:0;border-radius:16px;overflow:hidden;background:rgba(247,244,236,.06);box-shadow:0 18px 40px -22px rgba(15,30,12,.7),0 2px 8px -3px rgba(15,30,12,.5)}
.freefrom-sr9x4__shot:nth-child(odd){transform:translateY(-.85rem)}
.freefrom-sr9x4__shot:nth-child(even){transform:translateY(.85rem)}
.freefrom-sr9x4__shot img{display:block;width:100%;height:100%;aspect-ratio:560/538;object-fit:cover}
@media (max-width:900px){
 .freefrom-sr9x4__inner{grid-template-columns:1fr;gap:clamp(2.1rem,6vw,3rem)}
 .freefrom-sr9x4__gallery{order:-1}
 .freefrom-sr9x4__body{max-width:none}
}
@media (max-width:520px){
 .freefrom-sr9x4__materials{grid-template-columns:1fr}
 .freefrom-sr9x4__chip{font-size:.82rem}
 .freefrom-sr9x4__cta{width:100%;justify-content:center}
 .freefrom-sr9x4__shot:nth-child(odd),.freefrom-sr9x4__shot:nth-child(even){transform:none}
}
@media (prefers-reduced-motion:reduce){
 .freefrom-sr9x4__cta,.freefrom-sr9x4__cta i{transition:none}
 .freefrom-sr9x4__cta:hover{transform:none}
 .freefrom-sr9x4__cta:hover i{transform:none}
 .freefrom-sr9x4__shot:nth-child(odd),.freefrom-sr9x4__shot:nth-child(even){transform:none}
}
/* CTA hover/focus color fix: keep ink text on hover (beat Astra a:hover) */
.freefrom-sr9x4 .freefrom-sr9x4__cta:hover,.freefrom-sr9x4 .freefrom-sr9x4__cta:focus,.freefrom-sr9x4 .freefrom-sr9x4__cta:active{color:#243017;}


/* ============================================================
   Reviews / testimonials -> "Praise Wall"
   (2026-06-28, frontend-design workflow; bold/distinctive pick)
   Static no-JS social-proof wall: deep-purple featured pull-quote
   + 2x2 supporting review cards on a lavender band. Replaces the
   single-review swiper carousel. Lavender = purple counterpoint to
   the forest sofas band above.
   ============================================================ */
.praise-lv7k2{width:100%;box-sizing:border-box;background:#f0e8f3;background-image:radial-gradient(125% 85% at 12% 0%, #f4ecf6 0%, #f0e8f3 52%, #ece1f0 100%);color:#4B4F58;font-family:"Cabinet Grotesk",system-ui,-apple-system,sans-serif;padding:clamp(3.25rem,7vw,6rem) clamp(1.15rem,5vw,3rem);overflow:hidden}
.praise-lv7k2 *{box-sizing:border-box}
.praise-lv7k2__inner{max-width:1180px;margin:0 auto}
.praise-lv7k2__head{max-width:46rem;margin:0 0 clamp(2.1rem,4vw,3rem)}
.praise-lv7k2__eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7e4f8a;margin:0 0 .9rem}
.praise-lv7k2__heading{font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.06;letter-spacing:-.018em;font-weight:600;color:#3a3f48;margin:0 0 1rem;text-wrap:balance}
.praise-lv7k2__sub{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;color:#4B4F58;margin:0;max-width:38rem;text-wrap:pretty}
/* Rows hug their own content. `grid-auto-rows:1fr` forced every row to the
   height of the tallest thing in the grid -- the 2-row featured quote -- so a
   26-word card sat in a 548px box. */
.praise-lv7k2__grid{display:grid;grid-template-columns:1.18fr 1fr 1fr;grid-auto-rows:auto;align-items:start;gap:clamp(1rem,1.9vw,1.5rem)}
.praise-lv7k2__stars{display:inline-flex;gap:.18em;font-size:1.02rem;line-height:1;margin:0 0 1rem;--fa-primary-color:#e8a33d;--fa-secondary-color:#e8a33d;--fa-secondary-opacity:1}
/* One row now: the section shows three reviews, so the feature sits beside two
   cards instead of spanning a 2x2 block. */
.praise-lv7k2__feature{position:relative;display:flex;flex-direction:column;margin:0;background:#7e4f8a;background-image:radial-gradient(130% 110% at 85% 0%, #9660a2 0%, #7e4f8a 58%, #6c4278 100%);color:#f7f4ec;border-radius:18px;padding:clamp(1.8rem,2.6vw,2.6rem);overflow:hidden;box-shadow:0 26px 52px -28px rgba(86,46,98,.7),0 4px 14px -8px rgba(86,46,98,.45)}
.praise-lv7k2__seal{position:absolute;top:clamp(1.4rem,2.2vw,2.1rem);right:clamp(1.4rem,2.2vw,2.1rem);width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(247,244,236,.12);border:1.5px solid rgba(159,194,142,.55);font-size:1.45rem;--fa-primary-color:#9fc28e;--fa-secondary-color:#f0e8f3;--fa-secondary-opacity:.35}
.praise-lv7k2__feature .praise-lv7k2__stars{--fa-primary-color:#f4c878;--fa-secondary-color:#f4c878;font-size:1.12rem}
.praise-lv7k2__ftitle{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:#fff;margin:0 0 1rem;max-width:18ch}
.praise-lv7k2__fquote{margin:0 0 1.6rem;flex:1 1 auto}
.praise-lv7k2__fquote p{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.55;letter-spacing:-.012em;font-weight:500;color:#f7f4ec;margin:0;text-wrap:pretty}
.praise-lv7k2__attr{display:flex;align-items:center;gap:.85rem;margin:0;padding-top:1.3rem;border-top:1px solid rgba(247,244,236,.22)}
.praise-lv7k2__avatar{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(247,244,236,.12);border:1px solid rgba(247,244,236,.2);font-size:1.18rem;--fa-primary-color:#9fc28e;--fa-secondary-color:#9fc28e;--fa-secondary-opacity:.4}
.praise-lv7k2__attrtext{display:flex;flex-direction:column;font-size:.96rem;font-weight:600;color:#fff;line-height:1.25}
.praise-lv7k2__attrmeta{font-size:.82rem;font-weight:400;letter-spacing:.005em;color:#f0e8f3}
.praise-lv7k2__card{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid rgba(126,79,138,.12);border-radius:16px;padding:clamp(1.4rem,2vw,1.85rem);box-shadow:0 16px 34px -26px rgba(86,46,98,.45),0 2px 6px -4px rgba(86,46,98,.25)}
.praise-lv7k2__ctitle{font-size:1.06rem;font-weight:600;letter-spacing:-.008em;line-height:1.25;color:#34512c;margin:0 0 .65rem}
.praise-lv7k2__cquote{margin:0 0 1.15rem}
.praise-lv7k2__cquote p{font-size:.97rem;line-height:1.58;color:#4B4F58;margin:0;text-wrap:pretty}
.praise-lv7k2__cattr{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#7e4f8a;margin:0;padding-top:1rem;border-top:1px solid rgba(126,79,138,.13)}
.praise-lv7k2__cattr::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#678e96}
.praise-lv7k2 a:focus-visible,.praise-lv7k2 [tabindex]:focus-visible{outline:3px solid #7e4f8a;outline-offset:3px;border-radius:16px}
@media (max-width:920px){
 .praise-lv7k2__grid{grid-template-columns:1fr 1fr}
 .praise-lv7k2__feature{grid-row:auto;grid-column:1 / -1}
}
@media (max-width:600px){
 .praise-lv7k2__grid{grid-template-columns:1fr}
 .praise-lv7k2__feature{grid-column:auto}
 .praise-lv7k2__seal{width:48px;height:48px;font-size:1.25rem}
 .praise-lv7k2__ftitle{max-width:none}
}
@media (prefers-reduced-motion:reduce){
 .praise-lv7k2 *{transition:none!important;animation:none!important}
}


/* ============================================================
   Natural Bedroom Furniture -> "Heirloom Finish Library"
   (2026-06-28, frontend-design workflow; overall winner 260,
   distinctiveness judge #1). Warm-oat band; framed bed + tree-ring
   'built for generations' seal + CSS-:has() finish-swatch picker
   that live-tints the bed (zero JS). Replaces the flat image+text
   platform-beds twins.
   ============================================================ */
.nbf-heirloom{
  --nbf-oat:#efe7d7;
  --nbf-oat-deep:#e7dcc9;
  --nbf-sand:#f4eee2;
  --nbf-card:#fbf8f1;
  --nbf-line:#d8c9ad;
  --nbf-ink:#243017;
  --nbf-text:#4B4F58;
  --nbf-wood:#6f5436;
  --nbf-forest:#34512c;
  --nbf-purple:#9660a2;
  --nbf-purple-deep:#7e4f8a;
  position:relative;
  width:100%;
  background:
    radial-gradient(120% 90% at 12% 0%, #f3ecde 0%, rgba(243,236,222,0) 55%),
    linear-gradient(165deg, var(--nbf-oat) 0%, var(--nbf-oat-deep) 100%);
  color:var(--nbf-text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.nbf-heirloom *{box-sizing:border-box}
.nbf-heirloom::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(111,84,54,0) 0px,
    rgba(111,84,54,0) 46px,
    rgba(111,84,54,.05) 47px,
    rgba(111,84,54,0) 49px,
    rgba(111,84,54,0) 92px);
}
.nbf-heirloom__inner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  padding:clamp(56px,8vw,108px) clamp(20px,5vw,64px);
}

.nbf-eyebrow{
  display:inline-flex;align-items:center;
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
  color:var(--nbf-forest);margin:0 0 clamp(26px,3.4vw,40px);
}
.nbf-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px);
  align-items:center;
}

.nbf-figure{position:relative;align-self:start}
.nbf-frame{
  position:relative;
  padding:14px;
  background:var(--nbf-sand);
  border:1px solid var(--nbf-line);
  border-radius:18px;
  box-shadow:0 22px 50px -28px rgba(60,42,20,.55);
}
.nbf-frame::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(111,84,54,.28);
  border-radius:13px;pointer-events:none;
}
.nbf-portrait{
  position:relative;margin:0;overflow:hidden;border-radius:12px;
  aspect-ratio:1184/1140;background:var(--nbf-oat-deep);
}
.nbf-portrait img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* finish image-overlay removed: finishes are a static display, no per-finish image swap */

.nbf-seal{
  position:absolute;right:-18px;bottom:-18px;z-index:3;
  width:118px;height:118px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--nbf-forest);color:#f3efe4;
  box-shadow:0 16px 34px -14px rgba(20,32,15,.7);
  border:3px solid var(--nbf-sand);
}
/* Stamp lockup: a letterspaced uppercase kicker over the word that carries the
   message, echoing the eyebrow/heading pairing used across the page. The old
   12px/13px pair had almost no hierarchy and read as small print inside a
   118px disc, which the concentric rings had been distracting from. */
.nbf-seal__txt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0 8px;line-height:1;
  font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#c9d6ba;
}
.nbf-seal__txt b{
  font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1;color:#fbf8f0;
}


.nbf-h2{
  margin:0 0 16px;
  font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.6px;
  color:var(--nbf-ink);
}
.nbf-lede{
  margin:0 0 clamp(24px,3vw,30px);
  font-size:clamp(15.5px,1.7vw,17px);line-height:1.62;color:var(--nbf-text);max-width:48ch;
}

.nbf-finishes{
  border:0;margin:0 0 clamp(22px,2.6vw,28px);padding:0;
}
.nbf-finishes__legend{
  display:flex;align-items:center;gap:9px;padding:0;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--nbf-forest);
}
.nbf-finishes__legend i{font-size:16px;--fa-primary-color:var(--nbf-forest);--fa-secondary-color:var(--nbf-purple);--fa-secondary-opacity:.45}
.nbf-finishes__sub{margin:6px 0 16px;font-size:13.5px;line-height:1.5;color:var(--nbf-text)}

/* static finish display: non-interactive swatch strip (no per-finish image swap) */
/* Five swatches, one row. At 84px each plus a 20px gap they overflowed the
   body column and wrapped 4 + 1, stranding Unfinished on its own line --
   only visible once the badge row below it was removed. A 5-track grid
   keeps them even; below 560px they fall to three across. */
.nbf-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 10px;max-width:460px}
.nbf-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.nbf-swatch__chip{
  width:48px;height:48px;flex:none;border-radius:12px;
  border:1px solid rgba(111,84,54,.4);position:relative;overflow:hidden;
  box-shadow:0 6px 14px -8px rgba(60,42,20,.55);
}
.nbf-swatch__chip::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(96deg,
    rgba(80,56,28,.16) 0 1px,
    rgba(80,56,28,0) 1px 5px,
    rgba(80,56,28,.10) 5px 6px,
    rgba(80,56,28,0) 6px 11px);
}
.nbf-swatch--cedar .nbf-swatch__chip{background:linear-gradient(150deg,#c58a55,#a76a3a)}
.nbf-swatch--linseed .nbf-swatch__chip{background:linear-gradient(150deg,#bf9152,#9a6f37)}
.nbf-swatch--mahogany .nbf-swatch__chip{background:linear-gradient(150deg,#854434,#5f2f23)}
.nbf-swatch--unfinished .nbf-swatch__chip{background:linear-gradient(150deg,#e3cda2,#c7ab7c)}
.nbf-swatch--walnut .nbf-swatch__chip{background:linear-gradient(150deg,#5a4231,#3c2a1d)}
.nbf-swatch__name{font-size:12.5px;font-weight:600;color:var(--nbf-ink);line-height:1.2}


.nbf-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nbf-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--nbf-purple);color:#fff;text-decoration:none;
  font-size:15.5px;font-weight:700;letter-spacing:.2px;
  padding:15px 30px;border-radius:12px;border:1.5px solid transparent;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow:0 14px 30px -16px rgba(126,79,138,.8);
}
.nbf-btn i{font-size:15px;--fa-primary-color:#fff;--fa-secondary-color:#fff;--fa-secondary-opacity:.55;transition:transform .15s ease}
.nbf-btn:hover{background:var(--nbf-purple-deep);transform:translateY(-2px)}
.nbf-btn:hover i{transform:translateX(3px)}
.nbf-btn:focus-visible{outline:3px solid var(--nbf-forest);outline-offset:3px}

@media (max-width:880px){
  .nbf-grid{grid-template-columns:1fr;gap:clamp(40px,8vw,56px)}
  .nbf-figure{max-width:520px;margin:0 auto}
}
@media (max-width:560px){
  .nbf-swatches{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .nbf-seal{width:96px;height:96px;right:-8px;bottom:-12px}
  .nbf-seal__txt{font-size:8.5px;gap:4px}
  .nbf-seal__txt b{font-size:16px}
  .nbf-cta-row{gap:12px}
  .nbf-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .nbf-portrait__finish,.nbf-swatch,.nbf-swatch__tick,.nbf-btn,.nbf-btn i{transition:none}
  .nbf-btn:hover{transform:none}
  .nbf-btn:hover i{transform:none}
}
/* CTA hover/focus color fix: keep white text on hover (beat Astra a:hover) */
.nbf-heirloom .nbf-btn:hover,.nbf-heirloom .nbf-btn:focus,.nbf-heirloom .nbf-btn:active{color:#fff;}


/* ============================================================
   Closing brand purpose band -> "...because inspired, rested
   people change the world." (2026-06-28). Replaces the giant
   faint background-text-two heading (7465f592) that caused the
   page horizontal overflow. Deep-purple finale (brand primary)
   bookending the page before the white footer; no overflow.
   ============================================================ */
.sr-purpose{
  box-sizing:border-box;width:100%;margin:0;text-align:center;overflow:hidden;
  padding:clamp(3.75rem,8vw,7rem) clamp(1.25rem,5vw,3rem);
  background:radial-gradient(125% 130% at 50% 0%, #7e4f8a 0%, #714681 48%, #5f3a6f 100%);
  color:#fbf6fc;
  font-family:"Cabinet Grotesk",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sr-purpose *{box-sizing:border-box;}
.sr-purpose__inner{
  max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.05rem,2.4vw,1.55rem);
}
.sr-purpose__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:rgba(247,244,236,.10);border:1px solid rgba(207,180,217,.55);
  font-size:1.7rem;line-height:1;
  --fa-primary-color:#ecdcf2;--fa-secondary-color:#9fc28e;--fa-secondary-opacity:.85;
}
.sr-purpose__eyebrow{
  margin:0;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#f2e9f7;
}
.sr-purpose__line{
  margin:0;color:#fbf6fc;
  font-size:clamp(1.7rem,4.4vw,3.05rem);font-weight:600;line-height:1.16;letter-spacing:-.015em;
  text-wrap:balance;max-width:20ch;
}


/* ===========================================================================
   CERTIFICATIONS BAND -- 2026-08-20
   Rebuilds the certifications content removed with .sr-emblem-promise on
   2026-08-12, in the third of the three comps Liz and JHS both picked.

   Each mark sits on a WHITE tile over the cream band. That is load-bearing,
   not decoration: the library's GOTS, Greenguard, ESOP and B Corp artwork is
   all dark-on-transparent, which is why these seals could not be placed on the
   old dark-green panel without reversed SVGs nobody had. A white tile makes the
   existing artwork correct as-is.

   Every card carries a scope line under its body. Liz asked for GOTS to name
   facilities AND products, and JHS asked for Greenguard Gold to be specific
   about what it actually tests; a scope line answers both without making those
   two cards structurally different from the other two.
   =========================================================================== */
.srcert{
  /* Line counts are measured, not guessed: they are the wrap height of the
     Greenguard card (the longest body) at each column width. Too high only
     adds a little uniform whitespace; too low breaks the rule alignment. */
  --ink:#243017;--forest:#34512c;--forest2:#496b3d;--purple:#7e4f8a;
  --text:#4B4F58;--muted:#6b6f66;--cream:#f7f4ec;--hair:#e3ddd0;
  box-sizing:border-box;width:100%;
  background:var(--cream);
  padding:clamp(3rem,6vw,5.25rem) clamp(1.15rem,5vw,2.5rem);
  font-family:'Cabinet Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--text);
}
.srcert *{box-sizing:border-box;}
.srcert__inner{max-width:1200px;margin:0 auto;}

.srcert__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.srcert__eyebrow{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--forest2);
}
.srcert__all{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;color:var(--forest);text-decoration:none;
  white-space:nowrap;padding-bottom:3px;
  border-bottom:1.5px solid var(--forest);
  transition:gap .3s ease,color .3s ease;
}
.srcert__all:hover,.srcert__all:focus-visible{gap:14px;color:var(--purple);border-bottom-color:var(--purple);}
.srcert__all-ico{font-size:.85em;}

.srcert__intro{
  margin:18px 0 0;max-width:68ch;
  font-size:clamp(1rem,1.5vw,1.075rem);line-height:1.6;color:var(--text);
  text-wrap:pretty;
}

.srcert__grid{
  /* auto-fit: drop a card (e.g. B Corp some day) and the row reflows, no CSS edit. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(1.25rem,2.5vw,2.25rem);
  margin-top:clamp(2.25rem,4vw,3rem);
}
/* Tile, name, body, scope: four auto rows, top-aligned. */
.srcert__card{
  display:grid;grid-template-rows:auto auto auto auto;
  align-content:start;
  justify-items:center;text-align:center;
}

.srcert__tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:190px;height:176px;
  background:#fff;border:1px solid var(--hair);border-radius:14px;
  box-shadow:0 1px 2px rgba(36,48,23,.04);
  padding:15px 12px;
}
/* Sized to the GOTS DISC, not the GOTS lockup: that artwork is 60.4% disc and
   39.6% licence text, so a mark matching the lockup's full 140px would tower
   over the disc beside it. 140 x 0.604 = 85 is the size the eye compares. */
.srcert__logo{
  display:block;width:auto;height:auto;
  max-height:84px;max-width:100%;
  object-fit:contain;
}

/* A LOCKUP is artwork that already contains its own certifier line and licence
   number, the way the approved GOTS file does ('organic' / Certified by Control
   Union / CU #846965 are part of the image, not type we set next to it). JHS
   requires that exact file, and its text block is about 40% of the artwork's
   height: at the 52px a plain mark uses, the CU line lands near 4px and cannot
   be read. So a lockup gets its own height and .srcert__tile above grew from
   134px to 176px to hold it. The approved GOTS artwork is 147x140, so 140px is
   also where it stops upscaling. Editors tick "Logo already includes the
   certifier text" on the card; untouched cards keep the 52px mark size. */
.srcert__logo--lockup{max-height:140px;}

.srcert__name{
  margin:18px 0 0;
  font-size:clamp(1rem,1.5vw,1.09rem);font-weight:700;line-height:1.25;
  color:var(--ink);letter-spacing:-.005em;
}
.srcert__body{
  margin:9px 0 0;
  font-size:.9rem;line-height:1.5;color:var(--muted);
  text-wrap:pretty;
}
/* Licence / scope detail, set INSIDE the white tile directly under the mark so the
   two read as one certification lockup, the way the printed seal does, rather than
   as a caption orphaned below the description. On white it can take a much darker
   ink than the body copy: var(--text) is 8.2:1 here against 5.1:1 for --muted. */
.srcert__scope{
  display:block;margin:0;
  font-size:10.5px;line-height:1.3;color:var(--text);
  font-variant-numeric:tabular-nums;
  text-align:center;text-wrap:pretty;
}

.srcert a:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px;}

/* Two-up below the desktop grid, matching the Featured Products treatment. */
@media (max-width:900px){
  .srcert__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .srcert__head{gap:14px;}
  .srcert__grid{gap:1.75rem 1.15rem;}
  .srcert__tile{height:156px;padding:12px 10px;gap:6px;}
  .srcert__logo{max-height:71px;}
  .srcert__logo--lockup{max-height:118px;}
  .srcert__name{font-size:1rem;}
  .srcert__body{font-size:.86rem;}
  .srcert__scope{font-size:9.5px;}
}