/* ==========================================================================
   Aesthetic Edge: Editorial Luxury Design System
   ========================================================================== */

/* ----- Design Tokens ----- */
:root {
  /* Colors */
  --pink: #ffc4d6;
  --pink-bg: #fff5f8;
  --black: #000000;
  --white: #ffffff;
  --gray: #000000;        /* body / description text, black for maximum contrast on the pink/white backgrounds */
  --pink-deep: #f4a6bf;   /* darker pink for hover states / button text contrast */
  --border-soft: #f0dce3;

  /* Type */
  --serif: "Marcellus", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --section-y: 200px;
  --section-y-lg: 240px;
  --container: 1280px;
  --gutter: clamp(24px, 5vw, 80px);
  --nav-h: 90px;          /* approx. fixed-nav height; used to center the hero */

  /* Half the distance from a container-aligned element's left edge to the
     viewport's far-left edge. Used to nudge the logo + hero text leftward to
     the midpoint between their normal position and the screen edge. */
  --edge-shift: calc((max((100vw - var(--container)) / 2, 0px) + var(--gutter)) * 0.5);

  /* Misc */
  --radius: 4px;
  --transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  /* Slower, eased fade for CTA buttons. A languid, luxurious hover that
     lingers on the way in and the way out. */
  --transition-slow: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Reset ----- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

ul { list-style: none; }

/* ----- Typography ----- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400; /* Marcellus ships in a single weight (400); avoid faux-bold */
  line-height: 1.04;
  letter-spacing: -0.01em;
}

/* Display headlines get a hair of negative tracking and balanced line
   breaks for a composed, editorial feel. */
h1, h2 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* No italics anywhere on the site. */
em, i { font-style: normal; }

/* Editorial accent: a highlighted word inside a headline is tinted pink,
   the brand's signature flourish (upright, not italic). */
h1 em, h2 em, h3 em {
  color: var(--pink-deep);
}

h1 {
  font-size: clamp(46px, 7.5vw, 104px);
  line-height: 1.02;
}

h2 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.06;
}

h3 {
  font-size: clamp(26px, 3vw, 40px);
}

h4 {
  font-size: clamp(20px, 2vw, 26px);
}

p { font-weight: 300; color: var(--gray); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  display: inline-block;
}

/* Pink accent line */
.accent-line {
  width: 100px;
  height: 3px;
  background: var(--pink);
  border: 0;
  margin: 32px 0;
}

.accent-line.center { margin-left: auto; margin-right: auto; }

/* ----- Layout helpers ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section--lg {
  padding-top: var(--section-y-lg);
  padding-bottom: var(--section-y-lg);
}

.section--pink {
  background: linear-gradient(180deg, var(--pink-bg) 0%, #ffeaf1 100%);
}

.section--soft { background: var(--pink-bg); }

.section--black { background: var(--black); color: var(--white); }
.section--black p { color: rgba(255, 255, 255, 0.7); }
.section--black .eyebrow { color: var(--pink); }

/* ==========================================================================
   Homepage section transitions
   One continuous top-to-bottom descent: lightest pink at the hero deepening to
   the darkest (brand --pink) at the footer. Each band's top/bottom edge colour
   matches its neighbour so the seams melt together, and the mid-section
   plateaus keep each zone distinct, but the flow only ever darkens, never
   lightens. Scoped to .home so inner pages keep their flat section colours.
   Monotonic scale (top → bottom):
     #fffafc → #fff5f8 → #ffeef4 → #ffeaf1 → #ffe7f0 → #ffe1ec → #ffc4d6
   ========================================================================== */
.home .hero-band {
  background: linear-gradient(180deg, #fffafc 0%, #fff5f8 100%);
}
.home .section--pink:not(.cta-band) {           /* Services preview */
  background: linear-gradient(180deg, #fff5f8 0%, #fff5f8 35%, #ffeef4 100%);
}
.home .section--team {                          /* Meet the team */
  background: linear-gradient(180deg, #ffeef4 0%, #ffeaf1 45%, #ffeaf1 70%, #ffe7f0 100%);
}
.home .cta-band {                               /* Discovery-call CTA */
  background: linear-gradient(180deg, #ffe7f0 0%, #ffe1ec 100%);
}
/* The bands above share edge colours so their gradients melt together, which
   makes it hard to see where one section ends and the next begins. A soft
   highlight-over-shadow hairline at the top of each band (after the hero) marks
   the seam as a distinct break without breaking the continuous pink descent. */
.home .section--pink:not(.cta-band),
.home .section--team,
.home .cta-band {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 -1px 0 rgba(214, 138, 165, 0.18);
}
/* Footer keeps the header's frosted-glass look (see .footer). It is the
   bookend to the nav, so it is intentionally not part of the pink descent. */

.lead {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.6;
  color: var(--gray);
  font-weight: 300;
  max-width: 56ch;
}

.measure { max-width: 60ch; }

/* ----- Buttons & link CTAs ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 18px 38px;
  border-radius: 40px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition-slow);
  text-align: center;
}

/* All bubble CTAs share one behaviour: rest on a soft near-white so they read
   as white on the page, then a soft diagonal white→pink gradient slowly fades
   in when pressed. A delicate pink outline keeps the pale resting bubble
   defined; both rest and hover keep the same start (white) and end (pink). */
.btn--pink,
.btn--outline {
  position: relative;
  isolation: isolate;          /* so ::before z-index:-1 stays inside the button */
  overflow: hidden;            /* clips the gradient to the rounded bubble */
  background: var(--pink-bg);
  border-color: var(--pink);
  color: var(--black);
}
/* The pink layer lives on a pseudo element so opacity can fade it in slowly.
   A uniform white→pink crossfade that ends on a solid pink fill. */
.btn--pink::before,
.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pink);
  opacity: 0;
  transition: opacity var(--transition-slow);
  border-radius: inherit;
  pointer-events: none;
}
.btn--pink:hover::before,
.btn--outline:hover::before {
  opacity: 1;
}

.section--black .btn--outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.section--black .btn--outline:hover {
  background: var(--white);
  color: var(--black);
}

/* Editorial secondary CTA: sentence-case Jost with no resting underline. On
   hover, a hairline deep-rose line draws in from the left and the arrow glides
   right. Text stays black so contrast holds on any pink background. Same size
   in both states. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--black);
  padding-bottom: 8px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #8a1f44;          /* deep rose, matches the contact-panel email link */
  /* Sits full-width but scaled to nothing; on hover it scales out from centre,
     so the line opens equally to the left and right. */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .arrow {
  font-size: 16px;
  font-weight: 300;
  transition: transform var(--transition-slow);
}
.link-arrow:hover .arrow { transform: translateX(6px); }

.section--black .link-arrow { color: var(--white); border-color: var(--white); }
.section--black .link-arrow:hover { border-color: var(--pink); }

/* ==========================================================================
   Navigation
   ========================================================================== */
/* Register --nav-edge as an animatable colour so the gradient stop fades
   smoothly when JS swaps in the next section's tint (otherwise the value
   would snap, since transitions on un-registered custom properties don't
   interpolate). */
@property --nav-edge {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.85);
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Bottom edge colour of the scrolled gradient; JS swaps in the colour of
     whichever section is currently under the bar (sampled at the left gutter
     so cards and ribbons don't pollute the reading). */
  --nav-edge: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition), backdrop-filter var(--transition),
              box-shadow var(--transition), border-color var(--transition),
              padding var(--transition), --nav-edge var(--transition);
}

/* Settled state on scroll: fades further to a frosted, near-transparent white
   at the top and eases down into --nav-edge, so the bar's lower (darkest)
   side blends into the colour of the section it's currently over. It also
   shrinks a little so it recedes rather than competing for attention. */
.nav.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, var(--nav-edge) 100%);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: transparent;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
}
.nav.is-scrolled .nav__inner { padding-top: 11px; padding-bottom: 11px; }
.nav.is-scrolled .nav__logo { font-size: 23px; }

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
  transition: padding var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--black);
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* Sit halfway between its normal position and the far-left screen edge. */
  margin-left: calc(var(--edge-shift) * -1);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__links a {
  font-size: 16.5px;
  font-weight: 400;
  color: var(--black);
  position: relative;
  transition: color var(--transition-slow);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--pink);
  /* Sits full-width but scaled to nothing; opens from the centre outward. The
     header runs a touch quicker (0.8s) than the CTA fade so navigation feels
     responsive without losing the eased, languid character. */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { font-weight: 500; }

.nav__cta { white-space: nowrap; }
.nav__cta .btn { padding: 12px 26px; font-size: 14px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 26px; height: 2px;
  background: var(--black);
  transition: var(--transition);
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Image placeholders
   ========================================================================== */
.ph {
  position: relative;
  background: linear-gradient(135deg, var(--pink-bg) 0%, var(--pink) 140%);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--gray);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
/* Modifier for when a real photo is dropped into a .ph slot, kills the
   placeholder gradient + dashed inner border + label so only the image
   shows, and lets object-fit: cover crop the photo to the slot's aspect. */
.ph--photo { background: none; }
.ph--photo::before { display: none; }
.ph--photo .ph__label { display: none; }
.ph--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Eve's source has more empty space around her than Cole's, so she reads
   small at the default fit. Zoom her image 40% so her shoulders reach toward
   the frame edges, same visual density as Cole. transform-origin biased
   slightly above centre keeps her head/face in view as the image scales. */
.ph--photo img[src*="eve.png"] {
  transform: scale(1.4);
  transform-origin: 50% 30%;
  /* Override the shared 50% horizontal anchor: Eve sits slightly off-centre
     in the source, so a small nudge re-centres her between the frame edges
     so both arms are equidistant from the left/right sides. */
  object-position: 53% 0%;
}
.ph__label {
  font-size: 13px;
  letter-spacing: 0.04em;
  max-width: 80%;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.ph__label::before {
  content: "◇ IMAGE";
  display: block;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--black);
  margin-bottom: 10px;
  font-size: 11px;
}

/* Editorial badge overlay */
.badge {
  position: absolute;
  z-index: 2;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 40px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
}
.badge--tl { top: 24px; left: 24px; }
.badge--br { bottom: 24px; right: 24px; }
.badge--bl { bottom: 24px; left: 24px; }

/* ==========================================================================
   Hero: fully fluid, responsive across all viewports
   Breakpoints:  Mobile 320 to 767 · Tablet 768 to 1023 · Desktop 1024 to 1439 ·
                 Large 1440 to 1919 · Ultra-wide 1920+
   Mobile-first: base styles target the smallest screens, larger viewports
   layer enhancements via min-width queries.
   ========================================================================== */

/* Full-bleed backdrop behind the centered hero: a very faint pink that sits
   closer to white than the --pink-bg token used elsewhere. */
.hero-band { background: #fffafc; }

/* The hero borrows .container for its max-width + horizontal gutters; the
   gutter token already scales 24px → 80px which satisfies the adaptive
   horizontal padding spec (mobile 24 → ultra-wide 80). */
.hero {
  display: grid;
  grid-template-columns: 1fr;            /* stacked: content over image */
  gap: clamp(24px, 3vw, 48px);
  /* Keep the horizontal gutter inherited from .container (so the heading lines
     up with the nav logo); vertical spacing is handled per layout below. */
  padding-block: 0;
}

/* Stacked layouts (mobile/tablet): the content block alone fills the first
   screen and centers itself in the gap between the nav and the fold, so the
   space above the heading equals the space below the CTA. The image then
   flows in just below the fold. */
.hero__content {
  max-width: 640px;
  min-height: 100vh;
  min-height: 100svh;                    /* avoids mobile browser-chrome jump */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);             /* start the centering at the nav's base */
  /* Shift the hero text halfway toward the far-left edge, matching the logo.
     Uses margin (not transform) so the .reveal translateY animation is intact. */
  margin-left: calc(var(--edge-shift) * -1);
}

.hero__eyebrow {
  color: var(--gray);
  margin-bottom: clamp(16px, 2vh, 24px);
}
/* Fluid editorial headline per spec: 36 → 72px, line-height 1.1. */
.hero__content h1 {
  margin-bottom: 8px;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--black);
  text-wrap: balance;
}
/* The highlighted "Competitor" word uses --pink-deep (#f4a6bf) for readable
   contrast against the --pink-bg backdrop (--pink #ffc4d6 fails 4.5:1 here). */
.hero__content h1 em,
.hero__content h1 .accent { color: var(--pink-deep); }

/* Supporting body copy: fluid 16 → 20px, held to a readable measure. */
.hero__sub {
  margin-top: clamp(8px, 1.5vh, 16px);
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--gray);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;               /* secondary link sits below the button */
  align-items: center;                  /* and is centered under it */
  width: fit-content;                   /* shrink-wrap to the button so the group
                                           still hugs the heading's left edge */
  gap: clamp(16px, 2vh, 22px);
  margin-top: clamp(8px, 2vh, 16px);
}

/* Primary CTA: fluid horizontal padding; shares the global pink→soft-white
   hover but adds a gentle 1.02 lift unique to the hero. */
.hero__actions .btn--pink {
  padding-left: clamp(24px, 3vw, 40px);
  padding-right: clamp(24px, 3vw, 40px);
  font-size: clamp(14px, 1vw, 16px);
}

/* Secondary CTA in the hero: only positioning/size; visual behaviour comes
   from the global .link-arrow (sentence-case, hairline reveal on hover). */
.hero__actions .link-arrow {
  margin-top: 0;
  font-size: clamp(14px, 1.1vw, 16px);
}

/* ----- Visual / image side ----- */
.hero__media { display: flex; justify-content: center; width: 100%; }
.hero__figure { margin: 0; width: 100%; }

/* Image container: subtle 8% pink tint, soft border, fluid radius, and a
   pink-undertone shadow. Mobile/tablet use a 3:4 portrait. */
.hero__ph {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;                /* matches the photo's native 16:9, no crop */
  background: rgba(255, 196, 214, 0.08);
  border: 1px solid var(--border-soft);
  border-radius: clamp(16px, 2vw, 40px);
  box-shadow: 0 4px 24px rgba(255, 196, 214, 0.15);
}

/* The photo fills the frame; cover trims only the far left/right edges, keeping
   both faces centred. object-position nudges the crop toward the faces. */
.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source photo's focal subject sits right of centre, so a 50% horizontal
     crop left it visibly off-balance to the right. Anchoring at 65% pulls the
     displayed content leftward, effectively chopping a small slice off the
     left of the source, so the subject re-centres in the frame. */
  object-position: 65% 40%;
  /* Grade the photo toward the site's airy, minimal look: slightly muted,
     brighter, and a touch softer in contrast so it sits in the pale palette.
     The filter is also declared inside @keyframes heroSettle so the animation
     doesn't reset it to none for the duration of the fade. */
  filter: saturate(0.82) brightness(1.05) contrast(0.95);
  /* Cinematic settle: the image rises out of a soft blur at a 1.04 scale and
     eases into focus. Sits on top of the wrapper's .reveal translateY rise so
     the figure floats up while the photo itself comes into focus, giving the
     hero a layered, editorial entrance. */
  animation: heroSettle 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
  transform-origin: 50% 45%;
  will-change: transform, opacity, filter;
}
@keyframes heroSettle {
  from {
    opacity: 0;
    transform: scale(1.04);
    filter: saturate(0.82) brightness(1.05) contrast(0.95) blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: saturate(0.82) brightness(1.05) contrast(0.95) blur(0);
  }
}
/* A soft pink wash ties the photo into the brand's pink gradient, light enough
   to keep the image clean, just enough to drop the warm/neutral cast. */
.hero__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 245, 248, 0.18) 0%, rgba(255, 196, 214, 0.22) 100%);
  pointer-events: none;
}

/* Optional badge anchored to the image's bottom-left (currently unused). */
.hero__ph .badge {
  font-size: 11px;
  padding: 8px 16px;
}

.hero__caption {
  margin-top: 14px;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.04em;
  color: var(--gray);
  text-align: center;
}

/* ----- Tablet (768 to 1023): still stacked; content centers in the first
   screen via .hero__content, image follows below. ----- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero { gap: clamp(40px, 5vw, 56px); }
  .hero__ph { max-width: 540px; margin: 0 auto; }
}

/* ----- Desktop (1024 to 1439): two-column 45 / 55 split, vertically centered
   in the viewport (equal space above the row and below it). ----- */
@media (min-width: 1024px) {
  :root { --nav-h: 96px; }
  .hero {
    grid-template-columns: 45fr 55fr;
    /* Stretch both columns to the same height so the image fills the full
       vertical run of the content stack, top edge in line with the heading,
       bottom edge in line with the CTA, instead of leaving empty space
       beside a shorter 16:9 frame. align-content keeps the row centred in
       the viewport. */
    align-items: stretch;
    align-content: center;
    gap: clamp(48px, 5vw, 72px);
    min-height: 100vh;
    min-height: 100svh;
    /* Inherits --container (1280px) from .container so the heading's left edge
       matches the nav logo's; no custom cap here. */
    padding-top: var(--nav-h);          /* center between nav base and the fold */
    padding-bottom: 0;
  }
  /* Reset the stacked full-height behaviour; the grid handles centering now. */
  .hero__content {
    max-width: 560px;
    min-height: 0;
    display: block;
    padding-top: 0;
  }
  /* The grid stretches .hero__media to the row height; cascade that height
     down through the figure to the photo frame so the image actually fills
     the column instead of clinging to its 16:9 intrinsic height. */
  .hero__media { height: 100%; align-items: stretch; }
  .hero__figure { height: 100%; width: 100%; max-width: 720px; margin: 0 auto; }
  .hero__ph {
    aspect-ratio: auto;                 /* unlock from 16:9, height follows the content column */
    height: 100%;
    max-width: none;                    /* width cap moved to .hero__figure above */
    margin: 0;
  }
  .hero__ph .badge { font-size: 13px; padding: 10px 20px; }
  /* Comfortable tap/click height for the CTA on tablet & up. */
  .hero__actions .btn--pink { min-height: clamp(48px, 5vh, 60px); }
}

/* ----- Large desktop (1440 to 1919): enhanced spacing ----- */
@media (min-width: 1440px) {
  .hero {
    gap: clamp(72px, 6vw, 96px);
  }
  .hero__content { max-width: 600px; }
  .hero__figure { max-width: 800px; }      /* width cap; height still fills the column */
}

/* ----- Ultra-wide (1920+): max-width container, 42 / 58 premium split ----- */
@media (min-width: 1920px) {
  .hero {
    grid-template-columns: 42fr 58fr;
  }
  .hero__figure { max-width: 880px; }      /* width cap; height still fills the column */
}

/* ----- Mobile (≤767): single column, full-width stacked CTAs ----- */
@media (max-width: 767px) {
  /* Drop the full-viewport vertical-centring used on larger screens. On a
     phone that rule pushed the heading down to the mid-screen and left a
     huge empty pink stretch between the CTA and the photo. Instead, anchor
     the heading right below the fixed nav and let the image flow in just
     under the CTA stack so the whole hero reads as one connected block. */
  .hero__content {
    min-height: 0;
    display: block;
    padding-top: calc(var(--nav-h) + 16px);
    padding-bottom: 8px;
    /* The negative edge-shift trick is designed for the wide-viewport logo
       alignment; on a phone it just pulls text past the safe gutter, so the
       heading butts up against the screen edge. Reset it. */
    margin-left: 0;
  }
  /* Tighten the gap between the CTA and the image so they read as a pair,
     and add a touch of breathing room before the next section starts. */
  .hero {
    gap: clamp(24px, 6vw, 36px);
    padding-bottom: clamp(40px, 8vw, 56px);
  }
  /* Centre the image within the column with a soft inset so it doesn't run
     edge-to-edge against the screen border on mobile. */
  .hero__ph { max-width: 100%; margin: 0 auto; }

  .hero__actions {
    align-items: stretch;               /* full-width button */
    width: auto;
    gap: 16px;
  }
  /* Touch-friendly: full-width primary, ≥44px tap targets. */
  .hero__actions .btn--pink {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .hero__actions .link-arrow {
    justify-content: center;
    min-height: 44px;
  }
  .hero__ph .badge { bottom: 16px; left: 16px; }
}

/* Page hero (interior pages): composed to match the home hero's rhythm */
.page-hero {
  padding-top: 168px;
  padding-bottom: 84px;
}
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero h1 {
  max-width: 16ch;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
}
.page-hero .lead {
  margin-top: 32px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  max-width: 52ch;
}
/* Centred variant for interior page heros: add `center` to the section. The
   max-widths on the h1 (16ch) and .lead (52ch) keep the centred copy from
   sprawling across the full container width on desktop. */
.page-hero.center { text-align: center; }
.page-hero.center h1,
.page-hero.center .lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Generic grids & cards
   ========================================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 80px);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.section-head { max-width: 720px; margin-bottom: 80px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-top: 24px; }

/* Pain point / feature card */
.card {
  padding: 0;
}
.card__num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--pink-deep);
  display: block;
  margin-bottom: 20px;
}
.card__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--pink-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 26px;
}
.card h3, .card h4 { margin-bottom: 16px; }
.card p { font-size: 16px; }

/* Bordered card variant */
.card--bordered {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 44px 38px;
  transition: var(--transition-slow);
}
.card--bordered:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(244, 166, 191, 0.18);
}

/* ==========================================================================
   Solution / pillars
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-soft);
}
.pillar {
  padding: 44px 30px 44px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pillar__tag {
  font-family: var(--serif);
  font-size: 40px;
  color: var(--pink-deep);
  display: block;
  margin-bottom: 18px;
}
.pillar h4 { margin-bottom: 12px; }
.pillar p { font-size: 15px; }

/* ==========================================================================
   Home services preview: editorial menu list
   ========================================================================== */
.services-preview { gap: clamp(48px, 7vw, 110px); }
/* Shift only the "What We Do" text column left so its left edge lines up with
   the hero heading, while the service list stays on the standard right rail
   (aligned with the other sections), keeping the section balanced. */
.services-preview > :first-child {
  margin-left: calc(var(--edge-shift) * -1);
}
.services-preview__title {
  margin: 28px 0 32px;
  line-height: 1.05;
}
.services-preview__title em {
  color: var(--pink-deep);
}

.service-list { border-top: 1px solid rgba(0, 0, 0, 0.09); }
.service-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 2.5vw, 36px);
  padding: 28px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  transition: padding-left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-list li:hover { padding-left: 14px; }
.service-list__index {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--pink-deep);
  min-width: 24px;
}
.service-list__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 21px);
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 7px;
  line-height: 1.25;
}
.service-list__desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--gray);
  margin: 0;
}

/* ==========================================================================
   Home team preview: two founders, photo over bio.
   Compact so the heading + both cards fit comfortably within one viewport.
   ========================================================================== */
.section--team {
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(24px, 3vh, 40px);
}
/* Lift the heading toward the top, then push the card block down with a
   large gap so it sits lower and leaves minimal empty space at the bottom. */
.section--team .section-head {
  margin-top: -40px;
  margin-bottom: clamp(80px, 14vh, 160px);
}

.team-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
}
/* Centered portrait: a generous, softly rounded frame. Sized with a
   viewport-height cap (min(..., vh)) so the photo grows on large screens yet
   still leaves the heading + both cards on a single page on shorter laptops. */
.team-card .ph {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: min(clamp(280px, 28vw, 380px), 46vh);
  margin: 0 auto clamp(20px, 3vh, 30px);
  border-radius: 16px;
}
/* Even rhythm: the gap from name→role matches role→description. */
.team-card__name {
  text-align: center;
  margin-bottom: 12px;
}
.team-card__title {
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 12px;
}
.team-card__bio {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray);
  max-width: 44ch;
  margin-left: auto;        /* center the text block under the name/title */
  margin-right: auto;
}
@media (max-width: 720px) {
  .team-preview-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ==========================================================================
   Services detail blocks
   ========================================================================== */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border-soft);
}
/* The first block in the services list gets a matching top hairline so the
   intro and Service 1 are separated by the same divider used between every
   subsequent pair of services. */
.service-block:first-child { border-top: 1px solid var(--border-soft); }
.service-block:nth-child(even) .service-block__media { order: -1; }
.service-block__media .ph { aspect-ratio: 5 / 4; border-radius: 6px; }
.service-block__index {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--pink-deep);
  margin-bottom: 18px;
  display: block;
}
.service-block h2 { font-size: clamp(34px, 4vw, 56px); margin-bottom: 24px; }
.service-block .deliverables {
  margin-top: 32px;
  display: grid;
  gap: 14px;
}
.deliverables li {
  display: flex;
  gap: 14px;
  font-size: 16px;
  color: var(--black);
  font-weight: 300;
}
.deliverables li::before {
  content: "→";
  color: var(--pink-deep);
  font-weight: 500;
}

/* ==========================================================================
   Process timeline
   ========================================================================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  counter-reset: step;
}
.timeline__step {
  position: relative;
  padding-top: 40px;
  border-top: 3px solid var(--pink);
  /* Use the standalone `scale` property (not transform: scale()) so the
     .reveal scroll-animation's transform doesn't override the hover effect.
     scale, translate, and rotate are independent of transform in modern CSS. */
  transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline__step:hover { scale: 1.05; }
.timeline__step .step-num {
  font-family: var(--serif);
  font-size: 56px;
  color: var(--pink-deep);
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}
.timeline__step h4 { margin-bottom: 12px; }
.timeline__step p { font-size: 15px; }

/* ==========================================================================
   Case studies
   ========================================================================== */
.case {
  padding: 90px 0;
  border-bottom: 1px solid var(--border-soft);
}
.case__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.case:nth-child(even) .case__media { order: -1; }
.case__media .ph { aspect-ratio: 4 / 3; border-radius: 6px; }
.case__tag {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 20px;
  display: block;
}
.case h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 24px; }
.case__meta { display: grid; gap: 18px; margin: 30px 0; }
.case__meta dt {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}
.case__meta dd { color: var(--gray); font-size: 16px; }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border-soft);
}
.metric .metric__value {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 48px);
  color: var(--black);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.metric .metric__value .pink { color: var(--pink-deep); }
.metric .metric__label { font-size: 14px; color: var(--gray); }

.pull-quote {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.3;
  color: var(--black);
  margin: 40px 0 20px;
}
.pull-quote::before { content: "“"; color: var(--pink); }
.pull-quote::after { content: "”"; color: var(--pink); }
.pull-quote__cite { display: block; margin-top: 18px; font-family: var(--sans); font-size: 14px; color: var(--gray); font-weight: 400; }

/* ==========================================================================
   Team
   ========================================================================== */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
  padding: 60px 0;
}
.founder:nth-child(even) .founder__media { order: -1; }
.founder__media .ph { aspect-ratio: 3 / 4; border-radius: 6px; }
.founder__title { color: var(--pink-deep); font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0 24px; }
.founder h3 { margin-bottom: 4px; }
.founder .resp { margin-top: 24px; }
.founder .resp dt { font-weight: 500; color: var(--black); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.founder .resp dd { color: var(--gray); font-size: 16px; }

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.value__tag { font-family: var(--serif); font-size: 40px; color: var(--pink-deep); display: block; margin-bottom: 18px; }
.value h4 { margin-bottom: 12px; }
.value p { font-size: 15px; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-slow);
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(244, 166, 191, 0.2); }
.price-card--featured {
  background: #ffeaf1;
  color: var(--black);
  border-color: var(--pink);
  transform: scale(1.03);
}
.price-card--featured:hover { transform: scale(1.03) translateY(-8px); }
.price-card--featured p,
.price-card--featured .price-card__includes li { color: var(--black); }
.price-card--featured .price-card__price { color: var(--black); }
.price-card--featured .price-card__ribbon { background: var(--white); color: #c93672; }

.price-card__ribbon {
  align-self: flex-start;
  background: var(--pink);
  color: var(--black);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 40px;
  margin-bottom: 22px;
}
/* When the ribbon sits inline with the plan name (featured tier), this
   wrapper puts them on a single horizontal row so the "Growth" heading
   aligns with the "Foundation" and "Dominance" headings on either side.
   That vertical alignment cascades to every row of content below. */
.price-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.price-card__head .price-card__name { margin-bottom: 0; }
.price-card__head .price-card__ribbon { margin-bottom: 0; align-self: center; }
.price-card__name { font-family: var(--serif); font-size: 32px; margin-bottom: 8px; }
.price-card__price { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 6px; }
.price-card__best { font-size: 14px; color: var(--gray); margin-bottom: 28px; }
.price-card--featured .price-card__best { color: var(--black); }
.price-card__includes { display: grid; gap: 14px; margin-bottom: 32px; }
.price-card__includes-head { font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }
.price-card--featured .price-card__includes-head { color: var(--black); }
.price-card__includes li { display: flex; gap: 12px; font-size: 15px; color: var(--gray); font-weight: 300; }
.price-card__includes li::before { content: "✓"; color: var(--pink-deep); font-weight: 600; }
.price-card__setup { font-size: 13px; color: var(--gray); margin-bottom: 26px; }
.price-card--featured .price-card__setup { color: var(--black); }
.price-card .btn { margin-top: auto; justify-content: center; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border-soft); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--black);
  padding: 32px 50px 32px 0;
  cursor: pointer;
  position: relative;
  display: flex;
}
.faq__q::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 30px;
  color: var(--pink-deep);
  transition: transform var(--transition);
}
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}
.faq__a p { padding: 0 50px 32px 0; font-size: 17px; }

/* ==========================================================================
   Trust indicators
   ========================================================================== */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.trust__item {
  text-align: center;
  padding: 36px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}
.trust__item .mark { font-size: 30px; margin-bottom: 16px; }
.trust__item h4 { font-size: 19px; margin-bottom: 8px; }
.trust__item p { font-size: 14px; }

/* ==========================================================================
   Carousel (case studies preview)
   ========================================================================== */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 clamp(300px, 42%, 480px);
  scroll-snap-align: start;
}
.carousel__slide .ph { aspect-ratio: 4 / 3; border-radius: 6px; margin-bottom: 24px; }
.carousel__slide .tag { color: var(--pink-deep); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.carousel__slide h3 { font-size: 28px; margin: 12px 0 16px; }
.carousel__nav { display: flex; gap: 14px; margin-top: 30px; }
.carousel__btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: none;
  cursor: pointer;
  font-size: 20px;
  transition: var(--transition-slow);
  display: flex; align-items: center; justify-content: center;
}
.carousel__btn:hover { background: var(--black); color: var(--white); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  text-align: center;
  /* Soft pink gradient, light enough to stay airy, but distinct from the
     lighter "Meet the Team" (--pink-bg) section directly above it. */
  background: linear-gradient(180deg, #ffeef4 0%, #ffd8e4 100%);
}
.cta-band h2 { max-width: 18ch; margin: 0 auto 28px; }
.cta-band .lead { margin: 0 auto 44px; }
.cta-band__actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.contact-form { width: 100%; }
.form-field { margin-bottom: 26px; }
.form-field label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 10px;
}
.form-field label .req { color: var(--pink-deep); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--black);
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 4px rgba(255, 196, 214, 0.3);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #d65a7a; }
.form-error { display: none; color: #c0395a; font-size: 13px; margin-top: 8px; }
.form-field.has-error .form-error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.privacy-note { font-size: 13px; color: var(--gray); margin-top: 18px; line-height: 1.6; }
.form-success {
  display: none;
  background: var(--pink-bg);
  border: 1px solid var(--pink);
  border-radius: 8px;
  padding: 22px 26px;
  margin-top: 24px;
  color: var(--black);
  font-size: 16px;
}
.form-success.is-visible { display: block; }

.info-panel {
  background: linear-gradient(180deg, var(--pink-bg) 0%, #ffeef4 100%);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: clamp(32px, 4vw, 48px);
  box-shadow: 0 10px 40px rgba(244, 166, 191, 0.12);
}
/* On desktop the panel trails the form as you scroll, keeping the CTA in view. */
@media (min-width: 901px) {
  .info-panel { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.info-panel h3 { margin-bottom: 14px; }
.info-panel__intro { margin-bottom: 24px; color: var(--gray); }
.info-panel__list { display: grid; gap: 14px; margin-bottom: 32px; }
.info-panel__details {
  display: grid;
  gap: 26px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}
.info-block { margin: 0; }
.info-block dt { font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.info-block dd { color: var(--gray); font-size: 16px; }
/* Dark rose instead of --pink-deep (a light pink) so the email stays readable
   against the panel's pink gradient background. */
.info-block a { color: #8a1f44; border-bottom: 1px solid var(--pink); transition: border-color var(--transition-slow); }
.info-block a:hover { border-color: #8a1f44; }

/* Stack the form and panel on tablet & down so neither column gets cramped;
   the "Book Your Discovery Call" panel then sits directly under the form. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

.map-strip {
  margin-top: 60px;
  background: var(--pink-bg);
  border-radius: 12px;
  padding: 50px;
  text-align: center;
}
.map-strip p { font-size: clamp(18px, 2vw, 24px); color: var(--black); font-weight: 300; max-width: 60ch; margin: 0 auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer mirrors the header's frosted light/pink/black palette and is kept
   compact so it reads as a closing band rather than a full screen. It fades
   up via the shared .reveal mechanism when scrolled into view. */
.footer {
  position: relative;
  /* Mirrors the header: frosted translucent glass, hairline edge, and a soft
     lift so the footer bookends the page with the same aesthetic as the nav. */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  color: var(--black);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.04);
  padding: 34px 0 20px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.footer__logo { display: inline-block; font-family: var(--serif); font-size: 24px; margin-bottom: 48px; color: var(--black); }
.footer__top p { color: var(--black); font-size: 14px; max-width: 34ch; }
.footer__col h4 { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 12px; }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a {
  position: relative;
  display: inline-block;
  color: var(--black);
  font-size: 14px;
}
/* Animated pink underline on hover, opens from the centre outward, matching
   the nav links and the secondary .link-arrow flourish. */
.footer__col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.footer__col a:hover::after { transform: scaleX(1); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__bottom p { color: var(--black); font-size: 13px; }

/* Legal links sit opposite the copyright line on the right. They open in-page
   modal "tabs" (Privacy Policy / Terms of Use) rather than navigating away. */
.footer__legal {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer__legal-link {
  position: relative;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--black);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1.7;
}
.footer__legal-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-slow);
}
.footer__legal-link:hover::after,
.footer__legal-link:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   Legal modal ("tab on the page")
   A frosted overlay with a centered editorial panel. The matching palette and
   serif headings keep it consistent with the rest of the site.
   ========================================================================== */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.legal-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.legal-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(16px) scale(0.985);
  transition: transform var(--transition);
}
.legal-modal.is-open .legal-modal__panel { transform: translateY(0) scale(1); }
.legal-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(24px, 4vw, 40px) 18px;
  border-bottom: 1px solid var(--border-soft);
}
.legal-modal__head .eyebrow { margin-bottom: 8px; display: block; }
.legal-modal__title { font-size: clamp(26px, 4vw, 34px); }
.legal-modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--black);
  background: var(--pink-bg);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.legal-modal__close:hover { background: var(--pink); transform: rotate(90deg); }
.legal-modal__body {
  overflow-y: auto;
  padding: 24px clamp(24px, 4vw, 40px) 36px;
}
.legal-modal__body h3 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 24px 0 8px;
  color: var(--black);
}
.legal-modal__body h3:first-child { margin-top: 0; }
.legal-modal__body p,
.legal-modal__body li { font-size: 15px; color: var(--black); }
.legal-modal__body p { margin-bottom: 12px; }
.legal-modal__body ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; display: grid; gap: 6px; }
.legal-modal__body a { color: var(--pink-deep); text-decoration: underline; }
.legal-modal__updated {
  font-size: 13px;
  color: var(--pink-deep);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
body.legal-open { overflow: hidden; }

/* ==========================================================================
   Scroll animations
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --section-y: 140px; --section-y-lg: 160px; }
  /* Hero responsiveness is handled by its own dedicated query block above. */
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    padding: 30px var(--gutter) 40px;
    gap: 22px;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  }
  .nav.is-open .nav__cta { display: block; position: absolute; top: 100%; left: 0; right: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 40px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card--featured { transform: none; }
  .price-card--featured:hover { transform: translateY(-8px); }
  .service-block, .case__grid, .founder, .contact-grid { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-block__media,
  .case:nth-child(even) .case__media,
  .founder:nth-child(even) .founder__media { order: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .section-head { margin-bottom: 56px; }
}

@media (max-width: 480px) {
  .pillars, .values, .trust { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  /* Hero CTAs manage their own width/stacking in the hero query block. */
}