/* Shared geometry, type and interaction states. Loaded after legacy styles. */
:root {
  --brand-primary: #fbd115;
  --brand-hover: #ffe96f;
  --font-body: 1rem;
  --font-small: .875rem;
  --font-caption: .75rem;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-dialog: 18px;
  --control-height: 44px;
  --content-width: 1440px;
  --page-gutter: clamp(20px, 4vw, 64px);
  --section-space: clamp(64px, 8vw, 112px);
  --yellow: var(--brand-primary);
  --yellow-soft: var(--brand-hover);
  --max: var(--content-width);
  --color-error: #ff9c92;
  --color-success: #99dfb7;
  --color-focus: var(--brand-primary);
}

html { scroll-padding-top: 112px; }
body { overflow-x: visible; font-size: var(--font-body); line-height: 1.6; }
main, section, article, .field { min-width: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
button:disabled { opacity: .55; cursor: default; }
button:disabled:hover { transform: none; }
.reveal { opacity: 1; transform: none; }
.reveal.is-revealing { opacity: 0; transform: translateY(18px); }
.reveal.is-revealing.visible { opacity: 1; transform: none; }

/* Public page composition. */
.site-header {
  width: min(calc(100% - 32px), var(--max)); height: auto; min-height: 74px;
  padding: 12px 20px 12px 28px; grid-template-columns: 1fr auto 1fr; gap: 24px;
}
.site-menu-toggle { display: none; }
.header-cta .header-cta-label, .header-cta .header-cta-short { margin: 0; }
.header-cta-short { display: none; }
.hero {
  min-height: 760px; grid-template-columns: 58% 42%;
  padding: 175px max(var(--page-gutter), calc((100vw - var(--max)) / 2)) var(--section-space);
}
.hero h1 { font-size: clamp(36px, 5vw, 76px); line-height: 1.06; letter-spacing: -.045em; overflow-wrap: break-word; }
.hero-actions { flex-wrap: wrap; gap: var(--space-2); }
.button { min-height: 52px; gap: var(--space-2); padding: 12px 24px; font-size: var(--font-small); line-height: 1.4; text-align: center; }
.trust-strip {
  padding: 28px max(var(--page-gutter), calc((100vw - var(--max)) / 2));
  grid-template-columns: 290px minmax(0,1fr); gap: var(--space-3);
}
.services-section, .results-section, .contact-section, .cases-section {
  padding: var(--section-space) max(var(--page-gutter), calc((100vw - var(--max)) / 2));
}
.section-heading { margin-bottom: clamp(32px,5vw,56px); }
.section-heading h2, .contact-copy h2, .cases-intro h2 {
  font-size: clamp(30px,3.5vw,48px); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere;
}
.cases-section { grid-template-columns: minmax(0,33%) minmax(0,1fr); gap: var(--space-4); }
.contact-section { grid-template-columns: minmax(0,42%) minmax(0,1fr); gap: clamp(24px,5vw,72px); }
.site-footer {
  padding: 32px max(var(--page-gutter), calc((100vw - var(--max)) / 2)) 24px;
  grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3);
}
.site-footer p { font-size: var(--font-caption); line-height: 1.6; color: #b8bbbf; }
.footer-social { grid-column: 2; }
.footer-social a { width: 44px; height: 44px; }
.footer-brand a { min-width: 44px; min-height: 44px; }
.image-credits {
  position: static; grid-column: 1/-1; justify-self: start; display: inline-flex; align-items: center;
  min-height: var(--control-height); font-size: var(--font-caption); color: #b8bbbf;
}

/* Visitor components are also used by ContentView inside the editor. */
.service-card, .map-panel, .metrics article, .case-feature, .project-card, .contact-form { border-radius: var(--radius-card); }
.service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); }
.service-card { padding: var(--space-3); }
.card-index { height: auto; min-height: 44px; gap: 12px; }
.card-index small { max-width: 65%; font-size: var(--font-caption); line-height: 1.5; letter-spacing: .08em; color: #b8bbbf; overflow-wrap: anywhere; }
.card-art { top: 60px; }
.service-card h3 { font-size: clamp(32px,3vw,42px); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.service-card > p { font-size: var(--font-body); line-height: 1.6; overflow-wrap: anywhere; }
.service-list li {
  position: relative; min-height: 56px; padding: 12px; display: grid;
  grid-template-columns: 27px minmax(0,1fr) 16px; gap: 6px 12px;
  font-size: var(--font-small); line-height: 1.5; border-radius: var(--radius-control);
}
.service-list li:hover, .service-list li:focus-within { transform: none; border-color: var(--yellow); }
.service-icon { grid-column: 1; grid-row: 1; width: 27px; }
.service-detail-trigger { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.service-detail-trigger::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-control); }
.service-list li b { display: inline-block; grid-column: 2; grid-row: 2; justify-self: start; margin: 0; font-size: var(--font-caption); line-height: 1.4; padding: 4px 8px; white-space: normal; }
.service-list li > i { grid-column: 3; grid-row: 1; margin: 0; }
.service-list li.ve-add-service { display: flex; }
.ve-add-service button { min-height: var(--control-height); }
.tag { font-size: var(--font-caption); line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.project-tags span { font-size: var(--font-caption); line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.project-card > p { min-height: 0; font-size: var(--font-body); line-height: 1.6; color: #505459; overflow-wrap: anywhere; }
.project-card h3 { overflow-wrap: anywhere; }
.project-meta { gap: 16px; }
.project-meta div { min-width: 0; }
.project-meta dt { color: #5d6064; font-size: var(--font-caption); }
.project-meta dd { margin: 0; font-size: var(--font-small); overflow-wrap: anywhere; }
.button-dark { min-height: var(--control-height); font-size: var(--font-small); padding: 12px 18px; }
.project-detail-trigger { min-height: var(--control-height); font-size: var(--font-small); line-height: 1.5; }
.region-tabs button { min-height: var(--control-height); color: #c4c6c8; font-size: var(--font-small); overflow-wrap: anywhere; }
.region-tabs button.active, .region-tabs button:hover { color: #111; }
.metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.metrics p { font-size: var(--font-small); color: #b8bbbf; }
.case-feature { min-height: 360px; grid-template-columns: minmax(0,42%) minmax(0,58%); }
.case-copy { min-width: 0; padding: clamp(20px,2.5vw,36px); }
.case-copy h3 { font-size: clamp(24px,2vw,28px); line-height: 1.25; overflow-wrap: anywhere; }
.case-copy > p { font-size: var(--font-body); line-height: 1.6; overflow-wrap: anywhere; }
.case-progress { margin-top: 24px; color: #b8bbbf; font-size: var(--font-caption); }
.field label { color: #c4c6c8; font-size: var(--font-caption); letter-spacing: .06em; }
.field input, .field select, .field textarea { font-size: var(--font-body); border-radius: var(--radius-control); }
.field [aria-invalid=true] { border-color: var(--color-error); }
.field-error { margin: 0; color: var(--color-error); font-size: var(--font-small); }
.form-status { min-height: 24px; font-size: var(--font-small); }
.form-status[data-state=error] { color: var(--color-error); }
.form-status[data-state=success] { color: var(--color-success); }
.detail-dialog { inset: 0; margin: auto; transform: none; padding: var(--space-4); border-radius: var(--radius-dialog); }
.detail-dialog h2 { font-size: clamp(24px,3vw,32px); line-height: 1.25; overflow-wrap: anywhere; }
.detail-dialog h3 { font-size: var(--font-body); }
.dialog-close { width: 44px; height: 44px; }
.detail-gallery { margin: 24px 0 0; min-width: 0; }
.detail-gallery figcaption { font-size: var(--font-caption); color: #b8bbbf; }
.gallery-controls { flex-wrap: wrap; }
.gallery-controls button { min-height: var(--control-height); border-radius: var(--radius-control); font-size: var(--font-small); }
.dialog-anchor-close { display: inline-grid; place-items: center; text-decoration: none; }
.detail-dialog:target:not([open]) { display: block; z-index: 100; box-shadow: 0 0 0 100vmax #000b; }

/* Administrative chrome: same type/geometry with a light palette. */
.admin-body { --yellow: var(--brand-primary); --color-focus: #946b00; --color-error: #a52c24; --color-success: #25744d; }
.admin-sidebar { --color-focus: #ffe96f; }
.admin-brand small, .editor-page .admin-brand small, .admin-navigation p, .profile-email, .profile-role,
.admin-eyebrow, .ve-eyebrow, .ve-preview-label, .ve-save-status, .ve-thumbnail, .ve-muted,
.ve-upload-warning, .ve-field-error, .ve-image-picker > p, .ve-inspector-header .ve-eyebrow,
.ve-icon-choice span, .ve-history-sections span, .ve-preview-bar span, .ve-order-controls > span, .ve-tag-chip { font-size: var(--font-caption); }
.admin-navigation a, .editor-page .admin-navigation a, .admin-menu-toggle, .sidebar-bottom a,
.sidebar-bottom button, .admin-button, .response-detail-link, .response-status, .pagination,
.ve-button, .ve-browser-heading h2, .ve-browser-heading input, .ve-field > span,
.ve-image-field h3, .ve-gallery-field h3, .ve-details-group > summary, .ve-map-list label { font-size: var(--font-small); }
.admin-description, .response-details dd, .response-message, .response-review > p,
.ve-field input, .ve-field textarea, .ve-field select, .ve-inspector-empty { font-size: var(--font-body); line-height: 1.6; }
.admin-button, .response-detail-link, .pagination a, .response-back, .ve-button,
.ve-icon-button, .ve-photo-actions button, .ve-tag-chip button, .ve-mobile-back,
.ve-placement-banner button, .ve-toast button, .ve-image-actions .ve-button,
.ve-upload-error .ve-button, .ve-field > .ve-button { min-height: var(--control-height); }
.ve-image-actions .ve-button, .ve-upload-error .ve-button, .ve-field > .ve-button { font-size: var(--font-small); }
.admin-button, .response-detail-link, .response-back, .ve-button, .ve-icon-button,
.ve-field input, .ve-field textarea, .ve-field select { border-radius: var(--radius-control); }
.response-card, .admin-stats article, .ve-preview, .ve-inspector, .ve-history { border-radius: var(--radius-card); }
.ve-icon-button, .ve-photo-actions button, .ve-tag-chip button { min-width: var(--control-height); }
.ve-photo-actions { flex-wrap: wrap; }
.ve-photo-actions button { flex: 1 0 44px; }
.ve-gallery-grid { grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr)); }
.ve-top-actions > .ve-button { font-size: var(--font-small); }
.ve-field input, .ve-field select, .ve-browser-heading input, .response-search input { min-height: var(--control-height); }
.ve-topbar { flex-wrap: wrap; }
.ve-top-actions { max-width: 100%; }
.ve-topbar h1, .ve-history-card, .ve-tag-chip, .ve-notice p { overflow-wrap: anywhere; }
.ve-inspector-actions { position: static; }
.ve-order-controls { flex-wrap: wrap; }
.ve-order-controls > span { flex-basis: 100%; }
.ve-map-list label { min-height: var(--control-height); }
.ve-preview-bar { flex-wrap: wrap; }
.admin-login .admin-shell { margin-inline: auto; }
.response-details dd { margin: 0; }
.admin-body table { font-size: var(--font-small); }
.admin-body th { font-size: var(--font-caption); }
.pagination { flex-wrap: wrap; }
.admin-body .detail-dialog { --color-error: #ff9c92; --color-focus: var(--brand-primary); color-scheme: dark; }
.admin-body .detail-dialog :focus-visible, .ve-canvas :focus-visible { outline-color: var(--brand-primary); }

/* Preview composition adapts to its own available width, not the window. */
.ve-canvas { container: visitor-preview / inline-size; }
.ve-canvas-nuclei { overflow-x: visible; }
.ve-canvas-nuclei .service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ve-canvas .company-track { animation: none; height: 78px; gap: 0; }
.ve-canvas .company-tile { font-size: var(--font-caption); }
.ve-canvas .metrics { margin: 0; }
.content-empty { color: #b8bbbf; font-size: var(--font-body); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); }

@media (max-width: 1200px) {
  .hero { grid-template-columns: 65% 35%; }
  .cases-section { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; border-radius: 24px; padding: 12px 16px; }
  .header-cta { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; min-height: var(--control-height); padding: 8px 12px; font-size: var(--font-caption); }
  .header-cta .header-cta-label { display: none; }.header-cta-short { display: inline; }
  .header-cta > span:last-child { margin-left: 8px; }
  .site-menu-toggle { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 8px 12px; border: 1px solid #55595e; border-radius: var(--radius-control); background: transparent; color: var(--text); font-size: var(--font-small); cursor: pointer; }
  .main-nav { display: flex; grid-column: 1/-1; flex-wrap: wrap; justify-content: flex-start; gap: 8px 24px; }
  .main-nav a { min-height: var(--control-height); }
  .site-header.nav-ready .main-nav { display: none; }
  .site-header.nav-ready.menu-open .main-nav { display: flex; }
  .site-header:not(.nav-ready) { position: absolute; }
  .site-header:not(.nav-ready) ~ main .hero { padding-top: 260px; }
  .hero { min-height: 650px; grid-template-columns: 1fr; padding-top: 160px; }
  .hero h1 { font-size: clamp(36px,6vw,60px); }
  .trust-strip, .service-grid, .map-layout, .contact-section { grid-template-columns: minmax(0,1fr); }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-card { width: 100%; max-width: 560px; }
  .admin-navigation a, .editor-page .admin-navigation a { white-space: normal; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(34px,9vw,48px); }.hero h1 br { display: none; }
  .hero-description { font-size: var(--font-body); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .eyebrow { gap: 10px; letter-spacing: .08em; }.eyebrow span { flex-shrink: 0; width: 24px; }
  .service-card { padding: 20px; }.card-index i { width: 24px; flex-shrink: 0; }
  .case-feature { grid-template-columns: minmax(0,1fr); }.case-image { min-height: 220px; }
  .case-copy { padding: 24px; }
  .contact-form { grid-template-columns: minmax(0,1fr); padding: 20px; }
  .contact-note { margin-top: 24px; }
  .metrics { gap: 12px; }.metrics article { padding: 16px; }
  .map-stage { min-height: 300px; }.region-tabs { padding: 12px; }
  .site-footer { grid-template-columns: minmax(0,1fr); }.footer-social { grid-column: 1; justify-self: start; display: flex; }
  .detail-dialog { padding: 20px; max-height: 90dvh; }
  .preview-banner { position: relative; font-size: var(--font-small); }
  .ve-top-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .ve-top-actions .ve-undo-group { grid-column: 1/-1; }
  .ve-top-actions > .ve-button { padding: 12px; font-size: var(--font-small); }
}
@container visitor-preview (max-width: 900px) {
  .ve-canvas-nuclei .service-grid { grid-template-columns: minmax(0,1fr); }
  .service-card { min-height: 0; }
  .service-card h3 { margin-top: 155px; font-size: 32px; }
  .case-copy h3 { font-size: 24px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container visitor-preview (max-width: 600px) {
  .case-feature { grid-template-columns: minmax(0,1fr); }
  .case-image { min-height: 220px; }
  .case-copy { padding: 24px; }
  .service-card { padding: 20px; }.card-index i { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-revealing { opacity: 1; transform: none; }
  .company-marquee { overflow-x: auto; mask-image: none; }.company-track { animation: none; }
  .company-track > [aria-hidden=true] { display: none; }
}

/* One sidebar footprint across response screens and the content editor. */
@media (min-width: 901px) {
  .admin-body { --admin-sidebar-width: 246px; }
  .admin-body .admin-sidebar {
    width: var(--admin-sidebar-width); height: 100dvh; padding: 18px 16px;
    overflow: hidden; gap: 0;
  }
  .admin-body:not(.admin-login) .admin-shell { margin-left: var(--admin-sidebar-width); }
  .admin-body .admin-brand { flex-shrink: 0; font-size: 19px; padding: 0 8px; gap: 12px; }
  .admin-body .admin-brand img { width: 32px; height: 40px; }
  .admin-body .admin-brand small { font-size: var(--font-caption); letter-spacing: .025em; }
  .admin-body .admin-profile {
    display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center;
    gap: 3px 10px; margin: 14px 8px; padding: 12px 0; flex-shrink: 0;
  }
  .admin-body .admin-avatar { grid-column: 1; grid-row: 1/3; width: 40px; height: 40px; margin: 0; }
  .admin-body .admin-profile strong { grid-column: 2; font-size: var(--font-small); line-height: 1.4; }
  .admin-body .profile-email { grid-column: 2; font-size: var(--font-caption); line-height: 1.4; }
  .admin-body .profile-role { display: none; }
  .admin-body .admin-navigation { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .admin-body .admin-navigation p { margin: 0 12px 8px; font-size: var(--font-caption); letter-spacing: .06em; }
  .admin-body .admin-navigation .navigation-secondary { margin-top: 16px; }
  .admin-body .admin-navigation a { min-height: 44px; padding: 10px 12px; margin: 2px 0; font-size: var(--font-small); line-height: 1.4; }
  .admin-body .sidebar-bottom { flex-shrink: 0; margin-top: 12px; padding-top: 0; }
  .admin-body .sidebar-bottom form { margin-top: 8px; padding-top: 8px; }
  .admin-body .sidebar-bottom > a, .admin-body .sidebar-bottom button { padding: 10px 12px; min-height: 44px; }
  .ve-topbar { padding: 14px 0; margin-bottom: 16px; }
}

/* Compact editing composition; the visitor's map keeps its original size. */
.ve-canvas-toolbar { padding: 12px 16px; }
.ve-canvas-projects { padding: 16px; }
.ve-canvas-projects .ve-map-tools { margin-bottom: 12px; }
.ve-map-overview { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start; }
.ve-canvas-projects .map-panel { margin: 0; }
.ve-canvas-projects .map-stage { height: clamp(260px,38vh,340px); min-height: 260px; }
.ve-canvas-projects .project-card { width: 100%; max-width: none; margin: 0; padding: 16px; }
.ve-canvas-projects .project-image { height: 96px; margin-bottom: 10px; }
.ve-canvas-projects .project-card h3 { font-size: 24px; line-height: 1.2; margin: 10px 0 8px; }
.ve-canvas-projects .project-meta { margin: 12px 0 0; padding: 10px 0; gap: 10px; }
.ve-canvas-projects .project-detail-trigger { margin-top: 8px; }
.ve-canvas-projects .region-tabs { padding: 8px 12px; }
@container visitor-preview (min-width: 680px) {
  .ve-map-overview { grid-template-columns: minmax(0,1fr) 260px; }
  .ve-canvas-projects .project-image { height: 80px; }
  .ve-canvas-projects .project-meta { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .ve-canvas-projects .project-card > p { margin-bottom: 12px; }
}

/* Compact service accordion shared by visitors and the editor. */
.service-list > li.service-row { display:block;padding:0;min-height:0; }
.service-expansion > summary { position:static;display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:12px;min-height:48px;list-style:none;cursor:pointer;font-weight:500; }
.service-expansion > summary::-webkit-details-marker { display:none; }
.service-expansion > summary::after { content:none; }
.service-expansion .service-icon { width:24px; }
.service-name { overflow-wrap:anywhere; }
.service-chevron { display:inline-flex;align-items:center;justify-content:center;justify-self:center;width:16px;height:16px;font-size:20px;line-height:1;transform-origin:50% 50%;transition:transform .15s; }
.service-expansion[open] .service-chevron { transform:rotate(90deg); }
.service-inline-details { padding:0 12px 14px 46px;font-size:13px;line-height:1.6;color:#c9cdd0;overflow-wrap:anywhere; }
.service-inline-details p { margin:0 0 10px;white-space:pre-line; }
.service-inline-details h4 { margin:12px 0 4px;font-size:13px;color:#f5f5f3; }
.service-inline-details > ul { display:block;list-style:disc;margin:0 0 10px;padding-left:18px; }
.service-inline-details > ul > li { display:list-item;min-height:0;padding:0;margin:3px 0;border:0;border-radius:0;background:none;font-size:inherit;transform:none;box-shadow:none; }
.service-case-link,.service-edit { display:block;width:fit-content;margin-top:10px;padding:4px 0;border:0;background:none;color:var(--yellow);font:inherit;text-align:left;text-decoration:underline;cursor:pointer; }
@media(prefers-reduced-motion:reduce){.service-chevron{transition:none;}}

.service-inline-details .service-case-link { margin-left:0;font-size:13px;line-height:1.6; }