/* ===========================================================================
   Codepuro — landing page
   Art direction: "Nordic light". Warm birch paper, deep spruce, winter amber.
   Fraunces (display) + Montserrat (brand + UI, per brand guidelines).
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* surfaces */
  --paper:        #f4f1ec;
  --paper-raised: #fbfaf8;
  --paper-sunk:   #eae4da;

  /* ink */
  --ink:      #101512;
  --ink-70:   #4a554e;
  --ink-45:   #7c867f;
  --ink-25:   #a9b1ab;

  /* brand */
  --spruce:      #123b2e;
  --spruce-deep: #0b2118;
  --moss:        #2c6b52;
  --amber:       #bd6626;
  --amber-warm:  #dc9a55;

  /* lines */
  --line:        #dbd5cb;
  --line-strong: #c4bbac;

  /* semantic (flipped inside .on-dark) */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-70);
  --fg-faint:  var(--ink-45);
  --rule:      var(--line);
  --rule-firm: var(--line-strong);
  --surface:   var(--paper-raised);
  --accent:    var(--amber);
  --brand:     var(--spruce);

  /* type */
  --sans:    "Montserrat", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --fs-hero:    clamp(3.1rem, 1.15rem + 7.6vw, 8.75rem);
  --fs-h2:      clamp(2.1rem, 1.25rem + 3.1vw, 4rem);
  --fs-h3:      clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:    clamp(0.98rem, 0.94rem + 0.16vw, 1.05rem);
  --fs-micro:   0.7rem;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw:   1320px;
  --section: clamp(5.5rem, 3rem + 9vw, 11rem);

  /* motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-firm: cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.6s;
}

.on-dark {
  --bg:        var(--spruce-deep);
  --fg:        #eef0e9;
  --fg-muted:  #a9b8ad;
  --fg-faint:  #7d8f83;
  --rule:      rgba(238, 240, 233, 0.14);
  --rule-firm: rgba(238, 240, 233, 0.28);
  --surface:   rgba(238, 240, 233, 0.045);
  --accent:    var(--amber-warm);
  --brand:     #eef0e9;
  color: var(--fg);
  background: var(--bg);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Paper grain — a whisper of tooth so flat fills never look like flat fills. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
  letter-spacing: -0.022em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

figure, blockquote { margin: 0; }

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

::selection { background: var(--spruce); color: var(--paper); }

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

.on-dark :focus-visible { outline-color: var(--amber-warm); }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  padding: 0.75rem 1.4rem;
  background: var(--spruce);
  color: var(--paper);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  transition: translate 0.25s var(--ease);
}
.skip:focus { translate: -50% 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------- layout -- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.section { padding-block: var(--section); position: relative; }

.section--tight { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }

/* Hairline rule with a small amber tick at its start — a recurring motif. */
.rule {
  position: relative;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 3.5rem; height: 3px;
  background: var(--accent);
}

/* --------------------------------------------------------- shared bits --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 1.6rem;
}
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 46ch;
}

.ital {
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 144;
  color: var(--brand);
}
.on-dark .ital { color: var(--amber-warm); }

.num {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--spruce);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.65rem;
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* A wipe that rises from the baseline — reads as "shipping", not as a hover blob. */
.btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: -1;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { border-color: var(--amber); color: #fff; }

.btn .arw { transition: translate 0.35s var(--ease); }
.btn:hover .arw { translate: 0.28rem 0; }

.btn--ghost {
  --btn-fg: var(--fg);
  --btn-bg: transparent;
  border-color: var(--rule-firm);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; }

.on-dark .btn {
  --btn-fg: var(--spruce-deep);
  --btn-bg: #eef0e9;
}
.on-dark .btn::after { background: var(--amber-warm); }
.on-dark .btn:hover, .on-dark .btn:focus-visible {
  color: var(--spruce-deep);
  border-color: var(--amber-warm);
}
.on-dark .btn--ghost { --btn-fg: var(--fg); --btn-bg: transparent; border-color: var(--rule-firm); }

/* Text link with a rule that redraws left-to-right. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--rule-firm), var(--rule-firm));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px, 100% 1px; }
.link .arw { transition: translate 0.35s var(--ease); }
.link:hover .arw { translate: 0.28rem 0; }

/* --------------------------------------------------- contour topography -- */
/* One SVG, used as a mask so any section can tint it with `color`. */
.topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: currentColor;
  -webkit-mask-image: url("../img/contours.svg");
  mask-image: url("../img/contours.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.13;
  color: var(--spruce);
}
.on-dark .topo { color: #8fb8a2; opacity: 0.1; }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease), backdrop-filter 0.45s;
}
.nav.is-stuck {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  padding-block: clamp(1rem, 2vw, 1.55rem);
  transition: padding-block 0.45s var(--ease);
}
.nav.is-stuck .nav__inner { padding-block: 0.85rem; }

.brand {
  display: block;
  flex: none;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}
.brand svg { width: clamp(118px, 12vw, 152px); height: auto; fill: currentColor; }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  margin-inline: auto;
  list-style: none;
  padding: 0;
}
.nav__links a {
  position: relative;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding-block: 0.3rem;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { scale: 1 1; }
.nav__links a[aria-current="true"] { color: var(--ink); }

.nav__side { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.nav .btn { padding: 0.78rem 1.25rem; font-size: 0.72rem; }

/* language switcher */
.lang {
  display: flex;
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ink-45);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang button + button { border-left: 1px solid var(--line-strong); }
.lang button:hover { color: var(--ink); background: var(--paper-sunk); }
.lang button[aria-pressed="true"] { background: var(--spruce); color: var(--paper); }

.on-dark .lang { border-color: var(--rule-firm); }
.on-dark .lang button { color: var(--fg-faint); }
.on-dark .lang button + button { border-left-color: var(--rule-firm); }
.on-dark .lang button:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.on-dark .lang button[aria-pressed="true"] { background: #eef0e9; color: var(--spruce-deep); }

/* burger — matches the language switcher's height exactly via align-self */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: stretch;
  width: 2.6rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.burger:hover { background: var(--paper-sunk); }
.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: translate 0.35s var(--ease), rotate 0.35s var(--ease), opacity 0.2s var(--ease);
}
/* line centres sit 6.5px apart (1.5px line + 5px gap) — the X closes exactly */
.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 6rem + 9vw, 12.5rem);
  padding-bottom: clamp(4rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 130%;
  pointer-events: none;
}
/* low winter sun bleeding in from the upper right */
.hero__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 82% 8%,  rgba(220, 154, 85, 0.20), transparent 65%),
    radial-gradient(52% 52% at 12% 30%, rgba(18, 59, 46, 0.10),  transparent 68%),
    radial-gradient(90% 60% at 50% 100%, rgba(234, 228, 218, 0.85), transparent 70%);
}

/* The headline spans the full measure; the supporting copy and the delivery
   card share the row beneath it. */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(2.25rem, 3.5vw, 3.75rem);
  align-items: start;
}
.hero__eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.hero__title   { grid-column: 1 / -1; }
.hero__intro   { grid-column: 1; }
.hero__card    { grid-column: 2; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  line-height: 0.94;
  letter-spacing: -0.038em;
  margin: 0;
}
.hero h1 .ln { display: block; }

/* The promise, underscored by hand. */
.underscore {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underscore svg {
  position: absolute;
  left: -1%;
  bottom: -0.21em;
  width: 102%;
  height: 0.26em;
  overflow: visible;
  color: var(--amber);
}
.underscore path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
}
html.js .underscore path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.is-ready .underscore path {
  animation: draw 1.1s var(--ease) 0.95s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.4rem;
}

/* the hero side card: a delivery receipt, not a stock photo */
.receipt {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 26px 60px -34px rgba(16, 21, 18, 0.45);
  padding: 1.5rem 1.6rem 1.35rem;
}
.receipt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--spruce);
}
.receipt__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--line-strong);
}
.receipt__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.receipt__sprint { font-size: 1.5rem; line-height: 1; }
.receipt__list { list-style: none; margin: 0.95rem 0 0; padding: 0; }
.receipt__list li {
  display: grid;
  grid-template-columns: 1.05rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.5rem;
  font-size: 0.83rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.receipt__list li:last-child { border-bottom: 0; }
.receipt__list .tick { color: var(--moss); }
.receipt__list .when {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-45);
  white-space: nowrap;
}
.receipt__foot {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.receipt__score { font-size: 1.35rem; line-height: 1; color: var(--spruce); }

/* the credential strip below the fold-line */
.credbar {
  position: relative;
  margin-top: clamp(3rem, 4vw, 5rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.credbar div {
  padding: 1.5rem 1.1rem 0 0;
  border-right: 1px solid var(--line);
}
.credbar div:last-child { border-right: 0; }
.credbar div:not(:first-child) { padding-left: 1.1rem; }
.credbar dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 0.45rem;
}
.credbar dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  hyphens: none;
}

/* -------------------------------------------------------------- services -- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.75rem, 4vw, 4.5rem);
}
.head h2 { font-size: var(--fs-h2); max-width: 16ch; }
.head .lead { max-width: 42ch; }

.svc { border-top: 1px solid var(--rule); }
.svc__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 3vw, 3.1rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.5s var(--ease);
}
.svc__item::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px; width: 100%;
  background: var(--amber);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.6s var(--ease);
}
.svc__item:hover::before { scale: 1 1; }
.svc__n {
  font-size: 0.95rem;
  color: var(--ink-25);
  letter-spacing: 0;
  padding-top: 0.35rem;
  transition: color 0.4s var(--ease);
}
.svc__item:hover .svc__n { color: var(--amber); }
.svc__item h3 { font-size: var(--fs-h3); }
.svc__body p { color: var(--fg-muted); }
.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.15rem;
  list-style: none;
  padding: 0;
}
.svc__tags li {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
  border: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
  background: var(--paper-raised);
}

/* -------------------------------------------------------------- promises -- */
.promises { position: relative; overflow: hidden; }
.promises .wrap { position: relative; }

.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.promise {
  position: relative;
  background: var(--spruce-deep);
  padding: clamp(2rem, 3vw, 3.2rem) clamp(1.5rem, 2.5vw, 2.8rem);
  transition: background 0.5s var(--ease);
}
.promise:hover { background: #0e2b20; }
.promise__n {
  display: block;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem);
  line-height: 0.85;
  color: rgba(238, 240, 233, 0.14);
  margin-bottom: 1.1rem;
  transition: color 0.5s var(--ease);
}
.promise:hover .promise__n { color: var(--amber-warm); }
.promise h3 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  margin-bottom: 0.75rem;
}
.promise p { color: var(--fg-muted); font-size: 0.97rem; }

.promises__foot {
  margin-top: clamp(2.5rem, 3vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.promises__foot p { color: var(--fg-muted); max-width: 52ch; font-style: italic; }

/* ------------------------------------------------------------------ work -- */
/* A scroll-snap carousel: native scrolling and touch for free, buttons for
   the mouse, and it degrades to a plain horizontal scroller without JS. */
.carousel { --slide: 3; --cgap: clamp(1.25rem, 2.5vw, 2.25rem); }

.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the cards' lift-on-hover shadow — vertical only. Horizontal
     padding would offset the resting scrollLeft and break end detection. */
  margin: -8px 0 -28px;
  padding: 8px 0 28px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.carousel__track { display: flex; gap: var(--cgap); }

.carousel__track > .case {
  flex: 0 0 calc((100% - (var(--slide) - 1) * var(--cgap)) / var(--slide));
  scroll-snap-align: start;
}

.case {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.case:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -30px rgba(16, 21, 18, 0.42);
}
.case__fig {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
}
.case__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 0.8s var(--ease);
}
.case:hover .case__fig img { scale: 1.045; }
.case__sector {
  position: absolute;
  left: 0; top: 0;
  background: var(--spruce);
  color: var(--paper);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
}
.case__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.case__body h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.case__body p { color: var(--ink-70); font-size: 0.94rem; }
.case__metrics {
  display: flex;
  gap: 1.75rem;
  margin-top: auto;
  padding-top: 1.4rem;
  list-style: none;
  padding-left: 0;
}
.case__metrics li { line-height: 1.25; }
.case__metrics b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--spruce);
}
.case__metrics span {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* control bar: counter, progress rail, arrows */
.carousel__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.carousel__count {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1.05rem;
  color: var(--ink-45);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.carousel__count [data-carousel-current] { color: var(--ink); font-size: 1.35rem; }
.carousel__slash { color: var(--line-strong); }

.carousel__rail {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}
.carousel__rail span {
  position: absolute;
  inset: -1px auto auto 0;
  height: 3px;
  width: 20%;
  background: var(--amber);
  transition: transform 0.45s var(--ease), width 0.3s var(--ease);
  transform-origin: left;
}

.carousel__nav { display: flex; gap: 0.5rem; flex: none; }
.cbtn {
  appearance: none;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.cbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6;
            stroke-linecap: round; stroke-linejoin: round; }
.cbtn:hover:not(:disabled) { background: var(--spruce); color: var(--paper); border-color: var(--spruce); }
.cbtn:disabled { opacity: 0.3; cursor: default; }

/* ------------------------------------------------------------ capability -- */
.stack-band {
  border-block: 1px solid var(--line);
  padding-block: clamp(2.5rem, 3vw, 3.75rem);
  background: var(--paper-sunk);
  position: relative;
  overflow: hidden;
}
.marquee-set { margin-top: 2rem; }

.marquee__label {
  padding-inline: var(--gutter);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 0.55rem;
}
.marquee-set .marquee + .marquee__label { margin-top: 2.1rem; }

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 0;
  flex: none;
  animation: slide 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: 1.6rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
}
.marquee__track span::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* second row: smaller, quieter, travelling the other way — so the two rows
   read as different registers rather than one long list */
.marquee--alt { -webkit-mask-image: none; mask-image: none; }
.marquee--alt {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee--alt .marquee__track { animation-duration: 62s; animation-direction: reverse; }
.marquee--alt .marquee__track span {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-70);
  gap: 1.1rem;
  padding-inline: 1.1rem;
}
.marquee--alt .marquee__track span::after {
  width: 4px; height: 4px;
  background: var(--line-strong);
}

/* ---------------------------------------------------------------- studio -- */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.studio h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.studio__copy p + p { margin-top: 1.1rem; }
.studio__copy p { color: var(--ink-70); }

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.figures div { background: var(--paper); padding: 1.3rem 1.4rem; }
.figures b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--spruce);
  margin-bottom: 0.4rem;
}
.figures span {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* credentials — quiet, verifiable, sitting under the figures */
.certs {
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 1.35rem 1.45rem 1.5rem;
}
.certs h3 { margin-bottom: 1rem; }
.certs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.certs li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-70);
}
.certs svg {
  width: 1rem; height: 1rem;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--moss);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.person {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  background: var(--paper-raised);
  padding: 1.35rem;
}
.person img {
  width: 88px; height: 88px;
  object-fit: cover;
  background: var(--paper-sunk);
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.6s var(--ease);
}
.person:hover img { filter: grayscale(0) contrast(1); }
.person h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.person__role {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.55rem;
}
.person p { font-size: 0.88rem; color: var(--ink-70); line-height: 1.6; }

/* ------------------------------------------------------------------- how -- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: step;
  position: relative;
}
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--amber);
}
.step::after {
  content: "";
  position: absolute;
  top: 1.55rem; left: 0;
  width: 100%; height: 1px;
  background: var(--rule);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.step p { color: var(--fg-muted); font-size: 0.95rem; }
.step__meta {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ------------------------------------------------------------------- faq -- */
/* One measure for the whole block: the questions, the rules and the answers all
   sit on the same 45rem column, so the text has no gutter to stop short of.
   Widening instead would push answers past 100 characters a line. */
.faq-head,
.faq { max-width: 45rem; margin-inline: auto; }
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--moss); }
.faq .sign {
  position: relative;
  flex: none;
  width: 15px; height: 15px;
  margin-top: 0.45rem;
}
.faq .sign::before, .faq .sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink);
  transition: rotate 0.4s var(--ease), background 0.3s;
}
.faq .sign::after { rotate: 90deg; }
.faq details[open] .sign::after { rotate: 0deg; }
.faq details[open] .sign::before, .faq details[open] .sign::after { background: var(--amber); }
.faq__a {
  overflow: hidden;
  padding-bottom: 1.5rem;
}
.faq__a p { color: var(--ink-70); font-size: 0.96rem; }
.faq__a p + p { margin-top: 0.8rem; }
.faq details[open] .faq__a { animation: unfold 0.45s var(--ease); }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- contact -- */
.contact { position: relative; overflow: hidden; }
.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.contact h2 { font-size: var(--fs-h2); margin-bottom: 1.4rem; }

/* form */
.form { display: grid; gap: 1.15rem; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.field .opt { text-transform: none; letter-spacing: 0.02em; font-weight: 500; color: var(--fg-faint); opacity: 0.75; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-firm);
  padding: 0.65rem 0 0.6rem;
  border-radius: 0;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23a9b8ad' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 1.6rem;
  cursor: pointer;
}
.field select option { color: #101512; background: #fbfaf8; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); opacity: 0.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber-warm);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #e08a72; }
.field .err {
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: #e8a08a;
  min-height: 0;
  display: none;
}
.field.is-invalid .err { display: block; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--fg-muted);
  cursor: pointer;
}
.consent input {
  appearance: none;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  border: 1px solid var(--rule-firm);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.consent input:checked {
  background: var(--amber-warm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6L4 7.6 10 1.2' stroke='%230b2118' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--amber-warm);
}
.consent.is-invalid input { border-color: #e08a72; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.form__note { font-size: 0.79rem; color: var(--fg-faint); }

.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule-firm);
  border-left: 3px solid var(--amber-warm);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg);
  background: rgba(238, 240, 233, 0.05);
}
.form__status.is-shown { display: block; }
.form__status.is-ok { border-left-color: #7fc3a1; }
.form__status.is-bad { border-left-color: #e08a72; }

.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ---------------------------------------------------------------- footer -- */
.footer { border-top: 1px solid var(--rule); padding-block: clamp(2.75rem, 4vw, 4rem) 2rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.footer .brand { color: var(--fg); margin-bottom: 1.1rem; }
.footer__blurb { font-size: 0.87rem; color: var(--fg-muted); max-width: 30ch; }
.footer h4 {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer ul a, .footer address a {
  font-size: 0.88rem;
  color: var(--fg-muted);
  transition: color 0.3s var(--ease);
}
.footer ul a:hover, .footer address a:hover { color: var(--accent); }
.footer address { font-style: normal; font-size: 0.88rem; color: var(--fg-muted); line-height: 1.85; }
.footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------- mobile CTA -- */
/* The header CTA has no room on a phone, so it moves to the drawer and to a
   bar that appears once the hero has scrolled away. */
.nav__cta { display: none; }

.mobile-cta {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--line);
  translate: 0 110%;
  visibility: hidden;
  transition: translate 0.45s var(--ease), visibility 0.45s;
}
.mobile-cta.is-shown { translate: 0 0; visibility: visible; }
.mobile-cta .btn { flex: 1; justify-content: center; white-space: nowrap; }
.mobile-cta__mail {
  flex: none;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-70);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------- reveals -- */
/* Everything below is gated on html.js, so a failed script leaves a readable
   page rather than a blank one. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* hero entrance — one orchestrated load beats a dozen scattered fades */
.is-ready [data-enter] {
  animation: rise 1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
html.js:not(.is-ready) [data-enter] { opacity: 0; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__intro, .hero__card { grid-column: 1; }
  .receipt { max-width: 30rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio { grid-template-columns: 1fr; }
  .carousel { --slide: 2; }
  .svc__item { grid-template-columns: 4rem minmax(0, 1fr); }
  .svc__body { grid-column: 2; }
}

/* Five credential cells need more room than the rest of the layout. */
@media (max-width: 1200px) {
  .credbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credbar div { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }
  .credbar div:nth-child(odd) { padding-left: 0; }      /* first in row */
  .credbar div:nth-child(even) { border-right: 0; }     /* last in row */
  .credbar div:last-child { border-bottom: 0; border-right: 0; }
  /* an odd number of cells: the last one runs the full width */
  .credbar div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 5.75rem var(--gutter) 2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -40px rgba(16,21,18,0.5);
    translate: 0 -100%;
    visibility: hidden;
    /* visibility flips discretely: instantly on open, only after the slide on
       close — no reliance on how `visibility` interpolates mid-transition */
    transition: translate 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .nav.is-open .nav__links {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.5s var(--ease), visibility 0s linear 0s;
  }
  .nav__links li { border-top: 1px solid var(--line); }
  /* the CTA is a button, not a nav link — keep it out of this rule */
  .nav__links li:not(.nav__cta) a {
    display: block;
    padding-block: 1rem;
    font-size: 0.85rem;
  }
  .nav__links a::after { display: none; }
  .burger { display: flex; }
  .nav__side > .btn { display: none; }
  .nav__inner { justify-content: space-between; }
  .nav__cta { display: block; border-top: 1px solid var(--line); padding-top: 1.15rem; }
  .nav__cta .btn { width: 100%; justify-content: center; }
  .mobile-cta { display: flex; }
  .head { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .hero h1 { max-width: none; letter-spacing: -0.03em; }
  /* one card, with the next one peeking so the swipe is discoverable */
  .carousel { --slide: 1; }
  .carousel__track > .case { flex-basis: 86%; }
  .carousel__bar { gap: 1rem; }
  .cbtn { width: 2.6rem; height: 2.6rem; }
  .row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .svc__item { grid-template-columns: 1fr; gap: 0.75rem; }
  .svc__body { grid-column: 1; }
  .svc__n { padding-top: 0; }
  .figures { grid-template-columns: 1fr; }
  .person { grid-template-columns: 64px minmax(0, 1fr); }
  .person img { width: 64px; height: 64px; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------- reduced motion -- */
@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;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js:not(.is-ready) [data-enter] { opacity: 1; }
  .underscore path { stroke-dashoffset: 0; }
  .marquee__track { animation: none; }
  .carousel__viewport { scroll-behavior: auto; }
}

@media print {
  body::after, .topo, .hero__bloom, .nav, .marquee { display: none !important; }
  .on-dark { background: #fff !important; color: #000 !important; }
}