
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:#0a0a0c;color:#e6e8ec;font-family:Cambria, Georgia, serif;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
section{max-width:1080px;margin:0 auto;padding:5rem 6vw}
h2{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-weight:800;font-size:clamp(1.7rem,4.2vw,2.7rem);
  margin-bottom:1rem;letter-spacing:-.01em}
/* HERO HUB */
.hub{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;text-align:center}
.ring{position:relative;width:min(80vw,520px);aspect-ratio:1;margin:0 auto}
.rline{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ring[data-open="0"] .rline{transform:rotate(-40deg);opacity:.4}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44%;aspect-ratio:1;border-radius:50%;background:#3a9de0;color:#141414;
  border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.25rem;box-shadow:0 12px 40px rgba(0,0,0,0.28);z-index:3}
.rkick{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.rname{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-weight:800;font-size:clamp(1.1rem,3.4vw,1.9rem);
  line-height:1;padding:0 .4rem}
.rhint{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.orbit{position:absolute;inset:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),
  opacity .4s}
.ring[data-open="0"] .orbit{transform:scale(.36);opacity:0;pointer-events:none}
.spoke{position:absolute;transform:translate(-50%,-50%);
  font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-weight:700;font-size:.9rem;white-space:nowrap;
  background:#141518;border:1px solid rgba(230,232,236,0.16);border-radius:999px;
  padding:.5rem 1rem;transition:.2s;z-index:2}
.spoke:hover{background:#3a9de0;color:#141414;border-color:#3a9de0}
.rsub{color:#565a60;font-size:1.1rem;max-width:44ch;margin-top:2.4rem}
/* PILL ABOUT */
.rpill{max-width:760px;text-align:center}
.rpill{background:#141518;border:1px solid rgba(230,232,236,0.16);border-radius:999px;
  padding:4rem clamp(2rem,7vw,5rem);margin-top:2rem;margin-bottom:2rem}
.rpill p{color:#565a60;font-size:1.1rem}
/* SERVICE DIAL */
.rdial-head{text-align:center;margin-bottom:2.4rem}
.rtag{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:#3a9de0;border:1px solid #3a9de0;border-radius:999px;padding:.4rem 1.1rem}
.rdial{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.rslice{position:relative}
.rslice-in{background:#141518;border:1px solid rgba(230,232,236,0.16);border-radius:0px;
  padding:1.6rem;height:100%;position:relative;overflow:hidden;transition:.25s}
.rslice-in::before{content:"";position:absolute;top:-30px;right:-30px;width:80px;
  height:80px;border-radius:50%;background:rgba(58,157,224,0.14);transform:rotate(var(--a))}
.rslice-in:hover{transform:translateY(-4px);border-color:#3a9de0}
.rdot{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;
  height:2.2rem;border-radius:50%;background:#3a9de0;color:#141414;
  font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-weight:800;margin-bottom:.7rem}
.rslice h3{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:1.05rem;margin-bottom:.35rem}
.rslice p{color:#565a60;font-size:.92rem}
/* LOCKETS */
.lockets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.4rem;justify-items:center}
.locket{margin:0;width:100%;max-width:200px;aspect-ratio:1;border-radius:50%;
  overflow:hidden;border:3px solid rgba(230,232,236,0.16);transition:.3s}
.locket:hover{border-color:#3a9de0;transform:scale(1.05)}
.locket img{width:100%;height:100%;object-fit:cover}
/* QUOTES */
.rquotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.rquote{margin:0;background:#141518;border:1px solid rgba(230,232,236,0.16);border-radius:0px;
  padding:1.6rem;text-align:center}
.rquote p{font-style:italic;font-size:1.05rem;margin-bottom:.7rem}
.rquote cite{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-style:normal;color:#3a9de0;font-size:.85rem;
  letter-spacing:.08em}
/* CONTACT */
.rcontact{display:flex;justify-content:center}
.rcontact-disc{background:#3a9de0;color:#141414;border-radius:36px;
  padding:clamp(2.5rem,7vw,4.5rem);text-align:center;max-width:640px}
.rcontact-disc h2{color:#141414}
.rcontact-disc p{opacity:.92;margin-bottom:1.6rem}
.rbtn{display:inline-block;background:#0a0a0c;color:#e6e8ec;font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;
  font-weight:700;padding:.85rem 2rem;border-radius:999px;margin-bottom:1.4rem;
  transition:.2s}
.rbtn:hover{transform:translateY(-2px)}
.rlines{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  font-size:.9rem;opacity:.9}
.rfoot{text-align:center;padding:3rem 6vw;color:#565a60;font-size:.85rem}
@media(max-width:640px){
  .spoke{font-size:.72rem;padding:.35rem .7rem}
  .rpill{border-radius:32px;padding:2.5rem 1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .orbit,.rline,.rslice-in,.locket,.rbtn{transition:none}
}


.xq{box-sizing:border-box;font-family:Cambria, Georgia, serif;color:#e6e8ec;padding:56px 24px;width:100%}
.xq *{box-sizing:border-box;margin:0}
.xq .xq-wrap{max-width:1060px;margin:0 auto}
.xq h2{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:1.7rem;line-height:1.2;margin-bottom:8px}
.xq .xq-kick{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#3a9de0;margin-bottom:10px;font-weight:700}

.xq-badges{padding:26px 24px;border-top:1px solid rgba(230,232,236,0.14);border-bottom:1px solid rgba(230,232,236,0.14);background:rgba(230,232,236,0.05)}
.xq-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.xq-badgehead{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.xq-badge{border:1.5px solid #3a9de0;color:#3a9de0;border-radius:999px;padding:7px 16px;font-size:.8rem;font-weight:700;letter-spacing:.04em}


.xq-steplist{counter-reset:xqs;list-style:none;padding:0;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.xq-step{counter-increment:xqs;position:relative;padding:18px 18px 18px 20px;border-left:3px solid #3a9de0;background:rgba(230,232,236,0.05);border-radius:0 0px 0px 0}
.xq-step::before{content:"0" counter(xqs);display:block;font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:.8rem;letter-spacing:.1em;color:#3a9de0;font-weight:800;margin-bottom:8px}
.xq-step h3{font-family:Copperplate, 'Copperplate Gothic Light', 'Segoe UI', sans-serif;font-size:1.02rem;margin-bottom:6px}
.xq-step p{font-size:.9rem;color:#565a60}


/* =====================================================
   DESIGN DNA: giant-ghost
   Whole-page visual system applied over the layout
   archetype. Appended last so it wins the cascade.
   ===================================================== */
html::before{content:'forge';position:fixed;left:50%;top:42%;transform:translate(calc(-50% + var(--gpx,0px)),calc(-50% + var(--gpy,0px))) rotate(0deg);z-index:99980;pointer-events:none;font-family:'Arial Black', 'Arial Bold', Arial, sans-serif;font-weight:900;font-size:26vw;letter-spacing:.04em;white-space:nowrap;color:#ebedf0;opacity:.06;text-transform:uppercase}
img,a[class*="btn"],button,span[class*="btn"],div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{box-shadow:none !important}
h1,h2,h3{letter-spacing:-0.03em !important;font-weight:800 !important}
img{border-radius:0 !important;filter:grayscale(.25) contrast(1.04)}
a[class*="btn"],button,span[class*="btn"]{border-radius:0 !important;border:1.5px solid currentColor !important;background:transparent !important;color:inherit !important;text-transform:uppercase;letter-spacing:.24em;font-size:.78em}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border:none !important;border-top:2px solid #ebedf0 !important;border-radius:0 !important}
