/* Azzkeri & Alshaikh Law Firm – shared styles (all pages) */
html{scroll-padding-top:90px}
:root{
  --global:#b0b39e;      /* sage – theme global colour */
  --secondary:#243d37;   /* green */
  --dark:#172820;        /* deep green */
  --navy:#172820;        /* titles: unified to brand deep green */
  --sage-ink:#6f735c;    /* darker sage for small text on white (AA contrast) */
  --cream:#f7f7f3;
  --white:#fff;
  --line:rgba(0,0,0,.1);
  --f-display:"Marcellus", Georgia, serif;
  --f-body:"Almarai", Tahoma, Arial, sans-serif;
  --f-mukta:"Mukta", "Almarai", sans-serif;
  --f-niramit:"Niramit", "Almarai", sans-serif;
  --ease:cubic-bezier(.645,.045,.355,1);
  --header-h:110px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:15px;line-height:27px;color:var(--dark);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s}
h1,h2,h3,h4,p{margin:0;font-weight:400}
.container{width:100%;max-width:1140px;margin-inline:auto;padding-inline:15px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Elementor-style entrance animations ---------- */
.anim{opacity:0}
.anim.animated{animation-fill-mode:both;animation-duration:1.25s}
.anim.slow.animated{animation-duration:2s}
.anim.fadeInUp.animated{animation-name:fadeInUp}
.anim.fadeInDown.animated{animation-name:fadeInDown}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}

/* ---------- Header (desktop) ---------- */
.header{position:sticky;top:0;z-index:100;background:#fff;height:var(--header-h);padding-left:10px;animation:fadeInDown 1.25s both;box-shadow:0 10px 20px rgba(0,0,0,.2)}
.header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;padding-inline:61px 107px;max-width:1425px;margin-inline:auto}
.header .logo img{width:162px;height:80px;object-fit:contain}
.menu{display:flex;align-items:center}
.menu a{font-family:var(--f-body);font-size:16px;line-height:20px;font-weight:700;letter-spacing:.6px;padding:13px 20px;color:var(--dark)}
.menu a:hover,.menu a.active{color:var(--global)}
.btn-ar{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:150px;height:58px;background:var(--dark);color:#fff;border-radius:2px;font-size:16px;line-height:16px;transition:background .3s}
.btn-ar svg{width:16px;height:16px;transition:transform .3s}
.btn-ar:hover{background:var(--secondary);color:#fff}
.btn-ar:hover svg{transform:translateX(4px)}

/* ---------- Header (tablet / mobile) ---------- */
.m-header{display:none;position:sticky;top:0;z-index:100;background:#fff;animation:fadeInDown 1.25s both;box-shadow:0 10px 20px rgba(0,0,0,.2)}
.m-header .wrap{display:flex;align-items:stretch;justify-content:space-between}
.m-header .logo{position:relative;overflow:hidden;background:var(--dark);width:50%;max-width:400px;height:110px}
/* the white logo file is a 1500px square with the artwork slightly left of centre: offset by its true centre (48.6% / 49.4%) */
.m-header .logo img{position:absolute;left:50%;top:50%;width:330px;max-width:none;height:auto;transform:translate(-48.6%,-49.4%)}
.burger{background:none;border:0;cursor:pointer;padding:0 24px;color:var(--global)}
.burger svg{width:36px;height:36px}
.m-menu{position:fixed;inset:0;z-index:200;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.m-menu.open{opacity:1;visibility:visible}
.m-menu img{width:160px;margin-bottom:24px}
.m-menu a:not(.btn-ar){font-size:20px;font-weight:700;color:var(--dark);padding:10px}
.m-menu a:not(.btn-ar):hover{color:var(--global)}
.m-menu .btn-ar{margin-top:16px}
.m-menu .close{position:absolute;top:24px;right:24px;background:none;border:0;cursor:pointer;color:var(--dark)}
.m-menu .close svg{width:32px;height:32px}

/* ---------- Hero (Slider Revolution replica) ---------- */
.hero{position:relative;height:815px;overflow:hidden;background:#0f1713}
.hero .bg{position:absolute;inset:0;background:url("../../images/zs_books.jpg") center/cover no-repeat;opacity:0;animation:rsFade 1s ease .2s forwards}
@keyframes rsFade{to{opacity:1}}
.hero .layers{position:absolute;left:calc((100% - 1270px) / 2 + 300px);top:272px;width:801px;max-width:calc(100% - 40px)}
.hero .eyebrow{font-family:var(--f-mukta);font-size:22px;line-height:25px;font-weight:300;color:#fff;white-space:nowrap}
.hero h1{font-family:var(--f-display);font-size:62px;line-height:72px;color:#fff;margin-top:17px}
.hero .rs-btn{display:inline-block;margin-top:77px;font-family:var(--f-display);font-size:18px;line-height:55px;letter-spacing:1px;padding:0 50px;background:var(--secondary);color:#fff;transition:background .1s var(--ease),filter .1s var(--ease)}
.hero .rs-btn:hover{background:#856b59;filter:brightness(120%)}
/* layer timings copied from the live slider */
.l-in{opacity:0;animation:rsLayer 1s var(--ease) forwards}
.l-h1{animation-delay:1.05s;--from:-50px}
.l-eyebrow{animation-delay:1.81s;--from:-110vw}
.l-btn{animation-delay:2.58s;--from:-50px}
@keyframes rsLayer{from{opacity:0;transform:translateX(var(--from))}to{opacity:1;transform:none}}

/* ---------- Founder quote ---------- */
.quote{text-align:center}
.quote .txt{padding:200px 30px 130px}
.quote h2{font-family:var(--f-display);font-size:36px;line-height:46px;color:var(--dark)}
.founder{padding-bottom:110px}
.founder .name{font-family:var(--f-body);font-size:28px;line-height:1.2;color:var(--navy)}
.founder .role{font-size:16px;line-height:20px;font-weight:300;letter-spacing:1px;color:var(--global);margin-top:2px}

/* ---------- About ---------- */
.about{background:var(--secondary);color:#fff;padding:150px 0 100px}
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 70px}
.about h2{font-family:var(--f-display);font-size:45px;line-height:60px;color:#fff;max-width:450px}
.about .divider{width:70px;height:1px;background:rgba(255,255,255,.7);margin:25px 0 50px}
.about p{font-size:18px;line-height:32.4px;letter-spacing:1.5px;text-align:justify;margin-bottom:25px}
.about .right{padding-top:4px}
.about .right p{font-size:16px;line-height:30px;letter-spacing:1px}

/* ---------- Services ---------- */
.services{padding:130px 0 150px}
.services .grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.services .intro{position:sticky;top:108px;max-width:420px}
@media (max-width:1200px){.services .intro{position:static}}
.services .intro h2{font-family:var(--f-display);font-size:45px;line-height:60px;color:var(--secondary)}
.services .intro p{font-size:16px;line-height:28.8px;letter-spacing:1.5px;color:var(--dark);margin-top:10px}
.svc{display:flex;flex-direction:column;gap:30px}
.svc-item{position:relative;display:flex;align-items:center;justify-content:space-between;padding:70px 60px 40px;border:1px solid var(--line);transition:.5s var(--ease)}
.svc-item .inner{padding-right:60px;flex:1}
.svc-item h3{font-family:var(--f-body);font-size:30px;line-height:36px;color:var(--navy);margin-bottom:22px;transition:.5s var(--ease)}
.svc-item p{font-size:15px;line-height:27px;color:var(--dark);margin-bottom:25px}
.svc-item .arrow{display:inline-block;color:var(--global);transition:.5s var(--ease)}
.svc-item .arrow svg{width:17px;height:17px}
.svc-item .icon{flex:0 0 90px;color:rgba(0,0,0,.1);margin-top:-20px;transition:.5s var(--ease)}
.svc-item .icon svg{width:90px;height:90px}
.svc-item:hover{border-color:var(--global)}
.svc-item:hover h3,.svc-item:hover .icon,.svc-item:hover .arrow{color:var(--global)}

/* ---------- Action box (pinned circle reveal) ---------- */
.action{background:rgba(23,40,32,.92)}
.action-box{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100vh;overflow:hidden}
.circle-wrap{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:url("../../images/imgi_77_design_pattern1.png") center bottom/cover no-repeat}
.circle-wrap::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.action-content{position:relative;z-index:1;text-align:center;padding:0 20px}
.action-content h3{font-family:var(--f-display);font-size:32px;line-height:42px;letter-spacing:.5px;color:#fff;margin-bottom:20px}
.action-content a{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:16px;line-height:26px;letter-spacing:.5px;padding:13px 30px;background:var(--global);color:#fff;transition:.3s}
.action-content a svg{width:14px;height:14px}
.action-content a:hover{background:#fff;color:var(--global)}

/* ---------- Team ---------- */
.team{padding:160px 0 70px}
.team h2{font-family:var(--f-body);font-size:50px;line-height:60px;color:var(--navy);margin-bottom:50px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.member{text-align:center}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;transition:.4s}
.member h3{font-family:var(--f-body);font-size:30px;line-height:40px;color:var(--global);margin:24px 0 5px}
.member h3 a:hover{color:var(--dark)}
.member .pos{font-size:15px;line-height:27px;color:var(--dark)}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#fff;padding:70px 0 50px}
.footer .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.footer h2{font-family:var(--f-display);font-size:28px;line-height:36px;color:var(--global);margin-bottom:18px}
.footer .reach h2{letter-spacing:1px}
.footer .mail{font-family:var(--f-niramit);font-size:18px;line-height:28px;display:inline-block}
.footer .mail:hover{color:var(--global)}
.footer .li{display:inline-block;color:var(--global);margin-top:20px}
.footer .li svg{width:24px;height:24px}
.footer .li:hover{color:#fff}
.footer address{font-style:normal;font-family:var(--f-niramit);font-size:16px;line-height:28px;max-width:480px;color:rgba(255,255,255,.85)}
.copy{background:var(--global);padding:14px 15px;text-align:center}
.copy p{font-size:14px;line-height:22px;font-weight:400;letter-spacing:.3px;color:#fff}

/* ---------- Floating: WhatsApp, back-to-top, cursor ---------- */
.wa{position:fixed;left:20px;bottom:24px;z-index:150;font-family:Georgia,serif}
.wa-btn{display:flex;align-items:center;gap:10px;background:var(--secondary);color:#fff;border:0;border-radius:50px;padding:8px 24px 8px 14px;font-family:Georgia,serif;font-size:14px;line-height:25px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.wa-btn svg{width:24px;height:24px}
.wa-box{position:absolute;left:0;bottom:56px;width:300px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s}
.wa.open .wa-box{opacity:1;visibility:visible;transform:none}
.wa-box .top{background:var(--secondary);color:#fff;padding:18px 20px;font-size:16px}
.wa-box a{display:flex;align-items:center;gap:12px;padding:16px 20px;color:#303030}
.wa-box a:hover{background:#f4f5f1}
.wa-box .av{width:42px;height:42px;border-radius:50%;background:var(--global);display:grid;place-items:center;color:#fff}
.wa-box .av svg{width:22px;height:22px}
.wa-box small{display:block;color:#888;font-size:12px;line-height:16px}
.totop{position:fixed;right:20px;bottom:10px;z-index:200;width:45px;height:45px;border-radius:100%;background:var(--dark);border:3px solid #eee;color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s,background .3s}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:#222;color:#fff}
.totop svg{width:16px;height:16px}

.cursor{position:fixed;top:0;left:0;z-index:150;pointer-events:none;will-change:transform;transition:opacity .3s}
.cursor::before{content:"";position:absolute;top:-24px;left:-24px;width:48px;height:48px;border-radius:50%;background:#000;transform:scale(0);transition:transform .3s ease-in-out}
.cursor.visible::before{transform:scale(.2)}
.cursor.visible.pointer::before{transform:scale(.15)}
.cursor.visible.active::before{transform:scale(.23);transition-duration:.2s}

/* ---------- Responsive (Elementor breakpoints) ---------- */
@media (max-width:1366px){
  .hero .layers{left:max(40px,calc((100% - 1270px) / 2 + 300px))}
}
@media (max-width:1200px){
  .hero .layers{left:240px;width:645px}
  .hero h1{font-size:54px;line-height:70px}
  .hero .eyebrow{font-size:16px;line-height:20px}
  .hero .rs-btn{font-size:14px;line-height:44px;padding:0 40px;letter-spacing:0}
}
@media (max-width:1024px){
  .header{display:none}
  .m-header{display:block}
  .hero{height:600px}
  .hero .layers{left:50%;transform:translateX(-50%);top:150px;width:532px;text-align:center}
  .hero .eyebrow{white-space:normal}
  .hero h1{font-size:44px;line-height:50px}
  .hero .rs-btn{line-height:33px;padding:0 30px;margin-top:50px}
  .quote .txt{padding:60px 30px}
  .about .grid,.services .grid,.footer .grid{grid-template-columns:1fr}
  .about{padding:80px 0 50px}
  .about .right{padding-top:0}
  .services{padding:80px 0}
  .services .intro{max-width:none;margin-bottom:40px}
  .svc-item{padding:40px 30px}
  .svc-item .inner{padding:0}
  .team{padding:80px 0 50px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .founder{padding-bottom:70px}
}
@media (max-width:767px){
  .m-header .logo{height:64px}
  .m-header .logo img{width:145px}
  .hero{height:520px}
  .hero .layers{width:calc(100% - 40px);top:120px}
  .hero h1{font-size:34px;line-height:44px}
  .hero .eyebrow{font-size:14px}
  .quote h2{font-size:24px;line-height:34px}
  .about h2,.services .intro h2{font-size:34px;line-height:44px}
  .footer h2{font-size:24px;line-height:32px}
  .team h2{font-size:38px;line-height:48px}
  .action-box{height:auto}
  .circle-wrap{position:relative;padding:80px 0}
  .action-content h3{font-size:24px;line-height:34px}
  .team-grid{grid-template-columns:1fr}
  .member h3{font-size:26px}
  .svc-item{padding:30px;flex-direction:column-reverse;align-items:flex-start}
  .svc-item .icon{margin:0 0 10px}
  .svc-item .icon svg{width:60px;height:60px}
  .svc-item h3{font-size:24px;line-height:30px}
  .copy p{font-size:13px;line-height:20px}
  .wa-btn span{display:none}
  .wa-btn{padding:12px}
}
@media (max-width:480px){
  .quote h2{font-size:20px;line-height:30px}
  .m-header .logo{width:62%}
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  .anim,.l-in,.hero .bg{opacity:1!important;animation:none!important}
  .header,.m-header{animation:none}
}

/* =========================================================
   Polish layer – refinements on top of the original design
   ========================================================= */
::selection{background:var(--global);color:var(--dark)}
:focus-visible{outline:2px solid var(--global);outline-offset:3px}

/* Kicker labels above section titles */
.kicker{display:flex;align-items:center;gap:12px;font-size:13px;line-height:16px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--sage-ink);margin-bottom:16px}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
.kicker-light{color:var(--global)}
.team .kicker{justify-content:flex-start}

/* Header: compacts on scroll, underline on menu items */
.header{transition:height .4s var(--ease),box-shadow .4s}
.header .logo img{transition:width .4s var(--ease),height .4s var(--ease)}
.header.scrolled{height:84px;box-shadow:0 8px 24px rgba(23,40,32,.14)}
.header.scrolled .logo img{width:128px;height:64px}
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:20px;right:20px;bottom:6px;height:1px;background:var(--global);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}

/* Hero: slow zoom, legibility shade, refined button, scroll cue */
.hero .bg{transform:scale(1.08);animation:rsFade 1s ease .2s forwards,kenburns 14s ease-out .2s forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,19,.55) 0%,rgba(15,23,19,.25) 55%,rgba(15,23,19,.05) 100%),linear-gradient(0deg,rgba(15,23,19,.45),transparent 40%)}
.hero .layers{z-index:1}
.hero .eyebrow{display:flex;align-items:center;gap:14px}
.hero .eyebrow::before{content:"";width:40px;height:1px;background:var(--global);flex:none}
.hero .rs-btn{display:inline-flex;align-items:center;gap:14px;transition:background .35s var(--ease),color .35s var(--ease)}
.hero .rs-btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.hero .rs-btn:hover{background:var(--global);color:var(--dark);filter:none}
.hero .rs-btn:hover svg{transform:translateX(5px)}
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.6);border-radius:14px;z-index:1;opacity:0;animation:rsFade 1s ease 3.4s forwards}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Founder quote */
.quote{position:relative}
.quote .txt{position:relative;padding-top:150px}
.qmark{display:block;font-family:var(--f-display);font-size:150px;line-height:1;height:80px;color:var(--global);opacity:.45;margin-bottom:24px}
.sig-line{display:block;width:60px;height:1px;background:var(--global);margin:0 auto 22px}
.founder .role{color:var(--sage-ink)}

/* About: faint pattern texture */
.about{position:relative;overflow:hidden}
.about::before{content:"";position:absolute;inset:0;background:url("../../images/imgi_77_design_pattern1.png") center/520px repeat;opacity:.06;pointer-events:none}
.about .container{position:relative}
.about .divider{height:2px;width:60px;background:var(--global)}
.about .right{border-left:1px solid rgba(176,179,158,.35);padding-left:40px}

/* Services: green sweep on hover */
.svc-item{overflow:hidden;background:#fff}
.svc-item::before{content:"";position:absolute;inset:0;background:var(--secondary);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
.svc-item>*{position:relative;z-index:1}
.svc-item p{transition:color .5s var(--ease)}
.svc-item .arrow svg{transition:transform .5s var(--ease)}
.svc-item:hover::before{transform:scaleY(1)}
.svc-item:hover h3{color:#fff}
.svc-item:hover p{color:rgba(255,255,255,.8)}
.svc-item:hover .icon{color:var(--global)}
.svc-item:hover .arrow svg{transform:translateX(8px)}

/* CTA button */
.action-content a{transition:background .35s var(--ease),color .35s var(--ease)}
.action-content a svg{transition:transform .35s var(--ease)}
.action-content a:hover{background:#fff;color:var(--dark)}
.action-content a:hover svg{transform:translateX(5px)}

/* Team: consistent title, readable names, photo hover */
.team h2{font-family:var(--f-display);font-size:45px;color:var(--secondary)}
.member .ph{position:relative;display:block;overflow:hidden;border-radius:12px}
.member .ph img{transition:transform .8s var(--ease)}
.member .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,40,32,.75),transparent 55%);opacity:0;transition:opacity .5s var(--ease)}
.member .view{position:absolute;left:0;right:0;bottom:22px;z-index:1;display:inline-flex;justify-content:center;align-items:center;gap:10px;color:#fff;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:0;transform:translateY(12px);transition:.5s var(--ease)}
.member .view svg{width:14px;height:14px}
.member:hover .ph img{transform:scale(1.06)}
.member:hover .ph::after,.member:hover .view{opacity:1}
.member:hover .view{transform:none}
.member h3{font-size:26px;line-height:34px;color:var(--navy)}
.member h3 a:hover{color:var(--sage-ink)}
.member .pos{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-ink)}

/* Footer */
.footer{padding:90px 0 60px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr .8fr;gap:48px}
.flogo{position:relative;display:block;width:180px;height:92px;overflow:hidden;margin-bottom:18px}
.flogo img{position:absolute;left:50%;top:50%;width:300px;max-width:none;transform:translate(-48.6%,-49.4%)}
.fbrand p{font-size:14px;line-height:24px;color:rgba(255,255,255,.65);max-width:260px}
.footer h2{font-size:22px;line-height:30px;margin-bottom:18px}
.footer .mail{display:block}
.flinks{display:flex;flex-direction:column;gap:8px}
.flinks a{font-size:15px;color:rgba(255,255,255,.8);width:max-content}
.flinks a:hover{color:var(--global)}
.copy{background:#0f1c16;padding:18px 0;border-top:1px solid rgba(176,179,158,.18)}
.copy .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.copy p{color:rgba(255,255,255,.6);font-size:13px}
.copy a{color:var(--global);font-size:14px}
.copy a:hover{color:#fff}
.totop{border-color:var(--global)}

@media (max-width:1024px){
  .fgrid{grid-template-columns:1fr 1fr}
  .about .right{border-left:0;padding-left:0}
  .scroll-cue{display:none}
  .quote .txt{padding-top:60px}
  .qmark{font-size:110px;height:60px}
}
@media (max-width:767px){
  .fgrid{grid-template-columns:1fr;gap:36px}
  .copy .container{justify-content:center;text-align:center}
  .team h2{font-size:34px;line-height:44px}
  .hero .eyebrow{justify-content:center}
  .hero .eyebrow::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero .bg{transform:none}
  .scroll-cue{opacity:1}
  .scroll-cue span{animation:none}
}

/* =========================================================
   Team member pages
   ========================================================= */
.menu a.current{color:var(--global)}
.menu a.current::after{transform:scaleX(1)}

/* Title bar */
.page-hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:110px 0 100px;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background:url("../../images/imgi_77_design_pattern1.png") center/520px repeat;opacity:.07}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(176,179,158,.18),transparent 60%)}
.page-hero .container{position:relative;z-index:1}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:22px}
.crumbs a:hover{color:var(--global)}
.crumbs span[aria-hidden]{color:var(--global)}
.page-hero h1{font-family:var(--f-display);font-size:56px;line-height:66px;color:var(--global)}
.page-hero .role{margin-top:12px;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* Profile layout */
.profile{padding:100px 0 110px}
.profile .grid{display:grid;grid-template-columns:370px minmax(0,1fr);gap:70px;align-items:start}
.p-card{position:sticky;top:110px}
.p-photo{position:relative;border-radius:12px;overflow:hidden;background:#e9eae3}
.p-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.p-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--global)}
.p-name{font-family:var(--f-display);font-size:24px;line-height:32px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dark);margin-top:26px}
.p-role{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-ink);margin-top:4px}
.p-contact{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.p-contact a{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--dark);word-break:break-all}
.p-contact a:hover{color:var(--sage-ink)}
.p-contact .ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--secondary);transition:background .3s,color .3s}
.p-contact a:hover .ic{background:var(--secondary);color:#fff}
.p-contact svg{width:16px;height:16px}
.p-cta{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:26px;padding:15px 24px;background:var(--secondary);color:#fff;font-family:var(--f-display);font-size:16px;letter-spacing:.5px;transition:background .35s var(--ease),color .35s var(--ease)}
.p-cta svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.p-cta:hover{background:var(--global);color:var(--dark)}
.p-cta:hover svg{transform:translateX(5px)}
.p-back{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--sage-ink)}
.p-back svg{width:14px;height:14px;transform:rotate(180deg);transition:transform .3s var(--ease)}
.p-back:hover{color:var(--dark)}
.p-back:hover svg{transform:rotate(180deg) translateX(4px)}

/* Tabs */
.tabs-head{position:relative;display:flex;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs-head::-webkit-scrollbar{display:none}
.tabs-head [role="tab"]{flex:none;background:none;border:0;cursor:pointer;padding:18px 22px;font-family:var(--f-display);font-size:17px;letter-spacing:.5px;color:#8a8d78;transition:color .3s}
.tabs-head [role="tab"]:hover{color:var(--dark)}
.tabs-head [role="tab"][aria-selected="true"]{color:var(--dark)}
.tab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--secondary);transition:transform .45s var(--ease),width .45s var(--ease)}
.tab-panel{padding-top:40px}
.tab-panel.show{animation:panelIn .6s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tab-panel h2{font-family:var(--f-display);font-size:30px;line-height:40px;color:var(--secondary);margin-bottom:22px}
.bio p{font-size:17px;line-height:31px;color:#33413b;max-width:68ch}
.bio p:first-of-type::first-letter{float:left;font-family:var(--f-display);font-size:68px;line-height:58px;padding:6px 12px 0 0;color:var(--secondary)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ticks li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--line);font-size:16px;line-height:28px;color:#33413b}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:4px;top:28px;width:9px;height:9px;background:var(--global);transform:rotate(45deg)}

/* Rest of the team */
.more-team{background:var(--cream);padding:90px 0 100px}
.more-team .head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px}
.more-team h2{font-family:var(--f-display);font-size:38px;line-height:48px;color:var(--secondary)}
.more-team .all{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--secondary)}
.more-team .all svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.more-team .all:hover svg{transform:translateX(4px)}
.mini-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.mini{display:block}
.mini .ph{display:block;border-radius:10px;overflow:hidden}
.mini img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .8s var(--ease)}
.mini:hover img{transform:scale(1.06)}
.mini h3{font-family:var(--f-body);font-size:17px;line-height:24px;font-weight:700;color:var(--dark);margin-top:14px;transition:color .3s}
.mini:hover h3{color:var(--sage-ink)}
.mini span{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-ink);margin-top:2px}

@media (max-width:1200px){
  .p-card{position:static}
  .profile .grid{grid-template-columns:320px minmax(0,1fr);gap:48px}
}
@media (max-width:1024px){
  .page-hero{padding:80px 0 70px}
  .page-hero h1{font-size:44px;line-height:54px}
  .profile{padding:70px 0 80px}
  .profile .grid{grid-template-columns:1fr}
  .p-card{display:grid;grid-template-columns:260px 1fr;gap:0 36px;align-items:start}
  .p-card .p-photo{grid-row:span 6}
  .p-name{margin-top:0}
  .mini-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .mini{flex:0 0 200px;scroll-snap-align:start}
}
@media (max-width:767px){
  .page-hero h1{font-size:34px;line-height:44px}
  .p-card{display:block}
  .p-photo{max-width:420px}
  .tabs-head [role="tab"]{padding:16px 14px;font-size:15px}
  .bio p{font-size:16px;line-height:29px}
  .more-team{padding:70px 0}
  .more-team .head{flex-direction:column;align-items:flex-start}
  .more-team h2{font-size:30px;line-height:40px}
  .mini{flex-basis:170px}
}

/* =========================================================
   Contact pages
   ========================================================= */
.page-hero .lead{margin:16px auto 0;max-width:620px;font-size:18px;line-height:30px;color:rgba(255,255,255,.8)}
.contact{padding:100px 0 110px}
.contact .grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:60px;align-items:start}
.c-info{display:grid;gap:18px}
.c-item{display:flex;gap:18px;padding:26px 26px;border:1px solid var(--line);background:#fff;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.c-item:hover{border-color:var(--global);box-shadow:0 14px 30px -20px rgba(23,40,32,.35)}
.c-ic{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--secondary);color:var(--global)}
.c-ic svg{width:22px;height:22px}
.c-label{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-ink);margin-bottom:4px}
.c-val{font-size:17px;line-height:28px;color:var(--dark);word-break:break-word}
.c-val a:hover{color:var(--sage-ink)}
.c-val .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.c-map{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:700;color:var(--secondary)}
.c-map svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.c-map:hover svg{transform:translateX(4px)}

.c-form{background:var(--cream);padding:50px 50px 46px;position:relative}
.c-form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--global)}
.c-form h2{font-family:var(--f-display);font-size:34px;line-height:44px;color:var(--secondary)}
.c-form .sub{margin-top:8px;color:#4a5751;font-size:16px;line-height:27px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;margin-top:32px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:14px;font-weight:700;color:var(--dark)}
.field label .req{color:#a2473a;margin-inline-start:2px}
.field label .opt{font-weight:400;color:#7d806c;font-size:13px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;line-height:24px;color:var(--dark);background:#fff;border:1px solid #d9dbd0;border-radius:2px;padding:13px 15px;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:160px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9a9d8a}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(176,179,158,.35)}
.field.has-error input,.field.has-error textarea{border-color:#a2473a}
.field .err{font-size:13px;line-height:18px;color:#a2473a;min-height:0}
/* honeypot: hidden without moving it off-screen (an off-screen offset widens RTL pages) */
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.f-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px}
.f-note{font-size:13px;line-height:20px;color:#6b7470;max-width:340px}
.f-btn{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;padding:16px 34px;background:var(--secondary);color:#fff;font-family:var(--f-display);font-size:17px;letter-spacing:.5px;transition:background .35s var(--ease),color .35s var(--ease)}
.f-btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.f-btn:hover{background:var(--dark)}
.f-btn:hover svg{transform:translateX(5px)}
.f-btn[disabled]{opacity:.7;cursor:progress}
.f-btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.f-btn.loading .spin{display:inline-block}
.f-btn.loading svg{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.f-status{margin-top:22px;padding:16px 18px;font-size:15px;line-height:24px;border-inline-start:3px solid}
.f-status.ok{background:#eef2ea;border-color:#4f7a52;color:#26412a}
.f-status.bad{background:#f8ecea;border-color:#a2473a;color:#6d2a21}
.c-form.sent .fgrid2,.c-form.sent .f-foot{display:none}
.c-form.sent .f-status.ok{margin-top:30px;font-size:17px;padding:22px 24px}

@media (max-width:1024px){
  .contact{padding:70px 0 80px}
  .contact .grid{grid-template-columns:1fr;gap:40px}
  .c-info{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:767px){
  .c-form{padding:36px 22px 30px}
  .c-form h2{font-size:28px;line-height:36px}
  .fgrid2{grid-template-columns:1fr}
  .f-btn{width:100%;justify-content:center}
}