/* Branch site stylesheet. Mobile-first, BEM.
   Shared by every page. Built to public/assets/css/branch.<hash>.css */

/* ---------- Fonts (self-hosted, variable weight 200–800) ---------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-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;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-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;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #0E0F11;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* Deep green, not the brand green. #198255 is only 4.19:1 on the cream ground
   (#F3EFE7), which fails AA for body text. #10603D clears it on cream (6.63:1)
   and white (7.60:1) alike, so a link is safe on any light surface. The brand
   green stays for fills, rules and accents where it is a background. */
a {
  color: #10603D;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: #0E0F11; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid #198255;
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: #198255; color: #FFFFFF; }

img { max-width: 100%; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #198255;
  color: #FFFFFF;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 16px; color: #FFFFFF; }

/* ---------- ascii-field decoration ---------- */

ascii-field { display: block; pointer-events: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.65;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 30px;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
}

.btn--primary { background: #198255; color: #FFFFFF; }
.btn--primary:hover { background: #14683F; color: #FFFFFF; }

.btn--outline {
  background: transparent;
  color: #F4F4F2;
  border: 1.5px solid #3A443E;
}
.btn--outline:hover { border-color: #F4F4F2; color: #F4F4F2; }

/* Outline button on a light ground (404 page). */
.btn--dark-outline { color: #0E0F11; border-color: #C7CDC9; }
.btn--dark-outline:hover { border-color: #0E0F11; color: #0E0F11; }

.btn--light {
  background: #F4F4F2;
  color: #101915;
  font-size: 15.5px;
  padding: 11px 22px;
}
.btn--light:hover { background: #FFFFFF; }

.btn--lg { font-size: 18px; padding: 16px 32px; }

.btn-text {
  font-family: inherit;
  font-weight: 600;
  font-size: 18px;
  color: #10603D;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.btn-text:hover { color: #0E0F11; }

/* Inline "next step" link, used at the foot of a section or card.
   Deep green, not the brand green: #198255 only reaches 4.19:1 on the cream
   ground, under AA for 16px bold. #10603D clears it on cream and white alike. */
.link-arrow {
  font-weight: 700;
  font-size: 16px;
  display: inline-block;
  color: #10603D;
}
.link-arrow:hover { color: #0E0F11; }

.link-arrow--light { color: #5FBD91; }
.link-arrow--light:hover { color: #FFFFFF; }

.section-cta { margin: 36px 0 0; text-align: center; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.btn-row--centred { justify-content: center; }

@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > * { justify-content: center; }
}

/* ---------- Dark top band (header + hero) ----------
   Header and hero carry the dark ground separately so <main> can open after
   the banner and still wrap every content section. */

.hero {
  background: #101915;
  border-radius: 0 0 28px 28px;
  position: relative;
  overflow: hidden;
}

.hero__field {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  opacity: 0.55;
}

/* ---------- Header ---------- */

.header { background: #101915; }

.header__bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.header__logo { display: inline-flex; align-items: center; }
.header__logo img { height: 22px; width: auto; display: block; }

.header__nav { display: none; align-items: center; gap: 2px; }

.header__actions { display: flex; align-items: center; gap: 12px; }

.header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid #3A443E;
  border-radius: 14px;
  cursor: pointer;
  padding: 0;
}

/* Dropdown nav needs room; below this the burger drawer takes over. */
@media (min-width: 1001px) {
  .header__nav { display: flex; }
  .header__burger { display: none; }
}

/* ---------- Primary nav (built from src/_data/nav.json) ---------- */

.nav__group { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #C7CDC9;
  text-decoration: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  padding: 12px 14px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__link:hover,
.nav__link.is-active,
.nav__trigger[aria-expanded="true"] { color: #FFFFFF; }

.nav__link.is-active { text-decoration: underline; text-decoration-thickness: 2px; }

/* The padding-top keeps a hover bridge between the trigger and the panel. */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  padding-top: 10px;
  width: 330px;
}

.nav__menu {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 20, 15, 0.28);
  padding: 14px;
  display: grid;
  gap: 2px;
}
.nav__menu--two { grid-template-columns: 1fr 1fr; }
.nav__group:has(.nav__menu--two) .nav__panel { width: 640px; max-width: 70vw; }

.nav__item {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #0E0F11;
  font-weight: 700;
  font-size: 15.5px;
}
.nav__item:hover { background: #F3EFE7; color: #0E0F11; }
.nav__item[aria-current="page"] {
  background: #F3EFE7;
  color: #0E0F11;
  text-decoration: none;
  box-shadow: inset 3px 0 #198255;
}

/* #6E7278 from the design reaches only 4.22:1 on the #F3EFE7 hover ground.
   #565A60 clears AA on white and on hover alike. */
.nav__item-desc {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #565A60;
  line-height: 1.45;
}

/* ---------- Hero ---------- */

.hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 28px 48px;
  text-align: center;
  position: relative;
}

.hero__title {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 auto;
  max-width: 18ch;
  color: #F4F4F2;
  text-wrap: pretty;
}

.hero__lede {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  max-width: 62ch;
  margin: 24px auto 36px;
  color: #AEB6B1;
  text-wrap: pretty;
}

/* Long headline needs a wider measure than the default 18ch. */
.hero__title--long { max-width: 22ch; }

/* Stacked lede paragraphs sit closer together than a lede and the buttons do. */
.hero__lede--stack { margin-bottom: 0; }
.hero__lede--stack + .hero__lede { margin-top: 16px; }

@media (min-width: 721px) {
  .hero__inner { padding: 64px 28px 72px; }
}

/* ---------- Clients ---------- */

.clients { padding: 40px 0; }

.clients__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  gap: 16px;
  text-align: center;
}

.clients__label { font-size: 14px; color: #6E7278; }

.clients__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 36px;
  max-width: 760px;
  margin: 0 auto;
}

.clients__name { font-weight: 700; font-size: 16px; color: #4A4E54; }

/* ---------- Panels (cream / dark rounded sections) ---------- */

.panel {
  border-radius: 20px;
  margin: 12px;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

.panel--cream { background: #F3EFE7; }
.panel--dark { background: #101915; }

.panel__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}

.panel__inner--light-text { color: #F4F4F2; }

.panel__field { position: absolute; display: none; }

.panel__field--build {
  top: 40px;
  right: 48px;
  width: 240px;
  height: 240px;
  opacity: 0.15;
}

.panel__field--how {
  bottom: 32px;
  left: 32px;
  width: 220px;
  height: 180px;
  opacity: 0.55;
}

@media (min-width: 721px) {
  .panel { border-radius: 28px; margin: 24px; padding: 88px 0; }
  .panel__field { display: block; }
}

/* ---------- Section headings ---------- */

.section-head { text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
}

.eyebrow--white { color: #10603D; background: #FFFFFF; }
.eyebrow--cream { color: #10603D; background: #F3EFE7; }
.eyebrow--dark { color: #5FBD91; background: #1B2620; }

.section-head__title {
  font-size: clamp(30px, 3.8vw, 42px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.12;
  margin: 0 auto 48px;
  text-wrap: pretty;
}

.section-head--roomy .section-head__title { margin-bottom: 56px; }

.section-head__title--narrow { max-width: 22ch; margin-bottom: 20px; }
.section-head__title--wide { max-width: 24ch; }
/* Title that is followed by an intro, at a measure between narrow and wide. */
.section-head__title--lead { max-width: 26ch; margin-bottom: 20px; }

.section-head__intro {
  margin: 0 auto 48px;
  max-width: 68ch;
  color: #4A4E54;
  text-wrap: pretty;
}

.section-head__intro--stack { margin-bottom: 0; }
.section-head__intro--stack + .section-head__intro { margin-top: 16px; }

/* ---------- Cards ---------- */

.card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
}

.card--dark { background: #1B2620; }

.card__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }

@media (min-width: 721px) {
  .card { padding: 32px; }
}

/* ---------- Split section (copy beside a supporting column) ---------- */

.split { padding: 56px 0; }

.split__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-start;
}

.split__main { flex: 1 1 460px; }
.split__aside { flex: 1 1 380px; }

.split__title {
  font-size: clamp(30px, 3.8vw, 42px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.split__para { margin: 0 0 16px; color: #4A4E54; text-wrap: pretty; }
.split__para--last { margin-bottom: 24px; }

@media (min-width: 721px) {
  .split { padding: 88px 0; }
}

/* ---------- Stages (prototype to production flow) ---------- */

.stages { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.stages__item {
  background: #F3EFE7;
  border-radius: 20px;
  padding: 20px 24px;
}

.stages__item--highlight { background: #101915; color: #F4F4F2; }

.stages__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10603D;
}
.stages__item--highlight .stages__label { color: #5FBD91; }

.stages__title { font-size: 19px; font-weight: 700; margin: 6px 0; }

.stages__body { margin: 0; font-size: 16px; color: #4A4E54; }
.stages__link { margin-top: 12px; }
.stages__item--highlight .stages__body { color: #AEB6B1; }

/* ---------- Recent work ---------- */

.work { padding: 56px 0; overflow: hidden; }
.work__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.case-carousel {
  --case-carousel-edge: max(28px, calc((100vw - 1120px) / 2 + 28px));
  margin-right: calc(var(--case-carousel-edge) * -1);
}

.case-carousel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 20px;
}

.case-carousel__controls { display: flex; gap: 8px; }

.case-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #101915;
  background: #FFFFFF;
  border: 1.5px solid #E7E3DB;
  border-radius: 50%;
  cursor: pointer;
}

.case-carousel__button:hover { border-color: #198255; }
.case-carousel__button:disabled { opacity: 0.38; cursor: default; }

.case-carousel__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px var(--case-carousel-edge);
  scroll-snap-type: inline mandatory;
  scrollbar-color: #198255 #E7E3DB;
  scrollbar-width: thin;
}

.case-carousel__viewport::-webkit-scrollbar { height: 8px; }
.case-carousel__viewport::-webkit-scrollbar-track { background: #E7E3DB; border-radius: 999px; }
.case-carousel__viewport::-webkit-scrollbar-thumb { background: #198255; border-radius: 999px; }

.case-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  padding: 2px var(--case-carousel-edge) 18px 2px;
}

.tile--carousel {
  display: flex;
  flex: 0 0 min(520px, calc(100vw - 64px));
  flex-direction: column;
  width: min(520px, calc(100vw - 64px));
  scroll-snap-align: start;
}

.tile--carousel .tile__inner { display: flex; flex: 1; flex-direction: column; }
.tile--carousel .tile__more { margin-top: auto; }

@media (min-width: 721px) {
  .work { padding: 88px 0 64px; }
}

/* ---------- Process steps ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.steps__number {
  font-size: 15px;
  font-weight: 700;
  color: #5FBD91;
  display: block;
  margin-bottom: 12px;
}

.steps__title { font-size: 21px; font-weight: 700; margin: 0 0 10px; }

.steps__body { margin: 0; color: #AEB6B1; font-size: 17px; text-wrap: pretty; }
.steps__body--stack { margin-bottom: 12px; }

/* ---------- Why Branch ---------- */

.about { padding: 56px 0; }

.about__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.about__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

.about__copy { flex: 1 1 480px; }

.about__para { margin: 0 0 16px; color: #4A4E54; text-wrap: pretty; }
.about__para--gap { margin-bottom: 40px; }
.about__para--flush { margin-bottom: 0; }

.about__subtitle { font-size: 21px; font-weight: 700; margin: 0 0 12px; }

.about__aside {
  flex: 0 1 320px;
  min-width: 240px;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.about__photo {
  width: 100%;
  max-width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.about__note {
  background: #F3EFE7;
  border-radius: 20px;
  padding: 24px;
}

.about__note-title { font-size: 18px; font-weight: 700; margin: 0 0 8px; }

.about__note-body { margin: 0; color: #4A4E54; font-size: 16px; text-wrap: pretty; }
.about__note-body--stack { margin-bottom: 12px; }

@media (min-width: 721px) {
  .about { padding: 88px 0; }
}

/* ---------- Ongoing plans ---------- */

.plans { padding: 0 0 64px; }

.plans__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.plans__panel {
  background: #F3EFE7;
  border-radius: 28px;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.plans__field {
  position: absolute;
  bottom: 0;
  right: 40px;
  width: 300px;
  height: 160px;
  opacity: 0.2;
  display: none;
}

.plans__title {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  flex: 1 1 300px;
  max-width: 16ch;
  text-wrap: pretty;
  position: relative;
}

.plans__copy { flex: 2 1 420px; position: relative; }

.plans__para { margin: 0 0 14px; color: #4A4E54; text-wrap: pretty; }
.plans__para--last { margin-bottom: 20px; }

.plans__list {
  margin: 0 0 24px;
  padding: 0 0 0 20px;
  color: #4A4E54;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 2px 24px;
}
.plans__item { break-inside: avoid; }

@media (min-width: 721px) {
  .plans__panel { padding: 56px; }
  .plans__field { display: block; }
}

/* ---------- Promo panel (dark rounded card) ---------- */

.promo { padding: 0 0 64px; }

.promo__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.promo__panel {
  background: #101915;
  color: #F4F4F2;
  border-radius: 28px;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.promo__field {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 200px;
  opacity: 0.5;
  display: none;
}

.promo__main { flex: 1 1 420px; position: relative; }

.promo__title {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.promo__para { margin: 0 0 16px; color: #AEB6B1; text-wrap: pretty; }
.promo__para--last { margin-bottom: 24px; }

@media (min-width: 721px) {
  .promo__panel { padding: 48px; }
  .promo__field { display: block; }
}

/* ---------- CTA + footer ---------- */

.cta {
  background: #101915;
  border-radius: 28px 28px 0 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.cta__field {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 260px;
  opacity: 0.5;
}

.cta__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 28px 56px;
  text-align: center;
  color: #F4F4F2;
  position: relative;
}

.cta__title {
  font-size: clamp(32px, 4.2vw, 50px);
  letter-spacing: -0.025em;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 auto 20px;
  max-width: 20ch;
  text-wrap: pretty;
}

.cta__lede {
  margin: 0 auto 36px;
  max-width: 56ch;
  color: #AEB6B1;
  text-wrap: pretty;
}

.cta__lede--stack { margin-bottom: 10px; }

.cta__actions { gap: 24px; margin-bottom: 40px; }

.cta__alt { color: #AEB6B1; }

.cta__email { color: #F4F4F2; font-weight: 600; }
.cta__email:hover { color: #FFFFFF; }

.cta__location { margin: 0; font-size: 16px; color: #7B837E; }

@media (min-width: 721px) {
  .cta__inner { padding: 96px 28px 88px; }
}

.footer { background: #101915; color: #F4F4F2; }

.footer__inner { max-width: 1120px; margin: 0 auto; padding: 56px 28px 32px; }

.footer__top {
  display: grid;
  gap: 40px;
  margin-bottom: 48px;
}

.footer__brand { max-width: 34ch; }
.footer__logo { height: 22px; width: auto; display: block; margin-bottom: 20px; }
.footer__tagline { margin: 0 0 20px; color: #AEB6B1; font-size: 16.5px; text-wrap: pretty; }
.footer__email { color: #F4F4F2; font-weight: 600; font-size: 16.5px; }
.footer__email:hover { color: #5FBD91; }
.footer__carbon { min-height: 58px; margin-top: 24px; }
.footer__carbon-badge { text-align: left !important; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

.footer__col { min-width: 0; }
.footer__col:first-child { grid-column: 1 / -1; }

.footer__heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7B837E;
  margin: 0 0 16px;
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.footer__link { color: #C7CDC9; text-decoration: none; }
.footer__link:hover { color: #FFFFFF; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 28px;
  border-top: 1px solid #232D27;
  font-size: 14.5px;
  color: #7B837E;
}
.footer__reg { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal-link { color: #7B837E; text-decoration: none; }
.footer__legal-link:hover { color: #FFFFFF; }

@media (min-width: 721px) {
  .footer__inner { padding: 72px 28px 40px; }
  .footer__top { margin-bottom: 56px; }
  .footer__nav {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
  .footer__col:first-child { grid-column: auto; }
}

@media (min-width: 1001px) {
  .footer__top {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2.35fr);
    gap: 72px;
  }
  .footer__nav { gap: 48px; }
}

/* ---------- Mobile menu (dialog) ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 18px 22px;
  border: none;
  background: #101915;
  color: #F4F4F2;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: #101915; }

.menu__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.menu__logo { height: 22px; width: auto; display: block; }

.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid #3A443E;
  border-radius: 14px;
  cursor: pointer;
  padding: 0;
}

/* The nav scrolls; the call to action below it does not, so it stays reachable
   however many sections are expanded. */
.menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #232D27;
  color: #F4F4F2;
  text-decoration: none;
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
}
.menu__link:hover,
.menu__link.is-active { color: #5FBD91; }
.menu__link.is-active { text-decoration: underline; text-decoration-thickness: 2px; }

.menu__summary { cursor: pointer; list-style: none; }
.menu__summary::-webkit-details-marker { display: none; }
.menu__summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #5FBD91;
}
.menu__group[open] > .menu__summary::after { content: "\2212"; }

.menu__sublist { display: grid; gap: 2px; padding: 10px 0 14px; }

.menu__sublink {
  color: #C7CDC9;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 11px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.menu__sublink:hover { color: #5FBD91; }
.menu__sublink[aria-current="page"] { color: #5FBD91; text-decoration: underline; }

.menu__cta {
  flex: 0 0 auto;
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  font-size: 18px;
}

@media (min-width: 1001px) {
  .menu[open] { display: none; }
}

/* ---------- Booking modal (dialog) ---------- */

.booking {
  border: none;
  padding: 0;
  background: transparent;
  width: min(1000px, calc(100vw - 32px));
  height: min(760px, 92vh);
  max-width: none;
  max-height: none;
  z-index: 70;
}

.booking::backdrop { background: rgba(10, 12, 11, 0.7); }

.booking__panel {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.booking__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 24px;
  border-bottom: 1px solid #E7E3DB;
}

.booking__heading { font-weight: 700; font-size: 16px; color: #0E0F11; }

.booking__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid #E7E3DB;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.booking__close:hover { border-color: #0E0F11; }

.booking__frame { flex: 1; width: 100%; border: none; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Section wrapper for plain content ---------- */

.section { padding: 56px 0; }
.section--tight { padding: 40px 0; }
.section__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.section__title {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 20px;
  max-width: 24ch;
  text-wrap: pretty;
}
.section__lede { margin: 0 0 32px; max-width: 68ch; color: #4A4E54; text-wrap: pretty; }
.section__lede--after { margin: 32px 0 0; }

@media (min-width: 721px) {
  .section { padding: 80px 0; }
  .section--tight { padding: 56px 0; }
}

/* ---------- Prose (insight articles and legal pages) ---------- */

.prose { max-width: 72ch; }
.prose h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.18;
  margin: 48px 0 14px;
  text-wrap: pretty;
}
.prose h3 { font-size: 21px; font-weight: 700; margin: 32px 0 10px; text-wrap: pretty; }
.prose p { margin: 0 0 16px; color: #4A4E54; text-wrap: pretty; }
.prose ul,
.prose ol { margin: 0 0 16px; padding-left: 22px; color: #4A4E54; }
.prose li { margin-bottom: 7px; text-wrap: pretty; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: #0E0F11; }

.prose__callout {
  background: #F3EFE7;
  border-radius: 20px;
  padding: 24px;
  margin: 32px 0;
}
.prose__callout > :last-child { margin-bottom: 0; }

/* ---------- On this page ---------- */

.toc {
  background: #F3EFE7;
  border-radius: 20px;
  padding: 24px;
}
.toc__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10603D;
  margin: 0 0 12px;
}
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc__list a { color: #4A4E54; text-decoration: none; font-size: 16px; }
.toc__list a:hover { color: #0E0F11; text-decoration: underline; }

/* ---------- Index page listing ---------- */

.listing { display: grid; gap: 20px; }

.listing__item {
  background: #F3EFE7;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: flex-start;
}
.listing__main { flex: 3 1 420px; }
.listing__meta { flex: 1 1 200px; font-size: 15px; color: #565A60; }
.listing__title { font-size: 22px; font-weight: 700; margin: 0 0 10px; text-wrap: pretty; }
.listing__title a { color: #0E0F11; text-decoration: none; }
.listing__title a:hover { color: #10603D; }
.listing__body { margin: 0 0 14px; color: #4A4E54; text-wrap: pretty; }

@media (min-width: 721px) {
  .listing__item { padding: 36px 40px; }
}

/* ---------- Confirmation markers (never ship these) ---------- */

.confirm {
  background: #FFF3CD;
  border-left: 3px solid #8A5A3B;
  padding: 2px 8px;
  font-weight: 700;
  color: #6B4529;
}

/* ---------- Screen reader only ---------- */

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

/* ---------- Article layout (insights) ---------- */

.article { padding: 8px 0 56px; }

.article__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-start;
}

.article__aside { flex: 0 0 240px; }
.article__body { flex: 1 1 560px; max-width: 68ch; font-size: 18.5px; }

@media (min-width: 1001px) {
  .article { padding: 64px 0 80px; }
  .article__aside { position: sticky; top: 24px; }
}

/* The table of contents is a convenience, not the only route through. */
@media (max-width: 1000px) {
  .toc { display: none; }
}

/* ---------- Interior page hero (dark band, matches the design) ---------- */

.page-hero {
  background: #101915;
  border-radius: 0 0 28px 28px;
  position: relative;
  overflow: hidden;
  color: #F4F4F2;
}

.page-hero__field {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  height: 360px;
  opacity: 0.5;
  display: none;
}

.page-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 28px 56px;
  position: relative;
}

.page-hero__split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-end;
}

.page-hero__main { flex: 3 1 560px; }

.page-hero__eyebrow {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5FBD91;
  margin-bottom: 18px;
}

.page-hero__title {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 20px;
  max-width: 18ch;
  text-wrap: pretty;
}

.page-hero__lede {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 0 16px;
  color: #AEB6B1;
  text-wrap: pretty;
}
.page-hero__lede--last { margin-bottom: 32px; }

/* Proof points beside the hero. */
.stats {
  flex: 1 1 280px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.stats__item {
  background: #1B2620;
  border-radius: 16px;
  padding: 18px 22px;
  color: #F4F4F2;
}

.stats__figure {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

.stats__label { color: #AEB6B1; font-size: 15.5px; }

@media (min-width: 721px) {
  .page-hero__inner { padding: 28px 28px 72px; }
  .page-hero__field { display: block; }
}

/* Breadcrumbs sit inside the dark hero, so they invert. */
/* ---------- Breadcrumbs ---------- */

.breadcrumbs { max-width: 1120px; margin: 0 auto; padding: 24px 28px 0; }

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #565A60;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: 10px;
  color: #AEB6B1;
}

.breadcrumbs__link { color: #10603D; }
.breadcrumbs__link:hover { color: #0E0F11; }

/* Inverse sits on a dark ground; it is a modifier, not a contextual override. */
.breadcrumbs--inverse { padding: 0; margin-bottom: 36px; max-width: none; }
.breadcrumbs--inverse .breadcrumbs__list { color: #7B837E; font-size: 14.5px; }
.breadcrumbs--inverse .breadcrumbs__link { color: #AEB6B1; }
.breadcrumbs--inverse .breadcrumbs__link:hover { color: #FFFFFF; }
.breadcrumbs--inverse .breadcrumbs__current { color: #F4F4F2; }
.breadcrumbs--inverse .breadcrumbs__item + .breadcrumbs__item::before { color: #7B837E; }

/* ---------- Copy beside a supporting note ---------- */

.intro__split {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
  align-items: flex-start;
}

.intro__copy { flex: 1 1 620px; max-width: 70ch; }
.intro__copy p { margin: 0 0 16px; color: #4A4E54; text-wrap: pretty; }
.intro__copy p:last-child { margin-bottom: 0; }

.note {
  flex: 0 1 320px;
  background: #F3EFE7;
  border-radius: 20px;
  padding: 28px;
  align-self: stretch;
}
.note__title { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.note__list {
  margin: 0;
  padding-left: 20px;
  color: #4A4E54;
  font-size: 16.5px;
  display: grid;
  gap: 8px;
}
.note__item { text-wrap: pretty; }

/* ---------- Contrast pair (the usual problem / how we work instead) ---------- */

.contrast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.contrast__col { background: #F7F5F1; border-radius: 20px; padding: 32px; }
.contrast__col--dark { background: #101915; color: #F4F4F2; }

.contrast__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A5A3B;
}
.contrast__col--dark .contrast__label { color: #5FBD91; }

.contrast__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  color: #4A4E54;
  font-size: 16.5px;
}
.contrast__col--dark .contrast__list { color: #C7CDC9; }
.contrast__item { text-wrap: pretty; }

/* ---------- Section header with a trailing link ---------- */

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
}
.section__title--flush { margin: 0; }

.section__title--flow { max-width: none; }

/* ---------- Linked cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }

.tile {
  background: #FFFFFF;
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 26px;
}
.tile--cream { background: #F7F5F1; }
.tile--outline { background: transparent; border-color: #E7E3DB; }
.tile--roomy { border-radius: 20px; padding: 32px; }

a.tile { display: block; text-decoration: none; color: inherit; }
a.tile:hover { border-color: #198255; color: inherit; }

.tile__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #565A60;
}
.tile__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; text-wrap: pretty; }
.tile__title--lg { font-size: 21px; margin: 8px 0 10px; }
.tile__eyebrow + .tile__title { margin-top: 8px; }
.tile__body { margin: 0; color: #4A4E54; font-size: 16px; text-wrap: pretty; }
.tile__body--stack { margin-bottom: 12px; }
.tile__body--lg { font-size: 16.5px; margin-bottom: 12px; }
.tile__more { font-weight: 700; font-size: 15.5px; color: #10603D; }

/* ---------- FAQ (hairline rows, native details, no JS) ---------- */

.faq__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: flex-start;
}
.faq__heading { flex: 1 1 300px; }
.faq__list { flex: 2 1 560px; max-width: 72ch; }

.faq__item { border-top: 1px solid #E7E3DB; }
.faq__item:last-child { border-bottom: 1px solid #E7E3DB; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  list-style: none;
  text-wrap: pretty;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: #10603D; }

.faq__question::after {
  content: "+";
  flex: 0 0 auto;
  color: #10603D;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.faq__item[open] .faq__question::after { content: "\2212"; }

.faq__answer { padding: 0 0 22px; color: #4A4E54; max-width: 66ch; }
.faq__answer p { margin: 0 0 12px; text-wrap: pretty; }
.faq__answer > :last-child { margin-bottom: 0; }

/* ---------- Related ---------- */

.related { padding: 0 0 56px; }
.related__inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.related__title { font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.related__group + .related__group { margin-top: 40px; }

@media (min-width: 721px) {
  .related { padding: 0 0 80px; }
}

/* ---------- Key points beside a dark hero (text rows, not figures) ---------- */

.keypoints {
  flex: 1 1 280px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.keypoints__item {
  background: #1B2620;
  border-radius: 16px;
  padding: 16px 22px;
  color: #C7CDC9;
  font-size: 15.5px;
  text-wrap: pretty;
}
.keypoints__item strong { color: #F4F4F2; }

.keypoints__action {
  font-family: inherit;
  font-size: inherit;
  color: #5FBD91;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.keypoints__action:hover { color: #FFFFFF; }
.keypoints__item a { color: #5FBD91; }
.keypoints__item a:hover { color: #FFFFFF; }

/* ---------- Hero variants ---------- */

/* Single-column hero (prototype to production, case study, about). */
.page-hero__wide { max-width: 70ch; }
.page-hero__title--xl { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; max-width: 17ch; }
.page-hero__title--cs { font-size: clamp(32px, 4.4vw, 52px); max-width: 20ch; }
.page-hero__title--sector { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.07; max-width: 16ch; }
.page-hero__lede--wide { max-width: 60ch; }

.page-hero__field--full {
  top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: 420px; opacity: 0.35;
}
.page-hero__field--arch {
  top: auto; bottom: 0; left: 0; right: 0;
  width: auto; height: 300px; opacity: 0.45;
}

/* Hero meta pairs (case study). */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid #232D27;
}
.meta-list__term {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7B837E;
  margin-bottom: 6px;
}
.meta-list__desc { margin: 0; color: #F4F4F2; font-weight: 600; }
.meta-list__desc a { color: #5FBD91; }
.meta-list__desc a:hover { color: #FFFFFF; }

/* ---------- Image media ---------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #1B2620;
  display: block;
}
.media--cream { background: #E7E3DB; }
.media--lg { border-radius: 24px; }
.media__field { position: absolute; inset: 0; opacity: 0.5; }

.media--hero {
  height: clamp(240px, 38vw, 460px);
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
.media--tall { height: 340px; }
.media--mid { height: 320px; }
.media--short { height: 280px; }

.media__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Product screenshots ---------- */

.product-shot {
  position: relative;
  margin: 0;
  padding: clamp(10px, 2vw, 22px);
  overflow: hidden;
  border-radius: 24px;
  background: #1B2620;
  box-shadow: 0 24px 64px rgba(16, 25, 21, 0.2);
}

.product-shot--hero {
  margin-top: -40px;
  z-index: 2;
}

.product-shot__frame {
  overflow: hidden;
  border: 1px solid #E7E3DB;
  border-radius: 12px;
  background: #FFFFFF;
}

.product-shot--hero .product-shot__frame {
  height: clamp(220px, 34vw, 420px);
}

.product-shot__bar {
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #E7E3DB;
  background: #F3EFE7;
}

.product-shot__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #AEB6B1;
}

.product-shot__dot--accent { background: #5FBD91; }

.product-shot__image {
  display: block;
  width: 100%;
  height: auto;
}

.product-shot__zoom {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.product-shot__zoom::after {
  content: "View larger";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #101915;
  color: #F4F4F2;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.product-shot__zoom:hover::after,
.product-shot__zoom:focus-visible::after {
  opacity: 1;
  transform: none;
}

.product-shot__zoom:focus-visible {
  outline: 3px solid #5FBD91;
  outline-offset: -3px;
}

.product-shot--hero .product-shot__zoom {
  height: calc(100% - 30px);
}

.product-shot--hero .product-shot__image {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.product-gallery {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.product-shot--gallery {
  padding: 10px;
  border-radius: 20px;
}

.product-shot__caption {
  margin: 12px 6px 4px;
  color: #C7CDC9;
  font-size: 14.5px;
  text-wrap: pretty;
}

.image-viewer {
  width: min(96vw, 1600px);
  height: min(94vh, calc(47vw + 58px), 842px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  background: transparent;
  color: #F4F4F2;
  overflow: hidden;
}

.image-viewer::backdrop { background: rgba(10, 12, 11, 0.88); }

.image-viewer__panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #3A443E;
  border-radius: 18px;
  background: #101915;
  box-shadow: 0 28px 80px rgba(10, 12, 11, 0.45);
}

.image-viewer__bar {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #3A443E;
}

.image-viewer__heading { font-size: 15px; font-weight: 700; }
.image-viewer__actions { display: flex; align-items: center; gap: 8px; }

.image-viewer__zoom,
.image-viewer__close {
  min-height: 40px;
  border: 1px solid #3A443E;
  border-radius: 10px;
  background: #1B2620;
  color: #F4F4F2;
  font: inherit;
  cursor: pointer;
}

.image-viewer__zoom { padding: 8px 13px; font-size: 14px; font-weight: 700; }

.image-viewer__close {
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-viewer__zoom:hover,
.image-viewer__close:hover { border-color: #5FBD91; }

.image-viewer__zoom:focus-visible,
.image-viewer__close:focus-visible { outline: 3px solid #5FBD91; outline-offset: 2px; }

.image-viewer__viewport {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(94vh - 58px);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1B2620;
}

.image-viewer__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-viewer--actual .image-viewer__viewport {
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.image-viewer--actual,
.image-viewer--actual .image-viewer__panel { height: 94vh; }

.image-viewer--actual .image-viewer__image {
  max-width: none;
  max-height: none;
}

@media (min-width: 721px) {
  .product-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .product-shot__zoom::after { transition: none; }
}

/* ---------- Flow (prototype to production) ---------- */

.flow { display: flex; align-items: stretch; gap: 16px; }

.flow__step {
  flex: 1 1 0;
  background: #F7F5F1;
  border: 1.5px solid #E7E3DB;
  border-radius: 20px;
  padding: 28px;
}
.flow__step--dark { background: #101915; border-color: #101915; color: #F4F4F2; }
.flow__step--cream { background: #F3EFE7; border-color: #F3EFE7; }

.flow__label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #10603D;
}
.flow__step--dark .flow__label { color: #5FBD91; }

.flow__title { font-size: 20px; font-weight: 700; margin: 10px 0 12px; }

.flow__list {
  margin: 0;
  padding-left: 20px;
  color: #4A4E54;
  font-size: 16px;
  display: grid;
  gap: 7px;
}
.flow__item { text-wrap: pretty; }
.flow__step--dark .flow__list { color: #C7CDC9; }

.flow__arrow {
  align-self: center;
  font-size: 24px;
  color: #10603D;
  font-weight: 700;
}

@media (max-width: 900px) {
  .flow { flex-direction: column; align-items: stretch; }
  .flow__arrow { transform: rotate(90deg); align-self: center; }
}

/* ---------- Checklist grid on a dark panel ---------- */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0 32px;
}
.checklist__item { border-top: 1px solid #232D27; padding: 18px 0; }
.checklist__title { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.checklist__body { margin: 0; font-size: 15.5px; color: #AEB6B1; }

/* ---------- Numbered list with mono markers ---------- */

.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.numbered__item { display: flex; gap: 14px; align-items: baseline; color: #4A4E54; }
.numbered__n {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  color: #10603D;
  font-weight: 700;
}

/* ---------- Pull quote ---------- */

.pullquote {
  margin: 0;
  background: #101915;
  border-radius: 24px;
  padding: 44px;
  color: #F4F4F2;
}
.pullquote__text {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.45;
  font-weight: 600;
  max-width: 36ch;
  text-wrap: pretty;
}
.pullquote__text--long { max-width: 64ch; }
.pullquote__paragraph { margin: 0 0 1em; }
.pullquote__paragraph:last-child { margin-bottom: 0; }
.pullquote__cite { font-size: 16px; color: #AEB6B1; font-style: normal; }
.pullquote__name { color: #F4F4F2; }

/* ---------- Spec list (case study) ---------- */

.spec {
  flex: 1 1 100%;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.spec__row {
  border-top: 1px solid #E7E3DB;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.spec__row:last-child { border-bottom: 1px solid #E7E3DB; }
.spec__key { font-weight: 700; }
.spec__val { color: #4A4E54; text-align: right; }

@media (min-width: 721px) {
  .spec { flex: 0 1 auto; width: auto; }
}

/* ---------- Results aside (case study) ---------- */

.results {
  flex: 1 1 100%;
  width: 100%;
  background: #F3EFE7;
  border-radius: 20px;
  padding: 28px;
  align-self: flex-start;
}
.results__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #565A60;
  margin: 0 0 16px;
}
.results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.results__figure { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.results__label { color: #4A4E54; font-size: 15.5px; }

@media (min-width: 721px) {
  .results { flex: 0 1 300px; width: auto; }
}

@media (min-width: 1001px) {
  .results { position: sticky; top: 24px; }
}

/* ---------- Compact chip cards and the next-item card ---------- */

.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.chip {
  background: #F7F5F1;
  border: 1.5px solid #E7E3DB;
  border-radius: 18px;
  padding: 22px 26px;
  text-decoration: none;
  color: #0E0F11;
  font-weight: 700;
  display: block;
}
.chip:hover { border-color: #198255; color: #0E0F11; }

.next-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #F3EFE7;
  border: 1.5px solid #E7E3DB;
  border-radius: 20px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  margin-top: 20px;
}
.next-card:hover { border-color: #198255; color: inherit; }
.next-card__title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 0; }
.next-card__more { font-weight: 700; color: #10603D; font-size: 17px; }

/* ---------- Dark panel decoration + aside variants ---------- */

.panel__field--circle {
  top: 48px;
  right: 56px;
  bottom: auto;
  left: auto;
  width: 220px;
  height: 220px;
  opacity: 0.4;
}

.panel__eyebrow {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5FBD91;
  margin-bottom: 16px;
}

.panel__lede { margin: 0 0 44px; max-width: 64ch; color: #AEB6B1; text-wrap: pretty; }

.note--card { flex: 1 1 340px; padding: 32px; align-self: flex-start; }
.note__para { margin: 0 0 16px; color: #4A4E54; font-size: 16.5px; text-wrap: pretty; }
.note__para--last { margin-bottom: 24px; }

/* ---------- Hero split variants ---------- */

.page-hero__split--centred { align-items: center; gap: 40px 56px; }
.page-hero__media { flex: 1 1 380px; min-width: 260px; }

.intro__para { margin: 0 0 16px; color: #4A4E54; text-wrap: pretty; }
.intro__para--outcome { margin-bottom: 24px; font-weight: 700; color: #10603D; }

.cards--gap { margin-bottom: 48px; }

/* ---------- Article ---------- */

.page-hero__inner--narrow { max-width: 860px; }
.page-hero__title--article { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.1; max-width: 22ch; }
.page-hero__lede--article { font-size: 19px; max-width: none; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid #232D27;
}
.byline__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.byline__name { display: block; color: #F4F4F2; font-weight: 700; font-size: 16px; }
.byline__meta { display: block; color: #7B837E; font-size: 15px; }


.prose__lead { font-size: 21px; line-height: 1.55; color: #2A2D31; margin: 0 0 20px; }
.prose--article p { color: #3A3E44; margin: 0 0 18px; }
.prose--article h2 { font-size: 28px; margin: 40px 0 14px; }
.prose--article ul,
.prose--article ol { color: #3A3E44; display: grid; gap: 10px; margin: 0 0 24px; padding-left: 22px; }

.prose__note {
  border-left: 3px solid #198255;
  background: #F3EFE7;
  border-radius: 0 16px 16px 0;
  padding: 24px;
  margin: 0 0 24px;
}
.prose__note p { margin: 0; font-weight: 600; color: #10603D; text-wrap: pretty; }

.prose__cta {
  background: #101915;
  border-radius: 20px;
  padding: 32px;
  color: #F4F4F2;
  margin: 0 0 32px;
}
.prose__cta-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.prose__cta-body,
.prose--article .prose__cta-body { margin: 0 0 20px; color: #AEB6B1; font-size: 16.5px; text-wrap: pretty; }

.link-list { display: grid; gap: 12px; }
.link-list__item {
  border: 1.5px solid #E7E3DB;
  border-radius: 16px;
  padding: 20px 24px;
  text-decoration: none;
  color: #0E0F11;
  font-weight: 700;
  display: block;
}
.link-list__item:hover { border-color: #198255; color: #0E0F11; }

/* ---------- About ---------- */

.bio { background: #F3EFE7; border-radius: 20px; padding: 24px; }
.bio__name { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.bio__body { margin: 0; color: #4A4E54; font-size: 16px; text-wrap: pretty; }

.about__stack { flex: 0 1 340px; min-width: 260px; display: grid; gap: 20px; align-content: start; }
.about__portrait { width: 100%; height: 380px; object-fit: cover; border-radius: 20px; display: block; }

.tile__link { margin-top: 16px; }

/* ---------- Case card with a media band (homepage) ---------- */

.tile--flush { padding: 0; overflow: hidden; }
.tile__media { width: 100%; height: 200px; position: relative; background: #E7E3DB; }
.tile__image { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tile__inner { padding: 28px; }

/* ---------- Support plans ---------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  align-items: start;
}

.plan {
  background: #FFFFFF;
  border: 1.5px solid #E7E3DB;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan--feature { background: #101915; border-color: #101915; color: #F4F4F2; }

.plan__name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }

.plan__price { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #E7E3DB; }
.plan--feature .plan__price { border-bottom-color: #232D27; }

.plan__amount { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; display: block; }
.plan__period { font-size: 15.5px; color: #565A60; }
.plan--feature .plan__period { color: #AEB6B1; }

.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.plan__item {
  display: flex;
  gap: 10px;
  font-size: 16px;
  color: #4A4E54;
  text-wrap: pretty;
}
.plan--feature .plan__item { color: #C7CDC9; }

.plan__item::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: #198255;
}
.plan--feature .plan__item::before { background: #5FBD91; }

.plan__item--inherit { font-weight: 700; color: #0E0F11; }
.plan--feature .plan__item--inherit { color: #F4F4F2; }

@media (min-width: 721px) {
  .plan { padding: 36px; }
}