/* ============================================================
   אלומות – אנרגיה מתחדשת
   Landing page styles (RTL, Hebrew)
   ============================================================ */

:root{
  --navy:#022754;
  --navy-deep:#021d40;
  --navy-soft:#0a3a6b;
  --gold:#f5a623;
  --gold-deep:#e8961a;
  --gold-text:#a06700;   /* amber-gold for text on light bg — WCAG AA (4.74:1 on #fff) */
  --placeholder:#677488; /* blue-gray placeholder — WCAG AA (4.74:1 on #fff) */
  --yellow:#ffd869;
  --yellow-soft:#ffe9a8;
  --gray-bg:#f4f5f7;
  --gray-line:#e2e6ec;
  --text:#022754;
  --muted:#5a6b85;
  --white:#ffffff;
  --shadow-card:0 18px 40px -18px rgba(2,39,84,.28);
  --shadow-soft:0 8px 30px -12px rgba(2,39,84,.18);
  --radius:18px;
  --radius-lg:34px;
  --container:1248px;   /* → 1200px content, matching Figma's lower-section width (1193–1234) */
  --container-wide:1584px;   /* 1536 content + 2×24 padding → 192px margins at 1920 */
  --header-h:100px;
  --footer-h:426px;   /* used to extend the contact gradient behind the footer (Figma) */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  /* Google Sans — exactly as specified in Figma (SIL OFL public release, incl. Hebrew).
     Inherited by buttons/inputs/select/textarea via the `font-family:inherit` rules below. */
  font-family:'Google Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  scroll-padding-top:var(--header-h);
}
html{scroll-padding-top:var(--header-h)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
/* Inert placeholder links awaiting real URLs (social / legal) — see README. Not clickable, not focusable, no hover. */
[data-todo]{pointer-events:none;cursor:default}
ul,ol{list-style:none}
input,select,textarea{font-family:inherit;font-size:inherit}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.container--narrow{max-width:978px}   /* → 930px content (Figma contact form width) */
.container--wide{width:100%;max-width:var(--container-wide);margin-inline:auto;padding-inline:24px}
.section{padding-block:72px}
.section--flush{padding-block:0}

/* ---------- Section titles ---------- */
.section__title{
  font-size:30px;font-weight:700;color:var(--navy);
  position:relative;line-height:1.3;letter-spacing:-.5px;
}
.section__title--center{text-align:center;margin-bottom:40px}
.section__title--light{color:var(--white)}
.title-underline{
  display:block;width:120px;height:4px;border-radius:4px;
  background:var(--gold);margin:14px auto 0;
}
.title-underline--wide{width:200px}
.eyebrow{
  display:inline-block;font-size:24px;font-weight:700;color:var(--navy);
  position:relative;margin-bottom:18px;
}
.eyebrow .title-underline{width:110px;margin:10px 0 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:16px;border-radius:40px;padding:14px 30px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
  will-change:transform;
}
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 24px -10px rgba(245,166,35,.7)}
.btn--gold:hover{background:var(--gold-deep);transform:translateY(-2px)}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:60;background:var(--white);
  transition:box-shadow .25s,padding .25s;
}
.header.is-scrolled{box-shadow:0 8px 24px -16px rgba(2,39,84,.18)}
.header__inner{
  height:var(--header-h);display:flex;align-items:center;gap:24px;
}
.header__logo img{height:60px;width:auto}
.nav{flex:1}
.nav__list{
  display:flex;align-items:center;justify-content:center;gap:0;
  flex-wrap:wrap;
}
.nav__link{
  position:relative;font-size:20px;font-weight:400;color:var(--navy);
  padding:6px 19px;transition:color .2s;white-space:nowrap;line-height:1.4;
}
.nav__list li:not(:last-child) .nav__link::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:1px;height:21px;background:var(--gold);
}
.nav__link:hover{color:var(--gold-deep)}
.nav__link.is-active{font-weight:700}
.nav__close{display:none}

/* Figma: 30x30 icons, 15px apart. The navy circle is baked into the exported artwork. */
.header__social{display:flex;align-items:center;gap:15px;direction:ltr}
.header__social .social-ico{width:30px;height:30px;background:none;border-radius:0}
.header__social .social-ico img{width:30px;height:30px;display:block}
.social-ico{
  width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--white);
  display:grid;place-items:center;transition:transform .2s,background .2s;
}
.social-ico:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)}

.header__burger{display:none;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center}
.header__burger span{display:block;height:3px;border-radius:3px;background:var(--navy);transition:.25s var(--ease)}

.nav-backdrop{
  position:fixed;inset:0;background:rgba(2,29,64,.5);z-index:55;
  opacity:0;visibility:hidden;transition:.3s;
}
.nav-backdrop.is-open{opacity:1;visibility:visible}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;color:var(--white)}
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  border-bottom-right-radius:200px;
  background:#001856 url('../img/hero-bg.webp') center/cover no-repeat;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(165deg,rgba(0,24,86,0) 28%,rgba(0,24,86,.82) 92%);
}
/* Hero height 676px — pixel-measured from the client's newer design reference
   (header ends y=97, hero ends y=773). Old Figma frame 2:557 said 777px. */
.hero__inner{
  position:relative;z-index:2;height:min(676px,35.2vw);min-height:430px;
}
.hero__person{position:absolute;left:6%;bottom:0;width:clamp(230px,20.5vw,394px)}
.hero__person img{width:100%;height:auto;display:block}
.hero__content{
  position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);
  text-align:center;width:max-content;max-width:90%;
}
.hero__title{
  display:flex;flex-direction:column;line-height:1;letter-spacing:-1.4px;
  margin-bottom:30px;text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.hero__title-line1{font-size:clamp(38px,3.646vw,70px);font-weight:500;color:var(--white)}
.hero__title-line2{font-size:clamp(38px,3.646vw,70px);font-weight:700;color:var(--yellow)}
.hero__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:55px;padding:0 36px;border:2px solid var(--white);border-radius:100px;
  background:transparent;color:var(--white);font-size:20px;font-weight:500;
  transition:background .2s,color .2s;
}
.hero__cta:hover{background:rgba(255,255,255,.14)}

/* Floating quick contact */
.quick-contact{
  position:absolute;right:0;left:auto;top:calc(100% + 38px);z-index:30;
  width:115px;height:70px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(200deg,#ffd869 28%,#fa9f26 101%);
  color:var(--navy);
  border-radius:100px 0 0 100px;   /* round the left (inner) corners, flush to right edge */
  box-shadow:-6px 8px 22px -10px rgba(2,39,84,.5);
  transition:filter .2s,transform .2s;
}
.quick-contact__icon{width:26px;height:auto;flex:0 0 auto}
.quick-contact__text{font-weight:700;font-size:18px;line-height:1.05;text-align:right;width:52px}
.quick-contact:hover{filter:brightness(.97);transform:translateX(-2px)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{text-align:center;padding-block:60px 112px}
.about .section__title{font-size:33px;letter-spacing:-.66px;margin-bottom:0}
.about .title-underline{width:90px;margin-top:13px}
.about__lead{
  max-width:none;margin:30px auto 0;font-size:20px;color:var(--navy);line-height:1.4;
}
.about__sub{margin-top:22px;font-size:20px;color:var(--navy);font-weight:700;line-height:1.4}

/* ============================================================
   SERVICES
   ============================================================ */
.services{padding-top:20px}
.services__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
/* Figma (raw Plugin API): card 275x472, cornerRadius 137.5 = exactly half the width → capsule.
   NOTE: get_design_context reported 34.785 / h382 — wrong; the raw node values are authoritative. */
.scard{
  background:var(--yellow);border-radius:137.5px;padding:30px 30px 116px;
  min-height:472px;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  box-shadow:var(--shadow-card);transition:transform .25s var(--ease),box-shadow .25s;
}
.scard:hover{transform:translateY(-6px);box-shadow:0 26px 48px -20px rgba(2,39,84,.4)}
.scard--dark{background:var(--navy);color:var(--white)}
.scard__icon{height:96px;display:grid;place-items:center;margin-bottom:14px}
.scard__icon img{width:80px;height:80px;object-fit:contain}
.scard__title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px;line-height:1.3}
.scard--dark .scard__title{color:var(--white)}
.scard__text{font-size:18px;color:var(--navy);line-height:1.25;letter-spacing:-.02em;margin-bottom:22px;flex:1}
.scard--dark .scard__text{color:rgba(255,255,255,.82)}
.scard__btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--navy);
  font-weight:500;font-size:16px;padding:10px 24px;border-radius:20px;min-height:35px;
  box-shadow:0 6px 16px -8px rgba(2,39,84,.4);transition:transform .2s,gap .2s;
}
.scard__btn:hover{transform:translateY(-2px);gap:12px}

/* ============================================================
   PROCESS
   ============================================================ */
/* Figma: title 38px, underline 230x4; circle 148 #f4f5f7 + navy icon;
   number badge 45px #f5a623 with NAVY 28px Bold; step title 24px; text 18px navy lh1.25 */
.process{padding-bottom:clamp(90px,13.5vw,259px)}
.process .section__title{font-size:38px;letter-spacing:-.02em}
.process .title-underline{width:230px}
.process__list{
  display:flex;justify-content:center;align-items:flex-start;gap:0;margin-top:56px;
}
.pstep{flex:1 1 0;max-width:224px;text-align:center;display:flex;flex-direction:column;align-items:center}
.pstep__badge{position:relative;margin-bottom:26px}
.pstep__circle{
  width:148px;height:148px;border-radius:50%;background:var(--gray-bg);
  display:grid;place-items:center;
}
.pstep__circle img{max-width:78px;max-height:80px;width:auto;height:auto;object-fit:contain}
.pstep__num{
  position:absolute;top:50%;right:-20px;transform:translateY(-50%);
  width:45px;height:45px;border-radius:50%;background:var(--gold);color:var(--navy);
  font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1;
  display:grid;place-items:center;
}
.pstep__title{font-size:24px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:12px}
.pstep__text{font-size:18px;color:var(--navy);line-height:1.25;letter-spacing:-.02em;max-width:212px;margin-inline:auto}
.pstep-arrow{flex:0 0 auto;display:flex;justify-content:center;color:var(--navy);margin-top:62px}
.pstep-arrow svg{width:38px;height:auto}

/* ============================================================
   IMPORTANT TO KNOW
   ============================================================ */
/* Figma: section 1920x538 (#f4f5f7); image 950 wide, full height, top-right radius 200;
   eyebrow 38px + underline 128x4; title 28px; text 18px navy lh1.4 max-width 413;
   arrows 40x40 navy; dots 11px — active NAVY, inactive GOLD */
.info{
  display:grid;grid-template-columns:49.5% minmax(0,1fr);align-items:stretch;
  background:var(--gray-bg);min-height:min(538px,28vw);
}
.info__media{position:relative;overflow:hidden;border-top-right-radius:200px}
.info__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.info__panel{
  padding:40px clamp(20px,3vw,56px);display:flex;flex-direction:column;justify-content:center;
  min-width:0;text-align:center;
}
.info .eyebrow{display:block;font-size:38px;letter-spacing:-.02em;margin-bottom:26px}
.info .eyebrow .title-underline{width:128px;margin-inline:auto}
.info__stage{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px);margin-top:4px}
.info__stage .round-arrow{flex:0 0 auto}
.info__slider{flex:1;overflow:hidden;min-width:0}
.info__track{display:flex;transition:transform .5s var(--ease)}
.info__slide{flex:0 0 100%;padding-inline:4px}
.info__title{font-size:28px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:14px}
.info__text{
  font-size:18px;color:var(--navy);line-height:1.4;letter-spacing:-.02em;
  max-width:413px;margin-inline:auto;
}
.info .round-arrow{width:40px;height:40px;border:1.5px solid var(--navy);background:transparent;color:var(--navy)}
.info .round-arrow:hover{background:var(--navy);color:var(--white)}
.info .dot{width:11px;height:11px;border-radius:50%;background:var(--gold)}
.info .dot.is-active{background:var(--navy);width:11px;border-radius:50%}
.dots{margin-top:26px;justify-content:center}
.round-arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gray-line);background:var(--white);
  color:var(--navy);display:grid;place-items:center;transition:.2s;flex:0 0 auto;
}
.round-arrow:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.dots{display:flex;gap:9px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:#cfd6e0;transition:.25s;cursor:pointer}
.dot.is-active{background:var(--gold);width:24px;border-radius:6px}

/* ============================================================
   WHY CHOOSE
   ============================================================ */
/* Figma: section background = solar image + #022754 @90% (exported composited from node 34:230) */
.why{background:#022754 url('../img/why-bg.webp') center/cover no-repeat}
.why .section__title{color:var(--white)}
/* Figma: 3x2 grid, INTERNAL dividers only (2 vertical + 1 horizontal, white) — no outer box.
   Item title 24px Bold gold; text 18px Regular white. */
.why .section__title{color:var(--white);font-size:38px;letter-spacing:-.02em}
.why .title-underline{width:230px}
.why > .container{max-width:1282px}   /* → 1234px content (Figma why-grid width) */
.why__grid{
  display:grid;grid-template-columns:repeat(3,1fr);border:none;margin-top:52px;
}
.why__item{
  padding:44px 28px;text-align:center;border:none;transition:background .2s;
}
.why__item:not(:nth-child(3n)){border-inline-end:1px solid rgba(255,255,255,.28)}
.why__item:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.28)}
.why__item:hover{background:rgba(255,255,255,.05)}
.why__title{font-size:24px;font-weight:700;color:var(--gold);letter-spacing:-.02em;margin-bottom:12px}
.why__text{font-size:18px;color:var(--white);line-height:1.4;letter-spacing:-.02em}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{position:relative;background:var(--white);padding-block:70px}
.testi .container{position:relative;z-index:1}
/* Figma: cards area spans the full content width (1199); arrows sit OUTSIDE it */
.testi__stage{position:relative;display:flex;align-items:center;margin-top:16px}
.testi__stage .round-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;flex:0 0 auto}
.testi__stage > button.round-arrow:first-of-type{inset-inline-start:-58px}
.testi__stage > button.round-arrow:last-of-type{inset-inline-end:-58px}
.testi__viewport{flex:none;width:100%;overflow:hidden;min-width:0}
.testi .section__title{font-size:38px;letter-spacing:-.02em}
.testi .title-underline{width:130px}
.testi__track{display:flex;gap:31px;transition:transform .5s var(--ease)}
.tcard{
  flex:0 0 calc((100% - 62px)/3);min-width:0;background:var(--gray-bg);color:var(--navy);
  border-radius:20px;padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:256px;box-shadow:var(--shadow-soft);
}
.tcard__quote{font-size:18px;line-height:1.4;letter-spacing:-.02em;color:var(--navy)}
.tcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
.tcard__name{font-weight:700;font-size:15px;color:var(--navy)}
.stars{color:var(--gold);letter-spacing:2px;font-size:16px;direction:ltr}

/* ============================================================
   FAQ
   ============================================================ */
/* Figma: grey bar #f4f5f7 r15 h60 for the question; answer sits BELOW the bar;
   icon 20px — navy when closed, gold when open; title 38px + 230px underline */
.faq .section__title{font-size:38px;letter-spacing:-.02em}
.faq .title-underline{width:230px}
.faq > .container{max-width:1239px}   /* → 1191px content (Figma FAQ bar width) */
.faq__list{display:flex;flex-direction:column;gap:16px;margin-top:52px}
.faq__item{background:none;border:none;border-radius:0;overflow:visible;box-shadow:none}
.faq__item.is-open{border:none;box-shadow:none}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--gray-bg);border-radius:15px;min-height:60px;padding:0 28px;
  font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.02em;text-align:start;
}
.faq__icon{position:relative;flex:0 0 20px;width:20px;height:20px;background:none;border-radius:0}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--navy);border-radius:2px;transition:background .2s;
}
.faq__icon::before{width:20px;height:2.5px}
.faq__icon::after{width:2.5px;height:20px;transition:transform .3s var(--ease),background .2s}
.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after{background:var(--gold)}
.faq__item.is-open .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{padding:16px 28px 0;font-size:18px;color:var(--navy);line-height:1.4;letter-spacing:-.02em}

/* ============================================================
   CONTACT
   ============================================================ */
/* Figma: section bg = vertical gradient #fff 21.6% -> #ffd869 92.8%; title 38px + 324px underline;
   fields 454x55 white, 1.5px navy border, radius 10; message box 930x140; submit 930x55 gold radius 10 */
/* Figma: the gradient rect (1920x899) runs from the contact area down to the page bottom —
   i.e. it continues BEHIND the footer, so the footer's rounded top-left corner reveals it.
   The pseudo has no stacking context above it (.contact keeps z-index:auto), so z-index:-1
   paints it beneath the footer's navy background. */
.contact{position:relative;background:transparent}
.contact::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(100% + var(--footer-h));
  background:linear-gradient(180deg,#ffffff 21.6%,#ffd869 92.8%);
  z-index:-1;pointer-events:none;
}
.contact .section__title{font-size:38px;letter-spacing:-.02em}
.contact .title-underline{width:324px}
.contact__form{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 22px;margin-top:34px;
}
.field{min-width:0}
.field--full{grid-column:1 / -1}
.field input,.field select,.field textarea{
  width:100%;height:55px;border:1.5px solid var(--navy);border-radius:10px;
  padding:0 24px;font-size:18px;color:var(--navy);background:var(--white);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{height:140px;padding:16px 24px;line-height:1.4;resize:vertical;font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:var(--navy);opacity:1}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,166,35,.14)}
.field input.is-error,.field select.is-error{border-color:#e0563f;box-shadow:0 0 0 4px rgba(224,86,63,.12)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--navy)}
.select-wrap select:valid{color:var(--navy)}
.select-arrow{position:absolute;inset-inline-start:22px;top:50%;transform:translateY(-50%);color:var(--navy);pointer-events:none}
.btn.contact__submit{grid-column:1 / -1;height:55px;width:100%;font-size:18px;font-weight:700;border-radius:10px}
.contact__msg{grid-column:1 / -1;text-align:center;font-weight:600;min-height:22px}
.contact__msg.is-ok{color:#1f9d55}
.contact__msg.is-bad{color:#e0563f}

/* ============================================================
   FOOTER
   ============================================================ */
/* Figma: navy panel with a large rounded TOP-LEFT corner (140px — verified from the render,
   the node is transformed so the raw API radius reads as bottom-right);
   column headings GOLD 20px Bold; links 18px Medium white; phone pill 342x50 r100 navy 22px Bold;
   email 22px Medium; follow label 20px SemiBold; social icons GOLD; copy/legal 18px */
.footer{
  background:var(--navy);color:rgba(255,255,255,.82);padding-top:56px;
  border-top-left-radius:140px;overflow:hidden;
}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:36px;padding-bottom:46px}
.footer__logo{height:50px;width:auto;filter:brightness(0) invert(1);margin-bottom:22px}
.footer__phone{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--gold);color:var(--navy);font-size:22px;font-weight:700;
  min-height:50px;padding:0 26px;border-radius:100px;margin-bottom:18px;transition:background .2s;
}
.footer__phone:hover{background:var(--gold-deep)}
.footer__mail{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500;margin-bottom:24px;color:var(--white)}
.footer__mail svg{color:var(--gold);flex:0 0 auto}
.footer__follow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer__follow>span{font-size:20px;font-weight:600;color:var(--white)}
.footer__social{display:flex;gap:12px}
.social-ico--light{background:transparent;color:var(--gold);width:35px;height:35px}
.social-ico--light:hover{background:transparent;color:var(--gold-deep);transform:translateY(-2px)}
.social-ico--light svg{width:26px;height:26px}
.footer__head{font-size:20px;font-weight:700;color:var(--gold);margin-bottom:18px}
.footer__links li{margin-bottom:12px}
.footer__links a{font-size:18px;font-weight:500;color:var(--white);transition:color .2s}
.footer__links a:hover{color:var(--gold)}
.footer__bar{border-top:1px solid rgba(255,255,255,.14)}
.footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.footer__copy{font-size:18px;color:var(--white)}
.footer__legal{display:flex;gap:24px}
.footer__legal a,.footer__legal-todo{font-size:18px;font-weight:500;color:var(--white);transition:color .2s}
.footer__legal a:hover{color:var(--gold)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--header-h:74px}
  .header__social{display:none}
  .nav__link{font-size:16px;padding:6px 14px}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .hero__content{padding-inline-end:20px}
  .footer__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  /* ---- mobile nav ---- */
  .header__burger{display:flex}
  .nav{
    position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(82vw,340px);
    background:var(--white);z-index:60;flex:none;
    transform:translateX(100%);transition:transform .32s var(--ease);
    box-shadow:-12px 0 40px -12px rgba(2,39,84,.4);padding:84px 0 30px;
    overflow-y:auto;
  }
  [dir="rtl"] .nav{transform:translateX(-100%)}
  .nav.is-open{transform:translateX(0)!important}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{padding:16px 28px;font-size:18px;display:block;border-bottom:1px solid var(--gray-line)}
  .nav__list li:not(:last-child) .nav__link::before{display:none}
  .nav__close{
    display:block;position:absolute;top:18px;inset-inline-start:22px;
    font-size:34px;line-height:1;color:var(--navy);
  }

  /* ---- hero ---- */
  .hero__bg{border-bottom-right-radius:60px}
  .hero__inner{
    position:relative;z-index:2;height:auto;min-height:0;display:flex;flex-direction:column;
    align-items:center;gap:18px;padding-block:36px;text-align:center;
  }
  .hero__person{position:static;left:auto;bottom:auto;width:230px;max-width:62vw}
  .hero__content{position:static;left:auto;top:auto;transform:none;width:auto;max-width:100%}
  .hero__title{margin-bottom:22px}
  .hero__title-line1,.hero__title-line2{font-size:clamp(30px,8.5vw,40px)}

  /* ---- sections spacing ---- */
  .section{padding-block:54px}
  .section__title{font-size:25px}
  .about__lead{font-size:16.5px}

  /* ---- services ---- */
  .services__grid{grid-template-columns:1fr;gap:20px;max-width:420px;margin-inline:auto}

  /* ---- process => vertical stack ---- */
  .process__list{flex-direction:column;align-items:center;gap:0;max-width:360px;margin-inline:auto}
  .pstep{flex:none;max-width:none;width:100%}
  .pstep-arrow{margin-top:0;margin-block:8px;transform:rotate(-90deg)}

  /* ---- info ---- */
  .info{grid-template-columns:minmax(0,1fr)}
  .info__media{order:-1;min-height:260px;border-top-right-radius:0;border-bottom-left-radius:80px}
  .info__panel{padding:40px 18px 46px}
  .info__stage{gap:6px}

  /* ---- why ---- */
  .why__grid{grid-template-columns:1fr 1fr;border:none;gap:8px;margin-top:34px}
  .why__item,
  .why__item:not(:nth-child(3n)),
  .why__item:nth-child(-n+3){border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:26px 16px}
  .why__title{font-size:20px}
  .why__text{font-size:16px}

  /* ---- testimonials: 1 per view ---- */
  .tcard{flex:0 0 100%;min-height:200px}
  .testi__stage{flex-wrap:wrap;justify-content:center;gap:14px}
  .testi__stage .round-arrow{position:static;transform:none;inset:auto}

  /* ---- contact ---- */
  .contact__form{grid-template-columns:1fr}

  /* ---- footer ---- */
  .footer{border-top-left-radius:60px}
  .footer__head{font-size:18px}
  .footer__links a,.footer__copy,.footer__legal a,.footer__legal-todo{font-size:16px}
  .footer__phone{font-size:18px}
  .footer__mail{font-size:17px}
  .footer__follow>span{font-size:17px}
  .footer__inner{grid-template-columns:1fr;gap:30px;text-align:center}
  .footer__brand{display:flex;flex-direction:column;align-items:center}
  .footer__follow{justify-content:center}
  .footer__bar-inner{flex-direction:column;text-align:center}

  /* ---- quick contact: small pill just below the hero ---- */
  .quick-contact{
    right:14px;left:auto;top:calc(100% + 12px);
    width:auto;height:auto;flex-direction:row;border-radius:40px;gap:7px;
    padding:11px 16px;box-shadow:0 10px 26px -8px rgba(2,39,84,.5);
  }
  .quick-contact__text{width:auto;font-size:15px}
}

@media (max-width:460px){
  .why__grid{grid-template-columns:1fr}
  .container{padding-inline:18px}
  .quick-contact span{display:none}
  .quick-contact{padding:14px;border-radius:50%}
}

/* ============================================================
   MOBILE POLISH — phones only (≤767px). Tightens the vertical
   rhythm so mobile reads like a real adaptation of the desktop.
   Nothing here affects 768px+ (desktop/tablet stay identical).
   ============================================================ */
@media (max-width:767px){

  /* ---- global rhythm ---- */
  :root{ --header-h:64px; }
  .section{ padding-block:40px; }
  .section__title{ font-size:24px; }

  /* ---- 1. HEADER: logo right, burger left, spread full width ----
     The flex row is .header__inner (not .header). With social hidden and the
     nav a fixed drawer, its only in-flow kids are logo + burger, so we spread
     them edge-to-edge with a uniform ~18px inline padding. */
  .header{ gap:14px; }
  .header__inner{ justify-content:space-between; gap:12px; padding-inline:18px; }
  .header__logo img{ height:42px; }
  .header__burger{ width:24px; height:auto; padding:12px 11px; margin-inline-end:-11px; box-sizing:content-box; }
  .header__burger span{ width:24px; }

  /* ---- 2. HERO: readable title/CTA in a clean top zone, worker anchored ----
     A bit taller so the CTA clears the worker's head/sun, plus a soft top
     navy gradient (over the busy panels/sky only — the worker sits ABOVE it,
     z-index 2, so his sun/face stay vivid) for reliable text contrast. */
  .hero__inner{ display:block; position:relative; min-height:490px; padding:0; }
  .hero__inner::before{
    content:""; position:absolute; inset:0 0 auto 0; height:62%; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(2,39,84,.6) 0%, rgba(2,39,84,.26) 55%, rgba(2,39,84,0) 100%);
  }
  .hero__content{ position:relative; z-index:3; text-align:center; padding:26px 20px 0; }
  .hero__title{ margin-bottom:16px; }
  .hero__title-line1,.hero__title-line2{ font-size:clamp(28px,8vw,36px); }
  .hero__cta{ margin-inline:auto; } /* content-driven width, centered */
  .hero__person{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:clamp(190px,52vw,262px); max-width:none; z-index:2;
  }

  /* ---- 3. QUICK CONTACT: keep clear of the edge + iPhone safe-area ---- */
  .quick-contact{ right:max(14px, env(safe-area-inset-right)); }

  /* ---- 4. ABOUT ---- */
  .about__lead{ font-size:16px; line-height:1.55; }

  /* ---- 5. SERVICE CARDS: content-driven height, softer radius, tight ---- */
  .services__grid{ gap:16px; max-width:none; }
  .scard{ min-height:0; border-radius:26px; padding:26px 22px; width:90%; margin-inline:auto; }
  .scard__icon{ height:58px; margin-bottom:8px; }
  .scard__icon img{ width:54px; height:54px; }
  .scard__title{ font-size:21px; margin-bottom:6px; }
  .scard__text{ font-size:16px; line-height:1.4; margin-bottom:16px; flex:none; }
  .scard__btn{ font-size:15px; padding:9px 22px; }

  /* ---- 6. PROCESS: compact vertical timeline ---- */
  .process{ padding-bottom:36px; }
  .process .section__title{ font-size:24px; }
  .process__list{ margin-top:26px; max-width:320px; }
  .pstep__circle{ width:92px; height:92px; }
  .pstep__circle img{ max-width:48px; max-height:50px; }
  .pstep__num{ width:34px; height:34px; font-size:20px; right:-14px; }
  .pstep__badge{ margin-bottom:10px; }
  .pstep__title{ font-size:20px; margin-bottom:4px; }
  .pstep__text{ font-size:15.5px; line-height:1.35; max-width:260px; }
  .pstep-arrow{ margin-block:6px; }
  .pstep-arrow svg{ width:26px; }

  /* ---- 7. INFO (important to know) ---- */
  .info__panel{ padding:30px 18px 34px; }
  .info__media{ min-height:210px; }

  /* ---- 8/9. WHY: single column, compact cards ---- */
  .why__grid{ grid-template-columns:1fr; gap:10px; margin-top:26px; }
  .why__item,
  .why__item:not(:nth-child(3n)),
  .why__item:nth-child(-n+3){ padding:18px 18px; }
  .why__title{ font-size:18px; }
  .why__text{ font-size:15px; line-height:1.4; }

  /* ---- 10. TESTIMONIALS: card on top, both arrows on ONE row below it ---- */
  .tcard{ min-height:0; }
  .testi__stage{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; }
  .testi__viewport{ order:-1; flex:0 0 100%; width:100%; }
  .testi__stage .round-arrow{ position:static; order:0; inset:auto; transform:none; }
  .dots{ margin-top:2px; }

  /* ---- 12. CONTACT FORM: compact, uniform fields ---- */
  .field input,.field select,.field textarea{ height:50px; font-size:16px; padding:0 18px; }
  .field textarea{ height:120px; padding:14px 18px; }
  .select-arrow{ inset-inline-start:16px; }
  .btn.contact__submit{ height:50px; font-size:17px; }

  /* ---- 11. FAQ: tighter rows (touch stays ≥44px via min-height) ---- */
  .faq__list{ margin-top:26px; gap:10px; }
  .faq__q{ min-height:52px; padding:12px 20px; font-size:16px; }
  .faq__a p{ padding:10px 20px 2px; font-size:16px; line-height:1.45; }

  /* ---- 13. FOOTER: compact — brand full-width, links in a 2-col grid ---- */
  .footer{ padding-top:40px; border-top-left-radius:80px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:20px 24px; text-align:center; padding-bottom:26px; }
  .footer__brand{ grid-column:1 / -1; align-items:center; }
  .footer__logo{ height:42px; margin-bottom:14px; }
  .footer__phone{ font-size:18px; min-height:46px; margin-bottom:12px; }
  .footer__mail{ font-size:16px; margin-bottom:14px; justify-content:center; }
  .footer__head{ font-size:17px; margin-bottom:10px; }
  .footer__links li{ margin-bottom:7px; }
  .footer__links a{ font-size:15px; }
  .footer__bar-inner{ padding-block:16px; gap:8px; }
  .footer__copy,.footer__legal a,.footer__legal-todo{ font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}