/* ==========================================================================
   CAMPAIGN OPTIONS — "INDEX COLUMN"
   Applied 2026-09-04 to google-ads.html from the appearance lab
   /gads-campaign-look-r7m9-v08.html (version 08 of ten).

   What it changes: the APPEARANCE of #gads-services only. No markup, no
   script, no wording, no state and no interaction is touched — the section
   still carries the same six cards, the same four questions per card, the
   same rail, the same banner and the same chooser. This file was verified
   against a content fingerprint of the live section at 1600/1280/834/390.

   The idea: the hierarchy is inverted. Each card opens with an index and the
   service NAME on a pale header block above the picture, so travelling the
   rail is reading a list of names rather than looking at six pictures. The
   rhythm is label -> picture -> detail.

   Two accessibility defects of the previous appearance are fixed here:
     - the question rows were 39px tall, under the tap-target floor
     - "One call, about 20 minutes" was 4.10:1 on the tinted banner
   It also works around a live bug in gads-fit-c5/chooser.css, whose
   `flex:1 1 0` collapsed both banner buttons between 621px and 860px.

   Loaded LAST in the head, after gads-vm-v1/vm.css, so it settles the
   cascade at matching specificity. Every selector is scoped to
   #gads-services and there is not one !important in the file.
   ========================================================================== */

/* ==========================================================================
   0 · THE SECTION'S OWN TOKENS
   One place for the values the five parts share, so the rhythm is a system
   and not six coincidences.
   ========================================================================== */
#gads-services.sv{
  --ix-paper:  #FFFFFF;   /* the section ground, unchanged: white          */
  --ix-shelf:  #F4F7FC;   /* the header block behind index + name          */
  --ix-band:   #EEF4FE;   /* the closing band                              */
  --ix-edge:   #CFE0FD;   /* the hairline that goes with the band          */
  --ix-rule:   #E1E6EE;   /* the structural hairline (card, header block)  */
  --ix-hair:   #EDF0F5;   /* the lighter hairline between question rows    */
  --ix-navy:   #0F1B3D;   /* the firm rule — a mark, never a ground        */
  --ix-blue:   #1A73E8;   /* the one open-state accent, on all six cards   */
  --ix-blue-g: #E8F0FE;   /* its ground                                    */
  --ix-blue-i: #0B3FA8;   /* its ink                                       */
  --ix-r:      10px;      /* square shoulders — the orderly radius         */

  background: var(--ix-paper);
}


/* ==========================================================================
   1 · THE SECTION HEADER — the inversion, stated once
   --------------------------------------------------------------------------
   vm.css sets this row as a flex with the standing line pushed to the far
   right, on the headline's last baseline. This version reads top to bottom
   in one narrow left measure instead — label, words, words — because that
   is exactly the order every card below repeats.
   ========================================================================== */
#gads-services .sv-head{
  display: block; max-width: none; margin-inline: 0; text-align: left;
}

/* the eyebrow: mono, tracked, no accent dash — the same voice as a card's
   index, so the section's own label and the list's labels rhyme */
#gads-services .sv-head .k-eyebrow{
  display: block; margin: 0 0 clamp(11px, 1.1vw, 15px);
  font-family: var(--mono); font-weight: 600;
  font-size: 10.6px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-2);
}
#gads-services .sv-head .k-eyebrow::before{ display: none; }

#gads-services .sv-head .k-h2{
  display: block; max-width: 16ch; margin: 0; margin-inline: 0;
  font-size: clamp(29px, 3.35vw, 50px); line-height: 1.0;
  letter-spacing: -.05em; font-weight: 800; text-wrap: balance;
  color: var(--ink);
}
/* the coloured full stop the headline ends on stays, one shade firmer */
#gads-services .sv-head .k-h2 i{ color: var(--ix-blue); }

/* set CLOSE under the headline and held to a narrow left measure — the
   supporting line belongs to the headline, it is not a second column */
#gads-services .sv-head .k-sub{
  display: block; margin: clamp(12px, 1.2vw, 16px) 0 0; margin-inline: 0;
  max-width: 46ch; font-size: clamp(15px, 1.02vw, 16.4px); line-height: 1.55;
  text-wrap: balance;
  color: var(--ink-2);
}


/* ==========================================================================
   2 · THE FIRM RULE
   --------------------------------------------------------------------------
   The empty .sv-group row (a script's dock — it must stay) becomes the
   section's spine: two pixels of navy for the width of a label, then the
   hairline runs to the end of the lane. Firm where the reading starts,
   quiet where it does not.
   ========================================================================== */
#gads-services .sv-group.is-bare{
  display: block; height: 2px; min-height: 0;
  margin-top: clamp(22px, 2.4vw, 34px); padding: 0; border: 0;
  background: linear-gradient(90deg,
              var(--ix-navy) 0 clamp(64px, 8vw, 108px),
              var(--ix-rule) clamp(64px, 8vw, 108px) 100%);
}


/* ==========================================================================
   3 · THE RAIL
   --------------------------------------------------------------------------
   Unchanged in behaviour: a flex scroller, mandatory snap, keyboard travel,
   no arrows. Only the peek is widened a little, because in this version the
   thing peeking is the NEXT INDEX AND NAME — the list visibly continues,
   which is the whole point of numbering it.
   ========================================================================== */
#gads-services .y5{ margin-top: clamp(16px, 1.8vw, 24px); }

#gads-services #gsvc-six{
  --y5-gap: 20px;
  --y5-peek: 146px;
}
#gads-services #gsvc-six .sc{
  flex: 0 0 calc((100% - 3*var(--y5-gap) - var(--y5-peek)) / 3);
}

/* the ends: nothing. The white wash that used to sit over the first and last
   card was removed with the rest of the site's edge fades on 2026-09-09 — a
   card ends on its own border now. Kept as a note so the section's own
   gsvc-rail.css is not "fixed" by re-adding one here. */


/* ==========================================================================
   4 · THE CARD — a four-row list entry
   --------------------------------------------------------------------------
   .sc becomes a one-column grid and .sc-txt becomes display:contents, so the
   name can be lifted ABOVE the picture without one character of markup
   moving. Every child is placed explicitly (never auto-placed), and the
   benefit line takes the 1fr row, which is what keeps the four questions
   pinned to the foot of all six cards exactly as it did before.

        row 1  .sc-name   index + name, on the pale shelf
        row 2  .sc-pic    the picture, full-bleed
        row 3  .sc-line   the benefit line   (1fr — absorbs the slack)
        row 4  .gsa       the four questions (flush to the foot)
   ========================================================================== */
#gads-services #gsvc-six .sc{
  --ix-pad: 20px;                                  /* the card's one gutter */
  --ix-name: clamp(21px, 1.78vw, 26px);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;                       /* nothing sits proud in this one */
  border: 1px solid var(--ix-rule);
  border-radius: var(--ix-r);
  background: var(--ix-paper);
  /* No shadow — client instruction, 2026-09-04. The card is held by its 1px
     rule alone, which is why this appearance survives losing the depth: the
     edge was never the shadow's job here. Nothing else in the section paints
     one either, so the six cards and the closing banner are all flat. */
  box-shadow: none;
}
#gads-services #gsvc-six .sc:hover{ border-color: #CFDAE9; }
#gads-services #gsvc-six .sc:focus-visible{ outline: 2px solid var(--ix-blue); outline-offset: 2px; }

/* the wrapper stops being a box so its three children become rows of the
   card itself — no markup change, no script depends on its geometry */
#gads-services #gsvc-six .sc-txt{ display: contents; }


/* ---------- row 1 · THE HEADER BLOCK: the index, then the name ----------- */
#gads-services #gsvc-six .sc-name{
  grid-row: 1; grid-column: 1;
  display: block;
  padding: 16px var(--ix-pad) 15px;
  background: var(--ix-shelf);
  border-bottom: 1px solid var(--ix-rule);
  font-size: var(--ix-name); font-weight: 800;
  line-height: 1.04; letter-spacing: -.046em;
  color: var(--ink); text-wrap: balance;
  /* one line of name is the block's floor. At every width in this file the
     card is wide enough for the longest name ("Google Remarketing Ads") on
     one line, so the six header blocks come out the same height and the six
     pictures line up across the rail — without paying for a second line of
     reserve that nothing ever uses. */
  min-height: calc(1.04em + 52px);
}

/* This used to generate 01-06 above the names. The count is gone: the shelf
   now carries a short stroke in the card's own deep ink, so the header block
   keeps its mark and its colour without ranking the six against each other. */
#gads-services #gsvc-six .sc-name::before{
  content: "";
  display: block; width: 28px; height: 3px; border-radius: 2px;
  margin-bottom: 11px;
  background: var(--hd);
}


/* ---------- row 2 · THE PICTURE, full-bleed and answering the name ------- */
#gads-services #gsvc-six .sc-pic{
  grid-row: 2; grid-column: 1;
  display: block; padding: 0;
  border-top: 0; border-bottom: 1px solid var(--he);
}
/* 4:3 — landscape, inside the safe band for the six drawn scenes, and a
   little shorter than the source's 5:4 because the picture is now the
   SECOND thing read, not the first */
#gads-services #gsvc-six .sc-pic .cv-well{
  aspect-ratio: 4/3; border-radius: 0; box-shadow: none;
}


/* ---------- row 3 · THE BENEFIT LINE ------------------------------------- */
#gads-services #gsvc-six .sc-line{
  grid-row: 3; grid-column: 1; align-self: start;
  margin: 0; padding: 15px var(--ix-pad) 18px;
  font-size: 14.2px; line-height: 1.5; color: var(--ink-2);
}


/* ==========================================================================
   5 · THE FOUR QUESTIONS — a ruled ledger across the whole card
   --------------------------------------------------------------------------
   The rows are full-bleed: the hairlines run edge to edge, the label sits on
   the card's gutter, and the mark is a small outlined SQUARE on the right.
   Nothing is rounded, nothing is inset — it reads as the tail of a list.
   ========================================================================== */
#gads-services #gsvc-six .gsa{
  grid-row: 4; grid-column: 1; align-self: end;
  display: block; width: 100%;
  margin: 0; padding: 0;
  border-top: 1px solid var(--ix-rule);
}
#gads-services #gsvc-six .gsa-r{
  position: relative; display: block;
  border-bottom: 1px solid var(--ix-hair);
}
#gads-services #gsvc-six .gsa-r:last-child{ border-bottom: 0; }

#gads-services #gsvc-six .gsa-h{
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  width: 100%; min-height: 45px;
  margin: 0; padding: 9px var(--ix-pad);
  border: 0; border-radius: 0; background: none; text-align: left;
  font: inherit; font-size: 13.4px; font-weight: 700;
  line-height: 1.3; letter-spacing: -.014em; color: var(--ink);
}

/* the control language: a 21px outlined square with a plus in it */
#gads-services #gsvc-six .gsa-h svg{
  box-sizing: border-box;
  width: 22px; height: 22px; padding: 4.5px;
  border: 1px solid #D5DDE9; border-radius: 5px;
  background: #FFFFFF; color: var(--ink-3);
  stroke-width: 2.4;
}
/* the box never turns — the mark inside it does, so the square stays square */
#gads-services #gsvc-six .gsa-h svg path{
  transform-box: fill-box; transform-origin: 50% 50%;
}

#gads-services #gsvc-six .gsa-h:hover{ color: var(--ix-blue-i); }
#gads-services #gsvc-six .gsa-h:not([aria-expanded="true"]):hover{ background: #F7F9FD; }
#gads-services #gsvc-six .gsa-h:not([aria-expanded="true"]):hover svg{
  border-color: #B9CFF0; color: var(--ix-blue);
}

/* the ring the source never showed properly */
#gads-services #gsvc-six .gsa-h:focus-visible{
  outline: 2px solid var(--ix-blue); outline-offset: -3px; border-radius: 0;
}

/* ---------- the open row: blue, full width, flush to the card edge ------- */
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]){
  background: var(--ix-blue-g);
  border-radius: 0; border-bottom-color: transparent;
  padding-left: 0;                        /* the source insets it — we do not */
}
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"])::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0; background: var(--ix-blue);
}
#gads-services #gsvc-six .gsa-h[aria-expanded="true"]{ color: var(--ix-blue-i); }
#gads-services #gsvc-six .gsa-h[aria-expanded="true"] svg{
  transform: none;                        /* cancel the source's box rotation */
  background: var(--ix-blue); border-color: var(--ix-blue); color: #FFFFFF;
}
#gads-services #gsvc-six .gsa-h[aria-expanded="true"] svg path{ transform: rotate(45deg); }

/* the answer is pushed out to the full width of the row it belongs to.
   display is authored here, so its [hidden] partner MUST be authored too —
   without the second rule every answer would be permanently visible. */
#gads-services #gsvc-six .gsa-b{
  display: block; padding: 0 var(--ix-pad) 14px;
}
#gads-services #gsvc-six .gsa-b[hidden]{ display: none; }
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]) .gsa-b{
  padding: 0 var(--ix-pad) 15px;
}
#gads-services #gsvc-six .gsa-p{
  display: block; font-size: 13.2px; line-height: 1.52; color: var(--ink-2);
}


/* ==========================================================================
   6 · THE CLOSING BANNER — the same block, one size up
   --------------------------------------------------------------------------
   Left: a short navy rule leading the sentence — the banner's own
   label-then-words block, in the section rule's voice. Then a vertical
   hairline, then the two actions and the time note.
   ========================================================================== */
#gads-services .sv-next{
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: clamp(20px, 3vw, 52px);
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(22px, 2.3vw, 32px) clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--ix-edge); border-radius: var(--ix-r);
  background: var(--ix-band);
  box-shadow: none;
}
#gads-services .sv-next-t{ min-width: 0; }
#gads-services .sv-next-t b{
  display: block;
  font-size: clamp(19px, 1.5vw, 23px); font-weight: 800;
  line-height: 1.16; letter-spacing: -.042em; color: var(--ink);
}
/* the label mark: no words, just the rule that says "a block starts here" */
#gads-services .sv-next-t b::before{
  content: ""; display: block;
  width: 54px; height: 2px; margin-bottom: 14px;
  background: var(--ix-navy);
}
#gads-services .sv-next-t p{
  margin-top: 10px; max-width: 52ch;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}

#gads-services .sv-next-a{
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 11px;
  padding-left: clamp(20px, 3vw, 52px);
  border-left: 1px solid var(--ix-edge);
}
#gads-services .sv-next-acts{ display: flex; align-items: center; gap: 10px; }

#gads-services .sv-btn{
  height: 50px; padding: 0 22px; border-radius: 8px;
  font-size: 14.6px; font-weight: 750; letter-spacing: -.012em;
  box-shadow: none;
}
#gads-services .sv-btn:not(.is-ghost){ background: var(--brand); color: #FFFFFF; }
#gads-services .sv-btn.is-ghost{
  background: #FFFFFF; color: var(--ink);
  border: 1px solid var(--ix-edge); box-shadow: none;
}
#gads-services .sv-btn.is-ghost:hover{ background: #F7FAFF; border-color: #A9C7F5; filter: none; }
#gads-services .sv-btn:not(.is-ghost):hover{ filter: brightness(1.06); }

/* the third and last mono voice in the section — and the source's 4.10:1
   grey is replaced with --ink-2, ~9.2:1 on this band */
#gads-services .sv-time{
  text-align: right;
  font-family: var(--mono); font-size: 11.4px; letter-spacing: .03em;
  color: var(--ink-2);
}


/* ==========================================================================
   7 · RESPONSIVE COMPOSITION
   The list never stops being a list: the header block, the picture and the
   ruled rows keep their order and their proportion at every width; only the
   gutter, the type step and how many entries are in view change.
   ========================================================================== */

/* ---- two entries in view + the next one's index and name --------------- */
@media (max-width: 1200px){
  #gads-services #gsvc-six{ --y5-gap: 18px; --y5-peek: 116px; }
  #gads-services #gsvc-six .sc{
    flex: 0 0 calc((100% - 2*var(--y5-gap) - var(--y5-peek)) / 2);
    --ix-name: clamp(21px, 2.5vw, 24px);
  }
}

/* ---- the banner stacks before the type does ---------------------------- */
@media (max-width: 900px){
  #gads-services .sv-next{
    grid-template-columns: minmax(0,1fr); gap: 18px; align-items: stretch;
  }
  #gads-services .sv-next-t p{ max-width: none; }
  #gads-services .sv-next-a{
    align-items: stretch; justify-content: flex-start; gap: 12px;
    padding-left: 0; padding-top: 18px;
    border-left: 0; border-top: 1px solid var(--ix-edge);
  }
  /* stated in full: vm.css turns this into a column at <=860px, and a
     `flex:1 1 0` in a COLUMN sets the button's HEIGHT basis to zero, which
     silently collapses a 50px button to 17px. The row stays a row here. */
  #gads-services .sv-next-acts{ flex-direction: row; align-items: center; gap: 10px; }
  #gads-services .sv-next-acts .sv-btn{ flex: 1 1 0; min-width: 0; height: 50px; }
  #gads-services .sv-time{ text-align: left; }

  /* the two source a11y defects, fixed: a 45px row becomes a 48px one */
  #gads-services #gsvc-six .gsa-h{ min-height: 48px; padding-block: 11px; }
}

/* ---- one entry in view, and a slice of the next ------------------------ */
@media (max-width: 700px){
  #gads-services #gsvc-six{ --y5-gap: 12px; --y5-peek: 46px; }
  #gads-services #gsvc-six .sc{
    flex: 0 0 calc(100% - var(--y5-gap) - var(--y5-peek));
    --ix-pad: 16px;
    --ix-name: 20.5px;
  }
  /* one card is in view, so the two-line reserve buys nothing and only
     costs height — the header block sizes to its own name instead */
  #gads-services #gsvc-six .sc-name{ min-height: 0; padding: 14px var(--ix-pad) 14px; }
  #gads-services #gsvc-six .sc-name::before{ margin-bottom: 8px; }
  #gads-services #gsvc-six .sc-line{ padding: 13px var(--ix-pad) 16px; font-size: 14px; }
  #gads-services #gsvc-six .gsa-h{ font-size: 13.2px; }
  #gads-services #gsvc-six .gsa-p{ font-size: 13px; }

}

/* ---- phone: one surface, one gutter ------------------------------------ */
@media (max-width: 660px){
  #gads-services .sv-head .k-h2{ max-width: none; }
  #gads-services .sv-head .k-sub{ max-width: none; font-size: 15px; }
  #gads-services .sv-group.is-bare{ margin-top: 20px; }
  #gads-services .sv-next{
    margin-top: 24px; padding: 20px 18px 22px; border-radius: var(--ix-r);
  }
  #gads-services .sv-next-t b{ font-size: 19px; }
  #gads-services .sv-next-t b::before{ width: 44px; margin-bottom: 12px; }
  #gads-services .sv-next-t p{ font-size: 14.2px; }
  #gads-services .sv-next-acts{ flex-direction: column; align-items: stretch; }
  #gads-services .sv-next-acts .sv-btn{ width: 100%; flex: none; height: 50px; }
  #gads-services .sv-time{ text-align: center; }
}


/* ==========================================================================
   8 · MOTION
   Nothing moves on its own. The only transitions are direct answers to a
   pointer or a click, and every one of them is declared inside
   prefers-reduced-motion:no-preference — so under `reduce` the states swap
   instantly and nothing is mid-flight.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  #gads-services #gsvc-six .sc{ transition: border-color .2s var(--ease); }
  #gads-services #gsvc-six .gsa-h{
    transition: background-color .16s var(--ease), color .16s var(--ease); }
  #gads-services #gsvc-six .gsa-h svg{
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease); }
  #gads-services #gsvc-six .gsa-h svg path{ transition: transform .22s var(--ease); }
  #gads-services .sv-btn{ transition: filter .16s var(--ease), background-color .16s var(--ease),
                                      border-color .16s var(--ease); }
}
@media (prefers-reduced-motion: reduce){
  #gads-services #gsvc-six .sc,
  #gads-services #gsvc-six .gsa-h,
  #gads-services #gsvc-six .gsa-h svg,
  #gads-services #gsvc-six .gsa-h svg path,
  #gads-services .sv-btn{ transition: none; }
}