/* ============================================================
   Montar Digital, full-service agency layer
   Loaded after pages.css on the homepage, What we do, About, FAQ
   and /crm. Brand standard v2.1, Paper & Night: night islands with
   an inset gold frame, an editorial capability index with numbers
   in rings, real client work. The v2 component pass is at the end.
   ============================================================ */

/* ---------------------------------------------------------- night islands
   The page's big moments (hero, the one result, the close). A rounded
   night panel set on the paper with margin around it, one soft pool of
   warm light, film grain and a thin gold frame inset from the edge. In
   dark mode the page is already night, so the islands run full bleed and
   only the frame marks them. The night scope in styles.css points the
   shared tokens at the night palette inside. */
.navy {
  --nv-bg: var(--night);
  --nv-bg-2: var(--night-2);
  --nv-card: var(--night-3);
  --nv-ink: var(--ivory);
  --nv-soft: var(--ivory-2);
  --nv-line: var(--night-line);
  --nv-accent: var(--champagne);
  --nv-hot: var(--champagne);
  position: relative;
  color: var(--nv-ink);
  background: var(--grain), var(--night);
  isolation: isolate;
  margin: var(--island-m);
  border-radius: var(--island-r);
  overflow: clip;
}
/* One pool of warm light, and a soft vignette at the edges. */
.navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 42%, rgba(201, 169, 107, 0.1), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.55));
  border-radius: inherit;
}
/* The inset frame. */
.navy::after {
  content: ""; position: absolute; inset: clamp(8px, 1.2vw, 16px); z-index: -1; pointer-events: none;
  border: 1px solid var(--gold-soft); border-radius: var(--island-r-dark); opacity: 0.6;
}
.navy .eyebrow { color: var(--nv-accent); }
.navy h1, .navy h2, .navy h3 { color: var(--nv-ink); }
.navy :focus-visible { outline-color: var(--champagne); box-shadow: none; }


/* ---------------------------------------------------------- hero */
.ag-hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) 0; overflow: hidden; }
.ag-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
.ag-hero-title {
  margin-top: 1.1rem;
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.7rem);
  font-weight: 800; letter-spacing: -0.042em; line-height: 0.96;
}
.ag-hero-title .soft { display: block; color: var(--nv-soft); font-weight: 700; }
.ag-hero-lede {
  margin-top: 1.5rem; max-width: 46ch;
  font-size: var(--text-lede); line-height: 1.55; color: var(--nv-soft);
}
.ag-hero-lede strong { color: var(--nv-ink); font-weight: 600; }
.ag-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }
.ag-hero-note { margin-top: 1.1rem; font-size: 0.86rem; color: var(--nv-soft); display: flex; align-items: center; gap: 0.55rem; }
.ag-hero-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nv-hot); flex: none; }

/* The stage: a real client site in a browser frame, with the CRM and a
   result layered over it. Three surfaces, three depths. */
.ag-stage { position: relative; padding: 1.5rem 0 4.5rem 2.5rem; }
.ag-frame {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--night-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 18px 36px -24px rgba(0, 0, 0, 0.7);
}
.ag-frame-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; background: var(--night-3); }
.ag-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--night-line-2); }
.ag-frame-url {
  margin-left: 0.6rem; padding: 0.2rem 0.75rem; border-radius: 6px;
  font-size: 0.72rem; color: var(--ivory-2); background: var(--night); letter-spacing: 0.01em;
}
.ag-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; }

.ag-float {
  position: absolute; z-index: 2;
  background: var(--nv-card); color: var(--nv-ink);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 50px -24px rgba(0, 0, 0, 0.85);
}
.ag-float-k { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nv-soft); }
.ag-float-v { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* lead card, bottom left */
.ag-lead { left: 0; bottom: 0; width: min(62%, 290px); padding: 1rem 1.05rem; }
.ag-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ag-lead-stage { font-size: 0.68rem; font-weight: 700; padding: 0.2em 0.65em; border-radius: 99px; color: var(--go); background: rgba(95, 174, 124, 0.16); border: 1px solid rgba(95, 174, 124, 0.35); }
.ag-lead-name { margin-top: 0.7rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.ag-lead-svc { font-size: 0.8rem; color: var(--nv-soft); }
.ag-lead-rows { display: grid; gap: 0.35rem; margin-top: 0.75rem; font-size: 0.76rem; }
.ag-lead-rows div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.ag-lead-rows dt { color: var(--nv-soft); }
.ag-lead-rows dd { margin: 0; font-weight: 600; text-align: right; }

/* result chip, top right */
.ag-result { right: -0.5rem; top: 0; padding: 0.95rem 1.1rem; }
.ag-result .ag-float-v { font-size: 2rem; font-variant-numeric: tabular-nums; }
/* The stamp: the plate's clipped corners, once per view, holding the one
   number that matters. A solid bone plate on the midnight island, the way
   the proposal cover carries its goal. Paper colours in both themes. */
.ag-result {
  clip-path: var(--chamfer); border: 0; border-radius: 0;
  background: var(--paper-fixed); color: var(--ink-fixed); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ag-result .ag-float-k, .ag-result .ag-result-sub { color: var(--ink-soft-fixed); }
.ag-result-sub { display: block; margin-top: 0.35rem; font-size: 0.76rem; color: var(--nv-soft); }

/* text-back chip, right edge */
.ag-text { right: 1.2rem; bottom: 2.2rem; max-width: 230px; padding: 0.8rem 0.9rem; font-size: 0.78rem; line-height: 1.4; }
.ag-text p { margin-top: 0.4rem; padding: 0.5rem 0.65rem; border-radius: 10px 10px 10px 3px; background: rgba(201, 169, 107, 0.1); color: var(--nv-ink); }

/* capability rail along the bottom of the hero */
.ag-rail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  border-top: 1px solid var(--nv-line);
}
.ag-rail li { padding: 1.15rem 1rem 1.4rem 0; font-size: 0.9rem; font-weight: 600; color: var(--nv-ink); }
.ag-rail li + li { padding-left: 1rem; border-left: 1px solid var(--nv-line); }
.ag-rail span { display: block; margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--nv-soft); }

@media (max-width: 980px) {
  .ag-hero-grid { grid-template-columns: 1fr; }
  .ag-stage { max-width: 620px; padding-left: 1.5rem; }
  .ag-rail { grid-template-columns: repeat(3, 1fr); }
  .ag-rail li:nth-child(4) { padding-left: 0; border-left: 0; }
  .ag-rail li:nth-child(n + 4) { border-top: 1px solid var(--nv-line); }
}
@media (max-width: 560px) {
  .ag-stage { padding: 4.4rem 0 0 0; }
  .ag-lead { width: 72%; }
  .ag-result { right: -0.25rem; top: -0.4rem; padding: 0.75rem 0.85rem; }
  .ag-result .ag-float-v { font-size: 1.6rem; }
  .ag-text { display: none; }
  .ag-rail { grid-template-columns: repeat(2, 1fr); }
  .ag-rail li:nth-child(n) { padding-left: 0; border-left: 0; border-top: 1px solid var(--nv-line); }
  .ag-rail li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--nv-line); }
  .ag-rail li:nth-child(-n + 2) { border-top: 0; }
}

/* ---------------------------------------------------------- capability index
   A numbered list, not a card grid. Each row is a link into the service on
   What we do. Hover tints the row and moves the arrow; nothing reflows. */
.ag-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ag-split-head { position: sticky; top: var(--sticky-top); }
/* On a short window the column is taller than the room under the header,
   so it would park with its foot cut off: let it scroll instead. */
@media (max-height: 760px) { .ag-split-head { position: static; } }
.ag-split-head h2 { margin-top: 0.9rem; font-size: var(--text-h2); }
.ag-split-head p { margin-top: 1rem; color: var(--ink-soft); font-size: var(--text-lede); line-height: 1.55; max-width: 34ch; }
.ag-split-head .link-arrow { margin-top: 1.6rem; }

.ag-index { border-top: 1px solid var(--hair-2); }
.ag-index li { border-bottom: 1px solid var(--hair-2); }
.ag-index a {
  position: relative;
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 0.3rem 1.2rem; align-items: start;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem) 0.6rem;
  transition: background-color var(--duration) var(--ease);
}
.ag-index a:hover { background: color-mix(in oklab, var(--clay) 6%, transparent); }
.ag-num { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; color: var(--ink-soft); padding-top: 0.45rem; transition: color var(--duration); }
.ag-index a:hover .ag-num { color: var(--trust); }
.ag-index h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.05rem); letter-spacing: -0.03em; }
.ag-index p { grid-column: 2; margin-top: 0.3rem; color: var(--ink-soft); max-width: 52ch; line-height: 1.55; }
.ag-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.ag-tags span { font-size: 0.75rem; font-weight: 600; padding: 0.3em 0.75em; border-radius: 99px; color: var(--ink-soft); border: 1px solid var(--hair-2); background: var(--card); }
.ag-arrow { grid-column: 3; grid-row: 1; align-self: center; font-size: 1.3rem; color: var(--ink-soft); transition: transform var(--duration) var(--ease), color var(--duration); }
.ag-index a:hover .ag-arrow { transform: translateX(6px); color: var(--trust); }
.ag-new { margin-left: 0.6rem; vertical-align: middle; font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 99px; color: var(--card); background: var(--trust); }

@media (max-width: 900px) {
  .ag-split { grid-template-columns: 1fr; }
  .ag-split-head { position: static; }
}
@media (max-width: 560px) {
  .ag-index a { grid-template-columns: 2.2rem 1fr; padding-inline: 0; }
  .ag-arrow { display: none; }
}

/* ---------------------------------------------------------- the system */
.ag-system { background: var(--paper-2); border-block: 1px solid var(--hair); }
.ag-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: flow; }
.ag-flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 1px;
  background: linear-gradient(90deg, var(--hair-2), var(--clay));
}
.ag-flow li { position: relative; padding-top: 3rem; }
.ag-flow li::before {
  content: ""; position: absolute; top: 0.6rem; left: 0;
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--clay);
}
.ag-flow li:last-child::before { background: var(--action); border-color: var(--action); }
.ag-flow-k { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.ag-flow h3 { margin-top: 0.5rem; font-size: 1.3rem; }
.ag-flow p { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ag-flow { grid-template-columns: 1fr; gap: 0; padding-left: 2rem; }
  .ag-flow::before { left: 0.45rem; right: auto; top: 0.6rem; bottom: 0.6rem; width: 1px; height: auto; background: linear-gradient(180deg, var(--hair-2), var(--clay)); }
  .ag-flow li { padding: 0 0 1.8rem; }
  .ag-flow li::before { left: -2rem; top: 0.15rem; }
}

/* ---------------------------------------------------------- selected work
   Two client sites, staggered so the second sits lower: an editorial
   spread rather than two equal tiles. */
.ag-work { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.ag-work-item:nth-child(2) { margin-top: clamp(3rem, 8vw, 7rem); }
.ag-work-item .ag-frame { box-shadow: 0 0 0 1px var(--hair), 0 36px 70px -44px color-mix(in oklab, var(--ink) 75%, transparent); transition: transform var(--duration) var(--ease); }
.ag-work-item a:hover .ag-frame { transform: translateY(-4px); }
.ag-work-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-top: 1.2rem; }
.ag-work-meta h3 { font-size: var(--text-h3); }
.ag-work-meta span { font-size: 0.86rem; color: var(--ink-soft); }
.ag-work-item p { margin-top: 0.5rem; color: var(--ink-soft); max-width: 50ch; line-height: 1.55; }
.ag-work-item .ag-tags { margin-top: 0.9rem; }
@media (max-width: 820px) {
  .ag-work { grid-template-columns: 1fr; }
  .ag-work-item:nth-child(2) { margin-top: 1rem; }
}

/* ---------------------------------------------------------- platform */
.ag-platform { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ag-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2rem; border-top: 1px solid var(--hair-2); }
.ag-feats li { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--hair-2); }
.ag-feats li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--hair-2); }
.ag-feats strong { display: block; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.01em; }
.ag-feats span { display: block; margin-top: 0.2rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 900px) { .ag-platform { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .ag-feats { grid-template-columns: 1fr; }
  .ag-feats li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* text thread mock: the missed-call text back, as the customer sees it */
.ag-thread {
  max-width: 380px; margin-inline: auto; padding: 1.1rem;
  background: var(--card); border: 1px solid var(--hair); border-radius: 22px;
}
.ag-thread-top { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--hair); font-size: 0.82rem; }
.ag-thread-top b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 0.8rem; }
.ag-thread-top strong { display: block; font-size: 0.9rem; }
.ag-thread-top span { color: var(--ink-soft); font-size: 0.76rem; }
.ag-thread ol { display: grid; gap: 0.55rem; padding-top: 0.9rem; list-style: none; }
.ag-sys { justify-self: center; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); padding: 0.25em 0.8em; border-radius: 99px; background: var(--card-2); border: 1px solid var(--hair); }
.ag-msg { max-width: 82%; padding: 0.6rem 0.8rem; font-size: 0.86rem; line-height: 1.4; border-radius: 16px; }
.ag-msg--out { justify-self: end; color: var(--paper); background: var(--ink); border-bottom-right-radius: 5px; }
.ag-msg--in { justify-self: start; background: var(--card-2); border: 1px solid var(--hair); border-bottom-left-radius: 5px; }
.ag-quote-card { justify-self: end; width: 82%; padding: 0.75rem 0.85rem; border-radius: 14px; border: 1px solid var(--hair-2); background: var(--card); font-size: 0.8rem; }
.ag-quote-card strong { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; }
.ag-quote-card span { color: var(--ink-soft); }
.ag-quote-card em { display: block; margin-top: 0.5rem; padding: 0.45rem; text-align: center; font-style: normal; font-weight: 700; border-radius: 8px; color: var(--on-action); background: var(--action); }
.ag-booked { justify-self: stretch; text-align: center; font-size: 0.78rem; font-weight: 700; padding: 0.5rem; border-radius: 10px; color: var(--go); background: color-mix(in oklab, var(--go) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--go) 30%, var(--hair)); }

/* ---------------------------------------------------------- process */
.ag-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hair-2); }
.ag-steps li { padding: 1.6rem 1.4rem 0 0; }
.ag-steps li + li { padding-left: 1.4rem; border-left: 1px solid var(--hair-2); }
.ag-step-n { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: color-mix(in oklab, var(--clay) 30%, var(--hair-2)); }
.ag-steps li:first-child .ag-step-n { color: var(--trust); }
.ag-steps h3 { margin-top: 1rem; font-size: 1.25rem; }
.ag-steps p { margin-top: 0.5rem; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) {
  .ag-steps { grid-template-columns: 1fr 1fr; }
  .ag-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ag-steps li:nth-child(n + 3) { margin-top: 1.6rem; border-top: 1px solid var(--hair-2); }
}
@media (max-width: 520px) {
  .ag-steps { grid-template-columns: 1fr; }
  .ag-steps li, .ag-steps li + li { padding: 1.4rem 0 1.4rem; border-left: 0; margin-top: 0; }
  .ag-steps li + li { border-top: 1px solid var(--hair-2); }
}

/* ---------------------------------------------------------- engagements */
.ag-projects { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.2rem; padding: 1.2rem 1.5rem; border: 1px dashed var(--hair-2); border-radius: var(--radius); }
.ag-projects p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 62ch; }
.ag-projects strong { color: var(--ink); }

/* ---------------------------------------------------------- closing band */
.ag-close { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); text-align: center; }
.ag-close h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem); max-width: 20ch; margin: 0.9rem auto 0; letter-spacing: -0.035em; }
.ag-close p { margin: 1.2rem auto 0; max-width: 48ch; color: var(--nv-soft); font-size: var(--text-lede); line-height: 1.55; }
.ag-close .ag-hero-actions { justify-content: center; }
/* The closing band sits flush on the footer, so the footer drops its gap. */
.ag-close + .site-footer, main:has(> .ag-close:last-child) + .site-footer { margin-top: 0; }

/* ---------------------------------------------------------- inner page hero */
.ag-page-hero { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.ag-page-hero h1 { margin-top: 1rem; font-size: clamp(2.3rem, 1.3rem + 4vw, 4.6rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 18ch; }
.ag-page-hero p.lede { margin-top: 1.4rem; max-width: 52ch; color: var(--nv-soft); font-size: var(--text-lede); line-height: 1.55; }
.ag-page-hero .ag-hero-actions { margin-top: 1.8rem; }

/* service detail blocks on What we do */
.ag-svc { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); padding-block: clamp(2.5rem, 1.6rem + 3vw, 4rem); border-top: 1px solid var(--hair-2); scroll-margin-top: clamp(96px, 12vh, 132px); }
.ag-svc:last-child { border-bottom: 1px solid var(--hair-2); }
.ag-svc-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; color: color-mix(in oklab, var(--clay) 28%, var(--hair-2)); }
.ag-svc-k { display: block; margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.ag-svc h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); max-width: 22ch; }
.ag-svc > div > p { margin-top: 0.9rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; max-width: 58ch; }
.ag-svc .check-list { margin-top: 1.4rem; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
.ag-svc-proof { margin-top: 1.4rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--trust); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.94rem; color: var(--ink-soft); max-width: 60ch; }
.ag-svc-proof strong { color: var(--ink); }
.ag-svc-proof a { color: var(--clay); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 760px) {
  .ag-svc { grid-template-columns: 1fr; gap: 1rem; }
  .ag-svc .check-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-index a, .ag-arrow, .ag-work-item .ag-frame { transition: none; }
  .ag-index a:hover .ag-arrow, .ag-work-item a:hover .ag-frame { transform: none; }
}

/* ---------------------------------------------------------- fixes
   `.section-head p` in styles.css outranks `.eyebrow` and was setting
   section eyebrows in grey lede type. Ordered lists here are layout,
   not numbering, so the browser markers go. */
.section-head .eyebrow, .ag-split-head .eyebrow, .ag-page-hero .eyebrow, .ag-close .eyebrow { margin-top: 0; font-size: var(--text-eyebrow); color: var(--clay); max-width: none; line-height: 1.4; }
.navy .section-head .eyebrow { color: var(--nv-accent); }
.ag-index, .ag-flow, .ag-steps, .ag-thread ol, .ag-rail { list-style: none; padding: 0; }

/* ---------------------------------------------------------- hero dashboard
   A sample of the reporting every client gets: leads, booked jobs and
   revenue, split by where they came from. One hue (the trust blue) in
   steps, so the bars rank rather than decorate. Marked "Sample". */
.ag-dash {
  position: relative; z-index: 1;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 16px;
  background: var(--night-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.ag-dash-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.82rem; color: var(--nv-soft); }
.ag-dash-top b { color: var(--nv-ink); font-weight: 600; }
.ag-dash-tag { margin-left: 0.5rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25em 0.7em; border-radius: 99px; border: 1px solid var(--nv-line); }
.ag-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.1rem 0 0; border-top: 1px solid var(--nv-line); }
.ag-kpis div { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 0.9rem 0.6rem 0.2rem 0; }
.ag-kpis div + div { padding-left: 0.8rem; border-left: 1px solid var(--nv-line); }
.ag-kpis dt { font-size: 0.72rem; color: var(--nv-soft); }
.ag-kpis dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 0.9rem + 1.2vw, 1.8rem); letter-spacing: -0.03em; line-height: 1; }
.ag-kpis div:nth-child(3) dd { color: var(--go); }
.ag-spark { display: block; width: 100%; height: 70px; margin-top: 1rem; }
.ag-spark-area { fill: rgba(201, 169, 107, 0.12); }
.ag-spark-line { fill: none; stroke: var(--nv-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ag-dash-k { margin-top: 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nv-soft); }
.ag-src { display: grid; gap: 0.5rem; margin-top: 0.7rem; list-style: none; padding: 0; }
.ag-src li { display: grid; grid-template-columns: 9.5rem 1fr 2rem; align-items: center; gap: 0.7rem; font-size: 0.8rem; }
.ag-src span { color: var(--nv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-src i { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; }
.ag-src i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--nv-accent); }
.ag-src li:nth-child(2) i::after { opacity: 0.8; }
.ag-src li:nth-child(3) i::after { opacity: 0.62; }
.ag-src li:nth-child(4) i::after { opacity: 0.48; }
.ag-src li:nth-child(5) i::after { opacity: 0.36; }
.ag-src b { text-align: right; font-weight: 600; color: var(--nv-soft); font-variant-numeric: tabular-nums; }

/* The stage holds the dashboard with the lead card and the real result
   resting on its edges. */
@media (min-width: 981px) {
  .ag-hero-grid { grid-template-columns: 1fr 1fr; }
  .ag-stage { padding: 4.6rem 0 1rem 1.5rem; }
  .ag-result { right: -1.4rem; top: 0; }
}
@media (max-width: 980px) { .ag-stage { padding-top: 4.4rem; padding-left: 0; } .ag-result { right: 0; } }
@media (max-width: 560px) {
  .ag-src li { grid-template-columns: 7.6rem 1fr 1.6rem; }
  .ag-kpis { grid-template-columns: repeat(2, 1fr); }
  .ag-kpis div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ag-kpis div:nth-child(n + 3) { border-top: 1px solid var(--nv-line); }
}
.ag-page-hero .eyebrow, .ag-close .eyebrow { color: var(--nv-accent); margin-inline: auto; }
@media (max-width: 900px) { ol.ag-flow { padding-left: 2rem; } }
.ag-page-hero .ag-rail a { display: block; color: inherit; transition: color var(--duration); }
.ag-page-hero .ag-rail a:hover { color: var(--nv-accent); }

/* ---------------------------------------------------------- photography
   Real client jobs, never stock. In the hero a photo sits behind the
   dashboard; under "Trusted by" a staggered row of jobs with the
   client's name on each. */
.ag-stage--photo { padding: 2.2rem 0 0; }
.ag-photo {
  position: relative; margin: 0 0 0 auto; width: 76%; aspect-ratio: 4 / 5;
  border-radius: 18px; overflow: hidden; background: var(--night-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 50px 90px -50px rgba(0, 0, 0, 0.95);
}
.ag-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-photo figcaption {
  position: absolute; left: 14px; top: 14px; padding: 0.4em 0.85em; border-radius: 99px;
  font-size: 0.72rem; font-weight: 600; color: var(--nv-ink);
  background: color-mix(in oklab, var(--night) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ag-stage--photo .ag-dash { position: absolute; left: 0; bottom: 0; width: 58%; padding: 1rem 1.1rem; }
.ag-stage--photo .ag-kpis { grid-template-columns: repeat(2, 1fr); }
.ag-stage--photo .ag-kpis div:nth-child(3) { padding-left: 0; border-left: 0; }
.ag-stage--photo .ag-kpis div:nth-child(n + 3) { border-top: 1px solid var(--nv-line); }
.ag-stage--photo .ag-kpis dd { font-size: 1.45rem; }
.ag-stage--photo .ag-spark { height: 46px; }
.ag-stage--photo .ag-src li { grid-template-columns: 7.4rem 1fr 1.6rem; font-size: 0.76rem; }
.ag-stage--photo .ag-src li:nth-child(n + 4) { display: none; }
.ag-stage--photo .ag-result { top: 0; right: -1.2rem; left: auto; }
@media (min-width: 981px) { .ag-stage--photo { padding: 2.2rem 0 0; } }
@media (max-width: 980px) {
  .ag-stage--photo { max-width: 560px; padding: 3.2rem 0 0; }
  .ag-photo { width: 88%; }
  .ag-stage--photo .ag-dash { position: relative; width: 78%; margin-top: -9rem; }
  .ag-stage--photo .ag-result { right: 0; }
}
@media (max-width: 560px) {
  .ag-photo { width: 100%; }
  .ag-stage--photo .ag-dash { width: 88%; margin-top: -7rem; }
  .ag-stage--photo .ag-src li { grid-template-columns: 7rem 1fr 1.4rem; }
}

/* Hero balance: more car, less card. The sparkline lives in the larger
   dashboard further down the site, so the hero card drops it. */
.ag-photo { width: 84%; }
.ag-photo figcaption { top: auto; bottom: 14px; left: auto; right: 14px; }
.ag-stage--photo .ag-dash { width: 50%; bottom: 2.2rem; }
.ag-stage--photo .ag-spark { display: none; }
.ag-stage--photo .ag-dash-k { margin-top: 0.8rem; }
@media (max-width: 980px) {
  .ag-photo { width: 92%; }
  .ag-stage--photo .ag-dash { width: 70%; bottom: auto; }
}
@media (max-width: 560px) {
  .ag-photo { width: 100%; }
  .ag-photo figcaption { bottom: auto; top: 14px; right: auto; left: 14px; }
  .ag-stage--photo .ag-dash { width: 86%; }
}
.ag-stage--photo .ag-dash-top { font-size: 0.74rem; white-space: nowrap; }
.ag-stage--photo .ag-dash-tag { margin-left: 0.35rem; }

/* A job photo under each service number on What we do, and a strip of
   three on About. */
.ag-svc-photo { display: block; margin-top: 1.4rem; aspect-ratio: 4 / 5; max-width: 280px; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); box-shadow: 0 24px 40px -30px color-mix(in oklab, var(--ink) 70%, transparent); }
.ag-svc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-svc-cap { display: block; margin-top: 0.55rem; font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .ag-svc > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: end; }
  .ag-svc-photo { grid-column: 1 / -1; max-width: none; aspect-ratio: 16 / 10; }
  .ag-svc-cap { grid-column: 1 / -1; }
}
.ag-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(0.6rem, 1.4vw, 1.1rem); list-style: none; padding: 0; }
.ag-strip li:first-child { grid-row: span 2; }
.ag-strip figure { margin: 0; height: 100%; }
.ag-strip picture { display: block; height: 100%; min-height: 220px; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); }
.ag-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-strip figcaption { margin-top: 0.55rem; font-size: 0.8rem; color: var(--ink-soft); }
.ag-strip li:first-child picture { aspect-ratio: 4 / 5; }
.ag-strip li:not(:first-child) picture { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .ag-strip { grid-template-columns: 1fr 1fr; } .ag-strip li:first-child { grid-column: 1 / -1; grid-row: auto; } .ag-strip li:first-child picture { aspect-ratio: 4 / 3; } }
/* Grid items default to min-width:auto, so an 800px image was widening its
   column past the page. */
.ag-strip li { min-width: 0; }
.ag-strip figure { height: auto; }
.ag-strip picture { height: auto; min-height: 0; }
.ag-strip li:first-child picture { aspect-ratio: auto; height: calc(100% - 1.6rem); }
.ag-strip li:first-child figure { height: 100%; }
@media (max-width: 700px) { .ag-strip li:first-child picture { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 980px) { .ag-photo figcaption { display: none; } }
.ag-feats-note { margin-top: 1rem; font-size: 0.86rem; color: var(--ink-soft); max-width: 56ch; }

/* ============================================================
   PAPER & NIGHT PASS (brand v2.1, Nov 2026). Folded in from the
   approved homepage preview. Labels caps and tracked, headlines and
   figures in DM Sans 400, gold only as rings, rules and numerals,
   rounded everything. Colours come from tokens, so one rule serves
   light (paper) and dark (night).
   ============================================================ */

/* ---------------------------------------------------------- hero */
.ag-hero { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.ag-hero-title { margin-top: 1.6rem; font-size: var(--text-hero); font-weight: var(--w-display); line-height: 0.96; letter-spacing: -0.04em; }
.ag-hero-title .soft { font-weight: var(--w-display); color: var(--ivory-2); }
.ag-hero-lede { margin-top: 1.6rem; color: var(--ivory-2); }
.ag-hero-actions { gap: 1rem 1.4rem; margin-top: 2.2rem; }
.ag-hero-note { margin-top: 1.4rem; font-size: 0.84rem; color: var(--ivory-3); gap: 0.8rem; }
.ag-hero-note::before { width: 7px; height: 7px; background: none; border: 1px solid var(--champagne); }

/* The job photo sits in a rounded frame with a faint gold outline. */
.ag-photo { border-radius: var(--radius); box-shadow: none; background: var(--night-2); outline: 1px solid var(--gold-faint); outline-offset: clamp(6px, 1vw, 10px); }
.ag-photo img, .ag-svc-photo img, .ag-strip img { filter: saturate(0.82) contrast(1.02); }
.ag-photo figcaption { border-radius: 999px; padding-inline: 1em; background: color-mix(in oklab, var(--night) 78%, transparent); font-size: 0.66rem; font-weight: var(--w-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-2); }

.ag-dash {
  border-radius: var(--radius); background: color-mix(in oklab, var(--night-2) 94%, transparent); border: 1px solid var(--gold-faint); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ag-dash-top b { font-weight: var(--w-medium); }
.ag-dash-tag { border-radius: 999px; border-color: var(--gold-soft); color: var(--champagne); font-weight: var(--w-medium); }
.ag-kpis { border-top-color: var(--gold-soft); }
.ag-kpis dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-3); }
.ag-kpis dd, .ag-stage--photo .ag-kpis dd { font-weight: var(--w-display); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.ag-kpis div:nth-child(3) dd { color: var(--champagne); }
.ag-dash-k { font-weight: var(--w-medium); letter-spacing: 0.2em; color: var(--ivory-3); }
/* Source bars as thin gold rules, so they rank without decorating. */
.ag-src i { height: 3px; border-radius: 99px; background: var(--night-line); }
.ag-src i::after { border-radius: 99px; background: var(--champagne); }
.ag-src span { color: var(--ivory-2); }
.ag-src b { font-family: var(--font); font-weight: var(--w-regular); color: var(--ivory); }
.ag-spark-line { stroke: var(--champagne); }

/* The one result, a small paper card resting on the night. */
.ag-result, .ag-stage--photo .ag-result { clip-path: none; border: 0; border-radius: 16px; background: var(--paper-fixed); color: var(--ink-fixed); }
.ag-result .ag-float-k { font-weight: var(--w-medium); letter-spacing: 0.2em; color: var(--gold-fixed); }
.ag-result .ag-float-v { font-weight: var(--w-display); letter-spacing: -0.04em; color: var(--ink-fixed); }
.ag-result .ag-result-sub { color: var(--ink-soft-fixed); }

.ag-rail { border-top: 1px solid var(--gold-soft); }
.ag-rail li { font-weight: var(--w-regular); color: var(--ivory-2); }
.ag-rail li + li, .ag-rail li:nth-child(n) { border-color: var(--night-line); }
.ag-rail span { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0; font-weight: var(--w-display); color: var(--champagne); font-variant-numeric: lining-nums tabular-nums; }

/* ---------------------------------------------------------- trusted by */
.clients { padding-block: 2.2rem; border-bottom: 1px solid var(--hair); }
.clients-label { font-weight: var(--w-medium); letter-spacing: 0.24em; color: var(--clay); }
.client-mark { color: color-mix(in oklab, var(--ink) 58%, transparent); }
.client-mark:hover { color: var(--ink); }

/* ---------------------------------------------------------- the two sheets
   On paper they are the page itself; in dark mode they lift into rounded
   night sheets (the --sheet-* tokens switch with the theme). */
.section#services, .section#crm {
  background: var(--sheet-bg); margin-inline: var(--sheet-m);
  border-radius: var(--sheet-r); border: 1px solid var(--sheet-line);
}
.section#crm { margin-block: clamp(0.5rem, 1.2vw, 1rem); }

/* service index: numbers in rings */
.ag-index { border-top: 1px solid var(--ink); }
.ag-index li { border-bottom-color: var(--hair-2); }
.ag-index a { grid-template-columns: 4rem 1fr auto; padding-block: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.ag-index a::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--sig);
  transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease);
}
.ag-index a:hover { background: none; }
.ag-index a:hover::before { transform: scaleX(1); }
.ag-num {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem; padding: 0; margin-top: 0.1rem;
  border: 1px solid var(--sig); border-radius: 50%;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: var(--w-display); letter-spacing: 0; color: var(--clay);
}
.ag-index a:hover .ag-num, .ag-index a:hover .ag-arrow { color: var(--clay); }
.ag-index h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.04; letter-spacing: -0.035em; }
.ag-tags { gap: 0.4rem 1.1rem; }
.ag-tags span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none; font-size: 0.66rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.ag-tags span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sig); }
@media (max-width: 560px) {
  .ag-index a { grid-template-columns: 2.8rem 1fr; }
  .ag-num { width: 2.2rem; height: 2.2rem; font-size: 0.82rem; }
}

/* ---------------------------------------------------------- the system */
.ag-system, .pricing {
  background: var(--paper-2); border: 1px solid var(--hair);
  margin-inline: clamp(0.5rem, 1.4vw, 1.25rem); border-radius: var(--island-r-dark);
}
.ag-flow::before { background: color-mix(in oklab, var(--sig) 45%, transparent); }
.ag-flow li::before { width: 0.75rem; height: 0.75rem; top: 0.7rem; border-radius: 50%; transform: none; background: var(--paper-2); border: 1px solid var(--sig); }
.ag-flow li:last-child::before { background: var(--sig); border-color: var(--sig); }
.ag-flow-k { font-family: var(--font); font-weight: var(--w-medium); letter-spacing: 0.24em; color: var(--clay); }
.ag-flow h3 { font-size: 1.6rem; margin-top: 0.8rem; }
@media (max-width: 900px) {
  .ag-flow::before { background: color-mix(in oklab, var(--sig) 45%, transparent); }
  .ag-flow li::before { top: 0.35rem; left: calc(-2rem + 0.15rem); }
}

/* ---------------------------------------------------------- the one result
   The second night island. */
.result {
  position: relative; isolation: isolate; overflow: clip;
  margin: var(--island-m); border-radius: var(--island-r);
  background: var(--grain), var(--night); border-bottom: 0;
}
.result::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 75% 50%, rgba(201, 169, 107, 0.09), transparent 70%);
}
.result-copy h2 { max-width: 15ch; margin-top: 1.4rem; line-height: 1.02; }
.result-card {
  position: relative; padding: clamp(1.6rem, 3.5vw, 2.6rem);
  background: var(--night-2); border: 1px solid var(--gold-faint); border-radius: var(--island-r-dark); box-shadow: none;
}
.result-head { border-bottom: 1px solid var(--night-line); }
.result-who { font-family: var(--font); font-size: 0.7rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); }
.result-when { color: var(--ivory-3); }
.result-hero { border-bottom: 1px solid var(--gold-soft); padding-block: 1.6rem 1.4rem; }
.result-v { font-size: clamp(4.4rem, 3rem + 5vw, 7.2rem); font-weight: var(--w-display); letter-spacing: -0.03em; line-height: 0.9; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.result-k { margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory-2); }
.result-figs { gap: 0; margin-top: 0; }
.result-figs div { padding: 1.3rem 1rem 1.2rem 0; border-bottom: 1px solid var(--night-line); }
.result-figs div:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--night-line); }
.result-figs dd { font-weight: var(--w-display); letter-spacing: -0.03em; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-variant-numeric: lining-nums tabular-nums; }
.result-figs dt { color: var(--ivory-2); }
.result-foot { margin-top: 1.4rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-3); }
@media (max-width: 420px) {
  .result-figs div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------- testimonial
   Big light type in a soft pool of light. */
.quote-band { position: relative; isolation: isolate; padding-block: var(--space-section); }
.quote-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 50%, color-mix(in oklab, var(--sig) 8%, transparent), transparent 70%); }
.quote-band .quote { background: none; border: 0; box-shadow: none; border-radius: 0; }
.quote::before { font-weight: var(--w-display); color: var(--sig); }
.quote blockquote p { font-weight: var(--w-display); letter-spacing: -0.035em; line-height: 1.18; color: var(--ink); }
.quote figcaption { margin-top: 2.2rem; color: var(--ink-soft); font-size: 0.86rem; }
.quote figcaption strong { font-weight: var(--w-medium); color: var(--ink); }
.quote-avatar { border-radius: 50%; background: transparent; border: 1px solid color-mix(in oklab, var(--sig) 55%, transparent); color: var(--clay); font-weight: var(--w-display); }

/* ---------------------------------------------------------- CRM sheet */
#crm h2 { font-size: var(--text-h2) !important; line-height: 1.02; }
.mock, .ag-thread { box-shadow: none; }
.ag-thread { border-radius: 30px; background: var(--card-hi); border: 1px solid var(--hair); padding: 1.3rem; }
.ag-thread-top b { border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font); font-weight: var(--w-medium); }
.ag-thread-top strong { font-weight: 600; }
.ag-sys { border-radius: 0; background: none; border: 0; font-size: 0.62rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; }
.ag-msg--out { background: var(--ink); color: var(--paper); border-radius: 18px 18px 6px 18px; }
.ag-msg--in { background: transparent; border-color: var(--hair-2); border-radius: 18px 18px 18px 6px; }
.ag-quote-card { border-radius: 16px; background: transparent; border: 1px solid var(--hair-2); }
.ag-quote-card strong { font-weight: var(--w-display); font-size: 1.7rem; letter-spacing: -0.04em; }
.ag-quote-card em { border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.66rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; }
.ag-booked { border-radius: 999px; background: transparent; border: 1px solid color-mix(in oklab, var(--sig) 50%, transparent); font-size: 0.64rem; font-weight: var(--w-medium); letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); }
.ag-feats { border-top: 1px solid var(--ghost-line); }
.ag-feats strong { font-weight: 600; }

/* ---------------------------------------------------------- process */
.ag-steps { border-top: 1px solid color-mix(in oklab, var(--sig) 45%, transparent); }
.ag-steps li { padding-top: 2.2rem; }
.ag-steps li + li, .ag-steps li:nth-child(n + 3) { border-color: var(--hair); }
.ag-step-n { font-weight: var(--w-display); font-size: clamp(3.4rem, 2.6rem + 2.4vw, 5rem); line-height: 0.85; color: var(--sig); font-variant-numeric: lining-nums tabular-nums; }
.ag-steps li:first-child .ag-step-n { color: var(--sig); }
.ag-steps h3 { margin-top: 1.4rem; font-size: 1.8rem; }

/* ---------------------------------------------------------- plans
   One rounded panel, Lead Engine lifted inside it by a gold rule. */
.plan-bar { border: 1px solid var(--hair); border-radius: var(--island-r-dark); overflow: hidden; background: var(--plan-bg); box-shadow: none; }
.plan-col, .plan-bar .plan-col--feature { padding: clamp(1.5rem, 3vw, 2.2rem); }
.plan-col + .plan-col { border-color: var(--hair); }
.plan-bar .plan-col--feature { background: linear-gradient(180deg, color-mix(in oklab, var(--sig) 7%, transparent), transparent 60%); box-shadow: inset 0 2px 0 var(--sig); }
.plan-head { gap: 0.6rem 1rem; }
.plan-name { font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); font-weight: var(--w-display); letter-spacing: -0.035em; text-transform: none; color: var(--ink); }
.plan-flag { border-radius: 999px; background: transparent; border: 1px solid color-mix(in oklab, var(--sig) 55%, transparent); color: var(--clay); font-weight: var(--w-medium); letter-spacing: 0.2em; }
.plan-for { font-weight: var(--w-regular); color: var(--ink-soft); }
.plan-note { border-top: 1px solid var(--hair); color: var(--ink-soft); }
.plan-foot { padding-inline: clamp(1.5rem, 3vw, 2.2rem); background: transparent; border-top: 1px solid var(--hair); }
.ag-projects { border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.2rem clamp(1.2rem, 3vw, 1.8rem); margin-top: 2.4rem; }
.ag-projects strong { font-weight: 600; }

/* ---------------------------------------------------------- the close */
.ag-close { padding-block: clamp(6rem, 4rem + 8vw, 11rem); }
.ag-close::before { background: radial-gradient(50% 60% at 50% 50%, rgba(201, 169, 107, 0.09), transparent 70%); }
.ag-close .eyebrow { justify-content: center; }
.ag-close h2 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.6rem); font-weight: var(--w-display); letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; margin-top: 1.4rem; }
.ag-close p { color: var(--ivory-2); }

/* ---------------------------------------------------------- inner pages */
.ag-page-hero h1 { font-weight: var(--w-display); letter-spacing: -0.04em; }
.ag-svc-n { font-weight: var(--w-display); color: var(--sig); font-variant-numeric: lining-nums tabular-nums; }
.ag-svc-k { font-family: var(--font); font-weight: var(--w-medium); letter-spacing: var(--track-label); }
.ag-svc-proof { border-left: 2px solid var(--sig); background: var(--card); }
.ag-svc-photo, .ag-strip picture { border-radius: var(--radius-card); box-shadow: none; outline: 1px solid var(--gold-faint); outline-offset: 4px; }
.ag-svc-cap, .ag-strip figcaption { font-size: 0.66rem; font-weight: var(--w-medium); letter-spacing: 0.16em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .ag-index a::before { transition: none; }
}