/* Pearl Soft UI: shared light surfaces, paired shadows, and quiet frosted controls. */
:root {
  color-scheme: light;
  --bg: #f1f2f5;
  --surface: #f4f5f8;
  --ink: #303542;
  --muted: #626979;
  --line: #d8dce5;
  --blue: #656c88;
  --accent: #656c88;
  --glow-a: #7287a5;
  --glow-b: #9b8ea9;
  --glow-c: #728d88;
  --soft-raised: 10px 10px 24px #bec4d24d, -10px -10px 24px #ffffffd9, inset 0 1px 1px #fff;
  --soft-small: 5px 5px 12px #b8bfce55, -5px -5px 12px #fffffff0, inset 0 1px 1px #fff;
  --soft-inset: inset 4px 4px 9px #bcc2d141, inset -4px -4px 9px #ffffffed;
  --soft-glass: linear-gradient(135deg, #ffffffcc, #edf0f9b3 55%, #f8effbb3);
  --type-caption: 14px;
  --type-small: 15px;
  --type-body: 16px;
  --type-micro: 13px;
  --type-display: clamp(38px, 5.1vw, 72px);
  --type-heading: clamp(30px, 3.7vw, 52px);
  --section-space: clamp(64px, 7vw, 100px);
  --card-space: clamp(24px, 2.2vw, 32px);
}
body, .surface-section, .contact-workspace, .faq-section, .manifesto {
  --ink: #303542;
  --muted: #626979;
  --line: #d8dce5;
  --surface: #f4f5f8;
  --blue: #656c88;
  color: var(--ink);
  color-scheme: light;
}
body, .surface-section, .launch-hero, .highlights, .product-showcase, .workflow-story,
.service-list, .support-system, .values, .legal-profile, .manifesto, .contact-workspace,
.faq-section, .case-grid, .product-intro, .product-stories, .product-story:nth-child(even),
.detail-hero, .detail-content, .product-concept, .closing-cta, .detail-cta, .legal-page {
  background: var(--bg);
}
.highlights, .workflow-story, .manifesto, .product-story:nth-child(even), .product-concept {
  background: #edeff3;
}
.site-header, .chapter-nav, .product-jump {
  background: #f2f3f6da;
  border-color: #d4d9e45e;
  box-shadow: 0 1px #ffffffd9;
  backdrop-filter: blur(24px) saturate(115%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
}
.brand img, .footer-wordmark, .ui-brand-logo { filter: brightness(0); opacity: .76; }
.desktop-nav, .chapter-links, .product-jump a { color: var(--muted); }
.desktop-nav a:hover, .desktop-nav a.active, .chapter-links a:hover,
.chapter-links a[aria-current], .product-jump a:hover, .product-jump a[aria-current] { color: #464b63; }
.desktop-nav .active { box-shadow: inset 0 -2px #a2a3b8; }
.menu-toggle { color: #596071; }
.scroll-progress { background: linear-gradient(90deg, #9caec5, #b1a4be); }
.mobile-menu, .noscript-nav { background: #f1f2f5f5; color: var(--ink); }
.mobile-menu nav a { color: #444a5a; }
.mobile-menu nav a:hover, .mobile-menu nav a:last-child { color: #77708b; }

/* Legible charcoal type; iridescence appears only in a few accents. */
.hero h1 > span, .detail-hero h1 { color: var(--ink); }
.launch-summary .gradient-text, .page-hero h1 > span, .product-intro h1 > span,
.contact-hero h1 > span, .section-head h2 > span, .detail-hero h2,
.editorial-opening .page-hero h1 span {
  color: #757387;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.launch-summary .gradient-text { background: linear-gradient(110deg, #657d94, #82758e 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-kicker, .eyebrow, .page-hero > .eyebrow, .product-intro > .eyebrow,
.launch-eyebrow, .launch-summary .eyebrow, .service-row > div > p,
.faq-section .section-kicker, .manifesto .section-kicker, .contact-workspace .section-kicker,
.closing-cta .section-kicker, .detail-cta .section-kicker, .detail-hero > .eyebrow { color: #60667b; }
.text-link, .text-link > span, .faq-section .text-link, .detail-back,
.simple-document a, .legal-reading-note a, .credits-grid a { color: #5b637e; }
.text-link:hover, .footer-links a:hover, .footer-bottom a:hover { color: #45405d; }
.launch-note, .launch-hero .hero-disciplines, .closing-copy, .story-chapter > p:not(.section-kicker),
.story-chapter > small, .manifesto-grid p, .faq-item > p, .case-meta, .work-disclosure,
.product-story-copy > p:not(.product-number), .detail-hero > p:not(.eyebrow), .detail-showcase-foot { color: var(--muted); }
.launch-hero .hero-disciplines, .service-row, .case-explanation, .legal-profile dl > div { border-color: var(--line); }
.launch-word {
  color: #e4e7ed;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 3px 3px 4px #c1c7d4, -4px -4px 5px #fff;
  filter: none;
}
.launch-stage .device-halo { background: radial-gradient(ellipse at 25% 55%, #cadfec66, transparent 60%), radial-gradient(ellipse at 75% 60%, #eadcf366, transparent 60%); }
.launch-note .tiny-dot { background: #8b9aac; box-shadow: 0 0 0 4px #e1e5ee; }
.contact-hello { color: #e7e8ef; text-shadow: 4px 4px 7px #d1d4df, -4px -4px 7px #fff; }

/* Raised actions and frosted circular arrows; pressed states settle into the surface. */
.button-blue, .button-light, .button-dark, .contact-workspace .button-dark, .header-cta,
.form-secondary, .concept-replay, .motion-toggle, .rail-controls button {
  color: #4e526b;
  background: var(--soft-glass);
  border: 1px solid #ffffffed;
  box-shadow: var(--soft-small);
}
.button-blue:hover, .button-light:hover, .button-dark:hover, .contact-workspace .button-dark:hover,
.header-cta:hover, .form-secondary:hover, .concept-replay:not(:disabled):hover,
.rail-controls button:not(:disabled):hover { color: #3f425a; background: linear-gradient(135deg, #fff, #eeedf7); border-color: #fff; box-shadow: 7px 7px 17px #b8bfce66, -6px -6px 17px #fff; }
.button:active, .header-cta:active, .concept-replay:active, .rail-controls button:active { box-shadow: var(--soft-inset); transform: translateY(1px); }
.round-arrow, .interface-card > .round-arrow, .photo-card .round-arrow, .energy-card .round-arrow,
.editorial-card:hover .round-arrow {
  width: 52px;
  height: 52px;
  color: #6c6681;
  border: 1px solid #ffffffc9;
  background: linear-gradient(130deg, #ffffffdd, #e7edf7c9 45%, #faeefbcc);
  box-shadow: 7px 9px 18px #6d71882e, -4px -4px 14px #ffffff80, inset 1px 1px 3px #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.skip-link { background: #eef0f6; color: #303542; box-shadow: var(--soft-small); }
:focus-visible { outline: 2px solid #756c93; outline-offset: 5px; }
::selection { background: #d9d4e8; color: #303542; }
.concept-replay:disabled { color: #686e7d; border-color: #d5d9e3; box-shadow: none; }

/* Continuous pearl surfaces, with inset rails and softly raised cards. */
.showcase-tabs { background: #e9ecf2; border: 1px solid #ffffff70; box-shadow: var(--soft-inset); padding: 7px; }
.showcase-tabs button { color: #626a7d; font-weight: 500; }
.showcase-tabs button:hover { color: #444b62; background: #f8f8fc66; }
.showcase-tabs button[aria-selected="true"], .showcase-tabs button[aria-selected="true"]:hover { color: #4f506d; background: var(--soft-glass); box-shadow: 4px 4px 9px #bcc3d266, -3px -3px 9px #fff, inset 0 1px #fff; }
.showcase-tabs button .fw-icon { color: #84829c; }
.showcase-tabs button[aria-selected="true"] .fw-icon { color: #68627e; }
.suite-symbols a, .suite-symbols a:hover { background: var(--soft-glass); border-color: #fff; box-shadow: var(--soft-raised); }
.suite-symbols a:nth-child(n) .fw-icon { color: #89859e; filter: drop-shadow(1px 1px 1px #c6c7d5) drop-shadow(-1px -1px 1px #fff); }
.suite-symbols a span { color: #5d6475; }
.showcase-panel .showcase-ui, .detail-showcase, .story-screen-inner, .product-story .product-visual { background: #eef0f5; border-color: #fff; box-shadow: var(--soft-raised); }
.product-art, .detail-artwork .product-art { box-shadow: 10px 14px 30px #929cac26, -8px -8px 24px #fff; }
.showcase-artwork .product-art, .product-story .product-art, .interface-card .product-art { box-shadow: none; }
.art-caption { color: #5b6375; background: #edeff4; border-color: #fff; }
.art-caption span:last-child { color: #626b7d; }
.product-interface { border-color: #dce0e9; }
.product-interface summary { color: #626a82; }
.product-flow-labels { color: #656c80; }
.editorial-card { background: #f1f2f6; box-shadow: var(--soft-raised); }
.interface-card { background: #f1f2f6; color: var(--ink); border: 1px solid #fff; }
.interface-card .search-question { background: #f2f3f7; color: #515b6b; border: 1px solid #fff; box-shadow: var(--soft-inset); }
.interface-card .search-question > span { color: #7c7d98; }
.photo-card { color: #fff; }
.photo-card > div { background: linear-gradient(180deg, #151d2b99, transparent 65%, #18223235); }
.photo-card .round-arrow { box-shadow: 6px 7px 20px #121a3433, inset 1px 1px 3px #fff; }
.case-art, .case-study:first-child .case-art { background: radial-gradient(ellipse at 30% 10%, #fff9, transparent 60%), #e2e6ef; border: 1px solid #fff; box-shadow: var(--soft-raised); }
.case-art-word { color: #d6dbe5; text-shadow: 2px 2px 3px #b9c2d3, -3px -3px 4px #fff; }
.case-outcome-visual { background: #eef0f5; border: 1px solid #fff; box-shadow: var(--soft-inset); }
.case-explanation summary { color: #5e6780; }
.case-explanation dt { color: var(--ink); }
.case-explanation dd { color: var(--muted); }
.story-progress span { background: #d6dbe5; }
.story-progress .active { background: #989bb3; }

/* The editorial photography softly recedes behind the light page. */
.editorial-opening { background: #eef0f4; }
.editorial-opening .wide-editorial img { opacity: .45; }
.editorial-opening .wide-editorial::after,
.about-opening .wide-editorial::after { background: linear-gradient(90deg, #f1f2f5f5, #f1f2f5e6 36%, #f1f2f54d 85%), linear-gradient(0deg, #f1f2f5, transparent 65%); }
.editorial-opening .page-lead { color: #586272; }
.editorial-opening .wide-editorial figcaption, .opening-index { color: #606879; border-color: #cbd1df; }
.editorial-opening .wide-editorial figcaption a { text-decoration: underline; }
.manifesto blockquote { color: #555b70; }
.faq-item { border-color: #d4d9e3; }
.faq-item summary { color: #414858; }
.faq-item[open] summary, .faq-item summary:hover { color: #736885; }
.faq-item summary > span { color: #827b96; }

/* Product accents remain distinct, but share the same muted material palette. */
.product-intelligence, [data-active-product="intelligence"], .tone-blue { --tone: #637f9b; --glow-a: #768da9; --glow-b: #a69bb7; --glow-c: #6f8e8b; }
.product-forms, [data-active-product="forms"], .tone-cyan { --tone: #5e827b; --glow-a: #7a9b94; --glow-b: #8aa0b9; --glow-c: #79907c; }
.product-signature, [data-active-product="signature"], .tone-violet { --tone: #847293; --glow-a: #9a89ae; --glow-b: #b699aa; --glow-c: #8498b2; }
.product-erp, [data-active-product="erp"], .tone-orange { --tone: #93795f; --glow-a: #b39b84; --glow-b: #b698a7; --glow-c: #958daa; }
.product-solar, [data-active-product="solar"], .tone-green { --tone: #728363; --glow-a: #8a9d7d; --glow-b: #87a39e; --glow-c: #b6a680; }
.product-zircle, [data-active-product="zircle"], .tone-pink { --tone: #936f85; --glow-a: #af8fa7; --glow-b: #a294b6; --glow-c: #819fb2; }
.product-number, .product-story-copy > h3 { color: var(--tone); }
.product-number { color: color-mix(in srgb, var(--tone) 75%, #263244); }

/* Light, code-native interface previews: no bitmap filters or altered proportions. */
.product-ui { --ui-text: #3e4655; --ui-accent: #718aa8; --ui-soft: #e5eaf2; color: var(--ui-text); background: #f5f6f8; border-color: #fff; box-shadow: 7px 9px 22px #acb5c838, -5px -5px 18px #ffffffc9; }
.ui-forms { --ui-accent: #688e83; --ui-soft: #e6eeeb; }
.ui-signature { --ui-accent: #9382a6; --ui-soft: #ebe7f0; }
.ui-erp { --ui-accent: #91a3ba; --ui-soft: #e5eaf2; }
.ui-solar { --ui-accent: #859d79; --ui-soft: #e7ece3; }
.ui-zircle { --ui-accent: #a3859a; --ui-soft: #efe7ed; }
.ui-chrome { background: linear-gradient(135deg, #f9fafc, #e8ecf3); border-color: #d8dfe9; box-shadow: inset 0 1px #fff; }
.ui-avatar { background: var(--ui-soft); border-color: #fff; color: #56647a; box-shadow: var(--soft-small); }
.ui-concept, .ui-breadcrumb, .ui-breadcrumb span, .ui-bottom, .product-ui figcaption,
.ui-metrics small, .ui-metrics span, .ui-metrics strong em, .operations-chart small,
.chart-labels, .energy-metrics small, .energy-metrics em { color: #626d7e; }
.ui-heading h3, .ui-metrics strong, .operations-chart strong { color: #3e485a; }
.status-dot { color: #526f60; }
.product-ui figcaption { background: #edf0f5; border-color: #dfe3eb; }
.ui-metrics > div, .ai-question, .ui-field, .community-cards article, .ui-source-grid > div { background: #f3f5f8; border-color: #fff; box-shadow: var(--soft-inset); }
.ui-metrics > div::after { opacity: .12; }
.operations-chart { background: #edf0f5; border-color: #fff; box-shadow: var(--soft-inset); }
.chart-bars { background: repeating-linear-gradient(to top, transparent 0 33px, #dce1eb 33px 34px); }
.chart-bars i { background: linear-gradient(90deg, #a2b0c8, #c4cddd 45%, #acbbd2); box-shadow: inset 1px 1px #eef6ff, 4px 4px 8px #8998b229; }
.chart-bars i:nth-child(3n+2) { background: linear-gradient(90deg, #b0a8c2, #d0c8dc 45%, #beb3ce); }
.chart-bars i:nth-child(3n) { background: linear-gradient(90deg, #a0b9b5, #c7d8d4 45%, #afc6c1); }
.chart-grid { background: repeating-linear-gradient(to top, transparent 0 34px, #dce3dc 34px 35px); }
.ai-answer { background: linear-gradient(135deg, #e8edf5, #efecf5); border-color: #fff; box-shadow: 5px 5px 15px #bdc4d338, -5px -5px 15px #fff; }
.ai-answer small, .ai-answer p, .ui-field small, .form-preview aside small, .signature-preview aside p, .community-cards small { color: #647085; }
.form-preview aside small { color: #59677b; }
.ai-mark, .ui-record-mark { background: var(--soft-glass); border-color: #fff; box-shadow: var(--soft-small); color: #70819e; }
.ai-answer .source-chips span { background: #f3f5f9; border-color: #d2d9e5; color: #617088; }
.form-preview aside { background: var(--ui-soft); border: 1px solid #fff; box-shadow: var(--soft-inset); }
.ui-pill, .ui-record-state { color: color-mix(in srgb, var(--ui-accent) 52%, #182533); background: var(--ui-soft); }
.ui-checks { color: #567768; }
.progress-ring { box-shadow: 5px 5px 12px #bbc8c655, -5px -5px 12px #fff; }
.verified-seal { background: #eae7f1; color: #756282; border-color: #fff; box-shadow: var(--soft-inset); }
.paper { box-shadow: 2px 2px #d9dbe0, 4px 4px #eceef1, 9px 12px 20px #7e8ca32b; }
.community-cover { color: #695d76; background: radial-gradient(ellipse at 90% 10%, #f9f4fd, transparent 70%), linear-gradient(130deg, #dce5ef, #e8deeb); box-shadow: inset 0 1px #fff; }
.circle-art i, .circle-art i:nth-child(2), .circle-art i:nth-child(3) { border-color: #fff9; background: linear-gradient(130deg, #fff9, #d9d5e533); box-shadow: inset 1px 1px 3px #fff, 8px 8px 18px #9d96ad26; }
.community-initial { box-shadow: var(--soft-small); border-color: #fff; }
.community-cards article .community-initial { color: #7c526c; }
.community-cards article:nth-child(2) .community-initial { color: #506e4e; }
.community-cards article > span:last-child { color: #81728a; }
.sun-graphic { background: #eef0e8; border-color: #fff; color: #a48b54; box-shadow: var(--soft-small); }
.ui-records, .ui-record-row { border-color: #dde2eb; }
.ui-source-grid strong, .ui-record-row strong { color: #4c586b; }
.ui-source-grid small, .ui-record-row small, .ui-records-heading, .ui-source-grid b { color: #606d81; }
.preview-caption-dot { background: #8796ac; }
.launch-computer .desktop-device { background: linear-gradient(130deg, #fff, #b7c1d0 14%, #d9dfe8 60%, #f8faff); border-color: #cbd3e0; box-shadow: 12px 22px 35px #98a3b940, -10px -10px 28px #fff, inset 0 1px #fff; }
.desktop-device .product-ui { border-color: #d1d8e2; }
.laptop-base { background: linear-gradient(#f9fcff, #d3dae5 20%, #b4becd 60%, #96a2b5); box-shadow: 0 12px 18px #7f8ba330, inset 0 1px #fff; }
.laptop-base::before { background: linear-gradient(#bbc5d4, #e7edf5); }
.case-art > .product-ui, .product-visual .product-ui, .detail-showcase .product-ui { box-shadow: 10px 14px 28px #94a1b52b, -6px -6px 18px #fff; }

/* Soft sculpted SVGs and workflow cards. */
.engagement-options > .info-card, .value-grid > .info-card, .next-steps > .info-card,
.feature-list > .info-card, .use-case-grid > .info-card {
  --info-tone: #8191a8;
  background: linear-gradient(140deg, #f6f7fa, #eceef4);
  border: 1px solid #fff;
  border-radius: 26px;
  box-shadow: var(--soft-raised);
}
.engagement-options > .info-card:nth-child(2), .value-grid > .info-card:nth-child(2), .next-steps > .info-card:nth-child(2) { --info-tone: #9b8aa8; }
.engagement-options > .info-card:nth-child(3), .value-grid > .info-card:nth-child(3), .next-steps > .info-card:nth-child(3) { --info-tone: #829b91; }
.product-detail .info-card { --info-tone: var(--glow-a); }
.info-card > small, .info-card > b, .engagement-options > .info-card > small, .use-case-grid .info-card > small { color: #626a7e; }
.info-card > p, .info-card .deliverable-list li { color: var(--muted); }
.info-card .deliverable-list li { border-color: #dce0e8; }
.workflow-visual.illustrated-flow, .service-row .workflow-visual, .system-map { --info-tone: #8995ab; background: #eef0f5; border-color: #fff; box-shadow: var(--soft-raised); }
.flow-heading, .flow-heading small, .illustrated-step-label small, .workflow-visual.illustrated-flow figcaption { color: #616a7b; border-color: #dce1e9; }
.flow-indicator { box-shadow: none; }
.info-diagram { --diagram-tone: var(--info-tone, #8e93ad); }
.info-diagram linearGradient[id$="-panel"] stop { stop-color: #edf0f7; stop-opacity: 1; }
.info-diagram linearGradient[id$="-panel"] stop:first-child { stop-color: #fff; }
.info-diagram linearGradient[id$="-panel"] stop:last-child { stop-color: #d9deea; }
.info-diagram linearGradient[id$="-chip"] stop { stop-color: #e5e2ee; stop-opacity: 1; }
.info-diagram linearGradient[id$="-chip"] stop:first-child { stop-color: #fff; }
.info-diagram linearGradient[id$="-chip"] stop:last-child { stop-color: #d3d4e3; }
.info-diagram linearGradient[id$="-edge"] stop { stop-color: #fff; stop-opacity: .95; }
.info-diagram linearGradient[id$="-edge"] stop:last-child { stop-color: #b6bed0; stop-opacity: .65; }
.info-diagram feDropShadow { flood-color: #8d97ae; flood-opacity: .28; }
.diagram-backing { fill: #dae0eb; stroke: #c4cddd; }
.diagram-screen { fill: #e1e6ef; stroke: #fff; }
.diagram-edge { stroke: #fff; stroke-opacity: 1; }
.diagram-fold { fill: #c7cfde; stroke: #fff; }
.diagram-micro, .diagram-muted { stroke: #939eb1; stroke-opacity: .8; }
.diagram-guide { stroke: #aab4c429; }
.diagram-dot { filter: none; }
.system-map-core, .system-map-sources > span, .system-map-outcomes > span { color: #5b6479; background: var(--soft-glass); border-color: #fff; box-shadow: var(--soft-small); }
.system-map-core > .fw-icon, .system-map-sources .fw-icon { color: #858da8; }
.system-map-core small, .system-map figcaption { color: #5f6b80; }
.system-map-lines { stroke: #b5bed1; }
.concept-diagram { background: #eef0f5; border-color: #fff; box-shadow: var(--soft-raised); }
.concept-light { opacity: .15; }
.concept-flow .concept-node, .concept-flow .concept-engine { background: #f2f3f7; border-color: #fff; box-shadow: var(--soft-small); }
.concept-label, .concept-records li, .concept-steps li, .concept-example > p, .concept-toolbar > p { color: #626d82; }
.concept-label > span, .concept-node.is-complete .concept-label > span { background: #e8eaf2; border-color: #fff; color: #635f79; box-shadow: var(--soft-inset); }
.concept-example .section-kicker, .concept-steps li::before, .concept-records .fw-icon { color: #69627f; }
.concept-wire, .concept-link.is-complete .concept-wire { stroke: #bac2d2; }
.concept-arrow { stroke: #929cb3; }
.motion-ready .concept-node.is-active { border-color: #b2a8c4; box-shadow: var(--soft-inset); }
.motion-ready .concept-node.is-active .concept-label > span { color: #655476; background: #e1ddec; border-color: #c4bbd3; box-shadow: inset 2px 2px 4px #c7bdd94d, inset -2px -2px 4px #fff; }

/* Enquiry fields are recessed, and legal/supporting pages use the same surfaces. */
.contact-workspace .project-form { background: #f1f2f6; border: 1px solid #fff; box-shadow: var(--soft-raised); }
.contact-workspace .form-grid input, .contact-workspace .form-grid select,
.contact-workspace .form-grid textarea, .contact-workspace .copy-fallback textarea {
  color: #454e61;
  background: #edf0f5;
  border-color: #c2cad8;
  box-shadow: var(--soft-inset);
}
.contact-workspace .form-grid input::placeholder, .contact-workspace .form-grid textarea::placeholder { color: #606c80; }
.contact-workspace .form-grid input:focus, .contact-workspace .form-grid select:focus, .contact-workspace .form-grid textarea:focus { border-color: #8d80a7; outline-color: #8d80a7; box-shadow: var(--soft-inset), 0 0 0 3px #b6a8cf26; }
.contact-workspace .form-grid label > span { color: #4e586c; }
.contact-workspace .brief-note, .contact-workspace .form-action p, .contact-workspace .form-status,
.contact-workspace .contact-aside p, .contact-workspace .contact-aside address { color: #5c667a; }
.contact-workspace .contact-aside a, .contact-workspace .form-secondary { color: #676581; }
.contact-workspace .contact-aside > div { border-color: #d6dce6; }
.contact-workspace .form-grid option { color: #454e61; background: #f1f2f5; }
.contact-workspace input:autofill { -webkit-text-fill-color: #454e61; box-shadow: 0 0 0 1000px #edf0f5 inset; }
.legal-page, .legal-nav, .legal-page .legal-document, .legal-original .legal-document { color: #495265; background: #f1f2f5; }
.legal-outline > section, .legal-reading-note, .legal-original > summary, .credits-grid > figure { background: #f1f2f6; color: var(--ink); border-color: #fff; box-shadow: var(--soft-small); }
.legal-intro > p, .legal-outline p, .legal-note, .photo-caption, .credits-grid p, .simple-document p,
.simple-document li, .legal-reading-note p, .legal-reading-note .legal-source-date,
.legal-document .legal-subtitle { color: var(--muted); }
.legal-original .legal-document strong { color: #394154; }
.legal-related { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; max-width: 960px; margin: 32px auto 44px; padding: 24px 28px; border: 1px solid #fff; border-radius: 20px; background: #eef0f5; }
.legal-related > span { font-size: 14px; font-weight: 500; color: var(--muted); }
.legal-related > div { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-related a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #5b637e; font-size: 16px; }
.legal-related a > span { font-size: 19px; }
.legal-related a:hover { color: var(--ink); }
.site-footer { background: #e9ecf2; color: #596579; border-color: #fff; }
.footer-bottom { border-color: #d2d9e4; }
.footer-main p, .footer-links > span, .footer-bottom { color: #596579; }

/* The established type scale is independent of the color direction. */
.desktop-nav, .header-cta, .chapter-links, .product-jump { font-size: var(--type-caption); }
.section-kicker, .eyebrow { font-size: var(--type-small); }
.launch-eyebrow, .launch-summary .eyebrow, .launch-note, .launch-hero .hero-disciplines,
.editorial-card small, .opening-index, .product-number, .work-opening .work-disclosure,
.case-meta, .service-row > b, .detail-back { font-size: var(--type-caption); }
.button, .text-link, .form-secondary { font-size: var(--type-body); }
.showcase-tabs button, .suite-symbols a span { font-size: var(--type-caption); }
.showcase-tabs button { padding-inline: 16px; }
.suite-symbols a { height: auto; min-height: 120px; }
.product-interface summary, .interface-card .search-question { font-size: var(--type-small); }
.art-caption, .detail-showcase-foot, .editorial-opening .wide-editorial figcaption { font-size: var(--type-caption); }
.info-card > small, .info-card > b, .use-case-grid .info-card > small, .info-card .deliverable-list li,
.workflow-visual .flow-heading, .flow-heading small, .workflow-visual.illustrated-flow figcaption,
.illustrated-step-label small, .case-outcome-visual .case-outcomes span, .product-flow-labels.illustrated-product-flow span { font-size: var(--type-caption); }
.info-card > p, .feature-list .info-card > p { font-size: var(--type-body); }
.ui-source-grid strong, .ui-record-row strong { font-size: var(--type-caption); }
.ui-source-grid small, .ui-record-row small, .ui-records-heading, .ui-record-state, .ui-source-grid b,
.ui-concept, .product-ui figcaption { font-size: var(--type-micro); }
.contact-workspace .form-grid input, .contact-workspace .form-grid select,
.contact-workspace .form-grid textarea, .contact-workspace .copy-fallback textarea { font-size: var(--type-body); }
.contact-workspace .form-grid label > span { font-size: var(--type-small); }
.contact-workspace .brief-note, .contact-workspace .form-action p, .contact-workspace .form-status,
.contact-workspace .contact-aside p, .footer-bottom, .footer-links > span, .motion-toggle { font-size: var(--type-caption); }
.footer-links a { font-size: var(--type-small); }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .info-card:hover, .motion-ready :is(.engagement-options, .feature-list) > .info-card:hover,
  .motion-ready .suite-symbols a:hover { transform: translateY(-3px); box-shadow: 12px 14px 28px #adb6c64d, -10px -10px 26px #fff; }
}
@media (max-width: 780px) {
  .launch-summary .button, .launch-summary .text-link { font-size: var(--type-body); }
  .art-caption { flex-wrap: wrap; gap: 5px 12px; }
  .suite-symbols a { min-height: 116px; }
  .editorial-opening .wide-editorial::after, .about-opening .wide-editorial::after { background: linear-gradient(90deg, #f1f2f5e6, #f1f2f599), linear-gradient(0deg, #f1f2f5, transparent); }
}
@media (max-width: 480px) {
  .site-header { gap: 10px; }
  .brand img { width: 88px; }
  .header-cta { padding-inline: 12px; }
  .chapter-links { gap: 18px; }
  .detail-showcase-foot { flex-wrap: wrap; }
  .launch-note { max-width: 290px; margin-inline: auto; line-height: 1.5; }
}
@media (forced-colors: active) {
  .launch-word, .launch-summary .gradient-text { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; text-shadow: none; }
  .button, .header-cta, .round-arrow, .showcase-tabs button, .suite-symbols a { border: 1px solid ButtonText; box-shadow: none; }
}

/* A single scale for editorial copy, and consistent breathing room across pages. */
body { font-size: var(--type-body); line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 600; hyphens: manual; letter-spacing: -.035em; }
h1, .launch-summary h1, .editorial-opening .page-hero h1, .product-intro h1,
.work-opening h1, .contact-hero h1 { font-size: var(--type-display); line-height: 1.1; letter-spacing: -.045em; }
h2, .section-head h2, .highlights .section-head h2, .detail-heading h2,
.closing-cta h2, .detail-cta h2 { font-size: var(--type-heading); line-height: 1.13; }
.detail-hero h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; }
.detail-hero h2 { font-size: clamp(34px, 4.5vw, 64px); line-height: 1.13; max-width: 960px; }
.manifesto blockquote { font-size: clamp(34px, 4.8vw, 68px); line-height: 1.15; letter-spacing: -.04em; }
.service-row h2, .product-story h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; }
.product-story-copy > h3, .info-card > h3, .feature-list .info-card > h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.25; letter-spacing: -.025em; }
.story-chapter h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; }
.case-study h2, .case-study:first-child h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.contact-workspace .form-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.section-kicker, .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .025em; margin-bottom: 20px; }
.section-head > p, .page-lead, .editorial-opening .page-lead, .product-intro .page-lead,
.work-opening .page-lead, .contact-intro, .detail-hero > p:not(.eyebrow),
.manifesto-grid p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.info-card > p, .product-story-copy > p:not(.product-number) { line-height: 1.65; }
.section-pad, .service-list, .support-system, .manifesto, .values, .legal-profile,
.contact-workspace, .detail-content, .use-cases, .closing-cta, .detail-cta,
.product-concept { padding-block: var(--section-space); }
.section-head { margin-bottom: clamp(32px, 3.5vw, 48px); gap: 32px; }
.section-head > div { min-width: 0; }
.section-head > p { flex: 0 1 320px; }
.page-hero, .product-intro, .work-opening, .contact-hero.contact-v2 { padding-block: var(--section-space); }
.editorial-opening { min-height: 620px; }
.editorial-opening .page-hero { padding-top: var(--section-space); padding-bottom: 110px; }
.service-row { padding-block: clamp(36px, 4vw, 56px); }
.product-story { padding-block: var(--section-space); gap: clamp(32px, 4vw, 64px); }
.engagement-options > .info-card, .value-grid > .info-card, .next-steps > .info-card,
.feature-list > .info-card, .use-case-grid > .info-card { padding: var(--card-space); }
.info-card > .info-diagram { max-width: 210px; margin: 24px auto; }
.launch-summary { gap: 40px; margin-top: 40px; padding-bottom: 40px; }
.launch-summary .hero-copy { font-size: 17px; line-height: 1.65; }
.suite-symbols { margin-top: 40px; }
.story-layout { gap: clamp(32px, 5vw, 72px); }
.story-chapter { min-height: 320px; padding-block: 48px; }
.faq-item summary { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; }
/* Reserve room for the expanded (+ to ×) icon instead of overflowing its row. */
.faq-item summary, .case-explanation summary, .product-interface summary { padding-right: 8px; }
.case-explanation summary, .product-interface summary { align-items: center; gap: 16px; }
.case-explanation summary > span, .product-interface summary > span,
.showcase-interface summary > span, .legal-original > summary > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; line-height: 1; }

/* Full-frame editorial scenes. Photography is cropped deliberately, never floated. */
.scene-picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.scene-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position, 50% 50%); }
.scene-signature { --scene-position: 63% 52%; }
.scene-zircle { --scene-position: 55% 48%; }
.scene-solar { --scene-position: 50% 65%; }
.launch-hero { padding-inline: 0; }
.launch-eyebrow { padding-inline: var(--gutter); }
.launch-cinema { width: calc(100% - 48px); max-width: 1600px; aspect-ratio: 16 / 8; margin: 28px auto 0; overflow: hidden; border-radius: 28px; background: #d8e0e8; }
.launch-summary, .launch-hero .hero-disciplines { width: calc(100% - 2 * var(--gutter)); }
.motion-ready .launch-cinema.reveal { opacity: 1; transform: none; }
.product-art, .detail-artwork .product-art { background: #e4e8ef; perspective: none; box-shadow: none; }
.product-art picture, .product-story .product-art picture, .showcase-artwork .product-art picture,
.detail-artwork .product-art picture { aspect-ratio: 16 / 9; max-height: none; height: auto; transform: none; }
.product-art img { object-fit: cover; }
.detail-artwork { max-width: 1200px; margin-top: 48px; }
.detail-showcase { margin-top: 32px; }

/* All stories stay in view: a fixed grid, with motion contained inside each card. */
.highlight-grid { max-width: var(--width); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; scroll-snap-type: none; margin: auto; padding: 0; scroll-padding: 0; }
.highlight-grid .editorial-card { width: 100%; max-width: 100%; height: clamp(440px, 38vw, 520px); min-height: 0; min-width: 0; scroll-snap-align: none; border-radius: 28px; }
.motion-ready .highlight-grid .editorial-card.reveal { transform: none; transition: opacity 850ms var(--ease-soft); transition-delay: var(--reveal-delay, 0ms); }
.highlight-grid .editorial-card .scene-picture { position: absolute; inset: 0; border-radius: inherit; }
.highlight-grid .editorial-card img { object-position: var(--scene-position, 50% 50%); }
.highlight-grid .editorial-card h3 { max-width: 640px; font-size: clamp(25px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.highlight-grid .editorial-card small { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.highlight-grid .photo-card > div { padding: var(--card-space); }
.photo-card > div { padding: clamp(28px, 3.3vw, 48px); background: linear-gradient(180deg, #152131bd, #1521311a 65%, #15213130); }
.photo-card .round-arrow { margin-top: auto; }
.knowledge-card .scene-picture { --scene-position: 53% 55%; }
.photo-card:hover img { transform: scale(1.025); }

/* Product media spans the content width; detailed previews are an optional next step. */
.showcase-panels { max-width: 1200px; }
.showcase-panel:not([hidden]) { display: block; }
.showcase-artwork { display: block; width: 100%; }
.showcase-artwork .product-art { display: block; border-radius: 28px; }
.showcase-interface { text-align: left; margin-top: 24px; border: 1px solid #fff; border-radius: 20px; background: #eef0f5; }
.showcase-interface summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; list-style: none; cursor: pointer; color: #5e6780; font-size: 16px; }
.showcase-interface summary::-webkit-details-marker { display: none; }
.showcase-interface summary > span { font-size: 24px; flex: none; transition: transform 350ms var(--ease); }
.showcase-interface[open] summary > span { transform: rotate(45deg); }
.showcase-panel .showcase-ui { max-width: 960px; padding: 8px 28px 32px; margin: auto; border: 0; border-radius: 0; background: none; box-shadow: none; }
.showcase-panel > .text-link { margin-top: 28px; }
.showcase-tabs { margin-bottom: 32px; }
.product-story { display: block; }
.product-story-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; margin-bottom: 40px; }
.product-story-copy .product-number { grid-column: 1 / -1; margin: 0; }
.product-story-copy h2 { grid-column: 1; grid-row: 2 / 5; max-width: 550px; margin: 0; }
.product-story-copy > h3, .product-story-copy > p:not(.product-number), .product-story-copy .button { grid-column: 2; margin: 0; }
.product-story-copy .button { justify-self: start; margin-top: 8px; }
.product-story .product-visual { width: 100%; max-width: 1200px; margin: auto; }
.product-story .illustrated-product-flow { max-width: 960px; margin: auto; padding: 20px 32px 28px; }
.product-story .product-interface { padding: 0 32px; }
.product-interface .product-ui { max-width: 960px; margin-inline: auto; }

/* Editorial pages give the photograph its own full-width frame. */
.editorial-opening { min-height: 0; overflow: visible; }
.editorial-opening .page-hero { padding-top: var(--section-space); padding-bottom: 48px; }
.editorial-opening .wide-editorial { position: relative; inset: auto; z-index: 0; width: calc(100% - 48px); max-width: 1600px; margin: 0 auto 32px; border-radius: 28px; overflow: hidden; }
.editorial-opening .wide-editorial::after { display: none; }
.editorial-opening .wide-editorial .scene-picture { aspect-ratio: 16 / 8; height: auto; }
.editorial-opening .wide-editorial img { opacity: 1; aspect-ratio: auto; object-position: var(--scene-position, 50% 50%); transform: none; }
.editorial-opening .wide-editorial figcaption { position: static; max-width: none; padding: 18px 24px; background: var(--bg); color: var(--muted); line-height: 1.6; }
.opening-index { margin-top: 0; }
.case-art, .case-study:first-child .case-art { position: relative; display: block; height: auto; min-height: 0; aspect-ratio: auto; padding: 0; align-self: start; }
/* Keep media in normal flow so subgrid rows retain an intrinsic image height. */
.case-art .scene-picture { position: relative; height: auto; aspect-ratio: 16 / 10; }
.case-study:first-child .case-art .scene-picture { aspect-ratio: 16 / 9; }
.case-art .scene-picture img { width: 100%; height: 100%; object-fit: cover; }
.contact-image .scene-picture { aspect-ratio: 4 / 3; }

/* A real MP4 with an equally composed portrait edition and accessible controls. */
.workflow-film { max-width: 1200px; margin: 0 auto; }
.film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #edf1f7; border: 1px solid #fff; }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-toggle { flex: none; min-height: 44px; padding: 9px 18px; border: 1px solid #fff; border-radius: 24px; background: #f6f8fce6; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #4c5970; font-size: 14px; box-shadow: 0 4px 18px #66758c18; }
.film-toggle[hidden] { display: none; }
.film-toggle:disabled { cursor: default; opacity: .7; }
.workflow-film figcaption { display: flex; align-items: center; gap: 16px; padding: 18px 4px; color: var(--muted); font-size: 14px; }
.workflow-film figcaption > span:first-child { color: var(--ink); font-weight: 500; }
.workflow-film figcaption > span:nth-child(2) { margin-left: auto; }
.film-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; margin: 36px auto 0; gap: 40px; }
.film-chapters .story-chapter { min-height: 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.film-chapters .story-chapter h3 { font-size: clamp(24px, 2vw, 28px); }

@media (max-width: 1099px) {
  .highlight-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .highlight-grid .editorial-card { height: auto; aspect-ratio: 16 / 9; min-height: 340px; }
  .highlight-grid .editorial-card h3 { font-size: clamp(28px, 3.8vw, 36px); }
}
@media (max-width: 780px) {
  :root { --gutter: clamp(20px, 5vw, 36px); --card-space: 24px; }
  .section-head > p { flex: 0 1 auto; max-width: 530px; }
  .launch-summary { gap: 24px; margin-top: 32px; padding-bottom: 32px; }
  .launch-summary .hero-copy { font-size: 16px; }
  .launch-cinema { width: calc(100% - 32px); aspect-ratio: 4 / 3; border-radius: 22px; }
  .highlight-grid { gap: 24px; }
  .highlight-grid .editorial-card h3 { font-size: 28px; }
  .photo-card > div { padding: 28px; }
  .showcase-tabs { margin-bottom: 24px; gap: 6px; }
  .showcase-tabs button { flex: 0 0 auto; min-width: 112px; padding: 12px 16px; }
  .showcase-panel .showcase-ui { padding: 0 16px 20px; }
  .showcase-interface summary { padding: 18px 20px; }
  .showcase-artwork .product-art { border-radius: 22px; }
  .detail-artwork, .detail-hero .detail-showcase { margin-top: 32px; }
  .product-story-copy { display: block; margin-bottom: 28px; }
  .product-story-copy .product-number { margin-bottom: 20px; }
  .product-story-copy h2 { margin-bottom: 20px; }
  .product-story-copy > h3 { margin-bottom: 16px; }
  .product-story-copy .button { margin-top: 24px; }
  .product-story .product-interface { padding-inline: 20px; }
  .product-story .illustrated-product-flow { padding-inline: 20px; }
  .editorial-opening .page-hero { padding-bottom: 36px; }
  .editorial-opening .wide-editorial { width: calc(100% - 32px); border-radius: 22px; }
  .editorial-opening .wide-editorial .scene-picture { aspect-ratio: 4 / 3; }
  .editorial-opening .wide-editorial figcaption { padding: 16px 4px; }
  .film-frame { border-radius: 22px; }
  .film-chapters { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; }
  .film-chapters .story-chapter h3 { max-width: 520px; }
  .legal-related { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 24px; }
  .legal-related > div { gap: 8px 20px; }
}
@media (max-width: 600px) {
  .highlight-grid .editorial-card { aspect-ratio: 4 / 5; min-height: 380px; border-radius: 24px; }
  .film-frame { aspect-ratio: 4 / 5; }
  .film-toggle { grid-column: 2; grid-row: 1; font-size: 13px; padding-inline: 14px; }
  .workflow-film figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .workflow-film figcaption > span:nth-child(2) { grid-column: 1 / -1; margin-left: 0; }
}
@media (max-width: 480px) {
  .section-head { gap: 24px; }
  .launch-summary h1 { font-size: clamp(38px, 10.5vw, 48px); }
  .highlight-grid .editorial-card h3 { font-size: 26px; }
  .highlight-grid .editorial-card small { font-size: 13px; }
  .product-art picture, .product-story .product-art picture, .showcase-artwork .product-art picture, .detail-artwork .product-art picture { aspect-ratio: 4 / 3; }
  .contact-workspace .project-form { padding: 24px 20px; }
  .detail-hero h2 { margin-block: 20px; }
  .hero-actions { row-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card img, .showcase-interface summary > span { transition: none; }
  .photo-card:hover img { transform: none; }
}