/* ==========================================================================
   Nodehaus · service pages (one template, four doors)
   ========================================================================== */

.nh-h--svc { font-size: clamp(40px, 6vw, 84px); }
.nh-light { background: var(--paper); color: var(--ink); }

/* ---------- hero: copy left, the door fully open with a little sun right ---------- */
.svc-hero {
  max-width: var(--max); margin: 0 auto; padding: 40px var(--pad) 110px;
  display: flex; flex-wrap: wrap; gap: 64px; align-items: center;
}
.svc-hero-copy { flex: 1.3 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.svc-hero-art { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.svc-caption { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--label); text-align: center; }

.sunbox {
  position: relative; display: block; width: 100%; max-width: 300px; aspect-ratio: 200 / 320;
  padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sunbox:focus-visible { outline: 1px solid var(--paper); outline-offset: 12px; }
.sunbox > * { pointer-events: none; }
.sunbox span, .sunbox svg { display: block; }
.sun-aura { position: absolute; left: -45%; right: -45%; top: -12%; bottom: 10%; background: radial-gradient(ellipse at 50% 45%, rgba(255, 232, 180, .16), rgba(255, 232, 180, 0) 62%); }
.sun-floor { position: absolute; left: -40%; right: -40%; bottom: -12%; height: 24%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 236, 196, .38), rgba(255, 236, 196, 0) 68%); }
.sun-arch, .sun-leaf { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-leaf { transform-origin: left center; transform: perspective(1700px) rotateY(-84deg); }
.sun-room {
  position: absolute; left: 11%; right: 11%; top: 8%; bottom: 1.25%;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0; overflow: hidden; background: var(--ink-room);
}
.sun-room-spill { left: -20%; right: -20%; bottom: 0; height: 46%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 236, 196, .45), rgba(255, 236, 196, 0) 70%); }
.sun-halo {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 150%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 223, .95) 0%, rgba(255, 232, 180, .6) 12%, rgba(255, 214, 140, .22) 30%, rgba(255, 214, 140, .06) 48%, rgba(255, 214, 140, 0) 62%);
}

/* the sun: follows the pointer (up to 16px), swells on click */
.sun {
  --mx: 0px; --my: 0px; --s: 1;
  position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) translate(var(--mx), var(--my)) scale(var(--s));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.sun.is-near { --s: 1.1; }
.sun.is-bursting { --s: 1.22; }
.sun-inner { position: absolute; inset: 0; transition: filter .4s; }
.sunbox:hover .sun-inner, .sunbox:focus-visible .sun-inner, .sun.is-near .sun-inner { filter: brightness(1.25); }

.rays, .rays2, .corona, .sun .core { position: absolute; border-radius: 50%; }
.rays {
  inset: -70%; background: repeating-conic-gradient(rgba(255, 238, 196, .32) 0deg 3deg, rgba(255, 238, 196, 0) 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 60%); mask: radial-gradient(circle, #000 16%, transparent 60%);
  animation: spin 40s linear infinite;
}
.rays2 {
  inset: -45%; background: repeating-conic-gradient(rgba(255, 226, 170, .28) 0deg 2deg, rgba(255, 226, 170, 0) 2deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%);
  animation: spin 64s linear infinite reverse;
}
.corona { inset: -30%; background: radial-gradient(circle, rgba(255, 242, 208, .75), rgba(255, 214, 140, 0) 66%); animation: corona 3.4s ease-in-out infinite; }
.sun .core {
  inset: 20%; background: radial-gradient(circle at 42% 38%, #FFFFFF 0%, #FFF3D2 45%, #FFD98E 100%);
  box-shadow: 0 0 30px 10px rgba(255, 236, 190, .85), 0 0 90px 30px rgba(255, 214, 140, .4);
}
.burst-ring {
  position: absolute; inset: 18%; border-radius: 50%; border: 2px solid rgba(255, 240, 205, .95);
  box-shadow: 0 0 20px 4px rgba(255, 226, 170, .6); animation: burst .8s ease-out forwards;
}
.tw { position: absolute; fill: #FFF3D2; animation: twinkle 2.8s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes burst { from { transform: scale(.7); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@keyframes corona { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.sunbox .spark { animation-duration: 3.2s; }

/* ---------- what it is ---------- */
.svc-what { border-top: 1px solid var(--hair); }
.svc-what-inner { max-width: var(--max); margin: 0 auto; padding: 110px var(--pad); display: flex; flex-wrap: wrap; gap: 56px; }
.svc-what-head { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.svc-what-body { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.svc-what-body p { font-size: 18px; line-height: 1.75; color: var(--body); }

/* ---------- who it's for ---------- */
.svc-who { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 110px; display: flex; flex-direction: column; gap: 40px; }
.svc-who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.svc-card {
  border: 1px solid var(--hair); border-radius: 6px; padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 14px; min-height: 200px; background: linear-gradient(#151514, #121212);
}
.svc-card .nh-glow-dot { width: 10px; height: 10px; box-shadow: 0 0 12px 3px rgba(255, 226, 170, .45); }
.svc-card h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.1; overflow-wrap: break-word; }
.svc-card p { font-size: 15px; line-height: 1.65; color: var(--body); }

/* ---------- how it works (light) ---------- */
.svc-how-inner { max-width: var(--max); margin: 0 auto; padding: 110px var(--pad); display: flex; flex-direction: column; gap: 56px; }
.svc-how-head { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.svc-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.svc-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; border-top: 1px dashed var(--grey-2); }
.svc-steps li { position: relative; display: flex; flex-direction: column; gap: 16px; }
.svc-node {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}
.svc-node i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.svc-steps h3 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 500; }
.svc-steps p { font-size: 15px; line-height: 1.65; color: var(--paper-body); }

/* ---------- what's included ---------- */
.svc-included { max-width: var(--max); margin: 0 auto; padding: 110px var(--pad); display: flex; flex-wrap: wrap; gap: 56px; }
.svc-included-head { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.svc-checklist {
  flex: 2 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 1px solid var(--hair);
}
.svc-checklist li { display: flex; gap: 14px; align-items: baseline; padding: 20px 8px 20px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.5; }
.svc-bullet {
  flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--light-1);
  box-shadow: 0 0 8px 2px rgba(255, 226, 170, .45); transform: translateY(-2px);
}
/* clearly-marked placeholders still to be filled in before launch */
.todo { color: var(--light-3); font-size: .86em; letter-spacing: .02em; border-bottom: 1px dashed rgba(255, 217, 142, .55); }

/* ---------- contact ---------- */
.svc-contact { border-top: 1px solid var(--hair); background: radial-gradient(ellipse at 50% 0%, rgba(255, 232, 180, .08), rgba(255, 232, 180, 0) 60%); }
.svc-contact-inner { max-width: var(--max); margin: 0 auto; padding: 110px var(--pad); display: flex; flex-direction: column; gap: 48px; }
.svc-contact-head { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.svc-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.svc-contact-card {
  text-decoration: none; border: 1px solid var(--hair-2); border-radius: 6px; padding: clamp(22px, 4vw, 36px);
  display: flex; flex-direction: column; gap: 14px; background: var(--ink-card); min-width: 0;
  transition: border-color .25s ease;
}
.svc-contact-card:hover, .svc-contact-card:focus-visible { border-color: var(--paper); }
.svc-contact-card .nh-label { font-size: 11px; }
.svc-contact-big { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.svc-contact-note { font-size: 14px; color: var(--body); }
.svc-visit { text-align: center; font-size: 14px; color: var(--label); }

/* ---------- the other doors ---------- */
.svc-others { border-top: 1px solid var(--hair); }
.svc-others-inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad); display: flex; flex-direction: column; gap: 32px; }
.svc-others-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }

@media (max-width: 900px) {
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .svc-steps::before { display: none; }
}
@media (max-width: 720px) {
  .svc-hero { padding-bottom: 80px; gap: 48px; }
  .svc-what-inner, .svc-included, .svc-contact-inner, .svc-how-inner { padding-top: 80px; padding-bottom: 80px; }
  .svc-who { padding-bottom: 80px; }
}
@media (max-width: 520px) {
  /* one column: the dashed line runs down the side, node dots sit on it */
  .svc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .svc-steps::before { display: block; left: 10px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1px dashed var(--grey-2); }
  .svc-steps li { padding-left: 48px; gap: 8px; }
  .svc-node { position: absolute; left: 0; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rays, .rays2, .corona, .tw, .burst-ring { animation: none; }
  .rays, .rays2 { opacity: .8; }
  .sun, .sun-inner { transition: none; }
}