/* ============================================================
   North 48 Engineering — built to "N48 Website Draft v4"
   1920px design canvas; --u is one design pixel (100vw/1920,
   refined by JS). Below 900px a mobile flow takes over.

   Palette (Deep Water): Strait #1C3A4A · Tidal #2E6272 ·
   Arbutus #B5532A · Fog #EAE8E2 · Mist #A8C4CC ·
   Seafoam #C6D5CA · Weathered Wood #8C9C94

   Type: Neue Haas Grotesk (commercial) is substituted with
   Roboto + per-style letter-spacing calibrated to the PDF's
   exact text widths. Source Serif 4 is the design's own serif.
   ============================================================ */


/* ============================================================
   Neue Haas Grotesk Display — licensed webfonts (Commercial Type).
   Self-hosted from fonts/. Licence is per-domain: do not redistribute
   or commit these files to a public repository.
   Weight mapping is Commercial Type's own: 45 Light = 400,
   55 Roman = 500, 65 Medium = 600.
   ============================================================ */
@font-face {
  font-family: "Haas Grot Display Web";
  src: url("../fonts/NeueHaasGroteskDisplay(RoundDots)-45Light-Web.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Haas Grot Display Web";
  src: url("../fonts/NeueHaasGroteskDisplay(RoundDots)-46LightItalic-Web.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Haas Grot Display Web";
  src: url("../fonts/NeueHaasGroteskDisplay(RoundDots)-55Roman-Web.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Haas Grot Display Web";
  src: url("../fonts/NeueHaasGroteskDisplay(RoundDots)-56Italic-Web.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: block;
}
@font-face {
  font-family: "Haas Grot Display Web";
  src: url("../fonts/NeueHaasGroteskDisplay(RoundDots)-65Medium-Web.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}

:root {
  /* One design pixel: the 1920 canvas scales to the window. JS refines it and
     limits it by height on the pages that must not scroll; --ox then centres
     the canvas on those. Pre-script fallback only. */
  --u: calc(100vw / 1920);
  --hu: calc(100vw / 1920);   /* chrome unit: never smaller than the 1920 canvas */
  /* Footer unit: the Home page's scale, identical on every page so the footer
     is genuinely one component site-wide. Pre-script fallback only. */
  --fu: min(calc(100vw / 1920), calc(100vh / 1080));

  /* The compass is one size site-wide. Both pages that carry it scale off the
     same --u (neither is height-fitted), so declaring the diameter once means
     About and Work render it identically at any window size or zoom. */
  --dial: calc(580 * var(--u));

  /* The 4N8 collage spans the window and must not distort, so its height
     follows its width (artwork is 3840x650 = 5.9077). --band-extra is the
     height it gains past the design 324.8u; everything below it on the About
     page is offset by that, so the band can grow without colliding. */
  --band-h: calc(100vw / 5.9077);
  --band-extra: max(0px, calc(var(--band-h) - 324.8 * var(--u)));

  /* Same treatment for the Work page's pool strip: it spans the window, so its
     height follows its width (visible crop is 1919.9 x 224.5 = 8.5519) rather
     than staying at 224.5u and stretching the photo. --pool-extra grows the
     page so the Fog footer still lands under it. */
  --pool-h: calc(100vw / 8.5519);
  --pool-extra: max(0px, calc(var(--pool-h) - 224.5 * var(--u)));
  --ox: max(0px, calc((100vw - 1920 * var(--u)) / 2));

  --strait:  #1C3A4A;
  --tidal:   #2E6272;
  --arbutus: #B5532A;
  --fog:     #EAE8E2;
  --mist:    #A8C4CC;
  --seafoam: #C6D5CA;
  --wood:    #8C9C94;

  --sans:  "Haas Grot Display Web", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;

  /* tracking calibrated against the PDF (design px) */
  /* Measured against v5 using the real font: headings, column labels and the
     20px footer address all need ZERO tracking. The 18px body (+2.484) and the
     70px hero (+11.01) are tracked on purpose in the design. */
  --ls-hero: calc(10.46 * var(--u));
  --ls-body: calc(2.484 * var(--u));
  --ls-nav:  calc(0 * var(--u));
  --ls-head: calc(0 * var(--u));
  --ls-eyebrow: calc(0 * var(--u));
  --ls-sub:  calc(0 * var(--u));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--strait); }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  background: var(--strait);
  color: var(--fog);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-width: none;
}
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }

.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;
}

.canvas { position: relative; width: 100%; overflow: hidden; }   /* clips the bleed */
/* The screen is exactly one design canvas wide and centred; every absolute
   coordinate inside it therefore matches the design 1:1. */
.screen {
  position: relative;
  width: calc(1920 * var(--u));
  margin: 0 auto;
  overflow: visible;   /* .bleed bands escape here; .canvas does the clipping */
  background: var(--strait);
  /* At least one viewport tall. Zooming out makes the window taller than the
     design canvas; without this the box would end early and the footer would
     float up into the middle of the window with dead space beneath it. */
  min-height: 100vh;
}
/* Bands that must still reach the physical edges of the window */
.bleed {
  left: calc(-1 * var(--ox)) !important;
  width: 100vw !important;
}
/* The footer bleeds like the header and the other bands, so the nav and the
   address sit in the real window corners rather than being pushed inward by
   the letterbox on height-fitted pages. The logo re-centres on the window. */
.at { position: absolute; z-index: 1; }

/* ============================================================
   Header
   ============================================================ */
/* The header bleeds to the window edges so the logo and the nav sit in the
   actual corners. The canvas is centred and can be narrower than the window
   (height-fitted pages), which would otherwise inset them by the letterbox. */
/* The header keeps one size across the whole site, so the logo and nav never
   shrink on the height-fitted Home and Contact. The footer deliberately does
   NOT do this: it has real height, so pinning it to --hu makes it
   proportionally taller on those pages and steals room from the content. */
.site-header { --u: var(--hu); }
/* The footer takes --fu, the Home page's unit, so it is the same component on
   every page. It deliberately does NOT use --hu: that never drops below the
   1920 canvas, which on a fit-to-height page makes the footer proportionally
   taller and pushes the page content underneath it. */
.site-footer { --u: var(--fu); }
.site-header {
  position: absolute; top: 0;
  left: calc(-1 * var(--ox)); width: 100vw;
  height: calc(120 * var(--u)); z-index: 6;
}
.logo {
  position: absolute;
  left: calc(36.7 * var(--u));
  top: calc(35 * var(--u));
  width: calc(170.6 * var(--u));
}
.logo img { width: 100%; height: auto; }

.main-nav {
  position: absolute;
  right: calc(63 * var(--u));
  top: calc(32 * var(--u));
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(25 * var(--u));
  letter-spacing: var(--ls-nav);
  line-height: 1.18;
  white-space: nowrap;
  color: var(--tidal);
}
.main-nav a { color: var(--tidal); transition: color .18s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--fog); }
.main-nav .sep { color: var(--tidal); margin: 0 calc(8.41 * var(--u)); font-weight: 500; }

/* ============================================================
   Shared type
   ============================================================ */
.eyebrow {                       /* ABOUT / EXPERTISE / WHAT WE DO … */
  position: absolute;
  transform: translateY(calc(5.5 * var(--u)));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(30 * var(--u));
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.15;
  color: var(--arbutus);
  white-space: nowrap;
}
.h-serif {                       /* N48 ORIGIN / Work / Services / Team … */
  position: absolute;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(40 * var(--u));
  letter-spacing: calc(1.15 * var(--u));
  line-height: 1.25;
  transform: translateY(calc(12 * var(--u)));
  color: var(--fog);
  white-space: nowrap;
}
/* v5 sets the page title in Arbutus serif CAPS and drops the orange sans
   eyebrow that used to sit above it. */
.h-serif.title { color: var(--arbutus); }
.h-sans {                        /* How We Work / Rooted Here / Trust … */
  position: absolute;
  transform: translateY(calc(9 * var(--u)));
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(35 * var(--u));
  letter-spacing: var(--ls-head);
  line-height: 1.2;
  color: var(--fog);
  white-space: nowrap;
}
.sub-eyebrow {                   /* PROCESS / LOCAL / CLIENT RELATIONSHIPS … */
  position: absolute;
  transform: translateY(calc(5 * var(--u)));
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(22 * var(--u));
  letter-spacing: var(--ls-sub);
  line-height: 1.2;
  color: var(--mist);
  white-space: nowrap;
}
.quote {                         /* italic pull-quotes with arbutus bar */
  position: absolute;
  transform: translateY(calc(5 * var(--u)));
  font-family: var(--sans);
  font-weight: 500;
  font-style: italic;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  line-height: calc(27 * var(--u));
  color: var(--mist);
  padding-left: calc(11 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--arbutus);
}
.body-18 {
  position: absolute;
  transform: translateY(calc(6 * var(--u)));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: var(--ls-body);
  line-height: calc(21.5 * var(--u));
  color: var(--fog);
  text-align: justify;
  text-justify: inter-word;
}
.body-18 p + p { margin-top: calc(21.5 * var(--u)); }
.body-18.mist { color: var(--mist); }
.right-align { text-align: right; }

/* Arbutus pill button — serif label, as drawn */
.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(253 * var(--u));
  height: calc(44 * var(--u));
  background: var(--arbutus);
  border: 0;
  border-radius: calc(5 * var(--u));
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(17 * var(--u));
  line-height: 1;
  color: var(--fog);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  z-index: 2;
}
.btn:hover { background: #C4622F; }
.btn:active { transform: translateY(1px); }
.btn.tidal { background: var(--tidal); }
.btn.tidal:hover { background: #397387; }

/* LinkedIn square that pairs with email buttons */
.li-sq {
  position: absolute;
  width: calc(44.6 * var(--u));
  height: calc(44.7 * var(--u));
  background: var(--arbutus);
  border-radius: calc(5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .18s ease;
}
.li-sq svg { width: 62%; height: 62%; fill: var(--fog); }
.li-sq:hover { background: #C4622F; }
.li-sq.tidal { background: var(--tidal); }
.li-sq.tidal:hover { background: #397387; }

/* ============================================================
   Home  (one full screen: hero + photo stack + footer)
   ============================================================ */
.screen-home {
  /* Exactly the 1080-tall design canvas. --u is height-fitted on this page
     (body[data-fit-h]) so 1080 * --u always lands inside the window: the home
     page fits a 1080p screen at 100% zoom with nothing to scroll. */
  height: calc(1080 * var(--u));
}
/* the island map fills whatever space is left under the photo stack */
.screen-home .map-layer {
  top: calc(440 * var(--u));
  height: calc(1520 * var(--u));
}

/* ============================================================
   Home / About shared
   ============================================================ */
.hero-title {
  position: absolute;
  left: calc(174 * var(--u));
  top: calc(182 * var(--u));
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(70 * var(--u));
  letter-spacing: var(--ls-hero);
  line-height: calc(84 * var(--u));
  color: var(--fog);
  white-space: nowrap;
}
.hero-intro {
  position: absolute;
  left: calc(1173 * var(--u));
  top: calc(208 * var(--u));
  width: calc(611 * var(--u));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: var(--ls-body);
  line-height: calc(21.5 * var(--u));
  color: var(--fog);
  text-align: justify;
  text-align-last: right;
}
.hero-intro { transform: translateY(calc(6 * var(--u))); }
.hero-intro p + p { margin-top: calc(21.5 * var(--u)); }

/* ---------- carousel ---------- */
.carousel {
  position: absolute;
  left: 0;
  top: calc(473.3 * var(--u));
  width: 100%;
  height: calc(249.8 * var(--u));
  overflow: hidden;
  background: var(--strait);
  z-index: 1;            /* photos paint over the island-map layer */
}
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.carousel-track img {
  height: 100%;
  flex: 0 0 auto;
  object-fit: fill;   /* images are pre-cropped to their exact visible span */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* not clickable/draggable targets themselves */
}
/* Full-height vertical bars at both ends. They also sit ON TOP of the
   part-visible end photos, so those can't be clicked or dragged until
   the user actually scrolls them into view. */
.car-btn {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(27 * var(--u));
  background: var(--arbutus);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
}
.car-btn::before {                  /* chevron */
  content: "";
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-top: calc(2.5 * var(--u)) solid var(--fog);
  border-right: calc(2.5 * var(--u)) solid var(--fog);
}
.car-prev { left: 0; }
.car-prev::before { transform: rotate(-135deg); margin-left: calc(3 * var(--u)); }
.car-next { right: 0; }
.car-next::before { transform: rotate(45deg); margin-right: calc(3 * var(--u)); }
.car-btn:hover { background: #C4622F; }
.car-btn:active { background: #A2481F; }
.car-btn:focus-visible { outline: calc(3 * var(--u)) solid var(--mist); outline-offset: calc(-6 * var(--u)); }

/* Photo credit under the home photo stack. Muted Mist on Strait, aligned to
   the hero title's left edge, sitting in the map backdrop between the stack
   and the footer. */
.photo-note {
  position: absolute;
  left: calc(174 * var(--u));
  top: calc(747 * var(--u));
  width: calc(902 * var(--u));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(12 * var(--u));
  letter-spacing: calc(0.4 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--mist);
  z-index: 1;
}

/* map + dial layers */
.map-layer { position: absolute; left: 0; top: calc(440 * var(--u)); width: 100%; height: calc(1520 * var(--u)); pointer-events: none; z-index: 0; }
/* display:contents so the wrapper adds no box of its own -- the img keeps
   behaving exactly as a direct child of .screen on desktop and mobile. */
.dial-pic { display: contents; }
.dial-layer {
  position: absolute;
  width: var(--dial);
  height: var(--dial);
  pointer-events: none;
  z-index: 0;
}

.coords {
  position: absolute;
  transform: translateY(calc(6 * var(--u)));
  font-family: var(--serif);
  font-size: calc(21.3 * var(--u));
  line-height: calc(27 * var(--u));
  color: var(--mist);
  text-align: right;
  white-space: nowrap;
  z-index: 1;
}

.photo { position: absolute; overflow: hidden; z-index: 1; }
.photo img { width: 100%; height: 100%; object-fit: fill; /* frames match the drawn placement exactly */ }

/* values collage band (photos + 4N8 letters baked into one image) */
.values-band {
  position: absolute;
  left: 0;
  top: calc(1073.3 * var(--u));   /* About page position (v5) */
  left: calc(-1 * var(--ox));
  width: 100vw;
  height: var(--band-h);          /* width-driven: the artwork never stretches */
  z-index: 1;
  overflow: hidden;               /* clips the panels' slight overhang */
}
.values-band img { width: 100%; height: 100%; object-fit: fill; }

/* ---------- core-value stories on the 4N8 collage ----------
   One cell per photo, positioned as a percentage of the band so it stays on
   its photo at any window width (cells fall at 0 / 636 / 1289 / 1920 of the
   1920 artwork). The story is revealed by :hover and :focus-within, so there
   is nothing to dismiss -- moving off the photo puts it back. A click toggles
   .is-open as well, for touch, where hover does not exist. */
.value-cell {
  position: absolute;
  top: 0;
  height: 100%;
}
.value-hotspot {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(26 * var(--u));
}
.value-hotspot:focus-visible { outline: calc(2 * var(--u)) solid var(--mist); outline-offset: calc(-6 * var(--u)); }

/* the standing invitation, faded back so it never fights the photograph */
.value-prompt {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(17 * var(--u));
  letter-spacing: calc(2.4 * var(--u));
  text-transform: uppercase;
  color: rgba(234, 232, 226, 0.72);
  text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(8, 22, 29, 0.75);
  padding-bottom: calc(4 * var(--u));
  border-bottom: calc(1 * var(--u)) solid rgba(234, 232, 226, 0.5);
  transition: opacity .22s ease, transform .22s ease;
}
.value-cell:hover .value-prompt,
.value-cell.is-open .value-prompt,
.value-hotspot:focus-visible .value-prompt {
  opacity: 0;
  transform: translateY(calc(6 * var(--u)));
}

/* the story itself: sits over its own photo only */
.value-panel {
  position: absolute;
  /* Deliberately 3 design px wider than its cell on each side. The cells meet
     exactly on the seams between the three photographs, and only one panel is
     ever visible, so the overlap is invisible -- but it means sub-pixel
     rounding at any zoom can never leave a sliver of photo showing. */
  inset: 0 calc(-3 * var(--u));
  z-index: 2;
  padding: calc(34 * var(--u)) calc(38 * var(--u));
  background: rgba(19, 41, 52, 0.93);
  color: var(--fog);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .24s;
  overflow: hidden;
}
.value-cell:hover .value-panel,
.value-cell.is-open .value-panel,
.value-hotspot:focus-visible ~ .value-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease, visibility 0s;
}
.value-panel h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(30 * var(--u));
  letter-spacing: var(--ls-head);
  line-height: 1.1;
  color: var(--fog);
  margin-bottom: calc(14 * var(--u));
}
.value-panel p {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(14.5 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  line-height: calc(19.5 * var(--u));
  color: var(--fog);
}

.num-orange {
  position: absolute;
  transform: translateY(calc(3 * var(--u)));
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(30 * var(--u));
  letter-spacing: var(--ls-head);
  color: var(--arbutus);
  z-index: 1;
}

.cta-center {
  position: absolute;
  left: calc(11 * var(--u)); width: 100%;
  transform: translateY(calc(6 * var(--u)));
  letter-spacing: calc(2.0 * var(--u)) !important;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: var(--ls-body);
  color: var(--fog);
  z-index: 1;
}

/* ============================================================
   Work page
   ============================================================ */
.callout {
  position: absolute;
  transform: translateY(calc(3 * var(--u)));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(20.4 * var(--u));
  letter-spacing: calc(-0.4 * var(--u));
  line-height: 1.2;
  color: var(--fog);
  white-space: nowrap;
  z-index: 1;
}

/* the angled Arbutus gradient bands (Services / Close Collaborators) */
.grad-band {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  /* Sampled off v5: a straight ramp from transparent at the window's left edge
     to 72% Arbutus, which then holds flat. --ramp is where it tops out, in
     design px -- Services 926, Close Collaborators 1160. The old build topped
     out at 50% of the window for both, which is what made Close Collaborators
     read as unbalanced: it went fully orange far too early. */
  --ramp: 960;
  --clip-top: 1132;
  --clip-bot: 1397;
  /* Everything is measured from the CANVAS's left edge (--ox), not the
     window's. The band still bleeds to the window, but the ramp and the
     angled edge stay locked to the content, so zooming out keeps the dark
     end of the gradient sitting under the heading and body exactly as in
     the PDF instead of sliding away from them. Left of the canvas the ramp
     is already fully transparent, so it reads as Strait either way. */
  background: linear-gradient(90deg,
    rgba(181, 83, 42, 0) var(--ox),
    rgba(181, 83, 42, 0.72) calc(var(--ox) + var(--ramp) * var(--u)),
    rgba(181, 83, 42, 0.72) 100%);
  clip-path: polygon(
    0 0,
    calc(var(--ox) + var(--clip-top) * var(--u)) 0,
    calc(var(--ox) + var(--clip-bot) * var(--u)) 100%,
    0 100%);
}

.svc-item {
  position: absolute;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(1.9 * var(--u));
  line-height: calc(33 * var(--u));
  color: var(--fog);
  white-space: nowrap;
  z-index: 1;
}

/* ============================================================
   Team page
   ============================================================ */
.member-photo {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Lit from beneath rather than casting a shadow: a warm incandescent glow
   spills out from under the photo and the image itself lifts a touch, as if a
   bulb sitting behind it has just come on. Two stacked shadows -- a tight hot
   core and a wide soft falloff -- read as light rather than as a dark edge,
   and the warm near-white shows up on both the Strait background of the top
   row and the Arbutus band behind Riley. */
.member-photo:hover,
.member-photo:focus-visible {
  transform: translateY(calc(-4 * var(--u)));
  box-shadow:
    0 calc(7 * var(--u))  calc(12 * var(--u)) calc(-2 * var(--u)) rgba(255, 224, 178, 0.95),
    0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-4 * var(--u)) rgba(255, 193, 122, 0.70),
    0 calc(34 * var(--u)) calc(66 * var(--u)) calc(-10 * var(--u)) rgba(255, 165, 85, 0.45),
    0 calc(60 * var(--u)) calc(110 * var(--u)) calc(-20 * var(--u)) rgba(255, 150, 70, 0.28);
  filter: brightness(1.07);
}
.member-photo:focus-visible { outline: calc(3 * var(--u)) solid var(--mist); }

.member-name {
  position: absolute;
  transform: translateY(calc(10 * var(--u)));
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(35 * var(--u));
  letter-spacing: var(--ls-head);
  line-height: 1.15;
  color: var(--fog);
  white-space: nowrap;
  z-index: 1;
}
.member-name .creds {
  font-weight: 400;
  font-style: italic;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
}

/* ============================================================
   Bio modal
   ============================================================ */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bio-modal.open { display: flex; }
.bio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 32, 0.78);
  backdrop-filter: blur(3px);
}
.bio-panel {
  position: relative;
  width: min(880px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--strait);
  border: 1px solid rgba(234, 232, 226, 0.22);
  border-top: 4px solid var(--arbutus);
  border-radius: 6px;
  padding: 46px 54px 50px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin;
  scrollbar-color: var(--arbutus) transparent;
}
.bio-panel::-webkit-scrollbar { width: 8px; }
.bio-panel::-webkit-scrollbar-thumb { background: var(--arbutus); border-radius: 4px; }
.bio-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--arbutus);
  margin-bottom: 10px;
}
.bio-head {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 26px;
}
.bio-photo {
  width: 148px;
  height: 148px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.bio-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 30px;
  color: var(--fog);
}
.bio-name .creds { font-weight: 400; font-style: italic; font-size: 19px; color: var(--fog); }
.bio-role {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.4px;
  color: var(--mist);
  margin-top: 8px;
}
.bio-text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.9px;
  line-height: 1.65;
  color: var(--fog);
  text-align: justify;
}
.bio-text p + p { margin-top: 16px; }
.bio-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mist);
  font-size: 30px;
  line-height: 1;
  transition: color .15s ease;
}
.bio-close:hover { color: var(--fog); }
body.modal-open { overflow: hidden; }

/* ============================================================
   Contact page
   ============================================================ */
.form-shell {
  position: absolute;
  left: calc(49.3 * var(--u));
  top: calc(269.5 * var(--u));
  width: calc(774 * var(--u));
  height: calc(410.2 * var(--u));
  background: var(--mist);
  border-radius: calc(30 * var(--u));
  z-index: 1;
}
.form-shell form { position: absolute; inset: 0; }
.form-shell input,
.form-shell textarea {
  position: absolute;
  left: calc(9 * var(--u));
  width: calc(756 * var(--u));
  background: var(--fog);
  border: 0;
  border-radius: calc(28 * var(--u));
  padding: 0 calc(18 * var(--u));
  font-family: var(--sans);
  font-size: calc(18.7 * var(--u));
  letter-spacing: calc(0.5 * var(--u));
  color: var(--strait);
}
.form-shell input { height: calc(56.4 * var(--u)); }
.form-shell textarea {
  height: calc(126 * var(--u));
  padding-top: calc(14 * var(--u));
  border-radius: calc(22 * var(--u));
  resize: none;
  line-height: 1.4;
}
.form-shell ::placeholder { color: var(--arbutus); opacity: 1; }
.form-shell input:focus, .form-shell textarea:focus { outline: calc(2 * var(--u)) solid var(--tidal); }
.fi-1 { top: calc(16.8 * var(--u)); }
.fi-2 { top: calc(80.1 * var(--u)); }
.fi-3 { top: calc(143.4 * var(--u)); }
.fi-4 { top: calc(206.7 * var(--u)); }
.fi-5 { top: calc(270 * var(--u)); }

.form-send { left: calc(58.3 * var(--u)); top: calc(689.5 * var(--u)); }
.form-status {
  position: absolute;
  left: calc(332 * var(--u));
  top: calc(691.5 * var(--u));
  width: calc(620 * var(--u));
  font-family: var(--sans);
  font-size: calc(15 * var(--u));
  line-height: 1.35;
  min-height: calc(20 * var(--u));
  z-index: 2;
}
.form-status.success { color: var(--seafoam); }
.form-status.error { color: #F0B49A; }

.map-link { position: absolute; overflow: hidden; z-index: 1; }
.map-link img { width: 100%; height: 100%; object-fit: fill; }

.contours-layer { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }

.info-detail {
  position: absolute;
  transform: translateY(calc(5 * var(--u)));
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(22 * var(--u));
  letter-spacing: var(--ls-sub);
  line-height: calc(26 * var(--u));
  color: var(--mist);
  white-space: nowrap;
  z-index: 1;
}
/* ============================================================
   Footer (Fog band, 200 design-px tall)
   ============================================================ */
.site-footer {
  position: absolute;
  /* Flush with the bottom of the screen box (which is >= one viewport tall),
     never at a fixed design-px offset -- that is what kept it from following
     the window when the page was zoomed out. */
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(200 * var(--u));
  background: var(--fog);
  color: var(--strait);
  z-index: 2;
}
.footer-nav {
  position: absolute;
  transform: translateY(calc(3 * var(--u)));
  left: calc(71.7 * var(--u));
  top: calc(41 * var(--u));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(3.02 * var(--u));
  line-height: calc(21.6 * var(--u));
  color: var(--strait);
}
.footer-nav a { display: block; }
.footer-nav a:hover { color: var(--arbutus); }
.footer-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(41.8 * var(--u));
  width: calc(199.6 * var(--u));
}
.footer-logo img { width: 100%; height: auto; }
.footer-li {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(126.1 * var(--u));
  width: calc(29.5 * var(--u));
  height: calc(29.5 * var(--u));
  background: var(--arbutus);
  border-radius: calc(4 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-li svg { width: 64%; height: 64%; fill: var(--fog); }
.footer-li:hover { background: #C4622F; }
.footer-address {
  position: absolute;
  transform: translateY(calc(3 * var(--u)));
  right: calc(73.8 * var(--u));
  top: calc(18 * var(--u));
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(3.02 * var(--u));
  line-height: calc(21.6 * var(--u));
  color: var(--strait);
  text-align: right;
}
.footer-address p + p { margin-top: calc(24 * var(--u)); }
.footer-address a:hover { color: var(--arbutus); }

/* ============================================================
   Depth-gauge scrollbar (site-wide custom scrollbar)
   ============================================================ */
#depth-gauge {
  position: fixed; top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: 54px; z-index: 90;
  pointer-events: none;
}
/* --dg-top / --dg-h are set by main.js every frame so the rail always stops
   clear of the Fog footer; the literals here are only a pre-script fallback. */
.dg-rail {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: var(--dg-top, 8vh);
  height: var(--dg-h, 84vh);
  width: 1px;
  background: rgba(168, 196, 204, 0.30);
  pointer-events: auto; cursor: pointer; touch-action: none;
}
.dg-ticks {
  position: absolute; left: -3px; right: -3px; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg,
    rgba(168, 196, 204, 0.42) 0 1px, transparent 1px calc(100% / 12));
}
.dg-buoy {
  position: absolute; right: -3.5px; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--arbutus);
  box-shadow: 0 0 0 4px rgba(181, 83, 42, 0.20);
  transform: translateY(-50%);
  transition: box-shadow .15s ease;
}
.dg-rail:hover .dg-buoy, #depth-gauge.dg-dragging .dg-buoy { box-shadow: 0 0 0 6px rgba(181, 83, 42, 0.28); }
.dg-depth {
  position: absolute; right: 18px; top: 0;
  transform: translateY(-50%);
  font-family: var(--sans);          /* NHaas 55 Roman stand-in */
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--mist); white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(8, 22, 29, 0.55);
}
textarea::-webkit-scrollbar { width: 9px; }
textarea::-webkit-scrollbar-thumb { background: var(--arbutus); border-radius: 5px; }
textarea { scrollbar-width: thin; scrollbar-color: var(--arbutus) transparent; }

/* ============================================================
   Mobile (< 900px) — single column flow
   ============================================================ */
@media (max-width: 899px) {
  :root { --u: 1px; --hu: 1px; --fu: 1px; }

  .canvas, .screen { height: auto !important; overflow: visible; }
  .screen {
    width: 100% !important;      /* the 1920 canvas does not apply on phones */
    min-height: 0 !important;
    margin: 0;
    padding: 0 20px 40px;
  }
  /* the desktop full-bleed helpers must not apply here */
  .bleed { left: auto !important; width: auto !important; }

  .at, .site-header, .logo, .main-nav, .hero-title, .hero-intro, .carousel,
  .car-btn, .map-layer, .dial-layer, .coords, .photo, .values-band, .eyebrow,
  .h-serif, .h-sans, .sub-eyebrow, .quote, .body-18, .btn, .li-sq, .num-orange,
  .cta-center, .callout, .grad-band, .svc-item, .member-photo, .member-name,
  .form-shell, .form-send, .form-status, .map-link, .contours-layer,
  .info-detail, .photo-note, .site-footer, .footer-nav, .footer-logo,
  .footer-li, .footer-address {
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    white-space: normal !important;
  }
  .map-layer, .contours-layer { display: none; }

  /* A small centred compass with the coordinates inside it, as on desktop.
     300px leaves a clear inner circle of ~193px, enough for the longer serif
     line on About. The coords follow the dial and are pulled up over it:
     dial 300 tall, text ~32, so -166 centres it and 146 restores the flow. */
  .dial-layer {
    display: block !important;
    position: static !important;
    width: 300px !important;
    height: 300px !important;
    margin: 26px auto 0 !important;
    opacity: .85;
  }
  /* .callout.coords-line so this beats the blanket .callout text-align above */
  .coords, .callout.coords-line {
    display: block !important;
    position: static !important;
    width: 300px !important;
    margin: -166px auto 146px !important;
    transform: none !important;
    text-align: center !important;
    text-align-last: center !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  /* --- mobile corrections ------------------------------------------------
     Justified copy on a ~350px column opens ugly rivers between words and
     leaves the last line stranded, so everything sets flush left here. */
  .body-18, .hero-intro, .bio-text, .quote, .callout, .value-panel p,
  .info-detail, .svc-item {
    text-align: left !important;
    text-align-last: left !important;
  }

  /* The coordinates are a flourish that belongs to the compass graphic, and
     the compass is hidden on mobile, so the lat/long goes with it. */
  /* the coordinates now sit inside the mini compass, see below */

  /* The core-value stories are written to sit over their photographs. Stacked
     as plain text they duplicate the Trust / Balance / Craft blocks that
     follow, so they are desktop-only. */
  .value-cell { display: none !important; }

  /* Each Services group needs air above its label and between the label and
     its list -- otherwise the previous list runs straight into the next
     heading. */
  .sub-eyebrow.svc { margin: 30px 0 16px !important; }

  /* The Work callouts carry display tracking meant for 20px type; at 15px on a
     phone that reads as cramped, and 6px between them ran the two together. */
  .callout { letter-spacing: 0 !important; line-height: 1.5; margin: 0 0 12px; }
  .callout:first-of-type { margin-top: 14px; }

  /* The reset lets .at images render at their intrinsic size; the Loop logo is
     604px wide, which is what pushed the Team page 234px past the viewport. */
  .at { max-width: 100% !important; height: auto !important; }
  img.at[src*="loop-logo"] { width: 150px !important; margin: 4px 0 16px; }


  .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0 20px; }
  .logo { width: 140px !important; }
  .main-nav { font-size: 15px; letter-spacing: .3px; }
  .main-nav .sep { margin: 0 5px; }

  .hero-title { font-size: 30px; line-height: 1.25; letter-spacing: 2px; margin: 10px 0 18px; }
  .hero-intro { font-size: 15px; line-height: 1.6; letter-spacing: .8px; text-align: left; }
  .hero-intro p + p { margin-top: 12px; }

  .carousel { height: 200px !important; margin: 22px -20px; overflow-x: auto; scrollbar-width: none; }
  .carousel::-webkit-scrollbar { display: none; }
  .car-clone { display: none; }   /* loop clones are desktop-only */
  .carousel-track { height: 200px; width: max-content; }
  .carousel-track img { width: auto !important; }
  .car-btn { display: none; }
  .photo-note { font-size: 12px; line-height: 1.5; letter-spacing: .2px; margin: -6px 0 4px; }

  .eyebrow { font-size: 16px; letter-spacing: 2px; margin-top: 26px; }
  .h-serif { font-size: 27px; margin: 4px 0 10px; }
  .h-sans { font-size: 21px; letter-spacing: 0; margin: 22px 0 2px; }
  .sub-eyebrow { font-size: 13px; letter-spacing: 1.6px; margin-bottom: 8px; }
  .quote { font-size: 16px; line-height: 1.45; padding-left: 10px; border-left-width: 2px; margin: 8px 0 14px; }
  .body-18 { font-size: 15px; letter-spacing: .8px; line-height: 1.6; }
  .body-18 p + p { margin-top: 12px; }

  .btn { display: inline-flex; width: 253px !important; height: 44px !important; font-size: 16px; margin: 16px 0; position: relative; }
  .li-sq { display: inline-flex; width: 44px !important; height: 44px !important; vertical-align: middle; margin-left: 10px; }

  .photo { margin: 14px 0; }
  .photo img, .values-band img { width: 100% !important; height: auto !important; }
  .values-band { margin: 20px -20px; }
  .num-orange { font-size: 20px; margin-top: 18px; }
  .cta-center { font-size: 16px; text-align: center; margin: 26px 0 8px; }

  .callout { font-size: 15px; margin: 6px 0; }
  .grad-band { display: none; }
  .svc-item { font-size: 15px; line-height: 2; }

  .member-photo { width: 220px !important; height: 220px !important; margin: 20px 0 10px; }
  .member-name { font-size: 22px; }
  .member-name .creds { font-size: 15px; }

  .bio-panel { padding: 30px 22px 34px; }
  .bio-head { gap: 16px; margin-bottom: 18px; }
  .bio-photo { width: 96px; height: 96px; }
  .bio-name { font-size: 22px; }
  .bio-name .creds { font-size: 15px; }
  .bio-text { font-size: 15px; letter-spacing: .5px; }

  .form-shell { padding: 12px; border-radius: 24px; margin: 14px 0; }
  .form-shell form { position: static; display: flex; flex-direction: column; gap: 10px; }
  .form-shell input, .form-shell textarea { position: static; width: 100% !important; height: 48px !important; font-size: 16px; padding: 0 16px; }
  .form-shell textarea { height: 120px !important; padding: 12px 16px; }
  .map-link { display: block; margin: 14px 0; }
  .map-link img { width: 100% !important; height: auto !important; }
  .info-detail { font-size: 15px; letter-spacing: .8px; margin-bottom: 14px; }

  .site-footer { margin: 30px -20px 0; padding: 26px 20px; text-align: center; }
  .footer-nav { font-size: 15px; letter-spacing: 1.2px; margin-bottom: 16px; }
  /* the logo is an <a>; it must be blockified for the width to apply */
  .footer-logo { display: block; width: 170px !important; margin: 0 auto 12px; }
  .footer-li { width: 30px !important; height: 30px !important; margin: 0 auto 16px; }
  .footer-address { font-size: 14px; line-height: 1.6; text-align: center; }
  .footer-address p + p { margin-top: 10px; }

  #depth-gauge { width: 22px; --dg-top: 12vh; --dg-h: 76vh; }
  .dg-depth { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}