


:root {
    /* Authoritative Palette: Ground, Surfaces & Cyan Accent */
    --ground:#0e1424;
    --surface:#171e32;
    --surface-2:#232c43;
    --line:#3e4861;
    --ink-soft:#aeb7ce;
    --ink:#e2e8f6;
    --accent:#35c4e6;
    --accent-ink:#111;


    /* Semantic Feedback & State Tokens (Strictly within the ladder hue) */
    --state-error:#f87171;
    --state-error-bg:rgba(248, 113, 113, 0.12);
    --state-success:#34d399;
    --state-success-bg:rgba(52, 211, 153, 0.12);


    --felo-283:"Cinzel", "Cinzel Fallback", Georgia, "Times New Roman", serif;
    --felo-d45:"Crimson Pro", "Crimson Pro Fallback", Garamond, "EB Garamond", serif;
    --felo-d14:"JetBrains Mono", "JetBrains Mono Fallback", "SF Mono", Consolas, Menlo, monospace;


    /* Fluid Display & Body Scale using clamp() */
    --text-display:clamp(2.25rem, 1.6rem + 3.2vw, 4.25rem);
    --text-h1:clamp(2.0rem, 1.5rem + 2.4vw, 3.5rem);
    --text-h2:clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem);
    --text-h3:clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
    --text-h4:clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    --text-lead:clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --text-body:clamp(1.0625rem, 1.0rem + 0.3vw, 1.2rem);
    --text-small:clamp(0.875rem, 0.82rem + 0.2vw, 0.975rem);
    --text-micro:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);


    /* Spacing Rhythm */
    --space-3xs:0.25rem;
    --space-2xs:0.5rem;

    --space-xs:0.75rem;
    --space-sm:1.0rem;
    --space-md:1.5rem;
    --space-lg:2.25rem;
    --space-xl:3.5rem;
    --space-2xl:5.0rem;
    --space-3xl:7.5rem;


    --container-max:1240px;
    --container-wide:1240px;
    --container-narrow:1240px;
    --gutter:clamp(1.0rem, 0.75rem + 1.25vw, 2.0rem);


    --header-height-full:5.5rem;
    --header-height-compact:4.0rem;
    --dock-height:4.25rem;


    /* Geometry & Tactile Edges */
    --radius-xs:2px;
    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:8px;
    --radius-full:9999px;


    --shadow-subtle:0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-elevation:0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-deep:0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);


    /* Motion Tokens: Deliberate mechanical transitions */
    --ease-mechanical:cubic-bezier(0.2, 0.0, 0.0, 1.0);
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:cubic-bezier(0.7, 0, 0.84, 0);
    --duration-fast:140ms;
    --duration-normal:220ms;
    --duration-slow:380ms;


    /* Layering Stack */
    --z-base:1;
    --z-plate:5;
    --z-sticky:100;
    --z-dock:800;
    --z-header:850;
    --z-drawer:900;
    --z-chat:920;
    --z-modal:950;
    --z-consent:970;
    --z-skip:1000;
}



@view-transition {
    navigation:auto;
}


@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation:200ms var(--ease-mechanical) both fadeOut;
    }
    ::view-transition-new(root) {
        animation:260ms var(--ease-out) both fadeIn;
    }


    ::view-transition-old(hero),
    ::view-transition-new(hero) {
        animation-duration:380ms;
        animation-timing-function:var(--ease-out);
    }


    ::view-transition-old(hero-title),
    ::view-transition-new(hero-title) {
        animation-duration:300ms;
        animation-timing-function:var(--ease-out);
    }


    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }


    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}



*,
*::before,
*::after {
    box-sizing:border-box;
}


html {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    scroll-behavior:smooth;
    scroll-padding-top:var(--header-height-compact);
    background-color:var(--ground);
}


body {
    margin:0;
    padding:0;
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--felo-d45);
    font-size:var(--text-body);
    line-height:1.62;
    font-feature-settings:"cv02", "cv03", "cv04", "cv11";
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding-bottom:var(--dock-height);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


@media (min-width: 1024px) {
    body {
        padding-bottom:0;
    }
}


/* Strictly inherit font only for form controls */
input,
button,
select,
textarea {
    font:inherit;
    color:inherit;
}


img,
picture,
svg,
video {
    display:block;
    max-width:100%;
    height:auto;
}



h1, h2, h3, h4, h5, h6 {
    margin-top:0;
    margin-bottom:var(--space-xs);
    font-family:var(--felo-283);
    font-weight:700;
    color:var(--ink);
    line-height:1.18;
    letter-spacing:-0.015em;
    text-wrap:balance;
    overflow-wrap:break-word;
}


h1 {
    font-size:var(--text-h1);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-0.025em;
}


h2 {
    font-size:var(--text-h2);
    line-height:1.15;
}


h3 {
    font-size:var(--text-h3);
}


h4 {
    font-size:var(--text-h4);
}


p {
    margin-top:0;
    margin-bottom:var(--space-md);
    max-width:65ch;
    color:var(--ink);
}


.lede,
.p-lead {
    font-size:var(--text-lead);

    line-height:1.5;
    color:var(--ink);
    max-width:58ch;
}


.caption,
figcaption {
    font-family:var(--felo-d14);
    font-size:var(--text-micro);
    line-height:1.45;
    color:var(--ink-soft);
    letter-spacing:0.02em;
    text-transform:uppercase;
}


small {
    font-size:var(--text-small);
}


strong,
b {
    font-weight:600;
    color:var(--ink);
}


em,
i {
    font-style:italic;
}


a {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color var(--duration-fast) var(--ease-out),
                            text-decoration-color var(--duration-fast) var(--ease-out);
}


a:hover {
    color:#62d3ed;
    text-decoration-color:currentColor;
}


a:active {
    color:#27a6c5;
}


a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:var(--radius-xs);
}


code,
kbd,
samp,
pre {
    font-family:var(--felo-d14);
    font-size:0.9em;
    font-variant-numeric:tabular-nums;
}


pre {
    background-color:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:var(--space-md);
    overflow-x:auto;
    color:var(--ink);
    max-width:100%;
}


blockquote {
    margin:var(--space-lg) 0;
    padding-left:var(--space-md);
    border-left:3px solid var(--accent);
    font-style:italic;
    color:var(--ink);
}


ul, ol {
    margin-top:0;
    margin-bottom:var(--space-md);
    padding-left:var(--space-lg);
    max-width:65ch;
}


li {
    margin-bottom:var(--space-2xs);
}


hr {
    border:0;
    height:1px;
    background-color:var(--line);
    margin:var(--space-xl) 0;
}


/* Tabular numerals for engineering specifications and quotes */
.tabular,
.numeral,
.price-figure,
.stat-number {
    font-family:var(--felo-d14);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em;
}



.site-main {
    flex:1 0 auto;
    width:100%;
}


.container {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
}


.container-wide {
    width:100%;
    max-width:var(--container-wide);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
}


.container-narrow {
    width:100%;
    max-width:var(--container-narrow);
    margin-left:auto;
    margin-right:auto;

    padding-left:var(--gutter);
    padding-right:var(--gutter);
}


.section {
    padding-top:clamp(2.5rem, 2.0rem + 2.5vw, 5.0rem);
    padding-bottom:clamp(2.5rem, 2.0rem + 2.5vw, 5.0rem);
    border-bottom:1px solid var(--line);
    position:relative;
}


.section--surface {
    background-color:var(--surface);
}


.section--ground {
    background-color:var(--ground);
}


.grid {
    display:grid;
    gap:var(--space-md);
}


.grid-2 {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-lg);
}


@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


.grid-3 {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-lg);
}


@media (min-width: 640px) {
    .grid-3 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}


.grid-4 {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-md);
}


@media (min-width: 640px) {
    .grid-4 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 1024px) {
    .grid-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}


/* Split Hero Structure */
.split-hero-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-lg);
    align-items:start;
}


@media (min-width: 960px) {
    .split-hero-grid {
        grid-template-columns:1.15fr 1fr;
        gap:var(--space-xl);
    }
}


.stack {
    display:flex;
    flex-direction:column;
}


.stack-xs > * + * { margin-top: var(--space-xs); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }


.cluster {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-sm);
}



.sr-only,
.visually-hidden {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


.skip-link {
    position:fixed;
    top:var(--space-sm);
    left:var(--space-sm);
    z-index:var(--z-skip);
    padding:var(--space-xs) var(--space-md);
    background-color:var(--accent);
    color:var(--accent-ink);
    font-family:var(--felo-d14);
    font-weight:600;
    font-size:var(--text-small);
    text-decoration:none;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-elevation);
    transform:translateY(-160%);
    transition:transform var(--duration-fast) var(--ease-out);
}


.skip-link:focus {
    transform:translateY(0);
    outline:3px solid var(--ink);
    outline-offset:2px;
}


/* Icon glyph baseline sizing */
.icon {
    width:1.25em;
    height:1.25em;
    display:inline-block;
    vertical-align:-0.2em;
    fill:currentColor;
    flex-shrink:0;
}



@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}
