/* styles/professional.css */
/*
 * KGSITES professional presentation layer
 *
 * Route styles retain their layout responsibilities. This bundle loads after
 * them and adds a restrained, consistent finish for the public portfolio.
 */

:root {
  --header-height: 74px;
  --professional-page: #111820;
  --professional-surface: #17212b;
  --professional-surface-raised: #1d2935;
  --professional-surface-soft: #202d39;
  --professional-ink: #f8fafc;
  --professional-muted: #c4ced8;
  --professional-subtle: #9eabb8;
  --professional-line: #3a4855;
  --professional-line-strong: #526272;
  --professional-navy: #0b2238;
  --professional-blue: #17699c;
  --professional-blue-dark: #0f527f;
  --professional-accent-text: #82c9ef;
  --professional-focus: #9ad9fb;
  --professional-blue-soft: #dcebf4;
  --professional-success: #197146;
  --professional-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  --professional-shadow-raised: 0 18px 42px rgba(0, 0, 0, 0.22);

  --color-page: var(--professional-page);
  --color-panel: var(--professional-surface);
  --color-panel-soft: var(--professional-surface-soft);
  --color-text: var(--professional-ink);
  --color-muted: var(--professional-muted);
  --color-subtle: var(--professional-subtle);
  --color-cyan: var(--professional-accent-text);
  --color-violet: #7c91a6;
  --color-green: #4a9b70;
  --color-orange: #b78a54;
  --eyebrow-color: var(--professional-accent-text);
  --color-line: var(--professional-line);
  --color-line-soft: color-mix(in srgb, var(--professional-line) 68%, transparent);
  --surface-card: var(--professional-surface);
  --surface-card-soft: var(--professional-surface-soft);
  --surface-glass: var(--professional-surface-soft);
  --surface-glass-hover: var(--professional-surface-raised);
  --surface-hero: var(--professional-navy);
  --action-bg: var(--professional-blue);
  --action-bg-hover: var(--professional-blue-dark);
  --action-line: var(--professional-blue);
  --action-line-hover: var(--professional-blue-dark);
  --radius-small: 8px;
  --radius: 14px;
  --radius-large: 20px;
  --shadow-card: var(--professional-shadow);
  --shadow-action: 0 8px 20px rgba(3, 15, 26, 0.2);
}

html {
  color-scheme: dark;
}

body {
  background: var(--professional-page) !important;
  color: var(--professional-ink);
  font-family: Inter, Aptos, 'Segoe UI', Arial, sans-serif;
  line-height: 1.68;
}

h1,
h2,
h3,
h4,
strong {
  color: var(--professional-ink);
}

:focus-visible {
  outline-color: var(--professional-focus);
}

::selection {
  background: var(--professional-blue);
  color: #fff;
}

/* Shared typography and page introductions */

.hero,
.hero-section,
.service-hero,
.page-hero,
.legal-hero {
  border-bottom: 4px solid var(--professional-blue);
  background: var(--professional-navy) !important;
}

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after,
.service-hero::before,
.service-hero::after,
.page-hero::before,
.page-hero::after,
.legal-hero::before,
.legal-hero::after,
.site-footer::before {
  display: none !important;
}

.hero-section h1,
.service-hero h1,
.page-hero h1,
.legal-hero h1 {
  max-width: 980px;
  background: none !important;
  color: #fff;
  font-size: clamp(42px, 6.4vw, 76px);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.page-hero__intro,
.service-hero p:not(.service-kicker),
.portfolio-hero-description,
.legal-hero time {
  color: #d7e0e8;
}

.page-hero__eyebrow,
.service-kicker,
.section-heading > span,
.regency-projects__eyebrow,
.legal-hero p,
.home-services__eyebrow,
.catalogue-service__type,
.origin-story__eyebrow,
.portfolio-carousel__header > div:first-child > span,
.custom-project-showcase__copy > span,
.zigzag-system__intro > span,
.project-builder__heading > div > span,
.wizard-step__heading > span,
.scope-module > header > span {
  color: var(--professional-accent-text);
  font-family: Inter, Aptos, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero :is(.page-hero__eyebrow, .service-kicker),
.hero-section :is(.web-portfolio-label, .service-kicker),
.service-hero .service-kicker,
.page-hero .page-hero__eyebrow,
.legal-hero p {
  color: #9ed9f7;
}

.service-kicker::before,
.section-heading > span::before,
.regency-projects__eyebrow::before {
  background: currentColor !important;
}

.section-heading {
  max-width: 820px;
}

.section-heading h2,
.portfolio-carousel__header h2 {
  color: var(--professional-ink);
  font-size: clamp(32px, 4.7vw, 54px);
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.section-heading__intro,
.info-card p,
.info-card li {
  color: var(--professional-muted);
}

.page-shell,
.service-catalogue,
.legal-content {
  background: var(--professional-page);
}

.info-card,
.info-card--dark {
  border: 1px solid var(--professional-line);
  border-left: 4px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: var(--professional-shadow) !important;
}

.info-card,
.home-services__header,
.home-services__website,
.home-service-feature,
#projects[data-module='portfolio-carousel'] .project-card,
.included-support,
.localisation-price-comparison,
.about-origin__copy.origin-story,
.career-chapter,
.about-automation__tasks article,
.about-method__card,
.about-portfolio__grid > a,
.about-cta,
.shared-client-notice,
.ongoing-services,
.project-controls,
.history-item,
.portfolio-cta,
.custom-project-showcase,
.zigzag-system,
.project-wizard,
.quick-contact,
.project-summary,
.translation-estimate,
.whatsapp-dialog__card,
.cookie-panel {
  border-radius: var(--radius-large) !important;
}

.home-platform-card,
.home-service-badge,
.catalogue-service,
.task-card,
.ongoing-service,
.history-content,
.history-service,
.related-project,
.service-choice,
.option-card,
.scope-module,
.field-callout,
.linked-service-note,
.data-format-example,
.email-estimate,
.quick-contact__email,
.quick-contact__form,
.legal-link-grid a {
  border-radius: var(--radius) !important;
}

/* Header, navigation, buttons and utilities */

.site-header,
.site-header.is-scrolled,
.nav-open .site-header {
  height: 74px;
  border-bottom: 1px solid #294156;
  background: #091a29 !important;
  box-shadow: 0 8px 28px rgba(2, 10, 17, 0.18) !important;
  backdrop-filter: none;
}

.site-brand img {
  width: 142px;
}

.site-nav__link,
.site-nav__cta {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] {
  background: #132f47 !important;
}

.site-nav__link,
.site-nav__cta,
.site-nav-toggle,
.site-nav__mega,
.site-nav__mega-links a,
.site-footer__project-link,
.service-hero a,
.web-portfolio-visit,
.market-visit__trigger,
.shared-client-notice > a,
.about-cta a,
.wizard-next,
.wizard-submit,
.quick-contact__form > button,
.quick-contact__email button,
.catalogue-service__tasks,
.portfolio-carousel__controls button,
.portfolio-cta > a,
.localisation-price-comparison__cta,
.cookie-panel__actions button {
  border-radius: var(--radius-small) !important;
}

.site-nav__cta,
.site-footer__project-link,
.service-hero a,
.web-portfolio-visit,
.market-visit__trigger,
.shared-client-notice > a,
.about-cta a,
.wizard-next,
.wizard-submit,
.quick-contact__form > button,
.quick-contact__email button,
.catalogue-service__tasks,
.portfolio-carousel__controls button,
.portfolio-cta > a,
.localisation-price-comparison__cta,
.cookie-panel__actions button {
  border: 1px solid var(--professional-blue);
  background: var(--professional-blue) !important;
  color: #fff;
  box-shadow: var(--shadow-action) !important;
}

.site-nav__cta:hover,
.site-footer__project-link:hover,
.service-hero a:hover,
.web-portfolio-visit:hover,
.market-visit__trigger:hover,
.shared-client-notice > a:hover,
.about-cta a:hover,
.wizard-next:hover,
.wizard-submit:hover,
.quick-contact__form > button:hover,
.quick-contact__email button:hover,
.catalogue-service__tasks:hover,
.portfolio-carousel__controls button:hover,
.portfolio-cta > a:hover,
.localisation-price-comparison__cta:hover,
.cookie-panel__actions button:hover {
  border-color: var(--professional-blue-dark);
  background: var(--professional-blue-dark) !important;
  color: #fff;
  box-shadow: 0 10px 24px rgba(3, 15, 26, 0.24) !important;
}

.site-nav__expand::after {
  background: #17364f !important;
}

.site-nav__mega {
  border: 1px solid #33485a;
  background: #0d2132 !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26) !important;
}

.site-nav__mega-intro {
  border-right: 1px solid #375064;
  background: #143149 !important;
}

.site-nav__mega-intro > span,
.nav-icon,
.nav-icon--translation::before {
  color: #92c3df;
}

.site-nav__mega-links a:hover,
.site-nav__mega-links a[aria-current='page'] {
  background: #173249 !important;
}

.site-nav-toggle {
  border-color: #506679;
  background: #10283b !important;
}

.whatsapp-contact,
.whatsapp-contact--home {
  border-color: #7da78c;
  background: color-mix(
    in srgb,
    var(--professional-success) 10%,
    var(--professional-surface)
  ) !important;
  color: var(--professional-ink);
}

.whatsapp-contact--home > a {
  border-color: var(--professional-success);
  color: #72d39f;
}

.whatsapp-contact--home > a:hover {
  background: var(--professional-success) !important;
  color: #fff;
}

.script-notice,
.module-error,
.form-message {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
  color: var(--professional-ink);
}

.form-message.is-sending {
  border-left: 4px solid var(--professional-blue);
}

.form-message.is-success {
  border-left: 4px solid var(--professional-success);
}

.form-message.is-error {
  border-left: 4px solid #b43b3b;
}

.whatsapp-launcher {
  border-color: #0f6636;
  background: #147a42 !important;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
}

.whatsapp-launcher:hover,
.whatsapp-launcher:focus-visible {
  background: #0f6636 !important;
  color: #fff;
  transform: none;
}

.whatsapp-dialog {
  background: rgba(7, 17, 27, 0.78) !important;
  backdrop-filter: none;
}

.whatsapp-dialog__card,
.cookie-panel {
  border: 1px solid var(--professional-line-strong);
  border-top: 4px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  box-shadow: var(--professional-shadow) !important;
}

.whatsapp-dialog__close {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.whatsapp-dialog__qr {
  background: #fff !important;
}

/* Footer */

.site-footer {
  border-top: 5px solid var(--professional-blue);
  background: #081a29 !important;
  color: #d5dee6;
}

.site-footer__brand > p,
.site-footer__columns a,
.site-footer__columns button,
.site-footer__bottom p,
.site-footer__bottom a,
.theme-switcher__label {
  color: #aebbc6;
}

.site-footer__columns h3 {
  color: #fff;
}

.site-footer__project-link {
  background: var(--professional-blue) !important;
}

.site-footer__bottom {
  border-color: #344b5e;
}

.theme-switcher__choices {
  border-color: #455c6f;
  background: #0f293d !important;
}

.site-footer .theme-switcher__choices button[aria-pressed='true'] {
  background: #24455f !important;
  box-shadow: none !important;
}

/* Homepage */

.hero:empty {
  background: var(--professional-navy) !important;
}

.home-services {
  margin-top: 0;
  padding-top: 64px;
  background: var(--professional-page);
}

.home-services__header {
  width: 100%;
  margin: 0 0 34px;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--professional-line);
  border-left: 7px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: var(--professional-shadow) !important;
}

.home-services__header::before,
.home-services__header::after,
.home-platform-card::before {
  display: none;
}

.home-services__header h1 {
  color: var(--professional-ink);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 760;
  line-height: 1.04;
}

.home-services__intro,
.home-services__website-copy > p:not(.home-services__eyebrow),
.home-platform-card small,
.home-service-feature > p {
  color: var(--professional-muted);
}

.home-services__website,
.home-service-feature,
#projects[data-module='portfolio-carousel'] .project-card {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: var(--professional-shadow) !important;
}

.home-services__website::before,
.home-service-feature::before,
#projects[data-module='portfolio-carousel'] .project-card::before {
  height: 4px;
  background: var(--professional-blue) !important;
}

.home-services__website:hover,
.home-service-feature:hover,
#projects[data-module='portfolio-carousel'] .project-card:hover {
  border-color: var(--professional-blue);
  box-shadow: var(--professional-shadow-raised) !important;
}

.home-services__website-copy > a,
.project-card__link {
  color: var(--professional-accent-text);
}

.home-platform-card,
.home-service-badge {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
  color: var(--professional-ink);
}

.home-platform-card:hover,
.home-platform-card:focus-visible {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
}

#projects[data-module='portfolio-carousel'] {
  border-block: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.project-card-type,
.portfolio-carousel__controls span {
  color: var(--professional-muted);
}

.portfolio-carousel__progress {
  background: var(--professional-line) !important;
}

.portfolio-carousel__progress span {
  background: var(--professional-blue) !important;
}

/* Service pages */

.service-intro::before,
.catalogue-service::before {
  color: var(--professional-blue);
  font-family: Inter, Aptos, 'Segoe UI', Arial, sans-serif;
}

.service-intro::before {
  content: 'Service overview';
}

.catalogue-service::before {
  content: '';
}

.included-support {
  border: 1px solid var(--professional-line);
  border-left: 5px solid var(--professional-success);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: var(--professional-shadow) !important;
}

.included-support > span {
  border: 1px solid var(--professional-success);
  background: transparent !important;
  color: var(--professional-success);
}

.included-support h2,
.included-support p {
  color: var(--professional-ink);
}

.catalogue-service,
.task-card {
  border: 1px solid var(--professional-line);
  border-left: 4px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: none !important;
}

.catalogue-service:hover,
.catalogue-service:focus-within,
.task-card:hover,
.task-card:focus-within {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
  box-shadow: var(--professional-shadow) !important;
}

.catalogue-service__icon {
  border-color: var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.catalogue-service__icon > span,
.task-card a {
  color: var(--professional-accent-text);
}

.localisation-price-comparison {
  border: 1px solid var(--professional-line);
  border-top: 5px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: var(--professional-shadow) !important;
}

.localisation-price-comparison__heading h2,
.localisation-price-comparison__notes strong,
.localisation-price-table__row > * {
  color: var(--professional-ink);
}

.localisation-price-comparison__heading > p:last-child,
.localisation-price-comparison__notes p,
.localisation-price-table__head > * {
  color: var(--professional-muted);
}

.localisation-price-table {
  border-color: var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.localisation-price-table__row > * {
  border-color: var(--professional-line);
}

.localisation-price-table .is-kgsites {
  background: var(--professional-blue-soft) !important;
  color: #10283b;
}

/* About page */

.page-hero--about h2 {
  color: #a9c9dc;
  font-weight: 650;
}

.page-hero--about + .page-shell::before,
.about-origin::before,
.origin-story__chapter::before,
.career-chapters::before,
.career-chapter::before,
.about-automation__tasks article::after,
.about-method__card--dark::after,
.about-cta::before {
  display: none !important;
}

.about-origin,
.about-journey,
.about-automation,
.about-method,
.about-portfolio {
  border-color: var(--professional-line);
}

.about-origin__copy.origin-story,
.career-chapter,
.about-automation__tasks article,
.about-method__card,
.about-portfolio__grid > a,
.about-cta {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: none !important;
}

.about-origin__copy.origin-story,
.about-cta {
  border-left: 5px solid var(--professional-blue);
}

.origin-story__console,
.origin-story__graphic {
  display: none;
}

.origin-story__route {
  border-bottom: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.origin-story__route span,
.origin-story__marker span,
.origin-story__chapter > div > p:last-child,
.career-chapter__content p,
.about-automation__tasks article > p,
.about-method__card p,
.about-portfolio__grid > a > p {
  color: var(--professional-muted);
}

.origin-story__route span.is-active,
.origin-story__chapter .origin-story__eyebrow,
.origin-story__chapter--code .origin-story__eyebrow,
.origin-story__chapter--network .origin-story__eyebrow,
.origin-story__chapter--mindset .origin-story__eyebrow,
.about-method__number,
.career-chapter__content > span,
.origin-story__marker b {
  color: var(--professional-accent-text);
}

.origin-story__route i {
  background: var(--professional-line) !important;
}

.origin-story__chapter {
  grid-template-columns: 58px minmax(0, 1fr);
  border-color: var(--professional-line);
  background: transparent !important;
}

.about-origin__logos,
.career-chapter__visual,
.about-automation__intro,
.about-method__card--dark {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
  box-shadow: none !important;
}

.about-origin__logos::before {
  color: var(--professional-blue);
  font-family: Inter, Aptos, 'Segoe UI', Arial, sans-serif;
}

.about-origin__logos a,
.career-logo-row a,
.about-automation__logos a {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  box-shadow: none !important;
}

.about-origin__logos a:hover,
.career-logo-row a:hover,
.about-automation__logos a:hover,
.career-chapter:hover,
.about-automation__tasks article:hover,
.about-method__card:hover,
.about-portfolio__grid > a:hover {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
  box-shadow: var(--professional-shadow) !important;
  transform: none;
}

.about-portfolio__action {
  background: var(--professional-blue) !important;
  color: #fff;
}

.about-cta {
  background: var(--professional-navy) !important;
}

.about-cta h2,
.about-cta p {
  color: #fff;
}

/* Portfolio case studies */

.web-portfolio-label,
.regency-projects__eyebrow,
.custom-project-showcase__copy > span,
.zigzag-system__intro > span {
  color: var(--professional-accent-text);
}

.portfolio-progress-pill,
.portfolio-visit-pending,
.regency-projects__stats span,
.ongoing-service__status,
.history-tag {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
  color: var(--professional-muted);
}

.market-visit__menu {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  box-shadow: var(--professional-shadow) !important;
}

.market-visit__row:hover {
  background: var(--professional-surface-soft) !important;
}

.shared-client-notice,
.ongoing-services,
.project-controls,
.history-item,
.portfolio-cta,
.custom-project-showcase,
.zigzag-system,
.before-after-proof figure {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
  box-shadow: none !important;
}

.shared-client-notice,
.ongoing-services,
.portfolio-cta,
.custom-project-showcase,
.zigzag-system {
  border-top: 5px solid var(--professional-blue);
}

.ongoing-service,
.history-content,
.history-service,
.related-project,
.zigzag-system__map article {
  border-color: var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.project-sort select,
.filter-tag {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
}

.filter-tag:hover,
.filter-tag.active {
  border-color: var(--professional-blue);
  background: var(--professional-blue) !important;
  color: #fff;
  box-shadow: none !important;
}

.project-history::before,
.history-item::before,
.history-item[open]::before,
.history-item--in-progress::before {
  background: var(--professional-blue) !important;
  box-shadow: none !important;
}

.history-number {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.history-content,
.before-after-proof figcaption {
  border-color: var(--professional-line);
}

.history-service:hover,
.related-project:hover {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
  box-shadow: none !important;
}

.before-after-proof figcaption {
  background: #0b2238 !important;
  color: #fff;
}

/* Project builder and contact forms */

.project-builder-shell,
.direct-contact-section {
  background: var(--professional-page);
}

.project-wizard,
.quick-contact,
.project-summary,
.translation-estimate {
  border: 1px solid var(--professional-line);
  border-top: 5px solid var(--professional-blue);
  background: var(--professional-surface) !important;
  box-shadow: var(--professional-shadow) !important;
}

.wizard-progress {
  border-bottom: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
}

.wizard-progress span b {
  border: 1px solid var(--professional-line-strong);
  background: var(--professional-surface) !important;
}

.wizard-progress span.is-active b {
  border-color: var(--professional-blue);
  background: var(--professional-blue) !important;
  color: #fff;
  box-shadow: none !important;
}

.wizard-progress i {
  background: var(--professional-line) !important;
}

.service-choice,
.option-card,
.scope-module,
.field-callout,
.linked-service-note,
.data-format-example,
.email-estimate,
.quick-contact__email,
.quick-contact__form {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface-soft) !important;
  box-shadow: none !important;
}

.service-choice,
.option-card,
.home-platform-card,
.home-service-feature,
#projects[data-module='portfolio-carousel'] .project-card,
.catalogue-service,
.task-card,
.career-chapter,
.about-automation__tasks article,
.about-method__card,
.about-portfolio__grid > a,
.about-origin__logos a,
.career-logo-row a,
.about-automation__logos a,
.history-service,
.related-project,
.legal-link-grid a {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.service-choice:hover,
.service-choice.is-selected,
.service-choice:has(input:focus-visible),
.option-card:has(input:focus-visible),
.option-card:has(input:checked) {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
  box-shadow: none !important;
}

.service-choice__copy small {
  color: var(--professional-muted) !important;
}

.service-choice__check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--professional-blue) !important;
  color: #fff;
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.service-choice.is-selected .service-choice__check {
  opacity: 1;
  transform: scale(1);
}

.choice-badge,
.service-choice__check,
.option-card i,
.summary-services span,
.budget-range__values output {
  border: 1px solid var(--professional-line);
  background: var(--professional-surface) !important;
  color: var(--professional-ink);
}

.field-group input,
.field-group select,
.field-group textarea,
.quick-contact__form input,
.quick-contact__form textarea {
  border: 1px solid var(--professional-line-strong);
  border-radius: var(--radius-small) !important;
  background: var(--professional-page) !important;
  color: var(--professional-ink);
  box-shadow: none !important;
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.quick-contact__form input:focus,
.quick-contact__form textarea:focus {
  border-color: var(--professional-blue);
  outline: 2px solid color-mix(in srgb, var(--professional-blue) 28%, transparent);
}

.wizard-back {
  color: var(--professional-muted);
}

.quick-contact::before,
.scope-module::before {
  display: none;
}

.budget-range__track::before {
  background: var(--professional-line) !important;
}

.budget-range__track > span,
.budget-range input[type='range']::-webkit-slider-runnable-track,
.budget-range input[type='range']::-moz-range-track {
  background: var(--professional-blue) !important;
  box-shadow: none !important;
}

.budget-range input[type='range']::-webkit-slider-thumb,
.budget-range input[type='range']::-moz-range-thumb {
  border-color: var(--professional-blue);
  background: #fff !important;
  box-shadow: none !important;
}

/* Legal pages */

.legal-page {
  background: var(--professional-page);
  color: var(--professional-ink);
}

.legal-content > section,
.legal-table,
.legal-table > div {
  border-color: var(--professional-line);
}

.legal-content p,
.legal-content li,
.legal-link-grid span,
.legal-table span {
  color: var(--professional-muted);
}

.legal-content a {
  color: var(--professional-accent-text);
}

.legal-content > .legal-note {
  color: var(--professional-ink);
}

.legal-content > .legal-note::before {
  background: var(--professional-blue) !important;
}

.legal-link-grid a {
  border: 1px solid var(--professional-line);
  border-left: 4px solid var(--professional-blue);
  background: var(--professional-surface) !important;
}

.legal-link-grid a:hover {
  border-color: var(--professional-blue);
  background: var(--professional-surface-raised) !important;
}

/* Reduced chrome and stronger section hierarchy */

:is(
  .home-services__header,
  .home-services__website,
  .home-service-feature,
  #projects[data-module='portfolio-carousel'] .project-card,
  .included-support,
  .catalogue-service,
  .task-card,
  .about-origin__copy.origin-story,
  .career-chapter,
  .about-automation__tasks article,
  .about-method__card,
  .about-portfolio__grid > a,
  .about-cta,
  .shared-client-notice,
  .ongoing-services,
  .project-controls,
  .history-item,
  .portfolio-cta,
  .custom-project-showcase,
  .zigzag-system,
  .project-wizard,
  .quick-contact,
  .project-summary,
  .translation-estimate,
  .legal-link-grid a
) {
  border: 0 !important;
}

.home-services__website::before,
.home-service-feature::before,
#projects[data-module='portfolio-carousel'] .project-card::before {
  display: none;
}

.home-services__header,
.about-origin > .section-heading,
.about-journey > .section-heading,
.about-automation > .section-heading,
.about-method > .section-heading,
.about-portfolio > .section-heading {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: clamp(34px, 5vw, 56px) max(22px, calc((100vw - var(--container)) / 2));
  border-radius: 0 !important;
  background: var(--professional-surface-soft) !important;
  box-shadow: none !important;
}

.home-services__header {
  margin-top: 0;
  margin-bottom: 36px;
}

.about-origin > .section-heading,
.about-journey > .section-heading,
.about-automation > .section-heading,
.about-method > .section-heading,
.about-portfolio > .section-heading {
  margin-bottom: 42px;
}

.home-services__header > *,
.about-origin > .section-heading > *,
.about-journey > .section-heading > *,
.about-automation > .section-heading > *,
.about-method > .section-heading > *,
.about-portfolio > .section-heading > * {
  max-width: 820px;
}

/* Loading state */

body::before {
  background: var(--professional-navy) !important;
}

body::after {
  content: 'KGSITES';
  width: auto;
  height: auto;
  padding: 20px 28px;
  border: 1px solid #597186;
  border-left: 5px solid var(--professional-accent-text);
  border-radius: var(--radius) !important;
  background: #0b2238 !important;
  color: #fff;
  font-family: Inter, Aptos, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.18em;
  box-shadow: var(--professional-shadow-raised) !important;
  animation: loading-failsafe 0s 2.4s forwards;
}

html.site-loading body::before {
  animation: loading-failsafe 0s 2.4s forwards;
}

@keyframes loading-failsafe {
  to {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1050px) {
  .site-header {
    background: #091a29 !important;
  }

  .site-nav {
    background: #0b2031 !important;
  }

  .site-nav__mega {
    border-left: 3px solid var(--professional-blue);
    background: #112c41 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  .home-services {
    padding: 18px 14px 74px !important;
  }

  .home-services__header,
  .home-services__website,
  .home-service-feature,
  .project-wizard,
  .quick-contact {
    border-inline: 1px solid var(--professional-line);
    border-radius: var(--radius) !important;
  }

  .home-services__header {
    width: auto;
    margin-left: 0;
    margin-bottom: 14px !important;
  }

  .home-services__website {
    margin-bottom: 14px !important;
  }

  .home-services__split {
    gap: 14px !important;
  }

  .home-project-builder#contact {
    width: min(100% - 28px, 1180px) !important;
    margin-inline: auto !important;
    padding: 70px 0 86px;
  }

  .origin-story__chapter {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .whatsapp-launcher {
    justify-content: center;
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    border-radius: 50% !important;
  }

  .whatsapp-launcher span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  .wizard-progress span.is-active {
    gap: 7px;
    font-size: 11px !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    box-shadow: none !important;
    color: #111 !important;
  }

  .site-header,
  .site-footer,
  .whatsapp-launcher,
  .cookie-panel,
  .theme-switcher {
    display: none !important;
  }
}

/* Theme guarantees for components with legacy literal colours. */

:is(
  .home-services__intro,
  .home-services__website-copy > p:not(.home-services__eyebrow),
  .home-platform-card small,
  .home-service-feature > p,
  .project-card-type,
  .portfolio-carousel__controls span,
  .included-support p,
  .localisation-price-comparison__heading > p:last-child,
  .localisation-price-comparison__notes p,
  .localisation-price-table__head > *,
  .origin-story__route span,
  .origin-story__marker span,
  .origin-story__chapter > div > p:last-child,
  .career-chapter__content p,
  .about-automation__tasks article > p,
  .about-method__card p,
  .about-portfolio__grid > a > p,
  .portfolio-progress-pill,
  .portfolio-visit-pending,
  .regency-projects__stats span,
  .ongoing-service__status,
  .history-tag,
  .legal-content p,
  .legal-content li,
  .legal-link-grid span,
  .legal-table span
) {
  color: var(--professional-muted) !important;
}

:is(
  .home-services__header,
  .home-services__header h1,
  .home-services__website,
  .home-service-feature,
  #projects[data-module='portfolio-carousel'] .project-card,
  .included-support,
  .included-support h2,
  .catalogue-service,
  .task-card,
  .localisation-price-comparison,
  .localisation-price-comparison__heading h2,
  .localisation-price-comparison__notes strong,
  .localisation-price-table__row > *,
  .about-origin__copy.origin-story,
  .career-chapter,
  .about-automation__tasks article,
  .about-method__card,
  .about-portfolio__grid > a,
  .shared-client-notice,
  .ongoing-services,
  .project-controls,
  .history-item,
  .portfolio-cta,
  .custom-project-showcase,
  .zigzag-system,
  .project-wizard,
  .quick-contact,
  .project-summary,
  .translation-estimate,
  .service-choice,
  .option-card,
  .scope-module,
  .field-callout,
  .linked-service-note,
  .data-format-example,
  .email-estimate,
  .quick-contact__email,
  .quick-contact__form,
  .legal-page,
  .legal-content > .legal-note
) {
  color: var(--professional-ink) !important;
}

:is(
  .home-services__website-copy > a,
  .project-card__link,
  .catalogue-service__icon > span,
  .task-card a,
  .web-portfolio-label,
  .regency-projects__eyebrow,
  .custom-project-showcase__copy > span,
  .zigzag-system__intro > span,
  .legal-content a
) {
  color: var(--professional-accent-text) !important;
}

:is(
    .hero,
    .hero-section,
    .service-hero,
    .page-hero,
    .legal-hero,
    .about-cta,
    .site-footer
  )
  :is(h1, h2, h3, h4) {
  color: #fff !important;
}

/* Final interaction and spacing refinements shared across public pages. */

.home-services {
  padding-top: 0;
}

.home-project-builder#contact {
  padding-top: 48px;
}

.whatsapp-contact--home > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--professional-success);
  border-radius: var(--radius-small);
  background: var(--professional-success) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(25, 113, 70, 0.2);
  text-decoration: none;
}

.whatsapp-contact--home > a:hover,
.whatsapp-contact--home > a:focus-visible {
  background: #145d3a !important;
  color: #fff !important;
}

.whatsapp-contact--home > a .ui-arrow {
  width: 16px;
  height: 16px;
}

.home-service-mark {
  display: grid;
  grid-template-rows: 52px auto;
  justify-items: center;
  gap: 7px;
  width: 78px;
}

.home-service-mark .home-service-logo {
  width: 52px;
  height: 52px;
}

.home-service-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-service-mark small {
  color: var(--professional-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.site-nav__group > .site-nav__link {
  border-radius: var(--radius-small) 0 0 var(--radius-small) !important;
}

.site-nav__group > .site-nav__expand {
  width: 32px;
  margin-left: 0;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.site-nav__group:hover > .site-nav__link,
.site-nav__group:focus-within > .site-nav__link,
.site-nav__group:hover > .site-nav__expand,
.site-nav__group:focus-within > .site-nav__expand,
.site-nav__group.is-open > .site-nav__link,
.site-nav__group.is-open > .site-nav__expand {
  background: #132f47 !important;
  color: #fff;
}

.hero-section[data-portfolio-key] .web-portfolio-title {
  margin: 12px auto;
}

.hero-section[data-portfolio-key] .web-portfolio-label {
  margin-top: 0;
}

.page-hero--about + .page-shell {
  padding-top: 0 !important;
}

.career-chapter__visual {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.career-logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  align-items: center;
  gap: 12px;
}

.career-logo-row a,
.career-logo-row--development a {
  width: 100%;
  height: 76px;
  padding: 7px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.career-logo-row a img,
.career-logo-row a > span {
  width: min(58px, 90%);
  height: min(58px, 90%);
  object-fit: contain;
}

.career-logo-divider {
  margin: 12px 0;
}

.about-automation {
  margin-top: 72px;
  padding: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.about-automation > .section-heading {
  width: auto;
  max-width: 820px;
  margin: 0 0 32px;
  padding: 0;
  background: transparent !important;
}

.about-automation .section-heading > span {
  color: var(--professional-accent-text);
}

.about-automation .section-heading__intro {
  color: var(--professional-muted);
}

.about-method__number {
  display: none;
}

.about-method__card h3 {
  margin-top: 0;
}

@media (max-width: 1050px) {
  .site-nav__group > .site-nav__link,
  .site-nav__group > .site-nav__expand {
    border-radius: 0 !important;
    background: transparent !important;
  }
}

@media (max-width: 768px) {
  .home-project-builder#contact {
    padding-top: 36px;
  }

  .career-logo-row a,
  .career-logo-row--development a {
    height: 64px;
  }

  .about-automation {
    margin-top: 58px;
  }
}