/* twofiveone — shared design system
   Tokens and components used across every page. Page-specific styles live
   in a small <style> block in each page's <head>. */

/* ---------- tokens ---------- */
:root {
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --accent: #1F5EFF;
  --accent-hover: #1348D6;
  --accent-dark: #93B0FF;
  --accent-dark-hover: #B9CCFF;
  --accent-tint: #DCE5FF;
  --paper: #F5F5F2;
  --paper-soft: #E8EAEE;
  --ink: #14161A;
  --ink-60: #4C525B;
  --ink-50: #666D76;
  --ink-40: #8A929C;
  --line: rgba(20, 22, 26, 0.14);
  --line-soft: rgba(20, 22, 26, 0.12);
  --on-dark: #A9B2BE;
  --on-dark-strong: #E4E8EE;
  --gutter: clamp(20px, 5vw, 40px);
  --pad-y: clamp(64px, 9vw, 104px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
::selection { background: var(--accent-tint); color: var(--ink); }

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

.container { max-width: 1180px; margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--paper); }

/* ---------- animations ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 4%) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rotatorIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 246, 244, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 22, 26, 0.09);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-dot { color: var(--accent); }

.nav-desktop { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.nav-link { font-size: 14.5px; font-weight: 500; color: var(--ink-60); transition: color .2s; }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  transition: background .25s;
}
.btn-dark:hover { background: var(--accent); color: var(--paper); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(20, 22, 26, 0.16);
  border-radius: 14px;
  background: #FFFFFF;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px clamp(16px, 4vw, 40px) 20px;
  border-top: 1px solid rgba(20, 22, 26, 0.08);
  animation: fadeIn .2s ease both;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 14px 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.nav-mobile a[aria-current="page"] { color: var(--accent); }
.nav-mobile .btn-dark {
  margin-top: 8px;
  justify-content: center;
  padding: 16px 20px;
  font-size: 16px;
  color: var(--paper);
}

@media (max-width: 859px) {
  .nav-desktop { display: none; }
  .menu-btn { display: flex; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 10vw, 112px) var(--gutter) 96px;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob-a {
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 35% 35%, rgba(31, 94, 255, 0.22), rgba(246, 246, 244, 0) 68%);
  animation: drift 18s ease-in-out infinite;
}
.blob-b {
  bottom: -220px; left: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(31, 94, 255, 0.16), rgba(246, 246, 244, 0) 70%);
  animation: drift 24s ease-in-out infinite reverse;
}
.hero-inner { position: relative; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(20, 22, 26, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-60);
  background: rgba(255, 255, 255, 0.5);
  animation: riseIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #26A66E;
  box-shadow: 0 0 0 4px rgba(38, 166, 110, 0.18);
}

.hero-h1 {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 17ch;
  animation: riseIn .8s cubic-bezier(.2,.8,.2,1) .08s both;
}
/* The rotator stacks an invisible copy of every word (.rotator-sizer) in one
   grid cell, so the block is always as tall as its tallest word at the current
   width. Without this, a word wrapping to two lines while the next fits on one
   makes the whole page jump on each rotation. */
.rotator {
  display: grid;
  position: relative;
  width: fit-content;
  color: var(--accent);
}
.rotator > * { grid-area: 1 / 1; }
.rotator-sizer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.rotator-live {
  position: relative;
  align-self: start;
  justify-self: start;
  width: fit-content;
}
/* The underline is drawn on the text itself, not as a positioned bar.
   A bar stretched across .rotator-live always spanned the widest phrase in
   the set rather than the one on screen, and dropped beneath the last line
   when a phrase wrapped. text-decoration tracks the actual glyphs on every
   line, and skip-ink keeps descenders clear. */
.rotator-word {
  text-decoration: underline;
  text-decoration-color: rgba(31, 94, 255, 0.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
  animation: rotatorIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.rotator-underline { display: none; }

.hero-p {
  margin: 30px 0 0;
  max-width: 52ch;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--ink-60);
  text-wrap: pretty;
  animation: riseIn .8s cubic-bezier(.2,.8,.2,1) .16s both;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  animation: riseIn .8s cubic-bezier(.2,.8,.2,1) .24s both;
}
.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(31, 94, 255, 0.55);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.btn-accent:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -14px rgba(31, 94, 255, 0.62);
}
.btn-accent .arrow { font-size: 18px; line-height: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid rgba(20, 22, 26, 0.2);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  transition: background .25s, border-color .25s;
}
.btn-ghost:hover {
  background: rgba(20, 22, 26, 0.05);
  border-color: rgba(20, 22, 26, 0.35);
  color: var(--ink);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: 76px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
  animation: riseIn .9s cubic-bezier(.2,.8,.2,1) .34s both;
}
.stat {
  background: #FFFFFF;
  padding: 26px 28px;
  /* Lets the heading size itself against this card's width rather than the
     viewport, so it stays on one line however the grid reflows. */
  container-type: inline-size;
}
.stat-h {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;

  /* Plain fallback for browsers without container query units. */
  font-size: 40px;
  /* 40px is the design size, but the longest heading, "Found everywhere",
     measures 8.494em in Archivo 600 (measured from the font's own advance
     widths). An exact fit is 11.77cqi; 11cqi fills 93.4% of the card, leaving
     margin for the fallback font before Archivo loads. All three cards are the
     same width, so they all resolve to the same size and stay visually even.
     Raise this above ~11.7 and "Found everywhere" will overflow. */
  font-size: min(40px, 11cqi);
}
.stat p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-50); }

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid rgba(20, 22, 26, 0.1);
  border-bottom: 1px solid rgba(20, 22, 26, 0.1);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  white-space: nowrap;
  opacity: 0.9;
}
.marquee-item i {
  color: var(--accent-dark);
  font-size: 14px;
  font-style: normal;
}

/* ---------- generic section ---------- */
.section { padding: var(--pad-y) var(--gutter); }
.section-dark { background: var(--ink); color: var(--paper); }
/* Sits flush under the section above it (no top padding). Use on a light
   section that directly follows another light section. */
.section-tight { padding-top: 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-dark .eyebrow { color: var(--accent-dark); }

.h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 46px;
}
.section-note {
  margin: 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-50);
}

/* ---------- row lists (work / process / proof) ---------- */
.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 24px clamp(12px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .3s;
}
.work-row:hover { background: #FFFFFF; color: var(--ink); }
.work-num { font-size: 13px; font-weight: 600; color: var(--ink-40); letter-spacing: 0.06em; }
.work-name {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.work-tags { flex: 1 1 190px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 12px;
  border: 1px solid rgba(20, 22, 26, 0.18);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-60);
  white-space: nowrap;
}
.work-visit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.work-visit span { font-size: 17px; }
/* Rows without a live link carry an invisible copy of the visit label, so
   their tag column lines up with the linked rows around them. */
.work-visit-ghost { visibility: hidden; }

/* ---------- service / pillar cards (dark sections) ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 32px 36px;
  border: 1px solid rgba(246, 246, 244, 0.16);
  border-radius: 20px;
  background: rgba(246, 246, 244, 0.035);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s;
}
.service-card:hover {
  transform: translateY(-6px);
  background: rgba(246, 246, 244, 0.075);
  border-color: rgba(147, 176, 255, 0.55);
}
/* Cards rendered as links keep their card text colors. */
a.service-card, a.service-card:hover { color: inherit; }
.service-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-num { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-40); }
.service-mark { font-size: 22px; color: var(--accent-dark); }
.service-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.service-card > p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--on-dark); text-wrap: pretty; }

.ticks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-dark-strong);
}
.ticks li::before {
  content: "\25C6";
  flex: none;
  color: var(--accent-dark);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}
/* Two-up variant: wider minimum so a plan and its detail panel sit side by
   side rather than splitting into three columns. */
.plans-wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 32px;
  border-radius: 20px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.plan:hover { transform: translateY(-5px); }
.plan-light { border: 1px solid var(--line-soft); background: #FFFFFF; color: var(--ink); }
.plan-dark { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
a.plan-light, a.plan-light:hover { color: var(--ink); }
a.plan-dark, a.plan-dark:hover { color: var(--paper); }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.plan-price-row { display: flex; align-items: baseline; gap: 8px; }
.plan-pre { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.6; }
.plan-price { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1; }
.plan-unit { font-size: 14px; opacity: 0.7; }
.plan > p { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.8; text-wrap: pretty; }

.plan .ticks { margin-top: 8px; }
.plan .ticks li { color: inherit; }
.plan .ticks li::before { color: inherit; opacity: 0.55; }

.pricing-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 5vw, 34px) clamp(20px, 4.5vw, 32px);
  border-radius: 20px;
  border: 1px solid var(--line-soft);
}
.panel-white { background: #FFFFFF; }
.panel-grey { background: var(--paper-soft); }
.panel h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }
.poa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.poa-price { display: flex; align-items: baseline; gap: 8px; }
.poa-price b { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; }
.poa-price span { font-size: 14px; color: var(--ink-50); }

.feature-grid {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
}
.feature-grid li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}
.feature-grid li::before {
  content: "\25C6";
  flex: none;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.6;
}

.extras-list { list-style: none; margin: 4px 0 0; padding: 0; }
.extras-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
}
.extras-list li span { flex: none; font-size: 13.5px; color: var(--ink-50); white-space: nowrap; }

/* ---------- testimonials ---------- */
.testimonials { padding: 0 var(--gutter) var(--pad-y); }
.testimonials-inner {
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px);
  border-radius: 28px;
  background: var(--paper-soft);
  border: 1px solid rgba(20, 22, 26, 0.1);
}
.testimonials-inner .eyebrow { margin-bottom: 36px; display: block; }
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 30px 28px;
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid rgba(20, 22, 26, 0.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.quote-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -26px rgba(20, 22, 26, 0.35);
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.quote-card figcaption { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-hover);
}
.quote-who { display: flex; flex-direction: column; }
.quote-who b { font-size: 14.5px; font-weight: 600; }
.quote-who span { font-size: 13px; color: var(--ink-50); }

/* ---------- faq ---------- */
.faq { padding: 0 var(--gutter) var(--pad-y); }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.faq-intro h2 {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}
.faq-intro p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-50); }

.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: 20px;
  padding: 24px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  transition: color .2s;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent); }
.faq-sign::before { content: '+'; }
.faq-item[open] .faq-sign::before { content: '\2212'; }
.faq-sign {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(20, 22, 26, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-60);
}
.faq-a {
  margin: 0;
  padding: 0 60px 26px 4px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-60);
  text-wrap: pretty;
  animation: fadeIn .3s ease both;
}

/* ---------- contact ---------- */
.contact { padding: var(--pad-y) var(--gutter); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 4.5vw, 64px);
  align-items: start;
}
.contact-intro h2 {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.022em;
  max-width: 16ch;
}
.contact-intro > p {
  margin: 0 0 36px;
  max-width: 44ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--on-dark);
  text-wrap: pretty;
}
.contact-links { display: flex; flex-direction: column; gap: 14px; }
.contact-links a,
.contact-links span.line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--paper);
}
.contact-links a:hover { color: var(--accent-dark); }
.contact-links i { color: var(--accent-dark); font-style: normal; }

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  border: 1px solid rgba(246, 246, 244, 0.16);
  border-radius: 22px;
  background: rgba(246, 246, 244, 0.04);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label,
.field > span:first-child {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-dark);
}
.input, .textarea {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(246, 246, 244, 0.22);
  background: rgba(20, 22, 26, 0.4);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.textarea { line-height: 1.55; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--accent-dark); }
.input::placeholder, .textarea::placeholder { color: rgba(169, 178, 190, 0.75); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(246, 246, 244, 0.22);
  background: rgba(246, 246, 244, 0.04);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .22s;
}
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.submit {
  margin-top: 6px;
  padding: 16px 24px;
  border: none;
  border-radius: 999px;
  background: var(--accent-dark);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, opacity .2s;
}
.submit:hover:not(:disabled) { background: var(--accent-dark-hover); transform: translateY(-2px); }
.submit:disabled { opacity: 0.6; cursor: progress; }

.form-error {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #FFB4A2;
}
.form-error[hidden] { display: none; }

.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.sent-panel {
  padding: 44px 36px;
  border: 1px solid rgba(147, 176, 255, 0.55);
  border-radius: 22px;
  background: rgba(246, 246, 244, 0.06);
  animation: riseIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.sent-panel[hidden] { display: none; }
.sent-panel b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
  display: block;
}
.sent-panel p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-dark); }

/* ---------- light form variant (contact page) ---------- */
.form-light {
  background: #FFFFFF;
  border-color: rgba(20, 22, 26, 0.12);
}
.form-light .field-label,
.form-light .field > span:first-child { color: var(--ink-60); }
.form-light .input,
.form-light .textarea {
  background: var(--paper);
  border-color: rgba(20, 22, 26, 0.18);
  color: var(--ink);
}
.form-light .input:focus,
.form-light .textarea:focus { border-color: var(--accent); }
.form-light .input::placeholder,
.form-light .textarea::placeholder { color: var(--ink-40); }
.form-light .chip {
  border-color: rgba(20, 22, 26, 0.18);
  background: var(--paper);
  color: var(--ink-60);
}
.form-light .chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}
.form-light .submit { background: var(--accent); color: #FFFFFF; }
.form-light .submit:hover:not(:disabled) { background: var(--accent-hover); }
.form-light .form-error { color: #C0392B; }

.sent-panel-light {
  border-color: rgba(31, 94, 255, 0.45);
  background: #FFFFFF;
}
.sent-panel-light p { color: var(--ink-60); }

/* ---------- editorial two-column ----------
   Heading and standfirst on the left, body copy on the right. A single
   narrow measure hugging the left edge of a wide container leaves a dead
   void on the right; this fills it without making the text hard to read. */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.editorial-head .eyebrow { margin-bottom: 14px; }
.editorial-note {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 32ch;
}
/* Inside the grid the column already sets the measure, so the paragraph
   cap would only narrow it further. */
.editorial .prose, .editorial .prose p { max-width: none; }

@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: 26px; }
  .editorial-note { max-width: 56ch; }
  .editorial .prose p { max-width: 62ch; }
}

/* ---------- offer block ----------
   Copy on the left at a readable measure, the "what you get" list boxed
   off on the right. A single full-width column here ran to ~110 characters
   a line and left the checklist wrapping raggedly across four columns. */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: #FFFFFF;
}
.offer-copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 52ch;
  text-wrap: pretty;
}
.offer-copy p:last-child { margin-bottom: 0; }
.offer-copy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.offer-copy a:hover { color: var(--accent); }

.offer-aside {
  padding: 24px 26px 26px;
  border-radius: 16px;
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
}
.offer-aside h3 {
  margin: 0 0 15px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.offer-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.offer-list li::before {
  content: "\25C6";
  flex: none;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .offer { grid-template-columns: 1fr; }
  .offer-copy p { max-width: none; }
}

/* ---------- related cards ---------- */
.related-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 20px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--ink);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.related-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(20, 22, 26, 0.07);
  color: var(--ink);
}
.related-kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.related-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.related-card:hover .related-name { color: var(--accent); }
.related-desc { font-size: 14px; line-height: 1.55; color: var(--ink-50); }

/* Trailing note under a card grid, for the cases the cards don't cover. */
.grid-note {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 66ch;
}
.related-go {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- guides ----------
   Shared by the /guides hub and every guide under it. Article pages are
   long-form and single-column, so they get their own measure and rhythm
   rather than reusing the marketing-section classes. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--ink-50);
}
.crumbs a { color: var(--ink-50); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { color: var(--ink-40); }

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-50);
}
.guide-meta b { font-weight: 600; color: var(--ink-60); }

/* The short direct answer at the top of a guide. Deliberately plain and
   self-contained: this is the block an AI assistant lifts verbatim. */
.answer-box {
  margin: 40px 0 8px;
  padding: clamp(24px, 4vw, 32px);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  background: #FFFFFF;
}
.answer-box p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.answer-box p + p { margin-top: 12px; }

.guide-body { max-width: 68ch; }
.guide-body h2 {
  margin: 52px 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.guide-body h3 {
  margin: 34px 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
}
.guide-body p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-60);
  text-wrap: pretty;
}
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-body a:hover { color: var(--accent); }
.guide-body code {
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: #FFFFFF;
  font-size: 0.88em;
  white-space: nowrap;
}
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 20px; }
.guide-body li { margin-bottom: 9px; font-size: 16.5px; line-height: 1.65; color: var(--ink-60); }
.guide-body li strong { color: var(--ink); }

/* Wide tables scroll inside their own box so the page never scrolls
   sideways on a phone. */
.table-wrap { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.guide-table th, .guide-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.5;
}
.guide-table th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
  white-space: nowrap;
}
.guide-table td { color: var(--ink-60); }
.guide-table td:first-child { color: var(--ink); font-weight: 500; }

/* Guide index rows on the hub. */
.guide-list { border-top: 1px solid var(--line); margin-top: 40px; }
.guide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 26px clamp(12px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .3s;
}
.guide-row:hover { background: #FFFFFF; color: var(--ink); }
.guide-row-main { flex: 1 1 320px; min-width: 0; }
.guide-row h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.guide-row p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-50); max-width: 60ch; }
.guide-row .work-visit { margin-left: auto; }

/* ---------- cookie consent ----------
   Injected by site.js, so there is no markup for it in any page. Accept and
   Essential-only are deliberately the same size and weight: making refusal
   harder than acceptance is exactly what the regulations object to. */
.cc {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 18px;
  z-index: 90;
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 18px 48px rgba(20, 22, 26, 0.16);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
}
.cc.is-open { opacity: 1; transform: none; }
.cc-inner { padding: clamp(20px, 3.2vw, 26px); }

.cc-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-60); }
.cc-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cc-text a:hover { color: var(--accent); }

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.cc-link {
  margin-right: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-50);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-link:hover { color: var(--ink); }
.cc-btn {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.cc-btn-ghost { background: #FFFFFF; border-color: rgba(20, 22, 26, 0.22); color: var(--ink); }
.cc-btn-ghost:hover { border-color: var(--ink); }
.cc-btn-solid { background: var(--ink); color: var(--paper); }
.cc-btn-solid:hover { background: var(--accent); color: var(--ink); }

.cc-prefs { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.cc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cc-row-text h3 {
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.cc-row-text p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-50); }
.cc-always {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.cc-toggle {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.18);
  cursor: pointer;
  transition: background .25s;
}
.cc-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.cc-toggle[aria-checked="true"] { background: var(--accent); }
.cc-toggle[aria-checked="true"]::after { transform: translateX(18px); }
.cc-toggle:disabled { cursor: default; background: rgba(20, 22, 26, 0.3); }
.cc-save { margin-top: 18px; width: 100%; }

.cc-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 95;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(20, 22, 26, 0.22);
  transition: opacity .4s, transform .4s;
}
.cc-toast.is-gone { opacity: 0; transform: translateX(-50%) translateY(8px); }

@media (max-width: 560px) {
  .cc-actions { gap: 8px; }
  .cc-link { margin-right: 0; width: 100%; text-align: left; order: 3; }
  .cc-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cc, .cc-toggle::after, .cc-toast { transition: none; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 36px var(--gutter) 40px;
  border-top: 1px solid rgba(246, 246, 244, 0.16);
}
.footer-inner { display: flex; flex-direction: column; gap: 22px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.footer-brand { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--paper); }
.footer-brand:hover { color: var(--paper); }
.footer-brand i { color: var(--accent-dark); font-style: normal; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; }
.footer-nav a { color: var(--on-dark); transition: color .2s; }
.footer-nav a:hover { color: var(--paper); }
.footer-nav a[aria-current="page"] { color: var(--paper); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 246, 244, 0.12);
  font-size: 13.5px;
  color: var(--ink-40);
}
.footer-meta a { color: var(--on-dark); }
.footer-meta a:hover { color: var(--paper); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
}

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