/* ==========================================================================
   WholeArc brand layer
   Aligns wholearc.ai with the WholeArc identity (PLTFRM Studio, Feb 2026)
   and wholearc.com: #F9F9F9 + black, Helvetica Bold headlines, Martian Mono
   for body and labels, black pill buttons, grey for emphasis, and the thin
   arc as the one graphic gesture. No accent colour.

   Loaded last on every page so it wins over the Webflow export. To roll the
   brand back, remove the <link> to this file.
   ========================================================================== */

/* Tokens are set on body too: the Webflow export redefines its font tokens on
   body inside each breakpoint, which would otherwise beat :root on mobile. */
:root,
body {
  --wa-white: #f9f9f9;
  --wa-off: #f2f0eb;
  --wa-black: #0a0a0a;
  --wa-gray1: #1a1a1a;
  --wa-gray3: #555;
  --wa-gray4: #6b6b6b; /* was #888: 3.4:1, now 5:1 on the off-white background (WCAG AA) */
  --wa-gray5: #ccc;
  --wa-line: rgba(0, 0, 0, .12);
  --wa-accent: #5bb450;
  --wa-display: "HelveticaNeue-Bold", "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  --wa-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Webflow tokens -> brand */
  --base--white: var(--wa-white);
  --base--black: var(--wa-black);
  --grey--grey-900: var(--wa-black);
  --grey--grey-100: #f1f1f0;
  --grey--grey-200: #e9e9e7;
  --grey--grey-400: var(--wa-gray3);
  --bg-color--bg-dark: var(--wa-black);

  /* The lime and yellow accents have no place in the brand. Lime surfaces
     become the brand's warm off-white; lime text on dark becomes near-white. */
  --base--green: var(--wa-off);
  --base--yellow: var(--wa-off);
  --bg-color--bg-green: var(--wa-off);

  --_typography---font-family--headers: var(--wa-display);
  --_typography---font-family--body: var(--wa-mono);
  --_typography---font-family--alternate: var(--wa-mono);
  --_typography---h1--font-weight: 700;
  --_typography---h2--font-weight: 700;
  --_typography---h3--font-weight: 700;
  --_typography---h1--letter-spacing: -.035em;
  --_typography---h2--letter-spacing: -.03em;
  --_typography---h3--letter-spacing: -.02em;
  --_typography---h1--line-height: 1.02;
  --_typography---h2--line-height: 1.05;
  --_typography---h3--line-height: 1.2;
  --_typography---xl--font-weight: 700;
  --_typography---2xl--font-weight: 700;
  --_typography---3xl--font-weight: 700;
  --_typography---5xl--font-weight: 700;
  --_typography---xl--letter-spacing: -.02em;
  --_typography---2xl--letter-spacing: -.025em;
  --_typography---3xl--letter-spacing: -.03em;
  --_typography---4xl--letter-spacing: -.03em;
  --_typography---5xl--letter-spacing: -.035em;

  /* Martian Mono is wide: body copy runs smaller and looser, as on wholearc.com */
  --_typography---base--font-size: .8125rem;
  --_typography---base--line-height: 1.85;
  --_typography---base--letter-spacing: 0;
  --_typography---sm--font-size: .75rem;
  --_typography---sm--line-height: 1.8;
  --_typography---sm--letter-spacing: 0;
  --_typography---lg--font-size: .9375rem;
  --_typography---lg--line-height: 1.75;
  --_typography---lg--letter-spacing: 0;
  --_typography---xs--font-size: .6875rem;
  --_typography---button--font-size: .66rem;
  --_typography---button--letter-spacing: .12em;
}

html { -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--wa-white);
  color: var(--wa-black);
  font-family: var(--wa-mono);
  font-size: .8125rem;
  line-height: 1.85;
  letter-spacing: 0;
}

::selection { background: var(--wa-black); color: var(--wa-white); }

h1, h2, h3, h4, h5, h6,
[class*="heading-style"],
.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl {
  font-family: var(--wa-display);
  font-weight: 700;
}
h4, h5, h6 { letter-spacing: -.01em; }
/* Emphasis in a headline is grey, not italic (wholearc.com .section-h em) */
h1 em, h2 em, h3 em { font-style: normal; color: var(--wa-gray4); }

/* ---- eyebrows: the dot becomes the parent site's short rule ------------- */

.tag {
  font-family: var(--wa-mono);
  font-weight: 400;
  font-size: .625rem;
  letter-spacing: .2em;
  color: var(--wa-gray4);
  gap: 1rem;
}
.tag .dot-square {
  width: 24px;
  height: 1px;
  background-color: var(--wa-gray5);
}
.tag:where(.w-variant-7b425a13-c1ef-9b9e-7459-1b9139e491bd) { color: rgba(249, 249, 249, .75); }
.tag:where(.w-variant-7b425a13-c1ef-9b9e-7459-1b9139e491bd) .dot-square { background-color: rgba(249, 249, 249, .5); }

/* ---- buttons: black pills, mono caps, a quiet hover ---------------------- */

.button,
.button-arrow {
  background-color: var(--wa-black);
  color: var(--wa-white);
  font-family: var(--wa-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .12em;
  border: 1px solid var(--wa-black);
  transition: opacity .2s, background-color .25s, color .25s, border-color .25s;
}
.button:hover,
.button-arrow:hover {
  background-color: var(--wa-black);
  opacity: .75;
  transform: none;
}
.button-arrow_bg,
.button-arrow_bg.is-black { background-color: transparent; }
.button_container-arrow,
.button_container-arrow.is-black {
  background-color: var(--wa-white);
  color: var(--wa-black);
}
.button-arrow.is-black,
.button:where(.w-variant-e7c0edd3-8276-a3ba-3d91-2abb3afb4c44) {
  background-color: var(--wa-black);
  color: var(--wa-white);
}
/* Webflow's hover interaction writes an inline text colour onto these links;
   the label must stay white on the black pill. */
.button-arrow,
.button-arrow.is-black { color: var(--wa-white) !important; }
.button_container-arrow { color: var(--wa-black); }

/* Secondary / line button (translucent on imagery, grey on light) */
.button:where(.w-variant-3876fb3c-f589-169e-8f41-073b5a3f3902) {
  background-color: transparent;
  color: var(--wa-white);
  border-color: rgba(249, 249, 249, .4);
}
.button:hover:where(.w-variant-3876fb3c-f589-169e-8f41-073b5a3f3902) {
  background-color: var(--wa-white);
  color: var(--wa-black);
  border-color: var(--wa-white);
  opacity: 1;
}
.button:where(.w-variant-29a3d87d-0352-056f-f3fc-7e15705035cc),
.button.is-secondary {
  background-color: transparent;
  color: var(--wa-black);
  border-color: rgba(0, 0, 0, .2);
}
.button:hover:where(.w-variant-29a3d87d-0352-056f-f3fc-7e15705035cc),
.button.is-secondary:hover {
  background-color: var(--wa-black);
  color: var(--wa-white);
  border-color: var(--wa-black);
  opacity: 1;
}

/* Former lime chips and icon tiles: quiet neutral, dark glyph */
.icon,
.container-big-icon,
.avatar-item.is-plus,
.ecard_badge,
.tem_card_role { color: var(--wa-black); }

/* Lime text on dark surfaces */
.container-arrow.bg-black,
.fs-styleguide_heading-header { color: var(--wa-white); }

/* ---- surfaces ------------------------------------------------------------ */

/* Cards drop their drop-shadows; a hairline does the work instead */
[class*="card"] { box-shadow: none; }

/* Icons that carry the accent */
.wa-accent-icon { color: var(--wa-accent); }

/* ---- hero: the sky stays (it is in the brand book) ------------------------ */

.section_hero { position: relative; }

/* ---- footer: light, like wholearc.com's closing grid --------------------- */

.footer { color: var(--wa-black); }
.footer_wrap {
  background-color: var(--wa-white);
  border-radius: 0;
  border-top: 1px solid var(--wa-line);
  padding-left: 0;
  padding-right: 0;
}
.footer_logo-text {
  font-family: var(--wa-display);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--wa-black);
}
.wa-foot-head {
  font-family: var(--wa-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wa-gray4);
  margin-bottom: .2rem;
}
.wa-foot-addr,
.wa-foot-link,
.wa-foot-legal-link,
.wa-foot-copy {
  font-family: var(--wa-mono);
  font-size: .72rem;
  color: var(--wa-gray3);
}
.wa-foot-link:hover,
.wa-foot-legal-link:hover { color: var(--wa-black); }
.wa-foot-copy {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wa-gray4);
}
.wa-foot-divider { background: var(--wa-line); }
.wa-soc { background: transparent; border: 1px solid var(--wa-line); color: var(--wa-gray3); }
.wa-soc:hover { background: var(--wa-black); color: var(--wa-white); }

/* ---- "Ask us anything": a light card and a black pill -------------------- */

.wa-chat .wa-chat-launch {
  height: 2.75rem;
  padding: 0 1.25rem 0 1rem;
  border-radius: 100px;
  background: var(--wa-black);
  color: var(--wa-white);
  font: 400 .66rem/1 var(--wa-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.wa-chat .wa-chat-launch:hover { transform: none; opacity: .8; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.wa-chat .wa-chat-launch svg { width: 1rem; height: 1rem; }
.wa-chat { font-family: var(--wa-mono); }
.wa-chat .wa-chat-panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.wa-chat .wa-chat-head,
.wa-chat .wa-chat-form { border-color: rgba(0, 0, 0, .08); }
.wa-chat .wa-chat-dot { background: var(--wa-black); }
.wa-chat .wa-chat-title { color: var(--wa-black); font-family: var(--wa-display); font-weight: 700; letter-spacing: -.01em; }
.wa-chat .wa-chat-sub { color: var(--wa-gray4); font-family: var(--wa-mono); font-size: .62rem; }
.wa-chat .wa-chat-x { color: var(--wa-gray4); }
.wa-chat .wa-chat-x:hover { background: rgba(0, 0, 0, .05); color: var(--wa-black); }
.wa-chat .wa-chat-log { scrollbar-color: rgba(0, 0, 0, .15) transparent; }
.wa-chat .wa-chat-log::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); }
.wa-chat .wa-msg { font-size: .75rem; line-height: 1.7; }
.wa-chat .wa-msg-bot { background: var(--wa-white); color: var(--wa-gray1); border: 1px solid rgba(0, 0, 0, .06); }
.wa-chat .wa-msg-you { background: var(--wa-black); color: var(--wa-white); }
.wa-chat .wa-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wa-chat .wa-chip { border-color: rgba(0, 0, 0, .15); color: var(--wa-gray3); font-family: var(--wa-mono); font-size: .66rem; }
.wa-chat .wa-chip:hover { border-color: var(--wa-black); color: var(--wa-white); background: var(--wa-black); }
.wa-chat .wa-chat-input {
  border-color: rgba(0, 0, 0, .12);
  background: var(--wa-white);
  color: var(--wa-black);
  font-family: var(--wa-mono);
  font-size: .75rem;
}
.wa-chat .wa-chat-input::placeholder { color: var(--wa-gray4); }
.wa-chat .wa-chat-input:focus { border-color: var(--wa-black); }
.wa-chat .wa-chat-send { background: var(--wa-black); color: var(--wa-white); border-radius: 100px; }
.wa-chat .wa-typing { background: var(--wa-white); }
.wa-chat .wa-typing i { background: var(--wa-gray4); }

/* ---- engagements page (pricing.html) ------------------------------------- */

.ea {
  --ea-ink: var(--wa-black);
  --ea-ink-2: var(--wa-gray3);
  --ea-ink-3: var(--wa-gray4);
  --ea-paper: var(--wa-white);
  --ea-panel: var(--wa-off);
  /* The accent appears only on hover; at rest the old lime spots are a soft grey */
  --ea-lime: #e9e9e7;
  --ea-mono: var(--wa-mono);
  --ea-sans: var(--wa-display);
  /* Hairlines only: the page reads as one sheet, not stacked sections */
  --ea-line: rgba(10, 10, 10, .07);
  --ea-line-strong: rgba(10, 10, 10, .12);
}

/* ---- one continuous, breathable page -------------------------------------- */

/* No rules between sections or entries; whitespace does the separating */
.ea-hero__meta,
.ea-entries,
.ea-entry,
.ea-sechead,
.ea-price__grid { border: 0; }

.ea-hero { padding-bottom: 7rem; }
.ea-index { padding-bottom: 10rem; }
.ea-entry { padding: 8rem 0; }
.ea-entry + .ea-entry { padding-top: 10rem; }
.ea-other { padding: 10rem 0; }
.ea-process { padding: 2rem 0 10rem; }
.ea-price { padding: 0 0 10rem; }
.ea-steps { margin-top: 5.5rem; }
.ea-lists { margin-top: 4.5rem; gap: 3.5rem; }
.ea-bestfor { margin-top: 4rem; }
.ea-entry__foot { margin-top: 4rem; }
.ea-entry__desc { margin-top: 2.5rem; }
.ea-price__cols { margin-top: 4.5rem; }

/* Panels become quiet tints instead of blocks */
.ea-fig,
.ea-bestfor { background: rgba(10, 10, 10, .025); }

/* "Something else" joins the page instead of sitting in a black slab */
.ea-other__panel {
  background: transparent;
  color: var(--ea-ink);
  padding: 0;
  border-radius: 0;
}
.ea-other .ea-tag { color: var(--ea-ink-3); }
.ea-other .ea-h2 { color: var(--ea-ink); }
.ea-other .ea-body,
.ea-other__honest { color: var(--ea-ink-2); }
.ea-other__honest { border-top-color: var(--ea-line-strong); }
.ea-chips li { border-color: var(--ea-line-strong); color: var(--ea-ink-2); }
.ea-chips li.is-open { border-color: var(--ea-ink-3); color: var(--ea-ink); }
.ea-other .ea-link { color: var(--ea-ink); border-bottom-color: var(--ea-line-strong); }
.ea-box { border-color: var(--ea-line-strong); right: 0; top: 0; }
.ea-box::after { background: var(--ea-ink); }
.ea-box span { color: var(--ea-ink-3); }

.ea-step:first-child::before { background: var(--ea-ink); }

/* The closing CTA sits on the page too: no sky panel */
.ea-cta .padding-global { padding-left: 0; padding-right: 0; }
.ea-cta .cta_wrap {
  background: none;
  border-radius: 0;
  padding: 0 0 8rem;
}
.ea-cta .overlay { display: none; }
.ea-cta__inner,
.ea-cta__text h2 { color: var(--ea-ink); }
.ea-cta__text .ea-tag { color: var(--ea-ink-3); }
.ea-cta__text p { color: var(--ea-ink-2); }
.ea-cta__mail { color: var(--ea-ink); border-bottom-color: var(--ea-line-strong); }

/* ---- the accent, on hover only -------------------------------------------- */

.ea-link { border-bottom-color: var(--ea-line-strong); transition: gap .25s ease, border-color .25s ease; }
.ea-link .ea-arrow { background: rgba(10, 10, 10, .05); transition: transform .25s ease, background .25s ease, color .25s ease; }
.ea-link:hover { border-bottom-color: var(--wa-accent); }
.ea-link:hover .ea-arrow { background: var(--wa-accent); color: #fff; }
.ea-toindex:hover,
.ea-cta__mail:hover { color: var(--wa-accent); border-bottom-color: var(--wa-accent); }

@media screen and (max-width: 991px) {
  .ea-index { padding-bottom: 7rem; }
  .ea-entry { padding: 6rem 0; }
  .ea-entry + .ea-entry { padding-top: 7rem; }
  .ea-other { padding: 7rem 0; }
  .ea-box { right: 0; top: 0; }
}
@media screen and (max-width: 767px) {
  .ea-index { padding-bottom: 5rem; }
  .ea-index__list { border-top: 1px solid rgba(10, 10, 10, .07); }
  .ea-entry { padding: 4.5rem 0; }
  .ea-entry + .ea-entry { padding-top: 5rem; }
  .ea-other { padding: 5rem 0; }
  .ea-other__panel { padding: 0; }
  .ea-box { right: 0; top: 0; }
  .ea-process, .ea-price { padding-bottom: 6rem; }
  .ea-cta .cta_wrap { padding: 0 0 5rem; }
}
/* ---- engagement index: frosted glass; green only on hover ----------------- */

.ea-index { --glass-tint: color-mix(in srgb, var(--wa-accent) 22%, transparent); }

.ea-index__head { border-bottom-color: transparent; }

/* The glass panel */
.ea-index__list {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(10, 10, 10, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 30px 60px -30px rgba(10, 10, 10, .18),
    0 2px 6px rgba(10, 10, 10, .04);
}
/* Reflective sheen across the top-left of the glass */
.ea-index__list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25) 100%);
}
.ea-index__list > li { position: relative; z-index: 1; }

.ea-index__row { border-bottom-color: rgba(10, 10, 10, .07); overflow: hidden; }
.ea-index__list > li:last-child .ea-index__row { border-bottom: 0; }

/* Hover: a green wash, a glowing edge light and a sheen that sweeps across */
.ea-index__row::before {
  background:
    linear-gradient(90deg, var(--glass-tint), color-mix(in srgb, var(--wa-accent) 6%, transparent) 70%, transparent);
  box-shadow: inset 3px 0 0 var(--wa-accent), inset 12px 0 18px -12px var(--wa-accent);
}
.ea-index__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 35%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
}
.ea-index__row:hover::after,
.ea-index__row:focus-visible::after {
  opacity: 1;
  transform: skewX(-18deg) translateX(460%);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .2s;
}
.ea-index__row:hover .ea-index__num { color: var(--wa-accent); }

/* Arrow buttons become small glass beads */
.ea-index__go {
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .45));
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(10, 10, 10, .06);
}
.ea-index__row:hover .ea-index__go {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wa-accent) 55%, #fff), var(--wa-accent) 70%);
  border-color: color-mix(in srgb, var(--wa-accent) 70%, #fff);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px -4px color-mix(in srgb, var(--wa-accent) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .ea-index__row::after { display: none; }
}
/* Body copy is mono; only rules that ask for var(--ea-sans) get Helvetica.
   It runs one step smaller than the old sans. */
.ea { font-family: var(--wa-mono); }
.ea-hero__statement,
.ea-index__name,
.ea-lede {
  font-family: var(--wa-display);
  font-weight: 700;
  letter-spacing: -.03em;
}
.ea-body,
.ea-bestfor p { font-size: .875rem; line-height: 1.85; letter-spacing: 0; }
.ea-list li,
.ea-index__desc,
.ea-step p { font-size: .8125rem; line-height: 1.75; letter-spacing: 0; }
.ea-aside { font-size: 1rem; }

/* ---- small things the brand would not say -------------------------------- */

/* An unsourced five-star rating is hype; the line above it says enough. */
.rating .stars-wrap { display: none; }
/* Inline headline glyphs keep their motion but lose their colour. */
.title-icon { filter: grayscale(1) contrast(1.1); }

/* Remaining hard-coded Geist Mono: legal pages and the engagement diagrams */
.wa-legal-updated,
.wa-legal-toc-head,
.wa-legal-num,
.ea-fig svg { font-family: var(--wa-mono); }

/* ---- cookie banner: a small light card, as on wholearc.com --------------- */

.wa-consent_inner {
  max-width: 34rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .1);
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.wa-consent_text { font-size: .7rem; line-height: 1.8; letter-spacing: 0; color: var(--wa-gray1); }
.wa-consent_link { color: var(--wa-black); }
.wa-consent_btn {
  font-family: var(--wa-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .75rem 1.4rem;
  background: transparent;
  color: var(--wa-black);
  border-color: rgba(0, 0, 0, .2);
}
.wa-consent_btn:hover { border-color: var(--wa-black); color: var(--wa-black); }
.wa-consent_btn.is-accept { background: var(--wa-black); border-color: var(--wa-black); color: var(--wa-white); order: -1; }
.wa-consent_btn.is-accept:hover { background: var(--wa-black); border-color: var(--wa-black); opacity: .8; }

/* ---- logo lockup: WholeArc / Intelligence --------------------------------- */
.navbar_logo-text,
.footer_logo-text {
  font-family: var(--wa-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.navbar_logo-text { font-size: 1.35rem; }
.wa-logo-sub {
  display: block;
  margin-top: .4em;
  font-family: var(--wa-mono);
  font-size: .4em;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---- footer gutters: line up with the page content ------------------------ */
.padding-global.is-footer { padding-left: 3.25rem; padding-right: 3.25rem; padding-bottom: 2.5rem; }
.footer .container-full { max-width: 80rem; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 991px) {
  .padding-global.is-footer { padding-left: var(--_sizes---fixed--huge); padding-right: var(--_sizes---fixed--huge); }
}
@media screen and (max-width: 767px) {
  .padding-global.is-footer { padding-left: var(--_sizes---fixed--medium); padding-right: var(--_sizes---fixed--medium); padding-bottom: 1.5rem; }
}

/* ---- About: intro spread across three columns ----------------------------- */
.wa-about-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; width: 100%; text-align: left; }
.wa-about-col { border-top: 1px solid var(--wa-line); padding-top: 1.5rem; }
.wa-about-col p { margin: 0 0 1rem; }
.wa-about-col p:last-child { margin-bottom: 0; }
.wa-about-qs { list-style: none; margin: 0 0 1rem; padding: 0; }
.wa-about-qs li { font-family: var(--wa-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; line-height: 1.3; color: var(--wa-black); margin-bottom: .75rem; }
@media screen and (max-width: 991px) { .wa-about-cols { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- homepage hero: card below the navbar, shorter than full screen ------ */
.section_hero.is-inset { min-height: 0; height: auto; margin-top: .5rem; overflow: hidden; }
.section_hero.is-inset .hero_wrap { padding-top: 4rem; padding-bottom: 2rem; }
.section_hero.is-inset .spacer-desktop { height: 5rem !important; }
.section_hero.is-inset .spacer-tablet, .section_hero.is-inset .spacer-mobile { height: 8rem !important; }
@media screen and (max-width: 767px) {
  .section_hero.is-inset .hero_wrap { padding-top: 3rem; padding-bottom: 1.5rem; }
}

/* ---- homepage writing cards: "Read the essay" pill button ----------------- */
.wa-card-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.25rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background-color: var(--wa-black);
  color: var(--wa-white);
  font-family: var(--wa-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  transition: background-color .2s ease;
}
.wa-card-cta svg { width: .9rem; height: .9rem; transition: transform .2s ease; }
.service_container:hover .wa-card-cta,
.service_container:focus-visible .wa-card-cta { background-color: var(--wa-gray1); }
.service_container:hover .wa-card-cta svg { transform: translate(2px, -2px); }

/* ---- homepage hero: 3D cards ------------------------------------------- */
.img3d .image3d { display: block; }
.wa-3d-fade {
  position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 1;
  border-radius: .5rem;
  background: linear-gradient(to top, rgba(10, 10, 10, .6), rgba(10, 10, 10, 0) 55%);
  transform-style: preserve-3d; backface-visibility: hidden;
  transform: rotateX(90deg) translateZ(1px);
  pointer-events: none;
}

/* ---- article pages: headline → opening + image → sub-head → content →
        soundbite → sub-head → how-to → closing CTA ------------------------- */
.wa-post { color: var(--wa-black); }
.wa-post-head { padding-top: 4rem; padding-bottom: 2.5rem; }
.wa-post-title {
  font-family: var(--wa-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem); max-width: 16ch; margin: 1.5rem 0 1.25rem;
}
.wa-post-meta { font-family: var(--wa-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wa-gray4); margin: 0; }

.wa-post-open-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.wa-post-lede p { font-family: var(--wa-display); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; letter-spacing: -.01em; margin: 0 0 1.1rem; }
.wa-post-lede p:last-child { margin-bottom: 0; }
.wa-post-figure { margin: 0; }
.wa-post-figure img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--_sizes---fixed--xlarge); }
.wa-post-figure figcaption { margin-top: .6rem; font-family: var(--wa-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wa-gray4); }

.wa-post-body { max-width: 44rem; padding-top: 4.5rem; padding-bottom: 2rem; }
.wa-post-body p { font-family: var(--wa-mono); font-size: .95rem; line-height: 1.8; color: var(--wa-gray1); margin: 0 0 1.4rem; }
.wa-post-sub {
  font-family: var(--wa-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--wa-line);
}
.wa-post-body > .wa-post-sub:not(:first-child) { margin-top: 3.5rem; }

.wa-post-quote { margin: 3.5rem 0; padding: 2.25rem 0 0; border-top: 2px solid var(--wa-black); }
.wa-post-quote blockquote {
  margin: 0; font-family: var(--wa-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--wa-black);
}
.wa-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.5rem;
  font-family: var(--wa-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.wa-post-share span { color: var(--wa-gray4); }
.wa-post-share a { color: var(--wa-black); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }

.wa-post-steps { list-style: none; counter-reset: step; margin: 0 0 2rem; padding: 0; }
.wa-post-steps li {
  counter-increment: step; position: relative; padding: 1.1rem 0 1.1rem 3.25rem; border-bottom: 1px solid var(--wa-line);
  font-family: var(--wa-mono); font-size: .92rem; line-height: 1.7; color: var(--wa-gray3);
}
.wa-post-steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem;
  font-family: var(--wa-mono); font-size: .75rem; letter-spacing: .1em; color: var(--wa-gray4);
}
.wa-post-steps strong { display: block; font-family: var(--wa-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--wa-black); margin-bottom: .2rem; }

.wa-post-cta { padding-top: 2rem; padding-bottom: 2rem; }
.wa-post-cta-card {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  background: var(--wa-black); color: var(--wa-white); border-radius: var(--_sizes---fixed--xlarge); padding: 3rem;
}
.wa-post-cta-card h2 { font-family: var(--wa-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 0 0 .9rem; color: var(--wa-white); }
.wa-post-cta-card p { font-family: var(--wa-mono); font-size: .9rem; line-height: 1.7; color: var(--wa-gray5); margin: 0; max-width: 34rem; }
.wa-post-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.wa-post-btn {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-family: var(--wa-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.wa-post-btn svg { width: .95rem; height: .95rem; }
.wa-post-btn.is-light { background: var(--wa-white); color: var(--wa-black); }
.wa-post-btn.is-light:hover { background: var(--wa-off); }
.wa-post-btn.is-ghost { color: var(--wa-white); border: 1px solid rgba(255, 255, 255, .35); }
.wa-post-btn.is-ghost:hover { border-color: var(--wa-white); }

@media screen and (max-width: 991px) {
  .wa-post-open-grid { grid-template-columns: 1fr; gap: 2rem; }
  .wa-post-body { padding-top: 3rem; }
}
@media screen and (max-width: 767px) {
  .wa-post-head { padding-top: 2.5rem; padding-bottom: 1.5rem; }
  .wa-post-cta-card { padding: 2rem 1.5rem; }
}
.wa-post-title { color: var(--wa-black); }
.wa-post-lede p { font-family: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--wa-black); }
.wa-post-quote blockquote { border-left: 0; padding: 0; }
/* related-post cards: the template's phone layout collapsed them to zero height */
@media screen and (max-width: 767px) {
  .blog_cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .blog_cards > [role="listitem"] { width: 100%; }
}

/* ---- accessibility ------------------------------------------------------- */
/* skip link: hidden until focused with the keyboard */
.wa-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10000;
  padding: .8rem 1.2rem; border-radius: 999px; background: var(--wa-black); color: var(--wa-white);
  font-family: var(--wa-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  transition: top .15s ease;
}
.wa-skip:focus { top: 1rem; }
/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wa-black); outline-offset: 3px;
}
.section_hero a:focus-visible, .wa-post-cta-card a:focus-visible { outline-color: var(--wa-white); }
/* hero: darken the sky photo itself (no overlay, so nothing flashes before it fades in)
   so small white copy stays readable on the pale parts of the sky */
.section_hero .img.is-hero { filter: brightness(.8) saturate(1.05); }
.section_hero .text-color-on-primary, .section_hero h1 { text-shadow: 0 1px 14px rgba(8, 30, 70, .3); }
/* people who ask their device for less motion: no looping or sliding animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-anim], [animation], [hero-text], [hero-bg], [cta], [title-icon] { opacity: 1 !important; visibility: visible !important; }
  ._3d .wrap { transform: translate(0, 10%) translate3d(0, 0, -20rem) rotateX(-77deg) !important; }
}
/* the small line at the bottom of the hero sits on white clouds: give it its own dark pill */
.section_hero .rating .text-color-on-primary {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px;
  background: rgba(8, 30, 70, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none;
}