/* ==========================================================================
   site/paper.css · THE PAPER LADDER — the site's selection system
   ==========================================================================
   Chosen from ten directions on 2026-09-09 (option 08, /doctor/selection-
   states-x6.html). One rule, applied everywhere:

       A SELECTION ROW SITS ON A GROUND ONE STEP DARKER THAN THE PAGE.
       THE CHOSEN CONTROL IS THE ONLY WHITE PAPER IN THAT ROW.

   Nothing else marks a selection — no navy fill, no accent, no shadow, no
   inlay bar. Depth is ground tone and nothing but ground tone, so a second
   and third level can nest inside the first without inventing a new mark:
   the ladder just steps down again.

       level 1   row #EDF2F9   chosen #FFFFFF     (every group on the site)
       level 2   row #F4F7FC   chosen #FFFFFF     (a row inside a chosen panel)
       level 3   row #F6F8FC   chosen #FFFFFF     (a row inside that)

   The site has no second level today — verified on all six live pages: none
   of the sixteen selection groups sits inside another. Levels 2 and 3 are
   declared below so the ladder exists the moment one is added.

   THE SHAPE FOLLOWS WHAT THE GROUP IS, not what level it is:
     · a DOCK   — its panel is directly beneath, so the chosen control takes
                  top-only radius and its white runs straight into the panel
     · a TRACK  — a filter whose content is further away, so the chosen
                  control is a fully rounded plate inside the row
     · a RAIL   — vertical; the same weld turned a quarter turn, the chosen
                  row's white running sideways into the panel beside it

   ---------------------------------------------------------------------------
   HOW IT WINS
   ---------------------------------------------------------------------------
   Linked LAST in every page's <head> — after ds.css / shelf.css / uifinish.css
   / hier.css / panel.css and after each page's own late <style> blocks. Every
   rule repeats the corrected rule's OWN selector at the SAME specificity and
   wins on source order. No !important anywhere.

   Selectors were read off the live DOM, never guessed: several of these
   groups are built by script after load. Re-read them with
   site/_sel-dom.html?u=<page>&sel=<selector>.

   ---------------------------------------------------------------------------
   WHAT THIS SUPERSEDES
   ---------------------------------------------------------------------------
   · site/panel.css — the #DCE3EE well material (D1 · Deeper Floor, applied
     earlier the same day). The well is gone: a chosen control is paper, not
     a recess. panel.css is left in place and simply outranked, so the whole
     change is one <link> away from being undone.
   · site/hier.css tier 3 — selected = navy #0F1B3D. Tiers 0, 1, 2 and 4 are
     untouched: brand blue is still identity-only, --accent is still the one
     conversion action per screen, decoration is still grey. Only "selected"
     stops being a colour.

   ---------------------------------------------------------------------------
   DELIBERATELY NOT TOUCHED
   ---------------------------------------------------------------------------
   · #hpLad buttons and .w8-dots i.on — position indicators, not choices
   · .cc-cue's #1560CE arrow — approved by name on 2026-09-07 and unrelated
     to which card is chosen
   · the top nav's .ptab.cur underline — the ladder needs a row ground, and
     the header bar has none; inventing one would restyle the header
   · per-service and per-client hues (--cur, --k) — a colour code, not accent
   ========================================================================== */

:root{
  --pl-row:   #EDF2F9;                 /* level 1 · every selection row       */
  --pl-row-2: #F4F7FC;                 /* level 2 · a row inside a chosen panel */
  --pl-row-3: #F6F8FC;                 /* level 3 · a row inside that         */
  --pl-on:    #FFFFFF;                 /* the chosen control, at every level  */
  --pl-hov:   rgba(255,255,255,.62);   /* hover, over a row ground             */
  --pl-hov-s: #F6F8FC;                 /* hover, where the ITEM is the ground  */
  --pl-prs:   rgba(255,255,255,.88);   /* pressed                             */
  --pl-ring:  #E3E6EB;                 /* the hairline white needs on white   */
  --pl-ring-2:#DDE4EE;                 /* the same, one notch firmer          */
  --pl-ink:   #0B0D12;                 /* chosen text                         */
  --pl-off:   #3A414C;                 /* unchosen text                       */
}


/* ==========================================================================
   1 · HOMEPAGE
   ========================================================================== */

/* --- All Work · a DOCK. The plate and the weld were already right; only the
       strip was too pale for white to read as chosen against it. ---------- */
#tabs{ background: var(--pl-row); }
.tail.show .tabs button[aria-selected="true"],
#tabs button[aria-selected="true"]{
  background: var(--pl-on); color: var(--pl-ink); font-weight: 750;
}
#tabs button:not([aria-selected="true"]){ color: var(--pl-off); font-weight: 600; }
#tabs button:hover:not([aria-selected="true"]){ background: var(--pl-hov); color: var(--pl-ink); }
#tabs button:active:not([aria-selected="true"]){ background: var(--pl-prs); }

/* --- Our Services · a TRACK. Was a solid navy tile on a white rail; the
       rail becomes the row and the chosen category becomes the paper. ----- */
#s3cats.s3-catrail{ background: var(--pl-row); }
/* svc-bureau.css squares this rail off — .s3-cat gets border-radius:0 at
   (1,1,0), and a square white tab flush inside a bordered track reads as a
   hole in the box rather than a plate standing on it. The rounded corner is
   what makes the ladder legible here; the bureau rim itself is left alone. */
#svc3 .s3-cat[aria-current="true"]{
  background: var(--pl-on); color: var(--pl-ink); font-weight: 750;
  border-radius: 8px; box-shadow: 0 0 0 1px var(--pl-ring);
}
#svc3 .s3-cat:not([aria-current="true"]){ color: var(--pl-off); }
#svc3 .s3-cat:hover:not([aria-current="true"]){
  background: var(--pl-hov); color: var(--pl-ink); border-radius: 8px;
}
#svc3 .s3-cat:active:not([aria-current="true"]){ background: var(--pl-prs); }

/* --- Client Proof types · AN UNDERLINE, not a track. -------------------
       2026-09-10 the section became the open rail: the chooser is a row of
       words standing on the line the evidence starts from, so there is no
       row ground for a white plate to be the only white thing in. The
       ladder still owns the group — it owns its INK. Chosen is --pl-ink at
       750, unchosen --pl-off, and the mark is the chosen word's own colour
       rather than a fill of any kind, which is this ladder's rule about
       selection stated in the one form this group can take. */
#hp1 .hp-tab[aria-selected="true"]{ color: var(--pl-ink); font-weight: 750; }
#hp1 .hp-tab[aria-selected="true"]::after{ background: var(--pl-ink); }
#hp1 .hp-tab:not([aria-selected="true"]){ color: var(--pl-off); }
@media (hover:hover) and (pointer:fine){
  #hp1 .hp-tab:hover:not([aria-selected="true"]){ color: var(--pl-ink); }
}

/* --- About the company · a DOCK. Already a white plate; it needed a row to
       be the only white thing in. -------------------------------------- */
/* index.html's phone block carries "#about5 .ab-rail{ background:#F1F5FB }"
   at (1,1,0), so a class-only selector is right on desktop and silently wrong
   on a phone. Both widths need the id. */
#about5 .ab-ftabs.ab-rail{
  background: var(--pl-row); border-radius: 14px 14px 0 0; padding: 0 6px;
}
@media (max-width: 760px){
  #about5 .ab-ftabs.ab-rail{ border-radius: 0; padding: 0; }
}
#about5 .ab-ftab[aria-selected="true"]{
  background: var(--pl-on); background-image: none;
  border-color: transparent; border-bottom-color: var(--pl-on);
  color: var(--pl-ink); font-weight: 750;
}
/* the phone block paints the chosen label --accent at (1,2,1); match it. */
#about5 .ab-rail > button[aria-selected="true"]{
  background: var(--pl-on); color: var(--pl-ink); font-weight: 750;
}
#about5 .ab-ftab:not([aria-selected="true"]){ color: var(--pl-off); font-weight: 600; }
/* the photo plate was given the well tone by panel.css; #DCE3EE is not a tone
   in this system, so the placeholder joins the ladder instead of outliving it. */
#about5 .ab-shot{ background: var(--pl-row); background-image: none; }
#about5 .ab-ftab:hover:not([aria-selected="true"]){ background: var(--pl-hov); color: var(--pl-ink); }


/* ==========================================================================
   2 · GOOGLE ADS PAGE
   ========================================================================== */

/* --- Our System + Why Choose Us · a DOCK, and the biggest change on the
       site. The three machined layers (a.css · s5.css · d1.css) drew the
       chosen tab as an OPENING cut into a #DCE3EE well. Under the ladder a
       chosen thing is paper, so the well becomes paper, the dock becomes the
       row, and every machined edge — the lit inlay bar, the 2px cut, the side
       walls, the white lip — comes off. The step cards keep a 1px ring so
       they still read as cards on the paper they now stand on. ----------- */
#w8-system .w8-area,
#wcu-ga .w8-area{
  background: var(--pl-on); background-image: none; box-shadow: none;
}
#w8-system .w8-dock,
#wcu-ga .w8-dock{
  background: var(--pl-row); background-image: none;
  border-bottom-color: transparent; box-shadow: none;
}
#w8-system .w8-tab[aria-selected="true"],
#wcu-ga .w8-tab[aria-selected="true"]{
  background: var(--pl-on); background-image: none; box-shadow: none;
  color: var(--pl-ink);
}
/* ::before is the lit inlay bar, ::after is the weld filler that joins the
   tab to the canvas. The ladder has no inlay; the filler turns to paper. */
#w8-system .w8-tab[aria-selected="true"]::before,
#wcu-ga .w8-tab[aria-selected="true"]::before{ display: none; }
#w8-system .w8-tab[aria-selected="true"]::after,
#wcu-ga .w8-tab[aria-selected="true"]::after{ background: var(--pl-on); }
#w8-system .w8-tab[aria-selected="true"] .w8-tab-n,
#wcu-ga .w8-tab[aria-selected="true"] .w8-tab-n{ color: var(--pl-ink); }
#w8-system .w8-tab[aria-selected="true"] .w8-tab-w,
#wcu-ga .w8-tab[aria-selected="true"] .w8-tab-w,
.w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--ink-3); }
#wcu-ga .w8-tab[aria-selected="true"] .w8-tab-b{
  background: var(--pl-row); background-image: none;
  color: var(--pl-ink); box-shadow: inset 0 0 0 1px var(--pl-ring);
}
#w8-system .w8-tab:hover:not([aria-selected="true"]),
#wcu-ga .w8-tab:hover:not([aria-selected="true"]){
  background: var(--pl-hov); background-image: none;
}
#w8-system .w8-canvas,
#wcu-ga .w8-canvas{
  background: var(--pl-on); background-image: none; box-shadow: none;
}
#w8-system .w8-step,
#wcu-ga .w8-step{
  background: var(--pl-on);
  box-shadow: inset 0 0 0 1px var(--pl-ring);
}
@media (max-width: 860px){
  #w8-system .w8-area,
  #wcu-ga .w8-area{ box-shadow: none; }
  #w8-system .w8-canvas,
  #wcu-ga .w8-canvas{ box-shadow: none; }
}

/* --- Budget chips · a TRACK. There are TWO of these rows — the pricing
       block and the comparison board — and both live inside section#pricing,
       so one selector covers them. panel.css addresses the second one as
       a #cmp descendant; there is no such id on the page and that rule has
       never matched anything. ------------------------------------------- */
#pricing .a9-chips{ background: var(--pl-row); background-image: none; }
#pricing .a9-chip[aria-checked="true"]{
  background: var(--pl-on); background-image: none;
  box-shadow: 0 0 0 1px var(--pl-ring);
  color: var(--pl-ink); font-weight: 750;
}
#pricing .a9-chip:not([aria-checked="true"]){ color: var(--pl-off); font-weight: 600; }
#pricing .a9-chip:hover:not([aria-checked="true"]){
  background: var(--pl-hov); background-image: none;
  box-shadow: none; color: var(--pl-ink);
}

/* --- The Google Ads FAQ · twenty-eight rows, one of them open. The rows
       already sit off paper at #F6F8FC, so the ladder only has to give the
       open one the paper and take the accent off its toggle. ------------- */
#gfaq .gfaq-item.is-open{ background: var(--pl-on); border-color: var(--pl-ring-2); }
#gfaq .gfaq-item.is-open .gfaq-m{ color: var(--pl-ink); }

/* --- The client rail · eighteen cards, one of which is open. The chosen one
       wore a 9%-blue tint added because #F7FAFF was too close to white to
       see. The ladder answers the same complaint the other way round: the
       unchosen cards step OFF paper, so the open one is the only paper in
       the row and needs no tint at all. The #1560CE cue arrow is left
       exactly as approved.

       SPECIFICITY: vm.css carries "#q7 .mp-i { background: #FFF }" at (1,1,0),
       so the (0,3,0) selector every other file in gads-clients/ uses —
       ".cc.rz6 .mp-i" — cannot reach it however late this sheet loads. The
       section IS .cc.rz6, so "#q7.cc.rz6" is one element, not a descendant
       chain, and lands at (1,3,0). ---------------------------------------- */
#q7.cc.rz6 .mp-i{ background: var(--pl-row); border-color: transparent; }
#q7.cc.rz6 .mp-i:hover{ background: var(--pl-hov-s); border-color: var(--pl-ring); }
#q7.cc.rz6 .mp-i:active{ background: var(--pl-on); }
#q7.cc.rz6 .mp-i.is-sel,
#q7.cc.rz6 .mp-i.is-sel:hover{
  background: var(--pl-on); border-color: var(--pl-ring-2); box-shadow: none;
}


/* ==========================================================================
   3 · ABOUT US
   ========================================================================== */

/* About Us was rebuilt on 2026-09-10 as the symmetric spec (about-k9/k9.css).
   Its three controls are welded to the frame they open — the control's own
   edge IS the frame's edge — so the ladder has less to do here than anywhere
   else on the site: it only has to say which one is paper. The 1px weld
   itself is geometry and lives in k9.css.

   The old .c1-key / .c1-rx-r / .tmx-tab / .tc-pier rules that stood here are
   gone with the markup they named; the four capabilities are now a static
   four-up with no control at all. */

/* --- Milestones · a DOCK of five, its panel directly beneath. ----------- */
#journey .k9-seg{ background: var(--pl-row); }
#journey .k9-sg.on{ background: var(--pl-on); color: var(--pl-ink); }
#journey .k9-sg.on b{ color: var(--pl-ink); font-weight: 750; }
#journey .k9-sg:not(.on) b{ color: var(--pl-off); }
#journey .k9-sg:hover:not(.on){ background: var(--pl-hov); }
#journey .k9-sg:hover:not(.on) b{ color: var(--pl-ink); }
#journey .k9-sg:active:not(.on){ background: var(--pl-prs); }

/* --- Our Markets · a vertical RAIL, its panel beside it. ---------------- */
#reach .k9-vseg{ background: var(--pl-row); }
#reach .k9-vs.on{ background: var(--pl-on); }
#reach .k9-vs.on b{ color: var(--pl-ink); font-weight: 750; }
#reach .k9-vs:not(.on) b{ color: var(--pl-off); }
#reach .k9-vs:hover:not(.on){ background: var(--pl-hov); }
#reach .k9-vs:hover:not(.on) b{ color: var(--pl-ink); }
#reach .k9-vs:active:not(.on){ background: var(--pl-prs); }

/* --- Our Team · a DOCK of five plates, the specimen directly beneath. ---
       The plate stays white at every state — it is a portrait, not part of
       the row — so only the tile behind it steps. */
#people .k9-five{ background: var(--pl-row); }
#people .k9-pc.on{ background: var(--pl-on); }
#people .k9-pc.on b{ color: var(--pl-ink); font-weight: 750; }
#people .k9-pc:not(.on) b{ color: var(--pl-off); }
#people .k9-pc:hover:not(.on){ background: var(--pl-hov); }
#people .k9-pc:hover:not(.on) b{ color: var(--pl-ink); }
#people .k9-pc:active:not(.on){ background: var(--pl-prs); }


/* ==========================================================================
   4 · CONTACT US
   ========================================================================== */

/* --- The office rail · a vertical RAIL. -------------------------------- */
#office .lx-rail{ background: var(--pl-row); background-image: none; }
#office .lx-r[aria-selected="true"]{
  background: var(--pl-on); background-image: none;
  box-shadow: none; color: var(--pl-ink);
}
#office .lx-r:hover:not([aria-selected="true"]){
  background: var(--pl-hov); background-image: none; color: var(--pl-ink);
}
#office .lx-r:not([aria-selected="true"]){ color: var(--pl-off); }
#office .lx-r[aria-selected="true"]::before{ display: none; }


/* ==========================================================================
   5 · LEGAL DOCUMENTS
   ========================================================================== */

/* --- The document categories · a TRACK. Was the only group wearing the
       brand tint #EEF4FE; the tint goes back to being a band colour. ----- */
/* .w3 .w3-rail in legal/_doc.css is (0,2,0) — a bare nav.w3-rail (0,1,1)
   loses to it however late this file loads. Match on the id instead. */
#docs .w3-rail{ background: var(--pl-row); }
#docs .w3-cat[aria-current="true"]{
  background: var(--pl-on); color: var(--pl-ink); font-weight: 750;
  box-shadow: 0 0 0 1px var(--pl-ring);
}
#docs .w3-cat:not([aria-current="true"]){ color: var(--pl-off); }
#docs .w3-cat:hover:not([aria-current="true"]){ background: var(--pl-hov); color: var(--pl-ink); }


/* ==========================================================================
   6 · FOCUS — one visible ring for every control the ladder paints, because
   a chosen state made of ground tone alone gives the keyboard nothing.
   ========================================================================== */
#tabs button:focus-visible,
#svc3 .s3-cat:focus-visible,
#hp1 .hp-tab:focus-visible,
#about5 .ab-ftab:focus-visible,
#pricing .a9-chip:focus-visible,
#journey .k9-sg:focus-visible,
#reach .k9-vs:focus-visible,
#people .k9-pc:focus-visible,
#office .lx-r:focus-visible,
#docs .w3-cat:focus-visible{
  outline: 2px solid var(--accent, #1A73E8);
  outline-offset: 2px;
}
