/* Happy Home Co landing, production pass. Palette: Logan's green #67E09A + white, ink #1A1A1A for text and lines only. */
:root{
  --pistachio:#67E09A; --cream:#FFFFFF; --green:#1A1A1A; --btn:var(--cream);
  --bg:var(--pistachio); --fg:var(--green); --card:var(--cream); --field:var(--cream); --hatch:#E6F9EE;
  --stroke:3px; --pill:999px;
  --gutter:clamp(20px, 5vw, 96px);
  --sec-y:clamp(84px, 8vw, 140px);
  --bh:clamp(34px, 5vw, 84px);
  --tk:clamp(60px, 4.6vw, 130px);
  --fb:"Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fc:"Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --blob1:58% 42% 55% 45% / 46% 54% 46% 54%; --blob2:34% 66% 58% 42% / 52% 38% 62% 48%; --blob3:46% 54% 38% 62% / 62% 44% 56% 38%;
  --org1:90px 56px 104px 48px / 64px 96px 52px 84px; --org2:58px 96px 50px 108px / 92px 56px 88px 50px; --org3:100px 50px 70px 96px / 56px 88px 96px 60px;
  --card1:54px 34px 60px 30px / 36px 56px 32px 50px; --card2:34px 58px 30px 62px / 56px 34px 52px 32px; --card3:60px 30px 44px 56px / 32px 52px 58px 36px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{overflow-x:clip; scroll-behavior:smooth}
body{margin:0; background:var(--pistachio); color:var(--green); font-family:var(--fb); font-size:clamp(17px, .35vw + 15.6px, 20px); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:inherit}
h1,h2,h3{margin:0}
.wrap{width:100%; max-width:1920px; margin-inline:auto; padding-inline:var(--gutter); position:relative}
.label{font-family:var(--fc); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem}
:focus-visible{outline:3px solid var(--fg); outline-offset:3px; border-radius:10px}
.skip{position:absolute; left:12px; top:-80px; z-index:100; background:var(--cream); color:var(--green); border:2px solid var(--green); padding:12px 18px; border-radius:var(--pill); font-weight:700; text-decoration:none}
.skip:focus{top:12px}

.draft{background:var(--cream); color:var(--green); border-bottom:2px solid var(--green); text-align:center; padding:9px var(--gutter)}
.draft p{margin:0; font:600 .85rem/1.3 var(--fc); letter-spacing:.06em; text-transform:uppercase}

/* section color roles */
.sec{position:relative; background:var(--bg); color:var(--fg); padding-block:var(--sec-y)}
.pistachio{--bg:var(--pistachio); --fg:var(--green); --card:var(--cream); --hatch:#E6F9EE; --btn:var(--cream)}
.cream{--bg:var(--cream); --fg:var(--green); --card:var(--pistachio); --hatch:#85E7AE; --btn:var(--pistachio)}
.green{--bg:var(--pistachio); --fg:var(--green); --card:var(--cream); --hatch:#E6F9EE; --btn:var(--cream)}

/* organic section edges */
.edge-wave::before, .edge-scallop::before{content:""; position:absolute; left:0; right:0; pointer-events:none}
.edge-wave::before{top:-54px; height:56px; z-index:1; background:var(--bg); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C117 4 233 4 350 30S583 56 700 30 933 4 1050 30 1283 56 1400 30V60H0Z'/%3E%3C/svg%3E") 0 0/1400px 100% repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C117 4 233 4 350 30S583 56 700 30 933 4 1050 30 1283 56 1400 30V60H0Z'/%3E%3C/svg%3E") 0 0/1400px 100% repeat-x; animation:drift 40s linear infinite}
@keyframes drift{to{-webkit-mask-position:-1400px 0; mask-position:-1400px 0}}
@keyframes bump{to{background-position:56px 0}}
@keyframes bump2{to{background-position:-56px 0}}
.edge-scallop::before{top:-27px; height:28px; background:radial-gradient(circle at 28px 28px, var(--bg) 27.5px, transparent 28.5px) 0 0/56px 56px repeat-x; animation:bump 4s linear infinite}
.foot-scallop::after{content:""; position:absolute; left:0; right:0; bottom:-27px; height:28px; z-index:1; pointer-events:none; background:radial-gradient(circle at 28px 0, var(--bg) 27.5px, transparent 28.5px) 0 0/56px 56px repeat-x; animation:bump2 4s linear infinite}

/* header */
.topbar{padding-block:0; z-index:5}
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:clamp(14px,1.6vw,26px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.brand .mascot-sm{height:clamp(38px,3.2vw,56px); width:auto; flex:0 0 auto}
.brand .wm-one{height:clamp(19px,1.7vw,30px); width:auto; min-width:0; flex:0 1 auto}
.top nav{display:flex; align-items:center; gap:clamp(12px,2vw,32px); flex:0 0 auto}
.link{font-family:var(--fc); font-weight:700; font-size:clamp(1rem,.9vw,1.15rem); text-transform:uppercase; letter-spacing:.06em; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; padding-block:12px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; font:700 clamp(1.05rem, .55vw + .8rem, 1.3rem)/1 var(--fc); text-transform:uppercase; letter-spacing:.05em;
  background:var(--btn); color:var(--green); border:var(--stroke) solid var(--green); border-radius:var(--pill); padding:14px clamp(22px,2vw,34px); text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg); box-shadow:0 6px 0 0 var(--green)}
.btn.ghost{background:transparent; color:var(--green); border-color:var(--green)}
.btn.small{min-height:44px; font-size:clamp(.95rem,.8vw,1.1rem); padding:10px 18px}

/* hero */
.hero-sec{padding-block:0}
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(28px,4vw,96px); padding-block:clamp(8px,2vw,40px) clamp(120px,10vw,180px)}
.hero h1{margin-bottom:clamp(18px,2vw,34px)}
.hero .wm-stack{display:block; width:clamp(260px, 34vw, 720px); max-width:100%; height:auto}
.lede{font-size:clamp(1.6rem, 2.5vw, 3rem); line-height:1.12; font-weight:700; margin:0 0 16px; max-width:17em; text-wrap:balance; letter-spacing:-.01em}
.sub{max-width:34em; margin:0 0 28px; font-size:clamp(1.08rem, 1.2vw, 1.4rem); text-wrap:pretty}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px}
.chips-h{margin:0 0 12px}
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; max-width:44em}
.chips li:nth-child(odd) .chip{transform:rotate(-1.5deg)} .chips li:nth-child(even) .chip{transform:rotate(1.2deg)}
.chip{min-height:44px; font:600 clamp(1rem,.9vw,1.1rem) var(--fb); background:var(--cream); color:var(--green); border:2px solid var(--green); border-radius:var(--pill); padding:8px 16px; cursor:pointer; transition:background .15s, color .15s, transform .2s cubic-bezier(.3,1.6,.5,1)}
.chips .chip:hover{background:transparent; color:var(--green); transform:rotate(0) scale(1.05)}
.hero-art{display:flex; justify-content:center; align-items:flex-end; gap:clamp(10px,1.4vw,28px); min-width:0}
.mascot{flex:0 1 auto; min-width:0; width:clamp(220px, 27vw, 540px); height:auto; color:var(--green); transform-origin:50% 90%; animation:walk 1.4s ease-in-out infinite}
.badge{flex:0 0 auto; align-self:flex-start; width:clamp(92px, 9vw, 170px); height:auto; transform:rotate(-12deg)}
.badge-bg{fill:var(--cream); stroke:var(--green); stroke-width:3}
.badge-t{font:700 19.5px var(--fc); letter-spacing:.14em; fill:var(--green)}
.badge-m{color:var(--green)}
.badge-spin{transform-origin:100px 100px; animation:spin 18s linear infinite}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ticker: centered on the hero / situation seam, zero net height */
.ticker-wrap{position:relative; z-index:4; overflow:hidden; pointer-events:none; padding-block:calc(2vw + 8px); margin-block:calc(var(--tk) / -2 - 2vw - 8px)}
/* the band is painted as an angled gradient with a 1px soft edge on an unrotated box, so its slanted edges stay smooth everywhere (Safari draws rotated or clipped box edges jagged) */
.ticker-wrap::before{content:""; position:absolute; inset:0;
  background:linear-gradient(177.8deg, transparent calc(50% - var(--tk) / 2 - .6px), var(--green) calc(50% - var(--tk) / 2 + .6px), var(--green) calc(50% - var(--tk) / 2 + 2.4px), var(--cream) calc(50% - var(--tk) / 2 + 3.6px), var(--cream) calc(50% + var(--tk) / 2 - 3.6px), var(--green) calc(50% + var(--tk) / 2 - 2.4px), var(--green) calc(50% + var(--tk) / 2 - .6px), transparent calc(50% + var(--tk) / 2 + .6px))}
.ticker{position:relative; height:var(--tk); display:flex; align-items:center; color:var(--green); transform:rotate(-2.2deg); width:108%; margin-left:-4%; overflow:hidden}
.track{display:flex; align-items:center; width:max-content; animation:marquee 36s linear infinite}
.track span{font:700 clamp(1.3rem,2vw,2.8rem)/1 var(--fc); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; padding-inline:clamp(18px,1.6vw,32px)}
.track .tm{flex:0 0 auto; height:calc(var(--tk) * .55); width:auto; aspect-ratio:2120/1789; color:var(--green)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* section heads */
.bub{display:block; width:min(100%, calc(var(--bh) * var(--r))); height:auto; color:inherit}
.head{display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:clamp(32px,3.6vw,68px)}
.head p{margin:0; max-width:38em; font-size:clamp(1.08rem,1.2vw,1.4rem); text-wrap:pretty}
.ph{display:inline-flex; align-items:center; gap:8px; border:2px dashed currentColor; color:inherit; border-radius:12px; padding:5px 11px; font:600 .85rem/1.25 var(--fc); letter-spacing:.05em; text-transform:uppercase; width:fit-content; max-width:100%}

/* situation form */
#situation{padding-top:calc(var(--sec-y) + 24px)}
.pickcard{--btn:var(--cream); background:var(--card); border:solid var(--green); border-width:var(--stroke) 10px 12px var(--stroke); border-radius:44px 36px 48px 32px / 36px 46px 34px 44px; padding:clamp(22px,3vw,56px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,3vw,44px)}
fieldset{border:0; margin:0; padding:0; min-width:0}
legend{font:700 clamp(1.4rem,1.8vw,2.1rem)/1.15 var(--fb); margin-bottom:16px; padding:0; letter-spacing:-.01em}
.picks{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.pk{position:relative; min-width:0}
.pk input{position:absolute; opacity:0; inset:0; pointer-events:none}
.pk label{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; height:100%; border:var(--stroke) solid var(--green); border-radius:var(--pill); padding:12px 20px; font-weight:700; font-size:clamp(1rem,.5vw + .8rem,1.2rem); line-height:1.2; cursor:pointer; background:var(--field); color:var(--green);
  transition:background .15s, color .15s, transform .2s cubic-bezier(.3,1.6,.5,1)}
.pk label:hover{transform:scale(1.015)}
.pk .dot{flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:3px solid currentColor}
.pk input:checked + label{box-shadow:inset 0 0 0 3px var(--green)}
.pk .pm{display:none; flex:0 0 auto; height:32px; width:auto; aspect-ratio:2120/1789; color:var(--green)}
.pk input:checked + label .dot{display:none} .pk input:checked + label .pm{display:block; animation:pop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{from{transform:scale(.4) rotate(-20deg)} to{transform:scale(1) rotate(0)}}
.pk input:focus-visible + label{outline:3px solid var(--green); outline-offset:3px}
.contact{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-content:start; min-width:0}
.contact .full{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-family:var(--fc); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem}
input:not([type=radio]):not([type=checkbox]), select{font:500 1.05rem var(--fb); color:var(--green); background:var(--field); border:2px solid var(--green); border-radius:18px; min-height:52px; padding:12px 16px; width:100%; min-width:0}
select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position:calc(100% - 22px) 55%, calc(100% - 15px) 55%; background-size:7px 7px; background-repeat:no-repeat; padding-right:44px}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.98rem}
.consent > span{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.consent input{width:22px; height:22px; flex:0 0 auto; margin-top:3px; accent-color:var(--green)}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
.done{border-radius:22px; background:var(--cream); color:var(--green); border:var(--stroke) solid var(--green); padding:16px 18px; font-weight:600; margin:0}

.done:focus{outline:none}

/* steps */
.steps-wrap{position:relative; --num:clamp(84px, 7.2vw, 148px)}
.steps-wrap .path{position:absolute; left:calc(100% / 6); width:calc(100% * 2 / 3); top:calc(var(--num) / 2 - 30px); height:60px; color:var(--green); pointer-events:none}
.steps{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,64px); list-style:none; margin:0; padding:0}
.steps li{display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0}
.num{position:relative; width:var(--num); height:var(--num); display:grid; place-items:center; background:var(--cream); color:var(--green); border:var(--stroke) solid var(--green); font:700 calc(var(--num) * .46)/1 var(--fc); margin-bottom:20px}
.steps li:nth-child(1) .num{border-radius:var(--blob1); transform:rotate(-6deg)}
.steps li:nth-child(2) .num{border-radius:var(--blob2); transform:rotate(5deg)}
.steps li:nth-child(3) .num{border-radius:var(--blob3); transform:rotate(-3deg)}
.steps h3{font-size:clamp(1.3rem,1.9vw,2.3rem); margin-bottom:10px; line-height:1.15; text-wrap:balance}
.steps p{margin:0; max-width:22em; font-size:clamp(1rem,1.25vw,1.4rem); text-wrap:pretty}

/* stories + homes */
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,64px)}
.tile{display:flex; flex-direction:column; align-items:center; gap:14px; margin:0; min-width:0; transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tile:nth-child(1){transform:rotate(-1.8deg)} .tile:nth-child(2){transform:rotate(1.4deg) translateY(16px)} .tile:nth-child(3){transform:rotate(-1deg)}
.tile:hover{transform:rotate(0) scale(1.015)}
.frame{position:relative; width:100%; border:var(--stroke) solid var(--green); overflow:hidden; aspect-ratio:4 / 5;
  background:repeating-linear-gradient(135deg, var(--hatch) 0 14px, transparent 14px 28px), var(--card); display:grid; place-items:center}
.tile:nth-child(1) .frame{border-radius:var(--org1)} .tile:nth-child(2) .frame{border-radius:var(--org2)} .tile:nth-child(3) .frame{border-radius:var(--org3)}
.frame.wide{aspect-ratio:5 / 4}
.sticker{position:absolute; top:clamp(18px,1.8vw,30px); left:50%; transform:translateX(-50%) rotate(-4deg); background:var(--cream); color:var(--green); border:2px solid var(--green); font:700 clamp(.9rem,.8vw,1.05rem)/1 var(--fc); text-transform:uppercase; letter-spacing:.06em; padding:9px 14px; border-radius:var(--pill); white-space:nowrap}
.play{width:clamp(64px,5vw,100px); height:clamp(64px,5vw,100px); border-radius:50%; background:var(--cream); border:var(--stroke) solid var(--green); display:grid; place-items:center}
.play::after{content:""; margin-left:10%; border-style:solid; border-width:clamp(12px,.9vw,18px) 0 clamp(12px,.9vw,18px) clamp(19px,1.4vw,28px); border-color:transparent transparent transparent var(--green)}
.mascot-wm{position:absolute; right:12%; bottom:11%; width:clamp(52px,4.4vw,90px); height:auto; color:var(--green)}
.tile figcaption{font-size:.95rem; max-width:100%}
.reviews{margin-top:clamp(60px,5vw,96px); border:2px dashed currentColor; border-radius:40px 30px 44px 28px / 30px 42px 28px 40px; padding:18px 26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:clamp(1rem,1vw,1.15rem)}

/* who */
.who{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,120px); align-items:start}
.quote{font-size:clamp(2.1rem, 4.2vw, 5rem); font-weight:700; line-height:1.02; letter-spacing:-.02em; margin:0 0 26px; text-wrap:balance}
.answers{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; font-family:var(--fc); font-weight:700; font-size:clamp(1.1rem,1.3vw,1.5rem); text-transform:uppercase; letter-spacing:.04em}
.answers li{border:2px solid currentColor; border-radius:var(--pill); padding:6px 16px}
.answers li:nth-child(1){transform:rotate(-2deg)} .answers li:nth-child(2){transform:rotate(1.5deg)} .answers li:nth-child(3){transform:rotate(-1deg)}
.answers s{text-decoration-thickness:3px}
.answers .now{flex-basis:100%; border:0; padding:10px 0 0; display:flex; align-items:center; gap:14px; min-width:0}
.answers .now .wm-one{height:clamp(22px,2.2vw,42px); width:auto; max-width:100%; min-width:0; flex:0 1 auto}
.who-copy p{margin:0 0 18px; max-width:34em; font-size:clamp(1.08rem,1.3vw,1.5rem); text-wrap:pretty}

/* buying (green) */
.buy{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,120px); align-items:center}
.buy .head{margin-bottom:0}
.buy form{display:grid; gap:18px; --btn:var(--pistachio); background:var(--cream); border:var(--stroke) solid var(--green); border-radius:40px 32px 44px 30px / 32px 42px 30px 40px; padding:clamp(22px,3vw,52px); min-width:0}
.green input:not([type=radio]):not([type=checkbox]){background:var(--field); color:var(--green); border-color:var(--green)}

/* town */
.events{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,64px)}
.event{border:var(--stroke) solid var(--green); background:var(--card); padding:clamp(26px,2.4vw,46px); display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.event:nth-child(1){border-radius:var(--card1); transform:rotate(-1.5deg)} .event:nth-child(2){border-radius:var(--card2); transform:rotate(1.2deg) translateY(12px)} .event:nth-child(3){border-radius:var(--card3); transform:rotate(-.8deg)}
.event:hover{transform:rotate(0) scale(1.015)}
.event h3{font-size:clamp(1.35rem,1.6vw,1.9rem); line-height:1.2}
.event p{margin:0; font-size:clamp(1rem,1.05vw,1.2rem)}

/* footer */
footer.sec{padding-block:clamp(76px,7vw,124px)}
.foot{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,120px); align-items:center}
.foot-brand{display:flex; align-items:center; gap:18px}
.foot-brand .mascot-sm{height:clamp(80px,6vw,124px); width:auto; animation:walk 1.4s ease-in-out infinite; transform-origin:50% 90%}
.foot-brand .wm-foot{height:clamp(70px,5.2vw,106px); width:auto}
.foot-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; font-size:clamp(.98rem,1vw,1.15rem)}
.foot-h{margin:0 0 8px; font:700 .92rem var(--fc); text-transform:uppercase; letter-spacing:.08em}
.foot-cols p{margin:0}

@media (max-width: 860px){
  .foot{grid-template-columns:minmax(0,1fr)}
  /* card rows become swipeable, with the next card peeking in */
  .rail{display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); gap:18px;
    margin-inline:calc(var(--gutter) * -1); padding:16px var(--gutter) 24px; scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{flex:0 0 min(46%, 340px); scroll-snap-align:start}
  .tile:nth-child(n){transform:rotate(-1deg)} .tile:nth-child(2n){transform:rotate(1deg)}
  .event:nth-child(n){transform:rotate(-.8deg)} .event:nth-child(2n){transform:rotate(.8deg)}
  .rail:focus-visible{outline-offset:-3px}
}
@media (max-width: 700px){
  .hero, .who, .buy{grid-template-columns:minmax(0,1fr)}
  .hero-art{order:-1}
  .mascot{width:min(62vw, 280px)}
  .rail > *{flex-basis:min(80%, 340px)}
}
@media (max-width: 599px){
  .foot-cols{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr); gap:44px}
  .steps-wrap .path{display:none}
}
@media (min-width: 1100px){
  .pickcard{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:clamp(36px,4vw,88px); align-items:start}
  .picks{grid-template-columns:minmax(0,1fr); gap:10px; max-width:40rem}
  .pk label{min-height:56px}
}
@media (max-width: 560px){
  .pickcard{border-width:var(--stroke) 7px 9px var(--stroke)}
  .picks, .contact{grid-template-columns:minmax(0,1fr)}
  .top nav{display:none}
  .brand .mascot-sm{height:40px} .brand .wm-one{height:20px; flex:0 0 auto}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mascot, .foot-brand .mascot-sm, .badge-spin, .track, .edge-wave::before, .edge-scallop::before, .foot-scallop::after{animation:none}
  .btn, .chip, .pk label, .tile, .event{transition:none}
}