/* ============ Theme kit — shared by the redesigned pages only ============
   Loaded after site.css and before one /css/themes/<page>.css file. The industry
   pages (restaurants, gyms, construction, cleaning, /sobia/) do NOT load this, so
   nothing here can change them.

   A theme file must set: --bg --bg-raised --bg-card --line --line-strong --text
   --text-dim --text-faint --accent --accent-rgb --cta-bg --cta-ink --font-display
   --font-body. Optional: --accent-bright --cta-hover --grid-rgb --btn-radius
   --card-radius --card-radius-lg --num-font --three-*.

   site.css hardcodes the old gold (rgba 240,169,60) in ~20 places; every one that
   is visible on these pages is re-pointed at --accent-rgb below. */

:root {
  --mint: var(--accent);
  --mint-bright: var(--accent-bright, var(--accent));
  --mint-deep: var(--accent);
  --gold: var(--accent);
  --grad-mint: var(--cta-bg);
  --glow-mint: 0 12px 30px rgba(var(--accent-rgb), 0.22);
  --radius: var(--card-radius, 8px);
  --radius-lg: var(--card-radius-lg, 12px);
  --container: 1200px;
}

::selection { background: var(--accent); color: var(--cta-ink); }
/* rotating orbit rings and wide display type must never create sideways scroll on phones */
html, body { overflow-x: clip; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline-color: var(--accent); }

/* ---------- ambient layers: same motion, theme colours ---------- */
.px-orb--1 { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.45), transparent 70%); }
.px-orb--2 { background: radial-gradient(circle, rgba(var(--accent2-rgb, var(--accent-rgb)), 0.35), transparent 70%); }
.px-orb--3 { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), transparent 70%); }
.px-ring, .px-ring--b, .px-ring--c, .px-diamond, .px-diamond--b { border-color: rgba(var(--accent-rgb), 0.3); }
.px-dot, .px-dot--b { background: rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45); }
.px-cross::before, .px-cross::after { background: rgba(var(--accent-rgb), 0.45); }
.px-grid {
  background-image:
    linear-gradient(rgba(var(--grid-rgb, 255, 255, 255), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb, 255, 255, 255), 0.07) 1px, transparent 1px);
}
.cursor-glow { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 65%); }
.nav__logo-mark { filter: none; }

/* ---------- buttons: solid, squared, no gradient pill ---------- */
.btn { border-radius: var(--btn-radius, 4px); font-weight: 700; letter-spacing: 0.01em; }
.btn--primary { background: var(--cta-bg); color: var(--cta-ink); }
.btn--primary:hover { background: var(--cta-hover, var(--cta-bg)); box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.28); }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); color: var(--text); }

/* ---------- page hero + home hero: left-aligned, not centered ---------- */
.page-hero {
  text-align: left;
  padding-left: max(var(--space-gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--space-gutter), calc((100% - var(--container)) / 2));
}
.page-hero::before {
  background:
    radial-gradient(900px circle at 85% -10%, rgba(var(--accent-rgb), 0.14), transparent 55%),
    radial-gradient(600px circle at 0% 100%, rgba(var(--accent2-rgb, var(--accent-rgb)), 0.07), transparent 60%);
}
.page-hero h1 { margin: 0; max-width: 16ch; }
.page-hero__sub { margin: 1.4rem 0 0; max-width: 58ch; }
.page-hero .hero__actions, .page-hero .hero__badges { justify-content: flex-start; }
.hero { justify-content: flex-start; }
.hero__inner { text-align: left; max-width: var(--container); width: 100%; margin: 0 auto; }
.hero__title { max-width: 14ch; }
.hero__sub { margin: 1.8rem 0 0; }
.hero__actions, .hero__badges { justify-content: flex-start; }
.hero__eyebrow { border-radius: var(--btn-radius, 4px); }
.hero__badges li::before { color: var(--accent); }
.pulse-dot { background: var(--accent); animation-name: pulse-accent; }
@keyframes pulse-accent {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* ---------- section heads: asymmetric, title left / intro right ---------- */
.section__head {
  max-width: var(--container); text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end;
}
.section__head > * { grid-column: 1; }
.section__head > .section__sub { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.section__kicker::before { border-radius: 0; height: 3px; }
.section__more { max-width: var(--container); margin-left: auto; margin-right: auto; text-align: left; }

/* one container width, so every left edge lines up */
.grid-2, .grid-3, .grid-4, .process, .services__grid, .cases__grid, .why__grid,
.insights-grid, .team, .shots, .gallery, .contact-layout, .stats__grid, .result-strip, .timeline, .pills {
  max-width: var(--container);
}
.pills { justify-content: flex-start; }
.timeline { margin-left: auto; margin-right: auto; }

/* ---------- cards: rules and numbers instead of glowing tiles ---------- */
.service-card, .feature-card, .why__card, .process__step, .insight-card, .case-card, .price-card,
.team-card, .contact-aside__card, .t-card, .shot, .faq details, .post__author {
  border-radius: var(--radius);
}
.service-card::before { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.1), transparent 45%); }
.service-card:hover, .feature-card:hover, .why__card:hover, .process__step:hover {
  border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent);
}
.service-card__icon { background: rgba(var(--accent-rgb), 0.1); border-radius: var(--btn-radius, 4px); }
.service-card__num, .why__num {
  display: block; font-family: var(--num-font, var(--font-display)); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1rem;
}
.why__card h3 { color: var(--text); }
.feature-card li::before, .price-card li::before, .process__step li::before,
.case-card__results li::before, .cta__list li::before, .portfolio__lists li::before { color: var(--accent); }
.process__step::before { -webkit-text-stroke: 0; color: var(--accent); font-family: var(--num-font, var(--font-display)); }

.case-card__banner { background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.16), transparent 70%); }
.case-card__banner::after { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 70%); }
.insight-card__banner { background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.12), transparent 70%); }
.t-card__avatar, .team-card__avatar { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

/* ---------- stats: left-aligned columns with rules ---------- */
.stats { text-align: left; background: none; }
.stats__grid > * { border-left: 2px solid var(--accent); padding-left: 1.2rem; }
.stats__kicker, .stats__sub { max-width: var(--container); margin-left: auto; margin-right: auto; }
.result-strip { text-align: left; background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.1), transparent); }

/* ---------- bands, CTA, pricing, timeline, answer box ---------- */
.band {
  max-width: var(--container); text-align: left;
  background: radial-gradient(700px circle at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 60%), var(--bg-raised);
  border-left: 6px solid var(--accent);
}
.band p { margin: 0 0 2rem; }
.band .hero__actions { justify-content: flex-start; }
.cta__card {
  max-width: var(--container);
  background: radial-gradient(800px circle at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 50%), var(--bg-raised);
}
.price-card--hot { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.08), var(--bg-card) 50%); }
.price-card__badge { color: var(--cta-ink); border-radius: var(--btn-radius, 4px); }
.timeline::before { background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.05)); }
.timeline__item::before { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15); }
.answer-box { background: rgba(var(--accent-rgb), 0.07); }
.post__body tr:hover td { background: rgba(var(--accent-rgb), 0.05); }
.pill { border-radius: var(--btn-radius, 4px); }

/* ---------- FAQ: two columns across the container ---------- */
.faq { max-width: var(--container); display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; align-items: start; }

/* ---------- forms ---------- */
input[type="range"] { accent-color: var(--accent); }
.field input, .field textarea, .field select { border-radius: var(--btn-radius, 4px); }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); }

@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; }
  .section__head > .section__sub { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  .faq { grid-template-columns: 1fr; }
}