/* Digital Cymru signal theme — layered over the established layout to preserve SEO structure. */
:root {
  --red: #ff2c32;
  --red-dark: #c91620;
  --green: #19ef70;
  --green-dark: #08a84a;
  --ink: #070b0a;
  --ink-soft: #101714;
  --paper: #090e0c;
  --paper-deep: #0d1411;
  --white: #f5fff8;
  --line: rgba(116, 255, 169, .16);
  --muted: #a8b8ae;
  --shadow: 0 32px 100px rgba(0,0,0,.55), 0 0 45px rgba(25,239,112,.06);
}

html { color-scheme: dark; }
/* Allow grid/flex copy to shrink and wrap instead of extending beyond a phone. */
main, main section, main article, main aside, .container > *,
.service-page-hero-grid > *, .form-layout > *, .seo-process > * { min-width: 0; }
h1, h2, h3, p, li, summary, .breadcrumb, .btn, .footer-inner { overflow-wrap: anywhere; }
.btn { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 760px) {
  .service-page-hero h1, .meta-page-hero h1, .form-intro h1 {
    font-size: clamp(2.15rem, 9.5vw, 3.5rem);
    max-width: 100%;
    line-height: 1.06;
  }
  .service-page-hero-grid, .form-layout { grid-template-columns: minmax(0, 1fr); }
}
body {
  background:
    radial-gradient(circle at 14% 4%, rgba(25,239,112,.07), transparent 26rem),
    linear-gradient(180deg, #050807, #09100d 55%, #050807);
  color: var(--white);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: repeating-radial-gradient(ellipse at 70% 30%, transparent 0 34px, rgba(25,239,112,.08) 35px 36px);
  mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
}
.site-header { border-color: var(--line); background: rgba(5,8,7,.86); }
.site-header.scrolled { box-shadow: 0 12px 45px rgba(0,0,0,.55); }
.brand, .nav-link { color: var(--white); }
.brand em, .full-stop, .eyebrow, .text-link { color: var(--red); }
.nav-toggle { border-color: var(--line); background: var(--ink-soft); }
.nav-toggle > span:not(.sr-only) { background: var(--white); }
.btn, .button { border-color: var(--green); background: var(--green); color: #020504; box-shadow: 0 0 28px rgba(25,239,112,.13); }
.btn:hover, .button:hover { border-color: var(--red); background: var(--red); color: #fff; }
.btn-outline, .button-secondary { border-color: rgba(245,255,248,.4); background: rgba(7,11,10,.42); color: var(--white); }

.hero { position: relative; isolation: isolate; min-height: 760px; display: grid; align-items: center; overflow: hidden; background: #030605; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/theme/digital-growth-hero-1280.webp") 50% 50% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,6,5,.98) 0%, rgba(3,6,5,.86) 34%, rgba(3,6,5,.22) 70%, rgba(3,6,5,.35)); }
.hero-grid { align-items: center; }
.hero h1 { text-shadow: 0 5px 35px #000; }
.hero-sub, .hero-meta, .side-note, .section-heading > p, .feature-copy > p:not(.eyebrow), .visibility-intro > p:not(.eyebrow), .reputation-copy > p:not(.eyebrow), .seo-copy, .seo-card p, .service-page-lead, .service-page-note, .faq-list details p, .related-card span, .directory-row p { color: var(--muted); }
.hero-proof, .service-snapshot, .audit-card, .related-card, .seo-card, .site-preview, .meta-lab { border: 1px solid var(--line); background: rgba(11,18,15,.88); color: var(--white); backdrop-filter: blur(18px); }
.meta-variable strong { color: var(--ink); }
.hero-proof { border-top: 4px solid var(--red); }
.proof-item { border-color: var(--line); }
.proof-item small, .proof-label { color: var(--muted); }

.ticker { border-color: var(--line); background: #070b09; color: var(--white); }
.section, .section-white, .website-section, .visibility-section, .reputation-section, .outcomes-section, .process-section, .related-services, .meta-science-section, .behaviour-section, .data-confidence-section, .meta-faq-section, .connected-section { background: transparent; }
.section:nth-of-type(even), .website-section, .visibility-section, .related-services, .meta-science-section, .data-confidence-section, .meta-faq-section { background: rgba(13,20,17,.72); }
.section-ink, .meta-growth-section, .meta-creative-section { background: #050807; }
.services-list, .service-row, .science-grid, .directory-row, .seo-process li, .faq-list, .faq-list details, .client-outcomes, .client-outcomes span { border-color: var(--line); }
.service-head, .breadcrumb a { color: var(--white); }
.service-row:hover { background: rgba(25,239,112,.035); }

.website-section, .visibility-section, .reputation-section, .automation-section, .meta-growth-section { position: relative; isolation: isolate; }
/* Decorative sections may clip artwork, but never lock a page's body. */
section.website-section, section.visibility-section, section.reputation-section, section.automation-section, section.meta-growth-section { overflow: hidden; }
body { min-width: 0; overflow-x: clip; overflow-y: visible; }
.website-section::before, .visibility-section::before, .reputation-section::before, .automation-section::before, .meta-growth-section::before {
  content: ""; position: absolute; inset: 6% 0; z-index: -1; opacity: .2; pointer-events: none; background-position: center; background-size: cover; filter: saturate(1.1);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.website-section::before { background-image: url("assets/theme/search-ready-web-design-1280.webp"); }
.visibility-section::before { background-image: url("assets/theme/local-search-wales-1280.webp"); }
.reputation-section::before { background-image: url("assets/theme/reputation-loop-1280.webp"); }
.automation-section::before { background-image: url("assets/theme/qualified-lead-flow-1280.webp"); }
.meta-growth-section::before { background-image: url("assets/theme/meta-demand-engine-1280.webp"); opacity: .26; }

.site-preview { transform: rotate(.6deg); }
.preview-toolbar, .preview-page { background: #0e1612; border-color: var(--line); }
.preview-hero { background: linear-gradient(135deg, #050807, #0b1c13); }
.client-example {
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(25,239,112,.08), rgba(255,44,50,.05));
  box-shadow: var(--shadow);
}
.client-example + .client-example { margin-top: 1.5rem; }
.client-outcomes span::before { color: var(--green); }
.qualification-card, .visibility-card, .outcomes-grid article, .seo-detail, .measurement-strip, .testing-rule { border-color: var(--line); background: rgba(15,23,19,.82); color: var(--white); }
.lead-journey div, .platforms span, .connected-flow span { background: #111a16; border-color: var(--line); color: var(--white); }
.roi-panel, .seo-callout { border-color: var(--red); background: linear-gradient(135deg, #0a100d, #15100f); }
.monthly-section { background: linear-gradient(135deg, #06481f, #07110b); }

.service-page-hero, .meta-page-hero, .form-hero { position: relative; isolation: isolate; overflow: hidden; background: #040705; color: var(--white); }
.service-page-hero::before, .meta-page-hero::before, .form-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: url("assets/theme/digital-growth-hero-1280.webp") center / cover no-repeat; opacity:.42; }
.service-page-hero::after, .meta-page-hero::after, .form-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,7,5,.98),rgba(4,7,5,.62),rgba(4,7,5,.88)); }
.service-page-hero h1, .meta-page-hero h1 { color: var(--white); }
.service-snapshot { border-top: 4px solid var(--green); }
.meta-page-hero-copy > p:not(.eyebrow):not(.meta-page-note), .creative-copy > p:not(.eyebrow), .behaviour-copy > p, .data-heading > p:not(.eyebrow), .meta-section-intro > p:not(.eyebrow) { color: var(--muted); }
.campaign-console, .creative-matrix { border-color: var(--line); background: rgba(7,12,9,.82); }

input:not([type="checkbox"]), textarea, select { border-color: var(--line); background: #080e0b; color: var(--white); }
label, legend, .audit-card label { color: var(--white); }
.choice-grid label { border-color: var(--line); background: #0c1410; }
.form-page { padding: clamp(4rem, 8vw, 7rem) 0; }
.form-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.form-intro { position:sticky; top:120px; }
.form-intro h1 { max-width:11ch; font-size:clamp(2.8rem,5.8vw,5.8rem); line-height:.98; letter-spacing:-.055em; }
.form-intro p:not(.eyebrow) { margin-top:1.4rem; color:var(--muted); font-size:1.05rem; }
.enquiry-card { border:1px solid var(--line); border-top:4px solid var(--red); background:rgba(12,19,15,.9); padding:clamp(1.4rem,4vw,3rem); box-shadow:var(--shadow); }
.enquiry-card label { display:grid; gap:.45rem; margin-bottom:1rem; font-weight:700; }
.enquiry-card input, .enquiry-card textarea, .enquiry-card select { width:100%; padding:.88rem 1rem; border:1px solid var(--line); border-radius:8px; }
.enquiry-card .form-grid { gap:1rem; }
.form-assurance { margin:.9rem 0 1.2rem; color:var(--muted); font-size:.78rem; }
.audit-link-group { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.audit-link-group legend { padding-right: .75rem; color: var(--green); font-size: 1rem; }
.audit-link-help { margin-top: .35rem; color: var(--muted); font-size: .78rem; }
.audit-link-group textarea { min-height: 105px; }
.audit-access-note { margin: 1.8rem 0 .5rem; border-left: 3px solid var(--red); background: rgba(255,44,50,.055); padding: 1rem 1.1rem; color: var(--muted); font-size: .78rem; }
.audit-access-note strong { color: var(--white); }

.cookie-banner { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:5000; max-width:860px; margin:auto; border:1px solid var(--line); border-top:3px solid var(--green); background:rgba(5,9,7,.97); color:var(--white); padding:1.15rem; box-shadow:0 24px 80px #000; }
.cookie-banner[hidden] { display:none; }
.cookie-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; }
.cookie-banner p { color:var(--muted); font-size:.82rem; }
.cookie-banner a { color:var(--green); }
.cookie-actions { display:flex; gap:.6rem; flex:0 0 auto; }
.cookie-actions button { min-height:42px; border:1px solid var(--line); border-radius:999px; padding:.65rem 1rem; background:transparent; color:var(--white); cursor:pointer; font-weight:700; }
.cookie-actions [data-cookie-accept] { border-color:var(--green); background:var(--green); color:#020504; }

.site-footer { background:#030605; border-color:var(--line); }
.legal p, .legal li { color: var(--muted); }

@media (max-width: 980px) {
  .hero { min-height:auto; }
  .form-layout { grid-template-columns:1fr; }
  .form-intro { position:static; }
}
@media (max-width: 760px) {
  .hero::before { background-position: 63% center; opacity:.72; }
  .hero::after { background:linear-gradient(180deg,rgba(3,6,5,.72),rgba(3,6,5,.96) 58%,#030605); }
  .cookie-banner-inner { align-items:flex-start; flex-direction:column; }
  .cookie-actions { width:100%; }
  .cookie-actions button { flex:1; }
}

/* Contrast and mobile-navigation safeguards.
   Keep this final in the cascade so legacy light-theme component rules cannot
   create light-on-light or dark-on-dark combinations. */
.section h1,
.section h2,
.section h3,
.section h4,
.section-white h1,
.section-white h2,
.section-white h3,
.section-white h4,
.website-section h1,
.website-section h2,
.website-section h3,
.website-section h4,
.visibility-section h1,
.visibility-section h2,
.visibility-section h3,
.visibility-section h4,
.reputation-section h1,
.reputation-section h2,
.reputation-section h3,
.reputation-section h4,
.outcomes-section h1,
.outcomes-section h2,
.outcomes-section h3,
.outcomes-section h4,
.process-section h1,
.process-section h2,
.process-section h3,
.process-section h4,
.related-services h1,
.related-services h2,
.related-services h3,
.related-services h4,
.connected-section h1,
.connected-section h2,
.connected-section h3,
.connected-section h4,
.behaviour-section h1,
.behaviour-section h2,
.behaviour-section h3,
.behaviour-section h4,
.data-confidence-section h1,
.data-confidence-section h2,
.data-confidence-section h3,
.data-confidence-section h4,
.meta-science-section h1,
.meta-science-section h2,
.meta-science-section h3,
.meta-science-section h4,
.meta-faq-section h1,
.meta-faq-section h2,
.meta-faq-section h3,
.meta-faq-section h4,
.seo-card h3,
.seo-detail h3,
.related-card strong,
.directory-row h3,
.qualification-card h3,
.visibility-card h3,
.outcomes-grid h3,
.science-card h3,
.testing-rule strong,
.measurement-strip strong,
.behaviour-points strong,
.faq-list summary {
  color: var(--white);
}

.seo-card,
.seo-detail,
.related-card,
.qualification-card,
.visibility-card,
.outcomes-grid article,
.science-card,
.testing-rule,
.measurement-strip,
.behaviour-points article,
.faq-list details,
.directory-row {
  background-color: rgba(11, 18, 15, .94);
  color: var(--white);
}

.seo-copy strong,
.meta-variable strong {
  color: var(--white);
}

/* The campaign matrix deliberately uses pale chips; keep their labels dark. */
.meta-variable strong {
  background: var(--white);
  color: #07110b;
}

.section p,
.section-white p,
.website-section p,
.visibility-section p,
.reputation-section p,
.outcomes-section p,
.process-section p,
.related-services p,
.connected-section p,
.behaviour-section p,
.data-confidence-section p,
.meta-science-section p,
.meta-faq-section p {
  color: var(--muted);
}

.monthly-section h2,
.monthly-section h3,
.monthly-section p,
.monthly-section .eyebrow,
.guidance-note h3,
.guidance-note p,
.audit-band h2,
.audit-band p,
.seo-callout h2,
.seo-callout h3,
.seo-callout p {
  color: var(--white);
}

@media (max-width: 980px) {
  .site-nav {
    z-index: 1001;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border-color: rgba(116, 255, 169, .28);
    background: #0b120f;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
  }

  .site-nav .nav-link {
    display: block;
    border-bottom: 1px solid var(--line);
    color: var(--white);
  }

  .site-nav .nav-link:hover,
  .site-nav .nav-link:focus-visible,
  .site-nav .nav-link[aria-current="page"] {
    background: rgba(25, 239, 112, .08);
    color: var(--green);
  }

  .site-nav .nav-cta {
    border-bottom: 0;
    background: var(--green);
    color: #020504;
    text-align: center;
  }

  .site-nav .nav-cta:hover,
  .site-nav .nav-cta:focus-visible {
    background: var(--red);
    color: #fff;
  }
}

/* SEO and mobile delivery improvements — 17 October 2026. */
.audit-band { background:#a80f18; }
.audit-band .eyebrow, .audit-band .audit-band-inner p { color:#fff; opacity:1; }
.btn:hover, .button:hover { background:var(--red-dark); border-color:var(--red-dark); }
.guide-home-links { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:1.5rem; }
.guide-home-links a { color:var(--green); text-underline-offset:.2em; }
img { max-width:100%; }
.cookie-banner { max-height:calc(100dvh - 2rem); overflow-y:auto; }
.cookie-actions button, .nav-toggle { min-height:44px; }
:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
@media(max-width:760px) {
  .hero h1 { font-size:clamp(2.5rem,12vw,4rem); }
  .hero::before, .service-page-hero::before, .meta-page-hero::before, .form-hero::before { background-image:url("assets/theme/digital-growth-hero-768.webp"); }
  .website-section::before { background-image:url("assets/theme/search-ready-web-design-768.webp"); }
  .visibility-section::before { background-image:url("assets/theme/local-search-wales-768.webp"); }
  .reputation-section::before { background-image:url("assets/theme/reputation-loop-768.webp"); }
  .automation-section::before { background-image:url("assets/theme/qualified-lead-flow-768.webp"); }
  .meta-growth-section::before { background-image:url("assets/theme/meta-demand-engine-768.webp"); }
  .cookie-actions { flex-wrap:wrap; }
  .cookie-actions button { flex:1 1 130px; }
}
