/* services.html page components. Linked ONLY on services.html, after
   packages.css + pages.css, so no other page can be affected. Same design
   language as styles.css: serif display + script accents, Work Sans labels,
   cream/brown/ink/rose, 1px keylines and frames. All motion sits behind
   prefers-reduced-motion. */

/* ---------- Hero: editorial split over a fixed photo backdrop ----------
   Restructured 2026-08-02 (owner request) to match the reference services hero:
   the MEDIA still leads — a framed clip — and the copy rides right, but the
   whole band now sits on a full-bleed photo under a black overlay, so the
   type and both CTAs go light. The package ledger that used to overlap the
   frame is gone; .rate-cards below is the page's package surface. */

.svc-hero {
  /* 14%, not centre: the calm band of this frame is its TOP third (dark cliff
     under string lights). Centring parks the sparkler crowd behind the
     headline, where faces compete with the type at every overlay strength. */
  background:
    linear-gradient(rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.74) 100%),
    url("images/hero-crimson.jpg") center 14% / cover no-repeat #000;
  /* window height, same idiom as the base .hero: MIN-height (a fixed height
     has no give and clips when copy runs long) + flex centring, svh so iOS
     toolbars don't overshoot */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}
/* fixed attachment is desktop-only: iOS drops it to scroll and repaints the
   whole layer every frame, which stutters the framed clip beside it */
@media (hover: hover) and (pointer: fine) {
  .svc-hero { background-attachment: fixed; }
}
.svc-hero-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-areas: 'media copy';
  gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.svc-hero-copy { grid-area: copy; }
/* the logo gold lifted toward light: --rose itself is a mid tone and goes
   muddy against the overlay, but leaving the palette for a neutral would
   drop the one brand colour in the band */
.svc-hero-copy .eyebrow { color: #cbbe8b; margin-bottom: 1.6rem; }
.svc-hero-copy h1 {
  font-family: var(--serif);
  font-weight: 300;
  /* MEASURED to keep "Content Creator" on one line (owner, 2026-08-02). It used
     to be clamp(2.4rem, 5vw, 4.1rem) and missed by a hair at every desktop
     width: 391px of text in a 387px column at 900px, 445 in 440 at 1024, so
     "Creator" fell to a third line. The two terms fail for different reasons,
     which is why both moved:
       4.8vw  - the copy column tracks the viewport up to the grid's 1100px
                max-width, and 5vw outran it by ~1px per step through that band.
       3.55rem - past 1100px the COLUMN STOPS GROWING (max-width) while vw does
                not, so the cap is what holds the line; 4.1rem needed 570px of a
                510px column.
     Both leave a few px of slack against the measurement. Re-measure if the
     grid's max-width, its column split, or this string ever changes. */
  font-size: clamp(2.4rem, 4.8vw, 3.55rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
}
/* the lockup's two lines. Not <br>: a block span still collapses to normal flow
   if the font falls back and a line has to wrap, so the worst case is an extra
   line rather than copy running out of the column. */
.svc-hero-copy h1 span { display: block; }
.svc-hero-script {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1;
  margin: 0 0 1.4rem 1.6em;
  color: #fff;
}
.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}

.svc-hero-media { grid-area: media; width: min(100%, 460px); }
/* the brown keyline vanished on the dark backdrop; the frame goes light */
.svc-frame { border: 1px solid rgba(255, 255, 255, 0.75); padding: clamp(0.8rem, 1.6vw, 1.1rem); }
.svc-frame img, .svc-frame video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
/* package-1 keeps its couple in the bottom fifth; centre-crop deletes them */
[data-bc-pkg-photo="the-promise"] { object-position: 50% 100%; }

/* Staggered load rise, same choreography as the shared hero-in keyframe */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero-copy > *,
  .svc-frame { animation: hero-in 1s ease both; }
  .svc-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .svc-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .svc-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
  .svc-hero-copy > :nth-child(5) { animation-delay: 0.4s; }
  .svc-frame { animation-delay: 0.25s; }
}

/* ---------- Foundation band: asymmetric split (head + photo | rows) ---------- */

.svc-found-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.svc-found-grid .pg-head { margin-bottom: 0; }
.svc-found-photo { margin-top: clamp(1.8rem, 4vw, 2.8rem); width: min(100%, 380px); }
/* media-neutral: this slot holds an img OR a converted video */
.svc-found-photo img, .svc-found-photo video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* The rows column DROPS, so the numbered list starts level with the left
   column's lede paragraph rather than flush with the eyebrow (owner,
   2026-08-02: the near-flush start read as a mistake rather than a decision).
   Measured, not guessed: at 1440 the first row's h3 sat 5px above the eyebrow
   and 194px above the lede, so the clamp tracks that gap across the range and
   is dropped entirely once the grid stacks at 800px, where a top offset would
   just be dead space between the photo and the list. */
.svc-found-grid .pg-rows { max-width: none; margin: 0; padding-top: clamp(4rem, 12.5vw, 12rem); }
.svc-found-grid .pg-row:first-child { padding-top: 0.4rem; }

/* ---------- Add-ons on brown: the page's dark, starlit moment ----------
   A click-through carousel, one slide per add-on. Same shared engine as the
   other kits (viewport / track / uniform slide grid, round arrows, dots, dreamy
   count-agnostic); rendered here in this design's flowing celestial palette. The
   local --glow token is the one warm champagne accent tuned for the brown band. */

.svc-addons { --glow: #d8c3b8; }
.svc-addons .pg-head { text-align: left; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.svc-addons .pg-head p { margin-left: 0; max-width: 56ch; }

.svc-carousel-viewport { overflow: hidden; }
.svc-carousel-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.svc-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(245, 243, 240, 0.18);
  background: rgba(245, 243, 240, 0.04);
  overflow: hidden;
  transition: opacity 0.7s ease;
}
.svc-slide[aria-hidden="true"] { opacity: 0.16; }

.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: 1.1rem;
  left: 1.1rem;
  background: var(--cream);
  color: var(--brown);
  padding: 0.5em 1.1em;
  font-family: var(--label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.svc-slide-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.9rem, 4vw, 3.6rem);
}
.svc-slide-index {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.5);
  margin-bottom: 1.3rem;
}
.svc-slide-index b { color: var(--glow); font-weight: 400; }
.svc-slide-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; }
.svc-slide-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
}
.svc-slide-price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--glow);
  white-space: nowrap;
}
.svc-slide-blurb {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-family: 'Raleway', var(--body);
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(245, 243, 240, 0.74);
}

.svc-addon-add {
  align-self: flex-start;
  margin-top: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.3s;
}
.svc-addon-add:hover { color: var(--glow); }
.svc-addon-add:focus-visible { outline: 2px solid var(--glow); outline-offset: 5px; }
.svc-addon-add-i {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 243, 240, 0.4);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1), background 0.3s, color 0.3s, border-color 0.3s;
}
.svc-addon-add:hover .svc-addon-add-i { border-color: var(--glow); }
.svc-slide.is-added .svc-addon-add-i {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--brown);
  transform: rotate(45deg);
}

/* nav: arrows flanking the dots (JS hides the row when there is one slide) */
.svc-carousel-nav {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.svc-carousel-arrow {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(245, 243, 240, 0.35);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.svc-carousel-arrow:hover { background: var(--glow); color: var(--brown); border-color: var(--glow); }
.svc-carousel-arrow:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.svc-carousel-dots { display: flex; align-items: center; gap: 0.75rem; }
.svc-carousel-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(245, 243, 240, 0.3);
  transition: background 0.3s, transform 0.3s;
}
.svc-carousel-dots button.is-live { background: var(--glow); transform: scale(1.35); }

.svc-addons-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.svc-addons-note {
  max-width: 46ch;
  font-family: 'Raleway', var(--body);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(245, 243, 240, 0.6);
}

/* ---------- FAQ garnish: answers ease open (this page only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: svc-faq-in 0.45s ease; }
}
@keyframes svc-faq-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Small screens (kit breakpoint) ---------- */

@media (max-width: 900px) {
  .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%; text-align: center; }
}

@media (max-width: 800px) {
  .svc-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'copy' 'media';
  }
  .svc-hero-copy h1 { font-size: 9.375vw; }
  .svc-hero-script { font-size: 9.2vw; margin-left: 0.4em; }
  .svc-hero-media { justify-self: center; width: min(100%, 340px); }
  .svc-found-grid { grid-template-columns: 1fr; }
  .svc-found-grid .pg-rows { padding-top: 0; }
  .svc-found-photo { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-carousel-track { transition: none; }
}