/* Tech Bureau theme for the generated pages (services, AI enablement, case studies, contact).
   The dark token defaults are already the Tech Bureau palette, so this file only adds the Aurora
   atmosphere of the home page: the mesh-gradient background, gradient buttons and glass plans. */

html[data-theme="tb"] body {
  background:
    radial-gradient(70rem 42rem at 82% -6%, rgba(72, 120, 250, 0.22), transparent 62%),
    radial-gradient(48rem 34rem at -12% 18%, rgba(155, 108, 255, 0.14), transparent 60%),
    var(--color-bg);
  background-repeat: no-repeat;
}

/* sections keep the page atmosphere: raised sections are a translucent tint, not a flat panel */
html[data-theme="tb"] .band { background-color: transparent; }
html[data-theme="tb"] .band--glow { background-color: rgba(72, 120, 250, 0.04); }

/* primary buttons: the home page's filled gradient */
html[data-theme="tb"] .btn--primary { background-image: linear-gradient(120deg, #3a67ee 0%, #4f5ff0 55%, #7a5cf0 100%); }
html[data-theme="tb"] .btn--primary:hover { filter: brightness(1.1); }

/* cards and plans: the Aurora glass surface */
html[data-theme="tb"] .card--glass,
html[data-theme="tb"] .plan {
  background:
    radial-gradient(120% 70% at 25% -10%, rgba(88, 150, 255, 0.14), transparent 60%),
    color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-text) 18%, transparent);
}
html[data-theme="tb"] .plan__head { background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--color-border); }
html[data-theme="tb"] .plan--featured .plan__head { background-image: linear-gradient(120deg, #3a67ee 0%, #4f5ff0 55%, #7a5cf0 100%); border-bottom: 0; }
html[data-theme="tb"] .table-wrap { background: color-mix(in srgb, var(--color-surface) 70%, transparent); }

/* ---------- components used only on the Tech Bureau pages ---------- */

/* role cards on /ai/roles: a role, then the skills tailored to it */
.role__skills { display: grid; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); }
.role__skills li { display: flex; gap: var(--space-2); align-items: flex-start; }
.role__skills svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--color-accent-text); }

/* case study: challenge / approach / outcome rows */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); padding: var(--space-7) 0; border-top: 1px solid var(--color-border); }
.case:first-child { border-top: 0; padding-top: 0; }
.case dl { display: grid; gap: var(--space-4); margin: 0; }
.case dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text); }
.case dd { margin: var(--space-1) 0 0; color: var(--color-muted); }
@media (max-width: 767px) { .case { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* vendor choice on /ai: two side-by-side cards with a small label */
.vendor__name { font-size: var(--text-h3); font-weight: 700; color: var(--color-fg-strong); }

/* the /ai "why" list uses longer labels than the tradies pages */
html[data-theme="tb"] .emphasis-list strong { width: 7.5rem; font-size: 1.125rem; }

/* /ai: the "why" list as a row of three under the split, and the integration map */
.emphasis-list--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emphasis-list--row li { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.emphasis-list--row strong { width: auto; text-align: left; }
@media (max-width: 767px) { .emphasis-list--row { grid-template-columns: minmax(0, 1fr); } }
.ai-map { margin: 0; padding: var(--space-5); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 80%, transparent); border: 1px solid var(--color-border); }
.ai-map svg { width: 100%; height: auto; font-family: var(--font); }
.ai-map__node rect { fill: var(--color-surface-2); stroke: var(--color-border-strong); }
.ai-map__node text { fill: var(--color-fg); font-size: 15px; font-weight: 600; text-anchor: middle; }
.ai-map__hub { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; }

/* ===================================================================== */
/* Background art: the home page's rings, glow and Aurora mesh, fixed behind the page (option A),  */
/* and a corner glow on each raised section so the depth continues below the fold (option C).      */
/* ===================================================================== */
html[data-theme="tb"] body { position: relative; background: var(--color-bg); }
html[data-theme="tb"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    url(../images/ellipse-9.webp) no-repeat -180px -120px / 640px auto,
    url(../images/ellipse-13.webp) no-repeat calc(100% + 140px) -60px / 520px auto,
    url(../images/ellipse-30.webp) no-repeat calc(100% + 120px) 10% / 820px auto,
    radial-gradient(70rem 42rem at 82% -6%, rgba(72, 120, 250, 0.24), transparent 62%),
    radial-gradient(48rem 34rem at -12% 22%, rgba(155, 108, 255, 0.16), transparent 60%),
    radial-gradient(50rem 36rem at 90% 96%, rgba(120, 90, 255, 0.12), transparent 60%);
  opacity: 0.85;
}
html[data-theme="tb"] .site-header, html[data-theme="tb"] .site-footer, html[data-theme="tb"] .mobile-bar { position: relative; z-index: 2; }
html[data-theme="tb"] .site-header { position: sticky; }
html[data-theme="tb"] .mobile-bar { position: fixed; }
html[data-theme="tb"] main { position: relative; z-index: 1; }
html[data-theme="tb"] .section--raised { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
html[data-theme="tb"] .section--raised::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 20rem at 100% 0%, rgba(138, 168, 255, 0.12), transparent 60%);
}
html[data-theme="tb"] .section--raised > * { position: relative; }
@media (max-width: 767px) {
  html[data-theme="tb"] body::before {
    background-size: 380px auto, 320px auto, 520px auto, auto, auto, auto;
    background-position: -120px -80px, calc(100% + 100px) -40px, calc(100% + 120px) 8%, 0 0, 0 0, 0 0;
  }
}

/* evidence figures (tools/figures.py) and case-study photos */
.figure--evidence { margin: 0; padding: var(--space-5); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 85%, transparent); border: 1px solid var(--color-border); }
.figure--evidence svg { width: 100%; height: auto; font-family: var(--font); }
.figure--evidence figcaption { display: block; }
.card__media--figure { display: flex; align-items: center; padding: var(--space-4) var(--space-5) 0; background: color-mix(in srgb, var(--color-surface-2) 70%, transparent); border-bottom: 1px solid var(--color-border); }
.card__media--figure svg { width: 100%; height: auto; font-family: var(--font); }
.case__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--space-5); position: relative; }
.case__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.55; }
.case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(72, 120, 250, 0.35), rgba(155, 108, 255, 0.35)); mix-blend-mode: screen; }

/* Home page opening: text-only hero over the fixed background art */
.hero-home { padding-block: clamp(4rem, 3rem + 6vw, 8rem) var(--space-7); }
.hero-home .hero__title { max-width: 18ch; margin-inline: auto; }
.trust-list--center { justify-content: center; }

/* home v3-1 (html[data-fx~="art"]): the Tilda home page's art, as it is there. The mesh gradient scrolls
   with the page on main, and the four rings are page elements in the blocks they belong to, scrolling with
   the content: ring 9 top-left and ring 13 top-right of the opening block, half-ring 12 on its left edge
   at mid-height, the violet glow (ring 30) beside the numbers. No fixed layer, no parallax. */
html[data-theme="tb"][data-fx~="art"] body::before { display: none; }
html[data-fx~="art"] main {
  overflow-x: clip;
  background:
    radial-gradient(70rem 42rem at 82% -6%, rgba(72, 120, 250, 0.26), transparent 62%),
    radial-gradient(48rem 34rem at -12% 22%, rgba(155, 108, 255, 0.16), transparent 60%),
    radial-gradient(60rem 40rem at 50% 58%, rgba(72, 120, 250, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 90% 96%, rgba(120, 90, 255, 0.16), transparent 60%);
}
/* raised bands blend into the atmosphere instead of cutting it: the tint fades in and out over a fifth of the
   band, and the glow is a full ellipse that dies out inside the band, so nothing is sliced by its edges */
html[data-fx~="art"] .section--raised {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.035) 20%, rgba(255, 255, 255, 0.035) 80%, rgba(255, 255, 255, 0) 100%);
}
html[data-fx~="art"] .section--raised::before { background: radial-gradient(56rem 50% at 100% 50%, rgba(138, 168, 255, 0.1), transparent 70%); }
html[data-fx~="art"] .section:has(> .aurora-art) { position: relative; }
html[data-fx~="art"] .section:has(> .aurora-art) > .container { position: relative; z-index: 1; }
.aurora-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora-art .ring { position: absolute; height: auto; filter: saturate(1.35) brightness(1.15); }
.aurora-art .ring--9 { top: 0; left: 0; width: 643px; }
.aurora-art .ring--13 { top: 0; right: 0; width: 523px; }
.aurora-art .ring--12 { top: 50%; left: -1px; width: 231px; margin-top: -249px; }
.aurora-art .ring--30 { top: -14px; right: 0; width: 447px; }
/* home v4: the Tilda home's torus (frame-7-2) at the right of the numbers, as it sits beside the Tilda
   numbers block; it overhangs the band's bottom edge and is clipped by main's overflow-x, not by the band */
.aurora-art .torus { position: absolute; right: -60px; top: 50%; width: 376px; height: auto; transform: translateY(-38%); opacity: 0.9; }
@media (max-width: 1199px) { .aurora-art .torus { width: 280px; right: -110px; opacity: 0.55; } }
@media (max-width: 767px) {
  .aurora-art .ring--9 { width: 380px; left: -120px; top: -80px; }
  .aurora-art .ring--13 { width: 320px; right: -140px; top: -40px; }
  .aurora-art .ring--12 { width: 140px; margin-top: -140px; }
  .aurora-art .ring--30 { width: 300px; right: -120px; }
  .aurora-art .torus { display: none; }
}

/* a photo washed into a raised band, the CTA band's treatment (hero__bg--faint) carried into the page:
   faint, colour kept, fading to the page colour at the band's edges so the band still blends in */
html[data-theme="tb"] .section > .section__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.section__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
.section__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-bg) 0%, rgba(13, 18, 31, 0.45) 28%, rgba(13, 18, 31, 0.45) 72%, var(--color-bg) 100%); }

/* home v3: "who we work with" photo strip under the hero; duotoned like the case-study photos */
.hero-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); max-width: 60rem; margin: var(--space-7) auto 0; text-align: left; }
.hero-strip li { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); }
.hero-strip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.6; transition: opacity var(--dur) ease, transform 600ms var(--ease-out); }
.hero-strip li::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(72, 120, 250, 0.35), rgba(155, 108, 255, 0.35)); mix-blend-mode: screen; pointer-events: none; }
.hero-strip li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(13, 18, 31, 0.9)); pointer-events: none; }
.hero-strip span { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); z-index: 1; font-size: var(--text-sm); font-weight: 600; color: #fff; }
.hero-strip li:hover img { opacity: 0.8; transform: scale(1.03); }
@media (max-width: 639px) { .hero-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .hero-strip li { aspect-ratio: 21 / 9; } }

/* forms that collect answers (/ai/is-it-for-me, /services/ai-readiness-checklist, /ai/ai-use-policy) */
.quiz { padding: var(--space-6); }
.quiz__q { border: 0; padding: 0; margin: 0; }
.quiz__q legend { padding: 0; }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-right: var(--space-5); font-size: var(--text-base); color: var(--color-fg); cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--color-accent); flex: none; }
.choice--consent { display: flex; align-items: flex-start; font-size: var(--text-sm); color: var(--color-muted); }
.choice--consent input { margin-top: 2px; }
.scale { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scale .choice { margin-right: var(--space-3); }
.is-invalid legend, .is-invalid .field__label, .is-invalid.choice--consent { color: var(--color-danger); }
.quiz__result { padding: var(--space-6); border-color: rgba(var(--color-accent-rgb), 0.5); }
.quiz__result[hidden] { display: none; }