:root{
  --ink:#0F1115;--ink-2:#161A20;--ink-3:#1E2329;
  --bronze:#B08D57;--bronze-soft:rgba(176,141,87,0.12);
  --cream:#F7F6F2;--cream-2:#F2EFE9;--muted:#B8B8B4;--dim:#6A6A66;
  --line:rgba(255,255,255,0.06);--line-dark:rgba(15,17,21,0.08);
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Inter',sans-serif;
  --container:1320px;--radius:16px;--radius-lg:24px;
  --ease:cubic-bezier(0.23,1,0.32,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:0.3s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;line-height:1.1}
.container{max-width:var(--container);margin:0 auto;padding:0 40px;width:100%}
.section{padding:8rem 0;border-bottom:1px solid var(--line)}
.section-label{font-size:0.72rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--bronze);margin-bottom:1rem;font-weight:400;display:inline-flex;align-items:center;gap:12px}
.section-label::before{content:'';width:32px;height:1px;background:var(--bronze)}
.section-title{font-size:clamp(2.6rem,4.6vw,4.4rem);font-weight:300;letter-spacing:-0.02em;margin-bottom:1.2rem}
.section-title .accent{color:var(--bronze);font-style:italic}
.section-lead{font-size:1.08rem;color:var(--muted);max-width:640px;line-height:1.85;margin-bottom:2.5rem}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem;flex-wrap:wrap}

/* PRELOADER */
.preloader{position:fixed;inset:0;background:var(--ink);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity 0.6s,visibility 0.6s}
.preloader.done{opacity:0;visibility:hidden}
.preloader-inner{text-align:center}
.preloader-logo{font-family:var(--font-display);font-size:2rem;letter-spacing:0.3em;color:var(--cream);margin-bottom:1.5rem}
.preloader-logo .ad{color:var(--bronze);font-size:1.4rem}
.preloader-bar{width:240px;height:2px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden;margin:0 auto 1rem}
.preloader-bar-fill{height:100%;background:var(--bronze);width:0;transition:width 0.15s linear}
.preloader-percent{font-size:0.7rem;letter-spacing:0.3em;color:var(--bronze)}

/* CURSOR */
.cursor-dot{width:8px;height:8px;background:var(--bronze);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.3s var(--ease),height 0.3s var(--ease),background 0.3s;mix-blend-mode:difference}
.cursor-dot.hover{width:60px;height:60px;background:var(--bronze-soft);mix-blend-mode:normal;border:1px solid rgba(176,141,87,0.3)}

/* NAV */
.nav-floating{position:fixed;top:1.8rem;left:50%;transform:translateX(-50%);width:94%;max-width:1360px;padding:0.9rem 2.2rem;background:rgba(15,17,21,0.2);backdrop-filter:blur(0px);border-radius:100px;z-index:1000;transition:all 0.5s var(--ease);display:flex;justify-content:space-between;align-items:center;border:1px solid transparent}
.nav-floating.scrolled{background:rgba(15,17,21,0.85);backdrop-filter:blur(24px) saturate(1.3);border-color:rgba(255,255,255,0.06);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.logo{font-family:var(--font-display);font-size:1.7rem;font-weight:400;letter-spacing:0.18em;color:var(--cream);cursor:pointer}
.logo .ad{color:var(--bronze);font-size:1.1rem;letter-spacing:0.05em}
.nav-links{display:flex;gap:1.8rem;font-size:0.72rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--bronze);transition:width 0.4s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--cream);transition:0.3s}
@media(max-width:1100px){
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;background:var(--ink-2);flex-direction:column;padding:20px;border-radius:20px;gap:12px;border:1px solid var(--line)}
  .nav-links.open{display:flex}
}

/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:140px 0 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=80') center/cover;opacity:0.22;filter:grayscale(0.4) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--ink) 90%)}
.hero-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 40px;width:100%;display:grid;grid-template-columns:1.2fr 0.8fr;gap:5rem;align-items:center}
.hero-eyebrow{font-size:0.72rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.5rem;display:inline-flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--bronze)}
.hero h1{font-size:clamp(2.8rem,5.5vw,5.4rem);line-height:1.02;letter-spacing:-0.03em;margin-bottom:1.8rem}
.hero h1 .accent{color:var(--bronze);font-style:italic}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:520px;margin-bottom:2.5rem;line-height:1.8}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-side{display:grid;gap:1.5rem;align-self:end}
.hero-stat{border-left:1px solid var(--bronze);padding-left:1.2rem}
.hero-stat strong{font-family:var(--font-display);font-size:2.6rem;font-weight:400;color:var(--cream);display:block;line-height:1}
.hero-stat span{font-size:0.75rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-top:0.4rem}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:3rem}.hero-side{grid-template-columns:repeat(3,1fr)}}

/* BUTTONS */
.btn-primary,.btn-secondary,.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:60px;font-size:0.85rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;transition:0.4s var(--ease);cursor:pointer}
.btn-primary{background:var(--bronze);color:var(--ink);border:1px solid var(--bronze)}
.btn-primary:hover{background:transparent;color:var(--bronze);transform:translateY(-2px)}
.btn-secondary{border:1px solid rgba(255,255,255,0.15);color:var(--cream)}
.btn-secondary:hover{border-color:var(--bronze);color:var(--bronze)}
.btn-outline{border:1px solid var(--bronze);color:var(--bronze)}
.btn-outline:hover{background:var(--bronze);color:var(--ink)}
.btn-primary i,.btn-outline i{transition:transform 0.3s}
.btn-primary:hover i,.btn-outline:hover i{transform:translateX(4px)}

/* CARDS (generic) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:0.5s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:rgba(176,141,87,0.28);box-shadow:0 30px 70px rgba(0,0,0,0.5)}
.card-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--ink-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-tag{position:absolute;top:14px;left:14px;background:rgba(15,17,21,0.85);backdrop-filter:blur(8px);color:var(--bronze);padding:6px 14px;border-radius:99px;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500}
.card-body{padding:1.8rem}
.card-body h3{font-size:1.5rem;font-weight:300;margin-bottom:0.6rem;letter-spacing:-0.01em}
.card-body p{color:var(--muted);font-size:0.92rem;line-height:1.7;margin-bottom:1.2rem}
.card-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:0.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}
.card-link{color:var(--bronze);font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.card:hover .card-link i{transform:translateX(4px)}
@media(max-width:900px){.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}

/* DIVISION CARDS (homepage) */
.division-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.division-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.5rem;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;transition:0.5s var(--ease);position:relative;overflow:hidden}
.division-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--bronze-soft),transparent 70%);opacity:0;transition:0.6s}
.division-card:hover{border-color:rgba(176,141,87,0.3);transform:translateY(-6px)}
.division-card:hover::before{opacity:1}
.division-card .num{font-family:var(--font-display);font-size:4rem;font-weight:300;color:var(--bronze);opacity:0.5;line-height:1}
.division-card h3{font-size:2rem;font-weight:300;margin:1.5rem 0 0.8rem}
.division-card p{color:var(--muted);font-size:0.95rem;line-height:1.75;margin-bottom:2rem}
@media(max-width:900px){.division-grid{grid-template-columns:1fr}}

/* PAGE HEADER */
.page-header{padding:180px 0 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-header::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,var(--bronze-soft),transparent 70%)}
.page-header .container{position:relative;z-index:2}
.page-title{font-size:clamp(2.8rem,6vw,5rem);font-weight:300;letter-spacing:-0.03em;line-height:1.05;max-width:900px;margin:0.5rem 0 1.2rem}
.page-title .accent{color:var(--bronze);font-style:italic}
.page-lead{font-size:1.1rem;color:var(--muted);max-width:640px;line-height:1.8}

/* FILTERS */
.filters{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:3rem}
.filters button{padding:9px 20px;border-radius:60px;border:1px solid var(--line);color:var(--muted);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;transition:0.3s var(--ease);background:transparent}
.filters button:hover,.filters button.active{border-color:var(--bronze);color:var(--bronze);background:var(--bronze-soft)}

/* PROJECT / PORTFOLIO DETAIL */
.detail-hero{position:relative;height:70vh;min-height:520px;overflow:hidden;margin-top:120px;border-radius:var(--radius-lg);width:calc(100% - 80px);max-width:calc(var(--container) - 80px);margin-left:auto;margin-right:auto;background:var(--ink-2)}
.detail-hero img{width:100%;height:100%;object-fit:cover;opacity:0.65}
.detail-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 5%,transparent 70%)}
.detail-hero-content{position:absolute;bottom:3rem;left:3rem;right:3rem;max-width:760px}
.detail-hero .cat{color:var(--bronze);font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:1rem;display:inline-block}
.detail-hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;line-height:1.05;letter-spacing:-0.02em}

.detail-body{max-width:820px;margin:4rem auto 0;padding:0 40px}
.detail-body h3{font-family:var(--font-display);font-size:1.8rem;font-weight:400;margin:3rem 0 1rem;letter-spacing:-0.01em;color:var(--cream)}
.detail-body h3:first-child{margin-top:0}
.detail-body p{color:var(--muted);font-size:1.04rem;line-height:1.9;margin-bottom:1.4rem}
.detail-body strong{color:var(--cream);font-weight:400}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:3rem 0}
.spec-item .label{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:0.4rem}
.spec-item .value{font-size:1rem;color:var(--cream);font-weight:400}
@media(max-width:768px){.specs{grid-template-columns:1fr 1fr}}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:3rem 0}
.gallery img{width:100%;height:360px;object-fit:cover;border-radius:12px;transition:transform 0.5s var(--ease)}
.gallery img:first-child{grid-column:span 2;height:520px}
.gallery img:hover{transform:scale(1.02)}
@media(max-width:768px){.gallery{grid-template-columns:1fr}.gallery img{height:260px}.gallery img:first-child{grid-column:auto;height:320px}}

/* ARTICLE */
.article-hero{padding:180px 0 60px;border-bottom:1px solid var(--line)}
.article-meta{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;font-size:0.8rem;color:var(--muted);letter-spacing:0.08em;margin-bottom:1rem}
.article-meta .cat{background:var(--bronze);color:var(--ink);padding:5px 14px;border-radius:99px;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500}
.article-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:300;line-height:1.08;letter-spacing:-0.03em;max-width:900px;margin-bottom:1.2rem}
.article-hero .lead{font-size:1.15rem;color:var(--muted);max-width:760px;line-height:1.75}
.article-cover{margin:3rem 0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/8}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-content{max-width:800px;margin:0 auto;padding:0 40px 6rem;font-size:1.06rem;line-height:1.9;color:var(--muted)}
.article-content h2{font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--cream);margin:3rem 0 1rem;letter-spacing:-0.01em}
.article-content h3{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--cream);margin:2rem 0 0.8rem}
.article-content p{margin-bottom:1.4rem}
.article-content strong{color:var(--cream);font-weight:400}
.article-content blockquote{border-left:3px solid var(--bronze);padding:1rem 1.5rem;background:var(--ink-2);border-radius:0 12px 12px 0;font-style:italic;color:var(--cream);margin:2rem 0}
.article-content img{border-radius:12px;margin:1.5rem 0}
.article-content a{color:var(--bronze);border-bottom:1px solid var(--bronze)}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.team-member{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:0.5s var(--ease)}
.team-member:hover{border-color:rgba(176,141,87,0.28);transform:translateY(-4px)}
.team-avatar{aspect-ratio:1;background:var(--ink-3);overflow:hidden}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-info{padding:1.8rem}
.team-info h4{font-family:var(--font-display);font-size:1.4rem;font-weight:400;margin-bottom:0.3rem}
.team-info .role{font-size:0.75rem;color:var(--bronze);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:1rem}
.team-info p{color:var(--muted);font-size:0.9rem;line-height:1.7}
@media(max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.service-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;transition:0.4s var(--ease)}
.service-card:hover{border-color:rgba(176,141,87,0.28);transform:translateY(-4px)}
.service-card i{font-size:1.6rem;color:var(--bronze);margin-bottom:1rem;display:block}
.service-card h4{font-family:var(--font-display);font-size:1.35rem;font-weight:400;margin-bottom:0.6rem}
.service-card p{color:var(--muted);font-size:0.92rem;line-height:1.7}
@media(max-width:768px){.services-grid{grid-template-columns:1fr}}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.process-step{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:2.5rem;transition:0.4s var(--ease);position:relative;overflow:hidden}
.process-step::before{content:'';position:absolute;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--bronze),transparent);transform:scaleX(0);transform-origin:left;transition:0.5s var(--ease)}
.process-step:hover::before{transform:scaleX(1)}
.process-step:hover{transform:translateY(-6px);border-color:rgba(176,141,87,0.28)}
.process-step .num{font-size:0.7rem;color:var(--bronze);letter-spacing:0.2em;font-weight:500}
.process-step h3{font-family:var(--font-display);font-size:1.8rem;font-weight:400;margin:0.8rem 0}
.process-step p{color:var(--muted);font-size:0.92rem;line-height:1.75}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.process-grid{grid-template-columns:1fr}}

/* FORM */
.form-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:3rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:0.6rem;font-weight:500}
.field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid var(--line);padding:0.85rem 0;color:var(--cream);font-family:inherit;font-size:1rem;font-weight:300;outline:none;transition:0.3s var(--ease);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--bronze)}
.field textarea{resize:vertical;min-height:120px}
.field select option{background:var(--ink-2);color:var(--cream)}
.form-submit{margin-top:1rem;background:var(--bronze);color:var(--ink);padding:1rem 3rem;border-radius:60px;font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;border:none;cursor:pointer;transition:0.4s var(--ease)}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(176,141,87,0.3)}
.form-submit:disabled{opacity:0.5;cursor:not-allowed}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

.alert{padding:1rem 1.4rem;border-radius:12px;margin-bottom:1.5rem;font-size:0.95rem;border:1px solid}
.alert-success{background:rgba(176,141,87,0.1);color:var(--bronze);border-color:rgba(176,141,87,0.35)}
.alert-error{background:rgba(200,60,60,0.08);color:#E88080;border-color:rgba(200,60,60,0.3)}

/* CTA STRIP */
.cta-strip{background:var(--ink-2);border-top:1px solid var(--line);padding:8rem 0;text-align:center}
.cta-strip .section-label{justify-content:center;display:flex}
.cta-inner h2{font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;line-height:1.1;letter-spacing:-0.02em;margin:1rem 0 2.5rem}

/* FOOTER */
.footer{background:var(--ink);padding:5rem 0 2.5rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.brand-footer{font-family:var(--font-display);font-size:1.8rem;font-weight:400;letter-spacing:0.15em;margin-bottom:1rem;color:var(--cream)}
.brand-footer .ad{color:var(--bronze);font-size:1.2rem}
.footer-brand p{color:var(--muted);font-size:0.92rem;line-height:1.7;margin-bottom:1.5rem;max-width:340px}
.footer-socials{display:flex;gap:0.8rem}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:0.3s}
.footer-socials a:hover{border-color:var(--bronze);color:var(--bronze);background:var(--bronze-soft)}
.footer-col h5{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.4rem;font-weight:500}
.footer-col a,.footer-col p{display:block;color:var(--muted);font-size:0.9rem;line-height:1.7;margin-bottom:0.7rem;transition:0.3s}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--dim);letter-spacing:0.08em;flex-wrap:wrap;gap:1rem}

/* PROGRESS BAR */
.progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--bronze);z-index:1001;width:0;transition:width 0.1s}

/* EMPTY STATE */
.empty-state{text-align:center;padding:5rem 2rem;color:var(--dim)}
.empty-state i{font-size:3rem;color:var(--bronze);opacity:0.4;margin-bottom:1rem}
.empty-state h3{font-family:var(--font-display);font-size:1.6rem;color:var(--cream);font-weight:400;margin-bottom:0.5rem}

/* PAGINATION */
.pagination{display:flex;gap:0.5rem;justify-content:center;margin-top:3rem}
.pagination a,.pagination span{padding:10px 16px;border-radius:8px;border:1px solid var(--line);color:var(--muted);font-size:0.85rem;transition:0.3s}
.pagination a:hover,.pagination .current{background:var(--bronze);color:var(--ink);border-color:var(--bronze)}

/* RESPONSIVE BASE */
@media(max-width:768px){
  .container,.hero-inner,.detail-body,.article-content{padding-left:24px;padding-right:24px}
  .section{padding:5rem 0}
  .page-header{padding:140px 0 50px}
  .detail-hero{width:calc(100% - 32px);margin-top:110px}
  .detail-hero-content{left:1.5rem;right:1.5rem;bottom:1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .cursor-dot{display:none}
  body{cursor:auto}
}


/* ============================================================
   WOW FACTOR UPGRADE — appended additions
   ============================================================ */

/* ---- HERO CANVAS (dot grid) ---- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

/* ---- SPLIT TEXT ---- */
.split-heading .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em; /* descender room */
  margin-bottom: -0.05em;
}
.split-heading .word-inner {
  display: inline-block;
  will-change: transform;
}

/* ---- MARQUEE ---- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  z-index: 1;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 15%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}
.marquee-track span.dot {
  color: var(--bronze);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- PROGRESSIVE IMAGE WIPE ---- */
.reveal-mask {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-mask.in-view {
  clip-path: inset(0 0 0 0);
}

/* Subtle zoom-in reveal on card images */
.card-img img,
.team-avatar img,
.article-cover img {
  transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- MAGNETIC BUTTONS ---- */
.magnetic-btn {
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

/* ---- CURSOR LABEL STATE ---- */
.cursor-dot.labeled::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: normal;
}
.cursor-dot.labeled {
  width: 78px;
  height: 78px;
  background: rgba(15, 17, 21, 0.75);
  border: 1px solid var(--bronze);
  mix-blend-mode: normal;
  backdrop-filter: blur(6px);
}

/* ---- HERO STATS ---- */
.hero-stat strong {
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}

/* ---- SECTION REVEAL LINES ---- */
.section-reveal-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.section-reveal-line.in-view { transform: scaleX(1); }

/* ---- LINK HOVER UNDERLINE (nav) ---- */
.nav-links a {
  transition: color 0.3s var(--ease);
}

/* ---- HOME PAGE EXTRA EMPHASIS ---- */
.hero h1 {
  will-change: transform;
}
.hero h1 .accent {
  display: inline-block;
  position: relative;
}
.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 1px;
  background: var(--bronze);
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}
.hero h1.in-view .accent::after { transform: scaleX(1); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal-mask { clip-path: none; }
  .word-inner { transform: none !important; }
  .cursor-dot { display: none; }
  .hero-canvas { display: none; }
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  .marquee { padding: 2rem 0; }
  .marquee-track { animation-duration: 28s; }
  .hero-canvas { opacity: 0.5; }
}



























/* ============================================================
   HOMEPAGE VISUAL OVERHAUL
   ============================================================ */

/* ---- FULL-BLEED HERO ---- */
.hero-full {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 160px 0 6rem;
}
.hero-image-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.05);
  will-change: transform;
}
.hero-overlay-full {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(15, 17, 21, 0.55) 0%,
    rgba(15, 17, 21, 0.35) 30%,
    rgba(15, 17, 21, 0.75) 70%,
    rgba(15, 17, 21, 0.98) 100%);
}
.hero-content-full {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}
.hero-content-full h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 1000px;
  color: var(--cream);
  margin-bottom: 1.6rem;
}
.hero-content-full h1 .accent {
  color: var(--bronze);
  font-style: italic;
}
.hero-content-full .hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-content-full .hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--bronze);
}
.hero-content-full .hero-sub {
  font-size: 1.15rem;
  color: rgba(247, 246, 242, 0.85);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.hero-stats-row {
  display: flex;
  gap: 3.5rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stats-row .hero-stat {
  border: none;
  padding: 0;
}
.hero-stats-row .hero-stat strong {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--cream);
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-stats-row .hero-stat span {
  font-size: 0.72rem;
  color: rgba(247, 246, 242, 0.6);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-top: 0.5rem;
}
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(247, 246, 242, 0.55);
  writing-mode: vertical-rl;
  z-index: 3;
}
.hero-scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, var(--bronze), transparent);
  margin: 1rem auto 0;
}

/* ---- CAPABILITY CARDS (image-first) ---- */
.capabilities {
  background: var(--ink);
  padding: 6rem 0;
  border-bottom: 1px solid var(--line);
}
.capabilities-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.capability-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 520px;
  transition: transform 0.6s var(--ease);
}
.capability-card:hover { transform: translateY(-6px); }
.capability-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.capability-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s;
  filter: grayscale(0.3) brightness(0.7);
}
.capability-card:hover .capability-img img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(0.8);
}
.capability-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 2.25rem;
  background: linear-gradient(180deg, rgba(15,17,21,0.15) 0%, rgba(15,17,21,0.45) 55%, rgba(15,17,21,0.95) 100%);
  color: var(--cream);
  z-index: 2;
}
.capability-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--bronze);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.capability-overlay h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.capability-overlay p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(247, 246, 242, 0.72);
  margin-bottom: 1.5rem;
  max-width: 300px;
}
.capability-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
}
.capability-link i { transition: transform 0.3s; }
.capability-card:hover .capability-link i { transform: translateX(5px); }

/* ---- FEATURED PROJECT (full-bleed) ---- */
.featured-project {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.featured-project-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.featured-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.05);
}
.featured-project-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,17,21,0.2) 0%, rgba(15,17,21,0.5) 50%, rgba(15,17,21,0.98) 100%);
}
.featured-project-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4rem 0 5rem;
}
.featured-project-content .section-label.light {
  color: var(--bronze);
  margin-bottom: 1rem;
}
.featured-project-content .section-label.light::before { background: var(--bronze); }
.featured-project-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 1rem;
  max-width: 900px;
}
.featured-project-content p {
  font-size: 1.1rem;
  color: rgba(247, 246, 242, 0.78);
  max-width: 620px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* ---- VISUAL MOSAIC ---- */
.visual-mosaic-section { background: var(--ink); }
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 1rem;
}
.mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink-2);
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.mosaic-item:hover img { transform: scale(1.06); }

.mosaic-1 { grid-column: span 2; grid-row: span 2; }
.mosaic-2 { grid-column: span 2; grid-row: span 1; }
.mosaic-3 { grid-column: span 1; grid-row: span 1; }
.mosaic-4 { grid-column: span 1; grid-row: span 1; }
.mosaic-5 { grid-column: span 2; grid-row: span 1; }

/* ---- PROJECTS SHOWCASE (larger cards) ---- */
.projects-showcase-section { background: var(--ink); }
.projects-showcase {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1.5rem;
}
.project-showcase-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: transform 0.6s var(--ease), border-color 0.4s;
}
.project-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(176, 141, 87, 0.3);
}
.project-showcase-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.projects-showcase > .project-showcase-card:nth-child(1) .project-showcase-img { aspect-ratio: 4 / 6; }
.project-showcase-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.project-showcase-card:hover .project-showcase-img img { transform: scale(1.05); }
.project-showcase-info {
  padding: 1.6rem 1.8rem;
}
.project-tag {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}
.project-showcase-info h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.project-meta {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .capabilities-grid { grid-template-columns: 1fr 1fr; }
  .capability-card:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; min-height: 400px; }
  .projects-showcase { grid-template-columns: 1fr 1fr; }
  .projects-showcase > .project-showcase-card:nth-child(1) { grid-column: span 2; }
  .projects-showcase > .project-showcase-card:nth-child(1) .project-showcase-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .hero-full { padding: 120px 0 4rem; }
  .hero-content-full { padding: 0 24px; }
  .hero-stats-row { gap: 2rem; margin-top: 3rem; padding-top: 2rem; flex-wrap: wrap; }
  .hero-stats-row .hero-stat strong { font-size: 2rem; }
  .hero-scroll-hint { display: none; }
  .capabilities { padding: 4rem 0; }
  .capabilities-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 1rem; }
  .capability-card, .capability-card:nth-child(3) { aspect-ratio: 3 / 4; min-height: 420px; grid-column: auto; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 0.6rem; }
  .mosaic-1 { grid-column: span 2; grid-row: span 2; }
  .mosaic-2 { grid-column: span 2; }
  .mosaic-3, .mosaic-4 { grid-column: span 1; }
  .mosaic-5 { grid-column: span 2; }
  .projects-showcase { grid-template-columns: 1fr; }
  .projects-showcase > .project-showcase-card:nth-child(1) { grid-column: auto; }
  .projects-showcase > .project-showcase-card:nth-child(1) .project-showcase-img { aspect-ratio: 4 / 5; }
  .featured-project { min-height: 70vh; }
  .featured-project-content h2 { font-size: 2.2rem; }
}

































/* ============================================================
   FIXES — hero contrast, safe image reveals, neutral fallbacks
   ============================================================ */

/* ---------- HERO CONTRAST ---------- */
.hero-full .hero-overlay-full {
  background: linear-gradient(
    180deg,
    rgba(8, 10, 13, 0.88) 0%,
    rgba(8, 10, 13, 0.72) 30%,
    rgba(8, 10, 13, 0.88) 65%,
    rgba(8, 10, 13, 1) 100%
  ) !important;
}
.hero-content-full h1 {
  text-shadow:
    0 2px 40px rgba(0, 0, 0, 0.7),
    0 1px 4px rgba(0, 0, 0, 0.9);
}
.hero-content-full .hero-sub {
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.8);
}
.hero-content-full .hero-eyebrow {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* ---------- KILL THE RISKY CLIP-PATH REVEAL ---------- */
/* Old reveal-mask clipped entire sections off-screen; forcibly disable. */
.reveal-mask {
  clip-path: none !important;
  opacity: 1 !important;
}

/* Safe replacement: opacity + small translateY */
.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* If JS never runs, still show — override with a media query.
   Handled in main.js by only adding .reveal-fade after observer is set up. */

/* ---------- NEUTRAL BACKGROUNDS ON IMAGE CONTAINERS ---------- */
/* So a slow or missing image shows a soft gray, not pitch black */
.card-img,
.capability-img,
.project-showcase-img,
.mosaic-item,
.team-avatar,
.detail-hero,
.article-cover,
.about-img-wrap,
.about-img-small,
.hero-image-main,
.hero-image-float {
  background-color: #1c2026;
}

/* Ensure every image inside a container fills it correctly */
.card-img img,
.capability-img img,
.project-showcase-img img,
.mosaic-item img,
.team-avatar img,
.detail-hero img,
.article-cover img,
.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- CAPABILITY CARD TEXT ALWAYS READABLE ---------- */
.capability-overlay {
  background: linear-gradient(
    180deg,
    rgba(8, 10, 13, 0.15) 0%,
    rgba(8, 10, 13, 0.62) 50%,
    rgba(8, 10, 13, 0.98) 100%
  ) !important;
}

/* ---------- FEATURED PROJECT — CSS FALLBACK BEHIND THE IMG ---------- */
.featured-project-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.featured-project-image img {
  position: relative;
  z-index: 1;
  /* If img fails, transparent background reveals the div behind it */
}

/* ---------- PROJECT / PORTFOLIO CARD IMAGE FALLBACK ---------- */
/* If the img fails to load, ensure the parent shows a graceful color */
.card-img {
  min-height: 200px;
}