/* ============================================================
   Hoback Partners
   Design tokens and site styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Color — contrast-verified */
  --navy:        #021E40;  /* anchor ground */
  --midnight:    #111923;  /* body text on light — 16.6:1 on alpine */
  --alpine:      #FFFFFF;  /* dominant ground */
  --snow:        #FFFFFF;
  --mist:        #E7EDF0;  /* alternate ground */
  --steel:       #31566F;  /* supporting, light grounds only */
  --bronze:      #B78A52;  /* accent — DARK GROUNDS ONLY (5.36:1 on navy) */
  --bronze-ink:  #8A6535;  /* accent — light grounds (4.94:1 on alpine) */
  --slate-deep:  #5A6972;  /* small muted text (5.33:1 on alpine) */
  --slate:       #667782;  /* large muted text only, >= 24px */
  --mute-navy:   #748894;  /* muted text on navy (4.51:1) */

  /* Type */
  --sans: "Inter", Helvetica, Arial, sans-serif;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Spacing scale — varied by intent, not uniform */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: 3rem;
  --s-5: 5rem;
  --s-6: 8rem;
  --s-7: 12rem;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 34rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--alpine);
  color: var(--midnight);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Square. The mark is drawn in straight angled segments; rounding contradicts it. */
button, input, textarea, select, .btn { border-radius: 0; }

/* ---------- focus: visible, never removed ---------- */
:focus-visible {
  outline: 2px solid var(--bronze-ink);
  outline-offset: 3px;
}
.on-dark :focus-visible { outline-color: var(--bronze); }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--snow);
  padding: var(--s-2) var(--s-3); z-index: 100;
}
.skip:focus { left: var(--gutter); top: var(--s-2); }

/* ---------- type scale ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin: 0 0 var(--s-3);
}
.on-dark .eyebrow { color: var(--bronze); }
/* Bronze Ink is 4.45:1 on Mist — just short. Darken on that ground only. */
.sec--mist .eyebrow, .sec--mist .situation__label,
.sec--mist .partner__role, .sec--mist .row__num { color: #7F5C30; }

/* Section labels double as section headings. Keep the eyebrow look. */
h2.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

h1, h2, h3 { margin: 0; font-weight: 500; }

.display {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.display--page {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.375rem, 5.5vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}
.lead {
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  line-height: 1.45;
  color: var(--slate);
  max-width: 40rem;
}
.on-dark .lead { color: var(--mist); }
p { max-width: var(--measure); }
.caption {
  font-size: 13px;
  color: var(--slate-deep);
  line-height: 1.5;
}

/* ---------- layout ---------- */
.wrap { padding-inline: var(--gutter); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4) var(--s-3);
}

/* ---------- the ridgeline system ---------- */
/* One idea at three scales: rule, grid, monument. */
.contour {
  width: 100%;
  height: 14px;
  overflow: visible;
  color: var(--steel);
  opacity: 0.35;
}
.on-dark .contour { color: var(--bronze); opacity: 0.5; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  background: color-mix(in srgb, var(--alpine) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background 320ms ease,
              backdrop-filter 320ms ease, padding 320ms ease;
}
.site-head--over {
  position: absolute; inset-inline: 0; top: 0;
  background: transparent; backdrop-filter: none;
}
/* Once the hero has scrolled past, the transparent over-hero header
   goes fixed and picks up the same light wash as the rest of the site,
   so navigation stays reachable instead of scrolling away with the
   photo. */
.site-head--over.is-scrolled {
  position: fixed;
  padding-block: calc(var(--s-3) * 0.7);
  background: color-mix(in srgb, var(--alpine) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(17,25,35,0.08);
}
.brand { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; }
.brand img { width: 50px; height: auto; }
.brand-name {
  font-size: 15px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy); line-height: 1;
}
.brand-sub {
  display: block;
  font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--slate-deep); margin-top: 4px;
}

.nav { display: flex; gap: var(--s-4); align-items: center; }
.nav a {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.015em;
  text-decoration: none;
  color: var(--midnight);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, color 220ms ease;
}
.nav a:hover { border-bottom-color: var(--bronze-ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--bronze-ink); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(34rem, 82vh, 52rem);
  display: flex; align-items: flex-end;
  /* Fallback gradient approximating the plate, so the page reads before the
     photograph is dropped in. */
  background:
    linear-gradient(178deg, #D6DADE 0%, #C9CFD5 55%, #AFB8C0 100%);
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  z-index: 0;
  /* Oversized and shifted up so there's room to drift downward on
     scroll (see the parallax script below) without exposing an edge. */
  height: 162%;
  top: -31%;
  bottom: auto;
  will-change: transform;
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: var(--s-6) var(--gutter) var(--s-5);
}
.hero__text { max-width: 52%; }
/* Navy type on a pale plate. White would land near 1.4:1 here. */
.hero .display { color: var(--navy); }
.hero .eyebrow { color: var(--bronze-ink); }
.hero__support {
  margin-top: var(--s-3);
  font-size: 1.125rem;
  color: var(--midnight);
  max-width: 26rem;
}

/* ---------- sections ---------- */
section { position: relative; }
.sec { padding-block: var(--s-6); }
.sec--tight { padding-block: var(--s-5); }
.sec--tall { padding-block: var(--s-7); }
.sec--mist { background: var(--mist); }
.sec--navy {
  background: var(--navy);
  color: var(--mist);
}
.sec--navy h2, .sec--navy .display { color: var(--snow); }

/* full-bleed monument */
.monument {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-7);
}
.monument__ridge {
  position: absolute;
  left: -5%; right: -5%; bottom: -2%;
  width: 110%; height: auto;
  color: var(--bronze);
  pointer-events: none;
}
.monument__ridge polyline { stroke-linecap: round; stroke-linejoin: round; }
/* The bold outer silhouette sits at a permanent watermark level. The
   depth layers behind it are set to their target opacity here, but
   stay visually undrawn (stroke-dashoffset = full length) until the
   quote scrolls into view — the script at the bottom of the page
   animates the offset down to 0, which is what actually reveals them.
   Note: opacity is set per-line rather than on the .monument__ridge
   container itself — CSS opacity compounds through nested elements,
   so opacity on the parent would crush every line beneath it
   regardless of what's set here. */
.monument__ridge .ridge--near { opacity: 0.4; }
.monument__ridge .ridge--depth {
  opacity: var(--depth-opacity, 1);
  /* Triggered once (see script), not scroll-scrubbed — once it
     starts, it runs to completion on its own timeline regardless of
     scroll speed. Staggered slightly per layer so the farthest ridge
     draws first and the nearest finishes last. */
  transition: stroke-dashoffset 1300ms cubic-bezier(.2,.6,.2,1);
}
.monument__ridge .ridge--depth[data-depth="3"] { transition-delay: 0ms; }
.monument__ridge .ridge--depth[data-depth="2"] { transition-delay: 180ms; }
.monument__ridge .ridge--depth[data-depth="1"] { transition-delay: 360ms; }
.monument blockquote {
  position: relative;
  margin: 0;
  max-width: 46rem;
}
.monument blockquote p {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.22;
  color: var(--snow);
  max-width: none;
  margin: 0;
}
.monument cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mute-navy);
}

/* ---------- editorial rows: capability areas, no cards ---------- */
.rows { border-top: 1px solid rgba(17,25,35,0.14); }
.row {
  display: grid;
  grid-template-columns: 5rem 1fr minmax(0, 24rem);
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(17,25,35,0.14);
}
.row__num {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--bronze-ink);
  padding-top: 0.45rem;
}
/* "What we do": no numerals, just headline + copy */
.rows--plain .row { grid-template-columns: 1fr minmax(0, 24rem); }
.row p { margin: 0; color: var(--slate-deep); font-size: 16px; }

/* ---------- situations: anonymous engagements ---------- */
.situations { display: grid; gap: var(--s-5); }
.situation {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  max-width: 42rem;
}
.situation:nth-child(even) { margin-left: auto; }
.situation__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-ink);
}
.situation h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.25;
}
.situation p { color: var(--slate-deep); margin: 0; }

/* ---------- bronze kickers: "What we do" / "Where we focus" — sized just under the headings they sit beside ---------- */
.eyebrow.kicker--lg {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  letter-spacing: 0.045em;
  margin-bottom: var(--s-3);
}
.row__num.kicker--lg {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: 0.03em;
  padding-top: 0;
}
.situation__label.kicker--lg {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: 0.045em;
  margin-bottom: var(--s-1);
}

/* ---------- partners ---------- */
.partner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 34rem);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(17,25,35,0.14);
}
.partner:nth-child(even) { grid-template-columns: minmax(0, 34rem) minmax(0, 20rem); }
.partner:nth-child(even) .partner__media { order: 2; }
.partner__media {
  aspect-ratio: 4 / 5;
  background: var(--mist);
  display: grid; place-items: center;
  border: 1px solid rgba(17,25,35,0.10);
}
.partner__role {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--s-1);
}
.partner h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: var(--s-2);
}

/* ---------- long-form legal prose ---------- */
.prose { max-width: 38rem; }
.prose > p, .prose li { color: var(--midnight); font-size: 16px; line-height: 1.65; }
.prose h2 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(17,25,35,0.14);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose p { margin: 0 0 var(--s-2); max-width: none; }
.prose ul { margin: 0 0 var(--s-2); padding-left: 1.15rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--bronze-ink); text-decoration: underline; text-underline-offset: 3px; }
.updated {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-deep);
  margin-top: var(--s-3);
}

/* ---------- footer legal column ---------- */
.foot-legal { display: flex; flex-direction: column; gap: var(--s-2); }
.foot-legal a {
  font-size: 14px; font-weight: 500;
  color: var(--snow); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color 200ms ease;
}
.foot-legal a:hover { border-bottom-color: var(--bronze); }

/* ---------- links and actions ---------- */
.link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bronze-ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap 220ms ease;
}
.link:hover { gap: 1rem; }
.on-dark .link, .sec--navy .link { color: var(--bronze); }
.link svg { width: 14px; height: 14px; }

.btn {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.95rem 1.75rem;
  background: var(--navy);
  color: var(--snow);
  text-decoration: none;
  border: 1px solid var(--navy);
  border-radius: 6px;
  transition: background 220ms ease, color 220ms ease;
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--navy); }
.btn--ghost {
  background: transparent; color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--snow); }

/* ---------- closing CTA: headline and button, centered and stacked ---------- */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}

/* ---------- form ---------- */
.field { margin-bottom: var(--s-3); }
label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-deep);
  margin-bottom: 0.55rem;
}
.required-mark { color: var(--bronze-ink); margin-left: 0.15em; }
input, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--midnight);
  background: var(--alpine);
  border: 1px solid rgba(17,25,35,0.22);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  transition: border-color 220ms ease;
}
input:hover, textarea:hover { border-color: var(--slate-deep); }
input:focus, textarea:focus { border-color: var(--navy); outline: none; }
textarea { resize: vertical; min-height: 7rem; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--navy);
  color: var(--mist);
  padding: var(--s-6) var(--gutter) var(--s-4);
}
.site-foot .brand img { width: 58px; }
.site-foot .brand-name { color: var(--snow); }
.site-foot .brand-sub { color: var(--mute-navy); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 60%) 1fr;
  gap: var(--s-5) var(--s-4);
  align-items: start;
  padding-bottom: var(--s-5);
}
.foot-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.foot-location { margin: 0; font-size: 14px; color: var(--mute-navy); }
.foot-navs { display: flex; gap: var(--s-6); }
.foot-nav { display: flex; flex-direction: column; gap: var(--s-2); }
.foot-nav a {
  font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--snow);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 220ms ease;
}
.foot-nav a:hover { border-bottom-color: var(--bronze); }
.foot-base {
  text-align: center;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(231,237,240,0.16);
  font-size: 13px;
  color: var(--mute-navy);
}

/* ---------- motion: subtle, and optional ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms cubic-bezier(.2,.6,.2,1),
              transform 900ms cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .hero__img { transform: none !important; }
  .monument__ridge .ridge--depth { opacity: 0.5 !important; }
}

/* ---------- responsive: recomposed, not merely stacked ---------- */
@media (max-width: 900px) {
  /* Inline grid-column spans outrank a class selector, so force the collapse. */
  .grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .grid > * { grid-column: 1 / -1 !important; }
  .grid[style*="align-items:end"] { gap: var(--s-4); }

  .hero__text { max-width: 100%; }
  .hero__inner { padding-block: var(--s-5) var(--s-4); }
  .row { grid-template-columns: 3.25rem 1fr; }
  .row p { grid-column: 2; }
  .rows--plain .row { grid-template-columns: 1fr; }
  .rows--plain .row p { grid-column: 1; }
  .partner,
  .partner:nth-child(even) { grid-template-columns: 1fr; }
  .partner:nth-child(even) .partner__media { order: 0; }
  .partner__media { aspect-ratio: 3 / 2; }
  .situation:nth-child(even) { margin-left: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .nav { gap: var(--s-3); }
}

@media (max-width: 620px) {
  :root { --s-6: 5rem; --s-7: 7rem; }
  .brand-sub { display: none; }
  .nav a { font-size: 13px; }
}