/* Nick Spinelli landing pages — shared shell + responsive reflow.
   The designs are inline-styled 1280px layouts. These rules make them
   full-bleed at any width and reflow them on small screens, so they use
   !important where they have to beat an inline style. */

*{ box-sizing:border-box; }
html{ background:#000; scroll-behavior:smooth; }
body{
  margin:0; padding:0; background:#000;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--color-accent); color:#fff; }
a{ color:var(--color-accent); }
.np-frame nav a, .np-frame a[href^="#"]{ transition:color 160ms var(--ease-out, ease); }
.np-frame a[href^="#experience-"]:hover,
.np-frame a[href^="#floors-"]:hover,
.np-frame a[href^="#reviews-"]:hover{ color:var(--color-accent-soft) !important; }
a:hover{ color:var(--color-accent-deep, var(--color-accent)); }
img{ max-width:100%; }

/* ---- full-bleed shell: section backgrounds run edge to edge, content is
        centred inside them, so there are never dark rails on wide screens ---- */
.np-frame{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:clip;
}
.np-frame *{ box-sizing:border-box; }
.np-frame > section,
.np-frame > footer,
.np-frame > div{ width:100%; }

/* centre the content of each band without touching full-bleed media/scrims */
.np-frame > section > *:not(img):not([style*="position:absolute"]),
.np-frame > footer > *{
  width:100%;
  max-width:1296px;
  margin-left:auto;
  margin-right:auto;
}

/* nav row: container centres, children keep their natural width, link group
   pushes to the right edge */
.np-frame > div[style*="padding:26px 72px"]{
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  gap:20px;
}
.np-frame > div[style*="padding:26px 72px"] > *{
  width:auto;
  max-width:none;
  flex:0 0 auto;
}
.np-frame > div[style*="padding:26px 72px"] > img{ flex:0 0 auto; }
.np-frame > div[style*="padding:26px 72px"] > div{ margin-left:auto; }
/* nav + hero body sit inside the hero section */
.np-frame > section > div[style*="position:relative"]{
  width:100%; max-width:1296px; margin-left:auto; margin-right:auto;
}
/* the editorial split hero and the 2-col photo feature stay edge to edge */
.np-frame [data-bleed],
.np-frame [data-bleed] > *{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.np-frame [data-bleed] > div[style*="padding:88px 64px"]{
  padding-left:clamp(22px, 5vw, 96px) !important;
  padding-right:clamp(22px, 5vw, 96px) !important;
}

/* ---- HoneyBook placement: the injected iframe carries height="90%", so the
        container needs a resolved height for it to fill ---- */
.hb-p-673bb3c59a2b2f0025fdcb19-2{
  --hb-h: 1500px;
  height: var(--hb-h) !important;
  min-height: var(--hb-h) !important;
  width:100%;
}
.hb-p-673bb3c59a2b2f0025fdcb19-2 iframe,
.np-frame iframe[src*="hbportal.co"]{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height: var(--hb-h, 620px) !important;
  border:0 !important;
}
.np-frame iframe[src*="hbportal.co"]{ height: var(--hb-h, 1500px) !important; }
/* the quote panel must never clip the form */
.np-frame section[id^="quote-"] div[style*="border-radius:var(--radius-md)"]{ overflow:visible !important; }
.np-frame section[id^="quote-"]{ align-items:start !important; }
.np-frame section[id^="quote-"] > div[style*="align-items:center"]{ align-items:start !important; }

/* ---------------------------------- tablet --------------------------------- */
@media (max-width: 1100px){
  /* nav labels collapse early so they never crowd the logo */
  .np-frame > div[style*="padding:26px 72px"] span[style*="letter-spacing:0.2em"],
  .np-frame > div[style*="padding:26px 72px"] a[style*="letter-spacing:0.2em"],
  .np-frame > section > div[style*="padding:30px 72px"] span[style*="letter-spacing:0.2em"],
  .np-frame > section > div[style*="padding:30px 72px"] a[style*="letter-spacing:0.2em"]{ display:none !important; }
  .np-frame > section:not([data-bleed]),
  .np-frame > footer,
  .np-frame > div[style*="padding:26px 72px"],
  .np-frame > section > div[style*="padding:30px 72px"]{
    padding-left:40px !important; padding-right:40px !important;
  }
  .np-frame > section[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .np-frame > section > div[style*="grid-template-columns:1fr 1fr"]{ gap:48px !important; }
}

/* ---------------------------------- mobile --------------------------------- */
@media (max-width: 820px){
  .np-frame > section:not([data-bleed]),
  .np-frame > footer,
  .np-frame > div[style*="padding:26px 72px"],
  .np-frame > section > div[style*="padding:30px 72px"]{
    padding-left:22px !important; padding-right:22px !important;
  }
  .np-frame > section:not([data-bleed]){ padding-top:64px !important; padding-bottom:64px !important; }
  .np-frame > section[style*="min-height:768px"],
  .np-frame > section[style*="min-height:760px"]{
    min-height:0 !important; padding-top:24px !important; padding-bottom:64px !important;
  }
  .np-frame [data-bleed] > div[style*="padding:88px 64px"]{ padding:64px 22px !important; }
  .np-frame [data-bleed] > div[style*="position:relative"]{ min-height:300px !important; }
  .np-frame [data-bleed]{ min-height:0 !important; }

  /* every multi-column grid becomes a single column */
  .np-frame section[style*="grid-template-columns"],
  .np-frame section > div[style*="grid-template-columns"],
  .np-frame section div[style*="grid-template-columns"],
  .np-frame section > div > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    gap:16px !important;
  }
  .np-frame [style*="grid-row:span 2"],
  .np-frame [style*="grid-column:2 / span 2"],
  .np-frame [style*="grid-column:1;"]{ grid-row:auto !important; grid-column:auto !important; }
  .np-frame [style*="grid-template-rows:300px"] > div,
  .np-frame [style*="grid-template-rows:260px"] > div{ height:230px !important; }
  .np-frame div[style*="min-height:560px"][style*="position:relative"]{ min-height:280px !important; }

  /* type scale */
  .np-frame h1{ font-size:clamp(44px, 13.5vw, 84px) !important; line-height:0.94 !important; }
  .np-frame h2{ font-size:clamp(32px, 9vw, 46px) !important; }
  .np-frame h3{ font-size:21px !important; }
  .np-frame p{ font-size:17px !important; }
  .np-frame blockquote{ font-size:23px !important; line-height:1.38 !important; }
  .np-frame [style*="font-size:58px"],
  .np-frame [style*="font-size:50px"]{ font-size:40px !important; }
  .np-frame [style*="font-size:30px"][style*="font-weight:600"]{ font-size:21px !important; line-height:1.5 !important; }

  /* desktop nav labels collapse; logo + CTA stay */
  .np-frame > div[style*="padding:26px 72px"] span[style*="letter-spacing:0.2em"],
  .np-frame > div[style*="padding:26px 72px"] a[style*="letter-spacing:0.2em"],
  .np-frame > section > div[style*="padding:30px 72px"] span[style*="letter-spacing:0.2em"],
  .np-frame > section > div[style*="padding:30px 72px"] a[style*="letter-spacing:0.2em"]{ display:none !important; }
  .np-frame > div[style*="padding:26px 72px"],
  .np-frame > section > div[style*="padding:30px 72px"]{ padding-top:18px !important; padding-bottom:18px !important; }
  .np-frame a[href^="#quote-"]{ padding:15px 20px !important; letter-spacing:0.14em !important; }
  .np-frame > div[style*="padding:26px 72px"] > div{ gap:0 !important; margin-left:auto !important; }
  .np-frame > div[style*="padding:26px 72px"] > div > a[href^="#quote-"]{ white-space:nowrap; min-height:44px; }

  /* stat rows and footer stack */
  .np-frame div[style*="gap:64px"]{ gap:28px !important; }
  .np-frame footer > div{ flex-direction:column !important; align-items:flex-start !important; }
  .np-frame footer > div:last-child{ gap:8px !important; }

  /* CTA buttons go full width so they're an easy tap target */
  .np-frame section a[href^="#quote-"],
  .np-frame section a[href^="#vibe-"],
  .np-frame section a[href^="#floor-"]{ width:100%; }
  .np-frame section > div > div[style*="flex-wrap:wrap"][style*="gap:16px"]{ width:100%; }

  .hb-p-673bb3c59a2b2f0025fdcb19-2{ --hb-h: 1650px; }
}

@media (max-width: 480px){
  .np-frame [style*="letter-spacing:0.26em"]{ letter-spacing:0.14em !important; }
  .np-frame [style*="letter-spacing:0.24em"]{ letter-spacing:0.16em !important; }
}