@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Montserrat-var.woff2') format('woff2');
}

:root {
  --ink: #ffffff;
  --ground: #000000;
  --muted: rgba(255, 255, 255, 0.68);

  /* The live site runs a 720px column centred in the viewport, with the text
     inside it left-aligned. Everything here inherits that. */
  --column: 45rem;

  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-pad: clamp(4rem, 7vh, 5.5rem);
  --footer-h: 6.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Proximity, not mandatory: sections settle onto the screen when you land
     near one, but a section taller than the viewport stays freely scrollable
     instead of fighting you for the overflow. */
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Live site: 20px / 35px Montserrat 400. */
  font-size: 1.25rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: #fff; color: #000; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 0.75rem 1.25rem;
  z-index: 20;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Centred column ----------
   One rule governs alignment everywhere: each block is capped at --column and
   centred by auto margins. Text inside stays left-aligned. */

.inner { width: 100%; max-width: var(--column); margin-inline: auto; }

/* ---------- Header ---------- */

/* Absent over the hero, slides in once scrolling starts. The wordmark lives in
   the hero itself at rest, the way the original site presents it. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding: clamp(0.875rem, 2vw, 1.25rem) var(--gutter);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.32s ease, opacity 0.24s ease, visibility 0s linear 0.32s;
}

.site-header[data-scrolled="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.32s ease, opacity 0.24s ease, visibility 0s;
}

.hero-wordmark {
  display: block;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero-wordmark img { width: clamp(170px, 18vw, 230px); }

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark img { width: clamp(150px, 16vw, 200px); }

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.875rem, 2vw, 1.75rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-header nav a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--ink); }

/* ---------- Hero ---------- */

.hero { padding: clamp(3rem, 8vh, 6rem) var(--gutter); }

/* Live site sets every heading, hero and section alike, at 60px / 67.5px with
   -2.5px tracking. Same ramp here, scaled down for narrow screens. */
h1, h2 {
  margin: 0;
  font-size: clamp(2.125rem, 5.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.lede {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}

.brands {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.25rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.brands img { opacity: 0.85; transition: opacity 0.2s ease; }
.brands a:hover img, .brands a:focus-visible img { opacity: 1; }
.brands li:first-child img { width: clamp(92px, 10vw, 118px); }
.brands li:last-child img  { width: clamp(112px, 12vw, 146px); }

/* ---------- Sections ----------
   Every section fills the screen. min-height rather than height, so a section
   whose copy outgrows a short viewport simply gets taller instead of clipping.
   svh (small viewport height) keeps mobile honest: 100vh there measures the
   window with browser chrome retracted, which overflows on first paint. */

.hero,
.panel {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}

.panel { padding: var(--section-pad) var(--gutter); }

/* Photo sections carry a dark wash so white type holds up over the image. The
   original site used a lighter one, but it carried far less body copy than this
   does; at that strength the paragraphs sat unreadably on a bright photograph. */
.panel--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Body copy needs more weight against a photograph than against flat black. */
.panel--photo .prose p,
.panel--photo .eyebrow { color: rgba(255, 255, 255, 0.86); }

#givengain {
  background-image:
    linear-gradient(235deg, rgba(14, 16, 20, 0.80) 0%, rgba(14, 16, 20, 0.94) 84%),
    url('/assets/img/bg-givengain.jpg');
}

#payprop {
  background-image:
    linear-gradient(235deg, rgba(14, 16, 20, 0.76) 0%, rgba(14, 16, 20, 0.94) 84%),
    url('/assets/img/bg-payprop.jpg');
}

#careers {
  background-image:
    linear-gradient(235deg, rgba(14, 16, 20, 0.82) 0%, rgba(14, 16, 20, 0.94) 84%),
    url('/assets/img/bg-careers.jpg');
}

.eyebrow {
  margin: 0 0 1.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

.prose p {
  margin: 0 0 1.375rem;
  color: var(--muted);
  text-wrap: pretty;
}

.prose p:last-child { margin-bottom: 0; }

blockquote {
  position: relative;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
}

/* An oversized opening mark, set behind the text and bled off to the left so
   the paragraph itself stays on the column grid. This is what reads as "quote"
   now that the section has no rules to lean on. */
blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.34em;
  left: -0.62em;
  z-index: -1;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* On narrow screens the hang would clear the 24px gutter and be clipped off the
   left edge, silently, since browsers do not scroll leftward to reveal it. */
@media (max-width: 700px) {
  blockquote::before {
    font-size: 4rem;
    left: -0.3em;
    top: -0.26em;
  }
}

blockquote p {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

blockquote cite {
  display: block;
  margin-top: 1.125rem;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The mark is decorative and sits behind the text, so the section needs a
   stacking context of its own or it would fall behind the background wash. */
#givengain .inner { position: relative; z-index: 0; }

/* ---------- Brand link ---------- */

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.brand-link img {
  width: clamp(96px, 11vw, 128px);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.brand-link span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}

.brand-link:hover img, .brand-link:focus-visible img { opacity: 1; }
.brand-link:hover span, .brand-link:focus-visible span { color: var(--ink); }

/* ---------- Contact ---------- */

.contact .mail {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1.1875rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  word-break: break-word;
  transition: opacity 0.2s ease;
}

.contact .mail:hover, .contact .mail:focus-visible { opacity: 0.72; }

/* ---------- Footer ---------- */

/* Contact plus footer together make the last full screen, rather than the
   footer trailing below one and forcing a stray scroll. */
#contact {
  min-height: calc(100vh - var(--footer-h));
  min-height: calc(100svh - var(--footer-h));
}

.site-footer {
  display: flex;
  align-items: center;
  min-height: var(--footer-h);
  padding: 0 var(--gutter);
}

.site-footer p {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Mobile menu ---------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;   /* accessible minimum tap target */
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.22s ease, background 0.15s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; }
.nav-toggle-bars::before { transform: translateY(-7px); }
.nav-toggle-bars::after  { transform: translateY(7px); }

[data-nav-open="true"] .nav-toggle-bars { background: transparent; }
[data-nav-open="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
[data-nav-open="true"] .nav-toggle-bars::after  { transform: rotate(-45deg); }

@media (max-width: 640px) {
  /* The header stays wrap-enabled: the nav uses flex-basis to break onto its
     own row when open. Hidden, the wordmark and toggle share one row. */
  .nav-toggle { display: flex; }

  .site-header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
  }

  .site-header[data-nav-open="true"] nav { display: flex; }

  .site-header nav a { padding: 0.8rem 0; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; scroll-snap-type: none; }
}