/* ============================================================
   Albatron - Off-Road Autonomous Systems
   Reference: albatron.ai visual language
   ============================================================ */

:root {
    --c-navy:        #0B1F3D;
    --c-navy-2:      #14294F;
    --c-blue:        #1E7BE0;
    --c-blue-dark:   #0F5FBE;
    --c-blue-tint:   #EAF2FC;
    --c-blue-tint-2: #F1F6FB;
    --c-teal:        #14A085;
    --c-teal-tint:   #E6F5F1;
    --c-ink:         #0F1B33;
    --c-body:        #4A5872;
    --c-muted:       #6B7A93;
    --c-border:      #E1E6EF;
    --c-border-soft: #EDF1F7;
    --c-bg:          #FFFFFF;
    --c-bg-alt:      #F7F9FC;
    --c-bg-hero:     #F1F6FB;

    --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", "PingFang TC", "Microsoft JhengHei", sans-serif;

    --fs-body:  16px;
    --fs-small: 14px;
    --fs-xs:    13px;
    --fs-lead:  17px;
    --fs-h1:    56px;
    --fs-h2:    38px;
    --fs-h3:    24px;
    --fs-h4:    18px;
    --fs-eyebrow: 13px;

    --lh-tight: 1.2;
    --lh-body:  1.65;

    --container: 1440px;
    --gutter:    32px;
    --radius:    12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(11, 31, 61, 0.06), 0 4px 12px rgba(11, 31, 61, 0.04);
    --shadow-md: 0 4px 12px rgba(11, 31, 61, 0.08), 0 12px 32px rgba(11, 31, 61, 0.06);

    --dur: 180ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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


img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Layout ----------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: 100px 0;
    position: relative;
}
.section + .section { border-top: 1px solid var(--c-border-soft); }

.split-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 80px;
    align-items: start;
}
.split-head { position: sticky; top: 100px; }
.section-rule {
    display: block;
    width: 32px;
    height: 3px;
    background: var(--c-navy);
    margin-bottom: 24px;
}
.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-blue);
    margin-bottom: 20px;
}
.section-title {
    font-size: var(--fs-h2);
    line-height: 1.15;
    font-weight: 700;
    color: var(--c-navy);
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}
.section-sub {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--c-body);
    margin-bottom: 16px;
}
.section-
.section-head { max-width: 780px; }

.kicker {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.kicker--blue { color: var(--c-blue); }
.kicker--teal { color: var(--c-teal); }

/* Buttons ---------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: transform var(--dur) var(--ease),
                background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--c-navy); color: #fff; }
.btn-primary:hover { background: var(--c-navy-2); }
.btn-secondary { background: #fff; color: var(--c-navy); border-color: var(--c-border); }
.btn-header { padding: 10px 22px; }
.btn-icon { width: 18px; height: 18px; }

/* Header ----------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--c-border-soft);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 76px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { flex-shrink: 0; }
.brand-name {
    font-weight: 700;
    color: var(--c-navy);
    font-size: 22px;
    letter-spacing: -0.01em;
}
.primary-nav ul {
    display: flex;
    gap: 8px;
}
.primary-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    color: var(--c-ink);
    font-weight: 500;
    font-size: 15px;
    border-radius: 6px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.primary-nav a:hover { color: var(--c-blue); background: var(--c-blue-tint); }
.caret { width: 16px; height: 16px; opacity: 0.7; }

.nav-toggle { display: none; padding: 8px; }
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-navy);
    margin: 5px 0;
    border-radius: 2px;
}
.mobile-nav { display: none; background: #fff; border-top: 1px solid var(--c-border-soft); padding: 16px var(--gutter); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a { display: block; padding: 12px 4px; font-weight: 500; }

/* Section: Handle -------------------------------------------- */
.section-handle { background: var(--c-bg-alt); }
.handle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 40px;
}
.handle-card {
    padding: 0;
}
.handle-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--c-blue-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blue);
    margin-bottom: 20px;
}
.handle-icon-svg { width: 28px; height: 28px; }
.handle-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 12px;
    line-height: 1.35;
}
.handle-

/* Section: Infrastructure ------------------------------------ */
.section-infra { background: #fff; }
.infra-list { display: flex; flex-direction: column; gap: 40px; }
.infra-item { position: relative; padding-top: 8px; }
.infra-rule {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--c-blue);
    margin-bottom: 12px;
}
.infra-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.infra-item-icon {
    color: var(--c-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.infra-item-icon svg { width: 26px; height: 26px; }
.infra-item-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
    flex: 1;
    line-height: 1.25;
}
.infra-item-index {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-muted);
    letter-spacing: 0.1em;
    background: var(--c-bg-alt);
    padding: 4px 8px;
    border-radius: 4px;
}
.infra-item-meta {
    color: var(--c-navy);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}
.infra-item-

/* Section: Machines ------------------------------------------ */
.section-machines { background: var(--c-bg-alt); }
.machines-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.machine-card {
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
}
.machine-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.machine-media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--c-bg-alt);
}
.machine-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;
}
.machine-media-fallback { display: none; }
.machine-media-fallback-bg {
    position: absolute; inset: 0; z-index: 1;
}
.machine-media-fallback-bg--agri         { background: linear-gradient(135deg, #E9F0DB, #B7CD8B); }
.machine-media-fallback-bg--mining       { background: linear-gradient(135deg, #EDE4D3, #C9A784); }
.machine-media-fallback-bg--construction { background: linear-gradient(135deg, #F1E9DC, #D9B076); }
.machine-media-fallback-bg--ugv          { background: linear-gradient(135deg, #DFE7EE, #93A9BF); }

.machine-media-tag {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    color: var(--c-navy);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}
.machine-icon { color: var(--c-blue); display: inline-flex; }
.machine-icon svg { width: 18px; height: 18px; }

.machine-
.machine-desc { color: var(--c-body); font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.machine-systems {
    border-top: 1px solid var(--c-border-soft);
    padding-top: 14px;
}
.machine-systems-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 6px;
}
.machine-systems-

/* Section: Products ------------------------------------------ */
.section-products { background: #fff; }
.product-groups { display: flex; flex-direction: column; gap: 60px; }
.product-group {
    background: var(--c-bg);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: 32px;
}
.product-group-head {
    display: flex;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--c-border-soft);
}
.product-group-mark {
    width: 6px;
    align-self: stretch;
    border-radius: 3px;
    flex-shrink: 0;
}
.product-group-mark--blue { background: var(--c-blue); }
.product-group-mark--teal { background: var(--c-teal); }

.product-group-kicker {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 6px;
}
.product-group--blue .product-group-kicker { color: var(--c-blue); }
.product-group--teal .product-group-kicker { color: var(--c-teal); }

.product-group-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 10px;
    line-height: 1.25;
}
.product-group-intro { color: var(--c-body); font-size: 14px; line-height: 1.65; }

.product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.product-card {
    background: var(--c-bg-alt);
    border-radius: var(--radius-sm);
    padding: 18px;
    display: flex;
    gap: 16px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-media {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
    border: 1px solid var(--c-border-soft);
}
.product-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; z-index: 2;
}
.product-media-fallback { display: none; }
.product-media-placeholder {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(135deg, #2b2b2b 0%, #4a4a4a 100%);
    box-shadow: inset 0 -8px 20px rgba(0,0,0,0.3);
}
.product-media-placeholder::before {
    content: "";
    position: absolute;
    inset: 20% 15%;
    background: repeating-linear-gradient(90deg, #666 0 2px, transparent 2px 5px);
    border-radius: 3px;
    opacity: 0.5;
}
.product-
.product-sku {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-blue);
    margin-bottom: 4px;
}
.product-group--teal .product-sku { color: var(--c-teal); }
.product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 8px;
    line-height: 1.3;
}
.product-desc { color: var(--c-body); font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.product-best-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 2px;
}
.product-best-

/* Footer ----------------------------------------------------- */
.site-footer {
    background: var(--c-navy);
    color: #C8D0DE;
    padding: 60px 0 24px;
    margin-top: 0;
}
.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 3fr;
    gap: 60px;
}
.brand--footer .brand-name { color: #fff; }
.brand-name--footer { color: #fff; }
.footer-tagline { margin-top: 16px; color: #8792A6; font-size: 14px; max-width: 320px; line-height: 1.55; }
.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.footer-col-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
    color: #8792A6;
    font-size: 14px;
    transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #1F3860;
    font-size: 13px;
    color: #6B7A93;
}

/* Responsive ------------------------------------------------- */
@media (max-width: 1080px) {
    :root { --fs-h1: 46px; --fs-h2: 32px; }
    .split-layout { grid-template-columns: 1fr; gap: 40px; }
    .split-head { position: static; }
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
    :root { --gutter: 20px; --fs-h1: 38px; --fs-h2: 28px; --fs-h3: 22px; }
    .section { padding: 72px 0; }
    .primary-nav, .btn-header { display: none; }
    .nav-toggle { display: block; }
    .mobile-nav[data-open="true"] { display: block; }
    .handle-grid { grid-template-columns: 1fr; gap: 32px; }
    .machines-grid { grid-template-columns: 1fr; }
    .product-list { grid-template-columns: 1fr; }
    .product-group { padding: 24px; }
    .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    :root { --fs-h1: 32px; }
    .footer-nav { grid-template-columns: 1fr; }
    .product-card { flex-direction: column; }
    .product-media { width: 100%; height: 120px; }
}

/* Reveal animation ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-revealed { opacity: 1; transform: none; }

/* subtle cascade across the three stage cards in a row */
.arch-stage.reveal:nth-child(1) { transition-delay: 0ms; }
.arch-stage.reveal:nth-child(2) { transition-delay: 90ms; }
.arch-stage.reveal:nth-child(3) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-revealed { opacity: 1; transform: none; transition: none; }
    .btn:hover, .machine-card:hover, .product-card:hover { transform: none; }
}

/* ============================================================
   Header dropdowns
   ============================================================ */
.brand-tld { color: var(--c-blue); }
.nav-item { position: relative; }
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    z-index: 60;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown ul { display: flex; flex-direction: column; }
.dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-body);
    white-space: nowrap;
}
.dropdown a:hover { background: var(--c-blue-tint); color: var(--c-blue); }

/* ============================================================
   Footer additions
   ============================================================ */
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: #1F3860;
    color: #C8D0DE;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--c-blue); color: #fff; }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: #6B7A93; font-size: 13px; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 860px) {
    .footer-bottom { justify-content: flex-start; }
}

/* .scene-img is the live image inside .arch-figure (Architecture
   section illustrations) — kept; its dead .condition-scene /
   .scene-fallback / .scene-blueprint neighbors were removed. */
.scene-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Official logo image in header */
.brand-logo { height: 30px; width: auto; display: block; }

/* ---- retained from the dead-zone sweep below: two live blocks ---- */

/* Challenges v2: shorter copy with stronger visual anchors */
.section-handle{background:#f6f9fd}
.section-handle .split-layout{grid-template-columns:minmax(280px,360px) 1fr;gap:76px}
.section-handle .section-sub{max-width:330px;font-size:1rem;line-height:1.6}
.handle-grid{gap:48px 56px}
.handle-card{position:relative;padding:4px 0 4px 0}
.handle-icon{width:76px;height:76px;margin-bottom:20px;background:#e4f0ff;border:1px solid #c9defa;box-shadow:0 8px 22px rgba(30,123,224,.08);color:#0877e6}
.handle-icon-svg{width:36px;height:36px;stroke-width:1.8}
.handle-title{font-size:1.2rem!important;line-height:1.3;margin-bottom:10px}
.handle-
@media(max-width:1080px){.section-handle .split-layout{grid-template-columns:1fr;gap:48px}.section-handle .section-sub{max-width:600px}}
@media(max-width:680px){.handle-grid{grid-template-columns:1fr;gap:36px}.handle-card{display:grid;grid-template-columns:64px 1fr;column-gap:18px}.handle-icon{grid-row:1/3;width:64px;height:64px;margin:0}.handle-icon-svg{width:30px;height:30px}.handle-title,.handle-}


/* Applications v3: concise copy and stronger image-led cards */
.machine-media { aspect-ratio: 16 / 9; }
.machine-media img { object-position: center; }
.machine-
.machine-desc { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.machine-systems { padding-top: 11px; }
.machine-systems-label { margin-bottom: 5px; }
.machine-systems-
.machine-media-tag { left: 14px; bottom: 14px; padding: 7px 12px; }



/* ============================================================
   Architecture (Section 1) — three-stage system paths
   Two self-contained groups: figure + info + stage row.
   DOM order already matches the required mobile reading
   sequence, so no order/display:contents tricks are needed.
   ============================================================ */
.section-arch { position: relative; padding: 96px 0; overflow: hidden; }

/* full-section terrain scene — one continuous background, not
   boxed per illustration. Sits behind everything in the section. */
.arch-scene-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.arch-scene-bg .scene-terrain { width: 100%; height: 100%; display: block; }

.arch-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 32px;
    row-gap: 0;
    grid-template-areas:
        "head    head    head    head    head    head    head    head    head    head    head    head"
        "b-info  b-info  b-info  b-info  b-fig   b-fig   b-fig   b-fig   b-fig   b-fig   b-fig   b-fig"
        "b-stage b-stage b-stage b-stage b-stage b-stage b-stage b-stage b-stage b-stage b-stage b-stage"
        "t-fig   t-fig   t-fig   t-fig   t-fig   t-fig   t-fig   t-fig   t-info  t-info  t-info  t-info"
        "t-stage t-stage t-stage t-stage t-stage t-stage t-stage t-stage t-stage t-stage t-stage t-stage";
}

.arch-heading { grid-area: head; max-width: 700px; margin-bottom: 64px; }
.arch-note { font-size: var(--fs-lead); color: var(--c-body); line-height: 1.55; margin-top: 14px; }

/* ---- figure + info row: image stays large, matches the
   scale of the original staggered composition. No background of
   its own — the full-section terrain scene (.arch-scene-bg) shows
   through behind it instead of a boxed-in card. ---- */
.arch-figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.arch-figure--blue  { grid-area: b-fig; height: 400px; }
.arch-figure--teal {
    grid-area: t-fig;
    height: 360px;
    border-top: 1px solid var(--c-border-soft);
    padding-top: 56px;
    margin-top: 56px;
}
.arch-figure .scene-img { width: 100%; height: 100%; object-fit: contain; }

.arch-info { align-self: center; }
.arch-info--blue { grid-area: b-info; }
.arch-info--teal {
    grid-area: t-info;
    border-top: 1px solid var(--c-border-soft);
    padding-top: 56px;
    margin-top: 56px;
}
.arch-info-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.2;
    margin-bottom: 8px;
}
.arch-info-tagline { color: var(--c-body); font-size: 15px; line-height: 1.55; max-width: 300px; }

/* ---- three-stage system path row: flat list rhythm,
   not boxed cards — connecting arrows are pure CSS,
   so the column count can never mismatch the item count ---- */
.arch-stagegroup--blue { grid-area: b-stage; margin-top: 40px; }
.arch-stagegroup--teal { grid-area: t-stage; margin-top: 40px; }
.arch-stagegroup-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
}
.arch-stagegroup-title--blue { color: var(--c-blue); }
.arch-stagegroup-title--teal { color: var(--c-teal); }

.arch-stage-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 36px;
}
.arch-stage {
    position: relative;
    padding-top: 20px;
    border-top: 2px solid var(--c-border-soft);
}
.arch-stage-row--blue .arch-stage { border-top-color: var(--c-blue-tint); }
.arch-stage-row--teal .arch-stage { border-top-color: var(--c-teal-tint); }

/* connecting arrow between stages: pure CSS pseudo-element,
   so it never has to participate in grid column math */
.arch-stage:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: -3px;
    right: -28px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.arch-stage-row--blue .arch-stage:not(:last-child)::after { color: #b9d6f4; }
.arch-stage-row--teal .arch-stage:not(:last-child)::after { color: #a9e0d4; }

.arch-stage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-bottom: 14px;
}
.arch-stage-icon svg { width: 20px; height: 20px; }
.arch-stage-icon--blue { background: var(--c-blue-tint); color: var(--c-blue); }
.arch-stage-icon--teal { background: var(--c-teal-tint); color: var(--c-teal); }

.arch-stage-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.arch-stage-label--blue { color: var(--c-blue); }
.arch-stage-label--teal { color: var(--c-teal); }

.arch-stage-items { display: flex; flex-direction: column; gap: 8px; }
.arch-stage-items li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-navy);
}

@media (max-width: 980px) {
    /* Natural DOM order already matches the desired mobile reading
       sequence (heading -> tractor -> retrofit info -> retrofit
       architecture -> UGV -> purpose info -> purpose architecture),
       so this just collapses to a single column with no reordering. */
    .arch-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "b-fig"
            "b-info"
            "b-stage"
            "t-fig"
            "t-info"
            "t-stage";
        row-gap: 20px;
    }
    .arch-figure--blue { height: 280px; }
    .arch-figure--teal {
        height: 260px;
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
    .arch-info--teal {
        border-top: 1px solid var(--c-border-soft);
        padding-top: 28px;
        margin-top: 8px;
    }
    .arch-stagegroup--blue { margin-top: 8px; }
    .arch-stagegroup--teal { margin-top: 8px; }
    .arch-stage-row { grid-template-columns: 1fr; gap: 22px; }
    .arch-stage:not(:last-child)::after { display: none; }
}

/* Architecture (Section 1) full-section background.
   The actual photo (as responsive avif/webp via image-set()) is
   owned solely by page-v33.css — see "Responsive raster sources"
   there. Section padding is owned by page-v33.css's shared
   .section/.section-arch rhythm rule (--page-section-space) — not
   redeclared here. This block only owns layout/position/opacity
   for the background pseudo-element, so there is exactly one
   declaration per property and no !important needed. */
.section-arch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 22px 46px rgba(19, 67, 116, .035);
}
.section-arch > .container {
    position: relative;
    z-index: 1;
}
.section-arch .arch-info--teal {
    border-top: 0 !important;
}
.section-arch::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center top, center center;
    background-size: 100% 260px, cover;
    background-repeat: no-repeat;
    opacity: .86;
}
@media (max-width: 980px) {
    .section-arch::before {
        background-position: center top, 58% center;
    }
}
@media (max-width: 600px) {
    .section-arch::before {
        background-position: center top, 64% center;
        opacity: .78;
    }
}
/* Infrastructure v19: three-stage vertical system flow. */
.section-infra {
    padding: 112px 0;
    background: #fff;
}
.section-infra .split-layout {
    grid-template-columns: minmax(0, 30%) minmax(0, 63%);
    gap: 7%;
    align-items: start;
}
.section-infra .split-head {
    position: sticky;
    top: 116px;
    align-self: start;
    max-width: 430px;
}
.section-infra .section-title {
    max-width: 410px;
}
.section-infra .section-sub {
    max-width: 380px;
    font-size: 16px;
    line-height: 1.65;
}
.section-infra .infra-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.section-infra .infra-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 55px;
    bottom: 34px;
    left: 27px;
    width: 1px;
    background: linear-gradient(180deg, rgba(30,123,224,.25), rgba(18,157,145,.25) 58%, rgba(17,50,88,.22));
}
.section-infra .infra-item {
    position: relative;
    z-index: 1;
    padding: 0;
}
.section-infra .infra-item--phase-start:not(:first-child) {
    margin-top: 26px;
}
.section-infra .infra-rule {
    display: none !important;
}
.section-infra .infra-phase-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 17px 78px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
}
.section-infra .infra-phase-label span {
    font-size: 11px;
    letter-spacing: .08em;
    opacity: .72;
}
.section-infra .infra-phase-label--data { color: #1e7be0; }
.section-infra .infra-phase-label--intelligence { color: #129d91; }
.section-infra .infra-phase-label--control { color: #12385f; }
.section-infra .infra-item-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.section-infra .infra-node {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #fff;
}
.section-infra .infra-item--data { --infra-accent: #1e7be0; }
.section-infra .infra-item--intelligence { --infra-accent: #129d91; }
.section-infra .infra-item--control { --infra-accent: #12385f; }
.section-infra .infra-item--data .infra-node {
    color: #1e7be0;
    background: #f4f9ff;
}
.section-infra .infra-item--intelligence .infra-node {
    color: #129d91;
    background: #f1fbf9;
}
.section-infra .infra-item--control .infra-node {
    color: #12385f;
    background: #f3f7fb;
}
.section-infra .infra-item-icon {
    display: inline-flex;
    color: inherit;
}
.section-infra .infra-item-icon svg {
    width: 34px;
    height: 34px;
}
.section-infra .infra-item-index {
    position: absolute;
    right: -7px;
    bottom: -5px;
    min-width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--infra-accent);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .03em;
}
.section-infra .infra-item-inner {
    min-width: 0;
    padding-top: 2px;
}
.section-infra .infra-item-title {
    margin: 0 0 7px;
    color: var(--c-navy);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}
.section-infra .infra-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0 0 6px;
    color: #183656;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}
.section-infra .infra-tag:not(:last-child)::after {
    content: "·";
    margin: 0 8px;
    color: #8aa0b8;
}
.section-infra .infra-item-
@media (max-width: 980px) {
    .section-infra .split-layout {
        grid-template-columns: minmax(0, 32%) minmax(0, 61%);
        gap: 7%;
    }
    .section-infra .split-head { top: 96px; }
}
@media (max-width: 760px) {
    .section-infra { padding: 82px 0; }
    .section-infra .split-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .section-infra .split-head {
        position: static;
        max-width: 560px;
    }
    .section-infra .infra-item-row {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 18px;
    }
    .section-infra .infra-node {
        width: 48px;
        height: 48px;
    }
    .section-infra .infra-item-icon svg {
        width: 30px;
        height: 30px;
    }
    .section-infra .infra-list::before {
        left: 23px;
        top: 50px;
        bottom: 28px;
    }
    .section-infra .infra-phase-label {
        margin-left: 66px;
    }
}
/* Infrastructure motion v20: one-time flow reveal. */
@media (prefers-reduced-motion: no-preference) {
    .section-infra.infra-motion-ready .infra-list::before {
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
    }
    .section-infra.infra-motion-ready .infra-item-row {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity 430ms ease,
            transform 430ms cubic-bezier(.22, .61, .36, 1);
    }
    .section-infra.infra-motion-ready .infra-phase-label {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 300ms ease, transform 300ms ease;
    }
    .section-infra.infra-motion-ready.infra-motion-visible .infra-list::before {
        transform: scaleY(1);
    }
    .section-infra.infra-motion-ready.infra-motion-visible .infra-item-row {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(110ms + var(--infra-delay));
    }
    .section-infra.infra-motion-ready.infra-motion-visible .infra-phase-label {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(40ms + var(--infra-delay));
    }
    .section-infra .infra-node {
        transition: transform 180ms ease, background-color 180ms ease;
    }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .section-infra .infra-item:hover .infra-node {
        transform: scale(1.04);
    }
}
@media (prefers-reduced-motion: reduce) {
    .section-infra .infra-list::before,
    .section-infra .infra-item-row,
    .section-infra .infra-phase-label,
    .section-infra .infra-node {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* Product imagery v21: consistent front-view product presentation. */
.section-products .product-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-border-soft);
}
.section-products .product-media {
    position: relative;
    width: 100%;
    height: 210px;
    flex: 0 0 210px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--c-border-soft);
    border-radius: 0;
    background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
}
.section-products .product-media img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--product-scale, 1)) rotate(var(--product-rotate, 0deg));
    transform-origin: center;
}
.section-products .product-media-placeholder {
    background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
    box-shadow: none;
}
.section-products .product-media-placeholder::before {
    display: none;
}
.section-products .product-
.section-products .product-best {
    margin-top: auto;
}
.section-products .product-image--talo-a1000   { --product-scale: 1.25; }
.section-products .product-image--talo-n1000   { --product-scale: 1.04; }
.section-products .product-image--talo-b1000   { --product-scale: 1.04; }
.section-products .product-image--talo-f1200gu { --product-scale: 1.20; }
.section-products .product-image--talo-m1000   { --product-scale: .76; --product-rotate: 180deg; }
.section-products .product-image--talo-14000   { --product-scale: 1.95; }
.section-products .product-image--talo-39000   { --product-scale: 1.34; }
.section-products .product-image--talo-53000   { --product-scale: 1.20; }
.section-products .product-image--talo-43750   { --product-scale: .78; }
@media (max-width: 760px) {
    .section-products .product-media {
        height: 200px;
        flex-basis: 200px;
    }
}
@media (max-width: 480px) {
    .section-products .product-media {
        height: 180px;
        flex-basis: 180px;
    }
}
/* Product cards v22: balanced product footprint and persistent CTA. */
.section-products .product-image--talo-a1000   { --product-scale: 1.32; }
.section-products .product-image--talo-n1000   { --product-scale: 1.08; }
.section-products .product-image--talo-b1000   { --product-scale: 1.08; }
.section-products .product-image--talo-f1200gu { --product-scale: 1.26; }
.section-products .product-image--talo-m1000   { --product-scale: .80; --product-rotate: 0deg; }
.section-products .product-image--talo-14000   { --product-scale: 1.48; }
.section-products .product-image--talo-39000   { --product-scale: 1.40; }
.section-products .product-image--talo-53000   { --product-scale: 1.26; }
.section-products .product-image--talo-43750   { --product-scale: .82; }
.section-products .product-best {
    margin-top: 14px;
}

/* Product cards v24: keep the largest chassis prominent with safe edge spacing. */
.section-products .product-image--talo-43750 {
    --product-scale: 1.12;
}
.section-products .product-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--c-blue);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}
.section-products .product-cta span:last-child {
    font-size: 18px;
    line-height: 1;
    transition: transform 180ms ease;
}
.section-products .product-cta:hover span:last-child,
.section-products .product-cta:focus-visible span:last-child {
    transform: translateX(4px);
}
.section-products .product-cta:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 4px;
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .section-products .product-cta span:last-child {
        transition: none;
        transform: none;
    }
}

/* Landing template v25: align with the current albatron.ai solution template. */
.offroad-page, .offroad-page button, .offroad-page input, .offroad-page select, .offroad-page textarea { font-family: var(--f-sans); }

.container {
    width: calc(100% - 64px);
    max-width: 1580px;
    padding-inline: 0;
}
.section + .section { border-top: 0; }
.section { padding-block: 96px 104px; }
.section-arch { background-color: #f4f6f8 !important; box-shadow: none; }
.section-handle { background: #fff; }
.section-infra { background: #f4f6f8; }
.section-machines { background: #fff; }
.section-products { background: #f4f6f8; }

/* Official header proportions and controls. */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    min-height: 106px;
    background: #e6e7e9;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.header-inner {
    height: 106px;
    gap: 24px;
}
.brand-logo { width: 214px; }
.primary-nav { margin-left: auto; }
.primary-nav ul { gap: 2px; }
.primary-nav a {
    padding: 12px 15px;
    color: #111;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0;
}
.primary-nav a:hover,
.primary-nav a:focus-visible {
    color: #0059aa;
    background: transparent;
}
.primary-nav .caret { display: none; }
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-search {
    display: flex;
    align-items: center;
    width: 182px;
    height: 38px;
    padding: 0 10px 0 14px;
    background: #fff;
    border: 1px solid #c8c9cb;
    border-radius: 999px;
}
.header-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111;
    font-size: 14px;
}
.header-search button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    height: 28px;
    padding: 0;
    color: #0059aa;
}
.btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 178px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: #075aaa;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

/* Fixed-width, 560px solution hero. */
.vhero {
    min-height: 560px;
    padding: 0;
    background: #fff;
    overflow: visible;
}
.vhero > .container {
    width: calc(100% - 76px);
    max-width: 1580px;
}
.vhero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(420px, .88fr) minmax(0, 1.12fr);
    align-items: stretch;
    gap: 0;
    min-height: 560px;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
}
.vhero-content {
    align-self: center;
    max-width: none;
    padding: 50px 48px;
}
.vhero-title {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin-bottom: 18px;
    color: #111;
    font-size: clamp(42px, 3.6vw, 52px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
}
.vhero-title-accent { color: #0874d1; }
.vhero-sub { color: #111; font-size: 18px; font-weight: 700; }
.vhero-
.vhero-media {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: 560px;
}
.vhero-media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: 17%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.84) 32%, transparent 100%);
    pointer-events: none;
}
.vhero-frame { clip-path: none; }
.vhero-img { object-position: 58% 50%; }
.vhero-fragment,
.vhero-dash,
.vhero-notch,
.vhero-scatter { display: none; }
.vhero-cta {
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 4px;
    font-weight: 700;
}

/* Product category tabs. */
.section-products .split-layout { display: block; }
.section-products .split-head {
    position: static;
    max-width: 900px;
    margin: 0 auto 46px;
    text-align: center;
}
.section-products .section-rule { margin-inline: auto; }
.section-products .section-sub,
.section-products .section-
.product-tabs { min-width: 0; }
.product-tablist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 32px;
    border-bottom: 1px solid #ccd7e3;
}
.product-tab {
    position: relative;
    min-height: 64px;
    padding: 14px 22px;
    color: #52617a;
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.product-tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: transparent;
}
.product-tab:hover { color: #0b1f3d; }
.product-tab.is-active:first-child { color: var(--c-blue); }
.product-tab.is-active:first-child::after { background: var(--c-blue); }
.product-tab.is-active:last-child { color: var(--c-teal); }
.product-tab.is-active:last-child::after { background: var(--c-teal); }
.product-tab:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -3px; }
.product-tabpanel[hidden] { display: none !important; }
.section-products .product-tabpanel {
    padding: 34px;
    border: 1px solid #d7e1eb;
    border-radius: 0;
    background: #fff;
}
.section-products .product-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.product-category-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: #075aaa;
    font-size: 16px;
    text-decoration: none;
}
.product-category-link span:last-child { font-size: 21px; transition: transform 180ms ease; }
.product-category-link:hover span:last-child,
.product-category-link:focus-visible span:last-child { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
    .product-tabpanel.is-entering { animation: product-panel-in 220ms ease both; }
}
@keyframes product-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Official light footer. */
.site-footer {
    margin: 0;
    padding: 48px 0 24px;
    background: #f0f7ff;
    color: #111;
}
.footer-inner {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 60px;
}
.footer-logo { display: block; width: 220px; height: auto; }
.footer-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.footer-col-title { margin-bottom: 15px; color: #111; font-size: 17px; font-weight: 700; }
.footer-col a { color: #47566d; font-size: 13px; line-height: 1.5; }
.footer-col a:hover { color: #075aaa; }
.footer-social { margin-top: 24px; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #b9cadc;
    border-radius: 50%;
    color: #075aaa;
}
.footer-bottom {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid #cfdeeb;
    color: #66768c;
    font-size: 12px;
}
.footer-legal a { color: #66768c; }

@media (max-width: 1240px) {
    .primary-nav a { padding-inline: 10px; font-size: 15px; }
    .header-search { width: 150px; }
    .btn-header { min-width: 150px; padding-inline: 18px; font-size: 16px; }
}
@media (max-width: 980px) {
    
    .container,
    .vhero > .container { width: calc(100% - 40px); }
    .site-header,
    .header-inner { min-height: 82px; height: 82px; }
    .brand-logo { width: 180px; }
    .primary-nav,
    .header-actions { display: none; }
    .nav-toggle { display: block; }
    .vhero-inner { grid-template-columns: 1fr; min-height: 0; overflow: visible; }
    .vhero-content { padding: 54px 0 40px; }
    .vhero-media { height: min(62vw, 480px); margin-bottom: 0; }
    .vhero-media::before { display: none; }
    .section-products .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-inner { grid-template-columns: 1fr; gap: 38px; }
    .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .container,
    .vhero > .container { width: calc(100% - 32px); }
    .section { padding-block: 72px 76px; }
    .vhero-title { font-size: 40px; }
    .product-tablist { display: flex; overflow-x: auto; }
    .product-tab { flex: 0 0 82%; font-size: 15px; }
    .section-products .product-tabpanel { padding: 22px; }
    .section-products .product-list { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Landing refinement v26: restore the designed hero and the page's split rhythm. */
.vhero {
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(90deg, #fff 0%, #fff 40%, #edf4fb 100%);
}
.vhero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 0 48%;
    background:
        linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(237,244,251,.12) 38%, rgba(213,229,243,.62) 100%),
        url('../img/hero-agricultural-autonomy-v2-1672.webp') right center / cover no-repeat;
    opacity: .22;
    pointer-events: none;
}
.vhero-inner {
    z-index: 1;
    overflow: visible;
    background: transparent;
}
.vhero-content {
    z-index: 4;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 78%, rgba(255,255,255,0) 100%);
}
.vhero-media {
    z-index: 2;
    overflow: visible;
}
.vhero-frame {
    clip-path: polygon(
        12% 0%, 100% 0%, 100% 100%, 0% 100%,
        0% 79%, 6% 79%, 6% 61%, 0% 61%,
        0% 23%, 12% 23%
    );
}
.vhero-media::before {
    display: block;
    width: 25%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,0) 100%);
}
.vhero-dash { display: block; }
.vhero-dash--a { top: 7%; left: 2%; width: 122px; }
.vhero-dash--b { top: 12%; left: 5%; width: 142px; }
.vhero-notch { display: block; }
.vhero-notch--a { right: 42px; bottom: 44px; width: 38px; height: 38px; }
.vhero-notch--b { right: 10px; bottom: 12px; width: 22px; height: 22px; }
.vhero-body:last-of-type {
    color: #46556d;
    font-weight: 400;
}

.section-products .split-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
.section-products .split-head {
    position: sticky;
    top: 138px;
    max-width: 360px;
    margin: 0;
    text-align: left;
}
.section-products .section-rule { margin-inline: 0; }
.section-products .section-sub,
.section-products .section-
.section-products .product-tablist { margin-top: 0; }
.section-products .product-tablist {
    width: min(100%, 760px);
    border-bottom: 0;
}
.section-products .product-tab {
    border-bottom: 1px solid #ccd7e3;
}

@media (max-width: 1100px) {
    .section-products .split-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .section-products .split-head {
        position: static;
        max-width: 680px;
    }
    .section-products .section-sub,
    .section-products .section-
}
@media (max-width: 980px) {
    .vhero::after { display: none; }
    .vhero-content { background: transparent; }
    .vhero-frame { clip-path: none; }
    .vhero-dash,
    .vhero-notch { display: none; }
}

/* Hero/header correction v28: exact content edge and deliberate pixel accents. */

.site-header,
.header-inner {
    min-height: 96px;
    height: 96px;
}
.vhero {
    background: linear-gradient(90deg, #fff 0%, #fff 44%, #eaf2f8 72%, #dfeaf3 100%);
}
.vhero::after { display: none; }
.vhero > .container {
    width: calc(100% - 64px);
}
.vhero-content {
    padding: 50px 48px 50px 0;
}
.vhero-frame {
    clip-path: polygon(
        10% 0%, 100% 0%, 100% 100%, 0% 100%,
        0% 84%, 5% 84%, 5% 69%, 0% 69%,
        0% 30%, 6% 30%, 6% 16%, 10% 16%
    );
}
.vhero-media::before {
    width: 19%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 38%, rgba(255,255,255,0) 100%);
}
.vhero-notch { display: none; }
.vhero-pixel {
    position: absolute;
    z-index: 5;
    display: block;
    background: #fff;
    pointer-events: none;
}
.vhero-pixel--top-a {
    top: 0;
    left: 0;
    width: 72px;
    height: 48px;
}
.vhero-pixel--top-b {
    top: 48px;
    left: 72px;
    width: 38px;
    height: 32px;
    background: rgba(255,255,255,.82);
}
.vhero-pixel--bottom-a {
    right: 0;
    bottom: 0;
    width: 58px;
    height: 42px;
}
.vhero-pixel--bottom-b {
    right: 58px;
    bottom: 42px;
    width: 38px;
    height: 38px;
}
.vhero-pixel--bottom-c {
    right: 18px;
    bottom: 80px;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,.78);
}
@media (max-width: 980px) {
    
    .site-header,
    .header-inner { min-height: 82px; height: 82px; }
    .vhero-content { padding: 54px 0 40px; }
    .vhero-pixel { display: none; }
}

/* Official header/container metrics v29, measured from albatron.ai. */
.container,
.vhero > .container {
    width: 100%;
    max-width: none;
    padding-right: 5vw;
    padding-left: 5vw;
}
.site-header {
    box-sizing: border-box;
    height: 96px;
    min-height: 96px;
    padding: 16px 0;
}
.header-inner {
    height: 64px;
    min-height: 64px;
}
.brand-logo {
    width: 213px;
    height: 40px;
}
.header-search {
    width: 182px;
    height: 36.6px;
    padding: 2px 10px;
}
.btn-header {
    width: 177px;
    min-width: 177px;
    height: 46px;
    padding: 8px 24px;
}
@media (min-width: 1400px) {
    .container,
    .vhero > .container {
        max-width: 1600px;
        padding-right: 12px;
        padding-left: 12px;
    }
}
@media (min-width: 981px) and (max-width: 1399px) {
    
    .site-header {
        height: 105.6px;
        min-height: 105.6px;
    }
    .header-inner {
        height: 73.6px;
        min-height: 73.6px;
    }
    .btn-header { height: 73.6px; }
}
@media (max-width: 980px) {
    .container,
    .vhero > .container {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
    .site-header {
        height: 82px;
        min-height: 82px;
        padding: 9px 0;
    }
    .header-inner {
        height: 64px;
        min-height: 64px;
    }
}

/* Production refinement v33: one hero system, consistent sections, editorial product selection. */

:root {
    --page-section-space: 96px;
    --page-section-space-mobile: 72px;
    --page-column-head: 360px;
    --page-column-gap: clamp(56px, 5.5vw, 92px);
}

/* Global section rhythm. */
.section,
.section-arch {
    padding-top: var(--page-section-space) !important;
    padding-bottom: var(--page-section-space) !important;
}
.section-arch { background-color: #f4f6f8; }
.section-handle { background: #fff !important; }
.section-infra { background: #f4f6f8 !important; }
.section-machines { background: #fff !important; }
.section-products { background: #f4f6f8 !important; }

.section-handle .split-layout,
.section-infra .split-layout,
.section-machines .split-layout,
.section-products .split-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, var(--page-column-head)) minmax(0, 1fr) !important;
    gap: var(--page-column-gap) !important;
    align-items: start;
}
.section-handle .split-head,
.section-infra .split-head,
.section-machines .split-head,
.section-products .split-head {
    width: 100%;
    max-width: var(--page-column-head) !important;
    margin: 0 !important;
    text-align: left !important;
}
.section-title { max-width: 420px; text-wrap: balance; }
.section-sub,
.section-
.section-sub { font-size: 17px; line-height: 1.65; }
.section-body,
.handle-body,
.infra-item-body,
.machine-desc { font-size: 15.5px; line-height: 1.7; }

/* Single, isolated hero implementation. */
.offroad-hero {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: #fff;
}
.offroad-hero__inner {
    display: grid;
    grid-template-columns: minmax(620px, 44%) minmax(0, 56%);
    min-height: 560px;
}
.offroad-hero__content {
    position: relative;
    z-index: 3;
    align-self: center;
    padding: 48px 48px 48px 5vw;
}
.offroad-hero__title {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin: 0 0 18px;
    color: #111;
    font-size: clamp(46px, 3.2vw, 56px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.03em;
}
.offroad-hero__title-accent { color: #0874d1; }
.offroad-hero__subtitle {
    margin: 0 0 20px;
    color: #111;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
}
.offroad-hero__
.offroad-hero__cta {
    min-height: 52px;
    margin-top: 14px;
    padding: 14px 22px;
    border-radius: 2px;
    font-weight: 700;
}
.offroad-hero__media {
    position: relative;
    min-width: 0;
    height: 560px;
    overflow: hidden;
}
.offroad-hero__media::before {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 20%;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,0) 100%);
}
.offroad-hero__frame {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    clip-path: polygon(7% 0,100% 0,100% 88%,97.5% 88%,97.5% 94%,92% 94%,92% 100%,0 100%,0 78%,3.5% 78%,3.5% 63%,0 63%,0 26%,7% 26%);
}
.offroad-hero__frame picture,
.arch-figure picture,
.machine-media picture,
.product-media picture { display: contents; }
.offroad-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 50%;
}
.offroad-hero__dash {
    position: absolute;
    z-index: 4;
    left: 4.5%;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, rgba(8,116,209,.62), rgba(8,116,209,.12) 78%, transparent);
}
.offroad-hero__dash::after {
    position: absolute;
    top: -3px;
    right: 0;
    width: 7px;
    height: 7px;
    content: '';
    background: rgba(8,116,209,.58);
}
.offroad-hero__dash--one { top: 8%; width: 148px; }
.offroad-hero__dash--two,
.offroad-hero__pixel { display: none; }

/* Responsive raster sources for the two full-section background images.
   This is the sole owner of .section-arch::before's background-image —
   style.css only sets position/size/repeat/opacity for it, so there's
   no cross-file override to guard against and !important isn't needed. */
.section-arch::before {
    background-image:
        linear-gradient(180deg, rgba(226,237,248,.82) 0, rgba(242,247,252,.58) 88px, rgba(255,255,255,.08) 230px),
        image-set(url('../img/architecture-outdoor-background-v3-1774.avif') type('image/avif'), url('../img/architecture-outdoor-background-v3-1774.webp') type('image/webp'));
}
@media (min-width: 1600px) {
    .offroad-hero__content { padding-left: max(12px, calc((100vw - 1600px) / 2 + 12px)); }
}

.sr-only {
    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;
}
@media (min-width: 1400px) and (max-width: 1599px) {
    .container {
        width: 100%;
        max-width: none;
        padding-right: 5vw;
        padding-left: 5vw;
    }
}

/* Product selection: image-led, concise, and less catalogue-like. */
.section-products .product-tabs { min-width: 0; }
.section-products .product-tablist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0 0 34px;
    border-bottom: 1px solid #cbd7e4;
}
.section-products .product-tab {
    min-height: 62px;
    padding: 14px 18px;
    font-size: 17px;
    text-align: left;
}
.section-products .product-group {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.section-products .product-group-head {
    max-width: 820px;
    margin-bottom: 28px;
    padding: 0;
}
.section-products .product-group-mark { width: 4px; min-height: 68px; }
.section-products .product-group-kicker { font-size: 11px; }
.section-products .product-group-title { font-size: 25px; line-height: 1.25; }
.section-products .product-group-intro { max-width: 760px; font-size: 16px; line-height: 1.62; }
.section-products .product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 22px;
}
.section-products .product-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid #dce5ee;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(12,38,70,.04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.section-products .product-card:hover,
.section-products .product-card:focus-within {
    transform: translateY(-4px);
    border-color: #b8d2ea;
    box-shadow: 0 18px 42px rgba(12,38,70,.10);
}
.section-products .product-media {
    height: 226px;
    flex-basis: 226px;
    padding: 0;
    background: linear-gradient(180deg, #fff 0%, #f5f8fb 100%);
}
.section-products .product-media img {
    inset: 22px;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
}
/* Normalize inherited per-product transforms so every render stays inside the
   editorial image stage while preserving believable relative product scale. */
.section-products .product-image--talo-a1000   { --product-scale: 1.05; }
.section-products .product-image--talo-n1000   { --product-scale: .95; }
.section-products .product-image--talo-b1000   { --product-scale: .95; }
.section-products .product-image--talo-f1200gu { --product-scale: 1.02; }
.section-products .product-image--talo-m1000   { --product-scale: .90; --product-rotate: 0deg; }
.section-products .product-image--talo-14000   { --product-scale: 1.03; }
.section-products .product-image--talo-39000   { --product-scale: 1; }
.section-products .product-image--talo-53000   { --product-scale: .98; }
.section-products .product-image--talo-43750   { --product-scale: 1.08; }
.section-products .product-media.is-error img { display: none; }
.section-products .product-media-placeholder {
    display: none;
    align-items: center;
    justify-content: center;
    color: #708097;
    font-size: 13px;
}
.section-products .product-media.is-error .product-media-placeholder { display: flex; }
.section-products .product-
.section-products .product-sku { margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; }
.section-products .product-name { min-height: 48px; margin-bottom: 10px; font-size: 18px; line-height: 1.35; }
.section-products .product-desc {
    display: -webkit-box;
    min-height: 74px;
    margin-bottom: 14px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.62;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.section-products .product-best {
    min-height: 68px;
    margin-top: 0;
    padding-top: 13px;
    border-top: 1px solid #e1e8ef;
    background: transparent;
}
.section-products .product-best-label { margin-bottom: 4px; font-size: 11px; }
.section-products .product-best-
.section-products .product-cta { margin-top: auto; padding-top: 18px; font-size: 15px; }
.section-products .product-category-link { margin-top: 30px; font-size: 15px; }

/* Official-style closing section. */
.ending-section {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    color: #fff;
    background-image: linear-gradient(90deg,rgba(2,14,35,.98) 0%,rgba(2,14,35,.90) 44%,rgba(2,14,35,.48) 76%,rgba(2,14,35,.28) 100%),image-set(url('../img/ending-autonomy-network-bg-1717.avif') type('image/avif'),url('../img/ending-autonomy-network-bg-1717.webp') type('image/webp'));
    background-position: center;
    background-size: cover;
}
.ending-layout {
    display: grid;
    grid-template-columns: minmax(0,720px) 276px;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    min-height: 430px;
    padding-top: 70px;
    padding-bottom: 70px;
}
.ending-copy { max-width: 720px; margin: 0; }
.ending-copy h2 { max-width: 620px; margin: 0; color: #fff; font-size: clamp(42px,4vw,56px); line-height: 1.12; font-weight: 500; letter-spacing: -.025em; }
.ending-copy > p:last-child { max-width: 700px; margin: 24px 0 0; color: rgba(232,244,255,.86); font-size: 17px; line-height: 1.65; }
.ending-bar-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 276px;
    min-height: 62px;
    padding: 0 28px;
    color: #fff;
    background: #0874d1;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
}
.ending-bar-link span:last-child { font-size: 20px; }
.ending-bar-link:hover,
.ending-bar-link:focus-visible { color: #061a36; background: #fff; }

/* Interaction and accessibility. */
.offroad-hero__cta:focus-visible,
.product-tab:focus-visible,
.product-cta:focus-visible,
.product-category-link:focus-visible,
.ending-bar-link:focus-visible {
    outline: 2px solid #0874d1;
    outline-offset: 4px;
}

@media (max-width: 1180px) {
    .section-products .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .section-handle .split-layout,
    .section-infra .split-layout,
    .section-machines .split-layout,
    .section-products .split-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
    .section-handle .split-head,
    .section-infra .split-head,
    .section-machines .split-head,
    .section-products .split-head { position: static !important; max-width: 680px !important; }
    .section-sub,
    .section-
    .offroad-hero__inner { grid-template-columns: 1fr; min-height: 0; }
    .offroad-hero__content { padding: 58px 5vw 44px; }
    .offroad-hero__media { height: min(56vw, 480px); }
    .offroad-hero__frame { clip-path: none; }
    .offroad-hero__media::before,
    .offroad-hero__dash,
    .offroad-hero__pixel { display: none; }
}
@media (min-width: 981px) and (max-width: 1180px) {
    .header-search { display: none !important; }
    .brand { flex: 0 0 auto; }
    .brand-logo { width: 160px !important; height: auto; }
}
@media (max-width: 980px) {
    :root { --page-section-space: 80px; }
    .offroad-hero__content { padding: 54px 20px 42px; }
    .offroad-hero__media { height: min(62vw,480px); }
    .offroad-hero__frame { clip-path: none; }
    .offroad-hero__media::before,
    .offroad-hero__dash,
    .offroad-hero__pixel { display: none; }
    .ending-layout { grid-template-columns: 1fr; gap: 34px; }
    .ending-bar-link { width: min(100%,276px); }
    .section-arch::before {
        background-image:
            linear-gradient(180deg, rgba(226,237,248,.82) 0, rgba(242,247,252,.58) 88px, rgba(255,255,255,.08) 230px),
            image-set(url('../img/architecture-outdoor-background-v3-960.avif') type('image/avif'), url('../img/architecture-outdoor-background-v3-960.webp') type('image/webp'));
    }
    .ending-section {
        background-image: linear-gradient(90deg,rgba(2,14,35,.98) 0%,rgba(2,14,35,.90) 44%,rgba(2,14,35,.48) 76%,rgba(2,14,35,.28) 100%),image-set(url('../img/ending-autonomy-network-bg-960.avif') type('image/avif'),url('../img/ending-autonomy-network-bg-960.webp') type('image/webp'));
    }
}
@media (max-width: 680px) {
    :root { --page-section-space: var(--page-section-space-mobile); }
    .offroad-hero__title { font-size: 40px; }
    .offroad-hero__
    .offroad-hero__media { height: 320px; }
    .section-products .product-tablist {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }
    .section-products .product-tab {
        flex: none;
        width: 100%;
        min-height: 52px;
        text-align: center;
    }
    .section-products .product-list { grid-template-columns: 1fr; }
    .section-products .product-card { min-height: 500px; }
    .section-products .product-media { height: 210px; flex-basis: 210px; }
    .section-products .product-image--talo-a1000,
    .section-products .product-image--talo-f1200gu { --product-scale: .96; }
    .section-products .product-image--talo-n1000,
    .section-products .product-image--talo-b1000 { --product-scale: .92; }
    .section-products .product-image--talo-m1000 { --product-scale: .88; }
    .section-products .product-image--talo-14000,
    .section-products .product-image--talo-39000,
    .section-products .product-image--talo-53000 { --product-scale: .95; }
    .section-products .product-image--talo-43750 { --product-scale: 1; }
    .ending-copy h2 { font-size: 38px; }
    .ending-copy > p:last-child { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .section-products .product-card,
    .ending-bar-link { transition: none; transform: none; }
}

.offroad-page {
    font-family: var(--f-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-ink);
    background: var(--c-bg);
    overflow: hidden;
}
.offroad-page .site-header,
.offroad-page .site-footer,
.offroad-page .mobile-nav {
    display: none !important;
}

/* Codex integration fixes: sticky headings and card content spacing. */
.offroad-page {
    overflow: visible;
}
.offroad-page .section-handle,
.offroad-page .section-infra,
.offroad-page .section-machines,
.offroad-page .section-products {
    overflow: visible;
}
.offroad-page .section-handle .split-head,
.offroad-page .section-infra .split-head,
.offroad-page .section-machines .split-head,
.offroad-page .section-products .split-head {
    position: sticky;
    top: 120px;
    align-self: start;
    z-index: 2;
}
.offroad-page .section-machines .machine-card {
    overflow: hidden;
}
.offroad-page .section-machines .machine-body {
    padding: 22px 24px 24px;
}
.offroad-page .section-machines .machine-desc,
.offroad-page .section-machines .machine-systems {
    padding-right: 0;
    padding-left: 0;
}
.offroad-page .section-products .product-card {
    padding: 0;
    overflow: hidden;
}
.offroad-page .section-products .product-body {
    padding: 24px 28px 26px;
}
.offroad-page .section-products .product-sku,
.offroad-page .section-products .product-name,
.offroad-page .section-products .product-desc,
.offroad-page .section-products .product-best,
.offroad-page .section-products .product-cta {
    margin-left: 0;
    margin-right: 0;
}
@media (max-width: 1100px) {
    .offroad-page .section-handle .split-head,
    .offroad-page .section-infra .split-head,
    .offroad-page .section-machines .split-head,
    .offroad-page .section-products .split-head {
        position: static;
    }
}
@media (max-width: 680px) {
    .offroad-page .section-machines .machine-body,
    .offroad-page .section-products .product-body {
        padding: 20px;
    }
}