/* Shared appearance for the public pages rendered by layout.php. */
html:has(.public-site) { scroll-padding-top: 92px; }

.public-site {
    --content-width: 1232px;
    --bg: #f8f9fb;
    --ink: #152236;
    --muted: #4f5d70;
    --accent: #254fbc;
    --line: #d9dfe6;
    --paper: #fff;
    --soft: #eff3f8;
    --navy: #101c2d;
    --navy-ink: #f6f8fc;
    --navy-muted: #c8d3e2;
    --navy-line: #52647b;
    --radius: 8px;
    --radius-card: 8px;
    --panel: var(--paper);
    --shadow: 0 3px 8px #182b4009;
    background: var(--bg);
    color: var(--ink);
    color-scheme: light;
}

.public-site :focus-visible { outline-color: #2857cd; }
.public-site :is(.site-header, .site-footer, .site-intro, .detail-intro, .case-intro, .home-hero, .home-contact) :focus-visible { outline-color: #a6ceff; }

.public-site > .site-header {
    top: 0;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #ffffff22;
    border-radius: 0;
    background: var(--navy);
    box-shadow: none;
    backdrop-filter: none;
}
.public-site > .site-header::before { display: none; }
.public-site .header-layout { width: min(var(--content-width), calc(100% - 2 * var(--gutter))); padding-block: 1px; }
.public-site .site-header .brand-logo { width: 105px; }
.public-site .site-header nav { gap: clamp(14px, 2.1vw, 30px); }
.public-site .site-header nav > a, .public-site .nav-solutions > summary { padding-inline: 4px; color: #d7e0ed; }
.public-site .site-header nav > a:hover, .public-site .nav-solutions > summary:hover { color: #fff; }
.public-site .site-header nav > a[aria-current], .public-site .site-header .nav-solutions:has([aria-current]) > summary { color: #fff; text-decoration: underline; text-decoration-color: #9cbcf9; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.public-site .nav-solutions > summary { border-radius: 5px; }
.public-site .site-header nav .header-contact {
    padding-inline: 15px;
    border-color: #ffffff45;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    color: #fff;
}
.public-site .site-header nav .header-contact:hover { background: #26374f; }
.public-site .mega-menu {
    --ink: var(--navy-ink);
    --accent: #b1c9ff;
    right: max(var(--gutter), calc((100% - var(--content-width)) / 2));
    left: auto;
    top: calc(100% + 1px);
    width: min(760px, calc(100% - 2 * var(--gutter)));
    border-color: #334359;
    border-radius: 0 0 8px 8px;
    background: #152237;
    box-shadow: 0 20px 36px #03091240;
    animation: none;
}
.public-site .site-header .mega-menu .mega-solution { border-radius: 5px; }
.public-site .mega-icon { border-radius: 5px; background: #233652; box-shadow: none; }
.public-site .mega-discover .button {
    border-color: #52647b;
    border-radius: 5px;
    background: #1e304a;
    box-shadow: none;
}
.public-site .mega-discover .button:hover { background: #2a405f; }

.public-site main .button {
    min-height: 48px;
    padding-inline: 17px;
    border-radius: 6px;
    box-shadow: none;
    font-weight: 620;
}
.public-site main .button-compact { min-height: 42px; padding-inline: 13px; }
.public-site main .button-primary { border-color: #2857cd; background: #2857cd; color: #fff; }
.public-site main .button-primary:hover { border-color: #1e46b4; background: #1e46b4; transform: none; }
.public-site main .button-secondary { border-color: var(--line); background: var(--paper); color: var(--ink); }
.public-site main .button-secondary:hover { border-color: var(--accent); background: var(--soft); transform: none; }
.public-site .button::after { display: none; }

.site-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 44px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 650;
}
.site-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-text-link > span { font-size: 16px; }

.public-site :is(.site-intro, .detail-intro, .case-intro, .case-contact) {
    --ink: var(--navy-ink);
    --muted: var(--navy-muted);
    --accent: #b8cdf4;
    --line: var(--navy-line);
    --paper: #1d3048;
    --soft: #29405d;
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse at 85% 12%, #263a54, transparent 69%), var(--navy);
    color: var(--ink);
}
.public-site :is(.detail-intro, .case-intro) { border: 1px solid #31445d; border-radius: 9px; box-shadow: 0 12px 28px #1e31401a; }
.public-site .detail-intro::before { background: linear-gradient(90deg, #b1c7e21c 1px, transparent 1px), linear-gradient(#b1c7e21c 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(110deg, transparent 49%, #000 100%); }
.public-site .detail-intro::after { display: none; }
.public-site .detail-intro h1 { text-wrap: initial; }
.public-site .detail-breadcrumb { margin-bottom: 17px; }
.public-site .detail-sections section { border-top: 2px solid #617dab; border-radius: 8px; }

.site-intro { overflow: hidden; }
.site-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 6vw, 83px);
    padding-block: clamp(40px, 4.8vw, 69px);
}
.site-intro h1 {
    max-width: 15ch;
    margin-top: 15px;
    font-size: clamp(39px, 4.75vw, 70px);
    font-weight: 650;
    letter-spacing: -.06em;
    line-height: 1.04;
    text-wrap: balance;
}
.site-intro .detail-lead { max-width: 48ch; }
.site-intro-kicker { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 13px; font-weight: 620; }
.site-intro-kicker::before { content: ""; width: 23px; height: 1px; background: #83a8ef; }

.product-preview { min-width: 0; position: relative; }
.product-preview::before {
    position: absolute;
    z-index: -1;
    inset: -18px -25px 10px 20px;
    border: 1px solid #a4bdde24;
    background: linear-gradient(90deg, #b1c7e219 1px, transparent 1px), linear-gradient(#b1c7e219 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(140deg, transparent 17%, #000 85%);
    pointer-events: none;
    content: "";
}
.product-preview-frame { overflow: hidden; border: 1px solid #657993; border-radius: 9px; background: #19293e; box-shadow: 0 17px 38px #050b174f; }
.product-preview-bar { display: flex; align-items: center; gap: 14px; min-height: 38px; padding-inline: 13px; color: #e4eaf3; font-size: 12px; font-weight: 600; }
.product-preview-bar span { width: 5px; height: 5px; margin-right: 12px; border-radius: 50%; background: #a9b9cd; box-shadow: 8px 0 #a9b9cd, 16px 0 #a9b9cd; }
.product-preview-frame img { width: 100%; height: auto; background: #eef2f7; }
.product-preview figcaption { display: flex; justify-content: end; }

.public-site .project-card {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: transparent;
    box-shadow: none;
}
.public-site .project-card::after { display: none; }
.public-site .project-card:hover { transform: none; box-shadow: none; }
.public-site .project-media { border: 1px solid #15223612; border-radius: 8px; background: #e5ebf2; }
.public-site .media-violet { background: #e5e8f1; }
.public-site .media-mint { background: #e2ece9; }
.public-site .media-amber { background: #ece8e1; }
.public-site .project-caption { padding: 15px 0 21px; }
.public-site .project-caption :is(h2, h3) { margin-top: 4px; font-size: clamp(20px, 2.05vw, 28px); font-weight: 650; line-height: 1.14; letter-spacing: -.034em; }
.public-site .project-caption .category { color: var(--muted); font-size: 12px; }
.public-site .arrow-link {
    width: 37px;
    height: 37px;
    border-color: var(--line);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    font-size: 16px;
}
.public-site :is(.project-card, .catalog-item, .editorial-card):hover .arrow-link { border-color: var(--accent); background: var(--accent); color: #fff; }

.public-site :is(.catalog-search, .request-side, .editorial-aside, .model-example, .mobile-platform) { background: var(--soft); }
.public-site :is(.catalog-search, .request-form, .sector-search) :is(input, select, textarea) { border-color: #a5b1c2; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: none; }
.public-site :is(.catalog-search, .request-form, .sector-search) :is(input, select, textarea):focus { border-color: #2857cd; background: #fff; box-shadow: 0 0 0 3px #2857cd17; }
.public-site :is(.catalog-search, .request-form, .sector-search) :is(input, textarea)::placeholder { color: #536275; }
.public-site .catalog-switch { width: auto; padding: 0 0 14px; gap: 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.public-site .catalog-item { border-radius: 7px; background: var(--paper); }
.public-site .catalog-item:hover { border-color: #8199bd; transform: none; box-shadow: 0 9px 18px #1b304615; }
.public-site .catalog-custom { background: #e8eef7; }
.public-site .catalog-feature { border-color: var(--line); background: #1c2f49; box-shadow: 0 14px 32px #070e2930; }
.public-site .catalog-feature .project-media { background: #243c5e; }
.public-site .catalog-case { margin-block: 29px; }
.public-site .request-confirmation { border-color: #92bdb4; background: #e3f1eb; }
.public-site .request-error { color: #9d262c; }

.public-site .case-project { --case-accent: #254fbc; --case-border: #d9dfe6; --case-glow: #eef3fa; }
.public-site .case-intro { --case-accent: #b8cdf4; }
.public-site .case-context-copy p, .public-site .case-function p, .public-site .case-facts p, .public-site :is(.dc-case-note,.dc-flow p) { color: var(--muted); }
.public-site .case-facts { border-radius: 8px; background: var(--soft); }
.public-site .case-facts li { border-color: var(--line); background: #fff; color: var(--ink); }
.public-site .case-screen { border-color: #c6d2df; border-radius: 8px; background: #eef2f7; box-shadow: 0 9px 22px #182b4015; }
.public-site .case-screen > a { border-radius: 5px; background: #e5eaf2; }
.public-site .case-screen figcaption { color: #435268; }
.public-site .case-screen figcaption span[aria-hidden] { color: #254fbc; }
.public-site .case-intro .case-screen { border-color: #657993; background: #19293e; box-shadow: 0 12px 29px #050b174f; }
.public-site .case-intro .case-screen figcaption, .public-site .case-intro .case-screen figcaption span[aria-hidden] { color: #dce7fb; }
.public-site .case-contact { border-color: #31445d; }
.public-site .case-lightbox { color: #f6f8fc; background: #101c2d; }
.public-site .dc-flow li { border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.public-site .case-project :is(#dc-flow, #case-functions-title, #case-gallery-title) { scroll-margin-top: 0; }
.case-section-nav { display: flex; flex-wrap: wrap; gap: 0 23px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.case-section-nav a { display: inline-flex; align-items: center; min-height: 43px; color: var(--accent); font-size: 14px; font-weight: 640; }
.case-section-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.public-site > .site-footer { display: block; width: 100%; padding: 0; border: 0; background: var(--navy); color: #d0daea; }
.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 2fr) auto;
    gap: 23px clamp(20px, 5vw, 66px);
    align-items: start;
    padding-top: 36px;
}
.site-footer-grid .brand-logo { width: 112px; }
.site-footer-grid nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.site-footer-grid nav > div { display: grid; gap: 3px; }
.site-footer-grid strong { margin-bottom: 4px; color: #fff; font-size: 13px; font-weight: 650; }
.site-footer-grid nav a, .site-footer-contact { display: inline-flex; align-items: center; min-height: 35px; width: fit-content; color: #c4d0e2; font-size: 14px; }
.site-footer-grid nav a:hover, .site-footer-contact:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer-contact { gap: 8px; color: #e2edff; font-weight: 650; }
.site-footer-grid small { grid-column: 1 / -1; padding-block: 15px 19px; border-top: 1px solid #ffffff23; color: #bdc9dc; font-size: 12px; }
.site-footer-grid small a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 850px) {
    .public-site .header-layout { padding-block: 4px; }
    .public-site .site-header .brand-logo { width: 88px; }
    .public-site .site-header nav { gap: 4px 14px; }
    .public-site .site-header nav > a, .public-site .nav-solutions > summary { padding-inline: 8px; }
    .public-site .mega-menu { width: 100%; border-radius: 6px; box-shadow: none; }
    .public-site.js .menu-toggle { border-color: #68788f; border-radius: 5px; background: transparent; }
    .public-site .menu-toggle span { background: #f6f8fc; }
    .site-intro-grid { grid-template-columns: 1fr; gap: 27px; }
    .product-preview { max-width: 630px; }
}
@media (max-width: 575px) {
    .public-site { --gutter: 19px; }
    .site-intro h1 { font-size: clamp(35px, 9.7vw, 48px); }
    .product-preview::before { inset: -12px -13px 12px 14px; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; }
    .site-footer-grid nav a { min-height: 40px; }
}