/* ─── Reset & Base ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#3F4E5C;
  --primary-dark:#2C3A47;
  --primary-deeper:#1A2530;
  --primary-light:#5A6B7A;
  --accent:#B89B71;
  --accent-light:#D4C4A8;
  --bg:#F9F8F6;
  --bg-warm:#F1EEE9;
  --white:#FFFFFF;
  --text:#2A3540;
  --text-light:#6B7A87;
  --border:rgba(63,78,92,0.1);
  --font-display:'DM Serif Display', Georgia, serif;
  --font-body:'Outfit', -apple-system, sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ─── Utility ─── */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ─── Navigation ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s,padding .4s;padding:1.5rem 0}
.nav.scrolled{background:rgba(255,255,255,0.97);box-shadow:0 1px 0 var(--border);padding:1rem 0;backdrop-filter:blur(12px)}
.nav--solid{background:rgba(255,255,255,0.97);box-shadow:0 1px 0 var(--border);padding:1rem 0;backdrop-filter:blur(12px)}
.nav--solid .nav__brand{color:var(--primary-dark)}
.nav--solid .nav__links a{color:var(--text-light)}
.nav--solid .nav__links a:hover{color:var(--primary)}
.nav--solid .nav__links .btn-contact{border-color:var(--primary);color:var(--primary)}
.nav--solid .nav__links .btn-contact:hover{background:var(--primary);color:var(--white)}
.nav--solid .hamburger span{background:var(--primary)}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.nav__brand{font-family:var(--font-display);font-size:1.6rem;color:var(--white);letter-spacing:0.02em;transition:color .4s;display:flex;align-items:center;line-height:0}
.nav.scrolled .nav__brand{color:var(--primary-dark)}
.nav__logo{height:96px;width:auto;display:block;transition:height .4s}
.nav.scrolled .nav__logo{height:72px}
.nav__logo--dark{display:none}
.nav.scrolled .nav__logo--light,.nav--solid .nav__logo--light{display:none}
.nav.scrolled .nav__logo--dark,.nav--solid .nav__logo--dark{display:block}
.footer__logo{height:84px;width:auto;display:block;margin-bottom:.75rem;margin-left:-12px}
.nav__links{display:flex;align-items:center;gap:2.2rem}
.nav__links a{font-size:.875rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,0.85);transition:color .3s;position:relative}
.nav.scrolled .nav__links a{color:var(--text-light)}
.nav__links a:hover{color:var(--white)}
.nav.scrolled .nav__links a:hover{color:var(--primary)}
.nav__links .btn-contact{padding:.55rem 1.5rem;border:1px solid rgba(255,255,255,0.4);border-radius:2px;transition:all .3s}
.nav__links .btn-contact:hover{background:var(--white);color:var(--primary-dark)}
.nav.scrolled .nav__links .btn-contact{border-color:var(--primary);color:var(--primary)}
.nav.scrolled .nav__links .btn-contact:hover{background:var(--primary);color:var(--white)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:background .3s}
.nav.scrolled .hamburger span{background:var(--primary)}

/* ─── Hero ─── */
.hero{min-height:100vh;background:linear-gradient(165deg,rgba(26,37,48,0.82) 0%,rgba(63,78,92,0.65) 40%,rgba(90,107,122,0.55) 100%),url('images/hero-doha-skyline.jpg') center/cover no-repeat;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(184,155,113,0.08) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.hero__content{max-width:780px;padding:8rem 0 6rem}
.hero__label{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;font-weight:500}
.hero__title{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.8rem);color:var(--white);line-height:1.2;margin-bottom:1.8rem}
.hero__sub{font-size:1.1rem;color:rgba(255,255,255,0.7);max-width:600px;line-height:1.8;margin-bottom:2.5rem;font-weight:300}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 2.2rem;font-family:var(--font-body);font-size:.875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:none;border-radius:2px;cursor:pointer;transition:all .35s}
.btn--primary{background:var(--accent);color:var(--primary-deeper)}
.btn--primary:hover{background:#CBA97D;transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.35)}
.btn--outline:hover{border-color:var(--white);background:rgba(255,255,255,0.08)}
.btn--dark{background:var(--primary);color:var(--white)}
.btn--dark:hover{background:var(--primary-dark);transform:translateY(-1px)}

/* ─── Sections ─── */
.section{padding:6rem 0}
.section--grey{background:var(--bg-warm)}
.section--dark{background:var(--primary-deeper);color:var(--white)}
.section__label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem;font-weight:500}
.section__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:1rem;line-height:1.25}
.section__subtitle{font-size:1.05rem;color:var(--text-light);max-width:580px;font-weight:300;line-height:1.7}
.section--dark .section__subtitle{color:rgba(255,255,255,0.6)}
.section__header{margin-bottom:3.5rem}

/* ─── KPI Bar ─── */
.kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:3.5rem 0}
.kpi{text-align:center}
.kpi__number{font-family:var(--font-display);font-size:2.8rem;color:var(--primary);display:block;line-height:1}
.kpi__label{font-size:.85rem;color:var(--text-light);margin-top:.5rem;display:block;letter-spacing:.03em}

/* ─── About Split ─── */
.about-grid{display:grid;grid-template-columns:0.85fr 1fr 1fr;gap:3rem;align-items:start}
.about-grid p{margin-bottom:1.2rem;font-weight:300;color:var(--text-light);line-height:1.8}
.about-grid p:first-of-type{color:var(--text);font-weight:400}
.about-image{border-radius:3px;overflow:hidden;border:1px solid var(--border);height:100%;min-height:340px}
.about-image img{width:100%;height:100%;object-fit:cover;display:block}
.values-card{background:var(--white);border:1px solid var(--border);padding:2.5rem;border-radius:3px}
.values-card h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:.75rem;color:var(--primary-dark)}
.values-card p{font-weight:300;color:var(--text-light);line-height:1.7;margin-bottom:1.8rem}
.values-card p:last-child{margin-bottom:0}
.values-list{display:flex;flex-wrap:wrap;gap:.6rem}
.values-list span{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:.4rem 1rem;border:1px solid var(--border);border-radius:2px;color:var(--primary);font-weight:500}

/* ─── Services ─── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{background:var(--white);border:1px solid var(--border);padding:2.2rem;border-radius:3px;transition:all .35s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--accent);transition:height .4s}
.service-card:hover{border-color:rgba(63,78,92,0.2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(26,37,48,0.06)}
.service-card:hover::before{height:100%}
.service-card__number{font-size:.7rem;letter-spacing:.15em;color:var(--accent);margin-bottom:1rem;font-weight:600}
.service-card h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:1rem;color:var(--primary-dark)}
.service-card li{font-size:.9rem;color:var(--text-light);padding:.35rem 0;padding-left:1rem;position:relative;font-weight:300}
.service-card li::before{content:'—';position:absolute;left:0;color:var(--accent)}

/* ─── Case Studies ─── */
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.case-card{background:var(--white);border:1px solid var(--border);padding:2.2rem;border-radius:3px;transition:all .35s}
.case-card:hover{border-color:rgba(63,78,92,0.2);box-shadow:0 8px 30px rgba(26,37,48,0.05)}
.case-card h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:.6rem;color:var(--primary-dark)}
.case-card p{font-size:.92rem;color:var(--text-light);font-weight:300}

/* ─── Clients ─── */
.clients-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.client-tag{padding:.75rem 2rem;border:1px solid rgba(255,255,255,0.15);border-radius:50px;font-size:.95rem;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,0.7);transition:all .4s;white-space:nowrap}
.client-tag:hover{border-color:var(--accent);color:var(--accent)}

/* ─── Package ─── */
.package{background:var(--white);border:1px solid var(--border);border-radius:3px;padding:3rem;max-width:900px}
.package h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:.5rem;color:var(--primary-dark)}
.package .price{font-family:var(--font-display);font-size:2rem;color:var(--accent);margin-bottom:1.5rem;display:block}
.package .price small{font-size:.9rem;color:var(--text-light);font-family:var(--font-body);font-weight:300}
.package table{width:100%;border-collapse:collapse;margin-top:1.5rem}
.package th{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);padding:.8rem 0;border-bottom:2px solid var(--primary)}
.package td{padding:.8rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text-light);font-weight:300;vertical-align:top}
.package td:first-child{color:var(--text);font-weight:400}
.package td strong{color:var(--primary-dark)}
.package .note{font-size:.82rem;color:var(--text-light);margin-top:1rem;font-weight:300;font-style:italic}

/* ─── Contact ─── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-info h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:1.5rem;color:var(--primary-dark)}
.contact-info li{padding:.5rem 0;font-weight:300;color:var(--text-light)}
.contact-info li strong{color:var(--text);font-weight:500;display:inline-block;min-width:80px}
.contact-info a{color:var(--primary);transition:color .3s}
.contact-info a:hover{color:var(--accent)}
.contact-form{background:var(--white);border:1px solid var(--border);padding:2.5rem;border-radius:3px}
.contact-form h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:1.5rem;color:var(--primary-dark)}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);margin-bottom:.4rem;font-weight:500}
.form-group input,.form-group textarea{width:100%;padding:.7rem 1rem;border:1px solid var(--border);border-radius:2px;font-family:var(--font-body);font-size:.9rem;color:var(--text);background:var(--bg);transition:border-color .3s;outline:none}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary)}
.form-group textarea{resize:vertical;min-height:120px}

/* ─── CTA Banner ─── */
.cta-banner{text-align:center;padding:5rem 2rem}
.cta-banner .section__title{color:var(--white)}
.cta-banner p{color:rgba(255,255,255,0.6);margin-bottom:2rem;font-weight:300}
.cta-banner--image{background:linear-gradient(rgba(26,37,48,0.78),rgba(26,37,48,0.78)),url('images/cta-lusail.jpg') center/cover no-repeat;padding:5rem 0}

/* ─── Footer ─── */
.footer{background:var(--primary-deeper);color:rgba(255,255,255,0.6);padding:4rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer h4{font-family:var(--font-display);font-size:1.2rem;color:var(--white);margin-bottom:.75rem}
.footer h5{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:600}
.footer p{font-size:.9rem;font-weight:300;line-height:1.7}
.footer li{padding:.25rem 0;font-size:.88rem;font-weight:300}
.footer a{transition:color .3s}
.footer a:hover{color:var(--accent-light)}
.footer__bottom{text-align:center;padding-top:2rem;font-size:.8rem;font-weight:300}

/* ─── Form Toast ─── */
.form-toast{padding:.85rem 1.2rem;border-radius:3px;margin-bottom:1.2rem;font-size:.9rem;font-weight:400}
.form-toast--success{background:#E8F5E9;color:#2E7D32;border:1px solid #C8E6C9}
.form-toast--error{background:#FBE9E7;color:#C62828;border:1px solid #FFCCBC}

/* ─── Scroll Animations ─── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── Insights / Blog Cards ─── */
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.insight-card{background:var(--white);border:1px solid var(--border);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:all .35s}
.insight-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(26,37,48,0.06);border-color:rgba(63,78,92,0.2)}
.insight-card__cover{aspect-ratio:16/9;background:var(--bg-warm);overflow:hidden}
.insight-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.insight-card:hover .insight-card__cover img{transform:scale(1.04)}
.insight-card__body{padding:1.6rem 1.8rem 1.8rem;display:flex;flex-direction:column;flex:1}
.insight-card__date{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;font-weight:500}
.insight-card__title{font-family:var(--font-display);font-size:1.15rem;line-height:1.35;color:var(--primary-dark);margin-bottom:.7rem}
.insight-card__excerpt{font-size:.9rem;color:var(--text-light);font-weight:300;line-height:1.65;margin-bottom:1.2rem;flex:1}
.insight-card__more{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);font-weight:500;align-self:flex-start}
.insight-card__more::after{content:' →';transition:transform .3s;display:inline-block}
.insight-card:hover .insight-card__more::after{transform:translateX(4px)}
.insights__all{text-align:center;margin-top:3rem}

/* ─── Blog Index Page ─── */
.blog-hero{background:linear-gradient(165deg,var(--primary-deeper) 0%,var(--primary) 100%);padding:9rem 0 5rem;color:var(--white)}
.blog-hero__label{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem;font-weight:500}
.blog-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.2;margin-bottom:1.2rem}
.blog-hero__sub{font-size:1.05rem;color:rgba(255,255,255,0.7);max-width:640px;font-weight:300;line-height:1.7}

/* ─── Post Page ─── */
.post{padding:8rem 0 5rem;background:var(--bg)}
.post__container{max-width:780px;margin:0 auto;padding:0 2rem}
.post__back{display:inline-block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:2rem;transition:color .3s}
.post__back:hover{color:var(--primary)}
.post__date{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:500}
.post__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);line-height:1.2;color:var(--primary-dark);margin-bottom:2rem}
.post__cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;margin-bottom:2.5rem;border:1px solid var(--border)}
.post__body{font-size:1.05rem;line-height:1.85;color:var(--text)}
.post__body > p{margin-bottom:1.3rem;font-weight:300}
.post__body > p:first-child{font-size:1.12rem;color:var(--text);font-weight:400;margin-bottom:2rem}
.post__body h2{font-family:var(--font-display);font-size:1.7rem;line-height:1.3;color:var(--primary-dark);margin:3rem 0 1.2rem;font-weight:400}
.post__body h3{font-family:var(--font-display);font-size:1.25rem;line-height:1.35;color:var(--primary-dark);margin:2.2rem 0 1rem;font-weight:400}
.post__body h2:first-child,.post__body h3:first-child{margin-top:0}
.post__body ul,.post__body ol{margin:1rem 0 1.5rem 1.4rem;font-weight:300}
.post__body ul{list-style:none;padding-left:0}
.post__body ul li{position:relative;padding-left:1.5rem;margin-bottom:.65rem;line-height:1.7}
.post__body ul li::before{content:'';position:absolute;left:0;top:.65em;width:.45rem;height:.45rem;background:var(--accent);border-radius:50%}
.post__body ol{padding-left:1.2rem}
.post__body ol li{margin-bottom:.65rem;line-height:1.7;padding-left:.4rem}
.post__body strong{color:var(--primary-dark);font-weight:500}
.post__body a{color:var(--primary);border-bottom:1px solid var(--accent-light);transition:color .3s,border-color .3s}
.post__body a:hover{color:var(--accent)}
.post__faq{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.post__faq h2{margin-top:0}
.post__faq .faq-q{font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--primary-dark);margin:1.6rem 0 .6rem}
.post__faq .faq-a{font-weight:300;color:var(--text-light);line-height:1.75}
.post__cta{margin-top:4rem;padding:2.5rem;background:var(--bg-warm);border-radius:3px;text-align:center}
.post__cta h3{font-family:var(--font-display);font-size:1.4rem;color:var(--primary-dark);margin-bottom:1.2rem;font-weight:400}

/* ─── Related Posts ─── */
.related-posts{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border)}
.related-posts__title{font-family:var(--font-display);font-size:1.5rem;color:var(--primary-dark);margin-bottom:1.8rem;font-weight:400}

/* ─── Mobile ─── */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr 1fr;gap:3rem}
  .about-image{grid-column:1 / -1;min-height:0;max-height:280px}
  .insights-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav__links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--primary-deeper);flex-direction:column;justify-content:center;padding:2rem;transition:right .4s;gap:1.5rem}
  .nav__links.open{right:0}
  .nav__links a{color:rgba(255,255,255,0.8)!important;font-size:1rem}
  .nav__links .btn-contact{border-color:rgba(255,255,255,0.3)!important;color:var(--white)!important}
  .hamburger{display:flex}
  .hero__content{padding:7rem 0 5rem}
  .section{padding:4rem 0}
  .kpi-bar{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .about-image{max-height:240px}
  .services-grid{grid-template-columns:1fr}
  .cases-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .package{padding:2rem}
  .insights-grid{grid-template-columns:1fr}
  .post{padding:6rem 0 3rem}
  .post__body{font-size:1rem}
  .post__body h2{font-size:1.45rem;margin:2.2rem 0 1rem}
  .post__cta{padding:1.8rem}
}
@media(max-width:480px){
  .hero__actions{flex-direction:column}
  .hero__actions .btn{text-align:center}
}