/* 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; }
.ty a:hover{ color:var(--color-accent-soft); }
.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.

        This form is long (11 fields + consent copy), so the box must be
        GENEROUS — it renders on a dark ground, so slack below the form reads
        as black rather than white, while a box that is too short clips the
        submit button. hb-resize.js snaps it to the exact height as soon as the
        widget posts one. Never clip this chain. ---- */
[class*="hb-p-"]{
  --hb-h: 1500px;
  height: var(--hb-h) !important;
  min-height: var(--hb-h) !important;
  width:100%;
  max-width:100%;
  display:flex;
  justify-content:center;
}
/* HoneyBook injects its own wrappers; none of them may outgrow the card */
[class*="hb-p-"] > *{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
[class*="hb-p-"] iframe,
.np-frame iframe[src*="hbportal.co"]{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height: var(--hb-h, 620px) !important;
  max-width:100% !important;
  margin:0 auto !important;
  border:0 !important;
}
.np-frame iframe[src*="hbportal.co"]{ height: var(--hb-h, 1960px) !important; }
/* HoneyBook floats its submit arrow at the form's bottom-right and lets it
   hang outside the form card — give the placement room so it is never clipped */
[class*="hb-p-"],
[class*="hb-p-"] iframe{ overflow:visible !important; }
.np-frame section[id^="quote-"] #hb-mount,
.np-frame section[id^="quote-"] div[class*="hb-p-"],
.np-frame section[id^="quote-"] > div,
.np-frame section[id^="quote-"] > div > div{ overflow:visible !important; }
.np-frame section[id^="quote-"]{ padding-bottom:120px !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; }

/* ---- motto band: centred statement + proof row ---- */
.np-frame > section[style*="padding:84px 72px"] > p{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
  text-wrap:pretty;
}
.np-frame > section[style*="padding:84px 72px"] > div[style*="margin-top:26px"]{
  justify-content:center;
}

/* ---------------------------------- 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;
  }
  /* hero photo: keep Nick + the groom both in frame on narrow screens */
  .np-frame img[src*="wedding-cryo"]{ object-position:58% 26% !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%; }

  [class*="hb-p-"]{ --hb-h: 1580px; }
}

@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; }
}

/* variant B hero: keep Nick in frame on narrow screens */
@media (max-width: 820px){
  .np-frame img.hero-b-img{ object-position:70% 34% !important; }
}

@media (max-width: 820px){
  .np-frame img.hero-a-img{ object-position:38% 42% !important; }
}

/* ------------------------- mobile hero refinements ------------------------- */
@media (max-width: 820px){
  /* hero body: tighter frame, no wasted vertical space */
  .np-frame > section > div[style*="justify-content:center"][style*="padding:0 72px 56px"]{
    padding:8px 0 48px !important;
  }

  /* eyebrow: the red rule aligns to the FIRST line instead of floating
     mid-block when the label wraps; label itself gets a readable scale */
  .np-frame > section > div > div[style*="gap:14px"][style*="margin-bottom:26px"]{
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:20px !important;
  }
  .np-frame > section > div > div[style*="gap:14px"] > span[style*="height:3px"]{
    flex:0 0 auto !important;
    width:24px !important;
    margin-top:6px !important;
  }
  .np-frame > section > div > div[style*="gap:14px"] > span[style*="letter-spacing:0.24em"]{
    font-size:11px !important;
    letter-spacing:0.12em !important;
    line-height:1.5 !important;
  }

  /* headline: big, but it can no longer eat the whole viewport */
  .np-frame > section h1{
    font-size:clamp(38px, 11.2vw, 58px) !important;
    line-height:0.96 !important;
    max-width:none !important;
  }
  .np-frame > section h1 span[style*="text-shadow"]{ text-shadow:1.5px 1.5px 0 rgba(255,255,255,0.95) !important; }

  /* lead paragraph: lighter and tighter so it reads as support, not a headline */
  .np-frame > section > div > p[style*="font-weight:600"]{
    margin-top:20px !important;
    font-size:17px !important;
    font-weight:500 !important;
    line-height:1.5 !important;
  }

  /* hero CTAs: stacked, full-width, one line each, 44px+ tap targets */
  .np-frame > section > div > div[style*="flex-wrap:wrap"][style*="gap:16px"]{
    flex-direction:column !important;
    gap:12px !important;
    margin-top:28px !important;
  }
  .np-frame > section > div > div[style*="flex-wrap:wrap"][style*="gap:16px"] > a{
    width:100% !important;
    min-height:54px !important;
    padding:16px 18px !important;
    font-size:12px !important;
    letter-spacing:0.12em !important;
    white-space:nowrap !important;
  }

  /* hero stat strip: a tidy 2×2 grid instead of an uneven wrap */
  .np-frame > section > div > div[style*="margin-top:64px"][style*="border-top"]{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:24px 18px !important;
    margin-top:40px !important;
    padding-top:26px !important;
  }
  .np-frame > section > div > div[style*="margin-top:64px"][style*="border-top"] [style*="font-size:58px"]{
    font-size:34px !important;
  }
  .np-frame > section > div > div[style*="margin-top:64px"][style*="border-top"] [style*="letter-spacing:0.24em"]{
    margin-top:6px !important;
    font-size:10.5px !important;
    letter-spacing:0.14em !important;
  }

  /* sticky nav CTA sizes down so it never crowds the logo */
  .np-frame > section > div[style*="padding:30px 72px"] a[href^="#quote-"],
  .np-frame > div[style*="padding:26px 72px"] a[href^="#quote-"]{
    padding:13px 16px !important;
    font-size:11px !important;
    letter-spacing:0.1em !important;
    min-height:44px !important;
  }
  .np-frame > section > div[style*="padding:30px 72px"] img{ height:26px !important; }

  /* motto band + proof row */
  .np-frame > section > div[style*="gap:28px"][style*="margin-top:26px"]{ gap:10px 14px !important; }

  /* "Check My Date" must land on the FORM, not four reviews first:
     the quote grid stacks with the form card hoisted above the copy */
  .np-frame section[id^="quote-"] > div[style*="grid-template-columns"]{
    display:flex !important;
    flex-direction:column !important;
  }
  .np-frame section[id^="quote-"] > div[style*="grid-template-columns"] > div:last-child{
    order:-1 !important;
  }
  .np-frame section[id^="quote-"] > div[style*="grid-template-columns"] > div:last-child[style*="padding:34px"]{
    padding:22px 16px !important;
  }
}

@media (max-width: 400px){
  .np-frame > section h1{ font-size:37px !important; }
  .np-frame > section > div > div[style*="flex-wrap:wrap"][style*="gap:16px"] > a{
    font-size:11px !important; letter-spacing:0.08em !important;
  }
}