/*
Theme Name: DNA Project Management
Theme URI: https://dnaprojectmanagement.com
Author: DNA Build Team
Author URI: https://dnaprojectmanagement.com
Description: Custom theme for DNA Project Management and Contracting — Dubai. Built from bespoke HTML designs.
Version: 1.0.0
License: Proprietary
Text Domain: dna-theme
*/

/* Base reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0d1825;color:#f0ede8;font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}

/* ─── Grain overlay ─────────────────────────────────── */
.grain-overlay{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}

/* ─── Navigation ────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex !important;align-items:center;justify-content:space-between;padding:32px 80px;background:transparent;transition:background 0.5s,backdrop-filter 0.5s,border-color 0.5s,padding 0.4s;border-bottom:0.5px solid transparent}
.nav.scrolled{background:rgba(9,17,30,0.88);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom-color:rgba(255,255,255,0.06);padding:20px 80px}
.nav-logo img{height:20px;width:auto;display:block;max-width:none}
.nav-links{display:flex !important;gap:48px;list-style:none}
.nav-links a{color:rgba(240,237,232,0.38);text-decoration:none;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2.8px;text-transform:uppercase;transition:color 0.2s;font-weight:400}
.nav-links a:hover,.nav-links a.active{color:rgba(240,237,232,0.85)}

/* ─── Hero ──────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 80px 120px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.08);will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(9,17,30,0.92) 0%,rgba(9,17,30,0.38) 50%,rgba(9,17,30,0.72) 100%)}
.hero-content{position:relative;max-width:820px;animation:rise 1.4s cubic-bezier(0.16,1,0.3,1) forwards;opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(52px);clip-path:inset(0 0 30% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0% 0)}}
.hero-eyebrow{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:4px;text-transform:uppercase;color:rgba(240,237,232,0.3);margin-bottom:40px;display:flex !important;align-items:center;gap:14px}
.hero-eyebrow::before{content:'';display:block;width:36px;height:0.5px;background:rgba(240,237,232,0.22)}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(72px,9vw,108px);font-weight:300;line-height:0.92;letter-spacing:-1px;color:#f0ede8;text-shadow:none;margin-bottom:40px}
.hero h1 .line{display:block}
.hero h1 .muted{color:rgba(240,237,232,0.28);font-style:italic;font-weight:300}
.hero-sub{font-family:'DM Sans',sans-serif;font-size:15px;color:rgba(240,237,232,0.5);line-height:1.9;max-width:440px;font-weight:300;letter-spacing:0.01em}
.scroll-hint{position:absolute;bottom:38px;left:80px;display:flex !important;align-items:center;gap:12px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(240,237,232,0.16)}
.scroll-line{width:36px;height:0.5px;background:rgba(240,237,232,0.18);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.2;transform:scaleX(1)}50%{opacity:0.55;transform:scaleX(1.35)}}

/* ─── Scroll reveal ─────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(28px);clip-path:inset(0 0 20px 0);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1),clip-path 0.9s cubic-bezier(0.16,1,0.3,1)}
.fade-up.in{opacity:1;transform:translateY(0);clip-path:inset(0 0 0px 0)}
.d1{transition-delay:0.1s}.d2{transition-delay:0.2s}.d3{transition-delay:0.3s}.d4{transition-delay:0.4s}

/* ─── Section globals ───────────────────────────────── */
.sec{padding:130px 80px}
.lbl{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:4px;text-transform:uppercase;color:rgba(240,237,232,0.22);margin-bottom:28px;display:flex !important;align-items:center;gap:14px}
.lbl::before{content:'';display:block;width:24px;height:0.5px;background:rgba(240,237,232,0.15)}

/* ─── Origin / About ────────────────────────────────── */
.origin{background:#0d1825}
.origin-grid{display:grid !important;grid-template-columns:1.1fr 0.9fr;gap:110px;align-items:start}
.origin h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(42px,5vw,62px);font-weight:300;letter-spacing:-0.5px;line-height:1.05;margin-bottom:40px;color:#f0ede8}
.origin p{font-size:14.5px;font-weight:300;line-height:2.0;color:rgba(240,237,232,0.52);margin-bottom:24px;letter-spacing:0.01em}
.img-stack{display:flex !important;flex-direction:column;gap:4px;position:sticky;top:110px}
.img-frame{overflow:hidden;position:relative}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.img-frame:hover img{transform:scale(1.04)}
.img-label{position:absolute;bottom:18px;left:18px;font-family:'DM Sans',sans-serif;font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.28)}
.stats{display:flex !important;border-top:0.5px solid rgba(255,255,255,0.06);padding-top:52px;margin-top:52px;gap:0}
.stat{flex:1;padding-right:24px;border-right:0.5px solid rgba(255,255,255,0.05);margin-right:24px}
.stat:last-child{border-right:none;margin-right:0}
.stat-n{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;color:#f0ede8;letter-spacing:-0.5px}
.stat-l{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(240,237,232,0.22);margin-top:10px}

/* ─── Services ──────────────────────────────────────── */
.services{position:relative;background:#09111e;overflow:hidden}
.svc-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.08}
.svc-inner{position:relative}
.svc-top{display:flex !important;justify-content:space-between;align-items:flex-end;margin-bottom:72px}
.services h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(40px,5vw,64px);font-weight:300;letter-spacing:-0.5px;color:#f0ede8;line-height:1.05}
.svc-tag{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(240,237,232,0.14);padding-bottom:4px}
.srow{display:flex !important;align-items:flex-start;padding:40px 0;border-top:0.5px solid rgba(255,255,255,0.055);gap:36px;transition:padding-left 0.4s cubic-bezier(0.16,1,0.3,1);cursor:default}
.srow:last-child{border-bottom:0.5px solid rgba(255,255,255,0.055)}
.srow:hover{padding-left:20px}
.sn{font-family:'DM Sans',sans-serif;font-size:9.5px;color:rgba(240,237,232,0.12);letter-spacing:1.5px;min-width:32px;padding-top:5px;font-weight:500}
.sm{flex:1}
.sname{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;color:#f0ede8;margin-bottom:12px;letter-spacing:0}
.sdesc{font-family:'DM Sans',sans-serif;font-size:13.5px;color:rgba(240,237,232,0.4);line-height:1.8;font-weight:300}
.sarr{font-family:'DM Sans',sans-serif;font-size:14px;color:rgba(240,237,232,0.08);padding-top:4px;transition:color 0.3s,transform 0.4s cubic-bezier(0.16,1,0.3,1)}
.srow:hover .sarr{color:rgba(240,237,232,0.45);transform:translateX(8px)}

/* ─── CTA Banner ────────────────────────────────────── */
.banner{background:#f0ede8;padding:96px 80px;display:flex !important;align-items:center;justify-content:space-between;gap:60px}
.banner-q{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(36px,4vw,56px);font-weight:300;letter-spacing:-0.5px;color:#0d1825;line-height:1.1;max-width:580px}
.banner-btn{display:inline-flex !important;align-items:center;gap:12px;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:500;padding:20px 52px;background:#0d1825;color:#f0ede8;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity 0.25s}
.banner-btn:hover{opacity:0.78}

/* ─── Contact ───────────────────────────────────────── */
.contact{background:#0d1825}
.ct-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:120px;align-items:start}
.contact h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,4.5vw,58px);font-weight:300;letter-spacing:-0.5px;color:#f0ede8;line-height:1.05;margin-bottom:28px}
.ct-sub{font-family:'DM Sans',sans-serif;font-size:14px;color:rgba(240,237,232,0.46);line-height:1.95;margin-bottom:60px;font-weight:300}
.ci{margin-bottom:32px}
.ci-l{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(240,237,232,0.2);margin-bottom:8px}
.ci-v{font-family:'DM Sans',sans-serif;font-size:14px;color:rgba(240,237,232,0.65);font-weight:300}
.fi{padding:18px 0;background:transparent;border:none;border-bottom:0.5px solid rgba(255,255,255,0.08);color:#f0ede8;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;outline:none;transition:border-color 0.25s;width:100%;display:block;margin-bottom:2px}
.fi::placeholder{color:rgba(240,237,232,0.18)}
.fi:focus{border-bottom-color:rgba(240,237,232,0.35)}
textarea.fi{resize:none;min-height:88px;margin-top:8px}
.fbtn{margin-top:44px;padding:22px;width:100%;background:#f0ede8;color:#0d1825;border:none;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3.5px;text-transform:uppercase;font-weight:500;cursor:pointer;transition:opacity 0.2s}
.fbtn:hover{opacity:0.88}

/* ─── Footer ────────────────────────────────────────── */
.foot{background:#060d18;padding:52px 80px;display:flex !important;align-items:center;justify-content:space-between;border-top:0.5px solid rgba(255,255,255,0.04)}
.foot img{height:16px;width:auto;opacity:0.3}
.foot-nav{display:flex !important;gap:28px}
.foot-nav a{color:rgba(240,237,232,0.2);text-decoration:none;font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;transition:color 0.2s}
.foot-nav a:hover{color:rgba(240,237,232,0.55)}
.foot-copy{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:0.5px;color:rgba(240,237,232,0.12)}