/* ==========================================================================
   UNC STATUS — bright meme-energy design tokens
   Hero: your sunset cover photo, fades out as you scroll
   Body: warm cream comic-book zone (bright, sticker-heavy, thick borders)
   Roadmap: bright sky-blue "road" chapter with a literal winding path
   UNC AI: bold purple chapter to close things out
   Display: Bungee / Body: Nunito / Labels: Space Mono
   ========================================================================== */

:root{
  --cream: #fff3dd;
  --cream-2: #ffe7b3;
  --ink: #17140f;
  --ink-soft: rgba(23,20,15,0.7);
  --white: #ffffff;

  --pink: #ff4fa3;
  --blue: #2f6bff;
  --blue-2: #6fa0ff;
  --lime: #b9ff3d;
  --orange: #ff7a3d;
  --gold: #ffc93d;

  --road-bg: #37c6ff;
  --road-bg-2: #1fa8e6;

  --ai-bg: #6c3cff;
  --ai-bg-2: #4b23c9;

  --font-display: 'Bungee', cursive;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius: 18px;
  --border: 3.5px solid var(--ink);
  --container: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  width:100%;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--blue);
  margin-bottom:14px;
}

.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.1;
  letter-spacing:0.01em;
  margin-bottom:14px;
}
.section-title .hl{ color:var(--pink); -webkit-text-stroke:1.5px var(--ink); }

.section-sub{
  color:var(--ink-soft);
  max-width:560px;
  margin-bottom:44px;
  font-size:1.02rem;
  font-weight:600;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reveal-on-scroll */
.reveal, .reveal-left, .reveal-right{
  opacity:0;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal{ transform:translateY(38px) scale(0.98); }
.reveal-left{ transform:translateX(-50px); }
.reveal-right{ transform:translateX(50px); }
.reveal.in, .reveal-left.in, .reveal-right.in{
  opacity:1;
  transform:translate(0,0) scale(1);
}

/* ==========================================================================
   STICKERS
   ========================================================================== */
.sticker{
  position:absolute;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.05em;
  padding:8px 14px;
  border-radius:999px;
  border:2.5px solid var(--ink);
  white-space:nowrap;
  z-index:3;
  animation:stickerFloat 5s ease-in-out infinite;
  pointer-events:none;
}
.sticker.pink{ background:var(--pink); color:var(--white); }
.sticker.lime{ background:var(--lime); color:var(--ink); }
.sticker.gold{ background:var(--gold); color:var(--ink); }
.sticker.blue{ background:var(--blue); color:var(--white); }
@keyframes stickerFloat{
  0%, 100%{ transform:translateY(0) rotate(var(--rot,-6deg)); }
  50%{ transform:translateY(-10px) rotate(var(--rot,-6deg)); }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,243,221,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:3px solid var(--ink);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--ink);
}
.nav-logo span{ color:var(--pink); margin-left:4px; }

.nav-links{
  display:flex; align-items:center; gap:28px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12.5px;
  text-transform:uppercase;
}
.nav-links a{
  position:relative;
  color:var(--ink);
  transition:color .2s;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:3px; background:var(--pink);
  transition:width .2s;
}
.nav-links a:hover::after{ width:100%; }

.nav-links a.nav-ai{
  background:var(--ink);
  color:var(--cream);
  padding:9px 16px;
  border-radius:999px;
  border:2.5px solid var(--ink);
}
.nav-links a.nav-ai::after{ display:none; }
.nav-links a.nav-ai:hover{ background:var(--pink); border-color:var(--ink); color:var(--white); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:28px; }
.nav-toggle span{ display:block; height:3px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  position:fixed; top:57px; left:0; right:0; z-index:90;
  background:var(--ink);
  border-bottom:3px solid var(--ink);
  overflow:hidden; white-space:nowrap; padding:7px 0;
}
.ticker-track{
  display:inline-flex; gap:16px;
  animation:ticker 24s linear infinite;
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:0.08em;
  color:var(--lime);
}
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   HERO — full-bleed cover image that fades as you scroll
   ========================================================================== */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.hero-media{
  position:fixed;
  inset:0;
  z-index:0;
  will-change:opacity, transform;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.hero-fade-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,20,15,0.15) 0%, rgba(23,20,15,0.55) 70%, var(--cream) 100%);
}

.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px 90px;
  text-align:center;
  color:var(--white);
  will-change:opacity, transform;
}
.hero-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.12em;
  background:var(--white);
  color:var(--ink);
  padding:7px 16px;
  border-radius:999px;
  border:2.5px solid var(--ink);
  margin-bottom:26px;
  animation:fadeUp .8s ease both;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.8rem, 11vw, 6.6rem);
  line-height:0.98;
  text-shadow:4px 4px 0 var(--ink);
}
.hero-title .line{ display:block; animation:fadeUp .9s ease both; }
.hero-title .line.pop{ color:var(--gold); animation-delay:.12s; }
.hero-sub{
  margin:24px auto 0;
  max-width:520px;
  font-size:1.08rem;
  font-weight:700;
  animation:fadeUp 1s ease .2s both;
}
.hero-actions{
  display:flex; justify-content:center; gap:16px;
  margin-top:32px; flex-wrap:wrap;
  animation:fadeUp 1.1s ease .3s both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px;
  border-radius:12px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:0.85rem;
  letter-spacing:0.02em;
  transition:transform .2s, box-shadow .2s;
}
.btn-primary{
  background:var(--pink);
  color:var(--white);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn-ghost{
  background:var(--white);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); background:var(--gold); }

.scroll-cue{
  margin:44px auto 0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em;
  opacity:.85;
  animation:fadeUp 1.3s ease .4s both;
}
.scroll-cue-line{
  width:2px; height:34px;
  background:linear-gradient(180deg, var(--white), transparent);
  animation:scrollCue 1.6s ease-in-out infinite;
}
@keyframes scrollCue{ 0%,100%{ transform:scaleY(1); opacity:1; } 50%{ transform:scaleY(0.5); opacity:0.4; } }

/* ==========================================================================
   ABOUT — this opaque section slides up over the fixed hero image,
   covering it as you scroll (that's what creates the fade/cover effect)
   ========================================================================== */
.about{ position:relative; z-index:2; background:var(--cream); padding:100px 0; }
.about-inner{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}
.about-quote{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  line-height:1.45;
  max-width:640px;
  border-left:5px solid var(--pink);
  padding-left:26px;
  margin-bottom:36px;
}
.about-card{
  background:var(--white);
  border:var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:7px 7px 0 var(--ink);
}
.about-desc{ font-size:1.04rem; color:var(--ink); margin-bottom:16px; }
.about-desc:last-child{ margin-bottom:0; }
.about-desc strong{ color:var(--pink); font-family:var(--font-mono); font-size:1.15em; }

.about-deco{ position:relative; display:flex; justify-content:center; }
.deco-img{
  border-radius:var(--radius);
  border:var(--border);
}
.deco-tilt{
  max-width:340px;
  transform:rotate(3deg);
  box-shadow:8px 8px 0 var(--ink);
  background:var(--white);
}
.about-deco .sticker{ bottom:-14px; left:-10px; }

/* ==========================================================================
   SHOWCASE / CAROUSEL
   ========================================================================== */
.showcase{ padding:60px 0 100px; }
.carousel{ position:relative; }
.carousel-track{ display:flex; transition:transform .55s cubic-bezier(.65,0,.35,1); }
.carousel-slide{
  position:relative; flex:0 0 100%;
  aspect-ratio:16/9; max-height:520px;
  border-radius:var(--radius); overflow:hidden;
  border:var(--border); background:var(--white);
  box-shadow:8px 8px 0 var(--ink);
}
.carousel-slide img{
  width:100%; height:100%; object-fit:contain;
  background:radial-gradient(circle at 50% 40%, rgba(47,107,255,0.08), transparent 65%);
}
.slide-tag{
  position:absolute; top:16px; left:16px;
  background:var(--ink); color:var(--lime);
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:0.05em;
  padding:8px 14px; border-radius:999px;
}
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--white); color:var(--ink); font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:background .2s, color .2s, transform .2s;
  z-index:3;
}
.carousel-btn:hover{ background:var(--pink); color:var(--white); transform:translateY(-50%) scale(1.06); }
.carousel-btn.prev{ left:-8px; }
.carousel-btn.next{ right:-8px; }
.carousel-dots{ display:flex; justify-content:center; gap:9px; margin-top:26px; }
.carousel-dots button{ width:10px; height:10px; border-radius:50%; background:var(--ink); opacity:.25; border:2px solid var(--ink); transition:opacity .25s, transform .25s; }
.carousel-dots button.active{ opacity:1; background:var(--pink); transform:scale(1.2); }

/* ==========================================================================
   DECORATIVE SCROLL BREAKS
   ========================================================================== */
.break-strip{
  padding:70px 0;
  background:var(--cream-2);
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  overflow:hidden;
}
.break-strip.alt{ background:var(--gold); }
.break-inner{
  display:flex; align-items:center; gap:48px;
  flex-wrap:wrap;
  justify-content:center;
}
.break-inner.reverse{ flex-direction:row-reverse; }
.deco-tv{ width:220px; border-radius:var(--radius); box-shadow:8px 8px 0 var(--ink); transform:rotate(-2deg); }
.deco-champagne{ width:260px; border-radius:var(--radius); box-shadow:8px 8px 0 var(--ink); transform:rotate(2deg); }
.break-copy{ max-width:420px; }
.break-quote{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.3rem, 3vw, 2rem);
  line-height:1.3;
}
.break-quote .hl{ color:var(--pink); }

/* ==========================================================================
   SUPPLY
   ========================================================================== */
.supply{
  position:relative;
  padding:110px 0;
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
}
.supply-inner{ text-align:center; }
.supply-number{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(6rem, 22vw, 12rem);
  line-height:0.85;
  color:var(--gold);
  text-shadow:6px 6px 0 var(--pink);
}
.supply-label{
  font-family:var(--font-mono); font-weight:700;
  letter-spacing:0.16em; color:var(--lime); margin-top:16px; font-size:0.9rem;
}
.supply-copy{ max-width:480px; margin:20px auto 0; color:rgba(255,243,221,0.75); font-weight:600; }

/* ==========================================================================
   ROADMAP — road-style scroll timeline
   ========================================================================== */
.roadmap{
  padding:100px 0 60px;
  overflow-x:hidden;
  background:linear-gradient(180deg, var(--road-bg), var(--road-bg-2));
  color:var(--ink);
}
.roadmap .eyebrow{ color:var(--ink); }
.roadmap .section-title .hl{ color:var(--white); -webkit-text-stroke:1.5px var(--ink); }
.roadmap .section-sub{ color:rgba(23,20,15,0.75); }

.road-wrap{
  position:relative;
  overflow:hidden;
  max-width:var(--container);
  margin:0 auto;
  padding:20px 24px 40px;
}
.road-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:100%; }
.road-path-bg{ fill:none; stroke:rgba(255,255,255,0.45); stroke-width:6; stroke-linecap:round; }
.road-path{
  fill:none; stroke:var(--white); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));
}

.road-stop{
  position:relative;
  min-height:300px;
  display:flex;
  align-items:center;
}
.road-pin{
  position:absolute;
  left:50%;
  top:14%;
  transform:translate(-50%,-50%) scale(0.7);
  width:56px; height:56px;
  border-radius:50%;
  background:var(--pink);
  border:4px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  color:var(--white);
  font-size:1.1rem;
  z-index:4;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.road-pin.lit{ transform:translate(-50%,-50%) scale(1); }

.road-card{
  position:relative;
  width:min(430px, 92%);
  background:var(--white);
  border:var(--border);
  border-radius:var(--radius);
  padding:26px 28px;
  box-shadow:7px 7px 0 var(--ink);
}
.road-stop[style*="--stop-side:left"] .road-card{ margin-right:auto; margin-left:6%; }
.road-stop[style*="--stop-side:right"] .road-card{ margin-left:auto; margin-right:6%; }

.road-card-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.road-phase-label{
  font-family:var(--font-mono); font-weight:700; font-size:11.5px;
  letter-spacing:0.1em; color:var(--pink);
}
.road-card h3{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; }
.road-card ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.road-card li{
  font-size:0.94rem; color:var(--ink);
  padding-left:22px; position:relative;
}
.road-card li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--blue); font-weight:700;
}

/* ==========================================================================
   UNC AI
   ========================================================================== */
.ai-page{
  position:relative;
  padding:100px 0 130px;
  background:linear-gradient(160deg, var(--ai-bg), var(--ai-bg-2));
  color:var(--white);
  overflow:hidden;
}
.ai-page .eyebrow{ color:var(--lime); }
.ai-page .section-title .hl{ color:var(--lime); -webkit-text-stroke:0; }
.ai-page .section-sub{ color:rgba(255,255,255,0.78); }

.ai-bg-deco{
  position:absolute;
  right:-60px; top:-40px;
  width:420px;
  opacity:0.16;
  border-radius:var(--radius);
  transform:rotate(6deg);
  pointer-events:none;
}

.ai-shell{ max-width:720px; margin:0 auto; position:relative; z-index:2; }
.ai-window{
  background:var(--cream);
  color:var(--ink);
  border:var(--border);
  border-radius:20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:600px;
  box-shadow:9px 9px 0 var(--ink);
}
.ai-window-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px;
  border-bottom:3px solid var(--ink);
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:0.06em;
  background:var(--gold);
}
.ai-window-dot{ width:11px; height:11px; border-radius:50%; background:var(--pink); border:2px solid var(--ink); }
.ai-status{ margin-left:auto; display:flex; align-items:center; gap:6px; color:#1c8a4b; }
.ai-status-dot{ width:8px; height:8px; border-radius:50%; background:#1c8a4b; animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:0.3; } }

.ai-messages{ flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth; }
.ai-messages::-webkit-scrollbar{ width:6px; }
.ai-messages::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:99px; opacity:.3; }

.ai-msg{ display:flex; gap:12px; max-width:88%; animation:fadeUp .4s ease both; }
.ai-msg-user{ align-self:flex-end; flex-direction:row-reverse; }
.ai-avatar{
  flex-shrink:0; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:12px;
  background:var(--pink); color:var(--white); border:2px solid var(--ink);
}
.ai-msg-user .ai-avatar{ background:var(--blue); color:var(--white); }
.ai-bubble{
  background:var(--white); border:2.5px solid var(--ink);
  padding:12px 16px; border-radius:12px;
  font-size:0.95rem; line-height:1.55; font-weight:600;
}
.ai-msg-user .ai-bubble{ background:var(--blue); border-color:var(--ink); color:var(--white); }
.ai-bubble a{ color:var(--blue); text-decoration:underline; }
.ai-msg-user .ai-bubble a{ color:var(--white); }
.ai-bubble.typing{ display:flex; gap:5px; align-items:center; padding:14px 16px; }
.ai-bubble.typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.5; animation:typingDot 1.1s ease-in-out infinite; }
.ai-bubble.typing span:nth-child(2){ animation-delay:.15s; }
.ai-bubble.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.ai-quick-replies{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px; }
.quick-reply{
  font-family:var(--font-mono); font-weight:700; font-size:11px;
  padding:8px 13px; border-radius:999px; border:2px solid var(--ink);
  background:var(--white);
  transition:background .2s, transform .2s;
  white-space:nowrap;
}
.quick-reply:hover{ background:var(--lime); transform:translateY(-2px); }

.ai-input-row{ display:flex; gap:10px; padding:16px 20px; border-top:3px solid var(--ink); background:var(--white); }
.ai-input{
  flex:1; background:var(--cream); border:2.5px solid var(--ink); border-radius:10px;
  padding:13px 16px; color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:0.95rem;
}
.ai-input:focus{ outline:none; border-color:var(--pink); }
.ai-input::placeholder{ color:var(--ink-soft); }
.ai-send{
  width:46px; height:46px; border-radius:10px;
  background:var(--pink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--ink);
  transition:transform .2s, background .2s;
  flex-shrink:0;
}
.ai-send:hover{ background:var(--gold); color:var(--ink); transform:scale(1.05); }
.ai-send:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding:50px 0; background:var(--ink); color:var(--cream); text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-logo{ font-family:var(--font-display); font-size:1.05rem; }
.footer-logo span{ color:var(--pink); margin-left:4px; }
.footer p{ color:rgba(255,243,221,0.65); font-size:0.9rem; font-weight:600; }
.footer-links{ display:flex; gap:22px; font-family:var(--font-mono); font-weight:700; font-size:11.5px; }
.footer-links a:hover{ color:var(--lime); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .about-inner{ grid-template-columns:1fr; }
  .about-deco{ order:-1; }
  .road-stop[style*="--stop-side:left"] .road-card,
  .road-stop[style*="--stop-side:right"] .road-card{ margin:0 auto; }
  .road-pin{ left:50%; }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; top:96px; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:var(--cream);
    border-bottom:3px solid var(--ink);
    padding:20px 24px 28px; gap:16px;
    transform:translateY(-140%);
    transition:transform .3s ease;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{ display:flex; }
  .ticker{ top:57px; }
  .about{ padding:70px 0; }
  .carousel-btn{ width:38px; height:38px; font-size:1.3rem; }
  .carousel-btn.prev{ left:6px; }
  .carousel-btn.next{ right:6px; }
  .ai-window{ height:70vh; }
  .about-card{ padding:22px; }
  .break-inner, .break-inner.reverse{ flex-direction:column; text-align:center; }
  .ai-bg-deco{ display:none; }
  .road-card{ padding:20px; }
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--pink); outline-offset:2px;
}