/*
Theme Name: Dynamic Engineers
Theme URI: https://dynamicengineers.org
Author: Dynamic Engineers
Author URI: https://dynamicengineers.org
Description: Custom marine and industrial engineering theme for Dynamic Engineers, Puducherry — built around a WebGL animated hero, real project photography, and the firm's ISO 9001:2015 credentials.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: dynamic-engineers
*/



/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#071B2E;
  --navy:#0E2A46;
  --navy-2:#123353;
  --navy-3:#1B4770;
  --steel:#9FB3C4;
  --steel-dim:#5E7488;
  --paper:#EEF1F3;
  --paper-2:#E3E8EC;
  --paper-ink:#0E2A46;
  --gold:#F2B705;
  --gold-deep:#C98A00;
  --rust:#8A3420;
  --white:#FFFFFF;
  --line:rgba(255,255,255,0.14);
  --line-soft:rgba(255,255,255,0.08);
  --line-dark:rgba(14,42,70,0.14);
  --shadow-lg:0 30px 70px rgba(3,10,20,0.38);
  --shadow-md:0 14px 34px rgba(3,10,20,0.28);
  --radius-s:3px;
  --radius-m:8px;
  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body-f:'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#071B2E; --navy:#0E2A46; --paper:#EEF1F3; --white:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --ink:#071B2E; --navy:#0E2A46; --paper:#EEF1F3; --white:#FFFFFF;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body-f);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:800; letter-spacing:0.002em; line-height:1.02;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
.no-scroll{overflow:hidden;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding:clamp(64px,9vw,128px) 0;}
.section--paper{background:var(--paper); color:var(--paper-ink);}
.section--navy{background:var(--navy);}
.section--ink{background:var(--ink);}

.eyebrow-none{display:none;} /* intentionally unused: no all-caps eyebrow labels */

.kicker{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:var(--gold);
  margin-bottom:14px;
  display:block;
}
.section--paper .kicker{color:var(--gold-deep);}

h2.h-lg{font-size:clamp(2rem, 3.6vw, 3.1rem); max-width:14ch;}
.lede{font-size:clamp(1.02rem,1.3vw,1.18rem); max-width:56ch; line-height:1.6; color:var(--steel);}
.section--paper .lede{color:#3C5670;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body-f); font-weight:600; font-size:0.98rem;
  padding:14px 26px; border-radius:var(--radius-s);
  border:1.5px solid transparent; text-decoration:none;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn--gold{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.btn--gold:hover{background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px);}
.btn--outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4);}
.btn--outline:hover{border-color:var(--white); transform:translateY(-2px);}
.btn--navy{background:var(--navy); color:var(--white); border-color:var(--navy);}
.btn--navy:hover{background:var(--navy-3); border-color:var(--navy-3); transform:translateY(-2px);}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none;} }

.icon{width:26px; height:26px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:background 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,27,46,0.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.site-header__row{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white);}
.brand__mark{width:46px; height:46px; border-radius:9px; overflow:hidden; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.brand__mark img{width:100%; height:100%; object-fit:cover;}
.brand__text{display:flex; flex-direction:column; line-height:1.1;}
.brand__name{font-family:var(--display); font-weight:800; font-size:1.22rem; letter-spacing:0.01em;}
.brand__sub{font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; color:var(--steel); margin-top:3px;}

.site-nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);}
.site-nav a{
  font-size:0.92rem; font-weight:500; text-decoration:none; color:var(--white);
  opacity:0.85; position:relative; padding:4px 0;
}
.site-nav a:hover{opacity:1;}
.site-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.2s ease;
}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav__cta{margin-left:6px;}

.nav-toggle{display:none; background:none; border:none; color:var(--white); padding:6px;}
.nav-toggle .icon{width:28px; height:28px;}

@media (max-width: 880px){
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); height:100vh; height:100svh;
    background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 40px; gap:26px; transform:translateX(100%);
    transition:transform 0.3s ease; box-shadow:-20px 0 50px rgba(0,0,0,0.4);
  }
  .site-nav.is-open{transform:translateX(0);}
  .site-nav a{font-size:1.15rem;}
  .site-nav__cta{margin-left:0;}
  .nav-toggle{display:block;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(180deg,#0A2038 0%, #071B2C 55%, #050F1A 100%);
}
.hero__scene{position:absolute; inset:0; z-index:0; overflow:hidden; background:#050F1A;}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:0.5;
}

.hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,13,22,0.62) 0%, rgba(5,13,22,0.12) 20%, rgba(5,13,22,0.08) 56%, rgba(5,13,22,0.8) 100%);
}
.hero__content{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:150px var(--gutter) 0;
}
.hero__title{
  font-size:clamp(2.6rem, 7vw, 5.4rem); color:var(--white);
  text-shadow:0 4px 30px rgba(0,0,0,0.45);
  max-width:16ch;
}
.hero__lede{
  margin-top:22px; font-size:clamp(1.02rem,1.6vw,1.24rem); max-width:52ch;
  color:#DCE6EE; text-shadow:0 2px 16px rgba(0,0,0,0.5); line-height:1.6;
}
.hero__actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:36px;}

.hero__stats{
  position:relative; z-index:2; max-width:var(--maxw); margin:52px auto 0; width:100%;
  display:flex; gap:clamp(24px,4vw,64px); flex-wrap:wrap;
  padding:22px var(--gutter) 44px; border-top:1px solid rgba(255,255,255,0.16);
}
.hero__stat{display:flex; flex-direction:column; gap:4px;}
.hero__stat-num{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3vw,2.5rem); color:var(--gold); line-height:1;}
.hero__stat-label{font-size:0.86rem; color:var(--steel);}

.hero__scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:14px; transform:translateX(-50%);
  color:rgba(255,255,255,0.7); animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }
@media (prefers-reduced-motion: reduce){ .hero__scroll-cue{animation:none;} }
@media (max-width:640px){ .hero__scroll-cue{display:none;} }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,90px); align-items:start; margin-top:44px;
}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} }

.about-body p + p{margin-top:18px;}
.about-body{color:#33506C; font-size:1.02rem;}

.md-card{
  margin-top:34px; padding:22px 24px; background:var(--white); border:1px solid var(--line-dark);
  border-radius:var(--radius-m); display:flex; gap:16px; align-items:flex-start;
}
.md-card .icon{color:var(--gold-deep); margin-top:2px;}
.md-card h4{font-family:var(--body-f); font-weight:700; font-size:1.02rem; color:var(--paper-ink);}
.md-card p{font-size:0.92rem; color:#4B6580; margin-top:4px;}

.fac-list{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.fac-list li{display:flex; gap:14px; align-items:flex-start; font-size:0.98rem; color:#33506C;}
.fac-list .icon{color:var(--gold-deep); margin-top:2px;}

.about-photo{border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-md);}
.about-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;}
.about-photo-cap{font-family:var(--mono); font-size:0.72rem; color:var(--steel-dim); margin-top:10px;}

/* ============================================================
   CAPABILITIES (services + fleet)
   ============================================================ */
.cap-intro{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.subhead{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.2vw,1.9rem); margin-top:60px; margin-bottom:8px; color:var(--white);}
.subhead-lede{color:var(--steel); max-width:58ch; margin-bottom:30px; font-size:1rem;}

.svc-groups{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,50px); margin-top:6px;}
@media (max-width:860px){ .svc-groups{grid-template-columns:1fr;} }
.svc-group h3{font-family:var(--body-f); font-weight:700; font-size:1.05rem; color:var(--gold); margin-bottom:18px; letter-spacing:0.01em;}
.svc-card{padding:18px 0; border-top:1px solid var(--line-soft);}
.svc-card:last-child{border-bottom:1px solid var(--line-soft);}
.svc-card h4{font-family:var(--body-f); font-weight:600; font-size:1.02rem; color:var(--white); margin-bottom:6px;}
.svc-card p{font-size:0.92rem; color:var(--steel); line-height:1.55;}

.fleet-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  margin-top:10px; border:1px solid var(--line-soft); border-radius:var(--radius-m); overflow:hidden;
}
@media (max-width:760px){ .fleet-stats{grid-template-columns:1fr 1fr;} }
.fleet-stat{background:var(--navy); padding:26px 22px;}
.fleet-stat-num{font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--gold);}
.fleet-stat-label{font-size:0.86rem; color:var(--steel); margin-top:6px; max-width:20ch;}

.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px;}
@media (max-width:860px){ .team-grid{grid-template-columns:1fr 1fr;} }
.team-card{border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:20px;}
.team-card-count{font-family:var(--mono); font-size:1.5rem; color:var(--gold);}
.team-card h5{font-family:var(--body-f); font-weight:600; font-size:0.95rem; color:var(--white); margin:6px 0 8px;}
.team-card p{font-size:0.82rem; color:var(--steel); line-height:1.5;}

.equip-wrap{margin-top:36px; border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:26px 28px;}
.equip-wrap h5{font-family:var(--body-f); font-weight:600; font-size:0.95rem; color:var(--white); margin-bottom:14px;}
.equip-chips{display:flex; flex-wrap:wrap; gap:9px;}
.equip-chip{
  font-family:var(--mono); font-size:0.78rem; color:var(--steel);
  border:1px solid var(--line-soft); border-radius:20px; padding:6px 14px;
}
.equip-chip--more{color:var(--gold); border-color:rgba(242,183,5,0.35);}

/* global partner banner */
.partner-banner{
  margin-top:56px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  padding:30px clamp(22px,4vw,42px); background:linear-gradient(120deg, var(--navy-3), var(--navy-2));
  border-radius:var(--radius-m); border:1px solid var(--line-soft);
}
@media (max-width:700px){ .partner-banner{grid-template-columns:1fr;} }
.partner-banner .icon{width:38px; height:38px; color:var(--gold);}
.partner-banner h4{font-family:var(--body-f); font-weight:700; font-size:1.05rem; color:var(--white); margin-bottom:8px;}
.partner-banner p{font-size:0.92rem; color:var(--steel); max-width:70ch;}

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; margin-bottom:34px;}
.proj-filter{
  background:transparent; border:1px solid var(--line-dark); color:#33506C;
  font-size:0.86rem; font-weight:500; padding:9px 18px; border-radius:20px;
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.proj-filter:hover{border-color:var(--gold-deep);}
.proj-filter.is-active{background:var(--paper-ink); color:var(--white); border-color:var(--paper-ink);}

.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .proj-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .proj-grid{grid-template-columns:1fr;} }

.proj-card{margin:0; border-radius:var(--radius-m); overflow:hidden;}
.proj-card__trigger{
  display:block; width:100%; padding:0; border:none; background:var(--navy); position:relative;
  border-radius:var(--radius-m); overflow:hidden; text-align:left;
}
.proj-card__trigger img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 0.4s ease;}
.proj-card__trigger:hover img{transform:scale(1.045);}
@media (prefers-reduced-motion: reduce){ .proj-card__trigger:hover img{transform:none;} }
.proj-card__cap{
  display:block; padding:13px 15px; font-size:0.86rem; color:var(--paper-ink); background:var(--white);
  line-height:1.4;
}

.track-record{
  margin-top:70px; padding-top:50px; border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:44px;
}
@media (max-width:860px){ .track-record{grid-template-columns:1fr;} }
.track-record h3{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--paper-ink); max-width:16ch;}
.track-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.track-list li{
  padding-left:20px; position:relative; font-size:0.95rem; color:#33506C; line-height:1.55;
}
.track-list li::before{
  content:''; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--gold-deep); border-radius:50%;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(4,10,18,0.94);
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity 0.22s ease;
}
.lightbox.is-open{opacity:1; pointer-events:auto;}
.lightbox__inner{max-width:min(1100px,92vw); max-height:88vh; width:100%;}
.lightbox__inner img{width:100%; max-height:74vh; object-fit:contain; border-radius:4px; background:#000;}
.lightbox__cap{color:var(--steel); font-size:0.92rem; margin-top:14px;}
.lightbox__close{
  position:absolute; top:22px; right:24px; background:none; border:none; color:var(--white); padding:8px;
}
.lightbox__close .icon{width:30px; height:30px;}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
@media (max-width:860px){ .cert-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .cert-grid{grid-template-columns:1fr;} }
.cert-card{
  background:var(--white); border:1px solid var(--line-dark); border-radius:var(--radius-m);
  padding:24px 22px; display:flex; gap:16px; align-items:flex-start;
}
.cert-card .icon{color:var(--gold-deep); flex-shrink:0; margin-top:2px;}
.cert-card h4{font-family:var(--body-f); font-weight:700; font-size:0.98rem; color:var(--paper-ink);}
.cert-card p{font-size:0.86rem; color:#4B6580; margin-top:5px; line-height:1.5;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); margin-top:44px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.contact-item{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line-soft);}
.contact-item:last-child{border-bottom:1px solid var(--line-soft);}
.contact-item .icon{color:var(--gold); margin-top:3px;}
.contact-item h5{font-family:var(--body-f); font-weight:600; font-size:0.92rem; color:var(--steel); margin-bottom:6px;}
.contact-item a, .contact-item p{font-size:1.02rem; color:var(--white); text-decoration:none;}
.contact-item a:hover{color:var(--gold);}

.contact-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

.contact-panel{
  background:var(--navy); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:clamp(26px,4vw,44px);
}
.contact-panel h3{font-family:var(--display); font-weight:700; font-size:1.4rem; margin-bottom:18px;}
.map-graphic{
  border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-soft); margin-top:26px; position:relative;
  aspect-ratio:16/10; background:var(--navy-2);
}
.map-graphic svg{width:100%; height:100%;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:60px 0 34px; background:#04101C; border-top:1px solid var(--line-soft);}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line-soft);}
.footer-brand{max-width:340px;}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{font-size:0.9rem; color:var(--steel-dim); line-height:1.6;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h6{font-family:var(--body-f); font-weight:600; font-size:0.86rem; color:var(--white); margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.footer-col a{font-size:0.88rem; color:var(--steel-dim); text-decoration:none;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px;
  font-size:0.8rem; color:var(--steel-dim);
}
.footer-bottom .trust{font-family:var(--mono); font-size:0.72rem;}



/* ============================================================
   GENERIC PAGE TEMPLATE (page.php) — banner + editor content
   ============================================================ */
.page-banner{
  padding:170px 0 56px; background:linear-gradient(180deg,#0A2038 0%, #071B2C 100%);
  border-bottom:1px solid var(--line-soft);
}
.page-banner h1{color:var(--white); font-size:clamp(2.2rem,4.4vw,3.4rem); max-width:18ch;}

.entry-content{padding-top:56px; padding-bottom:20px; max-width:74ch;}
.entry-content h2{font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:1.6em 0 0.5em; color:var(--paper-ink);}
.entry-content h3{font-family:var(--body-f); font-weight:700; font-size:1.2rem; margin:1.4em 0 0.5em; color:var(--paper-ink);}
.entry-content p{margin:0 0 1.1em; color:#33506C; font-size:1.02rem; line-height:1.7;}
.entry-content a{color:var(--gold-deep); text-decoration:underline;}
.entry-content ul, .entry-content ol{margin:0 0 1.2em; padding-left:1.4em; color:#33506C;}
.entry-content li{margin-bottom:0.5em;}
.entry-content img{border-radius:var(--radius-m); margin:1.4em 0; box-shadow:var(--shadow-md);}
.entry-content blockquote{
  margin:1.6em 0; padding:6px 0 6px 22px; border-left:3px solid var(--gold-deep);
  color:#4B6580; font-style:italic; font-size:1.05rem;
}
.entry-content figcaption{font-family:var(--mono); font-size:0.78rem; color:var(--steel-dim); margin-top:-1em; margin-bottom:1.4em;}

/* WP core alignment helpers, used by the block editor */
.alignwide{margin-left:calc(50% - 50vw + 1px); margin-right:calc(50% - 50vw + 1px); max-width:1100px;}
.alignfull{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none;}
.aligncenter{margin-left:auto; margin-right:auto;}