@font-face{font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ---------- Fonts: self-hosted (no requests to Google = no visitor IP sent to a third party).
   Figtree (variable font, one file per subset covers every weight) for all text. Only latin + latin-ext (Czech diacritics) subsets. SIL Open Font License. ---------- */
:root{
  color-scheme: light;
  --bg:#f1f0ee;
  --bg-edge:#c9c7c8;
  --surface:#ffffff;
  --surface-alt:#e7e5e3;
  --ink:#1b303b;
  --ink-soft:#4b6067;
  --ink-faint:#5f7377;
  --navy-deep:#1b303b;
  --navy-mid:#25414d;
  --teal:#0ea895;
  --teal-strong:#0b8676;
  --teal-soft:#dcf0ec;
  --blue:#4a86c8;
  --line:#d8d5d3;
  --white:#ffffff;
  --shadow: 0 20px 45px -25px rgba(27,48,59,.45);
  --radius-lg: 28px;
  --radius-md: 18px;
  --font-display:'Figtree', -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:'Figtree', -apple-system, Segoe UI, Roboto, sans-serif;
}
/* Pinned to light on purpose: no prefers-color-scheme / [data-theme] dark overrides at all.
   A light, airy look suits a medical practice, reads best for an older audience, and the hero
   composite is designed for a light surround. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,3.6vw,3.1rem); font-weight:500;}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);}
h3{font-size:1.3rem;}
h4{font-size:1.05rem; font-family:var(--font-body); font-weight:700;}
p{margin:0 0 1em; color:var(--ink-soft);}
.lede{font-size:1.1rem;}

.eyebrow{
  display:flex; align-items:center;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 .6em;
}
.eyebrow::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--teal); margin-right:.6em; flex-shrink:0;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:.85em 1.5em; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:2.5px solid var(--teal); outline-offset:3px;}
.btn--teal{background:var(--teal); color:#fff;}
.btn--teal:hover{background:var(--teal-strong);}
.btn--outline{background:transparent; border-color:currentColor;}
.btn--ghost-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55);}
.btn--ghost-light:hover{background:rgba(255,255,255,.22);}

/* ---------- Floating nav : persists over the whole page. The hamburger icon is a
   permanent fixture, always in the same spot, right of the text links — it does NOT
   toggle with scroll any more. Only the viewport-width media query below removes the
   text links (narrow screens); the icon itself never moves or disappears. ---------- */
.floating-nav{
  position:fixed; top:calc(1.75rem - 5px); right:calc(clamp(1.75rem,4vw,3.5rem) - 15px); z-index:50;
  display:flex; align-items:center; gap:1.1rem;
}
.floating-nav-links{display:none; align-items:center; gap:1.8rem;}
/* Text links only on a real computer (mouse + wide screen); phones and tablets — in either
   orientation — always get just the collapsed hamburger. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .floating-nav-links{display:flex;}
}
.floating-nav-links a{
  font-weight:700; font-size:1.2rem; text-decoration:none; color:var(--teal);
}
.floating-nav-links a:hover{color:var(--teal-strong);}
.floating-nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.3rem; height:2.3rem; padding:0; margin:0;
  background:none; border:none; color:var(--teal); cursor:pointer;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.floating-nav-toggle svg{width:28px; height:28px; display:block; stroke-width:2.4;}
.floating-nav-dropdown{
  position:absolute; top:calc(100% + .6rem); right:0; min-width:170px;
  background:var(--surface); border-radius:16px; padding:.6rem;
  box-shadow:0 20px 44px -14px rgba(18,49,60,.35);
  display:flex; flex-direction:column; gap:.15rem;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}
.floating-nav-dropdown a{
  padding:.6rem .8rem; border-radius:10px; font-weight:600; font-size:.92rem;
  color:var(--ink); text-decoration:none;
}
.floating-nav-dropdown a:hover{background:var(--surface-alt);}
.floating-nav.is-open .floating-nav-dropdown{opacity:1; visibility:visible; transform:translateY(0);}
/* The hamburger icon itself is always visible (set above) and never moves — only the text
   links hide, either once the page scrolls past the top or once the viewport gets narrow. */
.floating-nav.is-scrolled .floating-nav-links{display:none;}
@media (max-width:389px){
  .floating-nav{top:calc(1rem - 5px); right:calc(1rem - 15px); padding:.5rem;}
  .floating-nav-links{display:none;}
}
/* Homepage only (.has-hero-tagline modifier — informace.html has no hero photo/tagline to
   collide with, so it keeps the plain 389px threshold above): text links need to hide much
   earlier than 389px because they'd otherwise collide with the centered .hero-tagline. Both
   elements' horizontal position in VIEWPORT coordinates are predictable (the tagline's center
   always sits at viewport-width/2, since .hero-stage-wrap flexbox-centers the oversized stage;
   the nav's own left edge is viewport-width minus its ~341px content minus its right-offset),
   so there's a single crossover width below which they always overlap. Measured empirically
   (Range.getBoundingClientRect() on the tagline's text vs. the nav-links' own rect): -13px
   (overlapping) at 1300px, +33px (clear) at 1400px — crossover ≈1328px. 1400px is the
   show-threshold, a comfortable margin past the bare crossover point. Below it the hamburger
   alone represents the menu at every width, not just on phones — a deliberate departure from
   the plain 389px rule above, needed only where the tagline is actually in the way. */

/* ---------- Hero tagline : single line, overlaid ON the photo (not a separate band above
   it — that was rejected: "nyní je nad obrázkem, to nechci"), positioned inside .hero-stage
   so it scales in cqw exactly like .hero-photo-text and stays put over the top light-gray
   band of the image (measured clean of the circle/decorations down to ~y110 of 900). Dark
   ink, not white — that band is light gray, not photo-dark, so white would be unreadable.
   Centered horizontally at the STAGE's own midpoint (50%), which — unlike the left-aligned
   .hero-photo-text block — stays visually centered in the cropped viewport at any width,
   since .hero-stage-wrap centers the oversized stage via flexbox around that same midpoint. */
.hero-tagline{
  position:absolute; left:50%; top:4.5%; transform:translateX(-50%);
  width:100%; text-align:center; white-space:nowrap;
  /* Fixed dark navy, NOT var(--ink) — this text sits directly on the photo's own fixed
     light-gray pixels, which don't change with the site's light/dark theme, so the text color
     must stay fixed too. Using var(--ink) here meant it turned near-white in dark mode (ink
     flips light→dark), leaving near-white text with a white glow on the still-light-gray photo
     band underneath — read as "blurry" since there was almost no edge contrast left. Same
     reasoning already applied correctly to .hero-photo-text and .hero-tagline-mobile, which are
     hardcoded #fff for the same reason (they sit on the photo's dark circle instead). */
  font-family:var(--font-body); font-weight:500; color:#1b303b;
  font-size:1.35cqw; line-height:1.2; text-transform:uppercase; letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(255,255,255,.6);
}
.hero-tagline strong{font-weight:700;}
/* Mobile: the 440px-tall crop window only ever shows the stage's own vertical MIDDLE
   (roughly y230-670 of 900) — top:4.5% (~y40) falls outside that and would simply vanish, so
   below 580px it moves into .hero-mobile-overlay instead (see that block, near
   .hero-photo-text-mobile) — overlaid on the photo like everything else here, rather than
   flowing below it in the page background. */
.hero-tagline-mobile{ display:none; }
@media (max-width:580px){
  .hero-tagline{ display:none; }
}

/* ---------- Hero : single final composite image (background.png), native 1920x900.
   Enlarges above native width, crops the sides (never shrinks) below it — the stage is pinned
   to at least 1920px and centered via left:50%/translateX(-50%), which centers correctly whether
   the stage ends up wider OR narrower than its wrapper. ---------- */
.hero{background:var(--bg); position:relative;}
/* Centered via flexbox, not top:50%/left:50%+transform — a percentage `top` on a
   position:relative child only resolves against a containing block with an EXPLICITLY set
   height, and this wrapper's height is auto-from-content on desktop (only mobile gets an
   explicit height below), so that version silently no-opped the vertical centering and only
   translateY ran, cutting the image off halfway and exposing this wrapper's own background
   color for the rest — invisible in light mode (close to the photo's own light gray) but a
   stark black band in dark mode, which is how this got caught. Flexbox alignment has no such
   caveat: it centers correctly regardless of whether the wrapper's height is auto or explicit. */
.hero-stage-wrap{
  width:100%; overflow:hidden; background:var(--bg-edge); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-stage{
  width:100%; min-width:1920px; aspect-ratio:1920/900; flex-shrink:0;
  position:relative;
  container-type:inline-size;
}
@media (max-width:580px){
  /* must be `height`, not `max-height` — percentage `top` on a `position:relative` child only
     resolves against a containing block with an explicitly-set height; `max-height` doesn't
     count for that rule, so `top:50%` above was silently computing to `auto` (ignored) and
     only the translateY(-50%) half of the centering ran, shoving the visible crop way too far
     up and cutting off the whole top half of the image instead of centering it. */
  .hero-stage-wrap{height:440px;}
}
.hero-bg-layer{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
/* Text position measured directly off the composite (left-aligned, over the dark/hair half of
   the photo circle): left=685px, top=286px, width=395px out of the 1920x900 canvas (recropped asset).
   Sized in container-query units (cqw) so text scales with the STAGE's own rendered width —
   i.e. it enlarges together with the image above 1920px, and stays full native size (never
   shrinks) when the image is cropped below 1920px, exactly like the image itself. */
/* Font/size/color/line-height all measured directly off the original composite's baked-in
   text: a geometric sans (not the site's serif display face), pure white throughout (no
   teal), eyebrow in normal sentence case (no uppercase, no bullet), loose paragraph leading. */
.hero-photo-text{
  position:absolute;
  left:35.68%; top:31.78%; width:25%;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  font-family:var(--font-body);
}
.hero-photo-text .eyebrow{
  color:#fff; font-weight:700; text-transform:none; letter-spacing:0;
  font-size:1.05cqw; white-space:nowrap; margin-bottom:.7em; text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.hero-photo-text .eyebrow::before{display:none;}
.hero-photo-text h1{
  font-family:inherit; color:#fff; font-weight:500;
  font-size:2.9cqw; margin:0 0 .55em; line-height:1.08; white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.hero-photo-text p{
  color:#fff; font-weight:400; font-size:.85cqw; margin:0 0 1em; line-height:1.75; text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.hero-photo-text .btn{ font-family:var(--font-body); font-size:.95cqw; padding:.8em 1.4em; white-space:nowrap; margin-left:2.6042cqw; }

/* Staggered reveal : eyebrow/h1/p/button fade + rise in one after another on every load
   (including a reload, not just first visit — a plain CSS load-triggered animation, not a
   scroll/IntersectionObserver trigger, runs again every time the document parses). Reduced
   motion is already handled globally (see the *{animation-duration:.001ms!important} rule
   near the top), so no separate opt-out needed here. */
@keyframes heroTextReveal{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-photo-text .eyebrow, .hero-photo-text h1, .hero-photo-text p,
.hero-photo-text-mobile .eyebrow, .hero-photo-text-mobile h1, .hero-photo-text-mobile p{
  opacity:0; animation:heroTextReveal .84s ease forwards;
}
.hero-photo-text .btn, .hero-photo-text-mobile .btn{
  opacity:0; animation:heroTextReveal .98s ease forwards;
}
/* text group (eyebrow/h1/p) slowed 20% from the original .7s/.15-.55s timings; the button
   was slowed separately, 40% from ITS original .7s/.75s — not stacked on top of the text's
   20%, each figure is its own multiplier off the original design. */
.hero-photo-text .eyebrow, .hero-photo-text-mobile .eyebrow{ animation-delay:.18s; }
.hero-photo-text h1, .hero-photo-text-mobile h1{ animation-delay:.42s; }
.hero-photo-text p, .hero-photo-text-mobile p{ animation-delay:.66s; }
.hero-photo-text .btn, .hero-photo-text-mobile .btn{ animation-delay:1.05s; }

/* Mobile: once the crop gets narrow enough that the left-biased .hero-photo-text would itself
   get cropped (its span, 685-1165px of the 1920px stage, is only fully visible once the
   viewport is at least ~550px wide — the crop window is centered on the stage's OWN midpoint,
   960px, not on the text's own midpoint), swap to .hero-mobile-overlay instead: a combined,
   CENTERED block (tagline + eyebrow/h1/p/button together) overlaid on the photo rather than
   flowing below it in the page background — centering sidesteps the crop-floor problem
   entirely, the same way .hero-tagline itself doesn't need a hard floor. 580px keeps a small
   safety margin above the ~550px floor that .hero-photo-text (still shown above 580px) needs. */
.hero-photo-text-mobile{ display:none; }
.hero-mobile-overlay{ display:none; }
@media (max-width:580px){
  .hero-photo-text{ display:none; }
  .hero-mobile-overlay{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:85vw; max-width:400px;
    font-family:var(--font-body);
  }
  .hero-tagline-mobile{
    display:block; color:#fff; font-family:inherit; font-weight:500; text-transform:uppercase;
    font-size:clamp(.7rem,3.2vw,.84rem); line-height:1.3; margin:0 0 .6em;
    text-shadow:0 1px 4px rgba(0,0,0,.45);
  }
  .hero-tagline-mobile strong{font-weight:700;}
  .hero-photo-text-mobile{
    display:flex; flex-direction:column; align-items:center; text-align:center; width:100%;
  }
  .hero-photo-text-mobile .eyebrow{color:#fff; justify-content:center; font-size:clamp(.62rem,2.3vw,.72rem); font-weight:700; text-transform:none; letter-spacing:0; text-shadow:0 1px 4px rgba(0,0,0,.4);}
  .hero-photo-text-mobile .eyebrow::before{display:none;}
  .hero-photo-text-mobile h1{font-family:inherit; color:#fff; font-weight:500; font-size:clamp(1.25rem,5.6vw,1.6rem); margin:0 0 .3em; line-height:1.12; text-shadow:0 1px 6px rgba(0,0,0,.45);}
  .hero-photo-text-mobile p{color:#fff; font-weight:400; font-size:clamp(.76rem,2.4vw,.86rem); line-height:1.45; margin:0 0 .65em; text-shadow:0 1px 4px rgba(0,0,0,.4);}
  .hero-photo-text-mobile .btn{font-size:clamp(.76rem,2.4vw,.86rem); padding:.6em 1.15em;}
}
.hero-cta-bar{
  display:flex; justify-content:center;
  max-width:1180px; margin-inline:auto;
  padding:clamp(1rem,2.5vw,1.5rem) clamp(1.25rem,4vw,2.5rem);
}
.hero-cta-bar .note{color:var(--ink-faint); font-size:.9rem; text-align:center;}

/* ---------- Trust strip ---------- */
.trust{padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,6vw,5rem); background:var(--bg);}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;
}
.trust-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:1.6rem 1.4rem;
}
.trust-card.featured{border:2px solid var(--teal);}
.trust-card-head{display:flex; align-items:center; gap:.85rem; margin-bottom:.6rem;}
.trust-icon{width:clamp(34px,5.5vw,44px); height:auto; flex-shrink:0;}
.trust-card h4{margin-bottom:0; color:var(--teal-strong);}
.trust-card p{font-size:.92rem; margin:0; color:var(--ink-soft);}
@media (max-width:920px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trust-grid{grid-template-columns:1fr;} }

/* ---------- Mission ---------- */
.mission{background:var(--bg); padding-block:clamp(3.5rem,6vw,5.5rem);}
.mission-inner{max-width:800px;}
.mission .callout{
  font-weight:700; color:var(--ink);
}
.mission .callout.big{
  font-size:1.2rem; background:var(--teal-soft); border-radius:var(--radius-md);
  padding:1.3rem 1.5rem; margin-top:1.5rem; color:var(--teal-strong);
}
.rule{border:none; border-top:1px solid var(--line); width:64px; margin:0 0 1.5rem;}

/* ---------- Split sections ---------- */
.split{padding-block:clamp(3.5rem,6vw,5.5rem); background:var(--bg);}
.split.alt{background:var(--bg);}
.split-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.split-grid.reverse .split-media{order:2;}
.split-grid.reverse .split-text{order:1;}
.split-media img{
  width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.split-media.circle img{border-radius:50%; aspect-ratio:1; object-fit:cover;}
.split-media.pad{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; display:flex; align-items:center; justify-content:center;
}
.split-media.pad img{border-radius:0; box-shadow:none;}
/* transparent cut-out (no card, no shadow, no rounding) so it sits straight on the section background */
.split-media.cutout{display:flex; justify-content:center;}
.split-media.cutout img{max-width:480px; border-radius:0; box-shadow:none;}
/* the hand is cropped flat at the bottom: on desktop sit it on the section's bottom edge */
/* Second, smaller circle overlapping the main one (in-the-ear aid next to the behind-the-ear
   one in "Sluchadla jsou standardně takhle malá") */
.split-media.circle{position:relative;}
.split-media.circle .circle-inset{
  position:absolute; left:-6%; bottom:-4%; width:44%;
  border:6px solid var(--bg); object-position:62% 50%;
}
@media (max-width:860px){ .split-media.circle .circle-inset{left:0; width:40%;} }
@media (max-width:860px){
  .split-grid, .split-grid.reverse{grid-template-columns:1fr;}
  .split-grid.reverse .split-media, .split-grid.reverse .split-text{order:initial;}
}

/* ---------- Team ---------- */
.team{padding-block:clamp(3.5rem,6vw,5.5rem); background:var(--bg);}
.team-head{margin-bottom:clamp(2rem,4vw,3rem);}
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,2.5rem);}
.doctor{display:flex; flex-direction:column; gap:1.1rem; height:100%;}
.doctor-photo{
  width:112px; height:112px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-alt); border:1px solid var(--line);
}
.doctor-photo img{width:100%; height:100%; object-fit:cover;}
.doctor-id{display:flex; align-items:center; gap:1rem;}
.doctor-id h3{margin:0;}
.doctor-id .role{color:var(--teal); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;}
.doctor p{font-size:.94rem; margin:0;}
@media (max-width:760px){ .team-grid{grid-template-columns:1fr;} }

/* ---------- Contact ---------- */
.contact{padding-block:clamp(3.5rem,6vw,5.5rem); background:var(--bg);}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);}
.notice-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem;}
.notice{
  background:var(--teal-soft); color:var(--teal-strong); font-weight:700; font-size:.85rem;
  padding:.6em 1em; border-radius:999px;
}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem;}
.info-block h6{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem;
  color:var(--ink-faint); margin:0 0 .5em; font-weight:700;
}
.info-block a, .info-block address{
  font-style:normal; font-weight:600; color:var(--ink); text-decoration:none; display:block;
}
.info-block a.map-link{color:var(--teal); font-weight:700; font-size:.88rem; margin-top:.4em;}
.info-block .fine{font-size:.82rem; color:var(--ink-faint); margin-top:.4em;}
@media (max-width:640px){ .info-grid{grid-template-columns:1fr;} }
.transit{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.5rem 1.6rem;
}
.transit h4{margin-bottom:.75em; color:var(--teal-strong);}
.transit dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:.9rem;}
.transit dt{font-weight:700; color:var(--ink);}
.transit dd{margin:0; color:var(--ink-soft);}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }

/* ---------- Footer: the booking call-to-action (eyebrow / "Zavolejte nám" / phone) on every
   page, plus the copyright under a thin divider. Navigation stays in the floating menu. ---------- */
footer.site{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid));
  padding-block:clamp(1.75rem,3.5vw,2.5rem) 1rem; text-align:center;
}
footer.site .eyebrow{color:#8fd8c9; justify-content:center; margin-bottom:.2rem;}
footer.site .eyebrow::before{display:none;}
footer.site a.phone-link{
  font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.1rem);
  color:#fff; text-decoration:none; font-weight:500; display:inline-block; line-height:1.15;
}
footer.site a.phone-link:hover{color:#8fd8c9;}
.footer-fine{
  font-size:.8rem; color:#7f9c95; margin:1rem 0 0;
  padding-top:.85rem; border-top:1px solid rgba(255,255,255,.08);
}

/* ==================================================================================
   Informace subpage — shares every component above; these are additions only.
   ================================================================================== */

/* ---------- Page header band (navy gradient, like the footer, used as a page-title
   banner on subpages that don't have their own hero photo) ---------- */
.page-header{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid));
  padding-block:clamp(6.5rem,11vw,9rem) clamp(2.75rem,5vw,4rem);
  text-align:center; color:#fff;
}
.page-header .eyebrow{color:#8fd8c9; justify-content:center;}
.page-header .eyebrow::before{background:#8fd8c9;}
.page-header h1{color:#fff; max-width:26ch; margin-inline:auto;}
.page-header p{color:#cfe0dc; max-width:640px; margin:0 auto; font-size:1.05rem;}

/* ---------- Section intro (eyebrow/h2/lede stacked above content, reused across
   several Informace sections) ---------- */
.section-intro{max-width:760px; margin-bottom:clamp(1.75rem,3.5vw,2.5rem);}
.section-intro.center{margin-inline:auto; text-align:center;}
.section-intro.center .eyebrow{justify-content:center;}

/* ---------- Warning callout : bordered (not filled) so it reads as an important
   notice without introducing a new color outside the established palette. ---------- */
.warning-box{
  background:var(--surface); border:2px solid var(--teal); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem); margin-block:2rem;
}
.warning-box h4{color:var(--teal-strong); margin-bottom:.6em; font-size:1.1rem;}
.warning-box p{color:var(--ink); font-weight:600; margin:0; font-size:1.02rem; line-height:1.65;}
.warning-box p + p{margin-top:1em;}
.wrap > .warning-box:first-child{margin-top:0;}

/* ---------- Myths & facts grid ---------- */
.myth-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
.myth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem 1.6rem;}
.myth-card .verdict{
  display:inline-block; font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--teal-strong); background:var(--teal-soft); padding:.3em .75em; border-radius:999px; margin-bottom:.7em;
}
.myth-card h4{color:var(--navy-deep); margin-bottom:.4em; font-size:1rem;}
.myth-card p{margin:0; font-size:.92rem;}
@media (max-width:760px){ .myth-grid{grid-template-columns:1fr;} }

/* ---------- Exam-types definition list ---------- */
.exam-list{display:flex; flex-direction:column; gap:1.35rem; margin:0;}
.exam-list dt{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--ink); margin-bottom:.25em;}
.exam-list dd{margin:0; color:var(--ink-soft);}

/* ---------- Pricing tiers ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
.pricing-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.75rem;}
.pricing-card.featured{border-color:var(--teal); box-shadow:var(--shadow);}
.pricing-card h4{margin-bottom:.3em; font-size:1.1rem;}
.pricing-card .price{font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--teal-strong); margin-bottom:.15em;}
.pricing-card .copay{font-size:.85rem; color:var(--ink-faint); margin-bottom:.9em;}
.pricing-card p{font-size:.9rem; margin:0;}
@media (max-width:860px){ .pricing-grid{grid-template-columns:1fr;} }

/* ---------- Hearing-aid shapes/sizes grid ---------- */
.shape-lead-img{width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:clamp(2rem,4vw,2.75rem);}
.shape-list{display:grid; gap:1.25rem;}
.shape-row{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(1.25rem,3vw,2.25rem);
  align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1rem,2vw,1.4rem);
}
.shape-row img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:var(--radius-md);}
.shape-row h3{font-size:clamp(1.3rem,2.4vw,1.6rem); color:var(--teal-strong); margin-bottom:.4em;}
.shape-row p{margin:0; font-size:.95rem;}
.shape-row strong{color:var(--ink);}
@media (max-width:760px){
  .shape-row{grid-template-columns:1fr;}
  .shape-row > div{padding:0 .25rem .35rem;}
}

/* ---------- Insurance company chips ---------- */
.insurance-list{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 0; padding:0;}
.insurance-list li{
  list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.5em 1.1em; font-size:.88rem; font-weight:600; color:var(--ink);
}

/* ---------- Plain content section (no image, just wrap + prose) ---------- */
.info-section{padding-block:clamp(3rem,5.5vw,4.5rem); background:var(--bg);}
.info-section.alt{background:var(--bg);}

/* ---------- Manufacturer logo strip (homepage mission + Informace). Two of the four source
   logos ship on their own colored backgrounds (Oticon dark, ReSound red), so every logo sits in
   an identical white tile — they read as one row of badges instead of mismatched cut-outs. ---------- */
.brand-strip-label{
  margin:2.25rem 0 .9rem; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
}
.brand-strip{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;}
.brand-strip li{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  height:84px; padding:.9rem 1rem; display:flex; align-items:center; justify-content:center;
}
.brand-strip img{max-height:44px; max-width:100%; width:auto; object-fit:contain;}
@media (max-width:640px){ .brand-strip{grid-template-columns:repeat(2,1fr);} }

/* ---------- FAQ ---------- */
.faq-list{display:grid; gap:1.25rem; max-width:860px; margin-inline:auto;}
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3vw,2rem);
}
.faq-item h3{font-size:clamp(1.1rem,2vw,1.3rem); margin-bottom:.7em;}
.faq-item ul{margin:0 0 1em; padding-left:1.2em; color:var(--ink-soft);}
.faq-item li{margin-bottom:.3em;}
.faq-item p:last-child{margin-bottom:0;}

/* ---------- Exam list + audiokomora photo ---------- */
.exam-layout{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.75rem,4vw,3rem); align-items:start;}
.exam-photo{margin:0;}
.exam-photo img{width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow);}
.exam-photo figcaption{margin-top:.75rem; font-size:.88rem; color:var(--ink-faint);}
@media (max-width:860px){ .exam-layout{grid-template-columns:1fr;} }

/* ---------- Hearing-aid fitting steps: vertical timeline (reads top-to-bottom, no orphan
   card on any width — the 7 steps don't divide evenly into a grid) ---------- */
.steps{list-style:none; margin:0 auto; padding:0; counter-reset:step; max-width:760px;}
.steps li{
  counter-increment:step; position:relative;
  padding:0 0 1.6rem 4rem;
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-.15rem;
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem;
  box-shadow:0 0 0 5px var(--bg);
}
.steps li::after{
  content:""; position:absolute; left:1.25rem; top:2.5rem; bottom:.1rem;
  width:2px; transform:translateX(-50%); background:var(--line);
}
.steps li:last-child{padding-bottom:0;}
.steps li:last-child::after{display:none;}
.steps h4{margin:0 0 .3em; font-size:1.08rem;}
.steps p{margin:0;}

/* ---------- Kontakty: operator details — legally required, deliberately low-key at the
   bottom of the contact page rather than in the sitewide footer ---------- */
.operator{margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.25rem; border-top:1px solid var(--line);}
.operator h6{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  color:var(--ink-faint); margin:0 0 .4em; font-weight:700;
}
.operator p{font-size:.82rem; color:var(--ink-faint); margin:0;}

.operator p + p{margin-top:.5rem;}
.operator-link{color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px;}
.operator-link:hover{color:var(--ink-soft);}

/* ---------- Ochrana osobních údajů (legal text page, not in the menu) ---------- */
.legal-text{max-width:780px;}
.legal-text h2{font-size:clamp(1.3rem,2.2vw,1.6rem); margin:2.2rem 0 .7rem;}
.legal-text h3{font-size:1.1rem; margin:1.4rem 0 .5rem;}
.legal-text ul{margin:0 0 1em; padding-left:1.2em; color:var(--ink-soft);}
.legal-text li{margin-bottom:.35em;}
.legal-text a{color:var(--teal-strong);}
.legal-text strong{color:var(--ink);}
.legal-date{margin-top:2.5rem; font-size:.85rem; color:var(--ink-faint);}

/* ---------- Homepage image+text sections as white cards — same visual language as the
   Sluchadla page (shape rows, myths, FAQ): white surface, light border, teal accents. ---------- */
.home-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
.home-card h4{color:var(--teal-strong);}
.home-card .callout{color:var(--teal-strong); font-weight:700; margin-top:1.4em;}
.home-card .circle-inset{border-color:var(--surface);}
/* styly.png is a transparent cut-out — keep the white tile it used to have on the Sluchadla page */
.shape-lead-img{background:var(--surface); box-sizing:border-box; padding:clamp(1.5rem,6vw,4.5rem) max(clamp(1.25rem,6vw,4rem), calc((100% - 751px) / 2));}
.home-card .split-text > .btn{display:flex; width:fit-content; margin-inline:auto;}
.home-card .btn--outline{color:var(--teal-strong); border-color:var(--teal-strong);}

/* Soft mint "badge" — highlights key info without looking clickable */
.home-card .callout.badge{
  display:inline-block;
  background:rgba(11,134,118,.09); border-radius:999px; padding:.6em 1.1em;
}
@media (max-width:580px){ .home-card .callout.badge{border-radius:16px;} }

/* One-time reveal (only when JS is on and the visitor hasn't asked for reduced motion) */
.js-reveal .reveal{opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s ease;}
.js-reveal .reveal.is-visible{opacity:1; transform:none;}
/* Card headings: fill the line naturally (balance made them wrap early) */
.home-card h2{text-wrap:pretty;}

/* Mobile tagline sits at the top of the hero, centred, on the same line as the hamburger button
   (toggle: top 24px, 37px tall, ~14px from the right edge) — not inside the centred text block. */
@media (max-width:580px){
  .hero-tagline-mobile{
    position:absolute; z-index:2; top:47.5px; transform:translateY(-50%); left:52px; right:52px; margin:0;
    text-align:center; text-wrap:balance;
  }
}

/* Uniform page background (no alternating grey bands) — on the homepage the white cards do the
   separating, so consecutive card sections sit closer together. */
.mission, .split, .team{padding-block:clamp(.85rem,1.8vw,1.4rem);}
.trust{padding-bottom:clamp(.85rem,1.8vw,1.4rem);}
.team{padding-bottom:clamp(3rem,5vw,4.5rem);}

/* Homepage: centred hero tagline would collide with the nav text links below 1400px, so there
   only the hamburger shows (temporary until Martin picks a solution). */
@media (max-width:1399px){
  .floating-nav.has-hero-tagline .floating-nav-links{display:none;}
}
/* Sluchadla page: no eyebrow labels any more — give each section heading more air above it */


/* Phones: tighter page gutter and card padding — more room for text on narrow screens
   (text column ~310px instead of ~280px at 375px wide). Tablet/desktop unchanged. */
@media (max-width:580px){
  .wrap{padding-inline:12px;}
  .home-card, .trust-card, .myth-card, .faq-item, .transit, .pricing-card, .shape-row,
  .warning-box{padding-left:18px; padding-right:18px;}
}
/* Sluchadla page: section headings in green (variant B chosen by Martin); legal page headings stay dark */
.info-section .wrap:not(.legal-text) h2{color:var(--teal-strong);}
/* Sluchadla page header: one long sentence as the h1 — smaller than a normal page title */
.page-header h1.h1-long{max-width:34ch; font-size:clamp(1.45rem,3vw,2.3rem); line-height:1.25;}

/* ---------- Sluchadla page tidy-up (2026-10-09) ----------
   Sections were separated by ~170–200px of empty background; now one even rhythm.
   All section headings left-aligned (as on the homepage); loose prose sits in white cards
   like the rest of the content, with a readable line length. */
.info-section{padding-block:clamp(1.5rem,3vw,2.25rem);}
.info-section .wrap > :last-child{margin-bottom:0;}
.section-intro{margin-bottom:clamp(1.25rem,2.5vw,1.75rem);}
.steps{margin-inline:0;}
.text-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.text-card > :first-child{margin-top:0;}
.text-card > :last-child{margin-bottom:0;}
.text-card .insurance-list{margin:0 0 1.25rem;}
.text-card .insurance-list li{background:var(--bg);}
@media (max-width:580px){ .text-card{padding-left:18px; padding-right:18px;} }
/* One reading column for the whole Sluchadla page: every section the same width, so headings,
   cards and grids share the same left/right edges and lines of text stay a comfortable length. */
.info-section .wrap, .contact .wrap{max-width:calc(920px + 2 * clamp(1.25rem,4vw,2.5rem));}
.info-section .faq-list{max-width:none; margin-inline:0;}
.info-section .steps{max-width:none;}

/* ---------- Sluchadla + Kontakt: one shared card inset ----------
   Every card on these pages uses the same horizontal padding (--card-pad-x), and the loose
   text between cards (section headings, intros, labels, notes) is indented by that same amount,
   so headings line up with the text inside the white cards. */
:root{ --card-pad-x:clamp(1rem,2.4vw,1.5rem); }
@media (max-width:580px){ :root{ --card-pad-x:12px; } }
.info-section :is(.text-card, .myth-card, .faq-item, .pricing-card, .warning-box),
.contact :is(.text-card, .transit){ padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
.info-section :is(.section-intro, .brand-strip-label, .steps),
.info-section .wrap > p,
.contact :is(.notice-row, .operator){ padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
.contact .operator{ border-top:0; margin-top:clamp(1.5rem,3vw,2.25rem); padding-top:0; }
/* Kontakt page: same rhythm as Sluchadla; address/phone/e-mail now in a white card beside the transit card */
.contact{padding-block:clamp(1.5rem,3vw,2.25rem);}
.contact-grid{gap:1.25rem; align-items:stretch;}
.contact-card .info-grid{grid-template-columns:1fr; gap:1.25rem; margin:0;}
.contact .transit{border-radius:var(--radius-lg); padding-top:clamp(1.5rem,3.5vw,2.5rem); padding-bottom:clamp(1.5rem,3.5vw,2.5rem);}
.notice-row{margin-bottom:1.25rem;}
/* Homepage cards use the same horizontal inset as the rest of the site */
.home-card, .trust-card{ padding-left:var(--card-pad-x); padding-right:var(--card-pad-x); }
/* Inline green highlight for a key phrase inside running text */
mark.hl{background:rgba(11,134,118,.12); color:var(--teal-strong); font-weight:600; padding:.05em .3em; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
/* Myth cards: the myth (question) first with its number in a teal circle, then the verdict pill */
.myth-card h4{display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.6em;}
.myth-num{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--teal); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:.85rem; font-weight:700; margin-top:-.15em;
}

/* Sluchadla page: quick in-page navigation under the title */
.page-toc{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1.6rem auto 0; max-width:760px;}
.page-toc a{
  color:#fff; text-decoration:none; font-weight:600; font-size:.88rem;
  padding:.5em 1em; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  transition:background .15s ease, border-color .15s ease;
}
.page-toc a:hover, .page-toc a:focus-visible{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5);}
.info-section[id]{scroll-margin-top:1rem;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
/* Manufacturers card: green heading like the warning box, logos sit right under the card */
.brand-card h4{color:var(--teal-strong); font-size:1.1rem; margin-bottom:.6em;}
.brand-card + .brand-strip{margin-top:1.25rem;}
/* Paragraphs: avoid a lonely last word/line (supported browsers; others fall back to normal wrapping) */
p, li, dd{text-wrap:pretty;}

/* "5 nejčastějších obtíží" — numbered list inside the "Proč řešit" card */
.symptoms{margin:1.5rem 0; padding:1.25rem 0; border-block:1px solid var(--line);}
.symptoms h4{color:var(--teal-strong); font-size:1.1rem; margin-bottom:.8em;}
.symptom-list{list-style:none; margin:0 0 1rem; padding:0; counter-reset:sym; display:grid; gap:.6rem;}
.symptom-list li{counter-increment:sym; display:flex; gap:.65rem; align-items:flex-start;}
.symptom-list li::before{
  content:counter(sym); flex:none; width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--teal); color:#fff; font-weight:700; font-size:.82rem;
  display:inline-flex; align-items:center; justify-content:center; margin-top:.05em;
}
.symptoms > p{margin:0; font-weight:600; color:var(--teal-strong);}
/* Price-category comparison table */
.compare-card{margin-top:1.25rem;}
.compare-card h4{color:var(--teal-strong); font-size:1.1rem; margin-bottom:.8em;}
.compare-scroll{overflow-x:auto;}
.compare{width:100%; border-collapse:collapse; font-size:.92rem; min-width:480px;}
.compare th, .compare td{padding:.65rem .6rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line);}
.compare thead th{font-weight:700; color:var(--ink); border-bottom:2px solid var(--line);}
.compare thead th:last-child, .compare td:last-child{color:var(--teal-strong);}
.compare tbody th{font-weight:600; color:var(--ink); width:34%;}
.compare tbody tr:last-child th, .compare tbody tr:last-child td{border-bottom:0;}
.compare td{color:var(--ink-soft);}
@media (max-width:580px){
  .compare{min-width:0; font-size:.8rem; hyphens:auto;}
  .compare th, .compare td{padding:.55rem .3rem;}
  .compare th:first-child, .compare td:first-child{padding-left:0;}
  .compare tbody th{width:30%;}
}

/* Pricing cards: the patient's co-payment is the headline number; full device price small at the bottom */
.pricing-card{display:flex; flex-direction:column;}
.pricing-card .copay-label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:.4em 0 .1em;}
.pricing-card .price{font-size:clamp(1.3rem,2vw,1.55rem); line-height:1.2; margin:.3em 0 .15em;}
.pricing-card .price .amount{white-space:nowrap;}
.pricing-card .copay-note{font-size:.88rem; font-weight:700; color:var(--teal-strong); margin-bottom:.2em;}
.pricing-card .desc{margin-top:.8em;}
.pricing-card .full-price{margin-top:auto; padding-top:1em; font-size:.82rem; color:var(--ink-faint);}

/* FAQ as click-to-open accordion (native <details>) */
.faq-item{padding-top:0; padding-bottom:0;}
.faq-item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:1rem;
  padding-block:clamp(1rem,2.2vw,1.35rem);
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary h3{margin:0; flex:1;}
.faq-item > summary::after{
  content:""; flex:none; width:1.6rem; height:1.6rem; border-radius:50%; margin-top:.05em;
  background:var(--teal-soft) no-repeat center/.8rem .8rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b8676' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}
.faq-item[open] > summary::after{transform:rotate(45deg);}
.faq-item > summary:hover h3{color:var(--teal-strong);}
.faq-item > summary:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:6px;}
.faq-answer{padding-bottom:clamp(1rem,2.2vw,1.35rem);}
.faq-answer > :first-child{margin-top:0;}
.faq-answer > :last-child{margin-bottom:0;}
.faq-list{gap:.75rem;}
/* Pricing section: "zdarma" note, insurers card, then the co-payment cards */
.free-note{font-weight:700; color:var(--teal-strong); font-size:1.05rem; margin:0 0 1.25rem; max-width:none;}
.insurers-card h4{color:var(--teal-strong); font-size:1.1rem; margin-bottom:.8em;}
.insurers-card + .pricing-grid{margin-top:1.25rem;}
/* Pricing: insurers card sits below the closing note */
.free-note + .pricing-grid{margin-top:0;}
#ceny .wrap > p + .insurers-card{margin-top:1.25rem;}
/* Myth cards: centred; question and verdict share one line when they fit, otherwise wrap */
.myth-card{text-align:center;}
.myth-head{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.45rem .7rem; margin-bottom:.7em;}
.myth-head h4{margin:0; display:block; text-align:center;}
.myth-head h4 .myth-num{display:inline-flex; vertical-align:-.35em; margin:0 .45em 0 0;}
.myth-head .verdict{margin:0;}
/* Myth cards (Martin's layout): number circle at the left, question centred on its own line,
   verdict pill centred on the next line, answer centred below */
.myth-head{position:relative; flex-direction:column; flex-wrap:nowrap; gap:.55rem;}
.myth-head h4{padding:0; display:block; text-align:center;}
.myth-head h4 .myth-num{position:absolute; left:0; top:0; margin:0;}

/* ================= Type harmonisation (2026-10-09) =================
   One scale for the whole site. Families: Newsreader = headings, Public Sans = text,
   Poppins = only the hero photo (desktop AND mobile, matching the reference image).
   - section heading (h2) ............. unchanged (clamp up to ~33px)
   - card title, serif ................ --fs-card-title  (FAQ questions, doctors, CIC/ITE…)
   - card subheading, sans bold green . --fs-sub         (all small green h4 + bold callouts)
   - body text in cards ............... --fs-body        (one size everywhere)
   - compact text ..................... --fs-small       (tables, transport list)
   - labels ........................... --fs-label       (pills, uppercase labels, fine print) */
:root{ --fs-card-title:1.3rem; --fs-sub:1.05rem; --fs-body:1rem; --fs-small:.94rem; --fs-label:.8rem; }

.faq-item h3, .doctor h3, .shape-row h3{ font-size:var(--fs-card-title); }

.trust-card h4, .home-card h4, .myth-card h4, .pricing-card h4, .steps h4,
.text-card h4, .warning-box h4, .transit h4, .brand-card h4, .insurers-card h4, .compare-card h4, .symptoms h4,
.text-card .callout, .home-card .callout, .free-note{ font-size:var(--fs-sub); }
.text-card .callout{ color:var(--teal-strong); font-weight:700; }

.trust-card p, .home-card p, .myth-card p, .pricing-card .desc, .doctor > p, .shape-row p,
.steps p, .text-card p, .text-card li, .warning-box p, .faq-answer p, .faq-answer li,
.symptom-list li, .contact-card address, .contact-card a{ font-size:var(--fs-body); }
.home-card .callout.badge{ font-size:var(--fs-body); }

.compare, .transit dl, .pricing-card .copay-note, .insurance-list li{ font-size:var(--fs-small); }

.myth-card .verdict, .doctor-id .role, .info-block h6, .operator h6, .info-block .fine,
.operator p, .brand-strip-label{ font-size:var(--fs-label); }

/* Hero on phones uses the same Poppins as the desktop hero */
.hero-mobile-overlay, .hero-tagline-mobile,
.hero-photo-text-mobile h1, .hero-photo-text-mobile p, .hero-photo-text-mobile .btn{ font-family:var(--font-body); }

/* Primary button: darker teal so the white label has proper contrast (was light teal, hard to read) */
.btn--teal{background:var(--teal-strong); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18);}
.btn--teal:hover{background:#08695d;}

/* FAQ questions: same sans heading style as the other card subheadings (was big serif) */
.faq-item h3{font-family:var(--font-body); font-weight:700; font-size:var(--fs-sub); line-height:1.35; color:var(--ink);}

/* Mobile hero: larger, more readable text and the button clearly separated from the copy */
@media (max-width:580px){
  .hero-photo-text-mobile .eyebrow{font-size:.85rem;}
  .hero-photo-text-mobile h1{font-size:clamp(1.75rem,8.6vw,2.25rem); margin-bottom:.35em;}
  .hero-photo-text-mobile p{font-size:.98rem; line-height:1.5; margin-bottom:1.35em;}
  .hero-photo-text-mobile .btn{font-size:.98rem; padding:.8em 1.5em;}
}
/* Hero text block one line lower (the paragraph lost a line, so the block sat too high) */
.hero-photo-text{top:34.95%;}
@media (max-width:580px){ .hero-mobile-overlay{top:calc(50% + 1.5rem);} }
/* "5 nejčastějších obtíží" is now the last thing in its card: no bottom rule/margin */
.symptoms:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0;}
/* Homepage: standalone "Objednejte se…" block, centred */
.cta-card{text-align:center; padding-block:clamp(1.75rem,3.5vw,2.5rem);}
.cta-card h4{font-size:1.3rem; margin-bottom:.5em;}
.cta-card p{max-width:46ch; margin-inline:auto;}
.cta-card .callout.badge{margin-top:1.1em;}
/* Text colour: running text in near-black ink for easy reading (many readers are older, often on phones);
   grey (--ink-soft) only for secondary info; labels use a darker --ink-faint that still passes contrast. */
p, .trust-card p, .transit dd, .faq-item ul, .legal-text ul, .symptom-list li{color:var(--ink);}
.compare td{color:var(--ink-soft);}
/* Warning box body: normal weight (only the heading is bold) */
.warning-box p{font-weight:400;}
/* Pricing 'zdarma' note: black text on a soft mint panel */
.free-note{color:var(--ink); background:rgba(11,134,118,.10); border-radius:var(--radius-md); padding:.9em var(--card-pad-x);}
/* Split pricing: insurers card right under the 'zdarma' note; closing note under the comparison table */
.free-note + .insurers-card{margin-top:0;}
#kategorie .compare-card + p{margin-top:1.25rem;}
/* Myths inside the FAQ accordion: verdict pill right after the myth */
.faq-item .verdict{
  display:inline-block; vertical-align:.12em; margin-left:.45em; white-space:nowrap;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.06em;
  color:var(--teal-strong); background:var(--teal-soft); padding:.25em .7em; border-radius:999px;
}

/* ---------- FAQ as one compact list (Martin): one white card, a row per question,
   thin dividers, smaller text, small chevron on the right that flips when open ---------- */
.faq-list{
  display:block; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:.25rem var(--card-pad-x);
}
.faq-list .faq-item{
  background:none; border:0; border-radius:0; box-shadow:none; padding:0;
  border-bottom:1px solid var(--line);
}
.faq-list .faq-item:last-child{border-bottom:0;}
.faq-list .faq-item > summary{padding-block:.85rem; gap:.75rem; align-items:center;}
.faq-list .faq-item h3{font-size:var(--fs-body); font-weight:600; line-height:1.4;}
.faq-list .faq-item > summary::after{
  width:1rem; height:1rem; border-radius:0; margin-top:0; background-color:transparent;
  background-size:1rem 1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b8676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.faq-list .faq-item[open] > summary::after{transform:rotate(180deg);}
.faq-list .faq-answer{padding:0 1.75rem 1rem 0;}
.faq-list .faq-answer p, .faq-list .faq-answer li{font-size:var(--fs-small);}
.faq-list .faq-item h3{text-wrap:wrap;}
/* FAQ rows read like normal text, not headings; verdict pill now opens with the answer */
.faq-list .faq-item h3{font-size:var(--fs-body); font-weight:400; color:var(--ink); line-height:1.5;}
.faq-list .faq-item[open] h3{font-weight:600;}
.faq-answer .verdict{margin:0 .45em 0 0;}
/* Insurers: plain text list in columns (no grey pills) */
.insurers-card .insurance-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:.45rem 1.5rem; margin:0 0 1.25rem;}
.insurers-card .insurance-list li{background:none; border:0; border-radius:0; padding:0; font-size:var(--fs-body); font-weight:400; color:var(--ink);}
/* Manufacturer logos right under the warning box at the top of Sluchadla */
.warning-box + .brand-strip{margin-top:1.25rem;}
/* Homepage "Slyším" card: image + intro side by side, then a full-width row underneath
   (symptoms in two columns, closing line, centred booking button) */
.home-card.split-grid:has(.card-wide){row-gap:1.25rem;}
.card-wide{grid-column:1 / -1;}
.card-wide .symptoms{margin-top:0;}
.card-wide .symptom-list{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); column-gap:2rem;}
.card-wide > .btn{display:flex; width:fit-content; margin-inline:auto;}
.card-wide > p{text-align:center;}
.card-wide .symptoms > p{text-align:center; font-weight:700;}
.card-wide .symptoms h4{text-align:center; font-size:1.2rem;}
/* Three manufacturer logos, always three in a row */
.brand-strip{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){ .brand-strip{grid-template-columns:repeat(3,1fr); gap:.5rem;} .brand-strip li{height:64px; padding:.5rem;} }
/* Second box under the warning: prescription text + the three logos inside */
.warning-box + .makers-card{margin-top:1.25rem;}
.makers-card .brand-strip{margin-top:1.25rem;}
.makers-card .brand-strip li{border:0; background:transparent; box-shadow:none;}
/* Sluchadla: everything in white boxes (as on the homepage); section h2s stay above as titles */
.steps-card .steps{padding-inline:0; margin-top:1.25rem;}
.steps-card .steps li::before{box-shadow:0 0 0 5px var(--surface);}
.text-card .free-note{margin:1.1rem 0 0;}
.compare-note{margin:1.25rem 0 0;}

/* ---------- Site split into 5 pages (2026-10-10) ---------- */
.floating-nav-links a, .floating-nav-dropdown a{white-space:nowrap;}
/* "Co Vás může zajímat dál" card at the end of Sluchadla */
.next-card{text-align:center;}
.next-card h4{color:var(--teal-strong); font-size:var(--fs-sub); margin-bottom:1rem;}
.next-links{display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;}
.next-card .btn--outline{color:var(--teal-strong); border-color:var(--teal-strong);}
/* Five menu items: slightly smaller links and gaps so the row stays compact */
.floating-nav-links{gap:1.3rem;}
.floating-nav-links a{font-size:1rem;}
/* Homepage: with 5 links the row would reach the centred hero tagline below ~1780px */
@media (max-width:1799px){ .floating-nav.has-hero-tagline .floating-nav-links{display:none;} }

/* ---------- "Co Vás může zajímat dál" card closes every page ---------- */
.contact .next-card{margin-top:1.25rem;}
main > .next-section{padding-bottom:clamp(3rem,5vw,4.5rem);}

/* ---------- Menu: hamburger only, at every width and on every page; the opened menu is a
   solid green panel with white text so it stands out. ---------- */
.floating-nav .floating-nav-links{display:none !important;}
.floating-nav-dropdown{
  background:var(--teal-strong); min-width:230px; padding:.6rem; gap:.1rem;
  box-shadow:0 22px 48px -12px rgba(18,49,60,.55);
}
.floating-nav-dropdown a{color:#fff; font-size:1.1rem; font-weight:600; padding:.75rem 1rem;}
.floating-nav-dropdown a:hover, .floating-nav-dropdown a:focus-visible{background:rgba(255,255,255,.18);}
/* Homepage: the closing card lines up with the wide home cards and keeps their spacing. */
.team:has(+ .next-section){padding-bottom:clamp(.85rem,1.8vw,1.4rem);}
.team + .next-section{padding-top:clamp(.85rem,1.8vw,1.4rem);}
.team + .next-section .wrap{max-width:1180px;}
.steps-card .steps{margin-top:0;}
.steps-cta{text-align:center; margin:1.5rem 0 0;}

/* Insurers list: small logo in a fixed box before each code + name */
.insurers-card .insurance-list{gap:.7rem 1.5rem;}
.insurers-card .insurance-list li{display:flex; align-items:center; gap:.85rem;}
.insurers-card .insurance-list img{flex:0 0 84px; width:84px; height:40px; object-fit:contain; object-position:center;}
@media (max-width:580px){
  .insurers-card .insurance-list img{flex-basis:68px; width:68px; height:34px;}
  .insurers-card .insurance-list li{gap:.7rem;}
}

/* FAQ verdict pills may wrap onto two lines on very narrow phones instead of sticking out */
.faq-answer .verdict{white-space:normal; max-width:100%; border-radius:.85rem; line-height:1.3; vertical-align:middle;}

/* Team card: third generation spans the full row; empty round placeholder until a photo is supplied */
.doctor--wide{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:clamp(1.25rem,3vw,2rem);}
.doctor-photo--empty{display:flex; align-items:flex-end; justify-content:center; background:var(--teal-soft); color:#a9cfc8;}
.doctor-photo--empty svg{width:78%; height:78%; display:block;}

/* Contact: "Zobrazit na mapě" as a clear outlined button with a map pin */
.info-block a.map-link{
  display:inline-flex; align-items:center; gap:.5em; width:fit-content;
  margin-top:.75em; padding:.6em 1.15em;
  border:2px solid var(--teal-strong); border-radius:999px;
  color:var(--teal-strong); font-weight:700; font-size:var(--fs-body); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.info-block a.map-link::before{
  content:""; width:1.1em; height:1.1em; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.800 7-13a7 7 0 0 0-7-7zm0 9.500a2.500 2.500 0 1 1 0-5 2.500 2.500 0 0 1 0 5z'/%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'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.800 7-13a7 7 0 0 0-7-7zm0 9.500a2.500 2.500 0 1 1 0-5 2.500 2.500 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.info-block a.map-link:hover, .info-block a.map-link:focus-visible{background:var(--teal-strong); color:#fff;}

/* Contact card: each line of contact data has an action button beside it */
.info-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem;}
.info-block a.info-btn{
  display:inline-flex; align-items:center; gap:.5em; flex:none; width:auto;
  padding:.6em 1.15em; border:2px solid var(--teal-strong); border-radius:999px;
  color:var(--teal-strong); font-weight:700; font-size:var(--fs-body); line-height:1.2; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.info-block a.info-btn::before{content:""; width:1.1em; height:1.1em; flex:none; background:currentColor;}
.info-btn--nav::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.800 7-13a7 7 0 0 0-7-7zm0 9.500a2.500 2.500 0 1 1 0-5 2.500 2.500 0 0 1 0 5z'/%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'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.800 7-13a7 7 0 0 0-7-7zm0 9.500a2.500 2.500 0 1 1 0-5 2.500 2.500 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.info-btn--call::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.600 10.800a15.100 15.100 0 0 0 6.600 6.600l2.200-2.200a1 1 0 0 1 1-.250 11.400 11.400 0 0 0 3.600.570 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.500a1 1 0 0 1 1 1c0 1.250.200 2.450.570 3.600a1 1 0 0 1-.250 1z'/%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'%3E%3Cpath d='M6.600 10.800a15.100 15.100 0 0 0 6.600 6.600l2.200-2.200a1 1 0 0 1 1-.250 11.400 11.400 0 0 0 3.600.570 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.500a1 1 0 0 1 1 1c0 1.250.200 2.450.570 3.600a1 1 0 0 1-.250 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.info-btn--mail::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm8 7.200L20 7.500V7l-8 4.700L4 7v.500z'/%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'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm8 7.200L20 7.500V7l-8 4.700L4 7v.500z'/%3E%3C/svg%3E") center/contain no-repeat; }
.info-block a.info-btn:hover, .info-block a.info-btn:focus-visible{background:var(--teal-strong); color:#fff;}

/* Contact buttons: all three the same width, and all three switch together —
   either right of the text (card wide enough for the longest row) or under it. */
.contact-card{container-type:inline-size;}
.info-row{display:grid; grid-template-columns:minmax(0,1fr) 11.5rem; align-items:center; gap:.6rem 1rem;}
.info-block a.info-btn{width:11.5rem; justify-content:center; box-sizing:border-box;}
@container (max-width:359px){
  .info-row{grid-template-columns:1fr; justify-items:start;}
}

/* Contact: the waiting-time pill sits in its own white box like everything else */
.contact .notice-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding-top:1.1rem; padding-bottom:1.1rem;
}
.contact .notice-row{justify-content:center; text-align:center;}
.contact .notice{font-size:var(--fs-body);}

/* ---------- Language switch: top-left, on the hamburger's row; scrolls away with the page ---------- */
.lang-switch{
  position:absolute; z-index:40; top:calc(1.75rem - 5px); left:clamp(1rem,4vw,3.5rem); height:2.3rem;
  display:flex; align-items:center; gap:.3em;
  font-weight:700; font-size:1rem; letter-spacing:.04em; color:var(--teal);
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.lang-switch a{color:var(--teal); text-decoration:none; opacity:.7; padding:.35em .1em;}
.lang-switch a:hover, .lang-switch a:focus-visible{opacity:1; text-decoration:underline;}
.lang-switch [aria-current]{color:var(--teal); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;}
@media (max-width:580px){ .lang-switch{left:12px; font-size:.85rem; gap:.2em;} }
@media (max-width:389px){ .lang-switch{top:calc(1rem - 5px + .5rem);} }

/* ---------- Footer: small legal links under the copyright ---------- */
.footer-links{margin-top:.5rem; padding-top:0; border-top:0;}
.footer-links a{color:#a9c4be; text-decoration:underline; text-underline-offset:2px;}
.footer-links a:hover{color:#fff;}

/* ---------- Cookie consent bar (only shown until the visitor chooses; both buttons equal) ---------- */
.cookie-bar{
  position:fixed; z-index:60; left:12px; right:12px; bottom:12px; margin-inline:auto; max-width:760px;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.25rem;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1rem 1.25rem; box-shadow:0 18px 44px -12px rgba(18,49,60,.45);
}
.cookie-bar p{margin:0; flex:1 1 300px; font-size:var(--fs-small); line-height:1.5;}
.cookie-bar a{color:var(--teal-strong);}
.cookie-bar-buttons{display:flex; gap:.6rem; flex:0 0 auto; margin-left:auto;}
.cookie-bar button{
  font:inherit; font-weight:700; font-size:var(--fs-body); cursor:pointer;
  padding:.6em 1.3em; border-radius:999px; min-width:7.5rem;
  background:var(--surface); color:var(--teal-strong); border:2px solid var(--teal-strong);
}
.cookie-bar button:hover, .cookie-bar button:focus-visible{background:var(--teal-strong); color:#fff;}
@media (max-width:480px){ .cookie-bar-buttons{width:100%;} .cookie-bar button{flex:1;} }

/* Images carry width/height attributes (no layout jump while loading); CSS still controls the size */
img{height:auto;}

/* Homepage, small tablets: the one-line hero tagline reaches almost to the left edge there,
   so the language switch drops just below it instead of sitting on the same row. */
@media (min-width:581px) and (max-width:820px){
  .floating-nav.has-hero-tagline + .lang-switch{top:4.9rem; left:16px;}
}

/* Language link is now a single link to the other language: short code on small screens,
   full words ("English version" / "Czech version") from 960px up. */
a.lang-switch{color:var(--teal); text-decoration:none;}
a.lang-switch:hover, a.lang-switch:focus-visible{text-decoration:underline; text-underline-offset:4px;}
.lang-switch .ls-long{display:none;}
@media (min-width:960px){
  .lang-switch .ls-short{display:none;}
  .lang-switch .ls-long{display:inline;}
}

/* Footer: cookie settings as a small cookie icon beside the copyright */
.cookie-icon{display:inline-flex; vertical-align:middle; margin-left:.45em; padding:.35em; color:#7f9c95; border-radius:50%;}
.cookie-icon svg{width:1.15rem; height:1.15rem; display:block;}
.cookie-icon:hover, .cookie-icon:focus-visible{color:#fff;}
/* English footer shows the e-mail address in the large slot */
footer.site a.phone-link[href^="mailto:"]{font-size:clamp(1.25rem,2.8vw,1.9rem); overflow-wrap:anywhere;}

/* Cookie bar on very narrow phones: buttons share the row and never stick out */
@media (max-width:480px){
  .cookie-bar{padding:.85rem .9rem; gap:.7rem;}
  .cookie-bar p{flex-basis:100%;}
  .cookie-bar-buttons{width:100%; margin-left:0;}
  .cookie-bar button{flex:1 1 0; min-width:0; padding:.6em .5em;}
}

/* ---------- Text size. Everything below the hero (cards, text, page headers, footer, cookie bar)
   is enlarged as one piece: +10 % on phones and tablets, +20 % on computers, and further in
   steps on large monitors, where the hero already grows with the screen. ---------- */
main > section:not(.hero), footer.site, .cookie-bar{zoom:1.1875;}
@media (min-width:581px){ main > section:not(.hero), footer.site, .cookie-bar{zoom:1.25;} }
@media (min-width:1200px){ main > section:not(.hero), footer.site, .cookie-bar{zoom:1.375;} }
@media (min-width:1500px){ main > section:not(.hero), footer.site, .cookie-bar{zoom:1.4375;} }
@media (min-width:1900px){ main > section:not(.hero), footer.site, .cookie-bar{zoom:1.5625;} }
@media (min-width:2400px){ main > section:not(.hero), footer.site, .cookie-bar{zoom:1.625;} }
/* Menu button and language link grow on large monitors too */
@media (min-width:1500px){ .floating-nav, .lang-switch{zoom:1.21;} }
@media (min-width:1700px){ .floating-nav, .lang-switch{zoom:1.32;} }
@media (min-width:1900px){ .floating-nav, .lang-switch{zoom:1.43;} }
@media (min-width:2200px){ .floating-nav, .lang-switch{zoom:1.6;} }
@media (min-width:2600px){ .floating-nav, .lang-switch{zoom:1.76;} }

/* Comparison table on phones: tighter cells and hyphenation so it fits without sideways scrolling */
@media (max-width:800px){
  .compare{min-width:0;}
  .compare th, .compare td{padding:.5rem .3rem; font-size:.84rem; hyphens:auto; overflow-wrap:anywhere;}
  .compare tbody th{width:30%;}
}

/* Symptoms box: the closing call-to-action line is as large as the box heading */
.card-wide .symptoms > p{font-size:1.2rem; line-height:1.4;}

/* Contact: slim white box inviting a Google review */
.review-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  margin-top:1.25rem; padding:1rem var(--card-pad-x); text-align:center;
}
.review-row p{margin:0; font-size:var(--fs-body);}
.review-row a{color:var(--teal-strong); font-weight:700; text-underline-offset:3px;}

/* FAQ: clearer divider between questions; the opened question and its answer get a soft mint
   background that runs to the edges of the card */
.faq-list{overflow:hidden; padding-block:0;}
.faq-list .faq-item{
  border-bottom:2px solid #c5cfcd;
  margin-inline:calc(-1 * var(--card-pad-x)); padding-inline:var(--card-pad-x);
  transition:background-color .15s ease;
}
.faq-list .faq-item:last-child{border-bottom:0;}
.faq-list .faq-item[open]{background:#eef7f4;}
.faq-list .faq-item > summary{padding-block:1rem;}

/* FAQ verdict label: dark green with white text so it stands out on the mint background of
   the opened question; highlighted phrase inside an answer gets a slightly deeper mint */
.faq-answer .verdict{background:var(--teal-strong); color:#fff;}
.faq-list .faq-item[open] mark.hl{background:#cfe8e2;}

/* ---------- Hero without the dark circle (2026-10): the photo now fades into the light
   background, so the hero texts are dark ink instead of white ---------- */
.hero-photo-text .eyebrow, .hero-photo-text h1, .hero-photo-text p{color:#1b303b; text-shadow:none;}
.hero-photo-text .eyebrow{color:var(--teal-strong);}
.hero-photo-text p{font-weight:500;}
@media (max-width:580px){
  .hero-tagline-mobile, .hero-photo-text-mobile .eyebrow, .hero-photo-text-mobile h1, .hero-photo-text-mobile p{color:#1b303b; text-shadow:none;}
  .hero-photo-text-mobile .eyebrow{color:var(--teal-strong);}
  .hero-photo-text-mobile p{font-weight:500;}
  /* soft light veil behind the centred mobile texts, so they stay readable over the faded photo */
  .hero-mobile-overlay::before{
    content:""; position:absolute; inset:-1.5rem -1rem; z-index:-1; border-radius:2rem;
    background:radial-gradient(closest-side, rgba(241,240,238,.88), rgba(241,240,238,.6) 70%, rgba(241,240,238,0));
  }
}
@media (max-width:580px){
  .hero-mobile-overlay{width:94vw; max-width:440px;}
  .hero-photo-text-mobile p{font-size:clamp(.8rem,3.7vw,.95rem); line-height:1.5;}
}

/* ---------- Phones (<=580px): same composition as on larger screens — text on the left, the
   whole ear on the right. The 1920px stage is scaled so that image columns ~640–1300 fill the
   screen; the centred mobile overlay is no longer used. Text sizes are in vw so they stay
   readable while the stage is scaled down. ---------- */
@media (max-width:580px){
  .hero-stage-wrap{height:auto;}
  .hero-stage{min-width:0; width:291vw;}
  .hero-mobile-overlay{display:none;}
  .hero-photo-text{display:flex; left:35.4%; top:33%; width:20%;}
  .hero-photo-text .eyebrow{font-size:3.5vw; white-space:nowrap; margin-bottom:.5em;}
  .hero-photo-text h1{font-size:8.6vw; margin-bottom:.35em;}
  .hero-photo-text p{font-size:3.45vw; line-height:1.45; margin-bottom:.9em;}
  .hero-photo-text p br{display:none;}
  .hero-photo-text .btn{font-size:3.5vw; padding:.75em 1.2em; margin-left:0;}
}
/* Phones: larger hero texts; the button sits lower, centred in the screen under the ear */
@media (max-width:580px){
  .hero-photo-text{width:19.3%;}
  .hero-photo-text .eyebrow{font-size:4vw;}
  .hero-photo-text h1{font-size:9.6vw; margin-bottom:.3em;}
  .hero-photo-text p{font-size:4.1vw; line-height:1.42; margin:0;}
  .hero-photo-text .btn{
    position:absolute; left:42.5vw; top:63vw; transform:translateX(-50%);
    font-size:4.2vw; padding:.8em 1.5em; white-space:nowrap;
  }
}
@media (max-width:580px){ .hero-photo-text{width:18.4%;} .hero-photo-text h1{font-size:9.2vw;} .hero-photo-text .btn{left:44.3vw;} }

/* Phone hero button: centred with 'translate' (the reveal animation animates 'transform', which used to cancel the centring and push half of the button off-screen) */
@media (max-width:580px){ .hero-photo-text .btn{transform:none; translate:-50% 0;} }

/* Hero button in capitals (all screen sizes) */
.hero-photo-text .btn, .hero-photo-text-mobile .btn{text-transform:uppercase; letter-spacing:.03em;}

/* ---------- Phones: tighter layout — ~30 % smaller gaps between boxes, boxes closer to the
   screen edges, less empty space above/below the text inside boxes; hero texts ~10 % larger ---------- */
@media (max-width:580px){
  .wrap{padding-inline:8px;}
  .mission, .split, .team{padding-block:.6rem;}
  .trust{padding-bottom:.6rem;}
  .trust-grid{gap:.75rem;}
  .info-section, .contact{padding-block:1.05rem;}
  .section-intro{margin-bottom:1.2rem;}
  .warning-box{margin-block:1.4rem;}
  .pricing-grid, .contact-grid, .shape-list{gap:.85rem;}
  .notice-row{margin-bottom:.85rem;}
  .review-row, .contact .next-card, .insurers-card + .pricing-grid, #ceny .wrap > p + .insurers-card{margin-top:.85rem;}
  :is(.trust-card, .home-card, .text-card, .warning-box, .pricing-card, .transit, .myth-card){padding-top:1rem; padding-bottom:1rem;}
  .faq-list .faq-item > summary{padding-block:.75rem;}

  .hero-photo-text{left:34.2%; width:19.6%;}
  .hero-photo-text .eyebrow{font-size:4.4vw;}
  .hero-photo-text h1{font-size:10.1vw;}
  .hero-photo-text p{font-size:4.5vw;}
  .hero-photo-text .btn{font-size:4.4vw; top:68vw; left:46.5vw; padding:.8em 1.4em;}
}
/* Phones: hero texts further from the left edge (~7vw); the photo is shown a little smaller
   so the whole ear still fits next to the text */
@media (max-width:580px){
  .hero-stage{width:280vw;}
  .hero-photo-text{left:34.6%; width:20%;}
  .hero-photo-text h1{font-size:9.8vw;}
  .hero-photo-text .btn{left:43vw;}
}
@media (max-width:580px){ .hero-photo-text{left:35.4%; width:19.6%;} }
/* Phones: more space between the hero heading and the subtitle */
@media (max-width:580px){ .hero-photo-text h1{margin-bottom:.75em;} }
/* Phones: hero button aligned with the left edge of the texts */
@media (max-width:580px){ .hero-photo-text .btn{left:0; translate:none;} }
/* Hero: eyebrow and subtitle 10 % larger; button aligned with the left edge of the texts on all sizes */
.hero-photo-text .eyebrow{font-size:1.155cqw;}
.hero-photo-text p{font-size:.935cqw;}
.hero-photo-text .btn{margin-left:0;}
@media (max-width:580px){
  .hero-photo-text .eyebrow{font-size:4.84vw;}
  .hero-photo-text p{font-size:4.95vw;}
}

/* ---------- Phones and tablets (<=820px): the menu lives in a fixed bar at the bottom of the
   screen, always visible — left half "Menu", right half "Zavolat"; the top hamburger is hidden ---------- */
.mbar{display:none;}
@media (max-width:820px){
  .floating-nav{top:auto; right:0; left:0; bottom:0; padding:0; display:block; zoom:1;}
  .floating-nav .floating-nav-toggle{display:none;}
  .mbar{
    display:grid; grid-template-columns:1fr 1fr; height:calc(3.6rem + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:var(--teal-strong); box-shadow:0 -6px 20px -8px rgba(18,49,60,.45);
  }
  .mbar > *{
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    font:inherit; font-weight:700; font-size:1.1rem; color:#fff; text-decoration:none;
    background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .mbar > * + *{border-left:1px solid rgba(255,255,255,.3);}
  .mbar svg{width:1.45rem; height:1.45rem; flex:none;}
  .mbar > *:active{background:rgba(255,255,255,.12);}
  .floating-nav-dropdown{
    position:absolute; top:auto; bottom:100%; left:0; right:0; min-width:0;
    border-radius:18px 18px 0 0; padding:.6rem .6rem .8rem; transform:translateY(8px);
    box-shadow:0 -14px 34px -10px rgba(18,49,60,.5);
  }
  .floating-nav-dropdown a{font-size:1.15rem; padding:.85rem 1rem;}
  body{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom));}
  .cookie-bar{bottom:calc(3.6rem + 12px + env(safe-area-inset-bottom));}
}
/* Bottom bar ~30 % slimmer */
@media (max-width:820px){
  .mbar{height:calc(2.55rem + env(safe-area-inset-bottom));}
  .mbar > *{font-size:1.02rem; gap:.45rem;}
  .mbar svg{width:1.2rem; height:1.2rem;}
  body{padding-bottom:calc(2.55rem + env(safe-area-inset-bottom));}
  .cookie-bar{bottom:calc(2.55rem + 12px + env(safe-area-inset-bottom));}
}

/* Footer: only the copyright line and the cookie icon, on the page background with a thin rule */
footer.site{background:var(--bg); border-top:1px solid var(--line); padding-block:.9rem;}
footer.site .footer-fine{margin:0; padding-top:0; border-top:0; color:var(--ink-faint);}
footer.site .cookie-icon{color:var(--ink-faint);}
footer.site .cookie-icon:hover, footer.site .cookie-icon:focus-visible{color:var(--teal-strong);}

/* Bottom bar 10 % taller again */
@media (max-width:820px){
  .mbar{height:calc(2.8rem + env(safe-area-inset-bottom));}
  .mbar > *{font-size:1.12rem;}
  .mbar svg{width:1.32rem; height:1.32rem;}
  body{padding-bottom:calc(2.8rem + env(safe-area-inset-bottom));}
  .cookie-bar{bottom:calc(2.8rem + 12px + env(safe-area-inset-bottom));}
}
/* Footer about 30 % lower */
footer.site{padding-block:.35rem;}

/* Team card on the narrowest phones: let the name lines wrap and use a smaller photo, so nothing
   sticks out of the card */
.team-grid > *, .doctor-id > div{min-width:0;}
.doctor-id .role, .doctor-id h3{overflow-wrap:anywhere;}
@media (max-width:360px){ .doctor-photo{width:84px; height:84px; flex:0 0 84px;} }

/* Tablets and computers: the bottom ~150px of the hero photo is plain background, so the
   "Plně hrazeno…" cards are pulled up into it instead of floating far below the picture */
@media (min-width:581px){
  .hero{margin-bottom:min(-200px, -10.4vw);}
  .trust{position:relative; z-index:2;}
}
/* the cards' section is see-through, so the photo fades out behind the cards instead of being cut by a flat band */
@media (min-width:581px){ .trust{background:transparent;} }

/* Tablets and computers: tighter vertical gaps between boxes (closer to the phone layout) */
@media (min-width:581px){
  .mission, .split, .team{padding-block:.75rem;}
  .trust{padding-bottom:.75rem;}
  .info-section, .contact{padding-block:1.3rem;}
  .section-intro{margin-bottom:1.3rem;}
  .warning-box{margin-block:1.3rem;}
}

/* Section headings: sizes chosen by Martin per screen (effective px = value x zoom):
   phone 26, tablet 28, notebook 36, larger monitor 42, Full HD 48, large monitor 50 */
main > section:not(.hero) h2{font-size:21.9px; line-height:1.18;}
@media (min-width:581px){ main > section:not(.hero) h2{font-size:22.4px;} }
@media (min-width:1200px){ main > section:not(.hero) h2{font-size:26.2px;} }
@media (min-width:1500px){ main > section:not(.hero) h2{font-size:29.2px;} }
@media (min-width:1900px){ main > section:not(.hero) h2{font-size:30.7px;} }
@media (min-width:2400px){ main > section:not(.hero) h2{font-size:30.8px;} }
/* Hero subtitle on tablets/computers: 21px (at the 1920px stage), wrapping before it reaches the ear */
@media (min-width:581px){
  .hero-photo-text p{font-size:1.094cqw; max-width:19.4cqw;}
  .hero-photo-text p br{display:none;}
}

/* Larger hero tagline ("Mít dobrý sluch znamená mít lepší život") */
.hero-tagline{font-size:1.6cqw;}
/* Homepage, tablets and small notebooks: the larger tagline needs the whole top row, so the
   language link sits just below it */
@media (min-width:581px) and (max-width:1099px){
  .floating-nav.has-hero-tagline + .lang-switch{top:5.4rem; left:16px;}
}
/* Phones: language link alone on the first row, the tagline (larger, may wrap to two lines)
   centred below it */
@media (max-width:580px){
  .lang-switch{top:8px; left:14px;}
  .hero-tagline-mobile{top:46px; transform:none; left:14px; right:14px; font-size:4.3vw; line-height:1.25;}
}

/* Phones: hamburger at the top right, level with the language link; it opens the same menu,
   shown under it at the top of the screen. The tagline sits one line lower, left-aligned with
   "Profesionální centrum" */
.top-burger{display:none;}
@media (max-width:580px){
  .top-burger{
    display:inline-flex; align-items:center; justify-content:center; position:absolute; z-index:40;
    top:8px; right:10px; width:2.6rem; height:2.4rem; padding:0; margin:0;
    background:none; border:0; color:var(--teal-strong); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .top-burger svg{width:30px; height:30px; display:block;}
  .floating-nav.from-top .floating-nav-dropdown{
    position:fixed; top:3.4rem; bottom:auto; left:10px; right:10px;
    border-radius:9px; transform:translateY(-6px); box-shadow:0 20px 44px -14px rgba(18,49,60,.45);
  }
  .floating-nav.from-top.is-open .floating-nav-dropdown{transform:translateY(0);}
  .hero-tagline-mobile{top:calc(46px + 1.25em); left:calc(9.23vw - 8.5px); right:14px; text-align:left;}
}

/* Rounded corners about half as round: boxes and buttons */
:root{--radius-lg:14px; --radius-md:9px;}
@media (max-width:580px){ .home-card .callout.badge{border-radius:8px;} }
.floating-nav-dropdown{border-radius:8px;}
@media (max-width:820px){ .floating-nav-dropdown{border-radius:9px 9px 0 0;} }
.btn, .info-block a.map-link, .info-block a.info-btn, .cookie-bar button, .page-toc a{border-radius:.6em;}

/* Hero capitals: only the short labels ("PROFESIONÁLNÍ CENTRUM", the button) in capitals;
   the tagline sentence in normal case for easier reading */
.hero-photo-text .eyebrow, .hero-photo-text-mobile .eyebrow{text-transform:uppercase; letter-spacing:.06em;}
.hero-tagline, .hero-tagline-mobile{text-transform:none; letter-spacing:normal;}
/* phones: capitals are wider, so the label is a bit smaller to stay clear of the ear */
@media (max-width:580px){ .hero-photo-text .eyebrow{font-size:4vw; letter-spacing:.04em;} }
/* hero label clearly bold */
.hero-photo-text .eyebrow, .hero-photo-text-mobile .eyebrow{font-weight:800;}
/* "PROFESIONÁLNÍ CENTRUM": tighter letters so the word ends before the ear, plus a soft light
   halo so the end of the word stays readable over the light edge of the photo */
.hero-photo-text .eyebrow, .hero-photo-text-mobile .eyebrow{letter-spacing:.015em; text-shadow:0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.8);}
@media (max-width:580px){ .hero-photo-text .eyebrow{font-size:3.85vw;} }

/* ---------- Contact form (Kontakty / Contact) ---------- */
.form-card{margin-top:clamp(1rem,2.5vw,1.6rem); margin-bottom:clamp(1rem,2.5vw,1.6rem);}
.form-card h2{margin-top:0;}
.contact-form .form-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 1.2rem;}
.contact-form .form-field--wide{grid-column:1 / -1;}
@media (max-width:820px){ .contact-form .form-grid{grid-template-columns:1fr;} }
.contact-form label{display:block; font-weight:600; color:var(--ink); margin-bottom:.35rem;}
.contact-form .req{color:#b3261e; font-weight:700;}
.contact-form input, .contact-form textarea{
  display:block; width:100%; box-sizing:border-box; margin:0;
  font:inherit; font-size:1rem; line-height:1.4; color:var(--ink);
  padding:.75em .9em; background:#fff; border:1px solid #b7c6c3; border-radius:8px;
}
.contact-form textarea{min-height:9em; resize:vertical;}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
.contact-form .form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem; margin-top:1.2rem;}
.contact-form .form-note{flex:1 1 22rem; margin:0; font-size:.9em; line-height:1.45; color:var(--ink);}
.contact-form .form-foot .btn{flex:none; border:0; cursor:pointer; font-size:1.05rem;}
.contact-form .form-foot .btn[disabled]{opacity:.6; cursor:wait;}
@media (max-width:580px){ .contact-form .form-foot .btn{width:100%; justify-content:center;} }
.contact-form .form-status{margin:1rem 0 0; padding:.8em 1em; border-radius:9px; font-weight:600;}
.contact-form .form-status.is-ok{color:var(--teal-strong); background:rgba(11,134,118,.10);}
.contact-form .form-status.is-err{color:#9b1c13; background:#fdecea;}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Phones: the tagline wraps onto two lines before it reaches the hair, with a soft light halo */
@media (max-width:580px){
  .hero-tagline-mobile{right:auto; max-width:58vw; text-wrap:balance; text-shadow:0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.8);}
}

/* ---------- Green bottom bar on every screen size (Martin: "dej tu zelenou lištu i na počítač,
   s tím číslem"). Phones: Menu | Zavolat; tablets and computers: Menu | 608 363 303 ---------- */
.floating-nav{top:auto; right:0; left:0; bottom:0; padding:0; display:block; zoom:1;}
.floating-nav .floating-nav-toggle{display:none;}
.mbar{
  display:grid; grid-template-columns:1fr 1fr; height:calc(2.8rem + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--teal-strong); box-shadow:0 -6px 20px -8px rgba(18,49,60,.45);
}
.mbar > *{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; font-size:1.12rem; color:#fff; text-decoration:none;
  background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mbar > * + *{border-left:1px solid rgba(255,255,255,.3);}
.mbar svg{width:1.32rem; height:1.32rem; flex:none;}
.mbar > *:hover, .mbar > *:active{background:rgba(255,255,255,.12);}
.mbar-call-num{display:none;}
body{padding-bottom:calc(2.8rem + env(safe-area-inset-bottom));}
.cookie-bar{bottom:calc(2.8rem + 12px + env(safe-area-inset-bottom));}
/* menu opened from the bar: a panel above the bar's left half */
.floating-nav:not(.from-top) .floating-nav-dropdown{
  position:absolute; top:auto; bottom:100%; left:0; right:auto; width:min(26rem, 50%); min-width:0;
  border-radius:9px 9px 0 0; padding:.6rem .6rem .8rem; box-shadow:0 -14px 34px -10px rgba(18,49,60,.5);
}
.floating-nav-dropdown a{font-size:1.15rem; padding:.85rem 1rem;}
@media (max-width:820px){ .floating-nav:not(.from-top) .floating-nav-dropdown{right:0; width:auto;} }
@media (min-width:581px){
  .mbar-call-txt{display:none;}
  .mbar-call-num{display:inline; letter-spacing:.02em;}
}
@media (min-width:821px){
  .mbar{height:calc(3.1rem + env(safe-area-inset-bottom));}
  .mbar > *{font-size:1.25rem;}
  .mbar svg{width:1.45rem; height:1.45rem;}
  body{padding-bottom:calc(3.1rem + env(safe-area-inset-bottom));}
  .cookie-bar{bottom:calc(3.1rem + 12px + env(safe-area-inset-bottom));}
}
@media (min-width:1500px){
  .mbar{height:calc(3.6rem + env(safe-area-inset-bottom));}
  .mbar > *{font-size:1.5rem;}
  .mbar svg{width:1.7rem; height:1.7rem;}
  body{padding-bottom:calc(3.6rem + env(safe-area-inset-bottom));}
  .cookie-bar{bottom:calc(3.6rem + 12px + env(safe-area-inset-bottom));}
  .floating-nav-dropdown a{font-size:1.35rem;}
}
/* tablets and computers keep a hamburger at the top right too (it scrolls away with the page) */
@media (min-width:581px){
  .top-burger{
    display:inline-flex; align-items:center; justify-content:center; position:absolute; z-index:40;
    top:calc(1.75rem - 5px); right:calc(clamp(1.75rem,4vw,3.5rem) - 15px); width:2.6rem; height:2.4rem; padding:0; margin:0;
    background:none; border:0; color:var(--teal); cursor:pointer; filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));
  }
  .top-burger svg{width:28px; height:28px; display:block;}
  .floating-nav.from-top .floating-nav-dropdown{
    position:fixed; top:4.2rem; bottom:auto; left:auto; right:calc(clamp(1.75rem,4vw,3.5rem) - 15px); width:17rem;
    border-radius:9px; transform:translateY(-6px); box-shadow:0 20px 44px -14px rgba(18,49,60,.45);
  }
  .floating-nav.from-top.is-open .floating-nav-dropdown{transform:translateY(0);}
}
@media (min-width:1500px){ .top-burger{zoom:1.3;} }
/* homepage, tablets/small notebooks: the big tagline fills the top row, so the hamburger sits one
   row lower, level with the language link */
@media (min-width:581px) and (max-width:1099px){
  body:has(.floating-nav.has-hero-tagline) .top-burger{top:calc(5.4rem - 2px);}
}

/* Bottom bar, tablets and computers: "Zavolat: (phone icon) 608 363 303" */
.mbar-call-lbl{display:none;}
@media (min-width:581px){ .mbar-call-lbl{display:inline; font-weight:600;} }

/* ---------- Computers (>=1100px): menu links in a row at the top right instead of the hamburger ---------- */
.top-links{display:none;}
@media (min-width:1100px){
  .top-burger{display:none;}
  .top-links{
    display:flex; align-items:center; gap:1.6rem; position:absolute; z-index:40;
    top:calc(1.75rem - 5px); right:clamp(1.75rem,4vw,3.5rem); min-height:2.4rem;
  }
  .top-links a{font-weight:700; font-size:1.1rem; color:var(--teal-strong); text-decoration:none; padding:.2em 0; border-bottom:2px solid transparent;}
  .top-links a:hover{border-bottom-color:currentColor;}
  .top-links a[aria-current="page"]{border-bottom-color:currentColor;}
  .top-links.on-dark a{color:#fff;}
  /* homepage: the tagline moves just below the menu row */
  .hero-tagline{top:11%;}
}
@media (min-width:1500px){ .top-links{zoom:1.21;} }
@media (min-width:1700px){ .top-links{zoom:1.32;} }
@media (min-width:1900px){ .top-links{zoom:1.43;} }
@media (min-width:2200px){ .top-links{zoom:1.6;} }
@media (min-width:2600px){ .top-links{zoom:1.76;} }

/* ---------- Tagline always on its own row under the top row (all screen sizes), so the language
   link and the menu always stay at the very top; the text menu replaces the hamburger from 760px ---------- */
@media (min-width:581px){
  .hero-tagline{top:11%;}
  .floating-nav.has-hero-tagline + .lang-switch{top:calc(1.75rem - 5px); left:clamp(1rem,4vw,3.5rem);}
  body:has(.floating-nav.has-hero-tagline) .top-burger{top:calc(1.75rem - 5px);}
}
@media (min-width:760px){
  .top-burger{display:none;}
  .top-links{
    display:flex; align-items:center; gap:clamp(1rem,2vw,1.6rem); position:absolute; z-index:40;
    top:calc(1.75rem - 5px); right:clamp(1.75rem,4vw,3.5rem); min-height:2.4rem;
  }
  .top-links a{font-weight:700; font-size:1.1rem; color:var(--teal-strong); text-decoration:none; padding:.2em 0; border-bottom:2px solid transparent; white-space:nowrap;}
  .top-links a:hover, .top-links a[aria-current="page"]{border-bottom-color:currentColor;}
  .top-links.on-dark a{color:#fff;}
}
@media (min-width:760px) and (max-width:959px){ .top-links a{font-size:1rem;} }

/* ---------- Header for tablets and computers (>=760px): language link + menu + phone button,
   pinned to the top; transparent over the page top, white bar with a shadow once scrolled.
   The green bottom bar is for phones only. ---------- */
.top-header{display:contents;}
.top-call{display:none;}
@media (min-width:760px){
  .floating-nav{display:none !important;}
  body{padding-bottom:0;}
  .cookie-bar{bottom:16px;}
  .top-header{
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    position:fixed; z-index:55; top:0; left:0; right:0;
    padding:calc(1.75rem - 5px - .45rem) clamp(1.75rem,4vw,3.5rem) .45rem clamp(1rem,4vw,3.5rem);
    background:transparent; transition:background-color .2s ease, box-shadow .2s ease, padding .2s ease;
  }
  .top-header .lang-switch, .top-header .top-links{position:static; top:auto; left:auto; right:auto;}
  .top-header .top-links{display:flex; align-items:center;}
  .top-header.is-scrolled{
    background:#fff; box-shadow:0 6px 22px -12px rgba(18,49,60,.35);
    padding-top:.45rem; padding-bottom:.45rem;
  }
  .top-header.is-scrolled .lang-switch{text-shadow:none;}
  .top-header.is-scrolled .top-links.on-dark a:not(.top-call){color:var(--teal-strong);}
  .top-call{
    display:inline-flex; align-items:center; gap:.45em; margin-left:.4rem;
    background:var(--teal-strong); color:#fff !important; border:0 !important; border-radius:.6em;
    padding:.5em .95em !important; font-weight:700; white-space:nowrap; text-decoration:none;
    box-shadow:0 4px 14px -6px rgba(18,49,60,.45);
  }
  .top-call:hover{filter:brightness(1.08);}
  .top-call svg{width:1.15em; height:1.15em; flex:none;}
}
/* narrow tablets: the phone button shows only the handset icon */
@media (min-width:760px) and (max-width:959px){
  .top-call span{display:none;}
  .top-call{padding:.5em .6em !important;}
  .top-header{gap:1rem;}
}