/* ---------- fonts (self-hosted Google Fonts, OFL; latin + latin-ext) ---------- */
/* latin-ext */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/funnel-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/funnel-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/funnel-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/funnel-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/funnel-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/funnel-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/funnel-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Arrow Service — shared styles
   Aesthetic: warm minimal, large editorial type, dark hero,
              taupe overlays, hairline underlined links.
   ============================================================ */

:root {
  --bg: #F4F1EB;
  --bg-deep: #ECE7DE;
  --ink: #161412;
  --ink-2: #2A2622;
  --muted: #6F675F; /* >=4.5:1 on --bg, --bg-deep and cards */
  --hairline: rgba(22, 20, 18, 0.14);
  --hairline-soft: rgba(22, 20, 18, 0.08);
  --taupe: #BEA88E;
  --taupe-overlay: rgba(190, 168, 142, 0.94);
  --taupe-overlay-on-light: rgba(190, 168, 142, 0.85);
  --on-dark: #F4F1EB;
  --on-dark-muted: rgba(244, 241, 235, 0.7);

  --font-display: "Funnel Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Funnel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  --radius: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img { display: block; max-width: 100%; }

/* ---------- typography ---------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}

.kicker--on-dark { color: var(--on-dark); opacity: 0.9; }

.h-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 7.2vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
}

.h-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: pretty;
}

.h-card {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}

p { margin: 0; }
.body-lg { font-size: 18px; line-height: 1.55; max-width: 56ch; }
.body { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* hairline underline link, lifted from the homepage */
.link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 17px;
  color: inherit;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap 200ms ease, opacity 200ms ease;
}
.link svg { width: 14px; height: 14px; flex: none; }
.link:hover { gap: 18px; }
.link--on-dark { color: var(--on-dark); }
.link--lg { font-size: 19px; }

/* ---------- layout ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { flex: 1; }
/* Short pages (contact): stack sections so the last one can absorb spare
   height and sit directly above the footer instead of leaving a gap. */
.main--fill { display: flex; flex-direction: column; }
.main--fill > .contact-strip { margin-top: auto; }

section + section { /* no global gap, sections set their own */ }

.section {
  padding: clamp(72px, 10vw, 140px) 0;
}

.section--tight { padding: clamp(48px, 6vw, 88px) 0; }

.rule {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header--dark { color: var(--on-dark); }
.site-header--light { color: var(--ink); }

.logo {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.logo svg { width: auto; height: 30px; display: block; }
.logo__mark { color: currentColor; }
.logo__green { fill: #4FB07A; }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 16px;
}
.nav a {
  position: relative;
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav a.is-active { border-bottom: 1px solid currentColor; }
.nav a:hover { border-bottom: 1px solid currentColor; }
.nav a .arr { width: 11px; height: 11px; }

/* ---- nav dropdown ---- */
.nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__group > a .chev {
  width: 9px; height: 9px; margin-left: 4px;
  transition: transform 200ms ease;
  opacity: 0.75;
}
.nav__group:hover > a .chev,
.nav__group:focus-within > a .chev,
.nav__group.is-expanded > a .chev { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -22px;
  margin-top: 6px;
  min-width: 260px;
  background: rgba(244, 241, 235, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 30;
  box-shadow: 0 18px 40px rgba(22, 20, 18, 0.18);
}
/* invisible bridge between link and panel so hover doesn't break */
.nav__submenu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu,
.nav__group.is-expanded .nav__submenu {   /* .is-expanded: first tap on touch (js/menu.js) */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Escape pressed (js/menu.js): close even while hovered/focused. Desktop only —
   the mobile panel always shows the submenu inline. */
@media (min-width: 761px) {
  .nav__group.is-dismissed .nav__submenu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav__group.is-dismissed > a .chev { transform: none; }
}

.nav__submenu a {
  padding: 12px 22px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background 140ms ease, padding-left 200ms ease;
}
.nav__submenu a:hover {
  background: rgba(190, 168, 142, 0.18);
  border-bottom: none;
  padding-left: 26px;
}
.nav__submenu a .sub-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.nav__submenu a.is-active { background: rgba(190, 168, 142, 0.22); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  width: 100%;
  height: clamp(640px, 92vh, 900px);
  overflow: hidden;
  color: var(--on-dark);
}
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__veil {
  position: absolute; inset: 0;
  /* left-to-right shade keeps the white hero text legible over the bright
     slides; the photo stays clear on the right (behind the service cards) */
  background:
    linear-gradient(90deg, rgba(14,12,11,0.33) 0%, rgba(14,12,11,0.23) 30%, rgba(14,12,11,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  /* text spans the full width on phones: shade from the middle down */
  .hero__veil {
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.14) 30%, rgba(14,12,11,0.4) 55%, rgba(14,12,11,0.62) 100%);
  }
  /* phones: 56px less air between the hero links and the slider bar; the
     hero is shortened by the same 56px so everything above stays put */
  .hero { height: clamp(584px, calc(92vh - 56px), 844px); }
  .hero .hero__inner { padding-bottom: 104px; } /* .hero prefix: the base .hero__inner rule comes later in this file */
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 160px;
}

.hero__kicker { margin-bottom: 18px; }
/* The three services in the kicker link to their pages (the only route to
   them in the hero on phones, where the service cards are not shown). They
   look like plain text: no underline or arrow. The vertical padding is
   invisible and only enlarges the tap area; it must stay within the line
   height, because on phones the kicker wraps to two rows and taller padding
   made the second row's link cover the first row's. */
.hero__kicker a { padding: 5px 0; }
.hero__kicker a:focus-visible { outline: 1px solid var(--on-dark); outline-offset: 2px; }
@media (max-width: 760px) {
  .hero__kicker { line-height: 28px; }   /* rows far enough apart for separate tap areas */
}

.hero__links {
  display: flex;
  gap: 44px;
  margin-top: 36px;
}

/* page-specific compact hero used on inner pages */
.subhero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}
.subhero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.subhero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
}
/* Service pages: stronger dark gradient — heavy behind the text on the
   left, easing off to the right so the photo still reads. */
.subhero--service .subhero__bg { opacity: 0.8; }
.subhero--service .subhero__bg::after {
  background:
    linear-gradient(90deg, rgba(14,12,11,0.88) 0%, rgba(14,12,11,0.62) 45%, rgba(14,12,11,0.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65) 100%);
}
@media (max-width: 760px) {
  /* text spans the full width on phones: darken top-to-bottom instead */
  .subhero--service .subhero__bg::after {
    background: linear-gradient(180deg, rgba(14,12,11,0.6) 0%, rgba(14,12,11,0.55) 40%, rgba(14,12,11,0.88) 100%);
  }
}
.subhero__inner {
  position: relative;
  z-index: 2;
  padding: 180px var(--gutter) 64px;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.subhero__meta {
  display: flex;
  gap: 56px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.subhero__meta > div { min-width: 140px; }
.subhero__meta dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-muted);
  margin-bottom: 8px;
}
.subhero__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.005em;
}

/* ---------- service cards (overlay row on homepage) ---------- */

.service-stack {
  position: absolute;
  right: var(--gutter);
  top: 140px;
  bottom: 56px;
  width: 460px;
  max-width: 38vw;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 3;
}
.service-card {
  position: relative;
  flex: 1;
  background: rgba(190, 168, 142, 0.28);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  border: 1px solid rgba(244, 241, 235, 0.14);
  color: var(--on-dark);
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 220ms ease, border-color 220ms ease;
  text-decoration: none;
}
.service-card:hover {
  background: rgba(190, 168, 142, 0.42);
  border-color: rgba(244, 241, 235, 0.24);
}
.service-card__thumb {
  width: 100%;
  height: 56%;
  min-height: 110px;
  background-size: cover;
  background-position: center;
}
.service-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.service-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.service-card__sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: rgba(244, 241, 235, 0.7);
  margin-top: 4px;
}
.service-card__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 235, 0.55);
  display: grid; place-items: center;
  flex: none;
}
.service-card__arrow svg { width: 14px; height: 14px; }

/* Short desktop windows (most laptops): the hero is 92vh tall, which is less
   than three full-size cards need (~850px), so the last card was clipped.
   Compact the stack and let each photo flex so all three always fit. */
@media (min-width: 981px) and (max-height: 920px) {
  .service-stack { top: 108px; bottom: 36px; gap: 14px; }
  .service-card { padding: 14px 18px 16px; gap: 12px; min-height: 0; }
  .service-card__thumb { flex: 1; height: auto; min-height: 48px; }
  .service-card__row { margin-top: 0; align-items: center; }
  .service-card__title { font-size: 21px; }
  .service-card__sub { font-size: 15px; margin-top: 2px; }
  .service-card__arrow { width: 32px; height: 32px; }
}

/* ---------- about teaser (image + text columns) ---------- */

.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about-teaser__label { font-family: var(--font-body); color: var(--ink); }
.about-teaser__copy {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.about-teaser__copy p + p { margin-top: 18px; }
.about-teaser__img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}

/* ---------- logo cloud ---------- */

.logo-cloud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
  padding: 40px 0;
  overflow: hidden;
}
.logo-cloud__item {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 60px;
  opacity: 0.55;
  filter: grayscale(1);
}
.logo-cloud__item svg { max-height: 36px; max-width: 100%; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 28px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}
.site-footer__nav {
  display: flex;
  gap: 36px;
  justify-content: center;
}
.site-footer__nav a { color: var(--ink); }
.site-footer__right { text-align: right; }
.site-footer__right a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 160ms ease; }
.site-footer__right a:hover { color: var(--ink); }

/* ---------- generic helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--muted);
  display: inline-block;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.two-col--reverse { grid-template-columns: 1.4fr 1fr; }

/* ---------- capabilities list ---------- */

.cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.cap-list li {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.cap-list__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.cap-list__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.cap-list__desc { color: var(--muted); font-size: 15px; }

/* ---------- project grid ---------- */

.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.project {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* project photos may be <img> (live pages: alt text, lazy loading) or
   background-image divs (element library); both fill the same frame */
img.project__img { display: block; width: 100%; height: auto; object-fit: cover; }
.project__img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
}
.project__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.project__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.project__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.project__note {
  color: var(--muted);
  font-size: 15px;
  max-width: 48ch;
}

/* span helpers within 12-col project grid */
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.project--tall .project__img { aspect-ratio: 3 / 4; }
.project--wide .project__img { aspect-ratio: 16 / 9; }

/* ---------- callout / cta strip ---------- */

.cta-strip {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(64px, 9vw, 120px) var(--gutter);
}
.cta-strip__inner {
  max-width: calc(var(--maxw) - 2 * var(--gutter)); /* match .container content width */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

/* ---------- contact specifics ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.contact-card {
  grid-column: span 4;
  padding: 32px 28px 36px;
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 280px;
  background: #FBF9F4;
}
.contact-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.contact-card__primary {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.contact-card__line { color: var(--ink-2); font-size: 15px; }
.contact-card--half { grid-column: span 6; min-width: 0; }

.contact-strip {
  background: var(--taupe-overlay);
  padding: 48px var(--gutter);
  color: var(--ink);
}
.contact-strip__inner {
  max-width: calc(var(--maxw) - 2 * var(--gutter)); /* match .container content width */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- stats row ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat {
  padding: 32px 0;
  border-right: 1px solid var(--hairline);
  padding-right: 16px;
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- map placeholder ---------- */

.map {
  position: relative;
  aspect-ratio: 16/8;
  background:
    repeating-linear-gradient(45deg, #E8E2D6 0 1px, transparent 1px 14px),
    #F0EBE0;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.map__pin {
  width: 18px; height: 18px;
  background: var(--ink);
  border: 4px solid var(--bg);
  border-radius: 50%;
  position: relative;
}
.map__pin::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border: 1px solid rgba(22,20,18,0.25);
  border-radius: 50%;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
.map__label {
  position: absolute;
  bottom: 18px; left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: rgba(244,241,235,0.9);
  padding: 6px 10px;
  border: 1px solid var(--hairline);
}

/* ---------- slider controls ---------- */

.slider-bar {
  position: absolute;
  left: var(--gutter);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 5;
}

.slider-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark);
  letter-spacing: 0.04em;
}

.slider-controls {
  display: flex;
  gap: 8px;
}
/* 28x24 hit area; the visible 2px bar is drawn by ::before */
.slider-dot {
  position: relative;
  width: 28px; height: 24px; background: none;
  border: none; padding: 0; cursor: pointer;
}
.slider-dot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 11px; height: 2px;
  background: rgba(244,241,235,0.4);
  transition: background 200ms ease;
}
.slider-dot.is-active::before { background: var(--on-dark); }
.slider-dot:focus-visible,
.slider-toggle:focus-visible { outline: 1px solid var(--on-dark); outline-offset: 2px; }

.slider-toggle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  background: none; border: 0; cursor: pointer;
  min-height: 24px; padding: 0 4px;
  opacity: 0.75;
  transition: opacity 200ms ease;
}
.slider-toggle:hover { opacity: 1; }

/* ---------- mobile nav toggle (hamburger) ---------- */

.nav-toggle {
  display: none;            /* desktop: hidden, shown via media query */
  position: relative;
  z-index: 60;
  width: 44px;              /* generous tap target */
  height: 44px;
  margin: -8px -12px -8px 0;/* expand hit area without shifting layout */
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.nav-toggle__bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 260ms ease, opacity 200ms ease;
}
.nav-toggle__bar:nth-child(1) { top: 18px; }
.nav-toggle__bar:nth-child(2) { top: 25px; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- responsive niceties ---------- */

@media (max-width: 980px) {
  .nav { gap: 18px; font-size: 14px; }
  /* tablet: anchor the Services panel to the trigger's right edge so it
     can't hang past the viewport (caused sideways scroll at ~761-800px) */
  .nav__submenu { left: auto; right: 0; }
  .service-stack { position: static; width: 100%; max-width: 100%; padding: 24px var(--gutter) 0; }
  .about-teaser { grid-template-columns: 1fr; }
  .about-teaser__copy { grid-template-columns: 1fr; }
  .two-col, .two-col--reverse, .cta-strip__inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .contact-card { grid-column: span 12; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .cap-list li { grid-template-columns: 40px 1fr; }
  .cap-list__desc { grid-column: 2; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer__right { text-align: center; }
}

/* ---------- mobile menu (full-screen slide-in) ---------- */

@media (max-width: 760px) {
  .nav-toggle { display: block; }

  /* 12 columns + 32px gaps don't fit on narrow phones; stack the cards */
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-card, .contact-card--half { grid-column: auto; }

  /* lock background scroll while the menu is open */
  body.menu-open { overflow: hidden; }

  /* Header becomes a fixed bar so the menu is reachable site-wide.
     Hides while scrolling down, fades back in while scrolling up. */
  /* Note: no `will-change: transform` / persistent transform here — it would
     make the header a containing block for the fixed `.nav` panel and break
     the full-screen overlay. The reveal animation below still runs fine. */
  .site-header {
    position: fixed;
    transition: transform 380ms ease, opacity 380ms ease,
                background-color 280ms ease, padding 280ms ease,
                box-shadow 280ms ease;
  }
  /* once scrolled off the hero, give it a solid bar so text stays legible */
  .site-header.is-scrolled {
    background: var(--ink);
    color: var(--on-dark);
    padding-top: 14px;
    padding-bottom: 14px;
    box-shadow: 0 8px 24px rgba(22, 20, 18, 0.18);
  }
  /* hidden state: slide up + fade out while scrolling down */
  .site-header.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  /* while the dark menu panel is open, keep the logo + toggle light */
  body.menu-open .site-header { color: var(--on-dark); }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 104px var(--gutter) 48px;
    background: var(--ink);
    color: var(--on-dark);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 360ms cubic-bezier(.16, .84, .44, 1), visibility 360ms;
    z-index: 50;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* top-level links: large, editorial, hairline divided */
  .nav > a,
  .nav__group > a {
    width: 100%;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;
    letter-spacing: -0.01em;
    padding: 20px 0;
    border-bottom: 1px solid rgba(244, 241, 235, 0.12) !important;
  }
  .nav > a:hover,
  .nav__group > a:hover { border-bottom: 1px solid rgba(244, 241, 235, 0.12); }
  .nav a .arr { width: 18px; height: 18px; }

  .nav__group { display: block; width: 100%; }
  .nav__group > a .chev { display: none; } /* submenu is always expanded here */

  /* Services submenu rendered inline (no hover needed on touch) */
  .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 0 16px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .nav__submenu::before { display: none; }
  .nav__submenu a {
    color: var(--on-dark);
    font-size: 17px;
    padding: 14px 20px;   /* same inset both sides so the 01/02/03 sit inside the row */
  }
  .nav__submenu a:hover { background: none; padding-left: 24px; }
  .nav__submenu a .sub-meta { color: var(--on-dark-muted); }
}

/* ---------- motion ----------
   Subtle entrance + scroll-reveal animations. Everything here is skipped when
   the visitor prefers reduced motion, and the page is fully visible without
   JavaScript: the load animations are pure CSS, and `.reveal` is only ever
   added by js/menu.js to elements that are still below the fold. */

@media (prefers-reduced-motion: no-preference) {
  /* Start at 1% opacity, not 0: Chrome ignores fully transparent content when
     it measures Largest Contentful Paint, so a fade from 0 hid the header text
     from that metric (Lighthouse reported NO_LCP on the service pages). */
  @keyframes rise-in { from { opacity: 0.01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0.01; } to { opacity: 1; } }
  @keyframes bg-settle { from { transform: scale(1.06); } to { transform: none; } }

  /* on load: hero / page-header text eases in, one line after another */
  .hero__inner > *,
  .subhero__inner > *,
  main > .section:first-child > .container > * {
    animation: rise-in 800ms cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero__inner > :nth-child(1), .subhero__inner > :nth-child(1), main > .section:first-child > .container > :nth-child(1) { animation-delay: 60ms; }
  .hero__inner > :nth-child(2), .subhero__inner > :nth-child(2), main > .section:first-child > .container > :nth-child(2) { animation-delay: 140ms; }
  .hero__inner > :nth-child(3), .subhero__inner > :nth-child(3), main > .section:first-child > .container > :nth-child(3) { animation-delay: 230ms; }
  .hero__inner > :nth-child(4), .subhero__inner > :nth-child(4) { animation-delay: 310ms; }

  /* homepage: service cards and slider controls follow the text */
  .service-card { animation: rise-in 800ms cubic-bezier(.2, .7, .2, 1) both; }
  .service-card:nth-child(1) { animation-delay: 260ms; }
  .service-card:nth-child(2) { animation-delay: 350ms; }
  .service-card:nth-child(3) { animation-delay: 440ms; }
  .slider-bar { animation: fade-in 800ms 520ms both; }

  /* page headers: the photo settles from a slight zoom */
  .subhero__bg { animation: bg-settle 1600ms cubic-bezier(.2, .7, .2, 1) both; }

  /* homepage slides drift very slowly while they are showing */
  .hero__slide { transition: opacity 800ms ease, transform 7000ms ease-out; }
  .hero__slide.is-active { transform: scale(1.05); }

  /* scroll reveal (class added by js/menu.js) */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms cubic-bezier(.2, .7, .2, 1), transform 700ms cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: none; }

  /* hover: arrows nudge up and to the right */
  .link svg, .service-card__arrow { transition: transform 220ms ease, background-color 220ms ease; }
  .link:hover svg { transform: translate(2px, -2px); }
  .service-card:hover .service-card__arrow { transform: translate(2px, -2px); background-color: rgba(244, 241, 235, 0.12); }
}

/* text for search engines and screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}