/* ==========================================================================
   Fonts — self-hosted Google Sans
   ========================================================================== */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google-sans-v69-latin/google-sans-v69-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/google-sans-v69-latin/google-sans-v69-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/google-sans-v69-latin/google-sans-v69-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/google-sans-v69-latin/google-sans-v69-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Google Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/google-sans-v69-latin/google-sans-v69-latin-italic.woff2') format('woff2');
}

/* ==========================================================================
   Catalyst — Design tokens
   ========================================================================== */
:root {
  --color-bg-dark: #1a2910;
  --color-text-dark: #1d2d13;
  --color-text-darker: #203021;
  --color-amber: #ffce00;
  --color-yellow: #f0c800;
  --color-teal: #489e97;
  --color-cyan: #49c6be;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg-light: #f7f7f2;
  --color-border: rgba(29, 45, 19, 0.12);

  --font-primary: 'Google Sans', Arial, sans-serif;

  --radius-sm: 13px;
  --radius-btn: 60px;
  --radius-pill: 240px;

  --container-max: 1200px;
  /* The header spans wider than the centred content column on interior pages. */
  --container-max-header: 1400px;
  --gutter: clamp(20px, 5vw, 80px);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --fs-h1: clamp(2.5rem, 5.5vw, 5.3rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.8rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-nav: 1rem;
  --fs-eyebrow: 0.875rem;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-dark);
  background: var(--color-bg-light);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--space-7) 0; }

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: var(--space-4);
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.lead { font-size: var(--fs-lead); line-height: 1.4; }

.on-dark { color: var(--color-white); }
.on-dark .eyebrow { color: var(--color-cyan); }

.bg-dark { background: var(--color-bg-dark); color: var(--color-white); }
.bg-light { background: var(--color-bg-light); }
.bg-white { background: var(--color-white); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-amber);
  color: var(--color-text-darker);
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(255, 206, 0, 0.35); }

.btn-secondary {
  background: var(--color-yellow);
  color: var(--color-text-darker);
}
.btn-secondary:hover { box-shadow: 0 8px 20px rgba(240, 200, 0, 0.35); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

.btn-block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  /* Floats over the top of the hero and scrolls away with the page.
     (Not sticky — height:0 + an absolutely-positioned .header-inner means
     it takes no layout space and simply overlays the top of the page.) */
  position: relative;
  top: 0;
  z-index: 100;
  height: 0;
  overflow: visible;
}

.header-inner {
  position: absolute;
  /* Figma places the nav pill 60px from the top of the 1920 canvas (node 1165:4792). */
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  /* Figma lockup: mark ends at x118, wordmark starts at x183 → ~65px gap
     (nodes 1165:4782 / 1165:4770). Scales down on smaller viewports. */
  gap: clamp(16px, 3.4vw, 65px);
  flex-shrink: 0;
}
/* Figma header logo: mark 68×73px, wordmark 275×74px on the 1920 canvas
   (nodes 1165:4782 / 1165:4770). Sized by height (SVG aspect ratios match),
   clamped so the lockup scales down on smaller screens. */
.header-logo__mark { height: clamp(40px, 3.8vw, 73px); width: auto; }
.header-logo__name { height: clamp(26px, 3.85vw, 74px); width: auto; }

.header-pill {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  /* Figma node 1165:4792 */
  box-shadow: 0 0 17.48px rgba(0, 0, 0, 0.05);
}

/* Home page keeps the original centered nav pill — no left logo */
body[data-page="home"] .header-logo { display: none; }
body[data-page="home"] .header-inner { justify-content: center; }

/* Interior pages (agency, services, contact): the header stretches to a wider
   max-width with a tighter gutter, so the logo and nav pill sit closer to the
   viewport edges than the centred hero/content column (matches Figma). Below
   the content max-width both fall back to the shared gutter, so they stay
   aligned on tablet/mobile. */
body:not([data-page="home"]) .header-inner {
  max-width: var(--container-max-header);
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.main-nav a {
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--color-text-dark);
  padding: var(--space-1) 0;
  position: relative;
}
.main-nav a.is-active,
.main-nav a:hover { color: var(--color-teal); }

/* Active (current-page) nav link: teal text with a short underline beneath it,
   matching Figma node 1165:4638 (1px #1D2D13 line under the active item). */
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-text-dark);
  border-radius: 2px;
}

.header-cta { flex-shrink: 0; }

/* The in-menu "Get In Touch" link is for the mobile menu only; on desktop the
   standalone .header-cta button is used instead. */
.main-nav__cta { display: none; }

/* Desktop (matches Figma): the nav pill + CTA render at Figma's proportions —
   ~24px nav text, a taller pill (~89px) and a larger "Get In Touch" button
   (Figma nodes 1165:4433 home / 1165:4636 interior). Applies to every page.
   Desktop only — tablet (≤1024) and the mobile overlay (≤768) are unchanged. */
@media (min-width: 1025px) {
  .main-nav a { font-size: clamp(1.25rem, 1.3vw, 1.5rem); }
  /* Nav item + pill gaps sized so the pill reaches Figma's 1130px width
     (left edge ~713px, node 1165:4792) at 1920. */
  .main-nav ul { gap: clamp(32px, 4.1vw, 78px); }
  .header-pill {
    gap: clamp(32px, 2.9vw, 55px);
    padding: 10px 12px 10px clamp(32px, 3.75vw, 72px);
  }
  .header-cta {
    font-size: clamp(1.25rem, 1.3vw, 1.5rem);
    /* Figma "Get In Touch" pill is 202×68 (node 1165:4799): line-height:1 keeps
       the box to Figma's height instead of the default 1.5 line box. */
    line-height: 1;
    padding: 1.25rem 1.72rem;
  }

  /* Interior pages only: the header spans near full width so the logo sits far
     left and the pill + CTA reach close to the right edge (~4% gutter, right
     edge ~77px from the viewport edge on a 1920 canvas), instead of being
     centred in the 1400px column. The home page keeps its centred pill (no
     logo), matching Figma node 1165:4433. */
  body:not([data-page="home"]) .header-inner {
    max-width: none;
    /* Figma: logo mark sits 50px from the left edge; the pill's right edge is
       ~77px from the right (nodes 1165:4782 / 1165:4792). Asymmetric gutter. */
    padding-left: clamp(24px, 2.6vw, 50px);
    padding-right: clamp(24px, 4vw, 77px);
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-text-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
  transform-origin: center;
}

/* Open state: morph the three bars into a white "X" close icon.
   The toggle sits above the full-screen nav overlay (header z-index 100 >
   nav 99), so it stays tappable while the menu is open. */
.nav-toggle[aria-expanded="true"] { position: relative; z-index: 100; }
/* Open state sits above the dark overlay, so the bars must be white to show. */
.nav-toggle[aria-expanded="true"] span { background: var(--color-white); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  /* Extra top padding accounts for the header being lowered by --space-5,
     keeping the gap between the header and the heading consistent. */
  padding: calc(var(--space-8) + var(--space-3)) 0 var(--space-7);
}
.hero .lead { margin-top: var(--space-5); max-width: 42ch; }
.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.occupancy-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-02.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
.occupancy-hero .container { position: relative; }
/* Figma "Built to Drive Occupancy": 85px Google Sans Medium, lh 0.9, -0.04em */
.occupancy-hero h1 {
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Contact form + footer share one continuous background panel */
.footer-panel {
  position: relative;
  z-index: 2;
  margin-top: -150px;
  background-color: var(--color-bg-dark);
  background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03.webp');
  background-repeat: no-repeat;
  /* Anchor to the bottom (Figma node 1165:4729 uses object-position: bottom):
     the petal ring sits in the lower half of the source image, so bottom
     alignment frames it behind the footer instead of the empty top region. */
  background-position: center bottom;
  background-size: cover;
  border-radius: 150px 0 0 0;
  overflow: hidden;
  color: var(--color-white);
}
.momentum-section {
  position: relative;
  background: transparent;
  /* Figma (node 1165:4333, 1920 canvas): button bottom at y=6689, footer logo
     top at y=6862 — a 173px gap, not the doubled section-bottom + footer-top
     padding (96px + 96px = 192px) the base `section` rule would otherwise give. */
  padding-bottom: 173px;
}
.momentum-section .container { position: relative; }
.momentum-section h1 { margin-bottom: 8px; }
/* Drop the footer's top padding when it directly follows the momentum block,
   since .momentum-section's own padding-bottom above already accounts for the
   full gap to the logo. Scoped via the adjacent selector, so contact/freelance
   footers (which don't follow momentum) are untouched. */
.momentum-section + .site-footer { padding-top: 0; }
/* Momentum intro keeps the pre-refactor 46ch cap (was the global .intro-copy rule
   before it was scoped to .occupancy-hero) so the sentence wraps to two lines.
   Figma (1920): Google Sans Regular 35px, lh 120% (mobile 18px, see below). */
.momentum-section .intro-copy {
  max-width: 32ch;
  font-size: 2.1875rem;
  font-weight: 400;
  line-height: 1.2;
}
/* Fillout's dynamic-resize was reporting a much taller height than the form's
   own content needs (see Figma: 330px for the 4 fields + button at desktop),
   so the embed is pinned to a fixed height instead — no dynamic-resize script
   involved, just a plain iframe at a known size. */
.momentum-form-embed { width: 100%; height: 330px; }

/* Contact page is one continuous dark panel: the footer sits flush on the
   rounded "stairs" image instead of overlapping light content above it.
   The dark body keeps the panel's rounded corner cutout dark, not light. */
body[data-page="contact"] { background: var(--color-bg-dark); }
.footer-panel--flush {
  margin-top: 0;
  /* Contact's flush footer has no form above it, so Figma (node 1165:4729)
     frames the full "petal ring" in a shorter 1920×1268 crop rather than the
     taller momentum image (1920×1662), whose ring gets cover-cropped to just
     its top arc. Swap to that dedicated crop so the whole ring reads. */
  background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03-contact.webp');
}

/* Freelance footer uses a distinct petal-ring render (Figma node 1165:5009):
   a pre-framed 1920×968 crop where the ring is zoomed in (~2× the raw source)
   and anchored to the bottom, matching the node exactly. Keeps the base panel's
   center-bottom cover + rounded-tl 150px; the top-left corner is painted the
   dark-green token so the border-radius clips cleanly. */
.footer-panel--freelance {
  background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03-freelance.webp');
}

/* Contact page — sizes/weights/spacing mapped 1:1 from Figma (node 1165:4728)
   ------------------------------------------------------------------------ */

/* Header-to-content gap: the header is an absolute overlay (no layout height),
   so the hero's top padding is the visible gap below the pill. Figma drops the
   heading to ~317px from the top of a 1920 canvas (a ~168px gap below the 89px
   pill). Scale that with the viewport so the breathing room holds on wide
   screens and eases back to the shared hero spacing on smaller ones. */
.contact-hero { padding-top: clamp(150px, 16.5vw, 317px); }

/* Hero heading: Google Sans Medium 85px, leading 1, tracking -0.85px (-0.01em) */
.contact-hero h1 {
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: 12ch;
}
/* Lead: Google Sans Regular 35px, line-height 1.2; sits ~38px below the heading */
.contact-hero .lead {
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
  line-height: 1.2;
  max-width: 36ch;
  margin-top: 38px;
}

/* Horizontal layout (desktop/tablet): Figma left-biases the whole contact
   column to ~8.5% from the left edge and lets the content span wide (the map
   reaches ~1585px, the form ~1270px). The shared centred 1200px container put
   everything in the middle instead. Override just the contact page's main
   sections to a full-width, left-aligned column with an ~8.5% side gutter, so
   the heading/form/map land where Figma places them. Below 768px this reverts
   to the standard gutter (see the mobile block). */
@media (min-width: 769px) {
  body[data-page="contact"] main .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
}


.find-us-section { padding-top: var(--space-5); }

/* Eyebrow "FIND US": Google Sans SemiBold 20px, cyan, line-height 21px */
body[data-page="contact"] .eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* Find-us heading: Google Sans Medium 85px, leading 1, tracking -3.4px (-0.04em) */
.find-us-title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: var(--space-2);
}
/* Find-us lead: Google Sans Regular 30px, line-height 1.2 */
.find-us-lead {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  margin-top: var(--space-3);
  max-width: 29ch;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(29, 45, 19, 0.1);
}
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-dark);
  color: var(--color-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-dark); opacity: 0.75; }

/* ==========================================================================
   Map / find-us
   ========================================================================== */
.map-frame {
  width: 100%;
  aspect-ratio: 1585 / 424;
  border: 0;
  border-radius: var(--radius-sm);
  margin-top: var(--space-5);
}
@media (max-width: 768px) {
  /* Figma mobile map (node 1165:4307): a tall portrait frame that spans the
     viewport edge-to-edge (401×716). Break it out of the container gutters. */
  .map-frame {
    aspect-ratio: 401 / 716;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
  }
  /* Contact hero heading 47px like the other mobile heroes (Figma node 1165:4305). */
  .contact-hero h1 { font-size: clamp(2.5rem, 12vw, 2.9375rem); }
  /* Figma (nodes 1165:4305/4306/4293): heading→lead ~18px, lead→form ~31px. */
  .contact-hero .lead { margin: 18px 0 31px; }
  /* Figma: form → "FIND US" ~73px, eyebrow→title ~46px, title→lead ~41px. */
  .find-us-section { padding-top: var(--space-3); }
  .find-us-title { margin-top: var(--space-4); }
  .find-us-lead { margin-top: 40px; }
  /* Figma mobile form fields: 18.402px (node spec), lh 120% */
  input, textarea, select { font-size: 1.150125rem; }
  /* Figma mobile momentum intro: 18px, lh 120% */
  .momentum-section .intro-copy { font-size: 1.125rem; }
  /* Momentum heading — Figma mobile (node 1165:3686): Google Sans Medium 47px,
     line-height 1.0, tracking -0.01em, wrapping to two lines. The global h1 has
     no width cap, so on a narrow screen it stays on one line at its max-content
     width (~450px) and runs off the right edge; cap it so it wraps like Figma. */
  .momentum-section h1 {
    font-size: 2.9375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    max-width: 7.5em;
  }
}

/* Fillout's own fields reflow from 2 columns to a single stacked column
   exactly at 710px→711px wide — verified directly against the live embed,
   not assumed from our own 768px layout breakpoint. Using 768px here would
   apply the taller single-column height while Fillout is still 2-column
   (711–768px), leaving ~190px of dead space. Measured directly off the live
   embed: field top to button bottom is ~347–371px depending on width, plus
   the form's own ~21px top/bottom padding — 396px covers the tallest case
   (320px wide) with a couple px to spare. */
@media (max-width: 710px) {
  .momentum-form-embed { height: 396px; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  text-align: center;
}
.cta-banner .hero-actions { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding-top: var(--space-7);
}
/* On the home page the footer sits inside the shared panel, so it's transparent */
.footer-panel .site-footer { background: transparent; }
/* Footer type/logo/icon sizes are mapped 1:1 from Figma (node 1165:4728) at a
   1920 canvas — headings + nav links 45px, address/about body 30px, logo 145px
   tall, social icons ~53px. Each is a clamp so it scales down to a sensible
   floor on tablet/mobile (same approach as the header's Figma-mapped sizes).
   The four columns use fr ratios that land the column starts where Figma places
   them (~163/498/909/1567px ≈ Figma's 183/503/901/1557px). */
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 2fr 3.3fr 1fr;
  gap: var(--space-5) var(--space-4);
  padding-bottom: var(--space-6);
}
.footer-logo {
  display: inline-block;
  /* Figma: ~131px between the logo baseline and the column row */
  margin-bottom: clamp(32px, 6.8vw, 130px);
}
.footer-logo img {
  height: clamp(44px, 7.6vw, 145px);
  width: auto;
}
.site-footer h3 {
  font-size: clamp(1.25rem, 3.4vw, 2.8125rem);
  line-height: 1.3;
  text-transform: capitalize;
  margin-bottom: clamp(16px, 2.6vw, 50px);
  color: var(--color-white);
}
.footer-nav ul { display: flex; flex-direction: column; gap: clamp(4px, 0.5vw, 8px); }
.footer-nav a {
  font-size: clamp(1.25rem, 3.4vw, 2.8125rem);
  line-height: 1.2;
  text-transform: capitalize;
}
.footer-nav a, .footer-contact a { color: rgba(255, 255, 255, 0.85); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--color-cyan); }
address { font-style: normal; line-height: 1.3; }
.footer-contact address,
.footer-about p { font-size: clamp(1rem, 2.2vw, 1.875rem); line-height: 1.3; }
.footer-contact address { text-transform: none; }
.footer-about p { color: rgba(255, 255, 255, 0.75); }

.social-icons {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: clamp(12px, 1.6vw, 30px);
}
.social-icons a {
  display: inline-flex;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.social-icons a:hover { opacity: 0.8; transform: translateY(-2px); }
.social-icons img {
  width: clamp(28px, 2.75vw, 53px);
  height: clamp(28px, 2.75vw, 53px);
  display: block;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-3) 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Footer-panel alignment (all pages): Figma anchors the footer to the same
   ~8.5% left gutter as the page content and lets the columns run wide (node
   1165:4752–4756 — nav at ~8.3%, "Follow" at ~75%). The shared centred 1200px
   container pulled it into the middle and misaligned it with the wide header
   and left-biased hero. Align everything inside the dark panel — both the
   "Let's Build Momentum" CTA and the footer — to that same gutter so they line
   up with each other. Below 769px it reverts to the standard gutter (stacked
   layout). */
@media (min-width: 769px) {
  .footer-panel .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
  /* Figma (node 1165:4728, 1920 canvas) staggers the footer against that 163px
     gutter: the logo hangs ~20px to its left (x=143) and the columns start
     ~20px to its right (x=183), while the momentum CTA stays on the gutter.
     Scaled as ~1.04vw so the ~20px offsets track the gutter down to 769px. */
  .footer-panel .footer-logo { margin-left: clamp(-20px, -1.04vw, -8px); }
  .footer-panel .footer-inner { padding-left: clamp(8px, 1.04vw, 20px); }
}

/* ==========================================================================
   Home page
   ========================================================================== */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Content column (Figma home frame): the page content sits in the same
   left-biased ~8.5% gutter band (~163px, ~1598px wide on the 1920 canvas) used
   by the header, footer panel, services, agency and contact pages — left-aligned
   sections (occupancy hero, case-study copy, operators) start at ~163px and the
   centred blocks (services heading + collage, "Case Studies") stay centred in
   the wider column. The shared 1200px .container pinned everything to the middle
   and scaled it down. Reverts to the standard gutter below 769px. */
@media (min-width: 769px) {
  body[data-page="home"] main .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
}

.bg-teal { background: var(--color-teal); color: var(--color-white); }

/* Figma's "stairs" transitions between sections are just large corner
   radii on full-bleed blocks, not raster art — reproduced directly. */
.section-radius-bl { border-radius: 0 0 0 150px; }
.section-radius-tr { border-radius: 0 150px 0 0; }
.section-radius-tl { border-radius: 150px 0 0 0; }
.section-radius-br { border-radius: 0 0 150px 0; }
.section-radius-tr-bl { border-radius: 0 150px 0 150px; }

.btn-teal { background: var(--color-teal); color: var(--color-white); }
.btn-teal:hover { box-shadow: 0 8px 20px rgba(72, 158, 151, 0.4); }
/* Occupancy hero "Talk To Us" uses Figma's brighter teal #51b1a9 (node 1165:4376),
   not the shared --color-teal — scoped here so other teal buttons are unaffected. */
.occupancy-hero .btn-teal { background: #51b1a9; }
.occupancy-hero .btn-teal:hover { box-shadow: 0 8px 20px rgba(81, 177, 169, 0.4); }
.btn-dark { background: var(--color-text-darker); color: var(--color-white); }
.btn-dark:hover { box-shadow: 0 8px 20px rgba(32, 48, 33, 0.35); }

.hero-photo {
  position: relative;
  aspect-ratio: 1920 / 1045;
  overflow: hidden;
}
.hero-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 37, 14, 0.6), rgba(255, 255, 255, 0.6));
  mix-blend-mode: multiply;
}

.hero-photo__brand {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-2), 4vw, 72px);
  /* Cross-fades in a loop with the title: hidden while the title holds, fades in,
     holds, fades back out. Offset from heroTitleCycle so the two swap cleanly. */
  opacity: 0;
  animation: heroBrandCycle 12s ease infinite;
}
.hero-photo__brand-mark {
  height: clamp(64px, 11.3vw, 210px);
  width: auto;
  flex-shrink: 0;
}
.hero-photo__brand-text {
  height: clamp(64px, 11.3vw, 210px);
  width: auto;
}

/* Hero headline over the photo. Shown first, holds, then fades out as the brand
   logo (.hero-photo__brand) fades in — and loops, so the swap repeats while the
   video loops. Centering is handled via flex so the keyframes are free for transform. */
.hero-photo__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-4);
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(2.9375rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  opacity: 1;
  animation: heroTitleCycle 12s ease infinite;
}

/* 12s loop: ~5s hold, ~1s cross-fade, offset so title and brand trade places.
   0–42% title, 42–50% fade to brand, 50–92% brand, 92–100% fade back to title. */
@keyframes heroTitleCycle {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes heroBrandCycle {
  0%, 42% { opacity: 0; transform: translateY(1.5rem); }
  50%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  /* No timed swap for reduced-motion users: land on the brand logo, hide title. */
  .hero-photo__brand { animation: none; opacity: 1; visibility: visible; }
  .hero-photo__title { animation: none; opacity: 0; }
}

/* Occupancy hero intro: Figma 30px Regular, lh 1.2, width 723px (node 1165:4376).
   Scoped to .occupancy-hero so its max-width wins over `.hero .lead { 42ch }`. */
.occupancy-hero .intro-copy {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 723px;
}
/* Services-section lead: Figma 30px Regular, lh 1.2, #000, centred (node 1165:4406) */
.services-section .lead {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: var(--color-black);
}
/* Home CTAs: Figma pills use Google Sans Medium 25px (nodes 1165:4383 etc.) */
body[data-page="home"] .btn {
  font-size: clamp(1.25rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.2rem 2.4rem;
}

/* Real Estate Marketing Services panel (Figma #efefef, rounded tr + bl) */
.services-section {
  background: #efefef;
  color: var(--color-text-dark);
}

.services-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Figma collage group 1270px wide with 607×626 petals (node 1165:4444) */
  gap: 40px clamp(8px, 2.9vw, 56px);
  max-width: 1270px;
  margin: var(--space-6) auto;
}
.service-item { position: relative; }
.collage-petal {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: drop-shadow(0 18px 40px rgba(29, 45, 19, 0.18));
}
/* Leaf/petal shapes: big rounded OUTER corner, softened sides, sharp INNER point (toward center) */
.collage-petal--tl { border-radius: 4% 84% 20px 4%; }
.collage-petal--tr { border-radius: 84% 4% 4% 20px }
.collage-petal--bl { border-radius: 4% 20px 84% 4% }
.collage-petal--br { border-radius: 20px 4% 4% 84% }

/* White service cards overlapping each image, clustered toward the collage
   center so they meet near the middle (matches Figma) */
.service-card {
  position: absolute;
  /* Figma collage card ~419px wide (node 1165:4444) */
  width: min(92%, 419px);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  box-shadow: 0 14px 34px rgba(29, 45, 19, 0.16);
  text-align: center;
  z-index: 2;
}
.service-item--tl .service-card { bottom: 3%; right: 14px; }
.service-item--tr .service-card { bottom: 3%; left: 14px; }
.service-item--bl .service-card { top: 3%; right: 14px; }
.service-item--br .service-card { top: 3%; left: 14px; }
.service-card h3 {
  /* Figma ~25px */
  font-size: clamp(1.125rem, 1.6vw, 1.5625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-1);
}
.service-card p {
  /* Figma 18px Regular, lh 1.3 */
  font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
  line-height: 1.3;
  color: var(--color-text-dark);
  opacity: 0.8;
}

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

/* Case study carousel */
.case-carousel {
  position: relative;
  margin-top: var(--space-5);
}
.case-carousel__viewport {
  overflow: hidden;
}
.case-carousel__track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
  /* Let horizontal finger drags reach the swipe handler (JS) while vertical
     gestures still scroll the page. Also stop text/image selection mid-swipe. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Slide — desktop: text left, image right (matches Figma) */
.case-study {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-4), 4vw, var(--space-7));
  align-items: center;
  padding: 0 var(--space-2);
}
.case-study__media {
  width: 100%;
}
.case-study__media img {
  width: 100%;
  mix-blend-mode: multiply;
}
.case-study__content {
  min-width: 0;
}
.case-study__tag {
  display: block;
  color: #489E97;
  font-weight: 700;
  /* Figma 35px Bold, tracking -0.35px */
  font-size: clamp(1.25rem, 2.2vw, 2.1875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.case-study__title {
  /* Figma 85px, Google Sans SemiBold, lh 0.9, tracking -0.04em */
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-3);
}
.case-study__content p { margin-bottom: var(--space-3); }
.case-study__content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.case-study__role {
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-study__role li { line-height: 1.6; }

.case-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: var(--space-5);
}
.case-carousel__dots button {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1.5px solid rgba(29, 45, 19, 0.35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.case-carousel__dots button.is-active {
  width: 15px;
  height: 15px;
  border-color: #ff1500;
  background: #ff1500;
}

/* Case Studies section */
.case-studies-section {
  position: relative;
  z-index: 0;
  padding-bottom: calc(var(--space-8) + 80px);
}
.case-studies-title,
.section-title {
  /* Figma 55px, Google Sans Medium, lh 1.0, tracking -0.55px (nodes 1165:4404/4405) */
  font-size: clamp(2rem, 3.4vw, 3.4375rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.section-title { margin-bottom: var(--space-3); }

/* Teal operators section — overlaps the case studies above and the dark panel below (Figma layering) */
.operators-section {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  padding-bottom: calc(var(--space-8) + 120px);
}
.operators-inner {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(var(--space-5), 5vw, var(--space-8));
  align-items: center;
}
.operators-photo img {
  width: 100%;
  aspect-ratio: 607 / 626;
  object-fit: cover;
  border-radius: 83% 2% 18px 3%;
}
.operators-content h2 {
  /* Figma 85px, Google Sans Medium, lh 0.9, tracking -0.04em */
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}
.operators-content .lead {
  /* Figma 30px Regular, lh 1.2 */
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 24ch;
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  /* The "Build Leasing Momentum" about column is desktop-only in Figma's
     responsive footer (mobile node 1165:4081) — hide it on tablet/mobile. */
  .footer-about { display: none; }
  /* Social icons sit in a single row on responsive (desktop keeps the 2-up grid). */
  .social-icons { grid-template-columns: repeat(3, max-content); }
  .operators-inner { grid-template-columns: 1fr; text-align: center; }
  .operators-photo { max-width: 320px; margin: 0 auto; }
  /* The lead keeps its 24ch cap when stacked — center the block so the copy
     sits under the centered heading instead of hugging the left edge. */
  .operators-content .lead { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
  .main-nav { position: fixed; inset: 0; top: 0; background: var(--color-bg-dark); display: flex; flex-direction: column; justify-content: center; transform: translateX(100%); transition: transform 0.25s ease; z-index: 99; }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: var(--space-5); text-align: center; }
  .main-nav a { color: var(--color-white); font-size: 1.5rem; }
  /* Dark overlay: use the (teal) active text color for the underline so it reads */
  .main-nav a.is-active::after { background: currentColor; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .main-nav__cta { display: block; }

  /* The off-canvas nav is position:fixed + translateX(100%), parking it just
     off the right edge. A fixed element parked off-screen can add to the
     document scroll width and cause a stray horizontal scroll on real phones,
     so clip horizontal overflow at the root as a safeguard. (When the menu is
     open it sits at translateX(0), fully on-screen, so it is unaffected.) */
  html, body { overflow-x: hidden; }

  /* When the menu is open, pin the close icon to the viewport. The header
     itself scrolls away with the page (height:0 + absolute .header-inner),
     but the nav overlay is position:fixed — so without this the close icon
     scrolls off while the links stay put. Anchored to match the header's
     top/right (--space-5 / --gutter). */
  .nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: 60px;
    right: var(--gutter);
  }

  /* Mobile header (all pages): clean look — white logo left, teal hamburger
     right, no white pill background. */
  .header-pill { background: transparent; box-shadow: none; padding: 0; }
  .nav-toggle { width: 34px; gap: 4px; }
  .nav-toggle span { height: 3px; background: var(--color-cyan); }

  /* Home page only: dark-green circular hamburger button (Figma mobile node
     1165:4049 — 55px circle, soft shadow, three teal #51b1a9 bars). */
  body[data-page="home"] .nav-toggle {
    width: 55px;
    height: 55px;
    gap: 6px;
    align-items: center;
    border-radius: 50%;
    background: #1D2D13;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.05);
  }
  body[data-page="home"] .nav-toggle span { width: 34px; height: 4px; background: #51b1a9; }
  /* When open, drop the circle so the white "X" reads on the dark overlay */
  body[data-page="home"] .nav-toggle[aria-expanded="true"] { background: transparent; box-shadow: none; }
  body[data-page="home"] .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  body[data-page="home"] .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  /* Mobile header (all pages, matches Figma node 1165:3794): the logo mark is
     pinned left, the "Catalyst" wordmark is centred, and the hamburger sits on
     the right. The wordmark is lifted out of the logo anchor's flow and centred
     over the whole header row (.header-inner is the positioned ancestor and has
     symmetric side padding), so the mark stays flush left and the toggle flush
     right regardless of the wordmark's width. */
  .header-logo { gap: var(--space-3); }
  .header-logo__mark { height: 44px; }
  .header-logo__name {
    height: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Home page hides the logo on desktop (centered nav pill), but on mobile it
     shows the Catalyst logo on the left next to the hamburger. */
  body[data-page="home"] .header-logo { display: inline-flex; }
  body[data-page="home"] .header-inner { justify-content: space-between; }

  .card-grid,
  .card-grid--2 { grid-template-columns: 1fr; }
  /* Figma mobile (node 1165:4237, 402 canvas): the logo sits on the 20px gutter
     (x=20) while the stacked columns are indented ~24px from it (Contact/address
     at x=44). Logo keeps the gutter; only the content block is inset. */
  .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 24px; padding-left: 24px; }

  /* Footer type/logo/spacing mapped 1:1 from Figma mobile (node 1165:4237,
     402px frame): Google Sans — Contact/Follow headings + nav links 23px,
     address/about body 14px; logo 72px tall; social icons ~26px. Vertical
     rhythm: ~72px below the logo, ~24px between the stacked blocks and between
     each heading and its content. */
  .footer-logo { margin-bottom: 72px; }
  .footer-logo img { height: 72px; }
  .site-footer h3 { font-size: 1.4375rem; font-weight: 400; margin-bottom: 24px; }
  .footer-nav a { font-size: 1.4375rem; }
  .footer-contact address,
  .footer-about p { font-size: 0.875rem; }
  .social-icons { gap: 16px; }
  .social-icons img { width: 26px; height: 26px; }
  /* Contact's flush footer is a tall standalone panel (Figma frames the logo
     ~203px below the rounded top and leaves ~82px under the social row). It
     sits flush (no overlap), so cancel the base mobile -60px pull-up that the
     other pages' overlapping panels use. */
  .footer-panel--flush { margin-top: 0; }
  .footer-panel--flush .site-footer { padding-top: 203px; padding-bottom: 82px; }

  /* Services collage stacks vertically (matches Figma mobile, node 1165:3936):
     each petal is full-width and roughly square, and its white card overlaps
     the RIGHT edge of the image. Cards cluster toward the vertical centre —
     items 1 & 2 sit at the bottom of their image, items 3 & 4 at the top
     (the bottom/top placement is inherited from the base .service-item--*
     rules; only the horizontal side needs overriding here). */
  .services-collage { grid-template-columns: 1fr; max-width: 420px; gap: var(--space-3); }
  .service-item .service-card {
    width: 70%;
    padding: var(--space-2) var(--space-3);
  }
  /* Desktop alternates the card side left/right; on mobile pin every card to
     the right edge so they all read the same way down the stack. */
  .service-item--tr .service-card,
  .service-item--br .service-card { left: auto; right: 14px; }

  .section-radius-bl,
  .section-radius-tl,
  .section-radius-tr-bl { border-radius: 0 0 0px 60px; }
  .section-radius-br { border-radius: 0 0 60px 0; }
  /* Teal panels keep their desktop top-right overlap corner on mobile too
     (Figma mobile shows the teal "Built for Portfolio Operators" section
     rounded at the top-right, overlapping the section above). */
  .section-radius-tr { border-radius: 0 60px 0 0; }

  /* Case studies — mobile: image on top, text centered below */
  .case-study {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: 0;
  }
  .case-study__media {
    order: -1;
    max-width: 420px;
  }
  .case-study__content {
    max-width: 480px;
  }
  /* Hide the "Our Role" heading + list on mobile (matches Figma mobile) */
  .case-study__content h4,
  .case-study__role { display: none; }
  .case-carousel__arrow { display: none; }

  .case-studies-section { padding-bottom: calc(var(--space-7) + 50px); }
  .operators-section { margin-top: -50px; padding-bottom: calc(var(--space-7) + 60px); }
  /* Mobile footer uses a portrait-specific render (Figma node 1165:3654): the
     desktop ring image (catalyst-layer-image-03) crops to its empty green
     centre in a narrow column, so swap to the mobile crop whose petals sit in
     frame. Keeps center-bottom cover to match Figma's object-bottom fill. */
  .footer-panel {
    margin-top: -60px;
    border-radius: 60px 0 0 0;
    background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03-mobile.webp');
    /* Mobile crop (Figma node 1165:3938) is a portrait composition with the
       three 3D shapes stacked down the right edge. Scale it to the full panel
       width (rather than `cover`) so the whole composition shows exactly as in
       Figma instead of being centre-cropped; the panel runs taller than the
       image, so --color-bg-dark (matches the image's green) fills below it. */
    background-size: 100% auto;
    background-position: center top;
  }
  /* Freelance mobile footer uses its own portrait crop (Figma node 1165:3828):
     a shorter frame than the generic mobile image, with the three shapes larger
     and bottom-anchored (the node uses object-bottom + rounded-tl 60px). Anchor
     to the bottom so the shapes stay in frame; the empty upper region is green,
     filled by --color-bg-dark when the panel runs taller than the crop. */
  .footer-panel--freelance {
    background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03-freelance-mobile.webp');
    background-position: center bottom;
  }
  /* Contact page footer is a flush, non-rounded panel with no form above it,
     so Figma (node 1165:4238) uses a shorter crop where the three shapes sit
     larger and fill the right edge. Swap to that dedicated mobile image. */
  .footer-panel--flush {
    background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-03-contact-mobile.webp');
  }
  .agy-team { margin-top: -60px; padding-top: calc(var(--space-7) + 60px); }

  /* Home "Built to Drive Occupancy" hero: the desktop layer image
     (catalyst-layer-image-02, 1920×912 landscape) centre-crops to a busy
     slice on a narrow phone, scattering the 3D shapes across the copy. Swap
     to the portrait mobile crop (Figma node 1165:3942) whose shapes sit down
     the right edge, leaving the left field clear for the text. The base
     mobile crop is authored at the 402px viewport width, so scale it 1:1 to
     the full width (`100% auto`) — the base `cover` scales it up to fill the
     taller section and pushes the right-edge shapes off-screen. The section
     runs a little taller than the 529px crop, so --color-bg-dark (matches the
     image's green) fills below it. */
  .occupancy-hero {
    background-image: url('../images/site-media/figma-layer-images-web-optimized/catalyst-layer-image-02-mobile.webp');
    background-size: 100% auto;
    background-position: center top;
  }
}

@media (max-width: 640px) {
  /* Taller, portrait-style hero on phones (Figma mobile ~402×693) */
  .hero-photo { aspect-ratio: 5 / 7; }
  /* Figma mobile dims the whole hero evenly with a solid #a4a4a4 multiply
     fill, then layers a darker gradient scrim over the top ~38% (265/693)
     for header/logo legibility. The desktop full-height gradient looks
     uneven on the taller phone hero, so override it here. */
  .hero-photo__overlay {
    background:
      linear-gradient(180deg, rgba(23, 37, 15, 0.6) 0%, rgba(255, 255, 255, 0) 38%),
      #a4a4a4;
    mix-blend-mode: multiply;
  }
  /* On phones, skip the looping swap: just show the headline, no brand-logo cycle. */
  .hero-photo__title {
    font-size: clamp(2.25rem, 12vw, 2.9375rem);
    animation: none;
    opacity: 1;
  }
  .hero-photo__brand {
    display: none;
    animation: none;
  }
}

@media (max-width: 480px) {
  section { padding: var(--space-6) 0; }
  /* Header is absolutely positioned (height:0), so the hero must keep enough
     top padding to clear the ~96px header pill — otherwise the heading slides
     up underneath it. */
  .hero { padding: 8.5rem 0 var(--space-5); }
  .container { padding: 0 20px; }
}

/* ==========================================================================
   Services page — mapped 1:1 from Figma (node 1165:4553)
   ========================================================================== */
body[data-page="services"] {
  /* Distinct teal accents used across this page's headings, numbers, and pills */
  --svc-accent: #0e9b90;   /* eyebrows + explore links */
  --svc-number: #4cc5bd;   /* big step numerals */
  --svc-pill: #51b1a9;     /* service-card tag pills */
  --svc-ink: #1d2a1e;      /* card headings */
  --svc-ink-soft: #282828; /* card + step body copy */
}

/* Content column (Figma node 1165:4553): every section sits in a left-biased
   ~8.5% gutter band (~163px, ~1598px wide on the 1920 canvas) — the same gutter
   the header, footer panel, agency and contact pages use. The shared centred
   1200px .container pinched the page to ~1040px and everything was scaled down
   ~0.66× to fit; widening it lets the hero/teal/cards render at Figma's true px.
   Reverts to the standard gutter below 769px for the stacked mobile layout. */
@media (min-width: 769px) {
  body[data-page="services"] main .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
}

/* Shared eyebrow style: Google Sans SemiBold, teal, uppercase (Figma 20px) */
.svc-eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--svc-accent);
}
.text-center.svc-eyebrow { text-align: center; }

/* --- Hero: One connected leasing system ------------------------------------ */
.svc-hero {
  overflow: hidden;
  /* Figma hero 1920×1118. Image sits 210px below the top; top padding also
     clears the floating header. Matches the agency hero for a consistent
     entry height across the two pages. */
  /* Figma hero 1920×1118 (image 210px from top, 107px from bottom). */
  padding-top: 210px;
  padding-bottom: 107px;
  /* Paints over the Problem block so the hero's rounded-bl corner reveals the
     white section tucked behind it (see .svc-problem overlay). */
  position: relative;
  z-index: 1;
}
.svc-hero__inner {
  display: grid;
  /* Figma: text column ~727px : image column ~777px (image is slightly wider),
     with a ~40px gutter between them. */
  grid-template-columns: 0.94fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
/* Figma title ~85px on the 1920 canvas → scaled (~0.675) to the container so it
   stays proportional to the scaled image. */
.svc-hero__title {
  /* Figma 85px, Google Sans Medium, lh 0.9, tracking -0.04em (node 1165:4553) */
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
/* Lead: Figma 30px → ~20px scaled, line-height 1.2. Title→lead 48px and
   lead→button 16px gaps from Figma, scaled. */
.svc-hero__lead {
  /* Figma 30px Regular, lh 1.2; title→lead 48px, lead→button 16px */
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 33ch;
  margin: 48px 0 16px;
}
.svc-hero .btn,
.svc-ways .btn {
  /* Figma pill: Google Sans Medium 25px, height ~67px */
  font-size: clamp(1.25rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.25rem 2rem;
}
/* Organic "petal" mask — same leaf language as the home collage petals.
   Figma image 776.84 × 800.82 (aspect ≈ 0.97); fills its column up to the
   scaled width (~525px) and sits flush to the container's right edge. */
.svc-hero__media { justify-self: end; width: 100%; }
.svc-hero__media img {
  display: block;
  width: 100%;
  max-width: 777px;
  height: auto;
  aspect-ratio: 776.84 / 800.82;
  object-fit: cover;
  border-radius: 4% 84% 20px 4%;
}

/* --- The Problem We Solve + How We Build Momentum --------------------------- */
/* Figma node 1165:4554 is ONE rectangle: a single continuous gradient (white →
   #d7d7d7, white held until 62.5%) behind BOTH sections. So the gradient lives
   on a shared panel and the two sections are transparent. The panel also
   carries the overlay — it tucks ~150px up behind the hero so the hero's
   rounded-bl corner reveals this white panel (see .svc-hero z-index). */
.svc-panel {
  position: relative;
  z-index: 0;
  margin-top: -150px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 62.5%, #d7d7d7 100%);
}
.svc-problem {
  /* Restores content position after the panel's -150px overlap pull. */
  padding-top: calc(var(--space-7) + 150px);
}
.svc-problem__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-text-dark);
  /* Figma constrains this to 1191px so it wraps to two lines (node 1165:4553) */
  max-width: 1191px;
  margin-top: var(--space-3);
}
/* Body: Figma Google Sans Regular 30px, line-height 1.2 */
.svc-problem__body {
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: var(--color-black);
  max-width: 60ch;
  margin-top: var(--space-5);
}
.svc-divider {
  border: 0;
  border-top: 1px solid #489E97;
  margin: var(--space-7) 0 0;
}

/* --- How We Build Momentum ------------------------------------------------- */
.svc-momentum {
  /* Background comes from the shared .svc-panel gradient (Figma 1165:4554). */
  background: transparent;
  color: var(--color-text-dark);
  /* Room for the teal .svc-ways section to overlap upward (-150px) without
     covering the steps. */
  padding-bottom: calc(var(--space-7) + 150px);
}
.svc-momentum__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text-darker);
  margin: var(--space-2) 0 var(--space-6);
}
.svc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  /* Figma has no rule above the steps — the single divider (.svc-divider) sits
     above the whole "How It Works" block instead. */
  padding-top: var(--space-5);
}
.svc-step__num {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(3.5rem, 6vw, 6.25rem);
  line-height: 1;
  color: var(--svc-number);
  margin-bottom: var(--space-2);
}
.svc-step__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin-bottom: var(--space-3);
}
.svc-step__body {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.3;
  color: var(--svc-ink-soft);
}

/* --- Start where you need us (teal) ---------------------------------------- */
.svc-ways {
  position: relative;
  z-index: 1;
  /* Overlay: the teal section slides up over the How-It-Works panel so its
     rounded top-right corner reveals the gradient behind it (Figma: teal starts
     ~217px into the panel above). */
  margin-top: -150px;
  /* Extra bottom room so the dark footer-panel can overlap (-150px) without
     covering the service cards — mirrors the home page's operators-section. */
  padding-bottom: calc(var(--space-8) + 120px);
}
.svc-ways__intro {
  display: grid;
  /* Figma: image ~607px on the 1920 canvas → ~410px scaled to the container
     (same 0.68× as the hero image), with a ~205px → ~140px gutter to the text.
     The image spans both rows so the title+copy pair centers against it. */
  grid-template-columns: minmax(0, 607px) 1fr;
  grid-template-areas:
    "media title"
    "media copy";
  column-gap: clamp(48px, 11vw, 207px);
  align-items: center;
}
.svc-ways__intro .svc-ways__media { grid-area: media; }
.svc-ways__intro .svc-ways__title { grid-area: title; align-self: end; margin-bottom: var(--space-3); }
.svc-ways__intro .svc-ways__copy { grid-area: copy; align-self: start; }
/* Organic "petal" mask — mirror of the hero: big rounded top-left,
   sharp top-right + bottom-left, gently rounded bottom-right */
.svc-ways__media img {
  width: 100%;
  height: auto; /* required so aspect-ratio wins over the img's height attr */
  aspect-ratio: 607 / 626; /* Figma image bounds */
  object-fit: cover;
  /* Figma petal mask: big rounded top-left (~65%), near-sharp top-right &
     bottom-left, gently rounded bottom-right. No shadow (matches Figma). */
  border-radius: 65% 8px 16px 14px;
}
.svc-ways__title {
  /* Figma 85px, Google Sans Medium, lh 0.9, tracking -0.04em (node 1165:4553) */
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.svc-ways__lead {
  /* Figma 30px Regular, lh 1.2 */
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 40ch;
  margin: var(--space-3) 0 var(--space-5);
}

/* Service cards */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 45px);
  margin-top: var(--space-7);
}
.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19.5px;
  background: var(--color-white);
  border-radius: 24px;
  padding: var(--space-4);
  /* Figma node 1165:4553 — soft shadow */
  box-shadow: 0 2px 5px rgba(32, 49, 33, 0.06);
}
.svc-card__eyebrow {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--svc-accent);
}
.svc-card__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2.1875rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--svc-ink);
  margin-top: calc(-1 * var(--space-1));
}
.svc-card__body {
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--svc-ink-soft);
}
.svc-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-tags li {
  background: var(--svc-pill);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.62;
  padding: 7px 15px;
  border-radius: 999px;
}
/* --- Services responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  /* Momentum steps stack; the divider between problem/momentum carries the rule
     (Figma has no line above the stacked steps) */
  .svc-steps { grid-template-columns: 1fr; gap: var(--space-5); border-top: none; padding-top: 0; }
  .svc-cards { grid-template-columns: 1fr; }

  /* Hero stacks: image on top, content left-aligned */
  .svc-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .svc-hero__media { order: -1; }

  /* Ways section stacks left-aligned: heading -> image -> lead -> button */
  .svc-ways__intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--space-4);
  }
  .svc-ways__intro .svc-ways__title,
  .svc-ways__intro .svc-ways__copy { align-self: stretch; margin-bottom: 0; }
  .svc-ways__lead { max-width: none; margin: 0 0 var(--space-4); }
  .svc-ways__media { max-width: none; margin: 0; }
}

/* Phones — Figma mobile spec (frame 402px): type scale, spacing, image sizes */
@media (max-width: 768px) {
  /* Eyebrows: Google Sans SemiBold 20px */
  .svc-eyebrow { font-size: 1.25rem; }

  /* Hero + teal headings: 47px, line-height 0.9 */
  .svc-hero__title,
  .svc-ways__title { font-size: clamp(2.5rem, 12vw, 2.9375rem); line-height: 0.9; }

  /* Hero + teal lead: 16px */
  .svc-hero__lead,
  .svc-ways__lead { font-size: 1rem; line-height: 1.2; max-width: none; }

  /* Hero: clear the header with breathing room, near-square image (Figma 358x369) */
  .svc-hero { padding-top: 8.5rem; padding-bottom: var(--space-7); }
  .svc-hero__lead { margin: var(--space-3) 0; }
  .svc-hero__media img { aspect-ratio: auto; height: clamp(300px, 90vw, 366px); }

  /* Overlay shrinks with the mobile section radius (60px) */
  .svc-panel { margin-top: -60px; }
  /* Figma mobile (frame 1165:4078): hero button → "The Problem We Solve" eyebrow
     ~121px, and problem body → "How It Works" eyebrow ~104px. The base paddings
     (calc(--space-7 + 60) top, section 64px bottom + 64px on .svc-momentum) left
     ~70px of extra space above each. The +60 keeps clearing the -60 panel overlap. */
  .svc-problem { padding-top: calc(var(--space-3) + 60px); padding-bottom: var(--space-3); }

  /* Problem: 37px centered heading, 20px body */
  .svc-problem__title { font-size: clamp(2rem, 9vw, 2.3125rem); line-height: 1; max-width: none; }
  .svc-problem__body { font-size: 1.25rem; line-height: 1.2; }

  /* How We Build Momentum: 37px heading, 100px numbers, 35px step titles, 18px body */
  .svc-momentum__title { font-size: clamp(2rem, 9vw, 2.3125rem); line-height: 0.95; margin-bottom: var(--space-4); }
  .svc-step__num { font-size: clamp(5rem, 24vw, 6.25rem); }
  .svc-step__title { font-size: clamp(1.875rem, 9vw, 2.1875rem); }
  .svc-step__body { font-size: 1.125rem; }

  /* Teal: near-square image (Figma 366x377) */
  .svc-ways__lead { margin: 0 0 var(--space-3); }
  .svc-ways__media img { aspect-ratio: auto; height: clamp(300px, 92vw, 372px); }

  /* Overlay shrinks with the mobile section radius (60px). Spacing mapped from
     Figma mobile (frame 1165:4078): teal top→title ~39px; last card→teal bottom
     ~97px. The base padding-bottom (calc(--space-8 + 120px) = 248px) suited the
     desktop -150px overlap; mobile overlaps only -60px, so it left a large empty
     teal gap below the cards. */
  .svc-ways { margin-top: -60px; padding-top: 40px; padding-bottom: 96px; }
  /* Figma: button row → service cards ~64px (base is --space-7 / 96px) */
  .svc-cards { margin-top: var(--space-6); }
  /* Figma mobile pill: ~38px tall / 16px text — the base .svc-hero/.svc-ways .btn
     rule is the larger desktop 67px pill (20px text, 20/32px padding on mobile). */
  .svc-hero .btn,
  .svc-ways .btn { font-size: 1rem; padding: 0.5625rem 1.5rem; }
  .svc-momentum { padding-top: var(--space-4); padding-bottom: calc(var(--space-7) + 60px); }

  /* Service cards: 35px title (body/eyebrow/pills already match Figma mobile) */
  .svc-card__title { font-size: clamp(1.875rem, 9vw, 2.1875rem); }
}

@media (max-width: 480px) {
  .svc-divider { margin-top: var(--space-5); }
}

/* ==========================================================================
   Agency page — hero (Figma node 1165:4806)
   ========================================================================== */

/* Content column alignment (Figma node 1165:4806): every left-aligned section
   sits at an ~8.5% left gutter (~160px, ~1600px wide on the 1920 canvas) — the
   same gutter the header logo and the dark footer panel already use. The shared
   centred 1200px .container pushed the content ~280px further in than the logo
   and footer at wide viewports, so hero / "What Drives Us" / "Recognition" no
   longer lined up with the chrome around them. Match the footer-panel gutter
   verbatim so they align pixel-for-pixel at every width. The centred team grid
   (its own max-width) is unaffected. Below 769px it reverts to the standard
   gutter for the stacked mobile layout. */
@media (min-width: 769px) {
  body[data-page="agency"] main .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
}

.agy-hero {
  overflow: hidden;
  /* Above the partners block so its rounded bottom-left corner
     (section-radius-bl) reveals the white partners section tucked behind it,
     not the cream page background. */
  position: relative;
  z-index: 1;
  /* Figma section is 1920×1118 (node 1165:4809): the petal image sits 210px
     below the top and 107px above the bottom, so with a ~801px image the
     section resolves to 210+801+107 = 1118px. Top padding also clears the
     floating header (top:60px + 89px pill). */
  padding-top: 210px;
  padding-bottom: 107px;
}
.agy-hero__inner {
  display: grid;
  /* Figma: text column ~727px : image column ~777px (image is slightly wider),
     with a ~40px gutter between them. */
  grid-template-columns: 0.94fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
/* Heading: Google Sans Medium, tracking -0.04em, line-height 0.9.
   Figma is ~88px on the 1920 canvas; scaled (~0.675) to the 1200 container so
   the line "A creative culture / engineered for / momentum" holds. */
.agy-hero__title {
  /* Figma 85px, Google Sans Medium, lh 0.9, tracking -0.04em (node 1165:4850) */
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
/* Lead: Figma 30px → ~20px scaled, line-height 1.2. Title→lead gap 40px and
   lead→button gap ~20px, both scaled from Figma. */
/* Scoped to .agy-hero so max-width wins over `.hero .lead { 42ch }`. */
.agy-hero .agy-hero__lead {
  /* Figma 30px Regular, lh 1.2, width 723px (node 1165:4851) */
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 723px;
  margin: 41px 0 20px;
}
/* Button "Work With Our Team": Google Sans Medium pill (Figma 322×67 → scaled) */
.agy-hero .btn {
  /* Figma pill 322×67, Google Sans Medium 25px (node 1165:4852) */
  font-size: clamp(1.25rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.25rem 2.5rem;
}
/* White pill button in the hero (Figma) rather than the yellow default */
.agy-hero .btn-secondary {
  background: var(--color-white);
  color: var(--color-text-darker);
}
.agy-hero .btn-secondary:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
/* Petal mask — same leaf language as the hero images across the site.
   justify-self:end + a right inset keeps the photo pulled in from the section
   edge (matches Figma). height:auto is required so aspect-ratio wins over the
   img's height attribute. */
.agy-hero__media { justify-self: end; width: 100%; }
.agy-hero__media img {
  display: block;
  /* Figma image 776.84 × 800.82 (aspect ≈ 0.97). Fills its column up to the
     scaled Figma width (~525px) and sits flush to the container's right edge,
     so it stays taller than the text block — matching Figma. */
  width: 100%;
  max-width: 777px;
  height: auto;
  margin-right: 0;
  aspect-ratio: 776.84 / 800.82;
  object-fit: cover;
  border-radius: 4% 84% 20px 4%;
  box-shadow: none;
}

@media (max-width: 1024px) {
  /* Hero stacks: image on top, content left-aligned */
  .agy-hero__inner { display: flex; flex-direction: column; gap: var(--space-4); }
  .agy-hero__media { order: -1; justify-self: stretch; }
  .agy-hero__media img { width: 100%; max-width: 440px; margin-right: 0; }
}

@media (max-width: 768px) {
  .agy-hero { padding-top: 8.5rem; padding-bottom: var(--space-6); }
  .agy-hero__title { font-size: clamp(2.5rem, 12vw, 2.9375rem); line-height: 0.9; }
  .agy-hero__lead { font-size: 1rem; line-height: 1.2; max-width: none; margin: var(--space-3) 0; }
  .agy-hero__media img { aspect-ratio: auto; height: clamp(300px, 90vw, 366px); }
  /* Figma mobile pill ~38px (base .agy-hero .btn is the larger 64px desktop pill) */
  .agy-hero .btn { font-size: 1rem; padding: 0.5625rem 1.5rem; }
}

/* Agency page — accent tokens shared with the reused step/number styling */
body[data-page="agency"] {
  --svc-accent: #0e9b90;
  /* Figma "What Drives Us" numerals are teal #489e97 (node 1165:4966) */
  --svc-number: #489e97;
  --svc-ink-soft: #282828;
}

/* Eyebrow: Google Sans SemiBold 20px, teal, uppercase */
.agy-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e9b90;
}
.agy-eyebrow.text-center { text-align: center; }
.agy-eyebrow--light { color: var(--color-white); }

/* --- Trusted by Industry Partners ------------------------------------------ */
/* Slides up 150px behind the teal hero so the hero's rounded bottom-left corner
   reveals this white block (not the cream page bg) — Figma node 1165:4807
   (white) tucks under 1165:4809 (teal hero). The matching extra padding-top
   keeps the "Trusted by…" eyebrow in place. */
.agy-partners {
  position: relative;
  z-index: 0;
  margin-top: -150px;
  padding-top: calc(var(--space-7) + 150px);
  padding-bottom: var(--space-6);
}
.agy-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) clamp(var(--space-4), 4vw, var(--space-6));
  margin: var(--space-6) 0 var(--space-7);
}
.agy-logos li { display: flex; align-items: center; }
.agy-logos img { width: auto; max-width: 100%; object-fit: contain; }
/* Figma partner logos have distinct heights, not a uniform row
   (nodes: Yugo 77 / Venterra 40 / Stratford 50 / Willow Bridge 89 / LDG 115). */
.agy-logos li:nth-child(1) img { height: clamp(38px, 4vw, 77px); }
.agy-logos li:nth-child(2) img { height: clamp(20px, 2.1vw, 40px); }
.agy-logos li:nth-child(3) img { height: clamp(26px, 2.6vw, 50px); }
.agy-logos li:nth-child(4) img { height: clamp(46px, 4.65vw, 89px); }
.agy-logos li:nth-child(5) img { height: clamp(58px, 6vw, 115px); }
.agy-divider {
  border: 0;
  border-top: 1px solid #489E97;
  margin: 0;
}

/* --- What Drives Us (reuses .svc-momentum__title, .svc-step*) --------------- */
/* Figma constrains the heading to 679px at 85px (≈ 8em) so it wraps to three
   lines — "Clear direction is / not a style — it's / how we operate." — and
   sits flush-left under the eyebrow with a 30px gap. */
/* The white block sits above the light team section so its rounded bottom-right
   corner (section-radius-br) reveals the grey team background sliding up beneath
   it — Figma node 1165:4807 (white block) over 1165:4806 (#efefef canvas). */
.agy-drives {
  position: relative;
  z-index: 1;
}
.agy-drives .svc-momentum__title {
  max-width: 8em;
  margin-top: 30px;
}
.agy-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  margin-top: var(--space-6);
}

/* --- Meet the Team --------------------------------------------------------- */
/* #efefef canvas (Figma 1165:4806). Slides up 150px behind the white "What
   Drives Us" block so the grey shows through that block's rounded br corner;
   the matching extra padding-top keeps the content in place. */
.agy-team {
  position: relative;
  z-index: 0;
  background: #efefef;
  margin-top: -150px;
  padding-top: calc(var(--space-7) + 150px);
  /* Extra bottom room so the Recognition block (which slides up 150px) overlaps
     only this grey padding — its rounded top-right corner then reveals grey,
     not the cream page bg, and the last team row stays clear of the overlap. */
  padding-bottom: calc(var(--space-7) + 150px);
}
.agy-team__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-text-dark);
  max-width: 18ch;
  /* Figma: 34px gap between "Meet the Team" eyebrow and this heading */
  margin: 34px auto var(--space-7);
}
.agy-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Figma: 380×380 photos, 3 columns, grid span 1268px (col-gap 64px) */
  gap: var(--space-5) 64px;
  max-width: 1268px;
  margin: 0 auto;
}
.agy-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* Leaf-motif mask (Figma 1165:4914): 30px on three corners, a large 80px
     sweep on the bottom-left — order is TL TR BR BL. */
  border-radius: 30px 30px 30px 80px;
  background: #e6e6e6;
}
.agy-member h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  /* Figma 1165:4891 — 35px, tracking -0.45px */
  font-size: clamp(1.5rem, 2.1vw, 2.1875rem);
  line-height: 1.1;
  letter-spacing: -0.013em;
  color: var(--color-black);
  /* Figma: 19px gap between member photo and name */
  margin-top: 19px;
}
.agy-member p {
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--svc-ink-soft);
  margin-top: var(--space-1);
}

/* --- Recognition ----------------------------------------------------------- */
.agy-recognition {
  position: relative;
  z-index: 1;
  /* Slides up 150px over the grey team section so this teal block's rounded
     top-right corner (section-radius-tr) reveals grey, not the cream page bg.
     The team section's extra padding-bottom absorbs the overlap. */
  margin-top: -150px;
  /* Room for the dark footer-panel to overlap (-150px) — same as the home
     page's operators-section pattern. */
  padding-bottom: calc(var(--space-8) + 80px);
}
.agy-recognition__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-top: var(--space-2);
  max-width: 14ch;
}
/* Award logos (white, on teal) */
.agy-awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) clamp(var(--space-4), 4vw, var(--space-6));
  margin-top: clamp(var(--space-6), 8vw, var(--space-8));
}
.agy-awards img {
  height: clamp(60px, 6.2vw, 92px);
  width: auto;
  object-fit: contain;
}

/* --- Agency responsive ----------------------------------------------------- */
@media (max-width: 1024px) {
  .agy-steps { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 768px) {
  /* Match the services mobile type scale for the reused step/heading styles */
  .agy-eyebrow { font-size: 1.25rem; }
  .agy-team__title,
  .agy-recognition__title { font-size: clamp(2rem, 9vw, 2.3125rem); }
  .agy-team__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-3); }
  .agy-member h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); margin-top: 7px; }
  .agy-logos { grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); }
  .agy-logos img { height: clamp(26px, 7vw, 40px); }
  /* Recognition centres on mobile: eyebrow + title are centre-aligned and the
     award logos sit in an even 3-column grid. The logos vary a lot in width, so
     flex left-packing clipped the wide ones off the right edge — a grid gives
     each an equal cell and max-width:100% keeps the wide marks inside it. */
  .agy-recognition { text-align: center; }
  .agy-recognition__title { max-width: none; margin-inline: auto; }
  .agy-awards {
    display: grid;
    /* minmax(0,1fr) lets the columns shrink below the widest logo's intrinsic
       width — plain 1fr keeps a min-content floor, which widened the grid past
       the viewport and clipped both the logos and the title. Each cell stretches
       (no justify-items:center, which would size cells to the logo's own width
       and overflow); the logo is centred inside its cell by the li flexbox and
       held to the cell width by max-width:100%. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-3);
    align-items: center;
  }
  .agy-awards li { display: flex; align-items: center; justify-content: center; min-width: 0; }
  .agy-awards img { height: clamp(44px, 13vw, 60px); max-width: 100%; min-width: 0; }
  /* White hamburger on the teal Agency hero (matches the dark logo mark) */
  body[data-page="agency"] .nav-toggle span { background: var(--color-white); }

  /* Section spacing mapped from Figma mobile (frame 1165:3615) — trim the
     desktop-overlap paddings that leave large empty gaps between sections. */
  /* Mobile overlap is 60px (mobile section-radius), so the white block tucks
     60px under the hero instead of the desktop 150px. */
  .agy-partners { margin-top: -60px; padding-top: calc(var(--space-5) + 60px); padding-bottom: var(--space-3); }
  .agy-logos { margin: var(--space-5) 0; }        /* eyebrow→logos→divider ≈ 48px each */
  .agy-drives { padding-top: var(--space-4); }     /* divider→"What Drives Us" ≈ 57px */
  /* The base .agy-team is declared later in the file, so it was overriding the
     mobile overlap rule (leaving the desktop -150px/246px). Restate it here so it
     wins: -60px overlap for the 60px mobile radius, tightened to Figma's gap. */
  .agy-team { margin-top: -60px; padding-top: calc(var(--space-5) + 60px); padding-bottom: calc(var(--space-5) + 60px); }
  .agy-team__title { margin-bottom: var(--space-5); }  /* title→grid ≈ 44px */
  .agy-recognition { margin-top: -60px; padding-top: var(--space-5); padding-bottom: calc(var(--space-6) + 60px); }
}

@media (max-width: 480px) {
  /* Figma mobile: one full-width member per row (photo ~362px), name 35px. */
  .agy-team__grid { grid-template-columns: 1fr; max-width: none; }
  .agy-member h3 { font-size: clamp(1.75rem, 8.7vw, 2.1875rem); }
}

/* ==========================================================================
   Freelance with Catalyst page — mapped 1:1 from Figma (node 1165:4999)
   ========================================================================== */
body[data-page="freelance"] {
  /* Figma page canvas is a warm cream #f3f8ed (shows behind the cards). */
  background: #f3f8ed;
  /* Reused step styling: teal numerals + soft-ink body copy (Figma 1165:5090). */
  --svc-number: #489e97;
  --svc-ink-soft: #282828;
}

/* Content column: same left-biased ~8.5% (163px) gutter band the header, footer
   panel, and the other interior pages use — the shared centred 1200px .container
   pinched everything in and scaled it down. Reverts to the standard gutter below
   769px for the stacked mobile layout. */
@media (min-width: 769px) {
  body[data-page="freelance"] main .container {
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 8.5vw, 163px);
    padding-right: clamp(24px, 8.5vw, 163px);
  }
}

/* Eyebrow: Figma Poppins SemiBold 20px → Google Sans 600, teal #0e9b90, uppercase
   (nodes 1165:5069/5087 + the per-card eyebrows). */
.fwc-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0e9b90;
}
.fwc-eyebrow--center { text-align: center; }

/* --- Hero (Figma 1920×1118, #203121, radius bl 150 — node 1165:5005) -------- */
.fwc-hero {
  background: #203121;
  overflow: hidden;
  /* Petal image sits 210px below the top and 107px above the bottom
     (210 + 801 + 107 = 1118); top padding also clears the floating header. */
  padding-top: 210px;
  padding-bottom: 107px;
}
.fwc-hero__inner {
  display: grid;
  /* Text column ~727px : image column ~777px (image is slightly wider). */
  grid-template-columns: 0.94fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
/* Heading: Google Sans Medium 85px, white, line-height 0.9, tracking -3.4px
   (-0.04em) — node 1165:5031. */
.fwc-hero__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
/* Subtitle: Figma 30px Regular, lh 1.2, width 673 (node 1165:5032). Title→lead
   44px, lead→button 40px. Scoped so max-width wins over `.hero .lead`. */
.fwc-hero .fwc-hero__lead {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  max-width: 673px;
  margin: 44px 0 40px;
}
/* Button "Submit Your Portfolio": white pill, Google Sans Medium 25px, 322×67
   (node 1165:5035). */
.fwc-hero .btn {
  font-size: clamp(1.25rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 1.25rem 2.5rem;
}
.fwc-hero .btn-secondary {
  background: var(--color-white);
  color: #203121;
}
.fwc-hero .btn-secondary:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
/* Organic hero mask (node 1165:5007): a rounded rect with a large quarter-circle
   sweep on the top-right. Applied as a scalable CSS mask for exact fidelity. */
.fwc-hero__media { justify-self: end; width: 100%; }
.fwc-hero__media img {
  display: block;
  width: 100%;
  max-width: 777px;
  height: auto;
  aspect-ratio: 776.844 / 800.821;
  object-fit: cover;
  -webkit-mask: url('../images/site-media/svg/freelance-hero-mask.svg') center / 100% 100% no-repeat;
  mask: url('../images/site-media/svg/freelance-hero-mask.svg') center / 100% 100% no-repeat;
}

/* --- Who we're looking for (role cards) ------------------------------------- */
.fwc-cards {
  display: grid;
  /* Figma: two cards, 35px col gap / 36px row gap. The 1275px cap keeps them at
     620px each on the 1920 canvas (centred, ~320px side margins) while staying
     fluid below that so they never overflow the viewport. */
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 35px;
  max-width: 1275px;
  /* "Who we're looking for" eyebrow → cards ≈ 90px (Figma y1234 → y1329). */
  margin: 90px auto 0;
}
.fwc-card {
  background: var(--color-white);
  /* Figma card 620×477, inner padding ~53px top / 55px sides (node 1165:5001). */
  padding: 53px 55px 55px;
  display: flex;
  flex-direction: column;
}
/* Each card carries one oversized outward-pointing corner (others 20px), TL TR BR BL. */
.fwc-card--tl { border-radius: 20px 20px 20px 80px; } /* top-left card,     node 5001 */
.fwc-card--tr { border-radius: 20px 20px 80px 20px; } /* top-right card,    node 5003 */
.fwc-card--bl { border-radius: 80px 20px 20px 20px; } /* bottom-left card,  node 5002 */
.fwc-card--br { border-radius: 20px 70px 20px 20px; } /* bottom-right card, node 5004 */
.fwc-card .fwc-eyebrow { margin-bottom: 20px; }
/* Heading: Figma Poppins SemiBold 35px, black, lh 1.1, tracking -0.45px. */
.fwc-card__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 2.1875rem);
  line-height: 1.1;
  letter-spacing: -0.013em;
  color: var(--color-black);
  margin-bottom: 30px;
}
/* Body: Google Sans Regular 18px, #282828, lh 1.3, with Bold role lead-ins. */
.fwc-card__list p {
  font-size: 1.125rem;
  line-height: 1.3;
  color: #282828;
  margin-bottom: 16px;
}
.fwc-card__list p:last-child { margin-bottom: 0; }
.fwc-card__list strong { font-weight: 700; }

/* --- How it works + application form (#efefef, radius tr 150 — node 1165:5000) */
.fwc-works {
  background: #efefef;
  /* #efefef panel starts 128px above the "How it works" eyebrow (Figma
     y2424 → y2552). */
  padding-top: 128px;
  /* Room for the dark footer-panel to overlap upward (-150px) without covering
     the submit button — mirrors the agency/home pattern. */
  padding-bottom: calc(var(--space-8) + 80px);
}
/* Heading: Google Sans Medium 85px, #203021, lh 0.9, tracking -4px; width 613
   forces the "Three steps to / the network" wrap (node 1165:5088). */
.fwc-works__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #203021;
  max-width: 613px;
  margin-top: 30px;
}
.fwc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  /* Title (2 lines) → step numbers ≈ 57px (Figma y2756 → y2813). */
  margin-top: 57px;
}

/* Application form — Figma inputs are white, radius 13px, 80px tall; placeholder
   text Google Sans Regular 35px #1d2d13, lh 1.2, inset 45px. */
.fwc-form {
  max-width: 1270px;
  /* Steps → form intro ≈ 107px (Figma y3007 → y3114). */
  margin-top: 107px;
  margin-bottom: 115px
}
.fwc-form__intro {
  font-size: clamp(1.5rem, 2.2vw, 2.1875rem);
  line-height: 1.2;
  color: #1a2910;
  max-width: 761px;
  /* Intro → first field row ≈ 57px (Figma y3199 → y3256). */
  margin-bottom: 57px;
}

/* --- Freelance responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .fwc-hero__inner { display: flex; flex-direction: column; gap: var(--space-4); }
  .fwc-hero__media { order: -1; justify-self: stretch; }
  .fwc-hero__media img { width: 100%; max-width: 440px; }
  .fwc-steps { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Single-column cards (tablet → phone) use the cleaner mobile treatment from
     the 402px Figma (node 1165:3851): uniform 24px radius + 32px padding instead
     of the desktop grid's oversized outward corners, with the 15.56/19.5px
     inner spacing. Font sizes stay at their per-breakpoint values. */
  .fwc-cards { grid-template-columns: 1fr; max-width: 620px; gap: 20px; }
  .fwc-card { padding: 32px; border-radius: 24px; }
  .fwc-card .fwc-eyebrow { margin-bottom: 15.56px; }
  .fwc-card__title { margin-bottom: 19.5px; }
}

/* Mobile — mapped 1:1 from the 402px Figma frame (node 1165:3791) */
@media (max-width: 768px) {
  /* Hero: image on top, then heading / subtitle / button (Figma image y134).
     Bottom trimmed so hero button → "Who We're Looking For" eyebrow ≈ 120px
     (Figma frame 1165:3791), matching the design instead of a large dark gap. */
  .fwc-hero { padding-top: 8.5rem; padding-bottom: var(--space-6); }
  /* Who We're Looking For: Figma light-field above the eyebrow ~47px, and the
     #efefef "How It Works" panel starts ~24px below the last card. */
  .fwc-looking { padding-top: var(--space-5); padding-bottom: var(--space-3); }
  /* Heading: Google Sans Medium 47px, lh 0.9, tracking -0.04em (node 1165:3795). */
  .fwc-hero__title { font-size: clamp(2.5rem, 12vw, 2.9375rem); line-height: 0.9; }
  /* Subtitle: 16px, lh 1.2 (node 1165:3796). */
  .fwc-hero .fwc-hero__lead { font-size: 1rem; line-height: 1.2; max-width: none; margin: var(--space-3) 0; }
  /* Button: Google Sans Medium ~14px pill, Figma 186×38 (node 1165:3799/3800). */
  .fwc-hero .btn { font-size: 0.875rem; padding: 0.7rem 1.6rem; }
  /* Image: near-square petal, Figma 358×369 (node 1165:3848). */
  .fwc-hero__media img { aspect-ratio: auto; height: clamp(300px, 92vw, 369px); }

  /* Section eyebrows: Poppins SemiBold 20px (node 1165:3872/3880). */
  .fwc-eyebrow { font-size: 1.25rem; }

  /* Cards: eyebrow → cards gap tightens on the phone frame (Figma ≈ 47px).
     Padding/radius/inner spacing come from the ≤1024 rules above. */
  .fwc-cards { margin-top: 40px; }
  /* Card eyebrow drops to 15px, card title to 35px on the phone (nodes
     1165:3853 / 3855). */
  .fwc-card .fwc-eyebrow { font-size: 0.9375rem; }
  .fwc-card__title { font-size: clamp(1.875rem, 9vw, 2.1875rem); }

  /* How it works: heading 37px lh 1 (node 1165:3881), step numbers 100px
     (node 1165:3883); step titles 35px / bodies 18px come from the shared
     .svc-step mobile rules above. */
  /* #efefef panel top → "How It Works" eyebrow ~50px (Figma); the desktop 128px
     / --space-7 top left ~86px of extra space above the section on mobile. The
     base padding-bottom (calc(--space-8 + 80px) = 208px) was sized for the desktop
     footer overlap (-150px); mobile overlaps only -60px, so trim it to leave a
     normal gap below the application form before the footer. */
  .fwc-works { padding-top: var(--space-5); padding-bottom: calc(var(--space-6) + 60px); }
  .fwc-works__title { font-size: clamp(2rem, 9.2vw, 2.3125rem); line-height: 1; max-width: none; }
  .fwc-steps .svc-step__num { font-size: clamp(5rem, 25vw, 6.25rem); }

  /* Application form intro eased to a phone-friendly type size. */
  .fwc-form__intro { font-size: clamp(1.125rem, 5vw, 1.5rem); }
}