/* ==========================================================================
   Jeshureatech — Responsive layer
   Breakpoints: 1200 · 1024 · 900 · 768 · 560 · 400
   ========================================================================== */

/* ≤ 1200px — laptop */
@media (max-width: 1200px) {
  :root { --container: 1080px; }
  .hero-slide { grid-template-columns: 1.1fr .9fr; }
}

/* ≤ 1024px — small laptop / landscape tablet */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-col--services { grid-column: span 1; }
  .nav-link { padding: .5rem .55rem; font-size: .885rem; }
}

/* ≤ 960px — collapse the desktop nav into the off-canvas panel */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: var(--nav-h); right: 0;
    width: min(360px, 86vw);
    height: calc(100dvh - var(--nav-h));
    z-index: 95;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.35rem 3rem;
    overflow-y: auto;

    /* The panel stays inside the viewport (right: 0) and is revealed with a
       clip-path wipe instead of being translated off-screen — an off-screen
       fixed element would add horizontal page scroll on small devices. */
    clip-path: inset(0 0 0 100%);
    transform: translateX(14px);
    opacity: 0;
    visibility: hidden;
    transition: clip-path .38s var(--ease), transform .38s var(--ease),
                opacity .28s var(--ease), visibility .38s;
  }
  .nav-menu.is-open {
    clip-path: inset(0 0 0 0);
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav-list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav-link {
    padding: .85rem .9rem; font-size: 1rem;
    border-radius: var(--radius-sm);
    opacity: 0; transform: translateX(18px);
  }
  .nav-menu.is-open .nav-link { animation: nav-item-in .4s var(--ease) forwards; }
  .nav-menu.is-open li:nth-child(1) .nav-link { animation-delay: .05s; }
  .nav-menu.is-open li:nth-child(2) .nav-link { animation-delay: .09s; }
  .nav-menu.is-open li:nth-child(3) .nav-link { animation-delay: .13s; }
  .nav-menu.is-open li:nth-child(4) .nav-link { animation-delay: .17s; }
  .nav-menu.is-open li:nth-child(5) .nav-link { animation-delay: .21s; }
  .nav-menu.is-open li:nth-child(6) .nav-link { animation-delay: .25s; }
  .nav-menu.is-open li:nth-child(7) .nav-link { animation-delay: .29s; }
  .nav-menu.is-open li:nth-child(8) .nav-link { animation-delay: .33s; }
  .nav-menu.is-open li:nth-child(9) .nav-link { animation-delay: .37s; }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { background: var(--accent-soft); }

  .nav-menu-cta { margin-top: 1.5rem; display: grid; gap: .7rem; }
  .nav-cta-desktop { display: none; }

  /* Dropdowns become accordions inside the off-canvas panel.
     Plain show/hide plus a per-item entry animation — height transitions on a
     variable-length list are unreliable, and this cannot mis-size. */
  .nav-list .has-sub { position: static; }
  .nav-sub-toggle { width: 100%; justify-content: space-between; }

  .sub-menu, .sub-menu--nested {
    position: static;
    display: none;
    min-width: 0;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none;
    padding: 0 0 0 .5rem;
    margin: .2rem 0 .5rem;
    border-left: 2px solid var(--border);
  }
  .has-sub.is-open > .sub-menu { display: block; }

  /* Hover and focus must never open a panel on touch devices */
  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu { display: none; }
  .has-sub.is-open:hover > .sub-menu,
  .has-sub.is-open:focus-within > .sub-menu { display: block; }

  .sub-link {
    padding: .7rem .8rem;
    font-size: .95rem;
    white-space: normal;
    opacity: 0; transform: translateX(14px);
    animation: nav-item-in .32s var(--ease) forwards;
  }
  .sub-menu > li:nth-child(1) > .sub-link { animation-delay: .03s; }
  .sub-menu > li:nth-child(2) > .sub-link { animation-delay: .06s; }
  .sub-menu > li:nth-child(3) > .sub-link { animation-delay: .09s; }
  .sub-menu > li:nth-child(4) > .sub-link { animation-delay: .12s; }
  .sub-menu > li:nth-child(5) > .sub-link { animation-delay: .15s; }
  .sub-menu > li:nth-child(6) > .sub-link { animation-delay: .18s; }

  .sub-sub-toggle { width: 100%; }
  .sub-sub-toggle .caret--right { margin-left: auto; transition: transform .25s var(--ease); }
  .has-sub.is-open > .sub-sub-toggle .caret--right { transform: rotate(90deg); }

  /* Split parent: link and caret share a row, the panel takes the next one */
  .has-sub--split > .sub-menu { flex: 0 0 100%; }
  .sub-expand { width: 40px; height: 40px; }
  .sub-expand .caret--right { width: 17px; height: 17px; }
}

@media (min-width: 961px) {
  .nav-menu-cta { display: none; }
}

/* ≤ 1080px — header phone collapses to its icon */
@media (max-width: 1080px) {
  .nav-phone { padding: .3rem; }
  .nav-phone-text { display: none; }
}

/* Short laptop screens — tighten the hero so the carousel controls and the
   start of the next section are reachable without scrolling twice. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero h1 { font-size: clamp(1.95rem, 1rem + 2.5vw, 2.95rem); }
  .hero-sub { font-size: 1rem; }
  .hero-inner { padding-block: 1.4rem; }
  .hero .media--wide { aspect-ratio: 16 / 9; }
  .hero-arrow { width: 40px; height: 40px; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(1.8rem, .9rem + 2.2vw, 2.5rem); }
  .hero-tag { margin-bottom: .75rem; }
  .hero-inner { padding-block: 1.15rem; }
}

/* Jump nav — hide the label on narrow screens, keep the links scrollable */
@media (max-width: 700px) {
  .jump-label { display: none; }
  .jump-nav-inner { padding-block: .55rem; }
  .jump-nav a { font-size: .82rem; padding: .35rem .7rem; }
}

/* Six-across flow collapses in stages */
@media (max-width: 1100px) {
  .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 700px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-step:nth-child(3n)::after { display: block; }
  .flow-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 460px) {
  .flow-steps { grid-template-columns: 1fr; }
  .flow-step::after { display: none !important; }
  .notice { flex-direction: column; gap: .85rem; }
}

/* ≤ 900px — stack the big split layouts */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split .media--tall { aspect-ratio: 16 / 10; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero { min-height: auto; }
  .hero-slide { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { order: -1; max-width: 520px; }
  .hero-copy { max-width: none; }
}

/* Page hero on inner pages */
@media (max-width: 768px) {
  .page-hero-inner { padding-block: 2rem 2.5rem; }
  .page-hero-sub { margin-bottom: 1.5rem; }
}

/* ≤ 768px — tablet portrait */
@media (max-width: 768px) {
  :root { --nav-h: 66px; --section-y: clamp(3rem, 8vw, 4.5rem); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
  .hero-inner { padding-block: 3rem 2.5rem; }
  .hero-controls { margin-top: 2rem; }
  .cta-band { border-radius: var(--radius); }

  /* Wide tables scroll inside their own container rather than the page */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table { font-size: .88rem; }
  .cmp-table th, .cmp-table td { padding: .8rem .9rem; }
}

/* Summary rows stack on small screens */
@media (max-width: 520px) {
  .summary-card > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ≤ 560px — phone */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .trustbar-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .page-hero .hero-actions .btn { width: 100%; }
  .hero-controls { gap: .85rem; justify-content: space-between; width: 100%; }
  .hero-counter { display: none; }
  .brand-name { font-size: 1.05rem; }
  .brand-tagline { font-size: .58rem; letter-spacing: .12em; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Floating WhatsApp button — tighter on phones, and the label is not useful
   on touch (there is no hover), so the button stays a circle. */
@media (max-width: 560px) {
  .wa-float { height: 52px; max-width: 52px; padding: 0; }
  .wa-float svg { width: 27px; height: 27px; margin-left: 12.5px; }
  .wa-pulse { width: 52px; height: 52px; }
  .wa-float:hover, .wa-float:focus-visible { max-width: 52px; }
  .wa-float .wa-label { display: none; }
}

/* ≤ 400px — small phone */
@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  .hero-dot { width: 22px; }
  .hero-dot[aria-selected="true"] { width: 40px; }
  .brand-mark { height: 32px; }
  .brand-tagline { font-size: .5rem; letter-spacing: .08em; }
}

/* Print */
@media print {
  .site-header, .to-top, .wa-float, .hero-controls, .nav-backdrop, .site-footer .social { display: none !important; }
  body { color: #000; background: #fff; }
  .hero { background: #fff; color: #000; margin-top: 0; }
  .card, .step, .faq-item { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

/* ── Contact page ────────────────────────────────────────────────────────
   The form and the map/details column sit side by side on desktop and
   stack on tablet. The two-column field grid collapses a step later. */
@media (max-width: 1000px) {
  .contact-layout { grid-template-columns: 1fr; gap: 2.25rem; }
  .map-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-panel { padding: 1.35rem 1.15rem; }
  .map-frame { aspect-ratio: 4 / 3; }
  .success-actions .btn { width: 100%; justify-content: center; }
}
/* The four-across variant keeps four columns until tablet, then halves.
   Re-stated at 1100px because the six-across rule above would otherwise
   drop it to three. */
@media (max-width: 1100px) {
  .flow-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-steps--4 .flow-step:nth-child(3n)::after { display: block; }
  .flow-steps--4 .flow-step:last-child::after { display: none; }
}
@media (max-width: 900px) {
  .flow-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-steps--4 .flow-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 460px) {
  .flow-steps--4 { grid-template-columns: 1fr; }
}