.hero{
  min-height: calc(100svh - 70px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 0 30px; text-align:center;
}
.hero .eyebrow{display:block; margin-bottom:10px;}

.hero-inner{
  display:flex; align-items:center; justify-content:center; gap:clamp(20px, 5vw, 60px);
  flex-wrap:wrap; width:100%;
}
.hero-text{ max-width:360px; text-align:left; }
.hero-text h1{font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin:0 0 12px;}
.hero-text p{margin:0; color:var(--teal-deep); opacity:0.8;}

.radial-wrap{
  position:relative;
  width:clamp(280px, 40vw, 560px);
  aspect-ratio:1/1;
  margin:0;
  flex-shrink:0;
}

@media(max-width:860px){
  .hero{ min-height:auto; padding:20px 0 30px; }
  .hero-inner{ flex-direction:column; text-align:center; gap:24px; }
  .hero-text{ text-align:center; max-width:420px; }
  .radial-wrap{ width:min(calc(100vw - 64px), 420px); }
}
.radial-ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 34%),
    conic-gradient(from 0deg, rgba(39,71,84,0.06), rgba(173,138,78,0.08), rgba(124,144,120,0.07), rgba(39,71,84,0.06));
  border:1px solid var(--line);
}
.radial-ring::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px dashed rgba(173,138,78,0.35);
}
.radial-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:31%; aspect-ratio:1/1; border-radius:50%;
  background:var(--parchment); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 8px 24px rgba(35,48,58,0.18);
  text-align:center; text-decoration:none; color:var(--ink);
  z-index:5;
}
.radial-center img{ width:56%; height:auto; }
.radial-center span{ display:block; font-family:var(--mono); font-size:clamp(0.48rem, 1.6vw, 0.6rem); letter-spacing:0.08em; margin-top:4px; color:var(--teal);}

.spoke{
  position:absolute; top:50%; left:50%;
  width:clamp(70px, 19vw, 118px);
  margin-top:calc(-1 * clamp(27px, 7.5vw, 46px));
  margin-left:calc(-1 * clamp(35px, 9.5vw, 59px));
  text-align:center; text-decoration:none; color:var(--ink);
}
.spoke .dot{
  width:clamp(34px, 9.5vw, 54px); height:clamp(34px, 9.5vw, 54px); border-radius:50%; margin:0 auto 6px;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:clamp(0.85rem, 2.8vw, 1.35rem);
  box-shadow:0 6px 16px rgba(35,48,58,0.12);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spoke .label{ font-size:clamp(0.56rem, 2vw, 0.72rem); font-weight:600; line-height:1.2; display:block;}
.spoke:hover .dot, .spoke:focus-visible .dot{
  transform:scale(1.09); border-color:var(--gold); box-shadow:0 10px 22px rgba(173,138,78,0.28);
}
.spoke:focus-visible{ outline:none; }
.spoke:focus-visible .dot{ outline:3px solid var(--gold); outline-offset:2px; }

/* Only shown to browsers without JavaScript enabled */
.radial-noscript-fallback ul{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0; max-width:760px; margin:18px auto 0;}
.radial-noscript-fallback a{ display:block; padding:10px 14px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); font-size:0.9rem;}