/* ── HEADER — fixed, transparent over the hero (white top scrim), solid white on hover/scroll/mega ── */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;color:var(--ink)}
/* the two stacked white gradients of the Figma (216px + 270px) */
.hdr__grad{position:absolute;inset-inline:0;top:0;height:270px;pointer-events:none;transition:opacity .25s;
	background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 216px),linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 270px)}
.hdr__white{position:absolute;inset-inline:0;top:0;height:var(--hdr-h);background:var(--white);opacity:0;pointer-events:none;transition:opacity .25s}
/* the gutters live on the top row, so the absolutely-centred logo and the nav
   both centre on the viewport (960) and not on a padded content box */
.hdr__inner{position:relative}

/* top row — phone + cta · centred logo · language + social */
.hdr__top{position:relative;direction:ltr;display:flex;align-items:center;justify-content:space-between;height:105px;padding-inline:35px 44px}
.hdr__left{display:flex;align-items:center;gap:18px}
.hdr__right{display:flex;align-items:center;gap:24px}

.hdr__logo{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:133px;height:101px}
.hdr__logo img{width:100%;height:100%;object-fit:cover}

.hdr__phone{display:inline-flex;align-items:center;gap:8px;height:46px;padding-inline:16px 22px;border-radius:60px;
	background:var(--white);font-size:21px;font-weight:700;color:var(--ink-2);line-height:1}
.hdr__phone svg{flex:none;width:24px;height:24px}
.hdr__phone:hover{background:var(--pink)}
.hdr__consult{height:46px;padding-inline:29px 20px;gap:9px;font-size:21px;font-weight:400;color:var(--ink)}

/* language pill — flag · HE · chevron, laid out ltr like the design */
.hdr__lang{direction:ltr;display:inline-flex;align-items:center;gap:7px;height:46px;padding-inline:11px 10px;
	border:1px solid rgba(0,0,0,.8);border-radius:10px;font-size:18px;line-height:1;color:var(--ink)}
.hdr__lang .hdr__flag{width:16px;height:16px;border-radius:50%;object-fit:cover}
.hdr__lang svg{width:16px;height:16px}
.hdr__lang:hover{border-color:var(--brand)}

.hdr__soc{display:flex;align-items:center;gap:9px}
.soc{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--ink)}
.soc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);
	-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.soc:hover{background:var(--grad);color:var(--white)}
.soc svg{width:auto;height:19px}

/* nav */
.nav{display:flex;justify-content:center;align-items:center;gap:50px;margin:0;padding:19px 0 0;height:63px}

.nav .item>a{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:22px;font-weight:400;line-height:1;color:#000;transition:color .2s}
.nav .item>a svg{flex:none;width:17px;height:17px}
.nav .item>a:hover{color:var(--brand)}
/* the black rule the Figma draws under the open item, sitting on the header's bottom edge */
.nav .item>a::after{content:"";position:absolute;inset-inline:2px 2px;bottom:-25px;height:1px;background:#000;opacity:0;transition:opacity .2s}
.nav .item>a:hover::after,.nav .item.is-mega-open>a::after{opacity:1}

.hdr__burger{display:none}

/* states */
.hdr:hover .hdr__white,.hdr.is-scrolled .hdr__white,.hdr.is-mega-open .hdr__white,.hdr.is-open .hdr__white{opacity:1}
.hdr:hover .hdr__grad,.hdr.is-scrolled .hdr__grad,.hdr.is-mega-open .hdr__grad,.hdr.is-open .hdr__grad{opacity:0}
.page-light .hdr__grad{opacity:0}
.page-light .hdr__white{opacity:1}

/* ── fluid down from 1920 ─────────────────────────────────────── */
@media(max-width:1660px){
	.hdr__top{padding-inline:20px 24px}
	.nav{gap:clamp(18px,3vw,50px)}
	.nav .item>a{font-size:clamp(16px,1.15vw,22px)}
}
@media(max-width:1200px){
	.hdr__consult{display:none}
	.hdr__right{gap:14px}
	.hdr__soc{gap:6px}
	.soc{width:40px;height:40px}
}
@media(max-width:1023px){
	:root{--hdr-h:86px}
	.hdr__top{padding-inline:16px}
	.hdr__top{height:86px}
	.hdr__logo{width:96px;height:73px;top:6px}
	.hdr__phone span{display:none}
	.hdr__phone{padding-inline:12px;gap:0}
	.hdr__soc,.hdr__lang{display:none}
	.nav{display:none}
	.hdr__grad{height:140px;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 140px)}
	.hdr__burger{display:grid;place-items:center;width:44px;height:44px}
	.hdr__burger span,.hdr__burger span::before,.hdr__burger span::after{display:block;width:26px;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
	.hdr__burger span{position:relative}
	.hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;inset-inline:0}
	.hdr__burger span::before{top:-8px}
	.hdr__burger span::after{top:8px}
	.hdr.is-open .hdr__burger span{background:transparent}
	.hdr.is-open .hdr__burger span::before{transform:translateY(8px) rotate(45deg)}
	.hdr.is-open .hdr__burger span::after{transform:translateY(-8px) rotate(-45deg)}
}