/* ==========================================================================
   site/cta.css · THE CTA COLOUR SYSTEM — Option 12 · GLACIER MEDIUM
   Chosen 2026-09-10 from the twenty at /cta-native-r4.html.
   Replaces Option 04 Antique Gold (backup: cta.css.backup-before-glacier-*).

   Loaded LAST on every live page — after ds.css / shelf.css / uifinish.css /
   hier.css / panel.css / paper.css and after each page's own <style> — so
   every rule below repeats the rule it corrects at the SAME specificity and
   wins on source order. No !important anywhere.

   ---------------------------------------------------------------------------
   WHAT IS DIFFERENT ABOUT THIS ONE
   ---------------------------------------------------------------------------
   The gold was a DARK fill carrying WHITE text. Glacier is the opposite
   shape of button: a light-medium fill carrying a NEAR-BLACK label and a
   defined 1px edge. Three consequences run through this whole file:

     · --cta-fg is #0B0D12, not #FFFFFF. Every icon inside every action uses
       currentColor, so the icons follow the label without being touched.
     · a light fill cannot rely on its own weight to read as a control, so
       every tier-1 action carries --cta-edge-1, which clears 3:1 against
       white, the panel tint and section grey alike.
     · MATTE. Every coloured glow the old file re-tinted is removed outright
       rather than recoloured. Sections 7 and 8 of the gold file existed only
       to keep those halos; section 7 here exists only to kill them.

   ---------------------------------------------------------------------------
   WHERE IT CAME FROM
   ---------------------------------------------------------------------------
   Not picked — found. The site's own ramp, sorted by lightness, is a curve
   in OKLCH; this colour sits ΔE 1.3 from it, on the line between --ink-3 and
   --ink-4, 73% of the way along. It is 53.6° off the brand blue's hue and
   carries 4.5% of its chroma, so it cannot be read as a faded blue and
   cannot compete with it.

   The tier ladder from hier.css is unchanged:
     TIER 0 · IDENTITY    --brand #0B57F5 — wordmark, hero accent word,
                          section full stop.                    UNCHANGED
     TIER 1 · PRIMARY     --cta #99A2A4 fill + #0B0D12 label + edge
     TIER 2 · SECONDARY   white + --cta-edge + --cta-ink
     TIER 3 · TERTIARY    --cta-ink text
     TIER 3 · SELECTED    --navy #0F1B3D — tabs, chips, open rows. UNCHANGED
     TIER 4 · DECORATION  neutral grey.                          UNCHANGED

   NOT TOUCHED, on purpose — as with the gold:
   · the 95 drawn Google mock-ups (SERP, Shopping, ad previews, .s3-btn,
     .cv-tag, the wireframe .cta and .tx b bars). Their blue is CONTENT.
   · every blue that is a label, an eyebrow, a rule, a dot or a number.
   · #wcu8's four register hues and #svc3's five per-service hues — colour
     CODES, not accents. Their .a-go BUTTON still joins the system.
   · the light-ground ladder, radii, geometry, type and spacing. Colour only.

   Contrast, measured (cta-native-r4/ computes these):
     #0B0D12 on #99A2A4 ........ 7.46:1  AAA   label at rest
     #0B0D12 on #8B9496 ........ 6.27:1  AA    label on hover
     #0B0D12 on #80898B ........ 5.43:1  AA    label pressed
     #6A777A on #FFFFFF ........ 4.63:1        the edge, against white
     #6A777A on #EEF4FE ........ 4.19:1        the edge, on the CTA panel
     #535D5E on #FFFFFF ........ 6.78:1  AA    tier 2 / 3 text
     #535D5E on #F4F7FC ........ 6.32:1  AA    the same, on section grey

   Layout:
     1 · tokens                    5 · tier 3, text actions
     2 · tier 1, primary fills     6 · focus, one visible ring
     3 · tier 1, page-specific     7 · edges, and the death of the glows
     4 · tier 2, secondary         8 · the one secondary that out-ranked §4
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   OKLCH L 0.705 · C 0.011 · H 209. Chroma is the point: at 4.5% of the brand
   blue's, this is a cool grey that happens to have a direction, not a colour.
   ========================================================================== */
:root{
  --cta:        #99A2A4;   /* primary fill                                   */
  --cta-h:      #8B9496;   /* its one hover step                             */
  --cta-a:      #80898B;   /* pressed                                        */
  --cta-fg:     #0B0D12;   /* label and icons on the fill — NOT white        */
  --cta-edge-1: #6A777A;   /* the primary's 1px edge, 4.63:1 on white        */

  --cta-ink:    #535D5E;   /* secondary + tertiary text                      */
  --cta-ink-h:  #3F484A;   /* its hover                                      */

  --cta-edge:   #C6D6D9;   /* the secondary's hairline                       */
  --cta-edge-h: #AEC0C3;
  --cta-soft:   #F0F9FB;   /* the secondary's hover ground                   */
  --cta-soft-2: #E5F1F3;   /* pressed                                        */

  --cta-dis:    #D0D5D5;   /* disabled fill  — see section 2                 */
  --cta-dis-fg: #8B9091;   /* disabled label                                 */

  --cta-ring:   rgba(83,93,94,.42);   /* keyboard focus                      */
}


/* ==========================================================================
   2 · TIER 1 — THE SHARED PRIMARY
   ds.css section 6 collects the site's primary buttons into one rule. This
   repeats that selector list minus `.pg .ld-act-b[data-kind="view"]`, which
   hier.css section 5 already demoted to a secondary.

   box-shadow is deliberately absent here: every edge in this file is set in
   ONE place, section 7, so nothing later can silently drop it.
   ========================================================================== */
.btn, .px-btn-p, .barbtn,
.pg .s3-cta, .pg .ld-form-go{
  background: var(--cta);
  color: var(--cta-fg);
  border-color: transparent;
  transition: background .18s var(--ease), color .18s var(--ease),
              transform .12s var(--ease);
}
.btn:hover, .px-btn-p:hover, .barbtn:hover,
.pg .s3-cta:hover, .pg .ld-form-go:hover{
  background: var(--cta-h);
  color: var(--cta-fg);
}
.btn:active, .px-btn-p:active, .barbtn:active,
.pg .s3-cta:active, .pg .ld-form-go:active{ background: var(--cta-a); }

/* Disabled. The site's own convention is opacity:.3, which on a DARK fill
   still read as a control and on this light one does not — #99A2A4 at 30%
   is #E0E3E4 with a #B6B7B9 label, 1.5:1. So the primary states it
   explicitly instead. This is the only rule in the file that is not a
   straight recolour of something that already existed. */
.btn[disabled], .px-btn-p[disabled], .barbtn[disabled],
.pg .s3-cta[disabled], .pg .ld-form-go[disabled]{
  background: var(--cta-dis);
  color: var(--cta-dis-fg);
  opacity: 1;
}

/* `.btn.ghost` (0-2-0) still out-ranks `.btn` (0-1-0) above, so the ghost
   keeps its own treatment and is recoloured in section 4. */


/* ==========================================================================
   3 · TIER 1 — THE PAGE-SPECIFIC PRIMARIES
   Each of these is painted by a rule more specific than section 2's, so each
   is repeated here at its own specificity. The comment on each line names
   the file the rule being corrected lives in.
   ========================================================================== */

/* homepage · the hero capture form.                     home-hero/hero.css
   hero.css runs this button at #1663CE at rest and brightens to #1A73E8 on
   hover — the one place on the site where rest is DARKER than hover. Glacier
   keeps the site's ordinary direction: rest, then one step darker. */
.hero .capture button{ background: var(--cta); color: var(--cta-fg); }
.hero .capture button:hover{ background: var(--cta-h); }
.hero .capture button:active{ background: var(--cta-a); }

/* homepage · Client Proof, the footer invitation.          home-proof/hp.css */
#hp1 .hp-ctab{ background: var(--cta); color: var(--cta-fg); }
@media (hover:hover) and (pointer:fine){
  #hp1 .hp-ctab:hover{ background: var(--cta-h); }
}
#hp1 .hp-ctab:active{ background: var(--cta-a); }

/* homepage · Why Choose Us, the closing panel.        home-whyus/wcu-bands.css
   The panel itself stays #EEF4FE with its #CFE0FD edge — the hardest ground
   on the site for this button, and the reason --cta-edge-1 has to clear 3:1
   against the tint as well as against white. It clears 4.19:1.

   Its "READY TO BEGIN" eyebrow is left exactly as found, as under the gold:
   `#wcu8 .wt-ck` (1,1,0) asks for var(--accent) but `#wcu8 .wt-close p`
   (1,1,1) sits below it in the same block and wins, so the eyebrow renders
   --ink-2. A pre-existing type bug, not a colour decision. Left alone
   deliberately; noted so it is not mistaken for something this file did. */
#wcu8 .wc-btn{ background: var(--cta); color: var(--cta-fg); }
#wcu8 .wc-btn:hover{ background: var(--cta-h); }
#wcu8 .wc-btn:active{ background: var(--cta-a); }

/* homepage · Why Choose Us, the action inside an open answer.     index.html
   Four registers each carry a --hue (blue / green / orange / navy) tying an
   open answer to its category. The hue keeps its ground, its edge and its
   icon; only the BUTTON leaves the code, so every action on the site is one
   colour. `#wcu8 [data-grp]` matches the register's own 1-3-0 rule at equal
   specificity and wins on order. */
#wcu8 [data-grp] .a-act .a-go{
  background: var(--cta);
  color: var(--cta-fg);
}
#wcu8 [data-grp] .a-act .a-go:hover{ background: var(--cta-h); }
#wcu8 [data-grp] .a-act .a-go:active{ background: var(--cta-a); }

/* homepage · the FAQ's closing ask.                              index.html */
#faq10 .faq-cta{ background: var(--cta); color: var(--cta-fg); }
#faq10 .faq-cta:hover{ background: var(--cta-h); }
#faq10 .faq-cta:active{ background: var(--cta-a); }

/* Google Ads · the service section's solid action.    gads-services/gsvc.css
   hier.css section 1 pulled this off --brand and onto --accent; it now goes
   the rest of the way to the CTA colour. */
#gads-services .sv-btn:not(.is-ghost){ background: var(--cta); color: var(--cta-fg); }
#gads-services .sv-btn:not(.is-ghost):hover{ background: var(--cta-h); }
.gss-btn{ background: var(--cta); color: var(--cta-fg); }
.gss-btn:hover{ background: var(--cta-h); }


/* ==========================================================================
   4 · TIER 2 — THE SECONDARY
   White, a Glacier hairline, Glacier text. Same shape as the primary but a
   different FORM, which is what keeps the order readable at a glance — fill
   beats outline before the eye has read a word of either. That distinction
   matters more here than it did under the gold, because the primary is no
   longer separated from the secondary by weight alone.
   ========================================================================== */
.btn.ghost, .px-btn-o,
.pg .ld-act-b[data-kind="ask"], .pg .ld-act-b[data-kind="ghost"]{
  background: var(--paper, #fff);
  color: var(--cta-ink);
  border: 1px solid var(--cta-edge);
}
.btn.ghost:hover, .px-btn-o:hover,
.pg .ld-act-b[data-kind="ask"]:hover, .pg .ld-act-b[data-kind="ghost"]:hover{
  background: var(--cta-soft);
  border-color: var(--cta-edge-h);
  color: var(--cta-ink);
}

/* the three hier.css demoted — each repeated at ITS specificity, not a
   stronger one, exactly as hier.css section 5 wrote them */
#about5 .ab-btn,
#w8-system .w8-close .gss-btn,
.pg .ld-act-b[data-kind="view"]{
  background: var(--paper, #fff);
  color: var(--cta-ink);
  border: 1px solid var(--cta-edge);
  box-shadow: none;
}
#about5 .ab-btn:hover,
#w8-system .w8-close .gss-btn:hover,
.pg .ld-act-b[data-kind="view"]:hover{
  background: var(--cta-soft);
  border-color: var(--cta-edge-h);
  color: var(--cta-ink);
  filter: none;
}

/* Google Ads · the ghost half of the services pair */
#gads-services .sv-btn.is-ghost{
  color: var(--cta-ink); border-color: var(--cta-edge);
}
#gads-services .sv-btn.is-ghost:hover{
  background: var(--cta-soft); border-color: var(--cta-edge-h);
}

/* homepage · "View All Success Stories" — a pill outlined in the action
   colour, so it follows the action colour.                       index.html */
#ss1 .ss-all{ border-color: var(--cta-edge); color: var(--cta-ink); }
#ss1 .ss-all:hover{ background: var(--cta-soft); border-color: var(--cta-edge-h); }

/* internal pages · the accent pill a section ends on              site/ds.css */
.pg .hp-all{ border-color: var(--cta-edge); color: var(--cta-ink); }
.pg .hp-all:hover{ background: var(--cta-soft); border-color: var(--cta-edge-h); }


/* ==========================================================================
   5 · TIER 3 — TEXT ACTIONS
   An action in text and an action in a fill are different forms before they
   are different colours, so these take the CTA ink and rejoin the system.
   ========================================================================== */
.btn.link{ color: var(--cta-ink); }
.btn.link:hover{ color: var(--cta-ink-h); text-decoration: underline; text-underline-offset: 3px; }
.h3 .h3-cta .btn.link{ color: var(--cta-ink); }
.hero .ctaRow .btn.link{ color: var(--cta-ink); }
#w8-system .w8-close-say a{ color: var(--cta-ink); }
#about5 .ab-lnk{ color: var(--cta-ink); }
#about5 .ab-lnk:hover{ color: var(--cta-ink-h); }


/* ==========================================================================
   6 · FOCUS — ONE VISIBLE RING FOR EVERY LEVEL
   :focus-visible only, so a mouse click never draws it. Split in two: a
   tier-1 action must keep its 1px edge while focused, a secondary must not
   grow a second one.
   ========================================================================== */
.btn:focus-visible, .px-btn-p:focus-visible, .barbtn:focus-visible,
.hero .capture button:focus-visible,
#hp1 .hp-ctab:focus-visible,
#wcu8 .wc-btn:focus-visible,
#wcu8 [data-grp] .a-act .a-go:focus-visible,
#faq10 .faq-cta:focus-visible,
#gads-services .sv-btn:not(.is-ghost):focus-visible, .gss-btn:focus-visible,
.pg .s3-cta:focus-visible, .pg .ld-form-go:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 1px var(--cta-edge-1),
              0 0 0 2px var(--paper, #fff), 0 0 0 5px var(--cta-ring);
}
.px-btn-o:focus-visible, .btn.ghost:focus-visible, .btn.link:focus-visible,
#ss1 .ss-all:focus-visible,
#about5 .ab-btn:focus-visible, #about5 .ab-lnk:focus-visible,
#gads-services .sv-btn.is-ghost:focus-visible,
.pg .hp-all:focus-visible, .pg .ld-act-b:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 0 5px var(--cta-ring);
}


/* ==========================================================================
   7 · EDGES, AND THE DEATH OF THE GLOWS
   Every box-shadow on every action is settled here and nowhere else.

   The gold file carried two whole sections whose only job was to re-tint
   seven coloured halos so a blue glow never appeared under a gold button.
   Those halos are gone: this system is matte, and the shadow property is
   used for one thing only — the 1px inset edge a light fill needs to read
   as a control. Each selector is repeated at the specificity of the rule it
   is overriding, named beside it.
   ========================================================================== */
.btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }              /* about/_shell.css, mgmt/_shell.css */
.btn.ghost{ box-shadow: none; }
.btn.link{ box-shadow: none; }
.h3 .h3-cta .btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }  /* gads-hero/hero.css   */
.h3 .h3-cta .btn.link{ box-shadow: none; }
.hero .ctaRow .btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }/* mgmt/_shell.css      */
.hero .ctaRow .btn.link{ box-shadow: none; }
.sv-btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }           /* gads-services/gsvc.css */
/* gads-index-column/idx.css already flattens this one at `#gads-services
   .sv-btn` (1-1-0) — it killed the old blue glow. That also out-ranks the
   0-1-0 above, so the EDGE has to be restated at 1-2-0 or the Google Ads
   service button is the one primary on the site with no boundary. */
#gads-services .sv-btn:not(.is-ghost){ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#gads-services .sv-btn.is-ghost{ box-shadow: none; }
.px-btn-p, .barbtn,
.pg .s3-cta, .pg .ld-form-go{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
.hero .capture button{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#hp1 .hp-ctab{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#wcu8 .wc-btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#wcu8 [data-grp] .a-act .a-go{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#faq10 .faq-cta{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
.gss-btn{ box-shadow: inset 0 0 0 1px var(--cta-edge-1); }
#w8-system .w8-close .gss-btn{ box-shadow: none; }                  /* demoted in §4 */

/* gsvc.css lifts .sv-btn on hover with filter:brightness(1.08). Section 3
   already gives it an explicit darker hover, and the two together cancel
   out, so the filter is switched off rather than fought. */
#gads-services .sv-btn:not(.is-ghost):hover{ filter: none; }

/* homepage · the hero capture card's focus ring. It wraps the primary, so a
   blue ring around it read as two different systems.           index.html */
.capture:focus-within{
  border-color: var(--cta-edge-h);
  box-shadow: 0 0 0 3px rgba(83,93,94,.13);
}


/* ==========================================================================
   8 · THE ONE SECONDARY THAT OUT-RANKED SECTION 4
   contact-us.html's closing band re-declares its outline button at
   `.px-final .px-btn-o` (0-2-0) in ds.css section 9 — a leftover from when
   that band was dark. Section 4's `.px-btn-o` is only (0-1-0), so the site's
   LAST secondary action would still be wearing the old neutral ghost.
   ========================================================================== */
.px-final .px-btn-o{
  background: var(--paper);
  color: var(--cta-ink);
  border-color: var(--cta-edge);
}
.px-final .px-btn-o:hover{
  background: var(--cta-soft);
  border-color: var(--cta-edge-h);
}