/* ============================================================
   WP BRIDGE
   The only WordPress-specific stylesheet. `digihandler.css` next to this file
   is a verbatim copy of the Next.js project's `app/globals.css` and is never
   edited, so it can be re-copied whenever the source design changes. Anything
   that exists only because this is WordPress — font tokens, Hello Elementor
   and Elementor resets, block-editor content styling, the admin bar — belongs
   here, and this file loads last.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT TOKENS
   Upstream, next/font declares --f-d / --f-logo / --f-b on <body> and
   globals.css re-points --font-d / --font-logo / --font-b at them. Nothing
   declares them here, so without this block every var(--f-*) reference
   resolves to the guaranteed-invalid value and the three font tokens collapse.
   Declared on :root so they are in scope for the body rules in the ported
   file; the generic fallback chains stay where they are, in globals.css.

   Each token names the real family AND the metric-matched `* Fallback` face
   that fonts.css defines, in that order — byte-for-byte the value next/font
   emits upstream. The second name is not decoration: it is a local Times New
   Roman / Arial re-scaled by size-adjust and ascent/descent overrides to
   occupy the same box as the webfont, so whatever renders during the
   font-display:swap window lays out identically to what replaces it. Dropping
   it (as the Google Fonts build did) falls through to un-adjusted Georgia /
   system-ui, and the swap then reflows the page.
   ------------------------------------------------------------ */
:root{
  --f-d:"Newsreader","Newsreader Fallback";        /* headings, hero, display copy */
  --f-logo:"Bodoni Moda","Bodoni Moda Fallback";   /* wordmark lockup + brand name in prose */
  --f-b:"Inter","Inter Fallback";                  /* body */
}

/* ------------------------------------------------------------
   2. RESETS — Hello Elementor, Elementor's kit, the block library
   Elementor writes its global kit onto <body> as `.elementor-kit-N`, i.e. at
   class specificity, so a plain `body{}` rule in the design file loses to it.
   These re-assert the design's canvas at a weight that wins without !important.
   ------------------------------------------------------------ */
/* `body[class]` rather than plain `body`: <body> always carries WordPress'
   body_class(), so the attribute selector is free, and it lifts these to
   (0,1,2) — above Elementor's own `.elementor-kit-N` at (0,1,0) — without
   an !important anywhere. The light ramp is left entirely to globals.css,
   whose `html[data-theme="light"] body` rule is (0,1,2) too and comes
   earlier, so this must not restate the background for that case. */
html body[class]{
  color:var(--white);
  font-family:var(--font-b);
  font-size:16px;
}
/* Hello Elementor's reset asserts `body{line-height:1.5}`; the original build
   leaves body at `normal` and lets globals.css set line-height per component.
   Leaving Hello's value in place inflated the nav island 65->72.5px, the CTA
   43->47px, and every page by 0.8-4.5%. Restore `normal` and let the design
   system own it — do NOT substitute a different blanket value here. */
html body[class]{
  line-height:normal;
}
html:not([data-theme="light"]) body[class]{background:var(--black)}

/* Hello's reset gives .site-main a max-width and centres it; the design does
   its own containment through .wrap, so the outer element must be full-bleed. */
.site-main,
main#main{max-width:none;width:100%;margin:0;padding:0}

/* Hello underlines every anchor inside .page-content. The design's base rule
   (`a{color:inherit;text-decoration:none}`) is deliberately the lowest
   possible specificity, so it cannot beat that; this restores it and lets the
   prose rules below opt links back in explicitly. */
.page-content a,
.comments-area a{text-decoration:none}

/* The block library's own colours and the emoji img rules are the only two
   parts of wp-block-library that reach this design. */
img.wp-smiley,img.emoji{background:none}

/* --- the element-selector problem ---
   globals.css establishes its baseline with `*{margin:0;padding:0}` and
   `a{color:inherit}`. `*` is specificity (0,0,0), so it loses to every
   element-selector rule in Hello Elementor's reset no matter which file loads
   later. Upstream there was no such reset, so these are exactly the
   declarations the ported design silently assumed away. Each block below
   restores that assumption at the same specificity as the rule it undoes,
   which is why none of it needs !important. */

/* 1. Hello styles a bare <button> as a pink outlined pill — 1px #c36 border,
      #c36 text, .5rem/1rem padding, and a solid #c36 fill on hover/focus.

      The reset that used to live here was written as
      `button,[type="button"],[type="reset"],[type="submit"]{...}`. Every one
      of those attribute selectors is (0,1,0) — the same weight as a class —
      and this file loads AFTER digihandler.css, so the reset was winning the
      tie against the design's OWN button rules rather than against Hello's.
      Measured consequences (1440px, dark and light, all six audit pages):
        .theme-toggle  border-radius 50% -> 0,  border 1px -> 0
        .btn.btn-y     submit background var(--yellow) -> transparent,
                       colour #000 -> inherited white, radius 100px -> 0
      i.e. the yellow CTA on every form rendered as bare text.

      Split in two. The destructive half is now scoped to buttons that carry
      no class at all — (0,2,0), which still clears Hello's (0,1,0) — so the
      design's class rules are untouched. Hello's own (0,1,0) declarations
      then lose to those class rules on source order, because reset.css is
      enqueued before digihandler.css.

      `:where(:not([class]))` rather than `:not([class])`. The plain form is
      (0,2,0), which also outranks the six places where the design styles an
      UNCLASSED button through its parent — `.acc > button{color:#fff}` is
      only (0,1,1). Measured with that form: both mobile-drawer accordion
      buttons ("Services +", "Free tools +") inherited rgb(11,16,32) in light
      mode instead of #fff.

      `:where()` contributes nothing, so each arm below carries exactly the
      weight of the thing it is undoing: the `button` arm is (0,0,1), matching
      Hello's `button{}`, and each `[type=…]` arm is (0,1,0), matching Hello's
      `[type=button]{}`. Both clear Hello on source order and both lose to the
      design's (0,1,1) parent-scoped rules — so `.acc > button` keeps its
      colour, while `border-radius:0` (which that rule does not declare) still
      lands and Hello's 3px corner stays off. */
button:where(:not([class])),
[type="button"]:where(:not([class])),
[type="reset"]:where(:not([class])),
[type="submit"]:where(:not([class])){
  background-color:transparent;border:0;border-radius:0;color:inherit;
  padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;
  text-align:center;white-space:normal;
}
/* For a button that DOES carry a class, the design's own rule already restates
   background, colour, border, radius, font and transition wherever it cares.
   The only declarations of Hello's that still land are the ones globals.css
   establishes through `*{margin:0;padding:0}` and through plain inheritance —
   zero specificity, so they never won. Restore exactly those. `.btn` is
   excluded because it sets its own padding (15px 28px), font-size and
   font-weight, and this rule at (0,2,0) would otherwise outrank it. */
button[class]:not(.btn),[type="button"][class]:not(.btn),
[type="reset"][class]:not(.btn),[type="submit"][class]:not(.btn){
  padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;
  white-space:normal;
}

/* Hello's interactive fill:
     [type=button]:focus,[type=button]:hover,[type=submit]:focus,
     [type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff}
   The attribute arms are (0,2,0), so the previous neutraliser here — which
   covered `button:focus` at (0,1,1) and omitted `[type=…]:focus` entirely —
   could not reach them. Measured: every `<button type="button">` and
   `<button type="submit">` on the site took a #c36 magenta fill on focus, and
   .theme-toggle took #fff text in light mode where the design asks for
   var(--white) (#0b1020).

   Neutralised at Hello's own weight for buttons with no class. Classed
   buttons keep their design colours, restated one notch up in the block
   below, because a blanket `background-color:transparent` here would flatten
   .btn-y's yellow just as surely as Hello's magenta did. */
button:hover,button:focus,
[type="button"]:hover,[type="button"]:focus,
[type="reset"]:hover,[type="reset"]:focus,
[type="submit"]:hover,[type="submit"]:focus{background-color:transparent}
button:where(:not([class])):hover,button:where(:not([class])):focus,
[type="button"]:where(:not([class])):hover,[type="button"]:where(:not([class])):focus,
[type="reset"]:where(:not([class])):hover,[type="reset"]:where(:not([class])):focus,
[type="submit"]:where(:not([class])):hover,[type="submit"]:where(:not([class])):focus{color:inherit}
/* The colour neutraliser above is (0,1,1) on the `button` arm and (0,2,0) on
   the `[type=…]` arms — enough to clear Hello, but still above the design's
   parent-scoped (0,1,1) rules, so an unclassed button that the design colours
   through its parent would go back to inheriting. Measured: the drawer
   accordion buttons turned rgb(11,16,32) on hover and focus in light mode
   against the original's #fff. Restated at (0,2,1), which clears both. Each
   value is the one digihandler.css already declares for the resting state. */
.acc > button:hover,.acc > button:focus{color:#fff}                   /* line 941  */
.fq button:hover,.fq button:focus{color:#fff}                         /* line 1031 */
.reels-nav button:focus{color:#fff}                                   /* line 799  */
.tool-help-copy button:hover,.tool-help-copy button:focus{color:var(--yellow)} /* 1895 */

/* 1b. The classed buttons Hello's (0,2,0) hover/focus arms can still reach.
       Each line restates the value digihandler.css already declares for the
       resting state, lifted to (0,2,0) so it survives :hover and :focus. No
       new colours are invented here — every value is copied from the rule
       named in the comment, and the reference build was measured to confirm
       it is what the original paints. */
.btn-y:focus{background:var(--yellow);color:#000}                       /* digihandler.css .btn-y  */
.btn-y:hover{background:var(--yellow-soft);color:#000}                  /* digihandler.css .btn-y:hover */
.btn-s:hover,.btn-s:focus{background:var(--white);color:#000}           /* digihandler.css .btn-s  */
.btn-o:hover,.btn-o:focus{color:#fff}                                   /* digihandler.css .btn-o  */
.theme-toggle:focus{color:var(--white)}                                 /* digihandler.css .theme-toggle */
.burger:hover,.burger:focus{background:rgba(255,255,255,.04);color:#fff}/* digihandler.css .burger */

/* 2. Hello's focus ring is a black outline plus a 4px white box-shadow at
      (0,1,1). The design's own ring is `:where(a,button,input,select,textarea,
      [tabindex]):focus-visible`, which is (0,1,0) — `:where()` contributes
      nothing and only the `:focus-visible` counts — so Hello outranked it.
      Restated here so keyboard focus is the brand yellow again. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  box-shadow:none;outline:2px solid var(--yellow);outline-offset:3px;
}
/* …but the restatement above is (0,1,1), and the design suppresses its own
   ring on every text field it styles — `.fields input{outline:none}`,
   `.form input{…}`, `.lead-card input`, `.aigen-fields input`,
   `.aigen-keyrow input`, `.tfields input`, `.tool-lead-form input:focus` —
   each at (0,1,1) but EARLIER in the cascade, so the restatement was beating
   them. Measured: every form field grew a 2px yellow (light: #1d4ed8) ring
   the original build does not draw. These re-suppress at (0,2,1). The fields
   keep the design's own focus treatment: a --sky/--yellow border plus the
   box-shadow declared alongside each rule. */
.form input:focus-visible,
.fields input:focus-visible,.fields select:focus-visible,.fields textarea:focus-visible,
.lead-card input:focus-visible,.lead-card select:focus-visible,
.aigen-fields input:focus-visible,.aigen-keyrow input:focus-visible,
.tfields input:focus-visible,.tfields textarea:focus-visible,
.tool-lead-form input:focus-visible{outline:none}

/* 2b. Hello: `a:active,a:hover{color:#336}` — (0,1,1), against the design's
       deliberately-weakest `a{color:inherit}` at (0,0,1). This is the single
       widest colour leak in the port. Measured before: the mega-menu items,
       the service / work cards, the yellow CTA and the floating WhatsApp
       bubble all took #336 navy text on hover, in BOTH themes, on all six
       audit pages. Restored at Hello's own weight. Anchors whose design class
       sets a resting colour that hover must keep are restated after it —
       their class rules are (0,1,0) and would otherwise lose to this.

   The neutraliser has to land on EXACTLY (0,1,1) — Hello's own weight — and
   no higher. A blanket `a:hover{color:inherit}` was measured first and was
   too strong: at (0,1,1) it also beat the design's own (0,1,1) anchor rules,
   which come earlier in the cascade, and flattened `.prose a`'s var(--sky)
   (#f2f2f4) to the inherited body grey (#b8b8bf) on the blog page.

   `:where()` contributes nothing to specificity, so `a:where(:not(X)):hover`
   is still (0,1,1) while skipping every anchor the design colours at (0,1,1)
   or above. Those rules then beat Hello on source order by themselves,
   because reset.css is enqueued before digihandler.css. The list below is
   every descendant-form anchor selector in digihandler.css that sets a
   resting `color`. */
a:where(:not(
  .cinfo a, .city-more-svc a, .compact-more a, .consent a, .crumb a,
  .cta-fine a, .drawer .d-meta a, .f-bot a, .loc a, .m-form .fine a,
  .member a, .member .info p a, .proof-links a, .prose a, .reel-cap a,
  .seo-note a, .dh-prose a, .menu > li > a
)):hover,
a:where(:not(
  .cinfo a, .city-more-svc a, .compact-more a, .consent a, .crumb a,
  .cta-fine a, .drawer .d-meta a, .f-bot a, .loc a, .m-form .fine a,
  .member a, .member .info p a, .proof-links a, .prose a, .reel-cap a,
  .seo-note a, .dh-prose a, .menu > li > a
)):active{color:inherit}
/* Anchors whose colour comes from a class ON the anchor are (0,1,0) and lose
   to Hello outright, so `:not()`-ing them out would hand them back to #336.
   They are restated instead, at the value digihandler.css already declares. */
.btn-y:active{color:#000}                       /* digihandler.css .btn-y     */
.btn-s:active{color:#000}                       /* digihandler.css .btn-s     */
.btn-o:active{color:#fff}                       /* digihandler.css .btn-o     */
.wa-float:hover,.wa-float:active{color:#04210f} /* digihandler.css .wa-float  */

/* Hello's focus ring also carries `box-shadow:0 0 0 4px #fff`, which the
   restatement above cancels with `box-shadow:none` at (0,1,1) — strong enough
   to erase the design's own resting shadow on any anchor that has one.
   Measured: the floating WhatsApp bubble lost its
   `0 14px 40px rgba(37,211,102,.34)` glow whenever it held focus. */
.wa-float:focus-visible{box-shadow:0 14px 40px rgba(37,211,102,.34)}

/* 2c. Hello gives every text field a 1px #666 border, a 3px radius and a #333
       focus border at (0,1,1) / (0,2,1):
         input[type=…],select,textarea{border:1px solid #666;border-radius:3px}
         input[type=…]:focus,select:focus,textarea:focus{border-color:#333}
       Wherever the design styles a field it restates border, background,
       colour and padding at (0,1,1) and wins on source order — but it does
       not always restate `border-radius`, and its focus rules cannot reach
       Hello's (0,2,1) focus border. Scoped per design wrapper at (0,2,1) and
       (0,3,1) so the design's own values are the ones that survive. NOTE: a
       generic `input:not([class])` form of this was tried first and measured
       WORSE — the design's field rules are written as `.fields input`, where
       the input itself carries no class, so `:not([class])` matched them and
       flattened .fields' 14px radius and its yellow focus border.

   `.dh-inp` (the calculator fields) and `.tfields` are the two wrappers that
   declare `border:0` and no radius, so Hello's 3px corner and its #333 focus
   border were the values actually painted. Measured on the ROAS calculator:
   border-radius 0 -> 3px and, on focus, border-color currentColor -> #333. */
.dh-inp input,.dh-inp textarea,
.tfields input,.tfields textarea{border-radius:0}
.dh-inp input:focus,.dh-inp textarea:focus,
.tfields input:focus,.tfields textarea:focus{border-color:currentColor}

/* 3. WordPress gives headings, paragraphs and figcaptions block margins and
      an italic grey caption. The design sets every margin it wants
      explicitly, so the inherited ones only ever add slack. `.dh-prose`
      further down re-introduces a reading rhythm for block content. */
h1,h2,h3,h4,h5,h6,p{margin-block-start:0;margin-block-end:0}
figcaption{color:inherit;font-style:normal;font-size:inherit}
table td,table th{padding:0;border:0}
table{margin-block-end:0;font-size:inherit}

/* ------------------------------------------------------------
   3. THE FIXED HEADER AND THE ADMIN BAR
   The nav island is `position:fixed; top:0`. Logged in, #wpadminbar occupies
   that band, so the island has to start below it.
   ------------------------------------------------------------ */
body.admin-bar header#hd{top:32px}
@media screen and (max-width:782px){
  body.admin-bar header#hd{top:46px}
}
/* The admin bar is position:fixed on desktop but position:absolute under
   601px, where it scrolls away — the offset has to go with it. */
@media screen and (max-width:600px){
  body.admin-bar header#hd{position:absolute}
}

/* ------------------------------------------------------------
   4. BRAND LOCKUP
   globals.css line 1704 swaps the wordmark in light mode with an absolute
   `/img/...` path, which only resolves at the Next.js site's document root.
   Re-point it at the theme's own copy; this file sits in assets/css/, the
   artwork in assets/img/.
   ------------------------------------------------------------ */
html[data-theme="light"] .logo-img{content:url("../img/logo-black.webp")}

/* The text fallback under the artwork. Upstream a client-side onError adds
   `.is-fallback`; here the <img> simply hides the <span> unless it fails. */
.logo .wm{display:none}
.logo img.logo-img:not([src]) + .wm,
.logo.is-fallback .wm{display:inline}

/* ------------------------------------------------------------
   5. PAGE SHELL
   Every WordPress route that is not built in Elementor renders through
   template-parts/single.php (overridden in this child theme), which emits
   `<main id="main">` + `.phero` + `.wrap` — the same shell every inner page
   on the live site uses. Only the gap-filling lives here.
   ------------------------------------------------------------ */
main#main{display:block;position:relative;z-index:2}

/* Elementor-built pages bring their own containers. Give them the fixed
   header's clearance and the design's gutter so they do not start under the
   nav island, and never let a container paint white over the canvas. */
.elementor-section-wrap > .elementor-section:first-child,
main#main > .elementor{padding-top:var(--space-hero-top)}
.elementor-widget-container,.e-con,.e-con-inner{background-color:transparent}

/* ------------------------------------------------------------
   6. BLOCK CONTENT
   Imported page bodies are Gutenberg blocks, not the site's hand-written
   markup, so the prose needs to be dressed in the same type system: display
   face for headings with the size-specific tracking from the design, Inter at
   17/1.7 for body copy, yellow for links.
   ------------------------------------------------------------ */
.dh-prose{max-width:760px}
.dh-prose > *+*{margin-top:1.15em}

.dh-prose h2{font-size:clamp(28px,3.4vw,42px);margin-top:1.6em}
.dh-prose h3{font-size:clamp(21px,2.2vw,27px);margin-top:1.5em}
.dh-prose h4{font-size:18px;margin-top:1.4em}
.dh-prose h2,.dh-prose h3,.dh-prose h4{color:var(--white)}

.dh-prose p,.dh-prose li{color:var(--grey);font-size:17px;line-height:1.75}
.dh-prose strong{color:var(--white);font-weight:600}
.dh-prose a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--r-move) var(--ease-out)}
.dh-prose a:hover{color:var(--yellow-soft)}

.dh-prose ul,.dh-prose ol{padding-left:1.25em}
.dh-prose li{margin-bottom:.5em}
.dh-prose li::marker{color:var(--yellow)}

.dh-prose blockquote{
  border-left:2px solid var(--yellow);padding:4px 0 4px var(--pad-sm);
  font-family:var(--font-d);font-size:20px;line-height:1.5;color:var(--white);
}
.dh-prose code,.dh-prose kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:7px;padding:2px 7px;color:var(--sky);
}
.dh-prose pre{
  background:var(--black-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad-sm);overflow-x:auto;
}
.dh-prose pre code{background:none;border:0;padding:0}

.dh-prose img,.dh-prose figure img{border-radius:var(--radius);height:auto;max-width:100%}
.dh-prose figcaption{color:#69738c;font-size:12.5px;margin-top:10px}
.dh-prose hr{border:0;border-top:1px solid var(--line);margin:var(--pad-md) 0}

.dh-prose table{width:100%;border-collapse:collapse;font-size:15px}
.dh-prose th,.dh-prose td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.dh-prose th{font-family:var(--font-d);color:var(--sky);font-weight:600;
  letter-spacing:.04em;background:rgba(255,255,255,.035)}
.dh-prose td{color:var(--grey)}

/* Core blocks that carry their own chrome. */
.dh-prose .wp-block-group{border-radius:var(--radius)}
.dh-prose .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;
  font-size:15px;padding:15px 28px;border-radius:100px;text-decoration:none;
  background:var(--yellow);color:#000;border:1px solid transparent;
  transition:transform var(--r-move) var(--spring),background var(--r-move) var(--spring),
             box-shadow var(--r-move) var(--spring);
}
.dh-prose .wp-block-button__link:hover{
  background:var(--yellow-soft);transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(255,208,40,.26);color:#000;
}
.dh-prose .wp-block-separator{border:0;border-top:1px solid var(--line)}

/* The migration's own "content not yet ported" marker, so an unfinished page
   reads as unfinished instead of as a design fault. */
.dh-prose .dh-todo{
  background:rgba(255,208,40,.05);border:1px dashed rgba(255,208,40,.32);
  border-radius:var(--radius);padding:var(--pad-sm);
}
.dh-prose .dh-todo h3{margin-top:0;color:var(--yellow);font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-d)}
.dh-prose .dh-todo p{font-size:15px}

/* ------------------------------------------------------------
   7. ARCHIVE / POST LISTS
   ------------------------------------------------------------ */
.dh-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2.4vw,28px)}
.dh-post{padding:var(--pad-sm);display:flex;flex-direction:column;gap:12px}
.dh-post h2{font-size:21px}
.dh-post h2 a{color:var(--white)}
.dh-post .meta{color:#69738c;font-size:12.5px;font-family:var(--font-d);letter-spacing:.1em;
  text-transform:uppercase}
.dh-post p{color:var(--grey);font-size:15px;line-height:1.7}
.dh-post img{border-radius:14px;width:100%;height:auto;object-fit:cover}

.dh-pagination{margin-top:var(--pad-lg);display:flex;gap:8px;flex-wrap:wrap}
.dh-pagination .page-numbers{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border-radius:100px;border:1px solid var(--line);color:var(--grey);font-size:14px;
  transition:.22s;
}
.dh-pagination .page-numbers:hover,
.dh-pagination .page-numbers.current{background:var(--yellow);border-color:var(--yellow);color:#000}

/* ------------------------------------------------------------
   8. RESPONSIVE
   The design's own breakpoints (1024 / 640) and its clamp() scale do the work;
   these only cover the shells added above. Nothing here reintroduces a fixed
   pixel rhythm.
   ------------------------------------------------------------ */
@media(max-width:1024px){
  .dh-prose{max-width:none}
}
@media(max-width:640px){
  .dh-prose p,.dh-prose li{font-size:16px}
  .dh-posts{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   9. LIGHT MODE GAPS
   globals.css carries the full light ramp; these are only the surfaces this
   file introduced.
   ------------------------------------------------------------ */
html[data-theme="light"] .dh-prose code,
html[data-theme="light"] .dh-prose pre{background:rgba(11,16,32,.04)}
html[data-theme="light"] .dh-prose th{background:rgba(11,16,32,.04)}
html[data-theme="light"] .dh-prose a{color:var(--acc,#1d4ed8)}
html[data-theme="light"] .dh-pagination .page-numbers:hover,
html[data-theme="light"] .dh-pagination .page-numbers.current{
  background:var(--acc,#1d4ed8);border-color:var(--acc,#1d4ed8);color:#fff;
}


/* The original relied on next/image's inline `position:absolute;inset:0;
   width:100%;height:100%` to make the shot fill `.service-visual`. Migrated
   markup should not need inline geometry to lay out, so state it here. */
.service-visual .service-visual-shot{
  position:absolute; inset:0; width:100%; height:100%;
}

/* ------------------------------------------------------------
   10. THE TOOLS PLUGIN'S INK TOKEN
   digihandler-tools/assets/dh-tools.css opens with
     .dh-tool{ --dh-ink: var(--ink, #ffffff); ... }
   and every heading, label, field and figure in a calculator reads it.
   `--ink` is only ever declared on `.dh2` (globals.css line 2533 for dark,
   2923 for light), and the tool pages — /tools/*, /contact/, /locations/* —
   have no `.dh2` wrapper, so the fallback is what resolves: a hard #ffffff
   in BOTH themes. Measured on /tools/roas-calculator/ in light mode, the
   "Your numbers" h2 computed rgb(255,255,255) against the original build's
   rgb(11,16,32) — white text on the light canvas.

   The original has no `.dh-tool` rule at all there; the heading simply
   inherits the body colour, which is `var(--white)` and flips with the
   theme. Re-point the fallback at that token so the tools track the theme
   the way the plugin's own header says they should. `html .dh-tool` rather
   than `.dh-tool` because dh-tools.css is enqueued AFTER this file, so an
   equal-specificity rule here would lose the tie.
   ------------------------------------------------------------ */
html .dh-tool{--dh-ink:var(--ink,var(--white))}

/* The token above is right for the tools' prose and headings, which inherit
   the theme in the original, but NOT for their input text. The design's
   equivalents — `.tfields input`, `.lead-card input`, `.aigen-fields input`
   in digihandler.css — all hard-code `color:#fff`, because those fields sit
   on the plugin's own dark plate (`background:rgba(0,0,0,.22)`) in both
   themes. Measured on /tools/roas-calculator/: the original paints the field
   text rgb(255,255,255) in light AND dark; letting --dh-ink flow through
   turned it rgb(11,16,32) in light, against the dark plate. */
html .dh-tool .dh-inp input,html .dh-tool .dh-inp textarea,
html .dh-tool .dh-lead-form input,
html .dh-tool .dh-aigen-fields input{color:#fff}