/* Plant Bingo Florida — site styles
   Palette + type from the brand guide (brand-guide/brand-guide.html). */

:root{
  /* Palette cleanup (site audit, July 2026): consolidated three near-identical
     greens (deep/stem/forest) to two — deep is retired, its one job (dark
     section backgrounds) failed AA under cream text anyway. */
  --stem:   #2E5F28;  /* the dark-section background: hero, .sec--dark, footer */
  --forest: #3F6B3C;  /* the light-background text/link/accent green — .lbl, nav accents, body links */
  --sage:   #4CC15E;  /* kept narrowly: the one dark-bg BINGO letter color left that still passes contrast, plus a couple of decorative/success-state uses. No longer used as small-label text on light backgrounds (failed AA; moved to --forest) */
  --fern:   #A0E091;
  --rose:   #F0776B;
  --rose-bright: #F39289; /* a lighter tint of --rose, used only for large display text (the "B" in BINGO) on the dark background — plain --rose fails 3:1 there */
  --blush:  #FAD4C8;
  --gold:   #E8B54A;
  --clay:   #C96A4E;
  --cream:  #F7F0E4;
  --ink:    #233521;

  --bg:      #F7F0E4;
  --bg-alt:  #EDE6D8;
  --bg-card: #FBF8F1;
  --fg:      #233521;
  --fg-muted:#5E6D5B;
  --border:  rgba(63,107,60,.13);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Georgia,'Book Antiqua',Palatino,'Palatino Linotype',serif;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
a{color:var(--forest)}
img,svg{max-width:100%}

.lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--forest)}
.hed{font-size:clamp(26px,4vw,38px);font-weight:400;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance;line-height:1.1;color:var(--fg)}
.body-copy{font-size:15px;line-height:1.8;color:var(--fg-muted);max-width:58ch}

/* NAV */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;background:rgba(247,240,228,.94);
  border-bottom:1px solid var(--border);backdrop-filter:blur(6px);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-brand img{width:44px;height:auto;border-radius:22%}
.nav-brand span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.nav-links{display:flex;gap:22px;flex-wrap:wrap}
.nav-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--fg-muted)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--forest)}
.nav-links a.nav-cta{color:var(--forest)}
.nav-links a.js-refer{color:var(--forest);border:1px solid var(--forest);padding:8px 14px;border-radius:2px;align-self:center;transition:background .15s,color .15s}
.nav-links a.js-refer:hover{background:var(--forest);color:#fff}

/* HERO */
.hero{
  background:var(--stem);min-height:88svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 32px;position:relative;overflow:hidden;
}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,220,210,.18) 3px,transparent 3px);background-size:40px 40px;pointer-events:none}
.hero-leaf{position:absolute}
.hero-bee{position:absolute;pointer-events:none}
.bee-bob{animation:bee-bob 4.5s ease-in-out infinite}
@keyframes bee-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.hero-inner{position:relative;z-index:1}
.hero-eyebrow{font-size:clamp(13px,1.6vw,15px);letter-spacing:.24em;text-transform:uppercase;color:rgba(240,250,232,.8);margin-bottom:34px}
.hero-plant,.hero-bingo{display:block;font-size:clamp(48px,10vw,88px);font-weight:400;letter-spacing:.22em;line-height:1;text-transform:uppercase}
.hero-plant{color:var(--cream)}
/* The potted plant stands in for the A in PLANT. That substitution IS the
   reissued wordmark, and the hero is the largest instance of the brand name
   on the site, so it was the one place the idea was missing (the 44px header
   badge already had it). Kept as live text, not a wordmark image, so the
   headline still scales responsively and stays selectable.
   SIZE: 1.16x cap height per the brief, expressed literally as 1.16cap so it
   stays correct in WHATEVER font actually resolves - Georgia is a system font,
   so Linux and Android visitors get a fallback with a different cap height and
   a fixed em value would drift for them. The .804em before it is the fallback
   for engines without cap units: Georgia's cap height is 1419/2048 = .6929em,
   and 1.16 x .6929 = .804em.
   BASELINE: the artwork has zero transparent padding, so the default baseline
   alignment lands the base of the pot exactly on the text baseline.
   MARGIN-RIGHT: letter-spacing is NOT applied after a replaced element, only
   after real characters. Every letter here carries .22em of trailing tracking
   INSIDE its advance, which seats its ink toward the left of its slot; the
   image had none, so its ink filled the whole slot and read about .11em right
   of where the A's ink sat - visible as the plant crowding the N. Restoring
   the tracking as a margin makes the image space like the character it
   replaces. Expressed as .22em so it tracks the letter-spacing value above. */
.hero-glyph{height:.804em;height:1.16cap;width:auto;vertical-align:baseline;
            margin-right:.22em}
/* Two artworks ship: the leaves are lighter on dark and deeper on light so
   contrast holds either way. Nothing uses .on-light today, so this rule is
   dormant, but it means the light variant is wired rather than dead weight if
   the wordmark is ever placed on cream. */
.on-light .hero-glyph{content:url("assets/plant-glyph-on-light.png")}
/* The state word under BINGO. Two selectors, one rule: the expansion-state
   variant on state.html must be identical to Florida in size, tracking and
   colour, because it is the same lockup with one word swapped. .hero-state is
   deliberately generic rather than per-state, so a tenth state needs no CSS at
   all. Adding a selector cannot change what .hero-florida already matches, so
   every Florida page renders byte-identically. Never fork this into two rules
   that drift, and never add .hero-<statename>. */
.hero-florida,.hero-state{display:block;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,250,235,.85)}
.hero-tagline{font-size:clamp(17px,2.4vw,22px);font-style:italic;color:rgba(255,230,221,.95);margin-top:32px;letter-spacing:.03em}
.hero-sub{font-size:clamp(15px,1.8vw,17px);color:rgba(250,246,238,.85);margin-top:12px}
.hero-cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* BUTTONS */
.btn{
  display:inline-block;padding:13px 30px;font-family:inherit;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn--rose{background:var(--rose);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(247,240,228,.55)}
.btn--forest{background:var(--forest);color:var(--cream)}
.btn[aria-disabled="true"]{background:var(--bg-alt);color:var(--ink);pointer-events:none}

/* SECTIONS */
.sec{padding:88px 40px}
.sec-inner{max-width:960px;margin:0 auto}
.sec-hd{margin-bottom:44px;display:flex;flex-direction:column;gap:10px}
.sec--alt{background:var(--bg-alt)}
.sec--dark{background:var(--stem);color:var(--cream)}
.sec--dark .lbl{color:rgba(222,245,208,.9)}
.sec--dark .hed{color:var(--cream)}
.sec--dark .body-copy{color:rgba(250,246,238,.88)}

/* BINGO five-color device */
.bingo-b{color:var(--rose-bright)} .bingo-i{color:var(--gold)} .bingo-n{color:var(--fern)}
.bingo-g{color:var(--sage)} .bingo-o{color:var(--blush)}
.on-light .bingo-n{color:var(--forest)} .on-light .bingo-o{color:var(--forest)}

/* EVENT CARDS */
/* Flex so a partial row (1-2 cards) centers instead of hugging the left.
   Cards keep the 3-up width (308px at the 960px container) via max-width;
   below 700px they go full-width and stack, same as before. */
.events{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.events>*{flex:1 1 270px;max-width:308px}
.events>.coming-soon,.events>.venue-strip{flex-basis:100%;max-width:100%}
@media(max-width:700px){.events>*{max-width:100%}}
.event{
  background:var(--bg-card);border:1px solid var(--border);
  padding:26px 26px 24px;position:relative;display:flex;flex-direction:column;gap:6px;
}
.event-stripe{position:absolute;top:0;left:0;right:0;height:5px;display:flex;z-index:1}
.event-stripe span{flex:1}
.event-photo{margin:-26px -26px 13px;aspect-ratio:3/2;overflow:hidden;background:var(--bg-alt)}
.event-photo img{display:block;width:100%;height:100%;object-fit:cover}
.event-date{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);margin-top:6px}
.event-venue{font-size:20px;letter-spacing:.03em;color:var(--fg);line-height:1.25}
.event-city{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.event-meta{font-size:13px;color:var(--fg-muted);margin-top:4px}
.event .btn{margin-top:16px;align-self:flex-start;padding:11px 24px}
.event--soldout .event-venue{color:var(--fg-muted)}
.soldout-flag{position:absolute;top:16px;right:-8px;background:var(--clay);color:#fff;font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;transform:rotate(3deg)}
/* "N seats left" flag: same corner treatment as .soldout-flag so the two read
   as one family, but GOLD rather than clay. Clay means over; gold means hurry.
   Only appears once count-sold says the room is past 61.8% sold, so a card
   without one is not making any claim. z-index clears .event-stripe (z-index 1). */
.seats-flag{position:absolute;top:16px;right:-8px;background:var(--gold);color:var(--ink);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;
  transform:rotate(3deg);z-index:2}
.events-empty{border:1px dashed var(--border);padding:44px 32px;text-align:center;color:var(--fg-muted);font-style:italic;font-size:15px}
.events-empty a{color:var(--forest)}
/* Coming-soon state: one card + venue teaser strip (shown when no events are scheduled) */
.coming-soon{background:var(--bg-card);border:1px solid var(--border);text-align:center;padding:55px 34px}
.coming-soon-hed{font-size:clamp(21px,3vw,28px);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin-bottom:13px}
.coming-soon-sub{font-size:15px;line-height:1.8;color:var(--fg-muted);max-width:44ch;margin:0 auto 21px}
.venue-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:13px}
.venue-strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
/* one venue photo for now; drop this modifier when three real venues exist */
.venue-strip--single{grid-template-columns:1fr;max-width:610px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.venue-strip{grid-template-columns:1fr}}
.cal-links{font-size:11px;color:var(--fg-muted);margin-top:10px;letter-spacing:.04em}
.cal-links a{color:var(--forest)}

/* HOW IT WORKS */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--border)}
.step{background:var(--bg-card);padding:36px 30px;position:relative}
.step-icon{width:44px;height:44px;margin-bottom:16px}
.step-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);margin-bottom:10px}
.step-title{font-size:17px;color:var(--fg);margin-bottom:8px}
.step-body{font-size:13px;line-height:1.75;color:var(--fg-muted)}

/* IMAGE SLOTS — responsive, lazy-loaded, graceful empty state (no broken-image
   frame if the file is missing; the empty state doubles as a shot brief). */
.img-slot{position:relative;border-radius:10px;overflow:hidden;background:var(--bg-card)}
.img-slot img{display:block;width:100%;height:100%;object-fit:cover}
.img-slot--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;border:2px dashed rgba(63,107,60,.35);padding:28px}
.img-slot--empty img{display:none}
.img-slot--empty::before{content:"";width:38px;height:38px;flex:none;
  background:var(--forest);opacity:.5;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="6" width="18" height="14" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M8 6l1.5-2.5h5L16 6"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="6" width="18" height="14" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M8 6l1.5-2.5h5L16 6"/></svg>') center/contain no-repeat;}
.img-slot--empty::after{content:attr(data-empty-label);font-size:12px;line-height:1.6;
  letter-spacing:.03em;font-style:italic;color:var(--fg-muted);max-width:34ch}

.hero-photo-sec{padding:0 40px 88px}
/* Venue's own logo on its event page (optional per record: venueLogo).
   Sized small and centered so it reads as "presented with", not a co-brand.
   The <figure> removes itself if the file is missing (see event.html). */
/* THE VENUE LOCKUP — Plant Bingo's pot x the venue's own mark, side by side.
   Every measurement here is Fibonacci: 34px top margin and gap, an 89px pot,
   a 233px cap on the venue mark, 13px caption.
   The venue mark is capped at 55vw as well as 233px so the row still fits on
   one line at 390px (89 + 34 + 214 + page padding) instead of wrapping the
   x onto its own line; flex-wrap is the backstop for anything narrower.
   Venue marks arrive at wildly different aspect ratios (610x379, 377x304), so
   the height is capped too and object-fit:contain keeps every one of them
   undistorted rather than letting a wide mark tower over the pot. */
.venue-logo{margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;max-width:520px}
.venue-logo img{display:block;height:auto}
.venue-logo-pbf{width:89px;flex:0 0 auto}
.venue-logo-venue{width:auto;max-width:min(233px,55vw);max-height:89px;object-fit:contain;flex:0 1 auto}
.venue-logo-x{font-family:Georgia,serif;font-size:21px;color:var(--fg-muted);opacity:.55;flex:0 0 auto}
.venue-logo figcaption{flex:0 0 100%;text-align:center;margin-top:13px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.img-slot--hero{max-width:960px;margin:0 auto;aspect-ratio:16/9}
.img-slot--hero.img-slot--empty{aspect-ratio:16/9;min-height:220px}

.img-slot--step3{margin-top:20px;aspect-ratio:4/3}
.img-slot--step3.img-slot--empty{min-height:160px}

.img-slot--why{margin:36px auto 0;max-width:360px;aspect-ratio:1/1}
.img-slot--why.img-slot--empty{min-height:180px}

@media(max-width:700px){
  .hero-photo-sec{padding:0 22px 60px}
}

/* WHY PLANTS — the emotional core, not another sales band: generous room,
   narrow measure, reads like a personal note. No card. */
.why-plants{text-align:center}
.why-plants-inner{max-width:640px}
.why-plants-copy{font-size:clamp(18px,2.2vw,21px);font-style:italic;line-height:1.75;
  color:var(--fg);margin-top:26px}
.why-plants-copy:first-of-type{margin-top:20px}
.why-plants-sig{font-size:14px;color:var(--fg-muted);margin-top:30px;letter-spacing:.02em}

/* PITCH LISTS (venues / private) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{padding:22px 26px;border-left:2px solid var(--forest);background:var(--bg-card)}
.panel--rose{border-left-color:var(--clay)}
.panel .lbl{margin-bottom:10px;display:block}
.panel ul{list-style:none;font-size:14px;color:var(--fg-muted);line-height:2}
.faq dt{font-size:15px;color:var(--fg);margin-top:22px}
.faq dd{font-size:14px;color:var(--fg-muted);line-height:1.8;margin-top:4px}

/* FOOTER */
footer{background:var(--stem);color:rgba(238,250,230,.78);text-align:center;padding:48px 32px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
footer strong{display:block;color:rgba(250,246,238,.92);font-size:11px;letter-spacing:.28em;margin-bottom:10px;font-weight:400}
footer a{color:rgba(250,246,238,.92);text-decoration:none}
footer a:hover{color:var(--blush)}
.foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.foot-social{display:inline-flex;align-items:center;gap:6px}
.foot-social svg{width:14px;height:14px;flex:none}
.foot-flora{display:flex;gap:16px;justify-content:center;align-items:center;margin-bottom:18px}

@media(max-width:700px){
  .sec{padding:60px 22px}
  .hero{padding:60px 22px;min-height:76svh}
  .split{grid-template-columns:1fr}
  .nav{flex-direction:column;gap:10px;padding:10px 14px 12px}
  .nav-brand{gap:8px}
  .nav-brand img{width:34px}
  .nav-brand span{font-size:12px;white-space:nowrap}
  .nav-links{justify-content:center;gap:8px 16px;row-gap:7px}
  .nav-links a{font-size:10px;letter-spacing:.12em}
  .hero-bee--2,.hero-flowers--2{display:none}
  .hero-flowers{width:96px!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── FIBONACCI WATERMARK ─────────────────────────────────────────────
   Decorative golden-ratio squares + spiral, drawn as an inline SVG (no
   extra request, no raster). Scoped to pages whose <body> carries .wm —
   which is every public page. It FRAMES each page: once at the top (the
   hero, or .wm-top where a page has no hero) and once in the footer, and
   nowhere in between. It used to repeat on EVERY .sec, which read as
   wallpaper rather than a frame (Derek, Aug 22).
   Safety: pointer-events:none and z-index:0 keep it behind ALL content and
   un-clickable; content is lifted to z-index:1. It is a background image,
   so it can never shift layout or cause horizontal scroll. Two colorways
   because the hero is dark green and the rest of the page is cream.
   EVERY number here is Fibonacci or φ (house rule), placement included:
     · 610px  drawn width on desktop        — Fibonacci
     · 61.8%  width fallback on narrow viewports — φ⁻¹ of the section width
     · 34px   inset from the right edge     — Fibonacci
     · 38.2% / 61.8%  the two vertical anchors — mirrored golden
                                              sections, top and bottom
     · 34:21  the artwork's own canvas      — consecutive Fibonacci pair (φ)
     · .15    stroke width                  — 1/{the 8 that scales it}, hairline
   OPACITY lives in one place: --wm-opacity below. */
:root{--wm-opacity:.08}
.wm .hero,.wm .wm-top,.wm footer{position:relative}
.wm .hero::before,.wm .wm-top::before,.wm footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;
  background-size:min(610px,61.8%) auto;opacity:var(--wm-opacity);
}
/* TOP AND BOTTOM SHARE ONE ARTWORK (Derek, Aug 22): the hero and the footer
   are the same dark ground (--stem), so the light-ink colorway is literally
   the same treatment at both ends — that is what makes it read as a frame
   rather than decoration. */
.wm .hero::before,.wm footer::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2021'%20fill='none'%20stroke='%23F7F0E4'%20stroke-width='.15'%20stroke-linejoin='round'%3E%3Crect%20x='0'%20y='0'%20width='21'%20height='21'/%3E%3Crect%20x='21'%20y='0'%20width='13'%20height='13'/%3E%3Crect%20x='26'%20y='13'%20width='8'%20height='8'/%3E%3Crect%20x='21'%20y='16'%20width='5'%20height='5'/%3E%3Crect%20x='21'%20y='13'%20width='3'%20height='3'/%3E%3Crect%20x='24'%20y='13'%20width='2'%20height='2'/%3E%3Crect%20x='24'%20y='15'%20width='1'%20height='1'/%3E%3Crect%20x='25'%20y='15'%20width='1'%20height='1'/%3E%3Cpath%20d='M24%2015%20A1%201%200%200%200%2025%2016%20A1%201%200%200%200%2026%2015%20A2%202%200%200%200%2024%2013%20A3%203%200%200%200%2021%2016%20A5%205%200%200%200%2026%2021%20A8%208%200%200%200%2034%2013%20A13%2013%200%200%200%2021%200%20A21%2021%200%200%200%200%2021'/%3E%3C/svg%3E")}
/* Hero placement (Derek, Aug 21): the mark sits BEHIND the big PLANT BINGO
   FLORIDA lettering rather than off to the right. Centered horizontally on
   the (centered) wordmark, and raised to the 38.2% anchor — φ's complement,
   which lands on the wordmark's own center at 41.8% of the hero. Then nudged
   up exactly ONE ROW of the hero dot grid (Derek, Aug 21): the 40px below is
   deliberately .hero-dots' own background-size (line 65), not a stray number,
   so the mark steps in register with the dots. */
.wm .hero::before{background-position:center calc(38.2% - 40px)}
/* Footer placement: 61.8% is the exact complement of the hero's 38.2%, so the
   two marks sit at mirrored golden sections — high at the top of the page,
   low at the bottom. NO dot-row nudge here: the -40px above is .hero-dots'
   grid pitch, and the footer has no dot grid for it to register against, so
   carrying it over would be a number copied without its reason. */
.wm footer::before{
  background-position:center 61.8%;
  /* One Fibonacci term DOWN from the hero's 610 (610 -> 377), because the
     footer is a short band, not a full-height hero: at 610 the artwork was
     377px tall against a 268px footer and got cropped to 71% of itself, which
     is not the same treatment as the top, it just looks broken. At 377 the
     mark is 233 tall (377 x 21/34 — also Fibonacci) and sits WHOLE inside the
     footer, which is the point of a frame. */
  background-size:min(377px,61.8%) auto;
}
/* Cream-ground TOP for the one page with no hero (tickets.html). Same mark,
   same centered placement, dark ink instead of light because the ground is
   cream — otherwise /tickets would get a bottom to its frame and no top. */
.wm .wm-top::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2034%2021'%20fill='none'%20stroke='%23233521'%20stroke-width='.15'%20stroke-linejoin='round'%3E%3Crect%20x='0'%20y='0'%20width='21'%20height='21'/%3E%3Crect%20x='21'%20y='0'%20width='13'%20height='13'/%3E%3Crect%20x='26'%20y='13'%20width='8'%20height='8'/%3E%3Crect%20x='21'%20y='16'%20width='5'%20height='5'/%3E%3Crect%20x='21'%20y='13'%20width='3'%20height='3'/%3E%3Crect%20x='24'%20y='13'%20width='2'%20height='2'/%3E%3Crect%20x='24'%20y='15'%20width='1'%20height='1'/%3E%3Crect%20x='25'%20y='15'%20width='1'%20height='1'/%3E%3Cpath%20d='M24%2015%20A1%201%200%200%200%2025%2016%20A1%201%200%200%200%2026%2015%20A2%202%200%200%200%2024%2013%20A3%203%200%200%200%2021%2016%20A5%205%200%200%200%2026%2021%20A8%208%200%200%200%2034%2013%20A13%2013%200%200%200%2021%200%20A21%2021%200%200%200%200%2021'/%3E%3C/svg%3E");background-position:center 38.2%}
/* Footer content clears the mark the same way .sec-inner does. */
.wm footer>*{position:relative;z-index:1}
.wm .sec-inner{position:relative;z-index:1}