/* ============================================================
   THE MAESTRO WAY — design system
   Light editorial. Paper canvas, ink type, chrome imagery,
   brass accents. Built for Design · Development · AI.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper:      #F4F3F0;
  --paper-2:    #EBE9E4;
  --paper-3:    #E3E0D9;
  --ink:        #0B0B0B;
  --ink-2:      #1A1A19;
  --body:       #4A4844;
  --muted:      #7C7A73;
  --muted-2:    #A3A099;
  --line:       rgba(11, 11, 11, 0.13);
  --line-2:     rgba(11, 11, 11, 0.07);
  --brass:      #9A7742;
  --brass-soft: rgba(154, 119, 66, 0.14);
  --white:      #FFFFFF;

  /* ---- accent family ----------------------------------------
     Four voices, all held to the same muted weight as brass so
     colour reads as intentional, never loud. Brass oxidises into
     verdigris — the thread that ties the set together.          */
  --brass-rgb:     154, 119, 66;   /* 33°  — Design    */
  --verdigris:     #45877E;
  --verdigris-rgb:  69, 135, 126;  /* 172° — Development */
  --clay:          #B0644A;
  --clay-rgb:      176, 100, 74;   /* 15°  — AI        */
  --indigo:        #4A5B8C;
  --indigo-rgb:     74,  91, 140;  /* 226° — Studio    */

  /* per-element accent; components read --accent, not the names */
  --accent:     var(--brass);
  --accent-rgb: var(--brass-rgb);

  --on-dark-line: rgba(255, 255, 255, 0.14);
  --on-dark-mute: #8E8C86;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --pad:  clamp(20px, 5vw, 72px);
  --maxw: 1280px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: #c9c6bf var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* paper grain so the light never reads as flat/plain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #cbc8c1; border: 3px solid var(--paper); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b3b0a8; }

/* ---------- type ---------- */
.display {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 { font-family: "Archivo", sans-serif; letter-spacing: -0.03em; line-height: 1.02; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(80px, 12vh, 160px) 0; position: relative; }
.section--tight { padding: clamp(60px, 8vh, 110px) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}
.eyebrow--light { color: var(--on-dark-mute); }

.h-sec {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin: 20px 0 20px;
  text-wrap: balance;
}
.lede {
  color: var(--body);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  max-width: 54ch;
}
.sec-head { margin-bottom: clamp(44px, 6vh, 76px); }
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.btn svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn--primary:hover::after { transform: translateY(0); }
.btn--primary:hover { color: #fff; }

.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--brass); color: #fff; }

.btn--outline-light { border: 1px solid var(--on-dark-line); color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s, color 0.3s, gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: var(--ink); gap: 13px; }
.link-arrow--light { border-color: var(--on-dark-line); color: var(--paper); }
.link-arrow--light:hover { border-color: var(--paper); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.4s var(--ease), border-color 0.4s, backdrop-filter 0.4s, padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  padding: 18px 0;
}
.nav.is-stuck {
  background: rgba(244, 243, 240, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line-2);
  padding: 10px 0;
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.02em;
}
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  position: relative;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--body);
  transition: color 0.25s, background 0.25s;
}
.nav__links a:hover { color: var(--ink); background: rgba(11,11,11,0.045); }
.nav__links a.is-current { color: var(--ink); font-weight: 600; }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__cta { padding: 12px 22px; font-size: 14px; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  place-items: center;
  gap: 5px;
  flex-direction: column;
}
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-3.25px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
body.menu-open .menu { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }
.menu > a {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 10vw, 62px);
  letter-spacing: -0.04em;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), color 0.25s;
}
body.menu-open .menu > a { transform: none; opacity: 1; }
.menu > a:hover { color: var(--brass); }
.menu > a i { font-family: "Inter", sans-serif; font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.menu__foot { margin-top: 48px; display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
/* the big-type rule above is scoped to `.menu > a` for a reason: these
   links are anchors too, and at clamp(34px,10vw,62px) the email address
   rendered 448px wide inside a 375px viewport */
.menu__foot a { font-size: 14px; color: var(--body); transition: color 0.25s; overflow-wrap: anywhere; }
.menu__foot a:hover { color: var(--accent-text, var(--brass)); }

/* ---------- hero ---------- */
.hero { padding: clamp(120px, 17vh, 190px) 0 clamp(60px, 8vh, 96px); position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,0.55);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  letter-spacing: 0.01em;
}
.pill b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: #6EE7A8; box-shadow: 0 0 0 0 rgba(110,231,168,0.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(110,231,168,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,168,0); } }

.hero__title {
  font-size: clamp(44px, 6.6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.95;
  margin: 26px 0 26px;
}
.hero__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hero__title .stroke {
  -webkit-text-stroke: 1.4px var(--ink);
  color: transparent;
}
.hero__lede { max-width: 46ch; color: var(--body); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.7; }
.hero__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
.hero__trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.hero__trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero__trust-item b { font-family: "Archivo", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.hero__trust-item span { font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; }
.hero__trust-sep { width: 1px; height: 30px; background: var(--line); }

/* hero visual — dark chrome panel */
.hero__visual { position: relative; }
.hero__panel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #050505;
  aspect-ratio: 4 / 4.4;
  box-shadow: 0 40px 90px -30px rgba(11,11,11,0.45), 0 2px 8px rgba(11,11,11,0.08);
}
.hero__panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; filter: grayscale(100%) contrast(1.06); }
/* the scrim that keeps the panel tag legible over the photograph */
.hero__panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 34%, transparent 62%, rgba(0,0,0,0.55) 100%);
}
.hero__badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -8px rgba(11,11,11,0.28);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.hero__badge b { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 13px; }
.hero__badge--1 { top: 9%; left: -6%; animation: float 7s ease-in-out infinite; }
.hero__badge--2 { top: 44%; right: -7%; animation: float 7s ease-in-out 1.4s infinite; }
.hero__badge--3 { bottom: 8%; left: 4%; animation: float 7s ease-in-out 2.8s infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero__panel-tag {
  position: absolute;
  left: 22px; bottom: 20px;
  z-index: 2;
  color: rgba(255,255,255,0.92);
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- service cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.62);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s;
}
.card::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--brass-soft) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: 0 26px 50px -28px rgba(11,11,11,0.3); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card__ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 22px;
}
.card__ico svg { width: 20px; height: 20px; }
.card__num { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted-2); }
.card h3 { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; margin: 14px 0 12px; }
.card p { color: var(--body); font-size: 14.5px; line-height: 1.65; }
.card__list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.card__list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); }
.card__list li::before { content: ""; width: 14px; height: 1px; background: var(--brass); flex-shrink: 0; }
.card__go { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-family: "Archivo", sans-serif; font-weight: 600; font-size: 13.5px; transition: gap 0.3s var(--ease); }
.card:hover .card__go { gap: 14px; }

/* ---------- capability chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vh, 44px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: rgba(255,255,255,0.55);
  font-size: 13px; color: var(--body);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.chip:hover { border-color: var(--line); background: #fff; transform: translateY(-2px); }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); }
.stat { padding-top: 22px; border-top: 1px solid var(--line); }
.stat b { display: block; font-family: "Archivo", sans-serif; font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.work {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.work:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -30px rgba(11,11,11,0.34); }
.work__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #0A0A0A; }
.work__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); transition: transform 0.9s var(--ease), filter 0.6s; }
.work:hover .work__media img { transform: scale(1.05); }
.work__tags { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 7px; }
.work__tags span { padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); font-size: 11px; font-weight: 600; font-family: "Archivo", sans-serif; letter-spacing: 0.04em; }
.work__body { padding: 24px clamp(20px, 2vw, 30px) clamp(24px, 2.4vw, 32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.work__body h3 { font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; margin-bottom: 7px; }
.work__body p { color: var(--body); font-size: 14px; line-height: 1.6; max-width: 42ch; }
.work__arrow {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.work:hover .work__arrow { background: var(--ink); color: var(--paper); transform: rotate(-45deg); }

/* ---------- dark band ---------- */
.dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.dark .h-sec, .dark h3 { color: var(--paper); }
.dark .lede, .dark p { color: #B4B2AC; }
.dark .stat { border-top-color: var(--on-dark-line); }
.dark .stat span { color: var(--on-dark-mute); }

/* feature list on dark */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--on-dark-line); border: 1px solid var(--on-dark-line); border-radius: var(--r); overflow: hidden; }
.feature { background: var(--ink); padding: clamp(24px, 2.6vw, 36px); transition: background 0.4s; }
.feature:hover { background: #141413; }
.feature__ico { width: 20px; height: 20px; color: var(--brass); margin-bottom: 18px; }
.feature h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 9px; color: var(--paper); }
.feature p { font-size: 13.5px; line-height: 1.6; color: #97958F; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 38px); position: relative; }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.step::after {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width 1.1s var(--ease);
}
.step.in::after { width: 100%; }
.step__n { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 30px; color: var(--brass); line-height: 1; }
.step h3 { font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; margin: 14px 0 11px; }
.step p { color: var(--body); font-size: 14px; line-height: 1.65; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.quote {
  padding: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.62);
  display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -28px rgba(11,11,11,0.28); }
.quote__mark { font-family: "Instrument Serif", Georgia, serif; font-size: 52px; line-height: 0.6; color: var(--brass); margin-bottom: 16px; }
.quote p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 26px; }
.quote__who { margin-top: auto; display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.quote__av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.quote__who b { display: block; font-size: 14.5px; font-weight: 600; }
.quote__who span { font-size: 12.5px; color: var(--muted); }

/* ---------- faq ---------- */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.faq-head { position: sticky; top: 120px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 24px 0;
  text-align: left;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19.5px);
  letter-spacing: -0.02em;
  transition: color 0.25s;
}
.faq-q:hover { color: var(--brass); }
.faq-ico { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s; }
.faq-ico::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.faq-ico::after { left: 6.75px; top: 0; width: 1.5px; height: 15px; }
.faq-item.is-open .faq-ico::after { transform: scaleY(0); opacity: 0; }
.faq-item.is-open .faq-q { color: var(--brass); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--body); font-size: 15px; line-height: 1.75; max-width: 62ch; padding-bottom: 26px; }

/* ---------- cta band ---------- */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(52px, 8vw, 104px) clamp(28px, 5vw, 80px);
  text-align: center;
}
.cta::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 20%, var(--ink) 78%);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(34px, 6vw, 78px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; margin-bottom: 22px; color: var(--paper); }
.cta h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.cta p { color: #B4B2AC; font-size: clamp(15px, 1.3vw, 18px); max-width: 50ch; margin: 0 auto 38px; }
.cta__actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(56px, 8vh, 92px) 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: clamp(30px, 4vw, 60px); padding-bottom: clamp(44px, 6vh, 72px); }
.footer__brand p { color: var(--body); font-size: 14.5px; line-height: 1.7; max-width: 32ch; margin-top: 18px; }
.footer__col h2 { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; line-height: inherit; }
.footer__col a, .footer__col span { display: block; font-size: 14.5px; color: var(--body); padding: 5px 0; transition: color 0.25s; width: fit-content; }
.footer__col a:hover { color: var(--ink); }
.footer__base { padding-top: 26px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.footer__base a:hover { color: var(--ink); }

/* ---------- page header (sub pages) ---------- */
.page-head { padding: clamp(130px, 18vh, 190px) 0 clamp(44px, 6vh, 76px); }
.page-head h1 { font-size: clamp(40px, 7vw, 88px); font-weight: 800; letter-spacing: -0.042em; line-height: 0.96; margin: 22px 0 24px; }
.page-head h1 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.breadcrumb { font-size: 13px; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.breadcrumb a:hover { color: var(--ink); }

/* ---------- contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,0.7);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); background: #fff;
  box-shadow: 0 0 0 4px rgba(11,11,11,0.05);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: 13px; color: var(--muted); }
.form__ok { display: none; padding: 15px 18px; border-radius: 13px; background: var(--brass-soft); border: 1px solid rgba(154,119,66,0.3); font-size: 14.5px; color: #6E5225; }
.form__ok.show { display: block; }

.info-card { padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(255,255,255,0.62); }
.info-row { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line-2); }
.info-row:last-child { border-bottom: none; }
.info-row svg { width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; margin-top: 3px; }
.info-row b { display: block; font-family: "Archivo", sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.info-row span, .info-row a { font-size: 14px; color: var(--body); }
.info-row a:hover { color: var(--ink); }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.member { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,0.62); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.member:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(11,11,11,0.28); }
.member__img { aspect-ratio: 1 / 1; background: #0A0A0A; overflow: hidden; }
.member__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform 0.8s var(--ease); }
.member:hover .member__img img { transform: scale(1.05); }
.member__body { padding: 22px clamp(20px, 2vw, 28px) 26px; }
.member__body b { display: block; font-family: "Archivo", sans-serif; font-size: 17px; font-weight: 700; }
.member__body span { font-size: 13px; color: var(--brass); }
.member__body p { font-size: 13.5px; color: var(--body); line-height: 1.6; margin-top: 11px; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.tier { position: relative; padding: clamp(28px, 3vw, 42px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(255,255,255,0.62); display: flex; flex-direction: column; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tier:hover { transform: translateY(-5px); box-shadow: 0 28px 54px -30px rgba(11,11,11,0.3); }
.tier--feature { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tier--feature h3, .tier--feature .tier__price { color: var(--paper); }
.tier--feature p, .tier--feature .tier__list li { color: #B4B2AC; }
.tier--feature .tier__list li::before { background: var(--brass); }
.tier__flag { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: 100px; background: var(--brass); color: #fff; font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tier h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.tier > p { font-size: 14px; color: var(--body); line-height: 1.6; }
.tier__price { font-family: "Archivo", sans-serif; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.04em; margin: 22px 0 4px; }
.tier__price sup { font-size: 15px; font-weight: 600; vertical-align: super; letter-spacing: 0; }
.tier__per { font-size: 13px; color: var(--muted); }
.tier__list { display: flex; flex-direction: column; gap: 11px; margin: 26px 0 30px; }
.tier__list li { display: flex; gap: 10px; font-size: 14px; color: var(--body); line-height: 1.5; }
.tier__list li::before { content: ""; width: 14px; height: 1px; background: var(--brass); flex-shrink: 0; margin-top: 10px; }
.tier .btn { margin-top: auto; justify-content: center; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid rgba(11,11,11,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s, border-color 0.3s, opacity 0.3s;
  opacity: 0;
  will-change: transform;
}
.cursor.on { opacity: 1; }
.cursor.grow { width: 54px; height: 54px; background: rgba(154,119,66,0.13); border-color: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__panel { aspect-ratio: 4 / 3.4; }
  .hero__badge--1 { left: 2%; }
  .hero__badge--2 { right: 2%; }
  .cards-3 { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .faq-head { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__brand { grid-column: 1 / -1; }
  .tiers { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .cursor { display: none; }
}

@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__trust-sep { display: none; }
  .hero__badge--2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   COLOUR & MOTION LAYER
   Four muted voices (brass · verdigris · clay · indigo) held to
   the same tonal weight, so colour reads as considered rather
   than loud. Components never name a colour — they read
   --accent, and a parent decides which voice they speak in.
   ============================================================ */

/* ---------- accent assignment ---------- */
[data-accent="brass"]     { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
[data-accent="verdigris"] { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
[data-accent="clay"]      { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }
[data-accent="indigo"]    { --accent: var(--indigo);    --accent-rgb: var(--indigo-rgb); }

.eyebrow::before { background: var(--accent); }

/* ---------- aurora: slow colour drift behind the hero ---------- */
.hero { isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: -35% -25% -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 16% 26%, rgba(var(--brass-rgb),     0.20), transparent 64%),
    radial-gradient(30% 36% at 84% 20%, rgba(var(--verdigris-rgb), 0.17), transparent 66%),
    radial-gradient(36% 42% at 72% 78%, rgba(var(--clay-rgb),      0.15), transparent 68%),
    radial-gradient(30% 36% at 24% 84%, rgba(var(--indigo-rgb),    0.15), transparent 66%);
  animation: aurora 30s ease-in-out infinite alternate;
  will-change: transform;
}
.hero > * { position: relative; z-index: 1; }

@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.09); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.04); }
}

/* sub-pages get a quieter version, tinted to that page voice */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head::before {
  content: "";
  position: absolute;
  inset: -45% -20% -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 46% at 12% 22%, rgba(var(--accent-rgb), 0.20), transparent 66%),
    radial-gradient(26% 40% at 88% 34%, rgba(var(--indigo-rgb), 0.11), transparent 68%);
  animation: aurora 36s ease-in-out infinite alternate;
}
.page-head > * { position: relative; z-index: 1; }

/* ---------- scroll progress ---------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1001;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brass), var(--verdigris) 34%, var(--clay) 67%, var(--indigo));
  will-change: transform;
}

/* ---------- soft accent wash for light sections ---------- */
.wash { position: relative; isolation: isolate; }
.wash::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background: radial-gradient(54% 64% at 50% -8%, rgba(var(--accent-rgb), 0.09), transparent 72%);
}
.wash > * { position: relative; z-index: 1; }

/* ---------- headings rise and wipe into view ---------- */
.sec-head .h-sec,
.page-head h1 {
  clip-path: inset(0 0 106% 0);
  transform: translateY(10px);
  transition: clip-path 1s var(--ease) 0.08s, transform 1s var(--ease) 0.08s;
}
.sec-head.in .h-sec,
.page-head h1.in { clip-path: inset(0 0 -14% 0); transform: none; }

/* ---------- service cards: accent + parallax tilt ---------- */
.cards-3 { perspective: 1200px; }
.card { transform-style: preserve-3d; }
.card::before { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.17) 0%, transparent 62%); }
.card__ico {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.5s var(--ease);
}
.card:hover .card__ico { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateZ(26px) scale(1.05); }
.card__list li::before { background: var(--accent); }
.card__num { transition: color 0.4s; }
.card:hover .card__num { color: var(--accent); }
.card__go { color: var(--accent); }

.card.in {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
}
.card.in:hover {
  --ty: -6px;
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), 0.55), 0 6px 18px -12px rgba(11,11,11,0.16);
}
.card.is-tilting { transition: transform 0.1s linear, border-color 0.4s, box-shadow 0.5s var(--ease); }

/* ---------- work cards ---------- */
.work__tags span:first-child { background: var(--accent); color: #fff; }
.work__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.38), transparent 60%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.work:hover .work__media::after { opacity: 1; }
.work.in:hover { box-shadow: 0 34px 64px -30px rgba(var(--accent-rgb), 0.5), 0 8px 20px -14px rgba(11,11,11,0.18); }
.work.in:hover .work__arrow { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- process ---------- */
.step::after { background: var(--accent); height: 2px; }
.step__n { color: var(--accent); transition: transform 0.5s var(--ease); display: inline-block; }
.step:hover .step__n { transform: translateY(-3px); }

/* ---------- features on the dark band ---------- */
.dark { position: relative; overflow: hidden; }
.dark::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 62% at 10% 6%,  rgba(var(--verdigris-rgb), 0.18), transparent 66%),
    radial-gradient(40% 58% at 90% 94%, rgba(var(--clay-rgb),      0.14), transparent 68%);
}
.dark > * { position: relative; z-index: 1; }
.feature { position: relative; }
.feature::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}
.feature:hover::after { transform: scaleX(1); }
.feature:hover { background: rgba(var(--accent-rgb), 0.09); }
.feature__ico { color: var(--accent); }

/* ---------- chips cycle through the four voices ---------- */
.chip:nth-child(4n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
.chip:nth-child(4n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
.chip:nth-child(4n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }
.chip:nth-child(4n+4) { --accent: var(--indigo);    --accent-rgb: var(--indigo-rgb); }
.chip::before { background: var(--accent); }
.chip:hover { border-color: rgba(var(--accent-rgb), 0.42); background: #fff; color: var(--accent); }

/* ---------- stats ---------- */
.stats .stat:nth-child(4n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
.stats .stat:nth-child(4n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
.stats .stat:nth-child(4n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }
.stats .stat:nth-child(4n+4) { --accent: var(--indigo);    --accent-rgb: var(--indigo-rgb); }
.stat { border-top: 2px solid rgba(var(--accent-rgb), 0.45); }
.dark .stat { border-top-color: rgba(var(--accent-rgb), 0.6); }

/* ---------- faq ---------- */
.faq-item:nth-child(4n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
.faq-item:nth-child(4n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
.faq-item:nth-child(4n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }
.faq-item:nth-child(4n+4) { --accent: var(--indigo);    --accent-rgb: var(--indigo-rgb); }
.faq-q:hover { color: var(--accent); }
.faq-item.is-open .faq-q { color: var(--accent); }
.faq-item.is-open { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 62%); }

/* ---------- pricing ---------- */
.tier__flag { background: var(--accent); }
.tier__list li::before { background: var(--accent); }
.tier.in:hover { border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 30px 58px -30px rgba(var(--accent-rgb), 0.5); }
.tier--feature .tier__list li::before { background: var(--accent); }

/* ---------- quotes ---------- */
.quote:nth-child(3n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
.quote:nth-child(3n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
.quote:nth-child(3n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }
.quote__mark { color: var(--accent); }
.quote__av { background: var(--accent); color: #fff; }
.quote.in:hover { box-shadow: 0 26px 50px -28px rgba(var(--accent-rgb), 0.45); }

/* ---------- buttons pick up the local voice ---------- */
.btn--primary::after { background: var(--accent); }
.btn--light:hover { background: var(--accent); color: #fff; }

/* ---------- back to top ---------- */
.totop {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  z-index: 900;
  opacity: 0; transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s;
  box-shadow: 0 14px 32px -14px rgba(11,11,11,0.55);
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--brass); }
.totop svg { width: 15px; height: 15px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  transform: translate(-50%, 18px);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--ink); color: var(--paper);
  font-family: "Archivo", sans-serif;
  font-size: 13.5px; font-weight: 500;
  z-index: 1002;
  opacity: 0; pointer-events: none;
  box-shadow: 0 18px 40px -18px rgba(11,11,11,0.6);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verdigris); flex-shrink: 0; }

/* ---------- page transition veil ---------- */
.veil {
  position: fixed; inset: 0;
  z-index: 1200;
  pointer-events: none;
  background: var(--paper);
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}
body.ready .veil { opacity: 0; }
body.leaving .veil { opacity: 1; transition-duration: 0.3s; }

/* ---------- cursor takes the colour of what it is over ---------- */
.cursor.grow { background: rgba(var(--cursor-rgb, 154, 119, 66), 0.15); }

/* ---------- motion & device guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-head::before { animation: none; }
  .sec-head .h-sec, .page-head h1 { clip-path: none; transform: none; transition: none; }
  .progress, .veil { display: none; }
  .totop, .toast { transition: opacity 0.2s linear; }
}

@media (hover: none), (pointer: coarse) {
  /* no tilt where there is no cursor to drive it */
  .card.in { transform: translate3d(0, var(--ty, 0px), 0); }
}

@media (max-width: 900px) {
  .hero::before { inset: -25% -30% -10%; }
  .totop { width: 42px; height: 42px; }
  .toast { bottom: 20px; font-size: 12.5px; padding: 11px 17px; }
}

/* ---------- repeating grids cycle through the four voices ---------- */
.work-grid .work:nth-child(4n+1),
.steps .step:nth-child(4n+1),
.features .feature:nth-child(4n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }

.work-grid .work:nth-child(4n+2),
.steps .step:nth-child(4n+2),
.features .feature:nth-child(4n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }

.work-grid .work:nth-child(4n+3),
.steps .step:nth-child(4n+3),
.features .feature:nth-child(4n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }

.work-grid .work:nth-child(4n+4),
.steps .step:nth-child(4n+4),
.features .feature:nth-child(4n+4) { --accent: var(--indigo);    --accent-rgb: var(--indigo-rgb); }

.tiers .tier:nth-child(3n+1) { --accent: var(--brass);     --accent-rgb: var(--brass-rgb); }
.tiers .tier:nth-child(3n+2) { --accent: var(--verdigris); --accent-rgb: var(--verdigris-rgb); }
.tiers .tier:nth-child(3n+3) { --accent: var(--clay);      --accent-rgb: var(--clay-rgb); }

/* ============================================================
   REFINEMENT LAYER
   Consistency is the luxury signal. Everything below replaces a
   hand-tuned value with a systematic one: one type scale, one
   motion hierarchy, warm layered shadows, enforced radii.
   ============================================================ */

:root {
  /* ---- type scale -------------------------------------------
     One ratio, fluid. Nothing between these steps is allowed.  */
  --t-1:  clamp(11px,  0.62vw, 12px);    /* eyebrow / micro   */
  --t-2:  clamp(12.5px,0.82vw, 13.5px);  /* meta / captions   */
  --t-3:  clamp(13.5px,0.95vw, 15px);    /* small body        */
  --t-4:  clamp(15px,  1.15vw, 16.5px);  /* body              */
  --t-5:  clamp(16.5px,1.35vw, 19px);    /* lede              */
  --t-6:  clamp(19px,  1.75vw, 24px);    /* card / h3         */
  --t-7:  clamp(25px,  2.6vw,  34px);    /* h3 large          */
  --t-8:  clamp(32px,  4.1vw,  52px);    /* h2 / section      */
  --t-9:  clamp(40px,  5.7vw,  78px);    /* h1 / page head    */
  --t-10: clamp(46px,  7.1vw, 104px);    /* hero display      */

  /* ---- optical tracking -------------------------------------
     Type tightens as it grows. This is the rule most sites
     miss, and it is why big headlines elsewhere look loose.   */
  --tr-display: -0.045em;
  --tr-head:    -0.032em;
  --tr-sub:     -0.018em;
  --tr-body:    -0.011em;
  --tr-eyebrow:  0.2em;

  /* ---- warm shadows -----------------------------------------
     Warm light casts a warm shadow. Two stacked layers per
     elevation reads as real depth; one big blur reads as CSS. */
  --sh: 34, 26, 16;
  --e1: 0 1px 2px  rgba(var(--sh), 0.05),
        0 2px 7px -2px rgba(var(--sh), 0.06);
  --e2: 0 2px 4px  rgba(var(--sh), 0.05),
        0 10px 24px -8px rgba(var(--sh), 0.12);
  --e3: 0 4px 9px -2px rgba(var(--sh), 0.06),
        0 20px 44px -14px rgba(var(--sh), 0.18);
  --e4: 0 8px 18px -4px rgba(var(--sh), 0.07),
        0 38px 76px -26px rgba(var(--sh), 0.28);

  /* ---- motion hierarchy -------------------------------------
     Four durations. Small things move fast, large things slow. */
  --d-1: 140ms;  /* colour, opacity, micro state */
  --d-2: 260ms;  /* hover, buttons              */
  --d-3: 480ms;  /* cards, panels, layout       */
  --d-4: 820ms;  /* reveals, entrances          */
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- type applied ---------- */
body       { font-size: var(--t-4); letter-spacing: var(--tr-body); }
.eyebrow   { font-size: var(--t-1); letter-spacing: var(--tr-eyebrow); }
.lede,
.hero__lede{ font-size: var(--t-5); letter-spacing: var(--tr-body); line-height: 1.65; }

.hero__title { font-size: var(--t-10); letter-spacing: var(--tr-display); line-height: 0.95; }
.page-head h1,
.cta h2      { font-size: var(--t-9);  letter-spacing: var(--tr-display); line-height: 0.97; }
.h-sec       { font-size: var(--t-8);  letter-spacing: var(--tr-head); line-height: 1.0; }

.card h3,
.work__body h3,
.step h3,
.tier h3     { font-size: var(--t-6); letter-spacing: var(--tr-sub); }
.feature h3  { font-size: var(--t-3); letter-spacing: var(--tr-sub); }

.card p,
.work__body p,
.step p,
.quote p,
.feature p   { font-size: var(--t-3); letter-spacing: var(--tr-body); line-height: 1.68; }

.stat b      { letter-spacing: var(--tr-display); }
.tier__price { letter-spacing: var(--tr-display); }
.btn         { font-size: var(--t-3); letter-spacing: var(--tr-body); }

/* the serif italic sits optically small next to Archivo — nudge it */
.hero__title em,
.h-sec em,
.cta h2 em,
.page-head h1 em { font-size: 1.06em; letter-spacing: -0.015em; }

/* ---------- radii enforced ---------- */
.card, .work, .tier, .quote, .info-card { border-radius: var(--r-lg); }
.chip, .work__tags span, .hero__badge, .pill { border-radius: 100px; }
.card__ico, .field input, .field select, .field textarea { border-radius: var(--r-sm); }

/* ---------- shadows applied ---------- */
.card.in:hover,
.quote.in:hover,
.tier.in:hover { box-shadow: var(--e3), 0 30px 60px -34px rgba(var(--accent-rgb), 0.42); }
.work.in:hover { box-shadow: var(--e4), 0 34px 66px -34px rgba(var(--accent-rgb), 0.38); }
.hero__badge   { box-shadow: var(--e2); }
.hero__panel   { box-shadow: var(--e4); }
.nav.is-stuck  { box-shadow: var(--e1); }
.totop         { box-shadow: var(--e3); }
.toast         { box-shadow: var(--e4); }

/* ---------- motion hierarchy applied ---------- */
.btn      { transition: transform var(--d-2) var(--spring),
                        background var(--d-1) linear,
                        color var(--d-1) linear,
                        border-color var(--d-1) linear; }
.btn svg  { transition: transform var(--d-2) var(--spring); }
.btn--primary::after { transition: transform var(--d-3) var(--ease); }

.card.in, .work.in, .tier.in, .quote.in {
  transition: transform var(--d-3) var(--ease),
              box-shadow var(--d-3) var(--ease),
              border-color var(--d-2) linear;
}
.card.is-tilting { transition: transform var(--d-1) linear,
                               box-shadow var(--d-3) var(--ease),
                               border-color var(--d-2) linear; }

.card__ico   { transition: background var(--d-2) var(--ease),
                           color var(--d-2) var(--ease),
                           border-color var(--d-2) var(--ease),
                           transform var(--d-3) var(--spring); }
.chip        { transition: transform var(--d-2) var(--spring),
                           border-color var(--d-1) linear,
                           background var(--d-1) linear,
                           color var(--d-1) linear; }
.work__arrow { transition: background var(--d-2) var(--ease),
                           color var(--d-2) var(--ease),
                           transform var(--d-3) var(--spring); }
.faq-q       { transition: color var(--d-1) linear; }
.faq-a       { transition: grid-template-rows var(--d-3) var(--ease); }
.nav__links a{ transition: color var(--d-1) linear, background var(--d-1) linear; }

/* ---------- restraint --------------------------------------
   The hero was running aurora + wash + grain + tilt + parallax
   + magnetic buttons at once. Thin out the competing layers.  */
.hero::before { opacity: 0.82; }
.hero .wash::before { display: none; }

/* ---------- signature: the headline composes itself ---------- */
.compose .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(var(--wr, 0deg));
  filter: blur(5px);
  transition: opacity var(--d-4) var(--ease),
              transform var(--d-4) var(--spring),
              filter var(--d-4) var(--ease);
  transition-delay: var(--wd, 0ms);
  will-change: transform, opacity, filter;
}
.compose.played .w {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- editorial: numbered sections ---------- */
.sec-head { counter-increment: sec; }
.eyebrow--num::after {
  content: "(" counter(sec, decimal-leading-zero) ")";
  margin-left: 4px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
body { counter-reset: sec; }

/* ---------- editorial: hairline craft ---------- */
.section + .section > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent 62%);
  margin-bottom: clamp(52px, 7vh, 92px);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
}
.section + .section.seen > .wrap::before { transform: scaleX(1); }

/* tabular figures everywhere numbers matter — stops digits jittering */
.stat b, .tier__price, .step__n, .card__num, .hero__trust-item b,
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- optical text finishing ---------- */
.lede, .hero__lede, .card p, .work__body p, .step p, .quote p, .feature p,
.faq-a p, .tier > p { text-wrap: pretty; }
.hero__title, .h-sec, .cta h2, .page-head h1 { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .compose .w { opacity: 1; transform: none; filter: none; transition: none; }
  .section + .section > .wrap::before { transform: scaleX(1); transition: none; }
}

/* ---------- compose owns its own reveal ----------
   A composed headline animates word-by-word, so the clip-path
   wipe must get out of the way entirely — two reveal mechanisms
   on one element fight and the element loses (stays clipped).  */
.page-head h1.compose,
.hero__title.compose,
.sec-head .h-sec.compose {
  clip-path: none;
  transform: none;
  transition: none;
  opacity: 1;
}

/* ---------- compose: keyframes, not transitions ----------
   A transition needs a class to arrive at the right moment and
   freezes at its start value if it never does — which would
   leave the headline invisible. A keyframe animation starts on
   its own and `forwards` holds the end state, so the worst case
   is that it plays instantly rather than not at all. The
   .played rule below it stays as a second net.                */
.compose .w {
  opacity: 0;
  transform: translateY(0.42em) rotate(var(--wr, 0deg));
  filter: blur(5px);
  transition: none;
  animation: composeIn var(--d-4) var(--spring) var(--wd, 0ms) forwards;
}
@keyframes composeIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .compose .w { opacity: 1; transform: none; filter: none; animation: none; }
}

/* ============================================================
   COLOUR DEPTH + FAQ REBUILD
   The page read too white because colour only ever appeared as
   accents on top of paper — never as a surface. Sections now sit
   on tinted stock, so the eye moves through blocks of colour
   instead of one flat sheet.
   ============================================================ */

/* ---------- tinted paper stocks ---------- */
.tint {
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.115) 0%,
      rgba(var(--accent-rgb), 0.052) 46%,
      rgba(var(--accent-rgb), 0.086) 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
}
/* the old faint wash is redundant once a section is tinted */
.tint.wash::before { display: none; }

/* ---------- hero badges: service labels with a colour dot ---------- */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: var(--t-2);
  letter-spacing: -0.01em;
  padding: 12px 20px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.hero__badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), 0.18);
  flex-shrink: 0;
}
/* longer labels need repositioning so they clear the panel edges */
.hero__badge--1 { top: 7%;    left: -7%;  right: auto; }
.hero__badge--2 { top: 45%;   right: -9%; left: auto; }
.hero__badge--3 { bottom: 7%; left: -5%;  right: auto; }

/* ---------- service cards sit on their own tint ---------- */
.card {
  background:
    linear-gradient(163deg,
      rgba(var(--accent-rgb), 0.085) 0%,
      rgba(255, 255, 255, 0.72) 52%,
      rgba(255, 255, 255, 0.58) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.card.in:hover { border-color: rgba(var(--accent-rgb), 0.42); }

/* ---------- richer dark band ---------- */
.dark::before {
  background:
    radial-gradient(46% 66% at 8% 4%,   rgba(var(--verdigris-rgb), 0.30), transparent 64%),
    radial-gradient(44% 62% at 92% 96%, rgba(var(--clay-rgb),      0.24), transparent 66%),
    radial-gradient(40% 55% at 62% 34%, rgba(var(--indigo-rgb),    0.18), transparent 68%);
}

/* ---------- footer gets a warm floor ---------- */
.footer {
  background: linear-gradient(180deg, rgba(var(--brass-rgb), 0.07), rgba(var(--brass-rgb), 0.13));
  border-top: 1px solid rgba(var(--brass-rgb), 0.16);
}

/* ============================================================
   FAQ — rebuilt
   Was: a sticky left column that tracked you down the page and a
   bare underlined list. Now: a centred header that stays put, and
   the questions as real cards that lift and colour as they open.
   ============================================================ */
.faq-wrap {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}
.faq-head {
  position: static;      /* kills the sticky scroll-follow */
  top: auto;
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(38px, 5vh, 60px);
}
.faq-head .eyebrow { justify-content: center; }
.faq-head .lede { margin-left: auto; margin-right: auto; }

.faq-list {
  border-top: none;
  counter-reset: faq;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  counter-increment: faq;
  border: 1px solid rgba(var(--accent-rgb), 0.17);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.17);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  transition: background var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease),
              box-shadow var(--d-3) var(--ease),
              transform var(--d-3) var(--ease);
}
.faq-item:hover { border-color: rgba(var(--accent-rgb), 0.34); background: rgba(255,255,255,0.86); }
.faq-item.is-open {
  background: #fff;
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: var(--e2), 0 22px 44px -30px rgba(var(--accent-rgb), 0.5);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(19px, 2vw, 25px) clamp(20px, 2.2vw, 30px);
  text-align: left;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: var(--t-5);
  letter-spacing: var(--tr-sub);
  line-height: 1.35;
  background: none;
}
.faq-q::before {
  content: counter(faq, decimal-leading-zero);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: 0.25em;
}
.faq-q > span:first-of-type { flex: 1; }

.faq-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: background var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease),
              transform var(--d-3) var(--spring);
}
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--d-3) var(--spring), opacity var(--d-2);
}
.faq-ico::before { width: 11px; height: 1.6px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-ico::after  { width: 1.6px; height: 11px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-ico { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.faq-item.is-open .faq-ico::before { background: #fff; }
.faq-item.is-open .faq-ico::after  { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.faq-item.is-open .faq-q { color: var(--ink); }
.faq-item.is-open { background: #fff; }
.faq-a p {
  padding: 0 clamp(20px, 2.2vw, 30px) clamp(22px, 2.2vw, 28px) calc(clamp(20px, 2.2vw, 30px) + 34px);
  font-size: var(--t-3);
  max-width: 68ch;
}

/* ---------- nav: indicator slides between links ---------- */
.nav__links { position: relative; }
.nav__ind {
  position: absolute;
  top: 50%;
  left: 0;
  height: 32px;
  border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.13);
  transform: translateY(-50%) translateX(var(--ix, 0px));
  width: var(--iw, 0px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--d-3) var(--spring),
              width var(--d-3) var(--spring),
              opacity var(--d-2) var(--ease),
              background var(--d-2) var(--ease);
}
.nav__links:hover .nav__ind { opacity: 1; }
.nav__links a { position: relative; z-index: 1; }
.nav__links a:hover { background: none; }

/* ---------- work cards tilt too ---------- */
.work-grid { perspective: 1400px; }
.work { transform-style: preserve-3d; }
.work.in {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
}
.work.in:hover { --ty: -6px; }
.work.is-tilting { transition: transform var(--d-1) linear, box-shadow var(--d-3) var(--ease); }

@media (hover: none), (pointer: coarse) {
  .work.in { transform: translate3d(0, var(--ty, 0px), 0); }
  .nav__ind { display: none; }
}

@media (max-width: 900px) {
  .hero__badge { font-size: 11.5px; padding: 10px 15px; }
  .hero__badge--1 { left: 0; }
  .hero__badge--2 { right: 0; }
  .hero__badge--3 { left: 0; }
  .faq-q { font-size: var(--t-4); gap: 13px; }
  .faq-a p { padding-left: clamp(20px, 2.2vw, 30px); }
}

/* ============================================================
   TEMPLATE GALLERY
   Previews are real iframes of the real template pages, scaled
   down — so what you see is never out of date with what ships.
   ============================================================ */

.tpl-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(26px,3.6vh,44px);
  padding-bottom:20px; border-bottom:1px solid var(--line-2);
}
.chips--filter{ margin-top:0; gap:8px; }
.chip--f{ cursor:pointer; font:inherit; font-size:13px; }
.chip--f.is-on{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
}
.chip--f.is-on::before{ background:var(--paper); }
.tpl-count{ font-size:13px; color:var(--muted); white-space:nowrap; }
.tpl-count b{ color:var(--ink); font-family:"Archivo",sans-serif; font-variant-numeric:tabular-nums; }

.tpl-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,34px);
}

.tpl{ --ty:0px; }
.tpl[hidden]{ display:none; }
.tpl__link{
  display:flex; flex-direction:column; height:100%;
  border:1px solid rgba(var(--accent-rgb),0.18);
  border-radius:var(--r-lg);
  background:linear-gradient(168deg, rgba(var(--accent-rgb),0.07), rgba(255,255,255,0.6));
  overflow:hidden;
  transform:translate3d(0,var(--ty),0);
  transition:transform var(--d-3) var(--ease),
             box-shadow var(--d-3) var(--ease),
             border-color var(--d-2) var(--ease);
}
.tpl__link:hover{
  --ty:-7px;
  border-color:rgba(var(--accent-rgb),0.42);
  box-shadow:var(--e3), 0 34px 66px -34px rgba(var(--accent-rgb),0.5);
}

/* live preview window */
.tpl__frame{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--ink);
  border-bottom:1px solid rgba(var(--accent-rgb),0.16);
}
.tpl__frame iframe{
  position:absolute; top:0; left:0;
  width:250%; height:250%;
  border:0;
  transform:scale(0.4);
  transform-origin:0 0;
  pointer-events:none;          /* the card owns the click */
  transition:transform 1.4s var(--ease);
}
/* on hover, drift down the page so more of the design shows */
.tpl__link:hover .tpl__frame iframe{ transform:scale(0.4) translateY(-9%); }

.tpl__open{
  position:absolute; left:50%; bottom:16px;
  transform:translate(-50%,10px);
  padding:10px 20px; border-radius:100px;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px);
  color:var(--ink);
  font-family:"Archivo",sans-serif; font-size:12.5px; font-weight:600;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  box-shadow:var(--e2);
  transition:opacity var(--d-2) var(--ease), transform var(--d-3) var(--spring);
  z-index:2;
}
.tpl__link:hover .tpl__open{ opacity:1; transform:translate(-50%,0); }

.tpl__body{
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  flex:1;
  padding:clamp(20px,2.2vw,30px);
}
.tpl__cat{
  font-family:"Archivo",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent);
}
.tpl__body h3{
  font-size:var(--t-6); font-weight:700; letter-spacing:var(--tr-sub);
  margin:10px 0 10px;
}
.tpl__body p{ color:var(--body); font-size:var(--t-3); line-height:1.65; }

.tpl__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:16px; border-top:1px solid var(--line-2);
}
/* palette swatches */
.sw{ display:inline-flex; }
.sw i{
  width:17px; height:17px; border-radius:50%;
  background:var(--c);
  border:1.5px solid var(--paper);
  margin-left:-6px;
  box-shadow:0 1px 3px rgba(34,26,16,0.28);
}
.sw i:first-child{ margin-left:0; }
.tpl__go{
  font-family:"Archivo",sans-serif; font-size:13px; font-weight:600;
  color:var(--accent);
  transition:transform var(--d-2) var(--spring);
  display:inline-block;
}
.tpl__link:hover .tpl__go{ transform:translateX(4px); }

.tpl-empty{
  text-align:center; color:var(--muted); font-size:15px;
  padding:clamp(40px,7vh,80px) 0;
}
.tpl-reset{
  font:inherit; color:var(--ink); cursor:pointer;
  border-bottom:1px solid var(--line); background:none;
}

@media (max-width:900px){
  .tpl-grid{ grid-template-columns:1fr; }
  .tpl__frame iframe{ width:320%; height:320%; transform:scale(0.3125); }
  .tpl__link:hover .tpl__frame iframe{ transform:scale(0.3125); }
  .tpl-bar{ flex-direction:column; align-items:flex-start; }
}

/* an iframe cannot animate for a viewer who asked for stillness */
@media (prefers-reduced-motion: reduce){
  .tpl__frame iframe,
  .tpl__link:hover .tpl__frame iframe{ transition:none; }
}

/* ============================================================
   PRICING — the page ladder and the live estimator
   ============================================================ */

.quote-wrap{ margin-top:clamp(40px,6vh,72px); }
.quote-cols{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(18px,2.4vw,32px);
  align-items:stretch;
}

/* ---------- the ladder ---------- */
.ladder,
.est{
  padding:clamp(24px,3vw,40px);
  border-radius:var(--r-lg);
  border:1px solid rgba(var(--accent-rgb),0.2);
  background:linear-gradient(168deg, rgba(var(--accent-rgb),0.075), rgba(255,255,255,0.66));
}
.ladder h3,
.est h3{
  font-size:var(--t-6); font-weight:700; letter-spacing:var(--tr-sub);
  margin:12px 0 12px;
}
.ladder p{ color:var(--body); font-size:var(--t-3); line-height:1.65; }

/* ---------- what's included (replaced the page ladder, 2026-09-25) ----------
   Same family as the old ladder table: hairline rows, the label on the
   left, the answer on the right. The answer is now a tick or a dash per
   package instead of a price. The marks are drawn in CSS rather than
   typed as characters, so a screen reader hears "Included" or
   "Not included" from the hidden text, and never "check mark".          */
.incl{
  width:100%; border-collapse:collapse;
  margin:22px 0 18px;
}
.incl tr{ border-bottom:1px solid var(--line-2); }
.incl tbody tr:last-child{ border-bottom:none; }
.incl thead th{
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
  padding:0 0 11px; text-align:center; width:74px;
}
.incl thead th:first-child{ text-align:left; width:auto; }
.incl tbody th{
  text-align:left; font-weight:500; color:var(--body);
  font-size:var(--t-3); line-height:1.45; padding:11px 12px 11px 0;
}
.incl td{ text-align:center; padding:11px 0; vertical-align:middle; }
.incl i{
  position:relative; display:inline-block; vertical-align:middle;
  width:18px; height:18px;
  font-size:0; line-height:0; color:transparent;   /* text kept for screen readers */
}
.incl i.y{ border-radius:50%; background:rgba(var(--accent-rgb),0.14); }
.incl i.y::before{
  content:""; position:absolute; left:6.5px; top:3.5px;
  width:4px; height:8px;
  border:solid var(--accent-text, var(--accent)); border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.incl i.n::before{
  content:""; position:absolute; left:4px; right:4px; top:8.5px;
  height:1.5px; border-radius:2px; background:var(--muted-2); opacity:.7;
}
.ladder__note{ font-size:var(--t-2); color:var(--muted); line-height:1.6; }
/* ---------- estimator ---------- */
.est{ display:flex; flex-direction:column; }
.est__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:6px;
}
.est__row label{ font-size:var(--t-3); color:var(--body); }
.est__pages{
  font-family:"Archivo",sans-serif; font-weight:800;
  font-size:var(--t-7); letter-spacing:var(--tr-sub);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* the slider, styled in both engines */
.est__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; margin:16px 0 6px;
  border-radius:100px; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) var(--fill,25%), rgba(var(--accent-rgb),0.18) var(--fill,25%));
}
.est__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
  box-shadow:var(--e2);
  transition:transform var(--d-2) var(--spring), box-shadow var(--d-2) var(--ease);
}
.est__range::-webkit-slider-thumb:hover{ transform:scale(1.14); }
.est__range:active::-webkit-slider-thumb{ transform:scale(1.2); background:var(--accent); }
.est__range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
  box-shadow:var(--e2); cursor:pointer;
}
.est__range:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.est__scale{
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  margin-bottom:22px;
}

.est__addons{ border:none; padding:0; margin:0 0 20px; }
.est__addons legend{
  font-size:var(--t-3); color:var(--body); padding:0;
  margin-bottom:12px;
}
.est__chk{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; margin-bottom:7px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(255,255,255,0.5);
  font-size:var(--t-3); cursor:pointer;
  transition:border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.est__chk:hover{ border-color:rgba(var(--accent-rgb),0.4); background:#fff; }
.est__chk span{ flex:1; }
.est__chk b{
  font-family:"Archivo",sans-serif; font-weight:600;
  font-size:var(--t-2); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.est__chk input{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:5px;
  background:var(--paper); cursor:pointer; position:relative;
  transition:background var(--d-1) linear, border-color var(--d-1) linear;
}
.est__chk input:checked{ background:var(--accent); border-color:var(--accent); }
.est__chk input:checked::after{
  content:""; position:absolute; left:5px; top:1.5px;
  width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.est__chk:has(input:checked){ border-color:rgba(var(--accent-rgb),0.45); background:#fff; }
.est__chk:has(input:checked) b{ color:var(--accent); }

.est__total{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--line-2);
}
.est__label{
  display:block; font-family:"Archivo",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted);
}
.est__sum{
  display:flex; align-items:flex-start; gap:2px;
  font-family:"Archivo",sans-serif; font-weight:800;
  letter-spacing:var(--tr-display); line-height:1;
  margin:8px 0 6px;
  font-variant-numeric:tabular-nums;
}
.est__sum sup{ font-size:var(--t-6); margin-top:0.24em; }
.est__sum b{ font-size:clamp(38px,4.6vw,58px); font-weight:800; }
.est__break{ display:block; font-size:var(--t-2); color:var(--muted); }
.est__note{
  margin-top:16px; font-size:var(--t-2); color:var(--muted); line-height:1.6;
}

/* ---------- how paying works ---------- */
.pay{ margin-top:clamp(18px,2.4vw,32px); }
.pay__steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
  margin-top:22px;
}
.pay__step{
  padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:rgba(255,255,255,0.56);
}
.pay__step b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(28px,3.2vw,40px); letter-spacing:var(--tr-display);
  line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.pay__step span{
  display:block; margin:7px 0 10px;
  font-size:11px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
  font-family:"Archivo",sans-serif;
}
.pay__step p{ font-size:var(--t-3); color:var(--body); line-height:1.6; }

.pay__steps .pay__step:nth-child(1){ --accent:var(--brass);     --accent-rgb:var(--brass-rgb); }
.pay__steps .pay__step:nth-child(2){ --accent:var(--verdigris); --accent-rgb:var(--verdigris-rgb); }
.pay__steps .pay__step:nth-child(3){ --accent:var(--indigo);    --accent-rgb:var(--indigo-rgb); }

@media (max-width:900px){
  .quote-cols{ grid-template-columns:1fr; }
  .pay__steps{ grid-template-columns:1fr; }
}


/* ============================================================
   ACCESSIBILITY PASS
   An audit found 32 text elements below WCAG AA contrast. Two
   causes: the grey scale was too light, and accent-coloured text
   inherited hues tuned for decoration, where no contrast rule
   applies. Decorative accents keep their original hue — only text
   gets the darker twin.
   ============================================================ */

:root{
  --muted:   #706E67;   /* was #7C7A73 — 3.87:1 on paper, failed AA */
  --muted-2: #74716A;   /* was #A3A099 — 2.35:1, badly failing      */

  /* Fallback: browsers without color-mix keep the previous colour
     rather than losing it entirely. */
  --accent-text: var(--accent);
}

/* Declared on * so every element derives its own text colour from
   the --accent it has actually inherited — a card set to clay gets
   a darkened clay, not a darkened brass. Declaring this once on
   :root would resolve var(--accent) against :root and hand every
   element the same colour. */
@supports (color: color-mix(in srgb, red 50%, blue)){
  *{ --accent-text: color-mix(in srgb, var(--accent) 82%, #241C12); }
}

/* ---------- accent-coloured TEXT gets the readable twin ---------- */
.card__go,
.tpl__cat,
.faq-q:hover,
.faq-item.is-open .faq-q,
.est__chk:has(input:checked) b,
.chip:hover,
.tpl__go{
  color: var(--accent-text);
}

/* Small accent text on the dark bands is already light-on-dark and
   passes comfortably — left alone deliberately. */

/* ---------- skip link ---------- */
.skip{
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--e3);
  transition: top var(--d-2) var(--ease);
}
.skip:focus{ top: 12px; }

/* A visible focus ring everywhere, not just where we remembered.
   The brass ring is legible on both paper and ink. */
:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}
.dark :focus-visible,
.cta :focus-visible{ outline-color: var(--gold-2, #E0C08A); }

/* the footer sits on a brass tint, so brass headings landed at 4.39:1 */
.footer__col h2{ color: var(--accent-text); }

/* ---------- the last three contrast failures ----------
   card__num sat on a tinted card, so --muted-2 needed another
   step down; the "Most chosen" flag is white on accent, which
   only clears 4.5:1 once the accent is the darkened text twin;
   and the 4th process numeral (indigo) landed at 2.97 against
   the 3:1 large-text floor. */
:root{ --muted-2: #6C6962; }
.tier__flag{ background: var(--accent-text); }
.step__n{ color: var(--accent-text); }

/* ---------- dark contexts need the greys to go the other way ----------
   Darkening --muted/--muted-2 fixed the light sections but inverted the
   problem on ink: the same tokens are used inside the dark bands, the CTA,
   the featured pricing tier and the mobile menu. There they must get
   lighter, and accent text must stay the bright accent rather than the
   darkened twin (which fell to 1.06:1 on ink). */
.dark, .cta, .tier--feature, .menu{
  --muted:   #A9A69E;
  --muted-2: #99968E;
}
.dark .step__n,
.cta .step__n,
.tier--feature .step__n,
.dark .card__go,
.dark .tpl__cat,
.dark .footer__col h2{
  color: var(--accent);
}
.tier--feature .tier__flag{ background: var(--accent); color: #15120D; }

/* ---------- corrections from the audit ----------
   1. The mobile menu is a PAPER overlay, not a dark one — it was wrongly
      grouped with the dark contexts above, which made its text lighter on
      an already-light background. Put it back.
   2. .tier--feature is ink, but a later `.tier > p` rule set the dark
      --body colour on it, leaving the featured tier's description
      dark-on-dark at 2.16:1.
   3. Indigo is too dark to sit on ink (2.97:1), so dark bands need a
      *lightened* accent twin, the mirror of --accent-text. */
.menu{ --muted: #706E67; --muted-2: #6C6962; }

.tier--feature > p,
.tier--feature .tier__per{ color: #BBB8B1; }

.dark, .cta, .tier--feature{
  --accent-on-dark: var(--accent);
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .dark, .cta, .tier--feature{
    --accent-on-dark: color-mix(in srgb, var(--accent) 70%, #FFF6EA);
  }
}
.dark .step__n,
.cta .step__n,
.tier--feature .step__n,
.dark .feature__ico,
.dark .card__go,
.dark .tpl__cat{ color: var(--accent-on-dark); }

.tier__flag{ background: var(--accent-text); color: #fff; }
.tier--feature .tier__flag{ background: var(--accent-on-dark); color: #15120D; }

/* The skip target is a <section>, which is not focusable by default —
   without tabindex="-1" the link scrolls but keyboard focus stays on the
   link, so the next Tab returns to the nav. It must not draw a ring of
   its own when focused programmatically. */
#main:focus{ outline: none; }

/* ============================================================
   CTA GLOBE
   The photograph behind the closing band is replaced by a live
   canvas globe, centred on Zambia and slowly turning.
   ============================================================ */
.cta__globe{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  opacity:0.62;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.cta__globe:active{ cursor:grabbing; }

/* The old vignette darkened the rim and left the middle bright, which is
   backwards once there is a globe behind the words. Invert it: hold the
   centre dark so the heading stays crisp, and let the sphere read around it. */
.cta::after{
  background:
    radial-gradient(52% 60% at 38% 50%, rgba(11,11,11,.92) 0%, rgba(11,11,11,.66) 46%, rgba(11,11,11,0) 78%),
    linear-gradient(90deg, rgba(11,11,11,.8) 0%, rgba(11,11,11,.25) 46%, rgba(11,11,11,0) 70%);
  z-index:1;
  pointer-events:none;   /* the globe underneath stays draggable */
}
/* must exclude the canvas — this rule sits after .cta__globe at equal
   specificity, so it was winning and dropping the globe into normal flow,
   which stretched the band to 1072px and pushed the heading off screen */
.cta > *:not(.cta__globe){ position:relative; z-index:2; }

/* give the band room for the sphere to actually read */
.cta{ padding-block: clamp(72px, 10vw, 132px); }

@media (max-width:720px){
  .cta__globe{ opacity:0.5; }
  /* the sphere sits bottom-right on narrow bands (see narrowAt in globe.js),
     so weight the scrim over the copy above it and leave that corner clear */
  .cta::after{
    background:
      radial-gradient(72% 54% at 46% 40%, rgba(11,11,11,.94) 0%, rgba(11,11,11,.74) 54%, rgba(11,11,11,.18) 82%);
  }
}

/* ============================================================
   THEME LAYER — light & dark                     (2026-09-13)

   The palette is stamped on <html> as data-theme by an inline
   script in each page head, so there is exactly ONE dark block
   here rather than a duplicate under prefers-color-scheme.
   Without JS the site stays light, which is the design it has
   always shipped.

   Two rules make the whole thing hold together:

   1. Only *semantic* tokens flip. Components already read
      --paper / --ink / --line / --accent, so they follow for
      free. The literal #fff surfaces are listed further down.

   2. The inverted bands (.dark, .cta, .tier--feature) stay
      dark in BOTH themes — a globe and an aurora need a dark
      stage. They re-anchor --paper and --ink locally, so
      "color: var(--paper)" inside them still means light, and
      .btn--light / .btn--outline-light keep working with no
      override at all.
   ============================================================ */

:root[data-theme="dark"]{
  --paper:      #100F0D;   /* warm near-black, not blue-black —
                              the light theme's warmth carried over */
  --paper-2:    #171614;
  --paper-3:    #201E1B;
  --ink:        #F4F2ED;
  --ink-2:      #E6E3DC;
  --body:       #B8B4AB;
  --muted:      #9A968D;
  --muted-2:    #88847C;
  --line:       rgba(255, 255, 255, 0.13);
  --line-2:     rgba(255, 255, 255, 0.065);
  --white:      #F4F2ED;

  /* The light-mode hues are tuned to carry against cream. On
     near-black they go muddy and drop under AA, so each voice
     is lifted while keeping its identity and relative order. */
  --brass:          #C8A263;   --brass-rgb:      200, 162,  99;
  --verdigris:      #6FB8AC;   --verdigris-rgb:  111, 184, 172;
  --clay:           #D5876B;   --clay-rgb:       213, 135, 107;
  --indigo:         #8C9CD4;   --indigo-rgb:     140, 156, 212;
  --brass-soft:     rgba(200, 162, 99, 0.16);

  /* shadows stop separating surfaces on a dark ground, so they
     go black and hard, and borders do more of the work */
  --sh: 0, 0, 0;
  --e1: 0 1px 2px rgba(0,0,0,0.45), 0 1px 1px rgba(0,0,0,0.32);
  --e2: 0 2px 5px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.34);
  --e3: 0 5px 12px -2px rgba(0,0,0,0.52), 0 2px 5px rgba(0,0,0,0.36);
  --e4: 0 12px 26px -6px rgba(0,0,0,0.58), 0 4px 10px rgba(0,0,0,0.38);

  /* text sitting on a filled accent chip */
  --on-accent: #17120A;

  color-scheme: dark;
}
:root[data-theme="light"]{ color-scheme: light; }
:root{ --on-accent: #fff; }

/* the accent-text twin is darkened for paper; on near-black it
   has to move the other way or it fails against the surface */
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root[data-theme="dark"] *{
    --accent-text: color-mix(in srgb, var(--accent) 90%, #FFF6EA);
  }
}

/* the grain is dark noise — it reads as dirt on a dark ground */
:root[data-theme="dark"] body::before{ opacity: 0.022; }

/* ---------- surfaces that were literal white veils ---------- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .ladder,
:root[data-theme="dark"] .est{
  background:
    linear-gradient(163deg,
      rgba(var(--accent-rgb), 0.13) 0%,
      rgba(255, 255, 255, 0.045) 52%,
      rgba(255, 255, 255, 0.022) 100%);
  border-color: rgba(var(--accent-rgb), 0.22);
}
:root[data-theme="dark"] .tpl__link{
  background: linear-gradient(168deg, rgba(var(--accent-rgb),0.12), rgba(255,255,255,0.03));
}
/* :not(.is-on) matters — this selector outranks .chip--f.is-on, and
   without it the selected filter keeps its dark label but loses the
   light fill that label is legible against */
:root[data-theme="dark"] .chip:not(.is-on),
:root[data-theme="dark"] .quote,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .member,
:root[data-theme="dark"] .tier,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .est__chk,
:root[data-theme="dark"] .pay__step,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .hero__badge,
:root[data-theme="dark"] .tpl__open,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select{
  background: rgba(255, 255, 255, 0.042);
  border-color: var(--line);
}
:root[data-theme="dark"] .work__tags span{
  background: rgba(20, 19, 17, 0.78);
  color: var(--ink);
}
:root[data-theme="dark"] .chip:not(.is-on):hover,
:root[data-theme="dark"] .est__chk:hover,
:root[data-theme="dark"] .est__chk:has(input:checked),
:root[data-theme="dark"] .faq-item:hover{
  background: rgba(255, 255, 255, 0.075);
}
:root[data-theme="dark"] .faq-item.is-open{
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(var(--accent-rgb), 0.34);
}
:root[data-theme="dark"] .faq-item.is-open .faq-ico::before{ background: var(--on-accent); }
:root[data-theme="dark"] .est__chk input:checked::after{ border-color: var(--on-accent); }
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field textarea:focus,
:root[data-theme="dark"] .field select:focus{
  background: rgba(255, 255, 255, 0.085);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}
:root[data-theme="dark"] .nav.is-stuck{
  background: rgba(16, 15, 13, 0.86);
}

/* anything filled with an accent needs dark text on it now that
   the accents are lifted — white on lifted brass is only ~2.4:1 */
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .btn--light:hover,
:root[data-theme="dark"] .card:hover .card__ico,
:root[data-theme="dark"] .work__tags span:first-child,
:root[data-theme="dark"] .work.in:hover .work__arrow,
:root[data-theme="dark"] .quote__av,
:root[data-theme="dark"] .tier__flag,
:root[data-theme="dark"] .totop:hover{ color: var(--on-accent); }

/* ---------- the inverted bands keep their dark stage ---------- */
:root[data-theme="dark"] .dark,
:root[data-theme="dark"] .cta,
:root[data-theme="dark"] .tier--feature{
  /* re-anchor the two tokens the band's own rules read, so
     "color: var(--paper)" still resolves to light in here */
  --paper: #F5F3EE;
  --ink:   #070706;
  --muted:   #A9A69E;
  --muted-2: #99968E;
  background: #070706;
  border-color: rgba(255, 255, 255, 0.10);
}
/* on paper these bands separated by sheer contrast; on near-black
   they need an edge and a lift to still read as a raised stage */
:root[data-theme="dark"] .cta,
:root[data-theme="dark"] .dark{
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.055) inset;
}
/* the featured tier is the darkest card on a dark page, so it reads
   as a hole rather than the pick — give it the accent ring back */
:root[data-theme="dark"] .tier--feature{
  border-color: rgba(var(--verdigris-rgb), 0.42);
  box-shadow: 0 0 0 1px rgba(var(--verdigris-rgb), 0.16),
              0 26px 60px -32px rgba(0,0,0,0.9);
}
:root[data-theme="dark"] .dark::before{
  background:
    radial-gradient(46% 66% at 8% 4%,   rgba(var(--verdigris-rgb), 0.26), transparent 64%),
    radial-gradient(44% 62% at 92% 96%, rgba(var(--clay-rgb),      0.22), transparent 66%),
    radial-gradient(40% 55% at 62% 34%, rgba(var(--indigo-rgb),    0.16), transparent 68%);
}

/* the mobile menu is a PAPER overlay — in dark mode that paper is
   near-black, so it must take the light-on-dark muted pair back
   (the accessibility layer hands it the on-paper values) */
:root[data-theme="dark"] .menu{ --muted: #9A968D; --muted-2: #88847C; }

/* photographs glare against a dark page */
:root[data-theme="dark"] .work__img img,
:root[data-theme="dark"] .member img{ filter: brightness(0.92) contrast(1.02); }

/* ---------- the toggle ---------- */
.theme-toggle{
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.theme-toggle:hover{ background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.4); }
.theme-toggle:active{ transform: scale(0.94); }
.theme-toggle svg{
  grid-area: 1 / 1;
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--spring);
}
/* the icon shows what you would switch TO */
.theme-toggle .ico-sun{ opacity: 0; transform: rotate(-70deg) scale(0.5); }
.theme-toggle .ico-moon{ opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun{ opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .ico-moon{ opacity: 0; transform: rotate(70deg) scale(0.5); }
@media (max-width: 520px){
  .theme-toggle{ width: 34px; height: 34px; }
  .theme-toggle svg{ width: 15.5px; height: 15.5px; }
}

/* ============================================================
   THE PLEDGE STRIP                                (2026-09-19)

   The home page's "The method" and "The promise" sections were
   merged into one, because they were ~1,340px of stacked scroll
   saying closely related things: how the work runs, and what is
   guaranteed while it runs.

   The promises kept their meaning but lost their big two-up
   cards — they are now a compact four-across strip that closes
   the method, sharing the steps' accent cycle (brass, verdigris,
   clay, indigo, column for column) so the two rows read as one
   system rather than two stacked ideas.

   New class names on purpose: contact.html reuses .steps, so the
   step styles had to stay untouched. The old .promise card block
   was removed with this merge — nothing used it any more.
   ============================================================ */
.pledges{
  margin-top: clamp(38px, 5vh, 64px);
  padding-top: clamp(26px, 3.2vh, 40px);
  border-top: 1px solid var(--line);
}
.pledges__label{
  display: flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: clamp(20px, 2.8vh, 32px);
}
.pledges__label::before{
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.pledges__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 38px);
}
.pledge{ display: flex; gap: 12px; align-items: flex-start; }
.pledge__ico{
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  color: var(--accent-text, var(--accent));
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.pledge__ico svg{ width: 13px; height: 13px; }
.pledge:hover .pledge__ico{ background: var(--accent); color: var(--on-accent); }
.pledge h3{
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 700;
  letter-spacing: var(--tr-sub);
  line-height: 1.3;
  margin-bottom: 6px;
}
.pledge p{
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
}

/* same steps as .steps takes, so the two rows stay in register */
@media (max-width: 900px){
  .pledges__grid{ grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 560px){
  .pledges__grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   KWACHA PRICING                                  (2026-09-25)

   The services-page pricing moved to the 2026 price list: named
   packages in Zambian Kwacha rather than a per-page ladder in
   dollars. Every component is the one that was already here; this
   layer only adds the few pieces the new content needed.
   ============================================================ */

/* equal-height cards with the buttons on one line — the packages list
   different amounts, and a short card ending early reads as unfinished */
#pricing .tiers{ align-items:stretch; }

/* founding-client offer, reusing the hero's pill */
.price-offer{ margin-top:22px; }

/* "from" in front of a starting price */
.tier__price small{
  font-family:"Inter",sans-serif; font-size:13px; font-weight:500;
  letter-spacing:0; color:var(--muted);
  margin-right:6px; vertical-align:super;
}

/* the package and care choices are radios that share the checkbox row */
.est__chk input[type=radio]{ border-radius:50%; }
.est__chk input[type=radio]:checked::after{
  left:50%; top:50%; width:7px; height:7px;
  border:none; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%);
}
:root[data-theme="dark"] .est__chk input[type=radio]:checked::after{ background:var(--on-accent); }
.est__chk small,
.est__addons legend small{ font-size:inherit; color:var(--muted); }
.est__hint{ font-size:var(--t-2); color:var(--muted); margin:-12px 0 22px; line-height:1.5; }
.est__hint b{ color:var(--accent-text, var(--accent)); font-weight:600; }

/* how paying works → three groups of two: terms, care, other services */
.pay{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.pay__group .pay__steps{ grid-template-columns:1fr; margin-top:16px; }
/* one voice per group, so each column reads as a set (these deliberately
   match the specificity of the per-step cycle above and come later) */
.pay__group:nth-child(1) .pay__step{ --accent:var(--brass);     --accent-rgb:var(--brass-rgb); }
.pay__group:nth-child(2) .pay__step{ --accent:var(--verdigris); --accent-rgb:var(--verdigris-rgb); }
.pay__group:nth-child(3) .pay__step{ --accent:var(--indigo);    --accent-rgb:var(--indigo-rgb); }

@media (max-width:900px){
  .pay{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .incl thead th{ width:66px; font-size:10px; letter-spacing:0.05em; padding-left:4px; }
}

/* compact choice tiles: the package and care options sit side by side,
   label on top and price beneath, instead of one full-width row each */
.est__grid{ display:grid; gap:7px; }
.est__grid--2{ grid-template-columns:repeat(2,1fr); }
.est__grid--3{ grid-template-columns:repeat(3,1fr); }
.est__grid .est__chk{ margin-bottom:0; flex-wrap:wrap; align-items:flex-start; row-gap:3px; }
.est__grid .est__chk input{ margin-top:2px; }
.est__grid .est__chk span{ flex:1 1 0; min-width:0; }
.est__grid .est__chk b{ flex-basis:100%; padding-left:28px; }

/* the table's footnote finishes level with the estimator beside it */
.ladder{ display:flex; flex-direction:column; }
.ladder .ladder__note{ margin-top:auto; }

@media (max-width:560px){
  .est__grid--2, .est__grid--3{ grid-template-columns:1fr; }
}

/* each column's two cards share its height, and the columns are equal,
   so every card in a row lines up whatever its description length */
.pay__group{ display:flex; flex-direction:column; }
.pay__group .pay__steps{ flex:1; grid-auto-rows:1fr; }

/* ---------- HEADING OUTLINE ----------
   A heading for screen readers and search engines where the design shows
   none (the service cards and the template grid open straight under the h1). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- LOGO BOX (what survives of the four earlier logo layers) ----------
   The conductor M, Didone M + star, warm-metal and clean-motion layers styled
   markup that no longer exists and were removed 2026-11-07. */
.nav__logo{ position:relative; }
.info-row__line{ display:block; }   /* one line per number in the WhatsApp & phone row */

/* ---------- LIVE-PREVIEW PILL ON LIGHT PREVIEWS ----------
   Ember, Kern and Verda preview as cream/ivory pages, where the dark theme's
   near-transparent pill (light text) vanished. On those three frames only,
   the pill is charcoal with cream text, in both themes. */
.tpl__frame--light .tpl__open,
:root[data-theme="dark"] .tpl__frame--light .tpl__open{
  background:rgba(17,16,14,.88);
  color:#F4F2ED;
  border:1px solid rgba(255,255,255,.1);
}

/* ---------- HERO STATS (2026-10-04) ----------
   Bug: the label rule `.hero__trust-item span` also hit the counter <span>
   inside each <b>, so only the "K" was big — "3,000", "1 day" and "100%"
   rendered at label size in grey. Numbers now inherit the figure style, labels
   are matched by `> span` only, and the row is scaled up to suit the hero. */
.hero__trust{ gap:clamp(20px, 2.6vw, 36px); padding-top:30px; }
.hero__trust-item{ gap:7px; }
.hero__trust-item b{ font-size:clamp(26px, 2.3vw, 32px); line-height:1; letter-spacing:-.035em; }
.hero__trust-item b span{ font:inherit; color:inherit; letter-spacing:inherit; }
.hero__trust-item > span{ font-size:13.5px; letter-spacing:.01em; line-height:1.3; }
.hero__trust-sep{ height:42px; }
/* narrow phones: three equal columns instead of 2 + 1; long labels wrap */
@media (max-width:400px){
  .hero__trust{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start; }
  .hero__trust-item b{ font-size:24px; }
  .hero__trust-item > span{ font-size:12.5px; }
}

/* ---------- PERFORMANCE PASS (2026-10-04) ----------
   The site felt laggy. Measured before: the home page ran 5 documents (itself
   + 4 live template iframes) with 58 endless animations and 24 backdrop
   blurs; the Templates page 7 documents and 55 endless animations. */

/* template previews are now still images of each live template (captured
   framed, 1600x1210 -> 1280x968; the extra 10% is what the hover reveals) */
.tpl__frame .tpl__shot{
  position:absolute; top:0; left:0;
  width:100%; height:auto; max-width:none;
  transition:transform 1.4s var(--ease);
}
.tpl__link:hover .tpl__shot{ transform:translateY(-9%); }
@media (max-width:900px){ .tpl__link:hover .tpl__shot{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .tpl__shot{ transition:none; } }

/* light mode: the badge is 94% white, so the blur behind it was invisible
   but recomputed on every frame of its float. (Dark mode keeps it — there
   the badge is near-transparent and the frosting is visible.) */
:root:not([data-theme="dark"]) .hero__badge{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* endless decorative loops stop while their section is off-screen
   (script.js toggles .is-offscreen with an IntersectionObserver) */
.hero.is-offscreen::before,
.hero.is-offscreen .hero__badge,
.hero.is-offscreen .dot-pulse,
.page-head.is-offscreen::before{ animation-play-state:paused; }

/* ---------- CONTRAST ON TINTED GROUNDS (2026-10-17) ----------
   The earlier AA pass measured text against plain paper. A pixel-true check
   (headless Edge screenshots of each label's real background) found small
   text on the tinted sections and the brass footer floor at 4.0–4.47:1.
   One more step for the readable twins, measured on real pixels: */
:root{ --muted: #64625C; }                       /* was #706E67 — 4.01 → ~4.8 on the footer floor */
@supports (color: color-mix(in srgb, red 50%, blue)){
  *{ --accent-text: color-mix(in srgb, var(--accent) 74%, #241C12); }   /* was 82% — brass 4.37 → ~4.9 */
}
:root[data-theme="dark"]{ --muted-2: #96928A; }  /* was #88847C — card numerals 3.96 → ~4.7 */
:root[data-theme="dark"] .est__chk:has(input:checked) small{ color: var(--body); }   /* 4.31 → ~6 on the tinted selected tile */
.pledges__label{ color: var(--muted); }          /* was --muted-2 — 4.47 → ~5 on its tint */

/* ---------- CUSTOM WORKS (2026-10-18) ----------
   The "anything beyond the three" service: a full-width card under the
   three-card grid (home + services) and a full-width line under the pricing
   columns. Indigo is the site's fourth voice; the dashed edge reads as
   open-ended. */
.card--wide{
  margin-top:clamp(14px,1.6vw,22px);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  column-gap:clamp(24px,5vw,72px);
  align-items:end;
  border-style:dashed;
}
.card--wide .card__main p{ max-width:62ch; }
.card--wide .card__side{ display:flex; flex-direction:column; align-items:flex-start; }
.card--wide .card__list{ margin-top:0; }
.card--wide .card__go{ padding-top:24px; }
/* outside the three-card row there is no perspective, so the 3D tilt would
   read as a squash — the wide card lifts on hover instead */
.card--wide.in{ transform:translate3d(0, var(--ty, 0px), 0); }
.card__tag{
  display:inline-block; margin-bottom:16px; padding:5px 11px; border-radius:100px;
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text, var(--accent));
  background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.22);
}
@media (max-width:900px){
  .card--wide{ grid-template-columns:1fr; align-items:start; }
  .card--wide .card__side{ margin-top:22px; }
}

.pay__custom{
  --accent:var(--indigo); --accent-rgb:var(--indigo-rgb);
  margin-top:clamp(14px,1.6vw,22px);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(18px,3vw,40px);
  padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-lg);
  border:1px dashed rgba(var(--accent-rgb),.35);
  background:rgba(255,255,255,.56);
}
.pay__custom-head b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(20px,2vw,26px); letter-spacing:var(--tr-display); line-height:1.1;
  color:var(--accent-text, var(--accent));
}
.pay__custom-head span{
  display:block; margin-top:6px; font-family:"Archivo",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.pay__custom p{ font-size:var(--t-3); color:var(--body); line-height:1.6; }
.pay__custom .card__go{ margin-top:0; padding-top:0; white-space:nowrap; color:var(--accent-text, var(--accent)); }
.pay__custom .card__go:hover{ gap:14px; }
:root[data-theme="dark"] .pay__custom{ background:rgba(255,255,255,.042); }
@media (max-width:900px){ .pay__custom{ grid-template-columns:1fr; } }
.card--wide .card__num{ color:var(--muted); }   /* the indigo tint is a shade darker: 4.41 -> ~4.8 */

/* ---------- DROPDOWN LISTS IN DARK MODE (2026-10-18) ----------
   The closed select is a near-transparent veil (rgba 255,255,255,.04) so it
   sits softly on the card. Chrome/Edge on Windows paint the OPEN list with
   that same colour — but the list floats over nothing, so it came out
   near-white under cream text and every option vanished. The options get a
   solid dark ground of their own. */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup{
  background-color: #1C1B18;
  color: var(--ink);
}

/* ---------- GLASS SIGNATURE LOGO (2026-11-06) ----------
   The user's glass brand kit (the-maestro-way-glass.zip): the interlocking
   glass M — with THE / WAY inside it — that is also the M of AESTRO. Files in
   assets/logo/ are the kit's SVGs with every colour attribute nudged warm
   (whites → #FFFEF4, cool greys → warm greys; references left intact) and
   the viewBox cropped to the drawing (50 50 786 238). The light-background
   version shows in light mode, the dark one in dark mode.
   Motion — "glass defined by light" (user asked for something cool, not
   basic, and the last effect felt laggy, so: one small element, transform /
   opacity / mask only):
     load  — a soft beam sweeps left→right revealing the glass M, then
             AESTRO; a bright glint crosses the glass just behind it (~1.2s);
     hover — the logo tilts toward the pointer like a piece of glass turned
             in the hand, and the glint follows the pointer across it. */
.nav__logo--glass{ gap:0; font-size:0; letter-spacing:0; line-height:0; }
.nav__logo--glass .glass{
  position:relative; display:block; width:132px; height:40px;
  transform:perspective(520px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.nav__logo--glass .glass.is-tilting{ transition:transform .16s ease-out; }
.glass__inner{ position:absolute; inset:0; display:block; }
.glass__img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.glass__img--dark{ display:none; }
:root[data-theme="dark"] .glass__img--dark{ display:block; }
:root[data-theme="dark"] .glass__img--light{ display:none; }

/* the glint: a soft bright band, only visible where the glass is */
.glass__glint{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 40%, var(--glint) 50%, transparent 60%) no-repeat;
  background-size:300% 100%;
  background-position:var(--gx,150%) 0;
  -webkit-mask:url(assets/logo/signature-light.svg) 0 0 / 100% 100% no-repeat;
          mask:url(assets/logo/signature-light.svg) 0 0 / 100% 100% no-repeat;
  transition:opacity .35s ease, background-position .14s ease-out;
}
:root[data-theme="dark"] .glass__glint{
  -webkit-mask-image:url(assets/logo/signature-dark.svg); mask-image:url(assets/logo/signature-dark.svg);
}
:root{ --glint: rgba(255,255,255,.8); }
:root[data-theme="dark"]{ --glint: rgba(255,252,240,.9); }
.nav .nav__logo--glass:hover .glass__glint,
.nav .nav__logo--glass:focus-visible .glass__glint{ opacity:1; }

@media (prefers-reduced-motion: no-preference){
  /* the light beam: a soft-edged mask slides left→right, revealing the logo */
  .nav .glass__inner{
    -webkit-mask:linear-gradient(90deg,#000 33%,transparent 46%) 0 0 / 300% 100% no-repeat;
            mask:linear-gradient(90deg,#000 33%,transparent 46%) 0 0 / 300% 100% no-repeat;
    animation:glass-reveal 1s cubic-bezier(.45,.05,.25,1) .12s backwards;
  }
  .nav .glass{ animation:glass-rise .9s cubic-bezier(.2,.8,.2,1) .05s backwards; }
  .nav .glass__glint{ animation:glass-glint 1.15s cubic-bezier(.4,0,.2,1) .3s backwards; }
}
@keyframes glass-reveal{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; }
  to  { -webkit-mask-position:0 0;    mask-position:0 0; }
}
@keyframes glass-rise{
  from{ opacity:0; transform:perspective(520px) translateY(5px) scale(.97); }
  to  { opacity:1; transform:perspective(520px); }
}
@keyframes glass-glint{
  0%  { opacity:0; background-position:150% 0; }
  18% { opacity:1; }
  82% { opacity:1; }
  100%{ opacity:0; background-position:-50% 0; }
}
/* the glint needs soft shadow either side of its bright core — a white band
   alone vanishes on the near-white AESTRO in dark mode */
.glass__glint{
  background-image:linear-gradient(105deg,
    transparent 30%, var(--glint-edge) 42%, var(--glint) 50%, var(--glint-edge) 58%, transparent 70%);
}
:root{ --glint-edge: rgba(255,255,255,0); }
:root[data-theme="dark"]{ --glint-edge: rgba(16,15,13,.55); }
:root[data-theme="dark"]{ --glint-edge: rgba(16,15,13,.3); }   /* softer: a glint, not a shadow */

/* ---------- GLASS LETTERING LOGO (2026-11-06, later) ----------
   User: the 132x40 glass signature looked small, faint and badly seated.
   Now the kit's "Glass Lettering" version (chrome AESTRO, bright-edged glass
   M), as tight-cropped 3x PNGs: assets/logo/lettering-{dark,light}.png
   (478x150 -> shown at 159x50). Bigger, crisp, and centred in the header. */
.nav__logo--glass{ display:flex; align-items:center; align-self:center; }
.nav__logo--glass .glass{ width:159px; height:50px; }
.glass__glint{
  -webkit-mask-image:url(assets/logo/lettering-light.png); mask-image:url(assets/logo/lettering-light.png);
}
:root[data-theme="dark"] .glass__glint{
  -webkit-mask-image:url(assets/logo/lettering-dark.png); mask-image:url(assets/logo/lettering-dark.png);
}
@media (max-width:420px){
  .nav__logo--glass .glass{ width:140px; height:44px; }
}
/* one step bigger (178x56); the negative margin keeps the header its old height */
.nav__logo--glass .glass{ width:178px; height:56px; margin-block:-8px; }
@media (max-width:420px){
  .nav__logo--glass .glass{ width:146px; height:46px; margin-block:-3px; }
}
/* the footer has room: no negative margin there, a little air below */
footer .nav__logo--glass .glass{ margin-block:0 6px; }

/* ---------- LOGO, PROPER SIZE (2026-11-06, later still) ----------
   User: 178x56 "still feels a bit tiny". At the top of the page the lockup is
   now 210x66 with a touch more header room (padding 22px); once the bar sticks
   (padding 10px) it scales to ~50px tall — transform only, eased with the bar.
   Footer keeps 178x56. */
.nav{ padding:22px 0; }
.nav.is-stuck{ padding:10px 0; }
.nav .nav__logo--glass{ transform-origin:left center; transition:transform .4s var(--ease); }
.nav .nav__logo--glass .glass{ width:210px; height:66px; margin-block:-11px; }
.nav.is-stuck .nav__logo--glass{ transform:scale(.76); }
footer .nav__logo--glass .glass{ width:178px; height:56px; }
@media (max-width:420px){
  .nav{ padding:18px 0; }
  .nav .nav__logo--glass .glass{ width:178px; height:56px; margin-block:-7px; }
  .nav.is-stuck .nav__logo--glass{ transform:scale(.82); }
  footer .nav__logo--glass .glass{ width:146px; height:46px; }
}
/* the phone menu button's three lines sat at the top of its circle (flex column, no justify) */
.nav__burger{ justify-content:center; }

/* ---------- ENQUIRY MESSAGES (2026-11-07) ----------
   The form now only sends from the page (no email-app fallback), so it has a
   failure message as well as the thank-you; both readable in dark mode too
   (the old brown-on-brass note was never checked there — it was hidden). */
.form__ok.is-error{ background:rgba(var(--clay-rgb),.12); border-color:rgba(var(--clay-rgb),.38); color:#8A4430; }
.form__ok a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
:root[data-theme="dark"] .form__ok{ background:rgba(200,162,99,.12); border-color:rgba(200,162,99,.34); color:#E2C796; }
:root[data-theme="dark"] .form__ok.is-error{ background:rgba(213,135,107,.12); border-color:rgba(213,135,107,.38); color:#EDB19A; }