/* Eagle Mountain Design — stylesheet */

/* Self-hosted webfonts. Previously loaded from Google Fonts' CDN — fine most
   of the time, but on some phones/networks that external request gets
   blocked or skipped (ad blockers, privacy DNS, data-saver modes), and the
   page silently falls through the whole font stack to a generic system
   serif/sans instead. Embedding the actual font files here removes that
   external dependency entirely: the fonts load from this same site, so
   every visitor gets the real Montserrat/Inter, not a backup. woff2 first
   (what every modern browser uses), woff as the fallback for anything older. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/montserrat/montserrat-latin-400-normal.woff2") format("woff2"),
       url("assets/fonts/montserrat/montserrat-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat/montserrat-latin-600-normal.woff2") format("woff2"),
       url("assets/fonts/montserrat/montserrat-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat/montserrat-latin-700-normal.woff2") format("woff2"),
       url("assets/fonts/montserrat/montserrat-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter/inter-latin-400-normal.woff2") format("woff2"),
       url("assets/fonts/inter/inter-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter/inter-latin-500-normal.woff2") format("woff2"),
       url("assets/fonts/inter/inter-latin-500-normal.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter/inter-latin-600-normal.woff2") format("woff2"),
       url("assets/fonts/inter/inter-latin-600-normal.woff") format("woff");
}

:root {
  --navy: #171b3a;
  --navy-deep: #08071d;
  --bg-deep: #0d0e27;
  /* A true near-black, distinct from the navy tones above, so a dark
     section can sit directly next to a navy one without the seam
     disappearing. Used for Client Work only. */
  --black: #0a0a0c;
  --gold: #f4b43e;
  --gold-deep: #dd9f2f;
  --white: #ffffff;
  --ink: #1a2433;
  --paper: #f7f5f0;
  --line: rgba(12, 15, 38, 0.14);
  /* One header/title font sitewide: real Copperplate for anyone who
     actually has it installed (macOS/iOS ship it, but it's Apple's font and
     can't legally be embedded), Montserrat — embedded above, not loaded
     from an external CDN — as the sans-serif stand-in for everyone else, so
     headings look the same for every visitor instead of silently falling
     back to a generic serif. */
  --font-head: "Copperplate", "Copperplate Gothic Light", "Copperplate Gothic", "Montserrat", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-top-h: 168px;
  --header-top-h-scrolled: 110px;
  --brand-mark-h: 128px;
  --brand-mark-h-scrolled: 84px;
  --header-h: 160px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--header-h); overflow-anchor: none; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* The penguin graphic in Why This Matters is deliberately allowed to
     drift past its own small box's edges (overflow: visible on
     .why-vector-stage) so the layers read as flying apart, not clipped.
     On a narrow phone that drift can spill past the edge of the screen
     itself — with nothing stopping it there, the phone's browser was
     treating that as the page being wider than the phone and quietly
     zooming the WHOLE SITE out to fit, which is what was throwing off
     tap positions on fixed/absolute UI elsewhere (like the gallery's
     next button). Clipping horizontally here stops that: the animation
     still plays exactly as designed within the screen, it just can't
     push the page itself wider than the phone anymore. */
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.4em;
  line-height: 1.1;
}
/* Every section title is an h2, so this is the one place that sets their
   size — keeps them all matching sitewide instead of drifting per
   section. h3 stays sized per its own context (offer cards, lightbox,
   etc.); only the hero's h1 is intentionally larger, as the page's one
   top-level headline. */
h2 { font-size: 2rem; }
p { line-height: 1.6; }
a { color: inherit; }
.section-inner { max-width: 1100px; margin: 0 auto; padding: 90px 24px; }
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 0.6em;
}
.section-sub { color: #4a5568; font-size: 1.05rem; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-ghost { background: transparent; border-color: currentColor; }

/* Header */
#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.2s ease;
  /* Stop the browser's scroll-anchoring from "correcting" scroll position
     while the header animates its height — that correction is what caused
     the bounce/jump feeling when scrolling, especially scrolling back up. */
  overflow-anchor: none;
}
#site-header.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.2); }
.header-top {
  background: var(--gold);
  height: var(--header-top-h);
  display: flex;
  align-items: center;
  transition: height 0.25s ease;
}
#site-header.scrolled .header-top { height: var(--header-top-h-scrolled); }
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy-deep); }
.brand-mark { height: var(--brand-mark-h); width: auto; transition: height 0.25s ease; }
#site-header.scrolled .brand-mark { height: var(--brand-mark-h-scrolled); }
.brand-word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* White menu bar under the gold header */
.header-nav-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header-nav-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}
#site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.nav-btn {
  text-decoration: none;
  color: var(--navy-deep);
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 4px 2px;
  border: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-btn:hover {
  border-color: var(--navy-deep);
}
/* A thin divider between items instead of relying on spacing alone to
   separate them — helps once labels are longer/uneven lengths. */
.nav-btn + .nav-btn { position: relative; }
.nav-btn + .nav-btn::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--line);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy-deep); display: block; }

/* Hero + Work (combined, matches the studio mockup) */
.hero-work {
  background: var(--black);
  color: var(--white);
}
.hero-work-inner { max-width: 1200px; margin: 0 auto; padding: 90px 24px 100px; }
.mock-headline {
  max-width: 720px;
  color: var(--gold);
  margin: 0 0 14px;
}
.mock-headline .headline-text { display: inline; }
.hero-sub {
  max-width: 560px;
  color: #a9bad0;
  font-size: 1.05rem;
  margin: 0 0 40px;
}
/* Client Work's intro line lists a bunch of categories, so let it run the
   full section width instead of wrapping narrow like the hero's version. */
.hero-work .hero-sub { max-width: none; }
.hero-benefits {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.hero-benefits > li {
  position: relative;
  padding-left: 27px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--white);
}
.hero-benefits > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02em;
  color: var(--gold);
  font-weight: 700;
}
.hero-benefits ul {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}
.hero-benefits ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  font-weight: 400;
  color: #a9bad0;
  margin-top: 4px;
}
.hero-benefits ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}
.hero-benefits ul ul li {
  font-size: 0.82rem;
  color: #8494ab;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-work .btn-ghost { color: var(--white); }

/* Hero — the two-pillar headline, first thing on the page */
.hero { background: var(--bg-deep); color: var(--white); overflow: hidden; }
.hero-inner { max-width: 1140px; margin: 0 auto; padding: 90px 24px 90px; }
.hero-columns { display: flex; flex-direction: column; gap: 48px; }
.hero-text { max-width: 600px; }
.hero-eyebrow { color: #a9bad0; }
.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-head);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  line-height: 1.25;
  margin: 0 0 22px;
}
.hero-headline span { color: var(--gold); }
.hero-headline .hero-headline-accent { color: var(--white); }
.hero .hero-sub { margin-bottom: 34px; }
.hero .btn-ghost { color: var(--white); }

.hero-visual {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.hero-transform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-transform-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-transform-before-img {
  /* The real file a customer sent us — 83x55px, shown enlarged on purpose
     so the browser's own upscaling blur makes the point for us. Sized to
     roughly match the scale used for the Rookery example (240x240). */
  width: 240px;
  height: auto;
}
.hero-transform-after-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.hero-transform-after-btn:hover,
.hero-transform-after-btn:focus-visible {
  transform: scale(1.04);
}
.hero-transform-after-img {
  width: 100%;
  max-width: 230px;
  height: auto;
  pointer-events: none;
}
.hero-transform-arrow { width: 24px; height: 48px; color: var(--gold); margin: 2px 0; }
.hero-transform-caption {
  display: block;
  width: 100%;
  margin: 0;
  background: none;
  border: none;
  padding: 4px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a9bad0;
  line-height: 1.5;
  cursor: pointer;
}
.hero-transform-caption span { color: var(--gold); }
.hero-transform-caption:hover span,
.hero-transform-caption:focus-visible span {
  text-decoration: underline;
}

@media (min-width: 900px) {
  .hero-columns { flex-direction: row; align-items: center; gap: 64px; }
  .hero-text { flex: 1; max-width: none; }
  .hero-visual { flex: 0 0 300px; }
  .hero-transform-after-img { max-width: 260px; }
}

/* Usable Logos stays white/plain up top (its own navy offer-band below
   carries the color); Consistent Content runs navy/gold, full section,
   matching Client Work + Contact further down. */
.pillar-logos { background: var(--white); }

/* FAQ — answers the exact questions people search for (blurry/pixelated
   logo, printer rejections, why vectorize, AI-made logos) in a native
   <details>/<summary> accordion, so it's accessible and needs no JS.
   Sits at the bottom of the page, right after Contact and before the
   footer, so it uses the same dark theme as those two rather than the
   white pillar sections, to end the page on one cohesive dark block. */
.faq { background: var(--black); color: var(--white); }
.faq .eyebrow { color: var(--gold); }
.faq h2 { color: var(--white); }
.faq .section-sub { margin-bottom: 8px; }
.faq-list {
  max-width: 760px;
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--white);
  padding-right: 30px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: -2px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  color: #a9bad0;
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 640px;
}
.pillar-content {
  background: var(--bg-deep);
  color: var(--white);
}
.pillar-content .eyebrow { color: var(--gold); }
.pillar-content h2 { color: var(--white); }
.pillar-content .section-sub { color: #a9bad0; }
/* The three offer cards sit in their own navy band below the (white)
   intro text, same as originally designed. */
.offer-band {
  background: var(--bg-deep);
  padding: 54px 0 64px;
}
.offer-band .section-inner { padding: 0 24px; }
.offer-grid-heading {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0 0 20px;
}
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
  .offer-grid-single { grid-template-columns: 1fr; max-width: 420px; }
}
.offer-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px 22px;
}
.offer-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--line);
  margin: 0;
}
.offer-card h3 { font-size: 1.12rem; color: var(--navy); margin: 0 0 10px; padding-right: 30px; }
.offer-target {
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 10px;
}
.offer-desc { color: #4a5568; margin: 0; font-size: 0.96rem; line-height: 1.55; }
.offer-band-cta { text-align: center; margin: 32px 0 0; }

/* Raster vs. Vector drag-compare — a letter E rendered two ways, with a
   draggable divider. --pos (0%-100%, set by script.js) is the divider's
   position from the left; the vector image is clip-path'd to only show
   left of it, so the raster base image shows through on the right. */
.rv-compare { margin: 40px 0 0; }
.rv-compare-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 900 / 966;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(12, 15, 38, 0.16);
  border: 1px solid var(--line);
  background: var(--white);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  --pos: 50%;
}
.rv-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.rv-img-base { position: absolute; inset: 0; }
.rv-reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.rv-img-reveal { position: absolute; inset: 0; }
.rv-label {
  position: absolute;
  top: 10px;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  background: rgba(8, 7, 29, 0.65);
  border-radius: 999px;
  padding: 4px 10px;
  pointer-events: none;
}
.rv-label-left { left: 10px; }
.rv-label-right { right: 10px; }
.rv-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  z-index: 3;
  cursor: ew-resize;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}
.rv-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.rv-handle:focus-visible .rv-handle-grip {
  box-shadow: 0 0 0 4px rgba(244, 180, 62, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.rv-caption {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #4a5568;
  max-width: 340px;
}
.logo-lockup-caption {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: #4a5568;
}

/* Two-column top of Usable Logos: the raster/vector slider paired with the
   WellKeepers lockup demo, so the lockup fills the open space beside the
   slider on wider screens instead of leaving it empty. Stacked on mobile. */
.usable-logos-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}
.usable-logos-top .rv-compare,
.usable-logos-top .logo-lockup-demo { margin-top: 0; }

@media (min-width: 900px) {
  .usable-logos-top {
    flex-direction: row;
    align-items: stretch;
    gap: 48px;
  }
  .usable-logos-top .rv-compare { flex: 0 0 340px; }
  .usable-logos-top .logo-lockup-demo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Portfolio filter checkboxes */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  row-gap: 14px;
  column-gap: 28px;
  margin: 0 0 28px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a9bad0;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.filter-chip:hover { color: var(--white); }
.filter-chip.active { color: var(--white); }
.filter-chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.filter-chip input[type="checkbox"]:hover { border-color: rgba(255,255,255,0.7); }
.filter-chip input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.filter-chip input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--navy-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-chip .count { opacity: 0.6; font-weight: 400; }
.filter-chip.active .count { opacity: 0.8; }

/* How It Works — steps, then the BTS video as a live example.
   White/informative, not an offer — part of the offer/inform rhythm
   running down the page (offer, inform, offer, inform, offer, inform,
   contact), so this sits on white between the two navy offer sections
   on either side of it instead of matching their dark background. */
.process { background: var(--white); }
.process-columns {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}
.steps-list li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.08rem;
  color: #4a5568;
}
.steps-list li:first-child { padding-top: 0; }
.steps-list li:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-deep);
  min-width: 34px;
}
.process-video-wrap {
  max-width: 420px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.process-video { width: 100%; display: block; }

/* Desktop: video on the left, steps on the right */
@media (min-width: 900px) {
  .process-columns {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
  }
  .process-video-wrap { flex: 0 0 360px; }
  .steps-list { flex: 1; padding-top: 4px; }
}

/* Why This Matters — scroll-linked penguin layer separation */
.why-vector { background: var(--white); }
.why-vector-scroll {
  position: relative;
  /* Scroll runway — holds the graphic assembled as it reaches center for
     a beat, then lets go. Most of the separation actually plays out
     during the natural scroll away afterward (see script.js), so this
     doesn't need to be long — just enough for a brief hold, not a long
     stuck-in-place feel. script.js sets the real height inline (pin's
     own height + a short hold) as soon as it runs; this is just the
     pre-JS fallback, so it's a reasonable content estimate rather than
     the old flat 150vh, which left a tall dead gap of white space below
     the pin once the JS-driven exit finished. */
  height: 105vh;
}
.why-vector-pin {
  position: sticky;
  top: 0;
  /* No min-height — it used to force this box to 82vh tall regardless of
     how much content there was to fill it, leaving dead space below the
     (shorter) actual content. Sized to content now; script.js measures
     this box's real height to size the scroll runway above it. */
  display: flex;
  /* Top-aligned, not centered — vertical centering left a big dead band of
     empty white space above the content (worse right after the offer
     cards, which sit flush against this section). This way the normal
     .section-inner top padding is the only gap, matching every other
     section on the page. */
  align-items: flex-start;
}
.why-vector-pin .section-inner { width: 100%; }
.why-vector-columns {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 36px;
}
.why-vector-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-vector-list > li {
  position: relative;
  padding-left: 28px;
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.5;
}
.why-vector-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-deep);
}
.why-vector-list ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.why-vector-list ul li {
  position: relative;
  padding-left: 18px;
  color: #6b7686;
  font-size: 0.9rem;
  line-height: 1.5;
}
.why-vector-list ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-deep);
}
.why-vector-stage {
  position: relative;
  flex-shrink: 0;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  overflow: visible;
}
.penguin-layers {
  position: relative;
  width: 100%;
  height: 100%;
}
.penguin-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform, filter;
}

@media (min-width: 900px) {
  .why-vector-columns {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .why-vector-list { flex: 1; }
  .why-vector-stage { flex: 0 0 380px; width: 380px; height: 380px; order: -1; }
}

/* Logo Craft — the Mars & Cards color-vs-reversed set, on navy so it reads
   as its own offer-adjacent beat between the two white "proof" sections
   (Why Vector, Process). Intro text runs full width like every other
   section; the list and image sit side by side underneath, same pattern
   as Why Vector's list-plus-image row. */
.logo-craft { background: var(--bg-deep); color: var(--white); }
.logo-craft h2 { color: var(--white); }
.logo-craft .section-sub { color: #a9bad0; }
.logo-craft-columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}
.logo-craft-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.logo-craft-list > li {
  position: relative;
  padding-left: 28px;
  color: #a9bad0;
  font-size: 1rem;
  line-height: 1.5;
}
.logo-craft-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
/* Full-color and reversed versions shown side by side, both clean enough
   to sit directly on the dark background — no card needed. */
.logo-craft-stage { width: 100%; margin: 0 auto; }
.logo-craft-img { width: 100%; height: auto; display: block; }

@media (min-width: 900px) {
  .logo-craft-columns {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
  .logo-craft-list { flex: 1; }
  .logo-craft-stage { flex: 0 0 440px; max-width: 440px; }
}

/* Case study — a real example, original file + the guide built from it.
   Now folded into the Consistent Content section as its "Proof" half.
   The original-file image sits beside the intro block (headline + offer
   card), vertically centered against that whole block — centering it
   against just the headline left it poking up above the text, looking
   oddly high; everything else (proof text, guide thumbnails) runs
   full-width below as its own stack.
   The whole section runs on the same navy/gold treatment as the offer
   band above it — dark background, gold eyebrow/headline, light body
   copy — with the offer card and guide thumbnails kept white so they
   still pop against it. */
.case-study {
  background: var(--bg-deep);
  color: var(--white);
}
.case-study .eyebrow { color: var(--gold); }
.case-study h2 { color: var(--white); }
.case-study .section-sub { color: #a9bad0; }
.consistent-content-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* The guide/thumbnail strip runs the full section width. */
.case-study-guide-full { margin-top: 20px; }

/* The offer card sits centered below the guide strip, with its own CTA
   button beneath it rather than tucked into the intro copy above. */
.consistent-content-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
.consistent-content-offer .offer-grid-single { width: 100%; }

/* Logo lockup demo — the WellKeepers full lockup / stacked / abbreviated /
   icon-only set, the concrete payoff of "one brand, everywhere it shows
   up": a version that fits whatever space it needs to go in. Lives in the
   light Usable Logos section, beside the raster/vector slider. Shown plain,
   no card/box, no caption. */
.logo-lockup-demo-img { width: 100%; height: auto; display: block; }

.case-study-scroll-hint {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: #6b7688;
}
.case-study-scroller-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-study-scroll-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--navy-deep);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.case-study-scroll-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}
.case-study-scroller {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.case-study-scroller::-webkit-scrollbar { display: none; }
.case-study-page {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  scroll-snap-align: center;
}
.case-study-page:hover, .case-study-page:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
.case-study-page img { width: 100%; display: block; }

@media (max-width: 640px) {
  .case-study-page { width: 96px; }
  .case-study-scroll-btn { width: 34px; height: 34px; font-size: 1.1rem; }
}

/* About */
.about { background: var(--white); }
.about-bio {
  margin: 0 0 32px;
}
.about-bio-text {
  color: #4a5568;
  font-size: 1.05rem;
  line-height: 1.7;
}
.about-bio-text p { margin: 0 0 16px; }
.about-bio-text p:last-child { margin-bottom: 0; }
.about-bio-lede {
  font-family: var(--font-body);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
}
.about .hero-cta .btn-gold { color: var(--navy-deep); }

/* Explore the Museum — an interactive photo instead of a plain list.
   Two stacked copies of the same photo do the flashlight effect: a dim
   base layer underneath, and a full-brightness layer on top whose
   visibility is clipped to a soft circle around the cursor via a CSS
   mask that tracks --mx/--my (set in script.js on move) — no canvas
   needed. Five hotspots are pinned to real objects in the photo and pop
   up a title + description on click. */
.museum-intro { margin: 4px 0 24px; }
.museum-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(12, 15, 38, 0.16);
  cursor: none;
  --mx: 50%;
  --my: 50%;
  touch-action: none;
  margin-bottom: 36px;
}
/* While a hotspot popup is open, the flashlight dot ends up hidden behind
   it (popup sits above it, z-index-wise), which left no visible pointer
   at all while hunting for the close button. Bring the real cursor back
   for the whole stage in that state so it's easy to find and click. */
.museum-stage.popup-open { cursor: default; }
.museum-photo-dim,
.museum-photo-bright {
  display: block;
  width: 100%;
  height: auto;
}
.museum-photo-dim { filter: brightness(0.2) saturate(0.65); }
.museum-photo-bright {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle 120px at var(--mx) var(--my), black 50%, transparent 100%);
  mask-image: radial-gradient(circle 120px at var(--mx) var(--my), black 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.museum-stage.is-lit .museum-photo-bright { opacity: 1; }
.museum-flashlight-cursor {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(244, 180, 62, 0.85);
  background: radial-gradient(circle, rgba(244, 180, 62, 0.35), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.museum-stage.is-lit .museum-flashlight-cursor { opacity: 1; }

/* Small always-visible progress badge, top-right of the photo. */
.museum-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(8, 7, 29, 0.72);
  border: 1px solid rgba(244, 180, 62, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  pointer-events: none;
}

/* Hotspot dots stay hidden until the flashlight passes near them, and
   grow brighter/larger the closer the light gets (driven by --reveal,
   a 0–1 value script.js writes onto each hotspot every pointer move). */
.museum-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  --reveal: 0;
}
.museum-hotspot-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transform: scale(calc(0.55 + (var(--reveal, 0) * 0.55)));
  box-shadow: 0 0 calc(3px + (var(--reveal, 0) * 12px)) calc(1px + (var(--reveal, 0) * 5px)) rgba(244, 180, 62, 0.55);
  transition: opacity 0.1s linear, transform 0.1s linear, box-shadow 0.1s linear;
}
.museum-stage.is-lit .museum-hotspot-dot { opacity: var(--reveal, 0); }
.museum-hotspot.is-hot .museum-hotspot-dot {
  animation: museum-pulse 1.6s ease-in-out infinite;
}
/* Once a hotspot has been opened, its dot stays faintly visible (pale,
   not gold) even outside the flashlight, so you can see at a glance
   which ones you've already found this visit. Just a JS class, so it
   resets on reload, no storage involved. */
.museum-hotspot.is-found .museum-hotspot-dot {
  opacity: 0.4;
  background: #cdd6e5;
}
.museum-stage.is-lit .museum-hotspot.is-found .museum-hotspot-dot {
  opacity: max(var(--reveal, 0), 0.4);
}
.museum-hotspot:hover .museum-hotspot-dot,
.museum-hotspot:focus-visible .museum-hotspot-dot {
  opacity: 1 !important;
  background: var(--white);
  box-shadow: 0 0 0 7px rgba(244, 180, 62, 0.45);
  transform: scale(1.15);
}
@keyframes museum-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(244, 180, 62, 0.3); }
  50% { box-shadow: 0 0 0 10px rgba(244, 180, 62, 0.08); }
}
.museum-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(320px, calc(100% - 48px));
  background: var(--bg-deep);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2;
}
.museum-popup.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.museum-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.museum-popup-title {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--gold);
  margin: 0 0 12px;
  padding-right: 24px;
}
.museum-popup-desc {
  margin: 0;
  color: #cdd6e5;
  font-size: 0.96rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .museum-stage { cursor: default; }
  /* On a narrow phone the photo (and so the stage) is short, but a
     hotspot's popup can easily be taller than that — centered on the
     stage like on desktop, its top (with the close button) was getting
     sliced off by the stage's overflow: hidden. Anchoring to the
     viewport instead, not the stage, means its size no longer depends
     on how tall the stage happens to be, so it's always fully visible;
     the max-height + scroll is a backstop for the rare very-short
     screen where even that doesn't leave room for the whole popup. */
  .museum-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .museum-popup.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Portfolio grid (sits directly under the headline, inside .hero-work) */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.grid-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.grid-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.5s ease;
}
.grid-tile:hover img,
.grid-tile:focus-visible img {
  transform: scale(1.06);
}
.grid-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  background: linear-gradient(to top, rgba(8,7,29,0.88), rgba(8,7,29,0));
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.grid-tile:hover .grid-tile-label,
.grid-tile:focus-visible .grid-tile-label {
  opacity: 1;
  transform: translateY(0);
}
/* Touch devices have no hover — show the title by default instead of
   hiding it behind an interaction that can't happen. */
@media (hover: none), (pointer: coarse) {
  .grid-tile-label { opacity: 1; transform: translateY(0); }
}
.grid-tile.hidden { display: none; }

/* Contact */
.contact { background: var(--navy-deep); color: var(--white); }
.contact h2 { color: var(--white); }
.contact .section-sub { color: #a9bad0; }
.contact-direct { color: #a9bad0; font-size: 0.95rem; margin-top: 10px; }
.contact-direct a { color: var(--gold); text-decoration: none; }
.contact-direct a:hover { text-decoration: underline; }
.contact-form { max-width: 560px; margin-top: 36px; }
.form-row { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a9bad0;
}
.form-row input, .form-row textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: 16px; color: var(--gold); font-size: 0.95rem; min-height: 1.2em; }

/* Footer */
.site-footer { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: #a9bad0;
  font-size: 0.9rem;
}
.footer-mark { height: 26px; width: auto; opacity: 0.85; flex-shrink: 0; }
.footer-text p { margin: 0; }
.footer-contact { margin-top: 2px; }
.footer-contact a { color: #a9bad0; text-decoration: none; }
.footer-contact a:hover { color: var(--gold); text-decoration: underline; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 16, 28, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 24px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  max-width: 1100px;
  width: 100%;
  max-height: 86vh;
  background: var(--navy-deep);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
}
.lightbox-image-wrap { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-image-wrap img { width: 100%; height: 100%; object-fit: contain; max-height: 86vh; }
.lightbox-info { padding: 40px 34px; color: var(--white); overflow-y: auto; }
.lightbox-category {
  font-family: var(--font-head);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin: 0 0 10px;
}
.lightbox-info h3 { font-size: 1.6rem; color: var(--white); margin-bottom: 4px; }
.lightbox-client { color: #a9bad0; margin: 0 0 24px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; }
.lightbox-story { color: #a9bad0; white-space: pre-line; }
.lightbox-story a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.lightbox-story a:hover, .lightbox-story a:focus-visible { color: var(--white); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }

/* Page lightbox — case-study pages, zoomed just enough to see the page
   clearly (capped well below full-resolution/legible-at-a-glance size).
   Comes after .lightbox-content above so this narrower, single-image
   layout wins over the two-column grid used by the portfolio lightbox. */
.page-lightbox-content {
  display: block;
  max-width: 360px;
  width: 100%;
  max-height: 80vh;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.page-lightbox-content img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 80vh;
  object-fit: contain;
}

/* Hero logo lightbox — the "what we built" vector shown as large as it'll
   go, no card/frame, just the mark itself blown up huge against the dim
   backdrop. That size jump *is* the point: the same file that looked
   crisp at thumbnail size stays just as crisp here. */
#hero-logo-lightbox {
  /* Solid, and matched exactly to the flat navy baked into the SVG itself
     (--bg-deep) — the SVG needs an opaque backing for its cutout lettering
     to read correctly, so this has to be the identical color or a seam
     shows up around the image. */
  background: var(--bg-deep);
}
#hero-logo-lightbox-img {
  /* An explicit width/height box (not max-width/max-height, which only
     shrink an oversized image — this SVG's intrinsic size is small, so it
     needs to be told to grow) with object-fit:contain to scale the vector
     up to fill most of the screen without distorting it. */
  width: 90vw;
  height: 88vh;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .lightbox-content { grid-template-columns: 1fr; overflow-y: auto; }
  .lightbox-image-wrap img { max-height: 46vh; }
}
@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .header-nav-bar-inner { padding: 0 20px; }
  #site-nav {
    width: auto !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }
  #site-nav.open { max-height: 220px; padding: 14px 0; }
  .nav-btn { text-align: left; }
  .section-inner { padding: 60px 20px; }
  .hero-work-inner { padding: 60px 20px 70px; }
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  /* Tiles this small can't fit the always-on (touch devices have no
     hover) client-name label without it covering most of the photo.
     Drop the label here and let the image carry the tile on its own. */
  .grid-tile-label { display: none; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}