/* The eSene Tech site. Brand kit colours: #0D1117 ink, #25A0C3 accent, #E6EDF3 light, #7D8FA3 muted;
   #0B5E76 (the avatar's background) is the hero's colour field. Every rule must hold from 320 px wide
   phones to wide desktops, and on phones held sideways. */
:root {
    --bg: #0D1117;
    --surface: #131A23;
    --line: #1E2833;
    --field: #0B5E76;
    --accent: #25A0C3;
    --fg: #E6EDF3;
    --sub: #7D8FA3;
    --light: #F3F6F9;
    --nav-h: 64px;
    --panel: 30%;           /* the picture panel's width, which the nav's brand cell follows */
    --gutter: max(1.25rem, 6vw);
    --ease: cubic-bezier(.19, 1, .22, 1);
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Selected text in the brand's teal; on the hero, which is that teal, in the page's black instead. */
::selection { background: var(--field); color: #fff; }
.hero ::selection { background: var(--bg); }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); background: var(--bg); }
/* The page is a column so the hero can be drawn before the nav that precedes it in the page. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    color: var(--fg);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    overflow-x: hidden;
}
a { color: var(--accent); }
/* Read by screen readers, not shown ("opens in a new tab"). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero, .site-nav, .site-footer { flex: none; }
main { flex: 1 0 auto; }   /* a short page keeps its footer at the bottom */
img { max-width: 100%; }

.button {
    display: inline-block;
    text-align: center;
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: .8rem 1.75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .3s, border-color .3s, color .3s;
}
.button.ghost { background: transparent; color: var(--fg); border-color: var(--sub); }

/* ---- Hero: the first screen less the nav ---- */
.hero {
    position: relative;
    height: calc(100svh - var(--nav-h));
    min-height: 270px;      /* a phone held sideways (360 px) still shows the nav */
    overflow: hidden;
    background: var(--field);
    container-type: size;   /* phones size the panel, and short screens drop the caption, from its height */
}
.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 3rem 6vw 3rem calc(var(--panel) + 8vw);
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s linear 1s;
}
.slide.active { opacity: 1; visibility: visible; transition: opacity 1s ease; }

/* The picture panel slides in from the left and the text drops in, as on the old site. */
.panel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--panel);
    overflow: hidden;
}
/* Each slide's picture, drawn in the page (Components/Art and the mark) on the YouTube banner's
   faint node network (assets/images/network.svg, drawn tall), with the mark's glow. */
.art-panel {
    display: grid;
    grid-template: 100% / 100%;   /* fixed tracks, so the drawing's percent height takes */
    place-items: center;
    background: url(assets/images/network.svg) center / cover no-repeat, radial-gradient(circle at 50% 50%, #0F2D3B, var(--bg) 60%);
}
.art-panel > svg { width: 62%; max-height: 70%; filter: drop-shadow(0 0 40px rgba(37, 160, 195, .3)); overflow: visible; }
.art-panel .mark { color: var(--accent); }
.art .tile { fill: rgba(255, 255, 255, .04); stroke: #2B3A4A; stroke-width: 2; }
.art .tile.changed { fill: var(--accent); stroke: var(--accent); }
.art .letter { fill: var(--fg); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 40px; text-anchor: middle; dominant-baseline: central; }
.art .letter.small { font-size: 22px; }
.art .letter.changed { fill: var(--bg); }
.art .step, .art .stand { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .step { stroke: var(--sub); }
.art .stand { stroke: var(--accent); stroke-width: 4; }
.art .screen { fill: rgba(37, 160, 195, .07); stroke: var(--accent); stroke-width: 4; }
.art .link { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.art .node { fill: var(--accent); }
.art .device { fill: #161B22; stroke: var(--sub); stroke-width: 2; }
.art .display { fill: rgba(255, 255, 255, .06); }
.art .display.lit { fill: var(--accent); }
.art .ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.art .node.dim { fill: var(--sub); }
.art .line { fill: rgba(230, 237, 243, .22); }
.art .line.dim { fill: rgba(125, 143, 163, .3); }
.art .line.strong { fill: var(--accent); }
.art .signal { fill: none; stroke: var(--sub); stroke-width: 3; stroke-linecap: round; }
.art .signal.cut { stroke: var(--accent); }
.art .seal { fill: rgba(37, 160, 195, .1); stroke: var(--accent); stroke-width: 4; }
.art .check { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* As a slide arrives its picture builds itself: the ladder's rows one after the other, the board's
   lines drawn out to the phones, which then appear one by one. */
.js .slide.active .ladder-row { animation: piece-in .6s var(--ease) both; animation-delay: calc(.35s + var(--i) * .3s); }
.js .slide.active .art .link { stroke-dasharray: 1; animation: draw .7s ease-out both; animation-delay: calc(.5s + var(--i) * .15s); }
.js .slide.active .art .record-row { animation: piece-in .5s var(--ease) both; animation-delay: calc(.35s + var(--i) * .15s); }
.js .slide.active .art .check { stroke-dasharray: 1; animation: draw .6s ease-out 1.3s both; }
.js .slide.active .art .phone { animation: piece-in .5s var(--ease) both; animation-delay: calc(.9s + var(--i) * .15s); }
@keyframes piece-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
.js .slide.active .panel { animation: slide-right 1s var(--ease) both; }
.js .slide.active .slide-text { animation: slide-down 1s var(--ease) .15s both; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-60px); } }
@keyframes slide-right { from { opacity: 0; transform: translateX(-100px); } }

.slide-text { max-width: 44rem; }
.kicker {
    color: #9FD8EA;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.slide h1, .slide h2 {
    color: #fff;
    font-size: clamp(1.6rem, min(4.4vw, 8cqh), 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.caption {
    color: rgba(230, 237, 243, .82);
    font-size: clamp(1rem, 1.7vw, 1.5rem);
    font-weight: 300;
    margin-top: 1.25rem;
}
.slide .button {
    margin-top: 1.75rem;
    min-width: min(15rem, 100%);
    background: var(--bg);
    border-color: var(--bg);
    color: #fff;
    padding: .85rem 2.5rem;
}

/* The notch: a bump of the colour field into the panel's edge, holding ↑ (previous) and ↓ (next). */
.notch {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: calc(var(--panel) - 58px);   /* 2px into the field: no seam where the panel's edge falls between pixels */
    width: 60px;
    height: 200px;   /* the shape's 200 units: room for the arrows between its curves */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: .15rem;
}
.notch-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--field); }
.arrow {
    position: relative;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: background .3s, border-color .3s;
}
.arrow svg { transition: translate .25s ease, stroke .25s ease; }
/* Hover and keyboard focus stay inside the notch (a 40px circle spilled over its edge onto the
   picture): an arrow turns light blue and nudges its way; pause/play fills its own ring. */
.arrow:focus-visible { outline: none; }
.prev:focus-visible svg, .next:focus-visible svg { stroke: #9FD8EA; }
.prev:focus-visible svg { translate: 0 -2px; }
.next:focus-visible svg { translate: 0 2px; }
.toggle:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .14); }
.arrow svg { width: 16px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Pause (two bars) while it plays, play (a triangle) once paused. */
.arrow.toggle {
    width: 32px; height: 32px;
    margin: 4px 4px 4px 0;   /* centred under the 40px arrows */
    border: 1.5px solid rgba(255, 255, 255, .6);   /* the ring around ❙❙ and ▶ */
}
.arrow.toggle svg { width: 12px; height: 16px; }
.toggle .icon-pause { stroke-width: 2.4; }
.toggle .icon-play { fill: #fff; stroke-width: 1.2; }
.toggle .icon-play, .stopped .toggle .icon-pause { display: none; }
.stopped .toggle .icon-play { display: block; }

/* One bar per slide; the active one fills over the slide's time. */
.pager { position: absolute; z-index: 5; bottom: 1.25rem; left: calc(var(--panel) + 8vw); display: flex; gap: .5rem; }
.pager button {
    width: 28px; height: 4px;
    border: 0; border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.pager button.active { background: #fff; }
.js .pager button.active { background: rgba(255, 255, 255, .3); }
.js .pager button.active::after {
    content: "";
    position: absolute; inset: 0;
    background: #fff;
    transform-origin: left;
    animation: fill var(--delay, 7.5s) linear both;
}
.hero.paused .pager button.active::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } }

/* ---- Nav: a dark bar, one surface with the logo cell and the page; teal marks only where you are. Above 800 px the hero is drawn first, so the bar starts at the
   bottom of the first screen and, being sticky, goes to the top with the scroll itself, at once;
   nothing animates its position. Up to 800 px (where the round menu button shows) it is at the top
   from the start, where people look for a menu on a phone. ---- */
@media (min-width: 801px) {
    .hero { order: -1; }
}
.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--nav-h);
    display: grid;
    grid-template-columns: var(--panel) repeat(3, minmax(0, 1fr)) auto;
    background: var(--bg);
    /* A hairline and a shadow: on the dark page the bar still shows where it ends. */
    box-shadow: 0 1px 0 var(--line), 0 0 20px rgba(0, 0, 0, .25);
}
.site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-nav a.active { background: var(--field); color: #fff; }
/* The brand cell: the dark banner's lockup on the banner's own black (#0D1117), so it shows no edge. */
.site-nav .brand { background: var(--bg); padding: 0 1rem; }
/* As tall as the bar less 8px: with the picture's own margin the lockup keeps about 8px above and below. */
.brand img { display: block; height: calc(var(--nav-h) - 8px); width: auto; }
.site-nav .lang {
    align-self: center;
    margin: 0 max(1rem, 2vw) 0 1rem;
    border: 1px solid var(--field);   /* the chosen language's fill and the frame are one colour, so both halves look the same height */
    border-radius: 6px;
    overflow: hidden;
    font-size: .75rem;
    letter-spacing: 0;
}
.lang span { padding: .35rem .55rem; color: var(--sub); }
.lang span.on { background: var(--field); color: #fff; }
.nav-links { display: contents; }   /* on wide screens its links are cells of the bar's grid */
.menu-button, .menu-scrim { display: none; }

/* ---- The round menu ("donut") button, up to 800 px wide, where the bar is at the top: the links
   leave the bar and drop down from under the button, in a panel on the right half of the screen from
   the bar to the bottom, links from the top (as on the SeneFoundation site); the left half stays in
   view, dimmed, and a tap on it closes the menu. The button's three
   bars turn into an X. Only with the script: without it the links stay in the bar. ---- */
@media (max-width: 800px) {
    .js .site-nav { grid-template-columns: var(--panel) 1fr auto; }
    .js .site-nav .lang { grid-column: 2; justify-self: end; margin-right: .75rem; }
    .js .menu-button {
        grid-column: 3;
        align-self: center;
        margin-right: max(.75rem, 2vw);
        position: relative;
        display: grid;
        place-content: center;
        gap: 5px;
        width: 44px; height: 44px;
        border: 2px solid var(--accent);
        border-radius: 50%;
        background: none;
        cursor: pointer;
    }
    /* The bars turn into an X slowly enough to be watched, in two steps: the outer bars glide to the
       middle as the middle one fades, then they cross. Closing plays it backwards: they uncross, then
       part. translate and rotate are separate properties, so each step has its own timing. */
    .js .menu-button span {
        display: block;
        width: 18px; height: 2px;
        border-radius: 1px;
        background: var(--accent);
        transition: rotate .5s ease-in-out, translate .45s ease-in-out .5s, opacity .35s ease .5s;
    }
    .js .menu-open .menu-button span {
        transition: translate .45s ease-in-out, opacity .35s ease, rotate .55s cubic-bezier(.5, 1.6, .5, 1) .45s;
    }
    .js .menu-open .menu-button span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
    .js .menu-open .menu-button span:nth-child(2) { opacity: 0; }
    .js .menu-open .menu-button span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

    /* The panel: the right half, from under the bar to the bottom, unrolling downwards from under the
       button; never narrower than its longest link (À PROPOS) on a 320 px phone. */
    .js .nav-links {
        position: fixed;
        top: var(--nav-h);
        right: 0;
        bottom: 0;
        width: max(50%, 13.5rem);
        z-index: -1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: .5rem 0 1.5rem;
        background: var(--surface);   /* the bar unrolling: its rules, a layer lighter than the page */
        box-shadow: -16px 0 30px rgba(0, 0, 0, .35);
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path .5s var(--ease), visibility 0s linear .5s;
    }
    .js .menu-open .nav-links {
        clip-path: inset(0 0 0 -40px);   /* -40px lets its shadow show on the left */
        visibility: visible;
        transition: clip-path .5s var(--ease);
    }
    .js .nav-links a {
        justify-content: flex-start;
        flex: none;
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--line);
        color: var(--fg);
        background: none;
        font-size: clamp(.95rem, 4.2vw, 1.15rem);
        letter-spacing: .2em;
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity .25s, transform .25s;
    }
    /* The section in view, lit as in the wide bar: teal, white text. */
    .js .nav-links a.active { background: var(--field); color: #fff; }
    .js .menu-open .nav-links a { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s var(--ease); }
    .js .menu-open .nav-links a:nth-child(1) { transition-delay: .12s; }
    .js .menu-open .nav-links a:nth-child(2) { transition-delay: .19s; }
    .js .menu-open .nav-links a:nth-child(3) { transition-delay: .26s; }
    .js .menu-open .nav-links a:nth-child(4) { transition-delay: .33s; }
    .js .menu-open .nav-links a:nth-child(5) { transition-delay: .40s; }

    /* The page beside the panel, dimmed but in view; a tap on it closes the menu (site.js). */
    .js .menu-scrim {
        display: block;
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        z-index: -2;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s ease, visibility 0s linear .4s;
    }
    .js .menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity .4s ease; }

    /* The page stays still behind the menu. On body, not html: body's overflow passes to the viewport,
       while html's would make body a scroller of its own, and the sticky nav would leave the top. */
    .menu-open body { overflow: hidden; }
}

/* Hover only where there is a pointer: on a touch screen a tapped arrow or link would keep it. */
@media (hover: hover) {
    .button:hover { background: transparent; color: var(--accent); }
    .button.ghost:hover { border-color: var(--accent); color: var(--accent); }
    .slide .button:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
    .prev:hover svg, .next:hover svg { stroke: #9FD8EA; }
    .prev:hover svg { translate: 0 -2px; }
    .next:hover svg { translate: 0 2px; }
    .toggle:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
    /* A hovered link turns the accent, unfilled: the teal fill means only "you are here". */
    .site-nav a:not(.brand, .lang, .active):hover { color: var(--accent); }
    .lang:hover span:not(.on) { background: rgba(37, 160, 195, .15); color: #fff; }
    .menu-button:hover { border-color: #fff; }
}

/* ---- Sections ---- */
.band { padding: 5rem var(--gutter); }
/* Each part rises into place once, as site.js's reveal() sees it (the same list there). */
.js .band h2,
.js .product img,
.js .product h3,
.js .product p,
.js .product .links,
.js .about p,
.js .about-video,
.js .contact-ways > *,
.js .contact-form { transition: opacity .8s ease, transform .9s var(--ease); }
.js .band h2:not(.seen),
.js .product img:not(.seen),
.js .product h3:not(.seen),
.js .product p:not(.seen),
.js .product .links:not(.seen),
.js .about p:not(.seen),
.js .about-video:not(.seen),
.js .contact-ways > *:not(.seen),
.js .contact-form:not(.seen) { opacity: 0; transform: translateY(28px); }
.band.shaded { background: var(--surface); }
/* The last section fills the screen above the footer, so a link to any section brings it to the top. */
main > .band:last-child { min-height: calc(100svh - var(--nav-h) - 6rem); }
.band h1, .band h2 {
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    overflow-wrap: anywhere;
}
.band h1::after, .band h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-top: 1rem; }
.lead { font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 300; max-width: 36em; margin-bottom: 1rem; }
.lead a { overflow-wrap: anywhere; }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); gap: 1.5rem; }
.product {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.product img { border-radius: 20px; }
.product h3 { font-size: 1.6rem; margin-bottom: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
/* "In development" beside a name: a product shown before it is public. */
.badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: .2rem .65rem;
}
.product p { color: var(--sub); }
/* Cards in a row are as tall as the tallest; the buttons sit at the bottom, so they line up. */
.product > div { display: flex; flex-direction: column; }
.product .links { margin-top: auto; padding-top: 1.25rem; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }
.text-link { font-size: .9rem; }

/* Bands between sections, as the old site had. */
/* Taller bands between sections, carrying the brand's faint node network over a teal fade. */
.separator {
    height: 120px;
    background: url(assets/images/network.svg) center / cover no-repeat, linear-gradient(90deg, rgba(37, 160, 195, .22), rgba(37, 160, 195, .02));
}
.separator.flipped { background: url(assets/images/network.svg) center / cover no-repeat, linear-gradient(90deg, rgba(37, 160, 195, .02), rgba(37, 160, 195, .22)); }
/* Contact: the ways to reach us beside the form (stacked below 900px). */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem 4rem; align-items: start; }
.contact-ways p { margin-bottom: .75rem; }
.contact-intro { white-space: pre-line; }   /* \n starts a line: "Write to us" on its own */
.with-icon { display: inline-flex; align-items: center; gap: .55rem; }
.with-icon svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.with-icon svg .fill { fill: currentColor; stroke: none; }
.contact-form {
    display: grid;
    gap: 1rem;
    padding: 1.75rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--sub); }
.field input, .field select, .field textarea {
    width: 100%;
    font: 400 1rem 'DM Sans', system-ui, sans-serif;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid #2B3A4A;
    border-radius: 8px;
    padding: .7rem .85rem;
    transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 160, 195, .2); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(-45deg, transparent 50%, var(--sub) 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.25rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-end .button { cursor: pointer; font-family: inherit; }
/* While sending: the button says so, with a spinner, and cannot be pressed twice. */
.form-end .button.sending { display: inline-flex; align-items: center; gap: .6rem; cursor: progress; opacity: .85; }
.form-end .button.sending::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A note that needs reading ("too many messages", "your email app has opened"): a framed box. */
.form-note:empty { display: none; }
.form-note { color: var(--fg); font-size: .95rem; padding: .75rem 1rem; border: 1px solid #E3B341; border-left-width: 4px; border-radius: 8px; background: rgba(227, 179, 65, .08); }
/* Sent: the card shows a check mark that draws itself, the title, the address we answer, and a way back. */
.form-fields { display: grid; gap: 1rem; }
.form-fields[hidden] { display: none; }
.form-done { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 2rem 1rem; }
.form-done[hidden] { display: none; }
.form-done h3 { font-size: 1.6rem; outline: none; }
.form-done .done-text { color: var(--sub); max-width: 28rem; overflow-wrap: anywhere; }
.done-check { width: 72px; height: 72px; }
.done-check circle { fill: rgba(37, 160, 195, .12); stroke: var(--accent); stroke-width: 2.5; }
.done-check path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw .6s ease-out .2s both; }
.form-done .again { margin-top: .5rem; cursor: pointer; font-family: inherit; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } .contact-form { padding: 1.25rem; } .form-end .button { width: 100%; } }
/* About: the text beside the video (stacked below 900px). */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; }
.about-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about-more { color: var(--sub); max-width: 40em; margin-bottom: 1rem; white-space: pre-line; }   /* \n starts a line */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 2rem var(--gutter);
    color: var(--sub);
    font-size: .85rem;
    border-top: 1px solid var(--line);
}

/* ---- Narrower screens: the panel widens, as on the old site ---- */
@media (max-width: 1024px) {
    :root { --panel: 40%; }
    .slide { padding-left: calc(var(--panel) + 6vw); }
    .pager { left: calc(var(--panel) + 6vw); }
    .site-nav a { letter-spacing: .2em; }
}
@media (max-width: 800px) {
    :root { --panel: 50%; }
    .site-nav a { letter-spacing: .08em; font-size: .75rem; }
    .slide { padding-right: 1.5rem; }
}

/* Phones: the panel goes on top, full width; the notch sits on its lower edge with ← and →. */
@media (max-width: 640px) {
    :root { --nav-h: 56px; --panel-h: min(300px, 44cqh); }
    .slide { align-items: flex-start; padding: calc(var(--panel-h) + 2.25rem) 1.25rem 3.5rem; text-align: center; }
    .slide-text { width: 100%; }
    .panel { width: 100%; bottom: auto; height: var(--panel-h); }
    .art-panel { padding-bottom: 56px; }   /* the drawing stays above the arrows' notch */
    .art-panel > svg { width: auto; height: 84%; max-height: none; }
    .kicker { margin-bottom: .5rem; font-size: .75rem; }
    .slide h1, .slide h2 { font-size: clamp(1.45rem, 7.4vw, 2.2rem); }
    .caption { margin-top: .75rem; }
    .slide .button { width: 100%; max-width: 20rem; padding: .8rem 1rem; margin-top: 1.25rem; }
    .notch {
        top: var(--panel-h);
        left: 50%;
        /* Turned a quarter, its flat side on the panel's lower edge (the box's centre 30px above it),
           sunk 2px into the field so no sliver of the picture shows under it. */
        transform: translate(-50%, -128px) rotate(90deg);   /* half its 200px height, then 28px up */
        flex-direction: column-reverse;
    }
    .notch .arrow svg { transform: rotate(180deg); }
    .notch .toggle svg { transform: rotate(-90deg); }   /* upright in the turned notch */
    /* In the turned notch the nudge turns too: ← moves left and → right. */
    .notch .prev:is(:hover, :focus-visible) svg { translate: 0 2px; }
    .notch .next:is(:hover, :focus-visible) svg { translate: 0 -2px; }
    .pager { left: 50%; transform: translateX(-50%); bottom: 1rem; }

    .site-nav { grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; }
    .js .site-nav { grid-template-columns: auto 1fr auto; }
    .site-nav .brand { padding: 0 .75rem; }
    .site-nav a { letter-spacing: .06em; font-size: .7rem; }
    .site-nav .lang { margin: 0 .75rem 0 .25rem; }
    .lang span { padding: .3rem .4rem; }
    .band { padding: 3.5rem 1.25rem; }
    .band h1, .band h2 { letter-spacing: .18em; margin-bottom: 2rem; }
    .product { grid-template-columns: 1fr; padding: 1.25rem; }
    .product img { width: 64px; height: 64px; border-radius: 14px; }
    .separator { height: 80px; }
}

/* Short screens (a phone held sideways, a small laptop): the caption gives way so the button stays. */
@container (max-height: 520px) {
    .caption { display: none; }
}
/* A phone held sideways: the side-by-side layout with a short panel; shorter titles. */
@media (max-height: 480px) and (min-width: 641px) {
    .slide { padding-top: 1.5rem; padding-bottom: 2.5rem; }
    .slide h1, .slide h2 { font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
    .kicker { margin-bottom: .5rem; }
    .slide .button { margin-top: 1rem; padding: .7rem 1.5rem; }
    .notch { transform: translateY(-50%) scale(.8); transform-origin: right center; }
}

/* The smallest phones: the language button names only the other language. */
@media (max-width: 380px) {
    .site-nav .brand { padding: 0 .6rem; }
    .brand img { height: calc(var(--nav-h) - 12px); }
    .site-nav a { letter-spacing: .02em; font-size: .64rem; padding: 0 .2rem; }
    .site-nav .lang { margin: 0 .5rem 0 .2rem; }
    .lang span.on { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .band h2:not(.seen),
    .js .product img:not(.seen),
    .js .product h3:not(.seen),
    .js .product p:not(.seen),
    .js .product .links:not(.seen),
    .js .about p:not(.seen),
    .js .about-video:not(.seen),
    .js .contact-ways > *:not(.seen),
    .js .contact-form:not(.seen) { opacity: 1; transform: none; }
}