/* VeraOps — single-page site (veraops.com)
   Background: the page is charcoal. Light sections sit in rounded cream
   panels inset from the page edge: one panel for clients, why it works,
   how it works and what you'll hear (cream and white inside it, joined by
   short fades); one for is this for you; one for the closing call to
   action. Case studies and pricing sit on the charcoal between them. */

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

:root {
  --char:   #292826;   /* every dark band and the footer share the hero's charcoal */
  --char-2: #34322F;   /* raised boxes on dark, a step lighter than the band */
  --hero:   #292826;   /* the fold: a lighter charcoal, one flat colour */
  --bone:   #F2EEE7;
  --mute:   #A39E96;
  --mute-2: #7A766F;
  --line-d: rgba(242, 238, 231, 0.12);
  --dot-d:  rgba(242, 238, 231, 0.38);

  --cream:   #F5F2EC;
  --white:   #FFFFFF;
  --ink-l:   #1A1917;
  --ink-l2:  #514D47;
  --ink-l3:  #7C776F;
  --line-l:  #DED8CE;
  --dot-l:   rgba(26, 25, 23, 0.32);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Kept at the live site's values: the footer uses these. */
  --ink:          #202124;
  --paper:        #FFFFFF;
  --spark:        #1A73E8;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --max-w: 1256px;   /* content width 1192px (1256 minus 32px gutters), matching saysurge.com */
  --gutter: 32px;
  --pad-v: 104px;
  --nav-h: 72px;
}

html { scroll-behavior: smooth; background: var(--char); overscroll-behavior-y: none; overflow-x: hidden; }
body {
  background: var(--char); color: var(--bone);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
section[id] { scroll-margin-top: 0; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Bands ---------- */
.band { padding: var(--pad-v) 0; }
.dark { background: var(--char); color: var(--bone); }
.light { background: var(--cream); color: var(--ink-l); }
.light.on-white { background: var(--white); }
/* Light sections sit in rounded panels inset on the charcoal, so a change
   of colour reads as a deliberate card rather than a hard cut or a fade. */
.panel { margin: 0 16px; border-radius: 28px; overflow: hidden; background: var(--cream); }
.panel + .band, .band + .panel { margin-top: 0; }

/* Background flow. The page runs dark (hero), then one light run
   (clients, why, how it works, what you'll hear), then one dark run to the
   end. Where the colour changes, the next section opens with a soft fade
   from the colour above instead of a hard edge: --from names that colour.
   "big" is for dark <-> light changes: a longer fade, with the section's
   top padding grown so content always starts below it. */
.from-cream { --from: var(--cream); }
.from-white { --from: var(--white); }
.fade-in { position: relative; }
.fade-in > .wrap { position: relative; z-index: 1; }
.fade-in::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--from) 0%,
    color-mix(in srgb, var(--from) 64%, transparent) 28%,
    color-mix(in srgb, var(--from) 30%, transparent) 55%,
    color-mix(in srgb, var(--from) 9%, transparent) 82%,
    transparent 100%);
}
.glow {
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(214, 200, 182, 0.17), transparent 62%),
    var(--char) !important;
}
.sub + .sub { margin-top: 88px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.light .eyebrow { color: var(--ink-l3); }

.display, .h2, .h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
.display { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.05; }
.h2 { font-size: clamp(28px, 2.9vw, 38px); line-height: 1.14; }
.h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.22; }
.display em, .h2 em { font-style: italic; color: var(--mute); display: block; }
.h2.one-line em { display: inline; }  /* headline and italic half on one line */
.light .display em, .light .h2 em { color: var(--ink-l3); }
.lead { font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.62; color: var(--mute); max-width: 62ch; }
.light .lead { color: var(--ink-l2); }
.head { margin-bottom: 52px; max-width: 800px; }
.head .lead { margin-top: 20px; }

/* ---------- Buttons ---------- */
/* One button, two fills. Every button shares the same shape and size:
   corners between the nav's square edge and the old pill, one padding and
   one type size. Filled = main call to action; outlined = the nav's style. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
  padding: 15px 22px; border-radius: 10px; white-space: nowrap;
  background: var(--bone); color: var(--char); border: 1px solid var(--bone);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover { background: #fff; border-color: #fff; }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--bone); }
.btn-ghost:hover { background: var(--bone); color: var(--char); border-color: var(--bone); }
.light .btn { background: var(--ink-l); color: var(--cream); border-color: var(--ink-l); }
.light .btn:hover { background: #000; border-color: #000; }
.light .btn-ghost { background: transparent; color: var(--ink-l); border-color: var(--ink-l); }
.light .btn-ghost:hover { background: var(--ink-l); color: var(--cream); }
.btn .arrow { transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(3px); }
.ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Nav ----------
   Modelled on Surge's bar: wordmark left, section links centred, an outlined
   button right. Not sticky: it sits on the hero and scrolls away with it. */
.nav { position: relative; z-index: 50; background: transparent; padding-top: 14px; }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); height: 84px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav-brand { font-family: var(--serif); font-size: 28px; letter-spacing: -0.01em; color: var(--bone); justify-self: start; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 15px; color: var(--bone); opacity: 0.86; transition: opacity 150ms ease; }
.nav-links a:hover { opacity: 1; }
.nav-cta { justify-self: end; }
/* Desktop: equal space between the wordmark and the links, and the links and the button. */
@media (min-width: 921px) { .nav-inner { display: flex; justify-content: space-between; } }
.nav-menu-cta { display: none !important; }
.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; justify-self: end; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--bone); transition: transform 200ms ease, opacity 200ms ease; }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; }
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 920px) {
  .nav { padding-top: 10px; }
  .nav-inner { grid-template-columns: 1fr auto; height: 72px; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links {
    position: absolute; top: calc(72px + 10px); left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--char); border-bottom: 1px solid var(--line-d); padding: 8px var(--gutter) 24px;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 17px; opacity: 1; border-bottom: 1px solid var(--line-d); }
  .nav-links .nav-menu-cta { display: inline-flex !important; margin-top: 20px; border-bottom: 1px solid var(--bone); color: var(--char); padding: 15px 22px; }
}

/* ---------- Hero + logos ---------- */
/* The fold fills the whole screen in one flat colour, so the next section
   never peeks in. Content sits centred in the space under the nav. */
.hero-band {
  background: var(--hero);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.hero-band .hero { flex: 1; display: flex; align-items: center; padding: 64px 0; }
/* With the timeline gone, the hero's four items get more air between them. */
/* Hero sizes and spacing follow saysurge.com: kicker 24, headline 52, sub-line 24
   (20 / 40 / 20 on phones), then a rule and the "Let's talk" card. */
.hero-band .hero-kicker { margin-bottom: 24px; }
.hero-band .hero .lead { margin-top: 24px; }
.hero-band .hero > .wrap { width: 100%; }
.hero-band .nav-links { background: var(--hero); }
.hero-kicker { font-size: 24px; line-height: 1.1; color: var(--mute); margin-bottom: 14px; }
/* Each half of the headline sits on one line: the plain clause, then the italic one. */
.hero-title { font-size: clamp(40px, 3.62vw, 52px); line-height: 1.1; }
.hero-title span, .hero-title em { display: block; }
@media (min-width: 900px) { .hero-title span, .hero-title em { white-space: nowrap; } }
/* Sub-line in the body sans, well below the headline in size. */
.hero .lead { margin-top: 24px; max-width: 980px; font-family: var(--font-body); font-size: 24px; line-height: 1.1; color: var(--mute); }
.hero-rule { height: 1px; background: rgba(242, 238, 231, 0.22); margin: 32px 0; }
/* Contact block, right-aligned: the "Let's talk" card, with the email link below it. */
.hero-contact { display: flex; flex-direction: column; gap: 14px; width: max-content; margin-left: auto; }
.talk-card {
  order: 2; display: flex; align-items: center; justify-content: space-between; gap: 36px;
  min-width: 250px; padding: 8px 8px 8px 8px; border-radius: 10px; background: var(--bone); color: var(--char);
  transition: transform .25s ease, background .25s ease;
}
.talk-card:hover { transform: translateY(-2px); background: #fff; }
.tc-who { display: flex; align-items: center; gap: 12px; }
.tc-who img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
.tc-text { display: flex; flex-direction: column; gap: 3px; }
.tc-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-l2); }
.tc-n { font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--ink-l); }
.tc-go { width: 44px; height: 44px; border-radius: 7px; background: var(--char); color: var(--bone); display: grid; place-items: center; flex: none; }
/* On hover the box stays put; only the arrow inside nudges up and to the right. */
.tc-go svg { transition: transform .25s ease; }
.talk-card:hover .tc-go svg { transform: translate(2px, -2px); }
.hero-email { order: 3; padding-left: 2px; font-family: var(--font-body); font-size: 16px; color: var(--mute); }
.hero-email strong { font-weight: 500; color: var(--bone); border-bottom: 1px solid rgba(242, 238, 231, 0.4); padding-bottom: 1px; }
.hero-email:hover strong { border-bottom-color: var(--bone); }
/* The same card, reused lower on the page: left-aligned under a section, at the
   foot of the audit plan, and centred in the closing band. On light bands it
   takes a white or cream face with a hairline so it doesn't wash out. */
.talk-block { margin-left: 0; margin-top: 56px; }
.plan .talk-block { margin-top: auto; }
/* Under the plans: the talk card on the left, the privacy note on the right. */
.pricing-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 24px; }
.pricing-foot .pricing-talk { margin: 0; }
.pricing-foot .small-print { margin-top: 0; text-align: right; }
@media (max-width: 860px) {
  .pricing-foot { flex-direction: column; }
  .pricing-foot .small-print { text-align: left; }
}
.final .talk-block { margin: 40px auto 0; align-items: center; text-align: center; }
.light .talk-card { background: var(--cream); border: 1px solid var(--line-l); }
.light .talk-card:hover { background: var(--white); }
.light:not(.on-white) .talk-card { background: var(--white); }
.light:not(.on-white) .talk-card:hover { background: var(--white); border-color: var(--ink-l3); }
.light .hero-email { color: var(--ink-l3); }
.light .hero-email strong { color: var(--ink-l); border-bottom-color: rgba(26, 25, 23, 0.35); }
.light .hero-email:hover strong { border-bottom-color: var(--ink-l); }
@media (max-width: 720px) {
  .hero-kicker { font-size: 20px; }
  .hero .lead { font-size: 20px; line-height: 1.1; }
  .hero-contact { width: 100%; margin-left: 0; }
}
/* Partners: its own light band (white, so it reads apart from the cream
   section below), with every logo in its own colours. */
.logos { background: var(--cream); color: var(--ink-l); padding: 80px 0 var(--pad-v); }
.logos .eyebrow { color: var(--ink-l3); }
.logos .label { font-family: var(--serif); font-size: 26px; margin-bottom: 28px; }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.logo-cell { flex: 0 0 20%; height: 120px; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.logo-cell img { width: auto; object-fit: contain; }
.lg-bubbly { height: 70px; } .lg-ghost { height: 30px; } .lg-rafferty { height: 40px; } .lg-paperwhite { height: 21px; }
.lg-bx { height: 26px; } .lg-barrel { height: 20px; } .lg-puddle { height: 66px; } .lg-driver { height: 21px; }
.lg-elementiq { height: 34px; } .lg-coins { height: 70px; }
@media (max-width: 720px) {
  .logo-cell { flex-basis: 50%; height: 96px; padding: 0 16px; }
  .lg-bubbly { height: 56px; } .lg-ghost { height: 23px; } .lg-rafferty { height: 32px; } .lg-paperwhite { height: 15px; }
  .lg-bx { height: 20px; } .lg-barrel { height: 15px; } .lg-puddle { height: 50px; } .lg-driver { height: 16px; }
  .lg-elementiq { height: 23px; } .lg-coins { height: 54px; }
  /* Phones: Ghost Robot + Team Bubbly lead, then Puddle + Spear Strategy. */
  .logo-grid .logo-cell:nth-child(3), .logo-grid .logo-cell:nth-child(4) { order: -1; }
}

/* ---------- Testimonials (in the client section, light) ---------- */
.tcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tcard { background: var(--white); border: 1px solid var(--line-l); border-radius: 14px; padding: 28px 28px 24px; display: flex; flex-direction: column; }
.tcard blockquote { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-l); margin-bottom: 22px; }
.tcard figcaption { margin-top: auto; display: flex; gap: 14px; align-items: center; }
.tcard img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }  /* full colour */
.tcard .name { font-weight: 600; font-size: 15px; color: var(--ink-l); }
.tcard .role { font-size: 13.5px; color: var(--ink-l3); }
@media (max-width: 860px) { .tcards { grid-template-columns: 1fr; } }

/* ---------- Why (light) ----------
   Problem, reframe and point of view read as one story: three numbered
   steps on a dotted line down the left, each text block on the same edge. */
.split { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 14px; } }
.why { background: var(--white); }
.why-label { margin-bottom: 48px; }
.story { position: relative; padding-left: 72px; }
.beat { position: relative; padding-bottom: 80px; }
.beat:last-child { padding-bottom: 0; }
.beat::before {
  content: ""; position: absolute; left: -72px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--ink-l3);
}
.beat:last-child::before { background: var(--ink-l); border-color: var(--ink-l); }
.beat::after {
  content: ""; position: absolute; left: -66px; top: 26px; bottom: 8px;
  border-left: 2px dotted var(--dot-l);
}
.beat:last-child::after { display: none; }
.beat-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-l3); margin-bottom: 20px; display: flex; gap: 14px;
}
.beat-label span { color: var(--ink-l); }
.beat-title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; max-width: 22em; }
.beat-title em { display: block; font-style: italic; color: var(--ink-l3); }
.beat-title.one-line { max-width: none; }
.beat-title.one-line em { display: inline; }
.beat-body { margin-top: 16px; max-width: 62ch; color: var(--ink-l2); font-size: 16.5px; line-height: 1.65; }
.beat-body p + p { margin-top: 0.9em; }
.pv { list-style: none; margin-top: 12px; }
.pv li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--line-l); }
.pv li:last-child { border-bottom: 1px solid var(--line-l); }
.pv li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-l); }
.pv b { font-weight: 600; color: var(--ink-l); }
.beat-body .pv + p { margin-top: 18px; }  /* closing line after a list */
/* Three boxes (the problem's causes, the point of view's principles): three in a row, wider than the text column. */
.causes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; width: min(920px, 100%); }
.beat-body:has(.causes) { max-width: none; }
.beat-body:has(.causes) > p { max-width: 62ch; }
.causes li { background: var(--white); border: 1px solid var(--line-l); border-radius: 12px; padding: 22px 22px 24px; }
.causes .n { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-l3); margin-bottom: 18px; }
.causes h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--ink-l); margin-bottom: 8px; }
.causes p { font-size: 15px; line-height: 1.55; color: var(--ink-l2); }
@media (max-width: 900px) { .causes { grid-template-columns: 1fr; gap: 10px; } .causes .n { margin-bottom: 10px; } }
@media (max-width: 720px) {
  .story { padding-left: 34px; }
  .beat { padding-bottom: 64px; }
  .beat::before { left: -34px; width: 13px; height: 13px; }
  .beat::after { left: -28px; }
}

/* ---------- Services list (modelled on Surge's) ----------
   Four numbered categories; each lists its numbered sub-services with a
   one-line description. Category on the left, sub-services on the right. */
.svc { border-top: 1px solid var(--ink-l); }
.svc-cat { display: grid; grid-template-columns: 340px 1fr; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--line-l); }
.svc-cat h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink-l); }
.svc-cat h3 .n, .svc-list .n { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-l3); }
.svc-cat h3 .n { margin-bottom: 10px; text-transform: uppercase; }  /* "SERVICE 03", distinct from the item numbers */
.svc-list { list-style: none; }
.svc-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; }
.svc-list li + li { border-top: 1px dotted var(--dot-l); }
.svc-list li:first-child { padding-top: 4px; }
.svc-list .n { padding-top: 3px; }
.svc-list h4 { font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--ink-l); }
.svc-list p { font-size: 15.5px; line-height: 1.55; color: var(--ink-l2); margin-top: 2px; max-width: 80%; }
@media (max-width: 720px) { .svc-list p { max-width: none; } }
@media (max-width: 900px) { .svc-cat { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; } }

/* ---------- Benefits (light) ---------- */
.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ben { background: var(--white); border: 1px solid var(--line-l); border-radius: 14px; padding: 30px 28px 32px; }
.ben .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-l3); }
.ben h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.2; margin: 14px 0 10px; color: var(--ink-l); }
.ben p { color: var(--ink-l2); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) { .bens { grid-template-columns: 1fr; } }

/* ---------- How it works (dark) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: 14px; overflow: hidden; }
.feature { background: var(--char); padding: 30px 28px 30px; }
.feature .n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--mute-2); }
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; margin: 12px 0 10px; }
.feature p { font-size: 15px; color: var(--mute); }
.feature .gets { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--line-d); color: var(--bone); font-size: 15px; }
@media (min-width: 1101px) { .features { grid-template-columns: repeat(4, 1fr); } .feature { padding: 28px 24px; } }
@media (max-width: 1100px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.team { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-d); }
.team .role { padding: 24px 20px 4px 0; }
.team .role + .role { padding-left: 20px; border-left: 1px solid var(--line-d); }
.team h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.25; margin-bottom: 6px; }
.team p { font-size: 14.5px; color: var(--mute); line-height: 1.55; }
@media (max-width: 1000px) {
  .team { grid-template-columns: 1fr 1fr; }
  .team .role, .team .role + .role { padding: 20px 18px 20px 0; border-left: 0; border-bottom: 1px solid var(--line-d); }
  .how .team .role, .how .team .role + .role { border-bottom-color: var(--line-l); }
}
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* How it works sits in the light run. */
.how .features { background: var(--line-l); border-color: var(--line-l); }
.how .feature { background: var(--white); }
.how .feature .n { color: var(--ink-l3); }
.how .feature p { color: var(--ink-l2); }
.how .feature .gets { color: var(--ink-l); border-top-color: var(--dot-l); }
.how .team { border-top-color: var(--line-l); }
.how .team .role + .role { border-left-color: var(--line-l); }
.how .team p { color: var(--ink-l2); }

/* Small lists inside feature cards (sources, signals, inbox checks). */
.feature .mini { list-style: none; margin-top: 10px; font-size: 14.5px; color: var(--mute); }
.feature .mini li { position: relative; padding: 3px 0 3px 16px; line-height: 1.45; }
.feature .mini li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--mute); }

/* Your commitment */
.commit { border: 1px solid var(--line-d); border-radius: 14px; padding: 28px 30px; max-width: 760px; }
.commit h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.commit p { color: var(--mute); }
.how .feature .mini { color: var(--ink-l2); }
.how .feature .mini li::before { border-color: var(--ink-l3); }
.how .commit { background: var(--white); border-color: var(--line-l); }
.how .commit p { color: var(--ink-l2); }

/* ---------- Case studies (dark) ---------- */
.case-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.case-tab {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--char-2); border: 1px solid var(--line-d); border-radius: 14px; padding: 26px 26px 22px;
  display: flex; flex-direction: column; transition: border-color 180ms ease, background 180ms ease;
}
.case-tab:hover { border-color: var(--dot-d); }
.case-tab[aria-selected="true"] { background: var(--bone); color: var(--char); border-color: var(--bone); }
.case-tab .label { display: block; min-height: 3em; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); line-height: 1.5; }
.case-tab[aria-selected="true"] .label { color: var(--ink-l3); }
.case-tab h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; margin: 14px 0 18px; }
/* Three stats in fixed columns: value on top, label underneath. "Suggestion
   to brief" runs from VeraOps' first suggestion of the contact to the brief. */
.case-tab .stats { display: grid; grid-template-columns: 1fr 1.25fr 0.8fr; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dotted var(--line-d); font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.case-tab[aria-selected="true"] .stats { border-top-color: var(--dot-l); }
.case-tab .stats b { display: block; font-size: 16px; margin-bottom: 3px; }
.case-tab[aria-selected="true"] .stats { color: var(--ink-l2); }
.case-tab .stats b { font-weight: 600; color: var(--bone); }
.case-tab[aria-selected="true"] .stats b { color: var(--ink-l); }
/* Make it obvious the boxes are clickable: a hint above, a cue on each
   box, a lift on hover, and a notch pointing from the open box to its story. */
.case-hint { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); display: flex; gap: 10px; align-items: center; }
.case-tab { position: relative; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.case-tab:hover { transform: translateY(-3px); }
.case-tab:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.case-tab .cue { margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--bone); }
/* The open box keeps the cue's space (just hidden), so all three boxes share one layout. */
.case-tab[aria-selected="true"] .cue { visibility: hidden; }
.case-tab:hover .cue { text-decoration: underline; text-underline-offset: 4px; }
.case-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  border: 10px solid transparent; border-bottom: 0; border-top-color: var(--bone);
}
html:not(.js) .case-tab .cue, html:not(.js) .case-hint, html:not(.js) .case-tab::after { display: none; }
@media (max-width: 960px) { .case-tabs { grid-template-columns: 1fr; } }

.case-panel { margin-top: 16px; background: var(--cream); color: var(--ink-l); border-radius: 14px; padding: 44px 48px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.case-panel[hidden] { display: none; }
.case-panel .intro { font-family: var(--serif); font-size: 22px; line-height: 1.45; }
.case-panel h4 { font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-l3); margin: 28px 0 8px; }
.case-panel p { color: var(--ink-l2); font-size: 15.5px; }
.case-panel .why { font-style: italic; font-family: var(--serif); font-size: 18px; color: var(--ink-l); }
.case-panel .shows { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-l); color: var(--ink-l); font-size: 15.5px; }
.vtl { list-style: none; position: relative; padding-left: 34px; }
.vtl::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; border-left: 2px dotted var(--dot-l); }
.vtl li { position: relative; padding-bottom: 18px; display: grid; grid-template-columns: 108px 1fr; gap: 14px; font-size: 15px; }
.vtl li:last-child { padding-bottom: 0; }
.vtl li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--ink-l3); }
.vtl li.key::before { background: var(--ink-l); border-color: var(--ink-l); }
/* VeraOps' own suggestions, placed on the date they went out. */
.vtl li.flag::before { background: var(--ink-l); border-color: var(--ink-l); box-shadow: inset 0 0 0 3px var(--cream); }
.vtl .tag { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 4px; background: var(--ink-l); color: var(--cream); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }
.vtl .d { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-l3); padding-top: 2px; white-space: nowrap; }
.vtl .t { color: var(--ink-l2); }
.vtl li.key .t { color: var(--ink-l); }
.vtl strong { font-weight: 600; }
@media (max-width: 900px) { .case-panel { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; } }
@media (max-width: 520px) { .vtl li { grid-template-columns: 1fr; gap: 0; } }
/* Without JS every story shows, one after another. */
html:not(.js) .case-panel[hidden] { display: grid; }

/* ---------- Should / shouldn't (light) ---------- */
.fitq + .fitq { margin-top: 96px; }
.fitq-title { max-width: 24em; }
.fitq-title em { display: inline; }
.fitq-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; margin-top: 40px; }
.reasons { list-style: none; background: var(--white); border: 1px solid var(--ink-l); border-radius: 14px; padding: 12px 32px; }
.reasons li { position: relative; padding: 20px 0 20px 52px; font-size: 16.5px; line-height: 1.5; color: var(--ink-l); }
.reasons li + li { border-top: 1px solid var(--line-l); }
.reasons li::before {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 1.75px solid var(--ink-l);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--ink-l);
}
.reasons.yes li::before { content: "\2713"; }
.reasons.no li::before { content: "\2715"; }
.fitq-note { display: flex; gap: 14px; font-size: 18.5px; line-height: 1.55; color: var(--ink-l2); padding-top: 14px; }
.fitq-note strong { color: var(--ink-l); font-weight: 600; }
.fitq-note .i { flex: 0 0 24px; height: 24px; margin-top: 3px; border-radius: 50%; background: var(--ink-l3); color: var(--white); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 24px; text-align: center; }
@media (max-width: 900px) { .fitq-row { grid-template-columns: 1fr; gap: 24px; } .fitq-note { padding-top: 0; } }
@media (max-width: 720px) { .reasons { padding: 6px 20px; } .reasons li { padding-left: 46px; font-size: 15.5px; } .fitq + .fitq { margin-top: 72px; } }

/* Case studies and pricing sit back to back on the charcoal: a hairline marks the seam. */
.seam > .wrap { position: relative; padding-top: var(--pad-v); }
.seam > .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-d); }
.seam { padding-top: 0; }

/* ---------- Pricing (dark) ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.plan { border: 1px solid var(--line-d); border-radius: 16px; padding: 34px 32px; display: flex; flex-direction: column; }
.plan.main { background: var(--bone); color: var(--ink-l); border-color: var(--bone); }
.plan .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.plan.main .k { color: var(--ink-l3); }
.plan .price { font-family: var(--serif); font-size: 40px; line-height: 1; margin: 16px 0 6px; }
.plan .price small { font-size: 17px; font-style: italic; color: var(--mute); }
.plan.main .price small { color: var(--ink-l3); }
.plan .sub { color: var(--mute); }
.plan.main .sub { color: var(--ink-l2); }
.plan ul { list-style: none; margin: 22px 0 28px; }
.plan li { padding: 9px 0 9px 26px; position: relative; border-top: 1px dotted var(--line-d); font-size: 15px; color: var(--bone); }
.plan.main li { border-top-color: var(--dot-l); color: var(--ink-l); }
.plan li::before { content: "\2713"; position: absolute; left: 0; top: 9px; font-weight: 600; }
.plan li b { font-weight: 600; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.main .btn { background: var(--ink-l); color: var(--bone); border-color: var(--ink-l); }
.plan.main .btn:hover { background: #000; border-color: #000; }
.small-print { margin-top: 32px; color: var(--mute); font-size: 15px; max-width: 72ch; }
.small-print a { color: var(--bone); border-bottom: 1px solid var(--dot-d); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Final CTA (light) ---------- */
.final { text-align: center; padding: 128px 0 136px; }
.final .display { margin: 0 auto; max-width: 13em; font-size: clamp(32px, 3.8vw, 54px); }
.final .ctas { justify-content: center; }
.final .final-sub { margin: 24px auto 0; text-align: center; }

/* ---------- Reveal ---------- */
.js-on .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.js-on .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-on .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 720px) {
  :root { --gutter: 20px; --pad-v: 76px; }
  .panel { margin: 0 8px; border-radius: 20px; }
  body { font-size: 16px; }
  .hero-band .hero { padding: 40px 0; }
  /* Fill the fold even after the browser's address bar collapses on scroll. */
  .hero-band { min-height: 100vh; min-height: 100lvh; }
  .logos { padding: 64px 0 var(--pad-v); }
  .tcard { padding: 24px 22px; }
  .head { margin-bottom: 36px; }
  .sub + .sub { margin-top: 64px; }
  .final { padding: 92px 0 100px; }
  .plan, .fit-col { padding: 26px 22px; }
}

/* ===== FOOTER (live site layout; type set in the page's body font) ===== */
.footer { background: var(--char); color: var(--paper); padding: 96px 0 36px; margin-top: 0; position: relative; z-index: 2; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 40px 64px;
}
.footer-inner .footer-brand-col { grid-column: 1; grid-row: 1 / 3; }
.footer-bureau {
  /* Sits in the Legal column, pulled up so the badge bottom lines up with
     the address block rather than opening a band beneath it. */
  grid-column: 3; grid-row: 2;
  justify-self: start; align-self: start; display: block;
  margin-top: -24px; text-decoration: none;
}
.footer-bureau img { display: block; height: 64px; width: auto; border-radius: 6px; }
.footer h5 {
  font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(243, 248, 234, 0.5);
  margin: 0 0 22px;
}
.footer a {
  display: block;
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 2.35;
  color: var(--paper); text-decoration: none; opacity: 0.85;
  transition: color 150ms ease, opacity 150ms ease;
}
.footer a:hover { opacity: 1; color: var(--spark); }
.footer .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
/* The footer wordmark matches the nav's: the serif, no image mark. */
.footer .brand span {
  font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1;
  letter-spacing: -0.01em; color: var(--bone);
}
.footer .copy {
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.65;
  color: rgba(243, 248, 234, 0.6);
  max-width: 40ch;
  margin: 0;
}
.footer .copy a { display: inline; opacity: 0.85; text-decoration: underline; }
.footer-contact { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.footer-contact p {
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.6;
  color: rgba(243, 248, 234, 0.6); margin: 0; max-width: 40ch;
}
.footer-contact p a { display: inline; opacity: 0.85; }
.footer-bottom {
  max-width: calc(var(--max-w) - 2 * var(--gutter)); margin: 72px auto 0; padding: 24px 0 0;
  border-top: 1px solid rgba(243, 248, 234, 0.1);
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.6;
  color: rgba(243, 248, 234, 0.6);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
@media (max-width: 768px) {
.footer { padding: 72px 0 28px; }
.footer-inner { grid-template-columns: 1fr; grid-template-rows: auto; gap: 26px; padding: 0 24px; }
.footer a { line-height: 2.1; font-size: 15px; }
.footer-contact { margin-top: 18px; gap: 10px; }
.footer h5 { margin-bottom: 12px; }
.footer-bureau img { height: 52px; }
.footer-inner .footer-brand-col, .footer-inner .footer-col-resources, .footer-inner .footer-col-compare, .footer-inner .footer-col-legal { grid-column: 1; grid-row: auto; }
/* Stacked footer: cancel the desktop pull-up used to align the badge
     with the address block, which no longer applies in one column. */
.footer-bureau { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px !important; }
/* Two columns on one row: stacked, these two long lines wrapped into a
     four-line block that read as one run-on sentence. */
.footer-bottom {
    display: grid; grid-template-columns: 1fr; align-items: start;
    gap: 0 20px; padding: 18px 24px 0; margin-top: 28px;
    font-size: 15px; line-height: 1.6;
  }
.footer-bottom span:last-child { text-align: right; }
}
/* Inline link inside the copyright line: undo the block-level footer link styles. */
.footer-bottom a { display: inline; font: inherit; line-height: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ===== Mobile polish ===== */
/* Phones: a story opens directly under its own card (site.js moves it there). */
.case-tabs .case-panel { margin-top: 0; }
@media (max-width: 768px) {
  .footer-bottom span:last-child { text-align: left; }
}
@media (max-width: 720px) {
  .case-panel .intro { font-size: 19px; line-height: 1.45; }
  .beat-title.one-line em { display: block; }
  .fitq-note { font-size: 16px; }
  .logo-cell { height: 104px; }
  /* Bigger tap area for the email link without moving it. */
  .hero-email { padding: 8px 0; margin: -8px 0; }
}
@media (max-width: 960px) { .case-tab[aria-selected="true"] .cue { display: none; } }
@media (max-width: 720px) { .hero .lead { line-height: 1.3; } .hero-kicker { line-height: 1.25; } }

/* ===== Legal pages (privacy, terms, data handling) =====
   Same frame as the home page: charcoal top with the nav and title, the
   text in a cream panel, then the shared footer. */
.legal-hero { padding-bottom: 80px; }
.legal-head { padding-top: 48px; }
.legal-back { display: inline-block; font-size: 15px; color: var(--mute); margin-bottom: 40px; transition: color 150ms ease; }
.legal-back:hover { color: var(--bone); }
.legal-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.012em; color: var(--bone); }
.legal-meta { margin-top: 18px; font-size: 15px; color: var(--mute); }
.legal-body { padding: 80px 0 104px; }
.legal-col { max-width: 760px; }
.legal-col h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-l); margin: 56px 0 16px; padding-top: 32px; border-top: 1px dotted var(--dot-l); }
.legal-col > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-col h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--ink-l); margin: 28px 0 10px; }
.legal-col p, .legal-col li { font-size: 16px; line-height: 1.7; color: var(--ink-l2); }
.legal-col p { margin-bottom: 15px; }
.legal-col ul, .legal-col ol { margin: 0 0 18px 22px; }
.legal-col li { margin-bottom: 7px; padding-left: 4px; }
.legal-col strong { color: var(--ink-l); font-weight: 600; }
.legal-col a { color: var(--ink-l); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dot-l); }
.legal-col a:hover { text-decoration-color: currentColor; }
.legal-col code { font-family: var(--font-mono); font-size: 13px; color: var(--ink-l); background: var(--white); border: 1px solid var(--line-l); padding: 1px 6px; border-radius: 5px; }
.legal-table-wrap { overflow-x: auto; margin: 8px 0 24px; border: 1px solid var(--line-l); border-radius: 12px; background: var(--white); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.legal-table th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-l3); padding: 13px 16px; border-bottom: 1px solid var(--line-l); }
.legal-table td { vertical-align: top; color: var(--ink-l2); padding: 13px 16px; border-bottom: 1px solid var(--line-l); }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--ink-l); font-weight: 500; white-space: nowrap; }
.token-flow { margin: 12px 0 28px; padding: 26px 22px 22px; border: 1px solid var(--line-l); border-radius: 14px; background: var(--white); }
.token-flow-title { font-weight: 600; font-size: 15px; color: var(--ink-l); margin-bottom: 20px; }
.tf-top { display: flex; flex-direction: column; align-items: center; margin-left: calc((100% - 3 * 22px) / 4 + 22px); width: calc((100% - 3 * 22px) / 4); }
.tf-down { display: flex; flex-direction: column; align-items: center; color: var(--ink-l3); font-size: 12.5px; padding: 4px 0; }
.tf-down::before { content: ""; width: 1px; height: 14px; background: var(--line-l); }
.tf-down::after { content: "\25BE"; line-height: 0.8; color: var(--ink-l3); }
.tf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tf-box { position: relative; background: var(--cream); border: 1px solid var(--line-l); border-radius: 10px; padding: 12px 10px; text-align: center; }
.tf-box strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink-l); line-height: 1.3; }
.tf-box span { display: block; font-size: 12.5px; color: var(--ink-l2); line-height: 1.4; margin-top: 3px; }
.tf-box.is-app { background: var(--char); border-color: var(--char); }
.tf-box.is-app strong { color: var(--bone); } .tf-box.is-app span { color: var(--mute); }
.tf-row .tf-box:not(:last-child)::after { content: "\2192"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: var(--ink-l3); font-size: 14px; }
.tf-caption { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-l3); margin-top: 16px; }
@media (max-width: 720px) {
  .legal-hero { padding-bottom: 56px; }
  .legal-head { padding-top: 32px; }
  .legal-back { margin-bottom: 28px; }
  .legal-body { padding: 56px 0 72px; }
  .tf-top { margin-left: 0; width: 100%; }
  .tf-row { grid-template-columns: 1fr; }
  .tf-row .tf-box:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -20px; transform: translateX(-50%); }
}
.legal-col hr { border: 0; border-top: 1px dotted var(--dot-l); margin: 56px 0; }

/* ===== Phones: round two ===== */
/* Case studies are static on phones: both stories show, each under its card,
   so the cards drop their tab look (no selected state, cue or pointer). */
.cases-static .case-tab, .cases-static .case-tab[aria-selected="true"] {
  background: var(--char-2); color: var(--bone); border-color: var(--line-d); cursor: default; transform: none;
}
.cases-static .case-tab .label, .cases-static .case-tab[aria-selected="true"] .label { color: var(--mute-2); }
.cases-static .case-tab .stats, .cases-static .case-tab[aria-selected="true"] .stats { border-top-color: var(--line-d); color: var(--mute); }
.cases-static .case-tab .stats b, .cases-static .case-tab[aria-selected="true"] .stats b { color: var(--bone); }
.cases-static .case-tab .cue, .cases-static .case-tab::after { display: none; }
.cases-static .case-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cases-static .case-panel { margin-top: -16px; border-top-left-radius: 0; border-top-right-radius: 0; }
.cases-static .case-panel + .case-tab { margin-top: 24px; }
@media (max-width: 720px) {
  /* Hero: a clear step down from headline to kicker and sub-line. */
  .hero-kicker { font-size: 15px; line-height: 1.4; }
  .hero-band .hero-kicker { margin-bottom: 18px; }
  .hero-title { font-size: 42px; line-height: 1.08; }
  .hero .lead { font-size: 17px; line-height: 1.5; }
  /* The "Let's talk" card at about two-thirds of the width, not edge to edge. */
  .talk-card { width: max(70%, 256px); min-width: 0; gap: 16px; }
  /* Clients heading centred over the logo grid. */
  .logos .eyebrow { justify-content: center; }
  .logos .label { text-align: center; }
  /* Small print under pricing wraps naturally instead of breaking after "our". */
  .small-print br { display: none; }
}
@media (max-width: 720px) { .tc-n { white-space: nowrap; } .tc-who { min-width: 0; } }