/* ==========================================================================
   NorthStar Insights — Homepage
   Desktop reference: 1440px Figma frame, 12 columns (90px), 20px gutters,
   70px side margins → 1300px content width.

   All desktop measurements are written in --u ("design pixels"): 1u = 1px at
   1440px wide, scaling down proportionally to the tablet breakpoint so the
   column relationships of the Figma frame are preserved exactly.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans-Italic-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --u: min(1px, calc(100vw / 1440));

  /* Brand */
  --burgundy: #500523;
  --burgundy-deep: #490d23;
  --gold: #cea263;
  --cream: #f2f0e8;
  --ink: #000;
  --charcoal: #1e1e1e;
  --rule: #7f7f7f;
  --white: #fff;

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-ui: var(--font-display); /* one family site-wide: Plus Jakarta Sans */

  /* Grid */
  --margin: calc(70 * var(--u));
  --gutter: calc(20 * var(--u));
  --col: calc(90 * var(--u));
  --content: calc(1300 * var(--u));

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dissolve: .6s cubic-bezier(.33, 0, .2, 1);
  --ease-editorial: cubic-bezier(.16, 1, .3, 1);
  /* Depth of the envelope point where the white section overlaps the hero video */
  --envelope: calc(80 * var(--u));
  /* Scroll reveals, timed to the reference: unhurried fade with a clear pause between stages */
  --reveal-duration: 1.5s;
  --reveal-delay: 200ms;
  --reveal-stagger: 340ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3 { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--burgundy); color: var(--white);
  font: 600 14px/1 var(--font-display); transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
.section-head { text-align: center; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.display {
  font-size: calc(72 * var(--u));
  line-height: calc(88 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy);
  text-align: center;
}
.h2 {
  font-size: calc(64 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--burgundy);
}
.h2--light { color: var(--white); font-weight: 400; }
.subhead {
  margin-top: calc(14 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  color: var(--burgundy);
}
.lead {
  font-size: calc(28 * var(--u));
  line-height: calc(39 * var(--u));
  font-weight: 400;
  color: var(--ink);
}
.body-copy {
  font-size: calc(24 * var(--u));
  line-height: calc(34 * var(--u));
  font-weight: 400;
  color: var(--ink);
}
.section-head__copy { margin: calc(14 * var(--u)) auto 0; max-width: calc(1210 * var(--u)); }

/* --------------------------------------------------------------------------
   CTA — arrow + uppercase label, underline reveals on hover
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  color: var(--burgundy);
  font-family: var(--font-ui);
  font-size: calc(18 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.cta__arrow {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  transition: transform .45s var(--ease-out);
}
.cta__label { position: relative; padding-block: calc(4 * var(--u)); }
.cta__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translate(2px, -2px); }
.cta:hover .cta__label::after, .cta:focus-visible .cta__label::after { transform: scaleX(1); }

/* Inline text link — "Read the case ›", "See how we work ›" */
.text-link {
  display: inline-flex; align-items: center;
  gap: calc(14 * var(--u));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  color: var(--charcoal);
  transition: color .45s var(--ease-out);
}
.text-link--light { color: var(--white); }
.text-link__label { position: relative; }
.text-link__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.text-link__chev {
  width: calc(7 * var(--u)); height: calc(12 * var(--u));
  transition: transform .45s var(--ease-out);
}
.text-link:hover .text-link__label::after,
a:hover > .text-link .text-link__label::after,
a:focus-visible > .text-link .text-link__label::after { transform: scaleX(1); }
.text-link:hover .text-link__chev,
a:hover > .text-link .text-link__chev,
a:focus-visible > .text-link .text-link__chev { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Scroll-triggered entrance: text moves in from the left
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(calc(-90 * var(--u)), 0, 0);
  transition:
    opacity calc(var(--reveal-duration) * .9) ease-out calc(var(--d, 0) * var(--reveal-stagger) + var(--reveal-delay)),
    transform calc(var(--reveal-duration) * 1.1) var(--ease-editorial) calc(var(--d, 0) * var(--reveal-stagger) + var(--reveal-delay));
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Header & navigation — sticky. Starts as the light veil over the page top;
   once scrolled it settles onto a solid ivory bar with a fine rule.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(88 * var(--u));
  background-color: rgba(255, 255, 255, 0);
  background-image: linear-gradient(180deg, rgba(80, 5, 35, .19) 0%, rgba(80, 5, 35, .12) 46%, rgba(80, 5, 35, .02) 90%, rgba(80, 5, 35, 0) 100%);
  box-shadow: 0 1px 0 rgba(80, 5, 35, 0);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background-color .6s ease, box-shadow .6s ease, opacity 1s ease, transform 1s var(--ease-editorial);
}
.site-header.is-scrolled {
  background-color: rgba(250, 248, 244, .94);
  box-shadow: 0 1px 0 rgba(80, 5, 35, .1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex; align-items: flex-start;
  height: 100%;
  padding-left: var(--margin);
}
.site-header__logo { margin-top: calc(20 * var(--u)); flex: none; }
.site-header__logo img { width: calc(231 * var(--u)); height: auto; }

.primary-nav { display: flex; align-items: flex-start; margin-left: auto; height: 100%; }
.primary-nav__list {
  display: flex;
  gap: calc(89 * var(--u));
  margin-right: calc(46 * var(--u));
  padding-top: calc(27 * var(--u));
}
.nav-link {
  position: relative; display: block;
  font-family: var(--font-ui);
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--burgundy);
  transition: color .35s var(--ease-out);
}
/* Hover: the NorthStar mark rises in beneath the label */
.nav-link__star {
  position: absolute; left: 50%; top: calc(100% + 9 * var(--u));
  width: calc(14 * var(--u)); height: calc(13 * var(--u));
  fill: var(--burgundy);
  opacity: 0;
  transform: translate(-50%, -6px) scale(.4) rotate(-45deg);
  transition: opacity .3s ease, transform .55s var(--ease-out);
}
.nav-link:hover .nav-link__star,
.nav-link:focus-visible .nav-link__star,
.nav-link[aria-current] .nav-link__star { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }

.nav-contact {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  width: calc(270 * var(--u)); height: calc(80 * var(--u));
  padding: 0 0 calc(4 * var(--u)) calc(48 * var(--u));
  font-family: var(--font-ui);
  font-size: calc(18 * var(--u));
  text-transform: uppercase;
  color: var(--burgundy);
  background-color: rgba(80, 5, 35, 0);
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.nav-contact__arrow { width: calc(19 * var(--u)); height: calc(19 * var(--u)); transition: transform .45s var(--ease-out); }
.nav-contact__label { position: relative; padding-block: 3px; }
.nav-contact__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.nav-contact:hover, .nav-contact:focus-visible, .nav-contact[aria-current="page"] { background-color: rgba(80, 5, 35, .6); color: #f3e7ea; }
.nav-contact:hover .nav-contact__arrow, .nav-contact:focus-visible .nav-contact__arrow { transform: translate(2px, -2px); }
.nav-contact:hover .nav-contact__label::after, .nav-contact:focus-visible .nav-contact__label::after { transform: scaleX(1); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   01 Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* 895px tall at 1440 wide; never taller than the screen on wide displays */
  height: min(calc(100vw * 895 / 1440), max(100svh, 640px));
  background: var(--cream);
  overflow: hidden;
}
/* Parallax: the video drifts down more slowly than the page (js/main.js sets --parallax) */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   02 Intro
   -------------------------------------------------------------------------- */
.intro { padding-top: calc(139 * var(--u)); }
/* The white section rises over the hero; its top edge is the envelope point */
.hero + .intro {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--envelope));
  padding-top: calc(139 * var(--u) + var(--envelope));
  background: var(--white);
  clip-path: polygon(0 0, 50% var(--envelope), 100% 0, 100% 100%, 0 100%);
}
.intro__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro__star {
  width: calc(155 * var(--u)); height: auto; aspect-ratio: 19.55 / 18.64;
  overflow: visible;
  margin-bottom: calc(22 * var(--u));
}
/* Line-draw: each outline is normalised to pathLength 1 and revealed by its dash offset */
.intro__star path {
  fill: none; stroke: var(--burgundy); stroke-width: .16;
  stroke-linejoin: miter; stroke-dasharray: 1 1;
}
.js .intro__star path { stroke-dashoffset: 1; transition: stroke-dashoffset 3.6s cubic-bezier(.45, 0, .25, 1) .25s; }
.js .intro__star.is-in path { stroke-dashoffset: 0; }

.intro__lead { margin-top: calc(18 * var(--u)); max-width: calc(1250 * var(--u)); }
.intro .cta { margin-top: calc(83 * var(--u)); }

/* --------------------------------------------------------------------------
   03 Advisors — pinned while the track scrolls horizontally
   -------------------------------------------------------------------------- */
.advisors { position: relative; padding-top: calc(118 * var(--u)); }
.advisors__pin { position: relative; }
.advisors.is-pinned { box-sizing: border-box; }
.advisors.is-pinned .advisors__pin { position: sticky; top: var(--pin-top, 0px); }
.advisors__viewport {
  margin-top: calc(84 * var(--u));
  padding-left: var(--margin);
  overflow: hidden;
}
@media (min-width: 1440px) {
  .advisors__viewport { padding-left: calc((100vw - 1300px) / 2); }
}
.advisors__track {
  display: flex; gap: calc(20 * var(--u));
  width: max-content;
  will-change: transform;
}
.advisor-card {
  position: relative; flex: none;
  height: calc(364 * var(--u));
  overflow: hidden;
  background: #efe6da;
  cursor: pointer;
  outline-offset: -3px;
}
.advisor-card img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  filter: grayscale(0);
  transition: filter .8s var(--ease-out), transform 1s var(--ease-out);
}
.advisor-card::after {
  content: ""; position: absolute; inset: 40% 0 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 100%);
  opacity: 0; transition: opacity .7s var(--ease-out);
  pointer-events: none;
}
.advisor-card__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 calc(10 * var(--u)) calc(14 * var(--u));
  text-align: center; color: var(--white);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s ease;
}
.advisor-card__name { font-size: calc(26 * var(--u)); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.advisor-card__role { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.3; font-weight: 400; letter-spacing: .01em; }
.advisor-card:hover img, .advisor-card:focus-visible img, .advisor-card.is-active img { filter: grayscale(1); transform: scale(1.07); }
.advisor-card:hover::after, .advisor-card:focus-visible::after, .advisor-card.is-active::after { opacity: 1; }
.advisor-card:hover .advisor-card__meta, .advisor-card:focus-visible .advisor-card__meta, .advisor-card.is-active .advisor-card__meta { transform: none; opacity: 1; }

.advisors__cta { text-align: center; padding-top: calc(55 * var(--u)); }

/* --------------------------------------------------------------------------
   04 The Pillars
   -------------------------------------------------------------------------- */
.pillars { padding-top: calc(91 * var(--u)); }
.pillars__intro { max-width: calc(1220 * var(--u)); }

.pillars__stage {
  position: relative;
  margin-top: calc(40 * var(--u));
  height: calc(100vw * 729 / 1440);
  max-height: 729px;
}
@media (min-width: 1440px) { .pillars__stage { height: 729px; } }
.pillars__left {
  position: absolute; inset: 0 auto 0 0;
  width: 50%;
  padding-left: var(--margin);
}
@media (min-width: 1440px) { .pillars__left { padding-left: calc((100vw - 1300px) / 2); } }

/* Stacked in one grid cell so the layout never jumps between pillars */
/* Centred in a fixed band above the tabs: a longer headline grows in both directions, as in the reference */
.pillars__headlines { display: grid; align-items: center; margin-top: calc(60 * var(--u)); height: calc(313 * var(--u)); }
.pillars__headline {
  grid-area: 1 / 1;
  font-size: calc(60 * var(--u));
  line-height: calc(71 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--burgundy);
  opacity: 0;
  transition: opacity var(--dissolve);
  pointer-events: none;
}
.pillars__headline.is-active { opacity: 1; pointer-events: auto; }

.pillar-tabs {
  position: absolute; left: var(--margin); top: calc(394 * var(--u));
  width: calc(530 * var(--u));
}
@media (min-width: 1440px) { .pillar-tabs { left: calc((100vw - 1300px) / 2); } }
.pillar-tab {
  position: relative; display: flex; align-items: center;
  width: 100%;
  height: calc(66 * var(--u));
  padding: 0 0 calc(4 * var(--u)) 0;
  font-family: var(--font-ui);
  font-size: calc(26 * var(--u));
  color: var(--charcoal);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .6s cubic-bezier(.33, 0, .2, 1), color .6s ease;
}
.pillar-tab:first-of-type { height: calc(58 * var(--u)); }
.pillar-tab:hover { color: var(--burgundy); }
.pillar-tab.is-active {
  padding-left: calc(35 * var(--u));
  color: var(--burgundy);
  font-weight: 700;
  border-bottom-color: var(--charcoal);
}
/* The travelling NorthStar pointer */
.pillar-tabs__pointer {
  position: absolute; left: 0; top: 0;
  width: calc(20 * var(--u)); height: calc(19 * var(--u));
  fill: var(--burgundy);
  transform: translateY(var(--pointer-y, 0px));
  transition: transform .6s cubic-bezier(.45, 0, .2, 1);
  pointer-events: none;
}

.pillar-panel {
  position: absolute; top: 0; right: 0;
  width: calc(100% * 729 / 1440);
  height: 100%;
  outline: none;
}
@media (min-width: 1440px) { .pillar-panel { width: 729px; } }
.pillar-panel__media { position: absolute; inset: 0; overflow: hidden; }
/* Supplied images carry a 21px transparent strip with a baked pointer notch;
   it is cropped here and replaced by one live notch that travels with the tabs. */
.pillar-panel__img {
  position: absolute; top: 0; right: 0;
  width: calc(100% * 750 / 729); height: 100%;
  max-width: none;
  object-fit: cover; object-position: right center;
  opacity: 0;
  transition: opacity var(--dissolve);
}
.pillar-panel__img.is-active { opacity: 1; }
/* One notch per tab: the old one fades out as the new one fades in */
.pillar-panel__notch {
  position: absolute; z-index: 2;
  left: calc(-21 * var(--u)); top: 0;
  width: calc(22 * var(--u)); height: calc(42 * var(--u));
  background: var(--notch, #4b021e);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: translateY(calc(var(--notch-y, 0px) - 50%));
  opacity: 0;
  transition: opacity var(--dissolve);
}
.pillar-panel__notch.is-active { opacity: 1; }
.pillar-panel__copy {
  position: absolute; z-index: 3;
  left: calc(69 * var(--u)); right: calc(80 * var(--u)); bottom: calc(47 * var(--u));
  display: grid; align-items: end;
}
.pillar-panel__text {
  grid-area: 1 / 1;
  color: var(--white);
  opacity: 0;
  transition: opacity var(--dissolve), visibility 0s linear .6s;
  pointer-events: none;
}
.pillar-panel__text[hidden] { display: block; visibility: hidden; }
.pillar-panel__text.is-active {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity var(--dissolve), visibility 0s;
}
.pillar-panel__text p {
  font-size: calc(28 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 400;
}
.pillar-panel__text .text-link { margin-top: calc(31 * var(--u)); font-size: calc(18 * var(--u)); gap: calc(12 * var(--u)); }

/* --------------------------------------------------------------------------
   05 The Engine
   -------------------------------------------------------------------------- */
.engine { padding-top: calc(124 * var(--u)); }
.engine .subhead { margin-top: calc(7 * var(--u)); }
.engine__grid {
  display: grid;
  grid-template-columns: calc(640 * var(--u)) 1fr;
  column-gap: calc(27 * var(--u));
  margin-top: calc(31 * var(--u));
}
.engine__media { background: var(--cream); aspect-ratio: 860 / 530; overflow: hidden; }
.engine__video { width: 100%; height: 100%; object-fit: cover; }
.engine__copy { padding-top: calc(3 * var(--u)); max-width: calc(625 * var(--u)); }
.engine__copy p + p { margin-top: calc(34 * var(--u)); }
.engine__cta { text-align: center; padding-top: calc(44 * var(--u)); }

/* --------------------------------------------------------------------------
   06 Recent Highlights
   -------------------------------------------------------------------------- */
.highlights {
  position: relative;
  margin-top: calc(85 * var(--u));
  min-height: calc(min(100vw, 1440px) * 824 / 1440);
  color: var(--white);
  overflow: hidden;
  background: #3a0d18;
}
.highlights__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.highlights__inner { position: relative; padding-top: calc(59 * var(--u)); padding-bottom: calc(99 * var(--u)); text-align: center; }
.highlights__grid {
  display: grid;
  grid-template-columns: calc(640 * var(--u)) calc(634 * var(--u));
  column-gap: calc(25 * var(--u));
  margin-top: calc(61 * var(--u));
  text-align: left;
}

.case-card {
  position: relative; display: block; overflow: hidden;
  background: var(--white);
  color: var(--charcoal);
  transition: background-color .55s var(--ease-out), color .55s var(--ease-out);
}
.case-card__text { font-weight: 400; transition: color .55s var(--ease-out); }
.case-card__arrow {
  position: absolute; right: 0; bottom: 0;
  fill: none; stroke: var(--gold); stroke-width: 1.4;
  overflow: visible;
  transition: stroke .55s var(--ease-out);
}
.case-card__arrow .arrow-shaft { transition: transform .8s var(--ease-out); transform-origin: 180px 162px; transform-box: view-box; }
.case-card__arrow .arrow-head { transition: transform .8s var(--ease-out); transform-box: view-box; }
.case-card:hover, .case-card:focus-visible { background: var(--gold); color: var(--white); }
.case-card:hover .text-link, .case-card:focus-visible .text-link { color: var(--white); }
.case-card:hover .case-card__arrow, .case-card:focus-visible .case-card__arrow { stroke: var(--white); }
.case-card:hover .arrow-shaft, .case-card:focus-visible .arrow-shaft { transform: translate(-6px, -6px); }
.case-card:hover .arrow-head, .case-card:focus-visible .arrow-head { transform: translate(4px, 4px); }

.case-card--feature {
  height: calc(528 * var(--u));
  padding: calc(73 * var(--u)) calc(60 * var(--u)) 0 calc(55 * var(--u));
}
.case-card--feature .case-card__text { font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); }
.case-card--feature .text-link { margin-top: calc(40 * var(--u)); }
.case-card--feature .case-card__arrow { width: calc(182 * var(--u)); height: calc(182 * var(--u)); }

.case-card--secondary {
  height: calc(261 * var(--u));
  padding: calc(41 * var(--u)) calc(46 * var(--u)) 0 calc(33 * var(--u));
}
.case-card--secondary .case-card__text { font-size: calc(26 * var(--u)); line-height: calc(33 * var(--u)); }
.case-card--secondary .text-link { margin-top: calc(25 * var(--u)); }
.case-card--secondary .case-card__arrow { width: calc(108 * var(--u)); height: calc(108 * var(--u)); }

.case-list {
  display: grid;
  grid-template-columns: calc(200 * var(--u)) calc(240 * var(--u)) 1fr;
  margin-top: calc(32 * var(--u));
  height: calc(235 * var(--u));
}
.case-list li { position: relative; }
.case-list li + li { border-left: 1px solid rgba(255, 255, 255, .7); padding-left: calc(20 * var(--u)); }
.case-list li:nth-child(1) { padding-right: calc(15 * var(--u)); }
.case-list li:nth-child(2) { padding-right: calc(35 * var(--u)); }
.case-item {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%;
  color: var(--white);
}
.case-item p { font-size: calc(18 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 400; }
.case-item .text-link { font-size: calc(16 * var(--u)); gap: calc(14 * var(--u)); padding-bottom: 2px; }

/* --------------------------------------------------------------------------
   07 Where We Work
   -------------------------------------------------------------------------- */
.offices { padding-top: calc(83 * var(--u)); background: var(--white); }
.offices__head .subhead { margin-top: calc(5 * var(--u)); }
.offices__stage {
  position: relative;
  margin-top: calc(40 * var(--u));
  height: calc(min(100vw, 1440px) * 1074 / 1440);
  min-height: 560px;
  color: var(--white);
  overflow: hidden;
}
.offices__media { position: absolute; inset: 0; background: var(--burgundy-deep); }
.offices__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.1s ease, transform 1.8s var(--ease-out);
}
.offices__img.is-active { opacity: 1; transform: none; z-index: 1; }
/* Fade from the white page above and into the burgundy footer below */
.offices__media::before, .offices__media::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.offices__media::before { top: 0; height: 13%; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%); }
.offices__media::after {
  bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(73, 13, 35, 0) 0%, rgba(73, 13, 35, .25) 35%, rgba(73, 13, 35, .78) 70%, var(--burgundy-deep) 92%);
}
.offices__titles { position: absolute; inset: 0; z-index: 3; display: grid; place-items: start center; padding-top: calc(363 * var(--u)); pointer-events: none; }
.offices__title {
  grid-area: 1 / 1;
  font-size: calc(200 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(calc(18 * var(--u)));
  transition: opacity .6s ease, transform .9s var(--ease-out);
}
.offices__title.is-active { opacity: 1; transform: none; transition: opacity .9s ease .25s, transform 1.1s var(--ease-out) .25s; }
.offices__bottom { position: absolute; left: 0; right: 0; bottom: calc(125 * var(--u)); z-index: 3; text-align: center; }
.office-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.office-tab {
  padding: 0 0 calc(10 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(38 * var(--u));
  font-weight: 400;
  color: rgba(255, 255, 255, .92);
  transition: color .3s ease;
}
.office-tab:hover, .office-tab.is-active { color: var(--white); }
.office-tabs__indicator {
  position: absolute; left: 0; bottom: 0;
  width: 25%; height: 2px;
  background: var(--white);
  transform: translateX(calc(var(--office-index, 0) * 100%));
  transition: transform .8s var(--ease-in-out);
}
.offices__tagline {
  margin-top: calc(61 * var(--u));
  font-size: calc(28 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 600;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--burgundy-deep); color: var(--white); padding: calc(43 * var(--u)) 0 calc(64 * var(--u)); margin-top: -1px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: calc(660 * var(--u)) calc(220 * var(--u)) 1fr;
  align-items: start;
}
.site-footer__logo img { width: calc(420 * var(--u)); height: auto; margin-left: calc(3 * var(--u)); filter: brightness(0) invert(1); }
.site-footer__cities { margin: calc(14 * var(--u)) 0 0 calc(92 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.2; font-weight: 400; letter-spacing: .01em; }
.site-footer__tagline { margin: calc(46 * var(--u)) 0 0 calc(6 * var(--u)); max-width: calc(430 * var(--u)); font-family: var(--font-ui); font-size: calc(21 * var(--u)); line-height: calc(35 * var(--u)); }
.site-footer__col { padding-top: calc(35 * var(--u)); padding-left: calc(6 * var(--u)); }
.site-footer__heading { font-family: var(--font-ui); font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1.2; margin-bottom: calc(30 * var(--u)); }
.site-footer__col li + li { margin-top: calc(18 * var(--u)); }
.footer-link {
  position: relative;
  font-family: var(--font-ui); font-size: calc(18 * var(--u)); line-height: 1.2;
  color: var(--white);
}
.footer-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.footer-link:hover::after, .footer-link:focus-visible::after { transform: scaleX(1); }
.site-footer__copy { grid-column: 2 / -1; margin-top: calc(40 * var(--u)); padding-left: calc(6 * var(--u)); font-family: var(--font-ui); font-size: calc(15 * var(--u)); }

/* ==========================================================================
   Tablet (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --u: 1px; --margin: 40px; }

  .display { font-size: 52px; line-height: 62px; }
  .h2 { font-size: 48px; line-height: 58px; }
  .subhead { font-size: 22px; line-height: 30px; margin-top: 16px; }
  .lead { font-size: 22px; line-height: 32px; }
  .body-copy { font-size: 19px; line-height: 28px; }
  .cta { font-size: 15px; }
  .text-link { font-size: 17px; }

  /* Header */
  .site-header { height: 72px; }
  .site-header__inner { align-items: center; padding-right: 0; }
  .site-header__logo { margin-top: 0; }
  .site-header__logo img { width: 180px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    margin-left: auto; width: 72px; height: 72px; padding: 0 24px;
  }
  .nav-toggle__bar { display: block; height: 2px; background: var(--burgundy); transition: transform .4s var(--ease-out); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .primary-nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; height: auto;
    background: var(--cream);
    border-top: 1px solid rgba(80, 5, 35, .12);
    box-shadow: 0 18px 30px -20px rgba(80, 5, 35, .4);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .35s ease, transform .45s var(--ease-out), visibility 0s linear .45s;
  }
  .site-header.is-open .primary-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .primary-nav__list { flex-direction: column; gap: 0; margin: 0; padding: 8px 0; }
  .nav-link { padding: 16px var(--margin); font-size: 20px; line-height: 24px; }
  .nav-link__star { top: 50%; left: auto; right: var(--margin); transform: translate(0, -50%) scale(.4) rotate(-45deg); width: 14px; height: 13px; }
  .nav-link:hover .nav-link__star, .nav-link:focus-visible .nav-link__star, .nav-link[aria-current] .nav-link__star { transform: translate(0, -50%) scale(1); }
  .nav-contact { width: auto; height: 64px; padding-left: var(--margin); font-size: 17px; background: rgba(80, 5, 35, .06); }
  .nav-contact__arrow { width: 17px; height: 17px; }

  :root { --envelope: calc(min(78vw, 82svh) * .07); }
  .hero { height: min(78vw, 82svh); }

  .intro { padding-top: 96px; }
  .hero + .intro { padding-top: calc(96px + var(--envelope)); }
  .intro__star { width: 110px; margin-bottom: 20px; }
  .intro .cta { margin-top: 48px; }

  /* Advisors — native swipe carousel */
  .advisors { padding-top: 104px; }
  .advisors.is-pinned .advisors__pin { position: relative; top: auto; }
  .advisors__viewport {
    margin-top: 48px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--margin);
    scrollbar-width: none;
  }
  .advisors__viewport::-webkit-scrollbar { display: none; }
  .advisors__track { transform: none !important; padding-right: var(--margin); }
  .advisor-card { height: 330px; width: auto !important; scroll-snap-align: start; }
  .advisor-card__name { font-size: 24px; }
  .advisor-card__role { font-size: 12px; }
  .advisors__cta { padding-top: 40px; }

  /* Pillars — stacked: tabs, then image panel */
  .pillars { padding-top: 104px; }
  .pillars__stage { height: auto; max-height: none; margin-top: 48px; display: flex; flex-direction: column; }
  .pillars__left { position: relative; width: 100%; padding: 0 var(--margin); }
  .pillars__headlines { height: auto; margin-top: 0; align-items: start; }
  .pillars__headline { font-size: 40px; line-height: 48px; }
  .pillar-tabs { position: relative; left: auto; top: auto; width: 100%; margin-top: 32px; }
  .pillar-tab { height: 58px; font-size: 21px; }
  .pillar-tab:first-of-type { height: 58px; }
  .pillar-tab.is-active { padding-left: 32px; }
  .pillar-tabs__pointer { width: 18px; height: 17px; }
  .pillar-panel { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 720px; margin-top: 40px; }
  .pillar-panel__notch { display: none; }
  .pillar-panel__img { width: calc(100% * 750 / 729); }
  .pillar-panel__copy { left: var(--margin); right: var(--margin); bottom: 40px; }
  .pillar-panel__text p { font-size: 21px; line-height: 29px; }
  .pillar-panel__text .text-link { margin-top: 22px; font-size: 16px; }

  .engine { padding-top: 104px; }
  .engine__grid { grid-template-columns: 1fr; row-gap: 32px; margin-top: 32px; }
  .engine__copy { max-width: none; }
  .engine__copy p + p { margin-top: 24px; }
  .engine__cta { padding-top: 40px; }

  .highlights { margin-top: 88px; min-height: 0; }
  .highlights__inner { padding: 64px var(--margin) 72px; }
  .highlights__grid { grid-template-columns: 1fr; row-gap: 20px; margin-top: 40px; }
  .case-card--feature { height: auto; min-height: 360px; padding: 48px 40px 80px; }
  .case-card--feature .case-card__text { font-size: 32px; line-height: 40px; }
  .case-card--feature .case-card__arrow { width: 150px; height: 150px; }
  .case-card--secondary { height: auto; padding: 36px 40px 56px; }
  .case-card--secondary .case-card__text { font-size: 22px; line-height: 30px; }
  .case-list { grid-template-columns: repeat(3, 1fr); height: auto; margin-top: 28px; }
  .case-item { min-height: 230px; gap: 24px; padding-right: 12px; }
  .case-item p { font-size: 17px; line-height: 23px; }

  .offices { padding-top: 88px; }
  .offices__stage { height: 760px; margin-top: 40px; }
  .offices__titles { padding-top: 220px; }
  .offices__title { font-size: 110px; }
  .offices__bottom { bottom: 72px; }
  .office-tab { font-size: 24px; line-height: 30px; }
  .offices__tagline { margin-top: 44px; font-size: 21px; line-height: 28px; }

  .site-footer { padding: 48px 0 56px; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__logo img { width: 300px; margin-left: 0; }
  .site-footer__cities { margin-left: 66px; font-size: 16px; }
  .site-footer__tagline { margin: 28px 0 0; font-size: 18px; line-height: 28px; }
  .site-footer__col { padding: 0; }
  .site-footer__heading, .footer-link { font-size: 17px; }
  .site-footer__copy { grid-column: 1 / -1; margin-top: 8px; padding-left: 0; font-size: 14px; }
}

/* ==========================================================================
   Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --margin: 20px; }

  .display { font-size: 34px; line-height: 42px; }
  .display br { display: none; }
  .h2 { font-size: 38px; line-height: 46px; }
  .subhead { font-size: 19px; line-height: 26px; }
  .lead { font-size: 18px; line-height: 27px; }
  .body-copy { font-size: 17px; line-height: 26px; }
  .section-head__copy br { display: none; }

  .site-header__logo img { width: 150px; }
  .site-header { height: 64px; }
  .nav-toggle { width: 64px; height: 64px; padding: 0 20px; }
  .primary-nav { top: 64px; }

  /* The video carries its own centred statements (~62% of its width): size it
     so they always fit the phone width instead of being cropped by `cover`. */
  :root { --envelope: calc((145vw * 9 / 16 + 52px) * .08); }
  .hero { height: calc(145vw * 9 / 16 + 52px); }
  .hero__video {
    top: 52px; left: 50%; right: auto; bottom: auto;
    width: 145vw; max-width: none; height: auto;
    aspect-ratio: 16 / 9; object-fit: cover;
    transform: translate3d(-50%, var(--parallax, 0px), 0);
  }

  .intro { padding-top: 72px; }
  .hero + .intro { padding-top: calc(72px + var(--envelope)); }
  .intro__star { width: 84px; }
  .intro .cta { margin-top: 36px; }

  .advisors { padding-top: 88px; }
  .advisors__viewport { margin-top: 36px; }
  .advisor-card { height: 300px; }

  .pillars { padding-top: 88px; }
  .pillars__headline { font-size: 32px; line-height: 39px; }
  .pillar-tab { height: 54px; font-size: 19px; }
  .pillar-tab:first-of-type { height: 54px; }
  .pillar-panel { aspect-ratio: 4 / 5; }
  .pillar-panel__copy { bottom: 28px; }
  .pillar-panel__text p { font-size: 17px; line-height: 24px; }

  .engine { padding-top: 88px; }

  .highlights { margin-top: 72px; }
  .highlights__inner { padding: 56px var(--margin) 56px; }
  .case-card--feature { min-height: 0; padding: 36px 24px 110px; }
  .case-card--feature .case-card__text { font-size: 26px; line-height: 33px; }
  .case-card--feature .case-card__arrow { width: 110px; height: 110px; }
  .case-card--secondary { padding: 28px 24px 80px; }
  .case-card--secondary .case-card__text { font-size: 20px; line-height: 27px; }
  .case-card--secondary .case-card__arrow { width: 80px; height: 80px; }
  .case-list { grid-template-columns: 1fr; row-gap: 0; }
  .case-list li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .5); padding-left: 0; }
  .case-list li:nth-child(1), .case-list li:nth-child(2) { padding-right: 0; }
  .case-item { min-height: 0; padding: 22px 12px 22px 0; gap: 18px; }

  .offices { padding-top: 72px; }
  .offices__stage { height: 620px; min-height: 0; }
  .offices__img { object-position: 55% center; }
  .offices__titles { padding-top: 190px; }
  .offices__title { font-size: 64px; }
  .offices__bottom { bottom: 48px; }
  .office-tab { font-size: 18px; line-height: 24px; padding-bottom: 10px; }
  .offices__tagline { margin-top: 32px; font-size: 18px; line-height: 25px; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__logo img { width: 230px; }
  .site-footer__cities { margin-left: 50px; font-size: 13px; }
  .site-footer__tagline { font-size: 17px; line-height: 26px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .intro__star path { stroke-dashoffset: 0; transition: none; }
  .offices__img, .advisor-card img { transform: none !important; }
  .pillar-tabs__pointer, .pillar-panel__notch, .office-tabs__indicator { transition-duration: .01ms; }
}

/* ==========================================================================
   Global page transition — a NorthStar curtain (after hawthornadvisors.com)
   Two burgundy panels sweep down over the page, the NorthStar logo settles in the
   centre, the next page loads beneath, then the panels carry on down to reveal it.
   Built from root pseudo-elements so the arriving page is covered from first paint.
     body::before  lighter wine panel (leads)
     html::before  deep burgundy panel
     html::after   NorthStar logo, centred
   ========================================================================== */
:root { --curtain-ease: cubic-bezier(.76, 0, .24, 1); }
body::before, html::before, html::after {
  content: ""; position: fixed; inset: 0;
  pointer-events: none;
  transition: none; /* idle: parked out of view, never animates back */
}
body::before { z-index: 998; background: #7a2a47; transform: translateY(-101%); }
html::before { z-index: 999; background: var(--burgundy-deep); transform: translateY(-101%); }
html::after {
  z-index: 1000;
  background: url("../assets/brand/logo-white.svg") center / clamp(170px, 19vw, 270px) auto no-repeat;
  opacity: 0; transform: scale(.94);
}
/* Leaving: panels sweep down from the top, then the logo settles in */
html.ns-leaving body::before { transform: none; transition: transform .6s var(--curtain-ease); }
html.ns-leaving::before { transform: none; pointer-events: auto; transition: transform .6s var(--curtain-ease) .08s; }
html.ns-leaving::after { opacity: 1; transform: none; transition: opacity .35s ease .45s, transform .7s var(--ease-editorial) .45s; }
/* Arriving: covered from first paint, logo showing */
html.ns-arriving body::before, html.ns-arriving::before { transform: none; }
html.ns-arriving::before { pointer-events: auto; }
html.ns-arriving::after { opacity: 1; transform: none; }
/* Revealing: logo lifts away, panels continue downwards off the page */
html.ns-revealing body::before { transform: translateY(101%); transition: transform .7s var(--curtain-ease) .3s; }
html.ns-revealing::before { transform: translateY(101%); transition: transform .7s var(--curtain-ease) .2s; }
html.ns-revealing::after { opacity: 0; transform: scale(1.03); transition: opacity .35s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  body::before, html::before, html::after { display: none; }
}

/* ==========================================================================
   Homepage opening (driven by js/opening.js)
   ========================================================================== */
html.is-opening { overflow: hidden; }
.opening {
  position: fixed; inset: 0; z-index: 900;
  background: #f5efe6; /* the hero film's ivory */
  transition: opacity .5s cubic-bezier(.33, 0, .2, 1);
}
html.is-revealed .opening { opacity: 0; }
/* Header waits until the film has opened into the page, then settles in */
html.is-opening .site-header { opacity: 0; transform: translateY(-12px); pointer-events: none; }