/* ===================================================================
   HXG GLOBAL LLP — Design System
   Palette: Ink #0B1C2C (deep navy), Charcoal #1B1E24, Paper #F7F5F1,
            White #FFFFFF, Brass #C8932B (from mark), Mist #DCE3E8
   Type: "Fraunces" (display, serif, used sparingly) + "Inter" (body/UI)
   Signature: the "Trade Line" — a single continuous route-line motif
   that threads through the hero, section dividers and footer, standing
   in for the company's literal business: a path between origin and
   destination, supplier and project site.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#0B1C2C;
  --ink-soft:#142436;
  --charcoal:#1B1E24;
  --paper:#F7F5F1;
  --white:#FFFFFF;
  --brass:#C8932B;
  --brass-light:#E2B45A;
  --mist:#DCE3E8;
  --line:rgba(11,28,44,0.12);
  --ink-70:rgba(11,28,44,0.7);
  --ink-50:rgba(11,28,44,0.5);
  --white-70:rgba(255,255,255,0.72);
  --white-50:rgba(255,255,255,0.5);
  --shadow: 0 30px 60px -25px rgba(11,28,44,0.35);
  --radius: 2px;
  --max: 1280px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 48px;}
@media (max-width:900px){.wrap{padding:0 24px;}}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.08;
}
.eyebrow{
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--brass);
  display:inline-block;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- Top utility bar ---------- */
.utility-bar{
  background:var(--ink);
  color:var(--white-70);
  font-size:12.5px;
  letter-spacing:.03em;
}
.utility-bar .wrap{
  display:flex; justify-content:space-between; align-items:center; height:38px;
}
.utility-bar a{color:var(--white-70); transition:color .2s;}
.utility-bar a:hover{color:var(--brass-light);}
.utility-links{display:flex; gap:28px;}
.utility-links span{opacity:.5; margin:0 4px;}
@media (max-width:760px){ .utility-bar{display:none;} }

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,245,241,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:60px; width:auto;}

.main-nav{display:flex; align-items:center; gap:38px;}
.main-nav > ul{display:flex; gap:34px; align-items:center;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
  font-size:14.5px; font-weight:500; color:var(--ink);
  padding:10px 0; position:relative;
}
.main-nav > ul > li > a::after{
  content:''; position:absolute; left:0; bottom:4px; height:1px; width:0;
  background:var(--brass); transition:width .25s var(--ease);
}
.main-nav > ul > li > a:hover::after{width:100%;}
.main-nav > ul > li.has-mega:hover > a::after{width:100%;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; font-size:13.5px; font-weight:600; letter-spacing:.03em;
  border-radius:var(--radius); transition:all .3s var(--ease); white-space:nowrap;
  border:1px solid transparent;
}
.btn-primary{background:var(--ink); color:var(--white);}
.btn-primary:hover{background:var(--brass); color:var(--ink);}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--ink); color:var(--white);}
.btn-on-dark{border-color:var(--white-50); color:var(--white);}
.btn-on-dark:hover{background:var(--white); color:var(--ink); border-color:var(--white);}
.btn-brass{background:var(--brass); color:var(--ink);}
.btn-brass:hover{background:var(--brass-light);}

/* Mega menu */
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  width:760px; background:var(--white); box-shadow:var(--shadow);
  border:1px solid var(--line);
  padding:36px; display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:32px;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.has-mega:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mega-col h5{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:14px; font-weight:700;}
.mega-col ul li a{display:block; font-size:14px; padding:7px 0; color:var(--ink-70); transition:color .2s, padding .2s;}
.mega-col ul li a:hover{color:var(--brass); padding-left:4px;}
.mega-feature{background:var(--paper); padding:22px; border-left:2px solid var(--brass);}
.mega-feature p{font-size:13px; color:var(--ink-70); margin-top:8px; line-height:1.55;}
.mega-feature .tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-50); font-weight:600;}

.burger{display:none; flex-direction:column; gap:5px; width:26px;}
.burger span{height:1.5px; background:var(--ink); width:100%; transition:.3s;}

@media (max-width:1080px){
  .main-nav{display:none;}
  .burger{display:flex;}
  .nav-cta .btn-outline{display:none;}
}

/* Mobile drawer */
.mobile-nav{
  position:fixed; inset:0; background:var(--ink); color:var(--white);
  z-index:200; transform:translateX(100%); transition:transform .4s var(--ease);
  padding:32px 28px; overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav .close-mobile{position:absolute; top:28px; right:28px; font-size:28px; color:var(--white); background:none; border:none;}
.mobile-nav ul{margin-top:70px; display:flex; flex-direction:column;}
.mobile-nav ul li a{display:block; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.12); font-size:20px; font-family:'Fraunces',serif;}
.mobile-nav .mob-cta{margin-top:30px; display:flex; flex-direction:column; gap:12px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  background:var(--ink); color:var(--white); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; opacity:0.9;
  background:
    radial-gradient(circle at 18% 22%, rgba(200,147,43,0.16), transparent 38%),
    radial-gradient(circle at 85% 78%, rgba(200,147,43,0.10), transparent 45%),
    linear-gradient(160deg, #0B1C2C 0%, #0E2238 55%, #0B1C2C 100%);
}
.tradeline-svg{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.55;}
.hero .wrap{position:relative; z-index:2; padding-top:60px; padding-bottom:60px; width:100%;}
.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:60px; align-items:end;}
.hero-eyebrow{color:var(--brass-light);}
.hero-eyebrow::before{background:var(--brass-light);}
.hero h1{
  font-size:clamp(38px,5.6vw,68px); color:var(--white); margin:26px 0 22px; max-width:18ch;
}
.hero h1 em{font-style:normal; color:var(--brass-light);}
.hero p.lead{font-size:18px; color:var(--white-70); max-width:46ch; margin-bottom:36px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats{display:flex; flex-direction:column; gap:26px; border-left:1px solid rgba(255,255,255,0.18); padding-left:36px;}
.hero-stat .num{font-family:'Fraunces',serif; font-size:38px; color:var(--brass-light); line-height:1;}
.hero-stat .label{font-size:12.5px; color:var(--white-50); letter-spacing:.06em; margin-top:6px;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-stats{flex-direction:row; border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding-left:0; padding-top:28px; flex-wrap:wrap; gap:30px;}
}

.marquee{
  background:var(--paper); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden;
}
.marquee-track{display:flex; gap:64px; white-space:nowrap; animation:scroll 28s linear infinite; width:max-content;}
.marquee-track span{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-50); font-weight:600;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Generic sections ---------- */
section{padding:120px 0;}
section.tight{padding:90px 0;}
@media (max-width:900px){ section{padding:80px 0;} section.tight{padding:60px 0;} }

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.6vw,44px); margin-top:18px; max-width:14ch;}
.section-head .desc{max-width:38ch; color:var(--ink-70); font-size:15.5px; padding-bottom:6px;}
@media (max-width:760px){ .section-head{flex-direction:column; align-items:flex-start;} }

.section-alt{background:var(--white);}
.section-dark{background:var(--ink); color:var(--white);}
.section-dark h2, .section-dark h3, .section-dark h4{color:var(--white);}
.section-dark .eyebrow{color:var(--brass-light);}
.section-dark .eyebrow::before{background:var(--brass-light);}
.section-dark p{color:var(--white-70);}

/* About teaser */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;}
.about-media{position:relative; aspect-ratio:4/5; background:linear-gradient(150deg,#13263b,#0B1C2C); border:1px solid var(--line); overflow:hidden;}
.about-media .frame-label{position:absolute; bottom:24px; left:24px; color:var(--white); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.about-media svg{width:100%; height:100%;}
.about-copy p{color:var(--ink-70); margin-bottom:18px; font-size:16px; max-width:54ch;}
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px;}
.pillar{border-top:1px solid var(--line); padding-top:14px;}
.pillar h4{font-size:16px; margin-bottom:6px;}
.pillar p{font-size:13.5px; color:var(--ink-70);}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }

/* Cards: industries / supply grid */
.grid-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.grid-cards .card{
  background:var(--white); padding:34px 26px; min-height:200px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s, transform .3s var(--ease);
}
.grid-cards .card:hover{background:var(--ink); transform:translateY(-3px);}
.grid-cards .card:hover h4, .grid-cards .card:hover .idx{color:var(--white);}
.grid-cards .card:hover p{color:var(--white-70);}
.grid-cards .idx{font-family:'Fraunces',serif; font-size:13px; color:var(--brass);}
.grid-cards h4{font-size:17px; margin:18px 0 6px;}
.grid-cards p{font-size:13px; color:var(--ink-70);}
@media (max-width:1080px){ .grid-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-cards{grid-template-columns:1fr;} }

/* Supply grid (icons) */
.supply-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.supply-item{
  border:1px solid var(--line); padding:26px 18px; text-align:left; background:var(--white);
  transition:border-color .25s, box-shadow .25s; min-height:140px; display:flex; flex-direction:column; justify-content:space-between;
}
.supply-item:hover{border-color:var(--brass); box-shadow:var(--shadow);}
.supply-item .icon{width:30px; height:30px; color:var(--brass);}
.supply-item span{font-size:14px; font-weight:500; margin-top:14px;}
@media (max-width:1080px){ .supply-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .supply-grid{grid-template-columns:repeat(2,1fr);} }

/* Services list */
.services-list{border-top:1px solid var(--line);}
.service-row{
  display:grid; grid-template-columns:60px 1.4fr 1fr 90px; gap:24px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line); transition:padding-left .3s;
}
.service-row:hover{padding-left:14px; background:rgba(200,147,43,0.04);}
.service-row .si{font-family:'Fraunces',serif; color:var(--brass); font-size:14px;}
.service-row h3{font-size:21px;}
.service-row p{font-size:14px; color:var(--ink-70);}
.service-row .arrow{justify-self:end; font-size:20px; color:var(--ink-50); transition:transform .3s;}
.service-row:hover .arrow{transform:translateX(6px); color:var(--brass);}
@media (max-width:760px){ .service-row{grid-template-columns:1fr; gap:8px; text-align:left;} .service-row .arrow{display:none;} }

/* Why us */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.why-item{padding-top:22px; border-top:2px solid var(--brass);}
.why-item .num{font-family:'Fraunces',serif; font-size:30px; color:var(--brass-light);}
.why-item h4{font-size:18px; margin:14px 0 8px; color:var(--white);}
.why-item p{font-size:14px;}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* Process / workflow diagram */
.workflow{display:flex; gap:0; overflow-x:auto; padding-bottom:10px;}
.wf-step{flex:1; min-width:200px; position:relative; padding:28px 26px 28px 0;}
.wf-step:not(:last-child)::after{content:'→'; position:absolute; right:-2px; top:30px; color:var(--brass); font-size:18px;}
.wf-step .num{font-family:'Fraunces',serif; font-size:34px; color:var(--brass); display:block; margin-bottom:10px;}
.wf-step h4{font-size:15.5px; margin-bottom:6px;}
.wf-step p{font-size:13px; color:var(--ink-70);}
@media (max-width:900px){ .workflow{flex-direction:column;} .wf-step::after{display:none;} }

/* Testimonials */
.testi-track{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{background:var(--white); border:1px solid var(--line); padding:34px; display:flex; flex-direction:column; justify-content:space-between; min-height:240px;}
.testi-card .quote{font-family:'Fraunces',serif; font-size:17px; line-height:1.5; color:var(--ink);}
.testi-card .who{margin-top:22px; font-size:13px; color:var(--ink-70); border-top:1px solid var(--line); padding-top:14px;}
.testi-card .who b{color:var(--ink); display:block; font-weight:600;}
@media (max-width:980px){ .testi-track{grid-template-columns:1fr;} }

/* World map / global trade */
.map-wrap{position:relative; background:var(--ink); padding:60px 0;}
.map-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:50px;}
.map-stat{border-left:1px solid rgba(255,255,255,0.18); padding-left:20px;}
.map-stat .num{font-family:'Fraunces',serif; color:var(--brass-light); font-size:32px;}
.map-stat .label{color:var(--white-50); font-size:12.5px; letter-spacing:.05em; margin-top:6px;}
@media (max-width:760px){ .map-stats{grid-template-columns:1fr 1fr;} }

/* Newsletter */
.newsletter{
  background:var(--brass); color:var(--ink);
}
.newsletter .wrap{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; padding:64px 48px;}
.newsletter h3{font-size:26px; max-width:18ch;}
.newsletter p{font-size:14px; margin-top:8px; color:rgba(11,28,44,.75);}
.news-form{display:flex; gap:0; max-width:420px; width:100%;}
.news-form input{flex:1; border:1px solid var(--ink); background:transparent; padding:14px 16px; font-size:14px; color:var(--ink);}
.news-form input::placeholder{color:rgba(11,28,44,.55);}
.news-form button{background:var(--ink); color:var(--white); border:1px solid var(--ink); padding:14px 24px; font-size:13px; font-weight:600;}
.news-form button:hover{background:transparent; color:var(--ink);}

/* CTA band */
.cta-band{background:var(--ink); color:var(--white); text-align:center; padding:100px 0;}
.cta-band .eyebrow{justify-content:center;}
.cta-band h2{color:var(--white); margin:18px auto 28px; max-width:18ch;}
.cta-band .actions{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}

/* Forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-50); margin-bottom:8px; font-weight:600;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); background:var(--white); padding:14px 16px; font-size:14.5px; color:var(--ink); font-family:inherit;
}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--brass);}
.contact-card{background:var(--white); border:1px solid var(--line); padding:48px; box-shadow:var(--shadow);}
.form-note{font-size:12.5px; color:var(--ink-50); margin-top:16px;}
.form-success{display:none; background:#173B27; color:#BFEBD4; padding:18px 20px; font-size:14px; margin-bottom:20px; border-left:3px solid #3FAE6E;}
.form-success.show{display:block;}

/* Footer */
footer{background:var(--charcoal); color:var(--white-70); padding-top:90px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand .brand{margin-bottom:18px;}
.footer-brand .brand .name{color:var(--white);}
.footer-brand .brand .name small{color:var(--white-50);}
.footer-brand p{font-size:13.5px; line-height:1.7; max-width:32ch;}
.footer-col h5{color:var(--white); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; font-weight:600;}
.footer-col ul li a{display:block; font-size:14px; padding:6px 0; transition:color .2s; color:var(--white-70);}
.footer-col ul li a:hover{color:var(--brass-light);}
.footer-col .addr{font-size:13.5px; line-height:1.7; margin-bottom:18px;}
.footer-col .addr b{color:var(--white); display:block; font-size:13px; margin-bottom:4px;}
.social-row{display:flex; gap:12px; margin-top:18px;}
.social-row a{width:34px; height:34px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; border-radius:50%; transition:.25s;}
.social-row a:hover{background:var(--brass); border-color:var(--brass); color:var(--ink);}
.footer-bottom{display:flex; justify-content:space-between; padding:26px 0; font-size:12.5px; color:var(--white-50); flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:var(--white-50);}
.footer-bottom a:hover{color:var(--brass-light);}
@media (max-width:1080px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:50px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }

/* WhatsApp float */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:300;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px; height:30px;}

/* Breadcrumb / page hero (sub pages) */
.page-hero{background:var(--ink); color:var(--white); padding:170px 0 80px;}
.page-hero .eyebrow{color:var(--brass-light);}
.page-hero .eyebrow::before{background:var(--brass-light);}
.page-hero h1{color:var(--white); font-size:clamp(34px,5vw,56px); margin-top:18px; max-width:22ch;}
.page-hero p{color:var(--white-70); max-width:50ch; margin-top:18px; font-size:16px;}
.crumb{font-size:12.5px; color:var(--white-50); margin-top:24px;}
.crumb a{color:var(--white-70);}
.crumb a:hover{color:var(--brass-light);}

/* Stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--white);}
.stat-strip .s{padding:36px 28px; border-right:1px solid var(--line);}
.stat-strip .s:last-child{border-right:none;}
.stat-strip .num{font-family:'Fraunces',serif; font-size:36px; color:var(--brass);}
.stat-strip .label{font-size:12.5px; color:var(--ink-70); margin-top:6px;}
@media (max-width:760px){ .stat-strip{grid-template-columns:1fr 1fr;} .stat-strip .s:nth-child(2n){border-right:none;} }

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} }

.tag-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.tag-list span{border:1px solid var(--line); padding:7px 14px; font-size:12.5px; color:var(--ink-70);}

.timeline{position:relative; padding-left:34px; border-left:1px solid var(--line);}
.t-item{position:relative; padding-bottom:44px;}
.t-item::before{content:''; position:absolute; left:-40px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--brass); border:3px solid var(--paper);}
.t-item .yr{font-family:'Fraunces',serif; color:var(--brass); font-size:18px;}
.t-item h4{margin:6px 0;}
.t-item p{font-size:14px; color:var(--ink-70); max-width:50ch;}

.acc-item{border-bottom:1px solid var(--line);}
.acc-item button{width:100%; display:flex; justify-content:space-between; align-items:center; padding:24px 0; background:none; border:none; text-align:left; font-size:16.5px; font-weight:500; color:var(--ink); font-family:'Fraunces',serif;}
.acc-item .plus{font-size:20px; color:var(--brass); transition:transform .3s;}
.acc-item.open .plus{transform:rotate(45deg);}
.acc-body{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.acc-body p{padding-bottom:24px; font-size:14.5px; color:var(--ink-70); max-width:62ch;}

.faq-cats{display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap;}
.faq-cats button{border:1px solid var(--line); background:var(--white); padding:10px 18px; font-size:13px; font-weight:500;}
.faq-cats button.active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.project-card{position:relative; aspect-ratio:4/5; background:linear-gradient(160deg,#142436,#0B1C2C); overflow:hidden; border:1px solid var(--line);}
.project-card .pc-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; background:linear-gradient(180deg, transparent 40%, rgba(11,28,44,0.85) 100%);}
.project-card .pc-tag{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-light); font-weight:700;}
.project-card .pc-tag-light{color:var(--brass);}
.project-card h4{color:var(--white); font-size:19px; margin:8px 0 4px;}
.project-card p{color:var(--white-70); font-size:13px;}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:980px){ .proj-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .proj-grid{grid-template-columns:1fr;} }

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.blog-card{border:1px solid var(--line); background:var(--white);}
.blog-media{aspect-ratio:16/10; background:linear-gradient(150deg,#13263b,#0B1C2C);}
.blog-body{padding:24px;}
.blog-cat{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:700;}
.blog-body h4{font-size:18px; margin:10px 0 8px;}
.blog-body p{font-size:13.5px; color:var(--ink-70);}
.blog-meta{font-size:12px; color:var(--ink-50); margin-top:16px;}
@media (max-width:980px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .blog-grid{grid-template-columns:1fr;} }