/* ── HOMEPAGE-SPECIFIC (from design index.html <style>) ── */

.hero-bg { position:absolute; inset:0; background: linear-gradient(160deg,rgba(10,22,40,0.94) 0%,rgba(10,22,40,0.72) 50%,rgba(0,80,100,0.62) 100%), url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1920&q=80') center/cover; z-index:0; }
.hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(0,188,212,0.08),transparent 60%); }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,188,212,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,188,212,0.04) 1px,transparent 1px); background-size:64px 64px; z-index:1; }
.hero-content { position:relative; z-index:2; max-width:1360px; margin:0 auto; padding:0 40px; width:100%; }
.h-eyebrow { font-family:var(--f-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--teal); margin-bottom:24px; display:flex; align-items:center; gap:12px; }
.h-eyebrow::before { content:''; display:block; width:40px; height:1px; background:var(--teal); }
.h-heading { font-family:var(--f-display); font-size:clamp(42px,5.5vw,82px); font-weight:700; line-height:1.06; color:var(--white); max-width:820px; margin-bottom:24px; }
.h-heading .teal { color:var(--teal); }
.h-sub { font-size:clamp(15px,1.4vw,18px); color:rgba(255,255,255,.62); max-width:520px; margin-bottom:40px; line-height:1.75; }
.h-ctas { display:flex; gap:16px; flex-wrap:wrap; }
 
.stat-bar-inner { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(0,188,212,.2); border-radius:var(--r-md); overflow:hidden; background:rgba(17,34,64,.88); backdrop-filter:blur(14px); }
.stat-item { padding:26px 30px; border-right:1px solid rgba(0,188,212,.15); position:relative; }
.stat-item:last-child { border-right:none; }
.stat-item::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--teal),transparent); opacity:0; transition:opacity var(--t); }
.stat-item:hover::before { opacity:1; }
.stat-num { font-family:var(--f-display); font-size:34px; font-weight:700; color:var(--teal); line-height:1; margin-bottom:4px; }
.stat-lbl { font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--fog); }
.scroll-ind { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-ind span { font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--fog); text-transform:uppercase; }
.scroll-arr { width:18px; height:18px; border-right:1.5px solid var(--teal); border-bottom:1.5px solid var(--teal); transform:rotate(45deg); animation:bounce 1.5s ease infinite; }

/* MILESTONE PROJECTS */
#projects { padding:96px 0; background:var(--wave-white); }
.proj-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.proj-header-left { max-width:480px; }
.proj-desc { color:var(--fog); font-size:15px; margin-top:10px; line-height:1.7; }
.proj-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; height:560px; }
.p-card { position:relative; overflow:hidden; cursor:pointer; }
.p-card.large { grid-row:span 2; }
.p-card-bg { position:absolute; inset:0; transition:transform .5s ease; }
.p-card:hover .p-card-bg { transform:scale(1.06); }
.p-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,22,40,.92) 0%,transparent 55%); transition:background var(--t); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; }
.p-card:hover .p-card-overlay { background:linear-gradient(to top,rgba(10,22,40,.97) 0%,rgba(10,22,40,.3) 100%); }
.p-type { font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; }
.p-name { font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--white); line-height:1.3; margin-bottom:5px; }
.p-card.large .p-name { font-size:22px; }
.p-spec { font-family:var(--f-mono); font-size:10px; color:rgba(255,255,255,.45); letter-spacing:.08em; margin-bottom:12px; }
.p-link { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); text-decoration:none; opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; }
.p-card:hover .p-link { opacity:1; transform:translateY(0); }
.p-link::after { content:'→'; }

/* SERVICES */
#services { padding:96px 0; background:var(--deep-ocean); }
.svc-intro { max-width:580px; margin-bottom:56px; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-bottom:3px; }
.svc-card { background:var(--naval-blue); padding:36px 32px; position:relative; overflow:hidden; cursor:pointer; transition:background var(--t); text-decoration:none; display:block; }
.svc-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.svc-card:hover { background:var(--steel-grey); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon { width:44px; height:44px; margin-bottom:24px; color:var(--teal); }
.svc-card-title { font-family:var(--f-display); font-size:17px; font-weight:600; color:var(--white); margin-bottom:10px; line-height:1.3; }
.svc-card-desc { font-size:14px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:20px; }
.svc-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.svc-cta-link { font-family:var(--f-body); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:6px; transition:gap var(--t); }
.svc-card:hover .svc-cta-link { gap:10px; }
.svc-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.svc-mini-card { background:rgba(17,34,64,.6); border:1px solid rgba(0,188,212,.08); padding:24px 28px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:background var(--t),border-color var(--t); text-decoration:none; }
.svc-mini-card:hover { background:rgba(0,188,212,.07); border-color:rgba(0,188,212,.28); }
.svc-mini-icon { width:32px; height:32px; flex-shrink:0; color:var(--teal); }
.svc-mini-title { font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--white); }

/* ACHIEVEMENTS */
#achievements { padding:96px 0; background:var(--naval-blue); position:relative; overflow:hidden; }
.ach-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--f-display); font-size:220px; font-weight:700; color:rgba(0,188,212,.025); white-space:nowrap; pointer-events:none; user-select:none; }
.ach-inner { position:relative; z-index:1; text-align:center; }
.ach-title { font-family:var(--f-display); font-size:clamp(26px,3vw,40px); font-weight:700; color:var(--white); margin-bottom:10px; }
.ach-sub { color:rgba(255,255,255,.48); font-size:16px; margin-bottom:64px; max-width:500px; margin-left:auto; margin-right:auto; }
.ach-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.ach-item { padding:44px 28px; background:rgba(10,22,40,.5); position:relative; }
.ach-item::before { content:''; position:absolute; top:0; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,var(--teal),transparent); }
.ach-num { font-family:var(--f-display); font-size:clamp(48px,5vw,70px); font-weight:700; color:var(--teal); line-height:1; margin-bottom:8px; letter-spacing:-.02em; }
.ach-divider { width:28px; height:2px; background:var(--teal); margin:14px auto; opacity:.5; }
.ach-lbl { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); line-height:1.6; }

/* ABOUT STRIP */
#about-strip { padding:96px 0; background:var(--wave-white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-vis { position:relative; }
.about-img-ph { width:100%; aspect-ratio:3/3; background:linear-gradient(135deg,var(--naval-blue),var(--steel-grey)); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.about-img-ph::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(0,188,212,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,188,212,.06) 1px,transparent 1px); background-size:32px 32px; }
.about-ph-sym { font-family:var(--f-display); font-size:130px; font-weight:700; color:rgba(0,188,212,.07); position:relative; z-index:1; }
.cert-badge { position:absolute; bottom:-18px; right:-18px; background:var(--deep-ocean); padding:18px 22px; border-radius:var(--r-md); border:1px solid rgba(0,188,212,.2); box-shadow:var(--shadow); }
.cert-badge-lbl { font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
.cert-logos { display:flex; gap:10px; }
.cert-logo { width:34px; height:34px; background:rgba(0,188,212,.08); border:1px solid rgba(0,188,212,.2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:8px; font-weight:500; color:var(--teal); letter-spacing:.04em; }
.about-text { color:var(--charcoal); font-size:16px; line-height:1.8; margin-bottom:14px; }
.diff-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:36px 0; }
.diff-item { display:flex; align-items:flex-start; gap:12px; }
.diff-icon { width:34px; height:34px; background:rgba(0,188,212,.1); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal); }
.diff-title { font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--charcoal); margin-bottom:2px; }
.diff-desc { font-size:12px; color:var(--fog); line-height:1.5; }

/* CLIENTS */
#clients { padding:72px 0; background:var(--deep-ocean); overflow:hidden; position:relative; }
.clients-hd { text-align:center; margin-bottom:44px; position:relative; z-index:1; }

/* NEWS */
#news { padding:96px 0; background:var(--wave-white); }
.news-hd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.n-card { background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:0 2px 14px rgba(0,0,0,.06); transition:transform var(--t),box-shadow var(--t); text-decoration:none; display:block; }
.n-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.n-img { aspect-ratio:16/9; background:linear-gradient(135deg,var(--naval-blue),var(--steel-grey)); position:relative; display:flex; align-items:center; justify-content:center; }
.n-cat { position:absolute; top:12px; left:12px; padding:3px 10px; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; background:var(--teal); color:var(--deep-ocean); font-weight:500; }
.n-body { padding:22px; }
.n-date { font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--fog); text-transform:uppercase; margin-bottom:9px; }
.n-title { font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--charcoal); line-height:1.4; margin-bottom:9px; }
.n-exc { font-size:13px; color:var(--fog); line-height:1.6; margin-bottom:16px; }
.n-read { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:5px; }

/* VESSEL SVG BACKGROUNDS */
.bg-cargo { background:linear-gradient(135deg,#0d2b45,#1a4a6b); }
.bg-special { background:linear-gradient(135deg,#0a2340,#163d5f); }
.bg-service { background:linear-gradient(135deg,#091e35,#153350); }
.bg-analysis { background:linear-gradient(135deg,#112240,#243b55); }
.bg-barge { background:linear-gradient(135deg,#0d2b45,#1b3e58); }
.svg-overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.2; }

@media(max-width:1024px){ .proj-grid{grid-template-columns:1fr 1fr;height:auto;} .p-card.large{grid-row:auto;aspect-ratio:4/3;} .svc-grid,.svc-mini,.ach-grid{grid-template-columns:1fr 1fr;} .about-grid{grid-template-columns:1fr;gap:40px;} .news-grid{grid-template-columns:1fr 1fr;} .stat-bar-inner{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){ .proj-grid,.news-grid,.svc-grid,.svc-mini{grid-template-columns:1fr;} .ach-grid{grid-template-columns:1fr 1fr;} .proj-header,.news-hd{flex-direction:column;gap:16px;align-items:flex-start;} .hero-content,.stat-bar{padding:0 20px;} .diff-grid{grid-template-columns:1fr;} .cert-badge{right:0;} }