/* ==========================================================================
   Rise Meridian Strategies — design system
   Palette sampled directly from the RMS logo files:
     gold  #C4A058  (wordmark "STRATEGIES" + rules)
     navy  #182030  (RM monogram ground)
   ========================================================================== */

:root {
  /* Ground */
  --ink:        #0B0F16;
  --navy:       #182030;
  --navy-soft:  #1E2839;
  --navy-line:  #2B3547;

  /* Accent */
  --gold:       #C4A058;
  --gold-soft:  #D9BC7E;
  --gold-dim:   rgba(196, 160, 88, 0.28);

  /* Text on dark */
  --ivory:      #F4F1EA;   /* 14.45:1 on navy */
  --mist:       #B9C3D4;   /* 9.18:1  on navy */

  /* Light surfaces */
  --paper:      #FAF8F4;
  --paper-2:    #F1EDE4;
  --paper-line: #E2DCCF;
  --slate:      #4A5568;   /* 7.09:1 on paper */

  /* Spacing scale (density 4/10 — generous but not airy) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --container: 1180px;
  --measure: 68ch;

  --radius: 2px;
  --radius-lg: 4px;

  --t-fast: 160ms;
  --t-mid: 280ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-nav: 100;
  --z-overlay: 200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* Focus — visible on every interactive element (never removed) */
:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--space-5); } }

.section { padding-block: var(--space-6); }
@media (min-width: 768px) { .section { padding-block: var(--space-7); } }

.section--tight { padding-block: var(--space-5); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper p { color: var(--slate); }
.section--ink { background: var(--ink); }

/* Eyebrow — small gold letterspaced label, echoes "STRATEGIES" in the logo */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  max-width: 4.5rem;
  height: 1px;
  background: var(--gold-dim);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 1;
  max-width: 4.5rem;
  height: 1px;
  background: var(--gold-dim);
}
.section--paper .eyebrow { color: #8A6D1F; }
.section--paper .eyebrow::after,
.section--paper .eyebrow::before { background: rgba(138, 109, 31, 0.3); }

.h-display { font-size: clamp(2.5rem, 7vw, 4.75rem); }
.h-section  { font-size: clamp(2rem, 4.4vw, 3.125rem); }
.h-sub      { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--mist);
}
.section--paper .lede { color: var(--slate); }

.muted { color: var(--mist); }
.section--paper .muted { color: var(--slate); }

.gold { color: var(--gold); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.985); }

.btn--primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

.btn--ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--navy-line);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.section--paper .btn--ghost { color: var(--ink); border-color: var(--paper-line); }
.section--paper .btn--ghost:hover { border-color: #8A6D1F; color: #6B540F; }

.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Text link with underline that grows */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tlink:hover { border-color: var(--gold); color: var(--gold-soft); }
.section--paper .tlink { color: #8A6D1F; border-color: rgba(138,109,31,0.3); }
.section--paper .tlink:hover { color: #6B540F; border-color: #8A6D1F; }

/* --------------------------------------------------------------------------
   Wordmark (rebuilt in type so it stays crisp and recolourable)
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-decoration: none;
  line-height: 1;
}
.wordmark__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--ivory);
  white-space: nowrap;
}
.wordmark__rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.wordmark__rule::before,
.wordmark__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-dim);
}
.wordmark__sub {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.34em;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(24, 32, 48, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--navy-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 72px;
}
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) { .nav__links { display: flex; } }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9375rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--mist);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ivory); }
.nav__link[aria-current="page"] { color: var(--gold); }

.nav__cta { display: none; }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

/* Mobile toggle */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  color: var(--ivory);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--t-fast) var(--ease);
}
.nav__toggle:hover { border-color: var(--gold); }
@media (min-width: 900px) { .nav__toggle { display: none; } }

.nav__panel {
  display: none;
  border-top: 1px solid var(--navy-line);
  padding-block: var(--space-2) var(--space-3);
}
.nav__panel[data-open="true"] { display: block; }
@media (min-width: 900px) { .nav__panel { display: none !important; } }

.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel .nav__link {
  display: flex;
  padding: 0 0.5rem;
  min-height: 52px;
  font-size: 1rem;
  border-bottom: 1px solid var(--navy-line);
  border-radius: 0;
}
.nav__panel .btn { width: 100%; margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 768px) { .hero { padding-block: var(--space-8) var(--space-7); } }

/* The "M" from the logo, drawn as a vast quiet backdrop */
.hero__mark {
  position: absolute;
  top: 50%;
  right: -6%;
  translate: 0 -50%;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  opacity: 0.5;
  pointer-events: none;
}
.hero__mark svg { width: 100%; height: 100%; }

.hero__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  translate: -50% 0;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196,160,88,0.10) 0%, rgba(196,160,88,0) 62%);
  pointer-events: none;
}

.hero__grid { position: relative; display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-5); }
}

.hero__inner { position: relative; z-index: 1; max-width: 940px; }

/* A framed screenshot of real client work, floating beside the headline.
   Static CSS entrance (no IntersectionObserver) since it is already in the
   first viewport — it must never depend on JS to become visible. */
.hero__visual {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin-inline: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: hero-visual-in 900ms var(--ease) 500ms forwards;
}
@media (min-width: 900px) { .hero__visual { max-width: none; margin-inline: 0; } }
@keyframes hero-visual-in { to { opacity: 1; transform: none; } }

.hero__card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-line);
}
.hero__card--front {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  rotate: -1.25deg;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.6);
}
@media (min-width: 900px) { .hero__card--front { rotate: 1.5deg; } }

.hero__card--back {
  position: absolute;
  inset: 10% -6% -8% 10%;
  background: linear-gradient(155deg, rgba(196, 160, 88, 0.16), rgba(196, 160, 88, 0) 65%);
  rotate: -4deg;
}
@media (min-width: 900px) { .hero__card--back { rotate: 4deg; } }

.hero__card-bar {
  display: flex;
  gap: 6px;
  padding: 0.625rem 0.75rem;
  background: rgba(244, 241, 234, 0.04);
  border-bottom: 1px solid var(--navy-line);
}
.hero__card-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-line); }

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

.hero__badge {
  position: absolute;
  left: var(--space-3);
  bottom: -14px;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual { opacity: 1; transform: none; animation: none; }
}

.hero h1 {
  font-size: clamp(2.75rem, 8.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero__lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  color: var(--mist);
  max-width: 44ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-line);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.625rem; }
.hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */
.pagehead {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--navy-line);
  overflow: hidden;
}
@media (min-width: 768px) { .pagehead { padding-block: var(--space-7) var(--space-6); } }
.pagehead h1 { font-size: clamp(2.5rem, 6.5vw, 4.25rem); margin-bottom: var(--space-3); }
.pagehead .lede { max-width: 56ch; }

/* --------------------------------------------------------------------------
   Grid / cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }

.split { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-6); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  padding: var(--space-4);
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.card h3 { font-size: 1.625rem; margin-bottom: var(--space-2); }
.card p { color: var(--mist); font-size: 0.9375rem; }
.section--paper .card {
  background: #fff;
  border-color: var(--paper-line);
}
.section--paper .card p { color: var(--slate); }

.card__num {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.section--paper .card__num { color: #8A6D1F; }

.icon {
  width: 22px;
  height: 22px;
  stroke: var(--gold);
  stroke-width: 1.5;
  fill: none;
  flex: none;
}
.section--paper .icon { stroke: #8A6D1F; }

/* Offer cards (the two tiers) */
.tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .tier { padding: var(--space-5); } }
.tier__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.tier h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--space-2); }
.tier > p { color: var(--mist); font-size: 0.9375rem; }
.tier--accent { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(196,160,88,0.06), rgba(196,160,88,0) 60%), var(--navy-soft); }

.ticks { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ticks li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--mist);
}
.ticks .icon { width: 18px; height: 18px; margin-top: 0.28rem; }
.section--paper .ticks li { color: var(--slate); }

/* Numbered process */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--navy-line);
}
.step:last-child { border-bottom: 1px solid var(--navy-line); }
@media (min-width: 768px) {
  .step { grid-template-columns: 5rem minmax(0, 22ch) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
}
.step__n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold);
}
.step h3 { font-size: 1.5rem; }
.step p { color: var(--mist); font-size: 0.9375rem; margin: 0; }
.section--paper .step { border-color: var(--paper-line); }
.section--paper .step p { color: var(--slate); }
.section--paper .step__n { color: #8A6D1F; }

/* Pull quote / positioning statement */
.statement {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 4.2vw, 2.875rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.statement em { font-style: italic; color: var(--gold); }

/* Credential list */
.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.creds li {
  display: grid;
  gap: 0.375rem;
  padding-block: var(--space-3);
  border-top: 1px solid var(--navy-line);
}
.creds li:last-child { border-bottom: 1px solid var(--navy-line); }
@media (min-width: 700px) {
  .creds li { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
.creds dt, .creds__t {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.375rem;
  color: var(--ivory);
}
.creds__d { color: var(--mist); font-size: 0.9375rem; margin: 0; }
.section--paper .creds li { border-color: var(--paper-line); }
.section--paper .creds__t { color: var(--ink); }
.section--paper .creds__d { color: var(--slate); }

/* --------------------------------------------------------------------------
   Before / after comparison slider
   -------------------------------------------------------------------------- */
.ba { position: relative; }

.ba__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-line);
  background: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

/* Each photo lives in its own full-bleed layer. The wipe clips the LAYER,
   never the image, so the image can be freely scaled and offset inside it
   without the reveal position drifting. */
.ba__layer { position: absolute; inset: 0; overflow: hidden; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Registered pair: the two photos were shot from different distances and
   angles, so each is scaled and offset to put the building in the same place
   on screen. Dragging then reads as one building changing, not two photos
   swapping. Values are percentages of the stage, so it stays true at any size.
   Derived from the roof peak, the wall edges and the ground line in each photo. */
.ba--aligned .ba__img {
  inset: auto;
  height: auto;
  max-width: none;
  object-fit: fill;
  width: var(--img-w, 100%);
  left: var(--img-x, 0);
  top: var(--img-y, 0);
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--gold);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(11, 15, 22, 0.35), 0 0 18px rgba(196, 160, 88, 0.4);
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 24px rgba(11, 15, 22, 0.45);
  transition: scale var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ba__grip svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }

/* A slow pulse until the user touches it, so the control advertises itself. */
.ba__grip::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
}
.ba:not([data-touched="true"]) .ba__grip::before { animation: ba-pulse 2.6s var(--ease) infinite; }
@keyframes ba-pulse {
  0%   { opacity: 0.7; scale: 1; }
  70%  { opacity: 0;   scale: 1.5; }
  100% { opacity: 0;   scale: 1.5; }
}

.ba[data-focus="true"] .ba__grip {
  box-shadow: 0 0 0 4px var(--navy), 0 0 0 7px var(--gold-soft);
}
.ba[data-active="true"] .ba__grip { scale: 1.08; }

/* The real control: a range input laid over the stage. Gives pointer drag,
   click-to-jump and full keyboard control for free. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 4px; height: 100%; border: 0; border-radius: 0; cursor: ew-resize; }
.ba__range:focus { outline: none; }

.ba__tag {
  position: absolute;
  top: var(--space-2);
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(11, 15, 22, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 241, 234, 0.16);
  border-radius: var(--radius);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
.ba__tag--before { left: var(--space-2); }
.ba__tag--after  { right: var(--space-2); }

.ba__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--mist);
}
.ba__hint .icon { width: 16px; height: 16px; }
.section--paper .ba__hint { color: var(--slate); }
.section--paper .ba__stage { border-color: var(--paper-line); }

/* Website screenshots. Both files are exported to the same dimensions and
   anchored to the top of the page, so the wipe compares like with like and
   neither shot needs cropping at display time. */
.ba--site .ba__stage { aspect-ratio: 1889 / 906; }
@media (max-width: 620px) {
  /* Keep the full width of each layout visible on a phone rather than
     cropping the sides off a screenshot. */
  .ba--site .ba__stage { aspect-ratio: 16 / 10; }
  .ba--site .ba__img { object-fit: contain; background: var(--ink); }
}

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */
.case__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.case__meta li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--navy-line);
  font-size: 0.9375rem;
}
.case__meta dt, .case__meta .k {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.case__meta .v { color: var(--ivory); text-align: right; }
.section--paper .case__meta li { border-color: var(--paper-line); }
.section--paper .case__meta .k { color: #8A6D1F; }
.section--paper .case__meta .v { color: var(--ink); }

/* Empty state for future work */
.empty {
  display: grid;
  gap: var(--space-2);
  place-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-3);
  border: 1px dashed var(--navy-line);
  border-radius: var(--radius-lg);
}
.empty .icon { width: 28px; height: 28px; }
.section--paper .empty { border-color: var(--paper-line); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-3); max-width: 34rem; }
.field { display: grid; gap: 0.4375rem; }

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.field .req { color: var(--gold); margin-left: 0.15em; }
.field .help { font-size: 0.8125rem; color: var(--mist); margin: 0; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9375rem;
  font-family: inherit;
  font-size: 1rem;           /* 16px — stops iOS zoom-on-focus */
  line-height: 1.5;
  color: var(--ivory);
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7C88A0; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #3A465C; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--gold); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C3D4' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 20px;
  padding-right: 2.75rem;
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #FF9C8F;   /* 6.4:1 on navy-soft */
}
.field__error .icon { width: 15px; height: 15px; stroke: currentColor; }
.field[data-invalid="true"] .field__error { display: flex; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #FF9C8F; }

.form__summary {
  display: none;
  padding: var(--space-3);
  border: 1px solid #FF9C8F;
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(255, 156, 143, 0.07);
}
.form__summary[data-show="true"] { display: block; }
.form__summary h2 { font-family: inherit; font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.5rem; }
.form__summary ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
.form__summary a { color: #FF9C8F; }

.form__status {
  font-size: 0.9375rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: #000; border-top: 1px solid var(--navy-line); }
.footer__brand {
  display: grid;
  place-items: center;
  padding-block: var(--space-6) var(--space-5);
}
.footer__brand img { width: min(360px, 76%); height: auto; }

.footer__cols {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-top: 1px solid #1A1A1A;
  padding-top: var(--space-4);
}
@media (min-width: 700px) { .footer__cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.footer h2 {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-2);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--mist);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer a:hover { color: var(--gold); }
.footer p { color: #8892A4; font-size: 0.875rem; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding-block: var(--space-3);
  border-top: 1px solid #1A1A1A;
  font-size: 0.8125rem;
  color: #6E7889;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  padding-block: var(--space-7);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196,160,88,0.12) 0%, rgba(196,160,88,0) 60%),
    var(--ink);
  border-top: 1px solid var(--navy-line);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--space-3); }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
/* Hidden only once JS has confirmed it is running (the .js class is set in
   an inline <head> script). Without JS, every section renders normally. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Reduced motion — remove all non-essential movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   The two offer cards stay dark inside the light section — that contrast is
   deliberate, it pulls the eye straight to the offer. But because they sit
   inside .section--paper they would otherwise inherit the light-mode text
   colours and become unreadable, so re-assert the dark-context palette here.
   -------------------------------------------------------------------------- */
.section--paper .tier { color: var(--ivory); }
.section--paper .tier h3 { color: var(--ivory); }
.section--paper .tier__label { color: var(--gold); }
.section--paper .tier > p,
.section--paper .tier .ticks li { color: var(--mist); }
.section--paper .tier .icon { stroke: var(--gold); }

/* Gold reads beautifully on navy but fails against paper — use the deeper
   bronze for emphasis in light sections. */
.section--paper .statement em,
.section--paper .hero h1 em { color: #8A6D1F; }

/* ==========================================================================
   MOTION & INTERACTION
   Every effect below is switched off wholesale by the prefers-reduced-motion
   block at the end of this file.
   ========================================================================== */

/* --- Scroll progress rail ------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: calc(var(--z-nav) + 1);
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  will-change: transform;
}

/* --- Nav condenses once you leave the hero -------------------------------- */
.nav {
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.nav__inner { transition: min-height var(--t-mid) var(--ease); }
.nav[data-scrolled="true"] {
  background: rgba(11, 15, 22, 0.94);
  box-shadow: 0 1px 0 rgba(196, 160, 88, 0.16), 0 12px 34px rgba(0, 0, 0, 0.4);
}
@media (min-width: 900px) {
  .nav[data-scrolled="true"] .nav__inner { min-height: 62px; }
}

/* --- Headline reveal, line by line ---------------------------------------- */
.reveal-lines { display: block; }
.reveal-lines .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;   /* room for descenders while clipped */
  margin-bottom: -0.06em;
}
.reveal-lines .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ln-delay, 0ms);
}
.reveal-lines.is-in .ln > span { transform: none; }

/* --- Hero parallax -------------------------------------------------------- */
.hero__mark, .hero__glow { will-change: transform; }
.hero__mark  { transform: translate3d(0, calc(var(--sy, 0) * 0.16px), 0); }
.hero__glow  { transform: translate3d(-50%, calc(var(--sy, 0) * 0.28px), 0); }
.hero__inner { transform: translate3d(0, calc(var(--sy, 0) * 0.06px), 0); }

/* --- Reveal directions ---------------------------------------------------- */
.js [data-reveal="left"]  { transform: translateX(-26px); }
.js [data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal].is-in   { transform: none; }

/* --- Cards lift and warm on hover ----------------------------------------- */
.card, .tier, .who {
  position: relative;
  transition: transform var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
@media (hover: hover) {
  .card:hover, .who:hover {
    transform: translateY(-4px);
    border-color: var(--gold-dim);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }
  .section--paper .card:hover { box-shadow: 0 18px 40px rgba(24, 32, 48, 0.11); }
}

/* --- Primary button sheen ------------------------------------------------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease);
}
@media (hover: hover) {
  .btn--primary:hover::after { transform: translateX(120%); }
}

/* --- Underline that draws in on link hover -------------------------------- */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9375rem; right: 0.9375rem; bottom: 16px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-mid) var(--ease);
}
@media (hover: hover) { .nav__link:hover::after { transform: scaleX(1); } }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__panel .nav__link::after { display: none; }

/* --- Section rule that draws across as it enters -------------------------- */
.drawline {
  height: 1px;
  background: var(--navy-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1100ms var(--ease);
}
.drawline.is-in { transform: scaleX(1); }
.section--paper .drawline { background: var(--paper-line); }

/* ==========================================================================
   WHO THIS IS FOR / SERVICES
   ========================================================================== */
.who {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
}
.who__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(196, 160, 88, 0.07);
  margin-bottom: var(--space-1);
}
.who__icon .icon { width: 21px; height: 21px; }
.who h3 { font-size: 1.5rem; }
.who p { color: var(--mist); font-size: 0.9375rem; margin: 0; }

/* Services — a numbered list that reads as capability, not a price menu */
.svc { display: grid; gap: 0; }
.svc__row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--paper-line);
  transition: background var(--t-mid) var(--ease);
}
.svc__row:last-child { border-bottom: 1px solid var(--paper-line); }
@media (min-width: 820px) {
  .svc__row {
    grid-template-columns: 4rem minmax(0, 24ch) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
}
.svc__n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #8A6D1F;
}
.svc__row h3 { font-size: 1.5rem; }
.svc__row p { color: var(--slate); font-size: 0.9375rem; margin: 0; }
.svc__lead { position: relative; }
.svc__flag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B540F;
  background: rgba(196, 160, 88, 0.2);
  border-radius: var(--radius);
}


/* Headline halves, each revealed on its own timing */
.hl { display: block; }
.hl--gold { color: var(--gold); font-style: italic; }
.section--paper .hl--gold { color: #8A6D1F; }

/* --------------------------------------------------------------------------
   Espresso Evergreen registration.
   Each photo is scaled and offset so the building lands in the same place on
   screen in both, which is what makes the wipe read as one building changing
   rather than two photographs swapping. Derived from the roof peak, the wall
   edges and the ground line measured in each source photo; the two land within
   about 6% of each other in width and height, which is the closest the
   differing camera angles allow without distorting the images.
   Mobile gets a taller 4:3 crop and its own numbers, because the vertical
   offsets are percentages of the stage height.
   -------------------------------------------------------------------------- */
.ba--ee .ba__layer--after  .ba__img { --img-w: 113.00%; --img-x:  -9.03%; --img-y:  -0.62%; }
.ba--ee .ba__layer--before .ba__img { --img-w: 128.09%; --img-x:   0.00%; --img-y: -27.76%; }

@media (max-width: 620px) {
  .ba--ee .ba__stage { aspect-ratio: 4 / 3; }
  .ba--ee .ba__layer--after  .ba__img { --img-w: 136.00%; --img-x: -14.88%; --img-y:  -0.77%; }
  .ba--ee .ba__layer--before .ba__img { --img-w: 154.16%; --img-x:  -4.01%; --img-y: -27.99%; }
}


/* Spam-trap field: off-canvas rather than display:none, so bots still fill it. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Direct contact list — icon, then the value. No dividers, and the email is
   free to wrap rather than run past the edge of its column.
   -------------------------------------------------------------------------- */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contactlist {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.contactlist li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: 0.5rem;
}
.contactlist__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(196, 160, 88, 0.07);
  margin-top: -0.1rem;
}
.contactlist__icon .icon { width: 18px; height: 18px; }

.contactlist a,
.contactlist__text {
  /* min-width:0 lets a long address shrink and wrap inside the flex row
     instead of pushing the row wider than its column. */
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  align-self: center;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.contactlist__text { color: var(--mist); }
.contactlist a {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .contactlist a:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
}
.contactlist li:hover .contactlist__icon { border-color: var(--gold); }

.section--paper .contactlist a { color: var(--ink); }
.section--paper .contactlist__text { color: var(--slate); }

/* --------------------------------------------------------------------------
   About portrait
   -------------------------------------------------------------------------- */
.portrait {
  margin: var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--navy-line);
  background: var(--navy-soft);
  max-width: 420px;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* The file is already cropped to 4:5 (head to mid-thigh), so cover has
     nothing left to trim — this just guards against a future swap. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}
.section--paper .portrait { border-color: var(--paper-line); }

/* ==========================================================================
   REDUCED MOTION — must stay the LAST block in this file so it wins over
   every animated rule above it. Everything resolves to its final state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-lines .ln > span { transform: none !important; }
  .drawline { transform: scaleX(1) !important; }

  /* No scroll-linked movement at all */
  .hero__mark, .hero__glow, .hero__inner { transform: none !important; }
  .hero__glow { transform: translateX(-50%) !important; }

  /* No looping attention-seekers, no hover travel */
  .ba:not([data-touched="true"]) .ba__grip::before { animation: none !important; opacity: 0 !important; }
  .btn--primary::after { display: none !important; }
  .card:hover, .who:hover { transform: none !important; }
  .btn:active { transform: none !important; }
  .nav__link::after { transition: none !important; }
}