@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{--beige:#173e69;
--sand:#d9eef6;
--cream:#edf8fc;
--offwhite:#fafdff;
--white:#ffffff;
--sky:#55c3e8;
--slate:#3b3e45;
--light-gray:#e7ecef;
--radius:18px;
--shadow:0 18px 48px rgba(23,62,105,.16)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
background:var(--offwhite);
color:var(--beige);
font-family:'DM Sans',sans-serif;
font-size:15px;
line-height:1.6}
a{color:inherit;
text-decoration:none}
a[href^="tel:"]{direction:ltr;
unicode-bidi:isolate;
display:inline-block}
button,input,textarea{font:inherit;
color:inherit}
button{cursor:pointer;
border:0}
.container{width:min(1180px,calc(100% - 64px));
margin:auto}
.announcement{background:var(--beige);
color:var(--offwhite);
height:32px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
font-size:10px;
letter-spacing:1.3px;
text-transform:uppercase}
.announcement span{color:var(--cream)}
.site-header{height:88px;
position:sticky;
top:0;
z-index:20;
background:var(--sand);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--sand)}
.nav{height:100%;
display:flex;
align-items:center;
justify-content:space-between}
.brand{display:flex;
align-items:center;
gap:10px;
color:var(--beige)}
.brand strong{font-family:'Manrope',sans-serif;
font-size:21px;
font-weight:800;
letter-spacing:3px;
display:block;
line-height:1}
.brand small{display:block;
font-size:7px;
letter-spacing:2px;
margin-top:5px}
.brand-mark{width:30px;
height:30px;
border:1px solid var(--beige);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
gap:2px}
.brand-mark i{display:block;
width:2px;
background:var(--beige);
border-radius:2px}
.brand-mark i:nth-child(1){height:8px}
.brand-mark i:nth-child(2){height:15px}
.brand-mark i:nth-child(3){height:10px}
.nav-links{display:flex;
align-items:center;
gap:34px;
font-size:12px;
color:var(--beige)}
.nav-links a{transition:color .25s}
.nav-links a:hover,.nav-links .active{color:var(--sand)}
.nav-cta{padding:12px 18px;
border:1px solid var(--beige);
border-radius:30px}
.nav-cta span,.button span{font-size:17px;
margin-left:9px}
.language-toggle{padding:10px 14px;
border:1px solid var(--beige);
border-radius:22px;
background:transparent;
font-size:11px;
font-weight:700;
color:var(--beige)}
.language-toggle:hover{background:var(--beige);
color:var(--offwhite)}
[dir="rtl"] body{text-align:right}
[dir="rtl"] .eyebrow,[dir="rtl"] .hero-actions,[dir="rtl"] .trust-note{justify-content:flex-start}
[dir="rtl"] .product-link{direction:rtl}
.menu-toggle{display:none;
background:none;
width:40px;
height:40px}
.menu-toggle span{display:block;
width:22px;
height:1px;
background:var(--beige);
margin:6px auto}
.section-shell{background:var(--cream);
min-height:calc(100vh - 120px);
display:flex;
flex-direction:column}
.hero-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
flex:1;
padding:70px 0 30px}
.eyebrow{font-size:10px;
letter-spacing:2.1px;
font-weight:700;
margin:0 0 20px;
display:flex;
align-items:center;
gap:12px}
.eyebrow span{display:inline-block;
width:38px;
height:1px;
background:var(--beige)}
h1,h2,h3{font-family:'Manrope',sans-serif;
margin:0;
color:var(--beige);
font-weight:700}
h1{font-size:clamp(48px,6.4vw,82px);
line-height:1.02;
letter-spacing:-2px;
text-transform:capitalize}
h1 em,h2 em{font-style:normal;
color:var(--sand)}
.hero-lead{max-width:410px;
font-size:16px;
margin:28px 0;
color:var(--beige)}
.hero-actions{display:flex;
align-items:center;
gap:28px}
.button{display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 22px;
border-radius:30px;
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
font-weight:700;
transition:transform .25s,box-shadow .25s}
.button:hover{transform:translateY(-3px);
box-shadow:var(--shadow)}
.button-primary{background:var(--beige);
color:var(--offwhite)}
.text-link{font-size:12px;
border-bottom:1px solid var(--beige);
padding-bottom:4px}
.text-link span{font-size:17px;
margin-left:8px}
.trust-note{display:flex;
align-items:center;
gap:11px;
margin-top:70px;
font-size:11px;
letter-spacing:.4px}
.trust-note small{font-size:10px;
color:var(--sand)}
.mini-check{border:1px solid var(--beige);
border-radius:50%;
height:25px;
width:25px;
display:grid;
place-items:center}
.hero-visual{position:relative;
height:580px;
display:flex;
justify-content:center;
align-items:center}
.hero-image-wrap{width:min(390px,72%);
height:500px;
overflow:hidden;
border-radius:190px 190px 12px 12px;
position:relative;
z-index:1;
background:var(--sand)}
.hero-image-wrap img{width:100%;
height:100%;
object-fit:cover;
filter:saturate(.65)}
.hero-image-wrap .hero-logo-image{object-fit:contain;
filter:none;
padding:38px}
.hero-orbit{position:absolute;
border:1px solid var(--beige);
border-radius:50%;
opacity:.75}
.orbit-one{width:530px;
height:530px}
.orbit-two{width:390px;
height:390px;
transform:rotate(30deg)}
.float-card{position:absolute;
background:var(--offwhite);
z-index:2;
padding:14px 17px;
box-shadow:var(--shadow);
display:flex;
gap:10px;
align-items:center}
.float-card-top{top:90px;
right:0}
.float-card-bottom{bottom:80px;
left:2px;
align-items:flex-start}
.float-card strong{font-family:'Manrope',sans-serif;
font-size:25px;
line-height:1}
.float-card small,.float-card-bottom span{font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
line-height:1.4}
.float-icon{width:23px;
height:23px;
border-radius:50%;
background:var(--sand);
display:grid;
place-items:center;
font-size:12px}
.hero-caption{position:absolute;
bottom:5px;
right:0;
left:0;
display:flex;
justify-content:space-between;
font-size:9px;
letter-spacing:1.5px}
.hero-scroll{padding-bottom:25px;
display:flex;
gap:18px;
align-items:center;
font-size:9px;
text-transform:uppercase;
letter-spacing:1.5px}
.scroll-line{width:75px;
height:1px;
background:var(--beige)}
.section-padding{padding:125px 0}
.intro{background:var(--offwhite)}
.intro-grid{display:grid;
grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
gap:clamp(60px, 10vw, 150px);
align-items:start}
.section-label{font-size:9px;
letter-spacing:1.6px;
display:flex;
gap:12px;
align-items:center;
height:max-content}
.label-line{width:35px;
height:1px;
background:var(--beige)}
h2{font-size:clamp(36px,4.5vw,56px);
line-height:1.08;
letter-spacing:-1.5px}
.intro-content>p:not(.eyebrow){max-width:460px;
font-size:14px;
margin:28px 0 0}
.values-list{margin-top:20px}
.value-item{border-top:1px solid var(--sand);
padding:25px 0;
display:grid;
grid-template-columns:38px 1fr 20px;
gap:13px;
align-items:start}
.value-item:last-child{border-bottom:1px solid var(--sand)}
.value-number,.why-number{font-size:9px;
letter-spacing:1px}
.value-item h3{font-size:17px;
text-transform:capitalize;
margin-bottom:4px}
.value-item p{font-size:12px;
margin:0;
line-height:1.5}
.value-arrow{font-size:20px}
.products-section{background:var(--sand)}
.section-heading{display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:45px}
.section-heading>p{max-width:290px;
font-size:13px;
margin:0}
.products-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px}
.product-card{background:var(--offwhite);
border-radius:var(--radius);
overflow:hidden;
transition:transform .35s,box-shadow .35s;
cursor:pointer;
display:flex;
flex-direction:column}
.product-card:hover{transform:translateY(-8px);
box-shadow:var(--shadow)}
.product-image{height:275px;
overflow:hidden;
position:relative;
background:var(--cream)}
.product-image img{height:100%;
width:100%;
object-fit:contain;
padding:18px 34px;
filter:saturate(.68);
transition:transform .5s}
.product-card:hover img{transform:scale(1.05)}
.product-index{position:absolute;
top:15px;
left:15px;
background:var(--offwhite);
padding:4px 9px;
font-size:9px;
letter-spacing:1px}
.product-content{padding:22px;
display:flex;
flex:1;
flex-direction:column}
.product-category{font-size:9px;
text-transform:uppercase;
letter-spacing:1.5px}
.product-content h3{font-size:21px;
line-height:1.2;
margin:10px 0}
.product-content p{font-size:12px;
margin:0 0 24px}
.product-link{margin-top:auto;
font-size:10px;
letter-spacing:1.2px;
text-transform:uppercase;
border-top:1px solid var(--sand);
padding-top:15px;
display:flex;
justify-content:space-between}
.collection-footer{display:flex;
gap:18px;
align-items:center;
margin-top:43px;
font-size:9px;
letter-spacing:1.5px}
.long-line{height:1px;
background:var(--beige);
opacity:.7;
flex:1}
.why-section{background:var(--cream)}
.why-heading{display:grid;
grid-template-columns:1fr 1.75fr;
margin-bottom:55px}
.why-grid{display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--beige);
border-bottom:1px solid var(--beige)}
.why-card{padding:27px 22px 31px;
border-right:1px solid var(--beige);
position:relative;
min-height:240px}
.why-card:last-child{border:0}
.why-icon{font-size:29px}
.why-number{position:absolute;
right:21px;
top:31px}
.why-card h3{font-size:17px;
line-height:1.3;
margin-top:40px;
max-width:150px}
.why-card p{font-size:11px;
line-height:1.55;
max-width:170px;
margin-top:12px}
.contact-section{background:var(--beige);
color:var(--offwhite)}
.contact-section h2,.contact-section .eyebrow{color:var(--offwhite)}
.contact-section h2 em{color:var(--cream)}
.contact-grid{display:grid;
grid-template-columns:1fr 1.15fr;
gap:130px}
.contact-copy>p:not(.eyebrow){max-width:320px;
font-size:14px}
.contact-details{margin-top:60px;
display:grid;
gap:19px}
.contact-details div{display:flex;
flex-direction:column}
.contact-details span{font-size:9px;
text-transform:uppercase;
letter-spacing:1.4px;
color:var(--cream)}
.contact-details strong{font-size:12px;
font-weight:500}
.contact-details strong a{display:block}
.contact-form{display:grid;
gap:21px}
.form-row{display:grid;
grid-template-columns:1fr 1fr;
gap:18px}
.contact-form label{display:grid;
gap:7px;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase}
.contact-form input,.contact-form textarea{border:0;
border-bottom:1px solid var(--cream);
background:transparent;
border-radius:0;
padding:9px 0;
color:var(--offwhite);
outline:0;
resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--cream);
opacity:.8}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--offwhite)}
.form-bottom{display:flex;
align-items:center;
gap:20px;
margin-top:12px}
.contact-form .button{background:var(--offwhite);
color:var(--beige)}
.form-status{font-size:11px;
margin:0}
.footer{background:var(--cream);
padding:65px 0 25px}
.footer-grid{display:grid;
grid-template-columns:2fr 1fr 1fr 1.2fr;
gap:50px;
padding-bottom:55px}
.footer-brand{margin-bottom:20px}
.footer-grid>div>p{max-width:210px;
font-size:11px}
.footer-column{display:flex;
flex-direction:column;
gap:7px;
font-size:11px}
.footer-column h3{font-family:'DM Sans',sans-serif;
font-size:10px;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:12px}
.footer-bottom{padding-top:19px;
border-top:1px solid var(--sand);
display:flex;
justify-content:space-between;
font-size:9px;
letter-spacing:.8px}
.modal-backdrop{position:fixed;
inset:0;
background:var(--light-gray);
z-index:40;
display:grid;
place-items:center;
padding:25px;
opacity:0;
pointer-events:none;
transition:opacity .3s}
.modal-backdrop.open{opacity:1;
pointer-events:auto}
.product-modal{width:min(900px,100%);
max-height:min(650px,90vh);
overflow:auto;
background:var(--offwhite);
display:grid;
grid-template-columns:42% 58%;
position:relative;
transform:translateY(20px);
transition:transform .3s}
.modal-backdrop.open .product-modal{transform:translateY(0)}
.modal-close{position:absolute;
right:17px;
top:10px;
background:var(--offwhite);
font-size:28px;
line-height:1;
z-index:1}
.modal-image{min-height:560px;
background:var(--cream)}
.modal-image img{width:100%;
height:100%;
object-fit:cover;
filter:saturate(.68)}
.modal-copy{padding:62px 48px 45px}
.modal-copy h2{font-size:40px;
margin-bottom:20px}
.modal-copy>p:not(.eyebrow){font-size:13px}
.modal-feature-block{border-top:1px solid var(--sand);
border-bottom:1px solid var(--sand);
margin:27px 0;
padding:17px 0}
.modal-feature-block h3{font-size:11px;
text-transform:uppercase;
letter-spacing:1.3px;
margin-bottom:8px}
.modal-feature-block ul{padding-left:17px;
margin:0;
font-size:12px}
.modal-specs{display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:27px}
.spec-pill{background:var(--sand);
font-size:9px;
padding:5px 9px;
text-transform:uppercase;
letter-spacing:1px}
.reveal{opacity:0;
transform:translateY(20px);
transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;
transform:translateY(0)}
.delay-1{transition-delay:.13s}
.delay-2{transition-delay:.26s}
.delay-3{transition-delay:.39s}

@media(max-width:850px){.container{width:min(100% - 40px,600px)}
.nav-links{gap:16px}
.hero-grid{grid-template-columns:1fr;
gap:20px;
padding-top:60px}
.hero-visual{height:480px}
.hero-copy{max-width:600px}
.trust-note{margin-top:35px}
.intro-grid{grid-template-columns:1fr;
gap:35px}
.section-label{margin-bottom:0}
.values-list{margin-top:10px}
.products-grid{grid-template-columns:1fr 1fr}
.product-card:last-child{grid-column:span 2}
.why-heading{grid-template-columns:1fr;
gap:25px}
.why-grid{grid-template-columns:1fr 1fr}
.why-card:nth-child(2){border-right:0}
.why-card:nth-child(-n+2){border-bottom:1px solid var(--beige)}
.contact-grid{grid-template-columns:1fr;
gap:60px}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
.footer-grid>div:last-child{grid-column:span 3}
.product-modal{grid-template-columns:1fr;
max-height:90vh}
.modal-image{height:240px;
min-height:0}
.modal-copy{padding:32px 28px 35px}
.modal-copy h2{font-size:34px}
}

@media(max-width:600px){.announcement{font-size:8px;
padding:0 12px;
letter-spacing:.8px}
.site-header{height:72px}
.nav-links{position:absolute;
display:flex;
flex-direction:column;
align-items:stretch;
top:72px;
left:0;
right:0;
background:var(--offwhite);
padding:22px 20px;
gap:0;
border-bottom:1px solid var(--sand);
transform:translateY(-130%);
transition:transform .3s;
box-shadow:var(--shadow)}
.nav-links.open{transform:translateY(0)}
.nav-links a{padding:12px 0}
.nav-cta{text-align:center;
margin-top:8px}
.menu-toggle{display:block}
.hero-grid{padding-top:45px}
.hero-visual{height:390px}
.hero-image-wrap{height:350px;
width:75%}
.orbit-one{width:380px;
height:380px}
.orbit-two{width:290px;
height:290px}
.float-card-top{right:-3px;
top:45px}
.float-card-bottom{bottom:28px;
left:-4px}
.hero-caption{bottom:0;
font-size:7px}
.section-padding{padding:80px 0}
h1{font-size:52px}
.hero-lead{font-size:14px}
.hero-actions{gap:16px;
flex-wrap:wrap}
.button{padding:13px 16px}
.section-heading{display:block}
.section-heading>p{margin-top:20px}
.products-grid{grid-template-columns:1fr}
.product-card:last-child{grid-column:auto}
.product-image{height:245px}
.why-grid{grid-template-columns:1fr}
.why-card,.why-card:nth-child(2){border-right:0;
border-bottom:1px solid var(--beige)}
.why-card:last-child{border-bottom:0}
.contact-grid{gap:45px}
.form-row{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr;
gap:35px}
.footer-grid>div:first-child{grid-column:span 2}
.footer-grid>div:last-child{grid-column:span 2}
.footer-bottom{display:block;
line-height:1.8}
.footer-bottom span:last-child{display:block}
.product-modal{padding:0}
.modal-close{right:13px}
.modal-image{height:190px}
.modal-copy{padding:26px 22px 30px}
.modal-copy h2{font-size:29px}
}

.brand-logo{width:174px;
height:auto}

.announcement{background:var(--sky);
color:var(--white)}
.announcement span{color:var(--white)}

@media(max-width:600px){.brand-logo{width:145px}
}