:root {
  --djup: #101A1F;
  --skiffer: #1E3038;
  --dimma: #7FA89B;
  --mareld: #B8D94A;
  --sand: #E8E4DC;
  --papper: #FAFAF8;

  --font-sans: "Familjen Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --unit: 8px;
  --radius-control: 4px;
  --radius-card: 8px;
  --measure: 68ch;
  --content-max: 1280px;
  --section-pad: 96px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--djup);
  background: var(--papper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }

::selection { background: var(--mareld); color: var(--djup); }

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

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
}

.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: var(--section-pad) 0; }
.section-dark { background: var(--djup); color: var(--papper); }
.section-light { background: var(--papper); color: var(--djup); }
.section-sand { background: var(--sand); color: var(--djup); }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 20px;
  color: var(--dimma);
}
.section-light .eyebrow, .section-sand .eyebrow { color: #4A5A55; }

.display {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

h1, .h1 {
  font-size: clamp(32px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2, .h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h3, .h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.lede {
  font-size: 19px;
  line-height: 1.65;
  max-width: var(--measure);
}

.body-text { max-width: var(--measure); }
.body-text p + p { margin-top: 20px; }

.muted { color: var(--dimma); }
.section-light .muted, .section-sand .muted { color: #4A5A55; }

.accent { color: var(--mareld); }

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
}

.rule {
  height: 1px;
  border: 0;
  background: var(--skiffer);
  margin: 32px 0;
}
.section-light .rule, .section-sand .rule { background: var(--sand); }
.section-sand .rule { background: #D4CFC4; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--djup);
  border-bottom: 1px solid var(--skiffer);
}
.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--papper);
  position: relative;
  display: inline-block;
  line-height: 1.2;
}
.logo .dot { color: var(--mareld); }
.logo > span { position: relative; z-index: 2; }

.mark-fx {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* The full stop is hidden by mark-fx.js only once the canvas exists.
   Without JS, or under reduced motion, the dot remains the mark. */
.logo.is-alive .dot { color: transparent; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 15px;
  color: var(--dimma);
  transition: color 150ms ease-out;
}
.nav-links a:hover { color: var(--papper); }
.nav-links a[aria-current="page"] { color: var(--papper); }

.nav-lang {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dimma);
  border: 1px solid var(--skiffer);
  border-radius: var(--radius-control);
  padding: 5px 10px;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.nav-lang:hover { color: var(--papper); border-color: var(--dimma); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--papper);
  font-size: 22px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: var(--radius-control);
  border: 1px solid currentColor;
  transition: color 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
  cursor: pointer;
}
.btn-primary {
  background: transparent;
  color: var(--mareld);
  border-color: var(--mareld);
}
.btn-primary:hover { background: var(--mareld); color: var(--djup); }

.btn-quiet {
  background: transparent;
  color: var(--djup);
  border-color: #C9C4B8;
}
.btn-quiet:hover { border-color: var(--djup); }
.section-dark .btn-quiet,
.hero .btn-quiet,
.footer .btn-quiet { color: var(--papper); border-color: var(--skiffer); }
.section-dark .btn-quiet:hover,
.hero .btn-quiet:hover,
.footer .btn-quiet:hover { border-color: var(--dimma); }

/* ---------- hero ---------- */
.hero {
  background: var(--djup);
  color: var(--papper);
  padding: 128px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* The hero headline is locked to two lines by a hard break, so each half must
   never wrap. Size is driven by viewport rather than the 64px cap alone, so the
   longer line always fits the column instead of overflowing it. 8vw reaches the
   64px cap at an 800px viewport and stays under the column width below that. */
.hero .display {
  font-size: min(64px, 8vw);
  max-width: none;
}
.hero .display .hl { white-space: nowrap; }

/* Hero split. The right column was empty and an animation studio was showing
   no motion above the fold. One loop fixes both. Text stays on flat dark so
   contrast is unaffected. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  background: var(--skiffer);
}
.hero-media .spec { margin-top: 14px; }

/* About bio. Portrait beside the text rather than stacked above it, which also
   uses the right-hand column the text was leaving empty. */
.bio-split {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.bio-split .body-text > span.idx { display: block; }
.bio-split .body-text > .h1 { margin-top: 6px; }
.bio-split .body-text > p:first-of-type { margin-top: 24px; }
.portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .bio-split { grid-template-columns: 1fr; gap: 32px; }
  .portrait { max-width: 300px; }
}
/* Stack below 1280. The wrap caps at 1280, so under that the copy column gets
   too narrow to hold the headline on two lines at full display size. Above it,
   the split holds at every width. */
@media (max-width: 1279px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { order: -1; }
}
.hero .lede { margin-top: 28px; color: var(--dimma); }
.hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- media / work ---------- */
.media { border-radius: 0; background: var(--skiffer); }
.media-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--skiffer);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.media-frame img,
.media-frame video { width: 100%; height: 100%; object-fit: cover; }
.media-frame video { display: block; background: var(--djup); }
.media-frame.has-media { aspect-ratio: auto; background: var(--djup); }
.media-frame.has-media img,
.media-frame.has-media video { height: auto; object-fit: unset; display: block; }
.media-placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #6B8A7E;
  letter-spacing: 0.04em;
}

.spec {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dimma);
  margin-top: 14px;
  line-height: 1.6;
}
.section-light .spec, .section-sand .spec { color: #4A5A55; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px 40px;
  margin-top: 56px;
}

/* The nav is sticky, so an anchor jump has to clear it. */
[id] { scroll-margin-top: 64px; }

/* Four projects read better two-up than as a row of three with an orphan. */
.work-grid-pair { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }

/* The four stills have four different aspect ratios. Holding one frame and
   letterboxing inside it keeps the titles on a line across the row. The bars
   are Djup on a Djup section, so they are not visible as bars. */
.work-grid-pair .media-frame.has-media { aspect-ratio: 16 / 9; }
.work-grid-pair .media-frame.has-media img,
.work-grid-pair .media-frame.has-media video { width: 100%; height: 100%; object-fit: contain; }

.work-hook {
  margin-top: 12px;
  max-width: 46ch;
  color: var(--dimma);
  font-size: 16px;
}
.section-light .work-hook,
.section-sand .work-hook { color: #4A5A55; }

/* large-format stacked work presentation, for a short and deep portfolio */
.work-major {
  display: block;
  padding: 72px 0;
  border-top: 1px solid var(--skiffer);
}
.section-light .work-major { border-top-color: var(--sand); }
.work-major:first-of-type { border-top: 0; padding-top: 0; }

.work-major .media-frame { transition: opacity 150ms ease-out; }
.work-major:hover .media-frame { opacity: 0.88; }

.work-major-head {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}
.work-major-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.work-major-client {
  font-size: 15px;
  color: var(--dimma);
  margin-top: 10px;
}
.section-light .work-major-client { color: #4A5A55; }
.work-major-summary {
  font-size: 16px;
  line-height: 1.65;
  color: var(--dimma);
}
.section-light .work-major-summary { color: #4A5A55; }

.work-major-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.work-major-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--mareld);
}

@media (max-width: 900px) {
  .work-major { padding: 56px 0; }
  .work-major-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}
.work-item { display: block; }
.work-item .media-frame { transition: opacity 150ms ease-out; }
.work-item:hover .media-frame { opacity: 0.86; }
.work-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  line-height: 1.4;
}
.work-client {
  font-size: 14px;
  color: var(--dimma);
  margin-top: 4px;
}
.section-light .work-client { color: #4A5A55; }

/* ---------- case bands (variable disclosure) ---------- */
.case-band {
  padding: 72px 0;
  border-top: 1px solid var(--skiffer);
}
.section-light .case-band { border-top-color: var(--sand); }
.case-band:first-of-type { border-top: 0; padding-top: 0; }

.case-band-head {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
.case-band-head h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.case-band-head .lede-sm {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dimma);
  margin-top: 16px;
  max-width: 58ch;
}
.section-light .case-band-head .lede-sm { color: #4A5A55; }

@media (max-width: 820px) {
  .case-band-head { grid-template-columns: 1fr; gap: 20px; }
  .case-tags { padding-top: 0; }
}

.case-tags {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--dimma);
  padding-top: 6px;
}
.section-light .case-tags { color: #4A5A55; }

.disclosure {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dimma);
  border: 1px solid var(--skiffer);
  border-radius: var(--radius-control);
  padding: 3px 8px;
  margin-bottom: 18px;
}
.section-light .disclosure { border-color: #D4CFC4; color: #4A5A55; }

.stills-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.media-frame-sq { aspect-ratio: 4 / 3; }

.case-band-more {
  margin-top: 28px;
  font-size: 15px;
}
.case-band-more a { color: var(--mareld); }
.case-band-more a:hover { text-decoration: underline; }
/* Mareld never sits on Sand or Papper. On light grounds the link is Djup,
   marked by a rule rather than by colour. */
.section-light .case-band-more a,
.section-sand .case-band-more a { color: var(--djup); border-bottom: 1px solid #C9C4B8; padding-bottom: 2px; }
.section-light .case-band-more a:hover,
.section-sand .case-band-more a:hover { border-bottom-color: var(--djup); text-decoration: none; }

/* ---------- services ---------- */
.svc-list { margin-top: 56px; }
.svc {
  display: grid;
  grid-template-columns: 56px 1fr 240px;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--sand);
  align-items: start;
}
.section-dark .svc { border-top-color: var(--skiffer); }
.svc:last-child { border-bottom: 1px solid var(--sand); }
.section-dark .svc:last-child { border-bottom-color: var(--skiffer); }

.svc-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dimma);
  padding-top: 4px;
}
.section-light .svc-num { color: #6E6A5E; }
.svc-body p { margin-top: 10px; font-size: 16px; line-height: 1.65; }
.svc-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dimma);
  line-height: 1.8;
  padding-top: 4px;
}
.section-light .svc-meta { color: #4A5A55; }

/* ---------- process ---------- */
.steps { margin-top: 56px; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--skiffer);
}
.section-light .step { border-top-color: var(--sand); }
.step:last-child { border-bottom: 1px solid var(--skiffer); }
.section-light .step:last-child { border-bottom-color: var(--sand); }
.step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dimma);
  padding-top: 3px;
}
/* Dimma on Sand is 2.08:1 and fails at 13px. Same root cause as the quiet
   button and the mailto link: a colour picked for dark grounds, used on a
   light one. Fixed at the rule. */
.section-sand .step-num,
.section-light .step-num { color: #4A5A55; }
.step-body p { margin-top: 8px; font-size: 16px; }

/* ---------- packages ---------- */
.pkgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.pkg {
  border: 1px solid var(--skiffer);
  border-radius: var(--radius-card);
  padding: 32px 28px;
}
.section-light .pkg { border-color: var(--sand); }
.pkg-name { font-size: 20px; font-weight: 500; }
.pkg-scope {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dimma);
  margin-top: 6px;
}
.section-light .pkg-scope, .section-sand .pkg-scope { color: #4A5A55; }
.pkg-price {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--dimma);
  margin-top: 8px;
}
/* .pkg was unused until the packages section shipped, so this never surfaced in
   the audit. Dimma on Papper is 2.08:1. Same root cause as .step-num and
   .svc-meta: a colour picked for dark grounds, used on a light one. */
.section-light .pkg-price,
.section-sand .pkg-price { color: #4A5A55; }
.pkg ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.pkg li {
  font-size: 15px;
  line-height: 1.6;
  padding: 9px 0 9px 20px;
  position: relative;
  color: var(--dimma);
}
.section-light .pkg li { color: #4A5A55; }
.pkg li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.pkg-featured { border-color: var(--mareld); }

/* Standard offer. Replaces the three-column table, which read as a price table
   with the prices taken out. One offer, one number, variations in prose. */
.std {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  margin-top: 48px;
  padding: 36px 0 0;
  border-top: 1px solid var(--sand);
  align-items: start;
}
.section-dark .std { border-top-color: var(--skiffer); }
.std-name { font-size: 20px; font-weight: 500; }
.std-body ul { list-style: none; margin: 24px 0 0; padding: 0; }
.std-body li {
  font-size: 16px; line-height: 1.6; padding: 9px 0 9px 20px;
  position: relative; color: var(--dimma);
}
.section-light .std-body li, .section-sand .std-body li { color: #4A5A55; }
.std-body li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 6px; height: 1px; background: currentColor; opacity: 0.5;
}
.std-price {
  font-family: var(--font-mono);
  font-size: 28px; line-height: 1.2; margin: 6px 0;
}
@media (max-width: 820px) {
  .std { grid-template-columns: 1fr; gap: 28px; }
  .std-side { order: -1; }
}
.section-light .pkg-featured { border-color: var(--mareld); }

/* Standard offer. Replaces the three-column table, which read as a price table
   with the prices taken out. One offer, one number, variations in prose. */
.std {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  margin-top: 48px;
  padding: 36px 0 0;
  border-top: 1px solid var(--sand);
  align-items: start;
}
.section-dark .std { border-top-color: var(--skiffer); }
.std-name { font-size: 20px; font-weight: 500; }
.std-body ul { list-style: none; margin: 24px 0 0; padding: 0; }
.std-body li {
  font-size: 16px; line-height: 1.6; padding: 9px 0 9px 20px;
  position: relative; color: var(--dimma);
}
.section-light .std-body li, .section-sand .std-body li { color: #4A5A55; }
.std-body li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 6px; height: 1px; background: currentColor; opacity: 0.5;
}
.std-price {
  font-family: var(--font-mono);
  font-size: 28px; line-height: 1.2; margin: 6px 0;
}
@media (max-width: 820px) {
  .std { grid-template-columns: 1fr; gap: 28px; }
  .std-side { order: -1; }
}

/* ---------- markets ---------- */
.markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--skiffer);
  border: 1px solid var(--skiffer);
  margin-top: 48px;
}
.section-light .markets { background: var(--sand); border-color: var(--sand); }
.market {
  background: var(--djup);
  padding: 28px 24px;
}
.section-light .market { background: var(--papper); }
.market h3 { font-size: 16px; font-weight: 500; }
.market p { font-size: 14px; color: var(--dimma); margin-top: 8px; line-height: 1.6; }
.section-light .market p { color: #4A5A55; }

/* ---------- cta ---------- */
.cta { text-align: left; }
.cta .display { max-width: 14ch; }
.cta .lede { margin-top: 24px; }
.cta-actions { margin-top: 36px; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  margin-top: 56px;
  align-items: start;
}

.mailto {
  display: inline-block;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--djup);
  border-bottom: 1px solid #C9C4B8;
  padding-bottom: 6px;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.mailto:hover {
  color: var(--djup);
  border-bottom-color: var(--djup);
}
.section-dark .mailto,
.hero .mailto,
.footer .mailto { color: var(--papper); border-bottom-color: var(--skiffer); }
.section-dark .mailto:hover,
.hero .mailto:hover,
.footer .mailto:hover { color: var(--mareld); border-bottom-color: var(--mareld); }

.brief-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  counter-reset: brief;
}
.brief-list li {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--sand);
  align-items: start;
}
.brief-list li:last-child { border-bottom: 1px solid var(--sand); }
.brief-list li::before {
  content: counter(brief, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  color: #6E6A5E;
  padding-top: 3px;
}
.brief-list h3 { font-size: 17px; font-weight: 500; line-height: 1.4; }
.brief-list p {
  font-size: 15px;
  line-height: 1.65;
  color: #4A5A55;
  margin-top: 8px;
  max-width: 58ch;
}

.contact-aside {
  border-left: 1px solid var(--sand);
  padding-left: 40px;
}
.contact-aside dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E6A5E;
  margin-bottom: 6px;
}
.contact-aside dd {
  margin: 0 0 24px;
  font-size: 15px;
}
.contact-aside dd a:hover { color: #4A5A55; }

/* ---------- case study ---------- */
.case-hero { padding: 96px 0 64px; position: relative; overflow: hidden; }
.case-hero .wrap-narrow { position: relative; z-index: 2; }
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--skiffer);
}
.case-meta dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dimma);
  margin-bottom: 8px;
}
.case-meta dd { margin: 0; font-size: 15px; }

.case-block { margin-top: 64px; }
.case-block h2 { margin-bottom: 16px; }

/* ---------- footer ---------- */
.footer {
  background: var(--djup);
  color: var(--dimma);
  padding: 72px 0 40px;
  border-top: 1px solid var(--skiffer);
  position: relative;
  overflow: hidden;
}
.footer .wrap { position: relative; z-index: 2; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 48px;
}
.footer h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B8A7E;
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; font-size: 15px; }
.footer a:hover { color: var(--papper); }
.footer-bottom {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--skiffer);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #6B8A7E;
}


/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--djup);
  color: var(--papper);
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- reveal (media only, see design system §6) ----------
   Hidden state applies only when JS has confirmed itself by adding
   .js to <html>. Without JS, nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --section-pad: 64px; }
  .svc { grid-template-columns: 1fr; gap: 12px; }
  .svc-meta { padding-top: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-aside { border-left: 0; border-top: 1px solid var(--sand); padding-left: 0; padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 88px 0 64px; }
}

@media (max-width: 700px) {
  :root { --section-pad: 48px; }
  body { font-size: 16px; }
  .wrap, .wrap-narrow { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--djup);
    border-bottom: 1px solid var(--skiffer);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; font-size: 16px; }
  .nav-toggle { display: block; }
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .step { grid-template-columns: 48px 1fr; gap: 16px; }
}


/* ---------- section openings ----------
   Three forms, so a page does not repeat one rhythm down its whole length.
   Rule for the eyebrow: it earns its place only when it says something the
   heading does not. If it restates the heading or the page, delete it. */

/* Split: heading holds the left column, copy the right. Breaks the stack. */
.open-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}
.open-split > .open-head { margin: 0; }
.open-split .h1 { max-width: 20ch; }
.open-split .body-text { max-width: var(--measure); }
.open-split .body-text > p:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .open-split { grid-template-columns: 1fr; gap: 24px; }
  .open-split .h1 { max-width: none; }
}

/* Index: a mono numeral hanging in the margin beside the heading. Mono is
   data, per the type rules. This is a position marker, not decoration. */
.open-index { position: relative; }
.open-index > .idx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dimma);
  display: block;
  margin-bottom: 12px;
}
/* The marker stays in flow. Hanging it in the margin overlapped the heading
   inside .wrap-narrow, which has no margin to hang into. */
.section-light .open-index > .idx,
.section-sand .open-index > .idx { color: #6E6A5E; }
.open-index > .h1 { margin-bottom: 32px; }
.open-index > .h1 + p { margin-top: 0; }

/* Bare: heading straight in, no label, no rule. The rule used to provide the
   gap before the copy, so the heading carries it instead. */
.open-bare > .h1 { margin-top: 0; }
.open-bare-head { margin-bottom: 32px; }
.body-text .open-bare-head + p { margin-top: 0; }