/* ==========================================================
   NORTHRUM STYLES
   This file controls how the page looks: colors, fonts,
   spacing, layout, and the scroll effects.
   Phone styles come first. Bigger screens add to them
   further down (the "@media (min-width: ...)" sections).
   ========================================================== */


/* ---------- 1. Colors and fonts (change them here) ---------- */

:root {
  --navy: #1B365D;        /* the accent color, taken from the logo */
  --navy-deep: #12284A;   /* darker navy for the footer and hover states */
  --cream: #F6F2EB;       /* main background */
  --ink: #2B3445;         /* body text */
  --muted: #5A6475;       /* small labels */
  --line: rgba(27, 54, 93, 0.14);

  --bg: #F3EEE7;          /* matches the photo's sky; the script changes it as you scroll */
  --header-h: 64px;
  --gutter: 20px;
  --max: 1120px;

  /* DIN-style fonts already on most computers and phones, to match the logo. Nothing to download. */
  --font-display: "DIN Alternate", "Bahnschrift", "D-DIN", "DIN", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --header-h: 72px; }
}


/* ---------- 2. Basics ---------- */

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

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

/* Smooth scrolling when you click a menu link (skipped for people who turn off motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--bg);
  /* A very faint paper grain, drawn by the browser from this tiny pattern (no image file to download) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .14 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  transition: background-color 0.8s ease;
}

svg { display: block; }

a { color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: var(--cream);
}
.skip-link:focus { top: 12px; }


/* ---------- 3. Shared text styles ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 1.5rem 0;
  background: var(--navy);
}

.section-title,
.venture-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.button span { transition: transform 0.2s ease; }
.button:hover { background: var(--navy-deep); }
.button:hover span { transform: translateX(4px); }
.button:disabled { opacity: 0.6; cursor: wait; }


/* ---------- 4. Scroll progress bar ---------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: 3px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Newer browsers can fill the bar with no script at all. Older ones use a few lines in main.js. */
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-fill linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ---------- 5. Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background-color: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.8s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--navy);
  text-decoration: none;
}
.brand-mark { width: 30px; height: 28px; fill: currentColor; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-header ul {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header nav a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.site-header nav a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* On narrow phones, show only the logo mark so the menu fits */
@media (max-width: 419px) {
  .brand-name {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .brand-mark { width: 34px; height: 32px; }
  .brand-name { font-size: 1.1875rem; }
  .site-header ul { gap: 2.25rem; }
  .site-header nav a { font-size: 0.8125rem; }
}


/* ---------- 6. Full-screen panels ---------- */

.panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 48px) var(--gutter) 72px;
  overflow: hidden;
}

.panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

/* Gentle snapping, desktop only (big screen plus a mouse). "proximity" only nudges when you stop close to a panel. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html { scroll-snap-type: y proximity; }
  .panel { scroll-snap-align: start; }
}

/* The big, faint logo shape in the background (slightly darker than the page, like the reference).
   It sits fully inside its panel (only the outer side runs off screen), so it never gets chopped at the bottom. */
.ghost-mark {
  position: absolute;
  left: -50vmin;
  top: 50%;
  width: 96vmin;
  height: 89vmin;
  transform: translateY(-50%);
  fill: var(--navy);
  opacity: 0.05;
  pointer-events: none;
}
.ghost-mark--right {
  left: auto;
  right: -40vmin;
}


/* ---------- 7. Hero ---------- */

/* Phones and tablets: text on top, artwork below it */
.hero {
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0;
}
.hero-inner { margin: auto 0; }

.hero-mark {
  width: 128px;
  height: 119px;
  margin-bottom: 2rem;
  fill: var(--navy);
}

/* Lighter and more widely spaced than the other headings, like the reference */
.hero h1 {
  margin: 0;
  font-family: "Bahnschrift", "Avenir Next", "Avenir", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: clamp(2.25rem, 9vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
}

.lead {
  max-width: 30ch;
  margin: 0 0 1.75rem;
  font-size: clamp(1.25rem, 4.6vw, 1.625rem);
  line-height: 1.45;
  color: var(--ink);
}

/* The mountain artwork. Its left and bottom edges fade out inside the image itself. */
.hero-art {
  position: relative;
  height: clamp(240px, 40svh, 440px);
  margin: 1.5rem calc(-1 * var(--gutter)) 0;
  pointer-events: none;
  /* soft top and bottom edges so it melts into the page */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 78%, transparent);
}
/* The photo and the triangle layer are stacked exactly on top of each other */
.hero-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

@media (min-width: 768px) {
  .hero-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 48px;
  }
  .hero-mark { width: 180px; height: 167px; margin: 0; }
  .scroll-cue { left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 32px; }
}

/* Wide screens: text on the left, artwork filling the right side like the reference */
/* Proportions measured from the reference banner: logo starts ~12% from the left and is ~16% wide,
   the text sits close beside it, and the mountains begin just past the middle. */
@media (min-width: 1280px) {
  .hero {
    flex-direction: row;
    align-items: center;
    padding-bottom: 120px; /* sits the group slightly above center, like the reference */
  }
  .hero-inner {
    max-width: none;
    margin: 0;
    padding-left: calc(11.5vw - var(--gutter));
    gap: clamp(32px, 2.6vw, 56px);
  }
  .hero-mark {
    width: clamp(200px, 15.5vw, 300px);
    height: clamp(186px, 14.4vw, 279px);
  }
  .hero h1 {
    font-size: clamp(2.5rem, 2.75vw, 3.25rem);
    letter-spacing: 0.28em;
  }
  .hero .rule {
    width: 84px;
    height: 1px;
    margin: 1.75rem 0;
  }
  .lead {
    max-width: 34ch;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    color: #3F4A5C;
  }
  .hero .eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.28em;
  }
  .scroll-cue { left: 11.5vw; }
  .hero-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    height: auto;
    margin: 0;
    /* soft left and bottom edges, whatever the screen size */
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 38%),
      linear-gradient(to top, transparent, #000 24%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 38%),
      linear-gradient(to top, transparent, #000 24%);
    mask-composite: intersect;
  }
  .hero-art img { object-position: right center; }
}


/* ---------- 8. Venture panels ---------- */

/* The large outlined number in the background (01, 02, 03), kept fully on screen */
.venture-number {
  position: absolute;
  right: var(--gutter);
  bottom: 6svh;
  font-family: var(--font-display);
  font-size: clamp(7rem, 30vw, 18rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(27, 54, 93, 0.13);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1024px) {
  .venture-number {
    right: max(var(--gutter), calc((100% - var(--max)) / 2));
    bottom: auto;
    top: 50%;
    transform: translateY(-45%);
  }
}

.venture-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status--later { border-style: dashed; }
.status--later::before { background: transparent; border: 1px solid currentColor; }

.venture-name {
  max-width: 14ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 8.5vw, 4.75rem);
}

.venture-text {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
}

.venture-pitch {
  max-width: 28ch;
  margin: 1.75rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.venture--later .venture-text { color: var(--muted); }


/* ---------- 9. About ---------- */

.section-title {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 8vw, 4rem);
}

.about-text {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  line-height: 1.5;
}


/* ---------- 10. Contact (navy panel) ---------- */

.contact {
  overflow: visible;
  background: var(--navy);
  color: var(--cream);
}
/* A soft fade from the cream page into navy, instead of a hard line */
.contact::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28vh;
  background: linear-gradient(
    to bottom,
    rgba(27, 54, 93, 0) 0%,
    rgba(27, 54, 93, 0.08) 30%,
    rgba(27, 54, 93, 0.35) 60%,
    rgba(27, 54, 93, 0.75) 85%,
    var(--navy) 100%
  );
  pointer-events: none;
}
.contact .eyebrow { color: rgba(246, 242, 235, 0.72); }
.contact .section-title { color: var(--cream); }
.contact :focus-visible { outline-color: var(--cream); }

.contact-intro {
  max-width: 40ch;
  margin: 1.25rem 0 2.5rem;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  color: rgba(246, 242, 235, 0.85);
}

.contact-form {
  display: grid;
  gap: 1.25rem;
  max-width: 760px;
}

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.8);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(246, 242, 235, 0.35);
  border-radius: 2px;
  background: rgba(246, 242, 235, 0.06);
  color: var(--cream);
  font: inherit;
  font-size: 1rem; /* 16px or more stops iPhones from zooming in on tap */
}
.field textarea { min-height: 150px; resize: vertical; }

/* Stops the browser's autofill from turning a field light blue */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 100px #263F65 inset;
  caret-color: var(--cream);
}
.field input:focus,
.field textarea:focus { border-color: var(--cream); }

.button--light {
  margin-top: 0.5rem;
  background: var(--cream);
  color: var(--navy);
}
.button--light:hover { background: #fff; }

/* Hides the spam trap field from people */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  max-width: 760px;
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
}
.form-status:empty { display: none; }
.form-status:focus { outline: none; }

.contact-alt {
  margin: 2rem 0 0;
  color: rgba(246, 242, 235, 0.72);
}
.contact a { color: var(--cream); text-underline-offset: 3px; }

@media (min-width: 768px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}


/* ---------- 11. Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 28px var(--gutter);
  background: var(--navy);
  border-top: 1px solid rgba(246, 242, 235, 0.12);
  color: rgba(246, 242, 235, 0.72);
  font-size: 0.875rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--cream); text-underline-offset: 3px; }

@media (min-width: 768px) {
  .site-footer { padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--max)) / 2)); }
}


/* ---------- 12. Fade and slide in ----------
   Only active when the script is running (the "js" class).
   Content starts faded and slightly lower, then eases into place.
   --i sets a small delay so items in a panel arrive one after another. */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A longer slide on bigger screens, where it looks best */
@media (min-width: 768px) {
  .js .reveal { transform: translate3d(0, 32px, 0); }
}


/* ---------- 13. Reduced motion ----------
   For visitors who have turned on "reduce motion" on their device:
   no fades, no slides, no color transitions. */

@media (prefers-reduced-motion: reduce) {
  body,
  .site-header { transition: none; }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .button span { transition: none; }
  .button:hover span { transform: none; }
}