/* ============================================
   Focal Studio — Portfolio
   Style sombre, épuré (réf. capture Adobe Portfolio)
   ============================================ */

:root {
  --bg: #222222;
  --bg-elevated: #2c2c2c;
  --text: #f5f5f4;
  --text-dim: #a8a8a6;
  --border: #333333;
  --accent: #f5f5f4;
  --gold: #c9a876;
  --gold-dim: rgba(201, 168, 118, 0.14);
  --c-video: #6f9fd8;
  --c-video-dim: rgba(111, 159, 216, 0.16);
  --c-photo: #6fb88f;
  --c-photo-dim: rgba(111, 184, 143, 0.16);
  --c-design: #b98cd6;
  --c-design-dim: rgba(185, 140, 214, 0.16);
  --gap: 4px;
  --header-h: 148px; /* header padding (40+20) + logo height (88) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on short pages (About, Contact), .page grows to
     fill the leftover space so the footer always sits at the bottom
     of the screen instead of right after the content. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Header / Nav ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 40px 40px 20px;
  background: var(--bg);
}

.logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}

.logo img {
  height: 88px;
  width: auto;
  display: block;
}

nav {
  grid-column: 1;
  justify-self: start;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
}

nav a {
  font-size: 15px;
  color: var(--text-dim);
  font-weight: 400;
  transition: color 0.2s ease;
}

nav a:hover,
nav a.active {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px) {
  header {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 20px 16px 14px;
    row-gap: 12px;
  }

  .logo {
    grid-column: 1;
  }

  .logo img {
    height: 44px;
  }

  nav {
    grid-column: 1;
    justify-self: center;
  }

  nav ul {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  nav a {
    font-size: 13px;
  }

  :root {
    --header-h: 116px;
  }
}

/* ---------- Hero ----------
   The hero is pinned to the viewport (position: fixed) while
   .hero-spacer reserves its height in the normal document flow.
   .grid-section sits right after the spacer with an opaque
   background, so as the page scrolls it rises up and
   progressively covers the fixed headline underneath it.
*/

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  overflow: hidden;
  /* Title is centered within the full screen, below the header. */
  padding-top: var(--header-h);
  z-index: 1;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.35;
  z-index: 0;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 1000px;
}

.hero p {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 300;
  max-width: 560px;
}

.hero-spacer {
  /* Full screen height, so the entire fixed hero (and its background
     video) is revealed before the grid starts rising to cover it —
     otherwise the grid's opaque top edge overlaps the bottom of the
     hero from the very first frame, making the video look cropped. */
  height: 100vh;
  height: 100dvh;
}

/* The fixed-hero / rising-grid effect is kept on mobile too — only
   the side padding and title size adjust for narrow screens. The
   header's own mobile breakpoint (640px) updates --header-h so the
   title stays centered in the gap above the grid on phones as well. */
@media (max-width: 640px) {
  .hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* On phones the hero only takes ~60% of the screen, so the top of the
     grid already peeks in at the bottom on first load and visitors can
     see there is something to scroll to. */
  .hero {
    height: 62vh;
    height: 62svh;
  }

  /* The sticky header already sits in the flow above the spacer, so the
     spacer is shortened by its height to make the grid start exactly
     where the hero ends. */
  .hero-spacer {
    height: calc(62vh - var(--header-h));
    height: calc(62svh - var(--header-h));
  }

  /* Background video fills the whole hero area on phones instead of a
     thin landscape band, so there is no empty strip above the grid. */
  .hero-bg-video {
    top: 0;
    height: 100%;
    object-fit: cover;
    transform: none;
  }
}

/* ---------- Video Grid ---------- */

.grid-section {
  position: relative;
  z-index: 2;
  /* No background here on purpose: the section itself is only as wide
     as the viewport, but the grid inside it is capped at 1400px, so
     leaving this transparent lets the fixed hero video keep showing
     through the empty margins left and right of the grid content. */
  background: transparent;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  /* Transparent on purpose (no more solid fill in the gap tracks): the
     fixed hero video shows through every gap in the grid — between
     tiles and between rows alike — for a consistent look everywhere. */
  background: transparent;
  border-top: 1px solid var(--border);
  max-width: 1400px;
  margin: 0 auto;
}

/* Every row after the first gets the same gap above it as the gap
   between tiles within a row, so spacing is uniform everywhere in the
   grid — regardless of whether a row is a portrait or landscape one. */
.grid + .grid {
  margin-top: var(--gap);
}

/* Second row: landscape (16:9) videos, 2 up, spanning the same
   container width as the portrait grid above. */
.landscape-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* The grid stays 3 columns (2 for landscape rows) all the way down to
   phone widths, same layout as desktop — only the inner spacing and
   text sizes shrink so tiles stay comfortable to tap and read. */
@media (max-width: 700px) {
  :root {
    --gap: 2px;
  }

  .grid-item .overlay {
    padding: 10px;
  }

  .grid-item .title {
    font-size: 11px;
    line-height: 1.3;
  }

  .grid-item .category {
    font-size: 9px;
    margin-top: 2px;
  }

  .play-icon {
    width: 22px;
    height: 22px;
    top: 8px;
    right: 8px;
  }

  .play-icon::after {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 6px;
  }
}

@media (max-width: 420px) {
  .grid-item .overlay {
    padding: 8px;
  }

  .grid-item .title {
    font-size: 10px;
  }

  .grid-item .category {
    display: none;
  }
}

.grid-item {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
}

/* Landscape (16:9) source videos keep their native ratio
   instead of the portrait 9:16 tile shape, so nothing is cropped. */
.grid-item.landscape {
  aspect-ratio: 16 / 9;
}

.grid-item video,
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-item .placeholder-fill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px;
}

/* Titles/categories are no longer shown on the grid — tiles stay clean,
   with only a small play icon marking video tiles. */
.grid-item .overlay {
  display: none;
}

.play-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(245, 245, 244, 0.5);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.grid-item:hover .play-icon {
  opacity: 1;
}

.play-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--text);
  margin-left: 2px;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.lightbox.open {
  display: flex;
}

.lightbox video {
  max-width: 100%;
  max-height: 85vh;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 28px;
  color: var(--text);
  cursor: pointer;
  font-weight: 200;
}

/* ---------- Back to top ---------- */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 200;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top::after {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1.5px solid var(--text);
  border-top: 1.5px solid var(--text);
  transform: rotate(45deg) translateY(2px);
}

/* ---------- Generic page content (About / Contact) ---------- */

.page {
  padding: 120px 40px 120px;
  max-width: 760px;
  margin: 0 auto;
  /* Fills the remaining vertical space on short pages, so the footer
     below always lands at the bottom of the screen instead of right
     after the content. */
  flex: 1 0 auto;
  width: 100%;
}

.page h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  margin-bottom: 40px;
  text-align: center;
}

.page p {
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 20px;
  max-width: 640px;
}

.page p strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------- About: photo + text layout ---------- */

.about-page {
  max-width: 1100px;
}

.about-layout {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.about-photo {
  width: 48%;
  max-width: 480px;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
}

.about-text {
  flex: 1;
  padding-top: 4px;
}

.about-text h1 {
  text-align: left;
  margin-bottom: 24px;
}

.about-text p {
  max-width: none;
}

@media (max-width: 800px) {
  .about-layout {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .about-photo {
    width: 70%;
    max-width: 320px;
  }

  .about-text h1 {
    text-align: center;
  }
}

/* ---------- Services ---------- */

.services-page {
  max-width: 1200px;
}

.services-page > h1 {
  text-align: left;
  margin-bottom: 12px;
}

.services-intro {
  max-width: 640px;
  margin-bottom: 32px;
}

/* Positioning statement: sets the frame (one director, premium craft,
   not a content factory) before the client sees any numbers. */
.positioning-block {
  max-width: 760px;
  padding: 36px 0 40px;
  margin-bottom: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.positioning-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.positioning-statement {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  max-width: 680px;
  margin-bottom: 14px;
}

.positioning-sub {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
  max-width: 620px;
}

.equivalence-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 60px;
}

.equivalence-banner strong {
  font-weight: 500;
  color: var(--text);
  font-size: 15px;
}

.equivalence-banner span {
  color: var(--text-dim);
  font-size: 13px;
}

.services-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}

.services-section-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  margin-bottom: 6px;
}

.services-section-sub {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 28px;
}

/* À la carte cards — grouped by category: a main shoot card on the
   left, with its related smaller services stacked to its right. */

.carte-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 64px;
}

.carte-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.carte-substack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.carte-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  /* Default accent; overridden per category below so each family of
     services (video, photo, graphic design) reads as its own group. */
  --card-accent: var(--gold);
  --card-accent-dim: var(--gold-dim);
}

/* Category color-coding: video shoot + its edits share one hue, photo
   shoot + retouching share another, graphic design gets a third. */
[data-item="video-shoot"],
[data-item="edit-short"],
[data-item="edit-long"] {
  --card-accent: var(--c-video);
  --card-accent-dim: var(--c-video-dim);
}

[data-item="photo-shoot"],
[data-item="retouch"] {
  --card-accent: var(--c-photo);
  --card-accent-dim: var(--c-photo-dim);
}

.carte-card-group {
  --card-accent: var(--c-design);
  --card-accent-dim: var(--c-design-dim);
}

.carte-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.carte-card.active {
  border-color: var(--card-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--card-accent-dim);
}

/* A slim, always-visible accent bar so each category reads as its own
   color group at a glance, not only once an item is selected. */
.carte-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--card-accent);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.carte-card.active::before {
  opacity: 1;
}

.carte-card-main {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
}

.carte-card-sub {
  padding: 18px 20px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.carte-icon {
  width: 24px;
  height: 24px;
  color: var(--card-accent);
  opacity: 0.75;
  margin-bottom: 16px;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.carte-card.active .carte-icon {
  opacity: 1;
}

.carte-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.carte-card-head h3 {
  font-size: 16px;
  font-weight: 400;
}

.carte-card-sub .carte-card-head h3 {
  font-size: 14px;
}

.carte-rate {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}

.carte-card-sub .carte-rate {
  font-size: 12px;
}

.carte-desc {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 20px;
  min-height: 34px;
}

.carte-card-sub .carte-desc {
  font-size: 12px;
  margin-bottom: 14px;
  min-height: 0;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.carte-card-sub .stepper {
  gap: 12px;
  padding-top: 12px;
}

.stepper-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.carte-card-sub .stepper-btn {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.stepper-btn:hover {
  border-color: var(--card-accent);
  color: var(--card-accent);
  background: var(--card-accent-dim);
}

.stepper-value {
  min-width: 64px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
}

/* Brief bounce on the number itself whenever a stepper changes value */
.stepper-value.bump {
  animation: stepperBump 0.32s ease;
}

@keyframes stepperBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
    color: var(--card-accent, var(--gold));
  }
  100% {
    transform: scale(1);
  }
}

/* Graphic design — grouped per-deliverable pricing */

.carte-card-group {
  gap: 0;
}

.carte-card-group .carte-desc {
  margin-bottom: 4px;
}

.carte-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  transition: opacity 0.2s ease;
}

.carte-mini-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.carte-mini-label span:first-child {
  font-size: 13px;
  color: var(--text);
}

.carte-mini-rate {
  font-size: 11px;
  color: var(--text-dim);
}

.carte-mini-row.active .carte-mini-label span:first-child {
  font-weight: 500;
  color: var(--card-accent);
}

.stepper.stepper-mini {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  gap: 10px;
}

.stepper-mini .stepper-btn {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.stepper-mini .stepper-value {
  min-width: 20px;
  font-size: 13px;
}

/* Monthly package cards */

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.package-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.1s ease-out, transform 0.1s ease-out, box-shadow 0.1s ease-out;
  /* Each card's own accent, reused from its title color, so hovering
     clearly highlights which package the cursor is over. */
  --package-accent: var(--gold);
  --package-accent-dim: var(--gold-dim);
}

.package-card[data-package="starter"] {
  --package-accent: var(--c-video);
  --package-accent-dim: var(--c-video-dim);
}

.package-card[data-package="premium"] {
  --package-accent: var(--c-design);
  --package-accent-dim: var(--c-design-dim);
}

.package-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Scoped with an extra ancestor class (instead of just .package-card:hover)
   so this reliably beats the .reveal.reveal-in rule's own `transform`
   declaration once the card has scrolled into view — same specificity,
   later source order was silently cancelling the hover zoom otherwise. */
.package-grid .package-card:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: var(--package-accent);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--package-accent),
    0 0 24px var(--package-accent-dim);
  z-index: 1;
}

.package-grid .package-card:hover .package-name {
  filter: brightness(1.25);
}

.package-card.selected {
  border-color: var(--gold);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--gold-dim);
}

.package-card.selected::before {
  opacity: 1;
}

.package-card[data-package="growth"] {
  border-color: rgba(201, 168, 118, 0.35);
}

.package-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--gold);
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Brief gold flash when a package is selected */
.package-card.selected {
  animation: packageSelectFlash 0.5s ease;
}

@keyframes packageSelectFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 168, 118, 0.55);
  }
  100% {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(201, 168, 118, 0);
  }
}

.package-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.package-name {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
}

/* Each package gets its own title color, echoing the à la carte
   category hues so the whole page reads as one coherent palette. */
.package-card[data-package="starter"] .package-name {
  color: var(--c-video);
}

.package-card[data-package="growth"] .package-name {
  color: var(--gold);
}

.package-card[data-package="premium"] .package-name {
  color: var(--c-design);
}

.package-desc {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 20px;
  min-height: 52px;
}

.package-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.package-features li {
  font-size: 13px;
  color: var(--text-dim);
  padding-left: 16px;
  position: relative;
}

.package-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 1px;
  background: var(--text-dim);
}

.package-price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  margin-bottom: 20px;
  /* Anchors the price (and the button right after it) to the same
     spot at the bottom of every card, regardless of how many lines
     the description/features above happen to wrap onto. */
  margin-top: auto;
}

.package-price-old {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: line-through;
  order: 1;
}

.package-price-new {
  font-size: 26px;
  font-weight: 500;
  color: var(--gold);
  order: 0;
  white-space: nowrap;
}

.package-price-new small {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-dim);
  margin-left: 2px;
  white-space: nowrap;
}

.package-save {
  font-size: 12px;
  color: var(--text-dim);
  order: 2;
  width: 100%;
}

.package-select-btn {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}

.package-select-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
}

.package-card.selected .package-select-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
}

/* Why us */

.services-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 20px;
}

.services-why-item h4 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}

.services-why-item p {
  font-size: 13px;
  color: var(--text-dim);
  max-width: none;
}

.services-custom-note {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

/* Quote cart */

.quote-cart {
  position: sticky;
  /* Sticks just below the real header height (not a guessed pixel
     value), so "Your request" never gets covered by the header band
     while scrolling. */
  top: calc(var(--header-h) + 20px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 26px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.quote-cart h3 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.quote-cart-empty {
  color: var(--text-dim);
  font-size: 13px;
  max-width: none;
  margin-bottom: 0;
}

.quote-cart-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.quote-cart-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.quote-cart-items li span:last-child {
  color: var(--text);
  white-space: nowrap;
}

.quote-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 4px;
  margin-bottom: 20px;
  font-size: 16px;
}

.quote-cart-total span:last-child {
  font-size: 20px;
  font-weight: 500;
  color: var(--gold);
  transition: color 0.15s ease;
  display: inline-block;
}

.quote-cart-total span:last-child.bump {
  animation: totalFlash 0.5s ease;
}

@keyframes totalFlash {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
    color: var(--text);
  }
  100% {
    transform: scale(1);
    color: var(--gold);
  }
}

.quote-cart-send {
  width: 100%;
  background: var(--gold);
  color: #1a1a1a;
  border: none;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.quote-cart-send:hover {
  opacity: 0.85;
}

.quote-cart-send:active {
  transform: scale(0.97);
}

.quote-cart-send:disabled {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}

.quote-cart-note {
  color: var(--text-dim);
  font-size: 11px;
  max-width: none;
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
}

/* Scroll-triggered reveal: cards fade + rise into place as they enter
   the viewport (toggled via IntersectionObserver in script.js). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1000px) {
  .services-layout {
    grid-template-columns: 1fr;
  }

  .quote-cart {
    position: static;
  }

  .package-grid {
    grid-template-columns: 1fr;
  }

  .services-why {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .carte-row {
    grid-template-columns: 1fr;
  }

  .carte-substack {
    flex-direction: row;
  }

  .services-why {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact ---------- */

.contact-block {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.contact-block a {
  font-size: 16px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.contact-block a:hover {
  opacity: 0.6;
}

form {
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
}

form label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  display: block;
}

form input,
form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  padding: 10px 0;
  font-family: inherit;
}

form input:focus,
form textarea:focus {
  outline: none;
  border-bottom-color: var(--text);
}

form textarea {
  resize: vertical;
  min-height: 100px;
}

form button {
  margin-top: 10px;
  align-self: center;
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  padding: 12px 32px;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

form button:hover {
  background: var(--text);
  color: var(--bg);
}

/* ---------- Footer ---------- */

footer {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 13px;
  flex-shrink: 0;
}