/* ==========================================================================
   Pro IT Hosting — 2026 reskin (theme-02 "Bright Managed")
   Shared stylesheet. Loaded AFTER the legacy @import url('/style.css') in
   header.php, so it wins the cascade and neutralises the fixed-width 2012
   layout while skinning both the theme-02 chrome and the existing page bodies.
   ========================================================================== */

:root{
  --radius:14px; --maxw:1180px;
  --bg:#ffffff;--ink:#0a2540;--mut:#54668a;--line:#e3e9f3;
  --acc:#0b63e5;--acc2:#4aa8ff;--btn-ink:#fff;
  --font-h:Manrope,"Segoe UI",system-ui,sans-serif;
  --font-b:Inter,"Segoe UI",system-ui,Arial,sans-serif;
  --nav-bg:rgba(255,255,255,.9);--nav-ink:#0a2540;--nav-mut:#54668a;
  --scrim:linear-gradient(270deg,rgba(4,20,48,.86) 0%,rgba(4,20,48,.55) 52%,rgba(4,20,48,.12) 100%);
  --hero-ink:#fff;--hero-mut:#cddcf5;--hero-line:rgba(255,255,255,.4);
  --strip-bg:#f4f7fc;--svc-bg:#f4f7fc;--why-bg:#fff;--page-bg:#f4f7fc;
  --card-bg:#fff;--card-line:#e3e9f3;--card-shadow:0 2px 14px rgba(10,37,64,.06);
  --ico-bg:#e8f1ff;
  --cta-bg:#0a2540;--cta-ink:#fff;--cta-mut:#a9bfdd;--cta-line:rgba(255,255,255,.35);
  --foot-bg:#0a2540;--foot-ink:#fff;--foot-mut:#94aac9;
  --hero-h:min(70vh,580px);--btn-r:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--font-b);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-h);margin:0;line-height:1.12;letter-spacing:-.01em;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* --------------------------------------------------------------------------
   1. Neutralise the legacy 2012 fixed-width layout wrappers
   -------------------------------------------------------------------------- */
#header-out,#footer-out,#slider-out{background:none!important;height:auto!important}
#head-spacer{display:none!important}
#content-out{background:var(--page-bg)!important;padding:0 0 0!important}
#content-in{width:auto!important;max-width:none!important;margin:0!important}
#content{float:none!important;width:auto!important;background:none!important;
  padding:0!important}
/* inner-page content column: a clean white card on the light theme ground */
#text-in,#text-in-short{
  float:none!important;width:auto!important;max-width:var(--maxw)!important;
  min-height:0!important;margin:34px auto 46px!important;
  background:var(--card-bg)!important;border:1px solid var(--card-line)!important;
  border-radius:var(--radius)!important;box-shadow:var(--card-shadow)!important;
  padding:40px clamp(20px,5vw,54px)!important;color:var(--ink)!important}

/* inner-page typography (defeats the legacy blue h1 bar + grey body) */
#text-in h1,#text-in-short h1{
  background:none!important;color:var(--ink)!important;
  font-family:var(--font-h)!important;font-size:clamp(1.7rem,3.4vw,2.35rem)!important;
  line-height:1.12!important;margin:0 0 18px!important;padding:0!important;letter-spacing:-.02em}
#text-in h2,#text-in-short h2{color:var(--ink)!important;font-family:var(--font-h)!important;
  font-size:clamp(1.25rem,2.4vw,1.6rem)!important;margin:30px 0 14px!important}
#text-in h3,#text-in-short h3{color:var(--ink)!important;font-family:var(--font-h)!important;
  font-size:1.15rem!important;margin:22px 0 10px!important}
#text-in p,#text-in-short p{color:var(--mut)!important;font-size:1.03rem!important;
  line-height:1.7!important;margin:0 0 16px!important;padding-right:0!important}
#text-in li,#text-in-short li{color:var(--mut)!important;font-size:1rem!important;
  line-height:1.6!important;margin:0 0 10px 0!important}
#text-in ul,#text-in-short ul{margin:0 0 18px 0;padding-left:22px}
#text-in a:not(.btn):not(.svc-card):not(.svc-card-go),
#text-in-short a:not(.btn){color:var(--acc)!important;font-weight:600}
#text-in a:hover{text-decoration:underline}
.highlight{color:var(--acc);font-weight:700}

/* --------------------------------------------------------------------------
   2. Nav (theme-02)
   -------------------------------------------------------------------------- */
.nav{background:var(--nav-bg);border-bottom:1px solid var(--line);position:sticky;top:0;
  z-index:40;backdrop-filter:blur(10px)}
.navin{display:flex;align-items:center;gap:26px;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:800;
  font-size:1.06rem;color:var(--nav-ink)}
.brand img{height:30px;width:auto;display:block}
.mark{width:16px;height:16px;border-radius:5px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));flex:none}
.main{display:flex;gap:22px;font-size:.93rem;font-weight:600;color:var(--nav-ink)}
.util{margin-left:auto;display:flex;gap:18px;font-size:.86rem;color:var(--nav-mut)}
.main a:hover,.util a:hover{color:var(--acc)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;cursor:pointer;color:var(--nav-ink);font-size:1.2rem;line-height:1}
/* Hosting mega-menu (desktop hover) */
.has-sub{position:relative;display:inline-flex;align-items:center}
.has-sub>a{display:inline-flex;align-items:center;gap:5px}
.caret{font-size:.7em;opacity:.7}
.submenu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(10,37,64,.14);
  padding:8px;display:none;flex-direction:column;gap:2px;z-index:50}
.submenu a{padding:9px 12px;border-radius:8px;font-weight:600;font-size:.9rem;color:var(--nav-ink)}
.submenu a:hover{background:var(--strip-bg);color:var(--acc)}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:flex}
@media(max-width:900px){
  .main,.util{display:none}
  .navtoggle{display:block}
  .nav.open .main,.nav.open .util{display:flex;flex-direction:column;gap:12px;
    width:100%;flex-basis:100%;margin:12px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
  .nav.open .util{margin-left:0}
  .navin{flex-wrap:wrap}
  /* submenu becomes a static indented list inside the open mobile menu */
  .has-sub{display:block;width:100%}
  .nav.open .submenu{display:flex;position:static;box-shadow:none;border:0;
    padding:4px 0 4px 14px;min-width:0;background:transparent}
  .caret{display:none}
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;padding:13px 24px;border-radius:var(--btn-r);
  font-weight:700;font-size:.94rem;transition:.16s;cursor:pointer}
.btn.primary{background:var(--acc);color:var(--btn-ink)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{border:1px solid var(--hero-line);color:var(--hero-ink)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}

/* --------------------------------------------------------------------------
   4. Home hero + slider (theme-02)
   -------------------------------------------------------------------------- */
.hero{position:relative;padding:0}
.slider{position:relative;overflow:hidden;height:var(--hero-h)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.slide .scrim{position:absolute;inset:0;background:var(--scrim)}
.slide .copy{position:relative;z-index:2;padding:0 24px;position:absolute;top:50%;
  transform:translateY(-50%);width:min(100%,640px);
  right:max(24px,calc(50vw - 590px));left:auto;margin:0}
.hero .kicker{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--acc2);margin-bottom:14px}
.hero h1{font-size:clamp(2rem,4.6vw,3.5rem);color:var(--hero-ink);margin-bottom:16px}
.hero .copy p{color:var(--hero-mut);font-size:1.05rem;margin:0 0 26px;max-width:52ch}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.dots{position:absolute;z-index:5;display:flex;gap:9px;left:50%;transform:translateX(-50%);bottom:22px}
.dot{width:34px;height:4px;border:0;border-radius:99px;cursor:pointer;padding:0;
  transition:.2s;background:var(--hero-line)}
.dot.on{background:var(--acc2)}
.arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:.2s;background:rgba(0,0,0,.32);border:1px solid var(--hero-line);color:var(--hero-ink)}
.arrow.prev{left:16px}.arrow.next{right:16px}
.arrow:hover{border-color:var(--acc2);color:var(--acc2)}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}
@media(max-width:900px){.arrow{display:none}}
@media(max-width:640px){.slide .copy{right:auto;left:0;width:100%}}

/* --------------------------------------------------------------------------
   5. Trust strip / intro / sections / services / why / cta (theme-02)
   -------------------------------------------------------------------------- */
.strip{background:var(--strip-bg);border-bottom:1px solid var(--line)}
.stripin{display:flex;gap:40px;flex-wrap:wrap;padding:18px 24px;justify-content:space-between}
.stripin div{display:flex;gap:8px;align-items:baseline;font-size:.9rem;color:var(--mut)}
.stripin b{font-family:var(--font-h);color:var(--ink);font-size:1rem}

.intro{padding:64px 0 8px;background:var(--bg)}
.intro p{max-width:74ch;margin:0 auto;font-size:1.12rem;color:var(--mut);text-align:center}

.tsec{padding:70px 0}
.tsec.services{background:var(--svc-bg)}
.tsec.why{background:var(--why-bg)}
.shead{margin-bottom:36px;text-align:center;margin-left:auto;margin-right:auto}
.shead h2{font-size:clamp(1.5rem,2.8vw,2.15rem);max-width:24ch;margin:0 auto}
.eyebrow{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--acc);margin-bottom:10px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tsec .card{background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:28px 26px 26px;transition:.18s;box-shadow:var(--card-shadow);color:inherit;display:block}
.tsec .card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 10px 30px rgba(10,37,64,.1)}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--ico-bg);color:var(--acc);margin-bottom:16px}
.ico svg{width:22px;height:22px}
.tsec .card h3{font-size:1.18rem;margin-bottom:9px;color:var(--ink)}
.tsec .card p{color:var(--mut);font-size:.94rem;margin:0 0 15px}
.more{font-weight:700;font-size:.88rem;color:var(--acc)}
@media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px}
.reasons li{display:flex;gap:16px;background:#f7f9fd;border:1px solid var(--line);
  border-radius:14px;padding:20px 22px}
.reasons .n{font-family:var(--font-h);font-size:.85rem;font-weight:800;color:var(--acc);
  padding-top:3px;letter-spacing:.06em;flex:none}
.reasons h4{font-size:1.02rem;margin-bottom:5px;color:var(--ink)}
.reasons p{margin:0;color:var(--mut);font-size:.93rem}
@media(max-width:820px){.reasons{grid-template-columns:1fr}}

.cta{background:var(--cta-bg);color:var(--cta-ink);padding:70px 0}
.ctain{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctain h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:12px;color:var(--cta-ink)}
.ctain p{margin:0;max-width:56ch;color:var(--cta-mut)}
.ctaacts{display:flex;gap:12px;flex-wrap:wrap}
.cta .btn.ghost{border-color:var(--cta-line);color:var(--cta-ink)}
.cta .btn.ghost:hover{border-color:var(--acc2);color:var(--acc2)}

/* service-card sub-topic tags */
.ctags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ctags span{font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--acc);
  background:var(--ico-bg);border-radius:99px;padding:3px 10px}

/* credentials / capability strip */
.creds{background:var(--bg);padding:34px 0}
.credsin{background:linear-gradient(135deg,#0b63e5 0%,#0a2540 100%);border-radius:16px;
  padding:30px 34px;color:#fff;display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  box-shadow:0 8px 26px rgba(11,99,229,.2)}
.credsin h3{font-size:1.15rem;margin:0 0 6px;color:#fff}
.credsin p{margin:0;color:#cddcf5;font-size:.96rem;max-width:60ch}
.credsin .cbadges{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.credsin .cbadge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:10px;padding:10px 14px;font-weight:700;font-size:.85rem;line-height:1.2;text-align:center}
.credsin .cbadge small{display:block;font-weight:500;opacity:.8;font-size:.72rem;margin-top:2px}

/* Our Process */
.process{background:var(--strip-bg);padding:66px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  box-shadow:var(--card-shadow)}
.step .sn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--acc);color:#fff;font-family:var(--font-h);font-weight:800;margin-bottom:14px}
.step h4{font-size:1.08rem;margin-bottom:7px;color:var(--ink)}
.step p{margin:0;color:var(--mut);font-size:.93rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* Industries tag row */
.industries{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.industries span{background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;font-weight:600;font-size:.9rem;color:var(--ink)}

/* FAQ accordion */
.faq{background:var(--bg);padding:66px 0}
.faqlist{max-width:820px;margin:26px auto 0}
.faqlist details{background:#fff;border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;box-shadow:var(--card-shadow)}
.faqlist summary{cursor:pointer;padding:18px 22px;font-family:var(--font-h);font-weight:700;
  font-size:1.02rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:'+';color:var(--acc);font-size:1.3rem;font-weight:700;flex:none}
.faqlist details[open] summary::after{content:'\2212'}
.faqlist details p{margin:0;padding:0 22px 20px;color:var(--mut);font-size:.97rem;line-height:1.65}

/* social proof */
.proof{background:var(--strip-bg);padding:48px 0;text-align:center}
.proof .plabel{color:var(--mut);font-size:.95rem;margin:0 0 22px}
.proof .plogos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.proof .plogos .plogo{padding:14px 24px;border:1px solid var(--card-line);border-radius:10px;
  display:grid;place-items:center;color:var(--ink);font-family:var(--font-h);font-weight:700;
  font-size:.92rem;background:var(--card-bg);box-shadow:var(--card-shadow)}
.ptestimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:920px;margin:0 auto;text-align:left}
.pquote{margin:0;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--card-shadow)}
.pquote p{margin:0 0 14px;color:var(--ink);font-size:.98rem;line-height:1.6;font-style:italic}
.pquote cite{display:block;color:var(--mut);font-size:.86rem;font-style:normal}
.pquote .pflag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;
  background:#fff4e5;color:#a35b00;font-size:.7rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;font-style:normal}
@media (max-width:720px){.ptestimonials{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   6. Footer (theme-02) — replaces #footer-out legacy chrome
   -------------------------------------------------------------------------- */
footer.site{background:var(--foot-bg);color:var(--foot-mut);padding:52px 0 40px;font-size:.88rem}
footer.site .footin>.fbrand{display:flex;align-items:center;gap:10px;font-family:var(--font-h);
  font-weight:800;color:var(--foot-ink);margin-bottom:26px}
.fcols{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-bottom:28px}
.fcols h5{font-family:var(--font-h);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--foot-ink);margin:0 0 10px}
.fcols a{display:block;padding:3px 0;color:var(--foot-mut)}
.fcols a:hover{color:var(--acc2)}
.fmeta{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;opacity:.85}
.fmeta a{color:var(--foot-mut)}.fmeta a:hover{color:var(--acc2)}
@media(max-width:820px){.fcols{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   7. Sticky mobile call bar (tel + sms) — appears at <=640px
   -------------------------------------------------------------------------- */
.callbar{display:none}
@media(max-width:640px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -2px 14px rgba(10,37,64,.18)}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 8px;font-weight:700;font-size:.98rem;min-height:52px}
  .callbar a.call{background:var(--acc);color:#fff}
  .callbar a.text{background:#0a2540;color:#fff}
  body{padding-bottom:52px}
}

/* --------------------------------------------------------------------------
   8. Inner-page hero bands — force white text on the dark hero (TLC 2026-09-08)
   The service/contact/ads hero bands (.svc-hero/.cf-hero/.gads-hero/.ppc-hero)
   sit INSIDE #text-in. The generic #text-in p / #text-in h1 !important rules
   above use ID-level specificity and were overriding each hero's own white
   .*-lede / .*-h1 (class-level specificity) with --mut / --ink — dark text on
   the dark hero band. Restore white with matching ID-level specificity so the
   dark hero reads white-on-dark, matching the older site. Everything inside
   these bands is meant to be white; the home-page dark bands (cta/footer) are
   NOT inside #text-in and are untouched.
   -------------------------------------------------------------------------- */
#text-in [class*="-hero"] h1, #text-in-short [class*="-hero"] h1,
#text-in [class*="-hero"] h2, #text-in-short [class*="-hero"] h2,
#text-in [class*="-hero"] p,  #text-in-short [class*="-hero"] p,
#text-in [class*="-hero"] li, #text-in-short [class*="-hero"] li,
#text-in [class*="-hero"] .lede, #text-in-short [class*="-hero"] .lede{
  color:#fff!important;
}

/* ==========================================================================
   9. Design pass — 2026-09-08 (global polish that lifts every page)
   Backup of the pre-pass file: css/theme.css.bak-design-20260908
   All additive; scoped to legacy #text-in bodies + a few sitewide a11y/mobile
   wins. No copy/content changes.
   ========================================================================== */

/* 9a. Branded CTA bands (.svc-cta / .gads-cta / .ppc-cta) live INSIDE #text-in,
   so the generic #text-in p/h2/li rules (ID specificity, !important) overrode
   each band's own white body text with --mut → dark text on the blue gradient.
   Same bug class the -hero TLC fix solved; extend white to the -cta bands.
   Text elements only — the white .btn keeps its blue-on-white. */
#text-in [class*="-cta"] h1, #text-in-short [class*="-cta"] h1,
#text-in [class*="-cta"] h2, #text-in-short [class*="-cta"] h2,
#text-in [class*="-cta"] p,  #text-in-short [class*="-cta"] p,
#text-in [class*="-cta"] li, #text-in-short [class*="-cta"] li{
  color:#fff!important;
}

/* 9b. Legacy inline .cta block (hosting/index) — was a full-bleed dark band with
   zero horizontal padding and low-contrast --mut body text floating inside the
   white card. Restyle as a proper rounded call-to-action panel. */
#text-in .cta, #text-in-short .cta{
  background:var(--cta-bg)!important;border-radius:var(--radius)!important;
  padding:30px clamp(22px,4vw,38px)!important;margin:34px 0 4px!important;
  box-shadow:0 8px 26px rgba(10,37,64,.16)!important}
#text-in .cta p, #text-in-short .cta p{color:var(--cta-mut)!important}
#text-in .cta strong, #text-in-short .cta strong{color:#fff!important}
#text-in .cta a:not(.btn):not(.svc-card):not(.svc-card-go),
#text-in-short .cta a:not(.btn):not(.svc-card):not(.svc-card-go){
  color:var(--acc2)!important;font-weight:700}
#text-in .cta a:not(.btn):hover{color:#fff!important;text-decoration:underline}

/* 9c. Legacy section headings that wrap a link (marketing/index etc.) were being
   coloured blue by the #text-in a rule while non-linked headings stayed navy —
   inconsistent. Keep every section heading navy; linked ones go blue on hover. */
#text-in h2 a:not(.btn):not(.svc-card):not(.svc-card-go),
#text-in-short h2 a:not(.btn):not(.svc-card):not(.svc-card-go),
#text-in h3 a:not(.btn):not(.svc-card):not(.svc-card-go),
#text-in-short h3 a:not(.btn):not(.svc-card):not(.svc-card-go){
  color:inherit!important;font-weight:inherit!important}
#text-in h2 a:not(.btn):not(.svc-card):not(.svc-card-go):hover,
#text-in-short h2 a:not(.btn):not(.svc-card):not(.svc-card-go):hover,
#text-in h3 a:not(.btn):not(.svc-card):not(.svc-card-go):hover,
#text-in-short h3 a:not(.btn):not(.svc-card):not(.svc-card-go):hover{
  color:var(--acc)!important;text-decoration:underline}

/* 9d. Web-design portfolio (#design-work) lost its legacy grid when /style.css was
   dropped — three thumbnails stacked in a narrow left column with the card empty
   to the right. Rebuild as a responsive portfolio grid with hover lift. */
#text-in #design-work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 6px}
#text-in #design-work > div{margin:0}
#text-in #design-work a{display:block}
#text-in #design-work img{width:100%;height:auto;display:block;border:1px solid var(--card-line);
  border-radius:12px;box-shadow:var(--card-shadow);transition:.18s}
#text-in #design-work a:hover img{transform:translateY(-4px);border-color:var(--acc);
  box-shadow:0 12px 30px rgba(10,37,64,.14)}
@media(max-width:820px){#text-in #design-work{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#text-in #design-work{grid-template-columns:1fr;max-width:440px}}

/* 9e. Mobile trust strip — four items on one row got cramped at phone widths.
   Center + wrap to a 2-column grid under 560px. */
@media(max-width:560px){
  .stripin{gap:12px 18px;justify-content:center}
  .stripin div{flex:0 1 42%;justify-content:center}
}

/* 9f. Industries pills — subtle hover affordance for a bit more life. */
.industries span{transition:.15s}
.industries span:hover{border-color:var(--acc);color:var(--acc)}

/* 9g. Accessibility — visible keyboard focus for interactive elements. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,.card:focus-visible{
  outline:3px solid var(--acc2);outline-offset:2px}

/* ==========================================================================
   10. Industries card grid + hero unification — 2026-09-08
   Backups: css/theme.css.bak-industries-20260908 (this edit),
            css/theme.css.bak-design-20260908, .bak-tlc-20260908
   Additive. No copy/content changes.
   ========================================================================== */

/* 10a. Industries — replace the single thin pill row with a structured,
   responsive card grid (icon tile + label). Same industries, better weight. */
.indgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.indcard{display:flex;align-items:center;gap:15px;background:var(--card-bg);
  border:1px solid var(--card-line);border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--card-shadow);transition:.18s}
.indcard:hover{transform:translateY(-3px);border-color:var(--acc);
  box-shadow:0 10px 30px rgba(10,37,64,.1)}
.indcard .ico{margin-bottom:0;flex:none}
.indcard h3{font-family:var(--font-h);font-size:1.02rem;line-height:1.2;font-weight:700;
  color:var(--ink);margin:0}
@media(max-width:900px){.indgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.indgrid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}

/* 10b. Hero unification — every inner-page hero band (.svc-hero / .gads-hero /
   .ppc-hero / .cf-hero) previously carried its own rainbow "Google Ads"
   gradient set per-page with !important. Override centrally at ID-level
   specificity (#text-in [class*="-hero"]) so ONE refreshed brand-blue gradient
   wins on every page without touching the HTML. A dark veil is baked into the
   background stack so the white hero text (TLC fix, section 8) stays legible
   regardless of each page's own ::before overlay. */
#text-in [class*="-hero"], #text-in-short [class*="-hero"]{
  background:
    linear-gradient(180deg, rgba(4,20,48,.16) 0%, rgba(4,20,48,.46) 100%),
    linear-gradient(125deg, #0a2540 0%, #0b63e5 42%, #2b83f0 68%, #4aa8ff 100%)
    !important;
  box-shadow:0 10px 30px rgba(11,99,229,.28) !important;
}
/* Retone the 6px Google 4-colour top accent bar to a brand-blue sweep. */
#text-in [class*="-hero"]::after, #text-in-short [class*="-hero"]::after{
  background:linear-gradient(90deg, var(--acc) 0%, var(--acc2) 100%) !important;
}

/* 10c. Social-proof logo chips — real client logos (2026-09-08). Chips carry an
   <img> logo (Gutter Mule, Keys From Kristina) or a text wordmark (Ronin's
   Routines, no image logo). Override herald's grid chip to inline-flex so a mark
   can sit beside its wordmark; cap logo height for a consistent baseline. */
.proof .plogos .plogo{display:inline-flex;align-items:center;gap:10px}
.proof .plogos .plogo img{height:40px;width:auto;display:block}
.proof .plogos .plogo .pname{font-family:var(--font-h);font-weight:700;
  font-size:.92rem;color:var(--ink);line-height:1}