/* ====================================================================
   akaWebWoman SITE STYLESHEET
   One file styles every page. Order of this file:
     1. Fonts
     2. Design tokens (colours, fonts, spacing)  <- change the look here
     3. Page basics and shared pieces (buttons, labels)
     4. Homepage sections, top to bottom
     5. Video frames and the enlarged-video pop-up
     6. Inner pages (Capabilities, The Studio, Approach, Request Availability)
   ==================================================================== */

/* ==================================================================
   FONTS (stored in the "fonts" folder, so the site asks no other
   company's server for anything)
   font-display: swap = show text at once in a fallback font, then
   switch when the real font has loaded.
   ================================================================== */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2'); }

/* ==================================================================
   DESIGN TOKENS (the page's colours, fonts and spacing in one place)
   Layout concept: white page, one deep aubergine, very large tight sans
   headlines, wide margins, and motion tied to the scrollbar.
   HOW TO EDIT: change a value here and it updates everywhere.
   ================================================================== */
:root {
  --paper: #FFFFFF;            /* page background */
  --ink: #17121A;              /* main text, near-black with a plum tint */
  --ink-soft: #5A5160;         /* secondary text */
  --hairline: #E6E0EA;         /* thin divider lines */
  --brand-deep: #431C3F;       /* aubergine: intro, hero, hover rows, curtains */
  --brand-soft: #F6EFF5;       /* very light plum: the quiet section background on the Animal Rescue page */
  --brand-tint: #D9B8D3;       /* light tint of it: small details on dark areas */
  /* The next five say what sits ON TOP of the aubergine. */
  --on-deep: #FFFFFF;              /* text on aubergine */
  --on-deep-soft: #E6D3E2;         /* quieter text on aubergine */
  --on-deep-button-bg: #FFFFFF;    /* main button fill on dark areas */
  --on-deep-button-text: #431C3F;  /* main button text on dark areas */
  --on-deep-logo-dot: #F5B5B5;     /* the logo dot on aubergine */
  --lightbox-backdrop: rgba(7, 4, 7, 0.96);  /* near-black behind an enlarged video */
  --intro-backdrop: #070407;       /* near-black behind the intro video (matches the video's own background) */
  --hero-shade: rgba(47, 18, 44, 0.5);  /* see-through aubergine laid over the hero video so the words stay readable */
  --brand-crimson: #B82020;    /* the dot in the logo wordmark */
  --dark-panel: #17121A;       /* contact section background */
  --on-dark: #F6F1F8;          /* text on the dark panel */
  --on-dark-soft: #B9AEC0;     /* secondary text on the dark panel */
  --on-dark-line: #4A3F50;     /* input underlines on the dark panel */

  --font-sans: 'Jost', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --gutter: clamp(20px, 5vw, 72px);   /* side margin at every width */
  --content-max: 1240px;              /* widest the content ever gets */
  --section-space: clamp(88px, 12vw, 176px);
}
/* PHONES: less empty space between sections. On a narrow screen the
   desktop spacing left almost a full screen of white between blocks.
   TO ADJUST: change 56px (bigger = more air between sections). */
@media (max-width: 720px) {
  :root { --section-space: 56px; }
}

/* ==================================================================
   PAGE BASICS
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Shared wrapper: keeps content centred with a side margin. */
.content-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared small label above section headlines. */
.section-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Shared large section headline. */
.section-headline {
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Shared pill buttons. */
.pill-button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.pill-button-solid { background: var(--ink); color: var(--paper); }
.pill-button-solid:hover { background: transparent; color: var(--ink); }
.pill-button-outline { background: transparent; color: var(--ink); }
.pill-button-outline:hover { background: var(--ink); color: var(--paper); }

/* ==================================================================
   SCROLL PROGRESS BAR (thin line across the top of the screen)
   It grows from left to right as the visitor scrolls down the page.
   It starts at zero width, so with no script it simply is not seen.
   ================================================================== */
.scroll-progress-bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  background: var(--brand-tint);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;       /* never blocks a click */
}

/* ==================================================================
   INTRO VIDEO (your logo film, played once when the page opens)
   A full-screen cover holds the video. When the video is nearly over,
   the cover fades away and the homepage is underneath.
   WHY "hidden" BY DEFAULT: if anything goes wrong (no script, video
   will not play), this cover must never trap the visitor behind it.
   The small script under it un-hides it only when the video can play.
   ================================================================== */
.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--intro-backdrop);
  opacity: 1;
  transition: opacity 1.2s ease;    /* the fade into the homepage */
}
.intro-curtain.is-leaving { opacity: 0; pointer-events: none; }
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* fills the screen on wide screens */
}
/* On screens that are not wide (phones, upright tablets) "cover" would
   crop the logo off the sides. So there the video is shown whole, as a
   16:9 picture centred on the screen and enlarged a little so the logo
   fills most of the width. Its top and bottom edges are faded out
   (mask-image) so they melt into the black backdrop instead of ending
   in a hard line. */
@media (max-aspect-ratio: 3/2) {
  .intro-video {
    inset: auto;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    transform: translateY(-50%) scale(1.3);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  }
}
.intro-skip-button {
  position: absolute;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--on-deep-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--on-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-skip-button:hover { background: var(--on-deep); color: var(--intro-backdrop); }
.intro-skip-button:focus-visible { outline-color: var(--on-deep); }

/* ==================================================================
   HERO SECTION (navigation + headline + buttons)
   ================================================================== */
/* The hero is a tall "stage": a looping video at the back, a see-through
   aubergine shade over it, and the words on top. */
.hero-section {
  position: relative;
  overflow: hidden;             /* keeps the moving picture inside the hero */
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 88vh, 940px);   /* nearly a full screen, never tiny, never huge */
  background: var(--brand-deep);           /* shows if the video cannot load */
  color: var(--on-deep);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills the hero without stretching */
}
.hero-media-shade { position: absolute; inset: 0; background: var(--hero-shade); }
.hero-section > .content-wrap {
  position: relative;
  z-index: 1;                   /* words sit above the moving picture */
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.hero-section .logo-accent-dot { color: var(--on-deep-logo-dot); }
.hero-section a:focus-visible { outline-color: var(--on-deep); }
/* Hero buttons are white so they stand out on the aubergine. */
.hero-section .pill-button { border-color: var(--on-deep-button-bg); }
.hero-section .pill-button-solid { background: var(--on-deep-button-bg); color: var(--on-deep-button-text); }
.hero-section .pill-button-solid:hover { background: transparent; color: var(--on-deep); }
.hero-section .pill-button-outline { color: var(--on-deep); }
.hero-section .pill-button-outline:hover { background: var(--on-deep-button-bg); color: var(--on-deep-button-text); }

.site-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 24px;
}
.logo-wordmark {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-accent-dot { color: var(--brand-crimson); }
.navigation-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.navigation-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.navigation-links a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ------------------------------------------------------------------
   MENU BUTTON (phones)
   On screens up to 720px wide the four menu links are tucked behind a
   three-line icon and drop down when it is tapped. On wider screens the
   button is not shown and the links sit in a row as usual.
   The classes menu-is-ready and menu-is-open are added to the <nav>
   by js/site.js (Part 6). Without the script the links stay visible.
   HOW TO EDIT: change 720px (in BOTH places it appears in this file's
   phone rules) to move the point where the button takes over.
   ------------------------------------------------------------------ */
.menu-toggle-button { display: none; }
@media (max-width: 720px) {
  .menu-is-ready .menu-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;     /* the icon sits at the right edge, in line with the page margin */
    min-width: 44px;               /* 44px each way: comfortable to tap */
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;                /* same colour as the logo, whatever the page */
    cursor: pointer;
  }
  /* The icon: three thin lines that turn into an X when the menu is open. */
  .menu-toggle-icon { position: relative; display: block; width: 26px; height: 14px; }
  .menu-toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .menu-toggle-icon span:nth-child(1) { top: 0; }
  .menu-toggle-icon span:nth-child(2) { top: 6px; }
  .menu-toggle-icon span:nth-child(3) { top: 12px; }
  .menu-is-open .menu-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-is-open .menu-toggle-icon span:nth-child(2) { opacity: 0; }
  .menu-is-open .menu-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The links: hidden until the button is tapped, then stacked full width. */
  .menu-is-ready .navigation-links { display: none; }
  .menu-is-ready.menu-is-open .navigation-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;              /* takes the whole row under the logo */
    gap: 0;
    padding-bottom: 12px;
    font-size: 15px;
    animation: menu-drops-in 0.28s ease;
  }
  .menu-is-ready .navigation-links a { position: relative; min-height: 54px; }
  /* A hairline above each link, in the text colour so it suits every page. */
  .menu-is-ready .navigation-links a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.22;
  }
}
@keyframes menu-drops-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-is-ready.menu-is-open .navigation-links { animation: none; }
  .menu-toggle-icon span { transition: none; }
}
.hero-section button:focus-visible, .page-header button:focus-visible { outline-color: var(--on-deep); }

.hero-body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 48px);
  margin-top: auto;           /* pushes the headline block to the bottom of the hero */
  padding-block: clamp(56px, 9vw, 128px) clamp(28px, 4vw, 56px);
}
.hero-headline {
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}
/* Each headline line sits in a "window" so it can slide up into view. */
.hero-headline-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;     /* room for letters like g and y */
  margin-bottom: -0.14em;
}
.hero-headline-line-inner { display: block; text-wrap: balance; }  /* balance = no single word left alone on a line */
.hero-subtext {
  max-width: 44ch;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-top: clamp(20px, 3vw, 40px);
  border-top: 1.5px solid var(--on-deep);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* NARROW PHONES: the three labels cannot fit on one line at a readable
   size (they would need 10px text), so they and the line above them
   are hidden. From 600px wide they fit on one line and are shown.
   TO SHOW THEM ON PHONES AGAIN: delete this whole @media block. */
@media (max-width: 599px) {
  .hero-footnote { display: none; }
}

/* ==================================================================
   QUIET STATEMENT (the sentence that fills in word by word)
   ================================================================== */
.quiet-statement-section { padding-block: var(--section-space); }
/* PHONES: the sentence is set a little larger so it fills the screen
   better. (On phones js/home.js also lets it scroll by normally and
   does not hold the page still, which removed a screenful of white.) */
@media (max-width: 720px) {
  .quiet-statement-section { padding-block: 64px; }
  .quiet-statement-section .quiet-statement { font-size: clamp(34px, 9.6vw, 46px); }
}
.quiet-statement {
  max-width: 20ch;
  font-size: clamp(32px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

/* ==================================================================
   CAPABILITIES (what the studio offers)
   HOW TO EDIT: each <li class="capability-row"> is one service.
   Copy a whole row to add one, delete a whole row to remove one.
   ================================================================== */
.capabilities-section { padding-block: 0 var(--section-space); }
.capabilities-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.capability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 40px;
  padding: clamp(20px, 2.6vw, 34px) clamp(0px, 1.4vw, 20px);
  border-top: 1.5px solid var(--ink);
  transition: padding-left 0.3s;
}
.capability-row:last-child { border-bottom: 1.5px solid var(--ink); }
/* SPOTLIGHT (no background colour): once the script adds "is-spotlit"
   to the list, every row is dimmed EXCEPT the one under the mouse
   (:hover) or the one passing the middle of the screen (.is-active,
   which the script adds and removes). That row also nudges to the right.
   Without the script nothing is dimmed, so all rows stay fully readable. */
.capability-row:hover, .capability-row.is-active { padding-left: clamp(12px, 2.4vw, 36px); }
.capability-list.is-spotlit .capability-row > * { opacity: 0.5; transition: opacity 0.3s; }
.capability-list.is-spotlit .capability-row:hover > *,
.capability-list.is-spotlit .capability-row.is-active > * { opacity: 1; }
.capability-name {
  font-size: clamp(26px, 3.8vw, 54px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.capability-description { max-width: 42ch; color: var(--ink-soft); }
.capabilities-more { margin-top: clamp(24px, 3vw, 40px); }

/* ==================================================================
   THE STUDIO (who is behind akaWebWoman)
   Headline on the left, a short paragraph on the right.
   They stack on a phone.
   ================================================================== */
/* overflow-x: clip stops the slide-in from the sides making the page scroll sideways. */
.studio-section { padding-block: 0 var(--section-space); overflow-x: clip; }
.studio-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: end;
  gap: 32px clamp(32px, 6vw, 96px);
}
.studio-heading { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.studio-text {
  min-width: 0;
  max-width: 30ch;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ==================================================================
   PRIVATE CLIENT WORK (one privacy statement, then the showreel)
   No portfolio on purpose. The showreel plays in a frame and opens
   larger when it is clicked.
   ================================================================== */
.showreel-section { padding-block: 0 var(--section-space); }
.showreel-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* ==================================================================
   VIDEO FRAMES (used on the homepage and the Capabilities page)
   .video-frame          a 16:9 box that holds a playing video
   .video-expand-button  an invisible button laid over the whole frame,
                         so a click anywhere on the video enlarges it
   ================================================================== */
.video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;             /* same shape as the videos, so nothing is cropped */
  max-width: 100%;
  border-radius: clamp(14px, 1.8vw, 24px);
  background: var(--ink);
}
.framed-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-expand-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  padding: clamp(12px, 1.6vw, 20px);
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.video-expand-button:focus-visible { outline: 3px solid var(--on-deep); outline-offset: -6px; }
/* The small "Expand" label in the corner of the video. */
.video-expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--lightbox-backdrop);
  color: var(--on-deep);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-expand-icon { width: 14px; height: 14px; }
/* ==================================================================
   VIDEO LIGHTBOX (the enlarged video that opens on a click)
   <dialog> is a built-in browser pop-up: it dims the page, traps the
   keyboard inside it, and closes with the Esc key, all by itself.
   ================================================================== */
.video-lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(56px, 6vw, 80px) clamp(12px, 4vw, 64px) clamp(16px, 4vw, 48px);
  border: 0;
  background: var(--lightbox-backdrop);
}
.video-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.video-lightbox::backdrop { background: var(--lightbox-backdrop); }
/* The player is as large as fits the screen while keeping the video's
   own 16:9 shape, so there is no empty black box around it and the
   play controls sit right under the picture.
   HOW IT IS SIZED: as wide as the pop-up allows, but never so wide
   that its height would run off the screen (that is the max-width
   sum: the screen height, minus 140px for the Close button and edges,
   times 16/9). "dvh" is the visible screen height on phones; the "vh"
   line before it is for older browsers.
   All of the site's films are 16:9. If you ever add one in another
   shape, change aspect-ratio and the 1.7778 (which is 16 divided by 9).
   WHY outline: none ON THESE TWO: when the pop-up opens the browser
   puts keyboard focus inside it, and phones drew a blue focus frame
   around the whole video area. The video's own controls and the Close
   button still show focus for keyboard users. */
.video-lightbox-player {
  display: block;
  width: 100%;
  max-width: calc((100vh - 140px) * 1.7778);
  max-width: calc((100dvh - 140px) * 1.7778);
  height: auto;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.video-lightbox:focus, .video-lightbox:focus-visible,
.video-lightbox-player:focus, .video-lightbox-player:focus-visible { outline: none; }
.video-lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--on-deep-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--on-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.video-lightbox-close:hover { background: var(--on-deep); color: var(--ink); }
.video-lightbox-close:focus-visible { outline-color: var(--on-deep); }

.section-headline-long { font-size: clamp(32px, 4.6vw, 64px); }  /* smaller, because this headline is a full sentence */

/* ==================================================================
   BRAND LINE (slides sideways as you scroll)
   WHY overflow-x: clip: the line is wider than the screen on purpose,
   and this stops it from making the whole page scroll sideways.
   ================================================================== */
.brand-line-section {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 16px);
  overflow-x: clip;
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.brand-line-track {
  display: flex;
  gap: 0.6em;
  width: max-content;
  padding-left: var(--gutter);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 1.05;
  white-space: nowrap;
}
/* Second row is the same solid lettering, in aubergine. */
.brand-line-track-accent { color: var(--brand-deep); }

/* ==================================================================
   APPROACH (three steps, in order)
   ================================================================== */
.approach-section { padding-block: var(--section-space); }
.approach-heading { margin-bottom: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 16px; }
.approach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
}
/* The line above the steps: a pale track with a dark fill that draws
   itself from left to right as you scroll. Full by default (no script). */
.approach-progress-track { height: 3px; margin-bottom: 24px; background: var(--hairline); }
.approach-progress-fill { height: 100%; background: var(--ink); transform-origin: left center; }
.approach-step { display: flex; flex-direction: column; gap: 12px; }
.approach-step-number { font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-soft); }
.approach-step-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }

/* ==================================================================
   CONTACT (dark panel with the inquiry form and the footer)
   ================================================================== */
.contact-section {
  background: var(--dark-panel);
  color: var(--on-dark);
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0;
  padding-block: var(--section-space) 40px;
}
.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px clamp(32px, 6vw, 96px);
}
.contact-heading { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact-heading .section-label, .inquiry-form .section-label { color: var(--on-dark-soft); }
.contact-intro { max-width: 36ch; color: var(--on-dark-soft); }
/* The studio name and location under "Start a conversation."
   (Request Availability page). Three short lines, the name brighter
   than the two beneath it. */
.contact-studio-details { display: flex; flex-direction: column; gap: 2px; font-size: clamp(17px, 1.4vw, 20px); }
.contact-studio-name { font-weight: 500; color: var(--on-dark); }
.contact-studio-location { color: var(--on-dark-soft); }
.contact-heading .pill-button { align-self: flex-start; }
.inquiry-form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.inquiry-field { display: flex; flex-direction: column; gap: 6px; }
.inquiry-field label { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); }
.inquiry-field input, .inquiry-field textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1.5px solid var(--on-dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 18px;
}
.inquiry-field input:focus-visible, .inquiry-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--brand-tint);
}
.inquiry-field textarea { resize: vertical; line-height: 1.5; }
/* White pill button for dark backgrounds (form button, Capabilities page button). */
.pill-button-light { border-color: var(--on-deep-button-bg); background: var(--on-deep-button-bg); color: var(--on-deep-button-text); }
.pill-button-light:hover { background: transparent; color: var(--on-dark); }
.pill-button-light:focus-visible { outline-color: var(--on-dark); }
.inquiry-submit-button { align-self: flex-start; }
.inquiry-submit-button:disabled { opacity: 0.6; cursor: default; }
.inquiry-reply-time { font-size: 15px; color: var(--on-dark-soft); }  /* the small promise under the button */
.inquiry-form-note { min-height: 1.6em; font-size: 15px; color: var(--on-dark-soft); }

/* FOOTER: two rows. Top: logo on the left, page links on the right.
   Bottom: tagline, "Back to top", copyright. Each row wraps onto
   extra lines by itself on narrow screens. */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: var(--section-space);
  padding-top: 28px;
  border-top: 1.5px solid var(--on-dark-line);
  font-size: 14px;
  color: var(--on-dark-soft);
}
.footer-top-row, .footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
/* The footer logo is a link back to the homepage. */
.site-footer .logo-wordmark { color: var(--on-dark); }
/* Page links: same small capitals as the top menu. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* No footer link is underlined until the pointer is on it.
   min-height keeps each one tall enough to tap on a phone. */
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-links a:hover, .footer-back-to-top:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 6px; }
.footer-links a[aria-current="page"] { color: var(--on-dark); }
.footer-back-to-top { gap: 6px; }
.site-footer a:focus-visible { outline-color: var(--on-dark); }

/* ==================================================================
   HOMEPAGE ON SMALL SCREENS
   ================================================================== */
@media (max-width: 720px) {
  .capability-row { grid-template-columns: minmax(0, 1fr); }
}

/* ####################################################################
   INNER PAGES
   (capabilities.html, studio.html, approach.html,
    request-availability.html, thank-you.html)
   #################################################################### */

/* ==================================================================
   PAGE HEADER (aubergine band: menu + page title)
   The same header sits at the top of every inner page.
   ================================================================== */
.page-header { background: var(--brand-deep); color: var(--on-deep); }
.page-header a:focus-visible { outline-color: var(--on-deep); }
.page-header .logo-accent-dot { color: var(--on-deep-logo-dot); }
.navigation-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.page-title-block {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  padding-block: clamp(56px, 9vw, 128px) clamp(48px, 7vw, 96px);
}
.page-title-block .section-label { color: var(--on-deep-soft); }
.page-title {
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}
/* A title sits in a "window" so it can slide up into view. */
.page-title-window { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-title-inner { display: block; }
.page-intro { max-width: 44ch; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; }

/* ==================================================================
   SERVICES INDEX (the list of six at the top of the page)
   Each row is a link that jumps down to that service's section.
   ================================================================== */
.services-index-section { padding-block: clamp(56px, 8vw, 112px) var(--section-space); }
.services-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 40px;
  padding: clamp(18px, 2.2vw, 28px) clamp(0px, 1.4vw, 20px);
  border-top: 1.5px solid var(--ink);
  text-decoration: none;
  transition: padding-left 0.3s;
}
.services-index-list li:last-child .services-index-row { border-bottom: 1.5px solid var(--ink); }
.services-index-row:hover { padding-left: clamp(12px, 2.4vw, 36px); }
.services-index-name { font-size: clamp(24px, 3.2vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.services-index-arrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

/* ==================================================================
   PAGE SECTIONS (the full-width sections on every inner page)
   On the Capabilities page there is one per service; on the Approach
   page one per step. Each section picks one of three looks by adding
   a class:
     (none)                 white background, dark text
     .page-section-deep  aubergine background, white text
     .page-section-soft  very light plum background, dark text
     .page-section-dark  near-black background, light text
   The look is carried by the four "--section-..." values below, so
   everything inside a section recolours itself automatically.
   TO CHANGE A SECTION'S LOOK: swap that one class on its <section> line.
   ================================================================== */
.page-section {
  --section-bg: var(--paper);
  --section-ink: var(--ink);
  --section-ink-soft: var(--ink-soft);
  --section-line: var(--ink);
  background: var(--section-bg);
  color: var(--section-ink);
  padding-block: var(--section-space);
}
.page-section-deep {
  --section-bg: var(--brand-deep);
  --section-ink: var(--on-deep);
  --section-ink-soft: var(--on-deep-soft);
  --section-line: var(--on-deep-soft);
}
.page-section-dark {
  --section-bg: var(--dark-panel);
  --section-ink: var(--on-dark);
  --section-ink-soft: var(--on-dark-soft);
  --section-line: var(--on-dark-line);
}
.page-section-soft {
  --section-bg: var(--brand-soft);
  --section-line: var(--brand-deep);
}
.page-section-soft .page-section-title { color: var(--brand-deep); }
/* On the soft background a white video would have no visible edge,
   so a thin line marks it. */
.page-section-soft .video-frame { outline: 1px solid var(--hairline); }
.page-section .section-label { color: var(--section-ink-soft); }
.page-section-layout { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 72px); }
.page-section-heading { display: flex; flex-direction: column; gap: 12px; }
.page-section-title {
  font-size: clamp(46px, 9vw, 136px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.page-section-title-window { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-section-title-inner { display: block; }

/* Explanation on the left, a list on the right. They stack
   into one column when the screen is too narrow for two. */
.page-section-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: 40px clamp(32px, 6vw, 96px);
}
.page-section-explanation { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-section-lead {
  max-width: 24ch;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.page-section-paragraph { max-width: 46ch; color: var(--section-ink-soft); }
.page-section-list-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.page-section-list li {
  padding: 14px 0;
  border-top: 1.5px solid var(--section-line);
  font-size: clamp(17px, 1.5vw, 20px);
}
.page-section-list li:last-child { border-bottom: 1.5px solid var(--section-line); }
/* The short line under a "What is included" list that says what the
   service does NOT cover (used under Website Care). */
.service-scope-note { margin-top: 12px; max-width: 46ch; color: var(--section-ink-soft); }
/* On the near-black sections a video frame is the same colour as the
   page, so a thin line marks its edge. */
.page-section-dark .video-frame { outline: 1px solid var(--on-dark-line); }
.page-section-deep .video-expand-button:focus-visible,
.page-section-dark .video-expand-button:focus-visible { outline-color: var(--on-deep); }

/* ==================================================================
   MOTION SPECIALTIES (the three films inside Motion & Photography)
   ================================================================== */
.motion-specialties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.motion-specialty { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.motion-specialty-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.motion-specialty-text { color: var(--section-ink-soft); }

/* ==================================================================
   STRATEGY SECTION  (capabilities.html)
   "What you receive" beside the description, then the four process
   steps in a row. The steps wrap onto more rows on smaller screens.
   ================================================================== */
.deliverable-statement {
  padding-top: 14px;
  border-top: 1.5px solid var(--section-line);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.process-block { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
}
.process-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 20px; border-top: 1.5px solid var(--section-line); }
.process-step-number { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: var(--section-ink-soft); }
.process-step-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.process-step-text { color: var(--section-ink-soft); }

/* ==================================================================
   SEO & GEO SECTION  (capabilities.html)
   Two short definitions beside the "What is included" list, and the
   "Why it matters" benefits under the film.
   ================================================================== */
/* The two definitions: the term on the left, its meaning on the right. */
.search-definitions { display: flex; flex-direction: column; margin: 0; max-width: 46ch; }
.search-definition {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 0;
  border-top: 1.5px solid var(--section-line);
}
.search-definition:last-child { border-bottom: 1.5px solid var(--section-line); }
.search-definition dt { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.search-definition dd { margin: 0; color: var(--section-ink-soft); }
.search-definition strong { font-weight: 500; color: var(--section-ink); }

/* Why it matters: the benefits side by side, stacked on small screens */
.seo-benefits-block { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.seo-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
}
.seo-benefit { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 20px; border-top: 1.5px solid var(--section-line); }
.seo-benefit-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.seo-benefit-text { color: var(--section-ink-soft); }

/* ==================================================================
   CALL TO ACTION + FOOTER (dark panel at the bottom of the page)
   ================================================================== */
.page-call-to-action {
  background: var(--dark-panel);
  color: var(--on-dark);
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0;
  padding-block: var(--section-space) 40px;
}
.call-to-action-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.call-to-action-body .section-label { color: var(--on-dark-soft); }
.call-to-action-headline {
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* ==================================================================
   THE STUDIO PAGE: the large statement and the principle rows
   ================================================================== */
/* A longer sentence than the homepage statement, so slightly smaller. */
.quiet-statement-long { max-width: 26ch; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.12; }
.principle-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 40px;
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-top: 1.5px solid var(--section-line);
}
.principle-list li:last-child { border-bottom: 1.5px solid var(--section-line); }
.principle-name { font-size: clamp(26px, 3.4vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.principle-text { max-width: 44ch; color: var(--section-ink-soft); }
/* The smaller paragraphs under the large statements (The Studio page
   and the closing line of the Animal Rescue page). */
/* text-wrap: pretty asks the browser not to leave one word alone on the
   last line. Older browsers ignore it and wrap as usual, so it is safe. */
.studio-team-text, .studio-origin-text, .statement-support-text { max-width: 52ch; text-wrap: pretty; font-size: clamp(18px, 1.6vw, 22px); color: var(--section-ink-soft); }

/* ------------------------------------------------------------------
   FOUNDER'S NOTE (The Studio page)
   A signed letter. The opening sentence is large and in the serif
   typeface on the left; the rest of the letter is in the normal text
   typeface on the right. On a phone the two stack into one column.
   HOW TO EDIT: font-size changes a part's size; max-width changes how
   wide its lines run before they wrap.
   WHY ITALIC: the site only includes the italic version of the serif
   typeface, so the serif parts are italic on purpose. Removing
   font-style here would not make them upright.
   ------------------------------------------------------------------ */
.founder-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: 40px clamp(32px, 6vw, 96px);
}
.founder-note-lead { max-width: 18ch; font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.14; color: var(--brand-deep); text-wrap: balance; }
.founder-note-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.founder-note-text { max-width: 54ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--section-ink); text-wrap: pretty; }
.founder-note-signature { margin-top: clamp(8px, 1.2vw, 16px); font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; color: var(--brand-deep); }

/* A text link inside a sentence (used on The Studio page). */
.text-link { text-underline-offset: 5px; color: var(--section-ink); }

/* ==================================================================
   ANIMAL RESCUE PALETTE  (light vintage sage, deep green, ivory)
   Any page whose body tag has  class="page-theme-sage"  swaps the
   aubergine colours for these. Nothing else about the page changes,
   because every rule reads its colour from these same named values.
   The header here is LIGHT, so the words on it are dark (the other
   pages have white words on a dark header).
   TO TRY ANOTHER COLOUR: change --brand-deep (the header colour). If
   you pick a dark colour, set --on-deep back to #FFFFFF.
   ================================================================== */
.page-theme-sage {
  --brand-deep: #BCC8B0;           /* light vintage sage: the header band */
  --brand-soft: #F5F1E8;           /* warm ivory: the quiet section background */
  --brand-tint: #6F8468;           /* deeper sage: the thin progress line at the top */
  --on-deep: #1F2B23;              /* dark green-black words on the sage */
  --on-deep-soft: #45574A;         /* quieter words on the sage */
  --on-deep-logo-dot: #8C6A2F;     /* vintage brass logo dot on the sage */
  --on-deep-button-text: #2F4334;  /* words on the white button in the closing panel */
  --sage-heading: #3F5545;         /* deep vintage green: big headings on the ivory sections */
}
.page-theme-sage .page-section-soft { --section-line: var(--sage-heading); }
.page-theme-sage .page-section-soft .page-section-title { color: var(--sage-heading); }

/* ==================================================================
   ANIMAL RESCUE PAGE  (animal-rescue.html)
   The page reads as a story. Each rescue is its own wide section:
   name on top, then two columns ("Their work" on the left, the
   personal reason on the right). The columns stack on a phone.
   ================================================================== */
/* The rescue's name: large, but smaller than a normal section title
   so a long name such as "Hudson Valley Humane Society" still fits. */
/* The stories share one long white area. Each story gives up its own
   top padding and instead gets a thin line with space beneath it, so
   the three read as chapters of one piece. */
.rescue-story { padding-top: 0; }
.rescue-story .page-section-heading { padding-top: clamp(56px, 8vw, 112px); border-top: 1.5px solid var(--ink); }
.rescue-story-name { font-size: clamp(38px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.04em; }
.page-theme-sage .rescue-story-name { color: var(--sage-heading); }
.rescue-story-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: 40px clamp(32px, 6vw, 96px);
}
/* One column: a small label with a rule above it, then the paragraphs. */
.rescue-story-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding-top: 20px;
  border-top: 1.5px solid var(--section-line);
}
/* Story paragraphs. The rescue's own work is quieter; the personal
   reason is a little larger and darker, because it is the heart of
   each story. */
.story-text { max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--section-ink-soft); }
.story-text-personal { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5; color: var(--section-ink); }
/* The introduction under "Who we stand behind.": one column, a large
   line and then a shorter line beneath it. Kept narrow so the lines
   stay a comfortable length to read. */
.story-introduction { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); max-width: 60rem; }
.story-introduction .story-text { max-width: 60ch; }   /* wide enough that the short line is not broken after one word */
.story-lead { max-width: 30ch; font-size: clamp(26px, 3.2vw, 46px); font-weight: 500; line-height: 1.16; letter-spacing: -0.025em; }
/* "Visit ... ->": a plain text link, not a button, so the page reads
   as writing and not as a list of buttons. */
.story-link {
  margin-top: 8px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  color: var(--section-ink);
  text-underline-offset: 6px;
}
.story-link:hover { text-decoration-thickness: 2px; }

/* Foster cards (the studio's own fosters) */
.foster-list {
  display: grid;
  gap: clamp(32px, 4vw, 56px) clamp(20px, 2.4vw, 32px);
  /* Three across on a wide screen, fewer as the screen narrows. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.foster-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.rescue-name { font-size: clamp(26px, 2.8vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }
.rescue-text { color: var(--section-ink-soft); }
/* Foster photo: a tall frame. "object-fit: cover" trims the photo to
   fill the frame instead of stretching it. */
.foster-photo {
  display: block;
  width: 100%;
  height: auto;           /* WHY: without this the photo's own height (set in the HTML so the page does not jump while loading) would stretch the frame */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 8px;
  border-radius: clamp(14px, 1.8vw, 24px);
}

/* ==================================================================
   INNER PAGES ON SMALL SCREENS
   ================================================================== */
@media (max-width: 720px) {
  .principle-list li { grid-template-columns: minmax(0, 1fr); }
  .services-index-row { grid-template-columns: minmax(0, 1fr); }
  .services-index-arrow { display: none; }
}

/* A page section that a link has scrolled to is given focus by
   js/site.js (Part 5) so keyboard users continue from there. A focus
   outline around a whole section would look like a stray box, so it
   is switched off for sections only. Links and buttons keep theirs. */
section[tabindex="-1"]:focus, header[tabindex="-1"]:focus, footer[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }