*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  
  --olive:#3C4235;        
  --olive-d:#2B3025;
  --olive-m:#5C6450;
  --sage:#8E9880;
  --sage-l:#B9C0A9;

  --bg:#FBFAF6;
  --surf:#F2F1EA;
  --card:#FFFFFF;
  --sand:#E4E1D5;

  --text:#23261E;
  --muted:#6B7062;
  --border:#DCD9CC;
  --border-s:rgba(60,66,53,.16);

  --nav-h:76px;
}

html{scroll-behavior:smooth}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
::selection{background:var(--olive);color:#fff}

.mark{color:var(--olive);flex-shrink:0}
.logo{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:'Jost',sans-serif;font-weight:400;font-size:1.32rem;letter-spacing:.16em;color:var(--olive)}
.logo-sub{font-family:'Jost',sans-serif;font-weight:300;font-size:.44rem;letter-spacing:.26em;color:var(--muted);margin-top:.28rem}

#nav{position:fixed;inset:0 0 auto;z-index:900;height:var(--nav-h);padding:0 clamp(1.2rem,4vw,4.5rem);display:flex;align-items:center;justify-content:space-between;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
#nav.s{background:rgba(251,250,246,.94);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
.nav-l{display:flex;gap:2.1rem;list-style:none;align-items:center}
.nav-l a{color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:500;position:relative;transition:color .3s}
.nav-l a:not(.nav-btn)::after{content:'';position:absolute;bottom:-5px;right:0;left:0;height:1px;background:var(--olive);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav-l a:hover{color:var(--olive)}
.nav-l a:hover::after{transform:scaleX(1)}
.nav-btn{background:var(--olive);color:#fff!important;padding:.55rem 1.5rem;border-radius:2px;transition:background .3s,transform .3s}
.nav-btn:hover{background:var(--olive-d);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{width:24px;height:1.5px;background:var(--olive);transition:.3s}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--nav-h) 0 auto;z-index:890;background:var(--bg);border-bottom:1px solid var(--border);transform:translateY(-115%);transition:transform .4s cubic-bezier(.4,0,.2,1);padding:1rem 1.6rem 2rem}
.drawer.open{transform:none}
.drawer ul{list-style:none;display:flex;flex-direction:column}
.drawer a{display:block;padding:1rem .2rem;color:var(--text);text-decoration:none;font-size:.98rem;font-weight:500;border-bottom:1px solid var(--border)}
.drawer a:last-child{border:0;color:var(--olive)}

section{padding:clamp(4.5rem,9vw,7.5rem) clamp(1.4rem,5vw,5rem)}

.eyebrow{font-family:'Jost',sans-serif;font-weight:300;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:1rem}
.h2{font-size:clamp(1.85rem,4.4vw,2.9rem);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.rule{height:1px;background:var(--olive);width:64px;margin:1.4rem 0 2rem;transition:width 1s ease .1s}
.rule.on{width:64px}
.lead{color:var(--muted);font-weight:300;font-size:1rem;line-height:2.05}

.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:var(--nav-h) 1.5rem 4rem;text-align:center}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(rgba(60,66,53,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(60,66,53,.045) 1px,transparent 1px);
  background-size:88px 88px;background-position:center}
.hero-fade{position:absolute;inset:0;background:radial-gradient(ellipse 62% 58% at 50% 45%,rgba(251,250,246,0) 0%,var(--bg) 78%)}
.hero-in{position:relative;z-index:2;max-width:840px}
.hero-mark{color:var(--olive);margin:0 auto 2.2rem;display:block;opacity:0;animation:fu 1s ease .1s forwards}
.hero-h1{font-size:clamp(2.1rem,6.4vw,4.3rem);font-weight:700;line-height:1.25;letter-spacing:-.015em;margin-bottom:1.3rem;opacity:0;animation:fu 1s ease .3s forwards}
.hero-h1 em{font-style:normal;color:var(--olive-m)}
.hero-p{color:var(--muted);font-weight:300;font-size:clamp(.95rem,2.2vw,1.1rem);max-width:600px;margin:0 auto 2.6rem;line-height:2;opacity:0;animation:fu 1s ease .5s forwards}
.hero-btns{gap:.9rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fu 1s ease .7s forwards}
.btn{padding:.95rem 2.3rem;font-family:'Cairo',sans-serif;font-size:.92rem;font-weight:600;text-decoration:none;border-radius:2px;transition:all .3s;display:inline-block;cursor:pointer;border:1px solid transparent}
.btn-p{background:var(--olive);color:#fff}
.btn-p:hover{background:var(--olive-d);transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(43,48,37,.5)}
.btn-s{background:transparent;color:var(--text);border-color:var(--border)}
.btn-s:hover{border-color:var(--olive);color:var(--olive)}
.hero-tags{gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:3.2rem;opacity:0;animation:fu 1s ease .9s forwards}
.tag{font-size:.76rem;color:var(--muted);border:1px solid var(--border);border-radius:100px;padding:.32rem 1rem;background:rgba(255,255,255,.6)}
.sd{position:absolute;bottom:1.6rem;right:50%;transform:translateX(50%);width:1px;height:52px;background:linear-gradient(to bottom,var(--sage-l),transparent);animation:sp 2.4s ease infinite}

#about{background:var(--surf);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-g{gap:clamp(2rem,6vw,5.5rem);align-items:start}
.about-g .h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
.about-p{color:var(--muted);font-weight:300;line-height:2.15;margin-bottom:1.2rem}
.pillars{gap:1px;background:var(--border);margin-top:2.6rem}
.pillar{background:var(--surf);padding:1.6rem .4rem;text-align:center}
.pillar b{display:block;font-family:'Jost',sans-serif;font-weight:300;font-size:2.3rem;color:var(--olive);line-height:1}
.pillar span{font-size:.78rem;color:var(--muted);margin-top:.35rem;display:block}

#divisions{background:var(--bg)}
.d-head{max-width:620px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.div-row{gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--border)}
.div-row:last-child{border-bottom:1px solid var(--border)}
.div-row.flip .div-art{order:-1}
.div-num{font-family:'Jost',sans-serif;font-weight:200;font-size:.9rem;letter-spacing:.2em;color:var(--sage);display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.div-num::after{content:'';width:44px;height:1px;background:var(--sand)}
.div-t{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;margin-bottom:1rem;color:var(--text)}
.div-t small{display:block;font-family:'Jost',sans-serif;font-weight:300;font-size:.7rem;letter-spacing:.24em;color:var(--sage);text-transform:uppercase;margin-top:.5rem}
.div-p{color:var(--muted);font-weight:300;line-height:2.15;font-size:.97rem}
.div-ul{list-style:none;margin-top:1.8rem;gap:.15rem 1.4rem}
.div-ul li{font-size:.86rem;color:var(--muted);padding:.55rem 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.7rem}
.div-ul li::before{content:'';width:5px;height:5px;background:var(--sage);border-radius:50%;flex-shrink:0}
.div-art{position:relative;aspect-ratio:4/3.2;background:var(--surf);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center}
.div-art::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,rgba(60,66,53,.055),transparent 60%)}
.div-art img{width:52%;height:auto;color:var(--sage);opacity:.55;stroke:currentColor;fill:none;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;position:relative;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.div-row:hover .div-art img{transform:scale(1.05)}
.div-art .art-c{position:absolute;top:1rem;inset-inline-start:1rem;font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.2em;color:var(--sage);text-transform:uppercase}

#why{background:var(--olive);color:#fff;position:relative;overflow:hidden}
#why::before{content:'';position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:74px 74px}
#why .wrap{position:relative}
#why .eyebrow{color:var(--sage-l)}
#why .h2{color:#fff}
#why .rule{background:var(--sage-l)}
.why-head{text-align:center;max-width:600px;margin:0 auto}
.why-head .rule{margin-inline:auto}
.why-head p{color:rgba(255,255,255,.66);font-weight:300}
.why-g{gap:1px;background:rgba(255,255,255,.13);margin-top:3.4rem}
.why-c{background:var(--olive);padding:2.4rem 1.9rem;transition:background .4s}
.why-c:hover{background:var(--olive-d)}
.why-ico{color:var(--sage-l);margin-bottom:1.3rem}
.why-ico svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.why-c h3{font-size:1.08rem;font-weight:600;margin-bottom:.5rem;color:#fff}
.why-c p{font-size:.85rem;color:rgba(255,255,255,.6);font-weight:300;line-height:1.95}

#contact{background:var(--bg)}
.c-g{gap:clamp(2.5rem,6vw,5rem);align-items:start}
.c-list{margin-top:2.4rem}
.c-item{display:flex;gap:1.1rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--border)}
.c-ico{width:42px;height:42px;border:1px solid var(--border-s);display:flex;align-items:center;justify-content:center;color:var(--olive);flex-shrink:0;background:var(--card)}
.c-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.c-lbl{font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.c-val{font-size:.94rem;font-weight:500}
.c-val a{color:inherit;text-decoration:none}
.c-val a:hover{color:var(--olive)}
form{background:var(--surf);border:1px solid var(--border);padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;gap:1.1rem}
.f-row{gap:1.1rem}
.f-g{display:flex;flex-direction:column;gap:.45rem}
.f-g label{font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.f-g input,.f-g select,.f-g textarea{background:var(--card);border:1px solid var(--border);padding:.82rem 1rem;font-family:'Cairo',sans-serif;font-size:.9rem;color:var(--text);outline:none;border-radius:2px;transition:border-color .3s;appearance:none;width:100%}
.f-g select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7062' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 1rem center}
.f-g input:focus,.f-g select:focus,.f-g textarea:focus{border-color:var(--olive)}
.f-g textarea{resize:vertical;min-height:110px}
.f-g input::placeholder,.f-g textarea::placeholder{color:#B4B0A2}
.f-note{font-size:.74rem;color:var(--muted);text-align:center}

footer{background:var(--olive-d);color:rgba(255,255,255,.5);padding:3.4rem clamp(1.4rem,5vw,5rem) 2.2rem}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem;flex-wrap:wrap;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
footer .mark{color:var(--sage-l)}
footer .logo-name{color:#fff}
footer .logo-sub{color:rgba(255,255,255,.45)}
.f-nav{display:flex;gap:1.8rem;list-style:none;flex-wrap:wrap}
.f-nav a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.84rem;transition:color .3s}
.f-nav a:hover{color:var(--sage-l)}
.f-soc{display:flex;gap:.65rem}
.soc{width:36px;height:36px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all .3s;text-decoration:none}
.soc:hover{border-color:var(--sage-l);color:var(--sage-l)}
.soc svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.f-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.75rem;color:rgba(255,255,255,.34)}

.motion .rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.motion .rev.on{opacity:1;transform:none}
.motion .stag>*{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.motion .stag.on>*{opacity:1;transform:none}
.motion .stag.on>*:nth-child(2){transition-delay:.09s}
.motion .stag.on>*:nth-child(3){transition-delay:.18s}
.motion .stag.on>*:nth-child(4){transition-delay:.27s}
.motion .stag.on>*:nth-child(5){transition-delay:.36s}
.motion .stag.on>*:nth-child(6){transition-delay:.45s}

@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sp{0%,100%{opacity:.3;transform:translateX(50%) scaleY(1)}50%{opacity:1;transform:translateX(50%) scaleY(.6)}}

@media(max-width:1000px){
  .nav-l{display:none}
  .burger{display:flex}

  .div-row.flip .div-art{order:0}

}
@media(max-width:620px){

  .pillars{background:var(--border);gap:1px}
  .div-art{aspect-ratio:16/10}
  .f-top{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev,.stag>*{opacity:1;transform:none}
  .rule.on{width:64px}
}