/* Fluid scale: one root size that follows both the width and the height of the screen.
   Everything below is in rem/em, so type, buttons, cards and gaps grow and shrink together. */
html { font-size: clamp(13.5px, calc(.42vw + .5vh + 7.4px), 19px); }
body { font-size: 1rem; line-height: 1.75; }

/* headings — a step smaller, fitted to each screen */
h1, .hero h1 { font-size: clamp(2.1rem, calc(3vw + 1.8vh), 4.4rem); }
html[lang="en"] h1, html[lang="en"] .hero h1 { font-size: clamp(1.9rem, calc(2.6vw + 1.6vh), 3.9rem); }
h2 { font-size: clamp(1.45rem, calc(1.5vw + 1.3vh), 2.7rem); margin-bottom: .7em; }
.side .step h2 { font-size: clamp(1.4rem, calc(1.3vw + 1.2vh), 2.5rem); }
.city-h { font-size: clamp(1.25rem, calc(1vw + 1vh), 1.9rem); }
.end-t { font-size: clamp(1.8rem, calc(2.6vw + 1.6vh), 3.8rem); }
.v-big .step::before { font-size: clamp(3.2rem, calc(4.5vw + 2vh), 6.8rem); }
.lead { font-size: clamp(1rem, calc(.6vw + .7vh), 1.3rem); }

/* header */
.nav { padding: .9rem var(--gut); gap: 1rem; }
.nav-logo svg { width: 5.4rem; height: 3.1rem; }
.lang { height: 2.6rem; font-size: .8rem; }
.lang span { min-width: 2.1rem; }
.lang .ar { font-size: 1rem; }
.cta { height: 2.6rem; padding: 0 1.25rem; font-size: .9rem; }
.burger { width: 2.7rem; height: 2.7rem; }
.burger i { width: 1rem; }
.acts a { font-size: .8rem; padding: .5rem .85rem; }
html[lang="en"] .acts a { font-size: .74rem; }

/* cards, labels, stepper */
.kick { font-size: .7rem; margin-bottom: 1.1rem; }
.kick span + i + span { font-size: .8rem; }
.side .step, .city-panel { width: min(33rem, 100%); padding: 1.7rem 1.9rem; }
.side .step p:not(.kick) { font-size: .95rem; }
.stepper { font-size: .78rem; margin-bottom: 1rem; }
.stepper b { font-size: .92rem; }
.stepper .seg a { width: 1.6rem; } .stepper .seg a.on { width: 2.5rem; }
.svc li { font-size: .86rem; }
.svc-d { font-size: .86rem; }
.chips span { font-size: .84rem; padding: .35rem .85rem; }
.send { height: 3.2rem; font-size: 1rem; }
.form { width: min(46rem, 100%); padding: 1.3rem; }
.foot { font-size: .7rem; }
.drawer li a { font-size: clamp(1.4rem, calc(3vw + 1.5vh), 2.2rem); }
.f input { font-size: 16px; } /* keeps phones from zooming into the field */

@media (max-width: 760px) {
  /* cards sit inside the gutters, solid enough that the 3D world never shows through the text */
  .side .step { width: auto; left: var(--gut); right: var(--gut); padding: 1.2rem 1.3rem; background: rgba(3,28,52,.95); }
  .v-big .step { background: linear-gradient(180deg, rgba(3,28,52,0), rgba(3,28,52,.96) 26%); }
  .v-rail .step { background: linear-gradient(rgba(3,28,52,.96), rgba(3,28,52,.96)) padding-box, linear-gradient(120deg, var(--lime), rgba(196,214,55,0) 70%) border-box; }
  .city-panel { width: 100%; background: #031c34; }
  .side .step { background: #031c34; }
  .stepper { gap: 10px; } .stepper .seg { gap: 4px; } .stepper .seg a { width: 1.2rem; } .stepper .seg a.on { width: 1.9rem; }
  .hero { align-items: center !important; text-align: center; }
  .hero .kick { justify-content: center; }
  .side .step h2 { font-size: clamp(1.35rem, 6.2vw, 1.9rem); }
  .svc-card h3 { font-size: 1.2rem; }
  .svc-card .n { font-size: 2.6rem; }
  .end-t { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .side .step p:not(.kick) { font-size: .88rem; line-height: 1.55; }
  .hint { display: none; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .finale { padding-top: 4.6rem; padding-bottom: 1rem; }
  .finale .lead { display: none; }
  .chips { gap: 6px; margin-bottom: 10px; }
  .chips span { font-size: .78rem; padding: .25rem .7rem; }
  .fields { gap: 8px; }
  .f input { padding: 18px 12px 6px; }
  .foot { margin-top: 1.2rem; }
}