/* packages.html page geometry (flow layer lives in css/patterns.css):
   the rate-card hero, the add-ons carousel, the rotating quotes, and the
   pricing FAQ accordion. All selectors are page-scoped (svc-*, qrot, qa-acc)
   so this file is inert elsewhere. */

/* ---- hero: the rate card ---- */
.svc-hero { background: var(--black); color: var(--cream-text); overflow: hidden; }
.svc-hero-wrap { max-width: 1200px; margin: 0 auto; padding: 148px 60px 0;
  display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.svc-kicker { margin: 0 0 24px; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.svc-h1 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 68px; line-height: 1.08; }
.svc-h1 em { font-family: var(--font-italic); font-style: normal; }
.svc-lede { margin: 26px 0 0; max-width: 480px; font-family: var(--font-pop);
  font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: .02em; }
.svc-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.svc-hero .btn { min-height: 48px; padding: 14px 26px; }
.svc-btn-solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.svc-btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--cream-text); }

.svc-hero-media { position: relative; }
.svc-hero-media > img,
.svc-hero-media > video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* giant serif ticker at the hero's foot (marquee machinery from style.css) */
.svc-ticker { margin-top: 64px; padding: 26px 0 34px;
  border-top: 1px solid rgba(245,245,245,.18); }
.svc-ticker span { font-family: var(--font-serif); font-size: 92px; line-height: 1.1;
  text-transform: uppercase; color: var(--cream-text); opacity: .22; white-space: nowrap; }

/* hero load choreography */
@keyframes svc-rise { from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; } }
@keyframes svc-settle { from { transform: scale(1.06); } to { transform: none; } }
.svc-hero-copy > *, .svc-hero-media { animation: svc-rise .9s ease both; }
.svc-kicker { animation-delay: .05s; }
.svc-h1 { animation-delay: .15s; }
.svc-lede { animation-delay: .3s; }
.svc-ctas { animation-delay: .45s; }
.svc-hero-media { animation-delay: .3s; }
.svc-hero-media > img,
.svc-hero-media > video { animation: svc-settle 2.2s ease-out both; }

/* ---- the foundation: editorial split with menu rows ---- */
.svc-found { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; }
.svc-found-list { list-style: none; margin: 0; padding: 0; }
.svc-found-list li { display: grid; grid-template-columns: 86px 1fr; gap: 0 24px;
  padding: 30px 0 32px; border-top: 1px solid var(--line); }
.svc-found-list li:last-child { border-bottom: 1px solid var(--line); }
.svc-found-list h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2; }
.svc-found-list p { margin: 10px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 15px; line-height: 1.6; }

/* ---- packages: featured card rides high, cards lift on hover ---- */
#packages .card-grid { align-items: start; }
#packages .pcard { transition: transform .5s ease; }
#packages .pcard-price { font-size: 44px; }
@media (min-width: 901px) {
  #packages .card-grid { margin-top: 78px; }
  #packages .pcard.is-featured { transform: translateY(-24px); }
  #packages .pcard:hover { transform: translateY(-8px); }
  #packages .pcard.is-featured:hover { transform: translateY(-32px); }
}

/* ---- add-ons carousel (replaces the estimator; lives on the fl-dark band) ---- */
.svc-addons .svc-addons-head { max-width: 660px; margin-bottom: clamp(44px, 5vw, 66px); }
.svc-addons .svc-addons-head .fl-lede { max-width: 640px; }

/* click-through carousel: one slide per add-on, count-agnostic */
.svc-carousel-viewport { overflow: hidden; }
.svc-carousel-track { display: flex; transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform; }
.svc-slide { flex: 0 0 100%; display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  border: 1px solid var(--line); background: rgba(245,245,245,.04);
  overflow: hidden; transition: opacity .6s ease; }
.svc-slide[aria-hidden="true"] { opacity: .18; }

.svc-slide-media { position: relative; overflow: hidden; height: clamp(360px, 38vw, 480px); }
.svc-slide-media img,
.svc-slide-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-slide-tag { position: absolute; top: 20px; left: 20px;
  background: var(--accent); color: var(--cream-text); padding: 8px 16px;
  font-family: var(--font-mont); font-weight: 500; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; }

.svc-slide-body { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 4vw, 60px); }
.svc-slide-index { margin: 0 0 22px; font-family: var(--font-pop); font-weight: 300;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245,245,245,.55); }
.svc-slide-index b { color: var(--accent); font-weight: 400; }
.svc-slide-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.svc-slide-name { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; }
.svc-slide-price { font-family: var(--font-italic); font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1; color: var(--accent); white-space: nowrap; }
.svc-slide-blurb { margin: 24px 0 0; max-width: 46ch; font-family: var(--font-pop);
  font-weight: 300; font-size: 15px; line-height: 1.75; color: rgba(245,245,245,.75); }

.svc-addon-add { align-self: flex-start; margin-top: 32px; display: inline-flex;
  align-items: center; gap: 12px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mont); font-weight: 400; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-text); transition: color .4s; }
.svc-addon-add:hover { color: var(--accent); }
.svc-addon-add:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.svc-addon-add-i { width: 32px; height: 32px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid rgba(245,245,245,.4);
  border-radius: 50%; font-size: 18px; line-height: 1;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), background-color .4s, color .4s, border-color .4s; }
.svc-addon-add:hover .svc-addon-add-i { border-color: var(--accent); }
.svc-slide.is-added .svc-addon-add-i { background: var(--accent); border-color: var(--accent);
  color: var(--cream-text); transform: rotate(45deg); }

/* nav: arrows flanking the dots (JS hides the row when there is one slide) */
.svc-carousel-nav { margin-top: clamp(28px, 3vw, 40px); display: flex; align-items: center;
  justify-content: center; gap: 22px; }
.svc-carousel-arrow { width: 50px; height: 50px; flex: none; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(245,245,245,.35); color: var(--cream-text);
  font-family: var(--font-serif); font-size: 24px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
  transition: background-color .4s, color .4s, border-color .4s; }
.svc-carousel-arrow:hover { background: var(--accent); color: var(--cream-text); border-color: var(--accent); }
.svc-carousel-arrow:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.svc-carousel-dots { display: flex; align-items: center; gap: 12px; }
.svc-carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: rgba(245,245,245,.3); transition: background-color .3s, transform .3s; }
.svc-carousel-dots button.is-live { background: var(--accent); transform: scale(1.4); }

.svc-addons-foot { margin-top: clamp(34px, 4vw, 50px); display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.svc-addons-note { max-width: 46ch; margin: 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; line-height: 1.6; color: rgba(245,245,245,.6); }
.svc-addons-foot .btn { min-height: 48px; }

/* ---- rotating quotes ---- */
.qrot { position: relative; text-align: center; }
.qrot::before { content: "\201C"; position: absolute; left: 50%; top: 66px;
  transform: translateX(-50%); font-family: var(--font-serif); font-size: 240px;
  line-height: 1; opacity: .08; pointer-events: none; }
.qrot-stage { position: relative; min-height: 250px; }
.qrot-stage figure { position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .8s ease; display: flex; flex-direction: column;
  justify-content: center; }
.qrot-stage figure.is-on { opacity: 1; }
.qrot-stage blockquote { margin: 0 auto; max-width: 880px;
  font-family: var(--font-italic); font-size: 36px; line-height: 1.3; }
.qrot-stage figcaption { margin-top: 26px; font-family: var(--font-pop);
  font-weight: 300; font-size: 15px; }
.qrot-stage figcaption span { display: block; opacity: .65; font-size: 13px; margin-top: 4px; }
.qrot-dots { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
/* color:inherit is load-bearing. The dot draws itself ENTIRELY from
   currentColor (border here, background when active) but a <button> does not
   inherit colour by default, it takes the UA's `buttontext`. Chrome resolves
   that near-black so it passed on desktop; iOS Safari resolves it to the
   system BLUE, which is why the dots were blue on a phone and nowhere else. */
.qrot-dots button { width: 9px; height: 9px; border-radius: 50%;
  color: inherit;
  border: 1px solid currentColor; background: transparent; padding: 0;
  cursor: pointer; opacity: .5; }
.qrot-dots button.is-on { background: currentColor; opacity: 1; }

/* ---- pricing FAQ accordion (progressive: without js every answer stays open) ---- */
.qa-acc .qa-q button { display: flex; width: 100%; align-items: baseline;
  justify-content: space-between; gap: 20px; background: none; border: 0;
  padding: 0; margin: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; }
.qa-tog { flex: none; font-family: var(--font-italic); font-size: 17px;
  opacity: .65; white-space: nowrap; transition: opacity .3s ease; }
.qa-tog::before { content: "( Open )"; }
.qa-item.is-open .qa-tog::before { content: "( Close )"; }
.qa-acc .qa-q button:hover .qa-tog { opacity: 1; }
.qa-acc .qa-body { grid-column: 2; }
.qa-acc.js .qa-body { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s ease; }
.qa-acc.js .qa-item.is-open .qa-body { grid-template-rows: 1fr; }
.qa-acc.js .qa-clip { min-height: 0; overflow: hidden; }

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce) {
  .svc-hero-copy > *,
  .svc-hero-media,
  .svc-hero-media > img,
  .svc-hero-media > video { animation: none; }
  .svc-ticker .marq-track { animation: none; }
  #packages .pcard { transition: none; }
  .qa-acc.js .qa-body { transition: none; }
  .svc-carousel-track { transition: none; }
}

/* ---- mobile (kit breakpoint) ---- */
@media (max-width: 900px) {
  .svc-hero-wrap { grid-template-columns: 1fr; gap: 46px; padding: 108px 22px 0; }
  .svc-h1 { font-size: clamp(38px, 11vw, 50px); }
  .svc-ctas { flex-direction: column; margin-top: 30px; }
  .svc-hero .btn { width: 100%; max-width: 340px; }
  .svc-ticker { margin-top: 46px; padding: 18px 0 24px; }
  .svc-ticker span { font-size: 44px; }

  .svc-found { grid-template-columns: 1fr; gap: 34px; }
  .svc-found-list li { grid-template-columns: 62px 1fr; gap: 0 16px; padding: 24px 0 26px; }

  .svc-slide { grid-template-columns: 1fr; }
  .svc-slide-media { height: 260px; }
  .svc-addons-foot { flex-direction: column; align-items: flex-start; }
  .svc-addons-foot .btn { width: 100%; }

  .qrot::before { font-size: 150px; top: 120px; }
  .qrot-stage { min-height: 330px; }
  .qrot-stage blockquote { font-size: 24px; }

  .qa-acc .qa-body { grid-column: 1; }
}

/* ---- packages hero: fixed photo backdrop under a black overlay -------------
   Built as a position:fixed LAYER clipped by the section's clip-path, not
   background-attachment:fixed. A fixed background cannot be promoted to a
   compositor layer, so it repaints the full-bleed photo on every scroll frame,
   which is the stutter that was fixed on the home hero; clip-path clips
   descendants without becoming their containing block, so the layer stays
   viewport-anchored and the parallax reads the same. It also works on iOS,
   where attachment:fixed is effectively broken.
   The overlay rides in the same layer stack as the photo, so there is one
   painted element and the hero's own content only needs lifting above it. */
.svc-hero { position: relative; clip-path: inset(0); }
.svc-hero::before { content: ""; position: fixed; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(17,17,17,.82), rgba(17,17,17,.82)),
    url("../images/hero-booth-group.webp") center / cover no-repeat;
  /* the site is monochrome; the source photo is warm, so it is desaturated
     here rather than shipping a second greyscale asset. .82 on the overlay,
     not .74, is what carries the cream copy past AA on the photo's lightest
     patches (measured, see the contrast probe). */
  filter: grayscale(1); background-position: 50% 15%; }
.svc-hero-wrap, .svc-ticker { position: relative; z-index: 1; }

/* ---- packages hero: exactly one window tall --------------------------------
   The section is a flex column: the wrap takes the slack so the ticker always
   sits on the bottom edge, and every part that would otherwise pin a minimum
   height is viewport-derived instead. The 4/5 photo is the real driver (529px
   at a 940 window), so it is given an explicit vh height with object-fit
   already doing the cropping; the display type and the ticker scale with it.
   Scoped to the slider's 901px breakpoint: below that the hero stacks and a
   phone should scroll it, not squeeze it. */
@media (min-width: 901px) {
  .svc-hero { min-height: 100vh; display: flex; flex-direction: column; }
  .svc-hero-wrap { flex: 1 1 auto; align-content: center;
    padding-top: clamp(76px, 11vh, 148px);
    padding-bottom: clamp(12px, 2.4vh, 36px); }
  .svc-hero-media > img,
  .svc-hero-media > video { aspect-ratio: auto; height: clamp(240px, 42vh, 560px); }
  .svc-h1 { font-size: clamp(34px, 5.4vh, 68px); }
  .svc-lede { margin-top: clamp(14px, 2.4vh, 26px); }
  .svc-ctas { margin-top: clamp(18px, 3.4vh, 38px); }
  .svc-kicker { margin-bottom: clamp(12px, 2.2vh, 24px); }
  .svc-ticker { margin-top: 0; flex: 0 0 auto;
    padding: clamp(12px, 2.2vh, 26px) 0 clamp(16px, 3vh, 34px); }
  .svc-ticker span { font-size: clamp(40px, 8.5vh, 92px); }
}


/* ---- the two card behaviours the owner asked for by name -------------------
   Everything else about this section is back to the kit design: 300px photos,
   full descriptions, natural card heights, no viewport squeezing. Kept here
   because they were separate, explicit requests, not part of the fit work:
     - cards the same length (the kit's align-items:start is what staggered
       them), with the CTA pinned to the foot so the bottoms line up;
     - the featured card in line with its siblings rather than riding 24px
       high, which read as a different size once the four were equalised.
   Reverting these two is a one-block delete if the pure kit layout is wanted. */
@media (min-width: 901px) {
  #packages .card-grid { align-items: stretch; }
  #packages .pcard { position: relative; padding-bottom: 50px; }
  #packages .pcard ul { margin-bottom: 20px; }
  #packages .pcard .btn { margin-top: auto; }
  #packages .pcard-link { position: absolute; left: 28px; right: 28px; bottom: 24px; margin: 0; }
  #packages .pcard.is-featured { transform: none; }
  #packages .pcard.is-featured:hover { transform: translateY(-8px); }
}