/* ============================================================
   FOREVER FILMS — styles.css  (v2 — Luxury Upgrade)
   Wedding Videography Website

   TABLE OF CONTENTS
   1.  Design Tokens
   2.  Reset & Base
   3.  Custom Scrollbar + Selection
   4.  Typography System
   5.  Layout Utilities
   6.  Buttons (with slide-fill hover)
   7.  Navigation
   8.  Hero
   9.  Portfolio
   10. About
   11. Services
   12. Contact
   13. Footer
   14. Scroll Reveal Animations
   15. Grain Texture Utility
   16. Media Queries
============================================================ */


/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root {
  /* ── Blacks (warm, not cool) */
  --black:           #090807;
  --black-rich:      #0e0d0b;
  --black-warm:      #141414;
  --charcoal:        #1e1c18;
  --charcoal-mid:    #2c2925;

  /* ── Whites / Ivories */
  --ivory:           #faf8f4;
  --ivory-warm:      #f5f0e8;
  --cream:           #ede8df;
  --parchment:       #e4ddd4;

  /* ── Greys */
  --grey-warm:       #5a5550;
  --grey-mid:        #7a7570;
  --grey-light:      #a09890;
  --grey-pale:       #c8c3bc;

  /* ── Rose Gold / Blush Pink (buttons, price highlights) */
  --rose-gold:       #c89898;
  --rose-gold-lt:    #d4b0b0;
  --rose-gold-dk:    #b08080;
  --rose-gold-pale:  rgba(200, 152, 152, 0.10);
  --rose-gold-glow:  rgba(200, 152, 152, 0.18);

  /* ── Sky / Navy palette (site-wide environment) */
  --sky-deep:        #060c16;
  --sky-dark:        #0b1828;
  --sky-mid:         #101e36;
  --sky-navy:        #0d1a2e;
  --sky-accent:      rgba(148, 196, 220, 0.80);
  --sky-accent-dim:  rgba(148, 196, 220, 0.45);
  --sky-border:      rgba(148, 196, 220, 0.12);

  /* ── Typography */
  --font-serif:      'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:       'Montserrat', Helvetica, Arial, sans-serif;

  /* ── Spacing */
  --section-pad:     120px;
  --container:       1240px;

  /* ── Motion */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:       cubic-bezier(0.76, 0, 0.24, 1);
  --speed-fast:      0.28s;
  --speed:           0.48s;
  --speed-slow:      0.8s;
}


/* ============================================================
   2. RESET & BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: #f0f7ff;
  color: var(--ivory);
  overflow-x: hidden;
  line-height: 1.75;
}

img, video {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: var(--font-sans);
}


/* ============================================================
   3. CUSTOM SCROLLBAR + SELECTION
============================================================ */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #102040;
}
::-webkit-scrollbar-thumb {
  background: var(--rose-gold-dk);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rose-gold);
}

::selection {
  background: rgba(148, 196, 220, 0.20);
  color: var(--ivory);
}


/* ============================================================
   4. TYPOGRAPHY SYSTEM
============================================================ */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

em {
  font-style: italic;
  color: var(--rose-gold);
}

/* Eyebrow label — appears above every section title */
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sky-accent);
  margin-bottom: 20px;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sky-accent);
  opacity: 0.55;
  flex-shrink: 0;
}

/* Section heading */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.section-title--light {
  color: var(--ivory);
}

/* Sky blue hairline divider */
.section-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--sky-accent), transparent);
  margin: 0 auto 32px;
}

/* Centred section intro paragraph */
.section-intro {
  font-size: 0.97rem;
  font-weight: 300;
  color: rgba(180, 215, 230, 0.55);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.section-intro--light {
  color: rgba(255, 255, 255, 0.90);
  font-weight: 400;
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
}

/* Left-aligned override for about section */
.section-header--left {
  text-align: left;
}
.section-header--left .section-eyebrow {
  justify-content: flex-start;
}
.section-header--left .section-eyebrow::before {
  display: none;
}
.section-header--left .section-divider {
  margin: 0 0 32px;
}


/* ============================================================
   5. LAYOUT UTILITIES
============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}


/* ============================================================
   6. BUTTONS (slide-fill hover effect)
============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 17px 40px;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
}

/* The slide-in fill layer */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-102%);
  transition: transform var(--speed) var(--ease-snap);
  z-index: 0;
}

.btn:hover::before {
  transform: translateX(0);
}

/* Keep button text above the fill layer */
.btn > * {
  position: relative;
  z-index: 1;
}

/* ── Primary: rose gold → darker on hover */
.btn--primary {
  background: var(--rose-gold);
  color: var(--ivory);
  border: 1px solid var(--rose-gold);
}
.btn--primary::before {
  background: var(--rose-gold-dk);
}
.btn--primary:hover {
  box-shadow: 0 8px 32px rgba(200, 152, 152, 0.28);
  transform: translateY(-2px);
}

/* ── Ghost: transparent → sky-blue border+fill */
.btn--ghost {
  background: transparent;
  color: rgba(220, 238, 250, 0.80);
  border: 1px solid rgba(148, 196, 220, 0.30);
}
.btn--ghost::before {
  background: rgba(148, 196, 220, 0.12);
}
.btn--ghost:hover {
  color: var(--ivory);
  border-color: rgba(148, 196, 220, 0.45);
  transform: translateY(-2px);
}

/* ── Outline (sky-tinted, for dark sections) */
.btn--outline {
  background: transparent;
  color: rgba(220, 235, 245, 0.65);
  border: 1px solid rgba(148, 196, 220, 0.22);
}
.btn--outline::before {
  background: rgba(148, 196, 220, 0.10);
}
.btn--outline:hover {
  color: var(--ivory);
  border-color: rgba(200, 152, 152, 0.50);
  transform: translateY(-2px);
}

/* ── White outline (for dark sections) */
.btn--outline-white {
  background: transparent;
  color: rgba(250, 248, 244, 0.55);
  border: 1px solid rgba(250, 248, 244, 0.15);
}
.btn--outline-white::before {
  background: var(--ivory);
}
.btn--outline-white:hover {
  color: var(--black);
  transform: translateY(-2px);
}


/* ============================================================
   7. NAVIGATION
============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 56px;
  background: rgba(173, 216, 245, 0.18);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(147, 197, 253, 0.20);
  transition: background  var(--speed) var(--ease-out),
              padding     var(--speed) var(--ease-out),
              border-color var(--speed) var(--ease-out),
              backdrop-filter var(--speed) var(--ease-out);
}

.nav--scrolled {
  background: rgba(47, 95, 158, 0.92);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  padding: 18px 56px;
  border-bottom-color: rgba(147, 197, 253, 0.30);
  box-shadow: 0 2px 32px rgba(30, 64, 120, 0.35);
}

/* Logo */
.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ivory);
  transition: color var(--speed-fast) var(--ease-out),
              opacity var(--speed-fast) var(--ease-out);
}
.nav__logo:hover {
  color: rgba(180, 218, 234, 0.90);
}

/* Links list */
.nav__links {
  display: flex;
  align-items: center;
  gap: 44px;
}

/* Individual link */
.nav__link {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.6);
  transition: color var(--speed-fast) var(--ease-out);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--sky-accent);
  transition: right var(--speed) var(--ease-snap);
}

.nav__link:hover {
  color: var(--ivory);
}
.nav__link:hover::after {
  right: 0;
}

/* CTA nav link */
.nav__link--cta {
  color: var(--rose-gold);
  border: 1px solid rgba(200, 152, 152, 0.40);
  padding: 11px 24px;
  letter-spacing: 0.25em;
  font-size: 0.62rem;
  background: rgba(200, 152, 152, 0.08);
  transition: all var(--speed-fast) var(--ease-out);
}
.nav__link--cta::after {
  display: none;
}
.nav__link--cta:hover {
  background: var(--rose-gold);
  color: var(--ivory);
  border-color: var(--rose-gold);
  box-shadow: 0 4px 20px rgba(200, 152, 152, 0.25);
}

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  z-index: 1100;
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(210, 232, 244, 0.88);
  transition: all var(--speed) var(--ease-snap);
}
.nav__toggle span:last-child {
  width: 18px;
}
.nav__toggle:hover span:last-child {
  width: 26px;
}

/* X state */
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle.is-open span:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   8. HERO
============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* ── Background: powder blue cinematic sky (parallax target via JS) */
.hero__bg {
  position: absolute;
  inset: -10%;          /* over-size for parallax movement */

  background:
    /* Warm golden-hour glow — right horizon, like a setting sun */
    radial-gradient(ellipse at 82% 58%,
      rgba(218, 188, 130, 0.22)  0%,
      rgba(210, 162, 112, 0.10) 28%,
      transparent               54%),
    /* Soft blush warmth — lower left atmosphere */
    radial-gradient(ellipse at 16% 74%,
      rgba(210, 158, 148, 0.16)  0%,
      transparent               40%),
    /* Pale sky light — upper centre */
    radial-gradient(ellipse at 44% 12%,
      rgba(148, 196, 222, 0.20)  0%,
      transparent               46%),
    /* Main sky gradient: deep midnight → muted powder blue (desaturated for premium feel) */
    linear-gradient(172deg,
      #0b1828  0%,
      #101e36  8%,
      #192e50  20%,
      #224268  34%,
      #2c5880  48%,
      #3f6e94  60%,
      #5484a8  72%,
      #6898b8  83%,
      #7aaabf  92%,
      #86b4c4  100%);

  background-color: #101e36; /* deep-navy fallback */

  /* ─────────────────────────────────────────────────────────
     TO REPLACE WITH YOUR OWN PHOTO instead:
     Remove all the above gradient lines and add:
       background-image: url('hero.jpg');
       background-size: cover;
       background-position: center 30%;
  ───────────────────────────────────────────────────────── */
  will-change: transform;
}

/* ── Dark overlay — heavier at top and bottom to frame text cleanly */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Tight dark band at the very top edge — adds depth, stops sky feeling flat */
    linear-gradient(to bottom,
      rgba(4, 8, 18, 0.82)  0%,
      rgba(4, 8, 18, 0.55)  6%,
      transparent           18%),
    /* Subtle left-edge vignette to deepen the composition */
    linear-gradient(to right,
      rgba(8, 14, 26, 0.32)  0%,
      transparent            40%),
    /* Main top-to-bottom: dark → open sky → dark base */
    linear-gradient(to bottom,
      rgba(8, 14, 26, 0.62)  0%,
      rgba(8, 14, 26, 0.28) 32%,
      rgba(8, 14, 26, 0.20) 52%,
      rgba(8, 14, 26, 0.58) 80%,
      rgba(5,  10, 20, 0.93) 100%);
  z-index: 1;
}

/* ── Film grain on hero — slightly elevated for the sky background */
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.055;   /* slightly higher than dark bg variant — sky needs more texture */
  pointer-events: none;
  z-index: 2;
}

/* ── Side page-counter decoration */
.hero__counter {
  position: absolute;
  right: 52px;
  bottom: 80px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fadeIn var(--speed-slow) var(--ease-out) 1.8s forwards;
}

.hero__counter-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(250, 248, 244, 0.25);
  letter-spacing: 0.12em;
}

.hero__counter-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(148, 196, 218, 0.55), transparent);
  opacity: 1;
}

.hero__counter-label {
  writing-mode: vertical-rl;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.2);
}

/* ── Main content */
.hero__content {
  position: relative;
  z-index: 4;
  max-width: 900px;
  padding: 0 32px;
}

/* Decorative thin rule above eyebrow */
.hero__ornament {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, rgba(196, 168, 168, 0.75));
  margin: 0 auto 28px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  animation: revealOrnament 1s var(--ease-out) 0.15s forwards;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(190, 220, 234, 0.85); /* soft powder blue — sky-toned */
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp var(--speed-slow) var(--ease-out) 0.4s forwards;
}

/* Remove the default eyebrow side-lines inside hero */
.hero .section-eyebrow::before,
.hero .section-eyebrow::after {
  display: none;
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, 8.5vw, 7.5rem);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 32px;
  /* Soft dark halo lifts the headline off the sky and sharpens legibility */
  text-shadow:
    0 2px 28px rgba(4, 10, 24, 0.50),
    0 1px  6px rgba(4, 10, 24, 0.30);
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp var(--speed-slow) var(--ease-out) 0.6s forwards;
}

.hero__headline em {
  /* Warm blush — catches the golden-hour glow against the cool sky */
  color: #d4b8b4;
  font-style: italic;
  font-weight: 300;
}

.hero__sub {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(250, 248, 244, 0.55);
  line-height: 1.95;
  margin-bottom: 52px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp var(--speed-slow) var(--ease-out) 0.82s forwards;
}

.hero__actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp var(--speed-slow) var(--ease-out) 1s forwards;
}

/* ── Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: 44px;
  left: 52px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 1.8s forwards;
}

.hero__scroll-label {
  writing-mode: vertical-rl;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.2);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(148, 196, 218, 0.7), transparent);
  animation: scrollDrop 2.4s var(--ease-in-out) infinite;
  opacity: 0.8;
}

/* ── Hero-scoped button overrides ──────────────────────────────
   The rest of the site keeps rose gold. The hero gets blush pink
   to harmonise with the powder blue sky + warm sunset palette.
──────────────────────────────────────────────────────────── */

/* Primary CTA: warm blush pink with soft ambient glow */
.hero .btn--primary {
  background: #c89898;
  color: var(--ivory);
  border-color: rgba(200, 152, 152, 0.85);
  /* Resting glow — makes the button feel lit from within */
  box-shadow:
    0 4px 22px rgba(200, 152, 152, 0.26),
    inset 0 1px 0 rgba(255, 242, 240, 0.20);
}
.hero .btn--primary::before {
  background: #b08080;
}
.hero .btn--primary:hover {
  /* Glow blooms on hover — deeper, warmer */
  box-shadow:
    0 8px 40px rgba(200, 152, 152, 0.44),
    0 2px 12px rgba(200, 152, 152, 0.20),
    inset 0 1px 0 rgba(255, 242, 240, 0.20);
}

/* Ghost CTA: soft sky-blue hover tint */
.hero .btn--ghost {
  border-color: rgba(160, 200, 220, 0.35);
  color: rgba(250, 248, 244, 0.80);
}
.hero .btn--ghost::before {
  background: rgba(148, 196, 218, 0.14);
}
.hero .btn--ghost:hover {
  border-color: rgba(160, 200, 220, 0.65);
  color: var(--ivory);
}

/* ── Keyframes */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes revealOrnament {
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0.6) translateY(-10px); opacity: 0.3; }
  50%  { transform: scaleY(1.1) translateY(4px);   opacity: 0.8; }
  100% { transform: scaleY(0.6) translateY(-10px); opacity: 0.3; }
}


/* ============================================================
   9. PORTFOLIO
============================================================ */
.portfolio {
  padding: var(--section-pad) 0;
  position: relative;
  background: #f0f7ff;
}

/* ── Asymmetric editorial grid: featured item spans 2 rows */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 3px;
}

/* Featured first item: taller, spans 2 rows */
.portfolio__item--featured {
  grid-row: span 2;
}
.portfolio__item--featured .portfolio__thumb {
  aspect-ratio: 3 / 4.5;
}

.portfolio__item {
  overflow: hidden;
}

/* Thumbnail */
.portfolio__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  background: var(--black);
}

/* Film-grain overlay on each thumb */
.portfolio__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 3;
  transition: opacity var(--speed) var(--ease-out);
}
.portfolio__thumb:hover::after {
  opacity: 0.02;
}

/* Gradient backgrounds */
.portfolio__gradient {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease-out);
}

/* Cinematic charcoal/slate tones — no brown, no warm hues */
.portfolio__gradient--1 { background: linear-gradient(150deg, #111111 0%, #1e1e1e 55%, #0d0d0d 100%); }
.portfolio__gradient--2 { background: linear-gradient(150deg, #0c1018 0%, #141c2a 55%, #09090f 100%); }
.portfolio__gradient--3 { background: linear-gradient(150deg, #111418 0%, #1a1e24 55%, #0d0f12 100%); }
.portfolio__gradient--4 { background: linear-gradient(150deg, #0e1014 0%, #181b20 55%, #0a0c0f 100%); }
.portfolio__gradient--5 { background: linear-gradient(150deg, #101010 0%, #1c1c1c 55%, #0d0d0d 100%); }
.portfolio__gradient--6 { background: linear-gradient(150deg, #0e1118 0%, #171b22 55%, #0b0d12 100%); }

.portfolio__thumb:hover .portfolio__gradient {
  transform: scale(1.07);
}

/* Subtle vignette on each card */
.portfolio__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
  opacity: 0.5;
  transition: opacity var(--speed) var(--ease-out);
}
.portfolio__thumb:hover::before {
  opacity: 0.8;
}

/* Play button */
.portfolio__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 4;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(148, 196, 220, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: rgba(148, 196, 220, 0.70);
  padding-left: 4px;
  opacity: 0;
  transition: all var(--speed) var(--ease-snap);
  backdrop-filter: blur(4px);
}

.portfolio__thumb:hover .portfolio__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(200, 152, 152, 0.12);
  color: var(--ivory);
  border-color: var(--rose-gold);
  box-shadow: 0 0 0 8px rgba(200, 152, 152, 0.06),
              0 0 40px rgba(200, 152, 152, 0.14);
}

/* Text overlay */
.portfolio__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 28px 26px;
  background: linear-gradient(to top,
    rgba(9, 8, 7, 0.85)  0%,
    rgba(9, 8, 7, 0.4)  50%,
    transparent         100%);
  z-index: 4;
  transform: translateY(12px);
  opacity: 0;
  transition: all var(--speed) var(--ease-out);
}

.portfolio__thumb:hover .portfolio__overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio__names {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

.portfolio__location {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(160, 210, 230, 0.80);
  opacity: 0.85;
}


/* ============================================================
   10. ABOUT
============================================================ */
.about {
  padding: var(--section-pad) 0;
  background: #dbeafe;
  position: relative;
  overflow: hidden;
}

/* Large faint serif watermark */
.about::before {
  content: 'Story';
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(8rem, 15vw, 18rem);
  font-weight: 300;
  color: rgba(148, 196, 220, 0.04);
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 96px;
  align-items: center;
}

/* ── Image side */
.about__visual {
  position: relative;
}

.about__img-frame {
  position: relative;
  z-index: 1;
}

.about__img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Pure charcoal — no brown tones */
  background-image: url('https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=800&q=80');
  background-size: cover;
  background-position: center top;
  background-color: #141414;
  /*
    TO USE YOUR OWN PHOTO:
    background-image: url('about.jpg');
    background-size: cover;
    background-position: center;
  */
  position: relative;
  overflow: hidden;
}

/* Grain on the image placeholder */
.about__img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.055;
  pointer-events: none;
}

/* Double sky accent border */
.about__img-accent {
  position: absolute;
  top: -18px;
  left: -18px;
  right: 18px;
  bottom: 18px;
  border: 1px solid rgba(148, 196, 220, 0.35);
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.about__img-accent::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(148, 196, 220, 0.10);
}

/* Pull-quote overlay block */
.about__quote-block {
  position: absolute;
  bottom: -32px;
  right: -36px;
  z-index: 2;
  background: rgba(10, 20, 38, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 196, 220, 0.12);
  padding: 24px 30px 26px;
  max-width: 260px;
  box-shadow: 0 24px 64px rgba(4, 8, 18, 0.45);
}

/* Rose gold accent line above quote */
.about__quote-block::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sky-accent);
  margin-bottom: 14px;
  opacity: 0.55;
}

.about__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(250, 248, 244, 0.75);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* ── Content side */
.about__content {
  padding-right: 24px;
}

.about__content .section-eyebrow {
  justify-content: flex-start;
}
.about__content .section-eyebrow::before {
  display: none;
}

.about__content .section-title {
  text-align: left;
  line-height: 1.08;
}

.about__content .section-divider {
  margin: 0 0 36px;
  height: 56px;
}

.about__text {
  font-size: 0.96rem;
  font-weight: 300;
  color: rgba(190, 218, 232, 0.62);
  line-height: 1.95;
  margin-bottom: 22px;
  max-width: 480px;
}

.about__text em {
  font-style: italic;
  color: var(--rose-gold);
}

/* Stats row */
.about__stats {
  display: flex;
  gap: 0;
  margin: 52px 0 44px;
  border-top: 1px solid rgba(148, 196, 220, 0.14);
  padding-top: 36px;
}

.about__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 24px;
  border-right: 1px solid rgba(148, 196, 220, 0.14);
}
.about__stat:last-child {
  border-right: none;
  padding-left: 24px;
  padding-right: 0;
}
.about__stat:nth-child(2) {
  padding-left: 24px;
}

.about__stat-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1;
  letter-spacing: -0.02em;
}

.about__stat-plus {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--rose-gold);
}

.about__stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(148, 196, 220, 0.55);
}

.about__cta {
  margin-top: 4px;
}


/* ============================================================
   11. SERVICES
============================================================ */
.services {
  padding: var(--section-pad) 0 calc(var(--section-pad) + 24px);
  background: linear-gradient(180deg, #7fb3e6 0%, #6aa3d8 100%);
  position: relative;
  overflow: hidden;
}

/* Grain on services */
.services__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.032;
  pointer-events: none;
  z-index: 0;
}

/* Radial glow behind featured card */
.services::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.services .container {
  position: relative;
  z-index: 1;
}

.services .section-title {
  color: #ffffff;
  font-weight: 400;
}

.services .section-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

/* Section intro scoped to services */
.services .section-intro {
  color: rgba(255, 255, 255, 0.90);
  font-weight: 400;
}

.services__intro {
  font-size: 0.97rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.90);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.9;
}

/* Grid */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 52px;
  background: rgba(255, 255, 255, 0.14);  /* gap color acts as border */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}

/* Card base — frosted lighter glass on medium-blue bg */
.services__card {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 56px 44px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: none;
  border-top: 3px solid transparent;
  position: relative;
  transition: background var(--speed) var(--ease-out),
              border-top-color var(--speed) var(--ease-out),
              box-shadow var(--speed) var(--ease-out);
}
.services__card:last-child {
  border-right: none;
}
.services__card:hover {
  background: rgba(255, 255, 255, 0.16);
  border-top-color: rgba(200, 152, 152, 0.65);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* Featured card — frosted white-glass with blush top accent */
.services__card--featured {
  background: rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-top: 3px solid var(--rose-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 8px 48px rgba(0, 0, 0, 0.14);
  position: relative;
  z-index: 1;
}
.services__card--featured:hover {
  background: rgba(255, 255, 255, 0.22);
  border-top-color: var(--rose-gold-lt);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 60px rgba(0, 0, 0, 0.18);
}

/* Glow effect behind featured */
.services__card--featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: var(--rose-gold);
  box-shadow: 0 0 28px 4px var(--rose-gold-glow);
  z-index: 0;
}

/* Badge */
.services__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose-gold);
  padding: 5px 10px;
  border: 1px solid rgba(196, 149, 138, 0.3);
}

/* Tier name */
.services__tier {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* Price */
.services__price {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--rose-gold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

/* On medium-blue bg, use white for prices so contrast is clear */
.services .services__price { color: #ffffff; }
.services .services__tier  { color: #ffffff; }

/* Thin rose gold rule */
.services__rule {
  width: 24px;
  height: 1px;
  background: var(--rose-gold);
  margin: 0 auto 36px;
  opacity: 0.45;
  position: relative;
  z-index: 1;
}

/* Feature list */
.services__features {
  margin-bottom: 44px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 1;
}

.services__features li {
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.6;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: color var(--speed-fast) var(--ease-out);
}
.services__features li:first-child { padding-top: 0; }
.services__features li:last-child  { border-bottom: none; padding-bottom: 0; }
.services__card:hover .services__features li { color: #ffffff; }
.services__card--featured .services__features li {
  color: rgba(255, 255, 255, 0.92);
}

/* btn--outline on medium-blue services bg */
.services__card .btn--outline {
  color: rgba(240, 248, 255, 0.70);
  border-color: rgba(255, 255, 255, 0.22);
}
.services__card .btn--outline::before {
  background: rgba(255, 255, 255, 0.10);
}
.services__card .btn--outline:hover {
  color: var(--ivory);
  border-color: rgba(200, 152, 152, 0.65);
}

/* Footer note */
.services__note {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  margin-top: 16px;
  margin-bottom: 8px;
}
.services__note a {
  color: var(--rose-gold);
  border-bottom: 1px solid rgba(200, 152, 152, 0.30);
  padding-bottom: 1px;
  transition: color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out);
}
.services__note a:hover {
  color: var(--rose-gold-lt);
  border-color: var(--rose-gold-lt);
}

/* Travel / accommodation footnote */
.services__travel-note {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-top: 10px;
}

/* Subtle collection availability line above footnote */
.services__collection-note {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}


/* ── 2026 Limited Collection card ─────────────────────────── */

/* Full-width spanning row */
.services__card--limited {
  grid-column: 1 / -1;
  background: linear-gradient(
    135deg,
    rgba(120, 185, 240, 0.20) 0%,
    rgba(47,  95, 158, 0.32) 100%
  );
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-top: 2px solid rgba(180, 215, 255, 0.55);
  border-radius: 0;           /* inherits from grid overflow:hidden */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 60px rgba(90, 155, 230, 0.18);
  padding: 52px 60px;
  text-align: left;
  align-items: flex-start;
  animation: limitedSlideUp 1s var(--ease-out) both;
}
.services__card--limited:hover {
  background: linear-gradient(
    135deg,
    rgba(140, 200, 248, 0.26) 0%,
    rgba(58, 112, 175, 0.40) 100%
  );
  border-top-color: rgba(200, 152, 152, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 80px rgba(90, 155, 230, 0.28);
}

/* Pill badge */
.services__limited-pill {
  position: absolute;
  top: 22px;
  right: 28px;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--rose-gold), var(--rose-gold-dk));
  padding: 6px 16px;
  border-radius: 20px;
}

/* Two-column inner layout */
.services__limited-layout {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
}
.services__limited-left {
  flex: 1;
  min-width: 0;
}
.services__limited-right {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 64px;
}

/* Eyebrow */
.services__limited-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

/* Subtitle */
.services__limited-subtitle {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

/* Price override: larger, pure white */
.services__card--limited .services__price {
  font-size: 3.8rem;
  color: #ffffff;
  margin-bottom: 24px;
}

/* Feature list: tighter spacing inside limited card */
.services__card--limited .services__features {
  margin-bottom: 14px;
}

/* Small asterisk disclaimer */
.services__limited-disclaimer {
  font-size: 0.70rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  line-height: 1.55;
}

/* Scarcity line */
.services__limited-scarcity {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 0.03em;
  line-height: 1.65;
}

/* Slide-up animation on load */
@keyframes limitedSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   12. CONTACT
============================================================ */
.contact {
  position: relative;
  padding: calc(var(--section-pad) + 24px) 0 var(--section-pad);
  background: linear-gradient(160deg, #2f5f9e 0%, #1e4d8a 55%, #1a3f7a 100%);
  overflow: hidden;
}

/* Atmospheric background gradients */
.contact__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 85%,  rgba(148, 196, 220, 0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 92% 12%, rgba(200, 152, 152, 0.05) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* Large watermark */
.contact::before {
  content: 'Begin';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: clamp(7rem, 14vw, 16rem);
  font-weight: 300;
  color: rgba(250, 248, 244, 0.015);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  z-index: 0;
}

.contact .container {
  position: relative;
  z-index: 1;
}

/* Availability nudge line below intro paragraph */
.contact__availability {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--rose-gold);
  margin-top: 18px;
  opacity: 0.90;
}

/* "Share a few details below" label above the form */
.contact__form-label {
  max-width: 760px;
  margin: 0 auto 18px;
  font-family: var(--font-sans);
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(148, 196, 220, 0.42);
}

/* "(optional)" modifier inside a label */
.form__optional {
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: none;
  color: rgba(148, 196, 220, 0.35);
  font-size: 0.58rem;
}

/* Form — frosted white-glass panel on deep dusk */
.contact__form {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  padding: 56px 64px;
  box-shadow:
    0 8px 48px rgba(20, 48, 100, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form__group + .form__group:not(.form__row .form__group) {
  margin-top: 0;
}

/* Standalone (full-width) form group spacing */
.contact__form > .form__group {
  margin-bottom: 28px;
}

label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--speed-fast) var(--ease-out);
}

.form__group:focus-within label {
  color: var(--sky-accent);
}

input,
textarea,
select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(148, 196, 220, 0.28);
  color: var(--ivory);
  padding: 14px 0;
  font-size: 0.94rem;
  font-weight: 300;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--speed-fast) var(--ease-out);
  border-radius: 0;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.60);
}

input:focus,
textarea:focus,
select:focus {
  border-bottom-color: var(--sky-accent);
}

/* Custom select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23c89898'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}

select option {
  background: #0e1e36;
  color: var(--ivory);
}

textarea {
  resize: none;
  min-height: 120px;
  padding-top: 16px;
  border: 0;
  border-bottom: 1px solid rgba(148, 196, 220, 0.15);
}
textarea:focus {
  border-bottom-color: var(--sky-accent);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.55) sepia(0.5) saturate(1.5) hue-rotate(330deg);
  opacity: 0.5;
  cursor: pointer;
}

.form__submit {
  text-align: center;
  margin-top: 48px;
}

/* Success state */
.form__success {
  display: none;
  text-align: center;
  margin-top: 36px;
  padding: 22px 32px;
  border: 1px solid rgba(148, 196, 220, 0.18);
  background: rgba(148, 196, 220, 0.05);
}
.form__success.is-visible {
  display: block;
}
.form__success p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rose-gold-lt);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}


/* ============================================================
   13. FOOTER
============================================================ */
.footer {
  background: linear-gradient(180deg, #1a3f7a 0%, #142f5e 100%);
  border-top: 1px solid rgba(147, 197, 253, 0.20);
  padding: 72px 0 36px;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(148, 196, 220, 0.06);
  margin-bottom: 36px;
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: block;
}

.footer__tagline {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sky-accent);
  opacity: 0.70;
}

.footer__provoc {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-accent);
  opacity: 0.50;
  margin-top: 10px;
}

.footer__nav {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: center;
}
.footer__nav a {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(148, 196, 220, 0.40);
  transition: color var(--speed-fast) var(--ease-out);
}
.footer__nav a:hover {
  color: rgba(180, 215, 232, 0.80);
}

.footer__social {
  display: flex;
  gap: 32px;
  align-items: center;
}
.footer__social a {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 196, 220, 0.38);
  transition: color var(--speed-fast) var(--ease-out);
  position: relative;
}
.footer__social a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--sky-accent);
  transition: right var(--speed) var(--ease-snap);
}
.footer__social a:hover {
  color: rgba(180, 215, 232, 0.80);
}
.footer__social a:hover::after {
  right: 0;
}

.footer__bottom {
  text-align: center;
}
.footer__bottom p {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: rgba(148, 196, 220, 0.22);
}



/* ============================================================
   LIGHT SECTION OVERRIDES
   Portfolio and About have light backgrounds; all generic
   .section-* classes are white/sky by default (for dark bgs).
   These scoped rules flip them to dark navy for readability.
============================================================ */

/* ── PORTFOLIO — off-white / light blue background ── */
.portfolio .section-eyebrow {
  color: rgba(18, 58, 110, 0.72);
}
.portfolio .section-eyebrow::before,
.portfolio .section-eyebrow::after {
  background: rgba(18, 58, 110, 0.38);
}
.portfolio .section-title {
  color: #1a3a66;
}
.portfolio .section-divider {
  background: linear-gradient(to bottom, rgba(18, 58, 110, 0.50), transparent);
}
.portfolio .section-intro {
  color: rgba(18, 55, 100, 0.62);
}
/* Portfolio thumb backgrounds stay dark (cinematic) — no override needed */
.portfolio__overlay {
  background: linear-gradient(to top,
    rgba(10, 25, 50, 0.88) 0%,
    rgba(10, 25, 50, 0.40) 50%,
    transparent 100%);
}

/* ── ABOUT — soft powder-blue background ── */
.about .section-eyebrow {
  color: rgba(14, 52, 100, 0.78);
}
.about .section-eyebrow::before,
.about .section-eyebrow::after {
  background: rgba(14, 52, 100, 0.42);
}
.about .section-title {
  color: #122e60;
}
.about .section-divider {
  background: linear-gradient(to bottom, rgba(14, 52, 100, 0.55), transparent);
}
/* About body text */
.about__text {
  color: rgba(16, 52, 100, 0.72);
}
.about__text em {
  color: #b07070;
}
/* Stats */
.about__stat-num {
  color: #102e60;
}
.about__stat-plus {
  color: #b07070;
}
.about__stat-label {
  color: rgba(14, 52, 100, 0.60);
}
.about__stats {
  border-top-color: rgba(14, 52, 100, 0.18);
}
.about__stat {
  border-right-color: rgba(14, 52, 100, 0.18);
}
/* Watermark */
.about::before {
  color: rgba(14, 52, 100, 0.05);
}
/* Quote block */
.about__quote-block {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(14, 52, 100, 0.14);
  box-shadow: 0 16px 48px rgba(14, 52, 100, 0.16);
}
.about__quote-block::before {
  background: rgba(14, 52, 100, 0.45);
}
.about__quote {
  color: rgba(16, 52, 100, 0.78);
}
/* Image accent border */
.about__img-accent {
  border-color: rgba(14, 52, 100, 0.30);
}
.about__img-accent::after {
  border-color: rgba(14, 52, 100, 0.12);
}
/* CTA button on light bg — use dark outline style */
.about .btn--outline {
  color: rgba(18, 55, 100, 0.75);
  border-color: rgba(18, 55, 100, 0.28);
}
.about .btn--outline::before {
  background: rgba(18, 55, 100, 0.08);
}
.about .btn--outline:hover {
  color: var(--ivory);
  border-color: #b07070;
}

/* Mobile stat border on light bg */
@media (max-width: 640px) {
  .about__stat:nth-child(2) {
    border-right-color: rgba(14, 52, 100, 0.18);
  }
}


/* ============================================================
   14. SCROLL REVEAL ANIMATIONS
   Three reveal variants: fade-up (default), fade-in, clip
   JS adds .is-visible via IntersectionObserver.
============================================================ */

/* Default: translate-up + fade */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  var(--speed-slow) var(--ease-out),
    transform var(--speed-slow) var(--ease-out);
}

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

/* Variant: fade-in only */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--speed-slow) var(--ease-out);
}
.reveal-fade.is-visible {
  opacity: 1;
}

/* Stagger: portfolio items */
.portfolio__item.is-visible:nth-child(2) { transition-delay: 0.08s; }
.portfolio__item.is-visible:nth-child(3) { transition-delay: 0.16s; }
.portfolio__item.is-visible:nth-child(4) { transition-delay: 0.04s; }
.portfolio__item.is-visible:nth-child(5) { transition-delay: 0.12s; }
.portfolio__item.is-visible:nth-child(6) { transition-delay: 0.20s; }

/* Stagger: service cards */
.services__card.is-visible:nth-child(2) { transition-delay: 0.1s; }
.services__card.is-visible:nth-child(3) { transition-delay: 0.2s; }


/* ============================================================
   15. GRAIN TEXTURE UTILITY (shared)
============================================================ */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.032;
}


/* ============================================================
   16. MEDIA QUERIES
============================================================ */

/* ── Large tablet */
@media (max-width: 1100px) {
  :root { --section-pad: 96px; }

  .about__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .about::before {
    font-size: 10rem;
    opacity: 0.06;
  }
}

/* ── Tablet */
@media (max-width: 960px) {
  :root { --section-pad: 80px; }

  .container { padding: 0 36px; }

  .nav { padding: 24px 36px; }
  .nav--scrolled { padding: 16px 36px; }

  /* Portfolio: drop to 2-column, remove featured span */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio__item--featured {
    grid-row: auto;
  }
  .portfolio__item--featured .portfolio__thumb {
    aspect-ratio: 4 / 3;
  }

  /* About: stack */
  .about__inner {
    grid-template-columns: 1fr;
    gap: 72px;
  }
  .about__visual {
    max-width: 460px;
    margin: 0 auto;
  }
  .about__content {
    padding-right: 0;
  }
  .about__content .section-title { text-align: center; }
  .about__content .section-eyebrow { justify-content: center; }
  .about__content .section-eyebrow::before { display: block; }
  .about__content .section-divider { margin: 0 auto 36px; }
  .about__text { max-width: 100%; }
  .about__cta { display: block; text-align: center; }

  /* Services: single column */
  .services__grid {
    grid-template-columns: 1fr;
    gap: 1px;
    max-width: 480px;
    margin: 0 auto 52px;
  }
  .services__card {
    border-right: none;
    border-top: 3px solid transparent;
  }
  .services__card--featured {
    border-top: 3px solid var(--rose-gold);
  }
  .services__card::after { display: none; }
  .services__card--limited {
    padding: 44px 28px 40px;
  }
  .services__limited-layout {
    flex-direction: column;
    gap: 28px;
  }
  .services__limited-right {
    flex: none;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 28px;
    width: 100%;
  }
  .services__limited-pill {
    top: 16px;
    right: 16px;
  }
  .services__card--limited .services__price {
    font-size: 3rem;
  }

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

/* ── Mobile */
@media (max-width: 640px) {
  :root { --section-pad: 64px; }

  .container { padding: 0 22px; }

  /* Nav */
  .nav { padding: 20px 22px; }
  .nav--scrolled { padding: 14px 22px; }
  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(47, 95, 158, 0.96);
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 1050;
    border-right: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { font-size: 0.9rem; letter-spacing: 0.28em; color: rgba(220, 235, 248, 0.75); }
  .nav__link:hover { color: var(--ivory); }
  .nav__link--cta {
    padding: 14px 40px;
    font-size: 0.75rem;
    background: rgba(200, 152, 152, 0.12);
    border-color: rgba(200, 152, 152, 0.40);
  }

  /* Hero */
  .hero__headline { font-size: 2.9rem; }
  .hero__sub br { display: none; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 280px; text-align: center; }
  .hero__scroll-indicator { left: 22px; }
  .hero__counter { display: none; }

  /* Portfolio */
  .portfolio__grid { grid-template-columns: 1fr; }

  /* About */
  .about__quote-block {
    right: 0;
    bottom: -24px;
    max-width: 210px;
    padding: 18px 20px 20px;
  }
  .about__stats { flex-wrap: wrap; gap: 0; row-gap: 28px; }
  .about__stat { min-width: 50%; }
  .about__stat:nth-child(2) { border-right: 1px solid rgba(148, 196, 220, 0.14); }
  .about__stat:last-child { border-right: none; padding-left: 0; }

  /* Services */
  .services__card { padding: 44px 28px; }

  /* Footer */
  .footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .footer__nav { justify-content: center; }
  .footer__social { justify-content: center; }
}


/* ============================================================
   PORTFOLIO-SECTION — single featured video
============================================================ */
.portfolio-section {
  padding: var(--section-pad) 0;
  background: #f0f7ff;
}
.portfolio-section .section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}
.portfolio-section .section-eyebrow {
  color: rgba(18, 58, 110, 0.72);
}
.portfolio-section .section-eyebrow::before,
.portfolio-section .section-eyebrow::after {
  background: rgba(18, 58, 110, 0.38);
}
.portfolio-section .section-title {
  color: #1a3a66;
  margin-bottom: 48px;
}
.featured-video-wrap {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  /* enforce 16:9 */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 56px rgba(18, 58, 110, 0.22);
  background: #000;
}
.featured-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  .portfolio-section .section-inner { padding: 0 22px; }
}


/* ============================================================
   PORTFOLIO SECTION — description line
============================================================ */
.portfolio-section__desc {
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(18, 55, 100, 0.62);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.9;
  text-align: center;
}


/* ============================================================
   WHAT YOU CAN EXPECT SECTION
============================================================ */
.expect-section {
  padding: var(--section-pad) 0;
  background: #dbeafe;
}
.expect__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}
.expect__eyebrow {
  color: rgba(14, 52, 100, 0.78);
}
.expect__eyebrow::before,
.expect__eyebrow::after {
  background: rgba(14, 52, 100, 0.42);
}
.expect__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: #122e60;
  margin-bottom: 64px;
  letter-spacing: -0.01em;
}
.expect__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 56px;
}
.expect__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.expect__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  color: #1e4d8a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expect__icon svg {
  width: 100%;
  height: 100%;
}
/* Rose accent on the icon stroke */
.expect__col:nth-child(1) .expect__icon { color: #1e4d8a; }
.expect__col:nth-child(2) .expect__icon { color: #b07070; }
.expect__col:nth-child(3) .expect__icon { color: #1e4d8a; }
.expect__title {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #122e60;
  margin-bottom: 14px;
}
.expect__text {
  font-size: 0.94rem;
  font-weight: 300;
  color: rgba(18, 55, 100, 0.70);
  line-height: 1.85;
  margin-bottom: 10px;
}
.expect__disclaimer {
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(18, 55, 100, 0.44);
  line-height: 1.7;
  font-style: italic;
  margin-top: 4px;
}
@media (max-width: 960px) {
  .expect__grid { grid-template-columns: 1fr; gap: 48px; }
  .expect__inner { padding: 0 36px; }
}
@media (max-width: 640px) {
  .expect__inner { padding: 0 22px; }
}


/* ============================================================
   ABOUT VALUE STATEMENTS (replaces stats)
============================================================ */
.about__values {
  display: flex;
  gap: 0;
  margin: 52px 0 44px;
  border-top: 1px solid rgba(14, 52, 100, 0.18);
  padding-top: 36px;
}
.about__value {
  flex: 1;
  padding-right: 28px;
  border-right: 1px solid rgba(14, 52, 100, 0.18);
}
.about__value:last-child {
  border-right: none;
  padding-right: 0;
}
.about__value + .about__value {
  padding-left: 28px;
}
.about__value-title {
  font-family: var(--font-sans);
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #122e60;
  margin-bottom: 10px;
}
.about__value-text {
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(16, 52, 100, 0.68);
  line-height: 1.85;
}
@media (max-width: 640px) {
  .about__values { flex-direction: column; gap: 28px; }
  .about__value { border-right: none; padding: 0 0 28px; border-bottom: 1px solid rgba(14,52,100,0.18); }
  .about__value:last-child { border-bottom: none; padding-bottom: 0; }
  .about__value + .about__value { padding-left: 0; }
}


/* ── Footer bottom row with logo ──────────────────────────── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-bottom-text {
  flex: 1;
}
.footer-bottom-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.dog-logo {
  width: 42px;
  height: auto;
  display: block;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-wrap: wrap;
  }
  .footer-bottom-logo {
    width: 100%;
    justify-content: flex-end;
  }
  .dog-logo {
    width: 36px;
  }
}