/*
Theme Name: Black Belt Wellness
Description: Custom one-page theme for Black Belt Wellness & Massage Therapy. Miami sunset palette, real modalities, real client testimonial. Content lives in front-page.php on purpose — this is a from-scratch build, not a page-builder theme.
Author: Todd
Version: 1.0.0
*/

/* Miami sunset on warm sand. Single committed visual world — a brand page should
   not recolour with the viewer's OS — so every value is explicit, no inversion. */
:root{
  --sand:#FDF8F1; --sand-2:#F6EDE1; --shell:#FFFFFF;
  --ink:#141118; --ink-2:#3A3340; --stone:#948578; --hair:rgba(20,17,24,.14);
  --red:#C8322A; --sunset:#FF7A4D; --pink:#F2568F; --teal:#10A9A2; --dusk:#5B3A8C;

  /* Miami Art Deco pastels — South Beach, not warm-sand-and-a-hairline-of-
     accent. These are large-surface colors (section backgrounds, cards,
     dividers), not trim: the site should read as colorful from a scroll-past
     glance, not from close inspection. The saturated set above stays for
     text, numerals and buttons, where it needs to punch through a pastel
     field rather than compete with another pastel. */
  --pastel-mint:#C7EDE0; --pastel-sky:#C9E6F2; --pastel-lilac:#E3D3EF;
  --pastel-peach:#FBDCC0; --pastel-butter:#FBEBAE; --pastel-pink:#F8D2DE;
  --gold:#C9A227;

  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --ui:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --pad:clamp(1.15rem,4vw,3.5rem);
  --deco-num:"Fascinate Inline","Fascinate","Barlow Condensed",sans-serif; /* real 1920s-style geometric deco numerals, not just a bold sans */

  /* Control tokens — every button, link-button, carousel arrow/dot and FAQ
     toggle reads from these instead of its own numbers, so "make buttons
     bigger" or "slow down hovers" is a one-line change here, not a hunt
     through the file. */
  --control-font:var(--ui);
  --control-weight:700;
  --control-tracking:.13em;
  --control-pad-y:.9rem;
  --control-pad-x:1.9rem;
  --control-border:2px;
  --control-radius:999px;   /* pill — see the TEVA-style note on .cta below */
  --control-shadow:0 10px 24px -8px rgba(20,17,24,.35);
  --control-icon:38px;
  --control-dot:8px;
  --ease-fast:.15s ease;   /* hover/focus state changes on controls — matches TEVA's CTA lift timing */
  --ease-fade:.8s ease;    /* carousel crossfade, hero video reveal (hero uses 1.4s, its own thing) */

  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:var(--red)}
:focus-visible{outline:2px solid var(--dusk);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:-.004em;margin:0;text-wrap:balance}
p{max-width:62ch}
.kicker{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin:0}
.belt{display:flex;gap:4px;height:10px;width:118px}
.belt i{flex:1}
.belt i:nth-child(1){background:var(--red)}
.belt i:nth-child(2){background:var(--sunset)}
.belt i:nth-child(3){background:var(--pink)}

/* Art Deco divider — a stepped/ziggurat edge into a solid accent-color band
   at each section handoff (see front-page.php), with a gold seam centered
   in the solid fill BETWEEN the two chevron rows — teeth at the outer top
   and bottom edges (registering into whatever pastel sits on each side),
   a clean run of solid accent color carrying the gold, no teeth competing
   with it for the eye. Flat and geometric throughout — no gilding on the
   chevrons themselves, no sunburst, no marquee ("not a 1945 movie theater").
   Pure CSS gradients, no image, except the gold strip's own shine gradient. */
.deco-seam{position:relative;height:84px;background:var(--seam-mid,var(--red));overflow:hidden}
/* The tooth fill (the two var(--zc) gradients) is UNTOUCHED — that
   silhouette is approved, don't reshape it.
   The pinstripe is a true parallel offset of the FULL closed fill outline
   — including the flat run at y=0 between one tooth and the next, which
   is as much "the border" as the diagonals and the legs are — 4px away on
   the accent-color side everywhere, computed by pushing all 5 edges (both
   legs, both diagonals, and the flat connector) out along their own
   normals and re-joining at the corners by line-line intersection. That's
   why the legs stop 4px short of y=0 and a flat segment carries the line
   the rest of the way to the next tooth: an open polyline that ran the
   legs to y=0 and then just stopped was never actually continuous, it was
   N separate M shapes with a gap between each one. */
.deco-seam::before,.deco-seam::after{content:"";position:absolute;left:0;right:0;height:28px;background-repeat:repeat-x;background-image:
  linear-gradient(135deg,var(--zc) 25%,transparent 25%),
  linear-gradient(225deg,var(--zc) 25%,transparent 25%);
  background-position:0 0,15px 0;
  background-size:30px 30px}
.deco-seam::before{top:0;--zc:var(--seam-top,var(--ink))}
.deco-seam::after{bottom:0;--zc:var(--seam-bot,var(--pastel-butter));transform:scaleY(-1)}

/* The pinstripe, as a MASK rather than a colored SVG: the shape is the same
   fixed geometry everywhere (the true parallel offset of the fill outline —
   see the note this replaced, still true, just moved), but the color is a
   real CSS custom property now instead of being baked into a data URI, so
   changing it per divider is a one-line --chev-color on that divider's own
   element — no more duplicating this whole block per color. Defaults to
   near-black; each divider below sets --chev-color to "the adjacent field
   color" per Todd's rule, except the purple divider, which deliberately
   keeps gold (its opposite on the warm/cool split, preferred over the
   rule once seen). */
.deco-seam .chevline{display:block;position:absolute;left:0;right:0;height:28px;background-color:var(--chev-color,rgba(10,8,6,.8));
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:30px 28px;mask-size:30px 28px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28'%3E%3Cpolyline points='0,4 0,24.6 11.5,13.2 22.5,24.3 22.5,4 30,4' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='28'%3E%3Cpolyline points='0,4 0,24.6 11.5,13.2 22.5,24.3 22.5,4 30,4' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")}
.deco-seam .chevline-top{top:0;-webkit-mask-position:-4px 0;mask-position:-4px 0}
.deco-seam .chevline-bot{bottom:0;-webkit-mask-position:-4px 0;mask-position:-4px 0;transform:scaleY(-1)}

/* The gold itself: a horizontal shine gradient (dark → bright → dark,
   repeated) plus an inset highlight/shadow pair standing in for a
   polished, slightly convex metal strip — the cheapest real illusion of
   "reflective" a flat div can give. Centered precisely between the two
   chevron rows above. */
.deco-seam .gold{position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);
  background:linear-gradient(90deg,#8a6a1a 0%,#E8C34A 9%,#FCEEB0 20%,#E8C34A 32%,#9c7a20 46%,#E8C34A 60%,#FCEEB0 72%,#E8C34A 85%,#8a6a1a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.4),0 0 8px rgba(232,195,74,.6)}
/* Thin black pinstripes framing the gold, a sliver of the accent color
   showing between each — the banding that makes the metal read as inlaid
   trim rather than just a bright stripe. Still inside the solid run, clear
   of the chevron teeth above and below. */
.deco-seam .gold::before,.deco-seam .gold::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(10,8,6,.88)}
.deco-seam .gold::before{top:-4px}
.deco-seam .gold::after{bottom:-4px}

/* environment ribbon — only shown on dev/staging, see functions.php */
.envribbon{background:var(--ink);color:var(--sand)}
.envribbon .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;padding-block:.5rem}
.envribbon p{margin:0;max-width:none;font-family:var(--ui);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}

/* masthead */
.mast{background:var(--shell);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:50}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-block:.7rem}
.mast .logo{height:34px;width:auto}
.mast nav{display:flex;gap:1.5rem}
.mast nav a{font-family:var(--control-font);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:var(--control-border) solid transparent;padding-bottom:2px;transition:color var(--ease-fast),border-color var(--ease-fast)}
.mast nav a:hover{color:var(--ink);border-color:var(--sunset)}
@media(max-width:860px){.mast nav{display:none}}
/* Shape and interaction are TEVA's (pill, flat color, translateY lift +
   brightness + deeper shadow on hover, .15s ease) — the color is ours.
   TEVA never uses a gradient on a button; neither do we. */
.cta{display:inline-flex;align-items:center;justify-content:center;font-family:var(--control-font);font-weight:var(--control-weight);font-size:.78rem;letter-spacing:var(--control-tracking);text-transform:uppercase;text-decoration:none;padding:var(--control-pad-y) var(--control-pad-x);border:var(--control-border) solid var(--red);border-radius:var(--control-radius);background:var(--red);color:#fff;white-space:nowrap;box-shadow:var(--control-shadow);transition:transform var(--ease-fast),box-shadow var(--ease-fast),filter var(--ease-fast),background var(--ease-fast),color var(--ease-fast)}
.cta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 30px -8px rgba(20,17,24,.4)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.cta.ghost:hover{background:var(--ink);color:var(--sand);box-shadow:var(--control-shadow)}
.cta.on-dark{border-color:#fff;background:var(--sunset)}
.cta.on-dark.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.7)}
.cta.on-dark.ghost:hover{background:#fff;color:var(--ink)}

/* hero — full-bleed, edge to edge, the way TEVA's butterfly hero is: the
   video/photo IS the section, not a card floated beside the text. Text sits
   in a scrim-backed overlay so it stays legible over whatever is playing. */
.hero-full{position:relative;min-height:min(86vh,920px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-bg video{opacity:0;transition:opacity 1.4s ease}
.hero-bg video.is-live{opacity:1}
/* Two washes stacked: bottom-heavy (protects the CTA row at the foot of the
   section regardless of image) and left-heavy (protects the text column,
   which is left-aligned, regardless of what's bright in the source photo). */
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg,rgba(20,17,24,.88) 0%,rgba(20,17,24,.48) 45%,rgba(20,17,24,.16) 100%),
  linear-gradient(100deg,rgba(20,17,24,.6) 0%,rgba(20,17,24,.22) 52%,transparent 78%)}
.hero-content{position:relative;z-index:2;width:100%;padding-block:clamp(2.6rem,7vw,5.5rem)}
.hero-content .kicker{color:var(--pastel-butter)}
.hero-content h1{font-size:clamp(3rem,9vw,6.8rem);color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.hero-content h1 em{font-style:italic;color:var(--sunset)}
.hero-content .lede{font-size:clamp(1.04rem,1.7vw,1.26rem);color:#EFE9DE;font-weight:300;margin-top:1.4rem;max-width:52ch}
.tagline{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.7rem);margin:1.5rem 0 0;max-width:none;line-height:1.05;color:#fff}
.tagline b{color:var(--sunset)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* carousel — Jack is always the subject: every slide is him doing the work. */
.bb-carousel{position:relative;max-width:100%;border-bottom:6px solid var(--red)}
.bb-carousel-track{position:relative;width:100%;aspect-ratio:16/10;background:var(--ink);overflow:hidden}
.bb-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--ease-fade)}
.bb-carousel-slide img{width:100%;height:100%;object-fit:cover}
.bb-carousel-slide figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.9rem 1.1rem;background:linear-gradient(0deg,rgba(20,17,24,.72),transparent);color:#fff;font-family:var(--control-font);font-weight:var(--control-weight);font-size:.72rem;letter-spacing:var(--control-tracking);text-transform:uppercase}
.bb-carousel-prev,.bb-carousel-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(20,17,24,.55);color:#fff;border:0;width:var(--control-icon);height:var(--control-icon);font-size:1.2rem;line-height:1;cursor:pointer;transition:background var(--ease-fast)}
.bb-carousel-prev{left:.6rem}.bb-carousel-next{right:.6rem}
.bb-carousel-prev:hover,.bb-carousel-next:hover{background:var(--red)}
.bb-carousel-dots{display:flex;gap:.4rem;justify-content:center;padding:.8rem 0;background:var(--ink)}
.bb-carousel-dot{width:var(--control-dot);height:var(--control-dot);border-radius:50%;border:0;background:rgba(253,248,241,.35);cursor:pointer;padding:0;transition:background var(--ease-fast)}
.bb-carousel-dot.is-active{background:var(--sunset)}

/* rank — a strip of Art Deco numeral plaques: each stat is a solid color
   block (the theme's own accent colors, cycling), a blocky geometric
   numeral face (Bungee — real block capitals/figures, not the italic
   display font used for headlines) stamped in cream, a thin gold cap on
   top echoing the divider seams. The plaque-with-block-numeral look is a
   real Deco motif (elevator panels, building address plaques), not
   invented for this page. */
.rank{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:3px;background:var(--ink)}
/* Same shine-gradient recipe as the divider gold seams (border-image, since
   a plain `border-top-color` can't take a gradient) instead of a flat gold
   line — reads as reflective metal capping each plaque rather than a solid
   mustard-colored bar. */
.rank div{padding:1.5rem 1rem 1.3rem;text-align:center;background:var(--red);position:relative;border-top:4px solid transparent;border-image:linear-gradient(90deg,#8a6a1a 0%,#E8C34A 9%,#FCEEB0 20%,#E8C34A 32%,#9c7a20 46%,#E8C34A 60%,#FCEEB0 72%,#E8C34A 85%,#8a6a1a 100%) 1}
.rank div:nth-child(2){background:var(--sunset)}
.rank div:nth-child(3){background:var(--teal)}
.rank div:nth-child(4){background:var(--dusk)}
.rank b{display:block;font-family:var(--deco-num);font-weight:400;font-style:normal;font-size:1.9rem;line-height:1;color:var(--sand);font-variant-numeric:tabular-nums;transform:scaleY(1.4);transform-origin:center;margin-block:.35rem .55rem}
/* Fascinate's lone "5" glyph sits noticeably shorter within its own em-box
   than the other digits/combinations here — same margin in the CSS, less
   visual gap once rendered. Nudged just this one back in line rather than
   loosening the margin for all four, which would just move the mismatch
   somewhere else. */
.rank div:first-child b{margin-bottom:1.1rem}
.rank span{display:block;font-family:var(--ui);font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(253,248,241,.8);margin-top:.5rem}

/* demo band */
.band{background:linear-gradient(100deg,var(--red),var(--sunset) 58%,var(--pink))}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 2rem;padding-block:1.1rem}
.band p{margin:0;max-width:none;color:#fff;font-family:var(--ui);font-weight:600;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase}
.band a{color:#fff;font-family:var(--ui);font-weight:600;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px}

section{padding-block:clamp(2.6rem,6vw,4.8rem)}
.head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.3rem}
.head h2{font-size:clamp(1.95rem,4.6vw,3.2rem)}
.head p{color:var(--ink-2)}

/* Pastel section washes — large surfaces, not trim. Each section picks one;
   the .zig dividers between them carry the color handoff so a transition
   never just cuts. */
.sec-mint{background:var(--pastel-mint)}
.sec-sky{background:var(--pastel-sky)}
.sec-lilac{background:var(--pastel-lilac)}
.sec-peach{background:var(--pastel-peach)}
.sec-butter{background:var(--pastel-butter)}
.sec-pink{background:var(--pastel-pink)}
.sec-white{background:var(--shell)}

/* triad — cards floating on the section's pastel wash, not a flat flush grid,
   so the colored background actually reads as depth rather than paint. */
.triad{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.triad article{padding:1.6rem 1.4rem;background:var(--shell);border-top:5px solid var(--red);box-shadow:0 14px 30px -18px rgba(20,17,24,.5)}
.triad article:nth-child(2){border-top-color:var(--sunset)}
.triad article:nth-child(3){border-top-color:var(--teal)}
.triad h3{font-size:1.38rem;margin-bottom:.55rem}
.triad p{font-size:.95rem;max-width:none;margin:0;color:var(--ink-2)}

/* modalities — same card-on-color treatment, tinted per modality so the
   number badge and the card background agree with each other. */
.mods{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mods article{display:flex;flex-direction:column;gap:.85rem;background:var(--shell);padding:.9rem .9rem 1.2rem;box-shadow:0 14px 30px -20px rgba(20,17,24,.45)}
.mods figure{margin:0;overflow:hidden}
.mods img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mods h3{font-size:1.18rem;display:flex;align-items:baseline;gap:.55rem;padding:0 .3rem}
.mods p{font-size:.93rem;max-width:none;margin:0;color:var(--ink-2);padding:0 .3rem}
.mods h3 i{font-family:var(--ui);font-style:normal;font-weight:700;font-size:.7rem;letter-spacing:.14em;padding:.15rem .5rem;border-radius:999px;color:#fff;background:var(--red)}
.mods article:nth-child(2) h3 i{background:var(--sunset)}
.mods article:nth-child(3) h3 i{background:var(--pink)}
.mods article:nth-child(4) h3 i{background:var(--teal)}
.mods article:nth-child(5) h3 i{background:var(--dusk)}
.mods article:nth-child(6) h3 i{background:#B8862E}

/* session flow — a real sequence, hence numbers */
.flow{background:var(--ink);color:var(--sand)}
.flow h2,.flow h3{color:var(--sand)}
.flow .kicker{color:#9A8FA6}
.flow ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));background:rgba(253,248,241,.18);border:1px solid rgba(253,248,241,.18)}
.flow li{background:var(--ink);padding:1.4rem 1.25rem 1.5rem}
.flow .step{font-family:var(--deco-num);font-weight:400;font-size:1.9rem;line-height:1;color:var(--sunset);display:block;margin-bottom:.9rem;transform:scaleY(1.4);transform-origin:left center}
.flow li:nth-child(2) .step{color:var(--pink)}
.flow li:nth-child(3) .step{color:var(--teal)}
.flow li:nth-child(4) .step{color:var(--red)}
.flow h3{font-size:1.1rem;margin-bottom:.45rem}
.flow p{font-size:.92rem;max-width:none;margin:0;color:#D6CEC3}

/* demos */
.demos{display:grid;gap:1.4rem;align-items:center}
@media(min-width:900px){.demos{grid-template-columns:1.05fr .95fr}}
.demos .pair{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.demos img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* about */
.about{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
@media(min-width:880px){.about{grid-template-columns:.85fr 1.15fr}}
.about .portrait{border-bottom:6px solid var(--red)}
.about p+p{margin-top:.95rem}

/* testimonials */
.voices{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));align-items:start}
.voices figure{margin:0;background:var(--shell);border:1px solid var(--hair)}
.voices video,.voices img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.voices figcaption{font-family:var(--ui);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);padding:.65rem .8rem}
.quotecard{background:var(--shell);border:1px solid var(--hair);border-top:6px solid var(--sunset);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.quotecard .score{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;color:var(--red);line-height:1}
.quotecard blockquote{margin:0;font-size:1.06rem;line-height:1.5;font-style:italic}
.quotecard .who{font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--stone)}

/* faq */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 0;font-family:var(--ui);font-weight:600;font-size:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1.1rem;color:var(--ink-2);font-size:.97rem}

/* booking */
.booking{background:var(--pastel-butter)}
.booking .grid{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media(min-width:860px){.booking .grid{grid-template-columns:1.05fr .95fr}}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.facts li{display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--hair)}
.facts .k{font-family:var(--ui);font-weight:600;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.facts .v{font-size:.97rem}
.need{background:rgba(200,50,42,.1);border-left:3px solid var(--red);padding:.3rem .65rem;font-family:var(--ui);font-weight:600;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#96271F}

footer{background:var(--ink);color:#CFC6D6;padding-block:2.4rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer img{height:30px;filter:invert(1)}
footer p{margin:0;max-width:none;font-size:.86rem}
footer a{color:var(--sunset)}