/* Ogle Digital · service pages (Google Ads Management, Ecommerce Google Ads, Google Shopping, Free Audit).
   Loaded after /v5/styles.css: same tokens, type and colours, but service-page furniture rather than the homepage's set pieces.
   The homepage keeps the playing cards, the dice, the King of Hearts, the paper-stack report and the logo sign-off.

   Components, all inside <section class="sec"> (add sec--raise to alternate the background) and a .container:
   .svc-hero + .crumbs + .glance   hero: breadcrumb, H1, the "Not" list, lead, CTA, facts card with Chris's face
   .tiles > .tile (.tile--cta)     numbered grid of up to six cards, the last one pink and pointing somewhere
   .steps4                         up to four numbered steps across
   .whodoes + .org                 the one-person org chart beside a short claim
   .calls                          a white card listing items (the call agenda on Google Ads Management)
   .ledger                         a sum: rows of label and figure, the total row in pink
   .stairs + .grow__end            the account handed down the agency stairs (Google Ads Management only)
   .fitgrid > .fitcard             who it's for and isn't; for one card use .split.fitsplit > h2 + .fitcard
   .qpair > .q                     two testimonials
   .faq details                    the questions, first one open
   .ctaband                        the closing band with Chris's face and the three steps
   One paragraph size for every card on a page: --card-p. */

/* nav: you are here */
.hdr__nav a.is-here{color:var(--text);background-size:100% 1px;background-position:0 100%}

/* one body size for every card's paragraph on this page, so nothing reads smaller than the prose around it */
:root{--card-p:var(--fs-body)}

/* ---------- Hero: a service page, not the homepage. Breadcrumb, plain headline, the facts at a glance ---------- */
.svc-hero{padding:clamp(24px,4vw,64px) 0 clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
.svc-hero__grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media (min-width:980px){.svc-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(40px,6vw,96px)}}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,2vw,22px);font:400 14px/1.4 var(--f);color:var(--muted)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.crumbs [aria-current]{color:var(--t2)}
.svc-hero__h1{font:800 clamp(34px,8.6vw,76px)/var(--lh-head) var(--f);letter-spacing:-.04em;color:var(--text);text-wrap:balance;max-width:15ch}
@media (min-width:1920px){.svc-hero__h1{font-size:96px}}
.svc-hero__nots{margin-top:clamp(16px,2vw,24px)}
.svc-hero__lead{margin-top:clamp(16px,2vw,24px);font:400 var(--fs-lead)/1.45 var(--f);color:var(--t2);max-width:40ch}
.svc-hero__lead b{color:var(--text);font-weight:700}
.svc-hero__cta{margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:599px){.svc-hero__cta .btn{width:100%}}

.glance{border-radius:var(--radius);background:var(--navy-raise);border:1px solid var(--line-strong);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.glance__who{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.glance__who img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid var(--t4);flex:0 0 auto}
.glance__who b{display:block;font:800 19px/1.2 var(--f);color:var(--text)}
.glance__who span{font:400 15px/1.35 var(--f);color:var(--text-2)}
.glance__facts{margin:0}
.glance__facts div{display:grid;gap:4px;padding:14px 20px;border-top:1px solid var(--line)}
.glance__facts div:first-child{border-top:0}
.glance__facts dt{font:700 13px/1.2 var(--f);color:var(--muted)}
.glance__facts dd{margin:0;font:700 var(--fs-body)/1.35 var(--f);color:var(--text)}
.glance__facts a{color:var(--t2)}

/* ---------- Five problems: a numbered grid, one type scale throughout ---------- */
.probs__intro{margin-bottom:clamp(28px,4vw,48px)}
.tiles{display:grid;gap:clamp(14px,1.6vw,20px)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:grid;align-content:start;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:var(--radius);background:var(--navy-raise);border:1px solid var(--line);transition:border-color var(--d-fast)}
.tile:hover{border-color:var(--line-strong)}
.tile__n{font:800 15px/1 var(--f);color:var(--t4);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tile__t{font:800 var(--fs-h3)/1.25 var(--f);letter-spacing:-.015em;color:var(--text)}
.tile__t a{color:inherit;text-decoration-color:var(--t4);text-decoration-thickness:2px}
.tile p{font:400 var(--card-p)/1.55 var(--f);color:var(--text-2)}
.tile--cta{background:var(--t2);border-color:var(--t2);color:var(--pale-ink)}
.tile--cta p{color:var(--pale-muted)}
.tile--cta .tile__big{font:800 var(--fs-h3)/1.25 var(--f);letter-spacing:-.015em;color:var(--pale-ink)}
.tile__link{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:700 var(--fs-body)/1 var(--f);color:var(--pale-ink);text-decoration-color:var(--pink-ink);text-decoration-thickness:2px}
.tile--cta :focus-visible{outline-color:var(--navy)}

/* ---------- A sum as a ledger: label left, figure right, total row in pink ---------- */
.green{color:var(--google-green);font-weight:700}
.ledger{border-radius:var(--radius);background:var(--navy);border:1px solid var(--line);overflow:hidden}
.ledger__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 20px;border-top:1px solid var(--line);color:var(--text-2);font-size:var(--card-p)}
.ledger__row:first-child{border-top:0}
.ledger__row b{font:800 var(--fs-big)/1 var(--f);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger__row--bad b{color:var(--t4)}
.ledger__row--tot{background:var(--t2);color:var(--pale-muted);border-top:0}
.ledger__row--tot span{font-weight:700;color:var(--pale-ink)}
.ledger__row--tot b{font-size:clamp(40px,5vw,64px);letter-spacing:-.04em;color:var(--pale-ink)}
.ledger__foot{display:flex;justify-content:flex-end;padding:14px 20px}
.chip-green{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(143,227,176,.12);color:var(--google-green);font:700 14px/1 var(--f)}
.chip-green svg{width:12px;height:12px;fill:currentColor}

/* ---------- Steps: up to four numbered cards across. Then the one-person org chart ---------- */
.steps4{display:grid;gap:clamp(14px,1.6vw,20px);counter-reset:s}
@media (min-width:700px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps4 li{position:relative;display:grid;align-content:start;gap:14px;padding:clamp(22px,2.4vw,28px);border-radius:var(--radius);border:1px solid var(--line);background:var(--navy-raise)}
.steps4__n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--t4);color:var(--navy);font:800 17px/1 var(--f)}
.steps4 li:last-child .steps4__n{background:var(--t1)}
.steps4 p{font:400 var(--card-p)/1.55 var(--f);color:var(--text-2)}
@media (max-width:699px){.steps4 li{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px}.steps4 p{padding-top:8px}}
@media (min-width:1100px){.steps4 li:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(22px,2.4vw,28px) + 19px);left:calc(clamp(22px,2.4vw,28px) + 48px);right:-12px;height:2px;background:var(--line-strong)}}
.whodoes{margin-top:clamp(36px,5vw,64px);align-items:center}
.whodoes__lines{font:800 var(--fs-big)/1.25 var(--f);letter-spacing:-.02em;color:var(--text)}
.whodoes .closer{margin-top:var(--s6)}

.org{padding:22px;border-radius:var(--radius);background:var(--navy-raise);border:1px solid var(--line);display:grid;justify-items:center}
.org__k{justify-self:start;margin-bottom:14px;font:700 13px/1 var(--f);color:var(--muted)}
.org__top{position:relative;padding-bottom:22px}
.org__top::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:22px;background:var(--line-strong)}
.org__row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;padding-top:22px}
.org__row::before{content:"";position:absolute;top:0;left:16.66%;right:16.66%;height:2px;background:var(--line-strong)}
.org__row .org__node{position:relative;min-width:0}
.org__row .org__node::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:var(--line-strong)}
.org__node{display:grid;justify-items:center;gap:4px;padding:12px 8px;border-radius:12px;background:var(--navy);border:1px solid var(--line);text-align:center;min-width:120px}
.org__node img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--t4)}
.org__node b{font:700 14px/1.2 var(--f);color:var(--text)}
.org__node span{font:400 13px/1.2 var(--f);color:var(--muted)}
html.js .org:not(.in) .org__row .org__node{opacity:0;transform:translateY(10px)}
.org__row .org__node{transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.org__row .org__node:nth-child(2){transition-delay:120ms}.org__row .org__node:nth-child(3){transition-delay:240ms}
@media (prefers-reduced-motion:reduce){html.js .org:not(.in) .org__row .org__node{opacity:1;transform:none}}

/* ---------- Agencies grow: the account goes down the stairs, and the answer sits under it ---------- */
.grow__liam{font-style:italic;color:var(--t2)}
.stairs{margin-top:var(--s5)}
.stairs__set{position:relative;height:clamp(200px,22vw,260px)}
.st{position:absolute;bottom:0;left:calc(var(--k)*25%);width:25%;height:calc(100% - var(--k)*22% - 18%);background:var(--navy-panel);border:1px solid var(--line-strong);border-bottom:0;border-radius:8px 8px 0 0;display:grid;align-content:start;justify-items:center;padding-top:14px}
.st:nth-child(4){background:var(--navy-edge)}
.st em{font:700 14px/1 var(--f);font-style:normal;color:var(--muted)}
.st:nth-child(4) em{color:var(--t2)}
.stairs__acct{position:absolute;left:12.5%;bottom:82%;transform:translate(-50%,-6px);padding:8px 12px;border-radius:8px;background:var(--t4);color:var(--navy);font:800 13px/1 var(--f);white-space:nowrap;box-shadow:0 10px 24px -10px var(--shadow-pink)}
.stairs.in .stairs__acct{animation:down 3.2s var(--ease) 400ms both}
@keyframes down{0%,16%{left:12.5%;bottom:82%}30%,46%{left:37.5%;bottom:60%}60%,76%{left:62.5%;bottom:38%}100%{left:87.5%;bottom:16%}}
html.no-js .stairs__acct{left:87.5%;bottom:16%}
@media (prefers-reduced-motion:reduce){.stairs__acct{left:87.5%!important;bottom:16%!important;animation:none!important}}
@media (max-width:480px){.stairs__acct{font-size:12px;padding:7px 9px}}
.grow__end{margin-top:0;padding:clamp(20px,2.4vw,28px);border-radius:0 0 var(--radius) var(--radius);background:var(--t4);color:var(--navy)}
.grow__big{font:800 var(--fs-statement)/1.02 var(--f);letter-spacing:-.035em}
.grow__sub{margin-top:8px;font:700 var(--fs-body)/1.4 var(--f)}

/* ---------- Who this is for: one card, or a for and not-for pair ---------- */
.fitgrid{display:grid;gap:clamp(14px,1.6vw,20px)}
@media (min-width:860px){.fitgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fitcard{display:grid;align-content:start;gap:12px;padding:clamp(24px,3vw,36px);border-radius:var(--radius);border:1px solid var(--line)}
.fitcard p{font:400 var(--card-p)/1.55 var(--f);color:var(--text-2)}
.fitcard--yes{background:var(--navy)}
/* a single card sits in the right half with the heading in the left, so the row is never half empty */
.fitsplit{align-items:start}
.fitsplit .h2{margin-bottom:0}
.fitcard--no{background:var(--navy-deep);border-color:var(--line-strong)}
.fitcard .fitcard__k{font:800 13px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.fitcard .fitcard__t{font:800 var(--fs-h3)/1.3 var(--f);letter-spacing:-.015em;color:var(--text)}
.fitcard .fitcard__b{font:700 var(--fs-lead)/1.3 var(--f);color:var(--text-2)}
.fitcard__b b{color:var(--t4)}
.fitcard .fitcard__nice{font:800 var(--fs-big)/1.1 var(--f);letter-spacing:-.025em;color:var(--t4)}

/* ---------- Testimonials: two side by side ---------- */
.qpair{display:grid;gap:clamp(16px,2vw,24px);align-items:start}
@media (min-width:900px){.qpair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- FAQ ---------- */
.faq__list{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font:700 var(--fs-lead)/1.3 var(--f);letter-spacing:-.01em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:14px;height:14px;border-right:2px solid var(--t4);border-bottom:2px solid var(--t4);transform:rotate(45deg) translateY(-4px);transition:transform var(--d-base) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__a{padding:0 0 20px;color:var(--text-2);max-width:62ch}
.faq__a p+p{margin-top:.8em}
.faq__a a{color:var(--t2)}

/* ---------- Closing call to action: a band with his face, not the homepage's court card ---------- */
.ctaband{padding:clamp(56px,7vw,104px) 0;background:var(--navy-deep);border-top:1px solid var(--line)}
.ctaband__card{display:grid;gap:clamp(24px,3vw,40px);align-items:center;padding:clamp(24px,4vw,56px);border-radius:calc(var(--radius) + 6px);background:var(--navy-raise);border:1px solid var(--line-strong)}
@media (min-width:760px){.ctaband__card{grid-template-columns:auto minmax(0,1fr)}}
.ctaband__face{width:clamp(120px,16vw,200px);aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 25%;border-radius:var(--radius);border:2px solid var(--t4)}
.ctaband__h{font:800 var(--fs-h2)/var(--lh-head) var(--f);letter-spacing:-.03em;color:var(--text);margin-bottom:clamp(18px,2.4vw,28px)}
.three{counter-reset:t;display:grid;gap:8px}
.three li{counter-increment:t;display:grid;grid-template-columns:2.2ch minmax(0,1fr);gap:10px;font:700 var(--fs-lead)/1.35 var(--f);color:var(--text)}
.three li::before{content:counter(t);color:var(--t4)}
.ctaband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(22px,3vw,32px)}
.ctaband__cta p{color:var(--text-2);max-width:34ch}
@media (max-width:599px){.ctaband__cta .btn{width:100%}}

/* ---------- Calls: a white card listing what every call covers ---------- */
.calls{border-radius:var(--radius);background:var(--t1);color:var(--pale-ink);overflow:hidden;box-shadow:0 30px 60px -26px rgba(0,0,0,.7)}
.calls__h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--pale-line);font:800 16px/1.2 var(--f)}
.calls__chip{padding:6px 10px;border-radius:999px;background:var(--navy);color:var(--t1);font:700 13px/1 var(--f);white-space:nowrap}
.calls ol{counter-reset:c}
.calls li{counter-increment:c;display:grid;grid-template-columns:2.4ch minmax(0,1fr);gap:12px;padding:16px 22px;border-top:1px solid var(--pale-line);font:700 var(--card-p)/1.4 var(--f);color:var(--pale-ink);transition:opacity 500ms var(--ease),transform 500ms var(--ease);transition-delay:calc(150ms + var(--i,0)*120ms)}
.calls li:first-child{border-top:0}
.calls li::before{content:counter(c);color:var(--pink-ink);font-variant-numeric:tabular-nums}
html.js .calls:not(.in) li{opacity:0;transform:translateX(-8px)}
@media (prefers-reduced-motion:reduce){html.js .calls:not(.in) li{opacity:1;transform:none}}
.split--center{align-items:center}