/* ==========================================================================
   Privitelli Hydration and Wellness LLC — stylesheet

   Serif display headings + Inter for UI. Navy / blue clinical palette.
   Photo slots are background-images layered OVER a gradient, so a missing
   file degrades to a tinted panel instead of a broken-image icon.
   ========================================================================== */

:root {
  /* Color */
  --navy:        #16325A;
  --navy-deep:   #0F2646;
  --ink:         #14325C;
  --ink-soft:    #47607C;
  --muted:       #6A8098;
  --blue:        #1E5FA8;
  --blue-dark:   #174C8A;
  --blue-bright: #2E77C9;
  --tint:        #EEF4FB;
  --tint-2:      #DCE9F6;
  --bg:          #FFFFFF;
  --bg-alt:      #F7FAFD;
  --border:      #E3EAF2;

  /* Type */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Shape */
  --radius-btn: 7px;
  --radius:     11px;
  --radius-lg:  18px;
  --shadow-sm:  0 1px 2px rgba(20, 50, 92, .05);
  --shadow:     0 1px 3px rgba(20, 50, 92, .06), 0 10px 28px rgba(20, 50, 92, .07);
  --shadow-lg:  0 2px 6px rgba(20, 50, 92, .06), 0 22px 54px rgba(20, 50, 92, .11);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
}

h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.08rem; }
h4 { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow { max-width: 780px; }
/* Wider than the rest of the page — five service cards need the room. */
.wrap-wide { max-width: 1340px; }

.section { padding: clamp(60px, 8vw, 100px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head-center { margin-inline: auto; text-align: center; }

.section-sub { margin-top: .9rem; font-size: 1.03rem; color: var(--muted); }

.section-cta { margin-top: clamp(32px, 4vw, 44px); text-align: center; }

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.lede { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 100;
  padding: 10px 18px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-btn);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 9px 18px; font-size: .89rem; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30, 95, 168, .22);
}
.btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(30, 95, 168, .30);
}

.btn-outline {
  background: #fff;
  border-color: var(--tint-2);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--tint);
}


/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
}

.site-logo { display: inline-flex; flex: none; }
.site-logo img { width: auto; height: 58px; }

.site-nav {
  display: flex;
  gap: 30px;
  margin-inline: auto;
  font-size: .92rem;
  font-weight: 500;
}
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--blue); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0 clamp(96px, 11vw, 150px);
  background: var(--bg);
}

/* Full-bleed photo behind the whole hero. The gradient underneath is a
   fallback for the moment before the JPEG paints. */
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("images/hero.jpg"),
                    linear-gradient(150deg, #E4EFF9 0%, #C9DEF1 100%);
  background-size: cover, cover;
  /* 30% keeps both faces in frame as the hero gets shorter. */
  background-position: center 30%, center;
  background-repeat: no-repeat;
}

/* Washes the left side to white so the headline stays legible over the
   photo. Must clear ~40% — that's where "Delivered to You." ends. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              #fff 0%,
              rgba(255, 255, 255, .97) 22%,
              rgba(255, 255, 255, .86) 32%,
              rgba(255, 255, 255, .40) 42%,
              rgba(255, 255, 255, 0) 52%);
}

.hero-inner { position: relative; z-index: 1; }

.hero-copy { max-width: 35rem; }

/* Smaller than the global h1. "Personalized Hydration." is 23 characters and
   has to hold one line — at the global 3.9rem it wraps and the headline
   becomes six lines instead of three. */
.hero-copy h1 {
  margin-bottom: 1.3rem;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--blue-bright);
}

.hero-copy .lede { max-width: 27rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2.1rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
}
.hero-trust svg { width: 18px; height: 18px; fill: var(--blue); flex: none; }

/* ── Value bar (floats over the hero / next section boundary) ───────────── */

.valuebar-section { position: relative; z-index: 2; }

.valuebar {
  display: grid;
  gap: 8px;
  margin-top: clamp(-120px, -9vw, -70px);
  padding: clamp(28px, 3.4vw, 40px) clamp(20px, 2.5vw, 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.valuebar li {
  padding: 12px 16px;
  text-align: center;
}

.valuebar-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--tint);
}
.valuebar-icon svg { width: 21px; height: 21px; fill: var(--blue); }

.valuebar h3 { margin-bottom: .5rem; }
.valuebar p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Service cards ──────────────────────────────────────────────────────── */

/* The sprite is markup, not art — hide it without display:none, which would
   stop Safari resolving the <use> references. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Flex, not grid: a grid's trailing row always packs to the start, so a final
   row that isn't full hangs off to the left. Wrapping flex items with
   justify-content:center leave full rows identical and centre the short one,
   whatever the service count. Column widths live in the breakpoints below —
   basis = (100% - (n-1) * gap) / n. */
.svc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* One colour per service, read by the title, bag, bullets, and tagline. */
.svc--hydration   { --svc: #2E77C9; }
.svc--immune      { --svc: #3E9B57; }
.svc--energy      { --svc: #E08A2B; }
.svc--recovery    { --svc: #12A0A0; }
.svc--hangover    { --svc: #8B5BC7; }
.svc--migraine    { --svc: #5B4FBF; }
.svc--nausea      { --svc: #3FA88C; }
.svc--detox       { --svc: #C79413; }
.svc--beauty      { --svc: #D9538C; }
.svc--performance { --svc: #2B5FBF; }
.svc--fatburner   { --svc: #D9553F; }
.svc--infuvite    { --svc: #6F9C2B; }

.svc {
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 18px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--svc);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.svc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.svc h3 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--svc);
}

/* Default sup styling inflates the title's line box; this keeps ® small and
   raised without pushing the row's card heights apart. */
.svc h3 sup {
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
}

/* ── The IV bag ──
   Two stacked SVGs: the bag outline, and the service icon centred on top of
   it. Overlaying beats nesting the icon in the bag's viewBox — the icons keep
   their own 24×24 coordinate space and stay swappable. */
.svc-bag {
  position: relative;
  width: 74px;
  margin-bottom: 16px;
}
.svc-bag .bag { display: block; width: 100%; height: auto; }

.bag-fluid { fill: var(--svc); opacity: .15; }
.bag-shell,
.bag-line {
  fill: none;
  stroke: var(--svc);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .5;
}
.bag-tip { fill: var(--svc); opacity: .5; }

.svc-icon {
  position: absolute;
  /* The bag body spans y 10–76 of a 106-tall viewBox; 40.5% is its middle. */
  top: 40.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  fill: var(--svc);
}

.svc-lede {
  margin-bottom: 12px;
  font-size: .87rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}

.svc-points {
  list-style: none;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
}
.svc-points li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 14px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}
.svc-points li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--svc);
}

/* Pushed to the bottom so taglines and prices line up across a row even when
   the bullet lists wrap to different heights. */
.svc-tagline {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--svc);
}

.svc-price {
  width: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
}

.svc-disclaimer {
  margin-top: 22px;
  font-size: .8rem;
  text-align: center;
  color: var(--muted);
}

/* ── Other services ─────────────────────────────────────────────────────── */

.other-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.other {
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.other:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.other h3 {
  margin-bottom: .35rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
}

.other-price {
  margin-bottom: .9rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
}
/* NAD+ carries two prices; stack them instead of running them together. */
.other-price span { display: block; }

.other p:last-child {
  margin: 0;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--muted);
}

.other-note {
  margin-top: 26px;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}

/* ── About panel ────────────────────────────────────────────────────────── */

.about-panel {
  display: grid;
  gap: 0;
  background: var(--tint);
  border: 1px solid var(--tint-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* A full photo, not a transparent cut-out, so it fills the column rather than
   sitting in it: cover instead of contain. The gradient stays underneath as
   the fallback if the file is ever missing. Anchored near the top because the
   photo is far taller than this column, so cover crops it hard vertically and
   the default centre would land on the tablecloth instead of her face. */
.about-media {
  min-height: 320px;
  background-image: url("images/founder.jpg"),
                    linear-gradient(160deg, #CFE0F1 0%, #8FB4D6 100%);
  background-size: cover, cover;
  background-position: 50% 4%, center;
  background-repeat: no-repeat;
}

.about-copy { padding: clamp(32px, 4.5vw, 56px); }
.about-copy h2 { margin-bottom: 1.1rem; }
.about-copy p { color: var(--ink-soft); }
.about-copy p + p { margin-top: 1rem; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq summary:hover { color: var(--blue); }

.faq details p {
  margin: 0;
  padding: 0 0 24px;
  max-width: 64ch;
  color: var(--muted);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding: clamp(48px, 6vw, 72px) 0 32px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: .93rem;
}

.footer-inner {
  display: grid;
  gap: 34px;
  padding-bottom: 40px;
}

.footer-logo { display: inline-block; }
.footer-logo img { width: 130px; height: auto; }

.footer-tagline {
  margin-top: 1.1rem;
  max-width: 22rem;
  color: var(--muted);
}

.footer-col h4 { margin-bottom: .9rem; }
.footer-col p { margin-bottom: .45rem; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--blue); }

.footer-legal {
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: .83rem;
  color: var(--muted);
}
.footer-legal p { max-width: 70ch; }
.copyright { margin-top: 1rem; }

/* ── Booking page (book.html) ───────────────────────────────────────────── */

.booking-main { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); }

.booking-head {
  max-width: 620px;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.booking-head h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

/* Reserves space so the page doesn't jump when the widget finishes loading. */
#widget-div { min-height: 440px; }

.booking-fallback {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  color: var(--muted);
}

.booking-page .site-footer { padding-top: 34px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .site-nav { display: none; }

  /* Stack the hero: the photo becomes a banner above the copy. There isn't
     enough width to put text over it and still read. */
  .hero { padding-top: 0; }
  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 300px;
    margin-bottom: 36px;
  }
  .hero-media::after {
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 55%, #fff 100%);
  }
  .hero-copy { max-width: none; }
}

@media (min-width: 560px) {
  .svc          { flex-basis: calc((100% - 16px) / 2); }
  .valuebar     { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 780px) {
  /* Six columns, each card spanning two, so the trailing pair can be nudged
     inward by one column and sit centred under the row of three. */
  .other-grid { grid-template-columns: repeat(6, 1fr); }
  .other      { grid-column: span 2; }
  .other:nth-child(4) { grid-column: 2 / span 2; }
  .other:nth-child(5) { grid-column: 4 / span 2; }
}

@media (min-width: 940px) {
  .svc          { flex-basis: calc((100% - 32px) / 3); }
  .valuebar     { grid-template-columns: repeat(4, 1fr); }
  .about-panel  { grid-template-columns: .82fr 1.18fr; }
  .about-media  { min-height: 400px; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
}

/* Four across, not five: twelve cards divide evenly by four, so every row is
   full. It also keeps each card above ~230px — any narrower and the bullet
   text starts breaking mid-word. */
@media (min-width: 1200px) {
  .svc { flex-basis: calc((100% - 48px) / 4); }
}