/* =========================================================
   SHEDO Website — page layout & components
   Ported verbatim from "Shedo Website.dc.html" <style> block,
   then a BRAND MARKS section swaps the source's binary PNG
   assets (wordmark, pinwheels, pills, glyph, patterns) for
   faithful CSS/type equivalents so the site is fully standalone.
   ========================================================= */

/* Real "Brick" brush face (was substituted with Permanent Marker).
   --font-script already lists 'Brick' first, so this activates it. */
@font-face{font-family:'Brick';src:url('fonts/Brick.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}

/* ---------------- PORTED PAGE STYLES ---------------- */
*{box-sizing:border-box}
body{margin:0;padding:0;background:var(--shedo-paper)}
img{max-width:100%;display:block}
html{scroll-behavior:smooth;scroll-padding-top:88px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.sec{padding:96px 0}
.rv{opacity:0;transform:translateY(34px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rv.on{opacity:1;transform:none}
.rm .rv{opacity:1;transform:none;transition:none}.rm .mq-in{animation:none}.rm .hero-glyph{animation:none}
.hl{background:linear-gradient(var(--shedo-lime),var(--shedo-lime)) 0 82%/0% 24% no-repeat;transition:background-size .34s var(--ease-out) .3s}
.hl.on{background-size:100% 24%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:17px 30px;border:2px solid var(--shedo-navy);border-radius:0 0 16px 0;text-decoration:none;cursor:pointer;color:var(--shedo-navy);background-color:transparent;background-image:linear-gradient(var(--shedo-navy),var(--shedo-navy));background-repeat:no-repeat;background-size:0% 100%;background-position:left center;transition:background-size var(--dur) var(--ease-snap),color var(--dur) var(--ease-snap),border-color var(--dur) var(--ease-snap),transform var(--dur-fast) var(--ease-snap)}
.btn:hover{background-size:100% 100%}.btn:active{transform:translateY(2px)}
.btn .ar{display:inline-block;transition:transform var(--dur) var(--ease-snap)}.btn:hover .ar{transform:translateX(5px)}
.btn-sm{padding:12px 20px;font-size:13px;border-radius:0 0 12px 0}
.btn-red{background-color:var(--shedo-red);color:var(--shedo-cream)}
.btn-navy{background-color:var(--shedo-navy);color:var(--shedo-cream);background-image:linear-gradient(var(--shedo-red),var(--shedo-red))}.btn-navy:hover{border-color:var(--shedo-red)}
.btn-lime{background-color:var(--shedo-lime);color:var(--shedo-navy)}.btn-lime:hover{color:var(--shedo-cream)}
.btn-cream{background-color:var(--shedo-cream);color:var(--shedo-navy)}.btn-cream:hover{color:var(--shedo-cream)}
.btn-outnavy:hover{color:var(--shedo-cream)}
.btn:focus-visible{outline:2px solid var(--shedo-lime);outline-offset:2px}
.nav{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.92);backdrop-filter:blur(12px);border-bottom:2px solid var(--shedo-navy)}
.nav-in{max-width:1280px;margin:0 auto;padding:14px 32px}
.nav-mark{height:34px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center;font-family:var(--font-body);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{color:var(--shedo-navy);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color var(--dur) var(--ease-snap),color var(--dur) var(--ease-snap)}.nav-links a:hover{border-bottom-color:var(--shedo-red);color:var(--shedo-red)}
.hero{position:relative;overflow:hidden;padding:110px 0 130px;background:var(--shedo-cream)}
.hero-pat{position:absolute;inset:0;opacity:.07;pointer-events:none}
.hero-glyph{position:absolute;right:-70px;bottom:-110px;width:460px;pointer-events:none;animation:glyphIn .7s var(--ease-out) .25s backwards,glyphDrift 7s ease-in-out 1.4s infinite}
@keyframes glyphIn{from{transform:translate(70px,100px);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes glyphDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-in{position:relative}
.hero-kick{color:var(--shedo-red);margin:0 0 30px}
.hero-slog{font-family:var(--font-display);font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;color:var(--shedo-navy);line-height:1.05;margin:26px 0 0}
.hero-slog .brick{font-size:1.25em;color:var(--shedo-red)}
.hero-sub{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:52ch;color:var(--fg-2);margin:28px 0 44px}
.mq{background:var(--shedo-red);border-top:2px solid var(--shedo-navy);border-bottom:2px solid var(--shedo-navy);overflow:hidden;padding:20px 0}
.mq-in{display:flex;width:max-content;animation:mq 26s linear infinite}
.mq-grp{display:flex;align-items:center;gap:56px;padding-right:56px}
.mq-t{font-family:var(--font-display);font-size:32px;text-transform:uppercase;color:var(--shedo-cream);white-space:nowrap}
.mq-p{height:34px;width:34px}
@keyframes mq{to{transform:translateX(-50%)}}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:52px}
.lede{font-size:17px;line-height:1.55;max-width:46ch;color:var(--fg-2);margin:0}
.eng-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.eng{padding:40px 36px 44px;display:flex;flex-direction:column;gap:16px;border:2px solid var(--shedo-navy)}
.eng-navy{background:var(--shedo-navy);color:var(--shedo-cream);box-shadow:8px 8px 0 0 var(--shedo-lime)}
.eng-lime{background:var(--shedo-lime);color:var(--shedo-navy);box-shadow:8px 8px 0 0 var(--shedo-navy)}
.eng-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.eng-navy .eng-tag{color:var(--shedo-lime)}.eng-lime .eng-tag{color:var(--shedo-red)}
.eng-h{font-family:var(--font-display);font-size:clamp(22px,2.2vw,34px);text-transform:uppercase;line-height:1.02;margin:0;overflow-wrap:break-word;hyphens:auto}
.eng-navy .eng-h{color:var(--shedo-cream)}
.eng p{margin:0;font-size:16px;line-height:1.5}.eng-navy p{color:var(--fg-on-dark-mute)}
.eng-li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px}
.eng-sq{width:10px;height:10px;flex:none}
.eng-navy .eng-sq{background:var(--shedo-lime)}.eng-lime .eng-sq{background:var(--shedo-navy)}
.fuel{font-family:var(--font-display);font-size:clamp(26px,3vw,44px);text-transform:uppercase;line-height:1.05;color:var(--shedo-navy);margin:64px 0 0;max-width:26ch}
.fuel .brick{font-size:1.3em;color:var(--shedo-red)}
.cyc-eye{margin:72px 0 24px}
.cyc{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--shedo-navy);border-radius:0 0 18px 0;overflow:hidden;background:var(--shedo-white)}
.cyc-step{padding:26px 24px 30px;border-left:2px solid var(--shedo-navy);position:relative}.cyc-step.first{border-left:0}
.cyc-n{font-family:var(--font-display);font-size:15px;color:var(--shedo-red);margin:0 0 14px}
.cyc-h{font-family:var(--font-display);font-size:19px;text-transform:uppercase;line-height:1.08;color:var(--shedo-navy);margin:0 0 10px}
.cyc-step p{font-size:14.5px;line-height:1.5;color:var(--fg-2);margin:0}
.cyc-arr{position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;font-family:var(--font-display);font-size:18px;color:var(--shedo-red);background:var(--shedo-white);line-height:1;padding:2px 0}
.seccream{background:var(--shedo-cream);border-top:2px solid var(--shedo-navy);border-bottom:2px solid var(--shedo-navy)}
.rail-btns{display:flex;gap:12px}
.rbtn{width:56px;height:56px;border-radius:0 0 12px 0;display:flex;align-items:center;justify-content:center;background:var(--shedo-paper);border:2px solid var(--shedo-navy);font-family:var(--font-display);font-size:20px;color:var(--shedo-navy);cursor:pointer;transition:background var(--dur) var(--ease-snap),color var(--dur) var(--ease-snap)}.rbtn:hover{background:var(--shedo-navy);color:var(--shedo-cream)}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 26px;scrollbar-width:thin}
.rcard{flex:none;width:330px;scroll-snap-align:start;background:var(--shedo-white);border:2px solid var(--shedo-navy);padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap)}.rcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 0 var(--shedo-red)}
.rcard-pill{height:38px;width:auto;object-fit:contain;object-position:left center;align-self:start}
.rcard-h{font-family:var(--font-display);font-size:22px;text-transform:uppercase;line-height:1.05;color:var(--shedo-navy);margin:0}
.rcard p{font-size:15px;line-height:1.5;color:var(--fg-2);margin:0}
.rcard-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--shedo-red);margin-top:auto}
.flag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fcard{border:2px solid var(--shedo-navy);background:var(--shedo-white);display:flex;flex-direction:column;transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap)}.fcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 0 var(--shedo-lime)}
.fcard-bd{padding:24px 24px 28px;border-top:2px solid var(--shedo-navy);display:flex;flex-direction:column;gap:10px}
.fcard-h{font-family:var(--font-display);font-size:22px;text-transform:uppercase;line-height:1.05;color:var(--shedo-navy);margin:0}
.fcard p{font-size:15px;line-height:1.5;color:var(--fg-2);margin:0}
.fcard-link{margin-top:4px;align-self:start;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--shedo-red);text-decoration:none;border-bottom:2px solid transparent;transition:border-color var(--dur-fast) var(--ease-snap)}
.fcard-link:hover,.fcard-link:focus-visible{border-bottom-color:var(--shedo-red)}
.fcard-link .ar{display:inline-block;transition:transform var(--dur-fast) var(--ease-snap)}
.fcard-link:hover .ar{transform:translateX(3px)}
.stats{position:relative;background:var(--shedo-navy);color:var(--shedo-cream);overflow:hidden}
.stats-pat{position:absolute;inset:0;opacity:.07;pointer-events:none}
.stats-in{position:relative}
.stats-eye{color:var(--shedo-lime);margin-bottom:56px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.scell{border-left:2px solid var(--shedo-lime);padding-left:26px}.scell.first{border-left:0;padding-left:0}
.snum{font-family:var(--font-display);font-size:clamp(64px,7vw,120px);line-height:.88;letter-spacing:-.03em;color:var(--shedo-lime);margin:0 0 18px}
.slab{font-weight:500;font-size:15.5px;line-height:1.4;color:var(--shedo-cream);margin:0;max-width:26ch}
.ssrc{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,237,166,.55);margin:52px 0 0}
.pt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pt-cell{background:var(--shedo-white);border:2px solid var(--border-subtle);border-radius:0 0 14px 0;min-height:104px;padding:20px;display:flex;align-items:center;justify-content:center;transition:border-color var(--dur) var(--ease-snap),transform var(--dur) var(--ease-snap)}.pt-cell:hover{border-color:var(--shedo-navy);transform:translateY(-3px)}
.pt-name{font-weight:700;font-size:17px;line-height:1.3;color:var(--shedo-navy);text-align:center;margin:0}
.ev-row{display:grid;grid-template-columns:110px 1fr auto;gap:32px;align-items:center;padding:30px 0;border-top:2px solid var(--shedo-navy);transition:background var(--dur) var(--ease-snap),padding var(--dur) var(--ease-snap)}.ev-row:hover{background:var(--shedo-lime);padding-left:16px;padding-right:16px}
.ev-last{border-bottom:2px solid var(--shedo-navy)}
.ev-day{font-family:var(--font-display);font-size:38px;line-height:.9;color:var(--shedo-red);margin:0}
.ev-mon{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--shedo-navy);margin:6px 0 0}
.ev-h{font-family:var(--font-display);font-size:24px;text-transform:uppercase;line-height:1.05;color:var(--shedo-navy);margin:0 0 6px}
.ev-meta{font-size:14.5px;color:var(--fg-2);margin:0}
.ev-pin{position:absolute;right:-40px;bottom:-56px;width:220px;height:220px;opacity:.14;pointer-events:none}
.gi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gi{border:2px solid var(--shedo-navy);border-radius:0 0 18px 0;padding:30px 26px 32px;display:flex;flex-direction:column;gap:14px;min-height:300px;transition:transform var(--dur) var(--ease-snap),box-shadow var(--dur) var(--ease-snap)}.gi:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 0 var(--shedo-navy)}
.gi-cream{background:var(--shedo-cream);color:var(--shedo-navy)}.gi-navy{background:var(--shedo-navy);color:var(--shedo-cream)}.gi-red{background:var(--shedo-red);color:var(--shedo-cream)}.gi-lime{background:var(--shedo-lime);color:var(--shedo-navy)}
.gi-h{font-family:var(--font-display);font-size:21px;text-transform:uppercase;line-height:1.05;margin:0;overflow-wrap:break-word}
.gi-navy .gi-h{color:var(--shedo-cream)}.gi-red .gi-h{color:var(--shedo-cream)}
.gi p{margin:0 0 auto;font-size:15.5px;line-height:1.5;padding-bottom:22px}
.gi-navy p{color:var(--fg-on-dark-mute)}.gi-red p{color:var(--shedo-cream)}
.gi-red .btn-cream{border-color:var(--shedo-cream)}
.ct-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.ct-row{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.ct-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);width:90px;flex:none}
.ct-v{font-weight:500;font-size:16px;color:var(--shedo-navy);text-decoration:none}.ct-v:hover{color:var(--shedo-red)}
.frm{background:var(--shedo-white);border:2px solid var(--shedo-navy);box-shadow:10px 10px 0 0 var(--shedo-red);padding:40px 36px;display:flex;flex-direction:column;gap:20px}
.fld{display:flex;flex-direction:column;gap:7px}
.flab{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--shedo-navy)}
.fin{font-family:var(--font-body);font-size:16px;color:var(--shedo-navy);padding:13px 14px;border:2px solid var(--shedo-navy);border-radius:0;background:var(--shedo-paper);width:100%}
.fin:focus{outline:2px solid var(--shedo-lime);outline-offset:2px}
textarea.fin{font-family:var(--font-body);resize:vertical;min-height:104px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.frm-err{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--shedo-red);margin:0;padding:10px 12px;border:2px solid var(--shedo-red);background:#fff}
/* Keyboard focus for links/controls not already covered above. */
a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--shedo-lime);outline-offset:2px}
.nav a:focus-visible,.foot-a:focus-visible,.ct-v:focus-visible{outline-offset:3px}
/* Skip-to-content link — visible only when focused by keyboard. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--shedo-navy);color:var(--shedo-cream);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;text-decoration:none;transition:top var(--dur-fast) var(--ease-snap)}
.skip-link:focus{top:12px}
.sent{background:var(--shedo-navy);border:2px solid var(--shedo-navy);box-shadow:10px 10px 0 0 var(--shedo-lime);padding:56px 44px}
.sent-h{font-family:var(--font-display);font-size:34px;text-transform:uppercase;color:var(--shedo-lime);line-height:1.02;margin:0 0 16px}
.sent p{color:var(--shedo-cream);margin:0}
.foot{background:var(--shedo-navy);color:var(--shedo-cream);padding:72px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:48px}
.foot-mark{height:52px;width:auto;margin-bottom:18px}
.foot-tag{font-size:14px;line-height:1.55;color:var(--fg-on-dark-mute);max-width:34ch;margin:0}
.foot-h{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--shedo-lime);margin:0 0 16px}
.foot-a{display:block;text-decoration:none;font-size:14.5px;line-height:2;color:var(--shedo-cream);transition:color var(--dur) var(--ease-snap)}.foot-a:hover{color:var(--shedo-salmon)}
.foot-bot{margin-top:56px;padding-top:22px;border-top:1px solid rgba(212,217,48,.15);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,237,166,.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.note{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:28px 0 0}
@media (max-width:1020px){.eng-grid,.flag-grid,.ct-grid,.cyc{grid-template-columns:minmax(0,1fr)}.stats-grid,.pt-grid,.gi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.scell{border-left:0;padding-left:0}.cyc-step{border-left:0;border-top:2px solid var(--shedo-navy)}.cyc-step.first{border-top:0}.cyc-arr{display:none}.nav-links{display:none}.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero-glyph{width:300px;right:-60px}}

/* Phone: single-motor stacking so display headings never force horizontal scroll. */
@media (max-width:560px){.gi-grid,.foot-grid,.pt-grid{grid-template-columns:minmax(0,1fr)}.stats-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}

/* ---------------- BRAND MARKS (standalone substitutes) ---------------- */

/* Real SHEDO wordmark (the dot-O lockup, from the supplied brand asset).
   The PNG is a single-colour glyph on transparency, so we drive it as a
   CSS mask and paint it navy in the nav / cream in the footer — matching
   the approved prototype's navy-nav / cream-footer treatment. */
.brand-logo{display:inline-block;aspect-ratio:1459/1042;
  -webkit-mask:url("assets/logo-shedo.png") center/contain no-repeat;
  mask:url("assets/logo-shedo.png") center/contain no-repeat}
.nav-mark.brand-logo{height:36px;width:auto}
.foot-mark.brand-logo{height:50px;width:auto;margin-bottom:20px}
.brand-logo-navy{background-color:var(--shedo-navy)}
.brand-logo-cream{background-color:var(--shedo-cream)}

/* Real "Do" pinwheel mark (six D-petals around a central o), from the
   design system. Was a CSS radial approximation before. */
.pinwheel{background:center/contain no-repeat}
.mq-p{background:url("assets/pinwheel-lime.png") center/contain no-repeat}
.ev-pin{background:url("assets/pinwheel-red.png") center/contain no-repeat}

/* Oversize "Do" glyph ornament (hero) */
.hero-glyph{width:auto;font-family:var(--font-display);font-size:clamp(240px,34vw,460px);line-height:1;color:var(--shedo-red);text-transform:lowercase;user-select:none}
@media (max-width:1020px){.hero-glyph{font-size:clamp(180px,40vw,300px)}}

/* Typographic section textures (replace pattern PNGs, kept at .07 opacity
   by .hero-pat / .stats-pat). Tiled wordmark fragments, per the brand's
   "typographic textures, not gradients" rule. */
.hero-pat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Ctext x='4' y='70' font-family='Arial Black,Arial,sans-serif' font-size='60' font-weight='900' fill='%23E52A3F'%3EDo%3C/text%3E%3Ctext x='120' y='130' font-family='Arial Black,Arial,sans-serif' font-size='60' font-weight='900' fill='%23E52A3F'%3EDo%3C/text%3E%3C/svg%3E");background-size:220px 140px}
.stats-pat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150'%3E%3Ctext x='4' y='72' font-family='Arial Black,Arial,sans-serif' font-size='54' font-weight='900' fill='%238D99AD'%3ESHED%3C/text%3E%3Ctext x='130' y='140' font-family='Arial Black,Arial,sans-serif' font-size='54' font-weight='900' fill='%238D99AD'%3ESHED%3C/text%3E%3C/svg%3E");background-size:260px 150px}

/* Category pills — lowercase Dela Gothic label + icon-block, palette-paired,
   per the design-system taxonomy. Replaces the pill-*.png images. */
.pill{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;height:38px;padding:0 16px 0 12px;border-radius:999px;font-family:var(--font-display);font-size:12.5px;text-transform:lowercase;letter-spacing:.01em;line-height:1;white-space:nowrap;border:2px solid var(--shedo-navy)}
.pill::before{content:"";width:12px;height:12px;flex:none;border-radius:2px}
.pill-red{background:var(--shedo-red);color:var(--shedo-cream);border-color:var(--shedo-red)}.pill-red::before{background:var(--shedo-cream)}
.pill-lime{background:var(--shedo-lime);color:var(--shedo-navy);border-color:var(--shedo-navy)}.pill-lime::before{background:var(--shedo-navy)}
.pill-navy{background:var(--shedo-navy);color:var(--shedo-cream);border-color:var(--shedo-navy)}.pill-navy::before{background:var(--shedo-lime)}
.pill-green{background:var(--shedo-green);color:#fff;border-color:var(--shedo-green)}.pill-green::before{background:var(--shedo-cream)}
.pill-salmon{background:var(--shedo-salmon);color:var(--shedo-navy);border-color:var(--shedo-navy)}.pill-salmon::before{background:var(--shedo-navy)}
.pill-slate{background:var(--shedo-slate);color:var(--shedo-navy);border-color:var(--shedo-navy)}.pill-slate::before{background:var(--shedo-navy)}