/* ============================================================
   Dr IT Services — design system v2 "Four Dots" (2026-07-22)
   Archetype: Organic Swiss. Fonts: Sora (display) + Karla (body).
   60/30/10: white-mist / ink / brand accents.
   Raw brand colors decorative; AA text variants for text+interactive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Karla:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --drit-pink:   #ee2a7b;
  --drit-green:  #8dc63f;
  --drit-orange: #f15a29;
  --drit-blue:   #27aae1;
  --drit-pink-text:   #c21d63;
  --drit-green-text:  #5d8527;
  --drit-orange-text: #c23f14;
  --drit-blue-text:   #1c7ba8;
  --drit-ink:      #1a1a2e;
  --drit-ink-soft: #4a4a60;
  --drit-paper:    #ffffff;
  --drit-mist:     #f7f7fc;
  --drit-line:     #e6e7f2;
  --color-cta: var(--drit-pink-text);
  --color-cta-hover: #a1184f;
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Karla', 'Segoe UI', sans-serif;
  --drit-radius: 14px;
  --drit-radius-lg: 22px;
  --drit-maxw: 1140px;
  --space-section: clamp(3rem, 7vw, 5rem);
  --duration-fast: 200ms;
  --duration-normal: 320ms;
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-card: 0 1px 2px rgba(26,26,46,0.05), 0 8px 24px rgba(26,26,46,0.06);
  --shadow-card-hover: 0 2px 4px rgba(26,26,46,0.06), 0 16px 40px rgba(26,26,46,0.13);
}

/* ---------- Base ---------- */
body { font-family: var(--font-body); }
.drit-page { font-size: 1.0625rem; line-height: 1.7; color: var(--drit-ink); text-align: left; hyphens: manual; -webkit-hyphens: manual; overflow-x: clip; }
.drit-page h1, .drit-page h2, .drit-page h3, .drit-page h4 { font-family: var(--font-display); text-align: left; text-wrap: balance; color: var(--drit-ink); hyphens: manual; }
.drit-page h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; margin: 0.4em 0 0.5em; }
.drit-page h2 { font-size: clamp(1.55rem, 3.1vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.7em; }
.drit-page h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 0.5em; }
.drit-page p, .drit-page li, .drit-page figcaption { text-align: left; }
.drit-page p { margin: 0 0 1em; }
.drit-page a { color: var(--drit-blue-text); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--duration-fast) var(--ease-out); cursor: pointer; }
.drit-page a:hover { color: var(--drit-pink-text); }
.drit-page ul, .drit-page ol { padding-left: 1.3em; margin: 0 0 1.25em; }
.drit-page li { margin: 0.4em 0; }
.drit-page address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }
::selection { background: var(--drit-pink); color: #fff; }

/* ---------- Header ---------- */
.site-header .header-image, .site-header .is-logo-image, .site-logo img { max-height: 64px !important; width: auto !important; height: auto !important; transition: transform var(--duration-fast) var(--ease-spring); }
.site-logo a:hover img { transform: scale(1.04) rotate(-1deg); }
.site-branding .main-title { display: none; }
.site-header .inside-header { padding: 0.7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.main-navigation .menu { flex-wrap: wrap; }
.main-navigation a { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; position: relative; }
.main-navigation .menu > li > a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 6px; height: 2px; border-radius: 2px; background: var(--drit-pink); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-out); }
.main-navigation .menu > li > a:hover::after, .main-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* ---------- Sections ---------- */
.drit-section { max-width: var(--drit-maxw); margin: 0 auto; padding: var(--space-section) 1.25rem; }
.drit-section-alt { max-width: none; width: 100%; background: var(--drit-mist); padding: var(--space-section) 1.25rem; position: relative; }
.drit-section-alt > * { max-width: var(--drit-maxw); margin-left: auto; margin-right: auto; position: relative; }
/* 2026-07-23: element typography rules (.drit-page h2 {margin: X 0} etc., specificity 0,1,1) beat the child-centering rule above (0,1,0), leaving headings/lists hugging the left edge of full-bleed alt sections on wide screens. This 0,2,0 rule re-asserts inline centering while leaving block margins to the typography rules. Sitewide fix (user report 2026-07-23). */
.drit-page .drit-section-alt > * { margin-left: auto; margin-right: auto; }
.drit-section-alt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: radial-gradient(var(--drit-line) 1px, transparent 1.5px); background-size: 26px 26px; }

/* ---------- Hero ---------- */
.drit-hero { max-width: var(--drit-maxw); margin: 0 auto; padding: clamp(2.5rem,6vw,4rem) 1.25rem 2rem; }
.drit-kicker { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--drit-pink-text); margin-bottom: 0.8rem; }
.drit-lede { font-size: clamp(1.1rem, 1.9vw, 1.25rem); line-height: 1.65; color: var(--drit-ink-soft); max-width: 54rem; }
.drit-hero-points { list-style: none; padding: 0; margin: 1.6rem 0; }
.drit-hero-points li { position: relative; padding-left: 2rem; margin: 0.75rem 0; }
.drit-hero-points li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--drit-green) 0 46%, transparent 47%), radial-gradient(circle at 70% 30%, var(--drit-pink) 0 46%, transparent 47%), radial-gradient(circle at 30% 70%, var(--drit-blue) 0 46%, transparent 47%), radial-gradient(circle at 70% 70%, var(--drit-orange) 0 46%, transparent 47%); transition: transform var(--duration-fast) var(--ease-spring); }
.drit-hero-points li:hover::before { transform: rotate(90deg) scale(1.15); }
.drit-hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1rem; }
.drit-trust--hero { border-top: 1px solid var(--drit-line); margin-top: 1.9rem; padding-top: 1.3rem; }
.drit-trust--hero p { color: var(--drit-ink-soft); font-size: 0.98rem; margin: 0; }
.drit-trust--hero strong { color: var(--drit-ink); font-family: var(--font-display); }

/* ---------- Dots motif ---------- */
.drit-dots { display: inline-flex; gap: 6px; }
.drit-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; transition: transform var(--duration-normal) var(--ease-spring); }
.drit-dots i:nth-child(1) { background: var(--drit-pink); }
.drit-dots i:nth-child(2) { background: var(--drit-green); transition-delay: 40ms; }
.drit-dots i:nth-child(3) { background: var(--drit-orange); transition-delay: 80ms; }
.drit-dots i:nth-child(4) { background: var(--drit-blue); transition-delay: 120ms; }
.drit-kicker:hover .drit-dots i { transform: translateY(-4px); }

/* ---------- Buttons ---------- */
a.drit-btn, .drit-btn { font-family: var(--font-display); font-weight: 700; font-size: 1rem; background: var(--color-cta); color: #fff !important; border-radius: 999px; padding: 0.85em 1.7em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; min-width: 44px; position: relative; overflow: hidden; cursor: pointer; transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); box-shadow: 0 2px 10px rgba(194,29,99,0.28); }
a.drit-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.28) 0, transparent 40%); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
a.drit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(194,29,99,0.36); background: var(--color-cta-hover); }
a.drit-btn:hover::after { opacity: 1; }
a.drit-btn:active { transform: translateY(0) scale(0.98); }
a.drit-btn:focus-visible { outline: 3px solid var(--drit-blue); outline-offset: 3px; }
a.drit-btn--secondary, .drit-btn--secondary { background: var(--drit-blue-text) !important; box-shadow: 0 2px 10px rgba(28,123,168,0.28); }
a.drit-btn--secondary:hover { background: #155e81 !important; box-shadow: 0 6px 20px rgba(28,123,168,0.36); }
a.drit-btn--secondary[href^="tel"]::before { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--drit-blue); opacity: 0; animation: drit-ring 3.2s var(--ease-out) infinite; }
@keyframes drit-ring { 0%,72% { opacity: 0; transform: scale(0.96);} 78% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { a.drit-btn--secondary[href^="tel"]::before { animation: none; } }

/* ---------- Cards ---------- */
.drit-card { background: var(--drit-paper); border: 1px solid var(--drit-line); border-radius: var(--drit-radius); padding: 1.6rem; box-shadow: var(--shadow-card); position: relative; transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out); }
.drit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.drit-accent-pink, .drit-accent-green, .drit-accent-orange, .drit-accent-blue { border-top-width: 4px; border-top-style: solid; }
.drit-accent-pink   { border-top-color: var(--drit-pink); }
.drit-accent-green  { border-top-color: var(--drit-green); }
.drit-accent-orange { border-top-color: var(--drit-orange); }
.drit-accent-blue   { border-top-color: var(--drit-blue); }
.drit-card h3 a { color: var(--drit-ink); text-decoration: none; }
.drit-card h3 a:hover { color: var(--drit-pink-text); }
.drit-card p:last-child { margin-bottom: 0; }
.drit-card p a { font-weight: 700; text-decoration: none; font-family: var(--font-display); font-size: 0.95rem; }
.drit-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(3, 1fr); }
.drit-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1020px) { .drit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .drit-grid, .drit-grid--2 { grid-template-columns: 1fr !important; } }

/* ---------- Process rail ---------- */
.drit-process { list-style: none; counter-reset: step; padding: 0; max-width: 46rem; }
.drit-process li { counter-increment: step; position: relative; padding: 0 0 1.5rem 3.6rem; }
.drit-process li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -0.12em; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--drit-line); width: 2.5rem; transition: color var(--duration-normal) var(--ease-out); }
.drit-process li.is-active::before, .drit-process li:hover::before { color: var(--drit-pink-text); }
.drit-process li:not(:last-child)::after { content: ""; position: absolute; left: 0.7rem; top: 2rem; bottom: 0.35rem; width: 2px; background: var(--drit-line); border-radius: 2px; }

/* ---------- Stats band ---------- */
.stbn { background: var(--drit-ink); padding: clamp(2.2rem,5vw,3.2rem) 1.25rem; max-width: 100%; overflow: hidden; }
.stbn .ct { max-width: var(--drit-maxw); margin: 0 auto; padding: 0; }
.stbn .stin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: left; }
.stbn .stnum { font-family: var(--font-display); font-size: clamp(1.9rem,3.4vw,2.5rem); font-weight: 800; color: var(--drit-green); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stbn .dr1 .stnum { color: var(--drit-pink); }
.stbn .dr2 .stnum { color: var(--drit-orange); }
.stbn .dr3 .stnum { color: var(--drit-blue); }
.stbn .stlb { color: #c7cbdd; font-size: 0.93rem; margin-top: 0.3rem; }
@media (max-width: 1020px) { .stbn .stin { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .stbn .stin { grid-template-columns: 1fr 1fr !important; gap: 1.1rem; } }

/* ---------- Marquees ---------- */
.mq-out, .bmq-out { position: relative; overflow: hidden; max-width: 100%; padding: 1.25rem 0; }
.mq-out::before, .mq-out::after, .bmq-out::before, .bmq-out::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.mq-out::before, .bmq-out::before { left: 0; background: linear-gradient(90deg, var(--drit-paper), transparent); }
.mq-out::after, .bmq-out::after { right: 0; background: linear-gradient(-90deg, var(--drit-paper), transparent); }
.mq-tr, .bmq-tr { display: flex; gap: 2.4rem; align-items: center; width: max-content; animation: drit-marquee 36s linear infinite; }
.bmq-tr { animation-duration: 52s; }
.mq-out:hover .mq-tr, .bmq-out:hover .bmq-tr { animation-play-state: paused; }
@keyframes drit-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.aw-img img { max-height: 150px !important; width: auto !important; display: block; transition: transform var(--duration-fast) var(--ease-spring); }
.aw-img a:hover img { transform: scale(1.06); }
.bimg { flex: 0 0 auto; }
.bimg img, .bmq-tr img { max-height: 42px !important; height: 42px !important; width: auto !important; display: block; filter: grayscale(1); opacity: 0.7; transition: filter var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.bimg:hover img { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mq-tr, .bmq-tr { animation: none; } .mq-out, .bmq-out { overflow-x: auto; } }

/* ---------- Transplant headers ---------- */
.awsec { padding: var(--space-section) 0 2.5rem; }
.awsec .ct { max-width: var(--drit-maxw); margin: 0 auto; padding: 0 1.25rem; }
.slbl { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--drit-pink-text); text-transform: uppercase; }
.stit { font-family: var(--font-display); font-size: clamp(1.55rem,3.1vw,2.1rem); font-weight: 800; margin: 0.25em 0 0.4em; letter-spacing: -0.01em; }
.ssub { color: var(--drit-ink-soft); max-width: 52rem; }
.sh { margin-bottom: 1rem; }

/* Legacy reveal: visible by default; JS re-arms with .drit-armed on <html> */
.dr, .dr1, .dr2, .dr3 { opacity: 1; transform: none; }
.drit-armed .dr, .drit-armed .dr1, .drit-armed .dr2, .drit-armed .dr3 { opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.drit-armed .dr.dv, .drit-armed .dr1.dv, .drit-armed .dr2.dv, .drit-armed .dr3.dv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .drit-armed .dr, .drit-armed .dr1, .drit-armed .dr2, .drit-armed .dr3 { opacity: 1 !important; transform: none !important; transition: none; } }

/* ---------- Platform logo bar ---------- */
.lbar { padding: 1.1rem 0 0.5rem; }
.lbar-in { display: flex !important; flex-wrap: wrap; gap: 2rem; align-items: center; }
.lbar-it { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.85; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); }
.lbar-it:hover { opacity: 1; transform: translateY(-2px); }
.lbar-it img { max-height: 30px !important; width: auto !important; }

/* ---------- Reviews ---------- */
.drit-reviews { margin-top: 2.5rem; }
.drit-reviews blockquote { margin: 1.15rem 0; padding: 1.3rem 1.5rem; background: var(--drit-paper); border-left: 4px solid var(--drit-green); border-radius: 0 var(--drit-radius) var(--drit-radius) 0; box-shadow: var(--shadow-card); transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out); }
.drit-reviews blockquote:hover { transform: translateX(4px); box-shadow: var(--shadow-card-hover); }
.drit-reviews blockquote cite { display: block; margin-top: 0.55rem; font-style: normal; font-weight: 700; font-family: var(--font-display); color: var(--drit-ink-soft); font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.drit-faq details { border-bottom: 1px solid var(--drit-line); padding: 0.2rem 0; }
.drit-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; padding: 0.95rem 0; transition: color var(--duration-fast) var(--ease-out); min-height: 44px; }
.drit-faq summary:hover { color: var(--drit-pink-text); }
.drit-faq summary::-webkit-details-marker { display: none; }
.drit-faq summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; line-height: 1; border-radius: 50%; background: var(--drit-mist); color: var(--drit-pink-text); font-weight: 700; flex: 0 0 auto; transition: transform var(--duration-normal) var(--ease-spring), background var(--duration-fast) var(--ease-out); }
.drit-faq details[open] summary::after { transform: rotate(45deg); background: var(--drit-pink); color: #fff; }
.drit-faq details > p, .drit-faq details > div { padding: 0 0 1.1rem; color: var(--drit-ink-soft); max-width: 56rem; }
.drit-faq details[open] > *:not(summary) { animation: drit-faq-in 0.3s var(--ease-out); }
@keyframes drit-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drit-faq details[open] > *:not(summary) { animation: none; } }

/* ---------- Price tables ---------- */
.drit-price-table { width: 100%; border-collapse: collapse; }
.drit-price-table th, .drit-price-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--drit-line); }
.drit-price-table th { background: var(--drit-mist); font-family: var(--font-display); }
.drit-price-table td:last-child { font-variant-numeric: tabular-nums; }
.drit-price-table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.drit-price-table tbody tr:hover { background: var(--drit-mist); }
.drit-price-scroll { overflow-x: auto; border-radius: var(--drit-radius); border: 1px solid var(--drit-line); }

/* ---------- Trust strips ---------- */
.drit-trust { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.drit-trust img { max-height: 96px; width: auto; border-radius: 8px; background: #fff; transition: transform var(--duration-fast) var(--ease-spring); }
.drit-trust img:hover { transform: scale(1.05); }
@media (max-width: 760px) { .drit-trust img { max-height: 70px; } }

/* ---------- Media blocks ---------- */
.drit-hub-hero { margin: 1.8rem 0 0; }
.drit-hub-hero img { width: 100%; max-width: 900px; border-radius: var(--drit-radius-lg); display: block; box-shadow: var(--shadow-card-hover); }
.drit-portrait { margin: 1.6rem 0; }
.drit-portrait img { max-width: 360px; width: 100%; border-radius: var(--drit-radius-lg); box-shadow: var(--shadow-card-hover); }
.drit-map iframe { display: block; border-radius: var(--drit-radius); }

/* ---------- Footer ---------- */
.drit-footer { background: var(--drit-ink); color: #fff; padding: 3.2rem 1.25rem 1.6rem; }
.drit-footer a { color: #d8dbe8; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); display: inline-block; padding: 0.2rem 0; min-height: 24px; }
.drit-footer a:hover { color: #fff; text-decoration: underline; }
.drit-footer-inner { max-width: var(--drit-maxw); margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .drit-footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .drit-footer-inner { grid-template-columns: 1fr !important; } }
.drit-footer ul { list-style: none; margin: 0; padding: 0; }
.drit-footer li { margin: 0.15rem 0; }
.drit-footer address { font-style: normal; }
.drit-footer-brand { font-family: var(--font-display); font-size: 1.1rem; }
.drit-footer-legal { max-width: var(--drit-maxw); margin: 2.2rem auto 0; padding-top: 1.3rem; border-top: 1px solid #34344c; font-size: 0.9rem; color: #b9bdcf; }
.drit-footer-legal a { color: #b9bdcf; }
.site-info { display: none; }

/* AA contrast overrides (axe color-contrast, per-element per the contrast SOP):
   legacy .dr italic caption used var(--g400)=#8e9ab5 (2.82:1); the Simple Side Tab
   phone tab used raw brand pink #ee2a7b (3.99:1) — raw brand colors are decorative-only,
   interactive gets the AA text variant. */
:root { --g400: var(--drit-ink-soft); }  /* legacy grey token, single user: the .dr caption */
.google-business-reviews-rating .number { color: #b45309 !important; }  /* gmbrr "4.9": star-gold #f7b603 was 1.8:1 on white; amber #b45309 = 5:1 */
#rum_sst_tab, a#rum_sst_tab.rum_sst_contents { background: var(--drit-pink-text) !important; }

/* WPForms submit inherits the design-system CTA button (contact form 18940) */
.drit-page .wpforms-form button[type="submit"], .drit-page .wpforms-submit {
  font-family: var(--font-display) !important; font-weight: 700 !important;
  background: var(--color-cta) !important; color: #fff !important;
  border: none !important; border-radius: 999px !important;
  padding: 0.85em 1.7em !important; min-height: 48px;
  box-shadow: 0 2px 10px rgba(194,29,99,0.28);
  transition: transform var(--duration-fast) var(--ease-spring), background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.drit-page .wpforms-form button[type="submit"]:hover, .drit-page .wpforms-submit:hover {
  background: var(--color-cta-hover) !important; transform: translateY(-2px);
}

/* Wide tables on theme-rendered pages (legal/cookie tables) scroll in place instead of
   overflowing the viewport (CLAUDE.md wide-content rule; cookie-policy 525px table @390px) */
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }

/* Google reviews widget (gmbrr plugin): reviewer-name links must meet 24px target size */
.google-business-reviews-rating .author-name a { display: inline-block; padding: 0.2rem 0; min-height: 24px; }

/* ---------- Containment ---------- */
[id^="dw-"] { max-width: 100%; }
[id^="dw-"] img { max-width: 100%; height: auto; }
.drit-page section:empty, .drit-page > div:empty { display: none; }
.drit-page img { max-width: 100%; height: auto; }

/* ---------- Service areas (.ap pills) + Spotlight cards ---------- */
.ap { display: inline-block; background: var(--drit-paper); border: 1px solid var(--drit-line); border-radius: 999px; padding: 0.35em 0.95em; margin: 0.22rem 0.3rem 0.22rem 0; font-size: 0.92rem; font-family: var(--font-display); font-weight: 600; color: var(--drit-ink-soft); transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring); }
.ap:hover { border-color: var(--drit-pink); color: var(--drit-pink-text); transform: translateY(-2px); }
.ap.app { background: var(--drit-ink); color: #fff; border-color: var(--drit-ink); }
.spgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; margin-top: 1.2rem; }
@media (max-width: 760px) { .spgrid { grid-template-columns: 1fr !important; } }
.spc { background: var(--drit-paper); border: 1px solid var(--drit-line); border-left: 4px solid var(--drit-blue); border-radius: var(--drit-radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-card); transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out); }
.spc:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.spt { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--drit-blue-text); }
.sph { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin: 0.3rem 0 0.5rem; }
.spb { color: var(--drit-ink-soft); font-size: 0.97rem; }
.spstats { display: flex; gap: 1.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
.spstat { display: flex; flex-direction: column; }
.spn { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--drit-pink-text); font-variant-numeric: tabular-nums; }
.spl { font-size: 0.82rem; color: var(--drit-ink-soft); }

/* ---------- Generic legacy containers (.ct sections: areas/brands/spotlight) ---------- */
.areas, .brnd, .spotlight { padding: var(--space-section) 0 2.5rem; max-width: 100%; overflow: hidden; }
.areas .ct, .brnd .ct, .spotlight .ct, .ct { max-width: var(--drit-maxw); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.stbn .ct { padding-left: 0; padding-right: 0; }


/* 2026-07-23 (desktop UX pass): price tables are intrinsic-width; the scroll wrapper was stretching full-width leaving a long empty card tail. Wrapper now hugs the table (max-content) and still scrolls on mobile via max-width. */
.drit-price-scroll { width: max-content; max-width: 100%; }


/* 2026-07-23: real workshop photos (E-E-A-T audit fix). Figures on service pages. */
.drit-figure { margin: 1.5rem 0; }
.drit-figure img { display: block; width: 100%; height: auto; border-radius: var(--drit-radius); box-shadow: var(--shadow-card); }
.drit-figure figcaption { font-size: 0.88rem; color: var(--drit-ink-soft); margin-top: 0.6rem; text-align: left; }





/* 2026-07-23 hero v3: flat animated SVG drive hub + orbital chips (AutoPop
   hub-stat pattern, drit tokens). Pure CSS animation, no JS/WebGL/video.
   Mobile: hub hidden; reduced-motion: static (animations off). */
.drit-hero-visual { display: none; }
@media (min-width: 1024px) {
  .drit-home .drit-hero { position: relative; }
  .drit-home .drit-hero > .drit-kicker, .drit-home .drit-hero > h1, .drit-home .drit-hero > .drit-lede, .drit-home .drit-hero > .drit-hero-points, .drit-home .drit-hero > .drit-hero-cta, .drit-home .drit-hero > .drit-trust { max-width: 56%; }
  .drit-hero-visual { display: block; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-52%); width: min(38%, 470px); }
  .drit-hub { position: relative; width: 100%; aspect-ratio: 1; }
  .drit-hub-svg { width: 74%; height: 74%; position: absolute; left: 13%; top: 13%; filter: drop-shadow(0 14px 30px rgba(26,26,46,.12)); }
  .drit-hub-chip { position: absolute; background: var(--drit-paper); border: 1px solid var(--drit-line); border-radius: 999px; padding: .5rem 1rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; white-space: nowrap; }
  .drit-hub-chip b { font-family: var(--font-display); font-size: .92rem; color: var(--drit-ink); }
  .drit-hub-chip span { font-size: .72rem; color: var(--drit-ink-soft); }
  .drit-hub-chip--top { top: 0; left: 50%; transform: translateX(-50%); border-bottom: 3px solid var(--drit-pink); }
  .drit-hub-chip--right { right: -1.2rem; top: 50%; transform: translateY(-50%); border-bottom: 3px solid var(--drit-blue); }
  .drit-hub-chip--bottom { bottom: 0; left: 50%; transform: translateX(-50%); border-bottom: 3px solid var(--drit-green); }
  .drit-hub-chip--left { left: -1.2rem; top: 50%; transform: translateY(-50%); border-bottom: 3px solid var(--drit-orange); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .drit-hub-platter { animation: drit-spin 9s linear infinite; transform-origin: 142px 152px; }
  .drit-hub-arm { animation: drit-seek 5.5s ease-in-out infinite; transform-origin: 252px 258px; }
  .drit-hub-pulses circle { animation: drit-rise 3.2s ease-in infinite; }
  .drit-hub-pulses .p2 { animation-delay: .8s; } .drit-hub-pulses .p3 { animation-delay: 1.6s; } .drit-hub-pulses .p4 { animation-delay: 2.4s; }
  .drit-hub-chip--top { animation: drit-float 5s ease-in-out infinite; }
  .drit-hub-chip--right { animation: drit-float-y 5s ease-in-out infinite 1.2s; }
  .drit-hub-chip--bottom { animation: drit-float 5s ease-in-out infinite 2.4s; }
  .drit-hub-chip--left { animation: drit-float-y 5s ease-in-out infinite 3.6s; }
}
@keyframes drit-spin { to { transform: rotate(360deg); } }
@keyframes drit-seek { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-30deg); } }
@keyframes drit-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
@keyframes drit-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes drit-float-y { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(4px); } }

/* ==========================================================================
   BOUNCY HOVER — client-agnostic interaction layer
   --------------------------------------------------------------------------
   Drop-in for EVERY client site, past / current / future. Paste at the end of
   the client's own stylesheet. No markup changes, no new dependency, no JS.

   WHY THIS EXISTS
   Audited localisedseo.com 2026-07-26 to find out why its pages "feel"
   clickable. It was not element count. Every interactive thing physically
   MOVES on hover:
       .hero-card:hover { transform: translateY(-12px) scale(1.02); ... }
       .btn-primary:hover { transform: translateY(-3px); }
       .btn-primary:hover svg { transform: translateX(4px); }
   Our cards carried the same links and simply did not respond to the cursor.

   HOW IT IS CLIENT-AGNOSTIC
   Selectors are matched on the CARD SUFFIX via [class*="..."], so the same
   file works for .dis-* (dr-it-seo), .drit-* (dr-it), .dc-* (drclear),
   .ap-* (autopop) and any future prefix, with zero edits.

   ACCESSIBILITY IS NOT OPTIONAL
   prefers-reduced-motion disables every transform. Keyboard :focus-visible
   gets the SAME lift as hover, so this is not a mouse-only affordance.
   ========================================================================== */

:root {
  --bounce-lift: -10px;                                  /* hover travel */
  --bounce-scale: 1.015;                                 /* subtle grow */
  --bounce-spring: cubic-bezier(.34, 1.56, .64, 1);      /* overshoot = bounce */
  --bounce-fast: cubic-bezier(.22, 1, .36, 1);
  --bounce-shadow: 0 22px 55px rgba(15, 30, 60, .16);
  --bounce-shadow-sm: 0 12px 30px rgba(15, 30, 60, .14);
}

/* --------------------------------------------------------------------------
   1. CARDS — the main surface. Matches any prefix.
   -------------------------------------------------------------------------- */
[class*="-usp"],
[class*="-problem-card"],
[class*="-deliverable-card"],
[class*="-plan-mini"],
[class*="-tier"],
[class*="-card"],
[class*="-fit-list"] > li,
[class*="-feature-list"] > li {
  /* cursor:pointer is the whole point. localisedseo.com sets it on .stat-item,
     .service-card, .pricing-card, .problem-card, .faq-item and .hero-card - 12
     rules in total - and NONE of those are anchors. The arrow becoming a hand
     is what makes a block read as interactive, before any movement happens.
     Paired with a real lift + shimmer below so the promise the cursor makes is
     actually kept. */
  cursor: pointer;
  position: relative;
  /* NO overflow:hidden here. It clips card text the moment the card scales -
     observed live 2026-07-26: "Landscaping" rendered as "andscaping" and
     "Healthcare" as "ealthcare" on hover. The shimmer is clipped by its own
     ::after inset + border-radius instead, so the sweep still stays inside the
     rounded corner while the text is free to grow. */
  transition:
    transform .38s var(--bounce-spring),
    box-shadow .38s var(--bounce-fast),
    border-color .25s var(--bounce-fast),
    background-color .3s var(--bounce-fast);
  will-change: transform;
}

/* Shimmer sweep: a light band crosses the card on hover. Purely decorative,
   pointer-events:none so it never eats a click. */
[class*="-usp"]::after,
[class*="-problem-card"]::after,
[class*="-deliverable-card"]::after,
[class*="-plan-mini"]::after,
[class*="-tier"]::after,
[class*="-card"]::after {
  content: "";
  position: absolute;
  inset: 0;                 /* inset, not top/left/width/height, so it cannot
                               extend past the card and needs no parent clip */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -80% 0;
  border-radius: inherit;   /* follow the card's rounded corner */
  transition: background-position .6s ease;
  pointer-events: none;
  z-index: 1;
}

[class*="-usp"]:hover::after,
[class*="-problem-card"]:hover::after,
[class*="-deliverable-card"]:hover::after,
[class*="-plan-mini"]:hover::after,
[class*="-tier"]:hover::after,
[class*="-card"]:hover::after {
  background-position: 180% 0;
}

/* Staggered delay across a grid row, so a sweep of the mouse cascades. */
[class*="-usp"]:nth-child(2),
[class*="-problem-card"]:nth-child(2),
[class*="-card"]:nth-child(2) { transition-delay: .04s; }
[class*="-usp"]:nth-child(3),
[class*="-problem-card"]:nth-child(3),
[class*="-card"]:nth-child(3) { transition-delay: .08s; }
[class*="-usp"]:nth-child(4),
[class*="-problem-card"]:nth-child(4),
[class*="-card"]:nth-child(4) { transition-delay: .12s; }

/* Bold heading inside a card grows and recolours - the localisedseo
   .stat-value:hover tell. Keeps the eye on the thing being hovered. */
[class*="-usp"] b,
[class*="-problem-card"] b,
[class*="-deliverable-card"] b,
[class*="-tier"] b,
[class*="-card"] b {
  display: inline-block;
  transition: transform .35s var(--bounce-spring), color .25s var(--bounce-fast);
}

[class*="-usp"]:hover b,
[class*="-problem-card"]:hover b,
[class*="-deliverable-card"]:hover b,
[class*="-tier"]:hover b,
[class*="-card"]:hover b {
  transform: translateX(2px);
}

/* Card icons rotate and grow, mirroring .hero-card-icon. */
[class*="-usp"] i,
[class*="-problem-card"] i,
[class*="-deliverable-card"] i,
[class*="-card"] i {
  transition: transform .4s var(--bounce-spring);
}

[class*="-usp"]:hover i,
[class*="-problem-card"]:hover i,
[class*="-deliverable-card"]:hover i,
[class*="-card"]:hover i {
  transform: scale(1.15) rotate(-8deg);
}

/* Press-down so a click on a card physically lands. */
[class*="-usp"]:active,
[class*="-problem-card"]:active,
[class*="-deliverable-card"]:active,
[class*="-plan-mini"]:active,
[class*="-tier"]:active,
[class*="-card"]:active {
  transform: translateY(-4px) scale(1.01);
  transition-duration: .1s;
}

[class*="-usp"]:hover,
[class*="-problem-card"]:hover,
[class*="-deliverable-card"]:hover,
[class*="-plan-mini"]:hover,
[class*="-tier"]:hover,
[class*="-card"]:hover,
[class*="-usp"]:focus-within,
[class*="-problem-card"]:focus-within,
[class*="-deliverable-card"]:focus-within,
[class*="-plan-mini"]:focus-within,
[class*="-tier"]:focus-within,
[class*="-card"]:focus-within {
  transform: translateY(var(--bounce-lift));
  box-shadow: var(--bounce-shadow);
}

/* List rows lift less: they sit in a stack, so a big jump breaks the rhythm. */
[class*="-fit-list"] > li:hover,
[class*="-feature-list"] > li:hover {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   2. BUTTONS — lift, then slide any icon forward (the localisedseo tell).
   -------------------------------------------------------------------------- */
[class*="-btn"] {
  transition:
    transform .3s var(--bounce-spring),
    box-shadow .3s var(--bounce-fast),
    background-color .2s var(--bounce-fast);
}

[class*="-btn"]:hover,
[class*="-btn"]:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--bounce-shadow-sm);
}

[class*="-btn"]:active {
  transform: translateY(-1px) scale(.99);   /* press-down: the click lands */
  transition-duration: .08s;
}

[class*="-btn"] i,
[class*="-btn"] svg {
  transition: transform .3s var(--bounce-spring);
}

[class*="-btn"]:hover i,
[class*="-btn"]:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   3. TRUST / LOGO STRIPS — grayscale to colour, plus a small pop.
   -------------------------------------------------------------------------- */
[class*="-trust-strip__logo"] img,
[class*="trust"] img {
  transition: transform .35s var(--bounce-spring), filter .3s var(--bounce-fast),
              opacity .3s var(--bounce-fast);
}

[class*="-trust-strip__logo"]:hover img,
[class*="-trust-strip__logo"]:focus-visible img {
  transform: scale(1.08) translateY(-3px);
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. FAQ / accordion summaries — nudge right, spin the chevron.
   -------------------------------------------------------------------------- */
details > summary {
  transition: transform .25s var(--bounce-spring), color .2s var(--bounce-fast);
}

details > summary:hover,
details > summary:focus-visible {
  transform: translateX(4px);
}

details > summary i,
details > summary svg {
  transition: transform .35s var(--bounce-spring);
}

details[open] > summary i,
details[open] > summary svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   5. INLINE CONTENT LINKS — underline grows from the left.
   -------------------------------------------------------------------------- */
[class*="-wrap"] p > a:not([class]),
[class*="-container"] p > a:not([class]),
[class*="-wrap"] li > a:not([class]),
[class*="-container"] li > a:not([class]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--bounce-fast);
  text-decoration: none;
}

[class*="-wrap"] p > a:not([class]):hover,
[class*="-container"] p > a:not([class]):hover,
[class*="-wrap"] li > a:not([class]):hover,
[class*="-container"] li > a:not([class]):hover,
[class*="-wrap"] p > a:not([class]):focus-visible,
[class*="-container"] p > a:not([class]):focus-visible {
  background-size: 100% 1.5px;
}

/* --------------------------------------------------------------------------
   6. KEYBOARD FOCUS — visible ring, never removed.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[class*="-btn"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION — hard off. WCAG 2.3.3; matches the existing site rules.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class*="-usp"],
  [class*="-problem-card"],
  [class*="-deliverable-card"],
  [class*="-plan-mini"],
  [class*="-tier"],
  [class*="-card"],
  [class*="-btn"],
  [class*="-fit-list"] > li,
  [class*="-feature-list"] > li,
  details > summary,
  [class*="trust"] img {
    transition: none !important;
    will-change: auto;
  }

  [class*="-usp"]:hover,
  [class*="-problem-card"]:hover,
  [class*="-deliverable-card"]:hover,
  [class*="-plan-mini"]:hover,
  [class*="-tier"]:hover,
  [class*="-card"]:hover,
  [class*="-btn"]:hover,
  [class*="-btn"]:active,
  [class*="-fit-list"] > li:hover,
  [class*="-feature-list"] > li:hover,
  details > summary:hover,
  [class*="trust"] img:hover {
    transform: none !important;
  }

  /* Kill the shimmer sweep - it is motion, and motion is what was opted out of.
     cursor:pointer and the shadow/colour change are deliberately KEPT: they are
     affordance, not animation, and removing them would make the interface less
     usable for the people who asked for less movement. */
  [class*="-usp"]::after,
  [class*="-problem-card"]::after,
  [class*="-deliverable-card"]::after,
  [class*="-plan-mini"]::after,
  [class*="-tier"]::after,
  [class*="-card"]::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. TOUCH DEVICES — no hover, so do not reserve compositor layers.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  [class*="-usp"],
  [class*="-problem-card"],
  [class*="-deliverable-card"],
  [class*="-card"],
  [class*="-btn"] {
    will-change: auto;
  }

  /* Tap feedback instead: the press itself is the affordance. */
  [class*="-btn"]:active {
    transform: scale(.97);
  }
}