/*
 * LENA MOTORS - base stylesheet.
 *
 * No build step: this file is written by hand and served as-is. It carries
 * the design tokens (custom properties) and the utility classes every
 * section partial is expected to reuse - see the component sections below
 * for header/hero/ticker, and the "Shared utilities" block for what later
 * tasks (products, partners, references, contact, footer) should build on
 * instead of inventing parallel classes.
 */

/* ---------------------------------------------------------------------- */
/* Fonts (self-hosted, no Google Fonts CDN)                                */
/* ---------------------------------------------------------------------- */

/*
 * Baloo 2, not Fredoka: Fredoka's cmap (verified with fontTools) contains
 * neither the Czech diacritics (č ř ě ů ď ť ň) nor most of the Polish ones
 * (ą ć ę ś ż ź) - it cannot render the language the site is written in.
 * Baloo 2 is the closest visual match (rounded, playful, heavy) with full
 * coverage of both - see task-7-report for the glyph-by-glyph check.
 *
 * Baloo 2 and Nunito Sans are shipped by Google as variable fonts: every
 * weight instance in the family's CSS resolves to the same .woff2 file, so
 * one file per script subset covers the whole weight range (see
 * task-7-report for how this was verified). We still split by unicode-range
 * (Latin vs. Latin Extended-A) the way Google's own CSS does - the plain
 * "latin" file alone does NOT contain the diacritics (confirmed with
 * fontTools), so this split is load-bearing, not cosmetic, and both files
 * are required.
 */
@font-face {
    font-family: "Baloo 2";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/baloo2-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Baloo 2";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
    /* Latin Extended-A: Czech (ě š č ř ž ý á í é ů ď ť ň) and Polish (ą ć ę ł ń ó ś ź ż). */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------- */
/* Design tokens                                                          */
/* ---------------------------------------------------------------------- */

:root {
    --navy: #10304F;
    --navy-deep: #0A2340;
    --blue: #6B9BD6;
    --link: #2F6BB5;
    --link-hover: #1E4E8A;
    --yellow: #FFC94D;
    --yellow-light: #FFD873;
    --yellow-shadow: #C79212;
    --ink: #16232E;
    --muted: #5D7183;
    --subtle: #8496A5;
    --on-navy: #B9CEE4;
    --on-navy-muted: #8FAAC6;
    --surface: #FFFFFF;
    --surface-tint: #F1F6FC;
    --surface-blue: #EDF3FA;
    --line: #E7EDF3;
    --line-strong: #E4E9EE;
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --radius-xl: 40px;
    --radius-section: 56px;
    --radius-pill: 999px;
    --container: 1200px;
    --gutter: clamp(20px, 4vw, 24px);
    --font-display: "Baloo 2", system-ui, sans-serif;
    --font-body: "Nunito Sans", system-ui, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Supplementary tokens (not in the design's :root, needed for layout plumbing). */
    --header-height: 78px;
}

/* ---------------------------------------------------------------------- */
/* Reset & base                                                            */
/* ---------------------------------------------------------------------- */

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

html {
    /* The ticker and hero decorations intentionally bleed past the viewport
       edge; hide the resulting horizontal scroll without breaking sticky
       positioning (which setting overflow on <body> can do). */
    overflow-x: hidden;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

button {
    font: inherit;
    color: inherit;
}

/* --link, not --blue: the ring is a non-text UI indicator and needs 3:1
   against the page, and --blue only reaches 2.88:1 on white. */
:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

/*
 * Anchor targets must clear the sticky header (78px) plus breathing room,
 * otherwise a deep link (e.g. from YouTube, or the "O nás" nav item) parks
 * the target right under the fixed header. #o-nas is a <div>, not a
 * <section>, so it is listed explicitly alongside the two selectors named
 * in the brief.
 */
section[id],
[id^="produkt-"],
#o-nas {
    scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------- */
/* Shared utilities - reuse these in Tasks 8-9, do not invent parallel ones */
/* ---------------------------------------------------------------------- */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Plain white/on-body section: vertical rhythm only, no rounding, no tint. */
.section {
    padding: 96px 0;
}

/* Rounded, inset, tinted-background section (e.g. products). */
.section--tint {
    position: relative;
    overflow: hidden;
    background: var(--surface-tint);
    border-radius: var(--radius-section);
    margin: 0 24px;
    padding: 92px 0 100px;
}

/* Rounded, inset, navy section (e.g. references). Headings inside default
   to white since every navy section in the design uses a white heading. */
.section--navy {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--on-navy);
    border-radius: var(--radius-section);
    margin: 0 24px;
    padding: 92px 0 96px;
}

.section--navy .h1,
.section--navy .h2,
.section--navy .h3 {
    color: var(--surface);
}

/* Headings: Baloo 2 italic with tight tracking, per the brief. Only the
   sizes actually needed by this task (h1) are tuned in detail; h2/h3 carry
   sensible representative defaults (the most common size for each tag
   across the design - 50px / 22px) and are expected to be overridden with a
   context class (e.g. `.reasons__title`) where a section needs a different
   size, the same way `.hero__title` overrides `.h1` below. */
.h1, .h2, .h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--navy);
}

.h1 {
    font-size: clamp(2.75rem, 2rem + 3vw, 4.625rem);
    line-height: 0.98;
}

.h2 {
    font-size: clamp(2rem, 1.6rem + 2vw, 3.125rem);
    line-height: 1.02;
}

.h3 {
    font-size: 1.375rem;
    line-height: 1.2;
}

/* Small pill badge with an icon slot, e.g. the hero eyebrow. Colour is the
   default (translucent yellow-on-navy); later sections can override
   background/color per instance. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 8px 16px 8px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 201, 77, 0.14);
    color: var(--yellow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}

.chip__icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chip__icon::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--navy);
}

/* Solid section-label pill (e.g. "Naše autíčka", "Reference", "Kontakt").
   Default is navy-on-white; use `.eyebrow--on-navy` on a navy section. */
.eyebrow {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--surface);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    margin-bottom: 18px;
}

.eyebrow--on-navy {
    background: var(--yellow);
    color: var(--navy);
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    padding: 18px 32px;
    cursor: pointer;
    transition: transform 140ms var(--ease), box-shadow 140ms var(--ease),
        background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}

.button--primary {
    background: var(--yellow);
    color: var(--navy);
    box-shadow: 0 12px 0 var(--yellow-shadow);
}

.button--primary:hover,
.button--primary:focus-visible {
    background: var(--yellow-light);
    color: var(--navy);
    transform: translateY(4px);
    box-shadow: 0 8px 0 var(--yellow-shadow);
}

.button--ghost {
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 16px;
    padding: 18px 28px;
    color: var(--surface);
    background: transparent;
    border: 2px solid rgba(185, 206, 228, 0.4);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    color: var(--navy);
    background: var(--surface);
    border-color: var(--surface);
}

/* Skip link - offscreen until keyboard focus, so it does not intrude
   visually but lets a keyboard user jump past the header/nav straight to
   <main>. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: 100;
    padding: 12px 20px;
    background: var(--navy);
    color: var(--surface);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* Reachable by a screen reader, invisible on screen. Used by the live region
   that announces a product swap - clip-path rather than display:none, which
   would take the element out of the accessibility tree entirely. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 3px solid var(--navy);
}

.site-header__inner {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* The wordmark is the client's artwork, traced from Lena_motors-02.eps (kept in
   docs/podklady/logo/). It ships as inline SVG rather than an <img> because the
   header needs it in --blue and the footer in white: one shape, filled with
   currentColor, instead of two colour variants that can drift apart.

   --blue is the artwork's own colour: its CMYK 59/25/2/0 converted through the
   Coated FOGRA39 profile embedded in the client's JPEG lands on #70A6D8, which
   is what the approved design already uses. */
.logo {
    display: block;
    flex-shrink: 0;
    color: var(--blue);
}

/* Height drives the size; the viewBox keeps the 2.79:1 ratio. 46px puts the
   "LENA" row at the 32px of the design, because "MOTORS" and the gap take up
   the remaining third of the artwork's height. */
.logo__mark {
    display: block;
    height: 46px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 15px;
    font-weight: 700;
}

.site-nav a {
    color: var(--ink);
    padding: 6px 2px;
    border-bottom: 3px solid transparent;
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--link);
    border-bottom-color: var(--yellow);
}

.lang-switch {
    position: relative;
}

.lang-switch summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 15px;
    border: 2px solid var(--navy);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 800;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}

.lang-switch summary::-webkit-details-marker {
    display: none;
}

.lang-switch summary:hover,
.lang-switch[open] summary {
    background: var(--yellow);
    border-color: var(--yellow);
}

.lang-switch__caret {
    font-size: 10px;
}

.lang-switch__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 150px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: 0 18px 40px rgba(16, 48, 79, 0.14);
}

.lang-switch__menu a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible {
    background: var(--surface-tint);
    color: var(--link);
}

/* Small decorative flags for the language switcher - CSS only, no images. */
.flag {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    flex: none;
}

.flag--cs {
    background: linear-gradient(to bottom, #fff 0 50%, #D7141A 50% 100%);
}

.flag--cs::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #11457E;
}

.flag--pl {
    background: linear-gradient(to bottom, #fff 0 50%, #DC143C 50% 100%);
}

/* Mobile nav disclosure - a <details> exactly like .lang-switch above, so it
   works without JS. The <nav> inside shares the .site-nav class, so at
   >900px it renders as the same plain horizontal row .site-nav always was
   (forced open regardless of the "open" attribute); below 900px it becomes
   a dropdown panel anchored under the sticky header, see the Responsive
   section below for that breakpoint-specific layout. */
.nav-toggle summary {
    display: none;
}

@media (min-width: 901px) {
    .nav-toggle__menu {
        display: flex;
    }

    /* Every current engine hides a closed <details>'s contents through the
       ::details-content pseudo-element (content-visibility: hidden), which a
       display rule on a descendant cannot override, not even with
       !important. This is the rule that actually makes the desktop nav
       render and be clickable; the two media queries never overlap, so it
       has nothing to fight with below 900px. */
    .nav-toggle::details-content {
        content-visibility: visible;
        block-size: auto;
    }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    padding: 0 0 120px;
    color: var(--surface);
}

.hero__decor {
    position: absolute;
    pointer-events: none;
}

.hero__decor--circle-blue {
    right: -220px;
    top: -200px;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, rgba(107, 155, 214, 0.6), rgba(107, 155, 214, 0.04) 70%);
}

.hero__decor--circle-yellow {
    left: -140px;
    top: 180px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 201, 77, 0.10);
}

.hero__decor--stripes {
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 3px, transparent 3px 46px);
}

.hero__decor--dots {
    right: 0;
    top: 0;
    width: 190px;
    height: 190px;
    opacity: 0.10;
    background-image: conic-gradient(#FFFFFF 90deg, transparent 90deg 180deg, #FFFFFF 180deg 270deg, transparent 270deg);
    background-size: 24px 24px;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 64px;
    align-items: center;
    padding-top: 86px;
}

.hero__title {
    color: var(--surface);
    margin: 0 0 24px;
    text-wrap: balance;
}

.hero__highlight {
    position: relative;
    display: inline-block;
    color: var(--yellow);
}

.hero__highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(107, 155, 214, 0.9);
    transform: rotate(-1deg);
    display: block;
}

.hero__lead {
    font-size: 20px;
    line-height: 1.6;
    color: var(--on-navy);
    margin: 0 0 36px;
    max-width: 500px;
    text-wrap: pretty;
}

.hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.hero__media {
    position: relative;
}

.hero__media::before {
    content: "";
    position: absolute;
    inset: -30px -20px -20px -30px;
    background: rgba(107, 155, 214, 0.2);
    border-radius: 52px;
    transform: rotate(-3deg);
}

.hero__badge {
    position: absolute;
    z-index: 3;
    right: -26px;
    top: -30px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.hero__badge-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}

.hero__badge-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.hero__video {
    position: relative;
    height: 420px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--navy-deep);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.4);
    border: 4px solid rgba(255, 255, 255, 0.1);
}

.hero__video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 37, 64, 0.5), rgba(11, 37, 64, 0) 55%);
    pointer-events: none;
}

.hero__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88px;
    height: 88px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--yellow);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 140ms var(--ease);
}

.hero__play:hover,
.hero__play:focus-visible {
    background: var(--yellow-light);
}

.hero__play-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 26px solid var(--navy);
}

.hero__video-label {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: rgba(11, 37, 64, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--surface);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
}

.hero__video-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
}

.hero__timeline-wrap {
    position: relative;
    margin-top: 80px;
}

.hero__timeline {
    position: relative;
    background: var(--navy-deep);
    border-radius: 28px;
    padding: 34px 34px 30px;
    border: 2px solid rgba(157, 192, 230, 0.14);
}

.hero__timeline-line {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 52px;
    height: 3px;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.45) 0 14px, transparent 14px 28px);
}

.hero__timeline-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hero__milestone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.hero__milestone-dot {
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--yellow);
    border: 4px solid var(--navy-deep);
    box-shadow: 0 0 0 4px rgba(255, 201, 77, 0.28);
}

.hero__milestone-year {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--surface);
    margin-bottom: 8px;
}

.hero__milestone-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-navy-muted);
    max-width: 210px;
}

/* ---------------------------------------------------------------------- */
/* Ticker                                                                  */
/* ---------------------------------------------------------------------- */

/*
 * .ticker itself intentionally bleeds past the viewport (width:112%, a
 * negative left margin) to read as a rotated strip with no visible seam.
 * html{overflow-x:hidden} hides that visually, but does NOT stop
 * document.documentElement.scrollWidth from reporting the bled-out width -
 * scrollWidth on the root element reflects the scrollable overflow region
 * regardless of overflow-x set on that same root element. A normal
 * descendant with overflow:hidden does not have that exception, so this
 * wrapper - not <html> - is what actually keeps the page's scrollWidth from
 * exceeding the viewport.
 *
 * The vertical "pull up over the hero" offset lives here, not on .ticker:
 * overflow:hidden gives .ticker-clip its own block-formatting context, which
 * blocks margin collapsing, so a negative top margin on .ticker itself would
 * pull it up and out of .ticker-clip's own box - clipping most of it away
 * instead of overlapping the hero.
 */
.ticker-clip {
    position: relative;
    z-index: 5;
    overflow: hidden;
    margin-top: -42px;
}

.ticker {
    width: 112%;
    margin: 0 0 0 -6%;
    padding: 15px 0;
    overflow: hidden;
    background: var(--blue);
    transform: rotate(-1.2deg);
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 26s linear infinite;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.ticker__group {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    color: var(--surface);
    white-space: nowrap;
}

.ticker__item {
    display: flex;
    align-items: center;
    gap: 34px;
}

.ticker__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }

    /* Stopping the marquee but leaving every card and button jumping on hover
       only honours half the request. The colour and shadow feedback stays -
       it is the movement that is being opted out of. The thumbnail rotations
       are static decoration, not motion, so they are left alone. */
    .reason-card:hover,
    .shop:hover,
    .shop:focus-visible,
    .partner:hover,
    .partner:focus-visible,
    .button--primary:hover,
    .button--primary:focus-visible {
        transform: none;
    }

    .thumb:hover:not(.thumb--active) {
        transform: rotate(0deg);
    }

    * {
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Reasons ("Proč LENA")                                                    */
/* ---------------------------------------------------------------------- */

.reasons__intro {
    max-width: 660px;
    margin: 0 auto 56px;
    text-align: center;
}

.reasons__title {
    margin: 0 0 16px;
}

.reasons__lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
}

.reasons__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.reason-card {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px 34px;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.reason-card:hover {
    transform: translateY(-6px);
    border-color: #C9D9EA;
    box-shadow: 0 18px 40px rgba(16, 48, 79, 0.09);
}

.reason-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 18px;
    transform: rotate(-6deg);
    background: var(--surface-blue);
    color: var(--link);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
}

/* The shared .h3 utility is italic with tight tracking (matches the hero
   and product-detail titles), but the design's reason-card titles are
   upright with normal letter-spacing - override both instead of inheriting
   a look this card does not have. */
.reason-card__title {
    margin: 0 0 10px;
    font-style: normal;
    letter-spacing: normal;
}

.reason-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    /* One-off body colour from the design, distinct from the --muted token
       used everywhere else for lead/paragraph text. */
    color: #3F5566;
}

/* ---------------------------------------------------------------------- */
/* Products ("Vyber si svůj model")                                        */
/* ---------------------------------------------------------------------- */

.products__decor {
    position: absolute;
    pointer-events: none;
}

.products__decor--circle-1 {
    right: -150px;
    top: 60px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(107, 155, 214, 0.16);
}

.products__decor--circle-2 {
    left: -100px;
    bottom: -130px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(107, 155, 214, 0.10);
}

.products__decor--dots {
    left: 0;
    top: 0;
    width: 160px;
    height: 160px;
    opacity: 0.05;
    background-image: conic-gradient(var(--navy) 90deg, transparent 90deg 180deg, var(--navy) 180deg 270deg, transparent 270deg);
    background-size: 22px 22px;
}

.products__intro {
    /* Load-bearing, not incidental: this stacking context (plus .products__thumbs'
       and .detail's own below) is what keeps the section's absolutely-positioned
       .products__decor circles/dots from painting over the content - .container
       has no position of its own. Do not remove as cleanup. */
    position: relative;
    max-width: 680px;
    margin: 0 auto 46px;
    text-align: center;
}

/* .chip's default look (translucent yellow-on-navy, asymmetric padding for
   its icon slot) is tuned for the hero eyebrow. This section's eyebrow is a
   solid navy pill with no icon slot, so the modifier overrides padding,
   colour, tilt and spacing rather than the template inventing a whole
   second pill component. */
.chip--navy {
    margin-bottom: 18px;
    padding: 8px 18px;
    background: var(--navy);
    color: var(--surface);
    transform: rotate(-2deg);
}

.products__thumbs {
    /* Load-bearing, see .products__intro above - keeps this grid painting above
       the section's decorative circles/dots. */
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 38px;
    padding: 6px 0;
}

.thumb {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    padding: 12px;
    border-radius: 26px;
    background: var(--surface);
    border: 2px solid var(--line);
    box-shadow: 0 4px 14px rgba(16, 48, 79, 0.06);
    transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
    font-family: inherit;
    cursor: pointer;
}

.thumb img {
    grid-column: 1 / -1;
    width: 100%;
    height: 98px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: var(--surface-blue);
    object-fit: cover;
}

.thumb__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--navy);
}

.thumb__dot {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* The brief sets --dot to the product's own accent colour unconditionally
       (not a binary active/inactive indicator as in the design's JS mock),
       so every thumbnail always shows that model's colour. */
    background: var(--dot);
}

/* Design's per-thumb tilt sequence (TILTS in the source markup), repeated
   every 5 columns so it stays correct if a future category needs more than
   one row of thumbnails. */
.thumb:nth-child(5n+1) { transform: rotate(-2deg); }
.thumb:nth-child(5n+2) { transform: rotate(1.5deg); }
.thumb:nth-child(5n+3) { transform: rotate(-1deg); }
.thumb:nth-child(5n+4) { transform: rotate(2deg); }
.thumb:nth-child(5n+5) { transform: rotate(-1.5deg); }

.thumb:hover:not(.thumb--active) {
    transform: translateY(-6px) rotate(0deg);
    border-color: var(--blue);
}

/* Specificity note: :nth-child() carries the same weight as a class, so
   ".thumb:nth-child(5n+n)" above is (0,2,0) - a single ".thumb--active"
   class would be (0,1,0) and lose regardless of source order. Doubling the
   class here (.thumb.thumb--active) matches that specificity so the later
   source position actually wins. */
.thumb.thumb--active {
    transform: translateY(-8px) rotate(0deg);
    border-color: var(--blue);
    box-shadow: 0 16px 32px rgba(107, 155, 214, 0.28);
}

/* ---------------------------------------------------------------------- */
/* Product detail panel                                                    */
/* ---------------------------------------------------------------------- */

.detail {
    /* Load-bearing, see .products__intro above - keeps this white panel painting
       above the section's decorative circles/dots. */
    position: relative;
    display: grid;
    grid-template-columns: 470px 1fr;
    gap: 46px;
    padding: 34px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 56px rgba(16, 48, 79, 0.10);
}

.detail__media {
    position: relative;
    height: 430px;
    border-radius: 28px;
    overflow: hidden;
    background: var(--surface-blue);
    border: 2px solid #E3EBF4;
}

.detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail__body {
    display: flex;
    flex-direction: column;
    padding: 6px 6px 6px 0;
}

/* The name chip reuses the plain .chip class straight from the markup, but
   this context's colours (light-blue pill, no icon, not uppercase) differ
   from the hero eyebrow default - scoped here instead of adding a second
   modifier class for what is a single-context colour swap. */
.detail__body .chip {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 8px 18px;
    background: var(--surface-blue);
    color: var(--link);
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
}

.detail__title {
    margin: 0 0 16px;
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.detail__text {
    max-width: 560px;
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.features__item {
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: #F3F7FB;
    border: 2px solid #DCE7F2;
    font-size: 14px;
    font-weight: 700;
    color: var(--link);
}

.shops {
    margin-top: auto;
    padding-top: 26px;
    border-top: 2px dashed var(--line-strong);
}

/* --muted, not --subtle: at 12px this is body text for WCAG, which wants
   4.5:1 - --subtle only reaches 3.05:1 on white. */
.shops__label {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.shops__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.shop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--line-strong);
    background: var(--surface);
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    transition: all 150ms var(--ease);
}

.shop:hover,
.shop:focus-visible {
    border-color: var(--blue);
    background: #F5F9FD;
    color: var(--link);
    transform: translateY(-3px);
}

/* ---------------------------------------------------------------------- */
/* Partners overview ("Naše autíčka koupíte tady")                         */
/* ---------------------------------------------------------------------- */

.partners__intro {
    max-width: 620px;
    margin: 0 auto 44px;
    text-align: center;
}

.partners__title {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.05;
}

.partners__lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Partner logotypes do not exist yet (see partners.latte) - this renders the
   partner's name as text, the same placeholder look as the "Kde koupit"
   .shop links in product-detail.latte. */
.partner {
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 2px solid var(--line);
    background: var(--surface);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--subtle);
    text-align: center;
    transition: all 200ms var(--ease);
}

.partner:hover,
.partner:focus-visible {
    border-color: var(--blue);
    color: var(--link);
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(16, 48, 79, 0.10);
}

/* ---------------------------------------------------------------------- */
/* Reference ("Jsme tu pro malé i velké fanoušky aut")                     */
/* ---------------------------------------------------------------------- */

.reference__decor {
    position: absolute;
    pointer-events: none;
}

.reference__decor--stripes {
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 3px, transparent 3px 46px);
}

.reference__decor--circle {
    right: -120px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(107, 155, 214, 0.16);
}

.reference__intro {
    /* Load-bearing, same reason as .products__intro/.products__thumbs/.detail
       above - keeps this content painting above .reference__decor's absolutely
       positioned stripes/circle instead of under them. Do not remove as cleanup. */
    position: relative;
    max-width: 640px;
    margin: 0 auto 52px;
    text-align: center;
}

/* .eyebrow--on-navy's default tilt is -2deg; this is the one section in the
   design that tilts its eyebrow the other way. */
.reference__eyebrow {
    transform: rotate(1.5deg);
}

.reference__title {
    margin: 0;
    font-size: 48px;
    line-height: 1.03;
}

.reference__stats {
    /* Load-bearing, see .reference__intro above. */
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 58px;
}

.stat-card {
    border-radius: var(--radius-lg);
    padding: 38px 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.07);
    color: var(--surface);
    transform: rotate(-1.2deg);
}

/* The middle stat card is the design's one yellow card. */
.stat-card:nth-child(2) {
    background: var(--yellow);
    color: var(--navy);
    transform: rotate(0.8deg);
}

.stat-card:nth-child(3) {
    transform: rotate(-0.8deg);
}

.stat-card__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 62px;
    line-height: 1;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.stat-card__label {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    opacity: 0.82;
}

.reference__media {
    /* Load-bearing, see .reference__intro above. */
    position: relative;
    text-align: center;
}

.reference__media-label {
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-navy-muted);
}

.reference__media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.media-tag {
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(157, 192, 230, 0.22);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--on-navy);
}

/* ---------------------------------------------------------------------- */
/* Contact ("Ozvěte se nám")                                                */
/* ---------------------------------------------------------------------- */

.contact__inner {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 80px;
    align-items: center;
}

.contact__title {
    margin: 0 0 18px;
    font-size: 48px;
    line-height: 1.03;
}

.contact__lead {
    margin: 0 0 36px;
    max-width: 440px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
}

.contact__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 470px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    border: 2px solid var(--line);
    background: var(--surface);
    transition: all 160ms var(--ease);
}

.contact-card:hover {
    border-color: var(--blue);
    box-shadow: 0 14px 32px rgba(16, 48, 79, 0.09);
}

.contact-card__mark {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-blue);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--link);
    transform: rotate(-5deg);
}

/* Same contrast reason as .shops__label above. */
.contact-card__label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* .contact-card__value is used on both the plain <div> (placeholder values)
   and the <a> (real phone/e-mail) rendered by contact.latte's tel:/mailto:
   check, so both need the same look. */
.contact-card__value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

a.contact-card__value:hover,
a.contact-card__value:focus-visible {
    color: var(--link);
}

/* Same "rotated colour block behind a positioned card" idiom as .hero__media
   / .hero__media::before - .contact__photo itself is position:relative (like
   .hero__video), so it paints above the ::before backdrop by DOM order. */
.contact__photo-wrap {
    position: relative;
    overflow: hidden;
}

.contact__photo-wrap::before {
    content: "";
    position: absolute;
    inset: -24px -18px -18px -24px;
    background: #FFF6EC;
    border-radius: 48px;
    transform: rotate(3deg);
}

.contact__photo {
    position: relative;
    height: 470px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #F1F0EC;
    box-shadow: 0 24px 56px rgba(16, 48, 79, 0.12);
}

.contact__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    border-radius: 56px 56px 0 0;
    padding: 54px 0;
}

.site-footer__decor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 26px;
    opacity: 0.12;
    background-image: conic-gradient(#FFFFFF 90deg, transparent 90deg 180deg, #FFFFFF 180deg 270deg, transparent 270deg);
    background-size: 26px 26px;
    pointer-events: none;
}

.site-footer__inner {
    /* Same stacking reason as .reference__intro above - keeps the logo/actions
       painting above .site-footer__decor's absolutely positioned strip. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* The white-on-blue variant in the client's artwork is the same shape in plain
   white, so the footer only has to change the inherited colour. */
.footer__logo {
    color: var(--surface);
}

.footer__logo .logo__mark {
    height: 44px;
}

.site-footer__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Social icons: no icon set exists, so each link shows the first letter of
   its label (same "initial in a badge" idiom as .contact-card__mark), not a
   literal two-letter abbreviation like the design's "fb"/"ig" placeholders. */
.social {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(157, 192, 230, 0.3);
    font-size: 13px;
    font-weight: 800;
    color: var(--on-navy);
}

.social:hover,
.social:focus-visible {
    border-color: var(--yellow);
    color: var(--yellow);
}

/* Same <details>/<summary> mechanism as .lang-switch in the header - this
   modifier only recolours it for the navy footer background. */
.lang-switch--footer summary {
    padding: 12px 16px;
    border: 2px solid rgba(157, 192, 230, 0.3);
    border-radius: var(--radius-sm);
    color: var(--surface);
}

.lang-switch--footer summary:hover,
.lang-switch--footer[open] summary {
    background: transparent;
    border-color: var(--yellow);
}

.lang-switch--footer .lang-switch__caret {
    color: var(--on-navy-muted);
}

/* ---------------------------------------------------------------------- */
/* 404                                                                      */
/*                                                                          */
/* The page is not in the design, so it borrows the hero's treatment - navy */
/* panel, the same drifting decor, the same button pair - and sits between  */
/* the real header and the real footer, so a wrong URL still looks like the */
/* site rather than a bare stylesheet-less error.                          */
/* ---------------------------------------------------------------------- */

/* The 404 has one short section, so on a tall screen it would leave a band of
   bare white body under the footer. Body becomes a full-height column and the
   navy panel takes whatever is left over. */
.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-404 main {
    flex: 1 0 auto;
    display: flex;
}

.notfound {
    position: relative;
    overflow: hidden;
    flex: 1;
    background: var(--navy);
    color: var(--surface);
    padding: 96px 0 120px;
    display: flex;
    align-items: center;
}

.notfound__decor {
    position: absolute;
    pointer-events: none;
}

/* Softer than the hero's: this section is roughly half the hero's height, so
   the same circles at the same opacity read as flat blocks rather than glow. */
.notfound__decor--circle-blue {
    right: -260px;
    top: -300px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(107, 155, 214, 0.36), rgba(107, 155, 214, 0) 70%);
}

.notfound__decor--circle-yellow {
    left: -220px;
    bottom: -260px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 201, 77, 0.20), rgba(255, 201, 77, 0) 70%);
}

.notfound__decor--dots {
    right: 0;
    bottom: 0;
    width: 190px;
    height: 190px;
    opacity: 0.10;
    background-image: conic-gradient(#FFFFFF 90deg, transparent 90deg 180deg, #FFFFFF 180deg 270deg, transparent 270deg);
    background-size: 24px 24px;
}

.notfound__inner {
    /* Above the absolutely positioned decor, same reason as .hero__inner. */
    position: relative;
    width: 100%;
    max-width: 680px;
    text-align: center;
}

/* Oversized, low-contrast and aria-hidden: it is a visual marker, and a
   screen reader gets the heading instead of the bare number. */
.notfound__code {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(96px, 18vw, 168px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--yellow);
    opacity: 0.22;
}

/* .h1 is navy for the light sections; this one sits on the navy panel. */
.notfound__title {
    color: var(--surface);
    margin: -12px 0 20px;
    text-wrap: balance;
}

.notfound__lead {
    margin: 0 0 40px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--on-navy);
}

.notfound__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Responsive: 1200 / 900 / 640                                            */
/*                                                                          */
/* The approved design (docs/podklady/navrh-design.html) is a fixed        */
/* 1200px+ desktop layout; this section reflows it down to phones without  */
/* ever letting the page scroll horizontally. Ordered widest-first so the  */
/* narrower blocks (which all match too, since these are max-width         */
/* queries) win the cascade for any property touched more than once.      */
/* ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .hero__inner {
        grid-template-columns: 1fr 440px;
    }
}

@media (max-width: 900px) {
    /* Header: the horizontal nav becomes a <details> dropdown, see
       .nav-toggle above. The language switcher is untouched - it must stay
       visible exactly as it is on desktop. */
    .nav-toggle summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 2px solid var(--navy);
        border-radius: var(--radius-sm);
        cursor: pointer;
        list-style: none;
    }

    .nav-toggle summary::-webkit-details-marker {
        display: none;
    }

    .nav-toggle__icon,
    .nav-toggle__icon::before,
    .nav-toggle__icon::after {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--navy);
    }

    .nav-toggle__icon {
        position: relative;
    }

    .nav-toggle__icon::before,
    .nav-toggle__icon::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav-toggle__icon::before {
        top: -6px;
    }

    .nav-toggle__icon::after {
        top: 6px;
    }

    /* Anchored to .site-header (sticky, so it is the containing block for
       this absolutely-positioned panel), not to .nav-toggle itself - that
       keeps the 44px hamburger button from having to grow into a full-width
       flex item just to host its own dropdown, the same way .lang-switch's
       own menu never has to resize .lang-switch. */
    .nav-toggle__menu {
        display: none;
        position: absolute;
        left: var(--gutter);
        right: var(--gutter);
        top: calc(var(--header-height) + 12px);
        z-index: 60;
        flex-direction: column;
        gap: 2px;
        background: var(--surface);
        border: 2px solid var(--line);
        border-radius: var(--radius-md);
        padding: 8px;
        box-shadow: 0 18px 40px rgba(16, 48, 79, 0.14);
    }

    .nav-toggle[open] .nav-toggle__menu {
        display: flex;
    }

    .nav-toggle__menu a {
        min-height: 44px;
        padding: 10px 14px;
        border-bottom: 0;
        border-radius: var(--radius-sm);
    }

    .nav-toggle__menu a:hover,
    .nav-toggle__menu a:focus-visible {
        border-bottom-color: transparent;
        background: var(--surface-tint);
        color: var(--link);
    }

    /* Hero: one column, video under the text (already the DOM order). */
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero__media {
        max-width: 540px;
        margin: 0 auto;
    }

    .hero__timeline-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .reasons__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Thumbnails: horizontally scrollable strip, contained within its own
       box - overflow-x here, never on the page. */
    .products__thumbs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    .thumb {
        flex: 0 0 168px;
        scroll-snap-align: start;
    }

    .detail {
        grid-template-columns: 1fr;
    }

    .detail__media {
        height: 320px;
    }

    .partners__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contact__photo-wrap {
        max-width: 460px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    /* The wordmark is 2.79:1, so its width is what constrains the header row
       once the hamburger and the language switcher sit next to it. The desktop
       32px gap does not fit alongside it at 360px - it pushed the language
       switcher into the gutter. */
    .logo__mark {
        height: 38px;
    }

    .site-header__inner {
        gap: 16px;
    }

    .footer__logo .logo__mark {
        height: 38px;
    }

    .section {
        padding: 64px 0;
    }

    .section--tint,
    .section--navy {
        border-radius: var(--radius-lg);
        margin: 0 12px;
        padding: 64px 0 72px;
    }

    .reasons__grid {
        grid-template-columns: 1fr;
    }

    .thumb {
        flex-basis: 148px;
    }

    .partners__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reference__stats {
        grid-template-columns: 1fr;
    }

    /* Timeline: horizontal scroll instead of the 2x2 grid from 900px - the
       connecting line is a static overlay tied to that grid's column
       positions, so it is dropped rather than left drifting behind
       scrolling cards. */
    .hero__timeline-line {
        display: none;
    }

    .hero__timeline-list {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding-bottom: 4px;
    }

    .hero__milestone {
        flex: 0 0 200px;
        scroll-snap-align: start;
    }

    .hero__milestone-year {
        font-size: 26px;
    }

    /* Headings sized down for the narrowest viewports. */
    .partners__title {
        font-size: 32px;
    }

    .reference__title {
        font-size: 32px;
    }

    .stat-card__value {
        font-size: 44px;
    }

    .contact__title {
        font-size: 32px;
    }

    .detail__title {
        font-size: 28px;
    }

    .ticker__group {
        gap: 22px;
        font-size: 18px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}