/* The Cabinet · a Grainview solution
   Palette: paper — the white lockup's ground, forest green ink, the logo's
   gold as the one accent. Flipped from the noir theme at Jeff's call,
   Sep 3 2026, to match grainviewpartners.com ("make it the white version").
   Photos keep their dark scrims: a hero backdrop, the officer handsets, and
   media overlays are the only dark surfaces, and they carry their own text
   tokens (see "Dark surfaces" below) so nothing has to be restyled by hand.
   Voice: butler's understatement. No neon, no gradient-blue AI clichés. */

:root {
  color-scheme: light;
  /* Light ground */
  --paper: #FBFAF7;
  --paper-2: #F4F1EA;
  --card: #FFFFFF;
  --ink: #14201D;
  --ink-dim: #3D4A45;
  --ink-faint: #5F6A65;
  --brass: #8C6D3F;
  --brass-bright: #7F6234;
  --rule: rgba(154, 123, 72, 0.30);
  --rule-faint: rgba(154, 123, 72, 0.16);
  --btn-bg: #14201D;
  --btn-fg: #FBFAF7;
  --btn-hover: #8C6D3F;
  --shadow: rgba(20, 32, 29, 0.12);
  /* Dark surfaces (photos, panels) */
  --panel: #14201D;
  --panel-2: #1B2925;
  --cream: #ECE2CD;
  --cream-dim: #C9BCA1;
  --cream-faint: #9D9179;
  --gold: #C9A25E;
  --gold-bright: #E3C48A;
  --serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Dark surfaces: anything that sits on a photo or a green panel swaps the
   text tokens so the same components read correctly on both grounds. */
.hero.backdrop,
.section.panel,
.cards.handsets .card,
.phone,
.announce-overlay,
.pitch,
.dark {
  --ink: var(--cream);
  --ink-dim: var(--cream-dim);
  --ink-faint: var(--cream-faint);
  --brass: var(--gold);
  --brass-bright: var(--gold-bright);
  --rule: rgba(201, 162, 94, 0.38);
  --rule-faint: rgba(201, 162, 94, 0.16);
  --card: var(--panel-2);
  --paper: var(--panel);
  --paper-2: var(--panel-2);
  --btn-bg: var(--gold);
  --btn-fg: #14201D;
  --btn-hover: var(--gold-bright);
  --shadow: rgba(0, 0, 0, 0.38);
  /* Inherited color is a computed value, so it must be restated here for
     headings and plain text inside the surface to pick up the swap. */
  color: var(--ink);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.005em;
}

a { color: var(--brass-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* The lockup (emblem + THE CABINET + A Grainview Solution) is one
   transparent image, cut from the white-background logo so it sits flat on
   the paper. The alt text is the accessible name. */
.wordmark a { display: flex; align-items: center; gap: 12px; }
.wordmark-lockup {
  display: block;
  height: 76px; /* 54px until Sep 24 2026, Jeff asked for 40% larger */
  width: auto;
}
.wordmark-emblem {
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  background: url('assets/cabinet-emblem.png') center / contain no-repeat;
}
@media (max-width: 640px) {
  .wordmark-lockup { height: 56px; }
  .wordmark-emblem { width: 42px; height: 42px; }
  .wordmark .mark { font-size: 1.4rem; }
  .wordmark .sub { font-size: 0.64rem; }
}
.wordmark-text { display: block; line-height: 1.2; }

/* ---------- Navigation ---------- */

.nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark .mark {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.14em;
}
.wordmark .sub {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--ink-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.active { color: var(--brass-bright); }
/* The header's outline button: .nav-links a:hover would otherwise win the
   cascade and keep the label ink on the brass hover ground. */
.nav-links a.btn:hover { color: #FBFAF7; }

.btn {
  display: inline-block;
  border: 1px solid var(--brass);
  color: var(--brass-bright);
  padding: 12px 26px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: #FBFAF7; text-decoration: none; }
.btn.solid { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.solid:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #FBFAF7; }
/* <button class="btn"> otherwise inherits the UA control fill and font. */
button.btn { background: transparent; font-family: var(--sans); cursor: pointer; }
.hero.backdrop .btn.solid:hover,
.section.panel .btn.solid:hover,
.dark .btn.solid:hover { color: #14201D; }

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

.hero { padding: 110px 0 90px; border-bottom: 1px solid var(--rule); }

/* Photo heroes keep their scrim. Chair and lamp sit right of frame on the
   homepage, so the overlay stays darkest on the left where the headline
   lives. Text tokens flip to cream inside (see Dark surfaces).

   The photo holds still while the copy scrolls over it, on every device.
   background-attachment: fixed did that on desktop only, because iOS
   Safari ignores it; instead the photo is a viewport-fixed pseudo-element
   and the hero's clip-path confines it to the hero's box (Jeff, Sep 12:
   the phone view was not holding the image). The hero's own background is
   the panel color, the ground the photo fades in over. */
.hero.backdrop {
  position: relative;
  clip-path: inset(0);
  background: var(--panel);
  padding: 96px 0 90px;
  border-bottom: 0;
}
.hero.backdrop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(13, 11, 9, 0.78) 0%,
      rgba(13, 11, 9, 0.68) 42%,
      rgba(13, 11, 9, 0.42) 72%,
      rgba(13, 11, 9, 0.26) 100%),
    var(--hero-img) var(--hero-pos, right center) / cover no-repeat;
}

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  max-width: 17ch;
  margin-bottom: 26px;
}

.hero .lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink-dim);
  max-width: 40ch;
  margin-bottom: 28px;
  font-style: italic;
}

.hero .actions { display: flex; gap: 18px; flex-wrap: wrap; }

/* The line the Aug 4 board called "the best line Jeff has written" moved
   here (Sep 12 boardroom session) when the rotating-word headline took the
   H1 slot. It keeps its billing as the closing beat before the CTA instead
   of being cut. */
.hero-kicker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  margin-bottom: 26px;
}

/* Hero headline word rotator (Sep 12 boardroom session). index.html's script
   measures each word and sets the slot's width, so the rest of the line
   slides to the new word instead of jumping. */
.word-rotate {
  display: inline-block;
  color: var(--brass);
  transition: opacity 0.3s ease, width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .word-rotate { transition: none; }
}

/* Hero stack (Jeff, Sep 12, second note): eyebrow, headline, the org chart,
   then the subline, kicker and button. From 900px up the eyebrow and kicker
   each hold to a single line. The headline breaks after the rotating word
   ("Your ‹word›" over "business intelligence.") so nothing on the line
   shifts as the word changes. */
.hero-visual { min-width: 0; }
.hero-stack h1 { max-width: none; margin-bottom: 0; }
.hero-stack .actions { margin-top: 34px; }
.hero-stack .hero-visual { margin: 34px 0 30px; }
.hero-stack .lede { font-size: clamp(1.1rem, 1.9vw, 1.35rem); max-width: none; margin-bottom: 22px; }
@media (min-width: 900px) {
  .hero-stack .eyebrow,
  .hero-stack h1,
  .hero-stack .hero-kicker { white-space: nowrap; }
}

/* ---------- The org chart (homepage hero) ----------
   One inline SVG. Every color is a token, so it reads cream-on-dark over
   the photo and ink-on-paper under 720px without a second drawing. Tokens
   travel the lines and seats pulse from index.html's script. */
.org-chart { display: block; width: 100%; height: auto; max-width: 576px; margin: 0; overflow: visible; }
.org-chart .oc-panel { fill: var(--oc-panel, rgba(13, 11, 9, 0.55)); stroke: var(--rule); stroke-width: 1; }
.org-chart .oc-lines line { stroke: var(--brass); stroke-opacity: 0.45; stroke-width: 1.2; }
.org-chart .oc-node,
.org-chart .oc-rim { stroke: var(--brass); stroke-width: 1.3; transition: stroke-width 0.3s, stroke 0.3s; }
.org-chart .oc-node { fill: var(--oc-card, var(--card)); }
.org-chart .oc-rim { fill: none; }
.org-chart .oc-seat.working .oc-node,
.org-chart .oc-seat.working .oc-rim { stroke: var(--brass-bright); stroke-width: 2.4; }
.org-chart .oc-ring {
  fill: none;
  stroke: var(--brass-bright);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.org-chart .oc-seat.working .oc-ring { animation: oc-ring 1s ease-out infinite; }
@keyframes oc-ring {
  0% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
.org-chart .oc-bust { fill: var(--brass); }
.org-chart .oc-name { font-family: var(--serif); font-size: 14px; fill: var(--ink); }
.org-chart .oc-label {
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-dim);
}
.org-chart .oc-label.brass { fill: var(--brass); font-size: 9.5px; letter-spacing: 0.1em; }
/* The name of the row the desks hang from, set into a break in the bus line. */
.org-chart .oc-bus-label {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--brass);
}
.org-chart .oc-bubble { opacity: 0; transition: opacity 0.35s ease; }
.org-chart .oc-bubble.on { opacity: 1; }
.org-chart .oc-bubble path { fill: var(--oc-card, var(--card)); stroke: var(--rule); stroke-width: 1; }
.org-chart .oc-bubble text { font-family: var(--serif); font-style: italic; font-size: 12px; fill: var(--ink); }
.org-chart .oc-token { fill: var(--brass-bright); filter: url(#oc-glow); }
.org-chart .oc-parcel rect { fill: var(--oc-card, var(--card)); stroke: var(--brass-bright); stroke-width: 1.2; }
.org-chart .oc-parcel path,
.org-chart .oc-parcel line { stroke: var(--brass-bright); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.org-chart .oc-spark { fill: var(--brass-bright); }
.org-chart .oc-burst-ring { fill: none; stroke: var(--brass-bright); stroke-width: 1.5; }
.org-chart .oc-caption {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--brass);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.org-chart .oc-caption.on { opacity: 1; }
/* Test-build seats (org-chart.js): an Aide wears a dashed outer ring to
   mark it as an agent beside a human team; a person is a small dot. */
.org-chart .oc-agent { fill: none; stroke: var(--brass); stroke-width: 1; stroke-dasharray: 2.5 3; opacity: 0.8; }
.org-chart .oc-seat.working .oc-agent { stroke: var(--brass-bright); opacity: 1; }
.org-chart .oc-person { fill: var(--ink-dim); transition: fill 0.3s; }
.org-chart .oc-seat.working .oc-person { fill: var(--brass-bright); }
@media (prefers-reduced-motion: reduce) {
  .org-chart .oc-seat.working .oc-ring { animation: none; }
}

/* ---------- Daylight look (test-look.html) ----------
   The new photography is bright, glassy, daylight. A .daylight photo band
   keeps the light tokens (ink on paper) and puts the copy on frosted glass
   over the photo instead of under a dark scrim. Same fixed-photo mechanism
   as .hero.backdrop; any section can carry it with its own --hero-img. */
.hero.backdrop.daylight {
  --ink: #14201D;
  --ink-dim: #3D4A45;
  --ink-faint: #5F6A65;
  --brass: #8C6D3F;
  --brass-bright: #7F6234;
  --rule: rgba(154, 123, 72, 0.30);
  --rule-faint: rgba(154, 123, 72, 0.16);
  --card: #FFFFFF;
  --paper: #FBFAF7;
  --paper-2: #F4F1EA;
  --btn-bg: #14201D;
  --btn-fg: #FBFAF7;
  --btn-hover: #8C6D3F;
  --shadow: rgba(20, 32, 29, 0.12);
  color: var(--ink);
  background: var(--paper-2);
}
.hero.backdrop.daylight::before {
  background:
    linear-gradient(180deg, rgba(251, 250, 247, 0.03) 0%, rgba(251, 250, 247, 0.13) 100%),
    var(--hero-img) var(--hero-pos, center) / cover no-repeat;
}
.hero.backdrop.daylight .btn.solid:hover { color: #FBFAF7; }
.hero.backdrop.daylight.band { padding: 110px 0; }
.glass {
  background: rgba(251, 250, 247, 0.40);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 32, 29, 0.18);
}
.daylight .copy-card { padding: 36px 40px; max-width: 760px; }
.daylight .copy-card.narrow { max-width: 520px; }
.daylight .copy-card.right { margin-left: auto; }
.daylight .copy-card h2 { margin-bottom: 14px; }
.daylight .copy-card .intro { margin-bottom: 24px; }
.daylight .chart-card { padding: 18px 18px 8px; max-width: 620px; margin: 28px 0 0; --oc-panel: transparent; --oc-card: #FFFFFF; }
.daylight .chart-card .oc-panel { stroke: none; }
.daylight .chart-card .org-chart { margin: 0; }
.daylight .hero-kicker { margin: 26px 0 22px; }
.daylight .portrait {
  display: block;
  width: 100%;
  max-width: 300px;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 32, 29, 0.22);
  margin-bottom: 22px;
}
.section.daylight-cards { background: var(--paper); }
.section.daylight-cards .card { border-radius: 16px; box-shadow: 0 14px 36px rgba(20, 32, 29, 0.08); border-color: transparent; }
@media (max-width: 720px) {
  .hero.backdrop.daylight::before {
    background:
      linear-gradient(180deg, rgba(251, 250, 247, 0.22) 0%, rgba(251, 250, 247, 0.42) 100%),
      var(--hero-img) var(--hero-pos, center) / cover no-repeat;
  }
  .daylight .copy-card { padding: 26px 22px; }
  .hero.backdrop.daylight.band { padding: 64px 0; }
}

/* Test builds page: three houses, one chart engine, on dark panels. */
.build .org-chart { max-width: 640px; margin: 30px 0 18px; }
.build .intro { max-width: 60ch; }
.build-legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- Sections ---------- */

.section { padding: 84px 0; border-bottom: 1px solid var(--rule); }
.section.walnut { background: var(--paper-2); }
.section.panel { background: var(--panel); color: var(--ink); }

.section h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 18px;
  max-width: 24ch;
}

.section .intro {
  color: var(--ink-dim);
  max-width: 62ch;
  margin-bottom: 44px;
}

.kicker {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

/* ---------- Proof band ---------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.proof > div { background: var(--card); padding: 40px 34px 36px; }
.proof .officer {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 14px;
}
.proof p {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
}
.proof .note {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 12px;
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.card {
  border: 1px solid var(--rule);
  background: var(--card);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
}
.card.walnut { background: var(--paper-2); }

/* Officer cards on the Cabinet page carry a quiet nod to the phone the
   service lives on: bezel-round corners, a brass speaker slit, and a
   portrait that sits behind the text via --card-img once generated. These
   are dark objects on the paper, by design: the portrait needs the scrim. */
.cards.handsets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 34px;
}
/* Two-card variant for the Announced pair: centered, phone-shaped. */
.cards.handsets.pair {
  grid-template-columns: repeat(2, minmax(0, 380px));
}
/* One-card variant for a room seating a single officer. */
.cards.handsets.solo {
  grid-template-columns: minmax(0, 380px);
}
/* Roster line on room cards: which officers are seated. */
.card .seated {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 14px;
}
/* The pair's portraits carry brighter mid-frames (lamp, doorway) than the
   officer three, so their scrim darkens the foot earlier and holds a firmer
   top band — text always sits on dark, the face stays clear in the middle. */
.cards.handsets.pair .card {
  background:
    linear-gradient(180deg, rgba(13, 11, 9, 0.52) 0%, rgba(13, 11, 9, 0.12) 30%, rgba(13, 11, 9, 0.12) 46%, rgba(13, 11, 9, 0.90) 82%, rgba(13, 11, 9, 0.94) 100%),
    var(--card-img) center top / cover no-repeat,
    var(--panel-2);
}
@media (max-width: 1100px) {
  .cards.handsets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}
@media (max-width: 640px) {
  .cards.handsets,
  .cards.handsets.pair { grid-template-columns: minmax(0, 420px); }
}
.cards.handsets .card {
  --card-img: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  border: 1px solid rgba(185, 143, 82, 0.32);
  padding: 58px 30px 42px;
  min-height: 640px;
  background:
    linear-gradient(180deg, rgba(13, 11, 9, 0.40) 0%, rgba(13, 11, 9, 0.06) 32%, rgba(13, 11, 9, 0.06) 58%, rgba(13, 11, 9, 0.88) 100%),
    var(--card-img) center top / cover no-repeat,
    var(--panel-2);
  box-shadow: 0 22px 44px rgba(20, 32, 29, 0.22);
}
/* Brief line up top, portrait clear through the middle, list at the foot. */
.cards.handsets .card ul {
  flex-grow: 0;
  margin-top: auto;
}
.cards.handsets .card li {
  font-size: 0.85rem;
  padding-top: 7px;
  padding-bottom: 7px;
}
.cards.handsets .card p,
.cards.handsets .card li {
  color: rgba(207, 197, 174, 0.78);
}
.cards.handsets .card h3 { color: rgba(241, 233, 216, 0.88); }
.cards.handsets .card p,
.cards.handsets .card li,
.cards.handsets .card h3 {
  text-shadow: 0 1px 10px rgba(10, 16, 13, 0.65);
}
.cards.handsets .card::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: rgba(185, 143, 82, 0.38);
}

.card h3 { font-size: 1.5rem; margin-bottom: 6px; }
.card .role {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.card p { color: var(--ink-dim); font-size: 0.95rem; }
.card ul { list-style: none; margin-top: 18px; flex-grow: 1; }
.card li {
  color: var(--ink-dim);
  font-size: 0.92rem;
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--rule-faint);
  position: relative;
}
.card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 10px;
  height: 1px;
  background: var(--brass);
}
.card .card-foot { margin-top: 24px; }

/* ---------- Statement / pricing line ---------- */

.statement {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-style: italic;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}
.statement-wrap { padding: 72px 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }

/* ---------- Two-column feature ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: start;
}

/* ---------- Appointment CTA ---------- */

.appointment { padding: 96px 0; text-align: center; }
.appointment .testimonial {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--brass-bright);
  max-width: 44ch;
  margin: 0 auto 12px;
}
.appointment .testimonial-cite {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 auto;
}
/* Quotes crossfade from index.html's script; the block is held at the
   tallest quote's height so the form beneath stays put. */
.appointment .testimonial-rotor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 40px;
  transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .appointment .testimonial-rotor { transition: none; }
}
.appointment h2 { margin: 0 auto 18px; }
.appointment p { color: var(--ink-dim); max-width: 52ch; margin: 0 auto 36px; }
/* The kicker is a <p> too; keep it brass and tight under .appointment p. */
.appointment .kicker { color: var(--brass); margin-bottom: 16px; }

/* ---------- Footer ---------- */

.footer { padding: 54px 0 60px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
}
.footer .tag { font-family: var(--serif); font-style: italic; color: var(--ink-dim); }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { color: var(--ink-dim); font-size: 0.8rem; }
.footer a:hover { color: var(--brass-bright); }
.footer .legal,
footer .legal {
  margin-top: 26px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .hero { padding: 72px 0 60px; }
  .section { padding: 60px 0; }
  .nav-links { gap: 16px; }
}

/* The front desk: Speak with the Chief of Staff (About page) */
.chat-panel {
  margin-top: 28px;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 6px;
  overflow: hidden;
}
.chat-log {
  max-height: 380px;
  min-height: 180px;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 15.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-msg.staff {
  align-self: flex-start;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule-faint);
}
.chat-msg.visitor {
  align-self: flex-end;
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.chat-msg.notice {
  align-self: center;
  background: transparent;
  color: var(--ink-faint);
  font-size: 14px;
  text-align: center;
}
.chat-form {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.chat-form input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding: 10px 14px;
  outline: none;
}
.chat-form input:focus { border-color: var(--brass); }
.chat-form button {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px;
  cursor: pointer;
}
.chat-form button:hover { background: var(--btn-hover); }
.chat-form button:disabled { opacity: 0.5; cursor: default; }
.chat-disclosure {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* Briefings subscribe form: same materials as the front-desk chat. */
.subscribe-form {
  max-width: 440px;
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.subscribe-form input[type="text"],
.subscribe-form input[type="email"],
.subscribe-form input[type="tel"],
.subscribe-form textarea {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
}
.subscribe-form input:focus,
.subscribe-form textarea:focus { border-color: var(--brass); }
.subscribe-form textarea { resize: vertical; }
.subscribe-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 6px;
}
.subscribe-choices label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-size: 0.95rem;
  cursor: pointer;
}
.subscribe-choices input { accent-color: var(--brass-bright); }
.subscribe-form .btn.solid {
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}
.subscribe-form .btn.solid:disabled { opacity: 0.5; cursor: default; }
.subscribe-notice { margin-top: 4px; font-size: 0.95rem; color: var(--ink-dim); }
/* Honeypot: off-canvas, invisible to people, filled only by bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* About dropdown in the header */
.nav-drop { position: relative; display: inline-block; }
.nav-drop-toggle {
  color: var(--ink-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-drop-toggle:hover { color: var(--ink); text-decoration: none; }
.nav-drop-toggle.active { color: var(--brass-bright); }
.nav-drop-toggle .caret { font-size: 0.65em; margin-left: 5px; color: var(--brass); }
.nav-drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  min-width: 250px;
  padding: 8px 0 10px;
  z-index: 60;
  box-shadow: 0 14px 32px var(--shadow);
}
.nav-drop-menu a {
  display: block;
  padding: 9px 18px;
  color: var(--ink-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-drop-menu a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.nav-drop-menu a.active { color: var(--brass-bright); }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: block; }


/* Collapsible nav: on desktop the menu container is transparent to layout;
   on phones it becomes a panel opened by the hamburger. */
.nav-menu { display: contents; }
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 32px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink-dim);
}

/* Phones: logo + Book a meeting + hamburger; page links live in a panel.
   The hero image becomes its own band tight under the headline, and the
   CTAs sit side by side below it. On phones the headline sits on paper, so
   the hero's text tokens return to ink here. */
@media (max-width: 720px) {
  /* No backdrop blur on the phone header: a filter makes the header the
     containing block for the fixed full-screen menu. */
  .nav { position: sticky; z-index: 90; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .nav-inner { position: relative; z-index: 86; }
  .nav-toggle { display: flex; }
  .nav-links { gap: 12px; }
  .nav-links > .btn { padding: 8px 14px; font-size: 0.72rem; letter-spacing: 0.08em; }
  /* Sep 25 2026: the menu is a full-screen state, two accordions, one CTA. */
  .nav-menu {
    display: none;
    position: fixed;
    inset: 0;
    padding: 132px 28px 40px;
    flex-direction: column;
    gap: 6px;
    background: var(--paper);
    z-index: 85;
    overflow-y: auto;
  }
  .nav.menu-open .nav-menu { display: flex; }
  .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-menu > a,
  .nav-menu .nav-drop-toggle { display: block; padding: 18px 0; font-size: 1.05rem; letter-spacing: 0.14em; }
  .nav-drop { position: static; border-bottom: 1px solid var(--rule); }
  .nav-drop-toggle { display: flex !important; align-items: center; justify-content: space-between; }
  .nav-drop-toggle .caret { display: inline-block; color: var(--brass); transition: transform 0.2s ease; }
  .nav-drop.open .nav-drop-toggle .caret { transform: rotate(180deg); }
  .nav-drop-menu {
    display: none;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 14px;
  }
  .nav-drop.open .nav-drop-menu { display: block; }
  .nav-drop-menu a { padding: 12px 0 12px 14px; font-size: 0.9rem; letter-spacing: 0.1em; }
  .nav-menu .nav-cta { display: inline-block; align-self: flex-start; margin-top: 28px; padding: 14px 24px; font-size: 0.82rem; letter-spacing: 0.14em; }
  body.nav-lock { overflow: hidden; }

  /* Phones get the same hero as desktop, copy over the still photo, with a
     uniform scrim since a portrait crop has no dark side to lean on. */
  .hero.backdrop { padding: 60px 0 56px; }
  .hero.backdrop::before {
    background:
      linear-gradient(180deg, rgba(13, 11, 9, 0.80) 0%, rgba(13, 11, 9, 0.66) 100%),
      var(--hero-img) var(--hero-pos, center) / cover no-repeat;
  }
  .hero-stack .hero-visual { margin: 26px 0 24px; }
  .hero-stack .hero-kicker { margin-top: 16px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero h1 { font-size: 2.05rem; margin-bottom: 16px; }
  .hero .lede { font-size: 1.1rem; margin-bottom: 0; }
  .hero .actions { margin-top: 24px; }
}

/* ---------- Incoming-call agent cards ----------
   Each officer presents as an incoming iPhone call: portrait full-bleed in
   a phone-shaped frame, caller name up top, decline/accept below. The copy
   and bullets sit under the phone, never over the face. The phone itself is
   a dark object on the paper; the copy beneath it reads in ink. */
.agents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: 48px;
}
.phone {
  position: relative;
  aspect-ratio: 9 / 18.5;
  border-radius: 44px;
  border: 1px solid rgba(185, 143, 82, 0.5);
  overflow: hidden;
  background: var(--card-img) center top / cover no-repeat, var(--panel-2);
  box-shadow: 0 26px 52px rgba(20, 32, 29, 0.28);
}
/* Speaker slit */
.phone::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 20px;
  background: rgba(10, 16, 13, 0.88);
  border-radius: 12px;
  z-index: 3;
}
/* Legibility gradients, top for the caller, bottom for the buttons */
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 16, 13, 0.74) 0%, rgba(10, 16, 13, 0) 30%),
    linear-gradient(0deg, rgba(10, 16, 13, 0.6) 0%, rgba(10, 16, 13, 0) 26%);
  z-index: 1;
}
.call-top {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}
.caller {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--cream);
  line-height: 1.15;
  padding: 0 18px;
}
.call-sub {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 7px;
}
.call-actions {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  z-index: 2;
}
.call-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #f6f2e9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.call-btn.decline { background: #b9544c; }
.call-btn.accept { background: #4e9d5c; animation: call-pulse 2s ease-out infinite; }
@keyframes call-pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 157, 92, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(78, 157, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 157, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .call-btn.accept { animation: none; }
}
/* The copy under the phone */
.agent-copy { margin-top: 24px; }
.agent-copy .role {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 10px;
}
.agent-copy ul { list-style: none; }
.agent-copy li {
  font-size: 0.88rem;
  color: var(--ink-dim);
  padding: 8px 0;
  border-top: 1px solid var(--rule-faint);
}
.agent-copy li:last-child { border-bottom: 1px solid var(--rule-faint); }

/* Executive Office: the Chief's card sits left, her brief sits right, one row. */
.agent-row {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 56px;
  align-items: center;
}
.agent-row .agent-copy { margin-top: 0; }
.agent-row .agent-copy li { font-size: 0.95rem; padding: 11px 0; }
@media (max-width: 720px) {
  .agent-row { grid-template-columns: minmax(240px, 300px); justify-content: center; }
  .agent-row .agent-copy { margin-top: 24px; }
}

/* Test look: the asset set, laid out to pick from (test-look.html only). */
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.set-grid figure { margin: 0; }
.set-grid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 36px rgba(20, 32, 29, 0.08); }
.set-grid.people img { aspect-ratio: 2 / 3; }
.set-grid figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink); opacity: 0.72; }
@media (max-width: 720px) { .set-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- The page is glass over one fixed photo ----------
   Jeff, Sep 13 2026: "make sure the page is transparent so you can always
   see the background pic fixed; that is a rule for all pages." The page's
   photo (the body's --hero-img) is a viewport-fixed layer behind the body,
   and every section keeps its ground colour at partial opacity with a blur,
   so the room shows through as the copy scrolls. Pages without a photo fall
   back to plain paper (an unset --hero-img voids the background shorthand).
   The hero keeps its own clipped copy of the photo for its scrim. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-img) var(--hero-pos, center) / cover no-repeat;
}
.nav, .section, .appointment, .footer {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nav { background: rgba(251, 250, 247, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.section, .appointment, .section.daylight-cards { background: rgba(251, 250, 247, 0.74); } /* Jeff, Sep 24: "a whiter filter as you scroll, like more white, everywhere" */
.section.walnut, .footer { background: rgba(244, 241, 234, 0.76); }
.section.panel { background: rgba(20, 32, 29, 0.60); }
/* Jeff, Sep 14, in three steps: "make the site more see through", "the
   see-through is a 2, we need an 8", "that's too much lol, how about a 5",
   then "kill the halo, make the text contrast and easily readable". So:
   tints near the midpoint, blur a few pixels, no text halo on the page
   surfaces (the handset cards keep their own shadow, where cream sits
   straight on a portrait), and the type itself carries the contrast. On every see-through surface the
   softer grey tokens step up to near-full ink and the brass kickers deepen;
   on the dark panels the dimmed creams step up to full cream. Outlined
   buttons keep a faint fill so they never vanish into the photo. */
.section .card, .section.daylight-cards .card { background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.section .btn:not(.solid), .appointment .btn:not(.solid), .hero.backdrop.daylight .btn:not(.solid) { background: rgba(251, 250, 247, 0.6); }
.section.panel .btn:not(.solid) { background: rgba(20, 32, 29, 0.5); }
.section:not(.panel), .appointment, .footer, .glass, .nav, .hero.backdrop.daylight {
  --ink-dim: #1A2622;
  --ink-faint: #2E3A36;
  --brass: #6B5130;
  --brass-bright: #5A4326;
}
.section.panel {
  --ink-dim: var(--cream);
  --ink-faint: var(--cream-dim);
  --brass: var(--gold-bright);
}

/* Homepage hero in daylight: one glass card carries the eyebrow, the
   headline, the org chart, the subline, the kicker and the button. */
.daylight .copy-card.hero-card { max-width: 820px; }
.daylight .hero-card .chart-card { margin: 26px 0 0; }
.daylight .hero-card .lede { margin-top: 22px; }
.daylight .hero-card .hero-kicker { margin: 22px 0 22px; }

/* The guide: the customer support desk that sits on each home page. A
   launcher in the corner, a panel above it, the same chat components as the
   front-desk window. Added Sep 24 2026, see site/guide.js. */
.guide-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(20, 32, 29, 0.28);
}
.guide-launcher:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.guide-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 94, 0.25);
}
.guide-panel {
  position: fixed;
  right: 20px;
  bottom: 78px;
  z-index: 91;
  width: min(400px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 26px 60px rgba(20, 32, 29, 0.28);
  overflow: hidden;
}
.guide-panel[hidden] { display: none; }
.guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.guide-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
}
.guide-sub {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 2px 0 0;
}
.guide-close {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.guide-close:hover { color: var(--ink); }
.guide-panel .chat-log { max-height: none; min-height: 220px; flex: 1; }
.guide-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-faint);
  background: var(--card);
}
.guide-foot a { color: var(--brass); font-weight: 500; }
@media (max-width: 640px) {
  .guide-launcher { right: 14px; bottom: 14px; }
  .guide-panel {
    right: 8px;
    left: 8px;
    bottom: 70px;
    width: auto;
    max-height: calc(100vh - 90px);
  }
  .guide-panel .chat-log { min-height: 160px; }
}

/* A seat card with no portrait: the handset shows the house's bust glyph on
   the dark panel instead of a face. Sep 24 2026, Jeff's call, the seats are
   described, not pictured. */
.phone.seat {
  --card-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23C9A25E' fill-opacity='0.22'%3E%3Ccircle cx='20' cy='14.5' r='7.5'/%3E%3Cpath d='M7 35 C7 25.5 12 23 20 23 C28 23 33 25.5 33 35 Z'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--card-img) center 38% / 58% no-repeat, radial-gradient(circle at 50% 30%, #23342F 0%, var(--panel-2) 65%);
}

/* Solutions menu group labels (Office Automation, Sales and Marketing,
   Investor Portals), Sep 24 2026. Labels, not links. */
.nav-group {
  display: block;
  padding: 12px 18px 4px;
  color: var(--brass);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-group:first-child { padding-top: 8px; }
@media (max-width: 720px) {
  .nav-group { padding: 12px 26px 2px 34px; }
}

/* Offering categories on the home page, three rows, Sep 24 2026. */
.offer-row { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--rule-faint); }
.offer-row:first-of-type { margin-top: 30px; padding-top: 0; border-top: 0; }
.offer-head {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.offer-row > .intro { font-size: 1.2rem; }
.offer-row .card h3 { font-size: 2rem; line-height: 1.12; margin-bottom: 10px; }
.offer-row .card .role { font-size: 0.82rem; }
.offer-row .card p { font-size: 1.05rem; }
.offer-row .card li { font-size: 1.02rem; }
.offer-row .card .card-foot a { font-size: 1.05rem; }
@media (max-width: 640px) {
  .offer-row .card h3 { font-size: 1.65rem; }
}

/* The desk mounted inline (home page, beside "Private agentic teams") and
   the voice row that lets a visitor talk to the same brain. Sep 24 2026. */
.guide-panel.inline {
  position: static;
  width: auto;
  max-height: none;
  box-shadow: 0 18px 44px rgba(20, 32, 29, 0.14);
}
.guide-panel.inline .chat-log { min-height: 240px; max-height: 340px; flex: none; }
.guide-live {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  padding-top: 6px;
}
.guide-live::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(201, 162, 94, 0.25);
}
.guide-voice {
  border-top: 1px solid var(--rule-faint);
  padding: 14px 14px 12px;
  background: var(--card);
  display: grid;
  gap: 10px;
}
.guide-vlabel {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.guide-voice label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-faint);
  cursor: pointer;
}
.guide-voice label input { margin-top: 3px; accent-color: var(--brass); }
.guide-vrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.guide-vrow .btn { padding: 9px 16px; font-size: 13.5px; }
.guide-vrow .btn:disabled { opacity: 0.45; cursor: default; }
.guide-vrow .btn[hidden] { display: none; }
.guide-vstate { margin: 0; font-size: 13px; color: var(--ink-faint); }
.chat-msg.spoken { border-style: dashed; }
.chat-msg.partial { opacity: 0.6; }
.idea-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 860px) {
  .idea-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* Automated Office hero, Jeff asked for the headline 30% smaller, Sep 24 2026. */
.hero h1.h1-small { font-size: clamp(1.7rem, 3.8vw, 2.8rem); max-width: 26ch; }

/* Headline rotors on the Automated Office page share the home page's slot styling. */
.hero h1 .rotor { display: inline-block; white-space: nowrap; }

/* Solutions menu: Support Agents and Agentic Data Rooms sit under Business
   Development, indented, Sep 24 2026. */
.nav-drop-menu a.nav-sub { padding-left: 34px; font-size: 0.76rem; color: var(--ink-faint); }
.nav-drop-menu a.nav-sub::before { content: "\2013"; margin-right: 8px; color: var(--brass); }
@media (max-width: 720px) {
  .nav-drop-menu a.nav-sub { padding-left: 62px; }
}

/* Automated Office seat sections, Sep 24 2026: the copy sits on a highlighted
   panel, and the feature lists read as a checklist. */
.seat-note {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  border-radius: 8px;
  padding: 28px 30px;
  box-shadow: 0 14px 34px rgba(20, 32, 29, 0.08);
}
.seat-note h2 { margin-bottom: 0; }
.seat-note .intro { max-width: none; }
ul.features { list-style: none; margin: 6px 0 0; padding: 0; }
ul.features li {
  position: relative;
  padding: 12px 0 12px 40px;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-faint);
}
ul.features li:last-child { border-bottom: 0; }
ul.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 26px;
  height: 26px;
  background: url("assets/cabinet-emblem.png") center / contain no-repeat;
}

/* Seat titles on the Automated Office page: much bigger, bolder. Sep 24 2026. */
.section h2.seat-title, .seat-title {
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: none;
}
.seat-note { display: flex; align-items: center; min-height: 100%; }

/* Large eyebrow, now used by the Media Agent page hero. The Automated Office hero dropped its eyebrow Oct 8 2026. */
.eyebrow.eyebrow-lg { font-size: 1.05rem; letter-spacing: 0.22em; }

/* The elevation path on the Automated Office page, Sep 24 2026: one frosted
   panel, three levels, the third grows as it scrolls into view. */
.elev-sub { font-size: 1.2rem; margin-bottom: 34px; }
.elevation {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(20, 32, 29, 0.12);
  padding: 10px 0;
  overflow: hidden;
}
.level {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 28px;
  padding: 38px 44px;
  align-items: start;
  transition: transform 0.7s ease, background 0.7s ease, box-shadow 0.7s ease;
}
.lv-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--brass);
  letter-spacing: 0.04em;
  padding-top: 8px;
}
.level h3 { font-size: 2rem; line-height: 1.1; margin: 0 0 8px; }
.lv-line { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); margin: 0 0 14px; }
.lv-chips {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
  line-height: 1.9;
}
.lv-plus { color: var(--ink-faint); margin-right: 6px; }
.lv-close { color: var(--ink-dim); margin: 0; font-size: 1.02rem; }
.lv-arrow {
  text-align: center;
  color: var(--brass);
  font-size: 1.5rem;
  line-height: 1;
  padding: 2px 0;
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
  background: rgba(244, 241, 234, 0.5);
}
.level.lv-top {
  background: linear-gradient(180deg, rgba(201, 162, 94, 0.08), rgba(201, 162, 94, 0.16));
  padding: 46px 44px 50px;
}
.level.lv-top h3 { font-size: 2.5rem; }
.level.lv-top .lv-line { font-size: 1.4rem; }
.level.lv-top.in-view {
  transform: scale(1.015);
  box-shadow: inset 0 0 0 1px rgba(140, 109, 63, 0.35), 0 24px 50px rgba(20, 32, 29, 0.12);
}
@media (max-width: 640px) {
  .level { grid-template-columns: 1fr; gap: 6px; padding: 28px 22px; }
  .level.lv-top { padding: 34px 22px 38px; }
  .level h3 { font-size: 1.7rem; }
  .level.lv-top h3 { font-size: 2rem; }
  .lv-num { padding-top: 0; }
}

/* Tier selectors above the detail panel, Sep 24 2026. */
.tier-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.tier-tab {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 24px 20px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.tier-tab:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 32, 29, 0.10); }
.tier-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.tier-tab.is-active {
  border-color: var(--brass);
  background: linear-gradient(180deg, #FFFFFF, rgba(201, 162, 94, 0.10));
  box-shadow: 0 18px 40px rgba(20, 32, 29, 0.12), inset 0 -4px 0 var(--brass);
}
.tier-name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.tier-line { font-size: 0.98rem; color: var(--ink-dim); }
.tier-explore {
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.tier-detail .level { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.tier-detail .level.in-view { opacity: 1; transform: none; }
.tier-detail .level[hidden] { display: none; }
.tier-detail .level.lv-top.in-view { transform: none; }
.lv-body ul.features { margin: 4px 0 16px; max-width: 720px; }
.lv-close a { color: var(--brass); font-weight: 500; margin-left: 6px; white-space: nowrap; }
@media (max-width: 860px) {
  .tier-tabs { grid-template-columns: 1fr; }
}

/* Conversation to action, inside the tier detail panel. Sep 24 2026. */
.demo-head { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin: 20px 0 14px; }
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin: 0 0 18px;
  max-width: 860px;
}
.demo-phone {
  background: var(--panel);
  border-radius: 24px;
  padding: 22px 20px 20px;
  box-shadow: 0 22px 44px rgba(20, 32, 29, 0.22);
}
.demo-you {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.demo-bubble {
  margin: 0;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(201, 162, 94, 0.25);
  border-radius: 16px 16px 16px 4px;
  padding: 14px 16px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.5;
}
.demo-done { list-style: none; margin: 0; padding: 0; }
.demo-done li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-faint);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.demo-done li:last-child { border-bottom: 0; }
.level.in-view .demo-done li { opacity: 1; transform: none; }
.level.in-view .demo-done li:nth-child(1) { transition-delay: 0.25s; }
.level.in-view .demo-done li:nth-child(2) { transition-delay: 0.6s; }
.level.in-view .demo-done li:nth-child(3) { transition-delay: 0.95s; }
.level.in-view .demo-done li:nth-child(4) { transition-delay: 1.3s; }
.tier-tab { padding-bottom: 24px; }
@media (max-width: 720px) {
  .demo { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-done li { opacity: 1; transform: none; transition: none; }
}

/* Chat and Call in each tier panel, and the fourth screen the desk slides
   into. Sep 24 2026. */
.lv-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.lv-actions .btn { min-width: 120px; text-align: center; }
.level.lv-desk .lv-body { max-width: 720px; }
.lv-back {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 44px; height: 44px;
  font-size: 1.2rem;
  color: var(--brass);
  cursor: pointer;
}
.lv-back:hover { border-color: var(--brass); background: var(--card); }
.lv-desk-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 6px 0 14px;
}
.desk-slot[hidden] { display: none; }
.guide-talk.pulse { animation: guide-pulse 1.3s ease-in-out 2; }
@keyframes guide-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 94, 0.0); }
  50% { box-shadow: 0 0 0 10px rgba(201, 162, 94, 0.28); }
}

/* "What it works with": a 2 x 3 editorial grid, thin rules, small gold
   icons, room to breathe. Sep 24 2026. */
.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.work {
  padding: 34px 30px 36px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.work-ic {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 18px;
  display: block;
}
.work h3 { font-size: 1.45rem; margin: 0 0 8px; }
.work p { margin: 0; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 860px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .works { grid-template-columns: 1fr; }
  .work { padding: 26px 22px 28px; }
}

/* Media Agent page, Sep 24 2026: a studio feel on the same Cabinet DNA. */
.hero.film { position: relative; overflow: hidden; }
.hero.film .hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; filter: saturate(0.9);
}
.hero.film::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,32,29,0.28), rgba(20,32,29,0.55)); z-index: 1; }
.hero.film .wrap { position: relative; z-index: 2; }
.hero.film .lede { max-width: 40ch; }
.flow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 640px; }
.flow-step {
  padding: 12px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.flow-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.flow-chips { margin: 4px 0 0; font-size: 0.92rem; color: var(--brass); letter-spacing: 0.04em; }
.flow-arrow { color: var(--brass); font-size: 1.2rem; line-height: 1; padding: 4px 22px; opacity: 0; transition: opacity 0.4s ease; }
.in-view .flow-step, .in-view .flow-arrow { opacity: 1; transform: none; }
.in-view .flow > :nth-child(1) { transition-delay: 0.1s; }
.in-view .flow > :nth-child(2) { transition-delay: 0.3s; }
.in-view .flow > :nth-child(3) { transition-delay: 0.5s; }
.in-view .flow > :nth-child(4) { transition-delay: 0.7s; }
.in-view .flow > :nth-child(5) { transition-delay: 0.9s; }
.in-view .flow > :nth-child(6) { transition-delay: 1.1s; }
.in-view .flow > :nth-child(7) { transition-delay: 1.3s; }
.in-view .flow > :nth-child(8) { transition-delay: 1.5s; }
.in-view .flow > :nth-child(9) { transition-delay: 1.7s; }
.flow.bridge .flow-step { background: var(--paper-2); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.step { padding: 30px 28px 34px 0; border-right: 1px solid var(--rule); margin-right: 28px; }
.step:last-child { border-right: 0; margin-right: 0; }
.step-num { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin: 0 0 12px; }
.step h3 { font-size: 1.4rem; margin: 0 0 10px; }
.step p { margin: 0; color: var(--ink-dim); }
.statement.huge { font-size: clamp(2rem, 5vw, 3.6rem); font-style: normal; line-height: 1.1; }
.demo.wide { max-width: 980px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.demo-done .tag {
  display: inline-block; min-width: 86px; margin-right: 12px;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px; text-align: center;
}
.twin { display: grid; grid-template-columns: minmax(0, 0.8fr) 48px minmax(0, 1.2fr); gap: 20px; align-items: center; margin-top: 30px; }
.twin-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin: 0 0 12px; }
.twin-you { background: var(--panel); border-radius: 18px; padding: 26px 24px 24px; color: var(--cream); }
.twin-you .twin-label { color: var(--gold); }
.twin-note { margin: 16px 0 0; color: var(--cream-dim); font-size: 0.98rem; line-height: 1.5; }
.wave { display: flex; align-items: center; gap: 4px; height: 64px; }
.wave i { display: block; width: 4px; border-radius: 2px; background: var(--gold); opacity: 0.85; height: 30%; animation: wave 1.6s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: 0.2s; height: 70%; }
.wave i:nth-child(3n+1) { animation-delay: 0.4s; height: 45%; }
.wave i:nth-child(4n) { animation-delay: 0.6s; height: 90%; }
.wave i:nth-child(5n) { animation-delay: 0.1s; height: 55%; }
@keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.twin-arrow { text-align: center; color: var(--brass); font-size: 2rem; }
.twin-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; }
.twin-list li { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.filmstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 26px; padding: 8px; background: var(--panel); border-radius: 10px; }
.filmstrip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; opacity: 0.92; }
.report { background: var(--panel); color: var(--cream); border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 26px 60px rgba(20,32,29,0.22); }
.report-head { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; display: flex; justify-content: space-between; }
.report-head span { color: var(--cream-faint); letter-spacing: 0.12em; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 12px; margin-bottom: 18px; }
.report-grid b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; color: var(--cream); line-height: 1; }
.report-grid span { display: block; font-size: 0.8rem; color: var(--cream-dim); margin-top: 6px; }
.report-line { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(236,226,205,0.14); font-size: 0.98rem; color: var(--cream); }
.report-line span { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .step:last-child { border-bottom: 0; }
  .twin { grid-template-columns: 1fr; }
  .twin-arrow { transform: rotate(90deg); }
  .demo.wide { grid-template-columns: 1fr; }
  .filmstrip { grid-template-columns: repeat(5, 1fr); }
}

/* Founder line under the idea, visually secondary. Sep 24 2026. */
.founder-line { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-faint); margin: 0; }
.founder-line span { display: block; font-family: var(--sans); font-style: normal; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-top: 6px; }

/* Specialized agents grid, four across, same editorial rules. Sep 24 2026. */
.works.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.work { display: block; color: inherit; text-decoration: none; transition: background 0.25s ease; }
a.work:hover { background: var(--paper-2); text-decoration: none; }
.work-go { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.appointment h2.cta-line { max-width: 24ch; text-wrap: balance; }
@media (max-width: 640px) { .appointment h2.cta-line { font-size: 1.7rem; max-width: 16ch; line-height: 1.2; } }
@media (max-width: 860px) { .works.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .works.four { grid-template-columns: 1fr; } }

/* The in-menu CTA exists for the phone panel only. */
.nav-menu .nav-cta { display: none; }
@media (max-width: 720px) { .nav-menu .nav-cta { display: inline-block; } }

/* Media Agent page, Sep 25 2026: section navigator, output list, the
   opportunity chain, and the specialized-agent tabs. */
.subnav {
  position: sticky; top: 0; z-index: 9;
  background: rgba(251, 250, 247, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.subnav-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 0; padding-bottom: 0; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto; padding: 14px 14px; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.is-current { color: var(--brass); border-bottom-color: var(--brass); }
.hero-sub { font-family: var(--sans); font-size: 1rem; color: var(--ink-dim); margin: 6px 0 24px; max-width: 42ch; }
.hero.film .hero-sub { color: var(--ink); }
.demo-done.becomes li::before { content: "\2192"; color: var(--brass); font-size: 1.2rem; margin-right: 4px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.chain-step {
  padding: 12px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.chain-arrow { color: var(--brass); font-size: 1.2rem; }
.level.plain { display: block; padding: 34px 40px; }
.level.plain .lv-body.wide { max-width: none; }
.level.plain .lv-body.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.level.plain .lv-body h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.level.plain .lv-body .cards { margin-top: 8px; }
@media (max-width: 640px) { .level.plain { padding: 26px 22px; } }

/* Phone header: no backdrop filter, ever. A filter makes the sticky header
   the containing block for the fixed full-screen menu, which then only
   covers the header. Stated last so the glass rules above cannot win. */
@media (max-width: 720px) {
  .nav, .nav.menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (max-width: 720px) {
  /* The bar stays above the full-screen panel: wordmark, header button, and
     the hamburger (now an X) are siblings of the panel in one stacking context. */
  .wordmark, .nav-links > .btn, .nav-toggle { position: relative; z-index: 88; }
  .nav.menu-open .nav-links > .btn { visibility: hidden; }
}

/* The demo bubble reads as an iPhone in dark mode, Jeff's call Sep 25 2026:
   near-black screen, iMessage blue, white text, the agent's name up top,
   "Delivered" underneath. */
.demo-phone {
  background: #000;
  border: 7px solid #1C1C1E;
  border-radius: 30px;
  padding: 12px 12px 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
}
.demo-you {
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
  color: #8E8E93;
  text-align: center;
  margin: 2px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2C2C2E;
}
.demo-bubble {
  position: relative;
  margin: 0 0 0 auto;
  max-width: 86%;
  background: #0A84FF;
  border: 0;
  border-radius: 20px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.demo-bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: #0A84FF;
  border-radius: 0 0 0 14px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.demo-phone::after {
  content: "Delivered";
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: #8E8E93;
  margin: 6px 8px 0 0;
}

/* Tighter desk, Jeff's call Sep 25 2026: half the footprint, no footer. */
.guide-panel.inline { max-width: 540px; }
.guide-panel.inline .chat-log { min-height: 120px; max-height: 240px; padding: 14px 16px; gap: 8px; }
.guide-panel.inline .guide-head { padding: 12px 16px 10px; }
.guide-panel.inline .chat-form { padding: 10px 12px; }
.guide-panel.inline .chat-form input { padding: 8px 12px; font-size: 15px; }
.guide-panel.inline .chat-form button { padding: 8px 16px; }
.guide-panel.inline .guide-voice { padding: 10px 12px 12px; gap: 8px; }
.guide-panel.inline .guide-voice label { font-size: 12.5px; }
.guide-panel.inline .chat-msg { font-size: 14.5px; padding: 8px 12px; }
.level.lv-desk .lv-body { max-width: 540px; }

/* Specialized agents: raised cards like the selectors, Jeff's call Sep 25 2026. */
#specialized .works { border: 0; gap: 18px; }
#specialized .work {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 14px 30px rgba(20, 32, 29, 0.10);
  padding: 28px 26px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#specialized a.work:hover { transform: translateY(-2px); border-color: var(--brass); box-shadow: 0 18px 40px rgba(20, 32, 29, 0.14); background: #FFFFFF; }

/* A live conversation follows the visitor: the inline desk lifts into the
   corner, minimizes to its header and Talk row, docks back on request.
   Sep 25 2026. */
.guide-head-tools { display: flex; align-items: center; gap: 8px; }
.guide-min, .guide-dock {
  display: none;
  width: 28px; height: 28px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--card); color: var(--ink-dim);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.guide-min:hover, .guide-dock:hover { color: var(--ink); border-color: var(--brass); }
.guide-panel.inline.floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(400px, calc(100vw - 32px));
  max-width: none;
  max-height: min(70vh, 640px);
  z-index: 91;
  box-shadow: 0 26px 60px rgba(20, 32, 29, 0.32);
  animation: guide-rise 0.35s ease;
}
.guide-panel.inline.floating .guide-min, .guide-panel.inline.floating .guide-dock { display: inline-block; }
.guide-panel.inline.floating .chat-log { max-height: 260px; }
.guide-panel.min .chat-log, .guide-panel.min .chat-form { display: none; }
.guide-panel.min .guide-voice { border-top: 0; }
@keyframes guide-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-placeholder {
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--ink-faint);
  font-size: 0.95rem;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.guide-placeholder p { margin: 0; }
@media (max-width: 640px) {
  .guide-panel.inline.floating { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 60vh; }
}

/* ---------------------------------------------------------------------------
   Oct 8 2026, Jeff. The Automated Office home page lost its "Who we are"
   eyebrow, its subline became a scrolling ticker of things to say to the
   Cabinet, the Executive Partner seat was retired, the 01 and 02 numerals
   came off the ladder panels, and Try it now joined Chat and Call.
   Everything here is scoped to the ticker, #ladder and .lv-actions so the
   Media Agent page, which shares the tier classes, is untouched.
   ------------------------------------------------------------------------- */

/* The hero ticker, one request at a time. The list carries the .lede class so
   it wears the same face the old subline did. Every phrase sits in one grid
   cell, so the cell is as tall as the longest and nothing jumps when they
   swap. All of them stay in the page for screen readers, only opacity moves. */
.vt { margin: 0; }
.hero .lede.vt-list { display: grid; list-style: none; margin: 0; padding: 0; max-width: none; }
.vt-list li {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.vt-list li.is-on { opacity: 1; transform: none; pointer-events: auto; }
.vt-ctl { display: flex; justify-content: flex-end; margin-top: 14px; }
.vt-toggle {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  min-height: 32px;
  padding: 0 14px;
  cursor: pointer;
}
.vt-toggle[hidden] { display: none; }
.vt-toggle:hover { border-color: var(--brass); background: rgba(255, 255, 255, 0.7); }
.vt-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vt-list li { transition: none; transform: none; } }

/* The ladder is two seats now and the panels carry no numerals. */
#ladder .tier-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { #ladder .tier-tabs { grid-template-columns: 1fr; } }
#ladder .tier-detail .level:not(.lv-desk) { grid-template-columns: minmax(0, 1fr); }

/* Chat, Call and Try it now share one height whether they are buttons or links. */
.lv-actions .btn { line-height: 1.3; }
.lv-actions .btn.try { background: var(--brass); border-color: var(--brass); color: #FBFAF7; }
.lv-actions .btn.try::after { content: " \2192"; content: " \2192" / ""; }
.lv-actions .btn.try:hover { background: var(--btn-bg, #14201D); border-color: var(--btn-bg, #14201D); color: #FBFAF7; }
.lv-actions .btn.try:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* The outlined Call button sat on a translucent cream fill that beat the hover
   rule, so its cream hover label vanished. Same brass fill as every .btn hover. */
.lv-actions .btn:not(.solid):not(.try):hover { background: var(--brass); border-color: var(--brass); color: #FBFAF7; }
/* Anchored sections (Try it now lands on #appointment) clear the sticky header. */
#appointment, #trial { scroll-margin-top: 96px; }
@media (max-width: 720px) { #appointment, #trial { scroll-margin-top: 170px; } }
@media (max-width: 640px) {
  .lv-actions .btn { flex: 1 1 120px; }
  .lv-actions .btn.try { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Oct 9 2026, Jeff: the 7 day free trial form lives at the bottom of the home
   page and /pilot, and Free Trial is its own link in the navigation.
   ------------------------------------------------------------------------- */

/* The Free Trial link wears the brass so it reads as the way in. */
.nav-links a.nav-link { color: var(--brass-bright); }
.nav-links a.nav-link:hover { color: var(--ink); }
@media (max-width: 720px) {
  .nav-menu > a.nav-link { border-bottom: 1px solid var(--rule); }
}

/* Home page: the call to action and the trial sit as one closing band. */
.appointment.cta-close { padding-bottom: 36px; }
.appointment.trial { padding-top: 36px; }
.appointment.trial .wrap { border-top: 1px solid var(--rule); padding-top: 64px; }
@media (max-width: 720px) { .appointment.trial .wrap { padding-top: 44px; } }

/* The environment the visitor works in, captured with the request */
.env { border: 0; padding: 0; margin: 6px 0 4px; min-width: 0; text-align: left; }
.env legend { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); padding: 0; margin: 0 0 6px; }
.appointment .env .env-help { max-width: none; margin: 0 0 16px; text-align: left; font-size: 0.95rem; color: var(--ink-dim); }
.env-group { margin: 0 0 16px; }
.appointment .env .env-label { max-width: none; margin: 0 0 8px; text-align: left; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.env-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.env-opt { position: relative; display: inline-flex; }
.env-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.env-opt span { display: inline-block; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); font-family: var(--sans); font-size: 14px; line-height: 1.2; color: var(--ink); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.env-opt:hover span { border-color: var(--brass); }
.env-opt input:checked + span { background: var(--btn-bg, #14201D); border-color: var(--btn-bg, #14201D); color: var(--btn-fg, #FBFAF7); }
.env-opt input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.subscribe-form .env { max-width: 100%; }
.env input[type="text"] { width: 100%; box-sizing: border-box; margin-top: 2px; }