/* ==========================================================================
   VITÓRIA — DOCUMENTARY PHOTOGRAPHY
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   1.  CSS Variables (colours, fonts, spacing) — CHANGE HERE
   2.  Reset & Base
   3.  Typography
   4.  Utilities (skip-link, text-link, scroll indicator)
   5.  Navigation
   6.  Hero
   7.  Manifesto
   8.  Categories
   9. Gallery
   10. About
   11. Story
   12. Pricing teaser
   13. Pricing detail
   14. Intro round (temporary)
   15. Contact
   16. Footer
   17. Animations & Reveal
   18. Responsive (mobile-first → desktop)
   19. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. CSS VARIABLES — CHANGE COLOURS & FONTS HERE
   ========================================================================== */
:root {
  /* Colours */
  --colour-bg:          #faf8f5;   /* warm off-white / ivory */
  --colour-bg-alt:      #f2efe9;   /* slightly darker ivory for alternating sections */
  --colour-text:        #1c1c1c;   /* very dark charcoal */
  --colour-text-muted:  #6b6560;   /* muted neutral for secondary text */
  --colour-accent:      #1a2b6d;   /* deep Yves-Klein-inspired blue (restrained) */
  --colour-border:      #e0dcd6;
  --colour-overlay:     rgba(20, 18, 16, 0.45); /* for image overlays */

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --max-width: 1440px;
  --nav-height: 64px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.8s var(--ease-out);
  --transition-med:  0.4s var(--ease-out);
  --transition-fast: 0.2s var(--ease-out);
}


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

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

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-text);
  background-color: var(--colour-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul {
  list-style: none;
}

/* Visible focus states for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--colour-text);
  color: var(--colour-bg);
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.skip-link:focus {
  top: var(--space-sm);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero__title-line--large,
.manifesto__heading,
.about__heading,
.story__heading,
.contact__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.text-link {
  color: var(--colour-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--transition-fast);
}
.text-link:hover {
  opacity: 0.7;
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--colour-bg);
  z-index: 3;
}
.scroll-indicator__line {
  display: block;
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top;
}
.scroll-indicator__text {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}


/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  transition: background var(--transition-med), box-shadow var(--transition-med);
}

/* At the top of the page the header sits over a split hero: the photo covers
   only the left ~60%, so nav items fall on both the photo and the light
   panel, and the boundary moves with viewport width and label length.
   A soft light scrim guarantees the dark nav text stays readable over
   either, without depending on where the split lands. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(250, 248, 245, 0.92) 0%,
    rgba(250, 248, 245, 0.72) 55%,
    rgba(250, 248, 245, 0) 100%
  );
  pointer-events: none;
  transition: opacity var(--transition-med);
}

/* Once scrolled the header has its own solid background, so drop the scrim. */
.site-header.is-scrolled::before {
  opacity: 0;
}

.site-header > .nav {
  position: relative;
}

/* Solid background when scrolled (added via JS) */
.site-header.is-scrolled {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--colour-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: var(--nav-height);
}

.nav__logo {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-text);
  transition: color var(--transition-med);
  z-index: 102;
}

.site-header.is-scrolled .nav__logo,
.site-header.is-menu-open .nav__logo {
  color: var(--colour-text);
}

.nav__menu {
  display: flex;
  gap: var(--space-lg);
}

/* The hero is a split panel: the photo covers only the left ~60%, so nav
   links sit on the light content panel, not on the photo. They start dark
   and stay dark. Only the logo overlaps the photo, so it starts cream and
   darkens on scroll. */
.nav__link {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-text);
  transition: color var(--transition-med), opacity var(--transition-fast);
}
.nav__link:hover {
  opacity: 0.6;
}

/* Language switch (PT / EN) */
.nav__lang {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--colour-text);
  opacity: 0.6;
  padding-left: var(--space-md);
  border-left: 1px solid currentColor;
  transition: color var(--transition-med), opacity var(--transition-fast);
}
.nav__lang:hover {
  opacity: 1;
}

/* Hamburger toggle (mobile) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 102;
  padding: 0;
}

.nav__toggle-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--colour-text);
  transition: transform var(--transition-med), opacity var(--transition-med), background var(--transition-med);
}

.site-header.is-scrolled .nav__toggle-line,
.site-header.is-menu-open .nav__toggle-line {
  background: var(--colour-text);
}

/* Hamburger → X animation */
.site-header.is-menu-open .nav__toggle-line:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}
.site-header.is-menu-open .nav__toggle-line:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}


/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--colour-bg);
}

.hero__image {
  width: 100%;
  height: 60svh;
  overflow: hidden;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hero.jpg is a tall portrait (2:3) shown in a landscape frame, so cover
     crops it hard. Anchored low: the subject of this photo is the pregnant
     belly with the dog, not the faces at the top. On narrow screens the
     frame is less wide, so the crop is pushed lower still to keep the
     faces out of shot (see the mobile rule further down). */
  object-position: center 75%;
}

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  gap: var(--space-sm);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.hero__title-line {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.hero__title-line--large {
  font-family: var(--font-serif);
  /* In the split desktop layout this heading lives in a column that is only
     40% of the viewport minus padding, so sizing from vw overflows the panel
     and pushes the page sideways. Below 1024px the hero stacks and the
     heading gets the full width, so the viewport-based clamp is correct
     there; the 1024px+ override below handles the split case. */
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--colour-text);
  text-transform: uppercase;
}

.hero__categories {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--colour-text-muted);
}
.hero__location {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-sm);
}
.hero__intro {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 32ch;
  color: var(--colour-text);
  margin-bottom: var(--space-md);
}

.hero__cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-bg);
  background: var(--colour-text);
  padding: 0.9rem 2rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.hero__cta:hover {
  background: var(--colour-accent);
  color: #fff;
}

.hero__price-hint {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
  margin-top: var(--space-sm);
}


/* ==========================================================================
   7. MANIFESTO
   ========================================================================== */
.manifesto {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.manifesto__image {
  position: absolute;
  inset: 0;
}
.manifesto__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manifesto__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 18, 16, 0.55) 0%,
    rgba(20, 18, 16, 0.15) 50%,
    rgba(20, 18, 16, 0.1) 100%
  );
}
.manifesto__overlay {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.manifesto__heading {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  color: #fff;
  margin-bottom: var(--space-sm);
  text-shadow: 0 1px 20px rgba(0,0,0,0.2);
}
.manifesto__sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 40ch;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0,0,0,0.2);
}



/* ==========================================================================
   8. CATEGORIES
   ========================================================================== */
.categories {
  background: var(--colour-bg-alt);
  padding: var(--space-2xl) 0;
}
.category {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Each category photo keeps its natural ratio: maternity-01 and newborn-01
   are portrait (2:3), family-01 is landscape (3:2). A single fixed box cropped
   family-01 by 50%, so there is no shared aspect-ratio here by design. */
.category__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.category__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.category__title {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.category__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--colour-text);
}
.category__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--colour-text-muted);
  max-width: 44ch;
}
.category__link {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-accent);
  margin-top: var(--space-xs);
  transition: opacity var(--transition-fast);
}
.category__link:hover {
  opacity: 0.7;
}


/* ==========================================================================
   9. GALLERY
   ========================================================================== */
.gallery {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}
.gallery__heading {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-xl);
}
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.gallery__item {
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}
.gallery__item:hover img {
  transform: scale(1.02);
  opacity: 0.9;
}
/* Ratio values match the actual photos so nothing is cropped:
   gallery-01 and gallery-03 are 3:2 landscape (--wide),
   gallery-02 is 2:3 portrait (--tall), gallery-04 is 3:2 landscape. */
.gallery__item--tall img {
  aspect-ratio: 2/3;
}
.gallery__item--wide img {
  aspect-ratio: 3/2;
}
.gallery__item:not(.gallery__item--tall):not(.gallery__item--wide) img {
  aspect-ratio: 3/2;
}
.gallery__note {
  font-size: 0.7rem;
  color: var(--colour-text-muted);
  margin-top: var(--space-lg);
  letter-spacing: 0.05em;
}
.gallery__note code {
  background: var(--colour-bg-alt);
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}


/* ==========================================================================
   10. ABOUT
   ========================================================================== */
.about {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--colour-bg);
}
/* Text-only until a vitoria.jpg portrait exists: centre the copy so the
   section doesn't read as left-aligned text beside empty space. */
.about__content {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}
.about__heading {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: var(--space-md);
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48ch;
  margin: 0 auto;
}
.about__portrait img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}


/* ==========================================================================
   11. STORY
   ========================================================================== */
.story {
  position: relative;
  min-height: 90svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.story__image {
  position: absolute;
  inset: 0;
}
.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(20, 18, 16, 0.55) 0%,
    rgba(20, 18, 16, 0.2) 60%,
    rgba(20, 18, 16, 0.1) 100%
  );
}
.story__overlay {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.story__heading {
  font-size: clamp(2rem, 6vw, 3.8rem);
  color: #fff;
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 20px rgba(0,0,0,0.2);
}
.story__text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 44ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.2);
}


/* ==========================================================================
   12. PRICING TEASER
   ========================================================================== */
.pricing-teaser {
  background: var(--colour-bg-alt);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.pricing-teaser__inner {
  max-width: 36rem;
  margin: 0 auto;
}
.pricing-teaser__label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-xs);
}
.pricing-teaser__price {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--colour-text);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.pricing-teaser__desc {
  font-size: 0.9rem;
  color: var(--colour-text-muted);
  line-height: 1.6;
}


/* ==========================================================================
   13. PRICING DETAIL
   ========================================================================== */
.pricing-detail {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}
.pricing-detail__heading {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-xl);
  text-align: center;
}
.pricing-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.pricing-detail__item {
  position: relative;
}
.pricing-detail__item h3 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-xs);
}
.pricing-detail__price {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--colour-text);
  margin-bottom: var(--space-sm);
}
.pricing-detail__item ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--colour-text-muted);
}
.pricing-detail__item ul li::before {
  content: '—';
  margin-right: 0.5em;
  color: var(--colour-border);
}
.pricing-detail__note {
  font-size: 0.85rem;
  color: var(--colour-text-muted);
  text-align: center;
  margin-top: var(--space-xl);
  line-height: 1.7;
}

/* The "Full Story" card is visually emphasised */
.pricing-detail__item--featured::before {
  content: 'Most chosen';
  position: absolute;
  top: -1.25rem;
  left: 0;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--colour-accent);
}

/* Short single-line note under each pricing card */
.pricing-detail__note-single {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--colour-text-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}


/* ==========================================================================
   14. INTRO ROUND — TEMPORARY
   Remove this block entirely once your 5 introductory sessions are booked.
   ========================================================================== */
.intro-round {
  max-width: 44rem;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--colour-border);
  background: var(--colour-bg-alt);
  text-align: center;
}
.intro-round__label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-accent);
  margin-bottom: var(--space-sm);
}
.intro-round__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}
.intro-round__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--colour-text-muted);
  max-width: 40ch;
  margin: 0 auto var(--space-md);
}
.intro-round__link {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition-fast);
}
.intro-round__link:hover {
  opacity: 0.7;
}


/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.contact {
  padding: var(--space-3xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.contact__heading {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: var(--space-md);
}
.contact__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--colour-text-muted);
  max-width: 40ch;
  margin: 0 auto var(--space-lg);
}
.contact__cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-bg);
  background: var(--colour-text);
  padding: 1rem 2.5rem;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-bottom: var(--space-lg);
}
.contact__cta:hover {
  background: var(--colour-accent);
  color: #fff;
}
.contact__links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact__links a {
  color: var(--colour-text-muted);
  transition: color var(--transition-fast);
}
.contact__links a:hover {
  color: var(--colour-accent);
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.footer {
  background: var(--colour-bg-alt);
  padding: var(--space-xl) var(--space-md);
  border-top: 1px solid var(--colour-border);
}
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}
.footer__name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer__desc {
  font-size: 0.8rem;
  color: var(--colour-text-muted);
  line-height: 1.6;
}
.footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__links a {
  color: var(--colour-text-muted);
  transition: color var(--transition-fast);
}
.footer__links a:hover {
  color: var(--colour-accent);
}
.footer__copy {
  font-size: 0.7rem;
  color: var(--colour-text-muted);
  margin-top: var(--space-xs);
}


/* ==========================================================================
   17. ANIMATIONS & REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for gallery items */
.gallery__item.reveal:nth-child(2) { transition-delay: 0.05s; }
.gallery__item.reveal:nth-child(3) { transition-delay: 0.1s; }
.gallery__item.reveal:nth-child(4) { transition-delay: 0.15s; }
.gallery__item.reveal:nth-child(5) { transition-delay: 0.2s; }
.gallery__item.reveal:nth-child(6) { transition-delay: 0.25s; }
.gallery__item.reveal:nth-child(7) { transition-delay: 0.3s; }
.gallery__item.reveal:nth-child(8) { transition-delay: 0.35s; }
.gallery__item.reveal:nth-child(9) { transition-delay: 0.4s; }
.gallery__item.reveal:nth-child(10){ transition-delay: 0.45s; }


/* ==========================================================================
   18. RESPONSIVE — MOBILE-FIRST
   ========================================================================== */

/* ----- Portrait phones: below 768px ----- */
@media (max-width: 767px) {
  /* The hero frame is nearly square here, so cover keeps more of the
     photo vertically than on desktop. Drop the focal point further to
     push the faces out of shot and hold on the belly and dog. */
  .hero__image img { object-position: center 88%; }

  /* A full-height manifesto is a lot of scrolling on a phone before any
     copy is read. On phones, size it from the photo's own 3:2 ratio so it
     reads as a landscape band (and stops cropping the image). The min-height
     is a floor so the overlaid copy always has room. */
  .manifesto {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .manifesto__overlay {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }
  .manifesto__heading { font-size: clamp(1.6rem, 6.4vw, 2.4rem); }
  .manifesto__sub { font-size: 0.8rem; }
  .scroll-indicator { display: none; }
}

/* ----- Tablet: 768px+ ----- */
@media (min-width: 768px) {

  .hero {
    flex-direction: row;
    min-height: 100svh;
  }
  .hero__image {
    width: 60%;
    height: 100svh;
  }
  .hero__content {
    width: 40%;
    padding: var(--space-xl) var(--space-lg);
    justify-content: center;
  }
  /* Split layout from 768px up: the heading sits in a 40% column, so it must
     scale against that column, not the viewport. "DOCUMENTAL" is wider than
     "PHOTOGRAPHY", so a viewport-based size clips the Portuguese headline. */
  .hero__title-line--large {
    font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  }

  .category {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-lg);
  }
  .category__image { flex: 1; }
  .category__content { flex: 1; }
  .category--reverse { flex-direction: row-reverse; }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .gallery__item--wide { grid-column: span 2; }

  .about {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-3xl) var(--space-lg);
  }
  .about__content { flex: 1; }
  .about__portrait { flex: 0 0 40%; }

  .pricing-detail__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .footer__links { gap: var(--space-md); }
}

/* ----- Desktop: 1024px+ ----- */
@media (min-width: 1024px) {

  .nav__menu { gap: var(--space-xl); }

  .hero__image { width: 60%; }
  .hero__content { width: 40%; padding: var(--space-2xl) var(--space-xl); }
  /* Split layout: the heading column is 40% of the viewport minus the
     --space-xl padding on each side. Sizing from the viewport overshoots
     it (Portuguese "DOCUMENTAL" is wider than English "PHOTOGRAPHY"), so
     scale against the column instead and cap at 4.5rem. */
  .hero__title-line--large { font-size: clamp(2.1rem, 4.2vw, 4.5rem); }

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 2; }

  .about { padding: var(--space-3xl) var(--space-xl); }

  .contact { padding: var(--space-3xl) var(--space-xl); }
  .contact__heading { font-size: 3.5rem; }
}

/* ----- Large desktop: 1440px+ ----- */
@media (min-width: 1440px) {
  /* No hero headline override here: the 1024px+ clamp already scales it to
     the 40% column, and a flat 4rem overflows the panel in Portuguese. */
  .manifesto__heading { font-size: 4.5rem; }
  .about__heading { font-size: 3.8rem; }
  .story__heading { font-size: 4rem; }
}

/* ----- Mobile-only nav (below 768px) ----- */
@media (max-width: 767px) {

  .nav__toggle { display: flex; }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100svh;
    background: var(--colour-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out);
    z-index: 101;
  }

  .site-header.is-menu-open .nav__menu {
    transform: translateX(0);
  }

  .nav__link {
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--colour-text);
  }

  /* The language switch is a nav link on mobile, so it needs the same
     treatment or it stays light-on-light inside the open menu. The
     desktop divider rule is dropped here: stacked vertically it reads
     as a stray vertical line rather than a separator. */
  .site-header.is-menu-open .nav__lang {
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--colour-text);
    opacity: 0.6;
    padding-left: 0;
    border-left: none;
  }

  /* Prevent body scroll when menu is open */
  body.is-menu-open {
    overflow: hidden;
  }
}


/* ==========================================================================
   19. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .scroll-indicator__line {
    animation: none;
  }
}