/* Home page: layout, states and motion on top of styles.css (19 Oct 2026, from the homepage audit; the five-step
   flow on 20 Oct).
   The build inlines it into index.html. The canvas loads the same file as an uploaded asset in the Main
   board's <head>: after editing it, upload it again and repoint that <link> and the id in BLOBS (README).
   Motion: --ease for anything arriving or responding, colour 160ms, press 120ms, panel cross-fade 200ms,
   one explanatory sequence (the three steps). Only transform, opacity, clip-path and colours animate.
   No relative asset paths in this file: the build inlines it. */

/* The seam between the customer strip and Why Perdika: less empty paper, so the cards start higher. (The strip of
   request lines that sat here on 20 Oct 2026 was removed at Matas's word the same morning.) */
@media(min-width:761px){.logo-strip+#service,#problem+#service,#service+#fit{padding-top:clamp(48px,5vw,72px)}}
/* The cards' labels are long enough to reach their icon (sections.css places it top right), so they wrap before it. */
#service .why-label{padding-right:40px}

/* The home page's request flow (20 Oct 2026): step 4 is the check queue, step 5 sends the offer and passes the
   approved lines to the ERP, and one line under the flow says what runs at LHM Step today. */
.rf-queue-item{display:flex;flex:1;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.rf-scene-offer .rf-erp{grid-column:1/-1}
.flow-note{margin:-12px 0 0;max-width:72ch;color:var(--muted);font-size:13px;line-height:1.65}
@media screen and (prefers-reduced-motion:no-preference){.rf-panel[data-active="true"] .rf-erp{animation-delay:1000ms}}

/* The header over the hero's photos: light on the dark photo until the page scrolls (styles.css's is-stuck
   brings the paper back) or the phone menu opens. From 901px always; below that only once site.js runs,
   because without script the phone menu shows as an open list. */
@media(min-width:901px){
  .site-header-over:not(.is-stuck){border-bottom-color:rgba(255,254,250,.2)}
  .site-header-over:not(.is-stuck) .wordmark path{fill:#fffefa}
  .site-header-over:not(.is-stuck) nav>a:not(.button){color:rgba(255,254,250,.84)}
  .site-header-over:not(.is-stuck) nav .button-outline{border-color:rgba(255,254,250,.55);color:#fffefa}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine){
  .site-header-over:not(.is-stuck) nav>a:not(.button):hover{color:#fffefa}
  .site-header-over:not(.is-stuck) nav .button-outline:hover{border-color:#fffefa;color:#fffefa!important}
}
@media(max-width:900px){
  .js .site-header-over:not(.is-stuck):not(:has(nav.open)){border-bottom-color:rgba(255,254,250,.2)}
  .js .site-header-over:not(.is-stuck):not(:has(nav.open)) .wordmark path{fill:#fffefa}
  .js .site-header-over:not(.is-stuck):not(:has(nav.open)) .menu-toggle{color:#fffefa}
  .js .site-header-over:has(nav.open)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
}

/* Hero stage (19 Oct 2026, after Squarespace's homepage): LHM Step's staircases fill the screen under a dark
   wash and fade from one to the next, the headline and the call sit centred on them, and the product's screens
   and the example card slide along the bottom edge, one at a time (site.js; the canvas's hs state). Each card
   takes a data-slot (prev, active, next; before and after are out of sight), so the loop needs no copies. Pause
   stops the slides and the card; under reduced motion it starts paused, and without script the first slide shows. */
.hero-stage{position:relative;z-index:0;display:flex;flex-direction:column;height:100svh;min-height:660px;max-height:1100px;margin-top:calc(-1 * var(--header) - 1px);overflow:hidden;background:#1f1d1a;color:#fffefa}
@media(max-width:900px){html:not(.js) .hero-stage{margin-top:0}}
.hs-photos{position:absolute;inset:0;z-index:-1}
.hs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1400ms var(--ease)}
.hs-photo[data-active="true"]{opacity:1}
.hs-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,22,19,.66) 0%,rgba(24,22,19,.44) 42%,rgba(24,22,19,.74) 100%)}
.hs-copy{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--header) + clamp(36px,9vh,112px));text-align:center}
.hs-copy h1{max-width:16ch;color:#fffefa;font-size:clamp(2.9rem,5.6vw,5.6rem);text-wrap:balance}
.hs-lead{max-width:42ch;margin-top:22px;color:rgba(255,254,250,.86);font-size:18px;line-height:1.5}
.hs-copy .button{margin-top:30px}
.hs-rail{position:relative;flex:1;min-height:200px;margin-top:clamp(40px,7vh,84px);--cw:clamp(290px,40vw,620px);--gap:clamp(14px,1.8vw,26px)}
.hs-track{position:absolute;inset:0}
.hs-card{position:absolute;top:0;left:50%;width:var(--cw);aspect-ratio:4/3;overflow:hidden;border-radius:16px;color:var(--ink);box-shadow:0 30px 70px -24px rgba(0,0,0,.6);transform:translateX(calc(-50% + var(--x,0px)));transition:transform 900ms cubic-bezier(.65,0,.35,1),opacity 600ms var(--ease)}
.hs-card[data-slot="prev"]{--x:calc(-1 * (var(--cw) + var(--gap)));opacity:.8}
.hs-card[data-slot="next"]{--x:calc(var(--cw) + var(--gap));opacity:.8}
.hs-card[data-slot="before"]{--x:calc(-2 * (var(--cw) + var(--gap)));opacity:0}
.hs-card[data-slot="after"]{--x:calc(2 * (var(--cw) + var(--gap)));opacity:0}
.hs-shot{padding:10px;background:#efece5}
.hs-shot img{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover;object-position:0 0}
.hs-controls{position:absolute;top:-58px;right:max(24px,calc((100% - 1224px) / 2));z-index:1;display:flex;gap:8px}
.hs-controls[hidden]{display:none}
.hs-controls button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,254,250,.45);border-radius:50%;background:rgba(24,22,19,.32);color:#fffefa;cursor:pointer;transition:border-color 160ms var(--ease),background-color 160ms var(--ease),transform 120ms var(--ease)}
.hs-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hs-controls .hs-icon-play{fill:currentColor;stroke:none}
.hs-icon-pause,.hs-label-pause,.hero-stage[data-playing="true"] .hs-icon-play,.hero-stage[data-playing="true"] .hs-label-play{display:none}
.hero-stage[data-playing="true"] .hs-icon-pause{display:block}
.hero-stage[data-playing="true"] .hs-label-pause{display:inline}
.hs-controls button:focus-visible{outline:3px solid #fffefa;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.hs-controls button:hover{border-color:#fffefa;background:rgba(24,22,19,.55)}}
.hs-controls button:active{transform:scale(.95)}
@media(pointer:coarse){.hs-controls button{width:44px;height:44px}}
@media(max-width:760px){
  .hero-stage{min-height:620px}
  .hs-copy{padding-top:calc(var(--header) + 44px)}
  .hs-copy h1{font-size:clamp(2.2rem,9vw,2.9rem)}
  .hs-lead{font-size:16px}
  .hs-rail{--cw:min(80vw,420px);margin-top:84px}
  .hs-controls{top:-56px;right:16px}
}
@keyframes hs-settle{from{transform:scale(1.07)}}
@media screen and (prefers-reduced-motion:no-preference){
  .hs-photo[data-active="true"]{animation:hs-settle 2600ms var(--ease) both}
  .hs-copy>.hs-lead{animation:dq-enter 800ms var(--ease) 160ms backwards}
  .hs-copy>.button{animation:dq-enter 800ms var(--ease) 240ms backwards}
  .hs-rail{animation:dq-enter 1000ms var(--ease) 380ms backwards}
}
@media(prefers-reduced-motion:reduce){.hs-card{transition:opacity 200ms linear}}


/* Audience cards: a picture over the words, one control each. The border answers hover, the picture
   moves a little, the action takes the orange, and a press gives way slightly. Hover only where there is
   a real pointer. The distributor card shows a request as it arrives. */
.fit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.fit-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color 160ms var(--ease),transform 120ms var(--ease)}
.fit-media{position:relative;aspect-ratio:16/9;max-height:340px;overflow:hidden;border-bottom:1px solid var(--line);background:#efece5}
.fit-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.fit-media-request{display:grid;place-items:center;padding:clamp(18px,3vw,36px)}
.fit-mail{width:min(100%,400px);padding:14px 16px 16px;border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(37,37,33,.06),0 14px 30px -6px rgba(37,37,33,.14);font-size:14px;line-height:1.5;transition:transform 700ms var(--ease)}
.fit-mail-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--soft);font-size:12px;font-weight:700}
.fit-mail-head span:last-child{color:var(--muted);font-weight:550}
.fit-mail-body{margin:0 0 12px}
.fit-mail .file-chip{font-size:12px}
.fit-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 28px 28px}
.fit-label{display:inline-flex;align-items:center;gap:10px;min-height:22px;color:var(--muted);font-size:13px;font-weight:650}
.fit-title{font-size:22px;font-weight:650;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.fit-text{max-width:52ch;margin-bottom:10px;color:var(--muted);font-size:15px;line-height:1.6}
.fit-body .text-link{margin-top:auto}
#fit a.fit-card:hover{color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  .fit-card:hover{border-color:var(--ink)}
  .fit-card:hover .fit-media img{transform:scale(1.03)}
  .fit-card:hover .fit-mail{transform:translateY(-3px)}
  .fit-card:hover .text-link{color:var(--orange)}
  .fit-card:hover .text-link::after{transform:none}
  .fit-card:hover .text-link svg{transform:translateX(2px)}
}
.fit-card:active{transform:scale(.99)}
@media(max-width:760px){.fit-body{padding:20px 20px 24px}.fit-title{font-size:20px}}

/* Contact card: the people sit under the heading they support, and the email is a full-size target. */
.contact-card>.contact-people{margin-top:0}
@media(min-width:761px){
  .contact-card{grid-template-areas:"title copy" "people copy";grid-template-rows:auto 1fr}
  .contact-card>h2{grid-area:title}
  .contact-card>.contact-copy{grid-area:copy}
  .contact-card>h2,.contact-card>.contact-people{align-self:start}
  .contact-card>.contact-people{grid-area:people}
}
.email-row .email-link{padding-block:12px;margin-block:-12px}

/* Tablets: the three step heads take one shape (label over title), so the titles start on one line. */
@media(min-width:761px) and (max-width:1023px){.rollout .stage h3{flex-direction:column;align-items:flex-start;gap:4px}}

/* The three steps draw once, in order, when they come into view: line, dot, words, and the dashed
   paid-pilot gate last. site.js sets data-inview only when the block starts below the fold and motion
   is allowed, so without script, under reduced motion or on the canvas the finished steps show. */
@keyframes pk-draw-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-1px)}}
@keyframes pk-draw-y{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-1px)}}
@keyframes pk-dot{from{opacity:0;transform:scale(.5)}}
@keyframes pk-in{from{opacity:0;transform:translateY(8px)}}
@keyframes pk-bg{from{background-color:transparent}}
@media screen and (prefers-reduced-motion:no-preference){
  .rollout[data-inview=false] .stage::before{clip-path:inset(0 100% 0 0)}
  .rollout[data-inview=false] .stage::after,.rollout[data-inview=false] .stage>*{opacity:0}
  .rollout[data-inview=false] .stage-expand{background-color:transparent}
  .rollout[data-inview=true] .stage::before{animation:pk-draw-x 300ms linear both}
  .rollout[data-inview=true] .stage:nth-child(2)::before{animation-delay:300ms}
  .rollout[data-inview=true] .stage:nth-child(3)::before{animation:pk-draw-x 420ms var(--ease) 600ms both}
  .rollout[data-inview=true] .stage::after{animation:pk-dot 260ms var(--ease) both}
  .rollout[data-inview=true] .stage:nth-child(2)::after{animation-delay:300ms}
  .rollout[data-inview=true] .stage:nth-child(3)::after{animation-delay:620ms}
  .rollout[data-inview=true] .stage>*{animation:pk-in 450ms var(--ease) 60ms both}
  .rollout[data-inview=true] .stage:nth-child(2)>*{animation-delay:360ms}
  .rollout[data-inview=true] .stage:nth-child(3)>*{animation-delay:660ms}
  .rollout[data-inview=true] .stage-expand{animation:pk-bg 450ms var(--ease) 600ms both}
}
@media screen and (prefers-reduced-motion:no-preference) and (max-width:760px){
  .rollout[data-inview=false] .stage::before{clip-path:inset(0 0 100% 0)}
  .rollout[data-inview=true] .stage::before,.rollout[data-inview=true] .stage:nth-child(3)::before{animation-name:pk-draw-y}
}

/* Example card (19 Oct 2026, after Stripe's heroes, which show the product working; now one of the hero's sliding
   cards): one example request is read, drafted with the source of each value, priced by the app and left ready for
   the team, round and round (site.js; the canvas's hd state). data-stage 1-4 is the step and 0 the short reset
   between rounds; without script, under reduced motion and when paused the finished card shows (stage 4). Every row
   keeps its place and only opacity, transform and the marks' background-size change, so the card never changes size.
   On narrower cards the whole card is drawn smaller rather than cut. */
.hero-demo{height:100%;padding:12px;background:#efece5}
@media(max-width:1100px){.hs-card .hd-card{width:125%;transform:scale(.8);transform-origin:0 0}}
@media(max-width:760px){.hs-card .hd-card{width:160%;transform:scale(.625)}}
.hd-card{width:100%;overflow:hidden;border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(37,37,33,.06),0 18px 40px -10px rgba(37,37,33,.18);font-size:14px;line-height:1.5}
.hd-head{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.hd-status{display:grid;justify-items:end}
.hd-st{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 9px;border-radius:999px;background:var(--orange-soft);color:var(--orange-text);font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap;opacity:0;transition:opacity 220ms var(--ease)}
.hd-st::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor}
.hd-st-4{background:var(--green-soft);color:var(--green)}
.hero-demo:is([data-stage="0"],[data-stage="1"]) .hd-st-1,.hero-demo[data-stage="2"] .hd-st-2,.hero-demo[data-stage="3"] .hd-st-3,.hero-demo[data-stage="4"] .hd-st-4{opacity:1}
.hd-mail{padding:12px 16px 14px;border-bottom:1px solid var(--soft)}
.hd-mail-head{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.hd-mail-head>svg{flex-shrink:0;width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hd-mail-head strong{font-weight:700}
.hd-attach{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:1px 7px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:12px;white-space:nowrap}
.hd-attach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hd-mail-body{margin:6px 0 0}
.hd-m{padding:0 2px;border-radius:3px;background:linear-gradient(var(--orange-soft),var(--orange-soft)) 0 0/100% 100% no-repeat;box-shadow:0 0 0 2px var(--orange-soft);color:inherit}
.hd-rows{margin:0;padding:4px 16px}
.hd-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--soft)}
.hd-row:first-child{border-top:0}
.hd-row dt{color:var(--muted);font-size:12px}
.hd-row dd{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;min-height:22px;margin:0}
.hd-val{font-weight:650;font-variant-numeric:tabular-nums;text-decoration:underline dashed var(--dash);text-decoration-thickness:1px;text-underline-offset:4px}
.hd-val-empty{color:var(--muted);font-weight:500;text-decoration:none}
.hd-src{padding:2px 6px;border-radius:4px;background:var(--orange-soft);color:var(--orange-text);font-size:11px;font-weight:650;line-height:1.4;white-space:nowrap}
.hd-ask{padding:1px 6px;border:1px dashed var(--dash);border-radius:4px;color:var(--ink);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}
.hd-price{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 16px;padding:11px 0 13px;border-top:1px solid var(--ink);font-weight:700}
.hd-icon-pause{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(max-width:400px){.hd-attach{display:none}.hd-row{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr)}}
/* The fields and the price line are always there; until their step, each shows a faint bar where its value
   will go. Each step's values arrive in order, and the reset fades them out again. */
.hd-row dd::before,.hd-price::after{content:"";position:absolute;top:50%;height:8px;margin-top:-4px;border-radius:4px;background:var(--soft);opacity:0;transition:opacity 200ms var(--ease)}
.hd-row dd::before{left:0;width:72px}
.hd-price::after{right:0;width:136px;margin-top:-3px}
.hero-demo:is([data-stage="0"],[data-stage="1"]) .hd-row dd::before,.hero-demo:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .hd-price::after{opacity:1}
.hero-demo:is([data-stage="0"],[data-stage="1"]) .hd-row dd>*,.hero-demo:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .hd-calc{opacity:0}
.hero-demo[data-stage="0"] .hd-m{background-size:0% 100%;box-shadow:0 0 0 2px transparent}
@keyframes hd-mark{from{background-size:0% 100%;box-shadow:0 0 0 2px transparent}}
@keyframes hd-row{from{opacity:0;transform:translateY(6px)}}
@keyframes hd-chip{from{opacity:0;transform:translateX(8px)}}
@keyframes hd-pop{from{opacity:0;transform:scale(.9)}}
@keyframes hd-out{from{opacity:1}to{opacity:0}}
@keyframes hd-unmark{from{background-size:100% 100%;box-shadow:0 0 0 2px var(--orange-soft)}to{background-size:0% 100%;box-shadow:0 0 0 2px transparent}}
@media screen and (prefers-reduced-motion:no-preference){
  .hero-demo[data-stage="1"] .hd-m{animation:hd-mark 520ms var(--ease) both}
  .hero-demo[data-stage="1"] .hd-m1{animation-delay:350ms}
  .hero-demo[data-stage="1"] .hd-m2{animation-delay:750ms}
  .hero-demo[data-stage="1"] .hd-m3{animation-delay:1150ms}
  .hero-demo[data-stage="2"] .hd-val{animation:hd-row 460ms var(--ease) both}
  .hero-demo[data-stage="2"] :is(.hd-src,.hd-ask){animation:hd-chip 420ms var(--ease) both}
  .hero-demo[data-stage="2"] .hd-row:nth-child(2) .hd-val{animation-delay:180ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(3) .hd-val{animation-delay:360ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(4) .hd-val{animation-delay:540ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(5) .hd-val{animation-delay:720ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(1) :is(.hd-src,.hd-ask){animation-delay:260ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(2) :is(.hd-src,.hd-ask){animation-delay:440ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(3) :is(.hd-src,.hd-ask){animation-delay:620ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(4) :is(.hd-src,.hd-ask){animation-delay:800ms}
  .hero-demo[data-stage="2"] .hd-row:nth-child(5) :is(.hd-src,.hd-ask){animation-delay:980ms}
  .hero-demo[data-stage="3"] .hd-calc{animation:hd-pop 420ms var(--ease) 250ms both}
  .hero-demo[data-stage="4"] .hd-st-4{animation:hd-pop 380ms var(--ease) both}
  .hero-demo[data-stage="0"] :is(.hd-row dd>*,.hd-calc){animation:hd-out 360ms var(--ease-exit) both}
  .hero-demo[data-stage="0"] .hd-m{animation:hd-unmark 300ms var(--ease-exit) both}
}

/* Video hero (20 Oct 2026, Matas's "Perdika Hero" animation, chosen over the photos and the sliding cards the same
   day): the video plays muted on a loop behind the headline, anchored to the bottom edge so its three panels fill the
   lower half and the copy sits in the frame's empty top; at least 900px tall so the call clears the panels on 800px
   laptops (the panels start at 52% of the hero's height once it is taller than 810px). Pause holds it (site.js; the canvas's hs state) from the bottom right. Under reduced motion, and on
   phones (Matas, 20 Oct 2026: "still on phones"), the still shows instead: the loop's finished frame, and the file is
   not fetched (site.js). Phones get the copy first, then a 300px band of the still drawn 1.7x wide. */
.hero-video{min-height:900px;background:#1d1a15}
.hero-video .hs-copy>.eyebrow{margin-bottom:14px;color:rgba(255,254,250,.72)}
/* The centred hero label (25 Oct 2026, Matas: "this dot looks out of place"): as a flex row, a label that wraps on a phone
   fills the line and leaves the square at the far left edge. Inline, the square sits before the first word. */
.hs-copy>.eyebrow{display:block;text-wrap:balance}
.hs-copy>.eyebrow::before{display:inline-block;margin-right:10px;vertical-align:.1em}
.hero-video .hs-poster,.hero-video .hs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero-video .hs-photos::after{background:linear-gradient(180deg,rgba(24,22,19,.55) 0%,rgba(24,22,19,0) 36%)}
.hero-video .hs-copy{padding-top:calc(var(--header) + clamp(20px,3.5vh,56px))}
.hero-video .hs-copy h1{font-size:clamp(2.5rem,4.6vw,4.6rem)}
.hero-video .hs-lead{margin-top:14px}
.hero-video .hs-copy .button{margin-top:20px}
.hero-video .hs-controls{top:auto;bottom:24px}
/* The hero's second line is for wider screens (25 Oct 2026, Matas: "too much text at the beginning" on a phone): phones
   go from the headline straight to the call, and the button keeps the headline's breathing room instead. */
@media(max-width:760px){
  .hero-video .hs-lead{display:none}
  .hero-video .hs-copy .button{margin-top:28px}
}
@media(max-width:760px){
  .hero-video{height:auto;min-height:0}
  .hero-video .hs-copy{padding-top:calc(var(--header) + 32px)}
  .hero-video .hs-photos{position:relative;inset:auto;z-index:0;order:2;height:300px;margin-top:32px;overflow:hidden}
  .hero-video .hs-poster,.hero-video .hs-video{left:50%;width:170%;transform:translateX(-50%)}
  .hero-video .hs-photos::after{display:none}
  /* The still and the video are drawn at 230% (not 170%), so the three cards at the bottom of the frame fill the
     band and the empty dark top of the frame mostly falls outside it (Matas's phone screenshot, 20 Oct). Phones
     play the lighter 720p encode since the evening of 20 Oct (site.js); the Pause control stays, in the band. */
  .hero-video .hs-poster,.hero-video .hs-video{width:230%}
  .hero-video .hs-controls{bottom:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){.hero-video .hs-video,.hero-video .hs-controls{display:none}}

/* Reduced motion: colours still change, nothing moves or scales. */
@media(prefers-reduced-motion:reduce){
  .fit-card:active,.hs-controls button:active{transform:none}
  .fit-card:hover .fit-media img,.fit-card:hover .fit-mail{transform:none}
}

/* The problem on a phone (20 Oct 2026, Matas: "on phone it takes a lot of time to scroll"): the three cards sit
   side by side in a swipe row that snaps one card at a time, the next card peeking at the edge, and the chips
   are one scrolling row; the section drops from 1.7 screens to about one. Three dots under the row follow the
   swipe and move it (site.js); the build ships them hidden, so without script there is no dead control. The
   base rules are in sections.css; above 760px nothing here applies. */
.problem-dots{display:none}
@media(max-width:760px){
  .problem-tags{flex-wrap:nowrap;margin-inline:-20px;padding:0 20px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .problem-tags::-webkit-scrollbar{display:none}
  .problem-tags li{flex:0 0 auto;white-space:nowrap}
  .problem-cards{display:flex;gap:12px;margin-inline:-20px;padding:0 20px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .problem-cards::-webkit-scrollbar{display:none}
  .problem-card{flex:0 0 calc(100% - 44px);scroll-snap-align:start}
  .problem-dots{display:flex;justify-content:center;gap:2px;margin:10px 0 0}
  .problem-dots[hidden]{display:none}
  .problem-dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .problem-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color 160ms var(--ease),transform 160ms var(--ease)}
  .problem-dots button[aria-current="true"]::before{background:var(--orange);transform:scale(1.25)}
  .problem-dots button:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;border-radius:50%}
}

/* The customer strip's pills on a phone (Matas, 20 Oct 2026, from his phone: "the pillars dont look clean", then
   "make the pillars slide automatically on the phone like a text marquee"): a marquee. The list carries the five
   pills twice, the copies aria-hidden, so the loop is seamless: the track slides by one copy's width (half its own
   width less half the gap) and starts again. Above 760px the copies are hidden and the pills wrap as before; under
   reduced motion they stand in one row that scrolls by hand. The strip's own rules are in sections.css. */
.logo-strip-facts li[aria-hidden="true"]{display:none}
@media(max-width:760px){
  .logo-strip-marquee{flex:0 0 calc(100% + 40px);margin-inline:-20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .logo-strip-facts{flex-wrap:nowrap;width:max-content;animation:strip-marquee 26s linear infinite}
  .logo-strip-facts li{flex:0 0 auto}
  .logo-strip-facts li[aria-hidden="true"]{display:inline-flex}
  @keyframes strip-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 4px))}}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .logo-strip-facts{width:auto;padding:0 20px;overflow-x:auto;scrollbar-width:none;animation:none}
  .logo-strip-facts::-webkit-scrollbar{display:none}
  .logo-strip-facts li[aria-hidden="true"]{display:none}
}
/* The language switcher over the hero's photos, light like the menu beside it (25 Oct 2026). */
@media(min-width:901px){.site-header-over:not(.is-stuck) .lang-switch>a{color:rgba(255,254,250,.72)}.site-header-over:not(.is-stuck) .lang-switch>[aria-current]{color:#fffefa}.site-header-over:not(.is-stuck) .lang-switch>.lang-sep{color:rgba(255,254,250,.35)}}
@media(max-width:900px){.js .site-header-over:not(.is-stuck):not(:has(nav.open)) .lang-switch>a{color:rgba(255,254,250,.72)}.js .site-header-over:not(.is-stuck):not(:has(nav.open)) .lang-switch>[aria-current]{color:#fffefa}.js .site-header-over:not(.is-stuck):not(:has(nav.open)) .lang-switch>.lang-sep{color:rgba(255,254,250,.35)}}