/* Approved blue, character-led hero. Other sections retain v21 styling. */
.header{position:relative;background:var(--blue);color:var(--cream);border-bottom:1px solid #f7f3e950;height:64px;padding:10px 22px}
.header img{width:40px;height:40px;filter:grayscale(1) contrast(4) invert(1);mix-blend-mode:screen}
.menu-toggle{display:flex;align-items:center;gap:16px;background:none;border:0;color:var(--cream);font-size:16px;min-height:44px;padding:4px 0}
.menu-lines{width:24px;height:18px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.menu-lines::after{content:'';position:absolute;top:6px;left:0;right:0;border-top:2px solid currentColor}
.header nav{position:absolute;top:100%;right:16px;z-index:40;min-width:180px;display:flex;flex-direction:column;gap:0;padding:12px 18px;background:var(--cream);color:var(--blue);border:1px solid var(--line);box-shadow:0 12px 30px #0002}
.header nav[hidden]{display:none}
.hero.hero-skate{background:var(--blue);color:var(--cream);max-width:none;margin:0;height:auto;padding:22px 22px 22px;display:flex;align-items:center;flex-direction:column;overflow:hidden}
.hero-skate .hero-kicker{display:block;font-size:clamp(10px,2.7vw,14px);letter-spacing:.23em;line-height:1.5;margin:0 0 14px;text-align:center}
.hero-skate .wordmark{position:relative;top:auto;left:auto;width:100%;max-width:600px;z-index:1;filter:grayscale(1) brightness(0) invert(96%) sepia(9%) saturate(250%);height:auto}
.hero-illustration{position:relative;isolation:isolate;width:100%;max-width:600px;aspect-ratio:1.25;margin-top:-20px}
.hero-circle{position:absolute;z-index:-1;width:66%;aspect-ratio:1;border-radius:50%;background:var(--cream);left:17%;top:0}
.hero-skater{width:100%;height:100%;object-fit:contain;position:relative;animation:hero-glide 5s ease-in-out infinite;transform-origin:50% 85%}
.hero-friendly{position:absolute;right:0;top:66%;font-size:clamp(10px,2.8vw,16px);line-height:1.3;letter-spacing:.08em;transform:rotate(-12deg);border-bottom:1px solid currentColor;padding-bottom:6px}
.hero-skate .hero-copy{position:relative;top:auto;right:auto;padding:0;width:100%;text-align:center;z-index:2}
.hero-skate h1{font-size:clamp(42px,11.5vw,70px);line-height:.99;letter-spacing:-.035em;margin:0 0 20px}
.hero-skate .button{color:var(--blue);background:var(--cream);font-size:16px;min-height:48px;min-width:210px;padding:12px 28px;gap:28px;justify-content:center;box-shadow:none}
.hero-skate .button span{font-size:24px}
.hero-location{font-size:11px;letter-spacing:.18em;margin:18px 0 0;line-height:1.5}
@keyframes hero-glide{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-3px) rotate(.5deg)}}
@media(min-width:600px){.header{height:80px;padding:14px 32px}.header img{width:48px;height:48px}.hero.hero-skate{padding:28px 32px 32px}.hero-skate h1{font-size:70px}.hero-location{font-size:13px}.hero-skate .hero-kicker{font-size:14px}}
@media(min-width:900px){
.header{height:88px;padding:16px 40px}.header img{width:54px;height:54px}
.hero.hero-skate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto auto;column-gap:clamp(32px,4vw,64px);row-gap:18px;padding:28px clamp(40px,5vw,80px) 40px;min-height:0;height:auto;align-items:center}
.hero-skate .hero-kicker{grid-column:1/-1;grid-row:1;margin:0 0 6px}
.hero-skate .wordmark{grid-column:1;grid-row:2;justify-self:center;align-self:end;width:100%;max-width:420px}
.hero-skate .hero-illustration{grid-column:1;grid-row:3;justify-self:center;align-self:start;width:100%;max-width:480px;margin-top:0}
.hero-skate .hero-copy{grid-column:2;grid-row:2/4;text-align:left;align-self:center;max-width:none;min-width:0}
.hero-skate h1{font-size:clamp(50px,5.6vw,88px);line-height:1.04;margin-bottom:30px;white-space:nowrap}
.hero-skate .button{font-size:18px;padding:15px 34px;min-height:56px}
.hero-location{margin-top:24px}.hero-friendly{font-size:16px;right:0;top:72%}
}
@media(max-width:359px){.header{padding:10px 16px}.hero.hero-skate{padding:18px 16px 22px}.hero-skate h1{font-size:40px}.hero-skate .button{font-size:15px;padding:11px 24px;gap:24px}.hero-friendly{font-size:9px}.hero-location{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-skater{animation:none}}

/* Full-screen navigation uses the native modal top layer. */
body.menu-is-open{overflow:hidden}
.fullscreen-menu{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--blue);color:var(--cream);overflow:auto;overscroll-behavior:contain}
.fullscreen-menu::backdrop{background:var(--blue)}
.fullscreen-menu[open]{display:flex;flex-direction:column;animation:menu-appear .25s ease-out}
.fullscreen-menu-top{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;min-height:64px;border-bottom:1px solid #f7f3e940;flex-shrink:0}
.menu-home img{width:40px;height:40px;filter:grayscale(1) contrast(4) invert(1);mix-blend-mode:screen}
.menu-close{display:flex;align-items:center;gap:16px;min-height:44px;padding:0;background:none;border:0;color:var(--cream);font-size:16px}
.menu-close span{font-size:36px;line-height:1;font-weight:400}
.fullscreen-menu-content{width:100%;max-width:1400px;margin:auto;flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 12px;gap:12px}
.menu-eyebrow{font-size:11px;font-weight:600;letter-spacing:.19em;margin-bottom:20px}
.fullscreen-menu-links nav{display:flex;flex-direction:column}
.fullscreen-menu-links nav a{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 0;border-bottom:1px solid #f7f3e940;font-family:var(--serif);font-size:clamp(36px,11vw,52px);line-height:1.1;letter-spacing:-.025em}
.fullscreen-menu-links nav small{font-family:'DM Sans',sans-serif;letter-spacing:.1em;font-size:11px;opacity:.7}
.fullscreen-menu-links nav a>span{font-family:'DM Sans',sans-serif;font-size:28px;margin-left:auto}
.fullscreen-menu-art{position:relative;isolation:isolate;align-self:center;width:min(100%,360px);margin:14px auto 0;flex-shrink:0}
.menu-art-circle{position:absolute;z-index:-1;background:var(--cream);border-radius:50%;width:65%;aspect-ratio:1;left:18%;top:-3%}
.fullscreen-menu-art img{width:100%;height:auto;position:relative}
.menu-art-note{display:block;text-align:right;font-family:var(--serif);font-size:20px;font-style:italic;margin-top:4px}
.fullscreen-menu-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;letter-spacing:.12em;font-size:10px;line-height:1.5;padding:18px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #f7f3e940;margin-top:20px;flex-shrink:0}
.fullscreen-menu a:focus-visible,.fullscreen-menu button:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
@keyframes menu-appear{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:800px){.fullscreen-menu-top{padding:16px 40px;min-height:88px}.menu-home img{width:54px;height:54px}.fullscreen-menu-content{flex-direction:row;align-items:center;gap:8%;padding:40px 60px}.fullscreen-menu-links{width:50%}.fullscreen-menu-links nav a{font-size:clamp(52px,6vw,88px);padding:18px 0;min-height:100px}.menu-eyebrow{font-size:13px;margin-bottom:28px}.fullscreen-menu-art{width:42%;max-width:560px;margin:0}.menu-art-note{font-size:26px}.fullscreen-menu-bottom{padding:24px 40px;font-size:12px}}
@media(max-height:700px) and (max-width:799px){.fullscreen-menu-content{padding-top:16px}.menu-eyebrow{margin-bottom:10px}.fullscreen-menu-links nav a{min-height:60px;font-size:36px}.fullscreen-menu-art{width:min(70%,240px);margin-top:8px}.fullscreen-menu-bottom{margin-top:8px;padding-top:12px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.fullscreen-menu[open]{animation:none}}

/* Approved counter concept: live centered links above standalone barista artwork. */
.fullscreen-menu-top{border-bottom:0}
.bar-menu-main{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:auto}
.bar-menu-kicker{text-align:center;font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1.5;padding:14px 20px 18px}
.bar-menu-links{display:flex;flex-direction:column;align-items:center;padding:0 18px;gap:10px;position:relative;z-index:2}
.bar-menu-links a{font-family:var(--serif);font-size:clamp(46px,13vw,68px);line-height:1.12;letter-spacing:-.035em;min-height:56px;display:flex;align-items:center;justify-content:center}
.bar-menu-links a:hover{opacity:.8}
.bar-menu-scene{position:relative;isolation:isolate;flex-shrink:0;width:100%;max-width:540px;margin:16px auto 0}
.bar-menu-illustration{width:100%;height:auto;aspect-ratio:3/2;object-fit:fill}
.bar-menu-brand{position:absolute;left:8%;right:8%;bottom:3%;height:15%;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--blue)}
.bar-menu-brand img{width:70%;height:auto;max-height:100%;object-fit:contain}
.bar-menu-brand span{font-size:clamp(10px,3vw,15px);letter-spacing:.05em;line-height:1.25;font-weight:600;transform:rotate(-10deg)}
.bar-menu-location{background:var(--cream);color:var(--blue);text-align:center;letter-spacing:.18em;font-size:11px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));line-height:1.5;border-top:2px solid #111;flex-shrink:0}
@media(min-width:800px){.bar-menu-main{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:20px 50px 0;column-gap:40px}.bar-menu-kicker{grid-column:1/-1;padding:8px 0 26px;font-size:13px}.bar-menu-links{grid-column:1;padding:20px 0 50px;gap:20px}.bar-menu-links a{font-size:clamp(64px,6vw,100px)}.bar-menu-scene{grid-column:2;align-self:end;max-width:640px;margin:0}.bar-menu-brand span{font-size:18px}.bar-menu-location{font-size:12px;padding:22px}.bar-menu-brand{bottom:3%}}
@media(max-height:700px) and (max-width:799px){.bar-menu-kicker{padding:8px 16px 12px;font-size:10px}.bar-menu-links{gap:4px}.bar-menu-links a{font-size:clamp(40px,11vw,54px);min-height:48px}.bar-menu-scene{width:min(100%,330px);margin-top:8px}.bar-menu-location{padding-top:12px;padding-bottom:12px}}
@media(max-width:359px){.bar-menu-links a{font-size:43px}.bar-menu-kicker{font-size:10px}}

@media(max-width:799px){.bar-menu-links a{font-size:clamp(50px,16.5vw,76px)}.bar-menu-scene{overflow:visible}.bar-menu-illustration{display:block;width:100%;max-width:100%;transform:none;object-fit:contain}.bar-menu-brand{height:15%;bottom:3%}.bar-menu-main{justify-content:space-between}}
@media(max-height:700px) and (max-width:799px){.bar-menu-links a{font-size:clamp(42px,13vw,58px)}.bar-menu-scene{width:min(100%,330px)}}

/* Explicit navigation affordances and full-row touch targets. */
.bar-menu-links{align-items:stretch;gap:0;width:100%;max-width:560px;margin:0 auto;padding:0 24px}
.bar-menu-links a{justify-content:space-between;gap:12px;width:100%;padding:14px 0;border-bottom:1px solid #f7f3e96b;cursor:pointer;transition:background-color .15s,color .15s;min-height:72px;font-size:clamp(40px,12vw,64px);text-align:left}
.bar-menu-links a>span:first-child{min-width:0}
.bar-menu-links a .bar-link-arrow{font-family:'DM Sans',sans-serif;font-size:30px;line-height:1;flex-shrink:0;transition:transform .15s}
.bar-menu-links a:hover,.bar-menu-links a:focus-visible{background:#ffffff12;opacity:1}
.bar-menu-links a:active{background:#ffffff26;color:#fff}
.bar-menu-links a:hover .bar-link-arrow{transform:translate(2px,-2px)}
.bar-menu-links a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media(min-width:800px){.bar-menu-links{padding:20px 0 50px}.bar-menu-links a{font-size:clamp(52px,5vw,82px);padding:18px 8px;min-height:92px}.bar-menu-links a .bar-link-arrow{font-size:40px}}
@media(max-height:700px) and (max-width:799px){.bar-menu-links a{font-size:clamp(36px,11vw,48px);padding:10px 0;min-height:60px}.bar-menu-links a .bar-link-arrow{font-size:26px}}

/* Keep the entire menu in view as mobile browser controls expand and collapse. */
@media (max-width: 799px) {
  .fullscreen-menu-top {
    min-height: 0;
    padding: 8px clamp(16px, 6vw, 28px);
  }

  .bar-menu-main {
    justify-content: flex-start;
  }

  .bar-menu-kicker {
    padding: 6px 16px 10px;
  }

  .bar-menu-links {
    padding-inline: clamp(16px, 6vw, 28px);
  }

  .bar-menu-links a {
    min-height: 48px;
    padding: 6px 0;
    font-size: clamp(28px, min(11vw, 6dvh), 56px);
  }

  .bar-menu-scene {
    width: min(100%, 540px, max(132px, calc((100dvh - 320px - env(safe-area-inset-bottom)) * 1.5)));
    margin: auto auto 0;
  }

  .bar-menu-brand span {
    font-size: clamp(8px, 2.6vw, 14px);
  }

  .bar-menu-location {
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  }
}