/* design: mode=Persuade · macro=marquee-hero / light body / one dark reviews slab · nav=sticky bar + call
   · footer=dark 4-col · type=Onest · accent=#024ad8 (HP blue)
   Base: the owner's hp-replica (HP-inspired). Hero marquee ported 1:1 from it. */

/* self-hosted Onest (OFL 1.1, Fontsource 5.3.1): variable, covers weights 400-700; latin-ext = Lithuanian letters, cyrillic = Russian */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-latin-ext-wght-normal.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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-latin-wght-normal.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;
}
/* end self-hosted Onest */

:root {
  --ink: #17181b;          /* text; tinted near-black instead of #000 */
  --ink-2: #3f434a;        /* secondary text: 9.9:1 on --paper */
  --muted: #5d636b;        /* small print: 6.1:1 on --paper, 5.6:1 on --cloud */
  --paper: #fbfbfa;        /* main ground; warm off-white instead of #fff */
  --cloud: #f2f2ef;        /* alternate section ground */
  --card: #ffffff;
  --line: #e3e3df;
  --night: #111317;        /* reviews slab + footer */
  --night-2: #1b1e23;
  --on-night: #f1f2ef;
  --on-night-2: #b9bec6;   /* 9.4:1 on --night */
  --primary: #024ad8;      /* HP blue; white text on it 7.4:1 */
  --primary-deep: #0e3191;
  --primary-soft: #e6eefc;
  --star: #f4b400;
  --radius: 16px;
  --radius-btn: 6px;
  --shadow: 0 1px 2px rgb(23 24 27 / .06), 0 8px 24px rgb(23 24 27 / .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.section-dark :focus-visible, .foot :focus-visible, .hero :focus-visible { outline-color: #8fb4ff; }
[id] { scroll-margin-top: 88px; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: var(--radius-btn); }
.skip:focus { top: 1rem; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border-radius: var(--radius-btn); border: 1.5px solid transparent; font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: 0 1rem; font-size: .9rem; }
.btn-lg { min-height: 52px; padding: 0 1.5rem; font-size: 1rem; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: rgb(23 24 27 / .06); }
.btn-ghost-light { color: var(--on-night); border-color: rgb(241 242 239 / .4); }
.btn-ghost-light:hover { background: rgb(255 255 255 / .08); }
.link { display: inline-flex; align-items: center; gap: .4rem; color: var(--primary); font-weight: 600; text-decoration: none; min-height: 44px; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── header ── */
.top { position: sticky; top: 0; z-index: 50; height: 68px; }
/* the bar's skin lives on a pseudo-element so it can shrink into a capsule without moving the links or the page below */
.top::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100%; height: 68px; transform: translateX(-50%); background: var(--paper); border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; transition: top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), border-radius .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.top.is-scrolled::before { top: 6px; width: min(100% - 16px, 1280px); height: 56px; border-color: var(--line); border-radius: 99px; box-shadow: 0 10px 30px rgb(23 24 27 / .12); }
.top-sentinel { display: block; height: 1px; margin-top: -1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .top::before { transition: none; } }
.top-row { display: flex; align-items: center; gap: 1rem; height: 68px; }
.logo img { height: 52px; width: auto; }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .75rem; text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: var(--radius-btn); }
.nav-links a { position: relative; transition: background-color .15s ease, color .15s ease; }
.nav-links a:hover { background: var(--primary-soft); color: var(--primary-deep); }
.nav-links a[aria-current="page"] { color: var(--primary); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 6px; height: 2px; border-radius: 2px; background: var(--primary); }
.nav-links svg { width: .9em; height: .9em; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.langs { display: flex; border: 1px solid var(--line); border-radius: var(--radius-btn); overflow: hidden; }
.langs a { display: grid; place-items: center; min-width: 44px; min-height: 44px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.langs a + a { border-left: 1px solid var(--line); }
.langs a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.top-call span { display: none; }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); border-radius: var(--radius-btn); cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
/* mobile drawer */
.nav-links.open { display: block; position: absolute; left: 8px; right: 8px; top: 72px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: .5rem 1rem 1rem; box-shadow: 0 18px 40px rgb(23 24 27 / .18); }
.nav-links.open a { display: flex; min-height: 48px; font-size: 1.05rem; }
@media (min-width: 640px) { .top-call span { display: inline; } }
@media (min-width: 1024px) {
  .nav-links, .nav-links.open { display: flex; position: static; padding: 0; box-shadow: none; border: 0; background: none; }
  .menu-btn { display: none; }
}

/* ── hero: 3D image marquee, ported from hp-replica (CSS stand-in for Aceternity ThreeDMarquee) ── */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - 68px); display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.mq { position: absolute; inset: 0; overflow: hidden; }
.mq-stage { display: flex; align-items: center; justify-content: center; height: 100%; }
.mq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 320%; transform: rotateX(40deg) rotateZ(-42deg) scale(3); transform-origin: center; }
.mq-col { display: flex; flex-direction: column; will-change: transform; }
.mq-col img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); background: #d9dbe0; margin-bottom: 16px; }
.mq-col:nth-child(odd) { animation: mqUp 45s linear infinite; }
.mq-col:nth-child(even) { animation: mqDown 45s linear infinite; }
.hero.paused .mq-col { animation-play-state: paused; }
@keyframes mqUp { from { transform: translateY(0); } to { transform: translateY(-25%); } } /* column holds 4 identical copies: -25% = exactly one copy, so the wrap is invisible */
@keyframes mqDown { from { transform: translateY(-25%); } to { transform: translateY(0); } }
@media (min-width: 641px) { .mq-grid { width: 160%; transform: rotateX(45deg) rotateZ(-42deg) scale(1.35); } }
/* legibility: soft dark pool behind the copy only; photos stay bright at the edges */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 38% at 50% 50%, rgb(10 12 16 / .62), rgb(10 12 16 / .28) 60%, transparent 100%); }
.hero-copy { position: relative; z-index: 2; max-width: 52rem; padding: 6rem 1rem 7rem; text-align: center; color: #fff; }
.hero-lede { font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 500; color: rgb(255 255 255 / .94); margin-top: 1rem; text-shadow: 0 1px 10px rgb(0 0 0 / .65); }
.hero h1 { font-size: clamp(2.4rem, 7.5vw, 4.6rem); font-weight: 600; line-height: 1.04; text-shadow: 0 2px 16px rgb(0 0 0 / .55); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
.hero-ctas .btn { box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.mq-toggle { position: absolute; z-index: 3; right: 1rem; bottom: 5.5rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 .85rem; border: 0; border-radius: 99px; background: rgb(17 19 23 / .72); color: #fff; font-family: inherit; font-size: .8rem; font-weight: 500; line-height: 1; cursor: pointer; }
.mq-toggle:hover { background: rgb(17 19 23 / .9); }
.mq-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 768px) { .mq-toggle span { position: static; width: auto; height: auto; clip: auto; } }
.wave { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px; fill: var(--paper); stroke: none; } /* global svg rule adds a 2px stroke for icons; the wave must not have one */
@media (min-width: 768px) { .wave { height: 90px; } }
/* entrance */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-lede { animation: fadeUp .6s .3s var(--ease) both; }
.hero h1 { animation: fadeUp .75s .2s var(--ease) both; }
.hero-ctas { animation: fadeUp .6s .4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mq-col { animation: none !important; }
}

/* ── trust strip, take 2: one editorial composition — huge Google score, one real quote, a shop photo, facts as plain sentences ── */
.trust { position: relative; z-index: 1; padding: 2.5rem 0 1rem; }
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem); grid-template-areas: "score photo" "quote quote" "facts facts"; gap: 1.5rem 1.25rem; align-items: start; }
.proof-score { grid-area: score; display: grid; gap: .5rem; justify-items: start; text-decoration: none; color: var(--ink); min-height: 44px; }
.proof-n { font-size: clamp(5rem, 24vw, 10rem); font-weight: 700; letter-spacing: -0.06em; line-height: .85; color: var(--primary); }
.proof-score .stars { display: inline-flex; gap: .15rem; }
.proof-score .stars svg { width: 1.4rem; height: 1.4rem; fill: var(--primary); stroke: none; }
.proof-score small { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: 1.05rem; font-weight: 600; }
.proof-score small svg { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); }
.proof-score:hover small { color: var(--primary); }
.proof-score:hover small svg { transform: translateX(3px); }
.proof-score:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
.proof-photo { grid-area: photo; margin: 0; }
.proof-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 20px; box-shadow: 0 18px 40px rgb(23 24 27 / .16); }
.proof-quote { grid-area: quote; margin: 0; display: grid; gap: .6rem; max-width: 36rem; }
.proof-quote blockquote { margin: 0; font-size: clamp(1.35rem, 4.4vw, 1.9rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.proof-quote figcaption { color: var(--muted); font-size: .95rem; }
.proof-facts { grid-area: facts; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.proof-facts li { padding: .95rem 0; border-top: 1px solid var(--line); font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
.proof-facts li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .trust { padding: 3.5rem 0 1.5rem; }
  .proof { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "score photo" "quote photo" "facts photo"; gap: 2rem 4rem; }
  .proof-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .proof-facts li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .proof-photo { align-self: stretch; }
  .proof-photo img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
}
@media (min-width: 1024px) { .proof-n { font-size: 10rem; } .proof-photo { margin-top: -3rem; } }
@media (prefers-reduced-motion: reduce) { .proof-score small svg { transition: none; } }

/* ── sections ── */
.section { padding: 4.5rem 0; }
.section-cloud { background: var(--cloud); }
.section-head { display: grid; gap: .75rem; margin-bottom: 2.25rem; max-width: 44rem; }
.section-head h1, .section-head h2, .faq-wrap h2, .about-copy h2, .rev-head h1, .rev-head h2 { font-size: clamp(2rem, 5vw, 3rem); }
.section-head p { color: var(--ink-2); font-size: 1.08rem; }
.more { margin-top: 2rem; }
@media (min-width: 1024px) { .section { padding: 6rem 0; } }

/* services: HP "most requested" cards */
.svc-grid { display: grid; gap: 1.25rem; }
.svc { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.svc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-img { position: relative; aspect-ratio: 4 / 3; background: var(--cloud); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; left: .75rem; top: .75rem; background: var(--primary); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 99px; }
.credit { position: absolute; right: .5rem; bottom: .4rem; font-size: .7rem; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .8); }
.svc-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.25rem .75rem; }
.svc-body h3 { font-size: 1.2rem; }
.svc-body p, .svc-body li { color: var(--ink-2); font-size: .96rem; }
.svc-body ul { margin: 0; padding-left: 1.1rem; }
.svc-body .link { margin-top: auto; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-services .svc-img { aspect-ratio: 16 / 10; }


/* shops */
.shops { display: grid; gap: 1.25rem; }
.shop { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shop-body { display: grid; gap: .5rem; padding: 1.5rem; align-content: start; }
.shop h3 { font-size: 1.5rem; }
.shop dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.25rem; margin: .5rem 0 1rem; }
.shop dt { font-weight: 600; }
.shop dd { margin: 0; font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status.is-open { color: #12733a; }
.note { margin-top: 1.5rem; }
@media (min-width: 768px) { .shops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .shop img { aspect-ratio: auto; height: 100%; } }

/* process: icon tiles joined by a dashed route (route drawn by app.js from the real tile positions) */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding-bottom: 2rem; }
.steps li:last-child { padding-bottom: 0; }
/* phones/tablets: vertical dashed rail between the tiles */
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 38px; top: 84px; bottom: 8px; border-left: 2px dashed #b4c6ee; }
.step-tile { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(150deg, #fff 0%, #edf2fd 100%); border: 1px solid #d9e2f6; box-shadow: 0 1px 0 #fff inset, 0 10px 26px rgb(2 74 216 / .12); }
.step-tile svg { width: 40px; height: 40px; fill: none; stroke: none; }
.step-tile b { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 600; box-shadow: 0 0 0 3px var(--paper); }
.step-text { display: grid; gap: .4rem; padding-top: .35rem; }
.step-text h3 { font-size: 1.15rem; }
.step-text p { color: var(--ink-2); font-size: .98rem; }
.route { display: none; }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem; }
  .steps li { grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; padding-bottom: 0; gap: 1.5rem; }
  .steps li::before { display: none; }
  .step-tile { width: 112px; height: 112px; border-radius: 30px; }
  .step-tile svg { width: 56px; height: 56px; }
  .step-tile b { top: -10px; right: -10px; width: 30px; height: 30px; font-size: .88rem; }
  .step-text { justify-items: center; max-width: 17rem; }
  .step-text h3 { font-size: 1.25rem; }
  .route { display: block; position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
  .route path.dash { fill: none; stroke: #8fa9e6; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
  .route .ring { fill: var(--paper); stroke: #8fa9e6; stroke-width: 2; }
  .route .head { fill: #8fa9e6; stroke: none; }
  .route .dot { fill: var(--primary); stroke: none; filter: drop-shadow(0 0 6px rgb(2 74 216 / .55)); }
}
/* entrance (only when JS marks the list; no-JS and reduced-motion see everything at once) */
.steps.pre li { opacity: 0; transform: translateY(18px); }
.steps.pre .route { opacity: 0; }
.steps.in li { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.steps.in li:nth-of-type(2) { transition-delay: .12s; } .steps.in li:nth-of-type(3) { transition-delay: .24s; } .steps.in li:nth-of-type(4) { transition-delay: .36s; } /* of-type: the route svg is also a child */
.steps.in .route { opacity: 1; transition: opacity .8s .5s ease; }
@media (prefers-reduced-motion: reduce) { .steps.pre li, .steps.pre .route { opacity: 1; transform: none; } .route .dot { display: none; } }
/* phones only (<640px): the four steps are big cards that stack as you scroll (sticky, CSS only); an outline numeral replaces the badge */
@media (max-width: 639px) {
  .steps { counter-reset: st; }
  .steps li { counter-increment: st; grid-template-columns: 1fr; gap: 1rem; align-items: start; position: sticky; top: calc(92px + var(--k, 0) * 14px); min-height: 13.5rem; margin-bottom: 1rem; padding: 1.4rem 1.4rem 1.6rem; border-radius: 26px; background: #fff; border: 1px solid #d9e2f6; box-shadow: 0 -10px 30px rgb(2 74 216 / .08), 0 14px 30px rgb(2 74 216 / .1); }
  .steps li:nth-child(1) { --k: 0; } .steps li:nth-child(2) { --k: 1; } .steps li:nth-child(3) { --k: 2; } .steps li:nth-child(4) { --k: 3; }
  .steps li:last-child { margin-bottom: 0; }
  .steps li::before { display: none; }
  .steps li::after { content: "0" counter(st); content: "0" counter(st) / ""; position: absolute; right: 1.2rem; top: .7rem; font-size: 5rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px #c3d2f2; pointer-events: none; }
  .step-tile b { display: none; }
  .step-text { padding-top: 0; }
  .step-text h3 { font-size: 1.4rem; }
  .step-text p { font-size: 1.02rem; }
}

/* call-to-action band with tilted real photos */
.cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1.25rem; margin-top: 4rem; padding: 2rem 1.5rem 0; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2f6bf0 0%, rgb(2 74 216 / 0) 55%), linear-gradient(135deg, #024ad8 0%, #0e3191 100%); background-color: #024ad8; /* base colour under the gradient */ }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.cta-copy { display: grid; gap: 1.25rem; justify-items: start; padding-bottom: .5rem; }
.cta-band :focus-visible { outline-color: #fff; }
.cta-copy .num { margin-left: .35ch; }
@media (max-width: 419px) { .cta-copy .num { display: none; } }
.cta-copy h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.cta-copy p { color: rgb(255 255 255 / .9); font-size: 1.08rem; max-width: 34rem; }
.cta-photos { display: flex; justify-content: center; align-items: flex-end; height: 12.5rem; margin-inline: -.5rem; }
.cta-photos img { width: 9.2rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; border: 4px solid rgb(255 255 255 / .92); box-shadow: 0 20px 40px rgb(5 20 70 / .45); transition: transform .35s var(--ease); }
.cta-photos img:nth-child(1) { transform: translateY(2.2rem) rotate(-9deg); margin-right: -1.6rem; }
.cta-photos img:nth-child(2) { transform: translateY(.4rem) rotate(2deg); z-index: 1; }
.cta-photos img:nth-child(3) { transform: translateY(2.6rem) rotate(10deg); margin-left: -1.6rem; }
.cta-band:hover .cta-photos img:nth-child(1) { transform: translateY(1.6rem) rotate(-12deg); }
.cta-band:hover .cta-photos img:nth-child(2) { transform: translateY(-.4rem) rotate(2deg); }
.cta-band:hover .cta-photos img:nth-child(3) { transform: translateY(2rem) rotate(13deg); }
@media (min-width: 900px) {
  .cta-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding: 3.5rem 0 3.5rem 3.5rem; }
  .cta-photos { height: 22rem; justify-content: flex-start; margin-right: -1rem; }
  .cta-photos img { width: 12.5rem; }
  .cta-photos img:nth-child(1) { transform: translateY(1.5rem) rotate(-8deg); margin-right: -2.5rem; }
  .cta-photos img:nth-child(2) { transform: translateY(-1.5rem) rotate(3deg); }
  .cta-photos img:nth-child(3) { transform: translateY(2.5rem) rotate(11deg); margin-left: -2.5rem; }
  .cta-band:hover .cta-photos img:nth-child(1) { transform: translateY(.8rem) rotate(-11deg); }
  .cta-band:hover .cta-photos img:nth-child(2) { transform: translateY(-2.3rem) rotate(3deg); }
  .cta-band:hover .cta-photos img:nth-child(3) { transform: translateY(1.8rem) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .cta-photos img { transition: none; } }
/* phones only (<640px): photos lead as a wide fan that fades into the blue; the headline sits over the fade.
   Tablet 640-899 and desktop keep the original rules above. */
@media (max-width: 639px) {
  .cta-band { --w: min(35vw, 9.2rem); padding: 0 1.25rem 1.5rem; gap: 0; }
  .cta-photos { order: -1; height: calc(var(--w) * 1.6 + 1rem); margin-inline: -1.25rem; padding-top: 1rem; align-items: flex-start;
    -webkit-mask-image: linear-gradient(#000 45%, transparent 96%); mask-image: linear-gradient(#000 45%, transparent 96%); }
  .cta-photos img { width: var(--w); border-width: 3px; }
  .cta-band .cta-photos img:nth-child(1), .cta-band:hover .cta-photos img:nth-child(1) { transform: translateY(.9rem) rotate(-10deg); margin-right: calc(var(--w) * -.27); }
  .cta-band .cta-photos img:nth-child(2), .cta-band:hover .cta-photos img:nth-child(2) { transform: translateY(-.2rem) rotate(1deg); width: calc(var(--w) * 1.12); }
  .cta-band .cta-photos img:nth-child(3), .cta-band:hover .cta-photos img:nth-child(3) { transform: translateY(1.3rem) rotate(10deg); margin-left: calc(var(--w) * -.27); }
  .cta-copy { position: relative; margin-top: calc(var(--w) * -.62); gap: 1rem; }
  .cta-copy .row { display: grid; width: 100%; gap: .6rem; }
  .cta-copy .btn { justify-content: center; }
}

/* reviews: HP dark slab */
.section-dark { background: var(--night); color: var(--on-night); }
.rev-head { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.rev-score { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; color: var(--on-night-2); }
.rev-score b { font-size: 2.6rem; font-weight: 600; color: var(--on-night); letter-spacing: -0.02em; line-height: 1; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; }
.rev-grid { display: grid; gap: 1rem; }
.review { margin: 0; display: grid; gap: 1.25rem; align-content: space-between; padding: 1.5rem; border-radius: var(--radius); background: var(--night-2); border: 1px solid rgb(255 255 255 / .06); }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .9rem; color: var(--on-night-2); }
.review figcaption b { color: var(--on-night); }
.rev-note { margin-top: 2rem; color: var(--on-night-2); max-width: 46rem; }
@media (min-width: 768px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rev-head { grid-template-columns: 1fr auto; align-items: end; } .rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* about */
.about { display: grid; gap: 2rem; align-items: center; }
.about-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about-copy { display: grid; gap: 1rem; max-width: 40rem; }
.about-copy p { color: var(--ink-2); font-size: 1.05rem; }
.about-copy .lede { color: var(--ink); font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.facts { display: grid; gap: .25rem 0; margin: 1rem 0 0; }
.facts dt { font-weight: 600; margin-top: .9rem; }
.facts dd { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 4rem; } }

/* form: device tiles, chips, photo picker, confirmation */
.form-wrap { display: grid; gap: 1.5rem; }

.req-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px rgb(23 24 27 / .04), 0 18px 40px rgb(23 24 27 / .06); }
.req { display: grid; gap: 1.5rem; padding: 1.5rem; }
.req[hidden] { display: none; } /* .req sets display:grid, which would otherwise beat the hidden attribute */
.req fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.req legend, .req label, .lbl { font-weight: 500; font-size: .95rem; padding: 0; }
.req legend { margin-bottom: .6rem; }
.field { display: grid; gap: .45rem; align-content: start; }
.req input:not([type="radio"]):not([type="file"]), .req textarea { width: 100%; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--ink); background: var(--paper); border: 1.5px solid #858b83; border-radius: 12px; padding: .8rem .95rem; min-height: 50px; transition: border-color .15s ease, box-shadow .15s ease; }
.req input:hover, .req textarea:hover { border-color: #5d636b; }
.req input:focus-visible, .req textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgb(2 74 216 / .16); }
.req [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 4px rgb(179 38 30 / .12); }
.req textarea { resize: vertical; min-height: 7rem; }
.grid2, .grid3 { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* device tiles */
.devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.devices legend { grid-column: 1 / -1; }
.devices label { position: relative; display: flex; }
.devices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.devices span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; min-height: 5.5rem; padding: 1.1rem .5rem .9rem; border: 1.5px solid #d3d5d0; border-radius: 16px; background: var(--paper); text-align: center; font-weight: 500; font-size: .95rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.devices span svg { width: 1.9rem; height: 1.9rem; color: var(--ink-2); transition: color .15s ease; }
.devices label:hover span { border-color: #9fa39d; transform: translateY(-1px); }
.devices input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgb(2 74 216 / .14); }
.devices input:checked + span svg { color: var(--primary); }
.devices input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (min-width: 640px) { .devices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1.5px solid #d3d5d0; border-radius: 99px; background: var(--paper); color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chip:hover { border-color: #9fa39d; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.field .chips { margin-top: .15rem; }
.model-help { font-size: .9rem; color: var(--muted); }
.model-help summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--primary); font-weight: 500; }
.model-help p { margin-bottom: .5rem; }

/* photo picker */
.drop { position: relative; display: block; cursor: pointer; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-ui { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; padding: 1.1rem 1.25rem; border: 2px dashed #b7bab4; border-radius: 16px; background: var(--paper); transition: border-color .15s ease, background-color .15s ease; }
.drop-ui svg { grid-row: span 2; width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.drop-ui b { font-weight: 600; }
.drop-ui small { color: var(--muted); font-size: .86rem; }
.drop:hover .drop-ui, .drop.over .drop-ui { border-color: var(--primary); background: var(--primary-soft); }
.drop:focus-within .drop-ui { outline: 3px solid var(--primary); outline-offset: 2px; }
.thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; width: 5.2rem; }
.thumbs img { width: 5.2rem; height: 5.2rem; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--cloud); }
.thumbs span { display: block; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--muted); }
.thumbs button { position: absolute; top: -.4rem; right: -.4rem; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.thumbs button i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: .95rem; line-height: 1; }
.thumbs button:hover i { background: #b3261e; }
.thumbs button:focus-visible { outline: 3px solid var(--primary); outline-offset: -6px; border-radius: 50%; }

.form-msg:empty { display: none; }
.form-msg { padding: .9rem 1rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); font-weight: 500; }
.form-msg.is-error { background: #fdecea; color: #8c1d18; }
.req .btn { justify-self: start; }

/* confirmation */
.req-done { display: grid; justify-items: start; gap: .9rem; padding: 2.5rem 1.5rem; }
.req-done[hidden] { display: none; }
.req-done h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.req-done h3:focus { outline: none; }
.req-done p { color: var(--ink-2); max-width: 32rem; }
.req-done .done-sum { color: var(--ink); font-weight: 600; }
.done-ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 0 0 8px rgb(2 74 216 / .14); }
.done-ico svg { width: 2rem; height: 2rem; stroke-width: 2.6; }
.done-ico .tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .5s .15s var(--ease) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .done-ico .tick { animation: none; stroke-dashoffset: 0; } .devices span { transition: none; } }

@media (min-width: 640px) { .req { padding: 2.25rem; } .req-done { padding: 3rem 2.25rem; } }
@media (min-width: 1024px) { .form-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 4rem; align-items: start; } .form-wrap .section-head { position: sticky; top: 110px; } }

/* faq: a chat. Questions are the visitor's bubbles (right), answers come from the shop (left). Native <details>, one open at a time. */
.faq-wrap { display: grid; gap: 2rem; }
.faq-side { display: grid; gap: .9rem; align-content: start; }
.faq-lede { color: var(--ink-2); max-width: 22rem; }
.faq { display: grid; gap: .9rem; }
.faq summary { display: flex; width: fit-content; max-width: 100%; margin-left: auto; min-height: 44px; cursor: pointer; list-style: none; border-radius: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.faq .q { display: inline-flex; align-items: center; gap: .8rem; max-width: min(100%, 34rem); padding: .85rem 1rem .85rem 1.25rem; background: var(--card); border: 1.5px solid #cfd3d8; border-radius: 22px 22px 6px 22px; font-weight: 600; font-size: 1.02rem; line-height: 1.35; text-align: left; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.faq .q svg { flex: none; width: 1.2rem; height: 1.2rem; stroke-width: 2.4; transition: transform .25s var(--ease); }
.faq summary:hover .q { border-color: var(--primary); }
.faq details[open] .q { background: var(--primary); border-color: var(--primary); color: #fff; }
.faq details[open] .q svg { transform: rotate(180deg); }
.faq .a { display: flex; align-items: flex-end; gap: .6rem; margin-top: .7rem; animation: faqIn .4s var(--ease) both; }
.faq .a p { max-width: 34rem; padding: .95rem 1.25rem; background: var(--primary-soft); border-radius: 22px 22px 22px 6px; color: var(--ink); }
.av { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--night); }
.av img { width: 84%; height: auto; }
.faq-end { display: flex; align-items: flex-end; gap: .6rem; margin-top: .6rem; }
.faq-end > div { display: grid; gap: .5rem; padding: 1.1rem 1.25rem; max-width: 34rem; background: var(--night); color: var(--on-night); border-radius: 22px 22px 22px 6px; }
.faq-end b { font-size: 1.08rem; font-weight: 600; }
.faq-end p { color: var(--on-night-2); }
.faq-end .row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
@keyframes faqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq .a { animation: none; } .faq .q, .faq .q svg { transition: none; } }
/* faq motion: a reply is immediate (no fake typing). Where ::details-content exists, the answer row opens and closes smoothly (grid rows 0fr to 1fr),
   the avatar pops in, then the bubble grows from the avatar corner. Closing is faster than opening. Elsewhere the old fade-up stays. */
@media (prefers-reduced-motion: no-preference) {
  .faq .q { transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .12s var(--ease); }
  .faq summary:active .q { scale: .97; }
  .faq .q svg { transition: transform .3s var(--ease); }
  @supports selector(::details-content) {
    .faq .a { animation: none; margin-top: 0; padding-top: .7rem; min-height: 0; overflow: hidden; transition: padding-top .14s linear; }
    .faq details::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .14s cubic-bezier(.4, 0, 1, 1), content-visibility .14s allow-discrete; }
    .faq details[open]::details-content { grid-template-rows: 1fr; transition: grid-template-rows .24s var(--ease), content-visibility .24s allow-discrete; }
    .faq details:not([open]) .a { padding-top: 0; }
    .faq details[open] .a { transition: padding-top .24s var(--ease); }
    .faq .a .av { scale: .6; opacity: 0; transition: scale .14s linear, opacity .1s linear; }
    .faq .a p { transform-origin: 0 100%; scale: .94; opacity: 0; transition: scale .14s linear, opacity .1s linear; }
    .faq details[open] .a .av { scale: 1; opacity: 1; transition: scale .26s var(--ease), opacity .16s var(--ease); }
    .faq details[open] .a p { scale: 1; opacity: 1; transition: scale .3s var(--ease) .05s, opacity .2s var(--ease) .05s; }
  }
  /* entrance: the visitor's questions arrive one by one from the right, then the shop's card from the left */
  .fq-pre details { opacity: 0; translate: 12px 0; }
  .fq-pre .faq-end { opacity: 0; translate: -14px 0; }
  .fq-go details, .fq-go .faq-end { opacity: 1; translate: 0 0; transition: opacity .4s var(--ease) var(--fd, 0ms), translate .5s var(--ease) var(--fd, 0ms); }
}
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 4rem; align-items: start; } .faq-side { position: sticky; top: 110px; } }


/* inner pages */
.page-head { padding: 4rem 0 1rem; }
.page-head h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
.page-head p { margin-top: .9rem; color: var(--ink-2); font-size: 1.1rem; max-width: 42rem; }
.channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.legal { display: grid; gap: 2.5rem; max-width: 52rem; }
.legal-toc { display: flex; flex-wrap: wrap; gap: .5rem; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-weight: 500; background: var(--card); }
.legal-toc a:hover { border-color: var(--ink); }
.legal-h { font-size: 1.8rem; margin: 1rem 0 .5rem; }
.legal-block { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.legal-block h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.legal-block p, .legal-block li { color: var(--ink-2); }
.legal-block ul { margin: .5rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* footer: minimal, three quiet rows and a faint end mark. Shops live in the section above, not here. */
.foot { position: relative; overflow: hidden; background: var(--night); color: var(--on-night-2); padding: 2.5rem 0 calc(6rem + env(safe-area-inset-bottom)); }
.foot-min { display: grid; gap: .5rem; font-size: .9rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; }
.foot-id { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: 4px; }
.foot-tel { color: var(--on-night); font-size: 1rem; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot a, .foot ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot-top { padding-bottom: .5rem; gap: .25rem 1.5rem; }
@media (max-width: 639px) { .foot-top ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 2rem; } }
.foot-legal { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; gap: .25rem 3rem; }
.foot-up { justify-content: center; }
.foot-up svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }
.foot-legal > span { padding: .25rem 0; margin-right: auto; }
.foot-legal ul { gap: 0 1rem; }
.foot-word { margin-top: 1.5rem; font-size: clamp(3rem, 16vw, 12rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; padding-bottom: .15em; text-align: center; white-space: nowrap; color: rgb(2 74 216 / .2); user-select: none; pointer-events: none; }
@media (min-width: 1024px) { .foot { padding-bottom: 0; } }

/* footer motion: app.js adds .fx only when motion is allowed. Wordmark rests as an outline; a light (cursor, touch, or one intro sweep) fills it solid.
   Entrance runs once: hairline draws, items rise in sequence, wordmark is cropped open bottom-to-top. Only opacity, translate, clip-path, mask. */
.fx .foot-word { position: relative; color: rgb(2 74 216 / .07); -webkit-text-stroke: 1.5px rgb(2 74 216 / .6); letter-spacing: -.035em; }
.fx .foot-word::after { content: attr(data-t); position: absolute; inset: 0; padding: inherit; text-align: inherit; color: color-mix(in srgb, var(--primary) 80%, #fff); -webkit-text-stroke: 0; opacity: 0;
  -webkit-mask-image: radial-gradient(circle var(--r, 1px) at var(--mx, 50%) var(--my, 50%), #000 40%, transparent 100%); mask-image: radial-gradient(circle var(--r, 1px) at var(--mx, 50%) var(--my, 50%), #000 40%, transparent 100%); }
.fx .foot-word.lit::after { opacity: 1; will-change: mask-image; }
.fx .foot a:hover { text-decoration: none; }

.fx .foot-legal { position: relative; border-top-color: transparent; }
.fx .foot-legal::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgb(255 255 255 / .1); transform-origin: 0 50%; }

.fx .foot-up svg { transition: translate .3s var(--ease), color .2s; }

.foot .tr > span + span { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fx .tr > span + span { display: block; }
  .fx .tr { display: inline-grid; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
  .fx .tr > span { grid-area: 1 / 1; display: block; transition: translate .38s var(--ease); }
  .fx .tr > span + span { translate: 0 120%; color: var(--on-night); }
  .fx a:is(:hover, :focus-visible) .tr > span:first-child { translate: 0 -120%; }
  .fx a:is(:hover, :focus-visible) .tr > span + span { translate: 0 0; }
}

.fx-pre .foot-word { clip-path: inset(100% -.1em -.1em -.1em); translate: 0 16px; }
.fx-pre .foot-legal::before { transform: scaleX(0); }
.fx-pre .fi { opacity: 0; translate: 0 8px; }
.fx-go .foot-word { clip-path: inset(-.1em); translate: 0 0; transition: clip-path .65s var(--ease) .2s, translate .65s var(--ease) .2s; }
.fx-go .foot-legal::before { transform: scaleX(1); transition: transform .9s var(--ease); }
.fx-go .fi { opacity: 1; translate: 0 0; transition: opacity .32s var(--ease) var(--fd, 0ms), translate .32s var(--ease) var(--fd, 0ms); }
@media (max-width: 639px) { .fx-go .foot-word { transition-duration: .4s; } .fx-go .fi { transition-delay: 0s; transition-duration: .2s; } }

/* sticky call bar (phones only) */
.callbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgb(251 251 250 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s var(--ease); }
.callbar.show { transform: none; }
.callbar .btn-ghost { border-color: var(--line); }
@media (min-width: 1024px) { .callbar { display: none; } }

/* ── phone refinements (audit round 1) ── */
@media (max-width: 639px) {
  /* service cards become compact rows: photo left, text right — halves the page length */
  .svc { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: none; }
  .svc-img { aspect-ratio: auto; height: 100%; min-height: 7.5rem; }
  .svc-body { padding: .9rem 1rem .4rem; gap: .35rem; }
  .svc-body h3 { font-size: 1.05rem; }
  .badge { left: .4rem; top: .4rem; font-size: .7rem; padding: .2rem .45rem; }
  .credit { display: none; }
  /* homepage only: 3-line teaser, the full text is one tap away on /services */
  /* narrow screens: widen the dark pool so the tagline never sits on a bright tile */
  .hero::after { background: radial-gradient(ellipse 95% 42% at 50% 48%, rgb(10 12 16 / .66), rgb(10 12 16 / .3) 65%, transparent 100%); }
  .section { padding: 3.5rem 0; }
  .review blockquote { font-size: .98rem; }
}

/* audit round 2 */
.model-help { margin-top: -.4rem; font-size: .9rem; color: var(--muted); }
.model-help summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--primary); font-weight: 500; }
.model-help p { margin-bottom: .5rem; }
@media (max-width: 767px) {
}

/* brand logos: equal hairline cells (ui-lab: ruixen/bordered-clients-grid, 7ovr/logo-cloud-1).
   Wordmarks share one width so a wide Samsung and a short Nokia read as the same size; Apple's taller mark is capped by height. */
/* brands: dark poster panel, big white logos, no boxes */
.brands { margin-top: 2.5rem; display: grid; gap: 1.75rem; padding: 2rem 1.5rem; background: var(--night); color: #fff; border-radius: 28px; }
.brands h3 { max-width: 16rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: #fff; }
.brands ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; align-items: center; }
.brands li { display: flex; align-items: center; min-height: 48px; }
.brands img { width: 100%; max-width: 6.5rem; height: auto; }
.brands li:first-child img { max-width: 4.6rem; } /* Apple: tall mark */
@media (min-width: 768px) {
  .brands { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; gap: 3rem; padding: 3rem; }
  .brands h3 { font-size: 1.75rem; }
  .brands ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2rem; }
  .brands img { max-width: 9rem; }
  .brands li:first-child img { max-width: 6rem; }
}

/* ── reviews: big score, glow, two drifting rows of real reviews ── */
.section-glow { position: relative; isolation: isolate; overflow: hidden; }
.section-glow::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -30%; width: 60rem; height: 40rem; pointer-events: none;
  background: radial-gradient(closest-side, rgb(2 74 216 / .38), rgb(2 74 216 / 0)); }
.section-glow::after { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -35%; width: 50rem; height: 34rem; pointer-events: none;
  background: radial-gradient(closest-side, rgb(47 107 240 / .16), rgb(47 107 240 / 0)); }
.rev-score { align-items: flex-end; gap: 1rem; margin-top: 1.25rem; }
.rev-score b { font-size: clamp(4.5rem, 12vw, 7rem); font-weight: 600; letter-spacing: -0.05em; line-height: .85; }
.rev-meta { display: grid; gap: .35rem; padding-bottom: .4rem; }
.rev-meta .stars svg { width: 1.3rem; height: 1.3rem; }

.rev-marquee { display: grid; gap: 1rem; margin-top: 3rem; }
.rev-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-track { display: flex; width: max-content; }
.rev-set { display: flex; gap: 1rem; padding-right: 1rem; }
.rev-row-l .rev-track { animation: revL 70s linear infinite; }
.rev-row-r .rev-track { animation: revR 80s linear infinite; }
@keyframes revL { to { transform: translateX(-50%); } }
@keyframes revR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rev-marquee:hover .rev-track, .rev-marquee.paused .rev-track { animation-play-state: paused; }
.rev-marquee .review { position: relative; flex: none; width: 21rem; padding-top: 2.6rem; background: linear-gradient(160deg, #1f232a 0%, #181b20 100%); border-color: rgb(255 255 255 / .09); }
.rev-marquee .review::before { content: "\201C"; position: absolute; left: 1.25rem; top: .55rem; font-size: 3.6rem; line-height: 1; font-weight: 600; color: #4f86f7; opacity: .9; }
.rev-marquee .review blockquote { font-size: .98rem; }
.rev-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; justify-content: center; margin-top: 1.25rem; padding: 0 .9rem; border: 1px solid rgb(241 242 239 / .3); border-radius: 99px; background: transparent; color: var(--on-night); font-family: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.rev-toggle:hover { background: rgb(255 255 255 / .08); }
@media (max-width: 639px) { .rev-marquee .review { width: 17rem; } .rev-marquee { margin-top: 2rem; } }

/* reduced motion: no drifting, a calm wrapped grid instead */
@media (prefers-reduced-motion: reduce) {
  .rev-row { -webkit-mask-image: none; mask-image: none; }
  .rev-track { width: auto; animation: none !important; }
  .rev-set { flex-wrap: wrap; padding-right: 0; }
  .rev-set.dup, .rev-toggle { display: none; }
  .rev-marquee .review { width: min(100%, 21rem); flex: 1 1 17rem; }
}

/* ── services (home): full-bleed photo cards in an uneven bento; caption sits on a solid dark foot so the text never fights the photo ── */
.sh-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; max-width: none; }
.sh-row > div { display: grid; gap: .75rem; max-width: 44rem; }
.sh-row .link { white-space: nowrap; }
.svc-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.svc-ov { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; border: 0; border-radius: 20px; overflow: hidden; background: var(--night); color: var(--on-night); isolation: isolate; }
.svc-ov:hover { box-shadow: none; transform: none; }
.svc-ov > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .25s var(--ease); }
.svc-ov .svc-cap { position: static; display: flex; flex-direction: column; gap: .35rem; padding: 4rem 1.25rem 1.25rem; background: linear-gradient(to top, var(--night) 0, var(--night) 62%, rgb(17 19 23 / 0) 100%); }
.svc-ov :is(h2, h3) { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; padding-right: 3.5rem; }
.svc-ov :is(h2, h3) a { text-decoration: none; color: inherit; }
.svc-ov :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.svc-ov :is(h2, h3) a:focus-visible { outline: none; }
.svc-ov:has(:is(h2, h3) a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.svc-ov p { color: var(--on-night-2); font-size: .96rem; max-width: 30rem; }
.svc-go { pointer-events: none; position: absolute; z-index: 1; top: 1rem; right: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--primary); box-shadow: 0 6px 18px rgb(17 19 23 / .28); transition: background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.svc-go svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; }
.svc-ov:hover > img { transform: scale(1.03); }
.svc-ov:hover .svc-go { background: var(--primary); color: #fff; transform: translate(2px, -2px); }
.svc-ov .badge { z-index: 1; }
.svc-ov .credit { z-index: 1; right: 1rem; bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { .svc-ov > img, .svc-go { transition: none; } .svc-ov:hover > img, .svc-ov:hover .svc-go { transform: none; } }
@media (min-width: 640px) { .svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .svc-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-bento .svc-ov { grid-column: span 3; min-height: 23rem; }
  .svc-bento .svc-ov:nth-child(1), .svc-bento .svc-ov:nth-child(5) { grid-column: span 6; }
}

/* ── reviews (home): one featured voice + a wall of paper cards on the dark slab; nothing moves ── */
.rev-count { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: 1rem; color: var(--on-night-2); }
.rev-count b { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.rev-count .stars svg { width: 1.2rem; height: 1.2rem; }
.rev-count a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night-2); text-underline-offset: 4px; }
.rev-count a:hover { color: #fff; }
.wall { display: grid; gap: 2rem; margin-top: 2.5rem; }
.wall-feature { margin: 0; display: grid; gap: 1.5rem; align-content: start; }
.wall-feature::before { content: "\201C"; font-size: 6rem; line-height: .6; font-weight: 700; color: #4f86f7; }
.wall-feature blockquote { margin: 0; font-size: clamp(1.6rem, 5.2vw, 2.4rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.wall-feature figcaption { display: flex; align-items: center; gap: .8rem; }
.wall-feature .ini { background: #fff; }
.wall-feature small { color: var(--on-night-2); }
.wall-cards { display: grid; gap: 1rem; padding-bottom: 1.5rem; }
.wcard { margin: 0; display: grid; gap: .75rem; align-content: start; padding: 1.25rem; background: var(--paper); color: var(--ink); border-radius: 16px; }
.wcard figcaption { display: flex; align-items: center; gap: .7rem; order: -1; }
.wcard blockquote { margin: 0; font-size: 1rem; line-height: 1.45; }
.wcard .stars svg { width: 1rem; height: 1rem; }
.ini { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.wcard figcaption span:last-child, .wall-feature figcaption span:last-child { display: grid; line-height: 1.25; }
.wcard figcaption b, .wall-feature figcaption b { font-weight: 600; }
.wcard small { color: var(--muted); font-size: .85rem; }
@media (min-width: 640px) { .wall-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .wall-cards > :nth-child(even) { transform: translateY(1.5rem); } }
@media (min-width: 1024px) { .wall { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 4rem; align-items: start; } .wall-feature { position: sticky; top: 110px; } }
/* phones only (<640px): score as a headline stat, the 7 paper cards become a swipe row (next card peeks), buttons follow the reviews */
@media (max-width: 639px) {
  #atsiliepimai > .wrap { display: flex; flex-direction: column; }
  #atsiliepimai .rev-head { display: contents; }
  #atsiliepimai .rev-count { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .9rem; row-gap: 0; margin-top: 1.25rem; }
  #atsiliepimai .rev-count b { grid-row: span 2; font-size: 4.2rem; line-height: .9; letter-spacing: -0.05em; }
  #atsiliepimai .rev-count .stars svg { width: 1.35rem; height: 1.35rem; }
  #atsiliepimai .rev-count a { min-height: 32px; }
  #atsiliepimai .wall { order: 1; gap: 1.5rem; margin-top: 2rem; }
  #atsiliepimai .wall-feature { gap: 1rem; }
  #atsiliepimai .wall-feature::before { font-size: 4.5rem; line-height: .55; }
  #atsiliepimai .wall-cards { display: flex; align-items: stretch; gap: .75rem; margin-inline: -1rem; padding: 0 1rem .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; overscroll-behavior-x: contain; scrollbar-width: none; }
  #atsiliepimai .wall-cards::-webkit-scrollbar { display: none; }
  #atsiliepimai .wcard { flex: 0 0 78%; scroll-snap-align: start; align-content: start; }
  #atsiliepimai .wcard.rv { opacity: 1; translate: none; } /* off-screen cards in the row must not wait for an entrance */
  #atsiliepimai .rev-head > .row { order: 2; display: grid; gap: .6rem; margin-top: 1.5rem; }
  #atsiliepimai .rev-head > .row .btn { justify-content: center; }
  #atsiliepimai .rev-note { order: 3; }
}

/* ── audit fixes ── */
/* 320px: the logo was squeezed to 12px by 134px of language switch + call + menu; the sticky bottom bar already offers the call */
.logo { flex: none; }
@media (max-width: 359px) { .top-call { display: none; } .logo img { height: 40px; } }
/* /services on phones: long text needs stacked cards, not the compact photo-left rows used on the home page */
@media (max-width: 639px) {
  .page-services .svc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .page-services .svc-img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .page-services .svc-body { padding: 1.1rem 1.25rem .75rem; gap: .6rem; }
  .page-services .svc-body h2 { font-size: 1.2rem; }
  .badge, .credit { font-size: .75rem; }
}
.svc-body h2 { font-size: 1.2rem; }
.shop h2 { font-size: 1.5rem; }
/* direct contact row under the request form */
.form-col { display: grid; gap: 1.25rem; min-width: 0; }
.direct { display: grid; gap: .25rem; padding: 0 .25rem; }
.direct p { color: var(--muted); font-size: .95rem; }
.direct ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.direct a { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .95rem; font-weight: 500; text-decoration: none; }
.direct a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.direct img { width: 20px; height: 20px; flex: none; }
@media (min-width: 640px) { .direct ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } }
.credit { font-size: .75rem; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }

/* /contact: six big buttons, two per row on phones */
@media (max-width: 639px) { .channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .channels .btn { width: 100%; } }

/* /contact: open directory of the six ways to reach us (real colour icons, no boxes) */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; max-width: 40rem; }
.chan { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .5rem .75rem; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.chan img { width: 32px; height: 32px; flex: none; }
.chan span { display: grid; min-width: 0; }
.chan b { font-size: 1rem; font-weight: 500; }
.chan small { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.chan-main b { color: var(--primary); font-weight: 600; }
.chan:hover { background: var(--primary-soft); }
.chan:hover b { text-decoration: underline; text-underline-offset: 4px; }
.chan:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .chan { transition: none; } }
@media (max-width: 639px) { .channels li:nth-child(-n+2) { grid-column: 1 / -1; } .chan small { overflow-wrap: normal; white-space: nowrap; } }
/* contact row under the form, bigger (Codex: option A) */
.direct { padding: 0; gap: 12px; }
.direct p { margin: 0; font-size: 15px; }
.direct ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.direct li { min-width: 0; }
.direct a { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.direct img { width: 28px; height: 28px; flex: none; }
.direct a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.direct a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 640px) { .direct ul { display: flex; flex-wrap: wrap; gap: 12px 28px; } }

/* /services: same photo bento as the home page, ten cards (2 wide, 6 medium, 2 wide), details in a quiet list below */
@media (min-width: 1024px) {
  .page-services .svc-bento .svc-ov { grid-column: span 4; }
  .page-services .svc-bento .svc-ov:nth-child(1), .page-services .svc-bento .svc-ov:nth-child(2), .page-services .svc-bento .svc-ov:nth-child(9), .page-services .svc-bento .svc-ov:nth-child(10) { grid-column: span 6; }
}

/* motion (Codex + ui-lab motion rules): calm, once-only entrances. Opacity + individual translate only; JS adds .rv/.rv-h to below-the-fold things, so nothing is hidden without it. */
@keyframes settle { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .page-head h1 { animation: settle .28s var(--ease) both; }
  .page-head p, .page-head .lede { animation: settle .32s .08s var(--ease) both; }

  .rv { opacity: 0; translate: 0 12px; }
  .rv.in { opacity: 1; translate: 0 0; transition: opacity .44s var(--ease) var(--d, 0ms), translate .44s var(--ease) var(--d, 0ms); }
  .brands.rv { translate: 0 0; } .brands.rv.in { transition-duration: .3s; }

  .rv-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .18em; margin: -.1em 0 -.18em; }
  .rv-h .w > span { display: inline-block; translate: 0 110%; }
  .rv-h.in .w > span { translate: 0 0; transition: translate .42s var(--ease) min(calc(var(--i) * 30ms), 120ms); }

  .btn:active { translate: 0 1px; transition: translate .1s; }

  /* hairline reading progress: scroll-driven, no JS, only where the browser supports it */
  @supports (animation-timeline: scroll()) {
    html::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); animation: readbar linear both; animation-timeline: scroll(root); z-index: 80; pointer-events: none; }
    @keyframes readbar { to { transform: scaleX(1); } }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) { .rv-h.in .w > span { transition-delay: 0s; } }

/* repair request form motion: confirmation and feedback only. Fields never wait on an animation, nothing moves while typing. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes ringclose { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  #uzklausa .req label, #uzklausa .req .lbl { transition: color .2s ease; }
  #uzklausa .req .field:focus-within > label, #uzklausa .req .field:focus-within > .lbl { color: var(--primary); }
  #uzklausa .devices span { transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease, scale .12s var(--ease); }
  #uzklausa .devices span svg { transition: color .15s ease, translate .22s var(--ease); }
  #uzklausa .devices input:checked + span svg { translate: 0 -2px; }
  #uzklausa .devices label:active span { scale: .97; }
  #uzklausa .chip { transition: background-color .12s ease, border-color .12s ease, color .12s ease, scale .12s var(--ease); }
  #uzklausa .chip:active { scale: .96; }
  #uzklausa .done-ico { position: relative; }
  #uzklausa .done-ico::after { content: ""; position: absolute; inset: -14px; border: 3px solid var(--primary); border-radius: 50%; -webkit-mask-image: conic-gradient(#000 var(--sweep), transparent 0); mask-image: conic-gradient(#000 var(--sweep), transparent 0); animation: ringclose .6s .05s var(--ease) both; }
  #uzklausa .done-ico .tick { animation-duration: .3s; animation-delay: .1s; }
}

/* model help: same open/close as the FAQ, plus a caret that turns */
#uzklausa .model-help summary { gap: .45rem; }
#uzklausa .model-help summary::after { content: ""; flex: none; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; }
#uzklausa .model-help[open] summary::after { rotate: 225deg; translate: 0 1px; }
@media (prefers-reduced-motion: no-preference) {
  #uzklausa .model-help summary::after { transition: rotate .25s var(--ease), translate .25s var(--ease); }
  @supports selector(::details-content) {
    #uzklausa .model-help::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .14s cubic-bezier(.4, 0, 1, 1), content-visibility .14s allow-discrete; }
    #uzklausa .model-help[open]::details-content { grid-template-rows: 1fr; transition: grid-template-rows .24s var(--ease), content-visibility .24s allow-discrete; }
    #uzklausa .model-help p { margin: 0; min-height: 0; overflow: hidden; padding-bottom: .5rem; opacity: 0; transition: opacity .1s linear, padding-bottom .14s linear; }
    #uzklausa .model-help:not([open]) p { padding-bottom: 0; }
    #uzklausa .model-help[open] p { opacity: 1; transition: opacity .22s var(--ease) .04s, padding-bottom .24s var(--ease); }
  }
}

/* reviews motion: the evidence never moves or waits. Only the surroundings react: the glow comes up once, the rating stars light in, the quote mark settles, and a hovered card gets a blue ring. */
@media (prefers-reduced-motion: no-preference) {
  #atsiliepimai.gl-pre::before, #atsiliepimai.gl-pre::after { opacity: 0; }
  #atsiliepimai.gl-go::before, #atsiliepimai.gl-go::after { transition: opacity .8s var(--ease); }
  #atsiliepimai.gl-pre .rev-count .stars svg { opacity: .2; }
  #atsiliepimai.gl-go .rev-count .stars svg { opacity: 1; transition: opacity .3s var(--ease) calc(150ms + var(--si, 0) * 70ms); }
  #atsiliepimai .rev-count .stars svg:nth-child(2) { --si: 1; } #atsiliepimai .rev-count .stars svg:nth-child(3) { --si: 2; }
  #atsiliepimai .rev-count .stars svg:nth-child(4) { --si: 3; } #atsiliepimai .rev-count .stars svg:nth-child(5) { --si: 4; }
  #atsiliepimai .wall-feature.rv::before { opacity: 0; scale: .7; transform-origin: 0 100%; }
  #atsiliepimai .wall-feature.rv.in::before { opacity: 1; scale: 1; transition: opacity .4s var(--ease) .2s, scale .5s var(--ease) .2s; }
}
@media (hover: hover) and (pointer: fine) {
  #atsiliepimai .wcard { position: relative; }
  #atsiliepimai .wcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px rgb(79 134 247 / .75), 0 14px 34px rgb(2 74 216 / .22); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #atsiliepimai .wcard::after { transition: opacity .2s ease; }
}
@media (hover: hover) and (pointer: fine) {
  #atsiliepimai .wcard:hover::after { opacity: 1; }
}

/* process + banner motion: a signal visits the four steps (0 / 700 / 1400 / 2100 ms), each icon does one small job, the dashes draw on ahead of it,
   then the banner's photos are dealt in from the direction of the last step. One pass, nothing loops. */
@keyframes stDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes stDot { from { opacity: .25; } to { opacity: 1; } }
@keyframes stScan { 50% { translate: 3px -2px; } }
@keyframes stTilt { 40% { rotate: -8deg; } }
@keyframes stPop { 50% { scale: 1.18; } }
@media (prefers-reduced-motion: no-preference) {
  .step-tile { transition: border-color .2s ease, box-shadow .25s ease, translate .25s var(--ease); }
  .steps li.act .step-tile { border-color: #4f86f7; box-shadow: 0 1px 0 #fff inset, 0 10px 26px rgb(2 74 216 / .22), 0 0 0 4px rgb(79 134 247 / .22); }
  .steps li.act .step-tile b { animation: stPop .3s var(--ease); }
  .steps li.act:nth-of-type(1) .step-tile g circle { animation: stDot .22s var(--ease) both; }
  .steps li.act:nth-of-type(1) .step-tile g circle:nth-child(2) { animation-delay: .07s; }
  .steps li.act:nth-of-type(1) .step-tile g circle:nth-child(3) { animation-delay: .14s; }
  .steps li.act:nth-of-type(2) .step-tile path[d^="M23 27"] { animation: stDraw .4s var(--ease) .1s both; }
  .steps li.act:nth-of-type(2) .step-tile circle[r="10"], .steps li.act:nth-of-type(2) .step-tile path[d^="M36.5"] { animation: stScan .45s var(--ease); }
  .steps li.act:nth-of-type(3) .step-tile path[d^="M43 7"], .steps li.act:nth-of-type(3) .step-tile path[d^="m33 17"], .steps li.act:nth-of-type(3) .step-tile path[d^="m24 26"] { transform-box: view-box; transform-origin: 17px 27px; animation: stTilt .45s var(--ease); }
  .steps li.act:nth-of-type(4) .step-tile path[d^="m16.5"] { animation: stDraw .45s var(--ease) .1s both; }
  .route mask path.m { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .steps.pre .route mask path.m { stroke-dashoffset: 1; }
  .steps.in .route mask path.m { stroke-dashoffset: 0; transition: stroke-dashoffset .45s linear var(--md, 0ms); }
  .steps.pre .route .ring, .steps.pre .route .head { opacity: 0; }
  .steps.in .route .ring, .steps.in .route .head { opacity: 1; transition: opacity .15s linear var(--rd, 0ms); }
  .steps.in .route { transition: none; }
  .cb-pre .cta-photos img { opacity: 0; translate: 0 -24px; }
  .cb-pre .cta-photos img:nth-child(1) { rotate: 4deg; } .cb-pre .cta-photos img:nth-child(2) { rotate: -1deg; } .cb-pre .cta-photos img:nth-child(3) { rotate: -5deg; }
  .cb-go .cta-photos img { opacity: 1; translate: 0 0; rotate: 0deg; transition: opacity .3s var(--ease) var(--pd, 0ms), translate .36s var(--ease) var(--pd, 0ms), rotate .36s var(--ease) var(--pd, 0ms), transform .35s var(--ease); }
}
@media (hover: hover) and (pointer: fine) {
  .step-tile { cursor: default; }
  .steps li:hover .step-tile { translate: 0 -3px; }
  #procesas .cta-band .btn:hover { transform: translateY(-1px); }
  #procesas .cta-band .btn:active { transform: translateY(1px); }
}

/* locations motion: photo wiped open then settled (clip-path + scale), static marker on today's hours, one hover on the photo and the pin. Text and status never move. */
#servisai .shop dt.today { position: relative; }
#servisai .shop dt.today::before { content: ""; position: absolute; left: -.7rem; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--primary); transform-origin: 50% 0; }
#servisai .shop dd.today { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  #servisai .shop img { transition: scale .6s var(--ease); }
  #servisai .shop:nth-child(1) img { transform-origin: 45% 55%; } #servisai .shop:nth-child(2) img { transform-origin: 50% 48%; }
  #servisai .shop.sh-pre img { clip-path: inset(0 100% 0 0); scale: 1.025; }
  #servisai .shop.sh-pre dt.today::before { scale: 1 0; }
  #servisai .shop.sh-go img { clip-path: inset(0); scale: 1; transition: clip-path .42s var(--ease) var(--sd, 0ms), scale .6s var(--ease) var(--sd, 0ms); }
  #servisai .shop.sh-go dt.today::before { scale: 1 1; transition: scale .3s var(--ease) calc(var(--sd, 0ms) + 420ms); }
  #servisai .shop .btn svg { transition: translate .16s var(--ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #servisai .shop:hover img { scale: 1.03; }
  #servisai .shop .btn-outline:hover svg { translate: 0 -2px; }
}

/* services + trust motion (see app.js). Classes x-pre / x-go exist only while the one-time entrance runs; all of it is gated for reduced motion. */
#paslaugos .svc-go { color: var(--primary); }
#paslaugos .svc-go svg { position: relative; }
#paslaugos .svc-ov:hover > img { transform: none; }
#paslaugos .svc-ov:hover .svc-go, #paslaugos .svc-ov:has(:is(h2, h3) a:focus-visible) .svc-go { background: var(--primary); color: #fff; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  #paslaugos .link svg { transition: translate .2s var(--ease); }
  #paslaugos .link:hover svg { translate: 3px 0; }
  #paslaugos .svc-go { transition: background-color .22s ease, color .22s ease; }
  #paslaugos .svc-go svg { transition: translate .22s var(--ease); }
  #paslaugos .svc-ov:hover .svc-go svg { translate: 2px -2px; }
  #paslaugos .svc-ov > img { transition: none; }
  #paslaugos .svc-ov { --w0: inset(0 0 100% 0); }
  @media (min-width: 1024px) {
    #paslaugos .svc-ov:nth-child(-n+3) { --w0: inset(0 100% 0 0); }
    #paslaugos .svc-ov:nth-child(n+5) { --w0: inset(0 0 0 100%); }
  }
  #paslaugos .svc-ov.x-pre > img { clip-path: var(--w0); scale: 1.06; }
  #paslaugos .svc-ov.x-pre .svc-cap :is(h2, h3, p) { opacity: 0; }
  #paslaugos .svc-ov.x-pre .svc-go { opacity: 0; translate: 0 6px; }
  #paslaugos .svc-ov.x-go > img { clip-path: inset(0); scale: 1; transition: clip-path .54s var(--ease) var(--sd, 0ms), scale .7s var(--ease) var(--sd, 0ms); }
  #paslaugos .svc-ov.x-go .svc-cap :is(h2, h3, p) { opacity: 1; transition: opacity .24s var(--ease) calc(var(--sd, 0ms) + 180ms); }
  #paslaugos .svc-ov.x-go .svc-go { opacity: 1; translate: 0 0; transition: opacity .24s var(--ease) calc(var(--sd, 0ms) + 180ms), translate .24s var(--ease) calc(var(--sd, 0ms) + 180ms), background-color .22s ease, color .22s ease; }
  #paslaugos .brands.x-pre { opacity: 0; }
  #paslaugos .brands.x-pre li { opacity: 0; translate: 0 8px; }
  #paslaugos .brands.x-go { opacity: 1; transition: opacity .18s ease; }
  #paslaugos .brands.x-go li { opacity: 1; translate: 0 0; transition: opacity .3s var(--ease) calc(120ms + var(--li, 0) * 50ms), translate .3s var(--ease) calc(120ms + var(--li, 0) * 50ms); }
  #paslaugos .brands li:nth-child(2) { --li: 1; } #paslaugos .brands li:nth-child(3) { --li: 2; } #paslaugos .brands li:nth-child(4) { --li: 3; } #paslaugos .brands li:nth-child(5) { --li: 4; } #paslaugos .brands li:nth-child(6) { --li: 5; }

  .trust .proof-score.x-pre .proof-n, .trust .proof-score.x-go .proof-n { display: block; overflow: hidden; padding-block: .12em; margin-block: -.12em; }
  .trust .proof-n > span { display: block; }
  .trust .proof-score.x-pre .proof-n > span { translate: 0 105%; }
  .trust .proof-score.x-go .proof-n > span { translate: 0 0; transition: translate .6s var(--ease); }
  .trust .proof-score.x-pre .stars { clip-path: inset(0 100% 0 0); }
  .trust .proof-score.x-go .stars { clip-path: inset(0); transition: clip-path .26s var(--ease) .16s; }
  .trust .proof-score.x-pre small { opacity: 0; }
  .trust .proof-score.x-go small { opacity: 1; transition: opacity .18s ease .4s; }
  .trust .proof-quote.x-pre { opacity: 0; translate: 0 6px; }
  .trust .proof-quote.x-go { opacity: 1; translate: 0 0; transition: opacity .24s var(--ease) .1s, translate .24s var(--ease) .1s; }
  .trust .proof-facts.x-pre li, .trust .proof-facts.x-go li { position: relative; border-color: transparent; }
  .trust .proof-facts.x-pre li::before, .trust .proof-facts.x-go li::before, .trust .proof-facts.x-pre li:last-child::after, .trust .proof-facts.x-go li:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
  .trust .proof-facts.x-pre li::before, .trust .proof-facts.x-go li::before { top: -1px; }
  .trust .proof-facts.x-pre li:last-child::after, .trust .proof-facts.x-go li:last-child::after { bottom: -1px; }
  @media (min-width: 768px) { .trust .proof-facts.x-pre li:nth-last-child(2)::after, .trust .proof-facts.x-go li:nth-last-child(2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform-origin: 0 50%; } }
  .trust .proof-facts.x-pre li::before, .trust .proof-facts.x-pre li::after { transform: scaleX(0); }
  .trust .proof-facts.x-go li::before, .trust .proof-facts.x-go li::after { transform: scaleX(1); transition: transform .3s var(--ease) calc(var(--fi, 0) * 70ms); }
  .trust .proof-facts li:nth-child(2) { --fi: 1; } .trust .proof-facts li:nth-child(3) { --fi: 2; } .trust .proof-facts li:nth-child(4) { --fi: 3; }
  .trust .proof-photo.x-pre { clip-path: inset(-40px -40px calc(100% + 40px) -40px); }
  .trust .proof-photo.x-pre img { scale: 1.04; }
  .trust .proof-photo.x-go { clip-path: inset(-40px); transition: clip-path .7s var(--ease); }
  .trust .proof-photo.x-go img { scale: 1; transition: scale .7s var(--ease); }
}

/* header motion: high-frequency navigation, so everything is quick and local; click targets never move or wait. The capsule morph stays as it was. */
.menu-btn svg path { transform-box: view-box; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: rotate(45deg) translateY(5px); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: rotate(-45deg) translateY(-5px); }
@media (prefers-reduced-motion: no-preference) {
  .menu-btn svg path { transition: transform .14s cubic-bezier(.2, .8, .2, 1), opacity .07s linear; }
  .nav-links a { transition: background-color .07s ease, color .1s ease; }
  .nav-links a:hover, .nav-links a:focus-visible { transition-duration: .1s; }
  .nav-links a svg { transition: translate .16s cubic-bezier(.2, .8, .2, 1); }
  .langs a { transition: background-color .07s ease; }
  .top-call { transition: background-color .1s ease, border-color .1s ease, transform .07s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover svg { translate: 1px -1px; }
  .langs a:not([aria-current="true"]):hover { background: var(--primary-soft); color: var(--primary-deep); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  /* the drawer is always mounted; a clipped surface opens from the corner under the menu button, links fade in with it. Rapid toggles retarget; nothing waits on a timer. */
  .nav-links, .nav-links.open { display: block; position: absolute; left: 8px; right: 8px; top: 72px; padding: .5rem 1rem 1rem; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate; }
  .nav-links { visibility: hidden; pointer-events: none; transition: visibility 0s linear .1s; }
  .nav-links.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-links::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 40px rgb(23 24 27 / .18); clip-path: inset(0 0 100% 100% round 24px); transition: clip-path .1s cubic-bezier(.2, .8, .2, 1); }
  .nav-links.open::before { clip-path: inset(0 round 24px); transition-duration: .16s; }
  .nav-links li { opacity: 0; translate: 0 -4px; transition: opacity .07s linear, translate .1s cubic-bezier(.2, .8, .2, 1); }
  .nav-links.open li { opacity: 1; translate: 0 0; transition: opacity .14s linear .03s, translate .16s cubic-bezier(.2, .8, .2, 1) .03s; }
}

/* other pages: services detail list opens like the FAQ, contact icons lift on hover */
@media (prefers-reduced-motion: no-preference) {
  .chan img, .direct a img { transition: translate .16s var(--ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chan:hover img, .direct a:hover img { translate: 0 -2px; }
}

/* repair details (services): a directory. Phones and tablets keep the native accordion; from 1024px a script builds a two-part view from the same <details> - ten names on the left, the chosen repair on a blue slab as tall as the list, so nothing jumps. */
.svc-details { margin-top: 4.5rem; }
.svc-details h2 { margin-bottom: 1.25rem; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.svc-details details { border-top: 1px solid var(--line); }
.svc-details details:last-of-type { border-bottom: 1px solid var(--line); }
.svc-details summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; padding: .9rem 0; cursor: pointer; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; list-style: none; }
.svc-details summary::-webkit-details-marker { display: none; }
.svc-details summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--ink-2); background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.svc-details details[open] summary::after { background-size: 100% 2px, 2px 0; }
.svc-details summary:hover, .svc-details summary:hover::after { color: var(--primary); }
.svc-details summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.svc-more { display: grid; justify-items: start; gap: .75rem; padding: 0 0 1.5rem; max-width: 40rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.svc-more ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.svc-more .link { font-weight: 600; }

.svc-dir { display: none; }
@media (min-width: 1024px) {
  .svc-details { margin-top: 6rem; }
  .svc-details h2 { margin-bottom: 2rem; }
  .svc-details.svc-js > details { display: none; }
  .svc-dir { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .svc-lst { position: relative; display: grid; align-content: start; border-top: 1px solid var(--line); }
  .svc-lst button { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; padding: .7rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-align: left; cursor: pointer; }
  .svc-lst button::after { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; opacity: 0; translate: -3px 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
  @media (hover: hover) { .svc-lst button:hover { color: var(--primary); } .svc-lst button:hover::after { opacity: .5; translate: 0 0; } }
  .svc-lst button[aria-selected="true"] { color: var(--primary); }
  .svc-lst button[aria-selected="true"]::after { opacity: 1; translate: 0 0; }
  .svc-bar { position: absolute; left: -.5rem; top: 0; width: 3px; height: var(--bh, 60px); translate: 0 var(--by, 0px); background: var(--primary); pointer-events: none; }
  .svc-lst button:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 6px; }
  .svc-pan { position: sticky; top: 7rem; display: grid; border-radius: 24px; background: var(--primary); color: #fff; }
  .svc-pan > div { grid-area: 1 / 1; display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; }
  .svc-pan > div.on { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
  .svc-pan .clip { min-height: 0; overflow: hidden; }
  .svc-pan .in { display: grid; justify-items: start; gap: 1.5rem; padding: 2.5rem; }
  .svc-pan h3 { max-width: 32rem; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
  .svc-pan p { max-width: 32rem; font-size: 1.25rem; line-height: 1.5; color: rgb(255 255 255 / .92); }
  .svc-pan a { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border-radius: var(--radius-btn); background: #fff; color: var(--primary); font-weight: 600; text-decoration: none; }
  .svc-pan a svg { width: 1.1rem; height: 1.1rem; }
  @media (hover: hover) { .svc-pan a:hover { background: #eef3ff; } .svc-pan a:hover svg { translate: 3px 0; } }
  .svc-pan a:active { scale: .97; }
  .svc-pan a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .svc-details summary, .svc-details summary::after { transition: color .15s ease; }
  .svc-details summary::after { transition: color .15s ease, background-size .2s var(--ease); }
  .svc-lst button { transition: color .12s ease-out; }
  .svc-lst button::after { transition: opacity .12s ease-out, translate .12s ease-out; }
  .svc-lst.ready .svc-bar { transition: translate .22s cubic-bezier(.2, .8, .2, 1), height .22s cubic-bezier(.2, .8, .2, 1); }
  /* switching: the leaving panel (.out) slips 4px away from the direction of travel and fades in 80ms; the entering one rises 6px from it over 180ms, heading, text and button 30ms apart */
  .svc-pan > div { transition: opacity .08s linear, visibility 0s .08s, grid-template-rows .18s ease-out; }
  .svc-pan > div.on { transition: opacity .18s cubic-bezier(.22, 1, .36, 1) .06s, visibility 0s, grid-template-rows .18s ease-out; }
  .svc-pan .in > * { translate: 0 calc(var(--dir, 1) * 6px); transition: translate .18s cubic-bezier(.22, 1, .36, 1); }
  .svc-pan .in > a { transition: translate .18s cubic-bezier(.22, 1, .36, 1), background-color .12s ease-out, scale .12s ease-out; }
  .svc-pan > div.on .in > * { translate: 0 0; transition-delay: .06s; }
  .svc-pan > div.on .in > p { transition-delay: .09s; }
  .svc-pan > div.on .in > a { transition: translate .18s cubic-bezier(.22, 1, .36, 1) .12s, background-color .12s ease-out, scale .12s ease-out; }
  .svc-pan > div.out .in > * { translate: 0 calc(var(--dir, 1) * -4px); transition: translate .08s linear; }
  .svc-pan > div.out .in > a { transition: translate .08s linear, background-color .12s ease-out, scale .12s ease-out; }
  .svc-pan a svg { transition: translate .12s ease-out; }
  .svc-pan a:active { transition-duration: .08s; }
  .svc-dir.svc-pre { opacity: 0; translate: 0 8px; }
  .svc-dir.svc-go { transition: opacity .2s ease-out, translate .2s ease-out; }
  @supports selector(::details-content) {
    .svc-details details::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .14s cubic-bezier(.4, 0, 1, 1), content-visibility .14s allow-discrete; }
    .svc-details details[open]::details-content { grid-template-rows: 1fr; transition: grid-template-rows .24s var(--ease), content-visibility .24s allow-discrete; }
    .svc-details .svc-more { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .1s linear, padding-bottom .14s linear; }
    .svc-details details:not([open]) .svc-more { padding-bottom: 0; }
    .svc-details details[open] .svc-more { opacity: 1; transition: opacity .22s var(--ease) .04s, padding-bottom .24s var(--ease); }
  }
}

/* x-ray bench (services), round 3 layout: a spec sheet. Intro on the left, the phone in the middle, one numbered index of the four parts on the right,
   joined to numbered pins by elbow leader lines through one shared gutter. A magnified x-ray lens (pointer, finger, row hover or a pin) shows the inside;
   a scanner beam runs once on first view. Without JS or with reduced motion the inside is simply shown.
   design: mode=Experience · macro=three-zone spec sheet · type=Onest · accent=#8fb4ff on --night */
.xray-sec { padding-block: 4rem; }
.xray-sec::before { opacity: .55; }
.xray-grid { display: grid; gap: 2.5rem; }
.xray-head { display: grid; gap: 1rem; justify-items: start; max-width: 30rem; }
.xray-head h2 { font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; color: #fff; }
.xray-head p { color: var(--on-night-2); font-size: 1.08rem; }
.xray-head .btn-ghost-light { background: transparent; }
.xray-head .btn-ghost-light:hover { background: rgb(255 255 255 / .08); }
.xray-head .row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }

.xray-stage { position: relative; isolation: isolate; display: grid; gap: 2rem; }
.xray-fig { position: relative; justify-self: center; width: min(58vw, 13.75rem); aspect-ratio: 579 / 1156; margin: 0; --r: 0px; touch-action: pan-y pinch-zoom; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .5)); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.xray-fig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.xray-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 28%, rgb(255 255 255 / .2) 40%, rgb(255 255 255 / .05) 48%, transparent 58%); -webkit-mask: url(/img/xray/phone-front.webp) center / 100% 100% no-repeat; mask: url(/img/xray/phone-front.webp) center / 100% 100% no-repeat; }

/* the lens: the wrapper owns the mask and never scales; only the picture inside is magnified around the lens centre */
.xray-lens { position: absolute; inset: 0; opacity: 0; -webkit-mask-image: radial-gradient(circle max(var(--r), .01px) at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r) - 14px), transparent var(--r)); mask-image: radial-gradient(circle max(var(--r), .01px) at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r) - 14px), transparent var(--r)); }
.xray-lens img { transform-origin: var(--mx, 50%) var(--my, 50%); scale: 1.35; }
.xray-lens::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .04) 0 1px, transparent 1px 4px), linear-gradient(rgb(79 134 247 / .08), rgb(79 134 247 / .08)); }
.xray-fig.lit .xray-lens, .xray-stage.on .xray-lens, .xray-fig.scan .xray-lens, .xray-fig.sweep .xray-lens { opacity: 1; }
.xray-stage.on .xray-lens { -webkit-mask-image: none; mask-image: none; }
.xray-stage.on .xray-lens img, .xray-fig.scan .xray-lens img, .xray-fig.sweep .xray-lens img { scale: 1; }
.xray-stage.on .xray-lens::after { display: none; }
.xray-fig.scan .xray-lens { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sy, -100px) - 64px), #000 calc(var(--sy, -100px) - 2px), #000 var(--sy, -100px), transparent calc(var(--sy, -100px) + 10px)); mask-image: linear-gradient(to bottom, transparent calc(var(--sy, -100px) - 64px), #000 calc(var(--sy, -100px) - 2px), #000 var(--sy, -100px), transparent calc(var(--sy, -100px) + 10px)); }
.xray-beam { position: absolute; left: -6%; right: -6%; top: 0; height: 1px; translate: 0 var(--sy, -100px); background: linear-gradient(90deg, transparent, #b7ceff, transparent); box-shadow: 0 0 12px 2px rgb(121 164 255 / .6); opacity: 0; pointer-events: none; }
.xray-fig.scan .xray-beam, .xray-fig.sweep .xray-beam { opacity: 1; }
/* show / hide: everything above the beam is the inside (the first-view scan shows only a band behind it) */
.xray-fig.sweep .xray-lens { -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--sy, 0px) - 2px), transparent calc(var(--sy, 0px) + 10px)); mask-image: linear-gradient(to bottom, #000 calc(var(--sy, 0px) - 2px), transparent calc(var(--sy, 0px) + 10px)); }
.xray-ring { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; translate: calc(var(--mx, 0px) - var(--r)) calc(var(--my, 0px) - var(--r)); border: 1px solid rgb(183 206 255 / .85); box-shadow: 0 0 0 1px rgb(2 74 216 / .3), 0 0 34px rgb(79 134 247 / .4), inset 0 0 20px rgb(79 134 247 / .2); opacity: 0; pointer-events: none; }
.xray-fig.lit .xray-ring { opacity: 1; }
.xray-stage.on .xray-ring { opacity: 0; }

/* numbered pins are real buttons: tap or Enter pins the lens on that part, Escape releases it; the number matches the index row */
.xray-pin { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: manipulation; }
.xray-pin::before { content: attr(data-n); position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: #f1f2ef; color: #0d1a36; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 3px rgb(79 134 247 / .35); opacity: .78; }
.xray-pin.hot::before, .xray-pin[aria-pressed="true"]::before { opacity: 1; background: #8fb4ff; box-shadow: 0 0 0 5px rgb(79 134 247 / .45); }
.xray-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 1.5px solid #8fb4ff; opacity: 0; pointer-events: none; }
.xray-pin.hot::before { scale: 1.12; }
.xray-pin:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }

/* the index: hairline-ruled rows, no boxes; the symptom is always readable, the row lights up when its part is in the lens */
.xray-parts { list-style: none; margin: 0; padding: 0; display: grid; }
.xray-parts li { position: relative; }
.xray-parts li + li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(255 255 255 / .12); transform-origin: 0 50%; }
.xray-parts a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .5rem; row-gap: .2rem; padding: 1rem .75rem; border-radius: 10px; color: #fff; text-decoration: none; }
.xray-parts i { grid-row: 1 / span 3; font-style: normal; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--on-night-2); padding-top: .3rem; }
.xray-parts b { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.xray-parts small { color: var(--on-night-2); font-size: .95rem; line-height: 1.45; max-width: 30rem; }
.xray-parts span { justify-self: start; padding-bottom: 2px; color: #8fb4ff; font-size: .875rem; font-weight: 500; margin-top: .15rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; }
.xray-parts a.hot { background-color: rgb(79 134 247 / .13); }
.xray-parts a.hot i { color: #8fb4ff; }
.xray-parts a:hover span, .xray-parts a.hot span, .xray-parts a:focus-visible span { background-size: 100% 1px; }
.xray-parts a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.xray-note { color: var(--on-night-2); font-size: .85rem; }
.xray-lines { display: none; }
[data-xray-toggle] { min-width: var(--tw, 0); }

@media (min-width: 700px) {
  .xray-stage { grid-template-columns: auto minmax(0, 1fr); column-gap: 4.5rem; row-gap: 2.5rem; }
  .xray-fig { width: 15.5rem; }
  /* four equal rows the height of the phone, so every row sits near its part and a symptom never moves an anchor */
  .xray-parts { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .xray-parts li { display: grid; align-content: center; }
  .xray-note { grid-column: 1 / -1; }
  .xray-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
  .xray-lines path { fill: none; }
  .xray-lines .base { stroke: rgb(255 255 255 / .2); stroke-width: 1; }
  .xray-lines .acc { stroke: #8fb4ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  .xray-lines .acc.hot { stroke-dashoffset: 0; opacity: 1; }
}
@media (min-width: 1100px) {
  .xray-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: 4rem; align-items: center; }
  .xray-sec { padding-block: 5.5rem; }
  .xray-fig { width: 18.75rem; }
  .xray-stage { column-gap: 5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .xray-lens, .xray-ring { transition: opacity .2s ease; }
  .xray-parts a { transition: background-color .15s ease; }
  .xray-parts i { transition: color .15s ease; }
  .xray-pin::before { transition: opacity .15s ease, box-shadow .15s ease, background-color .15s ease, scale .15s var(--ease); }
  .xray-lines .acc { transition: stroke-dashoffset .18s ease-out, opacity .12s ease .06s; }
  .xray-lines .acc.hot { transition: stroke-dashoffset .18s ease-out, opacity .05s ease; }
  .xray-pin.ping::after { animation: xrPing .8s ease-out; }
  @keyframes xrPing { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.6; } }
  .xray-parts li + li::before { transition: scale .4s var(--ease); }
  .xray-parts span { transition: background-size .2s var(--ease); }
  [data-xray-toggle] { transition: background-color .15s ease, border-color .15s ease, transform .15s ease, color .1s ease; }
  [data-xray-toggle].swap { color: transparent; }
  /* first view only (script-added): hairlines wait for the beam; lede, buttons and note rise once. Text and links are never hidden. */
  .xr-hide .xray-parts li:not(.seen)::before { scale: 0 1; }
  .xr-pre .xray-head p, .xr-pre .xray-head .row, .xr-pre .xray-note { opacity: 0; translate: 0 8px; }
  .xr-go .xray-head p, .xr-go .xray-head .row, .xr-go .xray-note { transition: opacity .45s var(--ease), translate .45s var(--ease); }
  .xr-go .xray-head .row { transition-delay: .07s; }
  .xr-go .xray-note { transition-delay: .35s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .xray-fig { transition: transform .18s ease-out; } }

/* ── audit fixes, round 2 (phone + desktop audits 2026-10-25) ── */
/* PH-02: the magnified lens picture is only for looking; it must never catch taps meant for the buttons above the phone */
.xray-lens, .xray-lens img, .xray-ring { pointer-events: none; }
/* PH-01: below 400px the call button went (the call bar offers it), so the menu button always fits with the 16px gutter */
@media (max-width: 399px) { .top-call { display: none; } .logo img { height: 40px; } }
/* D-01 / PH-07: the logo shrinks inside the floating capsule (scale, so nothing else moves) */
.logo img { transform-origin: 0 50%; transition: scale .3s var(--ease); }
.top.is-scrolled .logo img { scale: .8; }
/* PH-30: a long menu scrolls instead of running off a short screen */
@media (max-width: 1023px) { .nav-links.open { max-height: calc(100dvh - 88px); overflow-y: auto; } }
/* PH-03 / PH-06: the call bar steps aside while typing, and in landscape (header + bar took a third of the screen) */
.callbar.typing { transform: translateY(110%); }
@media (max-height: 450px) and (orientation: landscape) { .callbar { display: none; } .foot { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); } }
/* honeypot field for the request form: out of sight and out of reach for people */
.hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* F-02 / F-03: the error text sits under its own field */
.ferr { margin: .35rem 0 0; font-size: .875rem; line-height: 1.4; color: #b42318; font-weight: 500; }
/* D-04: a phone number under the route button lines up with the button's edge */
.shop .row .btn-ghost { padding-inline: 0; }
/* D-02: the contact details are the most important text on the contact page */
.chan small { font-size: 1rem; color: var(--ink-2); }
/* M-01 / PH-08: hover lifts and zooms only where a pointer can hover (a tap must not leave them stuck) */
@media (hover: none) {
  .svc:hover { transform: none; box-shadow: none; }
  .devices label:hover span { transform: none; }
  .steps li:hover .step-tile { translate: none; }
  #servisai .shop:hover img { scale: none; }
  .chan:hover img, .direct a:hover img { translate: none; }
  .svc-ov:hover > img { transform: none; }
}

/* D-03: both brand rows start on the same line */
/* D-05: service captions reserve two description lines, so neighbouring cards start their titles at the same height */
@media (min-width: 640px) { .svc-ov .svc-cap p { min-height: 3em; } }
/* PH-10: on phones the footer links sit in tidy columns instead of a ragged wrap */
@media (max-width: 639px) {
  .foot-legal { justify-content: flex-start; }
  .foot-legal nav { width: 100%; }
  .foot-legal nav ul { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 1.5rem; }
  .foot-legal .foot-up { margin-left: -.35rem; }
}
/* phones only (<640px): footer rebuilt as a hierarchy - phone number as the headline, two labelled link columns (labels come from each nav's aria-label, so they follow the page language),
   a hairline, legal links with a round back-to-top button, then the small print and the wordmark. Rows are placed explicitly; desktop and tablet keep the rules above. */
@media (max-width: 639px) {
  .foot .foot-min { padding-inline: .7rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; align-items: start; font-size: .95rem; }
  .foot .foot-row, .foot .foot-id { display: contents; }
  .foot .foot-min ul { display: block; }
  .foot .foot-tel { grid-row: 1; grid-column: 1 / -1; min-height: 0; padding: .2rem 0 1.5rem; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: #fff; }
  .foot .foot-top nav { grid-row: 2; grid-column: 2; }
  .foot .foot-legal nav:nth-of-type(2) { grid-row: 2; grid-column: 1; }
  .foot .foot-top nav::before, .foot .foot-legal nav:nth-of-type(2)::before { content: attr(aria-label); display: block; margin-bottom: .25rem; padding-bottom: .5rem; border-bottom: 1px solid rgb(255 255 255 / .14); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #a9c4ff; }
  .foot .foot-min li a { min-height: 48px; font-size: 1.1rem; color: #fff; }
  .foot .foot-top li a { font-size: .98rem; color: #aeb7c8; }
  .foot .foot-min::before { content: ""; grid-row: 3; grid-column: 1 / -1; height: 1px; margin-top: 1.5rem; background: rgb(255 255 255 / .12); }
  .foot .foot-legal { border-top: 0; margin: 0; padding: 0; }
  .foot.fx .foot-legal::before { display: none; }
  .foot .foot-legal nav:nth-of-type(1) { grid-row: 4; grid-column: 1 / -1; align-self: center; padding-right: 3.5rem; }
  .foot .foot-legal nav:nth-of-type(1) ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .foot .foot-legal nav:nth-of-type(1) a { min-height: 48px; font-size: .84rem; }
  .foot .foot-legal .foot-up { grid-row: 4; grid-column: 1 / -1; justify-self: end; align-self: center; width: 44px; height: 44px; margin: 0; border: 1px solid rgb(255 255 255 / .14); border-radius: 50%; color: #fff; }
  .foot .foot-legal > span { grid-row: 5; grid-column: 1 / -1; margin: 0; padding: .1rem 0 0; font-size: .75rem; line-height: 1.5; color: #a6adb7; }
  .foot .foot-word { margin-top: 2rem; font-size: 20.5vw; letter-spacing: -.045em; padding-bottom: .25em; -webkit-mask-image: linear-gradient(180deg, #000 38%, rgb(0 0 0 / .18)); mask-image: linear-gradient(180deg, #000 38%, rgb(0 0 0 / .18)); }
  .foot.fx .foot-word { color: rgb(2 74 216 / .12); -webkit-text-stroke-color: rgb(79 134 247 / .85); }
}
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) {
  .foot.fx-pre .foot-min::before { transform: scaleX(0); transform-origin: 0 50%; }
  .foot.fx-go .foot-min::before { transform: scaleX(1); transition: transform .9s var(--ease); }
}

/* ── upgrade 2026-10-30 (audit-2026-10-30/UPGRADE-PLAN.md): proof in the first screen, calls first, shorter phone sections ── */
/* request form: what you get, in the empty desktop column; optional details folded away */
.form-points { display: none; }
@media (min-width: 1024px) {
  .form-points { display: grid; gap: .8rem; list-style: none; margin: .75rem 0 0; padding: 0; }
  .form-points li { display: flex; gap: .7rem; align-items: baseline; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
  .form-points li::before { content: ""; flex: none; width: .55rem; height: .3rem; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); rotate: -45deg; translate: 0 -.2rem; }
}
.req-more { border: 1.5px solid #d3d5d0; border-radius: 16px; background: var(--paper); }
.req-more > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px; padding: .6rem 1rem; cursor: pointer; list-style: none; font-weight: 500; font-size: .95rem; border-radius: 14px; }
.req-more > summary::-webkit-details-marker { display: none; }
.req-more > summary svg { flex: none; width: 1.15rem; height: 1.15rem; transition: rotate .25s var(--ease); }
.req-more[open] > summary svg { rotate: 180deg; }
.req-more > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.req-more-body { display: grid; gap: 1.25rem; padding: .25rem 1rem 1.1rem; }
@media (hover: hover) and (pointer: fine) { .req-more > summary:hover { color: var(--primary); } }
@media (max-width: 639px) {
  .req { gap: 1.1rem; padding: 1.25rem; }
  /* device tiles: icon beside the word, 2 x 2, short */
  .req-more .devices span { flex-direction: row; justify-content: flex-start; min-height: 3.25rem; padding: .6rem .75rem; gap: .55rem; text-align: left; font-size: .9rem; }
  .req-more .devices span svg { width: 1.5rem; height: 1.5rem; }
}

/* shop cards: calling is the main action */
.shop .row .btn-primary { padding-inline: 1.1rem; }
.shop .row .btn-outline { padding-inline: 1rem; }
@media (max-width: 639px) {
  .shop .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .shop .row .btn { justify-content: center; }
  /* "212 Google atsiliepimai ->": the arrow stays with the words when they wrap */
  .proof-score small { display: block; min-height: 0; padding: .55rem 0; line-height: 1.35; }
  .proof-score small svg { display: inline; vertical-align: -.15em; margin-left: .3rem; }
}

/* reviews: smaller featured quote, a request button after the proof */
.wall-feature blockquote { font-size: clamp(1.4rem, 4.4vw, 1.75rem); line-height: 1.3; }
.rev-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .12); }
.rev-cta b { font-size: 1.3rem; font-weight: 600; color: #fff; }
@media (max-width: 639px) {
  #atsiliepimai .rev-cta { order: 1; display: grid; gap: .75rem; margin-top: 1.75rem; padding-top: 1.5rem; }
  #atsiliepimai .rev-cta .btn { justify-content: center; }
  #atsiliepimai .rev-head > .row .btn-primary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
}

/* process cards on phones: same sticky stack, about a third shorter (icon beside the text) */
@media (max-width: 639px) {
  .steps li { grid-template-columns: 52px minmax(0, 1fr); gap: .9rem; min-height: 0; padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px; }
  .steps li::after { top: .5rem; right: .85rem; font-size: 2.8rem; }
  .step-tile { width: 52px; height: 52px; border-radius: 16px; }
  .step-tile svg { width: 30px; height: 30px; }
  .step-text { gap: .3rem; }
  .step-text h3 { padding-right: 2.6rem; }
  .step-text h3 { font-size: 1.15rem; line-height: 1.25; }
  .step-text p { font-size: .97rem; line-height: 1.45; }
}
@media (max-width: 639px) and (max-height: 500px) { .steps li { position: static; } }
.step-text a { color: var(--primary); text-underline-offset: 3px; }

/* FAQ: the hint line is gone; on phones the answer gets the full width (no avatar) */
@media (max-width: 639px) {
  .faq .a .av { display: none; }
  .faq .a p { max-width: none; }
}
.faq .a a { color: var(--primary); font-weight: 500; text-underline-offset: 3px; }

/* contact page: ways to reach us first, shops second */
.contact-top .section-head { margin-bottom: 1.5rem; }
@media (max-width: 639px) {
  .contact-top { padding-top: 2rem; }
  .contact-top .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .5rem; }
  .contact-top .channels li:nth-child(-n+2) { grid-column: 1 / -1; }
  .contact-top .chan { padding-inline: .5rem; }
  /* the number itself is the headline of this page */
  .contact-top .chan-main small { font-size: 1.75rem; line-height: 1.2; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
}

/* light <-> dark edges: the dark slabs are rounded sheets, not flat cuts (echoes the rounded CTA band; the wave stays the hero's own).
   overflow: clip keeps the desktop sticky quote working (hidden would make a scroll container).
   The reviews sheet overlaps the cloud form section by its radius, so its bottom corners show cloud, not a paper notch. */
#atsiliepimai, .foot { --edge: 28px; overflow: clip; }
#atsiliepimai { border-radius: var(--edge); z-index: 1; }
#atsiliepimai + .section-cloud { margin-top: calc(var(--edge-next, 28px) * -1); padding-top: calc(3.5rem + var(--edge-next, 28px)); }
.foot { border-radius: var(--edge) var(--edge) 0 0; padding-top: 3rem; }
@media (min-width: 768px) {
  #atsiliepimai, .foot { --edge: clamp(40px, 5vw, 64px); }
  #atsiliepimai + .section-cloud { --edge-next: clamp(40px, 5vw, 64px); padding-top: calc(4.5rem + var(--edge-next)); }
  .foot { padding-top: 4rem; }
}
@media (min-width: 1024px) { #atsiliepimai + .section-cloud { padding-top: calc(6rem + var(--edge-next)); } }
/* pages that end on a cloud section: it runs under the footer's top corners (no paper notch between cloud and dark) */
main > .section-cloud:last-child { margin-bottom: calc(var(--edge-foot, 28px) * -1); padding-bottom: calc(3.5rem + var(--edge-foot, 28px)); }
@media (min-width: 768px) { main > .section-cloud:last-child { --edge-foot: clamp(40px, 5vw, 64px); padding-bottom: calc(4.5rem + var(--edge-foot)); } }
@media (min-width: 1024px) { main > .section-cloud:last-child { padding-bottom: calc(6rem + var(--edge-foot)); } }
.foot { z-index: 1; }

/* x-ray on phones (owner sketch + Codex): no list under the phone; a tapped number opens its card right over the phone,
   joined to the number by a leader (below the number for the top half, above it for the bottom half). Without JS the list stays. */
@media (max-width: 699px) {
  .xr-cards .xray-parts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .xr-cards .xray-parts li { position: absolute; left: 0; right: 0; top: var(--card-top, 0); display: none; pointer-events: auto; }
  .xr-cards .xray-parts li.is-open { display: block; }
  .xr-cards .xray-parts li.above { top: auto; bottom: var(--card-bottom, 0); }
  /* the leader: from the number's edge to the card */
  .xr-cards .xray-parts li::before, .xr-cards .xray-parts li + li::before { content: ""; position: absolute; left: var(--pin-x); right: auto; top: calc(var(--lead) * -1); width: 2px; height: var(--lead); margin-left: -1px; background: #8fb4ff; scale: 1; transform: none; border-radius: 2px; }
  .xr-cards .xray-parts li.above::before { top: 100%; }
  .xr-cards .xray-parts a, .xr-cards .xray-parts a.hot { padding: 1rem 1rem 1.05rem; border-radius: 16px; background: rgb(22 31 50 / .96); border: 1px solid rgb(143 180 255 / .55); box-shadow: 0 18px 40px rgb(0 0 0 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .xr-cards .xray-parts a i { color: #8fb4ff; }
  .xr-cards .xray-parts span { background-size: 100% 1px; }
  .xr-cards .xray-pin[aria-pressed="true"] { z-index: 4; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .xr-cards .xray-parts li.is-open { animation: xrCard .22s var(--ease) both; }
  .xr-cards .xray-parts li.is-open.above { animation-name: xrCardUp; }
}
@keyframes xrCard { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes xrCardUp { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
/* while a card is open, the other numbers step back (a card may cover them, and a tap there must not hit the card's link); a tap outside brings them back */
@media (max-width: 699px) {
  .xr-cards:has(.xray-pin[aria-pressed="true"]) .xray-pin:not([aria-pressed="true"]) { opacity: 0; pointer-events: none; }
}
/* they fade out when a card opens, but come back at once when it closes (the transition lives only on the hidden state) */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) { .xr-cards:has(.xray-pin[aria-pressed="true"]) .xray-pin:not([aria-pressed="true"]) { transition: opacity .15s ease; } }
/* close button on the phone card: 44px target in the top-right corner */
.xray-close { display: none; }
@media (max-width: 699px) {
  .xr-cards .xray-close { display: grid; place-items: center; position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--on-night-2); cursor: pointer; }
  .xr-cards .xray-close svg { width: 18px; height: 18px; stroke-width: 2.2; }
  .xr-cards .xray-close:active { background: rgb(255 255 255 / .1); color: #fff; }
  .xr-cards .xray-close:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
  .xr-cards .xray-parts a { padding-right: 3rem; }
}